- {t("agents.fields.mcpServers.emptyDescription")}
-
-
-
+// System Agent Card Component
+interface SystemAgentCardProps {
+ template: SystemAgentTemplate;
+ isSelected: boolean;
+ onSelect: () => void;
+}
+
+function SystemAgentCard({
+ template,
+ isSelected,
+ onSelect,
+}: SystemAgentCardProps) {
+ return (
+
);
}
diff --git a/web/src/components/modals/EditAgentModal.tsx b/web/src/components/modals/EditAgentModal.tsx
index 1d2e90c5..b7fb5c58 100644
--- a/web/src/components/modals/EditAgentModal.tsx
+++ b/web/src/components/modals/EditAgentModal.tsx
@@ -3,8 +3,19 @@ import { Input } from "@/components/base/Input";
import PublishAgentModal from "@/components/features/PublishAgentModal";
import { useXyzen } from "@/store";
import type { Agent } from "@/types/agents";
-import { Button, Field, Label } from "@headlessui/react";
-import { PlusIcon, SparklesIcon } from "@heroicons/react/24/outline";
+import {
+ Button,
+ Disclosure,
+ DisclosureButton,
+ DisclosurePanel,
+ Field,
+ Label,
+} from "@headlessui/react";
+import {
+ ChevronDownIcon,
+ PlusIcon,
+ SparklesIcon,
+} from "@heroicons/react/24/outline";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { McpServerItem } from "./McpServerItem";
@@ -27,11 +38,19 @@ const EditAgentModal: React.FC
= ({
const [mcpServerIds, setMcpServerIds] = useState([]);
const [isSaving, setIsSaving] = useState(false);
const [showPublishModal, setShowPublishModal] = useState(false);
+ const [graphConfigJson, setGraphConfigJson] = useState("");
+ const [graphConfigError, setGraphConfigError] = useState(null);
useEffect(() => {
setAgent(agentToEdit);
if (agentToEdit) {
setMcpServerIds(agentToEdit.mcp_servers?.map((s) => s.id) || []);
+ setGraphConfigJson(
+ agentToEdit.graph_config
+ ? JSON.stringify(agentToEdit.graph_config, null, 2)
+ : "",
+ );
+ setGraphConfigError(null);
}
if (isOpen) {
fetchMcpServers();
@@ -54,13 +73,47 @@ const EditAgentModal: React.FC = ({
);
};
+ const handleGraphConfigChange = (value: string) => {
+ setGraphConfigJson(value);
+ if (!value.trim()) {
+ setGraphConfigError(null);
+ return;
+ }
+ try {
+ JSON.parse(value);
+ setGraphConfigError(null);
+ } catch {
+ setGraphConfigError("Invalid JSON format");
+ }
+ };
+
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!agent) return;
if (isSaving) return;
+ if (graphConfigError) {
+ alert("Please fix the JSON configuration errors before saving.");
+ return;
+ }
+
+ // Parse graph_config if provided
+ let parsedGraphConfig: Record | null = null;
+ if (graphConfigJson.trim()) {
+ try {
+ parsedGraphConfig = JSON.parse(graphConfigJson);
+ } catch {
+ alert("Invalid JSON in graph configuration.");
+ return;
+ }
+ }
+
setIsSaving(true);
try {
- await updateAgent({ ...agent, mcp_server_ids: mcpServerIds });
+ await updateAgent({
+ ...agent,
+ mcp_server_ids: mcpServerIds,
+ graph_config: parsedGraphConfig,
+ });
onClose();
} catch (error) {
console.error("Failed to update agent:", error);
@@ -119,6 +172,37 @@ const EditAgentModal: React.FC = ({
className="w-full rounded-sm border-neutral-300 bg-neutral-100 px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-indigo-500 focus:ring-indigo-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
/>
+
+
+ Advanced Configuration (JSON)
+
+
+
+
+ Configure advanced agent behavior using JSON. Leave empty to use
+ defaults.
+
+
+