feat(chat): add tab state management to redux store

Move tab state from component local state to redux store for better state management across components

src/renderer/src/pages/home/Tabs/index.tsx

@@ -1,11 +1,15 @@
 import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
+import { useRuntime } from '@renderer/hooks/useRuntime'
 import { useNavbarPosition, useSettings } from '@renderer/hooks/useSettings'
 import { useShowTopics } from '@renderer/hooks/useStore'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
+import { useAppDispatch } from '@renderer/store'
+import { setActiveTabIdAction } from '@renderer/store/runtime'
 import { Assistant, Topic } from '@renderer/types'
+import { Tab } from '@renderer/types/chat'
 import { classNames, uuid } from '@renderer/utils'
-import { FC, useEffect, useState } from 'react'
+import { FC, useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -25,8 +29,6 @@ interface Props {
   style?: React.CSSProperties
 }
 
-type Tab = 'assistants' | 'topic' | 'settings' | 'agents' | 'sessions'
-
 let _tab: any = ''
 
 const HomeTabs: FC<Props> = ({
@@ -39,7 +41,6 @@ const HomeTabs: FC<Props> = ({
   style
 }) => {
   const { addAssistant } = useAssistants()
-  const [tab, setTab] = useState<Tab>(position === 'left' ? _tab || 'assistants' : 'topic')
   const { topicPosition } = useSettings()
   const { defaultAssistant } = useDefaultAssistant()
   const { toggleShowTopics } = useShowTopics()
@@ -47,6 +48,22 @@ const HomeTabs: FC<Props> = ({
 
   const { t } = useTranslation()
 
+  const { chat } = useRuntime()
+  const { activeTabId: tab } = chat
+  const dispatch = useAppDispatch()
+
+  const setTab = useCallback(
+    (tab: Tab) => {
+      dispatch(setActiveTabIdAction(tab))
+    },
+    [dispatch]
+  )
+
+  useEffect(() => {
+    setTab(position === 'left' ? _tab || 'assistants' : 'topic')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const borderStyle = '0.5px solid var(--color-border)'
   const border =
     position === 'left'
@@ -89,7 +106,7 @@ const HomeTabs: FC<Props> = ({
       })
     ]
     return () => unsubscribes.forEach((unsub) => unsub())
-  }, [position, showTab, tab, toggleShowTopics, topicPosition])
+  }, [position, setTab, showTab, tab, toggleShowTopics, topicPosition])
 
   useEffect(() => {
     if (position === 'right' && topicPosition === 'right' && tab === 'assistants') {
@@ -98,6 +115,7 @@ const HomeTabs: FC<Props> = ({
     if (position === 'left' && topicPosition === 'right' && tab === 'topic') {
       setTab('assistants')
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [position, tab, topicPosition, forceToSeeAllTab])
 
   return (

src/renderer/src/store/runtime.ts

@@ -1,6 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { AppLogo, UserAvatar } from '@renderer/config/env'
 import type { MinAppType, Topic, WebSearchStatus } from '@renderer/types'
+import { Tab } from '@renderer/types/chat'
 import type { UpdateInfo } from 'builder-util-runtime'
 
 export interface ChatState {
@@ -12,6 +13,7 @@ export interface ChatState {
   /** UI state. Map agent id to active session id.
    *  null represents no active session  */
   activeSessionId: Record<string, string | null>
+  activeTabId: Tab
   /** topic ids that are currently being renamed */
   renamingTopics: string[]
   /** topic ids that are newly renamed */
@@ -82,6 +84,7 @@ const initialState: RuntimeState = {
   chat: {
     isMultiSelectMode: false,
     selectedMessageIds: [],
+    activeTabId: 'assistants',
     activeTopic: null,
     activeAgentId: null,
     activeSessionId: {},
@@ -156,6 +159,9 @@ const runtimeSlice = createSlice({
       const { agentId, sessionId } = action.payload
       state.chat.activeSessionId[agentId] = sessionId
     },
+    setActiveTabIdAction: (state, action: PayloadAction<Tab>) => {
+      state.chat.activeTabId = action.payload
+    },
     setRenamingTopics: (state, action: PayloadAction<string[]>) => {
       state.chat.renamingTopics = action.payload
     },
@@ -196,6 +202,7 @@ export const {
   setActiveTopic,
   setActiveAgentId,
   setActiveSessionIdAction,
+  setActiveTabIdAction,
   setRenamingTopics,
   setNewlyRenamedTopics,
   // WebSearch related actions

src/renderer/src/types/chat.ts

@@ -0,0 +1 @@
+export type Tab = 'assistants' | 'topic' | 'settings' | 'agents' | 'sessions'