@kite-copilot/chat-panel 0.2.34 → 0.2.36

package/dist/index.cjs

@@ -71,6 +71,7 @@ var import_client = require("react-dom/client");
 
 // src/ChatPanel.tsx
 var React4 = __toESM(require("react"), 1);
+var import_supabase_js = require("@supabase/supabase-js");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -938,8 +939,36 @@ function DataRenderer({ type, data }) {
   }
 }
 
-// src/ChatPanel.tsx
+// src/components/TypingIndicator.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+function TypingIndicator({ className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex items-center gap-1 px-4 py-3 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "span",
+      {
+        className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
+        style: { animationDelay: "0ms", animationDuration: "600ms" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "span",
+      {
+        className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
+        style: { animationDelay: "150ms", animationDuration: "600ms" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "span",
+      {
+        className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
+        style: { animationDelay: "300ms", animationDuration: "600ms" }
+      }
+    )
+  ] }) });
+}
+
+// src/ChatPanel.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 340;
 function unescapeJsonString(str) {
@@ -961,7 +990,7 @@ function renderMarkdown(text) {
       const codeMatch = remaining.match(/^`([^`]+)`/);
       if (codeMatch) {
         parts.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "code",
             {
               className: "bg-gray-100 px-1 py-0.5 rounded text-xs font-mono",
@@ -975,20 +1004,20 @@ function renderMarkdown(text) {
       }
       const boldMatch = remaining.match(/^\*\*([^*]+)\*\*/);
       if (boldMatch) {
-        parts.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: boldMatch[1] }, keyIndex++));
+        parts.push(/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: boldMatch[1] }, keyIndex++));
         remaining = remaining.slice(boldMatch[0].length);
         continue;
       }
       const italicMatch = remaining.match(/^\*([^*]+)\*/);
       if (italicMatch) {
-        parts.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("em", { children: italicMatch[1] }, keyIndex++));
+        parts.push(/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("em", { children: italicMatch[1] }, keyIndex++));
         remaining = remaining.slice(italicMatch[0].length);
         continue;
       }
       const linkMatch = remaining.match(/^\[([^\]]+)\]\(([^)]+)\)/);
       if (linkMatch) {
         parts.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "a",
             {
               href: linkMatch[2],
@@ -1008,7 +1037,7 @@ function renderMarkdown(text) {
         const url = urlMatch[1];
         const href = url.startsWith("www.") ? `https://${url}` : url;
         parts.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "a",
             {
               href,
@@ -1027,7 +1056,7 @@ function renderMarkdown(text) {
       if (emailMatch) {
         const email = emailMatch[1];
         parts.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "a",
             {
               href: `mailto:${email}`,
@@ -1052,17 +1081,17 @@ function renderMarkdown(text) {
         remaining = remaining.slice(nextSpecial);
       }
     }
-    return parts.length === 1 ? parts[0] : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: parts });
+    return parts.length === 1 ? parts[0] : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: parts });
   };
   const flushList = () => {
     if (currentList) {
       const ListTag = currentList.type === "ul" ? "ul" : "ol";
       elements.push(
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           ListTag,
           {
             className: `${currentList.type === "ul" ? "list-disc" : "list-decimal"} ml-4 my-1`,
-            children: currentList.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { className: "ml-2", children: item }, i))
+            children: currentList.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "ml-2", children: item }, i))
           },
           elements.length
         )
@@ -1075,11 +1104,11 @@ function renderMarkdown(text) {
     if (line.startsWith("```")) {
       if (inCodeBlock) {
         elements.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "pre",
             {
               className: "bg-gray-100 rounded p-2 my-1 overflow-x-auto",
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { className: "text-xs font-mono", children: codeContent.join("\n") })
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { className: "text-xs font-mono", children: codeContent.join("\n") })
             },
             elements.length
           )
@@ -1105,7 +1134,7 @@ function renderMarkdown(text) {
       const content = processInlineFormatting(headerMatch[2]);
       const className = level === 1 ? "text-lg font-bold my-1" : level === 2 ? "text-base font-bold my-1" : "text-sm font-semibold my-1";
       elements.push(
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, children: content }, elements.length)
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, children: content }, elements.length)
       );
       continue;
     }
