@heybello/bello-sdk 0.1.0

package/dist/react.cjs

@@ -0,0 +1,807 @@
+"use client";
+const import_meta = { env: {} };
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var client = require('react-dom/client');
+var framerMotion = require('framer-motion');
+var componentsReact = require('@livekit/components-react');
+var reactAiOrb = require('react-ai-orb');
+var lucideReact = require('lucide-react');
+var livekitClient = require('livekit-client');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function ensureContainer(id = "bello-widget-root") {
+  let el = document.getElementById(id);
+  if (!el) {
+    el = document.createElement("div");
+    el.id = id;
+    el.style.position = "relative";
+    el.style.zIndex = "2147483646";
+    document.body.appendChild(el);
+  }
+  return el;
+}
+function createShadowHost(container) {
+  let root = container._shadowRoot;
+  if (!root) {
+    root = container.attachShadow({ mode: "open" });
+    container._shadowRoot = root;
+  }
+  return root;
+}
+
+function normalizeVars(v) {
+  if (!v || typeof v !== "object") return void 0;
+  const out = {};
+  for (const [k, val] of Object.entries(v)) {
+    if (val == null) continue;
+    const key = k.startsWith("--") ? k : `--${k}`;
+    out[key] = String(val);
+  }
+  return Object.keys(out).length ? out : void 0;
+}
+async function fetchPublicConfig(opts) {
+  const base = opts.apiBaseUrl ?? "";
+  const res = await fetch(
+    `${base}/api/projects/${encodeURIComponent(opts.projectId)}`,
+    {
+      method: "GET",
+      mode: "cors",
+      credentials: "omit",
+      headers: { Accept: "application/json" }
+    }
+  );
+  if (!res.ok) throw new Error(`Config fetch failed: ${res.status}`);
+  const project = await res.json();
+  const wc = project?.project?.widget_config ?? project?.widget_config ?? {};
+  const themeVars = normalizeVars(wc.theme_vars) || normalizeVars(wc.themeVars) || normalizeVars(wc.css_vars) || void 0;
+  return {
+    widgetTitle: wc.widget_title ?? opts.widgetTitle ?? "Chat with AI",
+    widgetButtonTitle: wc.widget_button_title ?? opts.widgetButtonTitle ?? "Start chat",
+    orbStyle: wc.orb_style ?? opts.orbStyle ?? "galaxy",
+    theme: wc.theme ?? opts.theme ?? "dark",
+    position: wc.position ?? opts.position ?? "bottom-right",
+    themeVars
+  };
+}
+async function fetchConnectionDetails(opts) {
+  const base = opts.apiBaseUrl ?? "";
+  const res = await fetch(
+    `${base}/api/livekit/token/${encodeURIComponent(opts.projectId)}`,
+    {
+      method: "POST",
+      mode: "cors",
+      credentials: "omit",
+      headers: { "Content-Type": "application/json" }
+    }
+  );
+  if (!res.ok) throw new Error(`Token fetch failed: ${res.status}`);
+  const j = await res.json();
+  return {
+    serverUrl: j.serverUrl ?? j.livekit_url,
+    participantToken: j.participantToken ?? j.token
+  };
+}
+
+function useLiveKit(opts, enabled) {
+  const room = React.useMemo(() => new livekitClient.Room(), []);
+  const [error, setError] = React.useState(null);
+  const [connecting, setConnecting] = React.useState(false);
+  const [connected, setConnected] = React.useState(false);
+  React.useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    const enableAudioContext = async () => {
+      try {
+        const Ctx = window.AudioContext || window.webkitAudioContext;
+        if (Ctx) {
+          const ctx = new Ctx();
+          if (ctx.state === "suspended") await ctx.resume();
+        }
+      } catch {
+      }
+    };
+    const onMediaDevicesError = (err) => {
+      if (!cancelled) setError(`${err.name}: ${err.message}`);
+    };
+    const onDisconnected = () => {
+      if (!cancelled) setConnected(false);
+    };
+    room.on(livekitClient.RoomEvent.MediaDevicesError, onMediaDevicesError);
+    room.on(livekitClient.RoomEvent.Disconnected, onDisconnected);
+    (async () => {
+      try {
+        setConnecting(true);
+        await enableAudioContext();
+        const { serverUrl, participantToken } = await fetchConnectionDetails(opts);
+        if (cancelled) return;
+        await Promise.all([
+          room.localParticipant.setMicrophoneEnabled(
+            true,
+            void 0,
+            { preConnectBuffer: true }
+          ),
+          room.connect(serverUrl, participantToken)
+        ]);
+        if (!cancelled) setConnected(true);
+      } catch (e) {
+        if (!cancelled) {
+          setError(`${e?.name ?? "Error"}: ${e?.message ?? "unknown"}`);
+        }
+      } finally {
+        if (!cancelled) setConnecting(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+      room.off(livekitClient.RoomEvent.MediaDevicesError, onMediaDevicesError);
+      room.off(livekitClient.RoomEvent.Disconnected, onDisconnected);
+      try {
+        room.disconnect();
+      } catch {
+      }
+      setConnected(false);
+      setConnecting(false);
+    };
+  }, [enabled, room, opts.apiBaseUrl, opts.projectId]);
+  return { room, error, setError, connecting, connected };
+}
+
+function ChatInput({
+  onSend,
+  disabled
+}) {
+  const [message, setMessage] = React__namespace.useState("");
+  const inputRef = React__namespace.useRef(null);
+  const submit = (e) => {
+    e.preventDefault();
+    const txt = message.trim();
+    if (!txt) return;
+    onSend(txt);
+    setMessage("");
+  };
+  React__namespace.useEffect(() => {
+    if (!disabled) inputRef.current?.focus();
+  }, [disabled]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "chat-input-row", onSubmit: submit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: "chat-input",
+        value: message,
+        autoComplete: "off",
+        placeholder: disabled ? "Connecting\u2026" : "Type a message\u2026",
+        onChange: (e) => setMessage(e.target.value),
+        "aria-label": "Message"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        className: "bello-trigger small",
+        disabled: disabled || message.trim().length === 0,
+        "aria-label": "Send",
+        children: "Send"
+      }
+    )
+  ] });
+}
+
+const stickySide = /* @__PURE__ */ new Map();
+function getAttr(t, k) {
+  return t?.streamInfo?.attributes?.[k] ?? t?.attributes?.[k];
+}
+function getIdentity(t) {
+  return t?.participantInfo?.identity ?? t?.participant?.identity ?? t?.participantIdentity ?? t?.participantSid;
+}
+function getTimestamp(t) {
+  const ts = t?.streamInfo?.timestamp ?? t?.timestamp ?? t?.time;
+  return typeof ts === "number" ? ts : Date.now();
+}
+function extractText(t) {
+  return t?.text ?? t?.alternatives?.[0]?.text ?? t?.result?.text ?? "";
+}
+function isFinalUtterance(t) {
+  const f = getAttr(t, "lk.transcription_final");
+  if (typeof f === "string") return f.toLowerCase() === "true";
+  return Boolean(
+    t?.isFinal || t?.final || t?.result?.is_final || t?.result?.final || t?.alternatives?.[0]?.isFinal
+  );
+}
+function utteranceKeyOf(t) {
+  return getAttr(t, "lk.segment_id") || t?.streamInfo?.id || `${getIdentity(t) || "p"}:${getTimestamp(t)}`;
+}
+function rememberSide(key, v) {
+  stickySide.set(key, v);
+  return v;
+}
+function guessLocalByIdentity(id) {
+  if (!id) return void 0;
+  if (id.startsWith("user-")) return true;
+  if (id.startsWith("agent-")) return false;
+  return void 0;
+}
+function decideIsLocalOnce(key, t, room) {
+  if (stickySide.has(key)) return stickySide.get(key);
+  const id = getIdentity(t);
+  const byPrefix = guessLocalByIdentity(id);
+  if (typeof byPrefix === "boolean")
+    return rememberSide(key, byPrefix);
+  const p = t?.participant || {};
+  if (typeof p?.isLocal === "boolean")
+    return rememberSide(key, p.isLocal);
+  const lp = room?.localParticipant || {};
+  const localId = lp.identity ?? lp.sid;
+  if (localId && id)
+    return rememberSide(key, String(localId) === String(id));
+  return rememberSide(key, false);
+}
+function transcriptionToChatMessage(t, room) {
+  const anyT = t;
+  const key = utteranceKeyOf(anyT);
+  const ts = getTimestamp(anyT);
+  const text = extractText(anyT);
+  const identity = getIdentity(anyT);
+  const isLocal = decideIsLocalOnce(key, anyT, room);
+  return {
+    id: `tx-${key}`,
+    // one id per utterance (collapses partials into a single bubble)
+    from: {
+      // Compatible with ChatEntry expectations
+      isLocal,
+      name: isLocal ? "You" : "Agent",
+      identity: identity ?? (isLocal ? "local" : "agent")
+    },
+    message: text,
+    timestamp: ts
+  };
+}
+
+function useChatAndTranscription() {
+  const transcriptions = componentsReact.useTranscriptions();
+  const chat = componentsReact.useChat();
+  const room = componentsReact.useRoomContext();
+  const storeRef = React.useRef(/* @__PURE__ */ new Map());
+  const orderRef = React.useRef([]);
+  const [, force] = React.useState(0);
+  const last = transcriptions[transcriptions.length - 1];
+  const txSig = transcriptions.length === 0 ? "0" : `${transcriptions.length}:${utteranceKeyOf(
+    last
+  )}:${extractText(last)}:${isFinalUtterance(last) ? 1 : 0}`;
+  React.useEffect(() => {
+    if (!transcriptions?.length) return;
+    let changed = false;
+    for (const t of transcriptions) {
+      const anyT = t;
+      const k = `tx-${utteranceKeyOf(anyT)}`;
+      const next = transcriptionToChatMessage(t, room);
+      const txt = extractText(anyT);
+      const fin = isFinalUtterance(anyT);
+      const prev = storeRef.current.get(k);
+      if (!prev) {
+        storeRef.current.set(k, {
+          msg: next,
+          final: Boolean(fin),
+          lastText: txt
+        });
+        orderRef.current.push(k);
+        changed = true;
+        continue;
+      }
+      const needTextUpdate = txt && txt !== prev.lastText;
+      const becameFinal = !prev.final && fin;
+      if (needTextUpdate || becameFinal) {
+        storeRef.current.set(k, {
+          msg: {
+            ...prev.msg,
+            message: needTextUpdate ? txt : prev.msg.message,
+            timestamp: Math.max(
+              prev.msg.timestamp || 0,
+              next.timestamp || 0
+            ),
+            from: {
+              ...prev.msg.from,
+              isLocal: prev.msg.from?.isLocal
+            }
+          },
+          final: prev.final || Boolean(fin),
+          lastText: needTextUpdate ? txt : prev.lastText
+        });
+        changed = true;
+      }
+    }
+    if (changed) force((v) => v + 1);
+  }, [txSig, room]);
+  const messages = React.useMemo(() => {
+    const txMsgs = orderRef.current.map((k) => storeRef.current.get(k)?.msg).filter(Boolean);
+    const all = [...txMsgs, ...chat.chatMessages];
+    all.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));
+    return all;
+  }, [chat.chatMessages, txSig]);
+  const revision = React.useMemo(() => txSig, [txSig]);
+  return { messages, send: chat.send, revision };
+}
+
+function ChatEntry({
+  entry
+}) {
+  const room = componentsReact.useRoomContext();
+  const lp = room?.localParticipant || {};
+  const localId = lp.identity ?? lp.sid;
+  const from = entry.from || {};
+  const pid = from?.identity ?? from?.sid;
+  const isUser = from?.isLocal === true || localId && pid && String(localId) === String(pid) || typeof pid === "string" && pid.startsWith("user-");
+  const who = isUser ? "You" : from?.name || "Agent";
+  const time = typeof entry.timestamp === "number" ? new Date(entry.timestamp) : /* @__PURE__ */ new Date();
+  const timeStr = time.toLocaleTimeString(void 0, {
+    timeStyle: "short"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      className: `chat-entry ${isUser ? "me" : "them"}`,
+      title: time.toString(),
+      children: [
+        !isUser && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chat-name", children: who }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `chat-bubble ${isUser ? "me" : "them"}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chat-text", children: entry.message }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chat-time", children: timeStr })
+        ] })
+      ]
+    }
+  );
+}
+
+function preset(style) {
+  switch (style) {
+    case "ocean-depths":
+      return reactAiOrb.oceanDepthsPreset;
+    case "caribbean":
+      return reactAiOrb.caribeanPreset;
+    case "cherry-blossom":
+      return reactAiOrb.cherryBlossomPreset;
+    case "emerald":
+      return reactAiOrb.emeraldPreset;
+    case "multi-color":
+      return reactAiOrb.multiColorPreset;
+    case "golden-glow":
+      return reactAiOrb.goldenGlowPreset;
+    case "volcanic":
+      return reactAiOrb.volcanicPreset;
+    case "galaxy":
+    default:
+      return reactAiOrb.galaxyPreset;
+  }
+}
+function BelloWidget$1({
+  opts,
+  theme,
+  onClose
+}) {
+  const [open, setOpen] = React.useState(false);
+  const agentOn = opts.agentEnabled !== false;
+  const voiceOn = opts.voiceEnabled !== false;
+  const { room, error, setError, connecting, connected } = useLiveKit(
+    opts,
+    open && agentOn
+  );
+  React.useEffect(() => {
+    const handler = (e) => {
+      const detail = e.detail;
+      const t = detail?.type;
+      if (t === "open") setOpen(true);
+      if (t === "close") {
+        setOpen(false);
+        onClose();
+      }
+    };
+    window.addEventListener("bello:event", handler);
+    return () => window.removeEventListener("bello:event", handler);
+  }, [onClose]);
+  const cfg = React.useMemo(
+    () => ({
+      title: opts.widgetTitle ?? "Need support?",
+      cta: opts.widgetButtonTitle ?? "Chat with AI",
+      pos: opts.position ?? "bottom-right",
+      orb: opts.orbStyle ?? "galaxy"
+    }),
+    [opts]
+  );
+  const cls = theme === "dark" ? "theme-dark" : theme === "glass" ? "theme-glass" : "theme-light";
+  const collapse = () => {
+    setOpen(false);
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls, children: [
+    !open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bello-container bello-row", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactAiOrb.Orb,
+        {
+          ...preset(cfg.orb),
+          size: 0.7,
+          animationSpeedBase: 1,
+          animationSpeedHue: 1,
+          mainOrbHueAnimation: true
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bello-title-container", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bello-hero", children: cfg.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "bello-trigger",
+            onClick: () => setOpen(true),
+            children: cfg.cta
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        className: "bello-pop",
+        "data-pos": cfg.pos,
+        initial: false,
+        animate: {
+          opacity: open ? 1 : 0,
+          scale: open ? 1 : 0.98,
+          y: open ? 0 : 6,
+          pointerEvents: open ? "auto" : "none"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bello-card bello-body", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bello-header", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bello-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactAiOrb.Orb,
+                {
+                  ...preset(cfg.orb),
+                  size: 0.5,
+                  animationSpeedBase: 1,
+                  animationSpeedHue: 1,
+                  mainOrbHueAnimation: true
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bello-title", children: cfg.title }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bello-subtitle", children: agentOn ? "Voice & text assistant" : "UI preview (agent off)" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                className: "bello-trigger-danger small",
+                onClick: collapse,
+                "aria-label": "End session",
+                title: "End",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 14 }),
+                  "End"
+                ]
+              }
+            )
+          ] }),
+          error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bello-main", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bello-error", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bello-error-title", children: "Error" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bello-error-text", children: error }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "bello-trigger small mt",
+                onClick: () => setError(null),
+                children: "Dismiss"
+              }
+            )
+          ] }) }) : agentOn ? /* @__PURE__ */ jsxRuntime.jsxs(componentsReact.RoomContext.Provider, { value: room, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bello-main", children: [
+              voiceOn && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(componentsReact.RoomAudioRenderer, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(componentsReact.StartAudio, { label: "Start Audio" }),
+                /* @__PURE__ */ jsxRuntime.jsx(AgentAudioEnsurePlay, {})
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TopStatus,
+                {
+                  connecting,
+                  connected,
+                  voiceOn
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(ChatRegion, {})
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bello-footer", children: /* @__PURE__ */ jsxRuntime.jsx(FooterInput, { connected }) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bello-main", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "status", children: "UI preview \xB7 Agent disabled" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chat-wrap", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "chat-list", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "chat-entry them", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chat-name", children: "Agent" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chat-bubble them", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chat-text", children: "Hi! This is UI-only mode." }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chat-time", children: "\u2014" })
+                ] })
+              ] }) }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bello-footer", children: /* @__PURE__ */ jsxRuntime.jsx(ChatInput, { disabled: true, onSend: () => {
+            } }) })
+          ] })
+        ] })
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "bello-fab",
+        onClick: collapse,
+        "aria-label": "Collapse widget",
+        title: "Collapse",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 20 })
+      }
+    )
+  ] });
+}
+function TopStatus({
+  connecting,
+  connected,
+  voiceOn = true
+}) {
+  const { state: agentState, audioTrack } = componentsReact.useVoiceAssistant();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "center", children: [
+    voiceOn && /* @__PURE__ */ jsxRuntime.jsx(
+      componentsReact.BarVisualizer,
+      {
+        barCount: 5,
+        options: { minHeight: 6 },
+        className: "bars",
+        trackRef: audioTrack,
+        state: agentState,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bar" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "status", children: [
+      connecting && "Connecting\u2026",
+      !connecting && connected && (agentState === "speaking" ? "Agent speaking\u2026" : agentState === "listening" ? "Agent listening\u2026" : agentState === "thinking" ? "Agent thinking\u2026" : "Connected"),
+      !connecting && !connected && "Ready"
+    ] })
+  ] });
+}
+function AgentAudioEnsurePlay() {
+  const { audioTrack } = componentsReact.useVoiceAssistant();
+  React.useEffect(() => {
+    if (!audioTrack) return;
+    const el = audioTrack?.attachedElements?.[0];
+    const kick = (a) => {
+      try {
+        a.muted = false;
+        a.playsInline = true;
+        const p = a.play();
+        if (p && typeof p.then === "function") p.catch(() => {
+        });
+      } catch {
+      }
+    };
+    if (el) {
+      kick(el);
+      return;
+    }
+    try {
+      const audio = new Audio();
+      audio.autoplay = true;
+      audio.playsInline = true;
+      audio.muted = false;
+      if (typeof audioTrack.attach === "function") {
+        audioTrack.attach(audio);
+      } else if (audioTrack.mediaStream) {
+        audio.srcObject = audioTrack.mediaStream;
+      }
+      kick(audio);
+    } catch {
+    }
+  }, [audioTrack]);
+  return null;
+}
+function ChatRegion() {
+  const { messages, revision } = useChatAndTranscription();
+  const listRef = React.useRef(null);
+  const endRef = React.useRef(null);
+  const stickRef = React.useRef(true);
+  React.useEffect(() => {
+    const listEl = listRef.current;
+    if (!listEl) return;
+    const scroller = listEl.closest(
+      ".chat-wrap, .bello-main, .scroll-container"
+    ) || listEl.parentElement || listEl;
+    const onScroll = () => {
+      const nearBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight < 80;
+      stickRef.current = nearBottom;
+    };
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+    return () => scroller.removeEventListener("scroll", onScroll);
+  }, []);
+  React.useLayoutEffect(() => {
+    if (!stickRef.current) return;
+    requestAnimationFrame(() => {
+      endRef.current?.scrollIntoView({
+        block: "end",
+        inline: "nearest",
+        behavior: "auto"
+      });
+    });
+  }, [
+    revision,
+    messages.length,
+    messages[messages.length - 1]?.id,
+    messages[messages.length - 1]?.message
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chat-wrap", children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { ref: listRef, className: "chat-list", "aria-live": "polite", children: [
+    messages.map((m) => /* @__PURE__ */ jsxRuntime.jsx(ChatEntry, { entry: m }, m.id)),
+    /* @__PURE__ */ jsxRuntime.jsx("li", { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: endRef }) })
+  ] }) });
+}
+function FooterInput({ connected }) {
+  const { send } = useChatAndTranscription();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChatInput,
+    {
+      disabled: !connected,
+      onSend: (txt) => {
+        const t = txt.trim();
+        if (!t) return;
+        send(t);
+      }
+    }
+  );
+}
+
+var cssText = ":host {\n  all: initial;\n  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI,\n    Roboto, Arial, Noto Sans, 'Apple Color Emoji', 'Segoe UI Emoji';\n\n  /* defaults (can be overridden via themeVars) */\n  --bello-bg: #111;\n  --bello-fg: #fff;\n  --bello-surface: #111;\n  --bello-border: rgba(255, 255, 255, 0.12);\n  --bello-cta-bg: #fff;\n  --bello-cta-fg: #111;\n  --bello-subtle: rgba(255, 255, 255, 0.72);\n  --bello-danger: #ff6b6b;\n  --bello-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);\n\n  --bello-radius: 12px;\n  --bello-radius-pill: 999px;\n  --bello-gap: 12px;\n  --bello-pop-offset: 50px;\n\n  --bello-width: 420px;\n  --bello-height: 520px;\n  --bello-fab-size-width: 80px;\n  --bello-fab-size-height: 52px;\n  --bello-fab-gap: 12px;\n}\n\n/* Themes only set alternate defaults; API variables still win */\n.theme-light :host,\n.theme-light {\n  --bello-bg: #fff;\n  --bello-fg: #111;\n  --bello-surface: #fff;\n  --bello-border: rgba(0, 0, 0, 0.08);\n  --bello-cta-bg: #111;\n  --bello-cta-fg: #fff;\n  --bello-subtle: rgba(17, 17, 17, 0.72);\n}\n.theme-glass :host,\n.theme-glass {\n  --bello-surface: rgba(255, 255, 255, 0.1);\n  --bello-fg: #111;\n  --bello-border: rgba(255, 255, 255, 0.2);\n  --bello-cta-bg: #111;\n  --bello-cta-fg: #fff;\n  backdrop-filter: blur(10px);\n}\n\n/* containers */\n.bello-container {\n  border-radius: var(--bello-radius);\n  border: 1px solid var(--bello-border);\n  box-shadow: var(--bello-shadow);\n  padding: var(--bello-gap);\n  background: var(--bello-surface);\n  color: var(--bello-fg);\n}\n\n.bello-title-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.bello-card {\n  border-radius: var(--bello-radius);\n  border: 1px solid var(--bello-border);\n  background: var(--bello-surface);\n  color: var(--bello-fg);\n}\n\n/* buttons */\n.bello-trigger {\n  border-radius: var(--bello-radius-pill);\n  padding: 10px 18px;\n  font-weight: 600;\n  border: none;\n  cursor: pointer;\n  background: var(--bello-cta-bg);\n  color: var(--bello-cta-fg);\n}\n.bello-trigger.small {\n  padding: 8px 12px;\n  font-size: 12px;\n}\n.bello-trigger:hover {\n  opacity: 0.9;\n}\n\n.bello-trigger-danger {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  border-radius: var(--bello-radius-pill);\n  padding: 10px 18px;\n  font-weight: 600;\n  border: none;\n  cursor: pointer;\n  background: var(--bello-danger);\n  color: #fff;\n}\n.bello-trigger-danger.small {\n  padding: 8px 12px;\n  font-size: 12px;\n}\n.bello-trigger-danger:hover {\n  opacity: 0.9;\n}\n\n/* header */\n.bello-header {\n  display: flex;\n  align-items: center;\n  gap: var(--bello-gap);\n  padding: var(--bello-gap);\n  border-bottom: 1px solid var(--bello-border);\n  justify-content: space-between;\n}\n.bello-title {\n  font-size: 14px;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.bello-subtitle {\n  font-size: 12px;\n  opacity: 0.8;\n}\n\n/* body/sizing */\n.bello-body {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: var(--bello-height);\n  width: var(--bello-width);\n  max-height: 80vh;\n}\n.bello-main {\n  flex: 1;\n  overflow: auto;\n  padding: var(--bello-gap);\n}\n/* The FAB is a sibling of .bello-pop inside the fixed anchor. */\n.bello-fab {\n  position: absolute; /* relative to the fixed anchor created by embed.tsx */\n  z-index: 2; /* above the card, but below any global launchers */\n  width: var(--bello-fab-size-width);\n  height: var(--bello-fab-size-height);\n  border-radius: 999px;\n  border: 1px solid var(--bello-border);\n  background: var(--bello-cta-bg);\n  color: var(--bello-cta-fg);\n  box-shadow: var(--bello-shadow);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  /* default hidden positioning; specific corners below set the final spot */\n  top: auto;\n  right: auto;\n  bottom: auto;\n  left: auto;\n}\n.bello-fab:hover {\n  opacity: 0.9;\n}\n\n/* Anchor the FAB to the SAME corner as the widget, but OUTSIDE the card. */\n.bello-pop[data-pos='bottom-right'] ~ .bello-fab {\n  right: calc(-1 * var(--bello-fab-gap));\n  bottom: calc(-1 * var(--bello-fab-gap));\n}\n.bello-pop[data-pos='bottom-left'] ~ .bello-fab {\n  left: calc(-1 * var(--bello-fab-gap));\n  bottom: calc(-1 * var(--bello-fab-gap));\n}\n.bello-pop[data-pos='top-right'] ~ .bello-fab {\n  right: calc(-1 * var(--bello-fab-gap));\n  top: calc(-1 * var(--bello-fab-gap));\n}\n.bello-pop[data-pos='top-left'] ~ .bello-fab {\n  left: calc(-1 * var(--bello-fab-gap));\n  top: calc(-1 * var(--bello-fab-gap));\n}\n\n.bello-footer {\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 0 var(--bello-gap);\n}\n\n.bello-footer .chat-input-row {\n  width: 100%;\n}\n/* popover positioning */\n.bello-pop {\n  position: absolute;\n  transform-origin: bottom right;\n}\n.bello-pop[data-pos='bottom-right'] {\n  bottom: var(--bello-pop-offset);\n  right: 0;\n}\n.bello-pop[data-pos='bottom-left'] {\n  bottom: var(--bello-pop-offset);\n  left: 0;\n  transform-origin: bottom left;\n}\n.bello-pop[data-pos='top-right'] {\n  top: var(--bello-pop-offset);\n  right: 0;\n  transform-origin: top right;\n}\n.bello-pop[data-pos='top-left'] {\n  top: var(--bello-pop-offset);\n  left: 0;\n  transform-origin: top left;\n}\n\n/* helpers */\n.bello-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.bello-hero {\n  font-weight: 700;\n}\n\n.bello-error {\n  border: 1px solid var(--bello-danger);\n  padding: var(--bello-gap);\n  border-radius: 8px;\n}\n.bello-error-title {\n  font-weight: 700;\n  margin-bottom: 4px;\n}\n.bello-error-text {\n  font-size: 12px;\n  opacity: 0.9;\n}\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 8px;\n}\n.status {\n  font-size: 12px;\n  opacity: 0.8;\n}\n\n/* chat */\n.chat-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  height: 100%;\n}\n.chat-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.chat-entry {\n  display: flex;\n  flex-direction: column;\n}\n.chat-entry.me {\n  align-items: flex-end;\n} /* YOU → right */\n.chat-entry.them {\n  align-items: flex-start;\n} /* AGENT → left */\n\n.chat-entry .chat-name {\n  font-size: 11px;\n  opacity: 0.7;\n  margin-bottom: 2px;\n}\n.chat-entry.me .chat-name {\n  align-self: flex-end;\n}\n.chat-entry.them .chat-name {\n  align-self: flex-start;\n}\n\n.chat-bubble {\n  max-width: 75%;\n  padding: 8px 10px;\n  border-radius: 10px;\n  border: 1px solid var(--bello-border);\n}\n.chat-bubble.me {\n  background: rgba(0, 0, 0, 0.2);\n} /* you (right) */\n.chat-bubble.them {\n  background: rgba(255, 255, 255, 0.06);\n} /* agent (left) */\n\n.chat-text {\n  display: inline-block;\n}\n.chat-time {\n  font-size: 10px;\n  opacity: 0.6;\n  margin-left: 8px;\n}\n\n.chat-input-row {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.chat-input {\n  flex: 1;\n  padding: 10px 12px;\n  border-radius: 8px;\n  border: 1px solid var(--bello-border);\n  background: transparent;\n  color: var(--bello-fg);\n}\n.chat-input::placeholder {\n  color: var(--bello-subtle);\n}\n";
+
+if (typeof window !== "undefined" && window.process == null) {
+  window.process = {
+    env: {
+      NODE_ENV: undefined?.MODE || "development"
+    }
+  };
+}
+
+let currentOpts = null;
+let root = null;
+let shadowRootRef = null;
+let hostEl = null;
+function mirrorHeadStylesInto(shadow) {
+  const seen = /* @__PURE__ */ new WeakSet();
+  const copy = (node) => {
+    if (!(node instanceof HTMLElement)) return;
+    if (node.tagName === "STYLE" && !seen.has(node)) {
+      const style = document.createElement("style");
+      style.textContent = node.textContent ?? "";
+      shadow.appendChild(style);
+      seen.add(node);
+    }
+  };
+  document.head.querySelectorAll("style").forEach((n) => copy(n));
+  const mo = new MutationObserver((mutations) => {
+    for (const m of mutations) m.addedNodes.forEach(copy);
+  });
+  mo.observe(document.head, { childList: true });
+}
+function applyThemeVars(vars) {
+  if (!hostEl || !vars) return;
+  for (const [k, v] of Object.entries(vars))
+    hostEl.style.setProperty(k, v);
+}
+async function mount(opts) {
+  const publicCfg = await fetchPublicConfig(opts);
+  currentOpts = {
+    agentEnabled: opts.agentEnabled ?? true,
+    voiceEnabled: opts.voiceEnabled ?? true,
+    ...opts,
+    theme: opts.theme ?? publicCfg.theme,
+    orbStyle: opts.orbStyle ?? publicCfg.orbStyle,
+    position: opts.position ?? publicCfg.position,
+    widgetTitle: opts.widgetTitle ?? publicCfg.widgetTitle,
+    widgetButtonTitle: opts.widgetButtonTitle ?? publicCfg.widgetButtonTitle,
+    themeVars: {
+      ...publicCfg.themeVars ?? {},
+      ...opts.themeVars ?? {}
+    }
+  };
+  const theme = currentOpts.theme ?? "dark";
+  const container = ensureContainer("bello-widget-root");
+  hostEl = container;
+  const shadow = createShadowHost(container);
+  shadowRootRef = shadow;
+  const style = document.createElement("style");
+  style.textContent = cssText;
+  shadow.appendChild(style);
+  mirrorHeadStylesInto(shadow);
+  applyThemeVars(currentOpts.themeVars);
+  const anchor = document.createElement("div");
+  anchor.style.position = "fixed";
+  anchor.style.zIndex = "2147483647";
+  const pos = currentOpts.position ?? "bottom-right";
+  const map = {
+    "bottom-right": { bottom: "16px", right: "16px" },
+    "bottom-left": { bottom: "16px", left: "16px" },
+    "top-right": { top: "16px", right: "16px" },
+    "top-left": { top: "16px", left: "16px" }
+  };
+  Object.assign(anchor.style, map[pos]);
+  shadow.appendChild(anchor);
+  root = client.createRoot(anchor);
+  root.render(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BelloWidget$1,
+      {
+        opts: currentOpts,
+        theme,
+        onClose: () => {
+        }
+      }
+    )
+  );
+}
+function rerender() {
+  if (!root || !shadowRootRef || !currentOpts) return;
+  applyThemeVars(currentOpts.themeVars);
+  root.render(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BelloWidget$1,
+      {
+        opts: currentOpts,
+        theme: currentOpts.theme ?? "dark",
+        onClose: () => {
+        }
+      }
+    )
+  );
+}
+async function initWidget(opts) {
+  if (typeof window === "undefined") return;
+  await mount(opts);
+}
+function updateWidget(opts) {
+  if (typeof window === "undefined") return;
+  currentOpts = {
+    ...currentOpts ?? {},
+    ...opts ?? {}
+  };
+  rerender();
+}
+
+function BelloWidget(props) {
+  const inited = React.useRef(false);
+  React.useEffect(() => {
+    if (!inited.current) {
+      initWidget(props);
+      inited.current = true;
+    } else {
+      updateWidget(props);
+    }
+  }, [props]);
+  return null;
+}
+
+exports.BelloWidget = BelloWidget;
+//# sourceMappingURL=react.cjs.map