@lobehub/chat 0.147.21 → 0.147.22

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # Changelog
 
+### [Version 0.147.22](https://github.com/lobehub/lobe-chat/compare/v0.147.21...v0.147.22)
+
+<sup>Released on **2024-04-19**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.147.21](https://github.com/lobehub/lobe-chat/compare/v0.147.20...v0.147.21)
 
 <sup>Released on **2024-04-19**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.147.21",
+  "version": "0.147.22",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -86,7 +86,7 @@
     "@aws-sdk/client-bedrock-runtime": "^3.549.0",
     "@azure/openai": "^1.0.0-beta.12",
     "@cfworker/json-schema": "^1.12.8",
-    "@google/generative-ai": "^0.5.0",
+    "@google/generative-ai": "^0.7.0",
     "@icons-pack/react-simple-icons": "^9.4.0",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",

package/src/app/chat/features/TopicListContent/Topic/TopicContent.tsx

@@ -114,8 +114,8 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
           modal.confirm({
             centered: true,
             okButtonProps: { danger: true },
-            onOk: () => {
-              removeTopic(id);
+            onOk: async () => {
+              await removeTopic(id);
             },
             title: t('topic.confirmRemoveTopic', { ns: 'chat' }),
           });

package/src/app/metadata.ts

@@ -22,11 +22,9 @@ const metadata: Metadata = {
   },
   description,
   icons: {
-    apple:
-      'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/apple-touch-icon.png',
-    icon: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon-32x32.png',
-    shortcut:
-      'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon.ico',
+    apple:'icons/apple-touch-icon.png',
+    icon:'favicon.ico',
+    shortcut:'favicon-32x32.ico',
   },
   manifest: noManifest ? undefined : '/manifest.json',
   metadataBase: new URL(SITE_URL),

package/src/features/ChatInput/Topic/index.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import HotKeys from '@/components/HotKeys';
 import { PREFIX_KEY, SAVE_TOPIC_KEY } from '@/const/hotkeys';
+import { useActionSWR } from '@/libs/swr';
 import { useChatStore } from '@/store/chat';
 
 const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
@@ -16,20 +17,23 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
     s.openNewTopicOrSaveTopic,
   ]);
 
+  const { mutate, isValidating } = useActionSWR('openNewTopicOrSaveTopic', openNewTopicOrSaveTopic);
+
   const icon = hasTopic ? LucideMessageSquarePlus : LucideGalleryVerticalEnd;
   const Render = mobile ? ActionIcon : Button;
   const iconRender: any = mobile ? icon : <Icon icon={icon} />;
   const desc = t(hasTopic ? 'topic.openNewTopic' : 'topic.saveCurrentMessages');
 
   const hotkeys = [PREFIX_KEY, SAVE_TOPIC_KEY].join('+');
-  useHotkeys(hotkeys, openNewTopicOrSaveTopic, {
+
+  useHotkeys(hotkeys, () => mutate(), {
     enableOnFormTags: true,
     preventDefault: true,
   });
 
   return (
     <Tooltip title={<HotKeys desc={desc} keys={hotkeys} />}>
-      <Render aria-label={desc} icon={iconRender} onClick={openNewTopicOrSaveTopic} />
+      <Render aria-label={desc} icon={iconRender} loading={isValidating} onClick={() => mutate()} />
     </Tooltip>
   );
 });

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -19,6 +19,9 @@ import ActionsBar from './ActionsBar';
 import HistoryDivider from './HistoryDivider';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
