@sinequa/assistant 3.6.2 → 3.7.0

package/fesm2020/sinequa-assistant-chat.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, inject, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, ContentChild, Inject } from '@angular/core';
-import { Subscription, filter, tap, switchMap, BehaviorSubject, forkJoin, map, catchError, throwError, shareReplay, Subject, fromEvent, merge, takeUntil, Observable, take, finalize } from 'rxjs';
+import { Subscription, filter, tap, switchMap, BehaviorSubject, forkJoin, map, catchError, throwError, shareReplay, Subject, fromEvent, mergeMap, of, merge, takeUntil, Observable, take, finalize, combineLatest } from 'rxjs';
 import * as i3 from '@sinequa/core/web-services';
 import { PrincipalWebService, UserSettingsWebService, AuditWebService, SignalRWebService, JsonMethodPluginService } from '@sinequa/core/web-services';
 import * as i1 from '@angular/common';
@@ -196,7 +196,8 @@ const connectionSettingsSchema = z.object({
     restEndpoint: z.string().optional(),
     websocketEndpoint: z.string().optional(),
     signalRTransport: z.enum(["WebSockets", "ServerSentEvents", "LongPolling", "None"]),
-    signalRLogLevel: z.enum(["Critical", "Debug", "Error", "Information", "None", "Trace", "Warning"])
+    signalRLogLevel: z.enum(["Critical", "Debug", "Error", "Information", "None", "Trace", "Warning"]),
+    signalRServerTimeoutInMilliseconds: z.number().optional()
 }).refine(data => (!!data.restEndpoint || !!data.websocketEndpoint), {
     message: "Based on the provided input() protocol ('REST' or 'WEBSOCKET') to the Chat Component, either 'restEndpoint' or 'websocketEndpoint' property should be provided in the 'globalSettings' of the assistant instance.",
 });
@@ -224,6 +225,10 @@ const uiSettingsSchema = z.object({
     displaySystemPrompt: z.boolean(),
     displayUserPrompt: z.boolean()
 });
