425 lines
17 KiB
TypeScript
425 lines
17 KiB
TypeScript
|
'use client'
|
||
|
|
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'
|
||
|
|
import AppIconPicker from '@/app/components/base/app-icon-picker'
|
||
|
|
import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
|
||
|
|
import AppIcon from '@/app/components/base/app-icon'
|
||
|
|
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'
|
||
|
|
import Toast from '@/app/components/base/toast'
|
||
|
|
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'
|
||
|
|
import AlertTriangle from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback/AlertTriangle'
|
||
|
|
import { API_PREFIX } from '@/config'
|
||
|
|
|
||
|
|
export type DuplicateAppModalProps = {
|
||
|
|
data?: ToolWithProvider
|
||
|
|
show: boolean
|
||
|
|
onConfirm: (info: {
|
||
|
|
name: string
|
||
|
|
server_url: string
|
||
|
|
icon_type: AppIconType
|
||
|
|
icon: string
|
||
|
|
icon_background?: string | null
|
||
|
|
server_identifier: string
|
||
|
|
headers?: Record<string, string>
|
||
|
|
is_dynamic_registration?: boolean
|
||
|
|
authentication?: {
|
||
|
|
client_id?: string
|
||
|
|
client_secret?: string
|
||
|
|
grant_type?: string
|
||
|
|
}
|
||
|
|
configuration: {
|
||
|
|
timeout: number
|
||
|
|
sse_read_timeout: number
|
||
|
|
}
|
||
|
|
}) => void
|
||
|
|
onHide: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const DEFAULT_ICON = { type: 'emoji', icon: '🔗', background: '#6366F1' }
|
||
|
|
const extractFileId = (url: string) => {
|
||
|
|
const match = url.match(/files\/(.+?)\/file-preview/)
|
||
|
|
return match ? match[1] : null
|
||
|
|
}
|
||
|
|
const getIcon = (data?: ToolWithProvider) => {
|
||
|
|
if (!data)
|
||
|
|
return DEFAULT_ICON as AppIconSelection
|
||
|
|
if (typeof data.icon === 'string')
|
||
|
|
return { type: 'image', url: data.icon, fileId: extractFileId(data.icon) } as AppIconSelection
|
||
|
|
return {
|
||
|
|
...data.icon,
|
||
|
|
icon: data.icon.content,
|
||
|
|
type: 'emoji',
|
||
|
|
} as unknown as AppIconSelection
|
||
|
|
}
|
||
|
|
|
||
|
|
const MCPModal = ({
|
||
|
|
data,
|
||
|
|
show,
|
||
|
|
onConfirm,
|
||
|
|
onHide,
|
||
|
|
}: DuplicateAppModalProps) => {
|
||
|
|
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 || '')
|
||
|
|
const [name, setName] = React.useState(data?.name || '')
|
||
|
|
const [appIcon, setAppIcon] = useState<AppIconSelection>(() => getIcon(data))
|
||
|
|
const [showAppIconPicker, setShowAppIconPicker] = useState(false)
|
||
|
|
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<HeaderItem[]>(
|
||
|
|
Object.entries(data?.masked_headers || {}).map(([key, value]) => ({ id: uuid(), key, value })),
|
||
|
|
)
|
||
|
|
const [isFetchingIcon, setIsFetchingIcon] = useState(false)
|
||
|
|
const appIconRef = useRef<HTMLDivElement>(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(() => {
|
||
|
|
if (data) {
|
||
|
|
setUrl(data.server_url || '')
|
||
|
|
setName(data.name || '')
|
||
|
|
setServerIdentifier(data.server_identifier || '')
|
||
|
|
setMcpTimeout(data.timeout || 30)
|
||
|
|
setSseReadTimeout(data.sse_read_timeout || 300)
|
||
|
|
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
|
||
|
|
setUrl('')
|
||
|
|
setName('')
|
||
|
|
setServerIdentifier('')
|
||
|
|
setMcpTimeout(30)
|
||
|
|
setSseReadTimeout(300)
|
||
|
|
setHeaders([])
|
||
|
|
setAppIcon(DEFAULT_ICON as AppIconSelection)
|
||
|
|
setIsDynamicRegistration(true)
|
||
|
|
setClientID('')
|
||
|
|
setCredentials('')
|
||
|
|
}
|
||
|
|
}, [data])
|
||
|
|
|
||
|
|
const isValidUrl = (string: string) => {
|
||
|
|
try {
|
||
|
|
const url = new URL(string)
|
||
|
|
return url.protocol === 'http:' || url.protocol === 'https:'
|
||
|
|
}
|
||
|
|
catch {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const isValidServerID = (str: string) => {
|
||
|
|
return /^[a-z0-9_-]{1,24}$/.test(str)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleBlur = async (url: string) => {
|
||
|
|
if (data)
|
||
|
|
return
|
||
|
|
if (!isValidUrl(url))
|
||
|
|
return
|
||
|
|
const domain = getDomain(url)
|
||
|
|
const remoteIcon = `https://www.google.com/s2/favicons?domain=${domain}&sz=128`
|
||
|
|
setIsFetchingIcon(true)
|
||
|
|
try {
|
||
|
|
const res = await uploadRemoteFileInfo(remoteIcon, undefined, true)
|
||
|
|
setAppIcon({ type: 'image', url: res.url, fileId: extractFileId(res.url) || '' })
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
let errorMessage = 'Failed to fetch remote icon'
|
||
|
|
const errorData = await (e as Response).json()
|
||
|
|
if (errorData?.code)
|
||
|
|
errorMessage = `Upload failed: ${errorData.code}`
|
||
|
|
console.error('Failed to fetch remote icon:', e)
|
||
|
|
Toast.notify({ type: 'warning', message: errorMessage })
|
||
|
|
}
|
||
|
|
finally {
|
||
|
|
setIsFetchingIcon(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const submit = async () => {
|
||
|
|
if (!isValidUrl(url)) {
|
||
|
|
Toast.notify({ type: 'error', message: 'invalid server url' })
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!isValidServerID(serverIdentifier.trim())) {
|
||
|
|
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<string, string>)
|
||
|
|
await onConfirm({
|
||
|
|
server_url: originalServerUrl === url ? '[__HIDDEN__]' : url.trim(),
|
||
|
|
name,
|
||
|
|
icon_type: appIcon.type,
|
||
|
|
icon: appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId,
|
||
|
|
icon_background: appIcon.type === 'emoji' ? appIcon.background : undefined,
|
||
|
|
server_identifier: serverIdentifier.trim(),
|
||
|
|
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 (
|
||
|
|
<>
|
||
|
|
<Modal
|
||
|
|
isShow={show}
|
||
|
|
onClose={noop}
|
||
|
|
className={cn('relative !max-w-[520px]', 'p-6')}
|
||
|
|
>
|
||
|
|
<div className='absolute right-5 top-5 z-10 cursor-pointer p-1.5' onClick={onHide}>
|
||
|
|
<RiCloseLine className='h-5 w-5 text-text-tertiary' />
|
||
|
|
</div>
|
||
|
|
<div className='title-2xl-semi-bold relative pb-3 text-xl text-text-primary'>{!isCreate ? t('tools.mcp.modal.editTitle') : t('tools.mcp.modal.title')}</div>
|
||
|
|
<div className='space-y-5 py-3'>
|
||
|
|
<div>
|
||
|
|
<div className='mb-1 flex h-6 items-center'>
|
||
|
|
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.serverUrl')}</span>
|
||
|
|
</div>
|
||
|
|
<Input
|
||
|
|
value={url}
|
||
|
|
onChange={e => setUrl(e.target.value)}
|
||
|
|
onBlur={e => handleBlur(e.target.value.trim())}
|
||
|
|
placeholder={t('tools.mcp.modal.serverUrlPlaceholder')}
|
||
|
|
/>
|
||
|
|
{originalServerUrl && originalServerUrl !== url && (
|
||
|
|
<div className='mt-1 flex h-5 items-center'>
|
||
|
|
<span className='body-xs-regular text-text-warning'>{t('tools.mcp.modal.serverUrlWarning')}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className='flex space-x-3'>
|
||
|
|
<div className='grow pb-1'>
|
||
|
|
<div className='mb-1 flex h-6 items-center'>
|
||
|
|
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.name')}</span>
|
||
|
|
</div>
|
||
|
|
<Input
|
||
|
|
value={name}
|
||
|
|
onChange={e => setName(e.target.value)}
|
||
|
|
placeholder={t('tools.mcp.modal.namePlaceholder')}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className='pt-2' ref={appIconRef}>
|
||
|
|
<AppIcon
|
||
|
|
iconType={appIcon.type}
|
||
|
|
icon={appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId}
|
||
|
|
background={appIcon.type === 'emoji' ? appIcon.background : undefined}
|
||
|
|
imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
|
||
|
|
innerIcon={shouldUseMcpIconForAppIcon(appIcon.type, appIcon.type === 'emoji' ? appIcon.icon : '') ? <Mcp className='h-8 w-8 text-text-primary-on-surface' /> : undefined}
|
||
|
|
size='xxl'
|
||
|
|
className='relative cursor-pointer rounded-2xl'
|
||
|
|
coverElement={
|
||
|
|
isHovering
|
||
|
|
? (<div className='absolute inset-0 flex items-center justify-center overflow-hidden rounded-2xl bg-background-overlay-alt'>
|
||
|
|
<RiEditLine className='size-6 text-text-primary-on-surface' />
|
||
|
|
</div>) : null
|
||
|
|
}
|
||
|
|
onClick={() => { setShowAppIconPicker(true) }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className='flex h-6 items-center'>
|
||
|
|
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.serverIdentifier')}</span>
|
||
|
|
</div>
|
||
|
|
<div className='body-xs-regular mb-1 text-text-tertiary'>{t('tools.mcp.modal.serverIdentifierTip')}</div>
|
||
|
|
<Input
|
||
|
|
value={serverIdentifier}
|
||
|
|
onChange={e => setServerIdentifier(e.target.value)}
|
||
|
|
placeholder={t('tools.mcp.modal.serverIdentifierPlaceholder')}
|
||
|
|
/>
|
||
|
|
{originalServerID && originalServerID !== serverIdentifier && (
|
||
|
|
<div className='mt-1 flex h-5 items-center'>
|
||
|
|
<span className='body-xs-regular text-text-warning'>{t('tools.mcp.modal.serverIdentifierWarning')}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<TabSlider
|
||
|
|
className='w-full'
|
||
|
|
itemClassName={(isActive) => {
|
||
|
|
return `flex-1 ${isActive && 'text-text-accent-light-mode-only'}`
|
||
|
|
}}
|
||
|
|
value={authMethod}
|
||
|
|
onChange={handleAuthMethodChange}
|
||
|
|
options={authMethods}
|
||
|
|
/>
|
||
|
|
{
|
||
|
|
authMethod === MCPAuthMethod.authentication && (
|
||
|
|
<>
|
||
|
|
<div>
|
||
|
|
<div className='mb-1 flex h-6 items-center'>
|
||
|
|
<Switch
|
||
|
|
className='mr-2'
|
||
|
|
defaultValue={isDynamicRegistration}
|
||
|
|
onChange={setIsDynamicRegistration}
|
||
|
|
/>
|
||
|
|
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.useDynamicClientRegistration')}</span>
|
||
|
|
</div>
|
||
|
|
{!isDynamicRegistration && (
|
||
|
|
<div className='mt-2 flex gap-2 rounded-lg bg-state-warning-hover p-3'>
|
||
|
|
<AlertTriangle className='mt-0.5 h-4 w-4 shrink-0 text-text-warning' />
|
||
|
|
<div className='system-xs-regular text-text-secondary'>
|
||
|
|
<div className='mb-1'>{t('tools.mcp.modal.redirectUrlWarning')}</div>
|
||
|
|
<code className='system-xs-medium block break-all rounded bg-state-warning-active px-2 py-1 text-text-secondary'>
|
||
|
|
{`${API_PREFIX}/mcp/oauth/callback`}
|
||
|
|
</code>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className={cn('mb-1 flex h-6 items-center', isDynamicRegistration && 'opacity-50')}>
|
||
|
|
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.clientID')}</span>
|
||
|
|
</div>
|
||
|
|
<Input
|
||
|
|
value={clientID}
|
||
|
|
onChange={e => setClientID(e.target.value)}
|
||
|
|
onBlur={e => handleBlur(e.target.value.trim())}
|
||
|
|
placeholder={t('tools.mcp.modal.clientID')}
|
||
|
|
disabled={isDynamicRegistration}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className={cn('mb-1 flex h-6 items-center', isDynamicRegistration && 'opacity-50')}>
|
||
|
|
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.clientSecret')}</span>
|
||
|
|
</div>
|
||
|
|
<Input
|
||
|
|
value={credentials}
|
||
|
|
onChange={e => setCredentials(e.target.value)}
|
||
|
|
onBlur={e => handleBlur(e.target.value.trim())}
|
||
|
|
placeholder={t('tools.mcp.modal.clientSecretPlaceholder')}
|
||
|
|
disabled={isDynamicRegistration}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
{
|
||
|
|
authMethod === MCPAuthMethod.headers && (
|
||
|
|
<div>
|
||
|
|
<div className='mb-1 flex h-6 items-center'>
|
||
|
|
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.headers')}</span>
|
||
|
|
</div>
|
||
|
|
<div className='body-xs-regular mb-2 text-text-tertiary'>{t('tools.mcp.modal.headersTip')}</div>
|
||
|
|
<HeadersInput
|
||
|
|
headersItems={headers}
|
||
|
|
onChange={setHeaders}
|
||
|
|
readonly={false}
|
||
|
|
isMasked={!isCreate && headers.filter(item => item.key.trim()).length > 0}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
{
|
||
|
|
authMethod === MCPAuthMethod.configurations && (
|
||
|
|
<>
|
||
|
|
<div>
|
||
|
|
<div className='mb-1 flex h-6 items-center'>
|
||
|
|
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.timeout')}</span>
|
||
|
|
</div>
|
||
|
|
<Input
|
||
|
|
type='number'
|
||
|
|
value={timeout}
|
||
|
|
onChange={e => setMcpTimeout(Number(e.target.value))}
|
||
|
|
onBlur={e => handleBlur(e.target.value.trim())}
|
||
|
|
placeholder={t('tools.mcp.modal.timeoutPlaceholder')}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className='mb-1 flex h-6 items-center'>
|
||
|
|
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.sseReadTimeout')}</span>
|
||
|
|
</div>
|
||
|
|
<Input
|
||
|
|
type='number'
|
||
|
|
value={sseReadTimeout}
|
||
|
|
onChange={e => setSseReadTimeout(Number(e.target.value))}
|
||
|
|
onBlur={e => handleBlur(e.target.value.trim())}
|
||
|
|
placeholder={t('tools.mcp.modal.timeoutPlaceholder')}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
<div className='flex flex-row-reverse pt-5'>
|
||
|
|
<Button disabled={!name || !url || !serverIdentifier || isFetchingIcon} className='ml-2' variant='primary' onClick={submit}>{data ? t('tools.mcp.modal.save') : t('tools.mcp.modal.confirm')}</Button>
|
||
|
|
<Button onClick={onHide}>{t('tools.mcp.modal.cancel')}</Button>
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
{showAppIconPicker && <AppIconPicker
|
||
|
|
onSelect={(payload) => {
|
||
|
|
setAppIcon(payload)
|
||
|
|
setShowAppIconPicker(false)
|
||
|
|
}}
|
||
|
|
onClose={() => {
|
||
|
|
setAppIcon(getIcon(data))
|
||
|
|
setShowAppIconPicker(false)
|
||
|
|
}}
|
||
|
|
/>}
|
||
|
|
</>
|
||
|
|
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MCPModal
|