Spaces:
Running
Running
File size: 3,340 Bytes
90f0300 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | import { useEffect, useRef } from 'react';
import { Headphones, Loader2, Mic, Volume2, X } from 'lucide-react';
import { voiceDialogStatusLabel } from '../app-voice-utils.js';
export function VoiceDialogPanel({
open,
state,
error,
transcript,
assistantText,
handoffDraft,
onHandoffDraftChange,
onHandoffSubmit,
onHandoffContinue,
onHandoffCancel,
onStart,
onStop,
onClose
}) {
const closeButtonRef = useRef(null);
useEffect(() => {
if (open) {
closeButtonRef.current?.focus();
}
}, [open]);
if (!open) {
return null;
}
const listening = state === 'listening';
const confirmingHandoff = state === 'handoff';
const busy = ['transcribing', 'sending', 'waiting', 'speaking', 'summarizing'].includes(state);
const statusIcon = state === 'speaking'
? <Volume2 size={28} />
: busy
? <Loader2 className="spin" size={28} />
: <Mic size={28} />;
return (
<div className="voice-dialog-backdrop">
<section className="voice-dialog-panel" role="dialog" aria-modal="true" aria-label="语音对话">
<div className="voice-dialog-header">
<span>
<Headphones size={17} />
语音对话
</span>
<button ref={closeButtonRef} type="button" onClick={onClose} aria-label="关闭语音对话">
<X size={18} />
</button>
</div>
<div className={`voice-dialog-orb is-${state}`}>
{statusIcon}
</div>
<div className={`voice-dialog-status ${error ? 'is-error' : ''}`}>
{error || voiceDialogStatusLabel(state)}
</div>
{transcript ? <p className="voice-dialog-line is-user">{transcript}</p> : null}
{assistantText ? <p className="voice-dialog-line is-assistant">{assistantText}</p> : null}
{confirmingHandoff ? (
<div className="voice-dialog-handoff">
<textarea
value={handoffDraft}
onChange={(event) => onHandoffDraftChange(event.target.value)}
rows={8}
aria-label="交给 Codex 的任务"
/>
<div className="voice-dialog-actions voice-dialog-handoff-actions">
<button type="button" className="voice-dialog-secondary" onClick={onHandoffContinue}>
继续补充
</button>
<button type="button" className="voice-dialog-secondary" onClick={onHandoffCancel}>
取消
</button>
<button
type="button"
className="voice-dialog-primary"
onClick={onHandoffSubmit}
disabled={!String(handoffDraft || '').trim()}
>
交给 Codex
</button>
</div>
</div>
) : (
<div className="voice-dialog-actions">
<button
type="button"
className={`voice-dialog-primary ${listening ? 'is-listening' : ''}`}
onClick={listening ? onStop : onStart}
disabled={busy}
>
{listening ? '停止' : '开始'}
</button>
<button type="button" className="voice-dialog-secondary" onClick={onClose}>
结束
</button>
</div>
)}
</section>
</div>
);
}
|