Chat message¶

Usage¶

The chat message displays conversational content exchanged between participants. It helps users follow the dialogue and distinguish who sent each message.

There are two variants:

• User message: represents the message sent by the user
• AI message: represents the automated or system-generated response

User message¶

Displayed as a text bubble, the user message visually represents the user’s contribution to a conversation. It may support contextual actions such as copy, edit, or delete.

Use it in chat interfaces where user input is shown as part of a dialogue, or in conversation histories and transcripts.

AI message¶

The AI message visually distinguishes automated responses from user input. It can include optional actions or related content relevant to the user.

Use it to display AI-generated content in chat interfaces, or to provide system-driven assistance, explanations, or follow-up actions.

Source citations¶

AI messages can optionally surface the sources that informed a response. Two chips are available for this purpose:

• Inline source chip: appears at the end of the message body, embedded in the text flow. Shows the title of the first cited source, with a +N suffix when multiple sources are present.
• Summary source chip: appears in the actions row below the message. Shows a globe icon and a "Sources" label. Place it there using the siAiMessageAction directive.

Both chips open a popover that lists all cited sources with their title, excerpt, and a link.

Best practices¶

• Allow user interaction (feedback, retry, copy) when appropriate.
• Always place the AI message directly in the background. Do not wrap it in an additional container.
• Constrain the AI message to a maximum width of 720px for readability.

Design¶

User message¶

1. Actions (optional), 2. Message bubble, 3. User message

Actions are revealed on hover for desktop users, and on tap for mobile users where hover interactions aren’t supported.

When attachments are included in a user message, they should appear above the message bubble. Attachments are arranged horizontally and wrap to the next line when they exceed the available space.

For general attachment errors (e.g., file not supported), display an inline error message above the field, following the AI pattern guidelines.

AI message¶

1. AI icon, 2. AI message, 3. Actions (optional)

When actions are present, they’re always positioned below the text area. Is possible to display up to 4 actions inline; any additional actions will be collapsed into a menu.

Source chip¶

The inline source chip sits at the end of the last paragraph of the AI message body. It renders as a compact pill with an optional icon and the first source's title. When more than one source is cited, a +N count is appended.

The summary source chip is placed in the actions row alongside other action buttons. It uses a globe icon and a translatable "Sources" label.

Both chips open a popover on click that lists each source with its title, a short excerpt, and a link that opens in a new tab. Only one chip type should be shown at a time: use the inline chip while the response is being streamed, and switch to the summary chip once streaming is complete.

Responsive behavior¶

For all breakpoints, the layout remains the same. The text reflows to fit the available space while preserving hierarchy and alignment.

Code¶

SiUserMessageComponent API Documentation¶

User message component for displaying the user's messages in conversational interfaces.

The user message component renders user-submitted content in (AI) chat interfaces, supporting text, attachments, and contextual actions. It appears as a text bubble aligned to the right side and supports markdown formatting for rich content. Can be used within SiChatContainerComponent .

The component automatically handles: - Styling for user messages distinct from AI or generic chat messages - Option to render markdown content, provide via contentFormatter input with a markdown renderer function (e.g., from getMarkdownRenderer ) - Displaying attachments above the message bubble - Displaying primary and secondary actions

See - SiChatMessageComponent for the base message wrapper component - SiAiMessageComponent for the AI message component - SiAttachmentListComponent for the base attachment component - getMarkdownRenderer for markdown formatting support - SiChatContainerComponent for the chat container to use this within

Input Properties¶

SiAiMessageComponent API Documentation¶

AI message component for displaying AI-generated responses in conversational interfaces.

The AI message component renders AI-generated content in chat interfaces, supporting text formatting, markdown, loading states, and contextual actions. It appears as text (no bubble) aligned to the left side without any avatar/icon slot. Can be used within SiChatContainerComponent .

The component automatically handles: - Styling for AI messages distinct from user or generic chat messages - Option to render markdown content, provide via contentFormatter input with a markdown renderer function (e.g., from getMarkdownRenderer ) - Showing loading states with skeleton UI during generation - Displaying primary and secondary actions

See - SiChatMessageComponent for the base message wrapper component - SiUserMessageComponent for the user message component - getMarkdownRenderer for markdown formatting support - SiChatContainerComponent for the chat container to use this within

Input Properties¶

Output Properties¶

Base chat message¶

Use these base components to build custom chat message interfaces.

The si-chat-message component is a wrapper component, it has slots for different parts of a chat message.

The slots are:

• si-attachment-list/si-badge - For displaying attachments related to the message.
• si-avatar/si-icon/img - For the avatar or icon representing the message sender.
• siChatMessageAction (helper directive) - For actions related to the message.

SiChatMessageComponent API Documentation¶

