@kite-copilot/chat-panel 0.2.54 → 0.2.56

package/dist/{chunk-TK7U64UR.js → chunk-YTH7EUFD.js}

@@ -886,7 +886,7 @@ import * as React6 from "react";
 import { createPortal } from "react-dom";
 import { createClient } from "@supabase/supabase-js";
 import { ArrowLeft, ArrowUp, Command, CornerDownLeft, CheckCircle2 as CheckCircle23, SquarePen, Paperclip, X, FileSpreadsheet, Loader2 as Loader22, ChevronLeft, ChevronRight, Sparkles, Minus, Download } from "lucide-react";
-import { motion as motion2, useAnimationControls } from "framer-motion";
+import { motion as motion2, useDragControls } from "framer-motion";
 
 // src/hooks/useUserAuth.ts
 import * as React4 from "react";
@@ -1692,9 +1692,8 @@ function ChatPanel({
   const [input, setInput] = React6.useState("");
   const [corner, setCorner] = React6.useState(initialCorner);
   const [isDragging, setIsDragging] = React6.useState(false);
-  const dragControls = useAnimationControls();
+  const dragControls = useDragControls();
   const handleDragEnd = React6.useCallback((_event, info) => {
-    dragControls.set({ x: 0, y: 0 });
     setIsDragging(false);
     const viewportWidth = window.innerWidth;
     const pointerX = info.point.x;
@@ -1703,7 +1702,7 @@ function ChatPanel({
       setCorner(newCorner);
       onCornerChange?.(newCorner);
     }
-  }, [corner, onCornerChange, dragControls]);
+  }, [corner, onCornerChange]);
   const [sessionId, setSessionId] = React6.useState(() => crypto.randomUUID());
   const [sessionUser, setSessionUser] = React6.useState(null);
   const orgConfigState = useOrgConfig({ agentUrl, orgId: orgId || "" });
@@ -1776,6 +1775,18 @@ function ChatPanel({
         }
       );
     }
+    if (supabaseRef.current && sessionId) {
+      console.log("[KiteChat] resetSession - marking session as ended:", sessionId);
+      supabaseRef.current.from("sessions").update({ session_status: "ended" }).eq("session_id", sessionId).then(
+        () => console.log("[KiteChat] resetSession - session marked as ended successfully:", sessionId),
+        (err) => console.error("[KiteChat] resetSession - failed to mark session as ended:", sessionId, err)
+      );
+    } else {
+      console.log("[KiteChat] resetSession - skipped marking session as ended:", {
+        hasSupabase: !!supabaseRef.current,
+        sessionId
+      });
+    }
     setSessionUser(null);
     setSessionId(crypto.randomUUID());
     setIsEscalated(false);
