"use client"; import { useState, useMemo, useCallback } from "react"; import { useTranslations } from "next-intl"; import { Copy } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { toast } from "sonner"; import { RunPromptButton } from "@/components/prompts/run-prompt-button"; import { analyticsPrompt } from "@/lib/analytics"; interface Variable { name: string; defaultValue: string; fullMatch: string; } interface VariableFillModalProps { content: string; open: boolean; onOpenChange: (open: boolean) => void; mode: "copy" | "run"; promptId?: string; categoryName?: string; parentCategoryName?: string; } // Parse ${variablename:defaultvalue} or ${variablename} patterns function parseVariables(content: string): Variable[] { const regex = /\$\{([^:}]+)(?::([^}]*))?\}/g; const variables: Variable[] = []; let match; while ((match = regex.exec(content)) !== null) { variables.push({ name: match[1].trim(), defaultValue: (match[2] ?? "").trim(), fullMatch: match[0], }); } return variables; } // Get unique variables with their default values function getUniqueVariables(variables: Variable[]): { name: string; defaultValue: string }[] { const seen = new Map(); for (const variable of variables) { if (!seen.has(variable.name)) { seen.set(variable.name, variable.defaultValue); } } return Array.from(seen.entries()).map(([name, defaultValue]) => ({ name, defaultValue })); } export function VariableFillModal({ content, open, onOpenChange, mode, promptId, categoryName, parentCategoryName }: VariableFillModalProps) { const t = useTranslations("common"); // Parse variables from content const variables = useMemo(() => parseVariables(content), [content]); const uniqueVariables = useMemo(() => getUniqueVariables(variables), [variables]); // Initialize values with defaults const [values, setValues] = useState>(() => { const initial: Record = {}; for (const { name, defaultValue } of uniqueVariables) { initial[name] = defaultValue; } return initial; }); // Get the final content with variables replaced const getFinalContent = useCallback(() => { let result = content; for (const variable of variables) { const value = values[variable.name] || variable.defaultValue; result = result.replace(variable.fullMatch, value); } return result; }, [content, variables, values]); // Update a variable value const updateValue = useCallback((name: string, value: string) => { setValues((prev) => ({ ...prev, [name]: value })); }, []); // Handle copy const handleCopy = async () => { try { await navigator.clipboard.writeText(getFinalContent()); analyticsPrompt.fillVariables(promptId); analyticsPrompt.copy(promptId); toast.success(t("copied")); onOpenChange(false); } catch { toast.error(t("failedToCopy")); } }; const finalContent = getFinalContent(); return ( ); } // Check if content has variables export function hasVariables(content: string): boolean { return /\$\{[^:}]+(?::[^}]*)?\}/.test(content); } // Render content with styled variable placeholders (non-editable) export function renderContentWithVariables(content: string): React.ReactNode { const parts: React.ReactNode[] = []; let lastIndex = 0; const regex = /\$\{([^:}]+)(?::([^}]*))?\}/g; let match; let keyIndex = 0; while ((match = regex.exec(content)) !== null) { // Add text before the variable if (match.index > lastIndex) { parts.push(content.slice(lastIndex, match.index)); } const name = match[1].trim(); const defaultValue = (match[2] ?? "").trim(); // Add styled variable badge showing default value or name parts.push( {defaultValue || name} ); lastIndex = match.index + match[0].length; } // Add remaining text if (lastIndex < content.length) { parts.push(content.slice(lastIndex)); } return parts; }