@lobehub/lobehub 2.0.10 → 2.0.11

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

@@ -2,12 +2,14 @@
 
 import { Flexbox, Text } from '@lobehub/ui';
 import { createStaticStyles, keyframes } from 'antd-style';
-import { memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
 import { shinyTextStyles } from '@/styles';
 
+import { formatElapsedTime } from './utils';
+
 const shimmer = keyframes`
   0% {
     transform: translateX(-100%);
@@ -48,6 +50,18 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
 const InitializingState = memo(() => {
   const { t } = useTranslation('chat');
+  const [elapsedTime, setElapsedTime] = useState(0);
+
+  // Timer for updating elapsed time every second
+  useEffect(() => {
+    const startTime = Date.now();
+
+    const timer = setInterval(() => {
+      setElapsedTime(Date.now() - startTime);
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
 
   return (
     <Flexbox className={styles.container} gap={12}>
@@ -56,6 +70,7 @@ const InitializingState = memo(() => {
         <Text className={shinyTextStyles.shinyText} weight={500}>
           {t('task.status.initializing')}
         </Text>
+        <Text type="secondary">({formatElapsedTime(elapsedTime)})</Text>
       </Flexbox>
     </Flexbox>
   );

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

@@ -0,0 +1,68 @@
+'use client';
+
+import { ThreadStatus } from '@lobechat/types';
+import type { TaskDetail, UIChatMessage } from '@lobechat/types';
+import { Flexbox, Text } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import BubblesLoading from '@/components/BubblesLoading';
+
+import ErrorState from './ErrorState';
+import InitializingState from './InitializingState';
+import TaskMessages from './TaskMessages';
+import { useTaskPolling } from './useTaskPolling';
+
+export interface TaskContentProps {
+  id: string;
+  isError: boolean;
+  messages: UIChatMessage[] | undefined;
+  status: ThreadStatus | undefined;
+  taskDetail: TaskDetail | undefined;
+  threadId: string | undefined;
+}
+
+const TaskContent = memo<TaskContentProps>(
+  ({ id, threadId, status, messages, taskDetail, isError }) => {
+    const { t } = useTranslation('chat');
+    const { isProcessing } = useTaskPolling({
+      messageId: id,
+      status,
+      threadId,
+    });
+
+    // No messages yet
+    if (!messages || messages.length === 0) {
+      // Still processing: show full initializing state
+      if (isProcessing) {
+        return <InitializingState />;
+      }
+
+      // Already completed but loading messages: show simple loading
+      return (
+        <Flexbox align="center" gap={4} horizontal>
+          <BubblesLoading />
+          <Text type="secondary">{t('task.status.fetchingDetails')}</Text>
+        </Flexbox>
+      );
+    }
+
+    return (
+      <>
+        <TaskMessages
+          duration={taskDetail?.duration}
+          isProcessing={isProcessing}
+          messages={messages}
+          startTime={taskDetail?.startedAt ? new Date(taskDetail.startedAt).getTime() : undefined}
+          totalCost={taskDetail?.totalCost}
+        />
+        {/* Error states: Failed, Cancel */}
+        {isError && taskDetail && <ErrorState taskDetail={taskDetail} />}
+      </>
+    );
+  },
+);
+
+TaskContent.displayName = 'TaskContent';
+
+export default TaskContent;

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

@@ -0,0 +1,383 @@
+'use client';
+
+import { type AssistantContentBlock, type UIChatMessage } from '@lobechat/types';
+import {
+  Accordion,
+  AccordionItem,
+  Block,
+  Flexbox,
+  Icon,
+  Markdown,
+  ScrollShadow,
+  Text,
+} from '@lobehub/ui';
+import { createStaticStyles, cssVar } from 'antd-style';
+import { ScrollText, Workflow } from 'lucide-react';
+import { type RefObject, memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+import { useAutoScroll } from '@/hooks/useAutoScroll';
+
+import ContentBlock from '../../AssistantGroup/components/ContentBlock';
+import Usage from '../../components/Extras/Usage';
+import AnimatedNumber from '../../components/Extras/Usage/UsageDetail/AnimatedNumber';
+import { accumulateUsage, formatDuration, formatElapsedTime } from './utils';
+
+const styles = createStaticStyles(({ css }) => ({
+  contentScroll: css`
+    max-height: min(50vh, 300px);
+  `,
+  instructionContent: css`
+    overflow: auto;
+    max-height: 300px;
+  `,
+}));
+
+/**
+ * InstructionAccordion - Shows the task instruction in a collapsible accordion
+ */
+const InstructionAccordion = memo<{ childrenCount: number; instruction: string }>(
+  ({ 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
+            className={styles.instructionContent}
+            padding={12}
+            style={{ marginBlock: 8 }}
+            variant={'outlined'}
+          >
+            <Markdown variant={'chat'}>{instruction}</Markdown>
+          </Block>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+);
+
+InstructionAccordion.displayName = 'InstructionAccordion';
+
+interface TaskMessagesProps {
+  /**
+   * Task duration in ms (for completed state)
+   */
+  duration?: number;
+  /**
+   * Whether the task is currently processing
+   */
+  isProcessing?: boolean;
+  /**
+   * Messages from task execution (parsed by conversation-flow)
+   * Will extract assistantGroup.children as blocks for rendering
+   */
+  messages: UIChatMessage[];
+  /**
+   * Model name for usage display
+   */
+  model?: string;
+  /**
+   * Provider name for usage display
+   */
+  provider?: string;
+  /**
+   * Task start time for elapsed time calculation
+   */
+  startTime?: number;
+  /**
+   * Total cost (for completed state)
+   */
+  totalCost?: number;
+}
+
+/**
+ * Processing state - shows all blocks with loading indicator
+ */
+const ProcessingView = memo<{
+  accumulatedUsage: { cost?: number; totalTokens?: number };
+  assistantId: string;
+  blocks: AssistantContentBlock[];
+  model?: string;
+  provider?: string;
+  startTime?: number;
+  totalToolCalls: number;
+}>(({ blocks, assistantId, startTime, model, provider, totalToolCalls, accumulatedUsage }) => {
+  const { t } = useTranslation('chat');
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const { ref, handleScroll } = useAutoScroll<HTMLDivElement>({
+    deps: [blocks],
+    enabled: true,
+  });
+
+  // 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>
+  );
+});
+
+ProcessingView.displayName = 'ProcessingView';
+
+/**
+ * Completed state - shows intermediate steps in accordion, final result visible
+ */
+const CompletedView = memo<{
+  assistantId: string;
+  blocks: AssistantContentBlock[];
+  duration?: number;
+  model?: string;
+  provider?: string;
+  totalCost?: number;
+  totalTokens?: number;
+  totalToolCalls: number;
+}>(({ 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>
+  );
+});
+
+CompletedView.displayName = 'CompletedView';
+
+/**
+ * TaskMessages - Renders task execution messages (blocks) for both processing and completed states
+ *
+ * Extracts assistantGroup.children (blocks) from messages and renders them:
+ * - Processing: Shows all blocks with loading indicator and real-time updates
+ * - Completed: Shows intermediate steps in accordion, final result always visible
+ */
+const TaskMessages = memo<TaskMessagesProps>(
+  ({ messages, isProcessing = false, startTime, duration, model, provider, totalCost }) => {
+    // Extract blocks and instruction from messages
+    const { blocks, assistantId, instruction } = useMemo(() => {
+      if (!messages || messages.length === 0)
+        return { assistantId: '', blocks: [], instruction: undefined };
+
+      const assistantGroupMessage = messages.find((item) => item.role === 'assistantGroup');
+      const userMessage = messages.find((item) => item.role === 'user');
+
+      return {
+        assistantId: assistantGroupMessage?.id ?? '',
+        blocks: assistantGroupMessage?.children ?? [],
+        instruction: userMessage?.content,
+      };
+    }, [messages]);
+
+    // Calculate total tool calls
+    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]);
+
+    return (
+      <Flexbox gap={4}>
+        {/* Instruction accordion */}
+        {instruction && (
+          <InstructionAccordion childrenCount={blocks.length} instruction={instruction} />
+        )}
+
+        {/* Processing or Completed view */}
+        {isProcessing ? (
+          <ProcessingView
+            accumulatedUsage={accumulatedUsage}
+            assistantId={assistantId}
+            blocks={blocks}
+            model={model}
+            provider={provider}
+            startTime={startTime}
+            totalToolCalls={totalToolCalls}
+          />
+        ) : (
+          <CompletedView
+            assistantId={assistantId}
+            blocks={blocks}
+            duration={duration}
+            model={model}
+            provider={provider}
+            totalCost={totalCost}
+            totalTokens={accumulatedUsage.totalTokens}
+            totalToolCalls={totalToolCalls}
+          />
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+TaskMessages.displayName = 'TaskMessages';
+
+export default TaskMessages;

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

@@ -5,4 +5,8 @@ export { default as ErrorState } from './ErrorState';
 export { default as InitializingState } from './InitializingState';
 export type { ProcessingStateVariant } from './ProcessingState';
 export { default as ProcessingState } from './ProcessingState';
+export type { TaskContentProps } from './TaskContent';
+export { default as TaskContent } from './TaskContent';
+export { default as TaskMessages } from './TaskMessages';
+export * from './useTaskPolling';
 export * from './utils';

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

@@ -0,0 +1,48 @@
+'use client';
+
+import { ThreadStatus } from '@lobechat/types';
+import { useEffect, useState } from 'react';
+
+import { useChatStore } from '@/store/chat';
+
+import { isProcessingStatus } from './utils';
+
+interface UseTaskPollingParams {
+  messageId: string;
+  status: ThreadStatus | undefined;
+  threadId: string | undefined;
+}
+
+export const useTaskPolling = ({ messageId, threadId, status }: UseTaskPollingParams) => {
+  const isProcessing = isProcessingStatus(status);
+  const [hasFetched, setHasFetched] = useState(false);
+
+  const [useEnablePollingTaskStatus, operations] = useChatStore((s) => [
+    s.useEnablePollingTaskStatus,
+    s.operations,
+  ]);
+
+  // Check if exec_async_task is already polling for this message
+  const hasActiveOperationPolling = Object.values(operations).some(
+    (op) =>
+      op.status === 'running' &&
+      op.type === 'execAgentRuntime' &&
+      op.context?.messageId === messageId,
+  );
+
+  // Enable polling when:
+  // 1. Has threadId
+  // 2. Not already being polled by an active operation
+  // 3. Either hasn't fetched yet (initial fetch) or is still processing (continuous polling)
+  const shouldPoll = !!threadId && !hasActiveOperationPolling && (!hasFetched || isProcessing);
+  const { data } = useEnablePollingTaskStatus(threadId, messageId, shouldPoll);
+
+  // Mark as fetched when we get data
+  useEffect(() => {
+    if (data?.taskDetail && !hasFetched) {
+      setHasFetched(true);
+    }
+  }, [data?.taskDetail, hasFetched]);
+
+  return { isProcessing };
+};

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

@@ -15,6 +15,7 @@ import AgentCouncilMessage from './AgentCouncil';
 import AssistantMessage from './Assistant';
 import AssistantGroupMessage from './AssistantGroup';
 import CompressedGroupMessage from './CompressedGroup';
+import GroupTasksMessage from './GroupTasks';
 import SupervisorMessage from './Supervisor';
 import TaskMessage from './Task';
 import TasksMessage from './Tasks';
@@ -159,6 +160,10 @@ const MessageItem = memo<MessageItemProps>(
           return <TasksMessage id={id} index={index} />;
         }
 
+        case 'groupTasks': {
+          return <GroupTasksMessage id={id} index={index} />;
+        }
+
         case 'agentCouncil': {
           return <AgentCouncilMessage id={id} index={index} />;
         }

package/src/locales/default/chat.ts

@@ -369,6 +369,9 @@ export default {
   'task.activity.toolCalling': 'Calling {{toolName}}...',
   'task.activity.toolResult': '{{toolName}} result received',
   'task.batchTasks': '{{count}} Batch Subtasks',
+  'task.groupTasks': '{{count}} Parallel Tasks',
+  'task.groupTasksTitle': '{{agents}} and {{count}} agents tasks',
+  'task.groupTasksTitleSimple': '{{agents}} {{count}} tasks',
   'task.instruction': 'Task Instruction',
   'task.intermediateSteps': '{{count}} intermediate steps',
   'task.metrics.duration': '(took {{duration}})',
@@ -376,6 +379,7 @@ export default {
   'task.metrics.toolCallsShort': 'skill uses',
   'task.status.cancelled': 'Task Cancelled',
   'task.status.failed': 'Task Failed',
+  'task.status.fetchingDetails': 'Fetching details...',
   'task.status.initializing': 'Initializing task...',
   'task.subtask': 'Subtask',
   'thread.divider': 'Subtopic',

package/src/server/modules/AgentRuntime/RuntimeExecutors.ts

@@ -753,7 +753,11 @@ export const createRuntimeExecutors = (
     const newState = structuredClone(state);
 
     // Query latest messages from database
+    // Must pass agentId to ensure correct query scope, otherwise when topicId is undefined,
+    // the query will use isNull(topicId) condition which won't find messages with actual topicId
     const latestMessages = await ctx.messageModel.query({
+      agentId: state.metadata?.agentId,
+      threadId: state.metadata?.threadId,
       topicId: state.metadata?.topicId,
     });