@skippr/live-agent-sdk 0.7.0 → 0.9.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 useCallback6, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo4, useState as useState5 } from "react";
 
 // src/context/LiveAgentContext.tsx
 import { createContext } from "react";
@@ -9,7 +9,7 @@ var LiveAgentContext = createContext(null);
 // src/hooks/useSession.ts
 import { useCallback, useState } from "react";
 var API_URL = "https://skipprapi-production.up.railway.app";
-function useSession({ organizationId, agentId }) {
+function useSession({ organizationId, agentId, authToken }) {
   const [connection, setConnection] = useState(null);
   const [shouldConnect, setShouldConnect] = useState(false);
   const [isStarting, setIsStarting] = useState(false);
@@ -19,9 +19,10 @@ function useSession({ organizationId, agentId }) {
     setIsStarting(true);
     setError("");
     try {
+      const authHeaders = authToken ? { Authorization: `Bearer ${authToken}` } : {};
       const createResp = await fetch(`${API_URL}/v1/sessions`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", ...authHeaders },
         body: JSON.stringify({ organizationId, agentId })
       });
       if (!createResp.ok) {
@@ -29,7 +30,8 @@ function useSession({ organizationId, agentId }) {
       }
       const { session } = await createResp.json();
       const startResp = await fetch(`${API_URL}/v1/sessions/${session.id}/start`, {
-        method: "POST"
+        method: "POST",
+        headers: authHeaders
       });
       if (!startResp.ok) {
         throw new Error(`Failed to start session: ${startResp.status}`);
@@ -46,13 +48,14 @@ function useSession({ organizationId, agentId }) {
     } finally {
       setIsStarting(false);
     }
-  }, [organizationId, agentId]);
+  }, [organizationId, agentId, authToken]);
   const disconnect = useCallback(async () => {
     if (sessionId) {
+      const authHeaders = authToken ? { Authorization: `Bearer ${authToken}` } : {};
       try {
         await fetch(`${API_URL}/v1/sessions/${sessionId}/complete`, {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: { "Content-Type": "application/json", ...authHeaders },
           body: JSON.stringify({})
         });
       } catch {}
@@ -61,14 +64,94 @@ function useSession({ organizationId, agentId }) {
     setShouldConnect(false);
     setConnection(null);
     setSessionId(null);
-  }, [sessionId]);
+  }, [sessionId, authToken]);
   return { connection, shouldConnect, isStarting, error, startSession, disconnect };
 }
 
 // src/components/Sidebar.tsx
 import { useConnectionState } from "@livekit/components-react";
 import { ConnectionState } from "livekit-client";
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } 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";
@@ -158,43 +241,6 @@ function useQuestionUpdates() {
   return { questions };
 }
 
-// src/hooks/useTranscriptMessages.ts
-import {
-  useLocalParticipant,
-  useTrackTranscription,
-  useVoiceAssistant
-} from "@livekit/components-react";
-import { Track } from "livekit-client";
-import { useMemo } from "react";
-function segmentsToMessages(segments, role) {
-  return segments.filter((s) => s.final && s.text.trim().length > 0).map((s) => ({
-    id: s.id,
-    role,
-    content: s.text
-  }));
-}
-function useTranscriptMessages() {
-  const { agentTranscriptions, state } = useVoiceAssistant();
-  const { localParticipant } = useLocalParticipant();
-  const localMicTrack = useMemo(() => localParticipant.getTrackPublication(Track.Source.Microphone) ? {
-    participant: localParticipant,
-    source: Track.Source.Microphone,
-    publication: localParticipant.getTrackPublication(Track.Source.Microphone)
-  } : undefined, [localParticipant]);
-  const { segments: userSegments } = useTrackTranscription(localMicTrack);
-  const messages = useMemo(() => {
-    const agent = segmentsToMessages(agentTranscriptions, "assistant");
-    const user = segmentsToMessages(userSegments, "user");
-    const timeMap = new Map;
-    for (const s of agentTranscriptions)
-      timeMap.set(s.id, s.firstReceivedTime);
-    for (const s of userSegments)
-      timeMap.set(s.id, s.firstReceivedTime);
-    return [...agent, ...user].sort((a, b) => (timeMap.get(a.id) ?? 0) - (timeMap.get(b.id) ?? 0));
-  }, [agentTranscriptions, userSegments]);
-  return { messages, agentState: state };
-}
-
 // src/lib/constants.ts
 var SIDEBAR_WIDTH = 600;
 
@@ -270,7 +316,7 @@ function ChatHeader({ onClose }) {
 }
 
 // src/components/MeetingControls.tsx
