@kite-copilot/chat-panel 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +236 -369
  2. package/dist/auto.cjs +1148 -1045
  3. package/dist/auto.d.cts +1 -1
  4. package/dist/auto.d.ts +1 -1
  5. package/dist/auto.js +1 -1
  6. package/dist/{chunk-DN7P5ZFR.js → chunk-R73Y24JS.js} +1164 -1046
  7. package/dist/{createKiteChat-C67AkIPX.d.cts → createKiteChat-CFo7NUHz.d.cts} +88 -2
  8. package/dist/{createKiteChat-C67AkIPX.d.ts → createKiteChat-CFo7NUHz.d.ts} +88 -2
  9. package/dist/embed.global.js +20 -19
  10. package/dist/index.cjs +1166 -1045
  11. package/dist/index.d.cts +1 -1
  12. package/dist/index.d.ts +1 -1
  13. package/dist/index.js +7 -1
  14. package/dist/styles.css +1 -1
  15. package/package.json +1 -1
package/dist/auto.cjs CHANGED
@@ -887,6 +887,7 @@ function DataRenderer({ type, data }) {
887
887
  // src/ChatPanel.tsx
888
888
  var import_jsx_runtime9 = require("react/jsx-runtime");
889
889
  var DEFAULT_AGENT_URL = "http://localhost:5002";
890
+ var PANEL_WIDTH = 400;
890
891
  function renderMarkdown(text) {
891
892
  if (!text) return null;
892
893
  const lines = text.split("\n");
@@ -1015,6 +1016,26 @@ function renderMarkdown(text) {
1015
1016
  flushList();
1016
1017
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: elements });
1017
1018
  }
1019
+ var defaultStartingQuestions = [
1020
+ {
1021
+ id: "changing-layouts",
1022
+ label: "Changing layouts",
1023
+ prompt: "How can I customize and change the layout of my dashboard?",
1024
+ icon: "layout"
1025
+ },
1026
+ {
1027
+ id: "bulk-uploads",
1028
+ label: "Bulk uploads",
1029
+ prompt: "How do I perform bulk uploads of data using CSV files?",
1030
+ icon: "upload"
1031
+ },
1032
+ {
1033
+ id: "example-setups",
1034
+ label: "Example setups",
1035
+ prompt: "Can you show me some example configurations and setups?",
1036
+ icon: "setup"
1037
+ }
1038
+ ];
1018
1039
  var folders = [
1019
1040
  {
1020
1041
  id: "customers",
@@ -1178,11 +1199,15 @@ var guides = {
1178
1199
  };
1179
1200
  var initialMessages = [];
1180
1201
  function ChatPanel({
1202
+ isOpen = true,
1203
+ onClose,
1181
1204
  onBack,
1182
1205
  onNavigate,
1183
1206
  onActionComplete,
1184
1207
  currentPage,
1185
- agentUrl = DEFAULT_AGENT_URL
1208
+ agentUrl = DEFAULT_AGENT_URL,
1209
+ startingQuestions: startingQuestionsProp,
1210
+ startingQuestionsEndpoint
1186
1211
  } = {}) {
1187
1212
  const [messages, setMessages] = React4.useState(initialMessages);
1188
1213
  const [input, setInput] = React4.useState("");
@@ -1195,6 +1220,27 @@ function ChatPanel({
1195
1220
  const lastRole = messages.length ? messages[messages.length - 1].role : void 0;
1196
1221
  const [panelView, setPanelView] = React4.useState("landing");
1197
1222
  const [currentFolderId, setCurrentFolderId] = React4.useState(void 0);
1223
+ const [startingQuestions, setStartingQuestions] = React4.useState(
1224
+ startingQuestionsProp || defaultStartingQuestions
1225
+ );
1226
+ const [loadingQuestions, setLoadingQuestions] = React4.useState(false);
1227
+ React4.useEffect(() => {
1228
+ if (startingQuestionsEndpoint && !startingQuestionsProp) {
1229
+ setLoadingQuestions(true);
1230
+ fetch(startingQuestionsEndpoint).then((res) => res.json()).then((data) => {
1231
+ if (Array.isArray(data) && data.length > 0) {
1232
+ setStartingQuestions(data);
1233
+ }
1234
+ }).catch((err) => {
1235
+ console.warn("[KiteChat] Failed to fetch starting questions:", err);
1236
+ }).finally(() => setLoadingQuestions(false));
1237
+ }
1238
+ }, [startingQuestionsEndpoint, startingQuestionsProp]);
1239
+ React4.useEffect(() => {
1240
+ if (startingQuestionsProp) {
1241
+ setStartingQuestions(startingQuestionsProp);
1242
+ }
1243
+ }, [startingQuestionsProp]);
1198
1244
  const [activeGuide, setActiveGuide] = React4.useState(void 0);
1199
1245
  const activeGuideRef = React4.useRef(void 0);
1200
1246
  const latestBulkSummaryNavigationRef = React4.useRef(null);
@@ -1247,7 +1293,6 @@ function ChatPanel({
1247
1293
  const { cursorState, moveTo, hide } = useGuideCursor();
1248
1294
  const [pendingFile, setPendingFile] = React4.useState(null);
1249
1295
  const [pendingBulkSession, setPendingBulkSession] = React4.useState(null);
1250
- const [isCollapsed, setIsCollapsed] = React4.useState(false);
1251
1296
  const pendingBulkSessionRef = React4.useRef(null);
1252
1297
  const fileInputRef = React4.useRef(null);
1253
1298
  React4.useEffect(() => {
@@ -2298,1115 +2343,1141 @@ ${userText}`
2298
2343
  ]);
2299
2344
  }
2300
2345
  }
2301
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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: [
2302
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2303
- "div",
2304
- {
2305
- 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",
2306
- onClick: () => setIsCollapsed(!isCollapsed),
2307
- children: [
2308
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "text-sm font-semibold text-gray-800", children: "Copilot" }),
2309
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
2310
- !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2311
- Button,
2312
- {
2313
- variant: "ghost",
2314
- size: "sm",
2315
- className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
2316
- onClick: (e) => {
2317
- e.stopPropagation();
2318
- setMessages([]);
2319
- setPanelView("landing");
2320
- setCurrentFolderId(void 0);
2321
- setActiveGuide(void 0);
2322
- activeGuideRef.current = void 0;
2323
- setGuideComplete(false);
2324
- },
2325
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.SquarePen, { className: "h-3.5 w-3.5" })
2326
- }
2327
- ),
2328
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2329
- Button,
2330
- {
2331
- variant: "ghost",
2332
- size: "sm",
2333
- className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
2334
- onClick: (e) => {
2335
- e.stopPropagation();
2336
- setIsCollapsed(!isCollapsed);
2337
- },
2338
- children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronDown, { className: "h-4 w-4" })
2339
- }
2340
- )
2341
- ] })
2342
- ]
2343
- }
2344
- ),
2345
- !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: isEmpty ? "grid flex-1 place-items-center transition-all duration-300" : "flex flex-1 flex-col transition-all duration-300 min-h-0 overflow-hidden", children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "w-full overflow-y-auto px-4", children: [
2346
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "py-4 transition-all duration-300", children: [
2347
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "What can I help with?" }),
2348
- panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-center text-xs text-gray-500", children: "Ask me anything about your account" })
2349
- ] }),
2350
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pb-4", children: [
2351
- panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
2352
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Quick Start" }),
2353
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2346
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2347
+ "section",
2348
+ {
2349
+ 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"}`,
2350
+ style: { width: `${PANEL_WIDTH}px` },
2351
+ children: [
2352
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0", children: [
2353
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "text-sm font-semibold text-gray-800", children: "Help" }),
2354
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2354
2355
  Button,
2355
2356
  {
2356
- type: "button",
2357
+ variant: "ghost",
2357
2358
  size: "sm",
2358
- variant: "secondary",
2359
- 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",
2360
- onClick: () => startGuide("getting-started"),
2361
- children: [
2362
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Play, { className: "mr-2 h-3.5 w-3.5" }),
2363
- "Getting started"
2364
- ]
2359
+ className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
2360
+ onClick: () => {
2361
+ setMessages([]);
2362
+ setPanelView("landing");
2363
+ setCurrentFolderId(void 0);
2364
+ setActiveGuide(void 0);
2365
+ activeGuideRef.current = void 0;
2366
+ setGuideComplete(false);
2367
+ },
2368
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.SquarePen, { className: "h-3.5 w-3.5" })
2365
2369
  }
2366
- ),
2367
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Topics" }),
2368
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-1", children: [
2369
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2370
- Button,
2371
- {
2372
- type: "button",
2373
- size: "sm",
2374
- variant: "ghost",
2375
- className: "w-full justify-start rounded-lg px-3 py-2 text-xs text-gray-700 hover:bg-gray-100 h-auto",
2376
- onClick: () => openFolder("customers"),
2377
- children: [
2378
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "mr-2 inline-block h-1.5 w-1.5 rounded-full bg-blue-400" }),
2379
- "Customer Management"
2380
- ]
2381
- }
2382
- ),
2383
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2384
- Button,
2385
- {
2386
- type: "button",
2387
- size: "sm",
2388
- variant: "ghost",
2389
- className: "w-full justify-start rounded-lg px-3 py-2 text-xs text-gray-700 hover:bg-gray-100 h-auto",
2390
- onClick: () => openFolder("payments"),
2391
- children: [
2392
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "mr-2 inline-block h-1.5 w-1.5 rounded-full bg-green-400" }),
2393
- "Payment Processing"
2394
- ]
2395
- }
2396
- ),
2397
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2398
- Button,
2399
- {
2400
- type: "button",
2401
- size: "sm",
2402
- variant: "ghost",
2403
- className: "w-full justify-start rounded-lg px-3 py-2 text-xs text-gray-700 hover:bg-gray-100 h-auto",
2404
- onClick: () => openFolder("billing"),
2405
- children: [
2406
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "mr-2 inline-block h-1.5 w-1.5 rounded-full bg-purple-400" }),
2407
- "Billing"
2408
- ]
2409
- }
2410
- )
2411
- ] })
2370
+ ) })
2412
2371
  ] }),
2413
- panelView === "folder" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
2414
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-3 flex items-center gap-2", children: [
2415
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2416
- Button,
2417
- {
2418
- type: "button",
2419
- size: "icon",
2420
- variant: "ghost",
2421
- className: "h-7 w-7 rounded-full hover:bg-gray-100",
2422
- onClick: closeFolder,
2423
- "aria-label": "Back to suggestions",
2424
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-4 w-4 text-gray-500" })
2425
- }
2426
- ),
2427
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
2372
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: isEmpty ? "grid flex-1 place-items-center transition-all duration-300" : "flex flex-1 flex-col transition-all duration-300 min-h-0 overflow-hidden", children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "w-full overflow-y-auto px-4", children: [
2373
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "py-4 transition-all duration-300", children: [
2374
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "What can I help with?" }),
2375
+ panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-center text-xs text-gray-500", children: "Ask me anything about your account" })
2428
2376
  ] }),
