@kite-copilot/chat-panel 0.2.16 → 0.2.17

package/dist/index.cjs

@@ -941,7 +941,7 @@ function DataRenderer({ type, data }) {
 // src/ChatPanel.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_AGENT_URL = "http://localhost:5002";
-var PANEL_WIDTH = 340;
+var PANEL_WIDTH = 400;
 function renderMarkdown(text) {
   if (!text) return null;
   const lines = text.split("\n");
@@ -958,7 +958,14 @@ function renderMarkdown(text) {
       const codeMatch = remaining.match(/^`([^`]+)`/);
       if (codeMatch) {
         parts.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { className: "bg-gray-100 px-1 py-0.5 rounded text-xs font-mono", children: codeMatch[1] }, keyIndex++)
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "code",
+            {
+              className: "bg-gray-100 px-1 py-0.5 rounded text-xs font-mono",
+              children: codeMatch[1]
+            },
+            keyIndex++
+          )
         );
         remaining = remaining.slice(codeMatch[0].length);
         continue;
@@ -978,7 +985,17 @@ function renderMarkdown(text) {
       const linkMatch = remaining.match(/^\[([^\]]+)\]\(([^)]+)\)/);
       if (linkMatch) {
         parts.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { href: linkMatch[2], className: "text-blue-600 hover:underline", target: "_blank", rel: "noopener noreferrer", children: linkMatch[1] }, keyIndex++)
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "a",
+            {
+              href: linkMatch[2],
+              className: "text-blue-600 hover:underline",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: linkMatch[1]
+            },
+            keyIndex++
+          )
         );
         remaining = remaining.slice(linkMatch[0].length);
         continue;
@@ -1001,7 +1018,14 @@ function renderMarkdown(text) {
     if (currentList) {
       const ListTag = currentList.type === "ul" ? "ul" : "ol";
       elements.push(
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ListTag, { className: `${currentList.type === "ul" ? "list-disc" : "list-decimal"} ml-4 my-1`, children: currentList.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { className: "ml-2", children: item }, i)) }, elements.length)
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          ListTag,
+          {
+            className: `${currentList.type === "ul" ? "list-disc" : "list-decimal"} ml-4 my-1`,
+            children: currentList.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { className: "ml-2", children: item }, i))
+          },
+          elements.length
+        )
       );
       currentList = null;
     }
@@ -1011,7 +1035,14 @@ function renderMarkdown(text) {
     if (line.startsWith("```")) {
       if (inCodeBlock) {
         elements.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pre", { className: "bg-gray-100 rounded p-2 my-1 overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { className: "text-xs font-mono", children: codeContent.join("\n") }) }, elements.length)
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "pre",
+            {
+              className: "bg-gray-100 rounded p-2 my-1 overflow-x-auto",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { className: "text-xs font-mono", children: codeContent.join("\n") })
+            },
+            elements.length
+          )
         );
         inCodeBlock = false;
         codeContent = [];
@@ -1033,7 +1064,9 @@ function renderMarkdown(text) {
       const level = headerMatch[1].length;
       const content = processInlineFormatting(headerMatch[2]);
       const className = level === 1 ? "text-lg font-bold my-1" : level === 2 ? "text-base font-bold my-1" : "text-sm font-semibold my-1";
-      elements.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, children: content }, elements.length));
+      elements.push(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, children: content }, elements.length)
+      );
       continue;
     }
     const ulMatch = line.match(/^[-*]\s+(.+)/);
@@ -1061,11 +1094,15 @@ function renderMarkdown(text) {
     }
     if (line.match(/^[-*_]{3,}$/)) {
       flushList();
-      elements.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("hr", { className: "my-2 border-gray-200" }, elements.length));
+      elements.push(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("hr", { className: "my-2 border-gray-200" }, elements.length)
+      );
       continue;
     }
     flushList();
-    elements.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: processInlineFormatting(line) }, elements.length));
+    elements.push(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: processInlineFormatting(line) }, elements.length)
+    );
   }
   flushList();
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: elements });
@@ -1095,31 +1132,59 @@ var folders = [
     id: "customers",
     title: "Customer Management",
     topics: [
-      { id: "add-customer", label: "Add a new customer", prompt: "How do I add a new customer to the system and what information is required?" },
-      { id: "customer-details", label: "View customer details", prompt: "Show me how to view and edit customer information and their payment history." }
+      {
+        id: "add-customer",
+        label: "Add a new customer",
+        prompt: "How do I add a new customer to the system and what information is required?"
+      },
+      {
+        id: "customer-details",
+        label: "View customer details",
+        prompt: "Show me how to view and edit customer information and their payment history."
+      }
     ]
   },
   {
     id: "payments",
     title: "Payment Processing",
     topics: [
-      { id: "process-payment", label: "Process a payment", prompt: "How do I process a one-time payment for a customer?" },
-      { id: "refund-payment", label: "Issue a refund", prompt: "Walk me through issuing a refund for a customer payment." }
+      {
+        id: "process-payment",
+        label: "Process a payment",
+        prompt: "How do I process a one-time payment for a customer?"
+      },
+      {
+        id: "refund-payment",
+        label: "Issue a refund",
+        prompt: "Walk me through issuing a refund for a customer payment."
+      }
     ]
   },
   {
     id: "subscriptions",
     title: "Subscription Management",
     topics: [
-      { id: "create-subscription", label: "Create a subscription", prompt: "How do I set up a new subscription plan for a customer?" },
-      { id: "update-subscription", label: "Update subscription tier", prompt: "How can I change a customer's subscription plan or upgrade them?" }
+      {
+        id: "create-subscription",
+        label: "Create a subscription",
+        prompt: "How do I set up a new subscription plan for a customer?"
+      },
+      {
+        id: "update-subscription",
+        label: "Update subscription tier",
+        prompt: "How can I change a customer's subscription plan or upgrade them?"
+      }
     ]
   },
   {
     id: "billing",
     title: "Billing",
     topics: [
-      { id: "payment-methods", label: "Manage payment methods", prompt: "How do customers add or update their payment methods?" }
+      {
+        id: "payment-methods",
+        label: "Manage payment methods",
+        prompt: "How do customers add or update their payment methods?"
+      }
     ]
   }
 ];
