@kite-copilot/chat-panel 0.2.54 → 0.2.56

package/README.md

@@ -6,6 +6,7 @@ An AI-powered chat panel SDK for embedding intelligent chat assistants. This pac
 
 - **Side Panel UX**: Slides in from the right edge, pushes page content (no overlay)
 - **Zero-Config**: Drop-in integration - no layout changes required from host apps
+- **Automatic URL Tracking**: Captures the exact browser URL (including path and query params) for context
 - **AI-Powered Chat**: Connects to your AI backend agent for intelligent responses
 - **CSV Bulk Operations**: Upload CSV files for bulk data processing
 - **Interactive Guides**: Built-in guided tours with animated cursor
@@ -76,11 +77,11 @@ if (chat.isOpen()) {
   console.log('Panel is open');
 }
 
-// Update context as user navigates
-chat.setCurrentPage('settings');
-
 // Clean up when done
 chat.unmount();
+
+// Note: The chat panel automatically captures the browser URL (window.location.href)
+// so you don't need to manually track or pass the current page.
 ```
 
 ### Vue.js
@@ -124,11 +125,7 @@ export function useKiteChat(config: KiteChatConfig) {
     isOpen.value = !isOpen.value;
   };
 
-  const setCurrentPage = (page: string) => {
-    chat.value?.setCurrentPage(page);
-  };
-
-  return { isOpen, open, close, toggle, setCurrentPage };
+  return { isOpen, open, close, toggle };
 }
 ```
 
@@ -142,7 +139,7 @@ import { useRouter } from 'vue-router';
 
 const router = useRouter();
 
-const { open, close, toggle, setCurrentPage } = useKiteChat({
+const { open, close, toggle } = useKiteChat({
   userId: 'user-123',
   agentUrl: 'https://your-api.example.com',
   onNavigate: (page, subtab) => {
@@ -150,10 +147,8 @@ const { open, close, toggle, setCurrentPage } = useKiteChat({
   },
 });
 
-// Update context when route changes
-router.afterEach((to) => {
-  setCurrentPage(to.name as string);
-});
+// Note: The chat panel automatically captures window.location.href,
+// so you don't need to manually track route changes.
 </script>
 
 <template>
@@ -320,7 +315,7 @@ Creates a new chat instance with explicit lifecycle control.
 | `userId` | `string` | Yes | Unique identifier for the current user |
 | `orgId` | `string` | No | Organization ID for multi-tenant data isolation |
 | `agentUrl` | `string` | No | Backend agent API URL |
-| `currentPage` | `string` | No | Current page context |
+| ~~`currentPage`~~ | `string` | No | **Deprecated** - URL is now captured automatically |
 | `userName` | `string` | No | User's display name (for control center) |
 | `userEmail` | `string` | No | User's email address (for control center) |
 | `theme` | `'light' \| 'dark' \| 'system'` | No | Theme preference |
@@ -340,7 +335,7 @@ Creates a new chat instance with explicit lifecycle control.
 | `close()` | Close the side panel |
 | `toggle()` | Toggle the panel open/closed |
 | `isOpen()` | Check if the panel is currently open |
-| `setCurrentPage(page)` | Update the current page context |
+| ~~`setCurrentPage(page)`~~ | **Deprecated** - URL is now captured automatically |
 | `updateConfig(config)` | Update configuration options |
 | `isMounted()` | Check if the widget is currently mounted |
 
@@ -357,7 +352,7 @@ import { ChatPanelWithToggle } from '@kite-copilot/chat-panel';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `agentUrl` | `string` | `localhost:5002` | Backend agent URL |
-| `currentPage` | `string` | - | Current page for context |
+| ~~`currentPage`~~ | `string` | - | **Deprecated** - URL is now captured automatically |
 | `userId` | `string` | - | Unique user identifier |
 | `orgId` | `string` | - | Organization ID for multi-tenant data isolation |
 | `userName` | `string` | - | User's display name (for control center) |
@@ -457,7 +452,7 @@ Main chat endpoint for streaming responses.
   "user_id": "user-123",
   "org_id": "org-456",
   "message": "user message",
-  "current_page": "dashboard",
+  "current_page": "https://example.com/dashboard/123?tab=settings",
   "user_name": "John Doe",
   "user_email": "john@example.com"
 }
@@ -473,7 +468,7 @@ Main chat endpoint for streaming responses.
 
 CSV file upload endpoint for bulk operations.
 
-**Request:** FormData with `file`, `message`, `session_id`, `user_id`, `org_id`, `current_page`
+**Request:** FormData with `file`, `message`, `session_id`, `user_id`, `org_id`, `current_page` (full browser URL)
 
 ### `/chat/bulk/confirm` (POST)
 

package/dist/auto.cjs

@@ -1691,9 +1691,8 @@ function ChatPanel({
   const [input, setInput] = React6.useState("");
   const [corner, setCorner] = React6.useState(initialCorner);
   const [isDragging, setIsDragging] = React6.useState(false);
-  const dragControls = (0, import_framer_motion2.useAnimationControls)();
+  const dragControls = (0, import_framer_motion2.useDragControls)();
   const handleDragEnd = React6.useCallback((_event, info) => {
-    dragControls.set({ x: 0, y: 0 });
     setIsDragging(false);
     const viewportWidth = window.innerWidth;
     const pointerX = info.point.x;
@@ -1702,7 +1701,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 || "" });
@@ -1775,6 +1774,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);
@@ -1837,19 +1848,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;
@@ -1880,8 +1984,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",
@@ -1898,6 +2015,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();
@@ -1910,6 +2041,8 @@ function ChatPanel({
     const handleVisibilityChange = () => {
       if (document.visibilityState === "visible") {
         markActive();
+      } else {
+        markInactive();
       }
     };
     window.addEventListener("beforeunload", handleBeforeUnload);
@@ -2672,7 +2805,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,
@@ -2869,6 +3002,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;
@@ -2941,7 +3075,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);
@@ -3715,9 +3849,10 @@ ${userText}`
     import_framer_motion2.motion.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"}`,
@@ -3726,53 +3861,60 @@ ${userText}`
         height: `${PANEL_HEIGHT}px`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-gray-800", children: "Copilot" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              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__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.SquarePen, { className: "h-3 w-3" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              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__ */ (0, import_jsx_runtime10.jsxs)(
+          "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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-gray-800", children: "Copilot" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  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__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.SquarePen, { className: "h-3 w-3" })
                   }
-                  onClose?.();
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Minus, { className: "h-3.5 w-3.5" })
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden relative", children: [
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  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__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Minus, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden relative select-text", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "div",
             {
@@ -3892,8 +4034,8 @@ ${userText}`
                 }
                 const agentImageUrls = message.imageUrls || extractedImageUrls;
                 const agentTextContent = contentStr.replace(/!\[image\]\([^)]+\)\n*/g, "").trim();
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-start gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
-                  isRoleChange && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-gray-500 mb-1 ml-1", children: "Agent" }),
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-start ${isRoleChange ? "mt-2" : ""}`, children: [
+                  isRoleChange && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-gray-500 mb-0.5 ml-1", children: "Agent" }),
                   agentImageUrls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1 justify-start max-w-[300px]", children: agentImageUrls.map((url, imgIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "button",
                     {

package/dist/auto.d.cts

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

package/dist/auto.d.ts

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

package/dist/auto.js

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