@lobehub/chat 0.118.9 → 0.119.0

package/src/features/Conversation/Actions/Assistant.tsx

@@ -1,21 +1,32 @@
 import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
-import { RenderAction } from '../components/ChatList';
 import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+import { RenderAction } from '../types';
 import { ErrorActionsBar } from './Error';
 import { useCustomActions } from './customAction';
 
-export const AssistantActionsBar: RenderAction = memo(({ text, id, onActionClick, error }) => {
-  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, error }) => {
+  const { regenerate, edit, delAndRegenerate, copy, divider, del } = useChatListActionsBar();
   const { translate, tts } = useCustomActions();
+
   if (id === 'default') return;
 
-  if (error) return <ErrorActionsBar onActionClick={onActionClick} text={text} />;
+  if (error) return <ErrorActionsBar onActionClick={onActionClick} />;
 
   return (
     <ActionIconGroup
-      dropdownMenu={[edit, copy, regenerate, divider, tts, translate, divider, del]}
+      dropdownMenu={[
+        edit,
+        copy,
+        regenerate,
+        divider,
+        tts,
+        translate,
+        divider,
+        delAndRegenerate,
+        del,
+      ]}
       items={[regenerate, copy]}
       onActionClick={onActionClick}
       type="ghost"

package/src/features/Conversation/Actions/Error.tsx

@@ -4,8 +4,8 @@ import { memo } from 'react';
 
 import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 
-export const ErrorActionsBar = memo<ActionsBarProps>(({ text, onActionClick }) => {
-  const { regenerate, del } = useChatListActionsBar(text);
+export const ErrorActionsBar = memo<ActionsBarProps>(({ onActionClick }) => {
+  const { regenerate, del } = useChatListActionsBar();
 
   return <ActionIconGroup items={[regenerate, del]} onActionClick={onActionClick} type="ghost" />;
 });

package/src/features/Conversation/Actions/Fallback.tsx

@@ -1,11 +1,12 @@
 import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
-import { RenderAction } from '../components/ChatList';
 import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+import { RenderAction } from '../types';
+
+export const DefaultActionsBar: RenderAction = memo(({ onActionClick }) => {
+  const { del } = useChatListActionsBar();
 
-export const DefaultActionsBar: RenderAction = memo(({ text, onActionClick }) => {
-  const { del } = useChatListActionsBar(text);
   return (
     <ActionIconGroup dropdownMenu={[del]} items={[]} onActionClick={onActionClick} type="ghost" />
   );

package/src/features/Conversation/Actions/Function.tsx

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

package/src/features/Conversation/Actions/User.tsx

@@ -1,12 +1,12 @@
 import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
-import { RenderAction } from '../components/ChatList';
 import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+import { RenderAction } from '../types';
 import { useCustomActions } from './customAction';
 
-export const UserActionsBar: RenderAction = memo(({ text, onActionClick }) => {
-  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+export const UserActionsBar: RenderAction = memo(({ onActionClick }) => {
+  const { regenerate, edit, copy, divider, del } = useChatListActionsBar();
   const { translate, tts } = useCustomActions();
 
   return (

package/src/features/Conversation/Actions/customAction.ts

@@ -1,5 +1,6 @@
 import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
 import { LanguagesIcon, Play } from 'lucide-react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { localeOptions } from '@/locales/resources';
@@ -23,8 +24,5 @@ export const useCustomActions = () => {
     label: t('tts.action'),
   } as ActionIconGroupItems;
 
-  return {
-    translate,
-    tts,
-  };
+  return useMemo(() => ({ translate, tts }), []);
 };

package/src/features/Conversation/Actions/index.ts

@@ -1,67 +1,72 @@
+import { copyToClipboard } from '@lobehub/ui';
+import { App } from 'antd';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import { useChatStore } from '@/store/chat';
+import { LLMRoleType } from '@/types/llm';
 
-import { ChatListProps } from '../components/ChatList';
+import { OnActionsClick, RenderAction } from '../types';
 import { AssistantActionsBar } from './Assistant';
 import { DefaultActionsBar } from './Fallback';
 import { FunctionActionsBar } from './Function';
 import { UserActionsBar } from './User';
 
-export const renderActions: ChatListProps['renderActions'] = {
+export const renderActions: Record<LLMRoleType, RenderAction> = {
   assistant: AssistantActionsBar,
   function: FunctionActionsBar,
   system: DefaultActionsBar,
   user: UserActionsBar,
 };
 
-interface ActionsClick {
-  onClick: () => void;
-  trigger: boolean;
-}
-
-export const useActionsClick = (): ChatListProps['onActionsClick'] => {
+export const useActionsClick = (): OnActionsClick => {
+  const { t } = useTranslation('common');
   const [deleteMessage, resendMessage, translateMessage, ttsMessage] = useChatStore((s) => [
     s.deleteMessage,
     s.resendMessage,
     s.translateMessage,
     s.ttsMessage,
   ]);
+  const { message } = App.useApp();
+
+  return useCallback<OnActionsClick>(async (action, { id, content, error }) => {
+    switch (action.key) {
+      case 'copy': {
+        await copyToClipboard(content);
+        message.success(t('copySuccess', { defaultValue: 'Copy Success' }));
+        break;
+      }
+
+      case 'del': {
+        deleteMessage(id);
+        break;
+      }
+
+      case 'regenerate': {
+        resendMessage(id);
+        // if this message is an error message, we need to delete it
+        if (error) deleteMessage(id);
+        break;
+      }
+
+      case 'delAndRegenerate': {
+        resendMessage(id);
+        deleteMessage(id);
+        break;
+      }
 
-  return (action, { id, error }) => {
-    const actionsClick: ActionsClick[] = [
-      {
-        onClick: () => {
-          deleteMessage(id);
-        },
-        trigger: action.key === 'del',
-      },
-      {
-        onClick: () => {
-          resendMessage(id);
-          // if this message is an error message, we need to delete it
-          if (error) deleteMessage(id);
-        },
-        trigger: action.key === 'regenerate',
-      },
-      {
-        onClick: () => {
-          ttsMessage(id);
-        },
-        trigger: action.key === 'tts',
-      },
-      {
-        onClick: () => {
-          /**
-           * @description Click the menu item with translate item, the result is:
-           * @key 'en-US'
-           * @keyPath ['en-US','translate']
-           */
-          const lang = action.keyPath[0];
-          translateMessage(id, lang);
-        },
-        trigger: action.keyPath.at(-1) === 'translate',
-      },
-    ];
+      case 'tts': {
+        ttsMessage(id);
+        break;
+      }
+    }
 
-    actionsClick.find((item) => item.trigger)?.onClick();
-  };
+    if (action.keyPath.at(-1) === 'translate') {
+      // click the menu item with translate item, the result is:
+      // key: 'en-US'
+      // keyPath: ['en-US','translate']
+      const lang = action.keyPath[0];
+      translateMessage(id, lang);
+    }
+  }, []);
 };

package/src/features/Conversation/Error/InvalidAccess.tsx

@@ -8,7 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 
-import { RenderErrorMessage } from '../components/ChatList';
+import { RenderErrorMessage } from '../types';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer, FormAction } from './style';
 

package/src/features/Conversation/Error/OpenAPIKey.tsx

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

package/src/features/Conversation/Error/OpenAiBizError.tsx

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

package/src/features/Conversation/Error/Plugin/PluginError.tsx

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

package/src/features/Conversation/Error/Plugin/PluginSettings.tsx

@@ -11,7 +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 { RenderErrorMessage } from '../../types';
 import { ErrorActionContainer, useStyles } from '../style';
 
 const PluginSettings: RenderErrorMessage['Render'] = memo(({ id, plugin }) => {

package/src/features/Conversation/Error/index.tsx

@@ -2,14 +2,14 @@ import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
 
 import { ChatErrorType } from '@/types/fetch';
 
-import { ChatListProps } from '../components/ChatList';
+import { RenderErrorMessage } from '../types';
 import InvalidAccess from './InvalidAccess';
 import OpenAPIKey from './OpenAPIKey';
 import OpenAiBizError from './OpenAiBizError';
 import PluginError from './Plugin/PluginError';
 import PluginSettings from './Plugin/PluginSettings';
 
-export const renderErrorMessages: ChatListProps['renderErrorMessages'] = {
+export const renderErrorMessages: Record<string, RenderErrorMessage> = {
   [PluginErrorType.PluginMarketIndexNotFound]: {
     Render: PluginError,
   },

package/src/features/Conversation/Extras/Assistant.tsx

@@ -8,41 +8,44 @@ import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/message';
 
+import { RenderMessageExtra } from '../types';
 import ExtraContainer from './ExtraContainer';
 import TTS from './TTS';
 import Translate from './Translate';
 
-export const AssistantMessageExtra = memo<ChatMessage>(({ extra, id, content }) => {
-  const model = useSessionStore(agentSelectors.currentAgentModel);
-  const loading = useChatStore((s) => s.chatLoadingId === id);
+export const AssistantMessageExtra: RenderMessageExtra = memo<ChatMessage>(
+  ({ extra, id, content }) => {
+    const model = useSessionStore(agentSelectors.currentAgentModel);
+    const loading = useChatStore((s) => s.chatLoadingId === id);
 
-  const showModelTag = extra?.fromModel && model !== extra?.fromModel;
-  const showTranslate = !!extra?.translate;
-  const showTTS = !!extra?.tts;
+    const showModelTag = extra?.fromModel && model !== extra?.fromModel;
+    const showTranslate = !!extra?.translate;
+    const showTTS = !!extra?.tts;
 
-  const showExtra = showModelTag || showTranslate || showTTS;
+    const showExtra = showModelTag || showTranslate || showTTS;
 
-  if (!showExtra) return;
+    if (!showExtra) return;
 
-  return (
-    <Flexbox gap={8} style={{ marginTop: 8 }}>
-      {showModelTag && (
-        <div>
-          <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
-        </div>
-      )}
-      <>
-        {extra?.tts && (
-          <ExtraContainer>
-            <TTS content={content} id={id} loading={loading} {...extra?.tts} />
-          </ExtraContainer>
+    return (
+      <Flexbox gap={8} style={{ marginTop: 8 }}>
+        {showModelTag && (
+          <div>
+            <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
+          </div>
         )}
-        {extra?.translate && (
-          <ExtraContainer>
-            <Translate id={id} loading={loading} {...extra?.translate} />
-          </ExtraContainer>
-        )}
-      </>
-    </Flexbox>
-  );
-});
+        <>
+          {extra?.tts && (
+            <ExtraContainer>
+              <TTS content={content} id={id} loading={loading} {...extra?.tts} />
+            </ExtraContainer>
+          )}
+          {extra?.translate && (
+            <ExtraContainer>
+              <Translate id={id} loading={loading} {...extra?.translate} />
+            </ExtraContainer>
+          )}
+        </>
+      </Flexbox>
+    );
+  },
+);

package/src/features/Conversation/Extras/User.tsx

@@ -3,11 +3,12 @@ import { memo } from 'react';
 import { useChatStore } from '@/store/chat';
 import { ChatMessage } from '@/types/message';
 
+import { RenderMessageExtra } from '../types';
 import ExtraContainer from './ExtraContainer';
 import TTS from './TTS';
 import Translate from './Translate';
 
-export const UserMessageExtra = memo<ChatMessage>(({ extra, id, content }) => {
+export const UserMessageExtra: RenderMessageExtra = memo<ChatMessage>(({ extra, id, content }) => {
   const loading = useChatStore((s) => s.chatLoadingId === id);
 
   const showTranslate = !!extra?.translate;

package/src/features/Conversation/Extras/index.ts

@@ -1,8 +1,8 @@
-import { ChatListProps, RenderMessageExtra } from '../components/ChatList';
+import { RenderMessageExtra } from '../types';
 import { AssistantMessageExtra } from './Assistant';
 import { UserMessageExtra } from './User';
 
-export const renderMessagesExtra: ChatListProps['renderMessagesExtra'] = {
-  assistant: AssistantMessageExtra as unknown as RenderMessageExtra,
-  user: UserMessageExtra as unknown as RenderMessageExtra,
+export const renderMessagesExtra: Record<string, RenderMessageExtra> = {
+  assistant: AssistantMessageExtra,
+  user: UserMessageExtra,
 };

package/src/features/Conversation/Messages/index.ts

@@ -6,20 +6,20 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
-import { ChatListProps } from '../components/ChatList';
+import { OnAvatarsClick, RenderMessage } from '../types';
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
 import { FunctionMessage } from './Function';
 import { UserMessage } from './User';
 
-export const renderMessages: ChatListProps['renderMessages'] = {
+export const renderMessages: Record<string, RenderMessage> = {
   assistant: AssistantMessage,
   default: DefaultMessage,
   function: FunctionMessage,
   user: UserMessage,
 };
 
-export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {
+export const useAvatarsClick = (): OnAvatarsClick => {
   const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
   const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
   const { mobile } = useResponsive();

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

@@ -0,0 +1,58 @@
+import { ActionEvent, ActionIconGroup, type ActionIconGroupProps } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { memo, useCallback } from 'react';
+
+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 { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
+
+export type ActionsBarProps = ActionIconGroupProps;
+
+const ActionsBar = memo<ActionsBarProps>((props) => {
+  const { regenerate, edit, copy, divider, del } = useChatListActionsBar();
+  return (
+    <ActionIconGroup
+      dropdownMenu={[edit, copy, regenerate, divider, del]}
+      items={[regenerate, edit]}
+      type="ghost"
+      {...props}
+    />
+  );
+});
+
+interface ActionsProps {
+  index: number;
+  setEditing: (edit: boolean) => void;
+}
+const Actions = memo<ActionsProps>(({ index, setEditing }) => {
+  const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
+
+  const item = useChatStore(
+    (s) => chatSelectors.currentChatsWithGuideMessage(meta)(s)[index],
+    isEqual,
+  );
+  const onActionsClick = useActionsClick();
+
+  const handleActionClick = useCallback(
+    async (action: ActionEvent) => {
+      switch (action.key) {
+        case 'edit': {
+          setEditing(true);
+        }
+      }
+
+      onActionsClick(action, item);
+    },
+    [item],
+  );
+
+  const RenderFunction = renderActions[item?.role] ?? ActionsBar;
+
+  return <RenderFunction {...item} onActionClick={handleActionClick} />;
+});
+
+export default Actions;

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

@@ -0,0 +1,126 @@
+import { type AlertProps, ChatItem } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { ReactNode, memo, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { ChatMessage } from '@/types/message';
+
+import { renderErrorMessages } from '../../Error';
+import { renderMessagesExtra } from '../../Extras';
+import { renderMessages, useAvatarsClick } from '../../Messages';
+import ActionsBar from './ActionsBar';
+
+export interface ChatListItemProps {
+  index: number;
+}
+
+const Item = memo<ChatListItemProps>(({ index }) => {
+  const { t } = useTranslation('common');
+
+  const [editing, setEditing] = useState(false);
+  const [type = 'chat'] = useSessionStore((s) => {
+    const config = agentSelectors.currentAgentConfig(s);
+    return [config.displayMode];
+  });
+
+  const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
+  const item = useChatStore(
+    (s) => chatSelectors.currentChatsWithGuideMessage(meta)(s)[index],
+    isEqual,
+  );
+
+  const [loading, onMessageChange] = useChatStore((s) => [
+    s.chatLoadingId === item.id,
+    s.updateMessageContent,
+  ]);
+
+  const onAvatarsClick = useAvatarsClick();
+
+  const RenderMessage = useCallback(
+    ({ editableContent, data }: { data: ChatMessage; editableContent: ReactNode }) => {
+      if (!item?.role) return;
+      const RenderFunction = renderMessages[item.role] ?? renderMessages['default'];
+
+      if (!RenderFunction) return;
+
+      return <RenderFunction {...data} editableContent={editableContent} />;
+    },
+    [item.role],
+  );
+
+  const MessageExtra = useCallback(
+    ({ data }: { data: ChatMessage }) => {
+      if (!renderMessagesExtra || !item?.role) return;
+      let RenderFunction;
+      if (renderMessagesExtra?.[item.role]) RenderFunction = renderMessagesExtra[item.role];
+
+      if (!RenderFunction) return;
+      return <RenderFunction {...data} />;
+    },
+    [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} />;
+    },
+    [item.error],
+  );
+
+  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 };
+  }, [item.error]);
+
+  return (
+    <ChatItem
+      actions={<ActionsBar index={index} setEditing={setEditing} />}
+      avatar={item.meta}
+      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} />
+      )}
+      text={{
+        cancel: t('cancel'),
+        confirm: t('ok'),
+        edit: t('edit'),
+      }}
+      time={item.updatedAt || item.createdAt}
+      type={type === 'chat' ? 'block' : 'pure'}
+    />
+  );
+});
+
+export default Item;

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

@@ -2,19 +2,22 @@ import { Icon, Tag } from '@lobehub/ui';
 import { Divider } from 'antd';
 import { Timer } from 'lucide-react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface HistoryDividerProps {
   enable?: boolean;
-  text?: string;
 }
 
-const HistoryDivider = memo<HistoryDividerProps>(({ enable, text }) => {
+const HistoryDivider = memo<HistoryDividerProps>(({ enable }) => {
+  const { t } = useTranslation('common');
   if (!enable) return null;
 
   return (
     <div style={{ padding: '0 20px' }}>
       <Divider>
-        <Tag icon={<Icon icon={Timer} />}>{text || 'History Message'}</Tag>
+        <Tag icon={<Icon icon={Timer} />}>
+          {t('historyRange', { defaultValue: 'History Message' })}
+        </Tag>
       </Divider>
     </div>
   );