@@ -1129,23 +1158,23 @@ function renderMarkdown(text) {
     }
     if (line.trim() === "") {
       flushList();
-      elements.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-2" }, elements.length));
+      elements.push(/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-2" }, elements.length));
       continue;
     }
     if (line.match(/^[-*_]{3,}$/)) {
       flushList();
       elements.push(
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("hr", { className: "my-2 border-gray-200" }, elements.length)
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("hr", { className: "my-2 border-gray-200" }, elements.length)
       );
       continue;
     }
     flushList();
     elements.push(
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: processInlineFormatting(line) }, elements.length)
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: processInlineFormatting(line) }, elements.length)
     );
   }
   flushList();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: elements });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: elements });
 }
 var defaultStartingQuestions = [
   {
@@ -1372,21 +1401,155 @@ function ChatPanel({
   orgId,
   userName,
   userEmail,
-  userOrganization
+  userOrganization,
+  supabaseUrl,
+  supabaseAnonKey
 } = {}) {
   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);
   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) {
       escalationWsRef.current.close();
       escalationWsRef.current = null;
     }
-  }, []);
+    setAgentIsTyping(false);
+    if (typingChannelRef.current) {
+      typingChannelRef.current.unsubscribe();
+      typingChannelRef.current = null;
+    }
+  }, [isEscalated, sessionId]);
+  React4.useEffect(() => {
+    if (supabaseUrl && supabaseAnonKey && !supabaseRef.current) {
+      supabaseRef.current = (0, import_supabase_js.createClient)(supabaseUrl, supabaseAnonKey);
+    }
+  }, [supabaseUrl, supabaseAnonKey]);
+  React4.useEffect(() => {
+    if (!isEscalated || !sessionId || !supabaseRef.current) {
+      return;
+    }
+    const channelName = `typing:${sessionId}`;
+    const channel = supabaseRef.current.channel(channelName);
+    channel.on("broadcast", { event: "typing" }, (payload) => {
+      const { sender, isTyping } = payload.payload;
+      if (sender === "agent") {
+        setAgentIsTyping(isTyping);
+        if (isTyping) {
+          if (typingTimeoutRef.current) {
+            window.clearTimeout(typingTimeoutRef.current);
+          }
+          typingTimeoutRef.current = window.setTimeout(() => {
+            setAgentIsTyping(false);
+          }, 5e3);
+        }
+      }
+    }).subscribe((status) => {
+      if (status === "SUBSCRIBED") {
+        typingChannelRef.current = channel;
+      }
+    });
+    return () => {
+      channel.unsubscribe();
+      typingChannelRef.current = null;
+      if (typingTimeoutRef.current) {
+        window.clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, [isEscalated, sessionId]);
+  const heartbeatIntervalRef = React4.useRef(null);
+  const updateCustomerStatus = React4.useCallback(async (status) => {
+    if (!supabaseRef.current || !sessionId) return;
+    try {
+      await supabaseRef.current.from("escalations").update({
+        customer_status: status,
+        customer_last_seen: (/* @__PURE__ */ new Date()).toISOString()
+      }).eq("session_id", sessionId);
+    } catch (err) {
+      console.error("[KiteChat] Failed to update customer status:", err);
+    }
+  }, [sessionId]);
+  React4.useEffect(() => {
+    if (!isEscalated || !sessionId || !supabaseRef.current) {
+      return;
+    }
+    const currentSessionId = sessionId;
+    const supabase = supabaseRef.current;
+    updateCustomerStatus("active");
+    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()
+      }).eq("session_id", currentSessionId).then(
+        () => {
+          console.log("[KiteChat] Marked customer as disconnected");
+        },
+        (err) => {
+          console.error("[KiteChat] Failed to mark disconnected:", err);
+        }
+      );
+      if (heartbeatIntervalRef.current) {
+        window.clearInterval(heartbeatIntervalRef.current);
+        heartbeatIntervalRef.current = null;
+      }
+    };
+  }, [isEscalated, sessionId, updateCustomerStatus]);
+  const sendTypingIndicator = React4.useCallback((isTyping) => {
+    if (!typingChannelRef.current || !isEscalated) return;
+    typingChannelRef.current.send({
+      type: "broadcast",
+      event: "typing",
+      payload: { sender: "user", isTyping }
+    });
+  }, [isEscalated]);
+  const userTypingTimeoutRef = React4.useRef(null);
+  const handleTypingStart = React4.useCallback(() => {
+    if (!isEscalated || !supabaseRef.current) return;
+    sendTypingIndicator(true);
+    updateCustomerStatus("active");
+    if (userTypingTimeoutRef.current) {
+      window.clearTimeout(userTypingTimeoutRef.current);
+    }
+    userTypingTimeoutRef.current = window.setTimeout(() => {
+      sendTypingIndicator(false);
+    }, 1500);
+  }, [isEscalated, sendTypingIndicator, updateCustomerStatus]);
   const streamIntervals = React4.useRef({});
   const isEmpty = messages.length === 0;
   const [phase, setPhase] = React4.useState("idle");
@@ -1661,12 +1824,13 @@ function ChatPanel({
         type: "user_message",
         content
       }));
+      updateCustomerStatus("active");
       return true;
     } catch (err) {
       console.error("[KiteChat] Failed to send escalated message:", err);
       return false;
     }
