@skippr/live-agent-sdk 0.5.0 → 0.6.0

package/dist/esm/lib-exports.js

@@ -1,3 +1,712 @@
+// src/components/LiveAgent.tsx
+import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
+import { useCallback as useCallback6, useMemo as useMemo2, useState as useState4 } from "react";
+
+// src/context/LiveAgentContext.tsx
+import { createContext } from "react";
+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 }) {
+  const [connection, setConnection] = useState(null);
+  const [shouldConnect, setShouldConnect] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+  const [error, setError] = useState("");
+  const [sessionId, setSessionId] = useState(null);
+  const startSession = useCallback(async () => {
+    setIsStarting(true);
+    setError("");
+    try {
+      const createResp = await fetch(`${API_URL}/v1/sessions`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ organizationId, 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"
+      });
+      if (!startResp.ok) {
+        throw new Error(`Failed to start session: ${startResp.status}`);
+      }
+      const { connection: conn } = await startResp.json();
+      setSessionId(session.id);
+      setConnection({
+        livekitUrl: conn.livekitUrl,
+        token: conn.token
+      });
+      setShouldConnect(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to start session");
+    } finally {
+      setIsStarting(false);
+    }
+  }, [organizationId, agentId]);
+  const disconnect = useCallback(async () => {
+    if (sessionId) {
+      try {
+        await fetch(`${API_URL}/v1/sessions/${sessionId}/complete`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({})
+        });
+      } catch {}
+    }
+    setError("");
+    setShouldConnect(false);
+    setConnection(null);
+    setSessionId(null);
+  }, [sessionId]);
+  return { connection, shouldConnect, isStarting, error, startSession, disconnect };
+}
+
+// src/components/Sidebar.tsx
+import { useConnectionState } from "@livekit/components-react";
+import { ConnectionState } from "livekit-client";
+import { useEffect as useEffect3 } from "react";
+
+// src/hooks/useLiveAgent.ts
+import { use } from "react";
+function useLiveAgent() {
+  const ctx = use(LiveAgentContext);
+  if (!ctx) {
+    throw new Error("useLiveAgent must be used within a <LiveAgent> provider");
+  }
+  const { connection, shouldConnect, ...publicValue } = ctx;
+  return publicValue;
+}
+
+// src/hooks/usePhaseUpdates.ts
+import { useCallback as useCallback2 } from "react";
+
+// src/hooks/useAgentState.ts
+import { useRemoteParticipants } from "@livekit/components-react";
+import { useEffect, useState as useState2 } from "react";
+function useAgentState(attributeKey, parse, initial) {
+  const [value, setValue] = useState2(initial);
+  const remoteParticipants = useRemoteParticipants();
+  useEffect(() => {
+    const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
+    if (agentParticipant) {
+      const attr = agentParticipant.attributes?.[attributeKey];
+      if (attr) {
+        const parsed = parse(attr);
+        if (parsed)
+          setValue(parsed);
+      }
+    }
+    const handlers = new Map;
+    for (const p of remoteParticipants) {
+      const handler = (changedAttributes) => {
+        if (changedAttributes[attributeKey]) {
+          const parsed = parse(changedAttributes[attributeKey]);
+          if (parsed)
+            setValue(parsed);
+        } else if (p.attributes?.[attributeKey]) {
+          const parsed = parse(p.attributes[attributeKey]);
+          if (parsed)
+            setValue(parsed);
+        }
+      };
+      handlers.set(p, handler);
+      p.on("attributesChanged", handler);
+    }
+    return () => {
+      for (const [p, handler] of handlers) {
+        p.off("attributesChanged", handler);
+      }
+    };
+  }, [remoteParticipants, attributeKey, parse]);
+  return value;
+}
+
+// src/hooks/usePhaseUpdates.ts
+function parsePhases(json) {
+  try {
+    const data = JSON.parse(json);
+    if (data.type === "phase_update" && Array.isArray(data.phases)) {
+      return data.phases;
+    }
+  } catch {}
+  return null;
+}
+function usePhaseUpdates() {
+  const parse = useCallback2(parsePhases, []);
+  const phases = useAgentState("phases", parse, []);
+  return { phases };
+}
+
+// src/hooks/useQuestionUpdates.ts
+import { useCallback as useCallback3 } from "react";
+function parseQuestions(json) {
+  try {
+    const data = JSON.parse(json);
+    if (data.type === "question_update" && Array.isArray(data.questions)) {
+      return data.questions;
+    }
+  } catch {}
+  return null;
+}
+function useQuestionUpdates() {
+  const parse = useCallback3(parseQuestions, []);
+  const questions = useAgentState("questions", parse, []);
+  return { questions };
+}
+
+// src/hooks/useTranscriptMessages.ts
+import {
+  useLocalParticipant,
+  useTrackTranscription,
+  useVoiceAssistant
+} from "@livekit/components-react";
+import { Track } from "livekit-client";
+import { useMemo } from "react";
+function segmentsToMessages(segments, role) {
+  return segments.filter((s) => s.final && s.text.trim().length > 0).map((s) => ({
+    id: s.id,
+    role,
+    content: s.text
+  }));
+}
+function useTranscriptMessages() {
+  const { agentTranscriptions, state } = useVoiceAssistant();
+  const { localParticipant } = useLocalParticipant();
+  const localMicTrack = useMemo(() => localParticipant.getTrackPublication(Track.Source.Microphone) ? {
+    participant: localParticipant,
+    source: Track.Source.Microphone,
+    publication: localParticipant.getTrackPublication(Track.Source.Microphone)
+  } : undefined, [localParticipant]);
+  const { segments: userSegments } = useTrackTranscription(localMicTrack);
+  const messages = useMemo(() => {
+    const agent = segmentsToMessages(agentTranscriptions, "assistant");
+    const user = segmentsToMessages(userSegments, "user");
+    const timeMap = new Map;
+    for (const s of agentTranscriptions)
+      timeMap.set(s.id, s.firstReceivedTime);
+    for (const s of userSegments)
+      timeMap.set(s.id, s.firstReceivedTime);
+    return [...agent, ...user].sort((a, b) => (timeMap.get(a.id) ?? 0) - (timeMap.get(b.id) ?? 0));
+  }, [agentTranscriptions, userSegments]);
+  return { messages, agentState: state };
+}
+
+// src/lib/constants.ts
+var SIDEBAR_WIDTH = 600;
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ChatHeader.tsx
+import { Bot, X } from "lucide-react";
+
+// src/components/ui/button.tsx
+import { forwardRef } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var variantClasses = {
+  default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
+  destructive: "skippr:bg-destructive skippr:text-white skippr:hover:bg-destructive/90",
+  outline: "skippr:border skippr:border-input skippr:bg-background skippr:shadow-xs skippr:hover:bg-accent skippr:hover:text-accent-foreground",
+  secondary: "skippr:bg-secondary skippr:text-secondary-foreground skippr:hover:bg-secondary/80",
+  ghost: "skippr:hover:bg-accent skippr:hover:text-accent-foreground"
+};
+var sizeClasses = {
+  default: "skippr:h-9 skippr:px-4 skippr:py-2",
+  xs: "skippr:h-6 skippr:gap-1 skippr:rounded-md skippr:px-2 skippr:text-xs",
+  sm: "skippr:h-8 skippr:gap-1.5 skippr:rounded-md skippr:px-3",
+  lg: "skippr:h-10 skippr:rounded-md skippr:px-6",
+  icon: "skippr:size-9",
+  "icon-xs": "skippr:size-6",
+  "icon-sm": "skippr:size-8",
+  "icon-lg": "skippr:size-10"
+};
+var Button = forwardRef(({ className, variant = "default", size = "default", ...props }, ref) => {
+  return /* @__PURE__ */ jsxDEV("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,
+    ...props
+  }, undefined, false, undefined, this);
+});
+Button.displayName = "Button";
+
+// src/components/ChatHeader.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function ChatHeader({ onClose }) {
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "skippr:flex skippr:items-center skippr:gap-3 skippr:bg-primary skippr:px-4 skippr:py-3 skippr:text-primary-foreground",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "skippr:flex skippr:size-6 skippr:items-center skippr:justify-center skippr:rounded-full skippr:bg-primary-foreground/20",
+        children: /* @__PURE__ */ jsxDEV2(Bot, {
+          className: "skippr:size-3.5 skippr:text-primary-foreground"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "skippr:flex-1",
+        children: /* @__PURE__ */ jsxDEV2("p", {
+          className: "skippr:text-sm skippr:font-semibold skippr:leading-none",
+          children: "AI Agent"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2(Button, {
+        variant: "ghost",
+        size: "icon-xs",
+        onClick: onClose,
+        className: "skippr:text-primary-foreground skippr:hover:bg-primary-foreground/20 skippr:hover:text-primary-foreground",
+        children: /* @__PURE__ */ jsxDEV2(X, {
+          className: "skippr:size-4"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/MeetingControls.tsx
+import { useLocalParticipant as useLocalParticipant2 } 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
+function formatTime(seconds) {
+  const m = Math.floor(seconds / 60).toString().padStart(2, "0");
+  const s = (seconds % 60).toString().padStart(2, "0");
+  return `${m}:${s}`;
+}
+
+// src/components/MeetingControls.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function MeetingControls({ onHangUp }) {
+  const { localParticipant } = useLocalParticipant2();
+  const isMuted = !localParticipant.isMicrophoneEnabled;
+  const isScreenSharing = localParticipant.isScreenShareEnabled;
+  const [elapsed, setElapsed] = useState3(0);
+  useEffect2(() => {
+    const id = setInterval(() => setElapsed((t) => t + 1), 1000);
+    return () => clearInterval(id);
+  }, []);
+  const toggleMute = useCallback4(async () => {
+    try {
+      await localParticipant.setMicrophoneEnabled(isMuted);
+    } catch (e) {
+      console.error("Failed to toggle microphone:", e);
+    }
+  }, [localParticipant, isMuted]);
+  const toggleScreenShare = useCallback4(async () => {
+    try {
+      await localParticipant.setScreenShareEnabled(!isScreenSharing, {
+        video: { displaySurface: "browser" },
+        resolution: ScreenSharePresets.h720fps30.resolution,
+        contentHint: "detail"
+      });
+    } catch (e) {
+      console.error("Failed to toggle screen share:", e);
+    }
+  }, [localParticipant, isScreenSharing]);
+  useEffect2(() => {
+    toggleMute().then(() => toggleScreenShare());
+  }, []);
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "skippr:flex skippr:items-center skippr:justify-between skippr:border-b skippr:px-4 skippr:py-3",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "skippr:flex skippr:items-center skippr:gap-2",
+        children: [
+          /* @__PURE__ */ jsxDEV3(Button, {
+            size: "icon-sm",
+            variant: isMuted ? "destructive" : "outline",
+            onClick: toggleMute,
+            "aria-label": isMuted ? "Unmute" : "Mute",
+            children: isMuted ? /* @__PURE__ */ jsxDEV3(MicOff, {
+              className: "skippr:size-4"
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3(Mic, {
+              className: "skippr:size-4"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(Button, {
+            size: "icon-sm",
+            variant: isScreenSharing ? "default" : "outline",
+            onClick: toggleScreenShare,
+            "aria-label": isScreenSharing ? "Stop sharing" : "Share screen",
+            children: isScreenSharing ? /* @__PURE__ */ jsxDEV3(MonitorOff, {
+              className: "skippr:size-4"
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3(Monitor, {
+              className: "skippr:size-4"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("span", {
+        className: "skippr:text-sm skippr:font-medium skippr:tabular-nums skippr:text-muted-foreground",
+        children: formatTime(elapsed)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3(Button, {
+        size: "icon-sm",
+        variant: "destructive",
+        onClick: onHangUp,
+        "aria-label": "Hang up",
+        children: /* @__PURE__ */ jsxDEV3(PhoneOff, {
+          className: "skippr:size-4"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/MessageList.tsx
+import { useCallback as useCallback5 } from "react";
+
+// src/components/ChatMessage.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function ChatMessage({ message }) {
+  const isUser = message.role === "user";
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: cn("skippr:flex skippr:w-full skippr:px-4 skippr:py-1", isUser ? "skippr:justify-end" : "skippr:justify-start"),
+    children: /* @__PURE__ */ jsxDEV4("div", {
+      className: cn("skippr:max-w-[85%] skippr:whitespace-pre-wrap skippr:rounded-2xl skippr:px-4 skippr:py-2.5 skippr:text-sm skippr:leading-relaxed", isUser ? "skippr:rounded-br-sm skippr:bg-primary skippr:text-primary-foreground" : "skippr:rounded-bl-sm skippr:bg-muted skippr:text-foreground"),
+      children: message.content
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/TypingIndicator.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function TypingIndicator() {
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "skippr:flex skippr:items-center skippr:gap-1 skippr:px-4 skippr:py-3",
+    children: /* @__PURE__ */ jsxDEV5("div", {
+      className: "skippr:flex skippr:items-center skippr:gap-1 skippr:rounded-2xl skippr:rounded-bl-sm skippr:bg-muted skippr:px-4 skippr:py-2.5",
+      children: [
+        /* @__PURE__ */ jsxDEV5("span", {
+          className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:0ms]"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV5("span", {
+          className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:150ms]"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV5("span", {
+          className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:300ms]"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/MessageList.tsx
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function MessageList({ messages, isStreaming }) {
+  const scrollRef = useCallback5((node) => {
+    node?.scrollIntoView({ behavior: "smooth" });
+  }, []);
+  const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
+  const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "skippr:flex-1 skippr:overflow-y-auto",
+    children: /* @__PURE__ */ jsxDEV6("div", {
+      className: "skippr:flex skippr:flex-col skippr:gap-1 skippr:py-3",
+      children: [
+        messages.map((message) => /* @__PURE__ */ jsxDEV6(ChatMessage, {
+          message
+        }, message.id, false, undefined, this)),
+        showTyping && /* @__PURE__ */ jsxDEV6(TypingIndicator, {}, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV6("div", {
+          ref: scrollRef
+        }, `scroll-${messages.length}`, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/QuickActions.tsx
+import { Loader2, MessageCircleQuestion } from "lucide-react";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+function QuickActions({ onStartSession, isStarting, error }) {
+  return /* @__PURE__ */ jsxDEV7("div", {
+    className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:gap-6 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
+    children: [
+      /* @__PURE__ */ jsxDEV7("p", {
+        className: "skippr:mb-1 skippr:text-sm skippr:text-muted-foreground",
+        children: "How can I help you today?"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV7(Button, {
+        variant: "outline",
+        className: "skippr:h-auto skippr:flex-col skippr:gap-1.5 skippr:whitespace-normal skippr:py-3 skippr:text-xs",
+        onClick: onStartSession,
+        disabled: isStarting,
+        children: [
+          isStarting ? /* @__PURE__ */ jsxDEV7(Loader2, {
+            className: "skippr:size-4 skippr:animate-spin skippr:text-primary"
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV7(MessageCircleQuestion, {
+            className: "skippr:size-4 skippr:text-primary"
+          }, undefined, false, undefined, this),
+          isStarting ? "Starting..." : "Start Session"
+        ]
+      }, undefined, true, undefined, this),
+      error && /* @__PURE__ */ jsxDEV7("p", {
+        className: "skippr:text-xs skippr:text-destructive",
+        children: error
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/SessionAgenda.tsx
+import { Check, Circle, Loader2 as Loader22 } from "lucide-react";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+function SessionAgenda({ phases, questions = [] }) {
+  if (phases.length === 0) {
+    return /* @__PURE__ */ jsxDEV8("div", {
+      className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
+      children: [
+        /* @__PURE__ */ jsxDEV8("h3", {
+          className: "skippr:text-sm skippr:font-semibold",
+          children: "Agenda"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV8("p", {
+          className: "skippr:text-xs skippr:text-muted-foreground",
+          children: "Waiting for session..."
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV8("div", {
+    className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
+    children: [
+      /* @__PURE__ */ jsxDEV8("h3", {
+        className: "skippr:text-sm skippr:font-semibold",
+        children: "Agenda"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV8("ul", {
+        className: "skippr:flex skippr:flex-col skippr:gap-2",
+        children: phases.map((phase) => {
+          const phaseQuestions = questions.filter((q) => q.phaseName === phase.name);
+          const answeredCount = phaseQuestions.filter((q) => q.status === "answered").length;
+          const totalCount = phaseQuestions.length;
+          return /* @__PURE__ */ jsxDEV8("li", {
+            className: "skippr:flex skippr:flex-col skippr:gap-0.5",
+            children: [
+              /* @__PURE__ */ jsxDEV8("div", {
+                className: "skippr:flex skippr:items-center skippr:gap-2 skippr:text-sm",
+                children: [
+                  /* @__PURE__ */ jsxDEV8(PhaseIcon, {
+                    status: phase.status
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV8("span", {
+                    className: cn(phase.status === "completed" && "skippr:text-muted-foreground skippr:line-through", phase.status === "active" && "skippr:font-medium skippr:text-primary"),
+                    children: phase.name
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              totalCount > 0 && /* @__PURE__ */ jsxDEV8("span", {
+                className: "skippr:ml-6 skippr:text-xs skippr:text-muted-foreground",
+                children: [
+                  answeredCount,
+                  "/",
+                  totalCount,
+                  " answered"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, phase.name, true, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function PhaseIcon({ status }) {
+  if (status === "completed") {
+    return /* @__PURE__ */ jsxDEV8("div", {
+      className: "skippr:flex skippr:size-4 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-full skippr:bg-primary",
+      children: /* @__PURE__ */ jsxDEV8(Check, {
+        className: "skippr:size-2.5 skippr:text-primary-foreground",
+        strokeWidth: 3
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  if (status === "active") {
+    return /* @__PURE__ */ jsxDEV8(Loader22, {
+      className: "skippr:size-4 skippr:shrink-0 skippr:text-primary skippr:animate-spin"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV8(Circle, {
+    className: "skippr:size-4 skippr:shrink-0 skippr:text-muted-foreground"
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Sidebar.tsx
+import { jsxDEV as jsxDEV9, Fragment } from "react/jsx-dev-runtime";
+function Sidebar() {
+  const { isConnected, isStarting, error, startSession, disconnect, isPanelOpen, closePanel } = useLiveAgent();
+  useEffect3(() => {
+    document.body.style.transition = "margin-right 300ms ease-in-out";
+    document.body.style.marginRight = isPanelOpen ? `${SIDEBAR_WIDTH}px` : "0px";
+  }, [isPanelOpen]);
+  useEffect3(() => {
+    return () => {
+      document.body.style.marginRight = "";
+      document.body.style.transition = "";
+    };
+  }, []);
+  return /* @__PURE__ */ jsxDEV9("div", {
+    className: cn("skippr:fixed skippr:top-0 skippr:right-0 skippr:h-full skippr:z-[9999]", "skippr:bg-background skippr:border-l skippr:border-border", "skippr:flex skippr:flex-col", "skippr:transition-all skippr:duration-300 skippr:ease-in-out skippr:overflow-hidden", !isPanelOpen && "skippr:w-0 skippr:border-l-0"),
+    style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
+    children: isConnected ? /* @__PURE__ */ jsxDEV9(Fragment, {
+      children: [
+        /* @__PURE__ */ jsxDEV9(ChatHeader, {
+          onClose: closePanel
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV9(ConnectedContent, {
+          onDisconnect: disconnect
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV9(Fragment, {
+      children: [
+        /* @__PURE__ */ jsxDEV9(ChatHeader, {
+          onClose: closePanel
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV9(QuickActions, {
+          onStartSession: startSession,
+          isStarting,
+          error
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function ConnectedContent({ onDisconnect }) {
+  const connectionState = useConnectionState();
+  const isConnected = connectionState === ConnectionState.Connected;
+  const { messages, agentState } = useTranscriptMessages();
+  const { phases } = usePhaseUpdates();
+  const { questions } = useQuestionUpdates();
+  if (!isConnected) {
+    return /* @__PURE__ */ jsxDEV9("div", {
+      className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
+      children: /* @__PURE__ */ jsxDEV9("p", {
+        className: "skippr:text-sm skippr:text-muted-foreground",
+        children: "Connecting..."
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const isAgentSpeaking = agentState === "speaking";
+  return /* @__PURE__ */ jsxDEV9(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxDEV9(MeetingControls, {
+        onHangUp: onDisconnect
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "skippr:flex skippr:min-h-0 skippr:flex-1",
+        children: [
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "skippr:w-[260px] skippr:shrink-0 skippr:overflow-y-auto skippr:border-r",
+            children: /* @__PURE__ */ jsxDEV9(SessionAgenda, {
+              phases,
+              questions
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "skippr:flex skippr:min-w-0 skippr:flex-1 skippr:flex-col",
+            children: /* @__PURE__ */ jsxDEV9(MessageList, {
+              messages,
+              isStreaming: isAgentSpeaking
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/SidebarTrigger.tsx
+import { MessageCircle, X as X2 } from "lucide-react";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+var TRIGGER_GAP = 16;
+var TRIGGER_DEFAULT_RIGHT = 24;
+function SidebarTrigger() {
+  const { isPanelOpen, togglePanel } = useLiveAgent();
+  return /* @__PURE__ */ jsxDEV10(Button, {
+    size: "icon-lg",
+    onClick: togglePanel,
+    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__ */ jsxDEV10(X2, {
+      className: "skippr:size-6"
+    }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV10(MessageCircle, {
+      className: "skippr:size-6"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/LiveAgent.tsx
+import { jsxDEV as jsxDEV11, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+function LiveAgent({
+  organizationId,
+  agentId,
+  defaultOpen = false,
+  children
+}) {
+  const { connection, shouldConnect, isStarting, error, startSession, disconnect } = useSession({
+    organizationId,
+    agentId
+  });
+  const [isPanelOpen, setIsPanelOpen] = useState4(defaultOpen);
+  const openPanel = useCallback6(() => setIsPanelOpen(true), []);
+  const closePanel = useCallback6(() => setIsPanelOpen(false), []);
+  const togglePanel = useCallback6(() => setIsPanelOpen((prev) => !prev), []);
+  const isConnected = connection !== null;
+  const ctx = useMemo2(() => ({
+    connection,
+    shouldConnect,
+    isConnected,
+    isStarting,
+    error,
+    startSession,
+    disconnect,
+    isPanelOpen,
+    openPanel,
+    closePanel,
+    togglePanel
+  }), [
+    connection,
+    shouldConnect,
+    isConnected,
+    isStarting,
+    error,
+    startSession,
+    disconnect,
+    isPanelOpen,
+    openPanel,
+    closePanel,
+    togglePanel
+  ]);
+  const widgetContent = /* @__PURE__ */ jsxDEV11(Fragment2, {
+    children: [
+      connection && /* @__PURE__ */ jsxDEV11(RoomAudioRenderer, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV11(SidebarTrigger, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV11(Sidebar, {}, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+  return /* @__PURE__ */ jsxDEV11(LiveAgentContext.Provider, {
+    value: ctx,
+    children: connection ? /* @__PURE__ */ jsxDEV11(LiveKitRoom, {
+      serverUrl: connection.livekitUrl,
+      token: connection.token,
+      connect: shouldConnect,
+      audio: true,
+      onDisconnected: disconnect,
+      children: widgetContent
+    }, undefined, false, undefined, this) : widgetContent
+  }, undefined, false, undefined, this);
+}
 export {
   useLiveAgent,
   LiveAgent

package/dist/types/lib-exports.d.ts

@@ -1,2 +1,2 @@
-export { LiveAgent } from './components/LiveAgent';
-export { useLiveAgent } from './hooks/useLiveAgent';
+export * from './components/LiveAgent';
+export * from './hooks/useLiveAgent';

package/package.json

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