npm - @skippr/live-agent-sdk - Versions diffs - 0.16.0 → 0.17.0 - Mend

@skippr/live-agent-sdk 0.16.0 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/esm/lib-exports.js +802 -459
package/dist/skippr-sdk.css +1 -1
package/dist/skippr-sdk.js +119 -119
package/dist/types/components/ChatHeader.d.ts +2 -2
package/dist/types/components/LiveAgent.d.ts +4 -1
package/dist/types/components/MinimizedBubble.d.ts +1 -0
package/dist/types/components/SettingsView.d.ts +5 -0
package/dist/types/components/SidebarTrigger.d.ts +1 -1
package/dist/types/context/LiveAgentContext.d.ts +7 -0
package/dist/types/lib/constants.d.ts +1 -1
package/package.json +1 -1

package/dist/esm/lib-exports.js CHANGED Viewed

@@ -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";
@@ -243,188 +243,9 @@ function useSession({ agentId, authToken, appKey, userToken }) {
   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 useEffect7 } 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 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);
-    }
-    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";
@@ -524,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",
@@ -648,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
@@ -657,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 useEffect4, 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,
@@ -720,7 +927,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
       isSubmitting
     });
   }
-  return /* @__PURE__ */ jsx3(EmailStep, {
+  return /* @__PURE__ */ jsx4(EmailStep, {
     email,
     onEmailChange: setEmail,
     onSubmit: handleRequestOtp,
@@ -734,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,
@@ -766,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
           })
@@ -801,13 +1008,13 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
     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;
@@ -821,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) {
@@ -854,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
               })
@@ -877,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;
               },
@@ -898,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,
@@ -936,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 useEffect5, 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) {
@@ -952,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"
@@ -965,10 +1172,10 @@ 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);
@@ -985,18 +1192,18 @@ 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) {
@@ -1006,51 +1213,51 @@ function MeetingControls({ onHangUp }) {
   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"
             })
           })
@@ -1065,7 +1272,7 @@ 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;
@@ -1077,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),
@@ -1089,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"
         })
       })
@@ -1103,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
     })
@@ -1116,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]"
         })
       ]
@@ -1138,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,
@@ -1151,25 +1358,25 @@ function MessageList({
     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
       })
@@ -1178,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
       })
@@ -1210,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,
@@ -1273,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,
@@ -1309,42 +1591,53 @@ function Sidebar() {
     verifyOtp,
     isAuthSubmitting
   } = useLiveAgent();
+  const [view, setView] = useState7("main");
+  const isFloating = variant === "floating";
+  const isSidebar = variant === "sidebar";
   useEffect7(() => {
-    document.body.style.transition = "margin-right 300ms ease-in-out";
-    document.body.style.marginRight = isPanelOpen ? `${SIDEBAR_WIDTH}px` : "0px";
-  }, [isPanelOpen]);
-  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 }) {
@@ -1354,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,
@@ -1394,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
 }) {
@@ -1431,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,
@@ -1449,6 +1777,13 @@ function LiveAgent({
     openPanel,
     closePanel,
     togglePanel,
+    variant,
+    position: currentPosition,
+    setPosition: setPositionWithPersist,
+    minimizable,
+    isMinimized,
+    expandPanel,
+    minimizePanel,
     isAuthenticated,
     isValidating: auth.isValidating,
     authError: auth.error,
@@ -1468,6 +1803,13 @@ function LiveAgent({
     openPanel,
     closePanel,
     togglePanel,
+    variant,
+    currentPosition,
+    setPositionWithPersist,
+    minimizable,
+    isMinimized,
+    expandPanel,
+    minimizePanel,
     isAuthenticated,
     auth.isValidating,
     auth.error,
@@ -1476,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,