@kite-copilot/chat-panel 0.2.53 → 0.2.55

package/dist/auto.cjs

@@ -40,6 +40,7 @@ var import_client = require("react-dom/client");
 
 // src/ChatPanel.tsx
 var React6 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
 var import_supabase_js = require("@supabase/supabase-js");
 
 // src/lib/utils.ts
@@ -1560,53 +1561,107 @@ function ImageLightbox({
       window.open(imageUrl, "_blank");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "div",
-    {
-      className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/80",
-      onClick: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-        "div",
-        {
-          className: "relative max-w-[90vw] max-h-[90vh] flex flex-col items-center",
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "img",
-              {
-                src: imageUrl,
-                alt: "Full size preview",
-                className: "max-w-full max-h-[80vh] object-contain rounded-lg"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-3 mt-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                "button",
-                {
-                  onClick: handleDownload,
-                  className: "flex items-center gap-2 px-4 py-2 bg-white text-gray-800 rounded-lg hover:bg-gray-100 transition-colors text-sm font-medium",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Download, { className: "h-4 w-4" }),
-                    "Download"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                "button",
-                {
-                  onClick: onClose,
-                  className: "flex items-center gap-2 px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors text-sm font-medium",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-4 w-4" }),
-                    "Close"
-                  ]
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(0, 0, 0, 0.8)",
+          zIndex: 99999
+        },
+        onClick: onClose,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onClose();
+              },
+              style: {
+                position: "absolute",
+                top: "16px",
+                right: "16px",
+                padding: "8px",
+                borderRadius: "9999px",
+                backgroundColor: "rgba(0, 0, 0, 0.5)",
+                color: "white",
+                border: "none",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              "aria-label": "Close",
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { style: { height: "24px", width: "24px" } })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "div",
+            {
+              style: {
+                position: "relative",
+                maxWidth: "90vw",
+                maxHeight: "90vh",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center"
+              },
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: "Full size preview",
+                    style: {
+                      maxWidth: "100%",
+                      maxHeight: "85vh",
+                      objectFit: "contain",
+                      borderRadius: "8px",
+                      boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", gap: "12px", marginTop: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                  "button",
+                  {
+                    onClick: handleDownload,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      padding: "8px 16px",
+                      backgroundColor: "white",
+                      color: "#1f2937",
+                      borderRadius: "8px",
+                      border: "none",
+                      cursor: "pointer",
+                      fontSize: "14px",
+                      fontWeight: 500,
+                      boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Download, { style: { height: "16px", width: "16px" } }),
+                      "Download"
+                    ]
+                  }
+                ) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
   );
 }
 function ChatPanel({
@@ -1720,6 +1775,18 @@ function ChatPanel({
         }
       );
     }
+    if (supabaseRef.current && sessionId) {
+      console.log("[KiteChat] resetSession - marking session as ended:", sessionId);
+      supabaseRef.current.from("sessions").update({ session_status: "ended" }).eq("session_id", sessionId).then(
+        () => console.log("[KiteChat] resetSession - session marked as ended successfully:", sessionId),
+        (err) => console.error("[KiteChat] resetSession - failed to mark session as ended:", sessionId, err)
+      );
+    } else {
+      console.log("[KiteChat] resetSession - skipped marking session as ended:", {
+        hasSupabase: !!supabaseRef.current,
+        sessionId
+      });
+    }
     setSessionUser(null);
     setSessionId(crypto.randomUUID());
     setIsEscalated(false);
@@ -1795,6 +1862,42 @@ function ChatPanel({
       );
     }
   }, [isOpen, isEscalated, sessionId]);
+  React6.useEffect(() => {
+    if (!sessionId || !effectiveSupabaseUrl || !effectiveSupabaseAnonKey) {
+      console.log("[KiteChat] Session end handler skipped - missing:", {
+        sessionId: !!sessionId,
+        supabaseUrl: !!effectiveSupabaseUrl,
+        supabaseKey: !!effectiveSupabaseAnonKey
+      });
+      return;
+    }
+    const currentSessionId = sessionId;
+    const sbUrl = effectiveSupabaseUrl;
+    const sbKey = effectiveSupabaseAnonKey;
+    console.log("[KiteChat] Registering session end handler for session:", currentSessionId);
+    const markSessionEnded = () => {
+      console.log("[KiteChat] Marking session as ended:", currentSessionId);
+      const sessionsUrl = `${sbUrl}/rest/v1/sessions?session_id=eq.${currentSessionId}`;
+      fetch(sessionsUrl, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "apikey": sbKey,
+          "Authorization": `Bearer ${sbKey}`,
+          "Prefer": "return=minimal"
+        },
+        body: JSON.stringify({ session_status: "ended" }),
+        keepalive: true
+      }).catch(() => {
+      });
+    };
+    window.addEventListener("beforeunload", markSessionEnded);
+    return () => {
+      console.log("[KiteChat] Component unmounting - marking session as ended:", currentSessionId);
+      window.removeEventListener("beforeunload", markSessionEnded);
+      markSessionEnded();
+    };
+  }, [sessionId, effectiveSupabaseUrl, effectiveSupabaseAnonKey]);
   const heartbeatIntervalRef = React6.useRef(null);
   const updateCustomerStatus = React6.useCallback(async (status) => {
     if (!supabaseRef.current || !sessionId) return;
@@ -1826,7 +1929,11 @@ function ChatPanel({
       );
     };
     const markDisconnectedWithKeepalive = () => {
-      if (!sbUrl || !sbKey) return;
+      console.log("[KiteChat] markDisconnectedWithKeepalive called for escalated session:", currentSessionId);
+      if (!sbUrl || !sbKey) {
+        console.log("[KiteChat] markDisconnectedWithKeepalive skipped - missing credentials");
+        return;
+      }
       const url = `${sbUrl}/rest/v1/escalations?session_id=eq.${currentSessionId}`;
       fetch(url, {
         method: "PATCH",
@@ -1843,6 +1950,20 @@ function ChatPanel({
         keepalive: true
       }).catch(() => {
       });
+      console.log("[KiteChat] markDisconnectedWithKeepalive - also marking session as ended:", currentSessionId);
+      const sessionsUrl = `${sbUrl}/rest/v1/sessions?session_id=eq.${currentSessionId}`;
+      fetch(sessionsUrl, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "apikey": sbKey,
+          "Authorization": `Bearer ${sbKey}`,
+          "Prefer": "return=minimal"
+        },
+        body: JSON.stringify({ session_status: "ended" }),
+        keepalive: true
+      }).catch(() => {
+      });
     };
     console.log("[KiteChat] Starting presence heartbeat for live chat");
     markActive();
@@ -2029,8 +2150,28 @@ function ChatPanel({
       file,
       preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : ""
     }));
-    setPendingImages((prev) => [...prev, ...newImages]);
+    console.log("[KiteChat] Adding images to pending:", newImages.length, "files");
+    setPendingImages((prev) => {
+      const updated = [...prev, ...newImages];
+      console.log("[KiteChat] pendingImages now:", updated.length);
+      return updated;
+    });
   }, []);
