@wealthx/shadcn 1.5.24 → 1.5.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.24",
+  "version": "1.5.26",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -302,9 +302,9 @@
       "require": "./dist/components/ui/accordion.js"
     },
     "./ai-builder": {
-      "types": "./src/components/ui/ai-builder.tsx",
-      "import": "./dist/components/ui/ai-builder.mjs",
-      "require": "./dist/components/ui/ai-builder.js"
+      "types": "./src/components/ui/ai-builder/index.tsx",
+      "import": "./dist/components/ui/ai-builder/index.mjs",
+      "require": "./dist/components/ui/ai-builder/index.js"
     },
     "./empty": {
       "types": "./src/components/ui/empty.tsx",
@@ -557,9 +557,9 @@
       "require": "./dist/components/ui/ai-assistant-drawer.js"
     },
     "./ai-conversations": {
-      "types": "./src/components/ui/ai-conversations.tsx",
-      "import": "./dist/components/ui/ai-conversations.mjs",
-      "require": "./dist/components/ui/ai-conversations.js"
+      "types": "./src/components/ui/ai-conversations/index.tsx",
+      "import": "./dist/components/ui/ai-conversations/index.mjs",
+      "require": "./dist/components/ui/ai-conversations/index.js"
     },
     "./chat-widget-primitives": {
       "types": "./src/components/ui/chat-widget-primitives.tsx",

package/src/components/index.tsx

@@ -20,6 +20,7 @@ export {
 } from "./ui/ai-builder";
 export type {
   AiBuilderAgentItem,
+  AiBuilderEmailCategories,
   AiBuilderServiceType,
   AiBuilderServiceData,
   AgentCardProps,
@@ -56,6 +57,7 @@ export type {
   AiConvMessage,
   AiConvDataField,
   AiConvAppointmentData,
+  AiConvEmailPayload,
   ConversationStatusChipProps,
   ConversationListItemProps,
   ConversationListProps,

package/src/components/ui/ai-builder/agent-card.tsx

@@ -0,0 +1,181 @@
+import React from "react";
+import { MoreHorizontal } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import type { AiBuilderAgentItem } from "./types";
+
+// ---------------------------------------------------------------------------
+// AgentCard
+// ---------------------------------------------------------------------------
+
+export type AgentCardProps = {
+  agent: AiBuilderAgentItem;
+  onToggle: (agentId: string, enabled: boolean) => void;
+  onMenuClick: (agentId: string) => void;
+  className?: string;
+};
+
+const 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.",
+  },
+];
+
+export function AgentCard({
+  agent,
+  onToggle,
+  onMenuClick,
+  className,
+}: AgentCardProps) {
+  const { id, title, description, tags, isEnabled, infoBadge, isComingSoon } =
+    agent;
+
+  return (
+    <Card
+      className={cn(
+        "flex flex-col gap-3 p-4 transition-opacity",
+        isComingSoon && "opacity-60",
+        className,
+      )}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex flex-1 items-center gap-2 min-w-0">
+          <span
+            className={cn(
+              "mt-0.5 size-2 shrink-0 rounded-full",
+              isEnabled && !isComingSoon
+                ? "bg-success"
+                : "bg-muted-foreground/40",
+            )}
+          />
+          <span className="truncate text-sm font-semibold leading-tight">
+            {title}
+          </span>
+          {isComingSoon && (
+            <Badge variant="outline" className="shrink-0 text-xs">
+              Coming Soon
+            </Badge>
+          )}
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          <Switch
+            checked={isEnabled}
+            disabled={isComingSoon}
+            onCheckedChange={(checked) => onToggle(id, checked)}
+            aria-label={`Toggle ${title}`}
+          />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => onMenuClick(id)}
+            aria-label={`View details for ${title}`}
+          >
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <p className="text-muted-foreground text-xs leading-relaxed flex-1">
+        {description}
+      </p>
+
+      <div className="flex flex-col gap-2">
+        {infoBadge && (
+          <p className="bg-info/10 text-info px-2 py-1 text-xs">{infoBadge}</p>
+        )}
+        {tags.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {tags.map((tag) => (
+              <Badge key={tag} variant="secondary" className="text-xs">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AgentMenuModal
+// ---------------------------------------------------------------------------
+
+export type AgentMenuModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  agentTitle: string;
+  description?: string;
+  features?: Array<{ title: string; description: string }>;
+};
+
+export function AgentMenuModal({
+  open,
+  onOpenChange,
+  agentTitle,
+  description = "AI-powered lead management that works around the clock to grow your mortgage business.",
+  features = AGENT_FEATURES,
+}: AgentMenuModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{agentTitle}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 py-2">
+          {features.map((feature, index) => (
+            <div key={feature.title} className="flex gap-3">
+              <Badge
+                variant="default"
+                className="h-6 w-6 shrink-0 p-0 text-xs font-bold"
+              >
+                {index + 1}
+              </Badge>
+              <div className="flex flex-col gap-0.5">
+                <p className="text-sm font-semibold">{feature.title}</p>
+                <p className="text-muted-foreground text-xs leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/ai-builder/index.tsx

@@ -0,0 +1,21 @@
+export type {
+  AiBuilderAgentItem,
+  AiBuilderEmailCategories,
+  AiBuilderServiceData,
+  AiBuilderServiceType,
+} from "./types";
+
+export { AgentCard, AgentMenuModal } from "./agent-card";
+export type { AgentCardProps, AgentMenuModalProps } from "./agent-card";
+
+export {
+  IntegrationInstructionCard,
+  IntegrationServiceCard,
+} from "./integration-card";
+export type {
+  IntegrationInstructionCardProps,
+  IntegrationServiceCardProps,
+} from "./integration-card";
+
+export { ServiceConfigurationModal } from "./service-config-modal";
+export type { ServiceConfigurationModalProps } from "./service-config-modal";

package/src/components/ui/ai-builder/integration-card.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from "react";
+import { Check, CheckCircle2, Copy, Settings, User } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// IntegrationServiceCard
+// ---------------------------------------------------------------------------
+
+export type IntegrationServiceCardProps = {
+  title: string;
+  imageUrl?: string;
+  iconNode?: React.ReactNode;
+  description: string;
+  isConnected: boolean;
+  onCardClick: () => void;
+  onSettingsClick: () => void;
+  className?: string;
+};
+
+export function IntegrationServiceCard({
+  title,
+  imageUrl,
+  iconNode,
+  description,
+  isConnected,
+  onCardClick,
+  onSettingsClick,
+  className,
+}: IntegrationServiceCardProps) {
+  return (
+    <Card
+      className={cn(
+        "flex flex-col gap-3 p-4",
+        !isConnected && "cursor-pointer transition-colors hover:bg-accent/50",
+        className,
+      )}
+      onClick={!isConnected ? onCardClick : undefined}
+    >
+      <div className="flex items-start gap-3">
+        <Avatar className="h-10 w-10 shrink-0">
+          {imageUrl && <AvatarImage src={imageUrl} alt={title} />}
+          <AvatarFallback className={iconNode ? "bg-transparent p-0.5" : ""}>
+            {iconNode ?? <User className="h-5 w-5" />}
+          </AvatarFallback>
+        </Avatar>
+
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <div className="flex items-center gap-2">
+            <span className="text-base font-semibold">{title}</span>
+            {isConnected && (
+              <Badge variant="success" className="gap-1 text-xs">
+                <CheckCircle2 className="h-3 w-3" />
+                Connected
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        {isConnected && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 shrink-0"
+            onClick={(e) => {
+              e.stopPropagation();
+              onSettingsClick();
+            }}
+            aria-label={`Settings for ${title}`}
+          >
+            <Settings className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      <p className="text-sm leading-relaxed text-muted-foreground">
+        {description}
+      </p>
+    </Card>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// IntegrationInstructionCard
+// ---------------------------------------------------------------------------
+
+export type IntegrationInstructionCardProps = {
+  title: string;
+  codeBlock: string;
+  onCopy?: () => void;
+  className?: string;
+};
+
+export function IntegrationInstructionCard({
+  title,
+  codeBlock,
+  onCopy,
+  className,
+}: IntegrationInstructionCardProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(codeBlock);
+      setCopied(true);
+      onCopy?.();
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard unavailable (non-HTTPS or permissions denied)
+    }
+  };
+
+  return (
+    <Card className={cn("flex flex-col gap-3 p-4", className)}>
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="text-sm font-semibold">{title}</h3>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-7 gap-1.5 text-xs"
+          onClick={handleCopy}
+        >
+          {copied ? (
+            <>
+              <Check className="h-3 w-3" />
+              Copied
+            </>
+          ) : (
+            <>
+              <Copy className="h-3 w-3" />
+              Copy
+            </>
+          )}
+        </Button>
+      </div>
+      <pre className="bg-muted overflow-x-auto p-3 text-xs leading-relaxed">
+        <code>{codeBlock}</code>
+      </pre>
+    </Card>
+  );
+}

package/src/components/ui/ai-builder/service-config-modal.tsx

@@ -0,0 +1,283 @@
+import React from "react";
+import { Check, CheckCircle2, Clock, Mail, Shield, User } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Switch } from "@/components/ui/switch";
+import type { AiBuilderServiceData } from "./types";
+
+// ---------------------------------------------------------------------------
+// ServiceConfigurationModal
+// ---------------------------------------------------------------------------
+
+export type ServiceConfigurationModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serviceTitle: string;
+  isConnected: boolean;
+  serviceData?: AiBuilderServiceData;
+  /** Brand icon node shown in the not-connected centered layout */
+  iconNode?: React.ReactNode;
+  /** Permissions shown in the not-connected state */
+  connectPermissions?: string[];
+  /** Subtitle shown below the service name in the not-connected state */
+  connectDescription?: string;
+  onConnect: () => void;
+  onDisconnect: () => void;
+  onReconnect: () => void;
+};
+
+export function ServiceConfigurationModal({
+  open,
+  onOpenChange,
+  serviceTitle,
+  isConnected,
+  serviceData,
+  iconNode,
+  connectPermissions,
+  connectDescription = "Link your account to enable automated workflows with WealthX.",
+  onConnect,
+  onDisconnect,
+  onReconnect,
+}: ServiceConfigurationModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        {isConnected ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>{serviceTitle}</DialogTitle>
+              <DialogDescription>
+                Manage your integration settings.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="flex flex-col gap-4 py-2">
+              <div className="flex items-center gap-2 px-3 py-2 text-xs font-medium bg-success/10 text-success">
+                <CheckCircle2 className="h-3.5 w-3.5 shrink-0" />
+                Active — integration is running
+              </div>
+
+              {serviceData && (
+                <>
+                  <div className="flex flex-col gap-2">
+                    <p className="text-overline text-muted-foreground">
+                      Account Information
+                    </p>
+                    <Card className="py-0">
+                      <CardContent className="flex flex-col gap-3 p-3">
+                        <div className="flex items-center gap-2 text-sm">
+                          <User className="text-muted-foreground h-4 w-4 shrink-0" />
+                          <span className="text-muted-foreground">
+                            {serviceData.accountIdentifierLabel}:
+                          </span>
+                          <span className="font-medium">
+                            {serviceData.accountIdentifier}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm">
+                          <Clock className="text-muted-foreground h-4 w-4 shrink-0" />
+                          <span className="text-muted-foreground">
+                            Connected on:
+                          </span>
+                          <span className="font-medium">
+                            {serviceData.connectedOn}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm">
+                          <Clock className="text-muted-foreground h-4 w-4 shrink-0" />
+                          <span className="text-muted-foreground">
+                            Last synced:
+                          </span>
+                          <span className="font-medium">
+                            {serviceData.lastSynced}
+                          </span>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </div>
+
+                  <div className="flex flex-col gap-2">
+                    <p className="text-overline text-muted-foreground">
+                      Granted Permissions
+                    </p>
+                    <Card className="py-0">
+                      <CardContent className="flex flex-col gap-2 p-3">
+                        {serviceData.permissions.map((permission) => (
+                          <div
+                            key={permission}
+                            className="flex items-center gap-2 text-sm"
+                          >
+                            <Shield className="text-success h-4 w-4 shrink-0" />
+                            <span>{permission}</span>
+                          </div>
+                        ))}
+                      </CardContent>
+                    </Card>
+                  </div>
+
+                  <div className="flex flex-col gap-2">
+                    <p className="text-overline text-muted-foreground">
+                      Sync Settings
+                    </p>
+                    <Card className="py-0">
+                      <CardContent className="flex items-center justify-between gap-3 p-3">
+                        <div className="flex flex-col gap-0.5">
+                          <p className="text-sm font-medium">
+                            {serviceData.syncLabel}
+                          </p>
+                          <p className="text-muted-foreground text-sm">
+                            {serviceData.syncDescription}
+                          </p>
+                        </div>
+                        <Switch
+                          checked={serviceData.syncEnabled}
+                          onCheckedChange={serviceData.onSyncToggle}
+                          aria-label={serviceData.syncLabel}
+                        />
+                      </CardContent>
+                    </Card>
+                  </div>
+
+                  {serviceData.emailCategories && (
+                    <div className="flex flex-col gap-2">
+                      <div>
+                        <p className="text-overline text-muted-foreground">
+                          Email Filters
+                        </p>
+                        <p className="text-muted-foreground text-sm mt-0.5">
+                          Choose which inbox categories to sync into WealthX.
+                        </p>
+                      </div>
+                      <Card className="py-0">
+                        <CardContent className="flex flex-col gap-3 p-3">
+                          {serviceData.emailCategories.available.map(
+                            (category) => {
+                              const checked =
+                                serviceData.emailCategories!.selected.includes(
+                                  category,
+                                );
+                              return (
+                                <div
+                                  key={category}
+                                  className="flex items-center gap-2"
+                                >
+                                  <Checkbox
+                                    id={`email-cat-${category}`}
+                                    checked={checked}
+                                    onCheckedChange={(v) => {
+                                      const next = v
+                                        ? [
+                                            ...serviceData.emailCategories!
+                                              .selected,
+                                            category,
+                                          ]
+                                        : serviceData.emailCategories!.selected.filter(
+                                            (c) => c !== category,
+                                          );
+                                      serviceData.emailCategories!.onChange(
+                                        next,
+                                      );
+                                    }}
+                                  />
+                                  <label
+                                    htmlFor={`email-cat-${category}`}
+                                    className="text-sm cursor-pointer select-none"
+                                  >
+                                    {category}
+                                  </label>
+                                </div>
+                              );
+                            },
+                          )}
+                        </CardContent>
+                      </Card>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={onDisconnect}
+                className="mr-auto"
+              >
+                Disconnect
+              </Button>
+              <Button
+                variant="outline-secondary"
+                size="sm"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button size="sm" onClick={onReconnect}>
+                Reconnect
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <div className="flex flex-col gap-4 py-2">
+              <div className="flex items-center gap-3">
+                <div className="flex h-10 w-10 shrink-0 items-center justify-center bg-muted">
+                  {iconNode ?? (
+                    <Mail className="h-5 w-5 text-muted-foreground" />
+                  )}
+                </div>
+                <div className="flex flex-col gap-0.5">
+                  <p className="text-sm font-semibold">
+                    Connect {serviceTitle}
+                  </p>
+                  <p className="text-muted-foreground text-xs">
+                    {connectDescription}
+                  </p>
+                </div>
+              </div>
+
+              {connectPermissions && connectPermissions.length > 0 && (
+                <div className="flex flex-col gap-2 border border-border px-4 py-3">
+                  <p className="text-overline text-muted-foreground">
+                    Permissions requested
+                  </p>
+                  {connectPermissions.map((perm) => (
+                    <div key={perm} className="flex items-center gap-2">
+                      <Check className="h-3.5 w-3.5 shrink-0 text-success" />
+                      <span className="text-sm text-muted-foreground">
+                        {perm}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button
+                variant="outline-secondary"
+                size="sm"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button size="sm" onClick={onConnect}>
+                Connect
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}