Ling0925
/
suna
mirror of https://github.com/kortix-ai/suna.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore(u): improve mcp config ui

This commit is contained in:
Soumyadas15 2025-05-30 15:36:33 +05:30
parent 7a2a47aa1b
commit fdd42cf9aa
1 changed files with 30 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/app/(dashboard)/agents/_components/mcp-configuration.tsx
View File

@ -6,7 +6,7 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
import { Card } from '@/components/ui/card'; import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area'; import { ScrollArea } from '@/components/ui/scroll-area';
import { Loader2, Search, Plus, Settings, ExternalLink, Shield, X, Sparkles, ChevronRight, Database, Cloud, Code, FileText, Puzzle, Globe, Bot, Zap, GitBranch, MessageCircle, Calendar, ShoppingCart, HeadphonesIcon, Wrench } from 'lucide-react'; import { Loader2, Search, Plus, Settings, ExternalLink, Shield, X, Sparkles, ChevronRight } from 'lucide-react';
import { usePopularMCPServers, usePopularMCPServersV2, useMCPServers, useMCPServerDetails } from '@/hooks/react-query/mcp/use-mcp-servers'; import { usePopularMCPServers, usePopularMCPServersV2, useMCPServers, useMCPServerDetails } from '@/hooks/react-query/mcp/use-mcp-servers';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
@ -30,32 +30,32 @@ interface ConfigDialogProps {
} }
const categoryIcons = { const categoryIcons = {
"AI & Search": Bot, "AI & Search": "🤖",
"Development & Version Control": GitBranch, "Development & Version Control": "🔧",
"Automation & Productivity": Zap, "Automation & Productivity": "⚡",
"Communication & Collaboration": MessageCircle, "Communication & Collaboration": "💬",
"Project Management": Calendar, "Project Management": "📅",
"Data & Analytics": Database, "Data & Analytics": "📊",
"Cloud & Infrastructure": Cloud, "Cloud & Infrastructure": "☁️",
"File Storage": FileText, "File Storage": "📁",
"Marketing & Sales": ShoppingCart, "Marketing & Sales": "🛒",
"Customer Support": HeadphonesIcon, "Customer Support": "🎧",
"Finance": Database, "Finance": "💰",
"Utilities": Wrench, "Utilities": "🔨",
"Other": Puzzle, "Other": "🧩",
// Legacy fallbacks // Legacy fallbacks
"development": GitBranch, "development": "🔧",
"ai": Bot, "ai": "🤖",
"automation": Zap, "automation": "⚡",
"search": Bot, "search": "🔍",
"Database": Database, "Database": "📊",
"Web": Globe, "Web": "🌐",
"File": FileText, "File": "📄",
"Development": Code, "Development": "💻",
"AI": Bot, "AI": "🤖",
"Cloud": Cloud, "Cloud": "☁️",
"Utility": Zap, "Utility": "⚡",
"Integration": Puzzle, "Integration": "🧩",
}; };
const ConfigDialog: React.FC<ConfigDialogProps> = ({ server, existingConfig, onSave, onCancel }) => { const ConfigDialog: React.FC<ConfigDialogProps> = ({ server, existingConfig, onSave, onCancel }) => {
@ -337,13 +337,11 @@ export const MCPConfiguration: React.FC<MCPConfigurationProps> = ({
className={cn("w-full justify-start shadow-none bg-transparent text-primary hover:bg-muted hover:text-primary", selectedCategory === null && "bg-primary/5 text-foreground")} className={cn("w-full justify-start shadow-none bg-transparent text-primary hover:bg-muted hover:text-primary", selectedCategory === null && "bg-primary/5 text-foreground")}
onClick={() => setSelectedCategory(null)} onClick={() => setSelectedCategory(null)}
> >
<Globe className="h-4 w-4 mr-2" /> <span className="mr-2">🌐</span>
All Categories All Categories
</Button> </Button>
{categories.map((category) => { {categories.map((category) => {
const IconComponent = categoryIcons[category] || Puzzle;
const count = popularServersV2?.categorized[category]?.length || 0; const count = popularServersV2?.categorized[category]?.length || 0;
return ( return (
<Button <Button
key={category} key={category}
@ -351,7 +349,7 @@ export const MCPConfiguration: React.FC<MCPConfigurationProps> = ({
className={cn("w-full justify-start shadow-none bg-transparent text-primary hover:bg-muted hover:text-primary", selectedCategory === category && "bg-primary/5 text-foreground")} className={cn("w-full justify-start shadow-none bg-transparent text-primary hover:bg-muted hover:text-primary", selectedCategory === category && "bg-primary/5 text-foreground")}
onClick={() => setSelectedCategory(category)} onClick={() => setSelectedCategory(category)}
> >
<IconComponent className="h-4 w-4 mr-2" /> <span className="mr-2">{categoryIcons[category] || "🧩"}</span>
<span className="flex-1 text-left">{category}</span> <span className="flex-1 text-left">{category}</span>
<Badge variant="outline" className="ml-auto text-xs"> <Badge variant="outline" className="ml-auto text-xs">
{count} {count}
@ -444,7 +442,7 @@ export const MCPConfiguration: React.FC<MCPConfigurationProps> = ({
// Show single category // Show single category
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{React.createElement(categoryIcons[selectedCategory] || Puzzle, { className: "h-5 w-5" })} <span className="text-lg">{categoryIcons[selectedCategory] || "🧩"}</span>
<h3 className="text-lg font-semibold">{selectedCategory}</h3> <h3 className="text-lg font-semibold">{selectedCategory}</h3>
<Badge variant="outline" className="ml-auto"> <Badge variant="outline" className="ml-auto">
{popularServersV2.categorized[selectedCategory]?.length || 0} servers {popularServersV2.categorized[selectedCategory]?.length || 0} servers
@ -496,7 +494,7 @@ export const MCPConfiguration: React.FC<MCPConfigurationProps> = ({
<div key={category} className="space-y-3"> <div key={category} className="space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{React.createElement(categoryIcons[category] || Puzzle, { className: "h-4 w-4" })} <span className="text-lg">{categoryIcons[category] || "🧩"}</span>
<h3 className="text-sm font-semibold text-muted-foreground">{category}</h3> <h3 className="text-sm font-semibold text-muted-foreground">{category}</h3>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">