livechat-assistant 0.1.1 → 0.1.2

package/fesm2022/livechat-assistant.mjs

@@ -117,11 +117,11 @@ class ChatHistoryComponent {
         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 });
+    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: ["*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:\"\"}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-right-1{right:-.25rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.bottom-5{bottom:1.25rem}.left-0{left:0}.left-4{left:1rem}.left-8{left:2rem}.right-0{right:0}.right-3{right:.75rem}.right-5{right:1.25rem}.top-0{top:0}.top-1\\/2{top:50%}.top-3{top:.75rem}.top-4{top:1rem}.z-10{z-index:10}.m-0{margin:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\\[600px\\]{height:600px}.h-full{height:100%}.max-h-\\[600px\\]{max-height:600px}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-8{--tw-translate-x:-2rem}.-translate-x-8,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-8{--tw-translate-y:-2rem}.-translate-y-8,.translate-x-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-12{--tw-translate-x:3rem}.translate-y-12{--tw-translate-y:3rem}.-rotate-12,.translate-y-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-12{--tw-rotate:-12deg}.rotate-12{--tw-rotate:12deg}.rotate-12,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-1\\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity))}.border-neutral-700{--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.bg-cyan-400{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60/var(--tw-bg-opacity))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity))}.bg-pink-500{--tw-bg-opacity:1;background-color:rgb(236 72 153/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity))}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\\/20{background-color:#fff3}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:#3b82f600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-300{--tw-gradient-from:#67e8f9 var(--tw-gradient-from-position);--tw-gradient-to:#67e8f900 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-blue-600{--tw-gradient-to:#2563eb00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#2563eb var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-blue-800{--tw-gradient-to:#1e40af var(--tw-gradient-to-position)}.to-orange-400{--tw-gradient-to:#fb923c var(--tw-gradient-to-position)}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-green-300\\/80{color:#86efaccc}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.text-neutral-300{--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}.text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity))}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity))}.text-neutral-950{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.hover\\:bg-neutral-800\\/50:hover{background-color:#26262680}.hover\\:bg-white\\/30:hover{background-color:#ffffff4d}.hover\\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity))}.hover\\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.focus\\:border-transparent:focus{border-color:#0000}.focus\\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-0:focus,.focus\\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.group:hover .group-hover\\:text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity))}@media (min-width:640px){.sm\\:gap-2{gap:.5rem}}@media (prefers-color-scheme:dark){.dark\\:bg-neutral-700\\/20{background-color:#40404033}.dark\\:bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.dark\\:bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.dark\\:font-semibold{font-weight:600}.dark\\:text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.dark\\:text-neutral-200\\/80{color:#e5e5e5cc}.dark\\:text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}}\n/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/\n"], 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>" }]
+            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>", styles: ["*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:\"\"}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-right-1{right:-.25rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.bottom-5{bottom:1.25rem}.left-0{left:0}.left-4{left:1rem}.left-8{left:2rem}.right-0{right:0}.right-3{right:.75rem}.right-5{right:1.25rem}.top-0{top:0}.top-1\\/2{top:50%}.top-3{top:.75rem}.top-4{top:1rem}.z-10{z-index:10}.m-0{margin:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\\[600px\\]{height:600px}.h-full{height:100%}.max-h-\\[600px\\]{max-height:600px}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-8{--tw-translate-x:-2rem}.-translate-x-8,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-8{--tw-translate-y:-2rem}.-translate-y-8,.translate-x-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-12{--tw-translate-x:3rem}.translate-y-12{--tw-translate-y:3rem}.-rotate-12,.translate-y-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-12{--tw-rotate:-12deg}.rotate-12{--tw-rotate:12deg}.rotate-12,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-1\\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity))}.border-neutral-700{--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.bg-cyan-400{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60/var(--tw-bg-opacity))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity))}.bg-pink-500{--tw-bg-opacity:1;background-color:rgb(236 72 153/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity))}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\\/20{background-color:#fff3}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:#3b82f600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-300{--tw-gradient-from:#67e8f9 var(--tw-gradient-from-position);--tw-gradient-to:#67e8f900 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-blue-600{--tw-gradient-to:#2563eb00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#2563eb var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-blue-800{--tw-gradient-to:#1e40af var(--tw-gradient-to-position)}.to-orange-400{--tw-gradient-to:#fb923c var(--tw-gradient-to-position)}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-green-300\\/80{color:#86efaccc}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.text-neutral-300{--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}.text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity))}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity))}.text-neutral-950{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.hover\\:bg-neutral-800\\/50:hover{background-color:#26262680}.hover\\:bg-white\\/30:hover{background-color:#ffffff4d}.hover\\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity))}.hover\\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.focus\\:border-transparent:focus{border-color:#0000}.focus\\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-0:focus,.focus\\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.group:hover .group-hover\\:text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity))}@media (min-width:640px){.sm\\:gap-2{gap:.5rem}}@media (prefers-color-scheme:dark){.dark\\:bg-neutral-700\\/20{background-color:#40404033}.dark\\:bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.dark\\:bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.dark\\:font-semibold{font-weight:600}.dark\\:text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.dark\\:text-neutral-200\\/80{color:#e5e5e5cc}.dark\\:text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}}\n/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/\n"] }]
         }], propDecorators: { navigate: [{
                 type: Output
             }] } });
