@kite-copilot/chat-panel 0.2.53 → 0.2.54

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 (8) hide show
  1. package/dist/auto.cjs +1187 -1083
  2. package/dist/auto.js +1 -1
  3. package/dist/{chunk-VXJQZR5G.js → chunk-TK7U64UR.js} +1187 -1083
  4. package/dist/embed.global.js +61 -26
  5. package/dist/index.cjs +1187 -1083
  6. package/dist/index.js +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +1 -1
package/dist/auto.cjs CHANGED
@@ -40,6 +40,7 @@ var import_client = require("react-dom/client");
40
40
 
41
41
  // src/ChatPanel.tsx
42
42
  var React6 = __toESM(require("react"), 1);
43
+ var import_react_dom = require("react-dom");
43
44
  var import_supabase_js = require("@supabase/supabase-js");
44
45
 
45
46
  // src/lib/utils.ts
@@ -1560,53 +1561,107 @@ function ImageLightbox({
1560
1561
  window.open(imageUrl, "_blank");
1561
1562
  }
1562
1563
  };
1563
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1564
- "div",
1565
- {
1566
- className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/80",
1567
- onClick: onClose,
1568
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
1569
- "div",
1570
- {
1571
- className: "relative max-w-[90vw] max-h-[90vh] flex flex-col items-center",
1572
- onClick: (e) => e.stopPropagation(),
1573
- children: [
1574
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1575
- "img",
1576
- {
1577
- src: imageUrl,
1578
- alt: "Full size preview",
1579
- className: "max-w-full max-h-[80vh] object-contain rounded-lg"
1580
- }
1581
- ),
1582
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-3 mt-4", children: [
1583
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
1584
- "button",
1585
- {
1586
- onClick: handleDownload,
1587
- className: "flex items-center gap-2 px-4 py-2 bg-white text-gray-800 rounded-lg hover:bg-gray-100 transition-colors text-sm font-medium",
1588
- children: [
1589
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Download, { className: "h-4 w-4" }),
1590
- "Download"
1591
- ]
1592
- }
1593
- ),
1594
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
1595
- "button",
1596
- {
1597
- onClick: onClose,
1598
- className: "flex items-center gap-2 px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors text-sm font-medium",
1599
- children: [
1600
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-4 w-4" }),
1601
- "Close"
1602
- ]
1603
- }
1604
- )
1605
- ] })
1606
- ]
1607
- }
1608
- )
1609
- }
1564
+ return (0, import_react_dom.createPortal)(
1565
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
1566
+ "div",
1567
+ {
1568
+ style: {
1569
+ position: "fixed",
1570
+ top: 0,
1571
+ left: 0,
1572
+ right: 0,
1573
+ bottom: 0,
1574
+ display: "flex",
1575
+ alignItems: "center",
1576
+ justifyContent: "center",
1577
+ backgroundColor: "rgba(0, 0, 0, 0.8)",
1578
+ zIndex: 99999
1579
+ },
1580
+ onClick: onClose,
1581
+ children: [
1582
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1583
+ "button",
1584
+ {
1585
+ onClick: (e) => {
1586
+ e.stopPropagation();
1587
+ onClose();
1588
+ },
1589
+ style: {
1590
+ position: "absolute",
1591
+ top: "16px",
1592
+ right: "16px",
1593
+ padding: "8px",
1594
+ borderRadius: "9999px",
1595
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
1596
+ color: "white",
1597
+ border: "none",
1598
+ cursor: "pointer",
1599
+ display: "flex",
1600
+ alignItems: "center",
1601
+ justifyContent: "center"
1602
+ },
1603
+ "aria-label": "Close",
1604
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { style: { height: "24px", width: "24px" } })
1605
+ }
1606
+ ),
1607
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
1608
+ "div",
1609
+ {
1610
+ style: {
1611
+ position: "relative",
1612
+ maxWidth: "90vw",
1613
+ maxHeight: "90vh",
1614
+ display: "flex",
1615
+ flexDirection: "column",
1616
+ alignItems: "center"
1617
+ },
1618
+ onClick: (e) => e.stopPropagation(),
1619
+ children: [
1620
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1621
+ "img",
1622
+ {
1623
+ src: imageUrl,
1624
+ alt: "Full size preview",
1625
+ style: {
1626
+ maxWidth: "100%",
1627
+ maxHeight: "85vh",
1628
+ objectFit: "contain",
1629
+ borderRadius: "8px",
1630
+ boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
1631
+ }
1632
+ }
1633
+ ),
1634
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", gap: "12px", marginTop: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
1635
+ "button",
1636
+ {
1637
+ onClick: handleDownload,
1638
+ style: {
1639
+ display: "flex",
1640
+ alignItems: "center",
1641
+ gap: "8px",
1642
+ padding: "8px 16px",
1643
+ backgroundColor: "white",
1644
+ color: "#1f2937",
1645
+ borderRadius: "8px",
1646
+ border: "none",
1647
+ cursor: "pointer",
1648
+ fontSize: "14px",
1649
+ fontWeight: 500,
1650
+ boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
1651
+ },
1652
+ children: [
1653
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Download, { style: { height: "16px", width: "16px" } }),
1654
+ "Download"
1655
+ ]
1656
+ }
1657
+ ) })
1658
+ ]
1659
+ }
1660
+ )
1661
+ ]
1662
+ }
1663
+ ),
1664
+ document.body
1610
1665
  );
1611
1666
  }
1612
1667
  function ChatPanel({
@@ -2029,8 +2084,28 @@ function ChatPanel({
2029
2084
  file,
2030
2085
  preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : ""
2031
2086
  }));
2032
- setPendingImages((prev) => [...prev, ...newImages]);
2087
+ console.log("[KiteChat] Adding images to pending:", newImages.length, "files");
2088
+ setPendingImages((prev) => {
2089
+ const updated = [...prev, ...newImages];
2090
+ console.log("[KiteChat] pendingImages now:", updated.length);
2091
+ return updated;
2092
+ });
2033
2093
  }, []);
2094
+ React6.useEffect(() => {
2095
+ const hasText = input.trim().length > 0;
2096
+ const hasFile = !!pendingFile;
2097
+ const hasImages = pendingImages.length > 0;
2098
+ const disabled = !hasText && !hasFile && !hasImages || isWaitingForAuth;
2099
+ console.log("[KiteChat] Send button state:", {
2100
+ hasText,
2101
+ hasFile,
2102
+ hasImages,
2103
+ pendingImagesCount: pendingImages.length,
2104
+ isWaitingForAuth,
2105
+ authStatus: authState.status,
2106
+ disabled
2107
+ });
2108
+ }, [input, pendingFile, pendingImages, isWaitingForAuth, authState.status]);
2034
2109
  const handleDragOver = React6.useCallback((e) => {
2035
2110
  e.preventDefault();
2036
2111
  e.stopPropagation();
@@ -2192,12 +2267,20 @@ function ChatPanel({
2192
2267
  onNavigate
2193
2268
  ]);
2194
2269
  const connectToEscalationWs = React6.useCallback((currentSessionId) => {
2195
- if (!agentUrl) return;
2270
+ if (!agentUrl) {
2271
+ console.log("[KiteChat] No agentUrl, skipping WebSocket connection");
2272
+ return;
2273
+ }
2196
2274
  if (escalationWsRef.current) {
2275
+ console.log("[KiteChat] Closing existing WebSocket connection");
2197
2276
  escalationWsRef.current.close();
2198
2277
  }
2199
2278
  const wsUrl = agentUrl.replace(/^http/, "ws") + `/ws/escalation/${currentSessionId}`;
2279
+ console.log("[KiteChat] Connecting to escalation WebSocket:", wsUrl);
2200
2280
  const ws = new WebSocket(wsUrl);
2281
+ ws.onopen = () => {
2282
+ console.log("[KiteChat] Escalation WebSocket connected successfully");
2283
+ };
2201
2284
  ws.onmessage = (event) => {
2202
2285
  try {
2203
2286
  const data = JSON.parse(event.data);
@@ -2228,13 +2311,18 @@ function ChatPanel({
2228
2311
  ws.onerror = (err) => {
2229
2312
  console.error("[KiteChat] Escalation WebSocket error:", err);
2230
2313
  };
2231
- ws.onclose = () => {
2314
+ ws.onclose = (event) => {
2315
+ console.log("[KiteChat] Escalation WebSocket closed - code:", event.code, "reason:", event.reason);
2232
2316
  };
2233
2317
  escalationWsRef.current = ws;
2234
2318
  }, [agentUrl]);
2235
2319
  const sendEscalatedMessage = React6.useCallback(async (content) => {
2236
- if (!escalationWsRef.current || escalationWsRef.current.readyState !== WebSocket.OPEN) {
2237
- console.error("[KiteChat] Escalation WebSocket not connected");
2320
+ if (!escalationWsRef.current) {
2321
+ console.error("[KiteChat] Escalation WebSocket not connected - no ref");
2322
+ return false;
2323
+ }
2324
+ if (escalationWsRef.current.readyState !== WebSocket.OPEN) {
2325
+ console.error("[KiteChat] Escalation WebSocket not connected - state:", escalationWsRef.current.readyState, "(0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED)");
2238
2326
  return false;
2239
2327
  }
2240
2328
  try {
@@ -2266,7 +2354,9 @@ function ChatPanel({
2266
2354
  };
2267
2355
  }, []);
2268
2356
  React6.useEffect(() => {
2357
+ console.log("[KiteChat] Escalation useEffect - isEscalated:", isEscalated, "sessionId:", sessionId);
2269
2358
  if (isEscalated && sessionId) {
2359
+ console.log("[KiteChat] Triggering WebSocket connection for escalation");
2270
2360
  connectToEscalationWs(sessionId);
2271
2361
  }
2272
2362
  }, [isEscalated, sessionId, connectToEscalationWs]);
@@ -3536,8 +3626,8 @@ ${userText}`
3536
3626
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3537
3627
  "section",
3538
3628
  {
3539
- 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"}`,
3540
- style: { width: `${PANEL_WIDTH}px` },
3629
+ className: `fixed bottom-4 z-40 flex flex-col bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-2xl ${corner === "bottom-left" ? "left-4" : "right-4"} ${isOpen ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"}`,
3630
+ style: { width: `${PANEL_WIDTH}px`, height: `${PANEL_HEIGHT}px` },
3541
3631
  children: [
3542
3632
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0", children: [
3543
3633
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
@@ -3568,8 +3658,8 @@ ${userText}`
3568
3658
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3569
3659
  "section",
3570
3660
  {
3571
- 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"}`,
3572
- style: { width: `${PANEL_WIDTH}px` },
3661
+ className: `fixed bottom-4 z-40 flex flex-col bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-2xl ${corner === "bottom-left" ? "left-4" : "right-4"} ${isOpen ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"}`,
3662
+ style: { width: `${PANEL_WIDTH}px`, height: `${PANEL_HEIGHT}px` },
3573
3663
  children: [
3574
3664
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0", children: [
3575
3665
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
@@ -3596,8 +3686,8 @@ ${userText}`
3596
3686
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3597
3687
  "section",
3598
3688
  {
3599
- 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"}`,
3600
- style: { width: `${PANEL_WIDTH}px` },
3689
+ className: `fixed bottom-4 z-40 flex flex-col bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-2xl ${corner === "bottom-left" ? "left-4" : "right-4"} ${isOpen ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"}`,
3690
+ style: { width: `${PANEL_WIDTH}px`, height: `${PANEL_HEIGHT}px` },
3601
3691
  children: [
3602
3692
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0", children: [
3603
3693
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
@@ -3649,9 +3739,8 @@ ${userText}`
3649
3739
  size: "sm",
3650
3740
  className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
3651
3741
  onClick: () => {
3652
- resetSession();
3653
3742
  setMessages([]);
3654
- setPanelView("landing");
3743
+ resetSession();
3655
3744
  setCurrentFolderId(void 0);
3656
3745
  setActiveGuide(void 0);
3657
3746
  activeGuideRef.current = void 0;
@@ -3683,1181 +3772,1184 @@ ${userText}`
3683
3772
  )
3684
3773
  ] })
3685
3774
  ] }),
3686
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3687
- "div",
3688
- {
3689
- 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",
3690
- children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full overflow-y-auto px-4", children: [
3691
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "py-3 transition-all duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "How can I help?" }) }),
3692
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pb-4 px-4", children: [
3693
- panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
3694
- const iconColors = [
3695
- "bg-blue-400",
3696
- "bg-green-400",
3697
- "bg-purple-400",
3698
- "bg-orange-400",
3699
- "bg-pink-400"
3700
- ];
3701
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3702
- Button,
3703
- {
3704
- type: "button",
3705
- size: "sm",
3706
- variant: "ghost",
3707
- className: "w-full justify-start rounded-lg px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-100 h-auto",
3708
- onClick: () => sendTopic(question.prompt),
3709
- children: [
3710
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3711
- "span",
3712
- {
3713
- className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}`
3714
- }
3715
- ),
3716
- question.label
3717
- ]
3718
- },
3719
- question.id
3720
- );
3721
- }) }) }),
3722
- panelView === "folder" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
3723
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-3 flex items-center gap-2", children: [
3724
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3775
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden relative", children: [
3776
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3777
+ "div",
3778
+ {
3779
+ className: `absolute inset-0 grid place-items-center overflow-y-auto ${isEmpty ? "visible" : "invisible pointer-events-none"}`,
3780
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full px-4", children: [
3781
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "py-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "How can I help?" }) }),
3782
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pb-4 px-4", children: [
3783
+ panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
3784
+ const iconColors = [
3785
+ "bg-blue-400",
3786
+ "bg-green-400",
3787
+ "bg-purple-400",
3788
+ "bg-orange-400",
3789
+ "bg-pink-400"
3790
+ ];
3791
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3725
3792
  Button,
3726
3793
  {
3727
3794
  type: "button",
3728
- size: "icon",
3795
+ size: "sm",
3729
3796
  variant: "ghost",
3730
- className: "h-7 w-7 rounded-full hover:bg-gray-100",
3731
- onClick: closeFolder,
3732
- "aria-label": "Back to suggestions",
3733
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowLeft, { className: "h-4 w-4 text-gray-500" })
3734
- }
3735
- ),
3736
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
3737
- ] }),
3738
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-1.5", children: folders.find((f) => f.id === currentFolderId)?.topics.map((topic) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3739
- Button,
3740
- {
3741
- type: "button",
3742
- size: "sm",
3743
- variant: "secondary",
3744
- 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",
3745
- onClick: () => sendTopic(topic.prompt),
3746
- children: topic.label
3747
- },
3748
- topic.id
3749
- )) })
3750
- ] })
3751
- ] })
3752
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollArea, { ref: messagesContainerRef, className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2 px-4 py-3", children: [
3753
- messages.map((message, index) => {
3754
- const isUser = message.role === "user";
3755
- const previousRole = index > 0 ? messages[index - 1].role : void 0;
3756
- const isRoleChange = previousRole !== void 0 && previousRole !== message.role;
3757
- const currentGuide = activeGuideRef.current || activeGuide;
3758
- let isCurrentGuideStep = false;
3759
- if (currentGuide && message.kind === "guideStep") {
3760
- if (message.guideStepIndex !== void 0) {
3761
- isCurrentGuideStep = message.guideStepIndex === currentGuide.stepIndex;
3762
- } else {
3763
- isCurrentGuideStep = index === messages.length - 1;
3764
- }
3765
- } else if (message.kind === "guideComplete") {
3766
- isCurrentGuideStep = index === messages.length - 1;
3767
- }
3768
- if (message.kind === "guideStep" && !isCurrentGuideStep) {
3769
- return null;
3770
- }
3771
- if (isUser) {
3772
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-end gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
3773
- message.imageUrls && message.imageUrls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1 justify-end max-w-[260px]", children: message.imageUrls.map((url, imgIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3774
- "button",
3775
- {
3776
- onClick: () => setLightboxImageUrl(url),
3777
- className: "block cursor-pointer",
3778
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3779
- "img",
3780
- {
3781
- src: url,
3782
- alt: `Attachment ${imgIndex + 1}`,
3783
- className: "max-h-32 max-w-[200px] rounded-lg object-cover border border-gray-700 hover:opacity-90 transition-opacity"
3784
- }
3785
- )
3797
+ className: "w-full justify-start rounded-lg px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-100 h-auto",
3798
+ onClick: () => sendTopic(question.prompt),
3799
+ children: [
3800
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3801
+ "span",
3802
+ {
3803
+ className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}`
3804
+ }
3805
+ ),
3806
+ question.label
3807
+ ]
3786
3808
  },
3787
- imgIndex
3788
- )) }),
3789
- message.content && !message.content.match(/^!\[image\]\([^)]+\)(\n!\[image\]\([^)]+\))*$/) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3 py-2 text-sm text-white shadow-sm", children: message.content.replace(/!\[image\]\([^)]+\)\n*/g, "").trim() })
3790
- ] }, message.id);
3791
- }
3792
- if (message.role === "agent") {
3793
- const imageRegex = /!\[image\]\(([^)]+)\)/g;
3794
- const extractedImageUrls = [];
3795
- let match;
3796
- const contentStr = message.content || "";
3797
- while ((match = imageRegex.exec(contentStr)) !== null) {
3798
- extractedImageUrls.push(match[1]);
3799
- }
3800
- const agentImageUrls = message.imageUrls || extractedImageUrls;
3801
- const agentTextContent = contentStr.replace(/!\[image\]\([^)]+\)\n*/g, "").trim();
3802
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-start gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
3803
- isRoleChange && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-gray-500 mb-1 ml-1", children: "Agent" }),
3804
- agentImageUrls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1 justify-start max-w-[300px]", children: agentImageUrls.map((url, imgIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3805
- "button",
3809
+ question.id
3810
+ );
3811
+ }) }) }),
3812
+ panelView === "folder" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
3813
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-3 flex items-center gap-2", children: [
3814
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3815
+ Button,
3816
+ {
3817
+ type: "button",
3818
+ size: "icon",
3819
+ variant: "ghost",
3820
+ className: "h-7 w-7 rounded-full hover:bg-gray-100",
3821
+ onClick: closeFolder,
3822
+ "aria-label": "Back to suggestions",
3823
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowLeft, { className: "h-4 w-4 text-gray-500" })
3824
+ }
3825
+ ),
3826
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
3827
+ ] }),
3828
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-1.5", children: folders.find((f) => f.id === currentFolderId)?.topics.map((topic) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3829
+ Button,
3806
3830
  {
3807
- onClick: () => setLightboxImageUrl(url),
3808
- className: "block cursor-pointer",
3809
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3810
- "img",
3811
- {
3812
- src: url,
3813
- alt: `Attachment ${imgIndex + 1}`,
3814
- className: "max-h-32 max-w-[200px] rounded-lg object-cover border border-gray-300 hover:opacity-90 transition-opacity"
3815
- }
3816
- )
3831
+ type: "button",
3832
+ size: "sm",
3833
+ variant: "secondary",
3834
+ 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",
3835
+ onClick: () => sendTopic(topic.prompt),
3836
+ children: topic.label
3817
3837
  },
3818
- imgIndex
3819
- )) }),
3820
- agentTextContent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[300px] rounded-2xl rounded-bl-md bg-gray-100 px-4 py-3 text-sm text-gray-700", children: agentTextContent })
3821
- ] }, message.id);
3838
+ topic.id
3839
+ )) })
3840
+ ] })
3841
+ ] })
3842
+ ] })
3843
+ }
3844
+ ),
3845
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `flex-1 flex flex-col min-h-0 overflow-hidden ${isEmpty ? "invisible pointer-events-none" : "visible"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollArea, { ref: messagesContainerRef, className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2 px-4 py-3", children: [
3846
+ messages.map((message, index) => {
3847
+ const isUser = message.role === "user";
3848
+ const previousRole = index > 0 ? messages[index - 1].role : void 0;
3849
+ const isRoleChange = previousRole !== void 0 && previousRole !== message.role;
3850
+ const currentGuide = activeGuideRef.current || activeGuide;
3851
+ let isCurrentGuideStep = false;
3852
+ if (currentGuide && message.kind === "guideStep") {
3853
+ if (message.guideStepIndex !== void 0) {
3854
+ isCurrentGuideStep = message.guideStepIndex === currentGuide.stepIndex;
3855
+ } else {
3856
+ isCurrentGuideStep = index === messages.length - 1;
3822
3857
  }
3823
- if (message.kind === "searchSummary") {
3824
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3825
- "div",
3858
+ } else if (message.kind === "guideComplete") {
3859
+ isCurrentGuideStep = index === messages.length - 1;
3860
+ }
3861
+ if (message.kind === "guideStep" && !isCurrentGuideStep) {
3862
+ return null;
3863
+ }
3864
+ if (isUser) {
3865
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-end gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
3866
+ message.imageUrls && message.imageUrls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1 justify-end max-w-[260px]", children: message.imageUrls.map((url, imgIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3867
+ "button",
3826
3868
  {
3827
- className: `${isRoleChange ? "mt-3" : ""}`,
3869
+ onClick: () => setLightboxImageUrl(url),
3870
+ className: "block cursor-pointer",
3828
3871
  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3829
- AssistantSearchSummary,
3872
+ "img",
3830
3873
  {
3831
- title: message.title ?? "Search results",
3832
- links: message.links ?? []
3874
+ src: url,
3875
+ alt: `Attachment ${imgIndex + 1}`,
3876
+ className: "max-h-32 max-w-[200px] rounded-lg object-cover border border-gray-700 hover:opacity-90 transition-opacity"
3833
3877
  }
3834
3878
  )
3835
3879
  },
3836
- message.id
3837
- );
3880
+ imgIndex
3881
+ )) }),
3882
+ message.content && !message.content.match(/^!\[image\]\([^)]+\)(\n!\[image\]\([^)]+\))*$/) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3 py-2 text-sm text-white shadow-sm", children: message.content.replace(/!\[image\]\([^)]+\)\n*/g, "").trim() })
3883
+ ] }, message.id);
3884
+ }
3885
+ if (message.role === "agent") {
3886
+ const imageRegex = /!\[image\]\(([^)]+)\)/g;
3887
+ const extractedImageUrls = [];
3888
+ let match;
3889
+ const contentStr = message.content || "";
3890
+ while ((match = imageRegex.exec(contentStr)) !== null) {
3891
+ extractedImageUrls.push(match[1]);
3838
3892
  }
3839
- if (message.kind === "guideComplete") {
3840
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3841
- "div",
3893
+ const agentImageUrls = message.imageUrls || extractedImageUrls;
3894
+ const agentTextContent = contentStr.replace(/!\[image\]\([^)]+\)\n*/g, "").trim();
3895
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-start gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
3896
+ isRoleChange && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-gray-500 mb-1 ml-1", children: "Agent" }),
3897
+ agentImageUrls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1 justify-start max-w-[300px]", children: agentImageUrls.map((url, imgIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3898
+ "button",
3842
3899
  {
3843
- ref: isCurrentGuideStep ? currentStepRef : null,
3844
- className: `${isRoleChange ? "mt-3" : ""}`,
3845
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-green-50 border border-green-200 px-3 py-2.5 text-sm leading-6", children: [
3846
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CheckCircle2, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
3847
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium text-green-800", children: message.content })
3848
- ] })
3900
+ onClick: () => setLightboxImageUrl(url),
3901
+ className: "block cursor-pointer",
3902
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3903
+ "img",
3904
+ {
3905
+ src: url,
3906
+ alt: `Attachment ${imgIndex + 1}`,
3907
+ className: "max-h-32 max-w-[200px] rounded-lg object-cover border border-gray-300 hover:opacity-90 transition-opacity"
3908
+ }
3909
+ )
3849
3910
  },
3850
- message.id
3851
- );
3852
- }
3853
- if (message.kind === "navigationAction") {
3854
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3911
+ imgIndex
3912
+ )) }),
3913
+ agentTextContent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[300px] rounded-2xl rounded-bl-md bg-gray-100 px-4 py-3 text-sm text-gray-700", children: agentTextContent })
3914
+ ] }, message.id);
3915
+ }
3916
+ if (message.kind === "searchSummary") {
3917
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3918
+ "div",
3919
+ {
3920
+ className: `${isRoleChange ? "mt-3" : ""}`,
3921
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3922
+ AssistantSearchSummary,
3923
+ {
3924
+ title: message.title ?? "Search results",
3925
+ links: message.links ?? []
3926
+ }
3927
+ )
3928
+ },
3929
+ message.id
3930
+ );
3931
+ }
3932
+ if (message.kind === "guideComplete") {
3933
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3934
+ "div",
3935
+ {
3936
+ ref: isCurrentGuideStep ? currentStepRef : null,
3937
+ className: `${isRoleChange ? "mt-3" : ""}`,
3938
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-green-50 border border-green-200 px-3 py-2.5 text-sm leading-6", children: [
3939
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CheckCircle2, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
3940
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium text-green-800", children: message.content })
3941
+ ] })
3942
+ },
3943
+ message.id
3944
+ );
3945
+ }
3946
+ if (message.kind === "navigationAction") {
3947
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3948
+ "div",
3949
+ {
3950
+ className: `${isRoleChange ? "mt-3" : ""}`,
3951
+ children: [
3952
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-2 text-gray-700", children: message.content || "" }),
3953
+ message.navigationTarget && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3954
+ Button,
3955
+ {
3956
+ type: "button",
3957
+ size: "sm",
3958
+ variant: "secondary",
3959
+ className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
3960
+ onClick: () => message.navigationTarget && handleConfirmNavigation(
3961
+ message.navigationTarget
3962
+ ),
3963
+ children: [
3964
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Confirm" }),
3965
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
3966
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
3967
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
3968
+ ] })
3969
+ ]
3970
+ }
3971
+ ) })
3972
+ ]
3973
+ },
3974
+ message.id
3975
+ );
3976
+ }
3977
+ if (message.kind === "actionForm") {
3978
+ const actionType = message.actionType;
3979
+ const formData = Object.keys(actionFormData).length > 0 ? actionFormData : message.actionData || {};
3980
+ if (message.isSubmitted) {
3981
+ let successContent = "";
3982
+ if (actionType === "updateCompanyInfo") {
3983
+ successContent = "Company information has been updated successfully.";
3984
+ } else if (actionType === "addApiKey") {
3985
+ successContent = "API key has been added successfully.";
3986
+ } else if (actionType === "addCustomer") {
3987
+ successContent = "Customer has been added successfully.";
3988
+ } else if (actionType === "enable2FA") {
3989
+ successContent = "Two-factor authentication has been enabled successfully.";
3990
+ } else if (actionType === "disable2FA") {
3991
+ successContent = "Two-factor authentication has been disabled successfully.";
3992
+ } else if (actionType === "changePassword") {
3993
+ successContent = "Your password has been changed successfully.";
3994
+ } else if (actionType === "revokeSession") {
3995
+ successContent = "Session has been revoked successfully.";
3996
+ } else if (actionType === "toggleNotification") {
3997
+ successContent = "Notification preferences have been updated successfully.";
3998
+ } else if (actionType === "connectIntegration") {
3999
+ successContent = "Integration has been connected successfully.";
4000
+ } else if (actionType === "disconnectIntegration") {
4001
+ successContent = "Integration has been disconnected successfully.";
4002
+ } else if (actionType === "addPaymentMethod") {
4003
+ successContent = "Payment method has been added successfully.";
4004
+ } else if (actionType === "removePaymentMethod") {
4005
+ successContent = "Payment method has been removed successfully.";
4006
+ } else if (actionType === "deleteApiKey") {
4007
+ successContent = "API key has been deleted successfully.";
4008
+ } else if (actionType === "addWebhook") {
4009
+ successContent = "Webhook endpoint has been added successfully.";
4010
+ } else if (actionType === "updateCurrency") {
4011
+ successContent = "Currency preference has been updated successfully.";
4012
+ } else if (actionType === "updateTimezone") {
4013
+ successContent = "Timezone has been updated successfully.";
4014
+ } else if (actionType === "refundPayment") {
4015
+ successContent = "Refund has been processed successfully.";
4016
+ } else if (actionType === "exportCertificate") {
4017
+ successContent = "Certificate of Incorporation has been downloaded successfully.";
4018
+ } else if (actionType === "createSubscription") {
4019
+ successContent = "Subscription has been created successfully.";
4020
+ } else if (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") {
4021
+ successContent = "Block rule has been updated successfully.";
4022
+ } else {
4023
+ successContent = "Action completed successfully.";
4024
+ }
4025
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3855
4026
  "div",
3856
4027
  {
3857
4028
  className: `${isRoleChange ? "mt-3" : ""}`,
3858
- children: [
3859
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-2 text-gray-700", children: message.content || "" }),
3860
- message.navigationTarget && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3861
- Button,
3862
- {
3863
- type: "button",
3864
- size: "sm",
3865
- variant: "secondary",
3866
- className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
3867
- onClick: () => message.navigationTarget && handleConfirmNavigation(
3868
- message.navigationTarget
3869
- ),
3870
- children: [
3871
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Confirm" }),
3872
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
3873
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
3874
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
3875
- ] })
3876
- ]
3877
- }
3878
- ) })
3879
- ]
4029
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent })
3880
4030
  },
3881
4031
  message.id
3882
4032
  );
3883
4033
  }
3884
- if (message.kind === "actionForm") {
3885
- const actionType = message.actionType;
3886
- const formData = Object.keys(actionFormData).length > 0 ? actionFormData : message.actionData || {};
3887
- if (message.isSubmitted) {
3888
- let successContent = "";
3889
- if (actionType === "updateCompanyInfo") {
3890
- successContent = "Company information has been updated successfully.";
3891
- } else if (actionType === "addApiKey") {
3892
- successContent = "API key has been added successfully.";
3893
- } else if (actionType === "addCustomer") {
3894
- successContent = "Customer has been added successfully.";
3895
- } else if (actionType === "enable2FA") {
3896
- successContent = "Two-factor authentication has been enabled successfully.";
3897
- } else if (actionType === "disable2FA") {
3898
- successContent = "Two-factor authentication has been disabled successfully.";
3899
- } else if (actionType === "changePassword") {
3900
- successContent = "Your password has been changed successfully.";
3901
- } else if (actionType === "revokeSession") {
3902
- successContent = "Session has been revoked successfully.";
3903
- } else if (actionType === "toggleNotification") {
3904
- successContent = "Notification preferences have been updated successfully.";
3905
- } else if (actionType === "connectIntegration") {
3906
- successContent = "Integration has been connected successfully.";
3907
- } else if (actionType === "disconnectIntegration") {
3908
- successContent = "Integration has been disconnected successfully.";
3909
- } else if (actionType === "addPaymentMethod") {
3910
- successContent = "Payment method has been added successfully.";
3911
- } else if (actionType === "removePaymentMethod") {
3912
- successContent = "Payment method has been removed successfully.";
3913
- } else if (actionType === "deleteApiKey") {
3914
- successContent = "API key has been deleted successfully.";
3915
- } else if (actionType === "addWebhook") {
3916
- successContent = "Webhook endpoint has been added successfully.";
3917
- } else if (actionType === "updateCurrency") {
3918
- successContent = "Currency preference has been updated successfully.";
3919
- } else if (actionType === "updateTimezone") {
3920
- successContent = "Timezone has been updated successfully.";
3921
- } else if (actionType === "refundPayment") {
3922
- successContent = "Refund has been processed successfully.";
3923
- } else if (actionType === "exportCertificate") {
3924
- successContent = "Certificate of Incorporation has been downloaded successfully.";
3925
- } else if (actionType === "createSubscription") {
3926
- successContent = "Subscription has been created successfully.";
3927
- } else if (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") {
3928
- successContent = "Block rule has been updated successfully.";
3929
- } else {
3930
- successContent = "Action completed successfully.";
3931
- }
3932
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3933
- "div",
3934
- {
3935
- className: `${isRoleChange ? "mt-3" : ""}`,
3936
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent })
3937
- },
3938
- message.id
3939
- );
3940
- }
3941
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3942
- "div",
3943
- {
3944
- className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`,
3945
- children: [
3946
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
3947
- actionType === "updateCompanyInfo" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
3948
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
3949
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
3950
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
3951
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3952
- Input,
3953
- {
3954
- placeholder: "Acme Corporation",
3955
- value: formData.companyName || "",
3956
- onChange: (e) => setActionFormData({
3957
- ...actionFormData,
3958
- companyName: e.target.value
3959
- }),
3960
- className: "h-8 text-xs border-gray-200"
3961
- }
3962
- )
3963
- ] }),
3964
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
3965
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
3966
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3967
- Input,
3968
- {
3969
- type: "email",
3970
- placeholder: "contact@acme.com",
3971
- value: formData.email || "",
3972
- onChange: (e) => setActionFormData({
3973
- ...actionFormData,
3974
- email: e.target.value
3975
- }),
3976
- className: "h-8 text-xs border-gray-200"
3977
- }
3978
- )
3979
- ] })
3980
- ] }),
4034
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4035
+ "div",
4036
+ {
4037
+ className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`,
4038
+ children: [
4039
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
4040
+ actionType === "updateCompanyInfo" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
4041
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
3981
4042
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
3982
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Address" }),
4043
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
3983
4044
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3984
4045
  Input,
3985
4046
  {
3986
- placeholder: "123 Main St, San Francisco, CA",
3987
- value: formData.address || "",
4047
+ placeholder: "Acme Corporation",
4048
+ value: formData.companyName || "",
3988
4049
  onChange: (e) => setActionFormData({
3989
4050
  ...actionFormData,
3990
- address: e.target.value
4051
+ companyName: e.target.value
3991
4052
  }),
3992
4053
  className: "h-8 text-xs border-gray-200"
3993
4054
  }
3994
4055
  )
3995
4056
  ] }),
3996
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
3997
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
3998
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Phone" }),
3999
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4000
- Input,
4001
- {
4002
- type: "tel",
4003
- placeholder: "+1 (555) 123-4567",
4004
- value: formData.phone || "",
4005
- onChange: (e) => setActionFormData({
4006
- ...actionFormData,
4007
- phone: e.target.value
4008
- }),
4009
- className: "h-8 text-xs border-gray-200"
4010
- }
4011
- )
4012
- ] }),
4013
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4014
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
4015
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4016
- Input,
4017
- {
4018
- type: "url",
4019
- placeholder: "https://acme.com",
4020
- value: formData.website || "",
4021
- onChange: (e) => setActionFormData({
4022
- ...actionFormData,
4023
- website: e.target.value
4024
- }),
4025
- className: "h-8 text-xs border-gray-200"
4026
- }
4027
- )
4028
- ] })
4057
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4058
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
4059
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4060
+ Input,
4061
+ {
4062
+ type: "email",
4063
+ placeholder: "contact@acme.com",
4064
+ value: formData.email || "",
4065
+ onChange: (e) => setActionFormData({
4066
+ ...actionFormData,
4067
+ email: e.target.value
4068
+ }),
4069
+ className: "h-8 text-xs border-gray-200"
4070
+ }
4071
+ )
4029
4072
  ] })
4030
4073
  ] }),
4031
- actionType === "addApiKey" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4032
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name" }),
4074
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4075
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Address" }),
4033
4076
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4034
4077
  Input,
4035
4078
  {
4036
- placeholder: "Production Key",
4037
- value: formData.name || "",
4079
+ placeholder: "123 Main St, San Francisco, CA",
4080
+ value: formData.address || "",
4038
4081
  onChange: (e) => setActionFormData({
4039
4082
  ...actionFormData,
4040
- name: e.target.value
4083
+ address: e.target.value
4041
4084
  }),
4042
4085
  className: "h-8 text-xs border-gray-200"
4043
4086
  }
4044
4087
  )
4045
- ] }) }),
4046
- actionType === "addCustomer" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
4047
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
4048
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4049
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
4050
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4051
- Input,
4052
- {
4053
- placeholder: "Acme Corporation",
4054
- value: formData.name || "",
4055
- onChange: (e) => setActionFormData({
4056
- ...actionFormData,
4057
- name: e.target.value
4058
- }),
4059
- className: "h-8 text-xs border-gray-200"
4060
- }
4061
- )
4062
- ] }),
4063
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4064
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
4065
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4066
- Input,
4067
- {
4068
- type: "email",
4069
- placeholder: "contact@acme.com",
4070
- value: formData.email || "",
4071
- onChange: (e) => setActionFormData({
4072
- ...actionFormData,
4073
- email: e.target.value
4074
- }),
4075
- className: "h-8 text-xs border-gray-200"
4076
- }
4077
- )
4078
- ] })
4079
- ] }),
4088
+ ] }),
4089
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
4080
4090
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4081
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Location" }),
4091
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Phone" }),
4082
4092
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4083
4093
  Input,
4084
4094
  {
4085
- placeholder: "San Francisco, CA",
4086
- value: formData.location || "",
4095
+ type: "tel",
4096
+ placeholder: "+1 (555) 123-4567",
4097
+ value: formData.phone || "",
4087
4098
  onChange: (e) => setActionFormData({
4088
4099
  ...actionFormData,
4089
- location: e.target.value
4100
+ phone: e.target.value
4090
4101
  }),
4091
4102
  className: "h-8 text-xs border-gray-200"
4092
4103
  }
4093
4104
  )
4094
4105
  ] }),
4095
4106
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4096
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Subscription Tier" }),
4097
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4098
- "select",
4099
- {
4100
- value: formData.subscription || "Starter",
4101
- onChange: (e) => setActionFormData({
4102
- ...actionFormData,
4103
- subscription: e.target.value
4104
- }),
4105
- 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",
4106
- children: [
4107
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Starter", children: "Starter" }),
4108
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Professional", children: "Professional" }),
4109
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Enterprise", children: "Enterprise" })
4110
- ]
4111
- }
4112
- )
4113
- ] })
4114
- ] }),
4115
- (actionType === "enable2FA" || actionType === "disable2FA") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: actionType === "enable2FA" ? "This will enable two-factor authentication for your account. You'll need to set up an authenticator app." : "This will disable two-factor authentication for your account. Your account will be less secure." }) }),
4116
- actionType === "changePassword" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4117
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4118
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Current Password" }),
4107
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
4119
4108
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4120
4109
  Input,
4121
4110
  {
4122
- type: "password",
4123
- value: formData.currentPassword || "",
4111
+ type: "url",
4112
+ placeholder: "https://acme.com",
4113
+ value: formData.website || "",
4124
4114
  onChange: (e) => setActionFormData({
4125
4115
  ...actionFormData,
4126
- currentPassword: e.target.value
4116
+ website: e.target.value
4127
4117
  }),
4128
4118
  className: "h-8 text-xs border-gray-200"
4129
4119
  }
4130
4120
  )
4131
- ] }),
4121
+ ] })
4122
+ ] })
4123
+ ] }),
4124
+ actionType === "addApiKey" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4125
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name" }),
4126
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4127
+ Input,
4128
+ {
4129
+ placeholder: "Production Key",
4130
+ value: formData.name || "",
4131
+ onChange: (e) => setActionFormData({
4132
+ ...actionFormData,
4133
+ name: e.target.value
4134
+ }),
4135
+ className: "h-8 text-xs border-gray-200"
4136
+ }
4137
+ )
4138
+ ] }) }),
4139
+ actionType === "addCustomer" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
4140
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
4132
4141
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4133
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "New Password" }),
4142
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
4134
4143
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4135
4144
  Input,
4136
4145
  {
4137
- type: "password",
4138
- value: formData.newPassword || "",
4146
+ placeholder: "Acme Corporation",
4147
+ value: formData.name || "",
4139
4148
  onChange: (e) => setActionFormData({
4140
4149
  ...actionFormData,
4141
- newPassword: e.target.value
4150
+ name: e.target.value
4142
4151
  }),
4143
4152
  className: "h-8 text-xs border-gray-200"
4144
4153
  }
4145
4154
  )
4146
4155
  ] }),
4147
4156
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4148
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Confirm New Password" }),
4157
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
4149
4158
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4150
4159
  Input,
4151
4160
  {
4152
- type: "password",
4153
- value: formData.confirmPassword || "",
4161
+ type: "email",
4162
+ placeholder: "contact@acme.com",
4163
+ value: formData.email || "",
4154
4164
  onChange: (e) => setActionFormData({
4155
4165
  ...actionFormData,
4156
- confirmPassword: e.target.value
4166
+ email: e.target.value
4157
4167
  }),
4158
4168
  className: "h-8 text-xs border-gray-200"
4159
4169
  }
4160
4170
  )
4161
4171
  ] })
4162
4172
  ] }),
4163
- actionType === "toggleNotification" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4164
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4165
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Notification Type" }),
4166
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4167
- "select",
4168
- {
4169
- value: formData.notificationType || "paymentReceived",
4170
- onChange: (e) => setActionFormData({
4171
- ...actionFormData,
4172
- notificationType: e.target.value
4173
- }),
4174
- 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",
4175
- children: [
4176
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "paymentReceived", children: "Payment Received" }),
4177
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "paymentFailed", children: "Payment Failed" }),
4178
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "invoicePaid", children: "Invoice Paid" }),
4179
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "monthlySummary", children: "Monthly Summary" }),
4180
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "productUpdates", children: "Product Updates" })
4181
- ]
4182
- }
4183
- )
4184
- ] }),
4185
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
4186
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4187
- "input",
4188
- {
4189
- type: "checkbox",
4190
- checked: formData.enabled !== false,
4191
- onChange: (e) => setActionFormData({
4192
- ...actionFormData,
4193
- enabled: e.target.checked
4194
- }),
4195
- className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
4196
- }
4197
- ),
4198
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs text-black", children: "Enable this notification" })
4199
- ] })
4173
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4174
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Location" }),
4175
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4176
+ Input,
4177
+ {
4178
+ placeholder: "San Francisco, CA",
4179
+ value: formData.location || "",
4180
+ onChange: (e) => setActionFormData({
4181
+ ...actionFormData,
4182
+ location: e.target.value
4183
+ }),
4184
+ className: "h-8 text-xs border-gray-200"
4185
+ }
4186
+ )
4200
4187
  ] }),
4201
- (actionType === "connectIntegration" || actionType === "disconnectIntegration") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4202
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Integration" }),
4188
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4189
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Subscription Tier" }),
4203
4190
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4204
4191
  "select",
4205
4192
  {
4206
- value: formData.integrationName || "Slack",
4193
+ value: formData.subscription || "Starter",
4207
4194
  onChange: (e) => setActionFormData({
4208
4195
  ...actionFormData,
4209
- integrationName: e.target.value
4196
+ subscription: e.target.value
4210
4197
  }),
4211
4198
  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",
4212
4199
  children: [
4213
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Slack", children: "Slack" }),
4214
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Zapier", children: "Zapier" }),
4215
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Webhook", children: "Webhook" })
4200
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Starter", children: "Starter" }),
4201
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Professional", children: "Professional" }),
4202
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Enterprise", children: "Enterprise" })
4216
4203
  ]
4217
4204
  }
4218
4205
  )
4219
- ] }) }),
4220
- actionType === "addPaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4221
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4222
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Card Number" }),
4223
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4224
- Input,
4225
- {
4226
- placeholder: "1234 5678 9012 3456",
4227
- value: formData.cardNumber || "",
4228
- onChange: (e) => setActionFormData({
4229
- ...actionFormData,
4230
- cardNumber: e.target.value
4231
- }),
4232
- className: "h-8 text-xs border-gray-200"
4233
- }
4234
- )
4235
- ] }),
4236
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4237
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Expiry Date" }),
4238
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4239
- Input,
4240
- {
4241
- placeholder: "MM/YY",
4242
- value: formData.expiryDate || "",
4243
- onChange: (e) => setActionFormData({
4244
- ...actionFormData,
4245
- expiryDate: e.target.value
4246
- }),
4247
- className: "h-8 text-xs border-gray-200"
4248
- }
4249
- )
4250
- ] })
4206
+ ] })
4207
+ ] }),
4208
+ (actionType === "enable2FA" || actionType === "disable2FA") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: actionType === "enable2FA" ? "This will enable two-factor authentication for your account. You'll need to set up an authenticator app." : "This will disable two-factor authentication for your account. Your account will be less secure." }) }),
4209
+ actionType === "changePassword" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4210
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4211
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Current Password" }),
4212
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4213
+ Input,
4214
+ {
4215
+ type: "password",
4216
+ value: formData.currentPassword || "",
4217
+ onChange: (e) => setActionFormData({
4218
+ ...actionFormData,
4219
+ currentPassword: e.target.value
4220
+ }),
4221
+ className: "h-8 text-xs border-gray-200"
4222
+ }
4223
+ )
4251
4224
  ] }),
4252
- actionType === "removePaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: "This will remove the default payment method from your account." }) }),
4253
- actionType === "refundPayment" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4254
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4255
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Transaction ID or Customer Name" }),
4256
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4257
- Input,
4258
- {
4259
- placeholder: "e.g., txn_1234 or Acme Corp",
4260
- value: formData.transactionId || formData.customer || "",
4261
- onChange: (e) => {
4262
- const value = e.target.value;
4263
- if (value.startsWith("txn_") || /^\d+$/.test(value)) {
4264
- setActionFormData({
4265
- ...actionFormData,
4266
- transactionId: value,
4267
- customer: void 0
4268
- });
4269
- } else {
4270
- setActionFormData({
4271
- ...actionFormData,
4272
- customer: value,
4273
- transactionId: void 0
4274
- });
4275
- }
4276
- },
4277
- className: "h-8 text-xs border-gray-200"
4278
- }
4279
- )
4280
- ] }),
4281
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4282
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Amount (optional)" }),
4283
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4284
- Input,
4285
- {
4286
- placeholder: "$0.00",
4287
- value: formData.amount || "",
4288
- onChange: (e) => setActionFormData({
4289
- ...actionFormData,
4290
- amount: e.target.value
4291
- }),
4292
- className: "h-8 text-xs border-gray-200"
4293
- }
4294
- )
4295
- ] }),
4296
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4297
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Reason (optional)" }),
4298
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4299
- Input,
4300
- {
4301
- placeholder: "e.g., Customer request",
4302
- value: formData.reason || "",
4303
- onChange: (e) => setActionFormData({
4304
- ...actionFormData,
4305
- reason: e.target.value
4306
- }),
4307
- className: "h-8 text-xs border-gray-200"
4308
- }
4309
- )
4310
- ] })
4225
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4226
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "New Password" }),
4227
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4228
+ Input,
4229
+ {
4230
+ type: "password",
4231
+ value: formData.newPassword || "",
4232
+ onChange: (e) => setActionFormData({
4233
+ ...actionFormData,
4234
+ newPassword: e.target.value
4235
+ }),
4236
+ className: "h-8 text-xs border-gray-200"
4237
+ }
4238
+ )
4311
4239
  ] }),
4312
- actionType === "deleteApiKey" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4313
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4314
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name or ID" }),
4315
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4316
- Input,
4317
- {
4318
- placeholder: "Production Key",
4319
- value: formData.keyId || formData.name || "",
4320
- onChange: (e) => setActionFormData({
4321
- ...actionFormData,
4322
- keyId: e.target.value,
4323
- name: e.target.value
4324
- }),
4325
- className: "h-8 text-xs border-gray-200"
4326
- }
4327
- )
4328
- ] }),
4329
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-red-600", children: "Warning: This action cannot be undone. The API key will be permanently deleted." })
4240
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4241
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Confirm New Password" }),
4242
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4243
+ Input,
4244
+ {
4245
+ type: "password",
4246
+ value: formData.confirmPassword || "",
4247
+ onChange: (e) => setActionFormData({
4248
+ ...actionFormData,
4249
+ confirmPassword: e.target.value
4250
+ }),
4251
+ className: "h-8 text-xs border-gray-200"
4252
+ }
4253
+ )
4254
+ ] })
4255
+ ] }),
4256
+ actionType === "toggleNotification" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4257
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4258
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Notification Type" }),
4259
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4260
+ "select",
4261
+ {
4262
+ value: formData.notificationType || "paymentReceived",
4263
+ onChange: (e) => setActionFormData({
4264
+ ...actionFormData,
4265
+ notificationType: e.target.value
4266
+ }),
4267
+ 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",
4268
+ children: [
4269
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "paymentReceived", children: "Payment Received" }),
4270
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "paymentFailed", children: "Payment Failed" }),
4271
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "invoicePaid", children: "Invoice Paid" }),
4272
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "monthlySummary", children: "Monthly Summary" }),
4273
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "productUpdates", children: "Product Updates" })
4274
+ ]
4275
+ }
4276
+ )
4330
4277
  ] }),
4331
- actionType === "addWebhook" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4332
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4333
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Webhook URL" }),
4334
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4335
- Input,
4336
- {
4337
- type: "url",
4338
- placeholder: "https://example.com/webhook",
4339
- value: formData.url || "",
4340
- onChange: (e) => setActionFormData({
4341
- ...actionFormData,
4342
- url: e.target.value
4343
- }),
4344
- className: "h-8 text-xs border-gray-200"
4345
- }
4346
- )
4347
- ] }),
4348
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4349
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Name (optional)" }),
4350
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4351
- Input,
4352
- {
4353
- placeholder: "Production Webhook",
4354
- value: formData.name || "",
4355
- onChange: (e) => setActionFormData({
4356
- ...actionFormData,
4357
- name: e.target.value
4358
- }),
4359
- className: "h-8 text-xs border-gray-200"
4360
- }
4361
- )
4362
- ] })
4278
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
4279
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4280
+ "input",
4281
+ {
4282
+ type: "checkbox",
4283
+ checked: formData.enabled !== false,
4284
+ onChange: (e) => setActionFormData({
4285
+ ...actionFormData,
4286
+ enabled: e.target.checked
4287
+ }),
4288
+ className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
4289
+ }
4290
+ ),
4291
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs text-black", children: "Enable this notification" })
4292
+ ] })
4293
+ ] }),
4294
+ (actionType === "connectIntegration" || actionType === "disconnectIntegration") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4295
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Integration" }),
4296
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4297
+ "select",
4298
+ {
4299
+ value: formData.integrationName || "Slack",
4300
+ onChange: (e) => setActionFormData({
4301
+ ...actionFormData,
4302
+ integrationName: e.target.value
4303
+ }),
4304
+ 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",
4305
+ children: [
4306
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Slack", children: "Slack" }),
4307
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Zapier", children: "Zapier" }),
4308
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Webhook", children: "Webhook" })
4309
+ ]
4310
+ }
4311
+ )
4312
+ ] }) }),
4313
+ actionType === "addPaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4314
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4315
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Card Number" }),
4316
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4317
+ Input,
4318
+ {
4319
+ placeholder: "1234 5678 9012 3456",
4320
+ value: formData.cardNumber || "",
4321
+ onChange: (e) => setActionFormData({
4322
+ ...actionFormData,
4323
+ cardNumber: e.target.value
4324
+ }),
4325
+ className: "h-8 text-xs border-gray-200"
4326
+ }
4327
+ )
4328
+ ] }),
4329
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4330
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Expiry Date" }),
4331
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4332
+ Input,
4333
+ {
4334
+ placeholder: "MM/YY",
4335
+ value: formData.expiryDate || "",
4336
+ onChange: (e) => setActionFormData({
4337
+ ...actionFormData,
4338
+ expiryDate: e.target.value
4339
+ }),
4340
+ className: "h-8 text-xs border-gray-200"
4341
+ }
4342
+ )
4343
+ ] })
4344
+ ] }),
4345
+ actionType === "removePaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: "This will remove the default payment method from your account." }) }),
4346
+ actionType === "refundPayment" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4347
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4348
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Transaction ID or Customer Name" }),
4349
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4350
+ Input,
4351
+ {
4352
+ placeholder: "e.g., txn_1234 or Acme Corp",
4353
+ value: formData.transactionId || formData.customer || "",
4354
+ onChange: (e) => {
4355
+ const value = e.target.value;
4356
+ if (value.startsWith("txn_") || /^\d+$/.test(value)) {
4357
+ setActionFormData({
4358
+ ...actionFormData,
4359
+ transactionId: value,
4360
+ customer: void 0
4361
+ });
4362
+ } else {
4363
+ setActionFormData({
4364
+ ...actionFormData,
4365
+ customer: value,
4366
+ transactionId: void 0
4367
+ });
4368
+ }
4369
+ },
4370
+ className: "h-8 text-xs border-gray-200"
4371
+ }
4372
+ )
4373
+ ] }),
4374
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4375
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Amount (optional)" }),
4376
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4377
+ Input,
4378
+ {
4379
+ placeholder: "$0.00",
4380
+ value: formData.amount || "",
4381
+ onChange: (e) => setActionFormData({
4382
+ ...actionFormData,
4383
+ amount: e.target.value
4384
+ }),
4385
+ className: "h-8 text-xs border-gray-200"
4386
+ }
4387
+ )
4388
+ ] }),
4389
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4390
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Reason (optional)" }),
4391
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4392
+ Input,
4393
+ {
4394
+ placeholder: "e.g., Customer request",
4395
+ value: formData.reason || "",
4396
+ onChange: (e) => setActionFormData({
4397
+ ...actionFormData,
4398
+ reason: e.target.value
4399
+ }),
4400
+ className: "h-8 text-xs border-gray-200"
4401
+ }
4402
+ )
4403
+ ] })
4404
+ ] }),
4405
+ actionType === "deleteApiKey" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4406
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4407
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name or ID" }),
4408
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4409
+ Input,
4410
+ {
4411
+ placeholder: "Production Key",
4412
+ value: formData.keyId || formData.name || "",
4413
+ onChange: (e) => setActionFormData({
4414
+ ...actionFormData,
4415
+ keyId: e.target.value,
4416
+ name: e.target.value
4417
+ }),
4418
+ className: "h-8 text-xs border-gray-200"
4419
+ }
4420
+ )
4421
+ ] }),
4422
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-red-600", children: "Warning: This action cannot be undone. The API key will be permanently deleted." })
4423
+ ] }),
4424
+ actionType === "addWebhook" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4425
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4426
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Webhook URL" }),
4427
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4428
+ Input,
4429
+ {
4430
+ type: "url",
4431
+ placeholder: "https://example.com/webhook",
4432
+ value: formData.url || "",
4433
+ onChange: (e) => setActionFormData({
4434
+ ...actionFormData,
4435
+ url: e.target.value
4436
+ }),
4437
+ className: "h-8 text-xs border-gray-200"
4438
+ }
4439
+ )
4440
+ ] }),
4441
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4442
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Name (optional)" }),
4443
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4444
+ Input,
4445
+ {
4446
+ placeholder: "Production Webhook",
4447
+ value: formData.name || "",
4448
+ onChange: (e) => setActionFormData({
4449
+ ...actionFormData,
4450
+ name: e.target.value
4451
+ }),
4452
+ className: "h-8 text-xs border-gray-200"
4453
+ }
4454
+ )
4455
+ ] })
4456
+ ] }),
4457
+ actionType === "updateCurrency" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4458
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Currency" }),
4459
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4460
+ "select",
4461
+ {
4462
+ value: formData.currency || "USD",
4463
+ onChange: (e) => setActionFormData({
4464
+ ...actionFormData,
4465
+ currency: e.target.value
4466
+ }),
4467
+ 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",
4468
+ children: [
4469
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "USD", children: "USD ($)" }),
4470
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "EUR", children: "EUR (\u20AC)" }),
4471
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "GBP", children: "GBP (\xA3)" }),
4472
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "JPY", children: "JPY (\xA5)" })
4473
+ ]
4474
+ }
4475
+ )
4476
+ ] }) }),
4477
+ actionType === "updateTimezone" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4478
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Timezone" }),
4479
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4480
+ "select",
4481
+ {
4482
+ value: formData.timezone || "America/Los_Angeles",
4483
+ onChange: (e) => setActionFormData({
4484
+ ...actionFormData,
4485
+ timezone: e.target.value
4486
+ }),
4487
+ 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",
4488
+ children: [
4489
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "America/Los_Angeles", children: "Pacific Time (PT)" }),
4490
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "America/New_York", children: "Eastern Time (ET)" }),
4491
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Europe/London", children: "GMT" }),
4492
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Asia/Tokyo", children: "JST" })
4493
+ ]
4494
+ }
4495
+ )
4496
+ ] }) }),
4497
+ actionType === "revokeSession" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4498
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4499
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Device/Session" }),
4500
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4501
+ Input,
4502
+ {
4503
+ placeholder: "MacBook Pro",
4504
+ value: formData.device || "",
4505
+ onChange: (e) => setActionFormData({
4506
+ ...actionFormData,
4507
+ device: e.target.value
4508
+ }),
4509
+ className: "h-8 text-xs border-gray-200"
4510
+ }
4511
+ )
4512
+ ] }),
4513
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: "This will sign out the device and invalidate its session." })
4514
+ ] }),
4515
+ actionType === "createSubscription" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4516
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4517
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Customer Email" }),
4518
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4519
+ Input,
4520
+ {
4521
+ type: "email",
4522
+ placeholder: "customer@example.com",
4523
+ value: formData.customerEmail || "",
4524
+ onChange: (e) => setActionFormData({
4525
+ ...actionFormData,
4526
+ customerEmail: e.target.value
4527
+ }),
4528
+ className: "h-8 text-xs border-gray-200"
4529
+ }
4530
+ )
4363
4531
  ] }),
4364
- actionType === "updateCurrency" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4365
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Currency" }),
4532
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4533
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Plan" }),
4534
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4535
+ "select",
4536
+ {
4537
+ value: formData.plan || "Starter",
4538
+ onChange: (e) => setActionFormData({
4539
+ ...actionFormData,
4540
+ plan: e.target.value
4541
+ }),
4542
+ 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",
4543
+ children: [
4544
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Starter", children: "Starter ($29/mo)" }),
4545
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Professional", children: "Professional ($99/mo)" }),
4546
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Enterprise", children: "Enterprise ($299/mo)" })
4547
+ ]
4548
+ }
4549
+ )
4550
+ ] }),
4551
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4552
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Billing Cycle" }),
4553
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4554
+ "select",
4555
+ {
4556
+ value: formData.billingCycle || "monthly",
4557
+ onChange: (e) => setActionFormData({
4558
+ ...actionFormData,
4559
+ billingCycle: e.target.value
4560
+ }),
4561
+ 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",
4562
+ children: [
4563
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "monthly", children: "Monthly" }),
4564
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "yearly", children: "Yearly (Save 15%)" })
4565
+ ]
4566
+ }
4567
+ )
4568
+ ] })
4569
+ ] }),
4570
+ actionType === "exportCertificate" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4571
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: "This will export your certificate of incorporation document." }),
4572
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4573
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Format" }),
4366
4574
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4367
4575
  "select",
4368
4576
  {
4369
- value: formData.currency || "USD",
4577
+ value: formData.format || "pdf",
4370
4578
  onChange: (e) => setActionFormData({
4371
4579
  ...actionFormData,
4372
- currency: e.target.value
4580
+ format: e.target.value
4373
4581
  }),
4374
4582
  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",
4375
4583
  children: [
4376
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "USD", children: "USD ($)" }),
4377
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "EUR", children: "EUR (\u20AC)" }),
4378
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "GBP", children: "GBP (\xA3)" }),
4379
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "JPY", children: "JPY (\xA5)" })
4584
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "pdf", children: "PDF" }),
4585
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "json", children: "JSON" })
4380
4586
  ]
4381
4587
  }
4382
4588
  )
4383
- ] }) }),
4384
- actionType === "updateTimezone" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4385
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Timezone" }),
4589
+ ] })
4590
+ ] }),
4591
+ (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4592
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4593
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Block Rule" }),
4386
4594
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4387
4595
  "select",
4388
4596
  {
4389
- value: formData.timezone || "America/Los_Angeles",
4597
+ value: formData.ruleId || "rule_1",
4390
4598
  onChange: (e) => setActionFormData({
4391
4599
  ...actionFormData,
4392
- timezone: e.target.value
4600
+ ruleId: e.target.value
4393
4601
  }),
4394
4602
  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",
4395
4603
  children: [
4396
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "America/Los_Angeles", children: "Pacific Time (PT)" }),
4397
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "America/New_York", children: "Eastern Time (ET)" }),
4398
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Europe/London", children: "GMT" }),
4399
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Asia/Tokyo", children: "JST" })
4604
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_1", children: "Block if risk level = 'highest'" }),
4605
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_2", children: "Block if matches Stripe block lists" }),
4606
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_3", children: "Block if CVC verification fails" }),
4607
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_4", children: "Block if Postal code verification fails" })
4400
4608
  ]
4401
4609
  }
4402
4610
  )
4403
- ] }) }),
4404
- actionType === "revokeSession" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4405
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4406
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Device/Session" }),
4407
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4408
- Input,
4409
- {
4410
- placeholder: "MacBook Pro",
4411
- value: formData.device || "",
4412
- onChange: (e) => setActionFormData({
4413
- ...actionFormData,
4414
- device: e.target.value
4415
- }),
4416
- className: "h-8 text-xs border-gray-200"
4417
- }
4418
- )
4419
- ] }),
4420
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: "This will sign out the device and invalidate its session." })
4421
4611
  ] }),
4422
- actionType === "createSubscription" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4423
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4424
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Customer Email" }),
4425
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4426
- Input,
4427
- {
4428
- type: "email",
4429
- placeholder: "customer@example.com",
4430
- value: formData.customerEmail || "",
4431
- onChange: (e) => setActionFormData({
4432
- ...actionFormData,
4433
- customerEmail: e.target.value
4434
- }),
4435
- className: "h-8 text-xs border-gray-200"
4436
- }
4437
- )
4438
- ] }),
4439
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4440
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Plan" }),
4441
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4442
- "select",
4443
- {
4444
- value: formData.plan || "Starter",
4445
- onChange: (e) => setActionFormData({
4446
- ...actionFormData,
4447
- plan: e.target.value
4448
- }),
4449
- 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",
4450
- children: [
4451
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Starter", children: "Starter ($29/mo)" }),
4452
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Professional", children: "Professional ($99/mo)" }),
4453
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "Enterprise", children: "Enterprise ($299/mo)" })
4454
- ]
4455
- }
4456
- )
4457
- ] }),
4458
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4459
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Billing Cycle" }),
4460
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4461
- "select",
4462
- {
4463
- value: formData.billingCycle || "monthly",
4464
- onChange: (e) => setActionFormData({
4465
- ...actionFormData,
4466
- billingCycle: e.target.value
4467
- }),
4468
- 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",
4469
- children: [
4470
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "monthly", children: "Monthly" }),
4471
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "yearly", children: "Yearly (Save 15%)" })
4472
- ]
4473
- }
4474
- )
4612
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: actionType === "enableBlockRule" ? "This will enable the selected block rule to actively block matching payments." : actionType === "disableBlockRule" ? "This will disable the selected block rule. Matching payments will no longer be blocked." : "This will toggle the selected block rule's state." })
4613
+ ] }),
4614
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4615
+ Button,
4616
+ {
4617
+ type: "button",
4618
+ size: "sm",
4619
+ variant: "secondary",
4620
+ className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
4621
+ onClick: handleActionSubmit,
4622
+ children: [
4623
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Confirm" }),
4624
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
4625
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
4626
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
4627
+ ] })
4628
+ ]
4629
+ }
4630
+ ) })
4631
+ ]
4632
+ },
4633
+ message.id
4634
+ );
4635
+ }
4636
+ if (message.kind === "bulkPreview" && message.csvData) {
4637
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4638
+ "div",
4639
+ {
4640
+ className: `${isRoleChange ? "mt-3" : ""}`,
4641
+ children: [
4642
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
4643
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
4644
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-gray-100 px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
4645
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-gray-600" }),
4646
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
4647
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-xs text-gray-500", children: [
4648
+ "\u2022 ",
4649
+ message.csvData.rowCount,
4650
+ " rows"
4475
4651
  ] })
4476
4652
  ] }),
4477
- actionType === "exportCertificate" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4478
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: "This will export your certificate of incorporation document." }),
4479
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4480
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Format" }),
4481
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4482
- "select",
4483
- {
4484
- value: formData.format || "pdf",
4485
- onChange: (e) => setActionFormData({
4486
- ...actionFormData,
4487
- format: e.target.value
4488
- }),
4489
- 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",
4490
- children: [
4491
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "pdf", children: "PDF" }),
4492
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "json", children: "JSON" })
4493
- ]
4494
- }
4495
- )
4496
- ] })
4653
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100", children: [
4654
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Columns" }),
4655
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1", children: message.csvData.columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4656
+ "span",
4657
+ {
4658
+ className: "text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded",
4659
+ children: col
4660
+ },
4661
+ i
4662
+ )) })
4497
4663
  ] }),
4498
- (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
4499
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
4500
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Block Rule" }),
4501
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4502
- "select",
4503
- {
4504
- value: formData.ruleId || "rule_1",
4505
- onChange: (e) => setActionFormData({
4506
- ...actionFormData,
4507
- ruleId: e.target.value
4508
- }),
4509
- 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",
4510
- children: [
4511
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_1", children: "Block if risk level = 'highest'" }),
4512
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_2", children: "Block if matches Stripe block lists" }),
4513
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_3", children: "Block if CVC verification fails" }),
4514
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "rule_4", children: "Block if Postal code verification fails" })
4515
- ]
4516
- }
4517
- )
4518
- ] }),
4519
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-black", children: actionType === "enableBlockRule" ? "This will enable the selected block rule to actively block matching payments." : actionType === "disableBlockRule" ? "This will disable the selected block rule. Matching payments will no longer be blocked." : "This will toggle the selected block rule's state." })
4664
+ message.csvData.sampleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-3 py-2", children: [
4665
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Sample Data" }),
4666
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4667
+ "div",
4668
+ {
4669
+ className: "text-xs text-gray-600 bg-white rounded px-2 py-1 border border-gray-100",
4670
+ children: [
4671
+ Object.entries(row).slice(0, 3).map(([key, val], j) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
4672
+ j > 0 && " \u2022 ",
4673
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-gray-400", children: [
4674
+ key,
4675
+ ":"
4676
+ ] }),
4677
+ " ",
4678
+ val
4679
+ ] }, key)),
4680
+ Object.keys(row).length > 3 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-gray-400", children: [
4681
+ " ",
4682
+ "..."
4683
+ ] })
4684
+ ]
4685
+ },
4686
+ i
4687
+ )) })
4520
4688
  ] }),
4521
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4689
+ message.suggestedAction && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-xs text-blue-700", children: [
4690
+ "Suggested action:",
4691
+ " ",
4692
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: message.suggestedAction.replace(/_/g, " ") })
4693
+ ] }) })
4694
+ ] }),
4695
+ message.bulkSessionId && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
4696
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4522
4697
  Button,
4523
4698
  {
4524
4699
  type: "button",
4525
4700
  size: "sm",
4526
4701
  variant: "secondary",
4527
4702
  className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
4528
- onClick: handleActionSubmit,
4703
+ onClick: () => message.bulkSessionId && confirmBulkOperation(message.bulkSessionId),
4529
4704
  children: [
4530
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Confirm" }),
4705
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
4706
+ "Process ",
4707
+ message.csvData.rowCount,
4708
+ " rows"
4709
+ ] }),
4531
4710
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
4532
4711
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
4533
4712
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
4534
4713
  ] })
4535
4714
  ]
4536
4715
  }
4537
- ) })
4538
- ]
4539
- },
4540
- message.id
4541
- );
4542
- }
4543
- if (message.kind === "bulkPreview" && message.csvData) {
4544
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4545
- "div",
4546
- {
4547
- className: `${isRoleChange ? "mt-3" : ""}`,
4548
- children: [
4549
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
4550
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
4551
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-gray-100 px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
4552
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-gray-600" }),
4553
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
4554
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-xs text-gray-500", children: [
4555
- "\u2022 ",
4556
- message.csvData.rowCount,
4557
- " rows"
4558
- ] })
4559
- ] }),
4560
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100", children: [
4561
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Columns" }),
4562
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1", children: message.csvData.columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4563
- "span",
4716
+ ),
4717
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4718
+ Button,
4719
+ {
4720
+ type: "button",
4721
+ size: "sm",
4722
+ variant: "ghost",
4723
+ className: "h-8 rounded-xl px-3 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100",
4724
+ onClick: cancelBulkOperation,
4725
+ children: "Cancel"
4726
+ }
4727
+ )
4728
+ ] })
4729
+ ]
4730
+ },
4731
+ message.id
4732
+ );
4733
+ }
4734
+ if (message.kind === "bulkProgress" && message.bulkProgress) {
4735
+ const { processed, total, successes, failures } = message.bulkProgress;
4736
+ const percentage = Math.round(processed / total * 100);
4737
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4738
+ "div",
4739
+ {
4740
+ className: `${isRoleChange ? "mt-3" : ""}`,
4741
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
4742
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
4743
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-blue-600" }),
4744
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-sm font-medium text-gray-700", children: [
4745
+ "Processing... ",
4746
+ processed,
4747
+ " of ",
4748
+ total
4749
+ ] })
4750
+ ] }),
4751
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4752
+ "div",
4753
+ {
4754
+ className: "h-full bg-blue-600 transition-all duration-300",
4755
+ style: { width: `${percentage}%` }
4756
+ }
4757
+ ) }),
4758
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
4759
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1", children: [
4760
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3 text-green-600" }),
4761
+ successes,
4762
+ " successful"
4763
+ ] }),
4764
+ failures > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
4765
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
4766
+ failures,
4767
+ " failed"
4768
+ ] })
4769
+ ] })
4770
+ ] })
4771
+ },
4772
+ message.id
4773
+ );
4774
+ }
4775
+ if (message.kind === "bulkSummary" && message.bulkSummary) {
4776
+ const { total, successes, failures, navigationPage } = message.bulkSummary;
4777
+ const hasFailures = failures.length > 0;
4778
+ const pageLabel = navigationPage?.page === "customers" ? "Customers" : navigationPage?.page === "dashboard" ? "Dashboard" : navigationPage?.page === "settings" ? "Settings" : "Results";
4779
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4780
+ "div",
4781
+ {
4782
+ className: `${isRoleChange ? "mt-3" : ""}`,
4783
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4784
+ "div",
4785
+ {
4786
+ className: `rounded-lg border p-3 ${hasFailures ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`,
4787
+ children: [
4788
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
4789
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4790
+ import_lucide_react4.CheckCircle2,
4564
4791
  {
4565
- className: "text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded",
4566
- children: col
4567
- },
4568
- i
4569
- )) })
4792
+ className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}`
4793
+ }
4794
+ ),
4795
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
4570
4796
  ] }),
