@siemens/element-ng 49.16.0 → 51.0.0-rc.10

package/fesm2022/siemens-element-ng-chat-messages.mjs

@@ -1,17 +1,20 @@
 import { CdkMenuTrigger } from '@angular/cdk/menu';
 import * as i0 from '@angular/core';
-import { Directive, input, ChangeDetectionStrategy, Component, viewChild, signal, effect, booleanAttribute, inject, output, PLATFORM_ID, model, computed } from '@angular/core';
-import { elementOptionsVertical, elementDocument, elementStateClose, elementStopFilled, elementSendFilled, elementPlus, elementAttachment } from '@siemens/element-icons';
+import { Directive, input, Component, booleanAttribute, output, model, inject, viewChild, PLATFORM_ID, effect, computed, signal, Injector, afterNextRender } from '@angular/core';
+import { elementOptionsVertical, elementRight2, elementIssue, elementCircleFilled, elementDocument, elementStateClose, elementStopFilled, elementSendFilled, elementPlus, elementAttachment } from '@siemens/element-icons';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { SiMenuFactoryComponent } from '@siemens/element-ng/menu';
+import { SiSourceChipComponent } from '@siemens/element-ng/source-chip';
 import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import * as i1 from '@siemens/element-ng/resize-observer';
 import { SiResponsiveContainerDirective } from '@siemens/element-ng/resize-observer';
+import { SiLoadingSpinnerComponent } from '@siemens/element-ng/loading-spinner';
 import { SiModalService } from '@siemens/element-ng/modal';
 import { isPlatformBrowser } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { SiFileUploadDirective } from '@siemens/element-ng/file-uploader';
+import { SiTooltipDirective } from '@siemens/element-ng/tooltip';
 import { SiActionCardComponent } from '@siemens/element-ng/card';
 import { SiSummaryChipComponent } from '@siemens/element-ng/summary-chip';
 
@@ -37,10 +40,10 @@ import { SiSummaryChipComponent } from '@siemens/element-ng/summary-chip';
  * @experimental
  */
 class SiChatMessageActionDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatMessageActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiChatMessageActionDirective, isStandalone: true, selector: "[siChatMessageAction]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatMessageActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiChatMessageActionDirective, isStandalone: true, selector: "[siChatMessageAction]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatMessageActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatMessageActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siChatMessageAction]'
@@ -68,7 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * - 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)
+ * - Default content: Main message content area (consider using `si-markdown` for markdown support)
  * - `si-avatar/si-icon/img` selector: Avatar or icon representing the message sender
  * - `si-chat-message-action` selector: Action buttons related to the message
  * - `si-attachment-list` selector: Attachment list component for displaying file attachments
@@ -77,7 +80,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * @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
@@ -87,25 +89,28 @@ class SiChatMessageComponent {
      * Whether the message is currently loading
      * @defaultValue false
      */
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     /**
      * Alignment of the message
      * @defaultValue 'start'
      */
-    alignment = input('start', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    alignment = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
     /**
      * Where to display action buttons (if any)
      * @defaultValue 'side'
      */
-    actionsPosition = input('side', ...(ngDevMode ? [{ debugName: "actionsPosition" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiChatMessageComponent, isStandalone: true, selector: "si-chat-message", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, actionsPosition: { classPropertyName: "actionsPosition", publicName: "actionsPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-block" }, hostDirectives: [{ directive: i1.SiResponsiveContainerDirective }], ngImport: i0, template: "<!--- Flex-row if alignment start, flex-row-reverse if alignment end, flex-column if mobile -->\n<div class=\"d-flex si-body-2 chat-message-container\" [class.start]=\"alignment() === 'start'\">\n  <div class=\"avatar-wrapper flex-shrink-0\" [class.end]=\"alignment() === 'end'\">\n    <ng-content select=\"si-icon,si-avatar,img\" />\n  </div>\n\n  <div class=\"d-flex flex-column flex-grow-1 w-100\">\n    <div class=\"attachment-slot\" [class.align-self-end]=\"alignment() === 'end'\">\n      <ng-content select=\"si-attachment-list,si-badge\" />\n    </div>\n\n    @if (loading()) {\n      <div\n        class=\"message-wrapper rounded-3 w-75 text-break loading-message-bubble mb-2\"\n        [class.align-self-end]=\"alignment() === 'end'\"\n      >\n        <div class=\"d-flex flex-column w-100 gap-2\">\n          <div class=\"si-skeleton skeleton-line skeleton-line-full\"></div>\n          <div class=\"si-skeleton skeleton-line skeleton-line-half\"></div>\n        </div>\n      </div>\n    } @else {\n      <!-- Flex-column if actions bottom, flex-row/flex-row-reverse if actions start -->\n      <div\n        class=\"message-wrapper mw-0 d-flex mb-2\"\n        [class.start]=\"alignment() === 'start'\"\n        [class.end]=\"alignment() === 'end'\"\n        [class.flex-column]=\"actionsPosition() === 'bottom'\"\n        [class.flex-row]=\"actionsPosition() === 'side' && alignment() === 'start'\"\n        [class.flex-row-reverse]=\"actionsPosition() === 'side' && alignment() === 'end'\"\n        [class.align-items-start]=\"actionsPosition() === 'side'\"\n        [class.align-items-end]=\"actionsPosition() === 'bottom' && alignment() === 'end'\"\n        [class.justify-content-end]=\"alignment() === 'end' && actionsPosition() === 'bottom'\"\n        [class.justify-content-start]=\"alignment() === 'start' && actionsPosition() === 'bottom'\"\n      >\n        <div\n          class=\"rounded-3 text-break message-bubble\"\n          [class.end]=\"alignment() === 'end' && actionsPosition() === 'bottom'\"\n        >\n          <ng-content />\n        </div>\n\n        <div\n          class=\"actions-wrapper d-flex gap-4\"\n          [class.ms-3]=\"actionsPosition() === 'side' && alignment() === 'start'\"\n          [class.me-3]=\"actionsPosition() === 'side' && alignment() === 'end'\"\n          [class.mt-2]=\"actionsPosition() === 'bottom'\"\n          [class.actions-horizontal]=\"actionsPosition() !== 'bottom'\"\n          [class.align-self-start]=\"actionsPosition() === 'side'\"\n        >\n          <ng-content select=\"[siChatMessageAction]\" />\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;--chat-message-bubble-bg: var(--element-base-1);--chat-message-bubble-padding: 12px}:host ::ng-deep si-loading-spinner{--loading-spinner-size: 1.5em}.skeleton-line-full{inline-size:100%}.skeleton-line-half{inline-size:50%}.loading-message-bubble,.message-bubble{padding:var(--chat-message-bubble-padding)}.loading-message-bubble{inline-size:max-content;min-inline-size:75%;margin-block-end:auto;background-color:var(--chat-message-bubble-bg)}.message-bubble{margin-block-end:auto;background-color:var(--chat-message-bubble-bg);min-inline-size:0;max-inline-size:100%;overflow-wrap:break-word;word-break:break-word}.message-bubble:empty{display:none}.message-bubble:empty~.actions-wrapper{margin-inline:0!important}.attachment-slot:empty{display:none}.attachment-slot:not(:empty)~.message-wrapper:not(:has(.message-bubble:empty)){margin-block-start:4px}.attachment-slot:not(:empty)~.message-wrapper:has(.message-bubble:empty) .actions-wrapper.actions-horizontal{margin-block-start:4px}.actions-wrapper:empty{display:none!important}.avatar-wrapper{align-self:flex-start}.avatar-wrapper:not(.end){margin-inline-end:6px}.avatar-wrapper.end{margin-inline-start:6px}.avatar-wrapper:empty{display:none}.message-wrapper{min-inline-size:0;max-inline-size:100%;inline-size:auto}.message-wrapper.start{margin-inline-end:auto}.message-wrapper.end{margin-inline-start:auto}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container{flex-direction:row}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container.start{align-items:flex-start}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container:not(.start){flex-direction:row-reverse}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .message-bubble.end{margin-inline-start:auto}.attachment-slot ::ng-deep si-attachment-list{--attachment-list-bg: transparent;--attachment-name-color: var(--element-text-secondary)}:host-context(.si-container-xs,.si-container-sm) .chat-message-container{flex-direction:column}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper{margin-block-end:6px}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper.end{align-self:flex-end}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper::ng-deep:has(si-icon) .end{margin-inline-end:4px!important}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper::ng-deep:has(si-icon):not(.end){margin-inline-start:4px!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    actionsPosition = input('side', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsPosition" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiChatMessageComponent, isStandalone: true, selector: "si-chat-message", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, actionsPosition: { classPropertyName: "actionsPosition", publicName: "actionsPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-block" }, hostDirectives: [{ directive: i1.SiResponsiveContainerDirective }], ngImport: i0, template: "<!--- Flex-row if alignment start, flex-row-reverse if alignment end, flex-column if mobile -->\n<div\n  class=\"d-flex si-body-paragraph chat-message-container\"\n  [class.start]=\"alignment() === 'start'\"\n>\n  <div class=\"avatar-wrapper flex-shrink-0\" [class.end]=\"alignment() === 'end'\">\n    <ng-content select=\"si-icon,si-avatar,img\" />\n  </div>\n\n  <div class=\"d-flex flex-column flex-grow-1 w-100\">\n    <div class=\"attachment-slot\" [class.align-self-end]=\"alignment() === 'end'\">\n      <ng-content select=\"si-attachment-list,si-badge\" />\n    </div>\n\n    @if (loading()) {\n      <div\n        class=\"message-wrapper rounded-3 w-75 text-break loading-message-bubble mb-2\"\n        [class.align-self-end]=\"alignment() === 'end'\"\n      >\n        <div class=\"d-flex flex-column w-100 gap-2\">\n          <div class=\"si-skeleton skeleton-line skeleton-line-full\"></div>\n          <div class=\"si-skeleton skeleton-line skeleton-line-half\"></div>\n        </div>\n      </div>\n    } @else {\n      <!-- Flex-column if actions bottom, flex-row/flex-row-reverse if actions start -->\n      <div\n        class=\"message-wrapper mw-0 d-flex mb-2\"\n        [class.start]=\"alignment() === 'start'\"\n        [class.end]=\"alignment() === 'end'\"\n        [class.flex-column]=\"actionsPosition() === 'bottom'\"\n        [class.flex-row]=\"actionsPosition() === 'side' && alignment() === 'start'\"\n        [class.flex-row-reverse]=\"actionsPosition() === 'side' && alignment() === 'end'\"\n        [class.align-items-start]=\"actionsPosition() === 'side'\"\n        [class.align-items-end]=\"actionsPosition() === 'bottom' && alignment() === 'end'\"\n        [class.justify-content-end]=\"alignment() === 'end' && actionsPosition() === 'bottom'\"\n        [class.justify-content-start]=\"alignment() === 'start' && actionsPosition() === 'bottom'\"\n      >\n        <div\n          class=\"rounded-3 text-break message-bubble\"\n          [class.end]=\"alignment() === 'end' && actionsPosition() === 'bottom'\"\n        >\n          <ng-content />\n        </div>\n\n        <div\n          class=\"actions-wrapper d-flex gap-4\"\n          [class.ms-3]=\"actionsPosition() === 'side' && alignment() === 'start'\"\n          [class.me-3]=\"actionsPosition() === 'side' && alignment() === 'end'\"\n          [class.mt-2]=\"actionsPosition() === 'bottom'\"\n          [class.actions-horizontal]=\"actionsPosition() !== 'bottom'\"\n          [class.align-self-start]=\"actionsPosition() === 'side'\"\n        >\n          <ng-content select=\"[siChatMessageAction]\" />\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;--loading-spinner-size: 1.5em}.skeleton-line-full{inline-size:100%}.skeleton-line-half{inline-size:50%}.loading-message-bubble,.message-bubble{padding:var(--chat-message-bubble-padding, var(--si-sys-sizing-spacing-y-50) var(--si-sys-sizing-spacing-x-50));margin-block-end:auto;background-color:var(--chat-message-bubble-bg, var(--si-sys-background-1))}.loading-message-bubble{inline-size:max-content;min-inline-size:75%}.message-bubble{min-inline-size:0;max-inline-size:100%;overflow-wrap:break-word;word-break:break-word}.message-bubble:empty{display:none}.message-bubble:empty~.actions-wrapper{margin-inline:0!important}.attachment-slot:empty{display:none}.attachment-slot:not(:empty)~.message-wrapper:not(:has(.message-bubble:empty)){margin-block-start:var(--si-sys-sizing-spacing-y-20)}.attachment-slot:not(:empty)~.message-wrapper:has(.message-bubble:empty) .actions-wrapper.actions-horizontal{margin-block-start:var(--si-sys-sizing-spacing-y-20)}.actions-wrapper:empty{display:none!important}.avatar-wrapper{align-self:flex-start}.avatar-wrapper:not(.end){margin-inline-end:var(--si-sys-sizing-spacing-x-30)}.avatar-wrapper.end{margin-inline-start:var(--si-sys-sizing-spacing-x-30)}.avatar-wrapper:empty{display:none}.message-wrapper{min-inline-size:0;max-inline-size:100%;inline-size:auto}.message-wrapper.start{margin-inline-end:auto}.message-wrapper.end{margin-inline-start:auto}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container{flex-direction:row}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container.start{align-items:flex-start}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container:not(.start){flex-direction:row-reverse}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .message-bubble.end{margin-inline-start:auto}:host-context(.si-container-xs,.si-container-sm) .chat-message-container{flex-direction:column}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper{margin-block-end:var(--si-sys-sizing-spacing-y-30)}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper.end{align-self:flex-end}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper::ng-deep:has(si-icon) .end{margin-inline-end:var(--si-sys-sizing-spacing-x-20)!important}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper::ng-deep:has(si-icon):not(.end){margin-inline-start:var(--si-sys-sizing-spacing-x-20)!important}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-chat-message', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-chat-message', host: {
                         class: 'd-block'
-                    }, hostDirectives: [SiResponsiveContainerDirective], template: "<!--- Flex-row if alignment start, flex-row-reverse if alignment end, flex-column if mobile -->\n<div class=\"d-flex si-body-2 chat-message-container\" [class.start]=\"alignment() === 'start'\">\n  <div class=\"avatar-wrapper flex-shrink-0\" [class.end]=\"alignment() === 'end'\">\n    <ng-content select=\"si-icon,si-avatar,img\" />\n  </div>\n\n  <div class=\"d-flex flex-column flex-grow-1 w-100\">\n    <div class=\"attachment-slot\" [class.align-self-end]=\"alignment() === 'end'\">\n      <ng-content select=\"si-attachment-list,si-badge\" />\n    </div>\n\n    @if (loading()) {\n      <div\n        class=\"message-wrapper rounded-3 w-75 text-break loading-message-bubble mb-2\"\n        [class.align-self-end]=\"alignment() === 'end'\"\n      >\n        <div class=\"d-flex flex-column w-100 gap-2\">\n          <div class=\"si-skeleton skeleton-line skeleton-line-full\"></div>\n          <div class=\"si-skeleton skeleton-line skeleton-line-half\"></div>\n        </div>\n      </div>\n    } @else {\n      <!-- Flex-column if actions bottom, flex-row/flex-row-reverse if actions start -->\n      <div\n        class=\"message-wrapper mw-0 d-flex mb-2\"\n        [class.start]=\"alignment() === 'start'\"\n        [class.end]=\"alignment() === 'end'\"\n        [class.flex-column]=\"actionsPosition() === 'bottom'\"\n        [class.flex-row]=\"actionsPosition() === 'side' && alignment() === 'start'\"\n        [class.flex-row-reverse]=\"actionsPosition() === 'side' && alignment() === 'end'\"\n        [class.align-items-start]=\"actionsPosition() === 'side'\"\n        [class.align-items-end]=\"actionsPosition() === 'bottom' && alignment() === 'end'\"\n        [class.justify-content-end]=\"alignment() === 'end' && actionsPosition() === 'bottom'\"\n        [class.justify-content-start]=\"alignment() === 'start' && actionsPosition() === 'bottom'\"\n      >\n        <div\n          class=\"rounded-3 text-break message-bubble\"\n          [class.end]=\"alignment() === 'end' && actionsPosition() === 'bottom'\"\n        >\n          <ng-content />\n        </div>\n\n        <div\n          class=\"actions-wrapper d-flex gap-4\"\n          [class.ms-3]=\"actionsPosition() === 'side' && alignment() === 'start'\"\n          [class.me-3]=\"actionsPosition() === 'side' && alignment() === 'end'\"\n          [class.mt-2]=\"actionsPosition() === 'bottom'\"\n          [class.actions-horizontal]=\"actionsPosition() !== 'bottom'\"\n          [class.align-self-start]=\"actionsPosition() === 'side'\"\n        >\n          <ng-content select=\"[siChatMessageAction]\" />\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;--chat-message-bubble-bg: var(--element-base-1);--chat-message-bubble-padding: 12px}:host ::ng-deep si-loading-spinner{--loading-spinner-size: 1.5em}.skeleton-line-full{inline-size:100%}.skeleton-line-half{inline-size:50%}.loading-message-bubble,.message-bubble{padding:var(--chat-message-bubble-padding)}.loading-message-bubble{inline-size:max-content;min-inline-size:75%;margin-block-end:auto;background-color:var(--chat-message-bubble-bg)}.message-bubble{margin-block-end:auto;background-color:var(--chat-message-bubble-bg);min-inline-size:0;max-inline-size:100%;overflow-wrap:break-word;word-break:break-word}.message-bubble:empty{display:none}.message-bubble:empty~.actions-wrapper{margin-inline:0!important}.attachment-slot:empty{display:none}.attachment-slot:not(:empty)~.message-wrapper:not(:has(.message-bubble:empty)){margin-block-start:4px}.attachment-slot:not(:empty)~.message-wrapper:has(.message-bubble:empty) .actions-wrapper.actions-horizontal{margin-block-start:4px}.actions-wrapper:empty{display:none!important}.avatar-wrapper{align-self:flex-start}.avatar-wrapper:not(.end){margin-inline-end:6px}.avatar-wrapper.end{margin-inline-start:6px}.avatar-wrapper:empty{display:none}.message-wrapper{min-inline-size:0;max-inline-size:100%;inline-size:auto}.message-wrapper.start{margin-inline-end:auto}.message-wrapper.end{margin-inline-start:auto}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container{flex-direction:row}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container.start{align-items:flex-start}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container:not(.start){flex-direction:row-reverse}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .message-bubble.end{margin-inline-start:auto}.attachment-slot ::ng-deep si-attachment-list{--attachment-list-bg: transparent;--attachment-name-color: var(--element-text-secondary)}:host-context(.si-container-xs,.si-container-sm) .chat-message-container{flex-direction:column}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper{margin-block-end:6px}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper.end{align-self:flex-end}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper::ng-deep:has(si-icon) .end{margin-inline-end:4px!important}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper::ng-deep:has(si-icon):not(.end){margin-inline-start:4px!important}\n"] }]
+                    }, hostDirectives: [SiResponsiveContainerDirective], template: "<!--- Flex-row if alignment start, flex-row-reverse if alignment end, flex-column if mobile -->\n<div\n  class=\"d-flex si-body-paragraph chat-message-container\"\n  [class.start]=\"alignment() === 'start'\"\n>\n  <div class=\"avatar-wrapper flex-shrink-0\" [class.end]=\"alignment() === 'end'\">\n    <ng-content select=\"si-icon,si-avatar,img\" />\n  </div>\n\n  <div class=\"d-flex flex-column flex-grow-1 w-100\">\n    <div class=\"attachment-slot\" [class.align-self-end]=\"alignment() === 'end'\">\n      <ng-content select=\"si-attachment-list,si-badge\" />\n    </div>\n\n    @if (loading()) {\n      <div\n        class=\"message-wrapper rounded-3 w-75 text-break loading-message-bubble mb-2\"\n        [class.align-self-end]=\"alignment() === 'end'\"\n      >\n        <div class=\"d-flex flex-column w-100 gap-2\">\n          <div class=\"si-skeleton skeleton-line skeleton-line-full\"></div>\n          <div class=\"si-skeleton skeleton-line skeleton-line-half\"></div>\n        </div>\n      </div>\n    } @else {\n      <!-- Flex-column if actions bottom, flex-row/flex-row-reverse if actions start -->\n      <div\n        class=\"message-wrapper mw-0 d-flex mb-2\"\n        [class.start]=\"alignment() === 'start'\"\n        [class.end]=\"alignment() === 'end'\"\n        [class.flex-column]=\"actionsPosition() === 'bottom'\"\n        [class.flex-row]=\"actionsPosition() === 'side' && alignment() === 'start'\"\n        [class.flex-row-reverse]=\"actionsPosition() === 'side' && alignment() === 'end'\"\n        [class.align-items-start]=\"actionsPosition() === 'side'\"\n        [class.align-items-end]=\"actionsPosition() === 'bottom' && alignment() === 'end'\"\n        [class.justify-content-end]=\"alignment() === 'end' && actionsPosition() === 'bottom'\"\n        [class.justify-content-start]=\"alignment() === 'start' && actionsPosition() === 'bottom'\"\n      >\n        <div\n          class=\"rounded-3 text-break message-bubble\"\n          [class.end]=\"alignment() === 'end' && actionsPosition() === 'bottom'\"\n        >\n          <ng-content />\n        </div>\n\n        <div\n          class=\"actions-wrapper d-flex gap-4\"\n          [class.ms-3]=\"actionsPosition() === 'side' && alignment() === 'start'\"\n          [class.me-3]=\"actionsPosition() === 'side' && alignment() === 'end'\"\n          [class.mt-2]=\"actionsPosition() === 'bottom'\"\n          [class.actions-horizontal]=\"actionsPosition() !== 'bottom'\"\n          [class.align-self-start]=\"actionsPosition() === 'side'\"\n        >\n          <ng-content select=\"[siChatMessageAction]\" />\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;--loading-spinner-size: 1.5em}.skeleton-line-full{inline-size:100%}.skeleton-line-half{inline-size:50%}.loading-message-bubble,.message-bubble{padding:var(--chat-message-bubble-padding, var(--si-sys-sizing-spacing-y-50) var(--si-sys-sizing-spacing-x-50));margin-block-end:auto;background-color:var(--chat-message-bubble-bg, var(--si-sys-background-1))}.loading-message-bubble{inline-size:max-content;min-inline-size:75%}.message-bubble{min-inline-size:0;max-inline-size:100%;overflow-wrap:break-word;word-break:break-word}.message-bubble:empty{display:none}.message-bubble:empty~.actions-wrapper{margin-inline:0!important}.attachment-slot:empty{display:none}.attachment-slot:not(:empty)~.message-wrapper:not(:has(.message-bubble:empty)){margin-block-start:var(--si-sys-sizing-spacing-y-20)}.attachment-slot:not(:empty)~.message-wrapper:has(.message-bubble:empty) .actions-wrapper.actions-horizontal{margin-block-start:var(--si-sys-sizing-spacing-y-20)}.actions-wrapper:empty{display:none!important}.avatar-wrapper{align-self:flex-start}.avatar-wrapper:not(.end){margin-inline-end:var(--si-sys-sizing-spacing-x-30)}.avatar-wrapper.end{margin-inline-start:var(--si-sys-sizing-spacing-x-30)}.avatar-wrapper:empty{display:none}.message-wrapper{min-inline-size:0;max-inline-size:100%;inline-size:auto}.message-wrapper.start{margin-inline-end:auto}.message-wrapper.end{margin-inline-start:auto}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container{flex-direction:row}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container.start{align-items:flex-start}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .chat-message-container:not(.start){flex-direction:row-reverse}:host-context(.si-container-md,.si-container-lg,.si-container-xl,.si-container-xxl) .message-bubble.end{margin-inline-start:auto}:host-context(.si-container-xs,.si-container-sm) .chat-message-container{flex-direction:column}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper{margin-block-end:var(--si-sys-sizing-spacing-y-30)}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper.end{align-self:flex-end}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper::ng-deep:has(si-icon) .end{margin-inline-end:var(--si-sys-sizing-spacing-x-20)!important}:host-context(.si-container-xs,.si-container-sm) .avatar-wrapper::ng-deep:has(si-icon):not(.end){margin-inline-start:var(--si-sys-sizing-spacing-x-20)!important}\n"] }]
         }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], actionsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsPosition", required: false }] }] } });
 
 /**
@@ -116,99 +121,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * 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.
+ * supporting text, loading states, and contextual actions.
  * It appears as text (no bubble) aligned to the left side without any avatar/icon slot.
  * Can be used within {@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
  */
 class SiAiMessageComponent {
-    formattedContent = viewChild('formattedContent', ...(ngDevMode ? [{ debugName: "formattedContent" }] : []));
     icons = addIcons({ elementOptionsVertical });
     /**
      * The AI-generated message content
      * @defaultValue ''
      */
-    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : []));
-    /**
-     * 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
-     */
-    contentFormatter = input(undefined, ...(ngDevMode ? [{ debugName: "contentFormatter" }] : []));
-    textContent = signal(undefined, ...(ngDevMode ? [{ debugName: "textContent" }] : []));
-    constructor() {
-        effect(() => {
-            const formatter = this.contentFormatter();
-            const contentValue = this.content();
-            const container = this.formattedContent()?.nativeElement;
-            if (container && contentValue) {
-                if (formatter) {
-                    const formatted = formatter(contentValue);
-                    if (typeof formatted === 'string') {
-                        this.textContent.set(formatted);
-                    }
-                    else if (formatted instanceof Node) {
-                        this.textContent.set(undefined);
-                        container.innerHTML = '';
-                        container.appendChild(formatted);
-                    }
-                }
-                else {
-                    this.textContent.set(contentValue);
-                }
-            }
-        });
-    }
+    content = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
     /**
      * Whether the message is currently being generated (shows skeleton)
      * @defaultValue false
      */