-  }, []);
+  }, [updateCustomerStatus]);
   React4.useEffect(() => {
     return () => {
       if (escalationWsRef.current) {
@@ -1797,6 +1961,11 @@ function ChatPanel({
       };
       setMessages((prev) => [...prev, userMessage]);
       sendEscalatedMessage(trimmed);
+      sendTypingIndicator(false);
+      if (userTypingTimeoutRef.current) {
+        window.clearTimeout(userTypingTimeoutRef.current);
+        userTypingTimeoutRef.current = null;
+      }
       setInput("");
       return;
     }
@@ -2815,8 +2984,8 @@ ${userText}`
     }
   }
   if (!isOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-50", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex items-center gap-3 rounded-2xl bg-white border border-gray-200 shadow-lg px-4 py-2 hover:shadow-xl transition-all duration-300 ease-out focus-within:border-gray-700 ${searchExpanded ? "w-[480px]" : "w-[320px]"}`, children: !searchExpanded ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3 w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `flex items-center gap-3 rounded-2xl bg-white border border-gray-200 shadow-lg px-4 py-2 hover:shadow-xl transition-all duration-300 ease-out focus-within:border-gray-700 ${searchExpanded ? "w-[480px]" : "w-[320px]"}`, children: !searchExpanded ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "button",
         {
           onClick: () => {
@@ -2825,23 +2994,23 @@ ${userText}`
           },
           className: "flex items-center gap-3 flex-1 group",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm text-gray-500 flex-1 text-left", children: "Ask a question..." }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-gray-400 font-medium", children: "\u2318I" })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm text-gray-500 flex-1 text-left", children: "Ask a question..." }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs text-gray-400 font-medium", children: "\u2318I" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           onClick: () => {
             onOpen?.();
           },
           className: "h-7 w-7 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" })
+          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_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "input",
         {
           ref: searchInputRef,
@@ -2869,9 +3038,9 @@ ${userText}`
           className: "flex-1 text-sm text-gray-700 outline-none bg-transparent"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-gray-400 font-medium", children: "\u21B5 Enter" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs text-gray-400 font-medium", children: "\u21B5 Enter" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "button",
           {
             onClick: () => {
@@ -2883,25 +3052,25 @@ ${userText}`
               setSearchExpanded(false);
             },
             className: "h-7 w-7 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors cursor-pointer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" })
           }
         )
       ] })
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  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_runtime9.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_runtime9.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "text-sm font-semibold text-gray-800", children: "Copilot" })
+        /* @__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_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               Button,
               {
                 variant: "ghost",
@@ -2916,29 +3085,40 @@ ${userText}`
                   activeGuideRef.current = void 0;
                   setGuideComplete(false);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.SquarePen, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.SquarePen, { className: "h-3 w-3" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__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_runtime9.jsx)(import_lucide_react4.Minus, { className: "h-3.5 w-3.5" })
+                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_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             className: isEmpty ? "grid flex-1 place-items-center transition-all duration-300" : "flex flex-1 flex-col transition-all duration-300 min-h-0 overflow-hidden",
-            children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "w-full overflow-y-auto px-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "py-3 transition-all duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "How can I help?" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pb-4 px-4", children: [
-                panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
+            children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full overflow-y-auto px-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "py-3 transition-all duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "How can I help?" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pb-4 px-4", children: [
+                panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
                   const iconColors = [
                     "bg-blue-400",
                     "bg-green-400",
@@ -2946,7 +3126,7 @@ ${userText}`
                     "bg-orange-400",
                     "bg-pink-400"
                   ];
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     Button,
                     {
                       type: "button",
@@ -2955,7 +3135,7 @@ ${userText}`
                       className: "w-full justify-start rounded-lg px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-100 h-auto",
                       onClick: () => sendTopic(question.prompt),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "span",
                           {
                             className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}`
@@ -2967,9 +3147,9 @@ ${userText}`
                     question.id
                   );
                 }) }) }),
-                panelView === "folder" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-3 flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                panelView === "folder" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-3 flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       Button,
                       {
                         type: "button",
@@ -2978,12 +3158,12 @@ ${userText}`
                         className: "h-7 w-7 rounded-full hover:bg-gray-100",
                         onClick: closeFolder,
                         "aria-label": "Back to suggestions",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-4 w-4 text-gray-500" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowLeft, { className: "h-4 w-4 text-gray-500" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1.5", children: folders.find((f) => f.id === currentFolderId)?.topics.map((topic) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-1.5", children: folders.find((f) => f.id === currentFolderId)?.topics.map((topic) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     Button,
                     {
                       type: "button",
@@ -2997,7 +3177,7 @@ ${userText}`
                   )) })
                 ] })
               ] })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollArea, { ref: messagesContainerRef, className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-2 px-4 py-3", children: [
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollArea, { ref: messagesContainerRef, className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2 px-4 py-3", children: [
               messages.map((message, index) => {
                 const isUser = message.role === "user";
                 const previousRole = index > 0 ? messages[index - 1].role : void 0;
@@ -3017,17 +3197,20 @@ ${userText}`
                   return null;
                 }
                 if (isUser) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("div", { className: `flex justify-start ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-blue-500 px-3.5 py-2.5 text-sm text-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap leading-relaxed", children: renderMarkdown(message.content || "") }) }) }, message.id);
+                  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-[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") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "div",
                     {
                       className: `${isRoleChange ? "mt-3" : ""}`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         AssistantSearchSummary,
                         {
                           title: message.title ?? "Search results",
@@ -3039,27 +3222,27 @@ ${userText}`
                   );
                 }
                 if (message.kind === "guideComplete") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "div",
                     {
                       ref: isCurrentGuideStep ? currentStepRef : null,
                       className: `${isRoleChange ? "mt-3" : ""}`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-green-50 border border-green-200 px-3 py-2.5 text-sm leading-6", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-medium text-green-800", children: message.content })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-green-50 border border-green-200 px-3 py-2.5 text-sm leading-6", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CheckCircle2, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium text-green-800", children: message.content })
                       ] })
                     },
                     message.id
                   );
                 }
                 if (message.kind === "navigationAction") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     "div",
                     {
                       className: `${isRoleChange ? "mt-3" : ""}`,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-2 text-gray-700", children: message.content || "" }),
-                        message.navigationTarget && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-2 text-gray-700", children: message.content || "" }),
+                        message.navigationTarget && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                           Button,
                           {
                             type: "button",
@@ -3070,10 +3253,10 @@ ${userText}`
                               message.navigationTarget
                             ),
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Confirm" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Confirm" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
                               ] })
                             ]
                           }
@@ -3131,26 +3314,26 @@ ${userText}`
                     } else {
                       successContent = "Action completed successfully.";
                     }
-                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "div",
                       {
                         className: `${isRoleChange ? "mt-3" : ""}`,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent })
                       },
                       message.id
                     );
                   }
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     "div",
                     {
                       className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
-                        actionType === "updateCompanyInfo" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
+                        actionType === "updateCompanyInfo" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                 Input,
                                 {
                                   placeholder: "Acme Corporation",
@@ -3163,9 +3346,9 @@ ${userText}`
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                 Input,
                                 {
                                   type: "email",
@@ -3180,9 +3363,9 @@ ${userText}`
                               )
                             ] })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Address" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Address" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 placeholder: "123 Main St, San Francisco, CA",
@@ -3195,10 +3378,10 @@ ${userText}`
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Phone" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Phone" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                 Input,
                                 {
                                   type: "tel",
@@ -3212,9 +3395,9 @@ ${userText}`
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                 Input,
                                 {
                                   type: "url",
@@ -3230,9 +3413,9 @@ ${userText}`
                             ] })
                           ] })
                         ] }),
