useTranscript

Provides access to the conversation transcript, including real-time updates as the conversation progresses.

Import


import { useTranscript } from '@vocobase/voice-client-sdk'

Requirements

Must be used within a VoiceSessionProvider.

Return Value


const {
  entries,      // TranscriptEntry[]
  latestEntry,  // TranscriptEntry | null
  count,        // number
  isEmpty       // boolean
} = useTranscript()

`entries`

Array of all transcript entries in chronological order.


interface TranscriptEntry {
  role: 'user' | 'bot'
  content: string
  timestamp: string
  latency_ms?: number  // Bot messages only
}

`latestEntry`

The most recent entry, or null if the transcript is empty.

`count`

Total number of entries in the transcript.

`isEmpty`

true if there are no entries, false otherwise.

Example


function TranscriptDisplay() {
  const { entries, isEmpty } = useTranscript()
 
  if (isEmpty) {
    return <p>No messages yet</p>
  }
 
  return (
    <div className="transcript">
      {entries.map((entry, index) => (
        <div key={index} className={`message ${entry.role}`}>
          <strong>{entry.role === 'user' ? 'You' : 'Agent'}</strong>
          <p>{entry.content}</p>
          {entry.latency_ms && <span>{entry.latency_ms}ms</span>}
        </div>
      ))}
    </div>
  )
}

Auto-Scroll to Latest


function LiveTranscript() {
  const { entries, latestEntry } = useTranscript()
  const scrollRef = useRef<HTMLDivElement>(null)
 
  useEffect(() => {
    scrollRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [latestEntry])
 
  return (
    <div className="transcript-container">
      {entries.map((entry, i) => (
        <Message key={i} entry={entry} />
      ))}
      <div ref={scrollRef} />
    </div>
  )
}

Security Note

⚠️ XSS Warning: The content field contains raw text from speech recognition. Always render safely:


// Safe - React handles escaping
<p>{entry.content}</p>