refactor: optimize chat window size in compact mode (#964)

src/components/Assistant/Chat.tsx

@@ -120,6 +120,12 @@ const ChatAI = memo(
         activeChatProp && setActiveChat(activeChatProp);
       }, [activeChatProp]);
 
+      useEffect(() => {
+        const { setHasActiveChat } = useChatStore.getState();
+
+        setHasActiveChat(Boolean(activeChat));
+      }, [activeChat]);
+
       useEffect(() => {
         if (!isTauri) return;
 
@@ -198,7 +204,7 @@ const ChatAI = memo(
         isMCPActive,
         changeInput,
         showChatHistory,
-        getChatHistoryChatPage,
+        getChatHistoryChatPage
       );
 
       const { dealMsg } = useMessageHandler(

src/components/Search/InputBox.tsx

@@ -130,6 +130,12 @@ export default function ChatInput({
     // console.log("handleSubmit", trimmedValue, disabled);
 
     if ((trimmedValue || !isEmpty(uploadAttachments)) && !disabled) {
+      const { setHasActiveChat } = useChatStore.getState();
+
+      if (isChatMode) {
+        setHasActiveChat(true);
+      }
+
       changeInput("");
       onSend({
         message: trimmedValue,

src/components/SearchChat/index.tsx

@@ -35,6 +35,8 @@ import {
 } from "@/utils";
 import { useTauriFocus } from "@/hooks/useTauriFocus";
 import { POPOVER_PANEL_SELECTOR } from "@/constants";
+import { useChatStore } from "@/stores/chatStore";
+import { debounce } from "lodash-es";
 
 interface SearchChatProps {
   isTauri?: boolean;
@@ -109,12 +111,18 @@ function SearchChat({
     const updateAppDialog = document.querySelector("#update-app-dialog");
     const popoverPanelEl = document.querySelector(POPOVER_PANEL_SELECTOR);
 
+    const { hasActiveChat } = useChatStore.getState();
+
     if (
-      !updateAppDialog &&
+      updateAppDialog ||
-      !canNavigateBack() &&
+      canNavigateBack() ||
-      !inputRef.current &&
+      inputRef.current ||
-      !popoverPanelEl
+      popoverPanelEl ||
+      (isChatModeRef.current && hasActiveChat)
     ) {
+      setHideMiddleBorder(false);
+      setSuppressErrors(false);
+    } else {
       const { windowMode } = useAppearanceStore.getState();
 
       if (windowMode === "compact") {
@@ -123,15 +131,14 @@ function SearchChat({
 
       setHideMiddleBorder(height < 590);
       setSuppressErrors(height < 590);
-    } else {
-      setHideMiddleBorder(false);
-      setSuppressErrors(false);
     }
 
     platformAdapter.setWindowSize(width, height);
   }, []);
 
-  useMutationObserver(setWindowSize, document.body, {
+  const debouncedSetWindowSize = debounce(setWindowSize, 50);
+
+  useMutationObserver(debouncedSetWindowSize, document.body, {
     subtree: true,
     childList: true,
   });
@@ -140,11 +147,11 @@ function SearchChat({
     inputRef.current = input;
     isChatModeRef.current = isChatMode;
 
-    setWindowSize();
+    debouncedSetWindowSize();
   }, [input, isChatMode]);
 
   useTauriFocus({
-    onFocus: setWindowSize,
+    onFocus: debouncedSetWindowSize,
   });
 
   useEffect(() => {

src/stores/chatStore.ts

@@ -33,6 +33,8 @@ export type IChatStore = {
   setUploadAttachments: (value: UploadAttachments[]) => void;
   synthesizeItem?: SynthesizeItem;
   setSynthesizeItem: (synthesizeItem?: SynthesizeItem) => void;
+  hasActiveChat?: boolean;
+  setHasActiveChat: (hasActiveChat?: boolean) => void;
 };
 
 export const useChatStore = create<IChatStore>()(
@@ -53,9 +55,12 @@ export const useChatStore = create<IChatStore>()(
       setUploadAttachments: (uploadAttachments: UploadAttachments[]) => {
         return set(() => ({ uploadAttachments }));
       },
-      setSynthesizeItem(synthesizeItem?: SynthesizeItem) {
+      setSynthesizeItem: (synthesizeItem?: SynthesizeItem) => {
         return set(() => ({ synthesizeItem }));
       },
+      setHasActiveChat(hasActiveChat) {
+        return set(() => ({ hasActiveChat }));
+      },
     }),
     {
       name: "chat-state",