@lobehub/lobehub 2.0.0-next.65 → 2.0.0-next.67

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

@@ -1,18 +1,8 @@
 'use client';
 
 import isEqual from 'fast-deep-equal';
-import {
-  ReactNode,
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { Flexbox } from 'react-layout-kit';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { ReactNode, memo, useCallback, useEffect, useRef, useState } from 'react';
+import { VList, VListHandle } from 'virtua';
 
 import WideScreenContainer from '@/features/Conversation/components/WideScreenContainer';
 import { useChatStore } from '@/store/chat';
@@ -20,11 +10,7 @@ import { displayMessageSelectors } from '@/store/chat/selectors';
 
 import AutoScroll from '../AutoScroll';
 import SkeletonList from '../SkeletonList';
-import {
-  VirtuosoContext,
-  resetVirtuosoVisibleItems,
-  setVirtuosoGlobalRef,
-} from './VirtuosoContext';
+import { VirtuaContext, resetVirtuaVisibleItems, setVirtuaGlobalRef } from './VirtuosoContext';
 
 interface VirtualizedListProps {
   dataSource: string[];
@@ -32,78 +18,124 @@ interface VirtualizedListProps {
   mobile?: boolean;
 }
 
-const List = forwardRef(({ ...props }, ref) => {
-  return (
-    <Flexbox>
-      <WideScreenContainer id={'chatlist-list'} ref={ref} {...props} />
-    </Flexbox>
-  );
-});
-
 const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemContent }) => {
-  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const virtuaRef = useRef<VListHandle>(null);
   const prevDataLengthRef = useRef(dataSource.length);
   const [atBottom, setAtBottom] = useState(true);
   const [isScrolling, setIsScrolling] = useState(false);
+  // eslint-disable-next-line no-undef
+  const scrollEndTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   const [isFirstLoading, isCurrentChatLoaded] = useChatStore((s) => [
     displayMessageSelectors.currentChatLoadingState(s),
     displayMessageSelectors.isCurrentDisplayChatLoaded(s),
   ]);
 
-  const getFollowOutput = useCallback(() => {
-    const newFollowOutput = dataSource.length > prevDataLengthRef.current ? 'auto' : false;
+  const atBottomThreshold = 200 * (mobile ? 2 : 1);
+
+  // Check if at bottom based on scroll position
+  const checkAtBottom = useCallback(() => {
+    const ref = virtuaRef.current;
+    if (!ref) return false;
+
+    const scrollOffset = ref.scrollOffset;
+    const scrollSize = ref.scrollSize;
+    const viewportSize = ref.viewportSize;
+
+    return scrollSize - scrollOffset - viewportSize <= atBottomThreshold;
+  }, [atBottomThreshold]);
+
+  // Handle scroll events
+  const handleScroll = useCallback(() => {
+    setIsScrolling(true);
+
+    // Check if at bottom
+    const isAtBottom = checkAtBottom();
+    setAtBottom(isAtBottom);
+
+    // Clear existing timer
+    if (scrollEndTimerRef.current) {
+      clearTimeout(scrollEndTimerRef.current);
+    }
+
+    // Set new timer for scroll end
+    scrollEndTimerRef.current = setTimeout(() => {
+      setIsScrolling(false);
+    }, 150);
+  }, [checkAtBottom]);
+
+  const handleScrollEnd = useCallback(() => {
+    setIsScrolling(false);
+  }, []);
+
+  // Auto scroll to bottom when new messages arrive
+  useEffect(() => {
+    const shouldScroll = dataSource.length > prevDataLengthRef.current;
     prevDataLengthRef.current = dataSource.length;
-    return newFollowOutput;
+
+    if (shouldScroll && virtuaRef.current) {
+      virtuaRef.current.scrollToIndex(dataSource.length - 2, { align: 'start', smooth: true });
+    }
   }, [dataSource.length]);
 
   const scrollToBottom = useCallback(
     (behavior: 'auto' | 'smooth' = 'smooth') => {
       if (atBottom) return;
-      if (!virtuosoRef.current) return;
-      virtuosoRef.current.scrollToIndex({ align: 'end', behavior, index: 'LAST' });
+      if (!virtuaRef.current) return;
+      virtuaRef.current.scrollToIndex(dataSource.length - 1, {
+        align: 'end',
+        smooth: behavior === 'smooth',
+      });
     },
-    [atBottom],
+    [atBottom, dataSource.length],
   );
 
-  const components = useMemo(() => ({ List }), []);
-  const computeItemKey = useCallback((index: number, item: string) => item, []);
-
   useEffect(() => {
-    setVirtuosoGlobalRef(virtuosoRef);
+    setVirtuaGlobalRef(virtuaRef);
 
     return () => {
-      setVirtuosoGlobalRef(null);
+      setVirtuaGlobalRef(null);
     };
-  }, [virtuosoRef]);
+  }, [virtuaRef]);
 
   useEffect(() => {
     return () => {
-      resetVirtuosoVisibleItems();
+      resetVirtuaVisibleItems();
+      if (scrollEndTimerRef.current) {
+        clearTimeout(scrollEndTimerRef.current);
+      }
     };
   }, []);
 
-  // overscan should be 2 times the height of the window
-  const overscan = typeof window !== 'undefined' ? window.innerHeight * 2 : 0;
+  // Scroll to bottom on initial render
+  useEffect(() => {
+    if (virtuaRef.current && dataSource.length > 0) {
+      virtuaRef.current.scrollToIndex(dataSource.length - 1, { align: 'end' });
+    }
+  }, [isCurrentChatLoaded]);
 
   // first time loading or not loaded
   if (isFirstLoading || !isCurrentChatLoaded) return <SkeletonList mobile={mobile} />;
 
   return (
-    <VirtuosoContext value={virtuosoRef}>
-      <Virtuoso
-        atBottomStateChange={setAtBottom}
-        atBottomThreshold={200 * (mobile ? 2 : 1)}
-        components={components}
-        computeItemKey={computeItemKey}
+    <VirtuaContext value={virtuaRef}>
+      <VList
+        // bufferSize should be 2 times the height of the window
+        bufferSize={typeof window !== 'undefined' ? window.innerHeight : 0}
         data={dataSource}
-        followOutput={getFollowOutput}
-        increaseViewportBy={overscan}
-        initialTopMostItemIndex={dataSource?.length - 1}
-        isScrolling={setIsScrolling}
-        itemContent={itemContent}
-        ref={virtuosoRef}
-      />
+        onScroll={handleScroll}
+        onScrollEnd={handleScrollEnd}
+        ref={virtuaRef}
+        reverse
+        style={{ height: '100%' }}
+      >
+        {(data, index) => (
+          <WideScreenContainer key={data} style={{ position: 'relative' }}>
+            {itemContent(index, data, { virtuaRef })}
+          </WideScreenContainer>
+        )}
+      </VList>
+
       <WideScreenContainer
         onChange={() => {
           if (!atBottom) return;
@@ -117,21 +149,23 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
           atBottom={atBottom}
           isScrolling={isScrolling}
           onScrollToBottom={(type) => {
-            const virtuoso = virtuosoRef.current;
+            const virtua = virtuaRef.current;
+            if (!virtua) return;
+
             switch (type) {
               case 'auto': {
-                virtuoso?.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
+                virtua.scrollToIndex(dataSource.length - 1, { align: 'end' });
                 break;
               }
               case 'click': {
-                virtuoso?.scrollToIndex({ align: 'end', behavior: 'smooth', index: 'LAST' });
+                virtua.scrollToIndex(dataSource.length - 1, { align: 'end', smooth: true });
                 break;
               }
             }
           }}
         />
       </WideScreenContainer>
-    </VirtuosoContext>
+    </VirtuaContext>
   );
 }, isEqual);
 

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { memo, useEffect } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
@@ -32,15 +33,18 @@ const WideScreenContainer = memo<WideScreenContainerProps>(
     }, [wideScreen]);
 
     return (
-      <Flexbox
-        className={cx(styles.container, className)}
-        width={wideScreen ? '100%' : `min(${CONVERSATION_MIN_WIDTH}px, 100%)`}
-        {...rest}
-      >
-        {children}
+      <Flexbox width={'100%'}>
+        <Flexbox
+          className={cx(styles.container, className)}
+          width={wideScreen ? '100%' : `min(${CONVERSATION_MIN_WIDTH}px, 100%)`}
+          {...rest}
+        >
+          {children}
+        </Flexbox>
       </Flexbox>
     );
   },
