@lobehub/chat 0.118.10 → 0.119.1

package/src/utils/fetch.ts

@@ -11,13 +11,13 @@ export const getMessageError = async (response: Response) => {
     const data = (await response.json()) as ErrorResponse;
     chatMessageError = {
       body: data.body,
-      message: t(`response.${data.errorType}`),
+      message: t(`response.${data.errorType}` as any, { ns: 'error' }),
       type: data.errorType,
     };
   } catch {
     // 如果无法正常返回，说明是常规报错
     chatMessageError = {
-      message: t(`response.${response.status}`),
+      message: t(`response.${response.status}` as any, { ns: 'error' }),
       type: response.status as ErrorType,
     };
   }
@@ -25,9 +25,12 @@ export const getMessageError = async (response: Response) => {
   return chatMessageError;
 };
 
+type SSEFinishType = 'done' | 'error' | 'abort';
+
 export interface FetchSSEOptions {
+  onAbort?: (text: string) => Promise<void>;
   onErrorHandle?: (error: ChatMessageError) => void;
-  onFinish?: (text: string) => Promise<void>;
+  onFinish?: (text: string, type: SSEFinishType) => Promise<void>;
   onMessageHandle?: (text: string) => void;
 }
 
@@ -57,17 +60,30 @@ export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchS
   const decoder = new TextDecoder();
 
   let done = false;
+  let finishedType: SSEFinishType = 'done';
 
   while (!done) {
-    const { value, done: doneReading } = await reader.read();
-    done = doneReading;
-    const chunkValue = decoder.decode(value, { stream: true });
-
-    output += chunkValue;
-    options.onMessageHandle?.(chunkValue);
+    try {
+      const { value, done: doneReading } = await reader.read();
+      done = doneReading;
+      const chunkValue = decoder.decode(value, { stream: true });
+
+      output += chunkValue;
+      options.onMessageHandle?.(chunkValue);
+    } catch (error) {
+      done = true;
+
+      if ((error as TypeError).name === 'AbortError') {
+        finishedType = 'abort';
+        options?.onAbort?.(output);
+      } else {
+        finishedType = 'error';
+        console.error(error);
+      }
+    }
   }
 
-  await options?.onFinish?.(output);
+  await options?.onFinish?.(output, finishedType);
 
   return returnRes;
 };

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

@@ -1,27 +0,0 @@
-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/Item.tsx

@@ -1,236 +0,0 @@
-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/container/index.tsx

@@ -1,83 +0,0 @@
-import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { useTranslation } from 'react-i18next';
-
-import { PREFIX_KEY, REGENERATE_KEY } from '@/const/hotkeys';
-import { useChatStore } from '@/store/chat';
-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 ChatList from '../components/ChatList';
-import SkeletonList from '../components/SkeletonList';
-
-const List = memo(() => {
-  const { t } = useTranslation('common');
-  const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
-  const data = useChatStore(chatSelectors.currentChatsWithGuideMessage(meta), isEqual);
-
-  const [init, chatLoadingId, resendMessage, updateMessageContent] = useChatStore((s) => [
-    s.messagesInit,
-    s.chatLoadingId,
-    s.resendMessage,
-    s.updateMessageContent,
-  ]);
-
-  const [displayMode, enableHistoryCount, historyCount] = useSessionStore((s) => {
-    const config = agentSelectors.currentAgentConfig(s);
-    return [config.displayMode, config.enableHistoryCount, config.historyCount];
-  });
-  const onActionsClick = useActionsClick();
-  const onAvatarsClick = useAvatarsClick();
-
-  const hotkeys = [PREFIX_KEY, REGENERATE_KEY].join('+');
-
-  useHotkeys(
-    hotkeys,
-    () => {
-      const lastMessage = data.at(-1);
-      if (!lastMessage || lastMessage.id === 'default' || lastMessage.role === 'system') return;
-      resendMessage(lastMessage.id);
-    },
-    {
-      enableOnFormTags: true,
-      preventDefault: true,
-    },
-  );
-
-  if (!init) return <SkeletonList />;
-
-  return (
-    <ChatList
-      data={data as any}
-      enableHistoryCount={enableHistoryCount}
-      historyCount={historyCount}
-      loadingId={chatLoadingId}
-      onActionsClick={onActionsClick}
-      onAvatarsClick={onAvatarsClick}
-      onMessageChange={(id, content) => updateMessageContent(id, content)}
-      renderActions={renderActions}
-      renderErrorMessages={renderErrorMessages}
-      renderMessages={renderMessages}
-      renderMessagesExtra={renderMessagesExtra}
-      text={{
-        cancel: t('cancel'),
-        confirm: t('ok'),
-        copy: t('copy'),
-        copySuccess: t('copySuccess'),
-        delete: t('delete'),
-        edit: t('edit'),
-        history: t('historyRange'),
-        regenerate: t('regenerate'),
-      }}
-      type={displayMode || 'chat'}
-    />
-  );
-});
-
-export default List;