@kite-copilot/chat-panel 0.2.42 → 0.2.44

package/dist/{chunk-XP6Y7EP7.js → chunk-G74XTXWW.js}

@@ -882,7 +882,7 @@ function DataRenderer({ type, data }) {
 }
 
 // src/ChatPanel.tsx
-import * as React5 from "react";
+import * as React6 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";
 
@@ -897,9 +897,13 @@ function useUserAuth({
   const lastSessionIdRef = React4.useRef(null);
   const fetchUser = React4.useCallback(async () => {
     if (!productBackendUrl || !enabled) {
+      console.log("[useUserAuth] Skipping auth - productBackendUrl:", productBackendUrl, "enabled:", enabled);
       setAuthState({ status: "idle" });
       return;
     }
+    console.log("[useUserAuth] Starting auth request to product backend...");
+    console.log("[useUserAuth] Product backend URL:", productBackendUrl);
+    console.log("[useUserAuth] Full request URL:", `${productBackendUrl}/users/me`);
     setAuthState({ status: "loading" });
     try {
       const response = await fetch(`${productBackendUrl}/users/me`, {
@@ -910,7 +914,9 @@ function useUserAuth({
           "Accept": "application/json"
         }
       });
+      console.log("[useUserAuth] Response received - status:", response.status, "ok:", response.ok);
       if (!response.ok) {
+        console.log("[useUserAuth] Auth request failed with status:", response.status);
         if (response.status === 401) {
           throw new Error("Please log in to use the chat assistant.");
         }
@@ -920,8 +926,17 @@ function useUserAuth({
         throw new Error(`Authentication failed (${response.status})`);
       }
       const user = await response.json();
+      console.log("[useUserAuth] Auth SUCCESS - parsed user data:");
+      console.log("[useUserAuth]   id:", user.id);
+      console.log("[useUserAuth]   email:", user.email);
+      console.log("[useUserAuth]   name:", user.name);
+      console.log("[useUserAuth]   role:", user.role);
+      console.log("[useUserAuth]   isInternal:", user.isInternal);
+      console.log("[useUserAuth]   agreementsSigned:", user.agreementsSigned);
+      console.log("[useUserAuth]   lastLoginTime:", user.lastLoginTime);
       setAuthState({ status: "authenticated", user });
     } catch (error) {
+      console.log("[useUserAuth] Auth ERROR:", error);
       const message = error instanceof Error ? error.message : "Unable to verify your identity. Please try again.";
       setAuthState({ status: "error", error: message });
     }
@@ -938,6 +953,47 @@ function useUserAuth({
   return { authState, retry };
 }
 
+// src/hooks/useOrgConfig.ts
+import * as React5 from "react";
+function useOrgConfig({ agentUrl, orgId }) {
+  const [state, setState] = React5.useState({
+    status: "idle",
+    config: null,
+    error: null
+  });
+  React5.useEffect(() => {
+    if (!agentUrl || !orgId) {
+      console.log("[useOrgConfig] Skipping - missing agentUrl or orgId", { agentUrl, orgId });
+      return;
+    }
+    const fetchConfig = async () => {
+      setState({ status: "loading", config: null, error: null });
+      const url = `${agentUrl}/org/${orgId}/config`;
+      console.log("[useOrgConfig] Fetching org config from:", url);
+      try {
+        const response = await fetch(url, {
+          method: "GET",
+          headers: {
+            "Accept": "application/json"
+          }
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to fetch org config (${response.status})`);
+        }
+        const config = await response.json();
+        console.log("[useOrgConfig] Received config:", config);
+        setState({ status: "success", config, error: null });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to fetch org config";
+        console.error("[useOrgConfig] Error:", message);
+        setState({ status: "error", config: null, error: message });
+      }
+    };
+    fetchConfig();
+  }, [agentUrl, orgId]);
+  return state;
+}
+
 // src/components/TypingIndicator.tsx
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function TypingIndicator({ className = "" }) {
@@ -968,7 +1024,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.42" : "dev";
+var CHAT_PANEL_VERSION = true ? "0.2.44" : "dev";
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 340;
 function unescapeJsonString(str) {
@@ -1432,16 +1488,18 @@ function ChatPanel({
   supabaseAnonKey,
   productBackendUrl
 } = {}) {
-  const [messages, setMessages] = React5.useState(initialMessages);
-  const [input, setInput] = React5.useState("");
-  const [sessionId, setSessionId] = React5.useState(() => crypto.randomUUID());
+  const [messages, setMessages] = React6.useState(initialMessages);
+  const [input, setInput] = React6.useState("");
+  const [sessionId, setSessionId] = React6.useState(() => crypto.randomUUID());
+  const orgConfigState = useOrgConfig({ agentUrl, orgId: orgId || "" });
+  const effectiveProductBackendUrl = orgConfigState.config?.productBackendUrl || productBackendUrl;
   const { authState, retry: retryAuth } = useUserAuth({
-    productBackendUrl,
+    productBackendUrl: effectiveProductBackendUrl,
     sessionId,
-    enabled: !!productBackendUrl
-    // Only enable if URL is provided
+    enabled: !!effectiveProductBackendUrl && orgConfigState.status === "success"
+    // Only enable after config is fetched
   });
-  const effectiveUser = React5.useMemo(() => {
+  const effectiveUser = React6.useMemo(() => {
     if (authState.status === "authenticated") {
       return {
         userId: authState.user.id,
@@ -1459,16 +1517,16 @@ function ChatPanel({
       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(() => {
+  const [isEscalated, setIsEscalated] = React6.useState(false);
+  const escalationWsRef = React6.useRef(null);
+  const [agentIsTyping, setAgentIsTyping] = React6.useState(false);
+  const supabaseRef = React6.useRef(null);
+  const typingChannelRef = React6.useRef(null);
+  const typingTimeoutRef = React6.useRef(null);
+  React6.useEffect(() => {
     console.log(`[KiteChat] Chat Panel v${CHAT_PANEL_VERSION} loaded`);
   }, []);
-  const resetSession = React5.useCallback(() => {
+  const resetSession = React6.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);
@@ -1498,12 +1556,12 @@ function ChatPanel({
       typingChannelRef.current = null;
     }
   }, [isEscalated, sessionId]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (supabaseUrl && supabaseAnonKey && !supabaseRef.current) {
       supabaseRef.current = createClient(supabaseUrl, supabaseAnonKey);
     }
   }, [supabaseUrl, supabaseAnonKey]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!isEscalated || !sessionId || !supabaseRef.current) {
       return;
     }
@@ -1540,8 +1598,8 @@ function ChatPanel({
       }
     };
   }, [isEscalated, sessionId]);
-  const heartbeatIntervalRef = React5.useRef(null);
-  const updateCustomerStatus = React5.useCallback(async (status) => {
+  const heartbeatIntervalRef = React6.useRef(null);
+  const updateCustomerStatus = React6.useCallback(async (status) => {
     if (!supabaseRef.current || !sessionId) return;
     try {
       await supabaseRef.current.from("escalations").update({
@@ -1552,7 +1610,7 @@ function ChatPanel({
       console.error("[KiteChat] Failed to update customer status:", err);
     }
   }, [sessionId]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!isEscalated || !sessionId || !supabaseRef.current) {
       return;
     }
@@ -1600,7 +1658,7 @@ function ChatPanel({
       }
     };
   }, [isEscalated, sessionId, updateCustomerStatus]);
-  const sendTypingIndicator = React5.useCallback((isTyping) => {
+  const sendTypingIndicator = React6.useCallback((isTyping) => {
     if (!typingChannelRef.current) {
       console.log("[KiteChat] Cannot send typing - channel not ready");
       return;
@@ -1616,8 +1674,8 @@ function ChatPanel({
       payload: { sender: "user", isTyping }
     });
   }, [isEscalated]);
-  const userTypingTimeoutRef = React5.useRef(null);
-  const handleTypingStart = React5.useCallback(() => {
+  const userTypingTimeoutRef = React6.useRef(null);
+  const handleTypingStart = React6.useCallback(() => {
     if (!isEscalated || !supabaseRef.current) return;
     sendTypingIndicator(true);
     updateCustomerStatus("active");
@@ -1628,19 +1686,19 @@ function ChatPanel({
       sendTypingIndicator(false);
     }, 1500);
   }, [isEscalated, sendTypingIndicator, updateCustomerStatus]);
-  const streamIntervals = React5.useRef({});
+  const streamIntervals = React6.useRef({});
   const isEmpty = messages.length === 0;
-  const [phase, setPhase] = React5.useState("idle");
-  const [progressSteps, setProgressSteps] = React5.useState([]);
-  const phaseTimers = React5.useRef([]);
+  const [phase, setPhase] = React6.useState("idle");
+  const [progressSteps, setProgressSteps] = React6.useState([]);
+  const phaseTimers = React6.useRef([]);
   const lastRole = messages.length ? messages[messages.length - 1].role : void 0;
-  const [panelView, setPanelView] = React5.useState(
+  const [panelView, setPanelView] = React6.useState(
     "landing"
   );
-  const [currentFolderId, setCurrentFolderId] = React5.useState(void 0);
-  const [startingQuestions, setStartingQuestions] = React5.useState(startingQuestionsProp || defaultStartingQuestions);
-  const [loadingQuestions, setLoadingQuestions] = React5.useState(false);
-  React5.useEffect(() => {
+  const [currentFolderId, setCurrentFolderId] = React6.useState(void 0);
+  const [startingQuestions, setStartingQuestions] = React6.useState(startingQuestionsProp || defaultStartingQuestions);
+  const [loadingQuestions, setLoadingQuestions] = React6.useState(false);
+  React6.useEffect(() => {
     if (startingQuestionsEndpoint && !startingQuestionsProp) {
       setLoadingQuestions(true);
       fetch(startingQuestionsEndpoint).then((res) => res.json()).then((data) => {
@@ -1652,16 +1710,16 @@ function ChatPanel({
       }).finally(() => setLoadingQuestions(false));
     }
   }, [startingQuestionsEndpoint, startingQuestionsProp]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (startingQuestionsProp) {
       setStartingQuestions(startingQuestionsProp);
     }
   }, [startingQuestionsProp]);
-  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(() => {
+  const [activeGuide, setActiveGuide] = React6.useState(void 0);
+  const activeGuideRef = React6.useRef(void 0);
+  const latestBulkSummaryNavigationRef = React6.useRef(null);
+  const [guideComplete, setGuideComplete] = React6.useState(false);
+  React6.useEffect(() => {
     window.resetIntegrationNotification = () => {
       localStorage.removeItem("gmailNotificationSeen");
       console.log(
@@ -1695,7 +1753,7 @@ function ChatPanel({
       );
     };
   }, []);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (activeGuide) {
       if (!activeGuideRef.current || activeGuideRef.current.id !== activeGuide.id || activeGuideRef.current.stepIndex !== activeGuide.stepIndex) {
         activeGuideRef.current = activeGuide;
@@ -1704,21 +1762,21 @@ function ChatPanel({
       activeGuideRef.current = void 0;
     }
   }, [activeGuide]);
-  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 [pendingNavigation, setPendingNavigation] = React6.useState(null);
+  const [pendingAction, setPendingAction] = React6.useState(null);
+  const [actionFormData, setActionFormData] = React6.useState({});
+  const messagesEndRef = React6.useRef(null);
+  const messagesContainerRef = React6.useRef(null);
+  const currentStepRef = React6.useRef(null);
   const { cursorState, moveTo, hide } = useGuideCursor();
-  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(() => {
+  const [pendingFile, setPendingFile] = React6.useState(null);
+  const [pendingBulkSession, setPendingBulkSession] = React6.useState(null);
+  const pendingBulkSessionRef = React6.useRef(null);
+  const fileInputRef = React6.useRef(null);
+  const [searchExpanded, setSearchExpanded] = React6.useState(false);
+  const [searchInput, setSearchInput] = React6.useState("");
+  const searchInputRef = React6.useRef(null);
+  React6.useEffect(() => {
     if (!activeGuide || activeGuide.id !== "add-api-key" || activeGuide.stepIndex !== 2) {
       return;
     }
@@ -1744,7 +1802,7 @@ function ChatPanel({
     const interval = setInterval(checkForDialogOpen, 300);
     return () => clearInterval(interval);
   }, [activeGuide, hide]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     return () => {
       Object.values(streamIntervals.current).forEach(
         (id) => window.clearInterval(id)
@@ -1754,7 +1812,7 @@ function ChatPanel({
       phaseTimers.current = [];
     };
   }, []);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (activeGuide && messages.length > 0) {
       const lastMessage = messages[messages.length - 1];
       if (lastMessage.kind === "guideStep" || lastMessage.kind === "guideComplete") {
@@ -1771,7 +1829,7 @@ function ChatPanel({
       messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages, phase, activeGuide]);
-  const latestBulkSummaryNavigation = React5.useMemo(() => {
+  const latestBulkSummaryNavigation = React6.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) {
@@ -1780,13 +1838,13 @@ function ChatPanel({
     }
     return null;
   }, [messages]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     latestBulkSummaryNavigationRef.current = latestBulkSummaryNavigation;
   }, [latestBulkSummaryNavigation]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     pendingBulkSessionRef.current = pendingBulkSession;
   }, [pendingBulkSession]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const handleKeyDown = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
         const currentBulkSession = pendingBulkSessionRef.current;
@@ -1849,7 +1907,7 @@ function ChatPanel({
     guideComplete,
     onNavigate
   ]);
-  const connectToEscalationWs = React5.useCallback((currentSessionId) => {
+  const connectToEscalationWs = React6.useCallback((currentSessionId) => {
     if (!agentUrl) return;
     if (escalationWsRef.current) {
       escalationWsRef.current.close();
@@ -1892,7 +1950,7 @@ function ChatPanel({
     };
     escalationWsRef.current = ws;
   }, [agentUrl]);
-  const sendEscalatedMessage = React5.useCallback(async (content) => {
+  const sendEscalatedMessage = React6.useCallback(async (content) => {
     if (!escalationWsRef.current || escalationWsRef.current.readyState !== WebSocket.OPEN) {
       console.error("[KiteChat] Escalation WebSocket not connected");
       return false;
@@ -1909,14 +1967,14 @@ function ChatPanel({
       return false;
     }
   }, [updateCustomerStatus]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     return () => {
       if (escalationWsRef.current) {
         escalationWsRef.current.close();
       }
     };
   }, []);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (isEscalated && sessionId) {
       connectToEscalationWs(sessionId);
     }
@@ -2182,6 +2240,15 @@ function ChatPanel({
     try {
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), 6e4);
+      console.log("[ChatPanel] Sending chat request to agent backend...");
+      console.log("[ChatPanel] Agent URL:", agentUrl);
+      console.log("[ChatPanel] User data being sent:");
+      console.log("[ChatPanel]   user_id:", effectiveUser.userId);
+      console.log("[ChatPanel]   user_name:", effectiveUser.userName);
+      console.log("[ChatPanel]   user_email:", effectiveUser.userEmail);
+      console.log("[ChatPanel]   user_organization:", userOrganization);
+      console.log("[ChatPanel]   org_id:", orgId);
+      console.log("[ChatPanel]   authState.status:", authState.status);
       const response = await fetch(`${agentUrl}/chat/stream`, {
         method: "POST",
         headers: {
@@ -3136,7 +3203,38 @@ ${userText}`
       ] })
     ] }) }) });
   }
-  if (productBackendUrl) {
+  if (orgConfigState.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(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx10("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs6("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx10(Loader22, { className: "h-8 w-8 animate-spin text-gray-400 mx-auto mb-3" }),
+            /* @__PURE__ */ jsx10("p", { className: "text-sm text-gray-500", children: "Loading..." })
+          ] }) })
+        ]
+      }
+    );
+  }
+  if (effectiveProductBackendUrl) {
     if (authState.status === "loading") {
       return /* @__PURE__ */ jsxs6(
         "section",
@@ -4311,7 +4409,7 @@ ${userText}`
                     message.id
                   );
                 }
-                return /* @__PURE__ */ jsx10(React5.Fragment, { children: /* @__PURE__ */ jsxs6(
+                return /* @__PURE__ */ jsx10(React6.Fragment, { children: /* @__PURE__ */ jsxs6(
                   "div",
                   {
                     ref: isCurrentGuideStep ? currentStepRef : null,
@@ -4568,7 +4666,7 @@ function ChatPanelWithToggle({
   supabaseAnonKey,
   productBackendUrl
 }) {
-  const [internalIsOpen, setInternalIsOpen] = React5.useState(defaultOpen);
+  const [internalIsOpen, setInternalIsOpen] = React6.useState(defaultOpen);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
   const setIsOpen = (open) => {
     if (controlledIsOpen === void 0) {
@@ -4576,7 +4674,7 @@ function ChatPanelWithToggle({
     }
     onOpenChange?.(open);
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const originalPadding = document.body.style.paddingRight;
     const originalTransition = document.body.style.transition;
     document.body.style.transition = "padding-right 0.3s ease";
@@ -4623,7 +4721,7 @@ function HelpButton({ onClick, className = "" }) {
 }
 
 // src/createKiteChat.tsx
-import React6 from "react";
+import React7 from "react";
 import { createRoot } from "react-dom/client";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function KiteChatWrapper({
@@ -4631,14 +4729,14 @@ function KiteChatWrapper({
   onConfigUpdate,
   onStateUpdate
 }) {
-  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(() => {
+  const [config, setConfig] = React7.useState(initialConfig);
+  const [currentPage, setCurrentPage] = React7.useState(initialConfig.currentPage || "dashboard");
+  const [isOpen, setIsOpen] = React7.useState(false);
+  const isOpenRef = React7.useRef(false);
+  React7.useEffect(() => {
     isOpenRef.current = isOpen;
   }, [isOpen]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     onConfigUpdate((newConfig) => {
       if (newConfig.currentPage !== void 0) {
         setCurrentPage(newConfig.currentPage);
@@ -4650,7 +4748,7 @@ function KiteChatWrapper({
       getIsOpen: () => isOpenRef.current
     });
   }, [onConfigUpdate, onStateUpdate]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const container = document.getElementById("kite-chat-root");
     if (!container) return;
     if (config.theme === "dark") {