+  loading: css`
+    opacity: 0.6;
+  `,
   message: css`
     // prevent the textarea too long
     .${prefixCls}-input {
@@ -35,7 +38,7 @@ export interface ChatListItemProps {
 const Item = memo<ChatListItemProps>(({ index, id }) => {
   const fontSize = useGlobalStore((s) => settingsSelectors.currentSettings(s).fontSize);
   const { t } = useTranslation('common');
-  const { styles } = useStyles();
+  const { styles, cx } = useStyles();
   const [editing, setEditing] = useState(false);
   const [type = 'chat'] = useSessionStore((s) => {
     const config = agentSelectors.currentAgentConfig(s);
@@ -54,10 +57,12 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
   const historyLength = useChatStore((s) => chatSelectors.currentChats(s).length);
 
   const [loading, updateMessageContent] = useChatStore((s) => [
-    s.chatLoadingId === id,
+    s.chatLoadingId === id || s.messageLoadingIds.includes(id),
     s.modifyMessageContent,
   ]);
 
+  const [isMessageLoading] = useChatStore((s) => [s.messageLoadingIds.includes(id)]);
+
   const onAvatarsClick = useAvatarsClick();
 
   const RenderMessage = useCallback(
@@ -110,7 +115,7 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
         <ChatItem
           actions={<ActionsBar index={index} setEditing={setEditing} />}
           avatar={item.meta}
-          className={styles.message}
+          className={cx(styles.message, isMessageLoading && styles.loading)}
           editing={editing}
           error={error}
           errorMessage={<ErrorMessageExtra data={item} />}

package/src/libs/swr/index.ts

@@ -32,3 +32,12 @@ export const useActionSWR: SWRHook = (key, fetch, config) =>
     revalidateOnReconnect: false,
     ...config,
   });
+
+export interface SWRRefreshParams<T, A = (...args: any[]) => any> {
+  action: A;
+  optimisticData?: (data: T | undefined) => T;
+}
+
+export type SWRefreshMethod<T> = <A extends (...args: any[]) => Promise<any>>(
+  params?: SWRRefreshParams<T, A>,
+) => ReturnType<A>;

package/src/store/chat/slices/message/action.ts

@@ -1,6 +1,7 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
 // Disable the auto sort key eslint rule to make the code more logic and readable
 import { copyToClipboard } from '@lobehub/ui';
+import { produce } from 'immer';
 import { template } from 'lodash-es';
 import { SWRResponse, mutate } from 'swr';
 import { StateCreator } from 'zustand/vanilla';
@@ -19,6 +20,7 @@ import { agentSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/message';
 import { TraceEventPayloads } from '@/types/trace';
 import { setNamespace } from '@/utils/storeDebug';
+import { nanoid } from '@/utils/uuid';
 
 import { chatSelectors } from '../../selectors';
 import { MessageDispatch, messagesReducer } from './reducer';
@@ -97,6 +99,7 @@ export interface ChatMessageAction {
     id?: string,
     action?: string,
   ) => AbortController | undefined;
+  toggleMessageLoading: (loading: boolean, id: string) => void;
   refreshMessages: () => Promise<void>;
   // TODO: 后续 smoothMessage 实现考虑落到 sse 这一层
   createSmoothMessage: (id: string) => {
@@ -111,6 +114,7 @@ export interface ChatMessageAction {
    * @param content
    */
   internalUpdateMessageContent: (id: string, content: string) => Promise<void>;
+  internalCreateMessage: (params: CreateMessageParams) => Promise<string>;
   internalResendMessage: (id: string, traceId?: string) => Promise<void>;
   internalTraceMessage: (id: string, payload: TraceEventPayloads) => Promise<void>;
 }
@@ -130,6 +134,7 @@ export const chatMessage: StateCreator<
   ChatMessageAction
 > = (set, get) => ({
   deleteMessage: async (id) => {
+    get().dispatchMessage({ type: 'deleteMessage', id });
     await messageService.removeMessage(id);
     await get().refreshMessages();
   },
@@ -167,43 +172,6 @@ export const chatMessage: StateCreator<
     await messageService.removeAllMessages();
     await refreshMessages();
   },
-  internalResendMessage: async (messageId, traceId) => {
-    // 1. 构造所有相关的历史记录
-    const chats = chatSelectors.currentChats(get());
-
-    const currentIndex = chats.findIndex((c) => c.id === messageId);
-    if (currentIndex < 0) return;
-
-    const currentMessage = chats[currentIndex];
-
-    let contextMessages: ChatMessage[] = [];
-
-    switch (currentMessage.role) {
-      case 'function':
-      case 'user': {
-        contextMessages = chats.slice(0, currentIndex + 1);
-        break;
-      }
-      case 'assistant': {
-        // 消息是 AI 发出的因此需要找到它的 user 消息
-        const userId = currentMessage.parentId;
-        const userIndex = chats.findIndex((c) => c.id === userId);
-        // 如果消息没有 parentId，那么同 user/function 模式
-        contextMessages = chats.slice(0, userIndex < 0 ? currentIndex + 1 : userIndex + 1);
-        break;
-      }
-    }
-
-    if (contextMessages.length <= 0) return;
-
-    const { coreProcessMessage } = get();
-
-    const latestMsg = contextMessages.filter((s) => s.role === 'user').at(-1);
-
-    if (!latestMsg) return;
-
-    await coreProcessMessage(contextMessages, latestMsg.id, traceId);
-  },
   sendMessage: async ({ message, files, onlyAddUserMessage }) => {
     const { coreProcessMessage, activeTopicId, activeId } = get();
     if (!activeId) return;
@@ -223,8 +191,7 @@ export const chatMessage: StateCreator<
       topicId: activeTopicId,
     };
 
-    const id = await messageService.createMessage(newMessage);
-    await get().refreshMessages();
+    const id = await get().internalCreateMessage(newMessage);
 
     // if only add user message, then stop
     if (onlyAddUserMessage) return;
@@ -315,8 +282,7 @@ export const chatMessage: StateCreator<
       topicId: activeTopicId, // if there is activeTopicId，then add it to topicId
     };
 
-    const mid = await messageService.createMessage(assistantMessage);
-    await refreshMessages();
+    const mid = await get().internalCreateMessage(assistantMessage);
 
     // 2. fetch the AI response
     const { isFunctionCall, content, functionCallAtEnd, functionCallContent, traceId } =
@@ -344,7 +310,7 @@ export const chatMessage: StateCreator<
           traceId,
         };
 
-        functionId = await messageService.createMessage(functionMessage);
+        functionId = await get().internalCreateMessage(functionMessage);
       }
 
       await refreshMessages();
@@ -533,6 +499,62 @@ export const chatMessage: StateCreator<
       window.removeEventListener('beforeunload', preventLeavingFn);
     }
   },
+  toggleMessageLoading: (loading, id) => {
+    set(
+      {
+        messageLoadingIds: produce(get().messageLoadingIds, (draft) => {
+          if (loading) {
+            draft.push(id);
+          } else {
+            const index = draft.indexOf(id);
+
+            if (index >= 0) draft.splice(index, 1);
+          }
+        }),
+      },
+      false,
+      'toggleMessageLoading',
+    );
+  },
+
+  internalResendMessage: async (messageId, traceId) => {
+    // 1. 构造所有相关的历史记录
+    const chats = chatSelectors.currentChats(get());
+
+    const currentIndex = chats.findIndex((c) => c.id === messageId);
+    if (currentIndex < 0) return;
+
+    const currentMessage = chats[currentIndex];
+
+    let contextMessages: ChatMessage[] = [];
+
+    switch (currentMessage.role) {
+      case 'function':
+      case 'user': {
+        contextMessages = chats.slice(0, currentIndex + 1);
+        break;
+      }
+      case 'assistant': {
+        // 消息是 AI 发出的因此需要找到它的 user 消息
+        const userId = currentMessage.parentId;
+        const userIndex = chats.findIndex((c) => c.id === userId);
+        // 如果消息没有 parentId，那么同 user/function 模式
+        contextMessages = chats.slice(0, userIndex < 0 ? currentIndex + 1 : userIndex + 1);
+        break;
+      }
+    }
+
+    if (contextMessages.length <= 0) return;
+
+    const { coreProcessMessage } = get();
+
+    const latestMsg = contextMessages.filter((s) => s.role === 'user').at(-1);
+
+    if (!latestMsg) return;
+
+    await coreProcessMessage(contextMessages, latestMsg.id, traceId);
+  },
+
   internalUpdateMessageContent: async (id, content) => {
     const { dispatchMessage, refreshMessages } = get();
 
@@ -545,6 +567,22 @@ export const chatMessage: StateCreator<
     await refreshMessages();
   },
 
+  internalCreateMessage: async (message) => {
+    const { dispatchMessage, refreshMessages, toggleMessageLoading } = get();
+
+    // use optimistic update to avoid the slow waiting
+    const tempId = 'tmp_' + nanoid();
+    dispatchMessage({ type: 'createMessage', id: tempId, value: message });
+
+    toggleMessageLoading(true, tempId);
+    const id = await messageService.createMessage(message);
+
+    await refreshMessages();
+    toggleMessageLoading(false, tempId);
+
+    return id;
+  },
+
   createSmoothMessage: (id) => {
     const { dispatchMessage } = get();
 

package/src/store/chat/slices/message/initialState.ts

@@ -9,7 +9,7 @@ export interface ChatMessageState {
   activeId: string;
   chatLoadingId?: string;
   inputMessage: string;
-  messageLoadingIds: [];
+  messageLoadingIds: string[];
   messages: ChatMessage[];
   /**
    * whether messages have fetched

package/src/store/chat/slices/message/reducer.ts

@@ -1,6 +1,7 @@
 import isEqual from 'fast-deep-equal';
 import { produce } from 'immer';
 
+import { CreateMessageParams } from '@/services/message';
 import { ChatMessage } from '@/types/message';
 import { merge } from '@/utils/merge';
 
@@ -10,6 +11,15 @@ interface UpdateMessage {
   type: 'updateMessage';
   value: ChatMessage[keyof ChatMessage];
 }
+interface CreateMessage {
+  id: string;
+  type: 'createMessage';
+  value: CreateMessageParams;
+}
+interface DeleteMessage {
+  id: string;
+  type: 'deleteMessage';
+}
 
 interface UpdatePluginState {
   id: string;
@@ -24,7 +34,12 @@ interface UpdateMessageExtra {
   value: any;
 }
 
-export type MessageDispatch = UpdateMessage | UpdatePluginState | UpdateMessageExtra;
+export type MessageDispatch =
+  | CreateMessage
+  | UpdateMessage
+  | UpdatePluginState
+  | UpdateMessageExtra
+  | DeleteMessage;
 
 export const messagesReducer = (state: ChatMessage[], payload: MessageDispatch): ChatMessage[] => {
   switch (payload.type) {
@@ -76,6 +91,22 @@ export const messagesReducer = (state: ChatMessage[], payload: MessageDispatch):
       });
     }
 
+    case 'createMessage': {
+      return produce(state, (draftState) => {
+        const { value, id } = payload;
+
+        draftState.push({ ...value, createdAt: Date.now(), id, meta: {}, updatedAt: Date.now() });
+      });
+    }
+    case 'deleteMessage': {
+      return produce(state, (draft) => {
+        const { id } = payload;
+
+        const index = draft.findIndex((m) => m.id === id);
+
+        if (index >= 0) draft.splice(index, 1);
+      });
+    }
     default: {
       throw new Error('暂未实现的 type，请检查 reducer');
     }

package/src/store/chat/slices/topic/action.test.ts

@@ -149,7 +149,9 @@ describe('topic action', () => {
       });
 
       // Check if mutate has been called with the active session ID
-      expect(mutate).toHaveBeenCalledWith(['SWR_USE_FETCH_TOPIC', activeId]);
+      expect(mutate).toHaveBeenCalledWith(['SWR_USE_FETCH_TOPIC', activeId], undefined, {
+        populateCache: false,
+      });
     });
 
     it('should handle errors during refreshing topics', async () => {
@@ -314,7 +316,7 @@ describe('topic action', () => {
       const activeId = 'test-session-id';
 
       await act(async () => {
-        useChatStore.setState({ activeId });
+        useChatStore.setState({ activeId, activeTopicId: topicId });
       });
 
       const refreshTopicSpy = vi.spyOn(result.current, 'refreshTopic');
@@ -329,6 +331,27 @@ describe('topic action', () => {
       expect(refreshTopicSpy).toHaveBeenCalled();
       expect(switchTopicSpy).toHaveBeenCalled();
     });
+    it('should remove a specific topic and its messages, then not refresh the topic list', async () => {
+      const topicId = 'topic-1';
+      const { result } = renderHook(() => useChatStore());
+      const activeId = 'test-session-id';
+
+      await act(async () => {
+        useChatStore.setState({ activeId });
+      });
+
+      const refreshTopicSpy = vi.spyOn(result.current, 'refreshTopic');
+      const switchTopicSpy = vi.spyOn(result.current, 'switchTopic');
+
+      await act(async () => {
+        await result.current.removeTopic(topicId);
+      });
+
+      expect(messageService.removeMessages).toHaveBeenCalledWith(activeId, topicId);
+      expect(topicService.removeTopic).toHaveBeenCalledWith(topicId);
+      expect(refreshTopicSpy).toHaveBeenCalled();
+      expect(switchTopicSpy).not.toHaveBeenCalled();
+    });
   });
   describe('removeUnstarredTopic', () => {
     it('should remove unstarred topics and refresh the topic list', async () => {

package/src/store/chat/slices/topic/action.ts

@@ -9,11 +9,11 @@ import { StateCreator } from 'zustand/vanilla';
 import { chainSummaryTitle } from '@/chains/summaryTitle';
 import { LOADING_FLAT } from '@/const/message';
 import { TraceNameMap } from '@/const/trace';
-import { useClientDataSWR } from '@/libs/swr';
+import { SWRefreshMethod, useClientDataSWR } from '@/libs/swr';
 import { chatService } from '@/services/chat';
 import { messageService } from '@/services/message';
 import { topicService } from '@/services/topic';
-import { ChatStore } from '@/store/chat';
+import type { ChatStore } from '@/store/chat';
 import { ChatMessage } from '@/types/message';
 import { ChatTopic } from '@/types/topic';
 import { setNamespace } from '@/utils/storeDebug';
@@ -29,7 +29,7 @@ const SWR_USE_SEARCH_TOPIC = 'SWR_USE_SEARCH_TOPIC';
 export interface ChatTopicAction {
   favoriteTopic: (id: string, favState: boolean) => Promise<void>;
   openNewTopicOrSaveTopic: () => Promise<void>;
-  refreshTopic: () => Promise<void>;
+  refreshTopic: SWRefreshMethod<ChatTopic[]>;
   removeAllTopics: () => Promise<void>;
   removeSessionTopics: () => Promise<void>;
   removeTopic: (id: string) => Promise<void>;
@@ -78,6 +78,17 @@ export const chatTopic: StateCreator<
       messages: messages.map((m) => m.id),
     });
     await refreshTopic();
+    // TODO: 优化为乐观更新
+    // const params: CreateTopicParams = {
+    //   sessionId: activeId,
+    //   title: t('topic.defaultTitle', { ns: 'chat' }),
+    //   messages: messages.map((m) => m.id),
+    // };
+
+    // const topicId = await refreshTopic({
+    //   action: async () => topicService.createTopic(params),
+    //   optimisticData: (data) => topicReducer(data, { type: 'addTopic', value: params }),
+    // });
 
     // 2. auto summary topic Title
     // we don't need to wait for summary, just let it run async
@@ -189,9 +200,10 @@ export const chatTopic: StateCreator<
     await refreshTopic();
   },
   removeTopic: async (id) => {
-    const { activeId, switchTopic, refreshTopic } = get();
+    const { activeId, activeTopicId, switchTopic, refreshTopic } = get();
 
     // remove messages in the topic
+    // TODO: Need to remove because server service don't need to call it
     await messageService.removeMessages(activeId, id);
 
     // remove topic
@@ -199,7 +211,7 @@ export const chatTopic: StateCreator<
     await refreshTopic();
 
     // switch bach to default topic
-    switchTopic();
+    if (activeTopicId === id) switchTopic();
   },
   removeUnstarredTopic: async () => {
     const { refreshTopic, switchTopic } = get();
@@ -226,7 +238,12 @@ export const chatTopic: StateCreator<
   updateTopicLoading: (id) => {
     set({ topicLoadingId: id }, false, n('updateTopicLoading'));
   },
-  refreshTopic: async () => {
-    await mutate([SWR_USE_FETCH_TOPIC, get().activeId]);
+  // TODO: I don't know why this ts error, so have to ignore it
+  // @ts-ignore
+  refreshTopic: async (params) => {
+    return mutate([SWR_USE_FETCH_TOPIC, get().activeId], params?.action, {
+      optimisticData: params?.optimisticData,
+      populateCache: false,
+    });
   },
 });

package/src/store/chat/slices/topic/reducer.test.ts

@@ -0,0 +1,141 @@
+import { produce } from 'immer';
+import { expect } from 'vitest';
+
+import { ChatTopic } from '@/types/topic';
+
+import { ChatTopicDispatch, topicReducer } from './reducer';
+
+describe('topicReducer', () => {
+  let state: ChatTopic[];
+
+  beforeEach(() => {
+    state = [];
+  });
+
+  describe('addTopic', () => {
+    it('should add a new ChatTopic object to state', () => {
+      const payload: ChatTopicDispatch = {
+        type: 'addTopic',
+        value: {
+          title: 'Test Topic',
+          sessionId: '',
+        },
+      };
+
+      const newState = topicReducer(state, payload);
+
+      expect(newState[0].id).toBeDefined();
+    });
+  });
+
+  describe('updateTopic', () => {
+    it('should update the ChatTopic object in state', () => {
+      const topic: ChatTopic = {
+        id: '1',
+        title: 'Test Topic',
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      };
+
+      state.push(topic);
+
+      const payload: ChatTopicDispatch = {
+        type: 'updateTopic',
+        id: '1',
+        key: 'title',
+        value: 'Updated Topic',
+      };
+
+      const newState = topicReducer(state, payload);
+
+      expect(newState[0].title).toBe('Updated Topic');
+    });
+
+    it('should update the ChatTopic object with correct properties', () => {
+      const topic: ChatTopic = {
+        id: '1',
+        title: 'Test Topic',
+        createdAt: Date.now() - 1,
+        updatedAt: Date.now() - 1, // 设定比当前时间前面一点
+      };
+
+      state.push(topic);
+
+      const payload: ChatTopicDispatch = {
+        type: 'updateTopic',
+        id: '1',
+        key: 'title',
+        value: 'Updated Topic',
+      };
+
+      const newState = topicReducer(state, payload);
+
+      expect(newState[0].updatedAt).toBeGreaterThan(topic.updatedAt);
+    });
+  });
+
+  describe('deleteTopic', () => {
+    it('should delete the specified ChatTopic object from state', () => {
+      const topic: ChatTopic = {
+        id: '1',
+        title: 'Test Topic',
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      };
+
+      state.push(topic);
+
+      const payload: ChatTopicDispatch = {
+        type: 'deleteTopic',
+        id: '1',
+      };
+
+      const newState = topicReducer(state, payload);
+
+      expect(newState).toEqual([]);
+    });
+  });
+
+  describe('default', () => {
+    it('should return the original state object', () => {
+      const payload = {
+        type: 'unknown',
+      } as unknown as ChatTopicDispatch;
+
+      const newState = topicReducer(state, payload);
+
+      expect(newState).toBe(state);
+    });
+  });
+
+  describe('produce', () => {
+    it('should generate immutable state object', () => {
+      const payload: ChatTopicDispatch = {
+        type: 'addTopic',
+        value: {
+          title: 'Test Topic',
+          sessionId: '1',
+        },
+      };
+
+      const newState = topicReducer(state, payload);
+
+      expect(newState).not.toBe(state);
+    });
+
+    it('should not modify the original state object', () => {
+      const payload: ChatTopicDispatch = {
+        type: 'addTopic',
+        value: {
+          title: 'Test Topic',
+
+          sessionId: '123',
+        },
+      };
+
+      const newState = topicReducer(state, payload);
+
+      expect(state).toEqual([]);
+    });
+  });
+});

package/src/store/chat/slices/topic/reducer.ts

@@ -0,0 +1,67 @@
+import { produce } from 'immer';
+
+import { CreateTopicParams } from '@/services/topic/type';
+import { ChatTopic } from '@/types/topic';
+
+interface AddChatTopicAction {
+  type: 'addTopic';
+  value: CreateTopicParams;
+}
+
+interface UpdateChatTopicAction {
+  id: string;
+  key: keyof ChatTopic;
+  type: 'updateTopic';
+  value: any;
+}
+
+interface DeleteChatTopicAction {
+  id: string;
+  type: 'deleteTopic';
+}
+
+export type ChatTopicDispatch = AddChatTopicAction | UpdateChatTopicAction | DeleteChatTopicAction;
+
+export const topicReducer = (state: ChatTopic[] = [], payload: ChatTopicDispatch): ChatTopic[] => {
+  switch (payload.type) {
+    case 'addTopic': {
+      return produce(state, (draftState) => {
+        draftState.unshift({
+          ...payload.value,
+          createdAt: Date.now(),
+          id: Date.now().toString(),
+          sessionId: payload.value.sessionId ? payload.value.sessionId : undefined,
+          updatedAt: Date.now(),
+        });
+      });
+    }
+
+    case 'updateTopic': {
+      return produce(state, (draftState) => {
+        const { key, value, id } = payload;
+        const topicIndex = draftState.findIndex((topic) => topic.id === id);
+
+        if (topicIndex !== -1) {
+          const updatedTopic = { ...draftState[topicIndex] };
+          // @ts-ignore
+          updatedTopic[key] = value;
+          draftState[topicIndex] = updatedTopic;
+          updatedTopic.updatedAt = Date.now();
+        }
+      });
+    }
+
+    case 'deleteTopic': {
+      return produce(state, (draftState) => {
+        const topicIndex = draftState.findIndex((topic) => topic.id === payload.id);
+        if (topicIndex !== -1) {
+          draftState.splice(topicIndex, 1);
+        }
+      });
+    }
+
+    default: {
+      return state;
+    }
+  }
+};

package/src/store/session/slices/session/action.ts

@@ -6,7 +6,7 @@ import { StateCreator } from 'zustand/vanilla';
 
 import { message } from '@/components/AntdStaticMethods';
 import { INBOX_SESSION_ID } from '@/const/session';
-import { useClientDataSWR } from '@/libs/swr';
+import { SWRRefreshParams, useClientDataSWR } from '@/libs/swr';
 import { sessionService } from '@/services/session';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
@@ -51,10 +51,7 @@ export interface SessionAction {
   /**
    * re-fetch the data
    */
-  refreshSessions: (params?: {
-    action: () => Promise<void>;
-    optimisticData?: (data: ChatSessionList) => ChatSessionList;
-  }) => Promise<void>;
+  refreshSessions: (params?: SWRRefreshParams<ChatSessionList>) => Promise<void>;
 
   /**
    * remove session
@@ -145,6 +142,8 @@ export const createSessionSlice: StateCreator<
       },
       // 乐观更新
       optimisticData: produce((draft) => {
+        if (!draft) return;
+
         const session = draft.all.find((i) => i.id === sessionId);
         if (!session) return;