@lobehub/lobehub 2.0.9 → 2.0.11

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]);
+};

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

@@ -0,0 +1,151 @@
+'use client';
+
+import { type UIChatMessage } from '@lobechat/types';
+import { Block, Flexbox, GroupAvatar, Icon, Tag } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { ListTodo } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DEFAULT_AVATAR } from '@/const/meta';
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+
+import { ChatItem } from '../../ChatItem';
+import { dataSelectors, useConversationStore } from '../../store';
+import { AssistantActionsBar } from '../Task/Actions';
+import TaskItem from './TaskItem';
+
+interface GroupTasksMessageProps {
+  id: string;
+  index: number;
+}
+
+/**
+ * Custom avatar component for GroupTasks
+ * Shows GroupAvatar (only task agents, no user) with a ListTodo badge
+ */
+const GroupTasksAvatar = memo<{ avatars: { avatar?: string; background?: string }[] }>(
+  ({ avatars }) => {
+    return (
+      <Flexbox flex={'none'} height={28} style={{ position: 'relative' }} width={28}>
+        <GroupAvatar
+          avatarShape={'square'}
+          avatars={avatars.map((a) => ({
+            avatar: a.avatar || DEFAULT_AVATAR,
+            background: a.background,
+          }))}
+          cornerShape={'square'}
+          size={28}
+        />
+        <Block
+          align={'center'}
+          flex={'none'}
+          height={16}
+          justify={'center'}
+          style={{
+            borderRadius: 4,
+            position: 'absolute',
+            right: -4,
+            top: -4,
+          }}
+          variant={'outlined'}
+          width={16}
+        >
+          <Icon color={cssVar.colorTextDescription} icon={ListTodo} size={10} />
+        </Block>
+      </Flexbox>
+    );
+  },
+);
+
+GroupTasksAvatar.displayName = 'GroupTasksAvatar';
+
+const GroupTasksMessage = memo<GroupTasksMessageProps>(({ id, index }) => {
+  const { t } = useTranslation('chat');
+  const item = useConversationStore(dataSelectors.getDisplayMessageById(id), isEqual)!;
+  const actionsConfig = useConversationStore((s) => s.actionsBar?.assistant);
+  const tasks = (item as UIChatMessage)?.tasks?.filter(Boolean) as UIChatMessage[] | undefined;
+
+  // Get unique agent IDs from tasks
+  const taskAgentIds = useMemo(() => {
+    if (!tasks) return [];
+    const ids = tasks.map((task) => task.agentId).filter(Boolean) as string[];
+    return [...new Set(ids)];
+  }, [tasks]);
+
+  // Get active group ID
+  const activeGroupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
+
+  // Get agent info (avatars and names) for all unique agents in tasks
+  const taskAgents = useAgentGroupStore((s) => {
+    if (!activeGroupId || taskAgentIds.length === 0) return [];
+    return taskAgentIds
+      .map((agentId) => {
+        const agent = agentGroupSelectors.getAgentByIdFromGroup(activeGroupId, agentId)(s);
+        return agent
+          ? { avatar: agent.avatar, background: agent.backgroundColor, title: agent.title }
+          : null;
+      })
+      .filter(Boolean) as { avatar?: string; background?: string; title?: string }[];
+  }, isEqual);
+
+  // Build title: "Agent1 / Agent2 等 N 个 agents tasks" (show max 2 agents)
+  const title = useMemo(() => {
+    const agentNames = taskAgents.map((a) => a.title).filter(Boolean);
+    if (agentNames.length === 0) return '';
+
+    const totalAgents = agentNames.length;
+    // Show at most 2 agent names
+    const displayedAgents = agentNames.slice(0, 2).join(' / ');
+
+    if (totalAgents <= 2) {
+      // Show all agent names when 2 or fewer
+      return t('task.groupTasksTitleSimple', {
+        agents: displayedAgents,
+        count: tasks?.length || 0,
+      });
+    }
+
+    // Show "Agent1 / Agent2 等 X 个 agents tasks" when more than 2
+    return t('task.groupTasksTitle', {
+      agents: displayedAgents,
+      count: totalAgents,
+      taskCount: tasks?.length || 0,
+    });
+  }, [taskAgents, tasks?.length, t]);
+
+  if (!tasks || tasks.length === 0) {
+    return null;
+  }
+
+  const { createdAt } = item;
+
+  return (
+    <ChatItem
+      aboveMessage={null}
+      actions={
+        <AssistantActionsBar actionsConfig={actionsConfig} data={item} id={id} index={index} />
+      }
+      avatar={{ title }}
+      customAvatarRender={() => <GroupTasksAvatar avatars={taskAgents} />}
+      id={id}
+      message=""
+      placement="left"
+      showTitle
+      time={createdAt}
+      titleAddon={<Tag>{t('task.groupTasks', { count: tasks.length })}</Tag>}
+    >
+      <Flexbox gap={8} width={'100%'}>
+        {tasks.map((task) => (
+          <TaskItem item={task} key={task.id} />
+        ))}
+      </Flexbox>
+    </ChatItem>
+  );
+}, isEqual);
+
+GroupTasksMessage.displayName = 'GroupTasksMessage';
+
+export default GroupTasksMessage;

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

@@ -110,7 +110,13 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing, isLat
       titleAddon={<Tag>{t('supervisor.label')}</Tag>}
     >
       {children && children.length > 0 && (
-        <Group blocks={children} disableEditing={disableEditing} id={id} messageIndex={index} />
+        <Group
+          blocks={children}
+          content={item.content}
+          disableEditing={disableEditing}
+          id={id}
+          messageIndex={index}
+        />
       )}
       {model && (
         <Usage model={model} performance={performance} provider={provider!} usage={usage} />

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { type TaskDetail, ThreadStatus } from '@lobechat/types';
-import { Flexbox } from '@lobehub/ui';
 import { memo, useMemo } from 'react';
 
 import BubblesLoading from '@/components/BubblesLoading';
@@ -9,10 +8,8 @@ import { useChatStore } from '@/store/chat';
 import { displayMessageSelectors } from '@/store/chat/selectors';
 import { messageMapKey } from '@/store/chat/utils/messageMapKey';
 
-import CompletedState from './CompletedState';
+import { TaskMessages } from '../../Tasks/shared';
 import InitializingState from './InitializingState';
-import InstructionAccordion from './InstructionAccordion';
-import ProcessingState from './ProcessingState';
 
 interface ClientTaskDetailProps {
   /** Agent ID from the task message (use task's agentId, not activeAgentId) */
@@ -24,92 +21,76 @@ interface ClientTaskDetailProps {
   taskDetail?: TaskDetail;
 }
 
-const ClientTaskDetail = memo<ClientTaskDetailProps>(({ agentId: propAgentId, groupId, taskDetail }) => {
-  const threadId = taskDetail?.threadId;
-  const isExecuting = taskDetail?.status === ThreadStatus.Processing;
-
-  // Use task message's agentId 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,
-  ]);
-
-  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],
-  );
-
-  // 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';
+const ClientTaskDetail = memo<ClientTaskDetailProps>(
+  ({ agentId: propAgentId, groupId, taskDetail }) => {
+    const threadId = taskDetail?.threadId;
+    const isExecuting = taskDetail?.status === ThreadStatus.Processing;
+
+    // Use task message's agentId 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,
+    ]);
+
+    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],
+    );
+
+    // 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 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 (
+      <TaskMessages
+        duration={taskDetail?.duration}
+        isProcessing={isExecuting}
+        messages={threadMessages}
+        model={model ?? undefined}
+        provider={provider ?? undefined}
+        startTime={assistantGroupMessage.createdAt}
+        totalCost={taskDetail?.totalCost}
+      />
+    );
+  },
+);
+
+ClientTaskDetail.displayName = 'ClientTaskDetail';
 
 export default ClientTaskDetail;