@kite-copilot/chat-panel 0.2.24 → 0.2.25

package/dist/auto.cjs

@@ -885,6 +885,7 @@ function DataRenderer({ type, data }) {
 }
 
 // src/ChatPanel.tsx
+var import_supabase_js = require("@supabase/supabase-js");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 340;
@@ -1313,11 +1314,16 @@ function ChatPanel({
   currentPage,
   agentUrl = DEFAULT_AGENT_URL,
   startingQuestions: startingQuestionsProp,
-  startingQuestionsEndpoint
+  startingQuestionsEndpoint,
+  supabaseUrl,
+  supabaseAnonKey
 } = {}) {
   const [messages, setMessages] = React4.useState(initialMessages);
   const [input, setInput] = React4.useState("");
   const [sessionId, setSessionId] = React4.useState(() => crypto.randomUUID());
+  const [isEscalated, setIsEscalated] = React4.useState(false);
+  const [supabaseClient, setSupabaseClient] = React4.useState(null);
+  const realtimeChannelRef = React4.useRef(null);
   const resetSession = React4.useCallback(() => {
     setSessionId(crypto.randomUUID());
   }, []);
@@ -1542,6 +1548,63 @@ function ChatPanel({
     guideComplete,
     onNavigate
   ]);
+  React4.useEffect(() => {
+    if (supabaseUrl && supabaseAnonKey && !supabaseClient) {
+      const client = (0, import_supabase_js.createClient)(supabaseUrl, supabaseAnonKey);
+      setSupabaseClient(client);
+    }
+  }, [supabaseUrl, supabaseAnonKey, supabaseClient]);
+  const subscribeToAgentMessages = React4.useCallback((currentSessionId) => {
+    if (!supabaseClient) return;
+    if (realtimeChannelRef.current) {
+      supabaseClient.removeChannel(realtimeChannelRef.current);
+    }
+    const channel = supabaseClient.channel(`user-chat-${currentSessionId}`).on(
+      "postgres_changes",
+      {
+        event: "INSERT",
+        schema: "public",
+        table: "chat_history",
+        filter: `session_id=eq.${currentSessionId}`
+      },
+      (payload) => {
+        const newMsg = payload.new;
+        if (newMsg.role === "agent") {
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: Date.now(),
+              role: "agent",
+              kind: "text",
+              content: newMsg.content
+            }
+          ]);
+        }
+      }
+    ).subscribe();
+    realtimeChannelRef.current = channel;
+  }, [supabaseClient]);
+  React4.useEffect(() => {
+    return () => {
+      if (realtimeChannelRef.current && supabaseClient) {
+        supabaseClient.removeChannel(realtimeChannelRef.current);
+      }
+    };
+  }, [supabaseClient]);
+  const sendEscalatedMessage = React4.useCallback(async (content) => {
+    if (!supabaseClient || !isEscalated) return false;
+    try {
+      await supabaseClient.from("chat_history").insert({
+        session_id: sessionId,
+        role: "user",
+        content
+      });
+      return true;
+    } catch (err) {
+      console.error("[KiteChat] Failed to send escalated message:", err);
+      return false;
+    }
+  }, [supabaseClient, isEscalated, sessionId]);
   function streamAssistantMessage(messageId, fullText, followups) {
     let textToStream = fullText;
     let extractedFollowups = followups;
@@ -1652,6 +1715,17 @@ function ChatPanel({
       return;
     }
     if (!trimmed) return;
+    if (isEscalated && supabaseClient) {
+      const userMessage = {
+        id: Date.now(),
+        role: "user",
+        content: trimmed
+      };
+      setMessages((prev) => [...prev, userMessage]);
+      sendEscalatedMessage(trimmed);
+      setInput("");
+      return;
+    }
     startChatFlow(trimmed);
     setInput("");
   }
@@ -1980,6 +2054,18 @@ function ChatPanel({
               setProgressSteps([]);
               setPhase("idle");
               streamCompleted = true;
+            } else if (eventType === "escalation") {
+              setIsEscalated(true);
+              setPhase("idle");
+              const escalationMessageId = Date.now() + 2;
+              const escalationMessage = {
+                id: escalationMessageId,
+                role: "assistant",
+                kind: "text",
+                content: data.message || "You've been connected to our support queue. An agent will be with you shortly."
+              };
+              setMessages((prev) => [...prev, escalationMessage]);
+              subscribeToAgentMessages(sessionId);
             }
           } catch (parseError) {
             console.error("Failed to parse SSE event:", parseError);
@@ -2847,6 +2933,12 @@ ${userText}`
                 if (isUser) {
                   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content }) }, message.id);
                 }
+                if (message.role === "agent") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-start ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-blue-50 border border-blue-200 px-3.5 py-2.5 text-sm text-gray-900 shadow-sm", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-xs text-blue-600 font-medium mb-1", children: "Support Agent" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap leading-relaxed", children: renderMarkdown(message.content || "") })
+                  ] }) }, message.id);
+                }
                 if (message.kind === "searchSummary") {
                   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "div",
@@ -4038,7 +4130,9 @@ function ChatPanelWithToggle({
   startingQuestionsEndpoint,
   defaultOpen = false,
   isOpen: controlledIsOpen,
-  onOpenChange
+  onOpenChange,
+  supabaseUrl,
+  supabaseAnonKey
 }) {
   const [internalIsOpen, setInternalIsOpen] = React4.useState(defaultOpen);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
@@ -4069,7 +4163,9 @@ function ChatPanelWithToggle({
       currentPage,
       agentUrl,
       startingQuestions,
-      startingQuestionsEndpoint
+      startingQuestionsEndpoint,
+      supabaseUrl,
+      supabaseAnonKey
     }
   );
 }

package/dist/auto.d.cts

@@ -1,4 +1,4 @@
-import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-CyoN-YV4.cjs';
+import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-CGiuk776.cjs';
 import 'react/jsx-runtime';
 
 /**

package/dist/auto.d.ts

@@ -1,4 +1,4 @@
-import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-CyoN-YV4.js';
+import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-CGiuk776.js';
 import 'react/jsx-runtime';
 
 /**

package/dist/auto.js

@@ -1,6 +1,6 @@
 import {
   createKiteChat
-} from "./chunk-TBMYN3GD.js";
+} from "./chunk-WCRTS3TD.js";
 
 // src/auto.ts
 function mountKiteChat(config) {

package/dist/{chunk-TBMYN3GD.js → chunk-WCRTS3TD.js}

@@ -884,6 +884,7 @@ function DataRenderer({ type, data }) {
 // src/ChatPanel.tsx
 import * as React4 from "react";
 import { ArrowLeft, ArrowUp, Command, CornerDownLeft, CheckCircle2 as CheckCircle23, SquarePen, Paperclip, X, FileSpreadsheet, Loader2 as Loader22, ChevronLeft, ChevronRight, Sparkles } from "lucide-react";
+import { createClient } from "@supabase/supabase-js";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 340;
@@ -1312,11 +1313,16 @@ function ChatPanel({
   currentPage,
   agentUrl = DEFAULT_AGENT_URL,
   startingQuestions: startingQuestionsProp,
-  startingQuestionsEndpoint
+  startingQuestionsEndpoint,
+  supabaseUrl,
+  supabaseAnonKey
 } = {}) {
   const [messages, setMessages] = React4.useState(initialMessages);
   const [input, setInput] = React4.useState("");
   const [sessionId, setSessionId] = React4.useState(() => crypto.randomUUID());
+  const [isEscalated, setIsEscalated] = React4.useState(false);
+  const [supabaseClient, setSupabaseClient] = React4.useState(null);
+  const realtimeChannelRef = React4.useRef(null);
   const resetSession = React4.useCallback(() => {
     setSessionId(crypto.randomUUID());
   }, []);
@@ -1541,6 +1547,63 @@ function ChatPanel({
     guideComplete,
     onNavigate
   ]);
+  React4.useEffect(() => {
+    if (supabaseUrl && supabaseAnonKey && !supabaseClient) {
+      const client = createClient(supabaseUrl, supabaseAnonKey);
+      setSupabaseClient(client);
+    }
+  }, [supabaseUrl, supabaseAnonKey, supabaseClient]);
+  const subscribeToAgentMessages = React4.useCallback((currentSessionId) => {
+    if (!supabaseClient) return;
+    if (realtimeChannelRef.current) {
+      supabaseClient.removeChannel(realtimeChannelRef.current);
+    }
+    const channel = supabaseClient.channel(`user-chat-${currentSessionId}`).on(
+      "postgres_changes",
+      {
+        event: "INSERT",
+        schema: "public",
+        table: "chat_history",
+        filter: `session_id=eq.${currentSessionId}`
+      },
+      (payload) => {
+        const newMsg = payload.new;
+        if (newMsg.role === "agent") {
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: Date.now(),
+              role: "agent",
+              kind: "text",
+              content: newMsg.content
+            }
+          ]);
+        }
+      }
+    ).subscribe();
+    realtimeChannelRef.current = channel;
+  }, [supabaseClient]);
+  React4.useEffect(() => {
+    return () => {
+      if (realtimeChannelRef.current && supabaseClient) {
+        supabaseClient.removeChannel(realtimeChannelRef.current);
+      }
+    };
+  }, [supabaseClient]);
+  const sendEscalatedMessage = React4.useCallback(async (content) => {
+    if (!supabaseClient || !isEscalated) return false;
+    try {
+      await supabaseClient.from("chat_history").insert({
+        session_id: sessionId,
+        role: "user",
+        content
+      });
+      return true;
+    } catch (err) {
+      console.error("[KiteChat] Failed to send escalated message:", err);
+      return false;
+    }
+  }, [supabaseClient, isEscalated, sessionId]);
   function streamAssistantMessage(messageId, fullText, followups) {
     let textToStream = fullText;
     let extractedFollowups = followups;
@@ -1651,6 +1714,17 @@ function ChatPanel({
       return;
     }
     if (!trimmed) return;
+    if (isEscalated && supabaseClient) {
+      const userMessage = {
+        id: Date.now(),
+        role: "user",
+        content: trimmed
+      };
+      setMessages((prev) => [...prev, userMessage]);
+      sendEscalatedMessage(trimmed);
+      setInput("");
+      return;
+    }
     startChatFlow(trimmed);
     setInput("");
   }
@@ -1979,6 +2053,18 @@ function ChatPanel({
               setProgressSteps([]);
               setPhase("idle");
               streamCompleted = true;
+            } else if (eventType === "escalation") {
+              setIsEscalated(true);
+              setPhase("idle");
+              const escalationMessageId = Date.now() + 2;
+              const escalationMessage = {
+                id: escalationMessageId,
+                role: "assistant",
+                kind: "text",
+                content: data.message || "You've been connected to our support queue. An agent will be with you shortly."
+              };
+              setMessages((prev) => [...prev, escalationMessage]);
+              subscribeToAgentMessages(sessionId);
             }
           } catch (parseError) {
             console.error("Failed to parse SSE event:", parseError);
@@ -2846,6 +2932,12 @@ ${userText}`
                 if (isUser) {
                   return /* @__PURE__ */ jsx9("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content }) }, message.id);
                 }
+                if (message.role === "agent") {
+                  return /* @__PURE__ */ jsx9("div", { className: `flex justify-start ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsxs5("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-blue-50 border border-blue-200 px-3.5 py-2.5 text-sm text-gray-900 shadow-sm", children: [
+                    /* @__PURE__ */ jsx9("div", { className: "text-xs text-blue-600 font-medium mb-1", children: "Support Agent" }),
+                    /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap leading-relaxed", children: renderMarkdown(message.content || "") })
+                  ] }) }, message.id);
+                }
                 if (message.kind === "searchSummary") {
                   return /* @__PURE__ */ jsx9(
                     "div",
@@ -4057,7 +4149,9 @@ function ChatPanelWithToggle({
   startingQuestionsEndpoint,
   defaultOpen = false,
   isOpen: controlledIsOpen,
-  onOpenChange
+  onOpenChange,
+  supabaseUrl,
+  supabaseAnonKey
 }) {
   const [internalIsOpen, setInternalIsOpen] = React4.useState(defaultOpen);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
@@ -4088,7 +4182,9 @@ function ChatPanelWithToggle({
       currentPage,
       agentUrl,
       startingQuestions,
-      startingQuestionsEndpoint
+      startingQuestionsEndpoint,
+      supabaseUrl,
+      supabaseAnonKey
     }
   );
 }

package/dist/{createKiteChat-CyoN-YV4.d.cts → createKiteChat-CGiuk776.d.cts}

@@ -98,8 +98,12 @@ interface ChatPanelProps {
     startingQuestions?: StartingQuestion[];
     /** API endpoint to fetch starting questions */
     startingQuestionsEndpoint?: string;
+    /** Supabase URL for Realtime escalation support */
+    supabaseUrl?: string;
+    /** Supabase anon key for Realtime escalation support */
+    supabaseAnonKey?: string;
 }
-declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, supabaseUrl, supabaseAnonKey, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
 /**
  * PanelToggle - An arrow button on the right edge that toggles the side panel
  * Shows left arrow when closed (click to open), right arrow when open (click to close)
@@ -144,8 +148,12 @@ interface ChatPanelWithToggleProps {
     isOpen?: boolean;
     /** Callback when panel open state changes */
     onOpenChange?: (isOpen: boolean) => void;
+    /** Supabase URL for Realtime escalation support */
+    supabaseUrl?: string;
+    /** Supabase anon key for Realtime escalation support */
+    supabaseAnonKey?: string;
 }
-declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, supabaseUrl, supabaseAnonKey, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
 /**
  * @deprecated Use ChatPanelWithToggle instead for the new side panel UX
  */

package/dist/{createKiteChat-CyoN-YV4.d.ts → createKiteChat-CGiuk776.d.ts}

@@ -98,8 +98,12 @@ interface ChatPanelProps {
     startingQuestions?: StartingQuestion[];
     /** API endpoint to fetch starting questions */
     startingQuestionsEndpoint?: string;
+    /** Supabase URL for Realtime escalation support */
+    supabaseUrl?: string;
+    /** Supabase anon key for Realtime escalation support */
+    supabaseAnonKey?: string;
 }
-declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, supabaseUrl, supabaseAnonKey, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
 /**
  * PanelToggle - An arrow button on the right edge that toggles the side panel
  * Shows left arrow when closed (click to open), right arrow when open (click to close)
@@ -144,8 +148,12 @@ interface ChatPanelWithToggleProps {
     isOpen?: boolean;
     /** Callback when panel open state changes */
     onOpenChange?: (isOpen: boolean) => void;
+    /** Supabase URL for Realtime escalation support */
+    supabaseUrl?: string;
+    /** Supabase anon key for Realtime escalation support */
+    supabaseAnonKey?: string;
 }
-declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, supabaseUrl, supabaseAnonKey, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
 /**
  * @deprecated Use ChatPanelWithToggle instead for the new side panel UX
  */