Feat/improved mcp timeout configs (#23605)

Co-authored-by: crazywoola <427733928@qq.com>

web/app/components/tools/mcp/modal.tsx

@@ -27,6 +27,8 @@ export type DuplicateAppModalProps = {
     icon: string
     icon_background?: string | null
     server_identifier: string
+    timeout: number
+    sse_read_timeout: number
   }) => void
   onHide: () => void
 }
@@ -64,6 +66,8 @@ const MCPModal = ({
   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(30)
+  const [sseReadTimeout, setSseReadTimeout] = React.useState(300)
   const [isFetchingIcon, setIsFetchingIcon] = useState(false)
   const appIconRef = useRef<HTMLDivElement>(null)
   const isHovering = useHover(appIconRef)
@@ -73,7 +77,7 @@ const MCPModal = ({
       const urlPattern = /^(https?:\/\/)((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3})|localhost)(\:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?/i
       return urlPattern.test(string)
     }
-    catch (e) {
+    catch {
       return false
     }
   }
@@ -123,6 +127,8 @@ 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,
     })
     if(isCreate)
       onHide()
@@ -201,6 +207,30 @@ 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='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

@@ -57,6 +57,8 @@ export type Collection = {
   server_url?: string
   updated_at?: number
   server_identifier?: string
+  timeout?: number
+  sse_read_timeout?: number
 }
 
 export type ToolParameter = {

web/i18n/en-US/tools.ts

@@ -191,6 +191,8 @@ const translation = {
       cancel: 'Cancel',
       save: 'Save',
       confirm: 'Add & Authorize',
+      timeout: 'Timeout',
+      sseReadTimeout: 'SSE Read Timeout',
     },
     delete: 'Remove MCP Server',
     deleteConfirmTitle: 'Would you like to remove {{mcp}}?',

web/i18n/zh-Hans/tools.ts

@@ -191,6 +191,8 @@ const translation = {
       cancel: '取消',
       save: '保存',
       confirm: '添加并授权',
+      timeout: '超时时间',
+      sseReadTimeout: 'SSE 读取超时时间',
     },
     delete: '删除 MCP 服务',
     deleteConfirmTitle: '你想要删除 {{mcp}} 吗？',

web/service/use-tools.ts

@@ -85,6 +85,8 @@ export const useCreateMCP = () => {
       icon_type: AppIconType
       icon: string
       icon_background?: string | null
+      timeout?: number
+      sse_read_timeout?: number
     }) => {
       return post<ToolWithProvider>('workspaces/current/tool-provider/mcp', {
         body: {
@@ -109,6 +111,8 @@ export const useUpdateMCP = ({
       icon: string
       icon_background?: string | null
       provider_id: string
+      timeout?: number
+      sse_read_timeout?: number
     }) => {
       return put('workspaces/current/tool-provider/mcp', {
         body: {