@@ -1265,18 +1330,21 @@ function ChatPanel({
 } = {}) {
   const [messages, setMessages] = React4.useState(initialMessages);
   const [input, setInput] = React4.useState("");
-  const [sessionId] = React4.useState(() => crypto.randomUUID());
+  const [sessionId, setSessionId] = React4.useState(() => crypto.randomUUID());
+  const resetSession = React4.useCallback(() => {
+    setSessionId(crypto.randomUUID());
+  }, []);
   const streamIntervals = React4.useRef({});
   const isEmpty = messages.length === 0;
   const [phase, setPhase] = React4.useState("idle");
   const [progressSteps, setProgressSteps] = React4.useState([]);
   const phaseTimers = React4.useRef([]);
   const lastRole = messages.length ? messages[messages.length - 1].role : void 0;
-  const [panelView, setPanelView] = React4.useState("landing");
-  const [currentFolderId, setCurrentFolderId] = React4.useState(void 0);
-  const [startingQuestions, setStartingQuestions] = React4.useState(
-    startingQuestionsProp || defaultStartingQuestions
+  const [panelView, setPanelView] = React4.useState(
+    "landing"
   );
+  const [currentFolderId, setCurrentFolderId] = React4.useState(void 0);
+  const [startingQuestions, setStartingQuestions] = React4.useState(startingQuestionsProp || defaultStartingQuestions);
   const [loadingQuestions, setLoadingQuestions] = React4.useState(false);
   React4.useEffect(() => {
     if (startingQuestionsEndpoint && !startingQuestionsProp) {
@@ -1300,10 +1368,11 @@ function ChatPanel({
   const latestBulkSummaryNavigationRef = React4.useRef(null);
   const [guideComplete, setGuideComplete] = React4.useState(false);
   React4.useEffect(() => {
-    ;
     window.resetIntegrationNotification = () => {
       localStorage.removeItem("gmailNotificationSeen");
-      console.log("Integration notification reset! Click the Integrations tab to see it again.");
+      console.log(
+        "Integration notification reset! Click the Integrations tab to see it again."
+      );
     };
     const handleIntegrationTabClick = () => {
       const hasSeenNotification = localStorage.getItem("gmailNotificationSeen");
@@ -1326,7 +1395,10 @@ function ChatPanel({
     };
     window.addEventListener("integrationTabClicked", handleIntegrationTabClick);
     return () => {
-      window.removeEventListener("integrationTabClicked", handleIntegrationTabClick);
+      window.removeEventListener(
+        "integrationTabClicked",
+        handleIntegrationTabClick
+      );
     };
   }, []);
   React4.useEffect(() => {
@@ -1361,7 +1433,12 @@ function ChatPanel({
         const id = Date.now() + 1;
         setMessages((prev) => [
           ...prev,
-          { id, role: "assistant", kind: "guideComplete", content: "Perfect! The dialog is now open. You can enter a name and create your API key." }
+          {
+            id,
+            role: "assistant",
+            kind: "guideComplete",
+            content: "Perfect! The dialog is now open. You can enter a name and create your API key."
+          }
         ]);
         setActiveGuide(void 0);
         setGuideComplete(true);
@@ -1372,7 +1449,9 @@ function ChatPanel({
   }, [activeGuide, hide]);
   React4.useEffect(() => {
     return () => {
-      Object.values(streamIntervals.current).forEach((id) => window.clearInterval(id));
+      Object.values(streamIntervals.current).forEach(
+        (id) => window.clearInterval(id)
+      );
       streamIntervals.current = {};
       phaseTimers.current.forEach((id) => window.clearTimeout(id));
       phaseTimers.current = [];
@@ -1433,9 +1512,17 @@ function ChatPanel({
           return;
         }
         const currentBulkNav = latestBulkSummaryNavigationRef.current;
-        console.log("[DEBUG] Keyboard handler - latestBulkSummaryNavigation:", currentBulkNav, "onNavigate:", !!onNavigate);
+        console.log(
+          "[DEBUG] Keyboard handler - latestBulkSummaryNavigation:",
+          currentBulkNav,
+          "onNavigate:",
+          !!onNavigate
+        );
         if (currentBulkNav && onNavigate) {
-          console.log("[DEBUG] Navigating via keyboard to:", currentBulkNav.page);
+          console.log(
+            "[DEBUG] Navigating via keyboard to:",
+            currentBulkNav.page
+          );
           e.preventDefault();
           e.stopPropagation();
           onNavigate(currentBulkNav.page, currentBulkNav.subtab);
@@ -1458,21 +1545,57 @@ function ChatPanel({
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [pendingAction, pendingNavigation, activeGuide, guideComplete, onNavigate]);
+  }, [
+    pendingAction,
+    pendingNavigation,
+    activeGuide,
+    guideComplete,
+    onNavigate
+  ]);
   function streamAssistantMessage(messageId, fullText, followups) {
-    const tokens = fullText.split(" ");
+    let textToStream = fullText;
+    let extractedFollowups = followups;
+    if (fullText && fullText.startsWith("{") && fullText.includes('"response"')) {
+      try {
+        let depth = 0, endIdx = 0;
+        for (let i2 = 0; i2 < fullText.length; i2++) {
+          if (fullText[i2] === "{") depth++;
+          else if (fullText[i2] === "}") {
+            depth--;
+            if (depth === 0) {
+              endIdx = i2 + 1;
+              break;
+            }
+          }
+        }
+        const firstJson = endIdx > 0 ? fullText.slice(0, endIdx) : fullText;
+        const parsed = JSON.parse(firstJson);
+        if (parsed.response && typeof parsed.response === "string") {
+          textToStream = parsed.response;
+          if (!extractedFollowups && parsed.followups) {
+            extractedFollowups = parsed.followups;
+          }
+        }
+      } catch {
+      }
+    }
+    const tokens = textToStream.split(" ");
     let i = 0;
     const intervalId = window.setInterval(() => {
       i += 1;
       setMessages(
-        (prev) => prev.map((m) => m.id === messageId ? { ...m, content: tokens.slice(0, i).join(" ") } : m)
+        (prev) => prev.map(
+          (m) => m.id === messageId ? { ...m, content: tokens.slice(0, i).join(" ") } : m
+        )
       );
       if (i >= tokens.length) {
         window.clearInterval(intervalId);
         delete streamIntervals.current[messageId];
-        if (followups && followups.length > 0) {
+        if (extractedFollowups && extractedFollowups.length > 0) {
           setMessages(
-            (prev) => prev.map((m) => m.id === messageId ? { ...m, followups } : m)
+            (prev) => prev.map(
+              (m) => m.id === messageId ? { ...m, followups: extractedFollowups } : m
+            )
           );
         }
         setPhase("idle");
@@ -1482,16 +1605,21 @@ function ChatPanel({
   }
   function handleFollowupClick(messageId, followup) {
     setMessages(
-      (prev) => prev.map((m) => m.id === messageId ? { ...m, followupSelected: true } : m)
+      (prev) => prev.map(
+        (m) => m.id === messageId ? { ...m, followupSelected: true } : m
+      )
     );
     startChatFlow(followup.label);
   }
   function handleBack() {
-    Object.values(streamIntervals.current).forEach((id) => window.clearInterval(id));
+    Object.values(streamIntervals.current).forEach(
+      (id) => window.clearInterval(id)
+    );
     streamIntervals.current = {};
     phaseTimers.current.forEach((id) => window.clearTimeout(id));
     phaseTimers.current = [];
     hide();
+    resetSession();
     setMessages([]);
     setInput("");
     setPhase("idle");
@@ -1651,7 +1779,10 @@ function ChatPanel({
         content: ""
       };
       setMessages((prev) => [...prev, thankYouMessage]);
-      streamAssistantMessage(thankYouMessageId, "Thank you, your feedback is saved.");
+      streamAssistantMessage(
+        thankYouMessageId,
+        "Thank you, your feedback is saved."
+      );
       return;
     }
     setPendingNavigation(null);
@@ -1709,7 +1840,10 @@ function ChatPanel({
               } else if (data.status === "executing") {
                 setPhase("executing");
                 setProgressSteps((prev) => {
-                  const updated = prev.map((step) => ({ ...step, completed: true }));
+                  const updated = prev.map((step) => ({
+                    ...step,
+                    completed: true
+                  }));
                   const lastStep = updated[updated.length - 1];
                   if (!lastStep || lastStep.message !== data.message) {
                     updated.push({ message: data.message, completed: false });
@@ -1718,7 +1852,9 @@ function ChatPanel({
                 });
               } else if (data.status === "responding") {
                 setPhase("responding");
-                setProgressSteps((prev) => prev.map((step) => ({ ...step, completed: true })));
+                setProgressSteps(
+                  (prev) => prev.map((step) => ({ ...step, completed: true }))
+                );
               }
             } else if (eventType === "response") {
               setProgressSteps([]);
@@ -1764,7 +1900,11 @@ function ChatPanel({
                   content: ""
                 };
                 setMessages((prev) => [...prev, assistantMessage]);
-                streamAssistantMessage(assistantMessageId, agentResponse.response || agentResponse.message || "For bulk operations, you can upload a CSV file - just click the \u{1F4CE} button!", agentResponse.followups);
+                streamAssistantMessage(
+                  assistantMessageId,
+                  agentResponse.response || agentResponse.message || "For bulk operations, you can upload a CSV file - just click the \u{1F4CE} button!",
+                  agentResponse.followups
+                );
                 streamCompleted = true;
               } else if (agentResponse.action === "bulk_preview") {
                 setPendingBulkSession(agentResponse.bulk_session_id);
@@ -1796,12 +1936,18 @@ function ChatPanel({
                   structuredData: agentResponse.structuredData || void 0
                 };
                 setMessages((prev) => [...prev, assistantMessage]);
-                streamAssistantMessage(assistantMessageId, agentResponse.response, agentResponse.followups);
+                streamAssistantMessage(
+                  assistantMessageId,
+                  agentResponse.response,
+                  agentResponse.followups
+                );
                 streamCompleted = true;
                 setTimeout(() => {
-                  window.dispatchEvent(new CustomEvent("agentActionComplete", {
-                    detail: { result: agentResponse.executionResult }
-                  }));
+                  window.dispatchEvent(
+                    new CustomEvent("agentActionComplete", {
+                      detail: { result: agentResponse.executionResult }
+                    })
+                  );
                 }, 100);
               } else {
                 const assistantMessageId = now + 1;
@@ -1812,7 +1958,11 @@ function ChatPanel({
                   content: ""
                 };
                 setMessages((prev) => [...prev, assistantMessage]);
-                streamAssistantMessage(assistantMessageId, agentResponse.response, agentResponse.followups);
+                streamAssistantMessage(
+                  assistantMessageId,
+                  agentResponse.response,
+                  agentResponse.followups
+                );
                 streamCompleted = true;
               }
             } else if (eventType === "error") {
@@ -1827,7 +1977,10 @@ function ChatPanel({
                 content: ""
               };
               setMessages((prev) => [...prev, errorMessage]);
-              streamAssistantMessage(errorMessageId, data.message || "An error occurred processing your request.");
+              streamAssistantMessage(
+                errorMessageId,
+                data.message || "An error occurred processing your request."
+              );
             } else if (eventType === "done") {
               setProgressSteps([]);
               setPhase("idle");
@@ -1853,7 +2006,18 @@ function ChatPanel({
         content: ""
       };
       setMessages((prev) => [...prev, errorMessage]);
-      streamAssistantMessage(errorMessageId, "I'm having trouble connecting to my backend. Please make sure the agent server is running on port 5002. For simple navigation requests, I can still help you locally.");
+      let errorText = "I'm having trouble connecting to my backend.";
+      if (error instanceof Error) {
+        if (error.name === "AbortError") {
+          errorText = "The request timed out. The server might be busy - please try again.";
+        } else if (error.message.includes("Failed to fetch") || error.message.includes("NetworkError")) {
+          errorText = "I'm having trouble connecting to my backend. Please make sure the agent server is running on port 5002.";
+        } else if (error.message.includes("Agent request failed:")) {
+          errorText = "The server encountered an error. Please try again.";
+        }
+      }
+      errorText += " For simple navigation requests, I can still help you locally.";
+      streamAssistantMessage(errorMessageId, errorText);
     } finally {
       setProgressSteps([]);
     }
@@ -1937,33 +2101,41 @@ ${userText}`
               setMessages((prev) => [...prev, previewMessage]);
             } else if (eventType === "progress") {
               setPhase("executing");
-              setProgressSteps([{
-                message: `Processing row ${data.row} of ${data.total}...`,
-                completed: false
-              }]);
+              setProgressSteps([
+                {
+                  message: `Processing row ${data.row} of ${data.total}...`,
+                  completed: false
+                }
+              ]);
               setMessages((prev) => {
                 const lastMsg = prev[prev.length - 1];
                 if (lastMsg?.kind === "bulkProgress") {
                   return prev.map(
-                    (m, i) => i === prev.length - 1 ? { ...m, bulkProgress: {
-                      processed: data.row,
-                      total: data.total,
-                      successes: data.successes || 0,
-                      failures: data.failures || 0
-                    } } : m
+                    (m, i) => i === prev.length - 1 ? {
+                      ...m,
+                      bulkProgress: {
+                        processed: data.row,
+                        total: data.total,
+                        successes: data.successes || 0,
+                        failures: data.failures || 0
+                      }
+                    } : m
                   );
                 } else {
-                  return [...prev, {
-                    id: Date.now(),
-                    role: "assistant",
-                    kind: "bulkProgress",
-                    bulkProgress: {
-                      processed: data.row,
-                      total: data.total,
-                      successes: data.successes || 0,
-                      failures: data.failures || 0
+                  return [
+                    ...prev,
+                    {
+                      id: Date.now(),
+                      role: "assistant",
+                      kind: "bulkProgress",
+                      bulkProgress: {
+                        processed: data.row,
+                        total: data.total,
+                        successes: data.successes || 0,
+                        failures: data.failures || 0
+                      }
                     }
-                  }];
+                  ];
                 }
               });
             } else if (eventType === "summary") {
@@ -1972,23 +2144,34 @@ ${userText}`
               setPendingBulkSession(null);
               setMessages((prev) => {
                 const filtered = prev.filter((m) => m.kind !== "bulkProgress");
-                return [...filtered, {
-                  id: Date.now(),
-                  role: "assistant",
-                  kind: "bulkSummary",
-                  content: data.message,
-                  bulkSummary: {
-                    total: data.total,
-                    successes: data.successes,
-                    failures: data.failures || [],
-                    navigationPage: data.navigationPage
+                return [
+                  ...filtered,
+                  {
+                    id: Date.now(),
+                    role: "assistant",
+                    kind: "bulkSummary",
+                    content: data.message,
+                    bulkSummary: {
+                      total: data.total,
+                      successes: data.successes,
+                      failures: data.failures || [],
+                      navigationPage: data.navigationPage
+                    }
                   }
-                }];
+                ];
               });
               setTimeout(() => {
-                window.dispatchEvent(new CustomEvent("agentActionComplete", {
-                  detail: { result: { bulk: true, total: data.total, successes: data.successes } }
-                }));
+                window.dispatchEvent(
+                  new CustomEvent("agentActionComplete", {
+                    detail: {
+                      result: {
+                        bulk: true,
+                        total: data.total,
+                        successes: data.successes
+                      }
+                    }
+                  })
+                );
               }, 100);
             } else if (eventType === "error") {
               setPhase("idle");
@@ -2016,18 +2199,31 @@ ${userText}`
       console.error("Bulk upload failed:", error);
       setProgressSteps([]);
       setPhase("idle");
+      let errorText = "I'm having trouble processing your CSV file.";
+      if (error instanceof Error) {
+        if (error.name === "AbortError") {
+          errorText = "The bulk upload request timed out. The file might be too large or the server is busy - please try again.";
+        } else if (error.message.includes("Failed to fetch") || error.message.includes("NetworkError")) {
+          errorText = "I'm having trouble connecting to my backend. Please make sure the agent server is running on port 5002.";
+        } else if (error.message.includes("Bulk upload failed:")) {
+          errorText = "The server encountered an error processing your CSV file. Please try again.";
+        }
+      }
+      errorText += " Please try again.";
       const errorMessage = {
         id: now + 1,
         role: "assistant",
         kind: "text",
-        content: "I'm having trouble processing your CSV file. Please make sure the agent server is running on port 5002 and try again."
+        content: errorText
       };
       setMessages((prev) => [...prev, errorMessage]);
     }
   }
   async function confirmBulkOperation(bulkSessionId) {
     setPhase("executing");
-    setProgressSteps([{ message: "Starting bulk operation...", completed: false }]);
+    setProgressSteps([
+      { message: "Starting bulk operation...", completed: false }
+    ]);
     try {
       const response = await fetch(`${agentUrl}/chat/bulk/confirm`, {
         method: "POST",
@@ -2063,43 +2259,56 @@ ${userText}`
           try {
             const data = JSON.parse(eventData);
             if (eventType === "progress") {
-              setProgressSteps([{
-                message: `Processing row ${data.row} of ${data.total}...`,
-                completed: false
-              }]);
+              setProgressSteps([
+                {
+                  message: `Processing row ${data.row} of ${data.total}...`,
+                  completed: false
+                }
+              ]);
               setMessages((prev) => {
                 const lastMsg = prev[prev.length - 1];
                 if (lastMsg?.kind === "bulkProgress") {
                   return prev.map(
-                    (m, i) => i === prev.length - 1 ? { ...m, bulkProgress: {
-                      processed: data.row,
-                      total: data.total,
-                      successes: data.successes || 0,
-                      failures: data.failures || 0
-                    } } : m
+                    (m, i) => i === prev.length - 1 ? {
+                      ...m,
+                      bulkProgress: {
+                        processed: data.row,
+                        total: data.total,
+                        successes: data.successes || 0,
+                        failures: data.failures || 0
+                      }
+                    } : m
                   );
                 } else {
-                  return [...prev, {
-                    id: Date.now(),
-                    role: "assistant",
-                    kind: "bulkProgress",
-                    bulkProgress: {
-                      processed: data.row,
-                      total: data.total,
-                      successes: data.successes || 0,
-                      failures: data.failures || 0
+                  return [
+                    ...prev,
+                    {
+                      id: Date.now(),
+                      role: "assistant",
+                      kind: "bulkProgress",
+                      bulkProgress: {
+                        processed: data.row,
+                        total: data.total,
+                        successes: data.successes || 0,
+                        failures: data.failures || 0
+                      }
                     }
-                  }];
+                  ];
                 }
               });
             } else if (eventType === "summary") {
               console.log("[DEBUG] Received summary event - data:", data);
-              console.log("[DEBUG] navigationPage from backend:", data.navigationPage);
+              console.log(
+                "[DEBUG] navigationPage from backend:",
+                data.navigationPage
+              );
               setPhase("idle");
               setProgressSteps([]);
               setPendingBulkSession(null);
               setMessages((prev) => {
-                const filtered = prev.filter((m) => m.kind !== "bulkProgress" && m.kind !== "bulkPreview");
+                const filtered = prev.filter(
+                  (m) => m.kind !== "bulkProgress" && m.kind !== "bulkPreview"
+                );
                 const newMsg = {
                   id: Date.now(),
                   role: "assistant",
@@ -2116,9 +2325,17 @@ ${userText}`
                 return [...filtered, newMsg];
               });
               setTimeout(() => {
-                window.dispatchEvent(new CustomEvent("agentActionComplete", {
-                  detail: { result: { bulk: true, total: data.total, successes: data.successes } }
-                }));
+                window.dispatchEvent(
+                  new CustomEvent("agentActionComplete", {
+                    detail: {
+                      result: {
+                        bulk: true,
+                        total: data.total,
+                        successes: data.successes
+                      }
+                    }
+                  })
+                );
               }, 100);
             } else if (eventType === "error") {
               setPhase("idle");
@@ -2160,7 +2377,10 @@ ${userText}`
   }
   function appendAssistantText(text) {
     const id = Date.now() + Math.floor(Math.random() * 1e3);
-    setMessages((prev) => [...prev, { id, role: "assistant", kind: "text", content: text }]);
+    setMessages((prev) => [
+      ...prev,
+      { id, role: "assistant", kind: "text", content: text }
+    ]);
   }
   function startGuide(guideId) {
     const guide = guides[guideId];
@@ -2173,7 +2393,9 @@ ${userText}`
     appendAssistantText(`I'll help you with ${guide.title}.`);
     const firstStep = guide.steps[0];
     const isNavigationButton = firstStep.cursorTarget?.selector.includes("[data-page=");
-    const isTabButton = firstStep.cursorTarget?.selector.includes("[data-settings-tab=");
+    const isTabButton = firstStep.cursorTarget?.selector.includes(
+      "[data-settings-tab="
+    );
     if (firstStep.cursorTarget && (isNavigationButton || isTabButton)) {
       const cursorTarget = firstStep.cursorTarget;
       if (isTabButton && firstStep.navigation && onNavigate) {
@@ -2182,7 +2404,9 @@ ${userText}`
       const initialDelay = isTabButton ? 800 : 400;
       setTimeout(() => {
         const waitForElement = () => {
-          const element = document.querySelector(cursorTarget.selector);
+          const element = document.querySelector(
+            cursorTarget.selector
+          );
           if (element && element.offsetParent !== null) {
             moveTo(cursorTarget);
             if (cursorTarget.onClick) {
@@ -2207,7 +2431,9 @@ ${userText}`
         const initialDelay = isDialogElement ? 700 : isSettingsTab ? 600 : 400;
         setTimeout(() => {
           const waitForElement = () => {
-            const element = document.querySelector(cursorTarget.selector);
+            const element = document.querySelector(
+              cursorTarget.selector
+            );
             if (element && element.offsetParent !== null) {
               moveTo(cursorTarget);
               if (cursorTarget.onClick) {
@@ -2221,7 +2447,9 @@ ${userText}`
               moveTo(cursorTarget);
               if (cursorTarget.onClick) {
                 setTimeout(() => {
-                  const el = document.querySelector(cursorTarget.selector);
+                  const el = document.querySelector(
+                    cursorTarget.selector
+                  );
                   if (el) el.click();
                 }, 1e3);
               }
@@ -2258,7 +2486,12 @@ ${userText}`
       const id = Date.now() + 1;
       setMessages((prev) => [
         ...prev,
-        { id, role: "assistant", kind: "guideComplete", content: "Guide Complete" }
+        {
+          id,
+          role: "assistant",
+          kind: "guideComplete",
+          content: "Guide Complete"
+        }
       ]);
       setActiveGuide(void 0);
       setGuideComplete(true);
@@ -2277,7 +2510,9 @@ ${userText}`
     };
     setMessages((prev) => [...prev, draft]);
     const isNavigationButton = nextStep.cursorTarget?.selector.includes("[data-page=");
-    const isTabButton = nextStep.cursorTarget?.selector.includes("[data-settings-tab=");
+    const isTabButton = nextStep.cursorTarget?.selector.includes(
+      "[data-settings-tab="
+    );
     if (nextStep.cursorTarget && (isNavigationButton || isTabButton)) {
       const cursorTarget = nextStep.cursorTarget;
       if (isTabButton && nextStep.navigation && onNavigate) {
@@ -2294,7 +2529,9 @@ ${userText}`
           if (!currentGuide3 || currentGuide3.id !== guide.id || currentGuide3.stepIndex !== nextIndex) {
             return;
           }
-          const element = document.querySelector(cursorTarget.selector);
+          const element = document.querySelector(
+            cursorTarget.selector
+          );
           if (element && element.offsetParent !== null) {
             moveTo(cursorTarget);
             if (cursorTarget.onClick) {
@@ -2320,7 +2557,9 @@ ${userText}`
         const cursorTarget = nextStep.cursorTarget;
         const isDialogElement = cursorTarget.selector.includes("dialog") || cursorTarget.selector.includes("api-key-name-input");
         const isSettingsTab = cursorTarget.selector.includes("data-settings-tab");
-        const navigationSetTab = nextStep.navigation?.subtab && isSettingsTab && cursorTarget.selector.includes(`data-settings-tab="${nextStep.navigation.subtab}"`);
+        const navigationSetTab = nextStep.navigation?.subtab && isSettingsTab && cursorTarget.selector.includes(
+          `data-settings-tab="${nextStep.navigation.subtab}"`
+        );
         const shouldAutoClick = cursorTarget.onClick && !navigationSetTab;
         const hasNavigation = !!nextStep.navigation;
         const hasSubtab = !!nextStep.navigation?.subtab;
@@ -2336,7 +2575,9 @@ ${userText}`
             if (!currentGuide3 || currentGuide3.id !== guide.id || currentGuide3.stepIndex !== nextIndex) {
               return;
             }
-            const element = document.querySelector(cursorTarget.selector);
+            const element = document.querySelector(
+              cursorTarget.selector
+            );
             if (element && element.offsetParent !== null) {
               moveTo(cursorTarget);
               if (shouldAutoClick) {
@@ -2358,7 +2599,9 @@ ${userText}`
                   if (!currentGuide4 || currentGuide4.id !== guide.id || currentGuide4.stepIndex !== nextIndex) {
                     return;
                   }
-                  const el = document.querySelector(cursorTarget.selector);
+                  const el = document.querySelector(
+                    cursorTarget.selector
+                  );
                   if (el) el.click();
                 }, 1e3);
               }
@@ -2390,10 +2633,17 @@ ${userText}`
       } else {
         hide();
       }
-      const existingMessages = messages.filter((m) => m.kind !== "guideStep" && m.kind !== "guideComplete");
+      const existingMessages = messages.filter(
+        (m) => m.kind !== "guideStep" && m.kind !== "guideComplete"
+      );
       setMessages([
         ...existingMessages,
-        { id: Date.now(), role: "assistant", kind: "guideStep", content: prevStep.text }
+        {
+          id: Date.now(),
+          role: "assistant",
+          kind: "guideStep",
+          content: prevStep.text
+        }
       ]);
     }
   }
@@ -2416,6 +2666,7 @@ ${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");
                   setCurrentFolderId(void 0);
@@ -2438,919 +2689,1161 @@ ${userText}`
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: isEmpty ? "grid flex-1 place-items-center transition-all duration-300" : "flex flex-1 flex-col transition-all duration-300 min-h-0 overflow-hidden", children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "w-full overflow-y-auto px-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "py-3 transition-all duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "How can I help?" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pb-4 px-4", children: [
-            panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
-              const iconColors = ["bg-blue-400", "bg-green-400", "bg-purple-400", "bg-orange-400", "bg-pink-400"];
-              return /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.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_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-3 flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                  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_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-4 w-4 text-gray-500" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            className: isEmpty ? "grid flex-1 place-items-center transition-all duration-300" : "flex flex-1 flex-col transition-all duration-300 min-h-0 overflow-hidden",
+            children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "w-full overflow-y-auto px-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "py-3 transition-all duration-300", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "What can I help with?" }),
+                panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-center text-xs text-gray-500", children: "Ask me anything about your account" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1.5", children: folders.find((f) => f.id === currentFolderId)?.topics.map((topic) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                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_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollArea, { ref: messagesContainerRef, className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-2 px-4 py-3", children: [
-          messages.map((message, index) => {
-            const isUser = message.role === "user";
-            const previousRole = index > 0 ? messages[index - 1].role : void 0;
-            const isRoleChange = previousRole !== void 0 && previousRole !== message.role;
-            const currentGuide = activeGuideRef.current || activeGuide;
-            let isCurrentGuideStep = false;
-            if (currentGuide && message.kind === "guideStep") {
-              if (message.guideStepIndex !== void 0) {
-                isCurrentGuideStep = message.guideStepIndex === currentGuide.stepIndex;
-              } else {
-                isCurrentGuideStep = index === messages.length - 1;
-              }
-            } else if (message.kind === "guideComplete") {
-              isCurrentGuideStep = index === messages.length - 1;
-            }
-            if (message.kind === "guideStep" && !isCurrentGuideStep) {
-              return null;
-            }
-            if (isUser) {
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content }) }, message.id);
-            }
-            if (message.kind === "searchSummary") {
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AssistantSearchSummary, { title: message.title ?? "Search results", links: message.links ?? [] }) }, message.id);
-            }
-            if (message.kind === "guideComplete") {
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                "div",
-                {
-                  ref: isCurrentGuideStep ? currentStepRef : null,
-                  className: `${isRoleChange ? "mt-3" : ""}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-green-50 border border-green-200 px-3 py-2.5 text-sm leading-6", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-medium text-green-800", children: message.content })
-                  ] })
-                },
-                message.id
-              );
-            }
-            if (message.kind === "navigationAction") {
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-2 text-gray-700", children: message.content || "" }),
-                message.navigationTarget && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                  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_runtime9.jsx)("span", { children: "Confirm" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
-                      ] })
-                    ]
-                  }
-                ) })
-              ] }, 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_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent }) }, message.id);
-              }
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
-                actionType === "updateCompanyInfo" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        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_runtime9.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        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_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Address" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      Input,
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pb-4 px-4", children: [
+                panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Suggested Questions" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
+                    const iconColors = [
+                      "bg-blue-400",
+                      "bg-green-400",
+                      "bg-purple-400",
+                      "bg-orange-400",
+                      "bg-pink-400"
+                    ];
+                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      Button,
                       {
-                        placeholder: "123 Main St, San Francisco, CA",
-                        value: formData.address || "",
-                        onChange: (e) => setActionFormData({ ...actionFormData, address: e.target.value }),
-                        className: "h-8 text-xs border-gray-200"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Phone" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        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_runtime9.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        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"
-                        }
-                      )
-                    ] })
-                  ] })
-                ] }),
-                actionType === "addApiKey" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    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_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        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_runtime9.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        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_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Location" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      Input,
-                      {
-                        placeholder: "San Francisco, CA",
-                        value: formData.location || "",
-                        onChange: (e) => setActionFormData({ ...actionFormData, location: e.target.value }),
-                        className: "h-8 text-xs border-gray-200"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Subscription Tier" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                      "select",
-                      {
-                        value: formData.subscription || "Starter",
-                        onChange: (e) => setActionFormData({ ...actionFormData, subscription: e.target.value }),
-                        className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+                        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_runtime9.jsx)("option", { value: "Starter", children: "Starter" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise" })
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            "span",
+                            {
+                              className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}`
+                            }
+                          ),
+                          question.label
                         ]
-                      }
-                    )
-                  ] })
+                      },
+                      question.id
+                    );
+                  }) })
                 ] }),
-                (actionType === "enable2FA" || actionType === "disable2FA") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enable2FA" ? "This will enable two-factor authentication for your account. You'll need to set up an authenticator app." : "This will disable two-factor authentication for your account. Your account will be less secure." }) }),
-                actionType === "changePassword" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Current Password" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      Input,
-                      {
-                        type: "password",
-                        value: formData.currentPassword || "",
-                        onChange: (e) => setActionFormData({ ...actionFormData, currentPassword: e.target.value }),
-                        className: "h-8 text-xs border-gray-200"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "New Password" }),
+                panelView === "folder" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-3 flex items-center gap-2", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      Input,
+                      Button,
                       {
-                        type: "password",
-                        value: formData.newPassword || "",
-                        onChange: (e) => setActionFormData({ ...actionFormData, newPassword: e.target.value }),
-                        className: "h-8 text-xs border-gray-200"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Confirm New Password" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      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_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Notification Type" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                      "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_runtime9.jsx)("option", { value: "paymentReceived", children: "Payment Received" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "paymentFailed", children: "Payment Failed" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "invoicePaid", children: "Invoice Paid" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "monthlySummary", children: "Monthly Summary" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "productUpdates", children: "Product Updates" })
-                        ]
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.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"
+                        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_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-4 w-4 text-gray-500" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs text-black", children: "Enable this notification" })
-                  ] })
-                ] }),
-                (actionType === "connectIntegration" || actionType === "disconnectIntegration") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Integration" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                    "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_runtime9.jsx)("option", { value: "Slack", children: "Slack" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Zapier", children: "Zapier" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Webhook", children: "Webhook" })
-                      ]
-                    }
-                  )
-                ] }) }),
-                actionType === "addPaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Card Number" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      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_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Expiry Date" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      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_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will remove the default payment method from your account." }) }),
-                actionType === "refundPayment" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Transaction ID or Customer Name" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      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_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Amount (optional)" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      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_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Reason (optional)" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      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_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name or ID" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      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_runtime9.jsx)("p", { className: "text-xs text-red-600", children: "Warning: This action cannot be undone. The API key will be permanently deleted." })
-                ] }),
-                actionType === "addWebhook" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Webhook URL" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      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_runtime9.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Name (optional)" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      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_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Currency" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                    "select",
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1.5", children: folders.find((f) => f.id === currentFolderId)?.topics.map((topic) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Button,
                     {
-                      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_runtime9.jsx)("option", { value: "USD", children: "USD ($)" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "EUR", children: "EUR (\u20AC)" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "GBP", children: "GBP (\xA3)" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "JPY", children: "JPY (\xA5)" })
-                      ]
-                    }
-                  )
-                ] }) }),
-                actionType === "updateTimezone" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Timezone" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                    "select",
+                      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_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollArea, { ref: messagesContainerRef, className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-2 px-4 py-3", children: [
+              messages.map((message, index) => {
+                const isUser = message.role === "user";
+                const previousRole = index > 0 ? messages[index - 1].role : void 0;
+                const isRoleChange = previousRole !== void 0 && previousRole !== message.role;
+                const currentGuide = activeGuideRef.current || activeGuide;
+                let isCurrentGuideStep = false;
+                if (currentGuide && message.kind === "guideStep") {
+                  if (message.guideStepIndex !== void 0) {
+                    isCurrentGuideStep = message.guideStepIndex === currentGuide.stepIndex;
+                  } else {
+                    isCurrentGuideStep = index === messages.length - 1;
+                  }
+                } else if (message.kind === "guideComplete") {
+                  isCurrentGuideStep = index === messages.length - 1;
+                }
+                if (message.kind === "guideStep" && !isCurrentGuideStep) {
+                  return null;
+                }
+                if (isUser) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "div",
+                    {
+                      className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[280px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content })
+                    },
+                    message.id
+                  );
+                }
+                if (message.kind === "searchSummary") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "div",
+                    {
+                      className: `${isRoleChange ? "mt-3" : ""}`,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        AssistantSearchSummary,
+                        {
+                          title: message.title ?? "Search results",
+                          links: message.links ?? []
+                        }
+                      )
+                    },
+                    message.id
+                  );
+                }
+                if (message.kind === "guideComplete") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "div",
                     {
-                      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",
+                      ref: isCurrentGuideStep ? currentStepRef : null,
+                      className: `${isRoleChange ? "mt-3" : ""}`,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-green-50 border border-green-200 px-3 py-2.5 text-sm leading-6", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-medium text-green-800", children: message.content })
+                      ] })
+                    },
+                    message.id
+                  );
+                }
+                if (message.kind === "navigationAction") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    "div",
+                    {
+                      className: `${isRoleChange ? "mt-3" : ""}`,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "America/Los_Angeles", children: "Pacific Time (PT)" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "America/New_York", children: "Eastern Time (ET)" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Europe/London", children: "GMT" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Asia/Tokyo", children: "JST" })
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-2 text-gray-700", children: message.content || "" }),
+                        message.navigationTarget && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                          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_runtime9.jsx)("span", { children: "Confirm" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                              ] })
+                            ]
+                          }
+                        ) })
                       ]
+                    },
+                    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.";
                     }
-                  )
-                ] }) }),
-                actionType === "revokeSession" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Device/Session" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      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_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will sign out the device and invalidate its session." })
-                ] }),
-                actionType === "createSubscription" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Customer Email" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      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_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Plan" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                      "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_runtime9.jsx)("option", { value: "Starter", children: "Starter ($29/mo)" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional ($99/mo)" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise ($299/mo)" })
-                        ]
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Billing Cycle" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                      "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_runtime9.jsx)("option", { value: "monthly", children: "Monthly" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "yearly", children: "Yearly (Save 15%)" })
-                        ]
-                      }
-                    )
-                  ] })
-                ] }),
-                actionType === "exportCertificate" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will export your certificate of incorporation document." }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Format" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                      "select",
+                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "div",
                       {
-                        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_runtime9.jsx)("option", { value: "pdf", children: "PDF" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "json", children: "JSON" })
-                        ]
-                      }
-                    )
-                  ] })
-                ] }),
-                (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Block Rule" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                      "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_runtime9.jsx)("option", { value: "rule_1", children: "Block if risk level = 'highest'" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_2", children: "Block if matches Stripe block lists" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_3", children: "Block if CVC verification fails" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_4", children: "Block if Postal code verification fails" })
-                        ]
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enableBlockRule" ? "This will enable the selected block rule to actively block matching payments." : actionType === "disableBlockRule" ? "This will disable the selected block rule. Matching payments will no longer be blocked." : "This will toggle the selected block rule's state." })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("span", { children: "Confirm" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
-                      ] })
-                    ]
+                        className: `${isRoleChange ? "mt-3" : ""}`,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent })
+                      },
+                      message.id
+                    );
                   }
-                ) })
-              ] }, message.id);
-            }
-            if (message.kind === "bulkPreview" && message.csvData) {
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-100 px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-gray-600" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-gray-500", children: [
-                      "\u2022 ",
-                      message.csvData.rowCount,
-                      " rows"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Columns" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-1", children: message.csvData.columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded", children: col }, i)) })
-                  ] }),
-                  message.csvData.sampleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Sample Data" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-xs text-gray-600 bg-white rounded px-2 py-1 border border-gray-100", children: [
-                      Object.entries(row).slice(0, 3).map(([key, val], j) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
-                        j > 0 && " \u2022 ",
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-gray-400", children: [
-                          key,
-                          ":"
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    "div",
+                    {
+                      className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
+                        actionType === "updateCompanyInfo" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                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_runtime9.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                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_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Address" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              Input,
+                              {
+                                placeholder: "123 Main St, San Francisco, CA",
+                                value: formData.address || "",
+                                onChange: (e) => setActionFormData({
+                                  ...actionFormData,
+                                  address: e.target.value
+                                }),
+                                className: "h-8 text-xs border-gray-200"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Phone" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                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_runtime9.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                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"
+                                }
+                              )
+                            ] })
+                          ] })
                         ] }),
-                        " ",
-                        val
-                      ] }, key)),
-                      Object.keys(row).length > 3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-gray-400", children: " ..." })
-                    ] }, i)) })
-                  ] }),
-                  message.suggestedAction && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-blue-700", children: [
-                    "Suggested action: ",
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: message.suggestedAction.replace(/_/g, " ") })
-                  ] }) })
-                ] }),
-                message.bulkSessionId && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                    Button,
+                        actionType === "addApiKey" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            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_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                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_runtime9.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                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_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Location" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              Input,
+                              {
+                                placeholder: "San Francisco, CA",
+                                value: formData.location || "",
+                                onChange: (e) => setActionFormData({
+                                  ...actionFormData,
+                                  location: e.target.value
+                                }),
+                                className: "h-8 text-xs border-gray-200"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Subscription Tier" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                              "select",
+                              {
+                                value: formData.subscription || "Starter",
+                                onChange: (e) => setActionFormData({
+                                  ...actionFormData,
+                                  subscription: e.target.value
+                                }),
+                                className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Starter", children: "Starter" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise" })
+                                ]
+                              }
+                            )
+                          ] })
+                        ] }),
+                        (actionType === "enable2FA" || actionType === "disable2FA") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enable2FA" ? "This will enable two-factor authentication for your account. You'll need to set up an authenticator app." : "This will disable two-factor authentication for your account. Your account will be less secure." }) }),
+                        actionType === "changePassword" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Current Password" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              Input,
+                              {
+                                type: "password",
+                                value: formData.currentPassword || "",
+                                onChange: (e) => setActionFormData({
+                                  ...actionFormData,
+                                  currentPassword: e.target.value
+                                }),
+                                className: "h-8 text-xs border-gray-200"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "New Password" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              Input,
+                              {
+                                type: "password",
+                                value: formData.newPassword || "",
+                                onChange: (e) => setActionFormData({
+                                  ...actionFormData,
+                                  newPassword: e.target.value
+                                }),
+                                className: "h-8 text-xs border-gray-200"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Confirm New Password" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              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_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Notification Type" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                              "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_runtime9.jsx)("option", { value: "paymentReceived", children: "Payment Received" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "paymentFailed", children: "Payment Failed" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "invoicePaid", children: "Invoice Paid" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "monthlySummary", children: "Monthly Summary" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "productUpdates", children: "Product Updates" })
+                                ]
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("label", { className: "text-xs text-black", children: "Enable this notification" })
+                          ] })
+                        ] }),
+                        (actionType === "connectIntegration" || actionType === "disconnectIntegration") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Integration" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                            "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_runtime9.jsx)("option", { value: "Slack", children: "Slack" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Zapier", children: "Zapier" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Webhook", children: "Webhook" })
+                              ]
+                            }
+                          )
+                        ] }) }),
+                        actionType === "addPaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Card Number" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              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_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Expiry Date" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              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_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will remove the default payment method from your account." }) }),
+                        actionType === "refundPayment" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Transaction ID or Customer Name" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              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_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Amount (optional)" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              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_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Reason (optional)" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              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_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name or ID" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              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_runtime9.jsx)("p", { className: "text-xs text-red-600", children: "Warning: This action cannot be undone. The API key will be permanently deleted." })
+                        ] }),
+                        actionType === "addWebhook" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Webhook URL" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              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_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Name (optional)" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              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_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Currency" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                            "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_runtime9.jsx)("option", { value: "USD", children: "USD ($)" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "EUR", children: "EUR (\u20AC)" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "GBP", children: "GBP (\xA3)" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "JPY", children: "JPY (\xA5)" })
+                              ]
+                            }
+                          )
+                        ] }) }),
+                        actionType === "updateTimezone" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Timezone" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                            "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_runtime9.jsx)("option", { value: "America/Los_Angeles", children: "Pacific Time (PT)" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "America/New_York", children: "Eastern Time (ET)" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Europe/London", children: "GMT" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Asia/Tokyo", children: "JST" })
+                              ]
+                            }
+                          )
+                        ] }) }),
+                        actionType === "revokeSession" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Device/Session" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              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_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will sign out the device and invalidate its session." })
+                        ] }),
+                        actionType === "createSubscription" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Customer Email" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              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_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Plan" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                              "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_runtime9.jsx)("option", { value: "Starter", children: "Starter ($29/mo)" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional ($99/mo)" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise ($299/mo)" })
+                                ]
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Billing Cycle" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                              "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_runtime9.jsx)("option", { value: "monthly", children: "Monthly" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "yearly", children: "Yearly (Save 15%)" })
+                                ]
+                              }
+                            )
+                          ] })
+                        ] }),
+                        actionType === "exportCertificate" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will export your certificate of incorporation document." }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Format" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                              "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_runtime9.jsx)("option", { value: "pdf", children: "PDF" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "json", children: "JSON" })
+                                ]
+                              }
+                            )
+                          ] })
+                        ] }),
+                        (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Block Rule" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                              "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_runtime9.jsx)("option", { value: "rule_1", children: "Block if risk level = 'highest'" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_2", children: "Block if matches Stripe block lists" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_3", children: "Block if CVC verification fails" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_4", children: "Block if Postal code verification fails" })
+                                ]
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enableBlockRule" ? "This will enable the selected block rule to actively block matching payments." : actionType === "disableBlockRule" ? "This will disable the selected block rule. Matching payments will no longer be blocked." : "This will toggle the selected block rule's state." })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("span", { children: "Confirm" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                              ] })
+                            ]
+                          }
+                        ) })
+                      ]
+                    },
+                    message.id
+                  );
+                }
+                if (message.kind === "bulkPreview" && message.csvData) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    "div",
                     {
-                      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),
+                      className: `${isRoleChange ? "mt-3" : ""}`,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
-                          "Process ",
-                          message.csvData.rowCount,
-                          " rows"
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-100 px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-gray-600" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-gray-500", children: [
+                              "\u2022 ",
+                              message.csvData.rowCount,
+                              " rows"
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Columns" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-1", children: message.csvData.columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              "span",
+                              {
+                                className: "text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded",
+                                children: col
+                              },
+                              i
+                            )) })
+                          ] }),
+                          message.csvData.sampleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Sample Data" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                              "div",
+                              {
+                                className: "text-xs text-gray-600 bg-white rounded px-2 py-1 border border-gray-100",
+                                children: [
+                                  Object.entries(row).slice(0, 3).map(([key, val], j) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                                    j > 0 && " \u2022 ",
+                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-gray-400", children: [
+                                      key,
+                                      ":"
+                                    ] }),
+                                    " ",
+                                    val
+                                  ] }, key)),
+                                  Object.keys(row).length > 3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-gray-400", children: [
+                                    " ",
+                                    "..."
+                                  ] })
+                                ]
+                              },
+                              i
+                            )) })
+                          ] }),
+                          message.suggestedAction && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-blue-700", children: [
+                            "Suggested action:",
+                            " ",
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: message.suggestedAction.replace(/_/g, " ") })
+                          ] }) })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                        message.bulkSessionId && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.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),
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                                  "Process ",
+                                  message.csvData.rowCount,
+                                  " rows"
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                                ] })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.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"
+                            }
+                          )
                         ] })
                       ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    Button,
+                    },
+                    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_runtime9.jsx)(
+                    "div",
                     {
-                      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_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-blue-600" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-sm font-medium text-gray-700", children: [
-                    "Processing... ",
-                    processed,
-                    " of ",
-                    total
-                  ] })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      className: `${isRoleChange ? "mt-3" : ""}`,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-blue-600" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-sm font-medium text-gray-700", children: [
+                            "Processing... ",
+                            processed,
+                            " of ",
+                            total
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          "div",
+                          {
+                            className: "h-full bg-blue-600 transition-all duration-300",
+                            style: { width: `${percentage}%` }
+                          }
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3 text-green-600" }),
+                            successes,
+                            " successful"
+                          ] }),
+                          failures > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
+                            failures,
+                            " 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_runtime9.jsx)(
+                    "div",
+                    {
+                      className: `${isRoleChange ? "mt-3" : ""}`,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        "div",
+                        {
+                          className: `rounded-lg border p-3 ${hasFailures ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`,
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                import_lucide_react4.CheckCircle2,
+                                {
+                                  className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}`
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-4 text-xs", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-green-700", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3" }),
+                                successes,
+                                " successful"
+                              ] }),
+                              hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
+                                failures.length,
+                                " failed"
+                              ] })
+                            ] }),
+                            hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
+                                failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                                  "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_runtime9.jsxs)("div", { className: "text-xs text-amber-600", children: [
+                                  "...and ",
+                                  failures.length - 5,
+                                  " more"
+                                ] })
+                              ] })
+                            ] }),
+                            navigationPage && successes > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: (e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                  console.log(
+                                    "[DEBUG] Button clicked - navigationPage:",
+                                    navigationPage,
+                                    "onNavigate:",
+                                    !!onNavigate
+                                  );
+                                  if (onNavigate && navigationPage.page) {
+                                    console.log(
+                                      "[DEBUG] Calling onNavigate with page:",
+                                      navigationPage.page
+                                    );
+                                    onNavigate(
+                                      navigationPage.page,
+                                      navigationPage.subtab
+                                    );
+                                  } else {
+                                    console.log(
+                                      "[DEBUG] Condition failed - onNavigate:",
+                                      !!onNavigate,
+                                      "navigationPage.page:",
+                                      navigationPage.page
+                                    );
+                                  }
+                                },
+                                className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 transition-colors group cursor-pointer",
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-gray-100 rounded text-[10px] font-medium text-gray-600 group-hover:bg-gray-200", children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-2.5 w-2.5" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "+" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-2.5 w-2.5" })
+                                  ] }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                                    "View ",
+                                    pageLabel
+                                  ] })
+                                ]
+                              }
+                            ) })
+                          ]
+                        }
+                      )
+                    },
+                    message.id
+                  );
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(React4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                   "div",
                   {
-                    className: "h-full bg-blue-600 transition-all duration-300",
-                    style: { width: `${percentage}%` }
+                    ref: isCurrentGuideStep ? currentStepRef : null,
+                    className: `${isRoleChange ? "mt-3" : ""}`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm leading-6 text-gray-700", children: (() => {
+                        const text = message.content || "";
+                        if (message.kind === "guideStep") {
+                          const m = text.match(/^(Step\s+\d+:)([\s\S]*)/);
+                          if (m) {
+                            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: m[1] }),
+                              m[2]
+                            ] });
+                          }
+                        }
+                        if (message.role === "assistant" && text) {
+                          return renderMarkdown(text);
+                        }
+                        return text || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "opacity-70", children: "Thinking\u2026" });
+                      })() }),
+                      message.role === "assistant" && message.structuredData && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        DataRenderer,
+                        {
+                          type: message.structuredData.type,
+                          data: message.structuredData.data
+                        }
+                      ) }),
+                      message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        "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
+                      )) })
+                    ]
                   }
