made changes to chat

Author: safipatel

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

@@ -12,6 +12,8 @@ import {
   sendMessage,
 } from "@shared/lib/ragflow/chat/chat-client";
 import { toast } from "@shared/hooks/use-toast";
+import LogoComponent from "@/shared/components/Logo";
+import { SendIcon } from "lucide-react";
 
 interface MessageBoxProps {
   chatClient: ChatClientWithSession;
@@ -51,10 +53,11 @@ export default function MessageBox({ chatClient, messageHistory }: MessageBoxPro
   }
 
   return (
-    <div className="w-1/2 h-[600px] flex flex-col p-4 text-gray-800 dark:text-white border rounded shadow">
-      <h1 className="mb-4 text-2xl font-bold text-center">Chat</h1>
+    <div className="w-11/12 place-self-center h-[600px] flex flex-col p-4 text-gray-800 dark:text-white border rounded shadow">
+      <LogoComponent className={"place-self-center size-24 stroke-black stroke-[10px]"}/>
+      {/* doesn't seem like 400 px does much */}
       <div className="flex-1 h-[400px] overflow-auto">
-        <ChatMessageList>
+        <ChatMessageList smooth>
           {messages.map((msg, index) => (
             <ChatBubble
               key={index}
@@ -65,7 +68,7 @@ export default function MessageBox({ chatClient, messageHistory }: MessageBoxPro
               ) : (
                 <ChatBubbleAvatar fallback="Me" />
               )}
-              <ChatBubbleMessage variant={msg.role === "assistant" ? "received" : "sent"}>
+              <ChatBubbleMessage variant={msg.role === "assistant" ? "received" : "sent"} className="p-2">
                 {msg.content}
               </ChatBubbleMessage>
             </ChatBubble>
@@ -86,11 +89,11 @@ export default function MessageBox({ chatClient, messageHistory }: MessageBoxPro
         />
         <Button
           onClick={handleSend}
-          size="icon"
+          size="default"
 
           className="absolute right-2 top-1/2 -translate-y-1/2"
         >
-          Send
+          Send <SendIcon/>
         </Button>
       </div>
     </div>

app/classroom/[classroomId]/chat/page.tsx

@@ -9,7 +9,7 @@ import {
 } from "@shared/lib/ragflow/chat/chat-client";
 import { personalChatConfigTemplate } from "@shared/lib/ragflow/chat/chat-configs";
 import { Button } from "@shared/components/ui/button";
-import { Upload } from "lucide-react";
+import { SpeechIcon, Upload } from "lucide-react";
 
 export default async function ChatPage({
   params,
@@ -30,7 +30,7 @@ export default async function ChatPage({
   const { classroomId } = await params;
   const classroomIdNum = Number(classroomId);
   const user = userAndClassData.userData;
-  const username = user.user_metadata?.full_name ?? "User Name";
+  // const username = user.user_metadata?.full_name ?? "User Name";
 
   const classroomInfo = userAndClassData.classroomsData.find(
     (x) => x.id === classroomIdNum
@@ -150,7 +150,7 @@ export default async function ChatPage({
         <strong>Chat Assistant ID:</strong> {chatAssistantId} <br></br>
         <strong>Chat Session ID:</strong> {chatSessionId}
       </p> */}
-      <p>
+      {/* <p>
         <strong>Welcome to: </strong>
         {classroomInfo.name}, <strong>{username}</strong> <br />
         <strong>Ragflow Dataset ID:</strong> {datasetClient.client.datasetId}{" "}
@@ -159,7 +159,13 @@ export default async function ChatPage({
         <br />
         <strong>Chat Session ID:</strong>{" "}
         {(chatClient.client as ChatClientWithSession).sessionId}
-      </p>
+      </p> */}
+      <h2 className="text-3xl font-bold tracking-tight">
+        {classroomInfo.name}
+      </h2>
+      <h1 className="flex flex-row gap-4 text-2xl font-medium tracking-tight text-muted-foreground">
+        <SpeechIcon className="self-center mb-8" /> Personal Assistant
+      </h1>
 
       <MessageBox
         chatClient={chatClient.client as ChatClientWithSession}

shared/components/Logo.tsx

@@ -7,8 +7,7 @@ const LogoComponent = ({ className }: { className: string }) => (
     viewBox="0 0 892.69 723.06"
     className={className}
   >
-    <path d="m773.83 446.71-.12.12v-.12h.12zM382.15 419.42c-1.54 0-3.1-.17-4.64-.51-5.51-1.23-10.21-4.53-13.23-9.29l-27.94-43.98c-3.02-4.76-4.02-10.41-2.79-15.92 1.23-5.5 4.53-10.2 9.29-13.23l187.12-118.86c9.83-6.25 22.91-3.32 29.15 6.51l27.94 43.99a20.95 20.95 0 0 1 2.79 15.92c-1.23 5.5-4.53 10.2-9.29 13.23L393.43 416.14c-3.43 2.18-7.32 3.3-11.28 3.3Zm159.14-184.69c-.14 0-.27.04-.39.11L353.79 353.7c-.06.04-.25.16-.32.46-.07.29.06.48.1.54l27.94 43.99c.04.06.16.26.45.32.28.06.49-.06.55-.1l187.12-118.86c.06-.04.25-.16.32-.46.07-.29-.06-.48-.1-.54s-27.94-43.99-27.94-43.99a.733.733 0 0 0-.61-.34Z" />
-    <path d="M305.24 435.71c-6.62 0-12.81-3.33-16.5-9.13-4.46-7.03-4.09-15.84.96-22.46l46.56-61.07 16.22 12.36-45.35 59.49 73.12-15.77 6.55 20.29-77.31 15.83c-1.42.31-2.84.45-4.24.45Z" />
+ <path d="m 546 215 z M 382.15 419.42 c -1.54 0 -3.1 -0.17 -4.64 -0.51 c -5.51 -1.23 -10.21 -4.53 -13.23 -9.29 l -27.94 -43.98 c -3.02 -4.76 -4.02 -10.41 -2.79 -15.92 c 1.23 -5.5 4.53 -10.2 9.29 -13.23 l 187.12 -118.86 c 9.83 -6.25 22.91 -3.32 29.15 6.51 l 27.94 43.99 a 20.95 20.95 0 0 1 2.79 15.92 c -1.23 5.5 -4.53 10.2 -9.29 13.23 L 393.43 416.14 c -3.43 2.18 -7.32 3.3 -11.28 3.3 Z m 159.14 -184.69 c -0.14 0 -0.27 0.04 -0.39 0.11 L 353.79 353.7 c -0.06 0.04 -0.25 0.16 -0.32 0.46 c -0.07 0.29 0.06 0.48 0.1 0.54 l 27.94 43.99 c 0.04 0.06 0.16 0.26 0.45 0.32 c 0.28 0.06 0.49 -0.06 0.55 -0.1 l 187.12 -118.86 c 0.06 -0.04 0.25 -0.16 0.32 -0.46 c 0.07 -0.29 -0.06 -0.48 -0.1 -0.54 s -27.94 -43.99 -27.94 -43.99 a 0.733 0.733 0 0 0 -0.61 -0.34 Z"/>    <path d="M305.24 435.71c-6.62 0-12.81-3.33-16.5-9.13-4.46-7.03-4.09-15.84.96-22.46l46.56-61.07 16.22 12.36-45.35 59.49 73.12-15.77 6.55 20.29-77.31 15.83c-1.42.31-2.84.45-4.24.45Z" />
     <path d="M291.2 641.83h-.03c-10.97 0-20.65-6.94-25.27-18.08l-30.01-72.33h-45.94c-47.9 0-86.87-45.85-86.87-102.2V215.03c0-56.35 38.97-102.2 86.87-102.2h479.17c47.9 0 86.87 45.85 86.87 102.2H735.6c0-45.11-29.82-81.81-66.48-81.81H189.95c-36.66 0-66.48 36.7-66.48 81.81v234.19c0 45.11 29.82 81.81 66.48 81.81h59.56l35.23 84.91c1.42 3.44 3.84 5.5 6.46 5.5 2.63 0 5.06-2.06 6.5-5.51l35.22-84.9h120.61v20.39h-107l-30.01 72.33c-4.65 11.16-14.35 18.08-25.32 18.08Z" />
     <path d="M745.8 311.93c-27.28 0-49.48-22.2-49.48-49.48s22.2-49.48 49.48-49.48 49.48 22.2 49.48 49.48-22.2 49.48-49.48 49.48Zm0-78.57c-16.04 0-29.09 13.05-29.09 29.09s13.05 29.09 29.09 29.09 29.09-13.05 29.09-29.09-13.05-29.09-29.09-29.09ZM468.73 446.72h24.22v106.19h-24.22z" />
     <path d="M492.95 530.23h58.4v22.67h-58.4zM690.28 446.71v106.21h-24.22V476l-32.13 31.81h-11.95l-32.3-31.95v77.06h-24.22V446.71h24.22v.06l.09-.06 38.22 37.35 38.07-37.23.12-.12h24.1z" />

shared/components/ui/chat/chat-message-list.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { ArrowDown } from "lucide-react";
 import { Button } from "@shared/components/ui/button";
 import { useAutoScroll } from "@shared/components/ui/chat/hooks/useAutoScroll";
+import { ScrollArea } from "../scroll-area";
 
 interface ChatMessageListProps extends React.HTMLAttributes<HTMLDivElement> {
   smooth?: boolean;
@@ -24,15 +25,16 @@ const ChatMessageList = React.forwardRef<HTMLDivElement, ChatMessageListProps>(
 
     return (
       <div className="relative w-full h-full">
-        <div
+        <ScrollArea
           className={`flex flex-col w-full h-full p-4 overflow-y-auto ${className}`}
           ref={scrollRef}
           onWheel={disableAutoScroll}
           onTouchMove={disableAutoScroll}
           {...props}
+          dir="ltr"
         >
           <div className="flex flex-col gap-6">{children}</div>
-        </div>
+        </ScrollArea>
 
         {!isAtBottom && (
           <Button

shared/components/ui/sidebar/app-sidebar.tsx

@@ -43,7 +43,7 @@ import { Skeleton } from "../skeleton";
 import { useContext } from "react";
 import { UserContext } from "@shared/lib/userContext/userContext";
 import { ClassroomWithMembers } from "@shared/lib/userContext/contextFetcher";
-import LogoComponent from "@shared/components/Logo";
+import Logo from "@shared/components/Logo";
 
 // Menu items.
 // const items = [
@@ -191,7 +191,7 @@ export function AppSidebar() {
                 <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   {/* <div className="relative h-[90%] w-[90%] object-contain"> */}
                   {/* <Image src={"/logo.svg"} fill alt="Logo" className="fill-red-600"/> */}
-                  <LogoComponent className="fill-sidebar-primary-foreground" />
+                  <Logo className="fill-sidebar-primary-foreground" />
                   {/* </div> */}
                 </div>
                 <div className="grid flex-1 text-left text-lg leading-tight">