+  React6.useEffect(() => {
+    const hasText = input.trim().length > 0;
+    const hasFile = !!pendingFile;
+    const hasImages = pendingImages.length > 0;
+    const disabled = !hasText && !hasFile && !hasImages || isWaitingForAuth;
+    console.log("[KiteChat] Send button state:", {
+      hasText,
+      hasFile,
+      hasImages,
+      pendingImagesCount: pendingImages.length,
+      isWaitingForAuth,
+      authStatus: authState.status,
+      disabled
+    });
+  }, [input, pendingFile, pendingImages, isWaitingForAuth, authState.status]);
   const handleDragOver = React6.useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -2192,12 +2333,20 @@ function ChatPanel({
     onNavigate
   ]);
   const connectToEscalationWs = React6.useCallback((currentSessionId) => {
-    if (!agentUrl) return;
+    if (!agentUrl) {
+      console.log("[KiteChat] No agentUrl, skipping WebSocket connection");
+      return;
+    }
     if (escalationWsRef.current) {
+      console.log("[KiteChat] Closing existing WebSocket connection");
       escalationWsRef.current.close();
     }
     const wsUrl = agentUrl.replace(/^http/, "ws") + `/ws/escalation/${currentSessionId}`;
+    console.log("[KiteChat] Connecting to escalation WebSocket:", wsUrl);
     const ws = new WebSocket(wsUrl);
+    ws.onopen = () => {
+      console.log("[KiteChat] Escalation WebSocket connected successfully");
+    };
     ws.onmessage = (event) => {
       try {
         const data = JSON.parse(event.data);
@@ -2228,13 +2377,18 @@ function ChatPanel({
     ws.onerror = (err) => {
       console.error("[KiteChat] Escalation WebSocket error:", err);
     };
-    ws.onclose = () => {
+    ws.onclose = (event) => {
+      console.log("[KiteChat] Escalation WebSocket closed - code:", event.code, "reason:", event.reason);
     };
     escalationWsRef.current = ws;
   }, [agentUrl]);
   const sendEscalatedMessage = React6.useCallback(async (content) => {
-    if (!escalationWsRef.current || escalationWsRef.current.readyState !== WebSocket.OPEN) {
-      console.error("[KiteChat] Escalation WebSocket not connected");
+    if (!escalationWsRef.current) {
+      console.error("[KiteChat] Escalation WebSocket not connected - no ref");
+      return false;
+    }
+    if (escalationWsRef.current.readyState !== WebSocket.OPEN) {
+      console.error("[KiteChat] Escalation WebSocket not connected - state:", escalationWsRef.current.readyState, "(0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED)");
       return false;
     }
     try {
@@ -2266,7 +2420,9 @@ function ChatPanel({
     };
   }, []);
   React6.useEffect(() => {
+    console.log("[KiteChat] Escalation useEffect - isEscalated:", isEscalated, "sessionId:", sessionId);
     if (isEscalated && sessionId) {
+      console.log("[KiteChat] Triggering WebSocket connection for escalation");
       connectToEscalationWs(sessionId);
     }
   }, [isEscalated, sessionId, connectToEscalationWs]);
@@ -3536,8 +3692,8 @@ ${userText}`
     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` },
+        className: `fixed bottom-4 z-40 flex flex-col bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-2xl ${corner === "bottom-left" ? "left-4" : "right-4"} ${isOpen ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"}`,
+        style: { width: `${PANEL_WIDTH}px`, height: `${PANEL_HEIGHT}px` },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
@@ -3568,8 +3724,8 @@ ${userText}`
       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` },
+          className: `fixed bottom-4 z-40 flex flex-col bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-2xl ${corner === "bottom-left" ? "left-4" : "right-4"} ${isOpen ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"}`,
+          style: { width: `${PANEL_WIDTH}px`, height: `${PANEL_HEIGHT}px` },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
@@ -3596,8 +3752,8 @@ ${userText}`
       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` },
+          className: `fixed bottom-4 z-40 flex flex-col bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-2xl ${corner === "bottom-left" ? "left-4" : "right-4"} ${isOpen ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"}`,
+          style: { width: `${PANEL_WIDTH}px`, height: `${PANEL_HEIGHT}px` },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
@@ -3649,9 +3805,8 @@ ${userText}`
                 size: "sm",
                 className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
                 onClick: () => {
-                  resetSession();
                   setMessages([]);
-                  setPanelView("landing");
+                  resetSession();
                   setCurrentFolderId(void 0);
                   setActiveGuide(void 0);
                   activeGuideRef.current = void 0;
@@ -3683,1181 +3838,1184 @@ ${userText}`
             )
           ] })
         ] }),
