livechat-assistant 0.0.7

package/README.md

@@ -0,0 +1,69 @@
+# LivechatAssistant
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build livechat-assistant
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/livechat-assistant
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+
+
+import the 'SupportButtonsComponent'  component on your angular ts file 
+import { SupportButtonsComponent } from 'livechat-assistant';
+
+Add this <app-support-buttons /> tag to your template HTML file

package/fesm2022/livechat-assistant.mjs

@@ -0,0 +1,445 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, EventEmitter, Output, ChangeDetectionStrategy, ViewEncapsulation, Input, inject } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { NgIf, NgClass } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+
+class LivechatAssistantService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LivechatAssistantService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LivechatAssistantService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LivechatAssistantService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class LivechatAssistantComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LivechatAssistantComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: LivechatAssistantComponent, isStandalone: true, selector: "lib-livechat-assistant", ngImport: i0, template: `
+    <p>
+      livechat-assistant works!
+    </p>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LivechatAssistantComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-livechat-assistant', imports: [], template: `
+    <p>
+      livechat-assistant works!
+    </p>
+  ` }]
+        }] });
+
+class ChatHistoryComponent {
+    navigate = new EventEmitter();
+    conversations = [
+        {
+            id: 1,
+            name: 'Costa Quinn',
+            avatar: true,
+            lastMessage: 'Yes, you can!',
+            time: '11M',
+            status: 'read',
+            color: 'bg-red-600',
+            online: true,
+            initials: ''
+        },
+        {
+            id: 2,
+            name: 'Rachel Doe',
+            initials: 'R',
+            color: 'bg-blue-600',
+            lastMessage: 'When using open method, const select = n...',
+            time: '14M',
+            unreadCount: 1,
+            online: false,
+            avatar: false
+        },
+        {
+            id: 3,
+            name: 'Lewis Clarke',
+            avatar: true,
+            lastMessage: 'Have a great all free! 😊',
+            time: '15M',
+            online: true,
+            status: 'read',
+            color: 'bg-blue-400'
+        },
+        {
+            id: 4,
+            name: 'Technical issues',
+            initials: 'T',
+            color: 'bg-orange-500',
+            lastMessage: 'Great!',
+            time: '35M',
+            status: 'read',
+            hasAttachment: true,
+            online: false
+        },
+        {
+            id: 5,
+            name: 'Bob Dean',
+            initials: 'B',
+            color: 'bg-pink-500',
+            lastMessage: 'Hey Preline team, I got an p3p48 while using...',
+            time: '1H',
+            unreadCount: 1,
+            online: true
+        },
+        {
+            id: 6,
+            name: 'Mark Colbert',
+            initials: 'M',
+            color: 'bg-teal-500',
+            lastMessage: 'Voice message',
+            time: '6DM',
+            status: 'delivered',
+            online: false
+        },
+        {
+            id: 7,
+            name: 'Ella Lauda',
+            avatar: true,
+            lastMessage: 'I am really impressed! Can\'t wait...',
+            time: '37M',
+            online: false
+        }
+    ];
+    selectConversation(id, tabIndex) {
+        console.log('Selected conversation:', id);
+        this.navigate.emit(tabIndex);
+    }
+    navigateToTab(tabIndex) {
+        this.navigate.emit(tabIndex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChatHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ChatHistoryComponent, isStandalone: true, selector: "app-chat-history", outputs: { navigate: "navigate" }, ngImport: i0, template: "<div class=\"max-h-[600px] rounded-xl w-full flex flex-col justify-center items-center\">\r\n  <div\r\n  class=\"flex items-center justify-between px-4 py-5 dark:bg-neutral-700/20 shadow-xl bg-neutral-50 hover:bg-neutral-800/50 rounded-xl w-full\">\r\n          <h3 class=\"font-semibold text-neutral-800 dark:text-neutral-200 fs-16\">Messages</h3> \r\n  </div>\r\n\r\n    <!-- <div class=\"flex gap-2\">      \r\n      <button (click)=\"navigateToTab(2)\" class=\"mt-4 mb-2 bg-red-600 text-white rounded-md hover:bg-blue-700 transition w-fit\">\r\n        <p class=\"text-center px-4 py-1.5 text-sm m-0\">Ask AI question</p> \r\n      </button>\r\n      <button (click)=\"navigateToTab(2)\" class=\"mt-4 mb-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition w-fit\">\r\n        <p class=\"text-center px-4 py-1.5 text-sm m-0\">Chat with Live Agent</p> \r\n      </button>\r\n    </div> -->\r\n\r\n  <div class=\"flex-1 overflow-y-auto hideScroll\">\r\n    @for (conversation of conversations; track $index) {\r\n\r\n      <div  (click)=\"selectConversation(conversation.id, 2)\"\r\n        class=\"flex items-center gap-3 px-4 py-3 hover:bg-neutral-800 cursor-pointer transition-colors\">\r\n    \r\n        <!-- Avatar -->\r\n        <div class=\"relative flex-shrink-0\">\r\n          @if (conversation.avatar) {\r\n            <div [class]=\"'w-12 h-12 flex items-center font-semibold justify-center rounded-full overflow-hidden' + conversation.color\">\r\n              <h1 class=\"text-white text-xl\">AI</h1>\r\n            </div>\r\n          }\r\n\r\n          @if (!conversation.avatar && conversation.initials) {\r\n            <div [class]=\"'w-12 h-12 rounded-full flex items-center justify-center text-white font-semibold text-xl' + (conversation.color || 'bg-gray-500')\">\r\n              {{ conversation.initials }}\r\n            </div>\r\n          }\r\n\r\n          @if (conversation.online) {\r\n            <span class=\"absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full\"></span>\r\n          }\r\n        </div>\r\n    \r\n        <div class=\"flex-1 min-w-0\">\r\n          <div class=\"flex items-center justify-between mb-1\">\r\n            <h3 class=\"font-semibold text-neutral-800 dark:text-white fs-16 truncate\">{{ conversation.name }}</h3>\r\n            <span class=\"text-neutral-800 dark:text-neutral-400 text-xs\">Date </span>\r\n           </div>\r\n          <div class=\"flex items-center justify-between\">\r\n            <p class=\"text-sm text-neutral-400 truncate flex items-center gap-1\">\r\n              @if (conversation.hasAttachment) {\r\n                <span class=\"text-neutral-400\">\uD83D\uDCCE</span>\r\n              }\r\n              {{ conversation.lastMessage }}\r\n            </p>\r\n            <div class=\"flex items-center gap-2 flex-shrink-0 ml-2\">\r\n\r\n              @if (conversation.status === 'read') {\r\n                <svg class=\"w-4 h-4 text-green-400\" fill=\"currentColor\"\r\n                  viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z\" />\r\n                </svg>\r\n              }\r\n\r\n              @if (conversation.status === 'delivered') {\r\n                <svg class=\"w-4 h-4 text-blue-600\" fill=\"currentColor\"\r\n                  viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z\" />\r\n                </svg>\r\n              }\r\n\r\n              @if (conversation.unreadCount) {\r\n                <span\r\n                  class=\"bg-blue-600 text-white text-xs font-semibold rounded-full w-5 h-5 flex items-center justify-center\">\r\n                  {{ conversation.unreadCount }}\r\n                </span>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChatHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chat-history', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"max-h-[600px] rounded-xl w-full flex flex-col justify-center items-center\">\r\n  <div\r\n  class=\"flex items-center justify-between px-4 py-5 dark:bg-neutral-700/20 shadow-xl bg-neutral-50 hover:bg-neutral-800/50 rounded-xl w-full\">\r\n          <h3 class=\"font-semibold text-neutral-800 dark:text-neutral-200 fs-16\">Messages</h3> \r\n  </div>\r\n\r\n    <!-- <div class=\"flex gap-2\">      \r\n      <button (click)=\"navigateToTab(2)\" class=\"mt-4 mb-2 bg-red-600 text-white rounded-md hover:bg-blue-700 transition w-fit\">\r\n        <p class=\"text-center px-4 py-1.5 text-sm m-0\">Ask AI question</p> \r\n      </button>\r\n      <button (click)=\"navigateToTab(2)\" class=\"mt-4 mb-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition w-fit\">\r\n        <p class=\"text-center px-4 py-1.5 text-sm m-0\">Chat with Live Agent</p> \r\n      </button>\r\n    </div> -->\r\n\r\n  <div class=\"flex-1 overflow-y-auto hideScroll\">\r\n    @for (conversation of conversations; track $index) {\r\n\r\n      <div  (click)=\"selectConversation(conversation.id, 2)\"\r\n        class=\"flex items-center gap-3 px-4 py-3 hover:bg-neutral-800 cursor-pointer transition-colors\">\r\n    \r\n        <!-- Avatar -->\r\n        <div class=\"relative flex-shrink-0\">\r\n          @if (conversation.avatar) {\r\n            <div [class]=\"'w-12 h-12 flex items-center font-semibold justify-center rounded-full overflow-hidden' + conversation.color\">\r\n              <h1 class=\"text-white text-xl\">AI</h1>\r\n            </div>\r\n          }\r\n\r\n          @if (!conversation.avatar && conversation.initials) {\r\n            <div [class]=\"'w-12 h-12 rounded-full flex items-center justify-center text-white font-semibold text-xl' + (conversation.color || 'bg-gray-500')\">\r\n              {{ conversation.initials }}\r\n            </div>\r\n          }\r\n\r\n          @if (conversation.online) {\r\n            <span class=\"absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full\"></span>\r\n          }\r\n        </div>\r\n    \r\n        <div class=\"flex-1 min-w-0\">\r\n          <div class=\"flex items-center justify-between mb-1\">\r\n            <h3 class=\"font-semibold text-neutral-800 dark:text-white fs-16 truncate\">{{ conversation.name }}</h3>\r\n            <span class=\"text-neutral-800 dark:text-neutral-400 text-xs\">Date </span>\r\n           </div>\r\n          <div class=\"flex items-center justify-between\">\r\n            <p class=\"text-sm text-neutral-400 truncate flex items-center gap-1\">\r\n              @if (conversation.hasAttachment) {\r\n                <span class=\"text-neutral-400\">\uD83D\uDCCE</span>\r\n              }\r\n              {{ conversation.lastMessage }}\r\n            </p>\r\n            <div class=\"flex items-center gap-2 flex-shrink-0 ml-2\">\r\n\r\n              @if (conversation.status === 'read') {\r\n                <svg class=\"w-4 h-4 text-green-400\" fill=\"currentColor\"\r\n                  viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z\" />\r\n                </svg>\r\n              }\r\n\r\n              @if (conversation.status === 'delivered') {\r\n                <svg class=\"w-4 h-4 text-blue-600\" fill=\"currentColor\"\r\n                  viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z\" />\r\n                </svg>\r\n              }\r\n\r\n              @if (conversation.unreadCount) {\r\n                <span\r\n                  class=\"bg-blue-600 text-white text-xs font-semibold rounded-full w-5 h-5 flex items-center justify-center\">\r\n                  {{ conversation.unreadCount }}\r\n                </span>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>" }]
+        }], propDecorators: { navigate: [{
+                type: Output
+            }] } });
+
+class HelpSupportComponent {
+    fb;
+    showTooltip = false;
+    contactForm;
+    navigate = new EventEmitter();
+    constructor(fb) {
+        this.fb = fb;
+    }
+    ngOnInit() {
+        this.contactForm = this.fb.group({
+            name: ['', [Validators.required]],
+            email: ['', [Validators.required, Validators.email]],
+            subject: ['', [Validators.required]],
+            message: ['', [Validators.required]]
+        });
+    }
+    onSubmit() {
+        if (this.contactForm.valid) {
+            console.log('Form submitted:', this.contactForm.value);
+            this.contactForm.reset();
+        }
+        else {
+            // Mark all fields as touched to show validation errors
+            Object.keys(this.contactForm.controls).forEach(key => {
+                this.contactForm.get(key)?.markAsTouched();
+            });
+        }
+    }
+    navigateToTab(tabIndex) {
+        this.navigate.emit(tabIndex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HelpSupportComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: HelpSupportComponent, isStandalone: true, selector: "app-help-support", outputs: { navigate: "navigate" }, ngImport: i0, template: "<div class=\"rounded-lg flex flex-col overflow-hidden max-h-[600px]\">\r\n <div class=\"relative h-32 bg-gradient-to-br from-cyan-300 via-blue-600 to-orange-400 overflow-hidden\">\r\n    <div class=\"absolute inset-0\">\r\n      <div class=\"absolute top-0 left-0 w-24 h-24 bg-blue-700 transform rotate-45 -translate-x-8 -translate-y-8\"></div>\r\n      <div class=\"absolute top-4 right-0 w-32 h-32 bg-orange-400 transform rotate-12 translate-x-12\"></div>\r\n      <div class=\"absolute bottom-0 left-8 w-28 h-28 bg-cyan-400 transform -rotate-12 translate-y-12\"></div>\r\n    </div>\r\n    \r\n    \r\n    <!-- Logo -->\r\n    <div class=\"absolute bottom-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg\">\r\n      <svg class=\"w-6 h-6 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"/>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"p-4 overflow-y-auto hideScroll\">\r\n    \r\n    <h2 class=\"text-lg font-semibold text-neutral-800 dark:text-neutral-200 mb-1\">Send a message</h2>\r\n    <p class=\"text-sm text-neutral-500 dark:text-neutral-200 mb-6\">We'll get back to you in a few hours.</p>\r\n    \r\n    <form [formGroup]=\"contactForm\" (ngSubmit)=\"onSubmit()\" class=\"space-y-4\">\r\n      \r\n      <div>\r\n        <label for=\"name\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Name</label>\r\n        <input \r\n          type=\"text\" \r\n          id=\"name\"\r\n          formControlName=\"name\"\r\n          placeholder=\"John Doe\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n          [class.border-red-500]=\"contactForm.get('name')?.invalid && contactForm.get('name')?.touched\">\r\n        <p *ngIf=\"contactForm.get('name')?.invalid && contactForm.get('name')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">Name is required</p>\r\n      </div>\r\n      \r\n      <!-- Email Field -->\r\n      <div class=\"relative\">\r\n        <label for=\"email\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Email</label>\r\n        <input \r\n          type=\"email\" \r\n          id=\"email\"\r\n          formControlName=\"email\"\r\n          placeholder=\"john@site.co\"\r\n          (focus)=\"showTooltip = true\"\r\n          (blur)=\"showTooltip = false\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n          [class.border-red-500]=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\">\r\n        \r\n        <!-- Tooltip -->\r\n        <div *ngIf=\"showTooltip\" \r\n             class=\"absolute right-0 top-0 mt-1 mr-2 bg-neutral-900 dark:text-neutral-200 text-white text-xs px-3 py-2 rounded shadow-lg z-10 whitespace-nowrap\">\r\n          Existing accounts should use <br>your account to access the <br>source code.\r\n          <div class=\"absolute top-1/2 -right-1 transform -translate-y-1/2 w-2 h-2 bg-neutral-900 dark:text-neutral-200 rotate-45\"></div>\r\n        </div>\r\n        \r\n        <p *ngIf=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">\r\n          <span *ngIf=\"contactForm.get('email')?.errors?.['required']\">Email is required</span>\r\n          <span *ngIf=\"contactForm.get('email')?.errors?.['email']\">Invalid email format</span>\r\n        </p>\r\n      </div>\r\n      \r\n      <!-- Subject Field -->\r\n      <div>\r\n        <label for=\"subject\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Subject</label>\r\n        <input \r\n          type=\"text\" \r\n          id=\"subject\"\r\n          formControlName=\"subject\"\r\n          placeholder=\"Preline Pro\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n          [class.border-red-500]=\"contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched\">\r\n        <p *ngIf=\"contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">Subject is required</p>\r\n      </div>\r\n      \r\n      <!-- Message Field -->\r\n      <div>\r\n        <label for=\"message\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">How can we help?</label>\r\n        <textarea \r\n          id=\"message\"\r\n          formControlName=\"message\"\r\n          rows=\"4\"\r\n          placeholder=\"Message...\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\r\n          [class.border-red-500]=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\"></textarea>\r\n        <p *ngIf=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">Message is required</p>\r\n      </div>\r\n      \r\n      <!-- Submit Button -->\r\n      <button \r\n        type=\"submit\"\r\n        [disabled]=\"contactForm.invalid\"\r\n        (click)=\"navigateToTab(5)\"\r\n        class=\"w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed\">\r\n        Send message\r\n      </button>\r\n      \r\n    </form>\r\n    \r\n  </div>\r\n  </div>\r\n\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HelpSupportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-help-support', imports: [ReactiveFormsModule, NgIf], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rounded-lg flex flex-col overflow-hidden max-h-[600px]\">\r\n <div class=\"relative h-32 bg-gradient-to-br from-cyan-300 via-blue-600 to-orange-400 overflow-hidden\">\r\n    <div class=\"absolute inset-0\">\r\n      <div class=\"absolute top-0 left-0 w-24 h-24 bg-blue-700 transform rotate-45 -translate-x-8 -translate-y-8\"></div>\r\n      <div class=\"absolute top-4 right-0 w-32 h-32 bg-orange-400 transform rotate-12 translate-x-12\"></div>\r\n      <div class=\"absolute bottom-0 left-8 w-28 h-28 bg-cyan-400 transform -rotate-12 translate-y-12\"></div>\r\n    </div>\r\n    \r\n    \r\n    <!-- Logo -->\r\n    <div class=\"absolute bottom-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg\">\r\n      <svg class=\"w-6 h-6 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"/>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"p-4 overflow-y-auto hideScroll\">\r\n    \r\n    <h2 class=\"text-lg font-semibold text-neutral-800 dark:text-neutral-200 mb-1\">Send a message</h2>\r\n    <p class=\"text-sm text-neutral-500 dark:text-neutral-200 mb-6\">We'll get back to you in a few hours.</p>\r\n    \r\n    <form [formGroup]=\"contactForm\" (ngSubmit)=\"onSubmit()\" class=\"space-y-4\">\r\n      \r\n      <div>\r\n        <label for=\"name\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Name</label>\r\n        <input \r\n          type=\"text\" \r\n          id=\"name\"\r\n          formControlName=\"name\"\r\n          placeholder=\"John Doe\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n          [class.border-red-500]=\"contactForm.get('name')?.invalid && contactForm.get('name')?.touched\">\r\n        <p *ngIf=\"contactForm.get('name')?.invalid && contactForm.get('name')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">Name is required</p>\r\n      </div>\r\n      \r\n      <!-- Email Field -->\r\n      <div class=\"relative\">\r\n        <label for=\"email\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Email</label>\r\n        <input \r\n          type=\"email\" \r\n          id=\"email\"\r\n          formControlName=\"email\"\r\n          placeholder=\"john@site.co\"\r\n          (focus)=\"showTooltip = true\"\r\n          (blur)=\"showTooltip = false\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n          [class.border-red-500]=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\">\r\n        \r\n        <!-- Tooltip -->\r\n        <div *ngIf=\"showTooltip\" \r\n             class=\"absolute right-0 top-0 mt-1 mr-2 bg-neutral-900 dark:text-neutral-200 text-white text-xs px-3 py-2 rounded shadow-lg z-10 whitespace-nowrap\">\r\n          Existing accounts should use <br>your account to access the <br>source code.\r\n          <div class=\"absolute top-1/2 -right-1 transform -translate-y-1/2 w-2 h-2 bg-neutral-900 dark:text-neutral-200 rotate-45\"></div>\r\n        </div>\r\n        \r\n        <p *ngIf=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">\r\n          <span *ngIf=\"contactForm.get('email')?.errors?.['required']\">Email is required</span>\r\n          <span *ngIf=\"contactForm.get('email')?.errors?.['email']\">Invalid email format</span>\r\n        </p>\r\n      </div>\r\n      \r\n      <!-- Subject Field -->\r\n      <div>\r\n        <label for=\"subject\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Subject</label>\r\n        <input \r\n          type=\"text\" \r\n          id=\"subject\"\r\n          formControlName=\"subject\"\r\n          placeholder=\"Preline Pro\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n          [class.border-red-500]=\"contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched\">\r\n        <p *ngIf=\"contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">Subject is required</p>\r\n      </div>\r\n      \r\n      <!-- Message Field -->\r\n      <div>\r\n        <label for=\"message\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">How can we help?</label>\r\n        <textarea \r\n          id=\"message\"\r\n          formControlName=\"message\"\r\n          rows=\"4\"\r\n          placeholder=\"Message...\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\r\n          [class.border-red-500]=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\"></textarea>\r\n        <p *ngIf=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">Message is required</p>\r\n      </div>\r\n      \r\n      <!-- Submit Button -->\r\n      <button \r\n        type=\"submit\"\r\n        [disabled]=\"contactForm.invalid\"\r\n        (click)=\"navigateToTab(5)\"\r\n        class=\"w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed\">\r\n        Send message\r\n      </button>\r\n      \r\n    </form>\r\n    \r\n  </div>\r\n  </div>\r\n\r\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { navigate: [{
+                type: Output
+            }] } });
+
+class HomeComponent {
+    navigate = new EventEmitter();
+    navigateToTab(tabIndex) {
+        this.navigate.emit(tabIndex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: HomeComponent, isStandalone: true, selector: "app-home", outputs: { navigate: "navigate" }, ngImport: i0, template: "<div class=\"rounded-lg flex flex-col overflow-hidden max-h-[600px]\">\r\n      <div class=\"relative h-32 bg-gradient-to-br from-cyan-300 via-blue-600 to-orange-400 overflow-hidden\">\r\n      <div class=\"absolute inset-0\">\r\n        <div class=\"absolute top-0 left-0 w-24 h-24 bg-blue-700 transform rotate-45 -translate-x-8 -translate-y-8\"></div>\r\n        <div class=\"absolute top-4 right-0 w-32 h-32 bg-orange-400 transform rotate-12 translate-x-12\"></div>\r\n        <div class=\"absolute bottom-0 left-8 w-28 h-28 bg-cyan-400 transform -rotate-12 translate-y-12\"></div>\r\n      </div>\r\n      <button class=\"absolute top-3 right-3 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/30\">\r\n        \u00D7\r\n      </button>\r\n      \r\n      <!-- Logo -->\r\n      <div class=\"absolute bottom-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg\">\r\n        <svg class=\"w-6 h-6 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"/>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex-1 overflow-y-auto p-4 hideScroll\">\r\n      <div>\r\n        <h2 class=\"text-lg font-semibold dark:text-neutral-200 text-gray-800 mt-4\">Hi, Penny \uD83D\uDC4B</h2>\r\n        <p class=\"text-sm text-neutral-500  dark:text-neutral-200 mb-5\">Preline support team is here to help.</p>\r\n        \r\n        <button (click)=\"navigateToTab(3)\" class=\"w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition mb-6\">\r\n          Send us a message\r\n        </button>\r\n        \r\n        <div class=\"space-y-4\">\r\n          <p class=\"text-sm font-semibold text-neutral-500  dark:text-neutral-200\">Popular topics</p>\r\n          \r\n          <a href=\"#\" class=\"flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n            <div>\r\n              <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">Live Chat</h3>\r\n              <p class=\"text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n            </div>\r\n            <svg class=\"w-5 h-5 text-neutral-400 group-hover:text-neutral-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n            </svg>\r\n          </a>\r\n          \r\n          <a href=\"#\" class=\"flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n            <div>\r\n                <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">AI Chat</h3>\r\n                <p class=\"text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n            </div>\r\n            <svg class=\"w-5 h-5 text-neutral-400 group-hover:text-neutral-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n            </svg>\r\n          </a>\r\n          \r\n          <a href=\"#\" class=\"flex  mb-2 items-center justify-between p-3 dark:bg-neutral-800 bg-gray-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n            <div>\r\n                <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">Support Chat</h3>\r\n                <p class=\"text-sm text-gray-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n            </div>\r\n            <svg class=\"w-5 h-5 text-gray-400 group-hover:text-gray-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n            </svg>\r\n          </a>\r\n        </div>\r\n      </div>\r\n      \r\n      <div class=\"border-t border-neutral-700\"></div>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HomeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-home', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"rounded-lg flex flex-col overflow-hidden max-h-[600px]\">\r\n      <div class=\"relative h-32 bg-gradient-to-br from-cyan-300 via-blue-600 to-orange-400 overflow-hidden\">\r\n      <div class=\"absolute inset-0\">\r\n        <div class=\"absolute top-0 left-0 w-24 h-24 bg-blue-700 transform rotate-45 -translate-x-8 -translate-y-8\"></div>\r\n        <div class=\"absolute top-4 right-0 w-32 h-32 bg-orange-400 transform rotate-12 translate-x-12\"></div>\r\n        <div class=\"absolute bottom-0 left-8 w-28 h-28 bg-cyan-400 transform -rotate-12 translate-y-12\"></div>\r\n      </div>\r\n      <button class=\"absolute top-3 right-3 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/30\">\r\n        \u00D7\r\n      </button>\r\n      \r\n      <!-- Logo -->\r\n      <div class=\"absolute bottom-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg\">\r\n        <svg class=\"w-6 h-6 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"/>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex-1 overflow-y-auto p-4 hideScroll\">\r\n      <div>\r\n        <h2 class=\"text-lg font-semibold dark:text-neutral-200 text-gray-800 mt-4\">Hi, Penny \uD83D\uDC4B</h2>\r\n        <p class=\"text-sm text-neutral-500  dark:text-neutral-200 mb-5\">Preline support team is here to help.</p>\r\n        \r\n        <button (click)=\"navigateToTab(3)\" class=\"w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition mb-6\">\r\n          Send us a message\r\n        </button>\r\n        \r\n        <div class=\"space-y-4\">\r\n          <p class=\"text-sm font-semibold text-neutral-500  dark:text-neutral-200\">Popular topics</p>\r\n          \r\n          <a href=\"#\" class=\"flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n            <div>\r\n              <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">Live Chat</h3>\r\n              <p class=\"text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n            </div>\r\n            <svg class=\"w-5 h-5 text-neutral-400 group-hover:text-neutral-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n            </svg>\r\n          </a>\r\n          \r\n          <a href=\"#\" class=\"flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n            <div>\r\n                <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">AI Chat</h3>\r\n                <p class=\"text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n            </div>\r\n            <svg class=\"w-5 h-5 text-neutral-400 group-hover:text-neutral-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n            </svg>\r\n          </a>\r\n          \r\n          <a href=\"#\" class=\"flex  mb-2 items-center justify-between p-3 dark:bg-neutral-800 bg-gray-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n            <div>\r\n                <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">Support Chat</h3>\r\n                <p class=\"text-sm text-gray-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n            </div>\r\n            <svg class=\"w-5 h-5 text-gray-400 group-hover:text-gray-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n            </svg>\r\n          </a>\r\n        </div>\r\n      </div>\r\n      \r\n      <div class=\"border-t border-neutral-700\"></div>" }]
+        }], propDecorators: { navigate: [{
+                type: Output
+            }] } });
+
+class MessageComponent {
+    newMessage = '';
+    noMessage = false;
+    isTyping = false;
+    messages;
+    suggestions = ['Health', 'Learn', 'Technology', 'Science'];
+    sendMessage = new EventEmitter();
+    navigate = new EventEmitter();
+    onSendMessage() {
+        if (this.newMessage.trim()) {
+            this.sendMessage.emit(this.newMessage);
+            this.newMessage = '';
+            this.noMessage = true;
+        }
+    }
+    onFileSelect(event) {
+        const file = event.target.files[0];
+        if (file) {
+            console.log('File selected:', file.name);
+            // Handle file upload here
+        }
+    }
+    return(tabIndex) {
+        this.navigate.emit(tabIndex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MessageComponent, isStandalone: true, selector: "app-message", inputs: { isTyping: "isTyping", messages: "messages", suggestions: "suggestions" }, outputs: { sendMessage: "sendMessage", navigate: "navigate" }, ngImport: i0, template: "<div class=\"flex flex-col rounded-xl\" [class]=\"noMessage ? 'max-h-[600px]' : 'h-[600px]'\">\r\n    <div\r\n        class=\"flex items-center justify-between px-4 py-3 dark:bg-neutral-700/20 shadow-xl bg-neutral-50 hover:bg-neutral-800/50 rounded-xl\">\r\n        <div class=\"flex items-center gap-3\">\r\n            <button class=\"cursor-pointer\" (click)=\"return(4)\">\r\n                <svg class=\"w-5 h-5 text-neutral-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\r\n                </svg>\r\n            </button>\r\n            <img src=\"https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff\"\r\n                class=\"w-10 h-10 rounded-full\" alt=\"Agent\">\r\n            <div>\r\n                <h3 class=\"font-semibold text-neutral-800 dark:text-neutral-200 fs-16\">AI Bot</h3>\r\n                <p class=\"text-green-300/80 fs-14\">Online</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"text-center h-full flex flex-col justify-center items-center relative animate-scale-in\">\r\n            <h2 class=\"text-2xl font-bold text-gray-800 mb-2 dark:text-neutral-200\">Hey Penny!</h2>\r\n        <p class=\"text-gray-600 text-sm dark:text-neutral-200/80\">\r\n            You can ask me anything.\r\n        </p>    \r\n      </div>\r\n\r\n      \r\n    @if(noMessage) {\r\n    <div class=\"flex-1 overflow-y-auto px-4 py-6 space-y-4 hideScroll\">\r\n        @for (message of messages; track $index) {\r\n        <div [class.flex-row-reverse]=\"message.sender === 'customer'\" class=\"flex gap-3 items-start\">\r\n\r\n            @if (message.sender === 'agent') {\r\n            <img src=\"https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff\"\r\n                class=\"w-8 h-8 rounded-full flex-shrink-0\" alt=\"Avatar\" />\r\n            }\r\n\r\n            <div [class.items-end]=\"message.sender === 'customer'\" class=\"flex flex-col max-w-xs\">\r\n\r\n                <div [class.bg-blue-600]=\"message.sender === 'customer'\"\r\n                    [class.text-white]=\"message.sender === 'customer'\" [class.bg-white]=\"message.sender === 'agent'\"\r\n                    [class.text-gray-800]=\"message.sender === 'agent'\" class=\"rounded-2xl px-4 py-2.5 shadow-sm\">\r\n                    <p class=\"text-sm whitespace-pre-wrap fs-16 \">{{ message.text }}</p>\r\n                </div>\r\n                <span class=\"text-sm text-neutral-300 mt-1 px-1\">{{ message.time }}</span>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n\r\n\r\n        @if (isTyping) {\r\n        <div class=\"flex gap-3 items-start\">\r\n            <img src=\"https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff\"\r\n                class=\"w-8 h-8 rounded-full\" alt=\"Agent\">\r\n            <div class=\"bg-white rounded-2xl px-4 py-3 shadow-sm\">\r\n                <div class=\"flex gap-1\">\r\n                    <span class=\"w-2 h-2 bg-gray-400 rounded-full animate-bounce\"></span>\r\n                    <span class=\"w-2 h-2 bg-gray-400 rounded-full animate-bounce\" style=\"animation-delay: 0.2s\"></span>\r\n                    <span class=\"w-2 h-2 bg-gray-400 rounded-full animate-bounce\" style=\"animation-delay: 0.4s\"></span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n        <div>\r\n            <div class=\"flex flex-wrap justify-center gap-1.5 sm:gap-2 bg-transparent scroll-xcontainer\">\r\n                @for (suggestion of suggestions; track $index) {\r\n                    <button (click)=\"newMessage = suggestion; onSendMessage()\" class=\"py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm bg-linear-to-tl from-blue-500 to-blue-800 text-white rounded-lg focus:outline-hidden \">\r\n                        {{ suggestion }}\r\n                      </button>\r\n                }\r\n              </div>\r\n        </div>\r\n\r\n    <div class=\"px-4\">\r\n\r\n        <div class=\"flex justify-between items-center w-full py-2.5\">\r\n            <div class=\"flex gap-2 w-full\">\r\n                <button (click)=\"fileInput.click()\"\r\n                    class=\"text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" />\r\n                    </svg>\r\n                </button>\r\n                <input #fileInput type=\"file\" class=\"hidden\" (change)=\"onFileSelect($event)\">\r\n\r\n                <button class=\"text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n                    </svg>\r\n                </button>\r\n\r\n                <input [(ngModel)]=\"newMessage\" (keyup.enter)=\"onSendMessage()\" type=\"text\"\r\n                    placeholder=\"Type a message...\"\r\n                    class=\"flex-1 py-3 dark:text-white text-black rounded-md fs-16 focus:outline-none focus:ring-0 focus:ring-none w-full\" />\r\n            </div>\r\n\r\n            <div class=\"flex gap-2 justify-end\">\r\n                <button (click)=\"onSendMessage()\" [disabled]=\"!newMessage.trim()\"\r\n                    class=\"bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed p-2\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M12 19l9 2-9-18-9 18 9-2zm0 0v-8\" />\r\n                    </svg>\r\n                </button>\r\n                <button class=\"text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-message', imports: [FormsModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col rounded-xl\" [class]=\"noMessage ? 'max-h-[600px]' : 'h-[600px]'\">\r\n    <div\r\n        class=\"flex items-center justify-between px-4 py-3 dark:bg-neutral-700/20 shadow-xl bg-neutral-50 hover:bg-neutral-800/50 rounded-xl\">\r\n        <div class=\"flex items-center gap-3\">\r\n            <button class=\"cursor-pointer\" (click)=\"return(4)\">\r\n                <svg class=\"w-5 h-5 text-neutral-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\r\n                </svg>\r\n            </button>\r\n            <img src=\"https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff\"\r\n                class=\"w-10 h-10 rounded-full\" alt=\"Agent\">\r\n            <div>\r\n                <h3 class=\"font-semibold text-neutral-800 dark:text-neutral-200 fs-16\">AI Bot</h3>\r\n                <p class=\"text-green-300/80 fs-14\">Online</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"text-center h-full flex flex-col justify-center items-center relative animate-scale-in\">\r\n            <h2 class=\"text-2xl font-bold text-gray-800 mb-2 dark:text-neutral-200\">Hey Penny!</h2>\r\n        <p class=\"text-gray-600 text-sm dark:text-neutral-200/80\">\r\n            You can ask me anything.\r\n        </p>    \r\n      </div>\r\n\r\n      \r\n    @if(noMessage) {\r\n    <div class=\"flex-1 overflow-y-auto px-4 py-6 space-y-4 hideScroll\">\r\n        @for (message of messages; track $index) {\r\n        <div [class.flex-row-reverse]=\"message.sender === 'customer'\" class=\"flex gap-3 items-start\">\r\n\r\n            @if (message.sender === 'agent') {\r\n            <img src=\"https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff\"\r\n                class=\"w-8 h-8 rounded-full flex-shrink-0\" alt=\"Avatar\" />\r\n            }\r\n\r\n            <div [class.items-end]=\"message.sender === 'customer'\" class=\"flex flex-col max-w-xs\">\r\n\r\n                <div [class.bg-blue-600]=\"message.sender === 'customer'\"\r\n                    [class.text-white]=\"message.sender === 'customer'\" [class.bg-white]=\"message.sender === 'agent'\"\r\n                    [class.text-gray-800]=\"message.sender === 'agent'\" class=\"rounded-2xl px-4 py-2.5 shadow-sm\">\r\n                    <p class=\"text-sm whitespace-pre-wrap fs-16 \">{{ message.text }}</p>\r\n                </div>\r\n                <span class=\"text-sm text-neutral-300 mt-1 px-1\">{{ message.time }}</span>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n\r\n\r\n        @if (isTyping) {\r\n        <div class=\"flex gap-3 items-start\">\r\n            <img src=\"https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff\"\r\n                class=\"w-8 h-8 rounded-full\" alt=\"Agent\">\r\n            <div class=\"bg-white rounded-2xl px-4 py-3 shadow-sm\">\r\n                <div class=\"flex gap-1\">\r\n                    <span class=\"w-2 h-2 bg-gray-400 rounded-full animate-bounce\"></span>\r\n                    <span class=\"w-2 h-2 bg-gray-400 rounded-full animate-bounce\" style=\"animation-delay: 0.2s\"></span>\r\n                    <span class=\"w-2 h-2 bg-gray-400 rounded-full animate-bounce\" style=\"animation-delay: 0.4s\"></span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n        <div>\r\n            <div class=\"flex flex-wrap justify-center gap-1.5 sm:gap-2 bg-transparent scroll-xcontainer\">\r\n                @for (suggestion of suggestions; track $index) {\r\n                    <button (click)=\"newMessage = suggestion; onSendMessage()\" class=\"py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm bg-linear-to-tl from-blue-500 to-blue-800 text-white rounded-lg focus:outline-hidden \">\r\n                        {{ suggestion }}\r\n                      </button>\r\n                }\r\n              </div>\r\n        </div>\r\n\r\n    <div class=\"px-4\">\r\n\r\n        <div class=\"flex justify-between items-center w-full py-2.5\">\r\n            <div class=\"flex gap-2 w-full\">\r\n                <button (click)=\"fileInput.click()\"\r\n                    class=\"text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" />\r\n                    </svg>\r\n                </button>\r\n                <input #fileInput type=\"file\" class=\"hidden\" (change)=\"onFileSelect($event)\">\r\n\r\n                <button class=\"text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n                    </svg>\r\n                </button>\r\n\r\n                <input [(ngModel)]=\"newMessage\" (keyup.enter)=\"onSendMessage()\" type=\"text\"\r\n                    placeholder=\"Type a message...\"\r\n                    class=\"flex-1 py-3 dark:text-white text-black rounded-md fs-16 focus:outline-none focus:ring-0 focus:ring-none w-full\" />\r\n            </div>\r\n\r\n            <div class=\"flex gap-2 justify-end\">\r\n                <button (click)=\"onSendMessage()\" [disabled]=\"!newMessage.trim()\"\r\n                    class=\"bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed p-2\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M12 19l9 2-9-18-9 18 9-2zm0 0v-8\" />\r\n                    </svg>\r\n                </button>\r\n                <button class=\"text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
+        }], propDecorators: { isTyping: [{
+                type: Input
+            }], messages: [{
+                type: Input
+            }], suggestions: [{
+                type: Input
+            }], sendMessage: [{
+                type: Output
+            }], navigate: [{
+                type: Output
+            }] } });
+
+class SuccessMessageComponent {
+    navigate = new EventEmitter();
+    confettiArray = [];
+    ngOnInit() {
+        this.generateConfetti();
+    }
+    navigateToTab(tabIndex) {
+        this.navigate.emit(tabIndex);
+    }
+    generateConfetti() {
+        const colors = ['#10B981', '#3B82F6', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];
+        for (let i = 0; i < 50; i++) {
+            this.confettiArray.push({
+                left: Math.random() * 100,
+                delay: Math.random() * 2,
+                color: colors[Math.floor(Math.random() * colors.length)]
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SuccessMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SuccessMessageComponent, isStandalone: true, selector: "app-success-message", outputs: { navigate: "navigate" }, ngImport: i0, template: "<div class=\"bg-white rounded-lg h-[600px]\">\r\n<div class=\"confetti-container\">\r\n    @for (confetti of confettiArray; track $index) {\r\n        <div\r\n             [style.left.%]=\"confetti.left\"\r\n             [style.animation-delay.s]=\"confetti.delay\"\r\n             [style.background-color]=\"confetti.color\"\r\n             class=\"confetti\">\r\n            </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"p-4 text-center h-full flex flex-col justify-center items-center relative animate-scale-in\">\r\n    <div class=\"mb-6 flex justify-center items-center\">\r\n      <div class=\"w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center animate-bounce-in\">\r\n        <svg class=\"w-8 h-8 text-teal-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"/>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Title -->\r\n    <h2 class=\"text-2xl font-bold text-gray-800 mb-4\">Email Delivered!</h2>\r\n    <p class=\"text-gray-600 text-sm mb-2\">\r\n      You're set on chatting with an online agent or ask your our AI robot your questions.\r\n    </p>\r\n\r\n    <button (click)=\"navigateToTab(2)\" class=\"mt-6 bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition\">\r\n      Start a new chat\r\n    </button>\r\n\r\n  </div>\r\n</div>", styles: [".confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:51}.confetti{position:absolute;width:10px;height:10px;top:-10%;opacity:0;animation:confetti-fall 3s linear forwards}@keyframes confetti-fall{0%{top:-10%;opacity:1;transform:translate(0) rotate(0)}to{top:100%;opacity:0;transform:translate(100px) rotate(720deg)}}@keyframes scale-in{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes bounce-in{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.animate-scale-in{animation:scale-in .4s ease-out}.animate-bounce-in{animation:bounce-in .6s cubic-bezier(.68,-.55,.265,1.55);animation-delay:.2s;animation-fill-mode:backwards}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SuccessMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-success-message', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-white rounded-lg h-[600px]\">\r\n<div class=\"confetti-container\">\r\n    @for (confetti of confettiArray; track $index) {\r\n        <div\r\n             [style.left.%]=\"confetti.left\"\r\n             [style.animation-delay.s]=\"confetti.delay\"\r\n             [style.background-color]=\"confetti.color\"\r\n             class=\"confetti\">\r\n            </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"p-4 text-center h-full flex flex-col justify-center items-center relative animate-scale-in\">\r\n    <div class=\"mb-6 flex justify-center items-center\">\r\n      <div class=\"w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center animate-bounce-in\">\r\n        <svg class=\"w-8 h-8 text-teal-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"/>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Title -->\r\n    <h2 class=\"text-2xl font-bold text-gray-800 mb-4\">Email Delivered!</h2>\r\n    <p class=\"text-gray-600 text-sm mb-2\">\r\n      You're set on chatting with an online agent or ask your our AI robot your questions.\r\n    </p>\r\n\r\n    <button (click)=\"navigateToTab(2)\" class=\"mt-6 bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition\">\r\n      Start a new chat\r\n    </button>\r\n\r\n  </div>\r\n</div>", styles: [".confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:51}.confetti{position:absolute;width:10px;height:10px;top:-10%;opacity:0;animation:confetti-fall 3s linear forwards}@keyframes confetti-fall{0%{top:-10%;opacity:1;transform:translate(0) rotate(0)}to{top:100%;opacity:0;transform:translate(100px) rotate(720deg)}}@keyframes scale-in{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes bounce-in{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.animate-scale-in{animation:scale-in .4s ease-out}.animate-bounce-in{animation:bounce-in .6s cubic-bezier(.68,-.55,.265,1.55);animation-delay:.2s;animation-fill-mode:backwards}\n"] }]
+        }], propDecorators: { navigate: [{
+                type: Output
+            }] } });
+
+class ChatWidgetComponent {
+    isTyping = false;
+    isOpen = false;
+    activeTab = 1;
+    setActiveTab(tab) {
+        this.activeTab = tab;
+    }
+    navigateToTab(tab) {
+        this.setActiveTab(tab);
+    }
+    messages = [
+        {
+            id: 1,
+            sender: 'agent',
+            text: 'Hi, I\'d like to ask some questions. Can I use Preline UI on a client project?',
+            time: '9:40 AM'
+        },
+        {
+            id: 2,
+            sender: 'agent',
+            text: 'https://preline.co/',
+            time: '9:41 AM',
+        },
+        {
+            id: 3,
+            sender: 'customer',
+            text: 'Hi, I\'d like to ask some questions. Can I use Preline UI on a client project?',
+            time: '11:27 AM'
+        },
+        {
+            id: 4,
+            sender: 'customer',
+            text: 'Yes, you can! 😊',
+            time: '11:28 AM'
+        }
+    ];
+    sendMessage(message) {
+        if (message.trim()) {
+            this.messages.push({
+                id: this.messages.length + 1,
+                sender: 'customer',
+                text: message,
+                time: new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+            });
+            console.log(message);
+            // Simulate agent typing
+            this.isTyping = true;
+            setTimeout(() => {
+                this.isTyping = false;
+            }, 2000);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChatWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ChatWidgetComponent, isStandalone: true, selector: "app-chat-widget", inputs: { isOpen: "isOpen" }, ngImport: i0, template: "<div class=\"chatbot bg-white dark:bg-neutral-900 \">\r\n\r\n    <div>\r\n        @if (activeTab === 1) {\r\n        <div role=\"tabpanel\">\r\n            <app-home (navigate)=\"navigateToTab($event)\" />\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 2) {\r\n        <div role=\"tabpanel\">\r\n            <app-message [messages]=\"messages\" [isTyping]=\"isTyping\" (sendMessage)=\"sendMessage($event)\" (navigate)=\"navigateToTab($event)\"/>\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 3) {\r\n        <div role=\"tabpanel\">\r\n            <app-help-support (navigate)=\"navigateToTab($event)\"/>\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 4) {\r\n        <div role=\"tabpanel\">\r\n            <app-chat-history (navigate)=\"navigateToTab($event)\"/>\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 5) {\r\n        <div role=\"tabpanel\">\r\n            <app-success-message (navigate)=\"navigateToTab($event)\" /> \r\n        </div>\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"\">        \r\n        <nav class=\"flex justify-evenly\" aria-label=\"Tabs\" role=\"tablist\">\r\n            <button type=\"button\" (click)=\"setActiveTab(1)\" \r\n            [class.text-blue-500]=\"activeTab === 1\" \r\n            [class.text-neutral-300]=\"activeTab !== 1\"\r\n            class=\"py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap transition-colors  focus:outline-none flex flex-col gap-2\">\r\n\r\n                <div [ngClass]=\"activeTab === 1 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'\" class=\"px-4 py-2.5\">\r\n                    <svg class=\"shrink-0 size-5\" [class.text-black]=\"activeTab === 1\"   xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                        viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\">\r\n                        <path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n                        <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n                    </svg>\r\n                </div>\r\n\r\n                <span class=\"text-lg fw-4 hover:text-blue-200\">Home</span>\r\n            </button>\r\n\r\n            <button type=\"button\" (click)=\"setActiveTab(2)\" [class.font-bold]=\"activeTab === 2\"\r\n                [class.text-blue-500]=\"activeTab === 2\" [class.text-neutral-300]=\"activeTab !== 2\"\r\n                class=\"py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap hover:text-blue-200 focus:outline-none  flex flex-col gap-2\">\r\n                <div [ngClass]=\"activeTab === 2 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'\" class=\"px-4 py-2.5\">\r\n                <svg class=\"shrink-0 size-5\" [class.text-black]=\"activeTab === 2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                    viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n                    <circle cx=\"12\" cy=\"10\" r=\"3\"></circle>\r\n                    <path d=\"M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662\"></path>\r\n                </svg>\r\n                </div>\r\n                <span class=\"text-lg fw-6 hover:text-blue-200\">Message</span>\r\n            </button>\r\n\r\n            <button type=\"button\" (click)=\"setActiveTab(3)\" [class.font-bold]=\"activeTab === 3\"\r\n                [class.text-blue-500]=\"activeTab === 3\" [class.text-neutral-300]=\"activeTab !== 3\"\r\n                class=\"py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap hover:text-blue-200 focus:outline-none  flex flex-col gap-2\">\r\n                <div [ngClass]=\"activeTab === 3 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'\" class=\"px-4 py-2.5\">\r\n                <svg class=\"shrink-0 size-5\"  [class.text-black]=\"activeTab === 3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                    viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\">\r\n                    <path\r\n                        d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\">\r\n                    </path>\r\n                    <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n                </svg>\r\n                </div>\r\n                <span class=\"text-lg fw-6 hover:text-blue-200\">Help</span>\r\n            </button>\r\n        </nav>\r\n    </div>\r\n</div>", styles: [":host .chat-container{width:400px!important}:host .btn-round{border-radius:100%!important;width:40px!important;height:40px!important}:host .btn-round.btn-fab{position:fixed!important;bottom:20px!important;right:30px!important;width:60px!important;height:60px!important;border-radius:100%;box-shadow:0 6px 20px #0003}:host .btn-round.btn-fab i{position:relative!important;top:0!important;right:-18px!important}:host #send-btn{margin-bottom:10px!important;margin-right:0!important}:host .chatbot header{padding:10px!important;position:relative;text-align:center}:host .chatbot .chatbox{overflow-y:auto;height:550px;margin-bottom:40px!important}:host .chatbot :where(.chatbox,textarea)::-webkit-scrollbar{width:6px}:host .chatbot :where(.chatbox,textarea)::-webkit-scrollbar-track{border-radius:25px}:host .chatbot :where(.chatbox,textarea)::-webkit-scrollbar-thumb{border-radius:25px}@media (max-width: 490px){:host .chatbot-toggler{right:20px;bottom:20px}:host .chatbot{right:0;bottom:0;height:100%;border-radius:0;width:100%}:host .chatbot .chatbox{height:90%;padding:25px 15px 100px}:host .chatbot header span{display:block}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: HomeComponent, selector: "app-home", outputs: ["navigate"] }, { kind: "component", type: MessageComponent, selector: "app-message", inputs: ["isTyping", "messages", "suggestions"], outputs: ["sendMessage", "navigate"] }, { kind: "component", type: HelpSupportComponent, selector: "app-help-support", outputs: ["navigate"] }, { kind: "component", type: ChatHistoryComponent, selector: "app-chat-history", outputs: ["navigate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SuccessMessageComponent, selector: "app-success-message", outputs: ["navigate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ChatWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chat-widget', standalone: true, imports: [
+                        FormsModule,
+                        HomeComponent,
+                        MessageComponent,
+                        HelpSupportComponent,
+                        FormsModule,
+                        ChatHistoryComponent,
+                        NgClass,
+                        SuccessMessageComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"chatbot bg-white dark:bg-neutral-900 \">\r\n\r\n    <div>\r\n        @if (activeTab === 1) {\r\n        <div role=\"tabpanel\">\r\n            <app-home (navigate)=\"navigateToTab($event)\" />\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 2) {\r\n        <div role=\"tabpanel\">\r\n            <app-message [messages]=\"messages\" [isTyping]=\"isTyping\" (sendMessage)=\"sendMessage($event)\" (navigate)=\"navigateToTab($event)\"/>\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 3) {\r\n        <div role=\"tabpanel\">\r\n            <app-help-support (navigate)=\"navigateToTab($event)\"/>\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 4) {\r\n        <div role=\"tabpanel\">\r\n            <app-chat-history (navigate)=\"navigateToTab($event)\"/>\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 5) {\r\n        <div role=\"tabpanel\">\r\n            <app-success-message (navigate)=\"navigateToTab($event)\" /> \r\n        </div>\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"\">        \r\n        <nav class=\"flex justify-evenly\" aria-label=\"Tabs\" role=\"tablist\">\r\n            <button type=\"button\" (click)=\"setActiveTab(1)\" \r\n            [class.text-blue-500]=\"activeTab === 1\" \r\n            [class.text-neutral-300]=\"activeTab !== 1\"\r\n            class=\"py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap transition-colors  focus:outline-none flex flex-col gap-2\">\r\n\r\n                <div [ngClass]=\"activeTab === 1 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'\" class=\"px-4 py-2.5\">\r\n                    <svg class=\"shrink-0 size-5\" [class.text-black]=\"activeTab === 1\"   xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                        viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\">\r\n                        <path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n                        <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n                    </svg>\r\n                </div>\r\n\r\n                <span class=\"text-lg fw-4 hover:text-blue-200\">Home</span>\r\n            </button>\r\n\r\n            <button type=\"button\" (click)=\"setActiveTab(2)\" [class.font-bold]=\"activeTab === 2\"\r\n                [class.text-blue-500]=\"activeTab === 2\" [class.text-neutral-300]=\"activeTab !== 2\"\r\n                class=\"py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap hover:text-blue-200 focus:outline-none  flex flex-col gap-2\">\r\n                <div [ngClass]=\"activeTab === 2 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'\" class=\"px-4 py-2.5\">\r\n                <svg class=\"shrink-0 size-5\" [class.text-black]=\"activeTab === 2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                    viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n                    <circle cx=\"12\" cy=\"10\" r=\"3\"></circle>\r\n                    <path d=\"M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662\"></path>\r\n                </svg>\r\n                </div>\r\n                <span class=\"text-lg fw-6 hover:text-blue-200\">Message</span>\r\n            </button>\r\n\r\n            <button type=\"button\" (click)=\"setActiveTab(3)\" [class.font-bold]=\"activeTab === 3\"\r\n                [class.text-blue-500]=\"activeTab === 3\" [class.text-neutral-300]=\"activeTab !== 3\"\r\n                class=\"py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap hover:text-blue-200 focus:outline-none  flex flex-col gap-2\">\r\n                <div [ngClass]=\"activeTab === 3 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'\" class=\"px-4 py-2.5\">\r\n                <svg class=\"shrink-0 size-5\"  [class.text-black]=\"activeTab === 3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                    viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\">\r\n                    <path\r\n                        d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\">\r\n                    </path>\r\n                    <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n                </svg>\r\n                </div>\r\n                <span class=\"text-lg fw-6 hover:text-blue-200\">Help</span>\r\n            </button>\r\n        </nav>\r\n    </div>\r\n</div>", styles: [":host .chat-container{width:400px!important}:host .btn-round{border-radius:100%!important;width:40px!important;height:40px!important}:host .btn-round.btn-fab{position:fixed!important;bottom:20px!important;right:30px!important;width:60px!important;height:60px!important;border-radius:100%;box-shadow:0 6px 20px #0003}:host .btn-round.btn-fab i{position:relative!important;top:0!important;right:-18px!important}:host #send-btn{margin-bottom:10px!important;margin-right:0!important}:host .chatbot header{padding:10px!important;position:relative;text-align:center}:host .chatbot .chatbox{overflow-y:auto;height:550px;margin-bottom:40px!important}:host .chatbot :where(.chatbox,textarea)::-webkit-scrollbar{width:6px}:host .chatbot :where(.chatbox,textarea)::-webkit-scrollbar-track{border-radius:25px}:host .chatbot :where(.chatbox,textarea)::-webkit-scrollbar-thumb{border-radius:25px}@media (max-width: 490px){:host .chatbot-toggler{right:20px;bottom:20px}:host .chatbot{right:0;bottom:0;height:100%;border-radius:0;width:100%}:host .chatbot .chatbox{height:90%;padding:25px 15px 100px}:host .chatbot header span{display:block}}\n"] }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }] } });
+
+let isOpen;
+let confettiArray = [];
+const isChatOpen = () => {
+    return isOpen;
+};
+const closeChat = () => {
+    document.body.classList.remove("show-chatbot");
+    isOpen = false;
+};
+const toggleLivechat = () => {
+    if (isOpen) {
+        document.body.classList.remove("show-chatbot");
+        isOpen = false;
+    }
+    else {
+        document.body.classList.toggle("show-chatbot");
+        isOpen = true;
+    }
+    return isOpen;
+};
+
+class SupportButtonsComponent {
+    cssClass = 'fadeOut';
+    isOpen = false;
+    constructor() { }
+    ngOnInit() {
+        closeChat();
+    }
+    toggleFab() {
+        closeChat();
+        this.cssClass = this.cssClass === 'fadeIn' ? 'fadeOut' : 'fadeIn';
+    }
+    toggleLivechat() {
+        this.isOpen = toggleLivechat();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SupportButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SupportButtonsComponent, isStandalone: true, selector: "app-support-buttons", ngImport: i0, template: "<ul class=\"fab-options z-90 fixed bottom-25 right-5\" [class]=\"cssClass\">\r\n  <!-- <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Chat with Aide on Whatsapp</span>\r\n    <a class=\" bg-white text-green-600 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-brands-whatsapp fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li>\r\n  <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Chat with Aide on Telegram</span>\r\n    <a class=\" bg-white text-blue-400 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-brands-telegram fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li> -->\r\n  <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Live Chat</span>\r\n    <a (click)=\"toggleLivechat()\" class=\"bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-rr-robot fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li>\r\n  <!-- <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Send us a mail</span>\r\n    <a class=\"bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-rr-envelope fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li> -->\r\n</ul>\r\n\r\n<button class=\"fixed bottom-5 right-5 main z-90 animated fadeInUp fs-20 bg-linear-to-tl from-blue-500 to-blue-800 text-white btn-round btn-fab btn-fab-button dark:bg-dark\" (click)=\"toggleFab()\" (keydown)=\"toggleFab()\">\r\n  <div class=\"size-6\">\r\n    <i class='fi fi-rr-comment fs-30 relative'></i>\r\n  </div>\r\n</button>\r\n\r\n<app-chat-widget [isOpen]=\"isOpen || false\" />\r\n", styles: [":host .fadeIn{opacity:1!important;transform:scale(1)!important}:host .fadeOut{opacity:0!important;transform:scale(0)!important}:host .fab-options{list-style-type:none;opacity:0;transition:all .3s ease;transform:scale(0);transform-origin:85% bottom}:host .fab-options li{display:flex;justify-content:flex-end;padding:5px}:host .fab-options li .btn-fab{width:50px!important;height:50px!important;box-shadow:0 6px 20px #0003}:host .fab-options li .btn-fab i{position:relative!important;top:12px!important;right:-15px!important}:host .fab-options li .fab-label{padding:2px 10px;align-self:center;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:3px;font-size:13px;font-weight:400;box-shadow:0 6px 20px #0003;margin-right:10px}\n"], dependencies: [{ kind: "component", type: ChatWidgetComponent, selector: "app-chat-widget", inputs: ["isOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SupportButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-support-buttons', standalone: true, imports: [
+                        ChatWidgetComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"fab-options z-90 fixed bottom-25 right-5\" [class]=\"cssClass\">\r\n  <!-- <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Chat with Aide on Whatsapp</span>\r\n    <a class=\" bg-white text-green-600 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-brands-whatsapp fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li>\r\n  <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Chat with Aide on Telegram</span>\r\n    <a class=\" bg-white text-blue-400 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-brands-telegram fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li> -->\r\n  <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Live Chat</span>\r\n    <a (click)=\"toggleLivechat()\" class=\"bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-rr-robot fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li>\r\n  <!-- <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Send us a mail</span>\r\n    <a class=\"bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-rr-envelope fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li> -->\r\n</ul>\r\n\r\n<button class=\"fixed bottom-5 right-5 main z-90 animated fadeInUp fs-20 bg-linear-to-tl from-blue-500 to-blue-800 text-white btn-round btn-fab btn-fab-button dark:bg-dark\" (click)=\"toggleFab()\" (keydown)=\"toggleFab()\">\r\n  <div class=\"size-6\">\r\n    <i class='fi fi-rr-comment fs-30 relative'></i>\r\n  </div>\r\n</button>\r\n\r\n<app-chat-widget [isOpen]=\"isOpen || false\" />\r\n", styles: [":host .fadeIn{opacity:1!important;transform:scale(1)!important}:host .fadeOut{opacity:0!important;transform:scale(0)!important}:host .fab-options{list-style-type:none;opacity:0;transition:all .3s ease;transform:scale(0);transform-origin:85% bottom}:host .fab-options li{display:flex;justify-content:flex-end;padding:5px}:host .fab-options li .btn-fab{width:50px!important;height:50px!important;box-shadow:0 6px 20px #0003}:host .fab-options li .btn-fab i{position:relative!important;top:12px!important;right:-15px!important}:host .fab-options li .fab-label{padding:2px 10px;align-self:center;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:3px;font-size:13px;font-weight:400;box-shadow:0 6px 20px #0003;margin-right:10px}\n"] }]
+        }], ctorParameters: () => [] });
+
+const chat = {
+    url: 'https://backoffice.kreador.io',
+    db: "developer_odoodemo_db",
+    email: "info@kreador.io",
+    password: "admin",
+    payload: {
+        jsonrpc: "2.0",
+        method: "call",
+        params: {
+            service: "object",
+            method: "execute_kw",
+            args: []
+        }
+    }
+};
+
+class RequestService {
+    url = chat.url;
+    http = inject(HttpClient);
+    headers = {
+        "content-type": "application/json"
+    };
+    async get(routes, custom_url = false) {
+        const url = custom_url ? routes : this.url + routes;
+        return await new Promise(async (resolve, reject) => {
+            this.http.get(url, this.headers).subscribe((res) => {
+                resolve(res);
+            }, (err) => {
+                reject(err);
+            });
+        });
+    }
+    async post(routes, data, custom_url = false) {
+        const url = routes;
+        return await new Promise((resolve, reject) => {
+            this.http.post(url, data, {
+                headers: this.headers,
+                withCredentials: true
+            }).subscribe((response) => resolve(response), (error) => reject(error));
+        });
+    }
+    async update(routes, data, custom_url = false) {
+        const url = custom_url ? routes : this.url + routes;
+        return await new Promise((resolve, reject) => {
+            this.http.put(url, data).subscribe((response) => resolve(response), (error) => reject(error));
+        });
+    }
+    async delete(routes, data = {}, custom_url = false) {
+        const url = custom_url ? routes : this.url + routes;
+        return await new Promise((resolve, reject) => {
+            this.http.delete(url, data).subscribe((response) => resolve(response), (error) => reject(error));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RequestService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RequestService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/*
+ * Public API Surface of livechat-assistant
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChatWidgetComponent, LivechatAssistantComponent, LivechatAssistantService, RequestService, SupportButtonsComponent, closeChat, confettiArray, isChatOpen, isOpen, toggleLivechat };
+//# sourceMappingURL=livechat-assistant.mjs.map

package/fesm2022/livechat-assistant.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"livechat-assistant.mjs","sources":["../../../projects/livechat-assistant/src/lib/livechat-assistant.service.ts","../../../projects/livechat-assistant/src/lib/livechat-assistant.component.ts","../../../projects/livechat-assistant/src/lib/components/chat-history/chat-history.component.ts","../../../projects/livechat-assistant/src/lib/components/chat-history/chat-history.component.html","../../../projects/livechat-assistant/src/lib/components/help-support/help-support.component.ts","../../../projects/livechat-assistant/src/lib/components/help-support/help-support.component.html","../../../projects/livechat-assistant/src/lib/components/home/home.component.ts","../../../projects/livechat-assistant/src/lib/components/home/home.component.html","../../../projects/livechat-assistant/src/lib/components/message/message.component.ts","../../../projects/livechat-assistant/src/lib/components/message/message.component.html","../../../projects/livechat-assistant/src/lib/components/success-message/success-message.component.ts","../../../projects/livechat-assistant/src/lib/components/success-message/success-message.component.html","../../../projects/livechat-assistant/src/lib/components/chat-widget/chat-widget.component.ts","../../../projects/livechat-assistant/src/lib/components/chat-widget/chat-widget.component.html","../../../projects/livechat-assistant/src/lib/utilities/helper.ts","../../../projects/livechat-assistant/src/lib/components/support-buttons/support-buttons.component.ts","../../../projects/livechat-assistant/src/lib/components/support-buttons/support-buttons.component.html","../../../projects/livechat-assistant/src/lib/environment/environment.test.ts","../../../projects/livechat-assistant/src/lib/services/request.ts","../../../projects/livechat-assistant/src/public-api.ts","../../../projects/livechat-assistant/src/livechat-assistant.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class LivechatAssistantService {\r\n\r\n  constructor() { }\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'lib-livechat-assistant',\r\n  imports: [],\r\n  template: `\r\n    <p>\r\n      livechat-assistant works!\r\n    </p>\r\n  `,\r\n  styles: ``\r\n})\r\nexport class LivechatAssistantComponent {\r\n\r\n}\r\n","import { Component, ChangeDetectionStrategy, EventEmitter, Output, } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'app-chat-history',\r\n  imports: [],\r\n  templateUrl: './chat-history.component.html',\r\n  styleUrl: './chat-history.component.scss',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ChatHistoryComponent {\r\n  @Output() navigate= new EventEmitter<number>();\r\n\r\n  conversations = [\r\n    {\r\n      id: 1,\r\n      name: 'Costa Quinn',\r\n      avatar: true,\r\n      lastMessage: 'Yes, you can!',\r\n      time: '11M',\r\n      status: 'read',\r\n      color: 'bg-red-600',\r\n      online: true,\r\n      initials: ''\r\n    },\r\n    {\r\n      id: 2,\r\n      name: 'Rachel Doe',\r\n      initials: 'R',\r\n      color: 'bg-blue-600',\r\n      lastMessage: 'When using open method, const select = n...',\r\n      time: '14M',\r\n      unreadCount: 1,\r\n      online: false,\r\n      avatar:false\r\n    },\r\n    {\r\n      id: 3,\r\n      name: 'Lewis Clarke',\r\n      avatar: true,\r\n      lastMessage: 'Have a great all free! 😊',\r\n      time: '15M',\r\n      online: true,\r\n      status: 'read',\r\n      color: 'bg-blue-400'\r\n    },\r\n    {\r\n      id: 4,\r\n      name: 'Technical issues',\r\n      initials: 'T',\r\n      color: 'bg-orange-500',\r\n      lastMessage: 'Great!',\r\n      time: '35M',\r\n      status: 'read',\r\n      hasAttachment: true,\r\n      online:false\r\n    },\r\n    {\r\n      id: 5,\r\n      name: 'Bob Dean',\r\n      initials: 'B',\r\n      color: 'bg-pink-500',\r\n      lastMessage: 'Hey Preline team, I got an p3p48 while using...',\r\n      time: '1H',\r\n      unreadCount: 1,\r\n      online:true\r\n    },\r\n    {\r\n      id: 6,\r\n      name: 'Mark Colbert',\r\n      initials: 'M',\r\n      color: 'bg-teal-500',\r\n      lastMessage: 'Voice message',\r\n      time: '6DM',\r\n      status: 'delivered',\r\n      online: false\r\n    },\r\n    {\r\n      id: 7,\r\n      name: 'Ella Lauda',\r\n      avatar: true,\r\n      lastMessage: 'I am really impressed! Can\\'t wait...',\r\n      time: '37M',\r\n      online: false\r\n    }\r\n  ];\r\n\r\n  selectConversation(id: number, tabIndex:number) {\r\n    console.log('Selected conversation:', id);\r\n    this.navigate.emit(tabIndex);\r\n  }\r\n  \r\n  navigateToTab(tabIndex:number) {\r\n    this.navigate.emit(tabIndex);\r\n  }\r\n\r\n}\r\n","<div class=\"max-h-[600px] rounded-xl w-full flex flex-col justify-center items-center\">\r\n  <div\r\n  class=\"flex items-center justify-between px-4 py-5 dark:bg-neutral-700/20 shadow-xl bg-neutral-50 hover:bg-neutral-800/50 rounded-xl w-full\">\r\n          <h3 class=\"font-semibold text-neutral-800 dark:text-neutral-200 fs-16\">Messages</h3> \r\n  </div>\r\n\r\n    <!-- <div class=\"flex gap-2\">      \r\n      <button (click)=\"navigateToTab(2)\" class=\"mt-4 mb-2 bg-red-600 text-white rounded-md hover:bg-blue-700 transition w-fit\">\r\n        <p class=\"text-center px-4 py-1.5 text-sm m-0\">Ask AI question</p> \r\n      </button>\r\n      <button (click)=\"navigateToTab(2)\" class=\"mt-4 mb-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition w-fit\">\r\n        <p class=\"text-center px-4 py-1.5 text-sm m-0\">Chat with Live Agent</p> \r\n      </button>\r\n    </div> -->\r\n\r\n  <div class=\"flex-1 overflow-y-auto hideScroll\">\r\n    @for (conversation of conversations; track $index) {\r\n\r\n      <div  (click)=\"selectConversation(conversation.id, 2)\"\r\n        class=\"flex items-center gap-3 px-4 py-3 hover:bg-neutral-800 cursor-pointer transition-colors\">\r\n    \r\n        <!-- Avatar -->\r\n        <div class=\"relative flex-shrink-0\">\r\n          @if (conversation.avatar) {\r\n            <div [class]=\"'w-12 h-12 flex items-center font-semibold justify-center rounded-full overflow-hidden' + conversation.color\">\r\n              <h1 class=\"text-white text-xl\">AI</h1>\r\n            </div>\r\n          }\r\n\r\n          @if (!conversation.avatar && conversation.initials) {\r\n            <div [class]=\"'w-12 h-12 rounded-full flex items-center justify-center text-white font-semibold text-xl' + (conversation.color || 'bg-gray-500')\">\r\n              {{ conversation.initials }}\r\n            </div>\r\n          }\r\n\r\n          @if (conversation.online) {\r\n            <span class=\"absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full\"></span>\r\n          }\r\n        </div>\r\n    \r\n        <div class=\"flex-1 min-w-0\">\r\n          <div class=\"flex items-center justify-between mb-1\">\r\n            <h3 class=\"font-semibold text-neutral-800 dark:text-white fs-16 truncate\">{{ conversation.name }}</h3>\r\n            <span class=\"text-neutral-800 dark:text-neutral-400 text-xs\">Date </span>\r\n           </div>\r\n          <div class=\"flex items-center justify-between\">\r\n            <p class=\"text-sm text-neutral-400 truncate flex items-center gap-1\">\r\n              @if (conversation.hasAttachment) {\r\n                <span class=\"text-neutral-400\">📎</span>\r\n              }\r\n              {{ conversation.lastMessage }}\r\n            </p>\r\n            <div class=\"flex items-center gap-2 flex-shrink-0 ml-2\">\r\n\r\n              @if (conversation.status === 'read') {\r\n                <svg class=\"w-4 h-4 text-green-400\" fill=\"currentColor\"\r\n                  viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z\" />\r\n                </svg>\r\n              }\r\n\r\n              @if (conversation.status === 'delivered') {\r\n                <svg class=\"w-4 h-4 text-blue-600\" fill=\"currentColor\"\r\n                  viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z\" />\r\n                </svg>\r\n              }\r\n\r\n              @if (conversation.unreadCount) {\r\n                <span\r\n                  class=\"bg-blue-600 text-white text-xs font-semibold rounded-full w-5 h-5 flex items-center justify-center\">\r\n                  {{ conversation.unreadCount }}\r\n                </span>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>","import { NgIf } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';\r\nimport { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'app-help-support',\r\n  imports: [ReactiveFormsModule, NgIf],\r\n  templateUrl: './help-support.component.html',\r\n  styleUrl: './help-support.component.scss',  \r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class HelpSupportComponent {\r\n  showTooltip = false;\r\n  contactForm!: FormGroup;\r\n  @Output() navigate= new EventEmitter<number>();\r\n\r\n  constructor(private fb: FormBuilder) {}\r\n\r\n  ngOnInit() {\r\n    this.contactForm = this.fb.group({\r\n      name: ['', [Validators.required]],\r\n      email: ['', [Validators.required, Validators.email]],\r\n      subject: ['', [Validators.required]],\r\n      message: ['', [Validators.required]]\r\n    });\r\n  }\r\n\r\n  onSubmit() {\r\n    if (this.contactForm.valid) {\r\n      console.log('Form submitted:', this.contactForm.value);\r\n      \r\n      this.contactForm.reset();\r\n    } else {\r\n      // Mark all fields as touched to show validation errors\r\n      Object.keys(this.contactForm.controls).forEach(key => {\r\n        this.contactForm.get(key)?.markAsTouched();\r\n      });\r\n    }\r\n\r\n}\r\n\r\nnavigateToTab(tabIndex:number) {\r\n  this.navigate.emit(tabIndex);\r\n}\r\n}","<div class=\"rounded-lg flex flex-col overflow-hidden max-h-[600px]\">\r\n <div class=\"relative h-32 bg-gradient-to-br from-cyan-300 via-blue-600 to-orange-400 overflow-hidden\">\r\n    <div class=\"absolute inset-0\">\r\n      <div class=\"absolute top-0 left-0 w-24 h-24 bg-blue-700 transform rotate-45 -translate-x-8 -translate-y-8\"></div>\r\n      <div class=\"absolute top-4 right-0 w-32 h-32 bg-orange-400 transform rotate-12 translate-x-12\"></div>\r\n      <div class=\"absolute bottom-0 left-8 w-28 h-28 bg-cyan-400 transform -rotate-12 translate-y-12\"></div>\r\n    </div>\r\n    \r\n    \r\n    <!-- Logo -->\r\n    <div class=\"absolute bottom-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg\">\r\n      <svg class=\"w-6 h-6 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"/>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"p-4 overflow-y-auto hideScroll\">\r\n    \r\n    <h2 class=\"text-lg font-semibold text-neutral-800 dark:text-neutral-200 mb-1\">Send a message</h2>\r\n    <p class=\"text-sm text-neutral-500 dark:text-neutral-200 mb-6\">We'll get back to you in a few hours.</p>\r\n    \r\n    <form [formGroup]=\"contactForm\" (ngSubmit)=\"onSubmit()\" class=\"space-y-4\">\r\n      \r\n      <div>\r\n        <label for=\"name\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Name</label>\r\n        <input \r\n          type=\"text\" \r\n          id=\"name\"\r\n          formControlName=\"name\"\r\n          placeholder=\"John Doe\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n          [class.border-red-500]=\"contactForm.get('name')?.invalid && contactForm.get('name')?.touched\">\r\n        <p *ngIf=\"contactForm.get('name')?.invalid && contactForm.get('name')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">Name is required</p>\r\n      </div>\r\n      \r\n      <!-- Email Field -->\r\n      <div class=\"relative\">\r\n        <label for=\"email\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Email</label>\r\n        <input \r\n          type=\"email\" \r\n          id=\"email\"\r\n          formControlName=\"email\"\r\n          placeholder=\"john@site.co\"\r\n          (focus)=\"showTooltip = true\"\r\n          (blur)=\"showTooltip = false\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n          [class.border-red-500]=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\">\r\n        \r\n        <!-- Tooltip -->\r\n        <div *ngIf=\"showTooltip\" \r\n             class=\"absolute right-0 top-0 mt-1 mr-2 bg-neutral-900 dark:text-neutral-200 text-white text-xs px-3 py-2 rounded shadow-lg z-10 whitespace-nowrap\">\r\n          Existing accounts should use <br>your account to access the <br>source code.\r\n          <div class=\"absolute top-1/2 -right-1 transform -translate-y-1/2 w-2 h-2 bg-neutral-900 dark:text-neutral-200 rotate-45\"></div>\r\n        </div>\r\n        \r\n        <p *ngIf=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">\r\n          <span *ngIf=\"contactForm.get('email')?.errors?.['required']\">Email is required</span>\r\n          <span *ngIf=\"contactForm.get('email')?.errors?.['email']\">Invalid email format</span>\r\n        </p>\r\n      </div>\r\n      \r\n      <!-- Subject Field -->\r\n      <div>\r\n        <label for=\"subject\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Subject</label>\r\n        <input \r\n          type=\"text\" \r\n          id=\"subject\"\r\n          formControlName=\"subject\"\r\n          placeholder=\"Preline Pro\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n          [class.border-red-500]=\"contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched\">\r\n        <p *ngIf=\"contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">Subject is required</p>\r\n      </div>\r\n      \r\n      <!-- Message Field -->\r\n      <div>\r\n        <label for=\"message\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">How can we help?</label>\r\n        <textarea \r\n          id=\"message\"\r\n          formControlName=\"message\"\r\n          rows=\"4\"\r\n          placeholder=\"Message...\"\r\n          class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\r\n          [class.border-red-500]=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\"></textarea>\r\n        <p *ngIf=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\" \r\n           class=\"text-xs text-red-500 mt-1\">Message is required</p>\r\n      </div>\r\n      \r\n      <!-- Submit Button -->\r\n      <button \r\n        type=\"submit\"\r\n        [disabled]=\"contactForm.invalid\"\r\n        (click)=\"navigateToTab(5)\"\r\n        class=\"w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed\">\r\n        Send message\r\n      </button>\r\n      \r\n    </form>\r\n    \r\n  </div>\r\n  </div>\r\n\r\n","import { ChangeDetectionStrategy, Component, Output, EventEmitter, ViewEncapsulation } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'app-home',\r\n  imports: [],\r\n  templateUrl: './home.component.html',\r\n  styleUrl: './home.component.scss',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None\r\n})\r\nexport class HomeComponent {\r\n  @Output() navigate= new EventEmitter<number>();\r\n\r\n  navigateToTab(tabIndex: number) {\r\n    this.navigate.emit(tabIndex);\r\n  }\r\n}\r\n","<div class=\"rounded-lg flex flex-col overflow-hidden max-h-[600px]\">\r\n      <div class=\"relative h-32 bg-gradient-to-br from-cyan-300 via-blue-600 to-orange-400 overflow-hidden\">\r\n      <div class=\"absolute inset-0\">\r\n        <div class=\"absolute top-0 left-0 w-24 h-24 bg-blue-700 transform rotate-45 -translate-x-8 -translate-y-8\"></div>\r\n        <div class=\"absolute top-4 right-0 w-32 h-32 bg-orange-400 transform rotate-12 translate-x-12\"></div>\r\n        <div class=\"absolute bottom-0 left-8 w-28 h-28 bg-cyan-400 transform -rotate-12 translate-y-12\"></div>\r\n      </div>\r\n      <button class=\"absolute top-3 right-3 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/30\">\r\n        ×\r\n      </button>\r\n      \r\n      <!-- Logo -->\r\n      <div class=\"absolute bottom-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg\">\r\n        <svg class=\"w-6 h-6 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"/>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex-1 overflow-y-auto p-4 hideScroll\">\r\n      <div>\r\n        <h2 class=\"text-lg font-semibold dark:text-neutral-200 text-gray-800 mt-4\">Hi, Penny 👋</h2>\r\n        <p class=\"text-sm text-neutral-500  dark:text-neutral-200 mb-5\">Preline support team is here to help.</p>\r\n        \r\n        <button (click)=\"navigateToTab(3)\" class=\"w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition mb-6\">\r\n          Send us a message\r\n        </button>\r\n        \r\n        <div class=\"space-y-4\">\r\n          <p class=\"text-sm font-semibold text-neutral-500  dark:text-neutral-200\">Popular topics</p>\r\n          \r\n          <a href=\"#\" class=\"flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n            <div>\r\n              <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">Live Chat</h3>\r\n              <p class=\"text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n            </div>\r\n            <svg class=\"w-5 h-5 text-neutral-400 group-hover:text-neutral-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n            </svg>\r\n          </a>\r\n          \r\n          <a href=\"#\" class=\"flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n            <div>\r\n                <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">AI Chat</h3>\r\n                <p class=\"text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n            </div>\r\n            <svg class=\"w-5 h-5 text-neutral-400 group-hover:text-neutral-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n            </svg>\r\n          </a>\r\n          \r\n          <a href=\"#\" class=\"flex  mb-2 items-center justify-between p-3 dark:bg-neutral-800 bg-gray-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n            <div>\r\n                <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">Support Chat</h3>\r\n                <p class=\"text-sm text-gray-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n            </div>\r\n            <svg class=\"w-5 h-5 text-gray-400 group-hover:text-gray-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n            </svg>\r\n          </a>\r\n        </div>\r\n      </div>\r\n      \r\n      <div class=\"border-t border-neutral-700\"></div>","import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'app-message',\r\n  imports: [FormsModule],\r\n  templateUrl: './message.component.html',\r\n  styleUrl: './message.component.scss',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class MessageComponent {\r\n  newMessage = '';\r\n  noMessage = false;\r\n  @Input() isTyping = false;\r\n  @Input() messages: any;\r\n  @Input() suggestions: string[] = ['Health', 'Learn', 'Technology', 'Science'];\r\n\r\n  @Output() sendMessage = new EventEmitter();\r\n  @Output() navigate= new EventEmitter<number>();\r\n\r\n  onSendMessage() {\r\n    if (this.newMessage.trim()) {\r\n      this.sendMessage.emit(this.newMessage);\r\n      this.newMessage = '';\r\n      this.noMessage = true\r\n    }\r\n  }\r\n\r\n  onFileSelect(event: any) {\r\n    const file = event.target.files[0];\r\n    if (file) {\r\n      console.log('File selected:', file.name);\r\n      // Handle file upload here\r\n    }\r\n  }\r\n\r\n  return(tabIndex:number) {\r\n    this.navigate.emit(tabIndex);\r\n  }\r\n\r\n    // private scrollToBottom(): void {\r\n  //   if (this.messagesContainer) {\r\n  //     const element = this.messagesContainer.nativeElement;\r\n  //     element.scrollTop = element.scrollHeight;\r\n  //   }\r\n  // }\r\n}\r\n","<div class=\"flex flex-col rounded-xl\" [class]=\"noMessage ? 'max-h-[600px]' : 'h-[600px]'\">\r\n    <div\r\n        class=\"flex items-center justify-between px-4 py-3 dark:bg-neutral-700/20 shadow-xl bg-neutral-50 hover:bg-neutral-800/50 rounded-xl\">\r\n        <div class=\"flex items-center gap-3\">\r\n            <button class=\"cursor-pointer\" (click)=\"return(4)\">\r\n                <svg class=\"w-5 h-5 text-neutral-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\r\n                </svg>\r\n            </button>\r\n            <img src=\"https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff\"\r\n                class=\"w-10 h-10 rounded-full\" alt=\"Agent\">\r\n            <div>\r\n                <h3 class=\"font-semibold text-neutral-800 dark:text-neutral-200 fs-16\">AI Bot</h3>\r\n                <p class=\"text-green-300/80 fs-14\">Online</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"text-center h-full flex flex-col justify-center items-center relative animate-scale-in\">\r\n            <h2 class=\"text-2xl font-bold text-gray-800 mb-2 dark:text-neutral-200\">Hey Penny!</h2>\r\n        <p class=\"text-gray-600 text-sm dark:text-neutral-200/80\">\r\n            You can ask me anything.\r\n        </p>    \r\n      </div>\r\n\r\n      \r\n    @if(noMessage) {\r\n    <div class=\"flex-1 overflow-y-auto px-4 py-6 space-y-4 hideScroll\">\r\n        @for (message of messages; track $index) {\r\n        <div [class.flex-row-reverse]=\"message.sender === 'customer'\" class=\"flex gap-3 items-start\">\r\n\r\n            @if (message.sender === 'agent') {\r\n            <img src=\"https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff\"\r\n                class=\"w-8 h-8 rounded-full flex-shrink-0\" alt=\"Avatar\" />\r\n            }\r\n\r\n            <div [class.items-end]=\"message.sender === 'customer'\" class=\"flex flex-col max-w-xs\">\r\n\r\n                <div [class.bg-blue-600]=\"message.sender === 'customer'\"\r\n                    [class.text-white]=\"message.sender === 'customer'\" [class.bg-white]=\"message.sender === 'agent'\"\r\n                    [class.text-gray-800]=\"message.sender === 'agent'\" class=\"rounded-2xl px-4 py-2.5 shadow-sm\">\r\n                    <p class=\"text-sm whitespace-pre-wrap fs-16 \">{{ message.text }}</p>\r\n                </div>\r\n                <span class=\"text-sm text-neutral-300 mt-1 px-1\">{{ message.time }}</span>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n\r\n\r\n        @if (isTyping) {\r\n        <div class=\"flex gap-3 items-start\">\r\n            <img src=\"https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff\"\r\n                class=\"w-8 h-8 rounded-full\" alt=\"Agent\">\r\n            <div class=\"bg-white rounded-2xl px-4 py-3 shadow-sm\">\r\n                <div class=\"flex gap-1\">\r\n                    <span class=\"w-2 h-2 bg-gray-400 rounded-full animate-bounce\"></span>\r\n                    <span class=\"w-2 h-2 bg-gray-400 rounded-full animate-bounce\" style=\"animation-delay: 0.2s\"></span>\r\n                    <span class=\"w-2 h-2 bg-gray-400 rounded-full animate-bounce\" style=\"animation-delay: 0.4s\"></span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n        <div>\r\n            <div class=\"flex flex-wrap justify-center gap-1.5 sm:gap-2 bg-transparent scroll-xcontainer\">\r\n                @for (suggestion of suggestions; track $index) {\r\n                    <button (click)=\"newMessage = suggestion; onSendMessage()\" class=\"py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm bg-linear-to-tl from-blue-500 to-blue-800 text-white rounded-lg focus:outline-hidden \">\r\n                        {{ suggestion }}\r\n                      </button>\r\n                }\r\n              </div>\r\n        </div>\r\n\r\n    <div class=\"px-4\">\r\n\r\n        <div class=\"flex justify-between items-center w-full py-2.5\">\r\n            <div class=\"flex gap-2 w-full\">\r\n                <button (click)=\"fileInput.click()\"\r\n                    class=\"text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" />\r\n                    </svg>\r\n                </button>\r\n                <input #fileInput type=\"file\" class=\"hidden\" (change)=\"onFileSelect($event)\">\r\n\r\n                <button class=\"text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n                    </svg>\r\n                </button>\r\n\r\n                <input [(ngModel)]=\"newMessage\" (keyup.enter)=\"onSendMessage()\" type=\"text\"\r\n                    placeholder=\"Type a message...\"\r\n                    class=\"flex-1 py-3 dark:text-white text-black rounded-md fs-16 focus:outline-none focus:ring-0 focus:ring-none w-full\" />\r\n            </div>\r\n\r\n            <div class=\"flex gap-2 justify-end\">\r\n                <button (click)=\"onSendMessage()\" [disabled]=\"!newMessage.trim()\"\r\n                    class=\"bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed p-2\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M12 19l9 2-9-18-9 18 9-2zm0 0v-8\" />\r\n                    </svg>\r\n                </button>\r\n                <button class=\"text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100\">\r\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                            d=\"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>","import { Component, ChangeDetectionStrategy, EventEmitter, Output, } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'app-success-message',\r\n  imports: [],\r\n  templateUrl: './success-message.component.html',\r\n  styleUrl: './success-message.component.scss',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SuccessMessageComponent {\r\n\r\n  @Output() navigate= new EventEmitter<number>();\r\n  confettiArray: Array<{left: number, delay: number, color: string}> = [];\r\n\r\n  ngOnInit() {\r\n    this.generateConfetti();\r\n  }\r\n\r\n  navigateToTab(tabIndex:number) {\r\n    this.navigate.emit(tabIndex);\r\n  }\r\n  generateConfetti() {\r\n    const colors = ['#10B981', '#3B82F6', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];\r\n    \r\n    for (let i = 0; i < 50; i++) {\r\n      this.confettiArray.push({\r\n        left: Math.random() * 100,\r\n        delay: Math.random() * 2,\r\n        color: colors[Math.floor(Math.random() * colors.length)]\r\n      });\r\n    }\r\n  }\r\n}\r\n","<div class=\"bg-white rounded-lg h-[600px]\">\r\n<div class=\"confetti-container\">\r\n    @for (confetti of confettiArray; track $index) {\r\n        <div\r\n             [style.left.%]=\"confetti.left\"\r\n             [style.animation-delay.s]=\"confetti.delay\"\r\n             [style.background-color]=\"confetti.color\"\r\n             class=\"confetti\">\r\n            </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"p-4 text-center h-full flex flex-col justify-center items-center relative animate-scale-in\">\r\n    <div class=\"mb-6 flex justify-center items-center\">\r\n      <div class=\"w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center animate-bounce-in\">\r\n        <svg class=\"w-8 h-8 text-teal-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"/>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Title -->\r\n    <h2 class=\"text-2xl font-bold text-gray-800 mb-4\">Email Delivered!</h2>\r\n    <p class=\"text-gray-600 text-sm mb-2\">\r\n      You're set on chatting with an online agent or ask your our AI robot your questions.\r\n    </p>\r\n\r\n    <button (click)=\"navigateToTab(2)\" class=\"mt-6 bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition\">\r\n      Start a new chat\r\n    </button>\r\n\r\n  </div>\r\n</div>","import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { NgClass } from '@angular/common';\r\nimport { ChatHistoryComponent } from '../chat-history/chat-history.component';\r\nimport { HelpSupportComponent } from '../help-support/help-support.component';\r\nimport { HomeComponent } from '../home/home.component';\r\nimport { MessageComponent } from '../message/message.component';\r\nimport { SuccessMessageComponent } from '../success-message/success-message.component';\r\n@Component({\r\n  selector: 'app-chat-widget',\r\n  standalone: true,\r\n  imports: [\r\n    FormsModule,\r\n    HomeComponent,\r\n    MessageComponent,\r\n    HelpSupportComponent,\r\n    FormsModule,\r\n    ChatHistoryComponent,\r\n    NgClass,\r\n    SuccessMessageComponent\r\n],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './chat-widget.component.html',\r\n  styleUrl: './chat-widget.component.scss',\r\n  encapsulation: ViewEncapsulation.None\r\n})\r\nexport class ChatWidgetComponent {\r\n  isTyping = false;\r\n  @Input() isOpen = false;\r\n  activeTab = 1;\r\n\r\n  setActiveTab(tab: number) {\r\n    this.activeTab = tab;\r\n  }\r\n\r\n  navigateToTab(tab:number) {\r\n    this.setActiveTab(tab); \r\n  }\r\n\r\n  messages = [\r\n    {\r\n      id: 1,\r\n      sender: 'agent',\r\n      text: 'Hi, I\\'d like to ask some questions. Can I use Preline UI on a client project?',\r\n      time: '9:40 AM'\r\n    },\r\n    {\r\n      id: 2,\r\n      sender: 'agent',\r\n      text: 'https://preline.co/',\r\n      time: '9:41 AM',\r\n    },\r\n    {\r\n      id: 3,\r\n      sender: 'customer',\r\n      text: 'Hi, I\\'d like to ask some questions. Can I use Preline UI on a client project?',\r\n      time: '11:27 AM'\r\n    },\r\n    {\r\n      id: 4,\r\n      sender: 'customer',\r\n      text: 'Yes, you can! 😊',\r\n      time: '11:28 AM'\r\n    }\r\n  ];\r\n\r\n  sendMessage(message: string) {\r\n    if (message.trim()) {\r\n      this.messages.push({\r\n        id: this.messages.length + 1,\r\n        sender: 'customer',\r\n        text: message,\r\n        time: new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })\r\n      }); \r\n      console.log(message)     \r\n      // Simulate agent typing\r\n      this.isTyping = true;\r\n      setTimeout(() => {\r\n        this.isTyping = false;\r\n      }, 2000);\r\n    }\r\n  }\r\n\r\n}\r\n","<div class=\"chatbot bg-white dark:bg-neutral-900 \">\r\n\r\n    <div>\r\n        @if (activeTab === 1) {\r\n        <div role=\"tabpanel\">\r\n            <app-home (navigate)=\"navigateToTab($event)\" />\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 2) {\r\n        <div role=\"tabpanel\">\r\n            <app-message [messages]=\"messages\" [isTyping]=\"isTyping\" (sendMessage)=\"sendMessage($event)\" (navigate)=\"navigateToTab($event)\"/>\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 3) {\r\n        <div role=\"tabpanel\">\r\n            <app-help-support (navigate)=\"navigateToTab($event)\"/>\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 4) {\r\n        <div role=\"tabpanel\">\r\n            <app-chat-history (navigate)=\"navigateToTab($event)\"/>\r\n        </div>\r\n        }\r\n\r\n        @if (activeTab === 5) {\r\n        <div role=\"tabpanel\">\r\n            <app-success-message (navigate)=\"navigateToTab($event)\" /> \r\n        </div>\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"\">        \r\n        <nav class=\"flex justify-evenly\" aria-label=\"Tabs\" role=\"tablist\">\r\n            <button type=\"button\" (click)=\"setActiveTab(1)\" \r\n            [class.text-blue-500]=\"activeTab === 1\" \r\n            [class.text-neutral-300]=\"activeTab !== 1\"\r\n            class=\"py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap transition-colors  focus:outline-none flex flex-col gap-2\">\r\n\r\n                <div [ngClass]=\"activeTab === 1 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'\" class=\"px-4 py-2.5\">\r\n                    <svg class=\"shrink-0 size-5\" [class.text-black]=\"activeTab === 1\"   xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                        viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\">\r\n                        <path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n                        <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n                    </svg>\r\n                </div>\r\n\r\n                <span class=\"text-lg fw-4 hover:text-blue-200\">Home</span>\r\n            </button>\r\n\r\n            <button type=\"button\" (click)=\"setActiveTab(2)\" [class.font-bold]=\"activeTab === 2\"\r\n                [class.text-blue-500]=\"activeTab === 2\" [class.text-neutral-300]=\"activeTab !== 2\"\r\n                class=\"py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap hover:text-blue-200 focus:outline-none  flex flex-col gap-2\">\r\n                <div [ngClass]=\"activeTab === 2 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'\" class=\"px-4 py-2.5\">\r\n                <svg class=\"shrink-0 size-5\" [class.text-black]=\"activeTab === 2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                    viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n                    <circle cx=\"12\" cy=\"10\" r=\"3\"></circle>\r\n                    <path d=\"M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662\"></path>\r\n                </svg>\r\n                </div>\r\n                <span class=\"text-lg fw-6 hover:text-blue-200\">Message</span>\r\n            </button>\r\n\r\n            <button type=\"button\" (click)=\"setActiveTab(3)\" [class.font-bold]=\"activeTab === 3\"\r\n                [class.text-blue-500]=\"activeTab === 3\" [class.text-neutral-300]=\"activeTab !== 3\"\r\n                class=\"py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap hover:text-blue-200 focus:outline-none  flex flex-col gap-2\">\r\n                <div [ngClass]=\"activeTab === 3 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'\" class=\"px-4 py-2.5\">\r\n                <svg class=\"shrink-0 size-5\"  [class.text-black]=\"activeTab === 3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                    viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\">\r\n                    <path\r\n                        d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\">\r\n                    </path>\r\n                    <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n                </svg>\r\n                </div>\r\n                <span class=\"text-lg fw-6 hover:text-blue-200\">Help</span>\r\n            </button>\r\n        </nav>\r\n    </div>\r\n</div>","export let isOpen: boolean;\r\nexport let confettiArray: Array<{left: number, delay: number, color: string}> = [];\r\n\r\nexport const isChatOpen = ()=> {\r\n  return isOpen;\r\n}\r\n\r\nexport const closeChat=()=> {\r\n  document.body.classList.remove(\"show-chatbot\");\r\n  isOpen = false;\r\n}\r\n\r\nexport const toggleLivechat = () => {\r\n  if (isOpen) {\r\n    document.body.classList.remove(\"show-chatbot\");\r\n    isOpen = false;\r\n  } else {\r\n    document.body.classList.toggle(\"show-chatbot\");\r\n    isOpen = true;\r\n  }\r\n  return isOpen;\r\n}\r\n\r\n","import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';\r\nimport { ChatWidgetComponent } from '../chat-widget/chat-widget.component';\r\nimport { closeChat, toggleLivechat } from '../../utilities';\r\n\r\n@Component({\r\n  selector: 'app-support-buttons',\r\n  templateUrl: './support-buttons.component.html',\r\n  styleUrls: ['./support-buttons.component.scss'],\r\n  standalone: true,\r\n  imports: [\r\n    ChatWidgetComponent\r\n  ],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SupportButtonsComponent implements OnInit {\r\n  cssClass: 'fadeIn' | 'fadeOut' = 'fadeOut';\r\n  isOpen = false;\r\n\r\n  constructor() {}\r\n\r\n  ngOnInit(): void {\r\n    closeChat();\r\n  }\r\n\r\n  toggleFab() {\r\n    closeChat();\r\n    this.cssClass = this.cssClass === 'fadeIn' ? 'fadeOut' : 'fadeIn';\r\n  }\r\n\r\n  toggleLivechat() {\r\n    this.isOpen = toggleLivechat();\r\n  }\r\n}\r\n","<ul class=\"fab-options z-90 fixed bottom-25 right-5\" [class]=\"cssClass\">\r\n  <!-- <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Chat with Aide on Whatsapp</span>\r\n    <a class=\" bg-white text-green-600 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-brands-whatsapp fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li>\r\n  <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Chat with Aide on Telegram</span>\r\n    <a class=\" bg-white text-blue-400 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-brands-telegram fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li> -->\r\n  <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Live Chat</span>\r\n    <a (click)=\"toggleLivechat()\" class=\"bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-rr-robot fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li>\r\n  <!-- <li>\r\n    <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Send us a mail</span>\r\n    <a class=\"bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n      <div class=\"size-6\">\r\n        <i class='fi fi-rr-envelope fs-20'></i>\r\n      </div>\r\n    </a>\r\n  </li> -->\r\n</ul>\r\n\r\n<button class=\"fixed bottom-5 right-5 main z-90 animated fadeInUp fs-20 bg-linear-to-tl from-blue-500 to-blue-800 text-white btn-round btn-fab btn-fab-button dark:bg-dark\" (click)=\"toggleFab()\" (keydown)=\"toggleFab()\">\r\n  <div class=\"size-6\">\r\n    <i class='fi fi-rr-comment fs-30 relative'></i>\r\n  </div>\r\n</button>\r\n\r\n<app-chat-widget [isOpen]=\"isOpen || false\" />\r\n","export const chat = {\r\n    url: 'https://backoffice.kreador.io',\r\n    db: \"developer_odoodemo_db\",\r\n    email: \"info@kreador.io\",\r\n    password: \"admin\",\r\n    payload: {\r\n        jsonrpc: \"2.0\", \r\n        method: \"call\", \r\n        params: {\r\n            service: \"object\", \r\n            method: \"execute_kw\",\r\n            args: []\r\n        }\r\n    }\r\n}","import { Injectable, OnInit, inject } from '@angular/core';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport { chat } from '../environment/environment.test';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class RequestService {\r\n  url: string = chat.url;\r\n  private http: HttpClient = inject(HttpClient)\r\n  headers: any = {\r\n    \"content-type\": \"application/json\"\r\n  };\r\n\r\n  async get(routes: string, custom_url: boolean = false) {\r\n    const url = custom_url ? routes : this.url + routes;\r\n    return await new Promise(async (resolve, reject) => {\r\n      this.http.get(url, this.headers).subscribe((res: any) => {\r\n        resolve(res)\r\n      }, (err: any) => {\r\n        reject(err);\r\n      })\r\n    });\r\n  }\r\n\r\n  async post(routes: string, data: any, custom_url: boolean = false) {\r\n    const url = routes;\r\n    return await new Promise((resolve, reject) => {\r\n      this.http.post(url, data, {\r\n        headers: this.headers,\r\n        withCredentials: true \r\n      }).subscribe(\r\n        (response) => resolve(response),\r\n        (error) => reject(error)\r\n      );\r\n    });\r\n  }\r\n\r\n  async update(routes: string, data: any, custom_url: boolean = false) {\r\n    const url = custom_url ? routes : this.url + routes;\r\n    return await new Promise((resolve, reject) => {\r\n      this.http.put(url, data).subscribe(\r\n        (response) => resolve(response),\r\n        (error) => reject(error)\r\n      );\r\n    });\r\n  }\r\n\r\n  async delete(routes: string, data: any = {}, custom_url: boolean = false) {\r\n    const url = custom_url ? routes : this.url + routes;\r\n    return await new Promise((resolve, reject) => {\r\n      this.http.delete(url, data).subscribe(\r\n        (response) => resolve(response),\r\n        (error) => reject(error)\r\n      );\r\n    });\r\n  }\r\n}\r\n","/*\r\n * Public API Surface of livechat-assistant\r\n */\r\n\r\nexport * from './lib/livechat-assistant.service';\r\nexport * from './lib/livechat-assistant.component';\r\n\r\nexport * from './lib/components'\r\nexport * from './lib/services'\r\nexport * from './lib/utilities'\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="livechat-assistant" />
+export * from './public-api';

package/lib/components/chat-history/chat-history.component.d.ts

@@ -0,0 +1,94 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ChatHistoryComponent {
+    navigate: EventEmitter<number>;
+    conversations: ({
+        id: number;
+        name: string;
+        avatar: boolean;
+        lastMessage: string;
+        time: string;
+        status: string;
+        color: string;
+        online: boolean;
+        initials: string;
+        unreadCount?: undefined;
+        hasAttachment?: undefined;
+    } | {
+        id: number;
+        name: string;
+        initials: string;
+        color: string;
+        lastMessage: string;
+        time: string;
+        unreadCount: number;
+        online: boolean;
+        avatar: boolean;
+        status?: undefined;
+        hasAttachment?: undefined;
+    } | {
+        id: number;
+        name: string;
+        avatar: boolean;
+        lastMessage: string;
+        time: string;
+        online: boolean;
+        status: string;
+        color: string;
+        initials?: undefined;
+        unreadCount?: undefined;
+        hasAttachment?: undefined;
+    } | {
+        id: number;
+        name: string;
+        initials: string;
+        color: string;
+        lastMessage: string;
+        time: string;
+        status: string;
+        hasAttachment: boolean;
+        online: boolean;
+        avatar?: undefined;
+        unreadCount?: undefined;
+    } | {
+        id: number;
+        name: string;
+        initials: string;
+        color: string;
+        lastMessage: string;
+        time: string;
+        unreadCount: number;
+        online: boolean;
+        avatar?: undefined;
+        status?: undefined;
+        hasAttachment?: undefined;
+    } | {
+        id: number;
+        name: string;
+        initials: string;
+        color: string;
+        lastMessage: string;
+        time: string;
+        status: string;
+        online: boolean;
+        avatar?: undefined;
+        unreadCount?: undefined;
+        hasAttachment?: undefined;
+    } | {
+        id: number;
+        name: string;
+        avatar: boolean;
+        lastMessage: string;
+        time: string;
+        online: boolean;
+        status?: undefined;
+        color?: undefined;
+        initials?: undefined;
+        unreadCount?: undefined;
+        hasAttachment?: undefined;
+    })[];
+    selectConversation(id: number, tabIndex: number): void;
+    navigateToTab(tabIndex: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChatHistoryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChatHistoryComponent, "app-chat-history", never, {}, { "navigate": "navigate"; }, never, never, true, never>;
+}

package/lib/components/chat-widget/chat-widget.component.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+export declare class ChatWidgetComponent {
+    isTyping: boolean;
+    isOpen: boolean;
+    activeTab: number;
+    setActiveTab(tab: number): void;
+    navigateToTab(tab: number): void;
+    messages: {
+        id: number;
+        sender: string;
+        text: string;
+        time: string;
+    }[];
+    sendMessage(message: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChatWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChatWidgetComponent, "app-chat-widget", never, { "isOpen": { "alias": "isOpen"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/help-support/help-support.component.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class HelpSupportComponent {
+    private fb;
+    showTooltip: boolean;
+    contactForm: FormGroup;
+    navigate: EventEmitter<number>;
+    constructor(fb: FormBuilder);
+    ngOnInit(): void;
+    onSubmit(): void;
+    navigateToTab(tabIndex: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HelpSupportComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HelpSupportComponent, "app-help-support", never, {}, { "navigate": "navigate"; }, never, never, true, never>;
+}

package/lib/components/home/home.component.d.ts

@@ -0,0 +1,8 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class HomeComponent {
+    navigate: EventEmitter<number>;
+    navigateToTab(tabIndex: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HomeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HomeComponent, "app-home", never, {}, { "navigate": "navigate"; }, never, never, true, never>;
+}

package/lib/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './chat-widget/chat-widget.component';
+export * from './support-buttons/support-buttons.component';

package/lib/components/message/message.component.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class MessageComponent {
+    newMessage: string;
+    noMessage: boolean;
+    isTyping: boolean;
+    messages: any;
+    suggestions: string[];
+    sendMessage: EventEmitter<any>;
+    navigate: EventEmitter<number>;
+    onSendMessage(): void;
+    onFileSelect(event: any): void;
+    return(tabIndex: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "app-message", never, { "isTyping": { "alias": "isTyping"; "required": false; }; "messages": { "alias": "messages"; "required": false; }; "suggestions": { "alias": "suggestions"; "required": false; }; }, { "sendMessage": "sendMessage"; "navigate": "navigate"; }, never, never, true, never>;
+}

package/lib/components/success-message/success-message.component.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SuccessMessageComponent {
+    navigate: EventEmitter<number>;
+    confettiArray: Array<{
+        left: number;
+        delay: number;
+        color: string;
+    }>;
+    ngOnInit(): void;
+    navigateToTab(tabIndex: number): void;
+    generateConfetti(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SuccessMessageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SuccessMessageComponent, "app-success-message", never, {}, { "navigate": "navigate"; }, never, never, true, never>;
+}

package/lib/components/support-buttons/support-buttons.component.d.ts

@@ -0,0 +1,12 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SupportButtonsComponent implements OnInit {
+    cssClass: 'fadeIn' | 'fadeOut';
+    isOpen: boolean;
+    constructor();
+    ngOnInit(): void;
+    toggleFab(): void;
+    toggleLivechat(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SupportButtonsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SupportButtonsComponent, "app-support-buttons", never, {}, {}, never, never, true, never>;
+}

package/lib/environment/environment.test.d.ts

@@ -0,0 +1,15 @@
+export declare const chat: {
+    url: string;
+    db: string;
+    email: string;
+    password: string;
+    payload: {
+        jsonrpc: string;
+        method: string;
+        params: {
+            service: string;
+            method: string;
+            args: never[];
+        };
+    };
+};

package/lib/livechat-assistant.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class LivechatAssistantComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<LivechatAssistantComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LivechatAssistantComponent, "lib-livechat-assistant", never, {}, {}, never, never, true, never>;
+}

package/lib/livechat-assistant.service.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class LivechatAssistantService {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<LivechatAssistantService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LivechatAssistantService>;
+}

package/lib/services/index.d.ts

@@ -0,0 +1 @@
+export * from './request';

package/lib/services/request.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class RequestService {
+    url: string;
+    private http;
+    headers: any;
+    get(routes: string, custom_url?: boolean): Promise<unknown>;
+    post(routes: string, data: any, custom_url?: boolean): Promise<unknown>;
+    update(routes: string, data: any, custom_url?: boolean): Promise<unknown>;
+    delete(routes: string, data?: any, custom_url?: boolean): Promise<unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RequestService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<RequestService>;
+}

package/lib/utilities/helper.d.ts

@@ -0,0 +1,9 @@
+export declare let isOpen: boolean;
+export declare let confettiArray: Array<{
+    left: number;
+    delay: number;
+    color: string;
+}>;
+export declare const isChatOpen: () => boolean;
+export declare const closeChat: () => void;
+export declare const toggleLivechat: () => boolean;

package/lib/utilities/index.d.ts

@@ -0,0 +1 @@
+export * from './helper';

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "livechat-assistant",
+  "version": "0.0.7",
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/livechat-assistant.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/livechat-assistant.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,5 @@
+export * from './lib/livechat-assistant.service';
+export * from './lib/livechat-assistant.component';
+export * from './lib/components';
+export * from './lib/services';
+export * from './lib/utilities';