mirror of
https://github.com/samanhappy/mcphub.git
synced 2026-01-01 12:18:39 -05:00
chore: update mcp sdk dependencies to latest versions (#546)
This commit is contained in:
samanhappy
@@ -1,99 +1,103 @@
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Group, Server, IGroupServerConfig } from '@/types'
|
||||
import { Edit, Trash, 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'
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Group, Server, IGroupServerConfig } from '@/types';
|
||||
import {
|
||||
Edit,
|
||||
Trash,
|
||||
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 {
|
||||
group: Group
|
||||
servers: Server[]
|
||||
onEdit: (group: Group) => void
|
||||
onDelete: (groupId: string) => void
|
||||
group: Group;
|
||||
servers: Server[];
|
||||
onEdit: (group: Group) => void;
|
||||
onDelete: (groupId: string) => void;
|
||||
}
|
||||
|
||||
const GroupCard = ({
|
||||
group,
|
||||
servers,
|
||||
onEdit,
|
||||
onDelete
|
||||
}: GroupCardProps) => {
|
||||
const { t } = useTranslation()
|
||||
const { showToast } = useToast()
|
||||
const { installConfig } = useSettingsData()
|
||||
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)
|
||||
const GroupCard = ({ group, servers, onEdit, onDelete }: GroupCardProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { showToast } = useToast();
|
||||
const { installConfig } = useSettingsData();
|
||||
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
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setShowCopyDropdown(false)
|
||||
setShowCopyDropdown(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside)
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside)
|
||||
}
|
||||
}, [])
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleEdit = () => {
|
||||
onEdit(group)
|
||||
}
|
||||
onEdit(group);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
setShowDeleteDialog(true)
|
||||
}
|
||||
setShowDeleteDialog(true);
|
||||
};
|
||||
|
||||
const handleConfirmDelete = () => {
|
||||
onDelete(group.id)
|
||||
setShowDeleteDialog(false)
|
||||
}
|
||||
onDelete(group.id);
|
||||
setShowDeleteDialog(false);
|
||||
};
|
||||
|
||||
const copyToClipboard = (text: string) => {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
setCopied(true)
|
||||
setShowCopyDropdown(false)
|
||||
showToast(t('common.copySuccess'), 'success')
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
})
|
||||
setCopied(true);
|
||||
setShowCopyDropdown(false);
|
||||
showToast(t('common.copySuccess'), 'success');
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
});
|
||||
} else {
|
||||
// Fallback for HTTP or unsupported clipboard API
|
||||
const textArea = document.createElement('textarea')
|
||||
textArea.value = text
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
// Avoid scrolling to bottom
|
||||
textArea.style.position = 'fixed'
|
||||
textArea.style.left = '-9999px'
|
||||
document.body.appendChild(textArea)
|
||||
textArea.focus()
|
||||
textArea.select()
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-9999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy')
|
||||
setCopied(true)
|
||||
setShowCopyDropdown(false)
|
||||
showToast(t('common.copySuccess'), 'success')
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
document.execCommand('copy');
|
||||
setCopied(true);
|
||||
setShowCopyDropdown(false);
|
||||
showToast(t('common.copySuccess'), 'success');
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (err) {
|
||||
showToast(t('common.copyFailed') || 'Copy failed', 'error')
|
||||
console.error('Copy to clipboard failed:', err)
|
||||
showToast(t('common.copyFailed') || 'Copy failed', 'error');
|
||||
console.error('Copy to clipboard failed:', err);
|
||||
}
|
||||
document.body.removeChild(textArea)
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyId = () => {
|
||||
copyToClipboard(group.id)
|
||||
}
|
||||
copyToClipboard(group.id);
|
||||
};
|
||||
|
||||
const handleCopyUrl = () => {
|
||||
copyToClipboard(`${installConfig.baseUrl}/mcp/${group.id}`)
|
||||
}
|
||||
copyToClipboard(`${installConfig.baseUrl}/mcp/${group.id}`);
|
||||
};
|
||||
|
||||
const handleCopyJson = () => {
|
||||
const jsonConfig = {
|
||||
@@ -101,23 +105,23 @@ const GroupCard = ({
|
||||
mcphub: {
|
||||
url: `${installConfig.baseUrl}/mcp/${group.id}`,
|
||||
headers: {
|
||||
Authorization: "Bearer <your-access-token>"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
copyToClipboard(JSON.stringify(jsonConfig, null, 2))
|
||||
}
|
||||
Authorization: 'Bearer <your-access-token>',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
copyToClipboard(JSON.stringify(jsonConfig, null, 2));
|
||||
};
|
||||
|
||||
// Helper function to normalize group servers to get server names
|
||||
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
|
||||
const getServerConfig = (serverName: string): IGroupServerConfig | undefined => {
|
||||
const server = group.servers.find(s =>
|
||||
typeof s === 'string' ? s === serverName : s.name === serverName
|
||||
const server = group.servers.find((s) =>
|
||||
typeof s === 'string' ? s === serverName : s.name === serverName,
|
||||
);
|
||||
if (typeof server === 'string') {
|
||||
return { name: server, tools: 'all' };
|
||||
@@ -127,11 +131,11 @@ const GroupCard = ({
|
||||
|
||||
// Get servers that belong to this group
|
||||
const serverNames = getServerNames(group.servers);
|
||||
const groupServers = servers.filter(server => serverNames.includes(server.name));
|
||||
const groupServers = servers.filter((server) => serverNames.includes(server.name));
|
||||
|
||||
return (
|
||||
<div className="bg-white shadow rounded-lg p-6 ">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="bg-white shadow rounded-lg p-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<h2 className="text-xl font-semibold text-gray-800">{group.name}</h2>
|
||||
@@ -175,9 +179,7 @@ const GroupCard = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{group.description && (
|
||||
<p className="text-gray-600 text-sm mt-1">{group.description}</p>
|
||||
)}
|
||||
{group.description && <p className="text-gray-600 text-sm mt-1">{group.description}</p>}
|
||||
</div>
|
||||
<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">
|
||||
@@ -200,17 +202,19 @@ const GroupCard = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<div className="">
|
||||
{groupServers.length === 0 ? (
|
||||
<p className="text-gray-500 italic">{t('groups.noServers')}</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{groupServers.map(server => {
|
||||
{groupServers.map((server) => {
|
||||
const serverConfig = getServerConfig(server.name);
|
||||
const hasToolRestrictions = serverConfig && serverConfig.tools !== 'all' && Array.isArray(serverConfig.tools);
|
||||
const toolCount = hasToolRestrictions && Array.isArray(serverConfig?.tools)
|
||||
? serverConfig.tools.length
|
||||
: (server.tools?.length || 0); // Show total tool count when all tools are selected
|
||||
const hasToolRestrictions =
|
||||
serverConfig && serverConfig.tools !== 'all' && Array.isArray(serverConfig.tools);
|
||||
const toolCount =
|
||||
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;
|
||||
|
||||
@@ -219,7 +223,7 @@ const GroupCard = ({
|
||||
if (hasToolRestrictions && Array.isArray(serverConfig?.tools)) {
|
||||
return serverConfig.tools;
|
||||
} else if (server.tools && server.tools.length > 0) {
|
||||
return server.tools.map(tool => tool.name);
|
||||
return server.tools.map((tool) => tool.name);
|
||||
}
|
||||
return [];
|
||||
};
|
||||
@@ -235,9 +239,15 @@ const GroupCard = ({
|
||||
onClick={handleServerClick}
|
||||
>
|
||||
<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' :
|
||||
server.status === 'connecting' ? 'bg-yellow-500' : 'bg-red-500'
|
||||
}`}></span>
|
||||
<span
|
||||
className={`inline-block h-2 w-2 rounded-full ${
|
||||
server.status === 'connected'
|
||||
? 'bg-green-500'
|
||||
: server.status === 'connecting'
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-red-500'
|
||||
}`}
|
||||
></span>
|
||||
{toolCount > 0 && (
|
||||
<span className="text-xs text-blue-600 bg-blue-100 px-2 py-0.5 rounded flex items-center gap-1">
|
||||
<Wrench size={12} />
|
||||
@@ -278,7 +288,7 @@ const GroupCard = ({
|
||||
isGroup={true}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupCard
|
||||
export default GroupCard;
|
||||
|
||||
@@ -18,7 +18,14 @@ interface ServerCardProps {
|
||||
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 { showToast } = useToast();
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
@@ -232,10 +239,10 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }:
|
||||
return (
|
||||
<>
|
||||
<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
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
className="flex justify-between items-center cursor-pointer p-4"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
@@ -385,9 +392,9 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }:
|
||||
{isExpanded && (
|
||||
<>
|
||||
{server.tools && (
|
||||
<div className="mt-6">
|
||||
<div className="px-4">
|
||||
<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')}
|
||||
</h6>
|
||||
@@ -405,9 +412,9 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }:
|
||||
)}
|
||||
|
||||
{server.prompts && (
|
||||
<div className="mt-6">
|
||||
<div className="px-4 pb-2">
|
||||
<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')}
|
||||
</h6>
|
||||
|
||||
@@ -171,9 +171,9 @@ const PromptCard = ({ prompt, server, onToggle, onDescriptionUpdate }: PromptCar
|
||||
};
|
||||
|
||||
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
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
className="flex justify-between items-center p-2 cursor-pointer"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
<div className="flex-1">
|
||||
|
||||
@@ -1,19 +1,27 @@
|
||||
import { useState, useCallback, useRef, useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Tool } from '@/types'
|
||||
import { ChevronDown, ChevronRight, Play, Loader, Edit, 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'
|
||||
import { useState, useCallback, useRef, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Tool } from '@/types';
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Play,
|
||||
Loader,
|
||||
Edit,
|
||||
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 {
|
||||
server: string
|
||||
tool: Tool
|
||||
onToggle?: (toolName: string, enabled: boolean) => void
|
||||
onDescriptionUpdate?: (toolName: string, description: string) => void
|
||||
server: string;
|
||||
tool: Tool;
|
||||
onToggle?: (toolName: string, enabled: boolean) => void;
|
||||
onDescriptionUpdate?: (toolName: string, description: string) => void;
|
||||
}
|
||||
|
||||
// Helper to check for "empty" values
|
||||
@@ -26,165 +34,173 @@ function isEmptyValue(value: any): boolean {
|
||||
}
|
||||
|
||||
const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps) => {
|
||||
const { t } = useTranslation()
|
||||
const { showToast } = useToast()
|
||||
const { nameSeparator } = useSettingsData()
|
||||
const [isExpanded, setIsExpanded] = useState(false)
|
||||
const [showRunForm, setShowRunForm] = useState(false)
|
||||
const [isRunning, setIsRunning] = useState(false)
|
||||
const [result, setResult] = useState<ToolCallResult | null>(null)
|
||||
const [isEditingDescription, setIsEditingDescription] = useState(false)
|
||||
const [customDescription, setCustomDescription] = useState(tool.description || '')
|
||||
const descriptionInputRef = useRef<HTMLInputElement>(null)
|
||||
const descriptionTextRef = useRef<HTMLSpanElement>(null)
|
||||
const [textWidth, setTextWidth] = useState<number>(0)
|
||||
const [copiedToolName, setCopiedToolName] = useState(false)
|
||||
const { t } = useTranslation();
|
||||
const { showToast } = useToast();
|
||||
const { nameSeparator } = useSettingsData();
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [showRunForm, setShowRunForm] = useState(false);
|
||||
const [isRunning, setIsRunning] = useState(false);
|
||||
const [result, setResult] = useState<ToolCallResult | null>(null);
|
||||
const [isEditingDescription, setIsEditingDescription] = useState(false);
|
||||
const [customDescription, setCustomDescription] = useState(tool.description || '');
|
||||
const descriptionInputRef = useRef<HTMLInputElement>(null);
|
||||
const descriptionTextRef = useRef<HTMLSpanElement>(null);
|
||||
const [textWidth, setTextWidth] = useState<number>(0);
|
||||
const [copiedToolName, setCopiedToolName] = useState(false);
|
||||
|
||||
// Focus the input when editing mode is activated
|
||||
useEffect(() => {
|
||||
if (isEditingDescription && descriptionInputRef.current) {
|
||||
descriptionInputRef.current.focus()
|
||||
descriptionInputRef.current.focus();
|
||||
// Set input width to match text width
|
||||
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
|
||||
useEffect(() => {
|
||||
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
|
||||
const getStorageKey = useCallback(() => {
|
||||
return `mcphub_tool_form_${server ? `${server}_` : ''}${tool.name}`
|
||||
}, [tool.name, server])
|
||||
return `mcphub_tool_form_${server ? `${server}_` : ''}${tool.name}`;
|
||||
}, [tool.name, server]);
|
||||
|
||||
// Clear form data from localStorage
|
||||
const clearStoredFormData = useCallback(() => {
|
||||
localStorage.removeItem(getStorageKey())
|
||||
}, [getStorageKey])
|
||||
localStorage.removeItem(getStorageKey());
|
||||
}, [getStorageKey]);
|
||||
|
||||
const handleToggle = (enabled: boolean) => {
|
||||
if (onToggle) {
|
||||
onToggle(tool.name, enabled)
|
||||
onToggle(tool.name, enabled);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDescriptionEdit = () => {
|
||||
setIsEditingDescription(true)
|
||||
}
|
||||
setIsEditingDescription(true);
|
||||
};
|
||||
|
||||
const handleDescriptionSave = async () => {
|
||||
try {
|
||||
const result = await updateToolDescription(server, tool.name, customDescription)
|
||||
const result = await updateToolDescription(server, tool.name, customDescription);
|
||||
if (result.success) {
|
||||
setIsEditingDescription(false)
|
||||
setIsEditingDescription(false);
|
||||
if (onDescriptionUpdate) {
|
||||
onDescriptionUpdate(tool.name, customDescription)
|
||||
onDescriptionUpdate(tool.name, customDescription);
|
||||
}
|
||||
} else {
|
||||
// Revert on error
|
||||
setCustomDescription(tool.description || '')
|
||||
console.error('Failed to update tool description:', result.error)
|
||||
setCustomDescription(tool.description || '');
|
||||
console.error('Failed to update tool description:', result.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating tool description:', error)
|
||||
setCustomDescription(tool.description || '')
|
||||
setIsEditingDescription(false)
|
||||
console.error('Error updating tool description:', error);
|
||||
setCustomDescription(tool.description || '');
|
||||
setIsEditingDescription(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setCustomDescription(e.target.value)
|
||||
}
|
||||
setCustomDescription(e.target.value);
|
||||
};
|
||||
|
||||
const handleDescriptionKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleDescriptionSave()
|
||||
handleDescriptionSave();
|
||||
} else if (e.key === 'Escape') {
|
||||
setCustomDescription(tool.description || '')
|
||||
setIsEditingDescription(false)
|
||||
setCustomDescription(tool.description || '');
|
||||
setIsEditingDescription(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyToolName = async (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
|
||||
e.stopPropagation();
|
||||
|
||||
try {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(tool.name)
|
||||
setCopiedToolName(true)
|
||||
showToast(t('common.copySuccess'), 'success')
|
||||
setTimeout(() => setCopiedToolName(false), 2000)
|
||||
await navigator.clipboard.writeText(tool.name);
|
||||
setCopiedToolName(true);
|
||||
showToast(t('common.copySuccess'), 'success');
|
||||
setTimeout(() => setCopiedToolName(false), 2000);
|
||||
} else {
|
||||
// Fallback for HTTP or unsupported clipboard API
|
||||
const textArea = document.createElement('textarea')
|
||||
textArea.value = tool.name
|
||||
textArea.style.position = 'fixed'
|
||||
textArea.style.left = '-9999px'
|
||||
document.body.appendChild(textArea)
|
||||
textArea.focus()
|
||||
textArea.select()
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = tool.name;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-9999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy')
|
||||
setCopiedToolName(true)
|
||||
showToast(t('common.copySuccess'), 'success')
|
||||
setTimeout(() => setCopiedToolName(false), 2000)
|
||||
document.execCommand('copy');
|
||||
setCopiedToolName(true);
|
||||
showToast(t('common.copySuccess'), 'success');
|
||||
setTimeout(() => setCopiedToolName(false), 2000);
|
||||
} catch (err) {
|
||||
showToast(t('common.copyFailed'), 'error')
|
||||
console.error('Copy to clipboard failed:', err)
|
||||
showToast(t('common.copyFailed'), 'error');
|
||||
console.error('Copy to clipboard failed:', err);
|
||||
}
|
||||
document.body.removeChild(textArea)
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
} catch (error) {
|
||||
showToast(t('common.copyFailed'), 'error')
|
||||
console.error('Copy to clipboard failed:', error)
|
||||
showToast(t('common.copyFailed'), 'error');
|
||||
console.error('Copy to clipboard failed:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRunTool = async (arguments_: Record<string, any>) => {
|
||||
setIsRunning(true)
|
||||
setIsRunning(true);
|
||||
try {
|
||||
// filter empty values
|
||||
arguments_ = Object.fromEntries(Object.entries(arguments_).filter(([_, v]) => !isEmptyValue(v)))
|
||||
const result = await callTool({
|
||||
toolName: tool.name,
|
||||
arguments: arguments_,
|
||||
}, server)
|
||||
arguments_ = Object.fromEntries(
|
||||
Object.entries(arguments_).filter(([_, v]) => !isEmptyValue(v)),
|
||||
);
|
||||
const result = await callTool(
|
||||
{
|
||||
toolName: tool.name,
|
||||
arguments: arguments_,
|
||||
},
|
||||
server,
|
||||
);
|
||||
|
||||
setResult(result)
|
||||
setResult(result);
|
||||
// Clear form data on successful submission
|
||||
// clearStoredFormData()
|
||||
} catch (error) {
|
||||
setResult({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Unknown error occurred',
|
||||
})
|
||||
});
|
||||
} finally {
|
||||
setIsRunning(false)
|
||||
setIsRunning(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelRun = () => {
|
||||
setShowRunForm(false)
|
||||
setShowRunForm(false);
|
||||
// Clear form data when cancelled
|
||||
clearStoredFormData()
|
||||
setResult(null)
|
||||
}
|
||||
clearStoredFormData();
|
||||
setResult(null);
|
||||
};
|
||||
|
||||
const handleCloseResult = () => {
|
||||
setResult(null)
|
||||
}
|
||||
setResult(null);
|
||||
};
|
||||
|
||||
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
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="flex justify-between items-center cursor-pointer p-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsExpanded(!isExpanded);
|
||||
}}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<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}
|
||||
title={t('common.copy')}
|
||||
>
|
||||
{copiedToolName ? (
|
||||
<Check size={16} className="text-green-500" />
|
||||
) : (
|
||||
<Copy size={16} />
|
||||
)}
|
||||
{copiedToolName ? <Check size={16} className="text-green-500" /> : <Copy size={16} />}
|
||||
</button>
|
||||
<span className="ml-2 text-sm font-normal text-gray-600 inline-flex items-center">
|
||||
{isEditingDescription ? (
|
||||
@@ -213,14 +225,14 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
minWidth: '100px',
|
||||
width: textWidth > 0 ? `${textWidth + 20}px` : 'auto'
|
||||
width: textWidth > 0 ? `${textWidth + 20}px` : 'auto',
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="ml-2 p-1 text-green-600 hover:text-green-800 cursor-pointer transition-colors"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDescriptionSave()
|
||||
e.stopPropagation();
|
||||
handleDescriptionSave();
|
||||
}}
|
||||
>
|
||||
<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
|
||||
className="ml-2 p-1 text-gray-500 hover:text-blue-600 cursor-pointer transition-colors"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDescriptionEdit()
|
||||
e.stopPropagation();
|
||||
handleDescriptionEdit();
|
||||
}}
|
||||
>
|
||||
<Edit size={14} />
|
||||
@@ -244,10 +258,7 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className="flex items-center space-x-2"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center space-x-2" onClick={(e) => e.stopPropagation()}>
|
||||
<Switch
|
||||
checked={tool.enabled ?? true}
|
||||
onCheckedChange={handleToggle}
|
||||
@@ -256,18 +267,14 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setIsExpanded(true) // Ensure card is expanded when showing run form
|
||||
setShowRunForm(true)
|
||||
e.stopPropagation();
|
||||
setIsExpanded(true); // Ensure card is expanded when showing run form
|
||||
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"
|
||||
disabled={isRunning || !tool.enabled}
|
||||
>
|
||||
{isRunning ? (
|
||||
<Loader size={14} className="animate-spin" />
|
||||
) : (
|
||||
<Play size={14} />
|
||||
)}
|
||||
{isRunning ? <Loader size={14} className="animate-spin" /> : <Play size={14} />}
|
||||
<span>{isRunning ? t('tool.running') : t('tool.run')}</span>
|
||||
</button>
|
||||
<button className="text-gray-400 hover:text-gray-600">
|
||||
@@ -297,7 +304,9 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
|
||||
onCancel={handleCancelRun}
|
||||
loading={isRunning}
|
||||
storageKey={getStorageKey()}
|
||||
title={t('tool.runToolWithName', { name: tool.name.replace(server + nameSeparator, '') })}
|
||||
title={t('tool.runToolWithName', {
|
||||
name: tool.name.replace(server + nameSeparator, ''),
|
||||
})}
|
||||
/>
|
||||
{/* Tool Result */}
|
||||
{result && (
|
||||
@@ -307,12 +316,10 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default ToolCard
|
||||
export default ToolCard;
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@apidevtools/swagger-parser": "^12.0.0",
|
||||
"@modelcontextprotocol/sdk": "^1.20.2",
|
||||
"@modelcontextprotocol/sdk": "^1.25.1",
|
||||
"@node-oauth/oauth2-server": "^5.2.1",
|
||||
"@types/adm-zip": "^0.5.7",
|
||||
"@types/bcrypt": "^6.0.0",
|
||||
|
||||
34
pnpm-lock.yaml
generated
34
pnpm-lock.yaml
generated
@@ -19,8 +19,8 @@ importers:
|
||||
specifier: ^12.0.0
|
||||
version: 12.0.0(openapi-types@12.1.3)
|
||||
'@modelcontextprotocol/sdk':
|
||||
specifier: ^1.20.2
|
||||
version: 1.24.0(zod@3.25.76)
|
||||
specifier: ^1.25.1
|
||||
version: 1.25.1(hono@4.11.3)(zod@3.25.76)
|
||||
'@node-oauth/oauth2-server':
|
||||
specifier: ^5.2.1
|
||||
version: 5.2.1
|
||||
@@ -826,6 +826,12 @@ packages:
|
||||
resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
|
||||
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':
|
||||
resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
|
||||
engines: {node: '>=10.10.0'}
|
||||
@@ -1112,8 +1118,8 @@ packages:
|
||||
'@jridgewell/trace-mapping@0.3.9':
|
||||
resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
|
||||
|
||||
'@modelcontextprotocol/sdk@1.24.0':
|
||||
resolution: {integrity: sha512-D8h5KXY2vHFW8zTuxn2vuZGN0HGrQ5No6LkHwlEA9trVgNdPL3TF1dSqKA7Dny6BbBYKSW/rOBDXdC8KJAjUCg==}
|
||||
'@modelcontextprotocol/sdk@1.25.1':
|
||||
resolution: {integrity: sha512-yO28oVFFC7EBoiKdAn+VqRm+plcfv4v0xp6osG/VsCB0NlPZWi87ajbCZZ8f/RvOFLEu7//rSRmuZZ7lMoe3gQ==}
|
||||
engines: {node: '>=18'}
|
||||
peerDependencies:
|
||||
'@cfworker/json-schema': ^4.1.1
|
||||
@@ -2859,6 +2865,10 @@ packages:
|
||||
resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
|
||||
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:
|
||||
resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
|
||||
|
||||
@@ -3214,6 +3224,9 @@ packages:
|
||||
json-schema-traverse@1.0.0:
|
||||
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:
|
||||
resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
|
||||
|
||||
@@ -5097,6 +5110,10 @@ snapshots:
|
||||
|
||||
'@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':
|
||||
dependencies:
|
||||
'@humanwhocodes/object-schema': 2.0.3
|
||||
@@ -5465,8 +5482,9 @@ snapshots:
|
||||
'@jridgewell/resolve-uri': 3.1.2
|
||||
'@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:
|
||||
'@hono/node-server': 1.19.7(hono@4.11.3)
|
||||
ajv: 8.17.1
|
||||
ajv-formats: 3.0.1(ajv@8.17.1)
|
||||
content-type: 1.0.5
|
||||
@@ -5477,11 +5495,13 @@ snapshots:
|
||||
express: 5.2.1
|
||||
express-rate-limit: 7.5.1(express@5.2.1)
|
||||
jose: 6.1.3
|
||||
json-schema-typed: 8.0.2
|
||||
pkce-challenge: 5.0.1
|
||||
raw-body: 3.0.2
|
||||
zod: 3.25.76
|
||||
zod-to-json-schema: 3.25.0(zod@3.25.76)
|
||||
transitivePeerDependencies:
|
||||
- hono
|
||||
- supports-color
|
||||
|
||||
'@napi-rs/wasm-runtime@0.2.12':
|
||||
@@ -7273,6 +7293,8 @@ snapshots:
|
||||
dependencies:
|
||||
function-bind: 1.1.2
|
||||
|
||||
hono@4.11.3: {}
|
||||
|
||||
html-escaper@2.0.2: {}
|
||||
|
||||
html-parse-stringify@3.0.1:
|
||||
@@ -7812,6 +7834,8 @@ snapshots:
|
||||
|
||||
json-schema-traverse@1.0.0: {}
|
||||
|
||||
json-schema-typed@8.0.2: {}
|
||||
|
||||
json-stable-stringify-without-jsonify@1.0.1: {}
|
||||
|
||||
json5@2.2.3: {}
|
||||
|
||||
Reference in New Issue
Block a user