2429
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1.5", children: folders.find((f) => f.id === currentFolderId)?.topics.map((topic) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2430
- Button,
2431
- {
2432
- type: "button",
2433
- size: "sm",
2434
- variant: "secondary",
2435
- 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",
2436
- onClick: () => sendTopic(topic.prompt),
2437
- children: topic.label
2438
- },
2439
- topic.id
2440
- )) })
2441
- ] })
2442
- ] })
2443
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollArea, { ref: messagesContainerRef, className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-2 px-4 py-3", children: [
2444
- messages.map((message, index) => {
2445
- const isUser = message.role === "user";
2446
- const previousRole = index > 0 ? messages[index - 1].role : void 0;
2447
- const isRoleChange = previousRole !== void 0 && previousRole !== message.role;
2448
- const currentGuide = activeGuideRef.current || activeGuide;
2449
- let isCurrentGuideStep = false;
2450
- if (currentGuide && message.kind === "guideStep") {
2451
- if (message.guideStepIndex !== void 0) {
2452
- isCurrentGuideStep = message.guideStepIndex === currentGuide.stepIndex;
2453
- } else {
2454
- isCurrentGuideStep = index === messages.length - 1;
2455
- }
2456
- } else if (message.kind === "guideComplete") {
2457
- isCurrentGuideStep = index === messages.length - 1;
2458
- }
2459
- if (message.kind === "guideStep" && !isCurrentGuideStep) {
2460
- return null;
2461
- }
2462
- if (isUser) {
2463
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[280px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content }) }, message.id);
2464
- }
2465
- if (message.kind === "searchSummary") {
2466
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AssistantSearchSummary, { title: message.title ?? "Search results", links: message.links ?? [] }) }, message.id);
2467
- }
2468
- if (message.kind === "guideComplete") {
2469
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2470
- "div",
2471
- {
2472
- ref: isCurrentGuideStep ? currentStepRef : null,
2473
- className: `${isRoleChange ? "mt-3" : ""}`,
2474
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-green-50 border border-green-200 px-3 py-2.5 text-sm leading-6", children: [
2475
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
2476
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-medium text-green-800", children: message.content })
2477
- ] })
2478
- },
2479
- message.id
2480
- );
2481
- }
2482
- if (message.kind === "navigationAction") {
2483
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
2484
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-2 text-gray-700", children: message.content || "" }),
2485
- message.navigationTarget && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2486
- Button,
2487
- {
2488
- type: "button",
2489
- size: "sm",
2490
- variant: "secondary",
2491
- className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
2492
- onClick: () => message.navigationTarget && handleConfirmNavigation(message.navigationTarget),
2493
- children: [
2494
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Confirm" }),
2495
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
2496
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
2497
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
2498
- ] })
2499
- ]
2377
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pb-4", children: [
2378
+ panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
2379
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Quick Start" }),
2380
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2381
+ Button,
2382
+ {
2383
+ type: "button",
2384
+ size: "sm",
2385
+ variant: "secondary",
2386
+ 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",
2387
+ onClick: () => startGuide("getting-started"),
2388
+ children: [
2389
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Play, { className: "mr-2 h-3.5 w-3.5" }),
2390
+ "Getting started"
2391
+ ]
2392
+ }
2393
+ ),
2394
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Suggested Questions" }),
2395
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
2396
+ const iconColors = ["bg-blue-400", "bg-green-400", "bg-purple-400", "bg-orange-400", "bg-pink-400"];
2397
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2398
+ Button,
2399
+ {
2400
+ type: "button",
2401
+ size: "sm",
2402
+ variant: "ghost",
2403
+ className: "w-full justify-start rounded-lg px-3 py-2 text-xs text-gray-700 hover:bg-gray-100 h-auto",
2404
+ onClick: () => sendTopic(question.prompt),
2405
+ children: [
2406
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}` }),
2407
+ question.label
2408
+ ]
2409
+ },
2410
+ question.id
2411
+ );
2412
+ }) })
2413
+ ] }),
2414
+ panelView === "folder" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
2415
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-3 flex items-center gap-2", children: [
2416
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2417
+ Button,
2418
+ {
2419
+ type: "button",
2420
+ size: "icon",
2421
+ variant: "ghost",
2422
+ className: "h-7 w-7 rounded-full hover:bg-gray-100",
2423
+ onClick: closeFolder,
2424
+ "aria-label": "Back to suggestions",
2425
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-4 w-4 text-gray-500" })
2426
+ }
2427
+ ),
2428
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
2429
+ ] }),
2430
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1.5", children: folders.find((f) => f.id === currentFolderId)?.topics.map((topic) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2431
+ Button,
2432
+ {
2433
+ type: "button",
2434
+ size: "sm",
2435
+ variant: "secondary",
2436
+ 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",
2437
+ onClick: () => sendTopic(topic.prompt),
2438
+ children: topic.label
2439
+ },
2440
+ topic.id
2441
+ )) })
2442
+ ] })
2443
+ ] })
2444
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollArea, { ref: messagesContainerRef, className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-2 px-4 py-3", children: [
2445
+ messages.map((message, index) => {
2446
+ const isUser = message.role === "user";
2447
+ const previousRole = index > 0 ? messages[index - 1].role : void 0;
2448
+ const isRoleChange = previousRole !== void 0 && previousRole !== message.role;
2449
+ const currentGuide = activeGuideRef.current || activeGuide;
2450
+ let isCurrentGuideStep = false;
2451
+ if (currentGuide && message.kind === "guideStep") {
2452
+ if (message.guideStepIndex !== void 0) {
2453
+ isCurrentGuideStep = message.guideStepIndex === currentGuide.stepIndex;
2454
+ } else {
2455
+ isCurrentGuideStep = index === messages.length - 1;
2500
2456
  }
2501
- ) })
2502
- ] }, message.id);
2503
- }
2504
- if (message.kind === "actionForm") {
2505
- const actionType = message.actionType;
2506
- const formData = Object.keys(actionFormData).length > 0 ? actionFormData : message.actionData || {};
2507
- if (message.isSubmitted) {
2508
- let successContent = "";
2509
- if (actionType === "updateCompanyInfo") {
2510
- successContent = "Company information has been updated successfully.";
2511
- } else if (actionType === "addApiKey") {
2512
- successContent = "API key has been added successfully.";
2513
- } else if (actionType === "addCustomer") {
2514
- successContent = "Customer has been added successfully.";
2515
- } else if (actionType === "enable2FA") {
2516
- successContent = "Two-factor authentication has been enabled successfully.";
2517
- } else if (actionType === "disable2FA") {
2518
- successContent = "Two-factor authentication has been disabled successfully.";
2519
- } else if (actionType === "changePassword") {
2520
- successContent = "Your password has been changed successfully.";
2521
- } else if (actionType === "revokeSession") {
2522
- successContent = "Session has been revoked successfully.";
2523
- } else if (actionType === "toggleNotification") {
2524
- successContent = "Notification preferences have been updated successfully.";
2525
- } else if (actionType === "connectIntegration") {
2526
- successContent = "Integration has been connected successfully.";
2527
- } else if (actionType === "disconnectIntegration") {
2528
- successContent = "Integration has been disconnected successfully.";
2529
- } else if (actionType === "addPaymentMethod") {
2530
- successContent = "Payment method has been added successfully.";
2531
- } else if (actionType === "removePaymentMethod") {
2532
- successContent = "Payment method has been removed successfully.";
2533
- } else if (actionType === "deleteApiKey") {
2534
- successContent = "API key has been deleted successfully.";
2535
- } else if (actionType === "addWebhook") {
2536
- successContent = "Webhook endpoint has been added successfully.";
2537
- } else if (actionType === "updateCurrency") {
2538
- successContent = "Currency preference has been updated successfully.";
2539
- } else if (actionType === "updateTimezone") {
2540
- successContent = "Timezone has been updated successfully.";
2541
- } else if (actionType === "refundPayment") {
2542
- successContent = "Refund has been processed successfully.";
2543
- } else if (actionType === "exportCertificate") {
2544
- successContent = "Certificate of Incorporation has been downloaded successfully.";
2545
- } else if (actionType === "createSubscription") {
2546
- successContent = "Subscription has been created successfully.";
2547
- } else if (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") {
2548
- successContent = "Block rule has been updated successfully.";
2549
- } else {
2550
- successContent = "Action completed successfully.";
2457
+ } else if (message.kind === "guideComplete") {
2458
+ isCurrentGuideStep = index === messages.length - 1;
2551
2459
  }
2552
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent }) }, message.id);
2553
- }
2554
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`, children: [
2555
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
2556
- actionType === "updateCompanyInfo" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
2557
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
2558
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2559
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
2560
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2561
- Input,
2562
- {
2563
- placeholder: "Acme Corporation",
2564
- value: formData.companyName || "",
2565
- onChange: (e) => setActionFormData({ ...actionFormData, companyName: e.target.value }),
2566
- className: "h-8 text-xs border-gray-200"
2567
- }
2568
- )
2460
+ if (message.kind === "guideStep" && !isCurrentGuideStep) {
2461
+ return null;
2462
+ }
2463
+ if (isUser) {
2464
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[280px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content }) }, message.id);
2465
+ }
2466
+ if (message.kind === "searchSummary") {
2467
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AssistantSearchSummary, { title: message.title ?? "Search results", links: message.links ?? [] }) }, message.id);
2468
+ }
2469
+ if (message.kind === "guideComplete") {
2470
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2471
+ "div",
2472
+ {
2473
+ ref: isCurrentGuideStep ? currentStepRef : null,
2474
+ className: `${isRoleChange ? "mt-3" : ""}`,
2475
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-green-50 border border-green-200 px-3 py-2.5 text-sm leading-6", children: [
2476
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
2477
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-medium text-green-800", children: message.content })
2478
+ ] })
2479
+ },
2480
+ message.id
2481
+ );
2482
+ }
2483
+ if (message.kind === "navigationAction") {
2484
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
2485
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-2 text-gray-700", children: message.content || "" }),
2486
+ message.navigationTarget && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2487
+ Button,
2488
+ {
2489
+ type: "button",
2490
+ size: "sm",
2491
+ variant: "secondary",
2492
+ className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
2493
+ onClick: () => message.navigationTarget && handleConfirmNavigation(message.navigationTarget),
2494
+ children: [
2495
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Confirm" }),
2496
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
2497
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
2498
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
2499
+ ] })
2500
+ ]
2501
+ }
2502
+ ) })
2503
+ ] }, message.id);
2504
+ }
2505
+ if (message.kind === "actionForm") {
2506
+ const actionType = message.actionType;
2507
+ const formData = Object.keys(actionFormData).length > 0 ? actionFormData : message.actionData || {};
2508
+ if (message.isSubmitted) {
2509
+ let successContent = "";
2510
+ if (actionType === "updateCompanyInfo") {
2511
+ successContent = "Company information has been updated successfully.";
2512
+ } else if (actionType === "addApiKey") {
2513
+ successContent = "API key has been added successfully.";
2514
+ } else if (actionType === "addCustomer") {
2515
+ successContent = "Customer has been added successfully.";
2516
+ } else if (actionType === "enable2FA") {
2517
+ successContent = "Two-factor authentication has been enabled successfully.";
2518
+ } else if (actionType === "disable2FA") {
2519
+ successContent = "Two-factor authentication has been disabled successfully.";
2520
+ } else if (actionType === "changePassword") {
2521
+ successContent = "Your password has been changed successfully.";
2522
+ } else if (actionType === "revokeSession") {
2523
+ successContent = "Session has been revoked successfully.";
2524
+ } else if (actionType === "toggleNotification") {
2525
+ successContent = "Notification preferences have been updated successfully.";
2526
+ } else if (actionType === "connectIntegration") {
2527
+ successContent = "Integration has been connected successfully.";
2528
+ } else if (actionType === "disconnectIntegration") {
2529
+ successContent = "Integration has been disconnected successfully.";
2530
+ } else if (actionType === "addPaymentMethod") {
2531
+ successContent = "Payment method has been added successfully.";
2532
+ } else if (actionType === "removePaymentMethod") {
2533
+ successContent = "Payment method has been removed successfully.";
2534
+ } else if (actionType === "deleteApiKey") {
2535
+ successContent = "API key has been deleted successfully.";
2536
+ } else if (actionType === "addWebhook") {
2537
+ successContent = "Webhook endpoint has been added successfully.";
2538
+ } else if (actionType === "updateCurrency") {
2539
+ successContent = "Currency preference has been updated successfully.";
2540
+ } else if (actionType === "updateTimezone") {
2541
+ successContent = "Timezone has been updated successfully.";
2542
+ } else if (actionType === "refundPayment") {
2543
+ successContent = "Refund has been processed successfully.";
2544
+ } else if (actionType === "exportCertificate") {
2545
+ successContent = "Certificate of Incorporation has been downloaded successfully.";
2546
+ } else if (actionType === "createSubscription") {
2547
+ successContent = "Subscription has been created successfully.";
2548
+ } else if (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") {
2549
+ successContent = "Block rule has been updated successfully.";
2550
+ } else {
2551
+ successContent = "Action completed successfully.";
2552
+ }
2553
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent }) }, message.id);
2554
+ }
2555
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`, children: [
2556
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
2557
+ actionType === "updateCompanyInfo" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
2558
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
2559
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2560
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
2561
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2562
+ Input,
2563
+ {
2564
+ placeholder: "Acme Corporation",
2565
+ value: formData.companyName || "",
2566
+ onChange: (e) => setActionFormData({ ...actionFormData, companyName: e.target.value }),
2567
+ className: "h-8 text-xs border-gray-200"
2568
+ }
2569
+ )
2570
+ ] }),
2571
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2572
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
2573
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2574
+ Input,
2575
+ {
2576
+ type: "email",
2577
+ placeholder: "contact@acme.com",
2578
+ value: formData.email || "",
2579
+ onChange: (e) => setActionFormData({ ...actionFormData, email: e.target.value }),
2580
+ className: "h-8 text-xs border-gray-200"
2581
+ }
2582
+ )
2583
+ ] })
2584
+ ] }),
2585
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2586
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Address" }),
2587
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2588
+ Input,
2589
+ {
2590
+ placeholder: "123 Main St, San Francisco, CA",
2591
+ value: formData.address || "",
2592
+ onChange: (e) => setActionFormData({ ...actionFormData, address: e.target.value }),
2593
+ className: "h-8 text-xs border-gray-200"
2594
+ }
2595
+ )
2596
+ ] }),
2597
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
2598
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2599
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Phone" }),
2600
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2601
+ Input,
2602
+ {
2603
+ type: "tel",
2604
+ placeholder: "+1 (555) 123-4567",
2605
+ value: formData.phone || "",
2606
+ onChange: (e) => setActionFormData({ ...actionFormData, phone: e.target.value }),
2607
+ className: "h-8 text-xs border-gray-200"
2608
+ }
2609
+ )
2610
+ ] }),
2611
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2612
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
2613
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2614
+ Input,
2615
+ {
2616
+ type: "url",
2617
+ placeholder: "https://acme.com",
2618
+ value: formData.website || "",
2619
+ onChange: (e) => setActionFormData({ ...actionFormData, website: e.target.value }),
2620
+ className: "h-8 text-xs border-gray-200"
2621
+ }
2622
+ )
2623
+ ] })
2624
+ ] })
2569
2625
  ] }),
2570
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2571
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
2626
+ actionType === "addApiKey" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2627
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name" }),
2572
2628
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2573
2629
  Input,
2574
2630
  {
2575
- type: "email",
2576
- placeholder: "contact@acme.com",
2577
- value: formData.email || "",
2578
- onChange: (e) => setActionFormData({ ...actionFormData, email: e.target.value }),
2631
+ placeholder: "Production Key",
2632
+ value: formData.name || "",
2633
+ onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
2579
2634
  className: "h-8 text-xs border-gray-200"
2580
2635
  }
2581
2636
  )
2582
- ] })
2583
- ] }),
2584
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2585
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Address" }),
2586
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2587
- Input,
2588
- {
2589
- placeholder: "123 Main St, San Francisco, CA",
2590
- value: formData.address || "",
2591
- onChange: (e) => setActionFormData({ ...actionFormData, address: e.target.value }),
2592
- className: "h-8 text-xs border-gray-200"
2593
- }
2594
- )
2595
- ] }),
2596
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
2597
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2598
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Phone" }),
2599
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2600
- Input,
2637
+ ] }) }),
2638
+ actionType === "addCustomer" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
2639
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
2640
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2641
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
2642
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2643
+ Input,
2644
+ {
2645
+ placeholder: "Acme Corporation",
2646
+ value: formData.name || "",
2647
+ onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
2648
+ className: "h-8 text-xs border-gray-200"
2649
+ }
2650
+ )
2651
+ ] }),
2652
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2653
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
2654
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2655
+ Input,
2656
+ {
2657
+ type: "email",
2658
+ placeholder: "contact@acme.com",
2659
+ value: formData.email || "",
2660
+ onChange: (e) => setActionFormData({ ...actionFormData, email: e.target.value }),
2661
+ className: "h-8 text-xs border-gray-200"
2662
+ }
2663
+ )
2664
+ ] })
2665
+ ] }),
2666
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2667
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Location" }),
2668
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2669
+ Input,
2670
+ {
2671
+ placeholder: "San Francisco, CA",
2672
+ value: formData.location || "",
2673
+ onChange: (e) => setActionFormData({ ...actionFormData, location: e.target.value }),
2674
+ className: "h-8 text-xs border-gray-200"
2675
+ }
2676
+ )
2677
+ ] }),
2678
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2679
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Subscription Tier" }),
2680
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2681
+ "select",
2682
+ {
2683
+ value: formData.subscription || "Starter",
2684
+ onChange: (e) => setActionFormData({ ...actionFormData, subscription: e.target.value }),
2685
+ 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",
2686
+ children: [
2687
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Starter", children: "Starter" }),
2688
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional" }),
2689
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise" })
2690
+ ]
2691
+ }
2692
+ )
2693
+ ] })
2694
+ ] }),
2695
+ (actionType === "enable2FA" || actionType === "disable2FA") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enable2FA" ? "This will enable two-factor authentication for your account. You'll need to set up an authenticator app." : "This will disable two-factor authentication for your account. Your account will be less secure." }) }),
2696
+ actionType === "changePassword" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2697
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2698
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Current Password" }),
2699
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2700
+ Input,
2701
+ {
2702
+ type: "password",
2703
+ value: formData.currentPassword || "",
2704
+ onChange: (e) => setActionFormData({ ...actionFormData, currentPassword: e.target.value }),
2705
+ className: "h-8 text-xs border-gray-200"
2706
+ }
2707
+ )
2708
+ ] }),
2709
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2710
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "New Password" }),
2711
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2712
+ Input,
2713
+ {
2714
+ type: "password",
2715
+ value: formData.newPassword || "",
2716
+ onChange: (e) => setActionFormData({ ...actionFormData, newPassword: e.target.value }),
2717
+ className: "h-8 text-xs border-gray-200"
2718
+ }
2719
+ )
2720
+ ] }),
2721
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2722
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Confirm New Password" }),
2723
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2724
+ Input,
2725
+ {
2726
+ type: "password",
2727
+ value: formData.confirmPassword || "",
2728
+ onChange: (e) => setActionFormData({ ...actionFormData, confirmPassword: e.target.value }),
2729
+ className: "h-8 text-xs border-gray-200"
2730
+ }
2731
+ )
2732
+ ] })
2733
+ ] }),
2734
+ actionType === "toggleNotification" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2735
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2736
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Notification Type" }),
2737
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2738
+ "select",
2739
+ {
2740
+ value: formData.notificationType || "paymentReceived",
2741
+ onChange: (e) => setActionFormData({ ...actionFormData, notificationType: e.target.value }),
2742
+ 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",
2743
+ children: [
2744
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "paymentReceived", children: "Payment Received" }),
2745
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "paymentFailed", children: "Payment Failed" }),
2746
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "invoicePaid", children: "Invoice Paid" }),
2747
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "monthlySummary", children: "Monthly Summary" }),
2748
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "productUpdates", children: "Product Updates" })
2749
+ ]
2750
+ }
2751
+ )
2752
+ ] }),
2753
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
2754
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2755
+ "input",
2756
+ {
2757
+ type: "checkbox",
2758
+ checked: formData.enabled !== false,
2759
+ onChange: (e) => setActionFormData({ ...actionFormData, enabled: e.target.checked }),
2760
+ className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
2761
+ }
2762
+ ),
2763
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs text-black", children: "Enable this notification" })
2764
+ ] })
2765
+ ] }),
2766
+ (actionType === "connectIntegration" || actionType === "disconnectIntegration") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2767
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Integration" }),
2768
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2769
+ "select",
2601
2770
  {
2602
- type: "tel",
2603
- placeholder: "+1 (555) 123-4567",
2604
- value: formData.phone || "",
2605
- onChange: (e) => setActionFormData({ ...actionFormData, phone: e.target.value }),
2606
- className: "h-8 text-xs border-gray-200"
2771
+ value: formData.integrationName || "Slack",
2772
+ onChange: (e) => setActionFormData({ ...actionFormData, integrationName: e.target.value }),
2773
+ 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",
2774
+ children: [
2775
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Slack", children: "Slack" }),
2776
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Zapier", children: "Zapier" }),
2777
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Webhook", children: "Webhook" })
2778
+ ]
2607
2779
  }
2608
2780
  )
2781
+ ] }) }),
2782
+ actionType === "addPaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2783
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2784
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Card Number" }),
2785
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2786
+ Input,
2787
+ {
2788
+ placeholder: "1234 5678 9012 3456",
2789
+ value: formData.cardNumber || "",
2790
+ onChange: (e) => setActionFormData({ ...actionFormData, cardNumber: e.target.value }),
2791
+ className: "h-8 text-xs border-gray-200"
2792
+ }
2793
+ )
2794
+ ] }),
2795
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2796
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Expiry Date" }),
2797
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2798
+ Input,
2799
+ {
2800
+ placeholder: "MM/YY",
2801
+ value: formData.expiryDate || "",
2802
+ onChange: (e) => setActionFormData({ ...actionFormData, expiryDate: e.target.value }),
2803
+ className: "h-8 text-xs border-gray-200"
2804
+ }
2805
+ )
2806
+ ] })
2609
2807
  ] }),
2610
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2611
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
2612
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2613
- Input,
2808
+ actionType === "removePaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will remove the default payment method from your account." }) }),
2809
+ actionType === "refundPayment" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2810
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2811
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Transaction ID or Customer Name" }),
2812
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2813
+ Input,
2814
+ {
2815
+ placeholder: "e.g., txn_1234 or Acme Corp",
2816
+ value: formData.transactionId || formData.customer || "",
2817
+ onChange: (e) => {
2818
+ const value = e.target.value;
2819
+ if (value.startsWith("txn_") || /^\d+$/.test(value)) {
2820
+ setActionFormData({ ...actionFormData, transactionId: value, customer: void 0 });
2821
+ } else {
2822
+ setActionFormData({ ...actionFormData, customer: value, transactionId: void 0 });
2823
+ }
2824
+ },
2825
+ className: "h-8 text-xs border-gray-200"
2826
+ }
2827
+ )
2828
+ ] }),
2829
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2830
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Amount (optional)" }),
2831
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2832
+ Input,
2833
+ {
2834
+ placeholder: "$0.00",
2835
+ value: formData.amount || "",
2836
+ onChange: (e) => setActionFormData({ ...actionFormData, amount: e.target.value }),
2837
+ className: "h-8 text-xs border-gray-200"
2838
+ }
2839
+ )
2840
+ ] }),
2841
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2842
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Reason (optional)" }),
2843
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2844
+ Input,
2845
+ {
2846
+ placeholder: "e.g., Customer request",
2847
+ value: formData.reason || "",
2848
+ onChange: (e) => setActionFormData({ ...actionFormData, reason: e.target.value }),
2849
+ className: "h-8 text-xs border-gray-200"
2850
+ }
2851
+ )
2852
+ ] })
2853
+ ] }),
2854
+ actionType === "deleteApiKey" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2855
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2856
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name or ID" }),
2857
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2858
+ Input,
2859
+ {
2860
+ placeholder: "Production Key",
2861
+ value: formData.keyId || formData.name || "",
2862
+ onChange: (e) => setActionFormData({ ...actionFormData, keyId: e.target.value, name: e.target.value }),
2863
+ className: "h-8 text-xs border-gray-200"
2864
+ }
2865
+ )
2866
+ ] }),
2867
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-red-600", children: "Warning: This action cannot be undone. The API key will be permanently deleted." })
2868
+ ] }),
2869
+ actionType === "addWebhook" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2870
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2871
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Webhook URL" }),
2872
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2873
+ Input,
2874
+ {
2875
+ type: "url",
2876
+ placeholder: "https://example.com/webhook",
2877
+ value: formData.url || "",
2878
+ onChange: (e) => setActionFormData({ ...actionFormData, url: e.target.value }),
2879
+ className: "h-8 text-xs border-gray-200"
2880
+ }
2881
+ )
2882
+ ] }),
2883
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2884
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Name (optional)" }),
2885
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2886
+ Input,
2887
+ {
2888
+ placeholder: "Production Webhook",
2889
+ value: formData.name || "",
2890
+ onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
2891
+ className: "h-8 text-xs border-gray-200"
2892
+ }
2893
+ )
2894
+ ] })
2895
+ ] }),
2896
+ actionType === "updateCurrency" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2897
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Currency" }),
2898
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2899
+ "select",
2614
2900
  {
2615
- type: "url",
2616
- placeholder: "https://acme.com",
2617
- value: formData.website || "",
2618
- onChange: (e) => setActionFormData({ ...actionFormData, website: e.target.value }),
2619
- className: "h-8 text-xs border-gray-200"
2901
+ value: formData.currency || "USD",
2902
+ onChange: (e) => setActionFormData({ ...actionFormData, currency: e.target.value }),
2903
+ 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",
2904
+ children: [
2905
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "USD", children: "USD ($)" }),
2906
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "EUR", children: "EUR (\u20AC)" }),
2907
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "GBP", children: "GBP (\xA3)" }),
2908
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "JPY", children: "JPY (\xA5)" })
2909
+ ]
2620
2910
  }
2621
2911
  )
2622
- ] })
2623
- ] })
2624
- ] }),
2625
- actionType === "addApiKey" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2626
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name" }),
2627
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2628
- Input,
2629
- {
2630
- placeholder: "Production Key",
2631
- value: formData.name || "",
2632
- onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
2633
- className: "h-8 text-xs border-gray-200"
2634
- }
2635
- )
2636
- ] }) }),
2637
- actionType === "addCustomer" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
2638
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
2639
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2640
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
2641
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2642
- Input,
2912
+ ] }) }),
2913
+ actionType === "updateTimezone" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2914
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Timezone" }),
2915
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2916
+ "select",
2643
2917
  {
2644
- placeholder: "Acme Corporation",
2645
- value: formData.name || "",
2646
- onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
2647
- className: "h-8 text-xs border-gray-200"
2918
+ value: formData.timezone || "America/Los_Angeles",
2919
+ onChange: (e) => setActionFormData({ ...actionFormData, timezone: e.target.value }),
2920
+ 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",
2921
+ children: [
2922
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "America/Los_Angeles", children: "Pacific Time (PT)" }),
2923
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "America/New_York", children: "Eastern Time (ET)" }),
2924
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Europe/London", children: "GMT" }),
2925
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Asia/Tokyo", children: "JST" })
2926
+ ]
2648
2927
  }
2649
2928
  )
2929
+ ] }) }),
2930
+ actionType === "revokeSession" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2931
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2932
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Device/Session" }),
2933
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2934
+ Input,
2935
+ {
2936
+ placeholder: "MacBook Pro",
2937
+ value: formData.device || "",
2938
+ onChange: (e) => setActionFormData({ ...actionFormData, device: e.target.value }),
2939
+ className: "h-8 text-xs border-gray-200"
2940
+ }
2941
+ )
2942
+ ] }),
2943
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will sign out the device and invalidate its session." })
2944
+ ] }),
2945
+ actionType === "createSubscription" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2946
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2947
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Customer Email" }),
2948
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2949
+ Input,
2950
+ {
2951
+ type: "email",
2952
+ placeholder: "customer@example.com",
2953
+ value: formData.customerEmail || "",
2954
+ onChange: (e) => setActionFormData({ ...actionFormData, customerEmail: e.target.value }),
2955
+ className: "h-8 text-xs border-gray-200"
2956
+ }
2957
+ )
2958
+ ] }),
2959
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2960
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Plan" }),
2961
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2962
+ "select",
2963
+ {
2964
+ value: formData.plan || "Starter",
2965
+ onChange: (e) => setActionFormData({ ...actionFormData, plan: e.target.value }),
2966
+ 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",
2967
+ children: [
2968
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Starter", children: "Starter ($29/mo)" }),
2969
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional ($99/mo)" }),
2970
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise ($299/mo)" })
2971
+ ]
2972
+ }
2973
+ )
2974
+ ] }),
2975
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2976
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Billing Cycle" }),
2977
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2978
+ "select",
2979
+ {
2980
+ value: formData.billingCycle || "monthly",
2981
+ onChange: (e) => setActionFormData({ ...actionFormData, billingCycle: e.target.value }),
2982
+ 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",
2983
+ children: [
2984
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "monthly", children: "Monthly" }),
2985
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "yearly", children: "Yearly (Save 15%)" })
2986
+ ]
2987
+ }
2988
+ )
2989
+ ] })
2990
+ ] }),
2991
+ actionType === "exportCertificate" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2992
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will export your certificate of incorporation document." }),
2993
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2994
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Format" }),
2995
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2996
+ "select",
2997
+ {
2998
+ value: formData.format || "pdf",
2999
+ onChange: (e) => setActionFormData({ ...actionFormData, format: e.target.value }),
3000
+ 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",
3001
+ children: [
3002
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "pdf", children: "PDF" }),
3003
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "json", children: "JSON" })
3004
+ ]
3005
+ }
3006
+ )
3007
+ ] })
3008
+ ] }),
3009
+ (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
3010
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
3011
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Block Rule" }),
3012
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3013
+ "select",
3014
+ {
3015
+ value: formData.ruleId || "rule_1",
3016
+ onChange: (e) => setActionFormData({ ...actionFormData, ruleId: e.target.value }),
3017
+ 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",
3018
+ children: [
3019
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_1", children: "Block if risk level = 'highest'" }),
3020
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_2", children: "Block if matches Stripe block lists" }),
3021
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_3", children: "Block if CVC verification fails" }),
3022
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_4", children: "Block if Postal code verification fails" })
3023
+ ]
3024
+ }
3025
+ )
3026
+ ] }),
3027
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enableBlockRule" ? "This will enable the selected block rule to actively block matching payments." : actionType === "disableBlockRule" ? "This will disable the selected block rule. Matching payments will no longer be blocked." : "This will toggle the selected block rule's state." })
2650
3028
  ] }),
2651
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2652
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
3029
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3030
+ Button,
3031
+ {
3032
+ type: "button",
3033
+ size: "sm",
3034
+ variant: "secondary",
3035
+ className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
3036
+ onClick: handleActionSubmit,
3037
+ children: [
3038
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Confirm" }),
3039
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
3040
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
3041
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
3042
+ ] })
3043
+ ]
3044
+ }
3045
+ ) })
3046
+ ] }, message.id);
3047
+ }
3048
+ if (message.kind === "bulkPreview" && message.csvData) {
3049
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
3050
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
3051
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
3052
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-100 px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
3053
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-gray-600" }),
3054
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
3055
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-gray-500", children: [
3056
+ "\u2022 ",
3057
+ message.csvData.rowCount,
3058
+ " rows"
3059
+ ] })
3060
+ ] }),
3061
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100", children: [
3062
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Columns" }),
3063
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-1", children: message.csvData.columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded", children: col }, i)) })
3064
+ ] }),
3065
+ message.csvData.sampleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2", children: [
3066
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Sample Data" }),
3067
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-xs text-gray-600 bg-white rounded px-2 py-1 border border-gray-100", children: [
3068
+ Object.entries(row).slice(0, 3).map(([key, val], j) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
3069
+ j > 0 && " \u2022 ",
3070
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-gray-400", children: [
3071
+ key,
3072
+ ":"
3073
+ ] }),
3074
+ " ",
3075
+ val
3076
+ ] }, key)),
3077
+ Object.keys(row).length > 3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-gray-400", children: " ..." })
3078
+ ] }, i)) })
3079
+ ] }),
3080
+ message.suggestedAction && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-blue-700", children: [
3081
+ "Suggested action: ",
3082
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: message.suggestedAction.replace(/_/g, " ") })
3083
+ ] }) })
3084
+ ] }),
3085
+ message.bulkSessionId && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
3086
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3087
+ Button,
3088
+ {
3089
+ type: "button",
3090
+ size: "sm",
3091
+ variant: "secondary",
3092
+ className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
3093
+ onClick: () => message.bulkSessionId && confirmBulkOperation(message.bulkSessionId),
3094
+ children: [
3095
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
3096
+ "Process ",
3097
+ message.csvData.rowCount,
3098
+ " rows"
3099
+ ] }),
3100
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
3101
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
3102
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
3103
+ ] })
3104
+ ]
3105
+ }
3106
+ ),
2653
3107
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2654
- Input,
3108
+ Button,
2655
3109
  {
2656
- type: "email",
2657
- placeholder: "contact@acme.com",
2658
- value: formData.email || "",
2659
- onChange: (e) => setActionFormData({ ...actionFormData, email: e.target.value }),
2660
- className: "h-8 text-xs border-gray-200"
3110
+ type: "button",
3111
+ size: "sm",
3112
+ variant: "ghost",
3113
+ className: "h-8 rounded-xl px-3 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100",
3114
+ onClick: cancelBulkOperation,
3115
+ children: "Cancel"
2661
3116
  }
2662
3117
  )
2663
3118
  ] })
2664
- ] }),
2665
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2666
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Location" }),
2667
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2668
- Input,
2669
- {
2670
- placeholder: "San Francisco, CA",
2671
- value: formData.location || "",
2672
- onChange: (e) => setActionFormData({ ...actionFormData, location: e.target.value }),
2673
- className: "h-8 text-xs border-gray-200"
2674
- }
2675
- )
2676
- ] }),
2677
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2678
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Subscription Tier" }),
2679
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2680
- "select",
2681
- {
2682
- value: formData.subscription || "Starter",
2683
- onChange: (e) => setActionFormData({ ...actionFormData, subscription: e.target.value }),
2684
- 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",
2685
- children: [
2686
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Starter", children: "Starter" }),
2687
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional" }),
2688
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise" })
2689
- ]
2690
- }
2691
- )
2692
- ] })
2693
- ] }),
2694
- (actionType === "enable2FA" || actionType === "disable2FA") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enable2FA" ? "This will enable two-factor authentication for your account. You'll need to set up an authenticator app." : "This will disable two-factor authentication for your account. Your account will be less secure." }) }),
2695
- actionType === "changePassword" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2696
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2697
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Current Password" }),
2698
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2699
- Input,
2700
- {
2701
- type: "password",
2702
- value: formData.currentPassword || "",
2703
- onChange: (e) => setActionFormData({ ...actionFormData, currentPassword: e.target.value }),
2704
- className: "h-8 text-xs border-gray-200"
2705
- }
2706
- )
2707
- ] }),
2708
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2709
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "New Password" }),
2710
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2711
- Input,
2712
- {
2713
- type: "password",
2714
- value: formData.newPassword || "",
2715
- onChange: (e) => setActionFormData({ ...actionFormData, newPassword: e.target.value }),
2716
- className: "h-8 text-xs border-gray-200"
2717
- }
2718
- )
2719
- ] }),
2720
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2721
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Confirm New Password" }),
2722
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2723
- Input,
2724
- {
2725
- type: "password",
2726
- value: formData.confirmPassword || "",
2727
- onChange: (e) => setActionFormData({ ...actionFormData, confirmPassword: e.target.value }),
2728
- className: "h-8 text-xs border-gray-200"
2729
- }
2730
- )
2731
- ] })
2732
- ] }),
2733
- actionType === "toggleNotification" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2734
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2735
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Notification Type" }),
2736
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2737
- "select",
2738
- {
2739
- value: formData.notificationType || "paymentReceived",
2740
- onChange: (e) => setActionFormData({ ...actionFormData, notificationType: e.target.value }),
2741
- 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",
2742
- children: [
2743
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "paymentReceived", children: "Payment Received" }),
2744
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "paymentFailed", children: "Payment Failed" }),
2745
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "invoicePaid", children: "Invoice Paid" }),
2746
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "monthlySummary", children: "Monthly Summary" }),
2747
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "productUpdates", children: "Product Updates" })
2748
- ]
2749
- }
2750
- )
2751
- ] }),
2752
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
2753
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2754
- "input",
2755
- {
2756
- type: "checkbox",
2757
- checked: formData.enabled !== false,
2758
- onChange: (e) => setActionFormData({ ...actionFormData, enabled: e.target.checked }),
2759
- className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
2760
- }
2761
- ),
2762
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs text-black", children: "Enable this notification" })
2763
- ] })
2764
- ] }),
2765
- (actionType === "connectIntegration" || actionType === "disconnectIntegration") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2766
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Integration" }),
2767
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2768
- "select",
2769
- {
2770
- value: formData.integrationName || "Slack",
2771
- onChange: (e) => setActionFormData({ ...actionFormData, integrationName: e.target.value }),
2772
- 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",
2773
- children: [
2774
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Slack", children: "Slack" }),
2775
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Zapier", children: "Zapier" }),
2776
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Webhook", children: "Webhook" })
2777
- ]
2778
- }
2779
- )
2780
- ] }) }),
2781
- actionType === "addPaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2782
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2783
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Card Number" }),
2784
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2785
- Input,
2786
- {
2787
- placeholder: "1234 5678 9012 3456",
2788
- value: formData.cardNumber || "",
2789
- onChange: (e) => setActionFormData({ ...actionFormData, cardNumber: e.target.value }),
2790
- className: "h-8 text-xs border-gray-200"
2791
- }
2792
- )
2793
- ] }),
2794
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2795
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Expiry Date" }),
2796
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2797
- Input,
3119
+ ] }, message.id);
3120
+ }
3121
+ if (message.kind === "bulkProgress" && message.bulkProgress) {
3122
+ const { processed, total, successes, failures } = message.bulkProgress;
3123
+ const percentage = Math.round(processed / total * 100);
3124
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
3125
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
3126
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-blue-600" }),
3127
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-sm font-medium text-gray-700", children: [
3128
+ "Processing... ",
3129
+ processed,
3130
+ " of ",
3131
+ total
3132
+ ] })
3133
+ ] }),
3134
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3135
+ "div",
2798
3136
  {
2799
- placeholder: "MM/YY",
2800
- value: formData.expiryDate || "",
2801
- onChange: (e) => setActionFormData({ ...actionFormData, expiryDate: e.target.value }),
2802
- className: "h-8 text-xs border-gray-200"
3137
+ className: "h-full bg-blue-600 transition-all duration-300",
3138
+ style: { width: `${percentage}%` }
2803
3139
  }
2804
- )
2805
- ] })
2806
- ] }),
2807
- actionType === "removePaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will remove the default payment method from your account." }) }),
2808
- actionType === "refundPayment" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2809
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2810
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Transaction ID or Customer Name" }),
2811
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2812
- Input,
3140
+ ) }),
3141
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
3142
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1", children: [
3143
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3 text-green-600" }),
3144
+ successes,
3145
+ " successful"
3146
+ ] }),
3147
+ failures > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
3148
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
3149
+ failures,
3150
+ " failed"
3151
+ ] })
3152
+ ] })
3153
+ ] }) }, message.id);
3154
+ }
3155
+ if (message.kind === "bulkSummary" && message.bulkSummary) {
3156
+ const { total, successes, failures, navigationPage } = message.bulkSummary;
3157
+ const hasFailures = failures.length > 0;
3158
+ const pageLabel = navigationPage?.page === "customers" ? "Customers" : navigationPage?.page === "dashboard" ? "Dashboard" : navigationPage?.page === "settings" ? "Settings" : "Results";
3159
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `rounded-lg border p-3 ${hasFailures ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`, children: [
3160
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
3161
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}` }),
3162
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
3163
+ ] }),
3164
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
3165
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-4 text-xs", children: [
3166
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-green-700", children: [
3167
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3" }),
3168
+ successes,
3169
+ " successful"
3170
+ ] }),
3171
+ hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
3172
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
3173
+ failures.length,
3174
+ " failed"
3175
+ ] })
3176
+ ] }),
3177
+ hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
3178
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
3179
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
3180
+ failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-xs text-red-700 bg-red-50 rounded px-2 py-1", children: [
3181
+ "Row ",
3182
+ failure.row,
3183
+ ": ",
3184
+ failure.error || "Unknown error"
3185
+ ] }, i)),
3186
+ failures.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-xs text-amber-600", children: [
3187
+ "...and ",
3188
+ failures.length - 5,
3189
+ " more"
3190
+ ] })
3191
+ ] })
3192
+ ] }),
3193
+ navigationPage && successes > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3194
+ "button",
2813
3195
  {
2814
- placeholder: "e.g., txn_1234 or Acme Corp",
2815
- value: formData.transactionId || formData.customer || "",
2816
- onChange: (e) => {
2817
- const value = e.target.value;
2818
- if (value.startsWith("txn_") || /^\d+$/.test(value)) {
2819
- setActionFormData({ ...actionFormData, transactionId: value, customer: void 0 });
3196
+ type: "button",
3197
+ onClick: (e) => {
3198
+ e.preventDefault();
3199
+ e.stopPropagation();
3200
+ console.log("[DEBUG] Button clicked - navigationPage:", navigationPage, "onNavigate:", !!onNavigate);
3201
+ if (onNavigate && navigationPage.page) {
3202
+ console.log("[DEBUG] Calling onNavigate with page:", navigationPage.page);
3203
+ onNavigate(navigationPage.page, navigationPage.subtab);
2820
3204
  } else {
2821
- setActionFormData({ ...actionFormData, customer: value, transactionId: void 0 });
3205
+ console.log("[DEBUG] Condition failed - onNavigate:", !!onNavigate, "navigationPage.page:", navigationPage.page);
2822
3206
  }
2823
3207
  },
2824
- className: "h-8 text-xs border-gray-200"
2825
- }
2826
- )
2827
- ] }),
2828
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2829
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Amount (optional)" }),
2830
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2831
- Input,
2832
- {
2833
- placeholder: "$0.00",
2834
- value: formData.amount || "",
2835
- onChange: (e) => setActionFormData({ ...actionFormData, amount: e.target.value }),
2836
- className: "h-8 text-xs border-gray-200"
2837
- }
2838
- )
2839
- ] }),
2840
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2841
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Reason (optional)" }),
2842
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2843
- Input,
2844
- {
2845
- placeholder: "e.g., Customer request",
2846
- value: formData.reason || "",
2847
- onChange: (e) => setActionFormData({ ...actionFormData, reason: e.target.value }),
2848
- className: "h-8 text-xs border-gray-200"
2849
- }
2850
- )
2851
- ] })
2852
- ] }),
2853
- actionType === "deleteApiKey" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2854
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2855
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name or ID" }),
2856
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2857
- Input,
2858
- {
2859
- placeholder: "Production Key",
2860
- value: formData.keyId || formData.name || "",
2861
- onChange: (e) => setActionFormData({ ...actionFormData, keyId: e.target.value, name: e.target.value }),
2862
- className: "h-8 text-xs border-gray-200"
2863
- }
2864
- )
2865
- ] }),
2866
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-red-600", children: "Warning: This action cannot be undone. The API key will be permanently deleted." })
2867
- ] }),
2868
- actionType === "addWebhook" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2869
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2870
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Webhook URL" }),
2871
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2872
- Input,
2873
- {
2874
- type: "url",
2875
- placeholder: "https://example.com/webhook",
2876
- value: formData.url || "",
2877
- onChange: (e) => setActionFormData({ ...actionFormData, url: e.target.value }),
2878
- className: "h-8 text-xs border-gray-200"
2879
- }
2880
- )
2881
- ] }),
2882
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2883
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Name (optional)" }),
2884
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2885
- Input,
2886
- {
2887
- placeholder: "Production Webhook",
2888
- value: formData.name || "",
2889
- onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
2890
- className: "h-8 text-xs border-gray-200"
2891
- }
2892
- )
2893
- ] })
2894
- ] }),
2895
- actionType === "updateCurrency" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2896
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Currency" }),
2897
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2898
- "select",
2899
- {
2900
- value: formData.currency || "USD",
2901
- onChange: (e) => setActionFormData({ ...actionFormData, currency: e.target.value }),
2902
- 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",
2903
- children: [
2904
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "USD", children: "USD ($)" }),
2905
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "EUR", children: "EUR (\u20AC)" }),
2906
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "GBP", children: "GBP (\xA3)" }),
2907
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "JPY", children: "JPY (\xA5)" })
2908
- ]
2909
- }
2910
- )
2911
- ] }) }),
2912
- actionType === "updateTimezone" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2913
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Timezone" }),
2914
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2915
- "select",
2916
- {
2917
- value: formData.timezone || "America/Los_Angeles",
2918
- onChange: (e) => setActionFormData({ ...actionFormData, timezone: e.target.value }),
2919
- 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",
2920
- children: [
2921
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "America/Los_Angeles", children: "Pacific Time (PT)" }),
2922
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "America/New_York", children: "Eastern Time (ET)" }),
2923
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Europe/London", children: "GMT" }),
2924
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Asia/Tokyo", children: "JST" })
2925
- ]
2926
- }
2927
- )
2928
- ] }) }),
2929
- actionType === "revokeSession" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2930
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2931
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Device/Session" }),
2932
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2933
- Input,
2934
- {
2935
- placeholder: "MacBook Pro",
2936
- value: formData.device || "",
2937
- onChange: (e) => setActionFormData({ ...actionFormData, device: e.target.value }),
2938
- className: "h-8 text-xs border-gray-200"
2939
- }
2940
- )
2941
- ] }),
2942
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will sign out the device and invalidate its session." })
2943
- ] }),
2944
- actionType === "createSubscription" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2945
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2946
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Customer Email" }),
2947
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2948
- Input,
2949
- {
2950
- type: "email",
2951
- placeholder: "customer@example.com",
2952
- value: formData.customerEmail || "",
2953
- onChange: (e) => setActionFormData({ ...actionFormData, customerEmail: e.target.value }),
2954
- className: "h-8 text-xs border-gray-200"
2955
- }
2956
- )
2957
- ] }),
2958
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2959
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Plan" }),
2960
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2961
- "select",
2962
- {
2963
- value: formData.plan || "Starter",
2964
- onChange: (e) => setActionFormData({ ...actionFormData, plan: e.target.value }),
2965
- 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",
2966
- children: [
2967
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Starter", children: "Starter ($29/mo)" }),
2968
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional ($99/mo)" }),
2969
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise ($299/mo)" })
2970
- ]
2971
- }
2972
- )
2973
- ] }),
2974
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2975
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Billing Cycle" }),
2976
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2977
- "select",
2978
- {
2979
- value: formData.billingCycle || "monthly",
2980
- onChange: (e) => setActionFormData({ ...actionFormData, billingCycle: e.target.value }),
2981
- 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",
2982
- children: [
2983
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "monthly", children: "Monthly" }),
2984
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "yearly", children: "Yearly (Save 15%)" })
2985
- ]
2986
- }
2987
- )
2988
- ] })
2989
- ] }),
2990
- actionType === "exportCertificate" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
2991
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will export your certificate of incorporation document." }),
2992
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
2993
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Format" }),
2994
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2995
- "select",
2996
- {
2997
- value: formData.format || "pdf",
2998
- onChange: (e) => setActionFormData({ ...actionFormData, format: e.target.value }),
2999
- 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",
3000
- children: [
3001
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "pdf", children: "PDF" }),
3002
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "json", children: "JSON" })
3003
- ]
3004
- }
3005
- )
3006
- ] })
3007
- ] }),
3008
- (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
3009
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
3010
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Block Rule" }),
3011
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3012
- "select",
3013
- {
3014
- value: formData.ruleId || "rule_1",
3015
- onChange: (e) => setActionFormData({ ...actionFormData, ruleId: e.target.value }),
3016
- 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",
3208
+ className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 transition-colors group cursor-pointer",
3017
3209
  children: [
3018
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_1", children: "Block if risk level = 'highest'" }),
3019
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_2", children: "Block if matches Stripe block lists" }),
3020
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_3", children: "Block if CVC verification fails" }),
3021
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_4", children: "Block if Postal code verification fails" })
3210
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-gray-100 rounded text-[10px] font-medium text-gray-600 group-hover:bg-gray-200", children: [
3211
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-2.5 w-2.5" }),
3212
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "+" }),
3213
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-2.5 w-2.5" })
3214
+ ] }),
3215
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
3216
+ "View ",
3217
+ pageLabel
3218
+ ] })
3022
3219
  ]