4571
- message.csvData.sampleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-3 py-2", children: [
4572
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Sample Data" }),
4573
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4574
- "div",
4575
- {
4576
- className: "text-xs text-gray-600 bg-white rounded px-2 py-1 border border-gray-100",
4577
- children: [
4578
- Object.entries(row).slice(0, 3).map(([key, val], j) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
4579
- j > 0 && " \u2022 ",
4580
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-gray-400", children: [
4581
- key,
4582
- ":"
4583
- ] }),
4584
- " ",
4585
- val
4586
- ] }, key)),
4587
- Object.keys(row).length > 3 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-gray-400", children: [
4797
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
4798
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-4 text-xs", children: [
4799
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 text-green-700", children: [
4800
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3" }),
4801
+ successes,
4802
+ " successful"
4803
+ ] }),
4804
+ hasFailures && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
4805
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
4806
+ failures.length,
4807
+ " failed"
4808
+ ] })
4809
+ ] }),
4810
+ hasFailures && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
4811
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
4812
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
4813
+ failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4814
+ "div",
4815
+ {
4816
+ className: "text-xs text-red-700 bg-red-50 rounded px-2 py-1",
4817
+ children: [
4818
+ "Row ",
4819
+ failure.row,
4820
+ ":",
4588
4821
  " ",
4589
- "..."
4590
- ] })
4591
- ]
4592
- },
4593
- i
4594
- )) })
4822
+ failure.error || "Unknown error"
4823
+ ]
4824
+ },
4825
+ i
4826
+ )),
4827
+ failures.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-xs text-amber-600", children: [
4828
+ "...and ",
4829
+ failures.length - 5,
4830
+ " more"
4831
+ ] })
4832
+ ] })
4595
4833
  ] }),
