@kite-copilot/chat-panel 0.2.52 → 0.2.54

package/dist/index.cjs

@@ -71,6 +71,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
@@ -1120,29 +1121,29 @@ function DataRenderer({ type, data }) {
 // src/components/TypingIndicator.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function TypingIndicator({ className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex items-center gap-1 px-4 py-3 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `flex items-center gap-1.5 ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
-        className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
+        className: "w-2 h-2 bg-gray-500 rounded-full animate-bounce",
         style: { animationDelay: "0ms", animationDuration: "600ms" }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
-        className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
+        className: "w-2 h-2 bg-gray-500 rounded-full animate-bounce",
         style: { animationDelay: "150ms", animationDuration: "600ms" }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
-        className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
+        className: "w-2 h-2 bg-gray-500 rounded-full animate-bounce",
         style: { animationDelay: "300ms", animationDuration: "600ms" }
       }
     )
-  ] }) });
+  ] });
 }
 
 // src/ChatPanel.tsx
@@ -1591,6 +1592,132 @@ function AuthErrorState({
     )
   ] });
 }
+function ImageLightbox({
+  imageUrl,
+  onClose
+}) {
+  const handleDownload = async () => {
+    try {
+      const response = await fetch(imageUrl);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      const urlParts = imageUrl.split("/");
+      const filename = urlParts[urlParts.length - 1] || "image.jpg";
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Failed to download image:", error);
+      window.open(imageUrl, "_blank");
+    }
+  };
+  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({
   isOpen = true,
   onClose,
@@ -1611,7 +1738,8 @@ function ChatPanel({
   initialCorner = "bottom-left",
   onCornerChange,
   productBackendUrl,
-  getAuthHeaders
+  getAuthHeaders,
+  isEval = false
 } = {}) {
   const [messages, setMessages] = React6.useState(initialMessages);
   const [input, setInput] = React6.useState("");
@@ -1721,13 +1849,20 @@ function ChatPanel({
   }, [effectiveSupabaseUrl, effectiveSupabaseAnonKey]);
   React6.useEffect(() => {
     if (!isEscalated || !sessionId || !supabaseRef.current) {
+      console.log("[KiteChat] Typing channel skip - isEscalated:", isEscalated, "sessionId:", sessionId, "supabase:", !!supabaseRef.current);
       return;
     }
     const channelName = `typing:${sessionId}`;
-    const channel = supabaseRef.current.channel(channelName);
+    console.log("[KiteChat] Subscribing to typing channel:", channelName, "sessionId:", sessionId);
+    const channel = supabaseRef.current.channel(channelName, {
+      config: { broadcast: { self: true } }
+    });
     channel.on("broadcast", { event: "typing" }, (payload) => {
+      console.log("[KiteChat] Received typing event:", payload);
       const { sender, isTyping } = payload.payload;
+      console.log("[KiteChat] Typing event - sender:", sender, "isTyping:", isTyping);
       if (sender === "agent") {
+        console.log("[KiteChat] Setting agentIsTyping to:", isTyping);
         setAgentIsTyping(isTyping);
         if (isTyping) {
           if (typingTimeoutRef.current) {
@@ -1739,6 +1874,7 @@ function ChatPanel({
         }
       }
     }).subscribe((status) => {
+      console.log("[KiteChat] Typing channel subscription status:", status);
       if (status === "SUBSCRIBED") {
         typingChannelRef.current = channel;
         console.log("[KiteChat] Typing channel subscribed successfully");
@@ -1753,7 +1889,7 @@ function ChatPanel({
         window.clearTimeout(typingTimeoutRef.current);
       }
     };
-  }, [isEscalated, sessionId]);
+  }, [isEscalated, sessionId, effectiveSupabaseUrl, effectiveSupabaseAnonKey]);
   React6.useEffect(() => {
     if (!isOpen && isEscalated && supabaseRef.current && sessionId) {
       console.log("[KiteChat] Panel closed during live chat, marking disconnected");
@@ -1964,6 +2100,97 @@ function ChatPanel({
   const [pendingBulkSession, setPendingBulkSession] = React6.useState(null);
   const pendingBulkSessionRef = React6.useRef(null);
   const fileInputRef = React6.useRef(null);
+  const [pendingImages, setPendingImages] = React6.useState([]);
+  const [isUploadingImage, setIsUploadingImage] = React6.useState(false);
+  const [isDragOver, setIsDragOver] = React6.useState(false);
+  const imageInputRef = React6.useRef(null);
+  const [lightboxImageUrl, setLightboxImageUrl] = React6.useState(null);
+  const uploadImageToStorage = React6.useCallback(async (file) => {
+    if (!supabaseRef.current) {
+      console.error("[KiteChat] Supabase client not available for file upload");
+      return null;
+    }
+    const fileExt = file.name.split(".").pop();
+    const fileName = `${sessionId}/${Date.now()}-${Math.random().toString(36).substring(7)}.${fileExt}`;
+    const bucketName = "chat-attachments";
+    try {
+      const { data, error } = await supabaseRef.current.storage.from(bucketName).upload(fileName, file, {
+        cacheControl: "3600",
+        upsert: false
+      });
+      if (error) {
+        console.error("[KiteChat] Upload error:", error);
+        return null;
+      }
+      const { data: urlData } = supabaseRef.current.storage.from(bucketName).getPublicUrl(fileName);
+      return urlData?.publicUrl || null;
+    } catch (err) {
+      console.error("[KiteChat] Upload failed:", err);
+      return null;
+    }
+  }, [sessionId]);
+  const handleImageSelect = React6.useCallback((files) => {
+    if (!files) return;
+    const imageFiles = Array.from(files).filter(
+      (file) => file.type.startsWith("image/") || file.type === "application/pdf"
+    );
+    const newImages = imageFiles.map((file) => ({
+      file,
+      preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : ""
+    }));
+    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();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = React6.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+  const handleDrop = React6.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const csvFile = Array.from(files).find((f) => f.name.endsWith(".csv"));
+      if (csvFile && !isEscalated) {
+        setPendingFile(csvFile);
+      } else {
+        handleImageSelect(files);
+      }
+    }
+  }, [isEscalated, handleImageSelect]);
+  React6.useEffect(() => {
+    return () => {
+      pendingImages.forEach((img) => {
+        if (img.preview) URL.revokeObjectURL(img.preview);
+      });
+    };
+  }, [pendingImages]);
   const [searchExpanded, setSearchExpanded] = React6.useState(false);
   const [searchInput, setSearchInput] = React6.useState("");
   const searchInputRef = React6.useRef(null);
@@ -2020,6 +2247,11 @@ function ChatPanel({
       messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages, phase, activeGuide]);
+  React6.useEffect(() => {
+    if (isEscalated && agentIsTyping && !activeGuide) {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [isEscalated, agentIsTyping, activeGuide]);
   const latestBulkSummaryNavigation = React6.useMemo(() => {
     for (let i = messages.length - 1; i >= 0; i--) {
       const msg = messages[i];
@@ -2089,12 +2321,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);
@@ -2125,13 +2365,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 {
@@ -2163,7 +2408,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]);
@@ -2256,7 +2503,7 @@ function ChatPanel({
     setPanelView("landing");
     setCurrentFolderId(void 0);
   }
-  function handleSubmit(e) {
+  async function handleSubmit(e) {
     e.preventDefault();
     const trimmed = input.trim();
     if (pendingFile) {
@@ -2276,6 +2523,49 @@ function ChatPanel({
       if (fileInputRef.current) fileInputRef.current.value = "";
       return;
     }
+    if (pendingImages.length > 0) {
+      setIsUploadingImage(true);
+      try {
+        const uploadedUrls = [];
+        for (const img of pendingImages) {
+          const url = await uploadImageToStorage(img.file);
+          if (url) {
+            uploadedUrls.push(url);
+          }
+          if (img.preview) URL.revokeObjectURL(img.preview);
+        }
+        if (uploadedUrls.length > 0) {
+          const imageMarkdown = uploadedUrls.map((url) => `![image](${url})`).join("\n");
+          const messageContent = trimmed ? `${trimmed}
+
+${imageMarkdown}` : imageMarkdown;
+          const userMessage = {
+            id: Date.now(),
+            role: "user",
+            content: messageContent,
+            imageUrls: uploadedUrls
+          };
+          setMessages((prev) => [...prev, userMessage]);
+          if (isEscalated) {
+            sendEscalatedMessage(messageContent);
+            sendTypingIndicator(false);
+            if (userTypingTimeoutRef.current) {
+              window.clearTimeout(userTypingTimeoutRef.current);
+              userTypingTimeoutRef.current = null;
+            }
+          } else {
+            startChatFlow(messageContent);
+          }
+        }
+      } catch (err) {
+        console.error("[KiteChat] Failed to upload images:", err);
+      } finally {
+        setIsUploadingImage(false);
+        setPendingImages([]);
+        setInput("");
+      }
+      return;
+    }
     if (!trimmed) return;
     if (isEscalated) {
       const userMessage = {
@@ -2440,7 +2730,8 @@ function ChatPanel({
           user_id: userId,
           org_id: orgId,
           user_name: userName,
-          user_email: userEmail
+          user_email: userEmail,
+          is_eval: isEval
         }),
         signal: controller.signal
       });
@@ -3333,19 +3624,23 @@ ${userText}`
       )
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "input",
+        "textarea",
         {
           ref: searchInputRef,
-          type: "text",
           value: searchInput,
-          onChange: (e) => setSearchInput(e.target.value),
+          onChange: (e) => {
+            setSearchInput(e.target.value);
+            e.target.style.height = "auto";
+            e.target.style.height = Math.min(e.target.scrollHeight, 120) + "px";
+          },
           onKeyDown: (e) => {
-            if (e.key === "Enter" && searchInput.trim()) {
+            if (e.key === "Enter" && !e.shiftKey && searchInput.trim()) {
               e.preventDefault();
               onOpen?.();
               startChatFlow(searchInput.trim());
               setSearchInput("");
               setSearchExpanded(false);
+              e.currentTarget.style.height = "auto";
             } else if (e.key === "Escape") {
               setSearchExpanded(false);
               setSearchInput("");
@@ -3357,7 +3652,8 @@ ${userText}`
             }
           },
           placeholder: "Ask a question...",
-          className: "flex-1 text-sm text-gray-700 outline-none bg-transparent"
+          rows: 1,
+          className: "flex-1 text-sm text-gray-700 outline-none bg-transparent resize-none min-h-[20px] max-h-[120px]"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -3384,8 +3680,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: [
@@ -3416,8 +3712,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: [
@@ -3444,8 +3740,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: [
@@ -3497,9 +3793,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;
@@ -3531,1258 +3826,1368 @@ ${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
-                  )) })
+                        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)(
+                        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,
+                      {
+                        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") {
+            }
+          ),
+          /* @__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 === "guideStep" && !isCurrentGuideStep) {
-                  return null;
-                }
-                if (isUser) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3 py-2 text-sm text-white shadow-sm", children: message.content }) }, message.id);
-                }
-                if (message.role === "agent") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-start ${isRoleChange ? "mt-3" : ""}`, children: [
-                    isRoleChange && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-gray-500 mb-1 ml-1", children: "Agent" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[300px] rounded-2xl rounded-bl-md bg-gray-100 px-4 py-3 text-sm text-gray-700", children: message.content })
-                  ] }, message.id);
-                }
-                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",
+                            /* @__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,
                               {
-                                value: formData.subscription || "Starter",
+                                type: "url",
+                                placeholder: "https://acme.com",
+                                value: formData.website || "",
                                 onChange: (e) => setActionFormData({
                                   ...actionFormData,
-                                  subscription: e.target.value
+                                  website: 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" })
-                                ]
+                                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: [
+                        ] })
+                      ] }),
+                      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: "Current 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.currentPassword || "",
+                                placeholder: "Acme Corporation",
+                                value: formData.name || "",
                                 onChange: (e) => setActionFormData({
                                   ...actionFormData,
-                                  currentPassword: 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: "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.newPassword || "",
+                                type: "email",
+                                placeholder: "contact@acme.com",
+                                value: formData.email || "",
                                 onChange: (e) => setActionFormData({
                                   ...actionFormData,
-                                  newPassword: 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)(
-                              Input,
-                              {
-                                type: "password",
-                                value: formData.confirmPassword || "",
-                                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"
+                            }
+                          )
                         ] }),
-                        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: "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"
+                            }
+                          )
+                        ] }),
+                        /* @__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.currency || "USD",
+                              value: formData.plan || "Starter",
                               onChange: (e) => setActionFormData({
                                 ...actionFormData,
-                                currency: e.target.value
+                                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: "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: "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)" })
                               ]
                             }
                           )
-                        ] }) }),
-                        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)("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.timezone || "America/Los_Angeles",
+                              value: formData.billingCycle || "monthly",
                               onChange: (e) => setActionFormData({
                                 ...actionFormData,
-                                timezone: e.target.value
+                                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: "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: "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.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" })
+                              ]
+                            }
+                          )
+                        ] })
+                      ] }),
+                      (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" })
                               ]
                             }
                           )
-                        ] }) }),
-                        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
-                  );
+                          ) })
+                        ]
+                      }
+                    )
+                  },
+                  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]
+                          ] });
+                        }
+                      }
+                      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
+                    )) })
+                  ]
                 }
-                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
-                  );
+              ) }, 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" })
                 }
-                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
-                  );
+              ),
+              /* @__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" })
+                    ] })
+                  ]
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(React6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                  "div",
+              )
+            ] }),
+            (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",
+          {
+            className: `px-4 py-3 bg-white shrink-0 ${isDragOver ? "ring-2 ring-blue-400 ring-inset bg-blue-50" : ""}`,
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+            children: [
+              pendingFile && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "button",
                   {
-                    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
-                      )) })
-                    ]
+                    type: "button",
+                    onClick: () => {
+                      setPendingFile(null);
+                      if (fileInputRef.current) fileInputRef.current.value = "";
+                    },
+                    className: "text-blue-600 hover:text-blue-800",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
                   }
-                ) }, 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,
+                )
+              ] }),
+              pendingImages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-2 flex flex-wrap gap-2", children: [
+                pendingImages.map((img, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative group", children: [
+                  img.preview ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "img",
+                    {
+                      src: img.preview,
+                      alt: `Preview ${index + 1}`,
+                      className: "h-16 w-16 object-cover rounded-lg border border-gray-200"
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-16 w-16 rounded-lg border border-gray-200 bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-6 w-6 text-gray-400" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        if (img.preview) URL.revokeObjectURL(img.preview);
+                        setPendingImages((prev) => prev.filter((_, i) => i !== index));
+                      },
+                      className: "absolute -top-1 -right-1 h-4 w-4 rounded-full bg-gray-800 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-2.5 w-2.5" })
+                    }
+                  )
+                ] }, index)),
+                isUploadingImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-16 w-16 rounded-lg border border-gray-200 bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className: "w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "input",
                   {
-                    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" })
+                    ref: fileInputRef,
+                    type: "file",
+                    accept: ".csv",
+                    className: "hidden",
+                    onChange: (e) => {
+                      const file = e.target.files?.[0];
+                      if (file) {
+                        setPendingFile(file);
+                      }
+                    }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                  Button,
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "input",
                   {
-                    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: "mt-2", 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", { className: "px-4 py-3 bg-white shrink-0", children: [
-          pendingFile && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setPendingFile(null);
-                  if (fileInputRef.current) fileInputRef.current.value = "";
-                },
-                className: "text-blue-600 hover:text-blue-800",
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className: "w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "input",
-              {
-                ref: fileInputRef,
-                type: "file",
-                accept: ".csv",
-                className: "hidden",
-                onChange: (e) => {
-                  const file = e.target.files?.[0];
-                  if (file) {
-                    setPendingFile(file);
+                    ref: imageInputRef,
+                    type: "file",
+                    accept: "image/*,.pdf,.csv",
+                    multiple: true,
+                    className: "hidden",
+                    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 border-gray-200 bg-white px-3 py-2 shadow-sm", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                Button,
-                {
-                  type: "button",
-                  size: "icon",
-                  variant: "ghost",
-                  onClick: () => fileInputRef.current?.click(),
-                  className: "h-5 w-5 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
-                  title: "Upload CSV for bulk operations",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Paperclip, { className: "h-2.5 w-2.5" })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                "textarea",
-                {
-                  placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
-                  value: input,
-                  onChange: (e) => {
-                    setInput(e.target.value);
-                    if (e.target.value.length > 0) {
-                      handleTypingStart();
+                ),
+                /* @__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: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    Button,
+                    {
+                      type: "button",
+                      size: "icon",
+                      variant: "ghost",
+                      onClick: () => {
+                        imageInputRef.current?.click();
+                      },
+                      className: "h-5 w-5 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
+                      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" })
                     }
-                  },
-                  rows: 1,
-                  className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400 resize-none overflow-hidden outline-none",
-                  style: { minHeight: "20px", maxHeight: "120px" },
-                  onInput: (e) => {
-                    const target = e.target;
-                    target.style.height = "auto";
-                    target.style.height = Math.min(target.scrollHeight, 120) + "px";
-                  },
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
-                      e.preventDefault();
-                      if (input.trim() || pendingFile) {
-                        const form = e.currentTarget.closest("form");
-                        if (form) {
-                          form.requestSubmit();
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "textarea",
+                    {
+                      placeholder: pendingFile ? "Describe what to do with this CSV..." : pendingImages.length > 0 ? "Add a message (optional)..." : isDragOver ? "Drop files here..." : "Ask anything...",
+                      value: input,
+                      onChange: (e) => {
+                        setInput(e.target.value);
+                        if (e.target.value.length > 0) {
+                          handleTypingStart();
+                        }
+                      },
+                      rows: 1,
+                      className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400 resize-none overflow-hidden outline-none",
+                      style: { minHeight: "20px", maxHeight: "120px" },
+                      onInput: (e) => {
+                        const target = e.target;
+                        target.style.height = "auto";
+                        target.style.height = Math.min(target.scrollHeight, 120) + "px";
+                      },
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+                          e.preventDefault();
+                          if (input.trim() || pendingFile || pendingImages.length > 0) {
+                            const form = e.currentTarget.closest("form");
+                            if (form) {
+                              form.requestSubmit();
+                            }
+                          }
+                          return;
+                        }
+                        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                          const currentBulkSession = pendingBulkSessionRef.current;
+                          if (currentBulkSession) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            confirmBulkOperation(currentBulkSession);
+                            return;
+                          }
+                          if (pendingAction) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleActionSubmit();
+                            return;
+                          }
+                          if (pendingNavigation) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleConfirmNavigation(pendingNavigation);
+                            return;
+                          }
+                          const currentGuide = activeGuideRef.current;
+                          if (currentGuide) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            advanceGuide();
+                            return;
+                          }
                         }
                       }
-                      return;
                     }
-                    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-                      const currentBulkSession = pendingBulkSessionRef.current;
-                      if (currentBulkSession) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        confirmBulkOperation(currentBulkSession);
-                        return;
-                      }
-                      if (pendingAction) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleActionSubmit();
-                        return;
-                      }
-                      if (pendingNavigation) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleConfirmNavigation(pendingNavigation);
-                        return;
-                      }
-                      const currentGuide = activeGuideRef.current;
-                      if (currentGuide) {
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    Button,
+                    {
+                      type: "submit",
+                      size: "icon",
+                      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();
-                        e.stopPropagation();
-                        advanceGuide();
-                        return;
-                      }
+                        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" })
                     }
-                  }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                Button,
-                {
-                  type: "submit",
-                  size: "icon",
-                  disabled: !input.trim() && !pendingFile || isWaitingForAuth,
-                  className: "h-6 w-6 rounded-full bg-gray-900 hover:bg-gray-800 disabled:bg-gray-300",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowUp, { className: "h-2.5 w-2.5" })
-                }
-              )
-            ] })
-          ] })
-        ] }),
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           GuideCursor,
           {
@@ -4791,6 +5196,13 @@ ${userText}`
             visible: cursorState.visible,
             onClick: cursorState.onClick
           }
+        ),
+        lightboxImageUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ImageLightbox,
+          {
+            imageUrl: lightboxImageUrl,
+            onClose: () => setLightboxImageUrl(null)
+          }
         )
       ]
     }
@@ -4835,7 +5247,8 @@ function ChatPanelWithToggle({
   initialCorner,
   onCornerChange,
   productBackendUrl,
-  getAuthHeaders
+  getAuthHeaders,
+  isEval
 }) {
   const [internalIsOpen, setInternalIsOpen] = React6.useState(defaultOpen);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
@@ -4866,7 +5279,8 @@ function ChatPanelWithToggle({
       initialCorner,
       onCornerChange,
       productBackendUrl,
-      getAuthHeaders
+      getAuthHeaders,
+      isEval
     }
   );
 }