-        /* @__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_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",
-                    "bg-purple-400",
-                    "bg-orange-400",
-                    "bg-pink-400"
-                  ];
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                    Button,
-                    {
-                      type: "button",
-                      size: "sm",
-                      variant: "ghost",
-                      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_runtime10.jsx)(
-                          "span",
-                          {
-                            className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}`
-                          }
-                        ),
-                        question.label
-                      ]
-                    },
-                    question.id
-                  );
-                }) }) }),
-                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)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "div",
+            {
+              className: `absolute inset-0 grid place-items-center overflow-y-auto ${isEmpty ? "visible" : "invisible pointer-events-none"}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full px-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "py-3", 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",
+                      "bg-purple-400",
+                      "bg-orange-400",
+                      "bg-pink-400"
+                    ];
+                    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                       Button,
                       {
                         type: "button",
-                        size: "icon",
+                        size: "sm",
                         variant: "ghost",
-                        className: "h-7 w-7 rounded-full hover:bg-gray-100",
-                        onClick: closeFolder,
-                        "aria-label": "Back to suggestions",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowLeft, { className: "h-4 w-4 text-gray-500" })
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
-                  ] }),
-                  /* @__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",
-                      size: "sm",
-                      variant: "secondary",
-                      className: "justify-start rounded-xl border border-gray-200 bg-gray-50 px-3 py-2.5 text-xs text-gray-700 shadow-none transition-all hover:bg-gray-100 hover:border-gray-300 h-auto",
-                      onClick: () => sendTopic(topic.prompt),
-                      children: topic.label
-                    },
-                    topic.id
-                  )) })
-                ] })
-              ] })
-            ] }) : /* @__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;
-                const isRoleChange = previousRole !== void 0 && previousRole !== message.role;
-                const currentGuide = activeGuideRef.current || activeGuide;
-                let isCurrentGuideStep = false;
-                if (currentGuide && message.kind === "guideStep") {
-                  if (message.guideStepIndex !== void 0) {
-                    isCurrentGuideStep = message.guideStepIndex === currentGuide.stepIndex;
-                  } else {
-                    isCurrentGuideStep = index === messages.length - 1;
-                  }
-                } else if (message.kind === "guideComplete") {
-                  isCurrentGuideStep = index === messages.length - 1;
-                }
-                if (message.kind === "guideStep" && !isCurrentGuideStep) {
-                  return null;
-                }
-                if (isUser) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-end gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
-                    message.imageUrls && message.imageUrls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1 justify-end max-w-[260px]", children: message.imageUrls.map((url, imgIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                      "button",
-                      {
-                        onClick: () => setLightboxImageUrl(url),
-                        className: "block cursor-pointer",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                          "img",
-                          {
-                            src: url,
-                            alt: `Attachment ${imgIndex + 1}`,
-                            className: "max-h-32 max-w-[200px] rounded-lg object-cover border border-gray-700 hover:opacity-90 transition-opacity"
-                          }
-                        )
+                        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_runtime10.jsx)(
+                            "span",
+                            {
+                              className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}`
+                            }
+                          ),
+                          question.label
+                        ]
                       },
-                      imgIndex
-                    )) }),
-                    message.content && !message.content.match(/^!\[image\]\([^)]+\)(\n!\[image\]\([^)]+\))*$/) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3 py-2 text-sm text-white shadow-sm", children: message.content.replace(/!\[image\]\([^)]+\)\n*/g, "").trim() })
-                  ] }, message.id);
-                }
-                if (message.role === "agent") {
-                  const imageRegex = /!\[image\]\(([^)]+)\)/g;
-                  const extractedImageUrls = [];
-                  let match;
-                  const contentStr = message.content || "";
-                  while ((match = imageRegex.exec(contentStr)) !== null) {
-                    extractedImageUrls.push(match[1]);
-                  }
-                  const agentImageUrls = message.imageUrls || extractedImageUrls;
-                  const agentTextContent = contentStr.replace(/!\[image\]\([^)]+\)\n*/g, "").trim();
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-start gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
-                    isRoleChange && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-gray-500 mb-1 ml-1", children: "Agent" }),
-                    agentImageUrls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1 justify-start max-w-[300px]", children: agentImageUrls.map((url, imgIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                      "button",
+                      question.id
+                    );
+                  }) }) }),
+                  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",
+                          size: "icon",
+                          variant: "ghost",
+                          className: "h-7 w-7 rounded-full hover:bg-gray-100",
+                          onClick: closeFolder,
+                          "aria-label": "Back to suggestions",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowLeft, { className: "h-4 w-4 text-gray-500" })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
+                    ] }),
+                    /* @__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,
                       {
-                        onClick: () => setLightboxImageUrl(url),
-                        className: "block cursor-pointer",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                          "img",
-                          {
-                            src: url,
-                            alt: `Attachment ${imgIndex + 1}`,
-                            className: "max-h-32 max-w-[200px] rounded-lg object-cover border border-gray-300 hover:opacity-90 transition-opacity"
-                          }
-                        )
+                        type: "button",
+                        size: "sm",
+                        variant: "secondary",
+                        className: "justify-start rounded-xl border border-gray-200 bg-gray-50 px-3 py-2.5 text-xs text-gray-700 shadow-none transition-all hover:bg-gray-100 hover:border-gray-300 h-auto",
+                        onClick: () => sendTopic(topic.prompt),
+                        children: topic.label
                       },
-                      imgIndex
-                    )) }),
-                    agentTextContent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[300px] rounded-2xl rounded-bl-md bg-gray-100 px-4 py-3 text-sm text-gray-700", children: agentTextContent })
-                  ] }, message.id);
+                      topic.id
+                    )) })
+                  ] })
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `flex-1 flex flex-col min-h-0 overflow-hidden ${isEmpty ? "invisible pointer-events-none" : "visible"}`, 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;
+              const isRoleChange = previousRole !== void 0 && previousRole !== message.role;
+              const currentGuide = activeGuideRef.current || activeGuide;
+              let isCurrentGuideStep = false;
+              if (currentGuide && message.kind === "guideStep") {
+                if (message.guideStepIndex !== void 0) {
+                  isCurrentGuideStep = message.guideStepIndex === currentGuide.stepIndex;
+                } else {
+                  isCurrentGuideStep = index === messages.length - 1;
                 }
-                if (message.kind === "searchSummary") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                    "div",
+              } else if (message.kind === "guideComplete") {
+                isCurrentGuideStep = index === messages.length - 1;
+              }
+              if (message.kind === "guideStep" && !isCurrentGuideStep) {
+                return null;
+              }
+              if (isUser) {
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-end gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
+                  message.imageUrls && message.imageUrls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1 justify-end max-w-[260px]", children: message.imageUrls.map((url, imgIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "button",
                     {
-                      className: `${isRoleChange ? "mt-3" : ""}`,
+                      onClick: () => setLightboxImageUrl(url),
+                      className: "block cursor-pointer",
                       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                        AssistantSearchSummary,
+                        "img",
                         {
-                          title: message.title ?? "Search results",
-                          links: message.links ?? []
+                          src: url,
+                          alt: `Attachment ${imgIndex + 1}`,
+                          className: "max-h-32 max-w-[200px] rounded-lg object-cover border border-gray-700 hover:opacity-90 transition-opacity"
                         }
                       )
                     },
-                    message.id
-                  );
+                    imgIndex
+                  )) }),
+                  message.content && !message.content.match(/^!\[image\]\([^)]+\)(\n!\[image\]\([^)]+\))*$/) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3 py-2 text-sm text-white shadow-sm", children: message.content.replace(/!\[image\]\([^)]+\)\n*/g, "").trim() })
+                ] }, message.id);
+              }
+              if (message.role === "agent") {
+                const imageRegex = /!\[image\]\(([^)]+)\)/g;
+                const extractedImageUrls = [];
+                let match;
+                const contentStr = message.content || "";
+                while ((match = imageRegex.exec(contentStr)) !== null) {
+                  extractedImageUrls.push(match[1]);
                 }
