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.

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.

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¶

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¶

Markdown renderer¶

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>