MessageBubble

import { Avatar, MessageBubble } from "@nexera-ui/react";

export function Conversation() {
  const ayesha = <Avatar size="md" initials="AK" isDecorative />;
  return (
    <div role="log" aria-label="Conversation with Ayesha Khan" className="max-w-xl">
      <ul className="m-0 flex list-none flex-col gap-2 p-0">
        <li>
          <MessageBubble name="Ayesha Khan" avatar={ayesha} group="single" time="10:22">
            Hi Sara, can I take Friday off for a family event?
          </MessageBubble>
        </li>
        <li>
          <MessageBubble name="Ayesha Khan" avatar={ayesha} group="continued" time="10:23" isEdited>
            I can hand over the payroll check to Bilal.
          </MessageBubble>
        </li>
        <li>
          <MessageBubble
            name="You"
            direction="outgoing"
            type="reply"
            quoteAuthor="Ayesha Khan"
            quote="Hi Sara, can I take Friday off for a family event?"
            time="10:31"
            status="read"
          >
            Approved. Enjoy the long weekend.
          </MessageBubble>
        </li>
        <li>
          <MessageBubble
            name="You"
            direction="outgoing"
            type="file"
            fileName="Leave policy 2026.pdf"
            fileDetails="PDF · 860 KB"
            fileHref="#leave-policy"
            time="10:32"
            status="sent"
          >
            Here is the policy for reference.
          </MessageBubble>
        </li>
      </ul>
    </div>
  );
}

import { Avatar, MessageBubble } from "@nexera-ui/react";

const PHOTO =
  "data:image/svg+xml;utf8," +
  encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 170"><rect width="260" height="170" fill="#D1FAE5"/><circle cx="130" cy="70" r="32" fill="#047857"/><rect x="70" y="112" width="120" height="40" rx="20" fill="#047857"/></svg>',
  );

<MessageBubble
  name="Ayesha Khan"
  time="10:24"
  avatar={<Avatar size="md" initials="AK" isDecorative />}
  type="image"
  image={<img src={PHOTO} alt="Ayesha at the team offsite" />}
>
  From the offsite in Murree
</MessageBubble>;

import { Avatar, MessageBubble } from "@nexera-ui/react";

<div className="max-w-xs">
  <MessageBubble
    name="Ayesha Khan"
    time="10:24"
    avatar={<Avatar size="md" initials="AK" isDecorative />}
    isEdited
  >
    Could you check the attached contract? The link is
    https://intranet.example.com/hr/contracts/2026/ayesha-khan-employment-contract-final-v3.pdf and
    it expires on Friday.
  </MessageBubble>
</div>;

import { Avatar, MessageBubble } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <div className="flex max-w-xl flex-col gap-2">
      <MessageBubble
        name="عائشة خان"
        avatar={<Avatar size="md" initials="ع" isDecorative />}
        time="10:24"
      >
        مرحبا سارة، هل يمكنني أخذ إجازة يوم الجمعة؟
      </MessageBubble>
      <MessageBubble direction="outgoing" time="10:31" status="read" statusLabel="مقروءة">
        موافق. استمتعي بعطلة نهاية الأسبوع.
      </MessageBubble>
    </div>
  );
}