fix autoscroll

knoopx · Nov 6, 2023 · bb6a6da · bb6a6da
1 parent b1598ae
commit bb6a6da
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 58 deletions.
diff --git a/src/app/ChatConversation.tsx b/src/app/ChatConversation.tsx
@@ -10,6 +10,10 @@ import { cn } from "@/lib/utils"
 import { AutoTextarea } from "../components/AutoTextarea"
 import { html2md } from "@/lib/utils"
 import { extractHTML } from "@/lib/utils"
+import { useEffect, useRef } from "react"
+import { Instance } from "mobx-state-tree"
+import { Chat } from "@/store/Chat"
+import { toJS } from "mobx"
 
 const PromptInput = observer(() => {
   const {
@@ -47,55 +51,68 @@ const PromptInput = observer(() => {
   )
 })
 
-export const ChatConversation = observer(({ chat }) => {
-  return (
-    <div className="flex flex-col">
-      <ScrollArea className="flex-auto">
-        <div className="flex flex-auto flex-col items-center">
-          {chat.messages.map((message, i) => (
-            <ChatConversationMessage key={i} message={message} />
-          ))}
-        </div>
-      </ScrollArea>
-      <div
-        className={cn(
-          "flex-none flex-col flex items-center space-x-4 space-y-2 p-8 min-h-0 mx-auto min-w-[65ch]",
-          {
-            hidden: !chat.agent,
-          },
-        )}
-      >
-        <div className="space-x-1">
-          {chat.isRunning ? (
+export const ChatConversation = observer(
+  ({ chat }: { chat: Instance<typeof Chat> }) => {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+      const scrollContainer = ref.current?.querySelector(
+        "[data-radix-scroll-area-viewport]",
+      )
+      scrollContainer?.scrollTo({
+        top: scrollContainer.scrollHeight,
+        // behavior: "smooth",
+      })
+    }, [toJS(chat.messages)])
+
+    return (
+      <div className="flex flex-col">
+        <ScrollArea ref={ref} className="flex-auto">
+          <div className="flex flex-auto flex-col items-center">
+            {chat.messages.map((message, i) => (
+              <ChatConversationMessage key={i} message={message} />
+            ))}
+          </div>
+        </ScrollArea>
+        <div
+          className={cn(
+            "flex-none flex-col flex items-center space-x-4 space-y-2 p-8 min-h-0 mx-auto min-w-[65ch]",
+            {
+              hidden: !chat.agent,
+            },
+          )}
+        >
+          <div className="space-x-1">
+            {chat.isRunning ? (
               <Button
                 onClick={() => {
                   chat.abort()
                 }}
               >
                 <VscDebugStop size="1.5em" />
               </Button>
-          ) : (
-            <>
-              <Button onClick={chat.regenerate}>
-                <IoMdRefresh size="1.5em" />
-              </Button>
-              <Button onClick={() => chat.reply(false)}>
-                <VscDebugStart size="1.5em" />
-              </Button>
-              <Button onClick={chat.reply}>
-                <VscDebugContinue size="1.5em" />
-              </Button>
-              <Button onClick={chat.pop}>
-                <BiArrowToTop size="1.5em" />
-              </Button>
-              <Button onClick={chat.clear}>
-                <IoMdTrash size="1.5em" />
-              </Button>
-            </>
-          )}
+            ) : (
+              <>
+                <Button onClick={chat.regenerate}>
+                  <IoMdRefresh size="1.5em" />
+                </Button>
+                <Button onClick={() => chat.reply(false)}>
+                  <VscDebugStart size="1.5em" />
+                </Button>
+                <Button onClick={chat.reply}>
+                  <VscDebugContinue size="1.5em" />
+                </Button>
+                <Button onClick={chat.pop}>
+                  <BiArrowToTop size="1.5em" />
+                </Button>
+                <Button onClick={chat.clear}>
+                  <IoMdTrash size="1.5em" />
+                </Button>
+              </>
+            )}
+          </div>
+          <PromptInput />
         </div>
-        <PromptInput />
       </div>
-    </div>
-  )
-})
+    )
+  },
+)
diff --git a/src/app/ChatConversationMessage.tsx b/src/app/ChatConversationMessage.tsx
@@ -106,8 +106,6 @@ const MessageAvatar: React.FC<{
 ))
 
 export const ChatConversationMessage = observer(({ message }) => {
-  const ref = useRef(null)
-
   const { role, content, isEmpty, chat } = message
 
   const state = useLocalStore(() => ({
@@ -117,18 +115,6 @@ export const ChatConversationMessage = observer(({ message }) => {
     },
   }))
 
-  useEffect(() => {
-    if (message.chat.isRunning) {
-      const scrollContainer = ref.current?.closest(
-        "[data-radix-scroll-area-viewport]",
-      )
-      scrollContainer?.scrollTo({
-        top: scrollContainer.scrollHeight,
-        // behavior: "smooth",
-      })
-    }
-  }, [content])
-
   return (
     <ActionOverlay
       actions={
@@ -160,7 +146,7 @@ export const ChatConversationMessage = observer(({ message }) => {
         </MessageDropdownMenu>
       }
     >
-      <div ref={ref} className="flex flex-auto space-x-4 px-8 py-4 w-full">
+      <div className="flex flex-auto space-x-4 px-8 py-4 w-full">
         <MessageAvatar chat={chat} role={role} />
         <div className="flex flex-auto w-[65ch]">
           {state.isEditing ? (