@lobehub/lobehub 2.0.10 → 2.0.11

package/src/features/Conversation/Messages/GroupTasks/TaskItem/ClientTaskItem.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import { AccordionItem, Block, Text } from '@lobehub/ui';
+import { memo, useMemo, useState } from 'react';
+
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+import { useChatStore } from '@/store/chat';
+import { displayMessageSelectors } from '@/store/chat/selectors';
+import { messageMapKey } from '@/store/chat/utils/messageMapKey';
+import { ThreadStatus } from '@/types/index';
+import type { UIChatMessage } from '@/types/index';
+
+import {
+  ErrorState,
+  InitializingState,
+  TaskMessages,
+  isProcessingStatus,
+} from '../../Tasks/shared';
+import TaskTitle, { type TaskMetrics } from './TaskTitle';
+
+interface ClientTaskItemProps {
+  item: UIChatMessage;
+}
+
+const ClientTaskItem = memo<ClientTaskItemProps>(({ item }) => {
+  const { id, agentId: itemAgentId, groupId: itemGroupId, metadata, taskDetail } = item;
+  const [expanded, setExpanded] = useState(false);
+
+  const title = taskDetail?.title || metadata?.taskTitle;
+  const instruction = metadata?.instruction;
+  const status = taskDetail?.status;
+  const threadId = taskDetail?.threadId;
+
+  const isProcessing = isProcessingStatus(status);
+  const isCompleted = status === ThreadStatus.Completed;
+  const isError = status === ThreadStatus.Failed || status === ThreadStatus.Cancel;
+  const isInitializing = !taskDetail || !status;
+
+  // Fetch thread messages for client mode
+  // Use item's agentId (from task message) to query with the correct SubAgent ID that created the thread
+  // Fall back to activeAgentId if task message doesn't have agentId (shouldn't happen normally)
+  const [activeAgentId, activeTopicId, useFetchMessages] = useChatStore((s) => [
+    s.activeAgentId,
+    s.activeTopicId,
+    s.useFetchMessages,
+  ]);
+
+  // Use task message's agentId (skip 'supervisor' as it's not a valid agent ID for queries)
+  // Fall back to activeAgentId if not available
+  const agentId = itemAgentId && itemAgentId !== 'supervisor' ? itemAgentId : activeAgentId;
+
+  // Get agent info from store for displaying
+  const activeGroupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
+  const agent = useAgentGroupStore((s) =>
+    activeGroupId && itemAgentId
+      ? agentGroupSelectors.getAgentByIdFromGroup(activeGroupId, itemAgentId)(s)
+      : null,
+  );
+
+  const threadContext = useMemo(
+    () => ({
+      agentId,
+      groupId: itemGroupId,
+      scope: 'thread' as const,
+      threadId,
+      topicId: activeTopicId,
+    }),
+    [agentId, itemGroupId, activeTopicId, threadId],
+  );
+
+  const threadMessageKey = useMemo(
+    () => (threadId ? messageMapKey(threadContext) : null),
+    [threadId, threadContext],
+  );
+
+  // Fetch thread messages (skip when executing - messages come from real-time updates)
+  useFetchMessages(threadContext, isProcessing);
+
+  // Get thread messages from store using selector
+  const threadMessages = useChatStore((s) =>
+    threadMessageKey
+      ? displayMessageSelectors.getDisplayMessagesByKey(threadMessageKey)(s)
+      : undefined,
+  );
+
+  // Find the assistantGroup message which contains the children blocks
+  const assistantGroupMessage = threadMessages?.find((item) => item.role === 'assistantGroup');
+  const blocks = assistantGroupMessage?.children;
+  const childrenCount = blocks?.length ?? 0;
+
+  // Get model/provider from assistantGroup message
+  const model = assistantGroupMessage?.model;
+  const provider = assistantGroupMessage?.provider;
+
+  // Build metrics for TaskTitle based on blocks data
+  const metrics: TaskMetrics | undefined = useMemo(() => {
+    if (isProcessing && blocks) {
+      const toolCalls = blocks.reduce((sum, block) => sum + (block.tools?.length || 0), 0);
+      return {
+        isLoading: false,
+        startTime: assistantGroupMessage?.createdAt,
+        steps: blocks.length,
+        toolCalls,
+      };
+    }
+    if (isCompleted || isError) {
+      return {
+        duration: taskDetail?.duration,
+        steps: taskDetail?.totalSteps,
+        toolCalls: taskDetail?.totalToolCalls,
+      };
+    }
+    return undefined;
+  }, [
+    isProcessing,
+    isCompleted,
+    isError,
+    blocks,
+    assistantGroupMessage?.createdAt,
+    taskDetail?.duration,
+    taskDetail?.totalSteps,
+    taskDetail?.totalToolCalls,
+  ]);
+
+  // Check if we have blocks to show (for Processing and Completed states)
+  const hasBlocks = blocks && childrenCount > 0;
+
+  return (
+    <AccordionItem
+      expand={expanded}
+      itemKey={id}
+      onExpandChange={setExpanded}
+      paddingBlock={4}
+      paddingInline={4}
+      title={
+        <TaskTitle
+          agent={
+            agent
+              ? { avatar: agent.avatar || undefined, backgroundColor: agent.backgroundColor }
+              : undefined
+          }
+          metrics={metrics}
+          status={status}
+          title={title}
+        />
+      }
+    >
+      <Block gap={16} padding={12} style={{ marginBlock: 8 }} variant={'outlined'}>
+        {instruction && (
+          <Block padding={12}>
+            <Text fontSize={13} type={'secondary'}>
+              {instruction}
+            </Text>
+          </Block>
+        )}
+
+        {/* Initializing State - no taskDetail yet or no blocks */}
+        {(isInitializing || (isProcessing && !hasBlocks)) && <InitializingState />}
+
+        {/* Processing or Completed State - show blocks via TaskMessages */}
+        {!isInitializing && (isProcessing || isCompleted) && hasBlocks && threadMessages && (
+          <TaskMessages
+            duration={taskDetail?.duration}
+            isProcessing={isProcessing}
+            messages={threadMessages}
+            model={model ?? undefined}
+            provider={provider ?? undefined}
+            startTime={assistantGroupMessage?.createdAt}
+            totalCost={taskDetail?.totalCost}
+          />
+        )}
+
+        {/* Error State */}
+        {!isInitializing && isError && taskDetail && <ErrorState taskDetail={taskDetail} />}
+      </Block>
+    </AccordionItem>
+  );
+}, Object.is);
+
+ClientTaskItem.displayName = 'ClientTaskItem';
+
+export default ClientTaskItem;