-    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Primary actions available for this message (thumbs up/down, copy, retry, etc.)
      * All actions displayed inline
      * @defaultValue []
      */
-    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
     /**
      * Secondary actions available in dropdown menu, first use primary actions and only add secondary actions additionally
      * @defaultValue []
      */
-    secondaryActions = input([], ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
+    secondaryActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActions" }] : /* istanbul ignore next */ []));
     /** Parameter to pass to action handlers */
-    actionParam = input(...(ngDevMode ? [undefined, { debugName: "actionParam" }] : []));
+    actionParam = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "actionParam" }] : /* istanbul ignore next */ []));
+    /** Source references */
+    sources = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sources" }] : /* istanbul ignore next */ []));
     /**
      * More actions button aria label
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_AI_MESSAGE.SECONDARY_ACTIONS:More actions`)
+     * t(() => $localize`:@@SI_AI_MESSAGE.SECONDARY_ACTIONS:Additional actions`)
      * ```
      */
-    secondaryActionsLabel = input(t(() => $localize `:@@SI_AI_MESSAGE.SECONDARY_ACTIONS:More actions`), ...(ngDevMode ? [{ debugName: "secondaryActionsLabel" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAiMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiAiMessageComponent, isStandalone: true, selector: "si-ai-message", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentFormatter: { classPropertyName: "contentFormatter", publicName: "contentFormatter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "formattedContent", first: true, predicate: ["formattedContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<si-chat-message alignment=\"start\" actionsPosition=\"bottom\" [loading]=\"loading()\">\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"btn-group ai-message-actions\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}si-chat-message{--chat-message-bubble-bg: transparent;--chat-message-bubble-padding: 0;margin-block-end:-4px}.ai-message-actions{margin-block-start:8px}:host ::ng-deep si-loading-spinner{--loading-spinner-size: 1.5em}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiChatMessageComponent, selector: "si-chat-message", inputs: ["loading", "alignment", "actionsPosition"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiChatMessageActionDirective, selector: "[siChatMessageAction]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    secondaryActionsLabel = input(t(() => $localize `:@@SI_AI_MESSAGE.SECONDARY_ACTIONS:Additional actions`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActionsLabel" }] : /* istanbul ignore next */ []));
+    /** Emitted when a source has been clicked. */
+    sourceClicked = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiAiMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiAiMessageComponent, isStandalone: true, selector: "si-ai-message", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, sources: { classPropertyName: "sources", publicName: "sources", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sourceClicked: "sourceClicked" }, ngImport: i0, template: "<si-chat-message alignment=\"start\" actionsPosition=\"bottom\" [loading]=\"loading()\">\n  @if (content()) {\n    <span class=\"text-pre-wrap\">{{ content() }}</span>\n  } @else {\n    <ng-content />\n  }\n\n  @let src = sources();\n  @if (actions().length > 0 || secondaryActions().length > 0 || src?.length) {\n    <div class=\"btn-group ai-message-actions align-items-center\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n\n      @if (src?.length) {\n        <si-source-chip\n          showIcon\n          showLabel\n          [sources]=\"src\"\n          (sourceClicked)=\"sourceClicked.emit($event)\"\n        />\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}si-chat-message{--chat-message-bubble-bg: transparent;--chat-message-bubble-padding: 0;margin-block-end:calc(var(--si-sys-sizing-spacing-y-20) * -1)}.ai-message-actions{margin-block-start:calc(var(--si-sys-sizing-spacing-y-50) - var(--si-sys-sizing-spacing-y-20))}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiChatMessageComponent, selector: "si-chat-message", inputs: ["loading", "alignment", "actionsPosition"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiChatMessageActionDirective, selector: "[siChatMessageAction]" }, { kind: "component", type: SiSourceChipComponent, selector: "si-source-chip", inputs: ["showIcon", "showLabel", "sources", "compact", "disabled"], outputs: ["sourceClicked"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAiMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiAiMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-ai-message', imports: [
                         CdkMenuTrigger,
@@ -216,9 +191,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiIconComponent,
                         SiMenuFactoryComponent,
                         SiChatMessageActionDirective,
-                        SiTranslatePipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-chat-message alignment=\"start\" actionsPosition=\"bottom\" [loading]=\"loading()\">\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"btn-group ai-message-actions\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}si-chat-message{--chat-message-bubble-bg: transparent;--chat-message-bubble-padding: 0;margin-block-end:-4px}.ai-message-actions{margin-block-start:8px}:host ::ng-deep si-loading-spinner{--loading-spinner-size: 1.5em}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { formattedContent: [{ type: i0.ViewChild, args: ['formattedContent', { isSignal: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], contentFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentFormatter", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], secondaryActionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionsLabel", required: false }] }] } });
+                        SiTranslatePipe,
+                        SiSourceChipComponent
+                    ], template: "<si-chat-message alignment=\"start\" actionsPosition=\"bottom\" [loading]=\"loading()\">\n  @if (content()) {\n    <span class=\"text-pre-wrap\">{{ content() }}</span>\n  } @else {\n    <ng-content />\n  }\n\n  @let src = sources();\n  @if (actions().length > 0 || secondaryActions().length > 0 || src?.length) {\n    <div class=\"btn-group ai-message-actions align-items-center\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n\n      @if (src?.length) {\n        <si-source-chip\n          showIcon\n          showLabel\n          [sources]=\"src\"\n          (sourceClicked)=\"sourceClicked.emit($event)\"\n        />\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}si-chat-message{--chat-message-bubble-bg: transparent;--chat-message-bubble-padding: 0;margin-block-end:calc(var(--si-sys-sizing-spacing-y-20) * -1)}.ai-message-actions{margin-block-start:calc(var(--si-sys-sizing-spacing-y-50) - var(--si-sys-sizing-spacing-y-20))}\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], sources: [{ type: i0.Input, args: [{ isSignal: true, alias: "sources", required: false }] }], secondaryActionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionsLabel", required: false }] }], sourceClicked: [{ type: i0.Output, args: ["sourceClicked"] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Collapsible activity message for displaying progress and intermediate steps in a chat.
+ *
+ * @experimental
+ */
+class SiActivityMessageComponent {
+    /** Activity heading. */
+    heading = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Activity icon. */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Current state of the activity. */
+    state = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "state" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the activity details are expanded.
+     *
+     * @defaultValue false
+     */
+    expanded = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    icons = addIcons({
+        elementCircleFilled,
+        elementIssue,
+        elementRight2
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiActivityMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiActivityMessageComponent, isStandalone: true, selector: "si-activity-message", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "expanded()", "class.failed": "state() === 'failed'" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"activity-toggle\"\n  [attr.aria-expanded]=\"expanded()\"\n  (click)=\"expanded.update(value => !value)\"\n>\n  <span class=\"activity-marker\">\n    @switch (state()) {\n      @case ('running') {\n        <si-loading-spinner class=\"activity-icon\" />\n      }\n      @case ('failed') {\n        <si-icon class=\"activity-icon\" [icon]=\"icons.elementIssue\" />\n      }\n      @default {\n        <si-icon\n          class=\"activity-icon\"\n          [class.default-icon]=\"!icon()\"\n          [icon]=\"icon() ?? icons.elementCircleFilled\"\n        />\n      }\n    }\n    <si-icon class=\"disclosure-icon\" [class.expanded]=\"expanded()\" [icon]=\"icons.elementRight2\" />\n  </span>\n  <span class=\"activity-heading\">{{ heading() | translate }}</span>\n</button>\n\n@if (expanded()) {\n  <div class=\"content-motion\" animate.enter=\"content-enter\" animate.leave=\"content-leave\">\n    <div class=\"overflow-hidden\">\n      <div class=\"activity-content\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{position:relative;display:block;color:var(--si-sys-text-secondary);padding-block:var(--si-sys-sizing-spacing-y-20)}:host.failed{color:var(--si-sys-text-danger)}si-activity-message+:host{margin-block-start:var(--si-sys-sizing-spacing-y-20)}si-activity-message+:host:before{position:absolute;content:\"\";z-index:0;block-size:calc(var(--si-sys-sizing-spacing-y-20) + var(--si-sys-sizing-spacing-y-20) + var(--si-sys-sizing-spacing-y-20));inset-block-end:calc(100% - var(--si-sys-sizing-spacing-y-20));inset-inline-start:calc(var(--si-sys-sizing-icon-sm) / 2);border-inline-start:1px solid var(--si-sys-border-3)}.activity-toggle{position:relative;z-index:1;display:flex;align-items:center;gap:var(--si-sys-sizing-spacing-x-30);padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-align:start}.activity-toggle:is(:hover,:focus-visible) .activity-icon{display:none}.activity-toggle:is(:hover,:focus-visible) .disclosure-icon{display:inline-flex}.activity-marker{--loading-spinner-size: var(--si-sys-sizing-icon-sm);display:inline-flex;flex:0 0 var(--si-sys-sizing-icon-sm);align-items:center;justify-content:center;inline-size:var(--si-sys-sizing-icon-sm);block-size:var(--si-sys-sizing-icon-sm)}.activity-icon,.disclosure-icon{font-size:var(--si-sys-sizing-icon-sm)}.activity-heading{display:flex;align-items:center;min-block-size:calc(var(--si-sys-sizing-icon-sm) + 2 * var(--si-sys-sizing-spacing-y-20))}.default-icon{font-size:6px}.disclosure-icon{display:none;transition:transform calc(.5s * var(--element-animations-enabled, 1))}.disclosure-icon.expanded{transform:rotate(90deg)}.content-motion{display:grid;grid-template-rows:1fr;margin-inline-start:calc(var(--si-sys-sizing-icon-sm) / 2);padding-inline-start:calc(var(--si-sys-sizing-icon-sm) / 2 + var(--si-sys-sizing-spacing-x-30));border-inline-start:1px solid var(--si-sys-border-3)}.content-motion:is(.content-enter,.content-leave){transition:grid-template-rows calc(.5s * var(--element-animations-enabled, 1))}@starting-style{.content-motion.content-enter{grid-template-rows:0fr}}.content-motion.content-leave{grid-template-rows:0fr}.activity-content{overflow:hidden;padding-block-start:var(--si-sys-sizing-spacing-y-40)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiActivityMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-activity-message', imports: [SiIconComponent, SiLoadingSpinnerComponent, SiTranslatePipe], host: {
+                        '[class.expanded]': 'expanded()',
+                        '[class.failed]': `state() === 'failed'`
+                    }, template: "<button\n  type=\"button\"\n  class=\"activity-toggle\"\n  [attr.aria-expanded]=\"expanded()\"\n  (click)=\"expanded.update(value => !value)\"\n>\n  <span class=\"activity-marker\">\n    @switch (state()) {\n      @case ('running') {\n        <si-loading-spinner class=\"activity-icon\" />\n      }\n      @case ('failed') {\n        <si-icon class=\"activity-icon\" [icon]=\"icons.elementIssue\" />\n      }\n      @default {\n        <si-icon\n          class=\"activity-icon\"\n          [class.default-icon]=\"!icon()\"\n          [icon]=\"icon() ?? icons.elementCircleFilled\"\n        />\n      }\n    }\n    <si-icon class=\"disclosure-icon\" [class.expanded]=\"expanded()\" [icon]=\"icons.elementRight2\" />\n  </span>\n  <span class=\"activity-heading\">{{ heading() | translate }}</span>\n</button>\n\n@if (expanded()) {\n  <div class=\"content-motion\" animate.enter=\"content-enter\" animate.leave=\"content-leave\">\n    <div class=\"overflow-hidden\">\n      <div class=\"activity-content\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{position:relative;display:block;color:var(--si-sys-text-secondary);padding-block:var(--si-sys-sizing-spacing-y-20)}:host.failed{color:var(--si-sys-text-danger)}si-activity-message+:host{margin-block-start:var(--si-sys-sizing-spacing-y-20)}si-activity-message+:host:before{position:absolute;content:\"\";z-index:0;block-size:calc(var(--si-sys-sizing-spacing-y-20) + var(--si-sys-sizing-spacing-y-20) + var(--si-sys-sizing-spacing-y-20));inset-block-end:calc(100% - var(--si-sys-sizing-spacing-y-20));inset-inline-start:calc(var(--si-sys-sizing-icon-sm) / 2);border-inline-start:1px solid var(--si-sys-border-3)}.activity-toggle{position:relative;z-index:1;display:flex;align-items:center;gap:var(--si-sys-sizing-spacing-x-30);padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-align:start}.activity-toggle:is(:hover,:focus-visible) .activity-icon{display:none}.activity-toggle:is(:hover,:focus-visible) .disclosure-icon{display:inline-flex}.activity-marker{--loading-spinner-size: var(--si-sys-sizing-icon-sm);display:inline-flex;flex:0 0 var(--si-sys-sizing-icon-sm);align-items:center;justify-content:center;inline-size:var(--si-sys-sizing-icon-sm);block-size:var(--si-sys-sizing-icon-sm)}.activity-icon,.disclosure-icon{font-size:var(--si-sys-sizing-icon-sm)}.activity-heading{display:flex;align-items:center;min-block-size:calc(var(--si-sys-sizing-icon-sm) + 2 * var(--si-sys-sizing-spacing-y-20))}.default-icon{font-size:6px}.disclosure-icon{display:none;transition:transform calc(.5s * var(--element-animations-enabled, 1))}.disclosure-icon.expanded{transform:rotate(90deg)}.content-motion{display:grid;grid-template-rows:1fr;margin-inline-start:calc(var(--si-sys-sizing-icon-sm) / 2);padding-inline-start:calc(var(--si-sys-sizing-icon-sm) / 2 + var(--si-sys-sizing-spacing-x-30));border-inline-start:1px solid var(--si-sys-border-3)}.content-motion:is(.content-enter,.content-leave){transition:grid-template-rows calc(.5s * var(--element-animations-enabled, 1))}@starting-style{.content-motion.content-enter{grid-template-rows:0fr}}.content-motion.content-leave{grid-template-rows:0fr}.activity-content{overflow:hidden;padding-block-start:var(--si-sys-sizing-spacing-y-40)}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Titled content part for use inside an activity message.
+ *
+ * @experimental
+ */
+class SiActivityMessagePartComponent {
+    /** Part heading. */
+    heading = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the part can be collapsed and expanded.
+     *
+     * @defaultValue false
+     */
+    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether collapsible content is expanded.
+     *
+     * @defaultValue true
+     */
+    expanded = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    icons = addIcons({ elementCircleFilled, elementRight2 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiActivityMessagePartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiActivityMessagePartComponent, isStandalone: true, selector: "si-activity-message-part", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "@if (collapsible()) {\n  <button\n    type=\"button\"\n    class=\"section-heading section-toggle\"\n    [attr.aria-expanded]=\"expanded()\"\n    (click)=\"expanded.update(value => !value)\"\n  >\n    <si-icon\n      class=\"section-icon disclosure-icon\"\n      [class.expanded]=\"expanded()\"\n      [icon]=\"icons.elementRight2\"\n    />\n    <span>{{ heading() | translate }}</span>\n  </button>\n} @else {\n  <div class=\"section-heading\">\n    <si-icon class=\"section-icon default-icon\" [icon]=\"icons.elementCircleFilled\" />\n    <span>{{ heading() | translate }}</span>\n  </div>\n}\n\n@if (!collapsible() || expanded()) {\n  <div class=\"content-motion\" animate.enter=\"content-enter\" animate.leave=\"content-leave\">\n    <div class=\"overflow-hidden\">\n      <div class=\"section-content\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block;padding-block:var(--si-sys-sizing-spacing-y-20)}:host+:host{margin-block-start:var(--si-sys-sizing-spacing-y-50)}.section-heading{display:flex;align-items:center;gap:var(--si-sys-sizing-spacing-x-20);color:var(--si-sys-text-secondary)}.section-toggle{padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-align:start}.section-toggle .disclosure-icon{transition:transform calc(.5s * var(--element-animations-enabled, 1))}.section-toggle .disclosure-icon.expanded{transform:rotate(90deg)}.section-icon{flex:0 0 var(--si-sys-sizing-icon-sm);align-items:center;justify-content:center;inline-size:var(--si-sys-sizing-icon-sm);block-size:var(--si-sys-sizing-icon-sm);font-size:var(--si-sys-sizing-icon-sm)}.default-icon{font-size:6px}.content-motion{display:grid;grid-template-rows:1fr}.content-motion:is(.content-enter,.content-leave){transition:grid-template-rows calc(.5s * var(--element-animations-enabled, 1))}@starting-style{.content-motion.content-enter{grid-template-rows:0fr}}.content-motion.content-leave{grid-template-rows:0fr}.section-content{overflow:hidden;margin-block-start:var(--si-sys-sizing-spacing-y-20);padding-inline-start:calc(var(--si-sys-sizing-icon-sm) + var(--si-sys-sizing-spacing-x-20));color:var(--si-sys-text-secondary)}.section-content:empty{display:none}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiActivityMessagePartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-activity-message-part', imports: [SiIconComponent, SiTranslatePipe], template: "@if (collapsible()) {\n  <button\n    type=\"button\"\n    class=\"section-heading section-toggle\"\n    [attr.aria-expanded]=\"expanded()\"\n    (click)=\"expanded.update(value => !value)\"\n  >\n    <si-icon\n      class=\"section-icon disclosure-icon\"\n      [class.expanded]=\"expanded()\"\n      [icon]=\"icons.elementRight2\"\n    />\n    <span>{{ heading() | translate }}</span>\n  </button>\n} @else {\n  <div class=\"section-heading\">\n    <si-icon class=\"section-icon default-icon\" [icon]=\"icons.elementCircleFilled\" />\n    <span>{{ heading() | translate }}</span>\n  </div>\n}\n\n@if (!collapsible() || expanded()) {\n  <div class=\"content-motion\" animate.enter=\"content-enter\" animate.leave=\"content-leave\">\n    <div class=\"overflow-hidden\">\n      <div class=\"section-content\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block;padding-block:var(--si-sys-sizing-spacing-y-20)}:host+:host{margin-block-start:var(--si-sys-sizing-spacing-y-50)}.section-heading{display:flex;align-items:center;gap:var(--si-sys-sizing-spacing-x-20);color:var(--si-sys-text-secondary)}.section-toggle{padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-align:start}.section-toggle .disclosure-icon{transition:transform calc(.5s * var(--element-animations-enabled, 1))}.section-toggle .disclosure-icon.expanded{transform:rotate(90deg)}.section-icon{flex:0 0 var(--si-sys-sizing-icon-sm);align-items:center;justify-content:center;inline-size:var(--si-sys-sizing-icon-sm);block-size:var(--si-sys-sizing-icon-sm);font-size:var(--si-sys-sizing-icon-sm)}.default-icon{font-size:6px}.content-motion{display:grid;grid-template-rows:1fr}.content-motion:is(.content-enter,.content-leave){transition:grid-template-rows calc(.5s * var(--element-animations-enabled, 1))}@starting-style{.content-motion.content-enter{grid-template-rows:0fr}}.content-motion.content-leave{grid-template-rows:0fr}.section-content{overflow:hidden;margin-block-start:var(--si-sys-sizing-spacing-y-20);padding-inline-start:calc(var(--si-sys-sizing-icon-sm) + var(--si-sys-sizing-spacing-x-20));color:var(--si-sys-text-secondary)}.section-content:empty{display:none}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Collapsible container for grouping multiple activity messages.
+ *
+ * @experimental
+ */
+class SiActivityTraceComponent {
+    /** Trace heading. */
+    heading = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the trace content is expanded.
+     *
+     * @defaultValue false
+     */
+    expanded = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    icons = addIcons({ elementRight2 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiActivityTraceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiActivityTraceComponent, isStandalone: true, selector: "si-activity-trace", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"trace-toggle\"\n  [attr.aria-expanded]=\"expanded()\"\n  (click)=\"expanded.update(value => !value)\"\n>\n  <span class=\"trace-marker\">\n    <si-icon class=\"disclosure-icon\" [class.expanded]=\"expanded()\" [icon]=\"icons.elementRight2\" />\n  </span>\n  <span class=\"trace-heading\">{{ heading() | translate }}</span>\n</button>\n\n@if (expanded()) {\n  <div class=\"content-motion\" animate.enter=\"content-enter\" animate.leave=\"content-leave\">\n    <div class=\"overflow-hidden\">\n      <div class=\"trace-content\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block;padding-block:var(--si-sys-sizing-spacing-y-20);color:var(--si-sys-text-secondary)}.trace-toggle{display:flex;align-items:center;gap:var(--si-sys-sizing-spacing-x-30);padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-align:start}.trace-marker{display:inline-flex;flex:0 0 var(--si-sys-sizing-icon-sm);align-items:center;justify-content:center;inline-size:var(--si-sys-sizing-icon-sm);block-size:var(--si-sys-sizing-icon-sm)}.disclosure-icon{font-size:var(--si-sys-sizing-icon-sm);transition:transform calc(.5s * var(--element-animations-enabled, 1))}.disclosure-icon.expanded{transform:rotate(90deg)}.trace-heading{display:flex;align-items:center;min-block-size:calc(var(--si-sys-sizing-icon-sm) + 2 * var(--si-sys-sizing-spacing-y-20))}.content-motion{display:grid;grid-template-rows:1fr}.content-motion:is(.content-enter,.content-leave){transition:grid-template-rows calc(.5s * var(--element-animations-enabled, 1))}@starting-style{.content-motion.content-enter{grid-template-rows:0fr}}.content-motion.content-leave{grid-template-rows:0fr}.trace-content{overflow:hidden;padding-block-start:var(--si-sys-sizing-spacing-y-40)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiActivityTraceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-activity-trace', imports: [SiIconComponent, SiTranslatePipe], template: "<button\n  type=\"button\"\n  class=\"trace-toggle\"\n  [attr.aria-expanded]=\"expanded()\"\n  (click)=\"expanded.update(value => !value)\"\n>\n  <span class=\"trace-marker\">\n    <si-icon class=\"disclosure-icon\" [class.expanded]=\"expanded()\" [icon]=\"icons.elementRight2\" />\n  </span>\n  <span class=\"trace-heading\">{{ heading() | translate }}</span>\n</button>\n\n@if (expanded()) {\n  <div class=\"content-motion\" animate.enter=\"content-enter\" animate.leave=\"content-leave\">\n    <div class=\"overflow-hidden\">\n      <div class=\"trace-content\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block;padding-block:var(--si-sys-sizing-spacing-y-20);color:var(--si-sys-text-secondary)}.trace-toggle{display:flex;align-items:center;gap:var(--si-sys-sizing-spacing-x-30);padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-align:start}.trace-marker{display:inline-flex;flex:0 0 var(--si-sys-sizing-icon-sm);align-items:center;justify-content:center;inline-size:var(--si-sys-sizing-icon-sm);block-size:var(--si-sys-sizing-icon-sm)}.disclosure-icon{font-size:var(--si-sys-sizing-icon-sm);transition:transform calc(.5s * var(--element-animations-enabled, 1))}.disclosure-icon.expanded{transform:rotate(90deg)}.trace-heading{display:flex;align-items:center;min-block-size:calc(var(--si-sys-sizing-icon-sm) + 2 * var(--si-sys-sizing-spacing-y-20))}.content-motion{display:grid;grid-template-rows:1fr}.content-motion:is(.content-enter,.content-leave){transition:grid-template-rows calc(.5s * var(--element-animations-enabled, 1))}@starting-style{.content-motion.content-enter{grid-template-rows:0fr}}.content-motion.content-leave{grid-template-rows:0fr}.trace-content{overflow:hidden;padding-block-start:var(--si-sys-sizing-spacing-y-40)}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -253,26 +335,30 @@ class SiAttachmentListComponent {
      * List of attachments to display
      * @defaultValue []
      */
-    attachments = input([], ...(ngDevMode ? [{ debugName: "attachments" }] : []));
+    attachments = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
     /**
      * Whether to align attachments to the end (right) or start (left)
      * @defaultValue 'start'
      */
-    alignment = input('start', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    alignment = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
     /**
      * Whether to show remove buttons on attachments
      * @defaultValue false
      */
-    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : {}), transform: booleanAttribute });
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * Label for remove attachment button
+     * Label for remove attachment button.
+     * The attachment name is available with `{{attachment}}`.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove attachment`)
+     * t(() => $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove {{attachment}}`)
      * ```
      */
-    removeLabel = input(t(() => $localize `:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove attachment`), ...(ngDevMode ? [{ debugName: "removeLabel" }] : []));
+    removeLabel = input(t(() => $localize `:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove {{attachment}}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
     /**
      * Emitted when an attachment should be removed
      */
@@ -298,12 +384,12 @@ class SiAttachmentListComponent {
         // TODO: Accept map and default it in file upload directive.
         return this.icons.elementDocument;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAttachmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiAttachmentListComponent, isStandalone: true, selector: "si-attachment-list", inputs: { attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"d-flex flex-wrap gap-4\" [class.justify-content-end]=\"alignment() === 'end'\">\n  @for (attachment of attachments(); track $index) {\n    <div class=\"attachment-item d-flex align-items-stretch\" role=\"group\">\n      @if (attachment.previewTemplate) {\n        <button\n          type=\"button\"\n          class=\"attachment-main focus-inside d-flex align-items-center flex-grow-1 min-width-0\"\n          [attr.title]=\"attachment.name\"\n          [attr.aria-label]=\"attachment.name\"\n          (click)=\"openPreview($event, attachment)\"\n          (keydown.enter)=\"openPreview($event, attachment)\"\n          (keydown.space)=\"openPreview($event, attachment)\"\n        >\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </button>\n      } @else {\n        <div class=\"attachment-main--static d-flex align-items-center flex-grow-1 min-width-0\">\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </div>\n      }\n\n      @if (removable()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-sm btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside m-2\"\n          [attr.aria-label]=\"(removeLabel() | translate) + ' ' + attachment.name\"\n          (click)=\"remove.emit(attachment); $event.stopPropagation()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementStateClose\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--attachment-list-bg: transparent;--attachment-name-color: var(--element-text-secondary)}.attachment-item{border-radius:var(--element-radius-2);overflow:hidden;background-color:var(--attachment-list-bg);color:var(--attachment-name-color);border:1px solid var(--element-ui-4)}.attachment-main{appearance:none;border:0;background:none;padding:0;margin:0;inline-size:100%;text-align:inherit;color:inherit;cursor:pointer}.attachment-icon{display:flex;align-items:center;justify-content:center;color:var(--element-text-primary)}.attachment-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.attachment-info .attachment-name{line-height:1.2}.attachment-info .attachment-size{line-height:1}.expand-button{border-radius:var(--element-radius-2)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiAttachmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiAttachmentListComponent, isStandalone: true, selector: "si-attachment-list", inputs: { attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"d-flex flex-wrap gap-4\" [class.justify-content-end]=\"alignment() === 'end'\">\n  @for (attachment of attachments(); track $index) {\n    <div class=\"attachment-item d-flex align-items-stretch\" role=\"group\">\n      @if (attachment.previewTemplate) {\n        <button\n          type=\"button\"\n          class=\"attachment-main focus-inside d-flex align-items-center flex-grow-1 min-width-0\"\n          [attr.title]=\"attachment.name\"\n          [attr.aria-label]=\"attachment.name\"\n          (click)=\"openPreview($event, attachment)\"\n          (keydown.enter)=\"openPreview($event, attachment)\"\n          (keydown.space)=\"openPreview($event, attachment)\"\n        >\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </button>\n      } @else {\n        <div class=\"attachment-main--static d-flex align-items-center flex-grow-1 min-width-0\">\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </div>\n      }\n\n      @if (removable()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-sm btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside m-2\"\n          [attr.aria-label]=\"removeLabel() | translate: { attachment: attachment.name }\"\n          (click)=\"remove.emit(attachment); $event.stopPropagation()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementStateClose\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".attachment-item{border-radius:var(--element-radius-2);overflow:hidden;background-color:var(--attachment-list-bg, transparent);color:var(--attachment-name-color, var(--si-sys-text-secondary));border:1px solid var(--si-sys-border-4)}.attachment-main{appearance:none;border:0;background:none;padding:0;margin:0;inline-size:100%;text-align:inherit;color:inherit;cursor:pointer}.attachment-icon{display:flex;align-items:center;justify-content:center;color:var(--si-sys-text-primary)}.attachment-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.attachment-info .attachment-name{line-height:1.2}.attachment-info .attachment-size{line-height:1}.expand-button{border-radius:var(--element-radius-2)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAttachmentListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiAttachmentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-attachment-list', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-wrap gap-4\" [class.justify-content-end]=\"alignment() === 'end'\">\n  @for (attachment of attachments(); track $index) {\n    <div class=\"attachment-item d-flex align-items-stretch\" role=\"group\">\n      @if (attachment.previewTemplate) {\n        <button\n          type=\"button\"\n          class=\"attachment-main focus-inside d-flex align-items-center flex-grow-1 min-width-0\"\n          [attr.title]=\"attachment.name\"\n          [attr.aria-label]=\"attachment.name\"\n          (click)=\"openPreview($event, attachment)\"\n          (keydown.enter)=\"openPreview($event, attachment)\"\n          (keydown.space)=\"openPreview($event, attachment)\"\n        >\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </button>\n      } @else {\n        <div class=\"attachment-main--static d-flex align-items-center flex-grow-1 min-width-0\">\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body-2 d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </div>\n      }\n\n      @if (removable()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-sm btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside m-2\"\n          [attr.aria-label]=\"(removeLabel() | translate) + ' ' + attachment.name\"\n          (click)=\"remove.emit(attachment); $event.stopPropagation()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementStateClose\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--attachment-list-bg: transparent;--attachment-name-color: var(--element-text-secondary)}.attachment-item{border-radius:var(--element-radius-2);overflow:hidden;background-color:var(--attachment-list-bg);color:var(--attachment-name-color);border:1px solid var(--element-ui-4)}.attachment-main{appearance:none;border:0;background:none;padding:0;margin:0;inline-size:100%;text-align:inherit;color:inherit;cursor:pointer}.attachment-icon{display:flex;align-items:center;justify-content:center;color:var(--element-text-primary)}.attachment-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.attachment-info .attachment-name{line-height:1.2}.attachment-info .attachment-size{line-height:1}.expand-button{border-radius:var(--element-radius-2)}\n"] }]
+            args: [{ selector: 'si-attachment-list', imports: [SiIconComponent, SiTranslatePipe], template: "<div class=\"d-flex flex-wrap gap-4\" [class.justify-content-end]=\"alignment() === 'end'\">\n  @for (attachment of attachments(); track $index) {\n    <div class=\"attachment-item d-flex align-items-stretch\" role=\"group\">\n      @if (attachment.previewTemplate) {\n        <button\n          type=\"button\"\n          class=\"attachment-main focus-inside d-flex align-items-center flex-grow-1 min-width-0\"\n          [attr.title]=\"attachment.name\"\n          [attr.aria-label]=\"attachment.name\"\n          (click)=\"openPreview($event, attachment)\"\n          (keydown.enter)=\"openPreview($event, attachment)\"\n          (keydown.space)=\"openPreview($event, attachment)\"\n        >\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </button>\n      } @else {\n        <div class=\"attachment-main--static d-flex align-items-center flex-grow-1 min-width-0\">\n          <si-icon\n            class=\"attachment-icon icon flex-shrink-0 m-2\"\n            [icon]=\"getFileIcon(attachment.name)\"\n          />\n          <div class=\"attachment-info flex-grow-1 min-width-0\">\n            <span\n              class=\"attachment-name me-4 text-truncate si-body d-block\"\n              [title]=\"attachment.name\"\n            >\n              {{ attachment.name }}\n            </span>\n          </div>\n        </div>\n      }\n\n      @if (removable()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-sm btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside m-2\"\n          [attr.aria-label]=\"removeLabel() | translate: { attachment: attachment.name }\"\n          (click)=\"remove.emit(attachment); $event.stopPropagation()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementStateClose\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".attachment-item{border-radius:var(--element-radius-2);overflow:hidden;background-color:var(--attachment-list-bg, transparent);color:var(--attachment-name-color, var(--si-sys-text-secondary));border:1px solid var(--si-sys-border-4)}.attachment-main{appearance:none;border:0;background:none;padding:0;margin:0;inline-size:100%;text-align:inherit;color:inherit;cursor:pointer}.attachment-icon{display:flex;align-items:center;justify-content:center;color:var(--si-sys-text-primary)}.attachment-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.attachment-info .attachment-name{line-height:1.2}.attachment-info .attachment-size{line-height:1}.expand-button{border-radius:var(--element-radius-2)}\n"] }]
         }], propDecorators: { attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
 
 /**
@@ -331,7 +417,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * @experimental
  */
 class SiChatContainerComponent {
-    messagesContainer = viewChild('messagesContainer', ...(ngDevMode ? [{ debugName: "messagesContainer" }] : []));
+    messagesContainer = viewChild('messagesContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messagesContainer" }] : /* istanbul ignore next */ []));
     platformId = inject(PLATFORM_ID);
     isUserAtBottom = true;
     scrollTimeout;
@@ -344,12 +431,13 @@ class SiChatContainerComponent {
      * The color variant to apply to the container.
      * @defaultValue 'base-0'
      */
-    colorVariant = input('base-0', ...(ngDevMode ? [{ debugName: "colorVariant" }] : []));
+    colorVariant = input('base-0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorVariant" }] : /* istanbul ignore next */ []));
     /**
      * Disables automatic scrolling to the bottom when new content is added.
      * @defaultValue false
      */
-    noAutoScroll = input(false, { ...(ngDevMode ? { debugName: "noAutoScroll" } : {}), transform: (value) => value === '' || value === true });
+    noAutoScroll = input(false, { ...(ngDevMode ? { debugName: "noAutoScroll" } : /* istanbul ignore next */ {}), transform: (value) => value === '' || value === true });
     constructor() {
         effect(() => {
             if (this.messagesContainer()) {
@@ -475,15 +563,15 @@ class SiChatContainerComponent {
         const container = this.messagesContainer();
         container?.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SiChatContainerComponent, isStandalone: true, selector: "si-chat-container", inputs: { colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, noAutoScroll: { classPropertyName: "noAutoScroll", publicName: "noAutoScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "colorVariant()" }, classAttribute: "d-flex si-layout-inner flex-grow-1 flex-column h-100 w-100" }, viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chat-container d-flex flex-column flex-grow-1 px-6 px-md-9 py-6 w-100\">\n  <div\n    #messagesContainer\n    class=\"messages-container d-flex flex-column flex-grow-1 w-100 align-self-center\"\n    tabindex=\"0\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content />\n  </div>\n\n  <div class=\"chat-input-area py-3 pt-0 mt-6 d-flex flex-column align-items-center\">\n    <ng-content select=\"si-inline-notification\" />\n    <ng-content select=\"si-chat-input,[siChatContainerInput]\" />\n  </div>\n</div>\n", styles: [":host{overflow-y:hidden;overflow-x:visible}:host.base-0{background-color:var(--element-base-0)}:host.base-1{background-color:var(--element-base-1)}.chat-container.initialized{scroll-behavior:smooth}::ng-deep .chat-container:has(si-ai-welcome-screen){inline-size:100%;padding-inline-start:0!important;padding-inline-end:0!important}::ng-deep .chat-container:has(si-ai-welcome-screen) .chat-input-area,::ng-deep .chat-container:has(si-ai-welcome-screen) si-ai-welcome-screen{padding-inline-start:16px;padding-inline-end:16px}.chat-container{min-block-size:0;overflow-y:auto;overflow-x:visible}.messages-container{overflow-y:auto;overflow-x:visible;padding-inline:8px;min-block-size:5rem;gap:40px}.messages-container ::ng-deep si-user-message:not(.last){margin-block-end:-40px}::ng-deep .messages-container:not(:has(si-ai-welcome-screen)){max-inline-size:720px}::ng-deep .messages-container:has(si-ai-welcome-screen){inline-size:100%}.chat-input-area{justify-self:flex-end;align-self:center;overflow:visible;inline-size:100%}.chat-input-area>::ng-deep *{max-inline-size:720px}::ng-deep .chat-input-area:empty:not(:has(si-inline-notification)),::ng-deep .chat-input-area:has([sichatcontainerinput]:empty):not(:has(si-inline-notification)){display:none!important}.chat-input-area:empty ::ng-deep>si-inline-notification,.chat-input-area:empty ::ng-deep *>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep *>si-inline-notification{margin-block-end:0!important}.chat-container:has(.messages-container:not(:empty)) .messages-empty-state{display:none!important}:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert,:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert-link{font-size:.875rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: SiChatContainerComponent, isStandalone: true, selector: "si-chat-container", inputs: { colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, noAutoScroll: { classPropertyName: "noAutoScroll", publicName: "noAutoScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "colorVariant()" }, classAttribute: "d-flex si-layout-inner flex-grow-1 flex-column h-100 w-100" }, viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chat-container d-flex flex-column flex-grow-1 px-6 px-md-9 py-6 w-100\">\n  <div\n    #messagesContainer\n    class=\"messages-container d-flex flex-column flex-grow-1 w-100 align-self-center\"\n    tabindex=\"0\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content />\n  </div>\n\n  <div class=\"chat-input-area py-3 pt-0 mt-6 d-flex flex-column align-items-center\">\n    <ng-content select=\"si-inline-notification\" />\n    <ng-content select=\"si-chat-input,[siChatContainerInput]\" />\n  </div>\n</div>\n", styles: [":host{overflow-y:hidden;overflow-x:visible}:host.base-0{background-color:var(--si-sys-background-0)}:host.base-1{background-color:var(--si-sys-background-1)}.chat-container.initialized{scroll-behavior:smooth}::ng-deep .chat-container:has(si-ai-welcome-screen){inline-size:100%;padding-inline-start:0!important;padding-inline-end:0!important}::ng-deep .chat-container:has(si-ai-welcome-screen) :is(.chat-input-area,si-ai-welcome-screen){padding-inline-start:var(--si-sys-sizing-spacing-x-60);padding-inline-end:var(--si-sys-sizing-spacing-x-60)}.chat-container{min-block-size:0;overflow-y:auto;overflow-x:visible}.messages-container{overflow-y:auto;overflow-x:visible;padding-inline:var(--si-sys-sizing-spacing-x-40);min-block-size:5rem;gap:calc(var(--si-sys-sizing-spacing-y-90) + var(--si-sys-sizing-spacing-y-40)) calc(var(--si-sys-sizing-spacing-x-90) + var(--si-sys-sizing-spacing-x-40))}.messages-container ::ng-deep si-user-message:not(.last),.messages-container>::ng-deep si-activity-message:has(+si-activity-message){margin-block-end:calc(-1 * (var(--si-sys-sizing-spacing-y-90) + var(--si-sys-sizing-spacing-y-40)))}.messages-container>::ng-deep :is(si-activity-message,si-activity-trace):has(+si-ai-message),.messages-container>::ng-deep si-ai-message:has(+:is(si-activity-message,si-activity-trace)){margin-block-end:calc(-1 * (var(--si-sys-sizing-spacing-y-90) + var(--si-sys-sizing-spacing-y-40)) + var(--si-sys-sizing-spacing-y-60))}::ng-deep .messages-container:not(:has(si-ai-welcome-screen)){max-inline-size:720px}::ng-deep .messages-container:has(si-ai-welcome-screen){inline-size:100%}.chat-input-area{justify-self:flex-end;align-self:center;overflow:visible;inline-size:100%}.chat-input-area>::ng-deep *{max-inline-size:720px}::ng-deep .chat-input-area:empty:not(:has(si-inline-notification)),::ng-deep .chat-input-area:has([sichatcontainerinput]:empty):not(:has(si-inline-notification)){display:none!important}.chat-input-area:empty ::ng-deep>si-inline-notification,.chat-input-area:empty ::ng-deep *>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep *>si-inline-notification{margin-block-end:0!important}.chat-container:has(.messages-container:not(:empty)) .messages-empty-state{display:none!important}:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification :is(.alert,.alert-link){font-size:var(--si-sys-typography-font-size-body)}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-chat-container', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-chat-container', host: {
                         class: 'd-flex si-layout-inner flex-grow-1 flex-column h-100 w-100',
                         '[class]': 'colorVariant()'
-                    }, template: "<div class=\"chat-container d-flex flex-column flex-grow-1 px-6 px-md-9 py-6 w-100\">\n  <div\n    #messagesContainer\n    class=\"messages-container d-flex flex-column flex-grow-1 w-100 align-self-center\"\n    tabindex=\"0\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content />\n  </div>\n\n  <div class=\"chat-input-area py-3 pt-0 mt-6 d-flex flex-column align-items-center\">\n    <ng-content select=\"si-inline-notification\" />\n    <ng-content select=\"si-chat-input,[siChatContainerInput]\" />\n  </div>\n</div>\n", styles: [":host{overflow-y:hidden;overflow-x:visible}:host.base-0{background-color:var(--element-base-0)}:host.base-1{background-color:var(--element-base-1)}.chat-container.initialized{scroll-behavior:smooth}::ng-deep .chat-container:has(si-ai-welcome-screen){inline-size:100%;padding-inline-start:0!important;padding-inline-end:0!important}::ng-deep .chat-container:has(si-ai-welcome-screen) .chat-input-area,::ng-deep .chat-container:has(si-ai-welcome-screen) si-ai-welcome-screen{padding-inline-start:16px;padding-inline-end:16px}.chat-container{min-block-size:0;overflow-y:auto;overflow-x:visible}.messages-container{overflow-y:auto;overflow-x:visible;padding-inline:8px;min-block-size:5rem;gap:40px}.messages-container ::ng-deep si-user-message:not(.last){margin-block-end:-40px}::ng-deep .messages-container:not(:has(si-ai-welcome-screen)){max-inline-size:720px}::ng-deep .messages-container:has(si-ai-welcome-screen){inline-size:100%}.chat-input-area{justify-self:flex-end;align-self:center;overflow:visible;inline-size:100%}.chat-input-area>::ng-deep *{max-inline-size:720px}::ng-deep .chat-input-area:empty:not(:has(si-inline-notification)),::ng-deep .chat-input-area:has([sichatcontainerinput]:empty):not(:has(si-inline-notification)){display:none!important}.chat-input-area:empty ::ng-deep>si-inline-notification,.chat-input-area:empty ::ng-deep *>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep *>si-inline-notification{margin-block-end:0!important}.chat-container:has(.messages-container:not(:empty)) .messages-empty-state{display:none!important}:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert,:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification .alert-link{font-size:.875rem}\n"] }]
+                    }, template: "<div class=\"chat-container d-flex flex-column flex-grow-1 px-6 px-md-9 py-6 w-100\">\n  <div\n    #messagesContainer\n    class=\"messages-container d-flex flex-column flex-grow-1 w-100 align-self-center\"\n    tabindex=\"0\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content />\n  </div>\n\n  <div class=\"chat-input-area py-3 pt-0 mt-6 d-flex flex-column align-items-center\">\n    <ng-content select=\"si-inline-notification\" />\n    <ng-content select=\"si-chat-input,[siChatContainerInput]\" />\n  </div>\n</div>\n", styles: [":host{overflow-y:hidden;overflow-x:visible}:host.base-0{background-color:var(--si-sys-background-0)}:host.base-1{background-color:var(--si-sys-background-1)}.chat-container.initialized{scroll-behavior:smooth}::ng-deep .chat-container:has(si-ai-welcome-screen){inline-size:100%;padding-inline-start:0!important;padding-inline-end:0!important}::ng-deep .chat-container:has(si-ai-welcome-screen) :is(.chat-input-area,si-ai-welcome-screen){padding-inline-start:var(--si-sys-sizing-spacing-x-60);padding-inline-end:var(--si-sys-sizing-spacing-x-60)}.chat-container{min-block-size:0;overflow-y:auto;overflow-x:visible}.messages-container{overflow-y:auto;overflow-x:visible;padding-inline:var(--si-sys-sizing-spacing-x-40);min-block-size:5rem;gap:calc(var(--si-sys-sizing-spacing-y-90) + var(--si-sys-sizing-spacing-y-40)) calc(var(--si-sys-sizing-spacing-x-90) + var(--si-sys-sizing-spacing-x-40))}.messages-container ::ng-deep si-user-message:not(.last),.messages-container>::ng-deep si-activity-message:has(+si-activity-message){margin-block-end:calc(-1 * (var(--si-sys-sizing-spacing-y-90) + var(--si-sys-sizing-spacing-y-40)))}.messages-container>::ng-deep :is(si-activity-message,si-activity-trace):has(+si-ai-message),.messages-container>::ng-deep si-ai-message:has(+:is(si-activity-message,si-activity-trace)){margin-block-end:calc(-1 * (var(--si-sys-sizing-spacing-y-90) + var(--si-sys-sizing-spacing-y-40)) + var(--si-sys-sizing-spacing-y-60))}::ng-deep .messages-container:not(:has(si-ai-welcome-screen)){max-inline-size:720px}::ng-deep .messages-container:has(si-ai-welcome-screen){inline-size:100%}.chat-input-area{justify-self:flex-end;align-self:center;overflow:visible;inline-size:100%}.chat-input-area>::ng-deep *{max-inline-size:720px}::ng-deep .chat-input-area:empty:not(:has(si-inline-notification)),::ng-deep .chat-input-area:has([sichatcontainerinput]:empty):not(:has(si-inline-notification)){display:none!important}.chat-input-area:empty ::ng-deep>si-inline-notification,.chat-input-area:empty ::ng-deep *>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep>si-inline-notification,.chat-input-area:has([sichatcontainerinput]:empty) ::ng-deep *>si-inline-notification{margin-block-end:0!important}.chat-container:has(.messages-container:not(:empty)) .messages-empty-state{display:none!important}:host-context(.si-container-xs,.si-container-sm) ::ng-deep si-inline-notification :is(.alert,.alert-link){font-size:var(--si-sys-typography-font-size-body)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { messagesContainer: [{ type: i0.ViewChild, args: ['messagesContainer', { isSignal: true }] }], colorVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorVariant", required: false }] }], noAutoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "noAutoScroll", required: false }] }] } });
 
 /**
@@ -512,10 +600,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * @experimental
  */
 class SiChatContainerInputDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatContainerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiChatContainerInputDirective, isStandalone: true, selector: "[siChatContainerInput]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatContainerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiChatContainerInputDirective, isStandalone: true, selector: "[siChatContainerInput]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatContainerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatContainerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siChatContainerInput]'
@@ -550,9 +638,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiChatInputComponent {
     static idCounter = 0;
-    textInput = viewChild('textInput', ...(ngDevMode ? [{ debugName: "textInput" }] : []));
-    fileUploadDirective = viewChild(SiFileUploadDirective, ...(ngDevMode ? [{ debugName: "fileUploadDirective" }] : []));
-    fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : []));
+    textInput = viewChild('textInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textInput" }] : /* istanbul ignore next */ []));
+    fileUploadDirective = viewChild(SiFileUploadDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileUploadDirective" }] : /* istanbul ignore next */ []));
+    fileInput = viewChild('fileInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
     icons = addIcons({
         elementAttachment,
         elementPlus,
@@ -563,7 +654,8 @@ class SiChatInputComponent {
      * Current input value
      * @defaultValue ''
      */
-    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /**
      * Placeholder text for the input
      *
@@ -572,76 +664,86 @@ class SiChatInputComponent {
      * t(() => $localize`:@@SI_CHAT_INPUT.PLACEHOLDER:Enter a message…`)
      * ```
      */
-    placeholder = input(t(() => $localize `:@@SI_CHAT_INPUT.PLACEHOLDER:Enter a message…`), ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    placeholder = input(t(() => $localize `:@@SI_CHAT_INPUT.PLACEHOLDER:Enter a message…`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /**
      * Whether the input is disabled
      * @defaultValue false
      */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Whether a message is currently being sent, also prevent the sending of new ones while still allowing the user to type
      * @defaultValue false
      */
-    sending = input(false, { ...(ngDevMode ? { debugName: "sending" } : {}), transform: booleanAttribute });
+    sending = input(false, { ...(ngDevMode ? { debugName: "sending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * 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
      */
-    interruptible = input(false, { ...(ngDevMode ? { debugName: "interruptible" } : {}), transform: booleanAttribute });
+    interruptible = input(false, { ...(ngDevMode ? { debugName: "interruptible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Maximum number of characters allowed
      */
-    maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : []));
+    maxLength = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxLength" }] : /* istanbul ignore next */ []));
     /**
      * 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 = input(...(ngDevMode ? [undefined, { debugName: "disclaimer" }] : []));
+    disclaimer = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "disclaimer" }] : /* istanbul ignore next */ []));
     /**
-     * Primary actions available in the input (attach files, etc.)
-     * All actions displayed inline
+     * Primary actions available in the input. Provide at most one action.
      * @defaultValue []
      */
-    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
     /**
      * Secondary actions available in dropdown menu
      * @defaultValue []
      */
-    secondaryActions = input([], ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
+    secondaryActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActions" }] : /* istanbul ignore next */ []));
     /**
      * Whether file attachments are supported
      * @defaultValue false
      */
-    allowAttachments = input(false, ...(ngDevMode ? [{ debugName: "allowAttachments" }] : []));
+    allowAttachments = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowAttachments" }] : /* istanbul ignore next */ []));
     /**
      * Accepted file types for attachments (as accept string)
      * @defaultValue undefined
      */
-    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : []));
+    accept = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
     /**
      * Maximum file size in bytes
      * @defaultValue 10485760 (10MB)
      */
-    maxFileSize = input(10485760, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : []));
+    maxFileSize = input(10485760, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
     /**
      * Current attachments
      * @defaultValue []
      */
-    attachments = model([], ...(ngDevMode ? [{ debugName: "attachments" }] : []));
+    attachments = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
     /**
      * The label for the input, used for accessibility
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_CHAT_INPUT.LABEL:Chat message input`)
+     * t(() => $localize`:@@SI_CHAT_INPUT.LABEL:Chat input`)
      * ```
      */
-    label = input(t(() => $localize `:@@SI_CHAT_INPUT.LABEL:Chat message input`), ...(ngDevMode ? [{ debugName: "label" }] : []));
+    label = input(t(() => $localize `:@@SI_CHAT_INPUT.LABEL:Chat input`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** Parameter to pass to action handlers */
-    actionParam = input(...(ngDevMode ? [undefined, { debugName: "actionParam" }] : []));
+    actionParam = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "actionParam" }] : /* istanbul ignore next */ []));
     /**
      * Send button label
      *
@@ -650,27 +752,30 @@ class SiChatInputComponent {
      * t(() => $localize`:@@SI_CHAT_INPUT.SEND:Send`)
      * ```
      */
-    sendButtonLabel = input(t(() => $localize `:@@SI_CHAT_INPUT.SEND:Send`), ...(ngDevMode ? [{ debugName: "sendButtonLabel" }] : []));
+    sendButtonLabel = input(t(() => $localize `:@@SI_CHAT_INPUT.SEND:Send`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sendButtonLabel" }] : /* istanbul ignore next */ []));
     /**
      * Send button icon
      *
      * @defaultValue this.icons.elementSendFilled
      */
-    sendButtonIcon = input(this.icons.elementSendFilled, ...(ngDevMode ? [{ debugName: "sendButtonIcon" }] : []));
+    sendButtonIcon = input(this.icons.elementSendFilled, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sendButtonIcon" }] : /* istanbul ignore next */ []));
     /**
      * Interrupt button label
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_CHAT_INPUT.INTERRUPT:Interrupt`)
+     * t(() => $localize`:@@SI_CHAT_INPUT.INTERRUPT:Stop processing`)
      * ```
      */
-    interruptButtonLabel = input(t(() => $localize `:@@SI_CHAT_INPUT.INTERRUPT:Interrupt`), ...(ngDevMode ? [{ debugName: "interruptButtonLabel" }] : []));
+    interruptButtonLabel = input(t(() => $localize `:@@SI_CHAT_INPUT.INTERRUPT:Stop processing`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interruptButtonLabel" }] : /* istanbul ignore next */ []));
     /**
      * Auto-focus the input on component initialization
      * @defaultValue false
      */
-    autoFocus = input(false, { ...(ngDevMode ? { debugName: "autoFocus" } : {}), transform: booleanAttribute });
+    autoFocus = input(false, { ...(ngDevMode ? { debugName: "autoFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Attach file button aria label
      *
@@ -679,25 +784,42 @@ class SiChatInputComponent {
      * t(() => $localize`:@@SI_CHAT_INPUT.ATTACH_FILE:Attach file`)
      * ```
      */
-    attachFileLabel = input(t(() => $localize `:@@SI_CHAT_INPUT.ATTACH_FILE:Attach file`), ...(ngDevMode ? [{ debugName: "attachFileLabel" }] : []));
+    attachFileLabel = input(t(() => $localize `:@@SI_CHAT_INPUT.ATTACH_FILE:Attach file`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attachFileLabel" }] : /* istanbul ignore next */ []));
     /**
-     * Remove attachment aria label prefix
+     * Remove attachment aria label.
+     * The attachment name is available with `{{attachment}}`.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove attachment`)
+     * t(() => $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove {{attachment}}`)
      * ```
      */
-    removeAttachmentLabel = input(t(() => $localize `:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove attachment`), ...(ngDevMode ? [{ debugName: "removeAttachmentLabel" }] : []));
+    removeAttachmentLabel = input(t(() => $localize `:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove {{attachment}}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeAttachmentLabel" }] : /* istanbul ignore next */ []));
     /**
      * More actions button aria label
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_CHAT_INPUT.SECONDARY_ACTIONS:More actions`)
+     * t(() => $localize`:@@SI_CHAT_INPUT.SECONDARY_ACTIONS:Additional actions`)
      * ```
      */
-    secondaryActionsLabel = input(t(() => $localize `:@@SI_CHAT_INPUT.SECONDARY_ACTIONS:More actions`), ...(ngDevMode ? [{ debugName: "secondaryActionsLabel" }] : []));
+    secondaryActionsLabel = input(t(() => $localize `:@@SI_CHAT_INPUT.SECONDARY_ACTIONS:Additional actions`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActionsLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Suggested follow-up prompts to display as pill buttons above the chat input.
+     * Use `followUpPromptSelected` to handle selection and update the input value.
+     * Typically populated from AI response data and cleared after selection or on send.
+     * @defaultValue []
+     */
+    followUpPrompts = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "followUpPrompts" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when the user selects a follow-up prompt.
+     * The emitted value is the text of the selected prompt.
+     */
+    followUpPromptSelected = output();
     /**
      * Emitted when the user wants to send a message
      */
@@ -711,11 +833,15 @@ class SiChatInputComponent {
      */
     fileError = output();
     id = `__si-chat-input-${SiChatInputComponent.idCounter++}`;
-    hasContent = computed(() => this.value().trim().length > 0, ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
-    hasAttachments = computed(() => this.attachments().length > 0, ...(ngDevMode ? [{ debugName: "hasAttachments" }] : []));
-    hasActions = computed(() => this.actions().length > 0, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
-    hasSecondaryActions = computed(() => this.secondaryActions().length > 0, ...(ngDevMode ? [{ debugName: "hasSecondaryActions" }] : []));
-    allMenuActions = computed(() => [
+    hasContent = computed(() => this.value().trim().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasContent" }] : /* istanbul ignore next */ []));
+    hasAttachments = computed(() => this.attachments().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasAttachments" }] : /* istanbul ignore next */ []));
+    hasActions = computed(() => this.actions().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
+    hasSecondaryActions = computed(() => this.secondaryActions().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSecondaryActions" }] : /* istanbul ignore next */ []));
+    combinedMenuActions = computed(() => [
         ...(this.allowAttachments()
             ? [
                 {
@@ -727,33 +853,45 @@ class SiChatInputComponent {
                 }
             ]
             : []),
-        ...this.actions().map((a) => ({
-            type: 'action',
-            label: a.label,
-            icon: a.icon,
-            disabled: a.disabled,
-            action: (param) => a.action(param, a)
-        })),
         ...this.secondaryActions()
-    ], ...(ngDevMode ? [{ debugName: "allMenuActions" }] : []));
-    hasMenuActions = computed(() => this.allowAttachments() || this.hasActions() || this.hasSecondaryActions(), ...(ngDevMode ? [{ debugName: "hasMenuActions" }] : []));
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "combinedMenuActions" }] : /* istanbul ignore next */ []));
+    hasMenuActions = computed(() => this.hasSecondaryActions(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMenuActions" }] : /* istanbul ignore next */ []));
     triggerFileInput() {
         this.fileInput()?.nativeElement.click();
     }
-    canSend = computed(() => (this.hasContent() || this.hasAttachments()) && !this.disabled() && !this.sending(), ...(ngDevMode ? [{ debugName: "canSend" }] : []));
-    showInterruptButton = computed(() => this.interruptible(), ...(ngDevMode ? [{ debugName: "showInterruptButton" }] : []));
+    canSend = computed(() => (this.hasContent() || this.hasAttachments()) && !this.disabled() && !this.sending(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []));
+    showInterruptButton = computed(() => this.interruptible(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showInterruptButton" }] : /* istanbul ignore next */ []));
     buttonDisabled = computed(() => {
         if (this.showInterruptButton()) {
             return this.disabled() || this.sending();
         }
         return !this.canSend();
-    }, ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : []));
-    buttonIcon = computed(() => this.showInterruptButton() ? this.icons.elementStopFilled : this.sendButtonIcon(), ...(ngDevMode ? [{ debugName: "buttonIcon" }] : []));
-    buttonLabel = computed(() => this.showInterruptButton() ? this.interruptButtonLabel() : this.sendButtonLabel(), ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
-    dragOver = signal(false, ...(ngDevMode ? [{ debugName: "dragOver" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : /* istanbul ignore next */ []));
+    buttonIcon = computed(() => this.showInterruptButton() ? this.icons.elementStopFilled : this.sendButtonIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonIcon" }] : /* istanbul ignore next */ []));
+    buttonLabel = computed(() => this.showInterruptButton() ? this.interruptButtonLabel() : this.sendButtonLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+    dragOver = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragOver" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
     onInputChange(value) {
         this.value.set(value);
     }
+    selectFollowUpPrompt(prompt) {
+        this.followUpPromptSelected.emit(prompt);
+        this.focus();
+        afterNextRender(() => {
+            const textarea = this.textInput();
+            if (textarea?.nativeElement) {
+                this.setTextareaHeight(textarea.nativeElement);
+            }
+        }, { injector: this.injector });
+    }
     onSend() {
         if (this.canSend()) {
             this.send.emit({
@@ -878,10 +1016,10 @@ class SiChatInputComponent {
         const finalHeight = Math.max(Math.min(scrollHeight, maxHeight), minHeight);
         textarea.style.height = finalHeight + 'px';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiChatInputComponent, isStandalone: true, selector: "si-chat-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, sending: { classPropertyName: "sending", publicName: "sending", isSignal: true, isRequired: false, transformFunction: null }, interruptible: { classPropertyName: "interruptible", publicName: "interruptible", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disclaimer: { classPropertyName: "disclaimer", publicName: "disclaimer", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, allowAttachments: { classPropertyName: "allowAttachments", publicName: "allowAttachments", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, sendButtonLabel: { classPropertyName: "sendButtonLabel", publicName: "sendButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonIcon: { classPropertyName: "sendButtonIcon", publicName: "sendButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, interruptButtonLabel: { classPropertyName: "interruptButtonLabel", publicName: "interruptButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, attachFileLabel: { classPropertyName: "attachFileLabel", publicName: "attachFileLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAttachmentLabel: { classPropertyName: "removeAttachmentLabel", publicName: "removeAttachmentLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", attachments: "attachmentsChange", send: "send", interrupt: "interrupt", fileError: "fileError" }, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true, isSignal: true }, { propertyName: "fileUploadDirective", first: true, predicate: SiFileUploadDirective, descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"input-wrapper border rounded-3\"\n  [class.drag-over]=\"dragOver()\"\n  (click)=\"onContainerClick($event)\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver.set(false)\"\n>\n  @if (hasAttachments()) {\n    <si-attachment-list\n      [attachments]=\"attachments()\"\n      [removeLabel]=\"removeAttachmentLabel()\"\n      [removable]=\"true\"\n      (remove)=\"removeAttachment($event)\"\n    />\n  }\n\n  <div class=\"si-body-2\">\n    <label class=\"form-label d-none\" [for]=\"id\">{{ label() | translate }}</label>\n    <textarea\n      #textInput\n      class=\"chat-textarea w-100 border-0\"\n      rows=\"1\"\n      [id]=\"id\"\n      [placeholder]=\"placeholder() | translate\"\n      [disabled]=\"disabled()\"\n      [maxlength]=\"maxLength() || null\"\n      [(ngModel)]=\"value\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"adjustTextareaHeight($event)\"\n    ></textarea>\n  </div>\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <div class=\"btn-group\" role=\"group\">\n      <input\n        #fileInput\n        type=\"file\"\n        class=\"d-none\"\n        siFileUpload\n        [accept]=\"accept()\"\n        [maxFileSize]=\"maxFileSize()\"\n        [multiple]=\"true\"\n        (validFiles)=\"onFilesAdded($event)\"\n        (fileError)=\"onFileError($event)\"\n      />\n\n      @if (hasMenuActions()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"allActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementPlus\" />\n        </button>\n\n        <ng-template #allActionsMenu>\n          <si-menu-factory [items]=\"allMenuActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n      <ng-content />\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary-ghost btn-icon\"\n      [disabled]=\"buttonDisabled()\"\n      [attr.aria-label]=\"buttonLabel() | translate\"\n      (click)=\"onButtonClick()\"\n    >\n      <si-icon class=\"text-primary\" [icon]=\"buttonIcon()\" />\n    </button>\n  </div>\n</div>\n\n<div class=\"disclaimer-wrapper text-center mt-4 px-3\">\n  @if (disclaimer()) {\n    <span class=\"si-caption text-secondary d-block\">{{ disclaimer() | translate }}</span>\n  }\n  <ng-content select=\"[siChatInputDisclaimer]\" />\n</div>\n", styles: [":host{max-inline-size:720px}.input-wrapper{border-color:var(--element-ui-4);background-color:var(--element-base-1);padding-block:12px 8px;padding-inline:12px;display:flex;flex-direction:column;gap:12px}.input-wrapper:hover,.input-wrapper:active,.input-wrapper:focus-within{background-color:var(--element-base-input-experimental);border-color:var(--element-ui-1)}.input-wrapper.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}.chat-textarea{min-block-size:1lh;font-family:inherit;padding-block:0;display:block;outline:none;resize:none;background-color:transparent}.chat-textarea::placeholder{color:var(--element-text-secondary)}.chat-textarea:disabled{background-color:transparent;color:var(--element-text-disabled);cursor:not-allowed}.chat-textarea:disabled::placeholder{color:var(--element-text-disabled)}.input-wrapper:has(.chat-textarea:focus-visible){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.disclaimer-wrapper:empty{display:none}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiAttachmentListComponent, selector: "si-attachment-list", inputs: ["attachments", "alignment", "removable", "removeLabel"], outputs: ["remove"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiFileUploadDirective, selector: "input[type=\"file\"][siFileUpload]", inputs: ["errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["validFiles", "filesAdded", "fileError"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiChatInputComponent, isStandalone: true, selector: "si-chat-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, sending: { classPropertyName: "sending", publicName: "sending", isSignal: true, isRequired: false, transformFunction: null }, interruptible: { classPropertyName: "interruptible", publicName: "interruptible", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disclaimer: { classPropertyName: "disclaimer", publicName: "disclaimer", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, allowAttachments: { classPropertyName: "allowAttachments", publicName: "allowAttachments", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, sendButtonLabel: { classPropertyName: "sendButtonLabel", publicName: "sendButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonIcon: { classPropertyName: "sendButtonIcon", publicName: "sendButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, interruptButtonLabel: { classPropertyName: "interruptButtonLabel", publicName: "interruptButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, attachFileLabel: { classPropertyName: "attachFileLabel", publicName: "attachFileLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAttachmentLabel: { classPropertyName: "removeAttachmentLabel", publicName: "removeAttachmentLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null }, followUpPrompts: { classPropertyName: "followUpPrompts", publicName: "followUpPrompts", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", attachments: "attachmentsChange", followUpPromptSelected: "followUpPromptSelected", send: "send", interrupt: "interrupt", fileError: "fileError" }, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true, isSignal: true }, { propertyName: "fileUploadDirective", first: true, predicate: SiFileUploadDirective, descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (followUpPrompts().length) {\n  <div class=\"follow-up-prompts d-flex flex-wrap gap-4 mb-4\">\n    @for (prompt of followUpPrompts(); track $index) {\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary-ghost fw-normal\"\n        [disabled]=\"disabled() || sending()\"\n        (click)=\"selectFollowUpPrompt(prompt)\"\n        >{{ prompt }}</button\n      >\n    }\n  </div>\n}\n\n<div\n  class=\"input-wrapper border rounded-3\"\n  [class.drag-over]=\"dragOver()\"\n  (click)=\"onContainerClick($event)\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver.set(false)\"\n>\n  @if (hasAttachments()) {\n    <si-attachment-list\n      [attachments]=\"attachments()\"\n      [removeLabel]=\"removeAttachmentLabel()\"\n      [removable]=\"true\"\n      (remove)=\"removeAttachment($event)\"\n    />\n  }\n\n  <div class=\"si-body-paragraph\">\n    <label class=\"form-label d-none\" [for]=\"id\">{{ label() | translate }}</label>\n    <textarea\n      #textInput\n      class=\"chat-textarea w-100 border-0\"\n      rows=\"1\"\n      [id]=\"id\"\n      [placeholder]=\"placeholder() | translate\"\n      [disabled]=\"disabled()\"\n      [maxlength]=\"maxLength() || null\"\n      [(ngModel)]=\"value\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"adjustTextareaHeight($event)\"\n    ></textarea>\n  </div>\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <div class=\"d-flex align-items-center gap-0\">\n      <div class=\"btn-group\" role=\"group\">\n        @if (allowAttachments()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"d-none\"\n            siFileUpload\n            [accept]=\"accept()\"\n            [maxFileSize]=\"maxFileSize()\"\n            [multiple]=\"true\"\n            (validFiles)=\"onFilesAdded($event)\"\n            (fileError)=\"onFileError($event)\"\n          />\n        }\n\n        @if (allowAttachments() && !hasSecondaryActions()) {\n          <button\n            type=\"button\"\n            class=\"btn btn-tertiary-ghost btn-icon\"\n            [disabled]=\"disabled()\"\n            [siTooltip]=\"attachFileLabel() | translate\"\n            [attr.aria-label]=\"attachFileLabel() | translate\"\n            (click)=\"triggerFileInput()\"\n          >\n            <si-icon [icon]=\"icons.elementAttachment\" />\n          </button>\n        }\n\n        @if (hasMenuActions()) {\n          <button\n            type=\"button\"\n            class=\"btn btn-tertiary-ghost btn-icon\"\n            [cdkMenuTriggerFor]=\"allActionsMenu\"\n            [siTooltip]=\"secondaryActionsLabel() | translate\"\n            [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          >\n            <si-icon [icon]=\"icons.elementPlus\" />\n          </button>\n\n          <ng-template #allActionsMenu>\n            <si-menu-factory [items]=\"combinedMenuActions()\" [actionParam]=\"actionParam()\" />\n          </ng-template>\n        }\n        @if (hasActions()) {\n          @for (action of actions(); track $index) {\n            <button\n              type=\"button\"\n              class=\"btn btn-tertiary-ghost btn-icon\"\n              [disabled]=\"action.disabled\"\n              [siTooltip]=\"action.label | translate\"\n              [attr.aria-label]=\"action.label | translate\"\n              (click)=\"action.action(actionParam(), action)\"\n            >\n              <si-icon [icon]=\"action.icon\" />\n            </button>\n          }\n        }\n      </div>\n      <div class=\"d-flex align-items-center gap-0\">\n        <ng-content />\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary-ghost btn-icon\"\n      [disabled]=\"buttonDisabled()\"\n      [attr.aria-label]=\"buttonLabel() | translate\"\n      (click)=\"onButtonClick()\"\n    >\n      <si-icon class=\"text-accent\" [icon]=\"buttonIcon()\" />\n    </button>\n  </div>\n</div>\n\n<div class=\"disclaimer-wrapper text-center mt-4 px-3\">\n  @if (disclaimer()) {\n    <span class=\"si-body-sm text-secondary d-block\">{{ disclaimer() | translate }}</span>\n  }\n  <ng-content select=\"[siChatInputDisclaimer]\" />\n</div>\n", styles: [":host{max-inline-size:720px}.input-wrapper{border-color:var(--si-sys-border-4);background-color:var(--si-sys-background-1);padding-block:var(--si-sys-sizing-spacing-y-50) var(--si-sys-sizing-spacing-y-40);padding-inline:var(--si-sys-sizing-spacing-x-50);display:flex;flex-direction:column;gap:var(--si-sys-sizing-spacing-y-50) var(--si-sys-sizing-spacing-x-50)}.input-wrapper:hover,.input-wrapper:active,.input-wrapper:focus-within{background-color:var(--si-sys-background-4);border-color:var(--si-sys-border-1)}.input-wrapper.drag-over{border:1px solid var(--si-sys-effects-focus);box-shadow:0 0 0 1px var(--si-sys-effects-focus)}.chat-textarea{min-block-size:1lh;font-family:inherit;padding-block:0;display:block;outline:none;resize:none;background-color:transparent}.chat-textarea::placeholder{color:var(--si-sys-text-secondary)}.chat-textarea:disabled{background-color:transparent;color:var(--si-sys-text-disabled);cursor:not-allowed}.chat-textarea:disabled::placeholder{color:var(--si-sys-text-disabled)}.input-wrapper:has(.chat-textarea:focus-visible){outline:var(--element-button-focus-width) solid var(--si-sys-effects-focus);outline-offset:var(--element-button-focus-overlay-width)}.disclaimer-wrapper:empty{display:none}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiAttachmentListComponent, selector: "si-attachment-list", inputs: ["attachments", "alignment", "removable", "removeLabel"], outputs: ["remove"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiFileUploadDirective, selector: "input[type=\"file\"][siFileUpload]", inputs: ["errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["validFiles", "filesAdded", "fileError"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "isDisabled", "tooltipScrollStrategy", "tooltipContext"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-chat-input', imports: [
                         CdkMenuTrigger,
@@ -890,9 +1028,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiTranslatePipe,
                         SiAttachmentListComponent,
                         SiMenuFactoryComponent,
-                        SiFileUploadDirective
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"input-wrapper border rounded-3\"\n  [class.drag-over]=\"dragOver()\"\n  (click)=\"onContainerClick($event)\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver.set(false)\"\n>\n  @if (hasAttachments()) {\n    <si-attachment-list\n      [attachments]=\"attachments()\"\n      [removeLabel]=\"removeAttachmentLabel()\"\n      [removable]=\"true\"\n      (remove)=\"removeAttachment($event)\"\n    />\n  }\n\n  <div class=\"si-body-2\">\n    <label class=\"form-label d-none\" [for]=\"id\">{{ label() | translate }}</label>\n    <textarea\n      #textInput\n      class=\"chat-textarea w-100 border-0\"\n      rows=\"1\"\n      [id]=\"id\"\n      [placeholder]=\"placeholder() | translate\"\n      [disabled]=\"disabled()\"\n      [maxlength]=\"maxLength() || null\"\n      [(ngModel)]=\"value\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"adjustTextareaHeight($event)\"\n    ></textarea>\n  </div>\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <div class=\"btn-group\" role=\"group\">\n      <input\n        #fileInput\n        type=\"file\"\n        class=\"d-none\"\n        siFileUpload\n        [accept]=\"accept()\"\n        [maxFileSize]=\"maxFileSize()\"\n        [multiple]=\"true\"\n        (validFiles)=\"onFilesAdded($event)\"\n        (fileError)=\"onFileError($event)\"\n      />\n\n      @if (hasMenuActions()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"allActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementPlus\" />\n        </button>\n\n        <ng-template #allActionsMenu>\n          <si-menu-factory [items]=\"allMenuActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n      <ng-content />\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary-ghost btn-icon\"\n      [disabled]=\"buttonDisabled()\"\n      [attr.aria-label]=\"buttonLabel() | translate\"\n      (click)=\"onButtonClick()\"\n    >\n      <si-icon class=\"text-primary\" [icon]=\"buttonIcon()\" />\n    </button>\n  </div>\n</div>\n\n<div class=\"disclaimer-wrapper text-center mt-4 px-3\">\n  @if (disclaimer()) {\n    <span class=\"si-caption text-secondary d-block\">{{ disclaimer() | translate }}</span>\n  }\n  <ng-content select=\"[siChatInputDisclaimer]\" />\n</div>\n", styles: [":host{max-inline-size:720px}.input-wrapper{border-color:var(--element-ui-4);background-color:var(--element-base-1);padding-block:12px 8px;padding-inline:12px;display:flex;flex-direction:column;gap:12px}.input-wrapper:hover,.input-wrapper:active,.input-wrapper:focus-within{background-color:var(--element-base-input-experimental);border-color:var(--element-ui-1)}.input-wrapper.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}.chat-textarea{min-block-size:1lh;font-family:inherit;padding-block:0;display:block;outline:none;resize:none;background-color:transparent}.chat-textarea::placeholder{color:var(--element-text-secondary)}.chat-textarea:disabled{background-color:transparent;color:var(--element-text-disabled);cursor:not-allowed}.chat-textarea:disabled::placeholder{color:var(--element-text-disabled)}.input-wrapper:has(.chat-textarea:focus-visible){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.disclaimer-wrapper:empty{display:none}\n"] }]
-        }], propDecorators: { textInput: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], fileUploadDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFileUploadDirective), { isSignal: true }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sending: [{ type: i0.Input, args: [{ isSignal: true, alias: "sending", required: false }] }], interruptible: [{ type: i0.Input, args: [{ isSignal: true, alias: "interruptible", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], disclaimer: [{ type: i0.Input, args: [{ isSignal: true, alias: "disclaimer", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], allowAttachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAttachments", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }, { type: i0.Output, args: ["attachmentsChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], sendButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonLabel", required: false }] }], sendButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonIcon", required: false }] }], interruptButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "interruptButtonLabel", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], attachFileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachFileLabel", required: false }] }], removeAttachmentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAttachmentLabel", required: false }] }], secondaryActionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionsLabel", required: false }] }], send: [{ type: i0.Output, args: ["send"] }], interrupt: [{ type: i0.Output, args: ["interrupt"] }], fileError: [{ type: i0.Output, args: ["fileError"] }] } });
+                        SiFileUploadDirective,
+                        SiTooltipDirective
+                    ], template: "@if (followUpPrompts().length) {\n  <div class=\"follow-up-prompts d-flex flex-wrap gap-4 mb-4\">\n    @for (prompt of followUpPrompts(); track $index) {\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary-ghost fw-normal\"\n        [disabled]=\"disabled() || sending()\"\n        (click)=\"selectFollowUpPrompt(prompt)\"\n        >{{ prompt }}</button\n      >\n    }\n  </div>\n}\n\n<div\n  class=\"input-wrapper border rounded-3\"\n  [class.drag-over]=\"dragOver()\"\n  (click)=\"onContainerClick($event)\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver.set(false)\"\n>\n  @if (hasAttachments()) {\n    <si-attachment-list\n      [attachments]=\"attachments()\"\n      [removeLabel]=\"removeAttachmentLabel()\"\n      [removable]=\"true\"\n      (remove)=\"removeAttachment($event)\"\n    />\n  }\n\n  <div class=\"si-body-paragraph\">\n    <label class=\"form-label d-none\" [for]=\"id\">{{ label() | translate }}</label>\n    <textarea\n      #textInput\n      class=\"chat-textarea w-100 border-0\"\n      rows=\"1\"\n      [id]=\"id\"\n      [placeholder]=\"placeholder() | translate\"\n      [disabled]=\"disabled()\"\n      [maxlength]=\"maxLength() || null\"\n      [(ngModel)]=\"value\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"adjustTextareaHeight($event)\"\n    ></textarea>\n  </div>\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <div class=\"d-flex align-items-center gap-0\">\n      <div class=\"btn-group\" role=\"group\">\n        @if (allowAttachments()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"d-none\"\n            siFileUpload\n            [accept]=\"accept()\"\n            [maxFileSize]=\"maxFileSize()\"\n            [multiple]=\"true\"\n            (validFiles)=\"onFilesAdded($event)\"\n            (fileError)=\"onFileError($event)\"\n          />\n        }\n\n        @if (allowAttachments() && !hasSecondaryActions()) {\n          <button\n            type=\"button\"\n            class=\"btn btn-tertiary-ghost btn-icon\"\n            [disabled]=\"disabled()\"\n            [siTooltip]=\"attachFileLabel() | translate\"\n            [attr.aria-label]=\"attachFileLabel() | translate\"\n            (click)=\"triggerFileInput()\"\n          >\n            <si-icon [icon]=\"icons.elementAttachment\" />\n          </button>\n        }\n\n        @if (hasMenuActions()) {\n          <button\n            type=\"button\"\n            class=\"btn btn-tertiary-ghost btn-icon\"\n            [cdkMenuTriggerFor]=\"allActionsMenu\"\n            [siTooltip]=\"secondaryActionsLabel() | translate\"\n            [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          >\n            <si-icon [icon]=\"icons.elementPlus\" />\n          </button>\n\n          <ng-template #allActionsMenu>\n            <si-menu-factory [items]=\"combinedMenuActions()\" [actionParam]=\"actionParam()\" />\n          </ng-template>\n        }\n        @if (hasActions()) {\n          @for (action of actions(); track $index) {\n            <button\n              type=\"button\"\n              class=\"btn btn-tertiary-ghost btn-icon\"\n              [disabled]=\"action.disabled\"\n              [siTooltip]=\"action.label | translate\"\n              [attr.aria-label]=\"action.label | translate\"\n              (click)=\"action.action(actionParam(), action)\"\n            >\n              <si-icon [icon]=\"action.icon\" />\n            </button>\n          }\n        }\n      </div>\n      <div class=\"d-flex align-items-center gap-0\">\n        <ng-content />\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary-ghost btn-icon\"\n      [disabled]=\"buttonDisabled()\"\n      [attr.aria-label]=\"buttonLabel() | translate\"\n      (click)=\"onButtonClick()\"\n    >\n      <si-icon class=\"text-accent\" [icon]=\"buttonIcon()\" />\n    </button>\n  </div>\n</div>\n\n<div class=\"disclaimer-wrapper text-center mt-4 px-3\">\n  @if (disclaimer()) {\n    <span class=\"si-body-sm text-secondary d-block\">{{ disclaimer() | translate }}</span>\n  }\n  <ng-content select=\"[siChatInputDisclaimer]\" />\n</div>\n", styles: [":host{max-inline-size:720px}.input-wrapper{border-color:var(--si-sys-border-4);background-color:var(--si-sys-background-1);padding-block:var(--si-sys-sizing-spacing-y-50) var(--si-sys-sizing-spacing-y-40);padding-inline:var(--si-sys-sizing-spacing-x-50);display:flex;flex-direction:column;gap:var(--si-sys-sizing-spacing-y-50) var(--si-sys-sizing-spacing-x-50)}.input-wrapper:hover,.input-wrapper:active,.input-wrapper:focus-within{background-color:var(--si-sys-background-4);border-color:var(--si-sys-border-1)}.input-wrapper.drag-over{border:1px solid var(--si-sys-effects-focus);box-shadow:0 0 0 1px var(--si-sys-effects-focus)}.chat-textarea{min-block-size:1lh;font-family:inherit;padding-block:0;display:block;outline:none;resize:none;background-color:transparent}.chat-textarea::placeholder{color:var(--si-sys-text-secondary)}.chat-textarea:disabled{background-color:transparent;color:var(--si-sys-text-disabled);cursor:not-allowed}.chat-textarea:disabled::placeholder{color:var(--si-sys-text-disabled)}.input-wrapper:has(.chat-textarea:focus-visible){outline:var(--element-button-focus-width) solid var(--si-sys-effects-focus);outline-offset:var(--element-button-focus-overlay-width)}.disclaimer-wrapper:empty{display:none}\n"] }]
+        }], propDecorators: { textInput: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], fileUploadDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFileUploadDirective), { isSignal: true }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sending: [{ type: i0.Input, args: [{ isSignal: true, alias: "sending", required: false }] }], interruptible: [{ type: i0.Input, args: [{ isSignal: true, alias: "interruptible", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], disclaimer: [{ type: i0.Input, args: [{ isSignal: true, alias: "disclaimer", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], allowAttachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAttachments", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }, { type: i0.Output, args: ["attachmentsChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], sendButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonLabel", required: false }] }], sendButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonIcon", required: false }] }], interruptButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "interruptButtonLabel", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], attachFileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachFileLabel", required: false }] }], removeAttachmentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAttachmentLabel", required: false }] }], secondaryActionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionsLabel", required: false }] }], followUpPrompts: [{ type: i0.Input, args: [{ isSignal: true, alias: "followUpPrompts", required: false }] }], followUpPromptSelected: [{ type: i0.Output, args: ["followUpPromptSelected"] }], send: [{ type: i0.Output, args: ["send"] }], interrupt: [{ type: i0.Output, args: ["interrupt"] }], fileError: [{ type: i0.Output, args: ["fileError"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -916,10 +1055,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * @experimental
  */
 class SiChatInputDisclaimerDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatInputDisclaimerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiChatInputDisclaimerDirective, isStandalone: true, selector: "[siChatInputDisclaimer]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatInputDisclaimerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiChatInputDisclaimerDirective, isStandalone: true, selector: "[siChatInputDisclaimer]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChatInputDisclaimerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiChatInputDisclaimerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siChatInputDisclaimer]'
@@ -935,100 +1074,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  *
  * 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.
+ * aligned to the right side.
  * 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
  */
 class SiUserMessageComponent {
-    formattedContent = viewChild('formattedContent', ...(ngDevMode ? [{ debugName: "formattedContent" }] : []));
     icons = addIcons({ elementOptionsVertical });
     /**
      * The user message content
      * @defaultValue ''
      */
-    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : []));
-    /**
-     * 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
-     */
-    contentFormatter = input(undefined, ...(ngDevMode ? [{ debugName: "contentFormatter" }] : []));
+    content = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
     /**
      * Primary message actions (edit, delete, copy, etc.).
      * All actions displayed inline
      * @defaultValue []
      */
-    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
     /**
      * Secondary actions available in dropdown menu, first use primary actions and only add secondary actions additionally
      * @defaultValue []
      */
-    secondaryActions = input([], ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
+    secondaryActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActions" }] : /* istanbul ignore next */ []));
     /**
      * List of attachments included with this message
      * @defaultValue []
      */
-    attachments = input([], ...(ngDevMode ? [{ debugName: "attachments" }] : []));
+    attachments = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
     /** Parameter to pass to action handlers */
-    actionParam = input(...(ngDevMode ? [undefined, { debugName: "actionParam" }] : []));
+    actionParam = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "actionParam" }] : /* istanbul ignore next */ []));
     /**
      * More actions button aria label
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_USER_MESSAGE.SECONDARY_ACTIONS:More actions`)
+     * t(() => $localize`:@@SI_USER_MESSAGE.SECONDARY_ACTIONS:Additional actions`)
      * ```
      */
-    secondaryActionsLabel = input(t(() => $localize `:@@SI_USER_MESSAGE.SECONDARY_ACTIONS:More actions`), ...(ngDevMode ? [{ debugName: "secondaryActionsLabel" }] : []));
-    hasAttachments = computed(() => this.attachments()?.length > 0, ...(ngDevMode ? [{ debugName: "hasAttachments" }] : []));
-    textContent = signal(undefined, ...(ngDevMode ? [{ debugName: "textContent" }] : []));
-    constructor() {
-        effect(() => {
-            const formatter = this.contentFormatter();
-            const contentValue = this.content();
-            const container = this.formattedContent()?.nativeElement;
-            if (container && contentValue) {
-                if (formatter) {
-                    const formatted = formatter(contentValue);
-                    if (typeof formatted === 'string') {
-                        this.textContent.set(formatted);
-                    }
-                    else if (formatted instanceof Node) {
-                        this.textContent.set(undefined);
-                        container.innerHTML = '';
-                        container.appendChild(formatted);
-                    }
-                }
-                else {
-                    this.textContent.set(contentValue);
-                }
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiUserMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiUserMessageComponent, isStandalone: true, selector: "si-user-message", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentFormatter: { classPropertyName: "contentFormatter", publicName: "contentFormatter", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "formattedContent", first: true, predicate: ["formattedContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<si-chat-message alignment=\"end\" actionsPosition=\"bottom\" [loading]=\"false\">\n  @if (hasAttachments()) {\n    <si-attachment-list alignment=\"end\" [attachments]=\"attachments()\" [removable]=\"false\" />\n  }\n\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"btn-group user-message-actions\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}:host:not(:has([siChatMessageAction])) si-chat-message{padding-block-end:36px!important}.user-message-actions{opacity:0;transition:opacity .2s ease}si-chat-message{--chat-message-bubble-bg: var(--element-base-4);max-inline-size:600px;margin-inline-start:auto}:host:hover .user-message-actions,.user-message-actions:hover,.user-message-actions:has(::ng-deep [aria-expanded=true]),:host-context(.si-container-xs,.si-container-sm) .user-message-actions:active{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiAttachmentListComponent, selector: "si-attachment-list", inputs: ["attachments", "alignment", "removable", "removeLabel"], outputs: ["remove"] }, { kind: "component", type: SiChatMessageComponent, selector: "si-chat-message", inputs: ["loading", "alignment", "actionsPosition"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiChatMessageActionDirective, selector: "[siChatMessageAction]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    secondaryActionsLabel = input(t(() => $localize `:@@SI_USER_MESSAGE.SECONDARY_ACTIONS:Additional actions`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActionsLabel" }] : /* istanbul ignore next */ []));
+    hasAttachments = computed(() => this.attachments()?.length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasAttachments" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiUserMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiUserMessageComponent, isStandalone: true, selector: "si-user-message", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionsLabel: { classPropertyName: "secondaryActionsLabel", publicName: "secondaryActionsLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<si-chat-message alignment=\"end\" actionsPosition=\"bottom\" [loading]=\"false\">\n  @if (hasAttachments()) {\n    <si-attachment-list alignment=\"end\" [attachments]=\"attachments()\" [removable]=\"false\" />\n  }\n\n  @if (content()) {\n    <span class=\"text-pre-wrap\">{{ content() }}</span>\n  } @else {\n    <ng-content />\n  }\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"btn-group user-message-actions\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}:host:not(:has([siChatMessageAction])) si-chat-message{padding-block-end:calc(32px + var(--si-sys-sizing-spacing-y-20))!important}.user-message-actions{opacity:0;transition:opacity .2s ease}si-chat-message{--chat-message-bubble-bg: var(--si-sys-background-2);max-inline-size:600px;margin-inline-start:auto}:host:hover .user-message-actions,.user-message-actions:hover,.user-message-actions:has(::ng-deep [aria-expanded=true]),:host-context(.si-container-xs,.si-container-sm) .user-message-actions:active{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiAttachmentListComponent, selector: "si-attachment-list", inputs: ["attachments", "alignment", "removable", "removeLabel"], outputs: ["remove"] }, { kind: "component", type: SiChatMessageComponent, selector: "si-chat-message", inputs: ["loading", "alignment", "actionsPosition"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiChatMessageActionDirective, selector: "[siChatMessageAction]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiUserMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiUserMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-user-message', imports: [
                         CdkMenuTrigger,
@@ -1038,8 +1144,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiMenuFactoryComponent,
                         SiChatMessageActionDirective,
                         SiTranslatePipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-chat-message alignment=\"end\" actionsPosition=\"bottom\" [loading]=\"false\">\n  @if (hasAttachments()) {\n    <si-attachment-list alignment=\"end\" [attachments]=\"attachments()\" [removable]=\"false\" />\n  }\n\n  @if (content()) {\n    @let content = textContent();\n    @if (content) {\n      <span class=\"text-pre-wrap\">{{ content }}</span>\n    } @else {\n      <div #formattedContent> </div>\n    }\n  }\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"btn-group user-message-actions\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}:host:not(:has([siChatMessageAction])) si-chat-message{padding-block-end:36px!important}.user-message-actions{opacity:0;transition:opacity .2s ease}si-chat-message{--chat-message-bubble-bg: var(--element-base-4);max-inline-size:600px;margin-inline-start:auto}:host:hover .user-message-actions,.user-message-actions:hover,.user-message-actions:has(::ng-deep [aria-expanded=true]),:host-context(.si-container-xs,.si-container-sm) .user-message-actions:active{opacity:1}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { formattedContent: [{ type: i0.ViewChild, args: ['formattedContent', { isSignal: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], contentFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentFormatter", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], secondaryActionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionsLabel", required: false }] }] } });
+                    ], template: "<si-chat-message alignment=\"end\" actionsPosition=\"bottom\" [loading]=\"false\">\n  @if (hasAttachments()) {\n    <si-attachment-list alignment=\"end\" [attachments]=\"attachments()\" [removable]=\"false\" />\n  }\n\n  @if (content()) {\n    <span class=\"text-pre-wrap\">{{ content() }}</span>\n  } @else {\n    <ng-content />\n  }\n  @if (actions().length > 0 || secondaryActions().length > 0) {\n    <div class=\"btn-group user-message-actions\" role=\"group\" siChatMessageAction>\n      @for (action of actions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [disabled]=\"action.disabled\"\n          [attr.aria-label]=\"action.label | translate\"\n          (click)=\"action.action(actionParam(), action)\"\n        >\n          <si-icon [icon]=\"action.icon\" />\n        </button>\n      }\n\n      @if (secondaryActions().length > 0) {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary-ghost btn-icon\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [attr.aria-label]=\"secondaryActionsLabel() | translate\"\n          [attr.title]=\"secondaryActionsLabel() | translate\"\n        >\n          <si-icon [icon]=\"icons.elementOptionsVertical\" />\n        </button>\n\n        <ng-template #secondaryActionsMenu>\n          <si-menu-factory [items]=\"secondaryActions()\" [actionParam]=\"actionParam()\" />\n        </ng-template>\n      }\n    </div>\n  }\n</si-chat-message>\n", styles: [":host{display:block}:host:not(:has([siChatMessageAction])) si-chat-message{padding-block-end:calc(32px + var(--si-sys-sizing-spacing-y-20))!important}.user-message-actions{opacity:0;transition:opacity .2s ease}si-chat-message{--chat-message-bubble-bg: var(--si-sys-background-2);max-inline-size:600px;margin-inline-start:auto}:host:hover .user-message-actions,.user-message-actions:hover,.user-message-actions:has(::ng-deep [aria-expanded=true]),:host-context(.si-container-xs,.si-container-sm) .user-message-actions:active{opacity:1}\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], secondaryActionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionsLabel", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -1058,7 +1164,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * - Clickable prompt suggestion cards
  * - Optional refresh button to regenerate suggestions
  *
- * @see {@link SiAiChatContainerComponent} for the AI chat container which uses this component
  * @see {@link SiChatContainerComponent} for the base chat container
  *
  * @experimental
@@ -1068,17 +1173,20 @@ class SiAiWelcomeScreenComponent {
      * The list of prompt categories
      * @defaultValue []
      */
-    categories = input([], ...(ngDevMode ? [{ debugName: "categories" }] : []));
+    categories = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
     /**
      * The currently selected category ID
      * @defaultValue undefined
      */
-    selectedCategory = model(undefined, ...(ngDevMode ? [{ debugName: "selectedCategory" }] : []));
+    selectedCategory = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedCategory" }] : /* istanbul ignore next */ []));
     /**
      * The list of prompt suggestions as an array, update this when the selected category changes.
      * @defaultValue []
      */
-    promptSuggestions = input([], ...(ngDevMode ? [{ debugName: "promptSuggestions" }] : []));
+    promptSuggestions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "promptSuggestions" }] : /* istanbul ignore next */ []));
     /**
      * Emitted when a prompt suggestion is clicked
      */
@@ -1089,14 +1197,14 @@ class SiAiWelcomeScreenComponent {
     onPromptClick(suggestion) {
         this.promptSelected.emit(suggestion);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAiWelcomeScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiAiWelcomeScreenComponent, isStandalone: true, selector: "si-ai-welcome-screen", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, selectedCategory: { classPropertyName: "selectedCategory", publicName: "selectedCategory", isSignal: true, isRequired: false, transformFunction: null }, promptSuggestions: { classPropertyName: "promptSuggestions", publicName: "promptSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedCategory: "selectedCategoryChange", promptSelected: "promptSelected" }, host: { classAttribute: "d-block" }, ngImport: i0, template: "<div class=\"d-flex flex-column gap-10 align-items-center w-100\">\n  <!-- Welcome Header -->\n  <div class=\"welcome-header d-flex flex-column gap-4 w-100 pt-10 pb-8\">\n    <ng-content />\n  </div>\n\n  <!-- Prompt Categories and Suggestions -->\n  <div class=\"prompt-suggestions d-flex flex-column gap-6 align-items-center w-100\">\n    @if (categories().length > 0) {\n      <div class=\"d-flex gap-4 align-items-center w-100\">\n        @for (category of categories(); track $index) {\n          <si-summary-chip\n            class=\"user-select-none\"\n            [label]=\"category.label\"\n            [selected]=\"selectedCategory() === category.label\"\n            (selectedChange)=\"onCategoryClick(category.label)\"\n          />\n        }\n      </div>\n    }\n\n    @if (promptSuggestions().length > 0) {\n      <div class=\"d-flex flex-column gap-4 w-100\">\n        @for (suggestion of promptSuggestions(); track $index) {\n          <button si-action-card type=\"button\" class=\"w-100\" (click)=\"onPromptClick(suggestion)\">\n            <div body class=\"card-body card-text\">\n              {{ suggestion.text }}\n            </div>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".welcome-header{max-inline-size:720px;overflow-x:visible;position:relative}.welcome-header:before{position:absolute;content:\"\";inset-inline-start:-104px;inset-block-start:50%;transform:translateY(-50%);inline-size:168px;block-size:168px;background-image:var(--element-brand-ai-key-visual);background-size:contain;background-repeat:no-repeat;background-position:center}:host{container-type:inline-size}@container (max-width: 767.98px){:host .welcome-header:before{display:none}}.prompt-suggestions{max-inline-size:720px}.prompt-suggestions>div:first-child{flex-wrap:wrap}:host{inline-size:100%}::ng-deep button[si-action-card]{background-color:transparent;border-radius:var(--element-radius-2);border:1px solid var(--element-ui-4)}\n"], dependencies: [{ kind: "component", type: SiActionCardComponent, selector: "button[si-action-card]", inputs: ["selectable", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: SiSummaryChipComponent, selector: "si-summary-chip", inputs: ["status", "icon", "color", "stackedIcon", "stackedColor", "label", "value", "selected", "disabled", "hideLabel"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiAiWelcomeScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiAiWelcomeScreenComponent, isStandalone: true, selector: "si-ai-welcome-screen", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, selectedCategory: { classPropertyName: "selectedCategory", publicName: "selectedCategory", isSignal: true, isRequired: false, transformFunction: null }, promptSuggestions: { classPropertyName: "promptSuggestions", publicName: "promptSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedCategory: "selectedCategoryChange", promptSelected: "promptSelected" }, host: { classAttribute: "d-block" }, ngImport: i0, template: "<div class=\"d-flex flex-column gap-13 align-items-center w-100\">\n  <!-- Welcome Header -->\n  <div class=\"welcome-header d-flex flex-column gap-4 w-100 pt-13 pb-8\">\n    <ng-content />\n  </div>\n\n  <!-- Prompt Categories and Suggestions -->\n  <div class=\"prompt-suggestions d-flex flex-column gap-6 align-items-center w-100\">\n    @if (categories().length > 0) {\n      <div class=\"d-flex gap-4 align-items-center w-100\">\n        @for (category of categories(); track $index) {\n          <si-summary-chip\n            class=\"user-select-none\"\n            [label]=\"category.label\"\n            [selected]=\"selectedCategory() === category.label\"\n            (selectedChange)=\"onCategoryClick(category.label)\"\n          />\n        }\n      </div>\n    }\n\n    @if (promptSuggestions().length > 0) {\n      <div class=\"d-flex flex-column gap-4 w-100\">\n        @for (suggestion of promptSuggestions(); track $index) {\n          <button si-action-card type=\"button\" class=\"w-100\" (click)=\"onPromptClick(suggestion)\">\n            <div body class=\"card-body card-text\">\n              {{ suggestion.text }}\n            </div>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".welcome-header{max-inline-size:720px;overflow-x:visible;position:relative}.welcome-header:before{position:absolute;content:\"\";inset-inline-start:-104px;inset-block-start:50%;transform:translateY(-50%);inline-size:168px;block-size:168px;background-image:var(--element-brand-ai-key-visual);background-size:contain;background-repeat:no-repeat;background-position:center}:host{container-type:inline-size}@container (max-width: 767.98px){:host .welcome-header:before{display:none}}.prompt-suggestions{max-inline-size:720px}.prompt-suggestions>div:first-child{flex-wrap:wrap}:host{inline-size:100%}::ng-deep button[si-action-card]{background-color:transparent;border-radius:var(--element-radius-2);border:1px solid var(--si-sys-border-4)}\n"], dependencies: [{ kind: "component", type: SiActionCardComponent, selector: "button[si-action-card]", inputs: ["selectable", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: SiSummaryChipComponent, selector: "si-summary-chip", inputs: ["status", "icon", "color", "stackedIcon", "stackedColor", "label", "value", "selected", "disabled", "hideLabel"], outputs: ["selectedChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAiWelcomeScreenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiAiWelcomeScreenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-ai-welcome-screen', imports: [SiActionCardComponent, SiSummaryChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-ai-welcome-screen', imports: [SiActionCardComponent, SiSummaryChipComponent], host: {
                         class: 'd-block'
-                    }, template: "<div class=\"d-flex flex-column gap-10 align-items-center w-100\">\n  <!-- Welcome Header -->\n  <div class=\"welcome-header d-flex flex-column gap-4 w-100 pt-10 pb-8\">\n    <ng-content />\n  </div>\n\n  <!-- Prompt Categories and Suggestions -->\n  <div class=\"prompt-suggestions d-flex flex-column gap-6 align-items-center w-100\">\n    @if (categories().length > 0) {\n      <div class=\"d-flex gap-4 align-items-center w-100\">\n        @for (category of categories(); track $index) {\n          <si-summary-chip\n            class=\"user-select-none\"\n            [label]=\"category.label\"\n            [selected]=\"selectedCategory() === category.label\"\n            (selectedChange)=\"onCategoryClick(category.label)\"\n          />\n        }\n      </div>\n    }\n\n    @if (promptSuggestions().length > 0) {\n      <div class=\"d-flex flex-column gap-4 w-100\">\n        @for (suggestion of promptSuggestions(); track $index) {\n          <button si-action-card type=\"button\" class=\"w-100\" (click)=\"onPromptClick(suggestion)\">\n            <div body class=\"card-body card-text\">\n              {{ suggestion.text }}\n            </div>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".welcome-header{max-inline-size:720px;overflow-x:visible;position:relative}.welcome-header:before{position:absolute;content:\"\";inset-inline-start:-104px;inset-block-start:50%;transform:translateY(-50%);inline-size:168px;block-size:168px;background-image:var(--element-brand-ai-key-visual);background-size:contain;background-repeat:no-repeat;background-position:center}:host{container-type:inline-size}@container (max-width: 767.98px){:host .welcome-header:before{display:none}}.prompt-suggestions{max-inline-size:720px}.prompt-suggestions>div:first-child{flex-wrap:wrap}:host{inline-size:100%}::ng-deep button[si-action-card]{background-color:transparent;border-radius:var(--element-radius-2);border:1px solid var(--element-ui-4)}\n"] }]
+                    }, template: "<div class=\"d-flex flex-column gap-13 align-items-center w-100\">\n  <!-- Welcome Header -->\n  <div class=\"welcome-header d-flex flex-column gap-4 w-100 pt-13 pb-8\">\n    <ng-content />\n  </div>\n\n  <!-- Prompt Categories and Suggestions -->\n  <div class=\"prompt-suggestions d-flex flex-column gap-6 align-items-center w-100\">\n    @if (categories().length > 0) {\n      <div class=\"d-flex gap-4 align-items-center w-100\">\n        @for (category of categories(); track $index) {\n          <si-summary-chip\n            class=\"user-select-none\"\n            [label]=\"category.label\"\n            [selected]=\"selectedCategory() === category.label\"\n            (selectedChange)=\"onCategoryClick(category.label)\"\n          />\n        }\n      </div>\n    }\n\n    @if (promptSuggestions().length > 0) {\n      <div class=\"d-flex flex-column gap-4 w-100\">\n        @for (suggestion of promptSuggestions(); track $index) {\n          <button si-action-card type=\"button\" class=\"w-100\" (click)=\"onPromptClick(suggestion)\">\n            <div body class=\"card-body card-text\">\n              {{ suggestion.text }}\n            </div>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".welcome-header{max-inline-size:720px;overflow-x:visible;position:relative}.welcome-header:before{position:absolute;content:\"\";inset-inline-start:-104px;inset-block-start:50%;transform:translateY(-50%);inline-size:168px;block-size:168px;background-image:var(--element-brand-ai-key-visual);background-size:contain;background-repeat:no-repeat;background-position:center}:host{container-type:inline-size}@container (max-width: 767.98px){:host .welcome-header:before{display:none}}.prompt-suggestions{max-inline-size:720px}.prompt-suggestions>div:first-child{flex-wrap:wrap}:host{inline-size:100%}::ng-deep button[si-action-card]{background-color:transparent;border-radius:var(--element-radius-2);border:1px solid var(--si-sys-border-4)}\n"] }]
         }], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], selectedCategory: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategory", required: false }] }, { type: i0.Output, args: ["selectedCategoryChange"] }], promptSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "promptSuggestions", required: false }] }], promptSelected: [{ type: i0.Output, args: ["promptSelected"] }] } });
 
 /**
@@ -1108,5 +1216,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiAiMessageComponent, SiAiWelcomeScreenComponent, SiAttachmentListComponent, SiChatContainerComponent, SiChatContainerInputDirective, SiChatInputComponent, SiChatInputDisclaimerDirective, SiChatMessageActionDirective, SiChatMessageComponent, SiUserMessageComponent };
+export { SiActivityMessageComponent, SiActivityMessagePartComponent, SiActivityTraceComponent, SiAiMessageComponent, SiAiWelcomeScreenComponent, SiAttachmentListComponent, SiChatContainerComponent, SiChatContainerInputDirective, SiChatInputComponent, SiChatInputDisclaimerDirective, SiChatMessageActionDirective, SiChatMessageComponent, SiUserMessageComponent };
 //# sourceMappingURL=siemens-element-ng-chat-messages.mjs.map