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 = {