Skip to content

add voice input to agent chat#564

Open
swamimalode07 wants to merge 6 commits into
databuddy-analytics:mainfrom
swamimalode07:feat/voice-mode
Open

add voice input to agent chat#564
swamimalode07 wants to merge 6 commits into
databuddy-analytics:mainfrom
swamimalode07:feat/voice-mode

Conversation

@swamimalode07

@swamimalode07 swamimalode07 commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Description

  • Added a mic button to the agent chat that opens a voice dialog and transcribes speech live using the browser's Web Speech API -> no new deps, nothing sent to servers
  • Animated fluid orb that reacts to your voice level, breathes when idle, and opens in a random brand color each time
  • Transcript appends to whatever you already typed; confirm with Enter or the Done button
  • Handles unsupported browsers cleanly - button hidden in Firefox, clear error message in Brave, mic permission errors have their own message, all animations respect reduced motion
  • Fixed Permissions-Policy header to allow same-origin microphone and added a MicrophoneIcon to the shared icon set
Checklist
  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes

Summary by cubic

Adds voice input to agent chat via a mic button and dialog that transcribes speech live on-device using the Web Speech API. Improves the typing flow with quick confirm and a responsive visual without adding dependencies or sending audio to servers.

  • New Features

    • Voice dialog with live transcription (Web Speech API); transcript appends to the current input and can be confirmed with Enter or Done.
    • Animated fluid orb reacts to voice level, breathes when idle, and picks a random brand color; voice controls are hidden when unsupported and show clear permission/unsupported-browser errors; respects reduced motion.
  • Bug Fixes

    • Fixed Permissions-Policy to allow same-origin microphone: microphone=(self).

Written for commit e77915b. Summary will update on new commits.

Review in cubic

swamimalode07 and others added 6 commits July 15, 2026 02:33
- Voice dialog with live Web Speech API transcription and fluid orb visual
- MicrophoneIcon added to nucleo icon set
- Allow same-origin microphone in Permissions-Policy

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@vercel

vercel Bot commented Jul 14, 2026

Copy link
Copy Markdown

@swamimalode07 is attempting to deploy a commit to the Databuddy OSS Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 1f176146-8763-4d9e-b11c-ccadc9b07703

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@greptile-apps

greptile-apps Bot commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR adds browser-based voice input to agent chat. The main changes are:

  • Voice dialog with live speech transcription.
  • Microphone-level orb animation and shared icon.
  • Same-origin microphone permission policy.
  • Reduced-motion support for shimmer text.

Confidence Score: 4/5

The speech-recognition restart path can leave an old session active after a rapid dialog reopen.

  • A queued onend callback can restart a recognizer that belongs to the previous dialog session.
  • The input wiring, icon export, reduced-motion rendering, and header change otherwise match existing patterns.

apps/dashboard/components/agent/hooks/use-speech-transcription.ts

Important Files Changed

Filename Overview
apps/dashboard/components/agent/hooks/use-speech-transcription.ts Adds continuous Web Speech transcription, including restart and error handling.
apps/dashboard/components/agent/agent-voice-dialog.tsx Adds the voice-input dialog, transcript confirmation flow, and animated microphone feedback.
apps/dashboard/components/agent/hooks/use-mic-level.ts Adds microphone-level sampling with media-stream and audio-context cleanup.
apps/dashboard/components/agent/agent-input.tsx Connects confirmed voice transcripts to the existing controlled chat input.
apps/dashboard/next.config.ts Permits same-origin microphone access while retaining other feature restrictions.
packages/ui/src/components/icons/nucleo.tsx Adds the shared microphone icon using the existing icon export pattern.

Reviews (1): Last reviewed commit: "added brand colors for the orb" | Re-trigger Greptile

Comment on lines +170 to +182
recognition.onend = () => {
if (!shouldListenRef.current) {
return;
}

try {
recognition.start();
} catch {
shouldListenRef.current = false;
setError("Voice input stopped unexpectedly. Please try again.");
setStatus("error");
}
};

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.

P1 Stale recognizer restart

When the dialog is closed and immediately reopened, the old recognizer can deliver its queued onend after start() has set the shared listen flag back to true for the new recognizer. The old callback then starts a second session, which can produce microphone-in-use errors or transcript events from the closed dialog.

Suggested change
recognition.onend = () => {
if (!shouldListenRef.current) {
return;
}
try {
recognition.start();
} catch {
shouldListenRef.current = false;
setError("Voice input stopped unexpectedly. Please try again.");
setStatus("error");
}
};
recognition.onend = () => {
if (
!shouldListenRef.current ||
recognitionRef.current !== recognition
) {
return;
}
try {
recognition.start();
} catch {
shouldListenRef.current = false;
setError("Voice input stopped unexpectedly. Please try again.");
setStatus("error");
}
};

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.

1 participant