import { useState, useEffect, useRef } from 'react'; import { Button } from '@/components/ui/button'; import { Skeleton } from '@/components/ui/skeleton'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Tooltip, TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip'; import { Popover, PopoverContent, PopoverTrigger, } from '@/components/ui/popover'; import { ArrowRight, ArrowLeft, LayoutTemplate, Palette, Paintbrush, Database, Github, Globe, Blocks, SlidersHorizontal } from 'lucide-react'; import { useTranslation } from '@/contexts/LanguageContext'; import type { DesignSystemOption } from '@/types/design'; import type { SupabaseConnectionOption, GithubConnectionOption } from '@/types'; interface Template { id: number; name: string; description: string | null; thumbnail: string | null; is_system: boolean; output_target?: 'website' | 'wordpress_theme'; } type OutputTarget = 'website' | 'wordpress_theme'; interface PromptInputProps { onSubmit: ( prompt: string, templateId: number | null, designSystemId: number | null, designAccent: string | null, supabaseConnectionId: number | null, githubConnectionId: number | null, outputTarget: OutputTarget, ) => void; disabled?: boolean; suggestions?: string[]; typingPrompts?: string[]; isLoadingSuggestions?: boolean; templates?: Template[]; designSystems?: DesignSystemOption[]; supabaseConnections?: SupabaseConnectionOption[]; githubConnections?: GithubConnectionOption[]; wordpressEnabled?: boolean; /** Pre-fills the textarea (e.g. a prompt carried over from the landing page). */ initialPrompt?: string; } const DEFAULT_SUGGESTIONS = [ 'Build a task management app', 'Create a portfolio website', 'Design a landing page', 'Make an e-commerce store', ]; const DEFAULT_TYPING_PROMPTS = [ 'Build me a modern portfolio website with dark mode...', 'Create a task management app with drag and drop...', 'Design a landing page for my SaaS startup...', 'Make an e-commerce store with cart functionality...', 'Build a blog platform with markdown support...', 'Create a dashboard for tracking analytics...', 'Design a booking system for appointments...', 'Build a social media feed with infinite scroll...', ]; function useTypingAnimation(texts: string[], typingSpeed = 50, pauseDuration = 2000, deletingSpeed = 30) { const [displayText, setDisplayText] = useState(''); const [textIndex, setTextIndex] = useState(0); const [isTyping, setIsTyping] = useState(true); const [isPaused, setIsPaused] = useState(false); useEffect(() => { const currentText = texts[textIndex]; if (isPaused) { const pauseTimer = setTimeout(() => { setIsPaused(false); setIsTyping(false); }, pauseDuration); return () => clearTimeout(pauseTimer); } if (isTyping) { if (displayText.length < currentText.length) { const typingTimer = setTimeout(() => { setDisplayText(currentText.slice(0, displayText.length + 1)); }, typingSpeed); return () => clearTimeout(typingTimer); } else { // eslint-disable-next-line react-hooks/set-state-in-effect -- animation state machine transition setIsPaused(true); } } else { if (displayText.length > 0) { const deletingTimer = setTimeout(() => { setDisplayText(displayText.slice(0, -1)); }, deletingSpeed); return () => clearTimeout(deletingTimer); } else { setTextIndex((prev) => (prev + 1) % texts.length); setIsTyping(true); } } }, [displayText, isTyping, isPaused, textIndex, texts, typingSpeed, pauseDuration, deletingSpeed]); return displayText; } export function PromptInput({ onSubmit, disabled = false, suggestions = DEFAULT_SUGGESTIONS, typingPrompts = DEFAULT_TYPING_PROMPTS, isLoadingSuggestions = false, templates = [], designSystems = [], supabaseConnections = [], githubConnections = [], wordpressEnabled = false, initialPrompt = '', }: PromptInputProps) { const { t, isRtl } = useTranslation(); const [prompt, setPrompt] = useState(initialPrompt); const [isFocused, setIsFocused] = useState(false); const [selectedTemplateId, setSelectedTemplateId] = useState(null); // null = Automatic (the AI picks a design system at first build). const [selectedDesignSystemId, setSelectedDesignSystemId] = useState(null); const [selectedAccent, setSelectedAccent] = useState(null); // null = No database attached. const [selectedConnectionId, setSelectedConnectionId] = useState(null); // null = No GitHub repo (the AI builds without pushing to a repo). const [selectedGithubConnectionId, setSelectedGithubConnectionId] = useState(null); // The generation output target. 'website' (default) or 'wordpress_theme'. const [outputTarget, setOutputTarget] = useState('website'); const textareaRef = useRef(null); const animatedPlaceholder = useTypingAnimation(typingPrompts); // Filter out system templates (only for AI to decide), and scope to the // selected output target's family (website templates vs WordPress themes). const userSelectableTemplates = templates.filter( (t) => !t.is_system && (t.output_target ?? 'website') === outputTarget, ); const handleSelectOutputTarget = (next: OutputTarget) => { if (next === outputTarget) return; setOutputTarget(next); // A template id from one family is invalid for the other — reset to Automatic. setSelectedTemplateId(null); // Entering WordPress mode: drop the Database selection (no Webby-managed // DB for themes) and the GitHub selection (avoid carrying a stale link). // GitHub remains valid in website mode, so don't clear it on the way back. if (next === 'wordpress_theme') { setSelectedConnectionId(null); setSelectedGithubConnectionId(null); } }; const selectedDesignSystem = designSystems.find((d) => d.id === selectedDesignSystemId) ?? null; const handleSelectDesignSystem = (value: string) => { if (value === 'automatic') { setSelectedDesignSystemId(null); setSelectedAccent(null); return; } const id = parseInt(value); setSelectedDesignSystemId(id); // Drop a chosen accent if the new system doesn't offer it. const system = designSystems.find((d) => d.id === id); if (selectedAccent && system && !system.accents.includes(selectedAccent)) { setSelectedAccent(null); } }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (prompt.trim() && !disabled) { onSubmit(prompt.trim(), selectedTemplateId, selectedDesignSystemId, selectedAccent, selectedConnectionId, selectedGithubConnectionId, outputTarget); setPrompt(''); } }; const handleKeyDown = (e: React.KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { handleSubmit(e); } }; const showAnimatedPlaceholder = !prompt && !isFocused; return (