-import { useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react";
+import { useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react";
 import { ScreenSharePresets } from "livekit-client";
 import { Mic, MicOff, Monitor, MonitorOff, PhoneOff } from "lucide-react";
 import { useCallback as useCallback4, useEffect as useEffect2, useState as useState3 } from "react";
@@ -285,7 +331,7 @@ function formatTime(seconds) {
 // src/components/MeetingControls.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function MeetingControls({ onHangUp }) {
-  const { localParticipant } = useLocalParticipant2();
+  const { localParticipant } = useLocalParticipant3();
   const isMuted = !localParticipant.isMicrophoneEnabled;
   const isScreenSharing = localParticipant.isScreenShareEnabled;
   const [elapsed, setElapsed] = useState3(0);
@@ -362,15 +408,55 @@ function MeetingControls({ onHangUp }) {
 }
 
 // src/components/MessageList.tsx
-import { useCallback as useCallback5 } from "react";
+import { useEffect as useEffect3, useRef } from "react";
+
+// src/components/ChatInput.tsx
+import { SendHorizontal } from "lucide-react";
+import { useState as useState4 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ChatInput({ sendChatMessage, isSendingChat }) {
+  const [inputText, setInputText] = useState4("");
+  const canSend = inputText.trim().length > 0 && !isSendingChat;
+  function handleSubmit(e) {
+    e.preventDefault();
+    const text = inputText.trim();
+    if (!text || isSendingChat)
+      return;
+    setInputText("");
+    sendChatMessage(text).catch(() => setInputText(text));
+  }
+  return /* @__PURE__ */ jsxs3("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__ */ jsx4("input", {
+        type: "text",
+        value: inputText,
+        onChange: (e) => setInputText(e.target.value),
+        placeholder: "Type a message...",
+        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__ */ jsx4("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__ */ jsx4(SendHorizontal, {
+          className: "skippr:size-4"
+        })
+      })
+    ]
+  });
+}
 
 // src/components/ChatMessage.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function ChatMessage({ message }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsx4("div", {
