my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

my-project-public — gitlawb

#1	import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
#2	import { ScrollArea } from "@/components/ui/scroll-area";
#3	import { Message } from "../types";
#4	import { useContext, useEffect, useRef } from "react";
#5	import GlobalContext from "@/contexts/GlobalContext";
#6	import Markdown from "react-markdown";
#7	import Mem00Logo from "../assets/mem0_logo.jpeg";
#8	import UserLogo from "../assets/user.jpg";
#9
#10	const Messages = () => {
#11	const { messages, thinking } = useContext(GlobalContext);
#12	const scrollAreaRef = useRef<HTMLDivElement>(null);
#13
#14	// scroll to bottom
#15	useEffect(() => {
#16	if (scrollAreaRef.current) {
#17	scrollAreaRef.current.scrollTop += 40; // Scroll down by 40 pixels
#18	}
#19	}, [messages, thinking]);
#20
#21	return (
#22	<>
#23	<ScrollArea ref={scrollAreaRef} className="flex-1 p-4 pr-10">
#24	<div className="space-y-4">
#25	{messages.map((message: Message) => (
#26	<div
#27	key={message.id}
#28	className={`flex ${
#29	message.sender === "user" ? "justify-end" : "justify-start"
#30	}`}
#31	>
#32	<div
#33	className={`flex items-start space-x-2 max-w-[80%] ${
#34	message.sender === "user"
#35	? "flex-row-reverse space-x-reverse"
#36	: "flex-row"
#37	}`}
#38	>
#39	<div className="h-full flex flex-col items-center justify-end">
#40	<Avatar className="h-8 w-8">
#41	<AvatarImage
#42	src={
#43	message.sender === "assistant" ? Mem00Logo : UserLogo
#44	}
#45	/>
#46	<AvatarFallback>
#47	{message.sender === "assistant" ? "AI" : "U"}
#48	</AvatarFallback>
#49	</Avatar>
#50	</div>
#51	<div
#52	className={`rounded-xl px-3 py-2 ${
#53	message.sender === "user"
#54	? "bg-blue-500 text-white rounded-br-none"
#55	: "bg-muted text-muted-foreground rounded-bl-none"
#56	}`}
#57	>
#58	{message.image && (
#59	<div className="w-44 flex items-center justify-center overflow-hidden rounded-lg">
#60	<img
#61	src={message.image}
#62	alt="Message attachment"
#63	className="my-2 rounded-lg max-w-full h-auto w-44 mx-auto"
#64	/>
#65	</div>
#66	)}
#67	<Markdown>{message.content}</Markdown>
#68	<span className="text-xs opacity-50 mt-1 block text-end relative bottom-1 -mb-2">
#69	{message.timestamp}
#70	</span>
#71	</div>
#72	</div>
#73	</div>
#74	))}
#75	{thinking && (
#76	<div className={`flex justify-start`}>
#77	<div
#78	className={`flex items-start space-x-2 max-w-[80%] flex-row`}
#79	>
#80	<Avatar className="h-8 w-8">
#81	<AvatarImage src={Mem00Logo} />
#82	<AvatarFallback>{"AI"}</AvatarFallback>
#83	</Avatar>
#84	<div
#85	className={`rounded-lg p-3 bg-muted text-muted-foreground`}
#86	>
#87	<div className="loader">
#88	<div className="ball"></div>
#89	<div className="ball"></div>
#90	<div className="ball"></div>
#91	</div>
#92	</div>
#93	</div>
#94	</div>
#95	)}
#96	</div>
#97	</ScrollArea>
#98	</>
#99	);
#100	};
#101
#102	export default Messages;
#103

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public