Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Components
  2. Message
  3. API and Development

Message

API and Development

View Source
Submit Issue

Message renders self/other aligned bubbles with optional role, name, and timestamp. Supports translation / translatedContent layouts, floating toolbar content with Toolbar integration (toolbarProps, exclusiveToolbar, toolbarGroup), search affordances (focused, active), and MessageHighlight / MessageRedaction helpers for inline body text.

Message props

Name

Type

Default

Description

author

MessageAuthor

—

—

active

boolean

—

—

animated

boolean

true

—

className

string

—

—

exclusiveToolbar

boolean

true

—

focused

boolean

—

—

name

string

—

—

ref

Ref<HTMLDivElement>

—

—

role

string

—

—

timestamp

Date

—

—

toolbar

ReactNode

—

—

toolbarFullyControlledVisibility

boolean

—

—

toolbarGroup

string

message-toolbar

—

toolbarOrientation

MessageToolbarOrientation

MessageToolbarOrientation.Vertical

—

toolbarProps

Omit<ToolbarProps, "children" | "floating" | "exclusiveGroup" | "onDismiss">

—

—

translatedContent

ReactNode

—

—

translation

boolean

—

—

Storybook

Interactive examples and edge cases for this component are in Storybook.

Self Message
Manual Redaction
A I Redaction
Translated Self Message
Translated Other Message
Other Message
Long Message
With Toolbar
Toolbar Flips At Bottom
Toolbar Flips At Viewport Bottom
Horizontal Toolbar
Controlled Toolbar Open
Conversation
No Metadata
Partial Metadata
Animated Conversation
Search Highlighting
Current Match Highlighting
Focused
Active
No Animation

Helpers

Name

Type

Default

Description

MessageHighlight

{ current?: boolean }

—

Search hit mark.

MessageRedaction

{ type: RedactionType }

—

Manual vs automated redaction styling.

Self message

Other message

Manual redaction

Automated redaction

Translated self message

Translated other message

Long message

With toolbar

Conversation

No metadata

Search highlight

Previous

Message / Usage

Next

Message / Accessibility

On this page

Message props
Storybook
Helpers
Self message
Other message
Manual redaction
Automated redaction
Translated self message
Translated other message
Long message
With toolbar
Conversation
No metadata
Search highlight