package/src/features/Conversation/Messages/GroupTasks/TaskItem/ServerTaskItem.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { ThreadStatus } from '@lobechat/types';
+import type { UIChatMessage } from '@lobechat/types';
+import { AccordionItem, Block } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { memo, useMemo, useState } from 'react';
+
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+
+import { TaskContent } from '../../Tasks/shared';
+import TaskTitle, { type TaskMetrics } from './TaskTitle';
+
+interface ServerTaskItemProps {
+  item: UIChatMessage;
+}
+
+const ServerTaskItem = memo<ServerTaskItemProps>(({ item }) => {
+  const { id, agentId, metadata, taskDetail, tasks } = item;
+  const [expanded, setExpanded] = useState(false);
+
+  const title = taskDetail?.title || metadata?.taskTitle;
+  const status = taskDetail?.status;
+  const threadId = taskDetail?.threadId;
+
+  const isCompleted = status === ThreadStatus.Completed;
+  const isError = status === ThreadStatus.Failed || status === ThreadStatus.Cancel;
+
+  // Get agent info from store
+  const activeGroupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
+  const agent = useAgentGroupStore((s) =>
+    activeGroupId && agentId
+      ? agentGroupSelectors.getAgentByIdFromGroup(activeGroupId, agentId)(s)
+      : null,
+  );
+
+  // Build metrics for TaskTitle (only for completed/error states)
+  const metrics: TaskMetrics | undefined = useMemo(() => {
+    if (isCompleted || isError) {
+      return {
+        duration: taskDetail?.duration,
+        steps: taskDetail?.totalSteps,
+        toolCalls: taskDetail?.totalToolCalls,
+      };
+    }
+    return undefined;
+  }, [
+    isCompleted,
+    isError,
+    taskDetail?.duration,
+    taskDetail?.totalSteps,
+    taskDetail?.totalToolCalls,
+  ]);
+
+  return (
+    <AccordionItem
+      expand={expanded}
+      itemKey={id}
+      onExpandChange={setExpanded}
+      paddingBlock={4}
+      paddingInline={4}
+      title={
+        <TaskTitle
+          agent={
+            agent
+              ? { avatar: agent.avatar || undefined, backgroundColor: agent.backgroundColor }
+              : undefined
+          }
+          metrics={metrics}
+          status={status}
+          title={title}
+        />
+      }
+    >
+      <Block gap={16} padding={12} style={{ marginBlock: 8 }} variant={'outlined'}>
+        {expanded && (
+          <TaskContent
+            id={id}
+            isError={isError}
+            messages={tasks}
+            status={status}
+            taskDetail={taskDetail}
+            threadId={threadId}
+          />
+        )}
+      </Block>
+    </AccordionItem>
+  );
+}, isEqual);
+
+ServerTaskItem.displayName = 'ServerTaskItem';
+
+export default ServerTaskItem;

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

