@olotalk/widget-loader 0.1.0

package/README.md

@@ -0,0 +1,150 @@
+# @olotalk/widget-loader
+
+Embed the [Olotalk](https://olotalk.com) AI chat widget on any website with a single `<script>` tag — no framework required.
+
+The loader handles config fetching, browser compatibility detection, and dynamic loading of the widget bundle from the CDN. Your visitors get a grounded, RAG-powered chat assistant that answers questions based on your own content.
+
+---
+
+## Quick start
+
+```html
+<script
+  src="https://cdn.jsdelivr.net/npm/@olotalk/widget-loader/dist/loader.iife.js"
+  data-olotalk-widget-id="YOUR_WIDGET_ID"
+  data-olotalk-origin="https://api.olotalk.com"
+></script>
+```
+
+Paste this before `</body>` on any page. The widget appears immediately as a floating launcher in the bottom-right corner.
+
+> Get your widget ID from the [Olotalk dashboard](https://olotalk.com).
+
+---
+
+## Configuration
+
+### Via HTML attributes
+
+All attributes are read from the `<script>` tag itself.
+
+| Attribute | Type | Description |
+|---|---|---|
+| `data-olotalk-widget-id` | `string` | **Required.** Your widget ID from the dashboard. |
+| `data-olotalk-origin` | `string` | Base URL of your Olotalk API (e.g. `https://api.olotalk.com`). Defaults to current page origin. |
+| `data-olotalk-locale` | `string` | Force a display language: `"en"`, `"fr"`, `"en-CA"`, `"fr-CA"`. Defaults to browser language. |
+| `data-olotalk-cdn-base` | `string` | Override the widget asset base URL (for self-hosting). |
+
+### Via `window.OlotalkConfig`
+
+Declare a global config object **before** the loader script for programmatic setup:
+
+```html
+<script>
+  window.OlotalkConfig = {
+    widgetId: "YOUR_WIDGET_ID",
+    origin: "https://api.olotalk.com",
+    locale: "fr",
+    theme: "dark",
+    placement: "embedded",
+    mount: "#chat-container",
+  };
+</script>
+<script src="https://cdn.jsdelivr.net/npm/@olotalk/widget-loader/dist/loader.iife.js"></script>
+```
+
+### Full config reference
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `widgetId` | `string` | — | **Required.** Your widget ID. |
+| `origin` | `string` | `window.location.origin` | Base URL of your Olotalk API. |
+| `locale` | `string` | Browser language | Force language: `"en"` \| `"fr"` \| `"en-CA"` \| `"fr-CA"`. |
+| `theme` | `"light"` \| `"dark"` \| `object` | `"light"` | Color scheme or custom theme overrides. |
+| `placement` | `"floating"` \| `"embedded"` | `"floating"` | Floating launcher button or inline panel. |
+| `mount` | `string` | `document.body` | CSS selector for the widget mount point (use with `"embedded"`). |
+| `version` | `string` | `"latest"` | Pin a specific `@olotalk/widget` npm version (e.g. `"0.1.0"`). |
+| `cdnBase` | `string` | jsDelivr CDN | Override widget asset base URL for self-hosting. |
+| `cssUrl` | `string` | Auto-resolved | Override the widget CSS URL. In a future release this will be provided automatically by the widget config from the dashboard. |
+
+---
+
+## JavaScript API
+
+The loader exposes a global `Olotalk()` command queue. You can call it before or after the script loads.
+
+```js
+// Open or close the panel programmatically
+Olotalk('open')
+Olotalk('close')
+
+// Re-initialize with a different config
+Olotalk('init', { locale: 'fr' })
+
+// Remove the widget from the page entirely
+Olotalk('destroy')
+```
+
+Commands queued before the widget loads are replayed automatically once it is ready.
+
+---
+
+## Version pinning
+
+By default, the loader fetches the `latest` published version of `@olotalk/widget` from jsDelivr. To lock a specific version:
+
+```html
+<!-- Pin widget bundle to a specific version -->
+<script
+  src="https://cdn.jsdelivr.net/npm/@olotalk/widget-loader/dist/loader.iife.js"
+  data-olotalk-widget-id="YOUR_WIDGET_ID"
+  data-olotalk-version="0.1.0"
+></script>
+```
+
+Or pin the loader itself by version:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@olotalk/widget-loader@0.0.1/dist/loader.iife.js" ...></script>
+```
+
+---
+
+## Self-hosting
+
+To serve widget assets from your own server instead of jsDelivr:
+
+```html
+<script
+  src="/path/to/loader.iife.js"
+  data-olotalk-widget-id="YOUR_WIDGET_ID"
+  data-olotalk-cdn-base="/assets/widget"
+></script>
+```
+
+The loader will fetch `olotalk-widget.js`, `olotalk-widget.iife.js`, and `olotalk-widget.css` from the provided base URL.
+
+---
+
+## npm install
+
+If you are using a bundler or framework, you can import the loader directly:
+
+```bash
+npm install @olotalk/widget-loader
+```
+
+```ts
+import { ensureWidget } from '@olotalk/widget-loader'
+
+ensureWidget({
+  widgetId: 'YOUR_WIDGET_ID',
+  origin: 'https://api.olotalk.com',
+})
+```
+
+---
+
+## License
+
+MIT © [Olotalk](https://olotalk.com)

package/dist/loader.iife.js

@@ -0,0 +1 @@
+var OlotalkWidgetLoader=(function(w){"use strict";const a=window,g=((t,e)=>{(g.q||(g.q=[])).push([t,e])});a.Olotalk||(a.Olotalk=g);function y(){var u;const t=document.currentScript;let e={};try{const s=(u=t==null?void 0:t.dataset)==null?void 0:u.olotalk;s&&(e=JSON.parse(s))}catch{}const i=(t==null?void 0:t.dataset)||{},o={...a.OlotalkConfig||{},...e||{}},l=i.olotalkWidgetId||o.widgetId||o.siteId,c=i.olotalkOrigin||o.origin,m=i.olotalkCdnBase||o.cdnBase,h=i.olotalkLocale||o.locale;return{...o,widgetId:l,origin:c,cdnBase:m,locale:h}}function W(t){if(!t)return window.location.origin;try{const e=new URL(t);return e.pathname.endsWith("/api")&&(e.pathname=e.pathname.replace(/\/api$/,"")),e.origin}catch{return window.location.origin}}function C(t,e){if(!e||e.length===0)return!0;const i=t.toLowerCase();return e.some(o=>{if(!o)return!1;const l=o.toLowerCase();if(l===i)return!0;if(l.startsWith("*.")){const c=l.slice(2);return i===c||i.endsWith(`.${c}`)}return!1})}async function b(t,e){const i=new URL(`/public/v1/widgets/${e}/config`,t),o=await fetch(i.toString());if(!o.ok)throw new Error(`Config fetch failed (${o.status})`);return o.json()}function E(){return"noModule"in document.createElement("script")}async function S(t){return import(t)}function L(t){return new Promise((e,i)=>{const o=document.createElement("script");o.src=t,o.async=!0,o.onload=()=>e(),o.onerror=()=>i(new Error("Failed to load "+t)),document.head.appendChild(o)})}let n=null,d=null;const k=function(t,e){var i,o,l;try{switch(t){case"init":return f(e);case"destroy":return(i=n==null?void 0:n.destroy)==null?void 0:i.call(n).finally(()=>{n=null});case"open":return(o=n==null?void 0:n.open)==null?void 0:o.call(n);case"close":return(l=n==null?void 0:n.close)==null?void 0:l.call(n);default:console.warn("[Olotalk] Unknown command:",t)}}catch(c){console.error("[Olotalk] Command error:",c)}};async function $(){var p,O;const t=y(),e=t.widgetId||t.siteId;if(!e){console.error("[Olotalk] Missing required 'widgetId' in config.");return}const i=W(t.origin);let o=null;try{o=await b(i,e)}catch(r){console.error("[Olotalk] Failed to fetch widget config:",r);return}if(!C(window.location.hostname,o.allowedDomains)){console.warn("[Olotalk] Widget disabled for this domain.");return}const l=t.cdnBase||`https://cdn.jsdelivr.net/npm/@olotalk/widget@${t.version||"latest"}/dist`,c=`${l}/olotalk-widget.js`,m=`${l}/olotalk-widget.iife.js`,h=t.cssUrl||`${l}/olotalk-widget.css`,u=(p=o.launcher)==null?void 0:p.logoUrl;if(u){const r=new Image;r.src=u}let s=a.OlotalkWidget||null;try{if(!s)if(E()){const r=await S(c);s=(r==null?void 0:r.default)||r}else await L(m),s=a.OlotalkWidget}catch(r){console.error("[Olotalk] Failed to load widget bundle:",r);return}if(!s||typeof s.createWidget!="function"){console.error("[Olotalk] Widget API missing 'createWidget'.");return}const M=(t.mount?document.querySelector(t.mount):null)||document.body;n!=null&&n.destroy&&(await n.destroy(),n=null),n=s.createWidget(M,{widgetId:e,origin:i,config:o,theme:t.theme||"light",placement:t.placement,cssUrl:h,locale:t.locale});const U=((O=a.Olotalk)==null?void 0:O.q)||[];a.Olotalk=k,a.Olotalk.q=[],U.forEach(([r,j])=>k(r,j))}function f(t){return t&&(a.OlotalkConfig={...a.OlotalkConfig||{},...t}),d||(d=$().finally(()=>{d=null}),d)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>f(),{once:!0}):f(),w.ensureWidget=f,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"}),w})({});

package/dist/loader.js

@@ -0,0 +1,155 @@
+const a = window, g = ((t, e) => {
+  (g.q || (g.q = [])).push([t, e]);
+});
+a.Olotalk || (a.Olotalk = g);
+function C() {
+  var d;
+  const t = document.currentScript;
+  let e = {};
+  try {
+    const s = (d = t == null ? void 0 : t.dataset) == null ? void 0 : d.olotalk;
+    s && (e = JSON.parse(s));
+  } catch {
+  }
+  const l = (t == null ? void 0 : t.dataset) || {}, o = {
+    ...a.OlotalkConfig || {},
+    ...e || {}
+  }, i = l.olotalkWidgetId || o.widgetId || o.siteId, c = l.olotalkOrigin || o.origin, f = l.olotalkCdnBase || o.cdnBase, w = l.olotalkLocale || o.locale;
+  return {
+    ...o,
+    widgetId: i,
+    origin: c,
+    cdnBase: f,
+    locale: w
+  };
+}
+function E(t) {
+  if (!t) return window.location.origin;
+  try {
+    const e = new URL(t);
+    return e.pathname.endsWith("/api") && (e.pathname = e.pathname.replace(/\/api$/, "")), e.origin;
+  } catch {
+    return window.location.origin;
+  }
+}
+function b(t, e) {
+  if (!e || e.length === 0) return !0;
+  const l = t.toLowerCase();
+  return e.some((o) => {
+    if (!o) return !1;
+    const i = o.toLowerCase();
+    if (i === l) return !0;
+    if (i.startsWith("*.")) {
+      const c = i.slice(2);
+      return l === c || l.endsWith(`.${c}`);
+    }
+    return !1;
+  });
+}
+async function $(t, e) {
+  const l = new URL(`/public/v1/widgets/${e}/config`, t), o = await fetch(l.toString());
+  if (!o.ok)
+    throw new Error(`Config fetch failed (${o.status})`);
+  return o.json();
+}
+function L() {
+  return "noModule" in document.createElement("script");
+}
+async function S(t) {
+  return import(
+    /* @vite-ignore */
+    /* webpackIgnore: true */
+    t
+  );
+}
+function U(t) {
+  return new Promise((e, l) => {
+    const o = document.createElement("script");
+    o.src = t, o.async = !0, o.onload = () => e(), o.onerror = () => l(new Error("Failed to load " + t)), document.head.appendChild(o);
+  });
+}
+let n = null, u = null;
+const k = function(t, e) {
+  var l, o, i;
+  try {
+    switch (t) {
+      case "init":
+        return m(e);
+      case "destroy":
+        return (l = n == null ? void 0 : n.destroy) == null ? void 0 : l.call(n).finally(() => {
+          n = null;
+        });
+      case "open":
+        return (o = n == null ? void 0 : n.open) == null ? void 0 : o.call(n);
+      case "close":
+        return (i = n == null ? void 0 : n.close) == null ? void 0 : i.call(n);
+      default:
+        console.warn("[Olotalk] Unknown command:", t);
+    }
+  } catch (c) {
+    console.error("[Olotalk] Command error:", c);
+  }
+};
+async function M() {
+  var h, p;
+  const t = C(), e = t.widgetId || t.siteId;
+  if (!e) {
+    console.error("[Olotalk] Missing required 'widgetId' in config.");
+    return;
+  }
+  const l = E(t.origin);
+  let o = null;
+  try {
+    o = await $(l, e);
+  } catch (r) {
+    console.error("[Olotalk] Failed to fetch widget config:", r);
+    return;
+  }
+  if (!b(window.location.hostname, o.allowedDomains)) {
+    console.warn("[Olotalk] Widget disabled for this domain.");
+    return;
+  }
+  const i = t.cdnBase || `https://cdn.jsdelivr.net/npm/@olotalk/widget@${t.version || "latest"}/dist`, c = `${i}/olotalk-widget.js`, f = `${i}/olotalk-widget.iife.js`, w = t.cssUrl || `${i}/olotalk-widget.css`, d = (h = o.launcher) == null ? void 0 : h.logoUrl;
+  if (d) {
+    const r = new Image();
+    r.src = d;
+  }
+  let s = a.OlotalkWidget || null;
+  try {
+    if (!s)
+      if (L()) {
+        const r = await S(c);
+        s = (r == null ? void 0 : r.default) || r;
+      } else
+        await U(f), s = a.OlotalkWidget;
+  } catch (r) {
+    console.error("[Olotalk] Failed to load widget bundle:", r);
+    return;
+  }
+  if (!s || typeof s.createWidget != "function") {
+    console.error("[Olotalk] Widget API missing 'createWidget'.");
+    return;
+  }
+  const O = (t.mount ? document.querySelector(t.mount) : null) || document.body;
+  n != null && n.destroy && (await n.destroy(), n = null), n = s.createWidget(O, {
+    widgetId: e,
+    origin: l,
+    config: o,
+    theme: t.theme || "light",
+    placement: t.placement,
+    cssUrl: w,
+    // Pass explicit locale override if provided; widget resolves browser language itself.
+    locale: t.locale
+  });
+  const y = ((p = a.Olotalk) == null ? void 0 : p.q) || [];
+  a.Olotalk = k, a.Olotalk.q = [], y.forEach(([r, W]) => k(r, W));
+}
+function m(t) {
+  return t && (a.OlotalkConfig = { ...a.OlotalkConfig || {}, ...t }), u || (u = M().finally(() => {
+    u = null;
+  }), u);
+}
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", () => m(), { once: !0 }) : m();
+export {
+  m as ensureWidget
+};

package/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "@olotalk/widget-loader",
+    "version": "0.1.0",
+    "private": false,
+    "type": "module",
+  "main": "./dist/loader.js",
+  "module": "./dist/loader.js",
+  "exports": {
+    ".": {
+      "import": "./dist/loader.js",
+      "require": "./dist/loader.js"
+    },
+    "./iife": "./dist/loader.iife.js"
+  },
+  "files": ["dist"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3",
+    "vite": "^6.4.1"
+  }
+}