@skippr/live-agent-sdk 0.15.0 → 0.17.0

package/dist/esm/lib-exports.js

@@ -1,6 +1,6 @@
 // src/components/LiveAgent.tsx
 import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
-import { useCallback as useCallback7, useMemo as useMemo4, useState as useState7 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo4, useState as useState8 } from "react";
 
 // src/context/LiveAgentContext.tsx
 import { createContext } from "react";
@@ -145,17 +145,21 @@ function useAuth({ appKey }) {
 }
 
 // src/hooks/useSession.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
 var API_URL2 = "https://skipprapi-production.up.railway.app";
-function resolveAuthHeaders(authToken, appKey, userToken) {
-  const headers = {};
-  if (authToken)
-    headers.Authorization = `Bearer ${authToken}`;
-  if (appKey)
-    headers["X-App-Key"] = appKey;
-  if (userToken)
-    headers["X-User-Token"] = userToken;
-  return headers;
+async function exchangeForBearerToken(appKey, userToken) {
+  const resp = await fetch(`${API_URL2}/v1/auth/token-exchange`, {
+    method: "POST",
+    headers: {
+      "X-App-Key": appKey,
+      "X-User-Token": userToken
+    }
+  });
+  if (!resp.ok) {
+    throw new Error(`Token exchange failed: ${resp.status}`);
+  }
+  const { token } = await resp.json();
+  return token;
 }
 function useSession({ agentId, authToken, appKey, userToken }) {
   const [connection, setConnection] = useState2(null);
@@ -163,32 +167,53 @@ function useSession({ agentId, authToken, appKey, userToken }) {
   const [isStarting, setIsStarting] = useState2(false);
   const [error, setError] = useState2("");
   const [sessionId, setSessionId] = useState2(null);
-  const [sessionToken, setSessionToken] = useState2(null);
+  const [bearerToken, setBearerToken] = useState2(authToken ?? null);
+  useEffect2(() => {
+    let stale = false;
+    if (authToken) {
+      setBearerToken(authToken);
+      return;
+    }
+    if (appKey && userToken) {
+      exchangeForBearerToken(appKey, userToken).then((token) => {
+        if (!stale)
+          setBearerToken(token);
+      }).catch((e) => {
+        if (!stale)
+          setError(e instanceof Error ? e.message : "Token exchange failed");
+      });
+    }
+    return () => {
+      stale = true;
+    };
+  }, [authToken, appKey, userToken]);
   const startSession = useCallback2(async () => {
+    if (!bearerToken) {
+      setError("No auth token available");
+      return;
+    }
+    const headers = { Authorization: `Bearer ${bearerToken}` };
     setIsStarting(true);
     setError("");
     try {
-      const authHeaders = resolveAuthHeaders(authToken, appKey, userToken);
       const createResp = await fetch(`${API_URL2}/v1/sessions`, {
         method: "POST",
-        headers: { "Content-Type": "application/json", ...authHeaders },
+        headers: { "Content-Type": "application/json", ...headers },
         body: JSON.stringify({ agentId })
       });
       if (!createResp.ok) {
         throw new Error(`Failed to create session: ${createResp.status}`);
       }
       const { session } = await createResp.json();
-      const sessionHeaders = { "X-Session-Token": session.sessionToken };
       const startResp = await fetch(`${API_URL2}/v1/sessions/${session.id}/start`, {
         method: "POST",
-        headers: sessionHeaders
+        headers
       });
       if (!startResp.ok) {
         throw new Error(`Failed to start session: ${startResp.status}`);
       }
       const { connection: conn } = await startResp.json();
       setSessionId(session.id);
-      setSessionToken(session.sessionToken);
       setConnection({
         livekitUrl: conn.livekitUrl,
         token: conn.token
@@ -199,14 +224,13 @@ function useSession({ agentId, authToken, appKey, userToken }) {
     } finally {
       setIsStarting(false);
     }
-  }, [agentId, authToken, appKey, userToken]);
+  }, [agentId, bearerToken]);
   const disconnect = useCallback2(async () => {
-    if (sessionId && sessionToken) {
-      const sessionHeaders = { "X-Session-Token": sessionToken };
+    if (sessionId && bearerToken) {
       try {
         await fetch(`${API_URL2}/v1/sessions/${sessionId}/complete`, {
           method: "POST",
-          headers: { "Content-Type": "application/json", ...sessionHeaders },
+          headers: { "Content-Type": "application/json", Authorization: `Bearer ${bearerToken}` },
           body: JSON.stringify({})
         });
       } catch {}
@@ -215,193 +239,13 @@ function useSession({ agentId, authToken, appKey, userToken }) {
     setShouldConnect(false);
     setConnection(null);
     setSessionId(null);
-    setSessionToken(null);
-  }, [sessionId, sessionToken]);
+  }, [sessionId, bearerToken]);
   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 useEffect6 } from "react";
-
-// src/hooks/useCombinedMessages.ts
-import { useVoiceAssistant } from "@livekit/components-react";
-import { useMemo as useMemo3 } from "react";
-
-// src/hooks/useChatMessages.ts
-import { useChat, useLocalParticipant } from "@livekit/components-react";
-import { useMemo } from "react";
-
-// src/lib/filterSystemMessages.ts
-var SYSTEM_MESSAGE_PATTERN = /^\[\w+\]$/;
-function filterSystemMessages(messages) {
-  return messages.filter((m) => !SYSTEM_MESSAGE_PATTERN.test(m.content.trim()));
-}
-
-// src/hooks/useChatMessages.ts
-function useChatMessages() {
-  const { chatMessages: rawMessages, send, isSending } = useChat();
-  const { localParticipant } = useLocalParticipant();
-  const localIdentity = localParticipant.identity;
-  const chatMessages = useMemo(() => {
-    const sortedMessages = rawMessages.map((msg) => ({
-      id: msg.id,
-      role: msg.from?.identity === localIdentity ? "user" : "assistant",
-      content: msg.message,
-      source: "chat",
-      timestamp: msg.timestamp
-    })).sort((a, b) => (a.timestamp ?? 0) - (b.timestamp ?? 0));
-    return filterSystemMessages(sortedMessages);
-  }, [rawMessages, localIdentity]);
-  return { chatMessages, sendChatMessage: send, isSendingChat: isSending };
-}
-
-// src/hooks/useStreamingTranscript.ts
-import { useLocalParticipant as useLocalParticipant2, useTranscriptions } from "@livekit/components-react";
-import { useMemo as useMemo2 } from "react";
-function useStreamingTranscript() {
-  const transcriptions = useTranscriptions();
-  const { localParticipant } = useLocalParticipant2();
-  const localIdentity = localParticipant.identity;
-  const transcriptMessages = useMemo2(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).map((stream) => ({
-    id: stream.streamInfo.id,
-    role: stream.participantInfo.identity === localIdentity ? "user" : "assistant",
-    content: stream.text,
-    source: "voice-transcript",
-    timestamp: stream.streamInfo.timestamp
-  }))), [transcriptions, localIdentity]);
-  return { transcriptMessages };
-}
-
-// src/hooks/useCombinedMessages.ts
-function mergeChatsIntoTranscripts(transcripts, chats) {
-  const merged = [];
-  let chatIndex = 0;
-  for (const transcript of transcripts) {
-    while (chatIndex < chats.length && (chats[chatIndex].timestamp ?? 0) <= (transcript.timestamp ?? 0)) {
-      merged.push(chats[chatIndex]);
-      chatIndex++;
-    }
-    merged.push(transcript);
-  }
-  while (chatIndex < chats.length) {
-    merged.push(chats[chatIndex]);
-    chatIndex++;
-  }
-  return merged;
-}
-function useCombinedMessages() {
-  const { transcriptMessages } = useStreamingTranscript();
-  const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
-  const { state: agentState } = useVoiceAssistant();
-  const allMessages = useMemo3(() => {
-    if (chatMessages.length === 0)
-      return transcriptMessages;
-    if (transcriptMessages.length === 0)
-      return chatMessages;
-    return mergeChatsIntoTranscripts(transcriptMessages, chatMessages);
-  }, [transcriptMessages, chatMessages]);
-  return { allMessages, agentState, sendChatMessage, isSendingChat };
-}
-
-// 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 useCallback3 } from "react";
-
-// src/hooks/useAgentState.ts
-import { useRemoteParticipants } from "@livekit/components-react";
-import { useEffect as useEffect2, useState as useState3 } from "react";
-function useAgentState(attributeKey, parse, initial) {
-  const [value, setValue] = useState3(initial);
-  const remoteParticipants = useRemoteParticipants();
-  useEffect2(() => {
-    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 = useCallback3(parsePhases, []);
-  const phases = useAgentState("phases", parse, []);
-  return { phases };
-}
-
-// src/hooks/useQuestionUpdates.ts
-import { useCallback as useCallback4 } 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 = useCallback4(parseQuestions, []);
-  const questions = useAgentState("questions", parse, []);
-  return { questions };
-}
-
-// 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/MinimizedBubble.tsx
+import { useLocalParticipant, useVoiceAssistant } from "@livekit/components-react";
+import { ScreenSharePresets } from "livekit-client";
 // ../../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";
 
@@ -501,112 +345,471 @@ var __iconNode2 = [
   ["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
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-left.js
 var __iconNode3 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }]
+];
+var PanelLeft = createLucideIcon("panel-left", __iconNode3);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send-horizontal.js
+var __iconNode4 = [
   [
     "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/mail.js
-var __iconNode7 = [
-  ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
-  ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
-];
-var Mail = createLucideIcon("mail", __iconNode7);
-// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle.js
-var __iconNode8 = [
-  [
-    "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: "M6 12h16", key: "s4cdu5" }]
+];
+var SendHorizontal = createLucideIcon("send-horizontal", __iconNode4);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/arrow-left.js
+var __iconNode5 = [
+  ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
+  ["path", { d: "M19 12H5", key: "x3x0zl" }]
+];
+var ArrowLeft = createLucideIcon("arrow-left", __iconNode5);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/bot.js
+var __iconNode6 = [
+  ["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", __iconNode6);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/check.js
+var __iconNode7 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+var Check = createLucideIcon("check", __iconNode7);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle.js
+var __iconNode8 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+var Circle = createLucideIcon("circle", __iconNode8);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mail.js
+var __iconNode9 = [
+  ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
+  ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
+];
+var Mail = createLucideIcon("mail", __iconNode9);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle.js
+var __iconNode10 = [
+  [
+    "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", __iconNode10);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic-off.js
+var __iconNode11 = [
+  ["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", __iconNode11);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic.js
+var __iconNode12 = [
+  ["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", __iconNode12);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/minimize-2.js
+var __iconNode13 = [
+  ["path", { d: "m14 10 7-7", key: "oa77jy" }],
+  ["path", { d: "M20 10h-6V4", key: "mjg0md" }],
+  ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
+  ["path", { d: "M4 14h6v6", key: "rmj7iw" }]
+];
+var Minimize2 = createLucideIcon("minimize-2", __iconNode13);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor-off.js
+var __iconNode14 = [
+  ["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", __iconNode14);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.js
+var __iconNode15 = [
+  ["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", __iconNode15);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-right.js
+var __iconNode16 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M15 3v18", key: "14nvp0" }]
+];
+var PanelRight = createLucideIcon("panel-right", __iconNode16);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
+var __iconNode17 = [
+  [
+    "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", __iconNode17);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/settings.js
+var __iconNode18 = [
+  [
+    "path",
+    {
+      d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
+      key: "1i5ecw"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+];
+var Settings = createLucideIcon("settings", __iconNode18);
+// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
+var __iconNode19 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+var X = createLucideIcon("x", __iconNode19);
+// src/components/MinimizedBubble.tsx
+import { useCallback as useCallback3 } 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/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/MinimizedBubble.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function AgentAvatar({ agentState }) {
+  if (agentState === "speaking") {
+    return /* @__PURE__ */ jsxs("div", {
+      className: "skippr:flex skippr:items-end skippr:justify-center skippr:gap-[3px] skippr:h-5",
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          className: "skippr:w-[3px] skippr:h-full skippr:rounded-full skippr:bg-primary-foreground skippr:origin-bottom skippr:animate-skippr-bar-1"
+        }),
+        /* @__PURE__ */ jsx("span", {
+          className: "skippr:w-[3px] skippr:h-full skippr:rounded-full skippr:bg-primary-foreground skippr:origin-bottom skippr:animate-skippr-bar-2"
+        }),
+        /* @__PURE__ */ jsx("span", {
+          className: "skippr:w-[3px] skippr:h-full skippr:rounded-full skippr:bg-primary-foreground skippr:origin-bottom skippr:animate-skippr-bar-3"
+        }),
+        /* @__PURE__ */ jsx("span", {
+          className: "skippr:w-[3px] skippr:h-full skippr:rounded-full skippr:bg-primary-foreground skippr:origin-bottom skippr:animate-skippr-bar-4"
+        })
+      ]
+    });
+  }
+  if (agentState === "listening") {
+    return /* @__PURE__ */ jsx(Bot, {
+      className: "skippr:relative skippr:z-10 skippr:size-5 skippr:animate-skippr-breathe"
+    });
+  }
+  if (agentState === "thinking") {
+    return /* @__PURE__ */ jsx(Bot, {
+      className: "skippr:relative skippr:z-10 skippr:size-5 skippr:animate-pulse"
+    });
+  }
+  return /* @__PURE__ */ jsx(Bot, {
+    className: "skippr:relative skippr:z-10 skippr:size-5"
+  });
+}
+function MinimizedBubble() {
+  const { expandPanel, disconnect, position } = useLiveAgent();
+  const { state: agentState } = useVoiceAssistant();
+  const { localParticipant } = useLocalParticipant();
+  const isMuted = !localParticipant.isMicrophoneEnabled;
+  const isScreenSharing = localParticipant.isScreenShareEnabled;
+  const toggleMute = useCallback3(async () => {
+    try {
+      await localParticipant.setMicrophoneEnabled(isMuted);
+    } catch (e) {
+      console.error("Failed to toggle microphone:", e);
+    }
+  }, [localParticipant, isMuted]);
+  const toggleScreenShare = useCallback3(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]);
+  const handleHangUp = useCallback3(async () => {
+    await disconnect();
+  }, [disconnect]);
+  const isSpeaking = agentState === "speaking";
+  const isListening = agentState === "listening";
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-0", "skippr:rounded-full skippr:bg-card skippr:shadow-2xl", "skippr:border skippr:border-border", "skippr:p-1.5", position === "right" ? "skippr:right-6" : "skippr:left-6"),
+    children: [
+      /* @__PURE__ */ jsxs("button", {
+        type: "button",
+        onClick: expandPanel,
+        className: cn("skippr:relative skippr:size-11 skippr:rounded-full", "skippr:bg-primary skippr:text-primary-foreground", "skippr:flex skippr:items-center skippr:justify-center", "skippr:cursor-pointer skippr:transition-all skippr:duration-300", "skippr:hover:brightness-110", isListening && "skippr:animate-skippr-pulse-ring"),
+        "aria-label": "Expand meeting panel",
+        children: [
+          isSpeaking && /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: "skippr:absolute skippr:inset-0 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-speak-ripple"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "skippr:absolute skippr:inset-0 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-speak-ripple-delayed"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx(AgentAvatar, {
+            agentState
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "skippr:mx-1 skippr:h-6 skippr:w-px skippr:bg-border"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "skippr:flex skippr:items-center skippr:gap-1",
+        children: [
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            onClick: toggleMute,
+            className: cn("skippr:size-9 skippr:rounded-full skippr:flex skippr:items-center skippr:justify-center", "skippr:transition-colors skippr:cursor-pointer", isMuted ? "skippr:bg-destructive skippr:text-white" : "skippr:text-foreground skippr:hover:bg-accent"),
+            "aria-label": isMuted ? "Unmute" : "Mute",
+            children: isMuted ? /* @__PURE__ */ jsx(MicOff, {
+              className: "skippr:size-4"
+            }) : /* @__PURE__ */ jsx(Mic, {
+              className: "skippr:size-4"
+            })
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            onClick: toggleScreenShare,
+            className: cn("skippr:size-9 skippr:rounded-full skippr:flex skippr:items-center skippr:justify-center", "skippr:transition-colors skippr:cursor-pointer", isScreenSharing ? "skippr:text-foreground skippr:hover:bg-accent" : "skippr:bg-destructive skippr:text-white"),
+            "aria-label": isScreenSharing ? "Stop sharing" : "Share screen",
+            children: isScreenSharing ? /* @__PURE__ */ jsx(MonitorOff, {
+              className: "skippr:size-4"
+            }) : /* @__PURE__ */ jsx(Monitor, {
+              className: "skippr:size-4"
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "skippr:mx-1 skippr:h-6 skippr:w-px skippr:bg-border"
+      }),
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
+        onClick: handleHangUp,
+        className: "skippr:size-9 skippr:rounded-full skippr:flex skippr:items-center skippr:justify-center skippr:bg-destructive skippr:text-white skippr:cursor-pointer skippr:transition-colors skippr:hover:bg-destructive/90",
+        "aria-label": "Hang up",
+        children: /* @__PURE__ */ jsx(PhoneOff, {
+          className: "skippr:size-4"
+        })
+      })
+    ]
+  });
+}
+
+// src/components/Sidebar.tsx
+import { useConnectionState } from "@livekit/components-react";
+import { ConnectionState } from "livekit-client";
+import { useEffect as useEffect7, useState as useState7 } from "react";
+
+// src/hooks/useCombinedMessages.ts
+import { useVoiceAssistant as useVoiceAssistant2 } from "@livekit/components-react";
+import { useMemo as useMemo3 } from "react";
+
+// src/hooks/useChatMessages.ts
+import { useChat, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react";
+import { useMemo } from "react";
+
+// src/lib/filterSystemMessages.ts
+var SYSTEM_MESSAGE_PATTERN = /^\[\w+\]$/;
+function filterSystemMessages(messages) {
+  return messages.filter((m) => !SYSTEM_MESSAGE_PATTERN.test(m.content.trim()));
+}
+
+// src/hooks/useChatMessages.ts
+function useChatMessages() {
+  const { chatMessages: rawMessages, send, isSending } = useChat();
+  const { localParticipant } = useLocalParticipant2();
+  const localIdentity = localParticipant.identity;
+  const chatMessages = useMemo(() => {
+    const sortedMessages = rawMessages.map((msg) => ({
+      id: msg.id,
+      role: msg.from?.identity === localIdentity ? "user" : "assistant",
+      content: msg.message,
+      source: "chat",
+      timestamp: msg.timestamp
+    })).sort((a, b) => (a.timestamp ?? 0) - (b.timestamp ?? 0));
+    return filterSystemMessages(sortedMessages);
+  }, [rawMessages, localIdentity]);
+  return { chatMessages, sendChatMessage: send, isSendingChat: isSending };
+}
+
+// src/hooks/useStreamingTranscript.ts
+import { useLocalParticipant as useLocalParticipant3, useTranscriptions } from "@livekit/components-react";
+import { useMemo as useMemo2 } from "react";
+function useStreamingTranscript() {
+  const transcriptions = useTranscriptions();
+  const { localParticipant } = useLocalParticipant3();
+  const localIdentity = localParticipant.identity;
+  const transcriptMessages = useMemo2(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).map((stream) => ({
+    id: stream.streamInfo.id,
+    role: stream.participantInfo.identity === localIdentity ? "user" : "assistant",
+    content: stream.text,
+    source: "voice-transcript",
+    timestamp: stream.streamInfo.timestamp
+  }))), [transcriptions, localIdentity]);
+  return { transcriptMessages };
+}
+
+// src/hooks/useCombinedMessages.ts
+function mergeChatsIntoTranscripts(transcripts, chats) {
+  const merged = [];
+  let chatIndex = 0;
+  for (const transcript of transcripts) {
+    while (chatIndex < chats.length && (chats[chatIndex].timestamp ?? 0) <= (transcript.timestamp ?? 0)) {
+      merged.push(chats[chatIndex]);
+      chatIndex++;
+    }
+    merged.push(transcript);
+  }
+  while (chatIndex < chats.length) {
+    merged.push(chats[chatIndex]);
+    chatIndex++;
+  }
+  return merged;
+}
+function useCombinedMessages() {
+  const { transcriptMessages } = useStreamingTranscript();
+  const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
+  const { state: agentState } = useVoiceAssistant2();
+  const allMessages = useMemo3(() => {
+    if (chatMessages.length === 0)
+      return transcriptMessages;
+    if (transcriptMessages.length === 0)
+      return chatMessages;
+    return mergeChatsIntoTranscripts(transcriptMessages, chatMessages);
+  }, [transcriptMessages, chatMessages]);
+  return { allMessages, agentState, sendChatMessage, isSendingChat };
+}
+
+// src/hooks/usePhaseUpdates.ts
+import { useCallback as useCallback4 } from "react";
+
+// src/hooks/useAgentState.ts
+import { useRemoteParticipants } from "@livekit/components-react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+function useAgentState(attributeKey, parse, initial) {
+  const [value, setValue] = useState3(initial);
+  const remoteParticipants = useRemoteParticipants();
+  useEffect3(() => {
+    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);
     }
-  ]
-];
-var MessageCircle = createLucideIcon("message-circle", __iconNode8);
-// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic-off.js
-var __iconNode9 = [
-  ["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", __iconNode9);
-// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic.js
-var __iconNode10 = [
-  ["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", __iconNode10);
-// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor-off.js
-var __iconNode11 = [
-  ["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", __iconNode11);
-// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.js
-var __iconNode12 = [
-  ["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", __iconNode12);
-// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
-var __iconNode13 = [
-  [
-    "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"
+    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;
     }
-  ],
-  ["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"
+  } catch {}
+  return null;
+}
+function usePhaseUpdates() {
+  const parse = useCallback4(parsePhases, []);
+  const phases = useAgentState("phases", parse, []);
+  return { phases };
+}
+
+// src/hooks/useQuestionUpdates.ts
+import { useCallback as useCallback5 } from "react";
+function parseQuestions(json) {
+  try {
+    const data = JSON.parse(json);
+    if (data.type === "question_update" && Array.isArray(data.questions)) {
+      return data.questions;
     }
-  ]
-];
-var PhoneOff = createLucideIcon("phone-off", __iconNode13);
-// ../../node_modules/.bun/lucide-react@0.563.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode14 = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-];
-var X = createLucideIcon("x", __iconNode14);
+  } catch {}
+  return null;
+}
+function useQuestionUpdates() {
+  const parse = useCallback5(parseQuestions, []);
+  const questions = useAgentState("questions", parse, []);
+  return { questions };
+}
+
+// src/lib/constants.ts
+var SIDEBAR_WIDTH = 480;
+
 // src/components/ui/button.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-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",
@@ -625,7 +828,7 @@ var sizeClasses = {
   "icon-lg": "skippr:size-10"
 };
 var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
-  return /* @__PURE__ */ jsx("button", {
+  return /* @__PURE__ */ jsx2("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
@@ -634,61 +837,88 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
 Button.displayName = "Button";
 
 // src/components/ChatHeader.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function ChatHeader({ onClose }) {
-  return /* @__PURE__ */ jsxs("div", {
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChatHeader({ onOpenSettings }) {
+  const { closePanel, minimizePanel, minimizable, isConnected } = useLiveAgent();
+  return /* @__PURE__ */ jsxs2("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__ */ jsx2("div", {
+      /* @__PURE__ */ jsx3("div", {
         className: "skippr:flex skippr:size-6 skippr:items-center skippr:justify-center skippr:rounded-full skippr:bg-primary-foreground/20",
-        children: /* @__PURE__ */ jsx2(Bot, {
+        children: /* @__PURE__ */ jsx3(Bot, {
           className: "skippr:size-3.5 skippr:text-primary-foreground"
         })
       }),
-      /* @__PURE__ */ jsx2("div", {
+      /* @__PURE__ */ jsx3("div", {
         className: "skippr:flex-1",
-        children: /* @__PURE__ */ jsx2("p", {
+        children: /* @__PURE__ */ jsx3("p", {
           className: "skippr:text-sm skippr:font-semibold skippr:leading-none",
           children: "AI Agent"
         })
       }),
-      /* @__PURE__ */ jsx2(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__ */ jsx2(X, {
-          className: "skippr:size-4"
-        })
+      /* @__PURE__ */ jsxs2("div", {
+        className: "skippr:flex skippr:items-center skippr:gap-1",
+        children: [
+          /* @__PURE__ */ jsx3(Button, {
+            variant: "ghost",
+            size: "icon-xs",
+            onClick: onOpenSettings,
+            className: "skippr:text-primary-foreground skippr:hover:bg-primary-foreground/20 skippr:hover:text-primary-foreground",
+            "aria-label": "Settings",
+            children: /* @__PURE__ */ jsx3(Settings, {
+              className: "skippr:size-4"
+            })
+          }),
+          minimizable && isConnected && /* @__PURE__ */ jsx3(Button, {
+            variant: "ghost",
+            size: "icon-xs",
+            onClick: minimizePanel,
+            className: "skippr:text-primary-foreground skippr:hover:bg-primary-foreground/20 skippr:hover:text-primary-foreground",
+            "aria-label": "Minimize",
+            children: /* @__PURE__ */ jsx3(Minimize2, {
+              className: "skippr:size-4"
+            })
+          }),
+          /* @__PURE__ */ jsx3(Button, {
+            variant: "ghost",
+            size: "icon-xs",
+            onClick: closePanel,
+            className: "skippr:text-primary-foreground skippr:hover:bg-primary-foreground/20 skippr:hover:text-primary-foreground",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx3(X, {
+              className: "skippr:size-4"
+            })
+          })
+        ]
       })
     ]
   });
 }
 
 // src/components/LoginFlow.tsx
-import { useCallback as useCallback5, useEffect as useEffect3, useRef, useState as useState4 } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect4, useRef, useState as useState4 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var OTP_LENGTH = 6;
 var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
 function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
   const [step, setStep] = useState4("email");
   const [email, setEmail] = useState4("");
-  const handleRequestOtp = useCallback5(async (emailValue) => {
+  const handleRequestOtp = useCallback6(async (emailValue) => {
     const success = await requestOtp(emailValue);
     if (success)
       setStep("otp");
   }, [requestOtp]);
-  const handleVerifyOtp = useCallback5(async (code) => {
+  const handleVerifyOtp = useCallback6(async (code) => {
     await verifyOtp(email, code);
   }, [verifyOtp, email]);
-  const handleBack = useCallback5(() => {
+  const handleBack = useCallback6(() => {
     setStep("email");
   }, []);
-  const handleResend = useCallback5(async () => {
+  const handleResend = useCallback6(async () => {
     await requestOtp(email);
   }, [requestOtp, email]);
   if (step === "otp") {
-    return /* @__PURE__ */ jsx3(OtpStep, {
+    return /* @__PURE__ */ jsx4(OtpStep, {
       email,
       onSubmit: handleVerifyOtp,
       onResend: handleResend,
@@ -697,7 +927,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
       isSubmitting
     });
   }
-  return /* @__PURE__ */ jsx3(EmailStep, {
+  return /* @__PURE__ */ jsx4(EmailStep, {
     email,
     onEmailChange: setEmail,
     onSubmit: handleRequestOtp,
@@ -711,30 +941,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
     if (email.trim())
       onSubmit(email.trim());
   }
-  return /* @__PURE__ */ jsxs2("div", {
+  return /* @__PURE__ */ jsxs3("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsxs2("div", {
+      /* @__PURE__ */ jsxs3("div", {
         className: "skippr:mb-4 skippr:text-center",
         children: [
-          /* @__PURE__ */ jsx3(Mail, {
+          /* @__PURE__ */ jsx4(Mail, {
             className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
           }),
-          /* @__PURE__ */ jsx3("p", {
+          /* @__PURE__ */ jsx4("p", {
             className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
             children: "Sign in to continue"
           }),
-          /* @__PURE__ */ jsx3("p", {
+          /* @__PURE__ */ jsx4("p", {
             className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
             children: "Your email will be used to identify you across sessions"
           })
         ]
       }),
-      /* @__PURE__ */ jsxs2("form", {
+      /* @__PURE__ */ jsxs3("form", {
         onSubmit: handleSubmit,
         className: "skippr:flex skippr:flex-col skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsx3("input", {
+          /* @__PURE__ */ jsx4("input", {
             type: "email",
             placeholder: "you@example.com",
             value: email,
@@ -743,15 +973,15 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
             required: true,
             className: "skippr:w-full skippr:rounded-md skippr:border skippr:border-border skippr:bg-background skippr:px-3 skippr:py-2 skippr:text-sm skippr:text-foreground skippr:placeholder-muted-foreground skippr:outline-none focus:skippr:ring-2 focus:skippr:ring-primary/30 focus:skippr:border-primary disabled:skippr:opacity-50"
           }),
-          /* @__PURE__ */ jsx3(Button, {
+          /* @__PURE__ */ jsx4(Button, {
             type: "submit",
             disabled: isSubmitting || !email.trim(),
             className: "skippr:w-full",
-            children: isSubmitting ? /* @__PURE__ */ jsx3(LoaderCircle, {
+            children: isSubmitting ? /* @__PURE__ */ jsx4(LoaderCircle, {
               className: "skippr:size-4 skippr:animate-spin"
             }) : "Continue"
           }),
-          error && /* @__PURE__ */ jsx3("p", {
+          error && /* @__PURE__ */ jsx4("p", {
             className: "skippr:text-xs skippr:text-center skippr:text-destructive",
             children: error
           })
@@ -765,26 +995,26 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
   const [resendCooldown, setResendCooldown] = useState4(0);
   const inputRefs = useRef([]);
   const submittedRef = useRef(false);
-  useEffect3(() => {
+  useEffect4(() => {
     inputRefs.current[0]?.focus();
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (error)
       submittedRef.current = false;
   }, [error]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (resendCooldown <= 0)
       return;
     const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
     return () => clearTimeout(timer);
   }, [resendCooldown]);
-  const submitCode = useCallback5((code) => {
+  const submitCode = useCallback6((code) => {
     if (submittedRef.current || isSubmitting)
       return;
     submittedRef.current = true;
     onSubmit(code);
   }, [onSubmit, isSubmitting]);
-  const handleDigitChange = useCallback5((index2, value) => {
+  const handleDigitChange = useCallback6((index2, value) => {
     const digit = value.replace(/\D/g, "").slice(-1);
     const newDigits = [...digits];
     newDigits[index2] = digit;
@@ -798,12 +1028,12 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
         submitCode(code);
     }
   }, [digits, submitCode]);
-  const handleKeyDown = useCallback5((index2, e) => {
+  const handleKeyDown = useCallback6((index2, e) => {
     if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
       inputRefs.current[index2 - 1]?.focus();
     }
   }, [digits]);
-  const handlePaste = useCallback5((e) => {
+  const handlePaste = useCallback6((e) => {
     e.preventDefault();
     const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
     if (pasted.length > 0) {
@@ -831,22 +1061,22 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
     submittedRef.current = false;
     inputRefs.current[0]?.focus();
   }
-  return /* @__PURE__ */ jsxs2("div", {
+  return /* @__PURE__ */ jsxs3("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsxs2("div", {
+      /* @__PURE__ */ jsxs3("div", {
         className: "skippr:mb-4 skippr:text-center",
         children: [
-          /* @__PURE__ */ jsx3("p", {
+          /* @__PURE__ */ jsx4("p", {
             className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
             children: "Enter verification code"
           }),
-          /* @__PURE__ */ jsxs2("p", {
+          /* @__PURE__ */ jsxs3("p", {
             className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
             children: [
               "We sent a 6-digit code to",
               " ",
-              /* @__PURE__ */ jsx3("span", {
+              /* @__PURE__ */ jsx4("span", {
                 className: "skippr:font-medium skippr:text-foreground",
                 children: email
               })
@@ -854,13 +1084,13 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs2("form", {
+      /* @__PURE__ */ jsxs3("form", {
         onSubmit: handleSubmit,
         className: "skippr:flex skippr:flex-col skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsx3("div", {
+          /* @__PURE__ */ jsx4("div", {
             className: "skippr:flex skippr:justify-center skippr:gap-1.5",
-            children: digits.map((digit, index2) => /* @__PURE__ */ jsx3("input", {
+            children: digits.map((digit, index2) => /* @__PURE__ */ jsx4("input", {
               ref: (el) => {
                 inputRefs.current[index2] = el;
               },
@@ -875,29 +1105,29 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
               className: "skippr:h-10 skippr:w-10 skippr:rounded-md skippr:border skippr:border-border skippr:bg-background skippr:text-center skippr:text-sm skippr:font-semibold skippr:text-foreground skippr:outline-none focus:skippr:ring-2 focus:skippr:ring-primary/30 focus:skippr:border-primary disabled:skippr:opacity-50"
             }, DIGIT_KEYS[index2]))
           }),
-          error && /* @__PURE__ */ jsx3("p", {
+          error && /* @__PURE__ */ jsx4("p", {
             className: "skippr:text-xs skippr:text-center skippr:text-destructive",
             children: error
           }),
-          /* @__PURE__ */ jsx3(Button, {
+          /* @__PURE__ */ jsx4(Button, {
             type: "submit",
             disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
             className: "skippr:w-full",
-            children: isSubmitting ? /* @__PURE__ */ jsx3(LoaderCircle, {
+            children: isSubmitting ? /* @__PURE__ */ jsx4(LoaderCircle, {
               className: "skippr:size-4 skippr:animate-spin"
             }) : "Verify"
           }),
-          /* @__PURE__ */ jsxs2("div", {
+          /* @__PURE__ */ jsxs3("div", {
             className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
             children: [
-              /* @__PURE__ */ jsx3("button", {
+              /* @__PURE__ */ jsx4("button", {
                 type: "button",
                 onClick: onBack,
                 disabled: isSubmitting,
                 className: "skippr:text-muted-foreground hover:skippr:text-foreground skippr:transition-colors disabled:skippr:opacity-50",
                 children: "Change email"
               }),
-              /* @__PURE__ */ jsx3("button", {
+              /* @__PURE__ */ jsx4("button", {
                 type: "button",
                 onClick: handleResend,
                 disabled: isSubmitting || resendCooldown > 0,
@@ -913,9 +1143,9 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
 }
 
 // src/components/MeetingControls.tsx
-import { useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react";
-import { ScreenSharePresets } from "livekit-client";
-import { useCallback as useCallback6, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+import { useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react";
+import { ScreenSharePresets as ScreenSharePresets2 } from "livekit-client";
+import { useCallback as useCallback7, useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
 
 // src/lib/format.ts
 function formatTime(seconds) {
@@ -929,12 +1159,12 @@ function parseNumber(s) {
 }
 
 // src/components/SessionWarningBanner.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var SESSION_WARNING_THRESHOLD_SECS = 60;
 function SessionWarningBanner({ remaining }) {
   if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
     return null;
-  return /* @__PURE__ */ jsx4("div", {
+  return /* @__PURE__ */ jsx5("div", {
     "data-testid": "session-warning-banner",
     className: "skippr:bg-red-50 skippr:px-4 skippr:py-1.5 skippr:text-center skippr:text-xs skippr:font-medium skippr:text-red-700",
     children: "Session ending soon"
@@ -942,15 +1172,15 @@ function SessionWarningBanner({ remaining }) {
 }
 
 // src/components/MeetingControls.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function MeetingControls({ onHangUp }) {
   const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
-  const { localParticipant } = useLocalParticipant3();
+  const { localParticipant } = useLocalParticipant4();
   const isMuted = !localParticipant.isMicrophoneEnabled;
   const isScreenSharing = localParticipant.isScreenShareEnabled;
   const endTimeRef = useRef2(null);
   const [remaining, setRemaining] = useState5(null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (maxCallDuration === null || endTimeRef.current !== null)
       return;
     endTimeRef.current = Date.now() + maxCallDuration * 1000;
@@ -962,72 +1192,72 @@ function MeetingControls({ onHangUp }) {
     const id = setInterval(tick, 1000);
     return () => clearInterval(id);
   }, [maxCallDuration]);
-  const toggleMute = useCallback6(async () => {
+  const toggleMute = useCallback7(async () => {
     try {
       await localParticipant.setMicrophoneEnabled(isMuted);
     } catch (e) {
       console.error("Failed to toggle microphone:", e);
     }
   }, [localParticipant, isMuted]);
-  const toggleScreenShare = useCallback6(async () => {
+  const toggleScreenShare = useCallback7(async () => {
     try {
       await localParticipant.setScreenShareEnabled(!isScreenSharing, {
         video: { displaySurface: "browser" },
-        resolution: ScreenSharePresets.h720fps30.resolution,
+        resolution: ScreenSharePresets2.h720fps30.resolution,
         contentHint: "detail"
       });
     } catch (e) {
       console.error("Failed to toggle screen share:", e);
     }
   }, [localParticipant, isScreenSharing]);
-  useEffect4(() => {
+  useEffect5(() => {
     toggleMute().then(() => toggleScreenShare());
   }, []);
-  return /* @__PURE__ */ jsxs3("div", {
+  return /* @__PURE__ */ jsxs4("div", {
     children: [
-      /* @__PURE__ */ jsx5(SessionWarningBanner, {
+      /* @__PURE__ */ jsx6(SessionWarningBanner, {
         remaining
       }),
-      /* @__PURE__ */ jsxs3("div", {
+      /* @__PURE__ */ jsxs4("div", {
         className: "skippr:flex skippr:items-center skippr:justify-between skippr:border-b skippr:px-4 skippr:py-3",
         children: [
-          /* @__PURE__ */ jsxs3("div", {
+          /* @__PURE__ */ jsxs4("div", {
             className: "skippr:flex skippr:items-center skippr:gap-2",
             children: [
-              /* @__PURE__ */ jsx5(Button, {
+              /* @__PURE__ */ jsx6(Button, {
                 size: "icon-sm",
                 variant: isMuted ? "destructive" : "outline",
                 onClick: toggleMute,
                 "aria-label": isMuted ? "Unmute" : "Mute",
-                children: isMuted ? /* @__PURE__ */ jsx5(MicOff, {
+                children: isMuted ? /* @__PURE__ */ jsx6(MicOff, {
                   className: "skippr:size-4"
-                }) : /* @__PURE__ */ jsx5(Mic, {
+                }) : /* @__PURE__ */ jsx6(Mic, {
                   className: "skippr:size-4"
                 })
               }),
-              /* @__PURE__ */ jsx5(Button, {
+              /* @__PURE__ */ jsx6(Button, {
                 size: "icon-sm",
-                variant: isScreenSharing ? "default" : "outline",
+                variant: isScreenSharing ? "outline" : "destructive",
                 onClick: toggleScreenShare,
                 "aria-label": isScreenSharing ? "Stop sharing" : "Share screen",
-                children: isScreenSharing ? /* @__PURE__ */ jsx5(MonitorOff, {
+                children: isScreenSharing ? /* @__PURE__ */ jsx6(MonitorOff, {
                   className: "skippr:size-4"
-                }) : /* @__PURE__ */ jsx5(Monitor, {
+                }) : /* @__PURE__ */ jsx6(Monitor, {
                   className: "skippr:size-4"
                 })
               })
             ]
           }),
-          remaining !== null && /* @__PURE__ */ jsx5("span", {
+          remaining !== null && /* @__PURE__ */ jsx6("span", {
             className: cn("skippr:text-sm skippr:font-medium skippr:tabular-nums", remaining <= SESSION_WARNING_THRESHOLD_SECS ? "skippr:text-red-600 skippr:animate-pulse" : "skippr:text-muted-foreground"),
             children: formatTime(remaining)
           }),
-          /* @__PURE__ */ jsx5(Button, {
+          /* @__PURE__ */ jsx6(Button, {
             size: "icon-sm",
             variant: "destructive",
             onClick: onHangUp,
             "aria-label": "Hang up",
-            children: /* @__PURE__ */ jsx5(PhoneOff, {
+            children: /* @__PURE__ */ jsx6(PhoneOff, {
               className: "skippr:size-4"
             })
           })
@@ -1038,11 +1268,11 @@ function MeetingControls({ onHangUp }) {
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useEffect as useEffect6, useRef as useRef3 } from "react";
 
 // src/components/ChatInput.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function ChatInput({ sendChatMessage, isSendingChat }) {
   const [inputText, setInputText] = useState6("");
   const canSend = inputText.trim().length > 0 && !isSendingChat;
@@ -1054,11 +1284,11 @@ function ChatInput({ sendChatMessage, isSendingChat }) {
     setInputText("");
     sendChatMessage(text).catch(() => setInputText(text));
   }
-  return /* @__PURE__ */ jsxs4("form", {
+  return /* @__PURE__ */ jsxs5("form", {
     onSubmit: handleSubmit,
     className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-t skippr:border-border skippr:px-3 skippr:py-2",
     children: [
-      /* @__PURE__ */ jsx6("input", {
+      /* @__PURE__ */ jsx7("input", {
         type: "text",
         value: inputText,
         onChange: (e) => setInputText(e.target.value),
@@ -1066,12 +1296,12 @@ function ChatInput({ sendChatMessage, isSendingChat }) {
         className: cn("skippr:flex-1 skippr:rounded-lg skippr:border skippr:border-border skippr:bg-background", "skippr:px-3 skippr:py-2 skippr:text-sm skippr:text-foreground", "skippr:placeholder:text-muted-foreground skippr:outline-none", "skippr:focus:ring-1 skippr:focus:ring-ring"),
         disabled: isSendingChat
       }),
-      /* @__PURE__ */ jsx6("button", {
+      /* @__PURE__ */ jsx7("button", {
         type: "submit",
         disabled: !canSend,
         "aria-label": "Send message",
         className: cn("skippr:flex skippr:size-9 skippr:shrink-0 skippr:items-center skippr:justify-center", "skippr:rounded-lg skippr:bg-primary skippr:text-primary-foreground", "skippr:transition-opacity", !canSend && "skippr:opacity-50 skippr:cursor-not-allowed"),
-        children: /* @__PURE__ */ jsx6(SendHorizontal, {
+        children: /* @__PURE__ */ jsx7(SendHorizontal, {
           className: "skippr:size-4"
         })
       })
@@ -1080,12 +1310,12 @@ function ChatInput({ sendChatMessage, isSendingChat }) {
 }
 
 // src/components/ChatMessage.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function ChatMessage({ message }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsx7("div", {
+  return /* @__PURE__ */ jsx8("div", {
     className: cn("skippr:flex skippr:w-full skippr:px-4 skippr:py-1", isUser ? "skippr:justify-end" : "skippr:justify-start"),
-    children: /* @__PURE__ */ jsx7("div", {
+    children: /* @__PURE__ */ jsx8("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
     })
@@ -1093,20 +1323,20 @@ function ChatMessage({ message }) {
 }
 
 // src/components/TypingIndicator.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function TypingIndicator() {
-  return /* @__PURE__ */ jsx8("div", {
+  return /* @__PURE__ */ jsx9("div", {
     className: "skippr:flex skippr:items-center skippr:gap-1 skippr:px-4 skippr:py-3",
-    children: /* @__PURE__ */ jsxs5("div", {
+    children: /* @__PURE__ */ jsxs6("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__ */ jsx8("span", {
+        /* @__PURE__ */ jsx9("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:0ms]"
         }),
-        /* @__PURE__ */ jsx8("span", {
+        /* @__PURE__ */ jsx9("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:150ms]"
         }),
-        /* @__PURE__ */ jsx8("span", {
+        /* @__PURE__ */ jsx9("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:300ms]"
         })
       ]
@@ -1115,7 +1345,7 @@ function TypingIndicator() {
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function MessageList({
   messages,
   isStreaming,
@@ -1124,29 +1354,29 @@ function MessageList({
 }) {
   const scrollRef = useRef3(null);
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
-  useEffect5(() => {
+  useEffect6(() => {
     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages.length, lastMessage?.content]);
   const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
     children: [
-      /* @__PURE__ */ jsx9("div", {
+      /* @__PURE__ */ jsx10("div", {
         className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto",
-        children: /* @__PURE__ */ jsxs6("div", {
+        children: /* @__PURE__ */ jsxs7("div", {
           className: "skippr:flex skippr:flex-col skippr:gap-1 skippr:py-3",
           children: [
-            messages.map((message) => /* @__PURE__ */ jsx9(ChatMessage, {
+            messages.map((message) => /* @__PURE__ */ jsx10(ChatMessage, {
               message
             }, message.id)),
-            showTyping && /* @__PURE__ */ jsx9(TypingIndicator, {}),
-            /* @__PURE__ */ jsx9("div", {
+            showTyping && /* @__PURE__ */ jsx10(TypingIndicator, {}),
+            /* @__PURE__ */ jsx10("div", {
               ref: scrollRef
             })
           ]
         })
       }),
-      /* @__PURE__ */ jsx9(ChatInput, {
+      /* @__PURE__ */ jsx10(ChatInput, {
         sendChatMessage,
         isSendingChat
       })
@@ -1155,30 +1385,30 @@ function MessageList({
 }
 
 // src/components/QuickActions.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function QuickActions({ onStartSession, isStarting, error }) {
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs8("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__ */ jsx10("p", {
+      /* @__PURE__ */ jsx11("p", {
         className: "skippr:mb-1 skippr:text-sm skippr:text-muted-foreground",
         children: "How can I help you today?"
       }),
-      /* @__PURE__ */ jsxs7(Button, {
+      /* @__PURE__ */ jsxs8(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__ */ jsx10(LoaderCircle, {
+          isStarting ? /* @__PURE__ */ jsx11(LoaderCircle, {
             className: "skippr:size-4 skippr:animate-spin skippr:text-primary"
-          }) : /* @__PURE__ */ jsx10(MessageCircleQuestionMark, {
+          }) : /* @__PURE__ */ jsx11(MessageCircleQuestionMark, {
             className: "skippr:size-4 skippr:text-primary"
           }),
           isStarting ? "Starting..." : "Start Session"
         ]
       }),
-      error && /* @__PURE__ */ jsx10("p", {
+      error && /* @__PURE__ */ jsx11("p", {
         className: "skippr:text-xs skippr:text-destructive",
         children: error
       })
@@ -1187,52 +1417,52 @@ function QuickActions({ onStartSession, isStarting, error }) {
 }
 
 // src/components/SessionAgenda.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function SessionAgenda({ phases, questions = [] }) {
   if (phases.length === 0) {
-    return /* @__PURE__ */ jsxs8("div", {
+    return /* @__PURE__ */ jsxs9("div", {
       className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
       children: [
-        /* @__PURE__ */ jsx11("h3", {
+        /* @__PURE__ */ jsx12("h3", {
           className: "skippr:text-sm skippr:font-semibold",
           children: "Agenda"
         }),
-        /* @__PURE__ */ jsx11("p", {
+        /* @__PURE__ */ jsx12("p", {
           className: "skippr:text-xs skippr:text-muted-foreground",
           children: "Waiting for session..."
         })
       ]
     });
   }
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs9("div", {
     className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
     children: [
-      /* @__PURE__ */ jsx11("h3", {
+      /* @__PURE__ */ jsx12("h3", {
         className: "skippr:text-sm skippr:font-semibold",
         children: "Agenda"
       }),
-      /* @__PURE__ */ jsx11("ul", {
+      /* @__PURE__ */ jsx12("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__ */ jsxs8("li", {
+          return /* @__PURE__ */ jsxs9("li", {
             className: "skippr:flex skippr:flex-col skippr:gap-0.5",
             children: [
-              /* @__PURE__ */ jsxs8("div", {
+              /* @__PURE__ */ jsxs9("div", {
                 className: "skippr:flex skippr:items-center skippr:gap-2 skippr:text-sm",
                 children: [
-                  /* @__PURE__ */ jsx11(PhaseIcon, {
+                  /* @__PURE__ */ jsx12(PhaseIcon, {
                     status: phase.status
                   }),
-                  /* @__PURE__ */ jsx11("span", {
+                  /* @__PURE__ */ jsx12("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
                   })
                 ]
               }),
-              totalCount > 0 && /* @__PURE__ */ jsxs8("span", {
+              totalCount > 0 && /* @__PURE__ */ jsxs9("span", {
                 className: "skippr:ml-6 skippr:text-xs skippr:text-muted-foreground",
                 children: [
                   answeredCount,
@@ -1250,35 +1480,110 @@ function SessionAgenda({ phases, questions = [] }) {
 }
 function PhaseIcon({ status }) {
   if (status === "completed") {
-    return /* @__PURE__ */ jsx11("div", {
+    return /* @__PURE__ */ jsx12("div", {
       className: "skippr:flex skippr:size-4 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-full skippr:bg-primary",
-      children: /* @__PURE__ */ jsx11(Check, {
+      children: /* @__PURE__ */ jsx12(Check, {
         className: "skippr:size-2.5 skippr:text-primary-foreground",
         strokeWidth: 3
       })
     });
   }
   if (status === "active") {
-    return /* @__PURE__ */ jsx11(LoaderCircle, {
+    return /* @__PURE__ */ jsx12(LoaderCircle, {
       className: "skippr:size-4 skippr:shrink-0 skippr:text-primary skippr:animate-spin"
     });
   }
-  return /* @__PURE__ */ jsx11(Circle, {
+  return /* @__PURE__ */ jsx12(Circle, {
     className: "skippr:size-4 skippr:shrink-0 skippr:text-muted-foreground"
   });
 }
 
+// src/components/SettingsView.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function SettingsView({ onBack }) {
+  const { position, setPosition } = useLiveAgent();
+  return /* @__PURE__ */ jsxs10("div", {
+    className: "skippr:flex skippr:flex-1 skippr:flex-col",
+    children: [
+      /* @__PURE__ */ jsxs10("div", {
+        className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-4 skippr:py-3",
+        children: [
+          /* @__PURE__ */ jsx13(Button, {
+            variant: "ghost",
+            size: "icon-xs",
+            onClick: onBack,
+            "aria-label": "Back",
+            children: /* @__PURE__ */ jsx13(ArrowLeft, {
+              className: "skippr:size-4"
+            })
+          }),
+          /* @__PURE__ */ jsx13("p", {
+            className: "skippr:text-sm skippr:font-semibold",
+            children: "Settings"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx13("div", {
+        className: "skippr:flex-1 skippr:overflow-y-auto skippr:p-4",
+        children: /* @__PURE__ */ jsxs10("div", {
+          className: "skippr:mb-4",
+          children: [
+            /* @__PURE__ */ jsx13("p", {
+              className: "skippr:mb-2 skippr:text-xs skippr:font-medium skippr:uppercase skippr:tracking-wide skippr:text-muted-foreground",
+              children: "Widget Position"
+            }),
+            /* @__PURE__ */ jsxs10("div", {
+              className: "skippr:flex skippr:gap-2",
+              children: [
+                /* @__PURE__ */ jsxs10("button", {
+                  type: "button",
+                  onClick: () => setPosition("left"),
+                  className: cn("skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:gap-2 skippr:rounded-lg skippr:border skippr:p-3 skippr:cursor-pointer skippr:transition-colors", position === "left" ? "skippr:border-primary skippr:bg-primary/5 skippr:text-primary" : "skippr:border-border skippr:text-muted-foreground skippr:hover:border-primary/40"),
+                  children: [
+                    /* @__PURE__ */ jsx13(PanelLeft, {
+                      className: "skippr:size-5"
+                    }),
+                    /* @__PURE__ */ jsx13("span", {
+                      className: "skippr:text-xs skippr:font-medium",
+                      children: "Left"
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxs10("button", {
+                  type: "button",
+                  onClick: () => setPosition("right"),
+                  className: cn("skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:gap-2 skippr:rounded-lg skippr:border skippr:p-3 skippr:cursor-pointer skippr:transition-colors", position === "right" ? "skippr:border-primary skippr:bg-primary/5 skippr:text-primary" : "skippr:border-border skippr:text-muted-foreground skippr:hover:border-primary/40"),
+                  children: [
+                    /* @__PURE__ */ jsx13(PanelRight, {
+                      className: "skippr:size-5"
+                    }),
+                    /* @__PURE__ */ jsx13("span", {
+                      className: "skippr:text-xs skippr:font-medium",
+                      children: "Right"
+                    })
+                  ]
+                })
+              ]
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
+
 // src/components/Sidebar.tsx
-import { jsx as jsx12, jsxs as jsxs9, Fragment } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11, Fragment as Fragment2 } from "react/jsx-runtime";
 function Sidebar() {
   const {
+    variant,
     isConnected,
     isStarting,
     error,
     startSession,
     disconnect,
     isPanelOpen,
-    closePanel,
+    position,
     isAuthenticated,
     isValidating,
     authError,
@@ -1286,42 +1591,53 @@ function Sidebar() {
     verifyOtp,
     isAuthSubmitting
   } = useLiveAgent();
-  useEffect6(() => {
-    document.body.style.transition = "margin-right 300ms ease-in-out";
-    document.body.style.marginRight = isPanelOpen ? `${SIDEBAR_WIDTH}px` : "0px";
-  }, [isPanelOpen]);
-  useEffect6(() => {
+  const [view, setView] = useState7("main");
+  const isFloating = variant === "floating";
+  const isSidebar = variant === "sidebar";
+  useEffect7(() => {
+    if (!isSidebar)
+      return;
+    const prop = position === "right" ? "marginRight" : "marginLeft";
+    const opposite = position === "right" ? "marginLeft" : "marginRight";
+    document.body.style.transition = "margin 300ms ease-in-out";
+    document.body.style[opposite] = "";
+    document.body.style[prop] = isPanelOpen ? `${SIDEBAR_WIDTH}px` : "";
     return () => {
       document.body.style.marginRight = "";
+      document.body.style.marginLeft = "";
       document.body.style.transition = "";
     };
-  }, []);
-  return /* @__PURE__ */ jsxs9("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"),
+  }, [isSidebar, isPanelOpen, position]);
+  return /* @__PURE__ */ jsx14("div", {
+    className: cn("skippr:fixed skippr:z-[9999]", "skippr:bg-background skippr:border skippr:border-border", "skippr:flex skippr:flex-col", "skippr:transition-all skippr:duration-300 skippr:ease-in-out skippr:overflow-hidden", isFloating && "skippr:bottom-4 skippr:min-h-[28rem] skippr:max-h-[calc(100vh-6rem)] skippr:rounded-2xl skippr:shadow-2xl", isFloating && (position === "right" ? "skippr:right-4" : "skippr:left-4"), isFloating && !isPanelOpen && "skippr:w-0 skippr:h-0 skippr:border-0", isSidebar && "skippr:top-0 skippr:h-full", isSidebar && position === "right" && "skippr:right-0 skippr:border-l skippr:border-l-border", isSidebar && position === "left" && "skippr:left-0 skippr:border-r skippr:border-r-border", isSidebar && !isPanelOpen && "skippr:w-0 skippr:border-0"),
     style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
-    children: [
-      /* @__PURE__ */ jsx12(ChatHeader, {
-        onClose: closePanel
-      }),
-      isConnected ? /* @__PURE__ */ jsx12(ConnectedContent, {
-        onDisconnect: disconnect
-      }) : isValidating ? /* @__PURE__ */ jsx12("div", {
-        className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-        children: /* @__PURE__ */ jsx12("p", {
-          className: "skippr:text-sm skippr:text-muted-foreground",
-          children: "Loading..."
+    children: view === "settings" ? /* @__PURE__ */ jsx14(SettingsView, {
+      onBack: () => setView("main")
+    }) : /* @__PURE__ */ jsxs11(Fragment2, {
+      children: [
+        /* @__PURE__ */ jsx14(ChatHeader, {
+          onOpenSettings: () => setView("settings")
+        }),
+        isConnected ? /* @__PURE__ */ jsx14(ConnectedContent, {
+          onDisconnect: disconnect
+        }) : isValidating ? /* @__PURE__ */ jsx14("div", {
+          className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
+          children: /* @__PURE__ */ jsx14("p", {
+            className: "skippr:text-sm skippr:text-muted-foreground",
+            children: "Loading..."
+          })
+        }) : isAuthenticated ? /* @__PURE__ */ jsx14(QuickActions, {
+          onStartSession: startSession,
+          isStarting,
+          error
+        }) : /* @__PURE__ */ jsx14(LoginFlow, {
+          requestOtp,
+          verifyOtp,
+          error: authError,
+          isSubmitting: isAuthSubmitting
         })
-      }) : isAuthenticated ? /* @__PURE__ */ jsx12(QuickActions, {
-        onStartSession: startSession,
-        isStarting,
-        error
-      }) : /* @__PURE__ */ jsx12(LoginFlow, {
-        requestOtp,
-        verifyOtp,
-        error: authError,
-        isSubmitting: isAuthSubmitting
-      })
-    ]
+      ]
+    })
   });
 }
 function ConnectedContent({ onDisconnect }) {
@@ -1331,33 +1647,33 @@ function ConnectedContent({ onDisconnect }) {
   const { phases } = usePhaseUpdates();
   const { questions } = useQuestionUpdates();
   if (!isConnected) {
-    return /* @__PURE__ */ jsx12("div", {
+    return /* @__PURE__ */ jsx14("div", {
       className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-      children: /* @__PURE__ */ jsx12("p", {
+      children: /* @__PURE__ */ jsx14("p", {
         className: "skippr:text-sm skippr:text-muted-foreground",
         children: "Connecting..."
       })
     });
   }
   const isAgentSpeaking = agentState === "speaking";
-  return /* @__PURE__ */ jsxs9(Fragment, {
+  return /* @__PURE__ */ jsxs11(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx12(MeetingControls, {
+      /* @__PURE__ */ jsx14(MeetingControls, {
         onHangUp: onDisconnect
       }),
-      /* @__PURE__ */ jsxs9("div", {
+      /* @__PURE__ */ jsxs11("div", {
         className: "skippr:flex skippr:min-h-0 skippr:flex-1",
         children: [
-          /* @__PURE__ */ jsx12("div", {
-            className: "skippr:w-[260px] skippr:shrink-0 skippr:overflow-y-auto skippr:border-r",
-            children: /* @__PURE__ */ jsx12(SessionAgenda, {
+          /* @__PURE__ */ jsx14("div", {
+            className: "skippr:w-[180px] skippr:shrink-0 skippr:overflow-y-auto skippr:border-r",
+            children: /* @__PURE__ */ jsx14(SessionAgenda, {
               phases,
               questions
             })
           }),
-          /* @__PURE__ */ jsx12("div", {
+          /* @__PURE__ */ jsx14("div", {
             className: "skippr:flex skippr:min-w-0 skippr:flex-1 skippr:flex-col",
-            children: /* @__PURE__ */ jsx12(MessageList, {
+            children: /* @__PURE__ */ jsx14(MessageList, {
               messages: allMessages,
               isStreaming: isAgentSpeaking,
               sendChatMessage,
@@ -1371,32 +1687,34 @@ function ConnectedContent({ onDisconnect }) {
 }
 
 // src/components/SidebarTrigger.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var TRIGGER_GAP = 16;
-var TRIGGER_DEFAULT_RIGHT = 24;
+import { jsx as jsx15 } from "react/jsx-runtime";
 function SidebarTrigger() {
-  const { isPanelOpen, togglePanel } = useLiveAgent();
-  return /* @__PURE__ */ jsx13(Button, {
+  const { isPanelOpen, togglePanel, position, isMinimized, isConnected } = useLiveAgent();
+  if (isMinimized && isConnected)
+    return null;
+  return /* @__PURE__ */ jsx15(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 },
+    className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9998] skippr:size-14 skippr:rounded-full skippr:shadow-lg skippr:transition-all skippr:duration-300", position === "right" ? "skippr:right-6" : "skippr:left-6"),
     title: isPanelOpen ? "Close chat" : "Chat with us",
-    children: isPanelOpen ? /* @__PURE__ */ jsx13(X, {
+    children: isPanelOpen ? /* @__PURE__ */ jsx15(X, {
       className: "skippr:size-6"
-    }) : /* @__PURE__ */ jsx13(MessageCircle, {
+    }) : /* @__PURE__ */ jsx15(MessageCircle, {
       className: "skippr:size-6"
     })
   });
 }
 
 // src/components/LiveAgent.tsx
-import { jsx as jsx14, jsxs as jsxs10, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12, Fragment as Fragment3 } from "react/jsx-runtime";
 function LiveAgent({
   agentId,
   authToken: authTokenProp,
   appKey,
   userToken,
+  position = "right",
+  variant = "floating",
+  minimizable = true,
   defaultOpen = false,
   children
 }) {
@@ -1408,12 +1726,45 @@ function LiveAgent({
     appKey,
     userToken
   });
-  const [isPanelOpen, setIsPanelOpen] = useState7(defaultOpen);
-  const openPanel = useCallback7(() => setIsPanelOpen(true), []);
-  const closePanel = useCallback7(() => setIsPanelOpen(false), []);
-  const togglePanel = useCallback7(() => setIsPanelOpen((prev) => !prev), []);
+  const [isPanelOpen, setIsPanelOpen] = useState8(defaultOpen);
+  const [isMinimized, setIsMinimized] = useState8(false);
+  const [currentPosition, setCurrentPosition] = useState8(() => {
+    try {
+      const saved = localStorage.getItem("skippr_widget_position");
+      if (saved === "left" || saved === "right")
+        return saved;
+    } catch {}
+    return position;
+  });
+  const setPositionWithPersist = useCallback8((pos) => {
+    setCurrentPosition(pos);
+    try {
+      localStorage.setItem("skippr_widget_position", pos);
+    } catch {}
+  }, []);
+  const openPanel = useCallback8(() => setIsPanelOpen(true), []);
+  const closePanel = useCallback8(() => setIsPanelOpen(false), []);
+  const togglePanel = useCallback8(() => setIsPanelOpen((prev) => !prev), []);
+  const expandPanel = useCallback8(() => {
+    setIsMinimized(false);
+    setIsPanelOpen(true);
+  }, []);
+  const minimizePanel = useCallback8(() => {
+    if (!minimizable)
+      return;
+    setIsMinimized(true);
+    setIsPanelOpen(false);
+  }, [minimizable]);
   const isConnected = connection !== null;
   const isAuthenticated = !!userToken || !!authTokenProp || auth.isAuthenticated;
+  useEffect8(() => {
+    if (connection && minimizable) {
+      setIsMinimized(true);
+      setIsPanelOpen(false);
+    } else if (!connection) {
+      setIsMinimized(false);
+    }
+  }, [connection, minimizable]);
   const ctx = useMemo4(() => ({
     connection,
     shouldConnect,
@@ -1426,6 +1777,13 @@ function LiveAgent({
     openPanel,
     closePanel,
     togglePanel,
+    variant,
+    position: currentPosition,
+    setPosition: setPositionWithPersist,
+    minimizable,
+    isMinimized,
+    expandPanel,
+    minimizePanel,
     isAuthenticated,
     isValidating: auth.isValidating,
     authError: auth.error,
@@ -1445,6 +1803,13 @@ function LiveAgent({
     openPanel,
     closePanel,
     togglePanel,
+    variant,
+    currentPosition,
+    setPositionWithPersist,
+    minimizable,
+    isMinimized,
+    expandPanel,
+    minimizePanel,
     isAuthenticated,
     auth.isValidating,
     auth.error,
@@ -1453,17 +1818,18 @@ function LiveAgent({
     auth.logout,
     auth.isSubmitting
   ]);
-  const widgetContent = /* @__PURE__ */ jsxs10(Fragment2, {
+  const widgetContent = /* @__PURE__ */ jsxs12(Fragment3, {
     children: [
-      connection && /* @__PURE__ */ jsx14(RoomAudioRenderer, {}),
-      /* @__PURE__ */ jsx14(SidebarTrigger, {}),
-      /* @__PURE__ */ jsx14(Sidebar, {}),
+      connection && /* @__PURE__ */ jsx16(RoomAudioRenderer, {}),
+      isMinimized && isConnected && /* @__PURE__ */ jsx16(MinimizedBubble, {}),
+      /* @__PURE__ */ jsx16(SidebarTrigger, {}),
+      /* @__PURE__ */ jsx16(Sidebar, {}),
       children
     ]
   });
-  return /* @__PURE__ */ jsx14(LiveAgentContext.Provider, {
+  return /* @__PURE__ */ jsx16(LiveAgentContext.Provider, {
     value: ctx,
-    children: connection ? /* @__PURE__ */ jsx14(LiveKitRoom, {
+    children: connection ? /* @__PURE__ */ jsx16(LiveKitRoom, {
       serverUrl: connection.livekitUrl,
       token: connection.token,
       connect: shouldConnect,