AI Suggested Prompts

1"use client";
2 
3import {
4  Code,
5  FileText,
6  Lightbulb,
7  Search,
8  Sparkles,
9  TrendingUp,
10} from "lucide-react";
11import { useCallback, useEffect, useMemo, useRef, useState } from "react";
12import { cn } from "@/lib/utils";
13import { Badge } from "@/registry/new-york/ui/badge";
14import { Button } from "@/registry/new-york/ui/button";
15import {
16  Card,
17  CardContent,
18  CardDescription,
19  CardHeader,
20  CardTitle,
21} from "@/registry/new-york/ui/card";
22import {
23  InputGroup,
24  InputGroupAddon,
25  InputGroupInput,
26} from "@/registry/new-york/ui/input-group";
27import { Separator } from "@/registry/new-york/ui/separator";
28 
29export interface SuggestedPrompt {
30  id: string;
31  title: string;
32  prompt: string;
33  category: string;
34  icon?: React.ComponentType<{ className?: string }>;
35  description?: string;
36  isRecent?: boolean;
37  isPopular?: boolean;
38  usageCount?: number;
39}
40 
41export interface AISuggestedPromptsProps {
42  prompts?: SuggestedPrompt[];
43  categories?: string[];
44  onSelect?: (prompt: SuggestedPrompt) => void;
45  onSearch?: (query: string) => void;
46  className?: string;
47  showSearch?: boolean;
48  showCategories?: boolean;
49  maxDisplay?: number;
50  isLoading?: boolean;
51}
52 
53const defaultCategories = [
54  "All",
55  "Writing",
56  "Code",
57  "Analysis",
58  "Creative",
59  "Research",
60];
61 
62const categoryIcons: Record<
63  string,
64  React.ComponentType<{ className?: string }>
65> = {
66  Writing: FileText,
67  Code,
68  Analysis: TrendingUp,
69  Creative: Sparkles,
70  Research: Lightbulb,
71};
72 
73interface ComponentHeaderProps {
74  title: string;
75  description: string;
76}
77 
78function ComponentHeader({ title, description }: ComponentHeaderProps) {
79  return (
80    <div className="flex flex-col gap-1">
81      <CardTitle>{title}</CardTitle>
82      <CardDescription>{description}</CardDescription>
83    </div>
84  );
85}
86 
87interface PromptSearchProps {
88  value: string;
89  onChange: (value: string) => void;
90  placeholder?: string;
91  resultCount?: number;
92}
93 
94function PromptSearch({
95  value,
96  onChange,
97  placeholder = "Search prompts…",
98  resultCount,
99}: PromptSearchProps) {
100  const inputRef = useRef<HTMLInputElement>(null);
101 
102  useEffect(() => {
103    const handleKeyDown = (e: KeyboardEvent) => {
104      if (
105        (e.metaKey || e.ctrlKey) &&
106        e.key === "k" &&
107        !e.shiftKey &&
108        document.activeElement !== inputRef.current
109      ) {
110        e.preventDefault();
111        inputRef.current?.focus();
112      }
113    };
114 
115    window.addEventListener("keydown", handleKeyDown);
116// … truncated