Skip to content

SiChatInputComponent documentation

selector
si-chat-input

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.

See - SiAttachmentListComponent for the base attachment component - SiChatInputDisclaimerDirective to slot in custom disclaimer content

Input Properties

Name Type Default Description
accept
 string undefined Accepted file types for attachments (as accept string)
actionParam
 any Parameter to pass to action handlers
actions
 MenuItemAction[] [] Primary actions available in the input. Provide at most one action.
allowAttachments
 boolean false Whether file attachments are supported
attachFileLabel
 TranslatableString $localize`:@@SI_CHAT_INPUT.ATTACH_FILE:Attach file` Attach file button aria label
attachments
 ChatInputAttachment[] [] Current attachments
autoFocus
 boolean false Auto-focus the input on component initialization
disabled
 boolean false Whether the input is disabled
disclaimer
 TranslatableString A disclaimer to display.

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).
followUpPrompts
 string[] [] Suggested follow-up prompts to display as pill buttons above the chat input. Use followUpPromptSelected to handle selection and update the input value. Typically populated from AI response data and cleared after selection or on send.
interruptButtonLabel
 TranslatableString $localize`:@@SI_CHAT_INPUT.INTERRUPT:Stop processing` Interrupt button label
interruptible
 boolean false 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.
label
 string t(() =​> $localize`:@@SI_CHAT_INPUT.LABEL:Chat input`) The label for the input, used for accessibility
maxFileSize
 number 10485760 (10MB) Maximum file size in bytes
maxLength
 number Maximum number of characters allowed
placeholder
 TranslatableString $localize`:@@SI_CHAT_INPUT.PLACEHOLDER:Enter a message…` Placeholder text for the input