-                ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3 text-green-600" }),
-                    successes,
-                    " successful"
-                  ] }),
-                  failures > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
-                    failures,
-                    " 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_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `rounded-lg border p-3 ${hasFailures ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}` }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-4 text-xs", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-green-700", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3" }),
-                    successes,
-                    " successful"
-                  ] }),
-                  hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
-                    failures.length,
-                    " failed"
-                  ] })
-                ] }),
-                hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
-                    failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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_runtime9.jsxs)("div", { className: "text-xs text-amber-600", children: [
-                      "...and ",
-                      failures.length - 5,
-                      " more"
-                    ] })
-                  ] })
-                ] }),
-                navigationPage && successes > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                  "button",
+                ) }, message.id);
+              }),
+              (activeGuide || guideComplete) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
+                activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  Button,
                   {
                     type: "button",
-                    onClick: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      console.log("[DEBUG] Button clicked - navigationPage:", navigationPage, "onNavigate:", !!onNavigate);
-                      if (onNavigate && navigationPage.page) {
-                        console.log("[DEBUG] Calling onNavigate with page:", navigationPage.page);
-                        onNavigate(navigationPage.page, navigationPage.subtab);
-                      } else {
-                        console.log("[DEBUG] Condition failed - onNavigate:", !!onNavigate, "navigationPage.page:", navigationPage.page);
-                      }
-                    },
-                    className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 transition-colors group cursor-pointer",
+                    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_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsxs)("span", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-gray-100 rounded text-[10px] font-medium text-gray-600 group-hover:bg-gray-200", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-2.5 w-2.5" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "+" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-2.5 w-2.5" })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
-                        "View ",
-                        pageLabel
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: guideComplete ? "Done" : "Next" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
                       ] })
                     ]
                   }
