"use client"; import { Code, FileText, Lightbulb, Search, Sparkles, TrendingUp, } from "lucide-react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Separator } from "@/registry/new-york/ui/separator"; 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; isLoading?: boolean; } 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, }; interface ComponentHeaderProps { title: string; description: string; } function ComponentHeader({ title, description }: ComponentHeaderProps) { return (

{title} {description}

); } interface PromptSearchProps { value: string; onChange: (value: string) => void; placeholder?: string; resultCount?: number; } function PromptSearch({ value, onChange, placeholder = "Search prompts…", resultCount, }: PromptSearchProps) { const inputRef = useRef(null); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ( (e.metaKey || e.ctrlKey) && e.key === "k" && !e.shiftKey && document.activeElement !== inputRef.current ) { e.preventDefault(); inputRef.current?.focus(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); const handleClear = useCallback(() => { onChange(""); inputRef.current?.focus(); }, [onChange]); return (

onChange(e.target.value)} onKeyDown={(e) => { if (e.key === "Escape") { handleClear(); } }} placeholder={placeholder} ref={inputRef} type="search" value={value} /> {resultCount !== undefined && value && (

{resultCount} result{resultCount !== 1 ? "s" : ""} found

)}

); } interface CategoryFilterProps { categories: string[]; selectedCategory: string; onSelect: (category: string) => void; } function CategoryFilter({ categories, selectedCategory, onSelect, }: CategoryFilterProps) { return (

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

); } interface EmptyStateProps { type: "no-prompts" | "no-results"; searchQuery?: string; } function EmptyState({ type, searchQuery }: EmptyStateProps) { if (type === "no-prompts") { return (

No prompts available

Prompts will appear here when they become available

); } return (

No prompts match your search

Try adjusting your search terms or browse different categories

{searchQuery && (

Searched for: "{searchQuery}"

)}

); } interface PromptItemProps { prompt: SuggestedPrompt; isFocused: boolean; index: number; onSelect: (prompt: SuggestedPrompt) => void; itemRef: (node: HTMLButtonElement | null) => void; } function PromptItem({ prompt, isFocused, index, onSelect, itemRef, }: PromptItemProps) { const Icon = prompt.icon || categoryIcons[prompt.category] || Lightbulb; const handleSelect = useCallback(() => { onSelect(prompt); }, [onSelect, prompt]); return ( ); } interface PromptListProps { prompts: SuggestedPrompt[]; focusedIndex: number | null; onSelect: (prompt: SuggestedPrompt) => void; setFocusedIndex: (index: number | null) => void; } function PromptList({ prompts, focusedIndex, onSelect, setFocusedIndex, }: PromptListProps) { const itemRefs = useRef<(HTMLButtonElement | null)[]>([]); const containerRef = useRef(null); const setItemRef = useCallback( (index: number) => (node: HTMLButtonElement | null) => { itemRefs.current[index] = node; }, [] ); useEffect(() => { if (focusedIndex !== null && itemRefs.current[focusedIndex]) { itemRefs.current[focusedIndex]?.scrollIntoView({ block: "nearest", behavior: "smooth", }); } }, [focusedIndex]); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { const target = e.target as HTMLElement; if ( target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLButtonElement ) { if (target.type === "button" && target.closest('[role="tablist"]')) { return; } if (target.type === "search" || target.type === "text") { return; } } if (prompts.length === 0) return; switch (e.key) { case "ArrowDown": { e.preventDefault(); const nextIndex = focusedIndex === null ? 0 : focusedIndex < prompts.length - 1 ? focusedIndex + 1 : 0; setFocusedIndex(nextIndex); itemRefs.current[nextIndex]?.focus(); break; } case "ArrowUp": { e.preventDefault(); const prevIndex = focusedIndex === null ? prompts.length - 1 : focusedIndex > 0 ? focusedIndex - 1 : prompts.length - 1; setFocusedIndex(prevIndex); itemRefs.current[prevIndex]?.focus(); break; } case "Home": { e.preventDefault(); setFocusedIndex(0); itemRefs.current[0]?.focus(); break; } case "End": { e.preventDefault(); const lastIndex = prompts.length - 1; setFocusedIndex(lastIndex); itemRefs.current[lastIndex]?.focus(); break; } case "Escape": { if (focusedIndex !== null) { e.preventDefault(); setFocusedIndex(null); containerRef.current?.focus(); } break; } case "Enter": { if (focusedIndex !== null && itemRefs.current[focusedIndex]) { e.preventDefault(); onSelect(prompts[focusedIndex]); } break; } } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [prompts, focusedIndex, setFocusedIndex, onSelect]); return (

{prompts.map((prompt, index) => ( ))}

); } export default function AISuggestedPrompts({ prompts = [], categories = defaultCategories, onSelect, onSearch, className, showSearch = true, showCategories = true, maxDisplay, isLoading = false, }: AISuggestedPromptsProps) { const [searchQuery, setSearchQuery] = useState(""); const [selectedCategory, setSelectedCategory] = useState("All"); const [focusedIndex, setFocusedIndex] = useState(null); 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 = useCallback( (prompt: SuggestedPrompt) => { onSelect?.(prompt); setFocusedIndex(null); }, [onSelect] ); const handleSearchChange = useCallback( (value: string) => { setSearchQuery(value); onSearch?.(value); setFocusedIndex(null); }, [onSearch] ); const handleCategoryChange = useCallback((category: string) => { setSelectedCategory(category); setFocusedIndex(null); }, []); if (prompts.length === 0 && !isLoading) { return ( ); } return (

{showSearch && ( )} {showCategories && ( )}

{isLoading ? (

Loading prompts…

) : filteredPrompts.length === 0 ? ( ) : ( )} ); }

{prompt.title}

Write a blog post

Summarize this article

Explain code

Example Usage

Write a blog post

Summarize this article

Explain code