351 lines
16 KiB
TypeScript
351 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { useStore } from '@/lib/store';
|
|
import { Copy, Sparkles, RefreshCw, Loader2, Image as ImageIcon } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { Prompt, PromptCache } from '@/lib/types';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
|
|
export function PromptLibrary({ onSelect }: { onSelect?: (prompt: string) => void }) {
|
|
const { setPrompt, settings } = useStore();
|
|
const [prompts, setPrompts] = useState<Prompt[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [generating, setGenerating] = useState(false);
|
|
const [selectedCategory, setSelectedCategory] = useState<string>('All');
|
|
const [selectedSource, setSelectedSource] = useState<string>('All');
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [sortMode, setSortMode] = useState<'all' | 'latest' | 'history' | 'foryou'>('all');
|
|
|
|
const fetchPrompts = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch('/api/prompts');
|
|
if (res.ok) {
|
|
const data: PromptCache = await res.json();
|
|
setPrompts(data.prompts);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch prompts", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const syncPrompts = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const syncRes = await fetch('/api/prompts/sync', { method: 'POST' });
|
|
if (!syncRes.ok) throw new Error('Sync failed');
|
|
await fetchPrompts();
|
|
} catch (error) {
|
|
console.error("Failed to sync prompts", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const generateMissingPreviews = async () => {
|
|
if (!settings.whiskCookies) {
|
|
alert("Please set Whisk Cookies in Settings first!");
|
|
return;
|
|
}
|
|
|
|
setGenerating(true);
|
|
try {
|
|
// Find prompts without images
|
|
const missing = prompts.filter(p => !p.images || p.images.length === 0);
|
|
console.log(`Found ${missing.length} prompts without images.`);
|
|
|
|
for (const prompt of missing) {
|
|
try {
|
|
console.log(`Requesting preview for: ${prompt.title}`);
|
|
|
|
const res = await fetch('/api/prompts/generate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
id: prompt.id,
|
|
prompt: prompt.prompt,
|
|
cookies: settings.whiskCookies
|
|
})
|
|
});
|
|
|
|
if (res.ok) {
|
|
const { url } = await res.json();
|
|
setPrompts(prev => prev.map(p =>
|
|
p.id === prompt.id ? { ...p, images: [url, ...(p.images || [])] } : p
|
|
));
|
|
} else {
|
|
const err = await res.json();
|
|
if (res.status === 422) {
|
|
console.warn(`Skipped unsafe prompt "${prompt.title}": ${err.error}`);
|
|
} else {
|
|
console.error('API Error:', err);
|
|
}
|
|
}
|
|
|
|
// Delay is still good to prevent flooding backend/google
|
|
await new Promise(r => setTimeout(r, 2000));
|
|
|
|
} catch (error) {
|
|
console.error(`Failed to generate for ${prompt.id}:`, error);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error("Generation process failed:", e);
|
|
} finally {
|
|
setGenerating(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchPrompts();
|
|
}, []);
|
|
|
|
const handleSelect = async (p: Prompt) => {
|
|
setPrompt(p.prompt);
|
|
if (onSelect) onSelect(p.prompt);
|
|
|
|
// Track usage
|
|
try {
|
|
await fetch('/api/prompts/use', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id: p.id })
|
|
});
|
|
// Optimistic update
|
|
setPrompts(prev => prev.map(item =>
|
|
item.id === p.id
|
|
? { ...item, useCount: (item.useCount || 0) + 1, lastUsedAt: Date.now() }
|
|
: item
|
|
));
|
|
} catch (e) {
|
|
console.error("Failed to track usage", e);
|
|
}
|
|
};
|
|
|
|
// Derived State
|
|
const filteredPrompts = prompts.filter(p => {
|
|
const matchesSearch = p.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
p.prompt.toLowerCase().includes(searchTerm.toLowerCase());
|
|
const matchesCategory = selectedCategory === 'All' || p.category === selectedCategory;
|
|
const matchesSource = selectedSource === 'All' || p.source === selectedSource;
|
|
return matchesSearch && matchesCategory && matchesSource;
|
|
}).sort((a, b) => {
|
|
if (sortMode === 'latest') {
|
|
return (b.createdAt || 0) - (a.createdAt || 0);
|
|
}
|
|
if (sortMode === 'history') {
|
|
return (b.lastUsedAt || 0) - (a.lastUsedAt || 0);
|
|
}
|
|
return 0; // Default order (or ID)
|
|
});
|
|
|
|
const displayPrompts = () => {
|
|
if (sortMode === 'history') {
|
|
return filteredPrompts.filter(p => (p.useCount || 0) > 0);
|
|
}
|
|
if (sortMode === 'foryou') {
|
|
// Calculate top categories
|
|
const categoryCounts: Record<string, number> = {};
|
|
prompts.filter(p => (p.useCount || 0) > 0).forEach(p => {
|
|
categoryCounts[p.category] = (categoryCounts[p.category] || 0) + 1;
|
|
});
|
|
const topCategories = Object.entries(categoryCounts)
|
|
.sort(([, a], [, b]) => b - a)
|
|
.slice(0, 3)
|
|
.map(([cat]) => cat);
|
|
|
|
if (topCategories.length === 0) return filteredPrompts; // No history yet
|
|
|
|
return filteredPrompts.filter(p => topCategories.includes(p.category));
|
|
}
|
|
return filteredPrompts;
|
|
};
|
|
|
|
const finalPrompts = displayPrompts();
|
|
|
|
const uniqueCategories = ['All', ...Array.from(new Set(prompts.map(p => p.category)))].filter(Boolean);
|
|
const uniqueSources = ['All', ...Array.from(new Set(prompts.map(p => p.source)))].filter(Boolean);
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto p-4 md:p-8 space-y-8 pb-32">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-primary/10 rounded-xl text-primary">
|
|
<Sparkles className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold">Prompt Library</h2>
|
|
<p className="text-muted-foreground">Curated inspiration from the community.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={generateMissingPreviews}
|
|
disabled={generating}
|
|
className={cn(
|
|
"p-2 hover:bg-secondary rounded-full transition-colors",
|
|
generating && "animate-pulse text-yellow-500"
|
|
)}
|
|
title="Auto-Generate Missing Previews"
|
|
>
|
|
<ImageIcon className="h-5 w-5" />
|
|
</button>
|
|
|
|
<button
|
|
onClick={syncPrompts}
|
|
disabled={loading}
|
|
className="p-2 hover:bg-secondary rounded-full transition-colors"
|
|
title="Sync from GitHub"
|
|
>
|
|
<RefreshCw className={cn("h-5 w-5", loading && "animate-spin")} />
|
|
</button>
|
|
<input
|
|
type="text"
|
|
placeholder="Search prompts..."
|
|
className="px-4 py-2 rounded-lg bg-card border focus:border-primary focus:outline-none w-full md:w-64"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{generating && (
|
|
<div className="bg-primary/10 border border-primary/20 text-primary p-4 rounded-xl flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
|
|
<Loader2 className="h-5 w-5 animate-spin" />
|
|
<span className="font-medium">Generating preview images for library prompts... This may take a while.</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Smart Tabs */}
|
|
<div className="flex items-center gap-1 bg-secondary/30 p-1 rounded-xl w-fit">
|
|
{(['all', 'latest', 'history', 'foryou'] as const).map(mode => (
|
|
<button
|
|
key={mode}
|
|
onClick={() => setSortMode(mode)}
|
|
className={cn(
|
|
"px-4 py-2 rounded-lg text-sm font-medium transition-all capitalize",
|
|
sortMode === mode
|
|
? "bg-background text-foreground shadow-sm"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-background/50"
|
|
)}
|
|
>
|
|
{mode === 'foryou' ? 'For You' : mode}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Sub-Categories (only show if NOT history/foryou to keep clean? Or keep it?) */}
|
|
{sortMode === 'all' && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{uniqueCategories.map(cat => (
|
|
<button
|
|
key={cat}
|
|
onClick={() => setSelectedCategory(cat)}
|
|
className={cn(
|
|
"px-4 py-2 rounded-full text-sm font-medium transition-colors",
|
|
selectedCategory === cat
|
|
? "bg-primary text-primary-foreground"
|
|
: "bg-card hover:bg-secondary text-muted-foreground"
|
|
)}
|
|
>
|
|
{cat}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Source Filter */}
|
|
<div className="flex flex-wrap gap-2 items-center">
|
|
<span className="text-sm font-medium text-muted-foreground mr-2">Sources:</span>
|
|
{uniqueSources.map(source => (
|
|
<button
|
|
key={source}
|
|
onClick={() => setSelectedSource(source)}
|
|
className={cn(
|
|
"px-3 py-1 rounded-full text-xs font-medium transition-colors border",
|
|
selectedSource === source
|
|
? "bg-primary text-primary-foreground border-primary"
|
|
: "bg-card hover:bg-secondary text-muted-foreground border-secondary"
|
|
)}
|
|
>
|
|
{source}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{loading && !prompts.length ? (
|
|
<div className="flex justify-center py-20">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<AnimatePresence mode="popLayout">
|
|
{finalPrompts.map((p) => (
|
|
<motion.div
|
|
key={p.id}
|
|
layout
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.9 }}
|
|
className="group relative flex flex-col bg-card border rounded-xl overflow-hidden hover:border-primary/50 transition-all hover:shadow-lg"
|
|
>
|
|
{p.images && p.images.length > 0 ? (
|
|
<div className="aspect-video relative overflow-hidden bg-secondary/50">
|
|
<img
|
|
src={p.images[0]}
|
|
alt={p.title}
|
|
className="object-cover w-full h-full transition-transform group-hover:scale-105"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="aspect-video bg-gradient-to-br from-secondary to-background p-4 flex items-center justify-center text-muted-foreground/20">
|
|
<Sparkles className="h-12 w-12" />
|
|
</div>
|
|
)}
|
|
|
|
<div className="p-4 flex flex-col flex-1 gap-3">
|
|
<div className="flex justify-between items-start gap-2">
|
|
<h3 className="font-semibold line-clamp-1" title={p.title}>{p.title}</h3>
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-secondary text-muted-foreground whitespace-nowrap">
|
|
{p.source}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-sm text-muted-foreground line-clamp-3 flex-1 font-mono bg-secondary/30 p-2 rounded">
|
|
{p.prompt}
|
|
</p>
|
|
|
|
<div className="flex items-center justify-between pt-2 border-t mt-auto">
|
|
<button
|
|
onClick={() => handleSelect(p)}
|
|
className="text-xs font-medium text-primary hover:underline flex items-center gap-1"
|
|
>
|
|
Use Prompt
|
|
</button>
|
|
<button
|
|
onClick={() => navigator.clipboard.writeText(p.prompt)}
|
|
className="p-1.5 text-muted-foreground hover:text-primary transition-colors"
|
|
title="Copy to clipboard"
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && finalPrompts.length === 0 && (
|
|
<div className="text-center py-20 text-muted-foreground">
|
|
{sortMode === 'history' ? "No prompts used yet." : "No prompts found."}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|