@lobehub/lobehub 2.0.0-next.64 → 2.0.0-next.66

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

@@ -3,6 +3,7 @@ import { UIChatMessage } from '@lobechat/types';
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { CollapsedMessage } from '@/features/Conversation/Messages/Assistant/CollapsedMessage';
 import { useChatStore } from '@/store/chat';
 import { aiChatSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
@@ -18,9 +19,10 @@ export const AssistantMessageContent = memo<
     editableContent: ReactNode;
   }
 >(({ id, tools, content, chunksList, search, imageList, ...props }) => {
-  const [editing, generating] = useChatStore((s) => [
+  const [editing, generating, isCollapsed] = useChatStore((s) => [
     messageStateSelectors.isMessageEditing(id)(s),
     messageStateSelectors.isMessageGenerating(id)(s),
+    messageStateSelectors.isMessageCollapsed(id)(s),
   ]);
 
   const isToolCallGenerating = generating && (content === LOADING_FLAT || !content) && !!tools;
@@ -40,14 +42,19 @@ export const AssistantMessageContent = memo<
 
   const showFileChunks = !!chunksList && chunksList.length > 0;
 
-  return editing ? (
-    <DefaultMessage
-      content={content}
-      id={id}
-      isToolCallGenerating={isToolCallGenerating}
-      {...props}
-    />
-  ) : (
+  if (editing)
+    return (
+      <DefaultMessage
+        content={content}
+        id={id}
+        isToolCallGenerating={isToolCallGenerating}
+        {...props}
+      />
+    );
+
+  if (isCollapsed) return <CollapsedMessage content={content} id={id} />;
+
+  return (
     <Flexbox gap={8} id={id}>
       {showSearch && (
         <SearchGrounding citations={search?.citations} searchQueries={search?.searchQueries} />

package/src/features/Conversation/Messages/Group/Actions/WithContentId.tsx

@@ -24,19 +24,30 @@ interface GroupActionsProps {
 
 const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }) => {
   const { tools } = data;
-  const [isThreadMode, hasThread, isRegenerating] = useChatStore((s) => [
+  const [isThreadMode, hasThread, isRegenerating, isCollapsed] = useChatStore((s) => [
     !!s.activeThreadId,
     threadSelectors.hasThreadBySourceMsgId(id)(s),
     messageStateSelectors.isMessageRegenerating(id)(s),
+    messageStateSelectors.isMessageCollapsed(id)(s),
   ]);
   const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
   const [showShareModal, setShareModal] = useState(false);
 
-  const { edit, delAndRegenerate, regenerate, copy, divider, del, branching, share } =
-    useChatListActionsBar({
-      hasThread,
-      isRegenerating,
-    });
+  const {
+    edit,
+    delAndRegenerate,
+    regenerate,
+    copy,
+    divider,
+    del,
+    branching,
+    share,
+    expand,
+    collapse,
+  } = useChatListActionsBar({
+    hasThread,
+    isRegenerating,
+  });
 
   const hasTools = !!tools;
 
@@ -64,6 +75,7 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
     resendThreadMessage,
     delAndResendThreadMessage,
     toggleMessageEditing,
+    toggleMessageCollapsed,
   ] = useChatStore((s) => [
     s.deleteMessage,
     s.regenerateAssistantMessage,
@@ -74,6 +86,7 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
     s.resendThreadMessage,
     s.delAndResendThreadMessage,
     s.toggleMessageEditing,
+    s.toggleMessageCollapsed,
   ]);
   const { message } = App.useApp();
   const virtuosoRef = use(VirtuosoContext);
@@ -133,6 +146,12 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
           setShareModal(true);
           break;
         }
+
+        case 'collapse':
+        case 'expand': {
+          toggleMessageCollapsed(id);
+          break;
+        }
       }
 
       if (action.keyPath.at(-1) === 'translate') {
@@ -146,6 +165,8 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
     [data, topic],
   );
 
+  const collapseAction = isCollapsed ? expand : collapse;
+
   return (
     <>
       <ActionIconGroup
@@ -154,6 +175,7 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
           items: [
             edit,
             copy,
+            collapseAction,
             divider,
             share,
             divider,

package/src/features/Conversation/Messages/Group/CollapsedMessage.tsx

@@ -0,0 +1,37 @@
+import { Button, Markdown, MaskShadow } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+
+interface CollapsedMessageProps {
+  content: string;
+  id: string;
+}
+
+export const CollapsedMessage = memo<CollapsedMessageProps>(({ id, content }) => {
+  const { t } = useTranslation('chat');
+  const toggleMessageCollapsed = useChatStore((s) => s.toggleMessageCollapsed);
+
+  return (
+    <Flexbox>
+      <MaskShadow>
+        <Markdown variant={'chat'}>{content?.slice(0, 300)}</Markdown>
+      </MaskShadow>
+      <Flexbox padding={4}>
+        <Button
+          block
+          color={'default'}
+          onClick={() => {
+            toggleMessageCollapsed(id, false);
+          }}
+          size={'small'}
+          variant={'filled'}
+        >
+          {t('chatList.expandMessage')}
+        </Button>
+      </Flexbox>
+    </Flexbox>
+  );
+});

package/src/features/Conversation/Messages/Group/{GroupChildren.tsx → Group.tsx}

@@ -4,6 +4,10 @@ import isEqual from 'fast-deep-equal';
 import { memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { CollapsedMessage } from '@/features/Conversation/Messages/Group/CollapsedMessage';
+import { useChatStore } from '@/store/chat';
+import { messageStateSelectors } from '@/store/chat/slices/message/selectors';
+
 import { GroupMessageContext } from './GroupContext';
 import GroupItem from './GroupItem';
 
@@ -19,18 +23,28 @@ const useStyles = createStyles(({ css }) => {
 
 interface GroupChildrenProps {
   blocks: AssistantContentBlock[];
+  content?: string;
   contentId?: string;
   disableEditing?: boolean;
   id: string;
   messageIndex: number;
 }
 
-const GroupChildren = memo<GroupChildrenProps>(
-  ({ blocks, contentId, disableEditing, messageIndex, id }) => {
+const Group = memo<GroupChildrenProps>(
+  ({ blocks, contentId, disableEditing, messageIndex, id, content }) => {
     const { styles } = useStyles();
-
+    const [isCollapsed] = useChatStore((s) => [messageStateSelectors.isMessageCollapsed(id)(s)]);
     const contextValue = useMemo(() => ({ assistantGroupId: id }), [id]);
 
+    if (isCollapsed) {
+      return (
+        content && (
+          <Flexbox>
+            <CollapsedMessage content={content} id={id} />
+          </Flexbox>
+        )
+      );
+    }
     return (
       <GroupMessageContext value={contextValue}>
         <Flexbox className={styles.container} gap={8}>
@@ -53,4 +67,4 @@ const GroupChildren = memo<GroupChildrenProps>(
   isEqual,
 );
 
-export default GroupChildren;
+export default Group;

package/src/features/Conversation/Messages/Group/index.tsx

@@ -10,22 +10,19 @@ import Avatar from '@/features/ChatItem/components/Avatar';
 import BorderSpacing from '@/features/ChatItem/components/BorderSpacing';
 import Title from '@/features/ChatItem/components/Title';
 import { useStyles } from '@/features/ChatItem/style';
-import GroupChildren from '@/features/Conversation/Messages/Group/GroupChildren';
 import Usage from '@/features/Conversation/components/Extras/Usage';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import {
-  displayMessageSelectors,
-  messageStateSelectors,
-} from '@/store/chat/slices/message/selectors';
+import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
 import { GroupActionsBar } from './Actions';
 import EditState from './EditState';
+import Group from './Group';
 
 const MOBILE_AVATAR_SIZE = 32;
 
@@ -111,8 +108,9 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing }) =>
           width={'100%'}
         >
           {children && children.length > 0 && (
-            <GroupChildren
+            <Group
               blocks={children}
+              content={lastAssistantMsg?.content}
               contentId={contentId}
               disableEditing={disableEditing}
               id={id}

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

@@ -6,6 +6,8 @@ import {
   DownloadIcon,
   Edit,
   LanguagesIcon,
+  ListChevronsDownUp,
+  ListChevronsUpDown,
   ListRestart,
   Play,
   RotateCcw,
@@ -27,12 +29,14 @@ const translateStyle = css`
 
 interface ChatListActionsBar {
   branching: ActionIconGroupItemType;
+  collapse: ActionIconGroupItemType;
   continueGeneration: ActionIconGroupItemType;
   copy: ActionIconGroupItemType;
   del: ActionIconGroupItemType;
   delAndRegenerate: ActionIconGroupItemType;
   divider: { type: 'divider' };
   edit: ActionIconGroupItemType;
+  expand: ActionIconGroupItemType;
   export: ActionIconGroupItemType;
   regenerate: ActionIconGroupItemType;
   share: ActionIconGroupItemType;
@@ -58,6 +62,11 @@ export const useChatListActionsBar = ({
         key: 'branching',
         label: t('branching'),
       },
+      collapse: {
+        icon: ListChevronsDownUp,
+        key: 'collapse',
+        label: t('messageAction.collapse', { ns: 'chat' }),
+      },
       continueGeneration: {
         disabled: isContinuing,
         icon: ArrowDownFromLine,
@@ -93,6 +102,11 @@ export const useChatListActionsBar = ({
         key: 'edit',
         label: t('edit'),
       },
+      expand: {
+        icon: ListChevronsUpDown,
+        key: 'expand',
+        label: t('messageAction.expand', { ns: 'chat' }),
+      },
       export: {
         icon: DownloadIcon,
         key: 'export',

package/src/layout/AuthProvider/MarketAuth/MarketAuthProvider.tsx

@@ -106,7 +106,7 @@ export const MarketAuthProvider = ({ children, isDesktop }: MarketAuthProviderPr
   // 初始化 OIDC 客户端（仅在客户端）
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      const baseUrl = process.env.NEXT_PUBLIC_MARKET_BASE_URL || 'http://127.0.0.1:8787';
+      const baseUrl = process.env.NEXT_PUBLIC_MARKET_BASE_URL || 'https://market.lobehub.com';
       const desktopRedirectUri = new URL(MARKET_OIDC_ENDPOINTS.desktopCallback, baseUrl).toString();
 
       // 桌面端使用 Market 手动维护的 Web 回调，Web 端使用当前域名

package/src/libs/mcp/__tests__/index.test.ts

@@ -21,16 +21,16 @@ describe('MCPClient', () => {
       await mcpClient.initialize();
       // Add a small delay to allow the server process to fully start (optional, but can help)
       await new Promise((resolve) => setTimeout(resolve, 100));
-    });
+    }, 30000);
 
     afterEach(async () => {
       // Assume SDK client/transport handles process termination gracefully
       // If processes leak, more explicit cleanup might be needed here
-    });
+    }, 30000);
 
     it('should create and initialize an instance with stdio transport', () => {
       expect(mcpClient).toBeInstanceOf(MCPClient);
-    });
+    }, 30000);
 
     it('should list tools via stdio', async () => {
       const result = await mcpClient.listTools();
@@ -40,7 +40,7 @@ describe('MCPClient', () => {
 
       // Expect the tools defined in mock-sdk-server.ts
       expect(result).toMatchSnapshot();
-    });
+    }, 30000);
 
     it('should call the "echo" tool via stdio', async () => {
       const toolName = 'echo';
@@ -52,7 +52,7 @@ describe('MCPClient', () => {
 
       const result = await mcpClient.callTool(toolName, toolArgs);
       expect(result).toEqual(expectedResult);
-    });
+    }, 30000);
 
     it('should call the "add" tool via stdio', async () => {
       const toolName = 'add';
@@ -62,7 +62,7 @@ describe('MCPClient', () => {
       expect(result).toEqual({
         content: [{ type: 'text', text: 'The sum is: 12' }],
       });
-    });
+    }, 30000);
   });
 
   // Error Handling tests remain the same...

package/src/locales/default/chat.ts

@@ -18,6 +18,7 @@ export default {
   availableAgents: '可用助手',
   backToBottom: '跳转至当前',
   chatList: {
+    expandMessage: '展开消息',
     longMessageDetail: '查看详情',
   },
   clearCurrentMessages: '清空当前会话消息',
@@ -188,9 +189,11 @@ export default {
   },
 
   messageAction: {
+    collapse: '收起消息',
     continueGeneration: '继续生成',
     delAndRegenerate: '删除并重新生成',
     deleteDisabledByThreads: '存在子话题，不能删除',
+    expand: '展开消息',
     regenerate: '重新生成',
   },
 

package/src/store/chat/slices/message/actions/publicApi.ts

@@ -43,6 +43,10 @@ export interface MessagePublicApiAction {
   updateMessageInput: (message: string) => void;
   modifyMessageContent: (id: string, content: string) => Promise<void>;
   toggleMessageEditing: (id: string, editing: boolean) => void;
+  /**
+   * Toggle message collapsed state
+   */
+  toggleMessageCollapsed: (id: string, collapsed?: boolean) => Promise<void>;
 
   // ===== Others ===== //
   copyMessage: (id: string, content: string) => Promise<void>;
@@ -241,4 +245,17 @@ export const messagePublicApi: StateCreator<
 
     await get().optimisticUpdateMessageContent(id, content);
   },
+
+  toggleMessageCollapsed: async (id, collapsed) => {
+    const message = displayMessageSelectors.getDisplayMessageById(id)(get());
+    if (!message) return;
+
+    // 如果没有传入 collapsed，则取反当前状态
+    const nextCollapsed = collapsed ?? !message.metadata?.collapsed;
+
+    // 直接调用现有的 optimisticUpdateMessageMetadata
+    await get().optimisticUpdateMessageMetadata(id, {
+      collapsed: nextCollapsed,
+    });
+  },
 });

package/src/store/chat/slices/message/selectors/displayMessage.ts

@@ -85,7 +85,7 @@ const activeDisplayMessages = (s: ChatStoreState): UIChatMessage[] => {
 /**
  * Get display message by ID (searches in messagesMap including assistantGroup children)
  */
-const getDisplayMessageById = (id: string) => (s: ChatStoreState) =>
+export const getDisplayMessageById = (id: string) => (s: ChatStoreState) =>
   chatHelpers.getMessageById(activeDisplayMessages(s), id);
 
 const lastDisplayMessageId = (s: ChatStoreState) => {

package/src/store/chat/slices/message/selectors/messageState.ts

@@ -1,6 +1,7 @@
 import type { ChatStoreState } from '../../../initialState';
 import { mainDisplayChatIDs } from './chat';
 import { getDbMessageByToolCallId } from './dbMessage';
+import { getDisplayMessageById } from './displayMessage';
 
 const isMessageEditing = (id: string) => (s: ChatStoreState) => s.messageEditingIds.includes(id);
 const isMessageLoading = (id: string) => (s: ChatStoreState) => s.messageLoadingIds.includes(id);
@@ -13,6 +14,11 @@ const isMessageInRAGFlow = (id: string) => (s: ChatStoreState) =>
 const isMessageInChatReasoning = (id: string) => (s: ChatStoreState) =>
   s.reasoningLoadingIds.includes(id);
 
+const isMessageCollapsed = (id: string) => (s: ChatStoreState) => {
+  const message = getDisplayMessageById(id)(s);
+  return message?.metadata?.collapsed ?? false;
+};
+
 const isPluginApiInvoking = (id: string) => (s: ChatStoreState) =>
   s.pluginApiLoadingIds.includes(id);
 
@@ -71,6 +77,7 @@ export const messageStateSelectors = {
   isHasMessageLoading,
   isInRAGFlow,
   isInToolsCalling,
+  isMessageCollapsed,
   isMessageContinuing,
   isMessageEditing,
   isMessageGenerating,

package/src/store/chat/slices/translate/action.test.ts

@@ -1,5 +1,3 @@
-import { chainLangDetect } from '@lobechat/prompts';
-import { chainTranslate } from '@lobechat/prompts';
 import { act, renderHook } from '@testing-library/react';
 import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -9,7 +7,7 @@ import { messageMapKey } from '@/store/chat/utils/messageMapKey';
 
 import { useChatStore } from '../../store';
 
-// Mock messageService 和 chatService
+// Mock messageService and chatService
 vi.mock('@/services/message', () => ({
   messageService: {
     updateMessageTTS: vi.fn(),
@@ -24,27 +22,20 @@ vi.mock('@/services/chat', () => ({
   },
 }));
 
-vi.mock('@/chains/langDetect', () => ({
-  chainLangDetect: vi.fn(),
-}));
-
-vi.mock('@/chains/translate', () => ({
-  chainTranslate: vi.fn(),
+vi.mock('@/store/user', () => ({
+  useUserStore: {
+    getState: vi.fn(() => ({})),
+  },
 }));
 
-// Mock supportLocales
-vi.mock('@/locales/options', () => ({
-  supportLocales: ['en-US', 'zh-CN'],
+vi.mock('@/store/user/selectors', () => ({
+  systemAgentSelectors: {
+    translation: vi.fn(() => ({})),
+  },
 }));
 
 beforeEach(() => {
   vi.clearAllMocks();
-  useChatStore.setState(
-    {
-      // ... 初始状态
-    },
-    false,
-  );
 });
 
 afterEach(() => {
@@ -53,26 +44,26 @@ afterEach(() => {
 
 describe('ChatEnhanceAction', () => {
   describe('translateMessage', () => {
-    it('should translate a message to the target language and refresh messages', async () => {
-      const { result } = renderHook(() => useChatStore());
+    it('should translate a message to the target language', async () => {
       const messageId = 'message-id';
       const targetLang = 'zh-CN';
       const messageContent = 'Hello World';
       const detectedLang = 'en-US';
+      const translatedText = '你好世界';
 
+      // Setup initial state
       act(() => {
         useChatStore.setState({
           activeId: 'session',
-          messagesMap: {
+          dbMessagesMap: {
             [messageMapKey('session')]: [
               {
                 id: messageId,
                 content: messageContent,
                 createdAt: Date.now(),
                 updatedAt: Date.now(),
-                role: 'user',
-                sessionId: 'test',
-                topicId: 'test',
+                role: 'assistant',
+                sessionId: 'session',
                 meta: {},
               },
             ],
@@ -80,21 +71,24 @@ describe('ChatEnhanceAction', () => {
         });
       });
 
-      (chatService.fetchPresetTaskResult as Mock).mockImplementation(({ params }) => {
-        if (params === chainLangDetect(messageContent)) {
-          return Promise.resolve(detectedLang);
-        }
-        if (params === chainTranslate(messageContent, targetLang)) {
-          return Promise.resolve('Hola Mundo');
-        }
-        return Promise.resolve(undefined);
+      // First call for language detection
+      (chatService.fetchPresetTaskResult as Mock).mockImplementationOnce(async ({ onFinish }) => {
+        if (onFinish) await onFinish(detectedLang);
       });
 
+      // Second call for translation
+      (chatService.fetchPresetTaskResult as Mock).mockImplementationOnce(async ({ onFinish }) => {
+        if (onFinish) await onFinish(translatedText);
+      });
+
+      const { result } = renderHook(() => useChatStore());
+
       await act(async () => {
         await result.current.translateMessage(messageId, targetLang);
       });
 
       expect(messageService.updateMessageTranslate).toHaveBeenCalled();
+      expect(chatService.fetchPresetTaskResult).toHaveBeenCalledTimes(2);
     });
   });
 

package/src/store/chat/slices/translate/action.ts

@@ -1,16 +1,16 @@
 import { chainLangDetect, chainTranslate } from '@lobechat/prompts';
 import { ChatTranslate, TraceNameMap, TracePayload } from '@lobechat/types';
+import { merge } from '@lobechat/utils';
 import { produce } from 'immer';
 import { StateCreator } from 'zustand/vanilla';
 
 import { supportLocales } from '@/locales/resources';
 import { chatService } from '@/services/chat';
 import { messageService } from '@/services/message';
-import { chatSelectors } from '@/store/chat/selectors';
+import { dbMessageSelectors } from '@/store/chat/selectors';
 import { ChatStore } from '@/store/chat/store';
 import { useUserStore } from '@/store/user';
 import { systemAgentSelectors } from '@/store/user/selectors';
-import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
 const n = setNamespace('enhance');
@@ -43,7 +43,7 @@ export const chatTranslate: StateCreator<
   translateMessage: async (id, targetLang) => {
     const { internal_toggleChatLoading, updateMessageTranslate, internal_dispatchMessage } = get();
 
-    const message = chatSelectors.getMessageById(id)(get());
+    const message = dbMessageSelectors.getDbMessageById(id)(get());
     if (!message) return;
 
     // Get current agent for translation