AiVoiceTrigger

An intelligent voice interaction component that provides a sleek, float-over experience and supports custom audio waveform tracking to showcase multi-modal feedback.

Basic Usage

The simplest way is using v-model:recording to directly bind the recording state. Clicking on the mic triggers the visualizer panel.

State: Idle

Basic Usage

Dynamic Amplitudes Bar

Pass an array to amplitudes property dynamically during recording loop to visualize biometric traits or simulated multi-modal input. (Ideally bound to Web Audio API outputs)

Real-time Audio Simulation

Capturing Events

Listening to @start, @stop and @cancel can help you bridge the component exactly to your core WebSocket streaming API without data leakages. Text inside default slot will also append directly.

Please open Developer Tool (F12) to inspect the logs

Trigger Callbacks

Practical Scenario: Voice Assistant

By combining the AiVoiceTrigger and AiBubble components, we can easily build a smart voice assistant interface featuring voice input, loading states, and responsive chat bubbles.

Hello! I am your voice assistant. Click the microphone below to talk to me.

Application Scenario

API

Props

Attribute	Description	Type	Default
recording / v-model:recording	Whether the voice trigger is active.	boolean	false
amplitudes	Real-time array determining the visualizer bars.	number[]	[5,5,5,...]
theme-overrides	Fine-grained theme overrides	ComponentThemeVars	—

Events

Event Name	Description	Parameters
update:recording	Emits state update back to model.	(value: boolean)
start	Triggered when active recording initiated.	—
stop	Triggered when users press the recording button again to submit.	—
cancel	Users explicitly hit the dismiss key to discard audio chunk.	—

Slots

Slot Name	Description	Parameters
default	Placeholder label text accompanying the minimal mic dot	—

Use in Nuxt

This component fully supports Nuxt 3/4. In Nuxt projects, the component will be automatically imported.

For detailed configuration, please see Nuxt Integration.

Theme Variables

Variable Name	Description	Default Value
--yh-ai-voice-trigger-btn-size	Trigger button size	32px
--yh-ai-voice-trigger-active-color	Active color during recording	var(--yh-color-danger)
--yh-ai-voice-trigger-wave-color	Waveform color	var(--yh-color-danger)
--yh-ai-voice-trigger-bg	Panel background color	var(--yh-bg-color-overlay)