Message

Compose an assistant or user message.

Assistant

How can I help with your project?

View code

import { Message } from "@stack/ui/message";

export default function Example() {
  return (
    <Message.Root>
      <Message.Content>
        <Message.Header>Assistant</Message.Header>
        <Message.Text
          parts={[{ type: "text", text: "How can I help with your project?" }]}
        />
      </Message.Content>
    </Message.Root>
  );
}

Usage

import { Message } from "@stack/ui/message";

Use align="end" on Root for user messages. Add Bubble and BubbleContent for a contained message.

User bubble

Align the message and bubble to the end for a user prompt.

Check the mobile layout, too.

View code

import { Message } from "@stack/ui/message";

export default function Example() {
  return (
    <Message.Root align="end">
      <Message.Content>
        <Message.Bubble variant="secondary" align="end">
          <Message.BubbleContent>
            Check the mobile layout, too.
          </Message.BubbleContent>
        </Message.Bubble>
      </Message.Content>
    </Message.Root>
  );
}

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

Message.Root

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
align	"start" | "end"	No	Alignment of the component. Default: "start".

Message.Group

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

Message.Content

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

Message.Header

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

Message.Footer

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

Message.Actions

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
from	"user" | "assistant"	Yes	Source line associated with this line.
phase	"commentary" | "final_answer" | null	No	Current restoration phase.
status	"failed" | "inProgress" | "completed" | "interrupted"	No	Current operation status. Default: "completed".

Message.Action

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
children	ReactNode	No	Content rendered inside the component.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
focusableWhenDisabled	boolean	No	Whether the button should be focusable when disabled.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
label	string	Yes	Accessible or displayed label for the control.
tooltip	ReactNode	No	Tooltip content; null or false suppresses it. Default: label.
tooltipProps	Omit<HintContentProps, "children">	No	Props forwarded to the tooltip content.

Message.Copy

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
tooltip	ReactNode	No	Tooltip content; null or false suppresses it.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
children	ReactNode	No	Content rendered inside the component.
onCopy	(() => void)	No	Called after copying succeeds.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
disabled	boolean	No	Disable interaction.
focusableWhenDisabled	boolean	No	Whether the button should be focusable when disabled.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
copiedLabel	string	No	Accessible label after copying succeeds.
errorLabel	string	No	Accessible label after copying fails.
tooltipProps	Omit<HintContentProps, "children">	No	Props forwarded to the tooltip content.
onCopyError	((error: Error) => void)	No	Handle a clipboard failure.
value	string	Yes	Current controlled value.

Message.DatePopover

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
children	ReactNode	No	Content rendered inside the component.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
focusableWhenDisabled	boolean	No	Whether the button should be focusable when disabled.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
label	string	No	Accessible or displayed label for the control. Default: "Message information".
content	ReactNode	No	Content displayed by the component.
contentProps	Omit<HintContentProps, "children">	No	Props forwarded to the hint content.
date	string | number | Date | null	Yes	Date to display.
locale	Intl.LocalesArgument	No	Locale used to format the date.
timeZone	string	No	Time zone used to format the date.

Message.Pending

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.

Message.Avatar

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

Message.Bubble

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
variant	"default" | "destructive" | "outline" | "secondary" | "ghost" | "muted" | "tinted" | null	No	Appearance variant. Default: "default".
align	"start" | "end"	No	Alignment of the component. Default: "start".

Message.BubbleContent

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>	No	Replace the underlying element using render composition.

Message.Text

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
dir	"auto" | "ltr" | "rtl"	No	Text direction. "ltr" / "rtl" force a single direction. "auto" detects direction per block: in streaming mode via parsed markdown blocks, in static mode via a rehype pass on each semantic block (headings, paragraphs, list items, table cells, etc.).
prefix	string	No	Tailwind CSS prefix to prepend to all utility classes (e.g. "tw" produces tw:flex instead of flex).
onAnimationStart	(() => void)	No	Called when isAnimating transitions from false to true.
onAnimationEnd	(() => void)	No	Called when isAnimating transitions from true to false.
lineNumbers	boolean	No	Display source line numbers.
allowElement	AllowElement	No	Decide whether an HTML element may be rendered.
allowedElements	readonly string[]	No	HTML elements allowed in rendered output.
components	Components	No	Custom Markdown element renderers.
disallowedElements	readonly string[]	No	HTML elements excluded from rendered output.
rehypePlugins	PluggableList	No	HTML syntax-tree plugins.
remarkPlugins	PluggableList	No	Markdown syntax-tree plugins.
remarkRehypeOptions	Readonly<Options>	No	Options for converting Markdown into HTML nodes.
skipHtml	boolean	No	Skip raw HTML in Markdown.
unwrapDisallowed	boolean	No	Keep children of disallowed elements.
urlTransform	UrlTransform	No	Transform URLs before rendering.
mode	"static" | "streaming"	No	Render complete static Markdown or an evolving stream.
BlockComponent	ComponentType<BlockProps>	No	Custom component used to render Markdown blocks.
parseMarkdownIntoBlocksFn	((markdown: string) => string[])	No	Split Markdown into independently rendered blocks.
parseIncompleteMarkdown	boolean	No	Repair incomplete Markdown while streaming.
normalizeHtmlIndentation	boolean	No	Normalize HTML block indentation to prevent 4+ spaces being treated as code blocks.
shikiTheme	[ThemeInput, ThemeInput]	No	Light and dark syntax-highlighting themes.
mermaid	MermaidOptions	No	Mermaid rendering options.
codeBlockMaxHeight	string | number	No	Max height for fenced code blocks.
controls	ControlsConfig	No	Configure code, table, and diagram controls.
isAnimating	boolean	No	Whether streamed content is currently animating.
tableMaxHeight	string | number	No	Max height for tables.
animated	boolean | AnimateOptions	No	Configure animated Markdown rendering.
caret	"circle" | "block"	No	Caret style for streaming content.
plugins	PluginConfig	No	Rendering plugins.
remend	RemendOptions	No	Options for repairing incomplete Markdown.
linkSafety	LinkSafetyConfig	No	Link safety configuration.
portal	PortalTarget	No	DOM node for Streamdown overlays, or a function returning one.
allowedTags	AllowedTags	No	Custom tags to allow through sanitization with their permitted attributes
fallbackComponent	ComponentType<Record<string, unknown> & ExtraProps>	No	Fallback component for HTML tags or allowedTags entries that have no matching key in the components map.
literalTagContent	string[]	No	Tags whose children should be treated as plain text (no markdown parsing).
disableAutolinkProtocols	string[]	No	Disable GFM / CommonMark autolinking for specific URL protocols (e.g. bare email addresses become mailto: autolinks).
translations	Partial<StreamdownTranslations>	No	Override UI strings for i18n / custom labels
icons	Partial<IconMap>	No	Custom icons to override the default icons used in controls
tableLayout	"wrap" | "stacked" | "scroll"	No	Wrap content within its container, stack simple rows on narrow screens, or allow horizontal scrolling.
parts	readonly MessageTextPart[]	Yes	Structured message content parts.
renderMention	((reference: MessageMention) => ReactNode)	No	Customize a structured mention.

Message.Reactions

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
align	"start" | "end"	No	Alignment of the component. Default: "end".
side	"top" | "bottom"	No	Side on which the popup or panel appears. Default: "bottom".