Chat Speech Input

Push-to-talk кнопка с Web SpeechRecognition + MediaRecorder fallback.

Статус: idle

Нажмите на микрофон и начните говорить. (Web Speech API работает в Chrome / Edge; в Safari и Firefox используется запасной вариант через MediaRecorder — подключите `onAudioRecorded`.)

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  ChatSpeechInput,
  type ChatSpeechInputStatus,
} from "@/components/ui/chat-speech-input";

export default function Particle() {
  const [text, setText] = useState("");
  const [status, setStatus] = useState<ChatSpeechInputStatus>("idle");

  return (
    <div className="flex w-full max-w-md flex-col gap-3 rounded-lg border bg-card p-3">
      <div className="flex items-center gap-2">
        <Button disabled size="icon" variant="outline">
          <span className="sr-only">Другой инструмент</span>
        </Button>
        <ChatSpeechInput
          onStatusChange={setStatus}
          onTranscriptionChange={(value) => setText(value)}
        />
        <p className="text-muted-foreground text-xs">
          Статус: <span className="font-medium text-foreground">{status}</span>
        </p>
      </div>
      <p className="min-h-6 text-sm leading-relaxed">
        {text || (
          <span className="text-muted-foreground">
            Нажмите на микрофон и начните говорить. (Web Speech API работает в
            Chrome / Edge; в Safari и Firefox используется запасной вариант
            через MediaRecorder — подключите `onAudioRecorded`.)
          </span>
        )}
      </p>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-speech-input

Использование

import { ChatSpeechInput } from "@/components/ui/chat-speech-input";
 
<ChatSpeechInput
  lang="ru-RU"
  onTranscriptionChange={(text, isFinal) => {
    setDraft(text);
    if (isFinal) sendMessage(text);
  }}
  onAudioRecorded={async (blob) => {
    // Fallback для Firefox / Safari — отправляешь blob на свой STT endpoint
    const response = await fetch("/api/stt", { method: "POST", body: blob });
    const { text } = await response.json();
    return text;
  }}
/>

Стратегия

Браузер	Режим	Что происходит
Chrome, Edge	`speech-recognition`	Web Speech API стримит interim и final transcripts в `onTranscriptionChange`.
Firefox, Safari	`media-recorder`	Записывает `MediaRecorder`, по `stop` отдаёт `Blob` в `onAudioRecorded`. Текст из вашего callback идёт в `onTranscriptionChange` как `isFinal: true`.
Без обоих API	`unsupported`	Кнопка отключена с иконкой `<MicOff>`.

Статус доступен через data-state="idle"/"listening"/"processing"/"unsupported" для кастомных стилей, плюс callback onStatusChange.

Использование внутри prompt-input

<ChatPromptInputTools>
  <ChatSpeechInput
    onTranscriptionChange={(text, isFinal) => {
      if (isFinal) textareaRef.current?.setValue(text);
    }}
  />
</ChatPromptInputTools>

На этой странице

Установка Использование Стратегия Использование внутри prompt-input