Chat Message

1
2
3import type { ReactNode } from 'react';

import { ChatMessage, ChatMessageAccent } from '@/registry/bases/base-ui/components/data-display/chat-message';

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/chat-message.json

Usage#

import { ChatMessage, ChatMessageAccent } from '@/components/data-display/chat-message';

The consumer composes the row from upstream Message parts, and adds a ChatMessageAccent while the row streams:

<ChatMessage streaming style={{ '--chat-message-accent': agent.color } as CSSProperties}>
  <ChatMessageAccent />
  <MessageContent>
    <MessageHeader>{agent.name}</MessageHeader>
    <Bubble variant="ghost">
      <BubbleContent>{text}</BubbleContent>
    </Bubble>
  </MessageContent>
</ChatMessage>

Use it to mark a row as still streaming; a static row needs only upstream Message.

Composition#

ChatMessage
|-- ChatMessageAccent
`-- MessageContent
    |-- MessageHeader
    `-- Bubble
        `-- BubbleContent

API reference#

ChatMessage#

Renders shadcn's Message and takes every prop it takes, plus:

It sets data-slot="chat-message" and data-streaming while streaming.

ChatMessageAccent#

Renders a span and takes every prop a span takes. It is hidden from assistive technology, shown only while its row streams, and painted in --chat-message-accent (any CSS colour set on the row, such as the agent's), or --primary when that is unset. It sets data-slot="chat-message-accent" and aria-hidden.