npm - open-chat-studio-widget - Versions diffs - 0.2.0 → 0.3.0 - Mend

open-chat-studio-widget 0.2.0 → 0.3.0

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.

Files changed (37) hide show

package/dist/collection/components/ocs-chat/ocs-chat.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ocs-chat.js","sourceRoot":"","sources":["../../../src/components/ocs-chat/ocs-chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EACL,2BAA2B,EAC3B,4BAA4B,EAC5B,oBAAoB,EACpB,SAAS,EACT,eAAe,EACf,aAAa,GACd,MAAM,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,CAAC,qBAAqB,CAAC,CAAC;AAO7C,MAAM,OAAO,OAAO;IALpB;QAYE;;WAEG;QACK,eAAU,GAAW,MAAM,CAAC;QAEpC;;WAEG;QACsB,YAAO,GAAY,KAAK,CAAC;QAElD;;WAEG;QACsB,aAAQ,GAAgC,OAAO,CAAC;QAEzE;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAE1C,WAAM,GAAY,KAAK,CAAC;QACxB,UAAK,GAAW,EAAE,CAAC;~~KA4H7B~~;~~IA1HC~~,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACjB,IAAI,CAAC;gBACH,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACjC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;oBACrC,IAAI,CAAC,KAAK,GAAG,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC;gBACjD,CAAC;YACH,CAAC;YAAC,WAAM,CAAC;gBACP,IAAI,CAAC,KAAK,GAAG,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC;YACjD,CAAC;QACH,CAAC;IACH,CAAC;IAED,IAAI;QACF,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAED,WAAW,CAAC,QAAqC;QAC/C,IAAI,QAAQ,KAAK,IAAI,CAAC,QAAQ;YAAE,OAAO;QACvC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED,kBAAkB;QAChB,MAAM,WAAW,GAAG,~~mBAAmB~~,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,qFAAqF,CAAC;~~QAE9J~~,MAAM,eAAe,GAAG;YACtB,IAAI,EAAE,~~iBAAiB~~;~~YACvB~~,KAAK,EAAE,~~kBAAkB~~;~~YACzB~~,MAAM,EAAE,oDAAoD;SAC7D,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEjB,OAAO,GAAG,WAAW,IAAI,eAAe,EAAE,CAAC;IAC7C,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,CACL,EAAC,IAAI;gBACH,aAAI,IAAI,CAAC,KAAK,CAAK,CACd,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,KAAK,EAAC,KAAK,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,IAAG,IAAI,CAAC,UAAU,CAAU;YACzE,IAAI,CAAC,OAAO,IAAI,CACf,WAAK,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE;gBACnC,WAAK,KAAK,EAAC,sEAAsE;oBAC/E,WAAK,KAAK,EAAC,YAAY;wBACrB,cACE,KAAK,EAAE;gCACL,~~mEAAmE~~,EAAE,IAAI;~~gCACzE~~,eAAe,EAAE,IAAI,CAAC,QAAQ,KAAK,MAAM;gCACzC,eAAe,EAAE,IAAI,CAAC,QAAQ,KAAK,MAAM;6BAC1C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,gBAC5B,cAAc,EACzB,KAAK,EAAC,cAAc;4BAEpB,EAAC,2BAA2B,OAAE,CACvB;wBACT,cACE,KAAK,EAAE;gCACL,mEAAmE,EAAE,IAAI;gCACzE,eAAe,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;gCAC3C,eAAe,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;6BAC5C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,gBAC9B,QAAQ,EACnB,KAAK,EAAC,QAAQ;4BAEd,EAAC,oBAAoB,OAAE,CAChB;wBACT,cACE,KAAK,EAAE;gCACL,mEAAmE,EAAE,IAAI;gCACzE,eAAe,EAAE,IAAI,CAAC,QAAQ,KAAK,OAAO;gCAC1C,eAAe,EAAE,IAAI,CAAC,QAAQ,KAAK,OAAO;6BAC3C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,gBAC7B,eAAe,EAC1B,KAAK,EAAC,eAAe;4BAErB,EAAC,4BAA4B,OAAE,~~CACxB~~,CACL;oBACN,WAAK,KAAK,EAAC,YAAY;wBACrB,cACE,KAAK,EAAC,iFAAiF,EACvF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,gBACpB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EACjD,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,IAE3C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,eAAe,OAAE,CAAC,CAAC,CAAC,EAAC,aAAa,OAAE,CAC/C;wBACT,cACE,KAAK,EAAC,iFAAiF,EACvF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK,gBACxB,OAAO;4BAElB,EAAC,SAAS,OAAE,CACL,CACL,CACF;gBACL,IAAI,CAAC,MAAM,IAAI,CACd,cACE,KAAK,EAAC,iDAAiD,EACvD,GAAG,EAAE,IAAI,CAAC,MAAM,GACR,CACX,CACG,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Build } from '@stencil/core';\nimport {\n ArrowLeftEndOnRectangleIcon,\n ArrowRightEndOnRectangleIcon,\n ViewfinderCircleIcon,\n XMarkIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from './heroicons';\n\nconst allowedHosts = [\"chatbots.dimagi.com\"];\n\n@Component({\n tag: 'open-chat-studio-widget',\n styleUrl: 'ocs-chat.css',\n shadow: true,\n})\nexport class OcsChat {\n\n /*\n The URL of the bot to connect to.\n /\n @Prop() botUrl!: string;\n\n /\n The text to display on the button.\n /\n @Prop() buttonText: string = \"Chat\";\n\n /\n Whether the chat widget is visible on load.\n /\n @Prop({ mutable: true }) visible: boolean = false;\n\n /\n The initial position of the chat widget on the screen.\n /\n @Prop({ mutable: true }) position: 'left' \| 'center' \| 'right' = 'right';\n\n /\n Whether the chat widget is initially expanded.\n */\n @Prop({ mutable: true }) expanded: boolean = false;\n\n @State() loaded: boolean = false;\n @State() error: string = \"\";\n\n componentWillLoad() {\n this.loaded = this.visible;\n if (!Build.isDev) {\n try {\n const url = new URL(this.botUrl);\n if (!allowedHosts.includes(url.host)) {\n this.error = `Invalid Bot URL: ${this.botUrl}`;\n }\n } catch {\n this.error = `Invalid Bot URL: ${this.botUrl}`;\n }\n }\n }\n\n load() {\n this.visible = !this.visible;\n this.loaded = true;\n }\n\n setPosition(position: 'left' \| 'center' \| 'right') {\n if (position === this.position) return;\n this.position = position;\n }\n\n toggleSize() {\n this.expanded = !this.expanded;\n }\n\n getPositionClasses() {\n const baseClasses = `fixed w-[450px] ${this.expanded ? 'h-5/6' : 'h-3/5'} bg-white border border-gray-200 shadow-lg rounded-lg overflow-hidden flex flex-col`;\n\n const positionClasses = {\n left: 'left-5 bottom-5',\n right: 'right-5 bottom-5',\n center: 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'\n }[this.position];\n\n return `${baseClasses} ${positionClasses}`;\n }\n\n render() {\n if (this.error) {\n return (\n <Host>\n <p>{this.error}</p>\n </Host>\n );\n }\n\n return (\n <Host>\n <button class=\"btn\" onClick={() => this.load()}>{this.buttonText}</button>\n {this.visible && (\n <div class={this.getPositionClasses()}>\n <div class=\"flex justify-between items-center px-2 py-2 border-b border-gray-100\">\n <div class=\"flex gap-1\">\n <button\n class={{\n 'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'left',\n 'text-gray-500': this.position !== 'left'\n }}\n onClick={() => this.setPosition('left')}\n aria-label=\"Dock to left\"\n title=\"Dock to left\"\n >\n <ArrowLeftEndOnRectangleIcon/>\n </button>\n <button\n class={{\n 'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'center',\n 'text-gray-500': this.position !== 'center'\n }}\n onClick={() => this.setPosition('center')}\n aria-label=\"Center\"\n title=\"Center\"\n >\n <ViewfinderCircleIcon/>\n </button>\n <button\n class={{\n 'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'right',\n 'text-gray-500': this.position !== 'right'\n }}\n onClick={() => this.setPosition('right')}\n aria-label=\"Dock to right\"\n title=\"Dock to right\"\n >\n <ArrowRightEndOnRectangleIcon~~/>\~~n </button>\n </div>\n <div class=\"flex gap-1\">\n <button\n class=\"p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500\"\n onClick={() => this.toggleSize()}\n aria-label={this.expanded ? \"Collapse\" : \"Expand\"}\n title={this.expanded ? \"Collapse\" : \"Expand\"}\n >\n {this.expanded ? <ChevronDownIcon/> : <ChevronUpIcon/>}\n </button>\n <button\n class=\"p-1.5 hover:bg-gray-100 rounded-md transition-colors duration-200 text-gray-500\"\n onClick={() => this.visible = false}\n aria-label=\"Close\"\n >\n <XMarkIcon/>\n </button>\n </div>\n </div>\n {this.loaded && (\n <iframe\n class=\"flex-grow w-full border-none iframe-placeholder\"\n src={this.botUrl}\n ></iframe>\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ocs-chat.js","sourceRoot":"","sources":["../../../src/components/ocs-chat/ocs-chat.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Build } from '@stencil/core';\nimport {\n ArrowLeftEndOnRectangleIcon,\n ArrowRightEndOnRectangleIcon,\n ArrowDownOnSquareIcon,\n ViewfinderCircleIcon,\n XMarkIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from './heroicons';\n\nconst allowedHosts = [\"chatbots.dimagi.com\"];\n\n@Component({\n tag: 'open-chat-studio-widget',\n styleUrl: 'ocs-chat.css',\n shadow: true,\n})\nexport class OcsChat {\n\n /*\n The URL of the bot to connect to.\n /\n @Prop() botUrl!: string;\n\n /\n The text to display on the button.\n /\n @Prop() buttonText: string = \"Chat\";\n\n /\n Whether the chat widget is visible on load.\n /\n @Prop({ mutable: true }) visible: boolean = false;\n\n /\n The initial position of the chat widget on the screen.\n /\n @Prop({ mutable: true }) position: 'left' \| 'center' \| 'right' = 'right';\n\n /\n Whether the chat widget is initially expanded.\n */\n @Prop({ mutable: true }) expanded: boolean = false;\n\n @State() loaded: boolean = false;\n @State() error: string = \"\";\n\n componentWillLoad() {\n this.loaded = this.visible;\n if (!Build.isDev) {\n try {\n const url = new URL(this.botUrl);\n if (!allowedHosts.includes(url.host)) {\n this.error = `Invalid Bot URL: ${this.botUrl}`;\n }\n } catch {\n this.error = `Invalid Bot URL: ${this.botUrl}`;\n }\n }\n }\n\n load() {\n this.visible = !this.visible;\n this.loaded = true;\n }\n\n setPosition(position: 'left' \| 'center' \| 'right') {\n if (position === this.position) return;\n this.position = position;\n }\n\n toggleSize() {\n this.expanded = !this.expanded;\n }\n\n getPositionClasses() {\n const baseClasses = `fixed w-full sm:w-[450px] ${this.expanded ? 'h-5/6' : 'h-3/5'} bg-white border border-gray-200 shadow-lg rounded-lg overflow-hidden flex flex-col`;\n\n const positionClasses = {\n left: 'left-0 sm:left-5 bottom-0 sm:bottom-5',\n right: 'right-0 sm:right-5 bottom-0 sm:bottom-5',\n center: 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'\n }[this.position];\n\n return `${baseClasses} ${positionClasses}`;\n }\n\n render() {\n if (this.error) {\n return (\n <Host>\n <p>{this.error}</p>\n </Host>\n );\n }\n\n return (\n <Host>\n <button class=\"btn\" onClick={() => this.load()}>{this.buttonText}</button>\n {this.visible && (\n <div class={this.getPositionClasses()}>\n <div class=\"flex justify-between items-center px-2 py-2 border-b border-gray-100\">\n <div class=\"flex gap-1\">\n <button\n class={{\n 'hidden sm:block p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'left',\n 'text-gray-500': this.position !== 'left'\n }}\n onClick={() => this.setPosition('left')}\n aria-label=\"Dock to left\"\n title=\"Dock to left\"\n >\n <ArrowLeftEndOnRectangleIcon/>\n </button>\n <button\n class={{\n 'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'center',\n 'text-gray-500': this.position !== 'center'\n }}\n onClick={() => this.setPosition('center')}\n aria-label=\"Center\"\n title=\"Center\"\n >\n <ViewfinderCircleIcon/>\n </button>\n <button\n class={{\n 'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'right',\n 'text-gray-500': this.position !== 'right'\n }}\n onClick={() => this.setPosition('right')}\n aria-label=\"Dock to right\"\n title=\"Dock to right\"\n >\n <span class=\"hidden sm:block\"><ArrowRightEndOnRectangleIcon/></span>\n <span class=\"sm:hidden\"><ArrowDownOnSquareIcon/></span>\n </button>\n </div>\n <div class=\"flex gap-1\">\n <button\n class=\"p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500\"\n onClick={() => this.toggleSize()}\n aria-label={this.expanded ? \"Collapse\" : \"Expand\"}\n title={this.expanded ? \"Collapse\" : \"Expand\"}\n >\n {this.expanded ? <ChevronDownIcon/> : <ChevronUpIcon/>}\n </button>\n <button\n class=\"p-1.5 hover:bg-gray-100 rounded-md transition-colors duration-200 text-gray-500\"\n onClick={() => this.visible = false}\n aria-label=\"Close\"\n >\n <XMarkIcon/>\n </button>\n </div>\n </div>\n {this.loaded && (\n <iframe\n class=\"flex-grow w-full border-none iframe-placeholder\"\n src={this.botUrl}\n ></iframe>\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/components/open-chat-studio-widget.js CHANGED Viewed

@@ -8,6 +8,10 @@ const ArrowRightEndOnRectangleIcon = () => {
     return h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "size-6" },
         h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25" }));
 };
+const ArrowDownOnSquareIcon = () => {
+    return h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": 1.5, stroke: "currentColor", class: "size-6" },
+        h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15M9 12l3 3m0 0 3-3m-3 3V2.25" }));
+};
 const ViewfinderCircleIcon = () => {
     return h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "size-6" },
         h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" }));
@@ -25,7 +29,7 @@ const ChevronDownIcon = () => {
         h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m19.5 8.25-7.5 7.5-7.5-7.5" }));
 };
-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}:root,[data-theme]{background-color:var(--fallback-b1,oklch(var(--b1)/1));color:var(--fallback-bc,oklch(var(--bc)/1))}@supports not (color: oklch(0% 0 0)){:root{color-scheme:light;--fallback-p:#491eff;--fallback-pc:#d4dbff;--fallback-s:#ff41c7;--fallback-sc:#fff9fc;--fallback-a:#00cfbd;--fallback-ac:#00100d;--fallback-n:#2b3440;--fallback-nc:#d7dde4;--fallback-b1:#ffffff;--fallback-b2:#e5e6e6;--fallback-b3:#e5e6e6;--fallback-bc:#1f2937;--fallback-in:#00b3f0;--fallback-inc:#000000;--fallback-su:#00ca92;--fallback-suc:#000000;--fallback-wa:#ffc22d;--fallback-wac:#000000;--fallback-er:#ff6f70;--fallback-erc:#000000}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--fallback-p:#7582ff;--fallback-pc:#050617;--fallback-s:#ff71cf;--fallback-sc:#190211;--fallback-a:#00c7b5;--fallback-ac:#000e0c;--fallback-n:#2a323c;--fallback-nc:#a6adbb;--fallback-b1:#1d232a;--fallback-b2:#191e24;--fallback-b3:#15191e;--fallback-bc:#a6adbb;--fallback-in:#00b3f0;--fallback-inc:#000000;--fallback-su:#00ca92;--fallback-suc:#000000;--fallback-wa:#ffc22d;--fallback-wac:#000000;--fallback-er:#ff6f70;--fallback-erc:#000000}}}html{-webkit-tap-highlight-color:transparent}*{scrollbar-color:color-mix(in oklch, currentColor 35%, transparent) transparent}*:hover{scrollbar-color:color-mix(in oklch, currentColor 60%, transparent) transparent}:root{color-scheme:light;--in:72.06% 0.191 231.6;--su:64.8% 0.150 160;--wa:84.71% 0.199 83.87;--er:71.76% 0.221 22.18;--pc:89.824% 0.06192 275.75;--ac:15.352% 0.0368 183.61;--inc:0% 0 0;--suc:0% 0 0;--wac:0% 0 0;--erc:0% 0 0;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:49.12% 0.3096 275.75;--s:69.71% 0.329 342.55;--sc:98.71% 0.0106 342.55;--a:76.76% 0.184 183.61;--n:32.1785% 0.02476 255.701624;--nc:89.4994% 0.011585 252.096176;--b1:100% 0 0;--b2:96.1151% 0 0;--b3:92.4169% 0.00108 197.137559;--bc:27.8078% 0.029596 256.847952}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--in:72.06% 0.191 231.6;--su:64.8% 0.150 160;--wa:84.71% 0.199 83.87;--er:71.76% 0.221 22.18;--pc:13.138% 0.0392 275.75;--sc:14.96% 0.052 342.55;--ac:14.902% 0.0334 183.61;--inc:0% 0 0;--suc:0% 0 0;--wac:0% 0 0;--erc:0% 0 0;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:65.69% 0.196 275.75;--s:74.8% 0.26 342.55;--a:74.51% 0.167 183.61;--n:31.3815% 0.021108 254.139175;--nc:74.6477% 0.0216 264.435964;--b1:25.3267% 0.015896 252.417568;--b2:23.2607% 0.013807 253.100675;--b3:21.1484% 0.01165 254.087939;--bc:74.6477% 0.0216 264.435964}}[data-theme=light]{color-scheme:light;--in:72.06% 0.191 231.6;--su:64.8% 0.150 160;--wa:84.71% 0.199 83.87;--er:71.76% 0.221 22.18;--pc:89.824% 0.06192 275.75;--ac:15.352% 0.0368 183.61;--inc:0% 0 0;--suc:0% 0 0;--wac:0% 0 0;--erc:0% 0 0;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:49.12% 0.3096 275.75;--s:69.71% 0.329 342.55;--sc:98.71% 0.0106 342.55;--a:76.76% 0.184 183.61;--n:32.1785% 0.02476 255.701624;--nc:89.4994% 0.011585 252.096176;--b1:100% 0 0;--b2:96.1151% 0 0;--b3:92.4169% 0.00108 197.137559;--bc:27.8078% 0.029596 256.847952}[data-theme=dark]{color-scheme:dark;--in:72.06% 0.191 231.6;--su:64.8% 0.150 160;--wa:84.71% 0.199 83.87;--er:71.76% 0.221 22.18;--pc:13.138% 0.0392 275.75;--sc:14.96% 0.052 342.55;--ac:14.902% 0.0334 183.61;--inc:0% 0 0;--suc:0% 0 0;--wac:0% 0 0;--erc:0% 0 0;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:65.69% 0.196 275.75;--s:74.8% 0.26 342.55;--a:74.51% 0.167 183.61;--n:31.3815% 0.021108 254.139175;--nc:74.6477% 0.0216 264.435964;--b1:25.3267% 0.015896 252.417568;--b2:23.2607% 0.013807 253.100675;--b3:21.1484% 0.01165 254.087939;--bc:74.6477% 0.0216 264.435964}@media (hover:hover){.table tr.hover:hover,.table tr.hover:nth-child(even):hover{--tw-bg-opacity:1;background-color:var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)))}.table-zebra tr.hover:hover,.table-zebra tr.hover:nth-child(even):hover{--tw-bg-opacity:1;background-color:var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)))}}.btn{display:inline-flex;height:3rem;min-height:3rem;flex-shrink:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:center;border-radius:var(--rounded-btn, 0.5rem);border-color:transparent;border-color:oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));padding-left:1rem;padding-right:1rem;text-align:center;font-size:0.875rem;line-height:1em;gap:0.5rem;font-weight:600;text-decoration-line:none;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);border-width:var(--border-btn, 1px);transition-property:color, background-color, border-color, opacity, box-shadow, transform;--tw-text-opacity:1;color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);outline-color:var(--fallback-bc,oklch(var(--bc)/1));background-color:oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));--tw-bg-opacity:1;--tw-border-opacity:1}.btn-disabled,.btn[disabled],.btn:disabled{pointer-events:none}:where(.btn:is(input[type=\"checkbox\"])),:where(.btn:is(input[type=\"radio\"])){width:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none}.btn:is(input[type=\"checkbox\"]):after,.btn:is(input[type=\"radio\"]):after{--tw-content:attr(aria-label);content:var(--tw-content)}.chat{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));-moz-column-gap:0.75rem;column-gap:0.75rem;padding-top:0.25rem;padding-bottom:0.25rem}@media (hover: hover){.btn:hover{--tw-border-opacity:1;border-color:var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));--tw-bg-opacity:1;background-color:var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)))}@supports (color: color-mix(in oklab, black, black)){.btn:hover{background-color:color-mix(\n            in oklab,\n            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,\n            black\n          );border-color:color-mix(\n            in oklab,\n            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,\n            black\n          )}}@supports not (color: oklch(0% 0 0)){.btn:hover{background-color:var(--btn-color, var(--fallback-b2));border-color:var(--btn-color, var(--fallback-b2))}}.btn.glass:hover{--glass-opacity:25%;--glass-border-opacity:15%}.btn-disabled:hover,.btn[disabled]:hover,.btn:disabled:hover{--tw-border-opacity:0;background-color:var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));--tw-bg-opacity:0.2;color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));--tw-text-opacity:0.2}@supports (color: color-mix(in oklab, black, black)){.btn:is(input[type=\"checkbox\"]:checked):hover,.btn:is(input[type=\"radio\"]:checked):hover{background-color:color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);border-color:color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black)}}}@media (prefers-reduced-motion: no-preference){.btn{animation:button-pop var(--animation-btn, 0.25s) ease-out}}.btn:active:hover,.btn:active:focus{animation:button-pop 0s ease-out;transform:scale(var(--btn-focus-scale, 0.97))}@supports not (color: oklch(0% 0 0)){.btn{background-color:var(--btn-color, var(--fallback-b2));border-color:var(--btn-color, var(--fallback-b2))}}.btn:focus-visible{outline-style:solid;outline-width:2px;outline-offset:2px}.btn.glass{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);outline-color:currentColor}.btn.glass.btn-active{--glass-opacity:25%;--glass-border-opacity:15%}.btn.btn-disabled,.btn[disabled],.btn:disabled{--tw-border-opacity:0;background-color:var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));--tw-bg-opacity:0.2;color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));--tw-text-opacity:0.2}.btn:is(input[type=\"checkbox\"]:checked),.btn:is(input[type=\"radio\"]:checked){--tw-border-opacity:1;border-color:var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));--tw-bg-opacity:1;background-color:var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));--tw-text-opacity:1;color:var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)))}.btn:is(input[type=\"checkbox\"]:checked):focus-visible,.btn:is(input[type=\"radio\"]:checked):focus-visible{outline-color:var(--fallback-p,oklch(var(--p)/1))}@keyframes button-pop{0%{transform:scale(var(--btn-focus-scale, 0.98))}40%{transform:scale(1.02)}100%{transform:scale(1)}}@keyframes checkmark{0%{background-position-y:5px}50%{background-position-y:-2px}100%{background-position-y:0}}.join>:where(*:not(:first-child)):is(.btn){margin-inline-start:calc(var(--border-btn) * -1)}.mockup-phone .display{overflow:hidden;border-radius:40px;margin-top:-25px}@keyframes modal-pop{0%{opacity:0}}@keyframes progress-loading{50%{background-position-x:-115%}}@keyframes radiomark{0%{box-shadow:0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset,\n      0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset}50%{box-shadow:0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset,\n      0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset}100%{box-shadow:0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,\n      0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset}}@keyframes rating-pop{0%{transform:translateY(-0.125em)}40%{transform:translateY(-0.125em)}100%{transform:translateY(0)}}@keyframes skeleton{from{background-position:150%}to{background-position:-50%}}@keyframes toast-pop{0%{transform:scale(0.9);opacity:0}100%{transform:scale(1);opacity:1}}.join.join-vertical>:where(*:not(:first-child)):is(.btn){margin-top:calc(var(--border-btn) * -1)}.join.join-horizontal>:where(*:not(:first-child)):is(.btn){margin-inline-start:calc(var(--border-btn) * -1);margin-top:0px}.visible{visibility:visible}.fixed{position:fixed}.bottom-5{bottom:1.25rem}.left-1\\/2{left:50%}.left-5{left:1.25rem}.right-5{right:1.25rem}.top-1\\/2{top:50%}.flex{display:flex}.size-6{width:1.5rem;height:1.5rem}.h-3\\/5{height:60%}.h-5\\/6{height:83.333333%}.w-\\[450px\\]{width:450px}.w-full{width:100%}.flex-grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;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))}.-translate-y-1\\/2{--tw-translate-y:-50%;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))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-none{border-style:none}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-1\\.5{padding:0.375rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.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)}.shadow-lg{--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-colors{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}.duration-200{transition-duration:200ms}:host{display:block;--button-background-color:inherit;--button-background-color-hover:inherit;--button-text-color:inherit;--button-text-color-hover:inherit}.btn{background-color:var(--button-background-color);color:var(--button-text-color)}.btn:hover{background-color:var(--button-background-color-hover);color:var(--button-text-color-hover)}.iframe-placeholder{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48c3R5bGU+LnNwaW5uZXJfcU04M3thbmltYXRpb246c3Bpbm5lcl84SFFHIDEuMDVzIGluZmluaXRlfS5zcGlubmVyX29YUHJ7YW5pbWF0aW9uLWRlbGF5Oi4xc30uc3Bpbm5lcl9aVExme2FuaW1hdGlvbi1kZWxheTouMnN9QGtleWZyYW1lcyBzcGlubmVyXzhIUUd7MCUsNTcuMTQle2FuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246Y3ViaWMtYmV6aWVyKDAuMzMsLjY2LC42NiwxKTt0cmFuc2Zvcm06dHJhbnNsYXRlKDApfTI4LjU3JXthbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOmN1YmljLWJlemllcigwLjMzLDAsLjY2LC4zMyk7dHJhbnNmb3JtOnRyYW5zbGF0ZVkoLTZweCl9MTAwJXt0cmFuc2Zvcm06dHJhbnNsYXRlKDApfX08L3N0eWxlPjxjaXJjbGUgY2xhc3M9J3NwaW5uZXJfcU04MycgY3g9JzQnIGN5PScxMicgcj0nMycvPjxjaXJjbGUgY2xhc3M9J3NwaW5uZXJfcU04MyBzcGlubmVyX29YUHInIGN4PScxMicgY3k9JzEyJyByPSczJy8+PGNpcmNsZSBjbGFzcz0nc3Bpbm5lcl9xTTgzIHNwaW5uZXJfWlRMZicgY3g9JzIwJyBjeT0nMTInIHI9JzMnLz48L3N2Zz4=);background-repeat:no-repeat;background-position:center}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}";
+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}.btn{margin-inline-end:0.5rem;margin-bottom:0.5rem;border-radius:0.5rem;border-width:1px;padding-top:0.625rem;padding-bottom:0.625rem;padding-left:1.25rem;padding-right:1.25rem;font-size:0.875rem;line-height:1.25rem;font-weight:500}.btn:focus{outline:2px solid transparent;outline-offset:2px}.btn{background-color:var(--button-background-color);color:var(--button-text-color);border-color:var(--button-border-color)}.btn:hover{background-color:var(--button-background-color-hover);color:var(--button-text-color-hover);border-color:var(--button-border-color-hover)}.visible{visibility:visible}.fixed{position:fixed}.bottom-0{bottom:0px}.left-0{left:0px}.left-1\\/2{left:50%}.right-0{right:0px}.top-1\\/2{top:50%}.flex{display:flex}.hidden{display:none}.size-6{width:1.5rem;height:1.5rem}.h-3\\/5{height:60%}.h-5\\/6{height:83.333333%}.w-full{width:100%}.flex-grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;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))}.-translate-y-1\\/2{--tw-translate-y:-50%;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))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-none{border-style:none}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-1\\.5{padding:0.375rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.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)}.shadow-lg{--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-colors{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}.duration-200{transition-duration:200ms}:host{--button-background-color:white;--button-background-color-hover:#f3f4f6;--button-text-color:#111827;--button-text-color-hover:#1d4ed8;--button-border-color:#6b7280;--button-border-color-hover:#374151;--chat-z-index:50;display:block;z-index:var(--chat-z-index)}.iframe-placeholder{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48c3R5bGU+LnNwaW5uZXJfcU04M3thbmltYXRpb246c3Bpbm5lcl84SFFHIDEuMDVzIGluZmluaXRlfS5zcGlubmVyX29YUHJ7YW5pbWF0aW9uLWRlbGF5Oi4xc30uc3Bpbm5lcl9aVExme2FuaW1hdGlvbi1kZWxheTouMnN9QGtleWZyYW1lcyBzcGlubmVyXzhIUUd7MCUsNTcuMTQle2FuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246Y3ViaWMtYmV6aWVyKDAuMzMsLjY2LC42NiwxKTt0cmFuc2Zvcm06dHJhbnNsYXRlKDApfTI4LjU3JXthbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOmN1YmljLWJlemllcigwLjMzLDAsLjY2LC4zMyk7dHJhbnNmb3JtOnRyYW5zbGF0ZVkoLTZweCl9MTAwJXt0cmFuc2Zvcm06dHJhbnNsYXRlKDApfX08L3N0eWxlPjxjaXJjbGUgY2xhc3M9J3NwaW5uZXJfcU04MycgY3g9JzQnIGN5PScxMicgcj0nMycvPjxjaXJjbGUgY2xhc3M9J3NwaW5uZXJfcU04MyBzcGlubmVyX29YUHInIGN4PScxMicgY3k9JzEyJyByPSczJy8+PGNpcmNsZSBjbGFzcz0nc3Bpbm5lcl9xTTgzIHNwaW5uZXJfWlRMZicgY3g9JzIwJyBjeT0nMTInIHI9JzMnLz48L3N2Zz4=);background-repeat:no-repeat;background-position:center}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}@media (min-width: 640px){.sm\\:bottom-5{bottom:1.25rem}.sm\\:left-5{left:1.25rem}.sm\\:right-5{right:1.25rem}.sm\\:block{display:block}.sm\\:hidden{display:none}.sm\\:w-\\[450px\\]{width:450px}}";
 const OpenChatStudioWidgetStyle0 = ocsChatCss;
 const allowedHosts = ["chatbots.dimagi.com"];
@@ -80,10 +84,10 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
         this.expanded = !this.expanded;
     }
     getPositionClasses() {
-        const baseClasses = `fixed w-[450px] ${this.expanded ? 'h-5/6' : 'h-3/5'} bg-white border border-gray-200 shadow-lg rounded-lg overflow-hidden flex flex-col`;
+        const baseClasses = `fixed w-full sm:w-[450px] ${this.expanded ? 'h-5/6' : 'h-3/5'} bg-white border border-gray-200 shadow-lg rounded-lg overflow-hidden flex flex-col`;
         const positionClasses = {
-            left: 'left-5 bottom-5',
-            right: 'right-5 bottom-5',
+            left: 'left-0 sm:left-5 bottom-0 sm:bottom-5',
+            right: 'right-0 sm:right-5 bottom-0 sm:bottom-5',
             center: 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
         }[this.position];
         return `${baseClasses} ${positionClasses}`;
@@ -93,7 +97,7 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
             return (h(Host, null, h("p", null, this.error)));
         }
         return (h(Host, null, h("button", { class: "btn", onClick: () => this.load() }, this.buttonText), this.visible && (h("div", { class: this.getPositionClasses() }, h("div", { class: "flex justify-between items-center px-2 py-2 border-b border-gray-100" }, h("div", { class: "flex gap-1" }, h("button", { class: {
-                'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,
+                'hidden sm:block p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,
                 'text-blue-600': this.position === 'left',
                 'text-gray-500': this.position !== 'left'
             }, onClick: () => this.setPosition('left'), "aria-label": "Dock to left", title: "Dock to left" }, h(ArrowLeftEndOnRectangleIcon, null)), h("button", { class: {
@@ -104,7 +108,7 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
                 'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,
                 'text-blue-600': this.position === 'right',
                 'text-gray-500': this.position !== 'right'
-            }, onClick: () => this.setPosition('right'), "aria-label": "Dock to right", title: "Dock to right" }, h(ArrowRightEndOnRectangleIcon, null))), h("div", { class: "flex gap-1" }, h("button", { class: "p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500", onClick: () => this.toggleSize(), "aria-label": this.expanded ? "Collapse" : "Expand", title: this.expanded ? "Collapse" : "Expand" }, this.expanded ? h(ChevronDownIcon, null) : h(ChevronUpIcon, null)), h("button", { class: "p-1.5 hover:bg-gray-100 rounded-md transition-colors duration-200 text-gray-500", onClick: () => this.visible = false, "aria-label": "Close" }, h(XMarkIcon, null)))), this.loaded && (h("iframe", { class: "flex-grow w-full border-none iframe-placeholder", src: this.botUrl }))))));
+            }, onClick: () => this.setPosition('right'), "aria-label": "Dock to right", title: "Dock to right" }, h("span", { class: "hidden sm:block" }, h(ArrowRightEndOnRectangleIcon, null)), h("span", { class: "sm:hidden" }, h(ArrowDownOnSquareIcon, null)))), h("div", { class: "flex gap-1" }, h("button", { class: "p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500", onClick: () => this.toggleSize(), "aria-label": this.expanded ? "Collapse" : "Expand", title: this.expanded ? "Collapse" : "Expand" }, this.expanded ? h(ChevronDownIcon, null) : h(ChevronUpIcon, null)), h("button", { class: "p-1.5 hover:bg-gray-100 rounded-md transition-colors duration-200 text-gray-500", onClick: () => this.visible = false, "aria-label": "Close" }, h(XMarkIcon, null)))), this.loaded && (h("iframe", { class: "flex-grow w-full border-none iframe-placeholder", src: this.botUrl }))))));
     }
     static get style() { return OpenChatStudioWidgetStyle0; }
 }, [1, "open-chat-studio-widget", {

package/dist/components/open-chat-studio-widget.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"open-chat-studio-widget.js","mappings":"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","names":[],"sources":["src/components/ocs-chat/heroicons.tsx","src/components/ocs-chat/ocs-chat.css?tag=open-chat-studio-widget&encapsulation=shadow","src/components/ocs-chat/ocs-chat.tsx"],"sourcesContent":["import {h} from \"@stencil/core\";\n\nexport const ArrowLeftEndOnRectangleIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"\n class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n d=\"M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75\"/>\n </svg>;\n}\n\nexport const ArrowRightEndOnRectangleIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n d=\"M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25\"/>\n </svg>;\n}\n\nexport const ViewfinderCircleIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n d=\"M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"/>\n </svg>;\n}\n\nexport const XMarkIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n </svg>;\n}\n\nexport const ChevronUpIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m4.5 15.75 7.5-7.5 7.5 7.5\"/>\n </svg>;\n}\n\nexport const ChevronDownIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"/>\n </svg>;\n}\n","@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:host {\n display: block;\n /*\n @prop --button-background-color: Button background color\n * @prop --button-background-color-hover: Button background color on hover\n * @prop --button-text-color: Button text color\n * @prop --button-text-color-hover: Button text color on hover\n /\n --button-background-color: inherit;\n --button-background-color-hover: inherit;\n --button-text-color: inherit;\n --button-text-color-hover: inherit;\n}\n\n/ These custom button styles need to remain since they use CSS variables /\n.btn {\n background-color: var(--button-background-color);\n color: var(--button-text-color);\n}\n\n.btn:hover {\n background-color: var(--button-background-color-hover);\n color: var(--button-text-color-hover);\n}\n\n.iframe-placeholder {\n /loading-dots/\n background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48c3R5bGU+LnNwaW5uZXJfcU04M3thbmltYXRpb246c3Bpbm5lcl84SFFHIDEuMDVzIGluZmluaXRlfS5zcGlubmVyX29YUHJ7YW5pbWF0aW9uLWRlbGF5Oi4xc30uc3Bpbm5lcl9aVExme2FuaW1hdGlvbi1kZWxheTouMnN9QGtleWZyYW1lcyBzcGlubmVyXzhIUUd7MCUsNTcuMTQle2FuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246Y3ViaWMtYmV6aWVyKDAuMzMsLjY2LC42NiwxKTt0cmFuc2Zvcm06dHJhbnNsYXRlKDApfTI4LjU3JXthbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOmN1YmljLWJlemllcigwLjMzLDAsLjY2LC4zMyk7dHJhbnNmb3JtOnRyYW5zbGF0ZVkoLTZweCl9MTAwJXt0cmFuc2Zvcm06dHJhbnNsYXRlKDApfX08L3N0eWxlPjxjaXJjbGUgY2xhc3M9J3NwaW5uZXJfcU04MycgY3g9JzQnIGN5PScxMicgcj0nMycvPjxjaXJjbGUgY2xhc3M9J3NwaW5uZXJfcU04MyBzcGlubmVyX29YUHInIGN4PScxMicgY3k9JzEyJyByPSczJy8+PGNpcmNsZSBjbGFzcz0nc3Bpbm5lcl9xTTgzIHNwaW5uZXJfWlRMZicgY3g9JzIwJyBjeT0nMTInIHI9JzMnLz48L3N2Zz4=);\n background-repeat: no-repeat;\n background-position: center;\n}\n","import { Component, Host, h, Prop, State, Build } from '@stencil/core';\nimport {\n ArrowLeftEndOnRectangleIcon,\n ArrowRightEndOnRectangleIcon,\n ViewfinderCircleIcon,\n XMarkIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from './heroicons';\n\nconst allowedHosts = [\"chatbots.dimagi.com\"];\n\n@Component({\n tag: 'open-chat-studio-widget',\n styleUrl: 'ocs-chat.css',\n shadow: true,\n})\nexport class OcsChat {\n\n /\n The URL of the bot to connect to.\n /\n @Prop() botUrl!: string;\n\n /\n The text to display on the button.\n /\n @Prop() buttonText: string = \"Chat\";\n\n /\n Whether the chat widget is visible on load.\n /\n @Prop({ mutable: true }) visible: boolean = false;\n\n /\n The initial position of the chat widget on the screen.\n /\n @Prop({ mutable: true }) position: 'left' \| 'center' \| 'right' = 'right';\n\n /\n Whether the chat widget is initially expanded.\n */\n @Prop({ mutable: true }) expanded: boolean = false;\n\n @State() loaded: boolean = false;\n @State() error: string = \"\";\n\n componentWillLoad() {\n this.loaded = this.visible;\n if (!Build.isDev) {\n try {\n const url = new URL(this.botUrl);\n if (!allowedHosts.includes(url.host)) {\n this.error = `Invalid Bot URL: ${this.botUrl}`;\n }\n } catch {\n this.error = `Invalid Bot URL: ${this.botUrl}`;\n }\n }\n }\n\n load() {\n this.visible = !this.visible;\n this.loaded = true;\n }\n\n setPosition(position: 'left' \| 'center' \| 'right') {\n if (position === this.position) return;\n this.position = position;\n }\n\n toggleSize() {\n this.expanded = !this.expanded;\n }\n\n getPositionClasses() {\n const baseClasses = `fixed w-[450px] ${this.expanded ? 'h-5/6' : 'h-3/5'} bg-white border border-gray-200 shadow-lg rounded-lg overflow-hidden flex flex-col`;\n\n const positionClasses = {\n left: 'left-5 bottom-5',\n right: 'right-5 bottom-5',\n center: 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'\n }[this.position];\n\n return `${baseClasses} ${positionClasses}`;\n }\n\n render() {\n if (this.error) {\n return (\n <Host>\n <p>{this.error}</p>\n </Host>\n );\n }\n\n return (\n <Host>\n <button class=\"btn\" onClick={() => this.load()}>{this.buttonText}</button>\n {this.visible && (\n <div class={this.getPositionClasses()}>\n <div class=\"flex justify-between items-center px-2 py-2 border-b border-gray-100\">\n <div class=\"flex gap-1\">\n <button\n class={{\n 'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'left',\n 'text-gray-500': this.position !== 'left'\n }}\n onClick={() => this.setPosition('left')}\n aria-label=\"Dock to left\"\n title=\"Dock to left\"\n >\n <ArrowLeftEndOnRectangleIcon/>\n </button>\n <button\n class={{\n 'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'center',\n 'text-gray-500': this.position !== 'center'\n }}\n onClick={() => this.setPosition('center')}\n aria-label=\"Center\"\n title=\"Center\"\n >\n <ViewfinderCircleIcon/>\n </button>\n <button\n class={{\n 'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'right',\n 'text-gray-500': this.position !== 'right'\n }}\n onClick={() => this.setPosition('right')}\n aria-label=\"Dock to right\"\n title=\"Dock to right\"\n >\n <ArrowRightEndOnRectangleIcon/>\n </button>\n </div>\n <div class=\"flex gap-1\">\n <button\n class=\"p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500\"\n onClick={() => this.toggleSize()}\n aria-label={this.expanded ? \"Collapse\" : \"Expand\"}\n title={this.expanded ? \"Collapse\" : \"Expand\"}\n >\n {this.expanded ? <ChevronDownIcon/> : <ChevronUpIcon/>}\n </button>\n <button\n class=\"p-1.5 hover:bg-gray-100 rounded-md transition-colors duration-200 text-gray-500\"\n onClick={() => this.visible = false}\n aria-label=\"Close\"\n >\n <XMarkIcon/>\n </button>\n </div>\n </div>\n {this.loaded && (\n <iframe\n class=\"flex-grow w-full border-none iframe-placeholder\"\n src={this.botUrl}\n ></iframe>\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"open-chat-studio-widget.js","mappings":"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","names":[],"sources":["src/components/ocs-chat/heroicons.tsx","src/components/ocs-chat/ocs-chat.css?tag=open-chat-studio-widget&encapsulation=shadow","src/components/ocs-chat/ocs-chat.tsx"],"sourcesContent":["import {h} from \"@stencil/core\";\n\nexport const ArrowLeftEndOnRectangleIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"\n class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n d=\"M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75\"/>\n </svg>;\n}\n\nexport const ArrowRightEndOnRectangleIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n d=\"M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25\"/>\n </svg>;\n}\n\nexport const ArrowDownOnSquareIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width={1.5} stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15M9 12l3 3m0 0 3-3m-3 3V2.25\" />\n </svg>\n}\n\nexport const ViewfinderCircleIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n d=\"M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"/>\n </svg>;\n}\n\nexport const XMarkIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n </svg>;\n}\n\nexport const ChevronUpIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m4.5 15.75 7.5-7.5 7.5 7.5\"/>\n </svg>;\n}\n\nexport const ChevronDownIcon = () => {\n return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n stroke=\"currentColor\" class=\"size-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"/>\n </svg>;\n}\n","@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:host {\n /*\n @prop --button-background-color: Button background color\n * @prop --button-background-color-hover: Button background color on hover\n * @prop --button-text-color: Button text color\n * @prop --button-text-color-hover: Button text color on hover\n * @prop --button-border-color: Button border color\n * @prop --button-border-color-hover: Button border color on hover\n /\n --button-background-color: white;\n / gray-100 /\n --button-background-color-hover: #f3f4f6;\n / gray-900 /\n --button-text-color: #111827;\n / blue-700 /\n --button-text-color-hover: #1d4ed8;\n / gray-500 /\n --button-border-color: #6b7280;\n / gray-700 /\n --button-border-color-hover: #374151;\n --chat-z-index: 50;\n\n display: block;\n z-index: var(--chat-z-index);\n}\n\n/ These custom button styles need to remain since they use CSS variables /\n\n@layer components {\n .btn {\n @apply py-2.5 px-5 me-2 mb-2 text-sm font-medium focus:outline-none rounded-lg border;\n background-color: var(--button-background-color);\n color: var(--button-text-color);\n border-color: var(--button-border-color);\n }\n\n .btn:hover {\n background-color: var(--button-background-color-hover);\n color: var(--button-text-color-hover);\n border-color: var(--button-border-color-hover);\n }\n}\n\n.iframe-placeholder {\n /loading-dots/\n background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48c3R5bGU+LnNwaW5uZXJfcU04M3thbmltYXRpb246c3Bpbm5lcl84SFFHIDEuMDVzIGluZmluaXRlfS5zcGlubmVyX29YUHJ7YW5pbWF0aW9uLWRlbGF5Oi4xc30uc3Bpbm5lcl9aVExme2FuaW1hdGlvbi1kZWxheTouMnN9QGtleWZyYW1lcyBzcGlubmVyXzhIUUd7MCUsNTcuMTQle2FuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246Y3ViaWMtYmV6aWVyKDAuMzMsLjY2LC42NiwxKTt0cmFuc2Zvcm06dHJhbnNsYXRlKDApfTI4LjU3JXthbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOmN1YmljLWJlemllcigwLjMzLDAsLjY2LC4zMyk7dHJhbnNmb3JtOnRyYW5zbGF0ZVkoLTZweCl9MTAwJXt0cmFuc2Zvcm06dHJhbnNsYXRlKDApfX08L3N0eWxlPjxjaXJjbGUgY2xhc3M9J3NwaW5uZXJfcU04MycgY3g9JzQnIGN5PScxMicgcj0nMycvPjxjaXJjbGUgY2xhc3M9J3NwaW5uZXJfcU04MyBzcGlubmVyX29YUHInIGN4PScxMicgY3k9JzEyJyByPSczJy8+PGNpcmNsZSBjbGFzcz0nc3Bpbm5lcl9xTTgzIHNwaW5uZXJfWlRMZicgY3g9JzIwJyBjeT0nMTInIHI9JzMnLz48L3N2Zz4=);\n background-repeat: no-repeat;\n background-position: center;\n}\n","import { Component, Host, h, Prop, State, Build } from '@stencil/core';\nimport {\n ArrowLeftEndOnRectangleIcon,\n ArrowRightEndOnRectangleIcon,\n ArrowDownOnSquareIcon,\n ViewfinderCircleIcon,\n XMarkIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from './heroicons';\n\nconst allowedHosts = [\"chatbots.dimagi.com\"];\n\n@Component({\n tag: 'open-chat-studio-widget',\n styleUrl: 'ocs-chat.css',\n shadow: true,\n})\nexport class OcsChat {\n\n /\n The URL of the bot to connect to.\n /\n @Prop() botUrl!: string;\n\n /\n The text to display on the button.\n /\n @Prop() buttonText: string = \"Chat\";\n\n /\n Whether the chat widget is visible on load.\n /\n @Prop({ mutable: true }) visible: boolean = false;\n\n /\n The initial position of the chat widget on the screen.\n /\n @Prop({ mutable: true }) position: 'left' \| 'center' \| 'right' = 'right';\n\n /\n Whether the chat widget is initially expanded.\n */\n @Prop({ mutable: true }) expanded: boolean = false;\n\n @State() loaded: boolean = false;\n @State() error: string = \"\";\n\n componentWillLoad() {\n this.loaded = this.visible;\n if (!Build.isDev) {\n try {\n const url = new URL(this.botUrl);\n if (!allowedHosts.includes(url.host)) {\n this.error = `Invalid Bot URL: ${this.botUrl}`;\n }\n } catch {\n this.error = `Invalid Bot URL: ${this.botUrl}`;\n }\n }\n }\n\n load() {\n this.visible = !this.visible;\n this.loaded = true;\n }\n\n setPosition(position: 'left' \| 'center' \| 'right') {\n if (position === this.position) return;\n this.position = position;\n }\n\n toggleSize() {\n this.expanded = !this.expanded;\n }\n\n getPositionClasses() {\n const baseClasses = `fixed w-full sm:w-[450px] ${this.expanded ? 'h-5/6' : 'h-3/5'} bg-white border border-gray-200 shadow-lg rounded-lg overflow-hidden flex flex-col`;\n\n const positionClasses = {\n left: 'left-0 sm:left-5 bottom-0 sm:bottom-5',\n right: 'right-0 sm:right-5 bottom-0 sm:bottom-5',\n center: 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'\n }[this.position];\n\n return `${baseClasses} ${positionClasses}`;\n }\n\n render() {\n if (this.error) {\n return (\n <Host>\n <p>{this.error}</p>\n </Host>\n );\n }\n\n return (\n <Host>\n <button class=\"btn\" onClick={() => this.load()}>{this.buttonText}</button>\n {this.visible && (\n <div class={this.getPositionClasses()}>\n <div class=\"flex justify-between items-center px-2 py-2 border-b border-gray-100\">\n <div class=\"flex gap-1\">\n <button\n class={{\n 'hidden sm:block p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'left',\n 'text-gray-500': this.position !== 'left'\n }}\n onClick={() => this.setPosition('left')}\n aria-label=\"Dock to left\"\n title=\"Dock to left\"\n >\n <ArrowLeftEndOnRectangleIcon/>\n </button>\n <button\n class={{\n 'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'center',\n 'text-gray-500': this.position !== 'center'\n }}\n onClick={() => this.setPosition('center')}\n aria-label=\"Center\"\n title=\"Center\"\n >\n <ViewfinderCircleIcon/>\n </button>\n <button\n class={{\n 'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,\n 'text-blue-600': this.position === 'right',\n 'text-gray-500': this.position !== 'right'\n }}\n onClick={() => this.setPosition('right')}\n aria-label=\"Dock to right\"\n title=\"Dock to right\"\n >\n <span class=\"hidden sm:block\"><ArrowRightEndOnRectangleIcon/></span>\n <span class=\"sm:hidden\"><ArrowDownOnSquareIcon/></span>\n </button>\n </div>\n <div class=\"flex gap-1\">\n <button\n class=\"p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500\"\n onClick={() => this.toggleSize()}\n aria-label={this.expanded ? \"Collapse\" : \"Expand\"}\n title={this.expanded ? \"Collapse\" : \"Expand\"}\n >\n {this.expanded ? <ChevronDownIcon/> : <ChevronUpIcon/>}\n </button>\n <button\n class=\"p-1.5 hover:bg-gray-100 rounded-md transition-colors duration-200 text-gray-500\"\n onClick={() => this.visible = false}\n aria-label=\"Close\"\n >\n <XMarkIcon/>\n </button>\n </div>\n </div>\n {this.loaded && (\n <iframe\n class=\"flex-grow w-full border-none iframe-placeholder\"\n src={this.botUrl}\n ></iframe>\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/{index-3870d3ba.js → index-b73ebc69.js} RENAMED Viewed

@@ -2,7 +2,7 @@ const NAMESPACE = 'open-chat-studio-widget';
 const BUILD = /* open-chat-studio-widget */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: false, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
 /*
- Stencil Client Platform v4.25.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -372,7 +372,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
               styleContainerNode.append(styleElm);
             }
           }
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD") {
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             styleContainerNode.insertBefore(styleElm, null);
           }
         }
@@ -397,7 +397,7 @@ var attachStyles = (hostRef) => {
   const scopeId2 = addStyle(
     elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
     cmpMeta);
-  if (flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
+  if ((flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */ || flags & 128 /* shadowNeedsScopedCss */)) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
   }
@@ -718,7 +718,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
   rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
-  useNativeShadowDom = (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+  useNativeShadowDom = !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
   patch(oldVNode, rootVnode, isInitialLoad);
 };
@@ -1263,4 +1263,4 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 export { Host as H, bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-3870d3ba.js.map
+//# sourceMappingURL=index-b73ebc69.js.map