Skip to content

feat(audio): add opt-in browser dictation - #3039

Open
berdebotond wants to merge 1 commit into
Chainlit:mainfrom
berdebotond:feat/browser-dictation
Open

berdebotond wants to merge 1 commit into
Chainlit:mainfrom
berdebotond:feat/browser-dictation

Conversation

@berdebotond

@berdebotond berdebotond commented Sep 5, 2026

Copy link
Copy Markdown

Adds opt-in browser speech-to-text for #3003. With [features.audio] enabled = true and mode = "browser", the microphone uses SpeechRecognition/webkitSpeechRecognition and appends finalized transcripts to the composer. Users can edit the text and submit through the normal message path, retaining selected commands and attachments.

The existing Python audio streaming path remains the default (mode = "realtime"). Browser mode requires no Python audio callbacks. Recognition stops on submit, disables/unmounts safely, handles microphone/start errors, avoids duplicate final results, and shows a disabled microphone when unsupported. The README and generated config explain browser support and possible vendor-hosted recognition.

Validation:

  • Frontend unit suite: 42 passed on Node 24, including 10 new recognition lifecycle tests.
  • Python configuration suite: 32 passed, including mode defaults, serialization, and validation.
  • Frontend, react-client, and copilot production builds passed.
  • Commit hooks passed: ESLint, Prettier, Ruff, full backend mypy, and frontend/react-client TypeScript checks. Copilot type checking is disabled by the repository's existing configuration.
  • Browser recognition events were mocked in tests. Physical microphone transcription and the full Cypress suite were not run.

Fixes #3003

AI assistance: implemented and tested with Codex at the contributor's request, credited in the commit as required by AGENTS.md.


Summary by cubic

Fixes #3003 by adding opt-in browser dictation. With features.audio.mode = "browser", the composer microphone uses the Web Speech API and appends finalized transcripts for editing and normal submission; mode = "realtime" with Python audio callbacks remains the default.

  • Recognition appends each final result once, ignores interim results, and aborts cleanly on submit, disable, or unmount.
  • The microphone is disabled when the browser lacks SpeechRecognition or webkitSpeechRecognition.
  • Browser mode may send audio to a vendor-hosted service, so it does not guarantee offline processing.
  • Adds config validation, UI translations, and tests for recognition lifecycle and audio mode defaults.

Written for commit 86cec9a. Summary will update on new commits.

Review in cubic

Co-Authored-By: Codex <noreply@openai.com>

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 9 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/components/chat/MessageComposer/index.tsx">

<violation number="1" location="frontend/src/components/chat/MessageComposer/index.tsx:101">
P3: The onTranscript handler appends dictated text to the React `value` state: `setValueExtern([value, text].join(' '))`. If two final recognition results arrive before React re-renders, both use the same stale `value`, so the second overwrites the first instead of appending to it and dictated text is lost. Read the live input text rather than the `value` state (e.g., from `inputRef.current` or an accumulating ref) so consecutive results always build on the latest content.</violation>
</file>

Reply with feedback, questions, or to request a fix.

Re-trigger cubic

const dictation = useBrowserSpeechRecognition({
enabled: browserDictation && !disabled,
language: i18n.language,
onTranscript: (text) => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3: The onTranscript handler appends dictated text to the React value state: setValueExtern([value, text].join(' ')). If two final recognition results arrive before React re-renders, both use the same stale value, so the second overwrites the first instead of appending to it and dictated text is lost. Read the live input text rather than the value state (e.g., from inputRef.current or an accumulating ref) so consecutive results always build on the latest content.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/components/chat/MessageComposer/index.tsx, line 101:

<comment>The onTranscript handler appends dictated text to the React `value` state: `setValueExtern([value, text].join(' '))`. If two final recognition results arrive before React re-renders, both use the same stale `value`, so the second overwrites the first instead of appending to it and dictated text is lost. Read the live input text rather than the `value` state (e.g., from `inputRef.current` or an accumulating ref) so consecutive results always build on the latest content.</comment>

<file context>
@@ -89,6 +92,17 @@ export default function MessageComposer({
+  const dictation = useBrowserSpeechRecognition({
+    enabled: browserDictation && !disabled,
+    language: i18n.language,
+    onTranscript: (text) => {
+      inputRef.current?.setValueExtern([value, text].filter(Boolean).join(' '));
+    },
</file context>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add support for browser based STT

1 participant