@kite-copilot/chat-panel 0.2.35 → 0.2.37

package/dist/auto.cjs

@@ -915,6 +915,7 @@ function TypingIndicator({ className = "" }) {
 
 // src/ChatPanel.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var CHAT_PANEL_VERSION = "0.2.36";
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 340;
 function unescapeJsonString(str) {
@@ -1360,7 +1361,16 @@ function ChatPanel({
   const supabaseRef = React4.useRef(null);
   const typingChannelRef = React4.useRef(null);
   const typingTimeoutRef = React4.useRef(null);
+  React4.useEffect(() => {
+    console.log(`[KiteChat] Chat Panel v${CHAT_PANEL_VERSION} loaded`);
+  }, []);
   const resetSession = React4.useCallback(() => {
+    if (isEscalated && supabaseRef.current && sessionId) {
+      supabaseRef.current.from("escalations").update({
+        customer_status: "disconnected",
+        customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
+      }).eq("session_id", sessionId);
+    }
     setSessionId(crypto.randomUUID());
     setIsEscalated(false);
     if (escalationWsRef.current) {
@@ -1372,7 +1382,7 @@ function ChatPanel({
       typingChannelRef.current.unsubscribe();
       typingChannelRef.current = null;
     }
-  }, []);
+  }, [isEscalated, sessionId]);
   React4.useEffect(() => {
     if (supabaseUrl && supabaseAnonKey && !supabaseRef.current) {
       supabaseRef.current = (0, import_supabase_js.createClient)(supabaseUrl, supabaseAnonKey);
@@ -1384,9 +1394,12 @@ function ChatPanel({
     }
     const channelName = `typing:${sessionId}`;
     const channel = supabaseRef.current.channel(channelName);
+    console.log(`[KiteChat] Subscribing to typing channel: ${channelName}`);
     channel.on("broadcast", { event: "typing" }, (payload) => {
+      console.log("[KiteChat] Received typing broadcast:", payload);
       const { sender, isTyping } = payload.payload;
       if (sender === "agent") {
+        console.log(`[KiteChat] Agent typing: ${isTyping}`);
         setAgentIsTyping(isTyping);
         if (isTyping) {
           if (typingTimeoutRef.current) {
@@ -1397,8 +1410,13 @@ function ChatPanel({
           }, 5e3);
         }
       }
-    }).subscribe();
-    typingChannelRef.current = channel;
+    }).subscribe((status) => {
+      console.log(`[KiteChat] Typing channel status: ${status}`);
+      if (status === "SUBSCRIBED") {
+        typingChannelRef.current = channel;
+        console.log("[KiteChat] Typing channel ready");
+      }
+    });
     return () => {
       channel.unsubscribe();
       typingChannelRef.current = null;
@@ -1429,7 +1447,27 @@ function ChatPanel({
     heartbeatIntervalRef.current = window.setInterval(() => {
       updateCustomerStatus("active");
     }, 6e4);
+    const handleBeforeUnload = () => {
+      supabase.from("escalations").update({
+        customer_status: "disconnected",
+        customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
+      }).eq("session_id", currentSessionId);
+    };
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        supabase.from("escalations").update({
+          customer_status: "disconnected",
+          customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
+        }).eq("session_id", currentSessionId);
+      } else if (document.visibilityState === "visible") {
+        updateCustomerStatus("active");
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
     return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
       supabase.from("escalations").update({
         customer_status: "disconnected",
         customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
@@ -1448,7 +1486,15 @@ function ChatPanel({
     };
   }, [isEscalated, sessionId, updateCustomerStatus]);
   const sendTypingIndicator = React4.useCallback((isTyping) => {
-    if (!typingChannelRef.current || !isEscalated) return;
+    if (!typingChannelRef.current) {
+      console.log("[KiteChat] Cannot send typing - channel not ready");
+      return;
+    }
+    if (!isEscalated) {
+      console.log("[KiteChat] Cannot send typing - not escalated");
+      return;
+    }
+    console.log(`[KiteChat] Sending typing indicator: ${isTyping}`);
     typingChannelRef.current.send({
       type: "broadcast",
       event: "typing",
@@ -3011,7 +3057,18 @@ ${userText}`
                 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: () => onClose?.(),
+                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" })
               }
             )
@@ -3103,12 +3160,12 @@ ${userText}`
                   return null;
                 }
                 if (isUser) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.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);
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3 py-2 text-xs text-white shadow-sm", children: message.content }) }, message.id);
                 }
                 if (message.role === "agent") {
                   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-start ${isRoleChange ? "mt-3" : ""}`, children: [
-                    isRoleChange && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs text-gray-500 mb-1 ml-1", children: "Agent" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-white border border-gray-200 px-3.5 py-2.5 text-sm text-gray-800 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap leading-relaxed", children: renderMarkdown(message.content || "") }) })
+                    isRoleChange && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-gray-500 mb-1 ml-1", children: "Agent" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-white border border-gray-200 px-3 py-2 text-xs text-gray-800 shadow-sm", children: message.content })
                   ] }, message.id);
                 }
                 if (message.kind === "searchSummary") {
@@ -4161,7 +4218,7 @@ ${userText}`
                   progressSteps
                 }
               ) }),
-              isEscalated && agentIsTyping && phase === "idle" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TypingIndicator, {}) }),
+              isEscalated && agentIsTyping && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TypingIndicator, {}) }),
               !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: messagesEndRef })
             ] }) }) }) })
           }