4596
- message.suggestedAction && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-xs text-blue-700", children: [
4597
- "Suggested action:",
4598
- " ",
4599
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: message.suggestedAction.replace(/_/g, " ") })
4600
- ] }) })
4601
- ] }),
4602
- message.bulkSessionId && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
4603
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4604
- Button,
4834
+ navigationPage && successes > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4835
+ "button",
4605
4836
  {
4606
4837
  type: "button",
4607
- size: "sm",
4608
- variant: "secondary",
4609
- className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
4610
- onClick: () => message.bulkSessionId && confirmBulkOperation(message.bulkSessionId),
4838
+ onClick: (e) => {
4839
+ e.preventDefault();
4840
+ e.stopPropagation();
4841
+ if (onNavigate && navigationPage.page) {
4842
+ onNavigate(
4843
+ navigationPage.page,
4844
+ navigationPage.subtab
4845
+ );
4846
+ }
4847
+ },
4848
+ className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 transition-colors group cursor-pointer",
4611
4849
  children: [
4612
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
4613
- "Process ",
4614
- message.csvData.rowCount,
4615
- " rows"
4850
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-gray-100 rounded text-[10px] font-medium text-gray-600 group-hover:bg-gray-200", children: [
4851
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-2.5 w-2.5" }),
4852
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "+" }),
4853
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-2.5 w-2.5" })
4616
4854
  ] }),
