Dictation

Preview

Install

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/dictation

Brings in: locale, locked, tooltip, utils · npm: lucide-react@^1.67.0

Usage

"use client"

import * as React from "react"
import { Composer } from "@/components/composer"
import { DictationButton } from "@/components/dictation"

export default function Example() {
  const [value, setValue] = React.useState("")
  return (
    <Composer
      className="max-w-2xl"
      value={value}
      onChange={setValue}
      onSubmit={() => setValue("")}
      tools={
        // On-device speech recognition where the browser has it; where it doesn't, the button says why. To use your own
        // speech-to-text instead, pass transcribe={async (audio, { signal }) =>
        //   (await fetch("/api/transcribe", { method: "POST", body: audio, signal })).text()}
        <DictationButton value={value} onChange={setValue} whenUnsupported="explain" />
      }
    />
  )
}

<DictationButton>

Functions

Strings

Types

Transcribe

Your own speech-to-text: given the recording, return its text. Dictation then records with the browser's MediaRecorder and hands you the audio; where it goes from there is your choice.

(audio: Blob, options: { lang?: string | undefined; signal: AbortSignal }) => Promise<string>

DictationStatus

| "checking" | "unsupported" | "idle" /** Asking for the microphone, or readying on-device recognition. */ | "starting" | "listening" /** `transcribe` is working on the recording. */ | "transcribing"

DictationProblem

Why dictation stopped or can't run; each is a key in `dictationStrings`.

"unsupported" | "notOnDevice" | "denied" | "noMicrophone" | "noSpeech" | "network" | "language" | "failed" | "transcribeFailed"

DictationOptions

{ /** The text the words go into, usually the composer's `value`. */ value: string /** Called as words arrive, usually the composer's `onChange`. */ onChange: (value: string) => void /** A BCP 47 language such as "en-GB". Left out, LocaleProvider's locale, else the page's `lang`, else the browser's. */ lang?: string | undefined /** Your own speech-to-text. With it, the browser's speech recognition

Dictation

{ status: DictationStatus /** Why it stopped, or why it can't run (with status "unsupported"). Cleared when it starts again. */ problem?: DictationProblem | undefined /** It stopped without a problem, so the words are in the field to check. Cleared when it starts again. */ done: boolean start: () => void stop: () => void toggle: () => void }