AI chat enables users to interact with the product using natural language. It supports tasks that benefit from suggestions, step-by-step help, or open-ended input.
Use it when AI is the main feature. Typically triggered from a dedicated navigation item, this layout makes AI functionality easily accessible as a primary experience.
The chat content area has a maximum width of 720px. It scales fluidly on smaller screens and remains centered on larger ones to maintain readability and visual balance.
Use it when AI supports tasks within the current view. In this case, the AI appears as an on-demand assistant without disrupting the workflow in a side panel.
When the AI feature is globally accessible, the side panel can be triggered from the application header, ensuring consistent entry across all screens.
For contextual use, place the trigger near the related feature or content.
Before the first message, show an initial screen to set expectations and explain what the AI can do. As soon as the user prompts a message, the initial screen should disappear.
AI icon
Salutation: A brief, welcoming message that sets a conversational tone.
Prompt categories (optional): When suggestions exceed a manageable number, group them by topic or function using summary chips
Prompt suggestions (optional): Curated prompts or example questions that reflect common or relevant actions.
System errors, such as timeouts or backend crashes, occur outside the AI’s reasoning. These should be represented with inline notifications, placed above the input prompt.
When the AI cannot complete a task due to a known limitation, it should respond within the conversation. These are not treated as errors and do not require a separate notification.
A declarative container component for displaying a chat interface with automatic scroll-to-bottom behavior.
This component provides the layout and styling for a chat interface, managing scrolling behavior to keep the newest messages visible while respecting user scrolling actions. It automatically scrolls to the bottom when new content is added, unless the user has scrolled up to view older messages.
Use via content projection: - Default content: Chat messages displayed in the scrollable messages container or a welcome screen (empty state). - si-inline-notification selector: Notification component displayed above the input area - si-chat-input or [siChatContainerInput] selector: Input controls for composing messages
When initially displaying a chat interface use the initial si-welcome-screen component that displays when there are no messages. It can be slotted into the si-chat-container component. It accepts prompt suggestions as an input.
AI welcome screen component for displaying initial state in AI chat interfaces.
The AI welcome screen component provides an engaging initial state for AI chat interfaces, featuring a welcome message, optional prompt categories for filtering, and suggested prompts that users can click to start conversations.
The component includes: - Welcome header with AI branding and customizable greeting - Optional category pills for filtering prompt suggestions - Clickable prompt suggestion cards - Optional refresh button to regenerate suggestions
See - SiAiChatContainerComponent for the AI chat container which uses this component - SiChatContainerComponent for the base chat container
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
Optionally show a preview of the attachment by providing a template that is shown in a modal when clicked (optional) previewTemplate?: (TemplateRef<any> | () => TemplateRef<any>)¶
Optional icon that will be rendered before the label. icon?: string from icon¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (string | number | boolean) from iconBadge¶
ID that will be attached to the DOM node. id?: string from id¶
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService . action: (string | (actionParam: any, source: this) => void)¶
Optional icon that will be rendered before the label. icon?: string from icon¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (string | number | boolean) from iconBadge¶
ID that will be attached to the DOM node. id?: string from id¶
Optional icon that will be rendered before the label. icon?: string from icon¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (string | number | boolean) from iconBadge¶
ID that will be attached to the DOM node. id?: string from id¶
Optional icon that will be rendered before the label. icon?: string from icon¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (string | number | boolean) from iconBadge¶
ID that will be attached to the DOM node. id?: string from id¶
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService . action: (string | (actionParam: any, source: this) => void)¶
Optional icon that will be rendered before the label. icon?: string from icon¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (string | number | boolean) from iconBadge¶
ID that will be attached to the DOM node. id?: string from id¶
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService . action: (string | (actionParam: any, source: this) => void)¶
Optional icon that will be rendered before the label. icon?: string from icon¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (string | number | boolean) from iconBadge¶
ID that will be attached to the DOM node. id?: string from id¶
Use this to assign values to either @Input() or input() fields of the provided component. If a template is used, the values are available in the template context. inputValues?: Record<string, unknown>¶
A function that will be invoked when clicking on the menu item. When passed as a string, use together with SiLinkActionService to receive events. This is meant for repetitive things in lists/tables/etc. action?: (string | (param: any) => any)¶
A boolean that lets the link know whether it is disabled or not. disabled?: boolean¶
Defines a href URI that the menu item will be linked to. Will be used to set the href attribute of the a element. Will only be used if link and function is not set. href?: string¶
A boolean that lets the link know whether it is active or not. It is useful when action() is executed instead of link route. isActive?: boolean¶
Defines the link of the menu item within the application using the angular router link concept. Accepts an array of any as per [routerLink API definition] https://angular.dev/api/router/RouterLink . link?: (string | any[])¶
Chat input component for composing and sending messages in conversational interfaces.
The chat input component provides a text area for users to compose messages, supporting text, attachments, and contextual actions. It appears as a textarea with buttons for adding attachments and sending messages, as well as an optional disclaimer.
The component automatically handles: - Styling for chat input and actions. - Dynamic resizing of the textarea based on content. - Uploading of and displaying of attachments above the input area. - Displaying primary and secondary actions.
Additionally to the inputs and outputs documented here, the component supports content projection via the following slots: - Default content: Custom action buttons to display inline, prefer using the actions input for buttons, can be used in addition. - siChatInputDisclaimer selector: Custom disclaimer content to display below the input area, prefer using the disclaimer input for simple text disclaimers.
If not provided, the component will look for projected content with the siChatInputDisclaimer directive. If both are empty, no disclaimer section will be shown (handled via CSS :empty). disclaimer: InputSignal<(TranslatableString | undefined)> = ...¶
Whether the input supports interrupting ongoing operations. When active, the send button transforms into an interrupt button (with element-stop-filled icon). If sending is true, the interrupt button will be disabled. interruptible: InputSignalWithTransform<boolean, unknown> = false¶
The label for the input, used for accessibility label: InputSignal<string> = t(() => $localize`:@@SI_CHAT_INPUT.LABEL:Chat message input`)¶
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated. ngAfterViewInit: () => void from AfterViewInit.ngAfterViewInit¶
This directive is used to identify and style input elements that belong to the chat container component, typically applied to form inputs or textareas used for composing chat messages.
Example:
<si-chat-container><si-chat-message>Hello!</si-chat-message><si-chat-message>How are you?</si-chat-message><inputsiChatContainerInputtype="text"placeholder="Type a message..."/></si-chat-container>
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
Primary actions available for this message (thumbs up/down, copy, retry, etc.) All actions displayed inline actions: InputSignal<MessageAction[]> = []¶
Pre-segmented annotated text containing inline citation references. When provided, takes precedence over the content input. Use parseCitationMarkers or parseCitationOffsets to produce this value. annotatedText: InputSignal<(SiChatAnnotatedText | undefined)> = undefined¶
Optional formatter function to transform content before display. - Returns string: Content will be sanitized using Angular's DomSanitizer - Returns Node: DOM node will be inserted directly without sanitization
Note: If using a markdown renderer, make sure to apply the markdown-content class to the root element to ensure proper styling using the Element theme (e.g., div.className = 'markdown-content' ). The function returned by getMarkdownRenderer does this automatically.
Secondary actions available in dropdown menu, first use primary actions and only add secondary actions additionally secondaryActions: InputSignal<MenuItem[]> = []¶
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
Optional formatter function to transform content before display. - Returns string: Content will be inserted as text with built-in sanitization - Returns Node: DOM node will be inserted directly without sanitization
Note: When returning a Node with formatted content, apply the markdown-content class to the root element to ensure proper styling (e.g., div.className = 'markdown-content' ). The function returned by getMarkdownRenderer does this automatically.
Secondary actions available in dropdown menu, first use primary actions and only add secondary actions additionally secondaryActions: InputSignal<MenuItem[]> = []¶
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
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
Directive to mark content as chat input disclaimer into SiChatInputComponent . Apply this directive to content that should be slotted into the disclaimer area.
Directive to mark content as chat message actions into SiChatMessageComponent . Apply this directive to e.g. buttons that should be slotted into the message actions area.
Message or translation key if file exceeds the maximum file size limit. errorTextFileMaxSize: InputSignal<TranslatableString> = $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size of {{maxFileSize}}`¶
Text or translation key of message title if incorrect file type is dragged / dropped. errorTextFileType: InputSignal<TranslatableString> = $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`¶
Event emitted when valid files are added. Also includes invalid files, but with status 'invalid' and an errorText describing why they were ignored. filesAdded: OutputEmitterRef<UploadFile[]> = ...¶
Event emitted when valid files are added. Invalid files (due to size or type) will be ignored and instead the fileError event will be emitted. validFiles: OutputEmitterRef<UploadFile[]> = ...¶
