mirror of https://github.com/kortix-ai/suna.git
Merge pull request #684 from escapade-mckv/mcp-ux
chore(dev): improve mcp configuration UI
This commit is contained in:
Bobbie
GitHub
commit
44b6ed227c
|
|
@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||||
import { Loader2 } from 'lucide-react';
|
import { Loader2, Save, Sparkles } from 'lucide-react';
|
||||||
import { useMCPServerDetails } from '@/hooks/react-query/mcp/use-mcp-servers';
|
import { useMCPServerDetails } from '@/hooks/react-query/mcp/use-mcp-servers';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { MCPConfiguration } from './types';
|
import { MCPConfiguration } from './types';
|
||||||
|
|
@ -49,9 +49,27 @@ export const ConfigDialog: React.FC<ConfigDialogProps> = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
|
<DialogContent className="max-w-5xl max-h-[85vh] overflow-hidden flex flex-col">
|
||||||
<DialogHeader>
|
<DialogHeader className="flex-shrink-0">
|
||||||
<DialogTitle>Configure {server.displayName || server.name}</DialogTitle>
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
{server.iconUrl ? (
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src={server.iconUrl}
|
||||||
|
alt={server.displayName || server.name}
|
||||||
|
className="w-8 h-8 rounded-lg shadow-sm"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent rounded-lg pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shadow-sm border border-primary/20">
|
||||||
|
<Sparkles className="h-4 w-4 text-primary" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<DialogTitle className="text-lg">Configure {server.displayName || server.name}</DialogTitle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
Set up the connection and select which tools to enable for this MCP server.
|
Set up the connection and select which tools to enable for this MCP server.
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
|
|
@ -62,75 +80,95 @@ export const ConfigDialog: React.FC<ConfigDialogProps> = ({
|
||||||
<Loader2 className="h-6 w-6 animate-spin" />
|
<Loader2 className="h-6 w-6 animate-spin" />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<ScrollArea className="flex-1 px-1">
|
<div className="flex-1 min-h-0 grid grid-cols-2 gap-6 px-1">
|
||||||
<div className="space-y-6">
|
<div className="flex flex-col min-h-0">
|
||||||
{serverDetails?.connections?.[0]?.configSchema?.properties && (
|
<h3 className="text-sm font-semibold flex items-center gap-2 mb-4">
|
||||||
<div className="space-y-4">
|
<div className="w-1 h-4 bg-primary rounded-full" />
|
||||||
<h3 className="text-sm font-semibold">Connection Settings</h3>
|
Connection Settings
|
||||||
{Object.entries(serverDetails.connections[0].configSchema.properties).map(([key, schema]: [string, any]) => (
|
</h3>
|
||||||
<div key={key} className="space-y-2">
|
{serverDetails?.connections?.[0]?.configSchema?.properties ? (
|
||||||
<Label htmlFor={key}>
|
<ScrollArea className="border bg-muted/30 rounded-lg p-4 flex-1 min-h-0">
|
||||||
{schema.title || key}
|
<div>
|
||||||
{serverDetails.connections[0].configSchema.required?.includes(key) && (
|
{Object.entries(serverDetails.connections[0].configSchema.properties).map(([key, schema]: [string, any]) => (
|
||||||
<span className="text-destructive ml-1">*</span>
|
<div key={key} className="space-y-2">
|
||||||
)}
|
<Label htmlFor={key} className="text-sm font-medium">
|
||||||
</Label>
|
{schema.title || key}
|
||||||
<Input
|
{serverDetails.connections[0].configSchema.required?.includes(key) && (
|
||||||
id={key}
|
<span className="text-destructive ml-1">*</span>
|
||||||
type={schema.format === 'password' ? 'password' : 'text'}
|
|
||||||
placeholder={schema.description || `Enter ${key}`}
|
|
||||||
value={config[key] || ''}
|
|
||||||
onChange={(e) => setConfig({ ...config, [key]: e.target.value })}
|
|
||||||
/>
|
|
||||||
{schema.description && (
|
|
||||||
<p className="text-xs text-muted-foreground">{schema.description}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{serverDetails?.tools && serverDetails.tools.length > 0 && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<h3 className="text-sm font-semibold">Available Tools</h3>
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{selectedTools.size} of {serverDetails.tools.length} selected
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2 max-h-[300px] overflow-y-auto">
|
|
||||||
{serverDetails.tools.map((tool: any) => (
|
|
||||||
<div
|
|
||||||
key={tool.name}
|
|
||||||
className={cn(
|
|
||||||
"flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors",
|
|
||||||
selectedTools.has(tool.name)
|
|
||||||
? "bg-primary/5 border-primary"
|
|
||||||
: "hover:bg-muted/50"
|
|
||||||
)}
|
|
||||||
onClick={() => handleToolToggle(tool.name)}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={selectedTools.has(tool.name)}
|
|
||||||
onChange={() => {}}
|
|
||||||
className="mt-1"
|
|
||||||
/>
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="font-medium text-sm">{tool.name}</div>
|
|
||||||
{tool.description && (
|
|
||||||
<div className="text-xs text-muted-foreground mt-1">
|
|
||||||
{tool.description}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</Label>
|
||||||
|
<Input
|
||||||
|
id={key}
|
||||||
|
type={schema.format === 'password' ? 'password' : 'text'}
|
||||||
|
placeholder={schema.description || `Enter ${key}`}
|
||||||
|
value={config[key] || ''}
|
||||||
|
onChange={(e) => setConfig({ ...config, [key]: e.target.value })}
|
||||||
|
className="bg-background"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
) : (
|
||||||
|
<div className="flex-1 flex items-center justify-center text-muted-foreground">
|
||||||
|
<p className="text-sm">No configuration required</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</ScrollArea>
|
|
||||||
|
<div className="flex flex-col min-h-0">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h3 className="text-sm font-semibold flex items-center gap-2">
|
||||||
|
<div className="w-1 h-4 bg-primary rounded-full" />
|
||||||
|
Available Tools
|
||||||
|
</h3>
|
||||||
|
{serverDetails?.tools && serverDetails.tools.length > 0 && (
|
||||||
|
<span className="text-xs text-muted-foreground bg-muted/50 px-2 py-1 rounded-full">
|
||||||
|
{selectedTools.size} of {serverDetails.tools.length} selected
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{serverDetails?.tools && serverDetails.tools.length > 0 ? (
|
||||||
|
<ScrollArea className="-mt-1 border bg-muted/30 rounded-lg p-4 flex-1 min-h-0">
|
||||||
|
<div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{serverDetails.tools.map((tool: any) => (
|
||||||
|
<div
|
||||||
|
key={tool.name}
|
||||||
|
className={cn(
|
||||||
|
"flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-all duration-200",
|
||||||
|
selectedTools.has(tool.name)
|
||||||
|
? "bg-primary/10 border-primary/30 shadow-sm"
|
||||||
|
: "hover:bg-muted/30 border-border/50 hover:border-border"
|
||||||
|
)}
|
||||||
|
onClick={() => handleToolToggle(tool.name)}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={selectedTools.has(tool.name)}
|
||||||
|
onChange={() => {}}
|
||||||
|
className="mt-1 accent-primary"
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="font-medium text-sm">{tool.name}</div>
|
||||||
|
{tool.description && (
|
||||||
|
<div className="text-xs text-muted-foreground mt-1">
|
||||||
|
{tool.description}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
) : (
|
||||||
|
<div className="flex-1 flex items-center justify-center text-muted-foreground">
|
||||||
|
<p className="text-sm">No tools available</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
|
|
@ -140,7 +178,9 @@ export const ConfigDialog: React.FC<ConfigDialogProps> = ({
|
||||||
<Button
|
<Button
|
||||||
onClick={handleSave}
|
onClick={handleSave}
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
|
className="bg-primary hover:bg-primary/90"
|
||||||
>
|
>
|
||||||
|
<Save className="h-4 w-4" />
|
||||||
Save Configuration
|
Save Configuration
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
|
|
|
||||||
|
|
@ -273,7 +273,7 @@ export function Navbar() {
|
||||||
href="/auth"
|
href="/auth"
|
||||||
className="bg-secondary h-8 flex items-center justify-center text-sm font-normal tracking-wide rounded-full text-primary-foreground dark:text-secondary-foreground w-full px-4 shadow-[inset_0_1px_2px_rgba(255,255,255,0.25),0_3px_3px_-1.5px_rgba(16,24,40,0.06),0_1px_1px_rgba(16,24,40,0.08)] border border-white/[0.12] hover:bg-secondary/80 transition-all ease-out active:scale-95"
|
className="bg-secondary h-8 flex items-center justify-center text-sm font-normal tracking-wide rounded-full text-primary-foreground dark:text-secondary-foreground w-full px-4 shadow-[inset_0_1px_2px_rgba(255,255,255,0.25),0_3px_3px_-1.5px_rgba(16,24,40,0.06),0_1px_1px_rgba(16,24,40,0.08)] border border-white/[0.12] hover:bg-secondary/80 transition-all ease-out active:scale-95"
|
||||||
>
|
>
|
||||||
Signup
|
Get Started
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue