@lobehub/lobehub 2.0.9 → 2.0.11

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

@@ -2,13 +2,13 @@
 
 import { memo } from 'react';
 
+import { useChatStore } from '@/store/chat';
 import { type TaskDetail, ThreadStatus } from '@/types/index';
 
 import {
-  CompletedState,
   ErrorState,
   InitializingState,
-  ProcessingState,
+  TaskMessages,
   isProcessingStatus,
 } from '../../Tasks/shared';
 
@@ -18,30 +18,59 @@ interface StatusContentProps {
   taskDetail?: TaskDetail;
 }
 
-const StatusContent = memo<StatusContentProps>(({ taskDetail, content, messageId }) => {
+const StatusContent = memo<StatusContentProps>(({ taskDetail, messageId }) => {
   const status = taskDetail?.status;
+  const threadId = taskDetail?.threadId;
+  const isProcessing = isProcessingStatus(status);
+
+  // Get polling hook - poll for task status to get messages
+  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 task has threadId and no active operation is polling
+  // For completed tasks, this will fetch messages once (no refreshInterval needed)
+  const shouldPoll = !!threadId && !hasActiveOperationPolling;
+  const { data } = useEnablePollingTaskStatus(threadId, messageId, shouldPoll);
+
+  const messages = data?.messages;
 
   // Initializing state: no status yet (task just created, waiting for backend)
   if (!status) {
     return <InitializingState />;
   }
 
-  // Processing states: Processing, InReview, Pending, Active, Todo
-  if (isProcessingStatus(status)) {
-    return <ProcessingState messageId={messageId} taskDetail={taskDetail!} variant="detail" />;
-  }
-
-  // Completed state
-  if (status === ThreadStatus.Completed) {
-    return <CompletedState content={content} taskDetail={taskDetail!} variant="detail" />;
-  }
-
-  // Error states: Failed, Cancel
-  if (status === ThreadStatus.Failed || status === ThreadStatus.Cancel) {
-    return <ErrorState taskDetail={taskDetail!} />;
+  // Processing or Completed state with messages
+  if (messages && messages.length > 0) {
+    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
+          (status === ThreadStatus.Failed || status === ThreadStatus.Cancel) && (
+            <ErrorState taskDetail={taskDetail!} />
+          )
+        }
+      </>
+    );
   }
 
-  // Fallback to initializing state for unknown status
+  // Still loading messages
   return <InitializingState />;
 });
 

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

@@ -9,9 +9,7 @@ import { messageMapKey } from '@/store/chat/utils/messageMapKey';
 import { ThreadStatus } from '@/types/index';
 import type { UIChatMessage } from '@/types/index';
 
-import ClientTaskDetailCompletedState from '../../Task/ClientTaskDetail/CompletedState';
-import ClientTaskDetailProcessingState from '../../Task/ClientTaskDetail/ProcessingState';
-import { ErrorState, InitializingState, isProcessingStatus } from '../shared';
+import { ErrorState, InitializingState, TaskMessages, isProcessingStatus } from '../shared';
 import TaskTitle, { type TaskMetrics } from './TaskTitle';
 
 interface ClientTaskItemProps {
@@ -43,8 +41,7 @@ const ClientTaskItem = memo<ClientTaskItemProps>(({ item }) => {
 
   // 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;
+  const agentId = itemAgentId && itemAgentId !== 'supervisor' ? itemAgentId : activeAgentId;
 
   const threadContext = useMemo(
     () => ({
@@ -135,33 +132,21 @@ const ClientTaskItem = memo<ClientTaskItemProps>(({ item }) => {
         {/* Initializing State - no taskDetail yet or no blocks */}
         {(isInitializing || (isProcessing && !hasBlocks)) && <InitializingState />}
 
-        {/* Processing State - show streaming blocks */}
-        {!isInitializing && isProcessing && hasBlocks && (
-          <ClientTaskDetailProcessingState
-            assistantId={assistantGroupMessage!.id}
-            blocks={blocks!}
+        {/* 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} />}
-
-        {/* Completed State - show blocks with final result */}
-        {!isInitializing && isCompleted && taskDetail && hasBlocks && (
-          <ClientTaskDetailCompletedState
-            assistantId={assistantGroupMessage!.id}
-            blocks={blocks!}
-            duration={taskDetail.duration}
-            model={model ?? undefined}
-            provider={provider ?? undefined}
-            totalCost={taskDetail.totalCost}
-            totalTokens={taskDetail.totalTokens}
-            totalToolCalls={taskDetail.totalToolCalls}
-          />
-        )}
       </Block>
     </AccordionItem>
   );

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

@@ -1,18 +1,12 @@
 'use client';
 
-import { AccordionItem, Block, Text } from '@lobehub/ui';
+import { AccordionItem, Block } from '@lobehub/ui';
 import { memo, useMemo, useState } from 'react';
 
 import { ThreadStatus } from '@/types/index';
 import type { UIChatMessage } from '@/types/index';
 
-import {
-  CompletedState,
-  ErrorState,
-  InitializingState,
-  ProcessingState,
-  isProcessingStatus,
-} from '../shared';
+import { TaskContent } from '../shared';
 import TaskTitle, { type TaskMetrics } from './TaskTitle';
 
 interface ServerTaskItemProps {
@@ -20,17 +14,15 @@ interface ServerTaskItemProps {
 }
 
 const ServerTaskItem = memo<ServerTaskItemProps>(({ item }) => {
-  const { id, content, metadata, taskDetail } = item;
+  const { id, metadata, taskDetail, tasks } = 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;
 
   // Build metrics for TaskTitle (only for completed/error states)
   const metrics: TaskMetrics | undefined = useMemo(() => {
@@ -42,7 +34,13 @@ const ServerTaskItem = memo<ServerTaskItemProps>(({ item }) => {
       };
     }
     return undefined;
-  }, [isCompleted, isError, taskDetail?.duration, taskDetail?.totalSteps, taskDetail?.totalToolCalls]);
+  }, [
+    isCompleted,
+    isError,
+    taskDetail?.duration,
+    taskDetail?.totalSteps,
+    taskDetail?.totalToolCalls,
+  ]);
 
   return (
     <AccordionItem
@@ -54,32 +52,14 @@ const ServerTaskItem = memo<ServerTaskItemProps>(({ item }) => {
       title={<TaskTitle 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 */}
-        {isInitializing && <InitializingState />}
-
-        {/* Processing State */}
-        {!isInitializing && isProcessing && taskDetail && (
-          <ProcessingState messageId={id} taskDetail={taskDetail} variant="compact" />
-        )}
-
-        {/* Error State */}
-        {!isInitializing && isError && taskDetail && <ErrorState taskDetail={taskDetail} />}
-
-        {/* Completed State */}
-        {!isInitializing && isCompleted && taskDetail && (
-          <CompletedState
-            content={content}
-            expanded={expanded}
+        {expanded && (
+          <TaskContent
+            id={id}
+            isError={isError}
+            messages={tasks}
+            status={status}
             taskDetail={taskDetail}
-            variant="compact"
+            threadId={threadId}
           />
         )}
       </Block>

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

@@ -38,6 +38,46 @@ interface ErrorStateProps {
   taskDetail: TaskDetail;
 }
 
+/**
+ * Extract displayable error content from various error structures
+ */
+const getErrorContent = (error: Record<string, any> | undefined): string | null => {
+  if (!error) return null;
+
+  // Try common error structures
+  // 1. error.error.body (TRPC style)
+  if (error.error?.body) {
+    return JSON.stringify(error.error.body, null, 2);
+  }
+
+  // 2. error.body (direct body)
+  if (error.body && typeof error.body === 'object') {
+    return JSON.stringify(error.body, null, 2);
+  }
+
+  // 3. error.message (if it's not "[object Object]")
+  if (error.message && typeof error.message === 'string' && error.message !== '[object Object]') {
+    return error.message;
+  }
+
+  // 4. If error itself is an object with meaningful content, stringify it
+  // Skip if it only has a useless message field
+  const keys = Object.keys(error);
+  if (keys.length > 0) {
+    // Filter out useless "[object Object]" values
+    const meaningfulEntries = Object.entries(error).filter(([, value]) => {
+      if (typeof value === 'string' && value === '[object Object]') return false;
+      return true;
+    });
+
+    if (meaningfulEntries.length > 0) {
+      return JSON.stringify(Object.fromEntries(meaningfulEntries), null, 2);
+    }
+  }
+
+  return null;
+};
+
 const ErrorState = memo<ErrorStateProps>(({ taskDetail }) => {
   const { t } = useTranslation('chat');
 
@@ -49,6 +89,9 @@ const ErrorState = memo<ErrorStateProps>(({ taskDetail }) => {
   const formattedDuration = useMemo(() => formatDuration(duration), [duration]);
   const formattedCost = useMemo(() => formatCost(totalCost), [totalCost]);
 
+  // Extract error content
+  const errorContent = useMemo(() => getErrorContent(error), [error]);
+
   const hasMetrics = !!(formattedDuration || totalToolCalls || totalMessages || formattedCost);
 
   return (
@@ -56,14 +99,14 @@ const ErrorState = memo<ErrorStateProps>(({ taskDetail }) => {
       {/* Error Content */}
       <Alert
         extra={
-          error?.error?.body && (
+          errorContent && (
             <Highlighter
               actionIconSize={'small'}
               language={'json'}
               padding={8}
               variant={'borderless'}
             >
-              {JSON.stringify(error?.error?.body, null, 2)}
+              {errorContent}
             </Highlighter>
           )
         }

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;