Fix chat sidebar scroll (#298)

* fix(chat): Use a global chat context to avoid duplicate states

* fix(chat): update chats list when creating a new chat

* fix(chat): scroll into view end

frontend/app/chat/components/ChatMessages/ChatMessage.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { cn } from "@/lib/utils";
-import { motion } from "framer-motion";
 import { forwardRef, Ref } from "react";
 import ReactMarkdown from "react-markdown";
 
@@ -16,17 +15,10 @@ const ChatMessage = forwardRef(
     ref
   ) => {
     return (
-      <motion.div
+      <div
         ref={ref as Ref<HTMLDivElement>}
-        initial={{ y: -24, opacity: 0 }}
-        animate={{
-          y: 0,
-          opacity: 1,
-          transition: { duration: 0.2, ease: "easeOut" },
-        }}
-        exit={{ y: -24, opacity: 0 }}
         className={cn(
-          "py-3 px-3 md:px-6 w-full dark:border-white/25 flex flex-col max-w-4xl overflow-hidden scroll-pt-32",
+          "py-3 px-3 md:px-6 w-full dark:border-white/25 flex flex-col max-w-4xl overflow-hidden scroll-pb-32",
           speaker === "user"
             ? ""
             : "bg-gray-200 dark:bg-gray-800 bg-opacity-60 py-8"
@@ -48,7 +40,7 @@ const ChatMessage = forwardRef(
             {text}
           </ReactMarkdown>
         </>
-      </motion.div>
+      </div>
     );
   }
 );

frontend/app/chat/components/ChatMessages/index.tsx

@@ -1,6 +1,5 @@
 "use client";
 import Card from "@/app/components/ui/Card";
-import { AnimatePresence } from "framer-motion";
 import { FC, useEffect, useRef } from "react";
 import useChatsContext from "../../ChatsProvider/hooks/useChatsContext";
 import ChatMessage from "./ChatMessage";
@@ -11,11 +10,16 @@ export const ChatMessages: FC = () => {
   const { chat } = useChatsContext();
 
   useEffect(() => {
-    if (!chat) return;
-    if (chat.history.length > 2) {
-      lastChatRef.current?.scrollIntoView({ behavior: "auto", block: "start" });
-    }
-  }, [chat]);
+    if (!chat || !lastChatRef.current) return;
+
+    // if (chat.history.length > 2) {
+    lastChatRef.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "end",
+    });
+    // }
+  }, [chat, lastChatRef]);
+
   if (!chat) return null;
 
   return (
@@ -26,18 +30,16 @@ export const ChatMessages: FC = () => {
             Ask a question, or describe a task.
           </div>
         ) : (
-          <AnimatePresence initial={false}>
-            {chat.history.map(([speaker, text], idx) => {
-              return (
-                <ChatMessage
-                  ref={idx === chat.history.length - 1 ? lastChatRef : null}
-                  key={idx}
-                  speaker={speaker}
-                  text={text}
-                />
-              );
-            })}
-          </AnimatePresence>
+          chat.history.map(([speaker, text], idx) => {
+            return (
+              <ChatMessage
+                ref={idx === chat.history.length - 1 ? lastChatRef : null}
+                key={idx}
+                speaker={speaker}
+                text={text}
+              />
+            );
+          })
         )}
       </div>
     </Card>