Chat Dictation Button @astryx-svelte/core v0.3.0 · Chat
Usage
ChatDictationButton is a toggle button that starts and stops voice dictation inside a chat composer. It pairs with useChatDictation to show a microphone icon when idle and animated frequency bars when listening. Place it in the sendActions slot of ChatComposer.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Place the dictation button in the sendActions slot of ChatComposer so it sits next to the send button where users expect voice input controls. |
| Do | Pass an inputRef to useChatDictation so interim transcripts appear as ghost text in the composer input while the user speaks. |
| Do | Enable hasSounds on useChatDictation to give users audio feedback when dictation starts and stops. This is especially helpful when the button's visual change is subtle. |
| Don't | Don't use the dictation button outside a chat composer context. It's designed for the composer's send-action layout, not as a standalone recording control. |
| Don't | Don't forget to handle the unsupported case. The button hides itself by default when the browser lacks SpeechRecognition, but you should still design the composer to work without it. |
Examples
Common configurations, variations, and states.ChatDictationButton — Basic
A dictation button wired to useChatDictation and placed in the sendActions slot of a ChatComposer. Click the microphone to transcribe speech into the input.