@kite-copilot/chat-panel 0.2.0 → 0.2.2

package/dist/{chunk-DN7P5ZFR.js → chunk-R73Y24JS.js}

@@ -883,9 +883,10 @@ function DataRenderer({ type, data }) {
 
 // src/ChatPanel.tsx
 import * as React4 from "react";
-import { ArrowLeft, ArrowUp, Play, Command, CornerDownLeft, CheckCircle2 as CheckCircle23, SquarePen, Paperclip, X, FileSpreadsheet, Loader2 as Loader22, ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
+import { ArrowLeft, ArrowUp, Play, Command, CornerDownLeft, CheckCircle2 as CheckCircle23, SquarePen, Paperclip, X, FileSpreadsheet, Loader2 as Loader22, ChevronLeft, ChevronRight } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_AGENT_URL = "http://localhost:5002";
+var PANEL_WIDTH = 400;
 function renderMarkdown(text) {
   if (!text) return null;
   const lines = text.split("\n");
@@ -1014,6 +1015,26 @@ function renderMarkdown(text) {
   flushList();
   return /* @__PURE__ */ jsx9(Fragment2, { children: elements });
 }
+var defaultStartingQuestions = [
+  {
+    id: "changing-layouts",
+    label: "Changing layouts",
+    prompt: "How can I customize and change the layout of my dashboard?",
+    icon: "layout"
+  },
+  {
+    id: "bulk-uploads",
+    label: "Bulk uploads",
+    prompt: "How do I perform bulk uploads of data using CSV files?",
+    icon: "upload"
+  },
+  {
+    id: "example-setups",
+    label: "Example setups",
+    prompt: "Can you show me some example configurations and setups?",
+    icon: "setup"
+  }
+];
 var folders = [
   {
     id: "customers",
@@ -1177,11 +1198,15 @@ var guides = {
 };
 var initialMessages = [];
 function ChatPanel({
+  isOpen = true,
+  onClose,
   onBack,
   onNavigate,
   onActionComplete,
   currentPage,
-  agentUrl = DEFAULT_AGENT_URL
+  agentUrl = DEFAULT_AGENT_URL,
+  startingQuestions: startingQuestionsProp,
+  startingQuestionsEndpoint
 } = {}) {
   const [messages, setMessages] = React4.useState(initialMessages);
   const [input, setInput] = React4.useState("");
@@ -1194,6 +1219,27 @@ function ChatPanel({
   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 [loadingQuestions, setLoadingQuestions] = React4.useState(false);
+  React4.useEffect(() => {
+    if (startingQuestionsEndpoint && !startingQuestionsProp) {
+      setLoadingQuestions(true);
+      fetch(startingQuestionsEndpoint).then((res) => res.json()).then((data) => {
+        if (Array.isArray(data) && data.length > 0) {
+          setStartingQuestions(data);
+        }
+      }).catch((err) => {
+        console.warn("[KiteChat] Failed to fetch starting questions:", err);
+      }).finally(() => setLoadingQuestions(false));
+    }
+  }, [startingQuestionsEndpoint, startingQuestionsProp]);
+  React4.useEffect(() => {
+    if (startingQuestionsProp) {
+      setStartingQuestions(startingQuestionsProp);
+    }
+  }, [startingQuestionsProp]);
   const [activeGuide, setActiveGuide] = React4.useState(void 0);
   const activeGuideRef = React4.useRef(void 0);
   const latestBulkSummaryNavigationRef = React4.useRef(null);
@@ -1246,7 +1292,6 @@ function ChatPanel({
   const { cursorState, moveTo, hide } = useGuideCursor();
   const [pendingFile, setPendingFile] = React4.useState(null);
   const [pendingBulkSession, setPendingBulkSession] = React4.useState(null);
-  const [isCollapsed, setIsCollapsed] = React4.useState(false);
   const pendingBulkSessionRef = React4.useRef(null);
   const fileInputRef = React4.useRef(null);
   React4.useEffect(() => {
@@ -2297,1119 +2342,1157 @@ ${userText}`
       ]);
     }
   }
-  return /* @__PURE__ */ jsxs5("section", { className: `fixed bottom-6 right-6 z-50 flex flex-col bg-white rounded-2xl shadow-2xl border border-gray-200/80 w-[400px] overflow-hidden transition-all duration-300 ${isCollapsed ? "h-12" : "h-[calc(100vh-48px)]"}`, children: [
-    /* @__PURE__ */ jsxs5(
-      "div",
-      {
-        className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white cursor-pointer shrink-0",
-        onClick: () => setIsCollapsed(!isCollapsed),
-        children: [
-          /* @__PURE__ */ jsx9("h3", { className: "text-sm font-semibold text-gray-800", children: "Copilot" }),
-          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
-            !isCollapsed && /* @__PURE__ */ jsx9(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setMessages([]);
-                  setPanelView("landing");
-                  setCurrentFolderId(void 0);
-                  setActiveGuide(void 0);
-                  activeGuideRef.current = void 0;
-                  setGuideComplete(false);
-                },
-                children: /* @__PURE__ */ jsx9(SquarePen, { className: "h-3.5 w-3.5" })
-              }
-            ),
-            /* @__PURE__ */ jsx9(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setIsCollapsed(!isCollapsed);
-                },
-                children: isCollapsed ? /* @__PURE__ */ jsx9(ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx9(ChevronDown2, { className: "h-4 w-4" })
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    !isCollapsed && /* @__PURE__ */ jsx9("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__ */ jsxs5("div", { className: "w-full overflow-y-auto px-4", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "py-4 transition-all duration-300", children: [
-        /* @__PURE__ */ jsx9("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__ */ jsx9("p", { className: "mt-1 text-center text-xs text-gray-500", children: "Ask me anything about your account" })
-      ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "pb-4", children: [
-        panelView === "landing" && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-          /* @__PURE__ */ jsx9("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Quick Start" }),
-          /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs5(
+    "section",
+    {
+      className: `fixed top-0 right-0 z-40 flex flex-col bg-white border-l border-gray-200 h-full overflow-hidden transition-transform duration-300 ${isOpen ? "translate-x-0" : "translate-x-full"}`,
+      style: { width: `${PANEL_WIDTH}px` },
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0", children: [
+          /* @__PURE__ */ jsx9("h3", { className: "text-sm font-semibold text-gray-800", children: "Help" }),
+          /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsx9(
             Button,
             {
-              type: "button",
+              variant: "ghost",
               size: "sm",
-              variant: "secondary",
-              className: "w-full justify-start rounded-xl border border-primary/20 bg-primary/5 px-3 py-2.5 text-xs font-medium text-primary shadow-none transition-all hover:bg-primary/10 hover:border-primary/30 h-auto mb-4",
-              onClick: () => startGuide("getting-started"),
-              children: [
-                /* @__PURE__ */ jsx9(Play, { className: "mr-2 h-3.5 w-3.5" }),
-                "Getting started"
-              ]
+              className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
+              onClick: () => {
+                setMessages([]);
+                setPanelView("landing");
+                setCurrentFolderId(void 0);
+                setActiveGuide(void 0);
+                activeGuideRef.current = void 0;
+                setGuideComplete(false);
+              },
+              children: /* @__PURE__ */ jsx9(SquarePen, { className: "h-3.5 w-3.5" })
             }
-          ),
-          /* @__PURE__ */ jsx9("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Topics" }),
-          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsxs5(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                variant: "ghost",
-                className: "w-full justify-start rounded-lg px-3 py-2 text-xs text-gray-700 hover:bg-gray-100 h-auto",
-                onClick: () => openFolder("customers"),
-                children: [
-                  /* @__PURE__ */ jsx9("span", { className: "mr-2 inline-block h-1.5 w-1.5 rounded-full bg-blue-400" }),
-                  "Customer Management"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs5(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                variant: "ghost",
-                className: "w-full justify-start rounded-lg px-3 py-2 text-xs text-gray-700 hover:bg-gray-100 h-auto",
-                onClick: () => openFolder("payments"),
-                children: [
-                  /* @__PURE__ */ jsx9("span", { className: "mr-2 inline-block h-1.5 w-1.5 rounded-full bg-green-400" }),
-                  "Payment Processing"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs5(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                variant: "ghost",
-                className: "w-full justify-start rounded-lg px-3 py-2 text-xs text-gray-700 hover:bg-gray-100 h-auto",
-                onClick: () => openFolder("billing"),
-                children: [
-                  /* @__PURE__ */ jsx9("span", { className: "mr-2 inline-block h-1.5 w-1.5 rounded-full bg-purple-400" }),
-                  "Billing"
-                ]
-              }
-            )
-          ] })
+          ) })
         ] }),
-        panelView === "folder" && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-          /* @__PURE__ */ jsxs5("div", { className: "mb-3 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx9(
-              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__ */ jsx9(ArrowLeft, { className: "h-4 w-4 text-gray-500" })
-              }
-            ),
-            /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
+        /* @__PURE__ */ jsx9("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__ */ jsxs5("div", { className: "w-full overflow-y-auto px-4", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "py-4 transition-all duration-300", children: [
+            /* @__PURE__ */ jsx9("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__ */ jsx9("p", { className: "mt-1 text-center text-xs text-gray-500", children: "Ask me anything about your account" })
           ] }),
-          /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-1.5", children: folders.find((f) => f.id === currentFolderId)?.topics.map((topic) => /* @__PURE__ */ jsx9(
-            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__ */ jsx9(Fragment2, { children: /* @__PURE__ */ jsx9("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx9(ScrollArea, { ref: messagesContainerRef, className: "h-full", children: /* @__PURE__ */ jsxs5("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__ */ jsx9("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9("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__ */ jsx9("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9(AssistantSearchSummary, { title: message.title ?? "Search results", links: message.links ?? [] }) }, message.id);
-        }
-        if (message.kind === "guideComplete") {
-          return /* @__PURE__ */ jsx9(
-            "div",
-            {
-              ref: isCurrentGuideStep ? currentStepRef : null,
-              className: `${isRoleChange ? "mt-3" : ""}`,
-              children: /* @__PURE__ */ jsxs5("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__ */ jsx9(CheckCircle23, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
-                /* @__PURE__ */ jsx9("span", { className: "font-medium text-green-800", children: message.content })
-              ] })
-            },
-            message.id
-          );
-        }
-        if (message.kind === "navigationAction") {
-          return /* @__PURE__ */ jsxs5("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
-            /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-2 text-gray-700", children: message.content || "" }),
-            message.navigationTarget && /* @__PURE__ */ jsx9("div", { className: "mt-2", children: /* @__PURE__ */ jsxs5(
-              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__ */ jsx9("span", { children: "Confirm" }),
-                  /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                    /* @__PURE__ */ jsx9(Command, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ jsx9(CornerDownLeft, { className: "h-3 w-3" })
-                  ] })
-                ]
+          /* @__PURE__ */ jsxs5("div", { className: "pb-4", children: [
+            panelView === "landing" && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+              /* @__PURE__ */ jsx9("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Quick Start" }),
+              /* @__PURE__ */ jsxs5(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "secondary",
+                  className: "w-full justify-start rounded-xl border border-primary/20 bg-primary/5 px-3 py-2.5 text-xs font-medium text-primary shadow-none transition-all hover:bg-primary/10 hover:border-primary/30 h-auto mb-4",
+                  onClick: () => startGuide("getting-started"),
+                  children: [
+                    /* @__PURE__ */ jsx9(Play, { className: "mr-2 h-3.5 w-3.5" }),
+                    "Getting started"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx9("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Suggested Questions" }),
+              /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx9(Loader22, { 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__ */ jsxs5(
+                  Button,
+                  {
+                    type: "button",
+                    size: "sm",
+                    variant: "ghost",
+                    className: "w-full justify-start rounded-lg px-3 py-2 text-xs text-gray-700 hover:bg-gray-100 h-auto",
+                    onClick: () => sendTopic(question.prompt),
+                    children: [
+                      /* @__PURE__ */ jsx9("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__ */ jsxs5(Fragment2, { children: [
+              /* @__PURE__ */ jsxs5("div", { className: "mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx9(
+                  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__ */ jsx9(ArrowLeft, { className: "h-4 w-4 text-gray-500" })
+                  }
+                ),
+                /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
+              ] }),
+              /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-1.5", children: folders.find((f) => f.id === currentFolderId)?.topics.map((topic) => /* @__PURE__ */ jsx9(
+                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__ */ jsx9(Fragment2, { children: /* @__PURE__ */ jsx9("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx9(ScrollArea, { ref: messagesContainerRef, className: "h-full", children: /* @__PURE__ */ jsxs5("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;
               }
-            ) })
-          ] }, 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.";
+            } else if (message.kind === "guideComplete") {
+              isCurrentGuideStep = index === messages.length - 1;
             }
-            return /* @__PURE__ */ jsx9("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent }) }, message.id);
-          }
-          return /* @__PURE__ */ jsxs5("div", { className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`, children: [
-            /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
-            actionType === "updateCompanyInfo" && /* @__PURE__ */ jsxs5("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
-              /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ jsxs5("div", { children: [
-                  /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
-                  /* @__PURE__ */ jsx9(
-                    Input,
-                    {
-                      placeholder: "Acme Corporation",
-                      value: formData.companyName || "",
-                      onChange: (e) => setActionFormData({ ...actionFormData, companyName: e.target.value }),
-                      className: "h-8 text-xs border-gray-200"
-                    }
-                  )
+            if (message.kind === "guideStep" && !isCurrentGuideStep) {
+              return null;
+            }
+            if (isUser) {
+              return /* @__PURE__ */ jsx9("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9("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__ */ jsx9("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9(AssistantSearchSummary, { title: message.title ?? "Search results", links: message.links ?? [] }) }, message.id);
+            }
+            if (message.kind === "guideComplete") {
+              return /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  ref: isCurrentGuideStep ? currentStepRef : null,
+                  className: `${isRoleChange ? "mt-3" : ""}`,
+                  children: /* @__PURE__ */ jsxs5("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__ */ jsx9(CheckCircle23, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
+                    /* @__PURE__ */ jsx9("span", { className: "font-medium text-green-800", children: message.content })
+                  ] })
+                },
+                message.id
+              );
+            }
+            if (message.kind === "navigationAction") {
+              return /* @__PURE__ */ jsxs5("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
+                /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-2 text-gray-700", children: message.content || "" }),
+                message.navigationTarget && /* @__PURE__ */ jsx9("div", { className: "mt-2", children: /* @__PURE__ */ jsxs5(
+                  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__ */ jsx9("span", { children: "Confirm" }),
+                      /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                        /* @__PURE__ */ jsx9(Command, { className: "h-3 w-3" }),
+                        /* @__PURE__ */ jsx9(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__ */ jsx9("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent }) }, message.id);
+              }
+              return /* @__PURE__ */ jsxs5("div", { className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`, children: [
+                /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
+                actionType === "updateCompanyInfo" && /* @__PURE__ */ jsxs5("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
+                  /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-2", children: [
+                    /* @__PURE__ */ jsxs5("div", { children: [
+                      /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
+                      /* @__PURE__ */ jsx9(
+                        Input,
+                        {
+                          placeholder: "Acme Corporation",
+                          value: formData.companyName || "",
+                          onChange: (e) => setActionFormData({ ...actionFormData, companyName: e.target.value }),
+                          className: "h-8 text-xs border-gray-200"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs5("div", { children: [
+                      /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
+                      /* @__PURE__ */ jsx9(
+                        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__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Address" }),
+                    /* @__PURE__ */ jsx9(
+                      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__ */ jsxs5("div", { className: "grid grid-cols-2 gap-2", children: [
+                    /* @__PURE__ */ jsxs5("div", { children: [
+                      /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Phone" }),
+                      /* @__PURE__ */ jsx9(
+                        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__ */ jsxs5("div", { children: [
+                      /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
+                      /* @__PURE__ */ jsx9(
+                        Input,
+                        {
+                          type: "url",
+                          placeholder: "https://acme.com",
+                          value: formData.website || "",
+                          onChange: (e) => setActionFormData({ ...actionFormData, website: e.target.value }),
+                          className: "h-8 text-xs border-gray-200"
+                        }
+                      )
+                    ] })
+                  ] })
                 ] }),
-                /* @__PURE__ */ jsxs5("div", { children: [
-                  /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
+                actionType === "addApiKey" && /* @__PURE__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name" }),
                   /* @__PURE__ */ jsx9(
                     Input,
                     {
-                      type: "email",
-                      placeholder: "contact@acme.com",
-                      value: formData.email || "",
-                      onChange: (e) => setActionFormData({ ...actionFormData, email: e.target.value }),
+                      placeholder: "Production Key",
+                      value: formData.name || "",
+                      onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
                       className: "h-8 text-xs border-gray-200"
                     }
                   )
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Address" }),
-                /* @__PURE__ */ jsx9(
-                  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__ */ jsxs5("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ jsxs5("div", { children: [
-                  /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Phone" }),
-                  /* @__PURE__ */ jsx9(
-                    Input,
+                ] }) }),
+                actionType === "addCustomer" && /* @__PURE__ */ jsxs5("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
+                  /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-2", children: [
+                    /* @__PURE__ */ jsxs5("div", { children: [
+                      /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
+                      /* @__PURE__ */ jsx9(
+                        Input,
+                        {
+                          placeholder: "Acme Corporation",
+                          value: formData.name || "",
+                          onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
+                          className: "h-8 text-xs border-gray-200"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs5("div", { children: [
+                      /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
+                      /* @__PURE__ */ jsx9(
+                        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__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Location" }),
+                    /* @__PURE__ */ jsx9(
+                      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__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Subscription Tier" }),
+                    /* @__PURE__ */ jsxs5(
+                      "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__ */ jsx9("option", { value: "Starter", children: "Starter" }),
+                          /* @__PURE__ */ jsx9("option", { value: "Professional", children: "Professional" }),
+                          /* @__PURE__ */ jsx9("option", { value: "Enterprise", children: "Enterprise" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                (actionType === "enable2FA" || actionType === "disable2FA") && /* @__PURE__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsx9("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__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Current Password" }),
+                    /* @__PURE__ */ jsx9(
+                      Input,
+                      {
+                        type: "password",
+                        value: formData.currentPassword || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, currentPassword: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "New Password" }),
+                    /* @__PURE__ */ jsx9(
+                      Input,
+                      {
+                        type: "password",
+                        value: formData.newPassword || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, newPassword: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Confirm New Password" }),
+                    /* @__PURE__ */ jsx9(
+                      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__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Notification Type" }),
+                    /* @__PURE__ */ jsxs5(
+                      "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__ */ jsx9("option", { value: "paymentReceived", children: "Payment Received" }),
+                          /* @__PURE__ */ jsx9("option", { value: "paymentFailed", children: "Payment Failed" }),
+                          /* @__PURE__ */ jsx9("option", { value: "invoicePaid", children: "Invoice Paid" }),
+                          /* @__PURE__ */ jsx9("option", { value: "monthlySummary", children: "Monthly Summary" }),
+                          /* @__PURE__ */ jsx9("option", { value: "productUpdates", children: "Product Updates" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx9(
+                      "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__ */ jsx9("label", { className: "text-xs text-black", children: "Enable this notification" })
+                  ] })
+                ] }),
+                (actionType === "connectIntegration" || actionType === "disconnectIntegration") && /* @__PURE__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Integration" }),
+                  /* @__PURE__ */ jsxs5(
+                    "select",
                     {
-                      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"
+                      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__ */ jsx9("option", { value: "Slack", children: "Slack" }),
+                        /* @__PURE__ */ jsx9("option", { value: "Zapier", children: "Zapier" }),
+                        /* @__PURE__ */ jsx9("option", { value: "Webhook", children: "Webhook" })
+                      ]
                     }
                   )
+                ] }) }),
+                actionType === "addPaymentMethod" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Card Number" }),
+                    /* @__PURE__ */ jsx9(
+                      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__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Expiry Date" }),
+                    /* @__PURE__ */ jsx9(
+                      Input,
+                      {
+                        placeholder: "MM/YY",
+                        value: formData.expiryDate || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, expiryDate: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] })
                 ] }),
-                /* @__PURE__ */ jsxs5("div", { children: [
-                  /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
-                  /* @__PURE__ */ jsx9(
-                    Input,
+                actionType === "removePaymentMethod" && /* @__PURE__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsx9("p", { className: "text-xs text-black", children: "This will remove the default payment method from your account." }) }),
+                actionType === "refundPayment" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Transaction ID or Customer Name" }),
+                    /* @__PURE__ */ jsx9(
+                      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__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Amount (optional)" }),
+                    /* @__PURE__ */ jsx9(
+                      Input,
+                      {
+                        placeholder: "$0.00",
+                        value: formData.amount || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, amount: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Reason (optional)" }),
+                    /* @__PURE__ */ jsx9(
+                      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__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name or ID" }),
+                    /* @__PURE__ */ jsx9(
+                      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__ */ jsx9("p", { className: "text-xs text-red-600", children: "Warning: This action cannot be undone. The API key will be permanently deleted." })
+                ] }),
+                actionType === "addWebhook" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Webhook URL" }),
+                    /* @__PURE__ */ jsx9(
+                      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__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Name (optional)" }),
+                    /* @__PURE__ */ jsx9(
+                      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__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Currency" }),
+                  /* @__PURE__ */ jsxs5(
+                    "select",
                     {
-                      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"
+                      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__ */ jsx9("option", { value: "USD", children: "USD ($)" }),
+                        /* @__PURE__ */ jsx9("option", { value: "EUR", children: "EUR (\u20AC)" }),
+                        /* @__PURE__ */ jsx9("option", { value: "GBP", children: "GBP (\xA3)" }),
+                        /* @__PURE__ */ jsx9("option", { value: "JPY", children: "JPY (\xA5)" })
+                      ]
                     }
                   )
-                ] })
-              ] })
-            ] }),
-            actionType === "addApiKey" && /* @__PURE__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsxs5("div", { children: [
-              /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name" }),
-              /* @__PURE__ */ jsx9(
-                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__ */ jsxs5("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
-              /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ jsxs5("div", { children: [
-                  /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
-                  /* @__PURE__ */ jsx9(
-                    Input,
+                ] }) }),
+                actionType === "updateTimezone" && /* @__PURE__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Timezone" }),
+                  /* @__PURE__ */ jsxs5(
+                    "select",
                     {
-                      placeholder: "Acme Corporation",
-                      value: formData.name || "",
-                      onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
-                      className: "h-8 text-xs border-gray-200"
+                      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__ */ jsx9("option", { value: "America/Los_Angeles", children: "Pacific Time (PT)" }),
+                        /* @__PURE__ */ jsx9("option", { value: "America/New_York", children: "Eastern Time (ET)" }),
+                        /* @__PURE__ */ jsx9("option", { value: "Europe/London", children: "GMT" }),
+                        /* @__PURE__ */ jsx9("option", { value: "Asia/Tokyo", children: "JST" })
+                      ]
                     }
                   )
+                ] }) }),
+                actionType === "revokeSession" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Device/Session" }),
+                    /* @__PURE__ */ jsx9(
+                      Input,
+                      {
+                        placeholder: "MacBook Pro",
+                        value: formData.device || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, device: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx9("p", { className: "text-xs text-black", children: "This will sign out the device and invalidate its session." })
+                ] }),
+                actionType === "createSubscription" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Customer Email" }),
+                    /* @__PURE__ */ jsx9(
+                      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__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Plan" }),
+                    /* @__PURE__ */ jsxs5(
+                      "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__ */ jsx9("option", { value: "Starter", children: "Starter ($29/mo)" }),
+                          /* @__PURE__ */ jsx9("option", { value: "Professional", children: "Professional ($99/mo)" }),
+                          /* @__PURE__ */ jsx9("option", { value: "Enterprise", children: "Enterprise ($299/mo)" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Billing Cycle" }),
+                    /* @__PURE__ */ jsxs5(
+                      "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__ */ jsx9("option", { value: "monthly", children: "Monthly" }),
+                          /* @__PURE__ */ jsx9("option", { value: "yearly", children: "Yearly (Save 15%)" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                actionType === "exportCertificate" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ jsx9("p", { className: "text-xs text-black", children: "This will export your certificate of incorporation document." }),
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Format" }),
+                    /* @__PURE__ */ jsxs5(
+                      "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__ */ jsx9("option", { value: "pdf", children: "PDF" }),
+                          /* @__PURE__ */ jsx9("option", { value: "json", children: "JSON" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Block Rule" }),
+                    /* @__PURE__ */ jsxs5(
+                      "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__ */ jsx9("option", { value: "rule_1", children: "Block if risk level = 'highest'" }),
+                          /* @__PURE__ */ jsx9("option", { value: "rule_2", children: "Block if matches Stripe block lists" }),
+                          /* @__PURE__ */ jsx9("option", { value: "rule_3", children: "Block if CVC verification fails" }),
+                          /* @__PURE__ */ jsx9("option", { value: "rule_4", children: "Block if Postal code verification fails" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx9("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__ */ jsxs5("div", { children: [
-                  /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
+                /* @__PURE__ */ jsx9("div", { className: "mt-3", children: /* @__PURE__ */ jsxs5(
+                  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__ */ jsx9("span", { children: "Confirm" }),
+                      /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                        /* @__PURE__ */ jsx9(Command, { className: "h-3 w-3" }),
+                        /* @__PURE__ */ jsx9(CornerDownLeft, { className: "h-3 w-3" })
+                      ] })
+                    ]
+                  }
+                ) })
+              ] }, message.id);
+            }
+            if (message.kind === "bulkPreview" && message.csvData) {
+              return /* @__PURE__ */ jsxs5("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
+                /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
+                /* @__PURE__ */ jsxs5("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
+                  /* @__PURE__ */ jsxs5("div", { className: "bg-gray-100 px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx9(FileSpreadsheet, { className: "h-4 w-4 text-gray-600" }),
+                    /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
+                    /* @__PURE__ */ jsxs5("span", { className: "text-xs text-gray-500", children: [
+                      "\u2022 ",
+                      message.csvData.rowCount,
+                      " rows"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs5("div", { className: "px-3 py-2 border-b border-gray-100", children: [
+                    /* @__PURE__ */ jsx9("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Columns" }),
+                    /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap gap-1", children: message.csvData.columns.map((col, i) => /* @__PURE__ */ jsx9("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__ */ jsxs5("div", { className: "px-3 py-2", children: [
+                    /* @__PURE__ */ jsx9("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Sample Data" }),
+                    /* @__PURE__ */ jsx9("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ jsxs5("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__ */ jsxs5("span", { children: [
+                        j > 0 && " \u2022 ",
+                        /* @__PURE__ */ jsxs5("span", { className: "text-gray-400", children: [
+                          key,
+                          ":"
+                        ] }),
+                        " ",
+                        val
+                      ] }, key)),
+                      Object.keys(row).length > 3 && /* @__PURE__ */ jsx9("span", { className: "text-gray-400", children: " ..." })
+                    ] }, i)) })
+                  ] }),
+                  message.suggestedAction && /* @__PURE__ */ jsx9("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ jsxs5("span", { className: "text-xs text-blue-700", children: [
+                    "Suggested action: ",
+                    /* @__PURE__ */ jsx9("strong", { children: message.suggestedAction.replace(/_/g, " ") })
+                  ] }) })
+                ] }),
+                message.bulkSessionId && /* @__PURE__ */ jsxs5("div", { className: "mt-3 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs5(
+                    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__ */ jsxs5("span", { children: [
+                          "Process ",
+                          message.csvData.rowCount,
+                          " rows"
+                        ] }),
+                        /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                          /* @__PURE__ */ jsx9(Command, { className: "h-3 w-3" }),
+                          /* @__PURE__ */ jsx9(CornerDownLeft, { className: "h-3 w-3" })
+                        ] })
+                      ]
+                    }
+                  ),
                   /* @__PURE__ */ jsx9(
-                    Input,
+                    Button,
                     {
-                      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"
+                      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__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Location" }),
-                /* @__PURE__ */ jsx9(
-                  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__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Subscription Tier" }),
-                /* @__PURE__ */ jsxs5(
-                  "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__ */ jsx9("option", { value: "Starter", children: "Starter" }),
-                      /* @__PURE__ */ jsx9("option", { value: "Professional", children: "Professional" }),
-                      /* @__PURE__ */ jsx9("option", { value: "Enterprise", children: "Enterprise" })
-                    ]
-                  }
-                )
-              ] })
-            ] }),
-            (actionType === "enable2FA" || actionType === "disable2FA") && /* @__PURE__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsx9("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__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Current Password" }),
-                /* @__PURE__ */ jsx9(
-                  Input,
-                  {
-                    type: "password",
-                    value: formData.currentPassword || "",
-                    onChange: (e) => setActionFormData({ ...actionFormData, currentPassword: e.target.value }),
-                    className: "h-8 text-xs border-gray-200"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "New Password" }),
-                /* @__PURE__ */ jsx9(
-                  Input,
-                  {
-                    type: "password",
-                    value: formData.newPassword || "",
-                    onChange: (e) => setActionFormData({ ...actionFormData, newPassword: e.target.value }),
-                    className: "h-8 text-xs border-gray-200"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Confirm New Password" }),
-                /* @__PURE__ */ jsx9(
-                  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__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Notification Type" }),
-                /* @__PURE__ */ jsxs5(
-                  "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__ */ jsx9("option", { value: "paymentReceived", children: "Payment Received" }),
-                      /* @__PURE__ */ jsx9("option", { value: "paymentFailed", children: "Payment Failed" }),
-                      /* @__PURE__ */ jsx9("option", { value: "invoicePaid", children: "Invoice Paid" }),
-                      /* @__PURE__ */ jsx9("option", { value: "monthlySummary", children: "Monthly Summary" }),
-                      /* @__PURE__ */ jsx9("option", { value: "productUpdates", children: "Product Updates" })
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx9(
-                  "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__ */ jsx9("label", { className: "text-xs text-black", children: "Enable this notification" })
-              ] })
-            ] }),
-            (actionType === "connectIntegration" || actionType === "disconnectIntegration") && /* @__PURE__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsxs5("div", { children: [
-              /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Integration" }),
-              /* @__PURE__ */ jsxs5(
-                "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__ */ jsx9("option", { value: "Slack", children: "Slack" }),
-                    /* @__PURE__ */ jsx9("option", { value: "Zapier", children: "Zapier" }),
-                    /* @__PURE__ */ jsx9("option", { value: "Webhook", children: "Webhook" })
-                  ]
-                }
-              )
-            ] }) }),
-            actionType === "addPaymentMethod" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Card Number" }),
-                /* @__PURE__ */ jsx9(
-                  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__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Expiry Date" }),
-                /* @__PURE__ */ jsx9(
-                  Input,
+              ] }, message.id);
+            }
+            if (message.kind === "bulkProgress" && message.bulkProgress) {
+              const { processed, total, successes, failures } = message.bulkProgress;
+              const percentage = Math.round(processed / total * 100);
+              return /* @__PURE__ */ jsx9("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsxs5("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
+                /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 mb-2", children: [
+                  /* @__PURE__ */ jsx9(Loader22, { className: "h-4 w-4 animate-spin text-blue-600" }),
+                  /* @__PURE__ */ jsxs5("span", { className: "text-sm font-medium text-gray-700", children: [
+                    "Processing... ",
+                    processed,
+                    " of ",
+                    total
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx9("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ jsx9(
+                  "div",
                   {
-                    placeholder: "MM/YY",
-                    value: formData.expiryDate || "",
-                    onChange: (e) => setActionFormData({ ...actionFormData, expiryDate: e.target.value }),
-                    className: "h-8 text-xs border-gray-200"
+                    className: "h-full bg-blue-600 transition-all duration-300",
+                    style: { width: `${percentage}%` }
                   }
-                )
-              ] })
-            ] }),
-            actionType === "removePaymentMethod" && /* @__PURE__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsx9("p", { className: "text-xs text-black", children: "This will remove the default payment method from your account." }) }),
-            actionType === "refundPayment" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Transaction ID or Customer Name" }),
-                /* @__PURE__ */ jsx9(
-                  Input,
+                ) }),
+                /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
+                  /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx9(CheckCircle23, { className: "h-3 w-3 text-green-600" }),
+                    successes,
+                    " successful"
+                  ] }),
+                  failures > 0 && /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-1 text-red-600", children: [
+                    /* @__PURE__ */ jsx9(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__ */ jsx9("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsxs5("div", { className: `rounded-lg border p-3 ${hasFailures ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`, children: [
+                /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 mb-2", children: [
+                  /* @__PURE__ */ jsx9(CheckCircle23, { className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}` }),
+                  /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
+                ] }),
+                /* @__PURE__ */ jsx9("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
+                /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-4 text-xs", children: [
+                  /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-1 text-green-700", children: [
+                    /* @__PURE__ */ jsx9(CheckCircle23, { className: "h-3 w-3" }),
+                    successes,
+                    " successful"
+                  ] }),
+                  hasFailures && /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-1 text-red-600", children: [
+                    /* @__PURE__ */ jsx9(X, { className: "h-3 w-3" }),
+                    failures.length,
+                    " failed"
+                  ] })
+                ] }),
+                hasFailures && /* @__PURE__ */ jsxs5("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
+                  /* @__PURE__ */ jsx9("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
+                  /* @__PURE__ */ jsxs5("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
+                    failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ jsxs5("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__ */ jsxs5("div", { className: "text-xs text-amber-600", children: [
+                      "...and ",
+                      failures.length - 5,
+                      " more"
+                    ] })
+                  ] })
+                ] }),
+                navigationPage && successes > 0 && /* @__PURE__ */ jsx9("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ jsxs5(
+                  "button",
                   {
-                    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 });
+                    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 {
-                        setActionFormData({ ...actionFormData, customer: value, transactionId: void 0 });
+                        console.log("[DEBUG] Condition failed - onNavigate:", !!onNavigate, "navigationPage.page:", navigationPage.page);
                       }
                     },
-                    className: "h-8 text-xs border-gray-200"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Amount (optional)" }),
-                /* @__PURE__ */ jsx9(
-                  Input,
-                  {
-                    placeholder: "$0.00",
-                    value: formData.amount || "",
-                    onChange: (e) => setActionFormData({ ...actionFormData, amount: e.target.value }),
-                    className: "h-8 text-xs border-gray-200"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Reason (optional)" }),
-                /* @__PURE__ */ jsx9(
-                  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__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name or ID" }),
-                /* @__PURE__ */ jsx9(
-                  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__ */ jsx9("p", { className: "text-xs text-red-600", children: "Warning: This action cannot be undone. The API key will be permanently deleted." })
-            ] }),
-            actionType === "addWebhook" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Webhook URL" }),
-                /* @__PURE__ */ jsx9(
-                  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__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Name (optional)" }),
-                /* @__PURE__ */ jsx9(
-                  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__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsxs5("div", { children: [
-              /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Currency" }),
-              /* @__PURE__ */ jsxs5(
-                "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__ */ jsx9("option", { value: "USD", children: "USD ($)" }),
-                    /* @__PURE__ */ jsx9("option", { value: "EUR", children: "EUR (\u20AC)" }),
-                    /* @__PURE__ */ jsx9("option", { value: "GBP", children: "GBP (\xA3)" }),
-                    /* @__PURE__ */ jsx9("option", { value: "JPY", children: "JPY (\xA5)" })
-                  ]
-                }
-              )
-            ] }) }),
-            actionType === "updateTimezone" && /* @__PURE__ */ jsx9("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ jsxs5("div", { children: [
-              /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Timezone" }),
-              /* @__PURE__ */ jsxs5(
-                "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__ */ jsx9("option", { value: "America/Los_Angeles", children: "Pacific Time (PT)" }),
-                    /* @__PURE__ */ jsx9("option", { value: "America/New_York", children: "Eastern Time (ET)" }),
-                    /* @__PURE__ */ jsx9("option", { value: "Europe/London", children: "GMT" }),
-                    /* @__PURE__ */ jsx9("option", { value: "Asia/Tokyo", children: "JST" })
-                  ]
-                }
-              )
-            ] }) }),
-            actionType === "revokeSession" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Device/Session" }),
-                /* @__PURE__ */ jsx9(
-                  Input,
-                  {
-                    placeholder: "MacBook Pro",
-                    value: formData.device || "",
-                    onChange: (e) => setActionFormData({ ...actionFormData, device: e.target.value }),
-                    className: "h-8 text-xs border-gray-200"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx9("p", { className: "text-xs text-black", children: "This will sign out the device and invalidate its session." })
-            ] }),
-            actionType === "createSubscription" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Customer Email" }),
-                /* @__PURE__ */ jsx9(
-                  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__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Plan" }),
-                /* @__PURE__ */ jsxs5(
-                  "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__ */ jsx9("option", { value: "Starter", children: "Starter ($29/mo)" }),
-                      /* @__PURE__ */ jsx9("option", { value: "Professional", children: "Professional ($99/mo)" }),
-                      /* @__PURE__ */ jsx9("option", { value: "Enterprise", children: "Enterprise ($299/mo)" })
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Billing Cycle" }),
-                /* @__PURE__ */ jsxs5(
-                  "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",
+                    className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 transition-colors group cursor-pointer",
                     children: [
-                      /* @__PURE__ */ jsx9("option", { value: "monthly", children: "Monthly" }),
-                      /* @__PURE__ */ jsx9("option", { value: "yearly", children: "Yearly (Save 15%)" })
+                      /* @__PURE__ */ jsxs5("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__ */ jsx9(Command, { className: "h-2.5 w-2.5" }),
+                        /* @__PURE__ */ jsx9("span", { children: "+" }),
+                        /* @__PURE__ */ jsx9(CornerDownLeft, { className: "h-2.5 w-2.5" })
+                      ] }),
+                      /* @__PURE__ */ jsxs5("span", { children: [
+                        "View ",
+                        pageLabel
+                      ] })
                     ]
                   }