+// Define the Zod representation for the chatStarter object
+const chatStarterSchema = z.object({
+    text: z.string()
+});
 // Define the Zod representation for the defaultValues object
 const defaultValuesSchema = z.object({
     service_id: z.string(),
@@ -243,7 +248,8 @@ const defaultValuesSchema = z.object({
 const initializationSchema = z.object({
     event: z.enum(['Query', 'Prompt']),
     forcedWorkflow: z.string().optional(),
-    displayUserQuery: z.boolean().optional(), // Optional for event 'Prompt'
+    displayUserQuery: z.boolean().optional(),
+    chatStarters: z.array(chatStarterSchema).optional(), // Optional for event 'Prompt'
 }).refine(data => ((data.event === "Query") ? (!!data.forcedWorkflow && data.displayUserQuery !== undefined && data.displayUserQuery !== null) : true), {
     message: "The 'forcedWorkflow' and 'displayUserQuery' properties must be provided when the initialization's event is 'Query'.",
 });
@@ -252,6 +258,8 @@ const modeSettingsSchema = z.object({
     displayUserPrompt: z.boolean(),
     sendUserPrompt: z.boolean(),
     initialization: initializationSchema
+}).refine(data => !(data.initialization.chatStarters?.length && (data.sendUserPrompt || data.displayUserPrompt || data.initialization.event === 'Query')), {
+    message: "Incompatible configuration for using chatStarters ('sendUserPrompt' and 'displayUserPrompt' must be false, 'initialization.event' must not be 'Query')",
 });
 // Define the Zod representation for the savedChatSettings object
 const savedChatSettingsSchema = z.object({
@@ -291,7 +299,11 @@ class ChatService {
         this.initConfig$ = new BehaviorSubject(false);
         /** Global configuration of the chat. */
         this.chatConfig$ = new BehaviorSubject(undefined);
-        /** Streaming status of the chat endpoint. */
+        /**
+         * Emit true if the fetch of an assistant's response is ongoing (it includes Streaming status of the chat endpoint AND saving the discussion if save Chat is enabled).
+         * This is used to prevent multiple fetches at the same time.
+         * Typically, there is no problem chaining fetches, but when forcing a reload after query changes cases, it can't be allowed because it breaks the whole business logic.
+        */
         this.streaming$ = new BehaviorSubject(false);
         /** List of saved chats. */
         this.savedChats$ = new BehaviorSubject([]);
@@ -305,6 +317,8 @@ class ChatService {
         this.chatUsageMetrics$ = new BehaviorSubject(undefined);
         /** Emit the calculated chat's token consumption based on the chat usage metrics. */
         this.chatTokenConsumption$ = new BehaviorSubject(undefined);
+        /** Emit true if "CancelTasks" is ongoing. */
+        this.stoppingGeneration$ = new BehaviorSubject(false);
         this.userSettingsService = inject(UserSettingsWebService);
         this.notificationsService = inject(NotificationsService);
         this.auditService = inject(AuditWebService);
@@ -431,7 +445,7 @@ class ChatService {
             }
         }
         catch (error) {
-            this.notificationsService.error(`Missing valid configuration for the assistant instance '${key}'`);
+            this.notificationsService.error(`Missing valid configuration for the assistant instance '${key}'. See the browser console messages for details on the missing or incorrect properties.`);
             throw new Error(`Missing valid configuration for the assistant instance '${key}' . \n ${JSON.stringify(error.issues, null, 2)}`);
         }
     }
@@ -472,6 +486,7 @@ class ChatService {
         const consumptionPercentage = Math.round((quota.tokenCount * 100 / quota.periodTokens) * 100) / 100;
         this.userTokenConsumption$.next({ percentage: consumptionPercentage, nextResetDate });
         if (quota.maxQuotaReached) {
+            this.generateAuditEvent('quota.exceeded', {});
             const msg = `Sorry, you have exceeded the allowed quota. Please retry starting from ${nextResetDate}.`;
             this.notificationsService.error(msg);
             if (propagateError)
@@ -530,6 +545,45 @@ class ChatService {
         };
         this.auditService.notify(audit);
     }
+    /**
+     * Traverse the array from the end and track the first 'assistant' message among the last group of "assistant" messages where display is true
+     * @param array The array of ChatMessage to traverse
+     * @returns The index of the first visible assistant message among the last group of "assistant" messages in the array
+     */
+    firstVisibleAssistantMessageIndex(array) {
+        if (!array) {
+            return -1;
+        }
+        let index = array.length - 1;
+        let firstVisibleAssistantMessageIndex = -1;
+        while (index >= 0 && array[index].role === 'assistant') {
+            if (array[index].additionalProperties.display === true) {
+                firstVisibleAssistantMessageIndex = index;
+            }
+            index--;
+        }
+        return firstVisibleAssistantMessageIndex;
+    }
+    /**
+     * Traverse the array from the end and pick the last 'assistant' message among the last group of "assistant" messages where display is true
+     * @param array The array of ChatMessage to traverse
+     * @returns The index of the last visible assistant message among the last group of "assistant" messages in the array
+     */
+    lastVisibleAssistantMessageIndex(array) {
+        if (!array) {
+            return -1;
+        }
+        let index = array.length - 1;
+        let lastVisibleAssistantMessageIndex = -1;
+        while (index >= 0 && array[index].role === 'assistant') {
+            if (array[index].additionalProperties.display === true) {
+                lastVisibleAssistantMessageIndex = index;
+                break;
+            }
+            index--;
+        }
+        return lastVisibleAssistantMessageIndex;
+    }
     /**
      * Format a date string in UTC to a local date string
      * @param value Date string in UTC to format
@@ -560,10 +614,8 @@ class WebSocketChatService extends ChatService {
         this._messageHandlers = new Map();
         this._actionMap = new Map();
         this._progress = undefined;
-        this._content = "";
         this._attachments = [];
-        this._suggestedActions = [];
-        this._debugMessages = undefined;
+        this._debugMessages = [];
         this.signalRService = inject(SignalRWebService);
         this.authenticationService = inject(AuthenticationService);
     }
@@ -613,36 +665,36 @@ class WebSocketChatService extends ChatService {
         }
     }
     listModels() {
-        const modelsSubject = new Subject();
+        const modelsSubject$ = new Subject();
         this.connection.on('ListModels', (res) => {
             this.models = res.models?.filter(model => !!model.enable);
-            modelsSubject.next(this.models);
-            modelsSubject.complete();
+            modelsSubject$.next(this.models);
+            modelsSubject$.complete();
         });
         // Send the request to get the list of models
         this.connection.invoke('ListModels', { debug: this.chatConfig$.value.defaultValues.debug })
             .catch(error => {
             console.error('Error invoking ListModels:', error);
-            modelsSubject.complete();
-            return Promise.resolve(); // Return a resolved promise to handle the error and prevent unhandled promise rejection
+            modelsSubject$.error(new Error(error));
+            return Promise.resolve(); // Return a resolved promise to handle the error and prevent unhandled promise rejection when no further error handling exists downstream
         });
-        return modelsSubject.asObservable();
+        return modelsSubject$.asObservable();
     }
     listFunctions() {
-        const functionsSubject = new Subject();
+        const functionsSubject$ = new Subject();
         this.connection.on('ListFunctions', (res) => {
             this.functions = res.functions?.filter(func => func.enabled);
-            functionsSubject.next(this.functions);
-            functionsSubject.complete();
+            functionsSubject$.next(this.functions);
+            functionsSubject$.complete();
         });
         // Send the request to get the list of functions
         this.connection.invoke('ListFunctions', { debug: this.chatConfig$.value.defaultValues.debug })
             .catch(error => {
             console.error('Error invoking ListFunctions:', error);
-            functionsSubject.complete();
-            return Promise.resolve(); // Return a resolved promise to handle the error and prevent unhandled promise rejection
+            functionsSubject$.error(new Error(error));
+            return Promise.resolve(); // Return a resolved promise to handle the error and prevent unhandled promise rejection when no further error handling exists downstream
         });
-        return functionsSubject.asObservable();
+        return functionsSubject$.asObservable();
     }
     fetch(messages, query) {
         // Start streaming by invoking the Chat method
@@ -670,7 +722,8 @@ class WebSocketChatService extends ChatService {
             data.instanceId = this.chatInstanceId;
             data.savedChatId = this.savedChatId;
         }
-        let response = { role: "assistant", content: "", additionalProperties: { display: true } }; // here display: true is needed in order to be able to show the progress
+        // Initialize the response with an empty assistant message
+        this._response = [{ role: "assistant", content: "", additionalProperties: { display: true } }]; // here display: true is needed in order to be able to show the progress
         // Create a Subject to signal completion
         const completion$ = new Subject();
         // Create observables for each non-global handler in the _messageHandlers map (default and eventual custom ones) once it is triggered by the hub connection
@@ -678,8 +731,19 @@ class WebSocketChatService extends ChatService {
             .from(this._messageHandlers.entries())
             .filter(([eventName, eventHandler]) => !eventHandler.isGlobalHandler)
             .map(([eventName, eventHandler]) => {
-            return fromEvent(this.connection, eventName).pipe(map((event) => eventHandler.handler(event)) // Execute the corresponding handler
-            );
+            return fromEvent(this.connection, eventName).pipe(mergeMap((event) => {
+                // Wrap the handler in a try-catch block to prevent the entire stream from failing if an error occurs in a single handler
+                try {
+                    // Execute the handler and emit the result
+                    // NB: here we could use [eventHandler.handler(event)] which behind the scenes mergeMap interprets this array as an observable sequence with one item, which it then emits
+                    return of(eventHandler.handler(event));
+                }
+                catch (error) {
+                    console.error(`Error in event handler for ${eventName}:`, error);
+                    // Use throwError to propagate the error downstream
+                    return throwError(() => new Error(`Error in event handler for ${eventName}: ${error}`));
+                }
+            }));
         });
         // Then merge them into a single observable in order to simulate the streaming behavior
         const combined$ = merge(...observables).pipe(map(() => {
@@ -693,37 +757,74 @@ class WebSocketChatService extends ChatService {
                     time: a.executionTime,
                 }))
                 : undefined;
-            // 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, $debug: this._debugMessages } };
+            // Always update ONLY the first assistant message of the _response with the new $progress, $attachment and $debug
+            // Assuming that the first assistant message is always visible since the hub does not send hidden messages by design
+            // So even if the first assistant message is hidden (display: false), the _response[0] will and should contain :
+            //  - $progress, $attachment and $debug
+            //  - the content of the first visible assistant message in the workflow
+            // This is mandatory in order to match the behavior of consecutive messages and maintain consistency with the chatHistory
+            if (!!this._progress || this._attachments.length > 0 || this._debugMessages.length > 0) {
+                this._response[0].additionalProperties.$progress = this._progress;
+                this._response[0].additionalProperties.$attachment = this._attachments;
+                this._response[0].additionalProperties.$debug = this._debugMessages;
             }
             // Return the result
-            return { history: [...messages, response], executionTime: this._executionTime };
+            return { history: [...messages, ...this._response], executionTime: this._executionTime };
         }), takeUntil(completion$));
         // return a new Observable that emits the result of the combined stream and handles the eventual errors of the invocation of the Chat method
         return new Observable(observer => {
             // Subscribe to combined stream
             combined$.subscribe({
                 next: (value) => observer.next(value),
-                error: (err) => observer.error(err),
-                complete: () => observer.complete(),
+                error: (err) => observer.error(err)
             });
             // Invoke the Chat method and handle errors
             this.connection.invoke('Chat', data)
+                .then(() => {
+                // If a valid assistant message with (display: true) was found, update it
+                // and it should always the case
+                const index = this.firstVisibleAssistantMessageIndex(this.chatHistory);
+                if (index !== -1) {
+                    this.chatHistory[index].additionalProperties.$progress = this._progress;
+                    this.chatHistory[index].additionalProperties.$attachment = this._attachments;
+                    this.chatHistory[index].additionalProperties.$debug = this._debugMessages;
+                }
+                // 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).pipe(tap(() => this.listSavedChat())) : this.updateSavedChat(this.savedChatId, undefined, this.chatHistory);
+                    action.pipe(take(1)).subscribe({
+                        next: () => { },
+                        error: (error) => {
+                            this.streaming$.next(false);
+                            observer.error(error);
+                        },
+                        complete: () => {
+                            this.streaming$.next(false);
+                            observer.complete();
+                        }
+                    });
+                }
+                else {
+                    this.streaming$.next(false);
+                    observer.complete();
+                }
+            })
                 .catch(error => {
                 console.error('Error invoking Chat:', error);
+                this.streaming$.next(false);
                 // Emit the error to the newly created observable
                 observer.error(error);
                 // Return a resolved promise to handle the error and prevent unhandled promise rejection
                 return Promise.resolve();
             })
                 .finally(() => {
-                this.streaming$.next(false); // Complete streaming regardless of success or error
+                // This block concerns ONLY the completion of the "Chat" method invocation.
+                // This means the completion of the combined$ stream.
+                // It does not take into account the completion of the entire fetch method (the observable returned by fetch) and which depends on the completion of the save chat action if enabled
+                this._response = []; // Clear the _response
                 this._actionMap.clear(); // Clear the _actionMap
-                this._content = ""; // Clear the _content
                 this._progress = undefined; // Clear the _progress
                 this._attachments = []; // Clear the _attachments
-                this._suggestedActions = []; // Clear the _suggestedActions
                 this._debugMessages = []; // Clear the _debugMessages
                 this._executionTime = ""; // Clear the _executionTime
                 completion$.next(); // Emit a signal to complete the observables
@@ -731,6 +832,33 @@ class WebSocketChatService extends ChatService {
             });
         });
     }
+    stopGeneration() {
+        // Start stopping generation by invoking the CancelTasks method
+        this.stoppingGeneration$.next(true);
+        // Create a Subject to hold the result of the CancelTasks method
+        const stopGenerationSubject$ = new Subject();
+        this.connection.on('CancelTasks', (res) => {
+            // When the generation is stopped before streaming any VISIBLE assistant message, this means that $progress, $attachment and $debug properties will be lost.
+            // However, the "ContextMessage" frames will be persisted in the chatHistory and the assistant may reference them in the next generation.
+            // This leads to the problem of referencing undisplayed attachments in the next generation.
+            // To solve this problem, we need to persist $progress, $attachment and $debug properties by adding a new assistant message with empty content and these properties.
+            if (this._response.length === 1 && this._response[0].content === "") {
+                this.chatHistory?.push({ role: "assistant", content: "", additionalProperties: { display: true, $progress: this._progress, $attachment: this._attachments, $debug: this._debugMessages } });
+            }
+            stopGenerationSubject$.next(!!res); // Emit the result of the CancelTasks method
+            stopGenerationSubject$.complete(); // Complete the subject
+            this.stoppingGeneration$.next(false); // Complete stopping generation
+        });
+        // Invoke the CancelTasks method and handle errors
+        this.connection.invoke('CancelTasks')
+            .catch(error => {
+            console.error('Error invoking CancelTasks:', error);
+            stopGenerationSubject$.error(new Error(error));
+            this.stoppingGeneration$.next(false); // Complete stopping generation
+            return Promise.resolve(); // Return a resolved promise to handle the error and prevent unhandled promise rejection when no further error handling exists downstream
+        });
+        return stopGenerationSubject$.asObservable();
+    }
     listSavedChat() {
         if (!this.chatConfig$.value.savedChatSettings.enabled) {
             return;
@@ -750,27 +878,27 @@ class WebSocketChatService extends ChatService {
         });
     }
     getSavedChat(id) {
-        const savedChatSubject = new Subject();
+        const savedChatSubject$ = new Subject();
         const data = {
             instanceId: this.chatInstanceId,
             savedChatId: id,
             debug: this.chatConfig$.value.defaultValues.debug
         };
         this.connection.on('SavedChatGet', (res) => {
-            savedChatSubject.next(res.savedChat);
-            savedChatSubject.complete();
+            savedChatSubject$.next(res.savedChat);
+            savedChatSubject$.complete();
         });
         // Invoke the method SavedChatGet
         this.connection.invoke('SavedChatGet', data)
             .catch(error => {
             console.error('Error invoking SavedChatGet:', error);
-            savedChatSubject.complete();
-            return Promise.resolve();
+            savedChatSubject$.error(new Error(error));
+            return Promise.resolve(); // Return a resolved promise to handle the error and prevent unhandled promise rejection when no further error handling exists downstream
         });
-        return savedChatSubject.asObservable();
+        return savedChatSubject$.asObservable();
     }
     addSavedChat(messages) {
-        const addSavedChatSubject = new Subject();
+        const addSavedChatSubject$ = new Subject();
         const data = {
             instanceId: this.chatInstanceId,
             savedChatId: this.chatId,
@@ -780,20 +908,20 @@ class WebSocketChatService extends ChatService {
         this.connection.on('SavedChatAdd', (res) => {
             this.setSavedChatId(res.savedChat.id); // Persist the savedChatId
             this.generateAuditEvent('saved-chat.add', {}, res.savedChat.id); // Generate audit event
-            addSavedChatSubject.next(res.savedChat);
-            addSavedChatSubject.complete();
+            addSavedChatSubject$.next(res.savedChat);
+            addSavedChatSubject$.complete();
         });
         // Invoke the method SavedChatAdd
         this.connection.invoke('SavedChatAdd', data)
             .catch(error => {
             console.error('Error invoking SavedChatAdd:', error);
-            addSavedChatSubject.complete();
-            return Promise.resolve();
+            addSavedChatSubject$.error(new Error(error));
+            return Promise.resolve(); // Return a resolved promise to handle the error and prevent unhandled promise rejection when no further error handling exists downstream
         });
-        return addSavedChatSubject.asObservable();
+        return addSavedChatSubject$.asObservable();
     }
     updateSavedChat(id, name, messages) {
-        const updateSavedChatSubject = new Subject();
+        const updateSavedChatSubject$ = new Subject();
         const data = {
             instanceId: this.chatInstanceId,
             savedChatId: id,
@@ -804,45 +932,64 @@ class WebSocketChatService extends ChatService {
         if (messages)
             data["history"] = messages;
         this.connection.on('SavedChatUpdate', (res) => {
-            updateSavedChatSubject.next(res.savedChat);
-            updateSavedChatSubject.complete();
+            updateSavedChatSubject$.next(res.savedChat);
+            updateSavedChatSubject$.complete();
         });
         // Invoke the method SavedChatUpdate
         this.connection.invoke('SavedChatUpdate', data)
             .catch(error => {
             console.error('Error invoking SavedChatUpdate:', error);
-            updateSavedChatSubject.complete();
-            return Promise.resolve();
+            updateSavedChatSubject$.error(new Error(error));
+            return Promise.resolve(); // Return a resolved promise to handle the error and prevent unhandled promise rejection when no further error handling exists downstream
         });
-        return updateSavedChatSubject.asObservable();
+        return updateSavedChatSubject$.asObservable();
     }
     deleteSavedChat(ids) {
-        const deleteSavedChatSubject = new Subject();
+        const deleteSavedChatSubject$ = new Subject();
         const data = {
             instanceId: this.chatInstanceId,
             SavedChatIds: ids,
             debug: this.chatConfig$.value.defaultValues.debug
         };
         this.connection.on('SavedChatDelete', (res) => {
-            deleteSavedChatSubject.next(res.deleteCount);
-            deleteSavedChatSubject.complete();
+            deleteSavedChatSubject$.next(res.deleteCount);
+            deleteSavedChatSubject$.complete();
         });
         // Invoke the method SavedChatDelete
         this.connection.invoke('SavedChatDelete', data)
             .catch(error => {
             console.error('Error invoking SavedChatDelete:', error);
-            deleteSavedChatSubject.complete();
-            return Promise.resolve();
+            deleteSavedChatSubject$.error(new Error(error));
+            return Promise.resolve(); // Return a resolved promise to handle the error and prevent unhandled promise rejection when no further error handling exists downstream
         });
-        return deleteSavedChatSubject.asObservable();
+        return deleteSavedChatSubject$.asObservable();
     }
     /**
      * Initialize out-of-the-box handlers
-     * It is a placeholder for non-streaming scenarios, where you invoke a specific hub method, and the server responds with a single message or a result
+     * It is a placeholder for non-streaming scenarios, where you invoke a specific hub method, and the server responds with frame message(s)
      */
     initMessageHandlers() {
-        this.addMessageHandler("Debug", { handler: (debug) => console.log(debug),
-            isGlobalHandler: true });
+        this.addMessageHandler("Error", {
+            handler: (error) => {
+                console.error(error);
+                this.notificationsService.error(error);
+            },
+            isGlobalHandler: true
+        });
+        this.addMessageHandler("Quota", {
+            handler: (message) => {
+                try {
+                    this.updateQuota(message.quota);
+                }
+                catch (error) {
+                    console.error(error);
+                }
+            },
+            isGlobalHandler: true
+        });
+        this.addMessageHandler("Debug", { handler: () => { },
+            isGlobalHandler: true
+        });
         this.addMessageHandler("ActionStart", { handler: (action) => this._actionMap.set(action.guid, action),
             isGlobalHandler: false });
         this.addMessageHandler("ActionResult", {
@@ -858,35 +1005,48 @@ class WebSocketChatService extends ChatService {
             isGlobalHandler: false
         });
         this.addMessageHandler("Message", {
-            handler: (message) => this._content += message ?? "",
+            handler: (message) => this._response.at(-1).content += message ?? "",
             isGlobalHandler: false
         });
         this.addMessageHandler("History", {
             handler: (history) => {
-                this.chatHistory = history.history;
-                // Re-attach the {$progress, $attachment, $suggestedAction and $debug} 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;
-                this.chatHistory.at(-1).additionalProperties.$debug = this._debugMessages;
-                // Emit the updated chat usage metrics once the generation of the assistant response is completed
+                // The ChatHistory is updated: it is the current copy concatenated with the new items ONLY (it can have multiple messages: the context messages + the response message)
+                // This is mandatory to not lose the previous updates of the chatHistory when the assistant is streaming multiple message steps
+                this.chatHistory = [...this.chatHistory, ...(history.history.slice(this.chatHistory.length))];
+                // Emit the updated chat usage metrics
                 if (!!this.chatHistory.at(-1)?.additionalProperties.usageMetrics) {
                     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);
-                    action.pipe(take(1)).subscribe();
-                }
                 this._executionTime = history.executionTime;
+            },
+            isGlobalHandler: false
+        });
+        this.addMessageHandler("SuggestedActions", {
+            handler: (message) => {
+                // Since after the "History" and "MessageBreak" that this event is caught,
+                // $suggestedAction needs to be updated directly to the last visible "assistant" message in the _response and the chatHistory
+                this._response.at(-1).additionalProperties.$suggestedAction = (this._response.at(-1).additionalProperties.$suggestedAction || []).concat(message.suggestedActions);
+                const index = this.lastVisibleAssistantMessageIndex(this.chatHistory);
+                if (index !== -1) {
+                    this.chatHistory[index].additionalProperties.$suggestedAction = (this.chatHistory[index].additionalProperties.$suggestedAction || []).concat(message.suggestedActions);
+                }
+            },
+            isGlobalHandler: false
+        });
+        this.addMessageHandler("DebugDisplay", {
+            handler: (message) => this._debugMessages = this._debugMessages.concat(message),
+            isGlobalHandler: false
+        });
+        this.addMessageHandler("MessageBreak", {
+            handler: () => {
                 // Generate audit event
                 const details = {
                     'duration': this._executionTime,
                     'text': this.chatHistory.at(-1).content,
                     'role': this.chatHistory.at(-1).role,
                     'rank': this.chatHistory.length - 1,
-                    'generation-tokencount': this.chatHistory.at(-1).additionalProperties.usageMetrics.completionTokenCount,
-                    'prompt-tokencount': this.chatHistory.at(-1).additionalProperties.usageMetrics.promptTokenCount,
+                    'generation-tokencount': this.chatHistory.at(-1).additionalProperties.usageMetrics?.completionTokenCount,
+                    'prompt-tokencount': this.chatHistory.at(-1).additionalProperties.usageMetrics?.promptTokenCount,
                     'attachments': JSON.stringify(this._attachments.map(({ recordId, contextId, parts, type }) => ({
                         recordId,
                         contextId,
@@ -895,31 +1055,13 @@ class WebSocketChatService extends ChatService {
                     })))
                 };
                 this.generateAuditEvent('message', details);
+                // Push a new assistant message to the _response array ONLY if the content of the last message is not empty
+                if (this._response.at(-1).content !== "") {
+                    this._response.push({ role: "assistant", content: "", additionalProperties: { display: true } });
+                }
             },
             isGlobalHandler: false
         });
-        this.addMessageHandler("Error", {
-            handler: (error) => {
-                console.error(error);
-                this.notificationsService.error(error);
-            },
-            isGlobalHandler: true
-        });
-        this.addMessageHandler("Quota", {
-            handler: (message) => this.updateQuota(message.quota),
-            isGlobalHandler: true
-        });
-        this.addMessageHandler("SuggestedActions", {
-            handler: (message) => {
-                // Suggested actions are concatenated to the existing ones in case of multiple events "SuggestedActions"
-                this._suggestedActions = this._suggestedActions.concat(message.suggestedActions);
-            },
-            isGlobalHandler: false
-        });
-        this.addMessageHandler("DebugDisplay", {
-            handler: (message) => this._debugMessages = this._debugMessages ? this._debugMessages.concat(message) : [message],
-            isGlobalHandler: false
-        });
     }
     /**
      * Override and register the entire _messageHandlers map by merging the provided map with the default one
@@ -934,7 +1076,7 @@ class WebSocketChatService extends ChatService {
         });
         // Merge the new event handlers with the existing ones
         this._messageHandlers = new Map([...this._messageHandlers, ..._messageHandlers]);
-        // Register the global chat handlers among the merged map
+        // Register the global handlers among the merged map
         this._messageHandlers.forEach((eventHandler, eventName) => {
             if (eventHandler.isGlobalHandler) {
                 this.registerMessageHandler(eventName, eventHandler);
@@ -944,7 +1086,7 @@ class WebSocketChatService extends ChatService {
     /**
      * Add a listener for a specific event.
      * If a listener for this same event already exists, it will be overridden.
-     * If the listener has "isChatGlobalHandler" set to true, it will be registered to the hub connection.
+     * If the listener has "isGlobalHandler" set to true, it will be registered to the hub connection.
      * @param eventName Name of the event to register a listener for
      * @param eventHandler The handler to be called when the event is received
      */
@@ -998,8 +1140,12 @@ class WebSocketChatService extends ChatService {
                 reject(new Error("No endpoint provided to connect the websocket to"));
                 return;
             }
-            const logLevel = this.getLogLevel();
+            const logLevel = this._getLogLevel();
             this.connection = this.signalRService.buildConnection(this.REQUEST_URL, { ...this.defaultOptions, ...options }, logLevel, true);
+            const signalRServerTimeoutInMilliseconds = this.chatConfig$.value?.connectionSettings.signalRServerTimeoutInMilliseconds;
+            if (signalRServerTimeoutInMilliseconds) {
+                this.connection.serverTimeoutInMilliseconds = signalRServerTimeoutInMilliseconds;
+            }
             resolve();
         });
     }
@@ -1017,7 +1163,7 @@ class WebSocketChatService extends ChatService {
     stopConnection() {
         return this.signalRService.stopConnection(this.connection);
     }
-    getTransports() {
+    _getTransports() {
         switch (this.chatConfig$.value?.connectionSettings.signalRTransport) {
             case "WebSockets":
                 return HttpTransportType.WebSockets;
@@ -1029,7 +1175,7 @@ class WebSocketChatService extends ChatService {
                 return HttpTransportType.None;
         }
     }
-    getLogLevel() {
+    _getLogLevel() {
         switch (this.chatConfig$.value?.connectionSettings.signalRLogLevel) {
             case "Critical":
                 return LogLevel.Critical; // Log level for diagnostic messages that indicate a failure that will terminate the entire application.
@@ -1063,7 +1209,7 @@ class WebSocketChatService extends ChatService {
         // as far as we know, signalR only lets us tweak the request with this access token factory
         // so we pass along the Sinequa CSRF token to pass the CSRF check..
         return {
-            transport: this.getTransports(),
+            transport: this._getTransports(),
             withCredentials: true,
             headers,
             accessTokenFactory: () => this.authenticationService.processedCredentials?.data?.csrfToken || ""
@@ -1304,10 +1450,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\" (click)=\"expandAttachment()\">\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\">\n            {{attachment.record.title}}\n        </a>\n        <i class=\"fas fa-eye\" (click)=\"$event.stopPropagation(); 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)=\"$event.stopPropagation(); openDocument.emit(attachment)\" [sqTooltip]=\"!partId ? 'Open document' : ''\">\n        </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>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2))}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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);cursor:pointer}.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"] }] });
+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\" (click)=\"expandAttachment()\">\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\">\n            {{attachment.record.title}}\n        </a>\n        <i class=\"fas fa-eye\" (click)=\"$event.stopPropagation(); 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)=\"$event.stopPropagation(); openDocument.emit(attachment)\" [sqTooltip]=\"!partId ? 'Open document' : ''\">\n        </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 class=\"w-100 pe-2\" [innerHTML]=\"part.text\"></span>\n        </div>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2));color:var(--ast-action-buttons-color, inherit)}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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;--ast-action-buttons-color: white;--ast-action-buttons-hover-color: #6dbee6}: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);cursor:pointer}.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\" (click)=\"expandAttachment()\">\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\">\n            {{attachment.record.title}}\n        </a>\n        <i class=\"fas fa-eye\" (click)=\"$event.stopPropagation(); 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)=\"$event.stopPropagation(); openDocument.emit(attachment)\" [sqTooltip]=\"!partId ? 'Open document' : ''\">\n        </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>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2))}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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);cursor:pointer}.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"] }]
+            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\" (click)=\"expandAttachment()\">\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\">\n            {{attachment.record.title}}\n        </a>\n        <i class=\"fas fa-eye\" (click)=\"$event.stopPropagation(); 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)=\"$event.stopPropagation(); openDocument.emit(attachment)\" [sqTooltip]=\"!partId ? 'Open document' : ''\">\n        </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 class=\"w-100 pe-2\" [innerHTML]=\"part.text\"></span>\n        </div>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2));color:var(--ast-action-buttons-color, inherit)}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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;--ast-action-buttons-color: white;--ast-action-buttons-hover-color: #6dbee6}: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);cursor:pointer}.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: [{
@@ -1372,6 +1518,7 @@ class ChatMessageComponent {
         this.openDocument = new EventEmitter();
         this.openPreview = new EventEmitter();
         this.suggestAction = new EventEmitter();
+        this.chatStarterClicked = new EventEmitter();
         this.edit = new EventEmitter();
         this.copy = new EventEmitter();
         this.regenerate = new EventEmitter();
@@ -1447,7 +1594,7 @@ class ChatMessageComponent {
         if (changes.streaming) {
             this.collapseProgress = !this.streaming;
         }
-        if (changes.message && this.message?.role === "assistant") {
+        if (this.message?.role === "assistant") {
             this.references = [];
             this.referenceMap.clear();
             for (let m of this.conversation) {
@@ -1547,17 +1694,19 @@ 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", suggestedActions: "suggestedActions", assistantMessageIcon: "assistantMessageIcon", userMessageIcon: "userMessageIcon", connectionErrorMessageIcon: "connectionErrorMessageIcon", searchWarningMessageIcon: "searchWarningMessageIcon", streaming: "streaming", canEdit: "canEdit", canRegenerate: "canRegenerate", canCopy: "canCopy", canDebug: "canDebug", canLike: "canLike", canDislike: "canDislike" }, outputs: { openDocument: "openDocument", openPreview: "openPreview", suggestAction: "suggestAction", edit: "edit", copy: "copy", regenerate: "regenerate", like: "like", dislike: "dislike", debug: "debug" }, 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  <ng-container [ngSwitch]=\"message?.role\">\n    <!-- For 'assistant' -->\n    <i *ngSwitchCase=\"'assistant'\" [ngClass]=\"assistantMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n    <!-- For 'user' -->\n    <ng-container *ngSwitchCase=\"'user'\">\n      <i *ngIf=\"!!userMessageIcon; else initialsAvatar\" [ngClass]=\"userMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #initialsAvatar>\n        <sq-initials-avatar [fullName]=\"name\"></sq-initials-avatar>\n      </ng-template>\n    </ng-container>\n    <!-- For 'connection-error' -->\n    <ng-container *ngSwitchCase=\"'connection-error'\">\n      <i *ngIf=\"!!connectionErrorMessageIcon; else defaultErrorIcon\" [ngClass]=\"connectionErrorMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #defaultErrorIcon>\n        <svg [style.--sq-size.px]=\"iconSize\" class=\"connection-error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n          <path fill=\"currentColor\" d=\"M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zM256 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/>\n        </svg>\n      </ng-template>\n    </ng-container>\n    <!-- For 'search-warning' -->\n    <ng-container *ngSwitchCase=\"'search-warning'\">\n      <i *ngIf=\"!!searchWarningMessageIcon; else defaultWarningIcon\" [ngClass]=\"searchWarningMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #defaultWarningIcon>\n        <svg [style.--sq-size.px]=\"iconSize\" class=\"search-warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n          <path fill=\"currentColor\" d=\"M272 384c9.6-31.9 29.5-59.1 49.2-86.2c0 0 0 0 0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c0 0 0 0 0 0c19.8 27.1 39.7 54.4 49.2 86.2l160 0zM192 512c44.2 0 80-35.8 80-80l0-16-160 0 0 16c0 44.2 35.8 80 80 80zm0-448c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM160 288a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\"/>\n        </svg>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\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    <div *ngIf=\"message?.role === 'assistant' && message.messageType === 'CHART'\">\n      <sq-assistant-chart [rawChartData]=\"message.content\"></sq-assistant-chart>\n    </div>\n\n    <remark *ngIf=\"(message?.role === 'assistant' && message.messageType === 'MARKDOWN') || message?.role === 'connection-error' || message?.role === 'search-warning'\" [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          class=\"reference\"\n          [sqTooltip]=\"attachment\"\n          [sqTooltipTemplate]=\"tooltipTpl\"\n          [hoverableTooltip]=\"true\"\n          >{{ref.refId}}\n        </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)=\"copyCode(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\n                  [class.expanded]=\"attachment.$expanded\"\n                  [attachment]=\"attachment\"\n                  [reference]=\"reference\"\n                  (openPreview)=\"openAttachmentPreview($event)\"\n                  (openDocument)=\"openOriginalAttachment($event)\">\n                </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-actions\" *ngIf=\"message\">\n    <button class=\"btn btn-sm\" *ngIf=\"canEdit\" sqTooltip=\"Edit message\" (click)=\"edit.emit(message)\">\n      <i class=\"fas fa-edit\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canCopy\" sqTooltip=\"Copy text\" (click)=\"copyMessage(message)\">\n      <i class=\"far fa-clipboard\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canRegenerate\" sqTooltip=\"Regenerate message\" (click)=\"regenerate.emit(message)\">\n      <i class=\"fas fa-sync-alt\"></i>\n    </button>\n    <button class=\"btn btn-sm\" [class.bounce]=\"liked\" *ngIf=\"canLike\" sqTooltip=\"Like the answer\" (click)=\"like.emit(message); liked = true;\">\n      <i class=\"far fa-thumbs-up\"></i>\n    </button>\n    <button class=\"btn btn-sm bounce\"  [class.bounce]=\"disliked\" *ngIf=\"canDislike\" sqTooltip=\"Report an issue\" (click)=\"dislike.emit(message); disliked = true;\">\n      <i class=\"far fa-thumbs-down\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canDebug && !!message.additionalProperties.$debug && message.additionalProperties.$debug?.length > 0\" sqTooltip=\"Show Log Information\" (click)=\"debug.emit(message);\">\n      <i class=\"far fa-list-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\n      *ngIf=\"!hiddenTooltip\"\n      class=\"expanded\"\n      [attachment]=\"ref\"\n      [reference]=\"ref.contextId\"\n      [partId]=\"ref.$partId\"\n      (openPreview)=\"openAttachmentPreview($event, ref.$partId)\"\n      (openDocument)=\"openOriginalAttachment($event, ref.$partId)\">\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2))}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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):not(.last-message) .sq-chat-message-actions{visibility:hidden}.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:table;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-connection-error .message-content{background:var(--ast-error-bg, rgba(249, 58, 55, .2))}.message-search-warning .message-content{background:var(--ast-warning-bg, #fff1b8)}.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-actions{position:absolute;bottom:calc(0rem - var(--ast-size-3, .75rem));display:flex;z-index:999}.sq-chat-message-actions button{font-size:.75rem}.sq-chat-message-actions button:hover{color:var(--ast-primary-color, #005DA7)}.message-icon{margin-top:var(--ast-size-3, .75rem);margin-right:var(--ast-size-4, 1rem)}.connection-error{height:var(--sq-size);width:var(--sq-size);color:var(--ast-error-color, rgba(249, 58, 55, .7))}.search-warning{height:var(--sq-size);width:var(--sq-size);color:var(--ast-warning-color, #fed86f)}.bounce{animation:bounce 2s ease}@keyframes bounce{10%{transform:translateY(0)}20%{transform:translateY(-15%)}30%{transform:translateY(0)}35%{transform:translateY(-7%)}37%{transform:translateY(0)}39%{transform:translateY(-3%)}40%{transform:translateY(0)}}\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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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"] }, { kind: "component", type: ChartComponent, selector: "sq-assistant-chart", inputs: ["rawChartData"] }], 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", chatStarters: "chatStarters", assistantMessageIcon: "assistantMessageIcon", userMessageIcon: "userMessageIcon", connectionErrorMessageIcon: "connectionErrorMessageIcon", searchWarningMessageIcon: "searchWarningMessageIcon", streaming: "streaming", canEdit: "canEdit", canRegenerate: "canRegenerate", canCopy: "canCopy", canDebug: "canDebug", canLike: "canLike", canDislike: "canDislike" }, outputs: { openDocument: "openDocument", openPreview: "openPreview", suggestAction: "suggestAction", chatStarterClicked: "chatStarterClicked", edit: "edit", copy: "copy", regenerate: "regenerate", like: "like", dislike: "dislike", debug: "debug" }, 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  <ng-container [ngSwitch]=\"message?.role\">\n    <!-- For 'assistant' -->\n    <i *ngSwitchCase=\"'assistant'\" [ngClass]=\"assistantMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n    <!-- For 'user' -->\n    <ng-container *ngSwitchCase=\"'user'\">\n      <i *ngIf=\"!!userMessageIcon; else initialsAvatar\" [ngClass]=\"userMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #initialsAvatar>\n        <sq-initials-avatar [fullName]=\"name\"></sq-initials-avatar>\n      </ng-template>\n    </ng-container>\n    <!-- For 'connection-error' -->\n    <ng-container *ngSwitchCase=\"'connection-error'\">\n      <i *ngIf=\"!!connectionErrorMessageIcon; else defaultErrorIcon\" [ngClass]=\"connectionErrorMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #defaultErrorIcon>\n        <svg [style.--sq-size.px]=\"iconSize\" class=\"connection-error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n          <path fill=\"currentColor\" d=\"M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zM256 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/>\n        </svg>\n      </ng-template>\n    </ng-container>\n    <!-- For 'search-warning' -->\n    <ng-container *ngSwitchCase=\"'search-warning'\">\n      <i *ngIf=\"!!searchWarningMessageIcon; else defaultWarningIcon\" [ngClass]=\"searchWarningMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #defaultWarningIcon>\n        <svg [style.--sq-size.px]=\"iconSize\" class=\"search-warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n          <path fill=\"currentColor\" d=\"M272 384c9.6-31.9 29.5-59.1 49.2-86.2c0 0 0 0 0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c0 0 0 0 0 0c19.8 27.1 39.7 54.4 49.2 86.2l160 0zM192 512c44.2 0 80-35.8 80-80l0-16-160 0 0 16c0 44.2 35.8 80 80 80zm0-448c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM160 288a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\"/>\n        </svg>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n</span>\n\n<!-- Message body -->\n<div class=\"flex-grow-1\" style=\"min-width: 0;\" [ngClass]=\"'message-'+message.role\">\n\n  <!-- Progress steps -->\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-spinner fa-pulse step-ongoing\" *ngIf=\"!step.done && streaming\"></i>\n            <i class=\"fa-solid fa-ban step-error\" *ngIf=\"!step.done && !streaming\"></i>\n            <span class=\"ms-2 fw-bold\">{{step.title}}</span>\n            <span *ngIf=\"step.content\" [innerHTML]=\"': ' + step.content\"></span>\n          </li>\n        </ul>\n      </ng-template>\n    </sq-collapse>\n  </div>\n\n  <!-- Message content -->\n  <div class=\"message-content\" *ngIf=\"message.content\">\n\n    <div *ngIf=\"message?.role === 'assistant' && message.messageType === 'CHART'\">\n      <sq-assistant-chart [rawChartData]=\"message.content\"></sq-assistant-chart>\n    </div>\n\n    <!-- This section is responsible for customizing the template nodes used in the application.\n        Template nodes are predefined structures that serve as blueprints for creating/customizing dynamic content -->\n    <remark *ngIf=\"(message?.role === 'assistant' && message.messageType === 'MARKDOWN') || message?.role === 'connection-error' || message?.role === 'search-warning'\" [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          class=\"reference\"\n          [sqTooltip]=\"attachment\"\n          [sqTooltipTemplate]=\"tooltipTpl\"\n          [hoverableTooltip]=\"true\"\n          >{{ref.refId}}\n        </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)=\"copyCode(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\n                  [class.expanded]=\"attachment.$expanded\"\n                  [attachment]=\"attachment\"\n                  [reference]=\"reference\"\n                  (openPreview)=\"openAttachmentPreview($event)\"\n                  (openDocument)=\"openOriginalAttachment($event)\">\n                </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-actions\" *ngIf=\"message\">\n    <!-- Common action buttons for \"user\" & \"assistant\" message -->\n    <button class=\"btn btn-sm\" *ngIf=\"canCopy\" sqTooltip=\"Copy text\" (click)=\"copyMessage(message)\">\n      <i class=\"far fa-clipboard\"></i>\n    </button>\n    <!-- Action buttons for \"user\" message -->\n    <button class=\"btn btn-sm\" *ngIf=\"canEdit\" sqTooltip=\"Edit message\" (click)=\"edit.emit(message)\">\n      <i class=\"fas fa-edit\"></i>\n    </button>\n    <!-- Action buttons for \"assistant\" message -->\n    <button class=\"btn btn-sm\" [class.bounce]=\"liked\" *ngIf=\"canLike\" sqTooltip=\"Like the answer\" (click)=\"like.emit(message); liked = true;\">\n      <i class=\"far fa-thumbs-up\"></i>\n    </button>\n    <button class=\"btn btn-sm bounce\"  [class.bounce]=\"disliked\" *ngIf=\"canDislike\" sqTooltip=\"Report an issue\" (click)=\"dislike.emit(message); disliked = true;\">\n      <i class=\"far fa-thumbs-down\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canRegenerate\" sqTooltip=\"Regenerate message\" (click)=\"regenerate.emit(message)\">\n      <i class=\"fas fa-sync-alt\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canDebug\" sqTooltip=\"Show Log Information\" (click)=\"debug.emit(message);\">\n      <i class=\"far fa-list-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-icon\" [style.width.px]=\"iconSize\"></div>\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\n      *ngIf=\"!hiddenTooltip\"\n      class=\"expanded\"\n      [attachment]=\"ref\"\n      [reference]=\"ref.contextId\"\n      [partId]=\"ref.$partId\"\n      (openPreview)=\"openAttachmentPreview($event, ref.$partId)\"\n      (openDocument)=\"openOriginalAttachment($event, ref.$partId)\">\n    </sq-chat-reference>\n  </ng-template>\n\n</div>\n\n  <!-- List of chat starters, if any -->\n  <div *ngIf=\"chatStarters?.length\" class=\"mt-2 message-suggestion chat-starter\" [style.bottom.rem]=\"-(3.5*chatStarters!.length)\">\n    <div class=\"suggested-action\" *ngFor=\"let chatStarter of chatStarters\" (click)=\"chatStarterClicked.emit(chatStarter)\">\n      <div class=\"message-icon\" [style.width.px]=\"iconSize\"></div>\n      <div class=\"message-content\">\n        <p><i class=\"fas fa-clipboard-question\"></i> {{chatStarter.text}}</p>\n      </div>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2));color:var(--ast-action-buttons-color, inherit)}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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;--ast-action-buttons-color: white;--ast-action-buttons-hover-color: #6dbee6}:host{display:flex}:host:not(:hover):not(.last-message) .sq-chat-message-actions{visibility:hidden}.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:table;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-connection-error .message-content{background:var(--ast-error-bg, rgba(249, 58, 55, .2))}.message-search-warning .message-content{background:var(--ast-warning-bg, #fff1b8);color:var(--ast-message-reference-color, inherit)}.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{display:flex;cursor:pointer}.message-suggestion .suggested-action+.suggested-action{margin-top:var(--ast-size-2, .5rem)}.chat-starter{position:absolute}.sq-chat-message-actions{position:absolute;bottom:calc(0rem - var(--ast-size-3, .75rem));display:flex;z-index:999}.sq-chat-message-actions button{font-size:.75rem;color:var(--ast-action-buttons-color, #212529)}.sq-chat-message-actions button:hover{color:var(--ast-action-buttons-hover-color, var(--ast-primary-color, #005DA7))}.message-icon{margin-top:var(--ast-size-3, .75rem);margin-right:var(--ast-size-4, 1rem)}.connection-error{height:var(--sq-size);width:var(--sq-size);color:var(--ast-error-color, rgba(249, 58, 55, .7))}.search-warning{height:var(--sq-size);width:var(--sq-size);color:var(--ast-warning-color, #fed86f)}.step-success{color:var(--ast-primary-color, #005DA7)}.step-ongoing{color:var(--ast-secondary-color, #FF732E)}.step-error{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.bounce{animation:bounce 2s ease}@keyframes bounce{10%{transform:translateY(0)}20%{transform:translateY(-15%)}30%{transform:translateY(0)}35%{transform:translateY(-7%)}37%{transform:translateY(0)}39%{transform:translateY(-3%)}40%{transform:translateY(0)}}\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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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"] }, { kind: "component", type: ChartComponent, selector: "sq-assistant-chart", inputs: ["rawChartData"] }], 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, ChartComponent], template: "<!-- Message icon -->\n<span class=\"message-icon\" [title]=\"message?.role\">\n  <i class=\"d-block\" [style.width.px]=\"iconSize\" *ngIf=\"!message\"></i>\n  <ng-container [ngSwitch]=\"message?.role\">\n    <!-- For 'assistant' -->\n    <i *ngSwitchCase=\"'assistant'\" [ngClass]=\"assistantMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n    <!-- For 'user' -->\n    <ng-container *ngSwitchCase=\"'user'\">\n      <i *ngIf=\"!!userMessageIcon; else initialsAvatar\" [ngClass]=\"userMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #initialsAvatar>\n        <sq-initials-avatar [fullName]=\"name\"></sq-initials-avatar>\n      </ng-template>\n    </ng-container>\n    <!-- For 'connection-error' -->\n    <ng-container *ngSwitchCase=\"'connection-error'\">\n      <i *ngIf=\"!!connectionErrorMessageIcon; else defaultErrorIcon\" [ngClass]=\"connectionErrorMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #defaultErrorIcon>\n        <svg [style.--sq-size.px]=\"iconSize\" class=\"connection-error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n          <path fill=\"currentColor\" d=\"M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zM256 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/>\n        </svg>\n      </ng-template>\n    </ng-container>\n    <!-- For 'search-warning' -->\n    <ng-container *ngSwitchCase=\"'search-warning'\">\n      <i *ngIf=\"!!searchWarningMessageIcon; else defaultWarningIcon\" [ngClass]=\"searchWarningMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #defaultWarningIcon>\n        <svg [style.--sq-size.px]=\"iconSize\" class=\"search-warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n          <path fill=\"currentColor\" d=\"M272 384c9.6-31.9 29.5-59.1 49.2-86.2c0 0 0 0 0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c0 0 0 0 0 0c19.8 27.1 39.7 54.4 49.2 86.2l160 0zM192 512c44.2 0 80-35.8 80-80l0-16-160 0 0 16c0 44.2 35.8 80 80 80zm0-448c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM160 288a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\"/>\n        </svg>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\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    <div *ngIf=\"message?.role === 'assistant' && message.messageType === 'CHART'\">\n      <sq-assistant-chart [rawChartData]=\"message.content\"></sq-assistant-chart>\n    </div>\n\n    <remark *ngIf=\"(message?.role === 'assistant' && message.messageType === 'MARKDOWN') || message?.role === 'connection-error' || message?.role === 'search-warning'\" [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          class=\"reference\"\n          [sqTooltip]=\"attachment\"\n          [sqTooltipTemplate]=\"tooltipTpl\"\n          [hoverableTooltip]=\"true\"\n          >{{ref.refId}}\n        </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)=\"copyCode(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\n                  [class.expanded]=\"attachment.$expanded\"\n                  [attachment]=\"attachment\"\n                  [reference]=\"reference\"\n                  (openPreview)=\"openAttachmentPreview($event)\"\n                  (openDocument)=\"openOriginalAttachment($event)\">\n                </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-actions\" *ngIf=\"message\">\n    <button class=\"btn btn-sm\" *ngIf=\"canEdit\" sqTooltip=\"Edit message\" (click)=\"edit.emit(message)\">\n      <i class=\"fas fa-edit\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canCopy\" sqTooltip=\"Copy text\" (click)=\"copyMessage(message)\">\n      <i class=\"far fa-clipboard\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canRegenerate\" sqTooltip=\"Regenerate message\" (click)=\"regenerate.emit(message)\">\n      <i class=\"fas fa-sync-alt\"></i>\n    </button>\n    <button class=\"btn btn-sm\" [class.bounce]=\"liked\" *ngIf=\"canLike\" sqTooltip=\"Like the answer\" (click)=\"like.emit(message); liked = true;\">\n      <i class=\"far fa-thumbs-up\"></i>\n    </button>\n    <button class=\"btn btn-sm bounce\"  [class.bounce]=\"disliked\" *ngIf=\"canDislike\" sqTooltip=\"Report an issue\" (click)=\"dislike.emit(message); disliked = true;\">\n      <i class=\"far fa-thumbs-down\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canDebug && !!message.additionalProperties.$debug && message.additionalProperties.$debug?.length > 0\" sqTooltip=\"Show Log Information\" (click)=\"debug.emit(message);\">\n      <i class=\"far fa-list-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\n      *ngIf=\"!hiddenTooltip\"\n      class=\"expanded\"\n      [attachment]=\"ref\"\n      [reference]=\"ref.contextId\"\n      [partId]=\"ref.$partId\"\n      (openPreview)=\"openAttachmentPreview($event, ref.$partId)\"\n      (openDocument)=\"openOriginalAttachment($event, ref.$partId)\">\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2))}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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):not(.last-message) .sq-chat-message-actions{visibility:hidden}.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:table;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-connection-error .message-content{background:var(--ast-error-bg, rgba(249, 58, 55, .2))}.message-search-warning .message-content{background:var(--ast-warning-bg, #fff1b8)}.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-actions{position:absolute;bottom:calc(0rem - var(--ast-size-3, .75rem));display:flex;z-index:999}.sq-chat-message-actions button{font-size:.75rem}.sq-chat-message-actions button:hover{color:var(--ast-primary-color, #005DA7)}.message-icon{margin-top:var(--ast-size-3, .75rem);margin-right:var(--ast-size-4, 1rem)}.connection-error{height:var(--sq-size);width:var(--sq-size);color:var(--ast-error-color, rgba(249, 58, 55, .7))}.search-warning{height:var(--sq-size);width:var(--sq-size);color:var(--ast-warning-color, #fed86f)}.bounce{animation:bounce 2s ease}@keyframes bounce{10%{transform:translateY(0)}20%{transform:translateY(-15%)}30%{transform:translateY(0)}35%{transform:translateY(-7%)}37%{transform:translateY(0)}39%{transform:translateY(-3%)}40%{transform:translateY(0)}}\n"] }]
+                        InitialsAvatarComponent, ChatReferenceComponent, ChartComponent], template: "<!-- Message icon -->\n<span class=\"message-icon\" [title]=\"message?.role\">\n  <i class=\"d-block\" [style.width.px]=\"iconSize\" *ngIf=\"!message\"></i>\n  <ng-container [ngSwitch]=\"message?.role\">\n    <!-- For 'assistant' -->\n    <i *ngSwitchCase=\"'assistant'\" [ngClass]=\"assistantMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n    <!-- For 'user' -->\n    <ng-container *ngSwitchCase=\"'user'\">\n      <i *ngIf=\"!!userMessageIcon; else initialsAvatar\" [ngClass]=\"userMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #initialsAvatar>\n        <sq-initials-avatar [fullName]=\"name\"></sq-initials-avatar>\n      </ng-template>\n    </ng-container>\n    <!-- For 'connection-error' -->\n    <ng-container *ngSwitchCase=\"'connection-error'\">\n      <i *ngIf=\"!!connectionErrorMessageIcon; else defaultErrorIcon\" [ngClass]=\"connectionErrorMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #defaultErrorIcon>\n        <svg [style.--sq-size.px]=\"iconSize\" class=\"connection-error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n          <path fill=\"currentColor\" d=\"M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zM256 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/>\n        </svg>\n      </ng-template>\n    </ng-container>\n    <!-- For 'search-warning' -->\n    <ng-container *ngSwitchCase=\"'search-warning'\">\n      <i *ngIf=\"!!searchWarningMessageIcon; else defaultWarningIcon\" [ngClass]=\"searchWarningMessageIcon\" [style.--sq-size.px]=\"iconSize\"></i>\n      <ng-template #defaultWarningIcon>\n        <svg [style.--sq-size.px]=\"iconSize\" class=\"search-warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n          <path fill=\"currentColor\" d=\"M272 384c9.6-31.9 29.5-59.1 49.2-86.2c0 0 0 0 0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c0 0 0 0 0 0c19.8 27.1 39.7 54.4 49.2 86.2l160 0zM192 512c44.2 0 80-35.8 80-80l0-16-160 0 0 16c0 44.2 35.8 80 80 80zm0-448c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM160 288a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\"/>\n        </svg>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n</span>\n\n<!-- Message body -->\n<div class=\"flex-grow-1\" style=\"min-width: 0;\" [ngClass]=\"'message-'+message.role\">\n\n  <!-- Progress steps -->\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-spinner fa-pulse step-ongoing\" *ngIf=\"!step.done && streaming\"></i>\n            <i class=\"fa-solid fa-ban step-error\" *ngIf=\"!step.done && !streaming\"></i>\n            <span class=\"ms-2 fw-bold\">{{step.title}}</span>\n            <span *ngIf=\"step.content\" [innerHTML]=\"': ' + step.content\"></span>\n          </li>\n        </ul>\n      </ng-template>\n    </sq-collapse>\n  </div>\n\n  <!-- Message content -->\n  <div class=\"message-content\" *ngIf=\"message.content\">\n\n    <div *ngIf=\"message?.role === 'assistant' && message.messageType === 'CHART'\">\n      <sq-assistant-chart [rawChartData]=\"message.content\"></sq-assistant-chart>\n    </div>\n\n    <!-- This section is responsible for customizing the template nodes used in the application.\n        Template nodes are predefined structures that serve as blueprints for creating/customizing dynamic content -->\n    <remark *ngIf=\"(message?.role === 'assistant' && message.messageType === 'MARKDOWN') || message?.role === 'connection-error' || message?.role === 'search-warning'\" [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          class=\"reference\"\n          [sqTooltip]=\"attachment\"\n          [sqTooltipTemplate]=\"tooltipTpl\"\n          [hoverableTooltip]=\"true\"\n          >{{ref.refId}}\n        </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)=\"copyCode(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\n                  [class.expanded]=\"attachment.$expanded\"\n                  [attachment]=\"attachment\"\n                  [reference]=\"reference\"\n                  (openPreview)=\"openAttachmentPreview($event)\"\n                  (openDocument)=\"openOriginalAttachment($event)\">\n                </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-actions\" *ngIf=\"message\">\n    <!-- Common action buttons for \"user\" & \"assistant\" message -->\n    <button class=\"btn btn-sm\" *ngIf=\"canCopy\" sqTooltip=\"Copy text\" (click)=\"copyMessage(message)\">\n      <i class=\"far fa-clipboard\"></i>\n    </button>\n    <!-- Action buttons for \"user\" message -->\n    <button class=\"btn btn-sm\" *ngIf=\"canEdit\" sqTooltip=\"Edit message\" (click)=\"edit.emit(message)\">\n      <i class=\"fas fa-edit\"></i>\n    </button>\n    <!-- Action buttons for \"assistant\" message -->\n    <button class=\"btn btn-sm\" [class.bounce]=\"liked\" *ngIf=\"canLike\" sqTooltip=\"Like the answer\" (click)=\"like.emit(message); liked = true;\">\n      <i class=\"far fa-thumbs-up\"></i>\n    </button>\n    <button class=\"btn btn-sm bounce\"  [class.bounce]=\"disliked\" *ngIf=\"canDislike\" sqTooltip=\"Report an issue\" (click)=\"dislike.emit(message); disliked = true;\">\n      <i class=\"far fa-thumbs-down\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canRegenerate\" sqTooltip=\"Regenerate message\" (click)=\"regenerate.emit(message)\">\n      <i class=\"fas fa-sync-alt\"></i>\n    </button>\n    <button class=\"btn btn-sm\" *ngIf=\"canDebug\" sqTooltip=\"Show Log Information\" (click)=\"debug.emit(message);\">\n      <i class=\"far fa-list-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-icon\" [style.width.px]=\"iconSize\"></div>\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\n      *ngIf=\"!hiddenTooltip\"\n      class=\"expanded\"\n      [attachment]=\"ref\"\n      [reference]=\"ref.contextId\"\n      [partId]=\"ref.$partId\"\n      (openPreview)=\"openAttachmentPreview($event, ref.$partId)\"\n      (openDocument)=\"openOriginalAttachment($event, ref.$partId)\">\n    </sq-chat-reference>\n  </ng-template>\n\n</div>\n\n  <!-- List of chat starters, if any -->\n  <div *ngIf=\"chatStarters?.length\" class=\"mt-2 message-suggestion chat-starter\" [style.bottom.rem]=\"-(3.5*chatStarters!.length)\">\n    <div class=\"suggested-action\" *ngFor=\"let chatStarter of chatStarters\" (click)=\"chatStarterClicked.emit(chatStarter)\">\n      <div class=\"message-icon\" [style.width.px]=\"iconSize\"></div>\n      <div class=\"message-content\">\n        <p><i class=\"fas fa-clipboard-question\"></i> {{chatStarter.text}}</p>\n      </div>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2));color:var(--ast-action-buttons-color, inherit)}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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;--ast-action-buttons-color: white;--ast-action-buttons-hover-color: #6dbee6}:host{display:flex}:host:not(:hover):not(.last-message) .sq-chat-message-actions{visibility:hidden}.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:table;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-connection-error .message-content{background:var(--ast-error-bg, rgba(249, 58, 55, .2))}.message-search-warning .message-content{background:var(--ast-warning-bg, #fff1b8);color:var(--ast-message-reference-color, inherit)}.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{display:flex;cursor:pointer}.message-suggestion .suggested-action+.suggested-action{margin-top:var(--ast-size-2, .5rem)}.chat-starter{position:absolute}.sq-chat-message-actions{position:absolute;bottom:calc(0rem - var(--ast-size-3, .75rem));display:flex;z-index:999}.sq-chat-message-actions button{font-size:.75rem;color:var(--ast-action-buttons-color, #212529)}.sq-chat-message-actions button:hover{color:var(--ast-action-buttons-hover-color, var(--ast-primary-color, #005DA7))}.message-icon{margin-top:var(--ast-size-3, .75rem);margin-right:var(--ast-size-4, 1rem)}.connection-error{height:var(--sq-size);width:var(--sq-size);color:var(--ast-error-color, rgba(249, 58, 55, .7))}.search-warning{height:var(--sq-size);width:var(--sq-size);color:var(--ast-warning-color, #fed86f)}.step-success{color:var(--ast-primary-color, #005DA7)}.step-ongoing{color:var(--ast-secondary-color, #FF732E)}.step-error{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.bounce{animation:bounce 2s ease}@keyframes bounce{10%{transform:translateY(0)}20%{transform:translateY(-15%)}30%{transform:translateY(0)}35%{transform:translateY(-7%)}37%{transform:translateY(0)}39%{transform:translateY(-3%)}40%{transform:translateY(0)}}\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
+            }], chatStarters: [{
+                type: Input
             }], assistantMessageIcon: [{
                 type: Input
             }], userMessageIcon: [{
@@ -1586,6 +1735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Output
             }], suggestAction: [{
                 type: Output
+            }], chatStarterClicked: [{
+                type: Output
             }], edit: [{
                 type: Output
             }], copy: [{
@@ -1732,8 +1883,8 @@ class RestChatService extends ChatService {
                 'text': response.content,
                 'role': response.role,
                 'rank': this.chatHistory.length - 1,
-                'generation-tokencount': response.additionalProperties.usageMetrics.completionTokenCount,
-                'prompt-tokencount': response.additionalProperties.usageMetrics.promptTokenCount,
+                'generation-tokencount': response.additionalProperties.usageMetrics?.completionTokenCount,
+                'prompt-tokencount': response.additionalProperties.usageMetrics?.promptTokenCount,
                 'attachments': response.additionalProperties.$attachment?.map(({ recordId, contextId, parts, type }) => ({
                     recordId,
                     contextId,
@@ -1746,6 +1897,11 @@ class RestChatService extends ChatService {
             return { history: [...messages, response], executionTime: res.executionTime };
         }), finalize(() => this.streaming$.next(false)));
     }
+    stopGeneration() {
+        const error = new Error('Not supported in REST');
+        console.error(error);
+        return throwError(() => error);
+    }
     listSavedChat() {
         if (!this.chatConfig$.value.savedChatSettings.enabled) {
             return;
@@ -1864,10 +2020,10 @@ class TokenProgressBarComponent {
     }
 }
 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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2))}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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"] }] });
+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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2));color:var(--ast-action-buttons-color, inherit)}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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;--ast-action-buttons-color: white;--ast-action-buttons-hover-color: #6dbee6}.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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2))}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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"] }]
+            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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2));color:var(--ast-action-buttons-color, inherit)}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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;--ast-action-buttons-color: white;--ast-action-buttons-hover-color: #6dbee6}.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
             }] } });