removeAttachmentLabel
 TranslatableString $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove {{attachment}}` Remove attachment aria label. The attachment name is available with {{attachment}} .
secondaryActions
 MenuItemAction[] [] Secondary actions available in dropdown menu
secondaryActionsLabel
 TranslatableString $localize`:@@SI_CHAT_INPUT.SECONDARY_ACTIONS:Additional actions` More actions button aria label
sendButtonIcon
 string this.icons.elementSendFilled Send button icon
sendButtonLabel
 TranslatableString $localize`:@@SI_CHAT_INPUT.SEND:Send` Send button label
sending
 boolean false Whether a message is currently being sent, also prevent the sending of new ones while still allowing the user to type
value
 string '' Current input value

Output Properties

Name Type Description
attachmentsChange
 ChatInputAttachment[] Current attachments
fileError
 FileUploadError Emitted when file upload errors occur
followUpPromptSelected
 string Emitted when the user selects a follow-up prompt. The emitted value is the text of the selected prompt.
interrupt
 void Emitted when the user wants to interrupt the current operation
interruptibleChange
 boolean 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.
send
 { attachments: ChatInputAttachment[], content: string } Emitted when the user wants to send a message
sendingChange
 boolean Whether a message is currently being sent, also prevent the sending of new ones while still allowing the user to type
valueChange
 string Current input value

Attributes and Methods

Name Type Default Description
focus()
 () => void Focus the textarea input

Types Documentation

extends MenuItemBase
Properties
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)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the menu item id disabled.
disabled?: boolean from disabled
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
Label that is shown to the user.
label: TranslatableString from label
type: "action"
(string & Translatable)
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.
extends Attachment
Attachment item interface for file attachments in chat messages, extension of Attachment for SiAttachmentListComponent to use within SiChatInputComponent . Adds the action file information. Can be used within SiChatContainerComponent .
See - Attachment for base attachment interface - SiAttachmentListComponent for the attachment list component - SiChatInputComponent for the chat input component - SiChatContainerComponent for the base chat container component where this can be used - SiAiChatComponent for the AI chat container where this needs to be used
Properties
File object
file: File
File name
name: string from name
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>) from previewTemplate
File size in bytes
size: number
MIME type
type: string
extends UploadFile
Properties
errorParams?: Record<string, unknown> from errorParams
errorText: TranslatableString
file: File from file
fileName: string from fileName
progress: number from progress
size: string from size
status: "invalid"
Attachment item interface for file attachments in chat messages, used by SiAttachmentListComponent and inside SiUserMessageComponent as well as SiChatInputComponent .
See - SiAttachmentListComponent for the attachment list component - SiUserMessageComponent for the user message - SiChatInputComponent for the chat input component
Properties
File name
name: string
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>)
Properties
Badge that is rendered after the label.
badge?: (string | number)
Color of the badge (not iconBadge).
badgeColor?: string
Whether the menu item id disabled.
disabled?: boolean
Optional icon that will be rendered before the label.
icon?: string
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean)
ID that will be attached to the DOM node.
id?: string
Label that is shown to the user.
label: TranslatableString
Properties
errorParams?: Record<string, unknown>
errorText?: TranslatableString
file: File
fileName: string
progress: number
size: string
status: ("error" | "invalid" | "success" | "added" | "queued" | "uploading")
Implement and provide this to an SiMenuFactoryComponent to receive trigger events.
Constructor
() => {}
Methods
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio), actionParam: any) => void
Will be called by SiMenuFactoryComponent if an action is defined with a string instead of a function.
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
actionParam?: any
Parent contract used by SiChatInputComponent when it is projected into a chat container.
Properties
inputInterruptible: Signal<boolean>
inputSending: Signal<boolean>
Methods
onInputSend: () => void
(UserChatMessage | AiChatMessage | ActivityChatMessage | ActivityTraceChatMessage | TemplateChatMessage)
Chat message type union of all supported message types in the AI chat container.
See - UserChatMessage for user messages - AiChatMessage for AI messages - ActivityChatMessage for individual activities - ActivityTraceChatMessage for grouped activities - TemplateChatMessage for template-based messages - BaseChatMessage for the base chat message interface - SiAiChatComponent for the AI chat container where this is used
extends BaseChatMessage
AI chat message
See SiAiChatComponent for the AI chat container where this is used
Properties
Actions available for this message
actions?: MenuItemAction[]
Message content - can be a string or a Signal, empty string shows loading state, set signal back to string to end "streaming" state
content: (string | Signal<string>)
Whether the message is currently loading/being generated - can be a boolean or Signal
loading?: (boolean | Signal<boolean>) from loading
Type of message
type: "ai"
extends BaseChatMessage
User chat message for AI chats
See SiAiChatComponent for the AI chat container where this is used
Properties
Actions available for this message
actions?: MenuItemAction[]
Attachments (for user messages)
attachments?: Attachment[]
Message content, should be a string, empty string shows loading state
content: string
Whether the message is currently loading/being generated - can be a boolean or Signal
loading?: (boolean | Signal<boolean>) from loading
Type of message
type: "user"
Render custom chat message via template, consider using SiChatMessageComponent inside the template for consistent styling
See - SiAiChatComponent for the AI chat container where this is used - SiChatMessageComponent for the chat message wrapper component which can be used inside the template
Properties
Template to render the message
template: TemplateRef<any>
Context data to pass to the template
templateContext?: any
Definition of a single source
Properties
Optional source description.
description?: string
Source name displayed to the user.
name: string
Optional source quote. Takes precedence over description .
quote?: string
Source URL.
url: string
("base-1" | "base-0")
Use this type with filter components colorVariant to render component variants based on background of container
Options for the markdown renderer. This holds all configuration and allows installing extensions. A number of extensions are already ready to use and shipped with Element.

Example:
import { siMarkdownMathKaTeX } from '@siemens/element-ng/markdown/extensions/math';
import remarkGemoji from 'remark-gemoji';

protected markdownOptions = new SiMarkdownOptions()
  .installExtension(siMarkdownMathKaTeX())
  .installUnifiedPlugin(remarkGemoji);



<si-markdown [markdown]="markdownText()" [options]="markdownOptions" />
Constructor
() => {}
Properties
codeTypes: Map<string, TypeHandler> = ...
directives: Map<string, TypeHandler> = ...
highlighter?: SiMarkdownHighlighter
plugins: PluginWithOptions[] = []
types: TypeHandler[] = []
Methods
Returns All code type handlers
getCodeTypeHandlers: () => Map<string, TypeHandler>
Returns The highlighter
getHighlighter: () => (SiMarkdownHighlighter | undefined)
Returns All type handlers
getTypeHandlers: () => TypeHandler[]
(extension: SiMarkdownExtension) => SiMarkdownOptions
Installs a extension which can contain plugins, type handlers
Returns self for chaining
Parameters
The extension definition
extension: SiMarkdownExtension
(plugin: UnifiedPlugin, options: any) => SiMarkdownOptions
Installs a plugin into the unified chain
Returns self for chaining
Parameters
The unified plugin
plugin: UnifiedPlugin
Options for the plugin
options?: any
(meta: SiMarkdownMetadata) => Processor<Root, Root, SiMarkdownRoot, undefined, undefined>
Creates the unified processor with all plugins and options
Returns unified processor
Parameters
meta: SiMarkdownMetadata
(directives: (TypeHandler | TypeHandler[])) => SiMarkdownOptions
Registers a component used to render a named Markdown directive.
Returns self for chaining
Parameters
directives: (TypeHandler | TypeHandler[])
(highlighter: SiMarkdownHighlighter) => SiMarkdownOptions
Sets the code highlighter
Parameters
The highlighter
highlighter?: SiMarkdownHighlighter
Properties
text: TranslatableString
("auto" | "inputs" | "outputs" | "both")
Progress or intermediate activity shown between chat messages.
Properties
Overrides automatic expansion for this activity.
autoExpand?: boolean
Overrides automatic input expansion. Record keys can be selected individually.
autoExpandInputs?: (boolean | string[])
Overrides automatic output expansion.
autoExpandOutputs?: boolean
Reasoning content rendered directly in the activity.
content?: (string | Signal<string>)
Alternative icon. Set to false to show the generic activity marker.
icon?: (string | false)
Activity inputs. Record entries are rendered as individual message parts.
input?: (string | string[] | Record<string, string>)
Label for the input arguments section.
inputArgumentsLabel?: TranslatableString
Whether the activity is still running.
loading?: (boolean | Signal<boolean>)
Nested activities.
messages?: ActivityChatMessage[]
Activity name. Defaults to the reasoning label for content-only activities.
name?: TranslatableString
Output from the activity.
output?: string
Label for the output section.
outputLabel?: TranslatableString
type: "activity"
Related activities grouped under a shared collapsible heading. The latest trace stays expanded until a user message follows it.
Properties
Overrides automatic expansion for this trace.
autoExpand?: boolean
Activities in execution order.
messages: ActivityChatMessage[]
Activity trace name.
name: TranslatableString
type: "activity-trace"
Base interface for all chat messages. Messages can be rendered either with content or with a custom template for advanced styling and functionality.
See - ChatMessage for the chat message type union - UserChatMessage for user messages - AiChatMessage for AI messages - TemplateChatMessage for template-based messages
Properties
Message content - can be a string or a Signal, empty string shows loading state
content?: (string | Signal<string>)
Whether the message is currently loading/being generated - can be a boolean or Signal
loading?: (boolean | Signal<boolean>)
Type of message
type: ("user" | "ai")
<T: never, CT: any>
Reference to a modal dialog
Constructor
() => {}
Properties
The default close value of the modal.
closeValue?: CT
The modal options passed during creation.
See SiModalService
data: ModalOptions = {}
detach: () => void = () =​> {}
Custom class for modal-dialog
dialogClass: string = ''
Emits the close value when the modal is hidden.
hidden: Subject<(CT | undefined)> = ...
Close the modal with a custom close value.
hide: (reason: CT) => void = () =​> {}
ignoreBackdropClick: boolean = true
isCurrent: () => boolean = () =​> false
The layer of the modal. The modal with the highest layer will be shown on top.
layer: number = 0
Allows messaging state to consumer w/o closing the dialog.
message: Subject<(CT | undefined)> = ...
Emits the modal element reference when it is shown.
shown: ReplaySubject<ElementRef<any>> = ...
Accessors
get content: T
Methods
(reason: CT) => void
When data.disableAutoHide is set, messages the reason , otherwise calls hide .
Parameters
reason?: CT
(input: string, value: unknown) => void
Set the input of a component shown in the modal.
Parameters
input: string
value: unknown
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
extends ComponentWithOptions<SiMarkdownExtensionComponent>
Type handler for a named type. This can be an AST node type, a code type, a directive name
Properties
The component used to render the node
component: Type<SiMarkdownExtensionComponent> from component
Options passed to the component
options?: any from options
Type name
type: string
ComponentWithOptions<SiMarkdownHighlighterComponent>
Combination of unified plugin with options
Properties
Options passed during plugin registration
options?: any
The plugin
plugin: UnifiedPlugin
<T: Record<string, any>> extends ModalDependencyInjectionOptions
Properties
Whether to enable animation.
animated?: boolean
aria-labelled-by value.
ariaLabelledBy?: string
Angular bindings for component content, created with inputBinding , outputBinding , or twoWayBinding . Ignored for template content.
bindings?: Binding[]
Additional CSS class.
class?: string
Optional environment Injector.
environmentInjector?: EnvironmentInjector from environmentInjector
When set to true, clicking the backdrop has no effect.
ignoreBackdropClick?: boolean
Optional element Injector.
injector?: Injector from injector
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>
Handle Esc to close/message.
keyboard?: boolean
When set to true, backdrop click or Esc don't close the modal. Instead a message will be sent.
messageInsteadOfAutoHide?: boolean
Additional providers for the modal.
providers?: StaticProvider[] from providers
extends MenuItemBase
Properties
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)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the checkbox is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
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
Label that is shown to the user.
label: TranslatableString from label
type: "checkbox"
extends MenuItemBase
Properties
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)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the radio is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
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
Label that is shown to the user.
label: TranslatableString from label
type: "radio"
extends MenuItemBase
Properties
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Submenu items for this menu item.
children: MenuItem[]
Whether the menu item id disabled.
disabled?: boolean from disabled
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
Label that is shown to the user.
label: TranslatableString from label
type: "group"
Properties
Items that are part of the radio group.
children: [ MenuItemHeader, ...(MenuItemRadio | MenuItemHeader | MenuDivider)[] ]
type: "radio-group"
Properties
The label of the header.
label: string
type: "header"
Properties
type: "divider"
<T>
A combination of a component and options passed to it during run-time
Properties
The component used to render the node
component: Type<T>
Options passed to the component
options?: any
Interface an extension component must implement
Properties
Node to be rendered
node: InputSignal<Node>
Options passed to the component
options: InputSignal<any>
The parent node
parent: InputSignal<Parent>
Interface a code highlighter component must implement
Properties
The code to be highlighted
code: InputSignal<string>
The language
language: InputSignal<string>
Options passed to the component
options: InputSignal<any>
Function the highlighter can call to updated the displayed language
updateLanguage: InputSignal<(lang: string) => void>
Processor
import
imported from unified
import
imported from @types/mdast
(Omit<Root, "children"> & { children: ExtendedRootContent[], references: { definitions: Map<string, Definition>, footnoteDefinitions: Map<string, FootnoteDefinition> } })
Extended root with references
Properties
Optional environment Injector.
environmentInjector?: EnvironmentInjector
Optional element Injector.
injector?: Injector
Additional providers for the modal.
providers?: StaticProvider[]
Used in events emitted from SiLinkActionService
Properties
param: any
(Plugin<any> | Transformer<any> | Preset | PluggableList)
An extension to the si-markdown component
Properties
Special code type handlers to install
codeTypes?: TypeHandler[]
Directives
directives?: TypeHandler[]
unified plugins to install
plugins?: PluginWithOptions[]
Type handlers to install
types?: TypeHandler[]
Options passed to makeProcessor()
Properties
citations?: SiMarkdownCitation[]
import
imported from @types/mdast
import
imported from @types/mdast
Plugin
import
imported from unified
Transformer
import
imported from unified
Preset
import
imported from unified
PluggableList
import
imported from unified
(RootContent | Footnotes | Citations | DirectiveNode)
extends SourceReference
Citation metadata associated with a markdown response.
Properties
Optional source description.
description?: string from description
Identifier referenced by bracket notation, such as [source-1] .
identifier?: string
Source name displayed to the user.
name: string from name
Zero-based, end-exclusive source range of the citation reference in the markdown source.
position?: { endIndex: number, startIndex: number }
Optional source quote. Takes precedence over description .
quote?: string from quote
Source URL.
url: string from url
import
imported from @types/mdast
extends Parent
Extra node for collecting all footnotes
Properties
List of children.
children: FootnoteDefinition[]
Info from the ecosystem.
data?: Data from Parent.data
Position of a node in a source document.

Nodes that are generated (not in the original source document) must not have a position.
position?: Position from Parent.position
Node type.
type: "footnotes"
extends Node
Container for one or more adjacent citation nodes.
Properties
children: Citation[]
Info from the ecosystem.
data?: Data from Node.data
Position of a node in a source document.

Nodes that are generated (not in the original source document) must not have a position.
position?: Position from Node.position
Node type.
type: "citations"
extends Parent
AST node created by remark-directive .
Properties
Attributes declared on the directive.
attributes: Record<string, (string | undefined)>
List of children.
children: RootContent[] from Parent.children
Info from the ecosystem.
data?: Data from Parent.data
The directive name without its leading colons.
name: string
Position of a node in a source document.

Nodes that are generated (not in the original source document) must not have a position.
position?: Position from Parent.position
Node type.
type: ("containerDirective" | "leafDirective" | "textDirective")
import
imported from @types/mdast
import
imported from @types/mdast
import
imported from @types/mdast
import
imported from @types/unist
extends Node
Inline node that references an item in the source citation array.
Properties
citationIndex: number
Info from the ecosystem.
data?: Data from Node.data
Position of a node in a source document.

Nodes that are generated (not in the original source document) must not have a position.
position?: Position from Node.position
Text replaced by a position-based citation.
text?: string
Node type.
type: "citation"
Class
▶
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
Constructor
() => {}
Properties
Whether to align attachments to the end (right) or start (left)
alignment: InputSignal<("end" | "start")> = 'start'
List of attachments to display
attachments: InputSignal<Attachment[]> = []
icons: Record<("elementDocument" | "elementStateClose"), string> = ...
modalService: SiModalService = ...
Whether to show remove buttons on attachments
removable: InputSignalWithTransform<boolean, unknown> = false
Emitted when an attachment should be removed
remove: OutputEmitterRef<Attachment> = ...
Label for remove attachment button. The attachment name is available with {{attachment}} .
removeLabel: InputSignal<TranslatableString> = $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove {{attachment}}`
Methods
(name: string) => string
Parameters
name: string
(attachment: Attachment) => any
Parameters
attachment: Attachment
(event: Event, attachment: Attachment) => void
Parameters
event: Event
attachment: Attachment
Class
▶
Directive to mark content as chat input disclaimer into SiChatInputComponent . Apply this directive to content that should be slotted into the disclaimer area.

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


