@siemens/element-ng 48.2.0 → 48.3.0

package/chat-messages/index.d.ts

@@ -0,0 +1,654 @@
+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, 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.
+ * Only the icon will be displayed.
+ * @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.
+ *
+ * @remarks
+ * This component is designed for use in:
+ * - AI chat interfaces where model responses need to be displayed
+ * - Chatbot implementations
+ * - Conversational AI applications
+ * - AI assistant interfaces
+ *
+ * The component automatically handles:
+ * - Rendering markdown content with syntax highlighting
+ * - Showing loading states with skeleton UI during generation
+ * - Displaying primary and secondary actions on hover (desktop) or tap (mobile)
+ * - Proper alignment and styling for AI messages
+ * - Content sanitization for security
+ *
+ * @example
+ * Basic usage with content only:
+ * ```html
+ * <si-ai-message [content]="'I can help you with that.'" />
+ * ```
+ *
+ * @example
+ * With loading state and actions:
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { SiAiMessageComponent } from '@siemens/element-ng/chat-messages';
+ *
+ * @Component({
+ *   selector: 'app-chat',
+ *   imports: [SiAiMessageComponent],
+ *   template: `
+ *     <si-ai-message
+ *       [content]="message.text"
+ *       [loading]="message.isGenerating"
+ *       [actions]="messageActions"
+ *       [secondaryActions]="menuActions"
+ *       [actionParam]="message"
+ *     />
+ *   `
+ * })
+ * export class ChatComponent {
+ *   messageActions = [
+ *     { icon: 'thumbs-up', label: 'Good response', action: (id) => this.ratePositive(id) },
+ *     { icon: 'thumbs-down', label: 'Bad response', action: (id) => this.rateNegative(id) },
+ *     { icon: 'copy', label: 'Copy', action: (id) => this.copyMessage(id) }
+ *   ];
+ *
+ *   menuActions = [
+ *     { label: 'Regenerate', action: (id) => this.regenerate(id) },
+ *     { label: 'Report', action: (id) => this.reportMessage(id) }
+ *   ];
+ * }
+ * ```
+ *
+ * @see {@link SiChatMessageComponent} for the base message wrapper component
+ * @see {@link SiUserMessageComponent} for the companion user message component
+ * @see {@link getMarkdownRenderer} for markdown formatting support
+ *
+ * @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.
+ *
+ * @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.
+ *
+ * @remarks
+ * This component provides:
+ * - Automatic file type detection with appropriate icons
+ * - Optional preview modal for attachments
+ * - Optional remove functionality for editable messages
+ * - Flexible alignment (start/end) to match message alignment
+ * - Support for various file types (images, videos, audio, documents, archives)
+ *
+ * The component is typically used within {@link SiUserMessageComponent} or {@link SiAiMessageComponent}
+ * to display uploaded files, but can also be used standalone.
+ *
+ * @example
+ * Basic usage with attachments:
+ * ```html
+ * <si-attachment-list [attachments]="files" />
+ * ```
+ *
+ * @example
+ * With remove functionality and custom alignment:
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { SiAttachmentListComponent, Attachment } from '@siemens/element-ng/chat-messages';
+ *
+ * @Component({
+ *   selector: 'app-chat',
+ *   imports: [SiAttachmentListComponent],
+ *   template: `
+ *     <si-attachment-list
+ *       [attachments]="attachments"
+ *       [alignment]="'end'"
+ *       [removable]="true"
+ *       (remove)="handleRemove($event)"
+ *     />
+ *   `
+ * })
+ * export class ChatComponent {
+ *   attachments: Attachment[] = [
+ *     { id: '1', name: 'report.pdf' },
+ *     { id: '2', name: 'image.png', previewTemplate: this.imagePreview }
+ *   ];
+ *
+ *   handleRemove(attachment: Attachment) {
+ *     this.attachments = this.attachments.filter(a => a !== attachment);
+ *   }
+ * }
+ * ```
+ *
+ * @see {@link SiUserMessageComponent} for user message display
+ * @see {@link SiAiMessageComponent} for AI message display
+ * @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>;
+}
+
+interface ChatInputAttachment extends Attachment {
+    /** File object */
+    file: File;
+    /** File size in bytes */
+    size: number;
+    /** MIME type */
+    type: string;
+}
+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.
+ * 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>
+ * ```
+ */
+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.
+ * Apply this directive to e.g. buttons that should be slotted into the message actions area.
+ *
+ * @experimental
+ * @example
+ * ```html
+ * <si-chat-message>
+ *   Message content
+ *   <button siChatMessageAction>Like</button>
+ *   <button siChatMessageAction>Share</button>
+ * </si-chat-message>
+ * ```
+ */
+declare class SiChatMessageActionDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatMessageActionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiChatMessageActionDirective, "[siChatMessageAction]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Base chat message component that provides the layout structure for conversational interfaces.
+ *
+ * This component handles the core message layout including avatar positioning, loading states,
+ * and action button placement. It serves as the foundation for more specialized message components
+ * like {@link SiUserMessageComponent} and {@link SiAiMessageComponent}.
+ *
+ * @remarks
+ * 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
+ * - Responsive behavior that adapts to container size
+ * - Attachment display slot
+ *
+ * This is a low-level component typically not used directly. Instead, use the higher-level
+ * message components that wrap this component with specific styling and behavior.
+ *
+ * @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 user input in conversational interfaces.
+ *
+ * The user message component renders user-submitted content in 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.
+ *
+ * @remarks
+ * This component is designed for use in:
+ * - AI chat interfaces where user input needs to be displayed
+ * - Peer-to-peer conversation interfaces
+ * - Conversation histories or chat transcripts
+ *
+ * The component automatically handles:
+ * - Rendering markdown content with syntax highlighting
+ * - Displaying attachments above the message bubble
+ * - Showing primary and secondary actions on hover (desktop) or tap (mobile)
+ * - Proper alignment and styling for user messages
+ *
+ * @example
+ * Basic usage with content only:
+ * ```html
+ * <si-user-message [content]="'Hello, how can I help you?'" />
+ * ```
+ *
+ * @example
+ * With actions and attachments:
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { SiUserMessageComponent } from '@siemens/element-ng/chat-messages';
+ *
+ * @Component({
+ *   selector: 'app-chat',
+ *   imports: [SiUserMessageComponent],
+ *   template: `
+ *     <si-user-message
+ *       [content]="message.text"
+ *       [actions]="messageActions"
+ *       [secondaryActions]="menuActions"
+ *       [attachments]="message.attachments"
+ *       [actionParam]="message"
+ *     />
+ *   `
+ * })
+ * export class ChatComponent {
+ *   messageActions = [
+ *     { icon: 'copy', label: 'Copy', action: (id) => this.copyMessage(id) },
+ *     { icon: 'edit', label: 'Edit', action: (id) => this.editMessage(id) }
+ *   ];
+ *
+ *   menuActions = [
+ *     { label: 'Delete', action: (id) => this.deleteMessage(id) }
+ *   ];
+ * }
+ * ```
+ *
+ * @see {@link SiChatMessageComponent} for the base message wrapper component
+ * @see {@link SiAttachmentListComponent} for attachment handling
+ * @see {@link SiMarkdownRendererComponent} for markdown rendering
+ *
+ * @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, 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"
+}

package/dashboard/index.d.ts

@@ -65,6 +65,7 @@ declare class SiDashboardCardComponent extends SiCardComponent implements OnDest
     protected readonly actionBarViewTypeComputed: _angular_core.Signal<_siemens_element_ng_content_action_bar.ViewType>;
     protected readonly actionBarTitleComputed: _angular_core.Signal<_siemens_element_translate_ng_translate_types.TranslatableString>;
     protected readonly primaryActionsComputed: _angular_core.Signal<(MenuItem | ContentActionBarMainItem)[]>;
+    private readonly icons;
     private readonly expandRestoreIconTooltip;
     private readonly expandActionItem;
     private readonly restoreActionItem;

package/fesm2022/siemens-element-ng-accordion.mjs

@@ -105,7 +105,11 @@ class SiCollapsiblePanelComponent {
      * @defaultValue false
      */
     disabled = input(false, { transform: booleanAttribute });
-    /** Color to use for component background */
+    /**
+     * Color variant for component background.
+     *
+     * @deprecated This input has no effect on the component styling.
+     */
     colorVariant = input();
     /**
      * Defines the content of the optional badge. Should be a number or something like "100+".