@sinequa/assistant 3.2.3 → 3.3.0

package/fesm2020/sinequa-assistant-chat.mjs

@@ -8,6 +8,8 @@ import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, Validators, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { LoginService, AuthenticationService } from '@sinequa/core/login';
+import { Utils } from '@sinequa/core/base';
+import { AppService } from '@sinequa/core/app-utils';
 import { Action } from '@sinequa/components/action';
 import { AbstractFacet } from '@sinequa/components/facet';
 import * as i1$1 from '@sinequa/components/search';
@@ -15,13 +17,12 @@ import { SearchService } from '@sinequa/components/search';
 import { UserPreferences } from '@sinequa/components/user-settings';
 import { NotificationsService } from '@sinequa/core/notification';
 import { z } from 'zod';
-import { AppService } from '@sinequa/core/app-utils';
 import * as i6$1 from '@sinequa/core/intl';
 import { IntlService, IntlModule } from '@sinequa/core/intl';
 import get from 'lodash/get';
-import { Utils } from '@sinequa/core/base';
 import * as i1$2 from '@sinequa/core/modal';
 import { ModalService, ModalButton, ModalModule, MODAL_MODEL } from '@sinequa/core/modal';
+import { toDate, parseISO, isToday, isYesterday, isThisWeek, differenceInDays, endOfYesterday, isThisMonth, differenceInMonths, isThisQuarter, isThisYear, differenceInYears, format } from 'date-fns';
 import { HttpTransportType, LogLevel } from '@microsoft/signalr';
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
@@ -36,7 +37,6 @@ import { RemarkModule } from 'ngx-remark';
 import SafeColor from 'safecolor';
 import 'prismjs-components-importer/esm';
 import 'prismjs/plugins/autoloader/prism-autoloader';
-import { parseISO, isToday, isYesterday, isThisWeek, differenceInDays, endOfYesterday, isThisMonth, differenceInMonths, isThisQuarter, isThisYear, differenceInYears, format } from 'date-fns';
 import * as i4 from '@sinequa/components/modal';
 import { BsModalModule } from '@sinequa/components/modal';
 import * as i5$1 from '@sinequa/core/validation';
