feat(web): persist and send voice input message across session navigation (#1435)

web/package.json

@@ -16,6 +16,7 @@
         "@assistant-ui/react": "^0.15.21",
         "@assistant-ui/react-markdown": "^0.14.16",
         "@assistant-ui/tap": "^0.9.18",
+        "@elevenlabs/client": "0.13.0",
         "@elevenlabs/react": "^0.13.0",
         "@hapi/protocol": "workspace:*",
         "@lobehub/icons": "^5.14.0",

web/src/components/AssistantChat/ComposerButtons.test.tsx

@@ -263,6 +263,122 @@ describe('UnifiedButton — fill-height primary (voice ↔ send)', () => {
     })
 })
 
+describe('UnifiedButton — active dictation send action', () => {
+    afterEach(cleanup)
+
+    it('exposes a Send button next to Stop while dictation is connected and routes it through onSend', () => {
+        const onSend = vi.fn()
+        const onVoiceToggle = vi.fn()
+        renderInProviders(
+            <UnifiedButton
+                canSend
+                voiceStatus="connected"
+                voiceEnabled
+                dictationEnabled
+                dictationCanDirectSend
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        const sendButton = getButton('Send')
+        fireEvent.click(sendButton)
+        // onSend('default') lands in handleSend's dictation branch, which runs
+        // stopAndSend bound to the target session (survives navigation).
+        expect(onSend).toHaveBeenCalledWith('default')
+        expect(onVoiceToggle).not.toHaveBeenCalled()
+    })
+
+    it('retains the fill-height Stop control alongside direct dictation Send', () => {
+        const onSend = vi.fn()
+        const onVoiceToggle = vi.fn()
+        renderInProviders(
+            <UnifiedButton
+                canSend
+                voiceStatus="connected"
+                voiceEnabled
+                dictationEnabled
+                dictationCanDirectSend
+                fillHeight
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        const stopButton = getButton('Stop')
+        expect(stopButton.getAttribute('data-size')).toBe('fill')
+        expect(stopButton.className).toContain('h-full')
+        fireEvent.click(getButton('Send'))
+        expect(onSend).toHaveBeenCalledWith('default')
+        expect(onVoiceToggle).not.toHaveBeenCalled()
+        fireEvent.click(stopButton)
+        expect(onVoiceToggle).toHaveBeenCalledOnce()
+        expect(onSend).toHaveBeenCalledOnce()
+    })
+
+    it('hides the dictation Send button when direct send is not eligible', () => {
+        const onSend = vi.fn()
+        const onVoiceToggle = vi.fn()
+        renderInProviders(
+            <UnifiedButton
+                canSend
+                voiceStatus="connected"
+                voiceEnabled
+                dictationEnabled
+                dictationCanDirectSend={false}
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        // Attachments / pending schedule / scratchlist mode make handleSend
+        // fall back to dictation.toggle(); a "Send" label would be misleading.
+        expect(screen.queryByRole('button', { name: 'Send' })).toBeNull()
+        expect(getButton('Stop')).toBeDefined()
+    })
+
+    it('keeps Stop stop-only during connected dictation', () => {
+        const onSend = vi.fn()
+        const onVoiceToggle = vi.fn()
+        renderInProviders(
+            <UnifiedButton
+                canSend
+                voiceStatus="connected"
+                voiceEnabled
+                dictationEnabled
+                dictationCanDirectSend
+                controlsDisabled={false}
+                onSend={onSend}
+                onVoiceToggle={onVoiceToggle}
+            />,
+        )
+
+        fireEvent.click(getButton('Stop'))
+        expect(onVoiceToggle).toHaveBeenCalledOnce()
+        expect(onSend).not.toHaveBeenCalled()
+    })
+
+    it('does not show the dictation Send button while connecting', () => {
+        renderInProviders(
+            <UnifiedButton
+                canSend
+                voiceStatus="connecting"
+                voiceEnabled
+                dictationEnabled
+                controlsDisabled={false}
+                onSend={() => {}}
+                onVoiceToggle={() => {}}
+            />,
+        )
+
+        expect(screen.queryByRole('button', { name: 'Send' })).toBeNull()
+        expect(getButton(/Connecting/)).toBeDefined()
+    })
+})
+
 describe('DictationButton', () => {
     afterEach(cleanup)
 

web/src/components/AssistantChat/ComposerButtons.tsx

@@ -540,6 +540,9 @@ export function UnifiedButton(props: {
     canSend: boolean
     voiceStatus: ConversationStatus
     voiceEnabled: boolean
+    dictationEnabled?: boolean
+    /** When false, the dictation Send button is hidden (direct send not eligible). */
+    dictationCanDirectSend?: boolean
     controlsDisabled: boolean
     onSend: (intent?: ComposerSendIntent) => void
     onVoiceToggle: () => void
@@ -567,6 +570,7 @@ export function UnifiedButton(props: {
     const isConnecting = props.voiceStatus === 'connecting'
     const isConnected = props.voiceStatus === 'connected'
     const isVoiceActive = isConnecting || isConnected
+    const isDictation = props.dictationEnabled ?? false
     const hasText = props.canSend
     const routesToScratchlist = props.routesToScratchlist ?? false
     const fillHeight = props.fillHeight ?? true
@@ -627,18 +631,36 @@ export function UnifiedButton(props: {
     )
 
     return (
-        <button
-            type="button"
-            onClick={handleClick}
-            disabled={isDisabled}
-            aria-label={ariaLabel}
-            title={ariaLabel}
-            data-testid="composer-unified-button"
-            data-size={fillHeight ? 'fill' : 'compact'}
-            className={`flex ${unifiedButtonSizeClass(fillHeight)} items-center justify-center transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
-        >
-            {icon}
-        </button>
+        <>
+            <button
+                type="button"
+                onClick={handleClick}
+                disabled={isDisabled}
+                aria-label={ariaLabel}
+                title={ariaLabel}
+                data-testid="composer-unified-button"
+                data-size={fillHeight ? 'fill' : 'compact'}
+                className={`flex ${unifiedButtonSizeClass(fillHeight)} items-center justify-center transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+            >
+                {icon}
+            </button>
+            {isDictation && isConnected && props.dictationCanDirectSend ? (
+                // Explicit send action while dictation is connected: mouse/touch
+                // users must be able to reach the session-bound stopAndSend path
+                // (handleSend's dictation branch) without first stopping the
+                // recording, or the transcript is only sendable via keyboard.
+                <button
+                    type="button"
+                    onClick={() => props.onSend('default')}
+                    disabled={props.controlsDisabled}
+                    aria-label={t('composer.send')}
+                    title={t('composer.send')}
+                    className="ml-1 flex self-center h-8 w-8 items-center justify-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50 bg-black text-white"
+                >
+                    <SendIcon />
+                </button>
+            ) : null}
+        </>
     )
 }
 
@@ -715,6 +737,8 @@ export function ComposerButtons(props: {
     onSwitch: () => void
     voiceEnabled: boolean
     dictationEnabled?: boolean
+    /** When false, the dictation Send button is hidden (direct send not eligible). */
+    dictationCanDirectSend?: boolean
     voiceStatus: ConversationStatus
     voiceMicMuted?: boolean
     onVoiceToggle: () => void
@@ -1011,6 +1035,8 @@ export function ComposerButtons(props: {
                     canSend={props.canSend}
                     voiceStatus={props.voiceStatus}
                     voiceEnabled={props.voiceEnabled}
+                    dictationEnabled={props.dictationEnabled}
+                    dictationCanDirectSend={props.dictationCanDirectSend}
                     controlsDisabled={props.controlsDisabled}
                     onSend={props.onSend}
                     onVoiceToggle={props.onVoiceToggle}

web/src/components/AssistantChat/HappyComposer.sendError.test.tsx

@@ -1,6 +1,6 @@
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import type { ReactNode, TextareaHTMLAttributes } from 'react'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { I18nProvider } from '@/lib/i18n-context'
 import type { PendingSchedule } from '@/components/AssistantChat/ScheduleTimePicker'
@@ -33,32 +33,37 @@ const runtime = vi.hoisted(() => ({
     pendingSendIntentRef: null as null | { current: ComposerSendIntent },
     sentIntents: [] as ComposerSendIntent[],
     modelChanges: [] as Array<{ provider: string; modelId: string } | string | null>,
+    pendingHydration: null as Promise<void> | null,
+    dictationEnabled: false,
+    dictation: { status: 'connected', supported: true, partialTranscript: '', error: null, toggle: vi.fn(), stopAndSend: vi.fn() },
 }))
 
 vi.mock('@assistant-ui/react', async () => {
     const React = await import('react')
-    return {
-        useAui: () => ({
-            composer: () => ({
-                setText: (text: string) => {
-                    runtime.setSnapshot!((current) => ({
-                        ...current,
-                        composer: { ...current.composer, text },
-                    }))
-                },
-                send: () => {
-                    const intent = runtime.pendingSendIntentRef?.current ?? 'default'
-                    runtime.sentIntents.push(intent)
-                    if (runtime.pendingSendIntentRef) runtime.pendingSendIntentRef.current = 'default'
-                    runtime.setSnapshot!((current) => ({
-                        ...current,
-                        composer: { text: '', attachments: [] },
-                    }))
-                },
-                addAttachment: async () => {},
-            }),
-            thread: () => ({ cancelRun: () => {} }),
+    const api = {
+        composer: () => ({
+            getState: () => runtime.snapshot.composer,
+            setText: (text: string) => {
+                runtime.setSnapshot!((current) => ({
+                    ...current,
+                    composer: { ...current.composer, text },
+                }))
+            },
+            send: () => {
+                const intent = runtime.pendingSendIntentRef?.current ?? 'default'
+                runtime.sentIntents.push(intent)
+                if (runtime.pendingSendIntentRef) runtime.pendingSendIntentRef.current = 'default'
+                runtime.setSnapshot!((current) => ({
+                    ...current,
+                    composer: { text: '', attachments: [] },
+                }))
+            },
+            addAttachment: async () => {},
         }),
+        thread: () => ({ cancelRun: () => {} }),
+    }
+    return {
+        useAui: () => api,
         useAuiState: (selector: (state: typeof runtime.snapshot) => unknown) => selector(runtime.snapshot),
         ComposerPrimitive: {
             Root: ({ children, onSubmit }: { children: ReactNode; onSubmit?: () => void }) => (
@@ -98,7 +103,15 @@ vi.mock('@/lib/composerSegments', () => ({
         showContinueHint ? 'misc.typeMessage' : 'misc.typeAMessage',
 }))
 vi.mock('@/hooks/useComposerDraft', () => ({
-    useComposerDraft: (sessionId: string | undefined) => ({ sessionId, complete: true, restoredAny: false, hasStoredAttachments: false }),
+    useComposerDraft: (sessionId: string | undefined) => {
+        const [complete, setComplete] = useState(runtime.pendingHydration === null)
+        useEffect(() => { void runtime.pendingHydration?.then(() => setComplete(true)) }, [])
+        return { sessionId, complete, restoredAny: false, hasStoredAttachments: false }
+    },
+}))
+vi.mock('@/hooks/useDictation', () => ({ useDictation: () => runtime.dictation }))
+vi.mock('@/hooks/useVoiceInputPreferences', () => ({
+    useVoiceInputPreferences: () => ({ voiceMode: runtime.dictationEnabled ? 'dictation' : 'conversation', provider: 'openai', transcriptionMode: 'standard' }),
 }))
 vi.mock('@/hooks/useComposerEnterBehavior', () => ({ useComposerEnterBehavior: () => ({ composerEnterBehavior: 'send' }) }))
 vi.mock('@/hooks/usePlatform', () => ({ usePlatform: () => ({ haptic: { impact: () => {}, notification: () => {} }, isTouch: false }) }))
@@ -136,8 +149,8 @@ vi.mock('@/components/AssistantChat/ComposerButtons', () => ({
         </div>
     ),
     // HappyComposer places UnifiedButton beside the card (omitPrimaryButton).
-    UnifiedButton: (props: { onSend: () => void }) => (
-        <button type="button" onClick={props.onSend}>send</button>
+    UnifiedButton: (props: { onSend: () => void; dictationCanDirectSend?: boolean }) => (
+        <button type="button" data-direct-send={props.dictationCanDirectSend} onClick={() => props.onSend()}>send</button>
     ),
     DictationButton: () => null,
     isComposerPrimaryFillHeight: () => true,
@@ -607,3 +620,31 @@ describe('HappyComposer send intent gestures', () => {
         expect(runtime.pendingSendIntentRef?.current).toBe('default')
     })
 })
+
+it('refreshes voice Send after empty attachment hydration completes', async () => {
+    let hydrate: (() => void) | undefined
+    runtime.pendingHydration = new Promise<void>(resolve => { hydrate = resolve })
+    runtime.dictationEnabled = true
+    runtime.dictation.stopAndSend.mockClear()
+    runtime.dictation.toggle.mockClear()
+    const resolveSessionIdForVoice = vi.fn(async () => ({ sessionId: 'voice-resumed', resumed: true }))
+    try {
+        runtime.snapshot = { composer: { text: '', attachments: [] }, thread: { isRunning: false, isDisabled: false } }
+        runtime.setSnapshot = vi.fn()
+        render(<I18nProvider><HappyComposer sessionId="voice-inactive" active={false} resolveSessionIdForVoice={resolveSessionIdForVoice} /></I18nProvider>)
+        expect(screen.getByRole('button', { name: 'send' })).toHaveAttribute('data-direct-send', 'false')
+        await act(async () => { hydrate?.() })
+        expect(screen.getByRole('button', { name: 'send' })).toHaveAttribute('data-direct-send', 'true')
+        send()
+        await waitFor(() => expect(runtime.dictation.stopAndSend).toHaveBeenCalledWith('voice-inactive', '', 'queue', {
+            resolveSessionId: resolveSessionIdForVoice,
+            onSessionResolved: undefined,
+        }))
+        expect(runtime.dictation.toggle).not.toHaveBeenCalled()
+    } finally {
+        cleanup()
+        runtime.pendingHydration = null
+        runtime.dictationEnabled = false
+        runtime.setSnapshot = null
+    }
+})