-                        actionType === "addApiKey" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        actionType === "addApiKey" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                             Input,
                             {
                               placeholder: "Production Key",
@@ -3245,11 +3428,11 @@ ${userText}`
                             }
                           )
                         ] }) }),
-                        actionType === "addCustomer" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        actionType === "addCustomer" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                 Input,
                                 {
                                   placeholder: "Acme Corporation",
@@ -3262,9 +3445,9 @@ ${userText}`
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                 Input,
                                 {
                                   type: "email",
@@ -3279,9 +3462,9 @@ ${userText}`
                               )
                             ] })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Location" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Location" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 placeholder: "San Francisco, CA",
@@ -3294,9 +3477,9 @@ ${userText}`
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Subscription Tier" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Subscription Tier" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                               "select",
                               {
                                 value: formData.subscription || "Starter",
@@ -3306,19 +3489,19 @@ ${userText}`
                                 }),
                                 className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Starter", children: "Starter" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Starter", children: "Starter" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Professional", children: "Professional" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Enterprise", children: "Enterprise" })
                                 ]
                               }
                             )
                           ] })
                         ] }),
-                        (actionType === "enable2FA" || actionType === "disable2FA") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enable2FA" ? "This will enable two-factor authentication for your account. You'll need to set up an authenticator app." : "This will disable two-factor authentication for your account. Your account will be less secure." }) }),
-                        actionType === "changePassword" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Current Password" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        (actionType === "enable2FA" || actionType === "disable2FA") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: actionType === "enable2FA" ? "This will enable two-factor authentication for your account. You'll need to set up an authenticator app." : "This will disable two-factor authentication for your account. Your account will be less secure." }) }),
+                        actionType === "changePassword" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Current Password" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 type: "password",
@@ -3331,9 +3514,9 @@ ${userText}`
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "New Password" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "New Password" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 type: "password",
@@ -3346,9 +3529,9 @@ ${userText}`
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Confirm New Password" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Confirm New Password" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 type: "password",
@@ -3362,10 +3545,10 @@ ${userText}`
                             )
                           ] })
                         ] }),
