@vertesia/ui 1.0.0-dev.20260128.144200 → 1.0.0-dev.20260225.024852Z

package/lib/esm/features/agent/chat/ModernAgentConversation.js

@@ -2,20 +2,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Bot, Cpu, FileTextIcon, SendIcon, UploadIcon, XIcon } from "lucide-react";
 import { useUserSession } from "@vertesia/ui/session";
-import { AgentMessageType, FileProcessingStatus, } from "@vertesia/common";
+import { AgentMessageType, } from "@vertesia/common";
 import { FusionFragmentProvider } from "@vertesia/fusion-ux";
-import { Button, MessageBox, Spinner, useToast, VModal, VModalBody, VModalFooter, VModalTitle } from "@vertesia/ui/core";
+import { Button, cn, MessageBox, Spinner, useToast, Modal, ModalBody, ModalFooter, ModalTitle } from "@vertesia/ui/core";
 import { AnimatedThinkingDots, PulsatingCircle } from "./AnimatedThinkingDots";
 import { ImageLightboxProvider } from "./ImageLightbox";
 import AllMessagesMixed from "./ModernAgentOutput/AllMessagesMixed";
 import Header from "./ModernAgentOutput/Header";
 import MessageInput from "./ModernAgentOutput/MessageInput";
-import { getWorkstreamId, insertMessageInTimeline, isInProgress } from "./ModernAgentOutput/utils";
+import { getWorkstreamId } from "./ModernAgentOutput/utils";
 import { ThinkingMessages } from "./WaitingMessages";
 import InlineSlidingPlanPanel from "./ModernAgentOutput/InlineSlidingPlanPanel";
 import { SkillWidgetProvider } from "./SkillWidgetProvider";
 import { ArtifactUrlCacheProvider } from "./useArtifactUrlCache.js";
 import { VegaLiteChart } from "./VegaLiteChart";
+import { DocumentPanel } from "./DocumentPanel.js";
+import { useAgentStream } from "./hooks/useAgentStream.js";
+import { useAgentPlans } from "./hooks/useAgentPlans.js";
+import { useDocumentPanel } from "./hooks/useDocumentPanel.js";
+import { useFileProcessing } from "./hooks/useFileProcessing.js";
 function printElementToPdf(sourceElement, title) {
     if (typeof window === "undefined" || typeof document === "undefined") {
         return false;
@@ -166,12 +171,12 @@ acceptedFileTypes = ".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.
                 status: "info",
                 duration: 3000,
             });
-            // Get attached document IDs if callback provided
+            // Get attached documents if callback provided
             const attachedDocs = getAttachedDocs?.() || [];
-            // Build message content with attachment references if present
+            // Build message content with attachment references as markdown links
             let messageContent = message;
             if (attachedDocs.length > 0 && !/store:\S+/.test(message)) {
-                const lines = attachedDocs.map((id) => `store:${id}`);
+                const lines = attachedDocs.map((doc) => `[${doc.name}](/store/objects/${doc.id})`);
                 messageContent = [message, '', 'Attachments:', ...lines].join('\n');
             }
             // If files are staged, add a note to the message so the agent knows files are coming
@@ -284,6 +289,8 @@ uploadedFiles, onRemoveFile, acceptedFileTypes, maxFiles,
 renderDocumentSearch, selectedDocuments, onRemoveDocument, 
 // Object linking
 hideObjectLinking, 
+// Section visibility
+hideHeader, hideMessageInput, hidePlanPanel, hideWorkstreamTabs, hideFileUpload, hideDocumentPanel, 
 // Attachment callback
 getAttachedDocs, onAttachmentsSent, 
 // Upload state
@@ -291,55 +298,71 @@ isUploading = false,
 // Context callback
 getMessageContext, 
 // Styling props
-inputContainerClassName, inputClassName, 
+className, inputContainerClassName, inputClassName, 
 // Fusion fragment data
