Docs
Chat Message

Chat Message

A customizable message bubble component for chat interfaces with support for user and AI messages.

Hello! What is your name?

Hello! I go by ChatGPT. How are you?

The ChatMessage component provides a styled message bubble with support for markdown content, timestamps, animations, and contextual actions.

Installation

npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat-message.json

Usage

import { ChatMessage } from "@/components/ui/chat-message"
 
export function ChatDemo() {
  return (
    <div className="space-y-4">
      <ChatMessage
        role="user"
        content="Hello, how are you?"
        createdAt={new Date()}
        showTimeStamp
      />
      <ChatMessage
        role="assistant"
        content="I'm doing well, thank you for asking!"
        createdAt={new Date()}
        showTimeStamp
      />
    </div>
  )
}

Props

PropTypeDefaultDescription
role"user" | "assistant" | stringRequiredThe role of the message sender
contentstringRequiredThe message content (supports markdown)
createdAtDate-Timestamp for the message
showTimeStampbooleanfalseWhether to show the timestamp
animation"none" | "slide" | "scale" | "fade""scale"Animation style for the message bubble
actionsReactNode-Actions to show on hover (assistant only)
idstringRequiredUnique identifier for the message
attachmentsFile[]-Array of attached files

Examples

Different Animation Styles

<ChatMessage
  role="user"
  content="Slide animation"
  animation="slide"
/>
 
<ChatMessage
  role="assistant"
  content="Scale animation"
  animation="scale"
/>
 
<ChatMessage
  role="user"
  content="Fade animation"
  animation="fade"
/>
 
<ChatMessage
  role="assistant"
  content="No animation"
  animation="none"
/>

With Actions

import { CopyButton } from "@/components/ui/copy-button"
 
;<ChatMessage
  role="assistant"
  content="This is a message with actions"
  actions={
    <CopyButton
      content="This is a message with actions"
      copyMessage="Copied response to clipboard!"
    />
  }
/>

With Timestamp

<ChatMessage
  role="user"
  content="Message with timestamp"
  createdAt={new Date()}
  showTimeStamp
/>

Styling

The component uses CSS variables for theming and can be customized using the following classes:

  • group/message: The message container
  • text-primary-foreground: User message text color
  • text-foreground: Assistant message text color
  • bg-primary: User message background
  • bg-muted: Assistant message background

Custom Styling

<ChatMessage
  role="user"
  content="Custom styled message"
  className="bg-blue-500 text-white"
/>

Accessibility

  • Messages are properly structured for screen readers
  • Timestamps use semantic HTML
  • Actions are keyboard accessible
  • Color contrast meets WCAG guidelines

Design Considerations

  1. Messages from different roles (user/assistant) are visually distinct through color and positioning
  2. Animations can be disabled for reduced motion preferences
  3. Actions are only shown on hover for a cleaner interface
  4. Markdown support allows for rich content formatting
  5. Timestamps are optional and format according to the user's locale
Message ListMarkdown Renderer