Improve the SidebarList performance when search streaming response

memfreeme · Dec 21, 2024 · 3b5ca84 · 3b5ca84
1 parent 7367d64
commit 3b5ca84
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/frontend/components/search/search-window.tsx b/frontend/components/search/search-window.tsx
@@ -39,7 +39,7 @@ export default function SearchWindow({ id, initialMessages, user, isReadOnly = f
     const [isLoading, setIsLoading] = useState(false);
     const [status, setStatus] = useState(t('status-think'));
 
-    const { addSearch, activeId, activeSearch, setActiveSearch, updateActiveSearch } = useSearchStore();
+    const { addSearch, activeId, activeSearch, setActiveSearch, updateActiveSearch, syncActiveSearchToSearches } = useSearchStore();
 
     const { scrollRef, visibilityRef, isVisible, scrollToBottom } = useScrollAnchor();
 
@@ -258,6 +258,7 @@ export default function SearchWindow({ id, initialMessages, user, isReadOnly = f
                         }
                     },
                     onclose() {
+                        syncActiveSearchToSearches();
                         setIsLoading(false);
                         if (user && !isProUser(user)) {
                             incrementSearchCount();

diff --git a/frontend/components/sidebar/sidebar-list.tsx b/frontend/components/sidebar/sidebar-list.tsx
@@ -52,8 +52,13 @@ const SearchItem = memo(({ search, index }: { search: any; index: number }) => (
 ));
 SearchItem.displayName = 'SearchItem';
 
+// Important for performance
+const useSearchesSelector = () => useSearchStore((state) => state.searches);
+const useAddSearchesSelector = () => useSearchStore((state) => state.addSearches);
+
 export function SidebarList({ user }: SidebarListProps) {
-    const { searches, addSearches } = useSearchStore();
+    const searches = useSearchesSelector();
+    const addSearches = useAddSearchesSelector();
     const [loading, setLoading] = useState(false);
     const [offset, setOffset] = useState(0);
     const [hasMore, setHasMore] = useState(true);

diff --git a/frontend/lib/store/local-history.ts b/frontend/lib/store/local-history.ts
@@ -14,6 +14,7 @@ interface SearchStore {
     setActiveSearch: (id: string) => void;
     updateActiveSearch: (updatedSearch: Partial<Search>) => void;
     deleteMessage: (messageId: string) => void;
+    syncActiveSearchToSearches: () => void;
 }
 
 export const useSearchStore = create<SearchStore>()(
@@ -90,7 +91,14 @@ export const useSearchStore = create<SearchStore>()(
                     };
                     return {
                         activeSearch: newSearch,
-                        searches: state.searches.map((s) => (s.id === newSearch.id ? newSearch : s)),
+                    };
+                });
+            },
+            syncActiveSearchToSearches: () => {
+                set((state) => {
+                    if (!state.activeSearch) return state;
+                    return {
+                        searches: state.searches.map((s) => (s.id === state.activeSearch!.id ? state.activeSearch! : s)),
                     };
                 });
             },