@c8y/ngx-components 1024.20.1 → 1024.21.3

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

@@ -1,18 +1,23 @@
 import { NgComponentOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, output, ChangeDetectionStrategy, Component, contentChildren, computed, signal, viewChildren, viewChild, Injector, Input } from '@angular/core';
-import { GainsightService, IconDirective, C8yTranslatePipe, DatePipe, ModalService, UserPreferencesService, AlertService, C8Y_PLUGIN_CONTEXT_PATH, AppStateService, Status, LoadingComponent, EmptyStateComponent, C8yTranslateDirective, GuideDocsComponent, GuideHrefDirective, MarkdownToHtmlPipe, NumberPipe, ContextRouteService } from '@c8y/ngx-components';
+import { Injectable, inject, input, output, ChangeDetectionStrategy, Component, signal, Injector, viewChild, effect, untracked, afterNextRender, contentChildren, computed, viewChildren, Input } from '@angular/core';
+import { GainsightService, IconDirective, C8yTranslatePipe, AlertService, DropdownFocusTrapDirective, EmptyStateComponent, HighlightComponent, InputGroupEditableComponent, LoadingComponent, PopoverConfirmComponent, DatePipe, ModalService, UserPreferencesService, C8Y_PLUGIN_CONTEXT_PATH, AppStateService, Status, C8yTranslateDirective, GuideDocsComponent, GuideHrefDirective, MarkdownToHtmlPipe, NumberPipe, ContextRouteService } from '@c8y/ngx-components';
 import { TranslateService } from '@ngx-translate/core';
-import { AIService, AiToolApprovalMemoryService, defaultPruneMessagesForAgent } from '@c8y/ngx-components/ai';
+import { defaultPruneMessagesForPersistence, toConversationMessages, AIService, AiToolApprovalMemoryService, fromConversationMessages, defaultPruneMessagesForAgent } from '@c8y/ngx-components/ai';
 import { gettext } from '@c8y/ngx-components/gettext';
 import { firstValueFrom, of, isObservable } from 'rxjs';
 import { AiChatActionComponent, AiChatAssistantMessageComponent, AiChatComponent, AiChatSuggestionComponent, AiChatMessageComponent, AiChatMessageActionComponent } from '@c8y/ngx-components/ai/ai-chat';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
-import * as i1$1 from 'ngx-bootstrap/tooltip';
+import * as i3 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i1 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { skip, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FetchClient } from '@c8y/client';
 import { WidgetConfigService, WidgetConfigFeedbackComponent } from '@c8y/ngx-components/context-dashboard';
 
 /** A stateless service used by agent-chat for managing chat history. Not public. */