-fusionData, }) {
+fusionData, 
+// External file upload API
+fileUploadRef, onProcessingFilesChange, 
+// External plan panel API
+onPlansChange, onWorkstreamStatusChange, 
+// External view mode control
+viewMode: controlledViewMode, onViewModeChange: onViewModeChangeProp, onShowInputChange, 
+// External stop API
+stopRef, onStoppingChange, 
+// MessageItem className/style overrides
+messageItemClassNames, messageStyleOverrides, 
+// ToolCallGroup className overrides + view mode visibility
+toolCallGroupClassNames, hideToolCallsInViewMode, 
+// StreamingMessage className overrides
+streamingMessageClassNames, 
+// BatchProgressPanel className overrides
+batchProgressPanelClassNames, 
+// AllMessagesMixed className overrides
+workingIndicatorClassName, messageListClassName, StoreLinkComponent, CollectionLinkComponent, prependFriendlyMessage, }) {
     const { client } = useUserSession();
+    const toast = useToast();
+    // ────────────────────────────────────────────
+    // Extracted hooks
+    // ────────────────────────────────────────────
+    const { messages, streamingMessages, isCompleted, debugChunkFlash, addOptimisticMessage, removeOptimisticMessages, workflowStatus, serverFileUpdates, } = useAgentStream(client, run);
+    const { plans, activePlanIndex, setActivePlanIndex, workstreamStatusMap, showInput, showSlidingPanel, setShowSlidingPanel, } = useAgentPlans(messages, interactive, isModal);
+    const { openDocuments, activeDocumentId, isDocPanelOpen, docRefreshKey, closeDocPanel: handleCloseDocPanel, closeDocument: handleCloseDocument, selectDocument, openDocInPanel, } = useDocumentPanel(messages);
+    const { processingFiles, hasProcessingFiles, handleFileUpload, } = useFileProcessing(client, run, serverFileUpdates, toast);
+    // ────────────────────────────────────────────
+    // Local state (UI-only concerns)
+    // ────────────────────────────────────────────
     const bottomRef = useRef(null);
     const conversationRef = useRef(null);
-    const [messages, setMessages] = useState([]);
-    const [isCompleted, setIsCompleted] = useState(false);
     const [isSending, setIsSending] = useState(false);
-    const [viewMode, setViewMode] = useState("sliding");
-    const [showSlidingPanel, setShowSlidingPanel] = useState(!isModal);
+    const [internalViewMode, setInternalViewMode] = useState("sliding");
+    const viewMode = controlledViewMode ?? internalViewMode;
+    const handleViewModeChange = useCallback((mode) => {
+        if (onViewModeChangeProp) {
+            onViewModeChangeProp(mode);
+        }
+        else {
+            setInternalViewMode(mode);
+        }
+    }, [onViewModeChangeProp]);
     const [isStopping, setIsStopping] = useState(false);
-    // Keep track of multiple plans and their timestamps
-    const [plans, setPlans] = useState([]);
-    // Track which plan is currently active in the UI
-    const [activePlanIndex, setActivePlanIndex] = useState(0);
-    // Store workstream status for each plan separately
-    const [workstreamStatusMap, setWorkstreamStatusMap] = useState(new Map());
     const [thinkingMessageIndex, setThinkingMessageIndex] = useState(0);
-    const toast = useToast();
-    const [showInput, setShowInput] = useState(interactive);
-    const [workflowStatus, setWorkflowStatus] = useState(null);
-    // Track streaming messages by streaming_id for real-time chunk aggregation
-    // Include startTimestamp to preserve chronological order when converting to regular messages
-    const [streamingMessages, setStreamingMessages] = useState(new Map());
-    // Track files being processed by the workflow
-    const [processingFiles, setProcessingFiles] = useState(new Map());
-    // Check if any files are still uploading or processing
-    const hasProcessingFiles = useMemo(() => Array.from(processingFiles.values()).some(f => f.status === FileProcessingStatus.UPLOADING || f.status === FileProcessingStatus.PROCESSING), [processingFiles]);
-    // Performance optimization: Batch streaming updates using RAF
-    // Instead of updating state on every chunk (100+ times/sec), batch them per animation frame
-    const pendingStreamingChunks = useRef(new Map());
-    const streamingFlushScheduled = useRef(null);
-    // Debug: Track chunk arrivals and renders
-    const [_debugChunkCount, setDebugChunkCount] = useState(0);
-    const [_debugRenderCount, setDebugRenderCount] = useState(0);
-    const [debugChunkFlash, setDebugChunkFlash] = useState(false);
-    const debugFlashTimeout = useRef(null);
-    const flushStreamingChunks = useCallback(() => {
-        if (pendingStreamingChunks.current.size > 0) {
-            setStreamingMessages(new Map(pendingStreamingChunks.current));
-            setDebugRenderCount(c => c + 1);
-        }
-        streamingFlushScheduled.current = null;
-    }, []);
-    // Drag and drop state for full-panel file upload
     const [isDragOver, setIsDragOver] = useState(false);
     const dragCounterRef = useRef(0);
-    // Helper function to get the current active plan and its workstream status
+    // PERFORMANCE: Refs for values used inside useCallback to avoid re-creating the callback
+    const isSendingRef = useRef(isSending);
+    isSendingRef.current = isSending;
+    const hasProcessingFilesRef = useRef(hasProcessingFiles);
+    hasProcessingFilesRef.current = hasProcessingFiles;
+    // Derive effective workflow status (API status + TERMINATED from messages)
+    const effectiveWorkflowStatus = useMemo(() => {
+        const lastMsg = messages[messages.length - 1];
+        if (lastMsg?.type === AgentMessageType.TERMINATED)
+            return "TERMINATED";
+        return workflowStatus;
+    }, [messages, workflowStatus]);
+    // ────────────────────────────────────────────
+    // Computed values
+    // ────────────────────────────────────────────
     const getActivePlan = useMemo(() => {
         const currentPlanData = plans[activePlanIndex] || {
             plan: { plan: [] },
@@ -351,7 +374,9 @@ fusionData, }) {
             workstreamStatus: currentWorkstreamStatus,
         };
     }, [plans, activePlanIndex, workstreamStatusMap]);
