Message

Displays a chat message with avatar and content.

Assistant

Here's a summary of the pull request you asked for.

You

Thanks, that looks great!

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/message.json

Usage

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Bubble, BubbleContent } from "@/components/ui/bubble";
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageHeader,
} from "@/components/ui/message";

<div className="flex w-full max-w-md flex-col gap-6">
  <Message>
    <MessageAvatar>
      <Avatar size="sm">
        <AvatarFallback>AI</AvatarFallback>
      </Avatar>
    </MessageAvatar>
    <MessageContent>
      <MessageHeader>Assistant</MessageHeader>
      <Bubble variant="secondary">
        <BubbleContent>
          Here's a summary of the pull request you asked for.
        </BubbleContent>
      </Bubble>
    </MessageContent>
  </Message>
  <Message align="end">
    <MessageAvatar>
      <Avatar size="sm">
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    </MessageAvatar>
    <MessageContent>
      <MessageHeader>You</MessageHeader>
      <Bubble>
        <BubbleContent>Thanks, that looks great!</BubbleContent>
      </Bubble>
    </MessageContent>
  </Message>
</div>