See SiChatInputComponent for the chat input wrapper component
Constructor
() => {}
Class
▶
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. Can be used within SiChatContainerComponent .

The component automatically handles: - Styling for user messages distinct from AI or generic chat messages - 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 - SiChatContainerComponent for the chat container to use this within
Constructor
() => {}
Properties
Parameter to pass to action handlers
actionParam: InputSignal<any> = ...
Primary message actions (edit, delete, copy, etc.). All actions displayed inline
actions: InputSignal<MenuItemAction[]> = []
List of attachments included with this message
attachments: InputSignal<Attachment[]> = []
The user message content
content: InputSignal<string> = ''
hasAttachments: Signal<boolean> = ...
Secondary actions available in dropdown menu, first use primary actions and only add secondary actions additionally
secondaryActions: InputSignal<MenuItemAction[]> = []
More actions button aria label
secondaryActionsLabel: InputSignal<TranslatableString> = $localize`:@@SI_USER_MESSAGE.SECONDARY_ACTIONS:Additional actions`
Class
▶
AI message component for displaying AI-generated responses in conversational interfaces.

The AI message component renders AI-generated content in chat interfaces, supporting text, 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 - 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 - SiChatContainerComponent for the chat container to use this within
Constructor
() => {}
Properties
Parameter to pass to action handlers
actionParam: InputSignal<unknown> = ...
Primary actions available for this message (thumbs up/down, copy, retry, etc.) All actions displayed inline
actions: InputSignal<MenuItemAction[]> = []
The AI-generated message content
content: InputSignal<string> = ''
Whether the message is currently being generated (shows skeleton)
loading: InputSignalWithTransform<boolean, unknown> = false
Secondary actions available in dropdown menu, first use primary actions and only add secondary actions additionally
secondaryActions: InputSignal<MenuItemAction[]> = []
More actions button aria label
secondaryActionsLabel: InputSignal<TranslatableString> = $localize`:@@SI_AI_MESSAGE.SECONDARY_ACTIONS:Additional actions`
Emitted when a source has been clicked.
sourceClicked: OutputEmitterRef<SourceReference> = ...
Source references
sources: InputSignal<(SourceReference[] | undefined)> = ...
Class
▶
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 si-markdown 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 - SiChatContainerComponent for the chat container to use this within
Constructor
() => {}
Properties
Where to display action buttons (if any)
actionsPosition: InputSignal<("bottom" | "side")> = 'side'
Alignment of the message
alignment: InputSignal<("end" | "start")> = 'start'
Whether the message is currently loading
loading: InputSignal<boolean> = false
implements AfterContentInit, OnDestroy
Class
▶
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