3023
3220
  }
3024
- )
3025
- ] }),
3026
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enableBlockRule" ? "This will enable the selected block rule to actively block matching payments." : actionType === "disableBlockRule" ? "This will disable the selected block rule. Matching payments will no longer be blocked." : "This will toggle the selected block rule's state." })
3027
- ] }),
3028
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3221
+ ) })
3222
+ ] }) }, message.id);
3223
+ }
3224
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(React4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3225
+ "div",
3226
+ {
3227
+ ref: isCurrentGuideStep ? currentStepRef : null,
3228
+ className: `${isRoleChange ? "mt-3" : ""}`,
3229
+ children: [
3230
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm leading-6 text-gray-700", children: (() => {
3231
+ const text = message.content || "";
3232
+ if (message.kind === "guideStep") {
3233
+ const m = text.match(/^(Step\s+\d+:)([\s\S]*)/);
3234
+ if (m) {
3235
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
3236
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: m[1] }),
3237
+ m[2]
3238
+ ] });
3239
+ }
3240
+ }
3241
+ if (message.role === "assistant" && text) {
3242
+ return renderMarkdown(text);
3243
+ }
3244
+ return text || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "opacity-70", children: "Thinking\u2026" });
3245
+ })() }),
3246
+ message.role === "assistant" && message.structuredData && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3247
+ DataRenderer,
3248
+ {
3249
+ type: message.structuredData.type,
3250
+ data: message.structuredData.data
3251
+ }
3252
+ ) }),
3253
+ message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3254
+ "button",
3255
+ {
3256
+ type: "button",
3257
+ onClick: () => handleFollowupClick(message.id, followup),
3258
+ 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",
3259
+ children: followup.label
3260
+ },
3261
+ followup.id
3262
+ )) })
3263
+ ]
3264
+ }
3265
+ ) }, message.id);
3266
+ }),
3267
+ (activeGuide || guideComplete) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
3268
+ activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3269
+ Button,
3270
+ {
3271
+ type: "button",
3272
+ size: "sm",
3273
+ variant: "secondary",
3274
+ className: "h-7 w-7 rounded-full p-0 bg-gray-100 hover:bg-gray-200 border border-gray-200",
3275
+ onClick: goBackGuide,
3276
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
3277
+ }
3278
+ ),
3279
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3029
3280
  Button,
