@lobehub/chat 0.89.7 → 0.89.9

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+### [Version 0.89.9](https://github.com/lobehub/lobe-chat/compare/v0.89.8...v0.89.9)
+
+<sup>Released on **2023-10-17**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix ChatList FC Render.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix ChatList FC Render ([4b8bdbd](https://github.com/lobehub/lobe-chat/commit/4b8bdbd))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.89.8](https://github.com/lobehub/lobe-chat/compare/v0.89.7...v0.89.8)
+
+<sup>Released on **2023-10-16**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor ChatList.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix type.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor ChatList, closes [#147](https://github.com/lobehub/lobe-chat/issues/147) ([aa4216c](https://github.com/lobehub/lobe-chat/commit/aa4216c))
+
+#### What's fixed
+
+- **misc**: Fix type ([1e931d5](https://github.com/lobehub/lobe-chat/commit/1e931d5))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.89.7](https://github.com/lobehub/lobe-chat/compare/v0.89.6...v0.89.7)
 
 <sup>Released on **2023-10-16**</sup>

package/README.md

@@ -86,14 +86,14 @@ Please be aware that LobeChat is currently under active development, and feedbac
 
 ## ✨ Features
 
-- [x] 💨 **Quick Deployment**: Using the Vercel platform, you can deploy with just one click and complete the process within 1 minute without any complex configuration;
-- [x] 💎 **Exquisite UI Design**: With a carefully designed interface, it offers an elegant appearance and smooth interaction. It supports light and dark themes and is mobile-friendly. PWA support provides a more native-like experience;
-- [x] 🗣️ **Smooth Conversation Experience**: Fluid responses ensure a smooth conversation experience. It fully supports Markdown rendering, including code highlighting, LaTex formulas, Mermaid flowcharts, and more;
-- [x] 🧩 **Plugin Support & Custom Plugin Development**: Conversations are extendable with plugins. Users can install and use various plugins, such as search engines, web extraction, etc. It also supports the development of custom plugins to meet custom needs;
+- [x] 💨 **Quick Deployment**: Using the Vercel platform, you can deploy with just one click and complete the process within 1 minute without any complex configuration.
+- [x] 💎 **Exquisite UI Design**: With a carefully designed interface, it offers an elegant appearance and smooth interaction. It supports light and dark themes and is mobile-friendly. PWA support provides a more native-like experience.
+- [x] 🗣️ **Smooth Conversation Experience**: Fluid responses ensure a smooth conversation experience. It fully supports Markdown rendering, including code highlighting, LaTex formulas, Mermaid flowcharts, and more.
+- [x] 🧩 **Plugin Support & Custom Plugin Development**: Conversations are extendable with plugins. Users can install and use various plugins, such as search engines, web extraction, etc. It also supports the development of custom plugins to meet custom needs.
 - [x] 🔒 **Privacy Protection**: All data is stored locally in the user's browser, ensuring user privacy;
 - [x] 🤖 **Customizable Agent Roles**: Users can create, share, and debug personalized dialogue agent roles according to their needs, providing more flexible and customized dialogue functions;
 - [x] 🌐 **Custom Domain**: If users have their own domain, they can bind it to the platform for quick access to the dialogue agent from anywhere.
-- [x] 🏬 **Role Market**: A Role Market is provided where users can select their preferred dialogue agent roles, enriching the content and style of the dialogue;
+- [x] 🏬 **Role Market**: A Role Market is provided where users can select their preferred dialogue agent roles, enriching the content and style of the dialogue.
 
 > **Note**\
 > You can find our upcoming [Roadmap][github-project-link] plans in the Projects section.
@@ -183,8 +183,8 @@ LobeChat provides Self-Hosted Version with Vercel and [Docker Image][docker-rele
 If you want to deploy this service yourself on Vercel, you can follow these steps:
 
 - Prepare your [OpenAI API Key](https://platform.openai.com/account/api-keys).
-- Click the button below to start deployment: Deploy with Vercel. Log in directly with your GitHub account, and remember to fill in the `OPENAI_API_KEY`(required) and `ACCESS_CODE` (recommended) on the environment variable section;
-- After deployment, you can start using it;
+- Click the button below to start deployment: Deploy with Vercel. Log in directly with your GitHub account, and remember to fill in the `OPENAI_API_KEY`(required) and `ACCESS_CODE` (recommended) on the environment variable section.
+- After deployment, you can start using it.
 - Bind a custom domain (optional): The DNS of the domain assigned by Vercel is polluted in some areas; binding a custom domain can connect directly.
 
 <div align="center">
@@ -279,8 +279,8 @@ Plugins provide a means to extend the [Function Calling][fc-link] capabilities o
 > The plugin system is currently undergoing major development. You can learn more in the following issues:
 >
 > - [x] [**Plugin Phase 1**](https://github.com/lobehub/lobe-chat/issues/73): Implement separation of the plugin from the main body, split the plugin into an independent repository for maintenance, and realize dynamic loading of the plugin.
-> - [x] [**Plugin Phase 2**](https://github.com/lobehub/lobe-chat/issues/97): The security and stability of the plugin's use, more accurately presenting abnormal states, the maintainability of the plugin architecture and developer-friendly.
-> - [ ] [**Plugin Phase 3**](https://github.com/lobehub/lobe-chat/issues/149): Higher-level and more comprehensive customization capabilities, support for plugin authentication and examples.
+> - [x] [**Plugin Phase 2**](https://github.com/lobehub/lobe-chat/issues/97): The security and stability of the plugin's use, more accurately presenting abnormal states, the maintainability of the plugin architecture, and developer-friendly.
+> - [ ] [**Plugin Phase 3**](https://github.com/lobehub/lobe-chat/issues/149): Higher-level and more comprehensive customization capabilities, support for plugin authentication, and examples.
 
 | Official Plugin                                 | Description                                                                                                                                       |
 | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -335,7 +335,7 @@ Contributions of all types are more than welcome; if you are interested in contr
 
 ## 🔗 More Products
 
-- **[🤯 Lobe Theme][lobe-theme]:** The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency-boosting features.
+- **[🤯 Lobe Theme][lobe-theme]:** The modern theme for stable diffusion WebUI, exquisite interface design, highly customizable UI, and efficiency-boosting features.
 - **[🌏 Lobe i18n][lobe-i18n] :** Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature.
 - **[💌 Lobe Commit][lobe-commit]:** Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.89.7",
+  "version": "0.89.9",
   "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",

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

@@ -1,4 +1,4 @@
-import { Icon } from '@lobehub/ui';
+import { Icon, RenderErrorMessage } from '@lobehub/ui';
 import { Button, Segmented } from 'antd';
 import { KeySquare, SquareAsterisk } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -17,7 +17,7 @@ enum Tab {
   Password = 'password',
 }
 
-const InvalidAccess = memo<{ id: string }>(({ id }) => {
+const InvalidAccess: RenderErrorMessage = memo(({ id }) => {
   const { t } = useTranslation('error');
   const [mode, setMode] = useState<Tab>(Tab.Password);
   const [password, setSettings] = useGlobalStore((s) => [s.settings.password, s.setSettings]);

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

@@ -1,9 +1,10 @@
+import { RenderErrorMessage } from '@lobehub/ui';
 import { memo } from 'react';
 
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer } from './style';
 
-const OpenAPIKey = memo<{ id: string }>(({ id }) => (
+const OpenAPIKey: RenderErrorMessage = memo(({ id }) => (
   <ErrorActionContainer>
     <APIKeyForm id={id} />
   </ErrorActionContainer>

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

@@ -1,4 +1,4 @@
-import { Highlighter } from '@lobehub/ui';
+import { Highlighter, RenderErrorMessage } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -16,16 +16,18 @@ interface OpenAIErrorResponse {
   error: OpenAIError;
 }
 
-const OpenAiBizError = memo<{ content: OpenAIErrorResponse; id: string }>(({ content, id }) => {
+const OpenAiBizError: RenderErrorMessage = memo(({ error, id, ...props }) => {
   const { styles } = useStyles();
 
-  const errorCode = content.error?.code;
+  const errorBody: OpenAIErrorResponse = (error as any)?.body;
 
-  if (errorCode === 'invalid_api_key') return <OpenAPIKey id={id} />;
+  const errorCode = errorBody.error?.code;
+
+  if (errorCode === 'invalid_api_key') return <OpenAPIKey error={error} id={id} {...props} />;
 
   return (
     <Flexbox className={styles.container} style={{ maxWidth: 600 }}>
-      <Highlighter language={'json'}>{JSON.stringify(content, null, 2)}</Highlighter>
+      <Highlighter language={'json'}>{JSON.stringify(errorBody, null, 2)}</Highlighter>
     </Flexbox>
   );
 });

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

@@ -1,4 +1,4 @@
-import { Highlighter } from '@lobehub/ui';
+import { Highlighter, RenderErrorMessage } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -15,12 +15,13 @@ interface OpenAIErrorResponse {
   error: OpenAIError;
 }
 
-const PluginError = memo<{ content: OpenAIErrorResponse; id: string }>(({ content }) => {
+const PluginError: RenderErrorMessage = memo(({ error, id }) => {
   const { styles } = useStyles();
+  const errorBody: OpenAIErrorResponse = (error as any)?.body;
 
   return (
-    <Flexbox className={styles.container} style={{ maxWidth: 600 }}>
-      <Highlighter language={'json'}>{JSON.stringify(content, null, 2)}</Highlighter>
+    <Flexbox className={styles.container} id={id} style={{ maxWidth: 600 }}>
+      <Highlighter language={'json'}>{JSON.stringify(errorBody, null, 2)}</Highlighter>
     </Flexbox>
   );
 });

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

@@ -1,4 +1,4 @@
-import { Avatar } from '@lobehub/ui';
+import { Avatar, RenderErrorMessage } from '@lobehub/ui';
 import { Button, Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -12,32 +12,26 @@ import { useSessionStore } from '@/store/session';
 
 import { ErrorActionContainer, useStyles } from '../style';
 
-interface PluginSettingsProps {
-  id: string;
-  pluginIdentifier: string;
-}
-
-const PluginSettings = memo<PluginSettingsProps>(({ id, pluginIdentifier }) => {
+const PluginSettings: RenderErrorMessage = memo(({ id, plugin }) => {
   const { styles } = useStyles();
-
   const { t } = useTranslation('error');
   const theme = useTheme();
   const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
-
-  const plugin = usePluginStore(pluginSelectors.getPluginMetaById(pluginIdentifier), isEqual);
+  const pluginIdentifier = plugin?.identifier as string;
+  const pluginMeta = usePluginStore(pluginSelectors.getPluginMetaById(pluginIdentifier), isEqual);
   const manifest = usePluginStore(pluginSelectors.getPluginManifestById(pluginIdentifier), isEqual);
 
   return (
     <ErrorActionContainer>
       <Center gap={16} style={{ maxWidth: 400 }}>
         <Avatar
-          avatar={pluginHelpers.getPluginAvatar(plugin?.meta) || '⚙️'}
+          avatar={pluginHelpers.getPluginAvatar(pluginMeta?.meta) || '⚙️'}
           background={theme.colorFillContent}
           gap={12}
           size={80}
         />
         <Flexbox style={{ fontSize: 20 }}>
-          {t('pluginSettings.title', { name: pluginHelpers.getPluginTitle(plugin?.meta) })}
+          {t('pluginSettings.title', { name: pluginHelpers.getPluginTitle(pluginMeta?.meta) })}
         </Flexbox>
         <Flexbox className={styles.desc}>{t('pluginSettings.desc')}</Flexbox>
         <Divider style={{ margin: '0 16px' }} />

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

@@ -1,8 +1,7 @@
-import { IPluginErrorType, PluginErrorType } from '@lobehub/chat-plugin-sdk';
-import { RenderErrorMessage } from '@lobehub/ui';
+import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
+import { ChatListProps } from '@lobehub/ui';
 
-import { ChatMessage } from '@/types/chatMessage';
-import { ChatErrorType, ErrorType } from '@/types/fetch';
+import { ChatErrorType } from '@/types/fetch';
 
 import InvalidAccess from './InvalidAccess';
 import OpenAPIKey from './OpenAPIKey';
@@ -10,39 +9,18 @@ import OpenAiBizError from './OpenAiBizError';
 import PluginError from './Plugin/PluginError';
 import PluginSettings from './Plugin/PluginSettings';
 
-export const renderErrorMessage: RenderErrorMessage = (error, message: ChatMessage) => {
-  switch (error.type as IPluginErrorType) {
-    case PluginErrorType.PluginMarketIndexNotFound:
-    case PluginErrorType.PluginMarketIndexInvalid:
-    case PluginErrorType.PluginMetaInvalid:
-    case PluginErrorType.PluginMetaNotFound:
-    case PluginErrorType.PluginManifestInvalid:
-    case PluginErrorType.PluginManifestNotFound:
-    case PluginErrorType.PluginApiNotFound:
-    case PluginErrorType.PluginApiParamsError:
-    case PluginErrorType.PluginServerError: {
-      return <PluginError content={(error as any).body} id={message.id} />;
-    }
-    case PluginErrorType.PluginSettingsInvalid: {
-      return (
-        message.plugin?.identifier && (
-          <PluginSettings id={message.id} pluginIdentifier={message.plugin?.identifier} />
-        )
-      );
-    }
-  }
-
-  switch (error.type as ErrorType) {
-    case ChatErrorType.InvalidAccessCode: {
-      return <InvalidAccess id={message.id} />;
-    }
-
-    case ChatErrorType.NoAPIKey: {
-      return <OpenAPIKey id={message.id} />;
-    }
-
-    case ChatErrorType.OpenAIBizError: {
-      return <OpenAiBizError content={(error as any).body} id={message.id} />;
-    }
-  }
+export const renderErrorMessages: ChatListProps['renderErrorMessages'] = {
+  [PluginErrorType.PluginMarketIndexNotFound]: PluginError,
+  [PluginErrorType.PluginMarketIndexInvalid]: PluginError,
+  [PluginErrorType.PluginMetaInvalid]: PluginError,
+  [PluginErrorType.PluginMetaNotFound]: PluginError,
+  [PluginErrorType.PluginManifestInvalid]: PluginError,
+  [PluginErrorType.PluginManifestNotFound]: PluginError,
+  [PluginErrorType.PluginApiNotFound]: PluginError,
+  [PluginErrorType.PluginApiParamsError]: PluginError,
+  [PluginErrorType.PluginServerError]: PluginError,
+  [PluginErrorType.PluginSettingsInvalid]: PluginSettings,
+  [ChatErrorType.InvalidAccessCode]: InvalidAccess,
+  [ChatErrorType.NoAPIKey]: OpenAPIKey,
+  [ChatErrorType.OpenAIBizError]: OpenAiBizError,
 };

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

@@ -0,0 +1,80 @@
+import { SiOpenai } from '@icons-pack/react-simple-icons';
+import {
+  ActionIconGroup,
+  RenderAction,
+  RenderMessage,
+  RenderMessageExtra,
+  Tag,
+  useChatListActionsBar,
+} from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/slices/agentConfig';
+import { currentFunctionCallProps } from '@/store/session/slices/chat/selectors/chat';
+import { isFunctionMessage } from '@/utils/message';
+
+import FunctionCall from '../Plugins/FunctionCall';
+import { DefautMessage } from './Default';
+import { SystemActionsBar } from './System';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    margin-top: 8px;
+  `,
+  plugin: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    width: fit-content;
+  `,
+}));
+
+export const AssistantMessage: RenderMessage = memo(
+  ({ id, plugin, function_call, content, ...props }) => {
+    const genFunctionCallProps = useSessionStore(currentFunctionCallProps);
+
+    if (!isFunctionMessage(content)) return <DefautMessage content={content} id={id} {...props} />;
+
+    const fcProps = genFunctionCallProps({ content, function_call, id, plugin });
+
+    return (
+      <div id={id}>
+        <FunctionCall {...fcProps} />
+      </div>
+    );
+  },
+);
+
+export const AssistantMessageExtra: RenderMessageExtra = memo(({ extra, function_call }) => {
+  const { styles } = useStyles();
+  const model = useSessionStore(agentSelectors.currentAgentModel);
+
+  const hasModelTag = extra?.fromModel && model !== extra?.fromModel;
+  const hasFuncTag = !!function_call;
+  if (!(hasModelTag || hasFuncTag)) return;
+
+  return (
+    <Flexbox className={styles.container} horizontal>
+      <div>
+        <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
+      </div>
+    </Flexbox>
+  );
+});
+
+export const AssistantActionsBar: RenderAction = memo(({ text, error, id, ...props }) => {
+  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+  if (id === 'default') return;
+  if (error) return <SystemActionsBar id={id} text={text} {...props} />;
+  return (
+    <ActionIconGroup
+      dropdownMenu={[edit, copy, regenerate, divider, del]}
+      items={[regenerate, copy]}
+      type="ghost"
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,6 @@
+import { RenderMessage } from '@lobehub/ui';
+import { memo } from 'react';
+
+export const DefautMessage: RenderMessage = memo(({ id, editableContent }) => {
+  return <div id={id}>{editableContent}</div>;
+});

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

@@ -0,0 +1,42 @@
+import { ActionIconGroup, RenderAction, RenderMessage, useChatListActionsBar } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+import { currentFunctionCallProps } from '@/store/session/slices/chat/selectors/chat';
+
+import FunctionCall from '../Plugins/FunctionCall';
+import PluginMessage from '../Plugins/PluginMessage';
+
+export const FunctionMessage: RenderMessage = memo(
+  ({ id, content, plugin, function_call, ...props }) => {
+    const genFunctionCallProps = useSessionStore(currentFunctionCallProps);
+    const fcProps = genFunctionCallProps({ content, function_call, id, plugin });
+
+    return (
+      <Flexbox gap={12} id={id}>
+        <FunctionCall {...fcProps} />
+        <PluginMessage
+          content={content}
+          function_call={function_call}
+          id={id}
+          loading={fcProps.loading}
+          plugin={plugin}
+          {...props}
+        />
+      </Flexbox>
+    );
+  },
+);
+
+export const FunctionActionsBar: RenderAction = memo(({ text, ...props }) => {
+  const { regenerate, divider, del } = useChatListActionsBar(text);
+  return (
+    <ActionIconGroup
+      dropdownMenu={[regenerate, divider, del]}
+      items={[regenerate]}
+      type="ghost"
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,7 @@
+import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { memo } from 'react';
+
+export const SystemActionsBar: RenderAction = memo(({ text, ...props }) => {
+  const { del } = useChatListActionsBar(text);
+  return <ActionIconGroup dropdownMenu={[del]} items={[]} type="ghost" {...props} />;
+});

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

@@ -0,0 +1,14 @@
+import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { memo } from 'react';
+
+export const UserActionsBar: RenderAction = memo(({ text, ...props }) => {
+  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+  return (
+    <ActionIconGroup
+      dropdownMenu={[edit, copy, regenerate, divider, del]}
+      items={[regenerate, edit]}
+      type="ghost"
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,24 @@
+import { ChatListProps } from '@lobehub/ui';
+
+import { AssistantActionsBar, AssistantMessage, AssistantMessageExtra } from './Assistant';
+import { DefautMessage } from './Default';
+import { FunctionActionsBar, FunctionMessage } from './Function';
+import { SystemActionsBar } from './System';
+import { UserActionsBar } from './User';
+
+export const renderMessages: ChatListProps['renderMessages'] = {
+  assistant: AssistantMessage,
+  default: DefautMessage,
+  function: FunctionMessage,
+};
+
+export const renderMessagesExtra: ChatListProps['renderMessagesExtra'] = {
+  assistant: AssistantMessageExtra,
+};
+
+export const renderActions: ChatListProps['renderActions'] = {
+  assistant: AssistantActionsBar,
+  function: FunctionActionsBar,
+  system: SystemActionsBar,
+  user: UserActionsBar,
+};

package/src/app/chat/features/Conversation/ChatList/Plugins/FunctionCall.tsx

@@ -30,6 +30,8 @@ const FunctionCall = memo<FunctionCallProps>(
     const pluginAvatar = pluginHelpers.getPluginAvatar(item?.meta);
     const pluginTitle = pluginHelpers.getPluginTitle(item?.meta);
 
+    console.log(item?.meta);
+
     const avatar = pluginAvatar ? (
       <Avatar avatar={pluginAvatar} size={32} />
     ) : (

package/src/app/chat/features/Conversation/ChatList/index.tsx

@@ -1,18 +1,13 @@
-import { ChatList, RenderMessage } from '@lobehub/ui';
+import { ChatList } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, chatSelectors } from '@/store/session/selectors';
-import { ChatMessage } from '@/types/chatMessage';
-import { isFunctionMessage } from '@/utils/message';
 
-import { renderErrorMessage } from './Error';
-import MessageExtra from './MessageExtra';
-import FunctionCall from './Plugins/FunctionCall';
-import PluginMessage from './Plugins/PluginMessage';
+import { renderErrorMessages } from './Error';
+import { renderActions, renderMessages, renderMessagesExtra } from './Messages';
 import SkeletonList from './SkeletonList';
 
 const List = memo(() => {
@@ -41,43 +36,6 @@ const List = memo(() => {
     ];
   });
 
-  const renderMessage: RenderMessage = useCallback(
-    (content, message: ChatMessage) => {
-      const id = message.plugin?.identifier || message.function_call?.name;
-      const command = message.plugin ?? message.function_call;
-      const args = command?.arguments;
-      const fcProps = {
-        arguments: args,
-        command,
-        content: message.content,
-        id,
-        loading: message.id === chatLoadingId,
-      };
-
-      if (message.role === 'function')
-        return (
-          <Flexbox gap={12} id={message.id}>
-            <FunctionCall {...fcProps} />
-            <PluginMessage loading={message.id === chatLoadingId} {...message} />
-          </Flexbox>
-        );
-
-      if (
-        message.role === 'assistant' &&
-        // 包含了 function 信息
-        isFunctionMessage(message.content)
-      )
-        return (
-          <div id={message.id}>
-            <FunctionCall {...fcProps} />
-          </div>
-        );
-
-      return <div id={message.id}>{content}</div>;
-    },
-    [chatLoadingId],
-  );
-
   if (!init) return <SkeletonList />;
 
   return (
@@ -99,12 +57,13 @@ const List = memo(() => {
           }
         }
       }}
-      onMessageChange={(id, content) => {
-        dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content });
-      }}
-      renderErrorMessage={renderErrorMessage}
-      renderMessage={renderMessage}
-      renderMessageExtra={MessageExtra}
+      onMessageChange={(id, content) =>
+        dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content })
+      }
+      renderActions={renderActions}
+      renderErrorMessages={renderErrorMessages}
+      renderMessages={renderMessages}
+      renderMessagesExtra={renderMessagesExtra}
       style={{ marginTop: 24 }}
       text={{
         cancel: t('cancel'),

package/src/store/session/slices/chat/selectors/chat.ts

@@ -1,5 +1,6 @@
 import { t } from 'i18next';
 
+import { FunctionCallProps } from '@/app/chat/features/Conversation/ChatList/Plugins/FunctionCall';
 import { DEFAULT_INBOX_AVATAR, DEFAULT_USER_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
@@ -84,3 +85,23 @@ export const chatsMessageString = (s: SessionStore): string => {
   const chats = currentChatsWithHistoryConfig(s);
   return chats.map((m) => m.content).join('');
 };
+
+export const currentFunctionCallProps = (
+  s: SessionStore,
+): ((
+  props: Pick<ChatMessage, 'plugin' | 'function_call' | 'content' | 'id'>,
+) => FunctionCallProps) => {
+  const chatLoadingId = s.chatLoadingId;
+  return ({ plugin, function_call, content, id }) => {
+    const itemId = plugin?.identifier || function_call?.name;
+    const command = plugin ?? function_call;
+    const args = command?.arguments;
+    return {
+      arguments: args,
+      command,
+      content,
+      id: itemId,
+      loading: id === chatLoadingId,
+    };
+  };
+};

package/src/app/chat/features/Conversation/ChatList/MessageExtra.tsx

@@ -1,85 +0,0 @@
-import { SiOpenai } from '@icons-pack/react-simple-icons';
-import { Tag } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { ReactNode } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
-import { ChatMessage } from '@/types/chatMessage';
-
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    margin-top: 8px;
-  `,
-  plugin: css`
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    width: fit-content;
-  `,
-}));
-
-const MessageExtra = ({
-  role,
-  extra,
-  // name,
-  function_call,
-}: ChatMessage): ReactNode => {
-  const { styles } = useStyles();
-
-  // const { t } = useTranslation();
-  const [model] = useSessionStore((s) => [agentSelectors.currentAgentModel(s)]);
-
-  // const plugin = PluginsMap[name || ''];
-
-  // const funcTag = (
-  //   <Tag bordered={false} className={styles.plugin} style={{ borderRadius: 6 }}>
-  //     {plugin?.avatar ? (
-  //       <Avatar avatar={plugin?.avatar} size={18} />
-  //     ) : (
-  //       <Icon icon={LucideToyBrick} />
-  //     )}
-  //     {t(`plugins.${name}` as any, { ns: 'plugin' })}
-  //   </Tag>
-  // );
-
-  const modelTag = (
-    <div>
-      <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
-    </div>
-  );
-
-  // 1. 存在 fromModel
-  // 2. 且当前的 model 和 fromModel 不一致时
-  const hasModelTag = extra?.fromModel && model !== extra?.fromModel;
-
-  const hasFuncTag = !!function_call;
-
-  switch (role) {
-    case 'user':
-    case 'function':
-    case 'system': {
-      return;
-    }
-    case 'assistant': {
-      // 1. 只有 ai 的 message
-      // 2. 且存在 fromModel
-      // 3. 且当前的 model 和 fromModel 不一致时
-      if (!(hasModelTag || hasFuncTag)) return;
-
-      return (
-        hasModelTag && (
-          <Flexbox className={styles.container} horizontal>
-            {modelTag}
-          </Flexbox>
-        )
-      );
-    }
-    // case 'function': {
-    //   return <Flexbox className={styles.container}>{funcTag}</Flexbox>;
-    // }
-  }
-};
-
-export default MessageExtra;