@@ -1838,19 +1849,112 @@ function ChatPanel({
     };
   }, [isEscalated, sessionId, effectiveSupabaseUrl, effectiveSupabaseAnonKey]);
   React6.useEffect(() => {
-    if (!isOpen && isEscalated && supabaseRef.current && sessionId) {
-      console.log("[KiteChat] Panel closed during live chat, marking disconnected");
+    if (!sessionId || !supabaseRef.current || isEscalated) {
+      console.log("[KiteChat] Session status subscription skip - sessionId:", sessionId, "supabase:", !!supabaseRef.current, "isEscalated:", isEscalated);
+      return;
+    }
+    const channelName = `session-status:${sessionId}`;
+    console.log("[KiteChat] Subscribing to session status changes:", channelName);
+    const statusChannel = supabaseRef.current.channel(channelName).on(
+      "postgres_changes",
+      {
+        event: "UPDATE",
+        schema: "public",
+        table: "sessions",
+        filter: `session_id=eq.${sessionId}`
+      },
+      (payload) => {
+        console.log("[KiteChat] Session status changed:", payload);
+        if (payload.new.session_status === "escalated") {
+          console.log("[KiteChat] Manual escalation detected - agent took over from control center");
+          setIsEscalated(true);
+          setPhase("idle");
+          const escalationMessageId = Date.now() + 2;
+          const escalationMessage = {
+            id: escalationMessageId,
+            role: "assistant",
+            kind: "text",
+            content: "A support agent has joined the conversation and will assist you shortly."
+          };
+          setMessages((prev) => [...prev, escalationMessage]);
+        }
+      }
+    ).subscribe((status) => {
+      if (status === "SUBSCRIBED") {
+        console.log("[KiteChat] Successfully subscribed to session status changes");
+      } else if (status === "CHANNEL_ERROR") {
+        console.error("[KiteChat] Failed to subscribe to session status changes");
+      }
+    });
+    return () => {
+      console.log("[KiteChat] Unsubscribing from session status changes");
+      statusChannel.unsubscribe();
+    };
+  }, [sessionId, isEscalated, effectiveSupabaseUrl, effectiveSupabaseAnonKey]);
+  React6.useEffect(() => {
+    if (!isEscalated || !supabaseRef.current || !sessionId) {
+      return;
+    }
+    if (!isOpen) {
+      console.log("[KiteChat] Panel minimized during live chat, marking inactive");
       supabaseRef.current.from("escalations").update({
-        customer_status: "disconnected",
+        customer_status: "inactive",
+        customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
+      }).eq("session_id", sessionId).then(
+        () => console.log("[KiteChat] Successfully marked inactive on panel minimize"),
+        (err) => {
+          console.error("[KiteChat] Failed to mark inactive on panel minimize:", err);
+        }
+      );
+    } else {
+      console.log("[KiteChat] Panel reopened during live chat, marking active");
+      supabaseRef.current.from("escalations").update({
+        customer_status: "active",
         customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
       }).eq("session_id", sessionId).then(
-        () => console.log("[KiteChat] Successfully marked disconnected on panel close"),
+        () => console.log("[KiteChat] Successfully marked active on panel reopen"),
         (err) => {
-          console.error("[KiteChat] Failed to mark disconnected on panel close:", err);
+          console.error("[KiteChat] Failed to mark active on panel reopen:", err);
         }
       );
     }
   }, [isOpen, isEscalated, sessionId]);
+  React6.useEffect(() => {
+    if (!sessionId || !effectiveSupabaseUrl || !effectiveSupabaseAnonKey) {
+      console.log("[KiteChat] Session end handler skipped - missing:", {
+        sessionId: !!sessionId,
+        supabaseUrl: !!effectiveSupabaseUrl,
+        supabaseKey: !!effectiveSupabaseAnonKey
+      });
+      return;
+    }
+    const currentSessionId = sessionId;
+    const sbUrl = effectiveSupabaseUrl;
+    const sbKey = effectiveSupabaseAnonKey;
+    console.log("[KiteChat] Registering session end handler for session:", currentSessionId);
+    const markSessionEnded = () => {
+      console.log("[KiteChat] Marking session as ended:", currentSessionId);
+      const sessionsUrl = `${sbUrl}/rest/v1/sessions?session_id=eq.${currentSessionId}`;
+      fetch(sessionsUrl, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "apikey": sbKey,
+          "Authorization": `Bearer ${sbKey}`,
+          "Prefer": "return=minimal"
+        },
+        body: JSON.stringify({ session_status: "ended" }),
+        keepalive: true
+      }).catch(() => {
+      });
+    };
+    window.addEventListener("beforeunload", markSessionEnded);
+    return () => {
+      console.log("[KiteChat] Component unmounting - marking session as ended:", currentSessionId);
+      window.removeEventListener("beforeunload", markSessionEnded);
+      markSessionEnded();
+    };
+  }, [sessionId, effectiveSupabaseUrl, effectiveSupabaseAnonKey]);
   const heartbeatIntervalRef = React6.useRef(null);
   const updateCustomerStatus = React6.useCallback(async (status) => {
     if (!supabaseRef.current || !sessionId) return;
@@ -1881,8 +1985,21 @@ function ChatPanel({
         (err) => console.error("[KiteChat] Failed to update customer status:", err)
       );
     };
+    const markInactive = () => {
+      supabase.from("escalations").update({
+        customer_status: "inactive",
+        customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
+      }).eq("session_id", currentSessionId).then(
+        () => console.log("[KiteChat] Marked inactive on tab hidden"),
+        (err) => console.error("[KiteChat] Failed to mark inactive:", err)
+      );
+    };
     const markDisconnectedWithKeepalive = () => {
-      if (!sbUrl || !sbKey) return;
+      console.log("[KiteChat] markDisconnectedWithKeepalive called for escalated session:", currentSessionId);
+      if (!sbUrl || !sbKey) {
+        console.log("[KiteChat] markDisconnectedWithKeepalive skipped - missing credentials");
+        return;
+      }
       const url = `${sbUrl}/rest/v1/escalations?session_id=eq.${currentSessionId}`;
       fetch(url, {
         method: "PATCH",
@@ -1899,6 +2016,20 @@ function ChatPanel({
         keepalive: true
       }).catch(() => {
       });
+      console.log("[KiteChat] markDisconnectedWithKeepalive - also marking session as ended:", currentSessionId);
+      const sessionsUrl = `${sbUrl}/rest/v1/sessions?session_id=eq.${currentSessionId}`;
+      fetch(sessionsUrl, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "apikey": sbKey,
+          "Authorization": `Bearer ${sbKey}`,
+          "Prefer": "return=minimal"
+        },
+        body: JSON.stringify({ session_status: "ended" }),
+        keepalive: true
+      }).catch(() => {
+      });
     };
     console.log("[KiteChat] Starting presence heartbeat for live chat");
     markActive();
@@ -1911,6 +2042,8 @@ function ChatPanel({
     const handleVisibilityChange = () => {
       if (document.visibilityState === "visible") {
         markActive();
+      } else {
+        markInactive();
       }
     };
     window.addEventListener("beforeunload", handleBeforeUnload);
@@ -2673,7 +2806,7 @@ ${imageMarkdown}` : imageMarkdown;
         body: JSON.stringify({
           session_id: sessionId,
           message: userText,
-          current_page: currentPage || "dashboard",
+          current_page: typeof window !== "undefined" ? window.location.href : currentPage || "dashboard",
           user_id: userId,
           org_id: orgId,
           user_name: userName,
@@ -2870,6 +3003,7 @@ ${imageMarkdown}` : imageMarkdown;
               setPhase("idle");
               streamCompleted = true;
             } else if (eventType === "escalation") {
+              console.log("[KiteChat] SSE escalation event received (AI-triggered)");
               setIsEscalated(true);
               setPhase("idle");
               const escalationMessageId = Date.now() + 2;
@@ -2942,7 +3076,7 @@ ${userText}`
       formData.append("file", file);
       formData.append("message", userText);
       formData.append("session_id", sessionId);
-      formData.append("current_page", currentPage || "dashboard");
+      formData.append("current_page", typeof window !== "undefined" ? window.location.href : currentPage || "dashboard");
       if (orgId) formData.append("org_id", orgId);
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), 12e4);
@@ -3716,9 +3850,10 @@ ${userText}`
     motion2.section,
     {
       drag: true,
+      dragControls,
+      dragListener: false,
       dragMomentum: false,
       dragElastic: 0,
-      animate: dragControls,
       onDragStart: () => setIsDragging(true),
       onDragEnd: handleDragEnd,
       className: `fixed bottom-4 z-40 flex flex-col bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-2xl ${isDragging ? "cursor-grabbing" : ""} ${corner === "bottom-left" ? "left-4" : "right-4"} ${isOpen ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"}`,
@@ -3727,53 +3862,60 @@ ${userText}`
         height: `${PANEL_HEIGHT}px`
       },
       children: [
-        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0 cursor-grab active:cursor-grabbing", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2.5", children: [
-            /* @__PURE__ */ jsx10(Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" }),
-            /* @__PURE__ */ jsx10("h3", { className: "text-sm font-semibold text-gray-800", children: "Copilot" })
-          ] }),
-          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx10(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
-                onClick: () => {
-                  setMessages([]);
-                  resetSession();
-                  setCurrentFolderId(void 0);
-                  setActiveGuide(void 0);
-                  activeGuideRef.current = void 0;
-                  setGuideComplete(false);
-                },
-                children: /* @__PURE__ */ jsx10(SquarePen, { className: "h-3 w-3" })
-              }
-            ),
-            /* @__PURE__ */ jsx10(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
-                onClick: () => {
-                  if (isEscalated) {
-                    resetSession();
-                    setMessages([]);
-                    setPanelView("landing");
-                    setCurrentFolderId(void 0);
-                    setActiveGuide(void 0);
-                    activeGuideRef.current = void 0;
-                    setGuideComplete(false);
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0 cursor-grab active:cursor-grabbing",
+            onPointerDown: (e) => dragControls.start(e),
+            children: [
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2.5", children: [
+                /* @__PURE__ */ jsx10(Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" }),
+                /* @__PURE__ */ jsx10("h3", { className: "text-sm font-semibold text-gray-800", children: "Copilot" })
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx10(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
+                    onClick: () => {
+                      setMessages([]);
+                      resetSession();
+                      setCurrentFolderId(void 0);
+                      setActiveGuide(void 0);
+                      activeGuideRef.current = void 0;
+                      setGuideComplete(false);
+                    },
+                    children: /* @__PURE__ */ jsx10(SquarePen, { className: "h-3 w-3" })
                   }
-                  onClose?.();
-                },
-                children: /* @__PURE__ */ jsx10(Minus, { className: "h-3.5 w-3.5" })
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden relative", children: [
+                ),
+                /* @__PURE__ */ jsx10(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
+                    onClick: () => {
+                      if (isEscalated) {
+                        resetSession();
+                        setMessages([]);
+                        setPanelView("landing");
+                        setCurrentFolderId(void 0);
+                        setActiveGuide(void 0);
+                        activeGuideRef.current = void 0;
+                        setGuideComplete(false);
+                      }
+                      onClose?.();
+                    },
+                    children: /* @__PURE__ */ jsx10(Minus, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden relative select-text", children: [
           /* @__PURE__ */ jsx10(
             "div",
             {
@@ -3893,8 +4035,8 @@ ${userText}`
                 }
                 const agentImageUrls = message.imageUrls || extractedImageUrls;
                 const agentTextContent = contentStr.replace(/!\[image\]\([^)]+\)\n*/g, "").trim();
-                return /* @__PURE__ */ jsxs6("div", { className: `flex flex-col items-start gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
-                  isRoleChange && /* @__PURE__ */ jsx10("span", { className: "text-[10px] text-gray-500 mb-1 ml-1", children: "Agent" }),
+                return /* @__PURE__ */ jsxs6("div", { className: `flex flex-col items-start ${isRoleChange ? "mt-2" : ""}`, children: [
+                  isRoleChange && /* @__PURE__ */ jsx10("span", { className: "text-[10px] text-gray-500 mb-0.5 ml-1", children: "Agent" }),
                   agentImageUrls.length > 0 && /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-1 justify-start max-w-[300px]", children: agentImageUrls.map((url, imgIndex) => /* @__PURE__ */ jsx10(
                     "button",
                     {

package/dist/{createKiteChat-Cl1sNjam.d.cts → createKiteChat-DiJ2Otkm.d.cts}

@@ -94,6 +94,10 @@ interface ChatPanelProps {
     onBack?: () => void;
     onNavigate?: (page: Page, subtab?: SettingsTab) => void;
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
+    /**
+     * @deprecated The chat panel now automatically captures the browser URL (window.location.href).
+     * This prop is no longer needed and will be ignored.
+     */
     currentPage?: Page;
     agentUrl?: string;
     /** Custom starting questions (fetched per-user from backend) */
@@ -158,6 +162,10 @@ declare function PanelToggle({ isOpen, onClick, className, }: PanelToggleProps):
 interface ChatPanelWithToggleProps {
     onNavigate?: (page: Page, subtab?: SettingsTab) => void;
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
+    /**
+     * @deprecated The chat panel now automatically captures the browser URL (window.location.href).
+     * This prop is no longer needed and will be ignored.
+     */
     currentPage?: Page;
     agentUrl?: string;
     startingQuestions?: StartingQuestion[];
@@ -239,7 +247,10 @@ interface KiteChatConfig {
     orgId?: string;
     /** Backend agent API URL (defaults to http://localhost:5002) */
     agentUrl?: string;
-    /** Current page context for the chat (e.g., 'dashboard', 'settings') */
+    /**
+     * @deprecated The chat panel now automatically captures the browser URL (window.location.href).
+     * This prop is no longer needed and will be ignored.
+     */
     currentPage?: string;
     /** Theme mode */
     theme?: 'light' | 'dark' | 'system';
@@ -280,7 +291,10 @@ interface KiteChatInstance {
     toggle: () => void;
     /** Check if the panel is open */
     isOpen: () => boolean;
-    /** Update the current page context */
+    /**
+     * @deprecated The chat panel now automatically captures the browser URL (window.location.href).
+     * This method is no longer needed and will be ignored.
+     */
     setCurrentPage: (page: string) => void;
     /** Update configuration (userId, callbacks, etc.) */
     updateConfig: (config: Partial<KiteChatConfig>) => void;

package/dist/{createKiteChat-Cl1sNjam.d.ts → createKiteChat-DiJ2Otkm.d.ts}

@@ -94,6 +94,10 @@ interface ChatPanelProps {
     onBack?: () => void;
     onNavigate?: (page: Page, subtab?: SettingsTab) => void;
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
+    /**
+     * @deprecated The chat panel now automatically captures the browser URL (window.location.href).
+     * This prop is no longer needed and will be ignored.
+     */
     currentPage?: Page;
     agentUrl?: string;
     /** Custom starting questions (fetched per-user from backend) */
@@ -158,6 +162,10 @@ declare function PanelToggle({ isOpen, onClick, className, }: PanelToggleProps):
 interface ChatPanelWithToggleProps {
     onNavigate?: (page: Page, subtab?: SettingsTab) => void;
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
+    /**
+     * @deprecated The chat panel now automatically captures the browser URL (window.location.href).
+     * This prop is no longer needed and will be ignored.
+     */
     currentPage?: Page;
     agentUrl?: string;
     startingQuestions?: StartingQuestion[];
@@ -239,7 +247,10 @@ interface KiteChatConfig {
     orgId?: string;
     /** Backend agent API URL (defaults to http://localhost:5002) */
     agentUrl?: string;
-    /** Current page context for the chat (e.g., 'dashboard', 'settings') */
+    /**
+     * @deprecated The chat panel now automatically captures the browser URL (window.location.href).
+     * This prop is no longer needed and will be ignored.
+     */
     currentPage?: string;
     /** Theme mode */
     theme?: 'light' | 'dark' | 'system';
@@ -280,7 +291,10 @@ interface KiteChatInstance {
     toggle: () => void;
     /** Check if the panel is open */
     isOpen: () => boolean;
-    /** Update the current page context */
+    /**
+     * @deprecated The chat panel now automatically captures the browser URL (window.location.href).
+     * This method is no longer needed and will be ignored.
+     */
     setCurrentPage: (page: string) => void;
     /** Update configuration (userId, callbacks, etc.) */
     updateConfig: (config: Partial<KiteChatConfig>) => void;