npm - @vertesia/ui - Versions diffs - 0.24.0-dev.202601221707 - Mend

@vertesia/ui 0.24.0-dev.202601221707

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1854) hide show

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

@@ -0,0 +1,888 @@
+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 { Button, MessageBox, Spinner, useToast, VModal, VModalBody, VModalFooter, VModalTitle } 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 { ThinkingMessages } from "./WaitingMessages";
+import InlineSlidingPlanPanel from "./ModernAgentOutput/InlineSlidingPlanPanel";
+import { SkillWidgetProvider } from "./SkillWidgetProvider";
+import { ArtifactUrlCacheProvider } from "./useArtifactUrlCache.js";
+function printElementToPdf(sourceElement, title) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return false;
+    }
+    // Use a hidden iframe to avoid opening a new window
+    const iframe = document.createElement("iframe");
+    iframe.style.position = "fixed";
+    iframe.style.right = "0";
+    iframe.style.bottom = "0";
+    iframe.style.width = "0";
+    iframe.style.height = "0";
+    iframe.style.border = "0";
+    iframe.style.visibility = "hidden";
+    document.body.appendChild(iframe);
+    const iframeWindow = iframe.contentWindow;
+    if (!iframeWindow) {
+        iframe.parentNode?.removeChild(iframe);
+        return false;
+    }
+    const doc = iframeWindow.document;
+    doc.open();
+    doc.write(`<!doctype html><html><head><title>${title}</title></head><body></body></html>`);
+    doc.close();
+    doc.title = title;
+    const styles = document.querySelectorAll("link[rel=\"stylesheet\"], style");
+    styles.forEach((node) => {
+        doc.head.appendChild(node.cloneNode(true));
+    });
+    doc.body.innerHTML = sourceElement.innerHTML;
+    iframeWindow.focus();
+    iframeWindow.print();
+    setTimeout(() => {
+        iframe.parentNode?.removeChild(iframe);
+    }, 1000);
+    return true;
+}
+export function ModernAgentConversation(props) {
+    const { run, startWorkflow } = props;
+    if (run) {
+        // If we have a run, convert it to AsyncExecutionResult format if needed
+        const execRun = "runId" in run
+            ? run
+            : {
+                runId: run.run_id,
+                workflowId: run.workflow_id,
+            };
+        return (_jsx(SkillWidgetProvider, { children: _jsx(ModernAgentConversationInner, { ...props, run: execRun }) }));
+    }
+    else if (startWorkflow) {
+        // If we have startWorkflow capability but no run yet
+        return _jsx(StartWorkflowView, { ...props });
+    }
+    else {
+        // Empty state
+        return _jsx(EmptyState, {});
+    }
+}
+// Empty state when no agent is running
+function EmptyState() {
+    return (_jsxs(MessageBox, { status: "info", icon: _jsx(Bot, { className: "size-16 text-muted mb-4" }), children: [_jsx("div", { className: "text-base font-medium text-muted", children: "No agent currently running" }), _jsx("div", { className: "mt-3 text-sm text-muted", children: "Select an interaction and click Start to start an agent" })] }));
+}
+// Start workflow view - allows initiating a new agent conversation
+// Files can be staged locally before workflow starts, then uploaded when the workflow is created
+function StartWorkflowView({ initialMessage, startWorkflow, onClose, isModal = false, fullWidth = false, placeholder = "Type your message...", startButtonText = "Start Agent", title = "Start New Conversation",
+// Attachment callback - used to include existing document attachments in the first message
+getAttachedDocs, onAttachmentsSent,
+// File upload props
+acceptedFileTypes = ".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.webp", maxFiles = 5, }) {
+    const { client } = useUserSession();
+    const [inputValue, setInputValue] = useState("");
+    const [isSending, setIsSending] = useState(false);
+    const [run, setRun] = useState();
+    const toast = useToast();
+    const inputRef = useRef(null);
+    const fileInputRef = useRef(null);
+    // Staged files - stored locally until workflow starts
+    const [stagedFiles, setStagedFiles] = useState([]);
+    // Drag and drop state
+    const [isDragOver, setIsDragOver] = useState(false);
+    const dragCounterRef = useRef(0);
+    // Drag and drop handlers for file staging
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current++;
+        if (e.dataTransfer?.types?.includes('Files')) {
+            setIsDragOver(true);
+        }
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current--;
+        if (dragCounterRef.current === 0) {
+            setIsDragOver(false);
+        }
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current = 0;
+        setIsDragOver(false);
+        if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+            const filesArray = Array.from(e.dataTransfer.files);
+            setStagedFiles(prev => {
+                const newFiles = [...prev, ...filesArray].slice(0, maxFiles);
+                return newFiles;
+            });
+        }
+    }, [maxFiles]);
+    const handleFileInputChange = useCallback((e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            const filesArray = Array.from(e.target.files);
+            setStagedFiles(prev => {
+                const newFiles = [...prev, ...filesArray].slice(0, maxFiles);
+                return newFiles;
+            });
+        }
+        // Reset input so the same file can be selected again
+        e.target.value = '';
+    }, [maxFiles]);
+    const removeStagedFile = useCallback((index) => {
+        setStagedFiles(prev => prev.filter((_, i) => i !== index));
+    }, []);
+    useEffect(() => {
+        // Focus the input field when component mounts
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    // Start a new workflow with the message
+    const startWorkflowWithMessage = async () => {
+        if (!startWorkflow)
+            return;
+        const message = inputValue.trim();
+        if (!message || isSending)
+            return;
+        setIsSending(true);
+        try {
+            // Reset plan panel state when starting a new agent
+            sessionStorage.removeItem("plan-panel-shown");
+            toast({
+                title: stagedFiles.length > 0 ? "Starting agent and uploading files..." : "Starting agent...",
+                status: "info",
+                duration: 3000,
+            });
+            // Get attached document IDs if callback provided
+            const attachedDocs = getAttachedDocs?.() || [];
+            // Build message content with attachment references if present
+            let messageContent = message;
+            if (attachedDocs.length > 0 && !/store:\S+/.test(message)) {
+                const lines = attachedDocs.map((id) => `store:${id}`);
+                messageContent = [message, '', 'Attachments:', ...lines].join('\n');
+            }
+            const newRun = await startWorkflow(messageContent);
+            if (newRun) {
+                // Upload staged files to the new run's artifact space and signal workflow
+                if (stagedFiles.length > 0) {
+                    for (const file of stagedFiles) {
+                        try {
+                            const artifactPath = `files/${file.name}`;
+                            await client.files.uploadArtifact(newRun.run_id, artifactPath, file);
+                            // Signal workflow that file was uploaded
+                            await client.store.workflows.sendSignal(newRun.workflow_id, newRun.run_id, "FileUploaded", {
+                                id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+                                name: file.name,
+                                content_type: file.type || 'application/octet-stream',
+                                reference: `artifact:${artifactPath}`,
+                                artifact_path: artifactPath,
+                            });
+                        }
+                        catch (uploadErr) {
+                            console.error(`Failed to upload staged file ${file.name}:`, uploadErr);
+                            // Continue with other files
+                        }
+                    }
+                    setStagedFiles([]);
+                }
+                // Clear attachments after successful start
+                onAttachmentsSent?.();
+                setRun({
+                    runId: newRun.run_id,
+                    workflowId: newRun.workflow_id,
+                });
+                setInputValue("");
+                toast({
+                    title: "Agent started",
+                    status: "success",
+                    duration: 3000,
+                });
+            }
+        }
+        catch (err) {
+            toast({
+                title: "Error starting workflow",
+                status: "error",
+                duration: 3000,
+                description: err instanceof Error ? err.message : "Unknown error",
+            });
+        }
+        finally {
+            setIsSending(false);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            startWorkflowWithMessage();
+        }
+    };
+    // If a run has been started, show the conversation
+    if (run) {
+        return (_jsx(ModernAgentConversationInner, { onClose, isModal, initialMessage, placeholder, run: run, title: title }));
+    }
+    return (_jsxs("div", { className: `flex flex-col h-full bg-white dark:bg-gray-900 overflow-hidden border-0 relative ${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 stage for upload"] }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes, onChange: handleFileInputChange, className: "hidden" }), _jsxs("div", { className: "flex items-center justify-between py-2 px-3 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("div", { className: "p-1", children: _jsx(Cpu, { className: "size-3.5 text-muted" }) }), _jsx("span", { className: "font-medium text-sm text-gray-700 dark:text-gray-300", children: title })] }), onClose && !isModal && (_jsx(Button, { size: "xs", variant: "ghost", onClick: onClose, title: "Close", className: "text-slate-500 hover:text-slate-700", children: _jsx(XIcon, { className: "size-4" }) }))] }), _jsxs("div", { className: `flex-1 overflow-y-auto px-4 py-6 bg-white dark:bg-gray-900 flex flex-col ${fullWidth ? 'items-start justify-start' : 'items-center justify-center'}`, children: [initialMessage && (_jsx("div", { className: `px-4 py-3 mb-4 bg-blue-50/80 dark:bg-blue-900/30 border-l-2 border-blue-400 dark:border-blue-500 text-blue-700 dark:text-blue-300 ${fullWidth ? 'w-full' : 'max-w-md'}`, children: initialMessage })), _jsxs("div", { className: `bg-white dark:bg-slate-800 p-4 border-l-2 border-blue-400 dark:border-blue-500 ${fullWidth ? 'w-full' : 'max-w-md'}`, children: [_jsx("div", { className: "text-base text-slate-600 dark:text-slate-300 font-medium", children: "Enter a message to start a conversation" }), _jsxs("div", { className: "mt-3 text-sm text-slate-500 dark:text-slate-400", children: ["Type your question below and press Enter or click ", startButtonText, " ", "to begin"] })] })] }), _jsxs("div", { className: "py-3 px-3 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900", children: [stagedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: stagedFiles.map((file, index) => (_jsxs("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-attention/10 text-attention rounded-md text-sm", children: [_jsx(FileTextIcon, { className: "size-3.5" }), _jsx("span", { className: "max-w-[120px] truncate", children: file.name }), _jsx("span", { className: "text-xs opacity-70", children: "Staged" }), _jsx("button", { onClick: () => removeStagedFile(index), className: "ml-1 p-0.5 hover:bg-attention/20 rounded", children: _jsx(XIcon, { className: "size-3" }) })] }, `${file.name}-${index}`))) })), _jsx("div", { className: "flex gap-2 mb-2", children: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => fileInputRef.current?.click(), disabled: isSending || stagedFiles.length >= maxFiles, className: "text-xs", children: [_jsx(UploadIcon, { className: "size-3.5 mr-1.5" }), "Upload"] }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx("input", { ref: inputRef, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isSending, className: "w-full py-2 px-3 text-sm border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white focus:border-gray-300 dark:focus:border-gray-600 focus:ring-0 rounded-md" }) }), _jsxs(Button, { onClick: startWorkflowWithMessage, disabled: !inputValue.trim() || isSending, className: "px-3 py-2 bg-gray-800 dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white text-xs rounded-md transition-colors", children: [isSending ? (_jsx(Spinner, { size: "sm", className: "mr-1.5" })) : (_jsx(SendIcon, { className: "size-3.5 mr-1.5" })), startButtonText] })] }), _jsx("div", { className: "text-xs text-gray-400 dark:text-gray-500 mt-2 text-center", children: stagedFiles.length > 0
+                            ? `${stagedFiles.length} file${stagedFiles.length > 1 ? 's' : ''} staged - will upload when conversation starts`
+                            : 'Type a message to start the conversation' })] })] }));
+}
+// Inner component that handles the agent conversation - similar to ModernAgentOutput
+function ModernAgentConversationInner({ run, title, interactive = true, onClose, isModal = false, fullWidth = false, placeholder = "Type your message...", resetWorkflow,
+// File upload props (onFilesSelected handled internally by handleFileUpload)
+uploadedFiles, onRemoveFile, acceptedFileTypes, maxFiles,
+// Document search props
+renderDocumentSearch, selectedDocuments, onRemoveDocument,
+// Object linking
+hideObjectLinking,
+// Attachment callback
+getAttachedDocs, onAttachmentsSent,
+// Upload state
+isUploading = false,
+// Styling props
+inputContainerClassName, inputClassName, }) {
+    const { client } = useUserSession();
+    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 [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
+    const getActivePlan = useMemo(() => {
+        const currentPlanData = plans[activePlanIndex] || {
+            plan: { plan: [] },
+            timestamp: 0,
+        };
+        const currentWorkstreamStatus = workstreamStatusMap.get(currentPlanData.timestamp) || new Map();
+        return {
+            plan: currentPlanData.plan,
+            workstreamStatus: currentWorkstreamStatus,
+        };
+    }, [plans, activePlanIndex, workstreamStatusMap]);
+    // PERFORMANCE: Stabilize callback props to prevent child re-renders
+    const handleTogglePlanPanel = useCallback(() => {
+        setShowSlidingPanel((prev) => {
+            if (!prev) {
+                sessionStorage.setItem("plan-panel-shown", "true");
+            }
+            return !prev;
+        });
+    }, []);
+    const handleChangePlan = useCallback((index) => {
+        setActivePlanIndex(index);
+    }, []);
+    const handleClosePlanPanel = useCallback(() => {
+        setShowSlidingPanel(false);
+    }, []);
+    // Show rotating thinking messages
+    useEffect(() => {
+        if (!isCompleted) {
+            const interval = setInterval(() => {
+                setThinkingMessageIndex(() => Math.floor(Math.random() * (ThinkingMessages.length - 1)));
+            }, 4000);
+            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
+    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;
+                if (!details?.streaming_id)
+                    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(details.streaming_id) || {
+                    text: '',
+                    workstreamId: message.workstream_id,
+                    startTimestamp: Date.now()
+                };
+                const newText = current.text + (message.message || '');
+                pendingStreamingChunks.current.set(details.streaming_id, {
+                    text: newText,
+                    workstreamId: message.workstream_id,
+                    isComplete: details.is_final,
+                    startTimestamp: current.startTimestamp,
+                });
+                // 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 ANSWER arrives, clear streaming messages (they contain the same content)
+            // This prevents showing the message twice: once as streaming, once as final ANSWER
+            if (message.type === AgentMessageType.ANSWER) {
+                pendingStreamingChunks.current.clear();
+                if (streamingFlushScheduled.current !== null) {
+                    cancelAnimationFrame(streamingFlushScheduled.current);
+                    streamingFlushScheduled.current = null;
+                }
+                setStreamingMessages(new Map());
+            }
+            // When COMPLETE arrives, clear any remaining streaming messages
+            // (don't convert to THOUGHT since the content is already in the ANSWER message)
+            if (message.type === AgentMessageType.COMPLETE) {
+                pendingStreamingChunks.current.clear();
+                if (streamingFlushScheduled.current !== null) {
+                    cancelAnimationFrame(streamingFlushScheduled.current);
+                    streamingFlushScheduled.current = null;
+                }
+                setStreamingMessages(new Map());
+            }
+            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
+    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
+    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);
+        }
+        // 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);
+                }
+            }
+        }
+    }, [messages, plans, activePlanIndex]);
+    // Send a message to the agent
+    const handleSendMessage = (message) => {
+        const trimmed = message.trim();
+        if (!trimmed || isSending)
+            return;
+        // Block if files are still processing
+        if (hasProcessingFiles) {
+            toast({
+                status: "warning",
+                title: "Files Still Processing",
+                description: "Please wait for all files to finish processing before sending",
+                duration: 3000,
+            });
+            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?.() || [];
+        // 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}`);
+            messageContent = [trimmed, '', 'Attachments:', ...lines].join('\n');
+        }
+        client.store.workflows
+            .sendSignal(run.workflowId, run.runId, "UserInput", {
+            message: messageContent,
+            metadata: attachedDocs.length > 0 ? { attached_docs: attachedDocs } : undefined,
+        })
+            .then(() => {
+            setIsCompleted(false);
+            // Clear attachments after successful send
+            onAttachmentsSent?.();
+        })
+            .catch((err) => {
+            // Remove optimistic message on failure
+            setMessages((prev) => prev.filter((m) => m.timestamp !== optimisticTimestamp));
+            toast({
+                status: "error",
+                title: "Failed to Send Message",
+                description: err instanceof Error ? err.message : "Unknown error",
+                duration: 3000,
+            });
+        })
+            .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]);
+    // 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);
+        }
+    }, [run]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current--;
+        if (dragCounterRef.current === 0) {
+            setIsDragOver(false);
+        }
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        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 () => {
+        if (isStopping)
+            return;
+        setIsStopping(true);
+        try {
+            await client.store.workflows.sendSignal(run.workflowId, run.runId, "Stop", {
+                message: "User requested stop",
+            });
+            toast({
+                status: "info",
+                title: "Agent Interrupted",
+                description: "Type your message to give new instructions",
+                duration: 3000,
+            });
+            setIsCompleted(true);
+        }
+        catch (err) {
+            toast({
+                status: "error",
+                title: "Failed to Interrupt",
+                description: err instanceof Error ? err.message : "Unknown error",
+                duration: 3000,
+            });
+        }
+        finally {
+            setIsStopping(false);
+        }
+    };
+    // Calculate number of active tasks for the status indicator
+    const getActiveTaskCount = () => {
+        if (!messages.length)
+            return 0;
+        // Group messages by workstream
+        const workstreamMessages = new Map();
+        messages.forEach((message) => {
+            const workstreamId = getWorkstreamId(message);
+            if (workstreamId !== "main" && workstreamId !== "all") {
+                if (!workstreamMessages.has(workstreamId)) {
+                    workstreamMessages.set(workstreamId, []);
+                }
+                workstreamMessages.get(workstreamId).push(message);
+            }
+        });
+        // Count workstreams that don't have completion messages
+        let activeCount = 0;
+        for (const [_, msgs] of workstreamMessages.entries()) {
+            if (msgs.length > 0) {
+                const lastMessage = msgs[msgs.length - 1];
+                // If the last message isn't a completion message, the workstream is active
+                if (![AgentMessageType.COMPLETE, AgentMessageType.IDLE].includes(lastMessage.type)) {
+                    activeCount++;
+                }
+            }
+        }
+        return activeCount;
+    };
+    const actualTitle = title || run.workflowId.split(":")[2] || "Agent Conversation";
+    // Handle downloading conversation
+    const downloadConversation = async () => {
+        try {
+            const url = await getConversationUrl(client, run.runId);
+            if (url)
+                window.open(url, "_blank");
+        }
+        catch (err) {
+            console.error("Failed to download conversation", err);
+            toast({
+                status: "error",
+                title: "Failed to download conversation",
+                duration: 3000,
+            });
+        }
+    };
+    // Handle copying run ID
+    const copyRunId = () => {
+        navigator.clipboard.writeText(run.runId);
+        toast({
+            status: "success",
+            title: "Run ID copied",
+            duration: 2000,
+        });
+    };
+    const [isPdfModalOpen, setIsPdfModalOpen] = useState(false);
+    const exportConversationPdf = () => {
+        if (!conversationRef.current) {
+            toast({
+                status: "error",
+                title: "PDF export failed",
+                description: "No conversation content available to export",
+                duration: 3000,
+            });
+            return;
+        }
+        setIsPdfModalOpen(true);
+    };
+    const handleConfirmExportPdf = () => {
+        if (!conversationRef.current) {
+            toast({
+                status: "error",
+                title: "PDF export failed",
+                description: "No conversation content available to export",
+                duration: 3000,
+            });
+            return;
+        }
+        const pdfTitle = `${actualTitle} - ${run.runId}`;
+        const success = printElementToPdf(conversationRef.current, pdfTitle);
+        if (!success) {
+            toast({
+                status: "error",
+                title: "PDF export failed",
+                description: "Unable to open print preview",
+                duration: 4000,
+            });
+            return;
+        }
+        toast({
+            status: "success",
+            title: "PDF export ready",
+            description: "Use your browser's Print dialog to save as PDF",
+            duration: 4000,
+        });
+        setIsPdfModalOpen(false);
+    };
+    return (_jsx(ArtifactUrlCacheProvider, { children: _jsx(ImageLightboxProvider, { children: _jsxs("div", { className: `flex 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 h-full min-h-0 border-0 ${showSlidingPanel
+                            ? 'lg:w-2/3 flex-1'
+                            : fullWidth
+                                ? 'flex-1 w-full'
+                                : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`}`, children: [debugChunkFlash && (_jsx("div", { className: "absolute top-2 right-2 z-50", children: _jsx("div", { className: "w-3 h-3 rounded-full bg-green-400 shadow-[0_0_8px_2px_rgba(74,222,128,0.8)]" }) })), _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 }) }), 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,
+                                    // 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 })) })] }), showSlidingPanel && (_jsx("div", { className: "h-full lg:w-1/3 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" })] })] })] }) }) }));
+}
+// Helper function to get conversation URL - used by other components
+export async function getConversationUrl(vertesia, workflowRunId) {
+    return vertesia.files
+        .getDownloadUrl(`agents/${workflowRunId}/conversation.json`)
+        .then((r) => r.url);
+}
+//# sourceMappingURL=ModernAgentConversation.js.map