-    // PERFORMANCE: Stabilize callback props to prevent child re-renders
+    // ────────────────────────────────────────────
+    // Stable callbacks
+    // ────────────────────────────────────────────
     const handleTogglePlanPanel = useCallback(() => {
         setShowSlidingPanel((prev) => {
             if (!prev) {
@@ -359,13 +384,19 @@ fusionData, }) {
             }
             return !prev;
         });
-    }, []);
+    }, [setShowSlidingPanel]);
     const handleChangePlan = useCallback((index) => {
         setActivePlanIndex(index);
-    }, []);
+    }, [setActivePlanIndex]);
     const handleClosePlanPanel = useCallback(() => {
         setShowSlidingPanel(false);
-    }, []);
+    }, [setShowSlidingPanel]);
+    // Default StoreLinkComponent that opens documents in the panel
+    const internalStoreLinkComponent = useCallback(({ documentId, children }) => (_jsx("button", { className: "text-info underline cursor-pointer hover:text-info/80", onClick: () => openDocInPanel(documentId), children: children })), [openDocInPanel]);
+    const effectiveStoreLinkComponent = StoreLinkComponent ?? internalStoreLinkComponent;
+    // ────────────────────────────────────────────
+    // Effects
+    // ────────────────────────────────────────────
     // Show rotating thinking messages
     useEffect(() => {
         if (!isCompleted) {
@@ -375,259 +406,51 @@ fusionData, }) {
             return () => clearInterval(interval);
         }
     }, [isCompleted]);
