@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

package/src/components/CustomActionsPanel.tsx

@@ -1,288 +0,0 @@
-import { type CustomActionDef, 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";
-
-interface CustomActionsPanelProps {
-  open: boolean;
-  onClose: () => void;
-  onOpenEditor: (action?: CustomActionDef | null) => void;
-}
-
-const HANDLER_TYPE_COLORS: Record<string, string> = {
-  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: Record<string, string> = {
-  http: "HTTP",
-  shell: "Shell",
-  code: "Code",
-};
-
-export function CustomActionsPanel({
-  open,
-  onClose,
-  onOpenEditor,
-}: CustomActionsPanelProps) {
-  const { t } = useApp();
-  const [actions, setActions] = useState<CustomActionDef[]>([]);
-  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: CustomActionDef) => {
-    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: CustomActionDef) => {
-    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: CustomActionDef) => {
-    onOpenEditor(action);
-  };
-
-  const handleCreate = () => {
-    onOpenEditor(null);
-  };
-
-  return (
-    <div
-      className={`border-l border-border bg-card flex flex-col transition-all duration-200 ${
-        open ? "w-80" : "w-0 overflow-hidden"
-      }`}
-    >
-      {open && (
-        <>
-          {/* Header */}
-          <div className="flex items-start justify-between p-4 border-b border-border">
-            <div>
-              <h2 className="text-sm font-semibold text-txt">
-                {t("customactionspanel.CustomActions")}
-              </h2>
-              <p className="text-xs text-muted mt-0.5">
-                {actions.length} {t("customactionspanel.action")}
-                {actions.length === 1 ? "" : "s"} · {enabledCount}{" "}
-                {t("customactionspanel.enabled")}
-              </p>
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={onClose}
-              className="text-muted hover:text-txt h-7 w-7"
-              aria-label="Close panel"
-            >
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-              >
-                <title>{t("conversations.closePanel")}</title>
-                <path d="M12 4L4 12M4 4l8 8" />
-              </svg>
-            </Button>
-          </div>
-
-          <div className="space-y-3 p-3 border-b border-border">
-            <Button
-              variant="default"
-              size="sm"
-              onClick={handleCreate}
-              className="w-full px-3 py-2 h-9 text-sm font-medium shadow-sm"
-            >
-              {t("customactionspanel.NewCustomAction")}
-            </Button>
-
-            <div className="relative">
-              <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"
-              />
-            </div>
-
-            {error && (
-              <div className="text-xs text-danger bg-danger/10 border border-danger/30 px-2 py-1 rounded">
-                {error}
-              </div>
-            )}
-          </div>
-
-          {/* Action List */}
-          <div className="flex-1 overflow-y-auto p-3 space-y-2">
-            {loading ? (
-              <div className="text-center text-muted text-xs py-8">
-                {t("customactionspanel.LoadingYourActions")}
-              </div>
-            ) : filteredActions.length === 0 ? (
-              <div className="text-center text-muted text-xs py-8">
-                {search
-                  ? "No actions match this search."
-                  : "No custom actions yet. Create one to get started."}
-              </div>
-            ) : (
-              filteredActions.map((action) => (
-                <div
-                  key={action.id}
-                  className="border border-border bg-surface rounded p-2 space-y-2"
-                >
-                  <div className="flex items-start justify-between gap-2">
-                    <div className="min-w-0">
-                      <div className="font-semibold text-xs text-txt truncate">
-                        {action.name}
-                      </div>
-                      <p className="text-[10px] text-muted mt-0.5">
-                        {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",
-                            )
-                          : ""}
-                      </p>
-                    </div>
-
-                    <span
-                      className={`text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap ${
-                        HANDLER_TYPE_COLORS[action.handler.type] ||
-                        "bg-surface text-muted"
-                      }`}
-                    >
-                      {HANDLER_TYPE_NAMES[action.handler.type] ??
-                        action.handler.type}
-                    </span>
-                  </div>
-
-                  {action.description && (
-                    <p className="text-xs text-muted line-clamp-2 break-words">
-                      {action.description}
-                    </p>
-                  )}
-
-                  <div className="flex items-center gap-2 pt-1 border-t border-border">
-                    <label className="flex items-center gap-1 cursor-pointer text-xs text-muted">
-                      <input
-                        type="checkbox"
-                        checked={action.enabled}
-                        onChange={() => handleToggleEnabled(action)}
-                        className="w-3 h-3 cursor-pointer accent-accent"
-                      />
-                      <span>{t("customactionsview.Enabled")}</span>
-                    </label>
-
-                    <div className="ml-auto flex items-center gap-2">
-                      <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")}
-                      >
-                        {t("triggersview.Edit")}
-                      </Button>
-                      <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")}
-                      >
-                        {t("triggersview.Delete")}
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

package/src/components/CustomActionsView.tsx

@@ -1,325 +0,0 @@
-import { type CustomActionDef, 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<CustomActionDef[]>([]);
-  const [search, setSearch] = useState("");
-  const [editorOpen, setEditorOpen] = useState(false);
-  const [editingAction, setEditingAction] = useState<CustomActionDef | null>(
-    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: CustomActionDef) => {
-    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: string, enabled: boolean) => {
-      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: string, name: string) => {
-    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: React.ChangeEvent<HTMLInputElement>) => {
-      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: string) => {
-    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 (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-muted">
-          {t("customactionsview.LoadingActions")}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      data-testid="custom-actions-view"
-      className="flex flex-col h-full p-4 space-y-4"
-    >
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <label className="px-3 py-1.5 text-sm border border-border bg-surface text-muted rounded cursor-pointer hover:bg-card transition-colors">
-            {t("knowledgeview.Import")}
-            <input
-              type="file"
-              accept="application/json"
-              onChange={handleImport}
-              className="hidden"
-            />
-          </label>
-          <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"
-          >
-            {t("customactionsview.Export")}
-          </Button>
-          <Button
-            variant="default"
-            size="sm"
-            onClick={handleCreate}
-            className="px-3 py-1.5 h-8 text-sm shadow-sm font-medium tracking-wide"
-          >
-            {t("customactionsview.CreateAction")}
-          </Button>
-        </div>
-      </div>
-
-      {/* Search Bar */}
-      <div className="flex items-center">
-        <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"
-        />
-      </div>
-
-      {/* Actions Grid */}
-      {filteredActions.length === 0 ? (
-        <div className="flex flex-col items-center justify-center flex-1 space-y-4">
-          <p className="text-muted text-center">
-            {search
-              ? "No actions match your search."
-              : "No custom actions yet. Create one to get started."}
-          </p>
-          {!search && (
-            <Button
-              variant="default"
-              size="sm"
-              onClick={handleCreate}
-              className="px-4 py-2 text-sm shadow-sm font-medium tracking-wide"
-            >
-              {t("customactionsview.CreateAction")}
-            </Button>
-          )}
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 overflow-auto">
-          {filteredActions.map((action) => (
-            <div
-              key={action.id}
-              className="border border-border bg-card rounded p-4 space-y-3 cursor-pointer hover:border-accent/50 transition-colors"
-            >
-              <button
-                type="button"
-                className="w-full bg-transparent border-0 p-0 m-0 text-left cursor-pointer"
-                onClick={() => handleEdit(action)}
-              >
-                {/* Name and Badge */}
-                <div className="flex items-start justify-between gap-2">
-                  <h3 className="font-bold text-sm text-txt flex-1 break-words">
-                    {action.name}
-                  </h3>
-                  <span
-                    className={`px-2 py-0.5 text-xs rounded ${getBadgeColor(
-                      action.handler.type,
-                    )}`}
-                  >
-                    {action.handler.type}
-                  </span>
-                </div>
-
-                {/* Description */}
-                {action.description && (
-                  <p className="text-xs text-muted line-clamp-3">
-                    {action.description}
-                  </p>
-                )}
-
-                {/* Parameters Count */}
-                <p className="text-xs text-muted">
-                  {action.parameters?.length || 0}{" "}
-                  {t("customactionsview.parameter")}
-                  {action.parameters?.length === 1 ? "" : "s"}
-                </p>
-              </button>
-
-              {/* Actions Row */}
-              <div className="flex items-center justify-between pt-2 border-t border-border">
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={action.enabled}
-                    onChange={(e) =>
-                      handleToggleEnabled(action.id, e.target.checked)
-                    }
-                    className="cursor-pointer"
-                  />
-                  <span className="text-xs text-muted">
-                    {t("customactionsview.Enabled")}
-                  </span>
-                </label>
-
-                <div className="flex items-center gap-2">
-                  <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"
-                  >
-                    {t("triggersview.Edit")}
-                  </Button>
-                  <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"
-                  >
-                    {t("triggersview.Delete")}
-                  </Button>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Editor Modal */}
-      {editorOpen && (
-        <CustomActionEditor
-          open={editorOpen}
-          action={editingAction}
-          onClose={handleEditorClose}
-          onSave={handleEditorSave}
-        />
-      )}
-    </div>
-  );
-}

package/src/components/DatabasePageView.tsx

@@ -1,55 +0,0 @@
-/**
- * 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" as const,
-      label: t("databasepageview.Tables"),
-    },
-    {
-      id: "media" as const,
-      label: t("databasepageview.Media"),
-    },
-    {
-      id: "vectors" as const,
-      label: t("databasepageview.Vectors"),
-    },
-  ];
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Sub-tab bar */}
-      <div className="flex gap-1 border-b border-[var(--border)] mb-5">
-        {dbTabs.map((tab) => (
-          <button
-            type="button"
-            key={tab.id}
-            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)}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Sub-tab content */}
-      <div className="flex-1 min-h-0">
-        {databaseSubTab === "tables" && <DatabaseView />}
-        {databaseSubTab === "media" && <MediaGalleryView />}
-        {databaseSubTab === "vectors" && <VectorBrowserView />}
-      </div>
-    </div>
-  );
-}