@thunderphone/widget 0.2.3 → 0.3.0

package/dist/mount.global.js

@@ -789,7 +789,7 @@ var ThunderPhone = (() => {
             }
             return element;
           };
-          function createElement3(type, config, children) {
+          function createElement4(type, config, children) {
             var propName;
             var props = {};
             var key = null;
@@ -1888,7 +1888,7 @@ var ThunderPhone = (() => {
                 error("React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", typeString, info);
               }
             }
-            var element = createElement3.apply(this, arguments);
+            var element = createElement4.apply(this, arguments);
             if (element == null) {
               return element;
             }
@@ -16553,7 +16553,7 @@ var ThunderPhone = (() => {
               }
             }
           }
-          function createElement3(type, props, rootContainerElement, parentNamespace) {
+          function createElement4(type, props, rootContainerElement, parentNamespace) {
             var isCustomComponentTag;
             var ownerDocument = getOwnerDocumentFromRootContainer(rootContainerElement);
             var domElement;
@@ -17423,7 +17423,7 @@ var ThunderPhone = (() => {
               }
               parentNamespace = hostContextDev.namespace;
             }
-            var domElement = createElement3(type, props, rootContainerInstance, parentNamespace);
+            var domElement = createElement4(type, props, rootContainerInstance, parentNamespace);
             precacheFiberNode(internalInstanceHandle, domElement);
             updateFiberProps(domElement, props);
             return domElement;
@@ -31669,7 +31669,78 @@ var ThunderPhone = (() => {
   var import_react4 = __toESM(require_react());
   var import_client = __toESM(require_client());
 
-  // src/ThunderPhoneWidget.tsx
+  // src/WidgetButton.tsx
+  var import_jsx_runtime = __toESM(require_jsx_runtime());
+  function WidgetButton({ state, muted, onClick, onMuteToggle }) {
+    if (state === "connected") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tp-button-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "tp-button tp-button--mute", onClick: onMuteToggle, type: "button", children: muted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "1", y1: "1", x2: "23", y2: "23" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .76-.13 1.49-.36 2.18" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "tp-button tp-button--end", onClick, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) })
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        className: `tp-button tp-button--start ${state === "connecting" ? "tp-button--loading" : ""}`,
+        onClick,
+        disabled: state === "connecting",
+        type: "button",
+        children: state === "connecting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "tp-icon tp-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+        ] })
+      }
+    );
+  }
+
+  // src/WidgetStatus.tsx
+  var import_react = __toESM(require_react());
+  var import_jsx_runtime2 = __toESM(require_jsx_runtime());
+  function WidgetStatus({ state, agentName, errorMessage }) {
+    const [elapsed, setElapsed] = (0, import_react.useState)(0);
+    (0, import_react.useEffect)(() => {
+      if (state !== "connected") {
+        setElapsed(0);
+        return;
+      }
+      const interval = setInterval(() => setElapsed((s) => s + 1), 1e3);
+      return () => clearInterval(interval);
+    }, [state]);
+    const formatTime = (seconds) => {
+      const m = Math.floor(seconds / 60);
+      const s = seconds % 60;
+      return `${m}:${s.toString().padStart(2, "0")}`;
+    };
+    const statusText = {
+      idle: "Ready",
+      connecting: "Connecting...",
+      connected: formatTime(elapsed),
+      disconnected: "Disconnected",
+      error: "Unable to connect"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "tp-status", children: [
+      agentName && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tp-status__name", children: agentName }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `tp-status__text tp-status--${state}`, children: [
+        state === "connected" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "tp-status__dot" }),
+        errorMessage && state === "error" ? errorMessage : statusText[state]
+      ] })
+    ] });
+  }
+
+  // src/useThunderPhone.ts
   var import_react3 = __toESM(require_react());
 
   // node_modules/livekit-client/dist/livekit-client.esm.mjs
@@ -57364,12 +57435,12 @@ var ThunderPhone = (() => {
   });
 
   // src/AudioHandler.tsx