@@ -1896,10 +2052,10 @@ class DebugMessageComponent {
     }
 }
 DebugMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DebugMessageComponent, deps: [{ token: i2$1.UIService }], target: i0.ɵɵFactoryTarget.Component });
-DebugMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DebugMessageComponent, isStandalone: true, selector: "sq-debug-message", inputs: { data: "data", level: "level", parentColor: "parentColor" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"table-root\">\n  <ng-container *ngFor=\"let item of data; let i = index\">\n    <div *ngIf=\"item.type === 'KV'\" [ngClass]=\"getRowClass(item, i)\" class=\"table-row kv-object\">\n      <div class=\"kv-key\">{{ item.data.key }}</div>\n      <div class=\"kv-value\">\n        <ng-container *ngIf=\"isObject(item.data.value); else normalValue\">\n          <div class=\"card mb-2\">\n            <div class=\"card-header\">\n              <button class=\"btn btn-light btn-sm\" (click)=\"copyToClipboard(item.data.value)\"><i class=\"far fa-fw fa-clipboard\"></i> Copy code</button>\n            </div>\n            <pre class=\"language-json my-0 rounded-0 rounded-bottom\"><code class=\"language-json\">{{ item.data.value | json }}</code></pre>\n          </div>\n        </ng-container>\n        <ng-template #normalValue>{{ item.data.value }}</ng-template>\n      </div>\n    </div>\n    <div *ngIf=\"item.type === 'LIST'\" [ngClass]=\"getRowClass(item, i)\" class=\"table-row list-object\">\n      <div class=\"list-name\" [class.w-100]=\"!item.expanded\" (click)=\"item.expanded=!item.expanded\">\n        <i class=\"fas\" [class.fa-chevron-up]=\"item.expanded\" [class.fa-chevron-down]=\"!item.expanded\"></i>\n        {{ item.name }}\n      </div>\n      <div class=\"list-items\" *ngIf=\"item.expanded\">\n        <sq-debug-message [data]=\"item.items\" [level]=\"level + 1\" [parentColor]=\"getRowClass(item, i)\"></sq-debug-message>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".table-root{display:flex;flex-direction:column;border:1px solid #ccc;width:100%;border-spacing:0}.table-row{display:flex;width:100%}.list-name{width:15%;cursor:pointer}.list-items{width:85%}.kv-key,.kv-value,.list-name{padding:8px;border:1px solid #ccc;box-sizing:border-box;word-wrap:break-word}.kv-key{width:20%}.kv-value{width:80%}.kv-object,.list-object{display:flex;flex:1}.row-even{background-color:#fff}.row-odd{background-color:#f2f8fe}.row-error{background-color:#f08080}.table-row:not(:last-child){border-bottom:1px solid #ccc}.kv-key:last-child,.kv-value:last-child,.list-name:last-child{border-right:none}\n"], dependencies: [{ kind: "component", type: DebugMessageComponent, selector: "sq-debug-message", inputs: ["data", "level", "parentColor"] }, { 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: "pipe", type: i1.JsonPipe, name: "json" }] });
+DebugMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DebugMessageComponent, isStandalone: true, selector: "sq-debug-message", inputs: { data: "data", level: "level", parentColor: "parentColor" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"table-root\">\n  <ng-container *ngFor=\"let item of data; let i = index\">\n    <div *ngIf=\"item.type === 'KV'\" [ngClass]=\"getRowClass(item, i)\" class=\"table-row kv-object\">\n      <div class=\"kv-key\">{{ item.data.key }}</div>\n      <div class=\"kv-value\">\n        <ng-container *ngIf=\"isObject(item.data.value); else normalValue\">\n          <div class=\"card mb-2\">\n            <div class=\"card-header\">\n              <button class=\"btn btn-light btn-sm\" (click)=\"copyToClipboard(item.data.value)\"><i class=\"far fa-fw fa-clipboard\"></i> Copy code</button>\n            </div>\n            <pre class=\"language-json my-0 rounded-0 rounded-bottom\"><code class=\"language-json\">{{ item.data.value | json }}</code></pre>\n          </div>\n        </ng-container>\n        <ng-template #normalValue><div class=\"data-value\">{{ item.data.value }}</div></ng-template>\n      </div>\n    </div>\n    <div *ngIf=\"item.type === 'LIST'\" [ngClass]=\"getRowClass(item, i)\" class=\"table-row list-object\">\n      <div class=\"list-name w-100\" [class.fw-bold]=\"level === 0\" (click)=\"item.expanded=!item.expanded\">\n        <i class=\"fas\" [class.fa-chevron-up]=\"item.expanded\" [class.fa-chevron-down]=\"!item.expanded\"></i>\n        {{ item.name }}\n      </div>\n      <div class=\"list-items w-100\" *ngIf=\"item.expanded\">\n        <sq-debug-message [data]=\"item.items\" [level]=\"level + 1\" [parentColor]=\"getRowClass(item, i)\"></sq-debug-message>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".table-root{display:flex;flex-direction:column;border:1px solid #ccc;width:100%;border-spacing:0}.table-row{display:flex;width:100%}.list-name{width:15%;cursor:pointer}.list-items{width:85%}.kv-key,.kv-value,.list-name{padding:8px;border:1px solid #ccc;box-sizing:border-box;word-wrap:break-word}.kv-key{width:20%}.kv-value{width:80%}.kv-value .data-value{white-space:pre-line}.kv-object,.list-object{display:flex;flex:1}.list-object{flex-direction:column}.row-even{background-color:#fff}.row-odd{background-color:#f2f8fe}.row-error{background-color:#f08080}.table-row:not(:last-child){border-bottom:1px solid #ccc}.kv-key:last-child,.kv-value:last-child,.list-name:last-child{border-right:none}\n"], dependencies: [{ kind: "component", type: DebugMessageComponent, selector: "sq-debug-message", inputs: ["data", "level", "parentColor"] }, { 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: "pipe", type: i1.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DebugMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sq-debug-message", standalone: true, imports: [CommonModule], template: "<div *ngIf=\"data\" class=\"table-root\">\n  <ng-container *ngFor=\"let item of data; let i = index\">\n    <div *ngIf=\"item.type === 'KV'\" [ngClass]=\"getRowClass(item, i)\" class=\"table-row kv-object\">\n      <div class=\"kv-key\">{{ item.data.key }}</div>\n      <div class=\"kv-value\">\n        <ng-container *ngIf=\"isObject(item.data.value); else normalValue\">\n          <div class=\"card mb-2\">\n            <div class=\"card-header\">\n              <button class=\"btn btn-light btn-sm\" (click)=\"copyToClipboard(item.data.value)\"><i class=\"far fa-fw fa-clipboard\"></i> Copy code</button>\n            </div>\n            <pre class=\"language-json my-0 rounded-0 rounded-bottom\"><code class=\"language-json\">{{ item.data.value | json }}</code></pre>\n          </div>\n        </ng-container>\n        <ng-template #normalValue>{{ item.data.value }}</ng-template>\n      </div>\n    </div>\n    <div *ngIf=\"item.type === 'LIST'\" [ngClass]=\"getRowClass(item, i)\" class=\"table-row list-object\">\n      <div class=\"list-name\" [class.w-100]=\"!item.expanded\" (click)=\"item.expanded=!item.expanded\">\n        <i class=\"fas\" [class.fa-chevron-up]=\"item.expanded\" [class.fa-chevron-down]=\"!item.expanded\"></i>\n        {{ item.name }}\n      </div>\n      <div class=\"list-items\" *ngIf=\"item.expanded\">\n        <sq-debug-message [data]=\"item.items\" [level]=\"level + 1\" [parentColor]=\"getRowClass(item, i)\"></sq-debug-message>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".table-root{display:flex;flex-direction:column;border:1px solid #ccc;width:100%;border-spacing:0}.table-row{display:flex;width:100%}.list-name{width:15%;cursor:pointer}.list-items{width:85%}.kv-key,.kv-value,.list-name{padding:8px;border:1px solid #ccc;box-sizing:border-box;word-wrap:break-word}.kv-key{width:20%}.kv-value{width:80%}.kv-object,.list-object{display:flex;flex:1}.row-even{background-color:#fff}.row-odd{background-color:#f2f8fe}.row-error{background-color:#f08080}.table-row:not(:last-child){border-bottom:1px solid #ccc}.kv-key:last-child,.kv-value:last-child,.list-name:last-child{border-right:none}\n"] }]
+            args: [{ selector: "sq-debug-message", standalone: true, imports: [CommonModule], template: "<div *ngIf=\"data\" class=\"table-root\">\n  <ng-container *ngFor=\"let item of data; let i = index\">\n    <div *ngIf=\"item.type === 'KV'\" [ngClass]=\"getRowClass(item, i)\" class=\"table-row kv-object\">\n      <div class=\"kv-key\">{{ item.data.key }}</div>\n      <div class=\"kv-value\">\n        <ng-container *ngIf=\"isObject(item.data.value); else normalValue\">\n          <div class=\"card mb-2\">\n            <div class=\"card-header\">\n              <button class=\"btn btn-light btn-sm\" (click)=\"copyToClipboard(item.data.value)\"><i class=\"far fa-fw fa-clipboard\"></i> Copy code</button>\n            </div>\n            <pre class=\"language-json my-0 rounded-0 rounded-bottom\"><code class=\"language-json\">{{ item.data.value | json }}</code></pre>\n          </div>\n        </ng-container>\n        <ng-template #normalValue><div class=\"data-value\">{{ item.data.value }}</div></ng-template>\n      </div>\n    </div>\n    <div *ngIf=\"item.type === 'LIST'\" [ngClass]=\"getRowClass(item, i)\" class=\"table-row list-object\">\n      <div class=\"list-name w-100\" [class.fw-bold]=\"level === 0\" (click)=\"item.expanded=!item.expanded\">\n        <i class=\"fas\" [class.fa-chevron-up]=\"item.expanded\" [class.fa-chevron-down]=\"!item.expanded\"></i>\n        {{ item.name }}\n      </div>\n      <div class=\"list-items w-100\" *ngIf=\"item.expanded\">\n        <sq-debug-message [data]=\"item.items\" [level]=\"level + 1\" [parentColor]=\"getRowClass(item, i)\"></sq-debug-message>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".table-root{display:flex;flex-direction:column;border:1px solid #ccc;width:100%;border-spacing:0}.table-row{display:flex;width:100%}.list-name{width:15%;cursor:pointer}.list-items{width:85%}.kv-key,.kv-value,.list-name{padding:8px;border:1px solid #ccc;box-sizing:border-box;word-wrap:break-word}.kv-key{width:20%}.kv-value{width:80%}.kv-value .data-value{white-space:pre-line}.kv-object,.list-object{display:flex;flex:1}.list-object{flex-direction:column}.row-even{background-color:#fff}.row-odd{background-color:#f2f8fe}.row-error{background-color:#f08080}.table-row:not(:last-child){border-bottom:1px solid #ccc}.kv-key:last-child,.kv-value:last-child,.list-name:last-child{border-right:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$1.UIService }]; }, propDecorators: { data: [{
                 type: Input
             }], level: [{
@@ -1927,6 +2083,8 @@ 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;
+        /** When the assistant answer a user question, automatically focus to the chat input */
+        this.focusAfterResponse = false;
         /** Icon to use for the assistant messages */
         this.assistantMessageIcon = 'sq-sinequa';
         /** Event emitter triggered once the signalR connection is established  */
@@ -1943,10 +2101,17 @@ class ChatComponent extends AbstractFacet {
         this.openPreview = new EventEmitter();
         /** Event emitter triggered when the user clicks on a suggested action */
         this.suggestAction = new EventEmitter();
+        /** Event emitter triggered when the user clicks on a chat starter */
+        this.chatStarter = new EventEmitter();
         this.messages$ = new BehaviorSubject(undefined);
         this.question = '';
         this._actions = [];
-        this.sub = new Subscription();
+        this._resetChatAction = new Action({
+            icon: 'fas fa-sync',
+            title: "Reset chat",
+            action: () => this.newChat()
+        });
+        this._sub = new Subscription();
         this.changes$ = new BehaviorSubject(undefined);
         this.firstChangesHandled = false;
         this.isAtBottom = true;
@@ -1964,16 +2129,14 @@ class ChatComponent extends AbstractFacet {
             'Other'
         ];
         this.issueType = '';
-        this.showReportIssue = false;
+        this.reportType = 'dislike';
+        this.showReport = false;
         this.showDebugMessages = false;
-        this._actions.push(new Action({
-            icon: 'fas fa-sync',
-            title: 'Reset chat',
-            action: () => this.newChat()
-        }));
+        this._reloadSubscription = undefined;
+        this._actions.push(this._resetChatAction);
     }
     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()), switchMap(_ => this.chatService.initProcess$), filter(success => !!success), tap(_ => {
+        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(_ => {
             if (this.chatService instanceof WebSocketChatService) {
                 this.connection.emit(this.chatService.connection);
             }
@@ -1997,6 +2160,12 @@ class ChatComponent extends AbstractFacet {
                 throw error;
             }
         })).subscribe());
+        this._sub.add(combineLatest([
+            this.chatService.streaming$,
+            this.chatService.stoppingGeneration$
+        ]).pipe(map(([streaming, stoppingGeneration]) => !!(streaming || stoppingGeneration))).subscribe((result) => {
+            this._resetChatAction.disabled = result;
+        }));
     }
     ngOnChanges(changes) {
         this.changes$.next(changes);
@@ -2005,12 +2174,16 @@ class ChatComponent extends AbstractFacet {
         }
     }
     ngOnDestroy() {
-        this.sub.unsubscribe();
-        this.dataSubscription?.unsubscribe();
+        this._sub.unsubscribe();
+        this._dataSubscription?.unsubscribe();
+        this._reloadSubscription?.unsubscribe();
     }
     get isAdmin() {
         return this.principalService.principal?.isAdministrator || false;
     }
+    get visibleMessagesCount() {
+        return this.messages$.value?.filter(m => m.additionalProperties.display).length || 0;
+    }
     /**
      * Instantiate the chat service based on the provided @input protocol
      * This chat service instance will then be stored in the instanceManagerService with provided @input instanceId as a key
@@ -2064,9 +2237,61 @@ class ChatComponent extends AbstractFacet {
          */
         if (this.firstChangesHandled && changes?.query && this.config.modeSettings.initialization.event === 'Query') {
             if (this.queryChangeShouldTriggerReload ? this.queryChangeShouldTriggerReload(this._previousQuery, this.query) : true) {
-                this._triggerReloadAfterQueryChange();
+                if (!!this.chatService.stoppingGeneration$.value) {
+                    if (!this._reloadSubscription) {
+                        // Create a subscription to wait for both streaming$ and stoppingGeneration$ to be false
+                        this._reloadSubscription = combineLatest([
+                            this.chatService.streaming$,
+                            this.chatService.stoppingGeneration$
+                        ])
+                            .pipe(filter(([streaming, stopping]) => !streaming && !stopping), // Wait until both are false
+                        take(1) // Complete after the first match
+                        ).subscribe(() => {
+                            // Execute the reload after the query change
+                            this._triggerReloadAfterQueryChange();
+                            // Update _previousQuery with the current query
+                            this._previousQuery = JSON.parse(JSON.stringify(this.query));
+                            // Clean up subscription and reset its value
+                            this._reloadSubscription = undefined;
+                        });
+                    }
+                }
+                else if (!!this.chatService.streaming$.value) {
+                    if (!this._reloadSubscription) {
+                        this._reloadSubscription = this.chatService.stopGeneration()
+                            .subscribe({
+                            next: () => { },
+                            error: () => {
+                                // Clean up subscription and reset its value
+                                this._reloadSubscription?.unsubscribe();
+                                this._reloadSubscription = undefined;
+                            },
+                            complete: () => {
+                                // Wait for the ongoing fetch to complete, then trigger the reload
+                                this.chatService.streaming$.pipe(filter((streaming) => !streaming), take(1)).subscribe(() => {
+                                    // Execute the reload after the query change
+                                    this._triggerReloadAfterQueryChange();
+                                    // Update _previousQuery with the current query
+                                    this._previousQuery = JSON.parse(JSON.stringify(this.query));
+                                    // Clean up subscription and reset its value
+                                    this._reloadSubscription.unsubscribe();
+                                    this._reloadSubscription = undefined;
+                                });
+                            }
+                        });
+                    }
+                }
+                else {
+                    // Execute the reload after the query change
+                    this._triggerReloadAfterQueryChange();
+                    // Update _previousQuery with the current query
+                    this._previousQuery = JSON.parse(JSON.stringify(this.query));
+                }
+            }
+            else {
+                // Update _previousQuery with the current query
+                this._previousQuery = JSON.parse(JSON.stringify(this.query));
             }
-            this._previousQuery = JSON.parse(JSON.stringify(this.query)); // Update the previous query
         }
     }
     _triggerReloadAfterQueryChange() {
@@ -2078,7 +2303,7 @@ class ChatComponent extends AbstractFacet {
         this._handleQueryMode(systemMsg, userMsg);
     }
     _addScrollListener() {
-        this.sub.add(merge(this.loading$, this.messages$, this.chatService.streaming$, fromEvent(this.messageList.nativeElement, 'scroll')).subscribe(() => {
+        this._sub.add(merge(this.loading$, this.messages$, this.chatService.streaming$, fromEvent(this.messageList.nativeElement, 'scroll')).subscribe(() => {
             this.isAtBottom = this._toggleScrollButtonVisibility();
             this.cdr.detectChanges();
         }));
@@ -2088,14 +2313,18 @@ class ChatComponent extends AbstractFacet {
         this.cdr.detectChanges();
     }
     submitQuestion() {
+        if (this.chatService.streaming$.value) {
+            return;
+        }
         if (this.question.trim() && this.messages$.value && this.chatService.chatHistory) {
             // When the user submits a question, if the user is editing a previous message, remove all subsequent messages from the chat history
             if (this.messageToEdit !== undefined) {
                 // Update the messages in the UI
                 this.messages$.next(this.messages$.value.slice(0, this.messageToEdit));
                 // Update the raw messages in the chat history which is the clean version used to make the next request
-                this.chatService.chatHistory = this.chatService.chatHistory.slice(0, this.messageToEdit);
+                this.chatService.chatHistory = this.chatService.chatHistory.slice(0, this.remappedMessageToEdit);
                 this.messageToEdit = undefined;
+                this.remappedMessageToEdit = undefined;
             }
             // Remove the search warning message if exists
             if (this.chatService.chatHistory.at(-1)?.role === 'search-warning') {
@@ -2126,8 +2355,8 @@ class ChatComponent extends AbstractFacet {
         this.cdr.detectChanges();
         if (this.isConnected) {
             this.loading$.next(true);
-            this.dataSubscription?.unsubscribe();
-            this.dataSubscription = this.chatService.fetch(messages, this.query)
+            this._dataSubscription?.unsubscribe();
+            this._dataSubscription = this.chatService.fetch(messages, this.query)
                 .subscribe({
                 next: res => this.updateData(res.history),
                 error: () => {
@@ -2139,6 +2368,14 @@ class ChatComponent extends AbstractFacet {
                     this.terminateFetch();
                 },
                 complete: () => {
+                    // Remove the last message if it's an empty message
+                    // This is due to the manner in which the chat service handles consecutive messages
+                    const lastMessage = this.messages$.value?.at(-1);
+                    if (lastMessage?.role === 'assistant' && lastMessage?.content === ""
+                        && !lastMessage?.additionalProperties?.$attachment && !lastMessage?.additionalProperties?.$progress
+                        && !lastMessage?.additionalProperties?.$debug && !lastMessage?.additionalProperties?.$suggestedAction) {
+                        this.messages$.next(this.messages$.value?.slice(0, -1));
+                    }
                     this.terminateFetch();
                 }
             });
@@ -2162,10 +2399,21 @@ class ChatComponent extends AbstractFacet {
         if (this.chatService instanceof WebSocketChatService) {
             // A one-time listener for reconnected event
             const onReconnectedHandler = () => {
+                // Get the messages without the last one (the connection error message)
                 const messages = this.messages$.value.slice(0, -1);
-                const lastMessage = messages.at(-1);
-                if (lastMessage && lastMessage.role === 'user') { // And it is always the case: the last message is always from the user
-                    this.fetch(messages); // If the last message if from a user, an answer from the assistant is expected
+                // Find the last "user" message in the messages list
+                let index = messages.length - 1;
+                while (index >= 0 && messages[index].role !== 'user') {
+                    index--;
+                }
+                // If a user message is found (and it should always be the case), remove all subsequent messages from the chat history
+                // Update the messages in the UI
+                // and fetch the answer from the assistant
+                if (index >= 0) {
+                    this.messages$.next(this.messages$.value.slice(0, index + 1));
+                    const remappedIndex = this._remapIndexInChatHistory(index);
+                    this.chatService.chatHistory = this.chatService.chatHistory.slice(0, remappedIndex + 1);
+                    this.fetch(this.chatService.chatHistory);
                 }
                 this.retrialAttempts = undefined; // Reset the number of retrial attempts
                 /**
@@ -2244,6 +2492,9 @@ class ChatComponent extends AbstractFacet {
      * If the savedChat feature is enabled, the list of saved chats will be refreshed
      */
     newChat() {
+        if (!!this.chatService.streaming$.value || !!this.chatService.stoppingGeneration$.value) {
+            return;
+        }
         this.chatService.setSavedChatId(undefined); // Reset the savedChatId
         this.chatService.generateChatId(); // Generate a new chatId
         this.chatService.listSavedChat(); // Refresh the list of saved chats
@@ -2344,14 +2595,22 @@ class ChatComponent extends AbstractFacet {
     }
     onLoadChat() {
         this.loading$.next(true);
-        this.sub.add(this.chatService.loadSavedChat$
+        this._sub.add(this.chatService.loadSavedChat$
             .pipe(filter(savedChat => !!savedChat), switchMap(savedChat => this.chatService.getSavedChat(savedChat.id)), filter(savedChatHistory => !!savedChatHistory), tap(savedChatHistory => this.openChat(savedChatHistory.history, savedChatHistory.id))).subscribe());
     }
+    stopGeneration() {
+        this.chatService.stopGeneration().subscribe(() => this.terminateFetch());
+    }
     terminateFetch() {
-        this.dataSubscription?.unsubscribe();
-        this.dataSubscription = undefined;
+        this._dataSubscription?.unsubscribe();
+        this._dataSubscription = undefined;
         this.loading$.next(false);
         this.cdr.detectChanges();
+        if (this.focusAfterResponse) {
+            setTimeout(() => {
+                this.questionInput?.nativeElement.focus();
+            });
+        }
     }
     /**
      * Copy a previous user message of the chat history to the chat user input.
@@ -2362,15 +2621,18 @@ class ChatComponent extends AbstractFacet {
      */
     editMessage(index) {
         this.messageToEdit = index;
-        this.question = this.chatService.chatHistory[index].content;
-        this.chatService.generateAuditEvent('edit.click', { 'rank': index });
+        this.remappedMessageToEdit = this._remapIndexInChatHistory(index);
+        this.question = this.chatService.chatHistory[this._remapIndexInChatHistory(index)].content;
+        this.chatService.generateAuditEvent('edit.click', { 'rank': this._remapIndexInChatHistory(index) });
     }
     /**
      * Copy a previous assistant message of the chat history to the clipboard.
      * @param index The index of the assistant's message to edit
      */
     copyMessage(index) {
-        this.chatService.generateAuditEvent('copy.click', { 'rank': index });
+        // Remap the index in the chat history
+        const idx = this._remapIndexInChatHistory(index);
+        this.chatService.generateAuditEvent('copy.click', { 'rank': idx });
     }
     /**
      * Starting from the provided index, remove all subsequent messages from the chat history and the UI accordingly.
@@ -2378,13 +2640,45 @@ class ChatComponent extends AbstractFacet {
      * @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);
-        // Accordingly update the messages in the UI
-        this.messages$.next(slicedMessages);
-        // Fetch the answer
-        this.fetch(slicedMessages);
-        this.chatService.generateAuditEvent('regenerate.click', { 'rank': index });
+        // Update the messages in the UI by removing all subsequent 'assistant' messages starting from the provided index until the first previous 'user' message
+        let i = index;
+        while (i >= 0 && (this.messages$.value)[i].role !== 'user') {
+            i--;
+        }
+        // It should always be the case that i > 0
+        if (i >= 0) {
+            this.messages$.next(this.messages$.value.slice(0, i + 1));
+            // Remap the index of this found first previous 'user' message in the chat history
+            const idx = this._remapIndexInChatHistory(i);
+            // Define and Update the chat history based on which the assistant will generate a new answer
+            this.chatService.chatHistory = this.chatService.chatHistory.slice(0, idx + 1);
+            // Fetch the answer
+            this.fetch(this.chatService.chatHistory);
+            this.chatService.generateAuditEvent('regenerate.click', { 'rank': idx });
+        }
+    }
+    /**
+     * Remaps the index in the chat history.
+     * The chat history is a list of messages where some messages can be hidden (display set to false).
+     * The index provided as input is the index of the message in the chat history displayed in the UI.
+     * This function should be removed once the backend is updated to add the ids of the messages in the chat history
+     * @param index - The index to be remapped.
+     */
+    _remapIndexInChatHistory(index) {
+        // a copy of the chat history is created to avoid modifying the original chat history. Additionally, a rank is giving to each message.
+        const history = this.chatService.chatHistory.slice().map((message, idx) => {
+            return { ...message, additionalProperties: { ...message.additionalProperties, rank: idx } };
+        });
+        // Count the number of hidden messages in messages$ before the provided index
+        // This is mandatory to get the correct rank of the message in the chat history
+        // Since some hidden messages (like 'system' messages) are not displayed in the UI but have been counted in the provided index
+        const numberOfHiddenMessagesInMessages$BeforeIndex = this.messages$.value.slice(0, index).filter(message => !message.additionalProperties.display).length;
+        // remove all messages that have display set to false
+        // this is mandatory since at the point of time when the assistant answers a question,
+        // it might have some hidden messages (for example contextMessages) that are available in the chat history but don't figure in messages$ unless a new question is asked
+        const filteredHistory = history.filter(message => message.additionalProperties.display);
+        // return the index of the message in the filtered history
+        return filteredHistory[index - numberOfHiddenMessagesInMessages$BeforeIndex].additionalProperties.rank;
     }
     onKeyUp(event) {
         switch (event.key) {
@@ -2415,43 +2709,59 @@ class ChatComponent extends AbstractFacet {
     }
     /**
      * Send a "like" event on clicking on the thumb-up icon of an assistant's message
+     * @param message The assistant message to like
      * @param rank The rank of the message to like
      */
-    onLike(rank) {
-        this.chatService.generateAuditEvent('thumb-up.click', { rank });
+    onLike(message, rank) {
+        // Remap the index in the chat history
+        const idx = this._remapIndexInChatHistory(rank);
+        this.chatService.generateAuditEvent('thumb-up.click', { rank: idx });
+        this.reportType = 'like';
+        this.messageToReport = message;
+        this.reportComment = undefined;
+        this.reportRank = rank;
+        this.showReport = true;
     }
     /**
      * Send a "dislike" event on clicking on the thumb-down icon of an assistant's message.
      * It also opens the issue reporting dialog.
      * @param message The assistant message to dislike
-     * @param rank The rank of the message to dislike
+     * @param index The rank of the message to dislike
      */
     onDislike(message, rank) {
-        this.chatService.generateAuditEvent('thumb-down.click', { rank });
-        this.messageRelatedIssue = message;
+        // Remap the index in the chat history
+        const idx = this._remapIndexInChatHistory(rank);
+        this.chatService.generateAuditEvent('thumb-down.click', { rank: idx });
+        this.reportType = 'dislike';
+        this.messageToReport = message;
         this.issueType = '';
-        this.issueComment = undefined;
-        this.issueRank = rank;
-        this.showReportIssue = true;
+        this.reportComment = undefined;
+        this.reportRank = rank;
+        this.showReport = true;
     }
     /**
      * Report an issue related to the assistant's message.
      */
-    sendIssue() {
+    sendReport() {
         const details = {
-            'report-type': this.issueType,
-            'comment': this.issueComment,
-            'text': this.messageRelatedIssue.content,
-            'rank': this.issueRank,
+            'comment': this.reportComment,
+            'text': this.messageToReport.content,
+            'rank': this.reportRank,
         };
-        this.chatService.generateAuditEvent('negative-report.send', details);
-        this.showReportIssue = false;
+        if (this.reportType === 'dislike') {
+            details['report-type'] = this.issueType;
+            this.chatService.generateAuditEvent('negative-report.send', details);
+        }
+        else {
+            this.chatService.generateAuditEvent('positive-report.send', details);
+        }
+        this.showReport = false;
     }
     /**
-     * Close the issue reporting dialog.
+     * Close the reporting dialog.
      */
-    ignoreIssue() {
-        this.showReportIssue = false;
+    ignoreReport() {
+        this.showReport = false;
     }
     /**
      * Handle the click on a reference's 'open preview'.
@@ -2496,27 +2806,69 @@ class ChatComponent extends AbstractFacet {
         this.suggestAction.emit(action);
         this.chatService.generateAuditEvent('suggestedAction.click', { 'text': action.content, 'suggestedAction-type': action.type });
     }
+    /**
+     * Handle the click on a chat starter.
+     * @param starter the chat starter.
+     */
+    chatStarterClick(starter) {
+        this.chatStarter.emit(starter);
+    }
+    /**
+     * It looks for the debug messages available in the current group of "assistant" messages.
+     * By design, the debug messages are only available in the first visible message among the group "assistant" messages.
+     * @param index The rank of the message
+     * @returns The debug messages available in the current group of "assistant" messages
+     */
+    getDebugMessages(index) {
+        // If it is not an assistant message, return
+        if ((this.messages$.value)[index].role !== 'assistant') {
+            return [];
+        }
+        // Get the array of messages up to the indicated index
+        const array = this.messages$.value.slice(0, index + 1);
+        // If it is an assistant message, look for the debug messages available in the current group of "assistant" messages
+        // By design, the debug messages are only available in the first visible message among the group "assistant" messages.
+        const idx = this.chatService.firstVisibleAssistantMessageIndex(array);
+        if (idx > -1) {
+            return (this.messages$.value)[idx].additionalProperties.$debug || [];
+        }
+        return [];
+    }
     /**
      * Handle the click on the 'show log info' button of a message.
-     * @param message The message of the ChatHistory to show its debug messages
+     * @param index The rank of the message
      */
-    showDebug(message) {
-        this.debugMessages = message.additionalProperties.$debug;
+    showDebug(index) {
+        this.debugMessages = this.getDebugMessages(index);
         this.showDebugMessages = true;
         this.cdr.detectChanges();
     }
+    /**
+     * Verify whether the current message is an assistant message and that all following messages are assistant ones
+     * Used to keep the "View progress" opened even though the assistant is sending additional messages after the current one
+     * @param messages the list of current messages
+     * @param index the index of the current message
+     * @returns if this messages and the following ones (if any) are the last ones
+     */
+    isAssistantLastMessages(messages, index) {
+        for (let i = index; i < messages.length; i++) {
+            if (messages[i].role !== 'assistant')
+                return false;
+        }
+        return true;
+    }
 }
 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", connectionErrorMessageIcon: "connectionErrorMessageIcon", searchWarningMessageIcon: "searchWarningMessageIcon" }, outputs: { connection: "connection", loading$: "loading", _config: "config", data: "data", openDocument: "openDocument", openPreview: "openPreview", suggestAction: "suggestAction" }, 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", focusAfterResponse: "focusAfterResponse", chat: "chat", assistantMessageIcon: "assistantMessageIcon", userMessageIcon: "userMessageIcon", connectionErrorMessageIcon: "connectionErrorMessageIcon", searchWarningMessageIcon: "searchWarningMessageIcon" }, outputs: { connection: "connection", loading$: "loading", _config: "config", data: "data", openDocument: "openDocument", openPreview: "openPreview", suggestAction: "suggestAction", chatStarter: "chatStarter" }, providers: [
         RestChatService,
         WebSocketChatService
-    ], queries: [{ propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true }, { propertyName: "reportIssueTpl", first: true, predicate: ["reportIssueTpl"], descendants: true }, { propertyName: "tokenConsumptionTpl", first: true, predicate: ["tokenConsumptionTpl"], descendants: true }, { propertyName: "debugMessagesTpl", first: true, predicate: ["debugMessagesTpl"], 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: "<ng-container *ngIf=\"!initializationError\">\n  <div *ngIf=\"messages$ | async as messages; else loadingTpl || loadingTplDefault\" class=\"h-100 d-flex flex-column\">\n    <!-- Token consumption -->\n    <div class=\"ms-1\" *ngIf=\"config?.globalSettings?.displayUserQuotaConsumption || config?.globalSettings?.displayChatTokensConsumption\">\n      <ng-container *ngTemplateOutlet=\"tokenConsumptionTpl || defaultTokenConsumptionTpl; context: { $implicit: instanceId }\"></ng-container>\n    </div>\n\n    <!-- Chat Messages -->\n    <ul class=\"list-group list-group-flush overflow-auto flex-grow-1 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\" [style.--bs-list-group-item-padding-y.rem]=\"'0.6'\" *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            [class.last-message]=\"last\"\n            [message]=\"message\"\n            [conversation]=\"messages\"\n            [suggestedActions]=\"last ? message.additionalProperties.$suggestedAction : undefined\"\n            [assistantMessageIcon]=\"assistantMessageIcon\"\n            [userMessageIcon]=\"userMessageIcon\"\n            [connectionErrorMessageIcon]=\"connectionErrorMessageIcon\"\n            [searchWarningMessageIcon]=\"searchWarningMessageIcon\"\n            [streaming]=\"last && (chatService.streaming$ | async)\"\n            [canEdit]=\"(loading$ | async) === false && ((chatService.streaming$ | async) === false || !last) && messageToEdit === undefined && message.role === 'user'\"\n            [canRegenerate]=\"(loading$ | async) === false && (chatService.streaming$ | async) === false && messageToEdit === undefined && message.role === 'assistant' && last\"\n            [canCopy]=\"((chatService.streaming$ | async) === false || !last) && messageToEdit === undefined && message.role !== 'connection-error' && message.role !== 'search-warning'\"\n            [canDebug]=\"((chatService.streaming$ | async) === false || !last) && message.role === 'assistant' && isAdmin && message.additionalProperties.$debug\"\n            [canLike]=\"((chatService.streaming$ | async) === false || !last) && message.role === 'assistant'\"\n            [canDislike]=\"((chatService.streaming$ | async) === false || !last) && message.role === 'assistant'\"\n            (edit)=\"editMessage(index)\"\n            (copy)=\"copyMessage(index)\"\n            (regenerate)=\"regenerateMessage(index)\"\n            (openDocument)=\"openOriginalAttachment($event)\"\n            (openPreview)=\"openAttachmentPreview($event)\"\n            (suggestAction)=\"suggestActionClick($event, index)\"\n            (like)=\"onLike(index)\"\n            (dislike)=\"onDislike($event, index)\"\n            (debug)=\"showDebug($event)\">\n          </sq-chat-message>\n        </li>\n      </ng-container>\n      <!-- Loading spinner -->\n      <li class=\"list-group-item\" *ngIf=\"(loading$ | async) === true\">\n        <ng-container *ngTemplateOutlet=\"loadingTpl || loadingTplDefault\"></ng-container>\n      </li>\n    </ul>\n\n    <!-- Reporting an issue form -->\n    <div class=\"issue-report bg-light pt-3 pb-2\" *ngIf=\"showReportIssue\">\n      <ng-container *ngTemplateOutlet=\"reportIssueTpl || reportIssueTplDefault; context: { $implicit: messageRelatedIssue, rank: issueRank }\"></ng-container>\n    </div>\n\n    <!-- User text input -->\n    <div class=\"user-input mt-auto\" *ngIf=\"!showReportIssue\">\n      <div class=\"py-2\">\n        <div [hidden]=\"!isConnected\">\n          <ng-container *ngIf=\"enabledUserInput\" [ngTemplateOutlet]=\"inputTpl\"></ng-container>\n        </div>\n        <!-- Retry button -->\n        <button [hidden]=\"isConnected\" class=\"btn mb-4 ast-error ast-btn sq-retry\" (click)=\"retryFetch()\">\n          <span>Try again</span>\n          <span *ngIf=\"retrialAttempts\" class=\"ms-2 attempts\">{{ retrialAttempts }}</span>\n        </button>\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\n    <!-- Floating scroll button -->\n    <div *ngIf=\"!isAtBottom && !showReportIssue\" class=\"sq-floating-scroll\" [ngClass]=\"enabledUserInput ? 'sq-floating-scroll--when-user-input' : 'sq-floating-scroll--without-user-input'\">\n      <button class=\"btn shadow\" (click)=\"scrollDown()\">\n        <i class=\"fas fa-angle-double-down\"></i>\n      </button>\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($event)\"\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>\n  </div>\n</ng-template>\n\n<ng-template #reportIssueTplDefault let-message let-rank=\"rank\">\n  <div class=\"px-3\">\n    <h5>Issue type</h5>\n    <select class=\"form-select mb-4\" [(ngModel)]=\"issueType\">\n      <option [value]=\"''\">Choose an issue type</option>\n      <option *ngFor=\"let type of (issueTypes ?? defaultIssueTypes)\">{{type}}</option>\n    </select>\n    <h5>Comment (optional)</h5>\n    <textarea class=\"form-control\" [(ngModel)]=\"issueComment\" placeholder=\"What was unsatisfying about this response?\"></textarea>\n    <div class=\"d-flex flex-row-reverse mt-2\">\n      <button class=\"btn btn-primary\" [disabled]=\"!issueType\" (click)=\"sendIssue()\">Send</button>\n      <button class=\"btn btn-light\" (click)=\"ignoreIssue()\">Cancel</button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultTokenConsumptionTpl let-instanceId>\n  <sq-token-progress-bar\n    [instanceId]=\"instanceId\">\n  </sq-token-progress-bar>\n</ng-template>\n\n<div class=\"debug-messages\" [class.displayed]=\"showDebugMessages\">\n  <button *ngIf=\"showDebugMessages\" class=\"btn btn-light shadow back-btn\" (click)=\"showDebugMessages=false\">\n    <i class=\"fas fa-chevron-right\"></i>\n  </button>\n  <ng-container *ngTemplateOutlet=\"debugMessagesTpl || defaultDebugMessagesTpl; context: { $implicit: debugMessages }\">\n  </ng-container>\n</div>\n\n<ng-template #defaultDebugMessagesTpl let-debugMessages>\n  <sq-debug-message [data]=\"debugMessages\"></sq-debug-message>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2))}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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>.issue-report>div,: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%;text-align:center}.sq-floating-scroll--when-user-input{bottom:75px}.sq-floating-scroll--without-user-input{bottom:15px}.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}.debug-messages{position:fixed;z-index:999999;right:-60%;top:0;width:60%;height:100%;transition:all .5s ease;background-color:var(--bs-body-bg);overflow:auto}.debug-messages .back-btn{position:fixed;right:0%;transition:all .5s ease}.debug-messages.displayed{right:0}.debug-messages.displayed .back-btn{right:60%}.debug-messages sq-debug-message:first-of-type{display:block;width:100%}.sq-retry{display:flex;margin:auto;font-weight:var(--font-weight-bold, 500)}.sq-retry .attempts{display:flex;border-radius:100%;background:white;height:20px;width:20px;place-content:center;align-items:center}\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: "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.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.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"] }, { kind: "component", type: ChatMessageComponent, selector: "sq-chat-message", inputs: ["message", "conversation", "suggestedActions", "assistantMessageIcon", "userMessageIcon", "connectionErrorMessageIcon", "searchWarningMessageIcon", "streaming", "canEdit", "canRegenerate", "canCopy", "canDebug", "canLike", "canDislike"], outputs: ["openDocument", "openPreview", "suggestAction", "edit", "copy", "regenerate", "like", "dislike", "debug"] }, { kind: "component", type: TokenProgressBarComponent, selector: "sq-token-progress-bar", inputs: ["instanceId"] }, { kind: "component", type: DebugMessageComponent, selector: "sq-debug-message", inputs: ["data", "level", "parentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true }, { propertyName: "reportTpl", first: true, predicate: ["reportTpl"], descendants: true }, { propertyName: "tokenConsumptionTpl", first: true, predicate: ["tokenConsumptionTpl"], descendants: true }, { propertyName: "debugMessagesTpl", first: true, predicate: ["debugMessagesTpl"], 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: "<ng-container *ngIf=\"!initializationError\">\n  <div *ngIf=\"messages$ | async as messages; else loadingTpl || loadingTplDefault\" class=\"h-100 d-flex flex-column\">\n    <!-- Token consumption -->\n    <div class=\"ms-1\" *ngIf=\"config?.globalSettings?.displayUserQuotaConsumption || config?.globalSettings?.displayChatTokensConsumption\">\n      <ng-container *ngTemplateOutlet=\"tokenConsumptionTpl || defaultTokenConsumptionTpl; context: { $implicit: instanceId }\"></ng-container>\n    </div>\n\n    <!-- Chat Messages -->\n    <ul class=\"list-group list-group-flush overflow-auto flex-grow-1 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\"\n          *ngIf=\"message.additionalProperties.display\"\n          [style.--bs-list-group-item-padding-y.rem]=\"'0.6'\"\n          [class.opacity-50]=\"messageToEdit && messageToEdit < index + 1\">\n          <sq-chat-message\n            [class.sq-user-message]=\"message.role === 'user'\"\n            [class.last-message]=\"last\"\n            [message]=\"message\"\n            [conversation]=\"messages\"\n            [suggestedActions]=\"last ? message.additionalProperties.$suggestedAction : undefined\"\n            [chatStarters]=\"visibleMessagesCount === 1 ? config.modeSettings.initialization.chatStarters : undefined\"\n            [assistantMessageIcon]=\"assistantMessageIcon\"\n            [userMessageIcon]=\"userMessageIcon\"\n            [connectionErrorMessageIcon]=\"connectionErrorMessageIcon\"\n            [searchWarningMessageIcon]=\"searchWarningMessageIcon\"\n            [streaming]=\"(chatService.streaming$ | async) && (last || isAssistantLastMessages(messages, index))\"\n            [canEdit]=\"(loading$ | async) === false && ((chatService.streaming$ | async) === false || !last) && messageToEdit === undefined && message.role === 'user'\"\n            [canCopy]=\"((chatService.streaming$ | async) === false || !last) && messageToEdit === undefined && message.role !== 'connection-error' && message.role !== 'search-warning'\"\n            [canLike]=\"((chatService.streaming$ | async) === false || !last) && message.role === 'assistant'\"\n            [canDislike]=\"((chatService.streaming$ | async) === false || !last) && message.role === 'assistant'\"\n            [canDebug]=\"(((chatService.streaming$ | async) === false && last) || (!last && messages[index+1].role !== 'assistant')) && message.role === 'assistant' && isAdmin && (getDebugMessages(index).length > 0) && config?.defaultValues.debug\"\n            [canRegenerate]=\"(loading$ | async) === false && (((chatService.streaming$ | async) === false  && last) || (!last && messages[index+1].role !== 'assistant'))  && message.role === 'assistant' && messageToEdit === undefined\"\n            (edit)=\"editMessage(index)\"\n            (copy)=\"copyMessage(index)\"\n            (regenerate)=\"regenerateMessage(index)\"\n            (openDocument)=\"openOriginalAttachment($event)\"\n            (openPreview)=\"openAttachmentPreview($event)\"\n            (suggestAction)=\"suggestActionClick($event, index)\"\n            (chatStarterClicked)=\"chatStarterClick($event)\"\n            (like)=\"onLike($event, index)\"\n            (dislike)=\"onDislike($event, index)\"\n            (debug)=\"showDebug(index)\">\n          </sq-chat-message>\n        </li>\n      </ng-container>\n      <!-- Loading spinner -->\n      <li class=\"list-group-item\" *ngIf=\"(loading$ | async) === true\">\n        <ng-container *ngTemplateOutlet=\"loadingTpl || loadingTplDefault\"></ng-container>\n      </li>\n    </ul>\n\n    <!-- Reporting a feedback form -->\n    <div class=\"issue-report bg-light pt-3 pb-2\" *ngIf=\"showReport\">\n      <ng-container *ngTemplateOutlet=\"reportTpl || reportTplDefault; context: { $implicit: messageToReport, rank: reportRank, type: reportType }\"></ng-container>\n    </div>\n\n    <!-- User text input -->\n    <div class=\"user-input mt-auto\" *ngIf=\"!showReport\">\n      <div class=\"py-2\">\n        <div [hidden]=\"!isConnected\">\n          <ng-container *ngIf=\"enabledUserInput\" [ngTemplateOutlet]=\"inputTpl\"></ng-container>\n        </div>\n        <!-- Retry button -->\n        <button [hidden]=\"isConnected\" class=\"btn mb-4 ast-error ast-btn sq-retry\" (click)=\"retryFetch()\">\n          <span>Try again</span>\n          <span *ngIf=\"retrialAttempts\" class=\"ms-2 attempts\">{{ retrialAttempts }}</span>\n        </button>\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\n    <!-- Floating scroll button -->\n    <div *ngIf=\"!isAtBottom && !showReport\" class=\"sq-floating-scroll\" [ngClass]=\"enabledUserInput ? 'sq-floating-scroll--when-user-input' : 'sq-floating-scroll--without-user-input'\">\n      <button class=\"btn shadow\" (click)=\"scrollDown()\">\n        <i class=\"fas fa-angle-double-down\"></i>\n      </button>\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($event)\"\n        [disabled]=\"(loading$ | async) || (chatService.streaming$ | async) || (chatService.stoppingGeneration$ | async)\">\n      </textarea>\n      <button\n        *ngIf=\"!(chatService.streaming$ | async) && !(loading$ | async) && !(chatService.stoppingGeneration$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        sqTooltip=\"Send message\"\n        (click)=\"submitQuestion()\">\n        <i class=\"fas fa-paper-plane\"></i>\n      </button>\n      <button\n        *ngIf=\"messageToEdit\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        sqTooltip=\"Cancel edition\"\n        (click)=\"messageToEdit = undefined; question = ''\">\n        <i class=\"fas fa-undo-alt\"></i>\n      </button>\n      <span *ngIf=\"(chatService.streaming$ | async) && !(chatService.stoppingGeneration$ | async)\" class=\"processing ms-2\">\n        Generating <i class=\"ms-1 fas fa-spinner fa-pulse\"></i>\n      </span>\n      <span *ngIf=\"(chatService.stoppingGeneration$ | async)\" class=\"processing ms-2\">\n        Stopping <i class=\"ms-1 fas fa-spinner fa-pulse\"></i>\n      </span>\n      <button\n        *ngIf=\"(chatService.streaming$ | async) && !(chatService.stoppingGeneration$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        sqTooltip=\"Stop generating\"\n        (click)=\"stopGeneration()\">\n        <i class=\"fas fa-stop\"></i>\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #reportTplDefault let-message let-rank=\"rank\" let-type=\"type\">\n  <div class=\"px-3\">\n    <ng-container *ngIf=\"type === 'dislike'\">\n      <h5>Issue type</h5>\n      <select class=\"form-select mb-4\" [(ngModel)]=\"issueType\">\n        <option [value]=\"''\">Choose an issue type</option>\n        <option *ngFor=\"let type of (issueTypes ?? defaultIssueTypes)\">{{type}}</option>\n      </select>\n      <h5>What was unsatisfying about this response? (optional)</h5>\n    </ng-container>\n    <ng-container *ngIf=\"type === 'like'\">\n      <h5>Why did you like this answer? (optional)</h5>\n    </ng-container>\n    <textarea class=\"form-control\" [(ngModel)]=\"reportComment\" placeholder=\"Write your comment\"></textarea>\n    <div class=\"d-flex flex-row-reverse mt-2\">\n      <button class=\"btn btn-primary\" [disabled]=\"type === 'dislike' && !issueType\" (click)=\"sendReport()\">Send</button>\n      <button class=\"btn btn-light\" (click)=\"ignoreReport()\">Cancel</button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultTokenConsumptionTpl let-instanceId>\n  <sq-token-progress-bar\n    [instanceId]=\"instanceId\">\n  </sq-token-progress-bar>\n</ng-template>\n\n<div class=\"debug-messages\" [class.displayed]=\"showDebugMessages\">\n  <button *ngIf=\"showDebugMessages\" class=\"btn btn-light shadow back-btn\" (click)=\"showDebugMessages=false\">\n    <i class=\"fas fa-chevron-right\"></i>\n  </button>\n  <ng-container *ngTemplateOutlet=\"debugMessagesTpl || defaultDebugMessagesTpl; context: { $implicit: debugMessages }\">\n  </ng-container>\n</div>\n\n<ng-template #defaultDebugMessagesTpl let-debugMessages>\n  <sq-debug-message [data]=\"debugMessages\"></sq-debug-message>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2));color:var(--ast-action-buttons-color, inherit)}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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;--ast-action-buttons-color: white;--ast-action-buttons-hover-color: #6dbee6}: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>.issue-report>div,: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%;text-align:center}.sq-floating-scroll--when-user-input{bottom:75px}.sq-floating-scroll--without-user-input{bottom:15px}.sq-floating-scroll .btn{background-color:#fff}.sq-floating-scroll .btn:hover{background-color:#fff;opacity:.9}.ast-input-container{display:flex;align-items:center;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))}.ast-input-container .processing{display:flex;align-items:center;color:var(--ast-secondary-color, #FF732E)}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}.debug-messages{position:fixed;z-index:999999;right:-60%;top:0;width:60%;height:100%;transition:all .5s ease;background-color:var(--bs-body-bg);overflow:auto}.debug-messages .back-btn{position:fixed;right:0%;transition:all .5s ease}.debug-messages.displayed{right:0}.debug-messages.displayed .back-btn{right:60%}.debug-messages sq-debug-message:first-of-type{display:block;width:100%}.sq-retry{display:flex;margin:auto;font-weight:var(--font-weight-bold, 500)}.sq-retry .attempts{display:flex;border-radius:100%;background:white;height:20px;width:20px;place-content:center;align-items:center}\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: "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.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.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"] }, { kind: "component", type: ChatMessageComponent, selector: "sq-chat-message", inputs: ["message", "conversation", "suggestedActions", "chatStarters", "assistantMessageIcon", "userMessageIcon", "connectionErrorMessageIcon", "searchWarningMessageIcon", "streaming", "canEdit", "canRegenerate", "canCopy", "canDebug", "canLike", "canDislike"], outputs: ["openDocument", "openPreview", "suggestAction", "chatStarterClicked", "edit", "copy", "regenerate", "like", "dislike", "debug"] }, { kind: "component", type: TokenProgressBarComponent, selector: "sq-token-progress-bar", inputs: ["instanceId"] }, { kind: "component", type: DebugMessageComponent, selector: "sq-debug-message", inputs: ["data", "level", "parentColor"] }, { kind: "ngmodule", type: UtilsModule }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[sqTooltip]", inputs: ["sqTooltip", "sqTooltipData", "sqTooltipTemplate", "placement", "fallbackPlacements", "delay", "hoverableTooltip", "tooltipClass"] }], 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, TokenProgressBarComponent, DebugMessageComponent], template: "<ng-container *ngIf=\"!initializationError\">\n  <div *ngIf=\"messages$ | async as messages; else loadingTpl || loadingTplDefault\" class=\"h-100 d-flex flex-column\">\n    <!-- Token consumption -->\n    <div class=\"ms-1\" *ngIf=\"config?.globalSettings?.displayUserQuotaConsumption || config?.globalSettings?.displayChatTokensConsumption\">\n      <ng-container *ngTemplateOutlet=\"tokenConsumptionTpl || defaultTokenConsumptionTpl; context: { $implicit: instanceId }\"></ng-container>\n    </div>\n\n    <!-- Chat Messages -->\n    <ul class=\"list-group list-group-flush overflow-auto flex-grow-1 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\" [style.--bs-list-group-item-padding-y.rem]=\"'0.6'\" *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            [class.last-message]=\"last\"\n            [message]=\"message\"\n            [conversation]=\"messages\"\n            [suggestedActions]=\"last ? message.additionalProperties.$suggestedAction : undefined\"\n            [assistantMessageIcon]=\"assistantMessageIcon\"\n            [userMessageIcon]=\"userMessageIcon\"\n            [connectionErrorMessageIcon]=\"connectionErrorMessageIcon\"\n            [searchWarningMessageIcon]=\"searchWarningMessageIcon\"\n            [streaming]=\"last && (chatService.streaming$ | async)\"\n            [canEdit]=\"(loading$ | async) === false && ((chatService.streaming$ | async) === false || !last) && messageToEdit === undefined && message.role === 'user'\"\n            [canRegenerate]=\"(loading$ | async) === false && (chatService.streaming$ | async) === false && messageToEdit === undefined && message.role === 'assistant' && last\"\n            [canCopy]=\"((chatService.streaming$ | async) === false || !last) && messageToEdit === undefined && message.role !== 'connection-error' && message.role !== 'search-warning'\"\n            [canDebug]=\"((chatService.streaming$ | async) === false || !last) && message.role === 'assistant' && isAdmin && message.additionalProperties.$debug\"\n            [canLike]=\"((chatService.streaming$ | async) === false || !last) && message.role === 'assistant'\"\n            [canDislike]=\"((chatService.streaming$ | async) === false || !last) && message.role === 'assistant'\"\n            (edit)=\"editMessage(index)\"\n            (copy)=\"copyMessage(index)\"\n            (regenerate)=\"regenerateMessage(index)\"\n            (openDocument)=\"openOriginalAttachment($event)\"\n            (openPreview)=\"openAttachmentPreview($event)\"\n            (suggestAction)=\"suggestActionClick($event, index)\"\n            (like)=\"onLike(index)\"\n            (dislike)=\"onDislike($event, index)\"\n            (debug)=\"showDebug($event)\">\n          </sq-chat-message>\n        </li>\n      </ng-container>\n      <!-- Loading spinner -->\n      <li class=\"list-group-item\" *ngIf=\"(loading$ | async) === true\">\n        <ng-container *ngTemplateOutlet=\"loadingTpl || loadingTplDefault\"></ng-container>\n      </li>\n    </ul>\n\n    <!-- Reporting an issue form -->\n    <div class=\"issue-report bg-light pt-3 pb-2\" *ngIf=\"showReportIssue\">\n      <ng-container *ngTemplateOutlet=\"reportIssueTpl || reportIssueTplDefault; context: { $implicit: messageRelatedIssue, rank: issueRank }\"></ng-container>\n    </div>\n\n    <!-- User text input -->\n    <div class=\"user-input mt-auto\" *ngIf=\"!showReportIssue\">\n      <div class=\"py-2\">\n        <div [hidden]=\"!isConnected\">\n          <ng-container *ngIf=\"enabledUserInput\" [ngTemplateOutlet]=\"inputTpl\"></ng-container>\n        </div>\n        <!-- Retry button -->\n        <button [hidden]=\"isConnected\" class=\"btn mb-4 ast-error ast-btn sq-retry\" (click)=\"retryFetch()\">\n          <span>Try again</span>\n          <span *ngIf=\"retrialAttempts\" class=\"ms-2 attempts\">{{ retrialAttempts }}</span>\n        </button>\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\n    <!-- Floating scroll button -->\n    <div *ngIf=\"!isAtBottom && !showReportIssue\" class=\"sq-floating-scroll\" [ngClass]=\"enabledUserInput ? 'sq-floating-scroll--when-user-input' : 'sq-floating-scroll--without-user-input'\">\n      <button class=\"btn shadow\" (click)=\"scrollDown()\">\n        <i class=\"fas fa-angle-double-down\"></i>\n      </button>\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($event)\"\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>\n  </div>\n</ng-template>\n\n<ng-template #reportIssueTplDefault let-message let-rank=\"rank\">\n  <div class=\"px-3\">\n    <h5>Issue type</h5>\n    <select class=\"form-select mb-4\" [(ngModel)]=\"issueType\">\n      <option [value]=\"''\">Choose an issue type</option>\n      <option *ngFor=\"let type of (issueTypes ?? defaultIssueTypes)\">{{type}}</option>\n    </select>\n    <h5>Comment (optional)</h5>\n    <textarea class=\"form-control\" [(ngModel)]=\"issueComment\" placeholder=\"What was unsatisfying about this response?\"></textarea>\n    <div class=\"d-flex flex-row-reverse mt-2\">\n      <button class=\"btn btn-primary\" [disabled]=\"!issueType\" (click)=\"sendIssue()\">Send</button>\n      <button class=\"btn btn-light\" (click)=\"ignoreIssue()\">Cancel</button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultTokenConsumptionTpl let-instanceId>\n  <sq-token-progress-bar\n    [instanceId]=\"instanceId\">\n  </sq-token-progress-bar>\n</ng-template>\n\n<div class=\"debug-messages\" [class.displayed]=\"showDebugMessages\">\n  <button *ngIf=\"showDebugMessages\" class=\"btn btn-light shadow back-btn\" (click)=\"showDebugMessages=false\">\n    <i class=\"fas fa-chevron-right\"></i>\n  </button>\n  <ng-container *ngTemplateOutlet=\"debugMessagesTpl || defaultDebugMessagesTpl; context: { $implicit: debugMessages }\">\n  </ng-container>\n</div>\n\n<ng-template #defaultDebugMessagesTpl let-debugMessages>\n  <sq-debug-message [data]=\"debugMessages\"></sq-debug-message>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2))}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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>.issue-report>div,: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%;text-align:center}.sq-floating-scroll--when-user-input{bottom:75px}.sq-floating-scroll--without-user-input{bottom:15px}.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}.debug-messages{position:fixed;z-index:999999;right:-60%;top:0;width:60%;height:100%;transition:all .5s ease;background-color:var(--bs-body-bg);overflow:auto}.debug-messages .back-btn{position:fixed;right:0%;transition:all .5s ease}.debug-messages.displayed{right:0}.debug-messages.displayed .back-btn{right:60%}.debug-messages sq-debug-message:first-of-type{display:block;width:100%}.sq-retry{display:flex;margin:auto;font-weight:var(--font-weight-bold, 500)}.sq-retry .attempts{display:flex;border-radius:100%;background:white;height:20px;width:20px;place-content:center;align-items:center}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormsModule, ChatMessageComponent, TokenProgressBarComponent, DebugMessageComponent, UtilsModule], template: "<ng-container *ngIf=\"!initializationError\">\n  <div *ngIf=\"messages$ | async as messages; else loadingTpl || loadingTplDefault\" class=\"h-100 d-flex flex-column\">\n    <!-- Token consumption -->\n    <div class=\"ms-1\" *ngIf=\"config?.globalSettings?.displayUserQuotaConsumption || config?.globalSettings?.displayChatTokensConsumption\">\n      <ng-container *ngTemplateOutlet=\"tokenConsumptionTpl || defaultTokenConsumptionTpl; context: { $implicit: instanceId }\"></ng-container>\n    </div>\n\n    <!-- Chat Messages -->\n    <ul class=\"list-group list-group-flush overflow-auto flex-grow-1 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\"\n          *ngIf=\"message.additionalProperties.display\"\n          [style.--bs-list-group-item-padding-y.rem]=\"'0.6'\"\n          [class.opacity-50]=\"messageToEdit && messageToEdit < index + 1\">\n          <sq-chat-message\n            [class.sq-user-message]=\"message.role === 'user'\"\n            [class.last-message]=\"last\"\n            [message]=\"message\"\n            [conversation]=\"messages\"\n            [suggestedActions]=\"last ? message.additionalProperties.$suggestedAction : undefined\"\n            [chatStarters]=\"visibleMessagesCount === 1 ? config.modeSettings.initialization.chatStarters : undefined\"\n            [assistantMessageIcon]=\"assistantMessageIcon\"\n            [userMessageIcon]=\"userMessageIcon\"\n            [connectionErrorMessageIcon]=\"connectionErrorMessageIcon\"\n            [searchWarningMessageIcon]=\"searchWarningMessageIcon\"\n            [streaming]=\"(chatService.streaming$ | async) && (last || isAssistantLastMessages(messages, index))\"\n            [canEdit]=\"(loading$ | async) === false && ((chatService.streaming$ | async) === false || !last) && messageToEdit === undefined && message.role === 'user'\"\n            [canCopy]=\"((chatService.streaming$ | async) === false || !last) && messageToEdit === undefined && message.role !== 'connection-error' && message.role !== 'search-warning'\"\n            [canLike]=\"((chatService.streaming$ | async) === false || !last) && message.role === 'assistant'\"\n            [canDislike]=\"((chatService.streaming$ | async) === false || !last) && message.role === 'assistant'\"\n            [canDebug]=\"(((chatService.streaming$ | async) === false && last) || (!last && messages[index+1].role !== 'assistant')) && message.role === 'assistant' && isAdmin && (getDebugMessages(index).length > 0) && config?.defaultValues.debug\"\n            [canRegenerate]=\"(loading$ | async) === false && (((chatService.streaming$ | async) === false  && last) || (!last && messages[index+1].role !== 'assistant'))  && message.role === 'assistant' && messageToEdit === undefined\"\n            (edit)=\"editMessage(index)\"\n            (copy)=\"copyMessage(index)\"\n            (regenerate)=\"regenerateMessage(index)\"\n            (openDocument)=\"openOriginalAttachment($event)\"\n            (openPreview)=\"openAttachmentPreview($event)\"\n            (suggestAction)=\"suggestActionClick($event, index)\"\n            (chatStarterClicked)=\"chatStarterClick($event)\"\n            (like)=\"onLike($event, index)\"\n            (dislike)=\"onDislike($event, index)\"\n            (debug)=\"showDebug(index)\">\n          </sq-chat-message>\n        </li>\n      </ng-container>\n      <!-- Loading spinner -->\n      <li class=\"list-group-item\" *ngIf=\"(loading$ | async) === true\">\n        <ng-container *ngTemplateOutlet=\"loadingTpl || loadingTplDefault\"></ng-container>\n      </li>\n    </ul>\n\n    <!-- Reporting a feedback form -->\n    <div class=\"issue-report bg-light pt-3 pb-2\" *ngIf=\"showReport\">\n      <ng-container *ngTemplateOutlet=\"reportTpl || reportTplDefault; context: { $implicit: messageToReport, rank: reportRank, type: reportType }\"></ng-container>\n    </div>\n\n    <!-- User text input -->\n    <div class=\"user-input mt-auto\" *ngIf=\"!showReport\">\n      <div class=\"py-2\">\n        <div [hidden]=\"!isConnected\">\n          <ng-container *ngIf=\"enabledUserInput\" [ngTemplateOutlet]=\"inputTpl\"></ng-container>\n        </div>\n        <!-- Retry button -->\n        <button [hidden]=\"isConnected\" class=\"btn mb-4 ast-error ast-btn sq-retry\" (click)=\"retryFetch()\">\n          <span>Try again</span>\n          <span *ngIf=\"retrialAttempts\" class=\"ms-2 attempts\">{{ retrialAttempts }}</span>\n        </button>\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\n    <!-- Floating scroll button -->\n    <div *ngIf=\"!isAtBottom && !showReport\" class=\"sq-floating-scroll\" [ngClass]=\"enabledUserInput ? 'sq-floating-scroll--when-user-input' : 'sq-floating-scroll--without-user-input'\">\n      <button class=\"btn shadow\" (click)=\"scrollDown()\">\n        <i class=\"fas fa-angle-double-down\"></i>\n      </button>\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($event)\"\n        [disabled]=\"(loading$ | async) || (chatService.streaming$ | async) || (chatService.stoppingGeneration$ | async)\">\n      </textarea>\n      <button\n        *ngIf=\"!(chatService.streaming$ | async) && !(loading$ | async) && !(chatService.stoppingGeneration$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        sqTooltip=\"Send message\"\n        (click)=\"submitQuestion()\">\n        <i class=\"fas fa-paper-plane\"></i>\n      </button>\n      <button\n        *ngIf=\"messageToEdit\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        sqTooltip=\"Cancel edition\"\n        (click)=\"messageToEdit = undefined; question = ''\">\n        <i class=\"fas fa-undo-alt\"></i>\n      </button>\n      <span *ngIf=\"(chatService.streaming$ | async) && !(chatService.stoppingGeneration$ | async)\" class=\"processing ms-2\">\n        Generating <i class=\"ms-1 fas fa-spinner fa-pulse\"></i>\n      </span>\n      <span *ngIf=\"(chatService.stoppingGeneration$ | async)\" class=\"processing ms-2\">\n        Stopping <i class=\"ms-1 fas fa-spinner fa-pulse\"></i>\n      </span>\n      <button\n        *ngIf=\"(chatService.streaming$ | async) && !(chatService.stoppingGeneration$ | async)\"\n        type=\"button\"\n        class=\"btn btn-light ms-2\"\n        sqTooltip=\"Stop generating\"\n        (click)=\"stopGeneration()\">\n        <i class=\"fas fa-stop\"></i>\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #reportTplDefault let-message let-rank=\"rank\" let-type=\"type\">\n  <div class=\"px-3\">\n    <ng-container *ngIf=\"type === 'dislike'\">\n      <h5>Issue type</h5>\n      <select class=\"form-select mb-4\" [(ngModel)]=\"issueType\">\n        <option [value]=\"''\">Choose an issue type</option>\n        <option *ngFor=\"let type of (issueTypes ?? defaultIssueTypes)\">{{type}}</option>\n      </select>\n      <h5>What was unsatisfying about this response? (optional)</h5>\n    </ng-container>\n    <ng-container *ngIf=\"type === 'like'\">\n      <h5>Why did you like this answer? (optional)</h5>\n    </ng-container>\n    <textarea class=\"form-control\" [(ngModel)]=\"reportComment\" placeholder=\"Write your comment\"></textarea>\n    <div class=\"d-flex flex-row-reverse mt-2\">\n      <button class=\"btn btn-primary\" [disabled]=\"type === 'dislike' && !issueType\" (click)=\"sendReport()\">Send</button>\n      <button class=\"btn btn-light\" (click)=\"ignoreReport()\">Cancel</button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultTokenConsumptionTpl let-instanceId>\n  <sq-token-progress-bar\n    [instanceId]=\"instanceId\">\n  </sq-token-progress-bar>\n</ng-template>\n\n<div class=\"debug-messages\" [class.displayed]=\"showDebugMessages\">\n  <button *ngIf=\"showDebugMessages\" class=\"btn btn-light shadow back-btn\" (click)=\"showDebugMessages=false\">\n    <i class=\"fas fa-chevron-right\"></i>\n  </button>\n  <ng-container *ngTemplateOutlet=\"debugMessagesTpl || defaultDebugMessagesTpl; context: { $implicit: debugMessages }\">\n  </ng-container>\n</div>\n\n<ng-template #defaultDebugMessagesTpl let-debugMessages>\n  <sq-debug-message [data]=\"debugMessages\"></sq-debug-message>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2));color:var(--ast-action-buttons-color, inherit)}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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;--ast-action-buttons-color: white;--ast-action-buttons-hover-color: #6dbee6}: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>.issue-report>div,: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%;text-align:center}.sq-floating-scroll--when-user-input{bottom:75px}.sq-floating-scroll--without-user-input{bottom:15px}.sq-floating-scroll .btn{background-color:#fff}.sq-floating-scroll .btn:hover{background-color:#fff;opacity:.9}.ast-input-container{display:flex;align-items:center;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))}.ast-input-container .processing{display:flex;align-items:center;color:var(--ast-secondary-color, #FF732E)}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}.debug-messages{position:fixed;z-index:999999;right:-60%;top:0;width:60%;height:100%;transition:all .5s ease;background-color:var(--bs-body-bg);overflow:auto}.debug-messages .back-btn{position:fixed;right:0%;transition:all .5s ease}.debug-messages.displayed{right:0}.debug-messages.displayed .back-btn{right:60%}.debug-messages sq-debug-message:first-of-type{display:block;width:100%}.sq-retry{display:flex;margin:auto;font-weight:var(--font-weight-bold, 500)}.sq-retry .attempts{display:flex;border-radius:100%;background:white;height:20px;width:20px;place-content:center;align-items:center}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { instanceId: [{
                 type: Input
             }], query: [{
@@ -2529,6 +2881,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Input
             }], automaticScrollToLastResponse: [{
                 type: Input
+            }], focusAfterResponse: [{
+                type: Input
             }], chat: [{
                 type: Input
             }], assistantMessageIcon: [{
@@ -2555,6 +2909,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Output
             }], suggestAction: [{
                 type: Output
+            }], chatStarter: [{
+                type: Output
             }], messageList: [{
                 type: ViewChild,
                 args: ['messageList']
@@ -2564,9 +2920,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             }], loadingTpl: [{
                 type: ContentChild,
                 args: ['loadingTpl']
-            }], reportIssueTpl: [{
+            }], reportTpl: [{
                 type: ContentChild,
-                args: ['reportIssueTpl']
+                args: ['reportTpl']
             }], tokenConsumptionTpl: [{
                 type: ContentChild,
                 args: ['tokenConsumptionTpl']
@@ -2604,6 +2960,9 @@ class SavedChatsComponent {
         }));
     }
     onLoad(savedChat) {
+        if (!!this.chatService.streaming$.value || !!this.chatService.stoppingGeneration$.value) {
+            return;
+        }
         this.chatService.setSavedChatId(savedChat.id);
         this.chatService.generateChatId(savedChat.id);
         this.chatService.loadSavedChat$.next(savedChat);
@@ -2611,7 +2970,11 @@ class SavedChatsComponent {
         this.chatService.listSavedChat();
         this.load.emit(savedChat);
     }
-    onRename(savedChat) {
+    onRename(event, savedChat) {
+        event.stopPropagation();
+        if (!!this.chatService.streaming$.value || !!this.chatService.stoppingGeneration$.value) {
+            return;
+        }
         const model = {
             title: 'Rename saved discussion',
             message: `Please enter a new name for the discussion "${savedChat.title}".`,
@@ -2637,7 +3000,11 @@ class SavedChatsComponent {
             }
         });
     }
-    onDelete(savedChat) {
+    onDelete(event, savedChat) {
+        event.stopPropagation();
+        if (!!this.chatService.streaming$.value || !!this.chatService.stoppingGeneration$.value) {
+            return;
+        }
         this.modalService
             .confirm({
             title: "Delete saved discussion",
@@ -2714,10 +3081,10 @@ class SavedChatsComponent {
     }
 }
 SavedChatsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SavedChatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SavedChatsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: SavedChatsComponent, isStandalone: true, selector: "sq-saved-chats-v3", inputs: { instanceId: "instanceId" }, outputs: { load: "load", delete: "delete" }, ngImport: i0, template: "<ng-container *ngIf=\"(chatService.chatConfig$ | async)?.savedChatSettings.display\">\n  <div *ngFor=\"let group of (groupedSavedChats$ | async)\" class=\"saved-chats\">\n    <div class=\"saved-chat-date\">{{group.key}}</div>\n    <div *ngFor=\"let savedChat of group.value\" class=\"saved-chat p-2\" [class.active]=\"chatService.savedChatId === savedChat.id\"\n      (click)=\"onLoad(savedChat)\">\n      <span class=\"title me-1\">{{savedChat.title}}</span>\n      <i class=\"saved-chat-actions fas fa-pen mx-1\" [sqTooltip]=\"'Rename'\"\n        (click)=\"$event.stopPropagation(); onRename(savedChat)\"></i>\n      <i class=\"saved-chat-actions fas fa-trash ms-1\" [sqTooltip]=\"'Delete'\"\n        (click)=\"$event.stopPropagation(); onDelete(savedChat)\"></i>\n    </div>\n  </div>\n</ng-container>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2))}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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}.saved-chats .saved-chat-date{font-weight:500;color:#a9a9a9;margin-top:.5rem}.saved-chats .saved-chat{display:flex;align-items:center;cursor:pointer;margin-left:.25rem}.saved-chats .saved-chat span{flex-grow:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.saved-chats .saved-chat .saved-chat-actions{display:none}.saved-chats .saved-chat:hover,.saved-chats .saved-chat.active{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-saved-chat-hover-background, #FFF8F1)}.saved-chats .saved-chat:hover .saved-chat-actions{display:block}.saved-chats .title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ModalModule }, { kind: "ngmodule", type: UtilsModule }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[sqTooltip]", inputs: ["sqTooltip", "sqTooltipData", "sqTooltipTemplate", "placement", "fallbackPlacements", "delay", "hoverableTooltip", "tooltipClass"] }] });
+SavedChatsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: SavedChatsComponent, isStandalone: true, selector: "sq-saved-chats-v3", inputs: { instanceId: "instanceId" }, outputs: { load: "load", delete: "delete" }, ngImport: i0, template: "<ng-container *ngIf=\"(chatService.chatConfig$ | async)?.savedChatSettings.display\">\n  <div *ngFor=\"let group of (groupedSavedChats$ | async)\" class=\"saved-chats\">\n    <div class=\"saved-chat-date\">{{group.key}}</div>\n    <div *ngFor=\"let savedChat of group.value\"\n      (click)=\"onLoad(savedChat)\"\n      class=\"saved-chat p-2\"\n      [class.forbidden]=\"(chatService.streaming$ | async) || (chatService.stoppingGeneration$ | async)\"\n      [class.active]=\"chatService.savedChatId === savedChat.id\">\n      <span class=\"title me-1\">{{savedChat.title}}</span>\n      <i class=\"saved-chat-actions fas fa-pen mx-1\" [sqTooltip]=\"'Rename'\"\n        (click)=\"onRename($event, savedChat)\"></i>\n      <i class=\"saved-chat-actions fas fa-trash ms-1\" [sqTooltip]=\"'Delete'\"\n        (click)=\"onDelete($event, savedChat)\"></i>\n    </div>\n  </div>\n</ng-container>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2));color:var(--ast-action-buttons-color, inherit)}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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;--ast-action-buttons-color: white;--ast-action-buttons-hover-color: #6dbee6}.saved-chats .saved-chat-date{font-weight:500;color:#a9a9a9;margin-top:.5rem}.saved-chats .saved-chat{display:flex;align-items:center;cursor:pointer;margin-left:.25rem}.saved-chats .saved-chat span{flex-grow:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.saved-chats .saved-chat .saved-chat-actions{display:none}.saved-chats .saved-chat:hover,.saved-chats .saved-chat.active{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-saved-chat-hover-background, #FFF8F1)}.saved-chats .saved-chat:hover .saved-chat-actions{display:block}.saved-chats .saved-chat.forbidden{cursor:not-allowed}.saved-chats .title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ModalModule }, { 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: SavedChatsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sq-saved-chats-v3', standalone: true, imports: [CommonModule, ModalModule, UtilsModule], template: "<ng-container *ngIf=\"(chatService.chatConfig$ | async)?.savedChatSettings.display\">\n  <div *ngFor=\"let group of (groupedSavedChats$ | async)\" class=\"saved-chats\">\n    <div class=\"saved-chat-date\">{{group.key}}</div>\n    <div *ngFor=\"let savedChat of group.value\" class=\"saved-chat p-2\" [class.active]=\"chatService.savedChatId === savedChat.id\"\n      (click)=\"onLoad(savedChat)\">\n      <span class=\"title me-1\">{{savedChat.title}}</span>\n      <i class=\"saved-chat-actions fas fa-pen mx-1\" [sqTooltip]=\"'Rename'\"\n        (click)=\"$event.stopPropagation(); onRename(savedChat)\"></i>\n      <i class=\"saved-chat-actions fas fa-trash ms-1\" [sqTooltip]=\"'Delete'\"\n        (click)=\"$event.stopPropagation(); onDelete(savedChat)\"></i>\n    </div>\n  </div>\n</ng-container>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2))}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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}.saved-chats .saved-chat-date{font-weight:500;color:#a9a9a9;margin-top:.5rem}.saved-chats .saved-chat{display:flex;align-items:center;cursor:pointer;margin-left:.25rem}.saved-chats .saved-chat span{flex-grow:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.saved-chats .saved-chat .saved-chat-actions{display:none}.saved-chats .saved-chat:hover,.saved-chats .saved-chat.active{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-saved-chat-hover-background, #FFF8F1)}.saved-chats .saved-chat:hover .saved-chat-actions{display:block}.saved-chats .title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'sq-saved-chats-v3', standalone: true, imports: [CommonModule, ModalModule, UtilsModule], template: "<ng-container *ngIf=\"(chatService.chatConfig$ | async)?.savedChatSettings.display\">\n  <div *ngFor=\"let group of (groupedSavedChats$ | async)\" class=\"saved-chats\">\n    <div class=\"saved-chat-date\">{{group.key}}</div>\n    <div *ngFor=\"let savedChat of group.value\"\n      (click)=\"onLoad(savedChat)\"\n      class=\"saved-chat p-2\"\n      [class.forbidden]=\"(chatService.streaming$ | async) || (chatService.stoppingGeneration$ | async)\"\n      [class.active]=\"chatService.savedChatId === savedChat.id\">\n      <span class=\"title me-1\">{{savedChat.title}}</span>\n      <i class=\"saved-chat-actions fas fa-pen mx-1\" [sqTooltip]=\"'Rename'\"\n        (click)=\"onRename($event, savedChat)\"></i>\n      <i class=\"saved-chat-actions fas fa-trash ms-1\" [sqTooltip]=\"'Delete'\"\n        (click)=\"onDelete($event, savedChat)\"></i>\n    </div>\n  </div>\n</ng-container>\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-error{background-color:var(--ast-error-bg, rgba(249, 58, 55, .2));color:var(--ast-action-buttons-color, inherit)}.ast-error:hover{color:var(--ast-error-color, rgba(249, 58, 55, .7))}.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;--ast-action-buttons-color: white;--ast-action-buttons-hover-color: #6dbee6}.saved-chats .saved-chat-date{font-weight:500;color:#a9a9a9;margin-top:.5rem}.saved-chats .saved-chat{display:flex;align-items:center;cursor:pointer;margin-left:.25rem}.saved-chats .saved-chat span{flex-grow:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.saved-chats .saved-chat .saved-chat-actions{display:none}.saved-chats .saved-chat:hover,.saved-chats .saved-chat.active{color:var(--ast-secondary-color, #FF732E);background-color:var(--ast-saved-chat-hover-background, #FFF8F1)}.saved-chats .saved-chat:hover .saved-chat-actions{display:block}.saved-chats .saved-chat.forbidden{cursor:not-allowed}.saved-chats .title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { instanceId: [{
                 type: Input
             }], load: [{