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

package/src/features/agent/chat/ModernAgentConversation.tsx

@@ -7,26 +7,33 @@ import {
     AgentMessageType,
     ConversationFile,
     ConversationFileRef,
-    FileProcessingDetails,
-    FileProcessingStatus,
     Plan,
-    StreamingChunkDetails,
     UserInputSignal,
 } 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 { type AgentConversationViewMode } from "./ModernAgentOutput/AllMessagesMixed";
+import { type BatchProgressPanelClassNames } from "./ModernAgentOutput/BatchProgressPanel";
+import { type MessageItemClassNames } from "./ModernAgentOutput/MessageItem";
+import { type StreamingMessageClassNames } from "./ModernAgentOutput/StreamingMessage";
+import { type ToolCallGroupClassNames } from "./ModernAgentOutput/ToolCallGroup";
 import { ImageLightboxProvider } from "./ImageLightbox";
 import AllMessagesMixed from "./ModernAgentOutput/AllMessagesMixed";
 import Header from "./ModernAgentOutput/Header";
 import MessageInput, { UploadedFile, SelectedDocument } 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";
 
 export type StartWorkflowFn = (
     initialMessage?: string,
@@ -102,6 +109,26 @@ interface ModernAgentConversationProps {
     /** Max number of files allowed */
     maxFiles?: number;
 
+    /** Ref populated with the internal file upload handler for external triggering */
+    fileUploadRef?: React.MutableRefObject<((files: File[]) => void) | null>;
+    /** Called when processingFiles state changes (for external progress display) */
+    onProcessingFilesChange?: (files: Map<string, ConversationFile>) => void;
+    /** Called when plans change (for external plan panel) */
+    onPlansChange?: (plans: Array<{ plan: Plan; timestamp: number }>, activePlanIndex: number) => void;
+    /** Called when workstream status changes (for external plan panel) */
+    onWorkstreamStatusChange?: (statusMap: Map<number, Map<string, "pending" | "in_progress" | "completed" | "skipped">>) => void;
+
+    /** Controlled view mode — when provided, overrides internal state */
+    viewMode?: AgentConversationViewMode;
+    /** Called when view mode changes (for external control) */
+    onViewModeChange?: (mode: AgentConversationViewMode) => void;
+    /** Called when follow-up input availability is determined (after messages load) */
+    onShowInputChange?: (canSendFollowUp: boolean) => void;
+    /** Ref populated with the stop handler — call to interrupt the active agent. null when stop unavailable. */
+    stopRef?: React.MutableRefObject<(() => void) | null>;
+    /** Called when the stopping (in-progress) state changes */
+    onStoppingChange?: (isStopping: boolean) => void;
+
     // Document search props (render prop for custom search UI)
     /** Render custom document search UI - if provided, shows search button */
     renderDocumentSearch?: (props: {
@@ -116,10 +143,22 @@ interface ModernAgentConversationProps {
 
     // Hide the default object linking (for apps that don't use it)
     hideObjectLinking?: boolean;
-
-    // Callback to get attached document IDs when sending messages
-    // Returns array of document IDs to include in message metadata
-    getAttachedDocs?: () => string[];
+    /** Hide the internal header (for apps that render their own) */
+    hideHeader?: boolean;
+    /** Hide the internal message input (for apps that render their own) */
+    hideMessageInput?: boolean;
+    /** Hide the internal plan panel (for apps that render their own) */
+    hidePlanPanel?: boolean;
+    /** Hide workstream tabs */
+    hideWorkstreamTabs?: boolean;
+    /** Hide the default file upload */
+    hideFileUpload?: boolean;
+    /** Hide the document preview panel that auto-opens on create_document */
+    hideDocumentPanel?: boolean;
+
+    // Callback to get attached documents when sending messages
+    // Returns array of { id, name } to include in message metadata and display
+    getAttachedDocs?: () => SelectedDocument[];
     // Called after attachments are sent to allow clearing them
     onAttachmentsSent?: () => void;
     // Whether files are currently being uploaded - disables send/start buttons
@@ -134,6 +173,31 @@ interface ModernAgentConversationProps {
     /** Additional className for the input field */
     inputClassName?: string;
 
+    /** Additional className for the root container */
+    className?: string;
+
+    messageItemClassNames?: MessageItemClassNames;
+    /** Sparse MESSAGE_STYLES overrides passed to every MessageItem */
+    messageStyleOverrides?: import("./ModernAgentOutput/MessageItem").MessageItemProps['messageStyleOverrides'];
+    toolCallGroupClassNames?: ToolCallGroupClassNames;
+    /** Hide ToolCallGroup in this view mode */
+    hideToolCallsInViewMode?: AgentConversationViewMode[];
+    streamingMessageClassNames?: StreamingMessageClassNames;
+    batchProgressPanelClassNames?: BatchProgressPanelClassNames;
+
+    /** className override for the working indicator container */
+    workingIndicatorClassName?: string;
+    /** className override for the message list container */
+    messageListClassName?: string;
+    /** Custom component to render store/document links instead of default NavLink navigation */
+    StoreLinkComponent?: React.ComponentType<{ href: string; documentId: string; children: React.ReactNode }>;
+    /** Custom component to render store/collection links instead of default NavLink navigation */
+    CollectionLinkComponent?: React.ComponentType<{ href: string; collectionId: string; children: React.ReactNode }>;
+
+    /** Optional message to display as the first user message in the conversation.
+     *  Purely visual/UI — not sent to temporal. Renders as a QUESTION MessageItem before real messages. */
+    prependFriendlyMessage?: string;
+
     // Fusion fragment props
     /**
      * Data to provide to fusion-fragment code blocks for rendering.
@@ -162,7 +226,7 @@ export function ModernAgentConversation(
             <SkillWidgetProvider>
                 <ModernAgentConversationInner {...props} run={execRun} />
             </SkillWidgetProvider>
-        )
+        );
     } else if (startWorkflow) {
         // If we have startWorkflow capability but no run yet
         return <StartWorkflowView {...props} />;
@@ -302,13 +366,13 @@ function StartWorkflowView({
                 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');
             }
 
@@ -612,6 +676,13 @@ function ModernAgentConversationInner({
     onRemoveDocument,
     // Object linking
     hideObjectLinking,
+    // Section visibility
+    hideHeader,
+    hideMessageInput,
+    hidePlanPanel,
+    hideWorkstreamTabs,
+    hideFileUpload,
+    hideDocumentPanel,
     // Attachment callback
     getAttachedDocs,
     onAttachmentsSent,
@@ -620,74 +691,121 @@ function ModernAgentConversationInner({
     // Context callback
     getMessageContext,
     // Styling props
+    className,
     inputContainerClassName,
     inputClassName,
     // Fusion fragment data
     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,
 }: ModernAgentConversationProps & { run: AsyncExecutionResult }) {
     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<HTMLDivElement | null>(null);
     const conversationRef = useRef<HTMLDivElement | null>(null);
-    const [messages, setMessages] = useState<AgentMessage[]>([]);
-    const [isCompleted, setIsCompleted] = useState(false);
     const [isSending, setIsSending] = useState(false);
-    const [viewMode, setViewMode] = useState<"stacked" | "sliding">("sliding");
-    const [showSlidingPanel, setShowSlidingPanel] = useState<boolean>(!isModal);
+    const [internalViewMode, setInternalViewMode] = useState<AgentConversationViewMode>("sliding");
+    const viewMode = controlledViewMode ?? internalViewMode;
+    const handleViewModeChange = useCallback((mode: AgentConversationViewMode) => {
+        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<Array<{ plan: Plan; timestamp: number }>>(
-        [],
-    );
-    // Track which plan is currently active in the UI
-    const [activePlanIndex, setActivePlanIndex] = useState<number>(0);
-    // Store workstream status for each plan separately
-    const [workstreamStatusMap, setWorkstreamStatusMap] = useState<
-        Map<
-            number,
-            Map<string, "pending" | "in_progress" | "completed" | "skipped">
-        >
-    >(new Map());
     const [thinkingMessageIndex, setThinkingMessageIndex] = useState(0);
-    const toast = useToast();
-    const [showInput, setShowInput] = useState(interactive);
-    const [workflowStatus, setWorkflowStatus] = useState<string | null>(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<Map<string, { text: string; workstreamId?: string; isComplete?: boolean; startTimestamp: number; activityId?: string }>>(new Map());
-
-    // Track files being processed by the workflow
-    const [processingFiles, setProcessingFiles] = useState<Map<string, ConversationFile>>(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<Map<string, { text: string; workstreamId?: string; isComplete?: boolean; startTimestamp: number; activityId?: string }>>(new Map());
-    const streamingFlushScheduled = useRef<number | null>(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<NodeJS.Timeout | null>(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: [] },
@@ -701,23 +819,44 @@ function ModernAgentConversationInner({
         };
     }, [plans, activePlanIndex, workstreamStatusMap]);
 
-    // PERFORMANCE: Stabilize callback props to prevent child re-renders
+    // ────────────────────────────────────────────
+    // Stable callbacks
+    // ────────────────────────────────────────────
     const handleTogglePlanPanel = useCallback(() => {
-        setShowSlidingPanel((prev) => {
+        setShowSlidingPanel((prev: boolean) => {
             if (!prev) {
                 sessionStorage.setItem("plan-panel-shown", "true");
             }
             return !prev;
         });
-    }, []);
+    }, [setShowSlidingPanel]);
 
     const handleChangePlan = useCallback((index: number) => {
         setActivePlanIndex(index);
-    }, []);
+    }, [setActivePlanIndex]);
 
     const handleClosePlanPanel = useCallback(() => {
         setShowSlidingPanel(false);
-    }, []);
+    }, [setShowSlidingPanel]);
+
+    // Default StoreLinkComponent that opens documents in the panel
+    const internalStoreLinkComponent = useCallback(
+        ({ documentId, children }: { href: string; documentId: string; children: React.ReactNode }) => (
+            <button
+                className="text-info underline cursor-pointer hover:text-info/80"
+                onClick={() => openDocInPanel(documentId)}
+            >
+                {children}
+            </button>
+        ),
+        [openDocInPanel]
+    );
+
+    const effectiveStoreLinkComponent = StoreLinkComponent ?? internalStoreLinkComponent;
+
+    // ────────────────────────────────────────────
+    // Effects
+    // ────────────────────────────────────────────
 
     // Show rotating thinking messages
     useEffect(() => {
@@ -731,300 +870,54 @@ function ModernAgentConversationInner({
         }
     }, [isCompleted]);
 
-    const checkWorkflowStatus = async () => {
-        try {
-            const statusResult = await client.store.workflows.getRunDetails(run.runId, run.workflowId);
-            setWorkflowStatus(statusResult.status as string);
-        } 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 as StreamingChunkDetails;
-                // 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;
-            }
+        if (fileUploadRef) fileUploadRef.current = handleFileUpload;
+        return () => { if (fileUploadRef) fileUploadRef.current = null; };
+    }, [fileUploadRef, handleFileUpload]);
 
-            // Handle file processing status updates (SYSTEM messages with system_type: 'file_processing')
-            if (message.type === AgentMessageType.SYSTEM) {
-                const details = message.details as FileProcessingDetails | undefined;
-                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 as string;
-                // 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
+    // Notify parent when processingFiles changes
     useEffect(() => {
-        setIsCompleted(!isInProgress(messages));
+        onProcessingFilesChange?.(processingFiles);
+    }, [processingFiles, onProcessingFilesChange]);
 
-        // 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]);
+    // Notify parent when plans change
+    useEffect(() => {
+        onPlansChange?.(plans, activePlanIndex);
+    }, [plans, activePlanIndex, onPlansChange]);
 
-    // Update plans and workstream status based on incoming messages
+    // Notify parent when workstream status changes
     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
+        onWorkstreamStatusChange?.(workstreamStatusMap);
+    }, [workstreamStatusMap, onWorkstreamStatusChange]);
 
-            return () => clearTimeout(notificationTimeout);
+    // 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: Plan | null = 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 } as 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<
-                                string,
-                                "pending" | "in_progress" | "completed" | "skipped"
-                            >();
-
-                            // 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;
         }
-    }, [messages, plans, activePlanIndex]);
+        if (effectiveWorkflowStatus !== null) {
+            onShowInputChange?.(true);
+        }
+    }, [showInput, effectiveWorkflowStatus, messages.length, onShowInputChange]);
+
+    // ────────────────────────────────────────────
+    // Handlers
+    // ────────────────────────────────────────────
 
     // Send a message to the agent
-    const handleSendMessage = (message: string) => {
+    const handleSendMessage = useCallback((message: string) => {
         const trimmed = message.trim();
-        if (!trimmed || isSending) return;
+        if (!trimmed || isSendingRef.current) return;
 
         // Block if files are still processing
-        if (hasProcessingFiles) {
+        if (hasProcessingFilesRef.current) {
             toast({
                 status: "warning",
                 title: "Files Still Processing",
@@ -1036,63 +929,46 @@ function ModernAgentConversationInner({
 
         setIsSending(true);
 
-        // Add optimistic QUESTION message immediately for better UX
-        const optimisticTimestamp = Date.now();
-        const optimisticMessage: AgentMessage = {
-            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: AgentMessage = {
+            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,
             } as UserInputSignal)
             .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 as any)?._messageId === messageId
+                );
                 toast({
                     status: "error",
                     title: "Failed to Send Message",
@@ -1103,85 +979,13 @@ function ModernAgentConversationInner({
             .finally(() => {
                 setIsSending(false);
             });
-    };
-
-    // Handle file uploads - upload to artifact storage and signal workflow
-    const handleFileUpload = useCallback(async (files: File[]) => {
-        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: ConversationFile = {
-                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,
-                    } as ConversationFileRef
-                );
-
-            } 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: React.DragEvent) => {
         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);
         }
@@ -1207,7 +1011,6 @@ function ModernAgentConversationInner({
         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);
@@ -1215,7 +1018,7 @@ function ModernAgentConversationInner({
     }, [run, handleFileUpload]);
 
     // Stop/interrupt the active workflow
-    const handleStopWorkflow = async () => {
+    const handleStopWorkflow = useCallback(async () => {
         if (isStopping) return;
 
         setIsStopping(true);
@@ -1230,7 +1033,6 @@ function ModernAgentConversationInner({
                 description: "Type your message to give new instructions",
                 duration: 3000,
             });
-            setIsCompleted(true);
         } catch (err) {
             toast({
                 status: "error",
@@ -1241,7 +1043,18 @@ function ModernAgentConversationInner({
         } 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 = (): number => {
@@ -1356,12 +1169,20 @@ function ModernAgentConversationInner({
         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<string, string>()),
+    [getActivePlan.plan]);
+
     // Main content - wrapped with FusionFragmentProvider when fusionData is provided
     const mainContent = (
         <ArtifactUrlCacheProvider>
         <ImageLightboxProvider>
         <div
-            className={`flex flex-col lg:flex-row gap-2 h-full relative overflow-hidden ${isDragOver ? 'ring-2 ring-blue-400 ring-inset' : ''}`}
+            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}
@@ -1379,36 +1200,39 @@ function ModernAgentConversationInner({
             {/* Conversation Area - responsive width based on panel visibility */}
             <div
                 ref={conversationRef}
-                className={`flex flex-col min-h-0 border-0 ${
-                showSlidingPanel
-                    ? 'w-full lg:w-2/3 flex-1 min-h-[50vh]'
-                    : fullWidth
-                        ? 'flex-1 w-full'
-                        : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`
-            }`}
+                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" : ""}`
+                )}
             >
                 {/* Streaming activity indicator moved to Header */}
 
                 {/* Header - flex-shrink-0 to prevent shrinking */}
-                <div className="flex-shrink-0">
-                    <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}
-                    />
-                </div>
+                {!hideHeader && (
+                    <div className="flex-shrink-0">
+                        <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}
+                        />
+                    </div>
+                )}
 
                 {messages.length === 0 && !isCompleted ? (
                     <div className="flex-1 flex flex-col items-center justify-center h-full text-center py-6">
@@ -1428,7 +1252,6 @@ function ModernAgentConversationInner({
                     <AllMessagesMixed
                         messages={messages}
                         bottomRef={bottomRef as React.RefObject<HTMLDivElement>}
-                        viewMode={viewMode}
                         isCompleted={isCompleted}
                         plan={getActivePlan.plan}
                         workstreamStatus={getActivePlan.workstreamStatus}
@@ -1437,65 +1260,77 @@ function ModernAgentConversationInner({
                         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<string, string>())}
+                        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}
                     />
                 )}
 
                 {/* Show workflow status message when not running, or show input when running/unknown */}
                 {/* Input area - flex-shrink-0 to stay pinned at bottom, with iOS safe area support */}
-                <div className="flex-shrink-0" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}>
-                    {workflowStatus && workflowStatus !== "RUNNING" ? (
-                        <MessageBox
-                            status={workflowStatus === "COMPLETED" ? 'success' : 'done'}
-                            icon={null}
-                            className="m-2"
-                        >
-                            This Workflow is {workflowStatus}
-                        </MessageBox>
-                    ) : showInput && (
-                        <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
-                            processingFiles={processingFiles}
-                            hasProcessingFiles={hasProcessingFiles}
-                            // Document search props
-                            renderDocumentSearch={renderDocumentSearch}
-                            selectedDocuments={selectedDocuments}
-                            onRemoveDocument={onRemoveDocument}
-                            // Object linking
-                            hideObjectLinking={hideObjectLinking}
-                            // Styling props
-                            className={inputContainerClassName}
-                            inputClassName={inputClassName}
-                        />
-                    )}
-                </div>
+                {!hideMessageInput && (
+                    <div className="flex-shrink-0" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}>
+                        {effectiveWorkflowStatus && effectiveWorkflowStatus !== "RUNNING" ? (
+                            <MessageBox
+                                status={effectiveWorkflowStatus === "COMPLETED" ? 'success' : 'done'}
+                                icon={null}
+                                className="m-2"
+                            >
+                                This Workflow is {effectiveWorkflowStatus}
+                            </MessageBox>
+                        ) : showInput && (
+                            <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
+                                processingFiles={processingFiles}
+                                hasProcessingFiles={hasProcessingFiles}
+                                // Document search props
+                                renderDocumentSearch={renderDocumentSearch}
+                                selectedDocuments={selectedDocuments}
+                                onRemoveDocument={onRemoveDocument}
+                                // Object linking
+                                hideObjectLinking={hideObjectLinking}
+                                // Files Uploaded
+                                hideFileUpload={hideFileUpload}
+                                // Styling props
+                                className={inputContainerClassName}
+                                inputClassName={inputClassName}
+                            />
+                        )}
+                    </div>
+                )}
             </div>
 
             {/* Plan Panel Area - only rendered when panel should be shown */}
