Chat Panel

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Prop	Type	Default	Notes
`items`	`readonly MessageListItem[]`	required	The transcript, oldest first
`label`	`LocalizedMessage`	required	Names the transcript log
`jumpToLatestLabel`	`LocalizedMessage`	required	Names the jump control
`jumpUnreadLabel`	`(count: number) => LocalizedMessage`		Names the jump control when messages arrived out of view
`unreadCount`	`number`		Messages that arrived out of view. Caller-owned
`onReachStart`	`() => void`		The oldest loaded message scrolled into view
`onAtEndChange`	`(atEnd, details) => void`		The reader reached or left the latest message
`emptyTitle`	`LocalizedMessage`	required	Empty state title
`emptyDescription`	`LocalizedMessage \| DisplayValue`		Empty state description
`emptyIcon`	`Glyph`		Glyph in the empty state's icon well
`composer`	`ReactNode`		A ChatInput: `Reflow` in `Default`, `Stacked` in `Annotation`. Omit for a read-only transcript
`variant`	`ChatPanelVariant`	`Default`	`Default` or `Annotation`
`messageVariant`	`MessageVariant`	the variant's	Draws every message the same way
`showAuthor`	`boolean`	`true`	Avatar and author line
`className`	`string`		Appended to the root
`id`	`string`		Root id
`ref`	`Ref<HTMLDivElement>`		Root element

Slots

Slot	Prop	Notes
Composer	`composer`	Accepts a ChatInput. Floats over the transcript in `Default`, docked in `Annotation`. The caller passes the input's `layout` (Decision CP-8)

Exports

ChatPanel, ChatPanelVariant and ChatPanelProps from @prepared911/ui/blocks/chat-panel.

Props

Name	Type	Default	Description
`emptyTitle`	`LocalizedMessage`	—	Title of the empty state, shown when there are no items.
`items`	`readonly MessageListItem[]`	—	The transcript, oldest first: message and system items, as for MessageList.
`jumpToLatestLabel`	`LocalizedMessage`	—	Accessible name of the control that jumps to the latest message.
`label`	`LocalizedMessage`	—	Accessible name of the transcript, which is a log region.
`className`	`string`	—	Classes appended to the root.
`composer`	`ReactNode`	—	The composer, such as a chat input with its send control. Omit it for a read-only or terminal transcript. In the default variant it floats over the block end of the transcript; in the annotation variant it is docked under it.
`emptyDescription`	`LocalizedMessage \| DisplayValue`	—	Description of the empty state.
`emptyIcon`	`Glyph`	—	Glyph in the empty state's icon well. Decorative.
`id`	`string`	—	Id of the root element.
`jumpUnreadLabel`	`((count: number) => LocalizedMessage)`	—	Accessible name of the jump control when messages arrived out of view. Receives the count.
`messageVariant`	`MessageVariant`	—	Overrides the variant's per-side treatment, drawing every message the same way. A layout that hides the author line has only the bubble left to mark a turn, so a split by side can read as an inconsistency there.
`onAtEndChange`	`((atEnd: boolean, details: ChangeDetails<ChangeReason.None>) => void)`	—	Called when the reader reaches or leaves the latest message.
`onReachStart`	`(() => void)`	—	Called when the oldest loaded message scrolls into view, to load earlier ones.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root element.
`showAuthor`	`boolean`	—	Whether messages draw the avatar and author line. Defaults to true. Hidden, each name stays for assistive technology and each time becomes a caption under its message.
`unreadCount`	`number`	—	Messages that arrived while the reader was away from the latest one. The caller owns the number.
`variant`	`ChatPanelVariant`	—	The form factor. Defaults to {@link ChatPanelVariant.Default}.

Storybook

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

DefaultOpens in a new tab

Chat Panel / Usage

Chat Panel / Accessibility

On this page

Chat Panel

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Prop	Type	Default	Notes
`items`	`readonly MessageListItem[]`	required	The transcript, oldest first
`label`	`LocalizedMessage`	required	Names the transcript log
`jumpToLatestLabel`	`LocalizedMessage`	required	Names the jump control
`jumpUnreadLabel`	`(count: number) => LocalizedMessage`		Names the jump control when messages arrived out of view
`unreadCount`	`number`		Messages that arrived out of view. Caller-owned
`onReachStart`	`() => void`		The oldest loaded message scrolled into view
`onAtEndChange`	`(atEnd, details) => void`		The reader reached or left the latest message
`emptyTitle`	`LocalizedMessage`	required	Empty state title
`emptyDescription`	`LocalizedMessage \| DisplayValue`		Empty state description
`emptyIcon`	`Glyph`		Glyph in the empty state's icon well
`composer`	`ReactNode`		A ChatInput: `Reflow` in `Default`, `Stacked` in `Annotation`. Omit for a read-only transcript
`variant`	`ChatPanelVariant`	`Default`	`Default` or `Annotation`
`messageVariant`	`MessageVariant`	the variant's	Draws every message the same way
`showAuthor`	`boolean`	`true`	Avatar and author line
`className`	`string`		Appended to the root
`id`	`string`		Root id
`ref`	`Ref<HTMLDivElement>`		Root element

Slots

Slot	Prop	Notes
Composer	`composer`	Accepts a ChatInput. Floats over the transcript in `Default`, docked in `Annotation`. The caller passes the input's `layout` (Decision CP-8)

Exports

ChatPanel, ChatPanelVariant and ChatPanelProps from @prepared911/ui/blocks/chat-panel.

Props

Name	Type	Default	Description
`emptyTitle`	`LocalizedMessage`	—	Title of the empty state, shown when there are no items.
`items`	`readonly MessageListItem[]`	—	The transcript, oldest first: message and system items, as for MessageList.
`jumpToLatestLabel`	`LocalizedMessage`	—	Accessible name of the control that jumps to the latest message.
`label`	`LocalizedMessage`	—	Accessible name of the transcript, which is a log region.
`className`	`string`	—	Classes appended to the root.
`composer`	`ReactNode`	—	The composer, such as a chat input with its send control. Omit it for a read-only or terminal transcript. In the default variant it floats over the block end of the transcript; in the annotation variant it is docked under it.
`emptyDescription`	`LocalizedMessage \| DisplayValue`	—	Description of the empty state.
`emptyIcon`	`Glyph`	—	Glyph in the empty state's icon well. Decorative.
`id`	`string`	—	Id of the root element.
`jumpUnreadLabel`	`((count: number) => LocalizedMessage)`	—	Accessible name of the jump control when messages arrived out of view. Receives the count.
`messageVariant`	`MessageVariant`	—	Overrides the variant's per-side treatment, drawing every message the same way. A layout that hides the author line has only the bubble left to mark a turn, so a split by side can read as an inconsistency there.
`onAtEndChange`	`((atEnd: boolean, details: ChangeDetails<ChangeReason.None>) => void)`	—	Called when the reader reaches or leaves the latest message.
`onReachStart`	`(() => void)`	—	Called when the oldest loaded message scrolls into view, to load earlier ones.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root element.
`showAuthor`	`boolean`	—	Whether messages draw the avatar and author line. Defaults to true. Hidden, each name stays for assistive technology and each time becomes a caption under its message.
`unreadCount`	`number`	—	Messages that arrived while the reader was away from the latest one. The caller owns the number.
`variant`	`ChatPanelVariant`	—	The form factor. Defaults to {@link ChatPanelVariant.Default}.

Storybook

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

DefaultOpens in a new tab

Chat Panel / Usage

Chat Panel / Accessibility

On this page