Skip to content

ChatInputAttachment Type documentation

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 chat container component
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

Types Documentation

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>)
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)
(sanitizer: DomSanitizer) => (text: string) => Node
Function
Returns a markdown renderer function which_ - Transforms markdown text into formatted HTML. - Returns a DOM node containing the formatted content.

Warning: The returned Node is inserted without additional sanitization. Input content is sanitized before processing.

@param: Angular DomSanitizer instance

Returns A function taking the markdown text to transform and returning a DOM div element containing the formatted HTML
Parameters
sanitizer: DomSanitizer

(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.
Actions for messages representing an action with icon, label (for accessibility), and handler, for use within SiAiMessageComponent and SiUserMessageComponent . Only the icon will be displayed.
See - SiAiMessageComponent for the AI message - SiUserMessageComponent for thee user message
Properties
Action that is called when the item is triggered.
action: (actionParam: any, source: this) => void
Whether the menu item is disabled.
disabled?: boolean
Icon used to represent the action
icon: string
Label that is shown to the user.
label: TranslatableString
extends UploadFile
Properties
errorText: TranslatableString
file: File from file
fileName: string from fileName
progress: number from progress
size: string from size
status: "invalid"
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
Translatable
import
Properties
errorText?: TranslatableString
file: File
fileName: string
progress: number
size: string
status: ("error" | "invalid" | "success" | "added" | "queued" | "uploading")
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"
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"
Properties
Items that are part of the radio group.
children: [ MenuItemHeader, ...(MenuItemRadio | MenuItemHeader | MenuDivider)[] ]
type: "radio-group"
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"
Properties
The label of the header.
label: string
type: "header"
Properties
type: "divider"
File
Property
string
Property
number
Property
string
Property
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
<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<(undefined | CT)> = ...
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<(undefined | CT)> = ...
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
(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.
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
<T: Record<string, any>> extends ModalDependencyInjectionOptions
Properties
Whether to enable animation.
animated?: boolean
aria-labelled-by value.
ariaLabelledBy?: string
Additional CSS class.
class?: string
Optional environment Injector.
environmentInjector?: EnvironmentInjector from environmentInjector
When set to true, clicking the backdrop has no effect.
ignoreBackdropClick?: boolean
Assign all values to the target component using Object.assign(component, initialState) .
Deprecated: Use inputValues instead.
initialState?: Partial<T>
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
Properties
Optional environment Injector.
environmentInjector?: EnvironmentInjector
Optional element Injector.
injector?: Injector
Additional providers for the modal.
providers?: StaticProvider[]
EnvironmentInjector
Property
Optional environment Injector.
Injector
Property
Optional element Injector.
StaticProvider[]
Property
Additional providers for the modal.
Used in events emitted from SiLinkActionService
Properties
param: any
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[]> = []
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
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
implements AfterViewInit
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<(undefined | string)> = undefined
Parameter to pass to action handlers
actionParam: InputSignal<any> = ...
Primary actions available in the input (attach files, etc.) All actions displayed inline
actions: InputSignal<MessageAction[]> = []
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> = ...
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<(undefined | TranslatableString)> = ...
Emitted when file upload errors occur
fileError: OutputEmitterRef<FileUploadError> = ...
hasActions: Signal<boolean> = ...
hasAttachments: Signal<boolean> = ...
hasContent: Signal<boolean> = ...
hasSecondaryActions: Signal<boolean> = ...
id: string = ...
Emitted when the user wants to interrupt the current operation
interrupt: OutputEmitterRef<void> = ...
Interrupt button label
interruptButtonLabel: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.INTERRUPT:Interrupt`
Whether the input supports interrupting ongoing operations. When active, the send button transforms into an interrupt button (with element-stop-filled icon). If sending is true, the interrupt button will be disabled.
interruptible: InputSignalWithTransform<boolean, unknown> = false
The label for the input, used for accessibility
label: InputSignal<string> = t(() =​> $localize`:@@SI_CHAT_INPUT.LABEL:Chat message input`)
Maximum file size in bytes
maxFileSize: InputSignal<number> = 10485760 (10MB)
Maximum number of characters allowed
maxLength: InputSignal<(undefined | number)> = ...
Placeholder text for the input
placeholder: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.PLACEHOLDER:Enter a message…`
projectedContent: Signal<(undefined | ElementRef<any>)> = ...
Remove attachment aria label prefix
removeAttachmentLabel: InputSignal<TranslatableString> = $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove attachment`
Secondary actions available in dropdown menu
secondaryActions: InputSignal<MenuItem[]> = []
More actions button aria label
secondaryActionsLabel: InputSignal<TranslatableString> = $localize`:@@SI_CHAT_INPUT.SECONDARY_ACTIONS:More actions`
Emitted when the user wants to send a message
send: OutputEmitterRef<{ attachments: ChatInputAttachment[], content: string }> = ...
Send button icon
sendButtonIcon: InputSignal<string> = 'element-send-filled'
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: InputSignalWithTransform<boolean, unknown> = false
showInterruptButton: Signal<boolean> = ...
textInput: Signal<(undefined | ElementRef<HTMLTextAreaElement>)> = ...
Current input value
value: ModelSignal<string> = ''
idCounter: number = 0
Accessors
get attachmentList: Attachment[]
Methods
(event: Event) => void
Parameters
event: Event
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
(textarea: HTMLTextAreaElement) => void
Parameters
textarea: HTMLTextAreaElement
implements AfterContentInit, OnDestroy
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 something like an 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: (undefined | MutationObserver)
isUserAtBottom: boolean = true
messagesContainer: Signal<(undefined | ElementRef<HTMLDivElement>)> = ...
Disables automatic scrolling to the bottom when new content is added.
noAutoScroll: InputSignalWithTransform<boolean, (string | boolean)> = false
platformId: Object = ...
resizeObserver: (undefined | ResizeObserver)
scrollTimeout: (undefined | number)
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
scrollToBottom: () => void
setupContentObserver: () => void
setupResizeObserver: () => void
User message component for displaying the user's messages in conversational interfaces.

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

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

See - SiChatMessageComponent for the base message wrapper component - SiAiMessageComponent for the AI message component - SiAttachmentListComponent for the base attachment component - getMarkdownRenderer for markdown formatting support - SiChatContainerComponent for the chat container to use this within
Constructor
() => {}
Properties
Parameter to pass to action handlers
actionParam: InputSignal<any> = ...
Primary message actions (edit, delete, copy, etc.). All actions displayed inline
actions: InputSignal<MessageAction[]> = []
List of attachments included with this message
attachments: InputSignal<Attachment[]> = []
The user message content
content: InputSignal<string> = ''
Optional formatter function to transform content before display. - Returns string: Content will be inserted as text with built-in sanitization - Returns Node: DOM node will be inserted directly without sanitization

Note: When returning a Node with formatted content, apply the markdown-content class to the root element to ensure proper styling (e.g., div.className = 'markdown-content' ). The function returned by getMarkdownRenderer does this automatically.

Warning: When returning a Node, ensure the content is safe to prevent XSS attacks
contentFormatter: InputSignal<(undefined | (text: string) => (string | Node))> = undefined
formattedContent: Signal<(undefined | ElementRef<HTMLDivElement>)> = ...
hasAttachments: Signal<boolean> = ...
Secondary actions available in dropdown menu, first use primary actions and only add secondary actions additionally
secondaryActions: InputSignal<MenuItem[]> = []
More actions button aria label
secondaryActionsLabel: InputSignal<TranslatableString> = $localize`:@@SI_USER_MESSAGE.SECONDARY_ACTIONS:More actions`
textContent: WritableSignal<(undefined | string)> = ...
AI message component for displaying AI-generated responses in conversational interfaces.

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

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

See - SiChatMessageComponent for the base message wrapper component - SiUserMessageComponent for the user message component - getMarkdownRenderer for markdown formatting support - SiChatContainerComponent for the chat container to use this within
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<MessageAction[]> = []
The AI-generated message content
content: InputSignal<string> = ''
Optional formatter function to transform content before display. - Returns string: Content will be sanitized using Angular's DomSanitizer - Returns Node: DOM node will be inserted directly without sanitization

Note: If using a markdown renderer, make sure to apply the markdown-content class to the root element to ensure proper styling using the Element theme (e.g., div.className = 'markdown-content' ). The function returned by getMarkdownRenderer does this automatically.

Warning: When returning a Node, ensure the content is safe to prevent XSS attacks
contentFormatter: InputSignal<(undefined | (text: string) => (string | Node))> = undefined
formattedContent: Signal<(undefined | ElementRef<HTMLDivElement>)> = ...
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<MenuItem[]> = []
More actions button aria label
secondaryActionsLabel: InputSignal<TranslatableString> = $localize`:@@SI_AI_MESSAGE.SECONDARY_ACTIONS:More actions`
textContent: WritableSignal<(undefined | string)> = ...
Base declarative chat message component that provides the layout structure for chat messages.

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

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

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

See - SiUserMessageComponent for user message display - SiAiMessageComponent for AI message display - SiAttachmentListComponent for attachment list to slot in - SiChatMessageActionDirective for action buttons to slot in - SiMarkdownRendererComponent for markdown content rendering - SiChatContainerComponent for the chat container to use this within
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
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
() => {}
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
() => {}
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
Component to display markdown text, uses the getMarkdownRenderer function internally, relies on markdown-content theme class.
Constructor
() => {}
Properties
hostElement: ElementRef<any> = ...
markdownRenderer: (text: string) => Node = ...
sanitizer: DomSanitizer = ...
The markdown text to transform and display
text: InputSignal<string> = ''
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
() => {}
Constructor
() => {}
Properties
actionParam: InputSignal<unknown> = ...
items: InputSignal<(undefined | readonly (MenuItem | MenuItem)[])> = ...
linkActionService: (null | SiLinkActionService) = ...
menuActionService: (null | SiMenuActionService) = ...
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)
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.