@@ -96,6 +96,7 @@ class ChatSettingsV3Component {
         this.loginService = inject(LoginService);
         this.instanceManagerService = inject(InstanceManagerService);
         this.principalService = inject(PrincipalWebService);
+        this.appService = inject(AppService);
     }
     ngOnInit() {
         this.subscription.add(this.loginService.events.pipe(filter(e => e.type === 'login-complete'), tap(_ => this.instantiateChatService()), switchMap(() => this.chatService.initConfig$), filter(initConfig => !!initConfig)).subscribe(_ => {
@@ -150,9 +151,18 @@ class ChatSettingsV3Component {
     }
     /**
      * Save the new chat config in the chat service and the user preferences
+     * If the user has never modified the default values, we need to save the hash of the standard default values, as defined by the admin, in order to properly track changes afterwards.
      */
     save() {
-        this.chatService.updateChatConfig(this.config);
+        const userSettingsConfig = this.chatService.assistants[this.instanceId] || {};
+        if (!userSettingsConfig.defaultValues) { // At this point, it is the very first time the user makes changes to the default values
+            const standardChatConfig = this.appService.app?.data?.assistants?.[this.instanceId];
+            const hashes = { ...userSettingsConfig.hashes, "applied-defaultValues-hash": Utils.sha512(JSON.stringify(standardChatConfig.defaultValues)) };
+            this.chatService.updateChatConfig(this.config, hashes);
+        }
+        else {
+            this.chatService.updateChatConfig(this.config);
+        }
         this._update.emit(this.config);
     }
     /**
@@ -163,10 +173,10 @@ class ChatSettingsV3Component {
     }
 }
 ChatSettingsV3Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ChatSettingsV3Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChatSettingsV3Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ChatSettingsV3Component, isStandalone: true, selector: "sq-chat-settings-v3", inputs: { instanceId: "instanceId" }, outputs: { _update: "update", _cancel: "cancel" }, ngImport: i0, template: "<div class=\"sq-chat-settings\" *ngIf=\"isAdmin || config.uiSettings.display\">\n  <div class=\"settings-panel card-body small\" *ngIf=\"config\">\n\n    <h5 *ngIf=\"hasModel\">Model</h5>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.servicesModels\">\n      <label for=\"gllmModel\" class=\"form-label\">Model</label>\n      <select class=\"form-select\" id=\"gllmModel\" [(ngModel)]=\"selectedModel\" (ngModelChange)=\"onChatModelChange($event)\">\n        <option *ngFor=\"let model of chatService.models\" [ngValue]=\"model\">{{model.displayName}}</option>\n      </select>\n    </div>\n\n    <div class=\"mb-4\" *ngIf=\"isAdmin || config.uiSettings.functions\">\n      <label for=\"gllmFunctions\" class=\"form-label\">Functions</label>\n      <div id=\"gllmFunctions\" *ngFor=\"let func of functions\" class=\"multi-option form-check form-switch\">\n        <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" [id]=\"func.name\" [(ngModel)]=\"func.enabled\"\n          (ngModelChange)=\"toggleFunctionsSelection(func.name)\">\n        <label class=\"form-check-label\" [for]=\"func.name\" [title]=\"getFunctionDescription(func.name)\">{{ func.name }}</label>\n      </div>\n    </div>\n\n    <div class=\"form-check form-switch mb-2\" *ngIf=\"isAdmin || config.uiSettings.debug\">\n      <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"debug\" [(ngModel)]=\"config.defaultValues.debug\">\n      <label class=\"form-check-label\" for=\"debug\">Debug</label>\n    </div>\n\n    <details *ngIf=\"hasAdvancedParameters\">\n      <summary>Advanced parameters</summary>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.temperature\">\n        <label for=\"temperature\" class=\"form-label\">Temperature: {{config.defaultValues.temperature}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"0\" max=\"2\" step=\"0.1\" id=\"temperature\"\n          [(ngModel)]=\"config.defaultValues.temperature\">\n      </div>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.top_p\">\n        <label for=\"top-p\" class=\"form-label\">Top P: {{config.defaultValues.top_p}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"0\" max=\"1\" step=\"0.05\" id=\"top-p\"\n          [(ngModel)]=\"config.defaultValues.top_p\">\n      </div>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.max_tokens\">\n        <label for=\"max-tokens\" class=\"form-label\">Max generated tokens per answer:\n          {{config.defaultValues.max_tokens}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"1\" max=\"2048\" step=\"1\" id=\"max-tokens\"\n          [(ngModel)]=\"config.defaultValues.max_tokens\">\n      </div>\n    </details>\n\n    <hr>\n\n    <h5 *ngIf=\"hasPrompts\">Prompts</h5>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.displaySystemPrompt\">\n      <label for=\"initialSystemPrompt\" class=\"form-label\">System prompt (hidden)</label>\n      <textarea class=\"form-control\" id=\"initialSystemPrompt\" [(ngModel)]=\"config.defaultValues.systemPrompt\"></textarea>\n    </div>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.displayUserPrompt\">\n      <label for=\"initialUserPrompt\" class=\"form-label\">Initial user prompt</label>\n      <textarea class=\"form-control\" id=\"initialUserPrompt\" [(ngModel)]=\"config.defaultValues.userPrompt\"></textarea>\n    </div>\n\n  </div>\n\n  <div class=\"buttons-panel d-flex justify-content-end\">\n    <button class=\"btn btn-light\" (click)=\"cancel()\">Cancel</button>\n    <button class=\"btn btn-primary\" *ngIf=\"config\" (click)=\"save()\">Save</button>\n  </div>\n\n</div>\n", styles: [":host{display:block;width:var(--ast-chat-settings-width, 100%);max-width:100%;height:100%;margin-left:auto;margin-right:auto;padding-top:var(--ast-chat-settings-padding-top, 0);padding-bottom:var(--ast-chat-settings-padding-bottom, 0)}.sq-chat-settings{display:flex;flex-direction:column;height:100%}.sq-chat-settings .settings-panel{flex-grow:1;overflow:auto}.sq-chat-settings .buttons-panel{padding-top:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] });
+ChatSettingsV3Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ChatSettingsV3Component, isStandalone: true, selector: "sq-chat-settings-v3", inputs: { instanceId: "instanceId" }, outputs: { _update: "update", _cancel: "cancel" }, ngImport: i0, template: "<div class=\"sq-chat-settings\" *ngIf=\"isAdmin || config.uiSettings.display\">\n  <div class=\"settings-panel card-body small\" *ngIf=\"config\">\n\n    <h5 *ngIf=\"hasModel\">Model</h5>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.servicesModels\">\n      <label for=\"gllmModel\" class=\"form-label\">Model</label>\n      <select class=\"form-select\" id=\"gllmModel\" [(ngModel)]=\"selectedModel\" (ngModelChange)=\"onChatModelChange($event)\">\n        <option *ngFor=\"let model of chatService.models\" [ngValue]=\"model\">{{model.displayName}}</option>\n      </select>\n    </div>\n\n    <div class=\"mb-4\" *ngIf=\"isAdmin || config.uiSettings.functions\">\n      <label for=\"gllmFunctions\" class=\"form-label\">Functions</label>\n      <div id=\"gllmFunctions\" *ngFor=\"let func of functions\" class=\"multi-option form-check form-switch\">\n        <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" [id]=\"func.name\" [(ngModel)]=\"func.enabled\"\n          (ngModelChange)=\"toggleFunctionsSelection(func.name)\">\n        <label class=\"form-check-label\" [for]=\"func.name\" [title]=\"getFunctionDescription(func.name)\">{{ func.name }}</label>\n      </div>\n    </div>\n\n    <div class=\"form-check form-switch mb-2\" *ngIf=\"isAdmin || config.uiSettings.debug\">\n      <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"debug\" [(ngModel)]=\"config.defaultValues.debug\">\n      <label class=\"form-check-label\" for=\"debug\">Debug</label>\n    </div>\n\n    <details *ngIf=\"hasAdvancedParameters\">\n      <summary>Advanced parameters</summary>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.temperature\">\n        <label for=\"temperature\" class=\"form-label\">Temperature: {{config.defaultValues.temperature}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"0\" max=\"2\" step=\"0.1\" id=\"temperature\"\n          [(ngModel)]=\"config.defaultValues.temperature\">\n      </div>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.top_p\">\n        <label for=\"top-p\" class=\"form-label\">Top P: {{config.defaultValues.top_p}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"0\" max=\"1\" step=\"0.05\" id=\"top-p\"\n          [(ngModel)]=\"config.defaultValues.top_p\">\n      </div>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.max_tokens\">\n        <label for=\"max-tokens\" class=\"form-label\">Max generated tokens per answer:\n          {{config.defaultValues.max_tokens}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"1\" max=\"2048\" step=\"1\" id=\"max-tokens\"\n          [(ngModel)]=\"config.defaultValues.max_tokens\">\n      </div>\n    </details>\n\n    <hr>\n\n    <h5 *ngIf=\"hasPrompts\">Prompts</h5>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.displaySystemPrompt\">\n      <label for=\"initialSystemPrompt\" class=\"form-label\">System prompt (hidden)</label>\n      <textarea class=\"form-control\" id=\"initialSystemPrompt\" [(ngModel)]=\"config.defaultValues.systemPrompt\"></textarea>\n    </div>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.displayUserPrompt\">\n      <label for=\"initialUserPrompt\" class=\"form-label\">Initial user prompt</label>\n      <textarea class=\"form-control\" id=\"initialUserPrompt\" [(ngModel)]=\"config.defaultValues.userPrompt\"></textarea>\n    </div>\n\n  </div>\n\n  <div class=\"buttons-panel d-flex justify-content-end\">\n    <button class=\"btn btn-light me-1\" (click)=\"cancel()\">Cancel</button>\n    <button class=\"btn btn-primary\" *ngIf=\"config\" (click)=\"save()\">Save</button>\n  </div>\n\n</div>\n", styles: [":host{display:block;width:var(--ast-chat-settings-width, 100%);max-width:100%;height:100%;margin-left:auto;margin-right:auto;padding-top:var(--ast-chat-settings-padding-top, 0);padding-bottom:var(--ast-chat-settings-padding-bottom, 0)}.sq-chat-settings{display:flex;flex-direction:column;height:100%}.sq-chat-settings .settings-panel{flex-grow:1;overflow:auto}.sq-chat-settings .buttons-panel{padding-top:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ChatSettingsV3Component, decorators: [{
             type: Component,
-            args: [{ selector: 'sq-chat-settings-v3', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"sq-chat-settings\" *ngIf=\"isAdmin || config.uiSettings.display\">\n  <div class=\"settings-panel card-body small\" *ngIf=\"config\">\n\n    <h5 *ngIf=\"hasModel\">Model</h5>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.servicesModels\">\n      <label for=\"gllmModel\" class=\"form-label\">Model</label>\n      <select class=\"form-select\" id=\"gllmModel\" [(ngModel)]=\"selectedModel\" (ngModelChange)=\"onChatModelChange($event)\">\n        <option *ngFor=\"let model of chatService.models\" [ngValue]=\"model\">{{model.displayName}}</option>\n      </select>\n    </div>\n\n    <div class=\"mb-4\" *ngIf=\"isAdmin || config.uiSettings.functions\">\n      <label for=\"gllmFunctions\" class=\"form-label\">Functions</label>\n      <div id=\"gllmFunctions\" *ngFor=\"let func of functions\" class=\"multi-option form-check form-switch\">\n        <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" [id]=\"func.name\" [(ngModel)]=\"func.enabled\"\n          (ngModelChange)=\"toggleFunctionsSelection(func.name)\">\n        <label class=\"form-check-label\" [for]=\"func.name\" [title]=\"getFunctionDescription(func.name)\">{{ func.name }}</label>\n      </div>\n    </div>\n\n    <div class=\"form-check form-switch mb-2\" *ngIf=\"isAdmin || config.uiSettings.debug\">\n      <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"debug\" [(ngModel)]=\"config.defaultValues.debug\">\n      <label class=\"form-check-label\" for=\"debug\">Debug</label>\n    </div>\n\n    <details *ngIf=\"hasAdvancedParameters\">\n      <summary>Advanced parameters</summary>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.temperature\">\n        <label for=\"temperature\" class=\"form-label\">Temperature: {{config.defaultValues.temperature}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"0\" max=\"2\" step=\"0.1\" id=\"temperature\"\n          [(ngModel)]=\"config.defaultValues.temperature\">\n      </div>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.top_p\">\n        <label for=\"top-p\" class=\"form-label\">Top P: {{config.defaultValues.top_p}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"0\" max=\"1\" step=\"0.05\" id=\"top-p\"\n          [(ngModel)]=\"config.defaultValues.top_p\">\n      </div>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.max_tokens\">\n        <label for=\"max-tokens\" class=\"form-label\">Max generated tokens per answer:\n          {{config.defaultValues.max_tokens}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"1\" max=\"2048\" step=\"1\" id=\"max-tokens\"\n          [(ngModel)]=\"config.defaultValues.max_tokens\">\n      </div>\n    </details>\n\n    <hr>\n\n    <h5 *ngIf=\"hasPrompts\">Prompts</h5>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.displaySystemPrompt\">\n      <label for=\"initialSystemPrompt\" class=\"form-label\">System prompt (hidden)</label>\n      <textarea class=\"form-control\" id=\"initialSystemPrompt\" [(ngModel)]=\"config.defaultValues.systemPrompt\"></textarea>\n    </div>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.displayUserPrompt\">\n      <label for=\"initialUserPrompt\" class=\"form-label\">Initial user prompt</label>\n      <textarea class=\"form-control\" id=\"initialUserPrompt\" [(ngModel)]=\"config.defaultValues.userPrompt\"></textarea>\n    </div>\n\n  </div>\n\n  <div class=\"buttons-panel d-flex justify-content-end\">\n    <button class=\"btn btn-light\" (click)=\"cancel()\">Cancel</button>\n    <button class=\"btn btn-primary\" *ngIf=\"config\" (click)=\"save()\">Save</button>\n  </div>\n\n</div>\n", styles: [":host{display:block;width:var(--ast-chat-settings-width, 100%);max-width:100%;height:100%;margin-left:auto;margin-right:auto;padding-top:var(--ast-chat-settings-padding-top, 0);padding-bottom:var(--ast-chat-settings-padding-bottom, 0)}.sq-chat-settings{display:flex;flex-direction:column;height:100%}.sq-chat-settings .settings-panel{flex-grow:1;overflow:auto}.sq-chat-settings .buttons-panel{padding-top:.5rem}\n"] }]
+            args: [{ selector: 'sq-chat-settings-v3', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"sq-chat-settings\" *ngIf=\"isAdmin || config.uiSettings.display\">\n  <div class=\"settings-panel card-body small\" *ngIf=\"config\">\n\n    <h5 *ngIf=\"hasModel\">Model</h5>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.servicesModels\">\n      <label for=\"gllmModel\" class=\"form-label\">Model</label>\n      <select class=\"form-select\" id=\"gllmModel\" [(ngModel)]=\"selectedModel\" (ngModelChange)=\"onChatModelChange($event)\">\n        <option *ngFor=\"let model of chatService.models\" [ngValue]=\"model\">{{model.displayName}}</option>\n      </select>\n    </div>\n\n    <div class=\"mb-4\" *ngIf=\"isAdmin || config.uiSettings.functions\">\n      <label for=\"gllmFunctions\" class=\"form-label\">Functions</label>\n      <div id=\"gllmFunctions\" *ngFor=\"let func of functions\" class=\"multi-option form-check form-switch\">\n        <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" [id]=\"func.name\" [(ngModel)]=\"func.enabled\"\n          (ngModelChange)=\"toggleFunctionsSelection(func.name)\">\n        <label class=\"form-check-label\" [for]=\"func.name\" [title]=\"getFunctionDescription(func.name)\">{{ func.name }}</label>\n      </div>\n    </div>\n\n    <div class=\"form-check form-switch mb-2\" *ngIf=\"isAdmin || config.uiSettings.debug\">\n      <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"debug\" [(ngModel)]=\"config.defaultValues.debug\">\n      <label class=\"form-check-label\" for=\"debug\">Debug</label>\n    </div>\n\n    <details *ngIf=\"hasAdvancedParameters\">\n      <summary>Advanced parameters</summary>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.temperature\">\n        <label for=\"temperature\" class=\"form-label\">Temperature: {{config.defaultValues.temperature}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"0\" max=\"2\" step=\"0.1\" id=\"temperature\"\n          [(ngModel)]=\"config.defaultValues.temperature\">\n      </div>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.top_p\">\n        <label for=\"top-p\" class=\"form-label\">Top P: {{config.defaultValues.top_p}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"0\" max=\"1\" step=\"0.05\" id=\"top-p\"\n          [(ngModel)]=\"config.defaultValues.top_p\">\n      </div>\n      <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.max_tokens\">\n        <label for=\"max-tokens\" class=\"form-label\">Max generated tokens per answer:\n          {{config.defaultValues.max_tokens}}</label>\n        <input type=\"range\" class=\"form-range form-range-sm\" min=\"1\" max=\"2048\" step=\"1\" id=\"max-tokens\"\n          [(ngModel)]=\"config.defaultValues.max_tokens\">\n      </div>\n    </details>\n\n    <hr>\n\n    <h5 *ngIf=\"hasPrompts\">Prompts</h5>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.displaySystemPrompt\">\n      <label for=\"initialSystemPrompt\" class=\"form-label\">System prompt (hidden)</label>\n      <textarea class=\"form-control\" id=\"initialSystemPrompt\" [(ngModel)]=\"config.defaultValues.systemPrompt\"></textarea>\n    </div>\n    <div class=\"mb-2\" *ngIf=\"isAdmin || config.uiSettings.displayUserPrompt\">\n      <label for=\"initialUserPrompt\" class=\"form-label\">Initial user prompt</label>\n      <textarea class=\"form-control\" id=\"initialUserPrompt\" [(ngModel)]=\"config.defaultValues.userPrompt\"></textarea>\n    </div>\n\n  </div>\n\n  <div class=\"buttons-panel d-flex justify-content-end\">\n    <button class=\"btn btn-light me-1\" (click)=\"cancel()\">Cancel</button>\n    <button class=\"btn btn-primary\" *ngIf=\"config\" (click)=\"save()\">Save</button>\n  </div>\n\n</div>\n", styles: [":host{display:block;width:var(--ast-chat-settings-width, 100%);max-width:100%;height:100%;margin-left:auto;margin-right:auto;padding-top:var(--ast-chat-settings-padding-top, 0);padding-bottom:var(--ast-chat-settings-padding-bottom, 0)}.sq-chat-settings{display:flex;flex-direction:column;height:100%}.sq-chat-settings .settings-panel{flex-grow:1;overflow:auto}.sq-chat-settings .buttons-panel{padding-top:.5rem}\n"] }]
         }], propDecorators: { instanceId: [{
                 type: Input
             }], _update: [{
@@ -245,6 +255,8 @@ const savedChatSettingsSchema = z.object({
 // Define the Zod representation for the globalSettings object
 const globalSettingsSchema = z.object({
     disclaimer: z.string().optional(),
+    displayUserQuotaConsumption: z.boolean().optional(),
+    displayChatTokensConsumption: z.boolean().optional()
 });
 // Define the Zod representation for the entire ChatConfig object
 const chatConfigSchema = z.object({
@@ -271,6 +283,14 @@ class ChatService {
         this.savedChats$ = new BehaviorSubject([]);
         /** Emit the saved chat to load */
         this.loadSavedChat$ = new BehaviorSubject(undefined);
+        /** Emit the quota each time the chat is invoked */
+        this.quota$ = new BehaviorSubject(undefined);
+        /** Emit the calculated user's token consumption based on the quota */
+        this.userTokenConsumption$ = new BehaviorSubject(undefined);
+        /** Emit the chat usage metrics each time the generation of the assistant response is completed */
+        this.chatUsageMetrics$ = new BehaviorSubject(undefined);
+        /** Emit the calculated chat's token consumption based on the chat usage metrics */
+        this.chatTokenConsumption$ = new BehaviorSubject(undefined);
         this.userSettingsService = inject(UserSettingsWebService);
         this.notificationsService = inject(NotificationsService);
         this.auditService = inject(AuditWebService);
@@ -355,7 +375,7 @@ class ChatService {
                         confirmType: 2 /* ConfirmType.Warning */
                     }).then(res => {
                         if (res === -1 /* ModalResult.OK */) {
-                            const hashes = { "applied-defaultValues-hash": currentDefaultValuesHash, "skipped-defaultValues-hash": undefined };
+                            const hashes = { ...userSettingsConfig.hashes, "applied-defaultValues-hash": currentDefaultValuesHash, "skipped-defaultValues-hash": undefined };
                             // Update the chat config and store its defaultValues in the user preferences
                             this.updateChatConfig({ ...standardChatConfig }, hashes, true);
                             this.initConfig$.next(true);
@@ -387,6 +407,7 @@ class ChatService {
     /**
      * Update the chat config and store its defaultValues in the user preferences
      * @param config  The updated chat config
+     * @param hashes  The updated hashes to store in the user preferences
      * @param notify  Whether to notify the user about the update
      * @param successCallback  The callback to execute if the update is successful
      * @param errorCallback  The callback to execute if the update fails
@@ -394,7 +415,9 @@ class ChatService {
     updateChatConfig(config, hashes, notify = true, successCallback, errorCallback) {
         this.chatConfig$.next(config);
         const assistants = Object.assign({}, this.assistants);
-        assistants[this.chatInstanceId] = { ...assistants[this.chatInstanceId], defaultValues: config.defaultValues, hashes };
+        assistants[this.chatInstanceId] = { ...assistants[this.chatInstanceId], defaultValues: config.defaultValues };
+        if (hashes)
+            assistants[this.chatInstanceId].hashes = hashes;
         this.userSettingsService.patch({ assistants }).subscribe(next => { }, error => {
             if (notify) {
                 errorCallback ? errorCallback() : this.notificationsService.error(`The update of the assistant instance '${this.chatInstanceId}' configuration failed`);
@@ -406,6 +429,35 @@ class ChatService {
             }
         });
     }
+    /**
+     * A handler for quota updates each time the chat is invoked.
+     * It emits the updated quota to the quota$ subject, emits accordingly the updated user's tokens consumption and notifies the user if the max quota is reached.
+     * @param quota The updated quota
+     * @param propagateError Whether to propagate the error to the caller
+     */
+    updateQuota(quota, propagateError = false) {
+        this.quota$.next(quota);
+        const nextResetDate = this.formatDateTime(quota.nextResetUTC + "+00:00"); // This +00:00 is to ensure dates will be properly converted to local time
+        const consumptionPercentage = Math.round((quota.tokenCount * 100 / quota.periodTokens) * 100) / 100;
+        this.userTokenConsumption$.next({ percentage: consumptionPercentage, nextResetDate });
+        if (quota.maxQuotaReached) {
+            const msg = `Sorry, you have exceeded the allowed quota. Please retry starting from ${nextResetDate}.`;
+            this.notificationsService.error(msg);
+            if (propagateError)
+                throw new Error(msg);
+        }
+    }
+    /**
+     * A handler for chat usage metrics each time the generation of the assistant response is completed.
+     * It emits the chat usage metrics to the chatUsageMetrics$ subject, emits accordingly the updated chat's tokens consumption
+     * @param chatUsageMetrics The chat usage metrics
+     */
+    updateChatUsageMetrics(chatUsageMetrics) {
+        this.chatUsageMetrics$.next(chatUsageMetrics);
+        const currentModel = this.getModel(this.chatConfig$.value.defaultValues.service_id, this.chatConfig$.value.defaultValues.model_id);
+        const consumptionPercentage = Math.round((chatUsageMetrics.totalTokenCount * 100 / (currentModel.contextWindowSize - currentModel.maxGenerationSize)) * 100) / 100;
+        this.chatTokenConsumption$.next({ percentage: consumptionPercentage });
+    }
     /**
      * Get the model description for the given (serviceId + modelId)
      * If a model is not found, an error message is returned
@@ -450,7 +502,8 @@ class ChatService {
      * @returns A formatted local date string
      */
     formatDateTime(value) {
-        return this.intlService["formatTime"](value, { day: "numeric", month: "short", year: "numeric" });
+        const localDate = toDate(parseISO(value));
+        return this.intlService["formatTime"](localDate, { day: "numeric", month: "short", year: "numeric", timeZoneName: 'short' });
     }
     /**
      * Takes a text prompt that may contain placeholders for variables
@@ -483,6 +536,7 @@ class WebSocketChatService extends ChatService {
         this._progress = undefined;
         this._content = "";
         this._attachments = [];
+        this._suggestedActions = [];
         this.signalRService = inject(SignalRWebService);
         this.authenticationService = inject(AuthenticationService);
     }
@@ -618,6 +672,7 @@ class WebSocketChatService extends ChatService {
             this._content = ""; // Clear the _content
             this._progress = undefined; // Clear the _progress
             this._attachments = []; // Clear the _attachments
+            this._suggestedActions = []; // Clear the _suggestedActions
             this._executionTime = ""; // Clear the _executionTime
             completion$.next(); // Emit a signal to complete the observables
             completion$.complete(); // Complete the subject
@@ -634,9 +689,9 @@ class WebSocketChatService extends ChatService {
                     time: a.executionTime,
                 }))
                 : undefined;
-            // As soon as the first _content or $progress is defined, the assistant is considered as streaming
-            if (!!this._content || this._progress || this._attachments.length > 0) {
-                response = { ...response, content: this._content, additionalProperties: { ...response.additionalProperties, $progress: this._progress, $attachment: this._attachments } };
+            // As soon as the first _content, $progress, _attachments or __suggestedActions is defined and not empty, the assistant is considered as streaming
+            if (!!this._content || this._progress || this._attachments.length > 0 || this._suggestedActions.length > 0) {
+                response = { ...response, content: this._content, additionalProperties: { ...response.additionalProperties, $progress: this._progress, $attachment: this._attachments, $suggestedAction: this._suggestedActions } };
             }
             // Return the result
             return { history: [...messages, response], executionTime: this._executionTime };
@@ -774,6 +829,9 @@ class WebSocketChatService extends ChatService {
                 // Re-attach the $progress and $attachment of the last response to the last assistant's response in the chat history
                 this.chatHistory.at(-1).additionalProperties.$progress = this._progress;
                 this.chatHistory.at(-1).additionalProperties.$attachment = this._attachments;
+                this.chatHistory.at(-1).additionalProperties.$suggestedAction = this._suggestedActions;
+                // Emit the updated chat usage metrics once the generation of the assistant response is completed
+                this.updateChatUsageMetrics(this.chatHistory.at(-1).additionalProperties.usageMetrics);
                 // Save/update the chat if savedChat enabled
                 if (this.chatConfig$.value.savedChatSettings.enabled && this.chatHistory.some((msg) => msg.additionalProperties?.isUserInput === true)) {
                     const action = !this.savedChatId ? this.addSavedChat(this.chatHistory) : this.updateSavedChat(this.savedChatId, undefined, this.chatHistory);
@@ -791,14 +849,15 @@ class WebSocketChatService extends ChatService {
             isGlobalHandler: true
         });
         this.addMessageHandler("Quota", {
+            handler: (message) => this.updateQuota(message.quota),
+            isGlobalHandler: true
+        });
+        this.addMessageHandler("SuggestedActions", {
             handler: (message) => {
-                if (message.quota.maxQuotaReached) {
-                    const msg = `Sorry, you have exceeded the allowed quota. Please retry starting from ${this.formatDateTime(message.quota.nextResetUTC)}.`;
-                    console.error(msg);
-                    this.notificationsService.error(msg);
-                }
+                // Suggested actions are concatenated to the existing ones in case of multiple events "SuggestedActions"
+                this._suggestedActions = this._suggestedActions.concat(message.suggestedActions);
             },
-            isGlobalHandler: true
+            isGlobalHandler: false
         });
     }
     /**
@@ -1184,10 +1243,10 @@ class ChatReferenceComponent {
     }
 }
 ChatReferenceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ChatReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChatReferenceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ChatReferenceComponent, isStandalone: true, selector: "sq-chat-reference", inputs: { reference: "reference", attachment: "attachment", partId: "partId" }, outputs: { openDocument: "openDocument", openPreview: "openPreview" }, ngImport: i0, template: "<div [class.reference-tooltip]=\"!!partId\">\n    <div class=\"reference-data\" [class.expanded]=\"attachment['$expanded'] || !!partId\">\n        <span class=\"reference me-1\">{{reference}}</span>\n        <sq-format-icon [extension]=\"attachment.record.fileext\"></sq-format-icon>\n        <a [id]=\"'attachment-'+attachment.recordId\" (click)=\"expandAttachment()\">\n            {{attachment.record.title}}\n        </a>\n        <i class=\"fas fa-eye\" (click)=\"openPreview.emit(attachment)\" [sqTooltip]=\"!partId ? 'Preview document' : ''\"></i>\n        <i class=\"fas fa-arrow-up-right-from-square\" *ngIf=\"attachment.record.url1 || attachment.record.originalUrl\"\n            (click)=\"openDocument.emit(attachment.record)\" [sqTooltip]=\"!partId ? 'Open document' : ''\"></i>\n    </div>\n    <div class=\"reference-passages\" *ngIf=\"!!partId || (attachment['$expanded']) && parts.length\">\n        <div class=\"reference-passage\" *ngFor=\"let part of parts\">\n            <span class=\"reference me-1\">{{reference}}.{{part.partId}}</span>\n            <span [innerHTML]=\"part.text\"></span>\n        </div>\n    </div>\n</div>", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference,:host ::ng-deep .attachment .reference{position:relative;bottom:var(--ast-reference-bottom, .3em);font-weight:var(--ast-reference-font-weight, bold);padding:var(--ast-reference-padding, 0 .2em);margin:var(--ast-reference-margin, 0 .1em);border-radius:var(--ast-reference-border-radius, .2em);background-color:var(--ast-reference-background-color, lightblue);color:var(--ast-reference-color, black)}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference{font-size:var(--ast-reference-message-font-size, .7em)}:host ::ng-deep .attachment .reference{font-size:var(--ast-reference-attachment-font-size, 13px)}:host{display:block}:host.expanded,:host:hover{background-color:var(--ast-reference-expanded-hover-bg, white)}.reference-data{display:flex;flex-direction:row;align-items:baseline;padding:var(--ast-size-1, .25rem)}.reference-data a{color:var(--ast-secondary-color, #FF732E);flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--font-weight-bold, 500);cursor:pointer}.reference-data i{padding:var(--ast-size-1, .25rem);margin-left:var(--ast-size-1, .25rem);cursor:pointer;color:var(--ast-reference-icon-color, black)}.reference-data i.active{color:var(--ast-reference-icon-active-color, white);background-color:var(--ast-secondary-color, #FF732E)}.reference-data:not(.expanded) i{opacity:0}.reference-data:not(.expanded):hover i{opacity:1}.reference-passages{white-space:normal;font-style:italic;font-weight:400;padding:1rem 0;color:var(--ast-reference-passages-color, black)}.reference-passages .reference-passage{display:flex;align-items:baseline;padding-left:2.5rem;padding-right:1rem;word-wrap:break-word}.reference-passages .reference-passage+.reference-passage{padding-top:1rem}.reference-passages .reference-passage .reference{margin-right:var(--ast-size-2, .5rem)}sq-format-icon{margin-left:var(--ast-size-1, .25rem);margin-right:var(--ast-size-2, .5rem);color:var(--ast-secondary-color, #FF732E)}.reference-tooltip{max-width:600px!important;box-shadow:0 .5rem 1rem #00000026;padding:.5rem;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UtilsModule }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[sqTooltip]", inputs: ["sqTooltip", "sqTooltipData", "sqTooltipTemplate", "placement", "fallbackPlacements", "delay", "hoverableTooltip", "tooltipClass"] }, { kind: "component", type: FormatIconComponent, selector: "sq-format-icon", inputs: ["extension"] }] });
+ChatReferenceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ChatReferenceComponent, isStandalone: true, selector: "sq-chat-reference", inputs: { reference: "reference", attachment: "attachment", partId: "partId" }, outputs: { openDocument: "openDocument", openPreview: "openPreview" }, ngImport: i0, template: "<div [class.reference-tooltip]=\"!!partId\">\n    <div class=\"reference-data\" [class.expanded]=\"attachment['$expanded'] || !!partId\">\n        <span class=\"reference me-1\">{{reference}}</span>\n        <sq-format-icon [extension]=\"attachment.record.fileext\"></sq-format-icon>\n        <a [id]=\"'attachment-'+attachment.recordId\" (click)=\"expandAttachment()\">\n            {{attachment.record.title}}\n        </a>\n        <i class=\"fas fa-eye\" (click)=\"openPreview.emit(attachment)\" [sqTooltip]=\"!partId ? 'Preview document' : ''\"></i>\n        <i class=\"fas fa-arrow-up-right-from-square\" *ngIf=\"attachment.record.url1 || attachment.record.originalUrl\"\n            (click)=\"openDocument.emit(attachment.record)\" [sqTooltip]=\"!partId ? 'Open document' : ''\"></i>\n    </div>\n    <div class=\"reference-passages\" *ngIf=\"!!partId || (attachment['$expanded']) && parts.length\">\n        <div class=\"reference-passage\" *ngFor=\"let part of parts\">\n            <span class=\"reference me-1\">{{reference}}.{{part.partId}}</span>\n            <span [innerHTML]=\"part.text\"></span>\n        </div>\n    </div>\n</div>", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference,:host ::ng-deep .attachment .reference{position:relative;bottom:var(--ast-reference-bottom, .3em);font-weight:var(--ast-reference-font-weight, bold);padding:var(--ast-reference-padding, 0 .2em);margin:var(--ast-reference-margin, 0 .1em);border-radius:var(--ast-reference-border-radius, .2em);background-color:var(--ast-reference-background-color, lightblue);color:var(--ast-reference-color, black)}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference{font-size:var(--ast-reference-message-font-size, .7em)}:host ::ng-deep .attachment .reference{font-size:var(--ast-reference-attachment-font-size, 13px)}:host{display:block}:host.expanded,:host:hover{background-color:var(--ast-reference-expanded-hover-bg, white)}.reference-data{display:flex;flex-direction:row;align-items:baseline;padding:var(--ast-size-1, .25rem)}.reference-data a{color:var(--ast-secondary-color, #FF732E);flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--font-weight-bold, 500);cursor:pointer}.reference-data i{padding:var(--ast-size-1, .25rem);margin-left:var(--ast-size-1, .25rem);cursor:pointer;color:var(--ast-reference-icon-color, black)}.reference-data i.active{color:var(--ast-reference-icon-active-color, white);background-color:var(--ast-secondary-color, #FF732E)}.reference-data:not(.expanded) i{opacity:0}.reference-data:not(.expanded):hover i{opacity:1}.reference-passages{white-space:normal;font-style:italic;font-weight:400;padding:1rem 0;color:var(--ast-reference-passages-color, black)}.reference-passages .reference-passage{display:flex;align-items:baseline;padding-left:2.5rem;padding-right:1rem;word-wrap:break-word}.reference-passages .reference-passage+.reference-passage{padding-top:1rem}.reference-passages .reference-passage .reference{white-space:nowrap;margin-right:var(--ast-size-2, .5rem)}sq-format-icon{margin-left:var(--ast-size-1, .25rem);margin-right:var(--ast-size-2, .5rem);color:var(--ast-secondary-color, #FF732E)}.reference-tooltip{max-width:600px!important;box-shadow:0 .5rem 1rem #00000026;padding:.5rem;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UtilsModule }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[sqTooltip]", inputs: ["sqTooltip", "sqTooltipData", "sqTooltipTemplate", "placement", "fallbackPlacements", "delay", "hoverableTooltip", "tooltipClass"] }, { kind: "component", type: FormatIconComponent, selector: "sq-format-icon", inputs: ["extension"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ChatReferenceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sq-chat-reference', standalone: true, imports: [CommonModule, UtilsModule, FormatIconComponent], template: "<div [class.reference-tooltip]=\"!!partId\">\n    <div class=\"reference-data\" [class.expanded]=\"attachment['$expanded'] || !!partId\">\n        <span class=\"reference me-1\">{{reference}}</span>\n        <sq-format-icon [extension]=\"attachment.record.fileext\"></sq-format-icon>\n        <a [id]=\"'attachment-'+attachment.recordId\" (click)=\"expandAttachment()\">\n            {{attachment.record.title}}\n        </a>\n        <i class=\"fas fa-eye\" (click)=\"openPreview.emit(attachment)\" [sqTooltip]=\"!partId ? 'Preview document' : ''\"></i>\n        <i class=\"fas fa-arrow-up-right-from-square\" *ngIf=\"attachment.record.url1 || attachment.record.originalUrl\"\n            (click)=\"openDocument.emit(attachment.record)\" [sqTooltip]=\"!partId ? 'Open document' : ''\"></i>\n    </div>\n    <div class=\"reference-passages\" *ngIf=\"!!partId || (attachment['$expanded']) && parts.length\">\n        <div class=\"reference-passage\" *ngFor=\"let part of parts\">\n            <span class=\"reference me-1\">{{reference}}.{{part.partId}}</span>\n            <span [innerHTML]=\"part.text\"></span>\n        </div>\n    </div>\n</div>", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference,:host ::ng-deep .attachment .reference{position:relative;bottom:var(--ast-reference-bottom, .3em);font-weight:var(--ast-reference-font-weight, bold);padding:var(--ast-reference-padding, 0 .2em);margin:var(--ast-reference-margin, 0 .1em);border-radius:var(--ast-reference-border-radius, .2em);background-color:var(--ast-reference-background-color, lightblue);color:var(--ast-reference-color, black)}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference{font-size:var(--ast-reference-message-font-size, .7em)}:host ::ng-deep .attachment .reference{font-size:var(--ast-reference-attachment-font-size, 13px)}:host{display:block}:host.expanded,:host:hover{background-color:var(--ast-reference-expanded-hover-bg, white)}.reference-data{display:flex;flex-direction:row;align-items:baseline;padding:var(--ast-size-1, .25rem)}.reference-data a{color:var(--ast-secondary-color, #FF732E);flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--font-weight-bold, 500);cursor:pointer}.reference-data i{padding:var(--ast-size-1, .25rem);margin-left:var(--ast-size-1, .25rem);cursor:pointer;color:var(--ast-reference-icon-color, black)}.reference-data i.active{color:var(--ast-reference-icon-active-color, white);background-color:var(--ast-secondary-color, #FF732E)}.reference-data:not(.expanded) i{opacity:0}.reference-data:not(.expanded):hover i{opacity:1}.reference-passages{white-space:normal;font-style:italic;font-weight:400;padding:1rem 0;color:var(--ast-reference-passages-color, black)}.reference-passages .reference-passage{display:flex;align-items:baseline;padding-left:2.5rem;padding-right:1rem;word-wrap:break-word}.reference-passages .reference-passage+.reference-passage{padding-top:1rem}.reference-passages .reference-passage .reference{margin-right:var(--ast-size-2, .5rem)}sq-format-icon{margin-left:var(--ast-size-1, .25rem);margin-right:var(--ast-size-2, .5rem);color:var(--ast-secondary-color, #FF732E)}.reference-tooltip{max-width:600px!important;box-shadow:0 .5rem 1rem #00000026;padding:.5rem;font-size:.875rem}\n"] }]
+            args: [{ selector: 'sq-chat-reference', standalone: true, imports: [CommonModule, UtilsModule, FormatIconComponent], template: "<div [class.reference-tooltip]=\"!!partId\">\n    <div class=\"reference-data\" [class.expanded]=\"attachment['$expanded'] || !!partId\">\n        <span class=\"reference me-1\">{{reference}}</span>\n        <sq-format-icon [extension]=\"attachment.record.fileext\"></sq-format-icon>\n        <a [id]=\"'attachment-'+attachment.recordId\" (click)=\"expandAttachment()\">\n            {{attachment.record.title}}\n        </a>\n        <i class=\"fas fa-eye\" (click)=\"openPreview.emit(attachment)\" [sqTooltip]=\"!partId ? 'Preview document' : ''\"></i>\n        <i class=\"fas fa-arrow-up-right-from-square\" *ngIf=\"attachment.record.url1 || attachment.record.originalUrl\"\n            (click)=\"openDocument.emit(attachment.record)\" [sqTooltip]=\"!partId ? 'Open document' : ''\"></i>\n    </div>\n    <div class=\"reference-passages\" *ngIf=\"!!partId || (attachment['$expanded']) && parts.length\">\n        <div class=\"reference-passage\" *ngFor=\"let part of parts\">\n            <span class=\"reference me-1\">{{reference}}.{{part.partId}}</span>\n            <span [innerHTML]=\"part.text\"></span>\n        </div>\n    </div>\n</div>", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference,:host ::ng-deep .attachment .reference{position:relative;bottom:var(--ast-reference-bottom, .3em);font-weight:var(--ast-reference-font-weight, bold);padding:var(--ast-reference-padding, 0 .2em);margin:var(--ast-reference-margin, 0 .1em);border-radius:var(--ast-reference-border-radius, .2em);background-color:var(--ast-reference-background-color, lightblue);color:var(--ast-reference-color, black)}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference{font-size:var(--ast-reference-message-font-size, .7em)}:host ::ng-deep .attachment .reference{font-size:var(--ast-reference-attachment-font-size, 13px)}:host{display:block}:host.expanded,:host:hover{background-color:var(--ast-reference-expanded-hover-bg, white)}.reference-data{display:flex;flex-direction:row;align-items:baseline;padding:var(--ast-size-1, .25rem)}.reference-data a{color:var(--ast-secondary-color, #FF732E);flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--font-weight-bold, 500);cursor:pointer}.reference-data i{padding:var(--ast-size-1, .25rem);margin-left:var(--ast-size-1, .25rem);cursor:pointer;color:var(--ast-reference-icon-color, black)}.reference-data i.active{color:var(--ast-reference-icon-active-color, white);background-color:var(--ast-secondary-color, #FF732E)}.reference-data:not(.expanded) i{opacity:0}.reference-data:not(.expanded):hover i{opacity:1}.reference-passages{white-space:normal;font-style:italic;font-weight:400;padding:1rem 0;color:var(--ast-reference-passages-color, black)}.reference-passages .reference-passage{display:flex;align-items:baseline;padding-left:2.5rem;padding-right:1rem;word-wrap:break-word}.reference-passages .reference-passage+.reference-passage{padding-top:1rem}.reference-passages .reference-passage .reference{white-space:nowrap;margin-right:var(--ast-size-2, .5rem)}sq-format-icon{margin-left:var(--ast-size-1, .25rem);margin-right:var(--ast-size-2, .5rem);color:var(--ast-secondary-color, #FF732E)}.reference-tooltip{max-width:600px!important;box-shadow:0 .5rem 1rem #00000026;padding:.5rem;font-size:.875rem}\n"] }]
         }], propDecorators: { reference: [{
                 type: Input
             }], attachment: [{
@@ -1210,13 +1269,15 @@ class ChatMessageComponent {
         this.canEdit = false;
         this.canRegenerate = false;
         this.canCopy = false;
-        this.referenceClicked = new EventEmitter();
+        this.openDocument = new EventEmitter();
+        this.openPreview = new EventEmitter();
+        this.suggestAction = new EventEmitter();
         this.edit = new EventEmitter();
         this.regenerate = new EventEmitter();
-        this.openPreview = new EventEmitter();
         this.references = [];
         this.referenceMap = new Map();
         this.showReferences = true;
+        this.iconSize = 24;
         /**
          * This Unified plugin looks a text nodes and replaces any reference in the
          * form [1], [2.3], etc. with custom nodes of type "chat-reference".
@@ -1283,7 +1344,7 @@ class ChatMessageComponent {
         if (changes.streaming) {
             this.collapseProgress = !this.streaming;
         }
-        if (changes.message && this.message.role === "assistant") {
+        if (changes.message && this.message?.role === "assistant") {
             this.references = [];
             this.referenceMap.clear();
             for (let m of this.conversation) {
@@ -1309,14 +1370,6 @@ class ChatMessageComponent {
     ngAfterViewInit() {
         Prism?.highlightAllUnder?.(this.el.nativeElement);
     }
-    openDocument(record) {
-        const url = record.url1 || record.originalUrl;
-        if (url) {
-            // Open the URL in a new tab
-            window.open(url, '_blank');
-        }
-        this.referenceClicked.emit(record);
-    }
     getLinkText(node) {
         if (node.text) {
             return node.text; // Return directly if text is provided in node.text ([Example link](https://example.com))
@@ -1354,15 +1407,17 @@ class ChatMessageComponent {
     }
 }
 ChatMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ChatMessageComponent, deps: [{ token: i1$1.SearchService }, { token: i2$1.UIService }, { token: i3.PrincipalWebService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ChatMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ChatMessageComponent, isStandalone: true, selector: "sq-chat-message", inputs: { message: "message", conversation: "conversation", assistantMessageIcon: "assistantMessageIcon", userMessageIcon: "userMessageIcon", streaming: "streaming", canEdit: "canEdit", canRegenerate: "canRegenerate", canCopy: "canCopy" }, outputs: { referenceClicked: "referenceClicked", edit: "edit", regenerate: "regenerate", openPreview: "openPreview" }, usesOnChanges: true, ngImport: i0, template: "<!-- Message icon -->\n<span class=\"message-icon\" [title]=\"message.role\">\n  <i [ngClass]=\"assistantMessageIcon\" [style.--sq-size.px]=\"24\" *ngIf=\"message.role === 'assistant'\"></i>\n  <ng-container *ngIf=\"message.role === 'user'\">\n    <i [ngClass]=\"userMessageIcon\" [style.--sq-size.px]=\"24\" *ngIf=\"!!userMessageIcon; else initialsAvatar\"></i>\n    <ng-template #initialsAvatar>\n      <sq-initials-avatar [fullName]=\"name\"></sq-initials-avatar>\n    </ng-template>\n  </ng-container>\n</span>\n\n<!-- Message body -->\n<div class=\"flex-grow-1\" style=\"min-width: 0;\" [ngClass]=\"'message-'+message.role\">\n\n  <div *ngIf=\"message.additionalProperties.$progress as progress\" class=\"small ms-3 mb-2\">\n    <a href=\"#\" (click)=\"collapseProgress = !collapseProgress; false\" class=\"text-muted\">\n      View progress\n      <i class=\"fas fa-chevron-{{collapseProgress? 'right' : 'down'}}\"></i>\n    </a>\n    <sq-collapse [collapsed]=\"collapseProgress\">\n      <ng-template>\n        <ul class=\"list-unstyled\">\n          <li *ngFor=\"let step of progress\">\n            <i class=\"fas fa-fw fa-check text-success\" *ngIf=\"step.done\"></i>\n            <i class=\"fas fa-fw fa-spin fa-circle-notch\" *ngIf=\"!step.done\"></i>\n            <span class=\"ms-2 fw-bold\">{{step.title}}</span>\n            <span *ngIf=\"step.content\">: {{step.content}}</span>\n          </li>\n        </ul>\n      </ng-template>\n    </sq-collapse>\n  </div>\n\n  <div class=\"message-content\" *ngIf=\"message.content\">\n\n    <remark *ngIf=\"message.role === 'assistant'\" [markdown]=\"message.content\" [processor]=\"processor\">\n\n      <ng-template remarkTemplate=\"chat-reference\" let-ref>\n\n        <a *ngIf=\"referenceMap.get(ref.refId) as attachment; else staticRefTpl\"\n          (click)=\"openDocument(attachment.record)\"\n          class=\"reference\"\n          [sqTooltip]=\"attachment\"\n          [sqTooltipTemplate]=\"tooltipTpl\"\n          [hoverableTooltip]=\"true\"\n          >{{ref.refId}}</a>\n\n        <ng-template #staticRefTpl>\n          <span class=\"reference\">{{ref.refId}}</span>\n        </ng-template>\n\n      </ng-template>\n\n      <ng-template remarkTemplate=\"streaming-placeholder\">\n        <span class=\"placeholder-glow\" *ngIf=\"streaming\">\n          <span class=\"placeholder ms-1\"></span>\n        </span>\n      </ng-template>\n\n      <ng-template remarkTemplate=\"code\" let-node>\n        <div class=\"card mb-2\">\n          <div class=\"card-header d-flex justify-content-between align-items-center\">\n            <span>{{node.lang}}</span>\n            <button class=\"btn btn-light btn-sm\" (click)=\"copyToClipboard(node.value)\"><i class=\"far fa-fw fa-clipboard\"></i> Copy code</button>\n          </div>\n          <pre class=\"language-{{node.lang}} my-0 rounded-0 rounded-bottom\"><code class=\"language-{{node.lang}}\">{{node.value}}</code></pre>\n        </div>\n      </ng-template>\n\n      <ng-template remarkTemplate=\"link\" let-node>\n        <a [href]=\"node.url\" target=\"_blank\" rel=\"noopener noreferrer\">{{getLinkText(node)}}</a>\n      </ng-template>\n\n    </remark>\n\n    <p *ngIf=\"message.role === 'user'\">{{message.content}}</p>\n\n    <!-- List of reference, if any -->\n    <div *ngIf=\"references?.length\" class=\"references\">\n      <span class=\"references-title\">References</span> <i class=\"fas references-collapse\" [class.fa-chevron-down]=\"showReferences\" [class.fa-chevron-right]=\"!showReferences\" (click)=\"showReferences=!showReferences\"></i>\n      <sq-collapse [collapsed]=\"!showReferences\">\n        <ng-template>\n          <ul>\n            <ng-container *ngFor=\"let reference of references\">\n              <li *ngIf=\"referenceMap.get(reference) as attachment\"  class=\"text-truncate\">\n                <sq-chat-reference [class.expanded]=\"attachment.$expanded\" [attachment]=\"attachment\" [reference]=\"reference\"\n                  (openPreview)=\"openPreview.emit($event)\" (openDocument)=\"openDocument($event)\"></sq-chat-reference>\n              </li>\n            </ng-container>\n          </ul>\n        </ng-template>\n      </sq-collapse>\n    </div>\n\n  </div>\n\n    <!-- Edit / Regenerate floating actions -->\n  <div class=\"sq-chat-message-action\">\n    <button class=\"btn btn-sm\" *ngIf=\"canEdit\" sqTooltip=\"Edit message\"\n            (click)=\"edit.emit(message)\">\n      <i class=\"fas fa-edit\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canCopy\" sqTooltip=\"Copy to clipboard\"\n            (click)=\"copyToClipboard(message.content)\">\n      <i class=\"far fa-clipboard\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canRegenerate\" sqTooltip=\"Regenerate message\"\n            (click)=\"regenerate.emit(message)\">\n      <i class=\"fas fa-sync-alt\"></i>\n    </button>\n  </div>\n\n  <ng-template #tooltipTpl let-ref>\n    <sq-chat-reference class=\"expanded\"\n                        [attachment]=\"ref\"\n                        [reference]=\"ref.contextId\"\n                        [partId]=\"ref.$partId\"\n                        (openPreview)=\"openPreview.emit($event)\"\n                        (openDocument)=\"openDocument($event)\">\n      </sq-chat-reference>\n  </ng-template>\n\n</div>\n", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host{display:flex}:host:not(:hover) .sq-chat-message-action{display:none}.message-content{padding:var(--ast-message-padding, var(--ast-size-3, .75rem));border-radius:var(--ast-message-border-radius, var(--ast-size-4, 1rem));display:inline-block;max-width:100%;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.message-content .references{margin-top:var(--ast-size-5, 1.25rem)}.message-content .references ul{border-left:.2rem solid var(--ast-secondary-color, #FF732E);padding-left:var(--ast-size-5, 1.25rem);margin-top:var(--ast-size-2, .5rem)}.message-content .references .references-title{font-weight:var(--font-weight-bold, 500)}.message-content .references .references-collapse{cursor:pointer;margin-left:var(--ast-size-2, .5rem)}.message-content ::ng-deep p:last-child{margin-bottom:0}.message-content ::ng-deep .placeholder-glow .placeholder{animation-duration:.4s;width:12px;height:var(--ast-size-4, 1rem);vertical-align:text-bottom}.message-content ::ng-deep img{max-width:100%}.message-content ::ng-deep table{display:block;border:1px solid;border-color:var(--ast-message-table-border-color, #ccc);border-collapse:collapse;margin:0;padding:0;min-width:100%;overflow-x:auto;table-layout:fixed}.message-content ::ng-deep table tr{background-color:var(--ast-message-table-tr-bg, #f8f8f8);border:1px solid;border-color:var(--ast-message-table-tr-border-color, #ddd);padding:.35em}.message-content ::ng-deep table th,.message-content ::ng-deep table td{padding:.625em;text-align:center}.message-content ::ng-deep table th{font-size:.85em;letter-spacing:.1em;text-transform:uppercase}.message-content ::ng-deep .reference{color:var(--ast-message-reference-color, black)!important}.message-content ::ng-deep ul,.message-content ::ng-deep ol{display:flex;flex-direction:column;gap:.5rem;padding-right:2rem;margin-left:0;margin-right:0;padding-left:40px;unicode-bidi:-webkit-isolate;unicode-bidi:isolate;list-style:disc}.message-content ::ng-deep p{margin-top:.5rem}.message-assistant .message-content{background:var(--ast-secondary-bg, #FFF8F1)}.message-user .message-content{background:var(--ast-primary-bg, #f2f8fe);font-weight:var(--ast-user-font-weight, var(--font-weight-bold, 500))}.message-user .message-content p{white-space:pre-line}.sq-chat-message-action{position:absolute;right:calc(0rem - var(--ast-size-2, .5rem));top:0;display:flex;flex-direction:column}.message-icon{margin-top:var(--ast-size-3, .75rem);margin-right:var(--ast-size-4, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UtilsModule }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[sqTooltip]", inputs: ["sqTooltip", "sqTooltipData", "sqTooltipTemplate", "placement", "fallbackPlacements", "delay", "hoverableTooltip", "tooltipClass"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "component", type: i5.Collapse, selector: "sq-collapse", inputs: ["collapsed"] }, { kind: "ngmodule", type: RemarkModule }, { kind: "component", type: i6.RemarkComponent, selector: "remark", inputs: ["markdown", "processor", "debug"] }, { kind: "directive", type: i6.RemarkTemplateDirective, selector: "[remarkTemplate]", inputs: ["remarkTemplate"] }, { kind: "component", type: InitialsAvatarComponent, selector: "sq-initials-avatar", inputs: ["fullName", "size"] }, { kind: "component", type: ChatReferenceComponent, selector: "sq-chat-reference", inputs: ["reference", "attachment", "partId"], outputs: ["openDocument", "openPreview"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChatMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ChatMessageComponent, isStandalone: true, selector: "sq-chat-message", inputs: { message: "message", conversation: "conversation", suggestedActions: "suggestedActions", assistantMessageIcon: "assistantMessageIcon", userMessageIcon: "userMessageIcon", streaming: "streaming", canEdit: "canEdit", canRegenerate: "canRegenerate", canCopy: "canCopy" }, outputs: { openDocument: "openDocument", openPreview: "openPreview", suggestAction: "suggestAction", edit: "edit", regenerate: "regenerate" }, usesOnChanges: true, ngImport: i0, template: "<!-- Message icon -->\n<span class=\"message-icon\" [title]=\"message?.role\">\n  <i class=\"d-block\" [style.width.px]=\"iconSize\" *ngIf=\"!message\"></i>\n  <i [ngClass]=\"assistantMessageIcon\" [style.--sq-size.px]=\"iconSize\" *ngIf=\"message.role === 'assistant'\"></i>\n  <ng-container *ngIf=\"message?.role === 'user'\">\n    <i [ngClass]=\"userMessageIcon\" [style.--sq-size.px]=\"iconSize\" *ngIf=\"!!userMessageIcon; else initialsAvatar\"></i>\n    <ng-template #initialsAvatar>\n      <sq-initials-avatar [fullName]=\"name\"></sq-initials-avatar>\n    </ng-template>\n  </ng-container>\n</span>\n\n<!-- Message body -->\n<div class=\"flex-grow-1\" style=\"min-width: 0;\" [ngClass]=\"'message-'+message.role\">\n\n  <div *ngIf=\"message.additionalProperties.$progress as progress\" class=\"small ms-3 mb-2\">\n    <a href=\"#\" (click)=\"collapseProgress = !collapseProgress; false\" class=\"text-muted\">\n      View progress\n      <i class=\"fas fa-chevron-{{collapseProgress? 'right' : 'down'}}\"></i>\n    </a>\n    <sq-collapse [collapsed]=\"collapseProgress\">\n      <ng-template>\n        <ul class=\"list-unstyled\">\n          <li *ngFor=\"let step of progress\">\n            <i class=\"fas fa-fw fa-check text-success\" *ngIf=\"step.done\"></i>\n            <i class=\"fas fa-fw fa-spin fa-circle-notch\" *ngIf=\"!step.done\"></i>\n            <span class=\"ms-2 fw-bold\">{{step.title}}</span>\n            <span *ngIf=\"step.content\">: {{step.content}}</span>\n          </li>\n        </ul>\n      </ng-template>\n    </sq-collapse>\n  </div>\n\n  <div class=\"message-content\" *ngIf=\"message.content\">\n\n    <remark *ngIf=\"message?.role === 'assistant'\" [markdown]=\"message.content\" [processor]=\"processor\">\n\n      <ng-template remarkTemplate=\"chat-reference\" let-ref>\n\n        <a *ngIf=\"referenceMap.get(ref.refId) as attachment; else staticRefTpl\"\n          (click)=\"openDocument.emit(attachment.record)\"\n          class=\"reference\"\n          [sqTooltip]=\"attachment\"\n          [sqTooltipTemplate]=\"tooltipTpl\"\n          [hoverableTooltip]=\"true\"\n          >{{ref.refId}}</a>\n\n        <ng-template #staticRefTpl>\n          <span class=\"reference\">{{ref.refId}}</span>\n        </ng-template>\n\n      </ng-template>\n\n      <ng-template remarkTemplate=\"streaming-placeholder\">\n        <span class=\"placeholder-glow\" *ngIf=\"streaming\">\n          <span class=\"placeholder ms-1\"></span>\n        </span>\n      </ng-template>\n\n      <ng-template remarkTemplate=\"code\" let-node>\n        <div class=\"card mb-2\">\n          <div class=\"card-header d-flex justify-content-between align-items-center\">\n            <span>{{node.lang}}</span>\n            <button class=\"btn btn-light btn-sm\" (click)=\"copyToClipboard(node.value)\"><i class=\"far fa-fw fa-clipboard\"></i> Copy code</button>\n          </div>\n          <pre class=\"language-{{node.lang}} my-0 rounded-0 rounded-bottom\"><code class=\"language-{{node.lang}}\">{{node.value}}</code></pre>\n        </div>\n      </ng-template>\n\n      <ng-template remarkTemplate=\"link\" let-node>\n        <a [href]=\"node.url\" target=\"_blank\" rel=\"noopener noreferrer\">{{getLinkText(node)}}</a>\n      </ng-template>\n\n    </remark>\n\n    <p *ngIf=\"message?.role === 'user'\">{{message.content}}</p>\n\n    <!-- List of reference, if any -->\n    <div *ngIf=\"references?.length\" class=\"references\">\n      <span class=\"references-title\">References</span> <i class=\"fas references-collapse\" [class.fa-chevron-down]=\"showReferences\" [class.fa-chevron-right]=\"!showReferences\" (click)=\"showReferences=!showReferences\"></i>\n      <sq-collapse [collapsed]=\"!showReferences\">\n        <ng-template>\n          <ul>\n            <ng-container *ngFor=\"let reference of references\">\n              <li *ngIf=\"referenceMap.get(reference) as attachment\"  class=\"text-truncate\">\n                <sq-chat-reference [class.expanded]=\"attachment.$expanded\" [attachment]=\"attachment\" [reference]=\"reference\"\n                  (openPreview)=\"openPreview.emit($event)\" (openDocument)=\"openDocument.emit($event)\"></sq-chat-reference>\n              </li>\n            </ng-container>\n          </ul>\n        </ng-template>\n      </sq-collapse>\n    </div>\n\n  </div>\n\n    <!-- Edit / Regenerate floating actions -->\n  <div class=\"sq-chat-message-action\" *ngIf=\"message\">\n    <button class=\"btn btn-sm\" *ngIf=\"canEdit\" sqTooltip=\"Edit message\"\n            (click)=\"edit.emit(message)\">\n      <i class=\"fas fa-edit\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canCopy\" sqTooltip=\"Copy to clipboard\"\n            (click)=\"copyToClipboard(message.content)\">\n      <i class=\"far fa-clipboard\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canRegenerate\" sqTooltip=\"Regenerate message\"\n            (click)=\"regenerate.emit(message)\">\n      <i class=\"fas fa-sync-alt\"></i>\n    </button>\n  </div>\n\n  <!-- List of suggested actions, if any -->\n  <div *ngIf=\"suggestedActions\" class=\"mt-2 message-suggestion\">\n    <div class=\"suggested-action\" *ngFor=\"let suggestedAction of suggestedActions\" (click)=\"suggestAction.emit(suggestedAction)\">\n      <div class=\"message-content\">\n        <p><i class=\"fas fa-clipboard-question\"></i> {{suggestedAction.content}}</p>\n      </div>\n    </div>\n  </div>\n\n  <ng-template #tooltipTpl let-ref>\n    <sq-chat-reference class=\"expanded\"\n                        [attachment]=\"ref\"\n                        [reference]=\"ref.contextId\"\n                        [partId]=\"ref.$partId\"\n                        (openPreview)=\"openPreview.emit($event)\"\n                        (openDocument)=\"openDocument.emit($event)\">\n      </sq-chat-reference>\n  </ng-template>\n\n</div>\n", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host{display:flex}:host:not(:hover) .sq-chat-message-action{display:none}.message-content{padding:var(--ast-message-padding, var(--ast-size-3, .75rem));border-radius:var(--ast-message-border-radius, var(--ast-size-4, 1rem));display:inline-block;max-width:100%;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.message-content .references{margin-top:var(--ast-size-5, 1.25rem)}.message-content .references ul{border-left:.2rem solid var(--ast-secondary-color, #FF732E);padding-left:var(--ast-size-5, 1.25rem);margin-top:var(--ast-size-2, .5rem)}.message-content .references .references-title{font-weight:var(--font-weight-bold, 500)}.message-content .references .references-collapse{cursor:pointer;margin-left:var(--ast-size-2, .5rem)}.message-content ::ng-deep p:last-child{margin-bottom:0}.message-content ::ng-deep .placeholder-glow .placeholder{animation-duration:.4s;width:12px;height:var(--ast-size-4, 1rem);vertical-align:text-bottom}.message-content ::ng-deep img{max-width:100%}.message-content ::ng-deep table{display:block;border:1px solid;border-color:var(--ast-message-table-border-color, #ccc);border-collapse:collapse;margin:0;padding:0;min-width:100%;overflow-x:auto;table-layout:fixed}.message-content ::ng-deep table tr{background-color:var(--ast-message-table-tr-bg, #f8f8f8);border:1px solid;border-color:var(--ast-message-table-tr-border-color, #ddd);padding:.35em}.message-content ::ng-deep table th,.message-content ::ng-deep table td{padding:.625em;text-align:center}.message-content ::ng-deep table th{font-size:.85em;letter-spacing:.1em;text-transform:uppercase}.message-content ::ng-deep .reference{color:var(--ast-message-reference-color, black)!important}.message-content ::ng-deep ul,.message-content ::ng-deep ol{display:flex;flex-direction:column;gap:.5rem;padding-right:2rem;margin-left:0;margin-right:0;padding-left:40px;unicode-bidi:-webkit-isolate;unicode-bidi:isolate;list-style:disc}.message-content ::ng-deep p:not(:first-child){margin-top:.5rem}.message-assistant .message-content{background:var(--ast-secondary-bg, #FFF8F1)}.message-user .message-content{background:var(--ast-primary-bg, #f2f8fe);font-weight:var(--ast-user-font-weight, var(--font-weight-bold, 500))}.message-user .message-content p{white-space:pre-line}.message-suggestion .message-content{background:var(--ast-input-bg, #F8F8F8);font-weight:var(--ast-user-font-weight, var(--font-weight-bold, 500));transition:background-color .5s ease,color .5s ease}.message-suggestion .message-content:hover{background:var(--ast-primary-bg, #f2f8fe);color:var(--ast-primary-color, #005DA7)}.message-suggestion .message-content p{white-space:pre-line}.message-suggestion .suggested-action{cursor:pointer}.message-suggestion .suggested-action+.suggested-action{margin-top:var(--ast-size-2, .5rem)}.sq-chat-message-action{position:absolute;right:calc(0rem - var(--ast-size-2, .5rem));top:0;display:flex;flex-direction:column}.message-icon{margin-top:var(--ast-size-3, .75rem);margin-right:var(--ast-size-4, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UtilsModule }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[sqTooltip]", inputs: ["sqTooltip", "sqTooltipData", "sqTooltipTemplate", "placement", "fallbackPlacements", "delay", "hoverableTooltip", "tooltipClass"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "component", type: i5.Collapse, selector: "sq-collapse", inputs: ["collapsed"] }, { kind: "ngmodule", type: RemarkModule }, { kind: "component", type: i6.RemarkComponent, selector: "remark", inputs: ["markdown", "processor", "debug"] }, { kind: "directive", type: i6.RemarkTemplateDirective, selector: "[remarkTemplate]", inputs: ["remarkTemplate"] }, { kind: "component", type: InitialsAvatarComponent, selector: "sq-initials-avatar", inputs: ["fullName", "size"] }, { kind: "component", type: ChatReferenceComponent, selector: "sq-chat-reference", inputs: ["reference", "attachment", "partId"], outputs: ["openDocument", "openPreview"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ChatMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: "sq-chat-message", changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, UtilsModule, CollapseModule, RemarkModule,
-                        InitialsAvatarComponent, ChatReferenceComponent], template: "<!-- Message icon -->\n<span class=\"message-icon\" [title]=\"message.role\">\n  <i [ngClass]=\"assistantMessageIcon\" [style.--sq-size.px]=\"24\" *ngIf=\"message.role === 'assistant'\"></i>\n  <ng-container *ngIf=\"message.role === 'user'\">\n    <i [ngClass]=\"userMessageIcon\" [style.--sq-size.px]=\"24\" *ngIf=\"!!userMessageIcon; else initialsAvatar\"></i>\n    <ng-template #initialsAvatar>\n      <sq-initials-avatar [fullName]=\"name\"></sq-initials-avatar>\n    </ng-template>\n  </ng-container>\n</span>\n\n<!-- Message body -->\n<div class=\"flex-grow-1\" style=\"min-width: 0;\" [ngClass]=\"'message-'+message.role\">\n\n  <div *ngIf=\"message.additionalProperties.$progress as progress\" class=\"small ms-3 mb-2\">\n    <a href=\"#\" (click)=\"collapseProgress = !collapseProgress; false\" class=\"text-muted\">\n      View progress\n      <i class=\"fas fa-chevron-{{collapseProgress? 'right' : 'down'}}\"></i>\n    </a>\n    <sq-collapse [collapsed]=\"collapseProgress\">\n      <ng-template>\n        <ul class=\"list-unstyled\">\n          <li *ngFor=\"let step of progress\">\n            <i class=\"fas fa-fw fa-check text-success\" *ngIf=\"step.done\"></i>\n            <i class=\"fas fa-fw fa-spin fa-circle-notch\" *ngIf=\"!step.done\"></i>\n            <span class=\"ms-2 fw-bold\">{{step.title}}</span>\n            <span *ngIf=\"step.content\">: {{step.content}}</span>\n          </li>\n        </ul>\n      </ng-template>\n    </sq-collapse>\n  </div>\n\n  <div class=\"message-content\" *ngIf=\"message.content\">\n\n    <remark *ngIf=\"message.role === 'assistant'\" [markdown]=\"message.content\" [processor]=\"processor\">\n\n      <ng-template remarkTemplate=\"chat-reference\" let-ref>\n\n        <a *ngIf=\"referenceMap.get(ref.refId) as attachment; else staticRefTpl\"\n          (click)=\"openDocument(attachment.record)\"\n          class=\"reference\"\n          [sqTooltip]=\"attachment\"\n          [sqTooltipTemplate]=\"tooltipTpl\"\n          [hoverableTooltip]=\"true\"\n          >{{ref.refId}}</a>\n\n        <ng-template #staticRefTpl>\n          <span class=\"reference\">{{ref.refId}}</span>\n        </ng-template>\n\n      </ng-template>\n\n      <ng-template remarkTemplate=\"streaming-placeholder\">\n        <span class=\"placeholder-glow\" *ngIf=\"streaming\">\n          <span class=\"placeholder ms-1\"></span>\n        </span>\n      </ng-template>\n\n      <ng-template remarkTemplate=\"code\" let-node>\n        <div class=\"card mb-2\">\n          <div class=\"card-header d-flex justify-content-between align-items-center\">\n            <span>{{node.lang}}</span>\n            <button class=\"btn btn-light btn-sm\" (click)=\"copyToClipboard(node.value)\"><i class=\"far fa-fw fa-clipboard\"></i> Copy code</button>\n          </div>\n          <pre class=\"language-{{node.lang}} my-0 rounded-0 rounded-bottom\"><code class=\"language-{{node.lang}}\">{{node.value}}</code></pre>\n        </div>\n      </ng-template>\n\n      <ng-template remarkTemplate=\"link\" let-node>\n        <a [href]=\"node.url\" target=\"_blank\" rel=\"noopener noreferrer\">{{getLinkText(node)}}</a>\n      </ng-template>\n\n    </remark>\n\n    <p *ngIf=\"message.role === 'user'\">{{message.content}}</p>\n\n    <!-- List of reference, if any -->\n    <div *ngIf=\"references?.length\" class=\"references\">\n      <span class=\"references-title\">References</span> <i class=\"fas references-collapse\" [class.fa-chevron-down]=\"showReferences\" [class.fa-chevron-right]=\"!showReferences\" (click)=\"showReferences=!showReferences\"></i>\n      <sq-collapse [collapsed]=\"!showReferences\">\n        <ng-template>\n          <ul>\n            <ng-container *ngFor=\"let reference of references\">\n              <li *ngIf=\"referenceMap.get(reference) as attachment\"  class=\"text-truncate\">\n                <sq-chat-reference [class.expanded]=\"attachment.$expanded\" [attachment]=\"attachment\" [reference]=\"reference\"\n                  (openPreview)=\"openPreview.emit($event)\" (openDocument)=\"openDocument($event)\"></sq-chat-reference>\n              </li>\n            </ng-container>\n          </ul>\n        </ng-template>\n      </sq-collapse>\n    </div>\n\n  </div>\n\n    <!-- Edit / Regenerate floating actions -->\n  <div class=\"sq-chat-message-action\">\n    <button class=\"btn btn-sm\" *ngIf=\"canEdit\" sqTooltip=\"Edit message\"\n            (click)=\"edit.emit(message)\">\n      <i class=\"fas fa-edit\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canCopy\" sqTooltip=\"Copy to clipboard\"\n            (click)=\"copyToClipboard(message.content)\">\n      <i class=\"far fa-clipboard\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canRegenerate\" sqTooltip=\"Regenerate message\"\n            (click)=\"regenerate.emit(message)\">\n      <i class=\"fas fa-sync-alt\"></i>\n    </button>\n  </div>\n\n  <ng-template #tooltipTpl let-ref>\n    <sq-chat-reference class=\"expanded\"\n                        [attachment]=\"ref\"\n                        [reference]=\"ref.contextId\"\n                        [partId]=\"ref.$partId\"\n                        (openPreview)=\"openPreview.emit($event)\"\n                        (openDocument)=\"openDocument($event)\">\n      </sq-chat-reference>\n  </ng-template>\n\n</div>\n", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host{display:flex}:host:not(:hover) .sq-chat-message-action{display:none}.message-content{padding:var(--ast-message-padding, var(--ast-size-3, .75rem));border-radius:var(--ast-message-border-radius, var(--ast-size-4, 1rem));display:inline-block;max-width:100%;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.message-content .references{margin-top:var(--ast-size-5, 1.25rem)}.message-content .references ul{border-left:.2rem solid var(--ast-secondary-color, #FF732E);padding-left:var(--ast-size-5, 1.25rem);margin-top:var(--ast-size-2, .5rem)}.message-content .references .references-title{font-weight:var(--font-weight-bold, 500)}.message-content .references .references-collapse{cursor:pointer;margin-left:var(--ast-size-2, .5rem)}.message-content ::ng-deep p:last-child{margin-bottom:0}.message-content ::ng-deep .placeholder-glow .placeholder{animation-duration:.4s;width:12px;height:var(--ast-size-4, 1rem);vertical-align:text-bottom}.message-content ::ng-deep img{max-width:100%}.message-content ::ng-deep table{display:block;border:1px solid;border-color:var(--ast-message-table-border-color, #ccc);border-collapse:collapse;margin:0;padding:0;min-width:100%;overflow-x:auto;table-layout:fixed}.message-content ::ng-deep table tr{background-color:var(--ast-message-table-tr-bg, #f8f8f8);border:1px solid;border-color:var(--ast-message-table-tr-border-color, #ddd);padding:.35em}.message-content ::ng-deep table th,.message-content ::ng-deep table td{padding:.625em;text-align:center}.message-content ::ng-deep table th{font-size:.85em;letter-spacing:.1em;text-transform:uppercase}.message-content ::ng-deep .reference{color:var(--ast-message-reference-color, black)!important}.message-content ::ng-deep ul,.message-content ::ng-deep ol{display:flex;flex-direction:column;gap:.5rem;padding-right:2rem;margin-left:0;margin-right:0;padding-left:40px;unicode-bidi:-webkit-isolate;unicode-bidi:isolate;list-style:disc}.message-content ::ng-deep p{margin-top:.5rem}.message-assistant .message-content{background:var(--ast-secondary-bg, #FFF8F1)}.message-user .message-content{background:var(--ast-primary-bg, #f2f8fe);font-weight:var(--ast-user-font-weight, var(--font-weight-bold, 500))}.message-user .message-content p{white-space:pre-line}.sq-chat-message-action{position:absolute;right:calc(0rem - var(--ast-size-2, .5rem));top:0;display:flex;flex-direction:column}.message-icon{margin-top:var(--ast-size-3, .75rem);margin-right:var(--ast-size-4, 1rem)}\n"] }]
+                        InitialsAvatarComponent, ChatReferenceComponent], template: "<!-- Message icon -->\n<span class=\"message-icon\" [title]=\"message?.role\">\n  <i class=\"d-block\" [style.width.px]=\"iconSize\" *ngIf=\"!message\"></i>\n  <i [ngClass]=\"assistantMessageIcon\" [style.--sq-size.px]=\"iconSize\" *ngIf=\"message.role === 'assistant'\"></i>\n  <ng-container *ngIf=\"message?.role === 'user'\">\n    <i [ngClass]=\"userMessageIcon\" [style.--sq-size.px]=\"iconSize\" *ngIf=\"!!userMessageIcon; else initialsAvatar\"></i>\n    <ng-template #initialsAvatar>\n      <sq-initials-avatar [fullName]=\"name\"></sq-initials-avatar>\n    </ng-template>\n  </ng-container>\n</span>\n\n<!-- Message body -->\n<div class=\"flex-grow-1\" style=\"min-width: 0;\" [ngClass]=\"'message-'+message.role\">\n\n  <div *ngIf=\"message.additionalProperties.$progress as progress\" class=\"small ms-3 mb-2\">\n    <a href=\"#\" (click)=\"collapseProgress = !collapseProgress; false\" class=\"text-muted\">\n      View progress\n      <i class=\"fas fa-chevron-{{collapseProgress? 'right' : 'down'}}\"></i>\n    </a>\n    <sq-collapse [collapsed]=\"collapseProgress\">\n      <ng-template>\n        <ul class=\"list-unstyled\">\n          <li *ngFor=\"let step of progress\">\n            <i class=\"fas fa-fw fa-check text-success\" *ngIf=\"step.done\"></i>\n            <i class=\"fas fa-fw fa-spin fa-circle-notch\" *ngIf=\"!step.done\"></i>\n            <span class=\"ms-2 fw-bold\">{{step.title}}</span>\n            <span *ngIf=\"step.content\">: {{step.content}}</span>\n          </li>\n        </ul>\n      </ng-template>\n    </sq-collapse>\n  </div>\n\n  <div class=\"message-content\" *ngIf=\"message.content\">\n\n    <remark *ngIf=\"message?.role === 'assistant'\" [markdown]=\"message.content\" [processor]=\"processor\">\n\n      <ng-template remarkTemplate=\"chat-reference\" let-ref>\n\n        <a *ngIf=\"referenceMap.get(ref.refId) as attachment; else staticRefTpl\"\n          (click)=\"openDocument.emit(attachment.record)\"\n          class=\"reference\"\n          [sqTooltip]=\"attachment\"\n          [sqTooltipTemplate]=\"tooltipTpl\"\n          [hoverableTooltip]=\"true\"\n          >{{ref.refId}}</a>\n\n        <ng-template #staticRefTpl>\n          <span class=\"reference\">{{ref.refId}}</span>\n        </ng-template>\n\n      </ng-template>\n\n      <ng-template remarkTemplate=\"streaming-placeholder\">\n        <span class=\"placeholder-glow\" *ngIf=\"streaming\">\n          <span class=\"placeholder ms-1\"></span>\n        </span>\n      </ng-template>\n\n      <ng-template remarkTemplate=\"code\" let-node>\n        <div class=\"card mb-2\">\n          <div class=\"card-header d-flex justify-content-between align-items-center\">\n            <span>{{node.lang}}</span>\n            <button class=\"btn btn-light btn-sm\" (click)=\"copyToClipboard(node.value)\"><i class=\"far fa-fw fa-clipboard\"></i> Copy code</button>\n          </div>\n          <pre class=\"language-{{node.lang}} my-0 rounded-0 rounded-bottom\"><code class=\"language-{{node.lang}}\">{{node.value}}</code></pre>\n        </div>\n      </ng-template>\n\n      <ng-template remarkTemplate=\"link\" let-node>\n        <a [href]=\"node.url\" target=\"_blank\" rel=\"noopener noreferrer\">{{getLinkText(node)}}</a>\n      </ng-template>\n\n    </remark>\n\n    <p *ngIf=\"message?.role === 'user'\">{{message.content}}</p>\n\n    <!-- List of reference, if any -->\n    <div *ngIf=\"references?.length\" class=\"references\">\n      <span class=\"references-title\">References</span> <i class=\"fas references-collapse\" [class.fa-chevron-down]=\"showReferences\" [class.fa-chevron-right]=\"!showReferences\" (click)=\"showReferences=!showReferences\"></i>\n      <sq-collapse [collapsed]=\"!showReferences\">\n        <ng-template>\n          <ul>\n            <ng-container *ngFor=\"let reference of references\">\n              <li *ngIf=\"referenceMap.get(reference) as attachment\"  class=\"text-truncate\">\n                <sq-chat-reference [class.expanded]=\"attachment.$expanded\" [attachment]=\"attachment\" [reference]=\"reference\"\n                  (openPreview)=\"openPreview.emit($event)\" (openDocument)=\"openDocument.emit($event)\"></sq-chat-reference>\n              </li>\n            </ng-container>\n          </ul>\n        </ng-template>\n      </sq-collapse>\n    </div>\n\n  </div>\n\n    <!-- Edit / Regenerate floating actions -->\n  <div class=\"sq-chat-message-action\" *ngIf=\"message\">\n    <button class=\"btn btn-sm\" *ngIf=\"canEdit\" sqTooltip=\"Edit message\"\n            (click)=\"edit.emit(message)\">\n      <i class=\"fas fa-edit\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canCopy\" sqTooltip=\"Copy to clipboard\"\n            (click)=\"copyToClipboard(message.content)\">\n      <i class=\"far fa-clipboard\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canRegenerate\" sqTooltip=\"Regenerate message\"\n            (click)=\"regenerate.emit(message)\">\n      <i class=\"fas fa-sync-alt\"></i>\n    </button>\n  </div>\n\n  <!-- List of suggested actions, if any -->\n  <div *ngIf=\"suggestedActions\" class=\"mt-2 message-suggestion\">\n    <div class=\"suggested-action\" *ngFor=\"let suggestedAction of suggestedActions\" (click)=\"suggestAction.emit(suggestedAction)\">\n      <div class=\"message-content\">\n        <p><i class=\"fas fa-clipboard-question\"></i> {{suggestedAction.content}}</p>\n      </div>\n    </div>\n  </div>\n\n  <ng-template #tooltipTpl let-ref>\n    <sq-chat-reference class=\"expanded\"\n                        [attachment]=\"ref\"\n                        [reference]=\"ref.contextId\"\n                        [partId]=\"ref.$partId\"\n                        (openPreview)=\"openPreview.emit($event)\"\n                        (openDocument)=\"openDocument.emit($event)\">\n      </sq-chat-reference>\n  </ng-template>\n\n</div>\n", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host{display:flex}:host:not(:hover) .sq-chat-message-action{display:none}.message-content{padding:var(--ast-message-padding, var(--ast-size-3, .75rem));border-radius:var(--ast-message-border-radius, var(--ast-size-4, 1rem));display:inline-block;max-width:100%;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.message-content .references{margin-top:var(--ast-size-5, 1.25rem)}.message-content .references ul{border-left:.2rem solid var(--ast-secondary-color, #FF732E);padding-left:var(--ast-size-5, 1.25rem);margin-top:var(--ast-size-2, .5rem)}.message-content .references .references-title{font-weight:var(--font-weight-bold, 500)}.message-content .references .references-collapse{cursor:pointer;margin-left:var(--ast-size-2, .5rem)}.message-content ::ng-deep p:last-child{margin-bottom:0}.message-content ::ng-deep .placeholder-glow .placeholder{animation-duration:.4s;width:12px;height:var(--ast-size-4, 1rem);vertical-align:text-bottom}.message-content ::ng-deep img{max-width:100%}.message-content ::ng-deep table{display:block;border:1px solid;border-color:var(--ast-message-table-border-color, #ccc);border-collapse:collapse;margin:0;padding:0;min-width:100%;overflow-x:auto;table-layout:fixed}.message-content ::ng-deep table tr{background-color:var(--ast-message-table-tr-bg, #f8f8f8);border:1px solid;border-color:var(--ast-message-table-tr-border-color, #ddd);padding:.35em}.message-content ::ng-deep table th,.message-content ::ng-deep table td{padding:.625em;text-align:center}.message-content ::ng-deep table th{font-size:.85em;letter-spacing:.1em;text-transform:uppercase}.message-content ::ng-deep .reference{color:var(--ast-message-reference-color, black)!important}.message-content ::ng-deep ul,.message-content ::ng-deep ol{display:flex;flex-direction:column;gap:.5rem;padding-right:2rem;margin-left:0;margin-right:0;padding-left:40px;unicode-bidi:-webkit-isolate;unicode-bidi:isolate;list-style:disc}.message-content ::ng-deep p:not(:first-child){margin-top:.5rem}.message-assistant .message-content{background:var(--ast-secondary-bg, #FFF8F1)}.message-user .message-content{background:var(--ast-primary-bg, #f2f8fe);font-weight:var(--ast-user-font-weight, var(--font-weight-bold, 500))}.message-user .message-content p{white-space:pre-line}.message-suggestion .message-content{background:var(--ast-input-bg, #F8F8F8);font-weight:var(--ast-user-font-weight, var(--font-weight-bold, 500));transition:background-color .5s ease,color .5s ease}.message-suggestion .message-content:hover{background:var(--ast-primary-bg, #f2f8fe);color:var(--ast-primary-color, #005DA7)}.message-suggestion .message-content p{white-space:pre-line}.message-suggestion .suggested-action{cursor:pointer}.message-suggestion .suggested-action+.suggested-action{margin-top:var(--ast-size-2, .5rem)}.sq-chat-message-action{position:absolute;right:calc(0rem - var(--ast-size-2, .5rem));top:0;display:flex;flex-direction:column}.message-icon{margin-top:var(--ast-size-3, .75rem);margin-right:var(--ast-size-4, 1rem)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.SearchService }, { type: i2$1.UIService }, { type: i3.PrincipalWebService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { message: [{
                 type: Input
             }], conversation: [{
                 type: Input
+            }], suggestedActions: [{
+                type: Input
             }], assistantMessageIcon: [{
                 type: Input
             }], userMessageIcon: [{
@@ -1375,14 +1430,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Input
             }], canCopy: [{
                 type: Input
-            }], referenceClicked: [{
+            }], openDocument: [{
+                type: Output
+            }], openPreview: [{
+                type: Output
+            }], suggestAction: [{
                 type: Output
             }], edit: [{
                 type: Output
             }], regenerate: [{
                 type: Output
-            }], openPreview: [{
-                type: Output
             }] } });
 
 class RestChatService extends ChatService {
@@ -1474,13 +1531,7 @@ class RestChatService extends ChatService {
             data.savedChatId = this.savedChatId;
         }
         // Request the Chat endpoint
-        return this.jsonMethodWebService.post(this.REQUEST_URL, data).pipe(tap((res) => {
-            if (res.quota.maxQuotaReached) {
-                const msg = `Sorry, you have exceeded the allowed quota. Please retry starting from ${this.formatDateTime(res.quota.nextResetUTC)}.`;
-                this.notificationsService.error(msg);
-                throw new Error(msg);
-            }
-        }), map((res) => {
+        return this.jsonMethodWebService.post(this.REQUEST_URL, data).pipe(tap((res) => this.updateQuota(res.quota, true)), map((res) => {
             // Define $progress from the actions property of the response
             let $progress;
             if (res.actions?.length > 0) {
@@ -1495,14 +1546,16 @@ class RestChatService extends ChatService {
                     time: a.executionTime,
                 }));
             }
-            // Define the response message
-            const response = { ...res.history.at(-1), additionalProperties: { display: true } };
-            if ($progress) {
+            // Re-attach the $progress and $attachment of the last response to the last assistant's response in the chat history
+            const response = { ...res.history.at(-1) };
+            if ($progress)
                 response.additionalProperties.$progress = $progress;
-            }
-            if (res.context) {
+            if (res.context)
                 response.additionalProperties.$attachment = res.context.map((ctx) => ctx.additionalProperties);
-            }
+            if (res.suggestedActions)
+                response.additionalProperties.$suggestedAction = res.suggestedActions;
+            // Emit the updated chat usage metrics once the generation of the assistant response is completed
+            this.updateChatUsageMetrics(response.additionalProperties.usageMetrics);
             // Update the chat history with the incoming history property of the res AND the processed response message
             this.chatHistory = res.history;
             this.chatHistory[this.chatHistory.length - 1] = response;
@@ -1591,6 +1644,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
+class TokenProgressBarComponent {
+    constructor() {
+        this.subscription = new Subscription();
+        this.loginService = inject(LoginService);
+        this.instanceManagerService = inject(InstanceManagerService);
+    }
+    ngOnInit() {
+        this.subscription.add(this.loginService.events.pipe(filter(e => e.type === 'login-complete'), tap(_ => this.instantiateChatService()), switchMap(_ => this.chatService.initProcess$), filter(success => !!success), tap(_ => {
+            this.config = this.chatService.chatConfig$.value;
+            this.onUserTokensConsumption();
+            this.onChatTokensConsumption();
+        })).subscribe());
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    instantiateChatService() {
+        this.chatService = this.instanceManagerService.getInstance(this.instanceId);
+    }
+    onUserTokensConsumption() {
+        this.subscription.add(this.chatService.userTokenConsumption$.subscribe((data) => {
+            if (data) {
+                this.userPercentage = data.percentage;
+                this.userTitle = `Max generation allowed: ${this.userPercentage}% consumed. Resets at ${data.nextResetDate}`;
+            }
+        }));
+    }
+    onChatTokensConsumption() {
+        this.subscription.add(this.chatService.chatTokenConsumption$.subscribe((data) => {
+            if (data) {
+                this.chatPercentage = data.percentage;
+                this.chatTitle = `Max length of conversation: ${this.chatPercentage}% reached.`;
+            }
+        }));
+    }
+}
+TokenProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TokenProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TokenProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: TokenProgressBarComponent, isStandalone: true, selector: "sq-token-progress-bar", inputs: { instanceId: "instanceId" }, ngImport: i0, template: "<div class=\"bars-container d-flex flex-row gap-2 p-2 me-4\" *ngIf=\"(config?.globalSettings?.displayUserQuotaConsumption && userPercentage !== undefined) || (config?.globalSettings?.displayChatTokensConsumption && chatPercentage !== undefined)\">\n    <div *ngIf=\"(config?.globalSettings?.displayUserQuotaConsumption && userPercentage !== undefined)\" class=\"token-progress-bar\" [sqTooltip]=\"userTitle\"\n        [style.background]=\"'radial-gradient(closest-side, var(--ast-primary-bg, #F8F8F8) 70%, transparent 75% 100%), conic-gradient(#FF854A ' + userPercentage + '%, #0040BF 0)'\">\n    </div>\n    <div *ngIf=\"(config?.globalSettings?.displayChatTokensConsumption && chatPercentage !== undefined)\" class=\"token-progress-bar\" [sqTooltip]=\"chatTitle\"\n        [style.background]=\"'radial-gradient(closest-side, var(--ast-primary-bg, #F8F8F8) 70%, transparent 75% 100%), conic-gradient(#FF854A ' + chatPercentage + '%, #0040BF 0)'\">\n    </div>\n</div>\n", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}.bars-container{background-color:var(--ast-primary-bg, #f2f8fe);border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.token-progress-bar{width:1.5rem;height:1.5rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UtilsModule }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[sqTooltip]", inputs: ["sqTooltip", "sqTooltipData", "sqTooltipTemplate", "placement", "fallbackPlacements", "delay", "hoverableTooltip", "tooltipClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TokenProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sq-token-progress-bar', standalone: true, imports: [CommonModule, UtilsModule], template: "<div class=\"bars-container d-flex flex-row gap-2 p-2 me-4\" *ngIf=\"(config?.globalSettings?.displayUserQuotaConsumption && userPercentage !== undefined) || (config?.globalSettings?.displayChatTokensConsumption && chatPercentage !== undefined)\">\n    <div *ngIf=\"(config?.globalSettings?.displayUserQuotaConsumption && userPercentage !== undefined)\" class=\"token-progress-bar\" [sqTooltip]=\"userTitle\"\n        [style.background]=\"'radial-gradient(closest-side, var(--ast-primary-bg, #F8F8F8) 70%, transparent 75% 100%), conic-gradient(#FF854A ' + userPercentage + '%, #0040BF 0)'\">\n    </div>\n    <div *ngIf=\"(config?.globalSettings?.displayChatTokensConsumption && chatPercentage !== undefined)\" class=\"token-progress-bar\" [sqTooltip]=\"chatTitle\"\n        [style.background]=\"'radial-gradient(closest-side, var(--ast-primary-bg, #F8F8F8) 70%, transparent 75% 100%), conic-gradient(#FF854A ' + chatPercentage + '%, #0040BF 0)'\">\n    </div>\n</div>\n", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}.bars-container{background-color:var(--ast-primary-bg, #f2f8fe);border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.token-progress-bar{width:1.5rem;height:1.5rem;border-radius:50%}\n"] }]
+        }], propDecorators: { instanceId: [{
+                type: Input
+            }] } });
+
 class ChatComponent extends AbstractFacet {
     constructor() {
         super();
@@ -1609,12 +1707,19 @@ class ChatComponent extends AbstractFacet {
         this.messageHandlers = new Map();
         /** When the assistant answer a user question, automatically scroll down to the bottom of the discussion */
         this.automaticScrollToLastResponse = false;
+        /** Icon to use for the assistant messages */
         this.assistantMessageIcon = 'sq-sinequa';
+        /** Event emitter triggered each time the assistant updates the current chat */
         this.data = new EventEmitter();
-        this.referenceClicked = new EventEmitter();
+        /** Event emitter triggered when the user clicks to open the original document representing the context attachment*/
+        this.openDocument = new EventEmitter();
+        /** Event emitter triggered when the user clicks to open the preview of a document representing the context attachment */
         this.openPreview = new EventEmitter();
+        /** Event emitter triggered when the user clicks on a suggested action */
+        this.suggestAction = new EventEmitter();
+        /** Event emitter triggered when the chat is loading new content */
         this.loading$ = new EventEmitter(false);
-        this.error = new EventEmitter();
+        /** Emits the assistant configuration used when instantiating the component */
         this._config = new EventEmitter();
         this.messages$ = new BehaviorSubject(undefined);
         this.question = '';
@@ -1632,7 +1737,7 @@ class ChatComponent extends AbstractFacet {
         }));
     }
     ngOnInit() {
-        this.sub.add(this.loginService.events.pipe(filter(e => e.type === 'login-complete'), tap(_ => this.instantiateChatService()), map(_ => this.chatService.initChatConfig()), switchMap(() => this.chatService.initConfig$), filter(initConfig => !!initConfig), switchMap(_ => this.chatService.init()), filter(success => !!success), tap(_ => this.onLoadChat()), switchMap(_ => this.chatService.chatConfig$), tap(config => {
+        this.sub.add(this.loginService.events.pipe(filter(e => e.type === 'login-complete'), tap(_ => this.instantiateChatService()), map(_ => this.chatService.initChatConfig()), switchMap(() => this.chatService.initConfig$), filter(initConfig => !!initConfig), switchMap(_ => this.chatService.init()), switchMap(_ => this.chatService.initProcess$), filter(success => !!success), tap(_ => this.onLoadChat()), switchMap(_ => this.chatService.chatConfig$), tap(config => {
             this.config = config;
             this.enabledUserInput = this.config.modeSettings.enabledUserInput;
             this._config.emit(config);
@@ -1661,6 +1766,10 @@ class ChatComponent extends AbstractFacet {
         this.sub.unsubscribe();
         this.dataSubscription?.unsubscribe();
     }
+    /**
+     * Instantiate the chat service based on the provided @input protocol
+     * The chat service instance will then be stored in the instanceManagerService with provided @input instanceId as a key
+     */
     instantiateChatService() {
         switch (this.protocol) {
             case 'REST':
@@ -1756,8 +1865,7 @@ class ChatComponent extends AbstractFacet {
         this.fetch(messages);
     }
     /**
-     * Given a list of messages, fetch the server for a continuation and updates
-     * the list of messages accordingly.
+     * Given a list of messages, the chat endpoint is invoked for a continuation and updates the list of messages accordingly.
      * @param messages
      */
     fetch(messages) {
@@ -1767,10 +1875,8 @@ class ChatComponent extends AbstractFacet {
         this.dataSubscription = this.chatService.fetch(messages, this.query)
             .subscribe({
             next: res => this.updateData(res.history),
-            error: err => {
+            error: () => {
                 this.terminateFetch();
-                console.error(err);
-                this.error.emit(err);
             },
             complete: () => {
                 this.terminateFetch();
@@ -1868,10 +1974,11 @@ class ChatComponent extends AbstractFacet {
             this.updateData(messages); // If the last message if from the assistant, we can load the conversation right away
             this.terminateFetch();
         }
+        this.addScrollListener();
     }
     /**
-     * Reset the chat by clearing the messages and the chat history
-     * The question input will be focused after the chat is reset
+     * Reset the chat by clearing the chat history and the UI accordingly
+     * The user input will be cleared
      * The fetch subscription will be terminated
      */
     resetChat() {
@@ -1891,16 +1998,24 @@ class ChatComponent extends AbstractFacet {
         this.dataSubscription?.unsubscribe();
         this.dataSubscription = undefined;
         this.loading$.next(false);
-        setTimeout(() => {
-            this.questionInput?.nativeElement.focus();
-        });
         this.cdr.detectChanges();
     }
+    /**
+     * Copy a previous user message of the chat history to the chat user input.
+     * Thus, the user can edit and resubmit the message.
+     * Once the edited message is submitted, all subsequent messages starting from @param index will be removed from the history and the UI will be updated accordingly.
+     * The assistant will regenerate a new answer based on the updated chat history.
+     * @param index The index of the user's message to edit
+     */
     editMessage(index) {
         this.messageToEdit = index;
         this.question = this.chatService.chatHistory[index].content;
-        this.questionInput?.nativeElement.focus();
     }
+    /**
+     * Starting from the provided index, remove all subsequent messages from the chat history and the UI accordingly.
+     * The assistant will regenerate a new answer based on the updated chat history.
+     * @param index The index of the assistant's message to regenerate
+     */
     regenerateMessage(index) {
         // Define the chat history based on which the assistant will generate a new answer
         const slicedMessages = this.chatService.chatHistory.slice(0, index);
@@ -1915,8 +2030,10 @@ class ChatComponent extends AbstractFacet {
                 this.calculateHeight();
                 break;
             case 'Enter':
-                if (!event.shiftKey)
+                if (!event.shiftKey) {
+                    event.preventDefault();
                     this.submitQuestion();
+                }
                 this.calculateHeight();
                 break;
             default:
@@ -1933,16 +2050,16 @@ class ChatComponent extends AbstractFacet {
     }
 }
 ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ChatComponent, isStandalone: true, selector: "sq-chat-v3", inputs: { instanceId: "instanceId", query: "query", queryChangeShouldTriggerReload: "queryChangeShouldTriggerReload", protocol: "protocol", messageHandlers: "messageHandlers", automaticScrollToLastResponse: "automaticScrollToLastResponse", chat: "chat", assistantMessageIcon: "assistantMessageIcon", userMessageIcon: "userMessageIcon" }, outputs: { data: "data", referenceClicked: "referenceClicked", openPreview: "openPreview", loading$: "loading", error: "error", _config: "config" }, providers: [
+ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ChatComponent, isStandalone: true, selector: "sq-chat-v3", inputs: { instanceId: "instanceId", query: "query", queryChangeShouldTriggerReload: "queryChangeShouldTriggerReload", protocol: "protocol", messageHandlers: "messageHandlers", automaticScrollToLastResponse: "automaticScrollToLastResponse", chat: "chat", assistantMessageIcon: "assistantMessageIcon", userMessageIcon: "userMessageIcon" }, outputs: { data: "data", openDocument: "openDocument", openPreview: "openPreview", suggestAction: "suggestAction", loading$: "loading", _config: "config" }, providers: [
         RestChatService,
         WebSocketChatService
-    ], queries: [{ propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true }], viewQueries: [{ propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true }, { propertyName: "questionInput", first: true, predicate: ["questionInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\n<ng-container *ngIf=\"!initializationError\">\n  <div *ngIf=\"messages$ | async as messages; else loadingTpl || loadingTplDefault\" class=\"h-100 d-flex flex-column\">\n\n    <ul class=\"list-group list-group-flush overflow-auto pe-2 pb-2\" #messageList>\n      <ng-container *ngFor=\"let message of messages; let index = index; let last = last\">\n        <!-- Regular messages -->\n        <li class=\"list-group-item\" *ngIf=\"message.additionalProperties.display\"\n            [class.opacity-50]=\"messageToEdit && messageToEdit < index + 1\">\n          <sq-chat-message\n            [class.sq-user-message]=\"message.role !== 'assistant'\"\n            [message]=\"message\"\n            [conversation]=\"messages\"\n            [assistantMessageIcon]=\"assistantMessageIcon\"\n            [userMessageIcon]=\"userMessageIcon\"\n            [streaming]=\"last && (chatService.streaming$ | async)\"\n            [canEdit]=\"(loading$ | async) === false && (chatService.streaming$ | async) === false && messageToEdit === undefined && message.role !== 'assistant'\"\n            [canRegenerate]=\"(loading$ | async) === false && (chatService.streaming$ | async) === false && messageToEdit === undefined && message.role === 'assistant' && last\"\n            [canCopy]=\"!(last && (chatService.streaming$ | async)) && messageToEdit === undefined && message.role === 'assistant'\"\n            (edit)=\"editMessage(index)\" (regenerate)=\"regenerateMessage(index)\"\n            (referenceClicked)=\"referenceClicked.emit($event)\"\n            (openPreview)=\"openPreview.emit($event)\">\n          </sq-chat-message>\n        </li>\n      </ng-container>\n\n      <li class=\"list-group-item\" *ngIf=\"(loading$ | async) === true\">\n        <ng-container *ngTemplateOutlet=\"loadingTpl || loadingTplDefault\"></ng-container>\n      </li>\n    </ul>\n\n    <div class=\"user-input mt-auto\" *ngIf=\"enabledUserInput\">\n      <div class=\"py-2\">\n        <ng-container *ngTemplateOutlet=\"inputTpl\"></ng-container>\n        <div class=\"text-end small text-muted px-3\" *ngIf=\"!!config?.globalSettings?.disclaimer\">\n          {{ config?.globalSettings?.disclaimer }}\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<!-- NG TEMPLATES-->\n\n<ng-template #loadingTplDefault>\n  <div class=\"spinner-grow text-primary d-block mx-auto my-5\" role=\"status\">\n    <span class=\"visually-hidden\">Loading...</span>\n  </div>\n</ng-template>\n\n<ng-template #inputTpl>\n  <div class=\"px-3 py-1\">\n    <div class=\"ast-input-container\">\n      <button disabled class=\"btn btn-light\">\n        <i class=\"fas fa-search\"></i>\n      </button>\n      <textarea #questionInput rows=\"1\"\n        type=\"text\" class=\"form-control\"\n        placeholder=\"Ask something\" autofocus\n        [(ngModel)]=\"question\"\n        (keyup)=\"onKeyUp($event)\"\n        (keydown)=\"calculateHeight()\"\n        [disabled]=\"(loading$ | async) || (chatService.streaming$ | async)\">\n      </textarea>\n      <button\n        *ngIf=\"!(chatService.streaming$ | async) && !(loading$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Send message\"\n        (click)=\"submitQuestion()\">\n        <i class=\"fas fa-paper-plane\"></i>\n      </button>\n      <!--<button\n        *ngIf=\"(chatService.streaming$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Stop generating\"\n        (click)=\"terminateFetch()\">\n        <i class=\"fas fa-stop\"></i>\n      </button>-->\n      <button\n        *ngIf=\"messageToEdit\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Cancel edition\"\n        (click)=\"messageToEdit = undefined; question = ''\">\n        <i class=\"fas fa-undo-alt\"></i>\n      </button>\n      <div class=\"sq-floating-scroll\" *ngIf=\"!isAtBottom\">\n        <button class=\"btn shadow\" (click)=\"scrollDown()\">\n          <i class=\"fas fa-angle-double-down\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference,:host ::ng-deep .attachment .reference{position:relative;bottom:var(--ast-reference-bottom, .3em);font-weight:var(--ast-reference-font-weight, bold);padding:var(--ast-reference-padding, 0 .2em);margin:var(--ast-reference-margin, 0 .1em);border-radius:var(--ast-reference-border-radius, .2em);background-color:var(--ast-reference-background-color, lightblue);color:var(--ast-reference-color, black)}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference{font-size:var(--ast-reference-message-font-size, .7em)}:host ::ng-deep .attachment .reference{font-size:var(--ast-reference-attachment-font-size, 13px)}:host{font-size:.875rem}:host>div>.user-input>div:not(.progress),:host>div>ul>li{width:var(--ast-chat-container-width, 100%);max-width:100%;margin-left:auto;margin-right:auto}:host>div>ul{padding-top:var(--ast-chat-padding-top, 0);padding-bottom:var(--ast-chat-padding-bottom, 0)}li.attachment>p{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3}li.attachment.expanded>p{display:block}.progress{--bs-progress-height: 3px}.progress.disabled{--bs-progress-height: 20px;--bs-progress-bar-bg: var(--bs-danger)}.user-input{z-index:1}.user-input ul.list-group{max-height:30vh}.form-control:disabled{background-color:#ededed}a.disabled{cursor:default;opacity:.5}.no-max-height{max-height:initial!important}.sq-floating-scroll{position:absolute;right:50%;bottom:75px;text-align:center}.sq-floating-scroll .btn{background-color:#fff}.sq-floating-scroll .btn:hover{background-color:#fff;opacity:.9}.ast-input-container{display:flex;align-items:end;background-color:var(--ast-input-bg, #F8F8F8);border-radius:var(--ast-size-3, .75rem)}.ast-input-container>i{padding-left:var(--ast-size-3, .75rem);color:var(--ast-muted-color, rgba(33, 37, 41, .75))}.ast-input-container textarea{padding-left:var(--ast-size-3, .75rem);padding-right:var(--ast-size-3, .75rem);resize:none}.ast-input-container textarea,.ast-input-container button,.ast-input-container button:hover{background-color:transparent;border:0}.ast-input-container button:hover{color:var(--ast-primary-color, #005DA7)}.ast-input-container button:not(:hover){color:var(--ast-muted-color, rgba(33, 37, 41, .75))}sq-chat-message.sq-user-message{float:var(--ast-user-message-float, none)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: 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: ChatMessageComponent, selector: "sq-chat-message", inputs: ["message", "conversation", "assistantMessageIcon", "userMessageIcon", "streaming", "canEdit", "canRegenerate", "canCopy"], outputs: ["referenceClicked", "edit", "regenerate", "openPreview"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true }], viewQueries: [{ propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true }, { propertyName: "questionInput", first: true, predicate: ["questionInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\n<ng-container *ngIf=\"!initializationError\">\n  <div *ngIf=\"messages$ | async as messages; else loadingTpl || loadingTplDefault\" class=\"h-100 d-flex flex-column\">\n    <sq-token-progress-bar\n      *ngIf=\"config?.globalSettings?.displayUserQuotaConsumption || config?.globalSettings?.displayChatTokensConsumption\"\n      [instanceId]=\"instanceId\"\n      class=\"ms-1\">\n    </sq-token-progress-bar>\n\n    <ul class=\"list-group list-group-flush overflow-auto pe-2 pb-2\" #messageList>\n      <ng-container *ngFor=\"let message of messages; let index = index; let last = last\">\n        <!-- Regular messages -->\n        <li class=\"list-group-item\" *ngIf=\"message.additionalProperties.display\"\n            [class.opacity-50]=\"messageToEdit && messageToEdit < index + 1\">\n          <sq-chat-message\n            [class.sq-user-message]=\"message.role === 'user'\"\n            [message]=\"message\"\n            [conversation]=\"messages\"\n            [suggestedActions]=\"last ? message.additionalProperties.$suggestedAction : undefined\"\n            [assistantMessageIcon]=\"assistantMessageIcon\"\n            [userMessageIcon]=\"userMessageIcon\"\n            [streaming]=\"last && (chatService.streaming$ | async)\"\n            [canEdit]=\"(loading$ | async) === false && (chatService.streaming$ | async) === false && messageToEdit === undefined && message.role === 'user'\"\n            [canRegenerate]=\"(loading$ | async) === false && (chatService.streaming$ | async) === false && messageToEdit === undefined && message.role === 'assistant' && last\"\n            [canCopy]=\"!(last && (chatService.streaming$ | async)) && messageToEdit === undefined && message.role === 'assistant'\"\n            (edit)=\"editMessage(index)\"\n            (regenerate)=\"regenerateMessage(index)\"\n            (openDocument)=\"openDocument.emit($event)\"\n            (openPreview)=\"openPreview.emit($event)\"\n            (suggestAction)=\"suggestAction.emit($event)\">\n          </sq-chat-message>\n        </li>\n      </ng-container>\n\n      <li class=\"list-group-item\" *ngIf=\"(loading$ | async) === true\">\n        <ng-container *ngTemplateOutlet=\"loadingTpl || loadingTplDefault\"></ng-container>\n      </li>\n    </ul>\n\n    <div class=\"user-input mt-auto\" *ngIf=\"enabledUserInput\">\n      <div class=\"py-2\">\n        <ng-container *ngTemplateOutlet=\"inputTpl\"></ng-container>\n        <div class=\"text-end small text-muted px-3\" *ngIf=\"!!config?.globalSettings?.disclaimer\">\n          {{ config?.globalSettings?.disclaimer }}\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<!-- NG TEMPLATES-->\n\n<ng-template #loadingTplDefault>\n  <div class=\"spinner-grow text-primary d-block mx-auto my-5\" role=\"status\">\n    <span class=\"visually-hidden\">Loading...</span>\n  </div>\n</ng-template>\n\n<ng-template #inputTpl>\n  <div class=\"px-3 py-1\">\n    <div class=\"ast-input-container\">\n      <button disabled class=\"btn btn-light\">\n        <i class=\"fas fa-search\"></i>\n      </button>\n      <textarea #questionInput rows=\"1\"\n        type=\"text\" class=\"form-control\"\n        placeholder=\"Ask something\" autofocus\n        [(ngModel)]=\"question\"\n        (keyup)=\"onKeyUp($event)\"\n        (keydown)=\"calculateHeight()\"\n        [disabled]=\"(loading$ | async) || (chatService.streaming$ | async)\">\n      </textarea>\n      <button\n        *ngIf=\"!(chatService.streaming$ | async) && !(loading$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Send message\"\n        (click)=\"submitQuestion()\">\n        <i class=\"fas fa-paper-plane\"></i>\n      </button>\n      <!--<button\n        *ngIf=\"(chatService.streaming$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Stop generating\"\n        (click)=\"terminateFetch()\">\n        <i class=\"fas fa-stop\"></i>\n      </button>-->\n      <button\n        *ngIf=\"messageToEdit\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Cancel edition\"\n        (click)=\"messageToEdit = undefined; question = ''\">\n        <i class=\"fas fa-undo-alt\"></i>\n      </button>\n      <div class=\"sq-floating-scroll\" *ngIf=\"!isAtBottom\">\n        <button class=\"btn shadow\" (click)=\"scrollDown()\">\n          <i class=\"fas fa-angle-double-down\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference,:host ::ng-deep .attachment .reference{position:relative;bottom:var(--ast-reference-bottom, .3em);font-weight:var(--ast-reference-font-weight, bold);padding:var(--ast-reference-padding, 0 .2em);margin:var(--ast-reference-margin, 0 .1em);border-radius:var(--ast-reference-border-radius, .2em);background-color:var(--ast-reference-background-color, lightblue);color:var(--ast-reference-color, black)}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference{font-size:var(--ast-reference-message-font-size, .7em)}:host ::ng-deep .attachment .reference{font-size:var(--ast-reference-attachment-font-size, 13px)}:host{font-size:.875rem}:host>div>.user-input>div:not(.progress),:host>div>ul>li{width:var(--ast-chat-container-width, 100%);max-width:100%;margin-left:auto;margin-right:auto}:host>div>ul{padding-top:var(--ast-chat-padding-top, 0);padding-bottom:var(--ast-chat-padding-bottom, 0)}li.attachment>p{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3}li.attachment.expanded>p{display:block}.progress{--bs-progress-height: 3px}.progress.disabled{--bs-progress-height: 20px;--bs-progress-bar-bg: var(--bs-danger)}.user-input{z-index:1}.user-input ul.list-group{max-height:30vh}.form-control:disabled{background-color:#ededed}a.disabled{cursor:default;opacity:.5}.no-max-height{max-height:initial!important}.sq-floating-scroll{position:absolute;right:50%;bottom:75px;text-align:center}.sq-floating-scroll .btn{background-color:#fff}.sq-floating-scroll .btn:hover{background-color:#fff;opacity:.9}.ast-input-container{display:flex;align-items:end;background-color:var(--ast-input-bg, #F8F8F8);border-radius:var(--ast-size-3, .75rem)}.ast-input-container>i{padding-left:var(--ast-size-3, .75rem);color:var(--ast-muted-color, rgba(33, 37, 41, .75))}.ast-input-container textarea{padding-left:var(--ast-size-3, .75rem);padding-right:var(--ast-size-3, .75rem);resize:none}.ast-input-container textarea,.ast-input-container button,.ast-input-container button:hover{background-color:transparent;border:0}.ast-input-container button:hover{color:var(--ast-primary-color, #005DA7)}.ast-input-container button:not(:hover){color:var(--ast-muted-color, rgba(33, 37, 41, .75))}sq-chat-message.sq-user-message{float:var(--ast-user-message-float, none)}sq-token-progress-bar{z-index:10;position:absolute;top:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: 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: ChatMessageComponent, selector: "sq-chat-message", inputs: ["message", "conversation", "suggestedActions", "assistantMessageIcon", "userMessageIcon", "streaming", "canEdit", "canRegenerate", "canCopy"], outputs: ["openDocument", "openPreview", "suggestAction", "edit", "regenerate"] }, { kind: "component", type: TokenProgressBarComponent, selector: "sq-token-progress-bar", inputs: ["instanceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sq-chat-v3', providers: [
                         RestChatService,
                         WebSocketChatService
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormsModule, ChatMessageComponent], template: "\n<ng-container *ngIf=\"!initializationError\">\n  <div *ngIf=\"messages$ | async as messages; else loadingTpl || loadingTplDefault\" class=\"h-100 d-flex flex-column\">\n\n    <ul class=\"list-group list-group-flush overflow-auto pe-2 pb-2\" #messageList>\n      <ng-container *ngFor=\"let message of messages; let index = index; let last = last\">\n        <!-- Regular messages -->\n        <li class=\"list-group-item\" *ngIf=\"message.additionalProperties.display\"\n            [class.opacity-50]=\"messageToEdit && messageToEdit < index + 1\">\n          <sq-chat-message\n            [class.sq-user-message]=\"message.role !== 'assistant'\"\n            [message]=\"message\"\n            [conversation]=\"messages\"\n            [assistantMessageIcon]=\"assistantMessageIcon\"\n            [userMessageIcon]=\"userMessageIcon\"\n            [streaming]=\"last && (chatService.streaming$ | async)\"\n            [canEdit]=\"(loading$ | async) === false && (chatService.streaming$ | async) === false && messageToEdit === undefined && message.role !== 'assistant'\"\n            [canRegenerate]=\"(loading$ | async) === false && (chatService.streaming$ | async) === false && messageToEdit === undefined && message.role === 'assistant' && last\"\n            [canCopy]=\"!(last && (chatService.streaming$ | async)) && messageToEdit === undefined && message.role === 'assistant'\"\n            (edit)=\"editMessage(index)\" (regenerate)=\"regenerateMessage(index)\"\n            (referenceClicked)=\"referenceClicked.emit($event)\"\n            (openPreview)=\"openPreview.emit($event)\">\n          </sq-chat-message>\n        </li>\n      </ng-container>\n\n      <li class=\"list-group-item\" *ngIf=\"(loading$ | async) === true\">\n        <ng-container *ngTemplateOutlet=\"loadingTpl || loadingTplDefault\"></ng-container>\n      </li>\n    </ul>\n\n    <div class=\"user-input mt-auto\" *ngIf=\"enabledUserInput\">\n      <div class=\"py-2\">\n        <ng-container *ngTemplateOutlet=\"inputTpl\"></ng-container>\n        <div class=\"text-end small text-muted px-3\" *ngIf=\"!!config?.globalSettings?.disclaimer\">\n          {{ config?.globalSettings?.disclaimer }}\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<!-- NG TEMPLATES-->\n\n<ng-template #loadingTplDefault>\n  <div class=\"spinner-grow text-primary d-block mx-auto my-5\" role=\"status\">\n    <span class=\"visually-hidden\">Loading...</span>\n  </div>\n</ng-template>\n\n<ng-template #inputTpl>\n  <div class=\"px-3 py-1\">\n    <div class=\"ast-input-container\">\n      <button disabled class=\"btn btn-light\">\n        <i class=\"fas fa-search\"></i>\n      </button>\n      <textarea #questionInput rows=\"1\"\n        type=\"text\" class=\"form-control\"\n        placeholder=\"Ask something\" autofocus\n        [(ngModel)]=\"question\"\n        (keyup)=\"onKeyUp($event)\"\n        (keydown)=\"calculateHeight()\"\n        [disabled]=\"(loading$ | async) || (chatService.streaming$ | async)\">\n      </textarea>\n      <button\n        *ngIf=\"!(chatService.streaming$ | async) && !(loading$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Send message\"\n        (click)=\"submitQuestion()\">\n        <i class=\"fas fa-paper-plane\"></i>\n      </button>\n      <!--<button\n        *ngIf=\"(chatService.streaming$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Stop generating\"\n        (click)=\"terminateFetch()\">\n        <i class=\"fas fa-stop\"></i>\n      </button>-->\n      <button\n        *ngIf=\"messageToEdit\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Cancel edition\"\n        (click)=\"messageToEdit = undefined; question = ''\">\n        <i class=\"fas fa-undo-alt\"></i>\n      </button>\n      <div class=\"sq-floating-scroll\" *ngIf=\"!isAtBottom\">\n        <button class=\"btn shadow\" (click)=\"scrollDown()\">\n          <i class=\"fas fa-angle-double-down\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference,:host ::ng-deep .attachment .reference{position:relative;bottom:var(--ast-reference-bottom, .3em);font-weight:var(--ast-reference-font-weight, bold);padding:var(--ast-reference-padding, 0 .2em);margin:var(--ast-reference-margin, 0 .1em);border-radius:var(--ast-reference-border-radius, .2em);background-color:var(--ast-reference-background-color, lightblue);color:var(--ast-reference-color, black)}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference{font-size:var(--ast-reference-message-font-size, .7em)}:host ::ng-deep .attachment .reference{font-size:var(--ast-reference-attachment-font-size, 13px)}:host{font-size:.875rem}:host>div>.user-input>div:not(.progress),:host>div>ul>li{width:var(--ast-chat-container-width, 100%);max-width:100%;margin-left:auto;margin-right:auto}:host>div>ul{padding-top:var(--ast-chat-padding-top, 0);padding-bottom:var(--ast-chat-padding-bottom, 0)}li.attachment>p{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3}li.attachment.expanded>p{display:block}.progress{--bs-progress-height: 3px}.progress.disabled{--bs-progress-height: 20px;--bs-progress-bar-bg: var(--bs-danger)}.user-input{z-index:1}.user-input ul.list-group{max-height:30vh}.form-control:disabled{background-color:#ededed}a.disabled{cursor:default;opacity:.5}.no-max-height{max-height:initial!important}.sq-floating-scroll{position:absolute;right:50%;bottom:75px;text-align:center}.sq-floating-scroll .btn{background-color:#fff}.sq-floating-scroll .btn:hover{background-color:#fff;opacity:.9}.ast-input-container{display:flex;align-items:end;background-color:var(--ast-input-bg, #F8F8F8);border-radius:var(--ast-size-3, .75rem)}.ast-input-container>i{padding-left:var(--ast-size-3, .75rem);color:var(--ast-muted-color, rgba(33, 37, 41, .75))}.ast-input-container textarea{padding-left:var(--ast-size-3, .75rem);padding-right:var(--ast-size-3, .75rem);resize:none}.ast-input-container textarea,.ast-input-container button,.ast-input-container button:hover{background-color:transparent;border:0}.ast-input-container button:hover{color:var(--ast-primary-color, #005DA7)}.ast-input-container button:not(:hover){color:var(--ast-muted-color, rgba(33, 37, 41, .75))}sq-chat-message.sq-user-message{float:var(--ast-user-message-float, none)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormsModule, ChatMessageComponent, TokenProgressBarComponent], template: "\n<ng-container *ngIf=\"!initializationError\">\n  <div *ngIf=\"messages$ | async as messages; else loadingTpl || loadingTplDefault\" class=\"h-100 d-flex flex-column\">\n    <sq-token-progress-bar\n      *ngIf=\"config?.globalSettings?.displayUserQuotaConsumption || config?.globalSettings?.displayChatTokensConsumption\"\n      [instanceId]=\"instanceId\"\n      class=\"ms-1\">\n    </sq-token-progress-bar>\n\n    <ul class=\"list-group list-group-flush overflow-auto pe-2 pb-2\" #messageList>\n      <ng-container *ngFor=\"let message of messages; let index = index; let last = last\">\n        <!-- Regular messages -->\n        <li class=\"list-group-item\" *ngIf=\"message.additionalProperties.display\"\n            [class.opacity-50]=\"messageToEdit && messageToEdit < index + 1\">\n          <sq-chat-message\n            [class.sq-user-message]=\"message.role === 'user'\"\n            [message]=\"message\"\n            [conversation]=\"messages\"\n            [suggestedActions]=\"last ? message.additionalProperties.$suggestedAction : undefined\"\n            [assistantMessageIcon]=\"assistantMessageIcon\"\n            [userMessageIcon]=\"userMessageIcon\"\n            [streaming]=\"last && (chatService.streaming$ | async)\"\n            [canEdit]=\"(loading$ | async) === false && (chatService.streaming$ | async) === false && messageToEdit === undefined && message.role === 'user'\"\n            [canRegenerate]=\"(loading$ | async) === false && (chatService.streaming$ | async) === false && messageToEdit === undefined && message.role === 'assistant' && last\"\n            [canCopy]=\"!(last && (chatService.streaming$ | async)) && messageToEdit === undefined && message.role === 'assistant'\"\n            (edit)=\"editMessage(index)\"\n            (regenerate)=\"regenerateMessage(index)\"\n            (openDocument)=\"openDocument.emit($event)\"\n            (openPreview)=\"openPreview.emit($event)\"\n            (suggestAction)=\"suggestAction.emit($event)\">\n          </sq-chat-message>\n        </li>\n      </ng-container>\n\n      <li class=\"list-group-item\" *ngIf=\"(loading$ | async) === true\">\n        <ng-container *ngTemplateOutlet=\"loadingTpl || loadingTplDefault\"></ng-container>\n      </li>\n    </ul>\n\n    <div class=\"user-input mt-auto\" *ngIf=\"enabledUserInput\">\n      <div class=\"py-2\">\n        <ng-container *ngTemplateOutlet=\"inputTpl\"></ng-container>\n        <div class=\"text-end small text-muted px-3\" *ngIf=\"!!config?.globalSettings?.disclaimer\">\n          {{ config?.globalSettings?.disclaimer }}\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<!-- NG TEMPLATES-->\n\n<ng-template #loadingTplDefault>\n  <div class=\"spinner-grow text-primary d-block mx-auto my-5\" role=\"status\">\n    <span class=\"visually-hidden\">Loading...</span>\n  </div>\n</ng-template>\n\n<ng-template #inputTpl>\n  <div class=\"px-3 py-1\">\n    <div class=\"ast-input-container\">\n      <button disabled class=\"btn btn-light\">\n        <i class=\"fas fa-search\"></i>\n      </button>\n      <textarea #questionInput rows=\"1\"\n        type=\"text\" class=\"form-control\"\n        placeholder=\"Ask something\" autofocus\n        [(ngModel)]=\"question\"\n        (keyup)=\"onKeyUp($event)\"\n        (keydown)=\"calculateHeight()\"\n        [disabled]=\"(loading$ | async) || (chatService.streaming$ | async)\">\n      </textarea>\n      <button\n        *ngIf=\"!(chatService.streaming$ | async) && !(loading$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Send message\"\n        (click)=\"submitQuestion()\">\n        <i class=\"fas fa-paper-plane\"></i>\n      </button>\n      <!--<button\n        *ngIf=\"(chatService.streaming$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Stop generating\"\n        (click)=\"terminateFetch()\">\n        <i class=\"fas fa-stop\"></i>\n      </button>-->\n      <button\n        *ngIf=\"messageToEdit\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        title=\"Cancel edition\"\n        (click)=\"messageToEdit = undefined; question = ''\">\n        <i class=\"fas fa-undo-alt\"></i>\n      </button>\n      <div class=\"sq-floating-scroll\" *ngIf=\"!isAtBottom\">\n        <button class=\"btn shadow\" (click)=\"scrollDown()\">\n          <i class=\"fas fa-angle-double-down\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ast-primary{color:var(--ast-primary-color, #005DA7);background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover{background-color:var(--ast-primary-bg, #f2f8fe)}.ast-primary-hover:hover{color:var(--ast-primary-color, #005DA7)}.ast-secondary{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-secondary-bg, #FFF8F1)}.ast-btn{border:0;text-align:left;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center}.dark{--ast-primary-bg: #0d0701;--ast-primary-color: #008cd1;--ast-secondary-bg: #00070e;--ast-secondary-color: #ffa258;--ast-input-bg: #070707;--ast-input-color: rgba(222, 218, 218, .75);--ast-muted-color: rgba(222, 218, 218, .75);--ast-saved-chat-hover-background: #262421;--ast-message-table-border-color: #333333;--ast-message-table-tr-bg: #070707;--ast-message-table-tr-border-color: #222222;--ast-reference-icon-color: white;--ast-reference-icon-active-color: black;--ast-reference-passages-color: white;--ast-reference-expanded-hover-bg: #262421;--ast-message-reference-color: black}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference,:host ::ng-deep .attachment .reference{position:relative;bottom:var(--ast-reference-bottom, .3em);font-weight:var(--ast-reference-font-weight, bold);padding:var(--ast-reference-padding, 0 .2em);margin:var(--ast-reference-margin, 0 .1em);border-radius:var(--ast-reference-border-radius, .2em);background-color:var(--ast-reference-background-color, lightblue);color:var(--ast-reference-color, black)}:host ::ng-deep .reference,:host ::ng-deep .message-content .reference{font-size:var(--ast-reference-message-font-size, .7em)}:host ::ng-deep .attachment .reference{font-size:var(--ast-reference-attachment-font-size, 13px)}:host{font-size:.875rem}:host>div>.user-input>div:not(.progress),:host>div>ul>li{width:var(--ast-chat-container-width, 100%);max-width:100%;margin-left:auto;margin-right:auto}:host>div>ul{padding-top:var(--ast-chat-padding-top, 0);padding-bottom:var(--ast-chat-padding-bottom, 0)}li.attachment>p{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3}li.attachment.expanded>p{display:block}.progress{--bs-progress-height: 3px}.progress.disabled{--bs-progress-height: 20px;--bs-progress-bar-bg: var(--bs-danger)}.user-input{z-index:1}.user-input ul.list-group{max-height:30vh}.form-control:disabled{background-color:#ededed}a.disabled{cursor:default;opacity:.5}.no-max-height{max-height:initial!important}.sq-floating-scroll{position:absolute;right:50%;bottom:75px;text-align:center}.sq-floating-scroll .btn{background-color:#fff}.sq-floating-scroll .btn:hover{background-color:#fff;opacity:.9}.ast-input-container{display:flex;align-items:end;background-color:var(--ast-input-bg, #F8F8F8);border-radius:var(--ast-size-3, .75rem)}.ast-input-container>i{padding-left:var(--ast-size-3, .75rem);color:var(--ast-muted-color, rgba(33, 37, 41, .75))}.ast-input-container textarea{padding-left:var(--ast-size-3, .75rem);padding-right:var(--ast-size-3, .75rem);resize:none}.ast-input-container textarea,.ast-input-container button,.ast-input-container button:hover{background-color:transparent;border:0}.ast-input-container button:hover{color:var(--ast-primary-color, #005DA7)}.ast-input-container button:not(:hover){color:var(--ast-muted-color, rgba(33, 37, 41, .75))}sq-chat-message.sq-user-message{float:var(--ast-user-message-float, none)}sq-token-progress-bar{z-index:10;position:absolute;top:0;right:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { instanceId: [{
                 type: Input
             }], query: [{
@@ -1963,15 +2080,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Input
             }], data: [{
                 type: Output
-            }], referenceClicked: [{
+            }], openDocument: [{
                 type: Output
             }], openPreview: [{
                 type: Output
+            }], suggestAction: [{
+                type: Output
             }], loading$: [{
                 type: Output,
                 args: ["loading"]
-            }], error: [{
-                type: Output
             }], _config: [{
                 type: Output,
                 args: ["config"]
@@ -1994,7 +2111,6 @@ class SavedChatsComponent {
         this.groupedSavedChats$ = new BehaviorSubject([]);
         this.loginService = inject(LoginService);
         this.instanceManagerService = inject(InstanceManagerService);
-        this.auditService = inject(AuditWebService);
         this.modalService = inject(ModalService);
         this.notificationsService = inject(NotificationsService);
     }
@@ -2076,7 +2192,7 @@ class SavedChatsComponent {
         savedChats
             .sort((a, b) => parseISO(b.modifiedUTC).getTime() - parseISO(a.modifiedUTC).getTime())
             .forEach(savedChat => {
-            const groupKey = this._getTimeKey(parseISO(savedChat.modifiedUTC));
+            const groupKey = this._getTimeKey(toDate(parseISO(savedChat.modifiedUTC))); // Must convert the UTC date to local date before passing to _getTimeKey
             if (!groupedSavedChats.has(groupKey)) {
                 groupedSavedChats.set(groupKey, []);
             }