@@ -208,11 +208,11 @@ class MessageComponent {
         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 });
+    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: ["*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:\"\"}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-right-1{right:-.25rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.bottom-5{bottom:1.25rem}.left-0{left:0}.left-4{left:1rem}.left-8{left:2rem}.right-0{right:0}.right-3{right:.75rem}.right-5{right:1.25rem}.top-0{top:0}.top-1\\/2{top:50%}.top-3{top:.75rem}.top-4{top:1rem}.z-10{z-index:10}.m-0{margin:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\\[600px\\]{height:600px}.h-full{height:100%}.max-h-\\[600px\\]{max-height:600px}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-8{--tw-translate-x:-2rem}.-translate-x-8,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-8{--tw-translate-y:-2rem}.-translate-y-8,.translate-x-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-12{--tw-translate-x:3rem}.translate-y-12{--tw-translate-y:3rem}.-rotate-12,.translate-y-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-12{--tw-rotate:-12deg}.rotate-12{--tw-rotate:12deg}.rotate-12,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-1\\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity))}.border-neutral-700{--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.bg-cyan-400{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60/var(--tw-bg-opacity))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity))}.bg-pink-500{--tw-bg-opacity:1;background-color:rgb(236 72 153/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity))}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\\/20{background-color:#fff3}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:#3b82f600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-300{--tw-gradient-from:#67e8f9 var(--tw-gradient-from-position);--tw-gradient-to:#67e8f900 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-blue-600{--tw-gradient-to:#2563eb00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#2563eb var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-blue-800{--tw-gradient-to:#1e40af var(--tw-gradient-to-position)}.to-orange-400{--tw-gradient-to:#fb923c var(--tw-gradient-to-position)}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-green-300\\/80{color:#86efaccc}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.text-neutral-300{--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}.text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity))}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity))}.text-neutral-950{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.hover\\:bg-neutral-800\\/50:hover{background-color:#26262680}.hover\\:bg-white\\/30:hover{background-color:#ffffff4d}.hover\\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity))}.hover\\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.focus\\:border-transparent:focus{border-color:#0000}.focus\\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-0:focus,.focus\\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.group:hover .group-hover\\:text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity))}@media (min-width:640px){.sm\\:gap-2{gap:.5rem}}@media (prefers-color-scheme:dark){.dark\\:bg-neutral-700\\/20{background-color:#40404033}.dark\\:bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.dark\\:bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.dark\\:font-semibold{font-weight:600}.dark\\:text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.dark\\:text-neutral-200\\/80{color:#e5e5e5cc}.dark\\:text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}}\n/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/\n"], 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>" }]
+            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>", styles: ["*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:\"\"}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-right-1{right:-.25rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.bottom-5{bottom:1.25rem}.left-0{left:0}.left-4{left:1rem}.left-8{left:2rem}.right-0{right:0}.right-3{right:.75rem}.right-5{right:1.25rem}.top-0{top:0}.top-1\\/2{top:50%}.top-3{top:.75rem}.top-4{top:1rem}.z-10{z-index:10}.m-0{margin:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\\[600px\\]{height:600px}.h-full{height:100%}.max-h-\\[600px\\]{max-height:600px}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-8{--tw-translate-x:-2rem}.-translate-x-8,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-8{--tw-translate-y:-2rem}.-translate-y-8,.translate-x-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-12{--tw-translate-x:3rem}.translate-y-12{--tw-translate-y:3rem}.-rotate-12,.translate-y-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-12{--tw-rotate:-12deg}.rotate-12{--tw-rotate:12deg}.rotate-12,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-1\\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity))}.border-neutral-700{--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.bg-cyan-400{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60/var(--tw-bg-opacity))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity))}.bg-pink-500{--tw-bg-opacity:1;background-color:rgb(236 72 153/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity))}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\\/20{background-color:#fff3}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:#3b82f600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-300{--tw-gradient-from:#67e8f9 var(--tw-gradient-from-position);--tw-gradient-to:#67e8f900 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-blue-600{--tw-gradient-to:#2563eb00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#2563eb var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-blue-800{--tw-gradient-to:#1e40af var(--tw-gradient-to-position)}.to-orange-400{--tw-gradient-to:#fb923c var(--tw-gradient-to-position)}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-green-300\\/80{color:#86efaccc}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.text-neutral-300{--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}.text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity))}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity))}.text-neutral-950{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.hover\\:bg-neutral-800\\/50:hover{background-color:#26262680}.hover\\:bg-white\\/30:hover{background-color:#ffffff4d}.hover\\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity))}.hover\\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.focus\\:border-transparent:focus{border-color:#0000}.focus\\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-0:focus,.focus\\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.group:hover .group-hover\\:text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity))}@media (min-width:640px){.sm\\:gap-2{gap:.5rem}}@media (prefers-color-scheme:dark){.dark\\:bg-neutral-700\\/20{background-color:#40404033}.dark\\:bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.dark\\:bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.dark\\:font-semibold{font-weight:600}.dark\\:text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.dark\\:text-neutral-200\\/80{color:#e5e5e5cc}.dark\\:text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}}\n/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/\n"] }]
         }], propDecorators: { isTyping: [{
                 type: Input
             }], messages: [{
@@ -307,7 +307,7 @@ class ChatWidgetComponent {
         }
     }
     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 });
