18Switch language to English

Chat Primitives

السابقالتالي

Message, bubble, attachment and marker primitives for conversational interfaces.

import { ChatPrimitivesPreview } from "@/components/atom/chat-primitives-preview"

export default function ChatPrimitivesDemo() {
  return (
    <>
      <ChatPrimitivesPreview />
    </>
  )
}

Installation

pnpm dlx shadcn@latest add @codebase/message bubble attachment marker message-scroller

Usage

import { Message, MessageAvatar, MessageContent, MessageGroup } from "@/components/ui/message"
import { Bubble, BubbleContent, BubbleGroup } from "@/components/ui/bubble"
import { Attachment, AttachmentContent, AttachmentMedia, AttachmentTitle } from "@/components/ui/attachment"
import { Marker, MarkerContent } from "@/components/ui/marker"
<MessageGroup>
  <Message>
    <MessageAvatar>AI</MessageAvatar>
    <MessageContent>Hello!</MessageContent>
  </Message>
  <Message align="end">
    <MessageContent>Hi there.</MessageContent>
  </Message>
</MessageGroup>

Five primitives compose the chat surface: Message rows with avatars and footers, Bubble for short grouped exchanges, Attachment for files and media, Marker for date separators and annotations, and MessageScroller for an auto-following viewport during streaming. All of them align with logical properties, so align="end" lands on the correct side in Arabic.