@@ -0,0 +1,177 @@
+'use client';
+
+import { ThreadStatus } from '@lobechat/types';
+import { Avatar, Block, Flexbox, Icon, Text } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import { Footprints, ListChecksIcon, Wrench, XIcon } from 'lucide-react';
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+import { DEFAULT_AVATAR } from '@/const/meta';
+
+import { formatDuration, formatElapsedTime, isProcessingStatus } from '../../Tasks/shared';
+
+export interface TaskMetrics {
+  /** Task duration in milliseconds (for completed tasks) */
+  duration?: number;
+  /** Whether metrics are still loading */
+  isLoading?: boolean;
+  /** Start time timestamp for elapsed time calculation */
+  startTime?: number;
+  /** Number of execution steps/blocks */
+  steps?: number;
+  /** Total tool calls count */
+  toolCalls?: number;
+}
+
+interface TaskTitleProps {
+  /** Agent info for avatar display */
+  agent?: {
+    avatar?: string;
+    backgroundColor?: string | null;
+  };
+  /** Metrics to display (steps, tool calls, elapsed time) */
+  metrics?: TaskMetrics;
+  status?: ThreadStatus;
+  title?: string;
+}
+
+const TaskStatusIndicator = memo<{ status?: ThreadStatus }>(({ status }) => {
+  const isCompleted = status === ThreadStatus.Completed;
+  const isError = status === ThreadStatus.Failed || status === ThreadStatus.Cancel;
+  const isProcessing = status ? isProcessingStatus(status) : false;
+  const isInitializing = !status;
+
+  let icon;
+
+  if (isCompleted) {
+    icon = <Icon color={cssVar.colorSuccess} icon={ListChecksIcon} />;
+  } else if (isError) {
+    icon = <Icon color={cssVar.colorError} icon={XIcon} />;
+  } else if (isProcessing || isInitializing) {
+    icon = <NeuralNetworkLoading size={16} />;
+  } else {
+    return null;
+  }
+
+  return (
+    <Block
+      align={'center'}
+      flex={'none'}
+      gap={4}
+      height={24}
+      horizontal
+      justify={'center'}
+      style={{
+        fontSize: 12,
+      }}
+      variant={'outlined'}
+      width={24}
+    >
+      {icon}
+    </Block>
+  );
+});
+
+TaskStatusIndicator.displayName = 'TaskStatusIndicator';
+
+interface MetricsDisplayProps {
+  metrics: TaskMetrics;
+  status?: ThreadStatus;
+}
+
+const MetricsDisplay = memo<MetricsDisplayProps>(({ metrics, status }) => {
+  const { t } = useTranslation('chat');
+  const { steps, toolCalls, startTime, duration, isLoading } = metrics;
+  const [elapsedTime, setElapsedTime] = useState(0);
+
+  const isProcessing = status ? isProcessingStatus(status) : false;
+
+  // Calculate initial elapsed time
+  useEffect(() => {
+    if (startTime && isProcessing) {
+      setElapsedTime(Math.max(0, Date.now() - startTime));
+    }
+  }, [startTime, isProcessing]);
+
+  // Timer for updating elapsed time every second (only when processing)
+  useEffect(() => {
+    if (!startTime || !isProcessing) return;
+
+    const timer = setInterval(() => {
+      setElapsedTime(Math.max(0, Date.now() - startTime));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [startTime, isProcessing]);
+
+  // Don't show metrics if loading or no data
+  if (isLoading) return null;
+
+  const hasSteps = steps !== undefined && steps > 0;
+  const hasToolCalls = toolCalls !== undefined && toolCalls > 0;
+  const hasTime = isProcessing ? startTime !== undefined : duration !== undefined;
+
+  // Don't render if no metrics to show
+  if (!hasSteps && !hasToolCalls && !hasTime) return null;
+
+  return (
+    <Flexbox align="center" gap={8} horizontal>
+      {/* Steps */}
+      {hasSteps && (
+        <Flexbox align="center" gap={2} horizontal>
+          <Icon color={cssVar.colorTextTertiary} icon={Footprints} size={12} />
+          <Text fontSize={12} type="secondary">
+            {steps}
+          </Text>
+        </Flexbox>
+      )}
+      {/* Tool calls */}
+      {hasToolCalls && (
+        <Flexbox align="center" gap={2} horizontal>
+          <Icon color={cssVar.colorTextTertiary} icon={Wrench} size={12} />
+          <Text fontSize={12} type="secondary">
+            {toolCalls}
+          </Text>
+        </Flexbox>
+      )}
+      {/* Time */}
+      {hasTime && (
+        <Text fontSize={12} type="secondary">
+          {isProcessing
+            ? formatElapsedTime(elapsedTime)
+            : duration
+              ? t('task.metrics.duration', { duration: formatDuration(duration) })
+              : null}
+        </Text>
+      )}
+    </Flexbox>
+  );
+});
+
+MetricsDisplay.displayName = 'MetricsDisplay';
+
+const TaskTitle = memo<TaskTitleProps>(({ title, status, metrics, agent }) => {
+  return (
+    <Flexbox align="center" gap={6} horizontal>
+      <TaskStatusIndicator status={status} />
+      {agent && (
+        <Avatar
+          avatar={agent.avatar || DEFAULT_AVATAR}
+          background={agent.backgroundColor || undefined}
+          shape={'circle'}
+          size={20}
+        />
+      )}
+      <Text ellipsis fontSize={14}>
+        {title}
+      </Text>
+      {metrics && <MetricsDisplay metrics={metrics} status={status} />}
+    </Flexbox>
+  );
+});
+
+TaskTitle.displayName = 'TaskTitle';
+
+export default TaskTitle;

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

@@ -0,0 +1,26 @@
+'use client';
+
+import type { UIChatMessage } from '@lobechat/types';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import ClientTaskItem from './ClientTaskItem';
+import ServerTaskItem from './ServerTaskItem';
+
+interface TaskItemProps {
+  item: UIChatMessage;
+}
+
+const TaskItem = memo<TaskItemProps>(({ item }) => {
+  const isClientMode = item.taskDetail?.clientMode;
+
+  if (isClientMode) {
+    return <ClientTaskItem item={item} />;
+  }
+
+  return <ServerTaskItem item={item} />;
+}, isEqual);
+
+TaskItem.displayName = 'TaskItem';
+
+export default TaskItem;

package/src/features/Conversation/Messages/GroupTasks/TaskItem/useClientTaskStats.ts

@@ -0,0 +1,93 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { displayMessageSelectors } from '@/store/chat/selectors';
+import { messageMapKey } from '@/store/chat/utils/messageMapKey';
+
+export interface ClientTaskStats {
+  isLoading: boolean;
+  startTime?: number;
+  steps: number;
+  toolCalls: number;
+}
+
+interface UseClientTaskStatsOptions {
+  /** Agent ID from the task message (use task's agentId, not activeAgentId) */
+  agentId?: string;
+  enabled?: boolean;
+  /** Group ID from the task message (use task's groupId, not activeGroupId) */
+  groupId?: string;
+  threadId?: string;
+}
+
+/**
+ * Hook to fetch thread messages and compute task statistics for client mode tasks.
+ * Used in TaskItem to display progress metrics (steps, tool calls, elapsed time).
+ */
+export const useClientTaskStats = ({
+  agentId: propAgentId,
+  groupId,
+  threadId,
+  enabled = true,
+}: UseClientTaskStatsOptions): ClientTaskStats => {
+  // Use task message's agentId to query with the correct SubAgent ID that created the thread
+  // Fall back to activeAgentId if not provided
+  const [activeAgentId, activeTopicId, useFetchMessages] = useChatStore((s) => [
+    s.activeAgentId,
+    s.activeTopicId,
+    s.useFetchMessages,
+  ]);
+
+  const agentId = propAgentId || activeAgentId;
+
+  const threadContext = useMemo(
+    () => ({
+      agentId,
+      groupId,
+      scope: 'thread' as const,
+      threadId,
+      topicId: activeTopicId,
+    }),
+    [agentId, groupId, activeTopicId, threadId],
+  );
+
+  const threadMessageKey = useMemo(
+    () => (threadId ? messageMapKey(threadContext) : null),
+    [threadId, threadContext],
+  );
+
+  // Fetch thread messages (skip when disabled or no threadId)
+  useFetchMessages(threadContext, !enabled || !threadId);
+
+  // Get thread messages from store using selector
+  const threadMessages = useChatStore((s) =>
+    threadMessageKey
+      ? displayMessageSelectors.getDisplayMessagesByKey(threadMessageKey)(s)
+      : undefined,
+  );
+
+  // Compute stats from thread messages
+  return useMemo(() => {
+    if (!threadMessages || !enabled) {
+      return { isLoading: true, steps: 0, toolCalls: 0 };
+    }
+
+    // Find the assistantGroup message which contains the children blocks
+    const assistantGroupMessage = threadMessages.find((item) => item.role === 'assistantGroup');
+    const blocks = assistantGroupMessage?.children ?? [];
+
+    // Calculate stats
+    const steps = blocks.length;
+    const toolCalls = blocks.reduce((sum, block) => sum + (block.tools?.length || 0), 0);
+    const startTime = assistantGroupMessage?.createdAt;
+
+    return {
+      isLoading: false,
+      startTime,
+      steps,
+      toolCalls,
+    };
+  }, [threadMessages, enabled]);
+};