@skippr/live-agent-sdk 0.9.0 → 0.11.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, authToken }) {
+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,11 +26,11 @@ function useSession({ organizationId, agentId, authToken }) {
     setIsStarting(true);
     setError("");
     try {
-      const authHeaders = authToken ? { Authorization: `Bearer ${authToken}` } : {};
+      const authHeaders = resolveAuthHeaders(authToken, appKey);
       const createResp = await fetch(`${API_URL}/v1/sessions`, {
         method: "POST",
         headers: { "Content-Type": "application/json", ...authHeaders },
-        body: JSON.stringify({ organizationId, agentId })
+        body: JSON.stringify({ agentId })
       });
       if (!createResp.ok) {
         throw new Error(`Failed to create session: ${createResp.status}`);
@@ -48,10 +55,10 @@ function useSession({ organizationId, agentId, authToken }) {
     } finally {
       setIsStarting(false);
     }
-  }, [organizationId, agentId, authToken]);
+  }, [agentId, authToken, appKey]);
   const disconnect = useCallback(async () => {
     if (sessionId) {
-      const authHeaders = authToken ? { Authorization: `Bearer ${authToken}` } : {};
+      const authHeaders = resolveAuthHeaders(authToken, appKey);
       try {
         await fetch(`${API_URL}/v1/sessions/${sessionId}/complete`, {
           method: "POST",
@@ -64,7 +71,7 @@ function useSession({ organizationId, agentId, authToken }) {
     setShouldConnect(false);
     setConnection(null);
     setSessionId(null);
-  }, [sessionId, authToken]);
+  }, [sessionId, authToken, appKey]);
   return { connection, shouldConnect, isStarting, error, startSession, disconnect };
 }
 
@@ -250,12 +257,204 @@ import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/createLucideIcon.js
+import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
 
-// src/components/ChatHeader.tsx
-import { Bot, X } from "lucide-react";
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.js
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.js
+var toCamelCase = (string) => string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase());
+
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.js
+var toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
 
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/Icon.js
+import { forwardRef, createElement } from "react";
+
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.js
+var hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+  return false;
+};
+
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/Icon.js
+var Icon = forwardRef(({
+  color = "currentColor",
+  size = 24,
+  strokeWidth = 2,
+  absoluteStrokeWidth,
+  className = "",
+  children,
+  iconNode,
+  ...rest
+}, ref) => createElement("svg", {
+  ref,
+  ...defaultAttributes,
+  width: size,
+  height: size,
+  stroke: color,
+  strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+  className: mergeClasses("lucide", className),
+  ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+  ...rest
+}, [
+  ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+  ...Array.isArray(children) ? children : [children]
+]));
+
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef2(({ className, ...props }, ref) => createElement2(Icon, {
+    ref,
+    iconNode,
+    className: mergeClasses(`lucide-${toKebabCase(toPascalCase(iconName))}`, `lucide-${iconName}`, className),
+    ...props
+  }));
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/loader-circle.js
+var __iconNode = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+var LoaderCircle = createLucideIcon("loader-circle", __iconNode);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle-question-mark.js
+var __iconNode2 = [
+  [
+    "path",
+    {
+      d: "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719",
+      key: "1sd12s"
+    }
+  ],
+  ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+var MessageCircleQuestionMark = createLucideIcon("message-circle-question-mark", __iconNode2);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send-horizontal.js
+var __iconNode3 = [
+  [
+    "path",
+    {
+      d: "M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z",
+      key: "117uat"
+    }
+  ],
+  ["path", { d: "M6 12h16", key: "s4cdu5" }]
+];
+var SendHorizontal = createLucideIcon("send-horizontal", __iconNode3);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/bot.js
+var __iconNode4 = [
+  ["path", { d: "M12 8V4H8", key: "hb8ula" }],
+  ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
+  ["path", { d: "M2 14h2", key: "vft8re" }],
+  ["path", { d: "M20 14h2", key: "4cs60a" }],
+  ["path", { d: "M15 13v2", key: "1xurst" }],
+  ["path", { d: "M9 13v2", key: "rq6x2g" }]
+];
+var Bot = createLucideIcon("bot", __iconNode4);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/check.js
+var __iconNode5 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+var Check = createLucideIcon("check", __iconNode5);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle.js
+var __iconNode6 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+var Circle = createLucideIcon("circle", __iconNode6);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle.js
+var __iconNode7 = [
+  [
+    "path",
+    {
+      d: "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719",
+      key: "1sd12s"
+    }
+  ]
+];
+var MessageCircle = createLucideIcon("message-circle", __iconNode7);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic-off.js
+var __iconNode8 = [
+  ["path", { d: "M12 19v3", key: "npa21l" }],
+  ["path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33", key: "1gzdoj" }],
+  ["path", { d: "M16.95 16.95A7 7 0 0 1 5 12v-2", key: "cqa7eg" }],
+  ["path", { d: "M18.89 13.23A7 7 0 0 0 19 12v-2", key: "16hl24" }],
+  ["path", { d: "m2 2 20 20", key: "1ooewy" }],
+  ["path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12", key: "r2i35w" }]
+];
+var MicOff = createLucideIcon("mic-off", __iconNode8);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic.js
+var __iconNode9 = [
+  ["path", { d: "M12 19v3", key: "npa21l" }],
+  ["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
+  ["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
+];
+var Mic = createLucideIcon("mic", __iconNode9);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor-off.js
+var __iconNode10 = [
+  ["path", { d: "M12 17v4", key: "1riwvh" }],
+  ["path", { d: "M17 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 1.184-1.826", key: "cv7jms" }],
+  ["path", { d: "m2 2 20 20", key: "1ooewy" }],
+  ["path", { d: "M8 21h8", key: "1ev6f3" }],
+  ["path", { d: "M8.656 3H20a2 2 0 0 1 2 2v10a2 2 0 0 1-.293 1.042", key: "z8ni2w" }]
+];
+var MonitorOff = createLucideIcon("monitor-off", __iconNode10);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.js
+var __iconNode11 = [
+  ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
+  ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
+  ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
+];
+var Monitor = createLucideIcon("monitor", __iconNode11);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
+var __iconNode12 = [
+  [
+    "path",
+    {
+      d: "M10.1 13.9a14 14 0 0 0 3.732 2.668 1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2 18 18 0 0 1-12.728-5.272",
+      key: "1wngk7"
+    }
+  ],
+  ["path", { d: "M22 2 2 22", key: "y4kqgn" }],
+  [
+    "path",
+    {
+      d: "M4.76 13.582A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 .244.473",
+      key: "10hv5p"
+    }
+  ]
+];
+var PhoneOff = createLucideIcon("phone-off", __iconNode12);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
+var __iconNode13 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+var X = createLucideIcon("x", __iconNode13);
 // src/components/ui/button.tsx
-import { forwardRef } from "react";
+import { forwardRef as forwardRef3 } from "react";
 import { jsx } from "react/jsx-runtime";
 var variantClasses = {
   default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
@@ -274,7 +473,7 @@ var sizeClasses = {
   "icon-sm": "skippr:size-8",
   "icon-lg": "skippr:size-10"
 };
-var Button = forwardRef(({ className, variant = "default", size = "default", ...props }, ref) => {
+var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
   return /* @__PURE__ */ jsx("button", {
     className: cn("skippr:inline-flex skippr:items-center skippr:justify-center skippr:gap-2 skippr:whitespace-nowrap skippr:rounded-md skippr:text-sm skippr:font-medium skippr:ring-offset-background skippr:transition-all skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-ring skippr:focus-visible:ring-offset-2 skippr:disabled:pointer-events-none skippr:disabled:opacity-50 skippr:shrink-0 skippr:[&_svg]:pointer-events-none skippr:[&_svg:not([class*='size-'])]:size-4 skippr:[&_svg]:shrink-0", variantClasses[variant], sizeClasses[size], className),
     ref,
@@ -318,7 +517,6 @@ function ChatHeader({ onClose }) {
 // src/components/MeetingControls.tsx
 import { useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react";
 import { ScreenSharePresets } from "livekit-client";
-import { Mic, MicOff, Monitor, MonitorOff, PhoneOff } from "lucide-react";
 import { useCallback as useCallback4, useEffect as useEffect2, useState as useState3 } from "react";
 
 // src/lib/format.ts
@@ -411,7 +609,6 @@ function MeetingControls({ onHangUp }) {
 import { useEffect as useEffect3, useRef } from "react";
 
 // src/components/ChatInput.tsx
-import { SendHorizontal } from "lucide-react";
 import { useState as useState4 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function ChatInput({ sendChatMessage, isSendingChat }) {
@@ -526,7 +723,6 @@ function MessageList({
 }
 
 // src/components/QuickActions.tsx
-import { Loader2, MessageCircleQuestion } from "lucide-react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function QuickActions({ onStartSession, isStarting, error }) {
   return /* @__PURE__ */ jsxs6("div", {
@@ -542,9 +738,9 @@ function QuickActions({ onStartSession, isStarting, error }) {
         onClick: onStartSession,
         disabled: isStarting,
         children: [
-          isStarting ? /* @__PURE__ */ jsx8(Loader2, {
+          isStarting ? /* @__PURE__ */ jsx8(LoaderCircle, {
             className: "skippr:size-4 skippr:animate-spin skippr:text-primary"
-          }) : /* @__PURE__ */ jsx8(MessageCircleQuestion, {
+          }) : /* @__PURE__ */ jsx8(MessageCircleQuestionMark, {
             className: "skippr:size-4 skippr:text-primary"
           }),
           isStarting ? "Starting..." : "Start Session"
@@ -559,7 +755,6 @@ function QuickActions({ onStartSession, isStarting, error }) {
 }
 
 // src/components/SessionAgenda.tsx
-import { Check, Circle, Loader2 as Loader22 } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function SessionAgenda({ phases, questions = [] }) {
   if (phases.length === 0) {
@@ -632,7 +827,7 @@ function PhaseIcon({ status }) {
     });
   }
   if (status === "active") {
-    return /* @__PURE__ */ jsx9(Loader22, {
+    return /* @__PURE__ */ jsx9(LoaderCircle, {
       className: "skippr:size-4 skippr:shrink-0 skippr:text-primary skippr:animate-spin"
     });
   }
@@ -728,7 +923,6 @@ function ConnectedContent({ onDisconnect }) {
 }
 
 // src/components/SidebarTrigger.tsx
-import { MessageCircle, X as X2 } from "lucide-react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var TRIGGER_GAP = 16;
 var TRIGGER_DEFAULT_RIGHT = 24;
@@ -740,7 +934,7 @@ function SidebarTrigger() {
     className: "skippr:fixed skippr:bottom-6 skippr:z-[9998] skippr:size-14 skippr:rounded-full skippr:shadow-lg skippr:transition-all skippr:duration-300",
     style: { right: isPanelOpen ? SIDEBAR_WIDTH + TRIGGER_GAP : TRIGGER_DEFAULT_RIGHT },
     title: isPanelOpen ? "Close chat" : "Chat with us",
-    children: isPanelOpen ? /* @__PURE__ */ jsx11(X2, {
+    children: isPanelOpen ? /* @__PURE__ */ jsx11(X, {
       className: "skippr:size-6"
     }) : /* @__PURE__ */ jsx11(MessageCircle, {
       className: "skippr:size-6"
@@ -751,16 +945,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,
-    authToken
+    authToken,
+    appKey
   });
   const [isPanelOpen, setIsPanelOpen] = useState5(defaultOpen);
   const openPanel = useCallback5(() => setIsPanelOpen(true), []);