open-chat-studio-widget 0.1.0

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

@@ -0,0 +1,117 @@
+import { Host, h, Build } from "@stencil/core";
+const allowedHosts = ["chatbots.dimagi.com"];
+export class OcsChat {
+    constructor() {
+        this.buttonText = "Chat";
+        this.visible = false;
+        // once set this will stay true so that the iframe doesn't reload
+        this.loaded = false;
+        this.error = "";
+    }
+    componentWillLoad() {
+        this.loaded = this.visible;
+        if (!Build.isDev) {
+            try {
+                const url = new URL(this.boturl);
+                if (!allowedHosts.includes(url.host)) {
+                    this.error = `Invalid Bot URL: ${this.boturl}`;
+                }
+            }
+            catch (_a) {
+                this.error = `Invalid Bot URL: ${this.boturl}`;
+            }
+        }
+    }
+    load() {
+        this.visible = true;
+        this.loaded = true;
+    }
+    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")))));
+    }
+    static get is() { return "open-chat-studio-widget"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ocs-chat.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ocs-chat.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "boturl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "boturl",
+                "reflect": false
+            },
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "button-text",
+                "reflect": false,
+                "defaultValue": "\"Chat\""
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "visible",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loaded": {},
+            "error": {}
+        };
+    }
+}
+//# sourceMappingURL=ocs-chat.js.map

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

@@ -0,0 +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"]}

package/dist/collection/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}

package/dist/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":"","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/open-chat-studio-widget.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface OpenChatStudioWidget extends Components.OpenChatStudioWidget, HTMLElement {}
+export const OpenChatStudioWidget: {
+    prototype: OpenChatStudioWidget;
+    new (): OpenChatStudioWidget;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,69 @@
+import { proxyCustomElement, HTMLElement, Build, h, 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 OpenChatStudioWidgetStyle0 = ocsChatCss;
+
+const allowedHosts = ["chatbots.dimagi.com"];
+const OcsChat = /*@__PURE__*/ proxyCustomElement(class OcsChat extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.buttonText = "Chat";
+        this.visible = false;
+        // once set this will stay true so that the iframe doesn't reload
+        this.loaded = false;
+        this.error = "";
+    }
+    componentWillLoad() {
+        this.loaded = this.visible;
+        if (!Build.isDev) {
+            try {
+                const url = new URL(this.boturl);
+                if (!allowedHosts.includes(url.host)) {
+                    this.error = `Invalid Bot URL: ${this.boturl}`;
+                }
+            }
+            catch (_a) {
+                this.error = `Invalid Bot URL: ${this.boturl}`;
+            }
+        }
+    }
+    load() {
+        this.visible = true;
+        this.loaded = true;
+    }
+    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")))));
+    }
+    static get style() { return OpenChatStudioWidgetStyle0; }
+}, [1, "open-chat-studio-widget", {
+        "boturl": [1],
+        "buttonText": [1, "button-text"],
+        "visible": [1028],
+        "loaded": [32],
+        "error": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["open-chat-studio-widget"];
+    components.forEach(tagName => { switch (tagName) {
+        case "open-chat-studio-widget":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, OcsChat);
+            }
+            break;
+    } });
+}
+
+const OpenChatStudioWidget = OcsChat;
+const defineCustomElement = defineCustomElement$1;
+
+export { OpenChatStudioWidget, defineCustomElement };
+
+//# sourceMappingURL=open-chat-studio-widget.js.map

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

@@ -0,0 +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}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,5 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };
+
+//# sourceMappingURL=app-globals-0f993ce5.js.map

package/dist/esm/app-globals-0f993ce5.js.map

@@ -0,0 +1 @@
+{"file":"app-globals-0f993ce5.js","mappings":"AAAY,MAAC,aAAa,GAAG,MAAM;;;;","names":[],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"version":3}