mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 17:00:15 +01:00
🏗️ feat: Dynamic MCP Server Infrastructure with Access Control (#10787)
* Feature: Dynamic MCP Server with Full UI Management * 🚦 feat: Add MCP Connection Status icons to MCPBuilder panel (#10805) * feature: Add MCP server connection status icons to MCPBuilder panel * refactor: Simplify MCPConfigDialog rendering in MCPBuilderPanel --------- Co-authored-by: Atef Bellaaj <slalom.bellaaj@external.daimlertruck.com> Co-authored-by: Danny Avila <danny@librechat.ai> * fix: address code review feedback for MCP server management - Fix OAuth secret preservation to avoid mutating input parameter by creating a merged config copy in ServerConfigsDB.update() - Improve error handling in getResourcePermissionsMap to propagate critical errors instead of silently returning empty Map - Extract duplicated MCP server filter logic by exposing selectableServers from useMCPServerManager hook and using it in MCPSelect component * test: Update PermissionService tests to throw errors on invalid resource types - Changed the test for handling invalid resource types to ensure it throws an error instead of returning an empty permissions map. - Updated the expectation to check for the specific error message when an invalid resource type is provided. * feat: Implement retry logic for MCP server creation to handle race conditions - Enhanced the createMCPServer method to include retry logic with exponential backoff for handling duplicate key errors during concurrent server creation. - Updated tests to verify that all concurrent requests succeed and that unique server names are generated. - Added a helper function to identify MongoDB duplicate key errors, improving error handling during server creation. * refactor: StatusIcon to use CircleCheck for connected status - Replaced the PlugZap icon with CircleCheck in the ConnectedStatusIcon component to better represent the connected state. - Ensured consistent icon usage across the component for improved visual clarity. * test: Update AccessControlService tests to throw errors on invalid resource types - Modified the test for invalid resource types to ensure it throws an error with a specific message instead of returning an empty permissions map. - This change enhances error handling and improves test coverage for the AccessControlService. * fix: Update error message for missing server name in MCP server retrieval - Changed the error message returned when the server name is not provided from 'MCP ID is required' to 'Server name is required' for better clarity and accuracy in the API response. --------- Co-authored-by: Atef Bellaaj <slalom.bellaaj@external.daimlertruck.com> Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Atef Bellaaj
Danny Avila
parent
41c0a96d39
commit
99f8bd2ce6
103 changed files with 7978 additions and 1003 deletions
639
client/src/components/SidePanel/MCPBuilder/MCPServerDialog.tsx
Normal file
639
client/src/components/SidePanel/MCPBuilder/MCPServerDialog.tsx
Normal file
|
|
@ -0,0 +1,639 @@
|
|||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { FormProvider, useForm, Controller } from 'react-hook-form';
|
||||
import * as RadioGroup from '@radix-ui/react-radio-group';
|
||||
import type { MCPServerCreateParams } from 'librechat-data-provider';
|
||||
import {
|
||||
OGDialog,
|
||||
OGDialogTemplate,
|
||||
OGDialogContent,
|
||||
OGDialogHeader,
|
||||
OGDialogTitle,
|
||||
TrashIcon,
|
||||
Button,
|
||||
Label,
|
||||
Checkbox,
|
||||
Spinner,
|
||||
useToastContext,
|
||||
} from '@librechat/client';
|
||||
import {
|
||||
useCreateMCPServerMutation,
|
||||
useUpdateMCPServerMutation,
|
||||
useDeleteMCPServerMutation,
|
||||
} from '~/data-provider/MCP';
|
||||
import MCPAuth, { type AuthConfig, AuthTypeEnum, AuthorizationTypeEnum } from './MCPAuth';
|
||||
import MCPIcon from '~/components/SidePanel/Agents/MCPIcon';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
import {
|
||||
SystemRoles,
|
||||
Permissions,
|
||||
ResourceType,
|
||||
PermissionBits,
|
||||
PermissionTypes,
|
||||
} from 'librechat-data-provider';
|
||||
import { GenericGrantAccessDialog } from '~/components/Sharing';
|
||||
import { useAuthContext, useHasAccess, useResourcePermissions, MCPServerDefinition } from '~/hooks';
|
||||
|
||||
// Form data with nested auth structure matching AuthConfig
|
||||
interface MCPServerFormData {
|
||||
// Server metadata
|
||||
title: string;
|
||||
description?: string;
|
||||
icon?: string;
|
||||
|
||||
// Connection details
|
||||
url: string;
|
||||
type: 'streamable-http' | 'sse';
|
||||
|
||||
// Nested auth configuration (matches AuthConfig directly)
|
||||
auth: AuthConfig;
|
||||
|
||||
// UI-only validation
|
||||
trust: boolean;
|
||||
}
|
||||
|
||||
interface MCPServerDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
children: React.ReactNode;
|
||||
triggerRef?: React.MutableRefObject<HTMLButtonElement | null>;
|
||||
server?: MCPServerDefinition | null;
|
||||
}
|
||||
|
||||
export default function MCPServerDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
children,
|
||||
triggerRef,
|
||||
server,
|
||||
}: MCPServerDialogProps) {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
|
||||
// Mutations
|
||||
const createMutation = useCreateMCPServerMutation();
|
||||
const updateMutation = useUpdateMCPServerMutation();
|
||||
const deleteMutation = useDeleteMCPServerMutation();
|
||||
|
||||
// Convert McpServer to form data
|
||||
const defaultValues = useMemo<MCPServerFormData>(() => {
|
||||
if (server) {
|
||||
// Determine auth type from server config
|
||||
let authType: AuthTypeEnum = AuthTypeEnum.None;
|
||||
if (server.config.oauth) {
|
||||
authType = AuthTypeEnum.OAuth;
|
||||
} else if ('api_key' in server.config) {
|
||||
authType = AuthTypeEnum.ServiceHttp;
|
||||
}
|
||||
|
||||
return {
|
||||
title: server.config.title || '',
|
||||
description: server.config.description || '',
|
||||
url: 'url' in server.config ? server.config.url : '',
|
||||
type: (server.config.type as 'streamable-http' | 'sse') || 'streamable-http',
|
||||
icon: server.config.iconPath || '',
|
||||
auth: {
|
||||
auth_type: authType,
|
||||
api_key: '',
|
||||
api_key_authorization_type: AuthorizationTypeEnum.Basic,
|
||||
api_key_custom_header: '',
|
||||
oauth_client_id: server.config.oauth?.client_id || '',
|
||||
oauth_client_secret: '', // NEVER pre-fill secrets
|
||||
oauth_authorization_url: server.config.oauth?.authorization_url || '',
|
||||
oauth_token_url: server.config.oauth?.token_url || '',
|
||||
oauth_scope: server.config.oauth?.scope || '',
|
||||
server_id: server.serverName, // For edit mode redirect URI
|
||||
},
|
||||
trust: true, // Pre-check for existing servers
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: '',
|
||||
description: '',
|
||||
url: '',
|
||||
type: 'streamable-http',
|
||||
icon: '',
|
||||
auth: {
|
||||
auth_type: AuthTypeEnum.None,
|
||||
api_key: '',
|
||||
api_key_authorization_type: AuthorizationTypeEnum.Basic,
|
||||
api_key_custom_header: '',
|
||||
oauth_client_id: '',
|
||||
oauth_client_secret: '',
|
||||
oauth_authorization_url: '',
|
||||
oauth_token_url: '',
|
||||
oauth_scope: '',
|
||||
},
|
||||
trust: false,
|
||||
};
|
||||
}, [server]);
|
||||
|
||||
const methods = useForm<MCPServerFormData>({
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
register,
|
||||
formState: { errors },
|
||||
control,
|
||||
watch,
|
||||
reset,
|
||||
} = methods;
|
||||
|
||||
const iconValue = watch('icon');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [showRedirectUriDialog, setShowRedirectUriDialog] = useState(false);
|
||||
const [createdServerId, setCreatedServerId] = useState<string | null>(null);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
// Reset form when dialog opens or server changes
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- defaultValues is derived from server
|
||||
}, [open, server, reset]);
|
||||
|
||||
const handleIconChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
const base64String = reader.result as string;
|
||||
methods.setValue('icon', base64String);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!server) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
await deleteMutation.mutateAsync(server.serverName);
|
||||
|
||||
showToast({
|
||||
message: localize('com_ui_mcp_server_deleted'),
|
||||
status: 'success',
|
||||
});
|
||||
|
||||
setShowDeleteConfirm(false);
|
||||
onOpenChange(false);
|
||||
|
||||
setTimeout(() => {
|
||||
triggerRef?.current?.focus();
|
||||
}, 0);
|
||||
} catch (error: any) {
|
||||
let errorMessage = localize('com_ui_error');
|
||||
|
||||
if (error && typeof error === 'object' && 'response' in error) {
|
||||
const axiosError = error as any;
|
||||
if (axiosError.response?.data?.error) {
|
||||
errorMessage = axiosError.response.data.error;
|
||||
}
|
||||
} else if (error.message) {
|
||||
errorMessage = error.message;
|
||||
}
|
||||
|
||||
showToast({
|
||||
message: errorMessage,
|
||||
status: 'error',
|
||||
});
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = handleSubmit(async (formData: MCPServerFormData) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
// Convert form data to API params - everything goes in config now
|
||||
const config: any = {
|
||||
type: formData.type,
|
||||
url: formData.url,
|
||||
title: formData.title,
|
||||
...(formData.description && { description: formData.description }),
|
||||
...(formData.icon && { iconPath: formData.icon }),
|
||||
};
|
||||
|
||||
// Add OAuth if auth type is oauth and any fields are filled
|
||||
if (
|
||||
formData.auth.auth_type === AuthTypeEnum.OAuth &&
|
||||
(formData.auth.oauth_client_id ||
|
||||
formData.auth.oauth_client_secret ||
|
||||
formData.auth.oauth_authorization_url ||
|
||||
formData.auth.oauth_token_url ||
|
||||
formData.auth.oauth_scope)
|
||||
) {
|
||||
config.oauth = {};
|
||||
if (formData.auth.oauth_client_id) {
|
||||
config.oauth.client_id = formData.auth.oauth_client_id;
|
||||
}
|
||||
if (formData.auth.oauth_client_secret) {
|
||||
config.oauth.client_secret = formData.auth.oauth_client_secret;
|
||||
}
|
||||
if (formData.auth.oauth_authorization_url) {
|
||||
config.oauth.authorization_url = formData.auth.oauth_authorization_url;
|
||||
}
|
||||
if (formData.auth.oauth_token_url) {
|
||||
config.oauth.token_url = formData.auth.oauth_token_url;
|
||||
}
|
||||
if (formData.auth.oauth_scope) {
|
||||
config.oauth.scope = formData.auth.oauth_scope;
|
||||
}
|
||||
}
|
||||
|
||||
const params: MCPServerCreateParams = {
|
||||
config,
|
||||
};
|
||||
|
||||
// Call mutation based on create vs edit mode
|
||||
const result = server
|
||||
? await updateMutation.mutateAsync({ serverName: server.serverName, data: params })
|
||||
: await createMutation.mutateAsync(params);
|
||||
|
||||
showToast({
|
||||
message: server
|
||||
? localize('com_ui_mcp_server_updated')
|
||||
: localize('com_ui_mcp_server_created'),
|
||||
status: 'success',
|
||||
});
|
||||
|
||||
// Show redirect URI dialog only on creation with OAuth
|
||||
if (!server && formData.auth.auth_type === AuthTypeEnum.OAuth) {
|
||||
setCreatedServerId(result.serverName);
|
||||
setShowRedirectUriDialog(true);
|
||||
} else {
|
||||
onOpenChange(false);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
triggerRef?.current?.focus();
|
||||
}, 0);
|
||||
} catch (error: any) {
|
||||
let errorMessage = localize('com_ui_error');
|
||||
|
||||
if (error && typeof error === 'object' && 'response' in error) {
|
||||
const axiosError = error as any;
|
||||
if (axiosError.response?.data?.error) {
|
||||
errorMessage = axiosError.response.data.error;
|
||||
}
|
||||
} else if (error.message) {
|
||||
errorMessage = error.message;
|
||||
}
|
||||
|
||||
showToast({
|
||||
message: errorMessage,
|
||||
status: 'error',
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
});
|
||||
const { user } = useAuthContext();
|
||||
|
||||
// Check global permission to share MCP servers
|
||||
const hasAccessToShareMcpServers = useHasAccess({
|
||||
permissionType: PermissionTypes.MCP_SERVERS,
|
||||
permission: Permissions.SHARE,
|
||||
});
|
||||
|
||||
// Check user's permissions on this specific MCP server
|
||||
const { hasPermission, isLoading: permissionsLoading } = useResourcePermissions(
|
||||
ResourceType.MCPSERVER,
|
||||
server?.dbId || '',
|
||||
);
|
||||
|
||||
const canShareThisServer = hasPermission(PermissionBits.SHARE);
|
||||
|
||||
const shouldShowShareButton =
|
||||
server && // Only in edit mode
|
||||
(user?.role === SystemRoles.ADMIN || canShareThisServer) &&
|
||||
hasAccessToShareMcpServers &&
|
||||
!permissionsLoading;
|
||||
|
||||
const redirectUri = createdServerId
|
||||
? `${window.location.origin}/api/mcp/${createdServerId}/oauth/callback`
|
||||
: '';
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Delete confirmation dialog */}
|
||||
<OGDialog
|
||||
open={showDeleteConfirm}
|
||||
onOpenChange={(open) => {
|
||||
setShowDeleteConfirm(open);
|
||||
}}
|
||||
>
|
||||
<OGDialogTemplate
|
||||
title={localize('com_ui_delete')}
|
||||
className="max-w-[450px]"
|
||||
main={
|
||||
<Label className="text-left text-sm font-medium">
|
||||
{localize('com_ui_mcp_server_delete_confirm')}
|
||||
</Label>
|
||||
}
|
||||
selection={{
|
||||
selectHandler: handleDelete,
|
||||
selectClasses:
|
||||
'bg-destructive text-white transition-all duration-200 hover:bg-destructive/80',
|
||||
selectText: isDeleting ? <Spinner /> : localize('com_ui_delete'),
|
||||
}}
|
||||
/>
|
||||
</OGDialog>
|
||||
|
||||
{/* Post-creation redirect URI dialog */}
|
||||
<OGDialog
|
||||
open={showRedirectUriDialog}
|
||||
onOpenChange={(open) => {
|
||||
setShowRedirectUriDialog(open);
|
||||
if (!open) {
|
||||
onOpenChange(false);
|
||||
setCreatedServerId(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<OGDialogContent className="w-full max-w-lg border-none bg-surface-primary text-text-primary">
|
||||
<OGDialogHeader className="border-b border-border-light sm:p-3">
|
||||
<OGDialogTitle>{localize('com_ui_mcp_server_created')}</OGDialogTitle>
|
||||
</OGDialogHeader>
|
||||
<div className="p-4 sm:p-6 sm:pt-4">
|
||||
<p className="mb-4 text-sm text-text-primary">
|
||||
{localize('com_ui_redirect_uri_instructions')}
|
||||
</p>
|
||||
<div className="rounded-lg border border-border-medium bg-surface-secondary p-3">
|
||||
<label className="mb-2 block text-xs font-medium text-text-secondary">
|
||||
{localize('com_ui_redirect_uri')}
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
className="flex-1 rounded border border-border-medium bg-surface-primary px-3 py-2 text-sm"
|
||||
value={redirectUri}
|
||||
readOnly
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(redirectUri);
|
||||
showToast({
|
||||
message: localize('com_ui_copied'),
|
||||
status: 'success',
|
||||
});
|
||||
}}
|
||||
variant="outline"
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
{localize('com_ui_copy_link')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex justify-end">
|
||||
<Button
|
||||
onClick={() => {
|
||||
setShowRedirectUriDialog(false);
|
||||
onOpenChange(false);
|
||||
setCreatedServerId(null);
|
||||
}}
|
||||
variant="submit"
|
||||
className="text-white"
|
||||
>
|
||||
{localize('com_ui_done')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
|
||||
{/* Main MCP Server Dialog */}
|
||||
<OGDialog open={open} onOpenChange={onOpenChange} triggerRef={triggerRef}>
|
||||
{children}
|
||||
<OGDialogTemplate
|
||||
title={server ? localize('com_ui_edit_mcp_server') : localize('com_ui_add_mcp_server')}
|
||||
description={
|
||||
server
|
||||
? localize('com_ui_edit_mcp_server_dialog_description', {
|
||||
serverName: server.serverName,
|
||||
})
|
||||
: undefined
|
||||
}
|
||||
className="w-11/12 md:max-w-2xl"
|
||||
main={
|
||||
<FormProvider {...methods}>
|
||||
<div className="max-h-[60vh] space-y-4 overflow-y-auto px-1">
|
||||
{/* Icon Picker */}
|
||||
<div>
|
||||
<MCPIcon icon={iconValue} onIconChange={handleIconChange} />
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title" className="text-sm font-medium">
|
||||
{localize('com_ui_name')} <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<input
|
||||
autoComplete="off"
|
||||
{...register('title', {
|
||||
required: true,
|
||||
pattern: {
|
||||
value: /^[a-zA-Z0-9 ]+$/,
|
||||
message: localize('com_ui_mcp_title_invalid'),
|
||||
},
|
||||
})}
|
||||
className="border-token-border-medium flex h-9 w-full rounded-lg border bg-transparent px-3 py-1.5 text-sm outline-none placeholder:text-text-secondary-alt focus:ring-1 focus:ring-border-light"
|
||||
placeholder={localize('com_agents_mcp_name_placeholder')}
|
||||
/>
|
||||
{errors.title && (
|
||||
<span className="text-xs text-red-500">
|
||||
{errors.title.type === 'pattern'
|
||||
? errors.title.message
|
||||
: localize('com_ui_field_required')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description" className="text-sm font-medium">
|
||||
{localize('com_ui_description')}
|
||||
<span className="ml-1 text-xs text-text-secondary-alt">
|
||||
{localize('com_ui_optional')}
|
||||
</span>
|
||||
</Label>
|
||||
<input
|
||||
id="description"
|
||||
{...register('description')}
|
||||
className="border-token-border-medium flex h-9 w-full rounded-lg border bg-transparent px-3 py-1.5 text-sm outline-none placeholder:text-text-secondary-alt focus:ring-1 focus:ring-border-light"
|
||||
placeholder={localize('com_agents_mcp_description_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* URL */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="url" className="text-sm font-medium">
|
||||
{localize('com_ui_mcp_url')} <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<input
|
||||
id="url"
|
||||
{...register('url', {
|
||||
required: true,
|
||||
})}
|
||||
className="border-token-border-medium flex h-9 w-full rounded-lg border bg-transparent px-3 py-1.5 text-sm outline-none placeholder:text-text-secondary-alt focus:ring-1 focus:ring-border-light"
|
||||
placeholder="https://mcp.example.com"
|
||||
/>
|
||||
{errors.url && (
|
||||
<span className="text-xs text-red-500">
|
||||
{errors.url.type === 'required'
|
||||
? localize('com_ui_field_required')
|
||||
: errors.url.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Server Type */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="type" className="text-sm font-medium">
|
||||
{localize('com_ui_mcp_server_type')}
|
||||
</Label>
|
||||
<Controller
|
||||
name="type"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<RadioGroup.Root
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<label
|
||||
htmlFor="type-streamable-http"
|
||||
className="flex cursor-pointer items-center gap-1"
|
||||
>
|
||||
<RadioGroup.Item
|
||||
type="button"
|
||||
value="streamable-http"
|
||||
id="type-streamable-http"
|
||||
className={cn(
|
||||
'mr-1 flex h-5 w-5 items-center justify-center rounded-full border',
|
||||
'border-border-heavy bg-surface-primary',
|
||||
)}
|
||||
>
|
||||
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-text-primary" />
|
||||
</RadioGroup.Item>
|
||||
{localize('com_ui_mcp_type_streamable_http')}
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label
|
||||
htmlFor="type-sse"
|
||||
className="flex cursor-pointer items-center gap-1"
|
||||
>
|
||||
<RadioGroup.Item
|
||||
type="button"
|
||||
value="sse"
|
||||
id="type-sse"
|
||||
className={cn(
|
||||
'mr-1 flex h-5 w-5 items-center justify-center rounded-full border',
|
||||
'border-border-heavy bg-surface-primary',
|
||||
)}
|
||||
>
|
||||
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-text-primary" />
|
||||
</RadioGroup.Item>
|
||||
{localize('com_ui_mcp_type_sse')}
|
||||
</label>
|
||||
</div>
|
||||
</RadioGroup.Root>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Authentication */}
|
||||
<Controller
|
||||
name="auth"
|
||||
control={control}
|
||||
render={({ field }) => <MCPAuth value={field.value} onChange={field.onChange} />}
|
||||
/>
|
||||
|
||||
{/* Trust Checkbox */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Controller
|
||||
name="trust"
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
id="trust"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
aria-labelledby="trust-this-mcp-label"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label
|
||||
id="trust-this-mcp-label"
|
||||
htmlFor="trust"
|
||||
className="flex cursor-pointer flex-col text-sm font-medium"
|
||||
>
|
||||
<span>
|
||||
{localize('com_ui_trust_app')} <span className="text-red-500">*</span>
|
||||
</span>
|
||||
<span className="text-xs font-normal text-text-secondary">
|
||||
{localize('com_agents_mcp_trust_subtext')}
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
{errors.trust && (
|
||||
<span className="text-xs text-red-500">{localize('com_ui_field_required')}</span>
|
||||
)}
|
||||
</div>
|
||||
</FormProvider>
|
||||
}
|
||||
footerClassName="sm:justify-between"
|
||||
leftButtons={
|
||||
server ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
aria-label="Delete MCP server"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={isSubmitting || isDeleting}
|
||||
>
|
||||
<div className="flex w-full items-center justify-center gap-2 text-red-500">
|
||||
<TrashIcon />
|
||||
</div>
|
||||
</Button>
|
||||
{shouldShowShareButton && (
|
||||
<GenericGrantAccessDialog
|
||||
resourceDbId={server.dbId}
|
||||
resourceName={server.config.title || ''}
|
||||
resourceType={ResourceType.MCPSERVER}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
buttons={
|
||||
<Button
|
||||
type="button"
|
||||
variant="submit"
|
||||
onClick={onSubmit}
|
||||
disabled={isSubmitting}
|
||||
className="text-white"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<Spinner className="size-4" />
|
||||
) : (
|
||||
localize(server ? 'com_ui_update' : 'com_ui_create')
|
||||
)}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</OGDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue