79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { TabsContent } from "@/components/ui/tabs";
|
|
import { Root } from "@modelcontextprotocol/sdk/types.js";
|
|
import { Plus, Minus, Save } from "lucide-react";
|
|
|
|
const RootsTab = ({
|
|
roots,
|
|
setRoots,
|
|
onRootsChange,
|
|
}: {
|
|
roots: Root[];
|
|
setRoots: React.Dispatch<React.SetStateAction<Root[]>>;
|
|
onRootsChange: () => void;
|
|
}) => {
|
|
const addRoot = () => {
|
|
setRoots((currentRoots) => [...currentRoots, { uri: "file://", name: "" }]);
|
|
};
|
|
|
|
const removeRoot = (index: number) => {
|
|
setRoots((currentRoots) => currentRoots.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const updateRoot = (index: number, field: keyof Root, value: string) => {
|
|
setRoots((currentRoots) =>
|
|
currentRoots.map((root, i) =>
|
|
i === index ? { ...root, [field]: value } : root,
|
|
),
|
|
);
|
|
};
|
|
|
|
const handleSave = () => {
|
|
onRootsChange();
|
|
};
|
|
|
|
return (
|
|
<TabsContent value="roots" className="space-y-4">
|
|
<Alert>
|
|
<AlertDescription>
|
|
Configure the root directories that the server can access
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
{roots.map((root, index) => (
|
|
<div key={index} className="flex gap-2 items-center">
|
|
<Input
|
|
placeholder="file:// URI"
|
|
value={root.uri}
|
|
onChange={(e) => updateRoot(index, "uri", e.target.value)}
|
|
className="flex-1"
|
|
/>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
onClick={() => removeRoot(index)}
|
|
aria-label="Remove root"
|
|
>
|
|
<Minus className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={addRoot}>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Root
|
|
</Button>
|
|
<Button onClick={handleSave}>
|
|
<Save className="h-4 w-4 mr-2" />
|
|
Save Changes
|
|
</Button>
|
|
</div>
|
|
</TabsContent>
|
|
);
|
|
};
|
|
|
|
export default RootsTab;
|