@c8y/ngx-components 1023.68.6 → 1023.70.0

package/fesm2022/c8y-ngx-components-ai-ai-chat.mjs

@@ -1,20 +1,282 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, input, inject, computed, ContentChildren } from '@angular/core';
-import { IconDirective, C8yTranslatePipe, MarkdownToHtmlPipe, DatePipe, TextareaAutoresizeDirective } from '@c8y/ngx-components';
-import * as i1 from 'ngx-bootstrap/tooltip';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { input, signal, inject, ChangeDetectionStrategy, Component, effect, EventEmitter, Output, Input, computed, output, contentChildren, viewChild } from '@angular/core';
+import { IconDirective, C8yTranslateModule, C8yTranslatePipe, MarkdownToHtmlPipe, DatePipe, TextareaAutoresizeDirective } from '@c8y/ngx-components';
 import { gettext } from '@c8y/ngx-components/gettext';
-import { NgClass, AsyncPipe } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
-import * as i1$1 from '@angular/forms';
+import * as i1 from 'ngx-bootstrap/collapse';
+import { CollapseModule } from 'ngx-bootstrap/collapse';
+import { NgComponentOutlet, JsonPipe, AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
+import * as i1$1 from 'ngx-bootstrap/tooltip';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import * as i1$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
+class AiChatToolCallComponent {
+    constructor() {
+        /**
+         * The tool call part to render. This includes all information about the tool call, including the name of the tool,
+         * the input provided and (once available) the output from the tool.
+         */
+        this.tool = input.required(...(ngDevMode ? [{ debugName: "tool" }] : []));
+        /**
+         * Whether the tool call is still in progress.
+         */
+        this.isExecuting = input.required(...(ngDevMode ? [{ debugName: "isExecuting" }] : []));
+        /**
+         * A custom component to render the details of the tool call. If not provided, the default details section will be shown.
+         */
+        this.toolDetailsComponent = input(undefined, ...(ngDevMode ? [{ debugName: "toolDetailsComponent" }] : []));
+        /**
+         * Shows the default details section for a tool call.
+         */
+        this.showDefaultToolDetails = input(false, ...(ngDevMode ? [{ debugName: "showDefaultToolDetails" }] : []));
+        /**
+         * The label to show while the tool is executing. If not provided, a default label will be generated based on the tool name.
+         */
+        this.executingLabel = input(undefined, ...(ngDevMode ? [{ debugName: "executingLabel" }] : []));
+        /**
+         * The label to show once the tool has completed. If not provided, a default label will be generated based on the tool name and whether the tool call was successful or resulted in an error.
+         */
+        this.completedLabel = input(undefined, ...(ngDevMode ? [{ debugName: "completedLabel" }] : []));
+        /**
+         * A function that can generate a label for this tool call based on the tool call data.
+         */
+        this.labelProvider = input(...(ngDevMode ? [undefined, { debugName: "labelProvider" }] : []));
+        this.expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+        this.everExpanded = signal(false, ...(ngDevMode ? [{ debugName: "everExpanded" }] : []));
+        this.translateService = inject(TranslateService);
+    }
+    getToolLabel(tool) {
+        const isExecuting = tool.type !== 'tool-result';
+        if (this.labelProvider()) {
+            try {
+                const dynamicLabel = this.labelProvider()(tool, this.translateService);
+                if (dynamicLabel)
+                    return dynamicLabel;
+            }
+            catch (err) {
+                // Should never happen, report it then fall back to default logic
+                console.error(`Error in labelProvider for tool ${tool.toolName}:`, err);
+            }
+        }
+        if (isExecuting && this.executingLabel()) {
+            return this.executingLabel();
+        }
+        if (!isExecuting && this.completedLabel()) {
+            return this.completedLabel();
+        }
+        return this.translateService.instant(isExecuting ? gettext('Calling tool {{toolName}}') : gettext('Used tool {{toolName}}'), { toolName: tool.toolName });
+    }
+    toggleExpanded() {
+        const willExpand = !this.expanded();
+        this.expanded.set(willExpand);
+        if (willExpand) {
+            this.everExpanded.set(true);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatToolCallComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AiChatToolCallComponent, isStandalone: true, selector: "c8y-ai-chat-tool-call", inputs: { tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: true, transformFunction: null }, isExecuting: { classPropertyName: "isExecuting", publicName: "isExecuting", isSignal: true, isRequired: true, transformFunction: null }, toolDetailsComponent: { classPropertyName: "toolDetailsComponent", publicName: "toolDetailsComponent", isSignal: true, isRequired: false, transformFunction: null }, showDefaultToolDetails: { classPropertyName: "showDefaultToolDetails", publicName: "showDefaultToolDetails", isSignal: true, isRequired: false, transformFunction: null }, executingLabel: { classPropertyName: "executingLabel", publicName: "executingLabel", isSignal: true, isRequired: false, transformFunction: null }, completedLabel: { classPropertyName: "completedLabel", publicName: "completedLabel", isSignal: true, isRequired: false, transformFunction: null }, labelProvider: { classPropertyName: "labelProvider", publicName: "labelProvider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let _tool = tool();\n@let showDetails = showDefaultToolDetails();\n@let isToolExpanded = expanded();\n\n<fieldset\n  class=\"c8y-fieldset p-b-4 ai-tool-call__fieldset\"\n  [attr.aria-label]=\"'Tool call: ' + _tool.toolName\"\n>\n  <button\n    class=\"btn-clean ai-tool-call__btn\"\n    [attr.aria-expanded]=\"showDetails ? isToolExpanded : null\"\n    [attr.aria-controls]=\"showDetails ? 'tool-call-' + _tool.toolCallId : null\"\n    type=\"button\"\n    [attr.data-cy]=\"'tool-call-' + _tool.toolName\"\n    [disabled]=\"!showDetails || null\"\n    (click)=\"toggleExpanded()\"\n  >\n    @if (isExecuting()) {\n      <i\n        class=\"icon-spin icon-14 text-primary m-r-4\"\n        c8yIcon=\"spinner\"\n        aria-hidden=\"true\"\n      ></i>\n    } @else {\n      <!-- Treat it as an error if a tool still thinks its executing when the message containing it is not -->\n      @if (_tool.error || isExecuting()) {\n        <i\n          class=\"icon-14 text-danger m-r-4\"\n          [c8yIcon]=\"'exclamation-circle'\"\n          aria-hidden=\"true\"\n        ></i>\n      } @else {\n        <i\n          class=\"icon-14 text-success m-r-4\"\n          [c8yIcon]=\"'check'\"\n          aria-hidden=\"true\"\n        ></i>\n      }\n    }\n    <span class=\"small\">{{ getToolLabel(_tool) | translate }}</span>\n\n    @if (showDetails) {\n      <i\n        class=\"m-l-4 icon-12\"\n        [c8yIcon]=\"isToolExpanded ? 'collapse-arrow' : 'expand-arrow'\"\n        aria-hidden=\"true\"\n      ></i>\n    }\n  </button>\n\n  <!-- If this is an artifact tool, render it - but do so lazily only on first open,\n        since these components could be heavyweight (e.g. Monaco)\n      -->\n  @if (showDetails && (isToolExpanded || everExpanded())) {\n    <div\n      class=\"collapse tool-details m-t-8 p-8 b-r-4\"\n      [attr.aria-label]=\"'Tool details for message latest tool: ' + _tool.toolName\"\n      role=\"region\"\n      [collapse]=\"!isToolExpanded\"\n      [id]=\"'tool-call-' + _tool.toolCallId\"\n      [isAnimated]=\"true\"\n      data-cy=\"ai-tool-component\"\n    >\n      @if (toolDetailsComponent()) {\n        <ng-container\n          [ngComponentOutlet]=\"toolDetailsComponent()\"\n          [ngComponentOutletInputs]=\"{ tool: _tool }\"\n        ></ng-container>\n      } @else {\n        @let noneLabel = '(no data)' | translate;\n\n        <p class=\"text-label-small\">{{ 'Tool input' | translate }}</p>\n        <pre class=\"fit-w small\">{{ _tool.input || noneLabel | json }}</pre>\n\n        @if (_tool.type === 'tool-result') {\n          <p class=\"text-label-small\">{{ 'Tool output' | translate }}</p>\n          @if (\n            typeof _tool.output === 'string' || _tool.output === undefined || _tool.output === null\n          ) {\n            <pre class=\"fit-w small\">{{ _tool.output || noneLabel }}</pre>\n          } @else {\n            <pre class=\"fit-w small\">{{ _tool.output | json }}</pre>\n          }\n        }\n      }\n    </div>\n  }\n</fieldset>\n", dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatToolCallComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-ai-chat-tool-call', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgComponentOutlet,
+                        JsonPipe,
+                        C8yTranslatePipe,
+                        IconDirective,
+                        CollapseModule,
+                        C8yTranslateModule
+                    ], template: "@let _tool = tool();\n@let showDetails = showDefaultToolDetails();\n@let isToolExpanded = expanded();\n\n<fieldset\n  class=\"c8y-fieldset p-b-4 ai-tool-call__fieldset\"\n  [attr.aria-label]=\"'Tool call: ' + _tool.toolName\"\n>\n  <button\n    class=\"btn-clean ai-tool-call__btn\"\n    [attr.aria-expanded]=\"showDetails ? isToolExpanded : null\"\n    [attr.aria-controls]=\"showDetails ? 'tool-call-' + _tool.toolCallId : null\"\n    type=\"button\"\n    [attr.data-cy]=\"'tool-call-' + _tool.toolName\"\n    [disabled]=\"!showDetails || null\"\n    (click)=\"toggleExpanded()\"\n  >\n    @if (isExecuting()) {\n      <i\n        class=\"icon-spin icon-14 text-primary m-r-4\"\n        c8yIcon=\"spinner\"\n        aria-hidden=\"true\"\n      ></i>\n    } @else {\n      <!-- Treat it as an error if a tool still thinks its executing when the message containing it is not -->\n      @if (_tool.error || isExecuting()) {\n        <i\n          class=\"icon-14 text-danger m-r-4\"\n          [c8yIcon]=\"'exclamation-circle'\"\n          aria-hidden=\"true\"\n        ></i>\n      } @else {\n        <i\n          class=\"icon-14 text-success m-r-4\"\n          [c8yIcon]=\"'check'\"\n          aria-hidden=\"true\"\n        ></i>\n      }\n    }\n    <span class=\"small\">{{ getToolLabel(_tool) | translate }}</span>\n\n    @if (showDetails) {\n      <i\n        class=\"m-l-4 icon-12\"\n        [c8yIcon]=\"isToolExpanded ? 'collapse-arrow' : 'expand-arrow'\"\n        aria-hidden=\"true\"\n      ></i>\n    }\n  </button>\n\n  <!-- If this is an artifact tool, render it - but do so lazily only on first open,\n        since these components could be heavyweight (e.g. Monaco)\n      -->\n  @if (showDetails && (isToolExpanded || everExpanded())) {\n    <div\n      class=\"collapse tool-details m-t-8 p-8 b-r-4\"\n      [attr.aria-label]=\"'Tool details for message latest tool: ' + _tool.toolName\"\n      role=\"region\"\n      [collapse]=\"!isToolExpanded\"\n      [id]=\"'tool-call-' + _tool.toolCallId\"\n      [isAnimated]=\"true\"\n      data-cy=\"ai-tool-component\"\n    >\n      @if (toolDetailsComponent()) {\n        <ng-container\n          [ngComponentOutlet]=\"toolDetailsComponent()\"\n          [ngComponentOutletInputs]=\"{ tool: _tool }\"\n        ></ng-container>\n      } @else {\n        @let noneLabel = '(no data)' | translate;\n\n        <p class=\"text-label-small\">{{ 'Tool input' | translate }}</p>\n        <pre class=\"fit-w small\">{{ _tool.input || noneLabel | json }}</pre>\n\n        @if (_tool.type === 'tool-result') {\n          <p class=\"text-label-small\">{{ 'Tool output' | translate }}</p>\n          @if (\n            typeof _tool.output === 'string' || _tool.output === undefined || _tool.output === null\n          ) {\n            <pre class=\"fit-w small\">{{ _tool.output || noneLabel }}</pre>\n          } @else {\n            <pre class=\"fit-w small\">{{ _tool.output | json }}</pre>\n          }\n        }\n      }\n    </div>\n  }\n</fieldset>\n" }]
+        }], propDecorators: { tool: [{ type: i0.Input, args: [{ isSignal: true, alias: "tool", required: true }] }], isExecuting: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExecuting", required: true }] }], toolDetailsComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolDetailsComponent", required: false }] }], showDefaultToolDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefaultToolDetails", required: false }] }], executingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "executingLabel", required: false }] }], completedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "completedLabel", required: false }] }], labelProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelProvider", required: false }] }] } });
+
+/** This renders a part of an assistant message. Currently only ToolCallPart is supported, but later we can expand this to deal with all part types. */
+class AiChatAssistantPartComponent {
+    constructor() {
+        this.part = input.required(...(ngDevMode ? [{ debugName: "part" }] : []));
+        /** Whether this part is rendered as part of the main answer, or is an intermediate step with more muted rendering. */
+        this.displayAsPartOfMainAnswer = input(true, ...(ngDevMode ? [{ debugName: "displayAsPartOfMainAnswer" }] : []));
+        /**
+         * The context needed to render a message.
+         * This is a single input so we can extend in future without breaking people who have a custom rendering implementation.
+         */
+        this.assistantMessageContext = input.required(...(ngDevMode ? [{ debugName: "assistantMessageContext" }] : []));
+        /** Tracks whether this is currently expanded (used for reasoning section). */
+        this.expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    }
+    toggleExpanded() {
+        this.expanded.update(v => !v);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatAssistantPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AiChatAssistantPartComponent, isStandalone: true, selector: "c8y-ai-chat-assistant-part", inputs: { part: { classPropertyName: "part", publicName: "part", isSignal: true, isRequired: true, transformFunction: null }, displayAsPartOfMainAnswer: { classPropertyName: "displayAsPartOfMainAnswer", publicName: "displayAsPartOfMainAnswer", isSignal: true, isRequired: false, transformFunction: null }, assistantMessageContext: { classPropertyName: "assistantMessageContext", publicName: "assistantMessageContext", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let ctx = assistantMessageContext();\n@let _config = ctx.config;\n@let toolCallConfig = _config.toolCallConfig || {};\n@let _part = part();\n\n@if (_part.type === 'text') {\n  <p\n    [class.text-muted]=\"!displayAsPartOfMainAnswer()\"\n    [innerHTML]=\"_part.text | markdownToHtml | async\"\n  ></p>\n} @else if (_part.type === 'reasoning') {\n  @let reasoningExpanded = expanded();\n\n  <fieldset\n    class=\"c8y-fieldset p-b-4 ai-tool-call__fieldset\"\n    data-cy=\"ai-reasoning\"\n  >\n    <button\n      class=\"btn-clean ai-tool-call__btn\"\n      aria-label=\"Toggle display of the reasoning section\"\n      [attr.aria-expanded]=\"reasoningExpanded\"\n      [attr.aria-controls]=\"'reasoning-content-message' + ctx.messageDisplayIndex\"\n      type=\"button\"\n      (click)=\"toggleExpanded()\"\n    >\n      <i\n        class=\"m-r-4\"\n        [c8yIcon]=\"'ai-sparkles'\"\n      ></i>\n      @let hideReasoning = 'Hide reasoning' | translate;\n      @let showReasoning = 'Show reasoning' | translate;\n      <span class=\"small\">{{ reasoningExpanded ? hideReasoning : showReasoning }}</span>\n      <i\n        class=\"m-l-4 icon-12 text-muted\"\n        [c8yIcon]=\"reasoningExpanded ? 'collapse-arrow' : 'expand-arrow'\"\n      ></i>\n    </button>\n\n    <div\n      class=\"collapse reasoning-content\"\n      [attr.aria-label]=\"'Reasoning for message latest' + ctx.messageDisplayIndex\"\n      role=\"region\"\n      [collapse]=\"!reasoningExpanded\"\n      [id]=\"'reasoning-content-message' + ctx.messageDisplayIndex\"\n      [isAnimated]=\"true\"\n      data-cy=\"ai-reasoning-content\"\n    >\n      <div\n        class=\"m-t-8 p-b-4 text-muted\"\n        [innerHTML]=\"_part.text | markdownToHtml | async\"\n      ></div>\n    </div>\n  </fieldset>\n} @else if (_part.type === 'step-start') {\n  <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues -->\n  <span\n    class=\"ai-step-start hidden-copy-label\"\n    aria-hidden=\"true\"\n    data-cy=\"ai-step-start-separator\"\n    >--- (step separator) ---</span\n  >\n} @else if (_part.type.startsWith('tool')) {\n  @let tool = $any(_part);\n  @let toolDisplay = toolCallConfig[tool.toolName];\n\n  <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues -->\n  <span\n    class=\"hidden-copy-label\"\n    aria-hidden=\"true\"\n    >--- Tool call: {{ tool.toolName }} ---</span\n  >\n\n  @if (toolDisplay?.component) {\n    <div data-cy=\"ai-tool-with-custom-component\">\n      <ng-container\n        [ngComponentOutlet]=\"toolDisplay.component\"\n        [ngComponentOutletInputs]=\"{\n          tool: tool,\n          ctx: ctx\n        }\"\n      ></ng-container>\n    </div>\n  } @else if (!toolDisplay?.isHidden) {\n    <!-- Don't allow expanding while tool call is in progress - it's unlikely to have anything worth rendering,\n          and complicates implementation for the client to have to check for the isExecuting case.\n        -->\n    <c8y-ai-chat-tool-call\n      [tool]=\"tool\"\n      [isExecuting]=\"tool.type !== 'tool-result' && ctx.isMessageLoading\"\n      [toolDetailsComponent]=\"_config.toolDetailsComponent?.(tool)\"\n      [showDefaultToolDetails]=\"_config.showDefaultToolDetails === 'all'\"\n      [executingLabel]=\"toolDisplay?.executingLabel\"\n      [completedLabel]=\"toolDisplay?.completedLabel\"\n      [labelProvider]=\"toolDisplay?.labelProvider\"\n    ></c8y-ai-chat-tool-call>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: AiChatToolCallComponent, selector: "c8y-ai-chat-tool-call", inputs: ["tool", "isExecuting", "toolDetailsComponent", "showDefaultToolDetails", "executingLabel", "completedLabel", "labelProvider"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatAssistantPartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-ai-chat-assistant-part', standalone: true, imports: [
+                        NgComponentOutlet,
+                        C8yTranslatePipe,
+                        IconDirective,
+                        CollapseModule,
+                        MarkdownToHtmlPipe,
+                        AsyncPipe,
+                        AiChatToolCallComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let ctx = assistantMessageContext();\n@let _config = ctx.config;\n@let toolCallConfig = _config.toolCallConfig || {};\n@let _part = part();\n\n@if (_part.type === 'text') {\n  <p\n    [class.text-muted]=\"!displayAsPartOfMainAnswer()\"\n    [innerHTML]=\"_part.text | markdownToHtml | async\"\n  ></p>\n} @else if (_part.type === 'reasoning') {\n  @let reasoningExpanded = expanded();\n\n  <fieldset\n    class=\"c8y-fieldset p-b-4 ai-tool-call__fieldset\"\n    data-cy=\"ai-reasoning\"\n  >\n    <button\n      class=\"btn-clean ai-tool-call__btn\"\n      aria-label=\"Toggle display of the reasoning section\"\n      [attr.aria-expanded]=\"reasoningExpanded\"\n      [attr.aria-controls]=\"'reasoning-content-message' + ctx.messageDisplayIndex\"\n      type=\"button\"\n      (click)=\"toggleExpanded()\"\n    >\n      <i\n        class=\"m-r-4\"\n        [c8yIcon]=\"'ai-sparkles'\"\n      ></i>\n      @let hideReasoning = 'Hide reasoning' | translate;\n      @let showReasoning = 'Show reasoning' | translate;\n      <span class=\"small\">{{ reasoningExpanded ? hideReasoning : showReasoning }}</span>\n      <i\n        class=\"m-l-4 icon-12 text-muted\"\n        [c8yIcon]=\"reasoningExpanded ? 'collapse-arrow' : 'expand-arrow'\"\n      ></i>\n    </button>\n\n    <div\n      class=\"collapse reasoning-content\"\n      [attr.aria-label]=\"'Reasoning for message latest' + ctx.messageDisplayIndex\"\n      role=\"region\"\n      [collapse]=\"!reasoningExpanded\"\n      [id]=\"'reasoning-content-message' + ctx.messageDisplayIndex\"\n      [isAnimated]=\"true\"\n      data-cy=\"ai-reasoning-content\"\n    >\n      <div\n        class=\"m-t-8 p-b-4 text-muted\"\n        [innerHTML]=\"_part.text | markdownToHtml | async\"\n      ></div>\n    </div>\n  </fieldset>\n} @else if (_part.type === 'step-start') {\n  <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues -->\n  <span\n    class=\"ai-step-start hidden-copy-label\"\n    aria-hidden=\"true\"\n    data-cy=\"ai-step-start-separator\"\n    >--- (step separator) ---</span\n  >\n} @else if (_part.type.startsWith('tool')) {\n  @let tool = $any(_part);\n  @let toolDisplay = toolCallConfig[tool.toolName];\n\n  <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues -->\n  <span\n    class=\"hidden-copy-label\"\n    aria-hidden=\"true\"\n    >--- Tool call: {{ tool.toolName }} ---</span\n  >\n\n  @if (toolDisplay?.component) {\n    <div data-cy=\"ai-tool-with-custom-component\">\n      <ng-container\n        [ngComponentOutlet]=\"toolDisplay.component\"\n        [ngComponentOutletInputs]=\"{\n          tool: tool,\n          ctx: ctx\n        }\"\n      ></ng-container>\n    </div>\n  } @else if (!toolDisplay?.isHidden) {\n    <!-- Don't allow expanding while tool call is in progress - it's unlikely to have anything worth rendering,\n          and complicates implementation for the client to have to check for the isExecuting case.\n        -->\n    <c8y-ai-chat-tool-call\n      [tool]=\"tool\"\n      [isExecuting]=\"tool.type !== 'tool-result' && ctx.isMessageLoading\"\n      [toolDetailsComponent]=\"_config.toolDetailsComponent?.(tool)\"\n      [showDefaultToolDetails]=\"_config.showDefaultToolDetails === 'all'\"\n      [executingLabel]=\"toolDisplay?.executingLabel\"\n      [completedLabel]=\"toolDisplay?.completedLabel\"\n      [labelProvider]=\"toolDisplay?.labelProvider\"\n    ></c8y-ai-chat-tool-call>\n  }\n}\n" }]
+        }], propDecorators: { part: [{ type: i0.Input, args: [{ isSignal: true, alias: "part", required: true }] }], displayAsPartOfMainAnswer: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayAsPartOfMainAnswer", required: false }] }], assistantMessageContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantMessageContext", required: true }] }] } });
+
+/**
+ * This is the default component used to render the contents of a message from the AI assistant, including
+ * the main answer text, text from earlier steps, reasoning text and tool calls.
+ */
+class AiChatAssistantMessageComponent {
+    constructor() {
+        /**
+         * The context needed to render a message.
+         * This is a single input so we can extend in future without breaking people who have a custom rendering implementation.
+         */
+        this.assistantMessageContext = input.required(...(ngDevMode ? [{ debugName: "assistantMessageContext" }] : []));
+        /**
+         * By default this component will render a "Working..." indicator while streaming results. This input can turn that off if required.
+         */
+        this.showWorkingIndicator = input(true, ...(ngDevMode ? [{ debugName: "showWorkingIndicator" }] : []));
+        /**
+         * Whether the thinking section is expanded. Initialized to false unless the message is still loading.
+         * Call setThinkingExpanded() via viewChild to control this programmatically. Does nothing if appearance does not distinguish thinking steps.
+         */
+        this.thinkingExpanded = signal(false, ...(ngDevMode ? [{ debugName: "thinkingExpanded" }] : []));
+        /**
+         * Tracks which reasoning sections are expanded, keyed by step index.
+         */
+        this.expandedReasoningStepIndices = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedReasoningStepIndices" }] : []));
+        this.translateService = inject(TranslateService);
+        /**
+         * For now be conservative with the old behaviour, but hope to change this once we've got working really smoothly.
+         */
+        this.defaultNonFinalStepTextDisplay = 'main-answer';
+        // Expand when we initially set the message loading flag, without overwriting the value
+        // any other time
+        effect(() => {
+            if (this.assistantMessageContext().isMessageLoading) {
+                this.thinkingExpanded.set(true);
+            }
+        });
+    }
+    /**
+     * This is public and exists for agent-chat to collapse older messages.
+     * @param expanded Whether the thinking section should be expanded or not.
+     */
+    setThinkingExpanded(expanded) {
+        this.thinkingExpanded.set(expanded);
+    }
+    /**
+     * Get a translated/translateable label for the specified tool.
+     * @param tool The tool call part to get the label for.
+     * @return The label to show for this tool call.
+     */
+    getToolLabel(tool) {
+        const isExecuting = tool.type !== 'tool-result';
+        const config = this.assistantMessageContext().config;
+        const toolCallConfig = config?.toolCallConfig?.[tool.toolName];
+        if (toolCallConfig?.labelProvider) {
+            try {
+                const dynamicLabel = toolCallConfig.labelProvider(tool, this.translateService);
+                // Run it through translate in case it contains gettext values
+                if (dynamicLabel)
+                    return dynamicLabel;
+            }
+            catch (err) {
+                // Should never happen, so report this - then fallback to default logic
+                console.warn(`Error in labelProvider for tool ${tool.toolName}:`, err);
+            }
+        }
+        if (isExecuting && toolCallConfig?.executingLabel) {
+            return toolCallConfig.executingLabel;
+        }
+        if (!isExecuting && toolCallConfig?.completedLabel) {
+            return toolCallConfig.completedLabel;
+        }
+        // If we have no specific label configured, use the default
+        return this.translateService.instant(isExecuting ? gettext('Calling tool {{toolName}}') : gettext('Used tool {{toolName}}'), 
+        // Have to use the tool id since that's all we have
+        { toolName: tool.toolName });
+    }
+    getToolParts(step) {
+        // This method only exists because of the current structure of AIMessage; can remove this when we refactor
+        return [...(step.toolCalls || []), ...(step.toolResults || [])];
+    }
+    toggleReasoningExpanded(stepIndex) {
+        this.expandedReasoningStepIndices.update(s => {
+            const next = new Set(s);
+            s.has(stepIndex) ? next.delete(stepIndex) : next.add(stepIndex);
+            return next;
+        });
+    }
+    /**
+     * Note: ctx is passed as a parameter rather than reading the signal in the template to ensure
+     * it's totally aligned with what the template is rendering.
+     * @param ctx The context for the assistant message.
+     * @return The label to display for the thinking section.
+     */
+    getThinkingLabel(ctx) {
+        return ctx.isMessageLoading
+            ? gettext('Thinking')
+            : this.thinkingExpanded()
+                ? gettext('Hide thinking')
+                : gettext('Show thinking');
+    }
+    getMainAnswerText(ctx) {
+        // If it's a simple plain message, do nothing
+        if (!ctx.message.steps)
+            return ctx.message.content;
+        // Get the latest (non-empty) step text (the final one can occasionally be empty it seems)
+        const lastStepWithText = ctx.message.steps.filter(step => step?.text && step.text !== '').pop();
+        const lastStepText = lastStepWithText?.text || '';
+        // The final step text goes in the main answer area if there are no pending tool calls (since otherwise the tools would show below it), and
+        // message has finished loading, or we're expecting more steps than this.
+        // Note that we check all steps for toolCalls not just the current one, for the sake of "fake" tool calls created by preprocessAgentMessage
+        // where additional step boundaries may be added to simplify parsing.
+        if (lastStepText &&
+            !ctx.message.steps.some(step => step.toolCalls) &&
+            !lastStepWithText?.toolResults &&
+            (!ctx.isMessageLoading ||
+                ctx.message.steps.length >= (ctx.config?.experimental_expectedStepCount || 2))) {
+            return lastStepText;
+        }
+        return '';
+    }
+    hasThinkingContent(ctx, mainAnswer) {
+        // This logic matches the rendering in the template to ensure we don't show an empty thinking section
+        if (!ctx.message?.steps)
+            return false;
+        const result = ctx.message.steps.some(step => (step.text && step.text !== mainAnswer) ||
+            step.reasoning ||
+            [...(step.toolResults || []), ...(step.toolCalls || [])].some(tool => !ctx.config?.toolCallConfig ||
+                (!ctx.config?.toolCallConfig[tool.toolName]?.isHidden &&
+                    !ctx.config?.toolCallConfig[tool.toolName]?.isShownWithMainAnswer)));
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatAssistantMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AiChatAssistantMessageComponent, isStandalone: true, selector: "c8y-ai-chat-assistant-message", inputs: { assistantMessageContext: { classPropertyName: "assistantMessageContext", publicName: "assistantMessageContext", isSignal: true, isRequired: true, transformFunction: null }, showWorkingIndicator: { classPropertyName: "showWorkingIndicator", publicName: "showWorkingIndicator", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let ctx = assistantMessageContext();\n@let steps = ctx.message.steps ?? [{ type: 'text', text: ctx.message.content }];\n@let _config = ctx.config;\n\n<!-- NB: be sure to update hasThinkingContent() if changing the anything that affects what content \nis rendered in the thinking area.\n-->\n\n<!-- \nWe show the assistant message in (up to) 3 slots:\n- collapsible thinking block (for intermediate step text, standard tool calls, etc)\n- special \"artifact\" tools that update user artifacts and need prominent display (e.g. for code edits made by the AI)\n- the main answer (typically from the final step)\n\nThis is a standard approach for AI chats - step text and tools from an LLM are treated as a work log, i.e. useful to \ndisplay progress while streaming the response, but only the text from the last step after all tool calls gives the main answer of the AI to the user. \n\nDepending on configuration, we have an experimental option (if we need it) to style the thinking block the same as the main answer. \n\nOnce the message finishes loading we know the final step IS the main content, but if it's still steaming  \nwe don't know for sure which step has the final/main answer until the LLM has actually finished so have to take a heuistic guess \n(and minimize jumping in the UI). \n\nFor applications where we expect tool calls in most responses, assume the 2nd step is probably the final text; \nfor applications where tool calls are less ubiquitous, assume the first step is main answer until proved otherwise. \nThis minimizes jumping (except when there are >2 steps, which is rare).\n\n-->\n\n@let mainAnswer = getMainAnswerText(ctx);\n\n<!-- Thinking steps section - holds reasoning, text from non-final steps, and standard/non-artifact tool calls -->\n\n@if (hasThinkingContent(ctx, mainAnswer)) {\n  @let nonFinalStepTextDisplay =\n    _config?.experimental_nonFinalStepTextDisplay || defaultNonFinalStepTextDisplay;\n  <div\n    class=\"m-b-8\"\n    [class.thinking-block]=\"nonFinalStepTextDisplay === 'collapsible-thinking-block'\"\n    [class.text-muted]=\"nonFinalStepTextDisplay !== 'main-answer'\"\n    [class.small]=\"nonFinalStepTextDisplay === 'muted-main-answer'\"\n    [class.thinking-steps-appearance]=\"nonFinalStepTextDisplay\"\n    data-cy=\"thinking-steps\"\n  >\n    @if (nonFinalStepTextDisplay === 'collapsible-thinking-block') {\n      <button\n        class=\"btn btn-clean btn-xs text-muted p-l-0\"\n        aria-label=\"Toggle collapse of the thinking section\"\n        [attr.aria-expanded]=\"thinkingExpanded()\"\n        [attr.aria-controls]=\"'thinking-content-' + ctx.messageDisplayIndex\"\n        type=\"button\"\n        (click)=\"thinkingExpanded.set(!thinkingExpanded())\"\n      >\n        <span class=\"small\">{{ getThinkingLabel(ctx) }}</span>\n        <i\n          class=\"m-l-4 icon-12\"\n          [c8yIcon]=\"thinkingExpanded() ? 'collapse-arrow' : 'expand-arrow'\"\n        ></i>\n      </button>\n    }\n\n    <div\n      class=\"collapse\"\n      [attr.aria-label]=\"'Thinking details for message latest' + ctx.messageDisplayIndex\"\n      role=\"region\"\n      [collapse]=\"nonFinalStepTextDisplay === 'collapsible-thinking-block' && !thinkingExpanded()\"\n      [id]=\"'thinking-content-' + ctx.messageDisplayIndex\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        [class]=\"\n          nonFinalStepTextDisplay === 'collapsible-thinking-block'\n            ? 'thinking-content bg-level-1 m-t-8 p-8 b-r-4 border-left-accent small m-b-0 text-muted'\n            : ''\n        \"\n      >\n        @for (step of steps; track $index) {\n          <c8y-ai-chat-assistant-part\n            [part]=\"{ type: 'step-start' }\"\n            [assistantMessageContext]=\"ctx\"\n          ></c8y-ai-chat-assistant-part>\n\n          <!-- Non-final step text: avoid duplicating the final message content since we show that below -->\n          @if (step.text && step.text !== mainAnswer) {\n            <c8y-ai-chat-assistant-part\n              [part]=\"{ type: 'text', text: step.text }\"\n              [assistantMessageContext]=\"ctx\"\n              [displayAsPartOfMainAnswer]=\"nonFinalStepTextDisplay !== 'muted-main-answer'\"\n            ></c8y-ai-chat-assistant-part>\n          }\n\n          <!-- Expandable section for reasoning (only some models provide this). Collapse by default. -->\n          @if (step.reasoning) {\n            <c8y-ai-chat-assistant-part\n              [part]=\"{ type: 'reasoning', text: step.reasoning }\"\n              [assistantMessageContext]=\"ctx\"\n              [displayAsPartOfMainAnswer]=\"nonFinalStepTextDisplay !== 'muted-main-answer'\"\n            ></c8y-ai-chat-assistant-part>\n          }\n\n          @for (tool of getToolParts(step); track tool.toolCallId) {\n            @if (!ctx.config.toolCallConfig?.[tool.toolName]?.isShownWithMainAnswer) {\n              <c8y-ai-chat-assistant-part\n                [part]=\"tool\"\n                [assistantMessageContext]=\"ctx\"\n              ></c8y-ai-chat-assistant-part>\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<c8y-ai-chat-assistant-part\n  [part]=\"{ type: 'step-start' }\"\n  [assistantMessageContext]=\"ctx\"\n></c8y-ai-chat-assistant-part>\n\n<!-- Show tools which generate artifacts/outputs the user cares about in a dedicated area (outside the thinking section, never muted) -->\n\n<span data-cy=\"ai-tools-with-main-answer\">\n  @for (step of steps; track $index) {\n    @for (tool of getToolParts(step); track tool.toolCallId) {\n      @if (ctx.config.toolCallConfig?.[tool.toolName]?.isShownWithMainAnswer) {\n        <c8y-ai-chat-assistant-part\n          [part]=\"tool\"\n          [assistantMessageContext]=\"ctx\"\n        ></c8y-ai-chat-assistant-part>\n      }\n    }\n  }\n</span>\n\n<!-- Main/final text from the final step goes here -->\n@if (mainAnswer) {\n  <div\n    class=\"message-content m-t-8 text-default ai-main-answer-content\"\n    data-cy=\"ai-main-message-content\"\n  >\n    <c8y-ai-chat-assistant-part\n      [part]=\"{ type: 'text', text: mainAnswer }\"\n      [assistantMessageContext]=\"ctx\"\n      [displayAsPartOfMainAnswer]=\"true\"\n    ></c8y-ai-chat-assistant-part>\n  </div>\n}\n\n@if (ctx.isMessageLoading && showWorkingIndicator()) {\n  <!-- Once the message starts to stream, show a small/low-key thinking indicator -->\n  <div\n    class=\"text-muted text-12 fade-in-out d-flex j-c-end\"\n    aria-live=\"polite\"\n    role=\"status\"\n    data-cy=\"working-indicator\"\n  >\n    {{ 'Working\u2026' | translate }}\n  </div>\n}\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "component", type: AiChatAssistantPartComponent, selector: "c8y-ai-chat-assistant-part", inputs: ["part", "displayAsPartOfMainAnswer", "assistantMessageContext"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatAssistantMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-ai-chat-assistant-message', standalone: true, imports: [
+                        C8yTranslatePipe,
+                        IconDirective,
+                        CollapseModule,
+                        C8yTranslateModule,
+                        AiChatAssistantPartComponent
+                    ], template: "@let ctx = assistantMessageContext();\n@let steps = ctx.message.steps ?? [{ type: 'text', text: ctx.message.content }];\n@let _config = ctx.config;\n\n<!-- NB: be sure to update hasThinkingContent() if changing the anything that affects what content \nis rendered in the thinking area.\n-->\n\n<!-- \nWe show the assistant message in (up to) 3 slots:\n- collapsible thinking block (for intermediate step text, standard tool calls, etc)\n- special \"artifact\" tools that update user artifacts and need prominent display (e.g. for code edits made by the AI)\n- the main answer (typically from the final step)\n\nThis is a standard approach for AI chats - step text and tools from an LLM are treated as a work log, i.e. useful to \ndisplay progress while streaming the response, but only the text from the last step after all tool calls gives the main answer of the AI to the user. \n\nDepending on configuration, we have an experimental option (if we need it) to style the thinking block the same as the main answer. \n\nOnce the message finishes loading we know the final step IS the main content, but if it's still steaming  \nwe don't know for sure which step has the final/main answer until the LLM has actually finished so have to take a heuistic guess \n(and minimize jumping in the UI). \n\nFor applications where we expect tool calls in most responses, assume the 2nd step is probably the final text; \nfor applications where tool calls are less ubiquitous, assume the first step is main answer until proved otherwise. \nThis minimizes jumping (except when there are >2 steps, which is rare).\n\n-->\n\n@let mainAnswer = getMainAnswerText(ctx);\n\n<!-- Thinking steps section - holds reasoning, text from non-final steps, and standard/non-artifact tool calls -->\n\n@if (hasThinkingContent(ctx, mainAnswer)) {\n  @let nonFinalStepTextDisplay =\n    _config?.experimental_nonFinalStepTextDisplay || defaultNonFinalStepTextDisplay;\n  <div\n    class=\"m-b-8\"\n    [class.thinking-block]=\"nonFinalStepTextDisplay === 'collapsible-thinking-block'\"\n    [class.text-muted]=\"nonFinalStepTextDisplay !== 'main-answer'\"\n    [class.small]=\"nonFinalStepTextDisplay === 'muted-main-answer'\"\n    [class.thinking-steps-appearance]=\"nonFinalStepTextDisplay\"\n    data-cy=\"thinking-steps\"\n  >\n    @if (nonFinalStepTextDisplay === 'collapsible-thinking-block') {\n      <button\n        class=\"btn btn-clean btn-xs text-muted p-l-0\"\n        aria-label=\"Toggle collapse of the thinking section\"\n        [attr.aria-expanded]=\"thinkingExpanded()\"\n        [attr.aria-controls]=\"'thinking-content-' + ctx.messageDisplayIndex\"\n        type=\"button\"\n        (click)=\"thinkingExpanded.set(!thinkingExpanded())\"\n      >\n        <span class=\"small\">{{ getThinkingLabel(ctx) }}</span>\n        <i\n          class=\"m-l-4 icon-12\"\n          [c8yIcon]=\"thinkingExpanded() ? 'collapse-arrow' : 'expand-arrow'\"\n        ></i>\n      </button>\n    }\n\n    <div\n      class=\"collapse\"\n      [attr.aria-label]=\"'Thinking details for message latest' + ctx.messageDisplayIndex\"\n      role=\"region\"\n      [collapse]=\"nonFinalStepTextDisplay === 'collapsible-thinking-block' && !thinkingExpanded()\"\n      [id]=\"'thinking-content-' + ctx.messageDisplayIndex\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        [class]=\"\n          nonFinalStepTextDisplay === 'collapsible-thinking-block'\n            ? 'thinking-content bg-level-1 m-t-8 p-8 b-r-4 border-left-accent small m-b-0 text-muted'\n            : ''\n        \"\n      >\n        @for (step of steps; track $index) {\n          <c8y-ai-chat-assistant-part\n            [part]=\"{ type: 'step-start' }\"\n            [assistantMessageContext]=\"ctx\"\n          ></c8y-ai-chat-assistant-part>\n\n          <!-- Non-final step text: avoid duplicating the final message content since we show that below -->\n          @if (step.text && step.text !== mainAnswer) {\n            <c8y-ai-chat-assistant-part\n              [part]=\"{ type: 'text', text: step.text }\"\n              [assistantMessageContext]=\"ctx\"\n              [displayAsPartOfMainAnswer]=\"nonFinalStepTextDisplay !== 'muted-main-answer'\"\n            ></c8y-ai-chat-assistant-part>\n          }\n\n          <!-- Expandable section for reasoning (only some models provide this). Collapse by default. -->\n          @if (step.reasoning) {\n            <c8y-ai-chat-assistant-part\n              [part]=\"{ type: 'reasoning', text: step.reasoning }\"\n              [assistantMessageContext]=\"ctx\"\n              [displayAsPartOfMainAnswer]=\"nonFinalStepTextDisplay !== 'muted-main-answer'\"\n            ></c8y-ai-chat-assistant-part>\n          }\n\n          @for (tool of getToolParts(step); track tool.toolCallId) {\n            @if (!ctx.config.toolCallConfig?.[tool.toolName]?.isShownWithMainAnswer) {\n              <c8y-ai-chat-assistant-part\n                [part]=\"tool\"\n                [assistantMessageContext]=\"ctx\"\n              ></c8y-ai-chat-assistant-part>\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<c8y-ai-chat-assistant-part\n  [part]=\"{ type: 'step-start' }\"\n  [assistantMessageContext]=\"ctx\"\n></c8y-ai-chat-assistant-part>\n\n<!-- Show tools which generate artifacts/outputs the user cares about in a dedicated area (outside the thinking section, never muted) -->\n\n<span data-cy=\"ai-tools-with-main-answer\">\n  @for (step of steps; track $index) {\n    @for (tool of getToolParts(step); track tool.toolCallId) {\n      @if (ctx.config.toolCallConfig?.[tool.toolName]?.isShownWithMainAnswer) {\n        <c8y-ai-chat-assistant-part\n          [part]=\"tool\"\n          [assistantMessageContext]=\"ctx\"\n        ></c8y-ai-chat-assistant-part>\n      }\n    }\n  }\n</span>\n\n<!-- Main/final text from the final step goes here -->\n@if (mainAnswer) {\n  <div\n    class=\"message-content m-t-8 text-default ai-main-answer-content\"\n    data-cy=\"ai-main-message-content\"\n  >\n    <c8y-ai-chat-assistant-part\n      [part]=\"{ type: 'text', text: mainAnswer }\"\n      [assistantMessageContext]=\"ctx\"\n      [displayAsPartOfMainAnswer]=\"true\"\n    ></c8y-ai-chat-assistant-part>\n  </div>\n}\n\n@if (ctx.isMessageLoading && showWorkingIndicator()) {\n  <!-- Once the message starts to stream, show a small/low-key thinking indicator -->\n  <div\n    class=\"text-muted text-12 fade-in-out d-flex j-c-end\"\n    aria-live=\"polite\"\n    role=\"status\"\n    data-cy=\"working-indicator\"\n  >\n    {{ 'Working\u2026' | translate }}\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { assistantMessageContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantMessageContext", required: true }] }], showWorkingIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWorkingIndicator", required: false }] }] } });
+
 /**
  * An action button that can be added to chat messages.
  * Typically used for actions like copying, regenerating, or providing feedback on messages.
  */
 class AiChatMessageActionComponent {
     constructor() {
+        /**
+         * Set to true to use content projection for custom action button content.
+         */
+        this.custom = false;
         /**
          * Disables the action button when true.
          */
@@ -30,24 +292,32 @@ class AiChatMessageActionComponent {
         /**
          * Emitted when the action button is clicked.
          */
-        this.click = new EventEmitter();
+        this.actionClicked = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatMessageActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AiChatMessageActionComponent, isStandalone: true, selector: "c8y-ai-chat-message-action", inputs: { disabled: "disabled", tooltip: "tooltip", icon: "icon" }, outputs: { click: "click" }, ngImport: i0, template: "<button\n  class=\"btn btn-dot text-muted\"\n  [attr.aria-label]=\"tooltip | translate\"\n  [tooltip]=\"tooltip | translate\"\n  [adaptivePosition]=\"true\"\n  [delay]=\"500\"\n  (click)=\"click.emit()\"\n  [disabled]=\"disabled\"\n>\n  <i\n    class=\"text-12\"\n    [c8yIcon]=\"icon\"\n  ></i>\n</button>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AiChatMessageActionComponent, isStandalone: true, selector: "c8y-ai-chat-message-action", inputs: { custom: "custom", disabled: "disabled", tooltip: "tooltip", icon: "icon" }, outputs: { actionClicked: "actionClicked" }, ngImport: i0, template: "@if (!custom) {\n  <button\n    class=\"btn btn-dot text-muted\"\n    [attr.aria-label]=\"tooltip | translate\"\n    [tooltip]=\"tooltip | translate\"\n    [adaptivePosition]=\"true\"\n    [delay]=\"500\"\n    (click)=\"actionClicked.emit()\"\n    [disabled]=\"disabled\"\n  >\n    <i\n      class=\"text-12\"\n      [c8yIcon]=\"icon\"\n    ></i>\n  </button>\n} @else {\n  <ng-content></ng-content>\n}\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatMessageActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-ai-chat-message-action', standalone: true, imports: [TooltipModule, C8yTranslatePipe, IconDirective], template: "<button\n  class=\"btn btn-dot text-muted\"\n  [attr.aria-label]=\"tooltip | translate\"\n  [tooltip]=\"tooltip | translate\"\n  [adaptivePosition]=\"true\"\n  [delay]=\"500\"\n  (click)=\"click.emit()\"\n  [disabled]=\"disabled\"\n>\n  <i\n    class=\"text-12\"\n    [c8yIcon]=\"icon\"\n  ></i>\n</button>\n" }]
-        }], propDecorators: { disabled: [{
+            args: [{ selector: 'c8y-ai-chat-message-action', standalone: true, imports: [TooltipModule, C8yTranslatePipe, IconDirective], template: "@if (!custom) {\n  <button\n    class=\"btn btn-dot text-muted\"\n    [attr.aria-label]=\"tooltip | translate\"\n    [tooltip]=\"tooltip | translate\"\n    [adaptivePosition]=\"true\"\n    [delay]=\"500\"\n    (click)=\"actionClicked.emit()\"\n    [disabled]=\"disabled\"\n  >\n    <i\n      class=\"text-12\"\n      [c8yIcon]=\"icon\"\n    ></i>\n  </button>\n} @else {\n  <ng-content></ng-content>\n}\n" }]
+        }], propDecorators: { custom: [{
+                type: Input
+            }], disabled: [{
                 type: Input
             }], tooltip: [{
                 type: Input
             }], icon: [{
                 type: Input
-            }], click: [{
+            }], actionClicked: [{
                 type: Output
             }] } });
 