-  var import_react = __toESM(require_react());
-  var import_jsx_runtime = __toESM(require_jsx_runtime());
+  var import_react2 = __toESM(require_react());
+  var import_jsx_runtime3 = __toESM(require_jsx_runtime());
   function AudioHandler({ onAgentConnected, onDisconnected }) {
     const room = ua();
-    const audioRef = (0, import_react.useRef)(null);
-    (0, import_react.useEffect)(() => {
+    const audioRef = (0, import_react2.useRef)(null);
+    (0, import_react2.useEffect)(() => {
       if (room.remoteParticipants.size > 0) {
         onAgentConnected();
       }
@@ -57402,78 +57473,7 @@ var ThunderPhone = (() => {
         room.off(RoomEvent.TrackSubscribed, attachTrack);
       };
     }, [room, onAgentConnected, onDisconnected]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("audio", { ref: audioRef, autoPlay: true });
-  }
-
-  // src/WidgetButton.tsx
-  var import_jsx_runtime2 = __toESM(require_jsx_runtime());
-  function WidgetButton({ state, muted, onClick, onMuteToggle }) {
-    if (state === "connected") {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "tp-button-group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "tp-button tp-button--mute", onClick: onMuteToggle, type: "button", children: muted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "1", y1: "1", x2: "23", y2: "23" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .76-.13 1.49-.36 2.18" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "tp-button tp-button--end", onClick, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) })
-      ] });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "button",
-      {
-        className: `tp-button tp-button--start ${state === "connecting" ? "tp-button--loading" : ""}`,
-        onClick,
-        disabled: state === "connecting",
-        type: "button",
-        children: state === "connecting" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "tp-icon tp-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
-        ] })
-      }
-    );
-  }
-
-  // src/WidgetStatus.tsx
-  var import_react2 = __toESM(require_react());
-  var import_jsx_runtime3 = __toESM(require_jsx_runtime());
-  function WidgetStatus({ state, agentName, errorMessage }) {
-    const [elapsed, setElapsed] = (0, import_react2.useState)(0);
-    (0, import_react2.useEffect)(() => {
-      if (state !== "connected") {
-        setElapsed(0);
-        return;
-      }
-      const interval = setInterval(() => setElapsed((s) => s + 1), 1e3);
-      return () => clearInterval(interval);
-    }, [state]);
-    const formatTime = (seconds) => {
-      const m = Math.floor(seconds / 60);
-      const s = seconds % 60;
-      return `${m}:${s.toString().padStart(2, "0")}`;
-    };
-    const statusText = {
-      idle: "Ready",
-      connecting: "Connecting...",
-      connected: formatTime(elapsed),
-      disconnected: "Disconnected",
-      error: "Unable to connect"
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tp-status", children: [
-      agentName && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tp-status__name", children: agentName }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `tp-status__text tp-status--${state}`, children: [
-        state === "connected" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tp-status__dot" }),
-        errorMessage && state === "error" ? errorMessage : statusText[state]
-      ] })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("audio", { ref: audioRef, autoPlay: true });
   }
 
   // src/api.ts
