@vertesia/ui 0.81.1 → 1.0.0-dev.20260203.130115Z

package/src/features/agent/chat/ModernAgentOutput/ToolCallGroup.tsx

@@ -0,0 +1,668 @@
+import { AgentMessage } from "@vertesia/common";
+import { Button, useToast } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { MarkdownRenderer } from "@vertesia/ui/widgets";
+import dayjs from "dayjs";
+import { Bot, ChevronDown, ChevronRight, CopyIcon, CheckCircle, AlertCircle, AlertTriangle } from "lucide-react";
+import { useState, memo, useEffect, useRef } from "react";
+import { PulsatingCircle } from "../AnimatedThinkingDots";
+import { useImageLightbox } from "../ImageLightbox";
+import { useArtifactUrlCache, getArtifactCacheKey } from "../useArtifactUrlCache.js";
+import { ToolExecutionStatus } from "./utils";
+
+interface ToolCallGroupProps {
+    messages: AgentMessage[];
+    showPulsatingCircle?: boolean;
+    toolRunId?: string;
+    toolStatus?: ToolExecutionStatus;
+}
+
+interface ToolCallItemProps {
+    message: AgentMessage;
+    isExpanded: boolean;
+    onToggle: () => void;
+    artifactRunId?: string;
+}
+
+// Helper to check if URL is an image
+const isImageUrl = (url: string) => /\.(png|jpg|jpeg|gif|webp|svg)(\?|$)/i.test(url);
+
+// Component to render files (images inline, others as links)
+function FileDisplay({ files }: { files: string[] }) {
+    const { openImage } = useImageLightbox();
+
+    if (!files || files.length === 0) return null;
+
+    return (
+        <div className="mt-2 flex flex-wrap gap-2">
+            {files.map((file, idx) => {
+                const fileName = file.split('/').pop()?.split('?')[0] || 'file';
+                if (isImageUrl(file)) {
+                    return (
+                        <div
+                            key={idx}
+                            className="cursor-pointer"
+                            onClick={() => openImage(file, fileName)}
+                            title="Click to enlarge"
+                        >
+                            <img
+                                src={file}
+                                alt={fileName}
+                                className="max-w-[300px] max-h-[200px] rounded border hover:opacity-80 transition-opacity hover:shadow-lg"
+                            />
+                        </div>
+                    );
+                }
+                return (
+                    <a
+                        key={idx}
+                        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"
+                    >
+                        📎 {fileName}
+                    </a>
+                );
+            })}
+        </div>
+    );
+}
+
+// Helper to get files from tool details (checks both files and outputFiles)
+const getFilesFromDetails = (details: { files?: string[]; outputFiles?: string[]; [key: string]: unknown } | undefined): string[] | undefined => {
+    if (!details) return undefined;
+    const files = details.files ?? details.outputFiles;
+    return Array.isArray(files) ? files : undefined;
+};
+
+function ToolCallItem({ message, isExpanded, onToggle, artifactRunId }: ToolCallItemProps) {
+    const [resolvedFiles, setResolvedFiles] = useState<string[]>([]);
+    const toast = useToast();
+    const { client } = useUserSession();
+    const urlCache = useArtifactUrlCache();
+
+    const details = message.details as { tool?: string; files?: string[]; outputFiles?: string[]; [key: string]: unknown } | undefined;
+    const toolName = details?.tool || "Tool";
+    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 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;
+                    }
+                    // Resolve artifact path to signed URL
+                    const artifactPath = file.startsWith("out/") || file.startsWith("files/") || file.startsWith("scripts/")
+                        ? file
+                        : `out/${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 (urlCache) {
+                            return await urlCache.getOrFetch(cacheKey, async () => {
+                                const result = await client.files.getArtifactDownloadUrl(artifactRunId, artifactPath, disposition);
+                                return result.url;
+                            });
+                        } else {
+                            const result = await client.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 is string => !!f));
+            }
+        };
+        resolveFiles();
+        return () => { cancelled = true; };
+    }, [files, artifactRunId, client, urlCache]);
+
+    // 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: "Copied to clipboard",
+                duration: 2000,
+            });
+        });
+    };
+
+    return (
+        <div className="border-b border-gray-100 dark:border-gray-800 last:border-b-0">
+            {/* Collapsed header - always visible */}
+            <div
+                className="flex items-start justify-between px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+                onClick={onToggle}
+            >
+                <div className="flex items-start gap-2 flex-1 min-w-0">
+                    <div className="flex-shrink-0 pt-0.5">
+                        {isExpanded ? (
+                            <ChevronDown className="size-3 text-muted" />
+                        ) : (
+                            <ChevronRight className="size-3 text-muted" />
+                        )}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        {/* Primary: Message text */}
+                        {messageContent ? (
+                            <span className="text-xs text-foreground line-clamp-2">
+                                {messageContent}
+                            </span>
+                        ) : (
+                            <span className="text-xs text-muted italic">Tool: {toolName}</span>
+                        )}
+                    </div>
+                </div>
+                <div className="flex items-center gap-2 flex-shrink-0">
+                    {/* Tool name badge on the right */}
+                    {!isExpanded && (
+                        <span className="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">
+                            {toolName}
+                        </span>
+                    )}
+                    <Button
+                        variant="ghost"
+                        size="xs"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            copyToClipboard();
+                        }}
+                        className="text-muted opacity-0 group-hover:opacity-100 transition-opacity"
+                        title="Copy message"
+                    >
+                        <CopyIcon className="size-3" />
+                    </Button>
+                </div>
+            </div>
+
+            {/* Always show images inline, regardless of expanded state */}
+            {imageFiles.length > 0 && (
+                <div className="px-4 pb-2">
+                    <FileDisplay files={imageFiles} />
+                </div>
+            )}
+
+            {/* Expanded content */}
+            {isExpanded && (
+                <div className="px-4 py-2 bg-gray-50/50 dark:bg-gray-800/30">
+                    {/* Tool name badge shown when expanded */}
+                    <div className="mb-2">
+                        <span className="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">
+                            {toolName}
+                        </span>
+                    </div>
+
+                    {messageContent && (
+                        <div className="vprose prose prose-slate dark:prose-invert prose-p:leading-relaxed prose-p:my-1.5 max-w-none text-sm">
+                            <MarkdownRenderer artifactRunId={artifactRunId}>{messageContent}</MarkdownRenderer>
+                        </div>
+                    )}
+
+                    {/* Non-image files display */}
+                    {nonImageFiles.length > 0 && <FileDisplay files={nonImageFiles} />}
+
+                    {/* Technical details - collapsible */}
+                    {details && Object.keys(details).length > 1 && (
+                        <details className="mt-3 text-xs border rounded p-2 bg-muted/30" onClick={(e) => e.stopPropagation()}>
+                            <summary className="cursor-pointer text-muted">
+                                Technical Details
+                            </summary>
+                            <pre className="mt-2 p-2 bg-muted rounded text-xs overflow-x-auto font-mono whitespace-pre-wrap">
+                                {JSON.stringify(details, null, 2)}
+                            </pre>
+                        </details>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+// 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 }: { files: string[] | undefined; artifactRunId?: string }) {
+    const [resolvedFiles, setResolvedFiles] = useState<string[]>([]);
+    const { client } = useUserSession();
+    const urlCache = useArtifactUrlCache();
+
+    useEffect(() => {
+        if (!files || files.length === 0 || !artifactRunId) {
+            setResolvedFiles([]);
+            return;
+        }
+
+        let cancelled = false;
+        const resolveFiles = async () => {
+            const resolved = await Promise.all(
+                files.map(async (file) => {
+                    if (!file || typeof file !== "string") return null;
+
+                    // Skip image files - they're shown at the group level
+                    const ext = file.split(".").pop()?.toLowerCase() || "";
+                    const imageExtensions = new Set(["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg"]);
+                    if (imageExtensions.has(ext)) return null;
+
+                    if (file.startsWith("http://") || file.startsWith("https://")) {
+                        return file;
+                    }
+                    const artifactPath = file.startsWith("out/") || file.startsWith("files/") || file.startsWith("scripts/")
+                        ? file
+                        : `out/${file}`;
+
+                    try {
+                        const cacheKey = getArtifactCacheKey(artifactRunId, artifactPath, "attachment");
+                        if (urlCache) {
+                            return await urlCache.getOrFetch(cacheKey, async () => {
+                                const result = await client.files.getArtifactDownloadUrl(artifactRunId, artifactPath, "attachment");
+                                return result.url;
+                            });
+                        } else {
+                            const result = await client.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 is string => !!f));
+            }
+        };
+        resolveFiles();
+        return () => { cancelled = true; };
+    }, [files, artifactRunId, client, urlCache]);
+
+    // Only show non-image files (images are shown at group level)
+    if (resolvedFiles.length === 0) return null;
+
+    return (
+        <div className="pl-5 pr-3 pb-2">
+            <FileDisplay files={resolvedFiles} />
+        </div>
+    );
+}
+
+// Component to show images from the most recent tool call prominently at the top
+function GroupImageDisplay({ messages, artifactRunId }: { messages: AgentMessage[]; artifactRunId?: string }) {
+    const [resolvedImages, setResolvedImages] = useState<string[]>([]);
+    const { client } = useUserSession();
+    const urlCache = useArtifactUrlCache();
+
+    // 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 as { files?: string[]; outputFiles?: string[] } | undefined;
+        const files = getFilesFromDetails(details);
+
+        if (!files || files.length === 0) {
+            setResolvedImages([]);
+            return;
+        }
+
+        let cancelled = false;
+        const resolveFiles = async () => {
+            const resolved = await Promise.all(
+                files.map(async (file) => {
+                    if (!file || typeof file !== "string") return null;
+
+                    // Check if it's an image file
+                    const ext = file.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 (file.startsWith("http://") || file.startsWith("https://")) {
+                        return file;
+                    }
+
+                    // Resolve artifact path to signed URL
+                    const artifactPath = file.startsWith("out/") || file.startsWith("files/") || file.startsWith("scripts/")
+                        ? file
+                        : `out/${file}`;
+
+                    try {
+                        const cacheKey = getArtifactCacheKey(artifactRunId, artifactPath, "inline");
+                        if (urlCache) {
+                            return await urlCache.getOrFetch(cacheKey, async () => {
+                                const result = await client.files.getArtifactDownloadUrl(artifactRunId, artifactPath, "inline");
+                                return result.url;
+                            });
+                        } else {
+                            const result = await client.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 is string => !!f));
+            }
+        };
+        resolveFiles();
+        return () => { cancelled = true; };
+    }, [messages, artifactRunId, client, urlCache]);
+
+    if (resolvedImages.length === 0) return null;
+
+    return (
+        <div className="px-4 py-2 border-b border-gray-100 dark:border-gray-800">
+            <FileDisplay files={resolvedImages} />
+        </div>
+    );
+}
+
+function ToolCallGroupComponent({ messages, showPulsatingCircle = false, toolRunId: _toolRunId, toolStatus }: ToolCallGroupProps) {
+    const [isCollapsed, setIsCollapsed] = useState(true);
+    const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
+    const [animatingIndices, setAnimatingIndices] = useState<Set<number>>(new Set());
+    const prevCountRef = useRef(messages.length);
+    const toast = useToast();
+
+    // Extract workflow_run_id from messages (any message in the group should have it)
+    const artifactRunId = messages.find(m => (m as any).workflow_run_id)?.workflow_run_id as string | undefined
+        ?? (messages[0] as any)?.workflow_run_id;
+
+    // Render status indicator based on tool execution status
+    const renderStatusIndicator = () => {
+        if (showPulsatingCircle || toolStatus === "running") {
+            return <PulsatingCircle size="sm" color="blue" />;
+        }
+        if (toolStatus === "completed") {
+            return <CheckCircle className="size-4 text-success" />;
+        }
+        if (toolStatus === "error") {
+            return <AlertCircle className="size-4 text-destructive" />;
+        }
+        if (toolStatus === "warning") {
+            return <AlertTriangle className="size-4 text-attention" />;
+        }
+        return <Bot className="size-4 text-purple-600 dark:text-purple-400" />;
+    };
+
+    // Get border color based on status
+    const getBorderColor = () => {
+        if (toolStatus === "completed") return "border-l-success";
+        if (toolStatus === "error") return "border-l-destructive";
+        if (toolStatus === "warning") return "border-l-attention";
+        return "border-l-purple-500";
+    };
+
+    // Animate new messages when they're added
+    useEffect(() => {
+        const prevCount = prevCountRef.current;
+        const currentCount = messages.length;
+
+        if (currentCount > prevCount) {
+            // New messages added - animate them
+            const newIndices = new Set<number>();
+            for (let i = prevCount; i < currentCount; i++) {
+                newIndices.add(i);
+            }
+            setAnimatingIndices(newIndices);
+
+            // Clear animation after it completes
+            const timer = setTimeout(() => {
+                setAnimatingIndices(new Set());
+            }, 500);
+
+            prevCountRef.current = currentCount;
+            return () => clearTimeout(timer);
+        }
+
+        prevCountRef.current = currentCount;
+    }, [messages.length]);
+
+    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 => {
+        const details = m.details as { tool?: string } | undefined;
+        return details?.tool || "tool";
+    });
+
+    const uniqueToolCount = new Set(toolNames).size;
+    const toolSummary = uniqueToolCount === 1
+        ? `${messages.length}× ${toolNames[0]}`
+        : `${messages.length} tool calls`;
+
+    const toggleItem = (index: number) => {
+        setExpandedItems(prev => {
+            const next = new Set(prev);
+            if (next.has(index)) {
+                next.delete(index);
+            } else {
+                next.add(index);
+            }
+            return next;
+        });
+    };
+
+    const copyAllToClipboard = () => {
+        const allContent = messages.map(m => {
+            const details = m.details as { tool?: string; [key: string]: unknown } | undefined;
+            return `[${details?.tool || "tool"}] ${m.message || ""}\n${details ? JSON.stringify(details, null, 2) : ""}`;
+        }).join("\n\n---\n\n");
+
+        navigator.clipboard.writeText(allContent).then(() => {
+            toast({
+                status: "success",
+                title: "Copied all tool calls to clipboard",
+                duration: 2000,
+            });
+        });
+    };
+
+    return (
+        <div
+            className={`border-l-4 ${getBorderColor()} overflow-hidden bg-white dark:bg-gray-900 mb-4`}
+        >
+            {/* Compact header */}
+            <div
+                className="flex items-center justify-between px-4 py-1.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+                onClick={() => setIsCollapsed(!isCollapsed)}
+            >
+                <div className="flex items-center gap-1.5">
+                    {renderStatusIndicator()}
+                    <span className="text-xs font-medium text-muted">Agent</span>
+                    <span className="text-xs text-purple-600 dark:text-purple-400 font-medium">
+                        {toolSummary}
+                    </span>
+                    {isCollapsed ? (
+                        <ChevronRight className="size-3 text-muted" />
+                    ) : (
+                        <ChevronDown className="size-3 text-muted" />
+                    )}
+                </div>
+
+                <div className="flex items-center gap-1.5">
+                    <span className="text-[11px] text-muted/70">
+                        {dayjs(firstTimestamp).format("HH:mm:ss")}
+                        {messages.length > 1 && ` - ${dayjs(lastTimestamp).format("HH:mm:ss")}`}
+                    </span>
+                    <Button
+                        variant="ghost"
+                        size="xs"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            copyAllToClipboard();
+                        }}
+                        className="text-muted/50 hover:text-muted h-5 w-5 p-0"
+                        title="Copy all tool calls"
+                    >
+                        <CopyIcon className="size-3" />
+                    </Button>
+                </div>
+            </div>
+
+            {/* Show all images from the group prominently at the top */}
+            <GroupImageDisplay messages={messages} artifactRunId={artifactRunId} />
+
+            {/* Collapsed summary - show tool calls as single-line rows with expand option */}
+            {isCollapsed && (
+                <div className="px-4 py-1 space-y-0">
+                    {messages.map((m, idx) => {
+                        const details = m.details as { tool?: string; files?: string[]; outputFiles?: string[] } | undefined;
+                        const toolName = details?.tool || "tool";
+                        const fullMessage = typeof m.message === "string" ? m.message : "";
+                        const isAnimating = animatingIndices.has(idx);
+                        const isItemExpanded = expandedItems.has(idx);
+                        const files = getFilesFromDetails(details);
+
+                        return (
+                            <div
+                                key={`${m.timestamp}-${idx}`}
+                                className="border-b border-gray-100 dark:border-gray-800 last:border-b-0"
+                                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 - animatingIndices.size)) * 100}ms`,
+                                    animation: isAnimating ? 'slideInFade 0.4s ease-out forwards' : 'none',
+                                    animationDelay: `${(idx - (messages.length - animatingIndices.size)) * 100}ms`,
+                                }}
+                            >
+                                {/* Row header - clickable to expand */}
+                                <div
+                                    className="flex items-start gap-2 py-2 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                                    onClick={() => toggleItem(idx)}
+                                    title={fullMessage}
+                                >
+                                    <div className="flex-shrink-0 pt-0.5">
+                                        {isItemExpanded ? (
+                                            <ChevronDown className="size-3 text-muted" />
+                                        ) : (
+                                            <ChevronRight className="size-3 text-muted" />
+                                        )}
+                                    </div>
+                                    <div className="flex-1 min-w-0">
+                                        {/* Primary: Message text */}
+                                        {fullMessage ? (
+                                            <span className="text-foreground line-clamp-2">
+                                                {fullMessage}
+                                            </span>
+                                        ) : (
+                                            <span className="text-muted italic">Tool: {toolName}</span>
+                                        )}
+                                    </div>
+                                    {/* Tool name badge on the right */}
+                                    {!isItemExpanded && (
+                                        <span className="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 flex-shrink-0">
+                                            {toolName}
+                                        </span>
+                                    )}
+                                </div>
+                                {/* Always show images inline with resolved URLs */}
+                                <CollapsedItemFiles files={files} artifactRunId={artifactRunId} />
+                                {/* Expanded content - show full message */}
+                                {isItemExpanded && (
+                                    <div className="pl-5 pr-3 pb-2 text-sm">
+                                        <div className="vprose prose prose-slate dark:prose-invert prose-p:leading-relaxed prose-p:my-1.5 max-w-none text-sm">
+                                            <MarkdownRenderer artifactRunId={artifactRunId}>{fullMessage}</MarkdownRenderer>
+                                        </div>
+                                        {/* Show details if available */}
+                                        {details && Object.keys(details).length > 1 && (
+                                            <details className="mt-2 text-xs">
+                                                <summary className="text-muted cursor-pointer">Show details</summary>
+                                                <pre className="mt-1 p-2 bg-muted rounded text-xs overflow-x-auto">
+                                                    {JSON.stringify(details, null, 2)}
+                                                </pre>
+                                            </details>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+
+            {/* Keyframes for slide-in animation */}
+            <style>{`
+                @keyframes slideInFade {
+                    from {
+                        opacity: 0;
+                        transform: translateX(-10px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateX(0);
+                    }
+                }
+            `}</style>
+
+            {/* Expanded view - individual tool calls */}
+            {!isCollapsed && (
+                <div className="group">
+                    {messages.map((message, index) => (
+                        <ToolCallItem
+                            key={`${message.timestamp}-${index}`}
+                            message={message}
+                            isExpanded={expandedItems.has(index)}
+                            onToggle={() => toggleItem(index)}
+                            artifactRunId={artifactRunId}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+// 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;
+    // Compare first and last timestamps as a proxy for content changes
+    return (
+        prevProps.messages[0]?.timestamp === nextProps.messages[0]?.timestamp &&
+        prevProps.messages[prevProps.messages.length - 1]?.timestamp ===
+            nextProps.messages[nextProps.messages.length - 1]?.timestamp
+    );
+});
+
+export default ToolCallGroup;