@wealthx/shadcn 1.5.28 → 1.5.29

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

@@ -0,0 +1,709 @@
+import React from "react";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} 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 { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type { AiBuilderAgentConfig, AiBuilderRuleItem } from "./types";
+
+// ---------------------------------------------------------------------------
+// SectionHeader
+// ---------------------------------------------------------------------------
+
+export type SectionHeaderProps = {
+  title: string;
+  description: string;
+  className?: string;
+};
+
+export function SectionHeader({
+  title,
+  description,
+  className,
+}: SectionHeaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-0.5", className)}>
+      <h2 className="text-h5">{title}</h2>
+      <p className="text-body-small text-muted-foreground">{description}</p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// SettingRow
+// ---------------------------------------------------------------------------
+
+export type SettingRowProps = {
+  icon: React.ReactNode;
+  label: string;
+  description: string;
+  control: React.ReactNode;
+  className?: string;
+};
+
+export function SettingRow({
+  icon,
+  label,
+  description,
+  control,
+  className,
+}: SettingRowProps) {
+  return (
+    <div className={cn("flex items-center gap-4 py-4", className)}>
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+        {icon}
+      </div>
+      <div className="flex flex-1 flex-col gap-0.5">
+        <span className="text-sm font-semibold">{label}</span>
+        <span className="text-caption text-muted-foreground">
+          {description}
+        </span>
+      </div>
+      <div className="shrink-0">{control}</div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// SettingCard — wraps SettingRows with a bordered card + dividers
+// ---------------------------------------------------------------------------
+
+export type SettingCardProps = {
+  rows: SettingRowProps[];
+  className?: string;
+};
+
+export function SettingCard({ rows, className }: SettingCardProps) {
+  return (
+    <div className={cn("rounded-none border px-4", className)}>
+      {rows.map((row, i) => (
+        <React.Fragment key={row.label}>
+          <SettingRow {...row} />
+          {i < rows.length - 1 && <Separator />}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AgentConfigForm
+// ---------------------------------------------------------------------------
+
+export type AgentConfigFormProps = {
+  config: AiBuilderAgentConfig;
+  onChange: (config: AiBuilderAgentConfig) => void;
+  className?: string;
+};
+
+export function AgentConfigForm({
+  config,
+  onChange,
+  className,
+}: AgentConfigFormProps) {
+  return (
+    <div
+      className={cn("flex flex-col gap-4 rounded-none border p-6", className)}
+    >
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="agent-name">Agent Name</Label>
+        <Input
+          id="agent-name"
+          value={config.name}
+          onChange={(e) => onChange({ ...config, name: e.target.value })}
+        />
+      </div>
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="agent-desc">Business Description</Label>
+        <Textarea
+          id="agent-desc"
+          rows={4}
+          placeholder="What business is this agent for? What industry?"
+          value={config.businessDescription}
+          onChange={(e) =>
+            onChange({ ...config, businessDescription: e.target.value })
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ResponseTemplateEditModal
+// ---------------------------------------------------------------------------
+
+export type ResponseTemplateEditModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  channel: "email" | "chat";
+  content: string;
+  onConfirm: (content: string) => void;
+};
+
+export function ResponseTemplateEditModal({
+  open,
+  onOpenChange,
+  channel,
+  content,
+  onConfirm,
+}: ResponseTemplateEditModalProps) {
+  const [draft, setDraft] = React.useState(content);
+
+  React.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 (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Edit {channelLabel} response template</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-1.5 py-2">
+          <Label htmlFor="template-content">
+            {channelLabel} template content{" "}
+            <span className="text-destructive">*</span>
+          </Label>
+          <Textarea
+            id="template-content"
+            rows={6}
+            placeholder={`Enter content for ${channelLabel} template`}
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+          />
+          <p className="text-caption text-muted-foreground">{helperText}</p>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onConfirm(draft);
+              onOpenChange(false);
+            }}
+          >
+            Confirm
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// RuleOrderBadge
+// ---------------------------------------------------------------------------
+
+export type RuleOrderBadgeProps = {
+  order: number;
+  className?: string;
+};
+
+export function RuleOrderBadge({ order, className }: RuleOrderBadgeProps) {
+  return (
+    <Badge variant="secondary" className={className}>
+      #{order}
+    </Badge>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// RuleSetSection
+// ---------------------------------------------------------------------------
+
+export type RuleSetSectionProps = {
+  standardRules: AiBuilderRuleItem[];
+  handoffRules: AiBuilderRuleItem[];
+  onAddRule: (defaultType: "standard" | "handoff") => void;
+  onEditRule: (id: string) => void;
+  onDeleteRule: (id: string) => void;
+  onToggleRule: (id: string, enabled: boolean) => void;
+  /** Called when the user drag-reorders a rule. activeId dropped over overId. */
+  onReorderRules?: (activeId: string, overId: string) => void;
+  onExport: () => void;
+  onImport: () => void;
+  rowsPerPage?: number;
+  className?: string;
+};
+
+// ---------------------------------------------------------------------------
+// SortableRuleRow — individual draggable row
+// ---------------------------------------------------------------------------
+
+function SortableRuleRow({
+  rule,
+  index,
+  onEdit,
+  onDelete,
+  onToggle,
+}: {
+  rule: AiBuilderRuleItem;
+  index: number;
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+  onToggle: (id: string, enabled: boolean) => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: rule.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <TableRow
+      ref={setNodeRef}
+      style={style}
+      className={cn(isDragging && "opacity-50 bg-muted/40")}
+    >
+      {/* Order: drag handle + badge */}
+      <TableCell>
+        <div className="flex items-center gap-2">
+          <button
+            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}
+          >
+            <GripVertical className="h-4 w-4" />
+          </button>
+          <RuleOrderBadge order={index + 1} />
+        </div>
+      </TableCell>
+
+      {/* Rule text */}
+      <TableCell className="text-body-small overflow-hidden">
+        <div className="break-words whitespace-normal">{rule.text}</div>
+      </TableCell>
+
+      {/* Actions */}
+      <TableCell>
+        <div className="flex items-center justify-end gap-1">
+          <Switch
+            checked={rule.isEnabled}
+            onCheckedChange={(checked) => onToggle(rule.id, checked)}
+            aria-label={`Toggle rule ${index + 1}`}
+          />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => onEdit(rule.id)}
+            aria-label={`Edit rule ${index + 1}`}
+          >
+            <Pencil className="h-3.5 w-3.5" />
+          </Button>
+          <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}`}
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// RuleTable — sortable list with DndContext
+// ---------------------------------------------------------------------------
+
+function RuleTable({
+  rules,
+  onEdit,
+  onDelete,
+  onToggle,
+  onReorder,
+}: {
+  rules: AiBuilderRuleItem[];
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+  onToggle: (id: string, enabled: boolean) => void;
+  onReorder?: (activeId: string, overId: string) => void;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (over && active.id !== over.id && onReorder) {
+      onReorder(String(active.id), String(over.id));
+    }
+  }
+
+  if (rules.length === 0) {
+    return (
+      <div className="flex h-24 items-center justify-center text-body-small text-muted-foreground">
+        No rules added yet.
+      </div>
+    );
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext
+        items={rules.map((r) => r.id)}
+        strategy={verticalListSortingStrategy}
+      >
+        <Table className="table-fixed">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-28">
+                <span className="flex items-center gap-1.5">
+                  Order
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Info className="h-3.5 w-3.5 text-muted-foreground cursor-default" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Drag rows to reorder rules
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </span>
+              </TableHead>
+              <TableHead>Rule Set</TableHead>
+              <TableHead className="w-36 text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rules.map((rule, index) => (
+              <SortableRuleRow
+                key={rule.id}
+                rule={rule}
+                index={index}
+                onEdit={onEdit}
+                onDelete={onDelete}
+                onToggle={onToggle}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+function RuleTabContent({
+  rules,
+  description,
+  onEditRule,
+  onDeleteRule,
+  onToggleRule,
+  onReorderRules,
+  rowsPerPage,
+}: {
+  rules: AiBuilderRuleItem[];
+  description: string;
+  onEditRule: (id: string) => void;
+  onDeleteRule: (id: string) => void;
+  onToggleRule: (id: string, enabled: boolean) => void;
+  onReorderRules?: (activeId: string, overId: string) => void;
+  rowsPerPage: number;
+}) {
+  return (
+    <div className="mt-4 flex flex-col gap-3">
+      <div className="flex items-start gap-2 rounded-none border border-blue-200 bg-blue-50 p-3">
+        <Info className="mt-0.5 h-4 w-4 shrink-0 text-blue-600" />
+        <p className="text-caption text-blue-700">{description}</p>
+      </div>
+      <RuleTable
+        rules={rules}
+        onEdit={onEditRule}
+        onDelete={onDeleteRule}
+        onToggle={onToggleRule}
+        onReorder={onReorderRules}
+      />
+      <div className="flex items-center justify-end gap-2 pt-2 text-body-small text-muted-foreground">
+        <span>Rows per page:</span>
+        <Select defaultValue={String(rowsPerPage)}>
+          <SelectTrigger className="h-8 w-20">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="5">5</SelectItem>
+            <SelectItem value="10">10</SelectItem>
+            <SelectItem value="20">20</SelectItem>
+            <SelectItem value="50">50</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}
+
+export function RuleSetSection({
+  standardRules,
+  handoffRules,
+  onAddRule,
+  onEditRule,
+  onDeleteRule,
+  onToggleRule,
+  onReorderRules,
+  onExport,
+  onImport,
+  rowsPerPage = 10,
+  className,
+}: RuleSetSectionProps) {
+  const [activeTab, setActiveTab] = React.useState<"standard" | "handoff">(
+    "standard"
+  );
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      {/* Toolbar */}
+      <div className="flex items-start justify-between gap-4">
+        <SectionHeader
+          title="Rule Set"
+          description="You can adjust the behavior and response method of the Agent through rules."
+        />
+        <div className="flex shrink-0 items-center gap-2">
+          <Button variant="outline" size="sm" onClick={onExport}>
+            <Download className="mr-1.5 h-3.5 w-3.5" />
+            Export
+          </Button>
+          <Button variant="outline" size="sm" onClick={onImport}>
+            <Upload className="mr-1.5 h-3.5 w-3.5" />
+            Import
+          </Button>
+          <Button size="sm" onClick={() => onAddRule(activeTab)}>
+            <Plus className="mr-1.5 h-3.5 w-3.5" />
+            Add rule
+          </Button>
+        </div>
+      </div>
+
+      {/* Tabs + content */}
+      <Tabs
+        defaultValue="standard"
+        onValueChange={(v) => setActiveTab(v as "standard" | "handoff")}
+      >
+        <TabsList className="w-full">
+          <TabsTrigger value="standard" className="flex-1">
+            Standard Rules
+          </TabsTrigger>
+          <TabsTrigger value="handoff" className="flex-1">
+            Hand-off Rules
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="standard">
+          <RuleTabContent
+            rules={standardRules}
+            description="Standard rules guide AI behavior during response generation. These rules help the AI understand how to respond appropriately."
+            onEditRule={onEditRule}
+            onDeleteRule={onDeleteRule}
+            onToggleRule={onToggleRule}
+            onReorderRules={onReorderRules}
+            rowsPerPage={rowsPerPage}
+          />
+        </TabsContent>
+
+        <TabsContent value="handoff">
+          <RuleTabContent
+            rules={handoffRules}
+            description="Hand-off rules define when the AI should transfer a conversation to a human agent."
+            onEditRule={onEditRule}
+            onDeleteRule={onDeleteRule}
+            onToggleRule={onToggleRule}
+            onReorderRules={onReorderRules}
+            rowsPerPage={rowsPerPage}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AddEditRuleModal
+// ---------------------------------------------------------------------------
+
+export type AddEditRuleModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Pass a rule to edit; omit or pass null/undefined for "Add" mode */
+  rule?: AiBuilderRuleItem | null;
+  /** Pre-select the rule type in Add mode (defaults to "standard") */
+  defaultType?: "standard" | "handoff";
+  onConfirm: (text: string, type: "standard" | "handoff") => void;
+};
+
+export function AddEditRuleModal({
+  open,
+  onOpenChange,
+  rule,
+  defaultType = "standard",
+  onConfirm,
+}: AddEditRuleModalProps) {
+  // Map between internal type key and display label (pattern: value === label)
+  const RULE_TYPE_LABELS: Record<"standard" | "handoff", string> = {
+    standard: "Standard Rule",
+    handoff: "Hand-off Rule",
+  };
+  const LABEL_TO_TYPE: Record<string, "standard" | "handoff"> = {
+    "Standard Rule": "standard",
+    "Hand-off Rule": "handoff",
+  };
+
+  const isEdit = !!rule;
+  const [draft, setDraft] = React.useState(rule?.text ?? "");
+  const [ruleType, setRuleType] = React.useState<"standard" | "handoff">(
+    defaultType
+  );
+
+  React.useEffect(() => {
+    if (open) {
+      setDraft(rule?.text ?? "");
+      setRuleType(defaultType);
+    }
+  }, [open, rule, defaultType]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? "Edit Rule" : "Add Rule"}</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 py-2">
+          {!isEdit && (
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="rule-type">
+                Rule Type <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={RULE_TYPE_LABELS[ruleType]}
+                onValueChange={(v) => setRuleType(LABEL_TO_TYPE[v])}
+              >
+                <SelectTrigger id="rule-type" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Standard Rule">Standard Rule</SelectItem>
+                  <SelectItem value="Hand-off Rule">Hand-off Rule</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="rule-draft">
+              Rule <span className="text-destructive">*</span>
+            </Label>
+            <Textarea
+              id="rule-draft"
+              rows={4}
+              placeholder="Describe the rule the agent should follow…"
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            disabled={!draft.trim()}
+            onClick={() => {
+              onConfirm(draft.trim(), ruleType);
+              onOpenChange(false);
+            }}
+          >
+            {isEdit ? "Save" : "Add"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}