Commit inicial - upload de todos os arquivos da pasta
This commit is contained in:
237
frontend/app/agents/dialogs/CustomMCPDialog.tsx
Normal file
237
frontend/app/agents/dialogs/CustomMCPDialog.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
/*
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
│ @author: Davidson Gomes │
|
||||
│ @file: /app/agents/dialogs/CustomMCPDialog.tsx │
|
||||
│ Developed by: Davidson Gomes │
|
||||
│ Creation date: May 13, 2025 │
|
||||
│ Contact: contato@evolution-api.com │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ @copyright © Evolution API 2025. All rights reserved. │
|
||||
│ Licensed under the Apache License, Version 2.0 │
|
||||
│ │
|
||||
│ You may not use this file except in compliance with the License. │
|
||||
│ You may obtain a copy of the License at │
|
||||
│ │
|
||||
│ http://www.apache.org/licenses/LICENSE-2.0 │
|
||||
│ │
|
||||
│ Unless required by applicable law or agreed to in writing, software │
|
||||
│ distributed under the License is distributed on an "AS IS" BASIS, │
|
||||
│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. │
|
||||
│ See the License for the specific language governing permissions and │
|
||||
│ limitations under the License. │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ @important │
|
||||
│ For any future changes to the code in this file, it is recommended to │
|
||||
│ include, together with the modification, the information of the developer │
|
||||
│ who changed it and the date of modification. │
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
*/
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { X, Plus } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface CustomMCPHeader {
|
||||
id: string;
|
||||
key: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface CustomMCPServer {
|
||||
url: string;
|
||||
headers: Record<string, string>;
|
||||
}
|
||||
|
||||
interface CustomMCPDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSave: (customMCP: CustomMCPServer) => void;
|
||||
initialCustomMCP?: CustomMCPServer | null;
|
||||
clientId: string;
|
||||
}
|
||||
|
||||
export function CustomMCPDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
onSave,
|
||||
initialCustomMCP = null,
|
||||
clientId,
|
||||
}: CustomMCPDialogProps) {
|
||||
const [customMCP, setCustomMCP] = useState<Partial<CustomMCPServer>>({
|
||||
url: "",
|
||||
headers: {},
|
||||
});
|
||||
|
||||
const [headersList, setHeadersList] = useState<CustomMCPHeader[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
if (initialCustomMCP) {
|
||||
setCustomMCP(initialCustomMCP);
|
||||
const headersList = Object.entries(initialCustomMCP.headers || {}).map(
|
||||
([key, value], index) => ({
|
||||
id: `header-${index}`,
|
||||
key,
|
||||
value,
|
||||
})
|
||||
);
|
||||
setHeadersList(headersList);
|
||||
} else {
|
||||
setCustomMCP({ url: "", headers: {} });
|
||||
setHeadersList([]);
|
||||
}
|
||||
}
|
||||
}, [open, initialCustomMCP]);
|
||||
|
||||
const handleAddHeader = () => {
|
||||
setHeadersList([
|
||||
...headersList,
|
||||
{ id: `header-${Date.now()}`, key: "", value: "" },
|
||||
]);
|
||||
};
|
||||
|
||||
const handleRemoveHeader = (id: string) => {
|
||||
setHeadersList(headersList.filter((header) => header.id !== id));
|
||||
};
|
||||
|
||||
const handleHeaderChange = (
|
||||
id: string,
|
||||
field: "key" | "value",
|
||||
value: string
|
||||
) => {
|
||||
setHeadersList(
|
||||
headersList.map((header) =>
|
||||
header.id === id ? { ...header, [field]: value } : header
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!customMCP.url) return;
|
||||
|
||||
const headersObject: Record<string, string> = {};
|
||||
headersList.forEach((header) => {
|
||||
if (header.key.trim()) {
|
||||
headersObject[header.key] = header.value;
|
||||
}
|
||||
});
|
||||
|
||||
onSave({
|
||||
url: customMCP.url,
|
||||
headers: headersObject,
|
||||
});
|
||||
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-hidden flex flex-col bg-[#1a1a1a] border-[#333]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-white">
|
||||
Configure Custom MCP
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-neutral-400">
|
||||
Configure the URL and HTTP headers for the custom MCP.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="custom-mcp-url" className="text-neutral-300">
|
||||
MCP URL
|
||||
</Label>
|
||||
<Input
|
||||
id="custom-mcp-url"
|
||||
value={customMCP.url || ""}
|
||||
onChange={(e) =>
|
||||
setCustomMCP({
|
||||
...customMCP,
|
||||
url: e.target.value,
|
||||
})
|
||||
}
|
||||
className="bg-[#222] border-[#444] text-white"
|
||||
placeholder="https://meu-servidor-mcp.com/api"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-medium text-white">HTTP Headers</h3>
|
||||
<div className="border border-[#444] rounded-md p-3 bg-[#222]">
|
||||
{headersList.map((header) => (
|
||||
<div
|
||||
key={header.id}
|
||||
className="grid grid-cols-5 items-center gap-2 mb-2"
|
||||
>
|
||||
<Input
|
||||
value={header.key}
|
||||
onChange={(e) =>
|
||||
handleHeaderChange(header.id, "key", e.target.value)
|
||||
}
|
||||
className="col-span-2 bg-[#333] border-[#444] text-white"
|
||||
placeholder="Header Name"
|
||||
/>
|
||||
<Input
|
||||
value={header.value}
|
||||
onChange={(e) =>
|
||||
handleHeaderChange(header.id, "value", e.target.value)
|
||||
}
|
||||
className="col-span-2 bg-[#333] border-[#444] text-white"
|
||||
placeholder="Header Value"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveHeader(header.id)}
|
||||
className="col-span-1 h-8 text-red-500 hover:text-red-400 hover:bg-[#444]"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleAddHeader}
|
||||
className="w-full mt-2 border-emerald-400 text-emerald-400 hover:bg-emerald-400/10 bg-[#222] hover:text-emerald-400"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-1" /> Add Header
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="p-4 pt-2 border-t border-[#333]">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
className="bg-emerald-400 text-black hover:bg-[#00cc7d]"
|
||||
disabled={!customMCP.url}
|
||||
>
|
||||
{initialCustomMCP?.url ? "Save Custom MCP" : "Add Custom MCP"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user