Base declarative chat message component that provides the layout structure for chat messages.

This component handles the core message layout including avatar positioning, loading states, and action button as well as attachment list placement. It serves as the foundation for more specialized message components like SiUserMessageComponent and SiAiMessageComponent . Can be used within SiChatContainerComponent .

The component provides: - Flexible alignment (start/end) for different message types - Avatar/icon slot for message attribution - Loading state with skeleton UI - Action buttons positioned on the side or bottom - Attachment list display slot - Responsive behavior that adapts to container size

This is a low-level component designed for slotting in custom content, it provides slots via content projection: - Default content: Main message content area (consider using SiMarkdownRendererComponent for markdown support) - si-avatar/si-icon/img selector: Avatar or icon representing the message sender - si-chat-message-action selector: Action buttons related to the message - si-attachment-list selector: Attachment list component for displaying file attachments

See - SiUserMessageComponent for user message display - SiAiMessageComponent for AI message display - SiAttachmentListComponent for attachment list to slot in - SiChatMessageActionDirective for action buttons to slot in - SiMarkdownRendererComponent for markdown content rendering - SiChatContainerComponent for the chat container to use this within

Input Properties¶

Attachment list¶

SiAttachmentListComponent API Documentation¶

Attachment list component for displaying file attachments in chat messages.

This component renders a list of file attachments with icons, names, and optional preview and remove functionality. It's designed to work with chat message components to show files that have been uploaded or shared in conversations.

This component provides: - A list of pills showing each attachment's name and an icon - Optional preview modal for attachments - Optional remove functionality for editable messages

The component is included within SiUserMessageComponent , SiAiMessageComponent and SiChatInputComponent but can also be used inside custom chat messages with SiChatMessageComponent

See - SiUserMessageComponent for user message display - SiAiMessageComponent for AI message display - SiChatMessageComponent for custom chat message display - SiChatInputComponent for chat input with attachment support - Attachment for attachment data structure

Input Properties¶

Output Properties¶

Source chips¶

Note: The source chip components are currently experimental and may undergo changes in future releases.

Pass the sources input directly to si-ai-message to render the inline chip automatically. To show the summary chip in the actions row, project it with the siAiMessageAction directive.

SiSourceChipInlineComponent API Documentation¶

Inline source chip for AI messages.

Renders a compact pill that appears inline with the AI message text, aligned to the paragraph line height (20 px). Opens a popover listing the cited sources when clicked.

Input Properties¶

Name	Type	Default	Description
active ¶	boolean	false	Whether the chip is in active (focused/selected) state.
icon ¶	string		Optional icon shown before the label.
sources ¶	SiAiSource[]		The sources cited inline. The first source's title becomes the chip label.

Output Properties¶

SiSourceChipSummaryComponent API Documentation¶

Summary source chip for AI messages.

Renders a single "Sources" pill with a globe icon at the end of an AI message, alongside the action buttons. Opens a popover listing all cited sources when clicked.

@remarks: Use together with the siAiMessageAction directive to place the chip in the actions row of an <​si-ai-message​> :

<si-source-chip-summary siAiMessageAction [sources]="mySources" />

Input Properties¶

Name	Type	Default	Description
active ¶	boolean	false	Whether the chip is in active (focused/selected) state.
label ¶	TranslatableString	$localize`:@@SI_AI_SOURCE_CHIP.SOURCES:Sources`	The label shown on the chip.
sources ¶	SiAiSource[]		The sources to list in the popover.

Output Properties¶

SiAiMessageActionDirective API Documentation¶

API not found.

Markdown renderer¶

Note: The markdown renderer is currently experimental and may undergo changes in future releases.

SiMarkdownRendererComponent API Documentation¶

Component to display markdown text, uses the getMarkdownRenderer function internally, relies on markdown-content theme class.

Input Properties¶

Types Documentation¶

<si-chat-container>
  <si-chat-message>Hello!</si-chat-message>
  <si-chat-message>How are you?</si-chat-message>

  <input siChatContainerInput type="text" placeholder="Type a message..." />
</si-chat-container>

<si-chat-message>
  Message content
  <button siChatMessageAction>Like</button>
  <button siChatMessageAction>Share</button>
</si-chat-message>

<si-chat-input>
  <div siChatInputDisclaimer>
    Custom disclaimer content
  </div>
</si-chat-input>

<si-ai-message [content]="...">
  <si-source-chip-summary siAiMessageAction [sources]="mySources" />
</si-ai-message>

<input
  #fileInput
  type="file"
  class="d-none"
  siFileUpload
  [accept]="accept()"
  [maxFileSize]="maxFileSize()"
  [multiple]="true"
  (validFiles)="onFilesAdded($event)"
  (fileError)="onFileError($event)"
/>