@elizaos/app-core 2.0.0-alpha.37

package/dist/components/CustomActionEditor.js

@@ -0,0 +1,578 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { client, } from "@elizaos/app-core/api";
+import { useApp } from "@elizaos/app-core/state";
+import { Button } from "@elizaos/ui";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useEffect, useState } from "react";
+const HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"];
+const METHODS_SET = new Set(HTTP_METHODS);
+const HTTP_METHODS_LIST = HTTP_METHODS;
+function toNonEmptyString(value) {
+    if (typeof value !== "string")
+        return undefined;
+    const normalized = value.trim();
+    return normalized.length > 0 ? normalized : undefined;
+}
+function normalizeActionName(value) {
+    return value
+        .trim()
+        .toUpperCase()
+        .replace(/[^A-Z0-9_]+/g, "_")
+        .replace(/_+/g, "_")
+        .replace(/^_+|_+$/g, "");
+}
+function normalizeAlias(value) {
+    return normalizeActionName(value);
+}
+function normalizeParamName(value) {
+    return value
+        .trim()
+        .replace(/[^A-Za-z0-9_]+/g, "_")
+        .replace(/_+/g, "_")
+        .replace(/^_+|_+$/g, "");
+}
+function normalizeMethod(value) {
+    const method = toNonEmptyString(value)?.toUpperCase();
+    return method && METHODS_SET.has(method) ? method : "GET";
+}
+function parseHeaders(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+        return [];
+    }
+    return Object.entries(value).flatMap(([key, rawValue]) => {
+        const trimmedKey = normalizeParamName(key);
+        if (!trimmedKey)
+            return [];
+        if (typeof rawValue !== "string")
+            return [];
+        return [{ key: key.trim(), value: rawValue }];
+    });
+}
+function parseParameters(value) {
+    if (!Array.isArray(value))
+        return [];
+    const seen = new Set();
+    return value
+        .map((raw) => {
+        if (!raw || typeof raw !== "object")
+            return null;
+        const candidate = raw;
+        const rawName = toNonEmptyString(candidate.name);
+        if (!rawName)
+            return null;
+        const name = normalizeParamName(rawName);
+        if (!name || seen.has(name.toLowerCase()))
+            return null;
+        seen.add(name.toLowerCase());
+        return {
+            name,
+            description: toNonEmptyString(candidate.description) || name,
+            required: candidate.required === true,
+        };
+    })
+        .filter((param) => param !== null);
+}
+function parseSimiles(value) {
+    if (!Array.isArray(value))
+        return [];
+    const seen = new Set();
+    return value
+        .map((raw) => toNonEmptyString(raw) || "")
+        .map((simile) => normalizeAlias(simile))
+        .filter((simile) => simile.length > 0)
+        .filter((simile) => {
+        const key = simile.toLowerCase();
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        return true;
+    });
+}
+function parseGeneratedAction(payload) {
+    if (!payload || typeof payload !== "object" || Array.isArray(payload)) {
+        return { ok: false, errors: ["Generation returned an invalid payload."] };
+    }
+    const raw = payload;
+    const name = normalizeActionName(raw.name?.toString() ?? "");
+    const description = toNonEmptyString(raw.description) ?? "";
+    if (!name) {
+        return {
+            ok: false,
+            errors: ["Generated action must include a name."],
+        };
+    }
+    const handlerSource = raw.handler;
+    if (!handlerSource ||
+        typeof handlerSource !== "object" ||
+        Array.isArray(handlerSource)) {
+        return {
+            ok: false,
+            errors: ["Generated action must include a handler block."],
+        };
+    }
+    const hTypeRaw = toNonEmptyString(raw.handlerType) ??
+        toNonEmptyString(handlerSource.type);
+    const handlerType = hTypeRaw?.toLowerCase();
+    if (handlerType !== "http" &&
+        handlerType !== "shell" &&
+        handlerType !== "code") {
+        return {
+            ok: false,
+            errors: ["Generated handler type must be http, shell, or code."],
+        };
+    }
+    const params = parseParameters(raw.parameters);
+    if (handlerType === "http") {
+        const rawHttp = handlerSource;
+        const url = toNonEmptyString(rawHttp.url);
+        if (!url) {
+            return {
+                ok: false,
+                errors: ["HTTP action requires a URL."],
+            };
+        }
+        const handler = {
+            type: "http",
+            method: normalizeMethod(rawHttp.method ?? rawHttp.methodType),
+            url,
+            headers: parseHeaders(rawHttp.headers).length
+                ? parseHeaders(rawHttp.headers).reduce((acc, item) => {
+                    if (item.key) {
+                        acc[item.key] = item.value;
+                    }
+                    return acc;
+                }, {})
+                : undefined,
+            bodyTemplate: toNonEmptyString(rawHttp.bodyTemplate),
+        };
+        return {
+            ok: true,
+            action: {
+                name,
+                description,
+                handlerType,
+                handler,
+                parameters: params,
+                similes: parseSimiles(raw.similes),
+                enabled: raw.enabled === true,
+            },
+            errors: [],
+        };
+    }
+    if (handlerType === "shell") {
+        const rawShell = handlerSource;
+        const command = toNonEmptyString(rawShell.command);
+        if (!command) {
+            return {
+                ok: false,
+                errors: ["Shell action requires a command template."],
+            };
+        }
+        return {
+            ok: true,
+            action: {
+                name,
+                description,
+                handlerType,
+                handler: {
+                    type: "shell",
+                    command,
+                },
+                parameters: params,
+                similes: parseSimiles(raw.similes),
+                enabled: raw.enabled === true,
+            },
+            errors: [],
+        };
+    }
+    const rawCode = handlerSource;
+    const code = toNonEmptyString(rawCode.code) ?? toNonEmptyString(rawCode.source);
+    if (!code) {
+        return {
+            ok: false,
+            errors: ["Code action requires a JavaScript code block."],
+        };
+    }
+    return {
+        ok: true,
+        action: {
+            name,
+            description,
+            handlerType,
+            handler: {
+                type: "code",
+                code,
+            },
+            parameters: params,
+            similes: parseSimiles(raw.similes),
+            enabled: raw.enabled === true,
+        },
+        errors: [],
+    };
+}
+function parseSimilesInput(value) {
+    return value
+        .split(",")
+        .map((raw) => normalizeAlias(raw))
+        .filter(Boolean);
+}
+export function CustomActionEditor({ open, action, onSave, onClose, }) {
+    const { t } = useApp();
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [similesInput, setSimilesInput] = useState("");
+    const [handlerType, setHandlerType] = useState("http");
+    // HTTP handler fields
+    const [httpMethod, setHttpMethod] = useState("GET");
+    const [httpUrl, setHttpUrl] = useState("");
+    const [httpHeaders, setHttpHeaders] = useState([
+        { key: "", value: "" },
+    ]);
+    const [httpBody, setHttpBody] = useState("");
+    // Shell handler fields
+    const [shellCommand, setShellCommand] = useState("");
+    // Code handler fields
+    const [code, setCode] = useState("");
+    // Parameters
+    const [parameters, setParameters] = useState([]);
+    // AI generate
+    const [aiPrompt, setAiPrompt] = useState("");
+    const [generating, setGenerating] = useState(false);
+    // Test section
+    const [testExpanded, setTestExpanded] = useState(false);
+    const [testParams, setTestParams] = useState({});
+    const [testResult, setTestResult] = useState(null);
+    const [testing, setTesting] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [formError, setFormError] = useState("");
+    // Populate form when action changes
+    useEffect(() => {
+        if (!open)
+            return;
+        setFormError("");
+        if (action) {
+            setName(action.name);
+            setDescription(action.description || "");
+            setSimilesInput((action.similes ?? []).join(", "));
+            setParameters(action.parameters?.map((p) => ({
+                name: p.name,
+                description: p.description || "",
+                required: p.required || false,
+            })) || []);
+            const handler = action.handler;
+            if (handler.type === "http") {
+                setHandlerType("http");
+                setHttpMethod(handler.method || "GET");
+                setHttpUrl(handler.url || "");
+                const headers = handler.headers || {};
+                setHttpHeaders(Object.keys(headers).length > 0
+                    ? Object.entries(headers).map(([key, value]) => ({
+                        key,
+                        value,
+                    }))
+                    : [{ key: "", value: "" }]);
+                setHttpBody(handler.bodyTemplate || "");
+            }
+            else if (handler.type === "shell") {
+                setHandlerType("shell");
+                setShellCommand(handler.command || "");
+            }
+            else if (handler.type === "code") {
+                setHandlerType("code");
+                setCode(handler.code || "");
+            }
+        }
+        else {
+            // Reset for create mode
+            setName("");
+            setDescription("");
+            setSimilesInput("");
+            setHandlerType("http");
+            setHttpMethod("GET");
+            setHttpUrl("");
+            setHttpHeaders([{ key: "", value: "" }]);
+            setHttpBody("");
+            setShellCommand("");
+            setCode("");
+            setParameters([]);
+            setAiPrompt("");
+            setTestExpanded(false);
+            setTestParams({});
+            setTestResult(null);
+        }
+    }, [open, action]);
+    const setNormalizedName = (value) => {
+        setName(normalizeActionName(value));
+        setFormError("");
+    };
+    const setDescriptionValue = (value) => {
+        setDescription(value);
+        setFormError("");
+    };
+    const applyGenerated = (parsed) => {
+        setName(parsed.name);
+        setDescription(parsed.description);
+        setSimilesInput(parsed.similes.join(", "));
+        if (parsed.handlerType === "http") {
+            const handler = parsed.handler;
+            setHandlerType("http");
+            setHttpMethod(handler.method || "GET");
+            setHttpUrl(handler.url);
+            setHttpBody(handler.bodyTemplate || "");
+            setHttpHeaders(handler.headers
+                ? Object.entries(handler.headers).map(([key, value]) => ({
+                    key,
+                    value,
+                }))
+                : [{ key: "", value: "" }]);
+        }
+        else if (parsed.handlerType === "shell") {
+            const handler = parsed.handler;
+            setHandlerType("shell");
+            setShellCommand(handler.command);
+        }
+        else {
+            const handler = parsed.handler;
+            setHandlerType("code");
+            setCode(handler.code);
+        }
+        setParameters(parsed.parameters);
+        setFormError("");
+        setAiPrompt("");
+    };
+    const handleGenerate = async () => {
+        if (!aiPrompt.trim())
+            return;
+        setGenerating(true);
+        setFormError("");
+        try {
+            const result = await client.generateCustomAction(aiPrompt.trim());
+            if (!result.ok || !result.generated) {
+                setFormError("AI generation returned no action definition.");
+                return;
+            }
+            const parsed = parseGeneratedAction(result.generated);
+            if (!parsed.ok || !parsed.action) {
+                setFormError(parsed.errors.length > 0
+                    ? parsed.errors.join(" ")
+                    : "AI generation was incomplete.");
+                return;
+            }
+            applyGenerated(parsed.action);
+        }
+        catch (err) {
+            setFormError(`Generation failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+        finally {
+            setGenerating(false);
+        }
+    };
+    const addParameter = () => {
+        setParameters([
+            ...parameters,
+            { name: "", description: "", required: false },
+        ]);
+    };
+    const removeParameter = (index) => {
+        setParameters(parameters.filter((_, i) => i !== index));
+    };
+    const updateParameter = (index, field, value) => {
+        setParameters((prevParameters) => prevParameters.map((parameter, i) => {
+            if (i !== index) {
+                return parameter;
+            }
+            if (field === "name") {
+                return {
+                    ...parameter,
+                    [field]: normalizeParamName(value),
+                };
+            }
+            return {
+                ...parameter,
+                [field]: value,
+            };
+        }));
+        setFormError("");
+    };
+    const addHeader = () => {
+        setHttpHeaders([...httpHeaders, { key: "", value: "" }]);
+    };
+    const removeHeader = (index) => {
+        setHttpHeaders(httpHeaders.filter((_, i) => i !== index));
+    };
+    const updateHeader = (index, field, value) => {
+        setHttpHeaders((prevHeaders) => prevHeaders.map((header, i) => i === index ? { ...header, [field]: value } : header));
+        setFormError("");
+    };
+    const buildHeaders = () => {
+        const headers = {};
+        for (const header of httpHeaders) {
+            const key = header.key.trim();
+            if (key) {
+                headers[key] = header.value;
+            }
+        }
+        return Object.keys(headers).length > 0 ? headers : undefined;
+    };
+    const validateParameters = (items) => {
+        const seen = new Set();
+        for (const parameter of items) {
+            const normalized = normalizeParamName(parameter.name);
+            if (!normalized) {
+                return "Each parameter needs a non-empty name.";
+            }
+            if (seen.has(normalized.toLowerCase())) {
+                return `Duplicate parameter name: ${normalized}`;
+            }
+            seen.add(normalized.toLowerCase());
+            parameter.name = normalized;
+        }
+        return null;
+    };
+    const handleSave = async () => {
+        if (saving)
+            return;
+        setSaving(true);
+        setFormError("");
+        try {
+            const actionName = normalizeActionName(name);
+            const actionDescription = description.trim();
+            if (!actionName) {
+                setFormError("Name is required.");
+                return;
+            }
+            if (!actionDescription) {
+                setFormError("Description is required.");
+                return;
+            }
+            const normalizedParameters = [...parameters];
+            const validationError = validateParameters(normalizedParameters);
+            if (validationError) {
+                setFormError(validationError);
+                return;
+            }
+            let handler;
+            if (handlerType === "http") {
+                if (!httpUrl.trim()) {
+                    setFormError("HTTP URL is required.");
+                    return;
+                }
+                const headers = buildHeaders();
+                handler = {
+                    type: "http",
+                    method: normalizeMethod(httpMethod),
+                    url: httpUrl,
+                    headers,
+                    bodyTemplate: httpBody || undefined,
+                };
+            }
+            else if (handlerType === "shell") {
+                if (!shellCommand.trim()) {
+                    setFormError("Shell command is required.");
+                    return;
+                }
+                handler = {
+                    type: "shell",
+                    command: shellCommand,
+                };
+            }
+            else {
+                if (!code.trim()) {
+                    setFormError("Code is required.");
+                    return;
+                }
+                handler = {
+                    type: "code",
+                    code,
+                };
+            }
+            const similes = parseSimilesInput(similesInput);
+            const actionDef = {
+                name: actionName,
+                description: actionDescription,
+                similes,
+                parameters: normalizedParameters,
+                handler,
+                enabled: action?.enabled ?? true,
+            };
+            const saved = action?.id
+                ? await client.updateCustomAction(action.id, actionDef)
+                : await client.createCustomAction(actionDef);
+            onSave(saved);
+            setAiPrompt("");
+            setFormError("");
+        }
+        catch (err) {
+            setFormError(`Failed to save: ${err instanceof Error ? err.message : String(err)}`);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const handleTest = async () => {
+        if (!action?.id) {
+            setTestResult({ error: "Save the action first to test it." });
+            return;
+        }
+        setTesting(true);
+        setTestResult(null);
+        const startTime = Date.now();
+        try {
+            const result = await client.testCustomAction(action.id, testParams);
+            const duration = Date.now() - startTime;
+            setTestResult({
+                output: JSON.stringify(result, null, 2),
+                duration,
+            });
+        }
+        catch (err) {
+            const duration = Date.now() - startTime;
+            setTestResult({
+                error: err instanceof Error ? err.message : String(err),
+                duration,
+            });
+        }
+        finally {
+            setTesting(false);
+        }
+    };
+    if (!open)
+        return null;
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "w-full max-w-2xl border border-border bg-card shadow-lg flex flex-col overflow-hidden", children: [_jsxs("div", { className: "flex items-center px-5 py-3 border-b border-border shrink-0", children: [_jsx("h2", { className: "flex-1 text-sm font-medium text-txt", children: action ? "Edit Custom Action" : "New Custom Action" }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-muted text-xl leading-none", onClick: onClose, children: t("bugreportmodal.Times") })] }), _jsxs("div", { className: "px-5 py-4 flex flex-col gap-4 max-h-[70vh] overflow-y-auto", children: [formError && (_jsx("div", { className: "border border-danger/30 bg-danger/10 text-danger px-3 py-2 text-xs rounded", children: formError })), !action && (_jsxs("div", { className: "flex flex-col gap-1 border border-accent/30 bg-accent/5 p-3", children: [_jsx("span", { className: "text-xs text-txt font-medium", children: t("customactioneditor.DescribeWhatYouWa") }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "text", value: aiPrompt, onChange: (e) => {
+                                                setAiPrompt(e.target.value);
+                                                setFormError("");
+                                            }, onKeyDown: (event) => {
+                                                if (event.key === "Enter" && !generating) {
+                                                    void handleGenerate();
+                                                }
+                                            }, placeholder: t("customactioneditor.eGCheckIfAWebs"), className: "flex-1 bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent" }), _jsx(Button, { variant: "default", size: "sm", className: "whitespace-nowrap", onClick: handleGenerate, disabled: generating || !aiPrompt.trim(), children: generating ? "Generating..." : "Generate" })] }), _jsx("span", { className: "text-xs text-muted/70", children: t("customactioneditor.TheAgentWillGener") })] })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-muted", children: t("triggersview.Name") }), _jsx("input", { type: "text", value: name, onChange: (e) => setNormalizedName(e.target.value), placeholder: t("customactioneditor.MYACTION"), className: "flex-1 bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-muted", children: t("skillsview.Description") }), _jsx("textarea", { value: description, onChange: (e) => setDescriptionValue(e.target.value), placeholder: t("customactioneditor.WhatDoesThisActio"), rows: 2, className: "flex-1 bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent resize-none" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-muted", children: t("customactioneditor.AliasesOptional") }), _jsx("input", { type: "text", value: similesInput, onChange: (e) => {
+                                        setSimilesInput(e.target.value);
+                                        setFormError("");
+                                    }, placeholder: t("customactioneditor.SYNONYMONESYNONYM"), className: "flex-1 bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent" }), _jsx("span", { className: "text-xs text-muted/70", children: t("customactioneditor.CommaSeparatedAlte") })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-muted", children: t("customactioneditor.HandlerType") }), _jsx("div", { className: "flex gap-2", children: ["http", "shell", "code"].map((type) => (_jsx("button", { type: "button", onClick: () => {
+                                            setHandlerType(type);
+                                            setFormError("");
+                                        }, className: `px-3 py-1.5 text-xs border cursor-pointer ${handlerType === type
+                                            ? "border-accent bg-accent text-[var(--accent-foreground,#1a1f26)]"
+                                            : "border-border text-muted hover:text-txt"}`, children: type === "http"
+                                            ? "HTTP Request"
+                                            : type === "shell"
+                                                ? "Shell Command"
+                                                : "JavaScript" }, type))) })] }), handlerType === "http" && (_jsxs("div", { className: "flex flex-col gap-3 border border-border p-3", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("select", { value: httpMethod, onChange: (e) => setHttpMethod(e.target.value), className: "bg-surface border border-border px-2 py-1.5 text-sm text-txt outline-none focus:border-accent", children: HTTP_METHODS_LIST.map((method) => (_jsx("option", { value: method, children: method }, method))) }), _jsx("input", { type: "text", value: httpUrl, onChange: (e) => {
+                                                setHttpUrl(e.target.value);
+                                                setFormError("");
+                                            }, placeholder: t("customactioneditor.httpsApiExample"), className: "flex-1 bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs text-muted", children: t("customactioneditor.HeadersOptional") }), _jsx("button", { type: "button", onClick: addHeader, className: "text-xs text-txt hover:opacity-80 cursor-pointer", children: t("customactioneditor.Add") })] }), httpHeaders.map((header, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "text", value: header.key, onChange: (e) => updateHeader(i, "key", e.target.value), placeholder: t("customactioneditor.HeaderName"), className: "flex-1 bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent" }), _jsx("input", { type: "text", value: header.value, onChange: (e) => updateHeader(i, "value", e.target.value), placeholder: t("customactioneditor.valueOrParam"), className: "flex-1 bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent" }), _jsx("button", { type: "button", onClick: () => removeHeader(i), className: "px-2 text-muted hover:text-txt cursor-pointer", children: t("bugreportmodal.Times") })] }, `${header.key}:${header.value}`)))] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-muted", children: t("customactioneditor.BodyTemplateOptio") }), _jsx("textarea", { value: httpBody, onChange: (e) => {
+                                                setHttpBody(e.target.value);
+                                                setFormError("");
+                                            }, placeholder: '{"key": "{{param}}"}', rows: 3, className: "bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent resize-none font-mono" })] })] })), handlerType === "shell" && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-muted", children: t("customactioneditor.CommandTemplate") }), _jsx("textarea", { value: shellCommand, onChange: (e) => {
+                                        setShellCommand(e.target.value);
+                                        setFormError("");
+                                    }, placeholder: t("customactioneditor.echoMessage"), rows: 4, className: "bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent resize-none font-mono" }), _jsxs("span", { className: "text-xs text-muted/70", children: [t("streamsettings.Use"), " ", `{{paramName}}`, " ", t("customactioneditor.forParameterSubsti")] })] })), handlerType === "code" && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-muted", children: t("customactioneditor.JavaScriptCode") }), _jsx("textarea", { value: code, onChange: (e) => {
+                                        setCode(e.target.value);
+                                        setFormError("");
+                                    }, placeholder: t("customactioneditor.AvailableParams"), rows: 6, className: "bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent resize-none font-mono" })] })), _jsxs("div", { className: "flex flex-col gap-2 border-t border-border pt-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs text-muted", children: t("customactioneditor.Parameters") }), _jsx("button", { type: "button", onClick: addParameter, className: "text-xs text-txt hover:opacity-80 cursor-pointer", children: t("customactioneditor.AddParameter") })] }), parameters.map((param, i) => (_jsxs("div", { className: "flex gap-2 items-start", children: [_jsx("input", { type: "text", value: param.name, onChange: (e) => updateParameter(i, "name", e.target.value), placeholder: t("customactioneditor.paramName"), className: "w-32 bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent" }), _jsx("input", { type: "text", value: param.description, onChange: (e) => updateParameter(i, "description", e.target.value), placeholder: t("skillsview.Description"), className: "flex-1 bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent" }), _jsxs("span", { className: "flex items-center gap-1 text-xs text-muted cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: param.required, onChange: (e) => updateParameter(i, "required", e.target.checked), className: "cursor-pointer" }), t("customactioneditor.Required")] }), _jsx("button", { type: "button", onClick: () => removeParameter(i), className: "px-2 text-muted hover:text-txt cursor-pointer", children: t("bugreportmodal.Times") })] }, `${param.name}-${i}`)))] }), _jsxs("div", { className: "flex flex-col gap-2 border-t border-border pt-3", children: [_jsxs("button", { type: "button", onClick: () => setTestExpanded((expanded) => !expanded), className: "flex items-center justify-between text-xs text-muted hover:text-txt cursor-pointer", children: [_jsx("span", { children: t("customactioneditor.TestAction") }), _jsx("span", { children: testExpanded ? (_jsx(ChevronDown, { className: "w-3 h-3" })) : (_jsx(ChevronRight, { className: "w-3 h-3" })) })] }), testExpanded && (_jsxs("div", { className: "flex flex-col gap-2 pl-2 border-l-2 border-border", children: [parameters
+                                            .filter((p) => p.name.trim())
+                                            .map((param) => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-muted", children: param.name }), _jsx("input", { type: "text", value: testParams[param.name] || "", onChange: (e) => setTestParams({
+                                                        ...testParams,
+                                                        [param.name]: e.target.value,
+                                                    }), placeholder: param.description || "value", className: "bg-surface border border-border px-2 py-1.5 text-sm text-txt placeholder:text-muted/50 outline-none focus:border-accent" })] }, param.name))), testResult && (_jsxs("div", { className: "bg-surface border border-border p-2 text-xs font-mono", children: [testResult.error && (_jsxs("div", { className: "text-red-400", children: [t("customactioneditor.Error"), " ", testResult.error] })), testResult.output && (_jsx("pre", { className: "text-txt whitespace-pre-wrap", children: testResult.output })), testResult.duration !== undefined && (_jsxs("div", { className: "text-muted mt-1", children: [t("customactioneditor.Duration"), " ", testResult.duration, "ms"] }))] }))] }))] })] }), _jsxs("div", { className: "flex justify-end gap-2 px-5 py-3 border-t border-border", children: [testExpanded && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleTest, disabled: testing || !action?.id, children: testing ? "Testing..." : "Test" })), _jsx(Button, { variant: "outline", size: "sm", onClick: onClose, children: t("onboarding.cancel") }), _jsx(Button, { variant: "default", size: "sm", onClick: () => void handleSave(), disabled: saving, children: saving ? "Saving..." : "Save" })] })] }) }));
+}

package/dist/components/CustomActionsPanel.d.ts

@@ -0,0 +1,9 @@
+import { type CustomActionDef } from "@elizaos/app-core/api";
+interface CustomActionsPanelProps {
+    open: boolean;
+    onClose: () => void;
+    onOpenEditor: (action?: CustomActionDef | null) => void;
+}
+export declare function CustomActionsPanel({ open, onClose, onOpenEditor, }: CustomActionsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CustomActionsPanel.d.ts.map

package/dist/components/CustomActionsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomActionsPanel.d.ts","sourceRoot":"","sources":["../../src/components/CustomActionsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAU,MAAM,uBAAuB,CAAC;AAMrE,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,MAAM,CAAC,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;CACzD;AAcD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,YAAY,GACb,EAAE,uBAAuB,2CAmQzB"}