-                        actionType === "toggleNotification" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Notification Type" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        actionType === "toggleNotification" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Notification Type" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                               "select",
                               {
                                 value: formData.notificationType || "paymentReceived",
@@ -3375,17 +3558,17 @@ ${userText}`
                                 }),
                                 className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "paymentReceived", children: "Payment Received" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "paymentFailed", children: "Payment Failed" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "invoicePaid", children: "Invoice Paid" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "monthlySummary", children: "Monthly Summary" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "productUpdates", children: "Product Updates" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "paymentReceived", children: "Payment Received" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "paymentFailed", children: "Payment Failed" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "invoicePaid", children: "Invoice Paid" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "monthlySummary", children: "Monthly Summary" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "productUpdates", children: "Product Updates" })
                                 ]
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               "input",
                               {
                                 type: "checkbox",
@@ -3397,12 +3580,12 @@ ${userText}`
                                 className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs text-black", children: "Enable this notification" })
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs text-black", children: "Enable this notification" })
                           ] })
                         ] }),
-                        (actionType === "connectIntegration" || actionType === "disconnectIntegration") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Integration" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        (actionType === "connectIntegration" || actionType === "disconnectIntegration") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Integration" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                             "select",
                             {
                               value: formData.integrationName || "Slack",
@@ -3412,17 +3595,17 @@ ${userText}`
                               }),
                               className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Slack", children: "Slack" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Zapier", children: "Zapier" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Webhook", children: "Webhook" })
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Slack", children: "Slack" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Zapier", children: "Zapier" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Webhook", children: "Webhook" })
                               ]
                             }
                           )
                         ] }) }),
-                        actionType === "addPaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Card Number" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        actionType === "addPaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Card Number" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 placeholder: "1234 5678 9012 3456",
@@ -3435,9 +3618,9 @@ ${userText}`
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Expiry Date" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Expiry Date" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 placeholder: "MM/YY",
@@ -3451,11 +3634,11 @@ ${userText}`
                             )
                           ] })
                         ] }),
-                        actionType === "removePaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will remove the default payment method from your account." }) }),
-                        actionType === "refundPayment" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Transaction ID or Customer Name" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        actionType === "removePaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: "This will remove the default payment method from your account." }) }),
+                        actionType === "refundPayment" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Transaction ID or Customer Name" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 placeholder: "e.g., txn_1234 or Acme Corp",
@@ -3480,9 +3663,9 @@ ${userText}`
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Amount (optional)" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Amount (optional)" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 placeholder: "$0.00",
@@ -3495,9 +3678,9 @@ ${userText}`
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Reason (optional)" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Reason (optional)" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 placeholder: "e.g., Customer request",
@@ -3511,10 +3694,10 @@ ${userText}`
                             )
                           ] })
                         ] }),
-                        actionType === "deleteApiKey" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name or ID" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        actionType === "deleteApiKey" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name or ID" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 placeholder: "Production Key",
@@ -3528,12 +3711,12 @@ ${userText}`
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-red-600", children: "Warning: This action cannot be undone. The API key will be permanently deleted." })
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-red-600", children: "Warning: This action cannot be undone. The API key will be permanently deleted." })
                         ] }),
-                        actionType === "addWebhook" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Webhook URL" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        actionType === "addWebhook" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Webhook URL" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 type: "url",
@@ -3547,9 +3730,9 @@ ${userText}`
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Name (optional)" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Name (optional)" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 placeholder: "Production Webhook",
@@ -3563,9 +3746,9 @@ ${userText}`
                             )
                           ] })
                         ] }),
-                        actionType === "updateCurrency" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Currency" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        actionType === "updateCurrency" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Currency" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                             "select",
                             {
                               value: formData.currency || "USD",
@@ -3575,17 +3758,17 @@ ${userText}`
                               }),
                               className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "USD", children: "USD ($)" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "EUR", children: "EUR (\u20AC)" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "GBP", children: "GBP (\xA3)" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "JPY", children: "JPY (\xA5)" })
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "USD", children: "USD ($)" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "EUR", children: "EUR (\u20AC)" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "GBP", children: "GBP (\xA3)" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "JPY", children: "JPY (\xA5)" })
                               ]
                             }
                           )
                         ] }) }),
-                        actionType === "updateTimezone" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Timezone" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        actionType === "updateTimezone" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Timezone" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                             "select",
                             {
                               value: formData.timezone || "America/Los_Angeles",
@@ -3595,18 +3778,18 @@ ${userText}`
                               }),
                               className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "America/Los_Angeles", children: "Pacific Time (PT)" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "America/New_York", children: "Eastern Time (ET)" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Europe/London", children: "GMT" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Asia/Tokyo", children: "JST" })
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "America/Los_Angeles", children: "Pacific Time (PT)" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "America/New_York", children: "Eastern Time (ET)" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Europe/London", children: "GMT" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Asia/Tokyo", children: "JST" })
                               ]
                             }
                           )
                         ] }) }),
-                        actionType === "revokeSession" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Device/Session" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        actionType === "revokeSession" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Device/Session" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 placeholder: "MacBook Pro",
@@ -3619,12 +3802,12 @@ ${userText}`
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will sign out the device and invalidate its session." })
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: "This will sign out the device and invalidate its session." })
                         ] }),
-                        actionType === "createSubscription" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Customer Email" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        actionType === "createSubscription" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Customer Email" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
                                 type: "email",
