@lobehub/chat 0.118.5 → 0.118.7

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;

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

@@ -0,0 +1,88 @@
+import { Fragment, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import type { ChatMessage } from '@/types/message';
+
+import HistoryDivider from './HistoryDivider';
+import Item, { ListItemProps } from './Item';
+import { useStyles } from './style';
+
+export interface ChatListProps extends ListItemProps {
+  className?: string;
+  /**
+   * @description Data of chat messages to be displayed
+   */
+  data: ChatMessage[];
+  enableHistoryCount?: boolean;
+  historyCount?: number;
+  loadingId?: string;
+}
+export type {
+  OnActionsClick,
+  OnAvatatsClick,
+  OnMessageChange,
+  RenderAction,
+  RenderErrorMessage,
+  RenderItem,
+  RenderMessage,
+  RenderMessageExtra,
+} from './Item';
+
+const ChatList = memo<ChatListProps>(
+  ({
+    onActionsClick,
+    onAvatarsClick,
+    renderMessagesExtra,
+    className,
+    data,
+    type = 'chat',
+    text,
+    showTitle,
+    onMessageChange,
+    renderMessages,
+    renderErrorMessages,
+    loadingId,
+    renderItems,
+    enableHistoryCount,
+    renderActions,
+    historyCount = 0,
+  }) => {
+    const { cx, styles } = useStyles();
+
+    return (
+      <Flexbox className={cx(styles.container, className)}>
+        {data.map((item, index) => {
+          const itemProps = {
+            loading: loadingId === item.id,
+            onActionsClick,
+            onAvatarsClick,
+            onMessageChange,
+            renderActions,
+            renderErrorMessages,
+            renderItems,
+            renderMessages,
+            renderMessagesExtra,
+            showTitle,
+            text,
+            type,
+          };
+
+          const historyLength = data.length;
+          const enableHistoryDivider =
+            enableHistoryCount &&
+            historyLength > historyCount &&
+            historyCount === historyLength - index + 1;
+
+          return (
+            <Fragment key={item.id}>
+              <HistoryDivider enable={enableHistoryDivider} text={text?.history} />
+              <Item {...itemProps} {...item} />
+            </Fragment>
+          );
+        })}
+      </Flexbox>
+    );
+  },
+);
+
+export default ChatList;

package/src/features/Conversation/components/ChatList/style.ts

@@ -0,0 +1,10 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css }) => {
+  return {
+    container: css`
+      position: relative;
+      margin-top: 24px;
+    `,
+  };
+});

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

@@ -1,4 +1,3 @@
-import { ChatList } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -10,11 +9,12 @@ import { chatSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 
-import { renderActions, useActionsClick } from './Actions';
-import { renderErrorMessages } from './Error';
-import { renderMessagesExtra } from './Extras';
-import { renderMessages, useAvatarsClick } from './Messages';
-import SkeletonList from './SkeletonList';
+import { renderActions, useActionsClick } from '../Actions';
+import { renderErrorMessages } from '../Error';
+import { renderMessagesExtra } from '../Extras';
+import { renderMessages, useAvatarsClick } from '../Messages';
+import ChatList from '../components/ChatList';
+import SkeletonList from '../components/SkeletonList';
 
 const List = memo(() => {
   const { t } = useTranslation('common');
@@ -65,7 +65,6 @@ const List = memo(() => {
       renderErrorMessages={renderErrorMessages}
       renderMessages={renderMessages}
       renderMessagesExtra={renderMessagesExtra}
-      style={{ marginTop: 24 }}
       text={{
         cancel: t('cancel'),
         confirm: t('ok'),

package/src/features/Conversation/hooks/useChatListActionsBar.tsx

@@ -0,0 +1,43 @@
+import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
+import { Copy, Edit, RotateCw, Trash } from 'lucide-react';
+
+interface ChatListActionsBar {
+  copy: ActionIconGroupItems;
+  del: ActionIconGroupItems;
+  divider: { type: 'divider' };
+  edit: ActionIconGroupItems;
+  regenerate: ActionIconGroupItems;
+}
+
+export const useChatListActionsBar = (text?: {
+  copy?: string;
+  delete?: string;
+  edit?: string;
+  regenerate?: string;
+}): ChatListActionsBar => {
+  return {
+    copy: {
+      icon: Copy,
+      key: 'copy',
+      label: text?.copy || 'Copy',
+    },
+    del: {
+      icon: Trash,
+      key: 'del',
+      label: text?.delete || 'Delete',
+    },
+    divider: {
+      type: 'divider',
+    },
+    edit: {
+      icon: Edit,
+      key: 'edit',
+      label: text?.edit || 'Edit',
+    },
+    regenerate: {
+      icon: RotateCw,
+      key: 'regenerate',
+      label: text?.regenerate || 'Regenerate',
+    },
+  };
+};

package/src/features/Conversation/index.tsx

@@ -8,9 +8,9 @@ import SafeSpacing from '@/components/SafeSpacing';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
 
-import ChatList from './ChatList';
-import ChatScrollAnchor from './ScrollAnchor';
-import { useInitConversation } from './useInitConversation';
+import ChatScrollAnchor from './components/ScrollAnchor';
+import ChatList from './container';
+import { useInitConversation } from './hooks/useInitConversation';
 
 const useStyles = createStyles(({ css, responsive, stylish, cx }, fontSize: number = 14) =>
   cx(