ChatMessage

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { ChatLog, ChatMessage } from '@nizivo/react/unstable/chat-message';

export function ChatMessageExample(): JSX.Element {
  return (
    <ChatLog style={{ maxInlineSize: 560 }}>
      <ChatMessage from="user" time={<time dateTime="09:41">09:41</time>}>
        Tag the mug and candle on yesterday’s posts, then publish.
      </ChatMessage>
      <ChatMessage from="assistant" sender="Nizivo AI" time={<time dateTime="09:41">09:41</time>}>
        Done — both products are tagged. The post is now shoppable at /mossandkiln.
      </ChatMessage>
    </ChatLog>
  );
}

ImportCopy Anchor Link

import { ChatLog, ChatMessage } from '@nizivo/react/unstable/chat-message';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/chat-message.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript. How to choose.

TurnsCopy Anchor Link

from is user (a bg/brand bubble at the end of the line) or assistant (bg/muted at the start, after the sparkles mark, which avatar replaces). Under the bubble, sender ("You" or "Assistant" by default) and time name who wrote it and when: never only the side or the colour.

The logCopy Anchor Link

Put the turns in a ChatLog: role="log", a polite live region named "Conversation", so a screen reader reads each new turn as it is added. For an answer that streams, use a ResponseBlock inside it, which is read once, when complete.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

ChatLogLabels type

import type { ChatLogLabels } from '@nizivo/react/unstable/chat-message'

ChatLog's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
labelrequired	string	'Conversation'	The log's name, unless the consumer names it.

ChatLogProps type

import type { ChatLogProps } from '@nizivo/react/unstable/chat-message'

The props of ChatLog, listed above.

ChatMessageLabels type

import type { ChatMessageLabels } from '@nizivo/react/unstable/chat-message'

ChatMessage's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
assistantrequired	string	'Assistant'	The assistant's turns, unless sender is given.
userrequired	string	'You'	The person's turns, unless sender is given.

ChatMessageProps type

import type { ChatMessageProps } from '@nizivo/react/unstable/chat-message'

The props of ChatMessage, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-chat-log, .nz-chat-message, .nz-chat-message-avatar, .nz-chat-message-body, .nz-chat-message-bubble, .nz-chat-message-meta.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.