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:
2026-06-04 15:34:37 -04:00
parent 77cbd91b93
commit 771c00830a
3 changed files with 20 additions and 3 deletions
+11 -1
View File
@@ -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">