@@ -3638,9 +3821,9 @@ ${userText}`
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Plan" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Plan" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                               "select",
                               {
                                 value: formData.plan || "Starter",
@@ -3650,16 +3833,16 @@ ${userText}`
                                 }),
                                 className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Starter", children: "Starter ($29/mo)" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional ($99/mo)" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise ($299/mo)" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Starter", children: "Starter ($29/mo)" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Professional", children: "Professional ($99/mo)" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Enterprise", children: "Enterprise ($299/mo)" })
                                 ]
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Billing Cycle" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Billing Cycle" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                               "select",
                               {
                                 value: formData.billingCycle || "monthly",
@@ -3669,18 +3852,18 @@ ${userText}`
                                 }),
                                 className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "monthly", children: "Monthly" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "yearly", children: "Yearly (Save 15%)" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "monthly", children: "Monthly" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "yearly", children: "Yearly (Save 15%)" })
                                 ]
                               }
                             )
                           ] })
                         ] }),
-                        actionType === "exportCertificate" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will export your certificate of incorporation document." }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Format" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        actionType === "exportCertificate" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: "This will export your certificate of incorporation document." }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Format" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                               "select",
                               {
                                 value: formData.format || "pdf",
@@ -3690,17 +3873,17 @@ ${userText}`
                                 }),
                                 className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "pdf", children: "PDF" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "json", children: "JSON" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "pdf", children: "PDF" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "json", children: "JSON" })
                                 ]
                               }
                             )
                           ] })
                         ] }),
-                        (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Block Rule" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Block Rule" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                               "select",
                               {
                                 value: formData.ruleId || "rule_1",
@@ -3710,17 +3893,17 @@ ${userText}`
                                 }),
                                 className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_1", children: "Block if risk level = 'highest'" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_2", children: "Block if matches Stripe block lists" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_3", children: "Block if CVC verification fails" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_4", children: "Block if Postal code verification fails" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_1", children: "Block if risk level = 'highest'" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_2", children: "Block if matches Stripe block lists" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_3", children: "Block if CVC verification fails" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_4", children: "Block if Postal code verification fails" })
                                 ]
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enableBlockRule" ? "This will enable the selected block rule to actively block matching payments." : actionType === "disableBlockRule" ? "This will disable the selected block rule. Matching payments will no longer be blocked." : "This will toggle the selected block rule's state." })
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: actionType === "enableBlockRule" ? "This will enable the selected block rule to actively block matching payments." : actionType === "disableBlockRule" ? "This will disable the selected block rule. Matching payments will no longer be blocked." : "This will toggle the selected block rule's state." })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                           Button,
                           {
                             type: "button",
@@ -3729,10 +3912,10 @@ ${userText}`
                             className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
                             onClick: handleActionSubmit,
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Confirm" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Confirm" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
                               ] })
                             ]
                           }
@@ -3743,25 +3926,25 @@ ${userText}`
                   );
                 }
                 if (message.kind === "bulkPreview" && message.csvData) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     "div",
                     {
                       className: `${isRoleChange ? "mt-3" : ""}`,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-100 px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-gray-600" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-gray-500", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-gray-100 px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-gray-600" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-xs text-gray-500", children: [
                               "\u2022 ",
                               message.csvData.rowCount,
                               " rows"
                             ] })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Columns" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-1", children: message.csvData.columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Columns" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1", children: message.csvData.columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               "span",
                               {
                                 className: "text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded",
@@ -3770,23 +3953,23 @@ ${userText}`
                               i
                             )) })
                           ] }),
-                          message.csvData.sampleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Sample Data" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                          message.csvData.sampleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-3 py-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Sample Data" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                               "div",
                               {
                                 className: "text-xs text-gray-600 bg-white rounded px-2 py-1 border border-gray-100",
                                 children: [
-                                  Object.entries(row).slice(0, 3).map(([key, val], j) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                                  Object.entries(row).slice(0, 3).map(([key, val], j) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
                                     j > 0 && " \u2022 ",
-                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-gray-400", children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-gray-400", children: [
                                       key,
                                       ":"
                                     ] }),
                                     " ",
                                     val
                                   ] }, key)),
-                                  Object.keys(row).length > 3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-gray-400", children: [
+                                  Object.keys(row).length > 3 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-gray-400", children: [
                                     " ",
                                     "..."
                                   ] })
