Upload preview page + augment notes button

xl4624 · xl4624 · commit 9c7f185f671b · 2025-04-12T20:48:28.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/classrooms/[classroomId]/augment/component.tsx b/app/classrooms/[classroomId]/augment/component.tsx
@@ -0,0 +1,86 @@
+"use client";
+import { useState, useRef } from "react";
+
+import { Button } from "@shared/components/ui/button";
+import { toast } from "sonner";
+import { Input } from "@shared/components/ui/input";
+
+import { FileText, Upload } from "lucide-react";
+
+export default function AugmentComponent({
+  // TODO: remove when actually implementing augments
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  classroomId,
+}: {
+  classroomId: string;
+}) {
+  // TODO: remove when actually implementing augments
+  // 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;
+
+    // Check if file is markdown or pdf
+    if (
+      !selectedFile.name.endsWith(".md") &&
+      !selectedFile.name.endsWith(".pdf")
+    ) {
+      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 "./component";
+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 <h1> Insert 404 page here</h1>;
+  }
+
+  return (
+    <>
+      <h1>Classroom: {data.name}</h1>
+      <AugmentComponent classroomId={classroomId} />
+    </>
+  );
+}
diff --git a/app/classrooms/[classroomId]/upload/preview/page.tsx b/app/classrooms/[classroomId]/upload/preview/page.tsx
@@ -1,17 +1,53 @@
+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 need a real classroom ID for preview
+      classroomName: "preview",
+    },
+    datasetId
   );
+
+  if (!datasetClientResult) {
+    console.error("createDatasetClient() failed");
+    return <div>Error loading document</div>;
+  }
+
+  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 {
+    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,21 @@ export default function UploadComponent({
         return;
       }
       setUploadedFiles(retrieveResult.files);
-    }
+    };
 
     fetchFiles();
     const interval = setInterval(fetchFiles, 5000);
     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) return;
+
+    setFile(selectedFile);
   };
 
-  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!file) return;
 
@@ -128,7 +129,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
@@ -11,7 +11,7 @@ import {
   UserContext,
   UserContextType,
 } from "@shared/lib/userContext/userContext";
-import { Skeleton } from "@shared/components/ui/skeleton";
+import { Button } from "@shared/components/ui/button";
 import {
   Card,
   CardContent,
@@ -332,7 +332,7 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
                     variant={"ghost"}
                     size={"iconLg"}
                     asChild
-                    // className="me-2 rounded-lg border px-5 py-2.5 text-center text-sm font-medium hover:bg-green-800 hover:text-white focus:outline-none focus:ring-4 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:bg-green-600 dark:hover:text-white dark:focus:ring-green-900"
+                  // className="me-2 rounded-lg border px-5 py-2.5 text-center text-sm font-medium hover:bg-green-800 hover:text-white focus:outline-none focus:ring-4 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:bg-green-600 dark:hover:text-white dark:focus:ring-green-900"
                   >
                     <Link href={`/classrooms/${classroom.id}/manage`} passHref>
                       <Edit className="scale-[200%]" />
@@ -367,6 +367,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