See - SiChatInputComponent for the chat input wrapper component - SiChatContainerInputDirective for other input controls to slot in - SiAiMessageComponent for AI messages to slot in - SiUserMessageComponent for user messages (in AI chats) to slot in - SiChatMessageComponent for the chat message wrapper component to slot in other messages
Constructor
() => {}
Properties
The color variant to apply to the container.
colorVariant: InputSignal<string> = 'base-0'
contentObserver: (MutationObserver | undefined)
isUserAtBottom: boolean = true
lastScrollTime: number = 0
messagesContainer: Signal<(ElementRef<HTMLDivElement> | undefined)> = ...
Disables automatic scrolling to the bottom when new content is added.
noAutoScroll: InputSignalWithTransform<boolean, (string | boolean)> = false
pendingScroll: boolean = false
platformId: Object = ...
resizeObserver: (ResizeObserver | undefined)
scrollDebounceMs: number = 7
scrollTimeout: (number | undefined)
Methods
checkIfUserAtBottom: () => void
debouncedScrollToBottom: () => void
Focuses the messages container element.
focus: () => void
A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit: () => void from AfterContentInit.ngAfterContentInit
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
onScroll: () => void
Scrolls to the bottom of the messages container immediately. This method forces a scroll even if the user has scrolled up.
scrollToBottom: () => void
scrollToBottomDuringStreaming: () => void
Scrolls to the top of the messages container immediately.
scrollToTop: () => void
setupContentObserver: () => void
setupResizeObserver: () => void
implements SiChatInputParent
Class
▶
A model-driven chat container component for displaying an AI chat interface with automatic scroll-to-bottom behavior.