3030
3281
  {
3031
3282
  type: "button",
3032
3283
  size: "sm",
3033
3284
  variant: "secondary",
3034
3285
  className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
3035
- onClick: handleActionSubmit,
3286
+ onClick: guideComplete ? handleBack : advanceGuide,
3036
3287
  children: [
3037
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Confirm" }),
3288
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: guideComplete ? "Done" : "Next" }),
3038
3289
  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
3039
3290
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
3040
3291
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
3041
3292
  ] })
3042
3293
  ]
3043
3294
  }
3044
- ) })
3045
- ] }, message.id);
3046
- }
3047
- if (message.kind === "bulkPreview" && message.csvData) {
3048
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
3049
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
3050
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
3051
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-100 px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
3052
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-gray-600" }),
3053
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
3054
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-gray-500", children: [
3055
- "\u2022 ",
3056
- message.csvData.rowCount,
3057
- " rows"
3058
- ] })
3059
- ] }),
3060
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100", children: [
3061
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Columns" }),
3062
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-1", children: message.csvData.columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded", children: col }, i)) })
3063
- ] }),
3064
- message.csvData.sampleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2", children: [
3065
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Sample Data" }),
3066
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-xs text-gray-600 bg-white rounded px-2 py-1 border border-gray-100", children: [
3067
- Object.entries(row).slice(0, 3).map(([key, val], j) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
3068
- j > 0 && " \u2022 ",
3069
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-gray-400", children: [
3070
- key,
3071
- ":"
3072
- ] }),
3073
- " ",
3074
- val
3075
- ] }, key)),
3076
- Object.keys(row).length > 3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-gray-400", children: " ..." })
3077
- ] }, i)) })
3078
- ] }),
3079
- message.suggestedAction && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-blue-700", children: [
3080
- "Suggested action: ",
3081
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: message.suggestedAction.replace(/_/g, " ") })
3082
- ] }) })
3083
- ] }),
3084
- message.bulkSessionId && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
3085
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3086
- Button,
3087
- {
3088
- type: "button",
3089
- size: "sm",
3090
- variant: "secondary",
3091
- className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
3092
- onClick: () => message.bulkSessionId && confirmBulkOperation(message.bulkSessionId),
3093
- children: [
3094
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
3095
- "Process ",
3096
- message.csvData.rowCount,
3097
- " rows"
3098
- ] }),
3099
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
3100
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
3101
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
3102
- ] })
3103
- ]
3104
- }
3105
- ),
3106
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3107
- Button,
3108
- {
3109
- type: "button",
3110
- size: "sm",
3111
- variant: "ghost",
3112
- className: "h-8 rounded-xl px-3 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100",
3113
- onClick: cancelBulkOperation,
3114
- children: "Cancel"
3115
- }
3116
- )
3117
- ] })
3118
- ] }, message.id);
3119
- }
3120
- if (message.kind === "bulkProgress" && message.bulkProgress) {
3121
- const { processed, total, successes, failures } = message.bulkProgress;
3122
- const percentage = Math.round(processed / total * 100);
3123
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
3124
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
3125
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-blue-600" }),
3126
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-sm font-medium text-gray-700", children: [
3127
- "Processing... ",
3128
- processed,
3129
- " of ",
3130
- total
3131
- ] })
3132
- ] }),
3133
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3134
- "div",
3135
- {
3136
- className: "h-full bg-blue-600 transition-all duration-300",
3137
- style: { width: `${percentage}%` }
3138
- }
3139
- ) }),
3140
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
3141
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1", children: [
3142
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3 text-green-600" }),
3143
- successes,
3144
- " successful"
3145
- ] }),
3146
- failures > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
3147
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
3148
- failures,
3149
- " failed"
3150
- ] })
3151
- ] })
3152
- ] }) }, message.id);
3153
- }
3154
- if (message.kind === "bulkSummary" && message.bulkSummary) {
3155
- const { total, successes, failures, navigationPage } = message.bulkSummary;
3156
- const hasFailures = failures.length > 0;
3157
- const pageLabel = navigationPage?.page === "customers" ? "Customers" : navigationPage?.page === "dashboard" ? "Dashboard" : navigationPage?.page === "settings" ? "Settings" : "Results";
3158
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `rounded-lg border p-3 ${hasFailures ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`, children: [
3159
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
3160
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}` }),
3161
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
3162
- ] }),
3163
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
3164
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-4 text-xs", children: [
3165
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-green-700", children: [
3166
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3" }),
3167
- successes,
3168
- " successful"
3169
- ] }),
3170
- hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
3171
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
3172
- failures.length,
3173
- " failed"
3174
- ] })
3175
- ] }),
3176
- hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
3177
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
3178
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
3179
- failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-xs text-red-700 bg-red-50 rounded px-2 py-1", children: [
3180
- "Row ",
3181
- failure.row,
3182
- ": ",
3183
- failure.error || "Unknown error"
3184
- ] }, i)),
3185
- failures.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-xs text-amber-600", children: [
3186
- "...and ",
3187
- failures.length - 5,
3188
- " more"
3189
- ] })
3190
- ] })
3191
- ] }),
3192
- navigationPage && successes > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3295
+ )
3296
+ ] }),
3297
+ (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3298
+ AssistantActivity,
3299
+ {
3300
+ phase,
3301
+ progressSteps
3302
+ }
3303
+ ) }),
3304
+ !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: messagesEndRef })
3305
+ ] }) }) }) }) }),
3306
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-4 py-3 border-t border-gray-100 bg-gray-50/50 shrink-0", children: [
3307
+ pendingFile && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
3308
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
3309
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
3310
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3193
3311
  "button",
3194
3312
  {
3195
3313
  type: "button",
3196
- onClick: (e) => {
3197
- e.preventDefault();
3198
- e.stopPropagation();
3199
- console.log("[DEBUG] Button clicked - navigationPage:", navigationPage, "onNavigate:", !!onNavigate);
3200
- if (onNavigate && navigationPage.page) {
3201
- console.log("[DEBUG] Calling onNavigate with page:", navigationPage.page);
3202
- onNavigate(navigationPage.page, navigationPage.subtab);
3203
- } else {
3204
- console.log("[DEBUG] Condition failed - onNavigate:", !!onNavigate, "navigationPage.page:", navigationPage.page);
3205
- }
3314
+ onClick: () => {
3315
+ setPendingFile(null);
3316
+ if (fileInputRef.current) fileInputRef.current.value = "";
3206
3317
  },
3207
- className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 transition-colors group cursor-pointer",
3208
- children: [
3209
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-gray-100 rounded text-[10px] font-medium text-gray-600 group-hover:bg-gray-200", children: [
3210
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-2.5 w-2.5" }),
3211
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "+" }),
3212
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-2.5 w-2.5" })
3213
- ] }),
3214
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
3215
- "View ",
3216
- pageLabel
3217
- ] })
3218
- ]
3318
+ className: "text-blue-600 hover:text-blue-800",
3319
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
3219
3320
  }
3220
- ) })
3221
- ] }) }, message.id);
3222
- }
3223
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(React4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3224
- "div",
3225
- {
3226
- ref: isCurrentGuideStep ? currentStepRef : null,
3227
- className: `${isRoleChange ? "mt-3" : ""}`,
3228
- children: [
3229
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm leading-6 text-gray-700", children: (() => {
3230
- const text = message.content || "";
3231
- if (message.kind === "guideStep") {
3232
- const m = text.match(/^(Step\s+\d+:)([\s\S]*)/);
3233
- if (m) {
3234
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
3235
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: m[1] }),
3236
- m[2]
3237
- ] });
3321
+ )
3322
+ ] }),
3323
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { onSubmit: handleSubmit, className: "w-full", children: [
3324
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3325
+ "input",
3326
+ {
3327
+ ref: fileInputRef,
3328
+ type: "file",
3329
+ accept: ".csv",
3330
+ className: "hidden",
3331
+ onChange: (e) => {
3332
+ const file = e.target.files?.[0];
3333
+ if (file) {
3334
+ setPendingFile(file);
3238
3335
  }
3239
3336
  }
3240
- if (message.role === "assistant" && text) {
3241
- return renderMarkdown(text);
3337
+ }
3338
+ ),
3339
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full items-center gap-2 rounded-2xl border border-gray-200 bg-white px-3 py-2 shadow-sm", children: [
3340
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3341
+ Button,
3342
+ {
3343
+ type: "button",
3344
+ size: "icon",
3345
+ variant: "ghost",
3346
+ onClick: () => fileInputRef.current?.click(),
3347
+ className: "h-8 w-8 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
3348
+ title: "Upload CSV for bulk operations",
3349
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Paperclip, { className: "h-4 w-4" })
3242
3350
  }
3243
- return text || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "opacity-70", children: "Thinking\u2026" });
3244
- })() }),
3245
- message.role === "assistant" && message.structuredData && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3246
- DataRenderer,
3351
+ ),
3352
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3353
+ Input,
3247
3354
  {
3248
- type: message.structuredData.type,
3249
- data: message.structuredData.data
3355
+ placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
3356
+ value: input,
3357
+ onChange: (e) => setInput(e.target.value),
3358
+ onKeyDown: (e) => {
3359
+ if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
3360
+ const currentBulkSession = pendingBulkSessionRef.current;
3361
+ if (currentBulkSession) {
3362
+ e.preventDefault();
3363
+ e.stopPropagation();
3364
+ confirmBulkOperation(currentBulkSession);
3365
+ return;
3366
+ }
3367
+ if (pendingAction) {
3368
+ e.preventDefault();
3369
+ e.stopPropagation();
3370
+ handleActionSubmit();
3371
+ return;
3372
+ }
3373
+ if (pendingNavigation) {
3374
+ e.preventDefault();
3375
+ e.stopPropagation();
3376
+ handleConfirmNavigation(pendingNavigation);
3377
+ return;
3378
+ }
3379
+ const currentGuide = activeGuideRef.current;
3380
+ if (currentGuide) {
3381
+ e.preventDefault();
3382
+ e.stopPropagation();
3383
+ advanceGuide();
3384
+ return;
3385
+ }
3386
+ }
3387
+ },
3388
+ className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400"
3250
3389
  }
3251
- ) }),
3252
- message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3253
- "button",
3390
+ ),
3391
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3392
+ Button,
3254
3393
  {
3255
- type: "button",
3256
- onClick: () => handleFollowupClick(message.id, followup),
3257
- 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",
3258
- children: followup.label
3259
- },
3260
- followup.id
3261
- )) })
3262
- ]
3263
- }
3264
- ) }, message.id);
3265
- }),
3266
- (activeGuide || guideComplete) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
3267
- activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3268
- Button,
3269
- {
3270
- type: "button",
3271
- size: "sm",
3272
- variant: "secondary",
3273
- className: "h-7 w-7 rounded-full p-0 bg-gray-100 hover:bg-gray-200 border border-gray-200",
3274
- onClick: goBackGuide,
3275
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
3276
- }
3277
- ),
3278
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3279
- Button,
3280
- {
3281
- type: "button",
3282
- size: "sm",
3283
- variant: "secondary",
3284
- className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
3285
- onClick: guideComplete ? handleBack : advanceGuide,
3286
- children: [
3287
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: guideComplete ? "Done" : "Next" }),
3288
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
3289
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
3290
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
3291
- ] })
3292
- ]
3293
- }
3294
- )
3295
- ] }),
3296
- (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3297
- AssistantActivity,
3298
- {
3299
- phase,
3300
- progressSteps
3301
- }
3302
- ) }),
3303
- !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: messagesEndRef })
3304
- ] }) }) }) }) }),
3305
- !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-4 py-3 border-t border-gray-100 bg-gray-50/50 shrink-0", children: [
3306
- pendingFile && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
3307
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
3308
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
3394
+ type: "submit",
3395
+ size: "icon",
3396
+ disabled: !input.trim() && !pendingFile,
3397
+ className: "h-8 w-8 rounded-full bg-gray-900 hover:bg-gray-800 disabled:bg-gray-300",
3398
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowUp, { className: "h-4 w-4" })
3399
+ }
3400
+ )
3401
+ ] })
3402
+ ] })
3403
+ ] }),
3309
3404
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3310
- "button",
3405
+ GuideCursor,
3311
3406
  {
3312
- type: "button",
3313
- onClick: () => {
3314
- setPendingFile(null);
3315
- if (fileInputRef.current) fileInputRef.current.value = "";
3316
- },
3317
- className: "text-blue-600 hover:text-blue-800",
3318
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
3407
+ x: cursorState.x,
3408
+ y: cursorState.y,
3409
+ visible: cursorState.visible,
3410
+ onClick: cursorState.onClick
3319
3411
  }
3320
3412
  )
3321
- ] }),
3322
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { onSubmit: handleSubmit, className: "w-full", children: [
3323
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3324
- "input",
3325
- {
3326
- ref: fileInputRef,
3327
- type: "file",
3328
- accept: ".csv",
3329
- className: "hidden",
3330
- onChange: (e) => {
3331
- const file = e.target.files?.[0];
3332
- if (file) {
3333
- setPendingFile(file);
3334
- }
3335
- }
3336
- }
3337
- ),
3338
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full items-center gap-2 rounded-2xl border border-gray-200 bg-white px-3 py-2 shadow-sm", children: [
3339
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3340
- Button,
3341
- {
3342
- type: "button",
3343
- size: "icon",
3344
- variant: "ghost",
3345
- onClick: () => fileInputRef.current?.click(),
3346
- className: "h-8 w-8 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
3347
- title: "Upload CSV for bulk operations",
3348
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Paperclip, { className: "h-4 w-4" })
3349
- }
3350
- ),
3351
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3352
- Input,
3353
- {
3354
- placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
3355
- value: input,
3356
- onChange: (e) => setInput(e.target.value),
3357
- onKeyDown: (e) => {
3358
- if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
3359
- const currentBulkSession = pendingBulkSessionRef.current;
3360
- if (currentBulkSession) {
3361
- e.preventDefault();
3362
- e.stopPropagation();
3363
- confirmBulkOperation(currentBulkSession);
3364
- return;
3365
- }
3366
- if (pendingAction) {
3367
- e.preventDefault();
3368
- e.stopPropagation();
3369
- handleActionSubmit();
3370
- return;
3371
- }
3372
- if (pendingNavigation) {
3373
- e.preventDefault();
3374
- e.stopPropagation();
3375
- handleConfirmNavigation(pendingNavigation);
3376
- return;
3377
- }
3378
- const currentGuide = activeGuideRef.current;
3379
- if (currentGuide) {
3380
- e.preventDefault();
3381
- e.stopPropagation();
3382
- advanceGuide();
3383
- return;
3384
- }
3385
- }
3386
- },
3387
- className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400"
3388
- }
3389
- ),
3390
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3391
- Button,
3392
- {
3393
- type: "submit",
3394
- size: "icon",
3395
- disabled: !input.trim() && !pendingFile,
3396
- className: "h-8 w-8 rounded-full bg-gray-900 hover:bg-gray-800 disabled:bg-gray-300",
3397
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowUp, { className: "h-4 w-4" })
3398
- }
3399
- )
3400
- ] })
3401
- ] })
3402
- ] }),
3413
+ ]
3414
+ }
3415
+ );
3416
+ }
3417
+ function PanelToggle({ isOpen, onClick, className = "" }) {
3418
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3419
+ "button",
3420
+ {
3421
+ type: "button",
3422
+ onClick,
3423
+ 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}`,
3424
+ "aria-label": isOpen ? "Close help panel" : "Open help panel",
3425
+ style: {
3426
+ right: isOpen ? `${PANEL_WIDTH}px` : "0px",
3427
+ transform: "translateY(-50%)"
3428
+ },
3429
+ children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" })
3430
+ }
3431
+ );
3432
+ }
3433
+ function ChatPanelWithToggle({
3434
+ onNavigate,
3435
+ onActionComplete,
3436
+ currentPage,
3437
+ agentUrl,
3438
+ startingQuestions,
3439
+ startingQuestionsEndpoint,
3440
+ defaultOpen = false,
3441
+ isOpen: controlledIsOpen,
3442
+ onOpenChange
3443
+ }) {
3444
+ const [internalIsOpen, setInternalIsOpen] = React4.useState(defaultOpen);
3445
+ const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
3446
+ const setIsOpen = (open) => {
3447
+ if (controlledIsOpen === void 0) {
3448
+ setInternalIsOpen(open);
3449
+ }
3450
+ onOpenChange?.(open);
3451
+ };
3452
+ React4.useEffect(() => {
3453
+ const originalPadding = document.body.style.paddingRight;
3454
+ const originalTransition = document.body.style.transition;
3455
+ document.body.style.transition = "padding-right 0.3s ease";
3456
+ document.body.style.paddingRight = isOpen ? `${PANEL_WIDTH}px` : "0px";
3457
+ return () => {
3458
+ document.body.style.paddingRight = originalPadding;
3459
+ document.body.style.transition = originalTransition;
3460
+ };
3461
+ }, [isOpen]);
3462
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
3403
3463
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3404
- GuideCursor,
3464
+ PanelToggle,
3405
3465
  {
3406
- x: cursorState.x,
3407
- y: cursorState.y,
3408
- visible: cursorState.visible,
3409
- onClick: cursorState.onClick
3466
+ isOpen,
3467
+ onClick: () => setIsOpen(!isOpen)
3468
+ }
3469
+ ),
3470
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3471
+ ChatPanel,
3472
+ {
3473
+ isOpen,
3474
+ onClose: () => setIsOpen(false),
3475
+ onNavigate,
3476
+ onActionComplete,
3477
+ currentPage,
3478
+ agentUrl,
3479
+ startingQuestions,
3480
+ startingQuestionsEndpoint
3410
3481
  }
