@lobehub/chat 0.105.2 → 0.107.0

package/locales/zh_TW/common.json

@@ -30,6 +30,25 @@
   "feedback": "回饋與建議",
   "historyRange": "歷史範圍",
   "import": "匯入設定",
+  "importModal": {
+    "finish": {
+      "onlySettings": "系統設置匯入成功",
+      "start": "開始使用",
+      "subTitle": "數據匯入成功，耗時 {{duration}} 秒。匯入明細如下：",
+      "title": "數據匯入完成"
+    },
+    "loading": "數據匯入中，請耐心等待...",
+    "result": {
+      "added": "匯入成功",
+      "errors": "匯入出錯",
+      "messages": "消息",
+      "sessions": "助手",
+      "skips": "重複跳過",
+      "topics": "話題",
+      "type": "數據類型"
+    },
+    "title": "匯入數據"
+  },
   "lang": {
     "en": "英語",
     "en-US": "英語",

package/locales/zh_TW/migration.json

@@ -0,0 +1,45 @@
+{
+  "dbV1": {
+    "action": {
+      "clearDB": "清空本地資料",
+      "downloadBackup": "下載資料備份",
+      "reUpgrade": "重新升級",
+      "start": "開始使用",
+      "upgrade": "一鍵升級"
+    },
+    "clear": {
+      "confirm": "即將清空本地資料（全域設定不受影響），請確認你已經下載了資料備份。"
+    },
+    "description": "在新版本中，LobeChat 的資料存儲有了巨大的飛躍。因此我們要對舊版資料進行升級，進而為你帶來更好的使用體驗。",
+    "features": {
+      "capability": {
+        "desc": "基於 IndexedDB 技術，足以裝下你一生的對話消息",
+        "title": "大容量"
+      },
+      "performance": {
+        "title": "高性能",
+        "desc": "百萬條消息自動索引，檢索查詢毫秒級響應"
+      },
+      "use": {
+        "desc": "支持標題、描述、標籤、消息內容乃至翻譯文本檢索，日常搜索效率大大提升",
+        "title": "更易用"
+      }
+    },
+    "title": "LobeChat 資料進化",
+    "upgrade": {
+      "error": {
+        "title": "資料庫升級失敗",
+        "subTitle": "非常抱歉，資料庫升級過程發生異常。請嘗試以下方案：A. 清空本地數據後，重新導入備份數據； B.點擊「重新升級」按鈕。<br><br> 如仍然出錯，請 <1>提交問題</1> ，我們將會第一時間幫你排查"
+      },
+      "success": {
+        "subTitle": "LobeChat 的資料庫已經升級到最新版本，立即開始體驗吧",
+        "title": "資料庫升級成功"
+      }
+    },
+    "upgradeTip": "升級大致需要 1~2 秒，升級過程中請不要關閉 LobeChat"
+  },
+  "migrateError": {
+    "missVersion": "導入數據缺少版本號，請檢查文件後重試",
+    "noMigration": "沒有找到當前版本對應的遷移方案，請檢查版本號後重試。如仍有問題請提交問題反饋"
+  }
+}

package/locales/zh_TW/setting.json

@@ -3,9 +3,9 @@
     "clear": {
       "action": "立即清除",
       "confirm": "確定要清除所有聊天資料嗎？",
-      "desc": "清除所有對話資料",
       "success": "已清除所有對話訊息",
-      "title": "清除所有對話訊息"
+      "title": "清除所有對話訊息",
+      "desc": "將會清除所有會話資料，包括助手、檔案、訊息、插件等"
     },
     "reset": {
       "action": "立即重設",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.105.2",
+  "version": "0.107.0",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",
@@ -107,6 +107,7 @@
     "react-layout-kit": "^1",
     "react-lazy-load": "^4",
     "react-spring-lightbox": "^1",
+    "react-wrap-balancer": "^1.1.0",
     "remark": "^14",
     "remark-gfm": "^3",
     "remark-html": "^15",

package/src/app/api/openai/chat/createChatCompletion.test.ts

@@ -33,7 +33,7 @@ describe('createChatCompletion', () => {
     const result = await createChatCompletion({
       openai: openaiInstance,
       payload: {
-        messages: [{ content: 'Hello', name: 'User', role: 'user' }],
+        messages: [{ content: 'Hello', role: 'user' }],
         model: 'text-davinci-003',
         temperature: 0,
       },
@@ -63,7 +63,7 @@ describe('createChatCompletion', () => {
     const result = await createChatCompletion({
       openai: openaiInstance,
       payload: {
-        messages: [{ content: 'Hello', name: 'User', role: 'user' }],
+        messages: [{ content: 'Hello', role: 'user' }],
         model: 'text-davinci-003',
         temperature: 0,
       },
@@ -89,7 +89,7 @@ describe('createChatCompletion', () => {
     const result = await createChatCompletion({
       openai: openaiInstance,
       payload: {
-        messages: [{ content: 'Hello', name: 'User', role: 'user' }],
+        messages: [{ content: 'Hello', role: 'user' }],
         model: 'text-davinci-003',
         temperature: 0,
       },
@@ -114,7 +114,7 @@ describe('createChatCompletion', () => {
     const result = await createChatCompletion({
       openai: openaiInstance,
       payload: {
-        messages: [{ content: 'Hello', name: 'User', role: 'user' }],
+        messages: [{ content: 'Hello', role: 'user' }],
         model: 'text-davinci-003',
         temperature: 0,
       },

package/src/app/api/openai/chat/createChatCompletion.ts

@@ -1,10 +1,11 @@
 import { OpenAIStream, StreamingTextResponse } from 'ai';
 import OpenAI from 'openai';
 
-import { createErrorResponse } from '@/app/api/openai/errorResponse';
 import { ChatErrorType } from '@/types/fetch';
 import { OpenAIChatStreamPayload } from '@/types/openai/chat';
 
+import { createErrorResponse } from '../errorResponse';
+
 interface CreateChatCompletionOptions {
   openai: OpenAI;
   payload: OpenAIChatStreamPayload;
@@ -14,22 +15,15 @@ export const createChatCompletion = async ({ payload, openai }: CreateChatComple
   // ============  1. preprocess messages   ============ //
   const { messages, ...params } = payload;
 
-  // remove unnecessary fields like `plugins` or `files` by lobe-chat
-  const formatMessages = messages.map((m) => ({
-    content: m.content,
-    name: m.name,
-    role: m.role,
-  })) as OpenAI.ChatCompletionMessageParam[];
-
   // ============  2. send api   ============ //
 
   try {
     const response = await openai.chat.completions.create(
       {
-        messages: formatMessages,
+        messages,
         ...params,
         stream: true,
-      },
+      } as unknown as OpenAI.ChatCompletionCreateParamsStreaming,
       { headers: { Accept: '*/*' } },
     );
     const stream = OpenAIStream(response);

package/src/app/api/openai/createBizOpenAI/index.ts

@@ -1,4 +1,4 @@
-import OpenAI from 'openai/index';
+import OpenAI from 'openai';
 
 import { checkAuth } from '@/app/api/auth';
 import { getServerConfig } from '@/config/server';

package/src/app/api/openai/errorResponse.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { ChatErrorType, ErrorResponse, ErrorType } from '@/types/fetch';
+import { ChatErrorType } from '@/types/fetch';
 
 import { createErrorResponse } from './errorResponse';
 

package/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx

@@ -8,6 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import SaveTopic from '@/app/chat/features/ChatInput/Topic';
 import { useSendMessage } from '@/app/chat/features/ChatInput/useSend';
+import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 
@@ -16,7 +17,7 @@ import { LocalFiles } from './LocalFiles';
 const Footer = memo(() => {
   const { t } = useTranslation('chat');
   const theme = useTheme();
-  const [loading, onStop] = useSessionStore((s) => [!!s.chatLoadingId, s.stopGenerateMessage]);
+  const [loading, onStop] = useChatStore((s) => [!!s.chatLoadingId, s.stopGenerateMessage]);
 
   const onSend = useSendMessage();
   const canUpload = useSessionStore(agentSelectors.modelHasVisionAbility);

package/src/app/chat/(mobile)/features/ChatInput/SendButton.tsx

@@ -4,10 +4,10 @@ import { Loader2, SendHorizonal } from 'lucide-react';
 import { memo } from 'react';
 
 import { useSendMessage } from '@/app/chat/features/ChatInput/useSend';
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 
 const SendButton = memo(() => {
-  const [loading, onStop] = useSessionStore((s) => [!!s.chatLoadingId, s.stopGenerateMessage]);
+  const [loading, onStop] = useChatStore((s) => [!!s.chatLoadingId, s.stopGenerateMessage]);
 
   const handleSend = useSendMessage();
 

package/src/app/chat/features/ChatHeader/ShareButton/Inner.tsx

@@ -7,8 +7,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import MobilePadding from '@/components/MobilePadding';
 import { FORM_STYLE } from '@/const/layoutTokens';
+import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
 
 import Preview, { ImageType, imageTypeOptions } from './Preview';
 
@@ -27,10 +27,7 @@ const Inner = memo(() => {
   const { t } = useTranslation('chat');
 
   const avatar = useGlobalStore((s) => s.settings.avatar);
-  const [shareLoading, shareToShareGPT] = useSessionStore((s) => [
-    s.shareLoading,
-    s.shareToShareGPT,
-  ]);
+  const [shareLoading, shareToShareGPT] = useChatStore((s) => [s.shareLoading, s.shareToShareGPT]);
 
   const options: SegmentedProps['options'] = useMemo(
     () => [

package/src/app/chat/features/ChatHeader/ShareButton/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import useMergeState from 'use-merge-value';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 
 const Inner = dynamic(() => import('./Inner'));
 interface ShareButtonProps {
@@ -22,7 +22,7 @@ const ShareButton = memo<ShareButtonProps>(({ mobile, setOpen, open }) => {
     value: open,
   });
   const { t } = useTranslation('common');
-  const [shareLoading] = useSessionStore((s) => [s.shareLoading]);
+  const [shareLoading] = useChatStore((s) => [s.shareLoading]);
 
   return (
     <>

package/src/app/chat/features/ChatInput/ActionBar/Clear.tsx

@@ -7,12 +7,12 @@ import { useTranslation } from 'react-i18next';
 
 import HotKeys from '@/components/HotKeys';
 import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
+import { useChatStore } from '@/store/chat';
 import { useFileStore } from '@/store/files';
-import { useSessionStore } from '@/store/session';
 
 const Clear = memo(() => {
   const { t } = useTranslation('setting');
-  const [clearMessage] = useSessionStore((s) => [s.clearMessage]);
+  const [clearMessage] = useChatStore((s) => [s.clearMessage]);
   const [clearImageList] = useFileStore((s) => [s.clearImageList]);
   const hotkeys = [PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
 

package/src/app/chat/features/ChatInput/ActionBar/ModelSwitch.tsx

@@ -22,7 +22,7 @@ const ModelSwitch = memo(() => {
     <Dropdown
       menu={{
         activeKey: model,
-        items: modelList.map((i) => ({ key: i, label: i })),
+        items: modelList.map(({ name, displayName }) => ({ key: name, label: displayName })),
         onClick: (e) => {
           updateAgentConfig({ model: e.key as LanguageModel });
         },

package/src/app/chat/features/ChatInput/ActionBar/Token/TokenTag.tsx

@@ -4,19 +4,25 @@ import { useTranslation } from 'react-i18next';
 
 import { ModelTokens } from '@/const/modelTokens';
 import { useTokenCount } from '@/hooks/useTokenCount';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
-import { agentSelectors, chatSelectors } from '@/store/session/selectors';
+import { agentSelectors } from '@/store/session/selectors';
 import { LanguageModel } from '@/types/llm';
 
 const Token = memo(() => {
   const { t } = useTranslation('chat');
 
-  const [input, messageString, systemRole, model] = useSessionStore((s) => [
+  const [input, messageString] = useChatStore((s) => [
     s.inputMessage,
     chatSelectors.chatsMessageString(s),
+  ]);
+
+  const [systemRole, model] = useSessionStore((s) => [
     agentSelectors.currentAgentSystemRole(s),
     agentSelectors.currentAgentModel(s) as LanguageModel,
   ]);
+
   const inputTokenCount = useTokenCount(input);
 
   const systemRoleToken = useTokenCount(systemRole);

package/src/app/chat/features/ChatInput/InputAreaInner/index.tsx

@@ -2,7 +2,7 @@ import { Input, TextArea } from '@lobehub/ui';
 import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 
 import { useSendMessage } from '../useSend';
 
@@ -15,7 +15,7 @@ const InputAreaInner = memo<InputAreaInnerProps>(({ className, mobile }) => {
   const { t } = useTranslation('chat');
   const isChineseInput = useRef(false);
 
-  const [loading, message, updateInputMessage] = useSessionStore((s) => [
+  const [loading, message, updateInputMessage] = useChatStore((s) => [
     !!s.chatLoadingId,
     s.inputMessage,
     s.updateInputMessage,

package/src/app/chat/features/ChatInput/STT/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useSTT } from '@/hooks/useSTT';
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 import { ChatMessageError } from '@/types/chatMessage';
 import { getMessageError } from '@/utils/fetch';
 
@@ -25,7 +25,7 @@ const STT = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
 
-  const [loading, updateInputMessage] = useSessionStore((s) => [
+  const [loading, updateInputMessage] = useChatStore((s) => [
     !!s.chatLoadingId,
     s.updateInputMessage,
   ]);

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

@@ -7,11 +7,11 @@ import { useTranslation } from 'react-i18next';
 
 import HotKeys from '@/components/HotKeys';
 import { PREFIX_KEY, SAVE_TOPIC_KEY } from '@/const/hotkeys';
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 
 const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('chat');
-  const [hasTopic, openNewTopicOrSaveTopic] = useSessionStore((s) => [
+  const [hasTopic, openNewTopicOrSaveTopic] = useChatStore((s) => [
     !!s.activeTopicId,
     s.openNewTopicOrSaveTopic,
   ]);

package/src/app/chat/features/ChatInput/useSend.ts

@@ -1,16 +1,16 @@
 import { useCallback } from 'react';
 
 import { filesSelectors, useFileStore } from '@/store/files';
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from 'src/store/chat';
 
 export const useSendMessage = () => {
-  const [sendMessage, updateInputMessage] = useSessionStore((s) => [
+  const [sendMessage, updateInputMessage] = useChatStore((s) => [
     s.sendMessage,
     s.updateInputMessage,
   ]);
 
   return useCallback(() => {
-    const store = useSessionStore.getState();
+    const store = useChatStore.getState();
     if (!!store.chatLoadingId) return;
     const imageList = filesSelectors.imageUrlOrBase64List(useFileStore.getState());
 

package/src/app/chat/features/Conversation/ChatList/Actions/index.ts

@@ -1,6 +1,6 @@
 import { ChatListProps } from '@lobehub/ui';
 
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 
 import { AssistantActionsBar } from './Assistant';
 import { DefaultActionsBar } from './Fallback';
@@ -20,7 +20,7 @@ interface ActionsClick {
 }
 
 export const useActionsClick = (): ChatListProps['onActionsClick'] => {
-  const [deleteMessage, resendMessage, translateMessage, ttsMessage] = useSessionStore((s) => [
+  const [deleteMessage, resendMessage, translateMessage, ttsMessage] = useChatStore((s) => [
     s.deleteMessage,
     s.resendMessage,
     s.translateMessage,

package/src/app/chat/features/Conversation/ChatList/Error/ApiKeyForm.tsx

@@ -5,8 +5,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import { useChatStore } from '@/store/chat';
 import { settingsSelectors, useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
 
 import { FormAction } from './style';
 
@@ -20,7 +20,7 @@ const APIKeyForm = memo<{ id: string }>(({ id }) => {
     s.setOpenAIConfig,
   ]);
 
-  const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
+  const [resend, deleteMessage] = useChatStore((s) => [s.resendMessage, s.deleteMessage]);
 
   return (
     <Center gap={16} style={{ maxWidth: 300 }}>

package/src/app/chat/features/Conversation/ChatList/Error/InvalidAccess.tsx

@@ -5,8 +5,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
 
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer, FormAction } from './style';
@@ -20,7 +20,7 @@ const InvalidAccess: RenderErrorMessage['Render'] = memo(({ id }) => {
   const { t } = useTranslation('error');
   const [mode, setMode] = useState<Tab>(Tab.Password);
   const [password, setSettings] = useGlobalStore((s) => [s.settings.password, s.setSettings]);
-  const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
+  const [resend, deleteMessage] = useChatStore((s) => [s.resendMessage, s.deleteMessage]);
 
   return (
     <ErrorActionContainer>

package/src/app/chat/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx

@@ -7,9 +7,9 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import PluginSettingsConfig from '@/features/PluginSettings';
+import { useChatStore } from '@/store/chat';
 import { pluginHelpers, usePluginStore } from '@/store/plugin';
 import { pluginSelectors } from '@/store/plugin/selectors';
-import { useSessionStore } from '@/store/session';
 
 import { ErrorActionContainer, useStyles } from '../style';
 
@@ -17,7 +17,7 @@ const PluginSettings: RenderErrorMessage['Render'] = memo(({ id, plugin }) => {
   const { styles } = useStyles();
   const { t } = useTranslation('error');
   const theme = useTheme();
-  const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
+  const [resend, deleteMessage] = useChatStore((s) => [s.resendMessage, s.deleteMessage]);
   const pluginIdentifier = plugin?.identifier as string;
   const pluginMeta = usePluginStore(pluginSelectors.getPluginMetaById(pluginIdentifier), isEqual);
   const manifest = usePluginStore(pluginSelectors.getPluginManifestById(pluginIdentifier), isEqual);

package/src/app/chat/features/Conversation/ChatList/Extras/Assistant.test.tsx

@@ -27,11 +27,11 @@ vi.mock('@/store/session/selectors', () => ({
 
 const mockData: ChatMessage = {
   content: 'test-content',
-  createAt: 0,
+  createdAt: 0,
   id: 'abc',
   meta: { avatar: '', backgroundColor: '', description: '', tags: [], title: '' },
   role: 'assistant',
-  updateAt: 0,
+  updatedAt: 0,
 };
 
 describe('AssistantMessageExtra', () => {
@@ -71,7 +71,7 @@ describe('AssistantMessageExtra', () => {
   });
 
   it('should render Translate component if extra.translate exists', async () => {
-    render(<AssistantMessageExtra {...mockData} extra={{ translate: {} }} />);
+    render(<AssistantMessageExtra {...mockData} extra={{ translate: { to: 'abc' } }} />);
     expect(screen.getByText('Translate Component')).toBeInTheDocument();
   });
 
@@ -79,7 +79,7 @@ describe('AssistantMessageExtra', () => {
     (useSessionStore as unknown as Mock).mockImplementation(() => ({
       chatLoadingId: 'test-id',
     }));
-    render(<AssistantMessageExtra {...mockData} extra={{ translate: {}, tts: {} }} />);
+    render(<AssistantMessageExtra {...mockData} extra={{ translate: { to: 'abc' }, tts: {} }} />);
     expect(screen.getByText('TTS Component')).toBeInTheDocument();
     expect(screen.getByText('Translate Component')).toBeInTheDocument();
   });

package/src/app/chat/features/Conversation/ChatList/Extras/Assistant.tsx

@@ -1,8 +1,9 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
-import { RenderMessageExtra, Tag } from '@lobehub/ui';
+import { Tag } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/chatMessage';
@@ -11,39 +12,37 @@ import ExtraContainer from './ExtraContainer';
 import TTS from './TTS';
 import Translate from './Translate';
 
-export const AssistantMessageExtra: RenderMessageExtra = memo<ChatMessage>(
-  ({ extra, id, content }) => {
-    const model = useSessionStore(agentSelectors.currentAgentModel);
-    const loading = useSessionStore((s) => s.chatLoadingId === id);
+export const AssistantMessageExtra = memo<ChatMessage>(({ extra, id, content }) => {
+  const model = useSessionStore(agentSelectors.currentAgentModel);
+  const loading = useChatStore((s) => s.chatLoadingId === id);
 
-    const showModelTag = extra?.fromModel && model !== extra?.fromModel;
-    const showTranslate = !!extra?.translate;
-    const showTTS = !!extra?.tts;
+  const showModelTag = extra?.fromModel && model !== extra?.fromModel;
+  const showTranslate = !!extra?.translate;
+  const showTTS = !!extra?.tts;
 
-    const showExtra = showModelTag || showTranslate || showTTS;
+  const showExtra = showModelTag || showTranslate || showTTS;
 
-    if (!showExtra) return;
+  if (!showExtra) return;
 
-    return (
-      <Flexbox gap={8} style={{ marginTop: 8 }}>
-        {showModelTag && (
-          <div>
-            <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
-          </div>
-        )}
+  return (
+    <Flexbox gap={8} style={{ marginTop: 8 }}>
+      {showModelTag && (
         <div>
-          {extra?.tts && (
-            <ExtraContainer>
-              <TTS content={content} id={id} loading={loading} {...extra?.tts} />
-            </ExtraContainer>
-          )}
-          {extra?.translate && (
-            <ExtraContainer>
-              <Translate id={id} loading={loading} {...extra?.translate} />
-            </ExtraContainer>
-          )}
+          <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
         </div>
-      </Flexbox>
-    );
-  },
-);
+      )}
+      <div>
+        {extra?.tts && (
+          <ExtraContainer>
+            <TTS content={content} id={id} loading={loading} {...extra?.tts} />
+          </ExtraContainer>
+        )}
+        {extra?.translate && (
+          <ExtraContainer>
+            <Translate id={id} loading={loading} {...extra?.translate} />
+          </ExtraContainer>
+        )}
+      </div>
+    </Flexbox>
+  );
+});

package/src/app/chat/features/Conversation/ChatList/Extras/TTS.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useTTS } from '@/hooks/useTTS';
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 import { ChatMessageError, ChatTTS } from '@/types/chatMessage';
 import { getMessageError } from '@/utils/fetch';
 
@@ -22,7 +22,7 @@ const TTS = memo<TTSProps>(({ id, init, content }) => {
   const [error, setError] = useState<ChatMessageError>();
   const { t } = useTranslation('chat');
 
-  const [ttsMessage, clearTTS] = useSessionStore((s) => [s.ttsMessage, s.clearTTS]);
+  const [ttsMessage, clearTTS] = useChatStore((s) => [s.ttsMessage, s.clearTTS]);
 
   const setDefaultError = useCallback(
     (err?: any) => {

package/src/app/chat/features/Conversation/ChatList/Extras/Translate.tsx

@@ -7,7 +7,7 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 import { ChatTranslate } from '@/types/chatMessage';
 
 import BubblesLoading from '../Loading';
@@ -25,7 +25,7 @@ const Translate = memo<TranslateProps>(({ content = '', from, to, id, loading })
   const { theme, styles } = useStyles();
   const { t } = useTranslation('common');
   const [show, setShow] = useState(true);
-  const clearTranslate = useSessionStore((s) => s.clearTranslate);
+  const clearTranslate = useChatStore((s) => s.clearTranslate);
 
   const { message } = App.useApp();
   return (

package/src/app/chat/features/Conversation/ChatList/Extras/User.tsx

@@ -1,17 +1,20 @@
-import { RenderMessageExtra } from '@lobehub/ui';
 import { memo } from 'react';
 
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 import { ChatMessage } from '@/types/chatMessage';
 
 import ExtraContainer from './ExtraContainer';
 import TTS from './TTS';
 import Translate from './Translate';
 
-export const UserMessageExtra: RenderMessageExtra = memo<ChatMessage>(({ extra, id, content }) => {
-  const loading = useSessionStore((s) => s.chatLoadingId === id);
+export const UserMessageExtra = memo<ChatMessage>(({ extra, id, content }) => {
+  const loading = useChatStore((s) => s.chatLoadingId === id);
+
+  const showTranslate = !!extra?.translate;
+  const showTTS = !!extra?.tts;
+
+  const showExtra = showTranslate || showTTS;
 
-  const showExtra = extra?.translate || extra?.tts;
   if (!showExtra) return;
 
   return (