fix: scroll & chat switch (#170)

* fix: scroll & chat switch * chore: scroll * chore: chat scroll
infinilabs · Feb 24, 2025 · aba3c92 · aba3c92
1 parent 7731008
commit aba3c92
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 9 deletions.
diff --git a/src/components/Assistant/Chat.tsx b/src/components/Assistant/Chat.tsx
@@ -66,8 +66,14 @@ const ChatAI = memo(
 
       const { createWin } = useWindows();
 
-      const { curChatEnd, setCurChatEnd, connected, setConnected, messages, setMessages } =
-        useChatStore();
+      const {
+        curChatEnd,
+        setCurChatEnd,
+        connected,
+        setConnected,
+        messages,
+        setMessages,
+      } = useChatStore();
       const activeServer = useAppStore((state) => state.activeServer);
 
       const [activeChat, setActiveChat] = useState<Chat>();
@@ -196,16 +202,60 @@ const ChatAI = memo(
         }
       }, [curChatEnd]);
 
+      const [userScrolling, setUserScrolling] = useState(false);
+      const scrollTimeoutRef = useRef<NodeJS.Timeout>();
+
       const scrollToBottom = useCallback(
         debounce(() => {
-          messagesEndRef.current?.scrollIntoView({
-            behavior: "smooth",
-            block: "end",
-          });
+          if (!userScrolling) {
+            const container = messagesEndRef.current?.parentElement;
+            if (container) {
+              container.scrollTo({
+                top: container.scrollHeight,
+                behavior: "smooth"
+              });
+            }
+          }
         }, 100),
-        []
+        [userScrolling]
       );
 
+      useEffect(() => {
+        const container = messagesEndRef.current?.parentElement;
+        if (!container) return;
+
+        const handleScroll = () => {
+          if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current);
+          }
+
+          const { scrollTop, scrollHeight, clientHeight } = container;
+          const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+
+          setUserScrolling(!isAtBottom);
+
+          if (isAtBottom) {
+            setUserScrolling(false);
+          }
+
+          scrollTimeoutRef.current = setTimeout(() => {
+            const { scrollTop: newScrollTop, scrollHeight: newScrollHeight, clientHeight: newClientHeight } = container;
+            const nowAtBottom = Math.abs(newScrollHeight - newScrollTop - newClientHeight) < 10;
+            if (nowAtBottom) {
+              setUserScrolling(false);
+            }
+          }, 500);
+        };
+
+        container.addEventListener('scroll', handleScroll);
+        return () => {
+          container.removeEventListener('scroll', handleScroll);
+          if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current);
+          }
+        };
+      }, []);
+
       useEffect(() => {
         scrollToBottom();
       }, [activeChat?.messages, isTyping, curMessage]);
@@ -242,14 +292,18 @@ const ChatAI = memo(
           newChat = newChat || activeChat;
           if (!newChat?._id || !content) return;
           setTimedoutShow(false);
+
+          const messagePayload = {
+            message: content
+          };
           try {
             const response = await tauriFetch({
               url: `/chat/${newChat?._id}/_send?search=${isSearchActive}&deep_thinking=${isDeepThinkActive}`,
               method: "POST",
               headers: {
                 "WEBSOCKET-SESSION-ID": websocketIdRef.current,
               },
-              body: JSON.stringify({ message: content }),
+              body: JSON.stringify(messagePayload),
             });
             console.log("_send", response, websocketIdRef.current);
             curIdRef.current = response.data[0]?._id;

diff --git a/src/components/Assistant/ChatHeader.tsx b/src/components/Assistant/ChatHeader.tsx
@@ -96,6 +96,7 @@ export function ChatHeader({ onCreateNewChat, onOpenChatAI }: ChatHeaderProps) {
   };
 
   const switchServer = async (server: IServer) => {
+    onCreateNewChat();
     try {
       await disconnect();
       await connect(server);

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -109,7 +109,7 @@ const Footer = () => {
 
                 <div className="flex items-center space-x-4">
           <span className="text-xs text-gray-500 dark:text-gray-400">
-            Version 1.0.0
+            Version {process.env.VERSION || "v1.0.0"}
           </span>
                     {/* <div className="h-4 w-px bg-gray-200 dark:bg-gray-700" />
           <button className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">