package/dist/auto.js

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

package/dist/{chunk-YOXFN57J.js → chunk-VXXE7QO3.js}

@@ -916,6 +916,7 @@ function TypingIndicator({ className = "" }) {
 
 // src/ChatPanel.tsx
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var CHAT_PANEL_VERSION = "0.2.36";
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 340;
 function unescapeJsonString(str) {
@@ -1361,7 +1362,16 @@ function ChatPanel({
   const supabaseRef = React4.useRef(null);
   const typingChannelRef = React4.useRef(null);
   const typingTimeoutRef = React4.useRef(null);
+  React4.useEffect(() => {
+    console.log(`[KiteChat] Chat Panel v${CHAT_PANEL_VERSION} loaded`);
+  }, []);
   const resetSession = React4.useCallback(() => {
+    if (isEscalated && supabaseRef.current && sessionId) {
+      supabaseRef.current.from("escalations").update({
+        customer_status: "disconnected",
+        customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
+      }).eq("session_id", sessionId);
+    }
     setSessionId(crypto.randomUUID());
     setIsEscalated(false);
     if (escalationWsRef.current) {
@@ -1373,7 +1383,7 @@ function ChatPanel({
       typingChannelRef.current.unsubscribe();
       typingChannelRef.current = null;
     }
-  }, []);
+  }, [isEscalated, sessionId]);
   React4.useEffect(() => {
     if (supabaseUrl && supabaseAnonKey && !supabaseRef.current) {
       supabaseRef.current = createClient(supabaseUrl, supabaseAnonKey);
@@ -1385,9 +1395,12 @@ function ChatPanel({
     }
     const channelName = `typing:${sessionId}`;
     const channel = supabaseRef.current.channel(channelName);
+    console.log(`[KiteChat] Subscribing to typing channel: ${channelName}`);
     channel.on("broadcast", { event: "typing" }, (payload) => {
+      console.log("[KiteChat] Received typing broadcast:", payload);
       const { sender, isTyping } = payload.payload;
       if (sender === "agent") {
+        console.log(`[KiteChat] Agent typing: ${isTyping}`);
         setAgentIsTyping(isTyping);
         if (isTyping) {
           if (typingTimeoutRef.current) {
@@ -1398,8 +1411,13 @@ function ChatPanel({
           }, 5e3);
         }
       }
-    }).subscribe();
-    typingChannelRef.current = channel;
+    }).subscribe((status) => {
+      console.log(`[KiteChat] Typing channel status: ${status}`);
+      if (status === "SUBSCRIBED") {
+        typingChannelRef.current = channel;
+        console.log("[KiteChat] Typing channel ready");
+      }
+    });
     return () => {
       channel.unsubscribe();
       typingChannelRef.current = null;
@@ -1430,7 +1448,27 @@ function ChatPanel({
     heartbeatIntervalRef.current = window.setInterval(() => {
       updateCustomerStatus("active");
     }, 6e4);
+    const handleBeforeUnload = () => {
+      supabase.from("escalations").update({
+        customer_status: "disconnected",
+        customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
+      }).eq("session_id", currentSessionId);
+    };
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        supabase.from("escalations").update({
+          customer_status: "disconnected",
+          customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
+        }).eq("session_id", currentSessionId);
+      } else if (document.visibilityState === "visible") {
+        updateCustomerStatus("active");
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
     return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
       supabase.from("escalations").update({
         customer_status: "disconnected",
         customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
@@ -1449,7 +1487,15 @@ function ChatPanel({
     };
   }, [isEscalated, sessionId, updateCustomerStatus]);
   const sendTypingIndicator = React4.useCallback((isTyping) => {
-    if (!typingChannelRef.current || !isEscalated) return;
+    if (!typingChannelRef.current) {
+      console.log("[KiteChat] Cannot send typing - channel not ready");
+      return;
+    }
+    if (!isEscalated) {
+      console.log("[KiteChat] Cannot send typing - not escalated");
+      return;
+    }
+    console.log(`[KiteChat] Sending typing indicator: ${isTyping}`);
     typingChannelRef.current.send({
       type: "broadcast",
       event: "typing",
@@ -3012,7 +3058,18 @@ ${userText}`
                 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: () => onClose?.(),
+                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" })
               }
             )
@@ -3104,12 +3161,12 @@ ${userText}`
                   return null;
                 }
                 if (isUser) {
-                  return /* @__PURE__ */ jsx10("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx10("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);
+                  return /* @__PURE__ */ jsx10("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx10("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3 py-2 text-xs text-white shadow-sm", children: message.content }) }, message.id);
                 }
                 if (message.role === "agent") {
                   return /* @__PURE__ */ jsxs6("div", { className: `flex flex-col items-start ${isRoleChange ? "mt-3" : ""}`, children: [
-                    isRoleChange && /* @__PURE__ */ jsx10("span", { className: "text-xs text-gray-500 mb-1 ml-1", children: "Agent" }),
-                    /* @__PURE__ */ jsx10("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-white border border-gray-200 px-3.5 py-2.5 text-sm text-gray-800 shadow-sm", children: /* @__PURE__ */ jsx10("div", { className: "whitespace-pre-wrap leading-relaxed", children: renderMarkdown(message.content || "") }) })
+                    isRoleChange && /* @__PURE__ */ jsx10("span", { className: "text-[10px] text-gray-500 mb-1 ml-1", children: "Agent" }),
+                    /* @__PURE__ */ jsx10("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-white border border-gray-200 px-3 py-2 text-xs text-gray-800 shadow-sm", children: message.content })
                   ] }, message.id);
                 }
                 if (message.kind === "searchSummary") {
@@ -4162,7 +4219,7 @@ ${userText}`
                   progressSteps
                 }
               ) }),
-              isEscalated && agentIsTyping && phase === "idle" && /* @__PURE__ */ jsx10("div", { className: "mt-2", children: /* @__PURE__ */ jsx10(TypingIndicator, {}) }),
+              isEscalated && agentIsTyping && /* @__PURE__ */ jsx10("div", { className: "mt-2", children: /* @__PURE__ */ jsx10(TypingIndicator, {}) }),
               !activeGuide && /* @__PURE__ */ jsx10("div", { ref: messagesEndRef })
             ] }) }) }) })
           }