@lobehub/chat 0.91.0 → 0.93.0

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

@@ -0,0 +1,14 @@
+import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { memo } from 'react';
+
+export const FunctionActionsBar: RenderAction = memo(({ text, onActionClick }) => {
+  const { regenerate, divider, del } = useChatListActionsBar(text);
+  return (
+    <ActionIconGroup
+      dropdownMenu={[regenerate, divider, del]}
+      items={[regenerate]}
+      onActionClick={onActionClick}
+      type="ghost"
+    />
+  );
+});

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

@@ -1,11 +1,16 @@
 import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { useCustomActions } from './customAction';
+
 export const UserActionsBar: RenderAction = memo(({ text, onActionClick }) => {
   const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+  const { translate } = useCustomActions();
+
+
   return (
     <ActionIconGroup
-      dropdownMenu={[edit, copy, regenerate, divider, del]}
+      dropdownMenu={[edit, copy, regenerate, divider, translate, divider, del]}
       items={[regenerate, edit]}
       onActionClick={onActionClick}
       type="ghost"

package/src/app/chat/features/Conversation/ChatList/Actions/customAction.ts

@@ -0,0 +1,23 @@
+import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
+import { LanguagesIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { localeOptions } from '@/locales/options';
+
+export const useCustomActions = () => {
+  const { t } = useTranslation('chat');
+
+  const translate = {
+    children: localeOptions.map((i) => ({
+      key: i.value,
+      label: t(`lang.${i.value}`, { ns: 'common' }),
+    })),
+    icon: LanguagesIcon,
+    key: 'translate',
+    label: t('translateTo'),
+  } as ActionIconGroupItems;
+
+  return {
+    translate,
+  };
+};

package/src/app/chat/features/Conversation/ChatList/Actions/index.ts

@@ -0,0 +1,13 @@
+import { ChatListProps } from '@lobehub/ui';
+
+import { AssistantActionsBar } from './Assistant';
+import { DefaultActionsBar } from './Fallback';
+import { FunctionActionsBar } from './Function';
+import { UserActionsBar } from './User';
+
+export const renderActions: ChatListProps['renderActions'] = {
+  assistant: AssistantActionsBar,
+  function: FunctionActionsBar,
+  system: DefaultActionsBar,
+  user: UserActionsBar,
+};

package/src/app/chat/features/Conversation/ChatList/Extras/Assistant.tsx

@@ -0,0 +1,39 @@
+import { SiOpenai } from '@icons-pack/react-simple-icons';
+import { RenderMessageExtra, Tag } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+
+import Translate from './Translate';
+
+export const AssistantMessageExtra: RenderMessageExtra = memo(({ extra, id }) => {
+  const model = useSessionStore(agentSelectors.currentAgentModel);
+
+  const showModelTag = extra?.fromModel && model !== extra?.fromModel;
+  const hasTranslate = !!extra?.translate;
+
+  const showExtra = showModelTag || hasTranslate;
+
+  const loading = useSessionStore((s) => s.chatLoadingId === id);
+
+  if (!showExtra) return;
+
+  return (
+    <Flexbox gap={8} style={{ marginTop: 8 }}>
+      {showModelTag && (
+        <div>
+          <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
+        </div>
+      )}
+      {extra.translate && (
+        <div>
+          <Divider style={{ margin: '12px 0' }} />
+          <Translate id={id} loading={loading} {...extra.translate} />
+        </div>
+      )}
+    </Flexbox>
+  );
+});

package/src/app/chat/features/Conversation/ChatList/Extras/Translate.tsx

@@ -0,0 +1,75 @@
+import { ActionIcon, Icon, Markdown, Tag } from '@lobehub/ui';
+import { App } from 'antd';
+import { createStyles } from 'antd-style';
+import copy from 'copy-to-clipboard';
+import { ChevronDown, ChevronUp, ChevronsRight, CopyIcon, TrashIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+import { ChatTranslate } from '@/types/chatMessage';
+
+import BubblesLoading from '../Loading';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    margin-top: 8px;
+  `,
+}));
+
+interface TranslateProps extends ChatTranslate {
+  id: string;
+  loading?: boolean;
+}
+
+const Translate = memo<TranslateProps>(({ content = '', from, to, id, loading }) => {
+  const { theme } = useStyles();
+  const { t } = useTranslation('common');
+  const [show, setShow] = useState(true);
+  const clearTranslate = useSessionStore((s) => s.clearTranslate);
+
+  const { message } = App.useApp();
+  return (
+    <Flexbox gap={8}>
+      <Flexbox align={'center'} horizontal justify={'space-between'}>
+        <div>
+          <Flexbox gap={4} horizontal>
+            <Tag style={{ margin: 0 }}>{from ? t(`lang.${from}` as any) : '...'}</Tag>
+            <Icon color={theme.colorTextTertiary} icon={ChevronsRight} />
+            <Tag>{t(`lang.${to}` as any)}</Tag>
+          </Flexbox>
+        </div>
+        <Flexbox horizontal>
+          <ActionIcon
+            icon={CopyIcon}
+            onClick={() => {
+              copy(content);
+              message.success(t('copySuccess'));
+            }}
+            size={'small'}
+            title={t('copy')}
+          />
+          <ActionIcon
+            icon={TrashIcon}
+            onClick={() => {
+              clearTranslate(id);
+            }}
+            size={'small'}
+            title={t('translate.clear', { ns: 'chat' })}
+          />
+          <ActionIcon
+            icon={show ? ChevronDown : ChevronUp}
+            onClick={() => {
+              setShow(!show);
+            }}
+            size={'small'}
+          />
+        </Flexbox>
+      </Flexbox>
+      {!show ? null : loading && !content ? <BubblesLoading /> : <Markdown>{content}</Markdown>}
+    </Flexbox>
+  );
+});
+
+export default Translate;

package/src/app/chat/features/Conversation/ChatList/Extras/User.tsx

@@ -0,0 +1,24 @@
+import { RenderMessageExtra } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+
+import Translate from './Translate';
+
+export const UserMessageExtra: RenderMessageExtra = memo(({ extra, id }) => {
+  const hasTranslate = !!extra?.translate;
+
+  const loading = useSessionStore((s) => s.chatLoadingId === id);
+  return (
+    <Flexbox gap={8} style={{ marginTop: hasTranslate ? 8 : 0 }}>
+      {extra?.translate && (
+        <div>
+          <Divider style={{ margin: '12px 0' }} />
+          <Translate id={id} {...extra.translate} loading={loading} />
+        </div>
+      )}
+    </Flexbox>
+  );
+});

package/src/app/chat/features/Conversation/ChatList/Extras/index.ts

@@ -0,0 +1,9 @@
+import { ChatListProps } from '@lobehub/ui';
+
+import { AssistantMessageExtra } from './Assistant';
+import { UserMessageExtra } from './User';
+
+export const renderMessagesExtra: ChatListProps['renderMessagesExtra'] = {
+  assistant: AssistantMessageExtra,
+  user: UserMessageExtra,
+};

package/src/app/chat/features/Conversation/ChatList/Loading.tsx

@@ -0,0 +1,53 @@
+import { useTheme } from 'antd-style';
+
+const Svg = () => (
+  <svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="0" cy="12" r="0" transform="translate(8 0)">
+      <animate
+        attributeName="r"
+        begin="0"
+        calcMode="spline"
+        dur="1.2s"
+        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
+        keyTimes="0;0.2;0.7;1"
+        repeatCount="indefinite"
+        values="0; 4; 0; 0"
+      />
+    </circle>
+    <circle cx="0" cy="12" r="0" transform="translate(16 0)">
+      <animate
+        attributeName="r"
+        begin="0.3"
+        calcMode="spline"
+        dur="1.2s"
+        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
+        keyTimes="0;0.2;0.7;1"
+        repeatCount="indefinite"
+        values="0; 4; 0; 0"
+      />
+    </circle>
+    <circle cx="0" cy="12" r="0" transform="translate(24 0)">
+      <animate
+        attributeName="r"
+        begin="0.6"
+        calcMode="spline"
+        dur="1.2s"
+        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
+        keyTimes="0;0.2;0.7;1"
+        repeatCount="indefinite"
+        values="0; 4; 0; 0"
+      />
+    </circle>
+  </svg>
+);
+
+const BubblesLoading = () => {
+  const { colorTextTertiary } = useTheme();
+  return (
+    <div style={{ fill: colorTextTertiary, height: 24, width: 32 }}>
+      <Svg />
+    </div>
+  );
+};
+
+export default BubblesLoading;

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

@@ -1,41 +1,18 @@
-import { SiOpenai } from '@icons-pack/react-simple-icons';
-import {
-  ActionIconGroup,
-  RenderAction,
-  RenderMessage,
-  RenderMessageExtra,
-  Tag,
-  useChatListActionsBar,
-} from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { RenderMessage } from '@lobehub/ui';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/slices/agentConfig';
-import { chatSelectors } from '@/store/session/slices/chat/selectors';
+import { chatSelectors } from '@/store/session/selectors';
 import { isFunctionMessage } from '@/utils/message';
 
 import FunctionCall from '../Plugins/FunctionCall';
-import { DefautMessage } from './Default';
-
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    margin-top: 8px;
-  `,
-  plugin: css`
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    width: fit-content;
-  `,
-}));
+import { DefaultMessage } from './Default';
 
 export const AssistantMessage: RenderMessage = memo(
   ({ id, plugin, function_call, content, ...props }) => {
-    const genFunctionCallProps = useSessionStore(chatSelectors.currentFunctionCallProps);
+    const genFunctionCallProps = useSessionStore(chatSelectors.getFunctionMessageParams);
 
-    if (!isFunctionMessage(content)) return <DefautMessage content={content} id={id} {...props} />;
+    if (!isFunctionMessage(content)) return <DefaultMessage content={content} id={id} {...props} />;
 
     const fcProps = genFunctionCallProps({ content, function_call, id, plugin });
 
@@ -46,33 +23,3 @@ export const AssistantMessage: RenderMessage = memo(
     );
   },
 );
-
-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, onActionClick }) => {
-  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
-  if (id === 'default') return;
-  return (
-    <ActionIconGroup
-      dropdownMenu={error ? [regenerate, divider, del] : [edit, copy, regenerate, divider, del]}
-      items={[regenerate]}
-      onActionClick={onActionClick}
-      type="ghost"
-    />
-  );
-});

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

