diff --git a/src/renderer/src/pages/home/Tabs/index.tsx b/src/renderer/src/pages/home/Tabs/index.tsx index afb6e99535..3a1d97b9f0 100644 --- a/src/renderer/src/pages/home/Tabs/index.tsx +++ b/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 = ({ @@ -39,7 +41,6 @@ const HomeTabs: FC = ({ style }) => { const { addAssistant } = useAssistants() - const [tab, setTab] = useState(position === 'left' ? _tab || 'assistants' : 'topic') const { topicPosition } = useSettings() const { defaultAssistant } = useDefaultAssistant() const { toggleShowTopics } = useShowTopics() @@ -47,6 +48,22 @@ const HomeTabs: FC = ({ 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 = ({ }) ] 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 = ({ if (position === 'left' && topicPosition === 'right' && tab === 'topic') { setTab('assistants') } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [position, tab, topicPosition, forceToSeeAllTab]) return ( diff --git a/src/renderer/src/store/runtime.ts b/src/renderer/src/store/runtime.ts index 3911ee9dfb..253361cf9b 100644 --- a/src/renderer/src/store/runtime.ts +++ b/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 + 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) => { + state.chat.activeTabId = action.payload + }, setRenamingTopics: (state, action: PayloadAction) => { state.chat.renamingTopics = action.payload }, @@ -196,6 +202,7 @@ export const { setActiveTopic, setActiveAgentId, setActiveSessionIdAction, + setActiveTabIdAction, setRenamingTopics, setNewlyRenamedTopics, // WebSearch related actions diff --git a/src/renderer/src/types/chat.ts b/src/renderer/src/types/chat.ts new file mode 100644 index 0000000000..e36dc83ac9 --- /dev/null +++ b/src/renderer/src/types/chat.ts @@ -0,0 +1 @@ +export type Tab = 'assistants' | 'topic' | 'settings' | 'agents' | 'sessions'