@@ -57505,95 +57505,109 @@ var ThunderPhone = (() => {
     return response.json();
   }
 
-  // src/ThunderPhoneWidget.tsx
-  var import_jsx_runtime4 = __toESM(require_jsx_runtime());
-  function ThunderPhoneWidget({
-    apiKey,
-    agentId,
-    apiBase,
-    onConnect,
-    onDisconnect,
-    onError,
-    className
-  }) {
+  // src/useThunderPhone.ts
+  function useThunderPhone(opts) {
     const [state, setState] = (0, import_react3.useState)("idle");
     const [session, setSession] = (0, import_react3.useState)(null);
     const [muted, setMuted] = (0, import_react3.useState)(false);
-    const [errorMessage, setErrorMessage] = (0, import_react3.useState)();
-    const handleConnect = (0, import_react3.useCallback)(async () => {
+    const [error, setError] = (0, import_react3.useState)();
+    const handleDisconnect = (0, import_react3.useCallback)(() => {
+      setState("disconnected");
+      setSession(null);
+      setMuted(false);
+      opts.onDisconnect?.();
+      setTimeout(() => setState("idle"), 1500);
+    }, [opts.onDisconnect]);
+    const handleAgentConnected = (0, import_react3.useCallback)(() => {
+      setState("connected");
+      opts.onConnect?.();
+    }, [opts.onConnect]);
+    const connect = (0, import_react3.useCallback)(async () => {
       if (state === "connecting" || state === "connected") return;
       setState("connecting");
-      setErrorMessage(void 0);
+      setError(void 0);
       try {
-        const sess = await createWidgetSession(apiKey, agentId, apiBase);
+        const sess = await createWidgetSession(opts.apiKey, opts.agentId, opts.apiBase);
         setSession(sess);
       } catch (err) {
         setState("error");
         if (err instanceof WidgetAPIError) {
-          setErrorMessage(err.message);
-          onError?.({ error: err.code, message: err.message });
+          setError(err.message);
+          opts.onError?.({ error: err.code, message: err.message });
         } else {
-          setErrorMessage("Unable to connect.");
-          onError?.({ error: "unknown", message: "Unable to connect." });
+          setError("Unable to connect.");
+          opts.onError?.({ error: "unknown", message: "Unable to connect." });
         }
       }
-    }, [apiKey, agentId, apiBase, state, onError]);
-    const handleDisconnect = (0, import_react3.useCallback)(() => {
-      setState("disconnected");
-      setSession(null);
-      setMuted(false);
-      onDisconnect?.();
-      setTimeout(() => setState("idle"), 1500);
-    }, [onDisconnect]);
-    const handleAgentConnected = (0, import_react3.useCallback)(() => {
-      setState("connected");
-      onConnect?.();
-    }, [onConnect]);
+    }, [opts.apiKey, opts.agentId, opts.apiBase, state, opts.onError]);
+    const disconnect = (0, import_react3.useCallback)(() => {
+      handleDisconnect();
+    }, [handleDisconnect]);
+    const toggleMute = (0, import_react3.useCallback)(() => setMuted((m) => !m), []);
+    const audio = session ? (0, import_react3.createElement)(
+      W,
+      {
+        token: session.token,
+        serverUrl: session.server_url,
+        audio: !muted,
+        video: false,
+        connect: true
+      },
+      (0, import_react3.createElement)(AudioHandler, {
+        onAgentConnected: handleAgentConnected,
+        onDisconnected: handleDisconnect
+      })
+    ) : null;
+    return {
+      state,
+      connect,
+      disconnect,
+      toggleMute,
+      isMuted: muted,
+      error,
+      agentName: session?.agent_name,
+      audio
+    };
+  }
+
+  // src/ThunderPhoneWidget.tsx
+  var import_jsx_runtime4 = __toESM(require_jsx_runtime());
+  function ThunderPhoneWidget({
+    apiKey,
+    agentId,
+    apiBase,
+    onConnect,
+    onDisconnect,
+    onError,
+    className
+  }) {
+    const phone = useThunderPhone({ apiKey, agentId, apiBase, onConnect, onDisconnect, onError });
     const handleClick = () => {
-      if (state === "connected") {
-        handleDisconnect();
-      } else if (state === "idle" || state === "error" || state === "disconnected") {
-        handleConnect();
+      if (phone.state === "connected") {
+        phone.disconnect();
+      } else if (phone.state === "idle" || phone.state === "error" || phone.state === "disconnected") {
+        phone.connect();
       }
     };
-    const handleMuteToggle = (0, import_react3.useCallback)(() => {
-      setMuted((m) => !m);
-    }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `tp-widget ${className || ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         WidgetStatus,
         {
-          state,
-          agentName: session?.agent_name || null,
-          errorMessage
+          state: phone.state,
+          agentName: phone.agentName || null,
+          errorMessage: phone.error
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         WidgetButton,
         {
-          state,
-          muted,
+          state: phone.state,
+          muted: phone.isMuted,
           onClick: handleClick,
-          onMuteToggle: handleMuteToggle
+          onMuteToggle: phone.toggleMute
         }
       ),
-      session && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        W,
-        {
-          token: session.token,
-          serverUrl: session.server_url,
-          audio: !muted,
-          video: false,
-          connect: true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            AudioHandler,
-            {
-              onAgentConnected: handleAgentConnected,
-              onDisconnected: handleDisconnect
-            }
-          )
-        }
-      )
+      phone.audio
     ] });
   }