This component provides an AI 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.

Required content projection: - si-chat-input : Input controls for composing messages

See - ChatMessage for the chat message model - AiChatMessage for the AI chat message model - UserChatMessage for the user chat message model - TemplateChatMessage for the template chat message model - SiChatInputComponent for the chat input component - SiChatContainerComponent for the base chat container component - SiAiMessageComponent for the used AI message component - SiUserMessageComponent for the used user message component - SiChatMessageComponent for the base wrapper chat message component used by AI and user message components
Constructor
() => {}
Properties
Label for activity input arguments.
activityInputArgumentsLabel: InputSignal<TranslatableString> = $localize`:@@SI_AI_CHAT_CONTAINER.INPUT_ARGUMENTS:Input arguments`
Label for activity output.
activityOutputLabel: InputSignal<TranslatableString> = $localize`:@@SI_AI_CHAT_CONTAINER.OUTPUT:Output`
Default name for reasoning activities.
activityReasoningLabel: InputSignal<TranslatableString> = $localize`:@@SI_AI_CHAT_CONTAINER.REASONING:Reasoning`
Custom AI icon name, used for empty state
aiIcon: InputSignal<string> = 'element-ai'
Whether the latest activity details are expanded automatically.
autoExpand: InputSignalWithTransform<boolean, unknown> = true
chatContainer: Signal<(SiChatContainerComponent | undefined)> = ...
chatInput: Signal<(SiChatInputComponent | undefined)> = ...
Color to use for component background.
colorVariant: InputSignal<BackgroundColorVariant> = 'base-0'
Whether to disable the interrupt functionality
disableInterrupt: InputSignalWithTransform<boolean, unknown> = false
displayMessages: Signal<ChatMessage[]> = ...
The greeting text for the welcome screen
greeting: InputSignal<TranslatableString> = $localize`:@@SI_AI_CHAT_CONTAINER.WELCOME_GREETING:Hello,`
inputInterruptible: Signal<boolean> implements inputInterruptible = ...
inputSending: Signal<boolean> implements inputSending = ...
Whether the system is currently interrupting an operation. When true, forces interruptible mode and shows sending state on the input.
interrupting: InputSignalWithTransform<boolean, unknown> = false
isEmpty: Signal<boolean> = ...
isSignal: (value: unknown) => value is Signal<unknown> = isSignal
Whether a pending loading AI message should be shown (e.g. while waiting for response). If you also want to prevent the user from sending new messages, set sending to true as well.
loading: InputSignalWithTransform<boolean, unknown> = false
Options used to render chat message markdown.
markdownOptions: InputSignal<SiMarkdownOptions> = makeSiMarkdownOptions()
List of chat messages to display. Messages can contain either content (string) or a template (TemplateRef) for custom rendering. When both content and template are provided, the template takes precedence.
messages: InputSignal<(ChatMessage[] | undefined)> = ...
Emitted when a new message is sent
messageSent: OutputEmitterRef<{ attachments: ChatInputAttachment[], content: string }> = ...
Disable auto-scroll to bottom when new messages are added
noAutoScroll: InputSignalWithTransform<boolean, unknown> = false
Computed list of categories derived from promptSuggestions
promptCategories: Signal<{ label: string }[]> = ...
The list of prompt suggestions for the welcome screen, either as an array or a record mapping category labels to suggestion arrays
promptSuggestions: InputSignal<(PromptSuggestion[] | Record<string, PromptSuggestion[]>)> = []
renderedMessages: Signal<{ message: ChatMessage, primaryActions: MenuItemAction[], secondaryActions: MenuItemAction[] }[]> = ...
Resolved prompt suggestions based on selected category.
resolvedPromptSuggestions: Signal<PromptSuggestion[]> = ...
More actions button aria label
secondaryActionsLabel: InputSignal<TranslatableString> = $localize`:@@SI_AI_CHAT_CONTAINER.SECONDARY_ACTIONS:More actions`
Internal selected category state
selectedCategory: WritableSignal<(string | undefined)> = ...
Whether a message is currently being sent, disables input and shows a loading state in the input area. If you want to show a loading state for the latest AI message, set loading to true instead.
sending: InputSignalWithTransform<boolean, unknown> = false
Which activity input and output parts are shown.
show: InputSignal<ActivityDetailsDisplay> = 'auto'
Status notification action link
statusAction: InputSignal<({ href: string, target: string, title: string } | undefined)> = ...
Status notification heading
statusHeading: InputSignal<(string | undefined)> = ...
Status notification message
statusMessage: InputSignal<(string | undefined)> = ...
Status notification severity
statusSeverity: InputSignal<("info" | "warning" | "success" | "danger" | "caution" | "critical" | undefined)> = ...
The welcome message text for the welcome screen
welcomeMessage: InputSignal<TranslatableString> = $localize`:@@SI_AI_CHAT_CONTAINER.WELCOME_MESSAGE:how can I help you today?`
Methods
Focuses the chat input component if it exists.
focus: () => void
(message: ActivityChatMessage) => ActivityInputPart[]
Parameters
message: ActivityChatMessage
(content: (string | Signal<string> | undefined)) => string
Parameters
content: (string | Signal<string> | undefined)
(message: ActivityChatMessage) => (string | undefined)
Parameters
message: ActivityChatMessage
(message: ActivityChatMessage) => ("input" | "output" | undefined)
Parameters
message: ActivityChatMessage
(messageLoading: (boolean | Signal<boolean> | undefined), content: (string | Signal<string> | undefined), isLatest: boolean, globalLoading: boolean = false) => boolean
Parameters
messageLoading: (boolean | Signal<boolean> | undefined)
content: (string | Signal<string> | undefined)
isLatest: boolean
globalLoading: boolean = false
(loading: (boolean | Signal<boolean> | undefined)) => boolean
Parameters
loading: (boolean | Signal<boolean> | undefined)
(content: (string | object | Signal<(string | object)> | undefined)) => string
Parameters
content: (string | object | Signal<(string | object)> | undefined)
(message: ActivityChatMessage) => boolean
Parameters
message: ActivityChatMessage
(message: ActivityChatMessage) => boolean
Parameters
message: ActivityChatMessage
(message: ActivityChatMessage) => boolean
Parameters
message: ActivityChatMessage
(content: (string | Signal<string> | undefined)) => boolean
Parameters
content: (string | Signal<string> | undefined)
(message: (ActivityChatMessage | ActivityTraceChatMessage)) => boolean
Parameters
message: (ActivityChatMessage | ActivityTraceChatMessage)
(message: ChatMessage) => boolean
Parameters
message: ChatMessage
(content: (string | Signal<string> | undefined)) => boolean
Parameters
content: (string | Signal<string> | undefined)
(message: ChatMessage) => message is TemplateChatMessage
Parameters
message: ChatMessage
onInputSend: () => void from onInputSend
(suggestion: PromptSuggestion) => void
Parameters
suggestion: PromptSuggestion
Scrolls to the bottom of the messages container immediately. This method forces a scroll even if the user has scrolled up.
scrollToBottom: () => void
(message: ActivityChatMessage, active: boolean, inheritedAutoExpand: boolean) => boolean
Parameters
message: ActivityChatMessage
active: boolean
inheritedAutoExpand: boolean
(message: ActivityChatMessage, inputPart: ActivityInputPart, active: boolean, inheritedAutoExpand: boolean) => boolean
Parameters
message: ActivityChatMessage
inputPart: ActivityInputPart
active: boolean
inheritedAutoExpand: boolean
(message: ActivityChatMessage, active: boolean, inheritedAutoExpand: boolean) => boolean
Parameters
message: ActivityChatMessage
active: boolean
inheritedAutoExpand: boolean
(message: ActivityTraceChatMessage) => boolean
Parameters
message: ActivityTraceChatMessage
(message: ActivityChatMessage) => boolean
Parameters
message: ActivityChatMessage
(message: ActivityChatMessage) => boolean
Parameters
message: ActivityChatMessage
Class
▶
Constructor
() => {}
Properties
appRef: ApplicationRef = ...
environmentInjector: EnvironmentInjector = ...
injector: Injector = ...
modalsCount: number = 0
overlay: Overlay = ...
Methods
<T, CT> (modalRef: ModalRefImpl<T, CT>) => ComponentRef<SiModalComponent>
Parameters
modalRef: ModalRefImpl<T, CT>
buildInjector: () => Injector
(modalRef: ModalRef<unknown, any>) => void
Parameters
modalRef: ModalRef<unknown, any>
<T, CT> (injector: Injector, modalRef: ModalRefImpl<T, CT>) => Node[][]
Parameters
injector: Injector
modalRef: ModalRefImpl<T, CT>
<T, CT: any> (content: (TemplateRef<any> | (args: any[]) => {}), config: ModalOptions<T>, closeValue: CT) => ModalRef<T, CT>
Shows a modal with the given content and configuration.
Returns A reference to the modal.
Parameters
Content to be displayed in the modal can be a template reference or a component.
content: (TemplateRef<any> | (args: any[]) => {})
Configuration for the modal.
config: ModalOptions<T>
Default closing value which can be overridden by calling modalRef.hide(value) .
closeValue?: CT
Class
▶
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.

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