-                )
-              ] })
-            ] }),
-            actionType === "exportCertificate" && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-              /* @__PURE__ */ jsx9("p", { className: "text-xs text-black", children: "This will export your certificate of incorporation document." }),
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Format" }),
-                /* @__PURE__ */ jsxs5(
-                  "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__ */ jsx9("option", { value: "pdf", children: "PDF" }),
-                      /* @__PURE__ */ jsx9("option", { value: "json", children: "JSON" })
-                    ]
-                  }
-                )
-              ] })
-            ] }),
-            (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") && /* @__PURE__ */ jsxs5("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Block Rule" }),
-                /* @__PURE__ */ jsxs5(
-                  "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__ */ jsx9("option", { value: "rule_1", children: "Block if risk level = 'highest'" }),
-                      /* @__PURE__ */ jsx9("option", { value: "rule_2", children: "Block if matches Stripe block lists" }),
-                      /* @__PURE__ */ jsx9("option", { value: "rule_3", children: "Block if CVC verification fails" }),
-                      /* @__PURE__ */ jsx9("option", { value: "rule_4", children: "Block if Postal code verification fails" })
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx9("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__ */ jsx9("div", { className: "mt-3", children: /* @__PURE__ */ jsxs5(
+                ) })
+              ] }) }, message.id);
+            }
+            return /* @__PURE__ */ jsx9(React4.Fragment, { children: /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                ref: isCurrentGuideStep ? currentStepRef : null,
+                className: `${isRoleChange ? "mt-3" : ""}`,
+                children: [
+                  /* @__PURE__ */ jsx9("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__ */ jsxs5(Fragment2, { children: [
+                          /* @__PURE__ */ jsx9("strong", { children: m[1] }),
+                          m[2]
+                        ] });
+                      }
+                    }
+                    if (message.role === "assistant" && text) {
+                      return renderMarkdown(text);
+                    }
+                    return text || /* @__PURE__ */ jsx9("span", { className: "opacity-70", children: "Thinking\u2026" });
+                  })() }),
+                  message.role === "assistant" && message.structuredData && /* @__PURE__ */ jsx9("div", { className: "mt-3", children: /* @__PURE__ */ jsx9(
+                    DataRenderer,
+                    {
+                      type: message.structuredData.type,
+                      data: message.structuredData.data
+                    }
+                  ) }),
+                  message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ jsx9("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ jsx9(
+                    "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__ */ jsxs5("div", { className: "mt-3 flex items-center gap-2", children: [
+            activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ jsx9(
+              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__ */ jsx9(ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
+              }
+            ),
+            /* @__PURE__ */ jsxs5(
               Button,
               {
                 type: "button",
                 size: "sm",
                 variant: "secondary",
                 className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
-                onClick: handleActionSubmit,
+                onClick: guideComplete ? handleBack : advanceGuide,
                 children: [
-                  /* @__PURE__ */ jsx9("span", { children: "Confirm" }),
+                  /* @__PURE__ */ jsx9("span", { children: guideComplete ? "Done" : "Next" }),
                   /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
                     /* @__PURE__ */ jsx9(Command, { className: "h-3 w-3" }),
                     /* @__PURE__ */ jsx9(CornerDownLeft, { className: "h-3 w-3" })
                   ] })
                 ]
               }
