mirrors/voideditor--void
1
0
Fork 0
Code Issues Pull Requests Actions 4 Deployments Models Agent Notes Packages Projects Releases Wiki Activity

autoformat

Browse Source
This commit is contained in:
Andrew Pareles
2025-05-20 23:18:52 -07:00
parent 6d9027f63b
commit d80fd766f8
1 changed files with 73 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/MCPServersList.tsx
+73 -73
View File
@@ -5,17 +5,17 @@ import { useAccessor } from '../util/services.js';
import { IDisposable } from '../../../../../../../base/common/lifecycle.js';
// Command display component
const CommandDisplay = ({ command }: {command: string}) => {
return (
<div className="px-2 py-1 bg-void-bg-3 text-xs font-mono overflow-x-auto whitespace-nowrap">
{command}
</div>
);
const CommandDisplay = ({ command }: { command: string }) => {
return (
<div className="px-2 py-1 bg-void-bg-3 text-xs font-mono overflow-x-auto whitespace-nowrap">
{command}
</div>
);
};
// MCP Server component
const MCPServer = ({ name, server }: {name: string, server: MCPServerObject}) => {
const MCPServer = ({ name, server }: { name: string, server: MCPServerObject }) => {
const accessor = useAccessor();
const mcpService = accessor.get('IMCPService');
@@ -25,72 +25,72 @@ const MCPServer = ({ name, server }: {name: string, server: MCPServerObject}) =>
mcpService.toggleServer(name, e);
}
return (
return (
<div className="border-b border-gray-800 bg-gray-300/10 py-4 rounded-lg ">
<div className="flex items-center mx-4">
{/* Status indicator */}
<div className={`w-2 h-2 rounded-full mr-2
<div className="flex items-center mx-4">
{/* Status indicator */}
<div className={`w-2 h-2 rounded-full mr-2
${server.status === 'success' ? 'green-500'
:server.status === 'error' ? 'red-500'
:server.status === 'loading' ? 'yellow-500'
:server.status === 'offline' ? 'gray-500'
:''}
: server.status === 'error' ? 'red-500'
: server.status === 'loading' ? 'yellow-500'
: server.status === 'offline' ? 'gray-500'
: ''}
`}></div>
{/* Server name */}
<div className="text-sm font-medium mr-2">{name}</div>
{/* Server name */}
<div className="text-sm font-medium mr-2">{name}</div>
{/* Power toggle switch */}
<div className="ml-auto">
<VoidSwitch
value={server.isOn}
disabled={server.status === 'error'}
onChange={handleChangeEvent}
/>
{/* Power toggle switch */}
<div className="ml-auto">
<VoidSwitch
value={server.isOn}
disabled={server.status === 'error'}
onChange={handleChangeEvent}
/>
</div>
</div>
</div>
{/* Tools section */}
<div className="mt-1 mx-4">
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto pb-1">
{server.isOn && server.tools.length > 0 ? (
server.tools.map((tool) => (
<span
key={tool.name}
className="px-2 py-0.5 bg-black/5 dark:bg-white/5 rounded text-xs"
title={tool.description || ''}
>
{tool.name}
</span>
))
) : (
<span className="text-xs text-gray-500">No tools available</span>
{/* Tools section */}
<div className="mt-1 mx-4">
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto pb-1">
{server.isOn && server.tools.length > 0 ? (
server.tools.map((tool) => (
<span
key={tool.name}
className="px-2 py-0.5 bg-black/5 dark:bg-white/5 rounded text-xs"
title={tool.description || ''}
>
{tool.name}
</span>
))
) : (
<span className="text-xs text-gray-500">No tools available</span>
)}
</div>
</div>
{/* Command display */}
{server.isOn && server.command && (
<div className="mt-2 mx-4">
<div className="text-xs text-gray-400">Command:</div>
<CommandDisplay command={server.command} />
</div>
)}
</div>
</div>
{/* Command display */}
{server.isOn && server.command && (
<div className="mt-2 mx-4">
<div className="text-xs text-gray-400">Command:</div>
<CommandDisplay command={server.command} />
</div>
)}
{/* Error message if present */}
{server.error && (
<div className="mt-2 ml-4 text-red-500 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-1">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
{server.error}
{/* Error message if present */}
{server.error && (
<div className="mt-2 ml-4 text-red-500 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-1">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
{server.error}
</div>
)}
</div>
)}
</div>
);
);
};
// Main component that renders the list of servers
@@ -159,18 +159,18 @@ const MCPServersList = () => {
return (
<div className="text-white rounded-md py-4">
<div>
{!mcpConfigError && Object.entries(mcpServers).map(([name, server]) => (
<div className="py-2" key={name}>
<MCPServer name={name} server={server} />
<div>
{!mcpConfigError && Object.entries(mcpServers).map(([name, server]) => (
<div className="py-2" key={name}>
<MCPServer name={name} server={server} />
</div>
))}
{mcpConfigError && (
<div className="text-red-500 text-sm font-medium">
{mcpConfigError}
</div>
)}
</div>
))}
{mcpConfigError && (
<div className="text-red-500 text-sm font-medium">
{mcpConfigError}
</div>
)}
</div>
</div>
);
};