npm - @vertesia/ui - Versions diffs - 1.0.0-dev.20260203.130115Z → 1.0.0-dev.20260227.112605Z - Mend

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

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 (1612) hide show

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

@@ -0,0 +1,710 @@
+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, } from "@vertesia/common";
+import { FusionFragmentProvider } from "@vertesia/fusion-ux";
+import { Button, cn, MessageBox, Spinner, useToast, Modal, ModalBody, ModalFooter, ModalTitle } from "@vertesia/ui/core";
+import { AnimatedThinkingDots, PulsatingCircle } from "./AnimatedThinkingDots";
+import { ImageLightboxProvider } from "./ImageLightbox";
+import AllMessagesMixed from "./ModernAgentOutput/AllMessagesMixed";
+import Header from "./ModernAgentOutput/Header";
+import MessageInput from "./ModernAgentOutput/MessageInput";
+import { getWorkstreamId } from "./ModernAgentOutput/utils";
+import { ThinkingMessages } from "./WaitingMessages";
+import InlineSlidingPlanPanel from "./ModernAgentOutput/InlineSlidingPlanPanel";
+import { SkillWidgetProvider } from "./SkillWidgetProvider";
+import { ArtifactUrlCacheProvider } from "./useArtifactUrlCache.js";
+import { VegaLiteChart } from "./VegaLiteChart";
+import { DocumentPanel } from "./DocumentPanel.js";
+import { useAgentStream } from "./hooks/useAgentStream.js";
+import { useAgentPlans } from "./hooks/useAgentPlans.js";
+import { useDocumentPanel } from "./hooks/useDocumentPanel.js";
+import { useFileProcessing } from "./hooks/useFileProcessing.js";
+function printElementToPdf(sourceElement, title) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return false;
+    }
+    // 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 documents if callback provided
+            const attachedDocs = getAttachedDocs?.() || [];
+            // Build message content with attachment references as markdown links
+            let messageContent = message;
+            if (attachedDocs.length > 0 && !/store:\S+/.test(message)) {
+                const lines = attachedDocs.map((doc) => `[${doc.name}](/store/objects/${doc.id})`);
+                messageContent = [message, '', 'Attachments:', ...lines].join('\n');
+            }
+            // If files are staged, add a note to the message so the agent knows files are coming
+            if (stagedFiles.length > 0) {
+                const fileNames = stagedFiles.map(f => f.name).join(', ');
+                messageContent = [
+                    messageContent,
+                    '',
+                    `[System: ${stagedFiles.length} file(s) are being uploaded: ${fileNames}. Please wait for the "Files Ready" notification before processing them.]`
+                ].join('\n');
+            }
+            const newRun = await startWorkflow(messageContent);
+            if (newRun) {
+                // Upload staged files to the new run's artifact space and signal workflow
+                const uploadedFiles = [];
+                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,
+                            });
+                            uploadedFiles.push(file.name);
+                        }
+                        catch (uploadErr) {
+                            console.error(`Failed to upload staged file ${file.name}:`, uploadErr);
+                            // Continue with other files
+                        }
+                    }
+                    // Send a follow-up message to notify the agent that all files are ready
+                    if (uploadedFiles.length > 0) {
+                        try {
+                            await client.store.workflows.sendSignal(newRun.workflow_id, newRun.run_id, "UserInput", {
+                                message: `[Files Ready] All ${uploadedFiles.length} file(s) have been uploaded and are now available: ${uploadedFiles.join(', ')}. You can now process them.`,
+                                metadata: {
+                                    type: 'files_ready',
+                                    files: uploadedFiles,
+                                },
+                            });
+                        }
+                        catch (signalErr) {
+                            console.error('Failed to send files ready signal:', signalErr);
+                        }
+                    }
+                    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();
+        }
+        // Shift+Enter allows newline (default textarea behavior)
+    };
+    // Auto-resize textarea as content grows
+    const adjustTextareaHeight = useCallback(() => {
+        const textarea = inputRef.current;
+        if (textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+        }
+    }, []);
+    useEffect(() => {
+        adjustTextareaHeight();
+    }, [inputValue, adjustTextareaHeight]);
+    // 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-end gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx("textarea", { ref: inputRef, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isSending, rows: 2, className: "w-full py-2.5 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:outline-none focus:ring-1 focus:ring-gray-300 dark:focus:ring-gray-600 rounded-md resize-none overflow-hidden", style: { minHeight: '60px', maxHeight: '200px' } }) }), _jsxs(Button, { onClick: startWorkflowWithMessage, disabled: !inputValue.trim() || isSending, className: "px-3 py-2.5 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`
+                            : 'Enter to send • Shift+Enter for new line' })] })] }));
+}
+// 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,
+// Section visibility
+hideHeader, hideMessageInput, hidePlanPanel, hideWorkstreamTabs, hideFileUpload, hideDocumentPanel,
+// Attachment callback
+getAttachedDocs, onAttachmentsSent,
+// Upload state
+isUploading = false,
+// 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, }) {
+    const { client } = useUserSession();
+    const toast = useToast();
+    // ────────────────────────────────────────────
+    // Extracted hooks
+    // ────────────────────────────────────────────
+    const { messages, streamingMessages, isCompleted, debugChunkFlash, addOptimisticMessage, removeOptimisticMessages, workflowStatus, serverFileUpdates, } = useAgentStream(client, run);
+    const { plans, activePlanIndex, setActivePlanIndex, workstreamStatusMap, showInput, showSlidingPanel, setShowSlidingPanel, } = useAgentPlans(messages, interactive, isModal);
+    const { openDocuments, activeDocumentId, isDocPanelOpen, docRefreshKey, closeDocPanel: handleCloseDocPanel, closeDocument: handleCloseDocument, selectDocument, openDocInPanel, } = useDocumentPanel(messages);
+    const { processingFiles, hasProcessingFiles, handleFileUpload, } = useFileProcessing(client, run, serverFileUpdates, toast);
+    // ────────────────────────────────────────────
+    // Local state (UI-only concerns)
+    // ────────────────────────────────────────────
+    const bottomRef = useRef(null);
+    const conversationRef = useRef(null);
+    const [isSending, setIsSending] = useState(false);
+    const [internalViewMode, setInternalViewMode] = useState("sliding");
+    const viewMode = controlledViewMode ?? internalViewMode;
+    const handleViewModeChange = useCallback((mode) => {
+        if (onViewModeChangeProp) {
+            onViewModeChangeProp(mode);
+        }
+        else {
+            setInternalViewMode(mode);
+        }
+    }, [onViewModeChangeProp]);
+    const [isStopping, setIsStopping] = useState(false);
+    const [thinkingMessageIndex, setThinkingMessageIndex] = useState(0);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const dragCounterRef = useRef(0);
+    // 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: [] },
+            timestamp: 0,
+        };
+        const currentWorkstreamStatus = workstreamStatusMap.get(currentPlanData.timestamp) || new Map();
+        return {
+            plan: currentPlanData.plan,
+            workstreamStatus: currentWorkstreamStatus,
+        };
+    }, [plans, activePlanIndex, workstreamStatusMap]);
+    // ────────────────────────────────────────────
+    // Stable callbacks
+    // ────────────────────────────────────────────
+    const handleTogglePlanPanel = useCallback(() => {
+        setShowSlidingPanel((prev) => {
+            if (!prev) {
+                sessionStorage.setItem("plan-panel-shown", "true");
+            }
+            return !prev;
+        });
+    }, [setShowSlidingPanel]);
+    const handleChangePlan = useCallback((index) => {
+        setActivePlanIndex(index);
+    }, [setActivePlanIndex]);
+    const handleClosePlanPanel = useCallback(() => {
+        setShowSlidingPanel(false);
+    }, [setShowSlidingPanel]);
+    // Default StoreLinkComponent that opens documents in the panel
+    const internalStoreLinkComponent = useCallback(({ documentId, children }) => (_jsx("button", { className: "text-info underline cursor-pointer hover:text-info/80", onClick: () => openDocInPanel(documentId), children: children })), [openDocInPanel]);
+    const effectiveStoreLinkComponent = StoreLinkComponent ?? internalStoreLinkComponent;
+    // ────────────────────────────────────────────
+    // Effects
+    // ────────────────────────────────────────────
+    // Show rotating thinking messages
+    useEffect(() => {
+        if (!isCompleted) {
+            const interval = setInterval(() => {
+                setThinkingMessageIndex(() => Math.floor(Math.random() * (ThinkingMessages.length - 1)));
+            }, 4000);
+            return () => clearInterval(interval);
+        }
+    }, [isCompleted]);
+    // Expose handleFileUpload to external callers via ref
+    useEffect(() => {
+        if (fileUploadRef)
+            fileUploadRef.current = handleFileUpload;
+        return () => { if (fileUploadRef)
+            fileUploadRef.current = null; };
+    }, [fileUploadRef, handleFileUpload]);
+    // Notify parent when processingFiles changes
+    useEffect(() => {
+        onProcessingFilesChange?.(processingFiles);
+    }, [processingFiles, onProcessingFilesChange]);
+    // Notify parent when plans change
+    useEffect(() => {
+        onPlansChange?.(plans, activePlanIndex);
+    }, [plans, activePlanIndex, onPlansChange]);
+    // Notify parent when workstream status changes
+    useEffect(() => {
+        onWorkstreamStatusChange?.(workstreamStatusMap);
+    }, [workstreamStatusMap, onWorkstreamStatusChange]);
+    // Notify parent when input availability is determined
+    useEffect(() => {
+        if (messages.length === 0)
+            return;
+        if (!showInput) {
+            onShowInputChange?.(false);
+            return;
+        }
+        if (effectiveWorkflowStatus && effectiveWorkflowStatus !== "RUNNING") {
+            onShowInputChange?.(false);
+            return;
+        }
+        if (effectiveWorkflowStatus !== null) {
+            onShowInputChange?.(true);
+        }
+    }, [showInput, effectiveWorkflowStatus, messages.length, onShowInputChange]);
+    // ────────────────────────────────────────────
+    // Handlers
+    // ────────────────────────────────────────────
+    // Send a message to the agent
+    const handleSendMessage = useCallback((message) => {
+        const trimmed = message.trim();
+        if (!trimmed || isSendingRef.current)
+            return;
+        // Block if files are still processing
+        if (hasProcessingFilesRef.current) {
+            toast({
+                status: "warning",
+                title: "Files Still Processing",
+                description: "Please wait for all files to finish processing before sending",
+                duration: 3000,
+            });
+            return;
+        }
+        setIsSending(true);
+        const attachedDocs = getAttachedDocs?.() || [];
+        const contextMetadata = getMessageContext?.() || {};
+        let messageContent = trimmed;
+        if (attachedDocs.length > 0 && !/store:\S+/.test(trimmed)) {
+            const lines = attachedDocs.map((doc) => `[${doc.name}](/store/objects/${doc.id})`);
+            messageContent = [trimmed, '', 'Attachments:', ...lines].join('\n');
+        }
+        const messageId = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const optimisticMessage = {
+            timestamp: Date.now(),
+            workflow_run_id: run.runId,
+            type: AgentMessageType.QUESTION,
+            message: messageContent,
+            workstream_id: "main",
+            details: { _optimistic: true, _messageId: messageId },
+        };
+        addOptimisticMessage(optimisticMessage);
+        const metadata = {
+            ...(attachedDocs.length > 0 ? { attached_docs: attachedDocs.map((d) => d.id) } : {}),
+            ...contextMetadata,
+            _messageId: messageId,
+        };
+        client.store.workflows
+            .sendSignal(run.workflowId, run.runId, "UserInput", {
+            message: messageContent,
+            metadata,
+        })
+            .then(() => {
+            onAttachmentsSent?.();
+        })
+            .catch((err) => {
+            removeOptimisticMessages((m) => m.details?._messageId === messageId);
+            toast({
+                status: "error",
+                title: "Failed to Send Message",
+                description: err instanceof Error ? err.message : "Unknown error",
+                duration: 3000,
+            });
+        })
+            .finally(() => {
+            setIsSending(false);
+        });
+    }, [run.runId, run.workflowId, client, toast, getAttachedDocs, getMessageContext, onAttachmentsSent, addOptimisticMessage, removeOptimisticMessages]);
+    // Drag and drop handlers for full-panel file upload
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current++;
+        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);
+        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 = useCallback(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,
+            });
+        }
+        catch (err) {
+            toast({
+                status: "error",
+                title: "Failed to Interrupt",
+                description: err instanceof Error ? err.message : "Unknown error",
+                duration: 3000,
+            });
+        }
+        finally {
+            setIsStopping(false);
+        }
+    }, [isStopping, client, run.workflowId, run.runId, toast]);
+    // Expose stop handler to external callers via ref
+    useEffect(() => {
+        if (stopRef)
+            stopRef.current = !isCompleted ? handleStopWorkflow : null;
+        return () => { if (stopRef)
+            stopRef.current = null; };
+    }, [stopRef, isCompleted, handleStopWorkflow]);
+    // Notify parent when stopping state changes
+    useEffect(() => {
+        onStoppingChange?.(isStopping);
+    }, [isStopping, onStoppingChange]);
+    // Calculate number of active tasks for the status indicator
+    const getActiveTaskCount = () => {
+        if (!messages.length)
+            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);
+    };
+    // PERFORMANCE: Memoize taskLabels to prevent AllMessagesMixed re-renders
+    const taskLabels = useMemo(() => getActivePlan.plan.plan?.reduce((acc, task) => {
+        if (task.id && task.goal)
+            acc.set(task.id.toString(), task.goal);
+        return acc;
+    }, new Map()), [getActivePlan.plan]);
+    // Main content - wrapped with FusionFragmentProvider when fusionData is provided
+    const mainContent = (_jsx(ArtifactUrlCacheProvider, { children: _jsx(ImageLightboxProvider, { children: _jsxs("div", { className: cn("flex flex-col lg:flex-row gap-2 h-full relative overflow-hidden", isDragOver && "ring-2 ring-blue-400 ring-inset", className), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 z-50 pointer-events-none rounded-lg", children: _jsxs("div", { className: "text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg", children: [_jsx(UploadIcon, { className: "size-6" }), "Drop files to upload"] }) })), _jsxs("div", { ref: conversationRef, className: cn("flex flex-col min-h-0 border-0", (showSlidingPanel || isDocPanelOpen)
+                            ? "w-full lg:w-3/5 flex-1 min-h-[50vh]"
+                            : fullWidth
+                                ? "flex-1 w-full"
+                                : `flex-1 mx-auto ${!isModal ? "max-w-4xl" : ""}`), children: [!hideHeader && (_jsx("div", { className: "flex-shrink-0", children: _jsx(Header, { title: actualTitle, isCompleted: isCompleted, onClose: onClose, isModal: isModal, run: run, viewMode: viewMode, onViewModeChange: handleViewModeChange, showPlanPanel: showSlidingPanel, hasPlan: plans.length > 0, onTogglePlanPanel: handleTogglePlanPanel, onDownload: downloadConversation, onCopyRunId: copyRunId, resetWorkflow: resetWorkflow, onExportPdf: exportConversationPdf, isReceivingChunks: debugChunkFlash }) })), messages.length === 0 && !isCompleted ? (_jsx("div", { className: "flex-1 flex flex-col items-center justify-center h-full text-center py-6", children: _jsxs("div", { className: "p-5 max-w-md border border-info rounded-lg shadow-sm", children: [_jsxs("div", { className: "flex items-center space-x-3 mb-3", children: [_jsx(PulsatingCircle, { size: "sm", color: "blue" }), _jsx("div", { className: "text-sm text-muted font-medium", children: ThinkingMessages[thinkingMessageIndex] })] }), _jsx("div", { className: "mt-4 flex justify-center", children: _jsx(AnimatedThinkingDots, { color: "blue", className: "mt-1" }) })] }) })) : (_jsx(AllMessagesMixed, { messages: messages, bottomRef: bottomRef, isCompleted: isCompleted, plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, showPlanPanel: showSlidingPanel, onTogglePlanPanel: handleTogglePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan, taskLabels: taskLabels, streamingMessages: streamingMessages, onSendMessage: handleSendMessage, thinkingMessageIndex: thinkingMessageIndex, messageItemClassNames: messageItemClassNames, messageStyleOverrides: messageStyleOverrides, toolCallGroupClassNames: toolCallGroupClassNames, hideToolCallsInViewMode: hideToolCallsInViewMode, streamingMessageClassNames: streamingMessageClassNames, batchProgressPanelClassNames: batchProgressPanelClassNames, viewMode: viewMode, hideWorkstreamTabs: hideWorkstreamTabs, workingIndicatorClassName: workingIndicatorClassName, messageListClassName: messageListClassName, StoreLinkComponent: effectiveStoreLinkComponent, CollectionLinkComponent: CollectionLinkComponent, prependFriendlyMessage: prependFriendlyMessage })), !hideMessageInput && (_jsx("div", { className: "flex-shrink-0", style: { paddingBottom: 'env(safe-area-inset-bottom, 0px)' }, children: effectiveWorkflowStatus && effectiveWorkflowStatus !== "RUNNING" ? (_jsxs(MessageBox, { status: effectiveWorkflowStatus === "COMPLETED" ? 'success' : 'done', icon: null, className: "m-2", children: ["This Workflow is ", effectiveWorkflowStatus] })) : showInput && (_jsx(MessageInput, { onSend: handleSendMessage, onStop: handleStopWorkflow, disabled: isUploading, isSending: isSending || isUploading, isStopping: isStopping, isStreaming: !isCompleted, isCompleted: isCompleted, activeTaskCount: getActiveTaskCount(), placeholder: placeholder,
+                                    // File upload props - use internal handler that signals workflow
+                                    onFilesSelected: handleFileUpload, uploadedFiles: uploadedFiles, onRemoveFile: onRemoveFile, acceptedFileTypes: acceptedFileTypes, maxFiles: maxFiles,
+                                    // File processing state
+                                    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 })) }))] }), !hidePlanPanel && showSlidingPanel && (_jsx("div", { className: "w-full lg:w-1/3 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l", children: _jsx(InlineSlidingPlanPanel, { plan: getActivePlan.plan, workstreamStatus: getActivePlan.workstreamStatus, isOpen: showSlidingPanel, onClose: handleClosePlanPanel, plans: plans, activePlanIndex: activePlanIndex, onChangePlan: handleChangePlan }) })), !hideDocumentPanel && isDocPanelOpen && openDocuments.length > 0 && (_jsx("div", { className: cn("w-full lg:w-2/5 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l", showSlidingPanel && "lg:w-1/3"), children: _jsx(DocumentPanel, { isOpen: isDocPanelOpen, onClose: handleCloseDocPanel, documents: openDocuments, activeDocumentId: activeDocumentId, onSelectDocument: selectDocument, onCloseDocument: handleCloseDocument, refreshKey: docRefreshKey, runId: run.runId }) })), _jsxs(Modal, { isOpen: isPdfModalOpen, onClose: () => setIsPdfModalOpen(false), children: [_jsx(ModalTitle, { children: "Export conversation as PDF" }), _jsxs(ModalBody, { children: [_jsx("p", { className: "mb-2", children: "This will open your browser's print dialog with the current conversation." }), _jsx("p", { className: "text-sm text-muted", children: "To save a PDF, choose \"Save as PDF\" or a similar option in the print dialog." })] }), _jsxs(ModalFooter, { align: "right", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsPdfModalOpen(false), children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleConfirmExportPdf, children: "Open print dialog" })] })] })] }) }) }));
+    // Wrap with FusionFragmentProvider when fusionData is provided
+    // This enables fusion-fragment code blocks to display data and supports
+    // agent-mode interactions where clicking editable fields sends messages
+    if (fusionData) {
+        return (_jsx(FusionFragmentProvider, { data: fusionData, sendMessage: handleSendMessage, ChartComponent: VegaLiteChart, artifactRunId: run.runId, children: mainContent }));
+    }
+    return mainContent;
+}
+// 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