-            ) })
-          ] }, message.id);
-        }
-        if (message.kind === "bulkPreview" && message.csvData) {
-          return /* @__PURE__ */ jsxs5("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
-            /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
-            /* @__PURE__ */ jsxs5("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
-              /* @__PURE__ */ jsxs5("div", { className: "bg-gray-100 px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx9(FileSpreadsheet, { className: "h-4 w-4 text-gray-600" }),
-                /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
-                /* @__PURE__ */ jsxs5("span", { className: "text-xs text-gray-500", children: [
-                  "\u2022 ",
-                  message.csvData.rowCount,
-                  " rows"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs5("div", { className: "px-3 py-2 border-b border-gray-100", children: [
-                /* @__PURE__ */ jsx9("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Columns" }),
-                /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap gap-1", children: message.csvData.columns.map((col, i) => /* @__PURE__ */ jsx9("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__ */ jsxs5("div", { className: "px-3 py-2", children: [
-                /* @__PURE__ */ jsx9("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Sample Data" }),
-                /* @__PURE__ */ jsx9("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ jsxs5("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__ */ jsxs5("span", { children: [
-                    j > 0 && " \u2022 ",
-                    /* @__PURE__ */ jsxs5("span", { className: "text-gray-400", children: [
-                      key,
-                      ":"
-                    ] }),
-                    " ",
-                    val
-                  ] }, key)),
-                  Object.keys(row).length > 3 && /* @__PURE__ */ jsx9("span", { className: "text-gray-400", children: " ..." })
-                ] }, i)) })
-              ] }),
-              message.suggestedAction && /* @__PURE__ */ jsx9("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ jsxs5("span", { className: "text-xs text-blue-700", children: [
-                "Suggested action: ",
-                /* @__PURE__ */ jsx9("strong", { children: message.suggestedAction.replace(/_/g, " ") })
-              ] }) })
-            ] }),
-            message.bulkSessionId && /* @__PURE__ */ jsxs5("div", { className: "mt-3 flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxs5(
-                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__ */ jsxs5("span", { children: [
-                      "Process ",
-                      message.csvData.rowCount,
-                      " rows"
-                    ] }),
-                    /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                      /* @__PURE__ */ jsx9(Command, { className: "h-3 w-3" }),
-                      /* @__PURE__ */ jsx9(CornerDownLeft, { className: "h-3 w-3" })
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx9(
-                Button,
-                {
-                  type: "button",
-                  size: "sm",
-                  variant: "ghost",
-                  className: "h-8 rounded-xl px-3 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100",
-                  onClick: cancelBulkOperation,
-                  children: "Cancel"
-                }
-              )
-            ] })
-          ] }, message.id);
-        }
-        if (message.kind === "bulkProgress" && message.bulkProgress) {
-          const { processed, total, successes, failures } = message.bulkProgress;
-          const percentage = Math.round(processed / total * 100);
-          return /* @__PURE__ */ jsx9("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsxs5("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
-            /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 mb-2", children: [
-              /* @__PURE__ */ jsx9(Loader22, { className: "h-4 w-4 animate-spin text-blue-600" }),
-              /* @__PURE__ */ jsxs5("span", { className: "text-sm font-medium text-gray-700", children: [
-                "Processing... ",
-                processed,
-                " of ",
-                total
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx9("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ jsx9(
-              "div",
-              {
-                className: "h-full bg-blue-600 transition-all duration-300",
-                style: { width: `${percentage}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
-              /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx9(CheckCircle23, { className: "h-3 w-3 text-green-600" }),
-                successes,
-                " successful"
-              ] }),
-              failures > 0 && /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-1 text-red-600", children: [
-                /* @__PURE__ */ jsx9(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__ */ jsx9("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsxs5("div", { className: `rounded-lg border p-3 ${hasFailures ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`, children: [
-            /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 mb-2", children: [
-              /* @__PURE__ */ jsx9(CheckCircle23, { className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}` }),
-              /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
-            ] }),
-            /* @__PURE__ */ jsx9("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
-            /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-4 text-xs", children: [
-              /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-1 text-green-700", children: [
-                /* @__PURE__ */ jsx9(CheckCircle23, { className: "h-3 w-3" }),
-                successes,
-                " successful"
-              ] }),
-              hasFailures && /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-1 text-red-600", children: [
-                /* @__PURE__ */ jsx9(X, { className: "h-3 w-3" }),
-                failures.length,
-                " failed"
-              ] })
-            ] }),
-            hasFailures && /* @__PURE__ */ jsxs5("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
-              /* @__PURE__ */ jsx9("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
-              /* @__PURE__ */ jsxs5("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
-                failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ jsxs5("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__ */ jsxs5("div", { className: "text-xs text-amber-600", children: [
-                  "...and ",
-                  failures.length - 5,
-                  " more"
-                ] })
-              ] })
-            ] }),
-            navigationPage && successes > 0 && /* @__PURE__ */ jsx9("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ jsxs5(
+            )
+          ] }),
+          (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ jsx9("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9(
+            AssistantActivity,
+            {
+              phase,
+              progressSteps
+            }
+          ) }),
+          !activeGuide && /* @__PURE__ */ jsx9("div", { ref: messagesEndRef })
+        ] }) }) }) }) }),
+        /* @__PURE__ */ jsxs5("div", { className: "px-4 py-3 border-t border-gray-100 bg-gray-50/50 shrink-0", children: [
+          pendingFile && /* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
+            /* @__PURE__ */ jsx9(FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
+            /* @__PURE__ */ jsx9("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
+            /* @__PURE__ */ jsx9(
               "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);
-                  }
+                onClick: () => {
+                  setPendingFile(null);
+                  if (fileInputRef.current) fileInputRef.current.value = "";
                 },
-                className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 transition-colors group cursor-pointer",
-                children: [
-                  /* @__PURE__ */ jsxs5("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__ */ jsx9(Command, { className: "h-2.5 w-2.5" }),
-                    /* @__PURE__ */ jsx9("span", { children: "+" }),
-                    /* @__PURE__ */ jsx9(CornerDownLeft, { className: "h-2.5 w-2.5" })
-                  ] }),
-                  /* @__PURE__ */ jsxs5("span", { children: [
-                    "View ",
-                    pageLabel
-                  ] })
-                ]
+                className: "text-blue-600 hover:text-blue-800",
+                children: /* @__PURE__ */ jsx9(X, { className: "h-4 w-4" })
               }
-            ) })
-          ] }) }, message.id);
-        }
-        return /* @__PURE__ */ jsx9(React4.Fragment, { children: /* @__PURE__ */ jsxs5(
-          "div",
-          {
-            ref: isCurrentGuideStep ? currentStepRef : null,
-            className: `${isRoleChange ? "mt-3" : ""}`,
-            children: [
-              /* @__PURE__ */ jsx9("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__ */ jsxs5(Fragment2, { children: [
-                      /* @__PURE__ */ jsx9("strong", { children: m[1] }),
-                      m[2]
-                    ] });
+            )
+          ] }),
+          /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "w-full", children: [
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept: ".csv",
+                className: "hidden",
+                onChange: (e) => {
+                  const file = e.target.files?.[0];
+                  if (file) {
+                    setPendingFile(file);
                   }
                 }
-                if (message.role === "assistant" && text) {
-                  return renderMarkdown(text);
+              }
+            ),
+            /* @__PURE__ */ jsxs5("div", { className: "flex w-full items-center gap-2 rounded-2xl border border-gray-200 bg-white px-3 py-2 shadow-sm", children: [
+              /* @__PURE__ */ jsx9(
+                Button,
+                {
+                  type: "button",
+                  size: "icon",
+                  variant: "ghost",
+                  onClick: () => fileInputRef.current?.click(),
+                  className: "h-8 w-8 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
+                  title: "Upload CSV for bulk operations",
+                  children: /* @__PURE__ */ jsx9(Paperclip, { className: "h-4 w-4" })
                 }
-                return text || /* @__PURE__ */ jsx9("span", { className: "opacity-70", children: "Thinking\u2026" });
-              })() }),
-              message.role === "assistant" && message.structuredData && /* @__PURE__ */ jsx9("div", { className: "mt-3", children: /* @__PURE__ */ jsx9(
-                DataRenderer,
+              ),
+              /* @__PURE__ */ jsx9(
+                Input,
                 {
-                  type: message.structuredData.type,
-                  data: message.structuredData.data
+                  placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
+                  value: input,
+                  onChange: (e) => setInput(e.target.value),
+                  onKeyDown: (e) => {
+                    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                      const currentBulkSession = pendingBulkSessionRef.current;
+                      if (currentBulkSession) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        confirmBulkOperation(currentBulkSession);
+                        return;
+                      }
+                      if (pendingAction) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleActionSubmit();
+                        return;
+                      }
+                      if (pendingNavigation) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleConfirmNavigation(pendingNavigation);
+                        return;
+                      }
+                      const currentGuide = activeGuideRef.current;
+                      if (currentGuide) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        advanceGuide();
+                        return;
+                      }
+                    }
+                  },
+                  className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400"
                 }