4617
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
4618
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
4619
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
4855
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
4856
+ "View ",
4857
+ pageLabel
4620
4858
  ] })
4621
4859
  ]
4622
4860
  }
4623
- ),
4624
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4625
- Button,
4626
- {
4627
- type: "button",
4628
- size: "sm",
4629
- variant: "ghost",
4630
- className: "h-8 rounded-xl px-3 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100",
4631
- onClick: cancelBulkOperation,
4632
- children: "Cancel"
4633
- }
4634
- )
4635
- ] })
4636
- ]
4637
- },
4638
- message.id
4639
- );
4640
- }
4641
- if (message.kind === "bulkProgress" && message.bulkProgress) {
4642
- const { processed, total, successes, failures } = message.bulkProgress;
4643
- const percentage = Math.round(processed / total * 100);
4644
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4645
- "div",
4646
- {
4647
- className: `${isRoleChange ? "mt-3" : ""}`,
4648
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
4649
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
4650
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-blue-600" }),
4651
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-sm font-medium text-gray-700", children: [
4652
- "Processing... ",
4653
- processed,
4654
- " of ",
4655
- total
4656
- ] })
4657
- ] }),
4658
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4659
- "div",
4660
- {
4661
- className: "h-full bg-blue-600 transition-all duration-300",
4662
- style: { width: `${percentage}%` }
4663
- }
4664
- ) }),
4665
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
4666
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1", children: [
4667
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3 text-green-600" }),
4668
- successes,
4669
- " successful"
4670
- ] }),
4671
- failures > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
4672
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
4673
- failures,
4674
- " failed"
4675
- ] })
4676
- ] })
4677
- ] })
4678
- },
4679
- message.id
4680
- );
4681
- }
4682
- if (message.kind === "bulkSummary" && message.bulkSummary) {
4683
- const { total, successes, failures, navigationPage } = message.bulkSummary;
4684
- const hasFailures = failures.length > 0;
4685
- const pageLabel = navigationPage?.page === "customers" ? "Customers" : navigationPage?.page === "dashboard" ? "Dashboard" : navigationPage?.page === "settings" ? "Settings" : "Results";
4686
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4687
- "div",
4688
- {
4689
- className: `${isRoleChange ? "mt-3" : ""}`,
4690
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4691
- "div",
4692
- {
4693
- className: `rounded-lg border p-3 ${hasFailures ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`,
4694
- children: [
4695
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
4696
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4697
- import_lucide_react4.CheckCircle2,
4698
- {
4699
- className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}`
4700
- }
4701
- ),
4702
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
4703
- ] }),
4704
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
4705
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-4 text-xs", children: [
4706
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 text-green-700", children: [
4707
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3" }),
4708
- successes,
4709
- " successful"
4710
- ] }),
4711
- hasFailures && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
4712
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
4713
- failures.length,
4714
- " failed"
4715
- ] })
4716
- ] }),
4717
- hasFailures && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
4718
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
4719
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
4720
- failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4721
- "div",
4722
- {
4723
- className: "text-xs text-red-700 bg-red-50 rounded px-2 py-1",
4724
- children: [
4725
- "Row ",
4726
- failure.row,
4727
- ":",
4728
- " ",
4729
- failure.error || "Unknown error"
4730
- ]
4731
- },
4732
- i
4733
- )),
4734
- failures.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-xs text-amber-600", children: [
4735
- "...and ",
4736
- failures.length - 5,
4737
- " more"
4738
- ] })
4739
- ] })
4740
- ] }),
4741
- navigationPage && successes > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4742
- "button",
4743
- {
4744
- type: "button",
4745
- onClick: (e) => {
4746
- e.preventDefault();
4747
- e.stopPropagation();
4748
- if (onNavigate && navigationPage.page) {
4749
- onNavigate(
4750
- navigationPage.page,
4751
- navigationPage.subtab
4752
- );
4753
- }
4754
- },
4755
- className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 transition-colors group cursor-pointer",
4756
- children: [
4757
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-gray-100 rounded text-[10px] font-medium text-gray-600 group-hover:bg-gray-200", children: [
4758
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-2.5 w-2.5" }),
4759
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "+" }),
4760
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-2.5 w-2.5" })
4761
- ] }),
4762
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
4763
- "View ",
4764
- pageLabel
4765
- ] })
4766
- ]
4767
- }
4768
- ) })
4769
- ]
4861
+ ) })
4862
+ ]
4863
+ }
4864
+ )
4865
+ },
4866
+ message.id
4867
+ );
4868
+ }
4869
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(React6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4870
+ "div",
4871
+ {
4872
+ ref: isCurrentGuideStep ? currentStepRef : null,
4873
+ className: `${isRoleChange ? "mt-3" : ""}`,
4874
+ children: [
4875
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-sm leading-6 text-gray-700", children: (() => {
4876
+ const text = message.content || "";
4877
+ if (message.kind === "guideStep") {
4878
+ const m = text.match(/^(Step\s+\d+:)([\s\S]*)/);
4879
+ if (m) {
4880
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
4881
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: m[1] }),
4882
+ m[2]
4883
+ ] });
4770
4884
  }
4771
- )
4772
- },
4773
- message.id
4774
- );
4885
+ }
4886
+ if (message.role === "assistant" && text) {
4887
+ return renderMarkdown(text);
4888
+ }
4889
+ return text || /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "opacity-70", children: "Thinking\u2026" });
4890
+ })() }),
4891
+ message.role === "assistant" && message.structuredData && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4892
+ DataRenderer,
4893
+ {
4894
+ type: message.structuredData.type,
4895
+ data: message.structuredData.data
4896
+ }
4897
+ ) }),
4898
+ message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4899
+ "button",
4900
+ {
4901
+ type: "button",
4902
+ onClick: () => handleFollowupClick(message.id, followup),
4903
+ 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",
4904
+ children: followup.label
4905
+ },
4906
+ followup.id
4907
+ )) })
4908
+ ]
4775
4909
  }
4776
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(React6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4777
- "div",
4778
- {
4779
- ref: isCurrentGuideStep ? currentStepRef : null,
4780
- className: `${isRoleChange ? "mt-3" : ""}`,
4781
- children: [
4782
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-sm leading-6 text-gray-700", children: (() => {
4783
- const text = message.content || "";
4784
- if (message.kind === "guideStep") {
4785
- const m = text.match(/^(Step\s+\d+:)([\s\S]*)/);
4786
- if (m) {
4787
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
4788
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: m[1] }),
4789
- m[2]
4790
- ] });
4791
- }
4792
- }
4793
- if (message.role === "assistant" && text) {
4794
- return renderMarkdown(text);
4795
- }
4796
- return text || /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "opacity-70", children: "Thinking\u2026" });
4797
- })() }),
4798
- message.role === "assistant" && message.structuredData && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4799
- DataRenderer,
4800
- {
4801
- type: message.structuredData.type,
4802
- data: message.structuredData.data
4803
- }
4804
- ) }),
4805
- message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4806
- "button",
4807
- {
4808
- type: "button",
4809
- onClick: () => handleFollowupClick(message.id, followup),
4810
- 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",
4811
- children: followup.label
4812
- },
4813
- followup.id
4814
- )) })
4815
- ]
4816
- }
4817
- ) }, message.id);
4818
- }),
4819
- (activeGuide || guideComplete) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
4820
- activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4821
- Button,
4822
- {
4823
- type: "button",
4824
- size: "sm",
4825
- variant: "secondary",
4826
- className: "h-7 w-7 rounded-full p-0 bg-gray-100 hover:bg-gray-200 border border-gray-200",
4827
- onClick: goBackGuide,
4828
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
4829
- }
4830
- ),
4831
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4832
- Button,
4833
- {
4834
- type: "button",
4835
- size: "sm",
4836
- variant: "secondary",
4837
- className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
4838
- onClick: guideComplete ? handleBack : advanceGuide,
4839
- children: [
4840
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: guideComplete ? "Done" : "Next" }),
4841
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
4842
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
4843
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
4844
- ] })
4845
- ]
4846
- }
4847
- )
4848
- ] }),
4849
- (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4850
- AssistantActivity,
4910
+ ) }, message.id);
4911
+ }),
4912
+ (activeGuide || guideComplete) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
4913
+ activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4914
+ Button,
4851
4915
  {
4852
- phase,
4853
- progressSteps
4916
+ type: "button",
4917
+ size: "sm",
4918
+ variant: "secondary",
4919
+ className: "h-7 w-7 rounded-full p-0 bg-gray-100 hover:bg-gray-200 border border-gray-200",
4920
+ onClick: goBackGuide,
4921
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
4854
4922
  }
4855
- ) }),
4856
- isEscalated && agentIsTyping && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-start mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-gray-200 rounded-2xl rounded-bl-md px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TypingIndicator, {}) }) }),
4857
- !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: messagesEndRef })
4858
- ] }) }) }) })
4859
- }
4860
- ),
4923
+ ),
4924
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4925
+ Button,
4926
+ {
4927
+ type: "button",
4928
+ size: "sm",
4929
+ variant: "secondary",
4930
+ className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
4931
+ onClick: guideComplete ? handleBack : advanceGuide,
4932
+ children: [
4933
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: guideComplete ? "Done" : "Next" }),
4934
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
4935
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
4936
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
4937
+ ] })
4938
+ ]
4939
+ }
4940
+ )
4941
+ ] }),
4942
+ (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
4943
+ AssistantActivity,
4944
+ {
4945
+ phase,
4946
+ progressSteps
4947
+ }
4948
+ ) }),
4949
+ isEscalated && agentIsTyping && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-start mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-gray-200 rounded-2xl rounded-bl-md px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TypingIndicator, {}) }) }),
4950
+ !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: messagesEndRef })
4951
+ ] }) }) }) })
4952
+ ] }),
4861
4953
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
4862
4954
  "div",
4863
4955
  {
@@ -4928,10 +5020,19 @@ ${userText}`
4928
5020
  {
4929
5021
  ref: imageInputRef,
4930
5022
  type: "file",
4931
- accept: "image/*,.pdf",
5023
+ accept: "image/*,.pdf,.csv",
4932
5024
  multiple: true,
4933
5025
  className: "hidden",
4934
- onChange: (e) => handleImageSelect(e.target.files)
5026
+ onChange: (e) => {
5027
+ const files = e.target.files;
5028
+ if (!files || files.length === 0) return;
5029
+ const csvFile = Array.from(files).find((f) => f.name.endsWith(".csv"));
5030
+ if (csvFile && !isEscalated) {
5031
+ setPendingFile(csvFile);
5032
+ } else {
5033
+ handleImageSelect(files);
5034
+ }
5035
+ }
4935
5036
  }
4936
5037
  ),
4937
5038
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex w-full items-start gap-2 rounded-xl border bg-white px-3 py-2 shadow-sm ${isDragOver ? "border-blue-400" : "border-gray-200"}`, children: [
@@ -4942,14 +5043,10 @@ ${userText}`
4942
5043
  size: "icon",
4943
5044
  variant: "ghost",
4944
5045
  onClick: () => {
4945
- if (isEscalated) {
4946
- imageInputRef.current?.click();
4947
- } else {
4948
- fileInputRef.current?.click();
4949
- }
5046
+ imageInputRef.current?.click();
4950
5047
  },
4951
5048
  className: "h-5 w-5 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
4952
- title: isEscalated ? "Attach image or file" : "Upload CSV for bulk operations",
5049
+ title: "Attach file (image, PDF, or CSV)",
4953
5050
  disabled: isUploadingImage,
4954
5051
  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Paperclip, { className: "h-2.5 w-2.5" })
4955
5052
  }
@@ -5020,8 +5117,15 @@ ${userText}`
5020
5117
  {
5021
5118
  type: "submit",
5022
5119
  size: "icon",
5023
- disabled: !input.trim() && !pendingFile || isWaitingForAuth,
5120
+ disabled: !input.trim() && !pendingFile && pendingImages.length === 0 || isWaitingForAuth,
5024
5121
  className: "h-6 w-6 rounded-full bg-gray-700 hover:bg-gray-600 disabled:bg-gray-300",
5122
+ onClick: (e) => {
5123
+ e.preventDefault();
5124
+ const form = e.currentTarget.closest("form");
5125
+ if (form) {
5126
+ form.requestSubmit();
5127
+ }
5128
+ },
5025
5129
  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowUp, { className: "h-2.5 w-2.5 text-white" })
5026
5130
  }
5027
5131
  )