Merge remote-tracking branch 'origin/main' into feat/trigger

web/app/components/tools/add-tool-modal/category.tsx

@@ -9,6 +9,7 @@ import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import { useStore as useLabelStore } from '@/app/components/tools/labels/store'
 import { fetchLabelList } from '@/service/tools'
+import { renderI18nObject } from '@/i18n-config'
 
 type Props = {
   value: string
@@ -55,14 +56,24 @@ const Category = ({
         <Apps02 className='mr-2 h-4 w-4 shrink-0' />
         {t('tools.type.all')}
       </div>
-      {labelList.map(label => (
-        <div key={label.name} title={label.label[language]} className={cn('mb-0.5 flex cursor-pointer items-center overflow-hidden truncate rounded-lg p-1 pl-3 text-sm leading-5 text-gray-700 hover:bg-white', value === label.name && '!bg-white font-medium !text-primary-600')} onClick={() => onSelect(label.name)}>
-          <div className='mr-2 h-4 w-4 shrink-0'>
-            <Icon active={value === label.name} svgString={label.icon} />
+      {labelList.map((label) => {
+        const labelText = typeof label.label === 'string'
+          ? label.label
+          : (label.label ? renderI18nObject(label.label, language) : '')
+        return (
+          <div
+            key={label.name}
+            title={labelText}
+            className={cn('mb-0.5 flex cursor-pointer items-center overflow-hidden truncate rounded-lg p-1 pl-3 text-sm leading-5 text-gray-700 hover:bg-white', value === label.name && '!bg-white font-medium !text-primary-600')}
+            onClick={() => onSelect(label.name)}
+          >
+            <div className='mr-2 h-4 w-4 shrink-0'>
+              <Icon active={value === label.name} svgString={label.icon || ''} />
+            </div>
+            {labelText}
           </div>
-          {label.label[language]}
-        </div>
-      ))}
+        )
+      })}
     </div>
   )
 }

web/app/components/tools/add-tool-modal/index.tsx

@@ -10,6 +10,7 @@ import {
 } from '@remixicon/react'
 import { useMount } from 'ahooks'
 import type { Collection, CustomCollectionBackend, Tool } from '../types'
+import type { CollectionType } from '../types'
 import Type from './type'
 import Category from './category'
 import Tools from './tools'
@@ -129,7 +130,7 @@ const AddToolModal: FC<Props> = ({
     const nexModelConfig = produce(modelConfig, (draft: ModelConfig) => {
       draft.agentConfig.tools.push({
         provider_id: collection.id || collection.name,
-        provider_type: collection.type,
+        provider_type: collection.type as CollectionType,
         provider_name: collection.name,
         tool_name: tool.name,
         tool_label: tool.label[locale] || tool.label[locale.replaceAll('-', '_')],

web/app/components/tools/add-tool-modal/tools.tsx

@@ -23,6 +23,14 @@ import type { Tool } from '@/app/components/tools/types'
 import { CollectionType } from '@/app/components/tools/types'
 import type { AgentTool } from '@/types/app'
 import { MAX_TOOLS_NUM } from '@/config'
+import type { TypeWithI18N } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { renderI18nObject } from '@/i18n-config'
+
+const resolveI18nText = (value: TypeWithI18N | string | undefined, language: string): string => {
+  if (!value)
+    return ''
+  return typeof value === 'string' ? value : renderI18nObject(value, language)
+}
 
 type ToolsProps = {
   showWorkflowEmpty: boolean
@@ -53,7 +61,7 @@ const Blocks = ({
         className='group mb-1 last-of-type:mb-0'
       >
         <div className='flex h-[22px] w-full items-center justify-between pl-3 pr-1 text-xs font-medium text-gray-500'>
-          {toolWithProvider.label[language]}
+          {resolveI18nText(toolWithProvider.label, language)}
           <a className='hidden cursor-pointer items-center group-hover:flex' href={`${basePath}/tools?category=${toolWithProvider.type}`} target='_blank'>{t('tools.addToolModal.manageInTools')}<ArrowUpRight className='ml-0.5 h-3 w-3' /></a>
         </div>
         {list.map((tool) => {
@@ -62,7 +70,7 @@ const Blocks = ({
               return ''
             return tool.labels.map((name) => {
               const label = labelList.find(item => item.name === name)
-              return label?.label[language]
+              return resolveI18nText(label?.label, language)
             }).filter(Boolean).join(', ')
           })()
           const added = !!addedTools?.find(v => v.provider_id === toolWithProvider.id && v.provider_type === toolWithProvider.type && v.tool_name === tool.name)
@@ -79,8 +87,8 @@ const Blocks = ({
                     type={BlockEnum.Tool}
                     toolIcon={toolWithProvider.icon}
                   />
-                  <div className='mb-1 text-sm leading-5 text-gray-900'>{tool.label[language]}</div>
-                  <div className='text-xs leading-[18px] text-gray-700'>{tool.description[language]}</div>
+                  <div className='mb-1 text-sm leading-5 text-gray-900'>{resolveI18nText(tool.label, language)}</div>
+                  <div className='text-xs leading-[18px] text-gray-700'>{resolveI18nText(tool.description, language)}</div>
                   {tool.labels?.length > 0 && (
                     <div className='mt-1 flex shrink-0 items-center'>
                       <div className='relative flex w-full items-center gap-1 rounded-md py-1 text-gray-500' title={labelContent}>
@@ -98,7 +106,7 @@ const Blocks = ({
                   type={BlockEnum.Tool}
                   toolIcon={toolWithProvider.icon}
                 />
-                <div className={cn('grow truncate text-sm text-gray-900', needAuth && 'opacity-30')}>{tool.label[language]}</div>
+                <div className={cn('grow truncate text-sm text-gray-900', needAuth && 'opacity-30')}>{resolveI18nText(tool.label, language)}</div>
                 {!needAuth && added && (
                   <div className='flex items-center gap-1 rounded-[6px] border border-gray-100 bg-white px-2 py-[3px] text-xs font-medium leading-[18px] text-gray-300'>
                     <Check className='h-3 w-3' />

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<string, string>
-  onChange: (headers: Record<string, string>) => 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<string, string>)
+    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<string, string>)
-    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 (
       <div className='space-y-2'>
         <div className='body-xs-regular text-text-tertiary'>
@@ -91,10 +81,10 @@ const HeadersInput = ({
           <div className='h-full w-1/2 border-r border-divider-regular pl-3'>{t('tools.mcp.modal.headerKey')}</div>
           <div className='h-full w-1/2 pl-3 pr-1'>{t('tools.mcp.modal.headerValue')}</div>
         </div>
-        {headerItems.map((item, index) => (
-          <div key={index} className={cn(
+        {headersItems.map((item, index) => (
+          <div key={item.id} className={cn(
             'flex items-center border-divider-regular',
-            index < headerItems.length - 1 && 'border-b',
+            index < headersItems.length - 1 && 'border-b',
           )}>
             <div className='w-1/2 border-r border-divider-regular'>
               <Input
@@ -113,7 +103,7 @@ const HeadersInput = ({
                 className='flex-1 rounded-none border-0'
                 readOnly={readonly}
               />
-              {!readonly && headerItems.length > 1 && (
+              {!readonly && !!headersItems.length && (
                 <ActionButton
                   onClick={() => handleRemoveItem(index)}
                   className='mr-2'

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<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
 }
@@ -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<Record<string, string>>(
-    data?.masked_headers || {},
+  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(() => {
@@ -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<string, string>)
     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 (
     <>
       <Modal
@@ -239,42 +292,101 @@ const MCPModal = ({
               </div>
             )}
           </div>
-          <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='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
-              headers={headers}
-              onChange={setHeaders}
-              readonly={false}
-              isMasked={!isCreate && Object.keys(headers).length > 0}
-            />
-          </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>
+                </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>

web/app/components/tools/types.ts

@@ -67,6 +67,15 @@ export type Collection = {
   is_authorized?: boolean
   provider?: string
   credential_id?: string
+  is_dynamic_registration?: boolean
+  authentication?: {
+    client_id?: string
+    client_secret?: string
+  }
+  configuration?: {
+    timeout?: number
+    sse_read_timeout?: number
+  }
 }
 
 export type ToolParameter = {
@@ -221,3 +230,9 @@ export type MCPServerDetail = {
   parameters?: Record<string, string>
   headers?: Record<string, string>
 }
+
+export enum MCPAuthMethod {
+  authentication = 'authentication',
+  headers = 'headers',
+  configurations = 'configurations',
+}