mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Frontend voice input component (microphone capture + transcription) #402

New Issue
Closed
opened 2026-02-15 07:35:23 +00:00 by jason.woltje · 1 comment
jason.woltje commented 2026-02-15 07:35:23 +00:00
Owner
Copy Link

Description

Create a React component for voice input that captures microphone audio and sends it for transcription.

Design

  • Microphone button with visual feedback (recording indicator)
  • Uses MediaRecorder API for audio capture
  • Sends audio chunks via WebSocket for streaming transcription
  • Falls back to REST upload for non-streaming browsers
  • Shows partial transcription in real-time
  • Integrates with existing chat input

Component Structure

apps/web/src/components/speech/

  • VoiceInput.tsx — Main mic button + recording UI
  • AudioVisualizer.tsx — Waveform/level visualization
  • useVoiceInput.ts — Hook for mic capture + WebSocket
  • tests/VoiceInput.test.tsx

Acceptance Criteria

  • Microphone permission handling
  • Recording start/stop with visual feedback
  • Audio level visualization
  • WebSocket streaming to /speech gateway
  • Partial transcription display
  • Final transcription inserted into chat input
  • Mobile-friendly touch interaction
  • Unit tests
## Description Create a React component for voice input that captures microphone audio and sends it for transcription. ## Design - Microphone button with visual feedback (recording indicator) - Uses MediaRecorder API for audio capture - Sends audio chunks via WebSocket for streaming transcription - Falls back to REST upload for non-streaming browsers - Shows partial transcription in real-time - Integrates with existing chat input ## Component Structure apps/web/src/components/speech/ - VoiceInput.tsx — Main mic button + recording UI - AudioVisualizer.tsx — Waveform/level visualization - useVoiceInput.ts — Hook for mic capture + WebSocket - __tests__/VoiceInput.test.tsx ## Acceptance Criteria - [ ] Microphone permission handling - [ ] Recording start/stop with visual feedback - [ ] Audio level visualization - [ ] WebSocket streaming to /speech gateway - [ ] Partial transcription display - [ ] Final transcription inserted into chat input - [ ] Mobile-friendly touch interaction - [ ] Unit tests
jason.woltje added this to the M13-SpeechServices (0.0.13) milestone 2026-02-15 07:35:23 +00:00
jason.woltje commented 2026-02-15 09:30:15 +00:00
Author
Owner
Copy Link

Completed as part of M13-SpeechServices milestone on branch feature/m13-speech-services. SP-FE-001: Frontend voice input component (commit 74d6c10, 34 tests). All quality gates passed (lint, typecheck, tests, security).

Completed as part of M13-SpeechServices milestone on branch feature/m13-speech-services. SP-FE-001: Frontend voice input component (commit 74d6c10, 34 tests). All quality gates passed (lint, typecheck, tests, security).
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ai
AI/LLM integration
 api
Backend/API work
 api
auth
Authentication
 database
database
Database/schema work
 devops
Docker/deployment
 docs
Documentation
 frontend
graph
knowledge-module
migration
Data migration
 orchestrator
Orchestrator service (apps/orchestrator/)
 p0
Critical priority
 p1
High priority
 p2
Medium priority
 p3
Low priority
 performance
Performance work
 phase-1
phase-2
phase-3
phase-4
phase-5
plugin
MoltBot plugin work
 search
security
Security-related
 setup
Initial setup
 testing
Testing/QA
 web
Frontend work
No Label
Milestone
No items
No Milestone M13-SpeechServices (0.0.13)
Projects
Clear projects
No project
Assignees
Clear assignees
jason.woltje
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mosaic/stack#402
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?