@@ -1,6 +1,12 @@
 import { RenderMessage } from '@lobehub/ui';
 import { memo } from 'react';
 
-export const DefautMessage: RenderMessage = memo(({ id, editableContent }) => {
+import { LOADING_FLAT } from '@/const/message';
+
+import BubblesLoading from '../Loading';
+
+export const DefaultMessage: RenderMessage = memo(({ id, editableContent, content }) => {
+  if (content === LOADING_FLAT) return <BubblesLoading />;
+
   return <div id={id}>{editableContent}</div>;
 });

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

@@ -1,4 +1,4 @@
-import { ActionIconGroup, RenderAction, RenderMessage, useChatListActionsBar } from '@lobehub/ui';
+import { RenderMessage } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -9,34 +9,15 @@ import FunctionCall from '../Plugins/FunctionCall';
 import PluginMessage from '../Plugins/PluginMessage';
 
 export const FunctionMessage: RenderMessage = memo(
-  ({ id, content, plugin, function_call, ...props }) => {
-    const genFunctionCallProps = useSessionStore(chatSelectors.currentFunctionCallProps);
+  ({ id, content, plugin, function_call, name }) => {
+    const genFunctionCallProps = useSessionStore(chatSelectors.getFunctionMessageParams);
     const fcProps = genFunctionCallProps({ content, function_call, id, plugin });
 
     return (
       <Flexbox gap={12} id={id}>
         <FunctionCall {...fcProps} />
-        <PluginMessage
-          content={content}
-          function_call={function_call}
-          id={id}
-          loading={fcProps.loading}
-          plugin={plugin}
-          {...props}
-        />
+        <PluginMessage content={content} loading={fcProps.loading} name={name} />
       </Flexbox>
     );
   },
 );
-
-export const FunctionActionsBar: RenderAction = memo(({ text, onActionClick }) => {
-  const { regenerate, divider, del } = useChatListActionsBar(text);
-  return (
-    <ActionIconGroup
-      dropdownMenu={[regenerate, divider, del]}
-      items={[regenerate]}
-      onActionClick={onActionClick}
-      type="ghost"
-    />
-  );
-});

package/src/app/chat/features/Conversation/ChatList/Messages/index.ts

@@ -1,24 +1,11 @@
 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';
+import { AssistantMessage } from './Assistant';
+import { DefaultMessage } from './Default';
+import { FunctionMessage } from './Function';
 
 export const renderMessages: ChatListProps['renderMessages'] = {
   assistant: AssistantMessage,
-  default: DefautMessage,
+  default: DefaultMessage,
   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/Plugins/FunctionCall.tsx

@@ -30,8 +30,6 @@ const FunctionCall = memo<FunctionCallProps>(
     const pluginAvatar = pluginHelpers.getPluginAvatar(item?.meta);
     const pluginTitle = pluginHelpers.getPluginTitle(item?.meta);
 
-    console.log(item?.meta);
-
     const avatar = pluginAvatar ? (
       <Avatar avatar={pluginAvatar} size={32} />
     ) : (

package/src/app/chat/features/Conversation/ChatList/Plugins/PluginMessage.tsx

@@ -6,14 +6,15 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { usePluginStore } from '@/store/plugin';
-import { ChatMessage } from '@/types/chatMessage';
 
 import IFrameRender from './IFrameRender';
 
 const SystemJsRender = dynamic(() => import('./SystemJsRender'), { ssr: false });
 
-export interface FunctionMessageProps extends ChatMessage {
+export interface FunctionMessageProps {
+  content: string;
   loading?: boolean;
+  name?: string;
 }
 
 const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
@@ -29,8 +30,6 @@ const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
 
   const contentObj = useMemo(() => (isJSON ? JSON.parse(content) : content), [content]);
 
-  // if (!loading)
-
   if (!isJSON) {
     return (
       <Flexbox gap={8} horizontal>

package/src/app/chat/features/Conversation/ChatList/index.tsx

@@ -8,8 +8,10 @@ import { PREFIX_KEY, REGENERATE_KEY } from '@/const/hotkeys';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, chatSelectors } from '@/store/session/selectors';
 
+import { renderActions } from './Actions';
 import { renderErrorMessages } from './Error';
-import { renderActions, renderMessages, renderMessagesExtra } from './Messages';
+import { renderMessagesExtra } from './Extras';
+import { renderMessages } from './Messages';
 import SkeletonList from './SkeletonList';
 
 const List = memo(() => {
@@ -25,6 +27,7 @@ const List = memo(() => {
     deleteMessage,
     resendMessage,
     dispatchMessage,
+    translateMessage,
   ] = useSessionStore((s) => {
     const config = agentSelectors.currentAgentConfig(s);
     return [
@@ -35,6 +38,7 @@ const List = memo(() => {
       s.deleteMessage,
       s.resendMessage,
       s.dispatchMessage,
+      s.translateMessage,
     ];
   });
 
@@ -43,7 +47,6 @@ const List = memo(() => {
   useHotkeys(
     hotkeys,
     () => {
-      console.log(111);
       const lastMessage = data.at(-1);
       if (!lastMessage || lastMessage.id === 'default' || lastMessage.role === 'system') return;
       resendMessage(lastMessage.id);
@@ -61,9 +64,28 @@ const List = memo(() => {
       enableHistoryCount={enableHistoryCount}
       historyCount={historyCount}
       loadingId={chatLoadingId}
-      onActionsClick={{
-        del: ({ id }) => deleteMessage(id),
-        regenerate: ({ id }) => resendMessage(id),
+      onActionsClick={(action, { id, error }) => {
+        switch (action.key) {
+          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;
+          }
+        }
+
+        // click the menu item with translate item, the result is:
+        // key: 'en-US'
+        // keyPath: ['en-US','translate']
+        if (action.keyPath.at(-1) === 'translate') {
+          const lang = action.keyPath[0];
+          translateMessage(id, lang);
+        }
       }}
       onMessageChange={(id, content) =>
         dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content })

package/src/app/chat/features/Conversation/index.tsx

@@ -28,7 +28,7 @@ interface ConversationProps {
 
 const Conversation = memo<ConversationProps>(({ mobile, chatInput }) => {
   const ref = useRef(null);
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('chat');
   const { styles } = useStyles();
 
   const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);

package/src/app/chat/features/SessionListContent/Inbox/index.tsx

@@ -15,7 +15,7 @@ const { Item } = List;
 const Inbox = memo(() => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('chat');
   const { mobile } = useResponsive();
   const [activeId, activeSession, switchSession] = useSessionStore((s) => [
     s.activeId,

package/src/app/chat/features/SessionListContent/List/AddButton.tsx

@@ -8,7 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useSessionStore } from '@/store/session';
 
 const AddButton = memo<ButtonProps>((props) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('chat');
   const createSession = useSessionStore((s) => s.createSession);
   return (
     <Flexbox style={{ margin: '12px 16px' }}>

package/src/app/chat/features/SessionSearchBar/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useSessionStore } from '@/store/session';
 
 const SessionSearchBar = memo(() => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('chat');
   const [keywords] = useSessionStore((s) => [s.searchKeywords]);
   const { mobile } = useResponsive();
   return (

package/src/app/chat/features/TopicListContent/Topic/DefaultContent.tsx

@@ -19,7 +19,7 @@ const DefaultContent = memo(() => {
         <Icon color={theme.colorTextDescription} icon={MessageSquareDashed} />
       </Flexbox>
       <Paragraph ellipsis={{ rows: 1 }} style={{ margin: 0 }}>
-        {t('topic.defaultTitle')}
+        {t('topic.defaultTitle', { ns: 'chat' })}
       </Paragraph>
       <Tag>{t('temp')}</Tag>
     </Flexbox>

package/src/app/chat/features/TopicListContent/Topic/TopicContent.tsx

@@ -74,7 +74,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
             onOk: () => {
               removeTopic(id);
             },
-            title: t('topic.confirmRemoveTopic'),
+            title: t('topic.confirmRemoveTopic', { ns: 'chat' }),
           });
         },
       },

package/src/app/chat/features/TopicListContent/Topic/index.tsx

@@ -54,7 +54,7 @@ export const Topic = () => {
       <TopicItem
         active={!activeTopicId}
         fav={false}
-        title={t('topic.defaultTitle', { ns: 'common' })}
+        title={t('topic.defaultTitle', { ns: 'chat' })}
       />
 
       {topicsData.map(({ id, favorite, title }) => (

package/src/app/chat/features/TopicListContent/TopicSearchBar/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useSessionStore } from '@/store/session';
 
 const TopicSearchBar = memo(() => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('chat');
   const [keywords] = useSessionStore((s) => [s.topicSearchKeywords]);
   const { mobile } = useResponsive();
   return (

package/src/app/home/index.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next';
 import FullscreenLoading from '@/components/FullscreenLoading';
 
 const Loading = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
 
-  return <FullscreenLoading title={t('appInitializing', { ns: 'common' })} />;
+  return <FullscreenLoading title={t('appInitializing')} />;
 };
 
 export default Loading;