diff --git a/web/app/components/base/tab-slider/index.tsx b/web/app/components/base/tab-slider/index.tsx index 55c44d5ea8..7c9364baf9 100644 --- a/web/app/components/base/tab-slider/index.tsx +++ b/web/app/components/base/tab-slider/index.tsx @@ -11,12 +11,14 @@ type Option = { type TabSliderProps = { className?: string value: string + itemClassName?: string | ((active: boolean) => string) onChange: (v: string) => void options: Option[] } const TabSlider: FC = ({ className, + itemClassName, value, onChange, options, @@ -58,6 +60,7 @@ const TabSlider: FC = ({ index === activeIndex ? 'text-text-primary' : 'text-text-tertiary', + typeof itemClassName === 'function' ? itemClassName(index === activeIndex) : itemClassName, )} onClick={() => { if (index !== activeIndex) { diff --git a/web/app/components/tools/mcp/headers-input.tsx b/web/app/components/tools/mcp/headers-input.tsx index 81d62993c9..ede5b6cffe 100644 --- a/web/app/components/tools/mcp/headers-input.tsx +++ b/web/app/components/tools/mcp/headers-input.tsx @@ -1,6 +1,7 @@ 'use client' -import React, { useCallback } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' +import { v4 as uuid } from 'uuid' import { RiAddLine, RiDeleteBinLine } from '@remixicon/react' import Input from '@/app/components/base/input' import Button from '@/app/components/base/button' @@ -8,57 +9,46 @@ import ActionButton from '@/app/components/base/action-button' import cn from '@/utils/classnames' export type HeaderItem = { + id: string key: string value: string } type Props = { - headers: Record - onChange: (headers: Record) => void + headersItems: HeaderItem[] + onChange: (headerItems: HeaderItem[]) => void readonly?: boolean isMasked?: boolean } const HeadersInput = ({ - headers, + headersItems, onChange, readonly = false, isMasked = false, }: Props) => { const { t } = useTranslation() - const headerItems = Object.entries(headers).map(([key, value]) => ({ key, value })) - - const handleItemChange = useCallback((index: number, field: 'key' | 'value', value: string) => { - const newItems = [...headerItems] + const handleItemChange = (index: number, field: 'key' | 'value', value: string) => { + const newItems = [...headersItems] newItems[index] = { ...newItems[index], [field]: value } - const newHeaders = newItems.reduce((acc, item) => { - if (item.key.trim()) - acc[item.key.trim()] = item.value - return acc - }, {} as Record) + onChange(newItems) + } - onChange(newHeaders) - }, [headerItems, onChange]) + const handleRemoveItem = (index: number) => { + const newItems = headersItems.filter((_, i) => i !== index) - const handleRemoveItem = useCallback((index: number) => { - const newItems = headerItems.filter((_, i) => i !== index) - const newHeaders = newItems.reduce((acc, item) => { - if (item.key.trim()) - acc[item.key.trim()] = item.value + onChange(newItems) + } - return acc - }, {} as Record) - onChange(newHeaders) - }, [headerItems, onChange]) + const handleAddItem = () => { + const newItems = [...headersItems, { id: uuid(), key: '', value: '' }] - const handleAddItem = useCallback(() => { - const newHeaders = { ...headers, '': '' } - onChange(newHeaders) - }, [headers, onChange]) + onChange(newItems) + } - if (headerItems.length === 0) { + if (headersItems.length === 0) { return (
@@ -91,10 +81,10 @@ const HeadersInput = ({
{t('tools.mcp.modal.headerKey')}
{t('tools.mcp.modal.headerValue')}
- {headerItems.map((item, index) => ( -
( +
- {!readonly && headerItems.length > 1 && ( + {!readonly && !!headersItems.length && ( handleRemoveItem(index)} className='mr-2' diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx index 1d888c57e8..987a517ef5 100644 --- a/web/app/components/tools/mcp/modal.tsx +++ b/web/app/components/tools/mcp/modal.tsx @@ -1,6 +1,7 @@ 'use client' -import React, { useRef, useState } from 'react' +import React, { useCallback, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' +import { v4 as uuid } from 'uuid' import { getDomain } from 'tldts' import { RiCloseLine, RiEditLine } from '@remixicon/react' import { Mcp } from '@/app/components/base/icons/src/vender/other' @@ -11,6 +12,7 @@ import Modal from '@/app/components/base/modal' import Button from '@/app/components/base/button' import Input from '@/app/components/base/input' import HeadersInput from './headers-input' +import type { HeaderItem } from './headers-input' import type { AppIconType } from '@/types/app' import type { ToolWithProvider } from '@/app/components/workflow/types' import { noop } from 'lodash-es' @@ -19,6 +21,9 @@ import { uploadRemoteFileInfo } from '@/service/common' import cn from '@/utils/classnames' import { useHover } from 'ahooks' import { shouldUseMcpIconForAppIcon } from '@/utils/mcp' +import TabSlider from '@/app/components/base/tab-slider' +import { MCPAuthMethod } from '@/app/components/tools/types' +import Switch from '@/app/components/base/switch' export type DuplicateAppModalProps = { data?: ToolWithProvider @@ -30,9 +35,17 @@ export type DuplicateAppModalProps = { icon: string icon_background?: string | null server_identifier: string - timeout: number - sse_read_timeout: number headers?: Record + is_dynamic_registration?: boolean + authentication?: { + client_id?: string + client_secret?: string + grant_type?: string + } + configuration: { + timeout: number + sse_read_timeout: number + } }) => void onHide: () => void } @@ -63,6 +76,20 @@ const MCPModal = ({ const { t } = useTranslation() const isCreate = !data + const authMethods = [ + { + text: t('tools.mcp.modal.authentication'), + value: MCPAuthMethod.authentication, + }, + { + text: t('tools.mcp.modal.headers'), + value: MCPAuthMethod.headers, + }, + { + text: t('tools.mcp.modal.configurations'), + value: MCPAuthMethod.configurations, + }, + ] const originalServerUrl = data?.server_url const originalServerID = data?.server_identifier const [url, setUrl] = React.useState(data?.server_url || '') @@ -72,12 +99,16 @@ const MCPModal = ({ const [serverIdentifier, setServerIdentifier] = React.useState(data?.server_identifier || '') const [timeout, setMcpTimeout] = React.useState(data?.timeout || 30) const [sseReadTimeout, setSseReadTimeout] = React.useState(data?.sse_read_timeout || 300) - const [headers, setHeaders] = React.useState>( - data?.masked_headers || {}, + const [headers, setHeaders] = React.useState( + Object.entries(data?.masked_headers || {}).map(([key, value]) => ({ id: uuid(), key, value })), ) const [isFetchingIcon, setIsFetchingIcon] = useState(false) const appIconRef = useRef(null) const isHovering = useHover(appIconRef) + const [authMethod, setAuthMethod] = useState(MCPAuthMethod.authentication) + const [isDynamicRegistration, setIsDynamicRegistration] = useState(isCreate ? true : data?.is_dynamic_registration) + const [clientID, setClientID] = useState(data?.authentication?.client_id || '') + const [credentials, setCredentials] = useState(data?.authentication?.client_secret || '') // Update states when data changes (for edit mode) React.useEffect(() => { @@ -87,8 +118,11 @@ const MCPModal = ({ setServerIdentifier(data.server_identifier || '') setMcpTimeout(data.timeout || 30) setSseReadTimeout(data.sse_read_timeout || 300) - setHeaders(data.masked_headers || {}) + setHeaders(Object.entries(data.masked_headers || {}).map(([key, value]) => ({ id: uuid(), key, value }))) setAppIcon(getIcon(data)) + setIsDynamicRegistration(data.is_dynamic_registration) + setClientID(data.authentication?.client_id || '') + setCredentials(data.authentication?.client_secret || '') } else { // Reset for create mode @@ -97,8 +131,11 @@ const MCPModal = ({ setServerIdentifier('') setMcpTimeout(30) setSseReadTimeout(300) - setHeaders({}) + setHeaders([]) setAppIcon(DEFAULT_ICON as AppIconSelection) + setIsDynamicRegistration(true) + setClientID('') + setCredentials('') } }, [data]) @@ -150,6 +187,11 @@ const MCPModal = ({ Toast.notify({ type: 'error', message: 'invalid server identifier' }) return } + const formattedHeaders = headers.reduce((acc, item) => { + if (item.key.trim()) + acc[item.key.trim()] = item.value + return acc + }, {} as Record) await onConfirm({ server_url: originalServerUrl === url ? '[__HIDDEN__]' : url.trim(), name, @@ -157,14 +199,25 @@ const MCPModal = ({ icon: appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId, icon_background: appIcon.type === 'emoji' ? appIcon.background : undefined, server_identifier: serverIdentifier.trim(), - timeout: timeout || 30, - sse_read_timeout: sseReadTimeout || 300, - headers: Object.keys(headers).length > 0 ? headers : undefined, + headers: Object.keys(formattedHeaders).length > 0 ? formattedHeaders : undefined, + is_dynamic_registration: isDynamicRegistration, + authentication: { + client_id: clientID, + client_secret: credentials, + }, + configuration: { + timeout: timeout || 30, + sse_read_timeout: sseReadTimeout || 300, + }, }) if(isCreate) onHide() } + const handleAuthMethodChange = useCallback((value: string) => { + setAuthMethod(value as MCPAuthMethod) + }, []) + return ( <> )}
-
-
- {t('tools.mcp.modal.timeout')} -
- setMcpTimeout(Number(e.target.value))} - onBlur={e => handleBlur(e.target.value.trim())} - placeholder={t('tools.mcp.modal.timeoutPlaceholder')} - /> -
-
-
- {t('tools.mcp.modal.sseReadTimeout')} -
- setSseReadTimeout(Number(e.target.value))} - onBlur={e => handleBlur(e.target.value.trim())} - placeholder={t('tools.mcp.modal.timeoutPlaceholder')} - /> -
-
-
- {t('tools.mcp.modal.headers')} -
-
{t('tools.mcp.modal.headersTip')}
- 0} - /> -
+ { + return `flex-1 ${isActive && 'text-text-accent-light-mode-only'}` + }} + value={authMethod} + onChange={handleAuthMethodChange} + options={authMethods} + /> + { + authMethod === MCPAuthMethod.authentication && ( + <> +
+
+ + {t('tools.mcp.modal.useDynamicClientRegistration')} +
+
+
+
+ {t('tools.mcp.modal.clientID')} +
+ setClientID(e.target.value)} + onBlur={e => handleBlur(e.target.value.trim())} + placeholder={t('tools.mcp.modal.clientID')} + disabled={isDynamicRegistration} + /> +
+
+
+ {t('tools.mcp.modal.clientSecret')} +
+ setCredentials(e.target.value)} + onBlur={e => handleBlur(e.target.value.trim())} + placeholder={t('tools.mcp.modal.clientSecretPlaceholder')} + disabled={isDynamicRegistration} + /> +
+ + ) + } + { + authMethod === MCPAuthMethod.headers && ( +
+
+ {t('tools.mcp.modal.headers')} +
+
{t('tools.mcp.modal.headersTip')}
+ item.key.trim()).length > 0} + /> +
+ ) + } + { + authMethod === MCPAuthMethod.configurations && ( + <> +
+
+ {t('tools.mcp.modal.timeout')} +
+ setMcpTimeout(Number(e.target.value))} + onBlur={e => handleBlur(e.target.value.trim())} + placeholder={t('tools.mcp.modal.timeoutPlaceholder')} + /> +
+
+
+ {t('tools.mcp.modal.sseReadTimeout')} +
+ setSseReadTimeout(Number(e.target.value))} + onBlur={e => handleBlur(e.target.value.trim())} + placeholder={t('tools.mcp.modal.timeoutPlaceholder')} + /> +
+ + ) + }
diff --git a/web/app/components/tools/types.ts b/web/app/components/tools/types.ts index 623a7b6d8a..1bfccc04e5 100644 --- a/web/app/components/tools/types.ts +++ b/web/app/components/tools/types.ts @@ -65,6 +65,15 @@ export type Collection = { masked_headers?: Record is_authorized?: boolean provider?: string + is_dynamic_registration?: boolean + authentication?: { + client_id?: string + client_secret?: string + } + configuration?: { + timeout?: number + sse_read_timeout?: number + } } export type ToolParameter = { @@ -192,3 +201,9 @@ export type MCPServerDetail = { parameters?: Record headers?: Record } + +export enum MCPAuthMethod { + authentication = 'authentication', + headers = 'headers', + configurations = 'configurations', +} diff --git a/web/i18n/en-US/tools.ts b/web/i18n/en-US/tools.ts index 3fba10447f..ec78aa2084 100644 --- a/web/i18n/en-US/tools.ts +++ b/web/i18n/en-US/tools.ts @@ -203,6 +203,12 @@ const translation = { timeout: 'Timeout', sseReadTimeout: 'SSE Read Timeout', timeoutPlaceholder: '30', + authentication: 'Authentication', + useDynamicClientRegistration: 'Use Dynamic Client Registration', + clientID: 'Client ID', + clientSecret: 'Client Secret', + clientSecretPlaceholder: 'Client Secret', + configurations: 'Configurations', }, delete: 'Remove MCP Server', deleteConfirmTitle: 'Would you like to remove {{mcp}}?', diff --git a/web/i18n/zh-Hans/tools.ts b/web/i18n/zh-Hans/tools.ts index 15b1c7f592..8382d192f6 100644 --- a/web/i18n/zh-Hans/tools.ts +++ b/web/i18n/zh-Hans/tools.ts @@ -203,6 +203,12 @@ const translation = { timeout: '超时时间', sseReadTimeout: 'SSE 读取超时时间', timeoutPlaceholder: '30', + authentication: '认证', + useDynamicClientRegistration: '使用动态客户端注册', + clientID: '客户端 ID', + clientSecret: '客户端密钥', + clientSecretPlaceholder: '客户端密钥', + configurations: '配置', }, delete: '删除 MCP 服务', deleteConfirmTitle: '你想要删除 {{mcp}} 吗？',