@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/lib/features/agent/chat/ModernAgentOutput/ToolCallGroup.js

@@ -0,0 +1,643 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AgentMessageType } from '@vertesia/common';
+import { Button, cn, onActivateKey, useToast } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useUserSession } from '@vertesia/ui/session';
+import { MarkdownRenderer } from '@vertesia/ui/widgets';
+import dayjs from 'dayjs';
+import { AlertCircle, AlertTriangle, Bot, CheckCircle, ChevronDown, ChevronRight, CopyIcon } from 'lucide-react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { PulsatingCircle } from '../AnimatedThinkingDots';
+import { useImageLightbox } from '../ImageLightbox';
+import { getArtifactCacheKey, useArtifactUrlCache } from '../useArtifactUrlCache.js';
+/** Keys that are internal metadata and not interesting to display */
+const META_KEYS = new Set([
+    'tool',
+    'tool_event',
+    'tool_run_id',
+    'tool_use_id',
+    'activity_group_id',
+    'event_class',
+    'tool_iteration',
+    'tool_status',
+    'message_to_human',
+    'tools',
+    'streamed',
+    'files',
+    'outputFiles',
+    'display_role',
+    'observation',
+    'progress_messages',
+    'browseruse',
+    'browser_use',
+]);
+/** Filter out internal metadata keys, return user-facing detail entries */
+function extractInterestingDetails(details) {
+    if (!details)
+        return [];
+    return Object.entries(details).filter(([key, value]) => !META_KEYS.has(key) && value !== undefined && value !== null && value !== '');
+}
+/** Convert snake_case or camelCase key to a readable label */
+function formatDetailKey(key) {
+    return key
+        .replace(/_/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/^./, (c) => c.toUpperCase());
+}
+function getProgressDetails(details) {
+    const value = details?.progress_messages;
+    if (!Array.isArray(value))
+        return [];
+    return value.flatMap((entry) => {
+        if (!entry || typeof entry !== 'object')
+            return [];
+        const item = entry;
+        const message = typeof item.message === 'string' ? item.message.trim() : '';
+        if (!message)
+            return [];
+        const status = typeof item.status === 'string' ? item.status : undefined;
+        const timestamp = typeof item.timestamp === 'number' || typeof item.timestamp === 'string' ? item.timestamp : undefined;
+        return [{ message, status, timestamp }];
+    });
+}
+function getProgressDetailKey(item) {
+    return ['progress', item.timestamp ?? 'no-time', item.status ?? 'status', item.message].join(':');
+}
+function getToolMessageKey(message) {
+    const details = message.details;
+    const toolRunId = typeof details?.tool_run_id === 'string' ? details.tool_run_id : undefined;
+    if (toolRunId)
+        return `tool-run:${toolRunId}`;
+    const activityGroupId = typeof details?.activity_group_id === 'string' ? details.activity_group_id : undefined;
+    const toolUseId = typeof details?.tool_use_id === 'string' ? details.tool_use_id : undefined;
+    if (activityGroupId || toolUseId) {
+        return `tool:${activityGroupId ?? 'no-activity'}:${toolUseId ?? 'no-use'}`;
+    }
+    return [
+        'message',
+        message.workstream_id ?? 'main',
+        message.type,
+        message.timestamp,
+        getMessageActivityLabel(message),
+    ].join(':');
+}
+function areMessagesRenderEqual(prevMessage, nextMessage) {
+    return (prevMessage.timestamp === nextMessage.timestamp &&
+        prevMessage.type === nextMessage.type &&
+        prevMessage.message === nextMessage.message &&
+        prevMessage.details === nextMessage.details &&
+        prevMessage.workstream_id === nextMessage.workstream_id &&
+        prevMessage.workflow_run_id === nextMessage.workflow_run_id);
+}
+/** Badge color per status */
+function statusBadgeClass(status) {
+    switch (status) {
+        case 'completed':
+            return 'bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800';
+        case 'running':
+            return 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800';
+        case 'error':
+            return 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800';
+        case 'warning':
+            return 'bg-yellow-50 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800';
+        default:
+            return '';
+    }
+}
+/**
+ * Merge messages within a tool group by tool_run_id.
+ * Running + completed messages for the same tool_run_id are collapsed into
+ * a single visual item: the running message provides display text (message_to_human),
+ * while the completed message provides status, files, and observation.
+ */
+function mergeByToolRunId(messages) {
+    const byRunId = new Map();
+    const result = [];
+    for (const msg of messages) {
+        const runId = msg.details?.tool_run_id;
+        if (runId) {
+            if (!byRunId.has(runId)) {
+                byRunId.set(runId, []);
+            }
+            byRunId.get(runId)?.push(msg);
+        }
+        else {
+            result.push(msg);
+        }
+    }
+    // For each tool_run_id group, merge into one message
+    for (const [_runId, msgs] of byRunId) {
+        if (msgs.length <= 1) {
+            result.push(...msgs);
+            continue;
+        }
+        // Sort by timestamp: earliest first
+        msgs.sort((a, b) => {
+            const ta = typeof a.timestamp === 'number' ? a.timestamp : new Date(a.timestamp).getTime();
+            const tb = typeof b.timestamp === 'number' ? b.timestamp : new Date(b.timestamp).getTime();
+            return ta - tb;
+        });
+        // Take the last message as the base (has final status), but prefer
+        // message text from the start/progress messages for the display body.
+        const base = msgs[msgs.length - 1];
+        const startMsg = msgs.find((m) => m.details?.tool_event === 'started');
+        const runningMsg = msgs.find((m) => m.details?.tool_status === 'running');
+        const textSource = startMsg ?? runningMsg ?? msgs.find((m) => m.message?.trim());
+        const messageToHuman = typeof textSource?.details?.message_to_human === 'string' ? textSource.details.message_to_human : undefined;
+        const displayMessage = messageToHuman || textSource?.message || base.message;
+        const progressMessages = msgs
+            .filter((msg) => msg.details?.tool_event === 'progress' && msg.message?.trim())
+            .map((msg) => ({
+            message: msg.message.trim(),
+            status: msg.details?.tool_status,
+            timestamp: msg.timestamp,
+        }));
+        const mergedDetails = {};
+        for (const msg of msgs) {
+            Object.assign(mergedDetails, msg.details);
+        }
+        if (progressMessages.length > 0) {
+            mergedDetails.progress_messages = progressMessages;
+        }
+        result.push({
+            ...base,
+            message: displayMessage,
+            details: mergedDetails,
+        });
+    }
+    // Re-sort by timestamp to maintain chronological order
+    result.sort((a, b) => {
+        const ta = typeof a.timestamp === 'number' ? a.timestamp : new Date(a.timestamp).getTime();
+        const tb = typeof b.timestamp === 'number' ? b.timestamp : new Date(b.timestamp).getTime();
+        return ta - tb;
+    });
+    return result;
+}
+// Helper to check if URL is an image
+const isImageUrl = (url) => /\.(png|jpg|jpeg|gif|webp|svg)(\?|$)/i.test(url);
+// Component to render files (images inline, others as links)
+function FileDisplay({ files, className: fileClassName }) {
+    const { t } = useUITranslation();
+    const { openImage } = useImageLightbox();
+    if (!files || files.length === 0)
+        return null;
+    return (_jsx("div", { className: cn('mt-2 flex flex-wrap gap-2', fileClassName), children: files.map((file, idx) => {
+            const fileName = file.split('/').pop()?.split('?')[0] || 'file';
+            if (isImageUrl(file)) {
+                return (_jsx(Button, { variant: "unstyled", className: "cursor-pointer p-0", onClick: () => openImage(file, fileName), title: t('agent.clickToEnlarge'), "aria-label": fileName, children: _jsx("img", { src: file, alt: fileName, className: "max-w-[300px] max-h-[200px] rounded border hover:opacity-80 transition-opacity hover:shadow-lg" }) }, idx));
+            }
+            return (_jsxs("a", { href: file, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 px-2 py-1 bg-muted rounded text-xs hover:bg-muted/80", children: ["\uD83D\uDCCE ", fileName] }, idx));
+        }) }));
+}
+// Helper to get files from tool details (checks both files and outputFiles)
+const getFilesFromDetails = (details) => {
+    if (!details)
+        return undefined;
+    const files = details.files ?? details.outputFiles;
+    return Array.isArray(files) ? files : undefined;
+};
+const TOOL_BADGE_CLASS = 'text-[10px] px-1.5 py-0.5 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800 font-medium';
+const ASSISTANT_BADGE_CLASS = 'text-[10px] px-1.5 py-0.5 rounded-md bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 font-medium';
+const isToolPreambleMessage = (message) => {
+    const details = message.details;
+    return message.type === AgentMessageType.THOUGHT && details?.display_role === 'tool_preamble';
+};
+const getMessageActivityLabel = (message) => {
+    const details = message.details;
+    if (isToolPreambleMessage(message))
+        return 'assistant';
+    if (details?.tool)
+        return details.tool;
+    switch (message.type) {
+        case AgentMessageType.UPDATE:
+            return 'update';
+        case AgentMessageType.WARNING:
+            return 'warning';
+        case AgentMessageType.ERROR:
+            return 'error';
+        case AgentMessageType.SYSTEM:
+            return 'system';
+        default:
+            return 'activity';
+    }
+};
+const getMessageBadgeClass = (message) => {
+    return isToolPreambleMessage(message) ? ASSISTANT_BADGE_CLASS : TOOL_BADGE_CLASS;
+};
+function ToolCallItem({ message, isExpanded, onToggle, artifactRunId, classNames = {} }) {
+    const { t } = useUITranslation();
+    const [resolvedFiles, setResolvedFiles] = useState([]);
+    const toast = useToast();
+    const { client } = useUserSession();
+    const urlCache = useArtifactUrlCache();
+    // PERFORMANCE: Use refs to avoid triggering effect re-runs when these stable values change identity
+    const clientRef = useRef(client);
+    clientRef.current = client;
+    const urlCacheRef = useRef(urlCache);
+    urlCacheRef.current = urlCache;
+    const details = message.details;
+    const toolName = getMessageActivityLabel(message);
+    const badgeClass = getMessageBadgeClass(message);
+    const files = getFilesFromDetails(details);
+    const messageContent = typeof message.message === 'string' ? message.message : '';
+    // Resolve artifact paths to signed URLs
+    useEffect(() => {
+        if (!files || files.length === 0 || !artifactRunId) {
+            setResolvedFiles([]);
+            return;
+        }
+        let cancelled = false;
+        const resolveFiles = async () => {
+            const currentClient = clientRef.current;
+            const currentUrlCache = urlCacheRef.current;
+            const resolved = await Promise.all(files.map(async (file) => {
+                if (!file || typeof file !== 'string')
+                    return null;
+                // If it's already a full URL, return as-is
+                if (file.startsWith('http://') || file.startsWith('https://')) {
+                    return file;
+                }
+                // Strip artifact: protocol prefix to get the artifact-relative path
+                const artifactPath = file.startsWith('artifact:') ? file.slice(9) : file;
+                const ext = artifactPath.split('.').pop()?.toLowerCase() || '';
+                const imageExtensions = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg']);
+                const isImage = imageExtensions.has(ext);
+                const disposition = isImage ? 'inline' : 'attachment';
+                try {
+                    const cacheKey = getArtifactCacheKey(artifactRunId, artifactPath, disposition);
+                    if (currentUrlCache) {
+                        return await currentUrlCache.getOrFetch(cacheKey, async () => {
+                            const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, disposition);
+                            return result.url;
+                        });
+                    }
+                    else {
+                        const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, disposition);
+                        return result.url;
+                    }
+                }
+                catch (err) {
+                    console.error(`Failed to resolve artifact URL for ${artifactPath}`, err);
+                    return null;
+                }
+            }));
+            if (!cancelled) {
+                setResolvedFiles(resolved.filter((f) => !!f));
+            }
+        };
+        void resolveFiles();
+        return () => {
+            cancelled = true;
+        };
+    }, [files, artifactRunId]);
+    // Separate image files from other files for inline preview
+    const imageFiles = resolvedFiles.filter((f) => isImageUrl(f));
+    const nonImageFiles = resolvedFiles.filter((f) => !isImageUrl(f));
+    const copyToClipboard = () => {
+        const textToCopy = [messageContent, details ? `\n\nDetails:\n${JSON.stringify(details, null, 2)}` : '']
+            .join('')
+            .trim();
+        navigator.clipboard.writeText(textToCopy).then(() => {
+            toast({
+                status: 'success',
+                title: t('agent.copiedToClipboard'),
+                duration: 2000,
+            });
+        });
+    };
+    return (_jsxs("div", { className: cn('border-b border-gray-100 dark:border-gray-800 last:border-b-0', classNames.itemClassName), children: [_jsxs("div", { role: "button", tabIndex: 0, className: cn('flex items-start justify-between px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors', classNames.itemHeaderClassName), onClick: onToggle, onKeyDown: onActivateKey(onToggle), children: [_jsxs("div", { className: "flex items-start gap-2 flex-1 min-w-0", children: [_jsx("div", { className: "flex-shrink-0 pt-0.5", children: isExpanded ? (_jsx(ChevronDown, { className: "size-3 text-muted" })) : (_jsx(ChevronRight, { className: "size-3 text-muted cn-rtl-flip" })) }), _jsx("div", { className: "flex-1 min-w-0", children: messageContent ? (_jsx("span", { className: "text-xs text-foreground line-clamp-2", children: messageContent })) : (_jsxs("span", { className: "text-xs text-muted italic", children: ["Activity: ", toolName] })) })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [!isExpanded && _jsx("span", { className: cn(badgeClass, classNames.toolBadgeClassName), children: toolName }), _jsx(Button, { variant: "ghost", size: "xs", onClick: (e) => {
+                                    e.stopPropagation();
+                                    copyToClipboard();
+                                }, className: "text-muted opacity-0 group-hover:opacity-100 transition-opacity", title: t('agent.copyMessage'), children: _jsx(CopyIcon, { className: "size-3" }) })] })] }), imageFiles.length > 0 && (_jsx("div", { className: "px-3 pb-1.5", children: _jsx(FileDisplay, { files: imageFiles }) })), isExpanded &&
+                (() => {
+                    const toolStatusValue = details?.tool_status;
+                    const interestingDetails = extractInterestingDetails(details);
+                    const progressDetails = getProgressDetails(details);
+                    return (_jsxs("div", { className: cn('px-4 py-2 bg-gray-50/50 dark:bg-gray-800/30', classNames.itemContentClassName), children: [_jsxs("div", { className: "flex items-center gap-2 mb-2 flex-wrap", children: [_jsx("span", { className: cn(badgeClass, classNames.toolBadgeClassName), children: toolName }), toolStatusValue && (_jsx("span", { className: cn('text-[10px] px-1.5 py-0.5 rounded-md border font-medium', statusBadgeClass(toolStatusValue)), children: toolStatusValue })), _jsx("span", { className: "text-[10px] text-muted/70", children: dayjs(message.timestamp).format('HH:mm:ss') })] }), interestingDetails.length > 0 && (_jsx("div", { className: "mb-2 space-y-0.5", children: interestingDetails.map(([key, value]) => (_jsxs("div", { className: "flex gap-1.5 text-xs", children: [_jsxs("span", { className: "text-muted font-medium flex-shrink-0", children: [formatDetailKey(key), ":"] }), _jsx("span", { className: "text-foreground break-all", children: typeof value === 'object' ? JSON.stringify(value) : String(value) })] }, key))) })), progressDetails.length > 0 && (_jsxs("div", { className: "mb-2 space-y-1", children: [_jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted/70 font-medium", children: t('agent.progress') }), progressDetails.map((item) => (_jsxs("div", { className: "text-xs text-muted", children: [item.timestamp && (_jsx("span", { className: "me-1 text-muted/60", children: dayjs(item.timestamp).format('HH:mm:ss') })), _jsx("span", { children: item.message })] }, getProgressDetailKey(item))))] })), (() => {
+                                const observation = typeof details?.observation === 'string' ? details.observation : undefined;
+                                if (observation && observation !== messageContent) {
+                                    return (_jsx("div", { className: "vprose prose prose-slate dark:prose-invert prose-p:leading-relaxed prose-p:my-1.5 max-w-none text-sm", children: _jsx(MarkdownRenderer, { artifactRunId: artifactRunId, children: observation }) }));
+                                }
+                                return null;
+                            })(), nonImageFiles.length > 0 && _jsx(FileDisplay, { files: nonImageFiles })] }));
+                })()] }));
+}
+// Component for resolving and displaying non-image files from a collapsed tool message
+// Note: Images are shown at the group level by GroupImageDisplay, so this only shows other files
+function CollapsedItemFiles({ files, artifactRunId }) {
+    const [resolvedFiles, setResolvedFiles] = useState([]);
+    const { client } = useUserSession();
+    const urlCache = useArtifactUrlCache();
+    const clientRef = useRef(client);
+    clientRef.current = client;
+    const urlCacheRef = useRef(urlCache);
+    urlCacheRef.current = urlCache;
+    useEffect(() => {
+        if (!files || files.length === 0 || !artifactRunId) {
+            setResolvedFiles([]);
+            return;
+        }
+        let cancelled = false;
+        const resolveFiles = async () => {
+            const currentClient = clientRef.current;
+            const currentUrlCache = urlCacheRef.current;
+            const resolved = await Promise.all(files.map(async (file) => {
+                if (!file || typeof file !== 'string')
+                    return null;
+                // Strip artifact: protocol prefix to get the artifact-relative path
+                const artifactPath = file.startsWith('artifact:') ? file.slice(9) : file;
+                // Skip image files - they're shown at the group level
+                const ext = artifactPath.split('.').pop()?.toLowerCase() || '';
+                const imageExtensions = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg']);
+                if (imageExtensions.has(ext))
+                    return null;
+                if (artifactPath.startsWith('http://') || artifactPath.startsWith('https://')) {
+                    return artifactPath;
+                }
+                try {
+                    const cacheKey = getArtifactCacheKey(artifactRunId, artifactPath, 'attachment');
+                    if (currentUrlCache) {
+                        return await currentUrlCache.getOrFetch(cacheKey, async () => {
+                            const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, 'attachment');
+                            return result.url;
+                        });
+                    }
+                    else {
+                        const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, 'attachment');
+                        return result.url;
+                    }
+                }
+                catch (err) {
+                    console.error(`Failed to resolve artifact URL for ${artifactPath}`, err);
+                    return null;
+                }
+            }));
+            if (!cancelled) {
+                setResolvedFiles(resolved.filter((f) => !!f));
+            }
+        };
+        void resolveFiles();
+        return () => {
+            cancelled = true;
+        };
+    }, [files, artifactRunId]);
+    // Only show non-image files (images are shown at group level)
+    if (resolvedFiles.length === 0)
+        return null;
+    return (_jsx("div", { className: "ps-4 pe-2 pb-1.5", children: _jsx(FileDisplay, { files: resolvedFiles }) }));
+}
+// Component to show images from the most recent tool call prominently at the top
+function GroupImageDisplay({ messages, artifactRunId }) {
+    const [resolvedImages, setResolvedImages] = useState([]);
+    const { client } = useUserSession();
+    const urlCache = useArtifactUrlCache();
+    const clientRef = useRef(client);
+    clientRef.current = client;
+    const urlCacheRef = useRef(urlCache);
+    urlCacheRef.current = urlCache;
+    // Only show files from the last (most recent) message in the group
+    useEffect(() => {
+        if (!artifactRunId || messages.length === 0) {
+            setResolvedImages([]);
+            return;
+        }
+        // Get files from only the last message (most recent tool output)
+        const lastMessage = messages[messages.length - 1];
+        const details = lastMessage.details;
+        const files = getFilesFromDetails(details);
+        if (!files || files.length === 0) {
+            setResolvedImages([]);
+            return;
+        }
+        let cancelled = false;
+        const resolveFiles = async () => {
+            const currentClient = clientRef.current;
+            const currentUrlCache = urlCacheRef.current;
+            const resolved = await Promise.all(files.map(async (file) => {
+                if (!file || typeof file !== 'string')
+                    return null;
+                // Strip artifact: protocol prefix to get the artifact-relative path
+                const artifactPath = file.startsWith('artifact:') ? file.slice(9) : file;
+                // Check if it's an image file
+                const ext = artifactPath.split('.').pop()?.toLowerCase() || '';
+                const imageExtensions = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg']);
+                if (!imageExtensions.has(ext))
+                    return null;
+                // If it's already a full URL, return as-is
+                if (artifactPath.startsWith('http://') || artifactPath.startsWith('https://')) {
+                    return artifactPath;
+                }
+                try {
+                    const cacheKey = getArtifactCacheKey(artifactRunId, artifactPath, 'inline');
+                    if (currentUrlCache) {
+                        return await currentUrlCache.getOrFetch(cacheKey, async () => {
+                            const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, 'inline');
+                            return result.url;
+                        });
+                    }
+                    else {
+                        const result = await currentClient.files.getArtifactDownloadUrl(artifactRunId, artifactPath, 'inline');
+                        return result.url;
+                    }
+                }
+                catch (err) {
+                    console.error(`Failed to resolve artifact URL for ${artifactPath}`, err);
+                    return null;
+                }
+            }));
+            if (!cancelled) {
+                setResolvedImages(resolved.filter((f) => !!f));
+            }
+        };
+        void resolveFiles();
+        return () => {
+            cancelled = true;
+        };
+    }, [messages, artifactRunId]);
+    if (resolvedImages.length === 0)
+        return null;
+    return (_jsx("div", { className: "px-3 py-1.5 border-b border-gray-100 dark:border-gray-800", children: _jsx(FileDisplay, { files: resolvedImages }) }));
+}
+function ToolCallGroupComponent({ messages: rawMessages, showPulsatingCircle = false, toolRunId: _toolRunId, toolStatus, preambleText, preambleMessage: _preambleMessage, rootClassName, headerClassName, senderClassName, toolSummaryClassName, toolBadgeClassName, itemClassName, itemHeaderClassName, itemContentClassName, }) {
+    // Merge messages sharing the same tool_run_id into single visual items
+    const messages = useMemo(() => mergeByToolRunId(rawMessages), [rawMessages]);
+    const messageKeys = useMemo(() => messages.map(getToolMessageKey), [messages]);
+    const [isCollapsed, setIsCollapsed] = useState(true);
+    const [expandedItems, setExpandedItems] = useState(new Set());
+    const [animatingItems, setAnimatingItems] = useState(new Set());
+    const previousKeysRef = useRef(messageKeys);
+    const { t } = useUITranslation();
+    const toast = useToast();
+    // Extract workflow_run_id from messages (any message in the group should have it)
+    const artifactRunId = messages.find((m) => m.workflow_run_id)?.workflow_run_id ?? messages[0]?.workflow_run_id;
+    // Render status indicator based on tool execution status
+    const renderStatusIndicator = () => {
+        // Only pulse for the currently active/latest group
+        if (showPulsatingCircle) {
+            return _jsx(PulsatingCircle, { size: "sm", color: "blue" });
+        }
+        if (toolStatus === 'running') {
+            return _jsx("span", { className: "size-2 rounded-full bg-blue-500 inline-block" });
+        }
+        if (toolStatus === 'completed') {
+            return _jsx(CheckCircle, { className: "size-4 text-success" });
+        }
+        if (toolStatus === 'error') {
+            return _jsx(AlertCircle, { className: "size-4 text-destructive" });
+        }
+        if (toolStatus === 'warning') {
+            return _jsx(AlertTriangle, { className: "size-4 text-attention" });
+        }
+        return _jsx(Bot, { className: "size-4 text-purple-600 dark:text-purple-400" });
+    };
+    // Get border color based on status
+    const getBorderColor = () => {
+        if (toolStatus === 'completed')
+            return 'border-s-success';
+        if (toolStatus === 'error')
+            return 'border-s-destructive';
+        if (toolStatus === 'warning')
+            return 'border-s-attention';
+        return 'border-s-purple-500';
+    };
+    // Animate new messages when they're added
+    useEffect(() => {
+        const previousKeys = previousKeysRef.current;
+        const previousKeySet = new Set(previousKeys);
+        const newKeys = messageKeys.filter((key) => !previousKeySet.has(key));
+        if (newKeys.length > 0) {
+            setAnimatingItems(new Set(newKeys));
+            // Clear animation after it completes
+            const timer = setTimeout(() => {
+                setAnimatingItems(new Set());
+            }, 500);
+            previousKeysRef.current = messageKeys;
+            return () => clearTimeout(timer);
+        }
+        previousKeysRef.current = messageKeys;
+    }, [messageKeys]);
+    const firstMessage = messages[0];
+    const lastMessage = messages[messages.length - 1];
+    const firstTimestamp = firstMessage.timestamp;
+    const lastTimestamp = lastMessage.timestamp;
+    // Get tool names for summary
+    const toolNames = messages.map((m) => getMessageActivityLabel(m));
+    const uniqueToolCount = new Set(toolNames).size;
+    const toolSummary = uniqueToolCount === 1 ? `${messages.length}× ${toolNames[0]}` : `${messages.length} activity updates`;
+    const toggleItem = (itemKey) => {
+        setExpandedItems((prev) => {
+            const next = new Set(prev);
+            if (next.has(itemKey)) {
+                next.delete(itemKey);
+            }
+            else {
+                next.add(itemKey);
+            }
+            return next;
+        });
+    };
+    const copyAllToClipboard = () => {
+        const allContent = messages
+            .map((m) => {
+            const details = m.details;
+            return `[${getMessageActivityLabel(m)}] ${m.message || ''}\n${details ? JSON.stringify(details, null, 2) : ''}`;
+        })
+            .join('\n\n---\n\n');
+        navigator.clipboard.writeText(allContent).then(() => {
+            toast({
+                status: 'success',
+                title: t('agent.copiedAllToolCalls'),
+                duration: 2000,
+            });
+        });
+    };
+    return (_jsxs("div", { className: cn('border-s-4 overflow-hidden bg-white dark:bg-gray-900 mb-4', getBorderColor(), rootClassName), children: [_jsxs("div", { role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, className: cn('flex items-center justify-between px-4 py-1.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors', headerClassName), onClick: () => setIsCollapsed(!isCollapsed), onKeyDown: onActivateKey(() => setIsCollapsed(!isCollapsed)), children: [_jsxs("div", { className: "flex items-center gap-1 flex-1 min-w-0", children: [renderStatusIndicator(), preambleText ? (_jsx("span", { className: cn('text-xs text-foreground line-clamp-2 flex-1 min-w-0', toolSummaryClassName), children: preambleText })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('text-xs font-medium text-muted', senderClassName), children: "Agent" }), _jsx("span", { className: cn('text-xs text-purple-600 dark:text-purple-400 font-medium', toolSummaryClassName), children: toolSummary })] })), isCollapsed ? (_jsx(ChevronRight, { className: "size-3 text-muted flex-shrink-0 cn-rtl-flip" })) : (_jsx(ChevronDown, { className: "size-3 text-muted flex-shrink-0" }))] }), _jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [preambleText && (_jsx("span", { className: cn('text-[10px] text-purple-600 dark:text-purple-400 font-medium', toolSummaryClassName), children: toolSummary })), _jsxs("span", { className: "text-[11px] text-muted/70", children: [dayjs(firstTimestamp).format('HH:mm:ss'), messages.length > 1 && ` - ${dayjs(lastTimestamp).format('HH:mm:ss')}`] }), _jsx(Button, { variant: "ghost", size: "xs", onClick: (e) => {
+                                    e.stopPropagation();
+                                    copyAllToClipboard();
+                                }, className: "text-muted/50 hover:text-muted h-5 w-5 p-0", title: t('agent.copyAllToolCalls'), children: _jsx(CopyIcon, { className: "size-3" }) })] })] }), _jsx(GroupImageDisplay, { messages: messages, artifactRunId: artifactRunId }), isCollapsed && (_jsx("div", { className: "px-3 py-0.5 space-y-0", children: messages.map((m, idx) => {
+                    const itemKey = messageKeys[idx] ?? getToolMessageKey(m);
+                    const details = m.details;
+                    const toolName = getMessageActivityLabel(m);
+                    const badgeClass = getMessageBadgeClass(m);
+                    const fullMessage = typeof m.message === 'string' ? m.message : '';
+                    const isAnimating = animatingItems.has(itemKey);
+                    const isItemExpanded = expandedItems.has(itemKey);
+                    const files = getFilesFromDetails(details);
+                    return (_jsxs("div", { className: cn('border-b border-gray-100 dark:border-gray-800 last:border-b-0', itemClassName), style: {
+                            opacity: isAnimating ? 0 : 1,
+                            transform: isAnimating ? 'translateX(-10px)' : 'translateX(0)',
+                            transition: 'opacity 0.3s ease-out, transform 0.3s ease-out',
+                            transitionDelay: `${(idx - (messages.length - animatingItems.size)) * 100}ms`,
+                            animation: isAnimating ? 'slideInFade 0.4s ease-out forwards' : 'none',
+                            animationDelay: `${(idx - (messages.length - animatingItems.size)) * 100}ms`,
+                        }, children: [_jsxs("div", { role: "button", tabIndex: 0, "aria-expanded": isItemExpanded, className: cn('flex items-start gap-2 py-1.5 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50', itemHeaderClassName), onClick: () => toggleItem(itemKey), onKeyDown: onActivateKey(() => toggleItem(itemKey)), title: fullMessage, children: [_jsx("div", { className: "flex-shrink-0 pt-0.5", children: isItemExpanded ? (_jsx(ChevronDown, { className: "size-3 text-muted" })) : (_jsx(ChevronRight, { className: "size-3 text-muted cn-rtl-flip" })) }), _jsx("div", { className: "flex-1 min-w-0", children: fullMessage ? (_jsx("span", { className: "text-foreground line-clamp-2", children: fullMessage })) : (_jsxs("span", { className: "text-muted italic", children: ["Activity: ", toolName] })) }), !isItemExpanded && (_jsx("span", { className: cn(badgeClass, 'flex-shrink-0', toolBadgeClassName), children: toolName }))] }), _jsx(CollapsedItemFiles, { files: files, artifactRunId: artifactRunId }), isItemExpanded &&
+                                (() => {
+                                    const toolStatusValue = details
+                                        ?.tool_status;
+                                    const interestingDetails = extractInterestingDetails(details);
+                                    const progressDetails = getProgressDetails(details);
+                                    return (_jsxs("div", { className: cn('ps-5 pe-3 pb-2 text-sm', itemContentClassName), children: [_jsxs("div", { className: "flex items-center gap-2 mb-1.5 flex-wrap", children: [_jsx("span", { className: cn(badgeClass, toolBadgeClassName), children: toolName }), toolStatusValue && (_jsx("span", { className: cn('text-[10px] px-1.5 py-0.5 rounded-md border font-medium', statusBadgeClass(toolStatusValue)), children: toolStatusValue })), _jsx("span", { className: "text-[10px] text-muted/70", children: dayjs(m.timestamp).format('HH:mm:ss') })] }), interestingDetails.length > 0 && (_jsx("div", { className: "mb-1.5 space-y-0.5", children: interestingDetails.map(([key, value]) => (_jsxs("div", { className: "flex gap-1.5 text-xs", children: [_jsxs("span", { className: "text-muted font-medium flex-shrink-0", children: [formatDetailKey(key), ":"] }), _jsx("span", { className: "text-foreground break-all", children: typeof value === 'object'
+                                                                ? JSON.stringify(value)
+                                                                : String(value) })] }, key))) })), progressDetails.length > 0 && (_jsxs("div", { className: "mb-1.5 space-y-1", children: [_jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted/70 font-medium", children: t('agent.progress') }), progressDetails.map((item) => (_jsxs("div", { className: "text-xs text-muted", children: [item.timestamp && (_jsx("span", { className: "me-1 text-muted/60", children: dayjs(item.timestamp).format('HH:mm:ss') })), _jsx("span", { children: item.message })] }, getProgressDetailKey(item))))] })), (() => {
+                                                const observation = typeof details?.observation === 'string'
+                                                    ? details.observation
+                                                    : undefined;
+                                                if (observation && observation !== fullMessage) {
+                                                    return (_jsx("div", { className: "vprose prose prose-slate dark:prose-invert prose-p:leading-relaxed prose-p:my-1.5 max-w-none text-sm", children: _jsx(MarkdownRenderer, { artifactRunId: artifactRunId, children: observation }) }));
+                                                }
+                                                return null;
+                                            })()] }));
+                                })()] }, itemKey));
+                }) })), _jsx("style", { children: `
+                @keyframes slideInFade {
+                    from {
+                        opacity: 0;
+                        transform: translateX(-10px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateX(0);
+                    }
+                }
+            ` }), !isCollapsed && (_jsx("div", { className: "group", children: messages.map((message, index) => {
+                    const itemKey = messageKeys[index] ?? getToolMessageKey(message);
+                    return (_jsx(ToolCallItem, { message: message, isExpanded: expandedItems.has(itemKey), onToggle: () => toggleItem(itemKey), artifactRunId: artifactRunId, classNames: {
+                            toolBadgeClassName,
+                            itemClassName,
+                            itemHeaderClassName,
+                            itemContentClassName,
+                        } }, itemKey));
+                }) }))] }));
+}
+// Memoize to prevent unnecessary re-renders
+const ToolCallGroup = memo(ToolCallGroupComponent, (prevProps, nextProps) => {
+    if (prevProps.messages.length !== nextProps.messages.length)
+        return false;
+    if (prevProps.showPulsatingCircle !== nextProps.showPulsatingCircle)
+        return false;
+    if (prevProps.toolRunId !== nextProps.toolRunId)
+        return false;
+    if (prevProps.toolStatus !== nextProps.toolStatus)
+        return false;
+    if (prevProps.preambleText !== nextProps.preambleText)
+        return false;
+    if (prevProps.rootClassName !== nextProps.rootClassName)
+        return false;
+    if (prevProps.headerClassName !== nextProps.headerClassName)
+        return false;
+    if (prevProps.senderClassName !== nextProps.senderClassName)
+        return false;
+    if (prevProps.toolSummaryClassName !== nextProps.toolSummaryClassName)
+        return false;
+    if (prevProps.toolBadgeClassName !== nextProps.toolBadgeClassName)
+        return false;
+    if (prevProps.itemClassName !== nextProps.itemClassName)
+        return false;
+    if (prevProps.itemHeaderClassName !== nextProps.itemHeaderClassName)
+        return false;
+    if (prevProps.itemContentClassName !== nextProps.itemContentClassName)
+        return false;
+    return prevProps.messages.every((message, index) => areMessagesRenderEqual(message, nextProps.messages[index]));
+});
+export default ToolCallGroup;
+//# sourceMappingURL=ToolCallGroup.js.map