-                ) })
-              ] }) }, message.id);
-            }
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(React4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-              "div",
-              {
-                ref: isCurrentGuideStep ? currentStepRef : null,
-                className: `${isRoleChange ? "mt-3" : ""}`,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm leading-6 text-gray-700", children: (() => {
-                    const text = message.content || "";
-                    if (message.kind === "guideStep") {
-                      const m = text.match(/^(Step\s+\d+:)([\s\S]*)/);
-                      if (m) {
-                        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: m[1] }),
-                          m[2]
-                        ] });
-                      }
-                    }
-                    if (message.role === "assistant" && text) {
-                      return renderMarkdown(text);
-                    }
-                    return text || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "opacity-70", children: "Thinking\u2026" });
-                  })() }),
-                  message.role === "assistant" && message.structuredData && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    DataRenderer,
-                    {
-                      type: message.structuredData.type,
-                      data: message.structuredData.data
-                    }
-                  ) }),
-                  message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => handleFollowupClick(message.id, followup),
-                      className: "inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-xl\n                                           bg-white hover:bg-gray-50 text-gray-600 hover:text-gray-800\n                                           border border-gray-200 hover:border-gray-300 shadow-sm\n                                           transition-all duration-150 ease-in-out",
-                      children: followup.label
-                    },
-                    followup.id
-                  )) })
-                ]
-              }
-            ) }, message.id);
-          }),
-          (activeGuide || guideComplete) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
-            activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("span", { children: guideComplete ? "Done" : "Next" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
-                  ] })
-                ]
-              }
-            )
-          ] }),
-          (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            AssistantActivity,
-            {
-              phase,
-              progressSteps
-            }
-          ) }),
-          !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: messagesEndRef })
-        ] }) }) }) }) }),
+                )
+              ] }),
+              (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                AssistantActivity,
+                {
+                  phase,
+                  progressSteps
+                }
+              ) }),
+              !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: messagesEndRef })
+            ] }) }) }) })
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-4 py-3 border-t border-gray-100 bg-gray-50/50 shrink-0", children: [
           pendingFile && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
@@ -3402,14 +3895,10 @@ ${userText}`
                 {
                   placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
                   value: input,
-                  onChange: (e) => setInput(e.target.value),
-                  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";
+                  onChange: (e) => {
+                    setInput(e.target.value);
+                    e.target.style.height = "24px";
+                    e.target.style.height = `${Math.min(120, e.target.scrollHeight)}px`;
                   },
                   onKeyDown: (e) => {
                     if (e.key === "Enter" && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
@@ -3479,7 +3968,11 @@ ${userText}`
     }
   );
 }
-function PanelToggle({ isOpen, onClick, className = "" }) {
+function PanelToggle({
+  isOpen,
+  onClick,
+  className = ""
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "button",
     {
@@ -3525,13 +4018,7 @@ function ChatPanelWithToggle({
     };
   }, [isOpen]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      PanelToggle,
-      {
-        isOpen,
-        onClick: () => setIsOpen(!isOpen)
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PanelToggle, { isOpen, onClick: () => setIsOpen(!isOpen) }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ChatPanel,
       {