-
-
+
+
+
+ {aiGenerationEnabled && (
+
+
+ {t("aiGenerate")}
+
+ )}
+
+ {t("examples")}
+
+
-
setSql(value || "")}
- theme={resolvedTheme === "dark" ? "vs-dark" : "light"}
- options={{
- minimap: { enabled: false },
- fontSize: 12,
- lineNumbers: "on",
- scrollBeyondLastLine: false,
- automaticLayout: true,
- tabSize: 2,
- wordWrap: "on",
- }}
- />
+
+ {aiGenerationEnabled && (
+
+
+ setAiPrompt(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && handleGenerateSQL()}
+ className="h-8 text-xs flex-1"
+ />
+
+
+
+ )}
+
+
+
+
+
+
+
+ setSql(value || "")}
+ theme={resolvedTheme === "dark" ? "vs-dark" : "light"}
+ options={{
+ minimap: { enabled: false },
+ fontSize: 12,
+ lineNumbers: "on",
+ scrollBeyondLastLine: false,
+ automaticLayout: true,
+ tabSize: 2,
+ wordWrap: "on",
+ }}
+ />
+
+
diff --git a/src/components/prompts/infinite-prompt-list.tsx b/src/components/prompts/infinite-prompt-list.tsx
index a12bdb01..5a203114 100644
--- a/src/components/prompts/infinite-prompt-list.tsx
+++ b/src/components/prompts/infinite-prompt-list.tsx
@@ -1,8 +1,11 @@
"use client";
import { useEffect, useRef, useState, useCallback } from "react";
+import { useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { Loader2, SearchX } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useFilterContext } from "./filter-context";
import { PromptCard, type PromptCardProps } from "./prompt-card";
interface InfinitePromptListProps {
@@ -17,24 +20,49 @@ interface InfinitePromptListProps {
};
}
+function PromptCardSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
export function InfinitePromptList({
initialPrompts,
initialTotal,
filters
}: InfinitePromptListProps) {
const t = useTranslations("prompts");
+ const searchParams = useSearchParams();
+ const { isFilterPending, setFilterPending } = useFilterContext();
const [prompts, setPrompts] = useState(initialPrompts);
const [page, setPage] = useState(1);
const [isLoading, setIsLoading] = useState(false);
const [hasMore, setHasMore] = useState(initialPrompts.length < initialTotal);
const loaderRef = useRef
(null);
- // Reset when filters change
+ // Reset when new data arrives from server
useEffect(() => {
setPrompts(initialPrompts);
setPage(1);
setHasMore(initialPrompts.length < initialTotal);
- }, [initialPrompts, initialTotal]);
+ setFilterPending(false);
+ }, [initialPrompts, initialTotal, setFilterPending]);
const loadMore = useCallback(async () => {
if (isLoading || !hasMore) return;
@@ -88,6 +116,17 @@ export function InfinitePromptList({
return () => observer.disconnect();
}, [loadMore, hasMore, isLoading]);
+ // Show skeleton while filtering
+ if (isFilterPending) {
+ return (
+
+ {Array.from({ length: 12 }).map((_, i) => (
+
+ ))}
+
diff --git a/src/components/prompts/prompt-filters.tsx b/src/components/prompts/prompt-filters.tsx
index faf956e0..6b135966 100644
--- a/src/components/prompts/prompt-filters.tsx
+++ b/src/components/prompts/prompt-filters.tsx
@@ -1,7 +1,9 @@
"use client";
+import { useState, useMemo, useRef } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
+import { useFilterContext } from "./filter-context";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import {
@@ -13,7 +15,7 @@ import {
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
-import { X, Sparkles } from "lucide-react";
+import { X, Sparkles, Search } from "lucide-react";
interface PromptFiltersProps {
categories: Array<{
@@ -45,6 +47,15 @@ export function PromptFilters({ categories, tags, currentFilters, aiSearchEnable
const router = useRouter();
const searchParams = useSearchParams();
const t = useTranslations();
+ const [tagSearch, setTagSearch] = useState("");
+ const { setFilterPending } = useFilterContext();
+ const debounceRef = useRef(null);
+
+ const filteredTags = useMemo(() => {
+ if (!tagSearch.trim()) return tags;
+ const search = tagSearch.toLowerCase();
+ return tags.filter((tag) => tag.name.toLowerCase().includes(search));
+ }, [tags, tagSearch]);
const updateFilter = (key: string, value: string | null) => {
const params = new URLSearchParams(searchParams.toString());
@@ -85,10 +96,17 @@ export function PromptFilters({ categories, tags, currentFilters, aiSearchEnable
className="h-8 text-sm"
defaultValue={currentFilters.q}
onChange={(e) => {
- const timeout = setTimeout(() => {
- updateFilter("q", e.target.value || null);
+ const value = e.target.value;
+ // Show loading immediately
+ setFilterPending(true);
+ // Clear previous debounce
+ if (debounceRef.current) {
+ clearTimeout(debounceRef.current);
+ }
+ // Debounce the actual navigation
+ debounceRef.current = setTimeout(() => {
+ updateFilter("q", value || null);
}, 300);
- return () => clearTimeout(timeout);
}}
/>
@@ -185,8 +203,17 @@ export function PromptFilters({ categories, tags, currentFilters, aiSearchEnable
{tags.length > 0 && (
-
- {tags.filter((t) => t.id && t.slug).slice(0, 8).map((tag) => (
+
+
+ setTagSearch(e.target.value)}
+ />
+
+
+ {filteredTags.filter((tag) => tag.id && tag.slug).map((tag) => (
)}
diff --git a/src/lib/ai/embeddings.ts b/src/lib/ai/embeddings.ts
index 8ce909d7..cefe7571 100644
--- a/src/lib/ai/embeddings.ts
+++ b/src/lib/ai/embeddings.ts
@@ -11,13 +11,15 @@ function getOpenAIClient(): OpenAI {
if (!apiKey) {
throw new Error("OPENAI_API_KEY is not set");
}
- openai = new OpenAI({ apiKey });
+ openai = new OpenAI({
+ apiKey,
+ baseURL: process.env.OPENAI_BASE_URL || undefined,
+ });
}
return openai;
}
-const EMBEDDING_MODEL = "text-embedding-3-small";
-const EMBEDDING_DIMENSIONS = 1536;
+const EMBEDDING_MODEL = process.env.OPENAI_EMBEDDING_MODEL || "text-embedding-3-small";
export async function generateEmbedding(text: string): Promise
{
const client = getOpenAIClient();
@@ -193,16 +195,20 @@ export async function semanticSearch(
},
});
- // Calculate similarity scores
- const scoredPrompts = prompts.map((prompt) => {
- const embedding = prompt.embedding as number[];
- const similarity = cosineSimilarity(queryEmbedding, embedding);
- return {
- ...prompt,
- similarity,
- voteCount: prompt._count.votes,
- };
- });
+ // Calculate similarity scores and filter by threshold
+ const SIMILARITY_THRESHOLD = 0.4; // Filter out results below this similarity
+
+ const scoredPrompts = prompts
+ .map((prompt) => {
+ const embedding = prompt.embedding as number[];
+ const similarity = cosineSimilarity(queryEmbedding, embedding);
+ return {
+ ...prompt,
+ similarity,
+ voteCount: prompt._count.votes,
+ };
+ })
+ .filter((prompt) => prompt.similarity >= SIMILARITY_THRESHOLD);
// Sort by similarity and return top results
scoredPrompts.sort((a, b) => b.similarity - a.similarity);
diff --git a/src/lib/ai/generation.ts b/src/lib/ai/generation.ts
new file mode 100644
index 00000000..2262623c
--- /dev/null
+++ b/src/lib/ai/generation.ts
@@ -0,0 +1,67 @@
+import OpenAI from "openai";
+import { getConfig } from "@/lib/config";
+
+let openai: OpenAI | null = null;
+
+function getOpenAIClient(): OpenAI {
+ if (!openai) {
+ const apiKey = process.env.OPENAI_API_KEY;
+ if (!apiKey) {
+ throw new Error("OPENAI_API_KEY is not set");
+ }
+ openai = new OpenAI({
+ apiKey,
+ baseURL: process.env.OPENAI_BASE_URL || undefined,
+ });
+ }
+ return openai;
+}
+
+const GENERATIVE_MODEL = process.env.OPENAI_GENERATIVE_MODEL || "gpt-4o-mini";
+
+export async function isAIGenerationEnabled(): Promise {
+ const config = await getConfig();
+ return !!(config.features.aiGeneration && process.env.OPENAI_API_KEY);
+}
+
+export async function generateSQL(prompt: string): Promise {
+ const config = await getConfig();
+ if (!config.features.aiGeneration) {
+ throw new Error("AI Generation is not enabled");
+ }
+
+ const client = getOpenAIClient();
+
+ const systemPrompt = `You are an SQL expert. Generate SQL queries for the Hugging Face datasets viewer.
+The dataset is "fka/awesome-chatgpt-prompts" with a "train" split.
+Available columns: act (prompt title), prompt (prompt content), for_devs (boolean), type (TEXT or STRUCTURED), contributor (author name).
+
+Rules:
+- Always use "train" as the table name
+- Return ONLY the SQL query, no explanations
+- Keep queries simple and efficient
+- Use proper SQL syntax for DuckDB
+- The generated SQL strings must be in English since all prompts are in English (e.g. if user searches for "çiçekçi" it's florist.)
+- Use multiple matchers like SELECT act, prompt FROM train WHERE LOWER(prompt) LIKE '%travel%' OR LOWER(act) LIKE '%travel%' OR LOWER(act) LIKE '%guide%' LIMIT 20;
+- Be generative and creative. e.g. if user wrote "joke", search for similar terms.
+- SQL must be formatted into lines.`;
+
+ const response = await client.chat.completions.create({
+ model: GENERATIVE_MODEL,
+ messages: [
+ { role: "system", content: systemPrompt },
+ { role: "user", content: prompt }
+ ],
+ temperature: 0.7,
+ max_tokens: 500,
+ });
+
+ const content = response.choices[0]?.message?.content || "";
+
+ // Clean up the response - remove markdown code blocks if present
+ return content
+ .replace(/^```sql\n?/i, "")
+ .replace(/^```\n?/i, "")
+ .replace(/\n?```$/i, "")
+ .trim();
+}
diff --git a/src/lib/config/index.ts b/src/lib/config/index.ts
index f5abec7f..c9550673 100644
--- a/src/lib/config/index.ts
+++ b/src/lib/config/index.ts
@@ -44,6 +44,7 @@ export interface FeaturesConfig {
categories: boolean;
tags: boolean;
aiSearch?: boolean;
+ aiGeneration?: boolean;
}
export interface Sponsor {
@@ -125,6 +126,7 @@ export async function getConfig(): Promise {
categories: true,
tags: true,
aiSearch: false,
+ aiGeneration: false,
},
};
return cachedConfig;