Skip to content

Frontend Deep Dive

Composition

src/main.tsx mounts App.tsx. The app owns tab selection and delegates the voice workflow to useVoiceAgent. The main tabs are Voice Agent, TTS Studio, and STT Studio. Shared controls include setup, model selection, conversation rendering, waveform playback, warnings, and an active-call screen.

State strategy

There is no external state library. React state stores messages, setup phase, model progress, microphone status, debug information, pending images, and preferences. Refs mirror volatile state used by asynchronous callbacks, avoiding stale closures during worker and stream events.

Preferences are persisted through src/lib/user-preferences.ts; the sidebar collapse preference is stored directly in localStorage. Message audio is transient object-URL state and is revoked on clear, reset, call start, and unmount.

Interaction design

  • Desktop sidebar and mobile tab bar expose the same three studios.
  • Cmd+B/Ctrl+B toggles the sidebar.
  • Voice mode has call, push-to-talk/mic, stop, force-submit, mute, and barge-in controls.
  • Text mode supports markdown, thinking blocks, code copy, images, and Hindi transliteration.
  • Setup presets estimate download size before model loading.

Quality characteristics

TypeScript types model messages, runtime events, model variants, preferences, and tool calls. The app is intentionally client-heavy; a successful build validates the compile and bundle graph, while browser testing is needed for microphone permissions, WebGPU, workers, and large model memory behavior.

Frontend interview answer

“The UI is a thin reactive shell over a lifecycle-heavy hook. I used refs for state read by long-lived asynchronous callbacks, component boundaries for the three studios, and normalized stream events so the rendering layer remains independent of individual model providers.”

Render/state contract

App reads the hook’s state and passes narrow props into presentation components. ConversationArea renders messages and loading state; ControlBar owns interaction affordances; VoiceAgentTopBar exposes session/model controls; ActiveCallScreen composes status, mute, stop, force-submit, barge-in, and waveform signals. The TTS and STT studios reuse the same loaded agent services without duplicating model lifecycle code.

Loading and failure states

The UI exposes setup selection before any large asset is loaded, progress for the active STT/TTS/LLM phase, warnings when secure context or WebGPU support is missing, and reset controls when configuration is stale. Empty conversation state offers example prompts; assistant bubbles can display thinking, metrics, tool activity, markdown, code, and generated audio.

Accessibility and device behavior

Mobile navigation collapses into a tab bar, while desktop uses a collapsible sidebar. Microphone capture requests mono 16 kHz audio with echo cancellation and noise suppression. The browser capability check is advisory: WebGPU is preferred, but Supertonic can use WASM fallback and Piper is WASM-based.