feat: add base chat messages

api-goldens/element-ng/chat-messages/index.api.md

@@ -0,0 +1,112 @@
+## Public API Report File for "@siemens/element-ng_chat-messages"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import * as i1 from '@siemens/element-ng/resize-observer';
+import { MenuItem } from '@siemens/element-ng/menu';
+import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
+import { SiModalService } from '@siemens/element-ng/modal';
+import { TemplateRef } from '@angular/core';
+import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
+
+// @public
+export interface Attachment {
+    name: string;
+    previewTemplate?: TemplateRef<any> | (() => TemplateRef<any>);
+}
+
+// @public
+export interface MessageAction {
+    action: (actionParam: any, source: this) => void;
+    disabled?: boolean;
+    icon: string;
+    label: TranslatableString;
+}
+
+// @public
+export class SiAiMessageComponent {
+    constructor();
+    readonly actionParam: _angular_core.InputSignal<unknown>;
+    readonly actions: _angular_core.InputSignal<MessageAction[]>;
+    readonly content: _angular_core.InputSignal<string>;
+    readonly contentFormatter: _angular_core.InputSignal<((text: string) => string | Node) | undefined>;
+    // (undocumented)
+    protected readonly formattedContent: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly secondaryActions: _angular_core.InputSignal<MenuItem[]>;
+    readonly secondaryActionsLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    // (undocumented)
+    protected readonly textContent: _angular_core.WritableSignal<string | undefined>;
+    // (undocumented)
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiAiMessageComponent, "si-ai-message", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "contentFormatter": { "alias": "contentFormatter"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "actionParam": { "alias": "actionParam"; "required": false; "isSignal": true; }; "secondaryActionsLabel": { "alias": "secondaryActionsLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    // (undocumented)
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiAiMessageComponent, never>;
+}
+
+// @public
+export class SiAttachmentListComponent {
+    readonly alignment: _angular_core.InputSignal<"start" | "end">;
+    readonly attachments: _angular_core.InputSignal<Attachment[]>;
+    // (undocumented)
+    protected getFileIcon(name: string): string;
+    // (undocumented)
+    protected modalService: SiModalService;
+    // (undocumented)
+    protected openPreview(event: Event, attachment: Attachment): void;
+    readonly removable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly remove: _angular_core.OutputEmitterRef<Attachment>;
+    readonly removeLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    // (undocumented)
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiAttachmentListComponent, "si-attachment-list", never, { "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "remove": "remove"; }, never, never, true, never>;
+    // (undocumented)
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiAttachmentListComponent, never>;
+}
+
+// @public
+export class SiChatMessageActionDirective {
+    // (undocumented)
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiChatMessageActionDirective, "[siChatMessageAction]", never, {}, {}, never, never, true, never>;
+    // (undocumented)
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatMessageActionDirective, never>;
+}
+
+// @public
+export class SiChatMessageComponent {
+    readonly actionsPosition: _angular_core.InputSignal<"bottom" | "side">;
+    readonly alignment: _angular_core.InputSignal<"start" | "end">;
+    readonly loading: _angular_core.InputSignal<boolean>;
+    // (undocumented)
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiChatMessageComponent, "si-chat-message", never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "actionsPosition": { "alias": "actionsPosition"; "required": false; "isSignal": true; }; }, {}, never, ["si-icon,si-avatar,img", "si-attachment-list,si-badge", "*", "[siChatMessageAction]"], true, [{ directive: typeof i1.SiResponsiveContainerDirective; inputs: {}; outputs: {}; }]>;
+    // (undocumented)
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatMessageComponent, never>;
+}
+
+// @public
+export class SiUserMessageComponent {
+    constructor();
+    readonly actionParam: _angular_core.InputSignal<any>;
+    readonly actions: _angular_core.InputSignal<MessageAction[]>;
+    readonly attachments: _angular_core.InputSignal<Attachment[]>;
+    readonly content: _angular_core.InputSignal<string>;
+    readonly contentFormatter: _angular_core.InputSignal<((text: string) => string | Node) | undefined>;
+    // (undocumented)
+    protected readonly formattedContent: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    // (undocumented)
+    protected readonly hasAttachments: _angular_core.Signal<boolean>;
+    readonly secondaryActions: _angular_core.InputSignal<MenuItem[]>;
+    readonly secondaryActionsLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    // (undocumented)
+    protected readonly textContent: _angular_core.WritableSignal<string | undefined>;
+    // (undocumented)
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiUserMessageComponent, "si-user-message", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "contentFormatter": { "alias": "contentFormatter"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "actionParam": { "alias": "actionParam"; "required": false; "isSignal": true; }; "secondaryActionsLabel": { "alias": "secondaryActionsLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    // (undocumented)
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiUserMessageComponent, never>;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```

api-goldens/element-ng/translate/index.api.md

@@ -11,6 +11,8 @@ export const provideSiTranslatableOverrides: (values: SiTranslatableKeys) => Pro
 
 // @public (undocumented)
 export interface SiTranslatableKeys {
+    // (undocumented)
+    'SI_AI_MESSAGE.SECONDARY_ACTIONS'?: string;
     // (undocumented)
     'SI_ALERT_DIALOG.OK'?: string;
     // (undocumented)
@@ -20,6 +22,8 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_APPLICATION_HEADER.TOGGLE_NAVIGATION'?: string;
     // (undocumented)
+    'SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT'?: string;
+    // (undocumented)
     'SI_CHANGE_PASSWORD.BACK'?: string;
     // (undocumented)
     'SI_CHANGE_PASSWORD.CHANGE'?: string;
@@ -426,6 +430,8 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL'?: string;
     // (undocumented)
+    'SI_USER_MESSAGE.SECONDARY_ACTIONS'?: string;
+    // (undocumented)
     'SI_WIZARD.BACK'?: string;
     // (undocumented)
     'SI_WIZARD.CANCEL'?: string;

docs/components/chat-messages/ai-message.md

@@ -49,4 +49,16 @@ For breakpoints sm (≥576px):
 
 ## Code ---
 
-Angular component is coming soon.
+<si-docs-component example="si-chat-messages/si-ai-message"></si-docs-component>
+
+<si-docs-api component="SiAiMessageComponent"></si-docs-api>
+
+### Base Markdown Component
+
+The **si-markdown-renderer** component is used to render markdown content within the AI message.
+
+<si-docs-component example="si-markdown-renderer/si-markdown-renderer"></si-docs-component>
+
+<si-docs-api component="SiMarkdownRendererComponent"></si-docs-api>
+
+<si-docs-types></si-docs-types>

docs/components/chat-messages/user-message.md

@@ -43,4 +43,35 @@ following the AI pattern guidelines.
 
 ## Code ---
 
-Angular component is coming soon.
+<si-docs-component example="si-chat-messages/si-user-message"></si-docs-component>
+
+<si-docs-api component="SiUserMessageComponent"></si-docs-api>
+
+### Base Chat Message
+
+Use these base components to build custom chat message interfaces.
+
+The **si-chat-message** component is a wrapper component, it has slots for different parts of a chat message.
+
+The slots are:
+- `si-attachment-list/si-badge` - For displaying attachments related to the message.
+- `si-avatar/si-icon/img` - For the avatar or icon representing the message sender.
+- `siChatMessageAction (helper directive)` - For actions related to the message.
+
+<si-docs-component example="si-chat-messages/si-chat-message"></si-docs-component>
+
+<si-docs-api component="SiChatMessageComponent"></si-docs-api>
+
+### Attachment List
+
+<si-docs-component example="si-chat-messages/si-attachment-list"></si-docs-component>
+
+<si-docs-api component="SiAttachmentListComponent"></si-docs-api>
+
+### Markdown Renderer
+
+<si-docs-component example="si-markdown-renderer/si-markdown-renderer"></si-docs-component>
+
+<si-docs-api component="SiMarkdownRendererComponent"></si-docs-api>
+
+<si-docs-types></si-docs-types>

playwright/e2e/element-examples/static.spec.ts

@@ -110,3 +110,7 @@ test('typography/display-styles', ({ si }) => si.static());
 test('typography/typography', ({ si }) => si.static());
 test('si-markdown-renderer/si-markdown-renderer', ({ si }) =>
   si.static({ disabledA11yRules: ['link-in-text-block'] }));
+test('si-chat-messages/si-ai-message', ({ si }) => si.static());
+test('si-chat-messages/si-user-message', ({ si }) => si.static());
+test('si-chat-messages/si-chat-message', ({ si }) => si.static());
+test('si-chat-messages/si-attachment-list', ({ si }) => si.static());

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message.yaml

@@ -0,0 +1,15 @@
+- paragraph:
+  - text: Here's a
+  - strong: simple response
+  - text: with basic formatting.
+- paragraph:
+  - text: You can use
+  - code: inline code
+  - text: "and create lists:"
+- list:
+  - listitem: First item
+  - listitem: Second item
+- button "Good response"
+- button "Copy response"
+- button "Retry response"
+- button "More actions"

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-attachment-list.yaml

@@ -0,0 +1,21 @@
+- group:
+  - button "quarterly-report.xlsx"
+  - button "Remove attachment quarterly-report.xlsx"
+- group:
+  - button "screenshot.png"
+  - button "Remove attachment screenshot.png"
+- group:
+  - button "very-long-filename-that-demonstrates-text-truncation-behavior.pdf"
+  - button "Remove attachment very-long-filename-that-demonstrates-text-truncation-behavior.pdf"
+- group:
+  - button "data.csv"
+  - button "Remove attachment data.csv"
+- group:
+  - button "audio.mp3"
+  - button "Remove attachment audio.mp3"
+- group:
+  - button "final-report.docx"
+- group:
+  - button "diagram.jpg"
+- group:
+  - button "config.json"

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-message.yaml

@@ -0,0 +1,14 @@
+- group: error-log.txt
+- group: screenshot.png
+- paragraph:
+  - text: Can you help me with this
+  - strong: code snippet
+  - text: "? I'm getting an error when I run it."
+- button "Copy"
+- button "Edit"
+- button "More actions"
+- text: JD Thanks for the help! That worked perfectly.
+- button "Copy"
+- button "Edit"
+- group: error-log.txt
+- group: screenshot.png

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message.yaml

@@ -0,0 +1,12 @@
+- group: error-log.txt
+- group: screenshot.png
+- paragraph:
+  - text: Can you help me with this
+  - strong: code snippet
+  - text: "?"
+- paragraph:
+  - code: console.log('Hello World')
+- paragraph: I'm getting an error when I run it.
+- button "Edit message"
+- button "Copy message"
+- button "Delete message"

projects/element-ng/chat-messages/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-ai-message.component';
+export * from './si-attachment-list.component';
+export * from './si-chat-message-action.directive';
+export * from './si-chat-message.component';
+export * from './si-user-message.component';
+export * from './message-action.model';

projects/element-ng/chat-messages/message-action.model.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import type { TranslatableString } from '@siemens/element-translate-ng/translate-types';
+
+/**
+ * Actions for messages representing an action with icon, label (for accessibility), and handler.
+ * Only the icon will be displayed.
+ * @experimental
+ */
+export interface MessageAction {
+  /** Label that is shown to the user. */
+  label: TranslatableString;
+  /**
+   * Icon used to represent the action
+   */
+  icon: string;
+  /**
+   * Action that is called when the item is triggered.
+   */
+  action: (actionParam: any, source: this) => void;
+  /** Whether the menu item is disabled. */
+  disabled?: boolean;
+}

projects/element-ng/chat-messages/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

projects/element-ng/chat-messages/si-ai-message.component.html

@@ -0,0 +1,42 @@
+<si-chat-message alignment="start" actionsPosition="bottom" [loading]="loading()">
+  @if (content()) {
+    @let content = textContent();
+    @if (content) {
+      <span class="text-pre-wrap">{{ content }}</span>
+    } @else {
+      <div #formattedContent> </div>
+    }
+  }
+
+  @if (actions().length > 0 || secondaryActions().length > 0) {
+    <div class="d-flex gap-4 ai-message-actions" siChatMessageAction>
+      @for (action of actions(); track $index) {
+        <button
+          type="button"
+          class="btn btn-ghost btn-circle btn-sm"
+          [disabled]="action.disabled"
+          [attr.aria-label]="action.label | translate"
+          (click)="action.action(actionParam(), action)"
+        >
+          <si-icon [icon]="action.icon" />
+        </button>
+      }
+
+      @if (secondaryActions().length > 0) {
+        <button
+          type="button"
+          class="btn btn-ghost btn-circle btn-sm"
+          [cdkMenuTriggerFor]="secondaryActionsMenu"
+          [attr.aria-label]="secondaryActionsLabel() | translate"
+          [attr.title]="secondaryActionsLabel() | translate"
+        >
+          <si-icon icon="element-optionsVertical" />
+        </button>
+
+        <ng-template #secondaryActionsMenu>
+          <si-menu-factory [items]="secondaryActions()" [actionParam]="actionParam()" />
+        </ng-template>
+      }
+    </div>
+  }
+</si-chat-message>