@aslaluroba/help-center 2.0.5 → 3.0.1

package/fesm2022/aslaluroba-help-center.mjs

@@ -4,6 +4,7 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import * as Ably from 'ably';
 import { BehaviorSubject } from 'rxjs';
 import * as i3 from 'ngx-markdown';
 import { MarkdownModule } from 'ngx-markdown';
@@ -12,7 +13,148 @@ import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-json';
-import * as signalR from '@microsoft/signalr';
+
+class ClientAblyService {
+    static client = null;
+    static channel = null;
+    static isConnected = false;
+    static sessionId = null;
+    static messageUnsubscribe = null;
+    static async startConnection(sessionId, ablyToken, onMessageReceived, tenantId) {
+        // Prevent multiple connections
+        if (this.isConnected && this.sessionId === sessionId) {
+            return;
+        }
+        // Close existing connection if connecting to a different session
+        if (this.isConnected && this.sessionId !== sessionId) {
+            await this.stopConnection();
+        }
+        try {
+            // Initialize Ably client with the token
+            this.client = new Ably.Realtime({
+                authUrl: undefined,
+                token: ablyToken,
+                autoConnect: true,
+            });
+            // Wait for connection to be established
+            await new Promise((resolve, reject) => {
+                if (!this.client) {
+                    reject(new Error('Failed to initialize Ably client'));
+                    return;
+                }
+                this.client.connection.once('connected', () => {
+                    this.isConnected = true;
+                    this.sessionId = sessionId;
+                    resolve();
+                });
+                this.client.connection.once('failed', (stateChange) => {
+                    console.error('Ably connection failed:', stateChange);
+                    reject(new Error(`Ably connection failed: ${stateChange.reason?.message || 'Unknown error'}`));
+                });
+                this.client.connection.once('disconnected', (stateChange) => {
+                    console.error('Ably connection disconnected:', stateChange);
+                    reject(new Error(`Ably connection disconnected: ${stateChange.reason?.message || 'Unknown error'}`));
+                });
+                // Set a timeout for connection
+                setTimeout(() => {
+                    if (!this.isConnected) {
+                        reject(new Error('Ably connection timeout'));
+                    }
+                }, 10000);
+            });
+            // Subscribe to the session room
+            await this.joinChannel(sessionId, onMessageReceived, tenantId);
+        }
+        catch (error) {
+            console.error('Error during Ably connection setup:', error);
+            this.isConnected = false;
+            this.sessionId = null;
+            throw error;
+        }
+    }
+    static async joinChannel(sessionId, onMessageReceived, tenantId) {
+        if (!this.client) {
+            throw new Error('Chat client not initialized');
+        }
+        const roomName = `session:${tenantId}:${sessionId}`;
+        // Set up raw channel subscription for server messages
+        if (this.client) {
+            this.channel = this.client.channels.get(roomName);
+            // Subscribe to assistant/system responses
+            this.channel.subscribe('ReceiveMessage', (message) => {
+                try {
+                    const messageContent = typeof message.data === 'string'
+                        ? message.data
+                        : message.data?.content || message.data?.message;
+                    const senderType = message.data?.senderType || 3; // Assistant
+                    const needsAgent = message.data?.needsAgent || false;
+                    onMessageReceived(messageContent, senderType, needsAgent);
+                }
+                catch (error) {
+                    console.error('Error processing ReceiveMessage:', error);
+                }
+            });
+            await this.channel.attach();
+        }
+    }
+    static async stopConnection() {
+        try {
+            // Unsubscribe from room messages
+            if (this.messageUnsubscribe) {
+                this.messageUnsubscribe();
+                this.messageUnsubscribe = null;
+            }
+            // Unsubscribe and detach from raw channel
+            if (this.channel) {
+                this.channel.unsubscribe();
+                await this.channel.detach();
+                this.channel = null;
+            }
+            // Close Ably connection
+            if (this.client) {
+                this.client.close();
+                this.client = null;
+            }
+            this.isConnected = false;
+            this.sessionId = null;
+        }
+        catch (error) {
+            console.error('Error stopping Ably connection:', error);
+            // Reset state even if there's an error
+            this.isConnected = false;
+            this.sessionId = null;
+            this.client = null;
+            this.channel = null;
+            this.messageUnsubscribe = null;
+        }
+    }
+    static isConnectionActive() {
+        return this.isConnected && this.client?.connection.state === 'connected';
+    }
+    static getConnectionState() {
+        return this.client?.connection.state || 'disconnected';
+    }
+    // Method to manually send a message (if needed for debugging or direct messaging)
+    static async sendMessage(messageContent, senderType = 1) {
+        if (!this.channel || !this.isConnected) {
+            throw new Error('Connection not active');
+        }
+        try {
+            const messageData = {
+                text: messageContent,
+                metadata: {
+                    senderType,
+                    sentAt: new Date().toISOString(),
+                },
+            };
+            await this.channel.publish('message', messageData);
+        }
+        catch (error) {
+            console.error('Error sending message:', error);
+            throw error;
+        }
+    }
+}
 
 class CardComponent {
     variant = 'default';
@@ -791,7 +933,7 @@ class ChatComponent {
     messages = [];
     needsAgent = false;
     assistantStatus = '';
-    isSignalRConnected = false;
+    isAblyConnected = false;
     isChatClosed = false;
     currentLang = 'en';
     loading = false;
@@ -807,7 +949,9 @@ class ChatComponent {
         this.firstAgentMessageIndex = this.messages.findIndex((message) => message.senderType === 2);
     }
     handleSendMessage() {
-        if (!this.messageContent.trim() || this.loading || this.assistantStatus === 'typing')
+        if (!this.messageContent.trim() ||
+            this.loading ||
+            this.assistantStatus === 'typing')
             return;
         this.sendMessageEvent.emit(this.messageContent);
         this.messageContent = '';
@@ -828,7 +972,8 @@ class ChatComponent {
     }
     scrollToBottom() {
         try {
-            this.chatMessagesContainer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollHeight;
+            this.chatMessagesContainer.nativeElement.scrollTop =
+                this.chatMessagesContainer.nativeElement.scrollHeight;
         }
         catch (err) {
             console.error('Error scrolling to bottom:', err);
@@ -838,18 +983,26 @@ class ChatComponent {
         return messages.some((message) => message.senderType === 2 || message.senderType === 3);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: ChatComponent, isStandalone: true, selector: "app-chat", inputs: { messages: "messages", needsAgent: "needsAgent", assistantStatus: "assistantStatus", isSignalRConnected: "isSignalRConnected", isChatClosed: "isChatClosed", currentLang: "currentLang", loading: "loading" }, outputs: { sendMessageEvent: "sendMessageEvent" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<div class=\"chat\">\n  <div class=\"chat__messages\" #chatMessagesContainer>\n    <div *ngFor=\"let message of messages; let i = index\" class=\"chat__message-group\">\n      <div class=\"chat__separator\" *ngIf=\"i === firstAgentMessageIndex && message.senderType === 2\">\n        <svg width=\"100%\" height=\"14\" viewBox=\"0 0 327 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n          <path\n            d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n            fill=\"#AD49E1\"\n          />\n          <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n        </svg>\n      </div>\n\n      <div class=\"chat__message-container\" [class.chat__message-container--user]=\"message.senderType === 1\">\n        <div class=\"chat__avatar\" [class.chat__avatar--hidden]=\"i > 0 && messages[i - 1].senderType === message.senderType\">\n          @if (message.senderType === 3) {\n            <span class=\"chat__avatar-wrapper chat__avatar-wrapper--assistant\">\n              <svg class=\"chat__avatar-image\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n                  fill=\"#E5E5E5\"\n                />\n                <path\n                  d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n                  fill=\"white\"\n                />\n                <path\n                  d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n                  fill=\"#AD49E1\"\n                />\n                <path\n                  d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n                  fill=\"#AD49E1\"\n                />\n              </svg>\n            </span>\n          } @else if (needsAgent || message.senderType === 2) {\n            <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n              <svg class=\"chat__avatar-image\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M5.99479 5.66658C7.46755 5.66658 8.66146 4.47268 8.66146 2.99992C8.66146 1.52716 7.46755 0.333252 5.99479 0.333252C4.52203 0.333252 3.32812 1.52716 3.32812 2.99992C3.32812 4.47268 4.52203 5.66658 5.99479 5.66658Z\"\n                  fill=\"#AD49E1\"\n                />\n                <path\n                  d=\"M11.3307 10.6665C11.3307 12.3232 11.3307 13.6665 5.9974 13.6665C0.664062 13.6665 0.664062 12.3232 0.664062 10.6665C0.664062 9.00984 3.05206 7.6665 5.9974 7.6665C8.94273 7.6665 11.3307 9.00984 11.3307 10.6665Z\"\n                  fill=\"#AD49E1\"\n                />\n              </svg>\n            </span>\n          }\n        </div>\n        <app-card\n          variant=\"rounded\"\n          [class]=\"'chat__message ' + (message.senderType === 1 ? 'chat__message--user' : 'chat__message--assistant')\"\n        >\n          <app-card-content>\n            <div class=\"chat__message-content\">\n              <markdown\n                [data]=\"cleanMessageContent(message.messageContent)\"\n                ngPreserveWhitespaces\n                [inline]=\"false\"\n                class=\"prose\"\n                [class.prose-invert]=\"message.senderType === 1\"\n                [dir]=\"currentLang === 'ar' ? 'rtl' : 'ltr'\"\n              >\n              </markdown>\n            </div>\n          </app-card-content>\n        </app-card>\n      </div>\n    </div>\n\n    <div *ngIf=\"assistantStatus === 'typing' && firstAgentMessageIndex === -1\" class=\"chat__typing\">\n      <div class=\"chat__avatar\">\n        <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n          <svg class=\"chat__avatar-image\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n              fill=\"#E5E5E5\"\n            />\n            <path\n              d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n              fill=\"white\"\n            />\n            <path\n              d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n              fill=\"#AD49E1\"\n            />\n            <path\n              d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n              fill=\"#AD49E1\"\n            />\n          </svg>\n        </span>\n      </div>\n      <app-card variant=\"rounded\" class=\"chat__message chat__message--assistant\">\n        <app-card-content>\n          <div id=\"wave\">\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </app-card-content>\n      </app-card>\n    </div>\n    <div *ngIf=\"loading\" class=\"chat__loading\">\n      <app-loading variant=\"primary\" />\n    </div>\n  </div>\n\n  <form (ngSubmit)=\"handleSendMessage()\" class=\"chat__input-container\">\n    <div class=\"chat__input-wrapper\">\n      <input\n        type=\"text\"\n        [(ngModel)]=\"messageContent\"\n        name=\"messageContent\"\n        [placeholder]=\"'ChatPlaceholder' | translate\"\n        [disabled]=\"isChatClosed\"\n        class=\"chat__input\"\n      />\n      <button\n        type=\"submit\"\n        [disabled]=\"!messageContent.trim() || !isSignalRConnected || isChatClosed || assistantStatus === 'typing'\"\n        class=\"chat__send-button\"\n      >\n        <svg\n          class=\"chat__send-button-icon\"\n          [class.chat__send-button-icon--rtl]=\"currentLang === 'ar'\"\n          viewBox=\"0 0 19 19\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M18.2346 2.68609C18.6666 1.49109 17.5086 0.33309 16.3136 0.76609L1.70855 6.04809C0.509554 6.48209 0.364554 8.11809 1.46755 8.75709L6.12955 11.4561L10.2926 7.29309C10.4812 7.11093 10.7338 7.01014 10.996 7.01242C11.2582 7.01469 11.509 7.11986 11.6944 7.30527C11.8798 7.49068 11.9849 7.74149 11.9872 8.00369C11.9895 8.26589 11.8887 8.51849 11.7066 8.70709L7.54355 12.8701L10.2436 17.5321C10.8816 18.6351 12.5176 18.4891 12.9516 17.2911L18.2346 2.68609Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </form>\n</div>\n", styles: [".chat{display:flex;flex-direction:column;height:100%;overflow:hidden}.chat__messages{flex:1;overflow-y:auto;padding-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.chat__message-group{display:flex;flex-direction:column;gap:.5rem}.chat__separator,.chat__separator img{width:100%}.chat__message-container{display:flex;align-items:flex-start;gap:.5rem}.chat__message-container--user{flex-direction:row-reverse}.chat__avatar{margin-top:.5rem}.chat__avatar--hidden{visibility:hidden}.chat__avatar-wrapper{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:9999px;padding:.5rem}.chat__avatar-wrapper--assistant{background-color:#ad49e1}.chat__avatar-wrapper--agent{background-color:#fff}.chat__avatar-image{width:100%}.chat__message{max-width:80%;position:relative}.chat__message--user{align-self:flex-start;background-color:#ad49e1;color:#fff;direction:rtl}.chat__message--assistant,.chat__message--agent{align-self:flex-end;background-color:#fff;color:#000;direction:rtl}.chat__message-content{white-space:pre-wrap}.chat__message-content :global(.prose){max-width:none;word-break:break-words}.chat__message-content :global(.prose)>*:first-child{margin-top:0}.chat__message-content :global(.prose)>*:last-child{margin-bottom:0}.chat__message-content :global(.prose)>p,.chat__message-content :global(.prose)>ul,.chat__message-content :global(.prose)>ol,.chat__message-content :global(.prose)>blockquote{margin:.5rem 0}.chat__message-content :global(.prose).prose-invert{color:#fff}.chat__typing{display:flex;align-items:flex-start;gap:.5rem}.chat__loading{display:flex;align-items:center;justify-content:center;height:100%}.chat__input-container,.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;min-height:4rem;padding-inline:1rem 4rem;border-radius:9999px;border:1px solid #e2e2e2;background-color:#fff;color:#000;font-size:1rem;transition:all .2s ease-in-out}.chat__input:focus{outline:none;box-shadow:0 0 0 2px #ad49e11a}.chat__input:disabled{background-color:#e2e2e2;cursor:not-allowed}.chat__input::placeholder{color:#606060}.chat__send-button{position:absolute!important;inset-inline-end:.5rem;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;padding:.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#ad49e1;transition:all .2s ease-in-out}.chat__send-button:hover:not(:disabled){background-color:#ad49e1}.chat__send-button:disabled{cursor:not-allowed}.chat__send-button-icon{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}.chat__send-button-icon--rtl{transform:rotate(270deg)}#wave{position:relative}#wave .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;margin-right:.25rem;background:#ad49e1;animation:wave 1.3s linear infinite}#wave .dot:nth-child(2){animation-delay:-1.1s}#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i3.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: ChatComponent, isStandalone: true, selector: "app-chat", inputs: { messages: "messages", needsAgent: "needsAgent", assistantStatus: "assistantStatus", isAblyConnected: "isAblyConnected", isChatClosed: "isChatClosed", currentLang: "currentLang", loading: "loading" }, outputs: { sendMessageEvent: "sendMessageEvent" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<div class=\"chat\">\n  <div class=\"chat__messages\" #chatMessagesContainer>\n    <div\n      *ngFor=\"let message of messages; let i = index\"\n      class=\"chat__message-group\"\n    >\n      <div\n        class=\"chat__separator\"\n        *ngIf=\"i === firstAgentMessageIndex && message.senderType === 2\"\n      >\n        <svg\n          width=\"100%\"\n          height=\"14\"\n          viewBox=\"0 0 327 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n          <path\n            d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n            fill=\"#AD49E1\"\n          />\n          <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n        </svg>\n      </div>\n\n      <div\n        class=\"chat__message-container\"\n        [class.chat__message-container--user]=\"message.senderType === 1\"\n      >\n        <div\n          class=\"chat__avatar\"\n          [class.chat__avatar--hidden]=\"\n            i > 0 && messages[i - 1].senderType === message.senderType\n          \"\n        >\n          @if (message.senderType === 3) {\n          <span class=\"chat__avatar-wrapper chat__avatar-wrapper--assistant\">\n            <svg\n              class=\"chat__avatar-image\"\n              viewBox=\"0 0 55 53\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n                fill=\"#E5E5E5\"\n              />\n              <path\n                d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n                fill=\"white\"\n              />\n              <path\n                d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n                fill=\"#AD49E1\"\n              />\n            </svg>\n          </span>\n          } @else if (needsAgent || message.senderType === 2) {\n          <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n            <svg\n              class=\"chat__avatar-image\"\n              viewBox=\"0 0 12 14\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M5.99479 5.66658C7.46755 5.66658 8.66146 4.47268 8.66146 2.99992C8.66146 1.52716 7.46755 0.333252 5.99479 0.333252C4.52203 0.333252 3.32812 1.52716 3.32812 2.99992C3.32812 4.47268 4.52203 5.66658 5.99479 5.66658Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M11.3307 10.6665C11.3307 12.3232 11.3307 13.6665 5.9974 13.6665C0.664062 13.6665 0.664062 12.3232 0.664062 10.6665C0.664062 9.00984 3.05206 7.6665 5.9974 7.6665C8.94273 7.6665 11.3307 9.00984 11.3307 10.6665Z\"\n                fill=\"#AD49E1\"\n              />\n            </svg>\n          </span>\n          }\n        </div>\n        <app-card\n          variant=\"rounded\"\n          [class]=\"\n            'chat__message ' +\n            (message.senderType === 1\n              ? 'chat__message--user'\n              : 'chat__message--assistant')\n          \"\n        >\n          <app-card-content>\n            <div class=\"chat__message-content\">\n              <markdown\n                [data]=\"cleanMessageContent(message.messageContent)\"\n                ngPreserveWhitespaces\n                [inline]=\"false\"\n                class=\"prose\"\n                [class.prose-invert]=\"message.senderType === 1\"\n                [dir]=\"currentLang === 'ar' ? 'rtl' : 'ltr'\"\n              >\n              </markdown>\n            </div>\n          </app-card-content>\n        </app-card>\n      </div>\n    </div>\n\n    <div\n      *ngIf=\"assistantStatus === 'typing' && firstAgentMessageIndex === -1\"\n      class=\"chat__typing\"\n    >\n      <div class=\"chat__avatar\">\n        <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n          <svg\n            class=\"chat__avatar-image\"\n            viewBox=\"0 0 55 53\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n              fill=\"#E5E5E5\"\n            />\n            <path\n              d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n              fill=\"white\"\n            />\n            <path\n              d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n              fill=\"#AD49E1\"\n            />\n            <path\n              d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n              fill=\"#AD49E1\"\n            />\n          </svg>\n        </span>\n      </div>\n      <app-card\n        variant=\"rounded\"\n        class=\"chat__message chat__message--assistant\"\n      >\n        <app-card-content>\n          <div id=\"wave\">\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </app-card-content>\n      </app-card>\n    </div>\n    <div *ngIf=\"loading\" class=\"chat__loading\">\n      <app-loading variant=\"primary\" />\n    </div>\n  </div>\n\n  <form (ngSubmit)=\"handleSendMessage()\" class=\"chat__input-container\">\n    <div class=\"chat__input-wrapper\">\n      <input\n        type=\"text\"\n        [(ngModel)]=\"messageContent\"\n        name=\"messageContent\"\n        [placeholder]=\"'ChatPlaceholder' | translate\"\n        [disabled]=\"isChatClosed\"\n        class=\"chat__input\"\n      />\n      <button\n        type=\"submit\"\n        [disabled]=\"\n          !messageContent.trim() ||\n          !isAblyConnected ||\n          isChatClosed ||\n          assistantStatus === 'typing'\n        \"\n        class=\"chat__send-button\"\n      >\n        <svg\n          class=\"chat__send-button-icon\"\n          [class.chat__send-button-icon--rtl]=\"currentLang === 'ar'\"\n          viewBox=\"0 0 19 19\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M18.2346 2.68609C18.6666 1.49109 17.5086 0.33309 16.3136 0.76609L1.70855 6.04809C0.509554 6.48209 0.364554 8.11809 1.46755 8.75709L6.12955 11.4561L10.2926 7.29309C10.4812 7.11093 10.7338 7.01014 10.996 7.01242C11.2582 7.01469 11.509 7.11986 11.6944 7.30527C11.8798 7.49068 11.9849 7.74149 11.9872 8.00369C11.9895 8.26589 11.8887 8.51849 11.7066 8.70709L7.54355 12.8701L10.2436 17.5321C10.8816 18.6351 12.5176 18.4891 12.9516 17.2911L18.2346 2.68609Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </form>\n</div>\n", styles: [".chat{display:flex;flex-direction:column;height:100%;overflow:hidden}.chat__messages{flex:1;overflow-y:auto;padding-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.chat__message-group{display:flex;flex-direction:column;gap:.5rem}.chat__separator,.chat__separator img{width:100%}.chat__message-container{display:flex;align-items:flex-start;gap:.5rem}.chat__message-container--user{flex-direction:row-reverse}.chat__avatar{margin-top:.5rem}.chat__avatar--hidden{visibility:hidden}.chat__avatar-wrapper{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:9999px;padding:.5rem}.chat__avatar-wrapper--assistant{background-color:#ad49e1}.chat__avatar-wrapper--agent{background-color:#fff}.chat__avatar-image{width:100%}.chat__message{max-width:80%;position:relative}.chat__message--user{align-self:flex-start;background-color:#ad49e1;color:#fff;direction:rtl}.chat__message--assistant,.chat__message--agent{align-self:flex-end;background-color:#fff;color:#000;direction:rtl}.chat__message-content{white-space:pre-wrap}.chat__message-content :global(.prose){max-width:none;word-break:break-words}.chat__message-content :global(.prose)>*:first-child{margin-top:0}.chat__message-content :global(.prose)>*:last-child{margin-bottom:0}.chat__message-content :global(.prose)>p,.chat__message-content :global(.prose)>ul,.chat__message-content :global(.prose)>ol,.chat__message-content :global(.prose)>blockquote{margin:.5rem 0}.chat__message-content :global(.prose).prose-invert{color:#fff}.chat__typing{display:flex;align-items:flex-start;gap:.5rem}.chat__loading{display:flex;align-items:center;justify-content:center;height:100%}.chat__input-container,.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;min-height:4rem;padding-inline:1rem 4rem;border-radius:9999px;border:1px solid #e2e2e2;background-color:#fff;color:#000;font-size:1rem;transition:all .2s ease-in-out}.chat__input:focus{outline:none;box-shadow:0 0 0 2px #ad49e11a}.chat__input:disabled{background-color:#e2e2e2;cursor:not-allowed}.chat__input::placeholder{color:#606060}.chat__send-button{position:absolute!important;inset-inline-end:.5rem;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;padding:.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#ad49e1;transition:all .2s ease-in-out}.chat__send-button:hover:not(:disabled){background-color:#ad49e1}.chat__send-button:disabled{cursor:not-allowed}.chat__send-button-icon{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}.chat__send-button-icon--rtl{transform:rotate(270deg)}#wave{position:relative}#wave .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;margin-right:.25rem;background:#ad49e1;animation:wave 1.3s linear infinite}#wave .dot:nth-child(2){animation-delay:-1.1s}#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i3.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-chat', standalone: true, imports: [CommonModule, FormsModule, CardComponent, CardContentComponent, LoadingComponent, TranslatePipe, MarkdownModule], template: "<div class=\"chat\">\n  <div class=\"chat__messages\" #chatMessagesContainer>\n    <div *ngFor=\"let message of messages; let i = index\" class=\"chat__message-group\">\n      <div class=\"chat__separator\" *ngIf=\"i === firstAgentMessageIndex && message.senderType === 2\">\n        <svg width=\"100%\" height=\"14\" viewBox=\"0 0 327 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n          <path\n            d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n            fill=\"#AD49E1\"\n          />\n          <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n        </svg>\n      </div>\n\n      <div class=\"chat__message-container\" [class.chat__message-container--user]=\"message.senderType === 1\">\n        <div class=\"chat__avatar\" [class.chat__avatar--hidden]=\"i > 0 && messages[i - 1].senderType === message.senderType\">\n          @if (message.senderType === 3) {\n            <span class=\"chat__avatar-wrapper chat__avatar-wrapper--assistant\">\n              <svg class=\"chat__avatar-image\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n                  fill=\"#E5E5E5\"\n                />\n                <path\n                  d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n                  fill=\"white\"\n                />\n                <path\n                  d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n                  fill=\"#AD49E1\"\n                />\n                <path\n                  d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n                  fill=\"#AD49E1\"\n                />\n              </svg>\n            </span>\n          } @else if (needsAgent || message.senderType === 2) {\n            <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n              <svg class=\"chat__avatar-image\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M5.99479 5.66658C7.46755 5.66658 8.66146 4.47268 8.66146 2.99992C8.66146 1.52716 7.46755 0.333252 5.99479 0.333252C4.52203 0.333252 3.32812 1.52716 3.32812 2.99992C3.32812 4.47268 4.52203 5.66658 5.99479 5.66658Z\"\n                  fill=\"#AD49E1\"\n                />\n                <path\n                  d=\"M11.3307 10.6665C11.3307 12.3232 11.3307 13.6665 5.9974 13.6665C0.664062 13.6665 0.664062 12.3232 0.664062 10.6665C0.664062 9.00984 3.05206 7.6665 5.9974 7.6665C8.94273 7.6665 11.3307 9.00984 11.3307 10.6665Z\"\n                  fill=\"#AD49E1\"\n                />\n              </svg>\n            </span>\n          }\n        </div>\n        <app-card\n          variant=\"rounded\"\n          [class]=\"'chat__message ' + (message.senderType === 1 ? 'chat__message--user' : 'chat__message--assistant')\"\n        >\n          <app-card-content>\n            <div class=\"chat__message-content\">\n              <markdown\n                [data]=\"cleanMessageContent(message.messageContent)\"\n                ngPreserveWhitespaces\n                [inline]=\"false\"\n                class=\"prose\"\n                [class.prose-invert]=\"message.senderType === 1\"\n                [dir]=\"currentLang === 'ar' ? 'rtl' : 'ltr'\"\n              >\n              </markdown>\n            </div>\n          </app-card-content>\n        </app-card>\n      </div>\n    </div>\n\n    <div *ngIf=\"assistantStatus === 'typing' && firstAgentMessageIndex === -1\" class=\"chat__typing\">\n      <div class=\"chat__avatar\">\n        <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n          <svg class=\"chat__avatar-image\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n              fill=\"#E5E5E5\"\n            />\n            <path\n              d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n              fill=\"white\"\n            />\n            <path\n              d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n              fill=\"#AD49E1\"\n            />\n            <path\n              d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n              fill=\"#AD49E1\"\n            />\n          </svg>\n        </span>\n      </div>\n      <app-card variant=\"rounded\" class=\"chat__message chat__message--assistant\">\n        <app-card-content>\n          <div id=\"wave\">\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </app-card-content>\n      </app-card>\n    </div>\n    <div *ngIf=\"loading\" class=\"chat__loading\">\n      <app-loading variant=\"primary\" />\n    </div>\n  </div>\n\n  <form (ngSubmit)=\"handleSendMessage()\" class=\"chat__input-container\">\n    <div class=\"chat__input-wrapper\">\n      <input\n        type=\"text\"\n        [(ngModel)]=\"messageContent\"\n        name=\"messageContent\"\n        [placeholder]=\"'ChatPlaceholder' | translate\"\n        [disabled]=\"isChatClosed\"\n        class=\"chat__input\"\n      />\n      <button\n        type=\"submit\"\n        [disabled]=\"!messageContent.trim() || !isSignalRConnected || isChatClosed || assistantStatus === 'typing'\"\n        class=\"chat__send-button\"\n      >\n        <svg\n          class=\"chat__send-button-icon\"\n          [class.chat__send-button-icon--rtl]=\"currentLang === 'ar'\"\n          viewBox=\"0 0 19 19\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M18.2346 2.68609C18.6666 1.49109 17.5086 0.33309 16.3136 0.76609L1.70855 6.04809C0.509554 6.48209 0.364554 8.11809 1.46755 8.75709L6.12955 11.4561L10.2926 7.29309C10.4812 7.11093 10.7338 7.01014 10.996 7.01242C11.2582 7.01469 11.509 7.11986 11.6944 7.30527C11.8798 7.49068 11.9849 7.74149 11.9872 8.00369C11.9895 8.26589 11.8887 8.51849 11.7066 8.70709L7.54355 12.8701L10.2436 17.5321C10.8816 18.6351 12.5176 18.4891 12.9516 17.2911L18.2346 2.68609Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </form>\n</div>\n", styles: [".chat{display:flex;flex-direction:column;height:100%;overflow:hidden}.chat__messages{flex:1;overflow-y:auto;padding-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.chat__message-group{display:flex;flex-direction:column;gap:.5rem}.chat__separator,.chat__separator img{width:100%}.chat__message-container{display:flex;align-items:flex-start;gap:.5rem}.chat__message-container--user{flex-direction:row-reverse}.chat__avatar{margin-top:.5rem}.chat__avatar--hidden{visibility:hidden}.chat__avatar-wrapper{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:9999px;padding:.5rem}.chat__avatar-wrapper--assistant{background-color:#ad49e1}.chat__avatar-wrapper--agent{background-color:#fff}.chat__avatar-image{width:100%}.chat__message{max-width:80%;position:relative}.chat__message--user{align-self:flex-start;background-color:#ad49e1;color:#fff;direction:rtl}.chat__message--assistant,.chat__message--agent{align-self:flex-end;background-color:#fff;color:#000;direction:rtl}.chat__message-content{white-space:pre-wrap}.chat__message-content :global(.prose){max-width:none;word-break:break-words}.chat__message-content :global(.prose)>*:first-child{margin-top:0}.chat__message-content :global(.prose)>*:last-child{margin-bottom:0}.chat__message-content :global(.prose)>p,.chat__message-content :global(.prose)>ul,.chat__message-content :global(.prose)>ol,.chat__message-content :global(.prose)>blockquote{margin:.5rem 0}.chat__message-content :global(.prose).prose-invert{color:#fff}.chat__typing{display:flex;align-items:flex-start;gap:.5rem}.chat__loading{display:flex;align-items:center;justify-content:center;height:100%}.chat__input-container,.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;min-height:4rem;padding-inline:1rem 4rem;border-radius:9999px;border:1px solid #e2e2e2;background-color:#fff;color:#000;font-size:1rem;transition:all .2s ease-in-out}.chat__input:focus{outline:none;box-shadow:0 0 0 2px #ad49e11a}.chat__input:disabled{background-color:#e2e2e2;cursor:not-allowed}.chat__input::placeholder{color:#606060}.chat__send-button{position:absolute!important;inset-inline-end:.5rem;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;padding:.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#ad49e1;transition:all .2s ease-in-out}.chat__send-button:hover:not(:disabled){background-color:#ad49e1}.chat__send-button:disabled{cursor:not-allowed}.chat__send-button-icon{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}.chat__send-button-icon--rtl{transform:rotate(270deg)}#wave{position:relative}#wave .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;margin-right:.25rem;background:#ad49e1;animation:wave 1.3s linear infinite}#wave .dot:nth-child(2){animation-delay:-1.1s}#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"] }]
+            args: [{ selector: 'app-chat', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        CardComponent,
+                        CardContentComponent,
+                        LoadingComponent,
+                        TranslatePipe,
+                        MarkdownModule,
+                    ], template: "<div class=\"chat\">\n  <div class=\"chat__messages\" #chatMessagesContainer>\n    <div\n      *ngFor=\"let message of messages; let i = index\"\n      class=\"chat__message-group\"\n    >\n      <div\n        class=\"chat__separator\"\n        *ngIf=\"i === firstAgentMessageIndex && message.senderType === 2\"\n      >\n        <svg\n          width=\"100%\"\n          height=\"14\"\n          viewBox=\"0 0 327 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n          <path\n            d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n            fill=\"#AD49E1\"\n          />\n          <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n        </svg>\n      </div>\n\n      <div\n        class=\"chat__message-container\"\n        [class.chat__message-container--user]=\"message.senderType === 1\"\n      >\n        <div\n          class=\"chat__avatar\"\n          [class.chat__avatar--hidden]=\"\n            i > 0 && messages[i - 1].senderType === message.senderType\n          \"\n        >\n          @if (message.senderType === 3) {\n          <span class=\"chat__avatar-wrapper chat__avatar-wrapper--assistant\">\n            <svg\n              class=\"chat__avatar-image\"\n              viewBox=\"0 0 55 53\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n                fill=\"#E5E5E5\"\n              />\n              <path\n                d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n                fill=\"white\"\n              />\n              <path\n                d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n                fill=\"#AD49E1\"\n              />\n            </svg>\n          </span>\n          } @else if (needsAgent || message.senderType === 2) {\n          <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n            <svg\n              class=\"chat__avatar-image\"\n              viewBox=\"0 0 12 14\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M5.99479 5.66658C7.46755 5.66658 8.66146 4.47268 8.66146 2.99992C8.66146 1.52716 7.46755 0.333252 5.99479 0.333252C4.52203 0.333252 3.32812 1.52716 3.32812 2.99992C3.32812 4.47268 4.52203 5.66658 5.99479 5.66658Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M11.3307 10.6665C11.3307 12.3232 11.3307 13.6665 5.9974 13.6665C0.664062 13.6665 0.664062 12.3232 0.664062 10.6665C0.664062 9.00984 3.05206 7.6665 5.9974 7.6665C8.94273 7.6665 11.3307 9.00984 11.3307 10.6665Z\"\n                fill=\"#AD49E1\"\n              />\n            </svg>\n          </span>\n          }\n        </div>\n        <app-card\n          variant=\"rounded\"\n          [class]=\"\n            'chat__message ' +\n            (message.senderType === 1\n              ? 'chat__message--user'\n              : 'chat__message--assistant')\n          \"\n        >\n          <app-card-content>\n            <div class=\"chat__message-content\">\n              <markdown\n                [data]=\"cleanMessageContent(message.messageContent)\"\n                ngPreserveWhitespaces\n                [inline]=\"false\"\n                class=\"prose\"\n                [class.prose-invert]=\"message.senderType === 1\"\n                [dir]=\"currentLang === 'ar' ? 'rtl' : 'ltr'\"\n              >\n              </markdown>\n            </div>\n          </app-card-content>\n        </app-card>\n      </div>\n    </div>\n\n    <div\n      *ngIf=\"assistantStatus === 'typing' && firstAgentMessageIndex === -1\"\n      class=\"chat__typing\"\n    >\n      <div class=\"chat__avatar\">\n        <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n          <svg\n            class=\"chat__avatar-image\"\n            viewBox=\"0 0 55 53\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n              fill=\"#E5E5E5\"\n            />\n            <path\n              d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n              fill=\"white\"\n            />\n            <path\n              d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n              fill=\"#AD49E1\"\n            />\n            <path\n              d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n              fill=\"#AD49E1\"\n            />\n          </svg>\n        </span>\n      </div>\n      <app-card\n        variant=\"rounded\"\n        class=\"chat__message chat__message--assistant\"\n      >\n        <app-card-content>\n          <div id=\"wave\">\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </app-card-content>\n      </app-card>\n    </div>\n    <div *ngIf=\"loading\" class=\"chat__loading\">\n      <app-loading variant=\"primary\" />\n    </div>\n  </div>\n\n  <form (ngSubmit)=\"handleSendMessage()\" class=\"chat__input-container\">\n    <div class=\"chat__input-wrapper\">\n      <input\n        type=\"text\"\n        [(ngModel)]=\"messageContent\"\n        name=\"messageContent\"\n        [placeholder]=\"'ChatPlaceholder' | translate\"\n        [disabled]=\"isChatClosed\"\n        class=\"chat__input\"\n      />\n      <button\n        type=\"submit\"\n        [disabled]=\"\n          !messageContent.trim() ||\n          !isAblyConnected ||\n          isChatClosed ||\n          assistantStatus === 'typing'\n        \"\n        class=\"chat__send-button\"\n      >\n        <svg\n          class=\"chat__send-button-icon\"\n          [class.chat__send-button-icon--rtl]=\"currentLang === 'ar'\"\n          viewBox=\"0 0 19 19\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M18.2346 2.68609C18.6666 1.49109 17.5086 0.33309 16.3136 0.76609L1.70855 6.04809C0.509554 6.48209 0.364554 8.11809 1.46755 8.75709L6.12955 11.4561L10.2926 7.29309C10.4812 7.11093 10.7338 7.01014 10.996 7.01242C11.2582 7.01469 11.509 7.11986 11.6944 7.30527C11.8798 7.49068 11.9849 7.74149 11.9872 8.00369C11.9895 8.26589 11.8887 8.51849 11.7066 8.70709L7.54355 12.8701L10.2436 17.5321C10.8816 18.6351 12.5176 18.4891 12.9516 17.2911L18.2346 2.68609Z\"\n            fill=\"white\"\n          />\n        </svg>\n      </button>\n    </div>\n  </form>\n</div>\n", styles: [".chat{display:flex;flex-direction:column;height:100%;overflow:hidden}.chat__messages{flex:1;overflow-y:auto;padding-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.chat__message-group{display:flex;flex-direction:column;gap:.5rem}.chat__separator,.chat__separator img{width:100%}.chat__message-container{display:flex;align-items:flex-start;gap:.5rem}.chat__message-container--user{flex-direction:row-reverse}.chat__avatar{margin-top:.5rem}.chat__avatar--hidden{visibility:hidden}.chat__avatar-wrapper{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:9999px;padding:.5rem}.chat__avatar-wrapper--assistant{background-color:#ad49e1}.chat__avatar-wrapper--agent{background-color:#fff}.chat__avatar-image{width:100%}.chat__message{max-width:80%;position:relative}.chat__message--user{align-self:flex-start;background-color:#ad49e1;color:#fff;direction:rtl}.chat__message--assistant,.chat__message--agent{align-self:flex-end;background-color:#fff;color:#000;direction:rtl}.chat__message-content{white-space:pre-wrap}.chat__message-content :global(.prose){max-width:none;word-break:break-words}.chat__message-content :global(.prose)>*:first-child{margin-top:0}.chat__message-content :global(.prose)>*:last-child{margin-bottom:0}.chat__message-content :global(.prose)>p,.chat__message-content :global(.prose)>ul,.chat__message-content :global(.prose)>ol,.chat__message-content :global(.prose)>blockquote{margin:.5rem 0}.chat__message-content :global(.prose).prose-invert{color:#fff}.chat__typing{display:flex;align-items:flex-start;gap:.5rem}.chat__loading{display:flex;align-items:center;justify-content:center;height:100%}.chat__input-container,.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;min-height:4rem;padding-inline:1rem 4rem;border-radius:9999px;border:1px solid #e2e2e2;background-color:#fff;color:#000;font-size:1rem;transition:all .2s ease-in-out}.chat__input:focus{outline:none;box-shadow:0 0 0 2px #ad49e11a}.chat__input:disabled{background-color:#e2e2e2;cursor:not-allowed}.chat__input::placeholder{color:#606060}.chat__send-button{position:absolute!important;inset-inline-end:.5rem;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;padding:.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#ad49e1;transition:all .2s ease-in-out}.chat__send-button:hover:not(:disabled){background-color:#ad49e1}.chat__send-button:disabled{cursor:not-allowed}.chat__send-button-icon{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}.chat__send-button-icon--rtl{transform:rotate(270deg)}#wave{position:relative}#wave .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;margin-right:.25rem;background:#ad49e1;animation:wave 1.3s linear infinite}#wave .dot:nth-child(2){animation-delay:-1.1s}#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"] }]
         }], propDecorators: { messages: [{
                 type: Input
             }], needsAgent: [{
                 type: Input
             }], assistantStatus: [{
                 type: Input
-            }], isSignalRConnected: [{
+            }], isAblyConnected: [{
                 type: Input
             }], isChatClosed: [{
                 type: Input
@@ -1001,117 +1154,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 }]
         }] });
 
-class SignalRService {
-    connection = null;
-    isConnected = false;
-    baseURL = 'http://localhost:5086'; // Replace with your API URL
-    hubUrl = 'https://babylai.net'; // Replace with your SignalR hub URL
-    async startConnection(sessionId, apiKey, onMessageReceived) {
-        console.log('sessionId:', sessionId);
-        if (this.isConnected)
-            return;
-        this.connection = new signalR.HubConnectionBuilder()
-            .withUrl(`${this.hubUrl}/clientHub?access_token=${encodeURIComponent(apiKey)}`, {
-            withCredentials: true,
-            transport: signalR.HttpTransportType.WebSockets |
-                signalR.HttpTransportType.LongPolling,
-            headers: {
-                Authorization: `Bearer ${apiKey}`,
-                'X-Requested-With': 'XMLHttpRequest',
-                'X-SignalR-User-Agent': 'Microsoft SignalR/8.0 (8.0.7; Unknown OS; Browser; Unknown Runtime Version)',
-            },
-            skipNegotiation: false,
-            accessTokenFactory: () => apiKey,
-        })
-            .withAutomaticReconnect()
-            .configureLogging(signalR.LogLevel.Information)
-            .build();
-        this.connection.on('ReceiveMessage', (message, senderType, needsAgent) => {
-            console.log('Received message from SignalR:', message, senderType, needsAgent);
-            onMessageReceived(message, senderType, needsAgent);
-        });
-        try {
-            await this.connection.start();
-            console.log('SignalR connection started successfully.');
-            this.isConnected = true;
-            await this.joinGroup(sessionId);
-            console.log('SignalR group joined.');
-        }
-        catch (error) {
-            console.error('Error connecting to SignalR', error);
-            this.isConnected = false;
-        }
-    }
-    async joinGroup(sessionId) {
-        if (this.connection) {
-            try {
-                console.log(`Attempting to join group with session ID: ${sessionId}`);
-                await this.connection.invoke('JoinGroup', sessionId);
-                console.log(`Joined group with session ID: ${sessionId}`);
-            }
-            catch (error) {
-                console.error('Error joining SignalR group:', error);
-            }
-        }
-    }
-    async leaveGroup(sessionId) {
-        if (this.connection && this.isConnected) {
-            try {
-                await this.connection.invoke('LeaveGroup', sessionId);
-                console.log(`Left group with session ID: ${sessionId}`);
-            }
-            catch (error) {
-                console.error('Error leaving SignalR group:', error);
-            }
-        }
-    }
-    async stopConnection() {
-        if (this.connection && this.isConnected) {
-            await this.connection.stop();
-            this.isConnected = false;
-            console.log('SignalR disconnected.');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SignalRService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SignalRService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SignalRService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class HelpCenterConfigService {
-    _apiBaseUrl = 'https://babylai.net/api';
-    _getTokenFn;
-    setApiBaseUrl(url) {
-        this._apiBaseUrl = url;
-    }
-    getApiBaseUrl() {
-        return this._apiBaseUrl;
-    }
-    setGetTokenFn(fn) {
-        this._getTokenFn = fn;
-    }
-    getTokenFn() {
-        return this._getTokenFn;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterConfigService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterConfigService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 class HelpCenterWidgetComponent {
     apiService;
-    signalRService;
     translationService;
-    configService;
     getToken;
     helpScreenId;
     showArrow = true;
@@ -1136,7 +1181,7 @@ class HelpCenterWidgetComponent {
     showArrowAnimation = this.showArrow;
     showTooltip = false;
     sessionId = null;
-    isSignalRConnected = false;
+    isAblyConnected = false;
     isChatClosed = false;
     showChat = false;
     messageText = '';
@@ -1144,20 +1189,16 @@ class HelpCenterWidgetComponent {
     messages = [];
     showHelpScreenData = false;
     chatIsLoading = false;
+    ablyToken = null;
     isOpen = false;
     needsAgent = false;
     assistantStatus = 'idle';
     selectedOption = null;
     selectedNestedOption = null;
-    baseUrl = 'https://babylai.net/api';
     showEndChatConfirmation = false;
-    constructor(apiService, signalRService, translationService, configService) {
+    constructor(apiService, translationService) {
         this.apiService = apiService;
-        this.signalRService = signalRService;
         this.translationService = translationService;
-        this.configService = configService;
-        this.configService.setApiBaseUrl(this.baseUrl);
-        console.log('Help Center Widget Component', this.messageLabel);
     }
     ngOnInit() {
         this.showArrowAnimation = this.showArrowAnimation;
@@ -1174,6 +1215,8 @@ class HelpCenterWidgetComponent {
         if (this.langSubscription) {
             this.langSubscription.unsubscribe();
         }
+        // Clean up Ably connection
+        ClientAblyService.stopConnection();
     }
     async handleTogglePopup() {
         this.isPopupOpen = !this.isPopupOpen;
@@ -1199,15 +1242,41 @@ class HelpCenterWidgetComponent {
             this.status = 'failed';
         }
     }
-    async createChatSession() {
+    async createChatSession(option) {
         try {
+            const selectedOpt = option || this.selectedOption;
             const chatSessionCreateDto = {
-                optionId: this.selectedOption?.id,
-                helpScreenId: this.helpScreenId
+                optionId: selectedOpt?.id,
+                helpScreenId: this.helpScreenId,
             };
             const response = await this.apiService.apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
             const data = await response.json();
-            this.sessionId = data.id;
+            const { chatSession, ablyToken } = data;
+            this.sessionId = chatSession?.id;
+            this.ablyToken = ablyToken;
+            // Establish Ably connection after creating session
+            if (this.sessionId && selectedOpt && !this.isAblyConnected) {
+                // Use the ablyToken from response or fallback to getValidToken
+                const tokenToUse = this.ablyToken || (await this.apiService.getValidToken());
+                // Get tenantId from the selected option's assistant
+                const tenantId = selectedOpt.assistant?.tenantId ||
+                    selectedOpt.assistant?.tenant?.id ||
+                    '';
+                await ClientAblyService.startConnection(this.sessionId, tokenToUse, this.handleReceiveMessage.bind(this), tenantId);
+                this.isAblyConnected = true;
+                // Add greeting message
+                this.messages.push({
+                    id: Date.now(),
+                    sender: 'assistant',
+                    senderType: 3,
+                    messageContent: selectedOpt.assistant?.greeting ||
+                        (this.currentLang === 'en'
+                            ? 'Hello! How can I assist you today?'
+                            : 'مرحباً! كيف يمكنني مساعدتك اليوم؟'),
+                    sentAt: new Date(),
+                    isSeen: true,
+                });
+            }
             return data;
         }
         catch (error) {
@@ -1217,7 +1286,7 @@ class HelpCenterWidgetComponent {
     }
     async sendMessage(messageText) {
         const textToSend = messageText || this.messageText;
-        if (!textToSend.trim() || !this.isSignalRConnected || this.isChatClosed)
+        if (!textToSend.trim() || !this.isAblyConnected || this.isChatClosed)
             return;
         try {
             this.assistantStatus = 'typing';
@@ -1228,17 +1297,17 @@ class HelpCenterWidgetComponent {
                 senderType: 1,
                 messageContent: textToSend,
                 sentAt: new Date(),
-                isSeen: false
+                isSeen: false,
             });
             if (!this.sessionId) {
-                await this.createChatSession();
+                await this.createChatSession(this.selectedOption || undefined);
             }
             const messageDto = { messageContent: textToSend };
             await this.apiService.apiRequest(`Client/ClientChatSession/${this.sessionId}/send-message`, 'POST', messageDto);
             // Clear message input
             this.messageText = '';
             // Update message as seen
-            this.messages = this.messages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg));
+            this.messages = this.messages.map((msg) => msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg);
         }
         catch (error) {
             console.error('Error sending message:', error);
@@ -1249,7 +1318,7 @@ class HelpCenterWidgetComponent {
                 senderType: 3,
                 messageContent: 'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
                 sentAt: new Date(),
-                isSeen: true
+                isSeen: true,
             });
         }
     }
@@ -1274,9 +1343,8 @@ class HelpCenterWidgetComponent {
             senderType: parseInt(senderType),
             messageContent: message,
             sentAt: new Date(),
-            isSeen: true
+            isSeen: true,
         });
-        console.log(this.messages);
         this.assistantStatus = 'idle';
         this.scrollToBottom();
     }
@@ -1293,61 +1361,38 @@ class HelpCenterWidgetComponent {
     async handleStartNewChat(option) {
         this.selectedOption = option;
         this.chatIsLoading = true;
-        if (!this.isSignalRConnected) {
-            try {
-                await this.createChatSession();
-                const tokenResponse = await this.apiService.getValidToken();
-                this.showChat = true;
-                this.isChatClosed = false;
-                this.showHelpScreenData = false;
-                await this.signalRService.startConnection(this.sessionId, tokenResponse, this.handleReceiveMessage.bind(this));
-                this.isSignalRConnected = true;
-                // add greeting message
-                this.messages.push({
-                    id: Date.now(),
-                    sender: 'assistant',
-                    senderType: 3,
-                    messageContent: option.assistant?.greeting ||
-                        (this.currentLang === 'en' ? 'Hello! How can I assist you today?' : 'مرحباً! كيف يمكنني مساعدتك اليوم؟'),
-                    sentAt: new Date(),
-                    isSeen: true
-                });
-                this.chatIsLoading = false;
-            }
-            catch (error) {
-                console.error('Error connecting to SignalR:', error);
-                this.chatIsLoading = false;
+        try {
+            // Create chat session (includes Ably connection setup)
+            if (!this.sessionId) {
+                await this.createChatSession(option);
             }
-        }
-        else {
+            // Update UI state
             this.showChat = true;
             this.isChatClosed = false;
             this.showHelpScreenData = false;
             this.chatIsLoading = false;
         }
-    }
-    async startNewChatSession(option) {
-        try {
-            this.status = 'loading';
-            this.error = '';
-            this.messages = [];
-            const chatSessionCreateDto = {
-                helpScreenId: this.helpScreenId,
-                optionId: option.id
-            };
-            const response = await this.apiService.apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
-            const createdSession = await response.json();
-            this.sessionId = createdSession.id;
-            // Add greeting message
+        catch (error) {
+            console.error('Error starting chat:', error);
+            this.chatIsLoading = false;
+            // Show error message to user
             this.messages.push({
                 id: Date.now(),
                 sender: 'assistant',
                 senderType: 3,
-                messageContent: option.assistant?.greeting || 'Hello! How can I assist you today?\nمرحباً! كيف يمكنني مساعدتك اليوم؟',
+                messageContent: 'Failed to start chat. Please try again.\n فشل في بدء المحادثة. يرجى المحاولة مرة أخرى.',
                 sentAt: new Date(),
-                isSeen: true
+                isSeen: true,
             });
-            this.isSignalRConnected = true;
+        }
+    }
+    async startNewChatSession(option) {
+        try {
+            this.status = 'loading';
+            this.error = '';
+            this.messages = [];
+            // Use the centralized createChatSession method
+            await this.createChatSession(option);
             this.isChatClosed = false;
             this.status = 'succeeded';
         }
@@ -1370,6 +1415,9 @@ class HelpCenterWidgetComponent {
             await this.closeChatSession(this.sessionId);
             this.sessionId = null;
         }
+        // Stop Ably connection
+        await ClientAblyService.stopConnection();
+        this.isAblyConnected = false;
         this.showChat = false;
         this.showHelpScreenData = true;
         this.messages = [];
@@ -1453,14 +1501,14 @@ class HelpCenterWidgetComponent {
             title: option.title,
             description: option.paragraphs?.[0] || '',
             actionLabel: option.chatWithUs ? 'Chat Now' : '',
-            action: option.chatWithUs ? () => this.handleStartChat(option) : null
+            action: option.chatWithUs ? () => this.handleStartChat(option) : null,
         }));
     }
     navigateToUrl(url) {
         window.open(url, '_blank');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, deps: [{ token: ApiService }, { token: SignalRService }, { token: TranslationService }, { token: HelpCenterConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: "getToken", helpScreenId: "helpScreenId", showArrow: "showArrow", messageLabel: "messageLabel", currentLang: "currentLang", isIntroScreenEnabled: "isIntroScreenEnabled" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n  <!-- Arrow Animation -->\n  <div *ngIf=\"showArrowAnimation && !isPopupOpen\" class=\"arrow-animation\">\n    <div class=\"message-box\">\n      <p>\n        {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n      </p>\n      <button class=\"close-button\" (click)=\"handleCloseArrowAnimation()\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n          <path d=\"M1 1L11 11M1 11L11 1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        </svg>\n      </button>\n      <div class=\"arrow-tip\"></div>\n    </div>\n  </div>\n\n  <!-- Help Button -->\n  <button class=\"help-button\" (click)=\"handleTogglePopup()\">\n    <span class=\"help-button-content\">\n      <!-- <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"help-button-logo\" /> -->\n      <svg class=\"help-button-logo\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n          fill=\"#E5E5E5\"\n        />\n        <path\n          d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n          fill=\"#AD49E1\"\n        />\n        <path\n          d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n          fill=\"#AD49E1\"\n        />\n      </svg>\n    </span>\n  </button>\n\n  <!-- Help Popup -->\n  <div\n    *ngIf=\"isPopupOpen\"\n    class=\"help-popup\"\n    [ngClass]=\"{\n      'is-open': isPopupOpen,\n      'is-closed': !isPopupOpen,\n      'has-gradient': isPopupOpen && !showHelpScreenData && !showChat\n    }\"\n  >\n    <app-confirmation-dialog\n      *ngIf=\"showEndChatConfirmation\"\n      [title]=\"'LeavingDialogTitle' | translate\"\n      [body]=\"'LeavingDialogBody' | translate\"\n      [confirmText]=\"'Confirm' | translate\"\n      [cancelText]=\"'Cancel' | translate\"\n      (onConfirm)=\"confirmEndChat()\"\n      (onCancel)=\"cancelEndChat()\"\n    ></app-confirmation-dialog>\n\n    <!-- Loading State -->\n    <div *ngIf=\"status === 'loading'\" class=\"loading-state\">\n      <ng-container *ngIf=\"!showHelpScreenData\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData\">\n        <app-header\n          [showCloseButton]=\"!isIntroScreenEnabled\"\n          [showLogo]=\"false\"\n          (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n      </ng-container>\n      <app-loading [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"></app-loading>\n    </div>\n\n    <!-- Error State -->\n    <div *ngIf=\"status === 'failed'\" class=\"error-message\">\n      <span>Error: {{ error }}</span>\n    </div>\n\n    <!-- Content -->\n    <ng-container *ngIf=\"status === 'succeeded'\">\n      <!-- Headers -->\n      @if (isIntroScreenEnabled) {\n        <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n          <app-header\n            [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n            [showLogo]=\"true\"\n            (onBack)=\"handleBack()\"\n            (onClose)=\"handleClosePopup()\"\n            [language]=\"currentLang\"\n          ></app-header>\n        </ng-container>\n      }\n\n      <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n        <app-header\n          [showCloseButton]=\"!isIntroScreenEnabled\"\n          [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n          [showLogo]=\"false\"\n          (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n          (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n\n        <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n          <app-button variant=\"icon-bg\" (click)=\"handleShowChat()\" class=\"chat-button\" className=\"button--icon\">\n            <svg class=\"icon-full\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M17.5 3.83801C15.9806 2.95874 14.2555 2.49712 12.5 2.50001C6.977 2.50001 2.5 6.97701 2.5 12.5C2.5 14.1 2.876 15.612 3.543 16.953C3.721 17.309 3.78 17.716 3.677 18.101L3.082 20.327C3.02307 20.5473 3.02312 20.7792 3.08216 20.9995C3.14119 21.2198 3.25712 21.4206 3.41831 21.5819C3.57951 21.7432 3.7803 21.8593 4.00053 21.9184C4.22075 21.9776 4.45267 21.9778 4.673 21.919L6.899 21.323C7.28538 21.2254 7.69414 21.2727 8.048 21.456C9.43095 22.1446 10.9551 22.502 12.5 22.5C18.023 22.5 22.5 18.023 22.5 12.5C22.5 10.679 22.013 8.97001 21.162 7.50001\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              />\n              <path\n                d=\"M8.5 12.5H8.509M12.491 12.5H12.5M16.491 12.5H16.5\"\n                stroke=\"white\"\n                stroke-width=\"2.66667\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </app-button>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"showChat\">\n        <app-chat-header\n          [showBackButton]=\"showChat\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleEndChat()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        ></app-chat-header>\n\n        <app-chat\n          class=\"chat-container\"\n          [messages]=\"messages\"\n          [needsAgent]=\"needsAgent\"\n          [assistantStatus]=\"assistantStatus\"\n          [isSignalRConnected]=\"isSignalRConnected\"\n          [isChatClosed]=\"isChatClosed\"\n          (sendMessageEvent)=\"sendMessage($event)\"\n          [currentLang]=\"currentLang\"\n          [loading]=\"chatIsLoading\"\n        ></app-chat>\n      </ng-container>\n\n      <!-- Main Content -->\n      <div class=\"main-content\" *ngIf=\"!showChat\">\n        @if (isIntroScreenEnabled) {\n          <ng-container *ngIf=\"!showHelpScreenData\">\n            <div class=\"intro-section\">\n              <h1 class=\"intro-title\">{{ 'ChatIntroMessage' | translate }}</h1>\n            </div>\n\n            <div class=\"cards-section\">\n              <app-card variant=\"rounded\">\n                <app-card-content>\n                  <div class=\"card-content\">\n                    <div class=\"babylai-info\">\n                      <div class=\"logo-container\">\n                        <svg class=\"logo\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path\n                            d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n                            fill=\"#E5E5E5\"\n                          />\n                          <path\n                            d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n                            fill=\"white\"\n                          />\n                          <path\n                            d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n                            fill=\"#AD49E1\"\n                          />\n                          <path\n                            d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n                            fill=\"#AD49E1\"\n                          />\n                        </svg>\n                      </div>\n                      <div class=\"info-text\">\n                        <h4 class=\"info-title\">{{ 'BabylaiTitle' | translate }}</h4>\n                        <p class=\"info-description\">{{ 'BabylaiDescription' | translate }}</p>\n                      </div>\n                    </div>\n                    <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleShowHelpScreenData()\">\n                      {{ 'ChatNow' | translate }}\n                    </app-button>\n                  </div>\n                </app-card-content>\n              </app-card>\n\n              <app-card variant=\"rounded\">\n                <app-card-content>\n                  <div class=\"action-card\">\n                    <p class=\"action-text\">{{ 'TryBableAI' | translate }}</p>\n                    <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n                      <svg\n                        width=\"100%\"\n                        height=\"100%\"\n                        [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\"\n                        viewBox=\"0 0 9 16\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <path\n                          d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n                          stroke=\"white\"\n                          stroke-width=\"1.5\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                        />\n                      </svg>\n                    </app-button>\n                  </div>\n                </app-card-content>\n              </app-card>\n\n              <app-card variant=\"rounded\">\n                <app-card-content>\n                  <div class=\"action-card\">\n                    <p class=\"action-text\">{{ 'ContactUs' | translate }}</p>\n                    <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n                      <svg\n                        width=\"100%\"\n                        height=\"100%\"\n                        [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\"\n                        viewBox=\"0 0 9 16\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <path\n                          d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n                          stroke=\"white\"\n                          stroke-width=\"1.5\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                        />\n                      </svg>\n                    </app-button>\n                  </div>\n                </app-card-content>\n              </app-card>\n            </div>\n          </ng-container>\n        }\n\n        <ng-container *ngIf=\"showHelpScreenData\">\n          <!-- <img src=\"/images/stars.svg\" alt=\"help-center-widget-icon\" class=\"stars\" /> -->\n          <svg class=\"stars\" viewBox=\"0 0 244 196\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g opacity=\"0.15\">\n              <path\n                d=\"M61.0903 66.4434C61.101 66.4056 61.1063 66.3867 61.1088 66.3779C62.7734 60.5407 71.046 60.5407 72.7106 66.3779C72.7131 66.3867 72.7184 66.4056 72.7291 66.4434C72.7572 66.5431 72.7712 66.5929 72.7845 66.6397C80.5193 93.9529 101.867 115.3 129.18 123.035C129.227 123.048 129.276 123.062 129.376 123.09C129.414 123.101 129.433 123.106 129.441 123.109C135.279 124.773 135.279 133.046 129.441 134.711C129.433 134.713 129.414 134.718 129.376 134.729C129.276 134.757 129.227 134.771 129.18 134.784C101.867 142.519 80.5193 163.867 72.7845 191.18C72.7712 191.227 72.7572 191.276 72.7291 191.376C72.7184 191.414 72.7131 191.433 72.7106 191.441C71.046 197.279 62.7734 197.279 61.1088 191.441C61.1063 191.433 61.101 191.414 61.0903 191.376C61.0622 191.276 61.0482 191.227 61.035 191.18C53.3002 163.867 31.9529 142.519 4.63971 134.784C4.59292 134.771 4.54309 134.757 4.44342 134.729C4.40559 134.718 4.38668 134.713 4.37792 134.711C-1.45931 133.046 -1.45931 124.773 4.37792 123.109C4.38668 123.106 4.40559 123.101 4.44342 123.09C4.54309 123.062 4.59292 123.048 4.63971 123.035C31.9529 115.3 53.3002 93.9529 61.035 66.6397C61.0482 66.5929 61.0622 66.5431 61.0903 66.4434Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M188.17 50.6848C188.179 50.6534 188.183 50.6377 188.185 50.6305C189.525 45.7898 196.183 45.7898 197.523 50.6305C197.525 50.6377 197.529 50.6534 197.538 50.6848C197.561 50.7674 197.572 50.8088 197.583 50.8476C203.808 73.4975 220.99 91.2002 242.974 97.6144C243.012 97.6253 243.052 97.637 243.132 97.6603C243.162 97.6691 243.178 97.6736 243.185 97.6756C247.883 99.056 247.883 105.916 243.185 107.297C243.178 107.299 243.162 107.303 243.132 107.312C243.052 107.335 243.012 107.347 242.974 107.358C220.99 113.772 203.808 131.475 197.583 154.125C197.572 154.163 197.561 154.205 197.538 154.287C197.529 154.319 197.525 154.334 197.523 154.342C196.183 159.182 189.525 159.182 188.185 154.342C188.183 154.334 188.179 154.319 188.17 154.287C188.148 154.205 188.136 154.163 188.126 154.125C181.9 131.475 164.718 113.772 142.734 107.358C142.697 107.347 142.657 107.335 142.576 107.312C142.546 107.303 142.531 107.299 142.524 107.297C137.825 105.916 137.825 99.056 142.524 97.6756C142.531 97.6736 142.546 97.6691 142.576 97.6603C142.657 97.637 142.697 97.6253 142.734 97.6144C164.718 91.2002 181.9 73.4975 188.126 50.8476C188.136 50.8088 188.148 50.7674 188.17 50.6848Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M127.131 -17.2906C127.138 -17.3137 127.143 -17.3305 127.143 -17.3305C128.198 -20.8898 133.444 -20.8898 134.5 -17.3305C134.5 -17.3305 134.505 -17.3137 134.512 -17.2906C134.529 -17.2298 134.538 -17.1994 134.547 -17.1709C139.452 -0.516516 152.989 12.5001 170.309 17.2164C170.339 17.2245 170.371 17.2331 170.434 17.2502C170.458 17.2567 170.476 17.2615 170.476 17.2615C174.177 18.2765 174.177 23.3208 170.476 24.3357C170.476 24.3357 170.458 24.3405 170.434 24.347C170.371 24.3642 170.339 24.3727 170.309 24.3808C152.989 29.0971 139.452 42.1138 134.547 58.7681C134.538 58.7967 134.529 58.8271 134.512 58.8878C134.505 58.9109 134.5 58.9278 134.5 58.9278C133.444 62.4871 128.198 62.4871 127.143 58.9278C127.143 58.9278 127.138 58.9109 127.131 58.8878C127.113 58.8271 127.104 58.7967 127.096 58.7681C122.191 42.1138 108.653 29.0971 91.3329 24.3808C91.3032 24.3727 91.2716 24.3642 91.2084 24.347C91.1844 24.3405 91.1669 24.3357 91.1669 24.3357C87.4652 23.3208 87.4652 18.2765 91.1669 17.2615C91.1669 17.2615 91.1844 17.2567 91.2084 17.2502C91.2716 17.2331 91.3032 17.2245 91.3329 17.2164C108.653 12.5001 122.191 -0.516516 127.096 -17.1709C127.104 -17.1994 127.113 -17.2298 127.131 -17.2906Z\"\n                fill=\"#AD49E1\"\n              />\n            </g>\n          </svg>\n\n          <app-help-screen-data [helpScreenData]=\"helpScreenData\" (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n        </ng-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"footer\">\n        <a href=\"https://babylai.net\" target=\"_blank\" class=\"footer-link\" [ngClass]=\"{ 'light-text': !showHelpScreenData && !showChat }\">\n          {{ 'PoweredByBabylAI' | translate }}\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.help-center-container{position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-end}.arrow-animation{position:fixed;bottom:5rem;right:1rem;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.arrow-animation .message-box{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;box-shadow:#64646f33 0 7px 29px;margin-bottom:1rem;max-width:200px;position:relative}.arrow-animation .message-box p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-8px;right:-8px;width:1.25rem;height:1.25rem;border-radius:9999px;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#171717;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:#451d5a;color:#fff}.arrow-animation .message-box .arrow-tip{position:absolute;bottom:-10px;right:1.25rem;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ad49e1}.help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:#ad49e1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:#451d5a;transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem}.help-popup{position:fixed;bottom:5rem;right:1.25rem;width:360px;height:calc(100vh - 12rem);max-height:800px;border-radius:1.5rem;box-shadow:#64646f33 0 7px 29px;display:flex;flex-direction:column;z-index:1000;background-color:#f3f3f3;overflow:hidden}.help-popup.is-open{width:360px}.help-popup.is-closed{width:60px}.help-popup.has-gradient{background:linear-gradient(to bottom,#ad49e1,#ad49e199)}.error-message{bottom:22.5rem;right:1.25rem;padding:1rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;height:100%;text-align:center;display:flex;align-items:center;justify-content:center}.chat-button{position:absolute;bottom:1.25rem;right:1.25rem;padding:.75rem!important}.chat-button--icon{padding:.25rem!important}.chat-container{height:100%;margin-top:.5rem;padding:.5rem;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:1rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;inset-inline-end:0;width:15.42rem;height:13.49rem;opacity:.5;z-index:-1}.intro-section{display:flex;flex-direction:column;gap:1rem}.intro-section .intro-title{font-size:3.75rem;font-weight:700;color:#fff;line-height:3.5rem}.cards-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;width:100%;box-sizing:border-box;padding:0}.cards-section app-card{width:100%;display:block}.cards-section app-card ::ng-deep .card{width:100%;box-sizing:border-box}.cards-section app-card ::ng-deep .card__content{width:100%;box-sizing:border-box}.card-content{display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box}.babylai-info{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;width:100%}.logo-container{display:flex;align-items:center;justify-content:center;max-width:3rem;min-width:3rem;width:3rem;height:3rem;border-radius:9999px;background-color:#ad49e1}.logo-container .logo{width:1.25rem;height:1.25rem}.info-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;flex:1}.info-text .info-title{font-size:1rem;color:#606060;font-weight:600}.info-text .info-description{font-size:1rem;color:#0a0a0a}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:#0a0a0a}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}.footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem}.footer .footer-link{font-size:.75rem;color:#919191;width:100%;text-align:center}.footer .footer-link.light-text{color:#fff}.icon-full{width:100%}\n", "@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}ul,ol{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;font-family:Cairo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}:root{--black-white-50: #ffffff;--black-white-100: #f3f3f3;--black-white-200: #e2e2e2;--black-white-300: #919191;--black-white-400: #606060;--black-white-500: #333333;--black-white-600: #1f1f1f;--black-white-700: #171717;--black-white-800: #0a0a0a;--black-white-900: #050505;--black-white-950: #000000;--black-white-default: #333333}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-accordion-down{animation:accordion-down .2s ease-out}.animate-accordion-up{animation:accordion-up .2s ease-out}.animate-float{animation:float 3s infinite ease-in-out}html,body{font-family:Cairo,sans-serif}div#wave{position:relative}div#wave .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;background:#ad49e1;animation:wave 1.3s linear infinite}div#wave .dot:nth-child(2){animation-delay:-1.1s}div#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "component", type: HelpScreenDataComponent, selector: "app-help-screen-data", inputs: ["helpScreenData", "title"], outputs: ["handleStartNewChat"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["headerType", "showBackButton", "showLogo", "logoSrc", "logoAlt", "language", "showCloseButton"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatHeaderComponent, selector: "app-chat-header", inputs: ["showBackButton", "showLogo", "logoSrc", "logoAlt", "language"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatComponent, selector: "app-chat", inputs: ["messages", "needsAgent", "assistantStatus", "isSignalRConnected", "isChatClosed", "currentLang", "loading"], outputs: ["sendMessageEvent"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["title", "body", "confirmText", "cancelText"], outputs: ["onConfirm", "onCancel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, deps: [{ token: ApiService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: "getToken", helpScreenId: "helpScreenId", showArrow: "showArrow", messageLabel: "messageLabel", currentLang: "currentLang", isIntroScreenEnabled: "isIntroScreenEnabled" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n  <!-- Arrow Animation -->\n  <div *ngIf=\"showArrowAnimation && !isPopupOpen\" class=\"arrow-animation\">\n    <div class=\"message-box\">\n      <p>\n        {{\n          messageLabel ||\n            \"Need assistance Or You want to try the Product? Click here\"\n        }}\n      </p>\n      <button class=\"close-button\" (click)=\"handleCloseArrowAnimation()\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n          <path\n            d=\"M1 1L11 11M1 11L11 1\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n          />\n        </svg>\n      </button>\n      <div class=\"arrow-tip\"></div>\n    </div>\n  </div>\n\n  <!-- Help Button -->\n  <button class=\"help-button\" (click)=\"handleTogglePopup()\">\n    <span class=\"help-button-content\">\n      <!-- <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"help-button-logo\" /> -->\n      <svg\n        class=\"help-button-logo\"\n        viewBox=\"0 0 55 53\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n          fill=\"#E5E5E5\"\n        />\n        <path\n          d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n          fill=\"#AD49E1\"\n        />\n        <path\n          d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n          fill=\"#AD49E1\"\n        />\n      </svg>\n    </span>\n  </button>\n\n  <!-- Help Popup -->\n  <div\n    *ngIf=\"isPopupOpen\"\n    class=\"help-popup\"\n    [ngClass]=\"{\n      'is-open': isPopupOpen,\n      'is-closed': !isPopupOpen,\n      'has-gradient': isPopupOpen && !showHelpScreenData && !showChat\n    }\"\n  >\n    <app-confirmation-dialog\n      *ngIf=\"showEndChatConfirmation\"\n      [title]=\"'LeavingDialogTitle' | translate\"\n      [body]=\"'LeavingDialogBody' | translate\"\n      [confirmText]=\"'Confirm' | translate\"\n      [cancelText]=\"'Cancel' | translate\"\n      (onConfirm)=\"confirmEndChat()\"\n      (onCancel)=\"cancelEndChat()\"\n    ></app-confirmation-dialog>\n\n    <!-- Loading State -->\n    <div *ngIf=\"status === 'loading'\" class=\"loading-state\">\n      <ng-container *ngIf=\"!showHelpScreenData\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData\">\n        <app-header\n          [showCloseButton]=\"!isIntroScreenEnabled\"\n          [showLogo]=\"false\"\n          (onClose)=\"\n            isIntroScreenEnabled\n              ? handleHideHelpScreenData()\n              : handleClosePopup()\n          \"\n          [language]=\"currentLang\"\n        ></app-header>\n      </ng-container>\n      <app-loading\n        [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"\n      ></app-loading>\n    </div>\n\n    <!-- Error State -->\n    <div *ngIf=\"status === 'failed'\" class=\"error-message\">\n      <span>Error: {{ error }}</span>\n    </div>\n\n    <!-- Content -->\n    <ng-container *ngIf=\"status === 'succeeded'\">\n      <!-- Headers -->\n      @if (isIntroScreenEnabled) {\n      <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n      </ng-container>\n      }\n\n      <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n        <app-header\n          [showCloseButton]=\"!isIntroScreenEnabled\"\n          [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n          [showLogo]=\"false\"\n          (onClose)=\"\n            isIntroScreenEnabled\n              ? handleHideHelpScreenData()\n              : handleClosePopup()\n          \"\n          (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n\n        <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n          <app-button\n            variant=\"icon-bg\"\n            (click)=\"handleShowChat()\"\n            class=\"chat-button\"\n            className=\"button--icon\"\n          >\n            <svg\n              class=\"icon-full\"\n              viewBox=\"0 0 25 25\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M17.5 3.83801C15.9806 2.95874 14.2555 2.49712 12.5 2.50001C6.977 2.50001 2.5 6.97701 2.5 12.5C2.5 14.1 2.876 15.612 3.543 16.953C3.721 17.309 3.78 17.716 3.677 18.101L3.082 20.327C3.02307 20.5473 3.02312 20.7792 3.08216 20.9995C3.14119 21.2198 3.25712 21.4206 3.41831 21.5819C3.57951 21.7432 3.7803 21.8593 4.00053 21.9184C4.22075 21.9776 4.45267 21.9778 4.673 21.919L6.899 21.323C7.28538 21.2254 7.69414 21.2727 8.048 21.456C9.43095 22.1446 10.9551 22.502 12.5 22.5C18.023 22.5 22.5 18.023 22.5 12.5C22.5 10.679 22.013 8.97001 21.162 7.50001\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              />\n              <path\n                d=\"M8.5 12.5H8.509M12.491 12.5H12.5M16.491 12.5H16.5\"\n                stroke=\"white\"\n                stroke-width=\"2.66667\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </app-button>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"showChat\">\n        <app-chat-header\n          [showBackButton]=\"showChat\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleEndChat()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        ></app-chat-header>\n\n        <app-chat\n          class=\"chat-container\"\n          [messages]=\"messages\"\n          [needsAgent]=\"needsAgent\"\n          [assistantStatus]=\"assistantStatus\"\n          [isAblyConnected]=\"isAblyConnected\"\n          [isChatClosed]=\"isChatClosed\"\n          (sendMessageEvent)=\"sendMessage($event)\"\n          [currentLang]=\"currentLang\"\n          [loading]=\"chatIsLoading\"\n        ></app-chat>\n      </ng-container>\n\n      <!-- Main Content -->\n      <div class=\"main-content\" *ngIf=\"!showChat\">\n        @if (isIntroScreenEnabled) {\n        <ng-container *ngIf=\"!showHelpScreenData\">\n          <div class=\"intro-section\">\n            <h1 class=\"intro-title\">{{ \"ChatIntroMessage\" | translate }}</h1>\n          </div>\n\n          <div class=\"cards-section\">\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"card-content\">\n                  <div class=\"babylai-info\">\n                    <div class=\"logo-container\">\n                      <svg\n                        class=\"logo\"\n                        viewBox=\"0 0 55 53\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <path\n                          d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n                          fill=\"#E5E5E5\"\n                        />\n                        <path\n                          d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n                          fill=\"white\"\n                        />\n                        <path\n                          d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n                          fill=\"#AD49E1\"\n                        />\n                        <path\n                          d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n                          fill=\"#AD49E1\"\n                        />\n                      </svg>\n                    </div>\n                    <div class=\"info-text\">\n                      <h4 class=\"info-title\">\n                        {{ \"BabylaiTitle\" | translate }}\n                      </h4>\n                      <p class=\"info-description\">\n                        {{ \"BabylaiDescription\" | translate }}\n                      </p>\n                    </div>\n                  </div>\n                  <app-button\n                    variant=\"default\"\n                    [fullWidth]=\"true\"\n                    (click)=\"handleShowHelpScreenData()\"\n                  >\n                    {{ \"ChatNow\" | translate }}\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"action-card\">\n                  <p class=\"action-text\">{{ \"TryBableAI\" | translate }}</p>\n                  <app-button\n                    variant=\"icon-bg\"\n                    (click)=\"navigateToUrl('https://babylai.net/signup')\"\n                  >\n                    <svg\n                      width=\"100%\"\n                      height=\"100%\"\n                      [ngClass]=\"{\n                        icon: true,\n                        'icon-rtl': currentLang === 'ar'\n                      }\"\n                      viewBox=\"0 0 9 16\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n                        stroke=\"white\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                      />\n                    </svg>\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"action-card\">\n                  <p class=\"action-text\">{{ \"ContactUs\" | translate }}</p>\n                  <app-button\n                    variant=\"icon-bg\"\n                    (click)=\"navigateToUrl('https://babylai.net')\"\n                  >\n                    <svg\n                      width=\"100%\"\n                      height=\"100%\"\n                      [ngClass]=\"{\n                        icon: true,\n                        'icon-rtl': currentLang === 'ar'\n                      }\"\n                      viewBox=\"0 0 9 16\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n                        stroke=\"white\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                      />\n                    </svg>\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n          </div>\n        </ng-container>\n        }\n\n        <ng-container *ngIf=\"showHelpScreenData\">\n          <!-- <img src=\"/images/stars.svg\" alt=\"help-center-widget-icon\" class=\"stars\" /> -->\n          <svg\n            class=\"stars\"\n            viewBox=\"0 0 244 196\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <g opacity=\"0.15\">\n              <path\n                d=\"M61.0903 66.4434C61.101 66.4056 61.1063 66.3867 61.1088 66.3779C62.7734 60.5407 71.046 60.5407 72.7106 66.3779C72.7131 66.3867 72.7184 66.4056 72.7291 66.4434C72.7572 66.5431 72.7712 66.5929 72.7845 66.6397C80.5193 93.9529 101.867 115.3 129.18 123.035C129.227 123.048 129.276 123.062 129.376 123.09C129.414 123.101 129.433 123.106 129.441 123.109C135.279 124.773 135.279 133.046 129.441 134.711C129.433 134.713 129.414 134.718 129.376 134.729C129.276 134.757 129.227 134.771 129.18 134.784C101.867 142.519 80.5193 163.867 72.7845 191.18C72.7712 191.227 72.7572 191.276 72.7291 191.376C72.7184 191.414 72.7131 191.433 72.7106 191.441C71.046 197.279 62.7734 197.279 61.1088 191.441C61.1063 191.433 61.101 191.414 61.0903 191.376C61.0622 191.276 61.0482 191.227 61.035 191.18C53.3002 163.867 31.9529 142.519 4.63971 134.784C4.59292 134.771 4.54309 134.757 4.44342 134.729C4.40559 134.718 4.38668 134.713 4.37792 134.711C-1.45931 133.046 -1.45931 124.773 4.37792 123.109C4.38668 123.106 4.40559 123.101 4.44342 123.09C4.54309 123.062 4.59292 123.048 4.63971 123.035C31.9529 115.3 53.3002 93.9529 61.035 66.6397C61.0482 66.5929 61.0622 66.5431 61.0903 66.4434Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M188.17 50.6848C188.179 50.6534 188.183 50.6377 188.185 50.6305C189.525 45.7898 196.183 45.7898 197.523 50.6305C197.525 50.6377 197.529 50.6534 197.538 50.6848C197.561 50.7674 197.572 50.8088 197.583 50.8476C203.808 73.4975 220.99 91.2002 242.974 97.6144C243.012 97.6253 243.052 97.637 243.132 97.6603C243.162 97.6691 243.178 97.6736 243.185 97.6756C247.883 99.056 247.883 105.916 243.185 107.297C243.178 107.299 243.162 107.303 243.132 107.312C243.052 107.335 243.012 107.347 242.974 107.358C220.99 113.772 203.808 131.475 197.583 154.125C197.572 154.163 197.561 154.205 197.538 154.287C197.529 154.319 197.525 154.334 197.523 154.342C196.183 159.182 189.525 159.182 188.185 154.342C188.183 154.334 188.179 154.319 188.17 154.287C188.148 154.205 188.136 154.163 188.126 154.125C181.9 131.475 164.718 113.772 142.734 107.358C142.697 107.347 142.657 107.335 142.576 107.312C142.546 107.303 142.531 107.299 142.524 107.297C137.825 105.916 137.825 99.056 142.524 97.6756C142.531 97.6736 142.546 97.6691 142.576 97.6603C142.657 97.637 142.697 97.6253 142.734 97.6144C164.718 91.2002 181.9 73.4975 188.126 50.8476C188.136 50.8088 188.148 50.7674 188.17 50.6848Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M127.131 -17.2906C127.138 -17.3137 127.143 -17.3305 127.143 -17.3305C128.198 -20.8898 133.444 -20.8898 134.5 -17.3305C134.5 -17.3305 134.505 -17.3137 134.512 -17.2906C134.529 -17.2298 134.538 -17.1994 134.547 -17.1709C139.452 -0.516516 152.989 12.5001 170.309 17.2164C170.339 17.2245 170.371 17.2331 170.434 17.2502C170.458 17.2567 170.476 17.2615 170.476 17.2615C174.177 18.2765 174.177 23.3208 170.476 24.3357C170.476 24.3357 170.458 24.3405 170.434 24.347C170.371 24.3642 170.339 24.3727 170.309 24.3808C152.989 29.0971 139.452 42.1138 134.547 58.7681C134.538 58.7967 134.529 58.8271 134.512 58.8878C134.505 58.9109 134.5 58.9278 134.5 58.9278C133.444 62.4871 128.198 62.4871 127.143 58.9278C127.143 58.9278 127.138 58.9109 127.131 58.8878C127.113 58.8271 127.104 58.7967 127.096 58.7681C122.191 42.1138 108.653 29.0971 91.3329 24.3808C91.3032 24.3727 91.2716 24.3642 91.2084 24.347C91.1844 24.3405 91.1669 24.3357 91.1669 24.3357C87.4652 23.3208 87.4652 18.2765 91.1669 17.2615C91.1669 17.2615 91.1844 17.2567 91.2084 17.2502C91.2716 17.2331 91.3032 17.2245 91.3329 17.2164C108.653 12.5001 122.191 -0.516516 127.096 -17.1709C127.104 -17.1994 127.113 -17.2298 127.131 -17.2906Z\"\n                fill=\"#AD49E1\"\n              />\n            </g>\n          </svg>\n\n          <app-help-screen-data\n            [helpScreenData]=\"helpScreenData\"\n            (handleStartNewChat)=\"handleStartNewChat($event)\"\n          ></app-help-screen-data>\n        </ng-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"footer\">\n        <a\n          href=\"https://babylai.net\"\n          target=\"_blank\"\n          class=\"footer-link\"\n          [ngClass]=\"{ 'light-text': !showHelpScreenData && !showChat }\"\n        >\n          {{ \"PoweredByBabylAI\" | translate }}\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.help-center-container{position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-end}.arrow-animation{position:fixed;bottom:5rem;right:1rem;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.arrow-animation .message-box{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;box-shadow:#64646f33 0 7px 29px;margin-bottom:1rem;max-width:200px;position:relative}.arrow-animation .message-box p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-8px;right:-8px;width:1.25rem;height:1.25rem;border-radius:9999px;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#171717;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:#451d5a;color:#fff}.arrow-animation .message-box .arrow-tip{position:absolute;bottom:-10px;right:1.25rem;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ad49e1}.help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:#ad49e1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:#451d5a;transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem}.help-popup{position:fixed;bottom:5rem;right:1.25rem;width:360px;height:calc(100vh - 12rem);max-height:800px;border-radius:1.5rem;box-shadow:#64646f33 0 7px 29px;display:flex;flex-direction:column;z-index:1000;background-color:#f3f3f3;overflow:hidden}.help-popup.is-open{width:360px}.help-popup.is-closed{width:60px}.help-popup.has-gradient{background:linear-gradient(to bottom,#ad49e1,#ad49e199)}.error-message{bottom:22.5rem;right:1.25rem;padding:1rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;height:100%;text-align:center;display:flex;align-items:center;justify-content:center}.chat-button{position:absolute;bottom:1.25rem;right:1.25rem;padding:.75rem!important}.chat-button--icon{padding:.25rem!important}.chat-container{height:100%;margin-top:.5rem;padding:.5rem;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:1rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;inset-inline-end:0;width:15.42rem;height:13.49rem;opacity:.5;z-index:-1}.intro-section{display:flex;flex-direction:column;gap:1rem}.intro-section .intro-title{font-size:3.75rem;font-weight:700;color:#fff;line-height:3.5rem}.cards-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;width:100%;box-sizing:border-box;padding:0}.cards-section app-card{width:100%;display:block}.cards-section app-card ::ng-deep .card{width:100%;box-sizing:border-box}.cards-section app-card ::ng-deep .card__content{width:100%;box-sizing:border-box}.card-content{display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box}.babylai-info{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;width:100%}.logo-container{display:flex;align-items:center;justify-content:center;max-width:3rem;min-width:3rem;width:3rem;height:3rem;border-radius:9999px;background-color:#ad49e1}.logo-container .logo{width:1.25rem;height:1.25rem}.info-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;flex:1}.info-text .info-title{font-size:1rem;color:#606060;font-weight:600}.info-text .info-description{font-size:1rem;color:#0a0a0a}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:#0a0a0a}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}.footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem}.footer .footer-link{font-size:.75rem;color:#919191;width:100%;text-align:center}.footer .footer-link.light-text{color:#fff}.icon-full{width:100%}\n", "@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}ul,ol{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;font-family:Cairo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}:root{--black-white-50: #ffffff;--black-white-100: #f3f3f3;--black-white-200: #e2e2e2;--black-white-300: #919191;--black-white-400: #606060;--black-white-500: #333333;--black-white-600: #1f1f1f;--black-white-700: #171717;--black-white-800: #0a0a0a;--black-white-900: #050505;--black-white-950: #000000;--black-white-default: #333333}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-accordion-down{animation:accordion-down .2s ease-out}.animate-accordion-up{animation:accordion-up .2s ease-out}.animate-float{animation:float 3s infinite ease-in-out}html,body{font-family:Cairo,sans-serif}div#wave{position:relative}div#wave .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;background:#ad49e1;animation:wave 1.3s linear infinite}div#wave .dot:nth-child(2){animation-delay:-1.1s}div#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "component", type: HelpScreenDataComponent, selector: "app-help-screen-data", inputs: ["helpScreenData", "title"], outputs: ["handleStartNewChat"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["headerType", "showBackButton", "showLogo", "logoSrc", "logoAlt", "language", "showCloseButton"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatHeaderComponent, selector: "app-chat-header", inputs: ["showBackButton", "showLogo", "logoSrc", "logoAlt", "language"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatComponent, selector: "app-chat", inputs: ["messages", "needsAgent", "assistantStatus", "isAblyConnected", "isChatClosed", "currentLang", "loading"], outputs: ["sendMessageEvent"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["title", "body", "confirmText", "cancelText"], outputs: ["onConfirm", "onCancel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, decorators: [{
             type: Component,
@@ -1476,9 +1524,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         ChatHeaderComponent,
                         ChatComponent,
                         LoadingComponent,
-                        ConfirmationDialogComponent
-                    ], template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n  <!-- Arrow Animation -->\n  <div *ngIf=\"showArrowAnimation && !isPopupOpen\" class=\"arrow-animation\">\n    <div class=\"message-box\">\n      <p>\n        {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n      </p>\n      <button class=\"close-button\" (click)=\"handleCloseArrowAnimation()\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n          <path d=\"M1 1L11 11M1 11L11 1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        </svg>\n      </button>\n      <div class=\"arrow-tip\"></div>\n    </div>\n  </div>\n\n  <!-- Help Button -->\n  <button class=\"help-button\" (click)=\"handleTogglePopup()\">\n    <span class=\"help-button-content\">\n      <!-- <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"help-button-logo\" /> -->\n      <svg class=\"help-button-logo\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n          fill=\"#E5E5E5\"\n        />\n        <path\n          d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n          fill=\"#AD49E1\"\n        />\n        <path\n          d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n          fill=\"#AD49E1\"\n        />\n      </svg>\n    </span>\n  </button>\n\n  <!-- Help Popup -->\n  <div\n    *ngIf=\"isPopupOpen\"\n    class=\"help-popup\"\n    [ngClass]=\"{\n      'is-open': isPopupOpen,\n      'is-closed': !isPopupOpen,\n      'has-gradient': isPopupOpen && !showHelpScreenData && !showChat\n    }\"\n  >\n    <app-confirmation-dialog\n      *ngIf=\"showEndChatConfirmation\"\n      [title]=\"'LeavingDialogTitle' | translate\"\n      [body]=\"'LeavingDialogBody' | translate\"\n      [confirmText]=\"'Confirm' | translate\"\n      [cancelText]=\"'Cancel' | translate\"\n      (onConfirm)=\"confirmEndChat()\"\n      (onCancel)=\"cancelEndChat()\"\n    ></app-confirmation-dialog>\n\n    <!-- Loading State -->\n    <div *ngIf=\"status === 'loading'\" class=\"loading-state\">\n      <ng-container *ngIf=\"!showHelpScreenData\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData\">\n        <app-header\n          [showCloseButton]=\"!isIntroScreenEnabled\"\n          [showLogo]=\"false\"\n          (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n      </ng-container>\n      <app-loading [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"></app-loading>\n    </div>\n\n    <!-- Error State -->\n    <div *ngIf=\"status === 'failed'\" class=\"error-message\">\n      <span>Error: {{ error }}</span>\n    </div>\n\n    <!-- Content -->\n    <ng-container *ngIf=\"status === 'succeeded'\">\n      <!-- Headers -->\n      @if (isIntroScreenEnabled) {\n        <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n          <app-header\n            [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n            [showLogo]=\"true\"\n            (onBack)=\"handleBack()\"\n            (onClose)=\"handleClosePopup()\"\n            [language]=\"currentLang\"\n          ></app-header>\n        </ng-container>\n      }\n\n      <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n        <app-header\n          [showCloseButton]=\"!isIntroScreenEnabled\"\n          [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n          [showLogo]=\"false\"\n          (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n          (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n\n        <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n          <app-button variant=\"icon-bg\" (click)=\"handleShowChat()\" class=\"chat-button\" className=\"button--icon\">\n            <svg class=\"icon-full\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M17.5 3.83801C15.9806 2.95874 14.2555 2.49712 12.5 2.50001C6.977 2.50001 2.5 6.97701 2.5 12.5C2.5 14.1 2.876 15.612 3.543 16.953C3.721 17.309 3.78 17.716 3.677 18.101L3.082 20.327C3.02307 20.5473 3.02312 20.7792 3.08216 20.9995C3.14119 21.2198 3.25712 21.4206 3.41831 21.5819C3.57951 21.7432 3.7803 21.8593 4.00053 21.9184C4.22075 21.9776 4.45267 21.9778 4.673 21.919L6.899 21.323C7.28538 21.2254 7.69414 21.2727 8.048 21.456C9.43095 22.1446 10.9551 22.502 12.5 22.5C18.023 22.5 22.5 18.023 22.5 12.5C22.5 10.679 22.013 8.97001 21.162 7.50001\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              />\n              <path\n                d=\"M8.5 12.5H8.509M12.491 12.5H12.5M16.491 12.5H16.5\"\n                stroke=\"white\"\n                stroke-width=\"2.66667\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </app-button>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"showChat\">\n        <app-chat-header\n          [showBackButton]=\"showChat\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleEndChat()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        ></app-chat-header>\n\n        <app-chat\n          class=\"chat-container\"\n          [messages]=\"messages\"\n          [needsAgent]=\"needsAgent\"\n          [assistantStatus]=\"assistantStatus\"\n          [isSignalRConnected]=\"isSignalRConnected\"\n          [isChatClosed]=\"isChatClosed\"\n          (sendMessageEvent)=\"sendMessage($event)\"\n          [currentLang]=\"currentLang\"\n          [loading]=\"chatIsLoading\"\n        ></app-chat>\n      </ng-container>\n\n      <!-- Main Content -->\n      <div class=\"main-content\" *ngIf=\"!showChat\">\n        @if (isIntroScreenEnabled) {\n          <ng-container *ngIf=\"!showHelpScreenData\">\n            <div class=\"intro-section\">\n              <h1 class=\"intro-title\">{{ 'ChatIntroMessage' | translate }}</h1>\n            </div>\n\n            <div class=\"cards-section\">\n              <app-card variant=\"rounded\">\n                <app-card-content>\n                  <div class=\"card-content\">\n                    <div class=\"babylai-info\">\n                      <div class=\"logo-container\">\n                        <svg class=\"logo\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path\n                            d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n                            fill=\"#E5E5E5\"\n                          />\n                          <path\n                            d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n                            fill=\"white\"\n                          />\n                          <path\n                            d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n                            fill=\"#AD49E1\"\n                          />\n                          <path\n                            d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n                            fill=\"#AD49E1\"\n                          />\n                        </svg>\n                      </div>\n                      <div class=\"info-text\">\n                        <h4 class=\"info-title\">{{ 'BabylaiTitle' | translate }}</h4>\n                        <p class=\"info-description\">{{ 'BabylaiDescription' | translate }}</p>\n                      </div>\n                    </div>\n                    <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleShowHelpScreenData()\">\n                      {{ 'ChatNow' | translate }}\n                    </app-button>\n                  </div>\n                </app-card-content>\n              </app-card>\n\n              <app-card variant=\"rounded\">\n                <app-card-content>\n                  <div class=\"action-card\">\n                    <p class=\"action-text\">{{ 'TryBableAI' | translate }}</p>\n                    <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n                      <svg\n                        width=\"100%\"\n                        height=\"100%\"\n                        [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\"\n                        viewBox=\"0 0 9 16\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <path\n                          d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n                          stroke=\"white\"\n                          stroke-width=\"1.5\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                        />\n                      </svg>\n                    </app-button>\n                  </div>\n                </app-card-content>\n              </app-card>\n\n              <app-card variant=\"rounded\">\n                <app-card-content>\n                  <div class=\"action-card\">\n                    <p class=\"action-text\">{{ 'ContactUs' | translate }}</p>\n                    <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n                      <svg\n                        width=\"100%\"\n                        height=\"100%\"\n                        [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\"\n                        viewBox=\"0 0 9 16\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <path\n                          d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n                          stroke=\"white\"\n                          stroke-width=\"1.5\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                        />\n                      </svg>\n                    </app-button>\n                  </div>\n                </app-card-content>\n              </app-card>\n            </div>\n          </ng-container>\n        }\n\n        <ng-container *ngIf=\"showHelpScreenData\">\n          <!-- <img src=\"/images/stars.svg\" alt=\"help-center-widget-icon\" class=\"stars\" /> -->\n          <svg class=\"stars\" viewBox=\"0 0 244 196\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g opacity=\"0.15\">\n              <path\n                d=\"M61.0903 66.4434C61.101 66.4056 61.1063 66.3867 61.1088 66.3779C62.7734 60.5407 71.046 60.5407 72.7106 66.3779C72.7131 66.3867 72.7184 66.4056 72.7291 66.4434C72.7572 66.5431 72.7712 66.5929 72.7845 66.6397C80.5193 93.9529 101.867 115.3 129.18 123.035C129.227 123.048 129.276 123.062 129.376 123.09C129.414 123.101 129.433 123.106 129.441 123.109C135.279 124.773 135.279 133.046 129.441 134.711C129.433 134.713 129.414 134.718 129.376 134.729C129.276 134.757 129.227 134.771 129.18 134.784C101.867 142.519 80.5193 163.867 72.7845 191.18C72.7712 191.227 72.7572 191.276 72.7291 191.376C72.7184 191.414 72.7131 191.433 72.7106 191.441C71.046 197.279 62.7734 197.279 61.1088 191.441C61.1063 191.433 61.101 191.414 61.0903 191.376C61.0622 191.276 61.0482 191.227 61.035 191.18C53.3002 163.867 31.9529 142.519 4.63971 134.784C4.59292 134.771 4.54309 134.757 4.44342 134.729C4.40559 134.718 4.38668 134.713 4.37792 134.711C-1.45931 133.046 -1.45931 124.773 4.37792 123.109C4.38668 123.106 4.40559 123.101 4.44342 123.09C4.54309 123.062 4.59292 123.048 4.63971 123.035C31.9529 115.3 53.3002 93.9529 61.035 66.6397C61.0482 66.5929 61.0622 66.5431 61.0903 66.4434Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M188.17 50.6848C188.179 50.6534 188.183 50.6377 188.185 50.6305C189.525 45.7898 196.183 45.7898 197.523 50.6305C197.525 50.6377 197.529 50.6534 197.538 50.6848C197.561 50.7674 197.572 50.8088 197.583 50.8476C203.808 73.4975 220.99 91.2002 242.974 97.6144C243.012 97.6253 243.052 97.637 243.132 97.6603C243.162 97.6691 243.178 97.6736 243.185 97.6756C247.883 99.056 247.883 105.916 243.185 107.297C243.178 107.299 243.162 107.303 243.132 107.312C243.052 107.335 243.012 107.347 242.974 107.358C220.99 113.772 203.808 131.475 197.583 154.125C197.572 154.163 197.561 154.205 197.538 154.287C197.529 154.319 197.525 154.334 197.523 154.342C196.183 159.182 189.525 159.182 188.185 154.342C188.183 154.334 188.179 154.319 188.17 154.287C188.148 154.205 188.136 154.163 188.126 154.125C181.9 131.475 164.718 113.772 142.734 107.358C142.697 107.347 142.657 107.335 142.576 107.312C142.546 107.303 142.531 107.299 142.524 107.297C137.825 105.916 137.825 99.056 142.524 97.6756C142.531 97.6736 142.546 97.6691 142.576 97.6603C142.657 97.637 142.697 97.6253 142.734 97.6144C164.718 91.2002 181.9 73.4975 188.126 50.8476C188.136 50.8088 188.148 50.7674 188.17 50.6848Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M127.131 -17.2906C127.138 -17.3137 127.143 -17.3305 127.143 -17.3305C128.198 -20.8898 133.444 -20.8898 134.5 -17.3305C134.5 -17.3305 134.505 -17.3137 134.512 -17.2906C134.529 -17.2298 134.538 -17.1994 134.547 -17.1709C139.452 -0.516516 152.989 12.5001 170.309 17.2164C170.339 17.2245 170.371 17.2331 170.434 17.2502C170.458 17.2567 170.476 17.2615 170.476 17.2615C174.177 18.2765 174.177 23.3208 170.476 24.3357C170.476 24.3357 170.458 24.3405 170.434 24.347C170.371 24.3642 170.339 24.3727 170.309 24.3808C152.989 29.0971 139.452 42.1138 134.547 58.7681C134.538 58.7967 134.529 58.8271 134.512 58.8878C134.505 58.9109 134.5 58.9278 134.5 58.9278C133.444 62.4871 128.198 62.4871 127.143 58.9278C127.143 58.9278 127.138 58.9109 127.131 58.8878C127.113 58.8271 127.104 58.7967 127.096 58.7681C122.191 42.1138 108.653 29.0971 91.3329 24.3808C91.3032 24.3727 91.2716 24.3642 91.2084 24.347C91.1844 24.3405 91.1669 24.3357 91.1669 24.3357C87.4652 23.3208 87.4652 18.2765 91.1669 17.2615C91.1669 17.2615 91.1844 17.2567 91.2084 17.2502C91.2716 17.2331 91.3032 17.2245 91.3329 17.2164C108.653 12.5001 122.191 -0.516516 127.096 -17.1709C127.104 -17.1994 127.113 -17.2298 127.131 -17.2906Z\"\n                fill=\"#AD49E1\"\n              />\n            </g>\n          </svg>\n\n          <app-help-screen-data [helpScreenData]=\"helpScreenData\" (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n        </ng-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"footer\">\n        <a href=\"https://babylai.net\" target=\"_blank\" class=\"footer-link\" [ngClass]=\"{ 'light-text': !showHelpScreenData && !showChat }\">\n          {{ 'PoweredByBabylAI' | translate }}\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.help-center-container{position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-end}.arrow-animation{position:fixed;bottom:5rem;right:1rem;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.arrow-animation .message-box{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;box-shadow:#64646f33 0 7px 29px;margin-bottom:1rem;max-width:200px;position:relative}.arrow-animation .message-box p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-8px;right:-8px;width:1.25rem;height:1.25rem;border-radius:9999px;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#171717;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:#451d5a;color:#fff}.arrow-animation .message-box .arrow-tip{position:absolute;bottom:-10px;right:1.25rem;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ad49e1}.help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:#ad49e1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:#451d5a;transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem}.help-popup{position:fixed;bottom:5rem;right:1.25rem;width:360px;height:calc(100vh - 12rem);max-height:800px;border-radius:1.5rem;box-shadow:#64646f33 0 7px 29px;display:flex;flex-direction:column;z-index:1000;background-color:#f3f3f3;overflow:hidden}.help-popup.is-open{width:360px}.help-popup.is-closed{width:60px}.help-popup.has-gradient{background:linear-gradient(to bottom,#ad49e1,#ad49e199)}.error-message{bottom:22.5rem;right:1.25rem;padding:1rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;height:100%;text-align:center;display:flex;align-items:center;justify-content:center}.chat-button{position:absolute;bottom:1.25rem;right:1.25rem;padding:.75rem!important}.chat-button--icon{padding:.25rem!important}.chat-container{height:100%;margin-top:.5rem;padding:.5rem;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:1rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;inset-inline-end:0;width:15.42rem;height:13.49rem;opacity:.5;z-index:-1}.intro-section{display:flex;flex-direction:column;gap:1rem}.intro-section .intro-title{font-size:3.75rem;font-weight:700;color:#fff;line-height:3.5rem}.cards-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;width:100%;box-sizing:border-box;padding:0}.cards-section app-card{width:100%;display:block}.cards-section app-card ::ng-deep .card{width:100%;box-sizing:border-box}.cards-section app-card ::ng-deep .card__content{width:100%;box-sizing:border-box}.card-content{display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box}.babylai-info{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;width:100%}.logo-container{display:flex;align-items:center;justify-content:center;max-width:3rem;min-width:3rem;width:3rem;height:3rem;border-radius:9999px;background-color:#ad49e1}.logo-container .logo{width:1.25rem;height:1.25rem}.info-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;flex:1}.info-text .info-title{font-size:1rem;color:#606060;font-weight:600}.info-text .info-description{font-size:1rem;color:#0a0a0a}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:#0a0a0a}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}.footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem}.footer .footer-link{font-size:.75rem;color:#919191;width:100%;text-align:center}.footer .footer-link.light-text{color:#fff}.icon-full{width:100%}\n", "@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}ul,ol{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;font-family:Cairo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}:root{--black-white-50: #ffffff;--black-white-100: #f3f3f3;--black-white-200: #e2e2e2;--black-white-300: #919191;--black-white-400: #606060;--black-white-500: #333333;--black-white-600: #1f1f1f;--black-white-700: #171717;--black-white-800: #0a0a0a;--black-white-900: #050505;--black-white-950: #000000;--black-white-default: #333333}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-accordion-down{animation:accordion-down .2s ease-out}.animate-accordion-up{animation:accordion-up .2s ease-out}.animate-float{animation:float 3s infinite ease-in-out}html,body{font-family:Cairo,sans-serif}div#wave{position:relative}div#wave .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;background:#ad49e1;animation:wave 1.3s linear infinite}div#wave .dot:nth-child(2){animation-delay:-1.1s}div#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"] }]
-        }], ctorParameters: () => [{ type: ApiService }, { type: SignalRService }, { type: TranslationService }, { type: HelpCenterConfigService }], propDecorators: { getToken: [{
+                        ConfirmationDialogComponent,
+                    ], template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n  <!-- Arrow Animation -->\n  <div *ngIf=\"showArrowAnimation && !isPopupOpen\" class=\"arrow-animation\">\n    <div class=\"message-box\">\n      <p>\n        {{\n          messageLabel ||\n            \"Need assistance Or You want to try the Product? Click here\"\n        }}\n      </p>\n      <button class=\"close-button\" (click)=\"handleCloseArrowAnimation()\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n          <path\n            d=\"M1 1L11 11M1 11L11 1\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n          />\n        </svg>\n      </button>\n      <div class=\"arrow-tip\"></div>\n    </div>\n  </div>\n\n  <!-- Help Button -->\n  <button class=\"help-button\" (click)=\"handleTogglePopup()\">\n    <span class=\"help-button-content\">\n      <!-- <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"help-button-logo\" /> -->\n      <svg\n        class=\"help-button-logo\"\n        viewBox=\"0 0 55 53\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n          fill=\"#E5E5E5\"\n        />\n        <path\n          d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n          fill=\"#AD49E1\"\n        />\n        <path\n          d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n          fill=\"#AD49E1\"\n        />\n      </svg>\n    </span>\n  </button>\n\n  <!-- Help Popup -->\n  <div\n    *ngIf=\"isPopupOpen\"\n    class=\"help-popup\"\n    [ngClass]=\"{\n      'is-open': isPopupOpen,\n      'is-closed': !isPopupOpen,\n      'has-gradient': isPopupOpen && !showHelpScreenData && !showChat\n    }\"\n  >\n    <app-confirmation-dialog\n      *ngIf=\"showEndChatConfirmation\"\n      [title]=\"'LeavingDialogTitle' | translate\"\n      [body]=\"'LeavingDialogBody' | translate\"\n      [confirmText]=\"'Confirm' | translate\"\n      [cancelText]=\"'Cancel' | translate\"\n      (onConfirm)=\"confirmEndChat()\"\n      (onCancel)=\"cancelEndChat()\"\n    ></app-confirmation-dialog>\n\n    <!-- Loading State -->\n    <div *ngIf=\"status === 'loading'\" class=\"loading-state\">\n      <ng-container *ngIf=\"!showHelpScreenData\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData\">\n        <app-header\n          [showCloseButton]=\"!isIntroScreenEnabled\"\n          [showLogo]=\"false\"\n          (onClose)=\"\n            isIntroScreenEnabled\n              ? handleHideHelpScreenData()\n              : handleClosePopup()\n          \"\n          [language]=\"currentLang\"\n        ></app-header>\n      </ng-container>\n      <app-loading\n        [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"\n      ></app-loading>\n    </div>\n\n    <!-- Error State -->\n    <div *ngIf=\"status === 'failed'\" class=\"error-message\">\n      <span>Error: {{ error }}</span>\n    </div>\n\n    <!-- Content -->\n    <ng-container *ngIf=\"status === 'succeeded'\">\n      <!-- Headers -->\n      @if (isIntroScreenEnabled) {\n      <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n      </ng-container>\n      }\n\n      <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n        <app-header\n          [showCloseButton]=\"!isIntroScreenEnabled\"\n          [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n          [showLogo]=\"false\"\n          (onClose)=\"\n            isIntroScreenEnabled\n              ? handleHideHelpScreenData()\n              : handleClosePopup()\n          \"\n          (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n          [language]=\"currentLang\"\n        ></app-header>\n\n        <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n          <app-button\n            variant=\"icon-bg\"\n            (click)=\"handleShowChat()\"\n            class=\"chat-button\"\n            className=\"button--icon\"\n          >\n            <svg\n              class=\"icon-full\"\n              viewBox=\"0 0 25 25\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M17.5 3.83801C15.9806 2.95874 14.2555 2.49712 12.5 2.50001C6.977 2.50001 2.5 6.97701 2.5 12.5C2.5 14.1 2.876 15.612 3.543 16.953C3.721 17.309 3.78 17.716 3.677 18.101L3.082 20.327C3.02307 20.5473 3.02312 20.7792 3.08216 20.9995C3.14119 21.2198 3.25712 21.4206 3.41831 21.5819C3.57951 21.7432 3.7803 21.8593 4.00053 21.9184C4.22075 21.9776 4.45267 21.9778 4.673 21.919L6.899 21.323C7.28538 21.2254 7.69414 21.2727 8.048 21.456C9.43095 22.1446 10.9551 22.502 12.5 22.5C18.023 22.5 22.5 18.023 22.5 12.5C22.5 10.679 22.013 8.97001 21.162 7.50001\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              />\n              <path\n                d=\"M8.5 12.5H8.509M12.491 12.5H12.5M16.491 12.5H16.5\"\n                stroke=\"white\"\n                stroke-width=\"2.66667\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </app-button>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"showChat\">\n        <app-chat-header\n          [showBackButton]=\"showChat\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleEndChat()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        ></app-chat-header>\n\n        <app-chat\n          class=\"chat-container\"\n          [messages]=\"messages\"\n          [needsAgent]=\"needsAgent\"\n          [assistantStatus]=\"assistantStatus\"\n          [isAblyConnected]=\"isAblyConnected\"\n          [isChatClosed]=\"isChatClosed\"\n          (sendMessageEvent)=\"sendMessage($event)\"\n          [currentLang]=\"currentLang\"\n          [loading]=\"chatIsLoading\"\n        ></app-chat>\n      </ng-container>\n\n      <!-- Main Content -->\n      <div class=\"main-content\" *ngIf=\"!showChat\">\n        @if (isIntroScreenEnabled) {\n        <ng-container *ngIf=\"!showHelpScreenData\">\n          <div class=\"intro-section\">\n            <h1 class=\"intro-title\">{{ \"ChatIntroMessage\" | translate }}</h1>\n          </div>\n\n          <div class=\"cards-section\">\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"card-content\">\n                  <div class=\"babylai-info\">\n                    <div class=\"logo-container\">\n                      <svg\n                        class=\"logo\"\n                        viewBox=\"0 0 55 53\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <path\n                          d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n                          fill=\"#E5E5E5\"\n                        />\n                        <path\n                          d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n                          fill=\"white\"\n                        />\n                        <path\n                          d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n                          fill=\"#AD49E1\"\n                        />\n                        <path\n                          d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n                          fill=\"#AD49E1\"\n                        />\n                      </svg>\n                    </div>\n                    <div class=\"info-text\">\n                      <h4 class=\"info-title\">\n                        {{ \"BabylaiTitle\" | translate }}\n                      </h4>\n                      <p class=\"info-description\">\n                        {{ \"BabylaiDescription\" | translate }}\n                      </p>\n                    </div>\n                  </div>\n                  <app-button\n                    variant=\"default\"\n                    [fullWidth]=\"true\"\n                    (click)=\"handleShowHelpScreenData()\"\n                  >\n                    {{ \"ChatNow\" | translate }}\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"action-card\">\n                  <p class=\"action-text\">{{ \"TryBableAI\" | translate }}</p>\n                  <app-button\n                    variant=\"icon-bg\"\n                    (click)=\"navigateToUrl('https://babylai.net/signup')\"\n                  >\n                    <svg\n                      width=\"100%\"\n                      height=\"100%\"\n                      [ngClass]=\"{\n                        icon: true,\n                        'icon-rtl': currentLang === 'ar'\n                      }\"\n                      viewBox=\"0 0 9 16\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n                        stroke=\"white\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                      />\n                    </svg>\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"action-card\">\n                  <p class=\"action-text\">{{ \"ContactUs\" | translate }}</p>\n                  <app-button\n                    variant=\"icon-bg\"\n                    (click)=\"navigateToUrl('https://babylai.net')\"\n                  >\n                    <svg\n                      width=\"100%\"\n                      height=\"100%\"\n                      [ngClass]=\"{\n                        icon: true,\n                        'icon-rtl': currentLang === 'ar'\n                      }\"\n                      viewBox=\"0 0 9 16\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n                        stroke=\"white\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                      />\n                    </svg>\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n          </div>\n        </ng-container>\n        }\n\n        <ng-container *ngIf=\"showHelpScreenData\">\n          <!-- <img src=\"/images/stars.svg\" alt=\"help-center-widget-icon\" class=\"stars\" /> -->\n          <svg\n            class=\"stars\"\n            viewBox=\"0 0 244 196\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <g opacity=\"0.15\">\n              <path\n                d=\"M61.0903 66.4434C61.101 66.4056 61.1063 66.3867 61.1088 66.3779C62.7734 60.5407 71.046 60.5407 72.7106 66.3779C72.7131 66.3867 72.7184 66.4056 72.7291 66.4434C72.7572 66.5431 72.7712 66.5929 72.7845 66.6397C80.5193 93.9529 101.867 115.3 129.18 123.035C129.227 123.048 129.276 123.062 129.376 123.09C129.414 123.101 129.433 123.106 129.441 123.109C135.279 124.773 135.279 133.046 129.441 134.711C129.433 134.713 129.414 134.718 129.376 134.729C129.276 134.757 129.227 134.771 129.18 134.784C101.867 142.519 80.5193 163.867 72.7845 191.18C72.7712 191.227 72.7572 191.276 72.7291 191.376C72.7184 191.414 72.7131 191.433 72.7106 191.441C71.046 197.279 62.7734 197.279 61.1088 191.441C61.1063 191.433 61.101 191.414 61.0903 191.376C61.0622 191.276 61.0482 191.227 61.035 191.18C53.3002 163.867 31.9529 142.519 4.63971 134.784C4.59292 134.771 4.54309 134.757 4.44342 134.729C4.40559 134.718 4.38668 134.713 4.37792 134.711C-1.45931 133.046 -1.45931 124.773 4.37792 123.109C4.38668 123.106 4.40559 123.101 4.44342 123.09C4.54309 123.062 4.59292 123.048 4.63971 123.035C31.9529 115.3 53.3002 93.9529 61.035 66.6397C61.0482 66.5929 61.0622 66.5431 61.0903 66.4434Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M188.17 50.6848C188.179 50.6534 188.183 50.6377 188.185 50.6305C189.525 45.7898 196.183 45.7898 197.523 50.6305C197.525 50.6377 197.529 50.6534 197.538 50.6848C197.561 50.7674 197.572 50.8088 197.583 50.8476C203.808 73.4975 220.99 91.2002 242.974 97.6144C243.012 97.6253 243.052 97.637 243.132 97.6603C243.162 97.6691 243.178 97.6736 243.185 97.6756C247.883 99.056 247.883 105.916 243.185 107.297C243.178 107.299 243.162 107.303 243.132 107.312C243.052 107.335 243.012 107.347 242.974 107.358C220.99 113.772 203.808 131.475 197.583 154.125C197.572 154.163 197.561 154.205 197.538 154.287C197.529 154.319 197.525 154.334 197.523 154.342C196.183 159.182 189.525 159.182 188.185 154.342C188.183 154.334 188.179 154.319 188.17 154.287C188.148 154.205 188.136 154.163 188.126 154.125C181.9 131.475 164.718 113.772 142.734 107.358C142.697 107.347 142.657 107.335 142.576 107.312C142.546 107.303 142.531 107.299 142.524 107.297C137.825 105.916 137.825 99.056 142.524 97.6756C142.531 97.6736 142.546 97.6691 142.576 97.6603C142.657 97.637 142.697 97.6253 142.734 97.6144C164.718 91.2002 181.9 73.4975 188.126 50.8476C188.136 50.8088 188.148 50.7674 188.17 50.6848Z\"\n                fill=\"#AD49E1\"\n              />\n              <path\n                d=\"M127.131 -17.2906C127.138 -17.3137 127.143 -17.3305 127.143 -17.3305C128.198 -20.8898 133.444 -20.8898 134.5 -17.3305C134.5 -17.3305 134.505 -17.3137 134.512 -17.2906C134.529 -17.2298 134.538 -17.1994 134.547 -17.1709C139.452 -0.516516 152.989 12.5001 170.309 17.2164C170.339 17.2245 170.371 17.2331 170.434 17.2502C170.458 17.2567 170.476 17.2615 170.476 17.2615C174.177 18.2765 174.177 23.3208 170.476 24.3357C170.476 24.3357 170.458 24.3405 170.434 24.347C170.371 24.3642 170.339 24.3727 170.309 24.3808C152.989 29.0971 139.452 42.1138 134.547 58.7681C134.538 58.7967 134.529 58.8271 134.512 58.8878C134.505 58.9109 134.5 58.9278 134.5 58.9278C133.444 62.4871 128.198 62.4871 127.143 58.9278C127.143 58.9278 127.138 58.9109 127.131 58.8878C127.113 58.8271 127.104 58.7967 127.096 58.7681C122.191 42.1138 108.653 29.0971 91.3329 24.3808C91.3032 24.3727 91.2716 24.3642 91.2084 24.347C91.1844 24.3405 91.1669 24.3357 91.1669 24.3357C87.4652 23.3208 87.4652 18.2765 91.1669 17.2615C91.1669 17.2615 91.1844 17.2567 91.2084 17.2502C91.2716 17.2331 91.3032 17.2245 91.3329 17.2164C108.653 12.5001 122.191 -0.516516 127.096 -17.1709C127.104 -17.1994 127.113 -17.2298 127.131 -17.2906Z\"\n                fill=\"#AD49E1\"\n              />\n            </g>\n          </svg>\n\n          <app-help-screen-data\n            [helpScreenData]=\"helpScreenData\"\n            (handleStartNewChat)=\"handleStartNewChat($event)\"\n          ></app-help-screen-data>\n        </ng-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"footer\">\n        <a\n          href=\"https://babylai.net\"\n          target=\"_blank\"\n          class=\"footer-link\"\n          [ngClass]=\"{ 'light-text': !showHelpScreenData && !showChat }\"\n        >\n          {{ \"PoweredByBabylAI\" | translate }}\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.help-center-container{position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-end}.arrow-animation{position:fixed;bottom:5rem;right:1rem;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.arrow-animation .message-box{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;box-shadow:#64646f33 0 7px 29px;margin-bottom:1rem;max-width:200px;position:relative}.arrow-animation .message-box p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-8px;right:-8px;width:1.25rem;height:1.25rem;border-radius:9999px;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#171717;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:#451d5a;color:#fff}.arrow-animation .message-box .arrow-tip{position:absolute;bottom:-10px;right:1.25rem;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ad49e1}.help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:#ad49e1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:#451d5a;transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem}.help-popup{position:fixed;bottom:5rem;right:1.25rem;width:360px;height:calc(100vh - 12rem);max-height:800px;border-radius:1.5rem;box-shadow:#64646f33 0 7px 29px;display:flex;flex-direction:column;z-index:1000;background-color:#f3f3f3;overflow:hidden}.help-popup.is-open{width:360px}.help-popup.is-closed{width:60px}.help-popup.has-gradient{background:linear-gradient(to bottom,#ad49e1,#ad49e199)}.error-message{bottom:22.5rem;right:1.25rem;padding:1rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;height:100%;text-align:center;display:flex;align-items:center;justify-content:center}.chat-button{position:absolute;bottom:1.25rem;right:1.25rem;padding:.75rem!important}.chat-button--icon{padding:.25rem!important}.chat-container{height:100%;margin-top:.5rem;padding:.5rem;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:1rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;inset-inline-end:0;width:15.42rem;height:13.49rem;opacity:.5;z-index:-1}.intro-section{display:flex;flex-direction:column;gap:1rem}.intro-section .intro-title{font-size:3.75rem;font-weight:700;color:#fff;line-height:3.5rem}.cards-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;width:100%;box-sizing:border-box;padding:0}.cards-section app-card{width:100%;display:block}.cards-section app-card ::ng-deep .card{width:100%;box-sizing:border-box}.cards-section app-card ::ng-deep .card__content{width:100%;box-sizing:border-box}.card-content{display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box}.babylai-info{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;width:100%}.logo-container{display:flex;align-items:center;justify-content:center;max-width:3rem;min-width:3rem;width:3rem;height:3rem;border-radius:9999px;background-color:#ad49e1}.logo-container .logo{width:1.25rem;height:1.25rem}.info-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;flex:1}.info-text .info-title{font-size:1rem;color:#606060;font-weight:600}.info-text .info-description{font-size:1rem;color:#0a0a0a}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:#0a0a0a}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}.footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem}.footer .footer-link{font-size:.75rem;color:#919191;width:100%;text-align:center}.footer .footer-link.light-text{color:#fff}.icon-full{width:100%}\n", "@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}ul,ol{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;font-family:Cairo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}:root{--black-white-50: #ffffff;--black-white-100: #f3f3f3;--black-white-200: #e2e2e2;--black-white-300: #919191;--black-white-400: #606060;--black-white-500: #333333;--black-white-600: #1f1f1f;--black-white-700: #171717;--black-white-800: #0a0a0a;--black-white-900: #050505;--black-white-950: #000000;--black-white-default: #333333}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-accordion-down{animation:accordion-down .2s ease-out}.animate-accordion-up{animation:accordion-up .2s ease-out}.animate-float{animation:float 3s infinite ease-in-out}html,body{font-family:Cairo,sans-serif}div#wave{position:relative}div#wave .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;background:#ad49e1;animation:wave 1.3s linear infinite}div#wave .dot:nth-child(2){animation-delay:-1.1s}div#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"] }]
+        }], ctorParameters: () => [{ type: ApiService }, { type: TranslationService }], propDecorators: { getToken: [{
                 type: Input
             }], helpScreenId: [{
                 type: Input
@@ -1495,6 +1543,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 args: ['chatMessagesContainer']
             }] } });
 
+class HelpCenterConfigService {
+    _apiBaseUrl = 'https://babylai.net/api';
+    _getTokenFn;
+    setApiBaseUrl(url) {
+        this._apiBaseUrl = url;
+    }
+    getApiBaseUrl() {
+        return this._apiBaseUrl;
+    }
+    setGetTokenFn(fn) {
+        this._getTokenFn = fn;
+    }
+    getTokenFn() {
+        return this._getTokenFn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class TokenService {
     config;
     constructor(config) {
@@ -1551,5 +1624,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiService, HelpCenterConfigService, HelpCenterWidgetComponent, LanguageService, SignalRService, TokenService, TranslatePipe, TranslationService };
+export { ApiService, HelpCenterConfigService, HelpCenterWidgetComponent, LanguageService, TokenService, TranslatePipe, TranslationService };
 //# sourceMappingURL=aslaluroba-help-center.mjs.map