@lobehub/lobehub 2.0.0-next.45 → 2.0.0-next.46

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 2.0.0-next.46](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.45...v2.0.0-next.46)
+
+<sup>Released on **2025-11-11**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Fix thread display.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Fix thread display, closes [#10153](https://github.com/lobehub/lobe-chat/issues/10153) ([8fda83e](https://github.com/lobehub/lobe-chat/commit/8fda83e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.45](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.44...v2.0.0-next.45)
 
 <sup>Released on **2025-11-10**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Fix thread display."
+      ]
+    },
+    "date": "2025-11-11",
+    "version": "2.0.0-next.46"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.45",
+  "version": "2.0.0-next.46",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/chat/components/conversation/features/ChatList/ChatItem/Thread.tsx

@@ -39,7 +39,7 @@ const Thread = memo<ThreadProps>(({ id, placement, style }) => {
       direction={placement === 'end' ? 'horizontal-reverse' : 'horizontal'}
       gap={12}
       paddingInline={16}
-      style={{ paddingBottom: 16, ...style }}
+      style={{ marginTop: -12, paddingBottom: 16, ...style }}
     >
       <div style={{ width: 40 }} />
       <Flexbox className={styles.container} gap={4} padding={4} style={{ width: 'fit-content' }}>

package/src/app/[variants]/(main)/chat/components/conversation/features/ChatList/ChatItem/index.tsx

@@ -1,13 +1,13 @@
 import { createStyles } from 'antd-style';
 import React, { memo } from 'react';
 
-import SupervisorThinkingTag from '@/app/[variants]/(main)/chat/components/conversation/features/ChatList/ChatItem/OrchestratorThinking';
 import { ChatItem } from '@/features/Conversation';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors, threadSelectors } from '@/store/chat/selectors';
+import { displayMessageSelectors, threadSelectors } from '@/store/chat/selectors';
 
+import SupervisorThinkingTag from './OrchestratorThinking';
 import Thread from './Thread';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => {
@@ -26,15 +26,16 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => {
         content: '';
 
         position: absolute;
-        inset-block: 56px 50px;
+        inset-block-end: 60px;
 
-        width: 32px;
+        width: 38px;
+        height: 53px;
         border-block-end: 2px solid ${borderColor};
       }
     `,
     start: css`
       &::after {
-        inset-inline-start: 36px;
+        inset-inline-start: 30px;
         border-inline-start: 2px solid ${borderColor};
         border-end-start-radius: 8px;
       }
@@ -52,7 +53,7 @@ const MainChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
 
   const [showThread, historyLength] = useChatStore((s) => [
     threadSelectors.hasThreadBySourceMsgId(id)(s),
-    chatSelectors.mainDisplayChatIDs(s).length,
+    displayMessageSelectors.mainDisplayChatIDs(s).length,
   ]);
 
   const [displayMode, enableHistoryDivider] = useAgentStore((s) => [
@@ -60,7 +61,7 @@ const MainChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
     agentChatConfigSelectors.enableHistoryDivider(historyLength, index)(s),
   ]);
 
-  const userRole = useChatStore((s) => chatSelectors.getMessageById(id)(s)?.role);
+  const userRole = useChatStore((s) => displayMessageSelectors.getDisplayMessageById(id)(s)?.role);
 
   const placement = displayMode === 'chat' && userRole === 'user' ? 'end' : 'start';
 
@@ -71,15 +72,7 @@ const MainChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
       <ChatItem
         className={showThread ? cx(styles.line, styles[placement]) : ''}
         enableHistoryDivider={enableHistoryDivider}
-        endRender={
-          showThread && (
-            <Thread
-              id={id}
-              placement={placement}
-              style={{ marginTop: displayMode === 'docs' ? 12 : undefined }}
-            />
-          )
-        }
+        endRender={showThread && <Thread id={id} placement={placement} />}
         id={id}
         index={index}
       />

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

@@ -53,11 +53,9 @@ export const AssistantActionsBar = memo<AssistantActionsProps>(({ id, data, inde
   const items = useMemo(() => {
     if (hasTools) return [delAndRegenerate, copy];
 
-    return [
-      edit,
-      copy,
-      // inThread || isGroupSession ? null : branching
-    ].filter(Boolean) as ActionIconGroupItemType[];
+    return [edit, copy, inThread || isGroupSession ? null : branching].filter(
+      Boolean,
+    ) as ActionIconGroupItemType[];
   }, [inThread, hasTools, isGroupSession, delAndRegenerate, copy, edit, branching]);
 
   const { t } = useTranslation('common');

package/src/features/Conversation/Messages/Assistant/Extra/index.test.tsx

@@ -24,7 +24,7 @@ vi.mock('@/store/chat', () => ({
   useChatStore: vi.fn(),
 }));
 
-const mockData: UIChatMessage = {
+const mockData = {
   content: 'test-content',
   createdAt: 0,
   id: 'abc',
@@ -53,8 +53,8 @@ describe('AssistantMessageExtra', () => {
     expect(screen.queryByText('Translate Component')).toBeNull();
   });
 
-  it('should render Usage component if extra.model exists', async () => {
-    render(<AssistantMessageExtra {...mockData} extra={{ model: 'gpt-4', provider: 'openai' }} />);
+  it('should render Usage component if model prop exists', async () => {
+    render(<AssistantMessageExtra {...mockData} model="gpt-4" provider="openai" />);
 
     expect(screen.getByText('Usage Component')).toBeInTheDocument();
   });

package/src/features/Conversation/Messages/Assistant/Extra/index.tsx

@@ -1,4 +1,4 @@
-import { type MessageMetadata } from '@lobechat/types';
+import { ModelPerformance, ModelUsage } from '@lobechat/types';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -14,18 +14,21 @@ interface AssistantMessageExtraProps {
   content: string;
   extra?: any;
   id: string;
-  metadata?: MessageMetadata | null;
+  model?: string;
+  performance?: ModelPerformance;
+  provider?: string;
   tools?: any[];
+  usage?: ModelUsage;
 }
 
 export const AssistantMessageExtra = memo<AssistantMessageExtraProps>(
-  ({ extra, id, content, metadata, tools }) => {
+  ({ extra, id, content, performance, usage, tools, provider, model }) => {
     const loading = useChatStore(messageStateSelectors.isMessageGenerating(id));
 
     return (
       <Flexbox gap={8} style={{ marginTop: !!tools?.length ? 8 : 4 }}>
-        {content !== LOADING_FLAT && extra?.model && (
-          <Usage metadata={metadata || {}} model={extra?.model} provider={extra.provider!} />
+        {content !== LOADING_FLAT && model && (
+          <Usage model={model} performance={performance} provider={provider!} usage={usage} />
         )}
         <>
           {!!extra?.tts && (

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

@@ -20,7 +20,7 @@ import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { messageStateSelectors } from '@/store/chat/slices/message/selectors';
+import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 import { chatGroupSelectors, useChatGroupStore } from '@/store/chatGroup';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
@@ -48,28 +48,38 @@ const isHtmlCode = (content: string, language: string) => {
 };
 const MOBILE_AVATAR_SIZE = 32;
 
-interface AssistantMessageProps extends UIChatMessage {
+interface AssistantMessageProps {
   disableEditing?: boolean;
+  id: string;
   index: number;
-  showTitle?: boolean;
 }
-const AssistantMessage = memo<AssistantMessageProps>((props) => {
+
+const AssistantMessage = memo<AssistantMessageProps>(({ id, index, disableEditing }) => {
+  const item = useChatStore(
+    displayMessageSelectors.getDisplayMessageById(id),
+    isEqual,
+  ) as UIChatMessage;
+
   const {
     error,
-    showTitle,
-    id,
     role,
     search,
-    disableEditing,
-    index,
     content,
     createdAt,
     tools,
     extra,
-    metadata,
+    model,
+    provider,
     meta,
     targetId,
-  } = props;
+    groupId,
+    performance,
+    usage,
+    metadata,
+  } = item;
+
+  const showTitle = !!groupId;
+
   const avatar = meta;
   const { t } = useTranslation('chat');
   const { mobile } = useResponsive();
@@ -199,11 +209,12 @@ const AssistantMessage = memo<AssistantMessageProps>((props) => {
 
   const renderMessage = useCallback(
     (editableContent: ReactNode) => (
-      <AssistantMessageContent {...props} editableContent={editableContent} />
+      <AssistantMessageContent {...item} editableContent={editableContent} />
     ),
-    [props],
+    [item],
   );
-  const errorMessage = <ErrorMessageExtra data={props} />;
+  const errorMessage = <ErrorMessageExtra data={item} />;
+
   return (
     <Flexbox className={styles.container} gap={mobile ? 6 : 12}>
       <Flexbox gap={4} horizontal>
@@ -254,8 +265,11 @@ const AssistantMessage = memo<AssistantMessageProps>((props) => {
                     content={content}
                     extra={extra}
                     id={id}
-                    metadata={metadata}
+                    model={model!}
+                    performance={performance! || metadata}
+                    provider={provider!}
                     tools={tools}
+                    usage={usage! || metadata}
                   />
                 </>
               }
@@ -268,7 +282,7 @@ const AssistantMessage = memo<AssistantMessageProps>((props) => {
         </Flexbox>
         {!disableEditing && !editing && (
           <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
-            <AssistantActionsBar data={props} id={id} index={index} />
+            <AssistantActionsBar data={item} id={id} index={index} />
           </Flexbox>
         )}
       </Flexbox>

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

@@ -46,11 +46,9 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
   const items = useMemo(() => {
     if (hasTools) return [delAndRegenerate, copy];
 
-    return [
-      edit,
-      copy,
-      // inThread || isGroupSession ? null : branching
-    ].filter(Boolean) as ActionIconGroupItemType[];
+    return [edit, copy, inThread || isGroupSession ? null : branching].filter(
+      Boolean,
+    ) as ActionIconGroupItemType[];
   }, [inThread, hasTools, isGroupSession, delAndRegenerate, copy, edit, branching]);
 
   const { t } = useTranslation('common');

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

@@ -29,28 +29,20 @@ import EditState from './EditState';
 
 const MOBILE_AVATAR_SIZE = 32;
 
-interface GroupMessageProps extends UIChatMessage {
+interface GroupMessageProps {
   disableEditing?: boolean;
+  id: string;
   index: number;
-  showTitle?: boolean;
 }
 
-const GroupMessage = memo<GroupMessageProps>((props) => {
-  const {
-    showTitle,
-    id,
-    disableEditing,
-    usage,
-    index,
-    createdAt,
-    meta,
-    children,
-    performance,
-    model,
-    provider,
-  } = props;
+const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing }) => {
+  const item = useChatStore(
+    displayMessageSelectors.getDisplayMessageById(id),
+    isEqual,
+  ) as UIChatMessage;
+  const { usage, createdAt, meta, children, performance, model, provider } = item;
   const avatar = meta;
-  console.log('render');
+
   const { mobile } = useResponsive();
   const placement = 'left';
   const type = useAgentStore(agentChatConfigSelectors.displayMode);
@@ -60,7 +52,7 @@ const GroupMessage = memo<GroupMessageProps>((props) => {
     editing: false,
     placement,
     primary: false,
-    showTitle,
+    showTitle: true,
     time: createdAt,
     title: avatar.title,
     variant,
@@ -129,14 +121,14 @@ const GroupMessage = memo<GroupMessageProps>((props) => {
           )}
 
           {model && (
-            <Usage metadata={{ ...performance, ...usage }} model={model} provider={provider!} />
+            <Usage model={model} performance={performance} provider={provider!} usage={usage} />
           )}
           {!disableEditing && (
             <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
               <GroupActionsBar
                 contentBlock={lastAssistantMsg}
                 contentId={contentId}
-                data={props}
+                data={item}
                 id={id}
                 index={index}
               />

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

@@ -4,6 +4,7 @@ import { UIChatMessage } from '@lobechat/types';
 import { ModelIcon } from '@lobehub/icons';
 import { Button, Text } from '@lobehub/ui';
 import { createStyles, useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { LucideRefreshCw } from 'lucide-react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +13,7 @@ import { Flexbox } from 'react-layout-kit';
 import { DEFAULT_SUPERVISOR_AVATAR } from '@/const/meta';
 import { ChatItem } from '@/features/ChatItem';
 import { useChatStore } from '@/store/chat';
+import { displayMessageSelectors } from '@/store/chat/slices/message/selectors';
 import { ChatErrorType } from '@/types/fetch';
 
 import TodoList, { TodoData } from './TodoList';
@@ -54,13 +56,20 @@ const parseMarkdownTodos = (content: string): TodoData => {
   };
 };
 
-interface SupervisorMessageProps extends UIChatMessage {
+interface SupervisorMessageProps {
   disableEditing?: boolean;
+  id: string;
   index: number;
 }
 
-const SupervisorMessage = memo<SupervisorMessageProps>((props) => {
-  const { id, content, error, groupId, role, updatedAt, createdAt } = props;
+const SupervisorMessage = memo<SupervisorMessageProps>(({ id }) => {
+  const item = useChatStore(
+    displayMessageSelectors.getDisplayMessageById(id),
+    isEqual,
+  ) as UIChatMessage;
+
+  const { content, error, groupId, role, updatedAt, createdAt } = item;
+
   const { t } = useTranslation('chat');
   const theme = useTheme();
   const { styles } = useStyles();
@@ -128,8 +137,8 @@ const SupervisorMessage = memo<SupervisorMessageProps>((props) => {
 
   // Render todo message with dedicated component
   if (isTodoMessage && todoData) {
-    const model = props.extra?.model;
-    const provider = props.extra?.provider;
+    const model = item.extra?.model;
+    const provider = item.extra?.provider;
     const hasModelInfo = model || provider;
 
     return (

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

@@ -1,6 +1,7 @@
 import { UIChatMessage } from '@lobechat/types';
 import { Tag } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { ReactNode, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -15,7 +16,7 @@ import { useUserAvatar } from '@/hooks/useUserAvatar';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { messageStateSelectors } from '@/store/chat/selectors';
+import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { useUserStore } from '@/store/user';
@@ -28,8 +29,9 @@ import { UserMessageExtra } from './Extra';
 import { MarkdownRender as UserMarkdownRender } from './MarkdownRender';
 import { UserMessageContent } from './MessageContent';
 
-interface UserMessageProps extends UIChatMessage {
+interface UserMessageProps {
   disableEditing?: boolean;
+  id: string;
   index: number;
 }
 
@@ -43,9 +45,13 @@ const remarkPlugins = markdownElements
   .map((element) => element.remarkPlugin)
   .filter(Boolean);
 
-const UserMessage = memo<UserMessageProps>((props) => {
-  const { id, ragQuery, content, createdAt, error, role, index, extra, disableEditing, targetId } =
-    props;
+const UserMessage = memo<UserMessageProps>(({ id, disableEditing, index }) => {
+  const item = useChatStore(
+    displayMessageSelectors.getDisplayMessageById(id),
+    isEqual,
+  ) as UIChatMessage;
+
+  const { ragQuery, content, createdAt, error, role, extra, targetId } = item;
 
   const { t } = useTranslation('chat');
   const { mobile } = useResponsive();
@@ -97,9 +103,9 @@ const UserMessage = memo<UserMessageProps>((props) => {
 
   const renderMessage = useCallback(
     (editableContent: ReactNode) => (
-      <UserMessageContent {...props} editableContent={editableContent} />
+      <UserMessageContent {...item} editableContent={editableContent} />
     ),
-    [props],
+    [item],
   );
 
   const components = useMemo(
@@ -178,7 +184,7 @@ const UserMessage = memo<UserMessageProps>((props) => {
       </Flexbox>
 
       <Flexbox direction={'horizontal-reverse'}>
-        <Actions data={props} disableEditing={disableEditing} id={id} index={index} />
+        <Actions data={item} disableEditing={disableEditing} id={id} index={index} />
       </Flexbox>
     </Flexbox>
   );

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

@@ -10,7 +10,7 @@ import {
   removeVirtuosoVisibleItem,
   upsertVirtuosoVisibleItem,
 } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
-import { useChatStore } from '@/store/chat';
+import { getChatStoreState, useChatStore } from '@/store/chat';
 import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import History from '../components/History';
@@ -56,9 +56,10 @@ const Item = memo<ChatListItemProps>(
     const { styles, cx } = useStyles();
     const containerRef = useRef<HTMLDivElement | null>(null);
 
-    const item = useChatStore(displayMessageSelectors.getDisplayMessageById(id), isEqual);
-
-    const [isMessageLoading] = useChatStore((s) => [messageStateSelectors.isMessageLoading(id)(s)]);
+    const [isMessageLoading, role] = useChatStore((s) => [
+      messageStateSelectors.isMessageLoading(id)(s),
+      displayMessageSelectors.getDisplayMessageById(id)(s)?.role,
+    ]);
 
     // ======================= Performance Optimization ======================= //
     // these useMemo/useCallback are all for the performance optimization
@@ -104,6 +105,8 @@ const Item = memo<ChatListItemProps>(
     }, [index]);
 
     const onContextMenu = useCallback(async () => {
+      const item = displayMessageSelectors.getDisplayMessageById(id)(getChatStoreState());
+
       if (isDesktop && item) {
         const { electronSystemService } = await import('@/services/electron/system');
 
@@ -114,45 +117,31 @@ const Item = memo<ChatListItemProps>(
           role: item.role,
         });
       }
-    }, [id, item]);
+    }, [id]);
 
     const renderContent = useMemo(() => {
-      switch (item?.role) {
+      switch (role) {
         case 'user': {
-          return <UserMessage {...item} disableEditing={disableEditing} index={index} />;
+          return <UserMessage disableEditing={disableEditing} id={id} index={index} />;
         }
 
         case 'assistant': {
-          return (
-            <AssistantMessage
-              {...item}
-              disableEditing={disableEditing}
-              index={index}
-              showTitle={item.groupId ? true : false}
-            />
-          );
+          return <AssistantMessage disableEditing={disableEditing} id={id} index={index} />;
         }
 
         case 'assistantGroup': {
-          return (
-            <GroupMessage
-              {...item}
-              disableEditing={disableEditing}
-              index={index}
-              showTitle={item.groupId ? true : false}
-            />
-          );
+          return <GroupMessage disableEditing={disableEditing} id={id} index={index} />;
         }
 
         case 'supervisor': {
-          return <SupervisorMessage {...item} disableEditing={disableEditing} index={index} />;
+          return <SupervisorMessage disableEditing={disableEditing} id={id} index={index} />;
         }
       }
 
       return null;
-    }, [item]);
+    }, [role, disableEditing, id, index]);
 
-    if (!item) return;
+    if (!role) return;
 
     return (
       <InPortalThreadContext.Provider value={inPortalThread}>
@@ -169,6 +158,7 @@ const Item = memo<ChatListItemProps>(
       </InPortalThreadContext.Provider>
     );
   },
+  isEqual,
 );
 
 Item.displayName = 'ChatItem';

package/src/features/Conversation/components/Extras/Usage/UsageDetail/index.tsx

@@ -1,4 +1,4 @@
-import { MessageMetadata } from '@lobechat/types';
+import { ModelPerformance, ModelUsage } from '@lobechat/types';
 import { Icon } from '@lobehub/ui';
 import { Divider, Popover } from 'antd';
 import { useTheme } from 'antd-style';
@@ -20,12 +20,13 @@ import TokenProgress, { TokenProgressItem } from './TokenProgress';
 import { getDetailsToken } from './tokens';
 
 interface TokenDetailProps {
-  meta: MessageMetadata;
   model: string;
+  performance?: ModelPerformance;
   provider: string;
+  usage: ModelUsage;
 }
 
-const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
+const TokenDetail = memo<TokenDetailProps>(({ usage, performance, model, provider }) => {
   const { t } = useTranslation('chat');
   const theme = useTheme();
   const isMobile = useIsMobile();
@@ -37,7 +38,7 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
   const modelCard = useAiInfraStore(aiModelSelectors.getModelCard(model, provider));
   const isShowCredit = useGlobalStore(systemStatusSelectors.isShowCredit) && !!modelCard?.pricing;
 
-  const detailTokens = getDetailsToken(meta, modelCard);
+  const detailTokens = getDetailsToken(usage, modelCard);
   const inputDetails = [
     !!detailTokens.inputAudio && {
       color: theme.cyan9,
@@ -130,8 +131,8 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
     2,
   );
 
-  const tps = meta?.tps ? formatNumber(meta.tps, 2) : undefined;
-  const ttft = meta?.ttft ? formatNumber(meta.ttft / 1000, 2) : undefined;
+  const tps = performance?.tps ? formatNumber(performance.tps, 2) : undefined;
+  const ttft = performance?.ttft ? formatNumber(performance.ttft / 1000, 2) : undefined;
 
   return (
     <Popover

package/src/features/Conversation/components/Extras/Usage/UsageDetail/tokens.ts

@@ -1,4 +1,4 @@
-import type { ModelTokensUsage } from '@lobechat/types';
+import { ModelUsage } from '@lobechat/types';
 import { LobeDefaultAiModelListItem } from 'model-bank';
 
 import { getAudioInputUnitRate, getAudioOutputUnitRate } from '@/utils/pricing';
@@ -11,10 +11,7 @@ const calcCredit = (token: number, pricing?: number) => {
   return parseInt((token * pricing).toFixed(0));
 };
 
-export const getDetailsToken = (
-  usage: ModelTokensUsage,
-  modelCard?: LobeDefaultAiModelListItem,
-) => {
+export const getDetailsToken = (usage: ModelUsage, modelCard?: LobeDefaultAiModelListItem) => {
   const inputTextTokens = usage.inputTextTokens || (usage as any).inputTokens || 0;
   const totalInputTokens = usage.totalInputTokens || (usage as any).inputTokens || 0;
 

package/src/features/Conversation/components/Extras/Usage/index.tsx

@@ -1,6 +1,7 @@
-import { MessageMetadata } from '@lobechat/types';
+import { ModelPerformance, ModelUsage } from '@lobechat/types';
 import { ModelIcon } from '@lobehub/icons';
 import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -14,12 +15,13 @@ export const useStyles = createStyles(({ token, css, cx }) => ({
 }));
 
 interface UsageProps {
-  metadata: MessageMetadata;
   model: string;
+  performance?: ModelPerformance;
   provider: string;
+  usage?: ModelUsage;
 }
 
-const Usage = memo<UsageProps>(({ model, metadata, provider }) => {
+const Usage = memo<UsageProps>(({ model, usage, performance, provider }) => {
   const { styles } = useStyles();
 
   return (
@@ -35,11 +37,16 @@ const Usage = memo<UsageProps>(({ model, metadata, provider }) => {
         {model}
       </Center>
 
-      {!!metadata.totalTokens && (
-        <TokenDetail meta={metadata} model={model as string} provider={provider} />
+      {!!usage?.totalTokens && (
+        <TokenDetail
+          model={model as string}
+          performance={performance}
+          provider={provider}
+          usage={usage}
+        />
       )}
     </Flexbox>
   );
-});
+}, isEqual);
 
 export default Usage;

package/src/server/modules/ContentChunk/index.test.ts

@@ -0,0 +1,372 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { NewChunkItem, NewUnstructuredChunkItem } from '@/database/schemas';
+import { knowledgeEnv } from '@/envs/knowledge';
+import { ChunkingLoader } from '@/libs/langchain';
+import { ChunkingStrategy, Unstructured } from '@/libs/unstructured';
+
+import { ContentChunk } from './index';
+
+// Mock the dependencies
+vi.mock('@/libs/unstructured');
+vi.mock('@/libs/langchain');
+vi.mock('@/envs/knowledge', () => ({
+  knowledgeEnv: {
+    FILE_TYPE_CHUNKING_RULES: '',
+    UNSTRUCTURED_API_KEY: 'test-api-key',
+    UNSTRUCTURED_SERVER_URL: 'https://test.unstructured.io',
+  },
+}));
+
+describe('ContentChunk', () => {
+  let contentChunk: ContentChunk;
+  let mockUnstructuredPartition: ReturnType<typeof vi.fn>;
+  let mockLangChainPartition: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Setup Unstructured mock
+    mockUnstructuredPartition = vi.fn();
+    (Unstructured as unknown as ReturnType<typeof vi.fn>).mockImplementation(() => ({
+      partition: mockUnstructuredPartition,
+    }));
+
+    // Setup LangChain mock
+    mockLangChainPartition = vi.fn();
+    (ChunkingLoader as unknown as ReturnType<typeof vi.fn>).mockImplementation(() => ({
+      partitionContent: mockLangChainPartition,
+    }));
+
+    contentChunk = new ContentChunk();
+  });
+
+  describe('constructor', () => {
+    it('should initialize with Unstructured and LangChain clients', () => {
+      expect(Unstructured).toHaveBeenCalledTimes(1);
+      expect(ChunkingLoader).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('chunkContent', () => {
+    const mockFileContent = new Uint8Array([1, 2, 3, 4, 5]);
+    const mockFilename = 'test-document.pdf';
+
+    it('should use default langchain service when no rules are configured', async () => {
+      const mockLangChainResult = [
+        {
+          id: 'chunk-1',
+          metadata: { source: 'test' },
+          pageContent: 'Test content chunk 1',
+        },
+        {
+          id: 'chunk-2',
+          metadata: { source: 'test' },
+          pageContent: 'Test content chunk 2',
+        },
+      ];
+
+      mockLangChainPartition.mockResolvedValue(mockLangChainResult);
+
+      const result = await contentChunk.chunkContent({
+        content: mockFileContent,
+        fileType: 'application/pdf',
+        filename: mockFilename,
+      });
+
+      expect(mockLangChainPartition).toHaveBeenCalledWith(mockFilename, mockFileContent);
+      expect(result.chunks).toHaveLength(2);
+      expect(result.chunks[0]).toMatchObject({
+        id: 'chunk-1',
+        index: 0,
+        metadata: { source: 'test' },
+        text: 'Test content chunk 1',
+        type: 'LangChainElement',
+      });
+      expect(result.unstructuredChunks).toBeUndefined();
+    });
+
+    it('should use langchain when unstructured is not configured', async () => {
+      // Temporarily mock env to disable unstructured
+      vi.mocked(knowledgeEnv).UNSTRUCTURED_API_KEY = '';
+
+      const mockLangChainResult = [
+        {
+          id: 'chunk-1',
+          metadata: { source: 'test' },
+          pageContent: 'LangChain content',
+        },
+      ];
+
+      mockLangChainPartition.mockResolvedValue(mockLangChainResult);
+
+      const result = await contentChunk.chunkContent({
+        content: mockFileContent,
+        fileType: 'application/pdf',
+        filename: mockFilename,
+      });
+
+      expect(mockLangChainPartition).toHaveBeenCalledWith(mockFilename, mockFileContent);
+      expect(result.chunks).toHaveLength(1);
+      expect(result.chunks[0].text).toBe('LangChain content');
+      expect(result.unstructuredChunks).toBeUndefined();
+
+      // Restore mock
+      vi.mocked(knowledgeEnv).UNSTRUCTURED_API_KEY = 'test-api-key';
+    });
+
+    it('should handle langchain results with metadata', async () => {
+      const mockLangChainResult = [
+        {
+          id: 'chunk-1',
+          metadata: {
+            source: 'test-document.pdf',
+            page: 1,
+            loc: { lines: { from: 1, to: 10 } },
+          },
+          pageContent: 'First paragraph content',
+        },
+        {
+          id: 'chunk-2',
+          metadata: {
+            source: 'test-document.pdf',
+            page: 2,
+          },
+          pageContent: 'Second paragraph content',
+        },
+      ];
+
+      mockLangChainPartition.mockResolvedValue(mockLangChainResult);
+
+      const result = await contentChunk.chunkContent({
+        content: mockFileContent,
+        fileType: 'application/pdf',
+        filename: mockFilename,
+      });
+
+      expect(result.chunks).toHaveLength(2);
+      expect(result.chunks[0]).toMatchObject({
+        id: 'chunk-1',
+        index: 0,
+        metadata: {
+          source: 'test-document.pdf',
+          page: 1,
+          loc: { lines: { from: 1, to: 10 } },
+        },
+        text: 'First paragraph content',
+        type: 'LangChainElement',
+      });
+      expect(result.chunks[1]).toMatchObject({
+        id: 'chunk-2',
+        index: 1,
+        text: 'Second paragraph content',
+        type: 'LangChainElement',
+      });
+    });
+
+    it('should handle different file types', async () => {
+      const mockLangChainResult = [
+        {
+          id: 'docx-chunk-1',
+          metadata: { source: 'test.docx' },
+          pageContent: 'Word document content',
+        },
+      ];
+
+      mockLangChainPartition.mockResolvedValue(mockLangChainResult);
+
+      const result = await contentChunk.chunkContent({
+        content: mockFileContent,
+        fileType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        filename: 'test.docx',
+      });
+
+      expect(mockLangChainPartition).toHaveBeenCalledWith('test.docx', mockFileContent);
+      expect(result.chunks).toHaveLength(1);
+      expect(result.chunks[0].text).toBe('Word document content');
+    });
+
+    it('should throw error when all services fail and its the last service', async () => {
+      mockLangChainPartition.mockRejectedValue(new Error('LangChain error'));
+
+      await expect(
+        contentChunk.chunkContent({
+          content: mockFileContent,
+          fileType: 'application/pdf',
+          filename: mockFilename,
+        }),
+      ).rejects.toThrow('LangChain error');
+    });
+
+    it('should handle empty langchain results', async () => {
+      mockLangChainPartition.mockResolvedValue([]);
+
+      const result = await contentChunk.chunkContent({
+        content: mockFileContent,
+        fileType: 'application/pdf',
+        filename: mockFilename,
+      });
+
+      expect(result.chunks).toHaveLength(0);
+      expect(result.unstructuredChunks).toBeUndefined();
+    });
+
+    it('should extract file extension correctly from MIME type', async () => {
+      const mockLangChainResult = [
+        {
+          id: 'chunk-1',
+          metadata: {},
+          pageContent: 'Content',
+        },
+      ];
+
+      mockLangChainPartition.mockResolvedValue(mockLangChainResult);
+
+      await contentChunk.chunkContent({
+        content: mockFileContent,
+        fileType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        filename: 'test.docx',
+      });
+
+      expect(mockLangChainPartition).toHaveBeenCalledWith('test.docx', mockFileContent);
+    });
+
+    it('should handle langchain results with minimal metadata', async () => {
+      const mockLangChainResult = [
+        {
+          id: 'chunk-minimal',
+          metadata: {},
+          pageContent: 'Content with no metadata',
+        },
+      ];
+
+      mockLangChainPartition.mockResolvedValue(mockLangChainResult);
+
+      const result = await contentChunk.chunkContent({
+        content: mockFileContent,
+        fileType: 'text/plain',
+        filename: 'test.txt',
+      });
+
+      expect(result.chunks[0]).toMatchObject({
+        id: 'chunk-minimal',
+        index: 0,
+        metadata: {},
+        text: 'Content with no metadata',
+        type: 'LangChainElement',
+      });
+    });
+  });
+
+  describe('canUseUnstructured', () => {
+    it('should return true when API key and server URL are configured', () => {
+      const result = contentChunk['canUseUnstructured']();
+      expect(result).toBe(true);
+    });
+
+    it('should return false when API key is missing', () => {
+      const originalKey = knowledgeEnv.UNSTRUCTURED_API_KEY;
+      vi.mocked(knowledgeEnv).UNSTRUCTURED_API_KEY = '';
+
+      const result = contentChunk['canUseUnstructured']();
+      expect(result).toBe(false);
+
+      // Restore
+      vi.mocked(knowledgeEnv).UNSTRUCTURED_API_KEY = originalKey;
+    });
+
+    it('should return false when server URL is missing', () => {
+      const originalUrl = knowledgeEnv.UNSTRUCTURED_SERVER_URL;
+      vi.mocked(knowledgeEnv).UNSTRUCTURED_SERVER_URL = '';
+
+      const result = contentChunk['canUseUnstructured']();
+      expect(result).toBe(false);
+
+      // Restore
+      vi.mocked(knowledgeEnv).UNSTRUCTURED_SERVER_URL = originalUrl;
+    });
+  });
+
+  describe('getChunkingServices', () => {
+    it('should return default service for unknown file type', () => {
+      const services = contentChunk['getChunkingServices']('application/unknown');
+      expect(services).toEqual(['default']);
+    });
+
+    it('should extract extension from MIME type correctly', () => {
+      const services = contentChunk['getChunkingServices']('application/pdf');
+      expect(services).toEqual(['default']);
+    });
+
+    it('should handle MIME types with multiple slashes', () => {
+      const services = contentChunk['getChunkingServices'](
+        'application/vnd.openxmlformats-officedocument/wordprocessingml.document',
+      );
+      expect(services).toEqual(['default']);
+    });
+
+    it('should convert extension to lowercase', () => {
+      const services = contentChunk['getChunkingServices']('application/PDF');
+      expect(services).toEqual(['default']);
+    });
+  });
+
+  describe('integration scenarios', () => {
+    it('should handle multiple chunk items with correct indices', async () => {
+      const mockLangChainResult = Array.from({ length: 5 }, (_, i) => ({
+        id: `chunk-${i}`,
+        metadata: { index: i },
+        pageContent: `Content ${i}`,
+      }));
+
+      mockLangChainPartition.mockResolvedValue(mockLangChainResult);
+
+      const result = await contentChunk.chunkContent({
+        content: new Uint8Array([1, 2, 3]),
+        fileType: 'text/plain',
+        filename: 'test.txt',
+      });
+
+      expect(result.chunks).toHaveLength(5);
+      result.chunks.forEach((chunk, index) => {
+        expect(chunk.index).toBe(index);
+        expect(chunk.text).toBe(`Content ${index}`);
+      });
+    });
+
+    it('should preserve order of chunks from langchain response', async () => {
+      const mockLangChainResult = [
+        {
+          id: 'elem-3',
+          metadata: { source: 'test.txt' },
+          pageContent: 'Third',
+        },
+        {
+          id: 'elem-1',
+          metadata: { source: 'test.txt' },
+          pageContent: 'First',
+        },
+        {
+          id: 'elem-2',
+          metadata: { source: 'test.txt' },
+          pageContent: 'Second',
+        },
+      ];
+
+      mockLangChainPartition.mockResolvedValue(mockLangChainResult);
+
+      const result = await contentChunk.chunkContent({
+        content: new Uint8Array([1, 2, 3]),
+        fileType: 'text/plain',
+        filename: 'test.txt',
+      });
+
+      expect(result.chunks[0].text).toBe('Third');
+      expect(result.chunks[1].text).toBe('First');
+      expect(result.chunks[2].text).toBe('Second');
+      expect(result.chunks[0].index).toBe(0);
+      expect(result.chunks[1].index).toBe(1);
+      expect(result.chunks[2].index).toBe(2);
+    });
+  });
+});