@skippr/live-agent-sdk 0.8.0 → 0.10.0

package/README.md

@@ -17,9 +17,14 @@ import { LiveAgent } from '@skippr/live-agent-sdk';
 import '@skippr/live-agent-sdk/styles';
 
 function App() {
-  return <LiveAgent organizationId="your_org_id" agentId="your_agent_id" />;
+  return (
+    <LiveAgent
+      agentId="your_agent_id"
+      appKey="pk_live_your_key"
+    />
+  );
 }
-```
+
 
 ## Custom Components
 
@@ -37,7 +42,7 @@ function ConnectionStatus() {
 
 function App() {
   return (
-    <LiveAgent organizationId="your_org_id" agentId="your_agent_id">
+    <LiveAgent agentId="your_agent_id" appKey="pk_live_your_key">
       <ConnectionStatus />
     </LiveAgent>
   );
@@ -54,8 +59,9 @@ Self-contained widget component. Renders a floating button that opens a sidebar
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `organizationId` | `string` | *required* | Organization ID provided by Skippr |
 | `agentId` | `string` | *required* | Agent ID provided by Skippr |
+| `appKey` | `string` | — | Publishable App Key from the admin dashboard |
+| `authToken` | `string` | — | Bearer token for authenticated users |
 | `defaultOpen` | `boolean` | `false` | Whether the panel starts open |
 
 ---

package/dist/esm/lib-exports.js

@@ -9,7 +9,14 @@ var LiveAgentContext = createContext(null);
 // src/hooks/useSession.ts
 import { useCallback, useState } from "react";
 var API_URL = "https://skipprapi-production.up.railway.app";
-function useSession({ organizationId, agentId }) {
+function resolveAuthHeaders(authToken, appKey) {
+  if (authToken)
+    return { Authorization: `Bearer ${authToken}` };
+  if (appKey)
+    return { "X-App-Key": appKey };
+  return {};
+}
+function useSession({ agentId, authToken, appKey }) {
   const [connection, setConnection] = useState(null);
   const [shouldConnect, setShouldConnect] = useState(false);
   const [isStarting, setIsStarting] = useState(false);
@@ -19,17 +26,19 @@ function useSession({ organizationId, agentId }) {
     setIsStarting(true);
     setError("");
     try {
+      const authHeaders = resolveAuthHeaders(authToken, appKey);
       const createResp = await fetch(`${API_URL}/v1/sessions`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ organizationId, agentId })
+        headers: { "Content-Type": "application/json", ...authHeaders },
+        body: JSON.stringify({ agentId })
       });
       if (!createResp.ok) {
         throw new Error(`Failed to create session: ${createResp.status}`);
       }
       const { session } = await createResp.json();
       const startResp = await fetch(`${API_URL}/v1/sessions/${session.id}/start`, {
-        method: "POST"
+        method: "POST",
+        headers: authHeaders
       });
       if (!startResp.ok) {
         throw new Error(`Failed to start session: ${startResp.status}`);
@@ -46,13 +55,14 @@ function useSession({ organizationId, agentId }) {
     } finally {
       setIsStarting(false);
     }
-  }, [organizationId, agentId]);
+  }, [agentId, authToken, appKey]);
   const disconnect = useCallback(async () => {
     if (sessionId) {
+      const authHeaders = resolveAuthHeaders(authToken, appKey);
       try {
         await fetch(`${API_URL}/v1/sessions/${sessionId}/complete`, {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: { "Content-Type": "application/json", ...authHeaders },
           body: JSON.stringify({})
         });
       } catch {}
@@ -61,7 +71,7 @@ function useSession({ organizationId, agentId }) {
     setShouldConnect(false);
     setConnection(null);
     setSessionId(null);
-  }, [sessionId]);
+  }, [sessionId, authToken, appKey]);
   return { connection, shouldConnect, isStarting, error, startSession, disconnect };
 }
 
@@ -748,14 +758,16 @@ function SidebarTrigger() {
 // src/components/LiveAgent.tsx
 import { jsx as jsx12, jsxs as jsxs9, Fragment as Fragment2 } from "react/jsx-runtime";
 function LiveAgent({
-  organizationId,
   agentId,
+  authToken,
+  appKey,
   defaultOpen = false,
   children
 }) {
   const { connection, shouldConnect, isStarting, error, startSession, disconnect } = useSession({
-    organizationId,
-    agentId
+    agentId,
+    authToken,
+    appKey
   });
   const [isPanelOpen, setIsPanelOpen] = useState5(defaultOpen);
   const openPanel = useCallback5(() => setIsPanelOpen(true), []);