See SiChatMessageComponent for the chat message wrapper component
Constructor
() => {}
Class
▶
A directive to mark elements as input controls within a SiChatContainerComponent .

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>

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


See SiChatContainerComponent for the chat container wrapper component
Constructor
() => {}
Class
▶
Directive for handling file uploads with validation for file type and size.

Example:
<input
  #fileInput
  type="file"
  class="d-none"
  siFileUpload
  [accept]="accept()"
  [maxFileSize]="maxFileSize()"
  [multiple]="true"
  (validFiles)="onFilesAdded($event)"
  (fileError)="onFileError($event)"
/>
Constructor
() => {}
Properties
Define which file types are suggested in file browser.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
accept: InputSignal<(string | undefined)> = ...
Enable directory upload.
directoryUpload: InputSignalWithTransform<boolean, unknown> = false
elementRef: ElementRef<any> = ...
Message or translation key if file exceeds the maximum file size limit.
errorTextFileMaxSize: InputSignal<TranslatableString> = $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{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:Invalid file type`
Event emitted when file validation errors occur, including files that were ignored due to size or type.
fileError: OutputEmitterRef<FileUploadError> = ...
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[]> = ...
locale: string = ...
Define maximal allowed file size in bytes.
maxFileSize: InputSignal<(number | undefined)> = ...
Defines whether the file input allows selecting multiple files. When directoryUpload is enabled, this will have no effect.
multiple: InputSignalWithTransform<boolean, unknown> = false
numberFormat: NumberFormat = ...
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[]> = ...
Methods
(num: number) => string
Parameters
num: number
(files: (FileList | null)) => void
Handle files from input or drag and drop
Parameters
files: (FileList | null)
(items: DataTransferItemList) => void
Handle directory entries for drag and drop
Parameters
items: DataTransferItemList
(file: File) => UploadFile
Parameters
file: File
(event: Event) => void
Parameters
event: Event
Reset the file input value
reset: () => void
Trigger the file input click
triggerClick: () => void
(size: number) => boolean
Parameters
size: number
(fileType: (string | undefined), ext: (string | undefined)) => boolean
Parameters
fileType: (string | undefined)
ext: (string | undefined)
(num: number, formatter: NumberFormat) => string
Parameters
num: number
formatter?: NumberFormat
Class
▶
Constructor
() => {}
Properties
Parameter passed to triggered menu item actions.
actionParam: InputSignal<unknown> = ...
Menu items to render. Supports legacy and current menu item models.
items: InputSignal<(readonly (MenuItem | MenuItem)[] | undefined)> = ...
linkActionService: (SiLinkActionService | null) = ...
menuActionService: (SiMenuActionService | null) = ...
Methods
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: MenuItem) => void
Parameters
item: MenuItem
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)) => void
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
(index: number, item: (MenuItem | MenuItem)) => (string | number)
Parameters
index: number
item: (MenuItem | MenuItem)
Class
▶
Constructor
() => {}
Properties
Observable which emits the link and param to run the action on.
action$: Observable<LinkAction> = this.actionSubject.asObservable()
actionSubject: Subject<LinkAction> = ...
Methods
(link: Link, param: any) => void
Emit a new link and param pair to run the action on.
Parameters
param: any

Except where otherwise noted, content on this site is licensed under MIT License.