Skip to content

ChatMessage Type documentation

(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

Types Documentation

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"
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"
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"
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
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")
Parent contract used by SiChatInputComponent when it is projected into a chat container.
Properties
inputInterruptible: Signal<boolean>
inputSending: Signal<boolean>
Methods
onInputSend: () => void
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"
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>)
(boolean | Signal<boolean>)
Property
Whether the message is currently loading/being generated - can be a boolean or Signal
(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.
("base-1" | "base-0")
Use this type with filter components colorVariant to render component variants based on background of container
Signal<boolean>
Property
Signal<boolean>
Property
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")
() => void
Method

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
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"
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
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
(string | number)
Property
Badge that is rendered after the label.
string
Property
Color of the badge (not iconBadge).
boolean
Property
Whether the menu item id disabled.
string
Property
Optional icon that will be rendered before the label.
(string | number | boolean)
Property
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
string
Property
ID that will be attached to the DOM node.
TranslatableString
Property
Label that is shown to the user.
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
Properties
errorParams?: Record<string, unknown>
errorText?: TranslatableString
file: File
fileName: string
progress: number
size: string
status: ("error" | "invalid" | "success" | "added" | "queued" | "uploading")
<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
string
Property
File name
(TemplateRef<any> | () => TemplateRef<any>)
Property
Optionally show a preview of the attachment by providing a template that is shown in a modal when clicked (optional)
Record<string, unknown>
Property
File
Property
string
Property
number
Property
string
Property
string from description
Property
Optional source description.
Type<T>
Property
The component used to render the node
any
Property
Options passed to the component
(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[]
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
string
Property
Optional source description.
<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
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
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: 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
(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
Used in events emitted from SiLinkActionService
Properties
param: any
Properties
Optional environment Injector.
environmentInjector?: EnvironmentInjector
Optional element Injector.
injector?: Injector
Additional providers for the modal.
providers?: StaticProvider[]
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")
EnvironmentInjector
Property
Optional environment Injector.
Injector
Property
Optional element Injector.
StaticProvider[]
Property
Additional providers for the modal.
import
imported from @types/mdast
import
imported from @types/mdast
string
Property
Source name displayed to the user.
string
Property
Optional source quote. Takes precedence over description .
string
Property
Source URL.
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"
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
▶
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 AfterViewInit
Class
▶
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
Constructor
() => {}
Properties
Accepted file types for attachments (as accept string)
accept: InputSignal<(string | undefined)> = undefined
Parameter to pass to action handlers
actionParam: InputSignal<any> = ...
Primary actions available in the input. Provide at most one action.
actions: InputSignal<MenuItemAction[]> = []
Whether file attachments are supported
allowAttachments: InputSignal<boolean> = false
Attach file button aria label
attachFileLabel: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.ATTACH_FILE:Attach file`
Current attachments
attachments: ModelSignal<ChatInputAttachment[]> = []
Auto-focus the input on component initialization
autoFocus: InputSignalWithTransform<boolean, unknown> = false
buttonDisabled: Signal<boolean> = ...
buttonIcon: Signal<string> = ...
buttonLabel: Signal<TranslatableString> = ...
canSend: Signal<boolean> = ...
combinedMenuActions: Signal<MenuItemAction[]> = ...
Whether the input is disabled
disabled: InputSignalWithTransform<boolean, unknown> = false
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).
disclaimer: InputSignal<(TranslatableString | undefined)> = ...
dragOver: WritableSignal<boolean> = ...
Emitted when file upload errors occur
fileError: OutputEmitterRef<FileUploadError> = ...
fileInput: Signal<(ElementRef<HTMLInputElement> | undefined)> = ...
fileUploadDirective: Signal<(SiFileUploadDirective | undefined)> = ...
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.
followUpPrompts: InputSignal<string[]> = []
Emitted when the user selects a follow-up prompt. The emitted value is the text of the selected prompt.
followUpPromptSelected: OutputEmitterRef<string> = ...
hasActions: Signal<boolean> = ...
hasAttachments: Signal<boolean> = ...
hasContent: Signal<boolean> = ...
hasMenuActions: Signal<boolean> = ...
hasSecondaryActions: Signal<boolean> = ...
icons: Record<("elementAttachment" | "elementPlus" | "elementSendFilled" | "elementStopFilled"), string> = ...
id: string = ...
injector: Injector = ...
Emitted when the user wants to interrupt the current operation
interrupt: OutputEmitterRef<void> = ...
Interrupt button label
interruptButtonLabel: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.INTERRUPT:Stop processing`
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: ModelSignal<boolean> = false
The label for the input, used for accessibility
label: InputSignal<string> = t(() =​> $localize`:@@SI_CHAT_INPUT.LABEL:Chat input`)
Maximum file size in bytes
maxFileSize: InputSignal<number> = 10485760 (10MB)
Maximum number of characters allowed
maxLength: InputSignal<(number | undefined)> = ...
menuActionService: (SiMenuActionService | null) = ...
parent: (SiChatInputParent | null) = ...
Placeholder text for the input
placeholder: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.PLACEHOLDER:Enter a message…`
Remove attachment aria label. The attachment name is available with {{attachment}} .
removeAttachmentLabel: InputSignal<TranslatableString> = $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove {{attachment}}`
Secondary actions available in dropdown menu
secondaryActions: InputSignal<MenuItemAction[]> = []
More actions button aria label
secondaryActionsLabel: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.SECONDARY_ACTIONS:Additional actions`
Emitted when the user wants to send a message
send: OutputEmitterRef<{ attachments: ChatInputAttachment[], content: string }> = ...
Send button icon
sendButtonIcon: InputSignal<string> = this.icons.elementSendFilled
Send button label
sendButtonLabel: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.SEND:Send`
Whether a message is currently being sent, also prevent the sending of new ones while still allowing the user to type
sending: ModelSignal<boolean> = false
showInterruptButton: Signal<boolean> = ...
textInput: Signal<(ElementRef<HTMLTextAreaElement> | undefined)> = ...
Current input value
value: ModelSignal<string> = ''
idCounter: number = 0
Methods
(event: Event) => void
Parameters
event: Event
(event: DragEvent) => void
Parameters
event: DragEvent
(event: DragEvent) => void
Parameters
event: DragEvent
Focus the textarea input
focus: () => void
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
onButtonClick: () => void
(event: Event) => void
Parameters
event: Event
(error: FileUploadError) => void
Parameters
error: FileUploadError
(uploadFiles: UploadFile[]) => void
Parameters
uploadFiles: UploadFile[]
(value: string) => void
Parameters
value: string
(event: KeyboardEvent) => void
Parameters
event: KeyboardEvent
onSend: () => void
(attachment: Attachment) => void
Parameters
attachment: Attachment
(action: MenuItemAction) => void
Parameters
action: MenuItemAction
(prompt: string) => void
Parameters
prompt: string
(textarea: HTMLTextAreaElement) => void
Parameters
textarea: HTMLTextAreaElement
triggerFileInput: () => void
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
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
▶
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
▶
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 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
▶
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
▶
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
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
▶
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.