Added lesson modal with GPTa chat

components/ChatArea.tsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+export default function ChatArea() {
+  const [messages, setMessages] = useState([]);
+
+  return (
+    <div style={{ flex: 1, backgroundColor: "blue" }}>
+      <div style={{ flex: 1, backgroundColor: "grey", height: "79.7vh" }}>
+        ChatArea
+      </div>
+      <div style={{ flex: 1, backgroundColor: "pink", height: "7vh" }}>
+        TextArea
+      </div>
+    </div>
+  );
+}
+// height: "87%"

components/LessonsDialog.tsx

@@ -0,0 +1,54 @@
+import "react-pdf/dist/esm/Page/AnnotationLayer.css";
+import PdfViewer from "@/components/MyPDFViewer";
+import { DialogContent, DialogClose } from "@/components/ui/dialog";
+import ChatArea from "./ChatArea";
+import { useState } from "react";
+
+export function LessonsDialog({
+  lessonURL,
+  lessonName,
+  goToNextPdf,
+  goToPreviousPdf,
+  firstLesson,
+  lastLesson,
+}: {
+  lessonURL: string;
+  lessonName: string;
+  goToNextPdf: () => void;
+  goToPreviousPdf: () => void;
+  firstLesson: boolean;
+  lastLesson: boolean;
+}) {
+  const [chatVisible, setChatVisible] = useState(false);
+  const toggleChat = () => setChatVisible((prev) => !prev);
+
+  return (
+    <DialogContent className="w-auto max-w-[92%] max-h-[98%]">
+      <div className="flex items-center justify-start w-100">
+        <PdfViewer
+          file={lessonURL}
+          lessonName={lessonName}
+          firstLesson={firstLesson}
+          lastLesson={lastLesson}
+          goToNextPdf={goToNextPdf}
+          goToPreviousPdf={goToPreviousPdf}
+          toggleChat={toggleChat}
+        />
+        {chatVisible && (
+          <div
+            style={{
+              flex: 1,
+              width: "40vw",
+              paddingRight: "20px",
+              paddingTop: "28px",
+              height: "90vh",
+            }}
+          >
+            <ChatArea />
+          </div>
+        )}
+      </div>
+      <DialogClose asChild></DialogClose>
+    </DialogContent>
+  );
+}

components/MyPDFViewer.tsx

@@ -3,6 +3,7 @@ import { Document, Page, pdfjs } from "react-pdf";
 import "react-pdf/dist/esm/Page/AnnotationLayer.css";
 import "react-pdf/dist/Page/TextLayer.css";
 import { Button } from "./ui/button";
+import { Toggle } from "@/components/ui/toggle";
 
 // Set worker
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
@@ -15,9 +16,22 @@ and replace lessonName with file.name. that's all
 interface PdfViewerProps {
   file: string;
   lessonName: string;
+  firstLesson: boolean;
+  lastLesson: boolean;
+  goToNextPdf: () => void;
+  goToPreviousPdf: () => void;
+  toggleChat: () => void;
 }
 
-const PdfViewer: React.FC<PdfViewerProps> = ({ file, lessonName }) => {
+const PdfViewer: React.FC<PdfViewerProps> = ({
+  file,
+  lessonName,
+  firstLesson,
+  lastLesson,
+  goToNextPdf,
+  goToPreviousPdf,
+  toggleChat,
+}) => {
   const [numPages, setNumPages] = useState<number>(0);
   const [currentPage, setCurrentPage] = useState<number>(1); // Current page
   const [scale, setScale] = useState(1.0); // PDF scale
@@ -51,41 +65,59 @@ const PdfViewer: React.FC<PdfViewerProps> = ({ file, lessonName }) => {
   }, [numPages]);
 
   return (
-    <div className="flex flex-col items-center h-[100vh] w-[50vw]">
+    <div className="flex flex-col items-center h-[90vh] w-[50vw] justify-around">
       {/* Navigation and Zoom Controls */}
-      <div className="flex justify-between items-center space-x-2 mb-4 w-full">
+      <div className="flex justify-between items-center space-x-2">
+        <Button
+          onClick={goToPreviousPdf}
+          disabled={firstLesson}
+          className="max-h-6"
+        >
+          {"<"}
+        </Button>
+        <h2 className="flex-grow text-center">{lessonName}</h2>
+        <Button onClick={goToNextPdf} disabled={lastLesson} className="max-h-6">
+          {">"}
+        </Button>
         <div className="flex gap-2">
           <Button
-            onClick={() => scrollToPage(currentPage - 1)}
-            disabled={currentPage <= 1}
+            onClick={zoomIn}
+            className="bg-blue-300 hover:bg-blue-400 text-blue-800 max-h-5"
           >
-            Prev
+            +
           </Button>
           <Button
-            onClick={() => scrollToPage(currentPage + 1)}
-            disabled={currentPage >= numPages}
+            onClick={zoomOut}
+            className="bg-blue-300 hover:bg-blue-400 text-blue-800 max-h-5"
           >
-            Next
+            -
           </Button>
-        </div>
-        <h2 className="flex-grow text-center">{lessonName}</h2>
-        <div className="flex gap-2">
           <Button
-            onClick={zoomIn}
-            className="bg-blue-300 hover:bg-blue-400 text-blue-800"
+            onClick={() => scrollToPage(currentPage - 1)}
+            disabled={currentPage <= 1}
+            className="max-h-5"
           >
-            Zoom In
+            Prev
           </Button>
+          <span className="text-lg">
+            {currentPage} of {numPages}
+          </span>
           <Button
-            onClick={zoomOut}
-            className="bg-blue-300 hover:bg-blue-400 text-blue-800"
+            onClick={() => scrollToPage(currentPage + 1)}
+            disabled={currentPage >= numPages}
+            className="max-h-5"
           >
-            Zoom Out
+            Next
           </Button>
-          <span className="text-lg">
-            Page {currentPage} of {numPages}
-          </span>
         </div>
+        <Toggle
+          variant="outline"
+          aria-label="Toggle italic"
+          onClick={toggleChat}
+          className="max-h-6 bg-black text-white"
+        >
+          GPTa
+        </Toggle>
       </div>
 
       {/* Scrollable PDF Document */}

components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.0.3",
     "@react-pdf/renderer": "^3.1.14",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",