Examples: Add multimodal app (#2328)

examples/multimodal-demo/src/components/messages.tsx

@@ -0,0 +1,102 @@
+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;