mirrors/mcphub
1
0
Fork 0
mirror of https://github.com/samanhappy/mcphub.git synced 2026-01-03 05:10:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

chore: update mcp sdk dependencies to latest versions (#546)

Browse Source
This commit is contained in:
samanhappy
2026-01-01 22:41:46 +08:00
committed by GitHub
parent 760cc462b9
commit b279a1a62c
6 changed files with 281 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
frontend/src/components/GroupCard.tsx
View File

@@ -1,99 +1,103 @@
import { useState, useRef, useEffect } from 'react' import { useState, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next';
import { Group, Server, IGroupServerConfig } from '@/types' import { Group, Server, IGroupServerConfig } from '@/types';
import { Edit, Trash, Copy, Check, Link, FileCode, DropdownIcon, Wrench } from '@/components/icons/LucideIcons' import {
import DeleteDialog from '@/components/ui/DeleteDialog' Edit,
import { useToast } from '@/contexts/ToastContext' Trash,
import { useSettingsData } from '@/hooks/useSettingsData' Copy,
Check,
Link,
FileCode,
DropdownIcon,
Wrench,
} from '@/components/icons/LucideIcons';
import DeleteDialog from '@/components/ui/DeleteDialog';
import { useToast } from '@/contexts/ToastContext';
import { useSettingsData } from '@/hooks/useSettingsData';
interface GroupCardProps { interface GroupCardProps {
group: Group group: Group;
servers: Server[] servers: Server[];
onEdit: (group: Group) => void onEdit: (group: Group) => void;
onDelete: (groupId: string) => void onDelete: (groupId: string) => void;
} }
const GroupCard = ({ const GroupCard = ({ group, servers, onEdit, onDelete }: GroupCardProps) => {
group, const { t } = useTranslation();
servers, const { showToast } = useToast();
onEdit, const { installConfig } = useSettingsData();
onDelete const [showDeleteDialog, setShowDeleteDialog] = useState(false);
}: GroupCardProps) => { const [copied, setCopied] = useState(false);
const { t } = useTranslation() const [showCopyDropdown, setShowCopyDropdown] = useState(false);
const { showToast } = useToast() const [expandedServer, setExpandedServer] = useState<string | null>(null);
const { installConfig } = useSettingsData() const dropdownRef = useRef<HTMLDivElement>(null);
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
const [copied, setCopied] = useState(false)
const [showCopyDropdown, setShowCopyDropdown] = useState(false)
const [expandedServer, setExpandedServer] = useState<string | null>(null)
const dropdownRef = useRef<HTMLDivElement>(null)
// Close dropdown when clicking outside // Close dropdown when clicking outside
useEffect(() => { useEffect(() => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
setShowCopyDropdown(false) setShowCopyDropdown(false);
} }
} };
document.addEventListener('mousedown', handleClickOutside) document.addEventListener('mousedown', handleClickOutside);
return () => { return () => {
document.removeEventListener('mousedown', handleClickOutside) document.removeEventListener('mousedown', handleClickOutside);
} };
}, []) }, []);
const handleEdit = () => { const handleEdit = () => {
onEdit(group) onEdit(group);
} };
const handleDelete = () => { const handleDelete = () => {
setShowDeleteDialog(true) setShowDeleteDialog(true);
} };
const handleConfirmDelete = () => { const handleConfirmDelete = () => {
onDelete(group.id) onDelete(group.id);
setShowDeleteDialog(false) setShowDeleteDialog(false);
} };
const copyToClipboard = (text: string) => { const copyToClipboard = (text: string) => {
if (navigator.clipboard && window.isSecureContext) { if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text).then(() => { navigator.clipboard.writeText(text).then(() => {
setCopied(true) setCopied(true);
setShowCopyDropdown(false) setShowCopyDropdown(false);
showToast(t('common.copySuccess'), 'success') showToast(t('common.copySuccess'), 'success');
setTimeout(() => setCopied(false), 2000) setTimeout(() => setCopied(false), 2000);
}) });
} else { } else {
// Fallback for HTTP or unsupported clipboard API // Fallback for HTTP or unsupported clipboard API
const textArea = document.createElement('textarea') const textArea = document.createElement('textarea');
textArea.value = text textArea.value = text;
// Avoid scrolling to bottom // Avoid scrolling to bottom
textArea.style.position = 'fixed' textArea.style.position = 'fixed';
textArea.style.left = '-9999px' textArea.style.left = '-9999px';
document.body.appendChild(textArea) document.body.appendChild(textArea);
textArea.focus() textArea.focus();
textArea.select() textArea.select();
try { try {
document.execCommand('copy') document.execCommand('copy');
setCopied(true) setCopied(true);
setShowCopyDropdown(false) setShowCopyDropdown(false);
showToast(t('common.copySuccess'), 'success') showToast(t('common.copySuccess'), 'success');
setTimeout(() => setCopied(false), 2000) setTimeout(() => setCopied(false), 2000);
} catch (err) { } catch (err) {
showToast(t('common.copyFailed') || 'Copy failed', 'error') showToast(t('common.copyFailed') || 'Copy failed', 'error');
console.error('Copy to clipboard failed:', err) console.error('Copy to clipboard failed:', err);
} }
document.body.removeChild(textArea) document.body.removeChild(textArea);
} }
} };
const handleCopyId = () => { const handleCopyId = () => {
copyToClipboard(group.id) copyToClipboard(group.id);
} };
const handleCopyUrl = () => { const handleCopyUrl = () => {
copyToClipboard(`${installConfig.baseUrl}/mcp/${group.id}`) copyToClipboard(`${installConfig.baseUrl}/mcp/${group.id}`);
} };
const handleCopyJson = () => { const handleCopyJson = () => {
const jsonConfig = { const jsonConfig = {
@@ -101,23 +105,23 @@ const GroupCard = ({
mcphub: { mcphub: {
url: `${installConfig.baseUrl}/mcp/${group.id}`, url: `${installConfig.baseUrl}/mcp/${group.id}`,
headers: { headers: {
Authorization: "Bearer <your-access-token>" Authorization: 'Bearer <your-access-token>',
} },
} },
} },
} };
copyToClipboard(JSON.stringify(jsonConfig, null, 2)) copyToClipboard(JSON.stringify(jsonConfig, null, 2));
} };
// Helper function to normalize group servers to get server names // Helper function to normalize group servers to get server names
const getServerNames = (servers: string[] | IGroupServerConfig[]): string[] => { const getServerNames = (servers: string[] | IGroupServerConfig[]): string[] => {
return servers.map(server => typeof server === 'string' ? server : server.name); return servers.map((server) => (typeof server === 'string' ? server : server.name));
}; };
// Helper function to get server configuration // Helper function to get server configuration
const getServerConfig = (serverName: string): IGroupServerConfig | undefined => { const getServerConfig = (serverName: string): IGroupServerConfig | undefined => {
const server = group.servers.find(s => const server = group.servers.find((s) =>
typeof s === 'string' ? s === serverName : s.name === serverName typeof s === 'string' ? s === serverName : s.name === serverName,
); );
if (typeof server === 'string') { if (typeof server === 'string') {
return { name: server, tools: 'all' }; return { name: server, tools: 'all' };
@@ -127,11 +131,11 @@ const GroupCard = ({
// Get servers that belong to this group // Get servers that belong to this group
const serverNames = getServerNames(group.servers); const serverNames = getServerNames(group.servers);
const groupServers = servers.filter(server => serverNames.includes(server.name)); const groupServers = servers.filter((server) => serverNames.includes(server.name));
return ( return (
<div className="bg-white shadow rounded-lg p-6 "> <div className="bg-white shadow rounded-lg p-4">
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center">
<div> <div>
<div className="flex items-center"> <div className="flex items-center">
<h2 className="text-xl font-semibold text-gray-800">{group.name}</h2> <h2 className="text-xl font-semibold text-gray-800">{group.name}</h2>
@@ -175,9 +179,7 @@ const GroupCard = ({
</div> </div>
</div> </div>
</div> </div>
{group.description && ( {group.description && <p className="text-gray-600 text-sm mt-1">{group.description}</p>}
<p className="text-gray-600 text-sm mt-1">{group.description}</p>
)}
</div> </div>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm btn-secondary"> <div className="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm btn-secondary">
@@ -200,17 +202,19 @@ const GroupCard = ({
</div> </div>
</div> </div>
<div className="mt-4"> <div className="">
{groupServers.length === 0 ? ( {groupServers.length === 0 ? (
<p className="text-gray-500 italic">{t('groups.noServers')}</p> <p className="text-gray-500 italic">{t('groups.noServers')}</p>
) : ( ) : (
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{groupServers.map(server => { {groupServers.map((server) => {
const serverConfig = getServerConfig(server.name); const serverConfig = getServerConfig(server.name);
const hasToolRestrictions = serverConfig && serverConfig.tools !== 'all' && Array.isArray(serverConfig.tools); const hasToolRestrictions =
const toolCount = hasToolRestrictions && Array.isArray(serverConfig?.tools) serverConfig && serverConfig.tools !== 'all' && Array.isArray(serverConfig.tools);
? serverConfig.tools.length const toolCount =
: (server.tools?.length || 0); // Show total tool count when all tools are selected hasToolRestrictions && Array.isArray(serverConfig?.tools)
? serverConfig.tools.length
: server.tools?.length || 0; // Show total tool count when all tools are selected
const isExpanded = expandedServer === server.name; const isExpanded = expandedServer === server.name;
@@ -219,7 +223,7 @@ const GroupCard = ({
if (hasToolRestrictions && Array.isArray(serverConfig?.tools)) { if (hasToolRestrictions && Array.isArray(serverConfig?.tools)) {
return serverConfig.tools; return serverConfig.tools;
} else if (server.tools && server.tools.length > 0) { } else if (server.tools && server.tools.length > 0) {
return server.tools.map(tool => tool.name); return server.tools.map((tool) => tool.name);
} }
return []; return [];
}; };
@@ -235,9 +239,15 @@ const GroupCard = ({
onClick={handleServerClick} onClick={handleServerClick}
> >
<span className="font-medium text-gray-700 text-sm">{server.name}</span> <span className="font-medium text-gray-700 text-sm">{server.name}</span>
<span className={`inline-block h-2 w-2 rounded-full ${server.status === 'connected' ? 'bg-green-500' : <span
server.status === 'connecting' ? 'bg-yellow-500' : 'bg-red-500' className={`inline-block h-2 w-2 rounded-full ${
}`}></span> server.status === 'connected'
? 'bg-green-500'
: server.status === 'connecting'
? 'bg-yellow-500'
: 'bg-red-500'
}`}
></span>
{toolCount > 0 && ( {toolCount > 0 && (
<span className="text-xs text-blue-600 bg-blue-100 px-2 py-0.5 rounded flex items-center gap-1"> <span className="text-xs text-blue-600 bg-blue-100 px-2 py-0.5 rounded flex items-center gap-1">
<Wrench size={12} /> <Wrench size={12} />
@@ -278,7 +288,7 @@ const GroupCard = ({
isGroup={true} isGroup={true}
/> />
</div> </div>
) );
} };
export default GroupCard export default GroupCard;

21
frontend/src/components/ServerCard.tsx
View File

@@ -18,7 +18,14 @@ interface ServerCardProps {
onReload?: (server: Server) => Promise<boolean>; onReload?: (server: Server) => Promise<boolean>;
} }
const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }: ServerCardProps) => { const ServerCard = ({
server,
onRemove,
onEdit,
onToggle,
onRefresh,
onReload,
}: ServerCardProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { showToast } = useToast(); const { showToast } = useToast();
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
@@ -232,10 +239,10 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }:
return ( return (
<> <>
<div <div
className={`bg-white shadow rounded-lg p-6 mb-6 page-card transition-all duration-200 ${server.enabled === false ? 'opacity-60' : ''}`} className={`bg-white shadow rounded-lg mb-6 page-card transition-all duration-200 ${server.enabled === false ? 'opacity-60' : ''}`}
> >
<div <div
className="flex justify-between items-center cursor-pointer" className="flex justify-between items-center cursor-pointer p-4"
onClick={() => setIsExpanded(!isExpanded)} onClick={() => setIsExpanded(!isExpanded)}
> >
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
@@ -385,9 +392,9 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }:
{isExpanded && ( {isExpanded && (
<> <>
{server.tools && ( {server.tools && (
<div className="mt-6"> <div className="px-4">
<h6 <h6
className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-4`} className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-2`}
> >
{t('server.tools')} {t('server.tools')}
</h6> </h6>
@@ -405,9 +412,9 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }:
)} )}
{server.prompts && ( {server.prompts && (
<div className="mt-6"> <div className="px-4 pb-2">
<h6 <h6
className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-4`} className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'}`}
> >
{t('server.prompts')} {t('server.prompts')}
</h6> </h6>

4
frontend/src/components/ui/PromptCard.tsx
View File

@@ -171,9 +171,9 @@ const PromptCard = ({ prompt, server, onToggle, onDescriptionUpdate }: PromptCar
}; };
return ( return (
<div className="bg-white border border-gray-200 shadow rounded-lg p-4 mb-4"> <div className="bg-white border border-gray-200 shadow rounded-lg mb-4">
<div <div
className="flex justify-between items-center cursor-pointer" className="flex justify-between items-center p-2 cursor-pointer"
onClick={() => setIsExpanded(!isExpanded)} onClick={() => setIsExpanded(!isExpanded)}
> >
<div className="flex-1"> <div className="flex-1">

259
frontend/src/components/ui/ToolCard.tsx
View File

@@ -1,19 +1,27 @@
import { useState, useCallback, useRef, useEffect } from 'react' import { useState, useCallback, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next';
import { Tool } from '@/types' import { Tool } from '@/types';
import { ChevronDown, ChevronRight, Play, Loader, Edit, Check, Copy } from '@/components/icons/LucideIcons' import {
import { callTool, ToolCallResult, updateToolDescription } from '@/services/toolService' ChevronDown,
import { useSettingsData } from '@/hooks/useSettingsData' ChevronRight,
import { useToast } from '@/contexts/ToastContext' Play,
import { Switch } from './ToggleGroup' Loader,
import DynamicForm from './DynamicForm' Edit,
import ToolResult from './ToolResult' Check,
Copy,
} from '@/components/icons/LucideIcons';
import { callTool, ToolCallResult, updateToolDescription } from '@/services/toolService';
import { useSettingsData } from '@/hooks/useSettingsData';
import { useToast } from '@/contexts/ToastContext';
import { Switch } from './ToggleGroup';
import DynamicForm from './DynamicForm';
import ToolResult from './ToolResult';
interface ToolCardProps { interface ToolCardProps {
server: string server: string;
tool: Tool tool: Tool;
onToggle?: (toolName: string, enabled: boolean) => void onToggle?: (toolName: string, enabled: boolean) => void;
onDescriptionUpdate?: (toolName: string, description: string) => void onDescriptionUpdate?: (toolName: string, description: string) => void;
} }
// Helper to check for "empty" values // Helper to check for "empty" values
@@ -26,165 +34,173 @@ function isEmptyValue(value: any): boolean {
} }
const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps) => { const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps) => {
const { t } = useTranslation() const { t } = useTranslation();
const { showToast } = useToast() const { showToast } = useToast();
const { nameSeparator } = useSettingsData() const { nameSeparator } = useSettingsData();
const [isExpanded, setIsExpanded] = useState(false) const [isExpanded, setIsExpanded] = useState(false);
const [showRunForm, setShowRunForm] = useState(false) const [showRunForm, setShowRunForm] = useState(false);
const [isRunning, setIsRunning] = useState(false) const [isRunning, setIsRunning] = useState(false);
const [result, setResult] = useState<ToolCallResult | null>(null) const [result, setResult] = useState<ToolCallResult | null>(null);
const [isEditingDescription, setIsEditingDescription] = useState(false) const [isEditingDescription, setIsEditingDescription] = useState(false);
const [customDescription, setCustomDescription] = useState(tool.description || '') const [customDescription, setCustomDescription] = useState(tool.description || '');
const descriptionInputRef = useRef<HTMLInputElement>(null) const descriptionInputRef = useRef<HTMLInputElement>(null);
const descriptionTextRef = useRef<HTMLSpanElement>(null) const descriptionTextRef = useRef<HTMLSpanElement>(null);
const [textWidth, setTextWidth] = useState<number>(0) const [textWidth, setTextWidth] = useState<number>(0);
const [copiedToolName, setCopiedToolName] = useState(false) const [copiedToolName, setCopiedToolName] = useState(false);
// Focus the input when editing mode is activated // Focus the input when editing mode is activated
useEffect(() => { useEffect(() => {
if (isEditingDescription && descriptionInputRef.current) { if (isEditingDescription && descriptionInputRef.current) {
descriptionInputRef.current.focus() descriptionInputRef.current.focus();
// Set input width to match text width // Set input width to match text width
if (textWidth > 0) { if (textWidth > 0) {
descriptionInputRef.current.style.width = `${textWidth + 20}px` // Add some padding descriptionInputRef.current.style.width = `${textWidth + 20}px`; // Add some padding
} }
} }
}, [isEditingDescription, textWidth]) }, [isEditingDescription, textWidth]);
// Measure text width when not editing // Measure text width when not editing
useEffect(() => { useEffect(() => {
if (!isEditingDescription && descriptionTextRef.current) { if (!isEditingDescription && descriptionTextRef.current) {
setTextWidth(descriptionTextRef.current.offsetWidth) setTextWidth(descriptionTextRef.current.offsetWidth);
} }
}, [isEditingDescription, customDescription]) }, [isEditingDescription, customDescription]);
// Generate a unique key for localStorage based on tool name and server // Generate a unique key for localStorage based on tool name and server
const getStorageKey = useCallback(() => { const getStorageKey = useCallback(() => {
return `mcphub_tool_form_${server ? `${server}_` : ''}${tool.name}` return `mcphub_tool_form_${server ? `${server}_` : ''}${tool.name}`;
}, [tool.name, server]) }, [tool.name, server]);
// Clear form data from localStorage // Clear form data from localStorage
const clearStoredFormData = useCallback(() => { const clearStoredFormData = useCallback(() => {
localStorage.removeItem(getStorageKey()) localStorage.removeItem(getStorageKey());
}, [getStorageKey]) }, [getStorageKey]);
const handleToggle = (enabled: boolean) => { const handleToggle = (enabled: boolean) => {
if (onToggle) { if (onToggle) {
onToggle(tool.name, enabled) onToggle(tool.name, enabled);
} }
} };
const handleDescriptionEdit = () => { const handleDescriptionEdit = () => {
setIsEditingDescription(true) setIsEditingDescription(true);
} };
const handleDescriptionSave = async () => { const handleDescriptionSave = async () => {
try { try {
const result = await updateToolDescription(server, tool.name, customDescription) const result = await updateToolDescription(server, tool.name, customDescription);
if (result.success) { if (result.success) {
setIsEditingDescription(false) setIsEditingDescription(false);
if (onDescriptionUpdate) { if (onDescriptionUpdate) {
onDescriptionUpdate(tool.name, customDescription) onDescriptionUpdate(tool.name, customDescription);
} }
} else { } else {
// Revert on error // Revert on error
setCustomDescription(tool.description || '') setCustomDescription(tool.description || '');
console.error('Failed to update tool description:', result.error) console.error('Failed to update tool description:', result.error);
} }
} catch (error) { } catch (error) {
console.error('Error updating tool description:', error) console.error('Error updating tool description:', error);
setCustomDescription(tool.description || '') setCustomDescription(tool.description || '');
setIsEditingDescription(false) setIsEditingDescription(false);
} }
} };
const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setCustomDescription(e.target.value) setCustomDescription(e.target.value);
} };
const handleDescriptionKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { const handleDescriptionKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
handleDescriptionSave() handleDescriptionSave();
} else if (e.key === 'Escape') { } else if (e.key === 'Escape') {
setCustomDescription(tool.description || '') setCustomDescription(tool.description || '');
setIsEditingDescription(false) setIsEditingDescription(false);
} }
} };
const handleCopyToolName = async (e: React.MouseEvent) => { const handleCopyToolName = async (e: React.MouseEvent) => {
e.stopPropagation() e.stopPropagation();
try { try {
if (navigator.clipboard && window.isSecureContext) { if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(tool.name) await navigator.clipboard.writeText(tool.name);
setCopiedToolName(true) setCopiedToolName(true);
showToast(t('common.copySuccess'), 'success') showToast(t('common.copySuccess'), 'success');
setTimeout(() => setCopiedToolName(false), 2000) setTimeout(() => setCopiedToolName(false), 2000);
} else { } else {
// Fallback for HTTP or unsupported clipboard API // Fallback for HTTP or unsupported clipboard API
const textArea = document.createElement('textarea') const textArea = document.createElement('textarea');
textArea.value = tool.name textArea.value = tool.name;
textArea.style.position = 'fixed' textArea.style.position = 'fixed';
textArea.style.left = '-9999px' textArea.style.left = '-9999px';
document.body.appendChild(textArea) document.body.appendChild(textArea);
textArea.focus() textArea.focus();
textArea.select() textArea.select();
try { try {
document.execCommand('copy') document.execCommand('copy');
setCopiedToolName(true) setCopiedToolName(true);
showToast(t('common.copySuccess'), 'success') showToast(t('common.copySuccess'), 'success');
setTimeout(() => setCopiedToolName(false), 2000) setTimeout(() => setCopiedToolName(false), 2000);
} catch (err) { } catch (err) {
showToast(t('common.copyFailed'), 'error') showToast(t('common.copyFailed'), 'error');
console.error('Copy to clipboard failed:', err) console.error('Copy to clipboard failed:', err);
} }
document.body.removeChild(textArea) document.body.removeChild(textArea);
} }
} catch (error) { } catch (error) {
showToast(t('common.copyFailed'), 'error') showToast(t('common.copyFailed'), 'error');
console.error('Copy to clipboard failed:', error) console.error('Copy to clipboard failed:', error);
} }
} };
const handleRunTool = async (arguments_: Record<string, any>) => { const handleRunTool = async (arguments_: Record<string, any>) => {
setIsRunning(true) setIsRunning(true);
try { try {
// filter empty values // filter empty values
arguments_ = Object.fromEntries(Object.entries(arguments_).filter(([_, v]) => !isEmptyValue(v))) arguments_ = Object.fromEntries(
const result = await callTool({ Object.entries(arguments_).filter(([_, v]) => !isEmptyValue(v)),
toolName: tool.name, );
arguments: arguments_, const result = await callTool(
}, server) {
toolName: tool.name,
arguments: arguments_,
},
server,
);
setResult(result) setResult(result);
// Clear form data on successful submission // Clear form data on successful submission
// clearStoredFormData() // clearStoredFormData()
} catch (error) { } catch (error) {
setResult({ setResult({
success: false, success: false,
error: error instanceof Error ? error.message : 'Unknown error occurred', error: error instanceof Error ? error.message : 'Unknown error occurred',
}) });
} finally { } finally {
setIsRunning(false) setIsRunning(false);
} }
} };
const handleCancelRun = () => { const handleCancelRun = () => {
setShowRunForm(false) setShowRunForm(false);
// Clear form data when cancelled // Clear form data when cancelled
clearStoredFormData() clearStoredFormData();
setResult(null) setResult(null);
} };
const handleCloseResult = () => { const handleCloseResult = () => {
setResult(null) setResult(null);
} };
return ( return (
<div className="bg-white border border-gray-200 shadow rounded-lg p-4 mb-4"> <div className="bg-white border border-gray-200 shadow rounded-lg mb-4">
<div <div
className="flex justify-between items-center cursor-pointer" className="flex justify-between items-center cursor-pointer p-2"
onClick={() => setIsExpanded(!isExpanded)} onClick={(e) => {
e.stopPropagation();
setIsExpanded(!isExpanded);
}}
> >
<div className="flex-1"> <div className="flex-1">
<h3 className="text-lg font-medium text-gray-900 inline-flex items-center"> <h3 className="text-lg font-medium text-gray-900 inline-flex items-center">
@@ -194,11 +210,7 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
onClick={handleCopyToolName} onClick={handleCopyToolName}
title={t('common.copy')} title={t('common.copy')}
> >
{copiedToolName ? ( {copiedToolName ? <Check size={16} className="text-green-500" /> : <Copy size={16} />}
<Check size={16} className="text-green-500" />
) : (
<Copy size={16} />
)}
</button> </button>
<span className="ml-2 text-sm font-normal text-gray-600 inline-flex items-center"> <span className="ml-2 text-sm font-normal text-gray-600 inline-flex items-center">
{isEditingDescription ? ( {isEditingDescription ? (
@@ -213,14 +225,14 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
style={{ style={{
minWidth: '100px', minWidth: '100px',
width: textWidth > 0 ? `${textWidth + 20}px` : 'auto' width: textWidth > 0 ? `${textWidth + 20}px` : 'auto',
}} }}
/> />
<button <button
className="ml-2 p-1 text-green-600 hover:text-green-800 cursor-pointer transition-colors" className="ml-2 p-1 text-green-600 hover:text-green-800 cursor-pointer transition-colors"
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation();
handleDescriptionSave() handleDescriptionSave();
}} }}
> >
<Check size={16} /> <Check size={16} />
@@ -228,12 +240,14 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
</> </>
) : ( ) : (
<> <>
<span ref={descriptionTextRef}>{customDescription || t('tool.noDescription')}</span> <span ref={descriptionTextRef}>
{customDescription || t('tool.noDescription')}
</span>
<button <button
className="ml-2 p-1 text-gray-500 hover:text-blue-600 cursor-pointer transition-colors" className="ml-2 p-1 text-gray-500 hover:text-blue-600 cursor-pointer transition-colors"
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation();
handleDescriptionEdit() handleDescriptionEdit();
}} }}
> >
<Edit size={14} /> <Edit size={14} />
@@ -244,10 +258,7 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
</h3> </h3>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div <div className="flex items-center space-x-2" onClick={(e) => e.stopPropagation()}>
className="flex items-center space-x-2"
onClick={(e) => e.stopPropagation()}
>
<Switch <Switch
checked={tool.enabled ?? true} checked={tool.enabled ?? true}
onCheckedChange={handleToggle} onCheckedChange={handleToggle}
@@ -256,18 +267,14 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
</div> </div>
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation();
setIsExpanded(true) // Ensure card is expanded when showing run form setIsExpanded(true); // Ensure card is expanded when showing run form
setShowRunForm(true) setShowRunForm(true);
}} }}
className="flex items-center space-x-1 px-3 py-1 text-sm text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors btn-primary" className="flex items-center space-x-1 px-3 py-1 text-sm text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors btn-primary"
disabled={isRunning || !tool.enabled} disabled={isRunning || !tool.enabled}
> >
{isRunning ? ( {isRunning ? <Loader size={14} className="animate-spin" /> : <Play size={14} />}
<Loader size={14} className="animate-spin" />
) : (
<Play size={14} />
)}
<span>{isRunning ? t('tool.running') : t('tool.run')}</span> <span>{isRunning ? t('tool.running') : t('tool.run')}</span>
</button> </button>
<button className="text-gray-400 hover:text-gray-600"> <button className="text-gray-400 hover:text-gray-600">
@@ -297,7 +304,9 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
onCancel={handleCancelRun} onCancel={handleCancelRun}
loading={isRunning} loading={isRunning}
storageKey={getStorageKey()} storageKey={getStorageKey()}
title={t('tool.runToolWithName', { name: tool.name.replace(server + nameSeparator, '') })} title={t('tool.runToolWithName', {
name: tool.name.replace(server + nameSeparator, ''),
})}
/> />
{/* Tool Result */} {/* Tool Result */}
{result && ( {result && (
@@ -307,12 +316,10 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
)} )}
</div> </div>
)} )}
</div> </div>
)} )}
</div> </div>
) );
} };
export default ToolCard export default ToolCard;

2
package.json
View File

@@ -46,7 +46,7 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@apidevtools/swagger-parser": "^12.0.0", "@apidevtools/swagger-parser": "^12.0.0",
"@modelcontextprotocol/sdk": "^1.20.2", "@modelcontextprotocol/sdk": "^1.25.1",
"@node-oauth/oauth2-server": "^5.2.1", "@node-oauth/oauth2-server": "^5.2.1",
"@types/adm-zip": "^0.5.7", "@types/adm-zip": "^0.5.7",
"@types/bcrypt": "^6.0.0", "@types/bcrypt": "^6.0.0",

34
pnpm-lock.yaml generated
View File

@@ -19,8 +19,8 @@ importers:
specifier: ^12.0.0 specifier: ^12.0.0
version: 12.0.0(openapi-types@12.1.3) version: 12.0.0(openapi-types@12.1.3)
'@modelcontextprotocol/sdk': '@modelcontextprotocol/sdk':
specifier: ^1.20.2 specifier: ^1.25.1
version: 1.24.0(zod@3.25.76) version: 1.25.1(hono@4.11.3)(zod@3.25.76)
'@node-oauth/oauth2-server': '@node-oauth/oauth2-server':
specifier: ^5.2.1 specifier: ^5.2.1
version: 5.2.1 version: 5.2.1
@@ -826,6 +826,12 @@ packages:
resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==} resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
'@hono/node-server@1.19.7':
resolution: {integrity: sha512-vUcD0uauS7EU2caukW8z5lJKtoGMokxNbJtBiwHgpqxEXokaHCBkQUmCHhjFB1VUTWdqj25QoMkMKzgjq+uhrw==}
engines: {node: '>=18.14.1'}
peerDependencies:
hono: ^4
'@humanwhocodes/config-array@0.13.0': '@humanwhocodes/config-array@0.13.0':
resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==} resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
engines: {node: '>=10.10.0'} engines: {node: '>=10.10.0'}
@@ -1112,8 +1118,8 @@ packages:
'@jridgewell/trace-mapping@0.3.9': '@jridgewell/trace-mapping@0.3.9':
resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==} resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
'@modelcontextprotocol/sdk@1.24.0': '@modelcontextprotocol/sdk@1.25.1':
resolution: {integrity: sha512-D8h5KXY2vHFW8zTuxn2vuZGN0HGrQ5No6LkHwlEA9trVgNdPL3TF1dSqKA7Dny6BbBYKSW/rOBDXdC8KJAjUCg==} resolution: {integrity: sha512-yO28oVFFC7EBoiKdAn+VqRm+plcfv4v0xp6osG/VsCB0NlPZWi87ajbCZZ8f/RvOFLEu7//rSRmuZZ7lMoe3gQ==}
engines: {node: '>=18'} engines: {node: '>=18'}
peerDependencies: peerDependencies:
'@cfworker/json-schema': ^4.1.1 '@cfworker/json-schema': ^4.1.1
@@ -2859,6 +2865,10 @@ packages:
resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
hono@4.11.3:
resolution: {integrity: sha512-PmQi306+M/ct/m5s66Hrg+adPnkD5jiO6IjA7WhWw0gSBSo1EcRegwuI1deZ+wd5pzCGynCcn2DprnE4/yEV4w==}
engines: {node: '>=16.9.0'}
html-escaper@2.0.2: html-escaper@2.0.2:
resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
@@ -3214,6 +3224,9 @@ packages:
json-schema-traverse@1.0.0: json-schema-traverse@1.0.0:
resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==} resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
json-schema-typed@8.0.2:
resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
json-stable-stringify-without-jsonify@1.0.1: json-stable-stringify-without-jsonify@1.0.1:
resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
@@ -5097,6 +5110,10 @@ snapshots:
'@eslint/js@8.57.1': {} '@eslint/js@8.57.1': {}
'@hono/node-server@1.19.7(hono@4.11.3)':
dependencies:
hono: 4.11.3
'@humanwhocodes/config-array@0.13.0': '@humanwhocodes/config-array@0.13.0':
dependencies: dependencies:
'@humanwhocodes/object-schema': 2.0.3 '@humanwhocodes/object-schema': 2.0.3
@@ -5465,8 +5482,9 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.2 '@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.5 '@jridgewell/sourcemap-codec': 1.5.5
'@modelcontextprotocol/sdk@1.24.0(zod@3.25.76)': '@modelcontextprotocol/sdk@1.25.1(hono@4.11.3)(zod@3.25.76)':
dependencies: dependencies:
'@hono/node-server': 1.19.7(hono@4.11.3)
ajv: 8.17.1 ajv: 8.17.1
ajv-formats: 3.0.1(ajv@8.17.1) ajv-formats: 3.0.1(ajv@8.17.1)
content-type: 1.0.5 content-type: 1.0.5
@@ -5477,11 +5495,13 @@ snapshots:
express: 5.2.1 express: 5.2.1
express-rate-limit: 7.5.1(express@5.2.1) express-rate-limit: 7.5.1(express@5.2.1)
jose: 6.1.3 jose: 6.1.3
json-schema-typed: 8.0.2
pkce-challenge: 5.0.1 pkce-challenge: 5.0.1
raw-body: 3.0.2 raw-body: 3.0.2
zod: 3.25.76 zod: 3.25.76
zod-to-json-schema: 3.25.0(zod@3.25.76) zod-to-json-schema: 3.25.0(zod@3.25.76)
transitivePeerDependencies: transitivePeerDependencies:
- hono
- supports-color - supports-color
'@napi-rs/wasm-runtime@0.2.12': '@napi-rs/wasm-runtime@0.2.12':
@@ -7273,6 +7293,8 @@ snapshots:
dependencies: dependencies:
function-bind: 1.1.2 function-bind: 1.1.2
hono@4.11.3: {}
html-escaper@2.0.2: {} html-escaper@2.0.2: {}
html-parse-stringify@3.0.1: html-parse-stringify@3.0.1:
@@ -7812,6 +7834,8 @@ snapshots:
json-schema-traverse@1.0.0: {} json-schema-traverse@1.0.0: {}
json-schema-typed@8.0.2: {}
json-stable-stringify-without-jsonify@1.0.1: {} json-stable-stringify-without-jsonify@1.0.1: {}
json5@2.2.3: {} json5@2.2.3: {}