@siemens/element-ng 48.2.0 → 48.4.0

package/chat-messages/index.d.ts

@@ -0,0 +1,670 @@
+import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
+import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
+import * as _angular_core from '@angular/core';
+import { ElementRef, TemplateRef, AfterContentInit, OnDestroy, AfterViewInit } from '@angular/core';
+import { MenuItem } from '@siemens/element-ng/menu';
+import { SiModalService } from '@siemens/element-ng/modal';
+import { FileUploadError, UploadFile } from '@siemens/element-ng/file-uploader';
+import { TranslatableString as TranslatableString$1 } from '@siemens/element-translate-ng/translate';
+import * as i1 from '@siemens/element-ng/resize-observer';
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Actions for messages representing an action with icon, label (for accessibility), and handler, for use within {@link SiAiMessageComponent} and {@link SiUserMessageComponent}.
+ * Only the icon will be displayed.
+ *
+ * @see {@link SiAiMessageComponent} for the AI message
+ * @see {@link SiUserMessageComponent} for thee user message
+ *
+ * @experimental
+ */
+interface MessageAction {
+    /** Label that is shown to the user. */
+    label: TranslatableString;
+    /**
+     * Icon used to represent the action
+     */
+    icon: string;
+    /**
+     * Action that is called when the item is triggered.
+     */
+    action: (actionParam: any, source: this) => void;
+    /** Whether the menu item is disabled. */
+    disabled?: boolean;
+}
+
+/**
+ * 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 {@link 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 {@link getMarkdownRenderer})
+ * - Showing loading states with skeleton UI during generation
+ * - Displaying primary and secondary actions
+ *
+ * @see {@link SiChatMessageComponent} for the base message wrapper component
+ * @see {@link SiUserMessageComponent} for the user message component
+ * @see {@link getMarkdownRenderer} for markdown formatting support
+ * @see {@link SiChatContainerComponent} for the chat container to use this within
+ *
+ * @experimental
+ */
+declare class SiAiMessageComponent {
+    protected readonly formattedContent: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    /**
+     * The AI-generated message content
+     * @defaultValue ''
+     */
+    readonly content: _angular_core.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 {@link getMarkdownRenderer} does this automatically.
+     *
+     * **Warning:** When returning a Node, ensure the content is safe to prevent XSS attacks
+     * @defaultValue undefined
+     */
+    readonly contentFormatter: _angular_core.InputSignal<((text: string) => string | Node) | undefined>;
+    protected readonly textContent: _angular_core.WritableSignal<string | undefined>;
+    constructor();
+    /**
+     * Whether the message is currently being generated (shows skeleton)
+     * @defaultValue false
+     */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Primary actions available for this message (thumbs up/down, copy, retry, etc.)
+     * All actions displayed inline
+     * @defaultValue []
+     */
+    readonly actions: _angular_core.InputSignal<MessageAction[]>;
+    /**
+     * Secondary actions available in dropdown menu, first use primary actions and only add secondary actions additionally
+     * @defaultValue []
+     */
+    readonly secondaryActions: _angular_core.InputSignal<MenuItem[]>;
+    /** Parameter to pass to action handlers */
+    readonly actionParam: _angular_core.InputSignal<unknown>;
+    /**
+     * More actions button aria label
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_AI_MESSAGE.SECONDARY_ACTIONS:More actions`)
+     * ```
+     */
+    readonly secondaryActionsLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiAiMessageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiAiMessageComponent, "si-ai-message", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "contentFormatter": { "alias": "contentFormatter"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "actionParam": { "alias": "actionParam"; "required": false; "isSignal": true; }; "secondaryActionsLabel": { "alias": "secondaryActionsLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Attachment item interface for file attachments in chat messages, used by {@link SiAttachmentListComponent} and inside {@link SiUserMessageComponent} as well as {@link SiChatInputComponent}.
+ *
+ * @see {@link SiAttachmentListComponent} for the attachment list component
+ * @see {@link SiUserMessageComponent} for the user message
+ * @see {@link SiChatInputComponent} for the chat input component
+ *
+ * @experimental
+ */
+interface Attachment {
+    /** 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>);
+}
+/**
+ * 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 {@link SiUserMessageComponent}, {@link SiAiMessageComponent} and {@link SiChatInputComponent} but can also be used inside custom chat messages with {@link SiChatMessageComponent}
+ *
+ * @see {@link SiUserMessageComponent} for user message display
+ * @see {@link SiAiMessageComponent} for AI message display
+ * @see {@link SiChatMessageComponent} for custom chat message display
+ * @see {@link SiChatInputComponent} for chat input with attachment support
+ * @see {@link Attachment} for attachment data structure
+ *
+ * @experimental
+ */
+declare class SiAttachmentListComponent {
+    protected modalService: SiModalService;
+    /**
+     * List of attachments to display
+     * @defaultValue []
+     */
+    readonly attachments: _angular_core.InputSignal<Attachment[]>;
+    /**
+     * Whether to align attachments to the end (right) or start (left)
+     * @defaultValue 'start'
+     */
+    readonly alignment: _angular_core.InputSignal<"start" | "end">;
+    /**
+     * Whether to show remove buttons on attachments
+     * @defaultValue false
+     */
+    readonly removable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Label for remove attachment button
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove attachment`)
+     * ```
+     */
+    readonly removeLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    /**
+     * Emitted when an attachment should be removed
+     */
+    readonly remove: _angular_core.OutputEmitterRef<Attachment>;
+    private getPreviewTemplate;
+    protected openPreview(event: Event, attachment: Attachment): void;
+    protected getFileIcon(name: string): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiAttachmentListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiAttachmentListComponent, "si-attachment-list", never, { "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "remove": "remove"; }, never, never, true, never>;
+}
+
+/**
+ * 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 {@link SiChatInputComponent} for the chat input wrapper component
+ * @see {@link SiChatContainerInputDirective} for other input controls to slot in
+ * @see {@link SiAiMessageComponent} for AI messages to slot in
+ * @see {@link SiUserMessageComponent} for user messages (in AI chats) to slot in
+ * @see {@link SiChatMessageComponent} for the chat message wrapper component to slot in other messages
+ *
+ * @experimental
+ */
+declare class SiChatContainerComponent implements AfterContentInit, OnDestroy {
+    private readonly messagesContainer;
+    private readonly platformId;
+    private isUserAtBottom;
+    private scrollTimeout;
+    private resizeObserver;
+    private contentObserver;
+    /**
+     * The color variant to apply to the container.
+     * @defaultValue 'base-0'
+     */
+    readonly colorVariant: _angular_core.InputSignal<string>;
+    /**
+     * Disables automatic scrolling to the bottom when new content is added.
+     * @defaultValue false
+     */
+    readonly noAutoScroll: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    constructor();
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    private scrollToBottom;
+    private debouncedScrollToBottom;
+    private setupResizeObserver;
+    private setupContentObserver;
+    private checkIfUserAtBottom;
+    protected onScroll(): void;
+    /**
+     * Focuses the messages container element.
+     */
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiChatContainerComponent, "si-chat-container", never, { "colorVariant": { "alias": "colorVariant"; "required": false; "isSignal": true; }; "noAutoScroll": { "alias": "noAutoScroll"; "required": false; "isSignal": true; }; }, {}, never, ["*", "si-inline-notification", "si-chat-input,[siChatContainerInput]"], true, never>;
+}
+
+/**
+ * A directive to mark elements as input controls within a {@link 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
+ * ```html
+ * <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 {@link SiChatContainerComponent} for the chat container wrapper component
+ *
+ * @experimental
+ */
+declare class SiChatContainerInputDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatContainerInputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiChatContainerInputDirective, "[siChatContainerInput]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Attachment item interface for file attachments in chat messages, extension of {@link Attachment} for {@link SiAttachmentListComponent} to use within {@link SiChatInputComponent}.
+ * Adds the action file information.
+ * Can be used within {@link SiChatContainerComponent}.
+ *
+ * @see {@link Attachment} for base attachment interface
+ * @see {@link SiAttachmentListComponent} for the attachment list component
+ * @see {@link SiChatInputComponent} for the chat input component
+ * @see {@link SiChatContainerComponent} for the chat container component
+ *
+ * @experimental
+ */
+interface ChatInputAttachment extends Attachment {
+    /** File object */
+    file: File;
+    /** File size in bytes */
+    size: number;
+    /** MIME type */
+    type: string;
+}
+/**
+ * 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 {@link SiAttachmentListComponent} for the base attachment component
+ * @see {@link SiChatInputDisclaimerDirective} to slot in custom disclaimer content
+ *
+ * @experimental
+ */
+declare class SiChatInputComponent implements AfterViewInit {
+    private static idCounter;
+    private readonly textInput;
+    private readonly projectedContent;
+    /**
+     * Current input value
+     * @defaultValue ''
+     */
+    readonly value: _angular_core.ModelSignal<string>;
+    /**
+     * Placeholder text for the input
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CHAT_INPUT.PLACEHOLDER:Enter a message…`)
+     * ```
+     */
+    readonly placeholder: _angular_core.InputSignal<TranslatableString$1>;
+    /**
+     * Whether the input is disabled
+     * @defaultValue false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether a message is currently being sent, also prevent the sending of new ones while still allowing the user to type
+     * @defaultValue false
+     */
+    readonly sending: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 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.
+     * @defaultValue false
+     */
+    readonly interruptible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Maximum number of characters allowed
+     */
+    readonly maxLength: _angular_core.InputSignal<number | undefined>;
+    /**
+     * 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).
+     */
+    readonly disclaimer: _angular_core.InputSignal<TranslatableString$1 | undefined>;
+    /**
+     * Primary actions available in the input (attach files, etc.)
+     * All actions displayed inline
+     * @defaultValue []
+     */
+    readonly actions: _angular_core.InputSignal<MessageAction[]>;
+    /**
+     * Secondary actions available in dropdown menu
+     * @defaultValue []
+     */
+    readonly secondaryActions: _angular_core.InputSignal<MenuItem[]>;
+    /**
+     * Whether file attachments are supported
+     * @defaultValue false
+     */
+    readonly allowAttachments: _angular_core.InputSignal<boolean>;
+    /**
+     * Accepted file types for attachments (as accept string)
+     * @defaultValue undefined
+     */
+    readonly accept: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Maximum file size in bytes
+     * @defaultValue 10485760 (10MB)
+     */
+    readonly maxFileSize: _angular_core.InputSignal<number>;
+    /**
+     * Current attachments
+     * @defaultValue []
+     */
+    readonly attachments: _angular_core.ModelSignal<ChatInputAttachment[]>;
+    /**
+     * The label for the input, used for accessibility
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CHAT_INPUT.LABEL:Chat message input`)
+     * ```
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Parameter to pass to action handlers */
+    readonly actionParam: _angular_core.InputSignal<any>;
+    /**
+     * Send button label
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CHAT_INPUT.SEND:Send`)
+     * ```
+     */
+    readonly sendButtonLabel: _angular_core.InputSignal<TranslatableString$1>;
+    /**
+     * Send button icon
+     *
+     * @defaultValue 'element-send-filled'
+     */
+    readonly sendButtonIcon: _angular_core.InputSignal<string>;
+    /**
+     * Interrupt button label
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CHAT_INPUT.INTERRUPT:Interrupt`)
+     * ```
+     */
+    readonly interruptButtonLabel: _angular_core.InputSignal<TranslatableString$1>;
+    /**
+     * Auto-focus the input on component initialization
+     * @defaultValue false
+     */
+    readonly autoFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Attach file button aria label
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CHAT_INPUT.ATTACH_FILE:Attach file`)
+     * ```
+     */
+    readonly attachFileLabel: _angular_core.InputSignal<TranslatableString$1>;
+    /**
+     * Remove attachment aria label prefix
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove attachment`)
+     * ```
+     */
+    readonly removeAttachmentLabel: _angular_core.InputSignal<TranslatableString$1>;
+    /**
+     * More actions button aria label
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CHAT_INPUT.SECONDARY_ACTIONS:More actions`)
+     * ```
+     */
+    readonly secondaryActionsLabel: _angular_core.InputSignal<TranslatableString$1>;
+    /**
+     * Emitted when the user wants to send a message
+     */
+    readonly send: _angular_core.OutputEmitterRef<{
+        content: string;
+        attachments: ChatInputAttachment[];
+    }>;
+    /**
+     * Emitted when the user wants to interrupt the current operation
+     */
+    readonly interrupt: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emitted when file upload errors occur
+     */
+    readonly fileError: _angular_core.OutputEmitterRef<FileUploadError>;
+    protected readonly id: string;
+    protected readonly hasContent: _angular_core.Signal<boolean>;
+    protected readonly hasAttachments: _angular_core.Signal<boolean>;
+    protected readonly hasActions: _angular_core.Signal<boolean>;
+    protected readonly hasSecondaryActions: _angular_core.Signal<boolean>;
+    protected readonly canSend: _angular_core.Signal<boolean>;
+    protected readonly showInterruptButton: _angular_core.Signal<boolean>;
+    protected readonly buttonDisabled: _angular_core.Signal<boolean>;
+    protected readonly buttonIcon: _angular_core.Signal<string>;
+    protected readonly buttonLabel: _angular_core.Signal<TranslatableString$1>;
+    protected get attachmentList(): Attachment[];
+    protected onInputChange(value: string): void;
+    protected onSend(): void;
+    protected onButtonClick(): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    protected onFilesAdded(uploadFiles: UploadFile[]): void;
+    protected onFileError(error: FileUploadError): void;
+    protected removeAttachment(attachment: Attachment): void;
+    protected onContainerClick(event: Event): void;
+    ngAfterViewInit(): void;
+    protected adjustTextareaHeight(event: Event): void;
+    /**
+     * Focus the textarea input
+     */
+    focus(): void;
+    private setTextareaHeight;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiChatInputComponent, "si-chat-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "sending": { "alias": "sending"; "required": false; "isSignal": true; }; "interruptible": { "alias": "interruptible"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "disclaimer": { "alias": "disclaimer"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "allowAttachments": { "alias": "allowAttachments"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "actionParam": { "alias": "actionParam"; "required": false; "isSignal": true; }; "sendButtonLabel": { "alias": "sendButtonLabel"; "required": false; "isSignal": true; }; "sendButtonIcon": { "alias": "sendButtonIcon"; "required": false; "isSignal": true; }; "interruptButtonLabel": { "alias": "interruptButtonLabel"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "attachFileLabel": { "alias": "attachFileLabel"; "required": false; "isSignal": true; }; "removeAttachmentLabel": { "alias": "removeAttachmentLabel"; "required": false; "isSignal": true; }; "secondaryActionsLabel": { "alias": "secondaryActionsLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "attachments": "attachmentsChange"; "send": "send"; "interrupt": "interrupt"; "fileError": "fileError"; }, never, ["*", "[siChatInputDisclaimer]"], true, never>;
+}
+
+/**
+ * Directive to mark content as chat input disclaimer into {@link SiChatInputComponent}.
+ * Apply this directive to content that should be slotted into the disclaimer area.
+ *
+ * @example
+ * ```html
+ * <si-chat-input>
+ *   <div siChatInputDisclaimer>
+ *     Custom disclaimer content
+ *   </div>
+ * </si-chat-input>
+ * ```
+ *
+ * @see {@link SiChatInputComponent} for the chat input wrapper component
+ *
+ * @experimental
+ */
+declare class SiChatInputDisclaimerDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatInputDisclaimerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiChatInputDisclaimerDirective, "[siChatInputDisclaimer]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to mark content as chat message actions into {@link SiChatMessageComponent}.
+ * Apply this directive to e.g. buttons that should be slotted into the message actions area.
+ *
+ * @example
+ * ```html
+ * <si-chat-message>
+ *   Message content
+ *   <button siChatMessageAction>Like</button>
+ *   <button siChatMessageAction>Share</button>
+ * </si-chat-message>
+ * ```
+ *
+ * @see {@link SiChatMessageComponent} for the chat message wrapper component
+ *
+ * @experimental
+ */
+declare class SiChatMessageActionDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatMessageActionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiChatMessageActionDirective, "[siChatMessageAction]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * 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 {@link SiUserMessageComponent} and {@link SiAiMessageComponent}.
+ * Can be used within {@link 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 {@link 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 {@link SiUserMessageComponent} for user message display
+ * @see {@link SiAiMessageComponent} for AI message display
+ * @see {@link SiAttachmentListComponent} for attachment list to slot in
+ * @see {@link SiChatMessageActionDirective} for action buttons to slot in
+ * @see {@link SiMarkdownRendererComponent} for markdown content rendering
+ * @see {@link SiChatContainerComponent} for the chat container to use this within
+ *
+ * @experimental
+ */
+declare class SiChatMessageComponent {
+    /**
+     * Whether the message is currently loading
+     * @defaultValue false
+     */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Alignment of the message
+     * @defaultValue 'start'
+     */
+    readonly alignment: _angular_core.InputSignal<"start" | "end">;
+    /**
+     * Where to display action buttons (if any)
+     * @defaultValue 'side'
+     */
+    readonly actionsPosition: _angular_core.InputSignal<"bottom" | "side">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatMessageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiChatMessageComponent, "si-chat-message", never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "actionsPosition": { "alias": "actionsPosition"; "required": false; "isSignal": true; }; }, {}, never, ["si-icon,si-avatar,img", "si-attachment-list,si-badge", "*", "[siChatMessageAction]"], true, [{ directive: typeof i1.SiResponsiveContainerDirective; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * 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 {@link 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 {@link getMarkdownRenderer})
+ * - Displaying attachments above the message bubble
+ * - Displaying primary and secondary actions
+ *
+ * @see {@link SiChatMessageComponent} for the base message wrapper component
+ * @see {@link SiAiMessageComponent} for the AI message component
+ * @see {@link SiAttachmentListComponent} for the base attachment component
+ * @see {@link getMarkdownRenderer} for markdown formatting support
+ * @see {@link SiChatContainerComponent} for the chat container to use this within
+ *
+ * @experimental
+ */
+declare class SiUserMessageComponent {
+    protected readonly formattedContent: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    /**
+     * The user message content
+     * @defaultValue ''
+     */
+    readonly content: _angular_core.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 {@link getMarkdownRenderer} does this automatically.
+     *
+     * **Warning:** When returning a Node, ensure the content is safe to prevent XSS attacks
+     * @defaultValue undefined
+     */
+    readonly contentFormatter: _angular_core.InputSignal<((text: string) => string | Node) | undefined>;
+    /**
+     * Primary message actions (edit, delete, copy, etc.).
+     * All actions displayed inline
+     * @defaultValue []
+     */
+    readonly actions: _angular_core.InputSignal<MessageAction[]>;
+    /**
+     * Secondary actions available in dropdown menu, first use primary actions and only add secondary actions additionally
+     * @defaultValue []
+     */
+    readonly secondaryActions: _angular_core.InputSignal<MenuItem[]>;
+    /**
+     * List of attachments included with this message
+     * @defaultValue []
+     */
+    readonly attachments: _angular_core.InputSignal<Attachment[]>;
+    /** Parameter to pass to action handlers */
+    readonly actionParam: _angular_core.InputSignal<any>;
+    /**
+     * More actions button aria label
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_USER_MESSAGE.SECONDARY_ACTIONS:More actions`)
+     * ```
+     */
+    readonly secondaryActionsLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    protected readonly hasAttachments: _angular_core.Signal<boolean>;
+    protected readonly textContent: _angular_core.WritableSignal<string | undefined>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiUserMessageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiUserMessageComponent, "si-user-message", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "contentFormatter": { "alias": "contentFormatter"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "actionParam": { "alias": "actionParam"; "required": false; "isSignal": true; }; "secondaryActionsLabel": { "alias": "secondaryActionsLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SiAiMessageComponent, SiAttachmentListComponent, SiChatContainerComponent, SiChatContainerInputDirective, SiChatInputComponent, SiChatInputDisclaimerDirective, SiChatMessageActionDirective, SiChatMessageComponent, SiUserMessageComponent };
+export type { Attachment, ChatInputAttachment, MessageAction };

package/chat-messages/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-chat-messages.mjs"
+}