Merge branch 'main' into DEVT-51-collaborative-chat-ui

Author: chenxin-yan

.vscode/settings.json

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

app/chatrooms/[chatroomId]/components/message-area.tsx

@@ -3,7 +3,6 @@
 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 { useContext, useEffect, useState } from "react";
@@ -20,6 +19,7 @@ import {
   ChatBubbleMessage,
 } from "@/shared/components/ui/chat/chat-bubble";
 import ReactMarkdown from "react-markdown";
+import { toast } from "sonner";
 
 interface Message extends Tables<"Messages"> {
   user_id: string;
@@ -198,9 +198,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("");
@@ -215,9 +213,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/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;
     }

…ssroom/[classroomId]/chat/MessageBox.tsx …srooms/[classroomId]/chat/MessageBox.tsxapp/classroom/[classroomId]/chat/MessageBox.tsx renamed to app/classrooms/[classroomId]/chat/MessageBox.tsx app/classroom/[classroomId]/chat/MessageBox.tsx renamed to app/classrooms/[classroomId]/chat/MessageBox.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/classroom/[classroomId]/chat/page.tsx …p/classrooms/[classroomId]/chat/page.tsxapp/classroom/[classroomId]/chat/page.tsx renamed to app/classrooms/[classroomId]/chat/page.tsx app/classroom/[classroomId]/chat/page.tsx renamed to app/classrooms/[classroomId]/chat/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");

…mId]/manage/_components/inviteMember.tsx …mId]/manage/_components/inviteMember.tsxapp/classroom/[classroomId]/manage/_components/inviteMember.tsx renamed to app/classrooms/[classroomId]/manage/_components/inviteMember.tsx app/classroom/[classroomId]/manage/_components/inviteMember.tsx renamed to app/classrooms/[classroomId]/manage/_components/inviteMember.tsx

@@ -18,7 +18,6 @@ import {
   UserWithClassroomsData,
 } from "@shared/lib/userContext/contextFetcher";
 import { useRouter } from "next/navigation";
-import { toast } from "@shared/hooks/use-toast";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -34,9 +33,10 @@ import { Dispatch, SetStateAction, useTransition } from "react";
 import { User } from "@supabase/supabase-js";
 import SaveClassroomDialog from "../../_components/saveClassroomDialog";
 import { Skeleton } from "@shared/components/ui/skeleton";
-import MemberList from "../../memberList";
+import MemberList from "../../_components/memberList";
 import InviteMember from "./_components/inviteMember";
 import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
 
 export default function ClassroomManagementButtons({
   userData,
@@ -76,13 +76,11 @@ export default function ClassroomManagementButtons({
   };
 
   const deleteClassroomFunction = async () => {
-    router.push(`/classroom`);
+    router.push(`/classrooms`);
     startTransition(async () => {
       await deleteClassroom(classroomData.id);
     });
-    toast({
-      title: "Successfully deleted classroom",
-    });
+    toast.success("Successfully deleted classroom");
     // const confirmation = window.confirm(
     //   "Are you sure? This action can't be undone."
     // );
@@ -107,10 +105,8 @@ export default function ClassroomManagementButtons({
     //   refreshClassrooms
     // );
     setArchiveStatusClassroom(classroomData.id, true);
-    toast({
-      title: "Successfully archived classroom",
-    });
-    router.push(`/classroom`);
+    toast.success("Successfully archived classroom");
+    router.push(`/classrooms`);
     // router.push(`/classroom?archive_success=${classroomData.id.toString()}`);
     refreshClassrooms();
   };

…assroom/[classroomId]/manage/buttons.tsx …ssrooms/[classroomId]/manage/buttons.tsxapp/classroom/[classroomId]/manage/buttons.tsx renamed to app/classrooms/[classroomId]/manage/buttons.tsx app/classroom/[classroomId]/manage/buttons.tsx renamed to app/classrooms/[classroomId]/manage/buttons.tsx

@@ -70,7 +70,7 @@ export default function ClassroomManagementPage() {
         setUserAndClassCallback={setUserAndClassData}
         userData={userAndClassData.userData}
       />
-      <Link href={`/classroom`} passHref>
+      <Link href={`/classrooms`} passHref>
         <button
           type="button"
           className="me-2 rounded-lg border border-green-700 px-5 py-2.5 text-center text-sm font-medium text-green-700 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"