cobrowse-agent-ui 1.4.2 → 1.6.0

package/dist/cobrowse-agent-ui.js

@@ -1,194 +1,457 @@
-var G = Object.defineProperty;
-var S = Object.getOwnPropertySymbols;
-var Z = Object.prototype.hasOwnProperty, q = Object.prototype.propertyIsEnumerable;
-var N = (t, o, n) => o in t ? G(t, o, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[o] = n, P = (t, o) => {
-  for (var n in o || (o = {}))
-    Z.call(o, n) && N(t, n, o[n]);
-  if (S)
-    for (var n of S(o))
-      q.call(o, n) && N(t, n, o[n]);
+var ve = Object.defineProperty, Ee = Object.defineProperties;
+var Re = Object.getOwnPropertyDescriptors;
+var M = Object.getOwnPropertySymbols;
+var X = Object.prototype.hasOwnProperty, K = Object.prototype.propertyIsEnumerable;
+var G = (e, n, t) => n in e ? ve(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t, $ = (e, n) => {
+  for (var t in n || (n = {}))
+    X.call(n, t) && G(e, t, n[t]);
+  if (M)
+    for (var t of M(n))
+      K.call(n, t) && G(e, t, n[t]);
+  return e;
+}, H = (e, n) => Ee(e, Re(n));
+var U = (e, n) => {
+  var t = {};
+  for (var o in e)
+    X.call(e, o) && n.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && M)
+    for (var o of M(e))
+      n.indexOf(o) < 0 && K.call(e, o) && (t[o] = e[o]);
   return t;
 };
-var A = (t, o, n) => new Promise((d, f) => {
-  var g = (a) => {
+var k = (e, n, t) => new Promise((o, s) => {
+  var r = (a) => {
     try {
-      p(n.next(a));
-    } catch (h) {
-      f(h);
+      f(t.next(a));
+    } catch (i) {
+      s(i);
     }
-  }, k = (a) => {
+  }, c = (a) => {
     try {
-      p(n.throw(a));
-    } catch (h) {
-      f(h);
+      f(t.throw(a));
+    } catch (i) {
+      s(i);
     }
-  }, p = (a) => a.done ? d(a.value) : Promise.resolve(a.value).then(g, k);
-  p((n = n.apply(t, o)).next());
+  }, f = (a) => a.done ? o(a.value) : Promise.resolve(a.value).then(r, c);
+  f((t = t.apply(e, n)).next());
 });
-import { jsxs as R, jsx as _ } from "react/jsx-runtime";
-import * as T from "react";
-import { useState as M, useRef as z, useImperativeHandle as J, useCallback as m, useEffect as Q } from "react";
-import { useTranslation as X } from "react-i18next";
-import $ from "clsx";
-import { P as tt, D as et, S as nt, a as ot, R as rt, L as st, i as ct } from "./index-CvPSmCSB.js";
-const it = "CodeEntry-module__root__CEZCb", at = "CodeEntry-module__legend__GN0ge", lt = "CodeEntry-module__digits__aob60", ut = "CodeEntry-module__input__Mp3LR", dt = "CodeEntry-module__invalid__0fo6R", I = {
-  root: it,
-  legend: at,
-  digits: lt,
-  input: ut,
-  invalid: dt
-}, l = 6, x = Array(l).fill(""), ft = "Backspace", b = "ArrowLeft", mt = "ArrowRight", B = (t, o) => t.findIndex((n) => n === o), U = (t, o) => {
-  var n;
-  (n = t[Math.max(B(t, o) - 1, 0)]) == null || n.focus();
-}, w = (t, o) => {
-  var n;
-  (n = t[Math.min(B(t, o) + 1, l - 1)]) == null || n.focus();
-}, gt = (t, o, n) => {
-  const d = getComputedStyle(o).direction === "rtl";
-  (n === b ? !d : d) ? U(t, o) : w(t, o);
-}, pt = ({ ref: t, className: o, inputClassName: n, focusOnRender: d = !1, onCode: f, label: g, children: k }) => {
-  const { t: p } = X(), [a, h] = M(!1), [E, D] = M(x), c = z([]);
-  J(t, () => ({
-    clear() {
-      D(x);
-    },
-    focus(r) {
-      var e;
-      (e = c.current[r]) == null || e.focus();
-    }
-  }), []);
-  const L = m(() => E.join("").substring(0, l), [E]), j = m(() => {
-    var s;
-    const r = E.findIndex((i) => i === ""), e = r === -1 ? l - 1 : r;
-    (s = c.current[e]) == null || s.focus();
-  }, [E]), K = m((r) => A(null, null, function* () {
-    h(!0);
-    try {
-      (yield f == null ? void 0 : f(r)) ? (D(x), c.current[0] && setTimeout(() => {
-        var s;
-        return (s = c.current[0]) == null ? void 0 : s.focus();
-      }, 0)) : setTimeout(() => {
-        var s;
-        return (s = c.current[l - 1]) == null ? void 0 : s.focus();
-      }, 0);
-    } catch (e) {
-      throw c.current[l - 1] && setTimeout(() => {
-        var s;
-        return (s = c.current[l - 1]) == null ? void 0 : s.focus();
-      }, 0), e;
-    } finally {
-      h(!1);
+import { i as W, u as T, B as re, L as ce, C as be, D as pe, P as Se, R as we, S as $e, a as xe } from "./index-fBWDR3rY.js";
+import { jsxs as D, jsx as C } from "react/jsx-runtime";
+import * as v from "react";
+import { createContext as ae, use as ie, useState as I, useEffect as x, useRef as S, useCallback as R, useMemo as ye } from "react";
+import j from "clsx";
+import { RemoteContext as Le } from "cobrowse-agent-sdk";
+import "react-i18next";
+const Q = ({ resolvedLanguage: e, language: n }) => e != null ? e : n, ke = (e) => {
+  const n = (o) => {
+    !o || Q(W) === o || W.changeLanguage(o);
+  }, t = (o) => {
+    n(o);
+  };
+  return n(Q(e)), e.on("languageChanged", t), () => {
+    e.off("languageChanged", t);
+  };
+}, Pe = (e) => /* @__PURE__ */ v.createElement("svg", $({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", width: 14, height: 14, "aria-hidden": "true" }, e), /* @__PURE__ */ v.createElement("path", { d: "M15 3h6v6" }), /* @__PURE__ */ v.createElement("path", { d: "M10 14 21 3" }), /* @__PURE__ */ v.createElement("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })), Be = "ExternalLink-module__root__7-WiY focus-module__focusRing__rvgPB", Oe = {
+  root: Be
+}, Ne = ({ href: e, children: n }) => /* @__PURE__ */ D("a", { className: Oe.root, href: e, target: "_blank", rel: "noopener noreferrer", children: [
+  n,
+  /* @__PURE__ */ C(Pe, {})
+] }), Me = "UserIcon-module__root__-NL30", Ue = {
+  root: Me
+}, Te = ({ user: e, className: n }) => {
+  const t = () => !(e != null && e.name) || e.picture ? "" : e.name.trim().split(/\s+/).map((o) => o.toUpperCase().charAt(0)).join("").slice(0, 2);
+  return e ? /* @__PURE__ */ C(
+    "div",
+    {
+      className: j(Ue.root, n),
+      title: e.name,
+      style: {
+        backgroundImage: e.picture ? `url(${e.picture || ""})` : void 0,
+        backgroundColor: e.colour
+      },
+      children: /* @__PURE__ */ C("span", { children: t() })
     }
-  }), [f]);
-  Q(() => {
-    const r = L();
-    r.length === l && K(r);
-  }, [L, K]);
-  const v = m((r, e) => {
-    r > l - 1 || D((s) => {
-      const i = [...s];
-      return i[r] = e, i;
-    });
-  }, []), F = m((r) => {
-    var y, C;
-    if (a)
+  ) : null;
+}, De = (e) => /* @__PURE__ */ v.createElement("svg", $({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, e), /* @__PURE__ */ v.createElement("g", { clipPath: "url(#clip0_60797_8824)" }, /* @__PURE__ */ v.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.9964 12.5895C21.1528 12.4331 21.2406 12.2211 21.2406 12C21.2406 11.7872 21.1593 11.5829 21.0138 11.4285C18.518 9.23023 15.3059 8.01707 11.9793 8.01707C8.65261 8.01707 5.44055 9.23023 2.94474 11.4285C2.7993 11.5829 2.71797 11.7872 2.71797 12C2.71797 12.2211 2.8058 12.4331 2.96214 12.5895L5.07653 14.7039L8.20945 13.3612L7.76772 11.5943C7.6415 11.0894 7.92363 10.5721 8.41645 10.4048C10.7269 9.62055 13.2316 9.62055 15.5421 10.4048C16.0349 10.5721 16.3171 11.0894 16.1908 11.5943L15.7491 13.3612L18.882 14.7039L20.9964 12.5895ZM23.2406 12C23.2406 12.7515 22.942 13.4723 22.4106 14.0037L19.8175 16.5968C19.5284 16.8859 19.0923 16.9699 18.7165 16.8088L14.1785 14.864C13.7274 14.6707 13.4832 14.1785 13.6023 13.7023L14.0159 12.0478C12.6758 11.7395 11.2828 11.7395 9.94266 12.0478L10.3563 13.7023C10.4753 14.1785 10.2312 14.6707 9.78006 14.864L5.24208 16.8088C4.86624 16.9699 4.43019 16.8859 4.14106 16.5968L1.54792 14.0037C1.01651 13.4723 0.717975 12.7515 0.717976 12C0.717975 11.2485 1.01651 10.5277 1.54792 9.99633C1.56223 9.98202 1.57697 9.96815 1.59212 9.95474C4.45744 7.41772 8.1522 6.01707 11.9793 6.01707C15.8064 6.01707 19.5011 7.41772 22.3664 9.95474C22.3816 9.96815 22.3963 9.98202 22.4106 9.99633C22.942 10.5277 23.2406 11.2485 23.2406 12Z", fill: "currentColor" })), /* @__PURE__ */ v.createElement("defs", null, /* @__PURE__ */ v.createElement("clipPath", { id: "clip0_60797_8824" }, /* @__PURE__ */ v.createElement("rect", { width: 24, height: 24, fill: "white" })))), Ie = "CancelButton-module__root__CbF-w", je = {
+  root: Ie
+}, le = (s) => {
+  var r = s, { type: e = "button", className: n, children: t } = r, o = U(r, ["type", "className", "children"]);
+  const { t: c } = T();
+  return /* @__PURE__ */ C(
+    re,
+    H($({
+      type: e,
+      "aria-label": c("Cancel"),
+      className: j(je.root, n)
+    }, o), {
+      children: t != null ? t : /* @__PURE__ */ C(De, {})
+    })
+  );
+}, Ae = "BlockingError-module__root__myw6b", Fe = "BlockingError-module__heading__FzjhY", He = "BlockingError-module__message__7jJ2T", q = {
+  root: Ae,
+  heading: Fe,
+  message: He
+}, qe = ({ heading: e, message: n, children: t }) => {
+  const { t: o } = T();
+  return /* @__PURE__ */ D("div", { className: q.root, children: [
+    /* @__PURE__ */ C("p", { className: q.heading, children: e != null ? e : o("Sorry, something went wrong.") }),
+    n && /* @__PURE__ */ C("p", { className: q.message, children: n }),
+    t
+  ] });
+}, de = ae(null), We = ({ cobrowse: e, children: n }) => /* @__PURE__ */ C(de.Provider, { value: e, children: n }), ue = () => ie(de), Y = () => {
+  const e = ue();
+  if (!e)
+    throw new Error("CobrowseProvider is required to use this component.");
+  return e;
+}, fe = ae(null);
+function A(e) {
+  const n = ie(fe), t = ue(), [o, s] = I(null);
+  return x(() => {
+    if (e === void 0 || !e || !t)
       return;
-    const { clipboardData: e } = r, s = e.getData("Text").trim();
-    if (!/^[0-9]+$/.test(s)) {
-      r.preventDefault();
+    let r = !1, c = null;
+    return k(null, null, function* () {
+      if (c = yield t.attachContext(e), r) {
+        c.destroy(), c = null;
+        return;
+      }
+      s(c);
+    }), () => {
+      r = !0, s(null), c && (c.destroy(), c = null);
+    };
+  }, [t, e]), e === void 0 ? n : !e || !t ? null : o;
+}
+const E = (e) => {
+  const n = S(e);
+  return x(() => {
+    n.current = e;
+  }, [e]), R((...t) => {
+    var o;
+    return (o = n.current) == null ? void 0 : o.call(n, ...t);
+  }, []);
+}, me = (a) => {
+  var i = a, {
+    src: e,
+    onError: n,
+    title: t = "Frame",
+    width: o = "100%",
+    height: s = "100%",
+    style: r,
+    children: c
+  } = i, f = U(i, [
+    "src",
+    "onError",
+    "title",
+    "width",
+    "height",
+    "style",
+    "children"
+  ]);
+  const [u, _] = I(null), m = E(n), d = A(u), b = R((g) => {
+    _(g);
+  }, []);
+  return x(() => {
+    if (!d)
       return;
-    }
-    const i = s.split("");
-    let u = s.length === l ? 0 : parseInt((y = r.currentTarget.getAttribute("data-digit")) != null ? y : "0", 10);
-    i.forEach((W) => {
-      v(u, W), u += 1;
-    }), (C = c.current[Math.min(u, l - 1)]) == null || C.focus(), r.preventDefault();
-  }, [v, a]), Y = m((r) => {
-    var y, C;
-    const { target: e, target: { value: s } } = r, i = parseInt((y = e.getAttribute("data-digit")) != null ? y : "0", 10), u = (C = s.match(/[0-9]/g)) != null ? C : [];
-    if (u.length === 0) {
-      v(i, "");
+    const g = (w) => {
+      m(w);
+    };
+    return d.on("error", g), () => {
+      d.off("error", g);
+    };
+  }, [d, m]), /* @__PURE__ */ D(fe.Provider, { value: d, children: [
+    /* @__PURE__ */ C(
+      "iframe",
+      $({
+        ref: b,
+        title: t,
+        width: o,
+        height: s,
+        src: e,
+        style: $({ border: 0 }, r)
+      }, f)
+    ),
+    c
+  ] });
+}, ee = (e) => e instanceof Le, Ye = (e, n) => n in e, ne = (e) => e ? new Proxy(e, {
+  get: (n, t) => Ye(n, t) ? n[t] : void 0
+}) : null, Ce = (e) => {
+  const n = e && ee(e) ? e : null, t = e && !ee(e) ? e : null, [o, s] = I(t);
+  return x(() => {
+    if (!n)
+      return;
+    const r = (c) => {
+      s(ne(c));
+    };
+    return n.on("session.loaded", r), n.on("session.updated", r), () => {
+      n.off("session.loaded", r), n.off("session.updated", r), s(null);
+    };
+  }, [n]), x(() => {
+    if (!t)
+      return;
+    const r = () => {
+      s(ne(t));
+    };
+    return t.on("updated", r), t.on("ended", r), () => {
+      t.off("updated", r), t.off("ended", r), s(null);
+    };
+  }, [t]), o != null ? o : t;
+}, Je = "Overlay-module__root__qqUZs", Ve = "Overlay-module__content__5FwWj", te = {
+  root: Je,
+  content: Ve
+}, Ze = ({ state: e, children: n }) => {
+  const t = A(), o = Ce(t), s = o == null ? void 0 : o.state;
+  return (e === "loading" ? s === void 0 : s === e) ? /* @__PURE__ */ C("div", { className: te.root, children: /* @__PURE__ */ C("div", { className: te.content, children: n }) }) : null;
+}, ze = ({
+  id: e,
+  endAction: n,
+  popout: t,
+  agentTools: o,
+  deviceControls: s,
+  sessionDetails: r,
+  messages: c
+}) => {
+  const f = Y(), { i18n: { language: a } } = T();
+  return ye(() => {
+    const i = Object.entries({
+      end_action: n,
+      popout: t,
+      agent_tools: o,
+      device_controls: s,
+      session_details: r,
+      messages: c,
+      token_source: "postMessage",
+      lng: a
+    }).flatMap(([_, m]) => m === void 0 ? [] : [[_, m]]), u = new URLSearchParams(i);
+    return `${f.api}/session/${encodeURIComponent(e)}?${u.toString()}`;
+  }, [
+    f.api,
+    e,
+    n,
+    t,
+    o,
+    s,
+    r,
+    c,
+    a
+  ]);
+}, Ge = "SessionEmbed-module__root__Y9AHn", Xe = {
+  root: Ge
+}, Ke = ({ onLoaded: e, onUpdated: n, onActivated: t, onEnded: o }) => {
+  const s = A(), r = E(e), c = E(n), f = E(t), a = E(o), i = S(!1), u = S(!1);
+  return x(() => {
+    if (!s) {
+      i.current = !1, u.current = !1;
       return;
     }
-    u.length === 1 && (v(i, u[0]), w(c.current, e));
-  }, [v]), H = m((r) => {
-    const { key: e, currentTarget: s, metaKey: i, ctrlKey: u } = r;
-    s.value.length === 0 && e === ft ? U(c.current, s) : e === b || e === mt ? (gt(c.current, s, e), r.preventDefault()) : !i && !u && e.length === 1 && !/^[0-9]$/.test(e) && r.preventDefault();
-  }, []), O = m((r) => {
-    const { currentTarget: e, repeat: s } = r, { value: i } = e;
-    !s && /[0-9]/.test(i) && w(c.current, e);
-  }, []), V = !a && L().length === l;
-  return /* @__PURE__ */ R(
-    "fieldset",
-    {
-      className: $(I.root, o),
+    const _ = (d) => {
+      i.current = d.isActive(), u.current = !1, r(d);
+    }, m = (d) => {
+      c(d), d.isActive() && !i.current && (i.current = !0, f(d)), d.isEnded() && !u.current && (u.current = !0, a(d));
+    };
+    return s.on("session.loaded", _), s.on("session.updated", m), () => {
+      s.off("session.loaded", _), s.off("session.updated", m), i.current = !1, u.current = !1;
+    };
+  }, [f, a, r, c, s]), null;
+}, Qe = (g) => {
+  var w = g, {
+    id: e,
+    endAction: n,
+    popout: t,
+    agentTools: o,
+    deviceControls: s,
+    sessionDetails: r,
+    messages: c,
+    onError: f,
+    onLoaded: a,
+    onUpdated: i,
+    onActivated: u,
+    onEnded: _,
+    className: m,
+    children: d
+  } = w, b = U(w, [
+    "id",
+    "endAction",
+    "popout",
+    "agentTools",
+    "deviceControls",
+    "sessionDetails",
+    "messages",
+    "onError",
+    "onLoaded",
+    "onUpdated",
+    "onActivated",
+    "onEnded",
+    "className",
+    "children"
+  ]);
+  const B = ze({
+    id: e,
+    endAction: n,
+    popout: t,
+    agentTools: o,
+    deviceControls: s,
+    sessionDetails: r,
+    messages: c
+  });
+  return /* @__PURE__ */ C("div", { className: Xe.root, children: /* @__PURE__ */ D(
+    me,
+    H($({
+      src: B,
+      className: m,
+      onError: f
+    }, b), {
       children: [
-        g !== !1 && /* @__PURE__ */ _(
-          "legend",
+        /* @__PURE__ */ C(
+          Ke,
           {
-            className: I.legend,
-            onClick: j,
-            children: /* @__PURE__ */ _("span", { children: g != null ? g : p("Support code") })
+            onLoaded: a,
+            onUpdated: i,
+            onActivated: u,
+            onEnded: _
           }
         ),
-        /* @__PURE__ */ R("div", { className: $(I.digits, V && I.invalid), role: "group", children: [
-          E.map((r, e) => /* @__PURE__ */ _(
-            "input",
-            {
-              inputMode: "numeric",
-              className: $(I.input, n),
-              disabled: a,
-              onKeyDown: H,
-              onKeyUp: O,
-              onChange: Y,
-              onPaste: F,
-              value: r,
-              "data-digit": e,
-              ref: (s) => {
-                c.current[e] = s;
-              },
-              autoFocus: d && e === 0,
-              "aria-label": p("Digit {{digit}}", { digit: e + 1 })
-            },
-            e
-          )),
-          k
-        ] })
+        d
       ]
+    })
+  ) });
+}, en = Object.assign(Qe, {
+  Overlay: Ze
+}), F = 5, _e = 4e3, nn = "push_error", tn = "push_attempt_limit_reached", on = "device_not_found", sn = "session_not_found", oe = "session_error", se = (e) => e instanceof Error ? e.name === "AbortError" : !1, rn = ({
+  deviceId: e,
+  onConnectAttempt: n,
+  onConnected: t,
+  onCancelled: o,
+  onEnded: s,
+  onError: r,
+  maxPushAttempts: c = F,
+  pushRetryMs: f = _e
+}) => {
+  const a = Y(), i = S(null), u = S(null), _ = S(!1), m = S(!1), d = S(0), b = E(n), g = E(t), w = E(o), B = E(s), y = E(r), L = R(() => {
+    clearTimeout(d.current);
+  }, []), J = R((l) => {
+    !["pending", "ended"].includes(l.state) && !_.current && (L(), g(l), _.current = !0);
+  }, [g, L]), V = R((l) => {
+    var h;
+    m.current || (B(l), m.current = !0, (h = u.current) == null || h.end());
+  }, [B]), P = R((l) => {
+    se(l) || (l instanceof Error ? y({ id: nn, message: l.message }) : y(l));
+  }, [y]), Z = R(function l(h = 1, p) {
+    return k(this, null, function* () {
+      if (b(h), h >= c) {
+        P({ id: tn, message: "Push attempt limit reached." });
+        return;
+      }
+      if (!i.current) {
+        P({ id: on, message: "Device not found." });
+        return;
+      }
+      if (!u.current) {
+        P({ id: sn, message: "Session not found." });
+        return;
+      }
+      try {
+        yield i.current.notify({ session: u.current, attempt: h }, void 0, { signal: p.signal });
+      } catch (O) {
+        P(O);
+      }
+      d.current = setTimeout(() => {
+        l(h + 1, p);
+      }, f);
+    });
+  }, [c, b, f, P]), z = R((l) => k(null, null, function* () {
+    const { signal: h } = l;
+    try {
+      i.current = null, u.current = null, _.current = !1, m.current = !1;
+      const [p, O] = yield Promise.all([
+        a.regions.closest(void 0, { signal: h }),
+        a.devices.get(e, void 0, { signal: h })
+      ]);
+      i.current = O;
+      const N = yield a.sessions.create({
+        custom_data: O.custom_data,
+        region: p.id,
+        agent: "me"
+      }, void 0, { signal: h });
+      u.current = N, N.on("updated", J), N.on("ended", V), yield N.subscribe();
+    } catch (p) {
+      if (se(p))
+        return;
+      p instanceof Error ? y({ id: oe, message: p.message }) : y({ id: oe, message: "The session could not be created." });
     }
-  );
-}, ht = (t) => /* @__PURE__ */ T.createElement("svg", P({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", width: 14, height: 14, "aria-hidden": "true" }, t), /* @__PURE__ */ T.createElement("path", { d: "M15 3h6v6" }), /* @__PURE__ */ T.createElement("path", { d: "M10 14 21 3" }), /* @__PURE__ */ T.createElement("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })), _t = "ExternalLink-module__root__7-WiY", Et = {
-  root: _t
-}, vt = ({ href: t, children: o }) => /* @__PURE__ */ R("a", { className: Et.root, href: t, target: "_blank", rel: "noopener noreferrer", children: [
-  o,
-  /* @__PURE__ */ _(ht, {})
-] }), yt = "UserIcon-module__root__-NL30", Ct = {
-  root: yt
-}, It = ({ user: t, className: o }) => {
-  const n = () => !(t != null && t.name) || t.picture ? "" : t.name.trim().split(/\s+/).map((d) => d.toUpperCase().charAt(0)).join("").slice(0, 2);
-  return t ? /* @__PURE__ */ _(
-    "div",
-    {
-      className: $(Ct.root, o),
-      title: t.name,
-      style: {
-        backgroundImage: t.picture ? `url(${t.picture || ""})` : void 0,
-        backgroundColor: t.colour
-      },
-      children: /* @__PURE__ */ _("span", { children: n() })
-    }
-  ) : null;
-}, Rt = pt, wt = vt, Kt = tt, St = et, Nt = nt, Pt = ot, At = It, Mt = rt, bt = st, Bt = ct;
+  }), [a, e, V, J, y]), ge = R(() => k(null, null, function* () {
+    L();
+    const l = u.current;
+    l && (yield l.end(), w(l));
+  }), [w, L]);
+  return x(() => {
+    const l = new AbortController();
+    return k(null, null, function* () {
+      yield z(l), !l.signal.aborted && (yield Z(1, l));
+    }), () => {
+      l.abort(), L();
+    };
+  }, [z, Z, L]), { cancel: ge };
+}, cn = "ConnectDevice-module__root__JnmG1", an = "ConnectDevice-module__statusMessage__JWNqk", he = {
+  root: cn,
+  statusMessage: an
+}, ln = ({ attempt: e, maxPushAttempts: n = F, className: t }) => {
+  const { t: o } = T();
+  let s = o("Contacting device");
+  return e >= n ? s = o("Device not responding") : e >= n - 1 ? s = o("Trying once more") : e > 2 && (s = o("Retrying connection")), /* @__PURE__ */ C("div", { className: j(he.statusMessage, t), children: s });
+}, dn = ({ attempt: e, maxPushAttempts: n = F }) => e >= n ? null : /* @__PURE__ */ C(ce, {}), un = ({
+  deviceId: e,
+  onConnectAttempt: n,
+  onConnected: t,
+  onCancelled: o,
+  onEnded: s,
+  onError: r,
+  maxPushAttempts: c = F,
+  pushRetryMs: f = _e,
+  className: a,
+  children: i
+}) => {
+  const [u, _] = I(1), m = (g) => {
+    _(g), n == null || n(g);
+  }, { cancel: d } = rn({
+    deviceId: e,
+    onConnectAttempt: m,
+    onConnected: t,
+    onCancelled: o,
+    onEnded: s,
+    onError: r,
+    maxPushAttempts: c,
+    pushRetryMs: f
+  }), b = () => {
+    d();
+  };
+  return /* @__PURE__ */ C("div", { className: j(he.root, a), children: i(u, b) });
+}, fn = Object.assign(un, {
+  StatusMessage: ln,
+  Loader: dn,
+  CancelButton: le
+}), Rn = be, bn = re, pn = Ne, Sn = Se, wn = pe, $n = $e, xn = xe, yn = Te, Ln = we, kn = le, Pn = qe, Bn = ce, On = me, Nn = en, Mn = fn, Un = We, Tn = Y, Dn = A, In = Ce, jn = ke, An = W;
 export {
-  Rt as CodeEntry,
-  St as Device,
-  wt as ExternalLink,
-  bt as Loader,
-  Kt as PlatformIcon,
-  Mt as RefreshButton,
-  Nt as Session,
-  Pt as SmartConnectButton,
-  At as UserIcon,
-  Bt as i18n
+  Pn as BlockingError,
+  bn as Button,
+  kn as CancelButton,
+  Un as CobrowseProvider,
+  Rn as CodeEntry,
+  Mn as ConnectDevice,
+  wn as Device,
+  pn as ExternalLink,
+  On as Frame,
+  Bn as Loader,
+  Sn as PlatformIcon,
+  Ln as RefreshButton,
+  $n as Session,
+  Nn as SessionEmbed,
+  xn as SmartConnectButton,
+  yn as UserIcon,
+  jn as bindI18n,
+  An as i18n,
+  Tn as useCobrowse,
+  Dn as useRemoteContext,
+  In as useSession
 };
 //# sourceMappingURL=cobrowse-agent-ui.js.map