@wealthx/shadcn 1.5.28 → 1.5.29

package/dist/chunk-BZWQU52U.mjs

@@ -0,0 +1,1025 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-3S6KVFF5.mjs";
+import {
+  Card,
+  CardContent
+} from "./chunk-3VDET466.mjs";
+import {
+  Switch
+} from "./chunk-PNSYFE3K.mjs";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "./chunk-WE4YKBDE.mjs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./chunk-GT3RU6GA.mjs";
+import {
+  Checkbox
+} from "./chunk-IKXYTCSB.mjs";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-K6VCC2MK.mjs";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-T5FRVEJQ.mjs";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "./chunk-H6NQTIF4.mjs";
+import {
+  Separator
+} from "./chunk-2GIYVERS.mjs";
+import {
+  Textarea
+} from "./chunk-BS75ICOO.mjs";
+import {
+  Badge
+} from "./chunk-X6RC5UWB.mjs";
+import {
+  Label
+} from "./chunk-LSRGA5BI.mjs";
+import {
+  Input
+} from "./chunk-LBTHZSBT.mjs";
+import {
+  Button
+} from "./chunk-NOOEKOWY.mjs";
+import {
+  cn
+} from "./chunk-AFML43VJ.mjs";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-WNQUEZJF.mjs";
+
+// src/components/ui/ai-builder/agent-card.tsx
+import { MoreHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AGENT_FEATURES = [
+  {
+    title: "Lead Capture",
+    description: "Automatically collect and qualify leads from website visitors."
+  },
+  {
+    title: "Initial Engagement",
+    description: "Instantly respond to inquiries with personalised mortgage guidance."
+  },
+  {
+    title: "Smart Follow-Up",
+    description: "Re-engage cold leads with timely, context-aware follow-up messages."
+  },
+  {
+    title: "Appointment Scheduling",
+    description: "Book qualified leads directly into advisor calendars without manual coordination."
+  },
+  {
+    title: "Performance Tracking",
+    description: "Monitor agent activity, response rates, and conversion metrics."
+  }
+];
+function AgentCard({
+  agent,
+  onToggle,
+  onMenuClick,
+  className
+}) {
+  const { id, title, description, tags, isEnabled, infoBadge, isComingSoon } = agent;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "flex flex-col gap-3 p-4 transition-opacity",
+        isComingSoon && "opacity-60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "mt-0.5 size-2 shrink-0 rounded-full",
+                  isEnabled && !isComingSoon ? "bg-success" : "bg-muted-foreground/40"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-label-medium leading-tight", children: title }),
+            isComingSoon && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "shrink-0 text-xs", children: "Coming Soon" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: isEnabled,
+                disabled: isComingSoon,
+                onCheckedChange: (checked) => onToggle(id, checked),
+                "aria-label": `Toggle ${title}`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7",
+                onClick: () => onMenuClick(id),
+                "aria-label": `View details for ${title}`,
+                children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-body-small text-muted-foreground flex-1", children: description }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          infoBadge && /* @__PURE__ */ jsx("p", { className: "bg-info/10 text-info px-2 py-1 text-caption", children: infoBadge }),
+          tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)) })
+        ] })
+      ]
+    }
+  );
+}
+function AgentMenuModal({
+  open,
+  onOpenChange,
+  agentTitle,
+  description = "AI-powered lead management that works around the clock to grow your mortgage business.",
+  features = AGENT_FEATURES
+}) {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-lg", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: agentTitle }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 py-2", children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "default",
+          className: "h-6 w-6 shrink-0 p-0 text-xs font-bold",
+          children: index + 1
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-label-medium", children: feature.title }),
+        /* @__PURE__ */ jsx("p", { className: "text-body-small text-muted-foreground", children: feature.description })
+      ] })
+    ] }, feature.title)) })
+  ] }) });
+}
+
+// src/components/ui/ai-builder/integration-card.tsx
+import { useState } from "react";
+import { Check, CheckCircle2, Copy, Settings, User } from "lucide-react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function IntegrationServiceCard({
+  title,
+  imageUrl,
+  iconNode,
+  description,
+  isConnected,
+  onCardClick,
+  onSettingsClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className: cn(
+        "flex flex-col gap-3 p-4",
+        !isConnected && "cursor-pointer transition-colors hover:bg-accent/50",
+        className
+      ),
+      onClick: !isConnected ? onCardClick : void 0,
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsxs2(Avatar, { className: "h-10 w-10 shrink-0", children: [
+            imageUrl && /* @__PURE__ */ jsx2(AvatarImage, { src: imageUrl, alt: title }),
+            /* @__PURE__ */ jsx2(AvatarFallback, { className: iconNode ? "bg-transparent p-0.5" : "", children: iconNode != null ? iconNode : /* @__PURE__ */ jsx2(User, { className: "h-5 w-5" }) })
+          ] }),
+          /* @__PURE__ */ jsx2("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx2("span", { className: "text-base font-semibold", children: title }),
+            isConnected && /* @__PURE__ */ jsxs2(Badge, { variant: "success", className: "gap-1 text-xs", children: [
+              /* @__PURE__ */ jsx2(CheckCircle2, { className: "h-3 w-3" }),
+              "Connected"
+            ] })
+          ] }) }),
+          isConnected && /* @__PURE__ */ jsx2(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-7 w-7 shrink-0",
+              onClick: (e) => {
+                e.stopPropagation();
+                onSettingsClick();
+              },
+              "aria-label": `Settings for ${title}`,
+              children: /* @__PURE__ */ jsx2(Settings, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2("p", { className: "text-sm leading-relaxed text-muted-foreground", children: description })
+      ]
+    }
+  );
+}
+function IntegrationInstructionCard({
+  title,
+  codeBlock,
+  onCopy,
+  className
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => __async(null, null, function* () {
+    try {
+      yield navigator.clipboard.writeText(codeBlock);
+      setCopied(true);
+      onCopy == null ? void 0 : onCopy();
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (e) {
+    }
+  });
+  return /* @__PURE__ */ jsxs2(Card, { className: cn("flex flex-col gap-3 p-4", className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "text-sm font-semibold", children: title }),
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-7 gap-1.5 text-xs",
+          onClick: handleCopy,
+          children: copied ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(Check, { className: "h-3 w-3" }),
+            "Copied"
+          ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(Copy, { className: "h-3 w-3" }),
+            "Copy"
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("pre", { className: "bg-muted overflow-x-auto p-3 text-xs leading-relaxed", children: /* @__PURE__ */ jsx2("code", { children: codeBlock }) })
+  ] });
+}
+
+// src/components/ui/ai-builder/service-config-modal.tsx
+import { Check as Check2, CheckCircle2 as CheckCircle22, Clock, Mail, Shield, User as User2 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ServiceConfigurationModal({
+  open,
+  onOpenChange,
+  serviceTitle,
+  isConnected,
+  serviceData,
+  iconNode,
+  connectPermissions,
+  connectDescription = "Link your account to enable automated workflows with WealthX.",
+  onConnect,
+  onDisconnect,
+  onReconnect
+}) {
+  return /* @__PURE__ */ jsx3(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx3(DialogContent, { className: "flex max-h-[90vh] flex-col max-w-md", children: isConnected ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3(DialogHeader, { children: [
+      /* @__PURE__ */ jsx3(DialogTitle, { children: serviceTitle }),
+      /* @__PURE__ */ jsx3(DialogDescription, { children: "Manage your integration settings." })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto py-2", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-3 py-2 text-xs font-medium bg-success/10 text-success", children: [
+        /* @__PURE__ */ jsx3(CheckCircle22, { className: "h-3.5 w-3.5 shrink-0" }),
+        "Active \u2014 integration is running"
+      ] }),
+      serviceData && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-overline text-muted-foreground", children: "Account Information" }),
+          /* @__PURE__ */ jsx3(Card, { className: "py-0", children: /* @__PURE__ */ jsxs3(CardContent, { className: "flex flex-col gap-3 p-3", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx3(User2, { className: "text-muted-foreground h-4 w-4 shrink-0" }),
+              /* @__PURE__ */ jsxs3("span", { className: "text-muted-foreground", children: [
+                serviceData.accountIdentifierLabel,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsx3("span", { className: "font-medium", children: serviceData.accountIdentifier })
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx3(Clock, { className: "text-muted-foreground h-4 w-4 shrink-0" }),
+              /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground", children: "Connected on:" }),
+              /* @__PURE__ */ jsx3("span", { className: "font-medium", children: serviceData.connectedOn })
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx3(Clock, { className: "text-muted-foreground h-4 w-4 shrink-0" }),
+              /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground", children: "Last synced:" }),
+              /* @__PURE__ */ jsx3("span", { className: "font-medium", children: serviceData.lastSynced })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-overline text-muted-foreground", children: "Granted Permissions" }),
+          /* @__PURE__ */ jsx3(Card, { className: "py-0", children: /* @__PURE__ */ jsx3(CardContent, { className: "flex flex-col gap-2 p-3", children: serviceData.permissions.map((permission) => /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              className: "flex items-center gap-2 text-sm",
+              children: [
+                /* @__PURE__ */ jsx3(Shield, { className: "text-success h-4 w-4 shrink-0" }),
+                /* @__PURE__ */ jsx3("span", { children: permission })
+              ]
+            },
+            permission
+          )) }) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-overline text-muted-foreground", children: "Sync Settings" }),
+          /* @__PURE__ */ jsx3(Card, { className: "py-0", children: /* @__PURE__ */ jsxs3(CardContent, { className: "flex items-center justify-between gap-3 p-3", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ jsx3("p", { className: "text-sm font-medium", children: serviceData.syncLabel }),
+              /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-sm", children: serviceData.syncDescription })
+            ] }),
+            /* @__PURE__ */ jsx3(
+              Switch,
+              {
+                checked: serviceData.syncEnabled,
+                onCheckedChange: serviceData.onSyncToggle,
+                "aria-label": serviceData.syncLabel
+              }
+            )
+          ] }) })
+        ] }),
+        serviceData.emailCategories && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("p", { className: "text-overline text-muted-foreground", children: "Email Filters" }),
+            /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-sm mt-0.5", children: "Choose which inbox categories to sync into WealthX." })
+          ] }),
+          /* @__PURE__ */ jsx3(Card, { className: "py-0", children: /* @__PURE__ */ jsx3(CardContent, { className: "flex flex-col gap-3 p-3", children: serviceData.emailCategories.available.map(
+            (category) => {
+              const checked = serviceData.emailCategories.selected.includes(
+                category
+              );
+              return /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  className: "flex items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      Checkbox,
+                      {
+                        id: `email-cat-${category}`,
+                        checked,
+                        onCheckedChange: (v) => {
+                          const next = v ? [
+                            ...serviceData.emailCategories.selected,
+                            category
+                          ] : serviceData.emailCategories.selected.filter(
+                            (c) => c !== category
+                          );
+                          serviceData.emailCategories.onChange(
+                            next
+                          );
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "label",
+                      {
+                        htmlFor: `email-cat-${category}`,
+                        className: "text-sm cursor-pointer select-none",
+                        children: category
+                      }
+                    )
+                  ]
+                },
+                category
+              );
+            }
+          ) }) })
+        ] }),
+        serviceData.emailFilters && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("p", { className: "text-overline text-muted-foreground", children: "Email Filters" }),
+            /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-sm mt-0.5", children: serviceData.emailFilters.description })
+          ] }),
+          /* @__PURE__ */ jsx3(Card, { className: "py-0", children: /* @__PURE__ */ jsx3(CardContent, { className: "flex flex-col gap-3 p-3 max-h-48 overflow-y-auto", children: serviceData.emailFilters.categories.map(
+            (category) => /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: "flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    Checkbox,
+                    {
+                      id: `email-cat-${category.id}`,
+                      checked: category.enabled,
+                      onCheckedChange: (v) => serviceData.emailFilters.onFilterChange(
+                        category.id,
+                        !!v
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    "label",
+                    {
+                      htmlFor: `email-cat-${category.id}`,
+                      className: "text-sm cursor-pointer select-none",
+                      children: category.label
+                    }
+                  )
+                ]
+              },
+              category.id
+            )
+          ) }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3(DialogFooter, { children: [
+      /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "destructive",
+          size: "sm",
+          onClick: onDisconnect,
+          className: "mr-auto",
+          children: "Disconnect"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "outline-secondary",
+          size: "sm",
+          onClick: () => onOpenChange(false),
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx3(Button, { size: "sm", onClick: onReconnect, children: "Reconnect" })
+    ] })
+  ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-4 py-2", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx3("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center bg-muted", children: iconNode != null ? iconNode : /* @__PURE__ */ jsx3(Mail, { className: "h-5 w-5 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs3("p", { className: "text-sm font-semibold", children: [
+            "Connect ",
+            serviceTitle
+          ] }),
+          /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: connectDescription })
+        ] })
+      ] }),
+      connectPermissions && connectPermissions.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2 border border-border px-4 py-3", children: [
+        /* @__PURE__ */ jsx3("p", { className: "text-overline text-muted-foreground", children: "Permissions requested" }),
+        connectPermissions.map((perm) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx3(Check2, { className: "h-3.5 w-3.5 shrink-0 text-success" }),
+          /* @__PURE__ */ jsx3("span", { className: "text-sm text-muted-foreground", children: perm })
+        ] }, perm))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3(DialogFooter, { children: [
+      /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "outline-secondary",
+          size: "sm",
+          onClick: () => onOpenChange(false),
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx3(Button, { size: "sm", onClick: onConnect, children: "Connect" })
+    ] })
+  ] }) }) });
+}
+
+// src/components/ui/ai-builder/agent-settings.tsx
+import React2 from "react";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  Download,
+  GripVertical,
+  Info,
+  Pencil,
+  Plus,
+  Trash2,
+  Upload
+} from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function SectionHeader({
+  title,
+  description,
+  className
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col gap-0.5", className), children: [
+    /* @__PURE__ */ jsx4("h2", { className: "text-h5", children: title }),
+    /* @__PURE__ */ jsx4("p", { className: "text-body-small text-muted-foreground", children: description })
+  ] });
+}
+function SettingRow({
+  icon,
+  label,
+  description,
+  control,
+  className
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex items-center gap-4 py-4", className), children: [
+    /* @__PURE__ */ jsx4("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: icon }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx4("span", { className: "text-sm font-semibold", children: label }),
+      /* @__PURE__ */ jsx4("span", { className: "text-caption text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "shrink-0", children: control })
+  ] });
+}
+function SettingCard({ rows, className }) {
+  return /* @__PURE__ */ jsx4("div", { className: cn("rounded-none border px-4", className), children: rows.map((row, i) => /* @__PURE__ */ jsxs4(React2.Fragment, { children: [
+    /* @__PURE__ */ jsx4(SettingRow, __spreadValues({}, row)),
+    i < rows.length - 1 && /* @__PURE__ */ jsx4(Separator, {})
+  ] }, row.label)) });
+}
+function AgentConfigForm({
+  config,
+  onChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn("flex flex-col gap-4 rounded-none border p-6", className),
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx4(Label, { htmlFor: "agent-name", children: "Agent Name" }),
+          /* @__PURE__ */ jsx4(
+            Input,
+            {
+              id: "agent-name",
+              value: config.name,
+              onChange: (e) => onChange(__spreadProps(__spreadValues({}, config), { name: e.target.value }))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx4(Label, { htmlFor: "agent-desc", children: "Business Description" }),
+          /* @__PURE__ */ jsx4(
+            Textarea,
+            {
+              id: "agent-desc",
+              rows: 4,
+              placeholder: "What business is this agent for? What industry?",
+              value: config.businessDescription,
+              onChange: (e) => onChange(__spreadProps(__spreadValues({}, config), { businessDescription: e.target.value }))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ResponseTemplateEditModal({
+  open,
+  onOpenChange,
+  channel,
+  content,
+  onConfirm
+}) {
+  const [draft, setDraft] = React2.useState(content);
+  React2.useEffect(() => {
+    if (open) setDraft(content);
+  }, [open, content]);
+  const isEmail = channel === "email";
+  const channelLabel = isEmail ? "Email" : "Chat";
+  const helperText = isEmail ? "Use {customer} to insert the customer name and {answer} to insert the response" : "Use {answer} to insert the response";
+  return /* @__PURE__ */ jsx4(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs4(DialogContent, { className: "max-w-lg", children: [
+    /* @__PURE__ */ jsx4(DialogHeader, { children: /* @__PURE__ */ jsxs4(DialogTitle, { children: [
+      "Edit ",
+      channelLabel,
+      " response template"
+    ] }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5 py-2", children: [
+      /* @__PURE__ */ jsxs4(Label, { htmlFor: "template-content", children: [
+        channelLabel,
+        " template content",
+        " ",
+        /* @__PURE__ */ jsx4("span", { className: "text-destructive", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx4(
+        Textarea,
+        {
+          id: "template-content",
+          rows: 6,
+          placeholder: `Enter content for ${channelLabel} template`,
+          value: draft,
+          onChange: (e) => setDraft(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx4("p", { className: "text-caption text-muted-foreground", children: helperText })
+    ] }),
+    /* @__PURE__ */ jsxs4(DialogFooter, { children: [
+      /* @__PURE__ */ jsx4(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx4(
+        Button,
+        {
+          onClick: () => {
+            onConfirm(draft);
+            onOpenChange(false);
+          },
+          children: "Confirm"
+        }
+      )
+    ] })
+  ] }) });
+}
+function RuleOrderBadge({ order, className }) {
+  return /* @__PURE__ */ jsxs4(Badge, { variant: "secondary", className, children: [
+    "#",
+    order
+  ] });
+}
+function SortableRuleRow({
+  rule,
+  index,
+  onEdit,
+  onDelete,
+  onToggle
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: rule.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsxs4(
+    TableRow,
+    {
+      ref: setNodeRef,
+      style,
+      className: cn(isDragging && "opacity-50 bg-muted/40"),
+      children: [
+        /* @__PURE__ */ jsx4(TableCell, { children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx4(
+            "button",
+            __spreadProps(__spreadValues(__spreadValues({
+              type: "button",
+              className: "cursor-grab touch-none text-muted-foreground hover:text-foreground active:cursor-grabbing",
+              "aria-label": `Drag to reorder rule ${index + 1}`
+            }, attributes), listeners), {
+              children: /* @__PURE__ */ jsx4(GripVertical, { className: "h-4 w-4" })
+            })
+          ),
+          /* @__PURE__ */ jsx4(RuleOrderBadge, { order: index + 1 })
+        ] }) }),
+        /* @__PURE__ */ jsx4(TableCell, { className: "text-body-small overflow-hidden", children: /* @__PURE__ */ jsx4("div", { className: "break-words whitespace-normal", children: rule.text }) }),
+        /* @__PURE__ */ jsx4(TableCell, { children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-end gap-1", children: [
+          /* @__PURE__ */ jsx4(
+            Switch,
+            {
+              checked: rule.isEnabled,
+              onCheckedChange: (checked) => onToggle(rule.id, checked),
+              "aria-label": `Toggle rule ${index + 1}`
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8",
+              onClick: () => onEdit(rule.id),
+              "aria-label": `Edit rule ${index + 1}`,
+              children: /* @__PURE__ */ jsx4(Pencil, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8 text-destructive hover:text-destructive",
+              onClick: () => onDelete(rule.id),
+              "aria-label": `Delete rule ${index + 1}`,
+              children: /* @__PURE__ */ jsx4(Trash2, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+function RuleTable({
+  rules,
+  onEdit,
+  onDelete,
+  onToggle,
+  onReorder
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  function handleDragEnd(event) {
+    const { active, over } = event;
+    if (over && active.id !== over.id && onReorder) {
+      onReorder(String(active.id), String(over.id));
+    }
+  }
+  if (rules.length === 0) {
+    return /* @__PURE__ */ jsx4("div", { className: "flex h-24 items-center justify-center text-body-small text-muted-foreground", children: "No rules added yet." });
+  }
+  return /* @__PURE__ */ jsx4(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragEnd: handleDragEnd,
+      children: /* @__PURE__ */ jsx4(
+        SortableContext,
+        {
+          items: rules.map((r) => r.id),
+          strategy: verticalListSortingStrategy,
+          children: /* @__PURE__ */ jsxs4(Table, { className: "table-fixed", children: [
+            /* @__PURE__ */ jsx4(TableHeader, { children: /* @__PURE__ */ jsxs4(TableRow, { children: [
+              /* @__PURE__ */ jsx4(TableHead, { className: "w-28", children: /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1.5", children: [
+                "Order",
+                /* @__PURE__ */ jsx4(TooltipProvider, { children: /* @__PURE__ */ jsxs4(Tooltip, { children: [
+                  /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx4(Info, { className: "h-3.5 w-3.5 text-muted-foreground cursor-default" }) }),
+                  /* @__PURE__ */ jsx4(TooltipContent, { children: "Drag rows to reorder rules" })
+                ] }) })
+              ] }) }),
+              /* @__PURE__ */ jsx4(TableHead, { children: "Rule Set" }),
+              /* @__PURE__ */ jsx4(TableHead, { className: "w-36 text-right", children: "Actions" })
+            ] }) }),
+            /* @__PURE__ */ jsx4(TableBody, { children: rules.map((rule, index) => /* @__PURE__ */ jsx4(
+              SortableRuleRow,
+              {
+                rule,
+                index,
+                onEdit,
+                onDelete,
+                onToggle
+              },
+              rule.id
+            )) })
+          ] })
+        }
+      )
+    }
+  );
+}
+function RuleTabContent({
+  rules,
+  description,
+  onEditRule,
+  onDeleteRule,
+  onToggleRule,
+  onReorderRules,
+  rowsPerPage
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: "mt-4 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-2 rounded-none border border-blue-200 bg-blue-50 p-3", children: [
+      /* @__PURE__ */ jsx4(Info, { className: "mt-0.5 h-4 w-4 shrink-0 text-blue-600" }),
+      /* @__PURE__ */ jsx4("p", { className: "text-caption text-blue-700", children: description })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      RuleTable,
+      {
+        rules,
+        onEdit: onEditRule,
+        onDelete: onDeleteRule,
+        onToggle: onToggleRule,
+        onReorder: onReorderRules
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-end gap-2 pt-2 text-body-small text-muted-foreground", children: [
+      /* @__PURE__ */ jsx4("span", { children: "Rows per page:" }),
+      /* @__PURE__ */ jsxs4(Select, { defaultValue: String(rowsPerPage), children: [
+        /* @__PURE__ */ jsx4(SelectTrigger, { className: "h-8 w-20", children: /* @__PURE__ */ jsx4(SelectValue, {}) }),
+        /* @__PURE__ */ jsxs4(SelectContent, { children: [
+          /* @__PURE__ */ jsx4(SelectItem, { value: "5", children: "5" }),
+          /* @__PURE__ */ jsx4(SelectItem, { value: "10", children: "10" }),
+          /* @__PURE__ */ jsx4(SelectItem, { value: "20", children: "20" }),
+          /* @__PURE__ */ jsx4(SelectItem, { value: "50", children: "50" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function RuleSetSection({
+  standardRules,
+  handoffRules,
+  onAddRule,
+  onEditRule,
+  onDeleteRule,
+  onToggleRule,
+  onReorderRules,
+  onExport,
+  onImport,
+  rowsPerPage = 10,
+  className
+}) {
+  const [activeTab, setActiveTab] = React2.useState(
+    "standard"
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsx4(
+        SectionHeader,
+        {
+          title: "Rule Set",
+          description: "You can adjust the behavior and response method of the Agent through rules."
+        }
+      ),
+      /* @__PURE__ */ jsxs4("div", { className: "flex shrink-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsxs4(Button, { variant: "outline", size: "sm", onClick: onExport, children: [
+          /* @__PURE__ */ jsx4(Download, { className: "mr-1.5 h-3.5 w-3.5" }),
+          "Export"
+        ] }),
+        /* @__PURE__ */ jsxs4(Button, { variant: "outline", size: "sm", onClick: onImport, children: [
+          /* @__PURE__ */ jsx4(Upload, { className: "mr-1.5 h-3.5 w-3.5" }),
+          "Import"
+        ] }),
+        /* @__PURE__ */ jsxs4(Button, { size: "sm", onClick: () => onAddRule(activeTab), children: [
+          /* @__PURE__ */ jsx4(Plus, { className: "mr-1.5 h-3.5 w-3.5" }),
+          "Add rule"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4(
+      Tabs,
+      {
+        defaultValue: "standard",
+        onValueChange: (v) => setActiveTab(v),
+        children: [
+          /* @__PURE__ */ jsxs4(TabsList, { className: "w-full", children: [
+            /* @__PURE__ */ jsx4(TabsTrigger, { value: "standard", className: "flex-1", children: "Standard Rules" }),
+            /* @__PURE__ */ jsx4(TabsTrigger, { value: "handoff", className: "flex-1", children: "Hand-off Rules" })
+          ] }),
+          /* @__PURE__ */ jsx4(TabsContent, { value: "standard", children: /* @__PURE__ */ jsx4(
+            RuleTabContent,
+            {
+              rules: standardRules,
+              description: "Standard rules guide AI behavior during response generation. These rules help the AI understand how to respond appropriately.",
+              onEditRule,
+              onDeleteRule,
+              onToggleRule,
+              onReorderRules,
+              rowsPerPage
+            }
+          ) }),
+          /* @__PURE__ */ jsx4(TabsContent, { value: "handoff", children: /* @__PURE__ */ jsx4(
+            RuleTabContent,
+            {
+              rules: handoffRules,
+              description: "Hand-off rules define when the AI should transfer a conversation to a human agent.",
+              onEditRule,
+              onDeleteRule,
+              onToggleRule,
+              onReorderRules,
+              rowsPerPage
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function AddEditRuleModal({
+  open,
+  onOpenChange,
+  rule,
+  defaultType = "standard",
+  onConfirm
+}) {
+  var _a;
+  const RULE_TYPE_LABELS = {
+    standard: "Standard Rule",
+    handoff: "Hand-off Rule"
+  };
+  const LABEL_TO_TYPE = {
+    "Standard Rule": "standard",
+    "Hand-off Rule": "handoff"
+  };
+  const isEdit = !!rule;
+  const [draft, setDraft] = React2.useState((_a = rule == null ? void 0 : rule.text) != null ? _a : "");
+  const [ruleType, setRuleType] = React2.useState(
+    defaultType
+  );
+  React2.useEffect(() => {
+    var _a2;
+    if (open) {
+      setDraft((_a2 = rule == null ? void 0 : rule.text) != null ? _a2 : "");
+      setRuleType(defaultType);
+    }
+  }, [open, rule, defaultType]);
+  return /* @__PURE__ */ jsx4(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs4(DialogContent, { className: "max-w-lg", children: [
+    /* @__PURE__ */ jsx4(DialogHeader, { children: /* @__PURE__ */ jsx4(DialogTitle, { children: isEdit ? "Edit Rule" : "Add Rule" }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-3 py-2", children: [
+      !isEdit && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxs4(Label, { htmlFor: "rule-type", children: [
+          "Rule Type ",
+          /* @__PURE__ */ jsx4("span", { className: "text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs4(
+          Select,
+          {
+            value: RULE_TYPE_LABELS[ruleType],
+            onValueChange: (v) => setRuleType(LABEL_TO_TYPE[v]),
+            children: [
+              /* @__PURE__ */ jsx4(SelectTrigger, { id: "rule-type", className: "w-full", children: /* @__PURE__ */ jsx4(SelectValue, {}) }),
+              /* @__PURE__ */ jsxs4(SelectContent, { children: [
+                /* @__PURE__ */ jsx4(SelectItem, { value: "Standard Rule", children: "Standard Rule" }),
+                /* @__PURE__ */ jsx4(SelectItem, { value: "Hand-off Rule", children: "Hand-off Rule" })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxs4(Label, { htmlFor: "rule-draft", children: [
+          "Rule ",
+          /* @__PURE__ */ jsx4("span", { className: "text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx4(
+          Textarea,
+          {
+            id: "rule-draft",
+            rows: 4,
+            placeholder: "Describe the rule the agent should follow\u2026",
+            value: draft,
+            onChange: (e) => setDraft(e.target.value)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4(DialogFooter, { children: [
+      /* @__PURE__ */ jsx4(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx4(
+        Button,
+        {
+          disabled: !draft.trim(),
+          onClick: () => {
+            onConfirm(draft.trim(), ruleType);
+            onOpenChange(false);
+          },
+          children: isEdit ? "Save" : "Add"
+        }
+      )
+    ] })
+  ] }) });
+}
+
+export {
+  AgentCard,
+  AgentMenuModal,
+  IntegrationServiceCard,
+  IntegrationInstructionCard,
+  ServiceConfigurationModal,
+  SectionHeader,
+  SettingRow,
+  SettingCard,
+  AgentConfigForm,
+  ResponseTemplateEditModal,
+  RuleOrderBadge,
+  RuleSetSection,
+  AddEditRuleModal
+};