-            {showSlidingPanel && (
+            {!hidePlanPanel && showSlidingPanel && (
                 <div className="w-full lg:w-1/3 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l">
                     <InlineSlidingPlanPanel
                         plan={getActivePlan.plan}
@@ -1508,25 +1343,44 @@ function ModernAgentConversationInner({
                     />
                 </div>
             )}
-            <VModal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
-                <VModalTitle>Export conversation as PDF</VModalTitle>
-                <VModalBody>
+
+            {/* Document Panel Area - slides in when documents are created/edited */}
+            {!hideDocumentPanel && isDocPanelOpen && openDocuments.length > 0 && (
+                <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"
+                )}>
+                    <DocumentPanel
+                        isOpen={isDocPanelOpen}
+                        onClose={handleCloseDocPanel}
+                        documents={openDocuments}
+                        activeDocumentId={activeDocumentId}
+                        onSelectDocument={selectDocument}
+                        onCloseDocument={handleCloseDocument}
+                        refreshKey={docRefreshKey}
+                        runId={run.runId}
+                    />
+                </div>
+            )}
+            <Modal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
+                <ModalTitle>Export conversation as PDF</ModalTitle>
+                <ModalBody>
                     <p className="mb-2">
                         This will open your browser&apos;s print dialog with the current conversation.
                     </p>
                     <p className="text-sm text-muted">
                         To save a PDF, choose &quot;Save as PDF&quot; or a similar option in the print dialog.
                     </p>
-                </VModalBody>
-                <VModalFooter align="right">
+                </ModalBody>
+                <ModalFooter align="right">
                     <Button variant="ghost" size="sm" onClick={() => setIsPdfModalOpen(false)}>
                         Cancel
                     </Button>
                     <Button size="sm" onClick={handleConfirmExportPdf}>
                         Open print dialog
                     </Button>
-                </VModalFooter>
-            </VModal>
+                </ModalFooter>
+            </Modal>
         </div>
         </ImageLightboxProvider>
         </ArtifactUrlCacheProvider>