Voice Assistant Card

Usage

import { VoiceAssistantCard } from '@wdzyi/ui';

<VoiceAssistantCard
  name='Aria'
  chats={[
    { id: 'cafe', title: 'Quiet café nearby', preview: 'Found 3 spots with good wifi', time: 'Now' },
    { id: 'lisbon', title: 'Weekend in Lisbon', preview: 'Day trips from the city', time: 'Yesterday' },
  ]}
  onSend={({ text, image }) => ask(text, image)}
  onOpenChat={(id) => load(id)}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

namestring = 'Aria'

The assistant’s name, in the header and the field.

greetingstring = 'How can I help you today?'

Its message in the bubble.

chatsVoiceAssistantCardChat[]

The conversations behind the menu, each with an id, a title, a line from it and a time. The first is open to begin with. By default, four samples.

speechstring

What’s heard when the voice lines are tapped. By default, a request for a quiet café. The voice is acted out, so it never asks for the microphone.

placeholderstring = 'Ask Aria anything'

What the empty field says. By default it asks with the assistant’s name.

onSend(message: VoiceAssistantCardMessage) => void

Called with the text, and the image as a File if one was attached, when Send or Enter sends it.

onOpenChat(id: string) => void

Called with a chat’s id when it’s picked from the list.

Notes

• It needs voice-glow, which draws the beam: the package brings it along, and copied code needs npm install voice-glow. The beam takes its colours from the foil, follows the dark class on <html>, and hears an acted-out voice, so the microphone is never asked for.
• Heard words arrive at a speaking pace of about three a second, each once it has been said, so a longer word takes longer: 150ms and 42ms a letter, give or take. It thinks for 2.2 seconds after the last. Sent words arrive 60ms apart, and every word sharpens out of a 1px blur over 350ms. Sent text sinks 12px into a blur over 400ms as the placeholder drops back in, while a glow measured from the words peaks and fades within a second.
• The menu’s lines fold into a cross as the card slides 8px across to the chats in 250ms. Enter sends, Escape shuts the list, and pressing a button while typing leaves the focus in the field.
• It’s 340px tall and up to 360px wide. With reduced motion, words arrive whole, sending empties the field at once, the bubble and the voice lines hold still, and the pages, icons and captions change without moving.
• Adapted from “Voice Assistant Card remix” by Divij Prakash on the transitions.dev community, itself a remix of “Voice Assistant Card” by Jakub Antalik.