fix: reduce unnessary rerender due to current thread retrieval

web-app/src/hooks/useAssistant.ts

@@ -117,9 +117,11 @@ export const useAssistant = create<AssistantState>((set, get) => ({
     }
   },
   setCurrentAssistant: (assistant, saveToStorage = true) => {
-    set({ currentAssistant: assistant })
+    if (assistant !== get().currentAssistant) {
-    if (saveToStorage) {
+      set({ currentAssistant: assistant })
-      setLastUsedAssistantId(assistant.id)
+      if (saveToStorage) {
+        setLastUsedAssistantId(assistant.id)
+      }
     }
   },
   setAssistants: (assistants) => {

web-app/src/hooks/useThreads.ts

@@ -46,7 +46,10 @@ export const useThreads = create<ThreadState>()((set, get) => ({
                 id:
                   thread.model.provider === 'llama.cpp' ||
                   thread.model.provider === 'llamacpp'
-                    ? thread.model?.id.split(':').slice(0, 2).join(getServiceHub().path().sep())
+                    ? thread.model?.id
+                        .split(':')
+                        .slice(0, 2)
+                        .join(getServiceHub().path().sep())
                     : thread.model?.id,
               }
             : undefined,
@@ -94,10 +97,12 @@ export const useThreads = create<ThreadState>()((set, get) => ({
   },
   toggleFavorite: (threadId) => {
     set((state) => {
-      getServiceHub().threads().updateThread({
+      getServiceHub()
-        ...state.threads[threadId],
+        .threads()
-        isFavorite: !state.threads[threadId].isFavorite,
+        .updateThread({
-      })
+          ...state.threads[threadId],
+          isFavorite: !state.threads[threadId].isFavorite,
+        })
       return {
         threads: {
           ...state.threads,
@@ -168,7 +173,9 @@ export const useThreads = create<ThreadState>()((set, get) => ({
         {} as Record<string, Thread>
       )
       Object.values(updatedThreads).forEach((thread) => {
-        getServiceHub().threads().updateThread({ ...thread, isFavorite: false })
+        getServiceHub()
+          .threads()
+          .updateThread({ ...thread, isFavorite: false })
       })
       return { threads: updatedThreads }
     })
@@ -180,7 +187,7 @@ export const useThreads = create<ThreadState>()((set, get) => ({
     return get().threads[threadId]
   },
   setCurrentThreadId: (threadId) => {
-    set({ currentThreadId: threadId })
+    if (threadId !== get().currentThreadId) set({ currentThreadId: threadId })
   },
   createThread: async (model, title, assistant) => {
     const newThread: Thread = {
@@ -190,33 +197,38 @@ export const useThreads = create<ThreadState>()((set, get) => ({
       updated: Date.now() / 1000,
       assistants: assistant ? [assistant] : [],
     }
-    return await getServiceHub().threads().createThread(newThread).then((createdThread) => {
+    return await getServiceHub()
-      set((state) => {
+      .threads()
-        // Get all existing threads as an array
+      .createThread(newThread)
-        const existingThreads = Object.values(state.threads)
+      .then((createdThread) => {
+        set((state) => {
+          // Get all existing threads as an array
+          const existingThreads = Object.values(state.threads)
 
-        // Create new array with the new thread at the beginning
+          // Create new array with the new thread at the beginning
-        const reorderedThreads = [createdThread, ...existingThreads]
+          const reorderedThreads = [createdThread, ...existingThreads]
 
-        // Use setThreads to handle proper ordering (this will assign order 1, 2, 3...)
+          // Use setThreads to handle proper ordering (this will assign order 1, 2, 3...)
-        get().setThreads(reorderedThreads)
+          get().setThreads(reorderedThreads)
 
-        return {
+          return {
-          currentThreadId: createdThread.id,
+            currentThreadId: createdThread.id,
-        }
+          }
+        })
+        return createdThread
       })
-      return createdThread
-    })
   },
   updateCurrentThreadAssistant: (assistant) => {
     set((state) => {
       if (!state.currentThreadId) return { ...state }
       const currentThread = state.getCurrentThread()
       if (currentThread)
-        getServiceHub().threads().updateThread({
+        getServiceHub()
-          ...currentThread,
+          .threads()
-          assistants: [{ ...assistant, model: currentThread.model }],
+          .updateThread({
-        })
+            ...currentThread,
+            assistants: [{ ...assistant, model: currentThread.model }],
+          })
       return {
         threads: {
           ...state.threads,
@@ -233,7 +245,10 @@ export const useThreads = create<ThreadState>()((set, get) => ({
     set((state) => {
       if (!state.currentThreadId) return { ...state }
       const currentThread = state.getCurrentThread()
-      if (currentThread) getServiceHub().threads().updateThread({ ...currentThread, model })
+      if (currentThread)
+        getServiceHub()
+          .threads()
+          .updateThread({ ...currentThread, model })
       return {
         threads: {
           ...state.threads,

web-app/src/routes/threads/$threadId.tsx

@@ -30,7 +30,6 @@ function ThreadDetail() {
   const serviceHub = useServiceHub()
   const { threadId } = useParams({ from: Route.id })
   const setCurrentThreadId = useThreads((state) => state.setCurrentThreadId)
-  const currentThreadId = useThreads((state) => state.currentThreadId)
   const setCurrentAssistant = useAssistant((state) => state.setCurrentAssistant)
   const assistants = useAssistant((state) => state.assistants)
   const setMessages = useMessages((state) => state.setMessages)
@@ -49,16 +48,13 @@ function ThreadDetail() {
   const scrollContainerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (currentThreadId !== threadId) {
       setCurrentThreadId(threadId)
       const assistant = assistants.find(
         (assistant) => assistant.id === thread?.assistants?.[0]?.id
       )
       if (assistant) setCurrentAssistant(assistant)
-    }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [threadId, currentThreadId, assistants])
+  }, [threadId,  assistants])
 
   useEffect(() => {
     serviceHub