Upload preview page + augment notes button

xl4624 · xl4624 · commit 71ecbcf5e3fa · 2025-04-13T19:37:34.000-04:00
diff --git a/app/api/document/[datasetId]/[documentId]/route.ts b/app/api/document/[datasetId]/[documentId]/route.ts
diff --git a/app/chatrooms/[chatroomId]/components/message-area.tsx b/app/chatrooms/[chatroomId]/components/message-area.tsx
@@ -198,7 +198,7 @@ const MessageArea = ({
       const askResult = await askLLM(classroomInfo, chatroomId, chatClient);
       if (!askResult.clientCreationSuccess) {
         if (!askResult.failedBecauseEmptyDataset) {
-          // TODO: ask result has more detailed error differntiations if we want to tell the user
+          // TODO: ask result has more detailed error differentiations if we want to tell the user
           toast.error("Error sending communicating with LLM", {
             description: "Please refresh and try again",
           });
diff --git a/app/classrooms/[classroomId]/augment/AugmentNotes.tsx b/app/classrooms/[classroomId]/augment/AugmentNotes.tsx
@@ -0,0 +1,83 @@
+"use client";
+import { useState, useRef } from "react";
+
+import { Button } from "@shared/components/ui/button";
+import { Input } from "@shared/components/ui/input";
+
+import { FileText, Upload } from "lucide-react";
+import { toast } from "sonner";
+
+export default function AugmentComponent({
+  // TODO: remove for classroomId and setIsProcessing once we actually implement augments
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  classroomId,
+}: {
+  classroomId: string;
+}) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [file, setFile] = useState<File | null>(null);
+  const inputFile = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = event.target.files?.[0];
+    if (!selectedFile) return;
+
+    // Double-check that file passed by user is markdown or pdf
+    const fileExtension = selectedFile.name.split(".").at(-1)?.toLowerCase();
+    if (fileExtension !== "pdf" && fileExtension !== "md") {
+      toast.error("Invalid file format", {
+        description: "Please upload a Markdown (.md) or PDF (.pdf) file",
+      });
+      return;
+    }
+
+    setFile(selectedFile);
+  };
+
+  const handleUpload = async () => {
+    // TODO
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 p-8">
+      <h1 className="text-3xl font-bold">Augment Notes</h1>
+      <p className="text-muted-foreground">
+        Upload your notes to get AI-powered enhancements and improvements
+      </p>
+      <div className="flex items-center gap-2">
+        <Input
+          type="file"
+          onChange={handleFileChange}
+          ref={inputFile}
+          className="hidden"
+          accept=".md,.pdf"
+        />
+        <Button
+          variant="outline"
+          size="lg"
+          className="cursor-pointer"
+          disabled={isProcessing}
+          onClick={() => inputFile.current?.click()}
+        >
+          {isProcessing ? (
+            <Upload className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <FileText className="mr-2 h-4 w-4" />
+          )}
+          Upload Notes
+        </Button>
+        {file && (
+          <Button
+            variant="default"
+            size="lg"
+            onClick={handleUpload}
+            disabled={isProcessing}
+          >
+            Process Notes
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/classrooms/[classroomId]/augment/page.tsx b/app/classrooms/[classroomId]/augment/page.tsx
@@ -0,0 +1,29 @@
+import AugmentComponent from "./AugmentNotes";
+import { createClient } from "@shared/utils/supabase/server";
+
+export default async function UploadPage({
+  params,
+}: {
+  params: Promise<{ classroomId: string }>;
+}) {
+  const { classroomId } = await params;
+
+  const supabase = await createClient();
+  const { data, error } = await supabase
+    .from("Classrooms")
+    .select("name")
+    .eq("id", Number(classroomId))
+    .single();
+
+  if (error || !data || !data.name) {
+    console.error("Error fetching classroom or its name:", error);
+    return <></>;
+  }
+
+  return (
+    <>
+      <h1>Classroom: {data.name}</h1>
+      <AugmentComponent classroomId={classroomId} />
+    </>
+  );
+}
diff --git a/app/classrooms/[classroomId]/manage/_components/inviteMember.tsx b/app/classrooms/[classroomId]/manage/_components/inviteMember.tsx
@@ -15,10 +15,7 @@ export default function InviteMember({ classroomId }: { classroomId: number }) {
     } catch (error: unknown) {
       //type unknown for typescript lint
       if (error instanceof Error) {
-        toast.error(
-          "The user is already part of the classroom."
-          // description: { email } + "was added to the class.",
-        );
+        toast.error("The user is already part of the classroom.");
         // console.error(error.message);
       } else {
         console.error("Error Occured");
diff --git a/app/classrooms/[classroomId]/upload/preview/page.tsx b/app/classrooms/[classroomId]/upload/preview/page.tsx
@@ -1,17 +1,54 @@
+import {
+  createDatasetClient,
+  downloadDocument,
+} from "@/shared/lib/ragflow/dataset-client";
+
 export default async function PreviewPage({
   searchParams,
 }: {
   searchParams: Promise<{ documentId: string; datasetId: string }>;
 }) {
   const { documentId, datasetId } = await searchParams;
 
-  return (
-    <div className="h-screen w-screen">
-      <embed
-        src={`/api/document/${datasetId}/${documentId}`}
-        width="100%"
-        height="100%"
-      />
-    </div>
+  // Create a temporary client to access the dataset
+  const datasetClientResult = await createDatasetClient(
+    {
+      classroomId: "0", // We don't actually need a real classroom ID for preview
+      classroomName: "preview",
+    },
+    datasetId
   );
+
+  if (!datasetClientResult) {
+    return <>Unable to access document. Please try refreshing.</>;
+  }
+
+  const { content, mimeType, fileName } = await downloadDocument(
+    datasetClientResult.client,
+    documentId
+  );
+  console.log(`Rendering file: ${fileName}, with MIME type: ${mimeType}`);
+
+  if (mimeType === "application/octet-stream") {
+    // For text content, decode the ArrayBuffer using TextDecoder
+    const text = new TextDecoder().decode(new Uint8Array(content));
+    return (
+      <div className="mx-auto h-screen w-4/5">
+        <pre className="overflow-auto whitespace-pre-wrap p-4">{text}</pre>
+      </div>
+    );
+  } else {
+    // Convert binary content to base64 for embedding non-text file types
+    // Allows us to render PDFs, images and other binary formats directly in the browser
+    const base64Content = Buffer.from(content).toString("base64");
+    return (
+      <div className="mx-auto h-screen w-4/5">
+        <embed
+          src={`data:${mimeType};base64,${base64Content}`}
+          width="100%"
+          height="100%"
+        />
+      </div>
+    );
+  }
 }
diff --git a/app/classrooms/[classroomId]/upload/uploadComponent.tsx b/app/classrooms/[classroomId]/upload/uploadComponent.tsx
@@ -46,7 +46,7 @@ export default function UploadComponent({
   const inputFile = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    async function fetchFiles() {
+    const fetchFiles = async () => {
       let clientToUse = datasetClient;
       if (!clientToUse) {
         const result = await createDatasetClient({
@@ -66,20 +66,19 @@ export default function UploadComponent({
         return;
       }
       setUploadedFiles(retrieveResult.files);
-    }
+    };
 
     fetchFiles();
-    const interval = setInterval(fetchFiles, 5000);
+    const interval = setInterval(fetchFiles, 10000);
     return () => clearInterval(interval);
   }, [classroomId, classroomName, datasetClient]);
 
-  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files.length > 0) {
-      setFile(e.target.files[0]);
-    }
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = event.target.files?.[0];
+    if (selectedFile) setFile(selectedFile);
   };
 
-  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!file) return;
 
@@ -128,7 +127,7 @@ export default function UploadComponent({
     } else if (toastError) {
       (toastError as unknown as (value: unknown) => void)(null);
     }
-  }
+  };
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center p-6">
diff --git a/app/classrooms/page.tsx b/app/classrooms/page.tsx
@@ -26,7 +26,14 @@ import {
 } from "./clientUtils";
 
 import { useSearchParams } from "next/navigation";
-import { Edit, LogOut, MessageSquareMore, UserPlus, Users } from "lucide-react";
+import {
+  Edit,
+  LogOut,
+  MessageSquareMore,
+  UserPlus,
+  Users,
+  FileText,
+} from "lucide-react";
 import { Button } from "@shared/components/ui/button";
 import SaveClassroomDialog from "./_components/saveClassroomDialog";
 import { toast } from "sonner";
@@ -367,6 +374,17 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
                   userId={userId}
                 />
               )}
+
+            <TooltipUtil
+              trigger={
+                <Button type="button" variant={"ghost"} size={"iconLg"} asChild>
+                  <Link href={`/classrooms/${classroom.id}/augment`} passHref>
+                    <FileText className="scale-[200%]" />
+                  </Link>
+                </Button>
+              }
+              content={"Augment Notes"}
+            />
           </div>
           {!isAdmin && (
             <TooltipUtil
diff --git a/shared/lib/ragflow/dataset-client.ts b/shared/lib/ragflow/dataset-client.ts
