Added chat toggle to lesson

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

@@ -1,10 +1,8 @@
 import "react-pdf/dist/esm/Page/AnnotationLayer.css";
 import PdfViewer from "@/components/MyPDFViewer";
-import {
-  DialogContent,
-  DialogFooter,
-  DialogClose,
-} from "@/components/ui/dialog";
+import { DialogContent, DialogClose } from "@/components/ui/dialog";
+import ChatArea from "./ChatArea";
+import { useState } from "react";
 
 export function LessonsDialog({
   lessonURL,
@@ -21,8 +19,11 @@ export function LessonsDialog({
   firstLesson: boolean;
   lastLesson: boolean;
 }) {
+  const [chatVisible, setChatVisible] = useState(false);
+  const toggleChat = () => setChatVisible((prev) => !prev);
+
   return (
-    <DialogContent className="max-w-[60%] max-h-[98%]">
+    <DialogContent className="w-auto max-w-[92%] max-h-[98%]">
       <div className="flex items-center justify-start w-100">
         <PdfViewer
           file={lessonURL}
@@ -31,15 +32,23 @@ export function LessonsDialog({
           lastLesson={lastLesson}
           goToNextPdf={goToNextPdf}
           goToPreviousPdf={goToPreviousPdf}
-          /*TODO*/
-          /* when lessonList replace with File[] */
-          //   file={${lessonList[currentPdfIndex]}}
-          //   lessonName={lessonList[currentPdfIndex].name}
+          toggleChat={toggleChat}
         />
+        {chatVisible && (
+          <div
+            style={{
+              flex: 1,
+              width: "40vw",
+              paddingRight: "20px",
+              paddingTop: "28px",
+              height: "90vh",
+            }}
+          >
+            <ChatArea />
+          </div>
+        )}
       </div>
-      <DialogClose asChild>
-        <DialogFooter>footer</DialogFooter>
-      </DialogClose>
+      <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`;
@@ -19,6 +20,7 @@ interface PdfViewerProps {
   lastLesson: boolean;
   goToNextPdf: () => void;
   goToPreviousPdf: () => void;
+  toggleChat: () => void;
 }
 
 const PdfViewer: React.FC<PdfViewerProps> = ({
@@ -28,6 +30,7 @@ const PdfViewer: React.FC<PdfViewerProps> = ({
   lastLesson,
   goToNextPdf,
   goToPreviousPdf,
+  toggleChat,
 }) => {
   const [numPages, setNumPages] = useState<number>(0);
   const [currentPage, setCurrentPage] = useState<number>(1); // Current page
@@ -62,7 +65,7 @@ const PdfViewer: React.FC<PdfViewerProps> = ({
   }, [numPages]);
 
   return (
-    <div className="flex flex-col items-center h-[100vh] w-[50vw] justify-around">
+    <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">
         <Button
@@ -107,6 +110,14 @@ const PdfViewer: React.FC<PdfViewerProps> = ({
             Next
           </Button>
         </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",