-    const checkWorkflowStatus = async () => {
-        try {
-            const statusResult = await client.store.workflows.getRunDetails(run.runId, run.workflowId);
-            setWorkflowStatus(statusResult.status);
-        }
-        catch (error) {
-            console.error('Failed to check workflow status:', error);
-        }
-    };
-    // Stream messages from the agent
+    // Expose handleFileUpload to external callers via ref
     useEffect(() => {
-        // Reset all state when runId changes (new agent)
-        setMessages([]);
-        setPlans([]);
-        setActivePlanIndex(0);
-        setWorkstreamStatusMap(new Map());
-        setShowSlidingPanel(false);
-        setWorkflowStatus(null);
-        setStreamingMessages(new Map());
-        checkWorkflowStatus();
-        client.store.workflows.streamMessages(run.workflowId, run.runId, (message) => {
-            // Client now converts compact wire format to AgentMessage internally
-            // Handle streaming chunks separately for real-time aggregation
-            // PERFORMANCE: Batch updates using RAF instead of immediate state updates
-            if (message.type === AgentMessageType.STREAMING_CHUNK) {
-                const details = message.details;
-                // Use activity_id as key if available (for dedup), fall back to streaming_id
-                const streamKey = details?.activity_id || details?.streaming_id;
-                if (!streamKey)
-                    return;
-                // Debug: Track chunk arrival with flash
-                setDebugChunkCount(c => c + 1);
-                setDebugChunkFlash(true);
-                if (debugFlashTimeout.current)
-                    clearTimeout(debugFlashTimeout.current);
-                debugFlashTimeout.current = setTimeout(() => setDebugChunkFlash(false), 50);
-                // Accumulate chunks in the ref (no state update yet)
-                const current = pendingStreamingChunks.current.get(streamKey) || {
-                    text: '',
-                    workstreamId: message.workstream_id,
-                    startTimestamp: Date.now(),
-                    activityId: details?.activity_id,
-                };
-                const newText = current.text + (message.message || '');
-                pendingStreamingChunks.current.set(streamKey, {
-                    text: newText,
-                    workstreamId: message.workstream_id,
-                    isComplete: details.is_final,
-                    startTimestamp: current.startTimestamp,
-                    activityId: details?.activity_id,
-                });
-                // Schedule a flush if not already scheduled (batches ~60 updates/sec max)
-                if (streamingFlushScheduled.current === null) {
-                    streamingFlushScheduled.current = requestAnimationFrame(flushStreamingChunks);
-                }
-                return;
-            }
-            // Handle file processing status updates (SYSTEM messages with system_type: 'file_processing')
-            if (message.type === AgentMessageType.SYSTEM) {
-                const details = message.details;
-                if (details?.system_type === 'file_processing' && details.files) {
-                    setProcessingFiles(prev => {
-                        const newMap = new Map(prev);
-                        for (const file of details.files) {
-                            newMap.set(file.id, file);
-                        }
-                        return newMap;
-                    });
-                    return; // Don't add to messages array - this is status only
-                }
-                // Other SYSTEM messages fall through to normal handling
-            }
-            // When THOUGHT or ANSWER arrives with activity_id, remove matching streaming message
-            // This prevents duplicate content (streamed content replaced by final message)
-            if ((message.type === AgentMessageType.THOUGHT || message.type === AgentMessageType.ANSWER) && message.details?.activity_id) {
-                const activityId = message.details.activity_id;
-                // Remove from pending chunks
-                pendingStreamingChunks.current.delete(activityId);
-                // Remove from streaming messages state
-                setStreamingMessages(prev => {
-                    if (prev.has(activityId)) {
-                        const next = new Map(prev);
-                        next.delete(activityId);
-                        return next;
-                    }
-                    return prev;
-                });
-            }
-            // On COMPLETE or IDLE, just flush any pending chunks
-            if (message.type === AgentMessageType.COMPLETE || message.type === AgentMessageType.IDLE) {
-                if (pendingStreamingChunks.current.size > 0) {
-                    flushStreamingChunks();
-                }
-            }
-            if (message.message) {
-                setMessages((prev_messages) => {
-                    // Check for duplicate by timestamp
-                    if (prev_messages.find((m) => m.timestamp === message.timestamp)) {
-                        return prev_messages;
-                    }
-                    // For QUESTION messages from server, replace any optimistic version
-                    if (message.type === AgentMessageType.QUESTION && !message.details?._optimistic) {
-                        const withoutOptimistic = prev_messages.filter((m) => !(m.type === AgentMessageType.QUESTION &&
-                            m.details?._optimistic &&
-                            m.message === message.message));
-                        insertMessageInTimeline(withoutOptimistic, message);
-                        return [...withoutOptimistic];
-                    }
-                    insertMessageInTimeline(prev_messages, message);
-                    return [...prev_messages];
-                });
-            }
-        });
-        // Clear messages and unsubscribe when component unmounts or runId changes
-        return () => {
-            setMessages([]);
-            // Cancel any pending streaming flush
-            if (streamingFlushScheduled.current !== null) {
-                cancelAnimationFrame(streamingFlushScheduled.current);
-                streamingFlushScheduled.current = null;
-            }
-            pendingStreamingChunks.current.clear();
-            // Client handles unsubscribing from the message stream internally
-        };
-    }, [run.runId, client.store.workflows, flushStreamingChunks]);
-    // Update completion status when messages change
-    // This now accounts for multiple workstreams
+        if (fileUploadRef)
+            fileUploadRef.current = handleFileUpload;
+        return () => { if (fileUploadRef)
+            fileUploadRef.current = null; };
+    }, [fileUploadRef, handleFileUpload]);
+    // Notify parent when processingFiles changes
     useEffect(() => {
-        setIsCompleted(!isInProgress(messages));
-        // Only automatically hide the panel when there are no plans
-        // But don't auto-show it when plans appear
-        if (plans.length === 0) {
-            // If there are no plans, make sure the plan panel is hidden
-            setShowSlidingPanel(false);
-        }
-        // We removed the auto-show functionality to allow users to keep the panel closed if they want
-    }, [messages, plans.length]);
-    // Update plans and workstream status based on incoming messages
+        onProcessingFilesChange?.(processingFiles);
+    }, [processingFiles, onProcessingFilesChange]);
+    // Notify parent when plans change
     useEffect(() => {
-        // Only show the sliding panel for the very first plan and only once
-        if (plans.length === 1 &&
-            !showSlidingPanel &&
-            !sessionStorage.getItem("plan-panel-shown")) {
-            // For first-time plan detection only, show the panel with a delay
-            const notificationTimeout = setTimeout(() => {
-                setShowSlidingPanel(true);
-                // Mark that we've shown the panel once
-                sessionStorage.setItem("plan-panel-shown", "true");
-            }, 500); // Short delay to ensure the UI has fully rendered
-            return () => clearTimeout(notificationTimeout);
+        onPlansChange?.(plans, activePlanIndex);
+    }, [plans, activePlanIndex, onPlansChange]);
+    // Notify parent when workstream status changes
+    useEffect(() => {
+        onWorkstreamStatusChange?.(workstreamStatusMap);
+    }, [workstreamStatusMap, onWorkstreamStatusChange]);
+    // Notify parent when input availability is determined
+    useEffect(() => {
+        if (messages.length === 0)
+            return;
+        if (!showInput) {
+            onShowInputChange?.(false);
+            return;
         }
-        // Process messages to extract plan information
-        messages.forEach((message) => {
-            if (message.type === AgentMessageType.PLAN) {
-                try {
-                    // Log message details for debugging
-                    console.log("PLAN message received:", message.type);
-                    let newPlanDetails = null;
-                    // Extract the plan from the message details object
-                    if (message.details && typeof message.details === "object") {
-                        // For a PLAN type message like the example you provided
-                        if (message.details.plan && Array.isArray(message.details.plan)) {
-                            console.log("Valid plan array found in message.details.plan");
-                            newPlanDetails = { plan: message.details.plan };
-                        }
-                    }
-                    // Only proceed if we have a valid plan
-                    if (newPlanDetails) {
-                        const timestamp = typeof message.timestamp === "number"
-                            ? message.timestamp
-                            : new Date(message.timestamp).getTime();
-                        // Check if we already have this plan
-                        const existingPlanIndex = plans.findIndex((p) => p.timestamp === timestamp);
-                        if (existingPlanIndex === -1 && newPlanDetails) {
-                            console.log("Adding new plan to plans array");
-                            // This is a new plan - add it to our plans array
-                            const newPlan = {
-                                plan: newPlanDetails,
-                                timestamp,
-                            };
-                            // Add new plan to the beginning of the array (newest first)
-                            console.log("Adding plan to plans array:", newPlan);
-                            setPlans((prev) => {
-                                const newPlans = [newPlan, ...prev];
-                                console.log("New plans array:", newPlans);
-                                return newPlans;
-                            });
-                            // Set this as the active plan
-                            setActivePlanIndex(0);
-                            // Automatically show sliding plan panel when a plan is detected
-                            console.log("Setting showSlidingPanel to true");
-                            setShowSlidingPanel(true);
-                            // Initialize workstreams as pending based on the plan tasks
-                            const newWorkstreamStatus = new Map();
-                            // Always initialize main workstream
-                            newWorkstreamStatus.set("main", "in_progress");
-                            // Initialize each task in the plan with its status
-                            if (Array.isArray(newPlanDetails.plan)) {
-                                newPlanDetails.plan.forEach((task) => {
-                                    if (task && typeof task === "object" && task.id) {
-                                        const taskId = task.id.toString();
-                                        // Use the task's status if available, otherwise default to pending
-                                        newWorkstreamStatus.set(taskId, task.status || "pending");
-                                    }
-                                });
-                            }
-                            // Update the workstream status map with the new status for this plan
-                            setWorkstreamStatusMap((prev) => {
-                                const newMap = new Map(prev);
-                                newMap.set(timestamp, newWorkstreamStatus);
-                                return newMap;
-                            });
-                        }
-                    }
-                }
-                catch (error) {
-                    console.error("Failed to parse plan from message:", error);
-                }
-            }
-            // Handle UPDATE type messages with plan updates
-            if (message.type === AgentMessageType.UPDATE && message.details) {
-                // We no longer process UPDATE messages with details.updates
-                // Instead, we rely on the PLAN message that follows with the complete plan
-                if (message.details.updates && Array.isArray(message.details.updates)) {
-                    console.log("Ignoring UPDATE message with details.updates - waiting for PLAN message with full plan");
-                    // This is an initial update notification, but we'll wait for the PLAN message that follows
-                    // with the complete updated plan before making any UI changes
-                }
-            }
-        });
-        const lastMessage = messages[messages.length - 1];
-        if (lastMessage) {
-            if (lastMessage.type === AgentMessageType.TERMINATED) {
-                setShowInput(false);
-                setWorkflowStatus("TERMINATED");
-            }
-            else {
-                if (interactive) {
-                    setShowInput(true);
-                }
-                else {
-                    setShowInput(lastMessage.type === AgentMessageType.REQUEST_INPUT);
-                }
-            }
+        if (effectiveWorkflowStatus && effectiveWorkflowStatus !== "RUNNING") {
+            onShowInputChange?.(false);
+            return;
+        }
+        if (effectiveWorkflowStatus !== null) {
+            onShowInputChange?.(true);
         }
-    }, [messages, plans, activePlanIndex]);
+    }, [showInput, effectiveWorkflowStatus, messages.length, onShowInputChange]);
+    // ────────────────────────────────────────────
+    // Handlers
+    // ────────────────────────────────────────────
     // Send a message to the agent
