open-chat-studio-widget 0.1.0 → 0.2.0

package/dist/collection/components/ocs-chat/ocs-chat.js

@@ -1,10 +1,24 @@
 import { Host, h, Build } from "@stencil/core";
+import { ArrowLeftEndOnRectangleIcon, ArrowRightEndOnRectangleIcon, ViewfinderCircleIcon, XMarkIcon, ChevronDownIcon, ChevronUpIcon, } from "./heroicons";
 const allowedHosts = ["chatbots.dimagi.com"];
 export class OcsChat {
     constructor() {
+        /**
+         * The text to display on the button.
+         */
         this.buttonText = "Chat";
+        /**
+         * Whether the chat widget is visible on load.
+         */
         this.visible = false;
-        // once set this will stay true so that the iframe doesn't reload
+        /**
+         * The initial position of the chat widget on the screen.
+         */
+        this.position = 'right';
+        /**
+         * Whether the chat widget is initially expanded.
+         */
+        this.expanded = false;
         this.loaded = false;
         this.error = "";
     }
@@ -12,25 +26,54 @@ export class OcsChat {
         this.loaded = this.visible;
         if (!Build.isDev) {
             try {
-                const url = new URL(this.boturl);
+                const url = new URL(this.botUrl);
                 if (!allowedHosts.includes(url.host)) {
-                    this.error = `Invalid Bot URL: ${this.boturl}`;
+                    this.error = `Invalid Bot URL: ${this.botUrl}`;
                 }
             }
             catch (_a) {
-                this.error = `Invalid Bot URL: ${this.boturl}`;
+                this.error = `Invalid Bot URL: ${this.botUrl}`;
             }
         }
     }
     load() {
-        this.visible = true;
+        this.visible = !this.visible;
         this.loaded = true;
     }
+    setPosition(position) {
+        if (position === this.position)
+            return;
+        this.position = position;
+    }
+    toggleSize() {
+        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 positionClasses = {
+            left: 'left-5 bottom-5',
+            right: 'right-5 bottom-5',
+            center: 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
+        }[this.position];
+        return `${baseClasses} ${positionClasses}`;
+    }
     render() {
         if (this.error) {
             return (h(Host, null, h("p", null, this.error)));
         }
-        return (h(Host, null, h("button", { class: "btn", onClick: () => this.load() }, this.buttonText), h("dialog", Object.assign({ id: "open-chat-studio-widget", class: "modal" }, (this.visible && { open: true }), { onClose: () => this.visible = false }), h("form", { method: "dialog", class: "modal-box h-full flex flex-col" }, h("button", { class: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2 text-gray-700" }, "\u2715"), this.loaded && h("iframe", { class: "w-full flex-grow iframe-placeholder", src: this.boturl }), h("p", { class: "font-sans text-center mt-4 text-sm text-gray-700" }, "\u26A1 Powered by ", h("a", { class: "link", href: "https://chatbots.dimagi.com" }, "Open Chat Studio"))), h("form", { method: "dialog", class: "modal-backdrop" }, h("button", null, "close")))));
+        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,
+                '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: {
+                'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,
+                'text-blue-600': this.position === 'center',
+                'text-gray-500': this.position !== 'center'
+            }, onClick: () => this.setPosition('center'), "aria-label": "Center", title: "Center" }, h(ViewfinderCircleIcon, null)), h("button", { class: {
+                '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 }))))));
     }
     static get is() { return "open-chat-studio-widget"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +89,7 @@ export class OcsChat {
     }
     static get properties() {
         return {
-            "boturl": {
+            "botUrl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -58,11 +101,11 @@ export class OcsChat {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The URL of the bot to connect to."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "boturl",
+                "attribute": "bot-url",
                 "reflect": false
             },
             "buttonText": {
@@ -77,7 +120,7 @@ export class OcsChat {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The text to display on the button."
                 },
                 "getter": false,
                 "setter": false,
@@ -97,13 +140,53 @@ export class OcsChat {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether the chat widget is visible on load."
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "visible",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'left' | 'center' | 'right'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial position of the chat widget on the screen."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'right'"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the chat widget is initially expanded."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expanded",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ocs-chat.js","sourceRoot":"","sources":["../../../src/components/ocs-chat/ocs-chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAErE,MAAM,YAAY,GAAG,CAAC,qBAAqB,CAAC,CAAC;AAQ7C,MAAM,OAAO,OAAO;IALpB;QAQU,eAAU,GAAW,MAAM,CAAC;QACX,YAAO,GAAY,KAAK,CAAC;QAElD,iEAAiE;QACxD,WAAM,GAAY,KAAK,CAAC;QAExB,UAAK,GAAW,EAAE,CAAC;KA6C7B;IA3CC,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,IAAI,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,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;QACD,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,KAAK,EAAC,KAAK,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,IAAG,IAAI,CAAC,UAAU,CAAU;YAC1E,4BAAQ,EAAE,EAAC,yBAAyB,EAAC,KAAK,EAAC,OAAO,IAAK,CAAC,IAAI,CAAC,OAAO,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,CAAC,IAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK;gBACvH,YAAM,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,gCAAgC;oBAC1D,cAAQ,KAAK,EAAC,sEAAsE,aAAW;oBAC9F,IAAI,CAAC,MAAM,IAAI,cAAQ,KAAK,EAAC,qCAAqC,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,GAAW;oBAC/F,SAAG,KAAK,EAAC,kDAAkD;;wBAAc,SAAG,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,6BAA6B,uBAAqB,CAAI,CAC/I;gBACP,YAAM,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,gBAAgB;oBAC1C,0BAAsB,CACjB,CACA,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h, Prop, State, Build} from '@stencil/core';\n\nconst allowedHosts = [\"chatbots.dimagi.com\"];\n\n\n@Component({\n  tag: 'open-chat-studio-widget',\n  styleUrl: 'ocs-chat.css',\n  shadow: true,\n})\nexport class OcsChat {\n\n  @Prop() boturl!: string;\n  @Prop() buttonText: string = \"Chat\";\n  @Prop({ mutable: true }) visible: boolean = false;\n\n  // once set this will stay true so that the iframe doesn't reload\n  @State() loaded: boolean = false;\n\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 = true;\n    this.loaded = true;\n  }\n\n  render() {\n    if (this.error) {\n      return (\n        <Host>\n          <p>{this.error}</p>\n        </Host>\n      );\n    }\n    return (\n      <Host>\n        <button class=\"btn\" onClick={() => this.load()}>{this.buttonText}</button>\n        <dialog id=\"open-chat-studio-widget\" class=\"modal\" {...(this.visible && {open:true})} onClose={() => this.visible = false}>\n          <form method=\"dialog\" class=\"modal-box h-full flex flex-col\">\n            <button class=\"btn btn-sm btn-circle btn-ghost absolute right-2 top-2 text-gray-700\">✕</button>\n            {this.loaded && <iframe class=\"w-full flex-grow iframe-placeholder\" src={this.boturl}></iframe>}\n            <p class=\"font-sans text-center mt-4 text-sm text-gray-700\">⚡ Powered by <a class=\"link\" href=\"https://chatbots.dimagi.com\">Open Chat Studio</a></p>\n          </form>\n          <form method=\"dialog\" class=\"modal-backdrop\">\n            <button>close</button>\n          </form>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"]}
+{"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  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"]}

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

@@ -1,6 +1,31 @@
-import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, Build, Host } from '@stencil/core/internal/client';
 
-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:hsl(var(--b1) / var(--tw-bg-opacity, 1));color:hsl(var(--bc) / var(--tw-text-opacity, 1))}html{-webkit-tap-highlight-color:transparent}:root{color-scheme:light;--pf:259 94% 44%;--sf:314 100% 40%;--af:174 75% 39%;--nf:214 20% 14%;--in:198 93% 60%;--su:158 64% 52%;--wa:43 96% 56%;--er:0 91% 71%;--inc:198 100% 12%;--suc:158 100% 10%;--wac:43 100% 11%;--erc:0 100% 14%;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-text-case:uppercase;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:259 94% 51%;--pc:259 96% 91%;--s:314 100% 47%;--sc:314 100% 91%;--a:174 75% 46%;--ac:174 75% 11%;--n:214 20% 21%;--nc:212 19% 87%;--b1:0 0% 100%;--b2:0 0% 95%;--b3:180 2% 90%;--bc:215 28% 17%}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--pf:262 80% 43%;--sf:316 70% 43%;--af:175 70% 34%;--in:198 93% 60%;--su:158 64% 52%;--wa:43 96% 56%;--er:0 91% 71%;--inc:198 100% 12%;--suc:158 100% 10%;--wac:43 100% 11%;--erc:0 100% 14%;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-text-case:uppercase;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:262 80% 50%;--pc:0 0% 100%;--s:316 70% 50%;--sc:0 0% 100%;--a:175 70% 41%;--ac:0 0% 100%;--n:213 18% 20%;--nf:212 17% 17%;--nc:220 13% 69%;--b1:212 18% 14%;--b2:213 18% 12%;--b3:213 18% 10%;--bc:220 13% 69%}}[data-theme=light]{color-scheme:light;--pf:259 94% 44%;--sf:314 100% 40%;--af:174 75% 39%;--nf:214 20% 14%;--in:198 93% 60%;--su:158 64% 52%;--wa:43 96% 56%;--er:0 91% 71%;--inc:198 100% 12%;--suc:158 100% 10%;--wac:43 100% 11%;--erc:0 100% 14%;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-text-case:uppercase;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:259 94% 51%;--pc:259 96% 91%;--s:314 100% 47%;--sc:314 100% 91%;--a:174 75% 46%;--ac:174 75% 11%;--n:214 20% 21%;--nc:212 19% 87%;--b1:0 0% 100%;--b2:0 0% 95%;--b3:180 2% 90%;--bc:215 28% 17%}[data-theme=dark]{color-scheme:dark;--pf:262 80% 43%;--sf:316 70% 43%;--af:175 70% 34%;--in:198 93% 60%;--su:158 64% 52%;--wa:43 96% 56%;--er:0 91% 71%;--inc:198 100% 12%;--suc:158 100% 10%;--wac:43 100% 11%;--erc:0 100% 14%;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-text-case:uppercase;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:262 80% 50%;--pc:0 0% 100%;--s:316 70% 50%;--sc:0 0% 100%;--a:175 70% 41%;--ac:0 0% 100%;--n:213 18% 20%;--nf:212 17% 17%;--nc:220 13% 69%;--b1:212 18% 14%;--b2:213 18% 12%;--b3:213 18% 10%;--bc:220 13% 69%}.btn{display:inline-flex;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-color:transparent;border-color:hsl(var(--b2) / var(--tw-border-opacity));text-align:center;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-duration:200ms;border-radius:var(--rounded-btn, 0.5rem);height:3rem;padding-left:1rem;padding-right:1rem;min-height:3rem;font-size:0.875rem;line-height:1em;gap:0.5rem;font-weight:600;text-decoration-line:none;border-width:var(--border-btn, 1px);animation:button-pop var(--animation-btn, 0.25s) ease-out;text-transform:var(--btn-text-case, uppercase);--tw-border-opacity:1;--tw-bg-opacity:1;background-color:hsl(var(--b2) / var(--tw-bg-opacity));--tw-text-opacity:1;color:hsl(var(--bc) / var(--tw-text-opacity));outline-color:hsl(var(--bc) / 1)}.btn-disabled,.btn[disabled],.btn:disabled{pointer-events:none}.btn-circle{height:3rem;width:3rem;border-radius:9999px;padding:0px}.btn-group>input[type=\"radio\"].btn{-webkit-appearance:none;-moz-appearance:none;appearance:none}.btn-group>input[type=\"radio\"].btn:before{content:attr(data-title)}.btn:is(input[type=\"checkbox\"]),.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)}@media (hover: hover){.btn:hover{--tw-border-opacity:1;border-color:hsl(var(--b3) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:hsl(var(--b3) / var(--tw-bg-opacity))}.btn.glass:hover{--glass-opacity:25%;--glass-border-opacity:15%}.btn-ghost:hover{--tw-border-opacity:0;background-color:hsl(var(--bc) / var(--tw-bg-opacity));--tw-bg-opacity:0.2}.btn-disabled:hover,.btn[disabled]:hover,.btn:disabled:hover{--tw-border-opacity:0;background-color:hsl(var(--n) / var(--tw-bg-opacity));--tw-bg-opacity:0.2;color:hsl(var(--bc) / var(--tw-text-opacity));--tw-text-opacity:0.2}.btn:is(input[type=\"checkbox\"]:checked):hover,.btn:is(input[type=\"radio\"]:checked):hover{--tw-border-opacity:1;border-color:hsl(var(--pf) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:hsl(var(--pf) / var(--tw-bg-opacity))}}.link{cursor:pointer;text-decoration-line:underline}.modal{pointer-events:none;position:fixed;inset:0px;margin:0px;display:grid;height:100%;max-height:none;width:100%;max-width:none;justify-items:center;padding:0px;opacity:0;overscroll-behavior:contain;z-index:999;background-color:transparent;color:inherit;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:transform, opacity, visibility;overflow-y:hidden}:where(.modal){align-items:center}.modal-box{max-height:calc(100vh - 5em);grid-column-start:1;grid-row-start:1;width:91.666667%;max-width:32rem;--tw-scale-x:.9;--tw-scale-y:.9;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));--tw-bg-opacity:1;background-color:hsl(var(--b1) / var(--tw-bg-opacity));padding:1.5rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-duration:200ms;border-top-left-radius:var(--rounded-box, 1rem);border-top-right-radius:var(--rounded-box, 1rem);border-bottom-left-radius:var(--rounded-box, 1rem);border-bottom-right-radius:var(--rounded-box, 1rem);box-shadow:rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;overflow-y:auto;overscroll-behavior:contain}.modal-open,.modal:target,.modal-toggle:checked+.modal,.modal[open]{pointer-events:auto;visibility:visible;opacity:1}:root:has(:is(.modal-open,.modal:target,.modal-toggle:checked+.modal,.modal[open])){overflow:hidden}.btn:active:hover,.btn:active:focus{animation:button-pop 0s ease-out;transform:scale(var(--btn-focus-scale, 0.97))}.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-ghost{border-width:1px;border-color:transparent;background-color:transparent;color:currentColor;--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-ghost.btn-active{--tw-border-opacity:0;background-color:hsl(var(--bc) / var(--tw-bg-opacity));--tw-bg-opacity:0.2}.btn.btn-disabled,.btn[disabled],.btn:disabled{--tw-border-opacity:0;background-color:hsl(var(--n) / var(--tw-bg-opacity));--tw-bg-opacity:0.2;color:hsl(var(--bc) / var(--tw-text-opacity));--tw-text-opacity:0.2}.btn-group>input[type=\"radio\"]:checked.btn,.btn-group>.btn-active{--tw-border-opacity:1;border-color:hsl(var(--p) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:hsl(var(--p) / var(--tw-bg-opacity));--tw-text-opacity:1;color:hsl(var(--pc) / var(--tw-text-opacity))}.btn-group>input[type=\"radio\"]:checked.btn:focus-visible,.btn-group>.btn-active:focus-visible{outline-style:solid;outline-width:2px;outline-color:hsl(var(--p) / 1)}.btn:is(input[type=\"checkbox\"]:checked),.btn:is(input[type=\"radio\"]:checked){--tw-border-opacity:1;border-color:hsl(var(--p) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:hsl(var(--p) / var(--tw-bg-opacity));--tw-text-opacity:1;color:hsl(var(--pc) / var(--tw-text-opacity))}.btn:is(input[type=\"checkbox\"]:checked):focus-visible,.btn:is(input[type=\"radio\"]:checked):focus-visible{outline-color:hsl(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}}.link:focus{outline:2px solid transparent;outline-offset:2px}.link:focus-visible{outline:2px solid currentColor;outline-offset:2px}.modal:not(dialog:not(.modal-open)),.modal::backdrop{background-color:rgba(0, 0, 0, 0.3);animation:modal-pop 0.2s ease-out}.modal-backdrop{z-index:-1;grid-column-start:1;grid-row-start:1;display:grid;align-self:stretch;justify-self:stretch;color:transparent}.modal-open .modal-box,.modal-toggle:checked+.modal .modal-box,.modal:target .modal-box,.modal[open] .modal-box{--tw-translate-y:0px;--tw-scale-x:1;--tw-scale-y:1;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))}@keyframes modal-pop{0%{opacity:0}}@keyframes progress-loading{50%{background-position-x:-115%}}@keyframes radiomark{0%{box-shadow:0 0 0 12px hsl(var(--b1)) inset,\n      0 0 0 12px hsl(var(--b1)) inset}50%{box-shadow:0 0 0 3px hsl(var(--b1)) inset,\n      0 0 0 3px hsl(var(--b1)) inset}100%{box-shadow:0 0 0 4px hsl(var(--b1)) inset,\n      0 0 0 4px hsl(var(--b1)) inset}}@keyframes rating-pop{0%{transform:translateY(-0.125em)}40%{transform:translateY(-0.125em)}100%{transform:translateY(0)}}@keyframes toast-pop{0%{transform:scale(0.9);opacity:0}100%{transform:scale(1);opacity:1}}.btn-sm{height:2rem;padding-left:0.75rem;padding-right:0.75rem;min-height:2rem;font-size:0.875rem}.btn-square:where(.btn-sm){height:2rem;width:2rem;padding:0px}.btn-circle:where(.btn-xs){height:1.5rem;width:1.5rem;border-radius:9999px;padding:0px}.btn-circle:where(.btn-sm){height:2rem;width:2rem;border-radius:9999px;padding:0px}.btn-circle:where(.btn-md){height:3rem;width:3rem;border-radius:9999px;padding:0px}.btn-circle:where(.btn-lg){height:4rem;width:4rem;border-radius:9999px;padding:0px}.btn-group .btn:not(:first-child):not(:last-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.btn-group .btn:first-child:not(:last-child){margin-left:-1px;margin-top:-0px;border-top-left-radius:var(--rounded-btn, 0.5rem);border-top-right-radius:0;border-bottom-left-radius:var(--rounded-btn, 0.5rem);border-bottom-right-radius:0}.btn-group .btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:var(--rounded-btn, 0.5rem);border-bottom-left-radius:0;border-bottom-right-radius:var(--rounded-btn, 0.5rem)}.btn-group-horizontal .btn:not(:first-child):not(:last-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.btn-group-horizontal .btn:first-child:not(:last-child){margin-left:-1px;margin-top:-0px;border-top-left-radius:var(--rounded-btn, 0.5rem);border-top-right-radius:0;border-bottom-left-radius:var(--rounded-btn, 0.5rem);border-bottom-right-radius:0}.btn-group-horizontal .btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:var(--rounded-btn, 0.5rem);border-bottom-left-radius:0;border-bottom-right-radius:var(--rounded-btn, 0.5rem)}.btn-group-vertical .btn:first-child:not(:last-child){margin-left:-0px;margin-top:-1px;border-top-left-radius:var(--rounded-btn, 0.5rem);border-top-right-radius:var(--rounded-btn, 0.5rem);border-bottom-left-radius:0;border-bottom-right-radius:0}.btn-group-vertical .btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:var(--rounded-btn, 0.5rem);border-bottom-right-radius:var(--rounded-btn, 0.5rem)}.modal-top :where(.modal-box){width:100%;max-width:none;--tw-translate-y:-2.5rem;--tw-scale-x:1;--tw-scale-y:1;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-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:var(--rounded-box, 1rem);border-bottom-right-radius:var(--rounded-box, 1rem)}.modal-middle :where(.modal-box){width:91.666667%;max-width:32rem;--tw-translate-y:0px;--tw-scale-x:.9;--tw-scale-y:.9;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-top-left-radius:var(--rounded-box, 1rem);border-top-right-radius:var(--rounded-box, 1rem);border-bottom-left-radius:var(--rounded-box, 1rem);border-bottom-right-radius:var(--rounded-box, 1rem)}.modal-bottom :where(.modal-box){width:100%;max-width:none;--tw-translate-y:2.5rem;--tw-scale-x:1;--tw-scale-y:1;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-bottom-right-radius:0px;border-bottom-left-radius:0px;border-top-left-radius:var(--rounded-box, 1rem);border-top-right-radius:var(--rounded-box, 1rem)}.visible{visibility:visible}.absolute{position:absolute}.right-2{right:0.5rem}.top-2{top:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-full{height:100%}.w-full{width:100%}.flex-grow{flex-grow:1}.flex-col{flex-direction:column}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / 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)}: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}#open-chat-studio-widget .modal-box{background-color:white}";
+const ArrowLeftEndOnRectangleIcon = () => {
+    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: "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" }));
+};
+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 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" }));
+};
+const XMarkIcon = () => {
+    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: "M6 18 18 6M6 6l12 12" }));
+};
+const ChevronUpIcon = () => {
+    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: "m4.5 15.75 7.5-7.5 7.5 7.5" }));
+};
+const ChevronDownIcon = () => {
+    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: "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 OpenChatStudioWidgetStyle0 = ocsChatCss;
 
 const allowedHosts = ["chatbots.dimagi.com"];
@@ -9,9 +34,22 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * The text to display on the button.
+         */
         this.buttonText = "Chat";
+        /**
+         * Whether the chat widget is visible on load.
+         */
         this.visible = false;
-        // once set this will stay true so that the iframe doesn't reload
+        /**
+         * The initial position of the chat widget on the screen.
+         */
+        this.position = 'right';
+        /**
+         * Whether the chat widget is initially expanded.
+         */
+        this.expanded = false;
         this.loaded = false;
         this.error = "";
     }
