"use client"; import { BookOpen, Eye, Heart, Loader2, Plus, Search, Sparkles, X, } from "lucide-react"; import { useMemo, useState } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { Field, FieldContent, FieldLabel } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface PromptTemplate { id: string; name: string; description: string; category: string; prompt: string; variables?: Array<{ name: string; label: string; placeholder?: string; required?: boolean; }>; isFavorite?: boolean; isPopular?: boolean; usageCount?: number; author?: string; tags?: string[]; icon?: React.ComponentType<{ className?: string }>; } export interface AIPromptTemplatesProps { templates?: PromptTemplate[]; categories?: string[]; onSelect?: ( template: PromptTemplate, filledVariables?: Record ) => void; onFavorite?: (templateId: string, isFavorite: boolean) => Promise; onCreate?: () => void; className?: string; showSearch?: boolean; showCategories?: boolean; showFavorites?: boolean; } const defaultCategories = [ "All", "Writing", "Code", "Analysis", "Creative", "Research", "Business", ]; const categoryIcons: Record< string, React.ComponentType<{ className?: string }> > = { Writing: BookOpen, Code: Sparkles, Analysis: Sparkles, Creative: Sparkles, Research: BookOpen, Business: Sparkles, }; function fillTemplatePrompt( prompt: string, variables: Record ): string { let filled = prompt; Object.entries(variables).forEach(([key, value]) => { filled = filled.replace(new RegExp(`\\{${key}\\}`, "g"), value); }); return filled; } export default function AIPromptTemplates({ templates = [], categories = defaultCategories, onSelect, onFavorite, onCreate, className, showSearch = true, showCategories = true, showFavorites = true, }: AIPromptTemplatesProps) { const [searchQuery, setSearchQuery] = useState(""); const [selectedCategory, setSelectedCategory] = useState("All"); const [showFavoritesOnly, setShowFavoritesOnly] = useState(false); const [selectedTemplate, setSelectedTemplate] = useState(null); const [templateVariables, setTemplateVariables] = useState< Record >({}); const [isFavoriting, setIsFavoriting] = useState(null); const [showPreview, setShowPreview] = useState(false); const filteredTemplates = useMemo(() => { let filtered = templates; if (showFavoritesOnly) { filtered = filtered.filter((t) => t.isFavorite); } if (selectedCategory !== "All") { filtered = filtered.filter((t) => t.category === selectedCategory); } if (searchQuery.trim()) { const query = searchQuery.toLowerCase(); filtered = filtered.filter( (t) => t.name.toLowerCase().includes(query) || t.description.toLowerCase().includes(query) || t.prompt.toLowerCase().includes(query) || t.tags?.some((tag) => tag.toLowerCase().includes(query)) ); } return filtered.sort((a, b) => { if (a.isPopular && !b.isPopular) return -1; if (!a.isPopular && b.isPopular) return 1; if (a.isFavorite && !b.isFavorite) return -1; if (!a.isFavorite && b.isFavorite) return 1; return (b.usageCount || 0) - (a.usageCount || 0); }); }, [templates, selectedCategory, searchQuery, showFavoritesOnly]); const handleSelect = (template: PromptTemplate) => { if (template.variables && template.variables.length > 0) { setSelectedTemplate(template); setTemplateVariables({}); } else { onSelect?.(template); } }; const handleUseTemplate = () => { if (!selectedTemplate) return; const variables = templateVariables; onSelect?.(selectedTemplate, variables); setSelectedTemplate(null); setTemplateVariables({}); setShowPreview(false); }; const handleFavorite = async ( templateId: string, currentFavorite: boolean | undefined, e: React.MouseEvent ) => { e.stopPropagation(); if (!onFavorite) return; setIsFavoriting(templateId); try { await onFavorite(templateId, !(currentFavorite ?? false)); } finally { setIsFavoriting(null); } }; const previewPrompt = selectedTemplate ? fillTemplatePrompt(selectedTemplate.prompt, templateVariables) : ""; const canUseTemplate = !selectedTemplate?.variables || selectedTemplate.variables.every( (v) => !v.required || templateVariables[v.name] ); if (templates.length === 0) { return (

Prompt Templates Browse and use pre-built prompt templates

{onCreate && ( )}

No templates available

); } return ( <>

Prompt Templates Browse and use pre-built prompt templates

{onCreate && ( )}

{showSearch && ( setSearchQuery(e.target.value)} placeholder="Search templates…" type="search" value={searchQuery} /> {searchQuery && ( )} )} {showCategories && (

{showFavorites && ( )} {categories.map((category) => { const Icon = categoryIcons[category] || Sparkles; return ( ); })}

)}

{filteredTemplates.length === 0 ? (

No templates match your filters

) : (

{filteredTemplates.map((template) => { const Icon = template.icon || categoryIcons[template.category] || Sparkles; const hasVariables = template.variables && template.variables.length > 0; return (

{template.name}

{template.isPopular && ( Popular )} {onFavorite && ( )}

{template.description}

{template.tags && template.tags.length > 0 && ( <> {template.tags.slice(0, 2).map((tag) => ( {tag} ))} {template.tags.length > 2 && ( +{template.tags.length - 2} )} )} {template.usageCount !== undefined && ( {template.usageCount} uses )} {hasVariables && ( {template.variables!.length} variable {template.variables!.length !== 1 ? "s" : ""} )}

); })}

)} ); }

Blog Post Writer

Code Reviewer

Example Usage