npm - @ariaflowagents/widget - Versions diffs - 0.5.0 - Mend

@ariaflowagents/widget 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,113 @@
+# @ariaflowagents/widget
+Embeddable chat widget for the AriaFlow Universal Inbox.
+## Installation
+Include the widget script on your website:
+```html
+<script src="https://cdn.yourdomain.com/widget/v1.js"></script>
+```
+## Usage
+Add the widget element to your HTML:
+```html
+<ariaflow-widget
+  widget-id="widget_abc123"
+  inbox-url="https://your-convex-app.convex.cloud"
+  position="bottom-right"
+  primary-color="#2563eb"
+  theme="light"
+  title="Chat with us"
+  subtitle="We typically reply within minutes">
+</ariaflow-widget>
+```
+## Attributes
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `widget-id` | string | required | The public ID of your widget |
+| `inbox-url` | string | required | Your Convex deployment URL |
+| `position` | string | `"bottom-right"` | Widget position: `bottom-right`, `bottom-left`, `top-right`, `top-left` |
+| `primary-color` | string | `"#2563eb"` | Widget theme color (hex) |
+| `theme` | string | `"light"` | Theme: `light` or `dark` |
+| `title` | string | `"Chat with us"` | Header title |
+| `subtitle` | string | `"We typically reply within minutes"` | Header subtitle |
+| `avatar-url` | string | - | Avatar image URL |
+| `user-name` | string | - | Pre-fill user name |
+| `user-email` | string | - | Pre-fill user email |
+## Programmatic Usage
+```typescript
+import { WidgetClient } from '@ariaflowagents/widget';
+const client = new WidgetClient('https://your-convex-app.convex.cloud');
+// Initialize
+const config = await client.initWidget('widget_abc123');
+// Get or create conversation
+const conversationId = await client.getOrCreateConversation(
+  'user@example.com',
+  undefined,
+  'John Doe'
+);
+// Send message
+await client.sendMessage('Hello!');
+// Listen for messages
+client.onMessages((messages) => {
+  console.log('New messages:', messages);
+});
+// Get current messages
+const messages = await client.getMessages();
+```
+## Architecture
+The widget uses a **Convex-first architecture**:
+1. **Widget → Convex**: All messages go through Convex backend
+2. **Convex → Agent**: Convex forwards messages to deployed AI agent
+3. **Agent → Convex**: Agent responds via HTTP callback
+4. **Convex → Widget**: Real-time updates via WebSocket
+This ensures:
+- Single source of truth for all messages
+- Real-time sync across admin inbox and customer widget
+- Centralized rate limiting and debugging
+- No direct widget-agent connection needed
+## Development
+```bash
+# Install dependencies
+bun install
+# Build widget
+bun run build
+# Watch mode
+bun run dev
+# Type check
+bun run typecheck
+# Clean
+bun run clean
+```
+## Bundle Size
+The widget is optimized to be under 50KB (gzipped) for fast loading.
+## License
+MIT

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .ariaflow-widget-container{position:fixed;z-index:9999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;--ariaflow-accent-color: #14B8A6;--ariaflow-base-color: #ffffff;--ariaflow-window-bg: #ffffff;--ariaflow-messages-bg: #f8fafc;--ariaflow-text-primary: #1e293b;--ariaflow-text-secondary: #64748b;--ariaflow-border-color: #e2e8f0;--ariaflow-input-bg: #ffffff;--ariaflow-assistant-bubble-bg: #ffffff;--ariaflow-assistant-bubble-text: #1e293b;--ariaflow-input-focus-border: var(--ariaflow-accent-color)}.ariaflow-widget-bottom-right{bottom:20px;right:20px}.ariaflow-widget-bottom-left{bottom:20px;left:20px}.ariaflow-widget-top-right{top:20px;right:20px}.ariaflow-widget-top-left{top:20px;left:20px}.ariaflow-widget-launcher{width:60px;height:60px;border-radius:30px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px #00000026;transition:transform .2s,box-shadow .2s}.ariaflow-widget-launcher:hover{transform:scale(1.05);box-shadow:0 6px 16px #0003}.ariaflow-widget-window{max-height:calc(100vh - 40px);background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;overflow:hidden;animation:ariaflow-slide-up .3s ease-out}.ariaflow-widget-tiny .ariaflow-widget-window{width:320px;height:400px}.ariaflow-widget-compact .ariaflow-widget-window{width:360px;height:500px}.ariaflow-widget-full .ariaflow-widget-window{width:380px;height:600px}@keyframes ariaflow-slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.ariaflow-widget-header{padding:16px 20px;color:#fff;display:flex;align-items:center;justify-content:space-between}.ariaflow-widget-header-content{display:flex;align-items:center;gap:12px}.ariaflow-widget-avatar{width:40px;height:40px;border-radius:20px;object-fit:cover}.ariaflow-widget-title-group{display:flex;flex-direction:column;gap:2px}.ariaflow-widget-title{margin:0;font-size:16px;font-weight:600}.ariaflow-widget-subtitle{margin:0;font-size:13px;opacity:.9}.ariaflow-widget-close{background:#fff3;border:none;border-radius:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:background .2s}.ariaflow-widget-close:hover{background:#ffffff4d}.ariaflow-widget-status{padding:8px 16px;display:flex;align-items:center;gap:8px;font-size:13px;color:#64748b;background:#f1f5f9}.ariaflow-widget-status-dot{width:8px;height:8px;border-radius:50%;background:#fbbf24;animation:ariaflow-pulse 1.5s infinite}@keyframes ariaflow-pulse{0%,to{opacity:1}50%{opacity:.5}}.ariaflow-widget-messages{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;background:#f8fafc}.ariaflow-widget-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#64748b;font-size:14px}.ariaflow-widget-message{display:flex}.ariaflow-widget-message-user{justify-content:flex-end}.ariaflow-widget-message-assistant{justify-content:flex-start}.ariaflow-widget-message-bubble{max-width:80%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.ariaflow-widget-message-user .ariaflow-widget-message-bubble{background:var(--ariaflow-accent-color, #14B8A6);color:#fff;border-bottom-right-radius:4px}.ariaflow-widget-message-assistant .ariaflow-widget-message-bubble{background:var(--ariaflow-assistant-bubble-bg, #ffffff);color:var(--ariaflow-assistant-bubble-text, #1e293b);border:1px solid var(--ariaflow-border-color, #e2e8f0);border-bottom-left-radius:4px}.ariaflow-widget-input{padding:12px 16px;background:#fff;border-top:1px solid #e2e8f0;display:flex;gap:8px;align-items:flex-end}.ariaflow-widget-input textarea{flex:1;border:1px solid #e2e8f0;border-radius:20px;padding:10px 14px;font-size:14px;font-family:inherit;resize:none;max-height:100px;outline:none;transition:border-color .2s}.ariaflow-widget-input textarea:focus{border-color:var(--ariaflow-input-focus-border, #2563eb)}.ariaflow-widget-input textarea::placeholder{color:#94a3b8}.ariaflow-widget-send{width:40px;height:40px;border-radius:20px;border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s,transform .2s;flex-shrink:0}.ariaflow-widget-send:hover:not(:disabled){transform:scale(1.05)}.ariaflow-widget-send:disabled{opacity:.5;cursor:not-allowed}.ariaflow-widget-container[data-theme=dark]{--ariaflow-window-bg: var(--ariaflow-base-color, #1e293b);--ariaflow-messages-bg: #0f172a;--ariaflow-text-primary: #f1f5f9;--ariaflow-text-secondary: #94a3b8;--ariaflow-border-color: #334155;--ariaflow-input-bg: #1e293b;--ariaflow-assistant-bubble-bg: #334155;--ariaflow-assistant-bubble-text: #f1f5f9;--ariaflow-input-focus-border: #3b82f6}.ariaflow-widget-container[data-theme=dark] .ariaflow-widget-window{background:var(--ariaflow-window-bg)}.ariaflow-widget-container[data-theme=dark] .ariaflow-widget-messages{background:var(--ariaflow-messages-bg)}.ariaflow-widget-container[data-theme=dark] .ariaflow-widget-message-assistant .ariaflow-widget-message-bubble{background:var(--ariaflow-assistant-bubble-bg);color:var(--ariaflow-assistant-bubble-text);border-color:var(--ariaflow-border-color)}.ariaflow-widget-container[data-theme=dark] .ariaflow-widget-input{background:var(--ariaflow-input-bg);border-top-color:var(--ariaflow-border-color)}.ariaflow-widget-container[data-theme=dark] .ariaflow-widget-input textarea{background:var(--ariaflow-messages-bg);border-color:var(--ariaflow-border-color);color:var(--ariaflow-text-primary)}.ariaflow-widget-container[data-theme=dark] .ariaflow-widget-input textarea:focus{border-color:var(--ariaflow-input-focus-border)}.ariaflow-widget-container[data-theme=dark] .ariaflow-widget-input textarea::placeholder{color:var(--ariaflow-text-secondary)}.ariaflow-widget-messages::-webkit-scrollbar{width:6px}.ariaflow-widget-messages::-webkit-scrollbar-track{background:transparent}.ariaflow-widget-messages::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.ariaflow-widget-container[data-theme=dark] .ariaflow-widget-messages::-webkit-scrollbar-thumb{background:#475569}.ariaflow-widget-messages::-webkit-scrollbar-thumb:hover{background:#94a3b8}

package/dist/widget.js ADDED Viewed

@@ -0,0 +1,833 @@
+var B, m, Ae, T, de, Me, He, We, se, oe, re, R = {}, Te = [], Ye = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, X = Array.isArray;
+function S(t, e) {
+  for (var n in e) t[n] = e[n];
+  return t;
+}
+function le(t) {
+  t && t.parentNode && t.parentNode.removeChild(t);
+}
+function D(t, e, n) {
+  var r, i, o, s = {};
+  for (o in e) o == "key" ? r = e[o] : o == "ref" ? i = e[o] : s[o] = e[o];
+  if (arguments.length > 2 && (s.children = arguments.length > 3 ? B.call(arguments, 2) : n), typeof t == "function" && t.defaultProps != null) for (o in t.defaultProps) s[o] === void 0 && (s[o] = t.defaultProps[o]);
+  return L(t, s, r, i, null);
+}
+function L(t, e, n, r, i) {
+  var o = { type: t, props: e, key: n, ref: r, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: i ?? ++Ae, __i: -1, __u: 0 };
+  return i == null && m.vnode != null && m.vnode(o), o;
+}
+function O(t) {
+  return t.children;
+}
+function q(t, e) {
+  this.props = t, this.context = e;
+}
+function I(t, e) {
+  if (e == null) return t.__ ? I(t.__, t.__i + 1) : null;
+  for (var n; e < t.__k.length; e++) if ((n = t.__k[e]) != null && n.__e != null) return n.__e;
+  return typeof t.type == "function" ? I(t) : null;
+}
+function Pe(t) {
+  var e, n;
+  if ((t = t.__) != null && t.__c != null) {
+    for (t.__e = t.__c.base = null, e = 0; e < t.__k.length; e++) if ((n = t.__k[e]) != null && n.__e != null) {
+      t.__e = t.__c.base = n.__e;
+      break;
+    }
+    return Pe(t);
+  }
+}
+function he(t) {
+  (!t.__d && (t.__d = !0) && T.push(t) && !J.__r++ || de != m.debounceRendering) && ((de = m.debounceRendering) || Me)(J);
+}
+function J() {
+  for (var t, e, n, r, i, o, s, l = 1; T.length; ) T.length > l && T.sort(He), t = T.shift(), l = T.length, t.__d && (n = void 0, r = void 0, i = (r = (e = t).__v).__e, o = [], s = [], e.__P && ((n = S({}, r)).__v = r.__v + 1, m.vnode && m.vnode(n), ae(e.__P, n, r, e.__n, e.__P.namespaceURI, 32 & r.__u ? [i] : null, o, i ?? I(r), !!(32 & r.__u), s), n.__v = r.__v, n.__.__k[n.__i] = n, De(o, n, s), r.__e = r.__ = null, n.__e != i && Pe(n)));
+  J.__r = 0;
+}
+function Fe(t, e, n, r, i, o, s, l, c, a, f) {
+  var _, d, u, v, k, y, g, h = r && r.__k || Te, N = e.length;
+  for (c = Ze(n, e, h, c, N), _ = 0; _ < N; _++) (u = n.__k[_]) != null && (d = u.__i == -1 ? R : h[u.__i] || R, u.__i = _, y = ae(t, u, d, i, o, s, l, c, a, f), v = u.__e, u.ref && d.ref != u.ref && (d.ref && ce(d.ref, null, u), f.push(u.ref, u.__c || v, u)), k == null && v != null && (k = v), (g = !!(4 & u.__u)) || d.__k === u.__k ? c = Ue(u, c, t, g) : typeof u.type == "function" && y !== void 0 ? c = y : v && (c = v.nextSibling), u.__u &= -7);
+  return n.__e = k, c;
+}
+function Ze(t, e, n, r, i) {
+  var o, s, l, c, a, f = n.length, _ = f, d = 0;
+  for (t.__k = new Array(i), o = 0; o < i; o++) (s = e[o]) != null && typeof s != "boolean" && typeof s != "function" ? (typeof s == "string" || typeof s == "number" || typeof s == "bigint" || s.constructor == String ? s = t.__k[o] = L(null, s, null, null, null) : X(s) ? s = t.__k[o] = L(O, { children: s }, null, null, null) : s.constructor === void 0 && s.__b > 0 ? s = t.__k[o] = L(s.type, s.props, s.key, s.ref ? s.ref : null, s.__v) : t.__k[o] = s, c = o + d, s.__ = t, s.__b = t.__b + 1, l = null, (a = s.__i = et(s, n, c, _)) != -1 && (_--, (l = n[a]) && (l.__u |= 2)), l == null || l.__v == null ? (a == -1 && (i > f ? d-- : i < f && d++), typeof s.type != "function" && (s.__u |= 4)) : a != c && (a == c - 1 ? d-- : a == c + 1 ? d++ : (a > c ? d-- : d++, s.__u |= 4))) : t.__k[o] = null;
+  if (_) for (o = 0; o < f; o++) (l = n[o]) != null && !(2 & l.__u) && (l.__e == r && (r = I(l)), Oe(l, l));
+  return r;
+}
+function Ue(t, e, n, r) {
+  var i, o;
+  if (typeof t.type == "function") {
+    for (i = t.__k, o = 0; i && o < i.length; o++) i[o] && (i[o].__ = t, e = Ue(i[o], e, n, r));
+    return e;
+  }
+  t.__e != e && (r && (e && t.type && !e.parentNode && (e = I(t)), n.insertBefore(t.__e, e || null)), e = t.__e);
+  do
+    e = e && e.nextSibling;
+  while (e != null && e.nodeType == 8);
+  return e;
+}
+function et(t, e, n, r) {
+  var i, o, s, l = t.key, c = t.type, a = e[n], f = a != null && (2 & a.__u) == 0;
+  if (a === null && l == null || f && l == a.key && c == a.type) return n;
+  if (r > (f ? 1 : 0)) {
+    for (i = n - 1, o = n + 1; i >= 0 || o < e.length; ) if ((a = e[s = i >= 0 ? i-- : o++]) != null && !(2 & a.__u) && l == a.key && c == a.type) return s;
+  }
+  return -1;
+}
+function pe(t, e, n) {
+  e[0] == "-" ? t.setProperty(e, n ?? "") : t[e] = n == null ? "" : typeof n != "number" || Ye.test(e) ? n : n + "px";
+}
+function z(t, e, n, r, i) {
+  var o, s;
+  e: if (e == "style") if (typeof n == "string") t.style.cssText = n;
+  else {
+    if (typeof r == "string" && (t.style.cssText = r = ""), r) for (e in r) n && e in n || pe(t.style, e, "");
+    if (n) for (e in n) r && n[e] == r[e] || pe(t.style, e, n[e]);
+  }
+  else if (e[0] == "o" && e[1] == "n") o = e != (e = e.replace(We, "$1")), s = e.toLowerCase(), e = s in t || e == "onFocusOut" || e == "onFocusIn" ? s.slice(2) : e.slice(2), t.l || (t.l = {}), t.l[e + o] = n, n ? r ? n.u = r.u : (n.u = se, t.addEventListener(e, o ? re : oe, o)) : t.removeEventListener(e, o ? re : oe, o);
+  else {
+    if (i == "http://www.w3.org/2000/svg") e = e.replace(/xlink(H|:h)/, "h").replace(/sName$/, "s");
+    else if (e != "width" && e != "height" && e != "href" && e != "list" && e != "form" && e != "tabIndex" && e != "download" && e != "rowSpan" && e != "colSpan" && e != "role" && e != "popover" && e in t) try {
+      t[e] = n ?? "";
+      break e;
+    } catch {
+    }
+    typeof n == "function" || (n == null || n === !1 && e[4] != "-" ? t.removeAttribute(e) : t.setAttribute(e, e == "popover" && n == 1 ? "" : n));
+  }
+}
+function ge(t) {
+  return function(e) {
+    if (this.l) {
+      var n = this.l[e.type + t];
+      if (e.t == null) e.t = se++;
+      else if (e.t < n.u) return;
+      return n(m.event ? m.event(e) : e);
+    }
+  };
+}
+function ae(t, e, n, r, i, o, s, l, c, a) {
+  var f, _, d, u, v, k, y, g, h, N, C, P, M, V, A, H, W, $ = e.type;
+  if (e.constructor !== void 0) return null;
+  128 & n.__u && (c = !!(32 & n.__u), o = [l = e.__e = n.__e]), (f = m.__b) && f(e);
+  e: if (typeof $ == "function") try {
+    if (g = e.props, h = "prototype" in $ && $.prototype.render, N = (f = $.contextType) && r[f.__c], C = f ? N ? N.props.value : f.__ : r, n.__c ? y = (_ = e.__c = n.__c).__ = _.__E : (h ? e.__c = _ = new $(g, C) : (e.__c = _ = new q(g, C), _.constructor = $, _.render = nt), N && N.sub(_), _.state || (_.state = {}), _.__n = r, d = _.__d = !0, _.__h = [], _._sb = []), h && _.__s == null && (_.__s = _.state), h && $.getDerivedStateFromProps != null && (_.__s == _.state && (_.__s = S({}, _.__s)), S(_.__s, $.getDerivedStateFromProps(g, _.__s))), u = _.props, v = _.state, _.__v = e, d) h && $.getDerivedStateFromProps == null && _.componentWillMount != null && _.componentWillMount(), h && _.componentDidMount != null && _.__h.push(_.componentDidMount);
+    else {
+      if (h && $.getDerivedStateFromProps == null && g !== u && _.componentWillReceiveProps != null && _.componentWillReceiveProps(g, C), e.__v == n.__v || !_.__e && _.shouldComponentUpdate != null && _.shouldComponentUpdate(g, _.__s, C) === !1) {
+        for (e.__v != n.__v && (_.props = g, _.state = _.__s, _.__d = !1), e.__e = n.__e, e.__k = n.__k, e.__k.some(function(E) {
+          E && (E.__ = e);
+        }), P = 0; P < _._sb.length; P++) _.__h.push(_._sb[P]);
+        _._sb = [], _.__h.length && s.push(_);
+        break e;
+      }
+      _.componentWillUpdate != null && _.componentWillUpdate(g, _.__s, C), h && _.componentDidUpdate != null && _.__h.push(function() {
+        _.componentDidUpdate(u, v, k);
+      });
+    }
+    if (_.context = C, _.props = g, _.__P = t, _.__e = !1, M = m.__r, V = 0, h) {
+      for (_.state = _.__s, _.__d = !1, M && M(e), f = _.render(_.props, _.state, _.context), A = 0; A < _._sb.length; A++) _.__h.push(_._sb[A]);
+      _._sb = [];
+    } else do
+      _.__d = !1, M && M(e), f = _.render(_.props, _.state, _.context), _.state = _.__s;
+    while (_.__d && ++V < 25);
+    _.state = _.__s, _.getChildContext != null && (r = S(S({}, r), _.getChildContext())), h && !d && _.getSnapshotBeforeUpdate != null && (k = _.getSnapshotBeforeUpdate(u, v)), H = f, f != null && f.type === O && f.key == null && (H = Ie(f.props.children)), l = Fe(t, X(H) ? H : [H], e, n, r, i, o, s, l, c, a), _.base = e.__e, e.__u &= -161, _.__h.length && s.push(_), y && (_.__E = _.__ = null);
+  } catch (E) {
+    if (e.__v = null, c || o != null) if (E.then) {
+      for (e.__u |= c ? 160 : 128; l && l.nodeType == 8 && l.nextSibling; ) l = l.nextSibling;
+      o[o.indexOf(l)] = null, e.__e = l;
+    } else {
+      for (W = o.length; W--; ) le(o[W]);
+      ie(e);
+    }
+    else e.__e = n.__e, e.__k = n.__k, E.then || ie(e);
+    m.__e(E, e, n);
+  }
+  else o == null && e.__v == n.__v ? (e.__k = n.__k, e.__e = n.__e) : l = e.__e = tt(n.__e, e, n, r, i, o, s, c, a);
+  return (f = m.diffed) && f(e), 128 & e.__u ? void 0 : l;
+}
+function ie(t) {
+  t && t.__c && (t.__c.__e = !0), t && t.__k && t.__k.forEach(ie);
+}
+function De(t, e, n) {
+  for (var r = 0; r < n.length; r++) ce(n[r], n[++r], n[++r]);
+  m.__c && m.__c(e, t), t.some(function(i) {
+    try {
+      t = i.__h, i.__h = [], t.some(function(o) {
+        o.call(i);
+      });
+    } catch (o) {
+      m.__e(o, i.__v);
+    }
+  });
+}
+function Ie(t) {
+  return typeof t != "object" || t == null || t.__b && t.__b > 0 ? t : X(t) ? t.map(Ie) : S({}, t);
+}
+function tt(t, e, n, r, i, o, s, l, c) {
+  var a, f, _, d, u, v, k, y = n.props || R, g = e.props, h = e.type;
+  if (h == "svg" ? i = "http://www.w3.org/2000/svg" : h == "math" ? i = "http://www.w3.org/1998/Math/MathML" : i || (i = "http://www.w3.org/1999/xhtml"), o != null) {
+    for (a = 0; a < o.length; a++) if ((u = o[a]) && "setAttribute" in u == !!h && (h ? u.localName == h : u.nodeType == 3)) {
+      t = u, o[a] = null;
+      break;
+    }
+  }
+  if (t == null) {
+    if (h == null) return document.createTextNode(g);
+    t = document.createElementNS(i, h, g.is && g), l && (m.__m && m.__m(e, o), l = !1), o = null;
+  }
+  if (h == null) y === g || l && t.data == g || (t.data = g);
+  else {
+    if (o = o && B.call(t.childNodes), !l && o != null) for (y = {}, a = 0; a < t.attributes.length; a++) y[(u = t.attributes[a]).name] = u.value;
+    for (a in y) if (u = y[a], a != "children") {
+      if (a == "dangerouslySetInnerHTML") _ = u;
+      else if (!(a in g)) {
+        if (a == "value" && "defaultValue" in g || a == "checked" && "defaultChecked" in g) continue;
+        z(t, a, null, u, i);
+      }
+    }
+    for (a in g) u = g[a], a == "children" ? d = u : a == "dangerouslySetInnerHTML" ? f = u : a == "value" ? v = u : a == "checked" ? k = u : l && typeof u != "function" || y[a] === u || z(t, a, u, y[a], i);
+    if (f) l || _ && (f.__html == _.__html || f.__html == t.innerHTML) || (t.innerHTML = f.__html), e.__k = [];
+    else if (_ && (t.innerHTML = ""), Fe(e.type == "template" ? t.content : t, X(d) ? d : [d], e, n, r, h == "foreignObject" ? "http://www.w3.org/1999/xhtml" : i, o, s, o ? o[0] : n.__k && I(n, 0), l, c), o != null) for (a = o.length; a--; ) le(o[a]);
+    l || (a = "value", h == "progress" && v == null ? t.removeAttribute("value") : v != null && (v !== t[a] || h == "progress" && !v || h == "option" && v != y[a]) && z(t, a, v, y[a], i), a = "checked", k != null && k != t[a] && z(t, a, k, y[a], i));
+  }
+  return t;
+}
+function ce(t, e, n) {
+  try {
+    if (typeof t == "function") {
+      var r = typeof t.__u == "function";
+      r && t.__u(), r && e == null || (t.__u = t(e));
+    } else t.current = e;
+  } catch (i) {
+    m.__e(i, n);
+  }
+}
+function Oe(t, e, n) {
+  var r, i;
+  if (m.unmount && m.unmount(t), (r = t.ref) && (r.current && r.current != t.__e || ce(r, null, e)), (r = t.__c) != null) {
+    if (r.componentWillUnmount) try {
+      r.componentWillUnmount();
+    } catch (o) {
+      m.__e(o, e);
+    }
+    r.base = r.__P = null;
+  }
+  if (r = t.__k) for (i = 0; i < r.length; i++) r[i] && Oe(r[i], e, n || typeof t.type != "function");
+  n || le(t.__e), t.__c = t.__ = t.__e = void 0;
+}
+function nt(t, e, n) {
+  return this.constructor(t, n);
+}
+function Y(t, e, n) {
+  var r, i, o, s;
+  e == document && (e = document.documentElement), m.__ && m.__(t, e), i = (r = typeof n == "function") ? null : n && n.__k || e.__k, o = [], s = [], ae(e, t = (!r && n || e).__k = D(O, null, [t]), i || R, R, e.namespaceURI, !r && n ? [n] : i ? null : e.firstChild ? B.call(e.childNodes) : null, o, !r && n ? n : i ? i.__e : e.firstChild, r, s), De(o, t, s);
+}
+function Le(t, e) {
+  Y(t, e, Le);
+}
+function Re(t, e, n) {
+  var r, i, o, s, l = S({}, t.props);
+  for (o in t.type && t.type.defaultProps && (s = t.type.defaultProps), e) o == "key" ? r = e[o] : o == "ref" ? i = e[o] : l[o] = e[o] === void 0 && s != null ? s[o] : e[o];
+  return arguments.length > 2 && (l.children = arguments.length > 3 ? B.call(arguments, 2) : n), L(t.type, l, r || t.key, i || t.ref, null);
+}
+B = Te.slice, m = { __e: function(t, e, n, r) {
+  for (var i, o, s; e = e.__; ) if ((i = e.__c) && !i.__) try {
+    if ((o = i.constructor) && o.getDerivedStateFromError != null && (i.setState(o.getDerivedStateFromError(t)), s = i.__d), i.componentDidCatch != null && (i.componentDidCatch(t, r || {}), s = i.__d), s) return i.__E = i;
+  } catch (l) {
+    t = l;
+  }
+  throw t;
+} }, Ae = 0, q.prototype.setState = function(t, e) {
+  var n;
+  n = this.__s != null && this.__s != this.state ? this.__s : this.__s = S({}, this.state), typeof t == "function" && (t = t(S({}, n), this.props)), t && S(n, t), t != null && this.__v && (e && this._sb.push(e), he(this));
+}, q.prototype.forceUpdate = function(t) {
+  this.__v && (this.__e = !0, t && this.__h.push(t), he(this));
+}, q.prototype.render = O, T = [], Me = typeof Promise == "function" ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, He = function(t, e) {
+  return t.__v.__b - e.__v.__b;
+}, J.__r = 0, We = /(PointerCapture)$|Capture$/i, se = 0, oe = ge(!1), re = ge(!0);
+function G() {
+  return G = Object.assign ? Object.assign.bind() : function(t) {
+    for (var e = 1; e < arguments.length; e++) {
+      var n = arguments[e];
+      for (var r in n) Object.prototype.hasOwnProperty.call(n, r) && (t[r] = n[r]);
+    }
+    return t;
+  }, G.apply(this, arguments);
+}
+function je(t, e) {
+  if (t == null) return {};
+  var n, r, i = {}, o = Object.keys(t);
+  for (r = 0; r < o.length; r++) e.indexOf(n = o[r]) >= 0 || (i[n] = t[n]);
+  return i;
+}
+var ot = ["context", "children"], rt = ["useFragment"];
+function it(t, e, n, r) {
+  function i() {
+    var o = Reflect.construct(HTMLElement, [], i);
+    return o._vdomComponent = t, o._root = o, o;
+  }
+  return (i.prototype = Object.create(HTMLElement.prototype)).constructor = i, i.prototype.connectedCallback = function() {
+    st.call(this, r);
+  }, i.prototype.attributeChangedCallback = lt, i.prototype.disconnectedCallback = at, n = n || t.observedAttributes || Object.keys(t.propTypes || {}), i.observedAttributes = n, t.formAssociated && (i.formAssociated = !0), n.forEach(function(o) {
+    Object.defineProperty(i.prototype, o, { get: function() {
+      return this._vdom ? this._vdom.props[o] : this._props[o];
+    }, set: function(s) {
+      this._vdom ? this.attributeChangedCallback(o, null, s) : (this._props || (this._props = {}), this._props[o] = s);
+      var l = typeof s;
+      s != null && l !== "string" && l !== "boolean" && l !== "number" || this.setAttribute(o, s);
+    } });
+  }), customElements.define(e, i), i;
+}
+function _t(t) {
+  this.getChildContext = function() {
+    return t.context;
+  };
+  var e = t.children, n = je(t, ot);
+  return Re(e, n);
+}
+function st(t) {
+  var e = new CustomEvent("_preact", { detail: {}, bubbles: !0, cancelable: !0 });
+  this.dispatchEvent(e), this._vdom = D(_t, G({}, this._props, { context: e.detail.context }), Ve(this, this._vdomComponent, t)), (this.hasAttribute("hydrate") ? Le : Y)(this._vdom, this._root);
+}
+function Be(t) {
+  return t.replace(/-(\w)/g, function(e, n) {
+    return n ? n.toUpperCase() : "";
+  });
+}
+function lt(t, e, n) {
+  if (this._vdom) {
+    var r = {};
+    r[t] = n = n ?? void 0, r[Be(t)] = n, this._vdom = Re(this._vdom, r), Y(this._vdom, this._root);
+  }
+}
+function at() {
+  Y(this._vdom = null, this._root);
+}
+function me(t, e) {
+  var n = this, r = t.useFragment, i = je(t, rt);
+  return D(r ? O : "slot", G({}, i, { ref: function(o) {
+    o ? (n.ref = o, n._listener || (n._listener = function(s) {
+      s.stopPropagation(), s.detail.context = e;
+    }, o.addEventListener("_preact", n._listener))) : n.ref.removeEventListener("_preact", n._listener);
+  } }));
+}
+function Ve(t, e, n) {
+  if (t.nodeType === 3) return t.data;
+  if (t.nodeType !== 1) return null;
+  var r = [], i = {}, o = 0, s = t.attributes, l = t.childNodes;
+  for (o = s.length; o--; ) s[o].name !== "slot" && (i[s[o].name] = s[o].value, i[Be(s[o].name)] = s[o].value);
+  for (o = l.length; o--; ) {
+    var c = Ve(l[o], null, n), a = l[o].slot;
+    a ? i[a] = D(me, { name: a }, c) : r[o] = c;
+  }
+  var f = !(!n || !n.shadow), _ = e ? D(me, { useFragment: !f }, r) : r;
+  return !f && e && (t.innerHTML = ""), D(e || t.nodeName.toLowerCase(), i, _);
+}
+var ct = 0;
+function p(t, e, n, r, i, o) {
+  e || (e = {});
+  var s, l, c = e;
+  if ("ref" in c) for (l in c = {}, e) l == "ref" ? s = e[l] : c[l] = e[l];
+  var a = { type: t, props: c, key: n, ref: s, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --ct, __i: -1, __u: 0, __source: i, __self: o };
+  if (typeof t == "function" && (s = t.defaultProps)) for (l in s) c[l] === void 0 && (c[l] = s[l]);
+  return m.vnode && m.vnode(a), a;
+}
+var j, w, ee, ve, Q = 0, ze = [], b = m, ye = b.__b, we = b.__r, be = b.diffed, ke = b.__c, Ce = b.unmount, $e = b.__;
+function ue(t, e) {
+  b.__h && b.__h(w, t, Q || e), Q = 0;
+  var n = w.__H || (w.__H = { __: [], __h: [] });
+  return t >= n.__.length && n.__.push({}), n.__[t];
+}
+function U(t) {
+  return Q = 1, ut(Ke, t);
+}
+function ut(t, e, n) {
+  var r = ue(j++, 2);
+  if (r.t = t, !r.__c && (r.__ = [Ke(void 0, e), function(l) {
+    var c = r.__N ? r.__N[0] : r.__[0], a = r.t(c, l);
+    c !== a && (r.__N = [a, r.__[1]], r.__c.setState({}));
+  }], r.__c = w, !w.__f)) {
+    var i = function(l, c, a) {
+      if (!r.__c.__H) return !0;
+      var f = r.__c.__H.__.filter(function(d) {
+        return !!d.__c;
+      });
+      if (f.every(function(d) {
+        return !d.__N;
+      })) return !o || o.call(this, l, c, a);
+      var _ = r.__c.props !== l;
+      return f.forEach(function(d) {
+        if (d.__N) {
+          var u = d.__[0];
+          d.__ = d.__N, d.__N = void 0, u !== d.__[0] && (_ = !0);
+        }
+      }), o && o.call(this, l, c, a) || _;
+    };
+    w.__f = !0;
+    var o = w.shouldComponentUpdate, s = w.componentWillUpdate;
+    w.componentWillUpdate = function(l, c, a) {
+      if (this.__e) {
+        var f = o;
+        o = void 0, i(l, c, a), o = f;
+      }
+      s && s.call(this, l, c, a);
+    }, w.shouldComponentUpdate = i;
+  }
+  return r.__N || r.__;
+}
+function xe(t, e) {
+  var n = ue(j++, 3);
+  !b.__s && qe(n.__H, e) && (n.__ = t, n.u = e, w.__H.__h.push(n));
+}
+function Ne(t) {
+  return Q = 5, ft(function() {
+    return { current: t };
+  }, []);
+}
+function ft(t, e) {
+  var n = ue(j++, 7);
+  return qe(n.__H, e) && (n.__ = t(), n.__H = e, n.__h = t), n.__;
+}
+function dt() {
+  for (var t; t = ze.shift(); ) if (t.__P && t.__H) try {
+    t.__H.__h.forEach(K), t.__H.__h.forEach(_e), t.__H.__h = [];
+  } catch (e) {
+    t.__H.__h = [], b.__e(e, t.__v);
+  }
+}
+b.__b = function(t) {
+  w = null, ye && ye(t);
+}, b.__ = function(t, e) {
+  t && e.__k && e.__k.__m && (t.__m = e.__k.__m), $e && $e(t, e);
+}, b.__r = function(t) {
+  we && we(t), j = 0;
+  var e = (w = t.__c).__H;
+  e && (ee === w ? (e.__h = [], w.__h = [], e.__.forEach(function(n) {
+    n.__N && (n.__ = n.__N), n.u = n.__N = void 0;
+  })) : (e.__h.forEach(K), e.__h.forEach(_e), e.__h = [], j = 0)), ee = w;
+}, b.diffed = function(t) {
+  be && be(t);
+  var e = t.__c;
+  e && e.__H && (e.__H.__h.length && (ze.push(e) !== 1 && ve === b.requestAnimationFrame || ((ve = b.requestAnimationFrame) || ht)(dt)), e.__H.__.forEach(function(n) {
+    n.u && (n.__H = n.u), n.u = void 0;
+  })), ee = w = null;
+}, b.__c = function(t, e) {
+  e.some(function(n) {
+    try {
+      n.__h.forEach(K), n.__h = n.__h.filter(function(r) {
+        return !r.__ || _e(r);
+      });
+    } catch (r) {
+      e.some(function(i) {
+        i.__h && (i.__h = []);
+      }), e = [], b.__e(r, n.__v);
+    }
+  }), ke && ke(t, e);
+}, b.unmount = function(t) {
+  Ce && Ce(t);
+  var e, n = t.__c;
+  n && n.__H && (n.__H.__.forEach(function(r) {
+    try {
+      K(r);
+    } catch (i) {
+      e = i;
+    }
+  }), n.__H = void 0, e && b.__e(e, n.__v));
+};
+var Se = typeof requestAnimationFrame == "function";
+function ht(t) {
+  var e, n = function() {
+    clearTimeout(r), Se && cancelAnimationFrame(e), setTimeout(t);
+  }, r = setTimeout(n, 35);
+  Se && (e = requestAnimationFrame(n));
+}
+function K(t) {
+  var e = w, n = t.__c;
+  typeof n == "function" && (t.__c = void 0, n()), w = e;
+}
+function _e(t) {
+  var e = w;
+  t.__c = t.__(), w = e;
+}
+function qe(t, e) {
+  return !t || t.length !== e.length || e.some(function(n, r) {
+    return n !== t[r];
+  });
+}
+function Ke(t, e) {
+  return typeof e == "function" ? e(t) : e;
+}
+const pt = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+let te = (t = 21) => {
+  let e = "", n = crypto.getRandomValues(new Uint8Array(t |= 0));
+  for (; t--; )
+    e += pt[n[t] & 63];
+  return e;
+};
+class gt {
+  constructor(e) {
+    this.apiUrl = e, this.config = null, this.ws = null, this.messageCallbacks = /* @__PURE__ */ new Set(), this.connectionCallbacks = /* @__PURE__ */ new Set(), this.messages = [], this.reconnectAttempts = 0, this.maxReconnectAttempts = 5, this.reconnectDelay = 1e3;
+  }
+  /**
+   * Initialize the widget by fetching config from TanStack Start API
+   */
+  async initWidget(e) {
+    try {
+      const n = await fetch(`${this.apiUrl}/api/widget/${e}`);
+      if (!n.ok)
+        throw new Error(`Failed to fetch widget config: ${n.status}`);
+      const r = await n.json();
+      return !r || !r.isActive ? (console.error("Widget not found or inactive"), null) : (this.config = r, await this.connectToAgent(), r);
+    } catch (n) {
+      return console.error("Failed to initialize widget:", n), null;
+    }
+  }
+  /**
+   * Connect directly to the agent via WebSocket
+   */
+  async connectToAgent() {
+    if (!this.config?.agentUrl)
+      throw new Error("No agent URL configured");
+    const e = this.getSessionId(), n = `${this.config.agentUrl}/agents/chat/${e}`;
+    return new Promise((r, i) => {
+      try {
+        this.ws = new WebSocket(n), this.ws.onopen = () => {
+          console.log("[Widget] Connected to agent"), this.reconnectAttempts = 0, this.notifyConnectionChange(!0), r();
+        }, this.ws.onmessage = (o) => {
+          this.handleMessage(o);
+        }, this.ws.onclose = () => {
+          if (console.log("[Widget] Disconnected from agent"), this.notifyConnectionChange(!1), this.reconnectAttempts < this.maxReconnectAttempts) {
+            this.reconnectAttempts++;
+            const o = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
+            console.log(`[Widget] Reconnecting in ${o}ms... (attempt ${this.reconnectAttempts})`), setTimeout(() => this.connectToAgent(), o);
+          }
+        }, this.ws.onerror = (o) => {
+          console.error("[Widget] WebSocket error:", o), i(o);
+        };
+      } catch (o) {
+        i(o);
+      }
+    });
+  }
+  /**
+   * Handle incoming WebSocket messages from the agent
+   */
+  handleMessage(e) {
+    try {
+      const n = JSON.parse(e.data);
+      n.type === "text-delta" ? this.setMessages((r) => {
+        const i = r[r.length - 1];
+        return i && i.role === "assistant" ? [
+          ...r.slice(0, -1),
+          { ...i, content: i.content + n.text }
+        ] : [
+          ...r,
+          { id: te(), role: "assistant", content: n.text, timestamp: Date.now() }
+        ];
+      }) : n.type === "done" ? console.log("[Widget] Response complete") : n.type === "handoff" ? console.log(`[Widget] Handoff: ${n.from} -> ${n.to}: ${n.reason}`) : n.type === "tool-call" ? console.log("[Widget] Tool call:", n.tool) : console.log("[Widget] Unknown message type:", n.type);
+    } catch (n) {
+      console.error("[Widget] Error parsing message:", e.data, n);
+    }
+  }
+  /**
+   * Send a message via WebSocket
+   */
+  async sendMessage(e) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN)
+      throw new Error("Not connected to agent");
+    const n = {
+      id: te(),
+      role: "user",
+      content: e,
+      timestamp: Date.now()
+    };
+    this.setMessages((i) => [...i, n]);
+    const r = this.getSessionId();
+    this.ws.send(JSON.stringify({ message: e, sessionId: r }));
+  }
+  /**
+   * Get or generate session ID
+   */
+  getSessionId() {
+    let e = sessionStorage.getItem("ariaflow_session_id");
+    return e || (e = te(), sessionStorage.setItem("ariaflow_session_id", e)), e;
+  }
+  /**
+   * Update messages state
+   */
+  setMessages(e) {
+    this.messages = e(this.messages), this.messageCallbacks.forEach((n) => n(this.messages));
+  }
+  /**
+   * Register a callback for message updates
+   */
+  onMessages(e) {
+    return this.messageCallbacks.add(e), e(this.messages), () => {
+      this.messageCallbacks.delete(e);
+    };
+  }
+  /**
+   * Register a callback for connection state changes
+   */
+  onConnectionChange(e) {
+    return this.connectionCallbacks.add(e), () => {
+      this.connectionCallbacks.delete(e);
+    };
+  }
+  /**
+   * Notify all connection callbacks
+   */
+  notifyConnectionChange(e) {
+    this.connectionCallbacks.forEach((n) => n(e));
+  }
+  /**
+   * Get current messages
+   */
+  getMessages() {
+    return this.messages;
+  }
+  /**
+   * Get the current configuration
+   */
+  getConfig() {
+    return this.config;
+  }
+  /**
+   * Check if connected
+   */
+  isConnected() {
+    return this.ws?.readyState === WebSocket.OPEN;
+  }
+  /**
+   * Disconnect and cleanup
+   */
+  dispose() {
+    this.ws && (this.ws.close(), this.ws = null), this.messageCallbacks.clear(), this.connectionCallbacks.clear();
+  }
+}
+const ne = {
+  none: "0",
+  small: "0.375rem",
+  medium: "0.75rem",
+  large: "1rem"
+};
+function mt({
+  widgetId: t,
+  apiUrl: e,
+  mode: n = "chat",
+  theme: r = "light",
+  position: i = "bottom-right",
+  size: o = "full",
+  radius: s = "medium",
+  baseColor: l,
+  accentColor: c = "#14B8A6",
+  buttonBaseColor: a = "#000000",
+  buttonAccentColor: f = "#FFFFFF",
+  title: _,
+  subtitle: d,
+  emptyChatMessage: u
+}) {
+  const [v, k] = U(!1), [y, g] = U([]), [h, N] = U(""), [C, P] = U(!1), [M, V] = U(!1), [A, H] = U(null), W = Ne(null), $ = Ne(null);
+  xe(() => ((async () => {
+    const F = new gt(e);
+    W.current = F;
+    const fe = await F.initWidget(t);
+    fe && (H(fe), V(!0), F.onMessages((Z) => {
+      g(Z);
+    }), F.onConnectionChange((Z) => {
+      P(Z);
+    }));
+  })(), () => {
+    W.current?.dispose();
+  }), [t, e]), xe(() => {
+    $.current?.scrollIntoView({ behavior: "smooth" });
+  }, [y]);
+  const E = async () => {
+    if (!h.trim() || !C) return;
+    const x = h.trim();
+    N("");
+    try {
+      await W.current?.sendMessage(x);
+    } catch (F) {
+      console.error("Failed to send message:", F);
+    }
+  }, Je = (x) => {
+    x.key === "Enter" && !x.shiftKey && (x.preventDefault(), E());
+  };
+  if (!M)
+    return null;
+  const Ge = _ || A?.title || "Chat with us", Qe = d || A?.subtitle || "We typically reply within minutes", Xe = u || A?.config?.emptyChatMessage || "Start a conversation...";
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: `ariaflow-widget-container ariaflow-widget-${i} ariaflow-widget-${o} ariaflow-widget-radius-${s}`,
+      "data-theme": r,
+      style: {
+        "--ariaflow-accent-color": c,
+        "--ariaflow-base-color": l
+      },
+      children: [
+        !v && /* @__PURE__ */ p(
+          "button",
+          {
+            className: "ariaflow-widget-launcher",
+            onClick: () => k(!0),
+            style: {
+              backgroundColor: a,
+              color: f
+            },
+            "aria-label": "Open chat",
+            children: /* @__PURE__ */ p(
+              "svg",
+              {
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ p("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+              }
+            )
+          }
+        ),
+        v && /* @__PURE__ */ p(
+          "div",
+          {
+            className: "ariaflow-widget-window",
+            style: {
+              backgroundColor: r === "dark" && l ? l : void 0,
+              borderRadius: ne[s]
+            },
+            children: [
+              /* @__PURE__ */ p(
+                "div",
+                {
+                  className: "ariaflow-widget-header",
+                  style: {
+                    backgroundColor: c,
+                    borderRadius: s === "none" ? "0" : `${ne[s]} ${ne[s]} 0 0`
+                  },
+                  children: [
+                    /* @__PURE__ */ p("div", { className: "ariaflow-widget-header-content", children: /* @__PURE__ */ p("div", { className: "ariaflow-widget-title-group", children: [
+                      /* @__PURE__ */ p("h3", { className: "ariaflow-widget-title", children: Ge }),
+                      /* @__PURE__ */ p("p", { className: "ariaflow-widget-subtitle", children: Qe })
+                    ] }) }),
+                    /* @__PURE__ */ p(
+                      "button",
+                      {
+                        className: "ariaflow-widget-close",
+                        onClick: () => k(!1),
+                        "aria-label": "Close chat",
+                        children: /* @__PURE__ */ p(
+                          "svg",
+                          {
+                            width: "20",
+                            height: "20",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            children: [
+                              /* @__PURE__ */ p("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                              /* @__PURE__ */ p("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              !C && /* @__PURE__ */ p("div", { className: "ariaflow-widget-status", children: [
+                /* @__PURE__ */ p("span", { className: "ariaflow-widget-status-dot" }),
+                "Connecting..."
+              ] }),
+              /* @__PURE__ */ p("div", { className: "ariaflow-widget-messages", children: y.length === 0 ? /* @__PURE__ */ p("div", { className: "ariaflow-widget-empty", children: /* @__PURE__ */ p("p", { children: C ? Xe : "Connecting to agent..." }) }) : /* @__PURE__ */ p(O, { children: [
+                y.map((x) => /* @__PURE__ */ p(
+                  "div",
+                  {
+                    className: `ariaflow-widget-message ariaflow-widget-message-${x.role}`,
+                    children: /* @__PURE__ */ p("div", { className: "ariaflow-widget-message-bubble", children: x.content })
+                  },
+                  x.id
+                )),
+                /* @__PURE__ */ p("div", { ref: $ })
+              ] }) }),
+              /* @__PURE__ */ p("div", { className: "ariaflow-widget-input", children: [
+                /* @__PURE__ */ p(
+                  "textarea",
+                  {
+                    value: h,
+                    onInput: (x) => N(x.target.value),
+                    onKeyDown: Je,
+                    placeholder: C ? "Type your message..." : "Connecting...",
+                    rows: 1,
+                    disabled: !C
+                  }
+                ),
+                /* @__PURE__ */ p(
+                  "button",
+                  {
+                    className: "ariaflow-widget-send",
+                    onClick: E,
+                    disabled: !h.trim() || !C,
+                    style: { backgroundColor: c },
+                    "aria-label": "Send message",
+                    children: /* @__PURE__ */ p(
+                      "svg",
+                      {
+                        width: "18",
+                        height: "18",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        children: [
+                          /* @__PURE__ */ p("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                          /* @__PURE__ */ p("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+it(
+  mt,
+  "ariaflow-widget",
+  // Properties to observe from HTML attributes (mirror Vapi's naming convention)
+  [
+    "widget-id",
+    "api-url",
+    "mode",
+    "theme",
+    "position",
+    "size",
+    "radius",
+    "base-color",
+    "accent-color",
+    "button-base-color",
+    "button-accent-color",
+    "title",
+    "subtitle",
+    "empty-chat-message"
+  ],
+  // Shadow DOM (optional, set to false for light DOM)
+  !1
+);
+typeof document < "u" && (document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", Ee) : Ee());
+function Ee() {
+  const t = document.querySelectorAll("ariaflow-widget");
+  console.log(`[AriaFlow] Initializing ${t.length} widget(s)`);
+}
+export {
+  mt as Widget,
+  gt as WidgetClient
+};

package/dist/widget.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,38 @@
+{
+  "name": "@ariaflowagents/widget",
+  "version": "0.5.0",
+  "type": "module",
+  "description": "Embeddable chat widget for AriaFlow Universal Inbox",
+  "main": "./dist/widget.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/widget.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "nanoid": "^5.0.9"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.9.0",
+    "convex": "^1.31.7",
+    "preact": "^10.23.2",
+    "preact-custom-element": "^4.3.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.4.11"
+  },
+  "peerDependencies": {
+    "preact": "^10.0.0"
+  }
+}