| "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) { |
| |
| 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 |
|
|
