import { useState } from "react"; import { useTranslation } from "react-i18next"; import { IconPlus, IconTrash } from "@tabler/icons-react"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "@/shared/ui/dialog"; import { Button } from "@/shared/ui/button"; import { Input } from "@/shared/ui/input"; import { Label } from "@/shared/ui/label"; import { Textarea } from "@/shared/ui/textarea"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/shared/ui/select"; import type { ExtensionConfig, ExtensionEntry } from "../types"; type ExtensionType = "stdio" | "streamable_http"; interface ExtensionModalProps { extension?: ExtensionEntry; onSubmit: ( name: string, config: ExtensionConfig, enabled: boolean, ) => Promise; onDelete?: (configKey: string) => Promise; onClose: () => void; } interface EnvVar { id: number; key: string; value: string; } let nextEnvId = 0; function parseEnvVars(envs?: Record): EnvVar[] { if (!envs || Object.keys(envs).length === 0) return [{ id: nextEnvId++, key: "", value: "" }]; return Object.entries(envs).map(([key, value]) => ({ id: nextEnvId++, key, value, })); } function buildEnvVars(vars: EnvVar[]): Record { const result: Record = {}; for (const v of vars) { if (v.key.trim()) { result[v.key.trim()] = v.value; } } return result; } export function ExtensionModal({ extension, onSubmit, onDelete, onClose, }: ExtensionModalProps) { const { t } = useTranslation("settings"); const isEdit = !!extension; const [isSaving, setIsSaving] = useState(false); const [name, setName] = useState(extension?.name ?? ""); const [type, setType] = useState( extension?.type === "streamable_http" || extension?.type === "sse" ? "streamable_http" : "stdio", ); const [description, setDescription] = useState(extension?.description ?? ""); const [cmd, setCmd] = useState( extension?.type === "stdio" ? extension.cmd : "", ); const [args, setArgs] = useState( extension?.type === "stdio" ? extension.args.join("\n") : "", ); const [uri, setUri] = useState( extension?.type === "streamable_http" ? extension.uri : extension?.type === "sse" ? (extension.uri ?? "") : "", ); const [timeout, setTimeout] = useState( String( extension?.type === "stdio" || extension?.type === "streamable_http" ? (extension.timeout ?? 300) : 300, ), ); const [envVars, setEnvVars] = useState(() => { if (extension?.type === "stdio") return parseEnvVars(extension.envs); if (extension?.type === "streamable_http") return parseEnvVars(extension.envs); return [{ id: nextEnvId++, key: "", value: "" }]; }); const canSubmit = name.trim().length > 0 && (type === "stdio" ? cmd.trim().length > 0 : uri.trim().length > 0); const handleSubmit = async () => { if (!canSubmit || isSaving) return; setIsSaving(true); try { const trimmedName = name.trim(); const envs = buildEnvVars(envVars); const timeoutNum = Number.parseInt(timeout, 10) || 300; let config: ExtensionConfig; if (type === "stdio") { config = { ...(extension?.type === "stdio" ? extension : {}), type: "stdio", name: trimmedName, description, cmd: cmd.trim(), args: args .split("\n") .map((a) => a.trim()) .filter(Boolean), envs, timeout: timeoutNum, }; } else { if (!uri.trim()) return; config = { ...(extension?.type === "streamable_http" ? extension : {}), type: "streamable_http", name: trimmedName, description, uri: uri.trim(), envs, timeout: timeoutNum, }; } await onSubmit(trimmedName, config, extension?.enabled ?? true); } finally { setIsSaving(false); } }; const updateEnvVar = (index: number, field: "key" | "value", val: string) => { setEnvVars((prev) => { const next = [...prev]; next[index] = { ...next[index], [field]: val }; return next; }); }; const addEnvVar = () => { setEnvVars((prev) => [...prev, { id: nextEnvId++, key: "", value: "" }]); }; const removeEnvVar = (id: number) => { setEnvVars((prev) => { if (prev.length <= 1) return [{ id: nextEnvId++, key: "", value: "" }]; return prev.filter((v) => v.id !== id); }); }; return (