Message

"use client";import { Message, MessageAvatar, MessageContent } from "@/components/ai-elements/elements/message";import { nanoid } from "nanoid";const messages: {  key: string;  from: "user" | "assistant";  content: string;  avatar: string;  name: string;}[] = [  {    key: nanoid(),    from: "user",    content: "Hello, how are you?",    avatar: "https://github.com/haydenbleasel.png",    name: "Hayden Bleasel",  },];const Example = () => (  <>    {messages.map(({ content, ...message }) => (      <Message from={message.from} key={message.key}>        <MessageContent>{content}</MessageContent>        <MessageAvatar name={message.name} src={message.avatar} />      </Message>    ))}  </>);export default Example;

"use client";import { Message, MessageAvatar, MessageContent } from "@/components/ai-elements/elements/message";import { Response } from "@/components/ai-elements/elements/response";import { useEffect, useState } from "react";const assistantMessageTokens = [  "To",  " get",  " the",  " **",  "weather",  " in",  " Tokyo",  "**",  " using",  " an",  " API",  " call",  ",",  " you",  " can",  " use",  " the",  " [",  "OpenWeatherMap",  "](",  "https://openweathermap.org/api",  ")",  " API",  ".",  " After",  " signing",  " up",  ",",  " you",  " can",  " make",  " a",  " request",  " to",  " their",  " API",  ":",  "\n\n",  "```",  "bash",  "\n",  "curl",  " -X",  " GET",  ' "https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=YOUR_API_KEY"',  " \\",  "\n",  "  --header",  ' "Content-Type:',  ' application/json"',  " \\",  "\n",  "  --header",  ' "Accept:',  ' application/json"',  "\n",  "```",  "\n\n",  "This",  " will",  " return",  " a",  " JSON",  " object",  " with",  " the",  " weather",  " data",  " for",  " Tokyo",  ".",];const Example = () => {  const [content, setContent] = useState("");  useEffect(() => {    let currentContent = "";    let index = 0;    const interval = setInterval(() => {      if (index < assistantMessageTokens.length) {        currentContent += assistantMessageTokens[index];        setContent(currentContent);        index++;      } else {        clearInterval(interval);      }    }, 100);    return () => clearInterval(interval);  }, []);  return (    <>      <Message from="user">        <MessageContent>          <Response>What is the weather in Tokyo?</Response>        </MessageContent>        <MessageAvatar          name="Hayden Bleasel"          src="https://github.com/haydenbleasel.png"        />      </Message>      <Message from="assistant">        <MessageContent>          <Response>{content}</Response>        </MessageContent>        <MessageAvatar name="OpenAI" src="https://github.com/openai.png" />      </Message>    </>  );};export default Example;

"use client";import { Message, MessageContent } from "@/components/ai-elements/elements/message";import { nanoid } from "nanoid";const messages: {  key: string;  from: "user" | "assistant";  content: string;  avatar: string;  name: string;}[] = [  {    key: nanoid(),    from: "user",    content: "Can you explain what the flat variant does?",    avatar: "https://github.com/haydenbleasel.png",    name: "Hayden Bleasel",  },  {    key: nanoid(),    from: "assistant",    content:      "The flat variant provides a minimalist design for messages. User messages appear with subtle secondary colors and borders, while assistant messages display full-width without background padding. This creates a cleaner, more modern conversation interface similar to ChatGPT and other contemporary AI assistants.",    avatar: "https://github.com/anthropics.png",    name: "Claude",  },  {    key: nanoid(),    from: "user",    content:      "That looks much cleaner! I like how it matches modern AI interfaces.",    avatar: "https://github.com/haydenbleasel.png",    name: "Hayden Bleasel",  },  {    key: nanoid(),    from: "assistant",    content:      "Exactly! The flat variant is perfect when you want a more streamlined appearance that puts focus on the conversation content rather than visual containers. It works especially well in full-width layouts and professional applications.",    avatar: "https://github.com/anthropics.png",    name: "Claude",  },];const Example = () => (  <div className="space-y-2">    {messages.map(({ content, ...message }) => (      <Message from={message.from} key={message.key}>        <MessageContent variant="flat">{content}</MessageContent>      </Message>    ))}  </div>);export default Example;