@c8y/ngx-components 1023.79.1 → 1023.80.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, signal, inject, ChangeDetectionStrategy, Component, effect, EventEmitter, Output, Input, computed, output, contentChildren, viewChild } from '@angular/core';
+import { input, signal, inject, ChangeDetectionStrategy, Component, computed, effect, EventEmitter, Output, Input, output, contentChildren, viewChild } from '@angular/core';
 import { IconDirective, C8yTranslateModule, C8yTranslatePipe, C8yTranslateDirective, MarkdownToHtmlPipe, DatePipe, TextareaAutoresizeDirective } from '@c8y/ngx-components';
 import { gettext } from '@c8y/ngx-components/gettext';
 import { TranslateService } from '@ngx-translate/core';
@@ -75,7 +75,7 @@ class AiChatToolCallComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AiChatToolCallComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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() || toolDetailsComponent() || _tool.error;\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.19", ngImport: i0, type: AiChatToolCallComponent, decorators: [{
             type: Component,
@@ -86,7 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         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" }]
+                    ], template: "@let _tool = tool();\n@let showDetails = showDefaultToolDetails() || toolDetailsComponent() || _tool.error;\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. */
@@ -148,10 +148,7 @@ class AiChatAssistantMessageComponent {
          */
         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';
+        this.thinkingAndMainAnswerParts = computed(() => this.splitContentIntoThinkingAndMainAnswer(this.assistantMessageContext()), ...(ngDevMode ? [{ debugName: "thinkingAndMainAnswerParts" }] : []));
         // Expand when we initially set the message loading flag, without overwriting the value
         // any other time
         effect(() => {
@@ -199,10 +196,6 @@ class AiChatAssistantMessageComponent {
         // 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);
@@ -223,49 +216,116 @@ class AiChatAssistantMessageComponent {
                 ? gettext('Hide reasoning')
                 : gettext('Show reasoning');
     }
-    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
+    getToolName(part) {
+        return part.type === 'tool-input-streaming' ||
+            part.type === 'tool-executing' ||
+            part.type === 'tool-result'
+            ? part.toolName
+            : undefined;
+    }
+    experimental_nonFinalStepTextDisplay(ctx) {
+        // For now be conservative with the old behaviour, but hope to change this once we've got working really smoothly.
+        return ctx.config?.experimental_nonFinalStepTextDisplay || 'main-answer';
+    }
+    /**
+     * Splits the assistant message content into two arrays: thinking content and main answer content.
+     * This also removes hidden tools.
+     *
+     * If using the experimental rendering modes, main answer content is text in the final step (if conditions are met) plus any tool calls configured to be shown with the main answer.
+     * Thinking content is everything else (reasoning, earlier text, tool calls not shown with main answer).
+     *
+     * @param ctx The context for the assistant message.
+     * @return An object with thinkingParts and mainAnswerParts arrays.
+     */
+    splitContentIntoThinkingAndMainAnswer(ctx) {
+        // Remove hidden tools
+        let content = ctx.message?.content || [];
+        if (Object.values(ctx.config?.toolCallConfig || {}).some(c => c?.isHidden)) {
+            content = (ctx.message?.content || []).filter(part => !ctx.config?.toolCallConfig?.[this.getToolName(part) || '']?.isHidden);
+        }
+        // Putting this check here keeps things safe by ensuring there is no chance of any rendering differences
+        // during streaming unless in one of the experimental modes. This means the rest of this method only applies
+        // to the experimental rendering.
+        if (this.experimental_nonFinalStepTextDisplay(ctx) === 'main-answer') {
+            return { thinkingParts: [], mainAnswerParts: content };
+        }
+        const { finalStepStart, finalStepHasText } = this.findFinalStepWithText(content);
+        const hasToolCalls = content.some(part => part.type === 'tool-input-streaming' ||
+            part.type === 'tool-executing' ||
+            part.type === 'tool-result');
+        // Since we don't bother with a step-start at index 0 for the first step, add one
+        const stepCount = content.filter((part, index) => index > 0 && part.type === 'step-start').length + 1;
+        // 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;
+        const shouldShowLastTextAsMainAnswer = finalStepHasText &&
+            finalStepStart !== -1 &&
+            !hasToolCalls &&
+            (!ctx.isMessageLoading || stepCount >= (ctx.config?.experimental_expectedStepCount || 2));
+        if (!shouldShowLastTextAsMainAnswer) {
+            return { thinkingParts: content, mainAnswerParts: [] };
         }
-        return '';
+        const thinkingParts = [];
+        const mainAnswerParts = [];
+        // Split the content: final step and promoted tool calls go to main answer, everything else to thinking
+        content.forEach((part, index) => {
+            const isPromotedToolCall = ctx.config?.toolCallConfig?.[this.getToolName(part) || '']?.isShownWithMainAnswer;
+            // This ensures promoted tool calls never go to the collapseable thinking area
+            if (index >= finalStepStart || isPromotedToolCall) {
+                mainAnswerParts.push(part);
+            }
+            else {
+                thinkingParts.push(part);
+            }
+        });
+        return { thinkingParts, mainAnswerParts };
     }
-    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;
+    /**
+     * Scans backwards through the content parts to find the step-start index for the last step
+     * that contains at least one text part. Skips trailing empty steps (step-start with no text after).
+     *
+     * @returns `finalStepStart` — index of the step-start part, or 0 if content belongs to the implicit first step.
+     *          `finalStepHasText` — whether a step with text was found at all.
+     */
+    findFinalStepWithText(content) {
+        let finalStepStart = 0;
+        let finalStepHasText = false;
+        for (let i = content.length - 1; i >= 0; i--) {
+            if (content[i].type === 'text') {
+                finalStepHasText = true;
+            }
+            if (content[i].type === 'step-start') {
+                if (finalStepHasText) {
+                    finalStepStart = i;
+                    break;
+                }
+                else if (i === content.length - 1) {
+                    // Trailing empty step-start — keep looking
+                    continue;
+                }
+                else {
+                    // step-start found but no text in that step
+                    finalStepStart = -1;
+                    break;
+                }
+            }
+        }
+        return { finalStepStart, finalStepHasText };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AiChatAssistantMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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 reasoning section' | translate }}\"\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    @let ariaLabel =\n      'Reasoning for message number {{ number }}' | translate: { number: ctx.messageDisplayIndex };\n    <div\n      class=\"collapse\"\n      [attr.aria-label]=\"ariaLabel\"\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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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 parts = ctx.message.content;\n@let _config = ctx.config;\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 contentSplit = thinkingAndMainAnswerParts();\n@let nonFinalStepTextDisplay = experimental_nonFinalStepTextDisplay(ctx);\n\n<!-- Thinking steps section - holds reasoning, text from non-final steps, and standard/non-artifact tool calls -->\n\n@if (contentSplit.thinkingParts.length > 0) {\n  <div\n    class=\"m-b-8 text-muted\"\n    [class.thinking-block]=\"nonFinalStepTextDisplay === 'collapsible-thinking-block'\"\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 reasoning section' | translate }}\"\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    @let ariaLabel =\n      'Reasoning for message number {{ number }}' | translate: { number: ctx.messageDisplayIndex };\n    <div\n      class=\"collapse\"\n      [attr.aria-label]=\"ariaLabel\"\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 (part of contentSplit.thinkingParts; track $index) {\n          @if (part.type !== 'step-start' || $index > 0) {\n            <c8y-ai-chat-assistant-part\n              [part]=\"part\"\n              [assistantMessageContext]=\"ctx\"\n              [displayAsPartOfMainAnswer]=\"nonFinalStepTextDisplay !== 'muted-main-answer'\"\n            ></c8y-ai-chat-assistant-part>\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Main answer area contains the text from the final step, and \n any promoted tool calls which are too important to be hidden in the collapeable thinking area -->\n<div\n  class=\"message-content\"\n  data-cy=\"ai-main-answer-content\"\n>\n  @for (part of contentSplit.mainAnswerParts; track $index) {\n    <c8y-ai-chat-assistant-part\n      [part]=\"part\"\n      [assistantMessageContext]=\"ctx\"\n      [displayAsPartOfMainAnswer]=\"true\"\n    ></c8y-ai-chat-assistant-part>\n  }\n</div>\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AiChatAssistantMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-ai-chat-assistant-message', standalone: true, imports: [
+            args: [{ selector: 'c8y-ai-chat-assistant-message', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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 reasoning section' | translate }}\"\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    @let ariaLabel =\n      'Reasoning for message number {{ number }}' | translate: { number: ctx.messageDisplayIndex };\n    <div\n      class=\"collapse\"\n      [attr.aria-label]=\"ariaLabel\"\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" }]
+                    ], template: "@let ctx = assistantMessageContext();\n@let parts = ctx.message.content;\n@let _config = ctx.config;\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 contentSplit = thinkingAndMainAnswerParts();\n@let nonFinalStepTextDisplay = experimental_nonFinalStepTextDisplay(ctx);\n\n<!-- Thinking steps section - holds reasoning, text from non-final steps, and standard/non-artifact tool calls -->\n\n@if (contentSplit.thinkingParts.length > 0) {\n  <div\n    class=\"m-b-8 text-muted\"\n    [class.thinking-block]=\"nonFinalStepTextDisplay === 'collapsible-thinking-block'\"\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 reasoning section' | translate }}\"\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    @let ariaLabel =\n      'Reasoning for message number {{ number }}' | translate: { number: ctx.messageDisplayIndex };\n    <div\n      class=\"collapse\"\n      [attr.aria-label]=\"ariaLabel\"\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 (part of contentSplit.thinkingParts; track $index) {\n          @if (part.type !== 'step-start' || $index > 0) {\n            <c8y-ai-chat-assistant-part\n              [part]=\"part\"\n              [assistantMessageContext]=\"ctx\"\n              [displayAsPartOfMainAnswer]=\"nonFinalStepTextDisplay !== 'muted-main-answer'\"\n            ></c8y-ai-chat-assistant-part>\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Main answer area contains the text from the final step, and \n any promoted tool calls which are too important to be hidden in the collapeable thinking area -->\n<div\n  class=\"message-content\"\n  data-cy=\"ai-main-answer-content\"\n>\n  @for (part of contentSplit.mainAnswerParts; track $index) {\n    <c8y-ai-chat-assistant-part\n      [part]=\"part\"\n      [assistantMessageContext]=\"ctx\"\n      [displayAsPartOfMainAnswer]=\"true\"\n    ></c8y-ai-chat-assistant-part>\n  }\n</div>\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 }] }] } });
 
 /**
@@ -346,7 +406,7 @@ class AiChatMessageComponent {
          */
         this.messageContentAriaLabel = computed(() => {
             const msg = this.message();
-            const time = msg?.timestamp ? new Date(msg.timestamp).toLocaleTimeString() : '';
+            const time = msg.role != 'system' && msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString() : '';
             let tpl;
             if (time) {
                 tpl =
@@ -361,11 +421,11 @@ class AiChatMessageComponent {
         }, ...(ngDevMode ? [{ debugName: "messageContentAriaLabel" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AiChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AiChatMessageComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ selector: 'c8y-ai-chat-message', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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 }] }] } });
 
 /**
@@ -519,11 +579,11 @@ class AiChatComponent {
         this.onCancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AiChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AiChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-ai-chat', imports: [
+            args: [{ selector: 'c8y-ai-chat', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         C8yTranslatePipe,
                         FormsModule,
                         TextareaAutoresizeDirective,