Transcript.tsx
922 bytes
| 1 | import { useEffect, useRef } from 'react' |
|---|---|
| 2 | import type { Segment } from 'shared/types' |
| 3 | |
| 4 | interface TranscriptProps { |
| 5 | segments: Segment[] |
| 6 | } |
| 7 | |
| 8 | export function Transcript({ segments }: TranscriptProps) { |
| 9 | const listRef = useRef<HTMLDivElement>(null) |
| 10 | |
| 11 | useEffect(() => { |
| 12 | const list = listRef.current |
| 13 | if (list) list.scrollTop = list.scrollHeight |
| 14 | }, [segments.length]) |
| 15 | |
| 16 | if (segments.length === 0) return null |
| 17 | |
| 18 | return ( |
| 19 | <section className="transcript-section"> |
| 20 | <h2 className="transcript-title">Transcript</h2> |
| 21 | <div ref={listRef} className="transcript"> |
| 22 | {segments.map((segment) => ( |
| 23 | <div key={segment.id} className={`segment segment-${segment.speaker}`}> |
| 24 | <span className="segment-speaker">{segment.speaker === 'user' ? 'You' : 'VoiceTask'}</span> |
| 25 | <p className="segment-text">{segment.text}</p> |
| 26 | </div> |
| 27 | ))} |
| 28 | </div> |
| 29 | </section> |
| 30 | ) |
| 31 | } |
| 32 | |