103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Message } from "../types";
|
|
import { useContext, useEffect, useRef } from "react";
|
|
import GlobalContext from "@/contexts/GlobalContext";
|
|
import Markdown from "react-markdown";
|
|
import Mem00Logo from "../assets/mem0_logo.jpeg";
|
|
import UserLogo from "../assets/user.jpg";
|
|
|
|
const Messages = () => {
|
|
const { messages, thinking } = useContext(GlobalContext);
|
|
const scrollAreaRef = useRef<HTMLDivElement>(null);
|
|
|
|
// scroll to bottom
|
|
useEffect(() => {
|
|
if (scrollAreaRef.current) {
|
|
scrollAreaRef.current.scrollTop += 40; // Scroll down by 40 pixels
|
|
}
|
|
}, [messages, thinking]);
|
|
|
|
return (
|
|
<>
|
|
<ScrollArea ref={scrollAreaRef} className="flex-1 p-4 pr-10">
|
|
<div className="space-y-4">
|
|
{messages.map((message: Message) => (
|
|
<div
|
|
key={message.id}
|
|
className={`flex ${
|
|
message.sender === "user" ? "justify-end" : "justify-start"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`flex items-start space-x-2 max-w-[80%] ${
|
|
message.sender === "user"
|
|
? "flex-row-reverse space-x-reverse"
|
|
: "flex-row"
|
|
}`}
|
|
>
|
|
<div className="h-full flex flex-col items-center justify-end">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage
|
|
src={
|
|
message.sender === "assistant" ? Mem00Logo : UserLogo
|
|
}
|
|
/>
|
|
<AvatarFallback>
|
|
{message.sender === "assistant" ? "AI" : "U"}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
<div
|
|
className={`rounded-xl px-3 py-2 ${
|
|
message.sender === "user"
|
|
? "bg-blue-500 text-white rounded-br-none"
|
|
: "bg-muted text-muted-foreground rounded-bl-none"
|
|
}`}
|
|
>
|
|
{message.image && (
|
|
<div className="w-44 flex items-center justify-center overflow-hidden rounded-lg">
|
|
<img
|
|
src={message.image}
|
|
alt="Message attachment"
|
|
className="my-2 rounded-lg max-w-full h-auto w-44 mx-auto"
|
|
/>
|
|
</div>
|
|
)}
|
|
<Markdown>{message.content}</Markdown>
|
|
<span className="text-xs opacity-50 mt-1 block text-end relative bottom-1 -mb-2">
|
|
{message.timestamp}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{thinking && (
|
|
<div className={`flex justify-start`}>
|
|
<div
|
|
className={`flex items-start space-x-2 max-w-[80%] flex-row`}
|
|
>
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src={Mem00Logo} />
|
|
<AvatarFallback>{"AI"}</AvatarFallback>
|
|
</Avatar>
|
|
<div
|
|
className={`rounded-lg p-3 bg-muted text-muted-foreground`}
|
|
>
|
|
<div className="loader">
|
|
<div className="ball"></div>
|
|
<div className="ball"></div>
|
|
<div className="ball"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Messages;
|