feat(ui): display livePartial / transcript_delta in ChatBubble as 'Hearing:' indicator
- REST STT now sends delta (full text) so UI lights up immediately with what was heard. - Works as 'live' for the final transcript (true partials would stream words if Realtime was available). - Per PLAN item 3.
This commit is contained in:
@@ -11,9 +11,10 @@ interface Props {
|
||||
messages: Message[];
|
||||
isKiraSpeaking: boolean;
|
||||
userName?: string;
|
||||
livePartial?: string;
|
||||
}
|
||||
|
||||
export default function ChatBubble({ messages, isKiraSpeaking }: Props) {
|
||||
export default function ChatBubble({ messages, isKiraSpeaking, livePartial }: Props) {
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -27,6 +28,15 @@ export default function ChatBubble({ messages, isKiraSpeaking }: Props) {
|
||||
<span className={`w-2 h-2 rounded-full ${isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'}`} />
|
||||
</h3>
|
||||
|
||||
{livePartial && (
|
||||
<div className="mb-2 px-3 py-1.5 bg-kira-lav/20 text-kira-plum/70 text-xs rounded-xl flex items-center gap-2">
|
||||
<span>👂</span>
|
||||
<span className="font-medium">Hearing:</span>
|
||||
<span className="truncate">{livePartial}</span>
|
||||
<span className="animate-pulse">...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 overflow-y-auto space-y-2 scrollbar-thin pr-1">
|
||||
{messages.length === 0 && (
|
||||
<div className="text-xs text-kira-plum/30 text-center py-6">
|
||||
|
||||
Reference in New Issue
Block a user