Walkthrough — Voice UX & Default UI Preference Layout

I have successfully implemented both the voice control system for the Interactive Canvas and the default dashboard interface toggle preference in the Eliza Cloud platform.

1. Default UI Interface & Layout Preference

Core Implementation

• State & Persistence: Added defaultUiMode ('canvas' | 'classic') state and the action setDefaultUiMode(mode) in the Zustand store canvas-store.ts. This preference is persisted in the local storage config.
• Settings tab: Added the Default interface configuration card inside the general settings page general-tab.tsx. Users can choose their startup layout using a drop-down selector.
• Layout switcher: Integrated the conditional layout render inside the layout router App.tsx.
  • If canvasOpen is true, <CanvasLayout /> renders.
  • If canvasOpen is false, <DashboardLayout /> renders instead, unmounting the canvas to prevent page navigation from triggering unintended canvas events.
  • While in <DashboardLayout />, the floating assistant pill cloud-assistant-pill.tsx remains overlayed in the bottom-center of the viewport, so pressing cmd + k or clicking the orb seamlessly slides back into the Interactive Canvas.

2. Voice-Driven Canvas Interaction UX

Core Features

• Unified Voice Hooks: Integrated useVoiceChat and useContinuousChat from @elizaos/ui/hooks with a stabilized React Ref (handleSendRef) to avoid stale closure state during voice/speech callbacks.
• Dual-Mode UX State Flow:
  • Text Mode: Canvas is open with the text input bar expanded. A microphone button is available next to the close button to switch to voice mode.
  • Voice Mode: Input bar collapses into a floating circular orb (56x56 px). centring states like recording (Mic), thinking (Loader2), or speaking (Volume2 bounce animation). Real-time preview transcript is shown in a small card overlay.
• TTS Responses: Automatically speaks out assistant responses on query execution success, along with helpful voice-guided prompts.

Verification & Build Quality

1. Build Verification

• Verified compiling and typechecking of packages/ui package with zero TS errors:

  bunx tsc --noEmit -p tsconfig.json

• Verified the build pipeline in packages/cloud-frontend builds and finishes with zero warnings or errors:

  bun run verify

2. Biome Formatting

• Checked and formatted modified files to align with the Biome rules:

  bunx @biomejs/biome check --write --unsafe