@lobehub/lobehub 2.0.9 → 2.0.11

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,
     });
 

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

@@ -655,8 +655,10 @@ describe('RuntimeExecutors', () => {
 
       const result = await executors.call_tools_batch!(instruction, state);
 
-      // Should query messages from database
+      // Should query messages from database with agentId, threadId, and topicId
       expect(mockMessageModel.query).toHaveBeenCalledWith({
+        agentId: 'agent-123',
+        threadId: 'thread-123',
         topicId: 'topic-123',
       });
 
@@ -952,6 +954,109 @@ describe('RuntimeExecutors', () => {
         }),
       );
     });
+
+    it('should query messages with correct metadata fields when state.metadata is defined', async () => {
+      const executors = createRuntimeExecutors(ctx);
+      const state = createMockState({
+        metadata: {
+          agentId: 'agent-abc',
+          threadId: 'thread-xyz',
+          topicId: 'topic-abc-123',
+        },
+      });
+
+      const instruction = {
+        payload: {
+          parentMessageId: 'assistant-msg-123',
+          toolsCalling: [
+            {
+              apiName: 'search',
+              arguments: '{}',
+              id: 'tool-call-1',
+              identifier: 'web-search',
+              type: 'default' as const,
+            },
+          ],
+        },
+        type: 'call_tools_batch' as const,
+      };
+
+      await executors.call_tools_batch!(instruction, state);
+
+      // Should query messages with agentId, threadId, and topicId from state.metadata
+      expect(mockMessageModel.query).toHaveBeenCalledWith({
+        agentId: 'agent-abc',
+        threadId: 'thread-xyz',
+        topicId: 'topic-abc-123',
+      });
+    });
+
+    it('should preserve messages in newState even when state.metadata.topicId is undefined', async () => {
+      // Regression test: When state.metadata.topicId is undefined, previously the query
+      // only passed topicId, which caused isNull(topicId) condition and returned 0 messages.
+      // This led to "messages: at least one message is required" error in the next call_llm step.
+      //
+      // Fix: Now we also pass agentId and threadId, so even when topicId is undefined,
+      // the query can still find messages by agentId scope.
+
+      // Mock: query returns messages when agentId is provided (regardless of topicId)
+      mockMessageModel.query = vi
+        .fn()
+        .mockImplementation((params: { agentId?: string; topicId?: string }) => {
+          // With the fix, agentId is always passed, so we can find messages
+          if (params.agentId) {
+            return Promise.resolve([
+              { id: 'msg-1', content: 'Hello', role: 'user' },
+              { id: 'msg-2', content: 'Response', role: 'assistant', tool_calls: [] },
+            ]);
+          }
+          // Without agentId (old buggy behavior), return empty
+          return Promise.resolve([]);
+        });
+
+      const executors = createRuntimeExecutors(ctx);
+      // State with undefined topicId but has agentId
+      const state = createMockState({
+        messages: [
+          { content: 'Hello', role: 'user' },
+          { content: 'Response', role: 'assistant', tool_calls: [] },
+        ],
+        metadata: {
+          agentId: 'agent-123',
+          threadId: 'thread-123',
+          topicId: undefined, // topicId is undefined
+        },
+      });
+
+      const instruction = {
+        payload: {
+          parentMessageId: 'assistant-msg-123',
+          toolsCalling: [
+            {
+              apiName: 'search',
+              arguments: '{}',
+              id: 'tool-call-1',
+              identifier: 'web-search',
+              type: 'default' as const,
+            },
+          ],
+        },
+        type: 'call_tools_batch' as const,
+      };
+
+      const result = await executors.call_tools_batch!(instruction, state);
+
+      // Verify agentId is passed in the query
+      expect(mockMessageModel.query).toHaveBeenCalledWith({
+        agentId: 'agent-123',
+        threadId: 'thread-123',
+        topicId: undefined,
+      });
+
+      // Expected: newState.messages should NOT be empty
+      // The next call_llm step needs messages to work properly
+      expect(result.newState.messages.length).toBeGreaterThan(0);
+    });
   });
 
   describe('resolve_aborted_tools executor', () => {

package/src/server/services/aiAgent/__tests__/execAgent.threadId.test.ts

@@ -205,7 +205,7 @@ describe('AiAgentService.execAgent - threadId handling', () => {
 
       expect(assistantMessageCall).toBeDefined();
       expect(assistantMessageCall![0].threadId).toBeUndefined();
-    });
+    }, 10_000);
   });
 
   describe('when appContext is undefined', () => {
@@ -247,6 +247,6 @@ describe('AiAgentService.execAgent - threadId handling', () => {
 
       // Verify groupId is passed to AgentRuntimeService (checked in appContext)
       // This is handled by the createOperation call
-    });
+    }, 10_000);
   });
 });

package/src/server/utils/truncateToolResult.ts

@@ -6,9 +6,8 @@
 /**
  * Default maximum length for tool execution result content (in characters)
  * This prevents context overflow when sending results back to LLM
- * @default 6000 characters (~1,500 tokens for English, ~3,000 tokens for Chinese)
  */
-export const DEFAULT_TOOL_RESULT_MAX_LENGTH = 6000;
+export const DEFAULT_TOOL_RESULT_MAX_LENGTH = 25_000;
 
 /**
  * Truncate tool result content if it exceeds the maximum length
@@ -21,8 +20,6 @@ export const DEFAULT_TOOL_RESULT_MAX_LENGTH = 6000;
 export function truncateToolResult(content: string, maxLength?: number): string {
   const limit = maxLength ?? DEFAULT_TOOL_RESULT_MAX_LENGTH;
 
-  console.log('content-limit', content, limit);
-
   if (!content || content.length <= limit) {
     return content;
   }