+    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: ["*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:\"\"}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-right-1{right:-.25rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.bottom-5{bottom:1.25rem}.left-0{left:0}.left-4{left:1rem}.left-8{left:2rem}.right-0{right:0}.right-3{right:.75rem}.right-5{right:1.25rem}.top-0{top:0}.top-1\\/2{top:50%}.top-3{top:.75rem}.top-4{top:1rem}.z-10{z-index:10}.m-0{margin:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\\[600px\\]{height:600px}.h-full{height:100%}.max-h-\\[600px\\]{max-height:600px}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-8{--tw-translate-x:-2rem}.-translate-x-8,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-8{--tw-translate-y:-2rem}.-translate-y-8,.translate-x-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-12{--tw-translate-x:3rem}.translate-y-12{--tw-translate-y:3rem}.-rotate-12,.translate-y-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-12{--tw-rotate:-12deg}.rotate-12{--tw-rotate:12deg}.rotate-12,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-1\\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity))}.border-neutral-700{--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.bg-cyan-400{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60/var(--tw-bg-opacity))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity))}.bg-pink-500{--tw-bg-opacity:1;background-color:rgb(236 72 153/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity))}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\\/20{background-color:#fff3}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:#3b82f600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-300{--tw-gradient-from:#67e8f9 var(--tw-gradient-from-position);--tw-gradient-to:#67e8f900 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-blue-600{--tw-gradient-to:#2563eb00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#2563eb var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-blue-800{--tw-gradient-to:#1e40af var(--tw-gradient-to-position)}.to-orange-400{--tw-gradient-to:#fb923c var(--tw-gradient-to-position)}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-green-300\\/80{color:#86efaccc}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.text-neutral-300{--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}.text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity))}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity))}.text-neutral-950{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.hover\\:bg-neutral-800\\/50:hover{background-color:#26262680}.hover\\:bg-white\\/30:hover{background-color:#ffffff4d}.hover\\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity))}.hover\\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.focus\\:border-transparent:focus{border-color:#0000}.focus\\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-0:focus,.focus\\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.group:hover .group-hover\\:text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity))}@media (min-width:640px){.sm\\:gap-2{gap:.5rem}}@media (prefers-color-scheme:dark){.dark\\:bg-neutral-700\\/20{background-color:#40404033}.dark\\:bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.dark\\:bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.dark\\:font-semibold{font-weight:600}.dark\\:text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.dark\\:text-neutral-200\\/80{color:#e5e5e5cc}.dark\\:text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}}\n/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/\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,
@@ -320,7 +320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         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"] }]
+                    ], 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: ["*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:\"\"}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-right-1{right:-.25rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.bottom-5{bottom:1.25rem}.left-0{left:0}.left-4{left:1rem}.left-8{left:2rem}.right-0{right:0}.right-3{right:.75rem}.right-5{right:1.25rem}.top-0{top:0}.top-1\\/2{top:50%}.top-3{top:.75rem}.top-4{top:1rem}.z-10{z-index:10}.m-0{margin:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\\[600px\\]{height:600px}.h-full{height:100%}.max-h-\\[600px\\]{max-height:600px}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-8{--tw-translate-x:-2rem}.-translate-x-8,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-8{--tw-translate-y:-2rem}.-translate-y-8,.translate-x-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-12{--tw-translate-x:3rem}.translate-y-12{--tw-translate-y:3rem}.-rotate-12,.translate-y-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-12{--tw-rotate:-12deg}.rotate-12{--tw-rotate:12deg}.rotate-12,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-1\\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity))}.border-neutral-700{--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.bg-cyan-400{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60/var(--tw-bg-opacity))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity))}.bg-pink-500{--tw-bg-opacity:1;background-color:rgb(236 72 153/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity))}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\\/20{background-color:#fff3}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:#3b82f600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-300{--tw-gradient-from:#67e8f9 var(--tw-gradient-from-position);--tw-gradient-to:#67e8f900 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-blue-600{--tw-gradient-to:#2563eb00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#2563eb var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-blue-800{--tw-gradient-to:#1e40af var(--tw-gradient-to-position)}.to-orange-400{--tw-gradient-to:#fb923c var(--tw-gradient-to-position)}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-green-300\\/80{color:#86efaccc}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.text-neutral-300{--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}.text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity))}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity))}.text-neutral-950{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.hover\\:bg-neutral-800\\/50:hover{background-color:#26262680}.hover\\:bg-white\\/30:hover{background-color:#ffffff4d}.hover\\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity))}.hover\\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.focus\\:border-transparent:focus{border-color:#0000}.focus\\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-0:focus,.focus\\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.group:hover .group-hover\\:text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity))}@media (min-width:640px){.sm\\:gap-2{gap:.5rem}}@media (prefers-color-scheme:dark){.dark\\:bg-neutral-700\\/20{background-color:#40404033}.dark\\:bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.dark\\:bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.dark\\:font-semibold{font-weight:600}.dark\\:text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.dark\\:text-neutral-200\\/80{color:#e5e5e5cc}.dark\\:text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}}\n/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }] } });

package/fesm2022/livechat-assistant.mjs.map

@@ -1 +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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"}
+{"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: '../../bundle.css',\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: '../../bundle.css',\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: '../../bundle.css',\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "livechat-assistant",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0"