@gauravrathod674/super-customizable-chatbot 0.3.0 → 0.3.1
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.
- package/README.md +10 -0
- package/dist/style.css +1 -1
- package/dist/super-customizable-chatbot.es.js +303 -279
- package/dist/super-customizable-chatbot.umd.js +10 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -271,6 +271,16 @@ Pass a `theme` object to customize the chatbot's appearance. Any property you do
|
|
|
271
271
|
| `messages.bubblePointer` | `boolean` | `true` | Show a small pointer on the message bubbles. |
|
|
272
272
|
| `messages.animation` | `string` | `'fade-in'` | Bot response animation. Options: `'fade-in'`, `'typing'`, `'slide-up'`, `'zoom-in'`, `'flip'`, `'none'`. |
|
|
273
273
|
|
|
274
|
+
#### Markdown Customization (`messages.markdownStyles`)
|
|
275
|
+
|
|
276
|
+
| Path | Type | Default | Description |
|
|
277
|
+
| --- | --- | --- | --- |
|
|
278
|
+
| `markdownStyles.boldColor` | `string` | `inherit` | Color for `**bold**` text. |
|
|
279
|
+
| `markdownStyles.italicColor` | `string` | `inherit` | Color for `*italic*` text. |
|
|
280
|
+
| `markdownStyles.linkColor` | `string` | `'#3b82f6'` | Color for `[links](...)`. |
|
|
281
|
+
| `markdownStyles.codeColor` | `string` | `inherit` | Text color for `inline code`. |
|
|
282
|
+
| `markdownStyles.codeBackgroundColor` | `string` | `rgba(0,0,0,0.1)` | Background color for `inline code`. |
|
|
283
|
+
|
|
274
284
|
#### Input Area
|
|
275
285
|
|
|
276
286
|
| Path | Type | Default | Description |
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:before,:after{--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: rgb(59 130 246 / .5);--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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--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: rgb(59 130 246 / .5);--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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{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,samp,pre{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:baseline}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;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-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,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{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}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"“""”""‘""’";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%),0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body: #374151;--tw-prose-headings: #111827;--tw-prose-lead: #4b5563;--tw-prose-links: #111827;--tw-prose-bold: #111827;--tw-prose-counters: #6b7280;--tw-prose-bullets: #d1d5db;--tw-prose-hr: #e5e7eb;--tw-prose-quotes: #111827;--tw-prose-quote-borders: #e5e7eb;--tw-prose-captions: #6b7280;--tw-prose-kbd: #111827;--tw-prose-kbd-shadows: 17 24 39;--tw-prose-code: #111827;--tw-prose-pre-code: #e5e7eb;--tw-prose-pre-bg: #1f2937;--tw-prose-th-borders: #d1d5db;--tw-prose-td-borders: #e5e7eb;--tw-prose-invert-body: #d1d5db;--tw-prose-invert-headings: #fff;--tw-prose-invert-lead: #9ca3af;--tw-prose-invert-links: #fff;--tw-prose-invert-bold: #fff;--tw-prose-invert-counters: #9ca3af;--tw-prose-invert-bullets: #4b5563;--tw-prose-invert-hr: #374151;--tw-prose-invert-quotes: #f3f4f6;--tw-prose-invert-quote-borders: #374151;--tw-prose-invert-captions: #9ca3af;--tw-prose-invert-kbd: #fff;--tw-prose-invert-kbd-shadows: 255 255 255;--tw-prose-invert-code: #fff;--tw-prose-invert-pre-code: #d1d5db;--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);--tw-prose-invert-th-borders: #4b5563;--tw-prose-invert-td-borders: #374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-sm{font-size:.875rem;line-height:1.7142857}.prose-sm :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;line-height:1.5555556;margin-top:.8888889em;margin-bottom:.8888889em}.prose-sm :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em;padding-inline-start:1.1111111em}.prose-sm :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:2.1428571em;margin-top:0;margin-bottom:.8em;line-height:1.2}.prose-sm :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.4285714em;margin-top:1.6em;margin-bottom:.8em;line-height:1.4}.prose-sm :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;margin-top:1.5555556em;margin-bottom:.4444444em;line-height:1.5555556}.prose-sm :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.4285714em;margin-bottom:.5714286em;line-height:1.4285714}.prose-sm :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;border-radius:.3125rem;padding-top:.1428571em;padding-inline-end:.3571429em;padding-bottom:.1428571em;padding-inline-start:.3571429em}.prose-sm :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em}.prose-sm :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.9em}.prose-sm :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em}.prose-sm :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.6666667;margin-top:1.6666667em;margin-bottom:1.6666667em;border-radius:.25rem;padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;margin-bottom:.2857143em}.prose-sm :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(.prose-sm>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(.prose-sm>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;padding-inline-start:1.5714286em}.prose-sm :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2.8571429em;margin-bottom:2.8571429em}.prose-sm :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.5}.prose-sm :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.3333333;margin-top:.6666667em}.prose-sm :where(.prose-sm>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(.prose-sm>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}.bottom-10{bottom:2.5rem}.bottom-5{bottom:1.25rem}.left-1\/2{left:50%}.left-5{left:1.25rem}.right-10{right:2.5rem}.right-5{right:1.25rem}.top-1\/2{top:50%}.z-40{z-index:40}.z-50{z-index:50}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-3{margin-top:.75rem}.flex{display:flex}.grid{display:grid}.h-10{height:2.5rem}.h-2{height:.5rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-2{width:.5rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-full{width:100%}.max-w-\[85\%\]{max-width:85%}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50%;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%;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 pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-16{gap:4rem}.gap-2{gap:.5rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(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}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-bl-none{border-bottom-left-radius:0}.rounded-br-none{border-bottom-right-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-t{border-top-width:1px}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-white\/50{border-color:#ffffff80}.bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/30{background-color:#ffffff4d}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.text-blue-900{--tw-text-opacity: 1;color:rgb(30 58 138 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-green-800{--tw-text-opacity: 1;color:rgb(22 101 52 / var(--tw-text-opacity, 1))}.text-indigo-800{--tw-text-opacity: 1;color:rgb(55 48 163 / var(--tw-text-opacity, 1))}.text-inherit{color:inherit}.text-purple-800{--tw-text-opacity: 1;color:rgb(107 33 168 / var(--tw-text-opacity, 1))}.text-red-800{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity, 1))}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ring{--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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.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,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-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}.\[animation-delay\:-0\.15s\]{animation-delay:-.15s}.\[animation-delay\:-0\.3s\]{animation-delay:-.3s}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.hover\:bg-white\/20:hover{background-color:#fff3}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-2:focus-visible{--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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-\[--chatbot-launcher-bg\]:focus-visible{--tw-ring-color: var(--chatbot-launcher-bg)}.focus-visible\:ring-white:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}.prose-headings\:my-2 :is(:where(h1,h2,h3,h4,h5,h6,th):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.5rem;margin-bottom:.5rem}.prose-p\:my-0 :is(:where(p):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:0;margin-bottom:0}.prose-ul\:my-1 :is(:where(ul):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.25rem;margin-bottom:.25rem}.prose-li\:my-0\.5 :is(:where(li):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.125rem;margin-bottom:.125rem}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
|
1
|
+
*,:before,:after{--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: rgb(59 130 246 / .5);--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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--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: rgb(59 130 246 / .5);--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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{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,samp,pre{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:baseline}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;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-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,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{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}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"“""”""‘""’";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%),0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body: #374151;--tw-prose-headings: #111827;--tw-prose-lead: #4b5563;--tw-prose-links: #111827;--tw-prose-bold: #111827;--tw-prose-counters: #6b7280;--tw-prose-bullets: #d1d5db;--tw-prose-hr: #e5e7eb;--tw-prose-quotes: #111827;--tw-prose-quote-borders: #e5e7eb;--tw-prose-captions: #6b7280;--tw-prose-kbd: #111827;--tw-prose-kbd-shadows: 17 24 39;--tw-prose-code: #111827;--tw-prose-pre-code: #e5e7eb;--tw-prose-pre-bg: #1f2937;--tw-prose-th-borders: #d1d5db;--tw-prose-td-borders: #e5e7eb;--tw-prose-invert-body: #d1d5db;--tw-prose-invert-headings: #fff;--tw-prose-invert-lead: #9ca3af;--tw-prose-invert-links: #fff;--tw-prose-invert-bold: #fff;--tw-prose-invert-counters: #9ca3af;--tw-prose-invert-bullets: #4b5563;--tw-prose-invert-hr: #374151;--tw-prose-invert-quotes: #f3f4f6;--tw-prose-invert-quote-borders: #374151;--tw-prose-invert-captions: #9ca3af;--tw-prose-invert-kbd: #fff;--tw-prose-invert-kbd-shadows: 255 255 255;--tw-prose-invert-code: #fff;--tw-prose-invert-pre-code: #d1d5db;--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);--tw-prose-invert-th-borders: #4b5563;--tw-prose-invert-td-borders: #374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-sm{font-size:.875rem;line-height:1.7142857}.prose-sm :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;line-height:1.5555556;margin-top:.8888889em;margin-bottom:.8888889em}.prose-sm :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em;padding-inline-start:1.1111111em}.prose-sm :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:2.1428571em;margin-top:0;margin-bottom:.8em;line-height:1.2}.prose-sm :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.4285714em;margin-top:1.6em;margin-bottom:.8em;line-height:1.4}.prose-sm :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;margin-top:1.5555556em;margin-bottom:.4444444em;line-height:1.5555556}.prose-sm :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.4285714em;margin-bottom:.5714286em;line-height:1.4285714}.prose-sm :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;border-radius:.3125rem;padding-top:.1428571em;padding-inline-end:.3571429em;padding-bottom:.1428571em;padding-inline-start:.3571429em}.prose-sm :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em}.prose-sm :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.9em}.prose-sm :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em}.prose-sm :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.6666667;margin-top:1.6666667em;margin-bottom:1.6666667em;border-radius:.25rem;padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;margin-bottom:.2857143em}.prose-sm :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(.prose-sm>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(.prose-sm>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;padding-inline-start:1.5714286em}.prose-sm :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2.8571429em;margin-bottom:2.8571429em}.prose-sm :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.5}.prose-sm :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.3333333;margin-top:.6666667em}.prose-sm :where(.prose-sm>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(.prose-sm>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.-left-1\/2{left:-50%}.-top-1\/2{top:-50%}.bottom-10{bottom:2.5rem}.bottom-5{bottom:1.25rem}.left-1\/2{left:50%}.left-5{left:1.25rem}.right-10{right:2.5rem}.right-5{right:1.25rem}.top-1\/2{top:50%}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-12{margin-bottom:3rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-4{margin-top:1rem}.flex{display:flex}.grid{display:grid}.h-10{height:2.5rem}.h-12{height:3rem}.h-2{height:.5rem}.h-24{height:6rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[200\%\]{height:200%}.h-full{height:100%}.h-screen{height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-2{width:.5rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-\[200\%\]{width:200%}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-6xl{max-width:72rem}.max-w-\[85\%\]{max-width:85%}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50%;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%;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))}.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 pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(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}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-bl-none{border-bottom-left-radius:0}.rounded-br-none{border-bottom-right-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-t{border-top-width:1px}.border-blue-500\/20{border-color:#3b82f633}.border-white\/50{border-color:#ffffff80}.bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.bg-slate-900\/70{background-color:#0f172ab3}.bg-slate-950{--tw-bg-opacity: 1;background-color:rgb(2 6 23 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white\/30{background-color:#ffffff4d}.bg-\[radial-gradient\(circle_at_center\,rgba\(139\,92\,246\,0\.3\)_0\,rgba\(139\,92\,246\,0\)_50\%\)\]{background-image:radial-gradient(circle at center,#8b5cf64d 0,#8b5cf600 50%)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-400{--tw-gradient-from: #60a5fa var(--tw-gradient-from-position);--tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-500{--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-violet-500{--tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to: #7c3aed var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-5xl{font-size:3rem;line-height:1}.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}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-inherit{color:inherit}.text-slate-200{--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-slate-950\/50{--tw-shadow-color: rgb(2 6 23 / .5);--tw-shadow: var(--tw-shadow-colored)}.ring{--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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.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)}.filter{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)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;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}.duration-300{transition-duration:.3s}.\[animation-delay\:-0\.15s\]{animation-delay:-.15s}.\[animation-delay\:-0\.3s\]{animation-delay:-.3s}.\[mask-image\:linear-gradient\(0deg\,\#000\,rgba\(0\,0\,0\,0\.6\)\)\]{-webkit-mask-image:linear-gradient(0deg,#000,rgba(0,0,0,.6));mask-image:linear-gradient(0deg,#000,#0009)}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.hover\:-translate-y-1:hover{--tw-translate-y: -.25rem;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))}.hover\:border-blue-400\/50:hover{border-color:#60a5fa80}.hover\:bg-slate-900:hover{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/20:hover{background-color:#fff3}.hover\:shadow-xl:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--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)}.hover\:shadow-violet-500\/20:hover{--tw-shadow-color: rgb(139 92 246 / .2);--tw-shadow: var(--tw-shadow-colored)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-2:focus-visible{--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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-\[--chatbot-launcher-bg\]:focus-visible{--tw-ring-color: var(--chatbot-launcher-bg)}.focus-visible\:ring-white:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}.prose-headings\:my-2 :is(:where(h1,h2,h3,h4,h5,h6,th):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.5rem;margin-bottom:.5rem}.prose-p\:my-0 :is(:where(p):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:0;margin-bottom:0}.prose-ul\:my-1 :is(:where(ul):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.25rem;margin-bottom:.25rem}.prose-li\:my-0\.5 :is(:where(li):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.125rem;margin-bottom:.125rem}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useState as
|
|
3
|
-
import { AnimatePresence as
|
|
4
|
-
import { FontAwesomeIcon as
|
|
5
|
-
import { faCommentDots as
|
|
6
|
-
import { GoogleGenerativeAI as
|
|
1
|
+
import { jsx as e, jsxs as u } from "react/jsx-runtime";
|
|
2
|
+
import { useState as S, useRef as j, useMemo as M, useEffect as D, useCallback as we } from "react";
|
|
3
|
+
import { AnimatePresence as Q, motion as C } from "framer-motion";
|
|
4
|
+
import { FontAwesomeIcon as $e } from "@fortawesome/react-fontawesome";
|
|
5
|
+
import { faCommentDots as Ie } from "@fortawesome/free-solid-svg-icons";
|
|
6
|
+
import { GoogleGenerativeAI as Se } from "@google/generative-ai";
|
|
7
7
|
import De from "openai";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
8
|
+
import ze from "@anthropic-ai/sdk";
|
|
9
|
+
import Ee from "groq-sdk";
|
|
10
10
|
import T from "react-markdown";
|
|
11
|
-
const
|
|
11
|
+
const Le = () => /* @__PURE__ */ u(
|
|
12
12
|
"svg",
|
|
13
13
|
{
|
|
14
14
|
viewBox: "0 0 24 24",
|
|
@@ -29,7 +29,7 @@ const Ee = () => /* @__PURE__ */ d(
|
|
|
29
29
|
/* @__PURE__ */ e("circle", { cx: "15", cy: "10", r: "1", fill: "currentColor" })
|
|
30
30
|
]
|
|
31
31
|
}
|
|
32
|
-
),
|
|
32
|
+
), Re = () => /* @__PURE__ */ u(
|
|
33
33
|
"svg",
|
|
34
34
|
{
|
|
35
35
|
viewBox: "0 0 24 24",
|
|
@@ -54,7 +54,7 @@ const Ee = () => /* @__PURE__ */ d(
|
|
|
54
54
|
)
|
|
55
55
|
]
|
|
56
56
|
}
|
|
57
|
-
),
|
|
57
|
+
), Ae = () => /* @__PURE__ */ u(
|
|
58
58
|
"svg",
|
|
59
59
|
{
|
|
60
60
|
fill: "none",
|
|
@@ -74,40 +74,40 @@ const Ee = () => /* @__PURE__ */ d(
|
|
|
74
74
|
/* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 12h9" })
|
|
75
75
|
]
|
|
76
76
|
}
|
|
77
|
-
),
|
|
77
|
+
), Fe = () => /* @__PURE__ */ u("div", { className: "flex items-center space-x-1 p-3", children: [
|
|
78
78
|
/* @__PURE__ */ e("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.3s]" }),
|
|
79
79
|
/* @__PURE__ */ e("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.15s]" }),
|
|
80
80
|
/* @__PURE__ */ e("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse" })
|
|
81
|
-
] }),
|
|
82
|
-
const
|
|
83
|
-
return
|
|
84
|
-
if (
|
|
85
|
-
|
|
81
|
+
] }), Oe = ({ fullText: c, onComplete: d, components: b }) => {
|
|
82
|
+
const a = typeof c == "string" ? c : "", [$, r] = S("");
|
|
83
|
+
return D(() => {
|
|
84
|
+
if (a.length === 0) {
|
|
85
|
+
d == null || d();
|
|
86
86
|
return;
|
|
87
87
|
}
|
|
88
|
-
let
|
|
89
|
-
|
|
90
|
-
const
|
|
91
|
-
if (
|
|
92
|
-
const
|
|
93
|
-
|
|
88
|
+
let w = 0;
|
|
89
|
+
r("");
|
|
90
|
+
const h = setInterval(() => {
|
|
91
|
+
if (w < a.length) {
|
|
92
|
+
const g = a.charAt(w);
|
|
93
|
+
r((R) => R + g), w++;
|
|
94
94
|
} else
|
|
95
|
-
clearInterval(
|
|
95
|
+
clearInterval(h), d == null || d();
|
|
96
96
|
}, 25);
|
|
97
|
-
return () => clearInterval(
|
|
98
|
-
}, [
|
|
97
|
+
return () => clearInterval(h);
|
|
98
|
+
}, [a, d]), /* @__PURE__ */ e(
|
|
99
99
|
"div",
|
|
100
100
|
{
|
|
101
101
|
className: "prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5",
|
|
102
102
|
style: { color: "inherit" },
|
|
103
|
-
children: /* @__PURE__ */ e(T, { children:
|
|
103
|
+
children: /* @__PURE__ */ e(T, { components: b, children: $ || "" })
|
|
104
104
|
}
|
|
105
105
|
);
|
|
106
|
-
},
|
|
107
|
-
const
|
|
108
|
-
switch (
|
|
106
|
+
}, Pe = ({ text: c, animationType: d, components: b }) => {
|
|
107
|
+
const a = "prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5";
|
|
108
|
+
switch (d) {
|
|
109
109
|
case "typing":
|
|
110
|
-
return /* @__PURE__ */ e(
|
|
110
|
+
return /* @__PURE__ */ e(Oe, { fullText: c, components: b });
|
|
111
111
|
case "fade-in":
|
|
112
112
|
return /* @__PURE__ */ e(
|
|
113
113
|
C.div,
|
|
@@ -115,7 +115,7 @@ const Ee = () => /* @__PURE__ */ d(
|
|
|
115
115
|
initial: { opacity: 0, y: 10 },
|
|
116
116
|
animate: { opacity: 1, y: 0 },
|
|
117
117
|
transition: { duration: 1.5, ease: "easeOut" },
|
|
118
|
-
children: /* @__PURE__ */ e("div", { className:
|
|
118
|
+
children: /* @__PURE__ */ e("div", { className: a, children: /* @__PURE__ */ e(T, { components: b, children: c }) })
|
|
119
119
|
}
|
|
120
120
|
);
|
|
121
121
|
case "slide-up":
|
|
@@ -125,7 +125,7 @@ const Ee = () => /* @__PURE__ */ d(
|
|
|
125
125
|
initial: { y: 50, opacity: 0 },
|
|
126
126
|
animate: { y: 0, opacity: 1 },
|
|
127
127
|
transition: { duration: 0.7, ease: "anticipate" },
|
|
128
|
-
children: /* @__PURE__ */ e("div", { className:
|
|
128
|
+
children: /* @__PURE__ */ e("div", { className: a, children: /* @__PURE__ */ e(T, { components: b, children: c }) })
|
|
129
129
|
}
|
|
130
130
|
);
|
|
131
131
|
case "zoom-in":
|
|
@@ -135,7 +135,7 @@ const Ee = () => /* @__PURE__ */ d(
|
|
|
135
135
|
initial: { scale: 0.5, opacity: 0 },
|
|
136
136
|
animate: { scale: 1, opacity: 1 },
|
|
137
137
|
transition: { duration: 1, ease: "backOut" },
|
|
138
|
-
children: /* @__PURE__ */ e("div", { className:
|
|
138
|
+
children: /* @__PURE__ */ e("div", { className: a, children: /* @__PURE__ */ e(T, { components: b, children: c }) })
|
|
139
139
|
}
|
|
140
140
|
);
|
|
141
141
|
case "flip":
|
|
@@ -146,77 +146,80 @@ const Ee = () => /* @__PURE__ */ d(
|
|
|
146
146
|
animate: { rotateX: 0, opacity: 1 },
|
|
147
147
|
transition: { duration: 1, ease: "easeOut" },
|
|
148
148
|
style: { transformPerspective: 400 },
|
|
149
|
-
children: /* @__PURE__ */ e("div", { className:
|
|
149
|
+
children: /* @__PURE__ */ e("div", { className: a, children: /* @__PURE__ */ e(T, { components: b, children: c }) })
|
|
150
150
|
}
|
|
151
151
|
);
|
|
152
152
|
default:
|
|
153
|
-
return /* @__PURE__ */ e("div", { className:
|
|
153
|
+
return /* @__PURE__ */ e("div", { className: a, children: /* @__PURE__ */ e(T, { components: b, children: c }) });
|
|
154
154
|
}
|
|
155
|
-
},
|
|
156
|
-
const
|
|
157
|
-
if (!
|
|
158
|
-
return
|
|
159
|
-
let
|
|
160
|
-
const
|
|
161
|
-
if (
|
|
162
|
-
const
|
|
163
|
-
...
|
|
164
|
-
text: `${
|
|
165
|
-
${
|
|
155
|
+
}, je = (c) => {
|
|
156
|
+
const d = [];
|
|
157
|
+
if (!c || c.length === 0)
|
|
158
|
+
return d;
|
|
159
|
+
let a = c.reduce((r, w) => {
|
|
160
|
+
const h = r.length > 0 ? r[r.length - 1] : null;
|
|
161
|
+
if (h && h.sender === w.sender) {
|
|
162
|
+
const g = {
|
|
163
|
+
...h,
|
|
164
|
+
text: `${h.text}
|
|
165
|
+
${w.text}`
|
|
166
166
|
};
|
|
167
|
-
r[r.length - 1] =
|
|
167
|
+
r[r.length - 1] = g;
|
|
168
168
|
} else
|
|
169
|
-
r.push({ ...
|
|
169
|
+
r.push({ ...w });
|
|
170
170
|
return r;
|
|
171
171
|
}, []).map((r) => ({
|
|
172
172
|
role: r.sender === "bot" ? "model" : "user",
|
|
173
173
|
parts: [{ text: r.text }]
|
|
174
174
|
}));
|
|
175
|
-
const
|
|
176
|
-
if (
|
|
177
|
-
|
|
175
|
+
const $ = a.findIndex((r) => r.role === "user");
|
|
176
|
+
if ($ > -1)
|
|
177
|
+
a = a.slice($);
|
|
178
178
|
else
|
|
179
179
|
return [];
|
|
180
|
-
return
|
|
181
|
-
},
|
|
182
|
-
botName:
|
|
183
|
-
botAvatar:
|
|
184
|
-
userAvatar:
|
|
185
|
-
welcomeMessage:
|
|
186
|
-
placeholderText:
|
|
180
|
+
return a;
|
|
181
|
+
}, Qe = ({
|
|
182
|
+
botName: c = "ChatBot",
|
|
183
|
+
botAvatar: d = /* @__PURE__ */ e(Le, {}),
|
|
184
|
+
userAvatar: b = /* @__PURE__ */ e(Re, {}),
|
|
185
|
+
welcomeMessage: a = "Hello! How can I help?",
|
|
186
|
+
placeholderText: $ = "Type a message...",
|
|
187
187
|
customInstruction: r = "",
|
|
188
|
-
isOpen:
|
|
189
|
-
disabled:
|
|
190
|
-
isTyping:
|
|
191
|
-
onSend:
|
|
188
|
+
isOpen: w = !1,
|
|
189
|
+
disabled: h = !1,
|
|
190
|
+
isTyping: g = !1,
|
|
191
|
+
onSend: R = () => {
|
|
192
192
|
},
|
|
193
|
-
theme:
|
|
194
|
-
geminiApiKey:
|
|
193
|
+
theme: y = {},
|
|
194
|
+
geminiApiKey: W,
|
|
195
195
|
geminiModelName: K = "gemini-1.5-flash",
|
|
196
|
-
openaiApiKey:
|
|
196
|
+
openaiApiKey: G,
|
|
197
197
|
openaiModelName: ee = "gpt-4o-mini",
|
|
198
|
-
anthropicApiKey:
|
|
199
|
-
anthropicModelName:
|
|
200
|
-
grokApiKey:
|
|
201
|
-
grokModelName:
|
|
198
|
+
anthropicApiKey: H,
|
|
199
|
+
anthropicModelName: oe = "claude-3-haiku-20240307",
|
|
200
|
+
grokApiKey: q,
|
|
201
|
+
grokModelName: te = "llama3-8b-8192",
|
|
202
202
|
messages: re
|
|
203
203
|
}) => {
|
|
204
|
-
const [
|
|
204
|
+
const [k] = S(
|
|
205
205
|
() => `chatbot-instance-${Math.random().toString(36).substring(2, 9)}`
|
|
206
|
-
), [
|
|
207
|
-
} :
|
|
208
|
-
if (!
|
|
206
|
+
), [N, A] = S(w), [ye, xe] = S(() => a ? [{ id: 1, text: a, sender: "bot" }] : []), [F, se] = S(""), [O, f] = S(!1), z = typeof re < "u", v = z ? re : ye, m = z ? () => {
|
|
207
|
+
} : xe, ne = j(null), ae = j(null), le = j(null), ve = j(null), U = M(() => {
|
|
208
|
+
if (!W) return null;
|
|
209
209
|
try {
|
|
210
|
-
return new
|
|
210
|
+
return new Se(W).getGenerativeModel({
|
|
211
211
|
model: K,
|
|
212
212
|
systemInstruction: r
|
|
213
213
|
});
|
|
214
|
-
} catch (
|
|
215
|
-
return console.error("Failed to initialize Gemini:",
|
|
214
|
+
} catch (o) {
|
|
215
|
+
return console.error("Failed to initialize Gemini:", o), null;
|
|
216
216
|
}
|
|
217
|
-
}, [
|
|
218
|
-
|
|
219
|
-
|
|
217
|
+
}, [W, K, r]), V = M(() => G ? new De({ apiKey: G, dangerouslyAllowBrowser: !0 }) : null, [G]), Z = M(() => H ? new ze({
|
|
218
|
+
apiKey: H,
|
|
219
|
+
dangerouslyAllowBrowser: !0
|
|
220
|
+
}) : null, [H]), X = M(() => q ? new Ee({ apiKey: q, dangerouslyAllowBrowser: !0 }) : null, [q]), t = M(() => {
|
|
221
|
+
var l;
|
|
222
|
+
const o = ((l = y == null ? void 0 : y.window) == null ? void 0 : l.placement) === "center", s = {
|
|
220
223
|
launcher: {
|
|
221
224
|
backgroundColor: "#4f46e5",
|
|
222
225
|
iconColor: "#ffffff",
|
|
@@ -238,7 +241,8 @@ ${y.text}`
|
|
|
238
241
|
showAvatars: !0,
|
|
239
242
|
bubbleShape: "rounded",
|
|
240
243
|
bubblePointer: !0,
|
|
241
|
-
animation: "fade-in"
|
|
244
|
+
animation: "fade-in",
|
|
245
|
+
markdownStyles: {}
|
|
242
246
|
},
|
|
243
247
|
input: {
|
|
244
248
|
backgroundColor: "#ffffff",
|
|
@@ -251,8 +255,8 @@ ${y.text}`
|
|
|
251
255
|
backgroundColor: "#ffffff",
|
|
252
256
|
borderColor: "#e5e7eb",
|
|
253
257
|
borderRadius: "0.75rem",
|
|
254
|
-
width:
|
|
255
|
-
height:
|
|
258
|
+
width: o ? "80vw" : "22rem",
|
|
259
|
+
height: o ? "80vh" : "30rem",
|
|
256
260
|
placement: "bottom-right",
|
|
257
261
|
backdrop: !1,
|
|
258
262
|
backdropColor: "rgba(0, 0, 0, 0.4)",
|
|
@@ -264,137 +268,156 @@ ${y.text}`
|
|
|
264
268
|
}
|
|
265
269
|
};
|
|
266
270
|
return {
|
|
267
|
-
launcher: { ...
|
|
268
|
-
header: { ...
|
|
269
|
-
messages: { ...
|
|
270
|
-
input: { ...
|
|
271
|
-
window: { ...
|
|
271
|
+
launcher: { ...s.launcher, ...y.launcher },
|
|
272
|
+
header: { ...s.header, ...y.header },
|
|
273
|
+
messages: { ...s.messages, ...y.messages },
|
|
274
|
+
input: { ...s.input, ...y.input },
|
|
275
|
+
window: { ...s.window, ...y.window }
|
|
272
276
|
};
|
|
273
|
-
}, [
|
|
277
|
+
}, [y]), Ce = M(
|
|
274
278
|
() => ({
|
|
275
279
|
// Launcher
|
|
276
|
-
"--chatbot-launcher-bg":
|
|
277
|
-
"--chatbot-launcher-icon-color":
|
|
278
|
-
"--chatbot-launcher-size":
|
|
280
|
+
"--chatbot-launcher-bg": t.launcher.backgroundColor,
|
|
281
|
+
"--chatbot-launcher-icon-color": t.launcher.iconColor,
|
|
282
|
+
"--chatbot-launcher-size": t.launcher.size,
|
|
279
283
|
// Header
|
|
280
|
-
"--chatbot-header-bg":
|
|
281
|
-
"--chatbot-header-text-color":
|
|
282
|
-
"--chatbot-header-font-family":
|
|
283
|
-
"--chatbot-header-font-weight":
|
|
284
|
+
"--chatbot-header-bg": t.header.backgroundColor,
|
|
285
|
+
"--chatbot-header-text-color": t.header.textColor,
|
|
286
|
+
"--chatbot-header-font-family": t.header.fontFamily,
|
|
287
|
+
"--chatbot-header-font-weight": t.header.fontWeight,
|
|
284
288
|
// Messages
|
|
285
|
-
"--chatbot-user-msg-bg":
|
|
286
|
-
"--chatbot-user-msg-text-color":
|
|
287
|
-
"--chatbot-bot-msg-bg":
|
|
288
|
-
"--chatbot-bot-msg-text-color":
|
|
289
|
-
"--chatbot-msg-font-family":
|
|
290
|
-
"--chatbot-msg-font-size":
|
|
289
|
+
"--chatbot-user-msg-bg": t.messages.userBackgroundColor,
|
|
290
|
+
"--chatbot-user-msg-text-color": t.messages.userTextColor,
|
|
291
|
+
"--chatbot-bot-msg-bg": t.messages.botBackgroundColor,
|
|
292
|
+
"--chatbot-bot-msg-text-color": t.messages.botTextColor,
|
|
293
|
+
"--chatbot-msg-font-family": t.messages.fontFamily,
|
|
294
|
+
"--chatbot-msg-font-size": t.messages.fontSize,
|
|
291
295
|
// Input
|
|
292
|
-
"--chatbot-input-bg":
|
|
293
|
-
"--chatbot-input-text-color":
|
|
294
|
-
"--chatbot-input-placeholder-color":
|
|
295
|
-
"--chatbot-input-border-color":
|
|
296
|
-
"--chatbot-input-focus-ring":
|
|
296
|
+
"--chatbot-input-bg": t.input.backgroundColor,
|
|
297
|
+
"--chatbot-input-text-color": t.input.textColor,
|
|
298
|
+
"--chatbot-input-placeholder-color": t.input.placeholderTextColor,
|
|
299
|
+
"--chatbot-input-border-color": t.input.borderColor,
|
|
300
|
+
"--chatbot-input-focus-ring": t.input.focusRingColor,
|
|
297
301
|
// Window
|
|
298
|
-
"--chatbot-window-bg":
|
|
299
|
-
"--chatbot-window-border-color":
|
|
300
|
-
"--chatbot-window-border-radius":
|
|
301
|
-
"--chatbot-window-width":
|
|
302
|
-
"--chatbot-window-height":
|
|
302
|
+
"--chatbot-window-bg": t.window.backgroundColor,
|
|
303
|
+
"--chatbot-window-border-color": t.window.borderColor,
|
|
304
|
+
"--chatbot-window-border-radius": t.window.borderRadius,
|
|
305
|
+
"--chatbot-window-width": t.window.width,
|
|
306
|
+
"--chatbot-window-height": t.window.height
|
|
303
307
|
}),
|
|
304
|
-
[
|
|
305
|
-
)
|
|
306
|
-
|
|
308
|
+
[t]
|
|
309
|
+
), ie = M(() => {
|
|
310
|
+
const o = t.messages.markdownStyles || {};
|
|
311
|
+
return {
|
|
312
|
+
strong: ({ node: s, ...l }) => /* @__PURE__ */ e("strong", { style: { color: o.boldColor || "inherit" }, ...l }),
|
|
313
|
+
em: ({ node: s, ...l }) => /* @__PURE__ */ e("em", { style: { color: o.italicColor || "inherit" }, ...l }),
|
|
314
|
+
a: ({ node: s, ...l }) => /* @__PURE__ */ e("a", { style: { color: o.linkColor || "#3b82f6" }, ...l }),
|
|
315
|
+
code: ({ node: s, ...l }) => /* @__PURE__ */ e(
|
|
316
|
+
"code",
|
|
317
|
+
{
|
|
318
|
+
style: {
|
|
319
|
+
color: o.codeColor || "inherit",
|
|
320
|
+
backgroundColor: o.codeBackgroundColor || "rgba(0, 0, 0, 0.1)",
|
|
321
|
+
padding: "0.1rem 0.3rem",
|
|
322
|
+
borderRadius: "0.25rem"
|
|
323
|
+
},
|
|
324
|
+
...l
|
|
325
|
+
}
|
|
326
|
+
)
|
|
327
|
+
};
|
|
328
|
+
}, [t.messages.markdownStyles]);
|
|
329
|
+
D(() => {
|
|
307
330
|
var E;
|
|
308
|
-
const
|
|
309
|
-
(E = document.getElementById(
|
|
310
|
-
const
|
|
311
|
-
return
|
|
331
|
+
const o = t.window.scrollbarThumbColor, s = t.window.scrollbarTrackColor, l = `scrollbar-style-${k}`;
|
|
332
|
+
(E = document.getElementById(l)) == null || E.remove();
|
|
333
|
+
const I = document.createElement("style");
|
|
334
|
+
return I.id = l, I.innerHTML = `
|
|
312
335
|
/* Modern browsers */
|
|
313
|
-
#${
|
|
336
|
+
#${k} .chatbot-message-list {
|
|
314
337
|
scrollbar-width: thin;
|
|
315
|
-
scrollbar-color: ${
|
|
338
|
+
scrollbar-color: ${o} ${s};
|
|
316
339
|
}
|
|
317
340
|
/* WebKit-based browsers (Chrome, Safari, Edge) */
|
|
318
|
-
#${
|
|
341
|
+
#${k} .chatbot-message-list::-webkit-scrollbar {
|
|
319
342
|
width: 8px;
|
|
320
343
|
}
|
|
321
|
-
#${
|
|
322
|
-
background: ${
|
|
344
|
+
#${k} .chatbot-message-list::-webkit-scrollbar-track {
|
|
345
|
+
background: ${s};
|
|
323
346
|
border-radius: 4px;
|
|
324
347
|
}
|
|
325
|
-
#${
|
|
326
|
-
background-color: ${
|
|
348
|
+
#${k} .chatbot-message-list::-webkit-scrollbar-thumb {
|
|
349
|
+
background-color: ${o};
|
|
327
350
|
border-radius: 4px;
|
|
328
|
-
border: 2px solid ${
|
|
351
|
+
border: 2px solid ${s};
|
|
329
352
|
}
|
|
330
|
-
`, document.head.appendChild(
|
|
353
|
+
`, document.head.appendChild(I), () => {
|
|
331
354
|
var L;
|
|
332
|
-
(L = document.getElementById(
|
|
355
|
+
(L = document.getElementById(l)) == null || L.remove();
|
|
333
356
|
};
|
|
334
357
|
}, [
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
]),
|
|
339
|
-
|
|
340
|
-
}, [
|
|
341
|
-
var
|
|
342
|
-
(
|
|
343
|
-
}, [
|
|
344
|
-
var
|
|
345
|
-
|
|
346
|
-
}, [
|
|
347
|
-
const
|
|
348
|
-
|
|
358
|
+
k,
|
|
359
|
+
t.window.scrollbarThumbColor,
|
|
360
|
+
t.window.scrollbarTrackColor
|
|
361
|
+
]), D(() => {
|
|
362
|
+
f(g);
|
|
363
|
+
}, [g]), D(() => {
|
|
364
|
+
var o;
|
|
365
|
+
(o = ae.current) == null || o.scrollIntoView({ behavior: "smooth" });
|
|
366
|
+
}, [v, O, g]), D(() => {
|
|
367
|
+
var o, s;
|
|
368
|
+
N ? (o = ne.current) == null || o.focus() : (s = le.current) == null || s.focus();
|
|
369
|
+
}, [N]), D(() => {
|
|
370
|
+
const o = (s) => {
|
|
371
|
+
s.key === "Escape" && N && A(!1);
|
|
349
372
|
};
|
|
350
|
-
return window.addEventListener("keydown",
|
|
351
|
-
}, [
|
|
352
|
-
const
|
|
353
|
-
var
|
|
354
|
-
const
|
|
355
|
-
if (!
|
|
356
|
-
const
|
|
373
|
+
return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
|
|
374
|
+
}, [N]);
|
|
375
|
+
const Y = we(async () => {
|
|
376
|
+
var I, E, L, de, ue, he, be, fe, me, ge, pe;
|
|
377
|
+
const o = F.trim();
|
|
378
|
+
if (!o || h || O || g) return;
|
|
379
|
+
const s = {
|
|
357
380
|
id: Date.now(),
|
|
358
|
-
text:
|
|
381
|
+
text: o,
|
|
359
382
|
sender: "user"
|
|
360
|
-
},
|
|
361
|
-
if (z ||
|
|
362
|
-
|
|
383
|
+
}, l = [...v, s];
|
|
384
|
+
if (z || m((n) => [...n, s]), R(o), se(""), U) {
|
|
385
|
+
f(!0);
|
|
363
386
|
try {
|
|
364
|
-
const
|
|
365
|
-
|
|
366
|
-
} catch (
|
|
367
|
-
console.error("Gemini API Error:",
|
|
368
|
-
const
|
|
387
|
+
const n = je(l), i = n.slice(0, -1), B = ((E = (I = n[n.length - 1]) == null ? void 0 : I.parts[0]) == null ? void 0 : E.text) || "", Be = await (await (await U.startChat({ history: i }).sendMessage(B)).response).text() || "(no response)", Me = { id: Date.now() + 1, text: Be, sender: "bot" };
|
|
388
|
+
m((Te) => [...Te, Me]);
|
|
389
|
+
} catch (n) {
|
|
390
|
+
console.error("Gemini API Error:", n);
|
|
391
|
+
const i = {
|
|
369
392
|
id: Date.now() + 1,
|
|
370
393
|
text: "Sorry, an error occurred. Please try again.",
|
|
371
394
|
sender: "bot"
|
|
372
395
|
};
|
|
373
|
-
|
|
396
|
+
m((B) => [...B, i]);
|
|
374
397
|
} finally {
|
|
375
|
-
|
|
398
|
+
f(!1);
|
|
376
399
|
}
|
|
377
|
-
} else if (
|
|
378
|
-
|
|
400
|
+
} else if (V) {
|
|
401
|
+
f(!0);
|
|
379
402
|
try {
|
|
380
|
-
const
|
|
381
|
-
role:
|
|
382
|
-
content:
|
|
383
|
-
})),
|
|
403
|
+
const n = r ? [{ role: "system", content: r }] : [], i = v.map((p) => ({
|
|
404
|
+
role: p.sender === "bot" ? "assistant" : "user",
|
|
405
|
+
content: p.text
|
|
406
|
+
})), x = ((he = (ue = (de = (L = (await V.chat.completions.create({
|
|
384
407
|
model: ee,
|
|
385
408
|
messages: [
|
|
386
|
-
...
|
|
387
|
-
...
|
|
388
|
-
{ role: "user", content:
|
|
409
|
+
...n,
|
|
410
|
+
...i,
|
|
411
|
+
{ role: "user", content: o }
|
|
389
412
|
]
|
|
390
|
-
})).choices) == null ? void 0 : L[0]) == null ? void 0 :
|
|
391
|
-
|
|
392
|
-
...
|
|
393
|
-
{ id: Date.now() + 1, text:
|
|
413
|
+
})).choices) == null ? void 0 : L[0]) == null ? void 0 : de.message) == null ? void 0 : ue.content) == null ? void 0 : he.trim()) || "(no response)";
|
|
414
|
+
m((p) => [
|
|
415
|
+
...p,
|
|
416
|
+
{ id: Date.now() + 1, text: x, sender: "bot" }
|
|
394
417
|
]);
|
|
395
|
-
} catch (
|
|
396
|
-
console.error("OpenAI Error:",
|
|
397
|
-
...
|
|
418
|
+
} catch (n) {
|
|
419
|
+
console.error("OpenAI Error:", n), m((i) => [
|
|
420
|
+
...i,
|
|
398
421
|
{
|
|
399
422
|
id: Date.now() + 1,
|
|
400
423
|
text: "Sorry, something went wrong with OpenAI.",
|
|
@@ -402,31 +425,31 @@ ${y.text}`
|
|
|
402
425
|
}
|
|
403
426
|
]);
|
|
404
427
|
} finally {
|
|
405
|
-
|
|
428
|
+
f(!1);
|
|
406
429
|
}
|
|
407
|
-
} else if (
|
|
408
|
-
|
|
430
|
+
} else if (Z) {
|
|
431
|
+
f(!0);
|
|
409
432
|
try {
|
|
410
|
-
const
|
|
411
|
-
role:
|
|
412
|
-
content:
|
|
413
|
-
})), B = ((
|
|
414
|
-
model:
|
|
433
|
+
const n = v.map((x) => ({
|
|
434
|
+
role: x.sender === "bot" ? "assistant" : "user",
|
|
435
|
+
content: x.text
|
|
436
|
+
})), B = ((fe = (be = (await Z.messages.create({
|
|
437
|
+
model: oe,
|
|
415
438
|
system: r,
|
|
416
439
|
// Pass instruction to the dedicated 'system' parameter
|
|
417
440
|
messages: [
|
|
418
|
-
...
|
|
419
|
-
{ role: "user", content:
|
|
441
|
+
...n,
|
|
442
|
+
{ role: "user", content: o }
|
|
420
443
|
],
|
|
421
444
|
max_tokens: 1024
|
|
422
|
-
})).content[0]) == null ? void 0 :
|
|
423
|
-
|
|
424
|
-
...
|
|
445
|
+
})).content[0]) == null ? void 0 : be.text) == null ? void 0 : fe.trim()) || "(no response)";
|
|
446
|
+
m((x) => [
|
|
447
|
+
...x,
|
|
425
448
|
{ id: Date.now() + 1, text: B, sender: "bot" }
|
|
426
449
|
]);
|
|
427
|
-
} catch (
|
|
428
|
-
console.error("Anthropic API Error:",
|
|
429
|
-
...
|
|
450
|
+
} catch (n) {
|
|
451
|
+
console.error("Anthropic API Error:", n), m((i) => [
|
|
452
|
+
...i,
|
|
430
453
|
{
|
|
431
454
|
id: Date.now() + 1,
|
|
432
455
|
text: "Sorry, an error occurred with Claude.",
|
|
@@ -434,29 +457,29 @@ ${y.text}`
|
|
|
434
457
|
}
|
|
435
458
|
]);
|
|
436
459
|
} finally {
|
|
437
|
-
|
|
460
|
+
f(!1);
|
|
438
461
|
}
|
|
439
|
-
} else if (
|
|
440
|
-
|
|
462
|
+
} else if (X) {
|
|
463
|
+
f(!0);
|
|
441
464
|
try {
|
|
442
|
-
const
|
|
443
|
-
role:
|
|
444
|
-
content:
|
|
445
|
-
})),
|
|
465
|
+
const n = r ? [{ role: "system", content: r }] : [], i = v.map((p) => ({
|
|
466
|
+
role: p.sender === "bot" ? "assistant" : "user",
|
|
467
|
+
content: p.text
|
|
468
|
+
})), x = ((pe = (ge = (me = (await X.chat.completions.create({
|
|
446
469
|
messages: [
|
|
447
|
-
...
|
|
448
|
-
...
|
|
449
|
-
{ role: "user", content:
|
|
470
|
+
...n,
|
|
471
|
+
...i,
|
|
472
|
+
{ role: "user", content: o }
|
|
450
473
|
],
|
|
451
|
-
model:
|
|
452
|
-
})).choices[0]) == null ? void 0 :
|
|
453
|
-
|
|
454
|
-
...
|
|
455
|
-
{ id: Date.now() + 1, text:
|
|
474
|
+
model: te
|
|
475
|
+
})).choices[0]) == null ? void 0 : me.message) == null ? void 0 : ge.content) == null ? void 0 : pe.trim()) || "(no response)";
|
|
476
|
+
m((p) => [
|
|
477
|
+
...p,
|
|
478
|
+
{ id: Date.now() + 1, text: x, sender: "bot" }
|
|
456
479
|
]);
|
|
457
|
-
} catch (
|
|
458
|
-
console.error("Groq API Error:",
|
|
459
|
-
...
|
|
480
|
+
} catch (n) {
|
|
481
|
+
console.error("Groq API Error:", n), m((i) => [
|
|
482
|
+
...i,
|
|
460
483
|
{
|
|
461
484
|
id: Date.now() + 1,
|
|
462
485
|
text: "Sorry, an error occurred with Groq.",
|
|
@@ -464,60 +487,60 @@ ${y.text}`
|
|
|
464
487
|
}
|
|
465
488
|
]);
|
|
466
489
|
} finally {
|
|
467
|
-
|
|
490
|
+
f(!1);
|
|
468
491
|
}
|
|
469
|
-
} else z || (
|
|
470
|
-
const
|
|
492
|
+
} else z || (f(!0), setTimeout(() => {
|
|
493
|
+
const n = {
|
|
471
494
|
id: Date.now() + 1,
|
|
472
|
-
text: `You said: "${
|
|
495
|
+
text: `You said: "${o}"`,
|
|
473
496
|
sender: "bot"
|
|
474
497
|
};
|
|
475
|
-
|
|
498
|
+
m((i) => [...i, n]), f(!1);
|
|
476
499
|
}, 800));
|
|
477
500
|
}, [
|
|
478
|
-
A,
|
|
479
|
-
u,
|
|
480
501
|
F,
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
502
|
+
h,
|
|
503
|
+
O,
|
|
504
|
+
g,
|
|
505
|
+
R,
|
|
484
506
|
U,
|
|
485
507
|
V,
|
|
486
508
|
Z,
|
|
509
|
+
X,
|
|
487
510
|
z,
|
|
488
|
-
|
|
489
|
-
|
|
511
|
+
v,
|
|
512
|
+
m,
|
|
490
513
|
ee,
|
|
491
|
-
te,
|
|
492
514
|
oe,
|
|
515
|
+
te,
|
|
493
516
|
r
|
|
494
517
|
// Add to dependency array
|
|
495
|
-
]),
|
|
496
|
-
(
|
|
497
|
-
|
|
518
|
+
]), ke = we(
|
|
519
|
+
(o) => {
|
|
520
|
+
o.key === "Enter" && Y();
|
|
498
521
|
},
|
|
499
|
-
[
|
|
500
|
-
),
|
|
522
|
+
[Y]
|
|
523
|
+
), _ = (o) => typeof o == "string" ? /* @__PURE__ */ e(
|
|
501
524
|
"img",
|
|
502
525
|
{
|
|
503
|
-
src:
|
|
526
|
+
src: o,
|
|
504
527
|
alt: "avatar",
|
|
505
528
|
className: "w-8 h-8 rounded-full object-cover"
|
|
506
529
|
}
|
|
507
|
-
) : /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full text-gray-500", children:
|
|
530
|
+
) : /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full text-gray-500", children: o }), J = O || g, ce = {
|
|
508
531
|
"bottom-right": "bottom-5 right-5",
|
|
509
532
|
"bottom-left": "bottom-5 left-5",
|
|
510
533
|
center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
|
511
|
-
},
|
|
534
|
+
}, Ne = t.window.placement === "center", P = {
|
|
512
535
|
rounded: "rounded-xl",
|
|
513
536
|
square: "rounded-md"
|
|
514
537
|
};
|
|
515
|
-
return /* @__PURE__ */
|
|
516
|
-
/* @__PURE__ */ e(
|
|
538
|
+
return /* @__PURE__ */ u("div", { id: k, style: Ce, className: "font-sans", children: [
|
|
539
|
+
/* @__PURE__ */ e(Q, { children: !N && /* @__PURE__ */ e(
|
|
517
540
|
C.button,
|
|
518
541
|
{
|
|
519
|
-
ref:
|
|
520
|
-
onClick: () =>
|
|
542
|
+
ref: le,
|
|
543
|
+
onClick: () => A(!0),
|
|
521
544
|
"aria-label": "Open Chat",
|
|
522
545
|
initial: { scale: 0, opacity: 0 },
|
|
523
546
|
animate: { scale: 1, opacity: 1 },
|
|
@@ -530,34 +553,34 @@ ${y.text}`
|
|
|
530
553
|
width: "var(--chatbot-launcher-size)",
|
|
531
554
|
height: "var(--chatbot-launcher-size)"
|
|
532
555
|
},
|
|
533
|
-
children: /* @__PURE__ */ e(
|
|
556
|
+
children: /* @__PURE__ */ e($e, { icon: Ie })
|
|
534
557
|
}
|
|
535
558
|
) }),
|
|
536
|
-
/* @__PURE__ */
|
|
537
|
-
|
|
559
|
+
/* @__PURE__ */ u(Q, { children: [
|
|
560
|
+
N && Ne && t.window.backdrop && /* @__PURE__ */ e(
|
|
538
561
|
C.div,
|
|
539
562
|
{
|
|
540
563
|
initial: { opacity: 0 },
|
|
541
564
|
animate: { opacity: 1 },
|
|
542
565
|
exit: { opacity: 0 },
|
|
543
566
|
style: {
|
|
544
|
-
backgroundColor:
|
|
545
|
-
backdropFilter: `blur(${
|
|
567
|
+
backgroundColor: t.window.backdropColor,
|
|
568
|
+
backdropFilter: `blur(${t.window.backdropBlur})`,
|
|
546
569
|
// For Safari compatibility
|
|
547
|
-
WebkitBackdropFilter: `blur(${
|
|
570
|
+
WebkitBackdropFilter: `blur(${t.window.backdropBlur})`
|
|
548
571
|
},
|
|
549
572
|
className: "fixed inset-0 z-40",
|
|
550
|
-
onClick: () =>
|
|
573
|
+
onClick: () => A(!1)
|
|
551
574
|
},
|
|
552
575
|
"chatbot-backdrop"
|
|
553
576
|
),
|
|
554
|
-
|
|
577
|
+
N && /* @__PURE__ */ u(
|
|
555
578
|
"div",
|
|
556
579
|
{
|
|
557
|
-
ref:
|
|
580
|
+
ref: ve,
|
|
558
581
|
"aria-modal": "true",
|
|
559
582
|
role: "dialog",
|
|
560
|
-
className: `fixed ${
|
|
583
|
+
className: `fixed ${ce[t.window.placement] || ce["bottom-right"]} z-50 flex flex-col overflow-hidden shadow-2xl border`,
|
|
561
584
|
style: {
|
|
562
585
|
width: "var(--chatbot-window-width)",
|
|
563
586
|
height: "var(--chatbot-window-height)",
|
|
@@ -566,7 +589,7 @@ ${y.text}`
|
|
|
566
589
|
borderColor: "var(--chatbot-window-border-color)"
|
|
567
590
|
},
|
|
568
591
|
children: [
|
|
569
|
-
/* @__PURE__ */
|
|
592
|
+
/* @__PURE__ */ u(
|
|
570
593
|
"header",
|
|
571
594
|
{
|
|
572
595
|
className: "flex items-center justify-between p-3 flex-shrink-0",
|
|
@@ -575,8 +598,8 @@ ${y.text}`
|
|
|
575
598
|
color: "var(--chatbot-header-text-color)"
|
|
576
599
|
},
|
|
577
600
|
children: [
|
|
578
|
-
/* @__PURE__ */
|
|
579
|
-
/* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-full bg-white/30 flex items-center justify-center p-1", children:
|
|
601
|
+
/* @__PURE__ */ u("div", { className: "flex items-center space-x-3", children: [
|
|
602
|
+
/* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-full bg-white/30 flex items-center justify-center p-1", children: _(d) }),
|
|
580
603
|
/* @__PURE__ */ e(
|
|
581
604
|
"span",
|
|
582
605
|
{
|
|
@@ -585,14 +608,14 @@ ${y.text}`
|
|
|
585
608
|
fontWeight: "var(--chatbot-header-font-weight)"
|
|
586
609
|
},
|
|
587
610
|
className: "text-lg",
|
|
588
|
-
children:
|
|
611
|
+
children: c
|
|
589
612
|
}
|
|
590
613
|
)
|
|
591
614
|
] }),
|
|
592
615
|
/* @__PURE__ */ e(
|
|
593
616
|
"button",
|
|
594
617
|
{
|
|
595
|
-
onClick: () =>
|
|
618
|
+
onClick: () => A(!1),
|
|
596
619
|
"aria-label": "Close Chat",
|
|
597
620
|
className: "p-1 rounded-full hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white",
|
|
598
621
|
children: /* @__PURE__ */ e(
|
|
@@ -619,14 +642,14 @@ ${y.text}`
|
|
|
619
642
|
]
|
|
620
643
|
}
|
|
621
644
|
),
|
|
622
|
-
/* @__PURE__ */
|
|
645
|
+
/* @__PURE__ */ u(
|
|
623
646
|
"div",
|
|
624
647
|
{
|
|
625
648
|
role: "log",
|
|
626
649
|
"aria-live": "polite",
|
|
627
650
|
className: "chatbot-message-list flex-1 p-4 overflow-y-auto space-y-4",
|
|
628
651
|
children: [
|
|
629
|
-
/* @__PURE__ */ e(
|
|
652
|
+
/* @__PURE__ */ e(Q, { initial: !1, children: v.map((o, s) => /* @__PURE__ */ u(
|
|
630
653
|
C.div,
|
|
631
654
|
{
|
|
632
655
|
layout: !0,
|
|
@@ -634,56 +657,57 @@ ${y.text}`
|
|
|
634
657
|
animate: { opacity: 1, y: 0 },
|
|
635
658
|
exit: { opacity: 0, y: -10 },
|
|
636
659
|
transition: { duration: 0.3, ease: "easeOut" },
|
|
637
|
-
className: `flex items-end max-w-[85%] gap-2 ${
|
|
660
|
+
className: `flex items-end max-w-[85%] gap-2 ${o.sender === "user" ? "ml-auto flex-row-reverse" : "mr-auto"}`,
|
|
638
661
|
children: [
|
|
639
|
-
|
|
640
|
-
|
|
662
|
+
t.messages.showAvatars && /* @__PURE__ */ e("div", { className: "w-7 h-7 rounded-full flex-shrink-0 overflow-hidden", children: _(
|
|
663
|
+
o.sender === "user" ? b : d
|
|
641
664
|
) }),
|
|
642
665
|
/* @__PURE__ */ e(
|
|
643
666
|
C.div,
|
|
644
667
|
{
|
|
645
668
|
layout: "position",
|
|
646
669
|
transition: { duration: 0.2, ease: "easeOut" },
|
|
647
|
-
className: `px-3 py-2 ${
|
|
670
|
+
className: `px-3 py-2 ${P[t.messages.bubbleShape] || P.rounded} ${t.messages.bubblePointer ? o.sender === "user" ? "rounded-br-none" : "rounded-bl-none" : ""}`,
|
|
648
671
|
style: {
|
|
649
|
-
backgroundColor:
|
|
650
|
-
color:
|
|
672
|
+
backgroundColor: o.sender === "user" ? "var(--chatbot-user-msg-bg)" : "var(--chatbot-bot-msg-bg)",
|
|
673
|
+
color: o.sender === "user" ? "var(--chatbot-user-msg-text-color)" : "var(--chatbot-bot-msg-text-color)",
|
|
651
674
|
fontFamily: "var(--chatbot-msg-font-family)",
|
|
652
675
|
fontSize: "var(--chatbot-msg-font-size)"
|
|
653
676
|
},
|
|
654
|
-
children:
|
|
655
|
-
|
|
677
|
+
children: o.sender === "bot" && s === v.length - 1 ? /* @__PURE__ */ e(
|
|
678
|
+
Pe,
|
|
656
679
|
{
|
|
657
|
-
text:
|
|
658
|
-
animationType:
|
|
680
|
+
text: o.text,
|
|
681
|
+
animationType: t.messages.animation,
|
|
682
|
+
components: ie
|
|
659
683
|
}
|
|
660
684
|
) : /* @__PURE__ */ e(
|
|
661
685
|
"div",
|
|
662
686
|
{
|
|
663
687
|
className: "prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5",
|
|
664
688
|
style: { color: "inherit" },
|
|
665
|
-
children: /* @__PURE__ */ e(T, { children:
|
|
689
|
+
children: /* @__PURE__ */ e(T, { components: ie, children: o.text })
|
|
666
690
|
}
|
|
667
691
|
)
|
|
668
692
|
}
|
|
669
693
|
)
|
|
670
694
|
]
|
|
671
695
|
},
|
|
672
|
-
|
|
696
|
+
o.id
|
|
673
697
|
)) }),
|
|
674
|
-
|
|
698
|
+
J && /* @__PURE__ */ u(
|
|
675
699
|
"div",
|
|
676
700
|
{
|
|
677
701
|
className: "flex items-end max-w-[85%] gap-2 mr-auto",
|
|
678
702
|
children: [
|
|
679
703
|
" ",
|
|
680
|
-
|
|
704
|
+
t.messages.showAvatars && /* @__PURE__ */ e("div", { className: "w-7 h-7 rounded-full flex-shrink-0 overflow-hidden", children: _(d) }),
|
|
681
705
|
/* @__PURE__ */ e(
|
|
682
706
|
"div",
|
|
683
707
|
{
|
|
684
|
-
className: `px-3 py-2 ${
|
|
708
|
+
className: `px-3 py-2 ${P[t.messages.bubbleShape] || P.rounded} rounded-bl-none`,
|
|
685
709
|
style: { backgroundColor: "var(--chatbot-bot-msg-bg)" },
|
|
686
|
-
children: /* @__PURE__ */ e(
|
|
710
|
+
children: /* @__PURE__ */ e(Fe, {})
|
|
687
711
|
}
|
|
688
712
|
)
|
|
689
713
|
]
|
|
@@ -702,17 +726,17 @@ ${y.text}`
|
|
|
702
726
|
borderColor: "var(--chatbot-window-border-color)",
|
|
703
727
|
backgroundColor: "var(--chatbot-input-bg)"
|
|
704
728
|
},
|
|
705
|
-
children: /* @__PURE__ */
|
|
729
|
+
children: /* @__PURE__ */ u("div", { className: "flex items-center space-x-2", children: [
|
|
706
730
|
/* @__PURE__ */ e(
|
|
707
731
|
"input",
|
|
708
732
|
{
|
|
709
733
|
ref: ne,
|
|
710
734
|
type: "text",
|
|
711
|
-
value:
|
|
712
|
-
onChange: (
|
|
713
|
-
onKeyPress:
|
|
714
|
-
placeholder:
|
|
715
|
-
disabled:
|
|
735
|
+
value: F,
|
|
736
|
+
onChange: (o) => se(o.target.value),
|
|
737
|
+
onKeyPress: ke,
|
|
738
|
+
placeholder: $,
|
|
739
|
+
disabled: h || J,
|
|
716
740
|
"aria-label": "Chat input",
|
|
717
741
|
className: "flex-1 w-full px-4 py-2 bg-transparent rounded-full border focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60",
|
|
718
742
|
style: {
|
|
@@ -725,8 +749,8 @@ ${y.text}`
|
|
|
725
749
|
/* @__PURE__ */ e(
|
|
726
750
|
"button",
|
|
727
751
|
{
|
|
728
|
-
onClick:
|
|
729
|
-
disabled: !
|
|
752
|
+
onClick: Y,
|
|
753
|
+
disabled: !F.trim() || h || J,
|
|
730
754
|
"aria-label": "Send Message",
|
|
731
755
|
className: "px-4 h-10 rounded-full flex items-center justify-center flex-shrink-0 font-semibold text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
|
|
732
756
|
style: {
|
|
@@ -734,7 +758,7 @@ ${y.text}`
|
|
|
734
758
|
color: "var(--chatbot-user-msg-text-color)",
|
|
735
759
|
"--tw-ring-color": "var(--chatbot-user-msg-bg)"
|
|
736
760
|
},
|
|
737
|
-
children: /* @__PURE__ */ e(
|
|
761
|
+
children: /* @__PURE__ */ e(Ae, {})
|
|
738
762
|
}
|
|
739
763
|
)
|
|
740
764
|
] })
|
|
@@ -748,5 +772,5 @@ ${y.text}`
|
|
|
748
772
|
] });
|
|
749
773
|
};
|
|
750
774
|
export {
|
|
751
|
-
|
|
775
|
+
Qe as ChatBot
|
|
752
776
|
};
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
${
|
|
1
|
+
(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("framer-motion"),require("@fortawesome/react-fontawesome"),require("@fortawesome/free-solid-svg-icons"),require("@google/generative-ai"),require("openai"),require("@anthropic-ai/sdk"),require("groq-sdk"),require("react-markdown")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","framer-motion","@fortawesome/react-fontawesome","@fortawesome/free-solid-svg-icons","@google/generative-ai","openai","@anthropic-ai/sdk","groq-sdk","react-markdown"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.SuperCustomizableChatbot={},i.jsxRuntime,i.React,i.framerMotion,i.ReactFontAwesome,i.FreeSolidIcons,i.GoogleGenerativeAI,i.OpenAI,i.Anthropic,i.Groq,i.ReactMarkdown))})(this,function(i,e,t,b,be,ge,pe,we,me,ye,N){"use strict";const xe=()=>e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-full h-full",children:[e.jsx("path",{d:"M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z"}),e.jsx("path",{d:"M16.5 14C16.5 14 15 15.5 12 15.5C9 15.5 7.5 14 7.5 14",strokeLinecap:"round"}),e.jsx("circle",{cx:"9",cy:"10",r:"1",fill:"currentColor"}),e.jsx("circle",{cx:"15",cy:"10",r:"1",fill:"currentColor"})]}),ve=()=>e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-full h-full",children:[e.jsx("path",{d:"M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z",strokeLinecap:"round"}),e.jsx("path",{d:"M19.21 17.14C19.21 17.14 19 19 12 19C5 19 4.79 17.14 4.79 17.14C4.79 17.14 6.33 15 12 15C17.67 15 19.21 17.14 19.21 17.14Z",strokeLinecap:"round"})]}),Ce=()=>e.jsxs("svg",{fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:"w-5 h-5",children:[e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.875L6 12z"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 12h9"})]}),ke=()=>e.jsxs("div",{className:"flex items-center space-x-1 p-3",children:[e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.3s]"}),e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.15s]"}),e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-pulse"})]}),Ne=({fullText:h,onComplete:u,components:g})=>{const l=typeof h=="string"?h:"",[I,s]=t.useState("");return t.useEffect(()=>{if(l.length===0){u==null||u();return}let x=0;s("");const f=setInterval(()=>{if(x<l.length){const m=l.charAt(x);s(D=>D+m),x++}else clearInterval(f),u==null||u()},25);return()=>clearInterval(f)},[l,u]),e.jsx("div",{className:"prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5",style:{color:"inherit"},children:e.jsx(N,{components:g,children:I||""})})},Se=({text:h,animationType:u,components:g})=>{const l="prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5";switch(u){case"typing":return e.jsx(Ne,{fullText:h,components:g});case"fade-in":return e.jsx(b.motion.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:1.5,ease:"easeOut"},children:e.jsx("div",{className:l,children:e.jsx(N,{components:g,children:h})})});case"slide-up":return e.jsx(b.motion.div,{initial:{y:50,opacity:0},animate:{y:0,opacity:1},transition:{duration:.7,ease:"anticipate"},children:e.jsx("div",{className:l,children:e.jsx(N,{components:g,children:h})})});case"zoom-in":return e.jsx(b.motion.div,{initial:{scale:.5,opacity:0},animate:{scale:1,opacity:1},transition:{duration:1,ease:"backOut"},children:e.jsx("div",{className:l,children:e.jsx(N,{components:g,children:h})})});case"flip":return e.jsx(b.motion.div,{initial:{rotateX:-90,opacity:0},animate:{rotateX:0,opacity:1},transition:{duration:1,ease:"easeOut"},style:{transformPerspective:400},children:e.jsx("div",{className:l,children:e.jsx(N,{components:g,children:h})})});default:return e.jsx("div",{className:l,children:e.jsx(N,{components:g,children:h})})}},Te=h=>{const u=[];if(!h||h.length===0)return u;let l=h.reduce((s,x)=>{const f=s.length>0?s[s.length-1]:null;if(f&&f.sender===x.sender){const m={...f,text:`${f.text}
|
|
2
|
+
${x.text}`};s[s.length-1]=m}else s.push({...x});return s},[]).map(s=>({role:s.sender==="bot"?"model":"user",parts:[{text:s.text}]}));const I=l.findIndex(s=>s.role==="user");if(I>-1)l=l.slice(I);else return[];return l},Be=({botName:h="ChatBot",botAvatar:u=e.jsx(xe,{}),userAvatar:g=e.jsx(ve,{}),welcomeMessage:l="Hello! How can I help?",placeholderText:I="Type a message...",customInstruction:s="",isOpen:x=!1,disabled:f=!1,isTyping:m=!1,onSend:D=()=>{},theme:v={},geminiApiKey:P,geminiModelName:_="gemini-1.5-flash",openaiApiKey:j,openaiModelName:J="gpt-4o-mini",anthropicApiKey:O,anthropicModelName:Q="claude-3-haiku-20240307",grokApiKey:G,grokModelName:K="llama3-8b-8192",messages:R})=>{const[S]=t.useState(()=>`chatbot-instance-${Math.random().toString(36).substring(2,9)}`),[T,q]=t.useState(x),[Ie,Ee]=t.useState(()=>l?[{id:1,text:l,sender:"bot"}]:[]),[L,ee]=t.useState(""),[M,p]=t.useState(!1),$=typeof R<"u",k=$?R:Ie,w=$?()=>{}:Ee,oe=t.useRef(null),re=t.useRef(null),te=t.useRef(null),$e=t.useRef(null),W=t.useMemo(()=>{if(!P)return null;try{return new pe.GoogleGenerativeAI(P).getGenerativeModel({model:_,systemInstruction:s})}catch(o){return console.error("Failed to initialize Gemini:",o),null}},[P,_,s]),H=t.useMemo(()=>j?new we({apiKey:j,dangerouslyAllowBrowser:!0}):null,[j]),U=t.useMemo(()=>O?new me({apiKey:O,dangerouslyAllowBrowser:!0}):null,[O]),V=t.useMemo(()=>G?new ye({apiKey:G,dangerouslyAllowBrowser:!0}):null,[G]),r=t.useMemo(()=>{var c;const o=((c=v==null?void 0:v.window)==null?void 0:c.placement)==="center",a={launcher:{backgroundColor:"#4f46e5",iconColor:"#ffffff",size:"3.5rem"},header:{backgroundColor:"#4f46e5",textColor:"#ffffff",fontFamily:"inherit",fontWeight:"600"},messages:{userBackgroundColor:"#4f46e5",userTextColor:"#ffffff",botBackgroundColor:"#f3f4f6",botTextColor:"#1f2937",fontFamily:"inherit",fontSize:"0.9rem",showAvatars:!0,bubbleShape:"rounded",bubblePointer:!0,animation:"fade-in",markdownStyles:{}},input:{backgroundColor:"#ffffff",textColor:"#1f2937",placeholderTextColor:"#9ca3af",borderColor:"#e5e7eb",focusRingColor:"#4f46e5"},window:{backgroundColor:"#ffffff",borderColor:"#e5e7eb",borderRadius:"0.75rem",width:o?"80vw":"22rem",height:o?"80vh":"30rem",placement:"bottom-right",backdrop:!1,backdropColor:"rgba(0, 0, 0, 0.4)",backdropBlur:"4px",scrollbarThumbColor:"#a1a1aa",scrollbarTrackColor:"#f1f5f9"}};return{launcher:{...a.launcher,...v.launcher},header:{...a.header,...v.header},messages:{...a.messages,...v.messages},input:{...a.input,...v.input},window:{...a.window,...v.window}}},[v]),Ae=t.useMemo(()=>({"--chatbot-launcher-bg":r.launcher.backgroundColor,"--chatbot-launcher-icon-color":r.launcher.iconColor,"--chatbot-launcher-size":r.launcher.size,"--chatbot-header-bg":r.header.backgroundColor,"--chatbot-header-text-color":r.header.textColor,"--chatbot-header-font-family":r.header.fontFamily,"--chatbot-header-font-weight":r.header.fontWeight,"--chatbot-user-msg-bg":r.messages.userBackgroundColor,"--chatbot-user-msg-text-color":r.messages.userTextColor,"--chatbot-bot-msg-bg":r.messages.botBackgroundColor,"--chatbot-bot-msg-text-color":r.messages.botTextColor,"--chatbot-msg-font-family":r.messages.fontFamily,"--chatbot-msg-font-size":r.messages.fontSize,"--chatbot-input-bg":r.input.backgroundColor,"--chatbot-input-text-color":r.input.textColor,"--chatbot-input-placeholder-color":r.input.placeholderTextColor,"--chatbot-input-border-color":r.input.borderColor,"--chatbot-input-focus-ring":r.input.focusRingColor,"--chatbot-window-bg":r.window.backgroundColor,"--chatbot-window-border-color":r.window.borderColor,"--chatbot-window-border-radius":r.window.borderRadius,"--chatbot-window-width":r.window.width,"--chatbot-window-height":r.window.height}),[r]),se=t.useMemo(()=>{const o=r.messages.markdownStyles||{};return{strong:({node:a,...c})=>e.jsx("strong",{style:{color:o.boldColor||"inherit"},...c}),em:({node:a,...c})=>e.jsx("em",{style:{color:o.italicColor||"inherit"},...c}),a:({node:a,...c})=>e.jsx("a",{style:{color:o.linkColor||"#3b82f6"},...c}),code:({node:a,...c})=>e.jsx("code",{style:{color:o.codeColor||"inherit",backgroundColor:o.codeBackgroundColor||"rgba(0, 0, 0, 0.1)",padding:"0.1rem 0.3rem",borderRadius:"0.25rem"},...c})}},[r.messages.markdownStyles]);t.useEffect(()=>{var A;const o=r.window.scrollbarThumbColor,a=r.window.scrollbarTrackColor,c=`scrollbar-style-${S}`;(A=document.getElementById(c))==null||A.remove();const E=document.createElement("style");return E.id=c,E.innerHTML=`
|
|
3
3
|
/* Modern browsers */
|
|
4
|
-
#${
|
|
4
|
+
#${S} .chatbot-message-list {
|
|
5
5
|
scrollbar-width: thin;
|
|
6
|
-
scrollbar-color: ${o} ${
|
|
6
|
+
scrollbar-color: ${o} ${a};
|
|
7
7
|
}
|
|
8
8
|
/* WebKit-based browsers (Chrome, Safari, Edge) */
|
|
9
|
-
#${
|
|
9
|
+
#${S} .chatbot-message-list::-webkit-scrollbar {
|
|
10
10
|
width: 8px;
|
|
11
11
|
}
|
|
12
|
-
#${
|
|
13
|
-
background: ${
|
|
12
|
+
#${S} .chatbot-message-list::-webkit-scrollbar-track {
|
|
13
|
+
background: ${a};
|
|
14
14
|
border-radius: 4px;
|
|
15
15
|
}
|
|
16
|
-
#${
|
|
16
|
+
#${S} .chatbot-message-list::-webkit-scrollbar-thumb {
|
|
17
17
|
background-color: ${o};
|
|
18
18
|
border-radius: 4px;
|
|
19
|
-
border: 2px solid ${
|
|
19
|
+
border: 2px solid ${a};
|
|
20
20
|
}
|
|
21
|
-
`,document.head.appendChild(E),()=>{var z;(z=document.getElementById(
|
|
21
|
+
`,document.head.appendChild(E),()=>{var z;(z=document.getElementById(c))==null||z.remove()}},[S,r.window.scrollbarThumbColor,r.window.scrollbarTrackColor]),t.useEffect(()=>{p(m)},[m]),t.useEffect(()=>{var o;(o=re.current)==null||o.scrollIntoView({behavior:"smooth"})},[k,M,m]),t.useEffect(()=>{var o,a;T?(o=oe.current)==null||o.focus():(a=te.current)==null||a.focus()},[T]),t.useEffect(()=>{const o=a=>{a.key==="Escape"&&T&&q(!1)};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[T]);const Z=t.useCallback(async()=>{var E,A,z,ne,le,ie,ce,de,he,ue,fe;const o=L.trim();if(!o||f||M||m)return;const a={id:Date.now(),text:o,sender:"user"},c=[...k,a];if($||w(n=>[...n,a]),D(o),ee(""),W){p(!0);try{const n=Te(c),d=n.slice(0,-1),B=((A=(E=n[n.length-1])==null?void 0:E.parts[0])==null?void 0:A.text)||"",qe=await(await(await W.startChat({history:d}).sendMessage(B)).response).text()||"(no response)",Le={id:Date.now()+1,text:qe,sender:"bot"};w(Me=>[...Me,Le])}catch(n){console.error("Gemini API Error:",n);const d={id:Date.now()+1,text:"Sorry, an error occurred. Please try again.",sender:"bot"};w(B=>[...B,d])}finally{p(!1)}}else if(H){p(!0);try{const n=s?[{role:"system",content:s}]:[],d=k.map(y=>({role:y.sender==="bot"?"assistant":"user",content:y.text})),C=((ie=(le=(ne=(z=(await H.chat.completions.create({model:J,messages:[...n,...d,{role:"user",content:o}]})).choices)==null?void 0:z[0])==null?void 0:ne.message)==null?void 0:le.content)==null?void 0:ie.trim())||"(no response)";w(y=>[...y,{id:Date.now()+1,text:C,sender:"bot"}])}catch(n){console.error("OpenAI Error:",n),w(d=>[...d,{id:Date.now()+1,text:"Sorry, something went wrong with OpenAI.",sender:"bot"}])}finally{p(!1)}}else if(U){p(!0);try{const n=k.map(C=>({role:C.sender==="bot"?"assistant":"user",content:C.text})),B=((de=(ce=(await U.messages.create({model:Q,system:s,messages:[...n,{role:"user",content:o}],max_tokens:1024})).content[0])==null?void 0:ce.text)==null?void 0:de.trim())||"(no response)";w(C=>[...C,{id:Date.now()+1,text:B,sender:"bot"}])}catch(n){console.error("Anthropic API Error:",n),w(d=>[...d,{id:Date.now()+1,text:"Sorry, an error occurred with Claude.",sender:"bot"}])}finally{p(!1)}}else if(V){p(!0);try{const n=s?[{role:"system",content:s}]:[],d=k.map(y=>({role:y.sender==="bot"?"assistant":"user",content:y.text})),C=((fe=(ue=(he=(await V.chat.completions.create({messages:[...n,...d,{role:"user",content:o}],model:K})).choices[0])==null?void 0:he.message)==null?void 0:ue.content)==null?void 0:fe.trim())||"(no response)";w(y=>[...y,{id:Date.now()+1,text:C,sender:"bot"}])}catch(n){console.error("Groq API Error:",n),w(d=>[...d,{id:Date.now()+1,text:"Sorry, an error occurred with Groq.",sender:"bot"}])}finally{p(!1)}}else $||(p(!0),setTimeout(()=>{const n={id:Date.now()+1,text:`You said: "${o}"`,sender:"bot"};w(d=>[...d,n]),p(!1)},800))},[L,f,M,m,D,W,H,U,V,$,k,w,J,Q,K,s]),ze=t.useCallback(o=>{o.key==="Enter"&&Z()},[Z]),X=o=>typeof o=="string"?e.jsx("img",{src:o,alt:"avatar",className:"w-8 h-8 rounded-full object-cover"}):e.jsx("div",{className:"w-8 h-8 rounded-full text-gray-500",children:o}),Y=M||m,ae={"bottom-right":"bottom-5 right-5","bottom-left":"bottom-5 left-5",center:"top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"},De=r.window.placement==="center",F={rounded:"rounded-xl",square:"rounded-md"};return e.jsxs("div",{id:S,style:Ae,className:"font-sans",children:[e.jsx(b.AnimatePresence,{children:!T&&e.jsx(b.motion.button,{ref:te,onClick:()=>q(!0),"aria-label":"Open Chat",initial:{scale:0,opacity:0},animate:{scale:1,opacity:1},exit:{scale:0,opacity:0},transition:{duration:.2,ease:"easeOut"},className:"fixed bottom-10 right-10 z-50 rounded-full shadow-lg flex items-center justify-center cursor-pointer border-2 border-white/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[--chatbot-launcher-bg]",style:{backgroundColor:"var(--chatbot-launcher-bg)",color:"var(--chatbot-launcher-icon-color)",width:"var(--chatbot-launcher-size)",height:"var(--chatbot-launcher-size)"},children:e.jsx(be.FontAwesomeIcon,{icon:ge.faCommentDots})})}),e.jsxs(b.AnimatePresence,{children:[T&&De&&r.window.backdrop&&e.jsx(b.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},style:{backgroundColor:r.window.backdropColor,backdropFilter:`blur(${r.window.backdropBlur})`,WebkitBackdropFilter:`blur(${r.window.backdropBlur})`},className:"fixed inset-0 z-40",onClick:()=>q(!1)},"chatbot-backdrop"),T&&e.jsxs("div",{ref:$e,"aria-modal":"true",role:"dialog",className:`fixed ${ae[r.window.placement]||ae["bottom-right"]} z-50 flex flex-col overflow-hidden shadow-2xl border`,style:{width:"var(--chatbot-window-width)",height:"var(--chatbot-window-height)",borderRadius:"var(--chatbot-window-border-radius)",backgroundColor:"var(--chatbot-window-bg)",borderColor:"var(--chatbot-window-border-color)"},children:[e.jsxs("header",{className:"flex items-center justify-between p-3 flex-shrink-0",style:{background:"var(--chatbot-header-bg)",color:"var(--chatbot-header-text-color)"},children:[e.jsxs("div",{className:"flex items-center space-x-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-full bg-white/30 flex items-center justify-center p-1",children:X(u)}),e.jsx("span",{style:{fontFamily:"var(--chatbot-header-font-family)",fontWeight:"var(--chatbot-header-font-weight)"},className:"text-lg",children:h})]}),e.jsx("button",{onClick:()=>q(!1),"aria-label":"Close Chat",className:"p-1 rounded-full hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white",children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor",className:"w-6 h-6",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})})]}),e.jsxs("div",{role:"log","aria-live":"polite",className:"chatbot-message-list flex-1 p-4 overflow-y-auto space-y-4",children:[e.jsx(b.AnimatePresence,{initial:!1,children:k.map((o,a)=>e.jsxs(b.motion.div,{layout:!0,initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.3,ease:"easeOut"},className:`flex items-end max-w-[85%] gap-2 ${o.sender==="user"?"ml-auto flex-row-reverse":"mr-auto"}`,children:[r.messages.showAvatars&&e.jsx("div",{className:"w-7 h-7 rounded-full flex-shrink-0 overflow-hidden",children:X(o.sender==="user"?g:u)}),e.jsx(b.motion.div,{layout:"position",transition:{duration:.2,ease:"easeOut"},className:`px-3 py-2 ${F[r.messages.bubbleShape]||F.rounded} ${r.messages.bubblePointer?o.sender==="user"?"rounded-br-none":"rounded-bl-none":""}`,style:{backgroundColor:o.sender==="user"?"var(--chatbot-user-msg-bg)":"var(--chatbot-bot-msg-bg)",color:o.sender==="user"?"var(--chatbot-user-msg-text-color)":"var(--chatbot-bot-msg-text-color)",fontFamily:"var(--chatbot-msg-font-family)",fontSize:"var(--chatbot-msg-font-size)"},children:o.sender==="bot"&&a===k.length-1?e.jsx(Se,{text:o.text,animationType:r.messages.animation,components:se}):e.jsx("div",{className:"prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5",style:{color:"inherit"},children:e.jsx(N,{components:se,children:o.text})})})]},o.id))}),Y&&e.jsxs("div",{className:"flex items-end max-w-[85%] gap-2 mr-auto",children:[" ",r.messages.showAvatars&&e.jsx("div",{className:"w-7 h-7 rounded-full flex-shrink-0 overflow-hidden",children:X(u)}),e.jsx("div",{className:`px-3 py-2 ${F[r.messages.bubbleShape]||F.rounded} rounded-bl-none`,style:{backgroundColor:"var(--chatbot-bot-msg-bg)"},children:e.jsx(ke,{})})]},"typing-indicator"),e.jsx("div",{ref:re})]}),e.jsx("footer",{className:"p-3 border-t flex-shrink-0",style:{borderColor:"var(--chatbot-window-border-color)",backgroundColor:"var(--chatbot-input-bg)"},children:e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("input",{ref:oe,type:"text",value:L,onChange:o=>ee(o.target.value),onKeyPress:ze,placeholder:I,disabled:f||Y,"aria-label":"Chat input",className:"flex-1 w-full px-4 py-2 bg-transparent rounded-full border focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60",style:{color:"var(--chatbot-input-text-color)",borderColor:"var(--chatbot-input-border-color)","--tw-ring-color":"var(--chatbot-input-focus-ring)"}}),e.jsx("button",{onClick:Z,disabled:!L.trim()||f||Y,"aria-label":"Send Message",className:"px-4 h-10 rounded-full flex items-center justify-center flex-shrink-0 font-semibold text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",style:{backgroundColor:"var(--chatbot-user-msg-bg)",color:"var(--chatbot-user-msg-text-color)","--tw-ring-color":"var(--chatbot-user-msg-bg)"},children:e.jsx(Ce,{})})]})})]},"chatbot-window")]})]})};i.ChatBot=Be,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gauravrathod674/super-customizable-chatbot",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "A highly customizable React chatbot component with support for Gemini, OpenAI, Anthropic, and Groq APIs.",
|
|
7
7
|
"scripts": {
|