Transcript Panel
Relevant source files
The following files were used as context for generating this wiki page:
The Transcript Panel is a core UI component in the OpenLive application that provides a real-time, persistent visual record of the conversation between the user and the AI assistant. It functions as a resizable sidebar within the InCall interface, displaying spoken text, AI reasoning, and tool execution status.
Sources: apps/web/src/components/live/TranscriptPanel.tsx:10-14, apps/web/src/components/live/InCall.tsx:44-50
Architecture and Data Flow
The Transcript Panel operates by subscribing to a central chatStore. While the VoiceEngine and useLiveSession hook manage the audio pipeline, they imperatively update the chatStore to ensure that the visual transcript remains in lockstep with the audio being voiced.
Component Structure
The panel is composed of several sub-components that handle different message roles and types of AI output:
TranscriptPanel: The main container that handles resizing logic, scrolling, and mapping through messages.Message: Renders individual chat turns. It groups consecutive reasoning and tool parts into "work" blocks for assistant turns.WorkBlock: A collapsible section that encapsulates the AI's internal processes (reasoning and tool calls).ToolRow: Displays the status (active/done) and metadata of specific tool executions.
Sources: apps/web/src/components/live/TranscriptPanel.tsx:15-112
Synchronized Data Flow
The following diagram illustrates how user input and agent responses flow into the Transcript Panel:
The diagram shows the flow from server-side events and local voice processing into the unified chat store, which then populates the UI.
Sources: apps/web/src/lib/live/useLiveSession.ts:168-208, apps/web/src/lib/chatStore.ts:40-80
Implementation Details
Transcript Persistence and Rehydration
When a session starts, the transcript is preloaded from the database via api.messages(chatId). The chatStore.preload function converts raw database content into the ChatMsg structure used by the UI.
Sources: apps/web/src/lib/chatStore.ts:98-124, apps/web/src/components/live/LiveDock.tsx:23
The "Work" Block
Assistant turns are not just plain text; they include interleaved "work" (reasoning and tool calls). The TranscriptPanel groups these segments to provide a clean interface.
| Part Kind | Description | UI Representation |
|---|---|---|
text | Spoken or written AI response. | Plain text paragraph. |
reasoning | Internal LLM thoughts/logic. | Italicized text with a border-left inside a WorkBlock. |
tool | External tool execution (e.g., web search). | Icon + status label (e.g., "Searching...") inside a WorkBlock. |
Sources: apps/web/src/lib/chatStore.ts:13-18, apps/web/src/components/live/TranscriptPanel.tsx:114-143
Word-by-Word Reveal
To ensure the transcript matches the audio experience, the useLiveSession hook uses requestAnimationFrame to reveal agent text word-by-word. This avoids "racing ahead" where the UI shows text that the AI hasn't spoken yet.
// From useLiveSession.ts:182-192
const step = () => {
if (id !== assistantId.current) return;
const frac = Math.min(1, (performance.now() - startedAt) / dur);
const idx = Math.max(1, Math.min(words.length, Math.ceil(frac * words.length)));
const revealed = words.slice(0, idx).join(" ");
chatStore.liveText(chatId, id, base ? `${base} ${revealed}` : revealed);
if (frac < 1) revealRaf.current = requestAnimationFrame(step);
};
Sources: apps/web/src/lib/live/useLiveSession.ts:180-195
Layout and User Interaction
Resizability
The panel is resizable via a drag handle on its left edge. It uses localStorage to remember the user's preferred width (clamped between 280px and 640px) and its open/closed state.
Sources: apps/web/src/components/live/InCall.tsx:44-50, apps/web/src/components/live/TranscriptPanel.tsx:31-38
User State Management
The panel also renders "interim" user captions—text currently being transcribed by the local VAD/STT engine before the turn is finalized.
This sequence shows how interim captions provide immediate visual feedback before a message is formally added to the chatStore.
Sources: apps/web/src/lib/live/voiceEngine.ts:133-145, apps/web/src/components/live/TranscriptPanel.tsx:55-58
Conclusion
The Transcript Panel serves as the primary visual interface for tracking the AI's complex behavior. By integrating reasoning, tool status, and voice-synchronized text reveal, it provides a transparent and cohesive learning environment for students using the Nudge assistant.