@@ -3795,14 +3978,14 @@ ${userText}`
                               i
                             )) })
                           ] }),
-                          message.suggestedAction && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-blue-700", children: [
+                          message.suggestedAction && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-xs text-blue-700", children: [
                             "Suggested action:",
                             " ",
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: message.suggestedAction.replace(/_/g, " ") })
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: message.suggestedAction.replace(/_/g, " ") })
                           ] }) })
                         ] }),
-                        message.bulkSessionId && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        message.bulkSessionId && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                             Button,
                             {
                               type: "button",
@@ -3811,19 +3994,19 @@ ${userText}`
                               className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
                               onClick: () => message.bulkSessionId && confirmBulkOperation(message.bulkSessionId),
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
                                   "Process ",
                                   message.csvData.rowCount,
                                   " rows"
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
                                 ] })
                               ]
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                             Button,
                             {
                               type: "button",
@@ -3843,35 +4026,35 @@ ${userText}`
                 if (message.kind === "bulkProgress" && message.bulkProgress) {
                   const { processed, total, successes, failures } = message.bulkProgress;
                   const percentage = Math.round(processed / total * 100);
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "div",
                     {
                       className: `${isRoleChange ? "mt-3" : ""}`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-blue-600" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-sm font-medium text-gray-700", children: [
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-blue-600" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-sm font-medium text-gray-700", children: [
                             "Processing... ",
                             processed,
                             " of ",
                             total
                           ] })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "div",
                           {
                             className: "h-full bg-blue-600 transition-all duration-300",
                             style: { width: `${percentage}%` }
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3 text-green-600" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3 text-green-600" }),
                             successes,
                             " successful"
                           ] }),
-                          failures > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
+                          failures > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
                             failures,
                             " failed"
                           ] })
@@ -3885,41 +4068,41 @@ ${userText}`
                   const { total, successes, failures, navigationPage } = message.bulkSummary;
                   const hasFailures = failures.length > 0;
                   const pageLabel = navigationPage?.page === "customers" ? "Customers" : navigationPage?.page === "dashboard" ? "Dashboard" : navigationPage?.page === "settings" ? "Settings" : "Results";
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "div",
                     {
                       className: `${isRoleChange ? "mt-3" : ""}`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                         "div",
                         {
                           className: `rounded-lg border p-3 ${hasFailures ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`,
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                 import_lucide_react4.CheckCircle2,
                                 {
                                   className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}`
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-4 text-xs", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-green-700", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-4 text-xs", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 text-green-700", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3" }),
                                 successes,
                                 " successful"
                               ] }),
-                              hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
+                              hasFailures && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
                                 failures.length,
                                 " failed"
                               ] })
                             ] }),
-                            hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
-                                failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                            hasFailures && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
+                                failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                                   "div",
                                   {
                                     className: "text-xs text-red-700 bg-red-50 rounded px-2 py-1",
@@ -3933,14 +4116,14 @@ ${userText}`
                                   },
                                   i
                                 )),
-                                failures.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-xs text-amber-600", children: [
+                                failures.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-xs text-amber-600", children: [
                                   "...and ",
                                   failures.length - 5,
                                   " more"
                                 ] })
                               ] })
                             ] }),
-                            navigationPage && successes > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                            navigationPage && successes > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                               "button",
                               {
                                 type: "button",
@@ -3973,12 +4156,12 @@ ${userText}`
                                 },
                                 className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 transition-colors group cursor-pointer",
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-gray-100 rounded text-[10px] font-medium text-gray-600 group-hover:bg-gray-200", children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-2.5 w-2.5" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "+" }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-2.5 w-2.5" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-gray-100 rounded text-[10px] font-medium text-gray-600 group-hover:bg-gray-200", children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-2.5 w-2.5" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "+" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-2.5 w-2.5" })
                                   ] }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
                                     "View ",
                                     pageLabel
                                   ] })
@@ -3992,19 +4175,19 @@ ${userText}`
                     message.id
                   );
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(React4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(React4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     ref: isCurrentGuideStep ? currentStepRef : null,
                     className: `${isRoleChange ? "mt-3" : ""}`,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm leading-6 text-gray-700", children: (() => {
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-sm leading-6 text-gray-700", children: (() => {
                         const text = message.content || "";
                         if (message.kind === "guideStep") {
                           const m = text.match(/^(Step\s+\d+:)([\s\S]*)/);
                           if (m) {
-                            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: m[1] }),
+                            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: m[1] }),
                               m[2]
                             ] });
                           }
@@ -4012,16 +4195,16 @@ ${userText}`
                         if (message.role === "assistant" && text) {
                           return renderMarkdown(text);
                         }
-                        return text || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "opacity-70", children: "Thinking\u2026" });
+                        return text || /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "opacity-70", children: "Thinking\u2026" });
                       })() }),
-                      message.role === "assistant" && message.structuredData && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      message.role === "assistant" && message.structuredData && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         DataRenderer,
                         {
                           type: message.structuredData.type,
                           data: message.structuredData.data
                         }
                       ) }),
-                      message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           type: "button",
@@ -4035,8 +4218,8 @@ ${userText}`
                   }
                 ) }, message.id);
               }),
-              (activeGuide || guideComplete) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
-                activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              (activeGuide || guideComplete) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
+                activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   Button,
                   {
                     type: "button",
@@ -4044,10 +4227,10 @@ ${userText}`
                     variant: "secondary",
                     className: "h-7 w-7 rounded-full p-0 bg-gray-100 hover:bg-gray-200 border border-gray-200",
                     onClick: goBackGuide,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   Button,
                   {
                     type: "button",
@@ -4056,31 +4239,32 @@ ${userText}`
                     className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
                     onClick: guideComplete ? handleBack : advanceGuide,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: guideComplete ? "Done" : "Next" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: guideComplete ? "Done" : "Next" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
                       ] })
                     ]
                   }
                 )
               ] }),
