@livelayer/react 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -1,33 +1,1250 @@
-import { jsx as g } from "react/jsx-runtime";
-import { useRef as u, useCallback as p, useEffect as v } from "react";
-import "@livelayer/sdk";
-const h = ({
-  agentId: c,
-  baseUrl: s,
-  apiKey: o,
-  mode: t,
+"use client";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { Component as ze, useState as E, useRef as N, useEffect as C, useCallback as y, useMemo as ae } from "react";
+import { LiveKitSession as Re } from "@livelayer/sdk";
+import { createLocalAudioTrack as Ie } from "livekit-client";
+class Ae extends ze {
+  constructor() {
+    super(...arguments), this.state = { hasError: !1, error: null }, this.reset = () => {
+      this.setState({ hasError: !1, error: null });
+    };
+  }
+  static getDerivedStateFromError(t) {
+    return { hasError: !0, error: t };
+  }
+  componentDidCatch(t, r) {
+    var i, l;
+    (l = (i = this.props).onError) == null || l.call(i, t, r);
+  }
+  render() {
+    var t;
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ f("div", { className: "ll-error-boundary", role: "alert", children: [
+      /* @__PURE__ */ e("p", { className: "ll-error-boundary__title", children: "Widget crashed" }),
+      /* @__PURE__ */ e("p", { className: "ll-error-boundary__message", children: ((t = this.state.error) == null ? void 0 : t.message) || "Something went wrong." }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "ll-error-boundary__retry",
+          onClick: this.reset,
+          children: "Reload widget"
+        }
+      )
+    ] }) : this.props.children;
+  }
+}
+function Te(n) {
+  const [t, r] = E("idle"), [i, l] = E("idle"), [a, m] = E([]), [u, p] = E(null), [g, d] = E(null), [c, o] = E(null), [_, b] = E(!1), [M, S] = E(null), I = N(null), A = N(n.onDataMessage);
+  A.current = n.onDataMessage, C(() => {
+    const w = {
+      onConnectionStateChange: (v) => {
+        r(v), v === "connected" && S(null);
+      },
+      onAgentStateChange: l,
+      onTranscript: (v) => m([...v]),
+      onAgentConfig: p,
+      onAudioTrack: (v) => o(v),
+      onVideoTrack: (v) => d(v),
+      onVideoTrackRemoved: () => d(null),
+      onError: (v) => S(v),
+      onDataMessage: (v) => {
+        var B;
+        (B = A.current) == null || B.call(A, v);
+      },
+      onResumabilityChange: b
+    }, L = new Re(
+      {
+        agentId: n.agentId,
+        baseUrl: n.baseUrl,
+        apiKey: n.apiKey,
+        sessionEndpoint: n.sessionEndpoint,
+        sessionBody: n.sessionBody
+      },
+      w
+    );
+    return I.current = L, r("idle"), l("idle"), m([]), p(null), d(null), o(null), b(!1), S(null), () => {
+      var v;
+      (v = L.destroy) == null || v.call(L), I.current = null;
+    };
+  }, [
+    n.agentId,
+    n.baseUrl,
+    n.apiKey,
+    n.sessionEndpoint,
+    JSON.stringify(n.sessionBody ?? {})
+  ]);
+  const P = y(async () => {
+    const w = I.current;
+    if (w)
+      try {
+        await w.connect();
+      } catch (L) {
+        throw S(L instanceof Error ? L.message : String(L)), L;
+      }
+  }, []), $ = y(() => {
+    const w = I.current;
+    w && w.disconnect();
+  }, []), z = y(() => {
+    var w;
+    return ((w = I.current) == null ? void 0 : w.getRoom()) ?? null;
+  }, []);
+  return {
+    connectionState: t,
+    agentState: i,
+    transcript: a,
+    agentConfig: u,
+    videoElement: g,
+    audioElement: c,
+    canResume: _,
+    error: M,
+    connect: P,
+    disconnect: $,
+    getRoom: z,
+    session: I.current
+  };
+}
+function Be() {
+  const n = N(null), t = N(null), r = N(null), i = N(null), l = N(/* @__PURE__ */ new Set()), a = N(null), m = y(() => {
+    const c = t.current;
+    if (!c) {
+      i.current = null;
+      return;
+    }
+    (!a.current || a.current.length !== c.frequencyBinCount) && (a.current = new Uint8Array(
+      new ArrayBuffer(c.frequencyBinCount)
+    ));
+    const o = a.current;
+    c.getByteFrequencyData(o);
+    let _ = 0;
+    for (let M = 0; M < o.length; M++) _ += o[M];
+    const b = _ / o.length / 255;
+    for (const M of l.current)
+      try {
+        M(b);
+      } catch (S) {
+        console.error("[useAudioLevel] subscriber threw:", S);
+      }
+    i.current = requestAnimationFrame(m);
+  }, []), u = y(() => {
+    if (n.current || typeof window > "u" || typeof AudioContext > "u") return;
+    const c = new AudioContext(), o = c.createAnalyser();
+    o.fftSize = 64, o.connect(c.destination), n.current = c, t.current = o;
+  }, []), p = y(
+    (c) => {
+      if (u(), !(!n.current || !t.current)) {
+        if (r.current) {
+          try {
+            r.current.disconnect();
+          } catch {
+          }
+          r.current = null;
+        }
+        try {
+          const o = n.current.createMediaElementSource(c);
+          o.connect(t.current), r.current = o;
+        } catch (o) {
+          console.warn("[useAudioLevel] createMediaElementSource failed:", o);
+          return;
+        }
+        i.current === null && (i.current = requestAnimationFrame(m));
+      }
+    },
+    [u, m]
+  ), g = y(() => {
+    if (i.current !== null && (cancelAnimationFrame(i.current), i.current = null), r.current) {
+      try {
+        r.current.disconnect();
+      } catch {
+      }
+      r.current = null;
+    }
+  }, []), d = y((c) => (l.current.add(c), () => {
+    l.current.delete(c);
+  }), []);
+  return C(() => () => {
+    if (g(), t.current) {
+      try {
+        t.current.disconnect();
+      } catch {
+      }
+      t.current = null;
+    }
+    if (n.current) {
+      try {
+        n.current.close();
+      } catch {
+      }
+      n.current = null;
+    }
+    l.current.clear(), a.current = null;
+  }, [g]), { attach: p, detach: g, subscribe: d };
+}
+function De() {
+  const [n, t] = E(!1), [r, i] = E(null), l = N(null), a = N(null), m = y(async (d) => {
+    if (l.current && a.current) {
+      try {
+        await a.current.localParticipant.unpublishTrack(l.current);
+      } catch {
+      }
+      l.current.stop(), l.current = null;
+    }
+    a.current = d, i(null);
+    try {
+      const c = await Ie({
+        echoCancellation: !0,
+        noiseSuppression: !0
+      });
+      await d.localParticipant.publishTrack(c), l.current = c, t(c.isMuted);
+    } catch (c) {
+      const o = c instanceof Error && c.name === "NotAllowedError" ? "Enable your microphone to talk with the agent." : "Microphone unavailable. Check browser permissions and try again.";
+      throw i(o), c;
+    }
+  }, []), u = y(() => {
+    const d = l.current;
+    d && (d.isMuted ? (d.unmute(), t(!1)) : (d.mute(), t(!0)));
+  }, []), p = y(() => {
+    const d = l.current, c = a.current;
+    if (d && c) {
+      try {
+        c.localParticipant.unpublishTrack(d);
+      } catch {
+      }
+      d.stop();
+    }
+    l.current = null, a.current = null, t(!1);
+  }, []), g = y(() => i(null), []);
+  return {
+    isMuted: n,
+    micError: r,
+    toggleMute: u,
+    setupMic: m,
+    teardownMic: p,
+    clearError: g
+  };
+}
+function je(n) {
+  if (typeof window > "u") return null;
+  try {
+    return window.localStorage.getItem(n);
+  } catch {
+    return null;
+  }
+}
+function Ue(n, t) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(n, t);
+    } catch {
+    }
+}
+function Pe({
+  value: n,
+  defaultValue: t = "expanded",
+  onChange: r
+} = {}) {
+  const i = n !== void 0, [l, a] = E(t), m = i ? n : l, u = y(
+    (p) => {
+      p !== m && (i || a(p), r == null || r(p));
+    },
+    [m, i, r]
+  );
+  return [m, u];
+}
+const $e = ["hidden", "minimized", "expanded"];
+function Ve(n) {
+  return n && $e.includes(n) ? n : null;
+}
+function We({
+  value: n,
+  defaultValue: t = "expanded",
+  onChange: r,
+  persistKey: i = "ll-widget",
+  disablePersistence: l = !1
+} = {}) {
+  const a = `${i}:display-mode`, m = N(!1), [u, p] = Pe({
+    value: n,
+    defaultValue: t,
+    onChange: (g) => {
+      n === void 0 && !l && Ue(a, g), r == null || r(g);
+    }
+  });
+  return C(() => {
+    if (m.current || (m.current = !0, l || n !== void 0)) return;
+    const g = Ve(je(a));
+    g && g !== u && p(g);
+  }, []), [u, p];
+}
+const Ke = 640;
+function qe(n = Ke) {
+  const [t, r] = E(!1);
+  return C(() => {
+    if (n === !1) {
+      r(!1);
+      return;
+    }
+    if (typeof window > "u" || typeof window.matchMedia > "u")
+      return;
+    const i = `(max-width: ${n - 1}px)`, l = window.matchMedia(i), a = () => r(l.matches);
+    return a(), typeof l.addEventListener == "function" ? (l.addEventListener("change", a), () => l.removeEventListener("change", a)) : (l.addListener(a), () => {
+      l.removeListener(a);
+    });
+  }, [n]), t;
+}
+const oe = ({ muted: n = !1, className: t }) => n ? /* @__PURE__ */ f(
+  "svg",
+  {
+    className: t,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"
+        }
+      )
+    ]
+  }
+) : /* @__PURE__ */ e(
+  "svg",
+  {
+    className: t,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4M12 1a3 3 0 00-3 3v4a3 3 0 006 0V4a3 3 0 00-3-3z"
+      }
+    )
+  }
+), _e = ({ className: n }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: n,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+      }
+    )
+  }
+), ge = ({ className: n }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: n,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+  }
+), ve = ({ className: n }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: n,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+  }
+), Fe = {
+  left: 180,
+  right: 0,
+  up: -90,
+  down: 90
+}, Oe = ({ direction: n = "right", className: t }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: t,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    style: { transform: `rotate(${Fe[n]}deg)` },
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+  }
+), He = ({ muted: n = !1, className: t }) => /* @__PURE__ */ f(
+  "svg",
+  {
+    className: t,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M15 9v6m3-9v12M9 5l-3 4H3v6h3l3 4V5z"
+        }
+      ),
+      n && /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 20L20 4" })
+    ]
+  }
+), Ye = ({ className: n }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: n,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+      }
+    )
+  }
+);
+function Ge(n) {
+  return n === "top-left" || n === "bottom-left" ? "left" : "right";
+}
+const Je = ({
+  position: n,
+  isMobile: t,
+  isSpeaking: r,
+  onExpand: i,
+  label: l = "Open widget"
+}) => {
+  const a = Ge(n), m = a === "right" ? "left" : "right", u = [
+    "ll-hidden",
+    `ll-hidden--${a}`,
+    t ? "ll-hidden--mobile" : "ll-hidden--desktop",
+    r ? "ll-hidden--speaking" : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: u,
+      onClick: i,
+      "aria-label": l,
+      "data-position": n,
+      children: /* @__PURE__ */ e(Oe, { direction: m, className: "ll-hidden__chevron" })
+    }
+  );
+}, Qe = ({
+  audioLevel: n,
+  bars: t = 20,
+  maxHeight: r = 20,
+  minHeight: i = 4,
+  className: l,
+  barClassName: a
+}) => {
+  const m = N(null), u = N([]), p = ae(() => {
+    const d = (Math.sqrt(5) - 1) / 2;
+    return Array.from({ length: t }, (c, o) => 0.5 + o * d % 1 * 0.5);
+  }, [t]);
+  C(() => n.subscribe((c) => {
+    for (let o = 0; o < t; o++) {
+      const _ = u.current[o];
+      if (!_) continue;
+      const b = Math.max(i, c * r * p[o]);
+      _.style.height = `${b}px`;
+    }
+  }), [n, t, r, i, p]);
+  const g = ["ll-waveform", l].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("div", { ref: m, className: g, "aria-hidden": "true", children: Array.from({ length: t }, (d, c) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: (o) => {
+        u.current[c] = o;
+      },
+      className: ["ll-waveform__bar", a].filter(Boolean).join(" "),
+      style: { height: `${i}px` }
+    },
+    c
+  )) });
+}, Xe = ({
+  position: n,
+  isMobile: t,
+  agentName: r,
+  avatarImageUrl: i,
+  agentState: l,
+  isMuted: a,
+  audioLevel: m,
+  onExpand: u,
+  onToggleMute: p,
+  onClose: g
+}) => t ? /* @__PURE__ */ e(
+  "div",
+  {
+    className: "ll-minimized ll-minimized--mobile",
+    role: "region",
+    "aria-label": `${r} widget`,
+    children: /* @__PURE__ */ f(
+      "button",
+      {
+        type: "button",
+        className: "ll-minimized__surface",
+        onClick: u,
+        "aria-label": `Expand ${r} widget`,
+        children: [
+          i ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ e(
+              "img",
+              {
+                src: i,
+                alt: r,
+                className: "ll-minimized__avatar"
+              }
+            )
+          ) : /* @__PURE__ */ e("div", { className: "ll-minimized__avatar ll-minimized__avatar--placeholder" }),
+          /* @__PURE__ */ e(
+            Qe,
+            {
+              audioLevel: m,
+              bars: 16,
+              maxHeight: 18,
+              className: "ll-minimized__waveform"
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "ll-minimized__name", children: r }),
+          /* @__PURE__ */ f("div", { className: "ll-minimized__controls", children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: "ll-minimized__btn",
+                role: "button",
+                tabIndex: 0,
+                onClick: (d) => {
+                  d.stopPropagation(), p();
+                },
+                onKeyDown: (d) => {
+                  (d.key === "Enter" || d.key === " ") && (d.stopPropagation(), d.preventDefault(), p());
+                },
+                "aria-label": a ? "Unmute microphone" : "Mute microphone",
+                children: /* @__PURE__ */ e(oe, { muted: a, className: "ll-minimized__icon" })
+              }
+            ),
+            /* @__PURE__ */ e(_e, { className: "ll-minimized__icon ll-minimized__icon--expand" })
+          ] })
+        ]
+      }
+    )
+  }
+) : /* @__PURE__ */ e(
+  "div",
+  {
+    className: "ll-minimized ll-minimized--desktop",
+    "data-position": n,
+    role: "region",
+    "aria-label": `${r} widget`,
+    children: /* @__PURE__ */ f("div", { className: "ll-minimized__surface", children: [
+      i ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ e(
+          "img",
+          {
+            src: i,
+            alt: r,
+            className: "ll-minimized__avatar"
+          }
+        )
+      ) : /* @__PURE__ */ e("div", { className: "ll-minimized__avatar ll-minimized__avatar--placeholder" }),
+      /* @__PURE__ */ f("div", { className: "ll-minimized__meta", children: [
+        /* @__PURE__ */ e("span", { className: "ll-minimized__name", children: r }),
+        /* @__PURE__ */ e("span", { className: "ll-minimized__state", children: l === "speaking" ? "Speaking" : l === "thinking" ? "Thinking" : "Listening" })
+      ] }),
+      /* @__PURE__ */ f("div", { className: "ll-minimized__controls", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "ll-minimized__btn",
+            onClick: p,
+            "aria-label": a ? "Unmute microphone" : "Mute microphone",
+            children: /* @__PURE__ */ e(oe, { muted: a, className: "ll-minimized__icon" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "ll-minimized__btn",
+            onClick: u,
+            "aria-label": `Expand ${r} widget`,
+            children: /* @__PURE__ */ e(_e, { className: "ll-minimized__icon" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "ll-minimized__btn ll-minimized__btn--close",
+            onClick: g,
+            "aria-label": "Close widget",
+            children: /* @__PURE__ */ e(ve, { className: "ll-minimized__icon" })
+          }
+        )
+      ] })
+    ] })
+  }
+), Ze = ({
+  src: n,
+  alt: t,
+  preCannedPlaying: r = !1,
+  className: i,
+  style: l
+}) => {
+  const [a, m] = E(!1), u = N(n);
+  if (C(() => {
+    u.current !== n && (u.current = n, m(!1));
+  }, [n]), !n) return null;
+  const p = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    objectPosition: "top",
+    transition: "opacity 500ms ease, transform 500ms ease",
+    transform: r ? "scale(1.02)" : "scale(1)",
+    opacity: a ? 1 : 0,
+    ...l
+  };
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ e(
+      "img",
+      {
+        src: n,
+        alt: t,
+        className: i,
+        style: p,
+        loading: "eager",
+        fetchpriority: "high",
+        onLoad: () => m(!0)
+      }
+    )
+  );
+}, en = {
+  idle: "Idle",
+  listening: "Listening",
+  thinking: "Thinking",
+  speaking: "Speaking"
+}, nn = ({ state: n, className: t }) => {
+  const r = ["ll-pill", `ll-pill--${n}`, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ f("div", { className: r, "data-agent-state": n, children: [
+    /* @__PURE__ */ e("span", { className: "ll-pill__dot" }),
+    /* @__PURE__ */ e("span", { className: "ll-pill__label", children: en[n] })
+  ] });
+}, tn = ({
+  position: n,
+  isMobile: t,
+  agentName: r,
+  avatarImageUrl: i,
+  idleLoopUrl: l,
+  greeting: a,
+  branding: m,
+  teamMembers: u,
+  currentTeamMemberId: p,
+  isSwitchingTeamMember: g,
+  teamSwitcherOpen: d,
+  onToggleTeamSwitcher: c,
+  onSelectTeamMember: o,
+  connectionState: _,
+  agentState: b,
+  transcript: M,
+  isMuted: S,
+  needsUserGesture: I,
+  canResume: A,
+  micError: P,
+  error: $,
+  avatarVideoContainerRef: z,
+  onConnect: w,
+  onDisconnect: L,
+  onRetry: v,
+  onResumeAudio: B,
+  onToggleMute: V,
+  onMinimize: W,
+  onClose: K,
+  onClearMicError: x
+}) => {
+  const G = M.length > 0 ? M[M.length - 1] : null, J = ((u == null ? void 0 : u.length) ?? 0) > 1, X = m.productName || "Live Layer", q = [
+    "ll-expanded",
+    t ? "ll-expanded--mobile" : "ll-expanded--desktop"
+  ].join(" ");
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: q,
+      "data-position": n,
+      role: "dialog",
+      "aria-label": `${r} widget`,
+      children: [
+        /* @__PURE__ */ f("div", { className: "ll-expanded__header", children: [
+          /* @__PURE__ */ f("div", { className: "ll-expanded__header-left", children: [
+            m.logoUrl && // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ e(
+              "img",
+              {
+                src: m.logoUrl,
+                alt: X,
+                className: "ll-expanded__logo"
+              }
+            ),
+            J ? /* @__PURE__ */ f(
+              "button",
+              {
+                type: "button",
+                className: "ll-expanded__team-trigger",
+                onClick: c,
+                "aria-expanded": d,
+                "aria-label": "Change team member",
+                children: [
+                  /* @__PURE__ */ e("span", { children: r }),
+                  /* @__PURE__ */ e(
+                    ge,
+                    {
+                      className: `ll-expanded__team-chevron ${d ? "ll-expanded__team-chevron--open" : ""}`
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ e("span", { className: "ll-expanded__name", children: r })
+          ] }),
+          /* @__PURE__ */ f("div", { className: "ll-expanded__header-right", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "ll-expanded__icon-btn",
+                onClick: V,
+                "aria-label": S ? "Unmute microphone" : "Mute microphone",
+                title: S ? "Unmute" : "Mute",
+                children: /* @__PURE__ */ e(He, { muted: S, className: "ll-expanded__icon" })
+              }
+            ),
+            t ? null : /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "ll-expanded__icon-btn",
+                onClick: W,
+                "aria-label": "Minimize widget",
+                title: "Minimize",
+                children: /* @__PURE__ */ e(ge, { className: "ll-expanded__icon" })
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "ll-expanded__icon-btn",
+                onClick: K,
+                "aria-label": "Close widget",
+                title: "Close",
+                children: /* @__PURE__ */ e(ve, { className: "ll-expanded__icon" })
+              }
+            )
+          ] })
+        ] }),
+        J && d && /* @__PURE__ */ e("div", { className: "ll-expanded__team-menu", role: "menu", children: u.map((T) => /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            className: `ll-expanded__team-item ${T.id === p ? "ll-expanded__team-item--active" : ""}`,
+            onClick: () => o(T.id),
+            children: [
+              T.avatarImageUrl && // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ e(
+                "img",
+                {
+                  src: T.avatarImageUrl,
+                  alt: "",
+                  className: "ll-expanded__team-item-avatar"
+                }
+              ),
+              /* @__PURE__ */ f("div", { className: "ll-expanded__team-item-meta", children: [
+                /* @__PURE__ */ e("span", { className: "ll-expanded__team-item-name", children: T.name }),
+                T.role && /* @__PURE__ */ e("span", { className: "ll-expanded__team-item-role", children: T.role })
+              ] })
+            ]
+          },
+          T.id
+        )) }),
+        /* @__PURE__ */ f("div", { className: "ll-expanded__avatar-surface", children: [
+          i && /* @__PURE__ */ e(
+            Ze,
+            {
+              src: i,
+              alt: r,
+              className: "ll-expanded__avatar-image"
+            }
+          ),
+          l && /* @__PURE__ */ e(
+            "video",
+            {
+              className: "ll-expanded__avatar-idle-loop",
+              src: l,
+              loop: !0,
+              muted: !0,
+              playsInline: !0,
+              autoPlay: !0
+            }
+          ),
+          /* @__PURE__ */ e("div", { ref: z, className: "ll-expanded__avatar-live" }),
+          _ === "connecting" && /* @__PURE__ */ f("div", { className: "ll-expanded__overlay ll-expanded__overlay--connecting", children: [
+            /* @__PURE__ */ e("div", { className: "ll-expanded__spinner" }),
+            /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-text", children: "Connecting..." })
+          ] }),
+          I && /* @__PURE__ */ f(
+            "button",
+            {
+              type: "button",
+              className: "ll-expanded__overlay ll-expanded__overlay--gesture",
+              onClick: B,
+              children: [
+                /* @__PURE__ */ e("div", { className: "ll-expanded__play-circle", children: /* @__PURE__ */ e("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M8 5v14l11-7L8 5z" }) }) }),
+                /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-text", children: "Tap to enable audio" }),
+                /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-subtext", children: "Your agent is ready" })
+              ]
+            }
+          ),
+          !I && (_ === "idle" || _ === "disconnected" || _ === "error") && /* @__PURE__ */ f(
+            "button",
+            {
+              type: "button",
+              className: "ll-expanded__overlay ll-expanded__overlay--play",
+              onClick: w,
+              "aria-label": A ? "Restart paused session" : _ === "disconnected" ? "Reconnect to agent" : "Start video call",
+              children: [
+                /* @__PURE__ */ e("div", { className: "ll-expanded__play-circle", children: /* @__PURE__ */ e("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("polygon", { points: "6 3 20 12 6 21 6 3" }) }) }),
+                /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-text", children: A ? "Restart session" : _ === "disconnected" ? "Click to reconnect" : a || "Start video call" }),
+                A && /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-subtext", children: "Pick up where you left off" })
+              ]
+            }
+          ),
+          g && /* @__PURE__ */ f("div", { className: "ll-expanded__overlay ll-expanded__overlay--switching", children: [
+            /* @__PURE__ */ e("div", { className: "ll-expanded__spinner" }),
+            /* @__PURE__ */ f("p", { className: "ll-expanded__overlay-text", children: [
+              "Connecting to ",
+              r,
+              "..."
+            ] })
+          ] }),
+          _ === "connected" && /* @__PURE__ */ e("div", { className: "ll-expanded__state-pill-wrap", children: /* @__PURE__ */ e(nn, { state: b }) }),
+          P && _ === "connected" && /* @__PURE__ */ f("div", { className: "ll-expanded__mic-error", role: "alert", children: [
+            /* @__PURE__ */ e("p", { children: P }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  x(), v();
+                },
+                children: "Retry"
+              }
+            )
+          ] }),
+          _ === "connected" && G && /* @__PURE__ */ e("div", { className: "ll-expanded__transcript", "aria-live": "polite", children: /* @__PURE__ */ e("p", { children: G.text }) })
+        ] }),
+        /* @__PURE__ */ f("div", { className: "ll-expanded__footer", children: [
+          _ === "idle" && /* @__PURE__ */ f(
+            "button",
+            {
+              type: "button",
+              className: "ll-expanded__cta ll-expanded__cta--primary",
+              onClick: w,
+              children: [
+                /* @__PURE__ */ e(Ye, { className: "ll-expanded__cta-icon" }),
+                /* @__PURE__ */ e("span", { children: "Start Video Call" })
+              ]
+            }
+          ),
+          _ === "connecting" && /* @__PURE__ */ f(
+            "button",
+            {
+              type: "button",
+              className: "ll-expanded__cta ll-expanded__cta--loading",
+              disabled: !0,
+              children: [
+                /* @__PURE__ */ e("div", { className: "ll-expanded__spinner ll-expanded__spinner--small" }),
+                /* @__PURE__ */ e("span", { children: "Connecting..." })
+              ]
+            }
+          ),
+          _ === "connected" && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: "ll-expanded__cta ll-expanded__cta--danger",
+              onClick: L,
+              children: "End conversation"
+            }
+          ),
+          (_ === "error" || _ === "disconnected") && /* @__PURE__ */ f("div", { className: "ll-expanded__retry", children: [
+            $ && /* @__PURE__ */ e("p", { className: "ll-expanded__error-text", children: $ }),
+            /* @__PURE__ */ f(
+              "button",
+              {
+                type: "button",
+                className: "ll-expanded__cta ll-expanded__cta--primary",
+                onClick: v,
+                children: [
+                  /* @__PURE__ */ e(oe, { muted: !1, className: "ll-expanded__cta-icon" }),
+                  /* @__PURE__ */ e("span", { children: "Try again" })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}, rn = /* @__PURE__ */ new Set([
+  "agent_state",
+  "avatar_stream_ready",
+  "avatar_active",
+  "avatar_idle",
+  "bot_ready",
+  "agent_error",
+  "idle_warning",
+  "idle_timeout"
+]);
+function ln(n) {
+  var pe, he, fe;
+  const {
+    agentId: t,
+    apiKey: r,
+    baseUrl: i = "https://app.livelayer.studio",
+    sessionEndpoint: l,
+    sessionBody: a,
+    autoConnect: m = !1,
+    displayMode: u,
+    defaultDisplayMode: p = "expanded",
+    onDisplayModeChange: g,
+    position: d = "bottom-right",
+    mobileBreakpoint: c = 640,
+    persistKey: o = "ll-widget",
+    disablePersistence: _ = !1,
+    teamMembers: b,
+    currentTeamMemberId: M,
+    onTeamMemberChange: S,
+    idleLoopUrl: I,
+    greeting: A,
+    avatarImageUrl: P,
+    agentName: $,
+    branding: z = {},
+    onConnect: w,
+    onDisconnect: L,
+    onTranscript: v,
+    onAgentState: B,
+    onConnectionStateChange: V,
+    onAgentEvent: W,
+    onAgentCommand: K,
+    controlledSession: x,
+    className: G,
+    style: J,
+    zIndex: X = 2147483647
+  } = n, q = M !== void 0, [T, ye] = E(() => {
+    var h;
+    return M ?? ((h = b == null ? void 0 : b[0]) == null ? void 0 : h.id);
+  }), F = q ? M : T, D = ae(
+    () => (b == null ? void 0 : b.find((h) => h.id === F)) ?? null,
+    [b, F]
+  ), be = (D == null ? void 0 : D.agentId) ?? t, [O, U] = We({
+    value: u,
+    defaultValue: p,
+    onChange: g,
+    persistKey: o,
+    disablePersistence: _
+  }), Q = qe(c), Z = Be(), j = De(), [xe, ee] = E(!1), [ne, ce] = E(!1), [te, re] = E(!1), le = y(
+    (h) => {
+      const k = h;
+      !k.type || typeof k.type != "string" || (W == null || W({ eventName: k.type, data: h }), rn.has(k.type) || K == null || K(k));
+    },
+    [K, W]
+  ), R = Te({
+    agentId: x ? "__controlled__" : be,
+    baseUrl: i,
+    apiKey: r,
+    sessionEndpoint: l,
+    sessionBody: a,
+    onDataMessage: x ? void 0 : le
+  });
+  C(() => {
+    if (x != null && x.subscribeToDataMessages)
+      return x.subscribeToDataMessages(le);
+  }, [x, le]);
+  const s = ae(() => x ? {
+    connectionState: x.connectionState,
+    agentState: x.agentState,
+    transcript: x.transcript,
+    videoElement: x.videoElement,
+    audioElement: x.audioElement,
+    canResume: x.canResume,
+    error: x.error,
+    agentConfig: null,
+    connect: async () => {
+      await x.onConnect();
+    },
+    disconnect: () => x.onDisconnect(),
+    // Dummy getRoom for shape compatibility — controlled consumers own the Room.
+    // Internal session's getRoom returns null when no real connect has happened,
+    // so we reuse its reference for type consistency.
+    getRoom: R.getRoom,
+    isControlled: !0
+  } : {
+    connectionState: R.connectionState,
+    agentState: R.agentState,
+    transcript: R.transcript,
+    videoElement: R.videoElement,
+    audioElement: R.audioElement,
+    canResume: R.canResume,
+    error: R.error,
+    agentConfig: R.agentConfig,
+    connect: R.connect,
+    disconnect: R.disconnect,
+    getRoom: R.getRoom,
+    isControlled: !1
+  }, [x, R]), se = N(null);
+  C(() => {
+    const h = s.videoElement, k = se.current;
+    if (!(!h || !k))
+      return k.appendChild(h), () => {
+        h.parentNode === k && k.removeChild(h);
+      };
+  }, [s.videoElement]), C(() => {
+    const h = s.audioElement;
+    if (!h) return;
+    Z.attach(h);
+    const k = h.play();
+    return k && typeof k.catch == "function" && k.catch((Y) => {
+      (Y == null ? void 0 : Y.name) === "NotAllowedError" && ee(!0);
+    }), () => {
+      Z.detach();
+    };
+  }, [s.audioElement]), C(() => {
+    if (s.isControlled || s.connectionState !== "connected") return;
+    const h = s.getRoom();
+    if (h)
+      return j.setupMic(h).catch(() => {
+      }), () => {
+        j.teardownMic();
+      };
+  }, [s.isControlled, s.connectionState]), C(() => {
+    V == null || V(s.connectionState), s.connectionState === "connected" ? w == null || w() : s.connectionState === "disconnected" && (L == null || L());
+  }, [s.connectionState, w, L, V]), C(() => {
+    v == null || v(s.transcript);
+  }, [s.transcript, v]), C(() => {
+    B == null || B(s.agentState);
+  }, [s.agentState, B]);
+  const de = N(!1);
+  C(() => {
+    s.isControlled || !m || de.current || s.connectionState === "idle" && (de.current = !0, s.connect());
+  }, [m, s.connectionState, s]);
+  const ke = y(
+    (h) => {
+      const k = b == null ? void 0 : b.find((Y) => Y.id === h);
+      k && (re(!1), h !== F && (ce(!0), s.disconnect(), q || ye(h), S == null || S(k)));
+    },
+    [
+      b,
+      F,
+      s,
+      q,
+      S
+    ]
+  );
+  C(() => {
+    ne && s.connectionState === "connected" && ce(!1);
+  }, [s.connectionState, ne]), C(() => {
+    if (!te) return;
+    const h = (k) => {
+      k.key === "Escape" && re(!1);
+    };
+    return window.addEventListener("keydown", h), () => window.removeEventListener("keydown", h);
+  }, [te]);
+  const ie = (D == null ? void 0 : D.name) ?? $ ?? ((pe = s.agentConfig) == null ? void 0 : pe.name) ?? "Live Layer", ue = (D == null ? void 0 : D.avatarImageUrl) ?? P ?? ((he = s.agentConfig) == null ? void 0 : he.avatarImageUrl) ?? null, Ne = I ?? ((fe = s.agentConfig) == null ? void 0 : fe.idleLoopUrl) ?? null, we = A ?? null, Ce = y(() => U("expanded"), [U]), Ee = y(
+    () => U("minimized"),
+    [U]
+  ), me = y(() => U("hidden"), [U]), Le = y(() => {
+    const h = s.audioElement;
+    h && h.play().then(() => ee(!1)).catch(() => {
+    });
+  }, [s.audioElement]), Me = y(() => {
+    ee(!1), s.connect();
+  }, [s]), H = {
+    ...J,
+    zIndex: X
+  };
+  z.primaryColor && (H["--ll-color-primary"] = z.primaryColor), z.accentColor && (H["--ll-color-accent"] = z.accentColor), z.backgroundColor && (H["--ll-color-bg"] = z.backgroundColor), z.textColor && (H["--ll-color-fg"] = z.textColor);
+  const Se = [
+    "ll-widget",
+    `ll-widget--${O}`,
+    `ll-widget--${Q ? "mobile" : "desktop"}`,
+    G
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: Se,
+      style: H,
+      "data-display-mode": O,
+      "data-position": d,
+      children: [
+        O === "hidden" && /* @__PURE__ */ e(
+          Je,
+          {
+            position: d,
+            isMobile: Q,
+            isSpeaking: s.agentState === "speaking",
+            onExpand: () => U("minimized"),
+            label: `Open ${ie} widget`
+          }
+        ),
+        O === "minimized" && /* @__PURE__ */ e(
+          Xe,
+          {
+            position: d,
+            isMobile: Q,
+            agentName: ie,
+            avatarImageUrl: ue,
+            agentState: s.agentState,
+            isMuted: j.isMuted,
+            audioLevel: Z,
+            onExpand: Ce,
+            onToggleMute: j.toggleMute,
+            onClose: me
+          }
+        ),
+        O === "expanded" && /* @__PURE__ */ e(
+          tn,
+          {
+            position: d,
+            isMobile: Q,
+            agentName: ie,
+            avatarImageUrl: ue,
+            idleLoopUrl: Ne,
+            greeting: we,
+            branding: z,
+            teamMembers: b,
+            currentTeamMemberId: F,
+            isSwitchingTeamMember: ne,
+            teamSwitcherOpen: te,
+            onToggleTeamSwitcher: () => re((h) => !h),
+            onSelectTeamMember: ke,
+            connectionState: s.connectionState,
+            agentState: s.agentState,
+            transcript: s.transcript,
+            isMuted: j.isMuted,
+            needsUserGesture: xe,
+            canResume: s.canResume,
+            micError: j.micError,
+            error: s.error,
+            avatarVideoContainerRef: se,
+            onConnect: () => void s.connect(),
+            onDisconnect: () => s.disconnect(),
+            onRetry: Me,
+            onResumeAudio: Le,
+            onToggleMute: j.toggleMute,
+            onMinimize: Ee,
+            onClose: me,
+            onClearMicError: j.clearError
+          }
+        )
+      ]
+    }
+  );
+}
+function un(n) {
+  return /* @__PURE__ */ e(Ae, { children: /* @__PURE__ */ e(ln, { ...n }) });
+}
+const mn = ({
+  agentId: n,
+  baseUrl: t,
+  apiKey: r,
+  mode: i,
   onAgentEvent: l,
-  className: m,
-  style: b
+  className: a,
+  style: m
 }) => {
-  const d = u(null), r = u(null), i = u(l);
-  i.current = l;
-  const f = p((n) => {
-    var a;
-    const e = n.detail;
-    (a = i.current) == null || a.call(i, e);
+  const u = N(null), p = N(null), g = N(l);
+  g.current = l;
+  const d = y((c) => {
+    var _;
+    const o = c.detail;
+    (_ = g.current) == null || _.call(g, o);
   }, []);
-  return v(() => {
-    const n = d.current;
-    if (!n) return;
-    const e = document.createElement("livelayer-widget");
-    return e.setAttribute("agent-id", c), s && e.setAttribute("base-url", s), o && e.setAttribute("api-key", o), t && e.setAttribute("mode", t), e.addEventListener("agent-event", f), n.appendChild(e), r.current = e, () => {
-      e.removeEventListener("agent-event", f), n.removeChild(e), r.current = null;
+  return C(() => {
+    const c = u.current;
+    if (!c) return;
+    const o = document.createElement("livelayer-widget");
+    return o.setAttribute("agent-id", n), t && o.setAttribute("base-url", t), r && o.setAttribute("api-key", r), i && o.setAttribute("mode", i), o.addEventListener("agent-event", d), c.appendChild(o), p.current = o, () => {
+      o.removeEventListener("agent-event", d), c.removeChild(o), p.current = null;
     };
-  }, [c]), v(() => {
-    r.current && (t ? r.current.setAttribute("mode", t) : r.current.removeAttribute("mode"));
-  }, [t]), /* @__PURE__ */ g("div", { ref: d, className: m, style: b });
+  }, [n]), C(() => {
+    p.current && (i ? p.current.setAttribute("mode", i) : p.current.removeAttribute("mode"));
+  }, [i]), /* @__PURE__ */ e("div", { ref: u, className: a, style: m });
 };
+function pn() {
+  const [n, t] = E([]), r = y((l) => {
+    t((a) => {
+      const m = a.findIndex((u) => u.id === l.id);
+      if (m >= 0) {
+        const u = a.slice();
+        return u[m] = l, u;
+      }
+      return [...a, l];
+    });
+  }, []), i = y(() => t([]), []);
+  return {
+    entries: n,
+    pushSegment: r,
+    clear: i,
+    latest: n.length > 0 ? n[n.length - 1] : null
+  };
+}
 export {
-  h as LiveLayerWidget
+  un as AvatarWidget,
+  Ae as ErrorBoundary,
+  mn as LiveLayerWidget,
+  Be as useAudioLevel,
+  Pe as useDisplayMode,
+  We as useDisplayModePersistence,
+  qe as useIsMobile,
+  Te as useLiveKitSession,
+  De as useMicrophoneState,
+  pn as useTranscript
 };