-              ) }),
-              message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ jsx9("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ jsx9(
-                "button",
+              ),
+              /* @__PURE__ */ jsx9(
+                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__ */ jsxs5("div", { className: "mt-3 flex items-center gap-2", children: [
-        activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ jsx9(
-          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__ */ jsx9(ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
-          }
-        ),
-        /* @__PURE__ */ jsxs5(
-          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__ */ jsx9("span", { children: guideComplete ? "Done" : "Next" }),
-              /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                /* @__PURE__ */ jsx9(Command, { className: "h-3 w-3" }),
-                /* @__PURE__ */ jsx9(CornerDownLeft, { className: "h-3 w-3" })
-              ] })
-            ]
-          }
-        )
-      ] }),
-      (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ jsx9("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9(
-        AssistantActivity,
-        {
-          phase,
-          progressSteps
-        }
-      ) }),
-      !activeGuide && /* @__PURE__ */ jsx9("div", { ref: messagesEndRef })
-    ] }) }) }) }) }),
-    !isCollapsed && /* @__PURE__ */ jsxs5("div", { className: "px-4 py-3 border-t border-gray-100 bg-gray-50/50 shrink-0", children: [
-      pendingFile && /* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
-        /* @__PURE__ */ jsx9(FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
-        /* @__PURE__ */ jsx9("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
+                  type: "submit",
+                  size: "icon",
+                  disabled: !input.trim() && !pendingFile,
+                  className: "h-8 w-8 rounded-full bg-gray-900 hover:bg-gray-800 disabled:bg-gray-300",
+                  children: /* @__PURE__ */ jsx9(ArrowUp, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsx9(
-          "button",
+          GuideCursor,
           {
-            type: "button",
-            onClick: () => {
-              setPendingFile(null);
-              if (fileInputRef.current) fileInputRef.current.value = "";
-            },
-            className: "text-blue-600 hover:text-blue-800",
-            children: /* @__PURE__ */ jsx9(X, { className: "h-4 w-4" })
+            x: cursorState.x,
+            y: cursorState.y,
+            visible: cursorState.visible,
+            onClick: cursorState.onClick
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "w-full", children: [
-        /* @__PURE__ */ jsx9(
-          "input",
-          {
-            ref: fileInputRef,
-            type: "file",
-            accept: ".csv",
-            className: "hidden",
-            onChange: (e) => {
-              const file = e.target.files?.[0];
-              if (file) {
-                setPendingFile(file);
-              }
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs5("div", { className: "flex w-full items-center gap-2 rounded-2xl border border-gray-200 bg-white px-3 py-2 shadow-sm", children: [
-          /* @__PURE__ */ jsx9(
-            Button,
-            {
-              type: "button",
-              size: "icon",
-              variant: "ghost",
-              onClick: () => fileInputRef.current?.click(),
-              className: "h-8 w-8 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
-              title: "Upload CSV for bulk operations",
-              children: /* @__PURE__ */ jsx9(Paperclip, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx9(
-            Input,
-            {
-              placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
-              value: input,
-              onChange: (e) => setInput(e.target.value),
-              onKeyDown: (e) => {
-                if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-                  const currentBulkSession = pendingBulkSessionRef.current;
-                  if (currentBulkSession) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    confirmBulkOperation(currentBulkSession);
-                    return;
-                  }
-                  if (pendingAction) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleActionSubmit();
-                    return;
-                  }
-                  if (pendingNavigation) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleConfirmNavigation(pendingNavigation);
-                    return;
-                  }
-                  const currentGuide = activeGuideRef.current;
-                  if (currentGuide) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    advanceGuide();
-                    return;
-                  }
-                }
-              },
-              className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400"
-            }
-          ),
-          /* @__PURE__ */ jsx9(
-            Button,
-            {
-              type: "submit",
-              size: "icon",
-              disabled: !input.trim() && !pendingFile,
-              className: "h-8 w-8 rounded-full bg-gray-900 hover:bg-gray-800 disabled:bg-gray-300",
-              children: /* @__PURE__ */ jsx9(ArrowUp, { className: "h-4 w-4" })
-            }
-          )
-        ] })
-      ] })
-    ] }),
+      ]
+    }
+  );
+}
+function PanelToggle({ isOpen, onClick, className = "" }) {
+  return /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `fixed top-1/2 z-50 flex items-center justify-center w-6 h-16 bg-gray-100 hover:bg-gray-200 border border-gray-200 border-r-0 rounded-l-lg text-gray-600 hover:text-gray-800 shadow-md transition-all duration-300 ${className}`,
+      "aria-label": isOpen ? "Close help panel" : "Open help panel",
+      style: {
+        right: isOpen ? `${PANEL_WIDTH}px` : "0px",
+        transform: "translateY(-50%)"
+      },
+      children: isOpen ? /* @__PURE__ */ jsx9(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx9(ChevronLeft, { className: "h-4 w-4" })
+    }
+  );
+}
+function ChatPanelWithToggle({
+  onNavigate,
+  onActionComplete,
+  currentPage,
+  agentUrl,
+  startingQuestions,
+  startingQuestionsEndpoint,
+  defaultOpen = false,
+  isOpen: controlledIsOpen,
+  onOpenChange
+}) {
+  const [internalIsOpen, setInternalIsOpen] = React4.useState(defaultOpen);
+  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const setIsOpen = (open) => {
+    if (controlledIsOpen === void 0) {
+      setInternalIsOpen(open);
+    }
+    onOpenChange?.(open);
+  };
+  React4.useEffect(() => {
+    const originalPadding = document.body.style.paddingRight;
+    const originalTransition = document.body.style.transition;
+    document.body.style.transition = "padding-right 0.3s ease";
+    document.body.style.paddingRight = isOpen ? `${PANEL_WIDTH}px` : "0px";
+    return () => {
+      document.body.style.paddingRight = originalPadding;
+      document.body.style.transition = originalTransition;
+    };
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(
+      PanelToggle,
+      {
+        isOpen,
+        onClick: () => setIsOpen(!isOpen)
+      }
+    ),
     /* @__PURE__ */ jsx9(
-      GuideCursor,
+      ChatPanel,
       {
-        x: cursorState.x,
-        y: cursorState.y,
-        visible: cursorState.visible,
-        onClick: cursorState.onClick
+        isOpen,
+        onClose: () => setIsOpen(false),
+        onNavigate,
+        onActionComplete,
+        currentPage,
+        agentUrl,
+        startingQuestions,
+        startingQuestionsEndpoint
       }
     )
   ] });
 }
