Merge branch 'main' into add-archive-and-misc

Author: safipatel

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

@@ -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",
           });

app/chatrooms/[chatroomId]/components/message-area.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 = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.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>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { createClient } from "@shared/utils/supabase/server";
+import { notFound } from "next/navigation";
+
+import AugmentComponent from "./AugmentNotes";
+
+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);
+    notFound();
+  }
+
+  return (
+    <>
+      <h1>Classroom: {data.name}</h1>
+      <AugmentComponent classroomId={classroomId} />
+    </>
+  );
+}

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

@@ -8,7 +8,6 @@ import {
 import { ChatMessageList } from "@shared/components/ui/chat/chat-message-list";
 import { ChatInput } from "@shared/components/ui/chat/chat-input";
 import { Button } from "@/shared/components/ui/button";
-
 import {
   ChatClientWithSession,
   RagFlowMessage,
@@ -36,8 +35,7 @@ export default function MessageBox({
   const [isLoading, setIsLoading] = useState(false);
 
   function cleanMessage(content: string): string {
-    // Remove any reference patterns like ##number$$
-    return content.replace(/##\d+\$\$/g, "").trim();
+    return content.replace(/\s##\d+\$\$/g, "").trim();
   }
 
   async function handleSend() {
@@ -66,17 +64,19 @@ export default function MessageBox({
   }
 
   return (
-    <div className="flex h-[600px] w-11/12 flex-col place-self-center rounded border p-4 text-gray-800 shadow dark:text-white">
+    <div className="flex h-[80vh] min-h-[400px] w-11/12 flex-col place-self-center rounded border p-4 text-gray-800 shadow dark:text-white max-[500px]:w-full">
       <Logo
-        className={"size-24 place-self-center stroke-black stroke-[10px]"}
+        className={
+          "size-[6vmin] h-fit min-w-10 place-self-center stroke-black stroke-[10px]"
+        }
       />
-      {/* doesn't seem like 400 px does much */}
-      <div className="h-[400px] flex-1 overflow-auto">
-        <ChatMessageList smooth>
+      <div className="flex-1 overflow-auto">
+        <ChatMessageList smooth className="max-[500px]:px-0">
           {messages.map((msg, index) => (
             <ChatBubble
               key={index}
               variant={msg.role === "assistant" ? "received" : "sent"}
+              className="max-w-[80%]"
             >
               {msg.role === "assistant" ? (
                 <ChatBubbleAvatar fallback="AI" />
@@ -99,18 +99,15 @@ export default function MessageBox({
           )}
         </ChatMessageList>
       </div>
-      <div className="relative mt-4">
+      <div className="flex w-full items-center justify-between gap-2 rounded-lg border bg-background p-1">
         <ChatInput
           value={value}
           onChange={(e) => setValue(e.target.value)}
           placeholder="Type your message..."
           onEnter={handleSend}
+          className="focus-visible:ringof min-h-10 resize-none border-0 bg-background shadow-none focus-visible:ring-0"
         />
-        <Button
-          onClick={handleSend}
-          size="default"
-          className="absolute right-2 top-1/2 -translate-y-1/2"
-        >
+        <Button onClick={handleSend} size="sm" className="ml-auto mr-3">
           Send <SendIcon />
         </Button>
       </div>

app/classrooms/[classroomId]/chat/MessageBox.tsx

@@ -139,7 +139,7 @@ export default async function ChatPage({
 
   // // console.log("chatAssistant", chatAssistant);
   return (
-    <div className="p-4">
+    <div className="p-4 max-[500px]:px-0">
       {/* <p>
         <strong>Classroom ID: </strong>
         {classroomId}

app/classrooms/[classroomId]/chat/page.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");

app/classrooms/[classroomId]/manage/_components/inviteMember.tsx

@@ -1,7 +1,9 @@
-import { isUserAdminForClassroom } from "./actions";
-import UploadComponent from "./uploadComponent";
+import { notFound } from "next/navigation";
 import { createClient } from "@shared/utils/supabase/server";
 
+import UploadComponent from "./uploadComponent";
+import { isUserAdminForClassroom } from "./actions";
+
 export default async function UploadPage({
   params,
 }: {
@@ -10,9 +12,7 @@ export default async function UploadPage({
   const { classroomId } = await params;
   const isAdmin = await isUserAdminForClassroom(Number(classroomId));
   if (!isAdmin) {
-    return (
-      <h1> Not the admin for this classroom! But change this to 404 page </h1>
-    );
+    notFound();
   }
 
   // #TODO: move this out to general supabase place
@@ -25,7 +25,7 @@ export default async function UploadPage({
 
   if (error || !data || !data.name) {
     console.error("Error fetching classroom or its name:", error);
-    return <h1> Insert 404 page here</h1>;
+    notFound();
   }
 
   return (

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

@@ -1,17 +1,42 @@
+import { downloadDocument } from "@/shared/lib/ragflow/dataset-client";
+import { notFound } from "next/navigation";
+
 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>
-  );
+  const { ragflowCallSuccess, content, mimeType, fileName } =
+    await downloadDocument(datasetId, documentId);
+
+  if (!ragflowCallSuccess) {
+    notFound();
+  }
+
+  console.log(`Rendering file: ${fileName}, with MIME type: ${mimeType}`);
+
+  if (mimeType === "application/octet-stream") {
+    // We fallback to rendering as text
+    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>
+    );
+  }
 }