Обзор
Компоненты
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Auth Surface
- Avatar
- Badge
- Browse Catalog Dialog
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Connector Setup Dialog
- Cookie Banner
- Dialog
- Directory Card
- Directory Detail
- Directory Skeleton
- DrawerНовое
- Token Parts Input
- Empty
- Field
- Fieldset
- File Preview Modal
- File Preview Skeleton
- Form
- Frame
- Group
- Icon
- Input
- Input Group
- Kbd
- Label
- Legal Shell
- Menu
- Mermaid Diagram
- Mind Map Diagram
- Not Found Screen
- Onboarding Frame
- Popover
- PDF Thumbnail
- Personalization Landing
- Preview Card
- Pricing Page
- Progress
- Radio Group
- Ring Spinner
- Scroll Area
- Select
- Separator
- Settings Page
- Settings Skills
- Settings Connectors
- Settings Capabilities
- Settings Usage
- Settings Account
- Settings Billing
- Sheet
- Sidebar
- Skeleton
- Skill Create Dialog
- Slider
- Spinner
- Stat
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Tooltip
AI-компоненты
- Компоненты AI
- Chat Conversation
- Chat Message
- Chat Response
- Chat Suggestion
- Chat Prompt Input
- Slash Highlighted Textarea
- Chat Search Dialog
- Chat Skill Doc
- Chat Connector Detail
- Chat Attachments
- Chat File Card
- Chat Token Chip
- Chat Code Block
- Chat Image
- Chat Inline Citation
- Chat Sources
- Chat Web Search
- Chat Research
- Chat Source
- Chat Actions
- Chat Context
- Chat Loader
- Chat Compaction
- Chat Timeline
- Chat Snippet
- Chat Terminal
- Chat Stack Trace
- Chat Test Results
- Chat File Tree
- Chat Environment Variables
- Chat Audio Player
- Chat Transcription
- Chat Speech Input
- Chat Mic Selector
- Chat Voice Selector
- Chat Agent
- Chat Persona
- Chat Connection
- Chat Connector Suggestion
- Chat Queue
- Chat Checkpoint
- Chat Confirmation
- Chat Artifact
- Chat JSX Preview
- Chat Schema Display
- Chat Package Info
- Chat Commit
- Chat Plan
- Chat Open In Chat
- Chat Sandbox
- Chat Model Selector
- Chat Canvas
- Chat Node
- Chat Edge
Ресурсы
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>На этой странице