From e39244cf6af88f69e1131ce78cf9017ca53bed10 Mon Sep 17 00:00:00 2001
From: serafettin <mail@serafettin.net>
Date: Tue, 25 Jun 2024 12:44:58 -0400
Subject: [PATCH] Scroll

---
 web-app/src/components/ai/chat-list.tsx       | 15 ++++++++++---
 .../site/indexes/AskIndexes/index.tsx         | 21 ++++++-------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/web-app/src/components/ai/chat-list.tsx b/web-app/src/components/ai/chat-list.tsx
index 590ace39..f295a03d 100644
--- a/web-app/src/components/ai/chat-list.tsx
+++ b/web-app/src/components/ai/chat-list.tsx
@@ -1,5 +1,6 @@
 import { type Message } from "ai";
 import { ChatMessage } from "components/ai/chat-message";
+import { useCallback, useEffect, useRef } from "react";
 
 export interface ChatListInterface {
   messages: Message[];
@@ -22,14 +23,21 @@ export const ChatList = ({
   handleSaveEdit,
   editingIndex,
 }: ChatListInterface) => {
-  if (!messages?.length) {
-    return null;
-  }
+  const bottomRef = useRef<null | HTMLDivElement>(null);
+  const scrollToBottom = useCallback(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [bottomRef]);
 
   const lastUserResponse = messages.findLast((message: Message) => {
     return message?.name === "basic_assistant";
   });
 
+  useEffect(() => {
+    setTimeout(() => {
+      scrollToBottom();
+    }, 150);
+  }, [messages, scrollToBottom]);
+
   return (
     <div>
       {messages.map((message, index) => (
@@ -47,6 +55,7 @@ export const ChatList = ({
           />
         </div>
       ))}
+      <div ref={bottomRef} />
     </div>
   );
 };
diff --git a/web-app/src/components/site/indexes/AskIndexes/index.tsx b/web-app/src/components/site/indexes/AskIndexes/index.tsx
index 5026be01..4c827ae0 100644
--- a/web-app/src/components/site/indexes/AskIndexes/index.tsx
+++ b/web-app/src/components/site/indexes/AskIndexes/index.tsx
@@ -78,8 +78,6 @@ const AskIndexes: FC<AskIndexesProps> = ({ sources }) => {
   const [input, setInput] = useState<string>("");
   const [defaultQuestions, setDefaultQuestions] = useState<string[]>([]);
 
-  const bottomRef = useRef<null | HTMLDivElement>(null);
-
   const fetchDefaultQuestions = useCallback(async (): Promise<void> => {
     if (!apiReady || !isIndex || !id) return;
     try {
@@ -214,14 +212,6 @@ const AskIndexes: FC<AskIndexesProps> = ({ sources }) => {
     session,
   ]);
 
-  const scrollToBottom = useCallback(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [bottomRef]);
-
-  useEffect(() => {
-    // scrollToBottom();
-  }, [viewedConversation, isLoading, scrollToBottom]);
-
   const stop = () => {
     setIsLoading(false);
     // TODO send stop signal to backend.
@@ -288,12 +278,14 @@ const AskIndexes: FC<AskIndexesProps> = ({ sources }) => {
 
   useEffect(() => {
     !viewedConversation && setStreamingMessages([]);
-    if (!isLocalUpdate.current) {
+    if (
+      !isLocalUpdate.current &&
       viewedConversation &&
-        viewedConversation.messages &&
-        setStreamingMessages(viewedConversation.messages);
+      viewedConversation.messages
+    ) {
+      setStreamingMessages(viewedConversation.messages);
+      isLocalUpdate.current = false;
     }
-    isLocalUpdate.current = false;
   }, [viewedConversation]);
 
   useEffect(() => {
@@ -361,7 +353,6 @@ const AskIndexes: FC<AskIndexesProps> = ({ sources }) => {
                   handleRegenerate={handleRegenerate}
                   editingIndex={editingIndex}
                 />
-                <div ref={bottomRef} />
                 <ChatScrollAnchor trackVisibility={isLoading} />
               </>
             ) : (