@lobehub/chat 0.89.7 → 0.89.8

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 # Changelog
 
+### [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.89.7",
+  "version": "0.89.8",
   "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,88 @@
+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 { 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 chatLoadingId = useSessionStore((s) => s.chatLoadingId);
+
+    if (!isFunctionMessage(content)) return <DefautMessage content={content} id={id} {...props} />;
+
+    const itemId = plugin?.identifier || function_call?.name;
+    const command = plugin ?? function_call;
+    const args = command?.arguments;
+    const fcProps = {
+      arguments: args,
+      command,
+      content: content,
+      id: itemId,
+      loading: id === chatLoadingId,
+    };
+
+    return (
+      <div id={itemId}>
+        <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, content }) => {
+  return <div id={id}>{content}</div>;
+});

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

@@ -0,0 +1,50 @@
+import { ActionIconGroup, RenderAction, RenderMessage, useChatListActionsBar } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+
+import FunctionCall from '../Plugins/FunctionCall';
+import PluginMessage from '../Plugins/PluginMessage';
+
+export const FunctionMessage: RenderMessage = memo(
+  ({ id, content, plugin, function_call, ...props }) => {
+    const chatLoadingId = useSessionStore((s) => s.chatLoadingId);
+    const itemId = plugin?.identifier || function_call?.name;
+    const command = plugin ?? function_call;
+    const args = command?.arguments;
+    const fcProps = {
+      arguments: args,
+      command,
+      content,
+      id,
+      loading: id === chatLoadingId,
+    };
+
+    return (
+      <Flexbox gap={12} id={itemId}>
+        <FunctionCall {...fcProps} />
+        <PluginMessage
+          content={content}
+          function_call={function_call}
+          id={id}
+          loading={id === chatLoadingId}
+          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/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/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;