@kite-copilot/chat-panel 0.2.38 → 0.2.40

package/dist/{chunk-QSVOPKVC.js → chunk-XMA5S556.js}

@@ -882,10 +882,62 @@ function DataRenderer({ type, data }) {
 }
 
 // src/ChatPanel.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 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 } from "lucide-react";
 
+// src/hooks/useUserAuth.ts
+import * as React4 from "react";
+function useUserAuth({
+  productBackendUrl,
+  sessionId,
+  enabled = true
+}) {
+  const [authState, setAuthState] = React4.useState({ status: "idle" });
+  const lastSessionIdRef = React4.useRef(null);
+  const fetchUser = React4.useCallback(async () => {
+    if (!productBackendUrl || !enabled) {
+      setAuthState({ status: "idle" });
+      return;
+    }
+    setAuthState({ status: "loading" });
+    try {
+      const response = await fetch(`${productBackendUrl}/users/me`, {
+        method: "GET",
+        credentials: "include",
+        // Include cookies for authentication
+        headers: {
+          "Accept": "application/json"
+        }
+      });
+      if (!response.ok) {
+        if (response.status === 401) {
+          throw new Error("Please log in to use the chat assistant.");
+        }
+        if (response.status === 403) {
+          throw new Error("You do not have permission to access this feature.");
+        }
+        throw new Error(`Authentication failed (${response.status})`);
+      }
+      const user = await response.json();
+      setAuthState({ status: "authenticated", user });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unable to verify your identity. Please try again.";
+      setAuthState({ status: "error", error: message });
+    }
+  }, [productBackendUrl, enabled]);
+  React4.useEffect(() => {
+    if (sessionId !== lastSessionIdRef.current) {
+      lastSessionIdRef.current = sessionId;
+      fetchUser();
+    }
+  }, [sessionId, fetchUser]);
+  const retry = React4.useCallback(() => {
+    fetchUser();
+  }, [fetchUser]);
+  return { authState, retry };
+}
+
 // src/components/TypingIndicator.tsx
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function TypingIndicator({ className = "" }) {
@@ -916,7 +968,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 = true ? "0.2.38" : "dev";
+var CHAT_PANEL_VERSION = true ? "0.2.40" : "dev";
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 340;
 function unescapeJsonString(str) {
@@ -1334,6 +1386,32 @@ var guides = {
   }
 };
 var initialMessages = [];
+function AuthLoadingState() {
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center justify-center h-full p-6", children: [
+    /* @__PURE__ */ jsx10(Loader22, { className: "h-8 w-8 animate-spin text-gray-400 mb-3" }),
+    /* @__PURE__ */ jsx10("p", { className: "text-xs text-gray-500", children: "Verifying your identity..." })
+  ] });
+}
+function AuthErrorState({
+  error,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center justify-center h-full p-6 text-center", children: [
+    /* @__PURE__ */ jsx10("div", { className: "w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx10(X, { className: "h-6 w-6 text-red-600" }) }),
+    /* @__PURE__ */ jsx10("h3", { className: "text-sm font-semibold text-gray-900 mb-2", children: "Unable to Start Chat" }),
+    /* @__PURE__ */ jsx10("p", { className: "text-xs text-gray-500 mb-4 max-w-[240px]", children: error }),
+    /* @__PURE__ */ jsx10(
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        onClick: onRetry,
+        className: "h-8 px-4 text-xs",
+        children: "Try Again"
+      }
+    )
+  ] });
+}
 function ChatPanel({
   isOpen = true,
   onClose,
@@ -1351,26 +1429,62 @@ function ChatPanel({
   userEmail,
   userOrganization,
   supabaseUrl,
-  supabaseAnonKey
+  supabaseAnonKey,
+  productBackendUrl
 } = {}) {
-  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 escalationWsRef = React4.useRef(null);
-  const [agentIsTyping, setAgentIsTyping] = React4.useState(false);
-  const supabaseRef = React4.useRef(null);
-  const typingChannelRef = React4.useRef(null);
-  const typingTimeoutRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const [messages, setMessages] = React5.useState(initialMessages);
+  const [input, setInput] = React5.useState("");
+  const [sessionId, setSessionId] = React5.useState(() => crypto.randomUUID());
+  const { authState, retry: retryAuth } = useUserAuth({
+    productBackendUrl,
+    sessionId,
+    enabled: !!productBackendUrl
+    // Only enable if URL is provided
+  });
+  const effectiveUser = React5.useMemo(() => {
+    if (authState.status === "authenticated") {
+      return {
+        userId: authState.user.id,
+        userName: authState.user.name,
+        userEmail: authState.user.email,
+        userRole: authState.user.role,
+        isInternal: authState.user.isInternal
+      };
+    }
+    return {
+      userId: userId || "anonymous",
+      userName: userName || "Anonymous User",
+      userEmail: userEmail || "Not provided",
+      userRole: void 0,
+      isInternal: false
+    };
+  }, [authState, userId, userName, userEmail]);
+  const [isEscalated, setIsEscalated] = React5.useState(false);
+  const escalationWsRef = React5.useRef(null);
+  const [agentIsTyping, setAgentIsTyping] = React5.useState(false);
+  const supabaseRef = React5.useRef(null);
+  const typingChannelRef = React5.useRef(null);
+  const typingTimeoutRef = React5.useRef(null);
+  React5.useEffect(() => {
     console.log(`[KiteChat] Chat Panel v${CHAT_PANEL_VERSION} loaded`);
   }, []);
-  const resetSession = React4.useCallback(() => {
+  const resetSession = React5.useCallback(() => {
+    console.log("[KiteChat] resetSession called", { isEscalated, hasSupabase: !!supabaseRef.current, sessionId });
     if (isEscalated && supabaseRef.current && sessionId) {
+      console.log("[KiteChat] Updating customer_status to disconnected for session:", sessionId);
       supabaseRef.current.from("escalations").update({
         customer_status: "disconnected",
         customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
-      }).eq("session_id", sessionId);
+      }).eq("session_id", sessionId).then(
+        (result) => {
+          console.log("[KiteChat] Disconnect update result:", result);
+        },
+        (err) => {
+          console.error("[KiteChat] Disconnect update failed:", err);
+        }
+      );
+    } else {
+      console.log("[KiteChat] Skipping disconnect update - conditions not met");
     }
     setSessionId(crypto.randomUUID());
     setIsEscalated(false);
@@ -1384,12 +1498,12 @@ function ChatPanel({
       typingChannelRef.current = null;
     }
   }, [isEscalated, sessionId]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (supabaseUrl && supabaseAnonKey && !supabaseRef.current) {
       supabaseRef.current = createClient(supabaseUrl, supabaseAnonKey);
     }
   }, [supabaseUrl, supabaseAnonKey]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!isEscalated || !sessionId || !supabaseRef.current) {
       return;
     }
@@ -1426,8 +1540,8 @@ function ChatPanel({
       }
     };
   }, [isEscalated, sessionId]);
-  const heartbeatIntervalRef = React4.useRef(null);
-  const updateCustomerStatus = React4.useCallback(async (status) => {
+  const heartbeatIntervalRef = React5.useRef(null);
+  const updateCustomerStatus = React5.useCallback(async (status) => {
     if (!supabaseRef.current || !sessionId) return;
     try {
       await supabaseRef.current.from("escalations").update({
@@ -1438,7 +1552,7 @@ function ChatPanel({
       console.error("[KiteChat] Failed to update customer status:", err);
     }
   }, [sessionId]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!isEscalated || !sessionId || !supabaseRef.current) {
       return;
     }
@@ -1486,7 +1600,7 @@ function ChatPanel({
       }
     };
   }, [isEscalated, sessionId, updateCustomerStatus]);
-  const sendTypingIndicator = React4.useCallback((isTyping) => {
+  const sendTypingIndicator = React5.useCallback((isTyping) => {
     if (!typingChannelRef.current) {
       console.log("[KiteChat] Cannot send typing - channel not ready");
       return;
@@ -1502,8 +1616,8 @@ function ChatPanel({
       payload: { sender: "user", isTyping }
     });
   }, [isEscalated]);
-  const userTypingTimeoutRef = React4.useRef(null);
-  const handleTypingStart = React4.useCallback(() => {
+  const userTypingTimeoutRef = React5.useRef(null);
+  const handleTypingStart = React5.useCallback(() => {
     if (!isEscalated || !supabaseRef.current) return;
     sendTypingIndicator(true);
     updateCustomerStatus("active");
@@ -1514,19 +1628,19 @@ function ChatPanel({
       sendTypingIndicator(false);
     }, 1500);
   }, [isEscalated, sendTypingIndicator, updateCustomerStatus]);
-  const streamIntervals = React4.useRef({});
+  const streamIntervals = React5.useRef({});
   const isEmpty = messages.length === 0;
-  const [phase, setPhase] = React4.useState("idle");
-  const [progressSteps, setProgressSteps] = React4.useState([]);
-  const phaseTimers = React4.useRef([]);
+  const [phase, setPhase] = React5.useState("idle");
+  const [progressSteps, setProgressSteps] = React5.useState([]);
+  const phaseTimers = React5.useRef([]);
   const lastRole = messages.length ? messages[messages.length - 1].role : void 0;
-  const [panelView, setPanelView] = React4.useState(
+  const [panelView, setPanelView] = React5.useState(
     "landing"
   );
-  const [currentFolderId, setCurrentFolderId] = React4.useState(void 0);
-  const [startingQuestions, setStartingQuestions] = React4.useState(startingQuestionsProp || defaultStartingQuestions);
-  const [loadingQuestions, setLoadingQuestions] = React4.useState(false);
-  React4.useEffect(() => {
+  const [currentFolderId, setCurrentFolderId] = React5.useState(void 0);
+  const [startingQuestions, setStartingQuestions] = React5.useState(startingQuestionsProp || defaultStartingQuestions);
+  const [loadingQuestions, setLoadingQuestions] = React5.useState(false);
+  React5.useEffect(() => {
     if (startingQuestionsEndpoint && !startingQuestionsProp) {
       setLoadingQuestions(true);
       fetch(startingQuestionsEndpoint).then((res) => res.json()).then((data) => {
@@ -1538,16 +1652,16 @@ function ChatPanel({
       }).finally(() => setLoadingQuestions(false));
     }
   }, [startingQuestionsEndpoint, startingQuestionsProp]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (startingQuestionsProp) {
       setStartingQuestions(startingQuestionsProp);
     }
   }, [startingQuestionsProp]);
-  const [activeGuide, setActiveGuide] = React4.useState(void 0);
-  const activeGuideRef = React4.useRef(void 0);
-  const latestBulkSummaryNavigationRef = React4.useRef(null);
-  const [guideComplete, setGuideComplete] = React4.useState(false);
-  React4.useEffect(() => {
+  const [activeGuide, setActiveGuide] = React5.useState(void 0);
+  const activeGuideRef = React5.useRef(void 0);
+  const latestBulkSummaryNavigationRef = React5.useRef(null);
+  const [guideComplete, setGuideComplete] = React5.useState(false);
+  React5.useEffect(() => {
     window.resetIntegrationNotification = () => {
       localStorage.removeItem("gmailNotificationSeen");
       console.log(
@@ -1581,7 +1695,7 @@ function ChatPanel({
       );
     };
   }, []);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (activeGuide) {
       if (!activeGuideRef.current || activeGuideRef.current.id !== activeGuide.id || activeGuideRef.current.stepIndex !== activeGuide.stepIndex) {
         activeGuideRef.current = activeGuide;
@@ -1590,21 +1704,21 @@ function ChatPanel({
       activeGuideRef.current = void 0;
     }
   }, [activeGuide]);
-  const [pendingNavigation, setPendingNavigation] = React4.useState(null);
-  const [pendingAction, setPendingAction] = React4.useState(null);
-  const [actionFormData, setActionFormData] = React4.useState({});
-  const messagesEndRef = React4.useRef(null);
-  const messagesContainerRef = React4.useRef(null);
-  const currentStepRef = React4.useRef(null);
+  const [pendingNavigation, setPendingNavigation] = React5.useState(null);
+  const [pendingAction, setPendingAction] = React5.useState(null);
+  const [actionFormData, setActionFormData] = React5.useState({});
+  const messagesEndRef = React5.useRef(null);
+  const messagesContainerRef = React5.useRef(null);
+  const currentStepRef = React5.useRef(null);
   const { cursorState, moveTo, hide } = useGuideCursor();
-  const [pendingFile, setPendingFile] = React4.useState(null);
-  const [pendingBulkSession, setPendingBulkSession] = React4.useState(null);
-  const pendingBulkSessionRef = React4.useRef(null);
-  const fileInputRef = React4.useRef(null);
-  const [searchExpanded, setSearchExpanded] = React4.useState(false);
-  const [searchInput, setSearchInput] = React4.useState("");
-  const searchInputRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const [pendingFile, setPendingFile] = React5.useState(null);
+  const [pendingBulkSession, setPendingBulkSession] = React5.useState(null);
+  const pendingBulkSessionRef = React5.useRef(null);
+  const fileInputRef = React5.useRef(null);
+  const [searchExpanded, setSearchExpanded] = React5.useState(false);
+  const [searchInput, setSearchInput] = React5.useState("");
+  const searchInputRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (!activeGuide || activeGuide.id !== "add-api-key" || activeGuide.stepIndex !== 2) {
       return;
     }
@@ -1630,7 +1744,7 @@ function ChatPanel({
     const interval = setInterval(checkForDialogOpen, 300);
     return () => clearInterval(interval);
   }, [activeGuide, hide]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     return () => {
       Object.values(streamIntervals.current).forEach(
         (id) => window.clearInterval(id)
@@ -1640,7 +1754,7 @@ function ChatPanel({
       phaseTimers.current = [];
     };
   }, []);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (activeGuide && messages.length > 0) {
       const lastMessage = messages[messages.length - 1];
       if (lastMessage.kind === "guideStep" || lastMessage.kind === "guideComplete") {
@@ -1657,7 +1771,7 @@ function ChatPanel({
       messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages, phase, activeGuide]);
-  const latestBulkSummaryNavigation = React4.useMemo(() => {
+  const latestBulkSummaryNavigation = React5.useMemo(() => {
     for (let i = messages.length - 1; i >= 0; i--) {
       const msg = messages[i];
       if (msg.kind === "bulkSummary" && msg.bulkSummary?.navigationPage && msg.bulkSummary.successes > 0) {
@@ -1666,13 +1780,13 @@ function ChatPanel({
     }
     return null;
   }, [messages]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     latestBulkSummaryNavigationRef.current = latestBulkSummaryNavigation;
   }, [latestBulkSummaryNavigation]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     pendingBulkSessionRef.current = pendingBulkSession;
   }, [pendingBulkSession]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     const handleKeyDown = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
         const currentBulkSession = pendingBulkSessionRef.current;
@@ -1735,7 +1849,7 @@ function ChatPanel({
     guideComplete,
     onNavigate
   ]);
-  const connectToEscalationWs = React4.useCallback((currentSessionId) => {
+  const connectToEscalationWs = React5.useCallback((currentSessionId) => {
     if (!agentUrl) return;
     if (escalationWsRef.current) {
       escalationWsRef.current.close();
@@ -1778,7 +1892,7 @@ function ChatPanel({
     };
     escalationWsRef.current = ws;
   }, [agentUrl]);
-  const sendEscalatedMessage = React4.useCallback(async (content) => {
+  const sendEscalatedMessage = React5.useCallback(async (content) => {
     if (!escalationWsRef.current || escalationWsRef.current.readyState !== WebSocket.OPEN) {
       console.error("[KiteChat] Escalation WebSocket not connected");
       return false;
@@ -1795,14 +1909,14 @@ function ChatPanel({
       return false;
     }
   }, [updateCustomerStatus]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     return () => {
       if (escalationWsRef.current) {
         escalationWsRef.current.close();
       }
     };
   }, []);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (isEscalated && sessionId) {
       connectToEscalationWs(sessionId);
     }
@@ -2077,9 +2191,9 @@ function ChatPanel({
           session_id: sessionId,
           message: userText,
           current_page: currentPage || "dashboard",
-          user_id: userId,
-          user_name: userName,
-          user_email: userEmail,
+          user_id: effectiveUser.userId,
+          user_name: effectiveUser.userName,
+          user_email: effectiveUser.userEmail,
           user_organization: userOrganization,
           org_id: orgId
         }),
@@ -3022,6 +3136,64 @@ ${userText}`
       ] })
     ] }) }) });
   }
+  if (productBackendUrl) {
+    if (authState.status === "loading") {
+      return /* @__PURE__ */ jsxs6(
+        "section",
+        {
+          className: `fixed top-0 right-0 z-40 flex flex-col bg-white border-l border-gray-200 h-full overflow-hidden transition-transform duration-300 ${isOpen ? "translate-x-0" : "translate-x-full"}`,
+          style: { width: `${PANEL_WIDTH}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", 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__ */ 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: () => onClose?.(),
+                  children: /* @__PURE__ */ jsx10(Minus, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx10(AuthLoadingState, {})
+          ]
+        }
+      );
+    }
+    if (authState.status === "error") {
+      return /* @__PURE__ */ jsxs6(
+        "section",
+        {
+          className: `fixed top-0 right-0 z-40 flex flex-col bg-white border-l border-gray-200 h-full overflow-hidden transition-transform duration-300 ${isOpen ? "translate-x-0" : "translate-x-full"}`,
+          style: { width: `${PANEL_WIDTH}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", 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__ */ 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: () => onClose?.(),
+                  children: /* @__PURE__ */ jsx10(Minus, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx10(AuthErrorState, { error: authState.error, onRetry: retryAuth })
+          ]
+        }
+      );
+    }
+  }
   return /* @__PURE__ */ jsxs6(
     "section",
     {
@@ -4139,7 +4311,7 @@ ${userText}`
                     message.id
                   );
                 }
-                return /* @__PURE__ */ jsx10(React4.Fragment, { children: /* @__PURE__ */ jsxs6(
+                return /* @__PURE__ */ jsx10(React5.Fragment, { children: /* @__PURE__ */ jsxs6(
                   "div",
                   {
                     ref: isCurrentGuideStep ? currentStepRef : null,
@@ -4393,9 +4565,10 @@ function ChatPanelWithToggle({
   userEmail,
   userOrganization,
   supabaseUrl,
-  supabaseAnonKey
+  supabaseAnonKey,
+  productBackendUrl
 }) {
-  const [internalIsOpen, setInternalIsOpen] = React4.useState(defaultOpen);
+  const [internalIsOpen, setInternalIsOpen] = React5.useState(defaultOpen);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
   const setIsOpen = (open) => {
     if (controlledIsOpen === void 0) {
@@ -4403,7 +4576,7 @@ function ChatPanelWithToggle({
     }
     onOpenChange?.(open);
   };
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     const originalPadding = document.body.style.paddingRight;
     const originalTransition = document.body.style.transition;
     document.body.style.transition = "padding-right 0.3s ease";
@@ -4431,7 +4604,8 @@ function ChatPanelWithToggle({
       userEmail,
       userOrganization,
       supabaseUrl,
-      supabaseAnonKey
+      supabaseAnonKey,
+      productBackendUrl
     }
   );
 }
@@ -4449,7 +4623,7 @@ function HelpButton({ onClick, className = "" }) {
 }
 
 // src/createKiteChat.tsx
-import React5 from "react";
+import React6 from "react";
 import { createRoot } from "react-dom/client";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function KiteChatWrapper({
@@ -4457,14 +4631,14 @@ function KiteChatWrapper({
   onConfigUpdate,
   onStateUpdate
 }) {
-  const [config, setConfig] = React5.useState(initialConfig);
-  const [currentPage, setCurrentPage] = React5.useState(initialConfig.currentPage || "dashboard");
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const isOpenRef = React5.useRef(false);
-  React5.useEffect(() => {
+  const [config, setConfig] = React6.useState(initialConfig);
+  const [currentPage, setCurrentPage] = React6.useState(initialConfig.currentPage || "dashboard");
+  const [isOpen, setIsOpen] = React6.useState(false);
+  const isOpenRef = React6.useRef(false);
+  React6.useEffect(() => {
     isOpenRef.current = isOpen;
   }, [isOpen]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     onConfigUpdate((newConfig) => {
       if (newConfig.currentPage !== void 0) {
         setCurrentPage(newConfig.currentPage);
@@ -4476,7 +4650,7 @@ function KiteChatWrapper({
       getIsOpen: () => isOpenRef.current
     });
   }, [onConfigUpdate, onStateUpdate]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const container = document.getElementById("kite-chat-root");
     if (!container) return;
     if (config.theme === "dark") {
@@ -4505,7 +4679,8 @@ function KiteChatWrapper({
       userEmail: config.userEmail,
       userOrganization: config.userOrganization,
       supabaseUrl: config.supabaseUrl,
-      supabaseAnonKey: config.supabaseAnonKey
+      supabaseAnonKey: config.supabaseAnonKey,
+      productBackendUrl: config.productBackendUrl
     }
   );
 }

package/dist/{createKiteChat-jmAPjuv_.d.cts → createKiteChat-o5u-5Sor.d.cts}

@@ -112,8 +112,10 @@ interface ChatPanelProps {
     supabaseUrl?: string;
     /** Supabase anonymous key for realtime features */
     supabaseAnonKey?: string;
+    /** Product backend URL for user authentication (e.g., https://dev.api.rocketalumnisolutions.com) */
+    productBackendUrl?: string;
 }
-declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, userId, orgId, userName, userEmail, userOrganization, supabaseUrl, supabaseAnonKey, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, userId, orgId, userName, userEmail, userOrganization, supabaseUrl, supabaseAnonKey, productBackendUrl, }?: 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)
@@ -172,8 +174,10 @@ interface ChatPanelWithToggleProps {
     supabaseUrl?: string;
     /** Supabase anonymous key for realtime features */
     supabaseAnonKey?: string;
+    /** Product backend URL for user authentication (e.g., https://dev.api.rocketalumnisolutions.com) */
+    productBackendUrl?: string;
 }
-declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, userId, orgId, userName, userEmail, userOrganization, supabaseUrl, supabaseAnonKey, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, userId, orgId, userName, userEmail, userOrganization, supabaseUrl, supabaseAnonKey, productBackendUrl, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
 /**
  * @deprecated Use ChatPanelWithToggle instead for the new side panel UX
  */
@@ -244,6 +248,8 @@ interface KiteChatConfig {
     supabaseUrl?: string;
     /** Supabase anonymous key for realtime features */
     supabaseAnonKey?: string;
+    /** Product backend URL for user authentication (e.g., https://dev.api.rocketalumnisolutions.com) */
+    productBackendUrl?: string;
 }
 /**
  * Instance returned by createKiteChat with lifecycle control methods.

package/dist/{createKiteChat-jmAPjuv_.d.ts → createKiteChat-o5u-5Sor.d.ts}

@@ -112,8 +112,10 @@ interface ChatPanelProps {
     supabaseUrl?: string;
     /** Supabase anonymous key for realtime features */
     supabaseAnonKey?: string;
+    /** Product backend URL for user authentication (e.g., https://dev.api.rocketalumnisolutions.com) */
+    productBackendUrl?: string;
 }
-declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, userId, orgId, userName, userEmail, userOrganization, supabaseUrl, supabaseAnonKey, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, userId, orgId, userName, userEmail, userOrganization, supabaseUrl, supabaseAnonKey, productBackendUrl, }?: 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)
@@ -172,8 +174,10 @@ interface ChatPanelWithToggleProps {
     supabaseUrl?: string;
     /** Supabase anonymous key for realtime features */
     supabaseAnonKey?: string;
+    /** Product backend URL for user authentication (e.g., https://dev.api.rocketalumnisolutions.com) */
+    productBackendUrl?: string;
 }
-declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, userId, orgId, userName, userEmail, userOrganization, supabaseUrl, supabaseAnonKey, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanelWithToggle({ onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions, startingQuestionsEndpoint, defaultOpen, isOpen: controlledIsOpen, onOpenChange, userId, orgId, userName, userEmail, userOrganization, supabaseUrl, supabaseAnonKey, productBackendUrl, }: ChatPanelWithToggleProps): react_jsx_runtime.JSX.Element;
 /**
  * @deprecated Use ChatPanelWithToggle instead for the new side panel UX
  */
@@ -244,6 +248,8 @@ interface KiteChatConfig {
     supabaseUrl?: string;
     /** Supabase anonymous key for realtime features */
     supabaseAnonKey?: string;
+    /** Product backend URL for user authentication (e.g., https://dev.api.rocketalumnisolutions.com) */
+    productBackendUrl?: string;
 }
 /**
  * Instance returned by createKiteChat with lifecycle control methods.