ChatMessage

When to useLink to "When to use"

• Assistant chats: a conversation between a person and an assistant, in a side panel or a page.

Use something else when: the message is a system notice in the thread (rate limits, a lost connection): use a Notice; or it is a comment thread between people with names and times: build it from Avatar and Text.

UsageLink to "Usage"

import { Avatar, ChatMessage, CopyButton, IconButton, Prose } from "@arshad-shah/cynosure";

<ChatMessage role="user">{question}</ChatMessage>
<ChatMessage
  role="assistant"
  avatar={<Avatar name="Assistant" icon={sparkles} size="sm" decorative />}
  streaming={isStreaming}
  actions={
    <>
      <CopyButton value={answer} size="sm" />
      <IconButton icon={retry} label="Retry" size="sm" variant="ghost" onClick={retryLast} />
    </>
  }
>
  <Prose size="sm">{renderMarkdown(answer)}</Prose>
</ChatMessage>

The person's messages keep their line breaks. Make the avatar decorative: each message is already named by its author.

ErrorsLink to "Errors"

tone="danger" tints the bubble for a message that reports a failure.

Wide contentLink to "Wide content"

A bubble hugs its text and stops at --cy-chat-message-max-width (82%). With wide, it takes the whole row after the avatar, for tables and code.

StreamingLink to "Streaming"

While streaming, a caret follows the content and the message is aria-busy, so screen readers wait for the whole reply. The caret is placed after the content: after the last word for plain text, under the last block for Prose.

The threadLink to "The thread"

A thread is a ScrollArea with follow: it keeps to the end while replies stream in, lets go when the person scrolls up to read, and follows again when they return to the end. onAtBottomChange tells you when to offer a way back (handle.scrollToEnd(), here in the ScrollArea's overlay).

Do not make the thread a live region: it would read every streamed fragment. When an assistant reply finishes, announce it once through useAnnounce (inside an Announcer).

const announce = useAnnounce();
const scroller = useRef<ScrollAreaHandle>(null);
const [atBottom, setAtBottom] = useState(true);
// When a reply finishes streaming:
announce(replyText);

<ScrollArea
  label="Conversation"
  follow
  onAtBottomChange={setAtBottom}
  handle={scroller}
  overlay={!atBottom && <Button size="sm" onClick={() => scroller.current?.scrollToEnd()}>Latest</Button>}
>
  {messages.map((m) => (
    <ChatMessage key={m.id} role={m.role} avatar={m.role === "assistant" ? botAvatar : undefined}>
      …
    </ChatMessage>
  ))}
</ScrollArea>

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Structure: each message is an article named by its author (labels.user, "You"; labels.assistant, "Assistant"), so screen readers can move message by message.
• Actions: an APG toolbar named "Message actions". With a mouse, they fade in while the message is hovered or holds focus; they keep their space, so nothing moves. Keyboard focus always reveals them.
• Streaming: aria-busy while text arrives; the caret is hidden from assistive technology.
• Right to left: the layout mirrors: the person's messages on the left, the assistant's avatar on the right.
• Reduced motion: the caret stops blinking and stays lit.

TouchLink to "Touch"

Screens without hover show the actions all the time, and IconButtons keep a 44px hit area on coarse pointers.

ThemingLink to "Theming"

RelatedLink to "Related"

Prose · ScrollArea · Announcer · Avatar · CopyButton