AI Prompt Templates

1"use client";
2 
3import {
4  BookOpen,
5  Eye,
6  Heart,
7  Loader2,
8  Plus,
9  Search,
10  Sparkles,
11} from "lucide-react";
12import { useCallback, useEffect, useMemo, useRef, useState } from "react";
13import { cn } from "@/lib/utils";
14import { Badge } from "@/registry/new-york/ui/badge";
15import { Button } from "@/registry/new-york/ui/button";
16import {
17  Card,
18  CardContent,
19  CardDescription,
20  CardHeader,
21  CardTitle,
22} from "@/registry/new-york/ui/card";
23import {
24  Dialog,
25  DialogContent,
26  DialogDescription,
27  DialogFooter,
28  DialogHeader,
29  DialogTitle,
30} from "@/registry/new-york/ui/dialog";
31import { Field, FieldContent, FieldLabel } from "@/registry/new-york/ui/field";
32import {
33  InputGroup,
34  InputGroupAddon,
35  InputGroupInput,
36} from "@/registry/new-york/ui/input-group";
37import { Separator } from "@/registry/new-york/ui/separator";
38 
39export interface PromptTemplate {
40  id: string;
41  name: string;
42  description: string;
43  category: string;
44  prompt: string;
45  variables?: Array<{
46    name: string;
47    label: string;
48    placeholder?: string;
49    required?: boolean;
50  }>;
51  isFavorite?: boolean;
52  isPopular?: boolean;
53  usageCount?: number;
54  author?: string;
55  tags?: string[];
56  icon?: React.ComponentType<{ className?: string }>;
57}
58 
59export interface AIPromptTemplatesProps {
60  templates?: PromptTemplate[];
61  categories?: string[];
62  onSelect?: (
63    template: PromptTemplate,
64    filledVariables?: Record<string, string>
65  ) => void;
66  onFavorite?: (templateId: string, isFavorite: boolean) => Promise<void>;
67  onCreate?: () => void;
68  className?: string;
69  showSearch?: boolean;
70  showCategories?: boolean;
71  showFavorites?: boolean;
72}
73 
74const defaultCategories = [
75  "All",
76  "Writing",
77  "Code",
78  "Analysis",
79  "Creative",
80  "Research",
81  "Business",
82];
83 
84const categoryIcons: Record<
85  string,
86  React.ComponentType<{ className?: string }>
87> = {
88  Writing: BookOpen,
89  Code: Sparkles,
90  Analysis: Sparkles,
91  Creative: Sparkles,
92  Research: BookOpen,
93  Business: Sparkles,
94};
95 
96function fillTemplatePrompt(
97  prompt: string,
98  variables: Record<string, string>
99): string {
100  let filled = prompt;
101  Object.entries(variables).forEach(([key, value]) => {
102    filled = filled.replace(new RegExp(`\\{${key}\\}`, "g"), value);
103  });
104  return filled;
105}
106 
107interface TemplateHeaderProps {
108  onCreate?: () => void;
109}
110 
111function TemplateHeader({ onCreate }: TemplateHeaderProps) {
112  return (
113    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
114// … truncated