@c8y/ngx-components 1023.82.2 → 1023.82.4

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

@@ -1,12 +1,14 @@
 import { NgComponentOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, inject, input, computed, output, signal, viewChildren, ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
-import { GainsightService, DatePipe, ModalService, AlertService, C8Y_PLUGIN_CONTEXT_PATH, AppStateService, Status, LoadingComponent, EmptyStateComponent, C8yTranslateDirective, GuideDocsComponent, GuideHrefDirective, MarkdownToHtmlPipe, C8yTranslatePipe, ContextRouteService } from '@c8y/ngx-components';
+import { GainsightService, DatePipe, ModalService, AlertService, C8Y_PLUGIN_CONTEXT_PATH, AppStateService, Status, LoadingComponent, EmptyStateComponent, C8yTranslateDirective, GuideDocsComponent, GuideHrefDirective, MarkdownToHtmlPipe, C8yTranslatePipe, NumberPipe, ContextRouteService } from '@c8y/ngx-components';
 import { TranslateService } from '@ngx-translate/core';
 import { AIService, defaultPruneMessagesForAgent } from '@c8y/ngx-components/ai';
 import { gettext } from '@c8y/ngx-components/gettext';
 import { AiChatAssistantMessageComponent, AiChatComponent, AiChatSuggestionComponent, AiChatMessageComponent, AiChatMessageActionComponent } from '@c8y/ngx-components/ai/ai-chat';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
+import * as i1 from 'ngx-bootstrap/tooltip';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { WidgetConfigService, WidgetConfigFeedbackComponent } from '@c8y/ngx-components/context-dashboard';
 import { of, isObservable } from 'rxjs';
 
@@ -363,7 +365,7 @@ class AgentChatComponent {
          * if an agent of that name doesn't already exist. This is an alternative to the usual mechanism of configuring
          * agents using a `.agent.c8y.ts` file.
          */
-        this.autoCreateAgents = input(true, ...(ngDevMode ? [{ debugName: "autoCreateAgents" }] : []));
+        this.autoCreateAgents = input(false, ...(ngDevMode ? [{ debugName: "autoCreateAgents" }] : []));
         /** Variables to pass to the AI agent for placeholders specified in the agent's system prompt. */
         this.variables = input({}, ...(ngDevMode ? [{ debugName: "variables" }] : []));
         /**
@@ -405,6 +407,10 @@ class AgentChatComponent {
          * or to make what is sent to the agent different from what is rendered in the UI.
          */
         this.pruneMessagesForAgent = input(undefined, ...(ngDevMode ? [{ debugName: "pruneMessagesForAgent" }] : []));
+        /** When true, skips the agent health check on initialization.
+         * Use this when the component is used with the test endpoint (snapshot mode) where the agent
+         * does not need to exist on the backend. Default: false. */
+        this.skipHealthCheck = input(false, ...(ngDevMode ? [{ debugName: "skipHealthCheck" }] : []));
         /** Input that provides a previously-saved chat history snapshot to restore. */
         this.initialChatHistory = input(...(ngDevMode ? [undefined, { debugName: "initialChatHistory" }] : []));
         /** Suggestions that were restored from the initial chat history; used if `suggestions` input is not yet set. */
@@ -439,6 +445,11 @@ class AgentChatComponent {
         this.onToolResult = output();
         /** Notified when the user presses the positive or negative feedback buttons for an assistant message.*/
         this.onFeedback = output();
+        /**
+         * Emitted after any meaningful mutation of the messages list (send, finish, reprompt, reload, delete, reset).
+         * Allows the parent to react to conversation changes, e.g. to persist the conversation.
+         */
+        this.onMessagesChange = output();
         this._isLoading = signal(true, ...(ngDevMode ? [{ debugName: "_isLoading" }] : [])); // initially true while we do our initial ping of the agent health - prevents message flashing up before ready
         this.aiAgentManagerApplicationName = gettext('AI Agent Manager');
         /** Stores any error with the agent or backend microservice. This error message is already translated. */
@@ -448,16 +459,28 @@ class AgentChatComponent {
         /** Stores any detailed error messages from the backend. */
         this.agentHealthDetailedMessages = signal(undefined, ...(ngDevMode ? [{ debugName: "agentHealthDetailedMessages" }] : []));
         /**
-         * Stores any error that occurred during streaming the current message from the agent.
+         * Stores any error from LLM call.
          *
          * If possible this string is translated already or registered with `gettext`.
          * In practice, this may not be translated if it comes from the backend.
          */
-        this.agentStreamError = signal(undefined, ...(ngDevMode ? [{ debugName: "agentStreamError" }] : []));
+        this.agentRequestError = signal(undefined, ...(ngDevMode ? [{ debugName: "agentRequestError" }] : []));
         // A stream of AI messages representing the conversation.
         // NB: this is NOT part of the API of this component and may change in future
         // (e.g. we may improve AIMessage class)
         this.messages = signal([], ...(ngDevMode ? [{ debugName: "messages" }] : []));
+        /** Computed cumulative token usage across all messages in the conversation. */
+        this.cumulativeUsage = computed(() => {
+            const msgs = this.messages();
+            return msgs.reduce((acc, msg) => {
+                if ('usage' in msg && msg.usage) {
+                    acc.inputTokens += msg.usage.inputTokens || 0;
+                    acc.outputTokens += msg.usage.outputTokens || 0;
+                    acc.totalTokens += msg.usage.totalTokens || 0;
+                }
+                return acc;
+            }, { inputTokens: 0, outputTokens: 0, totalTokens: 0 });
+        }, ...(ngDevMode ? [{ debugName: "cumulativeUsage" }] : []));
         /**
          * Computed signal holding the last assistant message, which is the one which may be rapidly changing as we
          * stream it back. This allows us to update the UI reactively without affecting the rest of the message history.
@@ -514,25 +537,13 @@ class AgentChatComponent {
         return this.pluginContextPath || this.appState.currentApplication?.value?.contextPath || '';
     }
     async ngOnInit() {
-        // Restore chat history first, if provided
-        this._restoreChatHistory(this.initialChatHistory());
-        // Set the loading indicator to prevent interactions while we establish whether the agent is useable
-        this._isLoading.set(true);
-        try {
-            const agentHealth = await this.aiService.getAgentHealth(this.agentName, this.currentContextPath);
-            this._agentHealth.set(agentHealth);
-            this.agentHealthDetailedMessages.set(agentHealth.messages?.join('\n'));
-            this._agentHealthError.set(this.handleAgentError(agentHealth));
-            if (this.agentDefinition && this.agentDefinition.snapshot) {
-                this.createAgent();
-            }
-        }
-        catch (ex) {
-            console.warn('Error getting agent manager health:', ex);
-            this.userAnalyticsService.sendAgentUnavailable('agent-health-check-failed');
-            this._agentHealthError.set(this.translateService.instant(gettext('This tenant does not have the {{agentManager}} microservice. Please contact your administrator.'), { agentManager: this.translateService.instant(this.aiAgentManagerApplicationName) }));
+        await this.initializeChat();
+    }
+    async ngOnChanges(changes) {
+        if ((changes['agent'] && this.agent()) || changes['initialChatHistory']) {
+            this.resetMessages();
+            await this.initializeChat();
         }
-        this._isLoading.set(false);
     }
     /**
      * Save the current chat history and suggestions to an opaque, versioned, JSON-serializable snapshot of the chat history for persistence.
@@ -560,8 +571,9 @@ class AgentChatComponent {
             components[components.length - 1].setThinkingExpanded(false);
         }
         this.messages.set([...this.messages(), message]);
+        this.onMessagesChange.emit(this.messages());
         this._isLoading.set(true);
-        this.agentStreamError.set(undefined); // Clear any previous stream errors
+        this.agentRequestError.set(undefined); // Clear any previous stream errors
         this.abortController = new AbortController();
         this._clientToolOutputs = {};
         // Prepare messages for AI service, optionally including grounding message
@@ -576,60 +588,19 @@ class AgentChatComponent {
             };
             messagesForAI.splice(messagesForAI.length - 1, 0, groundingMsg);
         }
-        this.messages.set([...this.messages(), { role: 'assistant', content: [] }]);
-        const stream = await this.aiService.stream$(this.agentDefinition || this.agentName, messagesForAI, this.variables(), this.abortController, this.currentContextPath);
-        if (this.assistantSubscription) {
-            this.assistantSubscription.unsubscribe();
+        const currentAssistantMessage = {
+            role: 'assistant',
+            content: []
+        };
+        this.messages.set([...this.messages(), currentAssistantMessage]);
+        // Branch based on agent type: object agents use a single non-streaming request,
+        // text agents use SSE streaming
+        if (this.agentDefinition?.definition.type === 'object') {
+            await this._sendObjectMessage(currentAssistantMessage, messagesForAI);
+        }
+        else {
+            await this._sendStreamMessage(messagesForAI);
         }
-        this.assistantSubscription = stream.subscribe({
-            next: async (response) => {
-                if (response?.changedPart?.type === 'response-metadata') {
-                    if (response.changedPart.model) {
-                        this.model = response.changedPart.model;
-                    }
-                    if (response.changedPart.systemPrompt) {
-                        this.systemPrompt = response.changedPart.systemPrompt;
-                    }
-                }
-                else {
-                    try {
-                        await this.processAgentMessage(response.message, response.changedPart);
-                    }
-                    catch (error) {
-                        console.error('Error processing agent message:', error, response.changedPart, response.message);
-                        this.cancel();
-                        const errorMessage = error instanceof Error
-                            ? error.message
-                            : gettext('An error occurred while processing the response from the AI agent.');
-                        this.agentStreamError.set(errorMessage);
-                    }
-                }
-            },
-            complete: () => {
-                if (this._isLoading()) {
-                    // Should never happen, but worth knowing if it does (indicates bug in processAgentMessage)
-                    console.error('AI response stream completed but message loading indicator was not reset');
-                }
-            },
-            error: async (error) => {
-                // Currently errors from the AIService are often a big JSON with no human-friendly message anywhere
-                // (e.g. {error:{error:{statusCode:400, name:"AI-APICallError", ...}},
-                // so we can only show the detail in the console and have to give a non-informative error to the user;
-                // but if the backend could add a user-friendly "message" we could render that
-                console.error('Error in AI stream:', error);
-                const errorMessage = typeof error === 'string'
-                    ? error
-                    : error?.message || gettext('An error occurred while communicating with the AI agent.');
-                this.agentStreamError.set(errorMessage);
-                // Remove the empty assistant message that was added
-                const messages = this.messages();
-                if (messages[messages.length - 1]?.role === 'assistant') {
-                    this.messages.set(messages.slice(0, -1));
-                }
-                this._isLoading.set(false);
-                this.userAnalyticsService.sendAssistantMessageError(errorMessage, this.messages(), await this.getAnalyticsMetadataContext());
-            }
-        });
     }
     ngOnDestroy() {
         this.cancel();
@@ -646,6 +617,7 @@ class AgentChatComponent {
                     messageCount: this.messages().length - index - 1
                 }), Status.DANGER, { cancel: gettext('Cancel'), ok: gettext('Delete and replace') });
                 this.messages.set(this.messages().slice(0, index));
+                this.onMessagesChange.emit(this.messages());
                 this.prompt = userMessage.content;
             }
             catch (e) {
@@ -670,6 +642,7 @@ class AgentChatComponent {
         const userMessage = this.messages()[index - 1];
         if (index > -1) {
             this.messages.set(this.messages().slice(0, index - 1));
+            this.onMessagesChange.emit(this.messages());
             this.sendMessage({
                 role: 'user',
                 content: userMessage.content,
@@ -678,13 +651,50 @@ class AgentChatComponent {
         }
     }
     cancel() {
+        const abortMessage = this.translateService.instant(gettext('AI response cancelled.'));
         if (this.abortController) {
-            this.abortController.abort();
+            this.abortController.abort(abortMessage);
         }
         if (this.assistantSubscription) {
             this.assistantSubscription.unsubscribe();
         }
         this._isLoading.set(false);
+        const lastMessage = this.messages()[this.messages().length - 1];
+        if (lastMessage && lastMessage.role === 'assistant' && !lastMessage.content) {
+            this.messages.set(this.messages().slice(0, -1));
+            this.onMessagesChange.emit(this.messages());
+            // if user aborts sending message immediately, before abort controller is instantiated,
+            // error message won't be set and we need to do it manually here
+            if (!this.agentRequestError()) {
+                this.agentRequestError.set(abortMessage);
+            }
+        }
+    }
+    /** Clears all messages and cancels any in-flight stream. */
+    resetMessages() {
+        this.cancel();
+        this.messages.set([]);
+        this.onMessagesChange.emit(this.messages());
+    }
+    /** Removes the last user message and all assistant messages that follow it from the conversation. */
+    deleteLastExchange() {
+        const msgs = this.messages();
+        if (msgs.length === 0)
+            return;
+        // Find the index of the last user message
+        let lastUserIndex = -1;
+        for (let i = msgs.length - 1; i >= 0; i--) {
+            if (msgs[i].role === 'user') {
+                lastUserIndex = i;
+                break;
+            }
+        }
+        // If no user message found, do nothing
+        if (lastUserIndex === -1)
+            return;
+        // Remove from the last user message onwards
+        this.messages.set(msgs.slice(0, lastUserIndex));
+        this.onMessagesChange.emit(this.messages());
     }
     /**
      * Overrides the output of a specific tool result (in the current assistant message), including optionally indicating that an error occurred.
@@ -717,6 +727,16 @@ class AgentChatComponent {
         this._isLoading.set(false);
     }
     // Private methods go here:
+    async initializeChat() {
+        this._restoreChatHistory(this.initialChatHistory());
+        if (this.skipHealthCheck()) {
+            this._agentHealthError.set(undefined);
+            this._isLoading.set(false);
+        }
+        else {
+            await this.checkAgentHealth();
+        }
+    }
     /** Restore chat history from a previously-saved snapshot. Does nothing if the component already has some messages. */
     _restoreChatHistory(history) {
         if (!history)
@@ -729,6 +749,25 @@ class AgentChatComponent {
         this.messages.set(restored.messages);
         this._restoredSuggestions = restored.suggestions;
     }
+    async checkAgentHealth() {
+        // Set the loading indicator to prevent interactions while we establish whether the agent is useable
+        this._isLoading.set(true);
+        try {
+            const agentHealth = await this.aiService.getAgentHealth(this.agentName, this.currentContextPath);
+            this._agentHealth.set(agentHealth);
+            this.agentHealthDetailedMessages.set(agentHealth.messages?.join('\n'));
+            this._agentHealthError.set(this.handleAgentError(agentHealth));
+            if (this.agentDefinition && this.agentDefinition.snapshot) {
+                this.createAgent();
+            }
+        }
+        catch (ex) {
+            console.warn('Error getting agent manager health:', ex);
+            this.userAnalyticsService.sendAgentUnavailable('agent-health-check-failed');
+            this._agentHealthError.set(this.translateService.instant(gettext('This tenant does not have the {{agentManager}} microservice. Please contact your administrator.'), { agentManager: this.translateService.instant(this.aiAgentManagerApplicationName) }));
+        }
+        this._isLoading.set(false);
+    }
     async getAnalyticsMetadataContext() {
         return await this.userAnalyticsService.getAnalyticsMetadataContext(this.agentName, this.agentDefinition, this.userAnalyticsContext(), this.model, this.systemPrompt);
     }
@@ -835,6 +874,8 @@ class AgentChatComponent {
             }
         }
         if (updatedAssistantMsg.finishReason === 'stop') {
+            currentAssistantMsg.usage = updatedAssistantMsg.usage;
+            this.onMessagesChange.emit(this.messages());
             this.onMessageFinish.emit(currentAssistantMsg);
             void this.getAnalyticsMetadataContext()
                 .then(analyticsContext => {
@@ -855,8 +896,112 @@ class AgentChatComponent {
             }
         }
     }
+    /** Handles sending a message to a text-type agent via SSE streaming. */
+    async _sendStreamMessage(messagesForAI) {
+        const stream = await this.aiService.stream$(this.agentDefinition || this.agentName, messagesForAI, this.variables(), this.abortController, this.currentContextPath);
+        if (this.assistantSubscription) {
+            this.assistantSubscription.unsubscribe();
+        }
+        this.assistantSubscription = stream.subscribe({
+            next: async (response) => {
+                if (response?.changedPart?.type === 'response-metadata') {
+                    if (response.changedPart.model) {
+                        this.model = response.changedPart.model;
+                    }
+                    if (response.changedPart.systemPrompt) {
+                        this.systemPrompt = response.changedPart.systemPrompt;
+                    }
+                }
+                else {
+                    try {
+                        await this.processAgentMessage(response.message, response.changedPart);
+                    }
+                    catch (error) {
+                        console.error('Error processing agent message:', error, response.changedPart, response.message);
+                        this.cancel();
+                        const errorMessage = error instanceof Error
+                            ? error.message
+                            : gettext('An error occurred while processing the response from the AI agent.');
+                        this.agentRequestError.set(errorMessage);
+                    }
+                }
+            },
+            complete: () => {
+                if (this._isLoading()) {
+                    // Should never happen, but worth knowing if it does (indicates bug in processAgentMessage)
+                    console.error('AI response stream completed but message loading indicator was not reset');
+                }
+            },
+            error: async (error) => {
+                // Currently errors from the AIService are often a big JSON with no human-friendly message anywhere
+                // (e.g. {error:{error:{statusCode:400, name:"AI-APICallError", ...}},
+                // so we can only show the detail in the console and have to give a non-informative error to the user;
+                // but if the backend could add a user-friendly "message" we could render that
+                console.error('Error in AI stream:', error);
+                const errorMessage = typeof error === 'string'
+                    ? error
+                    : error?.message || gettext('An error occurred while communicating with the AI agent.');
+                this.agentRequestError.set(errorMessage);
+                // Remove the empty assistant message that was added
+                const messages = this.messages();
+                if (messages[messages.length - 1]?.role === 'assistant') {
+                    this.messages.set(messages.slice(0, -1));
+                    this.onMessagesChange.emit(this.messages());
+                }
+                this._isLoading.set(false);
+                this.userAnalyticsService.sendAssistantMessageError(errorMessage, this.messages(), await this.getAnalyticsMetadataContext());
+            }
+        });
+    }
+    /** Handles sending a message to an object-type agent via a single non-streaming request.
+     * The response JSON is rendered as a fenced code block in the assistant message.
+     */
+    async _sendObjectMessage(currentAssistantMessage, messagesForAI) {
+        try {
+            const response = await this.aiService.callObjectAgent(this.agentDefinition, messagesForAI, this.variables(), this.abortController);
+            const jsonContent = JSON.stringify(response.object ?? response, null, 2);
+            currentAssistantMessage.content = [{ type: 'object', jsonContent }];
+            currentAssistantMessage.timestamp = new Date().toISOString();
+            currentAssistantMessage.finishReason = 'stop';
+            if (response.totalUsage) {
+                currentAssistantMessage.usage = {
+                    inputTokens: response.totalUsage.inputTokens,
+                    outputTokens: response.totalUsage.outputTokens,
+                    totalTokens: response.totalUsage.totalTokens
+                };
+            }
+            this._isLoading.set(false);
+            this.messages.set([...this.messages()]);
+            this.onMessagesChange.emit(this.messages());
+            this.onMessageFinish.emit(currentAssistantMessage);
+            void this.getAnalyticsMetadataContext()
+                .then(analyticsContext => {
+                this.userAnalyticsService.sendAssistantMessageComplete(currentAssistantMessage, this.messages(), analyticsContext);
+            })
+                .catch(error => {
+                console.error('Error sending analytics:', error);
+            });
+        }
+        catch (error) {
+            console.error('Error in object agent request:', error);
+            const errorMessage = typeof error === 'string'
+                ? error
+                : error?.message || gettext('An error occurred while communicating with the AI agent.');
+            this.agentRequestError.set(errorMessage);
+            // Remove the empty assistant message that was added
+            const messages = this.messages();
+            if (messages[messages.length - 1] === currentAssistantMessage) {
+                this.messages.set(messages.slice(0, -1));
+            }
+            this.onMessagesChange.emit(this.messages());
+            this._isLoading.set(false);
+        }
+        finally {
+            this._isLoading.set(false);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AgentChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AgentChatComponent, isStandalone: true, selector: "c8y-agent-chat", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, chatConfig: { classPropertyName: "chatConfig", publicName: "chatConfig", isSignal: true, isRequired: false, transformFunction: null }, welcomeTemplate: { classPropertyName: "welcomeTemplate", publicName: "welcomeTemplate", isSignal: true, isRequired: false, transformFunction: null }, autoCreateAgents: { classPropertyName: "autoCreateAgents", publicName: "autoCreateAgents", isSignal: true, isRequired: false, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: true, isRequired: false, transformFunction: null }, assistantMessageComponent: { classPropertyName: "assistantMessageComponent", publicName: "assistantMessageComponent", isSignal: true, isRequired: false, transformFunction: null }, assistantMessageDisplayConfig: { classPropertyName: "assistantMessageDisplayConfig", publicName: "assistantMessageDisplayConfig", isSignal: true, isRequired: false, transformFunction: null }, preprocessAgentMessage: { classPropertyName: "preprocessAgentMessage", publicName: "preprocessAgentMessage", isSignal: true, isRequired: false, transformFunction: null }, pruneMessagesForAgent: { classPropertyName: "pruneMessagesForAgent", publicName: "pruneMessagesForAgent", isSignal: true, isRequired: false, transformFunction: null }, initialChatHistory: { classPropertyName: "initialChatHistory", publicName: "initialChatHistory", isSignal: true, isRequired: false, transformFunction: null }, groundingContextProvider: { classPropertyName: "groundingContextProvider", publicName: "groundingContextProvider", isSignal: true, isRequired: false, transformFunction: null }, userAnalyticsContext: { classPropertyName: "userAnalyticsContext", publicName: "userAnalyticsContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMessageFinish: "onMessageFinish", onToolResult: "onToolResult", onFeedback: "onFeedback" }, viewQueries: [{ propertyName: "assistantMessageComponents", predicate: AiChatAssistantMessageComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let agentHealthErrorMsg = _agentHealthError();\n@if (agentHealthErrorMsg) {\n  @if (isLoadingAiResponse()) {\n    <c8y-loading class=\"m-auto\"></c8y-loading>\n  } @else {\n    <c8y-ui-empty-state\n      class=\"m-auto\"\n      [icon]=\"'settings'\"\n      [title]=\"'AI agent is not available.' | translate\"\n    >\n      <span>{{ agentHealthErrorMsg }}</span>\n\n      @if (canCreate) {\n        <div class=\"text-center m-t-16 m-b-16\">\n          <button\n            class=\"btn btn-primary\"\n            (click)=\"createAgent()\"\n          >\n            {{ 'Create agent' | translate }}\n          </button>\n        </div>\n      } @else {\n        <p\n          class=\"text-pre-wrap m-t-8\"\n          data-cy=\"agent-health-detailed-messages\"\n        >\n          <small>{{ agentHealthDetailedMessages() }}</small>\n        </p>\n      }\n\n      <p c8y-guide-docs>\n        <small\n          translate\n          ngNonBindable\n        >\n          Find out more in the\n          <a c8y-guide-href=\"/docs/ai\">user documentation</a>.\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  }\n}\n\n@if (!agentHealthErrorMsg) {\n  <c8y-ai-chat\n    (onMessage)=\"sendMessage($event)\"\n    [isLoading]=\"isLoadingAiResponse()\"\n    (onCancel)=\"cancel()\"\n    [config]=\"chatConfig() ?? {}\"\n    [prompt]=\"prompt\"\n    [suggestionsTemplate]=\"suggestionsRef\"\n    [welcomeTemplate]=\"welcomeTemplate()\"\n  >\n    @let messages$ = messages();\n    @for (message of messages$; track $index; let i = $index) {\n      <c8y-ai-chat-message [message]=\"message\">\n        @if (message.role !== 'user' && model) {\n          <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues. It's quite helpful to know the model. -->\n          <span\n            class=\"hidden-copy-label\"\n            aria-hidden=\"true\"\n          >\n            {{ `(Using model: ${model})` }}</span\n          >\n        }\n\n        @if (message.role === 'user') {\n          <div\n            class=\"message-content\"\n            data-cy=\"user-message-content\"\n            [innerHTML]=\"message.content | markdownToHtml | async\"\n          ></div>\n        } @else if (\n          message.role === 'assistant' && isLoadingAiResponse() && i === messages$.length - 1\n        ) {\n          <div>\n            <!-- Last assistant message uses reactive computed context -->\n            <ng-container\n              [ngComponentOutlet]=\"assistantMessageComponent()\"\n              [ngComponentOutletInputs]=\"{ assistantMessageContext: lastAssistantMessageContext() }\"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            [ngComponentOutlet]=\"assistantMessageComponent()\"\n            [ngComponentOutletInputs]=\"{\n              assistantMessageContext: {\n                message: message,\n                config: assistantMessageDisplayConfig(),\n                isMessageLoading: isLoadingAiResponse() && i === messages$.length - 1,\n                messageDisplayIndex: messages$.length - 1 - i\n              }\n            }\"\n          ></ng-container>\n        }\n\n        @let isLastMessage = i === messages$.length - 1;\n\n        @if (message.role === 'user') {\n          <c8y-ai-chat-message-action\n            icon=\"pencil\"\n            [tooltip]=\"'Edit and resend this message' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"reprompt(message)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'assistant' && i > 0 && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-up\"\n            [tooltip]=\"'This is useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"rate(message, true)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'assistant' && i > 0 && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-down\"\n            [tooltip]=\"'This is not useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"rate(message, false)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        <!-- Only allow regenerating the last message, otherwise we could be deleting a lot of useful message history -->\n        @if (message.role === 'assistant' && i > 0 && isLastMessage && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"refresh\"\n            [tooltip]=\"'Regenerate this response' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"reload(message)\"\n          ></c8y-ai-chat-message-action>\n        }\n      </c8y-ai-chat-message>\n    }\n\n    @let agentErrorMsg = agentStreamError();\n    @if (agentErrorMsg) {\n      <c8y-ai-chat-message [message]=\"{ role: 'assistant', content: agentErrorMsg }\">\n        <div\n          class=\"alert alert-danger d-flex a-i-center gap-8\"\n          role=\"alert\"\n        >\n          <i\n            class=\"c8y-icon c8y-icon-warning text-danger\"\n            aria-hidden=\"true\"\n          ></i>\n          <!-- Since errors come from the backend the only translation is for the fallback error message supplied by the UI. -->\n          <div class=\"flex-grow text-pre-wrap\">{{ agentErrorMsg | translate }}</div>\n        </div>\n      </c8y-ai-chat-message>\n    }\n\n    <ng-template #suggestionsRef>\n      @if (!isLoadingAiResponse()) {\n        <!-- As soon as we have any suggestions (even empty) these take priority over what we restored from history -->\n        @let activeSuggestions = suggestions() === undefined ? _restoredSuggestions : suggestions();\n        @for (suggestion of activeSuggestions; track $index) {\n          <c8y-ai-chat-suggestion\n            [icon]=\"suggestion.icon || 'c8y-bulb'\"\n            [useAiButtons]=\"true\"\n            [prompt]=\"suggestion.prompt\"\n            [label]=\"suggestion.label ?? suggestion.prompt\"\n            (suggestionClicked)=\"sendMessage($event)\"\n            [disabled]=\"isLoadingAiResponse()\"\n          ></c8y-ai-chat-suggestion>\n        }\n      }\n    </ng-template>\n  </c8y-ai-chat>\n}\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fade-in-out{animation:fadeIn .2s ease-in}.fade-in-out.ng-leave-active{animation:fadeOut .2s ease-out}.hidden-copy-label{display:block;font-size:0;line-height:0;-webkit-user-select:text;user-select:text}\n"], dependencies: [{ kind: "component", type: AiChatComponent, selector: "c8y-ai-chat", inputs: ["isLoading", "disabled", "prompt", "suggestionsTemplate", "welcomeTemplate", "config"], outputs: ["onMessage", "onCancel"] }, { kind: "component", type: AiChatSuggestionComponent, selector: "c8y-ai-chat-suggestion", inputs: ["label", "prompt", "icon", "useAiButtons", "disabled"], outputs: ["suggestionClicked"] }, { kind: "component", type: AiChatMessageComponent, selector: "c8y-ai-chat-message", inputs: ["role", "message"] }, { kind: "component", type: AiChatMessageActionComponent, selector: "c8y-ai-chat-message-action", inputs: ["custom", "disabled", "tooltip", "icon"], outputs: ["actionClicked"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AgentChatComponent, isStandalone: true, selector: "c8y-agent-chat", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, chatConfig: { classPropertyName: "chatConfig", publicName: "chatConfig", isSignal: true, isRequired: false, transformFunction: null }, welcomeTemplate: { classPropertyName: "welcomeTemplate", publicName: "welcomeTemplate", isSignal: true, isRequired: false, transformFunction: null }, autoCreateAgents: { classPropertyName: "autoCreateAgents", publicName: "autoCreateAgents", isSignal: true, isRequired: false, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: true, isRequired: false, transformFunction: null }, assistantMessageComponent: { classPropertyName: "assistantMessageComponent", publicName: "assistantMessageComponent", isSignal: true, isRequired: false, transformFunction: null }, assistantMessageDisplayConfig: { classPropertyName: "assistantMessageDisplayConfig", publicName: "assistantMessageDisplayConfig", isSignal: true, isRequired: false, transformFunction: null }, preprocessAgentMessage: { classPropertyName: "preprocessAgentMessage", publicName: "preprocessAgentMessage", isSignal: true, isRequired: false, transformFunction: null }, pruneMessagesForAgent: { classPropertyName: "pruneMessagesForAgent", publicName: "pruneMessagesForAgent", isSignal: true, isRequired: false, transformFunction: null }, skipHealthCheck: { classPropertyName: "skipHealthCheck", publicName: "skipHealthCheck", isSignal: true, isRequired: false, transformFunction: null }, initialChatHistory: { classPropertyName: "initialChatHistory", publicName: "initialChatHistory", isSignal: true, isRequired: false, transformFunction: null }, groundingContextProvider: { classPropertyName: "groundingContextProvider", publicName: "groundingContextProvider", isSignal: true, isRequired: false, transformFunction: null }, userAnalyticsContext: { classPropertyName: "userAnalyticsContext", publicName: "userAnalyticsContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMessageFinish: "onMessageFinish", onToolResult: "onToolResult", onFeedback: "onFeedback", onMessagesChange: "onMessagesChange" }, viewQueries: [{ propertyName: "assistantMessageComponents", predicate: AiChatAssistantMessageComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@let agentHealthErrorMsg = _agentHealthError();\n@if (agentHealthErrorMsg) {\n  @if (isLoadingAiResponse()) {\n    <c8y-loading class=\"m-auto\"></c8y-loading>\n  } @else {\n    <c8y-ui-empty-state\n      class=\"m-auto\"\n      [icon]=\"'settings'\"\n      [title]=\"'AI agent is not available.' | translate\"\n    >\n      <span>{{ agentHealthErrorMsg }}</span>\n\n      @if (canCreate) {\n        <div class=\"text-center m-t-16 m-b-16\">\n          <button\n            class=\"btn btn-primary\"\n            (click)=\"createAgent()\"\n          >\n            {{ 'Create agent' | translate }}\n          </button>\n        </div>\n      } @else {\n        <p\n          class=\"text-pre-wrap m-t-8\"\n          data-cy=\"agent-health-detailed-messages\"\n        >\n          <small>{{ agentHealthDetailedMessages() }}</small>\n        </p>\n      }\n\n      <p c8y-guide-docs>\n        <small\n          translate\n          ngNonBindable\n        >\n          Find out more in the\n          <a c8y-guide-href=\"/docs/ai\">user documentation</a>.\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  }\n}\n\n@if (!agentHealthErrorMsg) {\n  <c8y-ai-chat\n    (onMessage)=\"sendMessage($event)\"\n    [isLoading]=\"isLoadingAiResponse()\"\n    (onCancel)=\"cancel()\"\n    [config]=\"chatConfig() ?? {}\"\n    [prompt]=\"prompt\"\n    [suggestionsTemplate]=\"suggestionsRef\"\n    [welcomeTemplate]=\"welcomeTemplate()\"\n    [cumulativeUsage]=\"cumulativeUsage()\"\n  >\n    @let messages$ = messages();\n    @for (message of messages$; track $index; let i = $index) {\n      <c8y-ai-chat-message [message]=\"message\">\n        @if (message.role !== 'user' && model) {\n          <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues. It's quite helpful to know the model. -->\n          <span\n            class=\"hidden-copy-label\"\n            aria-hidden=\"true\"\n          >\n            {{ `(Using model: ${model})` }}</span\n          >\n        }\n\n        @if (message.role === 'user') {\n          <div\n            class=\"message-content\"\n            data-cy=\"user-message-content\"\n            [innerHTML]=\"message.content | markdownToHtml | async\"\n          ></div>\n        } @else if (\n          message.role === 'assistant' && isLoadingAiResponse() && i === messages$.length - 1\n        ) {\n          <div>\n            <!-- Last assistant message uses reactive computed context -->\n            <ng-container\n              [ngComponentOutlet]=\"assistantMessageComponent()\"\n              [ngComponentOutletInputs]=\"{ assistantMessageContext: lastAssistantMessageContext() }\"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            [ngComponentOutlet]=\"assistantMessageComponent()\"\n            [ngComponentOutletInputs]=\"{\n              assistantMessageContext: {\n                message: message,\n                config: assistantMessageDisplayConfig(),\n                isMessageLoading: isLoadingAiResponse() && i === messages$.length - 1,\n                messageDisplayIndex: messages$.length - 1 - i\n              }\n            }\"\n          ></ng-container>\n        }\n\n        @let isLastMessage = i === messages$.length - 1;\n\n        @if (message.role === 'user') {\n          <c8y-ai-chat-message-action\n            icon=\"pencil\"\n            [tooltip]=\"'Edit and resend this message' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"reprompt(message)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (\n          message.role === 'assistant' &&\n          i > 0 &&\n          chatConfig()?.showUsagePerMessage &&\n          message.usage\n        ) {\n          <c8y-ai-chat-message-action [custom]=\"true\">\n            <span\n              class=\"tag tag--info m-l-auto\"\n              [tooltip]=\"\n                'Input tokens: {{ input }} \\nOutput tokens: {{ output }}'\n                  | translate\n                    : {\n                        input: message.usage.inputTokens || 0 | c8yNumber: 'floor' : '1.0-0',\n                        output: message.usage.outputTokens || 0 | c8yNumber: 'floor' : '1.0-0'\n                      }\n              \"\n            >\n              {{ 'Tokens used: {{total}}' | translate: { total: message.usage.totalTokens || 0 |\n              c8yNumber: 'floor' : '1.0-0' } }}\n            </span>\n          </c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'assistant' && i > 0 && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-up\"\n            [tooltip]=\"'This is useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"rate(message, true)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'assistant' && i > 0 && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-down\"\n            [tooltip]=\"'This is not useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"rate(message, false)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (\n          message.role === 'assistant' &&\n          !isLoadingAiResponse() &&\n          chatConfig()?.showDeleteAction &&\n          isLastMessage\n        ) {\n          <c8y-ai-chat-message-action\n            icon=\"delete-bin\"\n            [tooltip]=\"'Delete last exchange' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"deleteLastExchange()\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        <!-- Only allow regenerating the last message, otherwise we could be deleting a lot of useful message history -->\n        @if (message.role === 'assistant' && i > 0 && isLastMessage && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"refresh\"\n            [tooltip]=\"'Regenerate this response' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"reload(message)\"\n          ></c8y-ai-chat-message-action>\n        }\n      </c8y-ai-chat-message>\n    }\n\n    @let agentErrorMsg = agentRequestError();\n    @if (agentErrorMsg) {\n      <c8y-ai-chat-message [message]=\"{ role: 'assistant', content: agentErrorMsg }\">\n        <div\n          class=\"alert alert-danger d-flex a-i-center gap-8\"\n          role=\"alert\"\n        >\n          <i\n            class=\"c8y-icon c8y-icon-warning text-danger\"\n            aria-hidden=\"true\"\n          ></i>\n          <!-- Since errors come from the backend the only translation is for the fallback error message supplied by the UI. -->\n          <div class=\"flex-grow text-pre-wrap\">{{ agentErrorMsg | translate }}</div>\n        </div>\n      </c8y-ai-chat-message>\n    }\n\n    <ng-template #suggestionsRef>\n      @if (!isLoadingAiResponse()) {\n        <!-- As soon as we have any suggestions (even empty) these take priority over what we restored from history -->\n        @let activeSuggestions = suggestions() === undefined ? _restoredSuggestions : suggestions();\n        @for (suggestion of activeSuggestions; track $index) {\n          <c8y-ai-chat-suggestion\n            [icon]=\"suggestion.icon || 'c8y-bulb'\"\n            [useAiButtons]=\"true\"\n            [prompt]=\"suggestion.prompt\"\n            [label]=\"suggestion.label ?? suggestion.prompt\"\n            (suggestionClicked)=\"sendMessage($event)\"\n            [disabled]=\"isLoadingAiResponse()\"\n          ></c8y-ai-chat-suggestion>\n        }\n      }\n    </ng-template>\n  </c8y-ai-chat>\n}\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fade-in-out{animation:fadeIn .2s ease-in}.fade-in-out.ng-leave-active{animation:fadeOut .2s ease-out}.hidden-copy-label{display:block;font-size:0;line-height:0;-webkit-user-select:text;user-select:text}\n"], dependencies: [{ kind: "component", type: AiChatComponent, selector: "c8y-ai-chat", inputs: ["isLoading", "disabled", "prompt", "suggestionsTemplate", "welcomeTemplate", "cumulativeUsage", "config"], outputs: ["onMessage", "onCancel"] }, { kind: "component", type: AiChatSuggestionComponent, selector: "c8y-ai-chat-suggestion", inputs: ["label", "prompt", "icon", "useAiButtons", "disabled"], outputs: ["suggestionClicked"] }, { kind: "component", type: AiChatMessageComponent, selector: "c8y-ai-chat-message", inputs: ["role", "message"] }, { kind: "component", type: AiChatMessageActionComponent, selector: "c8y-ai-chat-message-action", inputs: ["custom", "disabled", "tooltip", "icon"], outputs: ["actionClicked"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { 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: NumberPipe, name: "c8yNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AgentChatComponent, decorators: [{
             type: Component,
@@ -874,9 +1019,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         CollapseModule,
                         C8yTranslateDirective,
                         GuideDocsComponent,
-                        GuideHrefDirective
-                    ], template: "@let agentHealthErrorMsg = _agentHealthError();\n@if (agentHealthErrorMsg) {\n  @if (isLoadingAiResponse()) {\n    <c8y-loading class=\"m-auto\"></c8y-loading>\n  } @else {\n    <c8y-ui-empty-state\n      class=\"m-auto\"\n      [icon]=\"'settings'\"\n      [title]=\"'AI agent is not available.' | translate\"\n    >\n      <span>{{ agentHealthErrorMsg }}</span>\n\n      @if (canCreate) {\n        <div class=\"text-center m-t-16 m-b-16\">\n          <button\n            class=\"btn btn-primary\"\n            (click)=\"createAgent()\"\n          >\n            {{ 'Create agent' | translate }}\n          </button>\n        </div>\n      } @else {\n        <p\n          class=\"text-pre-wrap m-t-8\"\n          data-cy=\"agent-health-detailed-messages\"\n        >\n          <small>{{ agentHealthDetailedMessages() }}</small>\n        </p>\n      }\n\n      <p c8y-guide-docs>\n        <small\n          translate\n          ngNonBindable\n        >\n          Find out more in the\n          <a c8y-guide-href=\"/docs/ai\">user documentation</a>.\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  }\n}\n\n@if (!agentHealthErrorMsg) {\n  <c8y-ai-chat\n    (onMessage)=\"sendMessage($event)\"\n    [isLoading]=\"isLoadingAiResponse()\"\n    (onCancel)=\"cancel()\"\n    [config]=\"chatConfig() ?? {}\"\n    [prompt]=\"prompt\"\n    [suggestionsTemplate]=\"suggestionsRef\"\n    [welcomeTemplate]=\"welcomeTemplate()\"\n  >\n    @let messages$ = messages();\n    @for (message of messages$; track $index; let i = $index) {\n      <c8y-ai-chat-message [message]=\"message\">\n        @if (message.role !== 'user' && model) {\n          <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues. It's quite helpful to know the model. -->\n          <span\n            class=\"hidden-copy-label\"\n            aria-hidden=\"true\"\n          >\n            {{ `(Using model: ${model})` }}</span\n          >\n        }\n\n        @if (message.role === 'user') {\n          <div\n            class=\"message-content\"\n            data-cy=\"user-message-content\"\n            [innerHTML]=\"message.content | markdownToHtml | async\"\n          ></div>\n        } @else if (\n          message.role === 'assistant' && isLoadingAiResponse() && i === messages$.length - 1\n        ) {\n          <div>\n            <!-- Last assistant message uses reactive computed context -->\n            <ng-container\n              [ngComponentOutlet]=\"assistantMessageComponent()\"\n              [ngComponentOutletInputs]=\"{ assistantMessageContext: lastAssistantMessageContext() }\"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            [ngComponentOutlet]=\"assistantMessageComponent()\"\n            [ngComponentOutletInputs]=\"{\n              assistantMessageContext: {\n                message: message,\n                config: assistantMessageDisplayConfig(),\n                isMessageLoading: isLoadingAiResponse() && i === messages$.length - 1,\n                messageDisplayIndex: messages$.length - 1 - i\n              }\n            }\"\n          ></ng-container>\n        }\n\n        @let isLastMessage = i === messages$.length - 1;\n\n        @if (message.role === 'user') {\n          <c8y-ai-chat-message-action\n            icon=\"pencil\"\n            [tooltip]=\"'Edit and resend this message' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"reprompt(message)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'assistant' && i > 0 && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-up\"\n            [tooltip]=\"'This is useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"rate(message, true)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'assistant' && i > 0 && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-down\"\n            [tooltip]=\"'This is not useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"rate(message, false)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        <!-- Only allow regenerating the last message, otherwise we could be deleting a lot of useful message history -->\n        @if (message.role === 'assistant' && i > 0 && isLastMessage && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"refresh\"\n            [tooltip]=\"'Regenerate this response' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"reload(message)\"\n          ></c8y-ai-chat-message-action>\n        }\n      </c8y-ai-chat-message>\n    }\n\n    @let agentErrorMsg = agentStreamError();\n    @if (agentErrorMsg) {\n      <c8y-ai-chat-message [message]=\"{ role: 'assistant', content: agentErrorMsg }\">\n        <div\n          class=\"alert alert-danger d-flex a-i-center gap-8\"\n          role=\"alert\"\n        >\n          <i\n            class=\"c8y-icon c8y-icon-warning text-danger\"\n            aria-hidden=\"true\"\n          ></i>\n          <!-- Since errors come from the backend the only translation is for the fallback error message supplied by the UI. -->\n          <div class=\"flex-grow text-pre-wrap\">{{ agentErrorMsg | translate }}</div>\n        </div>\n      </c8y-ai-chat-message>\n    }\n\n    <ng-template #suggestionsRef>\n      @if (!isLoadingAiResponse()) {\n        <!-- As soon as we have any suggestions (even empty) these take priority over what we restored from history -->\n        @let activeSuggestions = suggestions() === undefined ? _restoredSuggestions : suggestions();\n        @for (suggestion of activeSuggestions; track $index) {\n          <c8y-ai-chat-suggestion\n            [icon]=\"suggestion.icon || 'c8y-bulb'\"\n            [useAiButtons]=\"true\"\n            [prompt]=\"suggestion.prompt\"\n            [label]=\"suggestion.label ?? suggestion.prompt\"\n            (suggestionClicked)=\"sendMessage($event)\"\n            [disabled]=\"isLoadingAiResponse()\"\n          ></c8y-ai-chat-suggestion>\n        }\n      }\n    </ng-template>\n  </c8y-ai-chat>\n}\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fade-in-out{animation:fadeIn .2s ease-in}.fade-in-out.ng-leave-active{animation:fadeOut .2s ease-out}.hidden-copy-label{display:block;font-size:0;line-height:0;-webkit-user-select:text;user-select:text}\n"] }]
-        }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], chatConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatConfig", required: false }] }], welcomeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "welcomeTemplate", required: false }] }], autoCreateAgents: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCreateAgents", required: false }] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: false }] }], assistantMessageComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantMessageComponent", required: false }] }], assistantMessageDisplayConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantMessageDisplayConfig", required: false }] }], preprocessAgentMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "preprocessAgentMessage", required: false }] }], pruneMessagesForAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "pruneMessagesForAgent", required: false }] }], initialChatHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialChatHistory", required: false }] }], groundingContextProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "groundingContextProvider", required: false }] }], userAnalyticsContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "userAnalyticsContext", required: false }] }], onMessageFinish: [{ type: i0.Output, args: ["onMessageFinish"] }], onToolResult: [{ type: i0.Output, args: ["onToolResult"] }], onFeedback: [{ type: i0.Output, args: ["onFeedback"] }], assistantMessageComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AiChatAssistantMessageComponent), { isSignal: true }] }] } });
+                        GuideHrefDirective,
+                        TooltipModule,
+                        NumberPipe
+                    ], template: "@let agentHealthErrorMsg = _agentHealthError();\n@if (agentHealthErrorMsg) {\n  @if (isLoadingAiResponse()) {\n    <c8y-loading class=\"m-auto\"></c8y-loading>\n  } @else {\n    <c8y-ui-empty-state\n      class=\"m-auto\"\n      [icon]=\"'settings'\"\n      [title]=\"'AI agent is not available.' | translate\"\n    >\n      <span>{{ agentHealthErrorMsg }}</span>\n\n      @if (canCreate) {\n        <div class=\"text-center m-t-16 m-b-16\">\n          <button\n            class=\"btn btn-primary\"\n            (click)=\"createAgent()\"\n          >\n            {{ 'Create agent' | translate }}\n          </button>\n        </div>\n      } @else {\n        <p\n          class=\"text-pre-wrap m-t-8\"\n          data-cy=\"agent-health-detailed-messages\"\n        >\n          <small>{{ agentHealthDetailedMessages() }}</small>\n        </p>\n      }\n\n      <p c8y-guide-docs>\n        <small\n          translate\n          ngNonBindable\n        >\n          Find out more in the\n          <a c8y-guide-href=\"/docs/ai\">user documentation</a>.\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  }\n}\n\n@if (!agentHealthErrorMsg) {\n  <c8y-ai-chat\n    (onMessage)=\"sendMessage($event)\"\n    [isLoading]=\"isLoadingAiResponse()\"\n    (onCancel)=\"cancel()\"\n    [config]=\"chatConfig() ?? {}\"\n    [prompt]=\"prompt\"\n    [suggestionsTemplate]=\"suggestionsRef\"\n    [welcomeTemplate]=\"welcomeTemplate()\"\n    [cumulativeUsage]=\"cumulativeUsage()\"\n  >\n    @let messages$ = messages();\n    @for (message of messages$; track $index; let i = $index) {\n      <c8y-ai-chat-message [message]=\"message\">\n        @if (message.role !== 'user' && model) {\n          <!-- Visually hidden label included when users copy-paste from the chat, e.g. to report issues. It's quite helpful to know the model. -->\n          <span\n            class=\"hidden-copy-label\"\n            aria-hidden=\"true\"\n          >\n            {{ `(Using model: ${model})` }}</span\n          >\n        }\n\n        @if (message.role === 'user') {\n          <div\n            class=\"message-content\"\n            data-cy=\"user-message-content\"\n            [innerHTML]=\"message.content | markdownToHtml | async\"\n          ></div>\n        } @else if (\n          message.role === 'assistant' && isLoadingAiResponse() && i === messages$.length - 1\n        ) {\n          <div>\n            <!-- Last assistant message uses reactive computed context -->\n            <ng-container\n              [ngComponentOutlet]=\"assistantMessageComponent()\"\n              [ngComponentOutletInputs]=\"{ assistantMessageContext: lastAssistantMessageContext() }\"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            [ngComponentOutlet]=\"assistantMessageComponent()\"\n            [ngComponentOutletInputs]=\"{\n              assistantMessageContext: {\n                message: message,\n                config: assistantMessageDisplayConfig(),\n                isMessageLoading: isLoadingAiResponse() && i === messages$.length - 1,\n                messageDisplayIndex: messages$.length - 1 - i\n              }\n            }\"\n          ></ng-container>\n        }\n\n        @let isLastMessage = i === messages$.length - 1;\n\n        @if (message.role === 'user') {\n          <c8y-ai-chat-message-action\n            icon=\"pencil\"\n            [tooltip]=\"'Edit and resend this message' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"reprompt(message)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (\n          message.role === 'assistant' &&\n          i > 0 &&\n          chatConfig()?.showUsagePerMessage &&\n          message.usage\n        ) {\n          <c8y-ai-chat-message-action [custom]=\"true\">\n            <span\n              class=\"tag tag--info m-l-auto\"\n              [tooltip]=\"\n                'Input tokens: {{ input }} \\nOutput tokens: {{ output }}'\n                  | translate\n                    : {\n                        input: message.usage.inputTokens || 0 | c8yNumber: 'floor' : '1.0-0',\n                        output: message.usage.outputTokens || 0 | c8yNumber: 'floor' : '1.0-0'\n                      }\n              \"\n            >\n              {{ 'Tokens used: {{total}}' | translate: { total: message.usage.totalTokens || 0 |\n              c8yNumber: 'floor' : '1.0-0' } }}\n            </span>\n          </c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'assistant' && i > 0 && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-up\"\n            [tooltip]=\"'This is useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"rate(message, true)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'assistant' && i > 0 && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-down\"\n            [tooltip]=\"'This is not useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"rate(message, false)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (\n          message.role === 'assistant' &&\n          !isLoadingAiResponse() &&\n          chatConfig()?.showDeleteAction &&\n          isLastMessage\n        ) {\n          <c8y-ai-chat-message-action\n            icon=\"delete-bin\"\n            [tooltip]=\"'Delete last exchange' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"deleteLastExchange()\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        <!-- Only allow regenerating the last message, otherwise we could be deleting a lot of useful message history -->\n        @if (message.role === 'assistant' && i > 0 && isLastMessage && !isLoadingAiResponse()) {\n          <c8y-ai-chat-message-action\n            icon=\"refresh\"\n            [tooltip]=\"'Regenerate this response' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (click)=\"reload(message)\"\n          ></c8y-ai-chat-message-action>\n        }\n      </c8y-ai-chat-message>\n    }\n\n    @let agentErrorMsg = agentRequestError();\n    @if (agentErrorMsg) {\n      <c8y-ai-chat-message [message]=\"{ role: 'assistant', content: agentErrorMsg }\">\n        <div\n          class=\"alert alert-danger d-flex a-i-center gap-8\"\n          role=\"alert\"\n        >\n          <i\n            class=\"c8y-icon c8y-icon-warning text-danger\"\n            aria-hidden=\"true\"\n          ></i>\n          <!-- Since errors come from the backend the only translation is for the fallback error message supplied by the UI. -->\n          <div class=\"flex-grow text-pre-wrap\">{{ agentErrorMsg | translate }}</div>\n        </div>\n      </c8y-ai-chat-message>\n    }\n\n    <ng-template #suggestionsRef>\n      @if (!isLoadingAiResponse()) {\n        <!-- As soon as we have any suggestions (even empty) these take priority over what we restored from history -->\n        @let activeSuggestions = suggestions() === undefined ? _restoredSuggestions : suggestions();\n        @for (suggestion of activeSuggestions; track $index) {\n          <c8y-ai-chat-suggestion\n            [icon]=\"suggestion.icon || 'c8y-bulb'\"\n            [useAiButtons]=\"true\"\n            [prompt]=\"suggestion.prompt\"\n            [label]=\"suggestion.label ?? suggestion.prompt\"\n            (suggestionClicked)=\"sendMessage($event)\"\n            [disabled]=\"isLoadingAiResponse()\"\n          ></c8y-ai-chat-suggestion>\n        }\n      }\n    </ng-template>\n  </c8y-ai-chat>\n}\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fade-in-out{animation:fadeIn .2s ease-in}.fade-in-out.ng-leave-active{animation:fadeOut .2s ease-out}.hidden-copy-label{display:block;font-size:0;line-height:0;-webkit-user-select:text;user-select:text}\n"] }]
+        }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], chatConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatConfig", required: false }] }], welcomeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "welcomeTemplate", required: false }] }], autoCreateAgents: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCreateAgents", required: false }] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: false }] }], assistantMessageComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantMessageComponent", required: false }] }], assistantMessageDisplayConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantMessageDisplayConfig", required: false }] }], preprocessAgentMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "preprocessAgentMessage", required: false }] }], pruneMessagesForAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "pruneMessagesForAgent", required: false }] }], skipHealthCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipHealthCheck", required: false }] }], initialChatHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialChatHistory", required: false }] }], groundingContextProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "groundingContextProvider", required: false }] }], userAnalyticsContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "userAnalyticsContext", required: false }] }], onMessageFinish: [{ type: i0.Output, args: ["onMessageFinish"] }], onToolResult: [{ type: i0.Output, args: ["onToolResult"] }], onFeedback: [{ type: i0.Output, args: ["onFeedback"] }], onMessagesChange: [{ type: i0.Output, args: ["onMessagesChange"] }], assistantMessageComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AiChatAssistantMessageComponent), { isSignal: true }] }] } });
 
 class WidgetAiChatSectionComponent {
     constructor() {
@@ -962,7 +1109,7 @@ class WidgetAiChatSectionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetAiChatSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: WidgetAiChatSectionComponent, isStandalone: true, selector: "c8y-widget-ai-chat-section", inputs: { loadComponentConfig: "loadComponentConfig", suggestions: "suggestions", agent: "agent", chatConfig: "chatConfig", useContextAsVariable: "useContextAsVariable", contextVariableName: "contextVariableName", variables: "variables", onToolResult: "onToolResult" }, ngImport: i0, template: "<c8y-widget-config-feedback>\n  <div\n    class=\"m-l-4 btn-ai btn-ai-hint btn-sm\"\n    [title]=\"'AI code assistant' | translate\"\n  >\n    <span></span>\n  </div>\n</c8y-widget-config-feedback>\n\n<c8y-agent-chat\n  #agentChat\n  [chatConfig]=\"chatConfig\"\n  [suggestions]=\"agentChat.isWelcoming() ? suggestions : []\"\n  [agent]=\"agent\"\n  [variables]=\"variables | async\"\n  (onToolResult)=\"toolResultHandler($event)\"\n  [preprocessAgentMessage]=\"_componentConfig().preprocessAgentMessage\"\n  [pruneMessagesForAgent]=\"_componentConfig().pruneMessagesForAgent\"\n  [assistantMessageDisplayConfig]=\"_componentConfig().assistantMessageDisplayConfig || {}\"\n></c8y-agent-chat>\n", dependencies: [{ kind: "component", type: AgentChatComponent, selector: "c8y-agent-chat", inputs: ["agent", "suggestions", "chatConfig", "welcomeTemplate", "autoCreateAgents", "variables", "assistantMessageComponent", "assistantMessageDisplayConfig", "preprocessAgentMessage", "pruneMessagesForAgent", "initialChatHistory", "groundingContextProvider", "userAnalyticsContext"], outputs: ["onMessageFinish", "onToolResult", "onFeedback"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: WidgetAiChatSectionComponent, isStandalone: true, selector: "c8y-widget-ai-chat-section", inputs: { loadComponentConfig: "loadComponentConfig", suggestions: "suggestions", agent: "agent", chatConfig: "chatConfig", useContextAsVariable: "useContextAsVariable", contextVariableName: "contextVariableName", variables: "variables", onToolResult: "onToolResult" }, ngImport: i0, template: "<c8y-widget-config-feedback>\n  <div\n    class=\"m-l-4 btn-ai btn-ai-hint btn-sm\"\n    [title]=\"'AI code assistant' | translate\"\n  >\n    <span></span>\n  </div>\n</c8y-widget-config-feedback>\n\n<c8y-agent-chat\n  #agentChat\n  [chatConfig]=\"chatConfig\"\n  [suggestions]=\"agentChat.isWelcoming() ? suggestions : []\"\n  [agent]=\"agent\"\n  [variables]=\"variables | async\"\n  (onToolResult)=\"toolResultHandler($event)\"\n  [preprocessAgentMessage]=\"_componentConfig().preprocessAgentMessage\"\n  [pruneMessagesForAgent]=\"_componentConfig().pruneMessagesForAgent\"\n  [assistantMessageDisplayConfig]=\"_componentConfig().assistantMessageDisplayConfig || {}\"\n></c8y-agent-chat>\n", dependencies: [{ kind: "component", type: AgentChatComponent, selector: "c8y-agent-chat", inputs: ["agent", "suggestions", "chatConfig", "welcomeTemplate", "autoCreateAgents", "variables", "assistantMessageComponent", "assistantMessageDisplayConfig", "preprocessAgentMessage", "pruneMessagesForAgent", "skipHealthCheck", "initialChatHistory", "groundingContextProvider", "userAnalyticsContext"], outputs: ["onMessageFinish", "onToolResult", "onFeedback", "onMessagesChange"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetAiChatSectionComponent, decorators: [{
             type: Component,