@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/CustomActionsPanel.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { client } from "@elizaos/app-core/api";
+import { useApp } from "@elizaos/app-core/state";
+import { confirmDesktopAction } from "@elizaos/app-core/utils";
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
+const HANDLER_TYPE_COLORS = {
+    http: "bg-blue-500/20 text-blue-400",
+    shell: "bg-green-500/20 text-green-400",
+    code: "bg-purple-500/20 text-purple-400",
+};
+const HANDLER_TYPE_NAMES = {
+    http: "HTTP",
+    shell: "Shell",
+    code: "Code",
+};
+export function CustomActionsPanel({ open, onClose, onOpenEditor, }) {
+    const { t } = useApp();
+    const [actions, setActions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [search, setSearch] = useState("");
+    const [error, setError] = useState("");
+    const loadActions = useCallback(async () => {
+        try {
+            setLoading(true);
+            setError("");
+            const result = await client.listCustomActions();
+            setActions(result || []);
+        }
+        catch (err) {
+            console.error("Failed to load custom actions:", err);
+            setError("Failed to load custom actions. Please retry.");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        if (open) {
+            void loadActions();
+        }
+    }, [open, loadActions]);
+    const filteredActions = useMemo(() => {
+        const searchTerm = search.trim().toLowerCase();
+        if (!searchTerm)
+            return actions;
+        return actions.filter((action) => {
+            const hasName = action.name.toLowerCase().includes(searchTerm);
+            const hasDescription = typeof action.description === "string" &&
+                action.description.toLowerCase().includes(searchTerm);
+            const hasAlias = (action.similes ?? []).some((alias) => alias.toLowerCase().includes(searchTerm));
+            return hasName || hasDescription || hasAlias;
+        });
+    }, [actions, search]);
+    const enabledCount = useMemo(() => actions.filter((action) => action.enabled).length, [actions]);
+    const handleToggleEnabled = async (action) => {
+        try {
+            const next = !action.enabled;
+            await client.updateCustomAction(action.id, {
+                enabled: next,
+            });
+            setActions((prev) => prev.map((item) => item.id === action.id
+                ? {
+                    ...item,
+                    enabled: next,
+                }
+                : item));
+        }
+        catch (err) {
+            console.error("Failed to toggle action:", err);
+            setError("Failed to update this action. Try again.");
+        }
+    };
+    const handleDelete = async (action) => {
+        const confirmed = await confirmDesktopAction({
+            title: "Delete Custom Action",
+            message: `Are you sure you want to delete "${action.name}"?`,
+            confirmLabel: "Delete",
+            cancelLabel: "Cancel",
+            type: "warning",
+        });
+        if (!confirmed) {
+            return;
+        }
+        try {
+            await client.deleteCustomAction(action.id);
+            setActions((prev) => prev.filter((item) => item.id !== action.id));
+        }
+        catch (err) {
+            console.error("Failed to delete action:", err);
+            setError("Failed to delete action. Try again.");
+        }
+    };
+    const handleEdit = (action) => {
+        onOpenEditor(action);
+    };
+    const handleCreate = () => {
+        onOpenEditor(null);
+    };
+    return (_jsx("div", { className: `border-l border-border bg-card flex flex-col transition-all duration-200 ${open ? "w-80" : "w-0 overflow-hidden"}`, children: open && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-start justify-between p-4 border-b border-border", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold text-txt", children: t("customactionspanel.CustomActions") }), _jsxs("p", { className: "text-xs text-muted mt-0.5", children: [actions.length, " ", t("customactionspanel.action"), actions.length === 1 ? "" : "s", " \u00B7 ", enabledCount, " ", t("customactionspanel.enabled")] })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: onClose, className: "text-muted hover:text-txt h-7 w-7", "aria-label": "Close panel", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [_jsx("title", { children: t("conversations.closePanel") }), _jsx("path", { d: "M12 4L4 12M4 4l8 8" })] }) })] }), _jsxs("div", { className: "space-y-3 p-3 border-b border-border", children: [_jsx(Button, { variant: "default", size: "sm", onClick: handleCreate, className: "w-full px-3 py-2 h-9 text-sm font-medium shadow-sm", children: t("customactionspanel.NewCustomAction") }), _jsx("div", { className: "relative", children: _jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("customactionspanel.SearchByNameDesc"), className: "w-full h-8 bg-surface text-xs placeholder:text-muted/50 shadow-sm focus-visible:ring-1 focus-visible:ring-accent" }) }), error && (_jsx("div", { className: "text-xs text-danger bg-danger/10 border border-danger/30 px-2 py-1 rounded", children: error }))] }), _jsx("div", { className: "flex-1 overflow-y-auto p-3 space-y-2", children: loading ? (_jsx("div", { className: "text-center text-muted text-xs py-8", children: t("customactionspanel.LoadingYourActions") })) : filteredActions.length === 0 ? (_jsx("div", { className: "text-center text-muted text-xs py-8", children: search
+                            ? "No actions match this search."
+                            : "No custom actions yet. Create one to get started." })) : (filteredActions.map((action) => (_jsxs("div", { className: "border border-border bg-surface rounded p-2 space-y-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-semibold text-xs text-txt truncate", children: action.name }), _jsxs("p", { className: "text-[10px] text-muted mt-0.5", children: [action.parameters?.length || 0, " ", t("customactionsview.parameter"), (action.parameters?.length || 0) === 1 ? "" : "s", action.similes?.length
+                                                        ? ` • ${action.similes.length} alias`.concat(action.similes.length === 1 ? "" : "es")
+                                                        : ""] })] }), _jsx("span", { className: `text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap ${HANDLER_TYPE_COLORS[action.handler.type] ||
+                                            "bg-surface text-muted"}`, children: HANDLER_TYPE_NAMES[action.handler.type] ??
+                                            action.handler.type })] }), action.description && (_jsx("p", { className: "text-xs text-muted line-clamp-2 break-words", children: action.description })), _jsxs("div", { className: "flex items-center gap-2 pt-1 border-t border-border", children: [_jsxs("label", { className: "flex items-center gap-1 cursor-pointer text-xs text-muted", children: [_jsx("input", { type: "checkbox", checked: action.enabled, onChange: () => handleToggleEnabled(action), className: "w-3 h-3 cursor-pointer accent-accent" }), _jsx("span", { children: t("customactionsview.Enabled") })] }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleEdit(action), className: "h-6 px-2 text-xs text-txt hover:text-txt/80 hover:bg-accent/10", title: t("customactionspanel.EditAction"), children: t("triggersview.Edit") }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleDelete(action), className: "h-6 px-2 text-xs text-danger hover:text-danger/80 hover:bg-danger/10", title: t("customactionspanel.DeleteAction"), children: t("triggersview.Delete") })] })] })] }, action.id)))) })] })) }));
+}

