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