open-chat-studio-widget 0.4.5 → 0.4.7
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 +362 -110
- 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-78d09c6b.js → p-3dc66a9a.js} +3 -3
- package/dist/open-chat-studio-widget/p-3dc66a9a.js.map +1 -0
- package/dist/open-chat-studio-widget/p-6b9a332c.entry.js +4 -0
- package/dist/open-chat-studio-widget/p-6b9a332c.entry.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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h, r as registerInstance, H as Host, g as getElement } from './index-
|
|
1
|
+
import { h, r as registerInstance, H as Host, g as getElement } from './index-0349ca51.js';
|
|
2
2
|
|
|
3
3
|
const XMarkIcon = () => {
|
|
4
4
|
return h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" },
|
|
@@ -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 --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 = class {
|
|
@@ -4485,6 +4497,10 @@ const OcsChat = class {
|
|
|
4485
4497
|
* The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular.
|
|
4486
4498
|
*/
|
|
4487
4499
|
this.buttonShape = 'square';
|
|
4500
|
+
/**
|
|
4501
|
+
* The message to display in the new chat confirmation dialog.
|
|
4502
|
+
*/
|
|
4503
|
+
this.newChatConfirmationMessage = "Starting a new chat will clear your current conversation. Continue?";
|
|
4488
4504
|
/**
|
|
4489
4505
|
* Whether the chat widget is visible on load.
|
|
4490
4506
|
*/
|
|
@@ -4506,24 +4522,34 @@ const OcsChat = class {
|
|
|
4506
4522
|
* Allow the user to make the chat window full screen.
|
|
4507
4523
|
*/
|
|
4508
4524
|
this.allowFullScreen = true;
|
|
4509
|
-
|
|
4525
|
+
/**
|
|
4526
|
+
* Allow the user to attach files to their messages.
|
|
4527
|
+
*/
|
|
4528
|
+
this.allowAttachments = false;
|
|
4529
|
+
/**
|
|
4530
|
+
* The text to display while the assistant is typing/preparing a response.
|
|
4531
|
+
*/
|
|
4532
|
+
this.typingIndicatorText = "Preparing response";
|
|
4510
4533
|
this.error = "";
|
|
4511
4534
|
this.messages = [];
|
|
4512
4535
|
this.isLoading = false;
|
|
4513
4536
|
this.isTyping = false;
|
|
4514
4537
|
this.messageInput = "";
|
|
4515
|
-
this.
|
|
4538
|
+
this.currentPollTaskId = "";
|
|
4516
4539
|
this.isDragging = false;
|
|
4517
4540
|
this.dragOffset = { x: 0, y: 0 };
|
|
4518
4541
|
this.windowPosition = { x: 0, y: 0 };
|
|
4519
4542
|
this.fullscreenPosition = { x: 0 };
|
|
4520
|
-
this.showStarterQuestions = true;
|
|
4521
4543
|
this.parsedWelcomeMessages = [];
|
|
4522
4544
|
this.parsedStarterQuestions = [];
|
|
4523
4545
|
this.isFullscreen = false;
|
|
4546
|
+
this.showNewChatConfirmation = false;
|
|
4547
|
+
this.selectedFiles = [];
|
|
4548
|
+
this.isUploadingFiles = false;
|
|
4524
4549
|
this.chatWindowHeight = 600;
|
|
4525
4550
|
this.chatWindowWidth = 450;
|
|
4526
4551
|
this.chatWindowFullscreenWidth = 1024;
|
|
4552
|
+
this.positionInitialized = false;
|
|
4527
4553
|
this.handleMouseDown = (event) => {
|
|
4528
4554
|
if (!this.isFullscreen && window.innerWidth < OcsChat.MOBILE_BREAKPOINT)
|
|
4529
4555
|
return;
|
|
@@ -4568,11 +4594,11 @@ const OcsChat = class {
|
|
|
4568
4594
|
this.endDrag();
|
|
4569
4595
|
};
|
|
4570
4596
|
this.handleWindowResize = () => {
|
|
4597
|
+
this.positionInitialized = false;
|
|
4571
4598
|
this.initializePosition();
|
|
4572
4599
|
};
|
|
4573
4600
|
}
|
|
4574
4601
|
componentWillLoad() {
|
|
4575
|
-
this.loaded = this.visible;
|
|
4576
4602
|
if (!this.chatbotId) {
|
|
4577
4603
|
this.error = 'Chatbot ID is required';
|
|
4578
4604
|
return;
|
|
@@ -4583,13 +4609,22 @@ const OcsChat = class {
|
|
|
4583
4609
|
if (sessionId && messages) {
|
|
4584
4610
|
this.sessionId = sessionId;
|
|
4585
4611
|
this.messages = messages;
|
|
4586
|
-
this.showStarterQuestions = messages.length === 0;
|
|
4587
4612
|
}
|
|
4588
4613
|
}
|
|
4589
4614
|
this.parseWelcomeMessages();
|
|
4590
4615
|
this.parseStarterQuestions();
|
|
4591
4616
|
}
|
|
4592
4617
|
componentDidLoad() {
|
|
4618
|
+
const computedStyle = getComputedStyle(this.host);
|
|
4619
|
+
const windowHeightVar = computedStyle.getPropertyValue('--chat-window-height');
|
|
4620
|
+
const windowWidthVar = computedStyle.getPropertyValue('--chat-window-width');
|
|
4621
|
+
const fullscreenWidthVar = computedStyle.getPropertyValue('--chat-window-fullscreen-width');
|
|
4622
|
+
this.chatWindowHeight = varToPixels(windowHeightVar, window.innerHeight, this.chatWindowHeight);
|
|
4623
|
+
this.chatWindowWidth = varToPixels(windowWidthVar, window.innerWidth, this.chatWindowWidth);
|
|
4624
|
+
this.chatWindowFullscreenWidth = varToPixels(fullscreenWidthVar, window.innerWidth, this.chatWindowFullscreenWidth);
|
|
4625
|
+
if (this.visible) {
|
|
4626
|
+
this.initializePosition();
|
|
4627
|
+
}
|
|
4593
4628
|
// Only auto-start session if we don't have an existing one
|
|
4594
4629
|
if (this.visible && !this.sessionId) {
|
|
4595
4630
|
this.startSession();
|
|
@@ -4598,14 +4633,6 @@ const OcsChat = class {
|
|
|
4598
4633
|
// Resume polling for existing session
|
|
4599
4634
|
this.startPolling();
|
|
4600
4635
|
}
|
|
4601
|
-
const computedStyle = getComputedStyle(this.host);
|
|
4602
|
-
const windowHeightVar = computedStyle.getPropertyValue('--chat-window-height');
|
|
4603
|
-
const windowWidthVar = computedStyle.getPropertyValue('--chat-window-width');
|
|
4604
|
-
const fullscreenWidthVar = computedStyle.getPropertyValue('--chat-window-fullscreen-width');
|
|
4605
|
-
this.chatWindowHeight = varToPixels(windowHeightVar, window.innerHeight, this.chatWindowHeight);
|
|
4606
|
-
this.chatWindowWidth = varToPixels(windowWidthVar, window.innerWidth, this.chatWindowWidth);
|
|
4607
|
-
this.chatWindowFullscreenWidth = varToPixels(fullscreenWidthVar, window.innerWidth, this.chatWindowFullscreenWidth);
|
|
4608
|
-
this.initializePosition();
|
|
4609
4636
|
window.addEventListener('resize', this.handleWindowResize);
|
|
4610
4637
|
}
|
|
4611
4638
|
disconnectedCallback() {
|
|
@@ -4613,6 +4640,26 @@ const OcsChat = class {
|
|
|
4613
4640
|
this.removeEventListeners();
|
|
4614
4641
|
window.removeEventListener('resize', this.handleWindowResize);
|
|
4615
4642
|
}
|
|
4643
|
+
addErrorMessage(errorText) {
|
|
4644
|
+
const errorMessage = {
|
|
4645
|
+
created_at: new Date().toISOString(),
|
|
4646
|
+
role: 'system',
|
|
4647
|
+
content: `**Error:** ${errorText}\nPlease try again.`,
|
|
4648
|
+
attachments: []
|
|
4649
|
+
};
|
|
4650
|
+
this.messages = [...this.messages, errorMessage];
|
|
4651
|
+
this.saveSessionToStorage();
|
|
4652
|
+
this.scrollToBottom();
|
|
4653
|
+
}
|
|
4654
|
+
handleError(errorText) {
|
|
4655
|
+
// show as system message
|
|
4656
|
+
this.addErrorMessage(errorText);
|
|
4657
|
+
// Clear any loading/typing states
|
|
4658
|
+
this.isLoading = false;
|
|
4659
|
+
this.isTyping = false;
|
|
4660
|
+
this.isUploadingFiles = false;
|
|
4661
|
+
this.currentPollTaskId = '';
|
|
4662
|
+
}
|
|
4616
4663
|
parseJSONProp(propValue, propName) {
|
|
4617
4664
|
try {
|
|
4618
4665
|
if (propValue) {
|
|
@@ -4637,11 +4684,11 @@ const OcsChat = class {
|
|
|
4637
4684
|
this.parsedStarterQuestions = this.parseJSONProp(this.starterQuestions, 'starter questions');
|
|
4638
4685
|
}
|
|
4639
4686
|
cleanup() {
|
|
4640
|
-
if (this.
|
|
4641
|
-
clearInterval(this.
|
|
4642
|
-
this.
|
|
4687
|
+
if (this.pollingIntervalRef) {
|
|
4688
|
+
clearInterval(this.pollingIntervalRef);
|
|
4689
|
+
this.pollingIntervalRef = undefined;
|
|
4643
4690
|
}
|
|
4644
|
-
this.
|
|
4691
|
+
this.currentPollTaskId = '';
|
|
4645
4692
|
}
|
|
4646
4693
|
getApiBaseUrl() {
|
|
4647
4694
|
return this.apiBaseUrl || window.location.origin;
|
|
@@ -4659,7 +4706,6 @@ const OcsChat = class {
|
|
|
4659
4706
|
async startSession() {
|
|
4660
4707
|
try {
|
|
4661
4708
|
this.isLoading = true;
|
|
4662
|
-
this.error = '';
|
|
4663
4709
|
const userId = this.getOrGenerateUserId();
|
|
4664
4710
|
const requestBody = {
|
|
4665
4711
|
chatbot_id: this.chatbotId,
|
|
@@ -4678,7 +4724,8 @@ const OcsChat = class {
|
|
|
4678
4724
|
body: JSON.stringify(requestBody)
|
|
4679
4725
|
});
|
|
4680
4726
|
if (!response.ok) {
|
|
4681
|
-
|
|
4727
|
+
this.handleError(`Failed to start session: ${response.statusText}`);
|
|
4728
|
+
return;
|
|
4682
4729
|
}
|
|
4683
4730
|
const data = await response.json();
|
|
4684
4731
|
this.sessionId = data.session_id;
|
|
@@ -4686,24 +4733,99 @@ const OcsChat = class {
|
|
|
4686
4733
|
// Handle seed message if present
|
|
4687
4734
|
if (data.seed_message_task_id) {
|
|
4688
4735
|
this.isTyping = true; // Show typing indicator for seed message
|
|
4689
|
-
|
|
4736
|
+
this.currentPollTaskId = data.seed_message_task_id;
|
|
4737
|
+
await this.pollTaskResponse();
|
|
4690
4738
|
}
|
|
4691
4739
|
// Start polling for messages
|
|
4692
4740
|
this.startPolling();
|
|
4693
4741
|
}
|
|
4694
4742
|
catch (error) {
|
|
4695
|
-
this.
|
|
4743
|
+
this.handleError('Failed to start chat session');
|
|
4696
4744
|
}
|
|
4697
4745
|
finally {
|
|
4698
4746
|
this.isLoading = false;
|
|
4699
4747
|
}
|
|
4700
4748
|
}
|
|
4749
|
+
markPendingFilesWithError(errorMessage) {
|
|
4750
|
+
this.selectedFiles = this.selectedFiles.map(sf => {
|
|
4751
|
+
if (!sf.error && !sf.uploaded) {
|
|
4752
|
+
return Object.assign(Object.assign({}, sf), { error: errorMessage });
|
|
4753
|
+
}
|
|
4754
|
+
return sf;
|
|
4755
|
+
});
|
|
4756
|
+
}
|
|
4757
|
+
async uploadFiles() {
|
|
4758
|
+
if (this.selectedFiles.length === 0 || !this.sessionId || !this.allowAttachments) {
|
|
4759
|
+
return [];
|
|
4760
|
+
}
|
|
4761
|
+
this.isUploadingFiles = true;
|
|
4762
|
+
const uploadedIds = [];
|
|
4763
|
+
try {
|
|
4764
|
+
const formData = new FormData();
|
|
4765
|
+
// Add all files to form data
|
|
4766
|
+
for (const selectedFile of this.selectedFiles) {
|
|
4767
|
+
if (!selectedFile.error && !selectedFile.uploaded) {
|
|
4768
|
+
formData.append('files', selectedFile.file);
|
|
4769
|
+
}
|
|
4770
|
+
else if (selectedFile.uploaded) {
|
|
4771
|
+
uploadedIds.push(selectedFile.uploaded.id);
|
|
4772
|
+
}
|
|
4773
|
+
}
|
|
4774
|
+
// Add user ID and name to the form data
|
|
4775
|
+
const userId = this.getOrGenerateUserId();
|
|
4776
|
+
formData.append('participant_remote_id', userId);
|
|
4777
|
+
if (this.userName) {
|
|
4778
|
+
formData.append('participant_name', this.userName);
|
|
4779
|
+
}
|
|
4780
|
+
// Only upload if there are new files
|
|
4781
|
+
if (formData.has('files')) {
|
|
4782
|
+
const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/upload/`, {
|
|
4783
|
+
method: 'POST',
|
|
4784
|
+
body: formData,
|
|
4785
|
+
});
|
|
4786
|
+
if (!response.ok) {
|
|
4787
|
+
const errorData = await response.json();
|
|
4788
|
+
const errorMessage = errorData.error || 'Failed to upload files';
|
|
4789
|
+
this.markPendingFilesWithError(errorMessage);
|
|
4790
|
+
return uploadedIds;
|
|
4791
|
+
}
|
|
4792
|
+
const data = await response.json();
|
|
4793
|
+
// Update selected files with upload results
|
|
4794
|
+
let fileIndex = 0;
|
|
4795
|
+
this.selectedFiles = this.selectedFiles.map(sf => {
|
|
4796
|
+
if (!sf.error && !sf.uploaded) {
|
|
4797
|
+
return Object.assign(Object.assign({}, sf), { uploaded: data.files[fileIndex++] });
|
|
4798
|
+
}
|
|
4799
|
+
return sf;
|
|
4800
|
+
});
|
|
4801
|
+
uploadedIds.push(...data.files.map((f) => f.id));
|
|
4802
|
+
}
|
|
4803
|
+
return uploadedIds;
|
|
4804
|
+
}
|
|
4805
|
+
catch (error) {
|
|
4806
|
+
const errorMessage = error instanceof Error ? error.message : 'Failed to upload files';
|
|
4807
|
+
this.markPendingFilesWithError(errorMessage);
|
|
4808
|
+
return uploadedIds;
|
|
4809
|
+
}
|
|
4810
|
+
finally {
|
|
4811
|
+
this.isUploadingFiles = false;
|
|
4812
|
+
}
|
|
4813
|
+
}
|
|
4701
4814
|
async sendMessage(message) {
|
|
4702
4815
|
if (!this.sessionId || !message.trim())
|
|
4703
4816
|
return;
|
|
4704
|
-
// Hide starter questions on any user interaction
|
|
4705
|
-
this.showStarterQuestions = false;
|
|
4706
4817
|
try {
|
|
4818
|
+
let attachmentIds = [];
|
|
4819
|
+
if (this.allowAttachments && this.selectedFiles.length > 0) {
|
|
4820
|
+
attachmentIds = await this.uploadFiles();
|
|
4821
|
+
// Check if any files have errors after upload attempt
|
|
4822
|
+
const hasErrors = this.selectedFiles.some(sf => sf.error);
|
|
4823
|
+
if (hasErrors) {
|
|
4824
|
+
// Don't send the message, let user fix file issues first
|
|
4825
|
+
this.handleError('Please remove or fix file errors before sending your message.');
|
|
4826
|
+
return;
|
|
4827
|
+
}
|
|
4828
|
+
}
|
|
4707
4829
|
// If this is the first user message and there are welcome messages,
|
|
4708
4830
|
// add them to chat history as assistant messages
|
|
4709
4831
|
if (this.messages.length === 0 && this.parsedWelcomeMessages.length > 0) {
|
|
@@ -4716,23 +4838,36 @@ const OcsChat = class {
|
|
|
4716
4838
|
}));
|
|
4717
4839
|
this.messages = [...this.messages, ...welcomeMessages];
|
|
4718
4840
|
}
|
|
4719
|
-
// Add user message immediately
|
|
4841
|
+
// Add user message immediately with attachments info
|
|
4720
4842
|
const userMessage = {
|
|
4721
4843
|
created_at: new Date().toISOString(),
|
|
4722
4844
|
role: 'user',
|
|
4723
4845
|
content: message.trim(),
|
|
4724
|
-
attachments:
|
|
4846
|
+
attachments: this.allowAttachments ? this.selectedFiles
|
|
4847
|
+
.filter(sf => !sf.error && sf.uploaded)
|
|
4848
|
+
.map(sf => ({
|
|
4849
|
+
name: sf.file.name,
|
|
4850
|
+
content_type: sf.file.type,
|
|
4851
|
+
size: sf.file.size,
|
|
4852
|
+
})) : []
|
|
4725
4853
|
};
|
|
4726
4854
|
this.messages = [...this.messages, userMessage];
|
|
4727
4855
|
this.saveSessionToStorage();
|
|
4728
4856
|
this.messageInput = '';
|
|
4857
|
+
if (this.allowAttachments) {
|
|
4858
|
+
this.selectedFiles = []; // Clear selected files after sending
|
|
4859
|
+
}
|
|
4729
4860
|
this.scrollToBottom();
|
|
4730
4861
|
// Start typing indicator - it will stay on during task polling
|
|
4731
4862
|
this.isTyping = true;
|
|
4863
|
+
const requestBody = { message: message.trim() };
|
|
4864
|
+
if (this.allowAttachments && attachmentIds.length > 0) {
|
|
4865
|
+
requestBody.attachment_ids = attachmentIds;
|
|
4866
|
+
}
|
|
4732
4867
|
const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/message/`, {
|
|
4733
4868
|
method: 'POST',
|
|
4734
4869
|
headers: this.getApiHeaders(),
|
|
4735
|
-
body: JSON.stringify(
|
|
4870
|
+
body: JSON.stringify(requestBody)
|
|
4736
4871
|
});
|
|
4737
4872
|
if (!response.ok) {
|
|
4738
4873
|
throw new Error(`Failed to send message: ${response.statusText}`);
|
|
@@ -4742,27 +4877,28 @@ const OcsChat = class {
|
|
|
4742
4877
|
throw new Error(data.error || 'Failed to send message');
|
|
4743
4878
|
}
|
|
4744
4879
|
// Poll for the response - typing indicator will be managed in pollTaskResponse
|
|
4745
|
-
|
|
4880
|
+
this.currentPollTaskId = data.task_id;
|
|
4881
|
+
await this.pollTaskResponse();
|
|
4746
4882
|
}
|
|
4747
4883
|
catch (error) {
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
this.isTyping = false;
|
|
4884
|
+
const errorText = error instanceof Error ? error.message : 'Failed to send message';
|
|
4885
|
+
this.handleError(errorText);
|
|
4751
4886
|
}
|
|
4752
4887
|
}
|
|
4753
4888
|
handleStarterQuestionClick(question) {
|
|
4754
4889
|
this.sendMessage(question);
|
|
4755
4890
|
}
|
|
4756
|
-
async pollTaskResponse(
|
|
4757
|
-
if (!this.sessionId)
|
|
4891
|
+
async pollTaskResponse() {
|
|
4892
|
+
if (!this.sessionId || !this.currentPollTaskId)
|
|
4758
4893
|
return;
|
|
4759
4894
|
// Stop message polling while task polling is active
|
|
4760
|
-
this.isTaskPolling = true;
|
|
4761
4895
|
this.pauseMessagePolling();
|
|
4762
4896
|
let attempts = 0;
|
|
4763
4897
|
const poll = async () => {
|
|
4898
|
+
if (!this.sessionId || !this.currentPollTaskId)
|
|
4899
|
+
return;
|
|
4764
4900
|
try {
|
|
4765
|
-
const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/${
|
|
4901
|
+
const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/${this.currentPollTaskId}/poll/`);
|
|
4766
4902
|
if (!response.ok) {
|
|
4767
4903
|
throw new Error(`Failed to poll task: ${response.statusText}`);
|
|
4768
4904
|
}
|
|
@@ -4776,7 +4912,7 @@ const OcsChat = class {
|
|
|
4776
4912
|
this.scrollToBottom();
|
|
4777
4913
|
// Task polling complete, clear typing indicator and resume message polling
|
|
4778
4914
|
this.isTyping = false;
|
|
4779
|
-
this.
|
|
4915
|
+
this.currentPollTaskId = '';
|
|
4780
4916
|
this.resumeMessagePolling();
|
|
4781
4917
|
this.focusInput();
|
|
4782
4918
|
return;
|
|
@@ -4786,36 +4922,47 @@ const OcsChat = class {
|
|
|
4786
4922
|
setTimeout(poll, OcsChat.TASK_POLLING_INTERVAL_MS);
|
|
4787
4923
|
}
|
|
4788
4924
|
else if (attempts >= OcsChat.TASK_POLLING_MAX_ATTEMPTS) {
|
|
4789
|
-
// Task polling timed out
|
|
4925
|
+
// Task polling timed out - add timeout message and resume polling
|
|
4926
|
+
const timeoutMessage = {
|
|
4927
|
+
created_at: new Date().toISOString(),
|
|
4928
|
+
role: 'system',
|
|
4929
|
+
content: 'The response is taking longer than expected. The system may be experiencing delays. Please try sending your message again.',
|
|
4930
|
+
attachments: []
|
|
4931
|
+
};
|
|
4932
|
+
this.messages = [...this.messages, timeoutMessage];
|
|
4933
|
+
this.saveSessionToStorage();
|
|
4934
|
+
this.scrollToBottom();
|
|
4935
|
+
// Clear typing indicator and resume message polling
|
|
4790
4936
|
this.isTyping = false;
|
|
4791
|
-
this.
|
|
4937
|
+
this.currentPollTaskId = '';
|
|
4792
4938
|
this.resumeMessagePolling();
|
|
4939
|
+
this.focusInput();
|
|
4793
4940
|
}
|
|
4794
4941
|
}
|
|
4795
4942
|
catch (error) {
|
|
4796
|
-
|
|
4797
|
-
|
|
4798
|
-
|
|
4799
|
-
this.
|
|
4943
|
+
const errorText = error instanceof Error ? error.message : 'Failed to get response';
|
|
4944
|
+
this.handleError(errorText);
|
|
4945
|
+
// Clear states and resume polling
|
|
4946
|
+
this.currentPollTaskId = '';
|
|
4800
4947
|
this.resumeMessagePolling();
|
|
4801
4948
|
}
|
|
4802
4949
|
};
|
|
4803
4950
|
await poll();
|
|
4804
4951
|
}
|
|
4805
4952
|
startPolling() {
|
|
4806
|
-
if (this.
|
|
4953
|
+
if (this.pollingIntervalRef)
|
|
4807
4954
|
return;
|
|
4808
|
-
this.
|
|
4955
|
+
this.pollingIntervalRef = setInterval(async () => {
|
|
4809
4956
|
// Only poll for messages if not currently polling for a task
|
|
4810
|
-
if (!this.
|
|
4957
|
+
if (!this.currentPollTaskId) {
|
|
4811
4958
|
await this.pollForMessages();
|
|
4812
4959
|
}
|
|
4813
4960
|
}, OcsChat.MESSAGE_POLLING_INTERVAL_MS);
|
|
4814
4961
|
}
|
|
4815
4962
|
pauseMessagePolling() {
|
|
4816
|
-
if (this.
|
|
4817
|
-
clearInterval(this.
|
|
4818
|
-
this.
|
|
4963
|
+
if (this.pollingIntervalRef) {
|
|
4964
|
+
clearInterval(this.pollingIntervalRef);
|
|
4965
|
+
this.pollingIntervalRef = undefined;
|
|
4819
4966
|
}
|
|
4820
4967
|
}
|
|
4821
4968
|
resumeMessagePolling() {
|
|
@@ -4840,15 +4987,11 @@ const OcsChat = class {
|
|
|
4840
4987
|
this.scrollToBottom();
|
|
4841
4988
|
this.focusInput();
|
|
4842
4989
|
}
|
|
4843
|
-
this.lastPollTime = new Date();
|
|
4844
4990
|
}
|
|
4845
|
-
catch (
|
|
4991
|
+
catch (_a) {
|
|
4846
4992
|
// Silently fail for polling
|
|
4847
4993
|
}
|
|
4848
4994
|
}
|
|
4849
|
-
clearError() {
|
|
4850
|
-
this.error = '';
|
|
4851
|
-
}
|
|
4852
4995
|
scrollToBottom() {
|
|
4853
4996
|
setTimeout(() => {
|
|
4854
4997
|
if (this.messageListRef) {
|
|
@@ -4871,22 +5014,90 @@ const OcsChat = class {
|
|
|
4871
5014
|
}
|
|
4872
5015
|
handleInputChange(event) {
|
|
4873
5016
|
this.messageInput = event.target.value;
|
|
4874
|
-
|
|
4875
|
-
|
|
4876
|
-
|
|
5017
|
+
}
|
|
5018
|
+
handleFileSelect(event) {
|
|
5019
|
+
var _a;
|
|
5020
|
+
if (!this.allowAttachments)
|
|
5021
|
+
return;
|
|
5022
|
+
const input = event.target;
|
|
5023
|
+
if (!input.files || input.files.length === 0)
|
|
5024
|
+
return;
|
|
5025
|
+
const newFiles = [];
|
|
5026
|
+
let totalSize = this.selectedFiles.reduce((sum, f) => sum + f.file.size, 0);
|
|
5027
|
+
for (let i = 0; i < input.files.length; i++) {
|
|
5028
|
+
const file = input.files[i];
|
|
5029
|
+
const ext = '.' + ((_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
|
|
5030
|
+
if (!OcsChat.SUPPORTED_FILE_EXTENSIONS.includes(ext)) {
|
|
5031
|
+
newFiles.push({
|
|
5032
|
+
file,
|
|
5033
|
+
error: `File type ${ext} not supported`
|
|
5034
|
+
});
|
|
5035
|
+
continue;
|
|
5036
|
+
}
|
|
5037
|
+
const fileSizeMB = file.size / (1024 * 1024);
|
|
5038
|
+
if (fileSizeMB > OcsChat.MAX_FILE_SIZE_MB) {
|
|
5039
|
+
newFiles.push({
|
|
5040
|
+
file,
|
|
5041
|
+
error: `File exceeds ${OcsChat.MAX_FILE_SIZE_MB}MB limit`
|
|
5042
|
+
});
|
|
5043
|
+
continue;
|
|
5044
|
+
}
|
|
5045
|
+
totalSize += file.size;
|
|
5046
|
+
const totalSizeMB = totalSize / (1024 * 1024);
|
|
5047
|
+
if (totalSizeMB > OcsChat.MAX_TOTAL_SIZE_MB) {
|
|
5048
|
+
newFiles.push({
|
|
5049
|
+
file,
|
|
5050
|
+
error: `Total size exceeds ${OcsChat.MAX_TOTAL_SIZE_MB}MB limit`
|
|
5051
|
+
});
|
|
5052
|
+
continue;
|
|
5053
|
+
}
|
|
5054
|
+
newFiles.push({ file });
|
|
5055
|
+
}
|
|
5056
|
+
this.selectedFiles = [...this.selectedFiles, ...newFiles];
|
|
5057
|
+
input.value = '';
|
|
5058
|
+
}
|
|
5059
|
+
removeSelectedFile(index) {
|
|
5060
|
+
if (!this.allowAttachments)
|
|
5061
|
+
return;
|
|
5062
|
+
this.selectedFiles = this.selectedFiles.filter((_, i) => i !== index);
|
|
5063
|
+
}
|
|
5064
|
+
formatFileSize(bytes) {
|
|
5065
|
+
if (bytes === 0)
|
|
5066
|
+
return '0 KB';
|
|
5067
|
+
const k = 1024;
|
|
5068
|
+
if (bytes < k * k) {
|
|
5069
|
+
// Less than 1MB, show in KB
|
|
5070
|
+
return Math.round(bytes / k * 100) / 100 + ' KB';
|
|
5071
|
+
}
|
|
5072
|
+
else {
|
|
5073
|
+
return Math.round(bytes / (k * k) * 100) / 100 + ' MB';
|
|
4877
5074
|
}
|
|
4878
5075
|
}
|
|
4879
5076
|
formatTime(dateString) {
|
|
4880
5077
|
const date = new Date(dateString);
|
|
4881
5078
|
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
4882
5079
|
}
|
|
4883
|
-
|
|
5080
|
+
toggleWindowVisibility() {
|
|
4884
5081
|
this.visible = !this.visible;
|
|
4885
|
-
|
|
4886
|
-
|
|
4887
|
-
|
|
5082
|
+
}
|
|
5083
|
+
/**
|
|
5084
|
+
* Watch for changes to the `visible` attribute and update accordingly.
|
|
5085
|
+
*
|
|
5086
|
+
* @param visible - The new value for the field.
|
|
5087
|
+
*/
|
|
5088
|
+
async visibilityHandler(visible) {
|
|
5089
|
+
if (visible) {
|
|
5090
|
+
this.initializePosition();
|
|
5091
|
+
}
|
|
5092
|
+
if (visible && !this.sessionId) {
|
|
4888
5093
|
await this.startSession();
|
|
4889
5094
|
}
|
|
5095
|
+
else if (!visible) {
|
|
5096
|
+
this.pauseMessagePolling();
|
|
5097
|
+
}
|
|
5098
|
+
else {
|
|
5099
|
+
this.resumeMessagePolling();
|
|
5100
|
+
}
|
|
4890
5101
|
}
|
|
4891
5102
|
setPosition(position) {
|
|
4892
5103
|
if (position === this.position)
|
|
@@ -4906,6 +5117,7 @@ const OcsChat = class {
|
|
|
4906
5117
|
const actualChatWidth = Math.min(windowWidth, this.chatWindowFullscreenWidth);
|
|
4907
5118
|
const centeredX = (windowWidth - actualChatWidth) / 2;
|
|
4908
5119
|
const maxOffset = (windowWidth - actualChatWidth) / 2;
|
|
5120
|
+
console.log(windowWidth, actualChatWidth, centeredX, maxOffset);
|
|
4909
5121
|
return { windowWidth, actualChatWidth, centeredX, maxOffset };
|
|
4910
5122
|
}
|
|
4911
5123
|
getPositionStyles() {
|
|
@@ -4924,6 +5136,10 @@ const OcsChat = class {
|
|
|
4924
5136
|
};
|
|
4925
5137
|
}
|
|
4926
5138
|
initializePosition() {
|
|
5139
|
+
if (this.positionInitialized) {
|
|
5140
|
+
return;
|
|
5141
|
+
}
|
|
5142
|
+
this.positionInitialized = true;
|
|
4927
5143
|
const windowWidth = window.innerWidth;
|
|
4928
5144
|
const windowHeight = window.innerHeight;
|
|
4929
5145
|
const chatWidth = windowWidth < OcsChat.MOBILE_BREAKPOINT ? windowWidth : this.chatWindowWidth;
|
|
@@ -5038,10 +5254,10 @@ const OcsChat = class {
|
|
|
5038
5254
|
const iconSrc = hasCustomIcon ? this.iconUrl : this.getDefaultIconUrl();
|
|
5039
5255
|
const buttonClasses = this.getButtonClasses();
|
|
5040
5256
|
if (hasText) {
|
|
5041
|
-
return (h("button", { class: buttonClasses, onClick: () => this.
|
|
5257
|
+
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)));
|
|
5042
5258
|
}
|
|
5043
5259
|
else {
|
|
5044
|
-
return (h("button", { class: buttonClasses, onClick: () => this.
|
|
5260
|
+
return (h("button", { class: buttonClasses, onClick: () => this.toggleWindowVisibility(), "aria-label": "Open chat", title: "Open chat" }, h("img", { src: iconSrc, alt: "Chat" })));
|
|
5045
5261
|
}
|
|
5046
5262
|
}
|
|
5047
5263
|
getStorageKeys() {
|
|
@@ -5145,13 +5361,25 @@ const OcsChat = class {
|
|
|
5145
5361
|
return false;
|
|
5146
5362
|
}
|
|
5147
5363
|
}
|
|
5148
|
-
|
|
5364
|
+
showConfirmationDialog() {
|
|
5365
|
+
this.showNewChatConfirmation = true;
|
|
5366
|
+
}
|
|
5367
|
+
hideConfirmationDialog() {
|
|
5368
|
+
this.showNewChatConfirmation = false;
|
|
5369
|
+
}
|
|
5370
|
+
async confirmNewChat() {
|
|
5371
|
+
this.hideConfirmationDialog();
|
|
5372
|
+
await this.actuallyStartNewChat();
|
|
5373
|
+
}
|
|
5374
|
+
async actuallyStartNewChat() {
|
|
5149
5375
|
this.clearSessionStorage();
|
|
5150
5376
|
this.sessionId = undefined;
|
|
5151
5377
|
this.messages = [];
|
|
5152
|
-
this.showStarterQuestions = true;
|
|
5153
5378
|
this.isTyping = false;
|
|
5154
|
-
this.
|
|
5379
|
+
this.currentPollTaskId = '';
|
|
5380
|
+
if (this.allowAttachments) {
|
|
5381
|
+
this.selectedFiles = [];
|
|
5382
|
+
}
|
|
5155
5383
|
this.cleanup();
|
|
5156
5384
|
await this.startSession();
|
|
5157
5385
|
}
|
|
@@ -5161,20 +5389,29 @@ const OcsChat = class {
|
|
|
5161
5389
|
this.fullscreenPosition = { x: 0 };
|
|
5162
5390
|
}
|
|
5163
5391
|
render() {
|
|
5164
|
-
|
|
5392
|
+
// Only show error state for critical errors that prevent the widget from functioning
|
|
5393
|
+
if (this.error && !this.sessionId) {
|
|
5165
5394
|
return (h(Host, null, h("p", { class: "error-message" }, this.error)));
|
|
5166
5395
|
}
|
|
5167
|
-
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)),
|
|
5396
|
+
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'
|
|
5168
5397
|
? 'message-bubble-user'
|
|
5169
5398
|
: message.role === 'assistant'
|
|
5170
5399
|
? 'message-bubble-assistant'
|
|
5171
|
-
: '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("
|
|
5400
|
+
: '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) => {
|
|
5401
|
+
// Unclear why but after removing all attachments this is being set to `null`.
|
|
5402
|
+
if (el) {
|
|
5403
|
+
this.fileInputRef = el;
|
|
5404
|
+
}
|
|
5405
|
+
}, 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()
|
|
5172
5406
|
? 'send-button-enabled'
|
|
5173
|
-
: 'send-button-disabled'}`, onClick: () => this.sendMessage(this.messageInput), disabled: this.isTyping || !this.messageInput.trim() },
|
|
5407
|
+
: '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"))))))));
|
|
5174
5408
|
}
|
|
5175
5409
|
get host() { return getElement(this); }
|
|
5410
|
+
static get watchers() { return {
|
|
5411
|
+
"visible": ["visibilityHandler"]
|
|
5412
|
+
}; }
|
|
5176
5413
|
};
|
|
5177
|
-
OcsChat.TASK_POLLING_MAX_ATTEMPTS =
|
|
5414
|
+
OcsChat.TASK_POLLING_MAX_ATTEMPTS = 120;
|
|
5178
5415
|
OcsChat.TASK_POLLING_INTERVAL_MS = 1000;
|
|
5179
5416
|
OcsChat.MESSAGE_POLLING_INTERVAL_MS = 30000;
|
|
5180
5417
|
OcsChat.SCROLL_DELAY_MS = 100;
|
|
@@ -5182,6 +5419,10 @@ OcsChat.FOCUS_DELAY_MS = 100;
|
|
|
5182
5419
|
OcsChat.MOBILE_BREAKPOINT = 640;
|
|
5183
5420
|
OcsChat.WINDOW_MARGIN = 20;
|
|
5184
5421
|
OcsChat.LOCALSTORAGE_TEST_KEY = '__ocs_test__';
|
|
5422
|
+
OcsChat.MAX_FILE_SIZE_MB = 50;
|
|
5423
|
+
OcsChat.MAX_TOTAL_SIZE_MB = 50;
|
|
5424
|
+
OcsChat.SUPPORTED_FILE_EXTENSIONS = ['.txt', '.pdf', '.doc', '.docx', '.xls', '.xlsx', '.csv', '.jpg', '.jpeg',
|
|
5425
|
+
'.png', '.gif', '.bmp', '.webp', '.svg', '.mp4', '.mov', '.avi', '.mp3', '.wav'];
|
|
5185
5426
|
OcsChat.style = OpenChatStudioWidgetStyle0;
|
|
5186
5427
|
|
|
5187
5428
|
export { OcsChat as open_chat_studio_widget };
|