open-chat-studio-widget 0.4.5 → 0.4.6
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 +118 -94
- package/dist/cjs/{index-bcb28089.js → index-c9203be6.js} +29 -3
- package/dist/cjs/index-c9203be6.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/open-chat-studio-widget.cjs.entry.js +314 -73
- package/dist/cjs/open-chat-studio-widget.cjs.entry.js.map +1 -1
- package/dist/cjs/open-chat-studio-widget.cjs.js +2 -2
- package/dist/collection/components/ocs-chat/heroicons.js +11 -2
- package/dist/collection/components/ocs-chat/heroicons.js.map +1 -1
- package/dist/collection/components/ocs-chat/ocs-chat.css +1042 -129
- package/dist/collection/components/ocs-chat/ocs-chat.js +367 -78
- package/dist/collection/components/ocs-chat/ocs-chat.js.map +1 -1
- package/dist/components/open-chat-studio-widget.js +323 -78
- package/dist/components/open-chat-studio-widget.js.map +1 -1
- package/dist/esm/{index-205c77bc.js → index-0349ca51.js} +29 -3
- package/dist/esm/index-0349ca51.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/open-chat-studio-widget.entry.js +314 -73
- package/dist/esm/open-chat-studio-widget.entry.js.map +1 -1
- package/dist/esm/open-chat-studio-widget.js +3 -3
- package/dist/open-chat-studio-widget/open-chat-studio-widget.esm.js +1 -1
- package/dist/open-chat-studio-widget/open-chat-studio-widget.esm.js.map +1 -1
- package/dist/open-chat-studio-widget/p-16df1b20.entry.js +4 -0
- package/dist/open-chat-studio-widget/p-16df1b20.entry.js.map +1 -0
- package/dist/open-chat-studio-widget/{p-78d09c6b.js → p-3dc66a9a.js} +3 -3
- package/dist/open-chat-studio-widget/p-3dc66a9a.js.map +1 -0
- package/dist/types/components/ocs-chat/heroicons.d.ts +4 -1
- package/dist/types/components/ocs-chat/ocs-chat.d.ts +51 -9
- package/dist/types/components.d.ts +24 -0
- package/package.json +1 -1
- package/dist/cjs/index-bcb28089.js.map +0 -1
- package/dist/esm/index-205c77bc.js.map +0 -1
- package/dist/open-chat-studio-widget/p-5d6bd56a.entry.js +0 -4
- package/dist/open-chat-studio-widget/p-5d6bd56a.entry.js.map +0 -1
- package/dist/open-chat-studio-widget/p-78d09c6b.js.map +0 -1
|
@@ -13,9 +13,9 @@ const GripDotsVerticalIcon = () => {
|
|
|
13
13
|
h("circle", { cx: "16", cy: "12", r: "1.5" }),
|
|
14
14
|
h("circle", { cx: "16", cy: "18", r: "1.5" })));
|
|
15
15
|
};
|
|
16
|
-
const
|
|
16
|
+
const PlusWithCircleIcon = () => {
|
|
17
17
|
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" },
|
|
18
|
-
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "
|
|
18
|
+
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" })));
|
|
19
19
|
};
|
|
20
20
|
const ArrowsPointingOutIcon = () => {
|
|
21
21
|
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" },
|
|
@@ -25,6 +25,18 @@ const ArrowsPointingInIcon = () => {
|
|
|
25
25
|
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" },
|
|
26
26
|
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M9 9V4.5M9 9H4.5M9 9 3.75 3.75M15 9h4.5M15 9V4.5M15 9l5.25-5.25M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" })));
|
|
27
27
|
};
|
|
28
|
+
const PaperClipIcon = () => {
|
|
29
|
+
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" },
|
|
30
|
+
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" })));
|
|
31
|
+
};
|
|
32
|
+
const CheckDocumentIcon = () => {
|
|
33
|
+
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" },
|
|
34
|
+
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12" })));
|
|
35
|
+
};
|
|
36
|
+
const XIcon = () => {
|
|
37
|
+
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" },
|
|
38
|
+
h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M6 18 18 6M6 6l12 12" })));
|
|
39
|
+
};
|
|
28
40
|
|
|
29
41
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
30
42
|
|
|
@@ -4471,7 +4483,7 @@ const percentToFloat = (percentageString) => {
|
|
|
4471
4483
|
return numericValue / 100;
|
|
4472
4484
|
};
|
|
4473
4485
|
|
|
4474
|
-
const ocsChatCss = "*,::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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.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;}::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-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.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;}*,::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:-0.25em}sup{top:-0.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}#ocs-chat-window{z-index:var(--chat-z-index);font-size:var(--chat-window-font-size)}.starter-question{border-radius:0.5rem;text-align:left;transition-duration:200ms;padding:var(--starter-question-padding, 0.75em);background-color:var(--starter-question-bg-color);border:1px solid var(--starter-question-border-color);color:var(--starter-question-text-color)}.starter-question:hover{background-color:var(--starter-question-bg-hover-color);border-color:var(--starter-question-border-hover-color)}.chat-btn-text,.chat-btn-icon{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:0.5rem;border-width:0px;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 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);transition-property:all;transition-duration:200ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.chat-btn-text:hover,.chat-btn-icon:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.chat-btn-text,.chat-btn-icon{background-color:var(--button-background-color, white);border:1px solid var(--button-border-color);z-index:var(--chat-z-index, 50);font-size:var(--button-font-size);padding:var(--button-padding, 0.75em)}.chat-btn-text:hover,.chat-btn-icon:hover{color:var(--button-text-color-hover, #1d4ed8);border:1px solid var(--button-border-color-hover)}.chat-btn-text{display:flex;align-items:center;gap:8px;color:var(--button-text-color, #111827)}.chat-btn-text span{white-space:nowrap;font-weight:500}.chat-btn-text img{width:var(--button-icon-size);height:var(--button-icon-size);flex-shrink:0;-o-object-fit:contain;object-fit:contain}.chat-btn-icon img{width:var(--button-icon-size);height:var(--button-icon-size);-o-object-fit:contain;object-fit:contain}.chat-btn-text.round,.chat-btn-icon.round{border-radius:9999px}.error-message{padding:var(--error-message-padding, 0.5em);color:var(--error-text-color)}.chat-window-fullscreen{position:fixed;inset:0px;z-index:9999;display:flex;height:100%;max-height:100%;width:100%;flex-direction:column;overflow:hidden;border-radius:0px;border-width:0px;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 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);transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;background-color:var(--chat-window-bg-color);max-width:var(--chat-window-fullscreen-width)}.chat-window-normal{position:fixed;display:flex;height:100vh;min-height:300px;width:100vw;min-width:300px;max-width:1024px;flex-direction:column;overflow:hidden;border-radius:0.5rem}@media (min-width: 640px){.chat-window-normal{height:var(--chat-window-height);width:var(--chat-window-width)}}.chat-window-normal{background-color:var(--chat-window-bg-color);border:1px solid var(--chat-window-border-color)}.chat-window-dragging{cursor:grabbing;--tw-shadow:0 25px 50px -12px rgb(0 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)}.chat-window-normal:not(.chat-window-dragging){--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 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);transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms}.chat-header{display:flex;align-items:center;justify-content:space-between;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;padding:var(--header-padding, 0.5em);background-color:var(--header-bg-color);border-bottom:1px solid var(--header-border-color);font-size:var(--header-font-size)}.header-text{display:flex;align-items:center;justify-content:center;font-size:var(--header-text-font-size);color:var(--header-text-color)}.chat-header:hover,.chat-header:active{background-color:var(--header-bg-hover-color)}.chat-header-draggable{cursor:grab}.chat-header-dragging{cursor:grabbing}.drag-indicator{display:none}@media (min-width: 640px){.drag-indicator{display:flex}}.drag-dots{pointer-events:none;margin-left:2px;display:flex;gap:2px}.header-buttons{display:flex;align-items:center;gap:4px}.header-button{border-radius:0.375rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;padding:0.375em;color:var(--header-button-text-color)}.header-button svg{width:var(--header-button-icon-size);height:var(--header-button-icon-size)}.header-button:hover{background-color:var(--header-button-bg-hover-color)}.fullscreen-button{display:none}@media (min-width: 640px){.fullscreen-button{display:block}}.chat-content{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.loading-container{display:flex;flex-grow:1;align-items:center;justify-content:center}.loading-text{margin-left:2px;color:var(--loading-text-color)}.messages-container{flex-grow:1}.messages-container>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.messages-container{overflow-y:auto}.messages-container::-webkit-scrollbar{width:0.375rem}.messages-container::-webkit-scrollbar-track{border-radius:0.25rem;background-color:var(--scrollbar-track-color)}.messages-container::-webkit-scrollbar-thumb{border-radius:0.25rem;background-color:var(--scrollbar-thumb-color)}.messages-container::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color)}.messages-container{padding:var(--container-padding, 1em)}.message-row{display:flex}.message-row-user{justify-content:flex-end}.message-row-assistant{justify-content:flex-start}.message-bubble{border-radius:0.5rem;padding:var(--message-padding-y, 0.5em) var(--message-padding-x, 1em)}.message-bubble-user{background-color:var(--message-user-bg-color);color:var(--message-user-text-color)}.message-bubble-assistant{background-color:var(--message-assistant-bg-color);color:var(--message-assistant-text-color)}.message-bubble-system{background-color:var(--message-system-bg-color);color:var(--message-system-text-color)}.message-timestamp{margin-top:4px;opacity:0.7;font-size:var(--chat-window-font-size-sm)}.message-attachments{margin-top:8px}.message-attachments>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))}.attachment-link{display:block;text-decoration-line:underline}.attachment-link:hover{text-decoration-line:none}.welcome-messages>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.typing-indicator{height:0.375rem;width:100%;overflow:hidden}.typing-progress{height:100%;width:100%;transform-origin:0% 50%}@keyframes progress{0%{transform:translateX(0) scaleX(0)}10%{transform:translateX(0) scaleX(0.3)}50%{transform:translateX(100%) scaleX(0.3)}90%{transform:translateX(0) scaleX(0.3)}100%{transform:translateX(0) scaleX(0)}}.typing-progress{animation:progress 3s infinite linear;border-radius:0.5rem;background-color:var(--typing-progress-bg-color)}.typing-text{width:100%;justify-content:center;opacity:0.7;font-size:var(--chat-window-font-size-sm)}@keyframes dots{0%,20%{color:rgba(0,0,0,0);text-shadow:.25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0)}40%{color:black;text-shadow:.25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0)}60%{text-shadow:.25em 0 0 black, .5em 0 0 rgba(0,0,0,0)}80%,100%{text-shadow:.25em 0 0 black, .5em 0 0 black}}.typing-dots{animation:dots 1s steps(5, end) infinite}.typing-dots:after{content:' .'}.starter-questions>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.starter-questions{padding:var(--container-padding, 1em)}.starter-question-row{display:flex;justify-content:flex-end}.input-area{padding:var(--container-padding, 1em) var(--container-padding, 1em) 0 var(--container-padding, 1em);background-color:var(--input-bg-color);border-top:1px solid var(--input-border-color)}.input-container{display:flex;gap:8px}.message-textarea{flex-grow:1;resize:none;border-radius:0.375rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.message-textarea:focus{outline-color:#93c5fd}.message-textarea{padding:var(--input-textarea-padding-y, 0.5em) var(--input-textarea-padding-x, 0.75em);color:var(--input-text-color);border:1px solid var(--input-border-color)}.message-textarea:focus{outline-color:var(--input-outline-focus-color)}.send-button{border-radius:0.375rem;font-weight:500;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;padding:var(--send-button-padding-y, 0.5em) var(--send-button-padding-x, 1em)}.send-button-enabled{background-color:var(--send-button-bg-color);color:var(--send-button-text-color)}.send-button-enabled:hover{background-color:var(--send-button-bg-hover-color)}.send-button-disabled{cursor:not-allowed;background-color:var(--send-button-bg-disabled-color);color:var(--send-button-text-disabled-color)}.visible{visibility:visible}.static{position:static}.relative{position:relative}.flex{display:flex}.table{display:table}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.items-center{align-items:center}.justify-center{justify-content:center}.border{border-width:1px}.py-\\[2px\\]{padding-top:2px;padding-bottom:2px}.text-\\[0\\.8em\\]{font-size:0.8em}.font-light{font-weight:300}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--chat-z-index:50;--container-padding:1em;--button-background-color:#ffffff;--button-background-color-hover:#f3f4f6;--button-text-color:#111827;--button-text-color-hover:#1d4ed8;--button-border-color:transparent;--button-border-color-hover:#d1d5db;--button-padding:0.5em;--button-font-size:0.875em;--button-icon-size:1.5em;--chat-window-height:60%;--chat-window-width:25%;--chat-window-fullscreen-width:80%;--chat-window-bg-color:#ffffff;--chat-window-border-color:#d1d5db;--chat-window-shadow-color:rgba(0, 0, 0, 0.1);--chat-window-font-size:0.875em;--chat-window-font-size-sm:0.75em;--header-bg-color:transparent;--header-bg-hover-color:#f9fafb;--header-border-color:#f3f4f6;--header-button-text-color:#6b7280;--header-button-bg-hover-color:#f3f4f6;--header-padding:0.5em;--header-font-size:1em;--header-text-font-size:1em;--header-text-color:#525762;--header-button-icon-size:1.5em;--starter-question-bg-color:transparent;--starter-question-bg-hover-color:#eff6ff;--starter-question-text-color:#3b82f6;--starter-question-border-color:#3b82f6;--starter-question-border-hover-color:#2563eb;--starter-question-padding:0.75em;--message-user-bg-color:#3b82f6;--message-user-text-color:#ffffff;--message-assistant-bg-color:#e5e7eb;--message-assistant-text-color:#1f2937;--message-system-bg-color:#f3f4f6;--message-system-text-color:#4b5563;--message-timestamp-color:rgba(255, 255, 255, 0.7);--message-timestamp-assistant-color:rgba(75, 85, 99, 0.7);--message-padding-x:1em;--message-padding-y:0.5em;--input-bg-color:transparent;--input-border-color:#d1d5db;--input-text-color:#111827;--input-placeholder-color:#6b7280;--input-outline-focus-color:#3b82f6;--input-textarea-padding-x:0.75em;--input-textarea-padding-y:0.5em;--send-button-bg-color:#3b82f6;--send-button-bg-hover-color:#2563eb;--send-button-text-color:#ffffff;--send-button-bg-disabled-color:#d1d5db;--send-button-text-disabled-color:#6b7280;--send-button-padding-x:1em;--send-button-padding-y:0.5em;--loading-text-color:#6b7280;--loading-spinner-track-color:#e5e7eb;--loading-spinner-fill-color:#3b82f6;--loading-spinner-size:1.25em;--typing-progress-bg-color:#ade3ff;--scrollbar-track-color:#f3f4f6;--scrollbar-thumb-color:#d1d5db;--scrollbar-thumb-hover-color:#9ca3af;--error-text-color:#ef4444;--error-message-padding:0.5em;--code-bg-user-color:color-mix(in srgb, var(--message-user-bg-color) 80%, white 20%);--code-text-user-color:var(--message-user-text-color);--code-border-user-color:color-mix(in srgb, var(--message-user-bg-color) 90%, black 10%);--code-bg-assistant-color:color-mix(in srgb, var(--message-assistant-bg-color) 50%, white 50%);--code-text-assistant-color:var(--message-assistant-text-color);--code-border-assistant-color:color-mix(in srgb, var(--message-assistant-bg-color) 90%, black 10%);display:block;position:fixed;right:20px;bottom:20px}textarea{max-height:8rem;min-height:2.5rem;resize:none;overflow-y:auto}textarea::-webkit-scrollbar{width:0.375rem}textarea::-webkit-scrollbar-track{border-radius:0.25rem;background-color:var(--scrollbar-track-color)}textarea::-webkit-scrollbar-thumb{border-radius:0.25rem;background-color:var(--scrollbar-thumb-color)}textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color)}.loading-spinner{width:var(--loading-spinner-size);height:var(--loading-spinner-size)}@keyframes spin{to{transform:rotate(360deg)}}.loading-spinner{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;border-color:var(--loading-spinner-track-color);border-top-color:var(--loading-spinner-fill-color)}.overflow-y-auto::-webkit-scrollbar{width:0.375rem}.overflow-y-auto::-webkit-scrollbar-track{border-radius:0.25rem;background-color:var(--scrollbar-track-color)}.overflow-y-auto::-webkit-scrollbar-thumb{border-radius:0.25rem;background-color:var(--scrollbar-thumb-color)}.overflow-y-auto::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color)}.chat-markdown{color:var(--tw-prose-body);max-width:65ch}.chat-markdown :where(p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.25em;margin-bottom:1.25em}.chat-markdown :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}.chat-markdown :where(a):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.chat-markdown :where(strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:var(--tw-prose-bold);font-weight:600}.chat-markdown :where(a strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:inherit}.chat-markdown :where(blockquote strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:inherit}.chat-markdown :where(thead th strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:inherit}.chat-markdown :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}.chat-markdown :where(ol[type=\"A\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){list-style-type:upper-alpha}.chat-markdown :where(ol[type=\"a\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){list-style-type:lower-alpha}.chat-markdown :where(ol[type=\"A\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){list-style-type:upper-alpha}.chat-markdown :where(ol[type=\"a\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){list-style-type:lower-alpha}.chat-markdown :where(ol[type=\"I\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){list-style-type:upper-roman}.chat-markdown :where(ol[type=\"i\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){list-style-type:lower-roman}.chat-markdown :where(ol[type=\"I\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){list-style-type:upper-roman}.chat-markdown :where(ol[type=\"i\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){list-style-type:lower-roman}.chat-markdown :where(ol[type=\"1\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){list-style-type:decimal}.chat-markdown :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}.chat-markdown :where(ol>li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.chat-markdown :where(ul>li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::marker{color:var(--tw-prose-bullets)}.chat-markdown :where(dt):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.chat-markdown :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}.chat-markdown :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:0.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:\"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.chat-markdown :where(blockquote p:first-of-type):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before{content:open-quote}.chat-markdown :where(blockquote p:last-of-type):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after{content:close-quote}.chat-markdown :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:0.8888889em;line-height:1.1111111}.chat-markdown :where(h1 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-weight:900;color:inherit}.chat-markdown :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}.chat-markdown :where(h2 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-weight:800;color:inherit}.chat-markdown :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:0.6em;line-height:1.6}.chat-markdown :where(h3 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-weight:700;color:inherit}.chat-markdown :where(h4):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:0.5em;line-height:1.5}.chat-markdown :where(h4 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-weight:700;color:inherit}.chat-markdown :where(img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:2em;margin-bottom:2em}.chat-markdown :where(picture):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){display:block;margin-top:2em;margin-bottom:2em}.chat-markdown :where(video):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:2em;margin-bottom:2em}.chat-markdown :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 0 rgb(var(--tw-prose-kbd-shadows) / 10%);font-size:0.875em;border-radius:0.3125rem;padding-top:0.1875em;padding-inline-end:0.375em;padding-bottom:0.1875em;padding-inline-start:0.375em}.chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:var(--tw-prose-code);font-weight:600;font-size:0.875em}.chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before{content:\"`\"}.chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after{content:\"`\"}.chat-markdown :where(a code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:inherit}.chat-markdown :where(h1 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:inherit}.chat-markdown :where(h2 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:inherit;font-size:0.875em}.chat-markdown :where(h3 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:inherit;font-size:0.9em}.chat-markdown :where(h4 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:inherit}.chat-markdown :where(blockquote code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:inherit}.chat-markdown :where(thead th code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:inherit}.chat-markdown :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:0.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:0.375rem;padding-top:0.8571429em;padding-inline-end:1.1428571em;padding-bottom:0.8571429em;padding-inline-start:1.1428571em}.chat-markdown :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}.chat-markdown :where(pre code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before{content:none}.chat-markdown :where(pre code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after{content:none}.chat-markdown :where(table):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:0.875em;line-height:1.7142857}.chat-markdown :where(thead):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.chat-markdown :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:0.5714286em;padding-bottom:0.5714286em;padding-inline-start:0.5714286em}.chat-markdown :where(tbody tr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.chat-markdown :where(tbody tr:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){border-bottom-width:0}.chat-markdown :where(tbody td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){vertical-align:baseline}.chat-markdown :where(tfoot):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.chat-markdown :where(tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){vertical-align:top}.chat-markdown :where(th,td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){text-align:start}.chat-markdown :where(figure>*):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0;margin-bottom:0}.chat-markdown :where(figcaption):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){color:var(--tw-prose-captions);font-size:0.875em;line-height:1.4285714;margin-top:0.8571429em}.chat-markdown{--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}.chat-markdown :where(picture>img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0;margin-bottom:0}.chat-markdown :where(li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0.5em;margin-bottom:0.5em}.chat-markdown :where(ol>li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-start:0.375em}.chat-markdown :where(ul>li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-start:0.375em}.chat-markdown :where(.prose>ul>li p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0.75em;margin-bottom:0.75em}.chat-markdown :where(.prose>ul>li>p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.25em}.chat-markdown :where(.prose>ul>li>p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-bottom:1.25em}.chat-markdown :where(.prose>ol>li>p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.25em}.chat-markdown :where(.prose>ol>li>p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-bottom:1.25em}.chat-markdown :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0.75em;margin-bottom:0.75em}.chat-markdown :where(dl):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.25em;margin-bottom:1.25em}.chat-markdown :where(dd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0.5em;padding-inline-start:1.625em}.chat-markdown :where(hr+*):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0}.chat-markdown :where(h2+*):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0}.chat-markdown :where(h3+*):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0}.chat-markdown :where(h4+*):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0}.chat-markdown :where(thead th:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-start:0}.chat-markdown :where(thead th:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-end:0}.chat-markdown :where(tbody td,tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-top:0.5714286em;padding-inline-end:0.5714286em;padding-bottom:0.5714286em;padding-inline-start:0.5714286em}.chat-markdown :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-start:0}.chat-markdown :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-end:0}.chat-markdown :where(figure):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:2em;margin-bottom:2em}.chat-markdown :where(.prose>:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0}.chat-markdown :where(.prose>:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-bottom:0}.chat-markdown{font-size:0.875rem;line-height:1.7142857}.chat-markdown :where(p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.chat-markdown :where([class~=\"lead\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-size:1.2857143em;line-height:1.5555556;margin-top:0.8888889em;margin-bottom:0.8888889em}.chat-markdown :where(blockquote):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.3333333em;margin-bottom:1.3333333em;padding-inline-start:1.1111111em}.chat-markdown :where(h1):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-size:2.1428571em;margin-top:0;margin-bottom:0.8em;line-height:1.2}.chat-markdown :where(h2):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-size:1.4285714em;margin-top:1.6em;margin-bottom:0.8em;line-height:1.4}.chat-markdown :where(h3):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-size:1.2857143em;margin-top:1.5555556em;margin-bottom:0.4444444em;line-height:1.5555556}.chat-markdown :where(h4):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.4285714em;margin-bottom:0.5714286em;line-height:1.4285714}.chat-markdown :where(img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.chat-markdown :where(picture):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.chat-markdown :where(picture>img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0;margin-bottom:0}.chat-markdown :where(video):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.chat-markdown :where(kbd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-size:0.8571429em;border-radius:0.3125rem;padding-top:0.1428571em;padding-inline-end:0.3571429em;padding-bottom:0.1428571em;padding-inline-start:0.3571429em}.chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-size:0.8571429em}.chat-markdown :where(h2 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-size:0.9em}.chat-markdown :where(h3 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-size:0.8888889em}.chat-markdown :where(pre):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-size:0.8571429em;line-height:1.6666667;margin-top:1.6666667em;margin-bottom:1.6666667em;border-radius:0.25rem;padding-top:0.6666667em;padding-inline-end:1em;padding-bottom:0.6666667em;padding-inline-start:1em}.chat-markdown :where(ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.chat-markdown :where(ul):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.chat-markdown :where(li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0.2857143em;margin-bottom:0.2857143em}.chat-markdown :where(ol>li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-start:0.4285714em}.chat-markdown :where(ul>li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-start:0.4285714em}.chat-markdown :where(.prose-sm>ul>li p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0.5714286em;margin-bottom:0.5714286em}.chat-markdown :where(.prose-sm>ul>li>p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.1428571em}.chat-markdown :where(.prose-sm>ul>li>p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-bottom:1.1428571em}.chat-markdown :where(.prose-sm>ol>li>p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.1428571em}.chat-markdown :where(.prose-sm>ol>li>p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-bottom:1.1428571em}.chat-markdown :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0.5714286em;margin-bottom:0.5714286em}.chat-markdown :where(dl):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.chat-markdown :where(dt):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.1428571em}.chat-markdown :where(dd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0.2857143em;padding-inline-start:1.5714286em}.chat-markdown :where(hr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:2.8571429em;margin-bottom:2.8571429em}.chat-markdown :where(hr+*):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0}.chat-markdown :where(h2+*):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0}.chat-markdown :where(h3+*):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0}.chat-markdown :where(h4+*):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0}.chat-markdown :where(table):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-size:0.8571429em;line-height:1.5}.chat-markdown :where(thead th):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-end:1em;padding-bottom:0.6666667em;padding-inline-start:1em}.chat-markdown :where(thead th:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-start:0}.chat-markdown :where(thead th:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-end:0}.chat-markdown :where(tbody td,tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-top:0.6666667em;padding-inline-end:1em;padding-bottom:0.6666667em;padding-inline-start:1em}.chat-markdown :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-start:0}.chat-markdown :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){padding-inline-end:0}.chat-markdown :where(figure):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.chat-markdown :where(figure>*):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0;margin-bottom:0}.chat-markdown :where(figcaption):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){font-size:0.8571429em;line-height:1.3333333;margin-top:0.6666667em}.chat-markdown :where(.prose-sm>:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-top:0}.chat-markdown :where(.prose-sm>:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)){margin-bottom:0}.chat-markdown{--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;max-width:none;font-size:1em;--tw-prose-body:var(--message-assistant-text-color);--tw-prose-headings:var(--message-assistant-text-color);--tw-prose-lead:var(--message-assistant-text-color);--tw-prose-links:var(--message-assistant-text-color);--tw-prose-bold:var(--message-assistant-text-color);--tw-prose-counters:var(--message-assistant-text-color);--tw-prose-bullets:var(--message-assistant-text-color);--tw-prose-hr:var(--message-assistant-text-color);--tw-prose-quotes:var(--message-assistant-text-color);--tw-prose-quote-borders:var(--message-assistant-text-color);--tw-prose-captions:var(--message-assistant-text-color);--tw-prose-kbd:var(--message-assistant-text-color);--tw-prose-kbd-shadows:var(--message-assistant-text-color);--tw-prose-code:var(--code-text-assistant-color);--tw-prose-pre-code:var(--code-text-assistant-color);--tw-prose-pre-bg:var(--code-bg-assistant-color);--tw-prose-th-borders:var(--message-assistant-text-color);--tw-prose-td-borders:var(--message-assistant-text-color);--tw-prose-invert-body:var(--message-user-text-color);--tw-prose-invert-headings:var(--message-user-text-color);--tw-prose-invert-lead:var(--message-user-text-color);--tw-prose-invert-links:var(--message-user-text-color);--tw-prose-invert-bold:var(--message-user-text-color);--tw-prose-invert-counters:var(--message-user-text-color);--tw-prose-invert-bullets:var(--message-user-text-color);--tw-prose-invert-hr:var(--message-user-text-color);--tw-prose-invert-quotes:var(--message-user-text-color);--tw-prose-invert-quote-borders:var(--message-user-text-color);--tw-prose-invert-captions:var(--message-user-text-color);--tw-prose-invert-kbd:var(--message-user-text-color);--tw-prose-invert-kbd-shadows:var(--message-user-text-color);--tw-prose-invert-code:var(--code-text-user-color);--tw-prose-invert-pre-code:var(--code-text-user-color);--tw-prose-invert-pre-bg:var(--code-bg-user-color);--tw-prose-invert-th-borders:var(--message-user-text-color);--tw-prose-invert-td-borders:var(--message-user-text-color)}.chat-markdown>*{margin-top:0.1em;margin-bottom:0.1em}.message-bubble-user .chat-markdown{--tw-prose-body:var(--tw-prose-invert-body);--tw-prose-headings:var(--tw-prose-invert-headings);--tw-prose-lead:var(--tw-prose-invert-lead);--tw-prose-links:var(--tw-prose-invert-links);--tw-prose-bold:var(--tw-prose-invert-bold);--tw-prose-counters:var(--tw-prose-invert-counters);--tw-prose-bullets:var(--tw-prose-invert-bullets);--tw-prose-hr:var(--tw-prose-invert-hr);--tw-prose-quotes:var(--tw-prose-invert-quotes);--tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);--tw-prose-captions:var(--tw-prose-invert-captions);--tw-prose-kbd:var(--tw-prose-invert-kbd);--tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);--tw-prose-code:var(--tw-prose-invert-code);--tw-prose-pre-code:var(--tw-prose-invert-pre-code);--tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);--tw-prose-th-borders:var(--tw-prose-invert-th-borders);--tw-prose-td-borders:var(--tw-prose-invert-td-borders)}.message-bubble-user .chat-markdown pre{border:1px solid var(--code-border-user-color)}.message-bubble-assistant .chat-markdown pre{border:1px solid var(--code-border-assistant-color)}.loading:after{content:' .'}";
|
|
4486
|
+
const ocsChatCss = "*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}/*\n! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n display: none;\n}\n#ocs-chat-window {\n z-index: var(--chat-z-index);\n font-size: var(--chat-window-font-size);\n }\n.starter-question {\n border-radius: 0.5rem;\n text-align: left;\n transition-duration: 200ms;\n padding: 0.75em;\n background-color: var(--starter-question-bg-color);\n border: 1px solid var(--starter-question-border-color);\n color: var(--starter-question-text-color);\n}\n.starter-question:hover {\n background-color: var(--starter-question-bg-hover-color);\n border-color: var(--starter-question-border-hover-color);\n }\n.chat-btn-text,\n .chat-btn-icon {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n border-radius: 0.5rem;\n border-width: 0px;\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n transition-property: all;\n transition-duration: 200ms;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.chat-btn-text:hover,\n .chat-btn-icon:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.chat-btn-text,\n .chat-btn-icon {\n background-color: var(--button-background-color, white);\n border: 1px solid var(--button-border-color);\n z-index: var(--chat-z-index, 50);\n font-size: var(--button-font-size);\n padding: 0.5em;\n }\n.chat-btn-text:hover, .chat-btn-icon:hover {\n color: var(--button-text-color-hover, #1d4ed8);\n border: 1px solid var(--button-border-color-hover);\n }\n/* Button with text and icon */\n.chat-btn-text {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--button-text-color, #111827);\n}\n.chat-btn-text span {\n white-space: nowrap;\n font-weight: 500;\n}\n.chat-btn-text img {\n flex-shrink: 0;\n -o-object-fit: contain;\n object-fit: contain;\n width: var(--button-icon-size);\n height: var(--button-icon-size);\n}\n/* Icon-only button */\n.chat-btn-icon {\n }\n.chat-btn-icon img {\n -o-object-fit: contain;\n object-fit: contain;\n width: var(--button-icon-size);\n height: var(--button-icon-size);\n}\n.chat-btn-text.round,\n .chat-btn-icon.round {\n border-radius: 9999px;\n}\n/* Error message styling */\n.error-message {\n padding: 0.5em;\n color: var(--error-text-color);\n }\n/* Chat window positioning classes */\n.chat-window-fullscreen {\n position: fixed;\n inset: 0px;\n z-index: 9999;\n display: flex;\n height: 100%;\n max-height: 100%;\n width: 100%;\n flex-direction: column;\n overflow: hidden;\n border-radius: 0px;\n border-width: 0px;\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 200ms;\n background-color: var(--chat-window-bg-color);\n max-width: var(--chat-window-fullscreen-width);\n}\n.chat-window-normal {\n position: fixed;\n display: flex;\n height: 100vh;\n min-height: 300px;\n width: 100vw;\n min-width: 300px;\n max-width: 1024px;\n flex-direction: column;\n overflow: hidden;\n border-radius: 0.5rem;\n}\n@media (min-width: 640px) {\n\n .chat-window-normal {\n height: var(--chat-window-height);\n width: var(--chat-window-width);\n }\n}\n.chat-window-normal {\n background-color: var(--chat-window-bg-color);\n border: 1px solid var(--chat-window-border-color);\n }\n.chat-window-dragging {\n cursor: grabbing;\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.chat-window-normal:not(.chat-window-dragging) {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 200ms;\n}\n/* Header/drag bar classes */\n.chat-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n padding: 0.5em;\n background-color: var(--header-bg-color);\n border-bottom: 1px solid var(--header-border-color);\n font-size: var(--header-font-size);\n}\n.header-text {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--header-text-font-size);\n color: var(--header-text-color);\n}\n.chat-header:hover,\n .chat-header:active {\n background-color: var(--header-bg-hover-color);\n }\n.chat-header-draggable {\n cursor: grab;\n}\n.chat-header-dragging {\n cursor: grabbing;\n}\n.drag-indicator {\n display: none;\n}\n@media (min-width: 640px) {\n\n .drag-indicator {\n display: flex;\n }\n}\n.drag-dots {\n pointer-events: none;\n margin-left: 2px;\n display: flex;\n gap: 2px;\n}\n.header-buttons {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n/* Header button classes */\n.header-button {\n border-radius: 0.375rem;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 200ms;\n padding: 0.375em;\n color: var(--header-button-text-color);\n}\n.header-button svg {\n width: var(--header-button-icon-size);\n height: var(--header-button-icon-size);\n }\n.header-button:hover {\n background-color: var(--header-button-bg-hover-color);\n }\n.fullscreen-button {\n display: none;\n}\n@media (min-width: 640px) {\n\n .fullscreen-button {\n display: block;\n }\n}\n/* Chat content area */\n.chat-content {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n overflow: hidden;\n}\n/* Loading state */\n.loading-container {\n display: flex;\n flex-grow: 1;\n align-items: center;\n justify-content: center;\n}\n.loading-text {\n margin-left: 2px;\n color: var(--loading-text-color);\n }\n/* Messages container */\n.messages-container {\n flex-grow: 1;\n}\n.messages-container > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.messages-container {\n overflow-y: auto;\n}\n.messages-container::-webkit-scrollbar {\n width: 0.375rem;\n}\n.messages-container::-webkit-scrollbar-track {\n border-radius: 0.25rem;\n background-color: var(--scrollbar-track-color);\n}\n.messages-container::-webkit-scrollbar-thumb {\n border-radius: 0.25rem;\n background-color: var(--scrollbar-thumb-color);\n}\n.messages-container::-webkit-scrollbar-thumb:hover {\n background-color: var(--scrollbar-thumb-hover-color);\n}\n.messages-container {\n padding: 1em;\n }\n/* Message bubbles */\n.message-row {\n display: flex;\n}\n.message-row-user {\n justify-content: flex-end;\n}\n.message-row-assistant {\n justify-content: flex-start;\n}\n.message-bubble {\n border-radius: 0.5rem;\n padding: 0.5em 1em;\n}\n.message-bubble-user {\n background-color: var(--message-user-bg-color);\n color: var(--message-user-text-color);\n }\n.message-bubble-assistant {\n background-color: var(--message-assistant-bg-color);\n color: var(--message-assistant-text-color);\n }\n.message-bubble-system {\n background-color: var(--message-system-bg-color);\n color: var(--message-system-text-color);\n }\n.message-timestamp {\n margin-top: 4px;\n opacity: 0.7;\n font-size: var(--chat-window-font-size-sm);\n}\n.message-attachments {\n margin-top: 8px;\n}\n.message-attachments > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n}\n/* Welcome messages */\n.welcome-messages > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n/* Typing indicator */\n.typing-indicator {\n height: 0.375rem;\n width: 100%;\n overflow: hidden;\n}\n.typing-progress {\n height: 100%;\n width: 100%;\n transform-origin: 0% 50%;\n}\n@keyframes progress {\n\n 0% {\n transform: translateX(0) scaleX(0);\n }\n\n 10% {\n transform: translateX(0) scaleX(0.3);\n }\n\n 50% {\n transform: translateX(100%) scaleX(0.3);\n }\n\n 90% {\n transform: translateX(0) scaleX(0.3);\n }\n\n 100% {\n transform: translateX(0) scaleX(0);\n }\n}\n.typing-progress {\n animation: progress 3s infinite linear;\n border-radius: 0.5rem;\n background-color: var(--typing-progress-bg-color);\n}\n.typing-text {\n width: 100%;\n justify-content: center;\n opacity: 0.7;\n font-size: var(--chat-window-font-size-sm);\n}\n@keyframes dots {\n\n 0%, 20% {\n color: rgba(0,0,0,0);\n text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);\n }\n\n 40% {\n color: black;\n text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);\n }\n\n 60% {\n text-shadow: .25em 0 0 black, .5em 0 0 rgba(0,0,0,0);\n }\n\n 80%, 100% {\n text-shadow: .25em 0 0 black, .5em 0 0 black;\n }\n}\n.typing-dots {\n animation: dots 1s steps(5, end) infinite;\n}\n.typing-dots:after {\n content: ' .';\n}\n/* Starter questions */\n.starter-questions > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.starter-questions {\n padding: 1em;\n }\n.starter-question-row {\n display: flex;\n justify-content: flex-end;\n}\n/* Input area */\n.input-area {\n padding: 1em 1em 0 1em;\n background-color: var(--input-bg-color);\n border-top: 1px solid var(--input-border-color);\n }\n.input-container {\n display: flex;\n gap: 8px;\n}\n.message-textarea {\n flex-grow: 1;\n resize: none;\n border-radius: 0.375rem;\n border-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n.message-textarea:focus {\n outline-color: #93c5fd;\n}\n.message-textarea {\n background-color: var(--input-bg-color);\n padding: 0.5em 0.75em;\n color: var(--input-text-color);\n border: 1px solid var(--input-border-color);\n }\n.message-textarea:focus {\n outline-color: var(--input-outline-focus-color);\n }\n.send-button {\n border-radius: 0.375rem;\n font-weight: 500;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 200ms;\n padding: 0.5em 1em;\n}\n.send-button-enabled {\n background-color: var(--send-button-bg-color);\n color: var(--send-button-text-color);\n }\n.send-button-enabled:hover {\n background-color: var(--send-button-bg-hover-color);\n }\n.send-button-disabled {\n cursor: not-allowed;\n background-color: var(--send-button-bg-disabled-color);\n color: var(--send-button-text-disabled-color);\n}\n/* Confirmation dialog */\n.confirmation-overlay {\n position: fixed;\n inset: 0px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--confirmation-overlay-bg-color);\n z-index: 9999;\n}\n.confirmation-dialog {\n margin-left: 1rem;\n margin-right: 1rem;\n width: 100%;\n max-width: 24rem;\n background-color: var(--confirmation-dialog-bg-color);\n border: 1px solid var(--confirmation-dialog-border-color);\n border-radius: 0.75em;\n box-shadow: 0 0.625em 1.5625em var(--confirmation-dialog-shadow-color);\n}\n.confirmation-content {\n padding: 1.5em;\n }\n.confirmation-title {\n margin-bottom: 0.5rem;\n font-weight: 600;\n color: var(--confirmation-title-color);\n font-size: var(--confirmation-title-font-size);\n}\n.confirmation-message {\n margin-bottom: 1rem;\n color: var(--confirmation-message-color);\n font-size: var(--confirmation-message-font-size);\n}\n.confirmation-buttons {\n display: flex;\n justify-content: flex-end;\n gap: 0.75em;\n}\n.confirmation-button {\n border-radius: 0.375rem;\n font-weight: 500;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 200ms;\n padding: 0.5em 1em;\n}\n.confirmation-button-cancel {\n background-color: var(--confirmation-button-cancel-bg-color);\n color: var(--confirmation-button-cancel-text-color);\n }\n.confirmation-button-cancel:hover {\n background-color: var(--confirmation-button-cancel-bg-hover-color);\n }\n.confirmation-button-confirm {\n background-color: var(--confirmation-button-confirm-bg-color);\n color: var(--confirmation-button-confirm-text-color);\n }\n.confirmation-button-confirm:hover {\n background-color: var(--confirmation-button-confirm-bg-hover-color);\n }\n.\\!visible {\n visibility: visible !important;\n}\n.visible {\n visibility: visible;\n}\n.static {\n position: static;\n}\n.relative {\n position: relative;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.hidden {\n display: none;\n}\n.w-full {\n width: 100%;\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.resize {\n resize: both;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-\\[0\\.5em\\] {\n gap: 0.5em;\n}\n.space-y-\\[0\\.25em\\] > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25em * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25em * var(--tw-space-y-reverse));\n}\n.border {\n border-width: 1px;\n}\n.py-\\[2px\\] {\n padding-top: 2px;\n padding-bottom: 2px;\n}\n.text-\\[0\\.8em\\] {\n font-size: 0.8em;\n}\n.font-light {\n font-weight: 300;\n}\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.filter {\n 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);\n}\n:host {\n /**\n * @prop --chat-z-index: Z-index for chat widget (50)\n *\n * @prop --button-background-color: Button background color (#ffffff)\n * @prop --button-background-color-hover: Button background color on hover (#f3f4f6)\n * @prop --button-text-color: Button text color (#111827)\n * @prop --button-text-color-hover: Button text color on hover (#1d4ed8)\n * @prop --button-border-color: Button border color (#6b7280)\n * @prop --button-border-color-hover: Button border color on hover (#374151)\n * @prop --button-font-size: Button text font size (0.875em)\n * @prop --button-icon-size: Button icon size (1.5em)\n *\n * @prop --chat-window-height: Chat window height in pixels or percent (60%)\n * @prop --chat-window-width: Chat window width in pixels or percent (25%)\n * @prop --chat-window-fullscreen-width: Chat window fullscreen width in pixels or percent (80%)\n * @prop --chat-window-bg-color: Chat window background color (#ffffff)\n * @prop --chat-window-border-color: Chat window border color (#d1d5db)\n * @prop --chat-window-shadow-color: Chat window shadow color (rgba(0, 0, 0, 0.1))\n * @prop --chat-window-font-size: Default font size for text in the chat window (0.875em)\n * @prop --chat-window-font-size-sm: Font size for small text in the chat window (0.75em)\n *\n * @prop --header-bg-color: Header background color (transparent)\n * @prop --header-bg-hover-color: Header background color on hover (#f9fafb)\n * @prop --header-border-color: Header border color (#f3f4f6)\n * @prop --header-button-text-color: Header button text color (#6b7280)\n * @prop --header-button-bg-hover-color: Header button background on hover (#f3f4f6)\n * @prop --header-font-size: Header font size (1em)\n * @prop --header-button-icon-size: Icon size for buttons in the header (1.5em)\n * @prop --header-text-font-size: Font size for the text in the header (1em)\n * @prop --header-text-color: Color for the text in the header (#525762)\n *\n * @prop --starter-question-bg-color: Starter question background color (transparent)\n * @prop --starter-question-bg-hover-color: Starter question background on hover (#eff6ff)\n * @prop --starter-question-text-color: Starter question text color (#3b82f6)\n * @prop --starter-question-border-color: Starter question border color (#3b82f6)\n * @prop --starter-question-border-hover-color: Starter question border on hover (#2563eb)\n *\n * @prop --message-user-bg-color: User message background color (#e4edfb)\n * @prop --message-user-text-color: User message text color (#1f2937)\n * @prop --message-user-link-color: User message link color (#155dfc)\n\n * @prop --message-assistant-bg-color: Assistant message background color (#eae7e8)\n * @prop --message-assistant-text-color: Assistant message text color (--message-user-text-color)\n * @prop --message-assistant-link-color: Assistant message link color (--message-user-link-color)\n\n * @prop --message-system-bg-color: System message background color (#fbe4f8)\n * @prop --message-system-text-color: System message text color (--message-user-text-color)\n * @prop --message-system-link-color: System message link color (--message-user-link-color)\n\n * @prop --message-timestamp-color: User message timestamp color (rgba(255, 255, 255, 0.7))\n * @prop --message-timestamp-assistant-color: Assistant message timestamp color (rgba(75, 85, 99, 0.7))\n *\n * @prop --input-bg-color: Input area background color (transparent)\n * @prop --input-border-color: Input field border color (#d1d5db)\n * @prop --input-text-color: Input text color (#111827)\n * @prop --input-placeholder-color: Input placeholder text color (#6b7280)\n * @prop --input-outline-focus-color: Input field focus ring color (#3b82f6)\n *\n * @prop --send-button-bg-color: Send button background color (#3b82f6)\n * @prop --send-button-bg-hover-color: Send button background on hover (#2563eb)\n * @prop --send-button-text-color: Send button text color (#ffffff)\n * @prop --send-button-bg-disabled-color: Send button background when disabled (#d1d5db)\n * @prop --send-button-text-disabled-color: Send button text when disabled (#6b7280)\n *\n * @prop --loading-text-color: Loading text color (#6b7280)\n * @prop --loading-spinner-track-color: Loading spinner track color (#e5e7eb)\n * @prop --loading-spinner-fill-color: Loading spinner fill color (#3b82f6)\n * @prop --loading-spinner-size: Loading spinner size (1.25em)\n *\n * @prop --typing-progress-bg-color: Typing progress bar background color (#ade3ff)\n *\n * @prop --scrollbar-track-color: Scrollbar track color (#f3f4f6)\n * @prop --scrollbar-thumb-color: Scrollbar thumb color (#d1d5db)\n * @prop --scrollbar-thumb-hover-color: Scrollbar thumb hover color (#9ca3af)\n *\n * @prop --error-text-color: Error text color (#ef4444)\n * @prop --success-text-color: Success text color (#10b981)\n *\n * @prop --code-bg-user-color: Code background in user messages (--message-user-bg-color + 20% white)\n * @prop --code-text-user-color: Code text color in user messages (--message-user-text-color)\n * @prop --code-border-user-color: Code border in user messages (--message-user-bg-color + 20% black)\n * @prop --code-bg-assistant-color: Code background in assistant messages (--message-assistant-bg-color + 50% white)\n * @prop --code-text-assistant-color: Code text color in assistant messages (--message-assistant-text-color)\n * @prop --code-border-assistant-color: Code border in assistant messages (--message-assistant-bg-color + 10% black)\n *\n * @prop --confirmation-overlay-bg-color: Confirmation dialog overlay background color (rgba(0, 0, 0, 0.5))\n * @prop --confirmation-dialog-bg-color: Confirmation dialog background color (uses --chat-window-bg-color)\n * @prop --confirmation-dialog-border-color: Confirmation dialog border color (uses --chat-window-border-color)\n * @prop --confirmation-dialog-shadow-color: Confirmation dialog shadow color (uses --chat-window-shadow-color)\n * @prop --confirmation-title-color: Confirmation dialog title text color (uses #111827)\n * @prop --confirmation-title-font-size: Confirmation dialog title font size (1.125em)\n * @prop --confirmation-message-color: Confirmation dialog message text color (uses --loading-text-color)\n * @prop --confirmation-message-font-size: Confirmation dialog message font size (uses 1em)\n * @prop --confirmation-button-cancel-bg-color: Cancel button background color (uses --button-background-color-hover)\n * @prop --confirmation-button-cancel-bg-hover-color: Cancel button background on hover (uses #e5e7eb)\n * @prop --confirmation-button-cancel-text-color: Cancel button text color (uses --header-button-text-color)\n * @prop --confirmation-button-confirm-bg-color: Confirm button background color (uses --error-text-color)\n * @prop --confirmation-button-confirm-bg-hover-color: Confirm button background on hover (uses --error-text-color)\n * @prop --confirmation-button-confirm-text-color: Confirm button text color (uses --send-button-text-color)\n * @prop --file-attachment-button-bg-color: Attach file button background color (transparent)\n * @prop --file-attachment-button-bg-hover-color: Attach file button background hover color (--header-button-bg-hover-color)\n * @prop --file-attachment-button-text-color: Attach file button text color (--header-button-text-color)\n * @prop --file-attachment-button-text-disabled-color: Attach file button disabled text color (--send-button-text-disabled-color)\n *\n * @prop --selected-files-bg-color: Selected files container background color (--chat-window-bg-color)\n * @prop --selected-files-border-color: Selected files container border color (--header-border-color)\n *\n * @prop --selected-file-bg-color: Selected file item background color (--message-system-bg-color)\n * @prop --selected-file-font-size: Selected file item font size (--chat-window-font-size-sm)\n * @prop --selected-file-name-color: Selected file name color (--message-assistant-text-color)\n * @prop --selected-file-size-color: Selected file size display color (--input-placeholder-color)\n * @prop --selected-file-icon-size: Selected file item icon size (1.25em)\n * @prop --selected-file-remove-icon-color: Selected file remove icon color (--error-text-color)\n * @prop --selected-file-remove-icon-hover-color: Selected file remove icon hover (#dc2626)\n *\n * @prop --message-attachment-icon-size: Message attachment icon size (1em)\n */\n /* Global variables */\n --chat-z-index: 50;\n\n /* Button variables */\n --button-background-color: #ffffff;\n --button-background-color-hover: #f3f4f6;\n --button-text-color: #111827;\n --button-text-color-hover: #1d4ed8;\n --button-border-color: #d1d5db;\n --button-border-color-hover: #6b7280;\n --button-font-size: 1em; /* text-sm */\n --button-icon-size: 1.5em;\n\n /* Chat window variables */\n --chat-window-height: 60%;\n --chat-window-width: 25%;\n --chat-window-fullscreen-width: 80%;\n --chat-window-bg-color: #ffffff;\n --chat-window-border-color: #d1d5db;\n --chat-window-shadow-color: rgba(0, 0, 0, 0.1);\n --chat-window-font-size: 0.875em; /* text-sm */\n --chat-window-font-size-sm: 0.75em; /* text-xs */\n\n /* Header variables */\n --header-bg-color: transparent;\n --header-bg-hover-color: #f9fafb;\n --header-border-color: #f3f4f6;\n --header-button-text-color: #6b7280;\n --header-button-bg-hover-color: #f3f4f6;\n --header-font-size: 1em;\n --header-text-font-size: 1em;\n --header-text-color: #525762;\n --header-button-icon-size: 1.5em;\n\n /* Starter question variables */\n --starter-question-bg-color: transparent;\n --starter-question-bg-hover-color: #eff6ff;\n --starter-question-text-color: #3b82f6;\n --starter-question-border-color: #3b82f6;\n --starter-question-border-hover-color: #2563eb;\n\n /* Message bubble variables */\n --message-user-bg-color: #e4edfb;\n --message-user-text-color: #1f2937;\n --message-user-link-color: #155dfc;\n\n --message-assistant-bg-color: #eae7e8;\n --message-assistant-text-color: var(--message-user-text-color);\n --message-assistant-link-color: var(--message-user-link-color);\n\n --message-system-bg-color: #fbe4f8;\n --message-system-text-color: var(--message-user-text-color);\n --message-system-link-color: var(--message-user-link-color);\n\n --message-timestamp-color: rgba(255, 255, 255, 0.7);\n --message-timestamp-assistant-color: rgba(75, 85, 99, 0.7);\n\n /* Input area variables */\n --input-bg-color: transparent;\n --input-border-color: #d1d5db;\n --input-text-color: #111827;\n --input-placeholder-color: #6b7280;\n --input-outline-focus-color: #3b82f6;\n\n /* Send button variables */\n --send-button-bg-color: #3b82f6;\n --send-button-bg-hover-color: #2563eb;\n --send-button-text-color: #ffffff;\n --send-button-bg-disabled-color: #d1d5db;\n --send-button-text-disabled-color: #6b7280;\n\n /* Loading variables */\n --loading-text-color: #6b7280;\n --loading-spinner-track-color: #e5e7eb;\n --loading-spinner-fill-color: #3b82f6;\n --loading-spinner-size: 1.25em;\n\n /* Typing indicator variables */\n --typing-progress-bg-color: #ade3ff;\n\n /* Scrollbar variables */\n --scrollbar-track-color: #f3f4f6;\n --scrollbar-thumb-color: #d1d5db;\n --scrollbar-thumb-hover-color: #9ca3af;\n\n /* Error variables */\n --error-text-color: #ef4444;\n --success-text-color: #10b981; /* Complementary green to existing blue palette */;\n\n /* Markdown code variables */\n --code-bg-user-color: color-mix(in srgb, var(--message-user-bg-color) 80%, white 20%);\n --code-text-user-color: var(--message-user-text-color);\n --code-border-user-color: color-mix(in srgb, var(--message-user-bg-color) 90%, black 10%);\n --code-bg-assistant-color: color-mix(in srgb, var(--message-assistant-bg-color) 50%, white 50%);\n --code-text-assistant-color: var(--message-assistant-text-color);\n --code-border-assistant-color: color-mix(in srgb, var(--message-assistant-bg-color) 90%, black 10%);;\n\n --confirmation-overlay-bg-color: rgba(0, 0, 0, 0.5);\n --confirmation-dialog-bg-color: var(--chat-window-bg-color);\n --confirmation-dialog-border-color: var(--chat-window-border-color);\n --confirmation-dialog-shadow-color: var(--chat-window-shadow-color);\n --confirmation-title-color: #111827;\n --confirmation-title-font-size: 1.125em;\n --confirmation-message-color: var(--loading-text-color);\n --confirmation-message-font-size: 1em;\n --confirmation-button-cancel-bg-color: var(--button-background-color-hover);\n --confirmation-button-cancel-bg-hover-color: #e5e7eb;\n --confirmation-button-cancel-text-color: var(--header-button-text-color);\n --confirmation-button-confirm-bg-color: var(--error-text-color);\n --confirmation-button-confirm-bg-hover-color: var(--error-text-color);\n --confirmation-button-confirm-text-color: var(--send-button-text-color);\n\n /* File upload variables */\n --file-attachment-button-bg-color: transparent;\n --file-attachment-button-bg-hover-color: var(--header-button-bg-hover-color); /* #f3f4f6 */\n --file-attachment-button-text-color: var(--header-button-text-color); /* #6b7280 */\n --file-attachment-button-text-disabled-color: var(--send-button-text-disabled-color); /* #6b7280 */\n\n /* Selected files variables */\n --selected-files-bg-color: var(--chat-window-bg-color); /* transparent */\n --selected-files-border-color: var(--header-border-color); /* #f3f4f6 */\n\n /* Selected file item variables */\n --selected-file-bg-color: var(--message-system-bg-color); /* #f3f4f6 */\n\n /* Selected file text variables */\n --selected-file-font-size: var(--chat-window-font-size-sm);\n --selected-file-name-color: var(--message-assistant-text-color); /* #1f2937 */\n --selected-file-size-color: var(--input-placeholder-color); /* #6b7280 */\n\n /* Selected file icon variables */\n --selected-file-icon-size: 1.25em;\n --selected-file-remove-icon-color: var(--error-text-color); /* #ef4444 */\n --selected-file-remove-icon-hover-color: #dc2626; /* Darker red for hover */\n\n /* Message attachment variables */\n --message-attachment-icon-size: 1em;\n\n display: block;\n position: fixed;\n right: 30px;\n bottom: 30px;\n}\ntextarea {\n max-height: 8rem;\n min-height: 2.5rem;\n resize: none;\n overflow-y: auto;\n}\ntextarea::-webkit-scrollbar {\n width: 0.375rem;\n}\ntextarea::-webkit-scrollbar-track {\n border-radius: 0.25rem;\n background-color: var(--scrollbar-track-color);\n}\ntextarea::-webkit-scrollbar-thumb {\n border-radius: 0.25rem;\n background-color: var(--scrollbar-thumb-color);\n}\ntextarea::-webkit-scrollbar-thumb:hover {\n background-color: var(--scrollbar-thumb-hover-color);\n}\n@keyframes spin {\n\n to {\n transform: rotate(360deg);\n }\n}\n.loading-spinner {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border-width: 2px;\n border-color: var(--loading-spinner-track-color);\n border-top-color: var(--loading-spinner-fill-color);\n width: var(--loading-spinner-size);\n height: var(--loading-spinner-size);\n}\n.overflow-y-auto::-webkit-scrollbar {\n width: 0.375rem;\n}\n.overflow-y-auto::-webkit-scrollbar-track {\n border-radius: 0.25rem;\n background-color: var(--scrollbar-track-color);\n}\n.overflow-y-auto::-webkit-scrollbar-thumb {\n border-radius: 0.25rem;\n background-color: var(--scrollbar-thumb-color);\n}\n.overflow-y-auto::-webkit-scrollbar-thumb:hover {\n background-color: var(--scrollbar-thumb-hover-color);\n}\n/* Markdown content styling for chat messages */\n.chat-markdown {\n color: var(--tw-prose-body);\n max-width: 65ch;\n}\n.chat-markdown :where(p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n}\n.chat-markdown :where([class~=\"lead\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-lead);\n font-size: 1.25em;\n line-height: 1.6;\n margin-top: 1.2em;\n margin-bottom: 1.2em;\n}\n.chat-markdown :where(a):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-links);\n text-decoration: underline;\n font-weight: 500;\n}\n.chat-markdown :where(strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-bold);\n font-weight: 600;\n}\n.chat-markdown :where(a strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.chat-markdown :where(blockquote strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.chat-markdown :where(thead th strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.chat-markdown :where(ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: decimal;\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n padding-inline-start: 1.625em;\n}\n.chat-markdown :where(ol[type=\"A\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: upper-alpha;\n}\n.chat-markdown :where(ol[type=\"a\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: lower-alpha;\n}\n.chat-markdown :where(ol[type=\"A\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: upper-alpha;\n}\n.chat-markdown :where(ol[type=\"a\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: lower-alpha;\n}\n.chat-markdown :where(ol[type=\"I\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: upper-roman;\n}\n.chat-markdown :where(ol[type=\"i\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: lower-roman;\n}\n.chat-markdown :where(ol[type=\"I\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: upper-roman;\n}\n.chat-markdown :where(ol[type=\"i\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: lower-roman;\n}\n.chat-markdown :where(ol[type=\"1\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: decimal;\n}\n.chat-markdown :where(ul):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: disc;\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n padding-inline-start: 1.625em;\n}\n.chat-markdown :where(ol > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::marker {\n font-weight: 400;\n color: var(--tw-prose-counters);\n}\n.chat-markdown :where(ul > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::marker {\n color: var(--tw-prose-bullets);\n}\n.chat-markdown :where(dt):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n margin-top: 1.25em;\n}\n.chat-markdown :where(hr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n border-color: var(--tw-prose-hr);\n border-top-width: 1px;\n margin-top: 3em;\n margin-bottom: 3em;\n}\n.chat-markdown :where(blockquote):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 500;\n font-style: italic;\n color: var(--tw-prose-quotes);\n border-inline-start-width: 0.25rem;\n border-inline-start-color: var(--tw-prose-quote-borders);\n quotes: \"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\";\n margin-top: 1.6em;\n margin-bottom: 1.6em;\n padding-inline-start: 1em;\n}\n.chat-markdown :where(blockquote p:first-of-type):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before {\n content: open-quote;\n}\n.chat-markdown :where(blockquote p:last-of-type):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after {\n content: close-quote;\n}\n.chat-markdown :where(h1):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 800;\n font-size: 2.25em;\n margin-top: 0;\n margin-bottom: 0.8888889em;\n line-height: 1.1111111;\n}\n.chat-markdown :where(h1 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 900;\n color: inherit;\n}\n.chat-markdown :where(h2):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 700;\n font-size: 1.5em;\n margin-top: 2em;\n margin-bottom: 1em;\n line-height: 1.3333333;\n}\n.chat-markdown :where(h2 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 800;\n color: inherit;\n}\n.chat-markdown :where(h3):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n font-size: 1.25em;\n margin-top: 1.6em;\n margin-bottom: 0.6em;\n line-height: 1.6;\n}\n.chat-markdown :where(h3 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 700;\n color: inherit;\n}\n.chat-markdown :where(h4):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n line-height: 1.5;\n}\n.chat-markdown :where(h4 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 700;\n color: inherit;\n}\n.chat-markdown :where(img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.chat-markdown :where(picture):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n display: block;\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.chat-markdown :where(video):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.chat-markdown :where(kbd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 500;\n font-family: inherit;\n color: var(--tw-prose-kbd);\n box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);\n font-size: 0.875em;\n border-radius: 0.3125rem;\n padding-top: 0.1875em;\n padding-inline-end: 0.375em;\n padding-bottom: 0.1875em;\n padding-inline-start: 0.375em;\n}\n.chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-code);\n font-weight: 600;\n font-size: 0.875em;\n}\n.chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before {\n content: \"`\";\n}\n.chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after {\n content: \"`\";\n}\n.chat-markdown :where(a code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.chat-markdown :where(h1 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.chat-markdown :where(h2 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n font-size: 0.875em;\n}\n.chat-markdown :where(h3 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n font-size: 0.9em;\n}\n.chat-markdown :where(h4 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.chat-markdown :where(blockquote code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.chat-markdown :where(thead th code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.chat-markdown :where(pre):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-pre-code);\n background-color: var(--tw-prose-pre-bg);\n overflow-x: auto;\n font-weight: 400;\n font-size: 0.875em;\n line-height: 1.7142857;\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n border-radius: 0.375rem;\n padding-top: 0.8571429em;\n padding-inline-end: 1.1428571em;\n padding-bottom: 0.8571429em;\n padding-inline-start: 1.1428571em;\n}\n.chat-markdown :where(pre code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n background-color: transparent;\n border-width: 0;\n border-radius: 0;\n padding: 0;\n font-weight: inherit;\n color: inherit;\n font-size: inherit;\n font-family: inherit;\n line-height: inherit;\n}\n.chat-markdown :where(pre code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before {\n content: none;\n}\n.chat-markdown :where(pre code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after {\n content: none;\n}\n.chat-markdown :where(table):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n width: 100%;\n table-layout: auto;\n margin-top: 2em;\n margin-bottom: 2em;\n font-size: 0.875em;\n line-height: 1.7142857;\n}\n.chat-markdown :where(thead):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n border-bottom-width: 1px;\n border-bottom-color: var(--tw-prose-th-borders);\n}\n.chat-markdown :where(thead th):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n vertical-align: bottom;\n padding-inline-end: 0.5714286em;\n padding-bottom: 0.5714286em;\n padding-inline-start: 0.5714286em;\n}\n.chat-markdown :where(tbody tr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n border-bottom-width: 1px;\n border-bottom-color: var(--tw-prose-td-borders);\n}\n.chat-markdown :where(tbody tr:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n border-bottom-width: 0;\n}\n.chat-markdown :where(tbody td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n vertical-align: baseline;\n}\n.chat-markdown :where(tfoot):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n border-top-width: 1px;\n border-top-color: var(--tw-prose-th-borders);\n}\n.chat-markdown :where(tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n vertical-align: top;\n}\n.chat-markdown :where(th, td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n text-align: start;\n}\n.chat-markdown :where(figure > *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.chat-markdown :where(figcaption):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-captions);\n font-size: 0.875em;\n line-height: 1.4285714;\n margin-top: 0.8571429em;\n}\n.chat-markdown {\n --tw-prose-body: #374151;\n --tw-prose-headings: #111827;\n --tw-prose-lead: #4b5563;\n --tw-prose-links: #111827;\n --tw-prose-bold: #111827;\n --tw-prose-counters: #6b7280;\n --tw-prose-bullets: #d1d5db;\n --tw-prose-hr: #e5e7eb;\n --tw-prose-quotes: #111827;\n --tw-prose-quote-borders: #e5e7eb;\n --tw-prose-captions: #6b7280;\n --tw-prose-kbd: #111827;\n --tw-prose-kbd-shadows: 17 24 39;\n --tw-prose-code: #111827;\n --tw-prose-pre-code: #e5e7eb;\n --tw-prose-pre-bg: #1f2937;\n --tw-prose-th-borders: #d1d5db;\n --tw-prose-td-borders: #e5e7eb;\n --tw-prose-invert-body: #d1d5db;\n --tw-prose-invert-headings: #fff;\n --tw-prose-invert-lead: #9ca3af;\n --tw-prose-invert-links: #fff;\n --tw-prose-invert-bold: #fff;\n --tw-prose-invert-counters: #9ca3af;\n --tw-prose-invert-bullets: #4b5563;\n --tw-prose-invert-hr: #374151;\n --tw-prose-invert-quotes: #f3f4f6;\n --tw-prose-invert-quote-borders: #374151;\n --tw-prose-invert-captions: #9ca3af;\n --tw-prose-invert-kbd: #fff;\n --tw-prose-invert-kbd-shadows: 255 255 255;\n --tw-prose-invert-code: #fff;\n --tw-prose-invert-pre-code: #d1d5db;\n --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n --tw-prose-invert-th-borders: #4b5563;\n --tw-prose-invert-td-borders: #374151;\n font-size: 1rem;\n line-height: 1.75;\n}\n.chat-markdown :where(picture > img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.chat-markdown :where(li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n}\n.chat-markdown :where(ol > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0.375em;\n}\n.chat-markdown :where(ul > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0.375em;\n}\n.chat-markdown :where(.prose > ul > li p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.75em;\n margin-bottom: 0.75em;\n}\n.chat-markdown :where(.prose > ul > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.25em;\n}\n.chat-markdown :where(.prose > ul > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 1.25em;\n}\n.chat-markdown :where(.prose > ol > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.25em;\n}\n.chat-markdown :where(.prose > ol > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 1.25em;\n}\n.chat-markdown :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.75em;\n margin-bottom: 0.75em;\n}\n.chat-markdown :where(dl):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n}\n.chat-markdown :where(dd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.5em;\n padding-inline-start: 1.625em;\n}\n.chat-markdown :where(hr + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.chat-markdown :where(h2 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.chat-markdown :where(h3 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.chat-markdown :where(h4 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.chat-markdown :where(thead th:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0;\n}\n.chat-markdown :where(thead th:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-end: 0;\n}\n.chat-markdown :where(tbody td, tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-top: 0.5714286em;\n padding-inline-end: 0.5714286em;\n padding-bottom: 0.5714286em;\n padding-inline-start: 0.5714286em;\n}\n.chat-markdown :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0;\n}\n.chat-markdown :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-end: 0;\n}\n.chat-markdown :where(figure):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.chat-markdown :where(.prose > :first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.chat-markdown :where(.prose > :last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 0;\n}\n.chat-markdown {\n font-size: 0.875rem;\n line-height: 1.7142857;\n}\n.chat-markdown :where(p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n margin-bottom: 1.1428571em;\n}\n.chat-markdown :where([class~=\"lead\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 1.2857143em;\n line-height: 1.5555556;\n margin-top: 0.8888889em;\n margin-bottom: 0.8888889em;\n}\n.chat-markdown :where(blockquote):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.3333333em;\n margin-bottom: 1.3333333em;\n padding-inline-start: 1.1111111em;\n}\n.chat-markdown :where(h1):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 2.1428571em;\n margin-top: 0;\n margin-bottom: 0.8em;\n line-height: 1.2;\n}\n.chat-markdown :where(h2):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 1.4285714em;\n margin-top: 1.6em;\n margin-bottom: 0.8em;\n line-height: 1.4;\n}\n.chat-markdown :where(h3):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 1.2857143em;\n margin-top: 1.5555556em;\n margin-bottom: 0.4444444em;\n line-height: 1.5555556;\n}\n.chat-markdown :where(h4):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.4285714em;\n margin-bottom: 0.5714286em;\n line-height: 1.4285714;\n}\n.chat-markdown :where(img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.chat-markdown :where(picture):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.chat-markdown :where(picture > img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.chat-markdown :where(video):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.chat-markdown :where(kbd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8571429em;\n border-radius: 0.3125rem;\n padding-top: 0.1428571em;\n padding-inline-end: 0.3571429em;\n padding-bottom: 0.1428571em;\n padding-inline-start: 0.3571429em;\n}\n.chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8571429em;\n}\n.chat-markdown :where(h2 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.9em;\n}\n.chat-markdown :where(h3 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8888889em;\n}\n.chat-markdown :where(pre):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8571429em;\n line-height: 1.6666667;\n margin-top: 1.6666667em;\n margin-bottom: 1.6666667em;\n border-radius: 0.25rem;\n padding-top: 0.6666667em;\n padding-inline-end: 1em;\n padding-bottom: 0.6666667em;\n padding-inline-start: 1em;\n}\n.chat-markdown :where(ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n margin-bottom: 1.1428571em;\n padding-inline-start: 1.5714286em;\n}\n.chat-markdown :where(ul):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n margin-bottom: 1.1428571em;\n padding-inline-start: 1.5714286em;\n}\n.chat-markdown :where(li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.2857143em;\n margin-bottom: 0.2857143em;\n}\n.chat-markdown :where(ol > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0.4285714em;\n}\n.chat-markdown :where(ul > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0.4285714em;\n}\n.chat-markdown :where(.prose-sm > ul > li p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.5714286em;\n margin-bottom: 0.5714286em;\n}\n.chat-markdown :where(.prose-sm > ul > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n}\n.chat-markdown :where(.prose-sm > ul > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 1.1428571em;\n}\n.chat-markdown :where(.prose-sm > ol > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n}\n.chat-markdown :where(.prose-sm > ol > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 1.1428571em;\n}\n.chat-markdown :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.5714286em;\n margin-bottom: 0.5714286em;\n}\n.chat-markdown :where(dl):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n margin-bottom: 1.1428571em;\n}\n.chat-markdown :where(dt):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n}\n.chat-markdown :where(dd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.2857143em;\n padding-inline-start: 1.5714286em;\n}\n.chat-markdown :where(hr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 2.8571429em;\n margin-bottom: 2.8571429em;\n}\n.chat-markdown :where(hr + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.chat-markdown :where(h2 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.chat-markdown :where(h3 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.chat-markdown :where(h4 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.chat-markdown :where(table):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8571429em;\n line-height: 1.5;\n}\n.chat-markdown :where(thead th):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-end: 1em;\n padding-bottom: 0.6666667em;\n padding-inline-start: 1em;\n}\n.chat-markdown :where(thead th:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0;\n}\n.chat-markdown :where(thead th:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-end: 0;\n}\n.chat-markdown :where(tbody td, tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-top: 0.6666667em;\n padding-inline-end: 1em;\n padding-bottom: 0.6666667em;\n padding-inline-start: 1em;\n}\n.chat-markdown :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0;\n}\n.chat-markdown :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-end: 0;\n}\n.chat-markdown :where(figure):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.chat-markdown :where(figure > *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.chat-markdown :where(figcaption):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8571429em;\n line-height: 1.3333333;\n margin-top: 0.6666667em;\n}\n.chat-markdown :where(.prose-sm > :first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.chat-markdown :where(.prose-sm > :last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 0;\n}\n.chat-markdown {\n --tw-prose-body: #374151;\n --tw-prose-headings: #111827;\n --tw-prose-lead: #4b5563;\n --tw-prose-links: #111827;\n --tw-prose-bold: #111827;\n --tw-prose-counters: #6b7280;\n --tw-prose-bullets: #d1d5db;\n --tw-prose-hr: #e5e7eb;\n --tw-prose-quotes: #111827;\n --tw-prose-quote-borders: #e5e7eb;\n --tw-prose-captions: #6b7280;\n --tw-prose-kbd: #111827;\n --tw-prose-kbd-shadows: 17 24 39;\n --tw-prose-code: #111827;\n --tw-prose-pre-code: #e5e7eb;\n --tw-prose-pre-bg: #1f2937;\n --tw-prose-th-borders: #d1d5db;\n --tw-prose-td-borders: #e5e7eb;\n --tw-prose-invert-body: #d1d5db;\n --tw-prose-invert-headings: #fff;\n --tw-prose-invert-lead: #9ca3af;\n --tw-prose-invert-links: #fff;\n --tw-prose-invert-bold: #fff;\n --tw-prose-invert-counters: #9ca3af;\n --tw-prose-invert-bullets: #4b5563;\n --tw-prose-invert-hr: #374151;\n --tw-prose-invert-quotes: #f3f4f6;\n --tw-prose-invert-quote-borders: #374151;\n --tw-prose-invert-captions: #9ca3af;\n --tw-prose-invert-kbd: #fff;\n --tw-prose-invert-kbd-shadows: 255 255 255;\n --tw-prose-invert-code: #fff;\n --tw-prose-invert-pre-code: #d1d5db;\n --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n --tw-prose-invert-th-borders: #4b5563;\n --tw-prose-invert-td-borders: #374151;\n max-width: none;\n}\n.chat-markdown :is(:where(a):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))) {\n text-decoration-line: none;\n}\n.chat-markdown :is(:where(a):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))):hover {\n text-decoration-line: underline;\n}\n.chat-markdown {\n font-size: 1em;\n}\n/* override spacing */\n.chat-markdown > * {\n margin-top: 0.1em;\n margin-bottom: 0.1em;\n}\n.message-bubble-assistant .chat-markdown {\n color: var(--tw-prose-body);\n max-width: 65ch;\n}\n.message-bubble-assistant .chat-markdown :where(p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n}\n.message-bubble-assistant .chat-markdown :where([class~=\"lead\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-lead);\n font-size: 1.25em;\n line-height: 1.6;\n margin-top: 1.2em;\n margin-bottom: 1.2em;\n}\n.message-bubble-assistant .chat-markdown :where(a):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-links);\n text-decoration: underline;\n font-weight: 500;\n}\n.message-bubble-assistant .chat-markdown :where(strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-bold);\n font-weight: 600;\n}\n.message-bubble-assistant .chat-markdown :where(a strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(blockquote strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(thead th strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: decimal;\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n padding-inline-start: 1.625em;\n}\n.message-bubble-assistant .chat-markdown :where(ol[type=\"A\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: upper-alpha;\n}\n.message-bubble-assistant .chat-markdown :where(ol[type=\"a\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: lower-alpha;\n}\n.message-bubble-assistant .chat-markdown :where(ol[type=\"A\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: upper-alpha;\n}\n.message-bubble-assistant .chat-markdown :where(ol[type=\"a\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: lower-alpha;\n}\n.message-bubble-assistant .chat-markdown :where(ol[type=\"I\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: upper-roman;\n}\n.message-bubble-assistant .chat-markdown :where(ol[type=\"i\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: lower-roman;\n}\n.message-bubble-assistant .chat-markdown :where(ol[type=\"I\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: upper-roman;\n}\n.message-bubble-assistant .chat-markdown :where(ol[type=\"i\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: lower-roman;\n}\n.message-bubble-assistant .chat-markdown :where(ol[type=\"1\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: decimal;\n}\n.message-bubble-assistant .chat-markdown :where(ul):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n list-style-type: disc;\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n padding-inline-start: 1.625em;\n}\n.message-bubble-assistant .chat-markdown :where(ol > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::marker {\n font-weight: 400;\n color: var(--tw-prose-counters);\n}\n.message-bubble-assistant .chat-markdown :where(ul > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::marker {\n color: var(--tw-prose-bullets);\n}\n.message-bubble-assistant .chat-markdown :where(dt):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n margin-top: 1.25em;\n}\n.message-bubble-assistant .chat-markdown :where(hr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n border-color: var(--tw-prose-hr);\n border-top-width: 1px;\n margin-top: 3em;\n margin-bottom: 3em;\n}\n.message-bubble-assistant .chat-markdown :where(blockquote):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 500;\n font-style: italic;\n color: var(--tw-prose-quotes);\n border-inline-start-width: 0.25rem;\n border-inline-start-color: var(--tw-prose-quote-borders);\n quotes: \"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\";\n margin-top: 1.6em;\n margin-bottom: 1.6em;\n padding-inline-start: 1em;\n}\n.message-bubble-assistant .chat-markdown :where(blockquote p:first-of-type):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before {\n content: open-quote;\n}\n.message-bubble-assistant .chat-markdown :where(blockquote p:last-of-type):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after {\n content: close-quote;\n}\n.message-bubble-assistant .chat-markdown :where(h1):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 800;\n font-size: 2.25em;\n margin-top: 0;\n margin-bottom: 0.8888889em;\n line-height: 1.1111111;\n}\n.message-bubble-assistant .chat-markdown :where(h1 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 900;\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(h2):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 700;\n font-size: 1.5em;\n margin-top: 2em;\n margin-bottom: 1em;\n line-height: 1.3333333;\n}\n.message-bubble-assistant .chat-markdown :where(h2 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 800;\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(h3):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n font-size: 1.25em;\n margin-top: 1.6em;\n margin-bottom: 0.6em;\n line-height: 1.6;\n}\n.message-bubble-assistant .chat-markdown :where(h3 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 700;\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(h4):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n line-height: 1.5;\n}\n.message-bubble-assistant .chat-markdown :where(h4 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 700;\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.message-bubble-assistant .chat-markdown :where(picture):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n display: block;\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.message-bubble-assistant .chat-markdown :where(video):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.message-bubble-assistant .chat-markdown :where(kbd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-weight: 500;\n font-family: inherit;\n color: var(--tw-prose-kbd);\n box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);\n font-size: 0.875em;\n border-radius: 0.3125rem;\n padding-top: 0.1875em;\n padding-inline-end: 0.375em;\n padding-bottom: 0.1875em;\n padding-inline-start: 0.375em;\n}\n.message-bubble-assistant .chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-code);\n font-weight: 600;\n font-size: 0.875em;\n}\n.message-bubble-assistant .chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before {\n content: \"`\";\n}\n.message-bubble-assistant .chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after {\n content: \"`\";\n}\n.message-bubble-assistant .chat-markdown :where(a code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(h1 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(h2 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n font-size: 0.875em;\n}\n.message-bubble-assistant .chat-markdown :where(h3 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n font-size: 0.9em;\n}\n.message-bubble-assistant .chat-markdown :where(h4 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(blockquote code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(thead th code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(pre):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-pre-code);\n background-color: var(--tw-prose-pre-bg);\n overflow-x: auto;\n font-weight: 400;\n font-size: 0.875em;\n line-height: 1.7142857;\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n border-radius: 0.375rem;\n padding-top: 0.8571429em;\n padding-inline-end: 1.1428571em;\n padding-bottom: 0.8571429em;\n padding-inline-start: 1.1428571em;\n}\n.message-bubble-assistant .chat-markdown :where(pre code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n background-color: transparent;\n border-width: 0;\n border-radius: 0;\n padding: 0;\n font-weight: inherit;\n color: inherit;\n font-size: inherit;\n font-family: inherit;\n line-height: inherit;\n}\n.message-bubble-assistant .chat-markdown :where(pre code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before {\n content: none;\n}\n.message-bubble-assistant .chat-markdown :where(pre code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after {\n content: none;\n}\n.message-bubble-assistant .chat-markdown :where(table):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n width: 100%;\n table-layout: auto;\n margin-top: 2em;\n margin-bottom: 2em;\n font-size: 0.875em;\n line-height: 1.7142857;\n}\n.message-bubble-assistant .chat-markdown :where(thead):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n border-bottom-width: 1px;\n border-bottom-color: var(--tw-prose-th-borders);\n}\n.message-bubble-assistant .chat-markdown :where(thead th):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n vertical-align: bottom;\n padding-inline-end: 0.5714286em;\n padding-bottom: 0.5714286em;\n padding-inline-start: 0.5714286em;\n}\n.message-bubble-assistant .chat-markdown :where(tbody tr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n border-bottom-width: 1px;\n border-bottom-color: var(--tw-prose-td-borders);\n}\n.message-bubble-assistant .chat-markdown :where(tbody tr:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n border-bottom-width: 0;\n}\n.message-bubble-assistant .chat-markdown :where(tbody td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n vertical-align: baseline;\n}\n.message-bubble-assistant .chat-markdown :where(tfoot):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n border-top-width: 1px;\n border-top-color: var(--tw-prose-th-borders);\n}\n.message-bubble-assistant .chat-markdown :where(tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n vertical-align: top;\n}\n.message-bubble-assistant .chat-markdown :where(th, td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n text-align: start;\n}\n.message-bubble-assistant .chat-markdown :where(figure > *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.message-bubble-assistant .chat-markdown :where(figcaption):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n color: var(--tw-prose-captions);\n font-size: 0.875em;\n line-height: 1.4285714;\n margin-top: 0.8571429em;\n}\n.message-bubble-assistant .chat-markdown {\n --tw-prose-body: #374151;\n --tw-prose-headings: #111827;\n --tw-prose-lead: #4b5563;\n --tw-prose-links: #111827;\n --tw-prose-bold: #111827;\n --tw-prose-counters: #6b7280;\n --tw-prose-bullets: #d1d5db;\n --tw-prose-hr: #e5e7eb;\n --tw-prose-quotes: #111827;\n --tw-prose-quote-borders: #e5e7eb;\n --tw-prose-captions: #6b7280;\n --tw-prose-kbd: #111827;\n --tw-prose-kbd-shadows: 17 24 39;\n --tw-prose-code: #111827;\n --tw-prose-pre-code: #e5e7eb;\n --tw-prose-pre-bg: #1f2937;\n --tw-prose-th-borders: #d1d5db;\n --tw-prose-td-borders: #e5e7eb;\n --tw-prose-invert-body: #d1d5db;\n --tw-prose-invert-headings: #fff;\n --tw-prose-invert-lead: #9ca3af;\n --tw-prose-invert-links: #fff;\n --tw-prose-invert-bold: #fff;\n --tw-prose-invert-counters: #9ca3af;\n --tw-prose-invert-bullets: #4b5563;\n --tw-prose-invert-hr: #374151;\n --tw-prose-invert-quotes: #f3f4f6;\n --tw-prose-invert-quote-borders: #374151;\n --tw-prose-invert-captions: #9ca3af;\n --tw-prose-invert-kbd: #fff;\n --tw-prose-invert-kbd-shadows: 255 255 255;\n --tw-prose-invert-code: #fff;\n --tw-prose-invert-pre-code: #d1d5db;\n --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n --tw-prose-invert-th-borders: #4b5563;\n --tw-prose-invert-td-borders: #374151;\n font-size: 1rem;\n line-height: 1.75;\n}\n.message-bubble-assistant .chat-markdown :where(picture > img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.message-bubble-assistant .chat-markdown :where(li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n}\n.message-bubble-assistant .chat-markdown :where(ol > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0.375em;\n}\n.message-bubble-assistant .chat-markdown :where(ul > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0.375em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose > ul > li p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.75em;\n margin-bottom: 0.75em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose > ul > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.25em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose > ul > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 1.25em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose > ol > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.25em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose > ol > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 1.25em;\n}\n.message-bubble-assistant .chat-markdown :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.75em;\n margin-bottom: 0.75em;\n}\n.message-bubble-assistant .chat-markdown :where(dl):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n}\n.message-bubble-assistant .chat-markdown :where(dd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.5em;\n padding-inline-start: 1.625em;\n}\n.message-bubble-assistant .chat-markdown :where(hr + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.message-bubble-assistant .chat-markdown :where(h2 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.message-bubble-assistant .chat-markdown :where(h3 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.message-bubble-assistant .chat-markdown :where(h4 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.message-bubble-assistant .chat-markdown :where(thead th:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0;\n}\n.message-bubble-assistant .chat-markdown :where(thead th:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-end: 0;\n}\n.message-bubble-assistant .chat-markdown :where(tbody td, tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-top: 0.5714286em;\n padding-inline-end: 0.5714286em;\n padding-bottom: 0.5714286em;\n padding-inline-start: 0.5714286em;\n}\n.message-bubble-assistant .chat-markdown :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0;\n}\n.message-bubble-assistant .chat-markdown :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-end: 0;\n}\n.message-bubble-assistant .chat-markdown :where(figure):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose > :first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.message-bubble-assistant .chat-markdown :where(.prose > :last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 0;\n}\n.message-bubble-assistant .chat-markdown {\n font-size: 0.875rem;\n line-height: 1.7142857;\n}\n.message-bubble-assistant .chat-markdown :where(p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n margin-bottom: 1.1428571em;\n}\n.message-bubble-assistant .chat-markdown :where([class~=\"lead\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 1.2857143em;\n line-height: 1.5555556;\n margin-top: 0.8888889em;\n margin-bottom: 0.8888889em;\n}\n.message-bubble-assistant .chat-markdown :where(blockquote):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.3333333em;\n margin-bottom: 1.3333333em;\n padding-inline-start: 1.1111111em;\n}\n.message-bubble-assistant .chat-markdown :where(h1):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 2.1428571em;\n margin-top: 0;\n margin-bottom: 0.8em;\n line-height: 1.2;\n}\n.message-bubble-assistant .chat-markdown :where(h2):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 1.4285714em;\n margin-top: 1.6em;\n margin-bottom: 0.8em;\n line-height: 1.4;\n}\n.message-bubble-assistant .chat-markdown :where(h3):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 1.2857143em;\n margin-top: 1.5555556em;\n margin-bottom: 0.4444444em;\n line-height: 1.5555556;\n}\n.message-bubble-assistant .chat-markdown :where(h4):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.4285714em;\n margin-bottom: 0.5714286em;\n line-height: 1.4285714;\n}\n.message-bubble-assistant .chat-markdown :where(img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.message-bubble-assistant .chat-markdown :where(picture):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.message-bubble-assistant .chat-markdown :where(picture > img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.message-bubble-assistant .chat-markdown :where(video):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.message-bubble-assistant .chat-markdown :where(kbd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8571429em;\n border-radius: 0.3125rem;\n padding-top: 0.1428571em;\n padding-inline-end: 0.3571429em;\n padding-bottom: 0.1428571em;\n padding-inline-start: 0.3571429em;\n}\n.message-bubble-assistant .chat-markdown :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8571429em;\n}\n.message-bubble-assistant .chat-markdown :where(h2 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.9em;\n}\n.message-bubble-assistant .chat-markdown :where(h3 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8888889em;\n}\n.message-bubble-assistant .chat-markdown :where(pre):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8571429em;\n line-height: 1.6666667;\n margin-top: 1.6666667em;\n margin-bottom: 1.6666667em;\n border-radius: 0.25rem;\n padding-top: 0.6666667em;\n padding-inline-end: 1em;\n padding-bottom: 0.6666667em;\n padding-inline-start: 1em;\n}\n.message-bubble-assistant .chat-markdown :where(ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n margin-bottom: 1.1428571em;\n padding-inline-start: 1.5714286em;\n}\n.message-bubble-assistant .chat-markdown :where(ul):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n margin-bottom: 1.1428571em;\n padding-inline-start: 1.5714286em;\n}\n.message-bubble-assistant .chat-markdown :where(li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.2857143em;\n margin-bottom: 0.2857143em;\n}\n.message-bubble-assistant .chat-markdown :where(ol > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0.4285714em;\n}\n.message-bubble-assistant .chat-markdown :where(ul > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0.4285714em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose-sm > ul > li p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.5714286em;\n margin-bottom: 0.5714286em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose-sm > ul > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose-sm > ul > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 1.1428571em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose-sm > ol > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose-sm > ol > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 1.1428571em;\n}\n.message-bubble-assistant .chat-markdown :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.5714286em;\n margin-bottom: 0.5714286em;\n}\n.message-bubble-assistant .chat-markdown :where(dl):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n margin-bottom: 1.1428571em;\n}\n.message-bubble-assistant .chat-markdown :where(dt):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.1428571em;\n}\n.message-bubble-assistant .chat-markdown :where(dd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0.2857143em;\n padding-inline-start: 1.5714286em;\n}\n.message-bubble-assistant .chat-markdown :where(hr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 2.8571429em;\n margin-bottom: 2.8571429em;\n}\n.message-bubble-assistant .chat-markdown :where(hr + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.message-bubble-assistant .chat-markdown :where(h2 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.message-bubble-assistant .chat-markdown :where(h3 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.message-bubble-assistant .chat-markdown :where(h4 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.message-bubble-assistant .chat-markdown :where(table):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8571429em;\n line-height: 1.5;\n}\n.message-bubble-assistant .chat-markdown :where(thead th):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-end: 1em;\n padding-bottom: 0.6666667em;\n padding-inline-start: 1em;\n}\n.message-bubble-assistant .chat-markdown :where(thead th:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0;\n}\n.message-bubble-assistant .chat-markdown :where(thead th:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-end: 0;\n}\n.message-bubble-assistant .chat-markdown :where(tbody td, tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-top: 0.6666667em;\n padding-inline-end: 1em;\n padding-bottom: 0.6666667em;\n padding-inline-start: 1em;\n}\n.message-bubble-assistant .chat-markdown :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-start: 0;\n}\n.message-bubble-assistant .chat-markdown :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n padding-inline-end: 0;\n}\n.message-bubble-assistant .chat-markdown :where(figure):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.message-bubble-assistant .chat-markdown :where(figure > *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.message-bubble-assistant .chat-markdown :where(figcaption):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n font-size: 0.8571429em;\n line-height: 1.3333333;\n margin-top: 0.6666667em;\n}\n.message-bubble-assistant .chat-markdown :where(.prose-sm > :first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-top: 0;\n}\n.message-bubble-assistant .chat-markdown :where(.prose-sm > :last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n margin-bottom: 0;\n}\n.message-bubble-assistant .chat-markdown {\n --tw-prose-body: #374151;\n --tw-prose-headings: #111827;\n --tw-prose-lead: #4b5563;\n --tw-prose-links: #111827;\n --tw-prose-bold: #111827;\n --tw-prose-counters: #6b7280;\n --tw-prose-bullets: #d1d5db;\n --tw-prose-hr: #e5e7eb;\n --tw-prose-quotes: #111827;\n --tw-prose-quote-borders: #e5e7eb;\n --tw-prose-captions: #6b7280;\n --tw-prose-kbd: #111827;\n --tw-prose-kbd-shadows: 17 24 39;\n --tw-prose-code: #111827;\n --tw-prose-pre-code: #e5e7eb;\n --tw-prose-pre-bg: #1f2937;\n --tw-prose-th-borders: #d1d5db;\n --tw-prose-td-borders: #e5e7eb;\n --tw-prose-invert-body: #d1d5db;\n --tw-prose-invert-headings: #fff;\n --tw-prose-invert-lead: #9ca3af;\n --tw-prose-invert-links: #fff;\n --tw-prose-invert-bold: #fff;\n --tw-prose-invert-counters: #9ca3af;\n --tw-prose-invert-bullets: #4b5563;\n --tw-prose-invert-hr: #374151;\n --tw-prose-invert-quotes: #f3f4f6;\n --tw-prose-invert-quote-borders: #374151;\n --tw-prose-invert-captions: #9ca3af;\n --tw-prose-invert-kbd: #fff;\n --tw-prose-invert-kbd-shadows: 255 255 255;\n --tw-prose-invert-code: #fff;\n --tw-prose-invert-pre-code: #d1d5db;\n --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n --tw-prose-invert-th-borders: #4b5563;\n --tw-prose-invert-td-borders: #374151;\n max-width: none;\n}\n.message-bubble-assistant .chat-markdown :is(:where(a):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))) {\n text-decoration-line: none;\n}\n.message-bubble-assistant .chat-markdown :is(:where(a):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))):hover {\n text-decoration-line: underline;\n}\n.message-bubble-assistant .chat-markdown {\n --tw-prose-body: var(--message-assistant-text-color);\n --tw-prose-headings: var(--message-assistant-text-color);\n --tw-prose-lead: var(--message-assistant-text-color);\n --tw-prose-links: var(--message-assistant-link-color);\n --tw-prose-bold: var(--message-assistant-text-color);\n --tw-prose-counters: var(--message-assistant-text-color);\n --tw-prose-bullets: var(--message-assistant-text-color);\n --tw-prose-hr: var(--message-assistant-text-color);\n --tw-prose-quotes: var(--message-assistant-text-color);\n --tw-prose-quote-borders: var(--message-assistant-text-color);\n --tw-prose-captions: var(--message-assistant-text-color);\n --tw-prose-kbd: var(--message-assistant-text-color);\n --tw-prose-kbd-shadows: var(--message-assistant-text-color);\n --tw-prose-code: var(--code-text-assistant-color);\n --tw-prose-pre-code: var(--code-text-assistant-color);\n --tw-prose-pre-bg: var(--code-bg-assistant-color);\n --tw-prose-th-borders: var(--message-assistant-text-color);\n --tw-prose-td-borders: var(--message-assistant-text-color);\n}\n.message-bubble-user .chat-markdown {\n --tw-prose-body: var(--message-user-text-color);\n --tw-prose-headings: var(--message-user-text-color);\n --tw-prose-lead: var(--message-user-text-color);\n --tw-prose-links: var(--message-user-link-color);\n --tw-prose-bold: var(--message-user-text-color);\n --tw-prose-counters: var(--message-user-text-color);\n --tw-prose-bullets: var(--message-user-text-color);\n --tw-prose-hr: var(--message-user-text-color);\n --tw-prose-quotes: var(--message-user-text-color);\n --tw-prose-quote-borders: var(--message-user-text-color);\n --tw-prose-captions: var(--message-user-text-color);\n --tw-prose-kbd: var(--message-user-text-color);\n --tw-prose-kbd-shadows: var(--message-user-text-color);\n --tw-prose-code: var(--code-text-user-color);\n --tw-prose-pre-code: var(--code-text-user-color);\n --tw-prose-pre-bg: var(--code-bg-user-color);\n --tw-prose-th-borders: var(--message-user-text-color);\n --tw-prose-td-borders: var(--message-user-text-color);\n}\n.message-bubble-system .chat-markdown {\n --tw-prose-body: var(--message-system-text-color);\n --tw-prose-headings: var(--message-system-text-color);\n --tw-prose-lead: var(--message-system-text-color);\n --tw-prose-links: var(--message-system-link-color);\n --tw-prose-bold: var(--message-system-text-color);\n --tw-prose-counters: var(--message-system-text-color);\n --tw-prose-bullets: var(--message-system-text-color);\n --tw-prose-hr: var(--message-system-text-color);\n --tw-prose-quotes: var(--message-system-text-color);\n --tw-prose-quote-borders: var(--message-system-text-color);\n --tw-prose-captions: var(--message-system-text-color);\n --tw-prose-kbd: var(--message-system-text-color);\n --tw-prose-kbd-shadows: var(--message-system-text-color);\n --tw-prose-code: var(--message-system-text-color);\n --tw-prose-pre-code: var(--message-system-text-color);\n --tw-prose-pre-bg: var(--message-system-text-color);\n --tw-prose-th-borders: var(--message-system-text-color);\n --tw-prose-td-borders: var(--message-system-text-color);\n}\n.message-bubble-user .chat-markdown pre {\n border: 1px solid var(--code-border-user-color);\n}\n.message-bubble-assistant .chat-markdown pre {\n border: 1px solid var(--code-border-assistant-color);\n}\n.loading:after {\n content: ' .';\n}\n/* File Upload Button */\n.file-attachment-button {\n border-radius: 0.375rem;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 200ms;\n}\n.file-attachment-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.file-attachment-button {\n padding: 0.375em;\n background-color: var(--file-attachment-button-bg-color);\n color: var(--file-attachment-button-text-color);\n}\n.file-attachment-button svg {\n width: 1.5em;\n height: 1.5em;\n}\n.file-attachment-button:hover:not(:disabled) {\n background-color: var(--file-attachment-button-bg-hover-color);\n}\n.file-attachment-button:disabled {\n color: var(--file-attachment-button-text-disabled-color);\n}\n/* Selected Files Container */\n.selected-files-container {\n padding: 1em 1em 0.5em 1em;\n background-color: var(--selected-files-bg-color);\n border-top: 1px solid var(--selected-files-border-color);\n}\n/* Selected File Item */\n.selected-file-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: var(--selected-file-bg-color);\n border-radius: 0.375em;\n padding: 0.25em 0.5em;\n font-size: var(--selected-file-font-size);\n color: var(--selected-file-name-color);\n}\n.selected-file-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.selected-file-icon svg {\n width: var(--selected-file-icon-size);\n height: var(--selected-file-icon-size);\n}\n.selected-file-size {\n color: var(--selected-file-size-color);\n}\n.selected-file-error {\n color: var(--error-text-color);\n}\n.selected-file-success-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--success-text-color);\n width: var(--selected-file-icon-size);\n height: var(--selected-file-icon-size);\n}\n.selected-file-remove-button {\n font-weight: 700;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 200ms;\n color: var(--selected-file-remove-icon-color);\n padding: 0.375em;\n}\n.selected-file-remove-button svg {\n width: var(--selected-file-icon-size);\n height: var(--selected-file-icon-size);\n}\n.selected-file-remove-button:hover {\n color: var(--selected-file-remove-icon-hover-color);\n}\n/* Message Attachments */\n.message-attachments {\n margin-top: 0.5em;\n}\n.message-attachments > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25em * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25em * var(--tw-space-y-reverse));\n}\n.message-attachments {\n font-size: var(--chat-window-font-size-sm);\n}\n.message-attachment-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--message-attachment-icon-size);\n height: var(--message-attachment-icon-size);\n}\n/* Update Send Button for Upload State */\n.send-button-disabled {\n cursor: not-allowed;\n background-color: var(--send-button-bg-disabled-color);\n color: var(--send-button-text-disabled-color);\n}\n";
|
|
4475
4487
|
const OpenChatStudioWidgetStyle0 = ocsChatCss;
|
|
4476
4488
|
|
|
4477
4489
|
const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLElement {
|
|
@@ -4487,6 +4499,10 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4487
4499
|
* The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
|
|
4488
4500
|
*/
|
|
4489
4501
|
this.buttonShape = 'square';
|
|
4502
|
+
/**
|
|
4503
|
+
* The message to display in the new chat confirmation dialog.
|
|
4504
|
+
*/
|
|
4505
|
+
this.newChatConfirmationMessage = "Starting a new chat will clear your current conversation. Continue?";
|
|
4490
4506
|
/**
|
|
4491
4507
|
* Whether the chat widget is visible on load.
|
|
4492
4508
|
*/
|
|
@@ -4508,24 +4524,34 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4508
4524
|
* Allow the user to make the chat window full screen.
|
|
4509
4525
|
*/
|
|
4510
4526
|
this.allowFullScreen = true;
|
|
4511
|
-
|
|
4527
|
+
/**
|
|
4528
|
+
* Allow the user to attach files to their messages.
|
|
4529
|
+
*/
|
|
4530
|
+
this.allowAttachments = false;
|
|
4531
|
+
/**
|
|
4532
|
+
* The text to display while the assistant is typing/preparing a response.
|
|
4533
|
+
*/
|
|
4534
|
+
this.typingIndicatorText = "Preparing response";
|
|
4512
4535
|
this.error = "";
|
|
4513
4536
|
this.messages = [];
|
|
4514
4537
|
this.isLoading = false;
|
|
4515
4538
|
this.isTyping = false;
|
|
4516
4539
|
this.messageInput = "";
|
|
4517
|
-
this.
|
|
4540
|
+
this.currentPollTaskId = "";
|
|
4518
4541
|
this.isDragging = false;
|
|
4519
4542
|
this.dragOffset = { x: 0, y: 0 };
|
|
4520
4543
|
this.windowPosition = { x: 0, y: 0 };
|
|
4521
4544
|
this.fullscreenPosition = { x: 0 };
|
|
4522
|
-
this.showStarterQuestions = true;
|
|
4523
4545
|
this.parsedWelcomeMessages = [];
|
|
4524
4546
|
this.parsedStarterQuestions = [];
|
|
4525
4547
|
this.isFullscreen = false;
|
|
4548
|
+
this.showNewChatConfirmation = false;
|
|
4549
|
+
this.selectedFiles = [];
|
|
4550
|
+
this.isUploadingFiles = false;
|
|
4526
4551
|
this.chatWindowHeight = 600;
|
|
4527
4552
|
this.chatWindowWidth = 450;
|
|
4528
4553
|
this.chatWindowFullscreenWidth = 1024;
|
|
4554
|
+
this.positionInitialized = false;
|
|
4529
4555
|
this.handleMouseDown = (event) => {
|
|
4530
4556
|
if (!this.isFullscreen && window.innerWidth < OcsChat.MOBILE_BREAKPOINT)
|
|
4531
4557
|
return;
|
|
@@ -4570,11 +4596,11 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4570
4596
|
this.endDrag();
|
|
4571
4597
|
};
|
|
4572
4598
|
this.handleWindowResize = () => {
|
|
4599
|
+
this.positionInitialized = false;
|
|
4573
4600
|
this.initializePosition();
|
|
4574
4601
|
};
|
|
4575
4602
|
}
|
|
4576
4603
|
componentWillLoad() {
|
|
4577
|
-
this.loaded = this.visible;
|
|
4578
4604
|
if (!this.chatbotId) {
|
|
4579
4605
|
this.error = 'Chatbot ID is required';
|
|
4580
4606
|
return;
|
|
@@ -4585,13 +4611,22 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4585
4611
|
if (sessionId && messages) {
|
|
4586
4612
|
this.sessionId = sessionId;
|
|
4587
4613
|
this.messages = messages;
|
|
4588
|
-
this.showStarterQuestions = messages.length === 0;
|
|
4589
4614
|
}
|
|
4590
4615
|
}
|
|
4591
4616
|
this.parseWelcomeMessages();
|
|
4592
4617
|
this.parseStarterQuestions();
|
|
4593
4618
|
}
|
|
4594
4619
|
componentDidLoad() {
|
|
4620
|
+
const computedStyle = getComputedStyle(this.host);
|
|
4621
|
+
const windowHeightVar = computedStyle.getPropertyValue('--chat-window-height');
|
|
4622
|
+
const windowWidthVar = computedStyle.getPropertyValue('--chat-window-width');
|
|
4623
|
+
const fullscreenWidthVar = computedStyle.getPropertyValue('--chat-window-fullscreen-width');
|
|
4624
|
+
this.chatWindowHeight = varToPixels(windowHeightVar, window.innerHeight, this.chatWindowHeight);
|
|
4625
|
+
this.chatWindowWidth = varToPixels(windowWidthVar, window.innerWidth, this.chatWindowWidth);
|
|
4626
|
+
this.chatWindowFullscreenWidth = varToPixels(fullscreenWidthVar, window.innerWidth, this.chatWindowFullscreenWidth);
|
|
4627
|
+
if (this.visible) {
|
|
4628
|
+
this.initializePosition();
|
|
4629
|
+
}
|
|
4595
4630
|
// Only auto-start session if we don't have an existing one
|
|
4596
4631
|
if (this.visible && !this.sessionId) {
|
|
4597
4632
|
this.startSession();
|
|
@@ -4600,14 +4635,6 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4600
4635
|
// Resume polling for existing session
|
|
4601
4636
|
this.startPolling();
|
|
4602
4637
|
}
|
|
4603
|
-
const computedStyle = getComputedStyle(this.host);
|
|
4604
|
-
const windowHeightVar = computedStyle.getPropertyValue('--chat-window-height');
|
|
4605
|
-
const windowWidthVar = computedStyle.getPropertyValue('--chat-window-width');
|
|
4606
|
-
const fullscreenWidthVar = computedStyle.getPropertyValue('--chat-window-fullscreen-width');
|
|
4607
|
-
this.chatWindowHeight = varToPixels(windowHeightVar, window.innerHeight, this.chatWindowHeight);
|
|
4608
|
-
this.chatWindowWidth = varToPixels(windowWidthVar, window.innerWidth, this.chatWindowWidth);
|
|
4609
|
-
this.chatWindowFullscreenWidth = varToPixels(fullscreenWidthVar, window.innerWidth, this.chatWindowFullscreenWidth);
|
|
4610
|
-
this.initializePosition();
|
|
4611
4638
|
window.addEventListener('resize', this.handleWindowResize);
|
|
4612
4639
|
}
|
|
4613
4640
|
disconnectedCallback() {
|
|
@@ -4615,6 +4642,26 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4615
4642
|
this.removeEventListeners();
|
|
4616
4643
|
window.removeEventListener('resize', this.handleWindowResize);
|
|
4617
4644
|
}
|
|
4645
|
+
addErrorMessage(errorText) {
|
|
4646
|
+
const errorMessage = {
|
|
4647
|
+
created_at: new Date().toISOString(),
|
|
4648
|
+
role: 'system',
|
|
4649
|
+
content: `**Error:** ${errorText}\nPlease try again.`,
|
|
4650
|
+
attachments: []
|
|
4651
|
+
};
|
|
4652
|
+
this.messages = [...this.messages, errorMessage];
|
|
4653
|
+
this.saveSessionToStorage();
|
|
4654
|
+
this.scrollToBottom();
|
|
4655
|
+
}
|
|
4656
|
+
handleError(errorText) {
|
|
4657
|
+
// show as system message
|
|
4658
|
+
this.addErrorMessage(errorText);
|
|
4659
|
+
// Clear any loading/typing states
|
|
4660
|
+
this.isLoading = false;
|
|
4661
|
+
this.isTyping = false;
|
|
4662
|
+
this.isUploadingFiles = false;
|
|
4663
|
+
this.currentPollTaskId = '';
|
|
4664
|
+
}
|
|
4618
4665
|
parseJSONProp(propValue, propName) {
|
|
4619
4666
|
try {
|
|
4620
4667
|
if (propValue) {
|
|
@@ -4639,11 +4686,11 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4639
4686
|
this.parsedStarterQuestions = this.parseJSONProp(this.starterQuestions, 'starter questions');
|
|
4640
4687
|
}
|
|
4641
4688
|
cleanup() {
|
|
4642
|
-
if (this.
|
|
4643
|
-
clearInterval(this.
|
|
4644
|
-
this.
|
|
4689
|
+
if (this.pollingIntervalRef) {
|
|
4690
|
+
clearInterval(this.pollingIntervalRef);
|
|
4691
|
+
this.pollingIntervalRef = undefined;
|
|
4645
4692
|
}
|
|
4646
|
-
this.
|
|
4693
|
+
this.currentPollTaskId = '';
|
|
4647
4694
|
}
|
|
4648
4695
|
getApiBaseUrl() {
|
|
4649
4696
|
return this.apiBaseUrl || window.location.origin;
|
|
@@ -4661,7 +4708,6 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4661
4708
|
async startSession() {
|
|
4662
4709
|
try {
|
|
4663
4710
|
this.isLoading = true;
|
|
4664
|
-
this.error = '';
|
|
4665
4711
|
const userId = this.getOrGenerateUserId();
|
|
4666
4712
|
const requestBody = {
|
|
4667
4713
|
chatbot_id: this.chatbotId,
|
|
@@ -4680,7 +4726,8 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4680
4726
|
body: JSON.stringify(requestBody)
|
|
4681
4727
|
});
|
|
4682
4728
|
if (!response.ok) {
|
|
4683
|
-
|
|
4729
|
+
this.handleError(`Failed to start session: ${response.statusText}`);
|
|
4730
|
+
return;
|
|
4684
4731
|
}
|
|
4685
4732
|
const data = await response.json();
|
|
4686
4733
|
this.sessionId = data.session_id;
|
|
@@ -4688,24 +4735,99 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4688
4735
|
// Handle seed message if present
|
|
4689
4736
|
if (data.seed_message_task_id) {
|
|
4690
4737
|
this.isTyping = true; // Show typing indicator for seed message
|
|
4691
|
-
|
|
4738
|
+
this.currentPollTaskId = data.seed_message_task_id;
|
|
4739
|
+
await this.pollTaskResponse();
|
|
4692
4740
|
}
|
|
4693
4741
|
// Start polling for messages
|
|
4694
4742
|
this.startPolling();
|
|
4695
4743
|
}
|
|
4696
4744
|
catch (error) {
|
|
4697
|
-
this.
|
|
4745
|
+
this.handleError('Failed to start chat session');
|
|
4698
4746
|
}
|
|
4699
4747
|
finally {
|
|
4700
4748
|
this.isLoading = false;
|
|
4701
4749
|
}
|
|
4702
4750
|
}
|
|
4751
|
+
markPendingFilesWithError(errorMessage) {
|
|
4752
|
+
this.selectedFiles = this.selectedFiles.map(sf => {
|
|
4753
|
+
if (!sf.error && !sf.uploaded) {
|
|
4754
|
+
return Object.assign(Object.assign({}, sf), { error: errorMessage });
|
|
4755
|
+
}
|
|
4756
|
+
return sf;
|
|
4757
|
+
});
|
|
4758
|
+
}
|
|
4759
|
+
async uploadFiles() {
|
|
4760
|
+
if (this.selectedFiles.length === 0 || !this.sessionId || !this.allowAttachments) {
|
|
4761
|
+
return [];
|
|
4762
|
+
}
|
|
4763
|
+
this.isUploadingFiles = true;
|
|
4764
|
+
const uploadedIds = [];
|
|
4765
|
+
try {
|
|
4766
|
+
const formData = new FormData();
|
|
4767
|
+
// Add all files to form data
|
|
4768
|
+
for (const selectedFile of this.selectedFiles) {
|
|
4769
|
+
if (!selectedFile.error && !selectedFile.uploaded) {
|
|
4770
|
+
formData.append('files', selectedFile.file);
|
|
4771
|
+
}
|
|
4772
|
+
else if (selectedFile.uploaded) {
|
|
4773
|
+
uploadedIds.push(selectedFile.uploaded.id);
|
|
4774
|
+
}
|
|
4775
|
+
}
|
|
4776
|
+
// Add user ID and name to the form data
|
|
4777
|
+
const userId = this.getOrGenerateUserId();
|
|
4778
|
+
formData.append('participant_remote_id', userId);
|
|
4779
|
+
if (this.userName) {
|
|
4780
|
+
formData.append('participant_name', this.userName);
|
|
4781
|
+
}
|
|
4782
|
+
// Only upload if there are new files
|
|
4783
|
+
if (formData.has('files')) {
|
|
4784
|
+
const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/upload/`, {
|
|
4785
|
+
method: 'POST',
|
|
4786
|
+
body: formData,
|
|
4787
|
+
});
|
|
4788
|
+
if (!response.ok) {
|
|
4789
|
+
const errorData = await response.json();
|
|
4790
|
+
const errorMessage = errorData.error || 'Failed to upload files';
|
|
4791
|
+
this.markPendingFilesWithError(errorMessage);
|
|
4792
|
+
return uploadedIds;
|
|
4793
|
+
}
|
|
4794
|
+
const data = await response.json();
|
|
4795
|
+
// Update selected files with upload results
|
|
4796
|
+
let fileIndex = 0;
|
|
4797
|
+
this.selectedFiles = this.selectedFiles.map(sf => {
|
|
4798
|
+
if (!sf.error && !sf.uploaded) {
|
|
4799
|
+
return Object.assign(Object.assign({}, sf), { uploaded: data.files[fileIndex++] });
|
|
4800
|
+
}
|
|
4801
|
+
return sf;
|
|
4802
|
+
});
|
|
4803
|
+
uploadedIds.push(...data.files.map((f) => f.id));
|
|
4804
|
+
}
|
|
4805
|
+
return uploadedIds;
|
|
4806
|
+
}
|
|
4807
|
+
catch (error) {
|
|
4808
|
+
const errorMessage = error instanceof Error ? error.message : 'Failed to upload files';
|
|
4809
|
+
this.markPendingFilesWithError(errorMessage);
|
|
4810
|
+
return uploadedIds;
|
|
4811
|
+
}
|
|
4812
|
+
finally {
|
|
4813
|
+
this.isUploadingFiles = false;
|
|
4814
|
+
}
|
|
4815
|
+
}
|
|
4703
4816
|
async sendMessage(message) {
|
|
4704
4817
|
if (!this.sessionId || !message.trim())
|
|
4705
4818
|
return;
|
|
4706
|
-
// Hide starter questions on any user interaction
|
|
4707
|
-
this.showStarterQuestions = false;
|
|
4708
4819
|
try {
|
|
4820
|
+
let attachmentIds = [];
|
|
4821
|
+
if (this.allowAttachments && this.selectedFiles.length > 0) {
|
|
4822
|
+
attachmentIds = await this.uploadFiles();
|
|
4823
|
+
// Check if any files have errors after upload attempt
|
|
4824
|
+
const hasErrors = this.selectedFiles.some(sf => sf.error);
|
|
4825
|
+
if (hasErrors) {
|
|
4826
|
+
// Don't send the message, let user fix file issues first
|
|
4827
|
+
this.handleError('Please remove or fix file errors before sending your message.');
|
|
4828
|
+
return;
|
|
4829
|
+
}
|
|
4830
|
+
}
|
|
4709
4831
|
// If this is the first user message and there are welcome messages,
|
|
4710
4832
|
// add them to chat history as assistant messages
|
|
4711
4833
|
if (this.messages.length === 0 && this.parsedWelcomeMessages.length > 0) {
|
|
@@ -4718,23 +4840,36 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4718
4840
|
}));
|
|
4719
4841
|
this.messages = [...this.messages, ...welcomeMessages];
|
|
4720
4842
|
}
|
|
4721
|
-
// Add user message immediately
|
|
4843
|
+
// Add user message immediately with attachments info
|
|
4722
4844
|
const userMessage = {
|
|
4723
4845
|
created_at: new Date().toISOString(),
|
|
4724
4846
|
role: 'user',
|
|
4725
4847
|
content: message.trim(),
|
|
4726
|
-
attachments:
|
|
4848
|
+
attachments: this.allowAttachments ? this.selectedFiles
|
|
4849
|
+
.filter(sf => !sf.error && sf.uploaded)
|
|
4850
|
+
.map(sf => ({
|
|
4851
|
+
name: sf.file.name,
|
|
4852
|
+
content_type: sf.file.type,
|
|
4853
|
+
size: sf.file.size,
|
|
4854
|
+
})) : []
|
|
4727
4855
|
};
|
|
4728
4856
|
this.messages = [...this.messages, userMessage];
|
|
4729
4857
|
this.saveSessionToStorage();
|
|
4730
4858
|
this.messageInput = '';
|
|
4859
|
+
if (this.allowAttachments) {
|
|
4860
|
+
this.selectedFiles = []; // Clear selected files after sending
|
|
4861
|
+
}
|
|
4731
4862
|
this.scrollToBottom();
|
|
4732
4863
|
// Start typing indicator - it will stay on during task polling
|
|
4733
4864
|
this.isTyping = true;
|
|
4865
|
+
const requestBody = { message: message.trim() };
|
|
4866
|
+
if (this.allowAttachments && attachmentIds.length > 0) {
|
|
4867
|
+
requestBody.attachment_ids = attachmentIds;
|
|
4868
|
+
}
|
|
4734
4869
|
const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/message/`, {
|
|
4735
4870
|
method: 'POST',
|
|
4736
4871
|
headers: this.getApiHeaders(),
|
|
4737
|
-
body: JSON.stringify(
|
|
4872
|
+
body: JSON.stringify(requestBody)
|
|
4738
4873
|
});
|
|
4739
4874
|
if (!response.ok) {
|
|
4740
4875
|
throw new Error(`Failed to send message: ${response.statusText}`);
|
|
@@ -4744,27 +4879,28 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4744
4879
|
throw new Error(data.error || 'Failed to send message');
|
|
4745
4880
|
}
|
|
4746
4881
|
// Poll for the response - typing indicator will be managed in pollTaskResponse
|
|
4747
|
-
|
|
4882
|
+
this.currentPollTaskId = data.task_id;
|
|
4883
|
+
await this.pollTaskResponse();
|
|
4748
4884
|
}
|
|
4749
4885
|
catch (error) {
|
|
4750
|
-
|
|
4751
|
-
|
|
4752
|
-
this.isTyping = false;
|
|
4886
|
+
const errorText = error instanceof Error ? error.message : 'Failed to send message';
|
|
4887
|
+
this.handleError(errorText);
|
|
4753
4888
|
}
|
|
4754
4889
|
}
|
|
4755
4890
|
handleStarterQuestionClick(question) {
|
|
4756
4891
|
this.sendMessage(question);
|
|
4757
4892
|
}
|
|
4758
|
-
async pollTaskResponse(
|
|
4759
|
-
if (!this.sessionId)
|
|
4893
|
+
async pollTaskResponse() {
|
|
4894
|
+
if (!this.sessionId || !this.currentPollTaskId)
|
|
4760
4895
|
return;
|
|
4761
4896
|
// Stop message polling while task polling is active
|
|
4762
|
-
this.isTaskPolling = true;
|
|
4763
4897
|
this.pauseMessagePolling();
|
|
4764
4898
|
let attempts = 0;
|
|
4765
4899
|
const poll = async () => {
|
|
4900
|
+
if (!this.sessionId || !this.currentPollTaskId)
|
|
4901
|
+
return;
|
|
4766
4902
|
try {
|
|
4767
|
-
const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/${
|
|
4903
|
+
const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/${this.currentPollTaskId}/poll/`);
|
|
4768
4904
|
if (!response.ok) {
|
|
4769
4905
|
throw new Error(`Failed to poll task: ${response.statusText}`);
|
|
4770
4906
|
}
|
|
@@ -4778,7 +4914,7 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4778
4914
|
this.scrollToBottom();
|
|
4779
4915
|
// Task polling complete, clear typing indicator and resume message polling
|
|
4780
4916
|
this.isTyping = false;
|
|
4781
|
-
this.
|
|
4917
|
+
this.currentPollTaskId = '';
|
|
4782
4918
|
this.resumeMessagePolling();
|
|
4783
4919
|
this.focusInput();
|
|
4784
4920
|
return;
|
|
@@ -4788,36 +4924,47 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4788
4924
|
setTimeout(poll, OcsChat.TASK_POLLING_INTERVAL_MS);
|
|
4789
4925
|
}
|
|
4790
4926
|
else if (attempts >= OcsChat.TASK_POLLING_MAX_ATTEMPTS) {
|
|
4791
|
-
// Task polling timed out
|
|
4927
|
+
// Task polling timed out - add timeout message and resume polling
|
|
4928
|
+
const timeoutMessage = {
|
|
4929
|
+
created_at: new Date().toISOString(),
|
|
4930
|
+
role: 'system',
|
|
4931
|
+
content: 'The response is taking longer than expected. The system may be experiencing delays. Please try sending your message again.',
|
|
4932
|
+
attachments: []
|
|
4933
|
+
};
|
|
4934
|
+
this.messages = [...this.messages, timeoutMessage];
|
|
4935
|
+
this.saveSessionToStorage();
|
|
4936
|
+
this.scrollToBottom();
|
|
4937
|
+
// Clear typing indicator and resume message polling
|
|
4792
4938
|
this.isTyping = false;
|
|
4793
|
-
this.
|
|
4939
|
+
this.currentPollTaskId = '';
|
|
4794
4940
|
this.resumeMessagePolling();
|
|
4941
|
+
this.focusInput();
|
|
4795
4942
|
}
|
|
4796
4943
|
}
|
|
4797
4944
|
catch (error) {
|
|
4798
|
-
|
|
4799
|
-
|
|
4800
|
-
|
|
4801
|
-
this.
|
|
4945
|
+
const errorText = error instanceof Error ? error.message : 'Failed to get response';
|
|
4946
|
+
this.handleError(errorText);
|
|
4947
|
+
// Clear states and resume polling
|
|
4948
|
+
this.currentPollTaskId = '';
|
|
4802
4949
|
this.resumeMessagePolling();
|
|
4803
4950
|
}
|
|
4804
4951
|
};
|
|
4805
4952
|
await poll();
|
|
4806
4953
|
}
|
|
4807
4954
|
startPolling() {
|
|
4808
|
-
if (this.
|
|
4955
|
+
if (this.pollingIntervalRef)
|
|
4809
4956
|
return;
|
|
4810
|
-
this.
|
|
4957
|
+
this.pollingIntervalRef = setInterval(async () => {
|
|
4811
4958
|
// Only poll for messages if not currently polling for a task
|
|
4812
|
-
if (!this.
|
|
4959
|
+
if (!this.currentPollTaskId) {
|
|
4813
4960
|
await this.pollForMessages();
|
|
4814
4961
|
}
|
|
4815
4962
|
}, OcsChat.MESSAGE_POLLING_INTERVAL_MS);
|
|
4816
4963
|
}
|
|
4817
4964
|
pauseMessagePolling() {
|
|
4818
|
-
if (this.
|
|
4819
|
-
clearInterval(this.
|
|
4820
|
-
this.
|
|
4965
|
+
if (this.pollingIntervalRef) {
|
|
4966
|
+
clearInterval(this.pollingIntervalRef);
|
|
4967
|
+
this.pollingIntervalRef = undefined;
|
|
4821
4968
|
}
|
|
4822
4969
|
}
|
|
4823
4970
|
resumeMessagePolling() {
|
|
@@ -4842,15 +4989,11 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4842
4989
|
this.scrollToBottom();
|
|
4843
4990
|
this.focusInput();
|
|
4844
4991
|
}
|
|
4845
|
-
this.lastPollTime = new Date();
|
|
4846
4992
|
}
|
|
4847
|
-
catch (
|
|
4993
|
+
catch (_a) {
|
|
4848
4994
|
// Silently fail for polling
|
|
4849
4995
|
}
|
|
4850
4996
|
}
|
|
4851
|
-
clearError() {
|
|
4852
|
-
this.error = '';
|
|
4853
|
-
}
|
|
4854
4997
|
scrollToBottom() {
|
|
4855
4998
|
setTimeout(() => {
|
|
4856
4999
|
if (this.messageListRef) {
|
|
@@ -4873,22 +5016,90 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4873
5016
|
}
|
|
4874
5017
|
handleInputChange(event) {
|
|
4875
5018
|
this.messageInput = event.target.value;
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
|
|
5019
|
+
}
|
|
5020
|
+
handleFileSelect(event) {
|
|
5021
|
+
var _a;
|
|
5022
|
+
if (!this.allowAttachments)
|
|
5023
|
+
return;
|
|
5024
|
+
const input = event.target;
|
|
5025
|
+
if (!input.files || input.files.length === 0)
|
|
5026
|
+
return;
|
|
5027
|
+
const newFiles = [];
|
|
5028
|
+
let totalSize = this.selectedFiles.reduce((sum, f) => sum + f.file.size, 0);
|
|
5029
|
+
for (let i = 0; i < input.files.length; i++) {
|
|
5030
|
+
const file = input.files[i];
|
|
5031
|
+
const ext = '.' + ((_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
|
|
5032
|
+
if (!OcsChat.SUPPORTED_FILE_EXTENSIONS.includes(ext)) {
|
|
5033
|
+
newFiles.push({
|
|
5034
|
+
file,
|
|
5035
|
+
error: `File type ${ext} not supported`
|
|
5036
|
+
});
|
|
5037
|
+
continue;
|
|
5038
|
+
}
|
|
5039
|
+
const fileSizeMB = file.size / (1024 * 1024);
|
|
5040
|
+
if (fileSizeMB > OcsChat.MAX_FILE_SIZE_MB) {
|
|
5041
|
+
newFiles.push({
|
|
5042
|
+
file,
|
|
5043
|
+
error: `File exceeds ${OcsChat.MAX_FILE_SIZE_MB}MB limit`
|
|
5044
|
+
});
|
|
5045
|
+
continue;
|
|
5046
|
+
}
|
|
5047
|
+
totalSize += file.size;
|
|
5048
|
+
const totalSizeMB = totalSize / (1024 * 1024);
|
|
5049
|
+
if (totalSizeMB > OcsChat.MAX_TOTAL_SIZE_MB) {
|
|
5050
|
+
newFiles.push({
|
|
5051
|
+
file,
|
|
5052
|
+
error: `Total size exceeds ${OcsChat.MAX_TOTAL_SIZE_MB}MB limit`
|
|
5053
|
+
});
|
|
5054
|
+
continue;
|
|
5055
|
+
}
|
|
5056
|
+
newFiles.push({ file });
|
|
5057
|
+
}
|
|
5058
|
+
this.selectedFiles = [...this.selectedFiles, ...newFiles];
|
|
5059
|
+
input.value = '';
|
|
5060
|
+
}
|
|
5061
|
+
removeSelectedFile(index) {
|
|
5062
|
+
if (!this.allowAttachments)
|
|
5063
|
+
return;
|
|
5064
|
+
this.selectedFiles = this.selectedFiles.filter((_, i) => i !== index);
|
|
5065
|
+
}
|
|
5066
|
+
formatFileSize(bytes) {
|
|
5067
|
+
if (bytes === 0)
|
|
5068
|
+
return '0 KB';
|
|
5069
|
+
const k = 1024;
|
|
5070
|
+
if (bytes < k * k) {
|
|
5071
|
+
// Less than 1MB, show in KB
|
|
5072
|
+
return Math.round(bytes / k * 100) / 100 + ' KB';
|
|
5073
|
+
}
|
|
5074
|
+
else {
|
|
5075
|
+
return Math.round(bytes / (k * k) * 100) / 100 + ' MB';
|
|
4879
5076
|
}
|
|
4880
5077
|
}
|
|
4881
5078
|
formatTime(dateString) {
|
|
4882
5079
|
const date = new Date(dateString);
|
|
4883
5080
|
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
4884
5081
|
}
|
|
4885
|
-
|
|
5082
|
+
toggleWindowVisibility() {
|
|
4886
5083
|
this.visible = !this.visible;
|
|
4887
|
-
|
|
4888
|
-
|
|
4889
|
-
|
|
5084
|
+
}
|
|
5085
|
+
/**
|
|
5086
|
+
* Watch for changes to the `visible` attribute and update accordingly.
|
|
5087
|
+
*
|
|
5088
|
+
* @param visible - The new value for the field.
|
|
5089
|
+
*/
|
|
5090
|
+
async visibilityHandler(visible) {
|
|
5091
|
+
if (visible) {
|
|
5092
|
+
this.initializePosition();
|
|
5093
|
+
}
|
|
5094
|
+
if (visible && !this.sessionId) {
|
|
4890
5095
|
await this.startSession();
|
|
4891
5096
|
}
|
|
5097
|
+
else if (!visible) {
|
|
5098
|
+
this.pauseMessagePolling();
|
|
5099
|
+
}
|
|
5100
|
+
else {
|
|
5101
|
+
this.resumeMessagePolling();
|
|
5102
|
+
}
|
|
4892
5103
|
}
|
|
4893
5104
|
setPosition(position) {
|
|
4894
5105
|
if (position === this.position)
|
|
@@ -4908,6 +5119,7 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4908
5119
|
const actualChatWidth = Math.min(windowWidth, this.chatWindowFullscreenWidth);
|
|
4909
5120
|
const centeredX = (windowWidth - actualChatWidth) / 2;
|
|
4910
5121
|
const maxOffset = (windowWidth - actualChatWidth) / 2;
|
|
5122
|
+
console.log(windowWidth, actualChatWidth, centeredX, maxOffset);
|
|
4911
5123
|
return { windowWidth, actualChatWidth, centeredX, maxOffset };
|
|
4912
5124
|
}
|
|
4913
5125
|
getPositionStyles() {
|
|
@@ -4926,6 +5138,10 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
4926
5138
|
};
|
|
4927
5139
|
}
|
|
4928
5140
|
initializePosition() {
|
|
5141
|
+
if (this.positionInitialized) {
|
|
5142
|
+
return;
|
|
5143
|
+
}
|
|
5144
|
+
this.positionInitialized = true;
|
|
4929
5145
|
const windowWidth = window.innerWidth;
|
|
4930
5146
|
const windowHeight = window.innerHeight;
|
|
4931
5147
|
const chatWidth = windowWidth < OcsChat.MOBILE_BREAKPOINT ? windowWidth : this.chatWindowWidth;
|
|
@@ -5040,10 +5256,10 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
5040
5256
|
const iconSrc = hasCustomIcon ? this.iconUrl : this.getDefaultIconUrl();
|
|
5041
5257
|
const buttonClasses = this.getButtonClasses();
|
|
5042
5258
|
if (hasText) {
|
|
5043
|
-
return (h("button", { class: buttonClasses, onClick: () => this.
|
|
5259
|
+
return (h("button", { class: buttonClasses, onClick: () => this.toggleWindowVisibility(), "aria-label": `Open chat - ${this.buttonText}`, title: this.buttonText }, h("img", { src: iconSrc, alt: "" }), h("span", null, this.buttonText)));
|
|
5044
5260
|
}
|
|
5045
5261
|
else {
|
|
5046
|
-
return (h("button", { class: buttonClasses, onClick: () => this.
|
|
5262
|
+
return (h("button", { class: buttonClasses, onClick: () => this.toggleWindowVisibility(), "aria-label": "Open chat", title: "Open chat" }, h("img", { src: iconSrc, alt: "Chat" })));
|
|
5047
5263
|
}
|
|
5048
5264
|
}
|
|
5049
5265
|
getStorageKeys() {
|
|
@@ -5147,13 +5363,25 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
5147
5363
|
return false;
|
|
5148
5364
|
}
|
|
5149
5365
|
}
|
|
5150
|
-
|
|
5366
|
+
showConfirmationDialog() {
|
|
5367
|
+
this.showNewChatConfirmation = true;
|
|
5368
|
+
}
|
|
5369
|
+
hideConfirmationDialog() {
|
|
5370
|
+
this.showNewChatConfirmation = false;
|
|
5371
|
+
}
|
|
5372
|
+
async confirmNewChat() {
|
|
5373
|
+
this.hideConfirmationDialog();
|
|
5374
|
+
await this.actuallyStartNewChat();
|
|
5375
|
+
}
|
|
5376
|
+
async actuallyStartNewChat() {
|
|
5151
5377
|
this.clearSessionStorage();
|
|
5152
5378
|
this.sessionId = undefined;
|
|
5153
5379
|
this.messages = [];
|
|
5154
|
-
this.showStarterQuestions = true;
|
|
5155
5380
|
this.isTyping = false;
|
|
5156
|
-
this.
|
|
5381
|
+
this.currentPollTaskId = '';
|
|
5382
|
+
if (this.allowAttachments) {
|
|
5383
|
+
this.selectedFiles = [];
|
|
5384
|
+
}
|
|
5157
5385
|
this.cleanup();
|
|
5158
5386
|
await this.startSession();
|
|
5159
5387
|
}
|
|
@@ -5163,18 +5391,27 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
5163
5391
|
this.fullscreenPosition = { x: 0 };
|
|
5164
5392
|
}
|
|
5165
5393
|
render() {
|
|
5166
|
-
|
|
5394
|
+
// Only show error state for critical errors that prevent the widget from functioning
|
|
5395
|
+
if (this.error && !this.sessionId) {
|
|
5167
5396
|
return (h(Host, null, h("p", { class: "error-message" }, this.error)));
|
|
5168
5397
|
}
|
|
5169
|
-
return (h(Host, null, this.renderButton(), this.visible && (h("div", { ref: (el) => this.chatWindowRef = el, id: "ocs-chat-window", class: this.getPositionClasses(), style: this.getPositionStyles() }, h("div", { class: `chat-header ${this.isDragging ? 'chat-header-dragging' : 'chat-header-draggable'}`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { class: "drag-indicator" }, h("div", { class: "drag-dots header-button" }, h(GripDotsVerticalIcon, null))), h("div", { class: "header-text" }, this.headerText), h("div", { class: "header-buttons" }, this.allowFullScreen && h("button", { class: "header-button fullscreen-button", onClick: () => this.toggleFullscreen(), title: this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen", "aria-label": this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen" }, this.isFullscreen ? h(ArrowsPointingInIcon, null) : h(ArrowsPointingOutIcon, null)),
|
|
5398
|
+
return (h(Host, null, this.renderButton(), this.visible && (h("div", { ref: (el) => this.chatWindowRef = el, id: "ocs-chat-window", class: this.getPositionClasses(), style: this.getPositionStyles() }, h("div", { class: `chat-header ${this.isDragging ? 'chat-header-dragging' : 'chat-header-draggable'}`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { class: "drag-indicator" }, h("div", { class: "drag-dots header-button" }, h(GripDotsVerticalIcon, null))), h("div", { class: "header-text" }, this.headerText), h("div", { class: "header-buttons" }, this.messages.length > 0 && (h("button", { class: "header-button", onClick: () => this.showConfirmationDialog(), title: "Start new chat", "aria-label": "Start new chat" }, h(PlusWithCircleIcon, null))), this.allowFullScreen && h("button", { class: "header-button fullscreen-button", onClick: () => this.toggleFullscreen(), title: this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen", "aria-label": this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen" }, this.isFullscreen ? h(ArrowsPointingInIcon, null) : h(ArrowsPointingOutIcon, null)), h("button", { class: "header-button", onClick: () => this.visible = false, "aria-label": "Close" }, h(XMarkIcon, null)))), this.showNewChatConfirmation && (h("div", { class: "confirmation-overlay" }, h("div", { class: "confirmation-dialog" }, h("div", { class: "confirmation-content" }, h("h3", { class: "confirmation-title" }, "Start New Chat"), h("p", { class: "confirmation-message" }, this.newChatConfirmationMessage), h("div", { class: "confirmation-buttons" }, h("button", { class: "confirmation-button confirmation-button-cancel", onClick: () => this.hideConfirmationDialog() }, "Cancel"), h("button", { class: "confirmation-button confirmation-button-confirm", onClick: () => this.confirmNewChat() }, "Continue")))))), h("div", { class: "chat-content" }, this.isLoading && !this.sessionId && (h("div", { class: "loading-container" }, h("div", { class: "loading-spinner" }), h("span", { class: "loading-text" }, "Starting chat..."))), (h("div", { ref: (el) => this.messageListRef = el, class: "messages-container" }, this.messages.length === 0 && this.parsedWelcomeMessages.length > 0 && (h("div", { class: "welcome-messages" }, this.parsedWelcomeMessages.map((message, index) => (h("div", { key: `welcome-${index}`, class: "message-row message-row-assistant" }, h("div", { class: "message-bubble message-bubble-assistant" }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownSync(message) }))))))), this.messages.map((message, index) => (h("div", { key: index, class: `message-row ${message.role === 'user' ? 'message-row-user' : 'message-row-assistant'}` }, h("div", { class: `message-bubble ${message.role === 'user'
|
|
5170
5399
|
? 'message-bubble-user'
|
|
5171
5400
|
: message.role === 'assistant'
|
|
5172
5401
|
? 'message-bubble-assistant'
|
|
5173
|
-
: 'message-bubble-system'}` }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownSync(message.content) }), message.attachments && message.attachments.length > 0 && (h("div", { class: "message-attachments" }, message.attachments.map((attachment, attachmentIndex) => (h("
|
|
5402
|
+
: 'message-bubble-system'}` }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownSync(message.content) }), message.attachments && message.attachments.length > 0 && (h("div", { class: "message-attachments" }, message.attachments.map((attachment, attachmentIndex) => (h("div", { key: attachmentIndex, class: "flex items-center gap-[0.5em]" }, h("span", { class: "message-attachment-icon" }, h(PaperClipIcon, null)), h("span", { class: "message-attachment-name" }, attachment.name)))))), h("div", { class: "message-timestamp" }, this.formatTime(message.created_at)))))), this.isTyping && (h("div", null, h("div", { class: "typing-indicator" }, h("div", { class: "typing-progress" })), h("div", { class: "typing-text" }, h("span", null, this.typingIndicatorText), h("span", { class: "typing-dots" })))))), this.messages.length === 0 && this.parsedStarterQuestions.length > 0 && (h("div", { class: "starter-questions" }, this.parsedStarterQuestions.map((question, index) => (h("div", { key: `starter-${index}`, class: "starter-question-row" }, h("button", { class: "starter-question", onClick: () => this.handleStarterQuestionClick(question) }, question)))))), this.allowAttachments && this.selectedFiles.length > 0 && (h("div", { class: "selected-files-container" }, h("div", { class: "space-y-[0.25em]" }, this.selectedFiles.map((selectedFile, index) => (h("div", { key: index, class: "selected-file-item" }, h("div", { class: "flex items-center gap-[0.5em]" }, h("span", { class: "selected-file-icon" }, h(PaperClipIcon, null)), h("span", null, selectedFile.file.name), h("span", { class: "selected-file-size" }, "(", this.formatFileSize(selectedFile.file.size), ")"), selectedFile.error && (h("span", { class: "selected-file-error" }, selectedFile.error)), selectedFile.uploaded && (h("span", { class: "selected-file-success-icon" }, h(CheckDocumentIcon, null)))), h("button", { onClick: () => this.removeSelectedFile(index), class: "selected-file-remove-button", "aria-label": "Remove file" }, h(XIcon, null)))))))), this.sessionId && (h("div", { class: "input-area" }, h("div", { class: "input-container" }, h("textarea", { ref: (el) => this.textareaRef = el, class: "message-textarea", rows: 1, placeholder: "Type your message...", value: this.messageInput, onInput: (e) => this.handleInputChange(e), onKeyPress: (e) => this.handleKeyPress(e), disabled: this.isTyping || this.isUploadingFiles }), this.allowAttachments && (h("input", { ref: (el) => {
|
|
5403
|
+
// Unclear why but after removing all attachments this is being set to `null`.
|
|
5404
|
+
if (el) {
|
|
5405
|
+
this.fileInputRef = el;
|
|
5406
|
+
}
|
|
5407
|
+
}, id: "ocs-file-input", type: "file", multiple: true, accept: OcsChat.SUPPORTED_FILE_EXTENSIONS.join(','), onChange: (e) => this.handleFileSelect(e), class: "hidden" })), this.allowAttachments && (h("button", { class: "file-attachment-button", onClick: () => { var _a; return (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click(); }, disabled: this.isTyping || this.isUploadingFiles, title: "Attach files", "aria-label": "Attach files" }, h(PaperClipIcon, null))), h("button", { class: `send-button ${!this.isTyping && !!this.messageInput.trim()
|
|
5174
5408
|
? 'send-button-enabled'
|
|
5175
|
-
: 'send-button-disabled'}`, onClick: () => this.sendMessage(this.messageInput), disabled: this.isTyping || !this.messageInput.trim() },
|
|
5409
|
+
: 'send-button-disabled'}`, onClick: () => this.sendMessage(this.messageInput), disabled: this.isTyping || this.isUploadingFiles || !this.messageInput.trim() }, this.isUploadingFiles ? 'Uploading...' : 'Send')))), h("div", { class: "flex items-center justify-center text-[0.8em] font-light w-full text-slate-500 py-[2px]" }, h("p", null, "Powered by ", h("a", { class: "underline", href: "https://www.dimagi.com", target: "_blank" }, "Dimagi"))))))));
|
|
5176
5410
|
}
|
|
5177
5411
|
get host() { return this; }
|
|
5412
|
+
static get watchers() { return {
|
|
5413
|
+
"visible": ["visibilityHandler"]
|
|
5414
|
+
}; }
|
|
5178
5415
|
static get style() { return OpenChatStudioWidgetStyle0; }
|
|
5179
5416
|
}, [1, "open-chat-studio-widget", {
|
|
5180
5417
|
"chatbotId": [1, "chatbot-id"],
|
|
@@ -5183,6 +5420,7 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
5183
5420
|
"iconUrl": [1, "icon-url"],
|
|
5184
5421
|
"buttonShape": [1, "button-shape"],
|
|
5185
5422
|
"headerText": [1, "header-text"],
|
|
5423
|
+
"newChatConfirmationMessage": [1, "new-chat-confirmation-message"],
|
|
5186
5424
|
"visible": [1028],
|
|
5187
5425
|
"position": [1025],
|
|
5188
5426
|
"welcomeMessages": [1, "welcome-messages"],
|
|
@@ -5192,27 +5430,30 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
|
|
|
5192
5430
|
"persistentSession": [4, "persistent-session"],
|
|
5193
5431
|
"persistentSessionExpire": [2, "persistent-session-expire"],
|
|
5194
5432
|
"allowFullScreen": [4, "allow-full-screen"],
|
|
5195
|
-
"
|
|
5433
|
+
"allowAttachments": [4, "allow-attachments"],
|
|
5434
|
+
"typingIndicatorText": [1, "typing-indicator-text"],
|
|
5196
5435
|
"error": [32],
|
|
5197
5436
|
"messages": [32],
|
|
5198
5437
|
"sessionId": [32],
|
|
5199
5438
|
"isLoading": [32],
|
|
5200
5439
|
"isTyping": [32],
|
|
5201
5440
|
"messageInput": [32],
|
|
5202
|
-
"
|
|
5203
|
-
"lastPollTime": [32],
|
|
5204
|
-
"isTaskPolling": [32],
|
|
5441
|
+
"currentPollTaskId": [32],
|
|
5205
5442
|
"isDragging": [32],
|
|
5206
5443
|
"dragOffset": [32],
|
|
5207
5444
|
"windowPosition": [32],
|
|
5208
5445
|
"fullscreenPosition": [32],
|
|
5209
|
-
"showStarterQuestions": [32],
|
|
5210
5446
|
"parsedWelcomeMessages": [32],
|
|
5211
5447
|
"parsedStarterQuestions": [32],
|
|
5212
5448
|
"generatedUserId": [32],
|
|
5213
|
-
"isFullscreen": [32]
|
|
5449
|
+
"isFullscreen": [32],
|
|
5450
|
+
"showNewChatConfirmation": [32],
|
|
5451
|
+
"selectedFiles": [32],
|
|
5452
|
+
"isUploadingFiles": [32]
|
|
5453
|
+
}, undefined, {
|
|
5454
|
+
"visible": ["visibilityHandler"]
|
|
5214
5455
|
}]);
|
|
5215
|
-
OcsChat.TASK_POLLING_MAX_ATTEMPTS =
|
|
5456
|
+
OcsChat.TASK_POLLING_MAX_ATTEMPTS = 120;
|
|
5216
5457
|
OcsChat.TASK_POLLING_INTERVAL_MS = 1000;
|
|
5217
5458
|
OcsChat.MESSAGE_POLLING_INTERVAL_MS = 30000;
|
|
5218
5459
|
OcsChat.SCROLL_DELAY_MS = 100;
|
|
@@ -5220,6 +5461,10 @@ OcsChat.FOCUS_DELAY_MS = 100;
|
|
|
5220
5461
|
OcsChat.MOBILE_BREAKPOINT = 640;
|
|
5221
5462
|
OcsChat.WINDOW_MARGIN = 20;
|
|
5222
5463
|
OcsChat.LOCALSTORAGE_TEST_KEY = '__ocs_test__';
|
|
5464
|
+
OcsChat.MAX_FILE_SIZE_MB = 50;
|
|
5465
|
+
OcsChat.MAX_TOTAL_SIZE_MB = 50;
|
|
5466
|
+
OcsChat.SUPPORTED_FILE_EXTENSIONS = ['.txt', '.pdf', '.doc', '.docx', '.xls', '.xlsx', '.csv', '.jpg', '.jpeg',
|
|
5467
|
+
'.png', '.gif', '.bmp', '.webp', '.svg', '.mp4', '.mov', '.avi', '.mp3', '.wav'];
|
|
5223
5468
|
function defineCustomElement$1() {
|
|
5224
5469
|
if (typeof customElements === "undefined") {
|
|
5225
5470
|
return;
|