From 3c2bde91b07894d42826cd924eb5f8015d576147 Mon Sep 17 00:00:00 2001
From: akhisud3195 <akhileshs.s4@gmail.com>
Date: Fri, 11 Jul 2025 20:34:14 +0530
Subject: [PATCH] Prevent forced auto-scroll in playground chat

---
 apps/rowboat/app/globals.css                  | 20 +++++
 .../playground/components/chat.tsx            | 80 ++++++++++++++-----
 .../playground/components/messages.tsx        | 46 +++++------
 3 files changed, 102 insertions(+), 44 deletions(-)

diff --git a/apps/rowboat/app/globals.css b/apps/rowboat/app/globals.css
index bb403e79..b475fd21 100644
--- a/apps/rowboat/app/globals.css
+++ b/apps/rowboat/app/globals.css
@@ -127,3 +127,23 @@ body {
   background: var(--background);
   color: var(--foreground);
 }
+
+/* Playground chat custom scrollbar: hide track background and border */
+.playground-scrollbar::-webkit-scrollbar {
+  width: 4px;
+  background: transparent !important;
+}
+.playground-scrollbar::-webkit-scrollbar-track {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+.playground-scrollbar::-webkit-scrollbar-thumb {
+  background: #9ca3af;
+  border-radius: 4px;
+}
+
+.playground-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #9ca3af transparent;
+}
diff --git a/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx b/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
index b933540c..4102cf68 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
@@ -12,6 +12,7 @@ import { WithStringId } from "@/app/lib/types/types";
 import { ProfileContextBox } from "./profile-context-box";
 import { USE_TESTING_FEATURE } from "@/app/lib/feature_flags";
 import { BillingUpgradeModal } from "@/components/common/billing-upgrade-modal";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
 export function Chat({
     chat,
@@ -51,6 +52,32 @@ export function Chat({
     const [optimisticMessages, setOptimisticMessages] = useState<z.infer<typeof Message>[]>(chat.messages);
     const [isLastInteracted, setIsLastInteracted] = useState(false);
 
+    // --- Scroll/auto-scroll/unread bubble logic ---
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const [autoScroll, setAutoScroll] = useState(true);
+    const [showUnreadBubble, setShowUnreadBubble] = useState(false);
+
+    const handleScroll = useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container) return;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const atBottom = scrollHeight - scrollTop - clientHeight < 20;
+        setAutoScroll(atBottom);
+        if (atBottom) setShowUnreadBubble(false);
+    }, []);
+
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container) return;
+        if (autoScroll) {
+            container.scrollTop = container.scrollHeight;
+            setShowUnreadBubble(false);
+        } else {
+            setShowUnreadBubble(true);
+        }
+    }, [optimisticMessages, loadingAssistantResponse, autoScroll]);
+    // --- End scroll/auto-scroll logic ---
+
     const getCopyContent = useCallback(() => {
         return JSON.stringify({
             messages: [{
@@ -255,25 +282,40 @@ export function Chat({
             )}
         </div>
 
-        <div className="flex-1 overflow-auto pr-1 
-            [&::-webkit-scrollbar]{width:4px}
-            [&::-webkit-scrollbar-track]{background:transparent}
-            [&::-webkit-scrollbar-thumb]{background-color:rgb(156 163 175)}
-            dark:[&::-webkit-scrollbar-thumb]{background-color:#2a2d31}">
-            <div className="pr-4">
-                <Messages
-                    projectId={projectId}
-                    messages={optimisticMessages}
-                    toolCallResults={toolCallResults}
-                    loadingAssistantResponse={loadingAssistantResponse}
-                    workflow={workflow}
-                    testProfile={testProfile}
-                    systemMessage={systemMessage}
-                    onSystemMessageChange={onSystemMessageChange}
-                    showSystemMessage={false}
-                    showDebugMessages={showDebugMessages}
-                />
-            </div>
+        <div
+            ref={scrollContainerRef}
+            onScroll={handleScroll}
+            className="flex-1 overflow-auto pr-4 relative playground-scrollbar"
+            style={{ scrollBehavior: 'smooth' }}
+        >
+            <Messages
+                projectId={projectId}
+                messages={optimisticMessages}
+                toolCallResults={toolCallResults}
+                loadingAssistantResponse={loadingAssistantResponse}
+                workflow={workflow}
+                testProfile={testProfile}
+                systemMessage={systemMessage}
+                onSystemMessageChange={onSystemMessageChange}
+                showSystemMessage={false}
+                showDebugMessages={showDebugMessages}
+            />
+            {showUnreadBubble && (
+                <button
+                    className="absolute bottom-4 right-4 z-20 bg-blue-100 text-blue-700 rounded-full w-8 h-8 flex items-center justify-center hover:bg-blue-200 transition-colors animate-pulse"
+                    onClick={() => {
+                        const container = scrollContainerRef.current;
+                        if (container) {
+                            container.scrollTop = container.scrollHeight;
+                        }
+                        setAutoScroll(true);
+                        setShowUnreadBubble(false);
+                    }}
+                    aria-label="Scroll to latest message"
+                >
+                    <ChevronDownIcon className="w-5 h-5" strokeWidth={2.2} />
+                </button>
+            )}
         </div>
 
         <div className="sticky bottom-0 bg-white dark:bg-zinc-900 pt-4 pb-2">
diff --git a/apps/rowboat/app/projects/[projectId]/playground/components/messages.tsx b/apps/rowboat/app/projects/[projectId]/playground/components/messages.tsx
index 37540ae5..f7357b43 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/components/messages.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/components/messages.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { Spinner } from "@heroui/react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 import z from "zod";
 import { Workflow } from "@/app/lib/types/workflow_types";
 import { WorkflowTool } from "@/app/lib/types/workflow_types";
@@ -360,13 +360,11 @@ export function Messages({
     showSystemMessage: boolean;
     showDebugMessages?: boolean;
 }) {
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    let lastUserMessageTimestamp = 0;
-    let userMessageSeen = false;
-
-    useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, [messages, loadingAssistantResponse]);
+    // Remove scroll/auto-scroll state and logic
+    // const scrollContainerRef = useRef<HTMLDivElement>(null);
+    // const [autoScroll, setAutoScroll] = useState(true);
+    // const [showUnreadBubble, setShowUnreadBubble] = useState(false);
+    // Remove handleScroll and useEffect for scroll
 
     const renderMessage = (message: z.infer<typeof Message>, index: number) => {
         if (message.role === 'assistant') {
@@ -427,7 +425,7 @@ export function Messages({
         if (message.role === 'user') {
             // TODO: add latency support
             // lastUserMessageTimestamp = new Date(message.createdAt).getTime();
-            userMessageSeen = true;
+            // userMessageSeen = true;
             return <UserMessage content={message.content} />;
         }
 
@@ -452,23 +450,21 @@ export function Messages({
         );
     }
 
+    // Just render the messages, no scroll container or unread bubble
     return (
-        <div className="max-w-[768px] mx-auto">
-            <div className="flex flex-col">
-                {messages.map((message, index) => {
-                    const renderedMessage = renderMessage(message, index);
-                    if (renderedMessage) {
-                        return (
-                            <div key={index}>
-                                {renderedMessage}
-                            </div>
-                        );
-                    }
-                    return null;
-                })}
-                {loadingAssistantResponse && <AssistantMessageLoading />}
-            </div>
-            <div ref={messagesEndRef} />
+        <div className="max-w-4xl mx-auto px-2 sm:px-6 relative">
+            {messages.map((message, index) => {
+                const renderedMessage = renderMessage(message, index);
+                if (renderedMessage) {
+                    return (
+                        <div key={index}>
+                            {renderedMessage}
+                        </div>
+                    );
+                }
+                return null;
+            })}
+            {loadingAssistantResponse && <AssistantMessageLoading />}
         </div>
     );
 }
\ No newline at end of file