@lobehub/lobehub 2.0.0-next.327 → 2.0.0-next.328

package/src/features/Conversation/Messages/Task/ClientTaskDetail/CompletedState.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { type AssistantContentBlock } from '@lobechat/types';
+import { Accordion, AccordionItem, Block, Flexbox, Icon, Text } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import { Workflow } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ContentBlock from '../../AssistantGroup/components/ContentBlock';
+import { formatDuration } from '../../Tasks/shared/utils';
+import Usage from '../../components/Extras/Usage';
+
+interface CompletedStateProps {
+  assistantId: string;
+  blocks: AssistantContentBlock[];
+  duration?: number;
+  model?: string;
+  provider?: string;
+  totalCost?: number;
+  totalTokens?: number;
+  totalToolCalls?: number;
+}
+
+const CompletedState = memo<CompletedStateProps>(
+  ({ blocks, assistantId, duration, totalToolCalls, model, provider, totalTokens, totalCost }) => {
+    const { t } = useTranslation('chat');
+
+    // Split blocks: intermediate steps (all but last) and final result (last)
+    const { intermediateBlocks, finalBlock } = useMemo(() => {
+      if (blocks.length === 0) return { finalBlock: null, intermediateBlocks: [] };
+      if (blocks.length === 1) return { finalBlock: blocks[0], intermediateBlocks: [] };
+
+      return {
+        finalBlock: blocks.at(-1)!,
+        intermediateBlocks: blocks.slice(0, -1),
+      };
+    }, [blocks]);
+
+    if (!finalBlock) return null;
+
+    const title = (
+      <Flexbox align="center" gap={8} horizontal>
+        <Block
+          align="center"
+          flex="none"
+          gap={4}
+          height={24}
+          horizontal
+          justify="center"
+          style={{ fontSize: 12 }}
+          variant="outlined"
+          width={24}
+        >
+          <Icon color={cssVar.colorTextSecondary} icon={Workflow} />
+        </Block>
+        <Flexbox align="center" gap={4} horizontal>
+          <Text as="span" type="secondary" weight={500}>
+            {totalToolCalls}
+          </Text>
+          <Text as="span" type="secondary">
+            {t('task.metrics.toolCallsShort')}
+          </Text>
+          {/* Duration display */}
+          {duration && (
+            <Text as="span" type="secondary">
+              {t('task.metrics.duration', { duration: formatDuration(duration) })}
+            </Text>
+          )}
+        </Flexbox>
+      </Flexbox>
+    );
+
+    return (
+      <Flexbox gap={8}>
+        {/* Intermediate steps - collapsed by default */}
+        {intermediateBlocks.length > 0 && (
+          <Accordion defaultExpandedKeys={[]} gap={8}>
+            <AccordionItem itemKey="intermediate" paddingBlock={4} paddingInline={4} title={title}>
+              <Flexbox gap={8} paddingInline={4} style={{ marginTop: 8 }}>
+                {intermediateBlocks.map((block) => (
+                  <ContentBlock
+                    {...block}
+                    assistantId={assistantId}
+                    disableEditing
+                    key={block.id}
+                  />
+                ))}
+              </Flexbox>
+            </AccordionItem>
+          </Accordion>
+        )}
+
+        {/* Final result - always visible */}
+        <ContentBlock {...finalBlock} assistantId={assistantId} disableEditing />
+
+        {/* Usage display */}
+        {model && provider && (
+          <Usage model={model} provider={provider} usage={{ cost: totalCost, totalTokens }} />
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+CompletedState.displayName = 'ClientCompletedState';
+
+export default CompletedState;

package/src/features/Conversation/Messages/Task/ClientTaskDetail/InitializingState.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { Flexbox, Text } from '@lobehub/ui';
+import { createStaticStyles, keyframes } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+import { shinyTextStyles } from '@/styles';
+
+const shimmer = keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+`;
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  container: css`
+    padding-block: 12px;
+  `,
+  progress: css`
+    position: relative;
+
+    overflow: hidden;
+
+    height: 3px;
+    border-radius: 2px;
+
+    background: ${cssVar.colorFillSecondary};
+  `,
+  progressShimmer: css`
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: linear-gradient(90deg, transparent, ${cssVar.colorPrimaryBgHover}, transparent);
+
+    animation: ${shimmer} 2s infinite;
+  `,
+}));
+
+const InitializingState = memo(() => {
+  const { t } = useTranslation('chat');
+
+  return (
+    <Flexbox className={styles.container} gap={12}>
+      <Flexbox align="center" gap={8} horizontal>
+        <NeuralNetworkLoading size={14} />
+        <Text className={shinyTextStyles.shinyText} weight={500}>
+          {t('task.status.initializing')}
+        </Text>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+InitializingState.displayName = 'InitializingState';
+
+export default InitializingState;

package/src/features/Conversation/Messages/Task/ClientTaskDetail/InstructionAccordion.tsx

@@ -0,0 +1,63 @@
+import { Accordion, AccordionItem, Block, Flexbox, Icon, Markdown, Text } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import { ScrollText } from 'lucide-react';
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface InstructionAccordionProps {
+  childrenCount: number;
+  instruction: string;
+}
+
+const InstructionAccordion = memo<InstructionAccordionProps>(({ instruction, childrenCount }) => {
+  const { t } = useTranslation('chat');
+
+  // Auto-collapse instruction when children count exceeds threshold
+  const [expandedKeys, setExpandedKeys] = useState<string[]>(['instruction']);
+
+  useEffect(() => {
+    if (childrenCount > 1) {
+      setExpandedKeys([]);
+    }
+  }, [childrenCount > 1]);
+
+  return (
+    <Accordion
+      expandedKeys={expandedKeys}
+      gap={8}
+      onExpandedChange={(keys) => setExpandedKeys(keys as string[])}
+    >
+      <AccordionItem
+        itemKey="instruction"
+        paddingBlock={4}
+        paddingInline={4}
+        title={
+          <Flexbox align="center" gap={8} horizontal>
+            <Block
+              align="center"
+              flex="none"
+              gap={4}
+              height={24}
+              horizontal
+              justify="center"
+              style={{ fontSize: 12 }}
+              variant="outlined"
+              width={24}
+            >
+              <Icon color={cssVar.colorTextSecondary} icon={ScrollText} />
+            </Block>
+            <Text as="span" type="secondary">
+              {t('task.instruction')}
+            </Text>
+          </Flexbox>
+        }
+      >
+        <Block padding={12} style={{ marginBlock: 8, maxHeight: 300, overflow: 'auto' }} variant={'outlined'}>
+          <Markdown variant={'chat'}>{instruction}</Markdown>
+        </Block>
+      </AccordionItem>
+    </Accordion>
+  );
+});
+
+export default InstructionAccordion;

package/src/features/Conversation/Messages/Task/ClientTaskDetail/ProcessingState.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { type AssistantContentBlock } from '@lobechat/types';
+import { Block, Flexbox, ScrollShadow, Text } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { type RefObject, memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+import AnimatedNumber from '@/features/Conversation/Messages/components/Extras/Usage/UsageDetail/AnimatedNumber';
+import { useAutoScroll } from '@/hooks/useAutoScroll';
+
+import ContentBlock from '../../AssistantGroup/components/ContentBlock';
+import { accumulateUsage, formatElapsedTime } from '../../Tasks/shared/utils';
+import Usage from '../../components/Extras/Usage';
+
+const styles = createStaticStyles(({ css }) => ({
+  contentScroll: css`
+    max-height: min(50vh, 300px);
+  `,
+}));
+
+interface ProcessingStateProps {
+  assistantId: string;
+  blocks: AssistantContentBlock[];
+  model?: string;
+  provider?: string;
+  startTime?: number;
+}
+
+const ProcessingState = memo<ProcessingStateProps>(
+  ({ blocks, assistantId, startTime, model, provider }) => {
+    const { t } = useTranslation('chat');
+    const [elapsedTime, setElapsedTime] = useState(0);
+    const { ref, handleScroll } = useAutoScroll<HTMLDivElement>({
+      deps: [blocks],
+      enabled: true,
+    });
+
+    const totalToolCalls = useMemo(
+      () => blocks.reduce((sum, block) => sum + (block.tools?.length || 0), 0),
+      [blocks],
+    );
+
+    // Accumulate usage from all blocks
+    const accumulatedUsage = useMemo(() => accumulateUsage(blocks), [blocks]);
+
+    // Calculate initial elapsed time
+    useEffect(() => {
+      if (startTime) {
+        setElapsedTime(Math.max(0, Date.now() - startTime));
+      }
+    }, [startTime]);
+
+    // Timer for updating elapsed time every second
+    useEffect(() => {
+      if (!startTime) return;
+
+      const timer = setInterval(() => {
+        setElapsedTime(Math.max(0, Date.now() - startTime));
+      }, 1000);
+
+      return () => clearInterval(timer);
+    }, [startTime]);
+
+    return (
+      <Flexbox gap={8}>
+        <Flexbox align="center" gap={8} horizontal paddingInline={4}>
+          <Block
+            align="center"
+            flex="none"
+            gap={4}
+            height={24}
+            horizontal
+            justify="center"
+            style={{ fontSize: 12 }}
+            variant="outlined"
+            width={24}
+          >
+            <NeuralNetworkLoading size={16} />
+          </Block>
+          <Flexbox align="center" gap={4} horizontal>
+            <Text as="span" type="secondary" weight={500}>
+              <AnimatedNumber
+                duration={500}
+                formatter={(v) => Math.round(v).toString()}
+                value={totalToolCalls}
+              />
+            </Text>
+            <Text as="span" type="secondary">
+              {t('task.metrics.toolCallsShort')}
+            </Text>
+            {startTime && (
+              <Text as="span" type="secondary">
+                ({formatElapsedTime(elapsedTime)})
+              </Text>
+            )}
+          </Flexbox>
+        </Flexbox>
+        <ScrollShadow
+          className={styles.contentScroll}
+          offset={12}
+          onScroll={handleScroll}
+          ref={ref as RefObject<HTMLDivElement>}
+          size={8}
+        >
+          <Flexbox gap={8}>
+            {blocks.map((block) => (
+              <ContentBlock {...block} assistantId={assistantId} disableEditing key={block.id} />
+            ))}
+          </Flexbox>
+        </ScrollShadow>
+
+        {/* Usage display */}
+        {model && provider && <Usage model={model} provider={provider} usage={accumulatedUsage} />}
+      </Flexbox>
+    );
+  },
+);
+
+ProcessingState.displayName = 'ClientProcessingState';
+
+export default ProcessingState;

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

@@ -0,0 +1,106 @@
+'use client';
+
+import { type TaskDetail, ThreadStatus } from '@lobechat/types';
+import { Flexbox } from '@lobehub/ui';
+import { memo, useMemo } from 'react';
+
+import BubblesLoading from '@/components/BubblesLoading';
+import { useChatStore } from '@/store/chat';
+import { displayMessageSelectors } from '@/store/chat/selectors';
+import { messageMapKey } from '@/store/chat/utils/messageMapKey';
+
+import CompletedState from './CompletedState';
+import InitializingState from './InitializingState';
+import InstructionAccordion from './InstructionAccordion';
+import ProcessingState from './ProcessingState';
+
+interface ClientTaskDetailProps {
+  content?: string;
+  messageId: string;
+  taskDetail?: TaskDetail;
+}
+
+const ClientTaskDetail = memo<ClientTaskDetailProps>(({ taskDetail }) => {
+  const threadId = taskDetail?.threadId;
+  const isExecuting = taskDetail?.status === ThreadStatus.Processing;
+
+  const [activeAgentId, activeTopicId, useFetchMessages] = useChatStore((s) => [
+    s.activeAgentId,
+    s.activeTopicId,
+    s.useFetchMessages,
+  ]);
+
+  const threadContext = useMemo(
+    () => ({
+      agentId: activeAgentId,
+      scope: 'thread' as const,
+      threadId,
+      topicId: activeTopicId,
+    }),
+    [activeAgentId, activeTopicId, threadId],
+  );
+
+  const threadMessageKey = useMemo(
+    () => (threadId ? messageMapKey(threadContext) : null),
+    [threadId],
+  );
+
+  // Fetch thread messages (skip when executing - messages come from real-time updates)
+  useFetchMessages(threadContext, isExecuting);
+
+  // Get thread messages from store using selector
+  const threadMessages = useChatStore((s) =>
+    threadMessageKey
+      ? displayMessageSelectors.getDisplayMessagesByKey(threadMessageKey)(s)
+      : undefined,
+  );
+
+  if (!threadMessages) return <BubblesLoading />;
+
+  // Find the assistantGroup message which contains the children blocks
+  const assistantGroupMessage = threadMessages.find((item) => item.role === 'assistantGroup');
+  const instruction = threadMessages.find((item) => item.role === 'user')?.content;
+  const childrenCount = assistantGroupMessage?.children?.length ?? 0;
+
+  // Get model/provider from assistantGroup message
+  const model = assistantGroupMessage?.model;
+  const provider = assistantGroupMessage?.provider;
+
+  // Initializing state: no status yet (task just created, waiting for client execution)
+  if (threadMessages.length === 0 || !assistantGroupMessage?.children || childrenCount === 0) {
+    return <InitializingState />;
+  }
+
+  return (
+    <Flexbox gap={4}>
+      {instruction && (
+        <InstructionAccordion childrenCount={childrenCount} instruction={instruction} />
+      )}
+
+      {isExecuting ? (
+        <ProcessingState
+          assistantId={assistantGroupMessage.id}
+          blocks={assistantGroupMessage.children}
+          model={model ?? undefined}
+          provider={provider ?? undefined}
+          startTime={assistantGroupMessage.createdAt}
+        />
+      ) : (
+        <CompletedState
+          assistantId={assistantGroupMessage.id}
+          blocks={assistantGroupMessage.children}
+          duration={taskDetail?.duration}
+          model={model ?? undefined}
+          provider={provider ?? undefined}
+          totalCost={taskDetail?.totalCost}
+          totalTokens={taskDetail?.totalTokens}
+          totalToolCalls={taskDetail?.totalToolCalls}
+        />
+      )}
+    </Flexbox>
+  );
+});
+
+ClientTaskDetail.displayName = 'ClientClientTaskDetail';
+
+export default ClientTaskDetail;

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

@@ -17,6 +17,7 @@ interface TaskDetailPanelProps {
 }
 
 const TaskDetailPanel = memo<TaskDetailPanelProps>(({ taskDetail, content, messageId }) => {
+  // Default: server-side task execution
   return <StatusContent content={content} messageId={messageId} taskDetail={taskDetail} />;
 });
 

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

@@ -19,6 +19,7 @@ import { useAgentMeta, useDoubleClickEdit } from '../../hooks';
 import { dataSelectors, messageStateSelectors, useConversationStore } from '../../store';
 import { normalizeThinkTags, processWithArtifact } from '../../utils/markdown';
 import { AssistantActionsBar } from './Actions';
+import ClientTaskDetail from './ClientTaskDetail';
 import TaskDetailPanel from './TaskDetailPanel';
 
 interface TaskMessageProps {
@@ -91,12 +92,16 @@ const TaskMessage = memo<TaskMessageProps>(({ id, index, disableEditing, isLates
       time={createdAt}
       titleAddon={<Tag>{t('task.subtask')}</Tag>}
     >
-      <TaskDetailPanel
-        content={content}
-        instruction={metadata?.instruction}
-        messageId={id}
-        taskDetail={taskDetail}
-      />
+      {taskDetail?.clientMode ? (
+        <ClientTaskDetail messageId={id} taskDetail={taskDetail} />
+      ) : (
+        <TaskDetailPanel
+          content={content}
+          instruction={metadata?.instruction}
+          messageId={id}
+          taskDetail={taskDetail}
+        />
+      )}
     </ChatItem>
   );
 }, isEqual);

package/src/features/Conversation/Messages/Tasks/TaskItem/TaskTitle.tsx

@@ -2,9 +2,10 @@
 
 import { Block, Flexbox, Icon, Text } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
-import { ListChecksIcon, Loader2, XIcon } from 'lucide-react';
+import { ListChecksIcon, XIcon } from 'lucide-react';
 import { memo } from 'react';
 
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
 import { ThreadStatus } from '@/types/index';
 
 import { isProcessingStatus } from '../shared';
@@ -27,7 +28,7 @@ const TaskStatusIndicator = memo<{ status?: ThreadStatus }>(({ status }) => {
   } else if (isError) {
     icon = <Icon color={cssVar.colorError} icon={XIcon} />;
   } else if (isProcessing || isInitializing) {
-    icon = <Icon color={cssVar.colorTextDescription} icon={Loader2} spin />;
+    icon = <NeuralNetworkLoading size={16} />;
   } else {
     return null;
   }

package/src/features/Conversation/Messages/Tasks/shared/InitializingState.tsx

@@ -57,10 +57,6 @@ const InitializingState = memo(() => {
           {t('task.status.initializing')}
         </Text>
       </Flexbox>
-
-      <div className={styles.progress}>
-        <div className={styles.progressShimmer} />
-      </div>
     </Flexbox>
   );
 });

package/src/features/Conversation/Messages/Tasks/shared/utils.ts

@@ -1,4 +1,9 @@
-import { type TaskCurrentActivity, ThreadStatus } from '@/types/index';
+import {
+  type AssistantContentBlock,
+  type ModelUsage,
+  type TaskCurrentActivity,
+  ThreadStatus,
+} from '@lobechat/types';
 
 /**
  * Format duration in milliseconds to human-readable string
@@ -68,3 +73,19 @@ export const isProcessingStatus = (status?: ThreadStatus): boolean => {
     status === ThreadStatus.Todo
   );
 };
+
+/**
+ * Accumulate usage from all blocks
+ */
+export const accumulateUsage = (blocks: AssistantContentBlock[]): ModelUsage => {
+  return blocks.reduce((acc, block) => {
+    const usage = block.usage;
+    if (!usage) return acc;
+    return {
+      cost: (acc.cost || 0) + (usage.cost || 0),
+      totalInputTokens: (acc.totalInputTokens || 0) + (usage.totalInputTokens || 0),
+      totalOutputTokens: (acc.totalOutputTokens || 0) + (usage.totalOutputTokens || 0),
+      totalTokens: (acc.totalTokens || 0) + (usage.totalTokens || 0),
+    };
+  }, {} as ModelUsage);
+};

package/src/features/Conversation/Messages/components/ContentLoading.tsx

@@ -18,7 +18,7 @@ interface ContentLoadingProps {
 const ContentLoading = memo<ContentLoadingProps>(({ id }) => {
   const { t } = useTranslation('chat');
   const runningOp = useChatStore(operationSelectors.getDeepestRunningOperationByMessage(id));
-  console.log('runningOp', runningOp);
+
   const [elapsedSeconds, setElapsedSeconds] = useState(0);
   const [startTime, setStartTime] = useState(runningOp?.metadata?.startTime);
 

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

@@ -6,11 +6,11 @@ import {
   type RefObject,
   memo,
   useEffect,
-  useRef,
   useState,
 } from 'react';
 
 import MarkdownMessage from '@/features/Conversation/Markdown';
+import { useAutoScroll } from '@/hooks/useAutoScroll';
 import { type ChatCitationItem } from '@/types/index';
 
 import Title from './Title';
@@ -40,39 +40,17 @@ interface ThinkingProps {
 const Thinking = memo<ThinkingProps>((props) => {
   const { content, duration, thinking, citations, thinkingAnimated } = props;
   const [showDetail, setShowDetail] = useState(false);
-  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  const { ref, handleScroll } = useAutoScroll<HTMLDivElement>({
+    deps: [content, showDetail],
+    enabled: thinking && showDetail,
+    threshold: 120,
+  });
 
   useEffect(() => {
     setShowDetail(!!thinking);
   }, [thinking]);
 
-  // 当内容变更且正在思考时，如果用户接近底部则自动滚动到底部
-  useEffect(() => {
-    if (!thinking || !showDetail) return;
-    const container = contentRef.current;
-    if (!container) return;
-
-    // 仅当用户接近底部时才自动滚动，避免打断用户查看上方内容
-    const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-    const isNearBottom = distanceToBottom < 120;
-
-    if (isNearBottom) {
-      requestAnimationFrame(() => {
-        container.scrollTop = container.scrollHeight;
-      });
-    }
-  }, [content, thinking, showDetail]);
-
-  // 展开时滚动到底部，便于查看最新内容
-  useEffect(() => {
-    if (!showDetail) return;
-    const container = contentRef.current;
-    if (!container) return;
-    requestAnimationFrame(() => {
-      container.scrollTop = container.scrollHeight;
-    });
-  }, [showDetail]);
-
   return (
     <Accordion
       expandedKeys={showDetail ? ['thinking'] : []}
@@ -88,7 +66,8 @@ const Thinking = memo<ThinkingProps>((props) => {
         <ScrollShadow
           className={styles.contentScroll}
           offset={12}
-          ref={contentRef as unknown as RefObject<HTMLDivElement>}
+          onScroll={handleScroll}
+          ref={ref as RefObject<HTMLDivElement>}
           size={12}
         >
           {typeof content === 'string' ? (

package/src/features/Conversation/store/slices/data/action.ts

@@ -106,12 +106,11 @@ export const dataSlice: StateCreator<
     // Also skip fetch when topicId is null (new conversation state) - there's no server data,
     // only local optimistic updates. Fetching would return empty array and overwrite local data.
     const shouldFetch = !skipFetch && !!context.agentId && !!context.topicId;
+
     return useClientDataSWRWithSync<UIChatMessage[]>(
       shouldFetch ? ['CONVERSATION_FETCH_MESSAGES', context] : null,
 
-      async () => {
-        return messageService.getMessages(context);
-      },
+      () => messageService.getMessages(context),
       {
         onData: (data) => {
           if (!data) return;