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