File size: 2,453 Bytes
e454383 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | "use client"
import type { Transcript } from "@/lib/types"
import { ScrollArea } from "@radix-ui/react-scroll-area"
import { Separator } from "@radix-ui/react-separator"
import { FileText } from "lucide-react"
import { useEffect } from "react"
import EmptyState from "./empty_state"
type Props = {
selectedTranscript: Transcript | null
selectedTranscripts: Transcript[]
}
const TranscriptsTab = ({ selectedTranscript, selectedTranscripts }: Props) => {
useEffect(() => {
if (selectedTranscript) {
// wait for 300ms for the transcript to render so it will scroll to the correct position
const timeoutId = setTimeout(() => {
const transcriptId = "transcript-" + selectedTranscript?.timestamp
const transcriptElement = document.getElementById(transcriptId)
transcriptElement?.scrollIntoView({
behavior: "smooth",
block: "start",
})
}, 500)
return () => clearTimeout(timeoutId)
}
}, [selectedTranscript, selectedTranscripts])
return (
<ScrollArea className="flex-1 p-3 sm:p-4 h-screen custom-scrollbar">
{selectedTranscript ? (
<div className="space-y-1 flex flex-col">
<div>
<h3 className="font-medium text-sm sm:text-base truncate">{selectedTranscript.filename}</h3>
</div>
<Separator />
<div className="h-[calc(100vh-120px)] sm:h-[calc(100vh-150px)] overflow-auto pr-2 sm:pr-4">
<div id="transcripts-container" className="text-xs sm:text-sm flex flex-col gap-3 sm:gap-4">
{selectedTranscripts.map((transcript) => (
<div
key={transcript.index}
id={`transcript-${transcript.timestamp}`}
className={`rounded-md p-2 sm:p-3 transition-colors ${
transcript.index === selectedTranscript.index ? "bg-primary/10 border border-primary/20" : ""
}`}
>
<p className="text-muted-foreground text-xs mb-1">
{transcript.speaker} @ {transcript.timestamp}
</p>
<p className="text-justify leading-relaxed">{transcript.text}</p>
</div>
))}
</div>
</div>
</div>
) : (
<EmptyState message="Select a transcript to get started." icon={FileText} />
)}
</ScrollArea>
)
}
export default TranscriptsTab
|