livechat-assistant 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7,10 +7,10 @@ import { HttpClient } from '@angular/common/http';
|
|
|
7
7
|
|
|
8
8
|
class LivechatAssistantService {
|
|
9
9
|
constructor() { }
|
|
10
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
11
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
10
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LivechatAssistantService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
11
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LivechatAssistantService, providedIn: 'root' });
|
|
12
12
|
}
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LivechatAssistantService, decorators: [{
|
|
14
14
|
type: Injectable,
|
|
15
15
|
args: [{
|
|
16
16
|
providedIn: 'root'
|
|
@@ -18,14 +18,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
18
18
|
}], ctorParameters: () => [] });
|
|
19
19
|
|
|
20
20
|
class LivechatAssistantComponent {
|
|
21
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
22
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
21
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LivechatAssistantComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: LivechatAssistantComponent, isStandalone: true, selector: "lib-livechat-assistant", ngImport: i0, template: `
|
|
23
23
|
<p>
|
|
24
24
|
livechat-assistant works!
|
|
25
25
|
</p>
|
|
26
26
|
`, isInline: true, styles: [""] });
|
|
27
27
|
}
|
|
28
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LivechatAssistantComponent, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{ selector: 'lib-livechat-assistant', imports: [], template: `
|
|
31
31
|
<p>
|
|
@@ -116,12 +116,12 @@ class ChatHistoryComponent {
|
|
|
116
116
|
navigateToTab(tabIndex) {
|
|
117
117
|
this.navigate.emit(tabIndex);
|
|
118
118
|
}
|
|
119
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
120
|
-
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 });
|
|
119
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChatHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 });
|
|
121
121
|
}
|
|
122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChatHistoryComponent, decorators: [{
|
|
123
123
|
type: Component,
|
|
124
|
-
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"] }]
|
|
124
|
+
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>" }]
|
|
125
125
|
}], propDecorators: { navigate: [{
|
|
126
126
|
type: Output
|
|
127
127
|
}] } });
|
|
@@ -157,10 +157,10 @@ class HelpSupportComponent {
|
|
|
157
157
|
navigateToTab(tabIndex) {
|
|
158
158
|
this.navigate.emit(tabIndex);
|
|
159
159
|
}
|
|
160
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
161
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
160
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HelpSupportComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
161
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: HelpSupportComponent, isStandalone: true, selector: "app-help-support", outputs: { navigate: "navigate" }, ngImport: i0, template: "<div class=\"rounded-lg flex flex-col overflow-hidden max-h-[600px]\">\r\n <div class=\"relative h-32 bg-gradient-to-br from-cyan-300 via-blue-600 to-orange-400 overflow-hidden\">\r\n <div class=\"absolute inset-0\">\r\n <div class=\"absolute top-0 left-0 w-24 h-24 bg-blue-700 transform rotate-45 -translate-x-8 -translate-y-8\"></div>\r\n <div class=\"absolute top-4 right-0 w-32 h-32 bg-orange-400 transform rotate-12 translate-x-12\"></div>\r\n <div class=\"absolute bottom-0 left-8 w-28 h-28 bg-cyan-400 transform -rotate-12 translate-y-12\"></div>\r\n </div>\r\n \r\n \r\n <!-- Logo -->\r\n <div class=\"absolute bottom-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg\">\r\n <svg class=\"w-6 h-6 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"p-4 overflow-y-auto hideScroll\">\r\n \r\n <h2 class=\"text-lg font-semibold text-neutral-800 dark:text-neutral-200 mb-1\">Send a message</h2>\r\n <p class=\"text-sm text-neutral-500 dark:text-neutral-200 mb-6\">We'll get back to you in a few hours.</p>\r\n \r\n <form [formGroup]=\"contactForm\" (ngSubmit)=\"onSubmit()\" class=\"space-y-4\">\r\n \r\n <div>\r\n <label for=\"name\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Name</label>\r\n <input \r\n type=\"text\" \r\n id=\"name\"\r\n formControlName=\"name\"\r\n placeholder=\"John Doe\"\r\n class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n [class.border-red-500]=\"contactForm.get('name')?.invalid && contactForm.get('name')?.touched\">\r\n <p *ngIf=\"contactForm.get('name')?.invalid && contactForm.get('name')?.touched\" \r\n class=\"text-xs text-red-500 mt-1\">Name is required</p>\r\n </div>\r\n \r\n <!-- Email Field -->\r\n <div class=\"relative\">\r\n <label for=\"email\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Email</label>\r\n <input \r\n type=\"email\" \r\n id=\"email\"\r\n formControlName=\"email\"\r\n placeholder=\"john@site.co\"\r\n (focus)=\"showTooltip = true\"\r\n (blur)=\"showTooltip = false\"\r\n class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n [class.border-red-500]=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\">\r\n \r\n <!-- Tooltip -->\r\n <div *ngIf=\"showTooltip\" \r\n class=\"absolute right-0 top-0 mt-1 mr-2 bg-neutral-900 dark:text-neutral-200 text-white text-xs px-3 py-2 rounded shadow-lg z-10 whitespace-nowrap\">\r\n Existing accounts should use <br>your account to access the <br>source code.\r\n <div class=\"absolute top-1/2 -right-1 transform -translate-y-1/2 w-2 h-2 bg-neutral-900 dark:text-neutral-200 rotate-45\"></div>\r\n </div>\r\n \r\n <p *ngIf=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\" \r\n class=\"text-xs text-red-500 mt-1\">\r\n <span *ngIf=\"contactForm.get('email')?.errors?.['required']\">Email is required</span>\r\n <span *ngIf=\"contactForm.get('email')?.errors?.['email']\">Invalid email format</span>\r\n </p>\r\n </div>\r\n \r\n <!-- Subject Field -->\r\n <div>\r\n <label for=\"subject\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Subject</label>\r\n <input \r\n type=\"text\" \r\n id=\"subject\"\r\n formControlName=\"subject\"\r\n placeholder=\"Preline Pro\"\r\n class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n [class.border-red-500]=\"contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched\">\r\n <p *ngIf=\"contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched\" \r\n class=\"text-xs text-red-500 mt-1\">Subject is required</p>\r\n </div>\r\n \r\n <!-- Message Field -->\r\n <div>\r\n <label for=\"message\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">How can we help?</label>\r\n <textarea \r\n id=\"message\"\r\n formControlName=\"message\"\r\n rows=\"4\"\r\n placeholder=\"Message...\"\r\n class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\r\n [class.border-red-500]=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\"></textarea>\r\n <p *ngIf=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\" \r\n class=\"text-xs text-red-500 mt-1\">Message is required</p>\r\n </div>\r\n \r\n <!-- Submit Button -->\r\n <button \r\n type=\"submit\"\r\n [disabled]=\"contactForm.invalid\"\r\n (click)=\"navigateToTab(5)\"\r\n class=\"w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed\">\r\n Send message\r\n </button>\r\n \r\n </form>\r\n \r\n </div>\r\n </div>\r\n\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
162
162
|
}
|
|
163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HelpSupportComponent, decorators: [{
|
|
164
164
|
type: Component,
|
|
165
165
|
args: [{ selector: 'app-help-support', imports: [ReactiveFormsModule, NgIf], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rounded-lg flex flex-col overflow-hidden max-h-[600px]\">\r\n <div class=\"relative h-32 bg-gradient-to-br from-cyan-300 via-blue-600 to-orange-400 overflow-hidden\">\r\n <div class=\"absolute inset-0\">\r\n <div class=\"absolute top-0 left-0 w-24 h-24 bg-blue-700 transform rotate-45 -translate-x-8 -translate-y-8\"></div>\r\n <div class=\"absolute top-4 right-0 w-32 h-32 bg-orange-400 transform rotate-12 translate-x-12\"></div>\r\n <div class=\"absolute bottom-0 left-8 w-28 h-28 bg-cyan-400 transform -rotate-12 translate-y-12\"></div>\r\n </div>\r\n \r\n \r\n <!-- Logo -->\r\n <div class=\"absolute bottom-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg\">\r\n <svg class=\"w-6 h-6 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"p-4 overflow-y-auto hideScroll\">\r\n \r\n <h2 class=\"text-lg font-semibold text-neutral-800 dark:text-neutral-200 mb-1\">Send a message</h2>\r\n <p class=\"text-sm text-neutral-500 dark:text-neutral-200 mb-6\">We'll get back to you in a few hours.</p>\r\n \r\n <form [formGroup]=\"contactForm\" (ngSubmit)=\"onSubmit()\" class=\"space-y-4\">\r\n \r\n <div>\r\n <label for=\"name\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Name</label>\r\n <input \r\n type=\"text\" \r\n id=\"name\"\r\n formControlName=\"name\"\r\n placeholder=\"John Doe\"\r\n class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n [class.border-red-500]=\"contactForm.get('name')?.invalid && contactForm.get('name')?.touched\">\r\n <p *ngIf=\"contactForm.get('name')?.invalid && contactForm.get('name')?.touched\" \r\n class=\"text-xs text-red-500 mt-1\">Name is required</p>\r\n </div>\r\n \r\n <!-- Email Field -->\r\n <div class=\"relative\">\r\n <label for=\"email\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Email</label>\r\n <input \r\n type=\"email\" \r\n id=\"email\"\r\n formControlName=\"email\"\r\n placeholder=\"john@site.co\"\r\n (focus)=\"showTooltip = true\"\r\n (blur)=\"showTooltip = false\"\r\n class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n [class.border-red-500]=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\">\r\n \r\n <!-- Tooltip -->\r\n <div *ngIf=\"showTooltip\" \r\n class=\"absolute right-0 top-0 mt-1 mr-2 bg-neutral-900 dark:text-neutral-200 text-white text-xs px-3 py-2 rounded shadow-lg z-10 whitespace-nowrap\">\r\n Existing accounts should use <br>your account to access the <br>source code.\r\n <div class=\"absolute top-1/2 -right-1 transform -translate-y-1/2 w-2 h-2 bg-neutral-900 dark:text-neutral-200 rotate-45\"></div>\r\n </div>\r\n \r\n <p *ngIf=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\" \r\n class=\"text-xs text-red-500 mt-1\">\r\n <span *ngIf=\"contactForm.get('email')?.errors?.['required']\">Email is required</span>\r\n <span *ngIf=\"contactForm.get('email')?.errors?.['email']\">Invalid email format</span>\r\n </p>\r\n </div>\r\n \r\n <!-- Subject Field -->\r\n <div>\r\n <label for=\"subject\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">Subject</label>\r\n <input \r\n type=\"text\" \r\n id=\"subject\"\r\n formControlName=\"subject\"\r\n placeholder=\"Preline Pro\"\r\n class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\r\n [class.border-red-500]=\"contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched\">\r\n <p *ngIf=\"contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched\" \r\n class=\"text-xs text-red-500 mt-1\">Subject is required</p>\r\n </div>\r\n \r\n <!-- Message Field -->\r\n <div>\r\n <label for=\"message\" class=\"block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1\">How can we help?</label>\r\n <textarea \r\n id=\"message\"\r\n formControlName=\"message\"\r\n rows=\"4\"\r\n placeholder=\"Message...\"\r\n class=\"w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\r\n [class.border-red-500]=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\"></textarea>\r\n <p *ngIf=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\" \r\n class=\"text-xs text-red-500 mt-1\">Message is required</p>\r\n </div>\r\n \r\n <!-- Submit Button -->\r\n <button \r\n type=\"submit\"\r\n [disabled]=\"contactForm.invalid\"\r\n (click)=\"navigateToTab(5)\"\r\n class=\"w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed\">\r\n Send message\r\n </button>\r\n \r\n </form>\r\n \r\n </div>\r\n </div>\r\n\r\n" }]
|
|
166
166
|
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { navigate: [{
|
|
@@ -172,10 +172,10 @@ class HomeComponent {
|
|
|
172
172
|
navigateToTab(tabIndex) {
|
|
173
173
|
this.navigate.emit(tabIndex);
|
|
174
174
|
}
|
|
175
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
176
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
175
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
176
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: HomeComponent, isStandalone: true, selector: "app-home", outputs: { navigate: "navigate" }, ngImport: i0, template: "<div class=\"rounded-lg flex flex-col overflow-hidden max-h-[600px]\">\r\n <div class=\"relative h-32 bg-gradient-to-br from-cyan-300 via-blue-600 to-orange-400 overflow-hidden\">\r\n <div class=\"absolute inset-0\">\r\n <div class=\"absolute top-0 left-0 w-24 h-24 bg-blue-700 transform rotate-45 -translate-x-8 -translate-y-8\"></div>\r\n <div class=\"absolute top-4 right-0 w-32 h-32 bg-orange-400 transform rotate-12 translate-x-12\"></div>\r\n <div class=\"absolute bottom-0 left-8 w-28 h-28 bg-cyan-400 transform -rotate-12 translate-y-12\"></div>\r\n </div>\r\n <button class=\"absolute top-3 right-3 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/30\">\r\n \u00D7\r\n </button>\r\n \r\n <!-- Logo -->\r\n <div class=\"absolute bottom-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg\">\r\n <svg class=\"w-6 h-6 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-1 overflow-y-auto p-4 hideScroll\">\r\n <div>\r\n <h2 class=\"text-lg font-semibold dark:text-neutral-200 text-gray-800 mt-4\">Hi, Penny \uD83D\uDC4B</h2>\r\n <p class=\"text-sm text-neutral-500 dark:text-neutral-200 mb-5\">Preline support team is here to help.</p>\r\n \r\n <button (click)=\"navigateToTab(3)\" class=\"w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition mb-6\">\r\n Send us a message\r\n </button>\r\n \r\n <div class=\"space-y-4\">\r\n <p class=\"text-sm font-semibold text-neutral-500 dark:text-neutral-200\">Popular topics</p>\r\n \r\n <a href=\"#\" class=\"flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n <div>\r\n <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">Live Chat</h3>\r\n <p class=\"text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n </div>\r\n <svg class=\"w-5 h-5 text-neutral-400 group-hover:text-neutral-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n </svg>\r\n </a>\r\n \r\n <a href=\"#\" class=\"flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n <div>\r\n <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">AI Chat</h3>\r\n <p class=\"text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n </div>\r\n <svg class=\"w-5 h-5 text-neutral-400 group-hover:text-neutral-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n </svg>\r\n </a>\r\n \r\n <a href=\"#\" class=\"flex mb-2 items-center justify-between p-3 dark:bg-neutral-800 bg-gray-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n <div>\r\n <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">Support Chat</h3>\r\n <p class=\"text-sm text-gray-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n </div>\r\n <svg class=\"w-5 h-5 text-gray-400 group-hover:text-gray-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n </svg>\r\n </a>\r\n </div>\r\n </div>\r\n \r\n <div class=\"border-t border-neutral-700\"></div>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
177
177
|
}
|
|
178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HomeComponent, decorators: [{
|
|
179
179
|
type: Component,
|
|
180
180
|
args: [{ selector: 'app-home', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"rounded-lg flex flex-col overflow-hidden max-h-[600px]\">\r\n <div class=\"relative h-32 bg-gradient-to-br from-cyan-300 via-blue-600 to-orange-400 overflow-hidden\">\r\n <div class=\"absolute inset-0\">\r\n <div class=\"absolute top-0 left-0 w-24 h-24 bg-blue-700 transform rotate-45 -translate-x-8 -translate-y-8\"></div>\r\n <div class=\"absolute top-4 right-0 w-32 h-32 bg-orange-400 transform rotate-12 translate-x-12\"></div>\r\n <div class=\"absolute bottom-0 left-8 w-28 h-28 bg-cyan-400 transform -rotate-12 translate-y-12\"></div>\r\n </div>\r\n <button class=\"absolute top-3 right-3 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/30\">\r\n \u00D7\r\n </button>\r\n \r\n <!-- Logo -->\r\n <div class=\"absolute bottom-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg\">\r\n <svg class=\"w-6 h-6 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-1 overflow-y-auto p-4 hideScroll\">\r\n <div>\r\n <h2 class=\"text-lg font-semibold dark:text-neutral-200 text-gray-800 mt-4\">Hi, Penny \uD83D\uDC4B</h2>\r\n <p class=\"text-sm text-neutral-500 dark:text-neutral-200 mb-5\">Preline support team is here to help.</p>\r\n \r\n <button (click)=\"navigateToTab(3)\" class=\"w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition mb-6\">\r\n Send us a message\r\n </button>\r\n \r\n <div class=\"space-y-4\">\r\n <p class=\"text-sm font-semibold text-neutral-500 dark:text-neutral-200\">Popular topics</p>\r\n \r\n <a href=\"#\" class=\"flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n <div>\r\n <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">Live Chat</h3>\r\n <p class=\"text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n </div>\r\n <svg class=\"w-5 h-5 text-neutral-400 group-hover:text-neutral-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n </svg>\r\n </a>\r\n \r\n <a href=\"#\" class=\"flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n <div>\r\n <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">AI Chat</h3>\r\n <p class=\"text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n </div>\r\n <svg class=\"w-5 h-5 text-neutral-400 group-hover:text-neutral-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n </svg>\r\n </a>\r\n \r\n <a href=\"#\" class=\"flex mb-2 items-center justify-between p-3 dark:bg-neutral-800 bg-gray-50 hover:bg-neutral-800/50 rounded-lg transition group\">\r\n <div>\r\n <h3 class=\"fs-16 fw-6 dark:text-neutral-200 text-neutral-800\">Support Chat</h3>\r\n <p class=\"text-sm text-gray-500 dark:text-neutral-200/80 text-neutral-800\">Team, Invoices, Refunds, and Updates</p>\r\n </div>\r\n <svg class=\"w-5 h-5 text-gray-400 group-hover:text-gray-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\r\n </svg>\r\n </a>\r\n </div>\r\n </div>\r\n \r\n <div class=\"border-t border-neutral-700\"></div>" }]
|
|
181
181
|
}], propDecorators: { navigate: [{
|
|
@@ -207,12 +207,12 @@ class MessageComponent {
|
|
|
207
207
|
return(tabIndex) {
|
|
208
208
|
this.navigate.emit(tabIndex);
|
|
209
209
|
}
|
|
210
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
211
|
-
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 });
|
|
210
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
211
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 });
|
|
212
212
|
}
|
|
213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MessageComponent, decorators: [{
|
|
214
214
|
type: Component,
|
|
215
|
-
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"] }]
|
|
215
|
+
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>" }]
|
|
216
216
|
}], propDecorators: { isTyping: [{
|
|
217
217
|
type: Input
|
|
218
218
|
}], messages: [{
|
|
@@ -244,10 +244,10 @@ class SuccessMessageComponent {
|
|
|
244
244
|
});
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
248
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
247
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SuccessMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
248
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SuccessMessageComponent, isStandalone: true, selector: "app-success-message", outputs: { navigate: "navigate" }, ngImport: i0, template: "<div class=\"bg-white rounded-lg h-[600px]\">\r\n<div class=\"confetti-container\">\r\n @for (confetti of confettiArray; track $index) {\r\n <div\r\n [style.left.%]=\"confetti.left\"\r\n [style.animation-delay.s]=\"confetti.delay\"\r\n [style.background-color]=\"confetti.color\"\r\n class=\"confetti\">\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"p-4 text-center h-full flex flex-col justify-center items-center relative animate-scale-in\">\r\n <div class=\"mb-6 flex justify-center items-center\">\r\n <div class=\"w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center animate-bounce-in\">\r\n <svg class=\"w-8 h-8 text-teal-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Title -->\r\n <h2 class=\"text-2xl font-bold text-gray-800 mb-4\">Email Delivered!</h2>\r\n <p class=\"text-gray-600 text-sm mb-2\">\r\n You're set on chatting with an online agent or ask your our AI robot your questions.\r\n </p>\r\n\r\n <button (click)=\"navigateToTab(2)\" class=\"mt-6 bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition\">\r\n Start a new chat\r\n </button>\r\n\r\n </div>\r\n</div>", styles: [".confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:51}.confetti{position:absolute;width:10px;height:10px;top:-10%;opacity:0;animation:confetti-fall 3s linear forwards}@keyframes confetti-fall{0%{top:-10%;opacity:1;transform:translate(0) rotate(0)}to{top:100%;opacity:0;transform:translate(100px) rotate(720deg)}}@keyframes scale-in{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes bounce-in{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.animate-scale-in{animation:scale-in .4s ease-out}.animate-bounce-in{animation:bounce-in .6s cubic-bezier(.68,-.55,.265,1.55);animation-delay:.2s;animation-fill-mode:backwards}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
249
249
|
}
|
|
250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SuccessMessageComponent, decorators: [{
|
|
251
251
|
type: Component,
|
|
252
252
|
args: [{ selector: 'app-success-message', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-white rounded-lg h-[600px]\">\r\n<div class=\"confetti-container\">\r\n @for (confetti of confettiArray; track $index) {\r\n <div\r\n [style.left.%]=\"confetti.left\"\r\n [style.animation-delay.s]=\"confetti.delay\"\r\n [style.background-color]=\"confetti.color\"\r\n class=\"confetti\">\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"p-4 text-center h-full flex flex-col justify-center items-center relative animate-scale-in\">\r\n <div class=\"mb-6 flex justify-center items-center\">\r\n <div class=\"w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center animate-bounce-in\">\r\n <svg class=\"w-8 h-8 text-teal-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Title -->\r\n <h2 class=\"text-2xl font-bold text-gray-800 mb-4\">Email Delivered!</h2>\r\n <p class=\"text-gray-600 text-sm mb-2\">\r\n You're set on chatting with an online agent or ask your our AI robot your questions.\r\n </p>\r\n\r\n <button (click)=\"navigateToTab(2)\" class=\"mt-6 bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition\">\r\n Start a new chat\r\n </button>\r\n\r\n </div>\r\n</div>", styles: [".confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:51}.confetti{position:absolute;width:10px;height:10px;top:-10%;opacity:0;animation:confetti-fall 3s linear forwards}@keyframes confetti-fall{0%{top:-10%;opacity:1;transform:translate(0) rotate(0)}to{top:100%;opacity:0;transform:translate(100px) rotate(720deg)}}@keyframes scale-in{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes bounce-in{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.animate-scale-in{animation:scale-in .4s ease-out}.animate-bounce-in{animation:bounce-in .6s cubic-bezier(.68,-.55,.265,1.55);animation-delay:.2s;animation-fill-mode:backwards}\n"] }]
|
|
253
253
|
}], propDecorators: { navigate: [{
|
|
@@ -306,10 +306,10 @@ class ChatWidgetComponent {
|
|
|
306
306
|
}, 2000);
|
|
307
307
|
}
|
|
308
308
|
}
|
|
309
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
310
|
-
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 });
|
|
309
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChatWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 });
|
|
311
311
|
}
|
|
312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChatWidgetComponent, decorators: [{
|
|
313
313
|
type: Component,
|
|
314
314
|
args: [{ selector: 'app-chat-widget', standalone: true, imports: [
|
|
315
315
|
FormsModule,
|
|
@@ -320,7 +320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
320
320
|
ChatHistoryComponent,
|
|
321
321
|
NgClass,
|
|
322
322
|
SuccessMessageComponent
|
|
323
|
-
], 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"] }]
|
|
323
|
+
], 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"] }]
|
|
324
324
|
}], propDecorators: { isOpen: [{
|
|
325
325
|
type: Input
|
|
326
326
|
}] } });
|
|
@@ -360,10 +360,10 @@ class SupportButtonsComponent {
|
|
|
360
360
|
toggleLivechat() {
|
|
361
361
|
this.isOpen = toggleLivechat();
|
|
362
362
|
}
|
|
363
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
364
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
363
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SupportButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
364
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SupportButtonsComponent, isStandalone: true, selector: "app-support-buttons", ngImport: i0, template: "<ul class=\"fab-options z-90 fixed bottom-25 right-5\" [class]=\"cssClass\">\r\n <!-- <li>\r\n <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Chat with Aide on Whatsapp</span>\r\n <a class=\" bg-white text-green-600 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n <div class=\"size-6\">\r\n <i class='fi fi-brands-whatsapp fs-20'></i>\r\n </div>\r\n </a>\r\n </li>\r\n <li>\r\n <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Chat with Aide on Telegram</span>\r\n <a class=\" bg-white text-blue-400 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n <div class=\"size-6\">\r\n <i class='fi fi-brands-telegram fs-20'></i>\r\n </div>\r\n </a>\r\n </li> -->\r\n <li>\r\n <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Live Chat</span>\r\n <a (click)=\"toggleLivechat()\" class=\"bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n <div class=\"size-6\">\r\n <i class='fi fi-rr-robot fs-20'></i>\r\n </div>\r\n </a>\r\n </li>\r\n <!-- <li>\r\n <span class=\"fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white\">Send us a mail</span>\r\n <a class=\"bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white btn-round btn-fab\">\r\n <div class=\"size-6\">\r\n <i class='fi fi-rr-envelope fs-20'></i>\r\n </div>\r\n </a>\r\n </li> -->\r\n</ul>\r\n\r\n<button class=\"fixed bottom-5 right-5 main z-90 animated fadeInUp fs-20 bg-linear-to-tl from-blue-500 to-blue-800 text-white btn-round btn-fab btn-fab-button dark:bg-dark\" (click)=\"toggleFab()\" (keydown)=\"toggleFab()\">\r\n <div class=\"size-6\">\r\n <i class='fi fi-rr-comment fs-30 relative'></i>\r\n </div>\r\n</button>\r\n\r\n<app-chat-widget [isOpen]=\"isOpen || false\" />\r\n", styles: [":host .fadeIn{opacity:1!important;transform:scale(1)!important}:host .fadeOut{opacity:0!important;transform:scale(0)!important}:host .fab-options{list-style-type:none;opacity:0;transition:all .3s ease;transform:scale(0);transform-origin:85% bottom}:host .fab-options li{display:flex;justify-content:flex-end;padding:5px}:host .fab-options li .btn-fab{width:50px!important;height:50px!important;box-shadow:0 6px 20px #0003}:host .fab-options li .btn-fab i{position:relative!important;top:12px!important;right:-15px!important}:host .fab-options li .fab-label{padding:2px 10px;align-self:center;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:3px;font-size:13px;font-weight:400;box-shadow:0 6px 20px #0003;margin-right:10px}\n"], dependencies: [{ kind: "component", type: ChatWidgetComponent, selector: "app-chat-widget", inputs: ["isOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
365
365
|
}
|
|
366
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SupportButtonsComponent, decorators: [{
|
|
367
367
|
type: Component,
|
|
368
368
|
args: [{ selector: 'app-support-buttons', standalone: true, imports: [
|
|
369
369
|
ChatWidgetComponent
|
|
@@ -423,10 +423,10 @@ class RequestService {
|
|
|
423
423
|
this.http.delete(url, data).subscribe((response) => resolve(response), (error) => reject(error));
|
|
424
424
|
});
|
|
425
425
|
}
|
|
426
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
427
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
426
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
427
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RequestService, providedIn: 'root' });
|
|
428
428
|
}
|
|
429
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RequestService, decorators: [{
|
|
430
430
|
type: Injectable,
|
|
431
431
|
args: [{
|
|
432
432
|
providedIn: 'root',
|
|
@@ -1 +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: '../../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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"}
|
|
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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"}
|