+function HelpButton({ onClick, className = "" }) {
+  return /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `flex items-center justify-center w-6 h-16 bg-gray-100 hover:bg-gray-200 border border-gray-200 border-r-0 rounded-l-lg text-gray-600 hover:text-gray-800 transition-all duration-200 shadow-sm ${className}`,
+      "aria-label": "Open help",
+      children: /* @__PURE__ */ jsx9(ChevronLeft, { className: "h-4 w-4" })
+    }
+  );
+}
 
 // src/createKiteChat.tsx
 import React5 from "react";
@@ -3417,10 +3500,16 @@ import { createRoot } from "react-dom/client";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function KiteChatWrapper({
   initialConfig,
-  onConfigUpdate
+  onConfigUpdate,
+  onStateUpdate
 }) {
   const [config, setConfig] = React5.useState(initialConfig);
   const [currentPage, setCurrentPage] = React5.useState(initialConfig.currentPage || "dashboard");
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const isOpenRef = React5.useRef(false);
+  React5.useEffect(() => {
+    isOpenRef.current = isOpen;
+  }, [isOpen]);
   React5.useEffect(() => {
     onConfigUpdate((newConfig) => {
       if (newConfig.currentPage !== void 0) {
@@ -3428,7 +3517,11 @@ function KiteChatWrapper({
       }
       setConfig((prev) => ({ ...prev, ...newConfig }));
     });
-  }, [onConfigUpdate]);
+    onStateUpdate({
+      setIsOpen: (open) => setIsOpen(open),
+      getIsOpen: () => isOpenRef.current
+    });
+  }, [onConfigUpdate, onStateUpdate]);
   React5.useEffect(() => {
     const container = document.getElementById("kite-chat-root");
     if (!container) return;
@@ -3442,12 +3535,16 @@ function KiteChatWrapper({
     }
   }, [config.theme]);
   return /* @__PURE__ */ jsx10(
-    ChatPanel,
+    ChatPanelWithToggle,
     {
+      isOpen,
+      onOpenChange: setIsOpen,
       currentPage,
       agentUrl: config.agentUrl,
       onNavigate: (page, subtab) => config.onNavigate?.(page, subtab),
-      onActionComplete: config.onActionComplete
+      onActionComplete: config.onActionComplete,
+      startingQuestions: config.startingQuestions,
+      startingQuestionsEndpoint: config.startingQuestionsEndpoint
     }
   );
 }
@@ -3455,6 +3552,7 @@ function createKiteChat(config) {
   let root = null;
   let containerElement = null;
   let configUpdater = null;
+  let stateUpdaters = null;
   let currentConfig = { ...config };
   const instance = {
     mount(container) {
@@ -3482,6 +3580,9 @@ function createKiteChat(config) {
             initialConfig: currentConfig,
             onConfigUpdate: (updater) => {
               configUpdater = updater;
+            },
+            onStateUpdate: (updaters) => {
+              stateUpdaters = updaters;
             }
           }
         )
@@ -3497,8 +3598,22 @@ function createKiteChat(config) {
       root = null;
       containerElement = null;
       configUpdater = null;
+      stateUpdaters = null;
       console.log("[KiteChat] Unmounted");
     },
+    open() {
+      stateUpdaters?.setIsOpen(true);
+    },
+    close() {
+      stateUpdaters?.setIsOpen(false);
+    },
+    toggle() {
+      const isCurrentlyOpen = stateUpdaters?.getIsOpen() ?? false;
+      stateUpdaters?.setIsOpen(!isCurrentlyOpen);
+    },
+    isOpen() {
+      return stateUpdaters?.getIsOpen() ?? false;
+    },
     setCurrentPage(page) {
       currentConfig.currentPage = page;
       configUpdater?.({ currentPage: page });
@@ -3543,5 +3658,8 @@ export {
   TopCustomersList,
   DataRenderer,
   ChatPanel,
+  PanelToggle,
+  ChatPanelWithToggle,
+  HelpButton,
   createKiteChat
 };