package/components/CustomActionsView.d.ts

@@ -0,0 +1,2 @@
+export declare function CustomActionsView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CustomActionsView.d.ts.map

package/components/CustomActionsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomActionsView.d.ts","sourceRoot":"","sources":["../../src/components/CustomActionsView.tsx"],"names":[],"mappings":"AAUA,wBAAgB,iBAAiB,4CA0ThC"}

package/components/CustomActionsView.js

@@ -0,0 +1,134 @@
+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 { alertDesktopMessage, confirmDesktopAction, } from "@elizaos/app-core/utils";
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useEffect, useState } from "react";
+import { CustomActionEditor } from "./CustomActionEditor";
+export function CustomActionsView() {
+    const { t } = useApp();
+    const [actions, setActions] = useState([]);
+    const [search, setSearch] = useState("");
+    const [editorOpen, setEditorOpen] = useState(false);
+    const [editingAction, setEditingAction] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const loadActions = useCallback(async () => {
+        try {
+            setLoading(true);
+            const result = await client.listCustomActions();
+            setActions(result);
+        }
+        catch (error) {
+            console.error("Failed to load custom actions:", error);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        loadActions();
+    }, [loadActions]);
+    const handleCreate = useCallback(() => {
+        setEditingAction(null);
+        setEditorOpen(true);
+    }, []);
+    const handleEdit = useCallback((action) => {
+        setEditingAction(action);
+        setEditorOpen(true);
+    }, []);
+    const handleEditorClose = useCallback(() => {
+        setEditorOpen(false);
+        setEditingAction(null);
+    }, []);
+    const handleEditorSave = useCallback(async () => {
+        setEditorOpen(false);
+        setEditingAction(null);
+        await loadActions();
+    }, [loadActions]);
+    const handleToggleEnabled = useCallback(async (id, enabled) => {
+        try {
+            await client.updateCustomAction(id, { enabled });
+            setActions((prev) => prev.map((action) => action.id === id ? { ...action, enabled } : action));
+        }
+        catch (error) {
+            console.error("Failed to toggle action:", error);
+        }
+    }, []);
+    const handleDelete = useCallback(async (id, name) => {
+        const confirmed = await confirmDesktopAction({
+            title: "Delete Custom Action",
+            message: `Are you sure you want to delete "${name}"?`,
+            confirmLabel: "Delete",
+            cancelLabel: "Cancel",
+            type: "warning",
+        });
+        if (!confirmed) {
+            return;
+        }
+        try {
+            await client.deleteCustomAction(id);
+            setActions((prev) => prev.filter((action) => action.id !== id));
+        }
+        catch (error) {
+            console.error("Failed to delete action:", error);
+        }
+    }, []);
+    const handleImport = useCallback(async (event) => {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        try {
+            const text = await file.text();
+            const imported = JSON.parse(text);
+            const actionsToImport = Array.isArray(imported) ? imported : [imported];
+            for (const action of actionsToImport) {
+                await client.createCustomAction(action);
+            }
+            await loadActions();
+            event.target.value = "";
+        }
+        catch (error) {
+            console.error("Failed to import actions:", error);
+            await alertDesktopMessage({
+                title: "Import Failed",
+                message: "Failed to import actions. Please check the file format.",
+                type: "error",
+            });
+        }
+    }, [loadActions]);
+    const handleExport = useCallback(() => {
+        const dataStr = JSON.stringify(actions, null, 2);
+        const dataBlob = new Blob([dataStr], { type: "application/json" });
+        const url = URL.createObjectURL(dataBlob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "custom-actions.json";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    }, [actions]);
+    const filteredActions = actions.filter((action) => {
+        const searchLower = search.toLowerCase();
+        return (action.name.toLowerCase().includes(searchLower) ||
+            action.description?.toLowerCase().includes(searchLower));
+    });
+    const getBadgeColor = (handlerType) => {
+        switch (handlerType) {
+            case "http":
+                return "bg-blue-500/20 text-blue-400";
+            case "shell":
+                return "bg-green-500/20 text-green-400";
+            case "code":
+                return "bg-purple-500/20 text-purple-400";
+            default:
+                return "bg-gray-500/20 text-gray-400";
+        }
+    };
+    if (loading) {
+        return (_jsx("div", { className: "flex items-center justify-center h-full", children: _jsx("div", { className: "text-muted", children: t("customactionsview.LoadingActions") }) }));
+    }
+    return (_jsxs("div", { "data-testid": "custom-actions-view", className: "flex flex-col h-full p-4 space-y-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: "px-3 py-1.5 text-sm border border-border bg-surface text-muted rounded cursor-pointer hover:bg-card transition-colors", children: [t("knowledgeview.Import"), _jsx("input", { type: "file", accept: "application/json", onChange: handleImport, className: "hidden" })] }), _jsx(Button, { variant: "outline", size: "sm", onClick: handleExport, disabled: actions.length === 0, className: "px-3 py-1.5 h-8 text-sm text-muted bg-surface hover:bg-card shadow-sm disabled:opacity-50", children: t("customactionsview.Export") }), _jsx(Button, { variant: "default", size: "sm", onClick: handleCreate, className: "px-3 py-1.5 h-8 text-sm shadow-sm font-medium tracking-wide", children: t("customactionsview.CreateAction") })] }) }), _jsx("div", { className: "flex items-center", children: _jsx(Input, { type: "text", placeholder: t("customactionsview.SearchActionsByNa"), value: search, onChange: (e) => setSearch(e.target.value), className: "flex-1 px-3 py-2 h-9 text-sm bg-surface text-txt shadow-sm" }) }), filteredActions.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center flex-1 space-y-4", children: [_jsx("p", { className: "text-muted text-center", children: search
+                            ? "No actions match your search."
+                            : "No custom actions yet. Create one to get started." }), !search && (_jsx(Button, { variant: "default", size: "sm", onClick: handleCreate, className: "px-4 py-2 text-sm shadow-sm font-medium tracking-wide", children: t("customactionsview.CreateAction") }))] })) : (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 overflow-auto", children: filteredActions.map((action) => (_jsxs("div", { className: "border border-border bg-card rounded p-4 space-y-3 cursor-pointer hover:border-accent/50 transition-colors", children: [_jsxs("button", { type: "button", className: "w-full bg-transparent border-0 p-0 m-0 text-left cursor-pointer", onClick: () => handleEdit(action), children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("h3", { className: "font-bold text-sm text-txt flex-1 break-words", children: action.name }), _jsx("span", { className: `px-2 py-0.5 text-xs rounded ${getBadgeColor(action.handler.type)}`, children: action.handler.type })] }), action.description && (_jsx("p", { className: "text-xs text-muted line-clamp-3", children: action.description })), _jsxs("p", { className: "text-xs text-muted", children: [action.parameters?.length || 0, " ", t("customactionsview.parameter"), action.parameters?.length === 1 ? "" : "s"] })] }), _jsxs("div", { className: "flex items-center justify-between pt-2 border-t border-border", children: [_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: action.enabled, onChange: (e) => handleToggleEnabled(action.id, e.target.checked), className: "cursor-pointer" }), _jsx("span", { className: "text-xs text-muted", children: t("customactionsview.Enabled") })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => handleEdit(action), className: "px-2 py-1 h-6 text-xs bg-surface text-muted hover:bg-card shadow-sm", children: t("triggersview.Edit") }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => handleDelete(action.id, action.name), className: "px-2 py-1 h-6 text-xs bg-surface text-danger border-danger/20 hover:bg-danger/10 shadow-sm", children: t("triggersview.Delete") })] })] })] }, action.id))) })), editorOpen && (_jsx(CustomActionEditor, { open: editorOpen, action: editingAction, onClose: handleEditorClose, onSave: handleEditorSave }))] }));
+}

package/components/DatabasePageView.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Databases page — wrapper with Tables / Media / Vectors sub-tabs.
+ */
+export declare function DatabasePageView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatabasePageView.d.ts.map

package/components/DatabasePageView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatabasePageView.d.ts","sourceRoot":"","sources":["../../src/components/DatabasePageView.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAOH,wBAAgB,gBAAgB,4CA6C/B"}

package/components/DatabasePageView.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Databases page — wrapper with Tables / Media / Vectors sub-tabs.
+ */
+import { useApp } from "../state";
+import { DatabaseView } from "./DatabaseView";
+import { MediaGalleryView } from "./MediaGalleryView";
+import { VectorBrowserView } from "./VectorBrowserView";
+export function DatabasePageView() {
+    const { t, databaseSubTab, setState } = useApp();
+    const dbTabs = [
+        {
+            id: "tables",
+            label: t("databasepageview.Tables"),
+        },
+        {
+            id: "media",
+            label: t("databasepageview.Media"),
+        },
+        {
+            id: "vectors",
+            label: t("databasepageview.Vectors"),
+        },
+    ];
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx("div", { className: "flex gap-1 border-b border-[var(--border)] mb-5", children: dbTabs.map((tab) => (_jsx("button", { type: "button", className: `px-4 py-2 text-[13px] bg-transparent border-0 border-b-2 cursor-pointer transition-colors ${databaseSubTab === tab.id
+                        ? "text-[var(--accent)] font-medium border-b-[var(--accent)]"
+                        : "text-[var(--muted)] border-b-transparent hover:text-[var(--txt)]"}`, onClick: () => setState("databaseSubTab", tab.id), children: tab.label }, tab.id))) }), _jsxs("div", { className: "flex-1 min-h-0", children: [databaseSubTab === "tables" && _jsx(DatabaseView, {}), databaseSubTab === "media" && _jsx(MediaGalleryView, {}), databaseSubTab === "vectors" && _jsx(VectorBrowserView, {})] })] }));
+}

package/components/DatabaseView.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Database View — Supabase-style table browser + SQL editor.
+ *
+ * Two modes:
+ *  - Table browser: sidebar with schema tree, spreadsheet-like data grid
+ *  - SQL editor: code textarea with run button and results grid
+ */
+export declare function DatabaseView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatabaseView.d.ts.map

package/components/DatabaseView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatabaseView.d.ts","sourceRoot":"","sources":["../../src/components/DatabaseView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA4SH,wBAAgB,YAAY,4CA2f3B"}