3411
3482
  )
3412
3483
  ] });
@@ -3416,10 +3487,16 @@ ${userText}`
3416
3487
  var import_jsx_runtime10 = require("react/jsx-runtime");
3417
3488
  function KiteChatWrapper({
3418
3489
  initialConfig,
3419
- onConfigUpdate
3490
+ onConfigUpdate,
3491
+ onStateUpdate
3420
3492
  }) {
3421
3493
  const [config, setConfig] = import_react.default.useState(initialConfig);
3422
3494
  const [currentPage, setCurrentPage] = import_react.default.useState(initialConfig.currentPage || "dashboard");
3495
+ const [isOpen, setIsOpen] = import_react.default.useState(false);
3496
+ const isOpenRef = import_react.default.useRef(false);
3497
+ import_react.default.useEffect(() => {
3498
+ isOpenRef.current = isOpen;
3499
+ }, [isOpen]);
3423
3500
  import_react.default.useEffect(() => {
3424
3501
  onConfigUpdate((newConfig) => {
3425
3502
  if (newConfig.currentPage !== void 0) {
@@ -3427,7 +3504,11 @@ function KiteChatWrapper({
3427
3504
  }
3428
3505
  setConfig((prev) => ({ ...prev, ...newConfig }));
3429
3506
  });
3430
- }, [onConfigUpdate]);
3507
+ onStateUpdate({
3508
+ setIsOpen: (open) => setIsOpen(open),
3509
+ getIsOpen: () => isOpenRef.current
3510
+ });
3511
+ }, [onConfigUpdate, onStateUpdate]);
3431
3512
  import_react.default.useEffect(() => {
3432
3513
  const container = document.getElementById("kite-chat-root");
3433
3514
  if (!container) return;
@@ -3441,12 +3522,16 @@ function KiteChatWrapper({
3441
3522
  }
3442
3523
  }, [config.theme]);
3443
3524
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3444
- ChatPanel,
3525
+ ChatPanelWithToggle,
3445
3526
  {
3527
+ isOpen,
3528
+ onOpenChange: setIsOpen,
3446
3529
  currentPage,
3447
3530
  agentUrl: config.agentUrl,
3448
3531
  onNavigate: (page, subtab) => config.onNavigate?.(page, subtab),
3449
- onActionComplete: config.onActionComplete
3532
+ onActionComplete: config.onActionComplete,
3533
+ startingQuestions: config.startingQuestions,
3534
+ startingQuestionsEndpoint: config.startingQuestionsEndpoint
3450
3535
  }
3451
3536
  );
3452
3537
  }
@@ -3454,6 +3539,7 @@ function createKiteChat(config) {
3454
3539
  let root = null;
3455
3540
  let containerElement = null;
3456
3541
  let configUpdater = null;
3542
+ let stateUpdaters = null;
3457
3543
  let currentConfig = { ...config };
3458
3544
  const instance = {
3459
3545
  mount(container) {
@@ -3481,6 +3567,9 @@ function createKiteChat(config) {
3481
3567
  initialConfig: currentConfig,
3482
3568
  onConfigUpdate: (updater) => {
3483
3569
  configUpdater = updater;
3570
+ },
3571
+ onStateUpdate: (updaters) => {
3572
+ stateUpdaters = updaters;
3484
3573
  }
3485
3574
  }
3486
3575
  )
@@ -3496,8 +3585,22 @@ function createKiteChat(config) {
3496
3585
  root = null;
3497
3586
  containerElement = null;
3498
3587
  configUpdater = null;
3588
+ stateUpdaters = null;
3499
3589
  console.log("[KiteChat] Unmounted");
3500
3590
  },
3591
+ open() {
3592
+ stateUpdaters?.setIsOpen(true);
3593
+ },
3594
+ close() {
3595
+ stateUpdaters?.setIsOpen(false);
3596
+ },
3597
+ toggle() {
3598
+ const isCurrentlyOpen = stateUpdaters?.getIsOpen() ?? false;
3599
+ stateUpdaters?.setIsOpen(!isCurrentlyOpen);
3600
+ },
3601
+ isOpen() {
3602
+ return stateUpdaters?.getIsOpen() ?? false;
3603
+ },
3501
3604
  setCurrentPage(page) {
3502
3605
  currentConfig.currentPage = page;
3503
3606
  configUpdater?.({ currentPage: page });