-    const handleSendMessage = (message) => {
+    const handleSendMessage = useCallback((message) => {
         const trimmed = message.trim();
-        if (!trimmed || isSending)
+        if (!trimmed || isSendingRef.current)
             return;
         // Block if files are still processing
-        if (hasProcessingFiles) {
+        if (hasProcessingFilesRef.current) {
             toast({
                 status: "warning",
                 title: "Files Still Processing",
@@ -637,56 +460,38 @@ fusionData, }) {
             return;
         }
         setIsSending(true);
-        // Add optimistic QUESTION message immediately for better UX
-        const optimisticTimestamp = Date.now();
-        const optimisticMessage = {
-            timestamp: optimisticTimestamp,
-            workflow_run_id: run.runId,
-            type: AgentMessageType.QUESTION,
-            message: trimmed,
-            workstream_id: "main",
-            details: { _optimistic: true },
-        };
-        console.log("[Optimistic] Adding user message:", trimmed);
-        setMessages((prev) => {
-            const newMessages = [...prev, optimisticMessage];
-            // Sort by timestamp to maintain order
-            newMessages.sort((a, b) => {
-                const timeA = typeof a.timestamp === "number" ? a.timestamp : new Date(a.timestamp).getTime();
-                const timeB = typeof b.timestamp === "number" ? b.timestamp : new Date(b.timestamp).getTime();
-                return timeA - timeB;
-            });
-            console.log("[Optimistic] Messages after add:", newMessages.length, "messages");
-            return newMessages;
-        });
-        // Get attached document IDs if callback provided
         const attachedDocs = getAttachedDocs?.() || [];
-        // Get additional context metadata if callback provided (e.g., fundId)
         const contextMetadata = getMessageContext?.() || {};
-        // Build message content with attachment references if present
         let messageContent = trimmed;
         if (attachedDocs.length > 0 && !/store:\S+/.test(trimmed)) {
-            const lines = attachedDocs.map((id) => `store:${id}`);
+            const lines = attachedDocs.map((doc) => `[${doc.name}](/store/objects/${doc.id})`);
             messageContent = [trimmed, '', 'Attachments:', ...lines].join('\n');
         }
-        // Build metadata combining attached docs and context
+        const messageId = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const optimisticMessage = {
+            timestamp: Date.now(),
+            workflow_run_id: run.runId,
+            type: AgentMessageType.QUESTION,
+            message: messageContent,
+            workstream_id: "main",
+            details: { _optimistic: true, _messageId: messageId },
+        };
+        addOptimisticMessage(optimisticMessage);
         const metadata = {
-            ...(attachedDocs.length > 0 ? { attached_docs: attachedDocs } : {}),
+            ...(attachedDocs.length > 0 ? { attached_docs: attachedDocs.map((d) => d.id) } : {}),
             ...contextMetadata,
+            _messageId: messageId,
         };
         client.store.workflows
             .sendSignal(run.workflowId, run.runId, "UserInput", {
             message: messageContent,
-            metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+            metadata,
         })
             .then(() => {
-            setIsCompleted(false);
-            // Clear attachments after successful send
             onAttachmentsSent?.();
         })
             .catch((err) => {
-            // Remove optimistic message on failure
-            setMessages((prev) => prev.filter((m) => m.timestamp !== optimisticTimestamp));
+            removeOptimisticMessages((m) => m.details?._messageId === messageId);
             toast({
                 status: "error",
                 title: "Failed to Send Message",
@@ -697,72 +502,12 @@ fusionData, }) {
             .finally(() => {
             setIsSending(false);
         });
-    };
-    // Handle file uploads - upload to artifact storage and signal workflow
-    const handleFileUpload = useCallback(async (files) => {
-        for (const file of files) {
-            const fileId = `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-            const artifactPath = `files/${file.name}`;
-            // Add to local state immediately (optimistic - uploading status)
-            const fileState = {
-                id: fileId,
-                name: file.name,
-                content_type: file.type || 'application/octet-stream',
-                size: file.size,
-                status: FileProcessingStatus.UPLOADING,
-                started_at: Date.now(),
-            };
-            setProcessingFiles(prev => new Map(prev).set(fileId, fileState));
-            try {
-                // Upload to artifact storage
-                await client.files.uploadArtifact(run.runId, artifactPath, file);
-                // Update local state to processing
-                setProcessingFiles(prev => {
-                    const newMap = new Map(prev);
-                    const f = newMap.get(fileId);
-                    if (f) {
-                        f.status = FileProcessingStatus.PROCESSING;
-                        f.artifact_path = artifactPath;
-                        f.reference = `artifact:${artifactPath}`;
-                    }
-                    return newMap;
-                });
-                // Signal workflow that file was uploaded
-                await client.store.workflows.sendSignal(run.workflowId, run.runId, "FileUploaded", {
-                    id: fileId,
-                    name: file.name,
-                    content_type: file.type || 'application/octet-stream',
-                    reference: `artifact:${artifactPath}`,
-                    artifact_path: artifactPath,
-                });
-            }
-            catch (error) {
-                // Update local state to error
-                setProcessingFiles(prev => {
-                    const newMap = new Map(prev);
-                    const f = newMap.get(fileId);
-                    if (f) {
-                        f.status = FileProcessingStatus.ERROR;
-                        f.error = error instanceof Error ? error.message : 'Upload failed';
-                        f.completed_at = Date.now();
-                    }
-                    return newMap;
-                });
-                toast({
-                    status: "error",
-                    title: "Upload Failed",
-                    description: error instanceof Error ? error.message : "Failed to upload file",
-                    duration: 3000,
-                });
-            }
-        }
-    }, [client, run, toast]);
+    }, [run.runId, run.workflowId, client, toast, getAttachedDocs, getMessageContext, onAttachmentsSent, addOptimisticMessage, removeOptimisticMessages]);
     // Drag and drop handlers for full-panel file upload
     const handleDragEnter = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
         dragCounterRef.current++;
-        // Enable drag if we have a run (for internal file processing)
         if (run && e.dataTransfer?.types?.includes('Files')) {
             setIsDragOver(true);
         }
@@ -784,14 +529,13 @@ fusionData, }) {
         e.stopPropagation();
         dragCounterRef.current = 0;
         setIsDragOver(false);
-        // Use internal handleFileUpload for proper workflow signaling and status tracking
         if (run && e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
             const filesArray = Array.from(e.dataTransfer.files);
             handleFileUpload(filesArray);
         }
     }, [run, handleFileUpload]);
     // Stop/interrupt the active workflow
-    const handleStopWorkflow = async () => {
+    const handleStopWorkflow = useCallback(async () => {
         if (isStopping)
             return;
         setIsStopping(true);
@@ -805,7 +549,6 @@ fusionData, }) {
                 description: "Type your message to give new instructions",
                 duration: 3000,
             });
-            setIsCompleted(true);
         }
         catch (err) {
             toast({
@@ -818,7 +561,18 @@ fusionData, }) {
         finally {
             setIsStopping(false);
         }
-    };
+    }, [isStopping, client, run.workflowId, run.runId, toast]);
+    // Expose stop handler to external callers via ref
+    useEffect(() => {
+        if (stopRef)
+            stopRef.current = !isCompleted ? handleStopWorkflow : null;
+        return () => { if (stopRef)
+            stopRef.current = null; };
+    }, [stopRef, isCompleted, handleStopWorkflow]);
+    // Notify parent when stopping state changes
+    useEffect(() => {
+        onStoppingChange?.(isStopping);
+    }, [isStopping, onStoppingChange]);
     // Calculate number of active tasks for the status indicator
     const getActiveTaskCount = () => {
         if (!messages.length)
@@ -915,17 +669,18 @@ fusionData, }) {
         });
         setIsPdfModalOpen(false);
     };
+    // PERFORMANCE: Memoize taskLabels to prevent AllMessagesMixed re-renders
+    const taskLabels = useMemo(() => getActivePlan.plan.plan?.reduce((acc, task) => {
+        if (task.id && task.goal)
+            acc.set(task.id.toString(), task.goal);
+        return acc;
+    }, new Map()), [getActivePlan.plan]);
     // Main content - wrapped with FusionFragmentProvider when fusionData is provided
-    const mainContent = (_jsx(ArtifactUrlCacheProvider, { children: _jsx(ImageLightboxProvider, { children: _jsxs("div", { className: `flex flex-col lg:flex-row gap-2 h-full relative overflow-hidden ${isDragOver ? 'ring-2 ring-blue-400 ring-inset' : ''}`, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to upload"] }) })), _jsxs("div", { ref: conversationRef, className: `flex flex-col min-h-0 border-0 ${showSlidingPanel
-                            ? 'w-full lg:w-2/3 flex-1 min-h-[50vh]'
+    const mainContent = (_jsx(ArtifactUrlCacheProvider, { children: _jsx(ImageLightboxProvider, { children: _jsxs("div", { className: cn("flex flex-col lg:flex-row gap-2 h-full relative overflow-hidden", isDragOver && "ring-2 ring-blue-400 ring-inset", className), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to upload"] }) })), _jsxs("div", { ref: conversationRef, className: cn("flex flex-col min-h-0 border-0", (showSlidingPanel || isDocPanelOpen)
+                            ? "w-full lg:w-3/5 flex-1 min-h-[50vh]"
                             : fullWidth
-                                ? 'flex-1 w-full'
-                                : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`}`, children: [_jsx("div", { className: "flex-shrink-0", children: _jsx(Header, { title: actualTitle, isCompleted: isCompleted, onClose: onClose, isModal: isModal, run: run, viewMode: viewMode, onViewModeChange: setViewMode, showPlanPanel: showSlidingPanel, hasPlan: plans.length > 0, onTogglePlanPanel: handleTogglePlanPanel, onDownload: downloadConversation, onCopyRunId: copyRunId, resetWorkflow: resetWorkflow, onExportPdf: exportConversationPdf, isReceivingChunks: debugChunkFlash }) }), messages.length === 0 && !isCompleted ? (_jsx("div", { className: "flex-1 flex flex-col items-center justify-center h-full text-center py-6", children: _jsxs("div", { className: "p-5 max-w-md border border-info rounded-lg shadow-sm", children: [_jsxs("div", { className: "flex items-center space-x-3 mb-3", children: [_jsx(PulsatingCircle, { size: "sm", color: "blue" }), _jsx("div", { className: "text-sm text-muted font-medium", children: ThinkingMessages[thinkingMessageIndex] })] }), _jsx("div", { className: "mt-4 flex justify-center", children: _jsx(AnimatedThinkingDots, { color: "blue", className: "mt-1" }) })] }) })) : (_jsx(AllMessagesMixed, { messages: messages, bottomRef: bottomRef, viewMode: viewMode, isCompleted: isCompleted, plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, showPlanPanel: showSlidingPanel, onTogglePlanPanel: handleTogglePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan, taskLabels: getActivePlan.plan.plan?.reduce((acc, task) => {
-                                    if (task.id && task.goal) {
-                                        acc.set(task.id.toString(), task.goal);
-                                    }
-                                    return acc;
-                                }, new Map()), streamingMessages: streamingMessages, onSendMessage: handleSendMessage, thinkingMessageIndex: thinkingMessageIndex })), _jsx("div", { className: "flex-shrink-0", style: { paddingBottom: 'env(safe-area-inset-bottom, 0px)' }, children: workflowStatus && workflowStatus !== "RUNNING" ? (_jsxs(MessageBox, { status: workflowStatus === "COMPLETED" ? 'success' : 'done', icon: null, className: "m-2", children: ["This Workflow is ", workflowStatus] })) : showInput && (_jsx(MessageInput, { onSend: handleSendMessage, onStop: handleStopWorkflow, disabled: isUploading, isSending: isSending || isUploading, isStopping: isStopping, isStreaming: !isCompleted, isCompleted: isCompleted, activeTaskCount: getActiveTaskCount(), placeholder: placeholder, 
+                                ? "flex-1 w-full"
+                                : `flex-1 mx-auto ${!isModal ? "max-w-4xl" : ""}`), children: [!hideHeader && (_jsx("div", { className: "flex-shrink-0", children: _jsx(Header, { title: actualTitle, isCompleted: isCompleted, onClose: onClose, isModal: isModal, run: run, viewMode: viewMode, onViewModeChange: handleViewModeChange, showPlanPanel: showSlidingPanel, hasPlan: plans.length > 0, onTogglePlanPanel: handleTogglePlanPanel, onDownload: downloadConversation, onCopyRunId: copyRunId, resetWorkflow: resetWorkflow, onExportPdf: exportConversationPdf, isReceivingChunks: debugChunkFlash }) })), messages.length === 0 && !isCompleted ? (_jsx("div", { className: "flex-1 flex flex-col items-center justify-center h-full text-center py-6", children: _jsxs("div", { className: "p-5 max-w-md border border-info rounded-lg shadow-sm", children: [_jsxs("div", { className: "flex items-center space-x-3 mb-3", children: [_jsx(PulsatingCircle, { size: "sm", color: "blue" }), _jsx("div", { className: "text-sm text-muted font-medium", children: ThinkingMessages[thinkingMessageIndex] })] }), _jsx("div", { className: "mt-4 flex justify-center", children: _jsx(AnimatedThinkingDots, { color: "blue", className: "mt-1" }) })] }) })) : (_jsx(AllMessagesMixed, { messages: messages, bottomRef: bottomRef, isCompleted: isCompleted, plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, showPlanPanel: showSlidingPanel, onTogglePlanPanel: handleTogglePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan, taskLabels: taskLabels, streamingMessages: streamingMessages, onSendMessage: handleSendMessage, thinkingMessageIndex: thinkingMessageIndex, messageItemClassNames: messageItemClassNames, messageStyleOverrides: messageStyleOverrides, toolCallGroupClassNames: toolCallGroupClassNames, hideToolCallsInViewMode: hideToolCallsInViewMode, streamingMessageClassNames: streamingMessageClassNames, batchProgressPanelClassNames: batchProgressPanelClassNames, viewMode: viewMode, hideWorkstreamTabs: hideWorkstreamTabs, workingIndicatorClassName: workingIndicatorClassName, messageListClassName: messageListClassName, StoreLinkComponent: effectiveStoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent, prependFriendlyMessage: prependFriendlyMessage })), !hideMessageInput && (_jsx("div", { className: "flex-shrink-0", style: { paddingBottom: 'env(safe-area-inset-bottom, 0px)' }, children: effectiveWorkflowStatus && effectiveWorkflowStatus !== "RUNNING" ? (_jsxs(MessageBox, { status: effectiveWorkflowStatus === "COMPLETED" ? 'success' : 'done', icon: null, className: "m-2", children: ["This Workflow is ", effectiveWorkflowStatus] })) : showInput && (_jsx(MessageInput, { onSend: handleSendMessage, onStop: handleStopWorkflow, disabled: isUploading, isSending: isSending || isUploading, isStopping: isStopping, isStreaming: !isCompleted, isCompleted: isCompleted, activeTaskCount: getActiveTaskCount(), placeholder: placeholder, 
                                     // File upload props - use internal handler that signals workflow
                                     onFilesSelected: handleFileUpload, uploadedFiles: uploadedFiles, onRemoveFile: onRemoveFile, acceptedFileTypes: acceptedFileTypes, maxFiles: maxFiles, 
                                     // File processing state
@@ -934,8 +689,10 @@ fusionData, }) {
                                     renderDocumentSearch: renderDocumentSearch, selectedDocuments: selectedDocuments, onRemoveDocument: onRemoveDocument, 
                                     // Object linking
                                     hideObjectLinking: hideObjectLinking, 
+                                    // Files Uploaded
+                                    hideFileUpload: hideFileUpload, 
                                     // Styling props
-                                    className: inputContainerClassName, inputClassName: inputClassName })) })] }), showSlidingPanel && (_jsx("div", { className: "w-full lg:w-1/3 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l", children: _jsx(InlineSlidingPlanPanel, { plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, isOpen: showSlidingPanel, onClose: handleClosePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan }) })), _jsxs(VModal, { isOpen: isPdfModalOpen, onClose: () => setIsPdfModalOpen(false), children: [_jsx(VModalTitle, { children: "Export conversation as PDF" }), _jsxs(VModalBody, { children: [_jsx("p", { className: "mb-2", children: "This will open your browser's print dialog with the current conversation." }), _jsx("p", { className: "text-sm text-muted", children: "To save a PDF, choose \"Save as PDF\" or a similar option in the print dialog." })] }), _jsxs(VModalFooter, { align: "right", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsPdfModalOpen(false), children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleConfirmExportPdf, children: "Open print dialog" })] })] })] }) }) }));
+                                    className: inputContainerClassName, inputClassName: inputClassName })) }))] }), !hidePlanPanel && showSlidingPanel && (_jsx("div", { className: "w-full lg:w-1/3 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l", children: _jsx(InlineSlidingPlanPanel, { plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, isOpen: showSlidingPanel, onClose: handleClosePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan }) })), !hideDocumentPanel && isDocPanelOpen && openDocuments.length > 0 && (_jsx("div", { className: cn("w-full lg:w-2/5 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l", showSlidingPanel && "lg:w-1/3"), children: _jsx(DocumentPanel, { isOpen: isDocPanelOpen, onClose: handleCloseDocPanel, documents: openDocuments, activeDocumentId: activeDocumentId, onSelectDocument: selectDocument, onCloseDocument: handleCloseDocument, refreshKey: docRefreshKey, runId: run.runId }) })), _jsxs(Modal, { isOpen: isPdfModalOpen, onClose: () => setIsPdfModalOpen(false), children: [_jsx(ModalTitle, { children: "Export conversation as PDF" }), _jsxs(ModalBody, { children: [_jsx("p", { className: "mb-2", children: "This will open your browser's print dialog with the current conversation." }), _jsx("p", { className: "text-sm text-muted", children: "To save a PDF, choose \"Save as PDF\" or a similar option in the print dialog." })] }), _jsxs(ModalFooter, { align: "right", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsPdfModalOpen(false), children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleConfirmExportPdf, children: "Open print dialog" })] })] })] }) }) }));
     // Wrap with FusionFragmentProvider when fusionData is provided
     // This enables fusion-fragment code blocks to display data and supports
     // agent-mode interactions where clicking editable fields sends messages