@actuate-media/cms-admin 0.4.0 → 0.7.0

package/src/views/page-builder/AIGenerateDialog.tsx

@@ -0,0 +1,574 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import {
+  Sparkles,
+  X,
+  Loader2,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  AlertTriangle,
+  Wand2,
+  FileText,
+  Search,
+  Accessibility,
+  ArrowRight,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { cmsApi } from '../../lib/api.js';
+import type { PageNode, GenerationStep } from '@actuate-media/cms-core';
+
+export interface AIGenerateDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onAccept: (tree: PageNode) => void;
+}
+
+interface StepInfo {
+  key: GenerationStep;
+  label: string;
+  icon: React.ReactNode;
+  description: string;
+}
+
+const ALL_STEPS: StepInfo[] = [
+  {
+    key: 'structure',
+    label: 'Structure',
+    icon: <Wand2 size={14} />,
+    description: 'Generate page layout and block placement',
+  },
+  {
+    key: 'content',
+    label: 'Content',
+    icon: <FileText size={14} />,
+    description: 'Write compelling copy for every block',
+  },
+  {
+    key: 'seo',
+    label: 'SEO',
+    icon: <Search size={14} />,
+    description: 'Optimize headings, meta tags, and keywords',
+  },
+  {
+    key: 'accessibility',
+    label: 'Accessibility',
+    icon: <Accessibility size={14} />,
+    description: 'Fix heading hierarchy, alt text, and ARIA',
+  },
+];
+
+type Tone = 'professional' | 'casual' | 'friendly' | 'technical' | 'luxury';
+
+const TONES: { value: Tone; label: string }[] = [
+  { value: 'professional', label: 'Professional' },
+  { value: 'casual', label: 'Casual' },
+  { value: 'friendly', label: 'Friendly' },
+  { value: 'technical', label: 'Technical' },
+  { value: 'luxury', label: 'Luxury' },
+];
+
+type Phase = 'prompt' | 'generating' | 'review';
+
+interface GenerationStepResult {
+  step: string;
+  metadata: {
+    tokensUsed: number;
+    durationMs: number;
+    changes: string[];
+  };
+}
+
+interface GenerationResultData {
+  tree: PageNode;
+  steps: GenerationStepResult[];
+  totalTokensUsed: number;
+  totalDurationMs: number;
+}
+
+export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogProps) {
+  const [phase, setPhase] = useState<Phase>('prompt');
+  const [prompt, setPrompt] = useState('');
+  const [tone, setTone] = useState<Tone>('professional');
+  const [enabledSteps, setEnabledSteps] = useState<Set<GenerationStep>>(
+    new Set(['structure', 'content', 'seo', 'accessibility']),
+  );
+  const [showContext, setShowContext] = useState(false);
+  const [businessName, setBusiness] = useState('');
+  const [industry, setIndustry] = useState('');
+  const [phone, setPhone] = useState('');
+  const [address, setAddress] = useState('');
+  const [services, setServices] = useState('');
+
+  const [currentStep, setCurrentStep] = useState<string>('');
+  const [completedSteps, setCompletedSteps] = useState<string[]>([]);
+  const [stepMessage, setStepMessage] = useState('');
+
+  const [result, setResult] = useState<GenerationResultData | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [expandedStep, setExpandedStep] = useState<string | null>(null);
+
+  const toggleStep = (step: GenerationStep) => {
+    const next = new Set(enabledSteps);
+    if (step === 'structure') return;
+    if (next.has(step)) {
+      next.delete(step);
+    } else {
+      next.add(step);
+    }
+    setEnabledSteps(next);
+  };
+
+  const resetState = useCallback(() => {
+    setPhase('prompt');
+    setPrompt('');
+    setTone('professional');
+    setEnabledSteps(new Set(['structure', 'content', 'seo', 'accessibility']));
+    setShowContext(false);
+    setBusiness('');
+    setIndustry('');
+    setPhone('');
+    setAddress('');
+    setServices('');
+    setCurrentStep('');
+    setCompletedSteps([]);
+    setStepMessage('');
+    setResult(null);
+    setError(null);
+    setExpandedStep(null);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    resetState();
+    onClose();
+  }, [resetState, onClose]);
+
+  const handleGenerate = useCallback(async () => {
+    if (!prompt.trim()) {
+      toast.error('Please describe the page you want to create');
+      return;
+    }
+
+    setPhase('generating');
+    setError(null);
+
+    const steps = ALL_STEPS.filter((s) => enabledSteps.has(s.key)).map((s) => s.key);
+
+    setCurrentStep(steps[0]!);
+    setStepMessage('Starting generation...');
+
+    const context: Record<string, unknown> = {};
+    if (businessName) context.businessName = businessName;
+    if (industry) context.industry = industry;
+    if (phone) context.phone = phone;
+    if (address) context.address = address;
+    if (services) context.services = services.split(',').map((s) => s.trim()).filter(Boolean);
+
+    try {
+      const res = await cmsApi<GenerationResultData>('/page-builder/generate', {
+        method: 'POST',
+        body: JSON.stringify({
+          prompt: prompt.trim(),
+          steps,
+          tone,
+          context: Object.keys(context).length > 0 ? context : undefined,
+        }),
+      });
+
+      if (res.error) {
+        setError(res.error);
+        setPhase('prompt');
+        return;
+      }
+
+      if (res.data) {
+        setResult(res.data);
+        setCompletedSteps(res.data.steps.map((s) => s.step));
+        setPhase('review');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Generation failed');
+      setPhase('prompt');
+    }
+  }, [prompt, tone, enabledSteps, businessName, industry, phone, address, services]);
+
+  const handleAccept = useCallback(() => {
+    if (result?.tree) {
+      onAccept(result.tree);
+      toast.success('AI-generated page applied');
+      handleClose();
+    }
+  }, [result, onAccept, handleClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50" onClick={handleClose} />
+      <div className="relative bg-card rounded-xl shadow-2xl border border-border w-full max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <div className="flex items-center gap-2.5">
+            <div className="p-1.5 rounded-lg bg-primary/10">
+              <Sparkles size={18} className="text-primary" />
+            </div>
+            <div>
+              <h2 className="text-base font-medium text-foreground">
+                AI Page Generator
+              </h2>
+              <p className="text-xs text-muted-foreground">
+                Describe your page and let AI build it
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={handleClose}
+            className="p-1.5 rounded-md hover:bg-muted transition-colors"
+            aria-label="Close"
+          >
+            <X size={16} className="text-muted-foreground" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-6">
+          {phase === 'prompt' && (
+            <div className="space-y-5">
+              {error && (
+                <div className="flex items-start gap-2.5 p-3 rounded-lg bg-destructive/5 border border-destructive/20">
+                  <AlertTriangle size={16} className="text-destructive shrink-0 mt-0.5" />
+                  <p className="text-sm text-destructive">{error}</p>
+                </div>
+              )}
+
+              {/* Prompt */}
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1.5">
+                  Describe your page
+                </label>
+                <textarea
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  placeholder="e.g. A landing page for a plumbing company with a hero section, service cards, testimonials, and a contact form"
+                  rows={4}
+                  className="w-full px-3 py-2.5 text-sm bg-background border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground placeholder:text-muted-foreground"
+                  autoFocus
+                />
+              </div>
+
+              {/* Tone */}
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1.5">
+                  Tone
+                </label>
+                <div className="flex flex-wrap gap-2">
+                  {TONES.map((t) => (
+                    <button
+                      key={t.value}
+                      onClick={() => setTone(t.value)}
+                      className={`px-3 py-1.5 text-xs rounded-full border transition-colors ${
+                        tone === t.value
+                          ? 'border-primary bg-primary/10 text-primary'
+                          : 'border-border bg-background text-muted-foreground hover:border-primary/40'
+                      }`}
+                    >
+                      {t.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Steps */}
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1.5">
+                  Generation steps
+                </label>
+                <div className="space-y-1.5">
+                  {ALL_STEPS.map((step) => (
+                    <label
+                      key={step.key}
+                      className={`flex items-center gap-3 p-2.5 rounded-lg border transition-colors cursor-pointer ${
+                        enabledSteps.has(step.key)
+                          ? 'border-primary/30 bg-primary/5'
+                          : 'border-border bg-background'
+                      } ${step.key === 'structure' ? 'opacity-70 cursor-not-allowed' : 'hover:border-primary/20'}`}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={enabledSteps.has(step.key)}
+                        onChange={() => toggleStep(step.key)}
+                        disabled={step.key === 'structure'}
+                        className="sr-only"
+                      />
+                      <div
+                        className={`w-5 h-5 rounded flex items-center justify-center shrink-0 ${
+                          enabledSteps.has(step.key)
+                            ? 'bg-primary text-white'
+                            : 'bg-muted border border-border'
+                        }`}
+                      >
+                        {enabledSteps.has(step.key) && <Check size={12} />}
+                      </div>
+                      <div className="flex items-center gap-2 flex-1 min-w-0">
+                        <span className="text-muted-foreground">{step.icon}</span>
+                        <div>
+                          <span className="text-sm text-foreground">{step.label}</span>
+                          <span className="text-xs text-muted-foreground ml-2">
+                            {step.description}
+                          </span>
+                        </div>
+                      </div>
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              {/* Business context (collapsible) */}
+              <div>
+                <button
+                  onClick={() => setShowContext(!showContext)}
+                  className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {showContext ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+                  Business context (optional)
+                </button>
+                {showContext && (
+                  <div className="mt-3 space-y-3 p-4 bg-muted/50 rounded-lg border border-border">
+                    <div className="grid grid-cols-2 gap-3">
+                      <div>
+                        <label className="block text-xs text-muted-foreground mb-1">Business name</label>
+                        <input
+                          type="text"
+                          value={businessName}
+                          onChange={(e) => setBusiness(e.target.value)}
+                          className="w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-xs text-muted-foreground mb-1">Industry</label>
+                        <input
+                          type="text"
+                          value={industry}
+                          onChange={(e) => setIndustry(e.target.value)}
+                          className="w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-xs text-muted-foreground mb-1">Phone</label>
+                        <input
+                          type="text"
+                          value={phone}
+                          onChange={(e) => setPhone(e.target.value)}
+                          className="w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-xs text-muted-foreground mb-1">Address</label>
+                        <input
+                          type="text"
+                          value={address}
+                          onChange={(e) => setAddress(e.target.value)}
+                          className="w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <label className="block text-xs text-muted-foreground mb-1">
+                        Services (comma-separated)
+                      </label>
+                      <input
+                        type="text"
+                        value={services}
+                        onChange={(e) => setServices(e.target.value)}
+                        placeholder="e.g. Web design, SEO, Content marketing"
+                        className="w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground placeholder:text-muted-foreground"
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {phase === 'generating' && (
+            <div className="py-8 space-y-6">
+              <div className="text-center">
+                <Loader2 size={32} className="animate-spin text-primary mx-auto mb-3" />
+                <p className="text-sm font-medium text-foreground">{stepMessage || 'Generating...'}</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  This may take 15-30 seconds
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                {ALL_STEPS.filter((s) => enabledSteps.has(s.key)).map((step) => {
+                  const isComplete = completedSteps.includes(step.key);
+                  const isCurrent = currentStep === step.key;
+
+                  return (
+                    <div
+                      key={step.key}
+                      className={`flex items-center gap-3 p-3 rounded-lg border transition-colors ${
+                        isComplete
+                          ? 'border-primary/30 bg-primary/5'
+                          : isCurrent
+                            ? 'border-primary/50 bg-primary/10'
+                            : 'border-border bg-muted/30'
+                      }`}
+                    >
+                      <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0">
+                        {isComplete ? (
+                          <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center">
+                            <Check size={12} className="text-white" />
+                          </div>
+                        ) : isCurrent ? (
+                          <Loader2 size={16} className="animate-spin text-primary" />
+                        ) : (
+                          <div className="w-6 h-6 rounded-full bg-muted border border-border" />
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground">{step.icon}</span>
+                        <span className={`text-sm ${isCurrent || isComplete ? 'text-foreground' : 'text-muted-foreground'}`}>
+                          {step.label}
+                        </span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {phase === 'review' && result && (
+            <div className="space-y-5">
+              {/* Summary */}
+              <div className="flex items-center gap-3 p-4 rounded-lg bg-primary/5 border border-primary/20">
+                <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
+                  <Sparkles size={18} className="text-primary" />
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-foreground">
+                    Page generated successfully
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {result.totalTokensUsed.toLocaleString()} tokens
+                    {' \u00B7 '}
+                    {(result.totalDurationMs / 1000).toFixed(1)}s
+                    {' \u00B7 '}
+                    {result.steps.length} step{result.steps.length !== 1 ? 's' : ''}
+                  </p>
+                </div>
+              </div>
+
+              {/* Step details */}
+              <div className="space-y-2">
+                <h3 className="text-sm font-medium text-foreground">Generation steps</h3>
+                {result.steps.map((step) => {
+                  const info = ALL_STEPS.find((s) => s.key === step.step);
+                  const isExpanded = expandedStep === step.step;
+
+                  return (
+                    <div key={step.step} className="rounded-lg border border-border overflow-hidden">
+                      <button
+                        onClick={() => setExpandedStep(isExpanded ? null : step.step)}
+                        className="w-full flex items-center gap-3 p-3 hover:bg-muted/50 transition-colors text-left"
+                      >
+                        <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center shrink-0">
+                          <Check size={12} className="text-white" />
+                        </div>
+                        <span className="text-muted-foreground">{info?.icon}</span>
+                        <span className="text-sm text-foreground flex-1">{info?.label}</span>
+                        <span className="text-xs text-muted-foreground">
+                          {(step.metadata.durationMs / 1000).toFixed(1)}s
+                        </span>
+                        {isExpanded ? (
+                          <ChevronUp size={14} className="text-muted-foreground" />
+                        ) : (
+                          <ChevronDown size={14} className="text-muted-foreground" />
+                        )}
+                      </button>
+                      {isExpanded && (
+                        <div className="px-3 pb-3 border-t border-border pt-2">
+                          <ul className="space-y-1">
+                            {step.metadata.changes.map((change, i) => (
+                              <li key={i} className="flex items-start gap-2 text-xs text-muted-foreground">
+                                <ArrowRight size={10} className="shrink-0 mt-0.5" />
+                                {change}
+                              </li>
+                            ))}
+                          </ul>
+                          <p className="text-xs text-muted-foreground mt-2">
+                            Tokens: {step.metadata.tokensUsed.toLocaleString()}
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+
+              <p className="text-xs text-muted-foreground">
+                Review the generated page in the canvas after accepting.
+                You can always undo to revert.
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-4 border-t border-border flex items-center justify-end gap-3">
+          {phase === 'prompt' && (
+            <>
+              <button
+                onClick={handleClose}
+                className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleGenerate}
+                disabled={!prompt.trim()}
+                className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <Sparkles size={14} />
+                Generate Page
+              </button>
+            </>
+          )}
+
+          {phase === 'generating' && (
+            <button
+              onClick={handleClose}
+              className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              Cancel
+            </button>
+          )}
+
+          {phase === 'review' && (
+            <>
+              <button
+                onClick={() => {
+                  setPhase('prompt');
+                  setResult(null);
+                }}
+                className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Regenerate
+              </button>
+              <button
+                onClick={handleAccept}
+                className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors"
+              >
+                <Check size={14} />
+                Accept &amp; Apply
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}