feat: add experimental tool message

angular.json

@@ -42,7 +42,7 @@
             "stylePreprocessorOptions": {
               "includePaths": ["node_modules/"]
             },
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.scss", "node_modules/katex/dist/katex.min.css"],
             "scripts": [],
             "allowedCommonJsDependencies": [
               "@babel/standalone",

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

@@ -7,31 +7,51 @@
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import * as _angular_core from '@angular/core';
+import { BackgroundColorVariant } from '@siemens/element-ng/common';
 import { ElementRef } from '@angular/core';
 import { FileUploadError } from '@siemens/element-ng/file-uploader';
 import * as i1 from '@siemens/element-ng/resize-observer';
+import { isSignal } from '@angular/core';
 import { MenuItem } from '@siemens/element-ng/menu';
 import { OnDestroy } from '@angular/core';
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
+import { Signal } from '@angular/core';
 import { SiModalService } from '@siemens/element-ng/modal';
 import { TemplateRef } from '@angular/core';
 import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
 import { TranslatableString as TranslatableString_2 } from '@siemens/element-translate-ng/translate';
 import { UploadFile } from '@siemens/element-ng/file-uploader';
 
+// @public
+export interface AiChatMessage extends BaseChatMessage {
+    actions?: MessageAction[];
+    content: string | Signal<string>;
+    type: 'ai';
+}
+
 // @public
 export interface Attachment {
     name: string;
     previewTemplate?: TemplateRef<any> | (() => TemplateRef<any>);
 }
 
+// @public
+export interface BaseChatMessage {
+    content?: string | Signal<string>;
+    loading?: boolean | Signal<boolean>;
+    type: 'user' | 'ai' | 'tool';
+}
+
 // @public
 export interface ChatInputAttachment extends Attachment {
     file: File;
     size: number;
     type: string;
 }
 
+// @public
+export type ChatMessage = UserChatMessage | AiChatMessage | ToolChatMessage | TemplateChatMessage;
+
 // @public
 export interface MessageAction {
     action: (actionParam: any, source: this) => void;
@@ -40,6 +60,57 @@ export interface MessageAction {
     label: TranslatableString;
 }
 
+// @public (undocumented)
+export interface PromptCategory {
+    // (undocumented)
+    label: string;
+}
+
+// @public (undocumented)
+export interface PromptSuggestion {
+    // (undocumented)
+    text: string;
+}
+
+// @public
+export class SiAiChatContainerComponent {
+    constructor();
+    readonly aiIcon: _angular_core.InputSignal<string>;
+    readonly colorVariant: _angular_core.InputSignal<BackgroundColorVariant>;
+    readonly copyCodeButtonLabel: _angular_core.InputSignal<TranslatableString_2>;
+    readonly disableCopyCodeButton: _angular_core.InputSignal<boolean>;
+    readonly disableDownloadTableButton: _angular_core.InputSignal<boolean>;
+    readonly disableInterrupt: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly downloadTableButtonLabel: _angular_core.InputSignal<TranslatableString_2>;
+    focus(): void;
+    readonly greeting: _angular_core.InputSignal<TranslatableString_2>;
+    readonly interrupting: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly latexRenderer: _angular_core.InputSignal<((latex: string, displayMode: boolean) => string | undefined) | undefined>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly messages: _angular_core.InputSignal<ChatMessage[] | undefined>;
+    readonly messageSent: _angular_core.OutputEmitterRef<{
+        content: string;
+        attachments: ChatInputAttachment[];
+    }>;
+    readonly noAutoScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly promptSuggestions: _angular_core.InputSignal<PromptSuggestion[] | Record<string, PromptSuggestion[]>>;
+    scrollToBottom(): void;
+    readonly secondaryActionsLabel: _angular_core.InputSignal<TranslatableString_2>;
+    readonly sending: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly statusAction: _angular_core.InputSignal<{
+        title: string;
+        href: string;
+        target?: string;
+    } | undefined>;
+    readonly statusHeading: _angular_core.InputSignal<string | undefined>;
+    readonly statusMessage: _angular_core.InputSignal<string | undefined>;
+    readonly statusSeverity: _angular_core.InputSignal<"info" | "success" | "warning" | "danger" | "caution" | "critical" | undefined>;
+    readonly syntaxHighlighter: _angular_core.InputSignal<((code: string, language?: string) => string | undefined) | undefined>;
+    readonly toolInputArgumentsLabel: _angular_core.InputSignal<TranslatableString_2>;
+    readonly toolOutputLabel: _angular_core.InputSignal<TranslatableString_2>;
+    readonly welcomeMessage: _angular_core.InputSignal<TranslatableString_2>;
+}
+
 // @public
 export class SiAiMessageComponent {
     constructor();
@@ -52,6 +123,14 @@ export class SiAiMessageComponent {
     readonly secondaryActionsLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
 }
 
+// @public
+export class SiAiWelcomeScreenComponent {
+    readonly categories: _angular_core.InputSignal<PromptCategory[]>;
+    readonly promptSelected: _angular_core.OutputEmitterRef<PromptSuggestion>;
+    readonly promptSuggestions: _angular_core.InputSignal<PromptSuggestion[] | Record<string, PromptSuggestion[]>>;
+    readonly selectedCategory: _angular_core.ModelSignal<string | undefined>;
+}
+
 // @public
 export class SiAttachmentListComponent {
     readonly alignment: _angular_core.InputSignal<"start" | "end">;
@@ -67,14 +146,17 @@ export class SiChatContainerComponent implements AfterContentInit, OnDestroy {
     readonly colorVariant: _angular_core.InputSignal<string>;
     focus(): void;
     readonly noAutoScroll: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    scrollToBottom(): void;
+    scrollToTop(): void;
 }
 
 // @public
 export class SiChatContainerInputDirective {
 }
 
 // @public
-export class SiChatInputComponent implements AfterViewInit {
+export class SiChatInputComponent implements AfterViewInit, OnDestroy {
+    constructor();
     readonly accept: _angular_core.InputSignal<string | undefined>;
     readonly actionParam: _angular_core.InputSignal<any>;
     readonly actions: _angular_core.InputSignal<MessageAction[]>;
@@ -88,11 +170,13 @@ export class SiChatInputComponent implements AfterViewInit {
     focus(): void;
     readonly interrupt: _angular_core.OutputEmitterRef<void>;
     readonly interruptButtonLabel: _angular_core.InputSignal<TranslatableString_2>;
-    readonly interruptible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly interruptible: _angular_core.ModelSignal<boolean>;
     readonly label: _angular_core.InputSignal<string>;
     readonly maxFileSize: _angular_core.InputSignal<number>;
     readonly maxLength: _angular_core.InputSignal<number | undefined>;
     readonly placeholder: _angular_core.InputSignal<TranslatableString_2>;
+    // (undocumented)
+    registerParent(sending: Signal<boolean>, interruptible: Signal<boolean>, sendListener?: () => void): void;
     readonly removeAttachmentLabel: _angular_core.InputSignal<TranslatableString_2>;
     readonly secondaryActions: _angular_core.InputSignal<MenuItem[]>;
     readonly secondaryActionsLabel: _angular_core.InputSignal<TranslatableString_2>;
@@ -102,7 +186,7 @@ export class SiChatInputComponent implements AfterViewInit {
     }>;
     readonly sendButtonIcon: _angular_core.InputSignal<string>;
     readonly sendButtonLabel: _angular_core.InputSignal<TranslatableString_2>;
-    readonly sending: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly sending: _angular_core.ModelSignal<boolean>;
     readonly value: _angular_core.ModelSignal<string>;
 }
 
@@ -121,6 +205,19 @@ export class SiChatMessageComponent {
     readonly loading: _angular_core.InputSignal<boolean>;
 }
 
+// @public
+export class SiToolMessageComponent {
+    readonly expandInputArguments: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly expandOutput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly inputArguments: _angular_core.InputSignal<string | object | undefined>;
+    readonly inputArgumentsLabel: _angular_core.InputSignal<TranslatableString_2>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly output: _angular_core.InputSignal<string | object | undefined>;
+    readonly outputLabel: _angular_core.InputSignal<TranslatableString_2>;
+    readonly toolIcon: _angular_core.InputSignal<string>;
+}
+
 // @public
 export class SiUserMessageComponent {
     constructor();
@@ -133,6 +230,31 @@ export class SiUserMessageComponent {
     readonly secondaryActionsLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
 }
 
+// @public
+export interface TemplateChatMessage {
+    template: TemplateRef<any>;
+    templateContext?: any;
+}
+
+// @public
+export interface ToolChatMessage extends BaseChatMessage {
+    autoExpandInputArguments?: boolean;
+    autoExpandOutput?: boolean;
+    icon?: string;
+    inputArguments?: string | object;
+    name: string;
+    output?: string | object | Signal<string | object>;
+    type: 'tool';
+}
+
+// @public
+export interface UserChatMessage extends BaseChatMessage {
+    actions?: MessageAction[];
+    attachments?: Attachment[];
+    content: string;
+    type: 'user';
+}
+
 // (No @packageDocumentation comment for this package)
 
 ```

api-goldens/element-ng/markdown-renderer/index.api.md

@@ -4,16 +4,34 @@
 
 ```ts
 
+import * as _angular_core from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i0 from '@angular/core';
+import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
+import { SiTranslateService } from '@siemens/element-translate-ng/translate';
+import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
 
 // @public
-export const getMarkdownRenderer: (sanitizer: DomSanitizer) => ((text: string) => Node);
+export const getMarkdownRenderer: (sanitizer: DomSanitizer, options?: MarkdownRendererOptions, doc?: Document, isBrowser?: boolean) => ((text: string) => Node);
+
+// @public (undocumented)
+export interface MarkdownRendererOptions {
+    copyCodeButton?: TranslatableString;
+    downloadTableButton?: TranslatableString;
+    latexRenderer?: (latex: string, displayMode: boolean) => string | undefined;
+    syntaxHighlighter?: (code: string, language?: string) => string | undefined;
+    translateSync?: SiTranslateService['translateSync'];
+}
 
 // @public
 export class SiMarkdownRendererComponent {
     constructor();
-    readonly text: i0.InputSignal<string>;
+    readonly copyButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    readonly disableCopyButton: _angular_core.InputSignal<boolean>;
+    readonly disableDownloadButton: _angular_core.InputSignal<boolean>;
+    readonly downloadButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    readonly latexRenderer: _angular_core.InputSignal<((latex: string, displayMode: boolean) => string | undefined) | undefined>;
+    readonly syntaxHighlighter: _angular_core.InputSignal<((code: string, language?: string) => string | undefined) | undefined>;
+    readonly text: _angular_core.InputSignal<string>;
 }
 
 // (No @packageDocumentation comment for this package)

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

@@ -11,6 +11,12 @@ export const provideSiTranslatableOverrides: (values: SiTranslatableKeys) => Pro
 
 // @public (undocumented)
 export interface SiTranslatableKeys {
+    // (undocumented)
+    'SI_AI_CHAT_CONTAINER.SECONDARY_ACTIONS'?: string;
+    // (undocumented)
+    'SI_AI_CHAT_CONTAINER.WELCOME_GREETING'?: string;
+    // (undocumented)
+    'SI_AI_CHAT_CONTAINER.WELCOME_MESSAGE'?: string;
     // (undocumented)
     'SI_AI_MESSAGE.SECONDARY_ACTIONS'?: string;
     // (undocumented)
@@ -334,6 +340,10 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;
     // (undocumented)
+    'SI_MARKDOWN_RENDERER.COPY_CODE'?: string;
+    // (undocumented)
+    'SI_MARKDOWN_RENDERER.DOWNLOAD'?: string;
+    // (undocumented)
     'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;
     // (undocumented)
     'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;
@@ -432,6 +442,10 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_TOAST.CLOSE'?: string;
     // (undocumented)
+    'SI_TOOL_MESSAGE.INPUT_ARGUMENTS'?: string;
+    // (undocumented)
+    'SI_TOOL_MESSAGE.OUTPUT'?: string;
+    // (undocumented)
     'SI_TOUR.BACK'?: string;
     // (undocumented)
     'SI_TOUR.CLOSE'?: string;

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

@@ -116,4 +116,14 @@ The slots are:
 
 <si-docs-api component="SiMarkdownRendererComponent"></si-docs-api>
 
+## Tool Message Component
+
+> **Note:** The tool message is currently experimental and may undergo changes in future releases.
+
+The **si-tool-message** component is similar to the AI message component, but it includes a tool icon instead of an AI icon and is used to display tool calls and their results.
+
+<si-docs-component example="si-chat-messages/si-tool-message"></si-docs-component>
+
+<si-docs-api component="SiToolMessageComponent"></si-docs-api>
+
 <si-docs-types></si-docs-types>

docs/patterns/ai/ai-chat.md

@@ -86,20 +86,67 @@ These are not treated as errors and do not require a separate notification.
 
 ## Code ---
 
-Use the chat container with the chat messages to build chat message interfaces.
+The **si-ai-chat-container** component provides a complete AI chat interface, it should be inserted into a layout with fixed height, if no fixed height is provided, please set a height in pixels.
+
+<si-docs-component example="si-chat-messages/si-ai-chat-container" height="750"></si-docs-component>
+
+<si-docs-api component="SiAiChatContainerComponent"></si-docs-api>
+
+### Initial Screen
+
+The AI chat container includes a built-in initial welcome screen component that displays when there are no messages. It can be slotted into the **si-chat-container** component. It accepts prompt suggestions as an input.
+
+<si-docs-component example="si-chat-messages/si-ai-welcome-screen" height="600"></si-docs-component>
+
+<si-docs-api component="SiAiWelcomeScreenComponent"></si-docs-api>
+
+#### Prompt Suggestions
+
+Prompt suggestions can be provided as either:
+
+- A simple array of suggestions (no categories)
+- A record mapping category labels to arrays of suggestions
+
+When using a record, categories are automatically displayed as filter pills.
+
+```typescript
+// Simple array (no categories)
+promptSuggestions = [
+  { text: 'How do I optimize performance?' },
+  { text: 'What are best practices?' }
+];
+
+// Record with categories
+promptSuggestions = {
+  'All prompts': [{ text: 'How do I optimize performance?' }, { text: 'What are best practices?' }],
+  'Maintenance': [{ text: 'Schedule preventive maintenance' }, { text: 'Track equipment downtime' }]
+};
+```
+
+### Base Chat Container
+
+Use this base container with the chat messages to build custom chat message interfaces.
 
 The **si-chat-container** component is a wrapper component, it has slots for
 [chat messages](../../components/chat-messages/chat-message.md) and a
 [chat input](../../components/chat-messages/chat-input.md).
 
 The slots are:
 
-- default -> chat messages or empty state
+- default -> chat messages or initial screen (`si-welcome-screen`)
 - `si-chat-input/siChatContainerInput (helper directive)` -> For the input (whether default or custom).
 - `si-inline-notification` -> Slotted above the input for displaying the status.
 
 <si-docs-component example="si-chat-messages/si-chat-container" height="600"></si-docs-component>
 
 <si-docs-api component="SiChatContainerComponent"></si-docs-api>
 
+### Initial Screen
+
+When initially displaying a chat interface use the initial **si-welcome-screen** component that displays when there are no messages. It can be slotted into the **si-chat-container** component. It accepts prompt suggestions as an input.
+
+<si-docs-component example="si-chat-messages/si-ai-welcome-screen" height="600"></si-docs-component>
+
+<si-docs-api component="SiAiWelcomeScreenComponent"></si-docs-api>
+
 <si-docs-types></si-docs-types>