@lobehub/chat 0.118.5 → 0.118.6

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.118.6](https://github.com/lobehub/lobe-chat/compare/v0.118.5...v0.118.6)
+
+<sup>Released on **2024-01-03**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Migration the ChatList into Conversation.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Migration the ChatList into Conversation, closes [#916](https://github.com/lobehub/lobe-chat/issues/916) ([6ee3795](https://github.com/lobehub/lobe-chat/commit/6ee3795))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.118.5](https://github.com/lobehub/lobe-chat/compare/v0.118.4...v0.118.5)
 
 <sup>Released on **2024-01-02**</sup>

package/next.config.mjs

@@ -20,7 +20,6 @@ const withPWA = nextPWA({
 const nextConfig = {
   compress: isProd,
   experimental: {
-    forceSwcTransforms: true,
     optimizePackageImports: [
       'modern-screenshot',
       'emoji-mart',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.118.5",
+  "version": "0.118.6",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import pkg from '@/../package.json';
-import ChatList from '@/features/Conversation/ChatList';
+import ChatList from '@/features/Conversation/container';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 

package/src/features/Conversation/{ChatList/Actions → Actions}/Assistant.tsx

@@ -1,6 +1,8 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { ErrorActionsBar } from './Error';
 import { useCustomActions } from './customAction';
 

package/src/features/Conversation/{ChatList/Actions → Actions}/Error.tsx

@@ -1,7 +1,9 @@
-import { ActionIconGroup, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { ActionsBarProps } from '@lobehub/ui/es/ChatList/ActionsBar';
 import { memo } from 'react';
 
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const ErrorActionsBar = memo<ActionsBarProps>(({ text, onActionClick }) => {
   const { regenerate, del } = useChatListActionsBar(text);
 

package/src/features/Conversation/{ChatList/Actions → Actions}/Fallback.tsx

@@ -1,6 +1,9 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const DefaultActionsBar: RenderAction = memo(({ text, onActionClick }) => {
   const { del } = useChatListActionsBar(text);
   return (

package/src/features/Conversation/{ChatList/Actions → Actions}/Function.tsx

@@ -1,6 +1,9 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const FunctionActionsBar: RenderAction = memo(({ text, onActionClick }) => {
   const { regenerate, divider, del } = useChatListActionsBar(text);
   return (

package/src/features/Conversation/{ChatList/Actions → Actions}/User.tsx

@@ -1,6 +1,8 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { useCustomActions } from './customAction';
 
 export const UserActionsBar: RenderAction = memo(({ text, onActionClick }) => {

package/src/features/Conversation/{ChatList/Actions → Actions}/index.ts

@@ -1,7 +1,6 @@
-import { ChatListProps } from '@lobehub/ui';
-
 import { useChatStore } from '@/store/chat';
 
+import { ChatListProps } from '../components/ChatList';
 import { AssistantActionsBar } from './Assistant';
 import { DefaultActionsBar } from './Fallback';
 import { FunctionActionsBar } from './Function';

package/src/features/Conversation/{ChatList/Error → Error}/InvalidAccess.tsx

@@ -1,4 +1,4 @@
-import { Icon, RenderErrorMessage } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import { Button, Input, Segmented } from 'antd';
 import { KeySquare, SquareAsterisk } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -8,6 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer, FormAction } from './style';
 

package/src/features/Conversation/{ChatList/Error → Error}/OpenAPIKey.tsx

@@ -1,6 +1,6 @@
-import { RenderErrorMessage } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer } from './style';
 

package/src/features/Conversation/{ChatList/Error → Error}/OpenAiBizError.tsx

@@ -1,7 +1,8 @@
-import { Highlighter, RenderErrorMessage } from '@lobehub/ui';
+import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import OpenAPIKey from './OpenAPIKey';
 
 interface OpenAIError {

package/src/features/Conversation/{ChatList/Error → Error}/Plugin/PluginError.tsx

@@ -1,7 +1,9 @@
-import { Highlighter, RenderErrorMessage } from '@lobehub/ui';
+import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { RenderErrorMessage } from '../../components/ChatList';
+
 interface OpenAIError {
   code: 'invalid_api_key' | string;
   message: string;

package/src/features/Conversation/{ChatList/Error → Error}/Plugin/PluginSettings.tsx

@@ -1,4 +1,4 @@
-import { Avatar, RenderErrorMessage } from '@lobehub/ui';
+import { Avatar } from '@lobehub/ui';
 import { Button, Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -11,6 +11,7 @@ import { useChatStore } from '@/store/chat';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
+import { RenderErrorMessage } from '../../components/ChatList';
 import { ErrorActionContainer, useStyles } from '../style';
 
 const PluginSettings: RenderErrorMessage['Render'] = memo(({ id, plugin }) => {

package/src/features/Conversation/{ChatList/Error → Error}/index.tsx

@@ -1,8 +1,8 @@
 import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
-import { ChatListProps } from '@lobehub/ui';
 
 import { ChatErrorType } from '@/types/fetch';
 
+import { ChatListProps } from '../components/ChatList';
 import InvalidAccess from './InvalidAccess';
 import OpenAPIKey from './OpenAPIKey';
 import OpenAiBizError from './OpenAiBizError';

package/src/features/Conversation/{ChatList/Extras → Extras}/Translate.tsx

@@ -10,7 +10,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { ChatTranslate } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 const useStyles = createStyles(({ stylish }) => ({
   markdown: stylish.markdownInChat,

package/src/features/Conversation/{ChatList/Extras → Extras}/index.ts

@@ -1,5 +1,4 @@
-import { ChatListProps, RenderMessageExtra } from '@lobehub/ui';
-
+import { ChatListProps, RenderMessageExtra } from '../components/ChatList';
 import { AssistantMessageExtra } from './Assistant';
 import { UserMessageExtra } from './User';
 

package/src/features/Conversation/{ChatList/Messages → Messages}/Default.tsx

@@ -3,7 +3,7 @@ import { ReactNode, memo } from 'react';
 import { LOADING_FLAT } from '@/const/message';
 import { ChatMessage } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 export const DefaultMessage = memo<
   ChatMessage & {

package/src/features/Conversation/{ChatList/Messages → Messages}/User.tsx

@@ -5,7 +5,7 @@ import FileList from '@/components/FileList';
 import { LOADING_FLAT } from '@/const/message';
 import { ChatMessage } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 export const UserMessage = memo<
   ChatMessage & {

package/src/features/Conversation/{ChatList/Messages → Messages}/index.ts

@@ -1,4 +1,3 @@
-import { ChatListProps } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import { useRouter } from 'next/navigation';
 
@@ -7,16 +6,17 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
+import { ChatListProps } from '../components/ChatList';
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
 import { FunctionMessage } from './Function';
 import { UserMessage } from './User';
 
 export const renderMessages: ChatListProps['renderMessages'] = {
-  assistant: AssistantMessage as any,
-  default: DefaultMessage as any,
-  function: FunctionMessage as any,
-  user: UserMessage as any,
+  assistant: AssistantMessage,
+  default: DefaultMessage,
+  function: FunctionMessage,
+  user: UserMessage,
 };
 
 export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {

package/src/features/Conversation/{ChatList/Plugins → Plugins}/Render/Loading.tsx

@@ -1,11 +1,10 @@
-import {createStyles} from 'antd-style';
-import {useTranslation} from 'react-i18next';
-import {Flexbox} from 'react-layout-kit';
-import {memo} from "react";
-
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 const useStyles = createStyles(
-  ({css, token}) => css`
+  ({ css, token }) => css`
     position: relative;
 
     overflow: hidden;
@@ -46,16 +45,16 @@ const useStyles = createStyles(
     }
   `,
 );
- const Loading = memo(() => {
-  const {t} = useTranslation('plugin');
-  const {styles} = useStyles();
+const Loading = memo(() => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
 
   return (
     <Flexbox align={'center'} gap={8} padding={16}>
-      <span className={styles}/>
+      <span className={styles} />
       {t('loading.content')}
     </Flexbox>
   );
 });
 
-export default Loading
+export default Loading;

package/src/features/Conversation/components/ChatList/ActionsBar.tsx

@@ -0,0 +1,27 @@
+import { ActionIconGroup, type ActionIconGroupProps } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
+
+export interface ActionsBarProps extends ActionIconGroupProps {
+  text?: {
+    copy?: string;
+    delete?: string;
+    edit?: string;
+    regenerate?: string;
+  };
+}
+
+const ActionsBar = memo<ActionsBarProps>(({ text, ...rest }) => {
+  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+  return (
+    <ActionIconGroup
+      dropdownMenu={[edit, copy, regenerate, divider, del]}
+      items={[regenerate, edit]}
+      type="ghost"
+      {...rest}
+    />
+  );
+});
+
+export default ActionsBar;

package/src/features/Conversation/components/ChatList/HistoryDivider.tsx

@@ -0,0 +1,23 @@
+import { Icon, Tag } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { Timer } from 'lucide-react';
+import { memo } from 'react';
+
+interface HistoryDividerProps {
+  enable?: boolean;
+  text?: string;
+}
+
+const HistoryDivider = memo<HistoryDividerProps>(({ enable, text }) => {
+  if (!enable) return null;
+
+  return (
+    <div style={{ padding: '0 20px' }}>
+      <Divider>
+        <Tag icon={<Icon icon={Timer} />}>{text || 'History Message'}</Tag>
+      </Divider>
+    </div>
+  );
+});
+
+export default HistoryDivider;

package/src/features/Conversation/components/ChatList/Item.tsx

@@ -0,0 +1,236 @@
+import { type AlertProps, ChatItem, type ChatItemProps } from '@lobehub/ui';
+import { ActionEvent, copyToClipboard } from '@lobehub/ui';
+import { App } from 'antd';
+import { FC, ReactNode, memo, useCallback, useMemo, useState } from 'react';
+
+import { LLMRoleType } from '@/types/llm';
+import { ChatMessage } from '@/types/message';
+
+import ActionsBar, { type ActionsBarProps } from './ActionsBar';
+
+export type OnMessageChange = (id: string, content: string) => void;
+export type OnActionsClick = (action: ActionEvent, message: ChatMessage) => void;
+export type OnAvatatsClick = (role: RenderRole) => ChatItemProps['onAvatarClick'];
+export type RenderRole = LLMRoleType | 'default' | string;
+export type RenderItem = FC<{ key: string } & ChatMessage & ListItemProps>;
+export type RenderMessage = FC<ChatMessage & { editableContent: ReactNode }>;
+export type RenderMessageExtra = FC<ChatMessage>;
+export interface RenderErrorMessage {
+  Render?: FC<ChatMessage>;
+  config?: AlertProps;
+}
+export type RenderAction = FC<ActionsBarProps & ChatMessage>;
+
+export interface ListItemProps {
+  groupNav?: ChatItemProps['avatarAddon'];
+  loading?: boolean;
+  /**
+   * @description 点击操作按钮的回调函数
+   */
+  onActionsClick?: OnActionsClick;
+  onAvatarsClick?: OnAvatatsClick;
+  /**
+   * @description 消息变化的回调函数
+   */
+  onMessageChange?: OnMessageChange;
+  renderActions?: {
+    [actionKey: string]: RenderAction;
+  };
+  /**
+   * @description 渲染错误消息的函数
+   */
+  renderErrorMessages?: {
+    [errorType: 'default' | string]: RenderErrorMessage;
+  };
+  renderItems?: {
+    [role: RenderRole]: RenderItem;
+  };
+  /**
+   * @description 渲染消息的函数
+   */
+  renderMessages?: {
+    [role: RenderRole]: RenderMessage;
+  };
+  /**
+   * @description 渲染消息额外内容的函数
+   */
+  renderMessagesExtra?: {
+    [role: RenderRole]: RenderMessageExtra;
+  };
+  /**
+   * @description 是否显示聊天项的名称
+   * @default false
+   */
+  showTitle?: boolean;
+  /**
+   * @description 文本内容
+   */
+  text?: ChatItemProps['text'] &
+    ActionsBarProps['text'] & {
+      copySuccess?: string;
+      history?: string;
+    } & {
+      [key: string]: string;
+    };
+  /**
+   * @description 聊天列表的类型
+   * @default 'chat'
+   */
+  type?: 'docs' | 'chat';
+}
+
+export type ChatListItemProps = ChatMessage & ListItemProps;
+
+const Item = memo<ChatListItemProps>((props) => {
+  const {
+    renderMessagesExtra,
+    showTitle,
+    onActionsClick,
+    onAvatarsClick,
+    onMessageChange,
+    type,
+    text,
+    renderMessages,
+    renderErrorMessages,
+    renderActions,
+    loading,
+    groupNav,
+    renderItems,
+    ...item
+  } = props;
+
+  const [editing, setEditing] = useState(false);
+
+  const { message } = App.useApp();
+
+  const RenderItem = useMemo(() => {
+    if (!renderItems || !item?.role) return;
+    let renderFunction;
+    if (renderItems?.[item.role]) renderFunction = renderItems[item.role];
+    if (!renderFunction && renderItems?.['default']) renderFunction = renderItems['default'];
+    if (!renderFunction) return;
+    return renderFunction;
+  }, [renderItems?.[item.role]]);
+
+  const RenderMessage = useCallback(
+    ({ editableContent, data }: { data: ChatMessage; editableContent: ReactNode }) => {
+      if (!renderMessages || !item?.role) return;
+      let RenderFunction;
+      if (renderMessages?.[item.role]) RenderFunction = renderMessages[item.role];
+      if (!RenderFunction && renderMessages?.['default'])
+        RenderFunction = renderMessages['default'];
+      if (!RenderFunction) return;
+      return <RenderFunction {...data} editableContent={editableContent} />;
+    },
+    [renderMessages?.[item.role]],
+  );
+
+  const MessageExtra = useCallback(
+    ({ data }: { data: ChatMessage }) => {
+      if (!renderMessagesExtra || !item?.role) return;
+      let RenderFunction;
+      if (renderMessagesExtra?.[item.role]) RenderFunction = renderMessagesExtra[item.role];
+      if (renderMessagesExtra?.['default']) RenderFunction = renderMessagesExtra['default'];
+      if (!RenderFunction) return;
+      return <RenderFunction {...data} />;
+    },
+    [renderMessagesExtra?.[item.role]],
+  );
+
+  const ErrorMessage = useCallback(
+    ({ data }: { data: ChatMessage }) => {
+      if (!renderErrorMessages || !item?.error?.type) return;
+      let RenderFunction;
+      if (renderErrorMessages?.[item.error.type])
+        RenderFunction = renderErrorMessages[item.error.type].Render;
+      if (!RenderFunction && renderErrorMessages?.['default'])
+        RenderFunction = renderErrorMessages['default'].Render;
+      if (!RenderFunction) return;
+      return <RenderFunction {...data} />;
+    },
+    [renderErrorMessages?.[item?.error?.type]],
+  );
+
+  const Actions = useCallback(
+    ({ data }: { data: ChatMessage }) => {
+      if (!renderActions || !item?.role) return;
+      let RenderFunction;
+      if (renderActions?.[item.role]) RenderFunction = renderActions[item.role];
+      if (renderActions?.['default']) RenderFunction = renderActions['default'];
+      if (!RenderFunction) RenderFunction = ActionsBar;
+
+      const handleActionClick: ListItemProps['onActionsClick'] = async (action, data) => {
+        switch (action.key) {
+          case 'copy': {
+            await copyToClipboard(data.content);
+            message.success(text?.copySuccess || 'Copy Success');
+            break;
+          }
+          case 'edit': {
+            setEditing(true);
+          }
+        }
+
+        onActionsClick?.(action, data);
+      };
+
+      return (
+        <RenderFunction
+          {...data}
+          onActionClick={(actionKey) => handleActionClick?.(actionKey, data)}
+          text={text}
+        />
+      );
+    },
+    [renderActions?.[item.role], text, onActionsClick],
+  );
+
+  const error = useMemo(() => {
+    if (!item.error) return;
+    const message = item.error?.message;
+    let alertConfig = {};
+    if (item.error.type && renderErrorMessages?.[item.error.type]) {
+      alertConfig = renderErrorMessages[item.error.type]?.config as AlertProps;
+    }
+    return {
+      message,
+      ...alertConfig,
+    };
+  }, [renderErrorMessages, item.error]);
+
+  if (RenderItem) return <RenderItem key={item.id} {...props} />;
+
+  return (
+    <ChatItem
+      actions={<Actions data={item} />}
+      avatar={item.meta}
+      avatarAddon={groupNav}
+      editing={editing}
+      error={error}
+      errorMessage={<ErrorMessage data={item} />}
+      loading={loading}
+      message={item.content}
+      messageExtra={<MessageExtra data={item} />}
+      onAvatarClick={onAvatarsClick?.(item.role)}
+      onChange={(value) => onMessageChange?.(item.id, value)}
+      onDoubleClick={(e) => {
+        if (item.id === 'default' || item.error) return;
+        if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
+          setEditing(true);
+        }
+      }}
+      onEditingChange={setEditing}
+      placement={type === 'chat' ? (item.role === 'user' ? 'right' : 'left') : 'left'}
+      primary={item.role === 'user'}
+      renderMessage={(editableContent) => (
+        <RenderMessage data={item} editableContent={editableContent} />
+      )}
+      showTitle={showTitle}
+      text={text}
+      time={item.updateAt || item.createAt}
+      type={type === 'chat' ? 'block' : 'pure'}
+    />
+  );
+});
+
+export default Item;