@skippr/live-agent-sdk 0.86.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skippr/live-agent-sdk",
-  "version": "0.86.0",
+  "version": "0.87.0",
   "type": "module",
   "main": "dist/esm/lib-exports.js",
   "module": "dist/esm/lib-exports.js",