| // src/components/voice/VoiceTranscriptPanel.tsx | |
| import { Mic, MicOff } from "lucide-react"; | |
| interface VoiceTranscriptPanelProps { | |
| transcript: string; | |
| interimTranscript: string; | |
| listening: boolean; | |
| } | |
| export function VoiceTranscriptPanel({ | |
| transcript, | |
| interimTranscript, | |
| listening, | |
| }: VoiceTranscriptPanelProps) { | |
| return ( | |
| <div className="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-4 shadow-lg"> | |
| <div className="flex items-center gap-2 mb-2"> | |
| {listening ? ( | |
| <Mic className="w-4 h-4 text-green-500 animate-pulse" /> | |
| ) : ( | |
| <MicOff className="w-4 h-4 text-gray-400" /> | |
| )} | |
| <span className="text-xs font-semibold text-gray-500 uppercase tracking-wide"> | |
| {listening ? "Listening..." : "Microphone off"} | |
| </span> | |
| </div> | |
| <div className="min-h-[60px] max-h-[150px] overflow-y-auto scrollbar-thin"> | |
| {transcript && ( | |
| <p className="text-gray-700 dark:text-gray-200 whitespace-pre-wrap text-sm"> | |
| {transcript} | |
| </p> | |
| )} | |
| {listening && interimTranscript && ( | |
| <p className="text-gray-400 italic whitespace-pre-wrap text-sm mt-1"> | |
| {interimTranscript} | |
| </p> | |
| )} | |
| {!transcript && !interimTranscript && ( | |
| <p className="text-gray-400 text-sm italic"> | |
| {listening ? "Say something..." : "Click the mic to start"} | |
| </p> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| } |
Xet Storage Details
- Size:
- 1.51 kB
- Xet hash:
- 5346372652297fff8283423667df5d800283b3bfed8d4f5cee420e6e6d8283b9
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.