@lobehub/lobehub 2.0.10 → 2.0.12

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;

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