@vertesia/ui 1.4.0 → 1.4.1

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

@@ -104,6 +104,8 @@ const VARIANT_ICONS = {
     success: CheckCircle,
 };
 
+const SCROLLABLE_PROMPT_CLASS = 'max-h-80 overflow-y-auto overscroll-contain pe-2';
+
 /**
  * AskUserWidget - A styled component for displaying agent prompts/questions to users
  *
@@ -197,10 +199,14 @@ export function AskUserWidget({
         if (answered) {
             return (
                 <div className={cn('my-1.5 font-sans', className)}>
-                    {compactQuestion}
-                    {description && (
-                        <p className={cn('mt-1 text-xs leading-5 text-muted', descriptionClassName)}>{description}</p>
-                    )}
+                    <div className={SCROLLABLE_PROMPT_CLASS}>
+                        {compactQuestion}
+                        {description && (
+                            <p className={cn('mt-1 text-xs leading-5 text-muted', descriptionClassName)}>
+                                {description}
+                            </p>
+                        )}
+                    </div>
                 </div>
             );
         }
@@ -214,12 +220,14 @@ export function AskUserWidget({
                                 <div className={cn('mt-1 flex-shrink-0 text-attention', iconClassName)}>{iconNode}</div>
                             )}
                             <div className="min-w-0 flex-1">
-                                {compactQuestion}
-                                {description && (
-                                    <p className={cn('mt-1 text-xs leading-5 text-muted', descriptionClassName)}>
-                                        {description}
-                                    </p>
-                                )}
+                                <div className={SCROLLABLE_PROMPT_CLASS}>
+                                    {compactQuestion}
+                                    {description && (
+                                        <p className={cn('mt-1 text-xs leading-5 text-muted', descriptionClassName)}>
+                                            {description}
+                                        </p>
+                                    )}
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -355,19 +363,21 @@ export function AskUserWidget({
                                 {icon || <DefaultIcon className="size-5" />}
                             </div>
                         )}
-                        <div className="flex-1 min-w-0">
-                            <div
-                                className={`prose prose-sm dark:prose-invert max-w-none text-gray-900 dark:text-gray-100 ${questionClassName || ''}`}
-                            >
-                                <MarkdownRenderer>{question}</MarkdownRenderer>
-                            </div>
-                            {description && (
-                                <p
-                                    className={`mt-1 text-sm text-gray-600 dark:text-gray-400 ${descriptionClassName || ''}`}
+                        <div className="min-w-0 flex-1">
+                            <div className={SCROLLABLE_PROMPT_CLASS}>
+                                <div
+                                    className={`agent-ask-question prose prose-sm dark:prose-invert max-w-none text-gray-900 dark:text-gray-100 ${questionClassName || ''}`}
                                 >
-                                    {description}
-                                </p>
-                            )}
+                                    <MarkdownRenderer>{question}</MarkdownRenderer>
+                                </div>
+                                {description && (
+                                    <p
+                                        className={`mt-1 text-sm text-gray-600 dark:text-gray-400 ${descriptionClassName || ''}`}
+                                    >
+                                        {description}
+                                    </p>
+                                )}
+                            </div>
                         </div>
                     </div>
                 </div>

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

@@ -64,7 +64,6 @@ export function ImageLightboxProvider({ children }: ImageLightboxProviderProps)
                             className="absolute top-2 end-2 text-white bg-black/50 rounded-full p-2 hover:bg-black/70 transition-colors"
                             onClick={closeImage}
                             title={t('agent.close')}
-                            aria-label={t('agent.close')}
                         >
                             <X className="size-6" />
                         </Button>

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

@@ -1,5 +1,5 @@
 import { act, fireEvent, screen, waitFor } from '@testing-library/react';
-import { type AgentMessage, AgentMessageType } from '@vertesia/common';
+import { type AgentMessage, AgentMessageType, type ConversationFile, FileProcessingStatus } from '@vertesia/common';
 import type React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderWithProviders } from '../../../__tests__/test-utils.js';
@@ -245,6 +245,7 @@ describe('ModernAgentConversation send handling', () => {
             hasProcessingFiles: false,
             handleFileUpload: vi.fn(),
             removeProcessingFile: vi.fn(),
+            clearProcessingFiles: vi.fn(),
         });
     });
 
@@ -285,6 +286,53 @@ describe('ModernAgentConversation send handling', () => {
         expect(mocks.updateOptimisticMessageStatus).toHaveBeenCalledWith(expect.any(String), 'received');
     });
 
+    it('binds ready uploaded files into the sent message and clears them after send', async () => {
+        const clearProcessingFiles = vi.fn();
+        const readyFile: ConversationFile = {
+            id: 'file-1',
+            name: 'report.pdf',
+            content_type: 'application/pdf',
+            size: 10,
+            status: FileProcessingStatus.READY,
+            artifact_path: 'files/report.pdf',
+            reference: 'artifact:files/report.pdf',
+            started_at: 1_000,
+        };
+        mocks.useFileProcessing.mockReturnValue({
+            processingFiles: new Map([[readyFile.id, readyFile]]),
+            hasProcessingFiles: false,
+            handleFileUpload: vi.fn(),
+            removeProcessingFile: vi.fn(),
+            clearProcessingFiles,
+        });
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.COMPLETE, 'done')],
+            agentRunStatus: 'COMPLETED',
+        });
+
+        renderConversation({ onRestart: vi.fn() });
+
+        fireEvent.click(screen.getByRole('button', { name: 'inline send' }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith(
+                'agent-run-1',
+                'UserInput',
+                expect.objectContaining({
+                    message: expect.stringContaining('Uploaded artifacts:'),
+                }),
+            );
+        });
+
+        const userInputCall = mocks.sendSignal.mock.calls.find((call) => call[1] === 'UserInput');
+        expect((userInputCall?.[2] as { message: string }).message).toContain(
+            '[report.pdf](artifact:files/report.pdf)',
+        );
+        await waitFor(() => {
+            expect(clearProcessingFiles).toHaveBeenCalledTimes(1);
+        });
+    });
+
     it('does not restart or send from a terminal run that cannot continue', () => {
         mockStreamState({
             messages: [createMessage(AgentMessageType.COMPLETE, 'done')],
@@ -425,6 +473,155 @@ describe('ModernAgentConversation send handling', () => {
         expect(screen.queryByText('Switch to full control?')).toBeNull();
     });
 
+    it('orders a follow-up user message after an in-flight approval mode change', async () => {
+        let resolveModeSignal: (() => void) | undefined;
+        mocks.retrieve.mockResolvedValue({
+            tool_approval_mode: 'ask',
+            interactive: true,
+            disabled_mcp_collections: undefined,
+        });
+        mocks.sendSignal.mockImplementation((_runId: string, signalName: string) => {
+            if (signalName === 'ToolApprovalModeChanged') {
+                return new Promise<void>((resolve) => {
+                    resolveModeSignal = resolve;
+                });
+            }
+            return Promise.resolve({});
+        });
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.REQUEST_INPUT, 'What should I do next?')],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        renderConversation({ hideMessageInput: false, interactive: true, allowWorkflowControl: true });
+
+        const selector = await screen.findByRole('button', { name: 'Agent approval mode' });
+        fireEvent.pointerDown(selector, {
+            button: 0,
+            ctrlKey: false,
+        });
+        fireEvent.click(await screen.findByRole('menuitemradio', { name: /Full control/ }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith('agent-run-1', 'ToolApprovalModeChanged', {
+                mode: 'full_control',
+            });
+            expect(resolveModeSignal).toBeDefined();
+        });
+
+        fireEvent.click(screen.getByRole('button', { name: 'composer send' }));
+
+        expect(mocks.sendSignal.mock.calls.some((call) => call[1] === 'UserInput')).toBe(false);
+
+        await act(async () => {
+            resolveModeSignal?.();
+        });
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith(
+                'agent-run-1',
+                'UserInput',
+                expect.objectContaining({ message: 'follow up' }),
+            );
+        });
+
+        const modeCallIndex = mocks.sendSignal.mock.calls.findIndex((call) => call[1] === 'ToolApprovalModeChanged');
+        const userInputCallIndex = mocks.sendSignal.mock.calls.findIndex((call) => call[1] === 'UserInput');
+        expect(modeCallIndex).toBeGreaterThanOrEqual(0);
+        expect(userInputCallIndex).toBeGreaterThan(modeCallIndex);
+    });
+
+    it('keeps a local approval mode change when stale run metadata loads later', async () => {
+        let resolveRetrieve: (run: {
+            tool_approval_mode: 'ask';
+            interactive: true;
+            disabled_mcp_collections: undefined;
+        }) => void = () => {};
+        mocks.retrieve.mockReturnValue(
+            new Promise((resolve) => {
+                resolveRetrieve = resolve;
+            }),
+        );
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.ANSWER, 'still running')],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        renderConversation({
+            hideMessageInput: false,
+            interactive: true,
+            allowWorkflowControl: true,
+            initialToolApprovalMode: 'ask',
+        });
+
+        expect(await screen.findByText('Ask for approval')).not.toBeNull();
+        fireEvent.pointerDown(screen.getByRole('button', { name: 'Agent approval mode' }), {
+            button: 0,
+            ctrlKey: false,
+        });
+        fireEvent.click(await screen.findByRole('menuitemradio', { name: /Full control/ }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith('agent-run-1', 'ToolApprovalModeChanged', {
+                mode: 'full_control',
+            });
+        });
+
+        resolveRetrieve({
+            tool_approval_mode: 'ask',
+            interactive: true,
+            disabled_mcp_collections: undefined,
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Full control')).not.toBeNull();
+        });
+    });
+
+    it('reverts the local approval mode when the change signal fails', async () => {
+        let rejectSignal: (error: Error) => void = () => {};
+        mocks.retrieve.mockResolvedValue({
+            tool_approval_mode: 'ask',
+            interactive: true,
+            disabled_mcp_collections: undefined,
+        });
+        mocks.sendSignal.mockReturnValueOnce(
+            new Promise((_resolve, reject) => {
+                rejectSignal = reject;
+            }),
+        );
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.ANSWER, 'still running')],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        renderConversation({ hideMessageInput: false, interactive: true, allowWorkflowControl: true });
+
+        const selector = await screen.findByRole('button', { name: 'Agent approval mode' });
+        expect(selector.textContent).toContain('Ask for approval');
+        fireEvent.pointerDown(selector, {
+            button: 0,
+            ctrlKey: false,
+        });
+        fireEvent.click(await screen.findByRole('menuitemradio', { name: /Full control/ }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith('agent-run-1', 'ToolApprovalModeChanged', {
+                mode: 'full_control',
+            });
+            expect(selector.textContent).toContain('Full control');
+        });
+
+        rejectSignal(new Error('Signal failed'));
+
+        await waitFor(() => {
+            expect(selector.textContent).toContain('Ask for approval');
+        });
+    });
+
     it('does not show a full-control fallback before active run mode metadata loads', () => {
         mocks.retrieve.mockReturnValue(new Promise(() => {}));
         mockStreamState({
@@ -1203,6 +1400,54 @@ describe('ModernAgentConversation send handling', () => {
         );
     });
 
+    it('passes approval option metadata through the request overlay signal', async () => {
+        mockStreamState({
+            messages: [
+                {
+                    ...createMessage(AgentMessageType.REQUEST_INPUT, 'Approve Write Artifact: quotes.md?'),
+                    details: {
+                        tool_approval: {
+                            tool_name: 'write_artifact',
+                            approval_key: 'write_artifact:name:quotes.md',
+                        },
+                        ux: {
+                            options: [
+                                { id: 'allow_once', label: 'Allow once' },
+                                { id: 'allow_for_run', label: 'Allow this action for this run' },
+                                { id: 'deny', label: 'Deny' },
+                            ],
+                        },
+                    },
+                },
+            ],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+
+        renderConversation();
+
+        fireEvent.click(screen.getByRole('button', { name: 'Allow this action for this run' }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledTimes(1);
+        });
+        expect(mocks.sendSignal).toHaveBeenCalledWith(
+            'agent-run-1',
+            'UserInput',
+            expect.objectContaining({
+                message: 'allow_for_run',
+                metadata: expect.objectContaining({
+                    tool_approval_response: {
+                        decision: 'allow_for_run',
+                        approval_key: 'write_artifact:name:quotes.md',
+                    },
+                    id: expect.any(String),
+                    _messageId: expect.any(String),
+                }),
+            }),
+        );
+    });
+
     it('sends directly without restart while the run is active', async () => {
         mockStreamState({
             messages: [createMessage(AgentMessageType.ANSWER, 'still running')],

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

@@ -7,6 +7,7 @@ import {
     type CompletedWorkstreamEntry,
     type ConversationFile,
     type ConversationFileRef,
+    FileProcessingStatus,
     type McpConnectUxConfig,
     normalizeAgentToolApprovalMode,
     type Plan,
@@ -1105,7 +1106,6 @@ function StartWorkflowView({
                                 size="xs"
                                 variant="ghost"
                                 onClick={onClose}
-                                aria-label={t('agent.close')}
                                 title={t('agent.close')}
                                 className="text-muted hover:text-foreground"
                             >
@@ -1211,7 +1211,6 @@ function StartWorkflowView({
                                     'disabled:bg-mixer-muted/25 disabled:text-muted disabled:opacity-100',
                                 )}
                                 title={resolvedStartButtonText}
-                                aria-label={resolvedStartButtonText}
                             >
                                 {isSending ? <Spinner size="sm" /> : <ArrowUpIcon className="size-4" />}
                             </Button>
@@ -1359,12 +1358,8 @@ function ModernAgentConversationInner({
         updateDocumentTitle,
     } = useDocumentPanel(messages);
 
-    const { processingFiles, hasProcessingFiles, handleFileUpload, removeProcessingFile } = useFileProcessing(
-        client,
-        agentRunId,
-        serverFileUpdates,
-        toast,
-    );
+    const { processingFiles, hasProcessingFiles, handleFileUpload, removeProcessingFile, clearProcessingFiles } =
+        useFileProcessing(client, agentRunId, serverFileUpdates, toast);
     const canUploadFiles = interactive && !hideFileUpload;
 
     const handleRemoveProcessingFile = useCallback(
@@ -1416,6 +1411,8 @@ function ModernAgentConversationInner({
     const workstreamFetchFailedRef = useRef(false);
     const dragCounterRef = useRef(0);
     const pendingPlaybackScrollRef = useRef(false);
+    const toolApprovalModeChangeVersionRef = useRef(0);
+    const pendingToolApprovalModeChangeRef = useRef<Promise<void> | null>(null);
 
     useEffect(() => {
         setToolApprovalMode(initialResolvedToolApprovalMode);
@@ -1426,6 +1423,8 @@ function ModernAgentConversationInner({
     isSendingRef.current = isSending;
     const hasProcessingFilesRef = useRef(hasProcessingFiles);
     hasProcessingFilesRef.current = hasProcessingFiles;
+    const processingFilesRef = useRef(processingFiles);
+    processingFilesRef.current = processingFiles;
 
     const lastMainMessage = useMemo(() => {
         const mainMessages = messages.filter((m) => (m.workstream_id || 'main') === 'main');
@@ -1909,6 +1908,13 @@ function ModernAgentConversationInner({
     // Handlers
     // ────────────────────────────────────────────
 
+    const waitForPendingToolApprovalModeChange = useCallback(async () => {
+        const pendingChange = pendingToolApprovalModeChangeRef.current;
+        if (pendingChange) {
+            await pendingChange;
+        }
+    }, []);
+
     // Send a message to the agent
     const handleSendMessage = useCallback(
         (message: string, inputMetadata?: Record<string, unknown>) => {
@@ -1942,6 +1948,24 @@ function ModernAgentConversationInner({
                 messageContent = [trimmed, '', 'Attachments:', ...lines].join('\n');
             }
 
+            // Bind ready uploaded files to this message: embed them as an "Uploaded artifacts:"
+            // markdown block so they render underneath the sent bubble (parsed by
+            // parseUserMessageAttachments) and get cleared from the composer on send.
+            const uploadedArtifactLines = Array.from(processingFilesRef.current.values())
+                .filter((file) => file.status === FileProcessingStatus.READY)
+                .map((file) => {
+                    const href = file.reference?.startsWith('artifact:')
+                        ? file.reference
+                        : file.artifact_path
+                          ? `artifact:${file.artifact_path}`
+                          : undefined;
+                    return href ? `[${file.name}](${href})` : undefined;
+                })
+                .filter((line): line is string => Boolean(line));
+            if (uploadedArtifactLines.length > 0) {
+                messageContent = [messageContent, '', 'Uploaded artifacts:', ...uploadedArtifactLines].join('\n');
+            }
+
             const messageId = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
             const optimisticMessage: AgentMessage = {
@@ -1973,6 +1997,7 @@ function ModernAgentConversationInner({
             const markReceived = () => {
                 updateOptimisticMessageStatus(messageId, 'received');
                 onAttachmentsSent?.();
+                clearProcessingFiles();
             };
 
             // When the workflow has already completed, restart it first so it resumes
@@ -1980,12 +2005,15 @@ function ModernAgentConversationInner({
             // buffers the signal until the new run is ready to receive it. We reconnect
             // the stream in place (rather than remounting via onRestart) so the existing
             // timeline is preserved and the new exchange appends seamlessly at the bottom.
-            const deliver = isWorkflowTerminalRef.current
-                ? client.agents.restart(agentRunId).then(() => {
-                      reconnectStream();
-                      return sendUserInput().then(markReceived);
-                  })
-                : sendUserInput().then(markReceived);
+            const deliver = (async () => {
+                await waitForPendingToolApprovalModeChange();
+                if (isWorkflowTerminalRef.current) {
+                    await client.agents.restart(agentRunId);
+                    reconnectStream();
+                }
+                await sendUserInput();
+                markReceived();
+            })();
 
             deliver
                 .catch((err) => {
@@ -2008,10 +2036,12 @@ function ModernAgentConversationInner({
             getAttachedDocs,
             getMessageContext,
             onAttachmentsSent,
+            clearProcessingFiles,
             reconnectStream,
             addOptimisticMessage,
             updateOptimisticMessageStatus,
             t,
+            waitForPendingToolApprovalModeChange,
         ],
     );
 
@@ -2040,12 +2070,16 @@ function ModernAgentConversationInner({
     const [mcpDisabled, setMcpDisabled] = useState<string[] | undefined>(undefined);
     useEffect(() => {
         let cancelled = false;
+        const requestVersion = toolApprovalModeChangeVersionRef.current;
         client.agents
             .retrieve(agentRunId)
             .then((run) => {
                 if (!cancelled) {
                     setMcpDisabled(run.disabled_mcp_collections);
-                    if (run.tool_approval_mode !== undefined || run.interactive !== undefined) {
+                    if (
+                        toolApprovalModeChangeVersionRef.current === requestVersion &&
+                        (run.tool_approval_mode !== undefined || run.interactive !== undefined)
+                    ) {
                         setToolApprovalMode(normalizeAgentToolApprovalMode(run.tool_approval_mode, run.interactive));
                     }
                 }
@@ -2081,10 +2115,14 @@ function ModernAgentConversationInner({
     const handleToolApprovalModeChange = useCallback(
         (mode: AgentToolApprovalMode) => {
             const nextMode = normalizeAgentToolApprovalMode(mode, interactive);
+            const previousMode = toolApprovalMode;
+            toolApprovalModeChangeVersionRef.current += 1;
             setToolApprovalMode(nextMode);
-            client.agents
+            const signalPromise = client.agents
                 .sendSignal(agentRunId, 'ToolApprovalModeChanged', { mode: nextMode })
+                .then(() => undefined)
                 .catch((err: unknown) => {
+                    setToolApprovalMode((currentMode) => (currentMode === nextMode ? previousMode : currentMode));
                     toast({
                         status: 'error',
                         title: t('agent.approvalMode.changeFailed'),
@@ -2092,8 +2130,14 @@ function ModernAgentConversationInner({
                         duration: 3000,
                     });
                 });
+            pendingToolApprovalModeChangeRef.current = signalPromise;
+            void signalPromise.finally(() => {
+                if (pendingToolApprovalModeChangeRef.current === signalPromise) {
+                    pendingToolApprovalModeChangeRef.current = null;
+                }
+            });
         },
-        [agentRunId, client, interactive, t, toast],
+        [agentRunId, client, interactive, t, toast, toolApprovalMode],
     );
 
     // Drag and drop handlers for full-panel file upload
@@ -2418,6 +2462,7 @@ function ModernAgentConversationInner({
             ) : (
                 <AllMessagesMixed
                     messages={displayedMessages}
+                    workstreamSourceMessages={messages}
                     bottomRef={bottomRef as React.RefObject<HTMLDivElement>}
                     isCompleted={displayedIsCompleted}
                     plan={getActivePlan.plan}

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.test.tsx

@@ -399,7 +399,12 @@ describe('AllMessagesMixed summary view', () => {
 
         fireEvent.click(screen.getByRole('button', { name: /Allow once/ }));
 
-        expect(onSendMessage).toHaveBeenCalledWith('allow_once');
+        expect(onSendMessage).toHaveBeenCalledWith('allow_once', {
+            tool_approval_response: {
+                decision: 'allow_once',
+                approval_key: 'create_document:name:News Headlines Today',
+            },
+        });
     });
 
     it('keeps an approved tool approval continuation in the same active work row', () => {