@kite-copilot/chat-panel 0.2.42 → 0.2.44

package/dist/index.cjs

@@ -70,7 +70,7 @@ var import_react = __toESM(require("react"), 1);
 var import_client = require("react-dom/client");
 
 // src/ChatPanel.tsx
-var React5 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 var import_supabase_js = require("@supabase/supabase-js");
 
 // src/lib/utils.ts
@@ -380,9 +380,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`, {
@@ -393,7 +397,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.");
         }
@@ -403,8 +409,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 });
     }
@@ -421,6 +436,47 @@ function useUserAuth({
   return { authState, retry };
 }
 
+// src/hooks/useOrgConfig.ts
+var React5 = __toESM(require("react"), 1);
+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/ui/card.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function Card({ className, ...props }) {
@@ -1021,7 +1077,7 @@ function TypingIndicator({ className = "" }) {
 
 // src/ChatPanel.tsx
 var import_jsx_runtime10 = require("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) {
@@ -1485,16 +1541,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,
@@ -1512,16 +1570,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);
@@ -1551,12 +1609,12 @@ function ChatPanel({
       typingChannelRef.current = null;
     }
   }, [isEscalated, sessionId]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (supabaseUrl && supabaseAnonKey && !supabaseRef.current) {
       supabaseRef.current = (0, import_supabase_js.createClient)(supabaseUrl, supabaseAnonKey);
     }
   }, [supabaseUrl, supabaseAnonKey]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!isEscalated || !sessionId || !supabaseRef.current) {
       return;
     }
@@ -1593,8 +1651,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({
@@ -1605,7 +1663,7 @@ function ChatPanel({
       console.error("[KiteChat] Failed to update customer status:", err);
     }
   }, [sessionId]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!isEscalated || !sessionId || !supabaseRef.current) {
       return;
     }
@@ -1653,7 +1711,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;
@@ -1669,8 +1727,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");
@@ -1681,19 +1739,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) => {
@@ -1705,16 +1763,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(
@@ -1748,7 +1806,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;
@@ -1757,21 +1815,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;
     }
@@ -1797,7 +1855,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)
@@ -1807,7 +1865,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") {
@@ -1824,7 +1882,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) {
@@ -1833,13 +1891,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;
@@ -1902,7 +1960,7 @@ function ChatPanel({
     guideComplete,
     onNavigate
   ]);
-  const connectToEscalationWs = React5.useCallback((currentSessionId) => {
+  const connectToEscalationWs = React6.useCallback((currentSessionId) => {
     if (!agentUrl) return;
     if (escalationWsRef.current) {
       escalationWsRef.current.close();
@@ -1945,7 +2003,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;
@@ -1962,14 +2020,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);
     }
@@ -2235,6 +2293,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: {
@@ -3189,7 +3256,38 @@ ${userText}`
       ] })
     ] }) }) });
   }
-  if (productBackendUrl) {
+  if (orgConfigState.status === "loading") {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "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__ */ (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", 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.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: () => onClose?.(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-8 w-8 animate-spin text-gray-400 mx-auto mb-3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-gray-500", children: "Loading..." })
+          ] }) })
+        ]
+      }
+    );
+  }
+  if (effectiveProductBackendUrl) {
     if (authState.status === "loading") {
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "section",
@@ -4364,7 +4462,7 @@ ${userText}`
                     message.id
                   );
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(React5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(React6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     ref: isCurrentGuideStep ? currentStepRef : null,
@@ -4621,7 +4719,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) {
@@ -4629,7 +4727,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";

package/dist/index.js

@@ -31,7 +31,7 @@ import {
   cn,
   createKiteChat,
   useGuideCursor
-} from "./chunk-XP6Y7EP7.js";
+} from "./chunk-G74XTXWW.js";
 export {
   ApiKeyList,
   AssistantActivity,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kite-copilot/chat-panel",
-  "version": "0.2.42",
+  "version": "0.2.44",
   "description": "AI-powered chat panel SDK with programmatic lifecycle control",
   "type": "module",
   "main": "./dist/index.cjs",