@vertesia/ui 1.4.0-dev.20260615.051508Z → 1.4.0

package/src/core/components/shadcn/tooltip.tsx

@@ -32,6 +32,7 @@ const TooltipContent: React.ForwardRefExoticComponent<
                 style={{ zIndex: 100 }}
                 className={cn(
                     'max-w-[90vw]',
+                    // rtl-ok: Radix data-side values are physical popper sides; slide direction follows the side.
                     'z-50 overflow-hidden rounded-md bg-tooltips border border-border px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                     className,
                 )}

package/src/env/index.ts

@@ -15,7 +15,6 @@ export interface EnvProps {
         zeno: string;
         studio: string;
         sts: string; // Security Token Service endpoint
-        git?: string; // Smart HTTP app source git endpoint
         mcp?: string;
     };
     firebase?: {
@@ -28,21 +27,6 @@ export interface EnvProps {
     region?: string;
     datadogRum?: boolean;
     datadogLogs?: boolean;
-    /**
-     * Development-only Vertesia auth token.
-     *
-     * This is intended for sandbox/dev previews where the host process already
-     * has a short-lived Vertesia token. Production apps must not set this.
-     */
-    devAuthToken?: string;
-    /**
-     * Optional host-provided Vertesia auth token bootstrap.
-     *
-     * Published generated apps use this to ask their same-origin app gateway for
-     * the token backing the gateway session cookie, allowing UserSession to
-     * initialize without redirecting through Central Auth.
-     */
-    authTokenProvider?: () => Promise<string | undefined>;
     logger?: {
         info: (msg: string, ...args: unknown[]) => void;
         warn: (msg: string, ...args: unknown[]) => void;
@@ -132,14 +116,6 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
         return this._props?.datadogLogs ?? false;
     }
 
-    get devAuthToken() {
-        return this._props?.devAuthToken;
-    }
-
-    get authTokenProvider() {
-        return this._props?.authTokenProvider;
-    }
-
     get logger() {
         return this._props?.logger ?? console;
     }

package/src/features/agent/PayloadBuilder.tsx

@@ -58,6 +58,7 @@ export class PayloadBuilder {
     _visibility: ConversationVisibility | undefined;
     _user_channels: UserChannel[] | undefined;
     _collection: string | undefined;
+    _disabled_mcp_collections: string[] | undefined;
     _start: boolean = false;
     _preserveRunValues: boolean = false;
     _interaction: InCodeInteraction | undefined;
@@ -110,6 +111,9 @@ export class PayloadBuilder {
         builder._inputValidator = this._inputValidator;
         builder._start = this._start;
         builder._collection = this._collection;
+        builder._disabled_mcp_collections = this._disabled_mcp_collections
+            ? [...this._disabled_mcp_collections]
+            : undefined;
         builder._preserveRunValues = this._preserveRunValues;
         builder._mode = this._mode;
         builder._scheduledWorkflowConfig = this._scheduledWorkflowConfig;
@@ -227,6 +231,15 @@ export class PayloadBuilder {
         }
     }
 
+    get disabled_mcp_collections(): string[] | undefined {
+        return this._disabled_mcp_collections;
+    }
+
+    set disabled_mcp_collections(value: string[] | undefined) {
+        this._disabled_mcp_collections = value && value.length > 0 ? value : undefined;
+        this.onStateChanged();
+    }
+
     get search_scope() {
         return this._collection ? AgentSearchScope.Collection : undefined;
     }
@@ -268,6 +281,7 @@ export class PayloadBuilder {
         this._non_blocking_subagents = context.non_blocking_subagents ?? true;
         this._checkpoint_tokens = context.checkpoint_tokens;
         this._user_channels = context.user_channels;
+        this._disabled_mcp_collections = context.disabled_mcp_collections;
         this._model_options = context.config?.model_options as ModelOptions | undefined;
         this.collection = context.collection_id ?? undefined;
         this._model_options = context.config?.model_options as InCodeInteraction['model_options'] | undefined;
@@ -400,6 +414,9 @@ export class PayloadBuilder {
     setCollection(collection: string | undefined) {
         this.collection = collection;
     }
+    setDisabledMcpCollections(collections: string[] | undefined) {
+        this.disabled_mcp_collections = collections;
+    }
     setInteractive(interactive: boolean) {
         this.interactive = interactive;
     }
@@ -484,6 +501,7 @@ export class PayloadBuilder {
         this._visibility = undefined;
         this._user_channels = undefined;
         this._collection = undefined;
+        this._disabled_mcp_collections = undefined;
         this._preserveRunValues = false;
         this._model = '';
         this._model_options = undefined;

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

@@ -0,0 +1,130 @@
+import type { AgentToolApprovalMode } from '@vertesia/common';
+import {
+    Button,
+    cn,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuTrigger,
+} from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { ChevronDownIcon, HandIcon, ShieldAlertIcon, ShieldCheckIcon } from 'lucide-react';
+import type React from 'react';
+import { useMemo } from 'react';
+
+interface ApprovalModeOption {
+    mode: AgentToolApprovalMode;
+    label: string;
+    description: string;
+    icon: React.ReactNode;
+}
+
+export interface AgentApprovalModeSelectorProps {
+    mode: AgentToolApprovalMode;
+    onChange: (mode: AgentToolApprovalMode) => void;
+    disabled?: boolean;
+    className?: string;
+}
+
+function getModeIconClassName(mode: AgentToolApprovalMode) {
+    if (mode === 'full_control') return 'text-attention';
+    if (mode === 'auto_review') return 'text-info';
+    return 'text-muted';
+}
+
+function getModeIcon(mode: AgentToolApprovalMode) {
+    if (mode === 'full_control') return <ShieldAlertIcon className="size-4" />;
+    if (mode === 'ask') return <HandIcon className="size-4" />;
+    return <ShieldCheckIcon className="size-4" />;
+}
+
+export function AgentApprovalModeSelector({
+    mode,
+    onChange,
+    disabled = false,
+    className,
+}: AgentApprovalModeSelectorProps) {
+    const { t } = useUITranslation();
+
+    const options = useMemo<ApprovalModeOption[]>(
+        () => [
+            {
+                mode: 'ask',
+                label: t('agent.approvalMode.ask'),
+                description: t('agent.approvalMode.askDescription'),
+                icon: <HandIcon className="size-4" />,
+            },
+            {
+                mode: 'auto_review',
+                label: t('agent.approvalMode.autoReview'),
+                description: t('agent.approvalMode.autoReviewDescription'),
+                icon: <ShieldCheckIcon className="size-4" />,
+            },
+            {
+                mode: 'full_control',
+                label: t('agent.approvalMode.fullControl'),
+                description: t('agent.approvalMode.fullControlDescription'),
+                icon: <ShieldAlertIcon className="size-4" />,
+            },
+        ],
+        [t],
+    );
+
+    const selected = options.find((option) => option.mode === mode) ?? options[2];
+
+    const selectMode = (nextMode: AgentToolApprovalMode) => {
+        if (nextMode === mode) return;
+        onChange(nextMode);
+    };
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    disabled={disabled}
+                    className={cn(
+                        'h-8 max-w-[13rem] rounded-full px-2.5 font-medium',
+                        'bg-mixer-muted/15 text-muted hover:bg-muted hover:text-foreground disabled:opacity-60',
+                        className,
+                    )}
+                    aria-label={t('agent.approvalMode.selectorLabel')}
+                >
+                    <span className={cn('shrink-0', getModeIconClassName(mode))}>{getModeIcon(mode)}</span>
+                    <span className="min-w-0 truncate">{selected.label}</span>
+                    <ChevronDownIcon className="size-4 shrink-0 opacity-70" />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="z-[1000000] w-[min(28rem,calc(100vw-1rem))] p-2">
+                <div className="px-2 pb-1.5 pt-1 text-sm font-medium text-foreground">
+                    {t('agent.approvalMode.dropdownTitle')}
+                </div>
+                <DropdownMenuRadioGroup
+                    value={mode}
+                    onValueChange={(value) => selectMode(value as AgentToolApprovalMode)}
+                >
+                    {options.map((option) => (
+                        <DropdownMenuRadioItem
+                            key={option.mode}
+                            value={option.mode}
+                            className="min-h-14 items-start gap-3 rounded-md py-2 pe-8 ps-2 text-start"
+                        >
+                            <span className={cn('mt-0.5 shrink-0', getModeIconClassName(option.mode))}>
+                                {option.icon}
+                            </span>
+                            <span className="min-w-0 flex-1">
+                                <span className="block text-sm font-medium text-foreground">{option.label}</span>
+                                <span className="mt-0.5 block whitespace-normal text-sm leading-5 text-muted">
+                                    {option.description}
+                                </span>
+                            </span>
+                        </DropdownMenuRadioItem>
+                    ))}
+                </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

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

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { type AgentMessage, AgentMessageType } from '@vertesia/common';
+import type { ComponentProps } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { I18nProvider } from '../../../i18n/index.js';
 import { AgentChatFixtureReplay, type AgentChatReplayFixture } from './AgentChatFixtureReplay';
@@ -38,10 +39,13 @@ function message(type: AgentMessageType, text: string, timestamp: number): Agent
     };
 }
 
-function renderReplay(fixture: AgentChatReplayFixture) {
+function renderReplay(
+    fixture: AgentChatReplayFixture,
+    props: Omit<ComponentProps<typeof AgentChatFixtureReplay>, 'fixture'> = {},
+) {
     return render(
         <I18nProvider lng="en">
-            <AgentChatFixtureReplay fixture={fixture} />
+            <AgentChatFixtureReplay fixture={fixture} {...props} />
         </I18nProvider>,
     );
 }
@@ -55,6 +59,22 @@ describe('AgentChatFixtureReplay', () => {
         expect(screen.getByTestId('all-messages-mixed').getAttribute('data-view-mode')).toBe('sliding');
     });
 
+    it('can hide the fixture replay header', () => {
+        renderReplay(
+            {
+                messages: [message(AgentMessageType.QUESTION, 'first', 1)],
+                metadata: {
+                    title: 'Fixture title',
+                },
+            },
+            { showHeader: false },
+        );
+
+        expect(screen.queryByText('Fixture title')).toBeNull();
+        expect(screen.queryByRole('button', { name: 'Download Messages' })).toBeNull();
+        expect(screen.getByRole('slider', { name: 'Playback position' })).not.toBeNull();
+    });
+
     it('steps through fixture messages without mutating the source fixture', () => {
         const fixture: AgentChatReplayFixture = {
             messages: [

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

@@ -45,6 +45,7 @@ export interface AgentChatFixtureReplayProps {
     viewMode?: AgentConversationViewMode;
     className?: string;
     title?: string;
+    showHeader?: boolean;
 }
 
 function streamingFrameToMap(frame?: AgentChatReplayStreamingFrame): Map<string, StreamingData> {
@@ -105,6 +106,7 @@ export function AgentChatFixtureReplay({
     viewMode: controlledViewMode,
     className,
     title,
+    showHeader = true,
 }: AgentChatFixtureReplayProps) {
     const { t } = useUITranslation();
     const messages = fixture.messages;
@@ -196,37 +198,41 @@ export function AgentChatFixtureReplay({
             data-agent-replay-playing={isPlaying || undefined}
             data-agent-replay-loop={completedLoops}
         >
-            <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2">
-                <div className="min-w-0">
-                    <div className="truncate text-sm font-medium">{resolvedTitle}</div>
-                    <div className="text-xs text-muted">
-                        {t('agent.rewind.fixtureMeta', {
-                            messageCount: messages.length,
-                            loops: completedLoops,
-                        })}
+            {showHeader && (
+                <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2">
+                    <div className="min-w-0">
+                        <div className="truncate text-sm font-medium">{resolvedTitle}</div>
+                        <div className="text-xs text-muted">
+                            {t('agent.rewind.fixtureMeta', {
+                                messageCount: messages.length,
+                                loops: completedLoops,
+                            })}
+                        </div>
                     </div>
-                </div>
-                <div className="flex items-center gap-2">
-                    <Button type="button" variant="secondary" size="sm" onClick={downloadFixture}>
-                        <DownloadCloudIcon className="size-4" />
-                        <span className="ms-1.5">{t('agent.rewind.exportFixture')}</span>
-                    </Button>
-                    {autoStepMs && autoStepMs > 0 && (
-                        <Button
-                            type="button"
-                            variant="secondary"
-                            size="sm"
-                            onClick={() => setIsPlaying((value) => !value)}
-                        >
-                            {isPlaying ? <Pause className="size-4" /> : <Play className="size-4" />}
-                            <span className="ms-1.5">
-                                {isPlaying ? t('agent.rewind.pause') : t('agent.rewind.resume')}
-                            </span>
+                    <div className="flex items-center gap-2">
+                        <Button type="button" variant="secondary" size="sm" onClick={downloadFixture}>
+                            <DownloadCloudIcon className="size-4" />
+                            <span className="ms-1.5">{t('agent.rewind.exportFixture')}</span>
                         </Button>
-                    )}
+                        {autoStepMs && autoStepMs > 0 && (
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                size="sm"
+                                onClick={() => setIsPlaying((value) => !value)}
+                            >
+                                {isPlaying ? <Pause className="size-4" /> : <Play className="size-4" />}
+                                <span className="ms-1.5">
+                                    {isPlaying ? t('agent.rewind.pause') : t('agent.rewind.resume')}
+                                </span>
+                            </Button>
+                        )}
+                    </div>
                 </div>
+            )}
+            <div className="flex flex-shrink-0 justify-end px-2 py-1.5">
+                <AgentChatPlaybackControls cursor={playback.cursor} messages={messages} onChangeCursor={setCursor} />
             </div>
-            <AgentChatPlaybackControls cursor={playback.cursor} messages={messages} onChangeCursor={setCursor} />
             <AllMessagesMixed
                 messages={displayedMessages}
                 isCompleted={isCompleted}

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

@@ -0,0 +1,122 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { AgentMessageType } from '@vertesia/common';
+import { describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../../__tests__/test-utils.js';
+import { AgentRequestInputOverlay } from './AgentRequestInputOverlay';
+import type { RequestInputMessageWithUx } from './ModernAgentOutput/requestInputMessages';
+
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => ({
+        client: {
+            remoteMcpConnections: {
+                getCollectionStatus: vi.fn(),
+            },
+        },
+    }),
+}));
+
+vi.mock('../../oauth/RemoteMcpConnectionButton.js', () => ({
+    RemoteMcpConnectionButton: () => <button type="button">Connect</button>,
+}));
+
+function createMcpRequestMessage(): RequestInputMessageWithUx {
+    return {
+        type: AgentMessageType.REQUEST_INPUT,
+        timestamp: 1,
+        workflow_run_id: 'run-1',
+        workstream_id: 'main',
+        message: 'Connect to Jira to continue.',
+        details: {
+            ux: {
+                mcp_connect: {
+                    app_install_id: 'app1',
+                    collection_id: 'jira',
+                    name: 'Jira',
+                },
+            },
+        },
+    };
+}
+
+function createToolApprovalRequestMessage(): RequestInputMessageWithUx {
+    return {
+        type: AgentMessageType.REQUEST_INPUT,
+        timestamp: 1,
+        workflow_run_id: 'run-1',
+        workstream_id: 'main',
+        message: 'Approve Write Artifact: quotes.md?',
+        details: {
+            tool_approval: {
+                tool_name: 'write_artifact',
+                tool_title: 'Write Artifact',
+                target: 'name:quotes.md',
+                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' },
+                ],
+                free_response: {
+                    placeholder: 'No, and tell the agent what to do differently',
+                    submit_label: 'Submit',
+                    metadata: {
+                        tool_approval_response: {
+                            decision: 'deny_with_feedback',
+                            approval_key: 'write_artifact:name:quotes.md',
+                        },
+                    },
+                },
+            },
+        },
+    };
+}
+
+describe('AgentRequestInputOverlay', () => {
+    it('lets the user decline an MCP connection request', () => {
+        const onSendMessage = vi.fn();
+
+        renderWithProviders(
+            <AgentRequestInputOverlay message={createMcpRequestMessage()} onSendMessage={onSendMessage} />,
+        );
+
+        expect(screen.getAllByRole('button').map((button) => button.textContent)).toEqual(['Connect', 'Decline']);
+
+        fireEvent.click(screen.getByRole('button', { name: /decline/i }));
+
+        expect(onSendMessage).toHaveBeenCalledTimes(1);
+        expect(onSendMessage).toHaveBeenCalledWith("I don't want to connect to Jira. Continue without it.");
+    });
+
+    it('sends a commented tool approval denial with structured metadata', () => {
+        const onSendMessage = vi.fn();
+
+        renderWithProviders(
+            <AgentRequestInputOverlay message={createToolApprovalRequestMessage()} onSendMessage={onSendMessage} />,
+        );
+
+        fireEvent.change(screen.getByPlaceholderText('No, and tell the agent what to do differently'), {
+            target: { value: 'Do not write a file. Put the summary in chat.' },
+        });
+        fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
+
+        expect(onSendMessage).toHaveBeenCalledTimes(1);
+        expect(onSendMessage).toHaveBeenCalledWith('Do not write a file. Put the summary in chat.', {
+            tool_approval_response: {
+                decision: 'deny_with_feedback',
+                approval_key: 'write_artifact:name:quotes.md',
+            },
+        });
+    });
+
+    it('renders legacy field-prefixed tool approval prompts with a friendly target', () => {
+        const message = createToolApprovalRequestMessage();
+        message.message = 'Approve Write Artifact: name quotes.md?';
+
+        renderWithProviders(<AgentRequestInputOverlay message={message} onSendMessage={vi.fn()} />);
+
+        expect(screen.getByText('Approve Write Artifact: quotes.md?')).not.toBeNull();
+        expect(screen.queryByText('Approve Write Artifact: name quotes.md?')).toBeNull();
+    });
+});

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

@@ -1,52 +1,126 @@
-import { cn } from '@vertesia/ui/core';
+import type { McpConnectUxConfig } from '@vertesia/common';
+import { Button, cn } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useUserSession } from '@vertesia/ui/session';
+import { XIcon } from 'lucide-react';
+import { RemoteMcpConnectionButton } from '../../oauth/RemoteMcpConnectionButton.js';
 import { AskUserWidget } from './AskUserWidget';
-import { getAgentMessageText, type RequestInputMessageWithUx } from './ModernAgentOutput/requestInputMessages';
+import { getRequestInputDisplayText, type RequestInputMessageWithUx } from './ModernAgentOutput/requestInputMessages';
 
 export interface AgentRequestInputOverlayProps {
     message?: RequestInputMessageWithUx;
-    onSendMessage?: (message: string) => void;
+    onSendMessage?: (message: string, metadata?: Record<string, unknown>) => void;
+    /** Called after the user connects the MCP server requested by request_mcp_connection. */
+    onMcpConnected?: (cfg: McpConnectUxConfig) => void;
     isLoading?: boolean;
     disabled?: boolean;
     className?: string;
 }
 
+interface McpRequestInputControlsProps {
+    mcpConnect: McpConnectUxConfig;
+    onMcpConnected?: (cfg: McpConnectUxConfig) => void;
+    onDecline: () => void;
+    disabled: boolean;
+}
+
+function McpRequestInputControls({ mcpConnect, onMcpConnected, onDecline, disabled }: McpRequestInputControlsProps) {
+    const { client } = useUserSession();
+    const { t } = useUITranslation();
+
+    return (
+        <div className="flex shrink-0 items-center justify-end gap-2">
+            <RemoteMcpConnectionButton
+                appId={mcpConnect.app_install_id}
+                collectionId={mcpConnect.collection_id}
+                collectionName={mcpConnect.name}
+                variant="default"
+                onAuthChange={() => {
+                    // useOAuthPopup fires onComplete even on cancel/popup-close, so only
+                    // resume the agent once the connection is actually authenticated.
+                    void client.remoteMcpConnections
+                        .getCollectionStatus(mcpConnect.app_install_id, mcpConnect.collection_id)
+                        .then((status) => {
+                            if (status.authenticated) onMcpConnected?.(mcpConnect);
+                        })
+                        .catch(() => {
+                            /* status check failed — do not resume */
+                        });
+                }}
+                readOnly={disabled}
+            />
+            <Button variant="ghost" size="sm" onClick={onDecline} disabled={disabled}>
+                <XIcon className="size-4" />
+                <span>{t('mcpOAuth.decline')}</span>
+            </Button>
+        </div>
+    );
+}
+
 export function AgentRequestInputOverlay({
     message,
     onSendMessage,
+    onMcpConnected,
     isLoading = false,
     disabled = false,
     className,
 }: AgentRequestInputOverlayProps) {
+    const { t } = useUITranslation();
+
     if (!message) return null;
 
     const uxConfig = message.details.ux;
     const options = uxConfig.options ?? [];
+    const mcpConnect = uxConfig.mcp_connect;
+    const freeResponse = uxConfig.free_response;
     const isDisabled = disabled || isLoading || !onSendMessage;
-    const send = (value: string) => {
+    const displayText = getRequestInputDisplayText(message);
+    const send = (value: string, metadata?: Record<string, unknown>) => {
         if (isDisabled) return;
-        onSendMessage?.(value);
+        if (metadata) {
+            onSendMessage?.(value, metadata);
+        } else {
+            onSendMessage?.(value);
+        }
     };
 
+    const wrapperClassName = cn(
+        'flex-shrink-0 border-t border-border/70 bg-background/95 backdrop-blur',
+        'fixed bottom-0 end-0 start-0 z-20 lg:sticky lg:start-auto lg:end-auto',
+        'pb-safe-area',
+        className,
+    );
+
+    if (mcpConnect) {
+        return (
+            <div className={wrapperClassName} data-agent-request-input-overlay>
+                <div className="mx-auto flex w-full max-w-3xl flex-col gap-3 px-3 py-3 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="min-w-0 text-sm leading-6 text-foreground/85">{displayText}</div>
+                    <McpRequestInputControls
+                        mcpConnect={mcpConnect}
+                        onMcpConnected={onMcpConnected}
+                        onDecline={() => send(t('agent.mcpDeclinedMessage', { name: mcpConnect.name }))}
+                        disabled={isDisabled}
+                    />
+                </div>
+            </div>
+        );
+    }
+
     return (
-        <div
-            className={cn(
-                'flex-shrink-0 border-t border-border/70 bg-background/95 backdrop-blur',
-                'fixed bottom-0 end-0 start-0 z-20 lg:sticky lg:start-auto lg:end-auto',
-                'pb-safe-area',
-                className,
-            )}
-            data-agent-request-input-overlay
-        >
+        <div className={wrapperClassName} data-agent-request-input-overlay>
             <div className="mx-auto w-full max-w-3xl px-3 py-3">
                 <AskUserWidget
-                    question={getAgentMessageText(message)}
+                    question={displayText}
                     options={options}
                     variant={uxConfig.variant}
                     multiSelect={uxConfig.multiSelect}
-                    allowFreeResponse={options.length === 0}
+                    allowFreeResponse={options.length === 0 || !!freeResponse}
+                    placeholder={freeResponse?.placeholder}
+                    submitLabel={freeResponse?.submit_label}
                     onSelect={send}
                     onMultiSelect={(optionIds) => send(optionIds.join(', '))}
-                    onSubmit={send}
+                    onSubmit={(value) => send(value, freeResponse?.metadata)}
                     hideBorder
                     compact
                     isLoading={isDisabled}