-                if (message.kind === "guideComplete") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                    "div",
+                const agentImageUrls = message.imageUrls || extractedImageUrls;
+                const agentTextContent = contentStr.replace(/!\[image\]\([^)]+\)\n*/g, "").trim();
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-start gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
+                  isRoleChange && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-gray-500 mb-1 ml-1", children: "Agent" }),
+                  agentImageUrls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1 justify-start max-w-[300px]", children: agentImageUrls.map((url, imgIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "button",
                     {
-                      ref: isCurrentGuideStep ? currentStepRef : null,
-                      className: `${isRoleChange ? "mt-3" : ""}`,
-                      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 })
-                      ] })
+                      onClick: () => setLightboxImageUrl(url),
+                      className: "block cursor-pointer",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        "img",
+                        {
+                          src: url,
+                          alt: `Attachment ${imgIndex + 1}`,
+                          className: "max-h-32 max-w-[200px] rounded-lg object-cover border border-gray-300 hover:opacity-90 transition-opacity"
+                        }
+                      )
                     },
-                    message.id
-                  );
-                }
-                if (message.kind === "navigationAction") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    imgIndex
+                  )) }),
+                  agentTextContent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[300px] rounded-2xl rounded-bl-md bg-gray-100 px-4 py-3 text-sm text-gray-700", children: agentTextContent })
+                ] }, message.id);
+              }
+              if (message.kind === "searchSummary") {
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "div",
+                  {
+                    className: `${isRoleChange ? "mt-3" : ""}`,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      AssistantSearchSummary,
+                      {
+                        title: message.title ?? "Search results",
+                        links: message.links ?? []
+                      }
+                    )
+                  },
+                  message.id
+                );
+              }
+              if (message.kind === "guideComplete") {
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "div",
+                  {
+                    ref: isCurrentGuideStep ? currentStepRef : null,
+                    className: `${isRoleChange ? "mt-3" : ""}`,
+                    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_runtime10.jsxs)(
+                  "div",
+                  {
+                    className: `${isRoleChange ? "mt-3" : ""}`,
+                    children: [
+                      /* @__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",
+                          size: "sm",
+                          variant: "secondary",
+                          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.navigationTarget && handleConfirmNavigation(
+                            message.navigationTarget
+                          ),
+                          children: [
+                            /* @__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" })
+                            ] })
+                          ]
+                        }
+                      ) })
+                    ]
+                  },
+                  message.id
+                );
+              }
+              if (message.kind === "actionForm") {
+                const actionType = message.actionType;
+                const formData = Object.keys(actionFormData).length > 0 ? actionFormData : message.actionData || {};
+                if (message.isSubmitted) {
+                  let successContent = "";
+                  if (actionType === "updateCompanyInfo") {
+                    successContent = "Company information has been updated successfully.";
+                  } else if (actionType === "addApiKey") {
+                    successContent = "API key has been added successfully.";
+                  } else if (actionType === "addCustomer") {
+                    successContent = "Customer has been added successfully.";
+                  } else if (actionType === "enable2FA") {
+                    successContent = "Two-factor authentication has been enabled successfully.";
+                  } else if (actionType === "disable2FA") {
+                    successContent = "Two-factor authentication has been disabled successfully.";
+                  } else if (actionType === "changePassword") {
+                    successContent = "Your password has been changed successfully.";
+                  } else if (actionType === "revokeSession") {
+                    successContent = "Session has been revoked successfully.";
+                  } else if (actionType === "toggleNotification") {
+                    successContent = "Notification preferences have been updated successfully.";
+                  } else if (actionType === "connectIntegration") {
+                    successContent = "Integration has been connected successfully.";
+                  } else if (actionType === "disconnectIntegration") {
+                    successContent = "Integration has been disconnected successfully.";
+                  } else if (actionType === "addPaymentMethod") {
+                    successContent = "Payment method has been added successfully.";
+                  } else if (actionType === "removePaymentMethod") {
+                    successContent = "Payment method has been removed successfully.";
+                  } else if (actionType === "deleteApiKey") {
+                    successContent = "API key has been deleted successfully.";
+                  } else if (actionType === "addWebhook") {
+                    successContent = "Webhook endpoint has been added successfully.";
+                  } else if (actionType === "updateCurrency") {
+                    successContent = "Currency preference has been updated successfully.";
+                  } else if (actionType === "updateTimezone") {
+                    successContent = "Timezone has been updated successfully.";
+                  } else if (actionType === "refundPayment") {
+                    successContent = "Refund has been processed successfully.";
+                  } else if (actionType === "exportCertificate") {
+                    successContent = "Certificate of Incorporation has been downloaded successfully.";
+                  } else if (actionType === "createSubscription") {
+                    successContent = "Subscription has been created successfully.";
+                  } else if (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") {
+                    successContent = "Block rule has been updated successfully.";
+                  } else {
+                    successContent = "Action completed successfully.";
+                  }
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "div",
                     {
                       className: `${isRoleChange ? "mt-3" : ""}`,
-                      children: [
-                        /* @__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",
-                            size: "sm",
-                            variant: "secondary",
-                            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.navigationTarget && handleConfirmNavigation(
-                              message.navigationTarget
-                            ),
-                            children: [
-                              /* @__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" })
-                              ] })
-                            ]
-                          }
-                        ) })
-                      ]
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent })
                     },
                     message.id
                   );
                 }
-                if (message.kind === "actionForm") {
-                  const actionType = message.actionType;
-                  const formData = Object.keys(actionFormData).length > 0 ? actionFormData : message.actionData || {};
-                  if (message.isSubmitted) {
-                    let successContent = "";
-                    if (actionType === "updateCompanyInfo") {
-                      successContent = "Company information has been updated successfully.";
-                    } else if (actionType === "addApiKey") {
-                      successContent = "API key has been added successfully.";
-                    } else if (actionType === "addCustomer") {
-                      successContent = "Customer has been added successfully.";
-                    } else if (actionType === "enable2FA") {
-                      successContent = "Two-factor authentication has been enabled successfully.";
-                    } else if (actionType === "disable2FA") {
-                      successContent = "Two-factor authentication has been disabled successfully.";
-                    } else if (actionType === "changePassword") {
-                      successContent = "Your password has been changed successfully.";
-                    } else if (actionType === "revokeSession") {
-                      successContent = "Session has been revoked successfully.";
-                    } else if (actionType === "toggleNotification") {
-                      successContent = "Notification preferences have been updated successfully.";
-                    } else if (actionType === "connectIntegration") {
-                      successContent = "Integration has been connected successfully.";
-                    } else if (actionType === "disconnectIntegration") {
-                      successContent = "Integration has been disconnected successfully.";
-                    } else if (actionType === "addPaymentMethod") {
-                      successContent = "Payment method has been added successfully.";
-                    } else if (actionType === "removePaymentMethod") {
-                      successContent = "Payment method has been removed successfully.";
-                    } else if (actionType === "deleteApiKey") {
-                      successContent = "API key has been deleted successfully.";
-                    } else if (actionType === "addWebhook") {
-                      successContent = "Webhook endpoint has been added successfully.";
-                    } else if (actionType === "updateCurrency") {
-                      successContent = "Currency preference has been updated successfully.";
-                    } else if (actionType === "updateTimezone") {
-                      successContent = "Timezone has been updated successfully.";
-                    } else if (actionType === "refundPayment") {
-                      successContent = "Refund has been processed successfully.";
-                    } else if (actionType === "exportCertificate") {
-                      successContent = "Certificate of Incorporation has been downloaded successfully.";
-                    } else if (actionType === "createSubscription") {
-                      successContent = "Subscription has been created successfully.";
-                    } else if (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") {
-                      successContent = "Block rule has been updated successfully.";
-                    } else {
-                      successContent = "Action completed successfully.";
-                    }
-                    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                      "div",
-                      {
-                        className: `${isRoleChange ? "mt-3" : ""}`,
-                        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_runtime10.jsxs)(
-                    "div",
-                    {
-                      className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`,
-                      children: [
-                        /* @__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",
-                                  value: formData.companyName || "",
-                                  onChange: (e) => setActionFormData({
-                                    ...actionFormData,
-                                    companyName: e.target.value
-                                  }),
-                                  className: "h-8 text-xs border-gray-200"
-                                }
-                              )
-                            ] }),
-                            /* @__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",
-                                  placeholder: "contact@acme.com",
-                                  value: formData.email || "",
-                                  onChange: (e) => setActionFormData({
-                                    ...actionFormData,
-                                    email: e.target.value
-                                  }),
-                                  className: "h-8 text-xs border-gray-200"
-                                }
-                              )
-                            ] })
-                          ] }),
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                  "div",
+                  {
+                    className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`,
+                    children: [
+                      /* @__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: "Address" }),
+                            /* @__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: "123 Main St, San Francisco, CA",
-                                value: formData.address || "",
+                                placeholder: "Acme Corporation",
+                                value: formData.companyName || "",
                                 onChange: (e) => setActionFormData({
                                   ...actionFormData,
-                                  address: e.target.value
+                                  companyName: e.target.value
                                 }),
                                 className: "h-8 text-xs border-gray-200"
                               }
                             )
                           ] }),
-                          /* @__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",
-                                  placeholder: "+1 (555) 123-4567",
-                                  value: formData.phone || "",
-                                  onChange: (e) => setActionFormData({
-                                    ...actionFormData,
-                                    phone: e.target.value
-                                  }),
-                                  className: "h-8 text-xs border-gray-200"
-                                }
-                              )
-                            ] }),
-                            /* @__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",
-                                  placeholder: "https://acme.com",
-                                  value: formData.website || "",
-                                  onChange: (e) => setActionFormData({
-                                    ...actionFormData,
-                                    website: e.target.value
-                                  }),
-                                  className: "h-8 text-xs border-gray-200"
-                                }
-                              )
-                            ] })
+                          /* @__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",
+                                placeholder: "contact@acme.com",
+                                value: formData.email || "",
+                                onChange: (e) => setActionFormData({
+                                  ...actionFormData,
+                                  email: e.target.value
+                                }),
+                                className: "h-8 text-xs border-gray-200"
+                              }
+                            )
                           ] })
                         ] }),
-                        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.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: "Production Key",
-                              value: formData.name || "",
+                              placeholder: "123 Main St, San Francisco, CA",
+                              value: formData.address || "",
                               onChange: (e) => setActionFormData({
                                 ...actionFormData,
-                                name: e.target.value
+                                address: e.target.value
                               }),
                               className: "h-8 text-xs border-gray-200"
                             }
                           )
-                        ] }) }),
-                        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",
-                                  value: formData.name || "",
-                                  onChange: (e) => setActionFormData({
-                                    ...actionFormData,
-                                    name: e.target.value
-                                  }),
-                                  className: "h-8 text-xs border-gray-200"
-                                }
-                              )
-                            ] }),
-                            /* @__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",
-                                  placeholder: "contact@acme.com",
-                                  value: formData.email || "",
-                                  onChange: (e) => setActionFormData({
-                                    ...actionFormData,
-                                    email: e.target.value
-                                  }),
-                                  className: "h-8 text-xs border-gray-200"
-                                }
-                              )
-                            ] })
-                          ] }),
+                        ] }),
+                        /* @__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: "Location" }),
+                            /* @__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,
                               {
-                                placeholder: "San Francisco, CA",
-                                value: formData.location || "",
+                                type: "tel",
+                                placeholder: "+1 (555) 123-4567",
+                                value: formData.phone || "",
                                 onChange: (e) => setActionFormData({
                                   ...actionFormData,
-                                  location: e.target.value
+                                  phone: e.target.value
                                 }),
                                 className: "h-8 text-xs border-gray-200"
                               }
                             )
                           ] }),
                           /* @__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",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  subscription: e.target.value
-                                }),
-                                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_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_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)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
                             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
-                                type: "password",
-                                value: formData.currentPassword || "",
+                                type: "url",
+                                placeholder: "https://acme.com",
+                                value: formData.website || "",
                                 onChange: (e) => setActionFormData({
                                   ...actionFormData,
-                                  currentPassword: e.target.value
+                                  website: e.target.value
                                 }),
                                 className: "h-8 text-xs border-gray-200"
                               }
                             )
-                          ] }),
+                          ] })
+                        ] })
+                      ] }),
+                      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",
+                            value: formData.name || "",
+                            onChange: (e) => setActionFormData({
+                              ...actionFormData,
+                              name: e.target.value
+                            }),
+                            className: "h-8 text-xs border-gray-200"
+                          }
+                        )
+                      ] }) }),
+                      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: "New Password" }),
+                            /* @__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,
                               {
-                                type: "password",
-                                value: formData.newPassword || "",
+                                placeholder: "Acme Corporation",
+                                value: formData.name || "",
                                 onChange: (e) => setActionFormData({
                                   ...actionFormData,
-                                  newPassword: e.target.value
+                                  name: e.target.value
                                 }),
                                 className: "h-8 text-xs border-gray-200"
                               }
                             )
                           ] }),
                           /* @__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)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
                             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               Input,
                               {
-                                type: "password",
-                                value: formData.confirmPassword || "",
+                                type: "email",
+                                placeholder: "contact@acme.com",
+                                value: formData.email || "",
                                 onChange: (e) => setActionFormData({
                                   ...actionFormData,
-                                  confirmPassword: e.target.value
+                                  email: e.target.value
                                 }),
                                 className: "h-8 text-xs border-gray-200"
                               }
                             )
                           ] })
                         ] }),
-                        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",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  notificationType: e.target.value
-                                }),
-                                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_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_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                              "input",
-                              {
-                                type: "checkbox",
-                                checked: formData.enabled !== false,
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  enabled: e.target.checked
-                                }),
-                                className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs text-black", children: "Enable this notification" })
-                          ] })
+                        /* @__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",
+                              value: formData.location || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                location: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
                         ] }),
-                        (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)("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.integrationName || "Slack",
+                              value: formData.subscription || "Starter",
                               onChange: (e) => setActionFormData({
                                 ...actionFormData,
-                                integrationName: e.target.value
+                                subscription: e.target.value
                               }),
                               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_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" })
+                                /* @__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 === "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",
-                                value: formData.cardNumber || "",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  cardNumber: e.target.value
-                                }),
-                                className: "h-8 text-xs border-gray-200"
-                              }
-                            )
-                          ] }),
-                          /* @__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",
-                                value: formData.expiryDate || "",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  expiryDate: e.target.value
-                                }),
-                                className: "h-8 text-xs border-gray-200"
-                              }
-                            )
-                          ] })
+                        ] })
+                      ] }),
+                      (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",
+                              value: formData.currentPassword || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                currentPassword: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
                         ] }),
-                        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",
-                                value: formData.transactionId || formData.customer || "",
-                                onChange: (e) => {
-                                  const value = e.target.value;
-                                  if (value.startsWith("txn_") || /^\d+$/.test(value)) {
-                                    setActionFormData({
-                                      ...actionFormData,
-                                      transactionId: value,
-                                      customer: void 0
-                                    });
-                                  } else {
-                                    setActionFormData({
-                                      ...actionFormData,
-                                      customer: value,
-                                      transactionId: void 0
-                                    });
-                                  }
-                                },
-                                className: "h-8 text-xs border-gray-200"
-                              }
-                            )
-                          ] }),
-                          /* @__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",
-                                value: formData.amount || "",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  amount: e.target.value
-                                }),
-                                className: "h-8 text-xs border-gray-200"
-                              }
-                            )
-                          ] }),
-                          /* @__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",
-                                value: formData.reason || "",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  reason: e.target.value
-                                }),
-                                className: "h-8 text-xs border-gray-200"
-                              }
-                            )
-                          ] })
+                        /* @__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",
+                              value: formData.newPassword || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                newPassword: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
                         ] }),
-                        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",
-                                value: formData.keyId || formData.name || "",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  keyId: e.target.value,
-                                  name: e.target.value
-                                }),
-                                className: "h-8 text-xs border-gray-200"
-                              }
-                            )
-                          ] }),
-                          /* @__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." })
+                        /* @__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",
+                              value: formData.confirmPassword || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                confirmPassword: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
+                        ] })
+                      ] }),
+                      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",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                notificationType: e.target.value
+                              }),
+                              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_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" })
+                              ]
+                            }
+                          )
                         ] }),
-                        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",
-                                placeholder: "https://example.com/webhook",
-                                value: formData.url || "",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  url: e.target.value
-                                }),
-                                className: "h-8 text-xs border-gray-200"
-                              }
-                            )
-                          ] }),
-                          /* @__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",
-                                value: formData.name || "",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  name: e.target.value
-                                }),
-                                className: "h-8 text-xs border-gray-200"
-                              }
-                            )
-                          ] })
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            "input",
+                            {
+                              type: "checkbox",
+                              checked: formData.enabled !== false,
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                enabled: e.target.checked
+                              }),
+                              className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs text-black", children: "Enable this notification" })
+                        ] })
+                      ] }),
+                      (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",
+                            onChange: (e) => setActionFormData({
+                              ...actionFormData,
+                              integrationName: e.target.value
+                            }),
+                            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_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_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",
+                              value: formData.cardNumber || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                cardNumber: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
+                        ] }),
+                        /* @__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",
+                              value: formData.expiryDate || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                expiryDate: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
+                        ] })
+                      ] }),
+                      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",
+                              value: formData.transactionId || formData.customer || "",
+                              onChange: (e) => {
+                                const value = e.target.value;
+                                if (value.startsWith("txn_") || /^\d+$/.test(value)) {
+                                  setActionFormData({
+                                    ...actionFormData,
+                                    transactionId: value,
+                                    customer: void 0
+                                  });
+                                } else {
+                                  setActionFormData({
+                                    ...actionFormData,
+                                    customer: value,
+                                    transactionId: void 0
+                                  });
+                                }
+                              },
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
+                        ] }),
+                        /* @__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",
+                              value: formData.amount || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                amount: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
+                        ] }),
+                        /* @__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",
+                              value: formData.reason || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                reason: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
+                        ] })
+                      ] }),
+                      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",
+                              value: formData.keyId || formData.name || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                keyId: e.target.value,
+                                name: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
+                        ] }),
+                        /* @__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_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",
+                              placeholder: "https://example.com/webhook",
+                              value: formData.url || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                url: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
                         ] }),
-                        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)("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",
+                              value: formData.name || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                name: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
+                        ] })
+                      ] }),
+                      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",
+                            onChange: (e) => setActionFormData({
+                              ...actionFormData,
+                              currency: e.target.value
+                            }),
+                            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_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_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",
+                            onChange: (e) => setActionFormData({
+                              ...actionFormData,
+                              timezone: e.target.value
+                            }),
+                            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_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_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",
+                              value: formData.device || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                device: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
+                        ] }),
+                        /* @__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_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",
+                              placeholder: "customer@example.com",
+                              value: formData.customerEmail || "",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                customerEmail: e.target.value
+                              }),
+                              className: "h-8 text-xs border-gray-200"
+                            }
+                          )
+                        ] }),
+                        /* @__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",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                plan: e.target.value
+                              }),
+                              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_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_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",
+                              onChange: (e) => setActionFormData({
+                                ...actionFormData,
+                                billingCycle: e.target.value
+                              }),
+                              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_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_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.currency || "USD",
+                              value: formData.format || "pdf",
                               onChange: (e) => setActionFormData({
                                 ...actionFormData,
-                                currency: e.target.value
+                                format: e.target.value
                               }),
                               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_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)" })
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "pdf", children: "PDF" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "json", children: "JSON" })
                               ]
                             }
                           )
-                        ] }) }),
-                        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" }),
+                        ] })
+                      ] }),
+                      (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.timezone || "America/Los_Angeles",
+                              value: formData.ruleId || "rule_1",
                               onChange: (e) => setActionFormData({
                                 ...actionFormData,
-                                timezone: e.target.value
+                                ruleId: e.target.value
                               }),
                               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_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" })
+                                /* @__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" })
                               ]
                             }
                           )
-                        ] }) }),
-                        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",
-                                value: formData.device || "",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  device: e.target.value
-                                }),
-                                className: "h-8 text-xs border-gray-200"
-                              }
-                            )
-                          ] }),
-                          /* @__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_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",
-                                placeholder: "customer@example.com",
-                                value: formData.customerEmail || "",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  customerEmail: e.target.value
-                                }),
-                                className: "h-8 text-xs border-gray-200"
-                              }
-                            )
-                          ] }),
-                          /* @__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",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  plan: e.target.value
-                                }),
-                                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_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_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",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  billingCycle: e.target.value
-                                }),
-                                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_runtime10.jsx)("option", { value: "monthly", children: "Monthly" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "yearly", children: "Yearly (Save 15%)" })
-                                ]
-                              }
-                            )
+                        /* @__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_runtime10.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                        Button,
+                        {
+                          type: "button",
+                          size: "sm",
+                          variant: "secondary",
+                          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_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" })
+                            ] })
+                          ]
+                        }
+                      ) })
+                    ]
+                  },
+                  message.id
+                );
+              }
+              if (message.kind === "bulkPreview" && message.csvData) {
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                  "div",
+                  {
+                    className: `${isRoleChange ? "mt-3" : ""}`,
+                    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"
                           ] })
                         ] }),
-                        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",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  format: e.target.value
-                                }),
-                                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_runtime10.jsx)("option", { value: "pdf", children: "PDF" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "json", children: "JSON" })
-                                ]
-                              }
-                            )
-                          ] })
+                        /* @__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",
+                              children: col
+                            },
+                            i
+                          )) })
                         ] }),
-                        (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",
-                                onChange: (e) => setActionFormData({
-                                  ...actionFormData,
-                                  ruleId: e.target.value
-                                }),
-                                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_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_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." })
+                        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_runtime10.jsxs)("span", { children: [
+                                  j > 0 && " \u2022 ",
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-gray-400", children: [
+                                    key,
+                                    ":"
+                                  ] }),
+                                  " ",
+                                  val
+                                ] }, key)),
+                                Object.keys(row).length > 3 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-gray-400", children: [
+                                  " ",
+                                  "..."
+                                ] })
+                              ]
+                            },
+                            i
+                          )) })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                        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_runtime10.jsx)("strong", { children: message.suggestedAction.replace(/_/g, " ") })
+                        ] }) })
+                      ] }),
+                      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",
                             size: "sm",
                             variant: "secondary",
                             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,
+                            onClick: () => message.bulkSessionId && confirmBulkOperation(message.bulkSessionId),
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Confirm" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
+                                "Process ",
+                                message.csvData.rowCount,
+                                " rows"
+                              ] }),
                               /* @__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" })
                               ] })
                             ]
                           }
-                        ) })
-                      ]
-                    },
-                    message.id
-                  );
-                }
-                if (message.kind === "bulkPreview" && message.csvData) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                    "div",
-                    {
-                      className: `${isRoleChange ? "mt-3" : ""}`,
-                      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_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",
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          Button,
+                          {
+                            type: "button",
+                            size: "sm",
+                            variant: "ghost",
+                            className: "h-8 rounded-xl px-3 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100",
+                            onClick: cancelBulkOperation,
+                            children: "Cancel"
+                          }
+                        )
+                      ] })
+                    ]
+                  },
+                  message.id
+                );
+              }
+              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_runtime10.jsx)(
+                  "div",
+                  {
+                    className: `${isRoleChange ? "mt-3" : ""}`,
+                    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_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_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_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"
+                        ] })
+                      ] })
+                    ] })
+                  },
+                  message.id
+                );
+              }
+              if (message.kind === "bulkSummary" && message.bulkSummary) {
+                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_runtime10.jsx)(
+                  "div",
+                  {
+                    className: `${isRoleChange ? "mt-3" : ""}`,
+                    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_runtime10.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              import_lucide_react4.CheckCircle2,
                               {
-                                className: "text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded",
-                                children: col
-                              },
-                              i
-                            )) })
+                                className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}`
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
                           ] }),
-                          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_runtime10.jsxs)("span", { children: [
-                                    j > 0 && " \u2022 ",
-                                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-gray-400", children: [
-                                      key,
-                                      ":"
-                                    ] }),
-                                    " ",
-                                    val
-                                  ] }, key)),
-                                  Object.keys(row).length > 3 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-gray-400", children: [
+                          /* @__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_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_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",
+                                  children: [
+                                    "Row ",
+                                    failure.row,
+                                    ":",
                                     " ",
-                                    "..."
-                                  ] })
-                                ]
-                              },
-                              i
-                            )) })
+                                    failure.error || "Unknown error"
+                                  ]
+                                },
+                                i
+                              )),
+                              failures.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-xs text-amber-600", children: [
+                                "...and ",
+                                failures.length - 5,
+                                " more"
+                              ] })
+                            ] })
                           ] }),
-                          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_runtime10.jsx)("strong", { children: message.suggestedAction.replace(/_/g, " ") })
-                          ] }) })
-                        ] }),
-                        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,
+                          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",
-                              size: "sm",
-                              variant: "secondary",
-                              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),
+                              onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                if (onNavigate && navigationPage.page) {
+                                  onNavigate(
+                                    navigationPage.page,
+                                    navigationPage.subtab
+                                  );
+                                }
+                              },
+                              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_runtime10.jsxs)("span", { children: [
-                                  "Process ",
-                                  message.csvData.rowCount,
-                                  " rows"
+                                /* @__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_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_runtime10.jsxs)("span", { children: [
+                                  "View ",
+                                  pageLabel
                                 ] })
                               ]
                             }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                            Button,
-                            {
-                              type: "button",
-                              size: "sm",
-                              variant: "ghost",
-                              className: "h-8 rounded-xl px-3 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100",
-                              onClick: cancelBulkOperation,
-                              children: "Cancel"
-                            }
-                          )
-                        ] })
-                      ]
-                    },
-                    message.id
-                  );
-                }
-                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_runtime10.jsx)(
-                    "div",
-                    {
-                      className: `${isRoleChange ? "mt-3" : ""}`,
-                      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_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_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_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"
-                          ] })
-                        ] })
-                      ] })
-                    },
-                    message.id
-                  );
-                }
-                if (message.kind === "bulkSummary" && message.bulkSummary) {
-                  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_runtime10.jsx)(
-                    "div",
-                    {
-                      className: `${isRoleChange ? "mt-3" : ""}`,
-                      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_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_runtime10.jsx)("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
-                            ] }),
-                            /* @__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_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_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",
-                                    children: [
-                                      "Row ",
-                                      failure.row,
-                                      ":",
-                                      " ",
-                                      failure.error || "Unknown error"
-                                    ]
-                                  },
-                                  i
-                                )),
-                                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_runtime10.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                              "button",
-                              {
-                                type: "button",
-                                onClick: (e) => {
-                                  e.preventDefault();
-                                  e.stopPropagation();
-                                  if (onNavigate && navigationPage.page) {
-                                    onNavigate(
-                                      navigationPage.page,
-                                      navigationPage.subtab
-                                    );
-                                  }
-                                },
-                                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_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_runtime10.jsxs)("span", { children: [
-                                    "View ",
-                                    pageLabel
-                                  ] })
-                                ]
-                              }
-                            ) })
-                          ]
+                          ) })
+                        ]
+                      }
+                    )
+                  },
+                  message.id
+                );
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(React6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "div",
+                {
+                  ref: isCurrentGuideStep ? currentStepRef : null,
+                  className: `${isRoleChange ? "mt-3" : ""}`,
+                  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_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: m[1] }),
+                            m[2]
+                          ] });
                         }
-                      )
-                    },
-                    message.id
-                  );
+                      }
+                      if (message.role === "assistant" && text) {
+                        return renderMarkdown(text);
+                      }
+                      return text || /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "opacity-70", children: "Thinking\u2026" });
+                    })() }),
+                    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_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",
+                        onClick: () => handleFollowupClick(message.id, followup),
+                        className: "inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-xl\n                                           bg-white hover:bg-gray-50 text-gray-600 hover:text-gray-800\n                                           border border-gray-200 hover:border-gray-300 shadow-sm\n                                           transition-all duration-150 ease-in-out",
+                        children: followup.label
+                      },
+                      followup.id
+                    )) })
+                  ]
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(React6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                  "div",
-                  {
-                    ref: isCurrentGuideStep ? currentStepRef : null,
-                    className: `${isRoleChange ? "mt-3" : ""}`,
-                    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_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: m[1] }),
-                              m[2]
-                            ] });
-                          }
-                        }
-                        if (message.role === "assistant" && text) {
-                          return renderMarkdown(text);
-                        }
-                        return text || /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "opacity-70", children: "Thinking\u2026" });
-                      })() }),
-                      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_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",
-                          onClick: () => handleFollowupClick(message.id, followup),
-                          className: "inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-xl\n                                           bg-white hover:bg-gray-50 text-gray-600 hover:text-gray-800\n                                           border border-gray-200 hover:border-gray-300 shadow-sm\n                                           transition-all duration-150 ease-in-out",
-                          children: followup.label
-                        },
-                        followup.id
-                      )) })
-                    ]
-                  }
-                ) }, message.id);
-              }),
-              (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",
-                    size: "sm",
-                    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_runtime10.jsx)(import_lucide_react4.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                  Button,
-                  {
-                    type: "button",
-                    size: "sm",
-                    variant: "secondary",
-                    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_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_runtime10.jsx)("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                AssistantActivity,
+              ) }, message.id);
+            }),
+            (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,
                 {
-                  phase,
-                  progressSteps
+                  type: "button",
+                  size: "sm",
+                  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_runtime10.jsx)(import_lucide_react4.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
                 }
-              ) }),
-              isEscalated && agentIsTyping && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-start mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-gray-200 rounded-2xl rounded-bl-md px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TypingIndicator, {}) }) }),
-              !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: messagesEndRef })
-            ] }) }) }) })
-          }
-        ),
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "secondary",
+                  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_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_runtime10.jsx)("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              AssistantActivity,
+              {
+                phase,
+                progressSteps
+              }
+            ) }),
+            isEscalated && agentIsTyping && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-start mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-gray-200 rounded-2xl rounded-bl-md px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TypingIndicator, {}) }) }),
+            !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: messagesEndRef })
+          ] }) }) }) })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
@@ -4928,10 +5086,19 @@ ${userText}`
                   {
                     ref: imageInputRef,
                     type: "file",
-                    accept: "image/*,.pdf",
+                    accept: "image/*,.pdf,.csv",
                     multiple: true,
                     className: "hidden",
-                    onChange: (e) => handleImageSelect(e.target.files)
+                    onChange: (e) => {
+                      const files = e.target.files;
+                      if (!files || files.length === 0) return;
+                      const csvFile = Array.from(files).find((f) => f.name.endsWith(".csv"));
+                      if (csvFile && !isEscalated) {
+                        setPendingFile(csvFile);
+                      } else {
+                        handleImageSelect(files);
+                      }
+                    }
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex w-full items-start gap-2 rounded-xl border bg-white px-3 py-2 shadow-sm ${isDragOver ? "border-blue-400" : "border-gray-200"}`, children: [
@@ -4942,14 +5109,10 @@ ${userText}`
                       size: "icon",
                       variant: "ghost",
                       onClick: () => {
-                        if (isEscalated) {
-                          imageInputRef.current?.click();
-                        } else {
-                          fileInputRef.current?.click();
-                        }
+                        imageInputRef.current?.click();
                       },
                       className: "h-5 w-5 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
-                      title: isEscalated ? "Attach image or file" : "Upload CSV for bulk operations",
+                      title: "Attach file (image, PDF, or CSV)",
                       disabled: isUploadingImage,
                       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Paperclip, { className: "h-2.5 w-2.5" })
                     }
@@ -5020,8 +5183,15 @@ ${userText}`
                     {
                       type: "submit",
                       size: "icon",
-                      disabled: !input.trim() && !pendingFile || isWaitingForAuth,
+                      disabled: !input.trim() && !pendingFile && pendingImages.length === 0 || isWaitingForAuth,
                       className: "h-6 w-6 rounded-full bg-gray-700 hover:bg-gray-600 disabled:bg-gray-300",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        const form = e.currentTarget.closest("form");
+                        if (form) {
+                          form.requestSubmit();
+                        }
+                      },
                       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowUp, { className: "h-2.5 w-2.5 text-white" })
                     }
                   )