Upload preview page + augment notes button

Author: xl4624

.vscode/settings.json

@@ -4,6 +4,7 @@
     "Chatrooms",
     "pipelinerun",
     "Ragflow",
+    "Sonner",
     "supabase",
     "taskrun",
     "tekton",

app/api/document/[datasetId]/[documentId]/route.ts

@@ -3,14 +3,14 @@
 import { ChatClientWithSession } from "@shared/lib/ragflow/chat/chat-client";
 import { UserContext } from "@shared/lib/userContext/userContext";
 import { Skeleton } from "@shared/components/ui/skeleton";
-import { toast } from "@shared/hooks/use-toast";
 import { createClient } from "@shared/utils/supabase/client";
 import { Database, Tables } from "@shared/utils/supabase/database.types";
 // import { revalidatePath } from "next/cache";
 import Image from "next/image";
 import { useContext, useEffect, useState } from "react";
 import { askLLM } from "../../actions";
 import { createBrowserClient } from "@supabase/ssr";
+import { toast } from "sonner";
 
 interface Message extends Tables<"Messages"> {
   user_id: string;
@@ -186,9 +186,7 @@ const MessageArea = ({
       },
     ]);
     if (messageError) {
-      toast({
-        variant: "destructive",
-        title: "Error sending message to chatroom",
+      toast.error("Error sending message to chatroom", {
         description: "Please refresh and try again",
       });
       setMessageBoxValue("");
@@ -201,9 +199,7 @@ const MessageArea = ({
       if (!askResult.clientCreationSuccess) {
         if (!askResult.failedBecauseEmptyDataset) {
           // TODO: ask result has more detailed error differntiations if we want to tell the user
-          toast({
-            variant: "destructive",
-            title: "Error sending communicating with LLM",
+          toast.error("Error sending communicating with LLM", {
             description: "Please refresh and try again",
           });
           setChatClient(null); // In case client is bad, clear it out

app/chatrooms/[chatroomId]/components/message-area.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>
+  );
+}

app/classroom/[classroomId]/upload/preview/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} />
+    </>
+  );
+}

app/classroom/page.tsx

@@ -15,7 +15,7 @@ import {
   RagFlowMessages,
   sendMessage,
 } from "@shared/lib/ragflow/chat/chat-client";
-import { toast } from "@shared/hooks/use-toast";
+import { toast } from "sonner";
 import Logo from "@/shared/components/Logo";
 import { SendIcon } from "lucide-react";
 import ReactMarkdown from "react-markdown";
@@ -51,11 +51,9 @@ export default function MessageBox({
     setIsLoading(false);
 
     if (!response.ragflowCallSuccess) {
-      toast({
-        title: "Error sending message",
-        description: "Please try refreshing the page",
+      toast.error("Error sending message", {
+        description: `Please try refreshing the page`,
         duration: 10000,
-        variant: "destructive",
       });
       return;
     }
@@ -106,6 +104,7 @@ export default function MessageBox({
           value={value}
           onChange={(e) => setValue(e.target.value)}
           placeholder="Type your message..."
+          onEnter={handleSend}
         />
         <Button
           onClick={handleSend}

app/classrooms/[classroomId]/augment/component.tsx

@@ -139,7 +139,7 @@ export default async function ChatPage({
 
   // // console.log("chatAssistant", chatAssistant);
   return (
-    <div className="p-4 text-gray-800 dark:text-white">
+    <div className="p-4">
       {/* <p>
         <strong>Classroom ID: </strong>
         {classroomId}

app/classrooms/[classroomId]/augment/page.tsx

@@ -1,26 +1,24 @@
 "use client";
 import { useState } from "react";
 import { inviteMemberToClassroom } from "../../../actions";
-import { toast } from "@shared/hooks/use-toast";
+import { toast } from "sonner";
 
 export default function InviteMember({ classroomId }: { classroomId: number }) {
   const [email, setEmail] = useState("");
   const handleInvite = async () => {
     try {
       await inviteMemberToClassroom(email, classroomId);
       setEmail("");
-      toast({
-        title: "Added Member Successfully",
+      toast.success("Added Member Successfully", {
         description: `${email} was added to the class.`,
       });
     } catch (error: unknown) {
       //type unknown for typescript lint
       if (error instanceof Error) {
-        toast({
-          variant: "destructive",
-          title: "The user is already part of the classroom.",
+        toast.error(
+          "The user is already part of the classroom."
           // description: { email } + "was added to the class.",
-        });
+        );
         // console.error(error.message);
       } else {
         console.error("Error Occured");