"use client"; import { useState, useEffect } from "react"; import { useTranslations } from "next-intl"; import { Variable, Plus } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; interface VariableToolbarProps { onInsert: (variable: string) => void; getSelectedText?: () => string; } export function VariableToolbar({ onInsert, getSelectedText }: VariableToolbarProps) { const t = useTranslations("prompts"); const [open, setOpen] = useState(false); const [name, setName] = useState(""); const [defaultValue, setDefaultValue] = useState(""); // Pre-fill name with selected text when popover opens useEffect(() => { if (open && getSelectedText) { const selected = getSelectedText(); if (selected) { // Sanitize: lowercase, replace spaces with underscores, remove invalid chars const sanitized = selected.trim().toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, ""); if (sanitized) { // Use queueMicrotask to avoid sync setState in effect queueMicrotask(() => setName(sanitized)); } } } }, [open, getSelectedText]); const handleInsert = () => { if (!name.trim()) return; const variable = defaultValue.trim() ? `\${${name.trim()}:${defaultValue.trim()}}` : `\${${name.trim()}}`; onInsert(variable); setName(""); setDefaultValue(""); setOpen(false); }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && name.trim()) { e.preventDefault(); handleInsert(); } }; return (

{t("variableName")} setName(e.target.value)} onKeyDown={handleKeyDown} placeholder="topic" className="h-8 text-sm" autoFocus />

{t("variableDefault")} setDefaultValue(e.target.value)} onKeyDown={handleKeyDown} placeholder={t("variableDefaultPlaceholder")} className="h-8 text-sm" />


                {name ? (defaultValue ? `\${${name}:${defaultValue}}` : `\${${name}}`) : "${variable}"}

{t("variableHint")}

); }