+  isEqual,
 );
 
 export default WideScreenContainer;

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/features/Conversation/hooks/useDoubleClickEdit.ts

@@ -2,7 +2,7 @@ import { MouseEventHandler, use, useCallback } from 'react';
 
 import { useChatStore } from '@/store/chat';
 
-import { VirtuosoContext } from '../components/VirtualizedList/VirtuosoContext';
+import { VirtuaContext } from '../components/VirtualizedList/VirtuosoContext';
 
 interface UseDoubleClickEditProps {
   disableEditing?: boolean;
@@ -20,7 +20,7 @@ export const useDoubleClickEdit = ({
   index,
 }: UseDoubleClickEditProps) => {
   const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
-  const virtuosoRef = use(VirtuosoContext);
+  const virtuaRef = use(VirtuaContext);
 
   return useCallback<MouseEventHandler<HTMLDivElement>>(
     (e) => {
@@ -35,7 +35,7 @@ export const useDoubleClickEdit = ({
 
       toggleMessageEditing(id, true);
 
-      virtuosoRef?.current?.scrollIntoView({ align: 'start', behavior: 'auto', index });
+      virtuaRef?.current?.scrollToIndex(index, { align: 'start' });
     },
     [role, disableEditing],
   );

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/aiChat/actions/conversationLifecycle.ts

@@ -1,6 +1,6 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
 // Disable the auto sort key eslint rule to make the code more logic and readable
-import { DEFAULT_AGENT_CHAT_CONFIG, INBOX_SESSION_ID } from '@lobechat/const';
+import { DEFAULT_AGENT_CHAT_CONFIG, INBOX_SESSION_ID, LOADING_FLAT } from '@lobechat/const';
 import {
   ChatImageItem,
   ChatVideoItem,
@@ -124,6 +124,14 @@ export const conversationLifecycle: StateCreator<
       imageList: tempImages.length > 0 ? tempImages : undefined,
       videoList: tempVideos.length > 0 ? tempVideos : undefined,
     });
+    get().optimisticCreateTmpMessage({
+      content: LOADING_FLAT,
+      role: 'assistant',
+      sessionId: activeId,
+      // if there is activeTopicId，then add topicId to message
+      topicId: activeTopicId,
+      threadId: activeThreadId,
+    });
     get().internal_toggleMessageLoading(true, tempId);
 
     const operationKey = messageMapKey(activeId, activeTopicId);

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