| import { ChevronRight, FileText } from "lucide-react"; |
| import { Button } from "@/components/ui/button"; |
| import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; |
| import { cn } from "@/lib/utils"; |
| import TranscriptsTab from "@/components/transcripts_tab"; |
| import type { Transcript } from "@/lib/types"; |
|
|
| interface TranscriptsPanelProps { |
| selectedTranscript: Transcript | null; |
| selectedTranscripts: Transcript[]; |
| selectedChatId: string | null; |
| isTranscriptsOpen: boolean; |
| setIsTranscriptsOpen: (open: boolean) => void; |
| } |
|
|
| export default function TranscriptsPanel({ |
| selectedTranscript, |
| selectedTranscripts, |
| selectedChatId, |
| isTranscriptsOpen, |
| setIsTranscriptsOpen, |
| }: TranscriptsPanelProps) { |
| if ( |
| process.env.NEXT_PUBLIC_INITIAL_MESSAGE !== "CSPE" || |
| selectedChatId === null |
| ) { |
| return null; |
| } |
|
|
| return ( |
| <> |
| {/* Mobile Transcripts Sheet */} |
| <div className="lg:hidden"> |
| <Sheet open={isTranscriptsOpen} onOpenChange={setIsTranscriptsOpen}> |
| <SheetTrigger asChild> |
| <Button |
| variant="ghost" |
| size="icon" |
| className="fixed top-20 right-4 z-50 bg-background/80 backdrop-blur border border-border/50 shadow-lg" |
| > |
| <FileText className="h-4 w-4" /> |
| </Button> |
| </SheetTrigger> |
| <SheetContent side="right" className="w-full sm:w-80 p-0"> |
| <div className="h-full flex flex-col"> |
| <div className="p-4 border-b bg-background/95 backdrop-blur"> |
| <h2 className="font-semibold">Transcripts</h2> |
| </div> |
| <TranscriptsTab |
| selectedTranscript={selectedTranscript} |
| selectedTranscripts={selectedTranscripts} |
| /> |
| </div> |
| </SheetContent> |
| </Sheet> |
| </div> |
| |
| {/* Desktop Transcripts Panel */} |
| <div |
| className={cn( |
| "hidden lg:flex flex-col transition-all duration-300 ease-in-out border-l bg-card/50", |
| isTranscriptsOpen ? "w-80" : "w-12" |
| )} |
| > |
| <div className="p-4 border-b flex items-center justify-between bg-background/95 backdrop-blur"> |
| <h2 className={cn("font-semibold", !isTranscriptsOpen && "sr-only")}> |
| Transcripts |
| </h2> |
| <Button |
| variant="ghost" |
| size="icon" |
| onClick={() => setIsTranscriptsOpen(!isTranscriptsOpen)} |
| aria-label={ |
| isTranscriptsOpen ? "Close transcripts" : "Open transcripts" |
| } |
| className="hover:bg-accent/50" |
| > |
| <ChevronRight |
| className={cn( |
| "h-4 w-4 transition-transform", |
| isTranscriptsOpen && "rotate-180" |
| )} |
| /> |
| </Button> |
| </div> |
| {isTranscriptsOpen && ( |
| <TranscriptsTab |
| selectedTranscript={selectedTranscript} |
| selectedTranscripts={selectedTranscripts} |
| /> |
| )} |
| </div> |
| </> |
| ); |
| } |
|
|