@@ -129,7 +134,7 @@ class ChatHistoryService {
         if (messagesArray.some(msg => {
             if (!msg || typeof msg !== 'object' || !msg.role)
                 return true;
-            if (msg.role === 'assistant')
+            if (msg.role === 'assistant' || msg.role === 'tool')
                 return !Array.isArray(msg.content);
             return typeof msg.content !== 'string';
         })) {
@@ -351,6 +356,440 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ selector: 'c8y-agent-chat-tool-approval-mode', changeDetection: ChangeDetectionStrategy.OnPush, imports: [C8yTranslatePipe, IconDirective, BsDropdownModule, CdkTrapFocus], host: { class: 'd-contents' }, template: "@let autoLabel = 'Auto' | translate;\n@let manualLabel = 'Manual' | translate;\n<!-- Escape must close only the menu; unstopped it also closes the drawer hosting the chat. -->\n<div\n  class=\"dropdown\"\n  dropdown\n  [dropup]=\"true\"\n  #toolApprovalDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"toolApprovalDropdown.isOpen\"\n  (onHidden)=\"toolApprovalToggle.focus()\"\n  (keyup.escape)=\"toolApprovalDropdown.isOpen && $event.stopPropagation()\"\n  (keydown.escape)=\"toolApprovalDropdown.isOpen && $event.stopPropagation()\"\n>\n  <button\n    class=\"dropdown-toggle btn btn-clean btn-sm d-flex a-i-center gap-4\"\n    [title]=\"'Tool approval mode' | translate\"\n    [attr.aria-expanded]=\"toolApprovalDropdown.isOpen\"\n    type=\"button\"\n    data-cy=\"chat-tool-approval-mode\"\n    dropdownToggle\n    #toolApprovalToggle\n  >\n    <i\n      [c8yIcon]=\"globalToolApproval() ? 'bolt' : 'hand-paper-o'\"\n      aria-hidden=\"true\"\n    ></i>\n    <span>{{ globalToolApproval() ? autoLabel : manualLabel }}</span>\n    <i\n      c8yIcon=\"caret-down\"\n      aria-hidden=\"true\"\n    ></i>\n  </button>\n  <ul\n    class=\"dropdown-menu\"\n    [attr.aria-label]=\"'Tool approval mode' | translate\"\n    role=\"menu\"\n    *dropdownMenu\n  >\n    <li\n      [class.active]=\"!globalToolApproval()\"\n      role=\"none\"\n    >\n      <button\n        class=\"a-i-start\"\n        [attr.aria-checked]=\"!globalToolApproval()\"\n        role=\"menuitemradio\"\n        type=\"button\"\n        (click)=\"modeChange.emit(false)\"\n        data-cy=\"chat-tool-approval-manual\"\n      >\n        <i\n          [class.invisible]=\"globalToolApproval()\"\n          class=\"icon-16 text-primary\"\n          [c8yIcon]=\"'check'\"\n          aria-hidden=\"true\"\n        ></i>\n        <i\n          class=\"icon-16\"\n          [c8yIcon]=\"'hand-paper-o'\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>\n          {{ manualLabel }}\n          <small class=\"d-block text-muted\">\n            {{ 'Ask before running each tool' | translate }}\n          </small>\n        </span>\n      </button>\n    </li>\n    <li\n      [class.active]=\"globalToolApproval()\"\n      role=\"none\"\n    >\n      <button\n        class=\"a-i-start\"\n        [attr.aria-checked]=\"globalToolApproval()\"\n        role=\"menuitemradio\"\n        type=\"button\"\n        (click)=\"modeChange.emit(true)\"\n        data-cy=\"chat-tool-approval-auto\"\n      >\n        <i\n          class=\"text-primary icon-16\"\n          [class.invisible]=\"!globalToolApproval()\"\n          [c8yIcon]=\"'check'\"\n          aria-hidden=\"true\"\n        ></i>\n        <i\n          class=\"icon-16\"\n          [c8yIcon]=\"'bolt'\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>\n          {{ autoLabel }}\n          <small class=\"d-block text-muted\">\n            {{ 'Run tools without asking' | translate }}\n          </small>\n        </span>\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
         }], propDecorators: { globalToolApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalToolApproval", required: true }] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }] } });
 
+const PAGE_SIZE = 5;
+/** A request to the conversation storage API that the server rejected. */
+class ConversationRequestError extends Error {
+    constructor(message, status) {
+        super(message);
+        this.name = 'ConversationRequestError';
+        this.status = status;
+    }
+}
+/**
+ * Throws a `ConversationRequestError` for an error response, with the server's message if it gave
+ * one, or else the fallback message.
+ */
+async function throwIfFailed(response, fallbackMessage) {
+    if (response.status <= 300)
+        return;
+    let serverMessage;
+    try {
+        serverMessage = (await response.json())?.message;
+    }
+    catch {
+        // Not every error response has a JSON body, e.g. when a proxy rejected the request.
+    }
+    throw new ConversationRequestError(typeof serverMessage === 'string' && serverMessage ? serverMessage : fallbackMessage, response.status);
+}
+class ConversationService {
+    constructor() {
+        this.baseUrl = '/service/ai';
+        this.fetchClient = inject(FetchClient);
+    }
+    /**
+     * Lists the user's conversations, newest first.
+     *
+     * @param label Only return conversations carrying this label; all conversations when omitted.
+     * @param page Page to load, starting at 1.
+     * @param title Case-insensitive substring filter on the conversation title.
+     */
+    async list(label, page = 1, title) {
+        const params = new URLSearchParams({
+            pageSize: String(PAGE_SIZE),
+            currentPage: String(page),
+            withTotalPages: 'true'
+        });
+        if (label) {
+            params.set('label', label);
+        }
+        if (title) {
+            params.set('title', title);
+        }
+        const response = await this.fetchClient.fetch(`${this.baseUrl}/conversation?${params}`);
+        await throwIfFailed(response, gettext('Failed to load conversations.'));
+        const body = await response.json();
+        const { conversations, statistics } = body;
+        return {
+            res: response,
+            data: conversations ?? [],
+            paging: {
+                currentPage: statistics.currentPage,
+                pageSize: statistics.pageSize,
+                totalPages: statistics.totalPages ?? statistics.currentPage,
+                nextPage: body.next ? statistics.currentPage + 1 : undefined,
+                next: body.next ? () => this.list(label, statistics.currentPage + 1, title) : undefined
+            }
+        };
+    }
+    /**
+     * Loads a single conversation including its messages, which the list endpoint omits.
+     *
+     * @param id Identifier of the conversation to load.
+     */
+    async detail(id) {
+        const response = await this.fetchClient.fetch(`${this.baseUrl}/conversation/${encodeURIComponent(id)}`);
+        await throwIfFailed(response, gettext('Failed to load the conversation.'));
+        return response.json();
+    }
+    async create(payload) {
+        const response = await this.fetchClient.fetch(`${this.baseUrl}/conversation`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+        await throwIfFailed(response, gettext('Failed to create conversation.'));
+        return response.json();
+    }
+    async update(id, payload) {
+        const response = await this.fetchClient.fetch(`${this.baseUrl}/conversation/${encodeURIComponent(id)}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+        await throwIfFailed(response, gettext('Failed to update conversation.'));
+        return response.json();
+    }
+    async delete(id) {
+        const response = await this.fetchClient.fetch(`${this.baseUrl}/conversation/${encodeURIComponent(id)}`, { method: 'DELETE' });
+        await throwIfFailed(response, gettext('Failed to delete conversation.'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ConversationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ConversationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ConversationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ConversationPickerComponent {
+    constructor() {
+        this.loadMoreConversationsLabel = gettext('Load more…');
+        /**
+         * Label of the feature hosting the chat. Lists are filtered by it, new conversations get it, and
+         * it is added to a conversation continued here that does not have it yet. When not set, all of
+         * the user's conversations are listed.
+         */
+        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Name of the current agent — used as the title of a conversation without a text prompt. */
+        this.agentName = input('', ...(ngDevMode ? [{ debugName: "agentName" }] : /* istanbul ignore next */ []));
+        /** Optional pruner override forwarded from AgentChatComponent. */
+        this.pruneMessagesForPersistence = input(undefined, ...(ngDevMode ? [{ debugName: "pruneMessagesForPersistence" }] : /* istanbul ignore next */ []));
+        /** User clicked a conversation in the list — emitted with its messages loaded. */
+        this.conversationSelect = output();
+        /**
+         * The active conversation was deleted → parent should reset chat messages.
+         * Only emitted when the deleted conversation was the currently selected one.
+         */
+        this.conversationDeleted = output();
+        /**
+         * The currently active conversation — owned by this component. Its messages are deliberately not
+         * tracked here: the live message list lives in the parent chat and is passed in via `messages`.
+         */
+        this.selectedConversation = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedConversation" }] : /* istanbul ignore next */ []));
+        this.conversationPage = signal(null, ...(ngDevMode ? [{ debugName: "conversationPage" }] : /* istanbul ignore next */ []));
+        this.isLoadingConversations = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingConversations" }] : /* istanbul ignore next */ []));
+        this.isLoadingMore = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingMore" }] : /* istanbul ignore next */ []));
+        this.searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        this.deleteConfirmButtons = [
+            { label: gettext('Cancel'), action: () => Promise.resolve(false) },
+            { label: gettext('Delete'), status: 'danger', action: () => Promise.resolve(true) }
+        ];
+        /**
+         * Bumped whenever the chat switches to another conversation or starts a new one, so a request
+         * that was started before the switch can tell it must no longer change the selection.
+         */
+        this.selectionGeneration = 0;
+        /** Bumped by every list load, so only the latest one updates the list. */
+        this.listRequest = 0;
+        this.conversationService = inject(ConversationService);
+        this.alertService = inject(AlertService);
+        this.translateService = inject(TranslateService);
+        this.injector = inject(Injector);
+        this.historyToggle = viewChild('historyToggle', ...(ngDevMode ? [{ debugName: "historyToggle" }] : /* istanbul ignore next */ []));
+        // Reload conversations whenever the label changes (including initial render). The reload itself
+        // runs untracked: loadConversations() reads searchTerm() as an argument before its first await,
+        // and without untracked() that read would make this effect a second, non-debounced trigger for
+        // every keystroke in the search box, alongside the debounced _searchSubscription below.
+        this._labelEffect = effect(() => {
+            this.label();
+            untracked(() => void this.loadConversations());
+        }, ...(ngDevMode ? [{ debugName: "_labelEffect" }] : /* istanbul ignore next */ []));
+        // Debounced search reload when the user types.
+        this._searchSubscription = toObservable(this.searchTerm)
+            .pipe(skip(1), debounceTime(500), distinctUntilChanged(), takeUntilDestroyed())
+            .subscribe(() => void this.loadConversations());
+    }
+    /** Called by parent when a conversation is created or loaded, to sync this component's state. */
+    trackConversation(conv) {
+        this.selectionGeneration++;
+        this.selectedConversation.set(conv);
+        this.addToList(conv);
+    }
+    /** Called by parent when the chat is reset, to clear the active conversation. */
+    clearSelectedConversation() {
+        this.selectionGeneration++;
+        this.selectedConversation.set(undefined);
+        this.pendingConversationTitle = undefined;
+    }
+    /** Called by fork() in the parent to set a title prefix for the next new conversation. */
+    setPendingForkTitle(title) {
+        this.pendingConversationTitle = title;
+    }
+    /**
+     * Called by the parent after each assistant response to persist the conversation.
+     *
+     * The messages are passed in rather than read from an input, because the parent persists
+     * synchronously after updating its message signal — an input binding would still hold the
+     * previous value at that point, losing whatever the finished response just added to the last
+     * message, such as its timestamp and token usage.
+     *
+     * A failed save is reported to the user with an alert, so the returned promise never rejects.
+     *
+     * @param chatMessages The current messages of the chat, as the parent holds them.
+     */
+    async persistConversation(chatMessages) {
+        // The user can open another conversation or start a new one while the save is in flight.
+        const generation = this.selectionGeneration;
+        try {
+            const pruner = this.pruneMessagesForPersistence() ?? defaultPruneMessagesForPersistence;
+            const messages = toConversationMessages(pruner(chatMessages));
+            const pending = this.pendingCreate?.generation === generation ? this.pendingCreate.conversation : undefined;
+            const existing = this.selectedConversation() ?? (pending ? await pending : undefined);
+            if (existing?.id) {
+                await this.updateConversation(existing, messages, generation);
+            }
+            else {
+                await this.createConversation(chatMessages, messages, generation);
+            }
+        }
+        catch (ex) {
+            console.error('Error persisting conversation:', ex);
+            // 413: the stored conversation would exceed the size limit of the storage service.
+            const tooLarge = ex instanceof ConversationRequestError && ex.status === 413;
+            this.alertService.danger(tooLarge
+                ? gettext('This conversation is too large to save. To keep saving, start a new conversation.')
+                : gettext('Failed to save the conversation.'));
+        }
+    }
+    async updateConversation(existing, messages, generation) {
+        const label = this.label();
+        const labels = existing.labels ?? [];
+        const missingLabel = !!label && !labels.includes(label);
+        const updated = await this.conversationService.update(existing.id, {
+            messages,
+            ...(missingLabel ? { labels: [...labels, label] } : {})
+        });
+        if (missingLabel && generation === this.selectionGeneration) {
+            this.selectedConversation.set(updated);
+        }
+    }
+    async createConversation(chatMessages, messages, generation) {
+        const label = this.label();
+        const creating = this.conversationService.create({
+            labels: label ? [label] : [],
+            title: this.generateConversationTitle(chatMessages),
+            messages
+        });
+        const conversation = creating.catch(() => undefined);
+        this.pendingCreate = { generation, conversation };
+        try {
+            const created = await creating;
+            // Selecting it after a switch would make the next message of the chat on screen overwrite it.
+            if (generation === this.selectionGeneration)
+                this.selectedConversation.set(created);
+            this.addToList(created);
+        }
+        finally {
+            if (this.pendingCreate?.conversation === conversation)
+                this.pendingCreate = undefined;
+        }
+    }
+    addToList(conv) {
+        this.conversationPage.update(prev => {
+            if (!prev)
+                return { data: [conv] };
+            const exists = prev.data.some(c => c.id === conv.id);
+            return exists ? prev : { ...prev, data: [conv, ...prev.data] };
+        });
+    }
+    generateConversationTitle(chatMessages) {
+        if (this.pendingConversationTitle) {
+            const title = this.pendingConversationTitle;
+            this.pendingConversationTitle = undefined;
+            return title;
+        }
+        const firstUserMsg = chatMessages.find(m => m.role === 'user');
+        if (!firstUserMsg || typeof firstUserMsg.content !== 'string')
+            return this.agentName();
+        const text = firstUserMsg.content.trim();
+        return text.length > 30 ? text.slice(0, 30) : text;
+    }
+    onSearchInput(value) {
+        this.searchTerm.set(value);
+    }
+    clearSearch() {
+        this.searchTerm.set('');
+    }
+    async selectConversation(conv) {
+        if (!conv.id)
+            return;
+        try {
+            // The list omits messages, so the conversation has to be fetched before it can be opened.
+            this.conversationSelect.emit(await this.conversationService.detail(conv.id));
+        }
+        catch (ex) {
+            console.error('Error loading conversation:', ex);
+            this.alertService.danger(gettext('Failed to load the conversation.'));
+        }
+    }
+    async updateConversationTitle(title) {
+        const conv = this.selectedConversation();
+        if (!conv?.id || !title.trim())
+            return;
+        const generation = this.selectionGeneration;
+        try {
+            const updated = await this.conversationService.update(conv.id, { title: title.trim() });
+            if (generation === this.selectionGeneration)
+                this.selectedConversation.set(updated);
+            this.conversationPage.update(prev => prev ? { ...prev, data: prev.data.map(c => (c.id === updated.id ? updated : c)) } : prev);
+        }
+        catch (ex) {
+            console.error('Error updating conversation title:', ex);
+            this.alertService.danger(gettext('Failed to update the conversation title.'));
+        }
+    }
+    /** Deletes a conversation from the history once the user confirms in the given popover. */
+    async confirmAndDelete(popover, conv) {
+        if (!conv)
+            return;
+        // Read before the popover takes focus: it tells whether the delete starts from the list.
+        const menu = document.activeElement?.closest('.dropdown-menu');
+        const index = this.conversationPage()?.data.findIndex(c => c.id === conv.id) ?? -1;
+        popover.message = this.translateService.instant(gettext('You are about to delete conversation "{{ title }}". This action is irreversible.'), { title: conv.title });
+        // Clicking outside the popover rejects, which counts as cancelling.
+        const confirmed = await popover.show(this.deleteConfirmButtons).catch(() => false);
+        if (confirmed && (await this.deleteConversation(conv)))
+            this.focusAfterDelete(menu, index);
+    }
+    /**
+     * Moves focus off the deleted conversation's controls, which are gone or disabled: in the list,
+     * to the row that took its place (or the search field once the list is empty); in the header,
+     * to the history button.
+     */
+    focusAfterDelete(menu, index) {
+        afterNextRender(() => {
+            if (!menu?.isConnected) {
+                this.historyToggle()?.nativeElement.focus();
+                return;
+            }
+            const rows = menu.querySelectorAll('.conversation-picker__item > button');
+            const row = rows[Math.min(index, rows.length - 1)];
+            (row ?? menu.querySelector('input'))?.focus();
+        }, { injector: this.injector });
+    }
+    /** Returns whether the conversation was deleted. */
+    async deleteConversation(conv) {
+        if (!conv.id)
+            return false;
+        try {
+            await this.conversationService.delete(conv.id);
+            this.conversationPage.update(prev => prev ? { ...prev, data: prev.data.filter(c => c.id !== conv.id) } : prev);
+            if (this.selectedConversation()?.id === conv.id) {
+                this.selectedConversation.set(undefined);
+                this.conversationDeleted.emit();
+            }
+            this.alertService.success(gettext('Conversation deleted.'));
+            return true;
+        }
+        catch (ex) {
+            console.error('Error deleting conversation:', ex);
+            this.alertService.danger(gettext('Failed to delete the conversation.'));
+            return false;
+        }
+    }
+    /** Appends the next page of conversations to the list. */
+    async loadMoreConversations() {
+        const current = this.conversationPage();
+        if (!current?.paging?.next)
+            return;
+        const loadMoreButton = document.activeElement;
+        const menu = loadMoreButton?.closest('.dropdown-menu');
+        this.isLoadingMore.set(true);
+        try {
+            const page = await current.paging.next();
+            // A search or reload replaced the list meanwhile, so this page belongs to an old one.
+            if (this.conversationPage() !== current)
+                return;
+            // Conversations created here were added on top and can show up again on a later page.
+            const known = new Set(current.data.map(c => c.id));
+            this.conversationPage.set({
+                ...page,
+                data: [...current.data, ...page.data.filter(c => !known.has(c.id))]
+            });
+            this.focusFirstLoadedRow(menu, loadMoreButton, current.data.length);
+        }
+        catch (ex) {
+            console.error('Error loading more conversations:', ex);
+            this.alertService.danger(gettext('Failed to load more conversations.'));
+        }
+        finally {
+            this.isLoadingMore.set(false);
+        }
+    }
+    /**
+     * The "Load more" button is gone after the last page, which would drop focus to the page, so
+     * move it to the first conversation that was just loaded.
+     */
+    focusFirstLoadedRow(menu, loadMoreButton, index) {
+        afterNextRender(() => {
+            if (!menu?.isConnected || loadMoreButton?.isConnected)
+                return;
+            menu.querySelectorAll('.conversation-picker__item > button')[index]?.focus();
+        }, { injector: this.injector });
+    }
+    async loadConversations() {
+        // A slow response to an older search must not replace the result of a newer one.
+        const request = ++this.listRequest;
+        this.isLoadingConversations.set(true);
+        try {
+            const page = await this.conversationService.list(this.label(), 1, this.searchTerm() || undefined);
+            if (request === this.listRequest)
+                this.conversationPage.set(page);
+        }
+        catch (ex) {
+            console.error('Error loading conversations:', ex);
+            if (request === this.listRequest) {
+                this.alertService.danger(gettext('Failed to load conversations.'));
+            }
+        }
+        finally {
+            if (request === this.listRequest)
+                this.isLoadingConversations.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ConversationPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ConversationPickerComponent, isStandalone: true, selector: "c8y-conversation-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, agentName: { classPropertyName: "agentName", publicName: "agentName", isSignal: true, isRequired: false, transformFunction: null }, pruneMessagesForPersistence: { classPropertyName: "pruneMessagesForPersistence", publicName: "pruneMessagesForPersistence", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { conversationSelect: "conversationSelect", conversationDeleted: "conversationDeleted" }, viewQueries: [{ propertyName: "historyToggle", first: true, predicate: ["historyToggle"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"card-header d-flex a-i-center gap-4 separator flex-no-shrink\">\n  <div class=\"flex-grow min-width-0\">\n    @if (selectedConversation()) {\n      <c8y-input-group-editable\n        ariaLabel=\"Conversation title\"\n        [ngModel]=\"selectedConversation()!.title\"\n        formGroupClass=\"m-b-0\"\n        [maxLength]=\"100\"\n        (save)=\"updateConversationTitle($event)\"\n      ></c8y-input-group-editable>\n    } @else {\n      <p class=\"conversation-picker__placeholder text-truncate text-muted\">\n        {{ 'New conversation' | translate }}\n      </p>\n    }\n  </div>\n\n  <ng-content></ng-content>\n\n  <div\n    class=\"dropdown flex-no-shrink\"\n    #convDropdown=\"bs-dropdown\"\n    dropdown\n    c8yDropdownFocusTrap\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"btn btn-icon dropdown-toggle\"\n      [attr.aria-label]=\"'Conversation history' | translate\"\n      [tooltip]=\"'Conversation history' | translate\"\n      placement=\"top\"\n      container=\"body\"\n      type=\"button\"\n      #historyToggle\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i c8yIcon=\"history\"></i>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-right conversation-picker__menu\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-8\">\n        <p class=\"p-b-8 p-l-8\">\n          <strong>{{ 'Conversations' | translate }}</strong>\n        </p>\n        <div class=\"input-group input-group-search input-group-sm\">\n          <input\n            class=\"form-control\"\n            [attr.aria-label]=\"'Search conversations' | translate\"\n            type=\"text\"\n            [value]=\"searchTerm()\"\n            [placeholder]=\"'Search\u2026' | translate\"\n            (input)=\"onSearchInput($any($event.target).value)\"\n          />\n          <span class=\"input-group-btn\">\n            <button\n              class=\"btn btn-clean\"\n              [title]=\"(searchTerm() ? 'Clear search' : 'Search') | translate\"\n              type=\"button\"\n              data-dropdown-keep-open\n              (click)=\"clearSearch()\"\n            >\n              <i [c8yIcon]=\"searchTerm() ? 'close' : 'search'\"></i>\n            </button>\n          </span>\n        </div>\n      </div>\n\n      @if (isLoadingConversations()) {\n        <div class=\"p-16 text-center\">\n          <c8y-loading></c8y-loading>\n        </div>\n      } @else if ((conversationPage()?.data?.length ?? 0) === 0) {\n        <!-- The list changes as the user types in the search, so announce the empty result. -->\n        <div\n          class=\"p-16\"\n          role=\"status\"\n        >\n          @if (searchTerm()) {\n            <c8y-ui-empty-state\n              [icon]=\"'search'\"\n              [title]=\"'No results to display.' | translate\"\n              [subtitle]=\"'Adjust or clear the search.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n          } @else {\n            <c8y-ui-empty-state\n              [icon]=\"'history'\"\n              [title]=\"'No conversations to display.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n          }\n        </div>\n      } @else {\n        <ul class=\"list-unstyled m-0\">\n          @for (conv of conversationPage()!.data; track conv.id) {\n            @let isSelected = conv.id === selectedConversation()?.id;\n            <li\n              class=\"conversation-picker__item d-flex a-i-center gap-8 p-t-8 p-b-8 p-l-16 p-r-16 separator-bottom\"\n              [class.conversation-picker__item--active]=\"isSelected\"\n            >\n              <button\n                class=\"btn-clean d-col flex-grow min-width-0 text-left\"\n                [attr.aria-current]=\"isSelected ? 'true' : null\"\n                type=\"button\"\n                (click)=\"convDropdown.hide(); selectConversation(conv)\"\n              >\n                <span class=\"text-truncate\">\n                  <c8y-highlight\n                    [text]=\"conv.title\"\n                    [pattern]=\"searchTerm()\"\n                  ></c8y-highlight>\n                </span>\n                @if (conv.updatedAt) {\n                  <small class=\"text-muted text-nowrap\">{{ conv.updatedAt | c8yDate }}</small>\n                }\n              </button>\n              <c8y-popover-confirm\n                class=\"flex-no-shrink showOnHover\"\n                [class.open]=\"rowConfirm.isOpen\"\n                [title]=\"'Delete conversation' | translate\"\n                [placement]=\"'bottom'\"\n                [outsideClick]=\"true\"\n                #rowConfirm\n              >\n                <button\n                  class=\"btn-icon btn btn-sm\"\n                  [attr.aria-label]=\"'Delete conversation' | translate\"\n                  [tooltip]=\"'Delete conversation' | translate\"\n                  container=\"body\"\n                  aria-haspopup=\"dialog\"\n                  type=\"button\"\n                  [adaptivePosition]=\"false\"\n                  [delay]=\"500\"\n                  (click)=\"$event.stopPropagation(); confirmAndDelete(rowConfirm, conv)\"\n                >\n                  <i c8yIcon=\"trash\"></i>\n                </button>\n              </c8y-popover-confirm>\n            </li>\n          }\n        </ul>\n        @if (conversationPage()?.paging?.next) {\n          <button\n            class=\"btn btn-default btn-block m-t-8 m-b-8\"\n            [class.btn-pending]=\"isLoadingMore()\"\n            type=\"button\"\n            data-dropdown-keep-open\n            [disabled]=\"isLoadingMore()\"\n            (click)=\"loadMoreConversations()\"\n          >\n            {{ loadMoreConversationsLabel | translate }}\n          </button>\n        }\n      }\n    </div>\n  </div>\n\n  <c8y-popover-confirm\n    class=\"flex-no-shrink\"\n    [title]=\"'Delete conversation' | translate\"\n    [placement]=\"'bottom'\"\n    [outsideClick]=\"true\"\n    [adaptivePosition]=\"true\"\n    #headerConfirm\n  >\n    <button\n      class=\"btn btn-icon\"\n      [attr.aria-label]=\"'Delete conversation' | translate\"\n      [tooltip]=\"'Delete conversation' | translate\"\n      container=\"body\"\n      aria-haspopup=\"dialog\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"!selectedConversation()\"\n      (click)=\"confirmAndDelete(headerConfirm, selectedConversation())\"\n    >\n      <i c8yIcon=\"trash\"></i>\n    </button>\n  </c8y-popover-confirm>\n</div>\n", styles: [".conversation-picker__placeholder{font-style:italic}.conversation-picker__menu{min-width:262px;max-width:min(400px,90vw)}.conversation-picker__item:hover{background-color:var(--c8y-component-background-hover, var(--c8y-root-component-background-hover))}.conversation-picker__item--active>button{color:var(--c8y-component-color-active, var(--c8y-root-component-color-active))}\n"], dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: DropdownFocusTrapDirective, selector: "[c8yDropdownFocusTrap]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "title", "multiline", "maxHeight", "maxLength", "noSaveButton", "formGroupClass", "validators", "asyncValidators", "autocomplete", "required"], outputs: ["save", "cancel"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: "21.2.19", ngImport: i0, type: ConversationPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-conversation-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        BsDropdownModule,
+                        C8yTranslatePipe,
+                        DatePipe,
+                        DropdownFocusTrapDirective,
+                        EmptyStateComponent,
+                        FormsModule,
+                        HighlightComponent,
+                        IconDirective,
+                        InputGroupEditableComponent,
+                        LoadingComponent,
+                        PopoverConfirmComponent,
+                        TooltipModule
+                    ], template: "<div class=\"card-header d-flex a-i-center gap-4 separator flex-no-shrink\">\n  <div class=\"flex-grow min-width-0\">\n    @if (selectedConversation()) {\n      <c8y-input-group-editable\n        ariaLabel=\"Conversation title\"\n        [ngModel]=\"selectedConversation()!.title\"\n        formGroupClass=\"m-b-0\"\n        [maxLength]=\"100\"\n        (save)=\"updateConversationTitle($event)\"\n      ></c8y-input-group-editable>\n    } @else {\n      <p class=\"conversation-picker__placeholder text-truncate text-muted\">\n        {{ 'New conversation' | translate }}\n      </p>\n    }\n  </div>\n\n  <ng-content></ng-content>\n\n  <div\n    class=\"dropdown flex-no-shrink\"\n    #convDropdown=\"bs-dropdown\"\n    dropdown\n    c8yDropdownFocusTrap\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"btn btn-icon dropdown-toggle\"\n      [attr.aria-label]=\"'Conversation history' | translate\"\n      [tooltip]=\"'Conversation history' | translate\"\n      placement=\"top\"\n      container=\"body\"\n      type=\"button\"\n      #historyToggle\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i c8yIcon=\"history\"></i>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-right conversation-picker__menu\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-8\">\n        <p class=\"p-b-8 p-l-8\">\n          <strong>{{ 'Conversations' | translate }}</strong>\n        </p>\n        <div class=\"input-group input-group-search input-group-sm\">\n          <input\n            class=\"form-control\"\n            [attr.aria-label]=\"'Search conversations' | translate\"\n            type=\"text\"\n            [value]=\"searchTerm()\"\n            [placeholder]=\"'Search\u2026' | translate\"\n            (input)=\"onSearchInput($any($event.target).value)\"\n          />\n          <span class=\"input-group-btn\">\n            <button\n              class=\"btn btn-clean\"\n              [title]=\"(searchTerm() ? 'Clear search' : 'Search') | translate\"\n              type=\"button\"\n              data-dropdown-keep-open\n              (click)=\"clearSearch()\"\n            >\n              <i [c8yIcon]=\"searchTerm() ? 'close' : 'search'\"></i>\n            </button>\n          </span>\n        </div>\n      </div>\n\n      @if (isLoadingConversations()) {\n        <div class=\"p-16 text-center\">\n          <c8y-loading></c8y-loading>\n        </div>\n      } @else if ((conversationPage()?.data?.length ?? 0) === 0) {\n        <!-- The list changes as the user types in the search, so announce the empty result. -->\n        <div\n          class=\"p-16\"\n          role=\"status\"\n        >\n          @if (searchTerm()) {\n            <c8y-ui-empty-state\n              [icon]=\"'search'\"\n              [title]=\"'No results to display.' | translate\"\n              [subtitle]=\"'Adjust or clear the search.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n          } @else {\n            <c8y-ui-empty-state\n              [icon]=\"'history'\"\n              [title]=\"'No conversations to display.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n          }\n        </div>\n      } @else {\n        <ul class=\"list-unstyled m-0\">\n          @for (conv of conversationPage()!.data; track conv.id) {\n            @let isSelected = conv.id === selectedConversation()?.id;\n            <li\n              class=\"conversation-picker__item d-flex a-i-center gap-8 p-t-8 p-b-8 p-l-16 p-r-16 separator-bottom\"\n              [class.conversation-picker__item--active]=\"isSelected\"\n            >\n              <button\n                class=\"btn-clean d-col flex-grow min-width-0 text-left\"\n                [attr.aria-current]=\"isSelected ? 'true' : null\"\n                type=\"button\"\n                (click)=\"convDropdown.hide(); selectConversation(conv)\"\n              >\n                <span class=\"text-truncate\">\n                  <c8y-highlight\n                    [text]=\"conv.title\"\n                    [pattern]=\"searchTerm()\"\n                  ></c8y-highlight>\n                </span>\n                @if (conv.updatedAt) {\n                  <small class=\"text-muted text-nowrap\">{{ conv.updatedAt | c8yDate }}</small>\n                }\n              </button>\n              <c8y-popover-confirm\n                class=\"flex-no-shrink showOnHover\"\n                [class.open]=\"rowConfirm.isOpen\"\n                [title]=\"'Delete conversation' | translate\"\n                [placement]=\"'bottom'\"\n                [outsideClick]=\"true\"\n                #rowConfirm\n              >\n                <button\n                  class=\"btn-icon btn btn-sm\"\n                  [attr.aria-label]=\"'Delete conversation' | translate\"\n                  [tooltip]=\"'Delete conversation' | translate\"\n                  container=\"body\"\n                  aria-haspopup=\"dialog\"\n                  type=\"button\"\n                  [adaptivePosition]=\"false\"\n                  [delay]=\"500\"\n                  (click)=\"$event.stopPropagation(); confirmAndDelete(rowConfirm, conv)\"\n                >\n                  <i c8yIcon=\"trash\"></i>\n                </button>\n              </c8y-popover-confirm>\n            </li>\n          }\n        </ul>\n        @if (conversationPage()?.paging?.next) {\n          <button\n            class=\"btn btn-default btn-block m-t-8 m-b-8\"\n            [class.btn-pending]=\"isLoadingMore()\"\n            type=\"button\"\n            data-dropdown-keep-open\n            [disabled]=\"isLoadingMore()\"\n            (click)=\"loadMoreConversations()\"\n          >\n            {{ loadMoreConversationsLabel | translate }}\n          </button>\n        }\n      }\n    </div>\n  </div>\n\n  <c8y-popover-confirm\n    class=\"flex-no-shrink\"\n    [title]=\"'Delete conversation' | translate\"\n    [placement]=\"'bottom'\"\n    [outsideClick]=\"true\"\n    [adaptivePosition]=\"true\"\n    #headerConfirm\n  >\n    <button\n      class=\"btn btn-icon\"\n      [attr.aria-label]=\"'Delete conversation' | translate\"\n      [tooltip]=\"'Delete conversation' | translate\"\n      container=\"body\"\n      aria-haspopup=\"dialog\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"!selectedConversation()\"\n      (click)=\"confirmAndDelete(headerConfirm, selectedConversation())\"\n    >\n      <i c8yIcon=\"trash\"></i>\n    </button>\n  </c8y-popover-confirm>\n</div>\n", styles: [".conversation-picker__placeholder{font-style:italic}.conversation-picker__menu{min-width:262px;max-width:min(400px,90vw)}.conversation-picker__item:hover{background-color:var(--c8y-component-background-hover, var(--c8y-root-component-background-hover))}.conversation-picker__item--active>button{color:var(--c8y-component-color-active, var(--c8y-root-component-color-active))}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], agentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "agentName", required: false }] }], pruneMessagesForPersistence: [{ type: i0.Input, args: [{ isSignal: true, alias: "pruneMessagesForPersistence", required: false }] }], conversationSelect: [{ type: i0.Output, args: ["conversationSelect"] }], conversationDeleted: [{ type: i0.Output, args: ["conversationDeleted"] }], historyToggle: [{ type: i0.ViewChild, args: ['historyToggle', { isSignal: true }] }] } });
+
 /** User preference key for the global "approve all tools" option. */
 const GLOBAL_TOOL_APPROVAL_PREFERENCE_KEY = 'ai-approve-all-tools';
 class AgentChatComponent {
@@ -469,6 +908,14 @@ 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" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional function to override how the message history is prepared for persistence (conversation storage).
+         * Defaults to `defaultPruneMessagesForPersistence` which preserves tool call history while stripping
+         * transient streaming states and truncating large tool outputs.
+         *
+         * Unlike `pruneMessagesForAgent`, this should retain tool calls so stored conversations can be fully restored.
+         */
+        this.pruneMessagesForPersistence = input(undefined, ...(ngDevMode ? [{ debugName: "pruneMessagesForPersistence" }] : /* istanbul ignore next */ []));
         /** 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. */
@@ -551,6 +998,26 @@ class AgentChatComponent {
                 return acc;
             }, { inputTokens: 0, outputTokens: 0, totalTokens: 0 });
         }, ...(ngDevMode ? [{ debugName: "cumulativeUsage" }] : /* istanbul ignore next */ []));
+        /**
+         * The agent to show above each message, or undefined to show none. An agent is shown on an
+         * assistant message only when it differs from the previous assistant message's agent — or, for
+         * the first one, from the current agent — so a chat with a single agent shows no names. The
+         * current agent is shown with its label, any other with its stored name.
+         */
+        this.messageAgentLabels = computed(() => {
+            const currentAgentName = this.agentName;
+            const currentAgentLabel = this.agentDefinition?.label || currentAgentName;
+            let previousAgentName = currentAgentName;
+            return this.messages().map(message => {
+                if (message.role !== 'assistant' || !message.agentName)
+                    return undefined;
+                const changed = message.agentName !== previousAgentName;
+                previousAgentName = message.agentName;
+                if (!changed)
+                    return undefined;
+                return message.agentName === currentAgentName ? currentAgentLabel : message.agentName;
+            });
+        }, ...(ngDevMode ? [{ debugName: "messageAgentLabels" }] : /* istanbul ignore next */ []));
         /**
          * 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.
@@ -596,6 +1063,8 @@ class AgentChatComponent {
         this.appState = inject(AppStateService);
         this.assistantMessageComponents = viewChildren(AiChatAssistantMessageComponent, ...(ngDevMode ? [{ debugName: "assistantMessageComponents" }] : /* istanbul ignore next */ []));
         this.chat = viewChild(AiChatComponent, ...(ngDevMode ? [{ debugName: "chat" }] : /* istanbul ignore next */ []));
+        this.conversationPicker = viewChild(ConversationPickerComponent, ...(ngDevMode ? [{ debugName: "conversationPicker" }] : /* istanbul ignore next */ []));
+        this.persistenceEnabled = computed(() => this.chatConfig()?.conversationPersistence === 'enabled', ...(ngDevMode ? [{ debugName: "persistenceEnabled" }] : /* istanbul ignore next */ []));
         /**
          * Stores client-supplied tool outputs to override tool results for a given toolCallId in the current assistant message.
          * Cleared at the start of each new message.
@@ -671,6 +1140,25 @@ class AgentChatComponent {
             }
         }
     }
+    fork(userMessage) {
+        if (!this.persistenceEnabled()) {
+            return;
+        }
+        const index = this.messages().indexOf(userMessage);
+        if (index === -1)
+            return;
+        const baseTitle = this.conversationPicker()?.selectedConversation()?.title ?? userMessage.content.slice(0, 30);
+        const forkTitle = this.translateService.instant(gettext('Fork: {{ title }}'), {
+            title: baseTitle
+        });
+        const trimmedMessages = this.messages().slice(0, index);
+        this.resetMessages(); // clears header state
+        this.conversationPicker()?.setPendingForkTitle(forkTitle);
+        this.messages.set(trimmedMessages);
+        this.onMessagesChange.emit(this.messages());
+        this._restoredSuggestions = [];
+        this.prompt = userMessage.content;
+    }
     /** Rates an AI message as positive/negative, sending the feedback to Gainsight (unless telemetry is disabled) */
     async rate(assistantMessage, positive) {
         if (this.telemetry()) {
@@ -724,6 +1212,7 @@ class AgentChatComponent {
         this.toolApprovalMemory.endSession(this._chatSessionId);
         this._chatSessionId = this.toolApprovalMemory.newSessionId();
         this.messages.set([]);
+        this.conversationPicker()?.clearSelectedConversation();
         this.onMessagesChange.emit(this.messages());
     }
     /** Removes the last user message and all assistant messages that follow it from the conversation. */
@@ -778,6 +1267,13 @@ class AgentChatComponent {
         }
         this._isLoading.set(false);
     }
+    loadConversation(conv) {
+        this.resetMessages();
+        this.messages.set(fromConversationMessages(conv.messages));
+        this.onMessagesChange.emit(this.messages());
+        this._restoredSuggestions = [];
+        this.conversationPicker()?.trackConversation(conv);
+    }
     // Private methods go here:
     /**
      * Sends the current conversation to the agent and streams the next assistant message.
@@ -803,6 +1299,7 @@ class AgentChatComponent {
         }
         const currentAssistantMessage = {
             role: 'assistant',
+            agentName: this.agentName,
             content: []
         };
         this.messages.set([...this.messages(), currentAssistantMessage]);
@@ -980,6 +1477,12 @@ class AgentChatComponent {
             await this._dispatchToAgent(false);
         }
     }
+    /** Saves the conversation. Never rejects: the picker alerts the user when a save fails. */
+    async persistConversation() {
+        if (!this.persistenceEnabled())
+            return;
+        await this.conversationPicker()?.persistConversation(this.messages());
+    }
     async initializeChat() {
         this._restoreChatHistory(this.initialChatHistory());
         if (this.skipHealthCheck()) {
@@ -1118,8 +1621,14 @@ class AgentChatComponent {
                 this._isLoading.set(false);
             }
         }
-        // Replace streaming message with new immutable instance to trigger change detection
+        // Replace streaming message with new immutable instance to trigger change detection.
         this.messages.update(msgs => [...msgs.slice(0, -1), newMsg]);
+        // Persist after messages.update: newMsg (with timestamp and usage set by handleMessageFinish)
+        // is now in the signal, so this.messages() reflects the complete final state.
+        if (updatedAssistantMsg.finishReason === 'stop' ||
+            updatedAssistantMsg.finishReason === 'length') {
+            void this.persistConversation();
+        }
     }
     handleMessageFinish(currentAssistantMsg, updatedAssistantMsg) {
         currentAssistantMsg.timestamp = new Date().toISOString();
@@ -1248,6 +1757,7 @@ class AgentChatComponent {
             this.messages.set([...this.messages()]);
             this.onMessagesChange.emit(this.messages());
             this.onMessageFinish.emit(currentAssistantMessage);
+            void this.persistConversation();
             if (this.telemetry()) {
                 void this.getAnalyticsMetadataContext()
                     .then(analyticsContext => {
@@ -1276,8 +1786,11 @@ class AgentChatComponent {
             this._isLoading.set(false);
         }
     }
+    onConversationDeleted() {
+        this.resetMessages();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AgentChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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 }, contextPath: { classPropertyName: "contextPath", publicName: "contextPath", 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 }, telemetry: { classPropertyName: "telemetry", publicName: "telemetry", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMessageFinish: "onMessageFinish", onToolResult: "onToolResult", onFeedback: "onFeedback", onMessagesChange: "onMessagesChange" }, queries: [{ propertyName: "chatActions", predicate: AiChatActionComponent, isSignal: true }], viewQueries: [{ propertyName: "assistantMessageComponents", predicate: AiChatAssistantMessageComponent, descendants: true, isSignal: true }, { propertyName: "chat", first: true, predicate: AiChatComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Instantiates any projected action-bar items so they can be queried and forwarded to c8y-ai-chat.\n The items render nothing here (their content is exposed as a template), only inside the action bar. -->\n<ng-content select=\"c8y-ai-chat-action\"></ng-content>\n\n@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      <!-- Only the message is announced; the actions and links stay out of the live region. -->\n      <span role=\"alert\">{{ 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  @let showGlobalToolApprovalToggle = chatConfig()?.showGlobalToolApprovalToggle !== false;\n  @if (showGlobalToolApprovalToggle && globalToolApproval()) {\n    <div\n      class=\"alert alert-info m-b-0 max-width-unset\"\n      role=\"status\"\n      data-cy=\"chat-global-tool-approval-banner\"\n    >\n      <p>\n        {{\n          'Auto-approve is on. Tool calls run without asking until you turn this off. Tools requiring explicit approval will still ask.'\n            | translate\n        }}\n      </p>\n    </div>\n  }\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    [actions]=\"chatActions()\"\n    [cumulativeUsage]=\"chatConfig()?.showCumulativeUsage ? cumulativeUsage() : null\"\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                onToolApprovalResponse: respondToToolApproval,\n                canRememberToolApproval: canRememberToolApproval\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            @let usageLabel =\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            <!-- The tooltip is hover-only, so repeat the breakdown as a label. -->\n            <span\n              class=\"tag tag--info m-l-auto\"\n              [attr.aria-label]=\"usageLabel\"\n              tabindex=\"0\"\n              [tooltip]=\"usageLabel\"\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() && telemetry()) {\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() && telemetry()) {\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          <!-- 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\n    @if (showGlobalToolApprovalToggle) {\n      <c8y-ai-chat-action placement=\"left\">\n        <c8y-agent-chat-tool-approval-mode\n          [globalToolApproval]=\"globalToolApproval()\"\n          (modeChange)=\"setGlobalToolApproval($event)\"\n        ></c8y-agent-chat-tool-approval-mode>\n      </c8y-ai-chat-action>\n    }\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", "actions", "config"], outputs: ["onMessage", "onCancel"] }, { kind: "component", type: AiChatActionComponent, selector: "c8y-ai-chat-action", inputs: ["placement"] }, { 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", "progressLabel", "message"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], 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$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: "component", type: AgentChatToolApprovalModeComponent, selector: "c8y-agent-chat-tool-approval-mode", inputs: ["globalToolApproval"], outputs: ["modeChange"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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 }, contextPath: { classPropertyName: "contextPath", publicName: "contextPath", 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 }, pruneMessagesForPersistence: { classPropertyName: "pruneMessagesForPersistence", publicName: "pruneMessagesForPersistence", 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 }, telemetry: { classPropertyName: "telemetry", publicName: "telemetry", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMessageFinish: "onMessageFinish", onToolResult: "onToolResult", onFeedback: "onFeedback", onMessagesChange: "onMessagesChange" }, queries: [{ propertyName: "chatActions", predicate: AiChatActionComponent, isSignal: true }], viewQueries: [{ propertyName: "assistantMessageComponents", predicate: AiChatAssistantMessageComponent, descendants: true, isSignal: true }, { propertyName: "chat", first: true, predicate: AiChatComponent, descendants: true, isSignal: true }, { propertyName: "conversationPicker", first: true, predicate: ConversationPickerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Instantiates any projected action-bar items so they can be queried and forwarded to c8y-ai-chat.\n The items render nothing here (their content is exposed as a template), only inside the action bar. -->\n<ng-content select=\"c8y-ai-chat-action\"></ng-content>\n\n@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      <!-- Only the message is announced; the actions and links stay out of the live region. -->\n      <span role=\"alert\">{{ 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  @if (persistenceEnabled()) {\n    <c8y-conversation-picker\n      [label]=\"chatConfig()?.conversationLabel\"\n      [agentName]=\"agentName\"\n      [pruneMessagesForPersistence]=\"pruneMessagesForPersistence()\"\n      (conversationSelect)=\"loadConversation($event)\"\n      (conversationDeleted)=\"onConversationDeleted()\"\n    >\n      @if (messages().length > 0) {\n        <button\n          class=\"btn btn-icon flex-no-shrink\"\n          [attr.aria-label]=\"'New conversation' | translate\"\n          [tooltip]=\"'New conversation' | translate\"\n          placement=\"top\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [delay]=\"500\"\n          [disabled]=\"isLoadingAiResponse()\"\n          (click)=\"resetMessages()\"\n        >\n          <i c8yIcon=\"add-circle-outline\"></i>\n        </button>\n      }\n    </c8y-conversation-picker>\n  }\n\n  @let showGlobalToolApprovalToggle = chatConfig()?.showGlobalToolApprovalToggle !== false;\n  @if (showGlobalToolApprovalToggle && globalToolApproval()) {\n    <div\n      class=\"alert alert-info m-b-0 max-width-unset\"\n      role=\"status\"\n      data-cy=\"chat-global-tool-approval-banner\"\n    >\n      <p>\n        {{\n          'Auto-approve is on. Tool calls run without asking until you turn this off. Tools requiring explicit approval will still ask.'\n            | translate\n        }}\n      </p>\n    </div>\n  }\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    [actions]=\"chatActions()\"\n    [cumulativeUsage]=\"chatConfig()?.showCumulativeUsage ? cumulativeUsage() : null\"\n  >\n    @let messages$ = messages();\n    @for (message of messages$; track $index; let i = $index) {\n      <c8y-ai-chat-message\n        [message]=\"message\"\n        [agentLabel]=\"messageAgentLabels()[i]\"\n      >\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                onToolApprovalResponse: respondToToolApproval,\n                canRememberToolApproval: canRememberToolApproval\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            [tooltipText]=\"'Edit and resend this message' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"reprompt(message)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'user' && persistenceEnabled()) {\n          <c8y-ai-chat-message-action\n            icon=\"codefork\"\n            [tooltipText]=\"'Fork this conversation from this message' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"fork(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            @let usageLabel =\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            <!-- The tooltip is hover-only, so repeat the breakdown as a label. -->\n            <span\n              class=\"tag tag--info m-l-auto\"\n              [attr.aria-label]=\"usageLabel\"\n              tabindex=\"0\"\n              [tooltip]=\"usageLabel\"\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() && telemetry()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-up\"\n            [tooltipText]=\"'This is useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"rate(message, true)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'assistant' && i > 0 && !isLoadingAiResponse() && telemetry()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-down\"\n            [tooltipText]=\"'This is not useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"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            [tooltipText]=\"'Delete last exchange' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"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            [tooltipText]=\"'Regenerate this response' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"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          <!-- 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\n    @if (showGlobalToolApprovalToggle) {\n      <c8y-ai-chat-action placement=\"left\">\n        <c8y-agent-chat-tool-approval-mode\n          [globalToolApproval]=\"globalToolApproval()\"\n          (modeChange)=\"setGlobalToolApproval($event)\"\n        ></c8y-agent-chat-tool-approval-mode>\n      </c8y-ai-chat-action>\n    }\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", "actions", "config"], outputs: ["onMessage", "onCancel"] }, { kind: "component", type: AiChatActionComponent, selector: "c8y-ai-chat-action", inputs: ["placement"] }, { 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", "agentLabel"] }, { kind: "component", type: AiChatMessageActionComponent, selector: "c8y-ai-chat-message-action", inputs: ["custom", "disabled", "tooltipText", "tooltip", "icon"], outputs: ["actionClicked"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], 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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: "component", type: AgentChatToolApprovalModeComponent, selector: "c8y-agent-chat-tool-approval-mode", inputs: ["globalToolApproval"], outputs: ["modeChange"] }, { kind: "component", type: ConversationPickerComponent, selector: "c8y-conversation-picker", inputs: ["label", "agentName", "pruneMessagesForPersistence"], outputs: ["conversationSelect", "conversationDeleted"] }, { 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: "21.2.19", ngImport: i0, type: AgentChatComponent, decorators: [{
             type: Component,
@@ -1297,11 +1810,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         C8yTranslateDirective,
                         GuideDocsComponent,
                         GuideHrefDirective,
+                        IconDirective,
                         TooltipModule,
                         NumberPipe,
-                        AgentChatToolApprovalModeComponent
-                    ], template: "<!-- Instantiates any projected action-bar items so they can be queried and forwarded to c8y-ai-chat.\n The items render nothing here (their content is exposed as a template), only inside the action bar. -->\n<ng-content select=\"c8y-ai-chat-action\"></ng-content>\n\n@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      <!-- Only the message is announced; the actions and links stay out of the live region. -->\n      <span role=\"alert\">{{ 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  @let showGlobalToolApprovalToggle = chatConfig()?.showGlobalToolApprovalToggle !== false;\n  @if (showGlobalToolApprovalToggle && globalToolApproval()) {\n    <div\n      class=\"alert alert-info m-b-0 max-width-unset\"\n      role=\"status\"\n      data-cy=\"chat-global-tool-approval-banner\"\n    >\n      <p>\n        {{\n          'Auto-approve is on. Tool calls run without asking until you turn this off. Tools requiring explicit approval will still ask.'\n            | translate\n        }}\n      </p>\n    </div>\n  }\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    [actions]=\"chatActions()\"\n    [cumulativeUsage]=\"chatConfig()?.showCumulativeUsage ? cumulativeUsage() : null\"\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                onToolApprovalResponse: respondToToolApproval,\n                canRememberToolApproval: canRememberToolApproval\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            @let usageLabel =\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            <!-- The tooltip is hover-only, so repeat the breakdown as a label. -->\n            <span\n              class=\"tag tag--info m-l-auto\"\n              [attr.aria-label]=\"usageLabel\"\n              tabindex=\"0\"\n              [tooltip]=\"usageLabel\"\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() && telemetry()) {\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() && telemetry()) {\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          <!-- 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\n    @if (showGlobalToolApprovalToggle) {\n      <c8y-ai-chat-action placement=\"left\">\n        <c8y-agent-chat-tool-approval-mode\n          [globalToolApproval]=\"globalToolApproval()\"\n          (modeChange)=\"setGlobalToolApproval($event)\"\n        ></c8y-agent-chat-tool-approval-mode>\n      </c8y-ai-chat-action>\n    }\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"] }]
-        }], ctorParameters: () => [], 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 }] }], chatActions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AiChatActionComponent), { isSignal: true }] }], autoCreateAgents: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCreateAgents", required: false }] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: false }] }], contextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextPath", 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 }] }], telemetry: [{ type: i0.Input, args: [{ isSignal: true, alias: "telemetry", 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 }] }], chat: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AiChatComponent), { isSignal: true }] }] } });
+                        AgentChatToolApprovalModeComponent,
+                        ConversationPickerComponent
+                    ], template: "<!-- Instantiates any projected action-bar items so they can be queried and forwarded to c8y-ai-chat.\n The items render nothing here (their content is exposed as a template), only inside the action bar. -->\n<ng-content select=\"c8y-ai-chat-action\"></ng-content>\n\n@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      <!-- Only the message is announced; the actions and links stay out of the live region. -->\n      <span role=\"alert\">{{ 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  @if (persistenceEnabled()) {\n    <c8y-conversation-picker\n      [label]=\"chatConfig()?.conversationLabel\"\n      [agentName]=\"agentName\"\n      [pruneMessagesForPersistence]=\"pruneMessagesForPersistence()\"\n      (conversationSelect)=\"loadConversation($event)\"\n      (conversationDeleted)=\"onConversationDeleted()\"\n    >\n      @if (messages().length > 0) {\n        <button\n          class=\"btn btn-icon flex-no-shrink\"\n          [attr.aria-label]=\"'New conversation' | translate\"\n          [tooltip]=\"'New conversation' | translate\"\n          placement=\"top\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [delay]=\"500\"\n          [disabled]=\"isLoadingAiResponse()\"\n          (click)=\"resetMessages()\"\n        >\n          <i c8yIcon=\"add-circle-outline\"></i>\n        </button>\n      }\n    </c8y-conversation-picker>\n  }\n\n  @let showGlobalToolApprovalToggle = chatConfig()?.showGlobalToolApprovalToggle !== false;\n  @if (showGlobalToolApprovalToggle && globalToolApproval()) {\n    <div\n      class=\"alert alert-info m-b-0 max-width-unset\"\n      role=\"status\"\n      data-cy=\"chat-global-tool-approval-banner\"\n    >\n      <p>\n        {{\n          'Auto-approve is on. Tool calls run without asking until you turn this off. Tools requiring explicit approval will still ask.'\n            | translate\n        }}\n      </p>\n    </div>\n  }\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    [actions]=\"chatActions()\"\n    [cumulativeUsage]=\"chatConfig()?.showCumulativeUsage ? cumulativeUsage() : null\"\n  >\n    @let messages$ = messages();\n    @for (message of messages$; track $index; let i = $index) {\n      <c8y-ai-chat-message\n        [message]=\"message\"\n        [agentLabel]=\"messageAgentLabels()[i]\"\n      >\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                onToolApprovalResponse: respondToToolApproval,\n                canRememberToolApproval: canRememberToolApproval\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            [tooltipText]=\"'Edit and resend this message' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"reprompt(message)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'user' && persistenceEnabled()) {\n          <c8y-ai-chat-message-action\n            icon=\"codefork\"\n            [tooltipText]=\"'Fork this conversation from this message' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"fork(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            @let usageLabel =\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            <!-- The tooltip is hover-only, so repeat the breakdown as a label. -->\n            <span\n              class=\"tag tag--info m-l-auto\"\n              [attr.aria-label]=\"usageLabel\"\n              tabindex=\"0\"\n              [tooltip]=\"usageLabel\"\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() && telemetry()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-up\"\n            [tooltipText]=\"'This is useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"rate(message, true)\"\n          ></c8y-ai-chat-message-action>\n        }\n\n        @if (message.role === 'assistant' && i > 0 && !isLoadingAiResponse() && telemetry()) {\n          <c8y-ai-chat-message-action\n            icon=\"thumbs-down\"\n            [tooltipText]=\"'This is not useful' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"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            [tooltipText]=\"'Delete last exchange' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"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            [tooltipText]=\"'Regenerate this response' | translate\"\n            [disabled]=\"isLoadingAiResponse()\"\n            (actionClicked)=\"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          <!-- 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\n    @if (showGlobalToolApprovalToggle) {\n      <c8y-ai-chat-action placement=\"left\">\n        <c8y-agent-chat-tool-approval-mode\n          [globalToolApproval]=\"globalToolApproval()\"\n          (modeChange)=\"setGlobalToolApproval($event)\"\n        ></c8y-agent-chat-tool-approval-mode>\n      </c8y-ai-chat-action>\n    }\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"] }]
+        }], ctorParameters: () => [], 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 }] }], chatActions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AiChatActionComponent), { isSignal: true }] }], autoCreateAgents: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCreateAgents", required: false }] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: false }] }], contextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextPath", 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 }] }], pruneMessagesForPersistence: [{ type: i0.Input, args: [{ isSignal: true, alias: "pruneMessagesForPersistence", 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 }] }], telemetry: [{ type: i0.Input, args: [{ isSignal: true, alias: "telemetry", 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 }] }], chat: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AiChatComponent), { isSignal: true }] }], conversationPicker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ConversationPickerComponent), { isSignal: true }] }] } });
 
 class WidgetAiChatSectionComponent {
     constructor() {
@@ -1387,7 +1902,7 @@ class WidgetAiChatSectionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WidgetAiChatSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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", "contextPath", "assistantMessageComponent", "assistantMessageDisplayConfig", "preprocessAgentMessage", "pruneMessagesForAgent", "skipHealthCheck", "initialChatHistory", "groundingContextProvider", "userAnalyticsContext", "telemetry"], 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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", "contextPath", "assistantMessageComponent", "assistantMessageDisplayConfig", "preprocessAgentMessage", "pruneMessagesForAgent", "pruneMessagesForPersistence", "skipHealthCheck", "initialChatHistory", "groundingContextProvider", "userAnalyticsContext", "telemetry"], 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WidgetAiChatSectionComponent, decorators: [{
             type: Component,
@@ -1414,5 +1929,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AgentChatComponent, AgentChatToolApprovalModeComponent, WidgetAiChatSectionComponent };
+export { AgentChatComponent, AgentChatToolApprovalModeComponent, ConversationPickerComponent, ConversationRequestError, ConversationService, WidgetAiChatSectionComponent };
 //# sourceMappingURL=c8y-ngx-components-ai-agent-chat.mjs.map