@skippr/live-agent-sdk 0.85.0 → 0.87.0

package/README.md

@@ -10,6 +10,7 @@ Embed product specialists that see, speak, and act in real time. Configure **mod
 - **Real-time voice** — two-way audio with live transcription
 - **Capture modes** — `screenshare` (user shares screen) or `auto` (DOM capture)
 - **Agent controls** — opt-in capabilities like element highlighting and on-screen actions, configured per module (auto mode only)
+- **Bring your own button** — start, pause, and end sessions from your own UI with the `useLiveAgent` hook (see [Bring your own button](#bring-your-own-button))
 - **Chat + transcript** — text messaging with voice transcripts merged into one thread
 - **Session agenda** — structured phases with progress tracking
 - **Flexible auth** — email OTP (direct auth) or backend-signed JWT (secret mode)
@@ -195,6 +196,41 @@ function App() {
 }
 ```
 
+### Bring your own button
+
+You can bring your own widget or button and start, pause, and end sessions from it — no need to rely on the built-in launcher:
+
+```tsx
+import { LiveAgent, useLiveAgent } from '@skippr/live-agent-sdk';
+
+function TalkToExpertButton() {
+  const { isConnected, isStarting, displayModules, selectModule, disconnect } = useLiveAgent();
+
+  if (isConnected) {
+    return <button onClick={() => disconnect()}>End session</button>;
+  }
+
+  const module = displayModules[0];
+  return (
+    <button disabled={!module || isStarting} onClick={() => module && selectModule(module.id)}>
+      {isStarting ? 'Connecting…' : 'Talk to an expert'}
+    </button>
+  );
+}
+
+function App() {
+  return (
+    <LiveAgent appKey="pk_live_your_key">
+      <TalkToExpertButton />
+    </LiveAgent>
+  );
+}
+```
+
+- **Start** — call `selectModule(id)` with your agent's id (the same id you'd pass as `agentId`). Running multiple agents? Pick one from `displayModules`. If the user has a paused session with that agent, it resumes automatically.
+- **Close** — call `disconnect()` to end the current session.
+- **Show the right label** — use `isConnected` and `isStarting` to switch your button between start, connecting, and end states.
+
 ## API Reference
 
 ### `<LiveAgent>`
@@ -231,16 +267,14 @@ Hook for accessing session state and panel controls. Must be called within `<Liv
 | `isDisconnecting` | `boolean` | Whether the session is being torn down |
 | `isPausing` | `boolean` | Whether a pause request is in flight (before `isPaused` commits) |
 | `isPaused` | `boolean` | Whether the current session is paused |
-| `resumableSession` | `{ id: string } \| null` | The pinned agent's most recent paused session, or `null` |
-| `resumableSessions` | `{ id: string; agentId: string }[]` | All of the user's paused sessions (one per agent), for module pickers |
+| `resumableSession` | `{ id: string; agentId: string } \| null` | The operating module's paused session, or `null` |
 | `isPanelOpen` | `boolean` | Whether the panel is currently open |
 | `isMinimized` | `boolean` | Whether the widget is minimized |
 | `isAuthenticated` | `boolean` | Whether the user is authenticated |
 | `variant` | `'floating' \| 'sidebar'` | Current widget display mode |
 | `position` | `'left' \| 'right'` | Current widget position |
 | `error` | `string` | Error message, if any |
-| `hasModuleSelector` | `boolean` | Whether the widget is in picker mode |
-| `availableModules` | `Module[]` | Modules fetched for the picker |
+| `displayModules` | `Module[]` | The user's active modules, for pickers and custom start buttons |
 | `activeModule` | `Module \| null` | The module the current session was started with |
 | `isLoadingModules` | `boolean` | Whether the picker list is being fetched |
 | `modulesError` | `string \| null` | Error from fetching the picker list, if any |

package/dist/esm/lib-exports.js

@@ -3125,6 +3125,7 @@ function DomCapture({ pushOrTapMicMode = false }) {
     let cancelled = false;
     let snapshotInFlight = false;
     let a11yPublishInFlight = false;
+    let a11yPublishPending = false;
     let consecutiveCaptureFailures = 0;
     if (!pushOrTapMicMode && !localParticipant.isMicrophoneEnabled) {
       localParticipant.setMicrophoneEnabled(true).catch((error) => console.error("Failed to enable microphone:", error));
@@ -3162,8 +3163,12 @@ function DomCapture({ pushOrTapMicMode = false }) {
       }
     };
     const tickA11yPublish = async () => {
-      if (cancelled || a11yPublishInFlight || pausedRef.current)
+      if (cancelled || pausedRef.current)
         return;
+      if (a11yPublishInFlight) {
+        a11yPublishPending = true;
+        return;
+      }
       a11yPublishInFlight = true;
       try {
         const frame = await buildDomSnapshotFrame();
@@ -3175,6 +3180,10 @@ function DomCapture({ pushOrTapMicMode = false }) {
         });
       } catch {} finally {
         a11yPublishInFlight = false;
+        if (a11yPublishPending && !cancelled) {
+          a11yPublishPending = false;
+          tickA11yPublish();
+        }
       }
     };
     const cleanupDomEventListeners = installDomEventListeners(localParticipant, {