@lobehub/chat 0.106.0 → 0.107.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/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 (

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

@@ -1,9 +1,9 @@
-import { ChatListProps } from '@lobehub/ui';
+import { ChatListProps, RenderMessageExtra } from '@lobehub/ui';
 
 import { AssistantMessageExtra } from './Assistant';
 import { UserMessageExtra } from './User';
 
 export const renderMessagesExtra: ChatListProps['renderMessagesExtra'] = {
-  assistant: AssistantMessageExtra,
-  user: UserMessageExtra,
+  assistant: AssistantMessageExtra as unknown as RenderMessageExtra,
+  user: UserMessageExtra as unknown as RenderMessageExtra,
 };

package/src/app/chat/features/Conversation/ChatList/Extras/type.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+
+import { ChatMessage } from '@/types/chatMessage';
+
+export type RenderMessageExtra = FC<ChatMessage>;

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

@@ -1,15 +1,19 @@
-import { RenderMessage } from '@lobehub/ui';
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 
-import { useSessionStore } from '@/store/session';
-import { chatSelectors } from '@/store/session/selectors';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/chatMessage';
 import { isFunctionMessageAtStart } from '@/utils/message';
 
 import Inspector from '../Plugins/Inspector';
 import { DefaultMessage } from './Default';
 
-export const AssistantMessage: RenderMessage = memo(({ id, plugin, content, ...props }) => {
-  const fcProps = useSessionStore(chatSelectors.getFunctionMessageProps({ content, id, plugin }));
+export const AssistantMessage = memo<
+  ChatMessage & {
+    editableContent: ReactNode;
+  }
+>(({ id, plugin, content, ...props }) => {
+  const fcProps = useChatStore(chatSelectors.getFunctionMessageProps({ content, id, plugin }));
 
   if (!isFunctionMessageAtStart(content))
     return <DefaultMessage content={content} id={id} {...props} />;

package/src/app/chat/features/Conversation/ChatList/Messages/Default.tsx

@@ -1,11 +1,15 @@
-import { RenderMessage } from '@lobehub/ui';
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 
 import { LOADING_FLAT } from '@/const/message';
+import { ChatMessage } from '@/types/chatMessage';
 
 import BubblesLoading from '../Loading';
 
-export const DefaultMessage: RenderMessage = memo(({ id, editableContent, content }) => {
+export const DefaultMessage = memo<
+  ChatMessage & {
+    editableContent: ReactNode;
+  }
+>(({ id, editableContent, content }) => {
   if (content === LOADING_FLAT) return <BubblesLoading />;
 
   return <div id={id}>{editableContent}</div>;

package/src/app/chat/features/Conversation/ChatList/Messages/Function.tsx

@@ -1,19 +1,20 @@
-import { RenderMessage } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useSessionStore } from '@/store/session';
-import { chatSelectors } from '@/store/session/selectors';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/chatMessage';
 
 import Inspector from '../Plugins/Inspector';
 import PluginRender from '../Plugins/Render';
 
-export const FunctionMessage: RenderMessage = memo(({ id, content, plugin, name }) => {
-  const fcProps = useSessionStore(
+export const FunctionMessage = memo<ChatMessage>(({ id, content, plugin }) => {
+  const fcProps = useChatStore(
     chatSelectors.getFunctionMessageProps({ content, id, plugin }),
     isEqual,
   );
+
   const [showRender, setShow] = useState(true);
 
   return (
@@ -24,7 +25,7 @@ export const FunctionMessage: RenderMessage = memo(({ id, content, plugin, name
           content={content}
           id={id}
           loading={fcProps.loading}
-          name={name}
+          name={plugin?.identifier}
           payload={fcProps.command}
           type={fcProps.type}
         />

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

@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation';
 
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/slices/session/selectors';
+import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
 import { AssistantMessage } from './Assistant';
@@ -13,10 +13,10 @@ import { FunctionMessage } from './Function';
 import { UserMessage } from './User';
 
 export const renderMessages: ChatListProps['renderMessages'] = {
-  assistant: AssistantMessage,
-  default: DefaultMessage,
-  function: FunctionMessage,
-  user: UserMessage,
+  assistant: AssistantMessage as any,
+  default: DefaultMessage as any,
+  function: FunctionMessage as any,
+  user: UserMessage as any,
 };
 
 export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {
@@ -32,8 +32,8 @@ export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {
           isInbox
             ? router.push('/settings/agent')
             : mobile
-            ? router.push(pathString('/chat/settings', { hash: location.hash }))
-            : toggleSystemRole(true);
+              ? router.push(pathString('/chat/settings', { hash: location.hash }))
+              : toggleSystemRole(true);
       }
     }
   };