Message

import { Avatar } from "@/components/vip-ui/avatar";import { Message } from "@/components/vip-ui/message";export function MessageBasicDemo() {  return (    <div className="grid w-full max-w-lg gap-3">      <Message        sender="Maya"        avatar={<Avatar name="Maya" size="sm" />}        timestamp="10:24 AM"        dateTime="2026-10-03T10:24:00"      >        Could you share the latest project brief?      </Message>      <Message        sender="You"        side="outgoing"        timestamp="10:26 AM"        dateTime="2026-10-03T10:26:00"        status="Sent"      >        I have it here. I will send it with the updated notes.      </Message>    </div>  );}

"use client";import { Avatar } from "@/components/vip-ui/avatar";import { CopyButton } from "@/components/vip-ui/copy-button";import { Message } from "@/components/vip-ui/message";type Entry = {  id: string;  sender: string;  text: string;  side: "incoming" | "outgoing" | "system";};const entries: Entry[] = [  {    id: "joined",    sender: "Workspace",    text: "Maya Chen joined the conversation.",    side: "system",  },  {    id: "question",    sender: "Maya",    text: "Can you check the release notes before Friday?",    side: "incoming",  },  {    id: "answer",    sender: "You",    text: "Yes. I will send the corrections here.",    side: "outgoing",  },];export function MessageDemo() {  return (    <div className="grid w-full max-w-lg gap-3">      {entries.map((entry) => (        <Message          key={entry.id}          sender={entry.sender}          side={entry.side}          avatar={            entry.side === "incoming" ? (              <Avatar name={entry.sender} size="sm" />            ) : undefined          }          status={entry.side === "outgoing" ? "Sent" : undefined}          actions={            entry.side === "system" ? undefined : (              <CopyButton                value={entry.text}                aria-label={                  entry.side === "outgoing"                    ? "Copy your message"                    : `Copy message from ${entry.sender}`                }                variant="ghost"                iconOnly              />            )          }        >          {entry.text}        </Message>      ))}    </div>  );}