@@ -19,31 +57,62 @@ const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLEleme
         this.loaded = this.visible;
         if (!Build.isDev) {
             try {
-                const url = new URL(this.boturl);
+                const url = new URL(this.botUrl);
                 if (!allowedHosts.includes(url.host)) {
-                    this.error = `Invalid Bot URL: ${this.boturl}`;
+                    this.error = `Invalid Bot URL: ${this.botUrl}`;
                 }
             }
             catch (_a) {
-                this.error = `Invalid Bot URL: ${this.boturl}`;
+                this.error = `Invalid Bot URL: ${this.botUrl}`;
             }
         }
     }
     load() {
-        this.visible = true;
+        this.visible = !this.visible;
         this.loaded = true;
     }
+    setPosition(position) {
+        if (position === this.position)
+            return;
+        this.position = position;
+    }
+    toggleSize() {
+        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 positionClasses = {
+            left: 'left-5 bottom-5',
+            right: 'right-5 bottom-5',
+            center: 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
+        }[this.position];
+        return `${baseClasses} ${positionClasses}`;
+    }
     render() {
         if (this.error) {
             return (h(Host, null, h("p", null, this.error)));
         }
-        return (h(Host, null, h("button", { class: "btn", onClick: () => this.load() }, this.buttonText), h("dialog", Object.assign({ id: "open-chat-studio-widget", class: "modal" }, (this.visible && { open: true }), { onClose: () => this.visible = false }), h("form", { method: "dialog", class: "modal-box h-full flex flex-col" }, h("button", { class: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2 text-gray-700" }, "\u2715"), this.loaded && h("iframe", { class: "w-full flex-grow iframe-placeholder", src: this.boturl }), h("p", { class: "font-sans text-center mt-4 text-sm text-gray-700" }, "\u26A1 Powered by ", h("a", { class: "link", href: "https://chatbots.dimagi.com" }, "Open Chat Studio"))), h("form", { method: "dialog", class: "modal-backdrop" }, h("button", null, "close")))));
+        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,
+                '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: {
+                'p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100': true,
+                'text-blue-600': this.position === 'center',
+                'text-gray-500': this.position !== 'center'
+            }, onClick: () => this.setPosition('center'), "aria-label": "Center", title: "Center" }, h(ViewfinderCircleIcon, null)), h("button", { class: {
+                '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 }))))));
     }
     static get style() { return OpenChatStudioWidgetStyle0; }
 }, [1, "open-chat-studio-widget", {
-        "boturl": [1],
+        "botUrl": [1, "bot-url"],
         "buttonText": [1, "button-text"],
         "visible": [1028],
+        "position": [1025],
+        "expanded": [1028],
         "loaded": [32],
         "error": [32]
     }]);

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

@@ -1 +1 @@
-{"file":"open-chat-studio-widget.js","mappings":";;AAAA,MAAM,UAAU,GAAG,o5nBAAo5nB,CAAC;AACx6nB,mCAAe,UAAU;;ACCzB,MAAM,YAAY,GAAG,CAAC,qBAAqB,CAAC,CAAC;MAQhC,OAAO;IALpB;;;;QAQU,eAAU,GAAW,MAAM,CAAC;QACX,YAAO,GAAY,KAAK,CAAC;;QAGzC,WAAM,GAAY,KAAK,CAAC;QAExB,UAAK,GAAW,EAAE,CAAC;KA6C7B;IA3CC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YAChB,IAAI;gBACF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACjC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;oBACpC,IAAI,CAAC,KAAK,GAAG,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC;iBAChD;aACF;YAAC,WAAM;gBACN,IAAI,CAAC,KAAK,GAAG,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC;aAChD;SACF;KACF;IAED,IAAI;QACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACE,EAAC,IAAI,QACH,aAAI,IAAI,CAAC,KAAK,CAAK,CACd,EACP;SACH;QACD,QACE,EAAC,IAAI,QACH,cAAQ,KAAK,EAAC,KAAK,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,IAAG,IAAI,CAAC,UAAU,CAAU,EAC1E,4BAAQ,EAAE,EAAC,yBAAyB,EAAC,KAAK,EAAC,OAAO,KAAM,IAAI,CAAC,OAAO,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,KAAG,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,KAAK,KACvH,YAAM,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,gCAAgC,IAC1D,cAAQ,KAAK,EAAC,sEAAsE,aAAW,EAC9F,IAAI,CAAC,MAAM,IAAI,cAAQ,KAAK,EAAC,qCAAqC,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,GAAW,EAC/F,SAAG,KAAK,EAAC,kDAAkD,0BAAc,SAAG,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,6BAA6B,uBAAqB,CAAI,CAC/I,EACP,YAAM,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,gBAAgB,IAC1C,0BAAsB,CACjB,CACA,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ocs-chat/ocs-chat.css?tag=open-chat-studio-widget&encapsulation=shadow","src/components/ocs-chat/ocs-chat.tsx"],"sourcesContent":["@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\n:host {\n  display: block;\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.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\n#open-chat-studio-widget .modal-box {\n  background-color: white;\n}\n","import {Component, Host, h, Prop, State, Build} from '@stencil/core';\n\nconst allowedHosts = [\"chatbots.dimagi.com\"];\n\n\n@Component({\n  tag: 'open-chat-studio-widget',\n  styleUrl: 'ocs-chat.css',\n  shadow: true,\n})\nexport class OcsChat {\n\n  @Prop() boturl!: string;\n  @Prop() buttonText: string = \"Chat\";\n  @Prop({ mutable: true }) visible: boolean = false;\n\n  // once set this will stay true so that the iframe doesn't reload\n  @State() loaded: boolean = false;\n\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 = true;\n    this.loaded = true;\n  }\n\n  render() {\n    if (this.error) {\n      return (\n        <Host>\n          <p>{this.error}</p>\n        </Host>\n      );\n    }\n    return (\n      <Host>\n        <button class=\"btn\" onClick={() => this.load()}>{this.buttonText}</button>\n        <dialog id=\"open-chat-studio-widget\" class=\"modal\" {...(this.visible && {open:true})} onClose={() => this.visible = false}>\n          <form method=\"dialog\" class=\"modal-box h-full flex flex-col\">\n            <button class=\"btn btn-sm btn-circle btn-ghost absolute right-2 top-2 text-gray-700\">✕</button>\n            {this.loaded && <iframe class=\"w-full flex-grow iframe-placeholder\" src={this.boturl}></iframe>}\n            <p class=\"font-sans text-center mt-4 text-sm text-gray-700\">⚡ Powered by <a class=\"link\" href=\"https://chatbots.dimagi.com\">Open Chat Studio</a></p>\n          </form>\n          <form method=\"dialog\" class=\"modal-backdrop\">\n            <button>close</button>\n          </form>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"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}