ChatMessage

PreviousNext

A single chat bubble that renders differently based on the sender — left-aligned for the assistant, right-aligned with a background for the user.

Hi. Ask me anything about Club Med. I'm here to help you find the right information quickly.

My son is 14 years old, and I would like to find activities for him during our stay. What do you suggest?

'use client';

import { ChatMessage } from '@/ui/ChatMessage';

export function ChatMessageDemo() {
  return (
    <div className="w-[380px] flex flex-col gap-4">
      <ChatMessage sender="assistant">
        Hi. Ask me anything about Club Med. I&apos;m here to help you find the right information
        quickly.
      </ChatMessage>
      <ChatMessage sender="user">
        My son is 14 years old, and I would like to find activities for him during our stay. What do
        you suggest?
      </ChatMessage>
    </div>
  );
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/chat-message.json

Usage

import { ChatMessage } from '@/ui/ChatMessage';
 
export function Component() {
  return (
    <>
      <ChatMessage sender="assistant">Hi. Ask me anything about Club Med.</ChatMessage>
      <ChatMessage sender="user">What activities are available for children?</ChatMessage>
    </>
  );
}

API Reference

ChatMessage

PropTypeDefaultDescription
sender"assistant" | "user"—Required. Determines alignment and styling
childrenReactNode—Message content
classNamestringundefinedAdditional CSS classes

Inherits all HTMLDivElement attributes.

Notes

  • Assistant messages are left-aligned with no background.
  • User messages are right-aligned with a pearl background pill.
  • Both use role="article" with a descriptive aria-label for screen reader support.
  • Used inside ChatWindow as part of the message list.