+  return /* @__PURE__ */ jsx5("div", {
     className: cn("skippr:flex skippr:w-full skippr:px-4 skippr:py-1", isUser ? "skippr:justify-end" : "skippr:justify-start"),
-    children: /* @__PURE__ */ jsx4("div", {
+    children: /* @__PURE__ */ jsx5("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
     })
@@ -378,20 +464,20 @@ function ChatMessage({ message }) {
 }
 
 // src/components/TypingIndicator.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function TypingIndicator() {
-  return /* @__PURE__ */ jsx5("div", {
+  return /* @__PURE__ */ jsx6("div", {
     className: "skippr:flex skippr:items-center skippr:gap-1 skippr:px-4 skippr:py-3",
-    children: /* @__PURE__ */ jsxs3("div", {
+    children: /* @__PURE__ */ jsxs4("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__ */ jsx5("span", {
+        /* @__PURE__ */ jsx6("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:0ms]"
         }),
-        /* @__PURE__ */ jsx5("span", {
+        /* @__PURE__ */ jsx6("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:150ms]"
         }),
-        /* @__PURE__ */ jsx5("span", {
+        /* @__PURE__ */ jsx6("span", {
           className: "skippr:size-1.5 skippr:animate-bounce skippr:rounded-full skippr:bg-muted-foreground/60 skippr:[animation-delay:300ms]"
         })
       ]
@@ -400,56 +486,71 @@ function TypingIndicator() {
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function MessageList({ messages, isStreaming }) {
-  const scrollRef = useCallback5((node) => {
-    node?.scrollIntoView({ behavior: "smooth" });
-  }, []);
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function MessageList({
+  messages,
+  isStreaming,
+  sendChatMessage,
+  isSendingChat
+}) {
+  const scrollRef = useRef(null);
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
+  useEffect3(() => {
+    scrollRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages.length, lastMessage?.content]);
   const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
-  return /* @__PURE__ */ jsx6("div", {
-    className: "skippr:flex-1 skippr:overflow-y-auto",
-    children: /* @__PURE__ */ jsxs4("div", {
-      className: "skippr:flex skippr:flex-col skippr:gap-1 skippr:py-3",
-      children: [
-        messages.map((message) => /* @__PURE__ */ jsx6(ChatMessage, {
-          message
-        }, message.id)),
-        showTyping && /* @__PURE__ */ jsx6(TypingIndicator, {}),
-        /* @__PURE__ */ jsx6("div", {
-          ref: scrollRef
-        }, `scroll-${messages.length}`)
-      ]
-    })
+  return /* @__PURE__ */ jsxs5("div", {
+    className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
+    children: [
+      /* @__PURE__ */ jsx7("div", {
+        className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto",
+        children: /* @__PURE__ */ jsxs5("div", {
+          className: "skippr:flex skippr:flex-col skippr:gap-1 skippr:py-3",
+          children: [
+            messages.map((message) => /* @__PURE__ */ jsx7(ChatMessage, {
+              message
+            }, message.id)),
+            showTyping && /* @__PURE__ */ jsx7(TypingIndicator, {}),
+            /* @__PURE__ */ jsx7("div", {
+              ref: scrollRef
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx7(ChatInput, {
+        sendChatMessage,
+        isSendingChat
+      })
+    ]
   });
 }
 
 // src/components/QuickActions.tsx
 import { Loader2, MessageCircleQuestion } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function QuickActions({ onStartSession, isStarting, error }) {
-  return /* @__PURE__ */ jsxs5("div", {
+  return /* @__PURE__ */ jsxs6("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__ */ jsx7("p", {
+      /* @__PURE__ */ jsx8("p", {
         className: "skippr:mb-1 skippr:text-sm skippr:text-muted-foreground",
         children: "How can I help you today?"
       }),
-      /* @__PURE__ */ jsxs5(Button, {
+      /* @__PURE__ */ jsxs6(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__ */ jsx7(Loader2, {
+          isStarting ? /* @__PURE__ */ jsx8(Loader2, {
             className: "skippr:size-4 skippr:animate-spin skippr:text-primary"
-          }) : /* @__PURE__ */ jsx7(MessageCircleQuestion, {
+          }) : /* @__PURE__ */ jsx8(MessageCircleQuestion, {
             className: "skippr:size-4 skippr:text-primary"
           }),
           isStarting ? "Starting..." : "Start Session"
         ]
       }),
-      error && /* @__PURE__ */ jsx7("p", {
+      error && /* @__PURE__ */ jsx8("p", {
         className: "skippr:text-xs skippr:text-destructive",
         children: error
       })
@@ -459,52 +560,52 @@ function QuickActions({ onStartSession, isStarting, error }) {
 
 // src/components/SessionAgenda.tsx
 import { Check, Circle, Loader2 as Loader22 } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function SessionAgenda({ phases, questions = [] }) {
   if (phases.length === 0) {
-    return /* @__PURE__ */ jsxs6("div", {
+    return /* @__PURE__ */ jsxs7("div", {
       className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
       children: [
-        /* @__PURE__ */ jsx8("h3", {
+        /* @__PURE__ */ jsx9("h3", {
           className: "skippr:text-sm skippr:font-semibold",
           children: "Agenda"
         }),
-        /* @__PURE__ */ jsx8("p", {
+        /* @__PURE__ */ jsx9("p", {
           className: "skippr:text-xs skippr:text-muted-foreground",
           children: "Waiting for session..."
         })
       ]
     });
   }
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     className: "skippr:flex skippr:flex-col skippr:gap-3 skippr:p-4",
     children: [
-      /* @__PURE__ */ jsx8("h3", {
+      /* @__PURE__ */ jsx9("h3", {
         className: "skippr:text-sm skippr:font-semibold",
         children: "Agenda"
       }),
-      /* @__PURE__ */ jsx8("ul", {
+      /* @__PURE__ */ jsx9("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__ */ jsxs6("li", {
+          return /* @__PURE__ */ jsxs7("li", {
             className: "skippr:flex skippr:flex-col skippr:gap-0.5",
             children: [
-              /* @__PURE__ */ jsxs6("div", {
+              /* @__PURE__ */ jsxs7("div", {
                 className: "skippr:flex skippr:items-center skippr:gap-2 skippr:text-sm",
                 children: [
-                  /* @__PURE__ */ jsx8(PhaseIcon, {
+                  /* @__PURE__ */ jsx9(PhaseIcon, {
                     status: phase.status
                   }),
-                  /* @__PURE__ */ jsx8("span", {
+                  /* @__PURE__ */ jsx9("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__ */ jsxs6("span", {
+              totalCount > 0 && /* @__PURE__ */ jsxs7("span", {
                 className: "skippr:ml-6 skippr:text-xs skippr:text-muted-foreground",
                 children: [
                   answeredCount,
@@ -522,56 +623,56 @@ function SessionAgenda({ phases, questions = [] }) {
 }
 function PhaseIcon({ status }) {
   if (status === "completed") {
-    return /* @__PURE__ */ jsx8("div", {
+    return /* @__PURE__ */ jsx9("div", {
       className: "skippr:flex skippr:size-4 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-full skippr:bg-primary",
-      children: /* @__PURE__ */ jsx8(Check, {
+      children: /* @__PURE__ */ jsx9(Check, {
         className: "skippr:size-2.5 skippr:text-primary-foreground",
         strokeWidth: 3
       })
     });
   }
   if (status === "active") {
-    return /* @__PURE__ */ jsx8(Loader22, {
+    return /* @__PURE__ */ jsx9(Loader22, {
       className: "skippr:size-4 skippr:shrink-0 skippr:text-primary skippr:animate-spin"
     });
   }
-  return /* @__PURE__ */ jsx8(Circle, {
+  return /* @__PURE__ */ jsx9(Circle, {
     className: "skippr:size-4 skippr:shrink-0 skippr:text-muted-foreground"
   });
 }
 
 // src/components/Sidebar.tsx
-import { jsx as jsx9, jsxs as jsxs7, Fragment } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8, Fragment } from "react/jsx-runtime";
 function Sidebar() {
   const { isConnected, isStarting, error, startSession, disconnect, isPanelOpen, closePanel } = useLiveAgent();
-  useEffect3(() => {
+  useEffect4(() => {
     document.body.style.transition = "margin-right 300ms ease-in-out";
     document.body.style.marginRight = isPanelOpen ? `${SIDEBAR_WIDTH}px` : "0px";
   }, [isPanelOpen]);
-  useEffect3(() => {
+  useEffect4(() => {
     return () => {
       document.body.style.marginRight = "";
       document.body.style.transition = "";
     };
   }, []);
-  return /* @__PURE__ */ jsx9("div", {
+  return /* @__PURE__ */ jsx10("div", {
     className: cn("skippr:fixed skippr:top-0 skippr:right-0 skippr:h-full skippr:z-[9999]", "skippr:bg-background skippr:border-l skippr:border-border", "skippr:flex skippr:flex-col", "skippr:transition-all skippr:duration-300 skippr:ease-in-out skippr:overflow-hidden", !isPanelOpen && "skippr:w-0 skippr:border-l-0"),
     style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
-    children: isConnected ? /* @__PURE__ */ jsxs7(Fragment, {
+    children: isConnected ? /* @__PURE__ */ jsxs8(Fragment, {
       children: [
-        /* @__PURE__ */ jsx9(ChatHeader, {
+        /* @__PURE__ */ jsx10(ChatHeader, {
           onClose: closePanel
         }),
-        /* @__PURE__ */ jsx9(ConnectedContent, {
+        /* @__PURE__ */ jsx10(ConnectedContent, {
           onDisconnect: disconnect
         })
       ]
-    }) : /* @__PURE__ */ jsxs7(Fragment, {
+    }) : /* @__PURE__ */ jsxs8(Fragment, {
       children: [
-        /* @__PURE__ */ jsx9(ChatHeader, {
+        /* @__PURE__ */ jsx10(ChatHeader, {
           onClose: closePanel
         }),
-        /* @__PURE__ */ jsx9(QuickActions, {
+        /* @__PURE__ */ jsx10(QuickActions, {
           onStartSession: startSession,
           isStarting,
           error
@@ -583,39 +684,41 @@ function Sidebar() {
 function ConnectedContent({ onDisconnect }) {
   const connectionState = useConnectionState();
   const isConnected = connectionState === ConnectionState.Connected;
-  const { messages, agentState } = useTranscriptMessages();
+  const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
   const { phases } = usePhaseUpdates();
   const { questions } = useQuestionUpdates();
   if (!isConnected) {
-    return /* @__PURE__ */ jsx9("div", {
+    return /* @__PURE__ */ jsx10("div", {
       className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-      children: /* @__PURE__ */ jsx9("p", {
+      children: /* @__PURE__ */ jsx10("p", {
         className: "skippr:text-sm skippr:text-muted-foreground",
         children: "Connecting..."
       })
     });
   }
   const isAgentSpeaking = agentState === "speaking";
-  return /* @__PURE__ */ jsxs7(Fragment, {
+  return /* @__PURE__ */ jsxs8(Fragment, {
     children: [
-      /* @__PURE__ */ jsx9(MeetingControls, {
+      /* @__PURE__ */ jsx10(MeetingControls, {
         onHangUp: onDisconnect
       }),
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: "skippr:flex skippr:min-h-0 skippr:flex-1",
         children: [
-          /* @__PURE__ */ jsx9("div", {
+          /* @__PURE__ */ jsx10("div", {
             className: "skippr:w-[260px] skippr:shrink-0 skippr:overflow-y-auto skippr:border-r",
-            children: /* @__PURE__ */ jsx9(SessionAgenda, {
+            children: /* @__PURE__ */ jsx10(SessionAgenda, {
               phases,
               questions
             })
           }),
-          /* @__PURE__ */ jsx9("div", {
+          /* @__PURE__ */ jsx10("div", {
             className: "skippr:flex skippr:min-w-0 skippr:flex-1 skippr:flex-col",
-            children: /* @__PURE__ */ jsx9(MessageList, {
-              messages,
-              isStreaming: isAgentSpeaking
+            children: /* @__PURE__ */ jsx10(MessageList, {
+              messages: allMessages,
+              isStreaming: isAgentSpeaking,
+              sendChatMessage,
+              isSendingChat
             })
           })
         ]
@@ -626,43 +729,45 @@ function ConnectedContent({ onDisconnect }) {
 
 // src/components/SidebarTrigger.tsx
 import { MessageCircle, X as X2 } from "lucide-react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var TRIGGER_GAP = 16;
 var TRIGGER_DEFAULT_RIGHT = 24;
 function SidebarTrigger() {
   const { isPanelOpen, togglePanel } = useLiveAgent();
-  return /* @__PURE__ */ jsx10(Button, {
+  return /* @__PURE__ */ jsx11(Button, {
     size: "icon-lg",
     onClick: togglePanel,
     className: "skippr:fixed skippr:bottom-6 skippr:z-[9998] skippr:size-14 skippr:rounded-full skippr:shadow-lg skippr:transition-all skippr:duration-300",
     style: { right: isPanelOpen ? SIDEBAR_WIDTH + TRIGGER_GAP : TRIGGER_DEFAULT_RIGHT },
     title: isPanelOpen ? "Close chat" : "Chat with us",
-    children: isPanelOpen ? /* @__PURE__ */ jsx10(X2, {
+    children: isPanelOpen ? /* @__PURE__ */ jsx11(X2, {
       className: "skippr:size-6"
-    }) : /* @__PURE__ */ jsx10(MessageCircle, {
+    }) : /* @__PURE__ */ jsx11(MessageCircle, {
       className: "skippr:size-6"
     })
   });
 }
 
 // src/components/LiveAgent.tsx
-import { jsx as jsx11, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9, Fragment as Fragment2 } from "react/jsx-runtime";
 function LiveAgent({
   organizationId,
   agentId,
+  authToken,
   defaultOpen = false,
   children
 }) {
   const { connection, shouldConnect, isStarting, error, startSession, disconnect } = useSession({
     organizationId,
-    agentId
+    agentId,
+    authToken
   });
-  const [isPanelOpen, setIsPanelOpen] = useState4(defaultOpen);
-  const openPanel = useCallback6(() => setIsPanelOpen(true), []);
-  const closePanel = useCallback6(() => setIsPanelOpen(false), []);
-  const togglePanel = useCallback6(() => setIsPanelOpen((prev) => !prev), []);
+  const [isPanelOpen, setIsPanelOpen] = useState5(defaultOpen);
+  const openPanel = useCallback5(() => setIsPanelOpen(true), []);
+  const closePanel = useCallback5(() => setIsPanelOpen(false), []);
+  const togglePanel = useCallback5(() => setIsPanelOpen((prev) => !prev), []);
   const isConnected = connection !== null;
-  const ctx = useMemo2(() => ({
+  const ctx = useMemo4(() => ({
     connection,
     shouldConnect,
     isConnected,
@@ -687,17 +792,17 @@ function LiveAgent({
     closePanel,
     togglePanel
   ]);
-  const widgetContent = /* @__PURE__ */ jsxs8(Fragment2, {
+  const widgetContent = /* @__PURE__ */ jsxs9(Fragment2, {
     children: [
-      connection && /* @__PURE__ */ jsx11(RoomAudioRenderer, {}),
-      /* @__PURE__ */ jsx11(SidebarTrigger, {}),
-      /* @__PURE__ */ jsx11(Sidebar, {}),
+      connection && /* @__PURE__ */ jsx12(RoomAudioRenderer, {}),
+      /* @__PURE__ */ jsx12(SidebarTrigger, {}),
+      /* @__PURE__ */ jsx12(Sidebar, {}),
       children
     ]
   });
-  return /* @__PURE__ */ jsx11(LiveAgentContext.Provider, {
+  return /* @__PURE__ */ jsx12(LiveAgentContext.Provider, {
     value: ctx,
-    children: connection ? /* @__PURE__ */ jsx11(LiveKitRoom, {
+    children: connection ? /* @__PURE__ */ jsx12(LiveKitRoom, {
       serverUrl: connection.livekitUrl,
       token: connection.token,
       connect: shouldConnect,