"use client"; import { useState } from "react"; import { useTranslations } from "next-intl"; import { useTheme } from "next-themes"; import { ChevronDown, Play, ExternalLink, Sparkles, Loader2 } from "lucide-react"; import Editor from "@monaco-editor/react"; import { Button } from "@/components/ui/button"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import SQL_EXAMPLES from "@/data/sql-examples.json"; const DEFAULT_SQL = SQL_EXAMPLES[0].sql; const HF_DATASET_URL = "https://huggingface.co/datasets/fka/prompts.chat/viewer"; interface HFDataStudioDropdownProps { aiGenerationEnabled?: boolean; } export function HFDataStudioDropdown({ aiGenerationEnabled = false }: HFDataStudioDropdownProps) { const t = useTranslations("prompts.hfDataStudio"); const { resolvedTheme } = useTheme(); const [sql, setSql] = useState(DEFAULT_SQL); const [aiPrompt, setAiPrompt] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const [showAiInput, setShowAiInput] = useState(false); const handleOpenDataset = () => { window.open(HF_DATASET_URL, "_blank"); }; const handleRun = () => { const encodedSql = encodeURIComponent(sql); const url = `${HF_DATASET_URL}?views[]=train&sql=${encodedSql}`; window.open(url, "_blank"); }; const handleGenerateSQL = async () => { if (!aiPrompt.trim() || isGenerating) return; setIsGenerating(true); try { const response = await fetch("/api/generate/sql", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: aiPrompt }), }); if (!response.ok) throw new Error("Failed to generate SQL"); const data = await response.json(); setSql(data.sql); } catch (error) { console.error("SQL generation error:", error); } finally { setIsGenerating(false); } }; return (

{/* Header with Examples Select + AI Button */}

{aiGenerationEnabled && ( )}

{t("openDataset")}

{/* AI Input (toggled) */} {aiGenerationEnabled && showAiInput && (

setAiPrompt(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleGenerateSQL()} className="h-8 text-xs flex-1 rounded-s-md rounded-e-none border border-e-0 border-input bg-transparent px-3 py-1 outline-none placeholder:text-muted-foreground" autoFocus />

)} {/* SQL Editor */}

setSql(value || "")} theme={resolvedTheme === "dark" ? "vs-dark" : "light"} options={{ minimap: { enabled: false }, fontSize: 12, lineNumbers: "on", scrollBeyondLastLine: false, automaticLayout: true, tabSize: 2, wordWrap: "on", }} />

{/* Run Button */}

); }