@lobehub/chat 1.135.3 → 1.135.4

package/src/{components → features}/ChatItem/components/MessageContent.tsx

@@ -1,15 +1,20 @@
 import { MarkdownProps } from '@lobehub/ui';
 import { EditableMessage } from '@lobehub/ui/chat';
 import { useResponsive } from 'antd-style';
-import { type ReactNode, memo } from 'react';
+import { type ReactNode, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useChatStore } from '@/store/chat';
+import { useUserStore } from '@/store/user';
+import { userGeneralSettingsSelectors } from '@/store/user/selectors';
+
 import { useStyles } from '../style';
 import { ChatItemProps } from '../type';
 
 export interface MessageContentProps {
   editing?: ChatItemProps['editing'];
-  fontSize?: number;
+  id: string;
   markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
   message?: ReactNode;
   messageExtra?: ChatItemProps['messageExtra'];
@@ -19,16 +24,13 @@ export interface MessageContentProps {
   placement?: ChatItemProps['placement'];
   primary?: ChatItemProps['primary'];
   renderMessage?: ChatItemProps['renderMessage'];
-  text?: ChatItemProps['text'];
   variant?: ChatItemProps['variant'];
 }
 
 const MessageContent = memo<MessageContentProps>(
   ({
     editing,
-    onChange,
-    onEditingChange,
-    text,
+    id,
     message,
     placement,
     messageExtra,
@@ -36,11 +38,29 @@ const MessageContent = memo<MessageContentProps>(
     variant,
     primary,
     onDoubleClick,
-    fontSize,
     markdownProps,
   }) => {
+    const { t } = useTranslation('common');
     const { cx, styles } = useStyles({ editing, placement, primary, variant });
+    const fontSize = useUserStore(userGeneralSettingsSelectors.fontSize);
     const { mobile } = useResponsive();
+    const text = useMemo(
+      () => ({
+        cancel: t('cancel'),
+        confirm: t('ok'),
+        edit: t('edit'),
+      }),
+      [],
+    );
+
+    const [toggleMessageEditing, updateMessageContent] = useChatStore((s) => [
+      s.toggleMessageEditing,
+      s.modifyMessageContent,
+    ]);
+    const onChange = (value: string) => {
+      updateMessageContent(id, value);
+    };
+    const onEditingChange = (edit: boolean) => toggleMessageEditing(id, edit);
 
     const content = (
       <EditableMessage

package/src/features/Conversation/{components/MarkdownElements → MarkdownElements}/LobeArtifact/Render/index.tsx

@@ -10,7 +10,7 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
 import { dotLoading } from '@/styles/loading';
 
-import { InPortalThreadContext } from '../../../ChatItem/InPortalThreadContext';
+import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
 import { MarkdownElementProps } from '../../type';
 import ArtifactIcon from './Icon';
 

package/src/features/Conversation/{components/MarkdownElements → MarkdownElements}/remarkPlugins/getNodeContent.test.ts

@@ -2,7 +2,7 @@ import { toMarkdown } from 'mdast-util-to-markdown';
 import { Parent } from 'unist';
 import { expect } from 'vitest';
 
-import { treeNodeToString } from '@/features/Conversation/components/MarkdownElements/remarkPlugins/getNodeContent';
+import { treeNodeToString } from '@/features/Conversation/MarkdownElements/remarkPlugins/getNodeContent';
 
 describe('treeNodeToString', () => {
   it('with latex', () => {

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

@@ -2,7 +2,7 @@ import { ActionIconGroup } from '@lobehub/ui';
 import type { ChatActionsBarProps } from '@lobehub/ui/chat';
 import { memo } from 'react';
 
-import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+import { useChatListActionsBar } from '../../../hooks/useChatListActionsBar';
 
 export const ErrorActionsBar = memo<ChatActionsBarProps>(({ onActionClick }) => {
   const { regenerate, copy, edit, del, divider } = useChatListActionsBar();

package/src/features/Conversation/{components/ChatItem/ActionsBar.tsx → Messages/Assistant/Actions/index.tsx}

@@ -1,43 +1,57 @@
-import { ActionIconGroup, type ActionIconGroupEvent, type ActionIconGroupProps } from '@lobehub/ui';
+import { ActionIconGroup, type ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
 import { App } from 'antd';
-import isEqual from 'fast-deep-equal';
 import { useSearchParams } from 'next/navigation';
-import { memo, use, useCallback, useState } from 'react';
+import { memo, use, useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import ShareMessageModal from '@/features/Conversation/components/ShareMessageModal';
 import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
-import { MessageRoleType } from '@/types/message';
+import { threadSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/message';
 
-import { renderActions } from '../../Actions';
-import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
-import ShareMessageModal from './ShareMessageModal';
+import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
+import { useChatListActionsBar } from '../../../hooks/useChatListActionsBar';
+import { ErrorActionsBar } from './Error';
 
-export type ActionsBarProps = ActionIconGroupProps;
-
-const ActionsBar = memo<ActionsBarProps>((props) => {
-  const { regenerate, edit, copy, divider, del } = useChatListActionsBar();
-
-  return (
-    <ActionIconGroup
-      items={[regenerate, edit]}
-      menu={{
-        items: [edit, copy, regenerate, divider, del],
-      }}
-      {...props}
-    />
-  );
-});
-
-interface ActionsProps {
+interface AssistantActionsProps {
+  data: ChatMessage;
   id: string;
-  inPortalThread?: boolean;
   index: number;
 }
+export const AssistantActionsBar = memo<AssistantActionsProps>(({ id, data, index }) => {
+  const { error, tools } = data;
+  const [isThreadMode, hasThread] = useChatStore((s) => [
+    !!s.activeThreadId,
+    threadSelectors.hasThreadBySourceMsgId(id)(s),
+  ]);
+  const [showShareModal, setShareModal] = useState(false);
+
+  const {
+    regenerate,
+    edit,
+    delAndRegenerate,
+    copy,
+    divider,
+    del,
+    branching,
+    // export: exportPDF,
+    share,
+    tts,
+    translate,
+  } = useChatListActionsBar({ hasThread });
+
+  const hasTools = !!tools;
+
+  const inPortalThread = useContext(InPortalThreadContext);
+  const inThread = isThreadMode || inPortalThread;
+
+  const items = useMemo(() => {
+    if (hasTools) return [delAndRegenerate, copy];
+
+    return [edit, copy, inThread ? null : branching].filter(Boolean) as ActionIconGroupItemType[];
+  }, [inThread, hasTools]);
 
-const Actions = memo<ActionsProps>(({ id, inPortalThread, index }) => {
-  const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
   const { t } = useTranslation('common');
   const searchParams = useSearchParams();
   const topic = searchParams.get('topic');
@@ -67,9 +81,7 @@ const Actions = memo<ActionsProps>(({ id, inPortalThread, index }) => {
   const { message } = App.useApp();
   const virtuosoRef = use(VirtuosoContext);
 
-  const [showShareModal, setShareModal] = useState(false);
-
-  const handleActionClick = useCallback(
+  const onActionClick = useCallback(
     async (action: ActionIconGroupEvent) => {
       switch (action.key) {
         case 'edit': {
@@ -78,11 +90,11 @@ const Actions = memo<ActionsProps>(({ id, inPortalThread, index }) => {
           virtuosoRef?.current?.scrollIntoView({ align: 'start', behavior: 'auto', index });
         }
       }
-      if (!item) return;
+      if (!data) return;
 
       switch (action.key) {
         case 'copy': {
-          await copyMessage(id, item.content);
+          await copyMessage(id, data.content);
           message.success(t('copySuccess', { defaultValue: 'Copy Success' }));
           break;
         }
@@ -106,7 +118,7 @@ const Actions = memo<ActionsProps>(({ id, inPortalThread, index }) => {
           } else regenerateMessage(id);
 
           // if this message is an error message, we need to delete it
-          if (item.error) deleteMessage(id);
+          if (data.error) deleteMessage(id);
           break;
         }
 
@@ -136,28 +148,45 @@ const Actions = memo<ActionsProps>(({ id, inPortalThread, index }) => {
       }
 
       if (action.keyPath.at(-1) === 'translate') {
-        // click the menu item with translate item, the result is:
+        // click the menu data with translate data, the result is:
         // key: 'en-US'
         // keyPath: ['en-US','translate']
         const lang = action.keyPath[0];
         translateMessage(id, lang);
       }
     },
-    [item],
+    [data],
   );
 
-  const RenderFunction = renderActions[(item?.role || '') as MessageRoleType] ?? ActionsBar;
-
-  if (!item) return null;
+  if (error) return <ErrorActionsBar onActionClick={onActionClick} />;
 
   return (
     <>
-      <RenderFunction {...item} onActionClick={handleActionClick} />
+      <ActionIconGroup
+        items={items}
+        menu={{
+          items: [
+            edit,
+            copy,
+            divider,
+            tts,
+            translate,
+            divider,
+            share,
+            // exportPDF,
+            divider,
+            regenerate,
+            delAndRegenerate,
+            del,
+          ],
+        }}
+        onActionClick={onActionClick}
+      />
       {/*{showModal && (*/}
-      {/*  <ExportPreview content={item.content} onClose={() => setModal(false)} open={showModal} />*/}
+      {/*  <ExportPreview content={data.content} onClose={() => setModal(false)} open={showModal} />*/}
       {/*)}*/}
       <ShareMessageModal
-        message={item}
+        message={data!}
         onCancel={() => {
           setShareModal(false);
         }}
@@ -166,5 +195,3 @@ const Actions = memo<ActionsProps>(({ id, inPortalThread, index }) => {
     </>
   );
 });
-
-export default Actions;

package/src/features/Conversation/Messages/Assistant/Block.tsx

@@ -0,0 +1,63 @@
+import { Markdown } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { LOADING_FLAT } from '@/const/message';
+import ImageFileListViewer from '@/features/Conversation/Messages/User/ImageFileListViewer';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { AssistantContentBlock } from '@/types/message';
+
+import { DefaultMessage } from '../Default';
+import Tool from './Tool';
+
+interface AssistantBlockProps extends AssistantContentBlock {
+  editableContent: ReactNode;
+}
+export const AssistantBlock = memo<AssistantBlockProps>(
+  ({ id, tools, content, imageList, ...props }) => {
+    const editing = useChatStore(chatSelectors.isMessageEditing(id));
+    const generating = useChatStore(chatSelectors.isMessageGenerating(id));
+
+    console.log(id, content, props);
+    const isToolCallGenerating = generating && (content === LOADING_FLAT || !content) && !!tools;
+
+    const showImageItems = !!imageList && imageList.length > 0;
+
+    if (tools && tools.length > 0)
+      return (
+        <Flexbox gap={8}>
+          {tools.map((toolCall, index) => (
+            <Tool
+              apiName={toolCall.apiName}
+              arguments={toolCall.arguments}
+              id={toolCall.id}
+              identifier={toolCall.identifier}
+              index={index}
+              key={toolCall.id}
+              messageId={id}
+              payload={toolCall}
+              type={toolCall.type}
+            />
+          ))}
+        </Flexbox>
+      );
+
+    if (editing)
+      return (
+        <DefaultMessage
+          content={content}
+          id={id}
+          isToolCallGenerating={isToolCallGenerating}
+          {...(props as any)}
+        />
+      );
+
+    return (
+      <Flexbox gap={8} id={id}>
+        <Markdown variant={'chat'}>{content}</Markdown>
+        {showImageItems && <ImageFileListViewer items={imageList} />}
+      </Flexbox>
+    );
+  },
+);

package/src/features/Conversation/{Extras/Assistant.test.tsx → Messages/Assistant/Extra/index.test.tsx}

@@ -1,28 +1,27 @@
 import { render, screen } from '@testing-library/react';
 import { Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
+import { useChatStore } from '@/store/chat';
 import { ChatMessage } from '@/types/message';
 
-import { AssistantMessageExtra } from './Assistant';
+import { AssistantMessageExtra } from './index';
+
+vi.mock('zustand/traditional');
 
 // Mock TTS and Translate components
-vi.mock('./TTS', () => ({
+vi.mock('@/features/Conversation/components/Extras/TTS', () => ({
   default: vi.fn(() => <div>TTS Component</div>),
 }));
-vi.mock('./Translate', () => ({
+vi.mock('@/features/Conversation/components/Extras/Translate', () => ({
   default: vi.fn(() => <div>Translate Component</div>),
 }));
-
-// Mock dependencies
-vi.mock('@/store/agent', () => ({
-  useAgentStore: vi.fn(),
+vi.mock('@/features/Conversation/components/Extras/Usage', () => ({
+  default: vi.fn(() => <div>Usage Component</div>),
 }));
-vi.mock('@/store/agent/selectors', () => ({
-  agentSelectors: {
-    currentAgentModel: vi.fn(),
-  },
+
+// Mock store
+vi.mock('@/store/chat', () => ({
+  useChatStore: vi.fn(),
 }));
 
 const mockData: ChatMessage = {
@@ -36,37 +35,38 @@ const mockData: ChatMessage = {
 
 describe('AssistantMessageExtra', () => {
   beforeEach(() => {
-    // Set default mock return values
-    (useAgentStore as unknown as Mock).mockImplementation(() => ({
-      chatLoadingId: null,
-    }));
-    (agentSelectors.currentAgentModel as Mock).mockReturnValue('defaultModel');
+    // Mock useChatStore to return false for loading state
+    (useChatStore as unknown as Mock).mockReturnValue(false);
   });
 
   it('should not render content if extra is undefined', async () => {
     render(<AssistantMessageExtra {...mockData} />);
-    expect(screen.queryByText('defaultModel')).toBeNull();
+    expect(screen.queryByText('Usage Component')).toBeNull();
     expect(screen.queryByText('TTS Component')).toBeNull();
     expect(screen.queryByText('Translate Component')).toBeNull();
   });
 
   it('should not render content if extra is defined but does not contain fromModel, tts, or translate', async () => {
-    render(<AssistantMessageExtra {...mockData} />);
-    expect(screen.queryByText('defaultModel')).toBeNull();
+    render(<AssistantMessageExtra {...mockData} extra={{}} />);
+    expect(screen.queryByText('Usage Component')).toBeNull();
     expect(screen.queryByText('TTS Component')).toBeNull();
     expect(screen.queryByText('Translate Component')).toBeNull();
   });
 
-  it('should render Tag component if extra.fromModel exists and does not match the current model', async () => {
-    render(<AssistantMessageExtra {...mockData} extra={{ fromModel: 'otherModel' }} />);
+  it('should render Usage component if extra.fromModel exists', async () => {
+    render(
+      <AssistantMessageExtra
+        {...mockData}
+        extra={{ fromModel: 'gpt-4', fromProvider: 'openai' }}
+      />,
+    );
 
-    expect(screen.getByText('otherModel')).toBeInTheDocument();
+    expect(screen.getByText('Usage Component')).toBeInTheDocument();
   });
 
-  it('should render TTS component if extra.fromModel and extra.tts coexist', async () => {
-    render(<AssistantMessageExtra {...mockData} extra={{ fromModel: 'otherModel', tts: {} }} />);
+  it('should render TTS component if extra.tts exists', async () => {
+    render(<AssistantMessageExtra {...mockData} extra={{ tts: {} }} />);
 
-    expect(screen.getByText('otherModel')).toBeInTheDocument();
     expect(screen.getByText('TTS Component')).toBeInTheDocument();
   });
 
@@ -75,10 +75,15 @@ describe('AssistantMessageExtra', () => {
     expect(screen.getByText('Translate Component')).toBeInTheDocument();
   });
 
-  it('should receive the correct loading attribute if loading is true for TTS and Translate components', async () => {
-    (useAgentStore as unknown as Mock).mockImplementation(() => ({
-      chatLoadingId: 'test-id',
-    }));
+  it('should render both TTS and Translate components when both exist in extra', async () => {
+    render(<AssistantMessageExtra {...mockData} extra={{ translate: { to: 'abc' }, tts: {} }} />);
+    expect(screen.getByText('TTS Component')).toBeInTheDocument();
+    expect(screen.getByText('Translate Component')).toBeInTheDocument();
+  });
+
+  it('should pass loading state to TTS and Translate components', async () => {
+    (useChatStore as unknown as Mock).mockReturnValue(true);
+
     render(<AssistantMessageExtra {...mockData} extra={{ translate: { to: 'abc' }, tts: {} }} />);
     expect(screen.getByText('TTS Component')).toBeInTheDocument();
     expect(screen.getByText('Translate Component')).toBeInTheDocument();

package/src/features/Conversation/{Extras/Assistant.tsx → Messages/Assistant/Extra/index.tsx}

@@ -2,17 +2,23 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { LOADING_FLAT } from '@/const/message';
+import ExtraContainer from '@/features/Conversation/components/Extras/ExtraContainer';
+import TTS from '@/features/Conversation/components/Extras/TTS';
+import Translate from '@/features/Conversation/components/Extras/Translate';
+import Usage from '@/features/Conversation/components/Extras/Usage';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { ChatMessage } from '@/types/message';
+import { type MessageMetadata } from '@/types/message';
 
-import { RenderMessageExtra } from '../types';
-import ExtraContainer from './ExtraContainer';
-import TTS from './TTS';
-import Translate from './Translate';
-import Usage from './Usage';
+interface AssistantMessageExtraProps {
+  content: string;
+  extra?: any;
+  id: string;
+  metadata?: MessageMetadata | null;
+  tools?: any[];
+}
 
-export const AssistantMessageExtra: RenderMessageExtra = memo<ChatMessage>(
+export const AssistantMessageExtra = memo<AssistantMessageExtraProps>(
   ({ extra, id, content, metadata, tools }) => {
     const loading = useChatStore(chatSelectors.isMessageGenerating(id));
 

package/src/features/Conversation/Messages/Assistant/MessageContent.tsx

@@ -0,0 +1,102 @@
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { LOADING_FLAT } from '@/const/message';
+import { AssistantBlock } from '@/features/Conversation/Messages/Assistant/Block';
+import ImageFileListViewer from '@/features/Conversation/Messages/User/ImageFileListViewer';
+import VideoFileListViewer from '@/features/Conversation/Messages/User/VideoFileListViewer';
+import { useChatStore } from '@/store/chat';
+import { aiChatSelectors, chatSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/message';
+
+import { DefaultMessage } from '../Default';
+import FileChunks from './FileChunks';
+import IntentUnderstanding from './IntentUnderstanding';
+import Reasoning from './Reasoning';
+import SearchGrounding from './SearchGrounding';
+import Tool from './Tool';
+
+export const AssistantMessageContent = memo<
+  ChatMessage & {
+    editableContent: ReactNode;
+  }
+>(({ id, tools, content, chunksList, search, imageList, videoList, children, ...props }) => {
+  const editing = useChatStore(chatSelectors.isMessageEditing(id));
+  const generating = useChatStore(chatSelectors.isMessageGenerating(id));
+
+  const isToolCallGenerating = generating && (content === LOADING_FLAT || !content) && !!tools;
+
+  const isReasoning = useChatStore(aiChatSelectors.isMessageInReasoning(id));
+
+  const isIntentUnderstanding = useChatStore(aiChatSelectors.isIntentUnderstanding(id));
+
+  const showSearch = !!search && !!search.citations?.length;
+  const showImageItems = !!imageList && imageList.length > 0;
+  const showVideoItems = !!videoList && videoList.length > 0;
+
+  // remove \n to avoid empty content
+  // refs: https://github.com/lobehub/lobe-chat/pull/6153
+  const showReasoning =
+    (!!props.reasoning && props.reasoning.content?.trim() !== '') ||
+    (!props.reasoning && isReasoning);
+
+  const showFileChunks = !!chunksList && chunksList.length > 0;
+
+  if (children && children?.length > 0)
+    return (
+      <Flexbox gap={8}>
+        {children.map((item) => (
+          <AssistantBlock key={item.id} {...item} editableContent={props.editableContent} />
+        ))}
+      </Flexbox>
+    );
+
+  return editing ? (
+    <DefaultMessage
+      content={content}
+      id={id}
+      isToolCallGenerating={isToolCallGenerating}
+      {...props}
+    />
+  ) : (
+    <Flexbox gap={8} id={id}>
+      {showSearch && (
+        <SearchGrounding citations={search?.citations} searchQueries={search?.searchQueries} />
+      )}
+      {showFileChunks && <FileChunks data={chunksList} />}
+      {showReasoning && <Reasoning {...props.reasoning} id={id} />}
+      {isIntentUnderstanding ? (
+        <IntentUnderstanding />
+      ) : (
+        content && (
+          <DefaultMessage
+            addIdOnDOM={false}
+            content={content}
+            id={id}
+            isToolCallGenerating={isToolCallGenerating}
+            {...props}
+          />
+        )
+      )}
+      {showImageItems && <ImageFileListViewer items={imageList} />}
+      {showVideoItems && <VideoFileListViewer items={videoList} />}
+      {tools && (
+        <Flexbox gap={8}>
+          {tools.map((toolCall, index) => (
+            <Tool
+              apiName={toolCall.apiName}
+              arguments={toolCall.arguments}
+              id={toolCall.id}
+              identifier={toolCall.identifier}
+              index={index}
+              key={toolCall.id}
+              messageId={id}
+              payload={toolCall}
+              type={toolCall.type}
+            />
+          ))}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});