"use client"; import { Code, FileText, Lightbulb, Search, Sparkles, TrendingUp, 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 { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface SuggestedPrompt { id: string; title: string; prompt: string; category: string; icon?: React.ComponentType<{ className?: string }>; description?: string; isRecent?: boolean; isPopular?: boolean; usageCount?: number; } export interface AISuggestedPromptsProps { prompts?: SuggestedPrompt[]; categories?: string[]; onSelect?: (prompt: SuggestedPrompt) => void; onSearch?: (query: string) => void; className?: string; showSearch?: boolean; showCategories?: boolean; maxDisplay?: number; } const defaultCategories = [ "All", "Writing", "Code", "Analysis", "Creative", "Research", ]; const categoryIcons: Record< string, React.ComponentType<{ className?: string }> > = { Writing: FileText, Code, Analysis: TrendingUp, Creative: Sparkles, Research: Lightbulb, }; export default function AISuggestedPrompts({ prompts = [], categories = defaultCategories, onSelect, onSearch, className, showSearch = true, showCategories = true, maxDisplay, }: AISuggestedPromptsProps) { const [searchQuery, setSearchQuery] = useState(""); const [selectedCategory, setSelectedCategory] = useState("All"); const filteredPrompts = useMemo(() => { let filtered = prompts; if (selectedCategory !== "All") { filtered = filtered.filter((p) => p.category === selectedCategory); } if (searchQuery.trim()) { const query = searchQuery.toLowerCase(); filtered = filtered.filter( (p) => p.title.toLowerCase().includes(query) || p.prompt.toLowerCase().includes(query) || p.description?.toLowerCase().includes(query) ); } const sorted = [...filtered].sort((a, b) => { if (a.isPopular && !b.isPopular) return -1; if (!a.isPopular && b.isPopular) return 1; if (a.isRecent && !b.isRecent) return -1; if (!a.isRecent && b.isRecent) return 1; return 0; }); return maxDisplay ? sorted.slice(0, maxDisplay) : sorted; }, [prompts, selectedCategory, searchQuery, maxDisplay]); const handleSelect = (prompt: SuggestedPrompt) => { onSelect?.(prompt); }; const handleSearchChange = (value: string) => { setSearchQuery(value); onSearch?.(value); }; if (prompts.length === 0) { return (

Suggested Prompts Get started with these helpful prompts

No prompts available

); } return (

Suggested Prompts Get started with these helpful prompts

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

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

)}

{filteredPrompts.length === 0 ? (

No prompts match your search

) : (

{filteredPrompts.map((prompt, idx) => { const Icon = prompt.icon || categoryIcons[prompt.category] || Lightbulb; return ( ); })}

)} ); }

{prompt.title}

Write a blog post

Summarize this article

Explain code

Example Usage