File size: 3,071 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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 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>
</>
);
}
|