+/**
+ * A container for content and actions that should be rendered for each chat message.
+ *
+ * Project content into this component to display the message, for example add an `<ai-chat-assistant-message>`
+ * for assistant messages, and a simple `markdownToHtml | async` rendering of the content for user messages.
+ */
 class AiChatMessageComponent {
     constructor() {
         this.role = input(...(ngDevMode ? [undefined, { debugName: "role" }] : []));
@@ -90,11 +360,11 @@ class AiChatMessageComponent {
         }, ...(ngDevMode ? [{ debugName: "messageContentAriaLabel" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AiChatMessageComponent, isStandalone: true, selector: "c8y-ai-chat-message", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"d-col p-b-16\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"article\"\n>\n  <div\n    class=\"chat-message text-break-word\"\n    [ngClass]=\"{\n      'user-message': message()?.role === 'user' || role() === 'user',\n      'agent-message': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <div\n      class=\"message-content\"\n      [attr.aria-label]=\"messageContentAriaLabel()\"\n      [innerHTML]=\"message()?.content | markdownToHtml | async\"\n    ></div>\n    <ng-content select=\":not(c8y-ai-chat-message-action)\"></ng-content>\n    @if (message()?.timestamp) {\n      <div class=\"message-timestamp\">\n        <span [tooltip]=\"message()?.timestamp | c8yDate\">\n          {{ message()?.timestamp | c8yDate: 'adaptiveDate' }}\n        </span>\n      </div>\n    }\n  </div>\n  <div\n    class=\"message-action\"\n    [attr.aria-label]=\"'Message actions' | translate\"\n    role=\"toolbar\"\n    [ngClass]=\"{\n      'user-action showOnHover': message()?.role === 'user' || role() === 'user',\n      'agent-action p-l-16': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <ng-content select=\"c8y-ai-chat-message-action\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AiChatMessageComponent, isStandalone: true, selector: "c8y-ai-chat-message", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"d-col p-t-16\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"article\"\n>\n  <div\n    class=\"chat-message text-break-word\"\n    [ngClass]=\"{\n      'user-message': message()?.role === 'user' || role() === 'user',\n      'agent-message': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues -->\n    <span\n      class=\"hidden-copy-label\"\n      aria-hidden=\"true\"\n    >\n      {{ `====== ${messageContentAriaLabel()} ======` }}</span\n    >\n\n    <!-- Apply the class and aria-label to both the main content and whatever is projected, so we get the same styling by default -->\n    <div\n      class=\"message-content\"\n      [attr.aria-label]=\"messageContentAriaLabel()\"\n    >\n      <div style=\"display: contents\">\n        <ng-content select=\":not(c8y-ai-chat-message-action)\"></ng-content>\n      </div>\n    </div>\n    @if (message()?.timestamp) {\n      <div class=\"message-timestamp\">\n        <span [tooltip]=\"message()?.timestamp | c8yDate\">\n          {{ message()?.timestamp | c8yDate: 'adaptiveDate' }}\n        </span>\n      </div>\n    }\n  </div>\n  <div\n    class=\"message-action\"\n    [attr.aria-label]=\"'Message actions' | translate\"\n    role=\"toolbar\"\n    [ngClass]=\"{\n      'user-action showOnHover': message()?.role === 'user' || role() === 'user',\n      'agent-action p-l-16': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <ng-content select=\"c8y-ai-chat-message-action\"></ng-content>\n  </div>\n</div>\n", styles: [".hidden-copy-label{display:block;font-size:0;line-height:0;-webkit-user-select:text;user-select:text}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-ai-chat-message', standalone: true, imports: [MarkdownToHtmlPipe, AsyncPipe, NgClass, TooltipModule, C8yTranslatePipe, DatePipe], template: "<div\n  class=\"d-col p-b-16\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"article\"\n>\n  <div\n    class=\"chat-message text-break-word\"\n    [ngClass]=\"{\n      'user-message': message()?.role === 'user' || role() === 'user',\n      'agent-message': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <div\n      class=\"message-content\"\n      [attr.aria-label]=\"messageContentAriaLabel()\"\n      [innerHTML]=\"message()?.content | markdownToHtml | async\"\n    ></div>\n    <ng-content select=\":not(c8y-ai-chat-message-action)\"></ng-content>\n    @if (message()?.timestamp) {\n      <div class=\"message-timestamp\">\n        <span [tooltip]=\"message()?.timestamp | c8yDate\">\n          {{ message()?.timestamp | c8yDate: 'adaptiveDate' }}\n        </span>\n      </div>\n    }\n  </div>\n  <div\n    class=\"message-action\"\n    [attr.aria-label]=\"'Message actions' | translate\"\n    role=\"toolbar\"\n    [ngClass]=\"{\n      'user-action showOnHover': message()?.role === 'user' || role() === 'user',\n      'agent-action p-l-16': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <ng-content select=\"c8y-ai-chat-message-action\"></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-ai-chat-message', standalone: true, imports: [NgClass, TooltipModule, C8yTranslatePipe, DatePipe], template: "<div\n  class=\"d-col p-t-16\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"article\"\n>\n  <div\n    class=\"chat-message text-break-word\"\n    [ngClass]=\"{\n      'user-message': message()?.role === 'user' || role() === 'user',\n      'agent-message': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues -->\n    <span\n      class=\"hidden-copy-label\"\n      aria-hidden=\"true\"\n    >\n      {{ `====== ${messageContentAriaLabel()} ======` }}</span\n    >\n\n    <!-- Apply the class and aria-label to both the main content and whatever is projected, so we get the same styling by default -->\n    <div\n      class=\"message-content\"\n      [attr.aria-label]=\"messageContentAriaLabel()\"\n    >\n      <div style=\"display: contents\">\n        <ng-content select=\":not(c8y-ai-chat-message-action)\"></ng-content>\n      </div>\n    </div>\n    @if (message()?.timestamp) {\n      <div class=\"message-timestamp\">\n        <span [tooltip]=\"message()?.timestamp | c8yDate\">\n          {{ message()?.timestamp | c8yDate: 'adaptiveDate' }}\n        </span>\n      </div>\n    }\n  </div>\n  <div\n    class=\"message-action\"\n    [attr.aria-label]=\"'Message actions' | translate\"\n    role=\"toolbar\"\n    [ngClass]=\"{\n      'user-action showOnHover': message()?.role === 'user' || role() === 'user',\n      'agent-action p-l-16': message()?.role === 'assistant' || role() === 'assistant'\n    }\"\n  >\n    <ng-content select=\"c8y-ai-chat-message-action\"></ng-content>\n  </div>\n</div>\n", styles: [".hidden-copy-label{display:block;font-size:0;line-height:0;-webkit-user-select:text;user-select:text}\n"] }]
         }], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
 
 /**
@@ -103,52 +373,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  */
 class AiChatSuggestionComponent {
     constructor() {
+        /**
+         * The visible label text displayed on the suggestion chip.
+         */
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        /**
+         * The prompt text that will be sent when the suggestion is clicked.
+         */
+        this.prompt = input.required(...(ngDevMode ? [{ debugName: "prompt" }] : []));
         /**
          * Icon to display alongside the suggestion label.
          */
-        this.icon = 'c8y-bulb';
+        this.icon = input('c8y-bulb', ...(ngDevMode ? [{ debugName: "icon" }] : []));
         /**
          * When true, uses AI-styled buttons instead of default styling.
          */
-        this.useAiButtons = false;
+        this.useAiButtons = input(false, ...(ngDevMode ? [{ debugName: "useAiButtons" }] : []));
         /**
          * Disables the suggestion chip when true.
          */
-        this.disabled = false;
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         /**
          * Emitted when the suggestion is clicked, providing the prompt as an AIMessage.
          */
-        this.suggestionClicked = new EventEmitter();
+        this.suggestionClicked = output();
     }
     /**
      * Handles suggestion click and emits the prompt as a user message.
      */
     suggest() {
         this.suggestionClicked.emit({
-            content: this.prompt,
+            content: this.prompt(),
             role: 'user',
             timestamp: new Date().toISOString()
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatSuggestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AiChatSuggestionComponent, isStandalone: true, selector: "c8y-ai-chat-suggestion", inputs: { label: "label", prompt: "prompt", icon: "icon", useAiButtons: "useAiButtons", disabled: "disabled" }, outputs: { suggestionClicked: "suggestionClicked" }, ngImport: i0, template: "@if (!useAiButtons) {\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"prompt | translate\"\n    (click)=\"suggest()\"\n    [disabled]=\"disabled\"\n  >\n    <i [c8yIcon]=\"icon\"></i>\n    {{ label | translate }}\n  </button>\n} @else {\n  <button\n    class=\"btn btn-sm btn-ai\"\n    [title]=\"prompt | translate\"\n    (click)=\"suggest()\"\n    [disabled]=\"disabled\"\n  >\n    <span>{{ label | translate }}</span>\n  </button>\n}\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AiChatSuggestionComponent, isStandalone: true, selector: "c8y-ai-chat-suggestion", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, prompt: { classPropertyName: "prompt", publicName: "prompt", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, useAiButtons: { classPropertyName: "useAiButtons", publicName: "useAiButtons", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { suggestionClicked: "suggestionClicked" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "@if (!useAiButtons()) {\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"prompt() | translate\"\n    (click)=\"suggest()\"\n    [disabled]=\"disabled()\"\n  >\n    <i [c8yIcon]=\"icon()\"></i>\n    {{ label() | translate }}\n  </button>\n} @else {\n  <button\n    class=\"btn btn-sm btn-ai\"\n    [title]=\"prompt() | translate\"\n    (click)=\"suggest()\"\n    [disabled]=\"disabled()\"\n  >\n    <span>{{ label() | translate }}</span>\n  </button>\n}\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatSuggestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-ai-chat-suggestion', standalone: true, imports: [IconDirective, C8yTranslatePipe], template: "@if (!useAiButtons) {\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"prompt | translate\"\n    (click)=\"suggest()\"\n    [disabled]=\"disabled\"\n  >\n    <i [c8yIcon]=\"icon\"></i>\n    {{ label | translate }}\n  </button>\n} @else {\n  <button\n    class=\"btn btn-sm btn-ai\"\n    [title]=\"prompt | translate\"\n    (click)=\"suggest()\"\n    [disabled]=\"disabled\"\n  >\n    <span>{{ label | translate }}</span>\n  </button>\n}\n" }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], prompt: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], useAiButtons: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], suggestionClicked: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'c8y-ai-chat-suggestion', host: { class: 'd-contents' }, standalone: true, imports: [IconDirective, C8yTranslatePipe], template: "@if (!useAiButtons()) {\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"prompt() | translate\"\n    (click)=\"suggest()\"\n    [disabled]=\"disabled()\"\n  >\n    <i [c8yIcon]=\"icon()\"></i>\n    {{ label() | translate }}\n  </button>\n} @else {\n  <button\n    class=\"btn btn-sm btn-ai\"\n    [title]=\"prompt() | translate\"\n    (click)=\"suggest()\"\n    [disabled]=\"disabled()\"\n  >\n    <span>{{ label() | translate }}</span>\n  </button>\n}\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], prompt: [{ type: i0.Input, args: [{ isSignal: true, alias: "prompt", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], useAiButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAiButtons", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suggestionClicked: [{ type: i0.Output, args: ["suggestionClicked"] }] } });
 
 /**
  * An interactive chat interface component for AI-powered conversations.
@@ -179,13 +445,22 @@ class AiChatComponent {
          * Emitted when the user cancels an ongoing operation during loading state.
          */
         this.onCancel = new EventEmitter();
+        /**
+         * Child message components displayed in the chat.
+         */
+        this.messages = contentChildren(AiChatMessageComponent, ...(ngDevMode ? [{ debugName: "messages" }] : []));
+        /**
+         * Reference to the scroll container for the chat messages.
+         */
+        this.scrollContainer = viewChild('chatScrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
         this.componentId = `chat-${crypto.randomUUID()}`;
         this._config = {
             headline: gettext('Welcome!'),
             welcomeText: '',
+            welcomePosition: 'top',
             title: gettext('What can I help you with?'),
-            placeholder: gettext('Type your message here…'),
-            placeholderAfterFirstMessage: gettext('Type your next message here…'),
+            placeholder: gettext('Type your message here...'),
+            scrollbarOnlyOnHover: false,
             sendButtonText: gettext('Send'),
             cancelButtonText: gettext('Cancel'),
             disclaimerText: gettext('AI-generated responses can contain errors. Verify the details before use.'),
@@ -194,10 +469,24 @@ class AiChatComponent {
                 cancel: 'stop-circle'
             }
         };
+        // Auto-scroll to bottom when messages change
+        effect(() => {
+            this.messages(); // track changes
+            const container = this.scrollContainer()?.nativeElement;
+            if (!container)
+                return;
+            // In column-reverse, scrollTop=0 IS the visual bottom.
+            // Only snap back if user is already near the bottom (wasn't scrolled up).
+            if (container.scrollTop < 50) {
+                container.scrollTop = 0;
+            }
+        });
     }
     /**
      * Configuration object for customizing labels, placeholders, and icons.
      * Accepts partial configuration to override defaults.
+     * @param value Partial configuration to merge with defaults.
+     * @returns The complete configuration object.
      */
     set config(value) {
         this._config = { ...this._config, ...value };
@@ -208,7 +497,7 @@ class AiChatComponent {
     /**
      * Handles message submission when the user sends a message.
      * Emits the onMessage event and clears the input.
-     * @param $event - The event object from the form submission
+     * @param $event The event object from the form submission
      */
     sendMessage($event) {
         $event.preventDefault();
@@ -229,25 +518,35 @@ class AiChatComponent {
         this.onCancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AiChatComponent, isStandalone: true, selector: "c8y-ai-chat", inputs: { isLoading: "isLoading", disabled: "disabled", prompt: "prompt", config: "config" }, outputs: { onMessage: "onMessage", onCancel: "onCancel" }, host: { classAttribute: "d-contents" }, queries: [{ propertyName: "messages", predicate: AiChatMessageComponent }], ngImport: i0, template: "<div\n  class=\"d-col fit-h fit-w flex-grow\"\n  [attr.aria-label]=\"config.headline | translate\"\n  role=\"region\"\n>\n  @if (messages.length > 0) {\n    <div\n      class=\"inner-scroll flex-grow d-col-reverse min-height-0 bg-level-0\"\n      [attr.aria-label]=\"'Chat conversation' | translate\"\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n      role=\"log\"\n    >\n      <div class=\"d-col p-l-16 p-r-16\">\n        <ng-content select=\"c8y-ai-chat-message\"></ng-content>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n  <div [ngClass]=\"{ 'd-col fit-h': messages.length === 0 }\">\n    @if (messages.length === 0) {\n      <div\n        class=\"p-24\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <h4 class=\"m-b-16 text-medium\">{{ config.headline | translate }}</h4>\n        <p class=\"p-b-8 text-balance\">{{ config.title | translate }}</p>\n        <p class=\"text-muted text-balance\">{{ config.welcomeText | translate }}</p>\n      </div>\n    }\n    <div class=\"chat-input bg-level-1\">\n      <div class=\"d-flex inner-scroll a-i-center gap-8 p-l-16 p-r-16 p-b-8\">\n        <ng-content select=\"c8y-ai-chat-suggestion\"></ng-content>\n      </div>\n      <div class=\"chat-input-group\">\n        <label\n          class=\"sr-only\"\n          for=\"chat-input-{{ componentId }}\"\n        >\n          {{ config.placeholder | translate }}\n        </label>\n        <textarea\n          class=\"form-control no-resize\"\n          style=\"max-height: 200px !important\"\n          [attr.aria-label]=\"config.placeholder | translate\"\n          id=\"chat-input-{{ componentId }}\"\n          [attr.aria-describedby]=\"config.disclaimerText ? 'chat-disclaimer-' + componentId : null\"\n          [attr.aria-busy]=\"isLoading\"\n          [placeholder]=\"\n            (messages.length === 0 ? config.placeholder : config.placeholderAfterFirstMessage)\n              | translate\n          \"\n          [(ngModel)]=\"prompt\"\n          (keydown.enter)=\"sendMessage($event)\"\n          [disabled]=\"disabled\"\n          c8y-textarea-autoresize\n        ></textarea>\n        <div class=\"chat-input-group-btn\">\n          @if (!isLoading) {\n            <button\n              class=\"btn btn-dot\"\n              [attr.title]=\"config.sendButtonText | translate\"\n              [attr.aria-label]=\"config.sendButtonText | translate\"\n              type=\"button\"\n              (click)=\"sendMessage($event)\"\n              [disabled]=\"disabled || prompt.trim().length === 0\"\n            >\n              <i [c8yIcon]=\"config.userInterfaceIcons?.send || 'arrow-circle-right'\"></i>\n            </button>\n          } @else {\n            <button\n              class=\"btn btn-dot btn-dot--danger\"\n              [attr.title]=\"config.cancelButtonText | translate\"\n              [attr.aria-label]=\"config.cancelButtonText | translate\"\n              type=\"button\"\n              (click)=\"cancel()\"\n            >\n              <i [c8yIcon]=\"config.userInterfaceIcons?.cancel || 'stop'\"></i>\n            </button>\n          }\n        </div>\n      </div>\n      @if (config.disclaimerText) {\n        <div\n          class=\"text-muted m-b-8 text-10 p-l-16\"\n          id=\"chat-disclaimer-{{ componentId }}\"\n          role=\"note\"\n        >\n          {{ config.disclaimerText | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AiChatComponent, isStandalone: true, selector: "c8y-ai-chat", inputs: { isLoading: "isLoading", disabled: "disabled", prompt: "prompt", suggestionsTemplate: "suggestionsTemplate", welcomeTemplate: "welcomeTemplate", config: "config" }, outputs: { onMessage: "onMessage", onCancel: "onCancel" }, host: { classAttribute: "d-contents" }, queries: [{ propertyName: "messages", predicate: AiChatMessageComponent, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["chatScrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"d-col fit-h fit-w flex-grow\"\n  [attr.aria-label]=\"config.headline | translate\"\n  role=\"region\"\n>\n  @if (messages().length > 0) {\n    <div\n      [attr.aria-label]=\"'Chat conversation' | translate\"\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n      role=\"log\"\n      #chatScrollContainer\n      [ngClass]=\"{\n        'inner-scroll': true,\n        'd-col-reverse': true,\n        'scrollbar-only-on-hover': config.scrollbarOnlyOnHover,\n        'flex-grow': true,\n        'min-height-0': true,\n        'bg-level-0': true\n      }\"\n    >\n      <div class=\"d-col p-l-16 p-r-16\">\n        <ng-content select=\"[slot='before-messages']\"></ng-content>\n        <ng-content select=\"c8y-ai-chat-message\"></ng-content>\n        <ng-content select=\"[slot='after-messages']\"></ng-content>\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{\n      'd-col fit-h': messages().length === 0\n    }\"\n  >\n    @if (messages().length === 0) {\n      <div\n        class=\"p-24 d-col fit-h inner-scroll\"\n        aria-live=\"polite\"\n        role=\"status\"\n        [ngClass]=\"{\n          'j-c-start': config.welcomePosition === 'top',\n          'j-c-center': config.welcomePosition === 'center',\n          'j-c-end': config.welcomePosition === 'bottom'\n        }\"\n      >\n        <h4 class=\"m-b-16 text-medium\">{{ config.headline | translate }}</h4>\n        @if (config.title.length > 0) {\n          <p class=\"p-b-8 text-balance\">{{ config.title | translate }}</p>\n        }\n        <div class=\"text-balance chat-message min-height-0\">\n          <div\n            class=\"text-muted\"\n            [innerHTML]=\"config.welcomeText | translate | markdownToHtml | async\"\n          ></div>\n          @if (welcomeTemplate) {\n            <ng-container *ngTemplateOutlet=\"welcomeTemplate\"></ng-container>\n          }\n        </div>\n      </div>\n    }\n    <div\n      class=\"chat-input\"\n      [class.bg-level-1]=\"config.appearance !== 'flat'\"\n    >\n      <!-- For simple cases allow ng-content projection; however this doesn't seem to work with dynamic \n       suggestion lists from a signal (e.g. returned from the AI) so also support `suggestionsTemplate` for that. \n      -->\n      @if (!isLoading) {\n        <div\n          [class]=\"\n            'd-flex inner-scroll gap-8 p-l-16 p-r-16 p-b-8 ' +\n            (config.suggestionsLayout === 'vertical' ? 'flex-wrap' : 'a-i-center')\n          \"\n        >\n          <ng-content select=\"c8y-ai-chat-suggestion\"></ng-content>\n\n          @if (suggestionsTemplate) {\n            <ng-container *ngTemplateOutlet=\"suggestionsTemplate\"></ng-container>\n          }\n        </div>\n      }\n      <div class=\"chat-input-group\">\n        <label\n          class=\"sr-only\"\n          for=\"chat-input-{{ componentId }}\"\n        >\n          {{ config.placeholder | translate }}\n        </label>\n        <textarea\n          class=\"form-control no-resize\"\n          [class.text-muted]=\"isLoading\"\n          style=\"max-height: 200px !important\"\n          [attr.aria-label]=\"config.placeholder | translate\"\n          id=\"chat-input-{{ componentId }}\"\n          placeholder=\"{{ config.placeholder | translate }}\"\n          [attr.aria-describedby]=\"config.disclaimerText ? 'chat-disclaimer-' + componentId : null\"\n          [attr.aria-busy]=\"isLoading\"\n          [(ngModel)]=\"prompt\"\n          (keydown.enter)=\"!isLoading && sendMessage($event)\"\n          [disabled]=\"disabled\"\n          c8y-textarea-autoresize\n        ></textarea>\n        <div class=\"chat-input-group-btn\">\n          @if (!isLoading) {\n            <button\n              class=\"btn btn-dot\"\n              [attr.title]=\"config.sendButtonText || '' | translate\"\n              [attr.aria-label]=\"config.sendButtonText || '' | translate\"\n              type=\"button\"\n              (click)=\"sendMessage($event)\"\n              [disabled]=\"disabled || prompt.trim().length === 0\"\n            >\n              <i [c8yIcon]=\"config.userInterfaceIcons.send || 'arrow-circle-right'\"></i>\n            </button>\n          } @else {\n            <button\n              class=\"btn btn-dot btn-dot--danger\"\n              [attr.title]=\"config.cancelButtonText || '' | translate\"\n              [attr.aria-label]=\"config.cancelButtonText || '' | translate\"\n              type=\"button\"\n              (click)=\"cancel()\"\n            >\n              <i [c8yIcon]=\"config.userInterfaceIcons.cancel || 'stop'\"></i>\n            </button>\n          }\n        </div>\n      </div>\n      @if (config.disclaimerText) {\n        <div\n          class=\"text-muted m-b-8 text-10 p-l-16\"\n          id=\"chat-disclaimer-{{ componentId }}\"\n          role=\"note\"\n        >\n          {{ config.disclaimerText | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AiChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-ai-chat', imports: [C8yTranslatePipe, FormsModule, TextareaAutoresizeDirective, IconDirective, NgClass], standalone: true, host: { class: 'd-contents' }, template: "<div\n  class=\"d-col fit-h fit-w flex-grow\"\n  [attr.aria-label]=\"config.headline | translate\"\n  role=\"region\"\n>\n  @if (messages.length > 0) {\n    <div\n      class=\"inner-scroll flex-grow d-col-reverse min-height-0 bg-level-0\"\n      [attr.aria-label]=\"'Chat conversation' | translate\"\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n      role=\"log\"\n    >\n      <div class=\"d-col p-l-16 p-r-16\">\n        <ng-content select=\"c8y-ai-chat-message\"></ng-content>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n  <div [ngClass]=\"{ 'd-col fit-h': messages.length === 0 }\">\n    @if (messages.length === 0) {\n      <div\n        class=\"p-24\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <h4 class=\"m-b-16 text-medium\">{{ config.headline | translate }}</h4>\n        <p class=\"p-b-8 text-balance\">{{ config.title | translate }}</p>\n        <p class=\"text-muted text-balance\">{{ config.welcomeText | translate }}</p>\n      </div>\n    }\n    <div class=\"chat-input bg-level-1\">\n      <div class=\"d-flex inner-scroll a-i-center gap-8 p-l-16 p-r-16 p-b-8\">\n        <ng-content select=\"c8y-ai-chat-suggestion\"></ng-content>\n      </div>\n      <div class=\"chat-input-group\">\n        <label\n          class=\"sr-only\"\n          for=\"chat-input-{{ componentId }}\"\n        >\n          {{ config.placeholder | translate }}\n        </label>\n        <textarea\n          class=\"form-control no-resize\"\n          style=\"max-height: 200px !important\"\n          [attr.aria-label]=\"config.placeholder | translate\"\n          id=\"chat-input-{{ componentId }}\"\n          [attr.aria-describedby]=\"config.disclaimerText ? 'chat-disclaimer-' + componentId : null\"\n          [attr.aria-busy]=\"isLoading\"\n          [placeholder]=\"\n            (messages.length === 0 ? config.placeholder : config.placeholderAfterFirstMessage)\n              | translate\n          \"\n          [(ngModel)]=\"prompt\"\n          (keydown.enter)=\"sendMessage($event)\"\n          [disabled]=\"disabled\"\n          c8y-textarea-autoresize\n        ></textarea>\n        <div class=\"chat-input-group-btn\">\n          @if (!isLoading) {\n            <button\n              class=\"btn btn-dot\"\n              [attr.title]=\"config.sendButtonText | translate\"\n              [attr.aria-label]=\"config.sendButtonText | translate\"\n              type=\"button\"\n              (click)=\"sendMessage($event)\"\n              [disabled]=\"disabled || prompt.trim().length === 0\"\n            >\n              <i [c8yIcon]=\"config.userInterfaceIcons?.send || 'arrow-circle-right'\"></i>\n            </button>\n          } @else {\n            <button\n              class=\"btn btn-dot btn-dot--danger\"\n              [attr.title]=\"config.cancelButtonText | translate\"\n              [attr.aria-label]=\"config.cancelButtonText | translate\"\n              type=\"button\"\n              (click)=\"cancel()\"\n            >\n              <i [c8yIcon]=\"config.userInterfaceIcons?.cancel || 'stop'\"></i>\n            </button>\n          }\n        </div>\n      </div>\n      @if (config.disclaimerText) {\n        <div\n          class=\"text-muted m-b-8 text-10 p-l-16\"\n          id=\"chat-disclaimer-{{ componentId }}\"\n          role=\"note\"\n        >\n          {{ config.disclaimerText | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { isLoading: [{
+            args: [{ selector: 'c8y-ai-chat', imports: [
+                        C8yTranslatePipe,
+                        FormsModule,
+                        TextareaAutoresizeDirective,
+                        IconDirective,
+                        NgClass,
+                        NgTemplateOutlet,
+                        MarkdownToHtmlPipe,
+                        AsyncPipe
+                    ], standalone: true, host: { class: 'd-contents' }, template: "<div\n  class=\"d-col fit-h fit-w flex-grow\"\n  [attr.aria-label]=\"config.headline | translate\"\n  role=\"region\"\n>\n  @if (messages().length > 0) {\n    <div\n      [attr.aria-label]=\"'Chat conversation' | translate\"\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n      role=\"log\"\n      #chatScrollContainer\n      [ngClass]=\"{\n        'inner-scroll': true,\n        'd-col-reverse': true,\n        'scrollbar-only-on-hover': config.scrollbarOnlyOnHover,\n        'flex-grow': true,\n        'min-height-0': true,\n        'bg-level-0': true\n      }\"\n    >\n      <div class=\"d-col p-l-16 p-r-16\">\n        <ng-content select=\"[slot='before-messages']\"></ng-content>\n        <ng-content select=\"c8y-ai-chat-message\"></ng-content>\n        <ng-content select=\"[slot='after-messages']\"></ng-content>\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{\n      'd-col fit-h': messages().length === 0\n    }\"\n  >\n    @if (messages().length === 0) {\n      <div\n        class=\"p-24 d-col fit-h inner-scroll\"\n        aria-live=\"polite\"\n        role=\"status\"\n        [ngClass]=\"{\n          'j-c-start': config.welcomePosition === 'top',\n          'j-c-center': config.welcomePosition === 'center',\n          'j-c-end': config.welcomePosition === 'bottom'\n        }\"\n      >\n        <h4 class=\"m-b-16 text-medium\">{{ config.headline | translate }}</h4>\n        @if (config.title.length > 0) {\n          <p class=\"p-b-8 text-balance\">{{ config.title | translate }}</p>\n        }\n        <div class=\"text-balance chat-message min-height-0\">\n          <div\n            class=\"text-muted\"\n            [innerHTML]=\"config.welcomeText | translate | markdownToHtml | async\"\n          ></div>\n          @if (welcomeTemplate) {\n            <ng-container *ngTemplateOutlet=\"welcomeTemplate\"></ng-container>\n          }\n        </div>\n      </div>\n    }\n    <div\n      class=\"chat-input\"\n      [class.bg-level-1]=\"config.appearance !== 'flat'\"\n    >\n      <!-- For simple cases allow ng-content projection; however this doesn't seem to work with dynamic \n       suggestion lists from a signal (e.g. returned from the AI) so also support `suggestionsTemplate` for that. \n      -->\n      @if (!isLoading) {\n        <div\n          [class]=\"\n            'd-flex inner-scroll gap-8 p-l-16 p-r-16 p-b-8 ' +\n            (config.suggestionsLayout === 'vertical' ? 'flex-wrap' : 'a-i-center')\n          \"\n        >\n          <ng-content select=\"c8y-ai-chat-suggestion\"></ng-content>\n\n          @if (suggestionsTemplate) {\n            <ng-container *ngTemplateOutlet=\"suggestionsTemplate\"></ng-container>\n          }\n        </div>\n      }\n      <div class=\"chat-input-group\">\n        <label\n          class=\"sr-only\"\n          for=\"chat-input-{{ componentId }}\"\n        >\n          {{ config.placeholder | translate }}\n        </label>\n        <textarea\n          class=\"form-control no-resize\"\n          [class.text-muted]=\"isLoading\"\n          style=\"max-height: 200px !important\"\n          [attr.aria-label]=\"config.placeholder | translate\"\n          id=\"chat-input-{{ componentId }}\"\n          placeholder=\"{{ config.placeholder | translate }}\"\n          [attr.aria-describedby]=\"config.disclaimerText ? 'chat-disclaimer-' + componentId : null\"\n          [attr.aria-busy]=\"isLoading\"\n          [(ngModel)]=\"prompt\"\n          (keydown.enter)=\"!isLoading && sendMessage($event)\"\n          [disabled]=\"disabled\"\n          c8y-textarea-autoresize\n        ></textarea>\n        <div class=\"chat-input-group-btn\">\n          @if (!isLoading) {\n            <button\n              class=\"btn btn-dot\"\n              [attr.title]=\"config.sendButtonText || '' | translate\"\n              [attr.aria-label]=\"config.sendButtonText || '' | translate\"\n              type=\"button\"\n              (click)=\"sendMessage($event)\"\n              [disabled]=\"disabled || prompt.trim().length === 0\"\n            >\n              <i [c8yIcon]=\"config.userInterfaceIcons.send || 'arrow-circle-right'\"></i>\n            </button>\n          } @else {\n            <button\n              class=\"btn btn-dot btn-dot--danger\"\n              [attr.title]=\"config.cancelButtonText || '' | translate\"\n              [attr.aria-label]=\"config.cancelButtonText || '' | translate\"\n              type=\"button\"\n              (click)=\"cancel()\"\n            >\n              <i [c8yIcon]=\"config.userInterfaceIcons.cancel || 'stop'\"></i>\n            </button>\n          }\n        </div>\n      </div>\n      @if (config.disclaimerText) {\n        <div\n          class=\"text-muted m-b-8 text-10 p-l-16\"\n          id=\"chat-disclaimer-{{ componentId }}\"\n          role=\"note\"\n        >\n          {{ config.disclaimerText | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { isLoading: [{
                 type: Input
             }], disabled: [{
                 type: Input
             }], prompt: [{
                 type: Input
+            }], suggestionsTemplate: [{
+                type: Input
+            }], welcomeTemplate: [{
+                type: Input
             }], onMessage: [{
                 type: Output
             }], onCancel: [{
                 type: Output
-            }], messages: [{
-                type: ContentChildren,
-                args: [AiChatMessageComponent]
-            }], config: [{
+            }], messages: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AiChatMessageComponent), { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ['chatScrollContainer', { isSignal: true }] }], config: [{
                 type: Input
             }] } });
 
@@ -255,5 +554,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AiChatComponent, AiChatMessageActionComponent, AiChatMessageComponent, AiChatSuggestionComponent };
+export { AiChatAssistantMessageComponent, AiChatAssistantPartComponent, AiChatComponent, AiChatMessageActionComponent, AiChatMessageComponent, AiChatSuggestionComponent, AiChatToolCallComponent };
 //# sourceMappingURL=c8y-ngx-components-ai-ai-chat.mjs.map