@actuate-media/cms-admin 0.8.0 → 0.8.2

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

@@ -1,6 +1,6 @@
-'use client';
+'use client'
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react'
 import {
   Sparkles,
   X,
@@ -14,22 +14,22 @@ import {
   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';
+} 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;
+  open: boolean
+  onClose: () => void
+  onAccept: (tree: PageNode) => void
 }
 
 interface StepInfo {
-  key: GenerationStep;
-  label: string;
-  icon: React.ReactNode;
-  description: string;
+  key: GenerationStep
+  label: string
+  icon: React.ReactNode
+  description: string
 }
 
 const ALL_STEPS: StepInfo[] = [
@@ -57,9 +57,9 @@ const ALL_STEPS: StepInfo[] = [
     icon: <Accessibility size={14} />,
     description: 'Fix heading hierarchy, alt text, and ARIA',
   },
-];
+]
 
-type Tone = 'professional' | 'casual' | 'friendly' | 'technical' | 'luxury';
+type Tone = 'professional' | 'casual' | 'friendly' | 'technical' | 'luxury'
 
 const TONES: { value: Tone; label: string }[] = [
   { value: 'professional', label: 'Professional' },
@@ -67,103 +67,107 @@ const TONES: { value: Tone; label: string }[] = [
   { value: 'friendly', label: 'Friendly' },
   { value: 'technical', label: 'Technical' },
   { value: 'luxury', label: 'Luxury' },
-];
+]
 
-type Phase = 'prompt' | 'generating' | 'review';
+type Phase = 'prompt' | 'generating' | 'review'
 
 interface GenerationStepResult {
-  step: string;
+  step: string
   metadata: {
-    tokensUsed: number;
-    durationMs: number;
-    changes: string[];
-  };
+    tokensUsed: number
+    durationMs: number
+    changes: string[]
+  }
 }
 
 interface GenerationResultData {
-  tree: PageNode;
-  steps: GenerationStepResult[];
-  totalTokensUsed: number;
-  totalDurationMs: number;
+  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 [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 [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;
+    const next = new Set(enabledSteps)
+    if (step === 'structure') return
     if (next.has(step)) {
-      next.delete(step);
+      next.delete(step)
     } else {
-      next.add(step);
+      next.add(step)
     }
-    setEnabledSteps(next);
-  };
+    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);
-  }, []);
+    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]);
+    resetState()
+    onClose()
+  }, [resetState, onClose])
 
   const handleGenerate = useCallback(async () => {
     if (!prompt.trim()) {
-      toast.error('Please describe the page you want to create');
-      return;
+      toast.error('Please describe the page you want to create')
+      return
     }
 
-    setPhase('generating');
-    setError(null);
+    setPhase('generating')
+    setError(null)
 
-    const steps = ALL_STEPS.filter((s) => enabledSteps.has(s.key)).map((s) => s.key);
+    const steps = ALL_STEPS.filter((s) => enabledSteps.has(s.key)).map((s) => s.key)
 
-    setCurrentStep(steps[0]!);
-    setStepMessage('Starting generation...');
+    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);
+    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', {
@@ -174,34 +178,34 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
           tone,
           context: Object.keys(context).length > 0 ? context : undefined,
         }),
-      });
+      })
 
       if (res.error) {
-        setError(res.error);
-        setPhase('prompt');
-        return;
+        setError(res.error)
+        setPhase('prompt')
+        return
       }
 
       if (res.data) {
-        setResult(res.data);
-        setCompletedSteps(res.data.steps.map((s) => s.step));
-        setPhase('review');
+        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');
+      setError(err instanceof Error ? err.message : 'Generation failed')
+      setPhase('prompt')
     }
-  }, [prompt, tone, enabledSteps, businessName, industry, phone, address, services]);
+  }, [prompt, tone, enabledSteps, businessName, industry, phone, address, services])
 
   const handleAccept = useCallback(() => {
     if (result?.tree) {
-      onAccept(result.tree);
-      toast.success('AI-generated page applied');
-      handleClose();
+      onAccept(result.tree)
+      toast.success('AI-generated page applied')
+      handleClose()
     }
-  }, [result, onAccept, handleClose]);
+  }, [result, onAccept, handleClose])
 
-  if (!open) return null;
+  if (!open) return null
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
@@ -214,9 +218,7 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
               <Sparkles size={18} className="text-primary" />
             </div>
             <div>
-              <h2 className="text-base font-medium text-foreground">
-                AI Page Generator
-              </h2>
+              <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>
@@ -259,9 +261,7 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
 
               {/* Tone */}
               <div>
-                <label className="block text-sm font-medium text-foreground mb-1.5">
-                  Tone
-                </label>
+                <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
@@ -337,7 +337,9 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                   <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>
+                        <label className="block text-xs text-muted-foreground mb-1">
+                          Business name
+                        </label>
                         <input
                           type="text"
                           value={businessName}
@@ -395,16 +397,16 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
             <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 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;
+                  const isComplete = completedSteps.includes(step.key)
+                  const isCurrent = currentStep === step.key
 
                   return (
                     <div
@@ -430,12 +432,14 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                       </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'}`}>
+                        <span
+                          className={`text-sm ${isCurrent || isComplete ? 'text-foreground' : 'text-muted-foreground'}`}
+                        >
                           {step.label}
                         </span>
                       </div>
                     </div>
-                  );
+                  )
                 })}
               </div>
             </div>
@@ -449,14 +453,11 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                   <Sparkles size={18} className="text-primary" />
                 </div>
                 <div>
-                  <p className="text-sm font-medium text-foreground">
-                    Page generated successfully
-                  </p>
+                  <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.totalDurationMs / 1000).toFixed(1)}s{' \u00B7 '}
                     {result.steps.length} step{result.steps.length !== 1 ? 's' : ''}
                   </p>
                 </div>
@@ -466,11 +467,14 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
               <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;
+                  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">
+                    <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"
@@ -493,7 +497,10 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                         <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">
+                              <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>
@@ -505,13 +512,13 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                         </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.
+                Review the generated page in the canvas after accepting. You can always undo to
+                revert.
               </p>
             </div>
           )}
@@ -551,8 +558,8 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
             <>
               <button
                 onClick={() => {
-                  setPhase('prompt');
-                  setResult(null);
+                  setPhase('prompt')
+                  setResult(null)
                 }}
                 className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
               >
@@ -570,5 +577,5 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
         </div>
       </div>
     </div>
-  );
+  )
 }