-              (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 AssistantActivity,
                 {
                   phase,
                   progressSteps
                 }
               ) }),
-              !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: messagesEndRef })
+              isEscalated && agentIsTyping && phase === "idle" && /* @__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 })
             ] }) }) }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-4 py-3 border-t border-gray-100 bg-gray-50/50 shrink-0", children: [
-          pendingFile && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-4 py-3 border-t border-gray-100 bg-gray-50/50 shrink-0", children: [
+          pendingFile && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -4089,12 +4273,12 @@ ${userText}`
                   if (fileInputRef.current) fileInputRef.current.value = "";
                 },
                 className: "text-blue-600 hover:text-blue-800",
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { onSubmit: handleSubmit, className: "w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className: "w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "input",
               {
                 ref: fileInputRef,
@@ -4109,8 +4293,8 @@ ${userText}`
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full items-start gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 shadow-sm", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex w-full items-start gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 shadow-sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 Button,
                 {
                   type: "button",
@@ -4119,15 +4303,20 @@ ${userText}`
                   onClick: () => fileInputRef.current?.click(),
                   className: "h-5 w-5 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
                   title: "Upload CSV for bulk operations",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Paperclip, { className: "h-2.5 w-2.5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Paperclip, { className: "h-2.5 w-2.5" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "textarea",
                 {
                   placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
                   value: input,
-                  onChange: (e) => setInput(e.target.value),
+                  onChange: (e) => {
+                    setInput(e.target.value);
+                    if (e.target.value.length > 0) {
+                      handleTypingStart();
+                    }
+                  },
                   rows: 1,
                   className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400 resize-none overflow-hidden outline-none",
                   style: { minHeight: "20px", maxHeight: "120px" },
@@ -4178,20 +4367,20 @@ ${userText}`
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 Button,
                 {
                   type: "submit",
                   size: "icon",
                   disabled: !input.trim() && !pendingFile,
                   className: "h-6 w-6 rounded-full bg-gray-900 hover:bg-gray-800 disabled:bg-gray-300",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowUp, { className: "h-2.5 w-2.5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowUp, { className: "h-2.5 w-2.5" })
                 }
               )
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           GuideCursor,
           {
             x: cursorState.x,
@@ -4209,7 +4398,7 @@ function PanelToggle({
   onClick,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       type: "button",
@@ -4220,7 +4409,7 @@ function PanelToggle({
         right: isOpen ? `${PANEL_WIDTH}px` : "0px",
         transform: "translateY(-50%)"
       },
-      children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" })
+      children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" })
     }
   );
 }
@@ -4238,7 +4427,9 @@ function ChatPanelWithToggle({
   orgId,
   userName,
   userEmail,
-  userOrganization
+  userOrganization,
+  supabaseUrl,
+  supabaseAnonKey
 }) {
   const [internalIsOpen, setInternalIsOpen] = React4.useState(defaultOpen);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
@@ -4258,7 +4449,7 @@ function ChatPanelWithToggle({
       document.body.style.transition = originalTransition;
     };
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     ChatPanel,
     {
       isOpen,
@@ -4274,25 +4465,27 @@ function ChatPanelWithToggle({
       orgId,
       userName,
       userEmail,
-      userOrganization
+      userOrganization,
+      supabaseUrl,
+      supabaseAnonKey
     }
   );
 }
 function HelpButton({ onClick, className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       type: "button",
       onClick,
       className: `flex items-center justify-center w-6 h-16 bg-gray-100 hover:bg-gray-200 border border-gray-200 border-r-0 rounded-l-lg text-gray-600 hover:text-gray-800 transition-all duration-200 shadow-sm ${className}`,
       "aria-label": "Open help",
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" })
     }
   );
 }
 
 // src/createKiteChat.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function KiteChatWrapper({
   initialConfig,
   onConfigUpdate,
@@ -4329,7 +4522,7 @@ function KiteChatWrapper({
       container.classList.toggle("dark", prefersDark);
     }
   }, [config.theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     ChatPanelWithToggle,
     {
       isOpen,
@@ -4344,7 +4537,9 @@ function KiteChatWrapper({
       orgId: config.orgId,
       userName: config.userName,
       userEmail: config.userEmail,
-      userOrganization: config.userOrganization
+      userOrganization: config.userOrganization,
+      supabaseUrl: config.supabaseUrl,
+      supabaseAnonKey: config.supabaseAnonKey
     }
   );
 }
@@ -4374,7 +4569,7 @@ function createKiteChat(config) {
       }
       root = (0, import_client.createRoot)(containerElement);
       root.render(
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           KiteChatWrapper,
           {
             initialConfig: currentConfig,