test(tool-selector): add comprehensive tests for AppSelector and ToolSettingsPanel

- Introduced unit tests for the AppSelector component, covering app selection, form handling, and loading states.
- Enhanced ToolSettingsPanel tests by utilizing a mock form schema for improved clarity and maintainability.
- Updated existing tests to ensure compatibility with the new form schema structure.
- Added edge case handling and integration tests to validate user flows and interactions.

web/app/components/plugins/plugin-auth/authorized/authorized-modals.tsx

@@ -1,65 +0,0 @@
-import type { PluginPayload } from '../types'
-import { memo } from 'react'
-import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
-import ApiKeyModal from '../authorize/api-key-modal'
-
-type AuthorizedModalsProps = {
-  pluginPayload: PluginPayload
-  // Delete confirmation
-  deleteCredentialId: string | null
-  doingAction: boolean
-  onDeleteConfirm: () => void
-  onDeleteCancel: () => void
-  // Edit modal
-  editValues: Record<string, unknown> | null
-  disabled?: boolean
-  onEditClose: () => void
-  onRemove: () => void
-  onUpdate?: () => void
-}
-
-/**
- * Component for managing authorized modals (delete confirmation and edit modal)
- * Extracted to reduce complexity in the main Authorized component
- */
-const AuthorizedModals = ({
-  pluginPayload,
-  deleteCredentialId,
-  doingAction,
-  onDeleteConfirm,
-  onDeleteCancel,
-  editValues,
-  disabled,
-  onEditClose,
-  onRemove,
-  onUpdate,
-}: AuthorizedModalsProps) => {
-  const { t } = useTranslation()
-
-  return (
-    <>
-      {deleteCredentialId && (
-        <Confirm
-          isShow
-          title={t('list.delete.title', { ns: 'datasetDocuments' })}
-          isDisabled={doingAction}
-          onCancel={onDeleteCancel}
-          onConfirm={onDeleteConfirm}
-        />
-      )}
-      {!!editValues && (
-        <ApiKeyModal
-          pluginPayload={pluginPayload}
-          editValues={editValues}
-          onClose={onEditClose}
-          onRemove={onRemove}
-          disabled={disabled || doingAction}
-          onUpdate={onUpdate}
-        />
-      )}
-    </>
-  )
-}
-
-export default memo(AuthorizedModals)

web/app/components/plugins/plugin-auth/authorized/credential-section.tsx

@@ -1,123 +0,0 @@
-import type { Credential } from '../types'
-import { memo } from 'react'
-import { cn } from '@/utils/classnames'
-import Item from './item'
-
-type CredentialItemHandlers = {
-  onDelete?: (id: string) => void
-  onEdit?: (id: string, values: Record<string, unknown>) => void
-  onSetDefault?: (id: string) => void
-  onRename?: (payload: { credential_id: string, name: string }) => void
-  onItemClick?: (id: string) => void
-}
-
-type CredentialSectionProps = CredentialItemHandlers & {
-  title: string
-  credentials: Credential[]
-  disabled?: boolean
-  disableRename?: boolean
-  disableEdit?: boolean
-  disableDelete?: boolean
-  disableSetDefault?: boolean
-  showSelectedIcon?: boolean
-  selectedCredentialId?: string
-}
-
-/**
- * Reusable component for rendering a section of credentials
- * Used for OAuth, API Key, and extra authorization items
- */
-const CredentialSection = ({
-  title,
-  credentials,
-  disabled,
-  disableRename,
-  disableEdit,
-  disableDelete,
-  disableSetDefault,
-  showSelectedIcon,
-  selectedCredentialId,
-  onDelete,
-  onEdit,
-  onSetDefault,
-  onRename,
-  onItemClick,
-}: CredentialSectionProps) => {
-  if (!credentials.length)
-    return null
-
-  return (
-    <div className="p-1">
-      <div className={cn(
-        'system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary',
-        showSelectedIcon && 'pl-7',
-      )}
-      >
-        {title}
-      </div>
-      {credentials.map(credential => (
-        <Item
-          key={credential.id}
-          credential={credential}
-          disabled={disabled}
-          disableRename={disableRename}
-          disableEdit={disableEdit}
-          disableDelete={disableDelete}
-          disableSetDefault={disableSetDefault}
-          showSelectedIcon={showSelectedIcon}
-          selectedCredentialId={selectedCredentialId}
-          onDelete={onDelete}
-          onEdit={onEdit}
-          onSetDefault={onSetDefault}
-          onRename={onRename}
-          onItemClick={onItemClick}
-        />
-      ))}
-    </div>
-  )
-}
-
-export default memo(CredentialSection)
-
-type ExtraCredentialSectionProps = {
-  credentials?: Credential[]
-  disabled?: boolean
-  onItemClick?: (id: string) => void
-  showSelectedIcon?: boolean
-  selectedCredentialId?: string
-}
-
-/**
- * Specialized section for extra authorization items (read-only)
- */
-export const ExtraCredentialSection = memo(({
-  credentials,
-  disabled,
-  onItemClick,
-  showSelectedIcon,
-  selectedCredentialId,
-}: ExtraCredentialSectionProps) => {
-  if (!credentials?.length)
-    return null
-
-  return (
-    <div className="p-1">
-      {credentials.map(credential => (
-        <Item
-          key={credential.id}
-          credential={credential}
-          disabled={disabled}
-          onItemClick={onItemClick}
-          disableRename
-          disableEdit
-          disableDelete
-          disableSetDefault
-          showSelectedIcon={showSelectedIcon}
-          selectedCredentialId={selectedCredentialId}
-        />
-      ))}
-    </div>
-  )
-})
-
-ExtraCredentialSection.displayName = 'ExtraCredentialSection'

web/app/components/plugins/plugin-auth/authorized/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useCredentialActions } from './use-credential-actions'
-export { useModalState } from './use-modal-state'

web/app/components/plugins/plugin-auth/authorized/hooks/use-credential-actions.ts

@@ -1,116 +0,0 @@
-import type { MutableRefObject } from 'react'
-import type { PluginPayload } from '../../types'
-import {
-  useCallback,
-  useRef,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
-import {
-  useDeletePluginCredentialHook,
-  useSetPluginDefaultCredentialHook,
-  useUpdatePluginCredentialHook,
-} from '../../hooks/use-credential'
-
-type UseCredentialActionsOptions = {
-  pluginPayload: PluginPayload
-  onUpdate?: () => void
-}
-
-type UseCredentialActionsReturn = {
-  doingAction: boolean
-  doingActionRef: MutableRefObject<boolean>
-  pendingOperationCredentialIdRef: MutableRefObject<string | null>
-  handleSetDoingAction: (doing: boolean) => void
-  handleDelete: (credentialId: string) => Promise<void>
-  handleSetDefault: (id: string) => Promise<void>
-  handleRename: (payload: { credential_id: string, name: string }) => Promise<void>
-}
-
-/**
- * Custom hook for credential CRUD operations
- * Consolidates delete, setDefault, rename actions with shared loading state
- */
-export const useCredentialActions = ({
-  pluginPayload,
-  onUpdate,
-}: UseCredentialActionsOptions): UseCredentialActionsReturn => {
-  const { t } = useTranslation()
-  const { notify } = useToastContext()
-
-  const [doingAction, setDoingAction] = useState(false)
-  const doingActionRef = useRef(doingAction)
-  const pendingOperationCredentialIdRef = useRef<string | null>(null)
-
-  const handleSetDoingAction = useCallback((doing: boolean) => {
-    doingActionRef.current = doing
-    setDoingAction(doing)
-  }, [])
-
-  const { mutateAsync: deletePluginCredential } = useDeletePluginCredentialHook(pluginPayload)
-  const { mutateAsync: setPluginDefaultCredential } = useSetPluginDefaultCredentialHook(pluginPayload)
-  const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
-
-  const showSuccessNotification = useCallback(() => {
-    notify({
-      type: 'success',
-      message: t('api.actionSuccess', { ns: 'common' }),
-    })
-  }, [notify, t])
-
-  const handleDelete = useCallback(async (credentialId: string) => {
-    if (doingActionRef.current)
-      return
-    try {
-      handleSetDoingAction(true)
-      await deletePluginCredential({ credential_id: credentialId })
-      showSuccessNotification()
-      onUpdate?.()
-    }
-    finally {
-      handleSetDoingAction(false)
-    }
-  }, [deletePluginCredential, onUpdate, showSuccessNotification, handleSetDoingAction])
-
-  const handleSetDefault = useCallback(async (id: string) => {
-    if (doingActionRef.current)
-      return
-    try {
-      handleSetDoingAction(true)
-      await setPluginDefaultCredential(id)
-      showSuccessNotification()
-      onUpdate?.()
-    }
-    finally {
-      handleSetDoingAction(false)
-    }
-  }, [setPluginDefaultCredential, onUpdate, showSuccessNotification, handleSetDoingAction])
-
-  const handleRename = useCallback(async (payload: {
-    credential_id: string
-    name: string
-  }) => {
-    if (doingActionRef.current)
-      return
-    try {
-      handleSetDoingAction(true)
-      await updatePluginCredential(payload)
-      showSuccessNotification()
-      onUpdate?.()
-    }
-    finally {
-      handleSetDoingAction(false)
-    }
-  }, [updatePluginCredential, showSuccessNotification, handleSetDoingAction, onUpdate])
-
-  return {
-    doingAction,
-    doingActionRef,
-    pendingOperationCredentialIdRef,
-    handleSetDoingAction,
-    handleDelete,
-    handleSetDefault,
-    handleRename,
-  }
-}

web/app/components/plugins/plugin-auth/authorized/hooks/use-modal-state.ts

@@ -1,71 +0,0 @@
-import type { MutableRefObject } from 'react'
-import {
-  useCallback,
-  useState,
-} from 'react'
-
-type CredentialValues = Record<string, unknown>
-
-type UseModalStateOptions = {
-  pendingOperationCredentialIdRef: MutableRefObject<string | null>
-}
-
-type UseModalStateReturn = {
-  // Delete modal state
-  deleteCredentialId: string | null
-  openDeleteConfirm: (credentialId?: string) => void
-  closeDeleteConfirm: () => void
-  // Edit modal state
-  editValues: CredentialValues | null
-  openEditModal: (id: string, values: CredentialValues) => void
-  closeEditModal: () => void
-  // Remove action (used from edit modal)
-  handleRemoveFromEdit: () => void
-}
-
-/**
- * Custom hook for managing modal states
- * Handles delete confirmation and edit modal with shared pending credential tracking
- */
-export const useModalState = ({
-  pendingOperationCredentialIdRef,
-}: UseModalStateOptions): UseModalStateReturn => {
-  const [deleteCredentialId, setDeleteCredentialId] = useState<string | null>(null)
-  const [editValues, setEditValues] = useState<CredentialValues | null>(null)
-
-  const openDeleteConfirm = useCallback((credentialId?: string) => {
-    if (credentialId)
-      pendingOperationCredentialIdRef.current = credentialId
-
-    setDeleteCredentialId(pendingOperationCredentialIdRef.current)
-  }, [pendingOperationCredentialIdRef])
-
-  const closeDeleteConfirm = useCallback(() => {
-    setDeleteCredentialId(null)
-    pendingOperationCredentialIdRef.current = null
-  }, [pendingOperationCredentialIdRef])
-
-  const openEditModal = useCallback((id: string, values: CredentialValues) => {
-    pendingOperationCredentialIdRef.current = id
-    setEditValues(values)
-  }, [pendingOperationCredentialIdRef])
-
-  const closeEditModal = useCallback(() => {
-    setEditValues(null)
-    pendingOperationCredentialIdRef.current = null
-  }, [pendingOperationCredentialIdRef])
-
-  const handleRemoveFromEdit = useCallback(() => {
-    setDeleteCredentialId(pendingOperationCredentialIdRef.current)
-  }, [pendingOperationCredentialIdRef])
-
-  return {
-    deleteCredentialId,
-    openDeleteConfirm,
-    closeDeleteConfirm,
-    editValues,
-    openEditModal,
-    closeEditModal,
-    handleRemoveFromEdit,
-  }
-}

web/app/components/plugins/plugin-auth/authorized/index.tsx

@@ -8,23 +8,29 @@ import {
 import {
   memo,
   useCallback,
-  useMemo,
+  useRef,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
+import Confirm from '@/app/components/base/confirm'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { useToastContext } from '@/app/components/base/toast'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import Authorize from '../authorize'
+import ApiKeyModal from '../authorize/api-key-modal'
+import {
+  useDeletePluginCredentialHook,
+  useSetPluginDefaultCredentialHook,
+  useUpdatePluginCredentialHook,
+} from '../hooks/use-credential'
 import { CredentialTypeEnum } from '../types'
-import AuthorizedModals from './authorized-modals'
-import CredentialSection, { ExtraCredentialSection } from './credential-section'
-import { useCredentialActions, useModalState } from './hooks'
+import Item from './item'
 
 type AuthorizedProps = {
   pluginPayload: PluginPayload
@@ -47,7 +53,6 @@ type AuthorizedProps = {
   onUpdate?: () => void
   notAllowCustomCredential?: boolean
 }
-
 const Authorized = ({
   pluginPayload,
   credentials,
@@ -70,55 +75,105 @@ const Authorized = ({
   notAllowCustomCredential,
 }: AuthorizedProps) => {
   const { t } = useTranslation()
-
-  // Dropdown open state
+  const { notify } = useToastContext()
   const [isLocalOpen, setIsLocalOpen] = useState(false)
   const mergedIsOpen = isOpen ?? isLocalOpen
   const setMergedIsOpen = useCallback((open: boolean) => {
-    onOpenChange?.(open)
+    if (onOpenChange)
+      onOpenChange(open)
+
     setIsLocalOpen(open)
   }, [onOpenChange])
+  const oAuthCredentials = credentials.filter(credential => credential.credential_type === CredentialTypeEnum.OAUTH2)
+  const apiKeyCredentials = credentials.filter(credential => credential.credential_type === CredentialTypeEnum.API_KEY)
+  const pendingOperationCredentialId = useRef<string | null>(null)
+  const [deleteCredentialId, setDeleteCredentialId] = useState<string | null>(null)
+  const { mutateAsync: deletePluginCredential } = useDeletePluginCredentialHook(pluginPayload)
+  const openConfirm = useCallback((credentialId?: string) => {
+    if (credentialId)
+      pendingOperationCredentialId.current = credentialId
 
-  // Credential actions hook
-  const {
-    doingAction,
-    doingActionRef,
-    pendingOperationCredentialIdRef,
-    handleSetDefault,
-    handleRename,
-    handleDelete,
-  } = useCredentialActions({ pluginPayload, onUpdate })
-
-  // Modal state management hook
-  const {
-    deleteCredentialId,
-    openDeleteConfirm,
-    closeDeleteConfirm,
-    editValues,
-    openEditModal,
-    closeEditModal,
-    handleRemoveFromEdit,
-  } = useModalState({ pendingOperationCredentialIdRef })
-
-  // Handle delete confirmation
-  const handleDeleteConfirm = useCallback(async () => {
-    if (doingActionRef.current || !pendingOperationCredentialIdRef.current)
+    setDeleteCredentialId(pendingOperationCredentialId.current)
+  }, [])
+  const closeConfirm = useCallback(() => {
+    setDeleteCredentialId(null)
+    pendingOperationCredentialId.current = null
+  }, [])
+  const [doingAction, setDoingAction] = useState(false)
+  const doingActionRef = useRef(doingAction)
+  const handleSetDoingAction = useCallback((doing: boolean) => {
+    doingActionRef.current = doing
+    setDoingAction(doing)
+  }, [])
+  const handleConfirm = useCallback(async () => {
+    if (doingActionRef.current)
       return
-    await handleDelete(pendingOperationCredentialIdRef.current)
-    closeDeleteConfirm()
-  }, [doingActionRef, pendingOperationCredentialIdRef, handleDelete, closeDeleteConfirm])
-
-  // Filter credentials by type
-  const { oAuthCredentials, apiKeyCredentials } = useMemo(() => ({
-    oAuthCredentials: credentials.filter(c => c.credential_type === CredentialTypeEnum.OAUTH2),
-    apiKeyCredentials: credentials.filter(c => c.credential_type === CredentialTypeEnum.API_KEY),
-  }), [credentials])
-
-  // Unavailable credentials info
-  const { unavailableCredentials, hasUnavailableDefault } = useMemo(() => ({
-    unavailableCredentials: credentials.filter(c => c.not_allowed_to_use),
-    hasUnavailableDefault: credentials.some(c => c.not_allowed_to_use && c.is_default),
-  }), [credentials])
+    if (!pendingOperationCredentialId.current) {
+      setDeleteCredentialId(null)
+      return
+    }
+    try {
+      handleSetDoingAction(true)
+      await deletePluginCredential({ credential_id: pendingOperationCredentialId.current })
+      notify({
+        type: 'success',
+        message: t('api.actionSuccess', { ns: 'common' }),
+      })
+      onUpdate?.()
+      setDeleteCredentialId(null)
+      pendingOperationCredentialId.current = null
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [deletePluginCredential, onUpdate, notify, t, handleSetDoingAction])
+  const [editValues, setEditValues] = useState<Record<string, any> | null>(null)
+  const handleEdit = useCallback((id: string, values: Record<string, any>) => {
+    pendingOperationCredentialId.current = id
+    setEditValues(values)
+  }, [])
+  const handleRemove = useCallback(() => {
+    setDeleteCredentialId(pendingOperationCredentialId.current)
+  }, [])
+  const { mutateAsync: setPluginDefaultCredential } = useSetPluginDefaultCredentialHook(pluginPayload)
+  const handleSetDefault = useCallback(async (id: string) => {
+    if (doingActionRef.current)
+      return
+    try {
+      handleSetDoingAction(true)
+      await setPluginDefaultCredential(id)
+      notify({
+        type: 'success',
+        message: t('api.actionSuccess', { ns: 'common' }),
+      })
+      onUpdate?.()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [setPluginDefaultCredential, onUpdate, notify, t, handleSetDoingAction])
+  const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
+  const handleRename = useCallback(async (payload: {
+    credential_id: string
+    name: string
+  }) => {
+    if (doingActionRef.current)
+      return
+    try {
+      handleSetDoingAction(true)
+      await updatePluginCredential(payload)
+      notify({
+        type: 'success',
+        message: t('api.actionSuccess', { ns: 'common' }),
+      })
+      onUpdate?.()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [updatePluginCredential, notify, t, handleSetDoingAction, onUpdate])
+  const unavailableCredentials = credentials.filter(credential => credential.not_allowed_to_use)
+  const unavailableCredential = credentials.find(credential => credential.not_allowed_to_use && credential.is_default)
 
   return (
     <>
@@ -133,27 +188,33 @@ const Authorized = ({
           onClick={() => setMergedIsOpen(!mergedIsOpen)}
           asChild
         >
-          {renderTrigger
-            ? renderTrigger(mergedIsOpen)
-            : (
-                <Button
-                  className={cn(
-                    'w-full',
-                    isOpen && 'bg-components-button-secondary-bg-hover',
-                  )}
-                >
-                  <Indicator className="mr-2" color={hasUnavailableDefault ? 'gray' : 'green'} />
-                  {credentials.length}
-                  &nbsp;
-                  {credentials.length > 1
-                    ? t('auth.authorizations', { ns: 'plugin' })
-                    : t('auth.authorization', { ns: 'plugin' })}
-                  {!!unavailableCredentials.length && (
-                    ` (${unavailableCredentials.length} ${t('auth.unavailable', { ns: 'plugin' })})`
-                  )}
-                  <RiArrowDownSLine className="ml-0.5 h-4 w-4" />
-                </Button>
-              )}
+          {
+            renderTrigger
+              ? renderTrigger(mergedIsOpen)
+              : (
+                  <Button
+                    className={cn(
+                      'w-full',
+                      isOpen && 'bg-components-button-secondary-bg-hover',
+                    )}
+                  >
+                    <Indicator className="mr-2" color={unavailableCredential ? 'gray' : 'green'} />
+                    {credentials.length}
+&nbsp;
+                    {
+                      credentials.length > 1
+                        ? t('auth.authorizations', { ns: 'plugin' })
+                        : t('auth.authorization', { ns: 'plugin' })
+                    }
+                    {
+                      !!unavailableCredentials.length && (
+                        ` (${unavailableCredentials.length} ${t('auth.unavailable', { ns: 'plugin' })})`
+                      )
+                    }
+                    <RiArrowDownSLine className="ml-0.5 h-4 w-4" />
+                  </Button>
+                )
+          }
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-[100]">
           <div className={cn(
@@ -162,72 +223,137 @@ const Authorized = ({
           )}
           >
             <div className="py-1">
-              <ExtraCredentialSection
-                credentials={extraAuthorizationItems}
-                disabled={disabled}
-                onItemClick={onItemClick}
-                showSelectedIcon={showItemSelectedIcon}
-                selectedCredentialId={selectedCredentialId}
-              />
-              <CredentialSection
-                title="OAuth"
-                credentials={oAuthCredentials}
-                disabled={disabled}
-                disableEdit
-                disableSetDefault={disableSetDefault}
-                showSelectedIcon={showItemSelectedIcon}
-                selectedCredentialId={selectedCredentialId}
-                onDelete={openDeleteConfirm}
-                onSetDefault={handleSetDefault}
-                onRename={handleRename}
-                onItemClick={onItemClick}
-              />
-              <CredentialSection
-                title="API Keys"
-                credentials={apiKeyCredentials}
-                disabled={disabled}
-                disableRename
-                disableSetDefault={disableSetDefault}
-                showSelectedIcon={showItemSelectedIcon}
-                selectedCredentialId={selectedCredentialId}
-                onDelete={openDeleteConfirm}
-                onEdit={openEditModal}
-                onSetDefault={handleSetDefault}
-                onRename={handleRename}
-                onItemClick={onItemClick}
-              />
+              {
+                !!extraAuthorizationItems?.length && (
+                  <div className="p-1">
+                    {
+                      extraAuthorizationItems.map(credential => (
+                        <Item
+                          key={credential.id}
+                          credential={credential}
+                          disabled={disabled}
+                          onItemClick={onItemClick}
+                          disableRename
+                          disableEdit
+                          disableDelete
+                          disableSetDefault
+                          showSelectedIcon={showItemSelectedIcon}
+                          selectedCredentialId={selectedCredentialId}
+                        />
+                      ))
+                    }
+                  </div>
+                )
+              }
+              {
+                !!oAuthCredentials.length && (
+                  <div className="p-1">
+                    <div className={cn(
+                      'system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary',
+                      showItemSelectedIcon && 'pl-7',
+                    )}
+                    >
+                      OAuth
+                    </div>
+                    {
+                      oAuthCredentials.map(credential => (
+                        <Item
+                          key={credential.id}
+                          credential={credential}
+                          disabled={disabled}
+                          disableEdit
+                          onDelete={openConfirm}
+                          onSetDefault={handleSetDefault}
+                          onRename={handleRename}
+                          disableSetDefault={disableSetDefault}
+                          onItemClick={onItemClick}
+                          showSelectedIcon={showItemSelectedIcon}
+                          selectedCredentialId={selectedCredentialId}
+                        />
+                      ))
+                    }
+                  </div>
+                )
+              }
+              {
+                !!apiKeyCredentials.length && (
+                  <div className="p-1">
+                    <div className={cn(
+                      'system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary',
+                      showItemSelectedIcon && 'pl-7',
+                    )}
+                    >
+                      API Keys
+                    </div>
+                    {
+                      apiKeyCredentials.map(credential => (
+                        <Item
+                          key={credential.id}
+                          credential={credential}
+                          disabled={disabled}
+                          onDelete={openConfirm}
+                          onEdit={handleEdit}
+                          onSetDefault={handleSetDefault}
+                          disableSetDefault={disableSetDefault}
+                          disableRename
+                          onItemClick={onItemClick}
+                          onRename={handleRename}
+                          showSelectedIcon={showItemSelectedIcon}
+                          selectedCredentialId={selectedCredentialId}
+                        />
+                      ))
+                    }
+                  </div>
+                )
+              }
             </div>
-            {!notAllowCustomCredential && (
-              <>
-                <div className="h-[1px] bg-divider-subtle"></div>
-                <div className="p-2">
-                  <Authorize
-                    pluginPayload={pluginPayload}
-                    theme="secondary"
-                    showDivider={false}
-                    canOAuth={canOAuth}
-                    canApiKey={canApiKey}
-                    disabled={disabled}
-                    onUpdate={onUpdate}
-                  />
-                </div>
-              </>
-            )}
+            {
+              !notAllowCustomCredential && (
+                <>
+                  <div className="h-[1px] bg-divider-subtle"></div>
+                  <div className="p-2">
+                    <Authorize
+                      pluginPayload={pluginPayload}
+                      theme="secondary"
+                      showDivider={false}
+                      canOAuth={canOAuth}
+                      canApiKey={canApiKey}
+                      disabled={disabled}
+                      onUpdate={onUpdate}
+                    />
+                  </div>
+                </>
+              )
+            }
           </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>
-      <AuthorizedModals
-        pluginPayload={pluginPayload}
-        deleteCredentialId={deleteCredentialId}
-        doingAction={doingAction}
-        onDeleteConfirm={handleDeleteConfirm}
-        onDeleteCancel={closeDeleteConfirm}
-        editValues={editValues}
-        disabled={disabled}
-        onEditClose={closeEditModal}
-        onRemove={handleRemoveFromEdit}
-        onUpdate={onUpdate}
-      />
+      {
+        deleteCredentialId && (
+          <Confirm
+            isShow
+            title={t('list.delete.title', { ns: 'datasetDocuments' })}
+            isDisabled={doingAction}
+            onCancel={closeConfirm}
+            onConfirm={handleConfirm}
+          />
+        )
+      }
+      {
+        !!editValues && (
+          <ApiKeyModal
+            pluginPayload={pluginPayload}
+            editValues={editValues}
+            onClose={() => {
+              setEditValues(null)
+              pendingOperationCredentialId.current = null
+            }}
+            onRemove={handleRemove}
+            disabled={disabled || doingAction}
+            onUpdate={onUpdate}
+          />
+        )
+      }
     </>
   )
 }

web/app/components/plugins/plugin-detail-panel/tool-selector/components/index.ts

@@ -0,0 +1,8 @@
+export { default as ReasoningConfigForm } from './reasoning-config-form'
+export { default as SchemaModal } from './schema-modal'
+export { default as ToolAuthorizationSection } from './tool-authorization-section'
+export { default as ToolBaseForm } from './tool-base-form'
+export { default as ToolCredentialsForm } from './tool-credentials-form'
+export { default as ToolItem } from './tool-item'
+export { default as ToolSettingsPanel } from './tool-settings-panel'
+export { default as ToolTrigger } from './tool-trigger'

web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx

@@ -1,4 +1,6 @@
 import type { Node } from 'reactflow'
+import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { ToolFormSchema } from '@/app/components/tools/utils/to-form-schema'
 import type { SchemaRoot } from '@/app/components/workflow/nodes/llm/types'
 import type { ToolVarInputs } from '@/app/components/workflow/nodes/tool/types'
 import type {
@@ -35,7 +37,7 @@ import SchemaModal from './schema-modal'
 type Props = {
   value: Record<string, any>
   onChange: (val: Record<string, any>) => void
-  schemas: any[]
+  schemas: ToolFormSchema[]
   nodeOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   nodeId: string
@@ -51,7 +53,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const language = useLanguage()
-  const getVarKindType = (type: FormTypeEnum) => {
+  const getVarKindType = (type: string) => {
     if (type === FormTypeEnum.file || type === FormTypeEnum.files)
       return VarKindType.variable
     if (type === FormTypeEnum.select || type === FormTypeEnum.checkbox || type === FormTypeEnum.textNumber || type === FormTypeEnum.array || type === FormTypeEnum.object)
@@ -60,7 +62,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
       return VarKindType.mixed
   }
 
-  const handleAutomatic = (key: string, val: any, type: FormTypeEnum) => {
+  const handleAutomatic = (key: string, val: any, type: string) => {
     onChange({
       ...value,
       [key]: {
@@ -80,7 +82,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
       onChange(res)
     }
   }, [onChange, value])
-  const handleValueChange = useCallback((variable: string, varType: FormTypeEnum) => {
+  const handleValueChange = useCallback((variable: string, varType: string) => {
     return (newValue: any) => {
       const res = produce(value, (draft: ToolVarInputs) => {
         draft[variable].value = {
@@ -134,7 +136,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
   const [schema, setSchema] = useState<SchemaRoot | null>(null)
   const [schemaRootName, setSchemaRootName] = useState<string>('')
 
-  const renderField = (schema: any, showSchema: (schema: SchemaRoot, rootName: string) => void) => {
+  const renderField = (schema: ToolFormSchema, showSchema: (schema: SchemaRoot, rootName: string) => void) => {
     const {
       default: defaultValue,
       variable,
@@ -275,16 +277,16 @@ const ReasoningConfigForm: React.FC<Props> = ({
                 onChange={handleValueChange(variable, type)}
               />
             )}
-            {isSelect && (
+            {isSelect && options && (
               <SimpleSelect
                 wrapperClassName="h-8 grow"
                 defaultValue={varInput?.value}
-                items={options.filter((option: { show_on: any[] }) => {
+                items={options.filter((option) => {
                   if (option.show_on.length)
                     return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
 
                   return true
-                }).map((option: { value: any, label: { [x: string]: any, en_US: any } }) => ({ value: option.value, name: option.label[language] || option.label.en_US }))}
+                }).map(option => ({ value: option.value, name: option.label[language] || option.label.en_US }))}
                 onSelect={item => handleValueChange(variable, type)(item.value as string)}
                 placeholder={placeholder?.[language] || placeholder?.en_US}
               />
@@ -332,7 +334,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
                 value={varInput?.value || []}
                 onChange={handleVariableSelectorChange(variable)}
                 filterVar={getFilterVar()}
-                schema={schema}
+                schema={schema as Partial<CredentialFormSchema>}
                 valueTypePlaceHolder={targetVarType()}
               />
             )}

web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-authorization-section.tsx

@@ -0,0 +1,48 @@
+'use client'
+import type { FC } from 'react'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import Divider from '@/app/components/base/divider'
+import {
+  AuthCategory,
+  PluginAuthInAgent,
+} from '@/app/components/plugins/plugin-auth'
+import { CollectionType } from '@/app/components/tools/types'
+
+type ToolAuthorizationSectionProps = {
+  currentProvider?: ToolWithProvider
+  credentialId?: string
+  onAuthorizationItemClick: (id: string) => void
+}
+
+const ToolAuthorizationSection: FC<ToolAuthorizationSectionProps> = ({
+  currentProvider,
+  credentialId,
+  onAuthorizationItemClick,
+}) => {
+  // Only show for built-in providers that allow deletion
+  const shouldShow = currentProvider
+    && currentProvider.type === CollectionType.builtIn
+    && currentProvider.allow_delete
+
+  if (!shouldShow)
+    return null
+
+  return (
+    <>
+      <Divider className="my-1 w-full" />
+      <div className="px-4 py-2">
+        <PluginAuthInAgent
+          pluginPayload={{
+            provider: currentProvider.name,
+            category: AuthCategory.tool,
+            providerType: currentProvider.type,
+          }}
+          credentialId={credentialId}
+          onAuthorizationItemClick={onAuthorizationItemClick}
+        />
+      </div>
+    </>
+  )
+}
+
+export default ToolAuthorizationSection

web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-base-form.tsx

@@ -0,0 +1,98 @@
+'use client'
+import type { OffsetOptions } from '@floating-ui/react'
+import type { FC } from 'react'
+import type { PluginDetail } from '@/app/components/plugins/types'
+import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { useTranslation } from 'react-i18next'
+import Textarea from '@/app/components/base/textarea'
+import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
+import { ReadmeEntrance } from '../../../readme-panel/entrance'
+import ToolTrigger from './tool-trigger'
+
+type ToolBaseFormProps = {
+  value?: ToolValue
+  currentProvider?: ToolWithProvider
+  offset?: OffsetOptions
+  scope?: string
+  selectedTools?: ToolValue[]
+  isShowChooseTool: boolean
+  panelShowState?: boolean
+  hasTrigger: boolean
+  onShowChange: (show: boolean) => void
+  onPanelShowStateChange?: (state: boolean) => void
+  onSelectTool: (tool: ToolDefaultValue) => void
+  onSelectMultipleTool: (tools: ToolDefaultValue[]) => void
+  onDescriptionChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+}
+
+const ToolBaseForm: FC<ToolBaseFormProps> = ({
+  value,
+  currentProvider,
+  offset = 4,
+  scope,
+  selectedTools,
+  isShowChooseTool,
+  panelShowState,
+  hasTrigger,
+  onShowChange,
+  onPanelShowStateChange,
+  onSelectTool,
+  onSelectMultipleTool,
+  onDescriptionChange,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex flex-col gap-3 px-4 py-2">
+      {/* Tool picker */}
+      <div className="flex flex-col gap-1">
+        <div className="system-sm-semibold flex h-6 items-center justify-between text-text-secondary">
+          {t('detailPanel.toolSelector.toolLabel', { ns: 'plugin' })}
+          {currentProvider?.plugin_unique_identifier && (
+            <ReadmeEntrance
+              pluginDetail={currentProvider as unknown as PluginDetail}
+              showShortTip
+              className="pb-0"
+            />
+          )}
+        </div>
+        <ToolPicker
+          placement="bottom"
+          offset={offset}
+          trigger={(
+            <ToolTrigger
+              open={panelShowState || isShowChooseTool}
+              value={value}
+              provider={currentProvider}
+            />
+          )}
+          isShow={panelShowState || isShowChooseTool}
+          onShowChange={hasTrigger ? (onPanelShowStateChange || (() => {})) : onShowChange}
+          disabled={false}
+          supportAddCustomTool
+          onSelect={onSelectTool}
+          onSelectMultiple={onSelectMultipleTool}
+          scope={scope}
+          selectedTools={selectedTools}
+        />
+      </div>
+
+      {/* Description */}
+      <div className="flex flex-col gap-1">
+        <div className="system-sm-semibold flex h-6 items-center text-text-secondary">
+          {t('detailPanel.toolSelector.descriptionLabel', { ns: 'plugin' })}
+        </div>
+        <Textarea
+          className="resize-none"
+          placeholder={t('detailPanel.toolSelector.descriptionPlaceholder', { ns: 'plugin' })}
+          value={value?.extra?.description || ''}
+          onChange={onDescriptionChange}
+          disabled={!value?.provider_name}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ToolBaseForm

web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-settings-panel.tsx

@@ -0,0 +1,155 @@
+'use client'
+import type { FC } from 'react'
+import type { Node } from 'reactflow'
+import type { TabType } from '../hooks/use-tool-selector-state'
+import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { ToolFormSchema } from '@/app/components/tools/utils/to-form-schema'
+import type { ToolValue } from '@/app/components/workflow/block-selector/types'
+import type { NodeOutPutVar, ToolWithProvider } from '@/app/components/workflow/types'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import TabSlider from '@/app/components/base/tab-slider-plain'
+import ToolForm from '@/app/components/workflow/nodes/tool/components/tool-form'
+import ReasoningConfigForm from './reasoning-config-form'
+
+type ToolSettingsPanelProps = {
+  value?: ToolValue
+  currentProvider?: ToolWithProvider
+  nodeId: string
+  currType: TabType
+  settingsFormSchemas: ToolFormSchema[]
+  paramsFormSchemas: ToolFormSchema[]
+  settingsValue: Record<string, any>
+  showTabSlider: boolean
+  userSettingsOnly: boolean
+  reasoningConfigOnly: boolean
+  nodeOutputVars: NodeOutPutVar[]
+  availableNodes: Node[]
+  onCurrTypeChange: (type: TabType) => void
+  onSettingsFormChange: (v: Record<string, any>) => void
+  onParamsFormChange: (v: Record<string, any>) => void
+}
+
+/**
+ * Renders the settings/params tips section
+ */
+const ParamsTips: FC = () => {
+  const { t } = useTranslation()
+  return (
+    <div className="pb-1">
+      <div className="system-xs-regular text-text-tertiary">
+        {t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}
+      </div>
+      <div className="system-xs-regular text-text-tertiary">
+        {t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}
+      </div>
+    </div>
+  )
+}
+
+const ToolSettingsPanel: FC<ToolSettingsPanelProps> = ({
+  value,
+  currentProvider,
+  nodeId,
+  currType,
+  settingsFormSchemas,
+  paramsFormSchemas,
+  settingsValue,
+  showTabSlider,
+  userSettingsOnly,
+  reasoningConfigOnly,
+  nodeOutputVars,
+  availableNodes,
+  onCurrTypeChange,
+  onSettingsFormChange,
+  onParamsFormChange,
+}) => {
+  const { t } = useTranslation()
+
+  // Check if panel should be shown
+  const hasSettings = settingsFormSchemas.length > 0
+  const hasParams = paramsFormSchemas.length > 0
+  const isTeamAuthorized = currentProvider?.is_team_authorization
+
+  if ((!hasSettings && !hasParams) || !isTeamAuthorized)
+    return null
+
+  return (
+    <>
+      <Divider className="my-1 w-full" />
+
+      {/* Tab slider - shown only when both settings and params exist */}
+      {nodeId && showTabSlider && (
+        <TabSlider
+          className="mt-1 shrink-0 px-4"
+          itemClassName="py-3"
+          noBorderBottom
+          smallItem
+          value={currType}
+          onChange={(v) => {
+            if (v === 'settings' || v === 'params')
+              onCurrTypeChange(v)
+          }}
+          options={[
+            { value: 'settings', text: t('detailPanel.toolSelector.settings', { ns: 'plugin' })! },
+            { value: 'params', text: t('detailPanel.toolSelector.params', { ns: 'plugin' })! },
+          ]}
+        />
+      )}
+
+      {/* Params tips when tab slider and params tab is active */}
+      {nodeId && showTabSlider && currType === 'params' && (
+        <div className="px-4 py-2">
+          <ParamsTips />
+        </div>
+      )}
+
+      {/* User settings only header */}
+      {userSettingsOnly && (
+        <div className="p-4 pb-1">
+          <div className="system-sm-semibold-uppercase text-text-primary">
+            {t('detailPanel.toolSelector.settings', { ns: 'plugin' })}
+          </div>
+        </div>
+      )}
+
+      {/* Reasoning config only header */}
+      {nodeId && reasoningConfigOnly && (
+        <div className="mb-1 p-4 pb-1">
+          <div className="system-sm-semibold-uppercase text-text-primary">
+            {t('detailPanel.toolSelector.params', { ns: 'plugin' })}
+          </div>
+          <ParamsTips />
+        </div>
+      )}
+
+      {/* User settings form */}
+      {(currType === 'settings' || userSettingsOnly) && (
+        <div className="px-4 py-2">
+          <ToolForm
+            inPanel
+            readOnly={false}
+            nodeId={nodeId}
+            schema={settingsFormSchemas as CredentialFormSchema[]}
+            value={settingsValue}
+            onChange={onSettingsFormChange}
+          />
+        </div>
+      )}
+
+      {/* Reasoning config form */}
+      {nodeId && (currType === 'params' || reasoningConfigOnly) && (
+        <ReasoningConfigForm
+          value={value?.parameters || {}}
+          onChange={onParamsFormChange}
+          schemas={paramsFormSchemas}
+          nodeOutputVars={nodeOutputVars}
+          availableNodes={availableNodes}
+          nodeId={nodeId}
+        />
+      )}
+    </>
+  )
+}
+
+export default ToolSettingsPanel

web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/index.ts

@@ -0,0 +1,3 @@
+export { usePluginInstalledCheck } from './use-plugin-installed-check'
+export { useToolSelectorState } from './use-tool-selector-state'
+export type { TabType, ToolSelectorState, UseToolSelectorStateProps } from './use-tool-selector-state'

web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/use-plugin-installed-check.ts

@@ -10,5 +10,6 @@ export const usePluginInstalledCheck = (providerName = '') => {
   return {
     inMarketPlace: !!manifest,
     manifest: manifest?.data.plugin,
+    pluginID,
   }
 }

web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/use-tool-selector-state.ts

@@ -0,0 +1,247 @@
+'use client'
+import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
+import { useCallback, useMemo, useState } from 'react'
+import { generateFormValue, getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import {
+  useAllBuiltInTools,
+  useAllCustomTools,
+  useAllMCPTools,
+  useAllWorkflowTools,
+  useInvalidateAllBuiltInTools,
+} from '@/service/use-tools'
+import { getIconFromMarketPlace } from '@/utils/get-icon'
+import { usePluginInstalledCheck } from './use-plugin-installed-check'
+
+export type TabType = 'settings' | 'params'
+
+export type UseToolSelectorStateProps = {
+  value?: ToolValue
+  onSelect: (tool: ToolValue) => void
+  onSelectMultiple?: (tool: ToolValue[]) => void
+}
+
+/**
+ * Custom hook for managing tool selector state and computed values.
+ * Consolidates state management, data fetching, and event handlers.
+ */
+export const useToolSelectorState = ({
+  value,
+  onSelect,
+  onSelectMultiple,
+}: UseToolSelectorStateProps) => {
+  // Panel visibility states
+  const [isShow, setIsShow] = useState(false)
+  const [isShowChooseTool, setIsShowChooseTool] = useState(false)
+  const [currType, setCurrType] = useState<TabType>('settings')
+
+  // Fetch all tools data
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()
+  const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+
+  // Plugin info check
+  const { inMarketPlace, manifest, pluginID } = usePluginInstalledCheck(value?.provider_name)
+
+  // Merge all tools and find current provider
+  const currentProvider = useMemo(() => {
+    const mergedTools = [
+      ...(buildInTools || []),
+      ...(customTools || []),
+      ...(workflowTools || []),
+      ...(mcpTools || []),
+    ]
+    return mergedTools.find(toolWithProvider => toolWithProvider.id === value?.provider_name)
+  }, [value, buildInTools, customTools, workflowTools, mcpTools])
+
+  // Current tool from provider
+  const currentTool = useMemo(() => {
+    return currentProvider?.tools.find(tool => tool.name === value?.tool_name)
+  }, [currentProvider?.tools, value?.tool_name])
+
+  // Tool settings and params
+  const currentToolSettings = useMemo(() => {
+    if (!currentProvider)
+      return []
+    return currentProvider.tools
+      .find(tool => tool.name === value?.tool_name)
+      ?.parameters
+      .filter(param => param.form !== 'llm') || []
+  }, [currentProvider, value])
+
+  const currentToolParams = useMemo(() => {
+    if (!currentProvider)
+      return []
+    return currentProvider.tools
+      .find(tool => tool.name === value?.tool_name)
+      ?.parameters
+      .filter(param => param.form === 'llm') || []
+  }, [currentProvider, value])
+
+  // Form schemas
+  const settingsFormSchemas = useMemo(
+    () => toolParametersToFormSchemas(currentToolSettings),
+    [currentToolSettings],
+  )
+  const paramsFormSchemas = useMemo(
+    () => toolParametersToFormSchemas(currentToolParams),
+    [currentToolParams],
+  )
+
+  // Tab visibility flags
+  const showTabSlider = currentToolSettings.length > 0 && currentToolParams.length > 0
+  const userSettingsOnly = currentToolSettings.length > 0 && !currentToolParams.length
+  const reasoningConfigOnly = currentToolParams.length > 0 && !currentToolSettings.length
+
+  // Manifest icon URL
+  const manifestIcon = useMemo(() => {
+    if (!manifest || !pluginID)
+      return ''
+    return getIconFromMarketPlace(pluginID)
+  }, [manifest, pluginID])
+
+  // Convert tool default value to tool value format
+  const getToolValue = useCallback((tool: ToolDefaultValue): ToolValue => {
+    const settingValues = generateFormValue(
+      tool.params,
+      toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form !== 'llm') as any),
+    )
+    const paramValues = generateFormValue(
+      tool.params,
+      toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form === 'llm') as any),
+      true,
+    )
+    return {
+      provider_name: tool.provider_id,
+      provider_show_name: tool.provider_name,
+      tool_name: tool.tool_name,
+      tool_label: tool.tool_label,
+      tool_description: tool.tool_description,
+      settings: settingValues,
+      parameters: paramValues,
+      enabled: tool.is_team_authorization,
+      extra: {
+        description: tool.tool_description,
+      },
+    }
+  }, [])
+
+  // Event handlers
+  const handleSelectTool = useCallback((tool: ToolDefaultValue) => {
+    const toolValue = getToolValue(tool)
+    onSelect(toolValue)
+  }, [getToolValue, onSelect])
+
+  const handleSelectMultipleTool = useCallback((tools: ToolDefaultValue[]) => {
+    const toolValues = tools.map(item => getToolValue(item))
+    onSelectMultiple?.(toolValues)
+  }, [getToolValue, onSelectMultiple])
+
+  const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (!value)
+      return
+    onSelect({
+      ...value,
+      extra: {
+        ...value.extra,
+        description: e.target.value || '',
+      },
+    })
+  }, [value, onSelect])
+
+  const handleSettingsFormChange = useCallback((v: Record<string, any>) => {
+    if (!value)
+      return
+    const newValue = getStructureValue(v)
+    onSelect({
+      ...value,
+      settings: newValue,
+    })
+  }, [value, onSelect])
+
+  const handleParamsFormChange = useCallback((v: Record<string, any>) => {
+    if (!value)
+      return
+    onSelect({
+      ...value,
+      parameters: v,
+    })
+  }, [value, onSelect])
+
+  const handleEnabledChange = useCallback((state: boolean) => {
+    if (!value)
+      return
+    onSelect({
+      ...value,
+      enabled: state,
+    })
+  }, [value, onSelect])
+
+  const handleAuthorizationItemClick = useCallback((id: string) => {
+    if (!value)
+      return
+    onSelect({
+      ...value,
+      credential_id: id,
+    })
+  }, [value, onSelect])
+
+  const handleInstall = useCallback(async () => {
+    try {
+      await invalidateAllBuiltinTools()
+    }
+    catch (error) {
+      console.error('Failed to invalidate built-in tools cache', error)
+    }
+    try {
+      await invalidateInstalledPluginList()
+    }
+    catch (error) {
+      console.error('Failed to invalidate installed plugin list cache', error)
+    }
+  }, [invalidateAllBuiltinTools, invalidateInstalledPluginList])
+
+  const getSettingsValue = useCallback(() => {
+    return getPlainValue(value?.settings || {})
+  }, [value?.settings])
+
+  return {
+    // State
+    isShow,
+    setIsShow,
+    isShowChooseTool,
+    setIsShowChooseTool,
+    currType,
+    setCurrType,
+
+    // Computed values
+    currentProvider,
+    currentTool,
+    currentToolSettings,
+    currentToolParams,
+    settingsFormSchemas,
+    paramsFormSchemas,
+    showTabSlider,
+    userSettingsOnly,
+    reasoningConfigOnly,
+    manifestIcon,
+    inMarketPlace,
+    manifest,
+
+    // Event handlers
+    handleSelectTool,
+    handleSelectMultipleTool,
+    handleDescriptionChange,
+    handleSettingsFormChange,
+    handleParamsFormChange,
+    handleEnabledChange,
+    handleAuthorizationItemClick,
+    handleInstall,
+    getSettingsValue,
+  }
+}
+
+export type ToolSelectorState = ReturnType<typeof useToolSelectorState>

web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx

@@ -5,43 +5,26 @@ import type {
 } from '@floating-ui/react'
 import type { FC } from 'react'
 import type { Node } from 'reactflow'
-import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
+import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
 import Link from 'next/link'
 import * as React from 'react'
-import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Divider from '@/app/components/base/divider'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import TabSlider from '@/app/components/base/tab-slider-plain'
-import Textarea from '@/app/components/base/textarea'
-import {
-  AuthCategory,
-  PluginAuthInAgent,
-} from '@/app/components/plugins/plugin-auth'
-import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
-import ReasoningConfigForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form'
-import ToolItem from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-item'
-import ToolTrigger from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger'
 import { CollectionType } from '@/app/components/tools/types'
-import { generateFormValue, getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
-import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
-import ToolForm from '@/app/components/workflow/nodes/tool/components/tool-form'
-import { MARKETPLACE_API_PREFIX } from '@/config'
-import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
-import {
-  useAllBuiltInTools,
-  useAllCustomTools,
-  useAllMCPTools,
-  useAllWorkflowTools,
-  useInvalidateAllBuiltInTools,
-} from '@/service/use-tools'
 import { cn } from '@/utils/classnames'
-import { ReadmeEntrance } from '../../readme-panel/entrance'
+import {
+  ToolAuthorizationSection,
+  ToolBaseForm,
+  ToolItem,
+  ToolSettingsPanel,
+  ToolTrigger,
+} from './components'
+import { useToolSelectorState } from './hooks/use-tool-selector-state'
 
 type Props = {
   disabled?: boolean
@@ -65,6 +48,7 @@ type Props = {
   availableNodes: Node[]
   nodeId?: string
 }
+
 const ToolSelector: FC<Props> = ({
   value,
   selectedTools,
@@ -87,321 +71,177 @@ const ToolSelector: FC<Props> = ({
   nodeId = '',
 }) => {
   const { t } = useTranslation()
-  const [isShow, onShowChange] = useState(false)
+
+  // Use custom hook for state management
+  const state = useToolSelectorState({ value, onSelect, onSelectMultiple })
+  const {
+    isShow,
+    setIsShow,
+    isShowChooseTool,
+    setIsShowChooseTool,
+    currType,
+    setCurrType,
+    currentProvider,
+    currentTool,
+    settingsFormSchemas,
+    paramsFormSchemas,
+    showTabSlider,
+    userSettingsOnly,
+    reasoningConfigOnly,
+    manifestIcon,
+    inMarketPlace,
+    manifest,
+    handleSelectTool,
+    handleSelectMultipleTool,
+    handleDescriptionChange,
+    handleSettingsFormChange,
+    handleParamsFormChange,
+    handleEnabledChange,
+    handleAuthorizationItemClick,
+    handleInstall,
+    getSettingsValue,
+  } = state
+
   const handleTriggerClick = () => {
     if (disabled)
       return
-    onShowChange(true)
+    setIsShow(true)
   }
 
-  const { data: buildInTools } = useAllBuiltInTools()
-  const { data: customTools } = useAllCustomTools()
-  const { data: workflowTools } = useAllWorkflowTools()
-  const { data: mcpTools } = useAllMCPTools()
-  const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
-  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  // Determine portal open state based on controlled vs uncontrolled mode
+  const portalOpen = trigger ? controlledState : isShow
+  const onPortalOpenChange = trigger ? onControlledStateChange : setIsShow
 
-  // plugin info check
-  const { inMarketPlace, manifest } = usePluginInstalledCheck(value?.provider_name)
-
-  const currentProvider = useMemo(() => {
-    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || []), ...(mcpTools || [])]
-    return mergedTools.find((toolWithProvider) => {
-      return toolWithProvider.id === value?.provider_name
-    })
-  }, [value, buildInTools, customTools, workflowTools, mcpTools])
-
-  const [isShowChooseTool, setIsShowChooseTool] = useState(false)
-  const getToolValue = (tool: ToolDefaultValue) => {
-    const settingValues = generateFormValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form !== 'llm') as any))
-    const paramValues = generateFormValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form === 'llm') as any), true)
-    return {
-      provider_name: tool.provider_id,
-      provider_show_name: tool.provider_name,
-      type: tool.provider_type,
-      tool_name: tool.tool_name,
-      tool_label: tool.tool_label,
-      tool_description: tool.tool_description,
-      settings: settingValues,
-      parameters: paramValues,
-      enabled: tool.is_team_authorization,
-      extra: {
-        description: tool.tool_description,
-      },
-      schemas: tool.paramSchemas,
-    }
-  }
-  const handleSelectTool = (tool: ToolDefaultValue) => {
-    const toolValue = getToolValue(tool)
-    onSelect(toolValue)
-    // setIsShowChooseTool(false)
-  }
-  const handleSelectMultipleTool = (tool: ToolDefaultValue[]) => {
-    const toolValues = tool.map(item => getToolValue(item))
-    onSelectMultiple?.(toolValues)
-  }
-
-  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onSelect({
-      ...value,
-      extra: {
-        ...value?.extra,
-        description: e.target.value || '',
-      },
-    } as any)
-  }
-
-  // tool settings & params
-  const currentToolSettings = useMemo(() => {
-    if (!currentProvider)
-      return []
-    return currentProvider.tools.find(tool => tool.name === value?.tool_name)?.parameters.filter(param => param.form !== 'llm') || []
-  }, [currentProvider, value])
-  const currentToolParams = useMemo(() => {
-    if (!currentProvider)
-      return []
-    return currentProvider.tools.find(tool => tool.name === value?.tool_name)?.parameters.filter(param => param.form === 'llm') || []
-  }, [currentProvider, value])
-  const [currType, setCurrType] = useState('settings')
-  const showTabSlider = currentToolSettings.length > 0 && currentToolParams.length > 0
-  const userSettingsOnly = currentToolSettings.length > 0 && !currentToolParams.length
-  const reasoningConfigOnly = currentToolParams.length > 0 && !currentToolSettings.length
-
-  const settingsFormSchemas = useMemo(() => toolParametersToFormSchemas(currentToolSettings), [currentToolSettings])
-  const paramsFormSchemas = useMemo(() => toolParametersToFormSchemas(currentToolParams), [currentToolParams])
-
-  const handleSettingsFormChange = (v: Record<string, any>) => {
-    const newValue = getStructureValue(v)
-    const toolValue = {
-      ...value,
-      settings: newValue,
-    }
-    onSelect(toolValue as any)
-  }
-  const handleParamsFormChange = (v: Record<string, any>) => {
-    const toolValue = {
-      ...value,
-      parameters: v,
-    }
-    onSelect(toolValue as any)
-  }
-
-  const handleEnabledChange = (state: boolean) => {
-    onSelect({
-      ...value,
-      enabled: state,
-    } as any)
-  }
-
-  // install from marketplace
-  const currentTool = useMemo(() => {
-    return currentProvider?.tools.find(tool => tool.name === value?.tool_name)
-  }, [currentProvider?.tools, value?.tool_name])
-  const manifestIcon = useMemo(() => {
-    if (!manifest)
-      return ''
-    return `${MARKETPLACE_API_PREFIX}/plugins/${(manifest as any).plugin_id}/icon`
-  }, [manifest])
-  const handleInstall = async () => {
-    invalidateAllBuiltinTools()
-    invalidateInstalledPluginList()
-  }
-  const handleAuthorizationItemClick = (id: string) => {
-    onSelect({
-      ...value,
-      credential_id: id,
-    } as any)
-  }
+  // Build error tooltip content
+  const renderErrorTip = () => (
+    <div className="max-w-[240px] space-y-1 text-xs">
+      <h3 className="font-semibold text-text-primary">
+        {currentTool
+          ? t('detailPanel.toolSelector.uninstalledTitle', { ns: 'plugin' })
+          : t('detailPanel.toolSelector.unsupportedTitle', { ns: 'plugin' })}
+      </h3>
+      <p className="tracking-tight text-text-secondary">
+        {currentTool
+          ? t('detailPanel.toolSelector.uninstalledContent', { ns: 'plugin' })
+          : t('detailPanel.toolSelector.unsupportedContent', { ns: 'plugin' })}
+      </p>
+      <p>
+        <Link href="/plugins" className="tracking-tight text-text-accent">
+          {t('detailPanel.toolSelector.uninstalledLink', { ns: 'plugin' })}
+        </Link>
+      </p>
+    </div>
+  )
 
   return (
-    <>
-      <PortalToFollowElem
-        placement={placement}
-        offset={offset}
-        open={trigger ? controlledState : isShow}
-        onOpenChange={trigger ? onControlledStateChange : onShowChange}
+    <PortalToFollowElem
+      placement={placement}
+      offset={offset}
+      open={portalOpen}
+      onOpenChange={onPortalOpenChange}
+    >
+      <PortalToFollowElemTrigger
+        className="w-full"
+        onClick={() => {
+          if (!currentProvider || !currentTool)
+            return
+          handleTriggerClick()
+        }}
       >
-        <PortalToFollowElemTrigger
-          className="w-full"
-          onClick={() => {
-            if (!currentProvider || !currentTool)
-              return
-            handleTriggerClick()
-          }}
+        {trigger}
+
+        {/* Default trigger - no value */}
+        {!trigger && !value?.provider_name && (
+          <ToolTrigger
+            isConfigure
+            open={isShow}
+            value={value}
+            provider={currentProvider}
+          />
+        )}
+
+        {/* Default trigger - with value */}
+        {!trigger && value?.provider_name && (
+          <ToolItem
+            open={isShow}
+            icon={currentProvider?.icon || manifestIcon}
+            isMCPTool={currentProvider?.type === CollectionType.mcp}
+            providerName={value.provider_name}
+            providerShowName={value.provider_show_name}
+            toolLabel={value.tool_label || value.tool_name}
+            showSwitch={supportEnableSwitch}
+            switchValue={value.enabled}
+            onSwitchChange={handleEnabledChange}
+            onDelete={onDelete}
+            noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
+            uninstalled={!currentProvider && inMarketPlace}
+            versionMismatch={currentProvider && inMarketPlace && !currentTool}
+            installInfo={manifest?.latest_package_identifier}
+            onInstall={handleInstall}
+            isError={(!currentProvider || !currentTool) && !inMarketPlace}
+            errorTip={renderErrorTip()}
+          />
+        )}
+      </PortalToFollowElemTrigger>
+
+      <PortalToFollowElemContent className="z-10">
+        <div className={cn(
+          'relative max-h-[642px] min-h-20 w-[361px] rounded-xl',
+          'border-[0.5px] border-components-panel-border bg-components-panel-bg-blur',
+          'overflow-y-auto pb-2 pb-4 shadow-lg backdrop-blur-sm',
+        )}
         >
-          {trigger}
-          {!trigger && !value?.provider_name && (
-            <ToolTrigger
-              isConfigure
-              open={isShow}
-              value={value}
-              provider={currentProvider}
-            />
-          )}
-          {!trigger && value?.provider_name && (
-            <ToolItem
-              open={isShow}
-              icon={currentProvider?.icon || manifestIcon}
-              isMCPTool={currentProvider?.type === CollectionType.mcp}
-              providerName={value.provider_name}
-              providerShowName={value.provider_show_name}
-              toolLabel={value.tool_label || value.tool_name}
-              showSwitch={supportEnableSwitch}
-              switchValue={value.enabled}
-              onSwitchChange={handleEnabledChange}
-              onDelete={onDelete}
-              noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
-              uninstalled={!currentProvider && inMarketPlace}
-              versionMismatch={currentProvider && inMarketPlace && !currentTool}
-              installInfo={manifest?.latest_package_identifier}
-              onInstall={() => handleInstall()}
-              isError={(!currentProvider || !currentTool) && !inMarketPlace}
-              errorTip={(
-                <div className="max-w-[240px] space-y-1 text-xs">
-                  <h3 className="font-semibold text-text-primary">{currentTool ? t('detailPanel.toolSelector.uninstalledTitle', { ns: 'plugin' }) : t('detailPanel.toolSelector.unsupportedTitle', { ns: 'plugin' })}</h3>
-                  <p className="tracking-tight text-text-secondary">{currentTool ? t('detailPanel.toolSelector.uninstalledContent', { ns: 'plugin' }) : t('detailPanel.toolSelector.unsupportedContent', { ns: 'plugin' })}</p>
-                  <p>
-                    <Link href="/plugins" className="tracking-tight text-text-accent">{t('detailPanel.toolSelector.uninstalledLink', { ns: 'plugin' })}</Link>
-                  </p>
-                </div>
-              )}
-            />
-          )}
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-10">
-          <div className={cn('relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-4 shadow-lg backdrop-blur-sm', 'overflow-y-auto pb-2')}>
-            <>
-              <div className="system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary">{t(`detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`, { ns: 'plugin' })}</div>
-              {/* base form */}
-              <div className="flex flex-col gap-3 px-4 py-2">
-                <div className="flex flex-col gap-1">
-                  <div className="system-sm-semibold flex h-6 items-center justify-between text-text-secondary">
-                    {t('detailPanel.toolSelector.toolLabel', { ns: 'plugin' })}
-                    <ReadmeEntrance pluginDetail={currentProvider as any} showShortTip className="pb-0" />
-                  </div>
-                  <ToolPicker
-                    placement="bottom"
-                    offset={offset}
-                    trigger={(
-                      <ToolTrigger
-                        open={panelShowState || isShowChooseTool}
-                        value={value}
-                        provider={currentProvider}
-                      />
-                    )}
-                    isShow={panelShowState || isShowChooseTool}
-                    onShowChange={trigger ? onPanelShowStateChange as any : setIsShowChooseTool}
-                    disabled={false}
-                    supportAddCustomTool
-                    onSelect={handleSelectTool}
-                    onSelectMultiple={handleSelectMultipleTool}
-                    scope={scope}
-                    selectedTools={selectedTools}
-                  />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <div className="system-sm-semibold flex h-6 items-center text-text-secondary">{t('detailPanel.toolSelector.descriptionLabel', { ns: 'plugin' })}</div>
-                  <Textarea
-                    className="resize-none"
-                    placeholder={t('detailPanel.toolSelector.descriptionPlaceholder', { ns: 'plugin' })}
-                    value={value?.extra?.description || ''}
-                    onChange={handleDescriptionChange}
-                    disabled={!value?.provider_name}
-                  />
-                </div>
-              </div>
-              {/* authorization */}
-              {currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
-                <>
-                  <Divider className="my-1 w-full" />
-                  <div className="px-4 py-2">
-                    <PluginAuthInAgent
-                      pluginPayload={{
-                        provider: currentProvider.name,
-                        category: AuthCategory.tool,
-                        providerType: currentProvider.type,
-                        detail: currentProvider as any,
-                      }}
-                      credentialId={value?.credential_id}
-                      onAuthorizationItemClick={handleAuthorizationItemClick}
-                    />
-                  </div>
-                </>
-              )}
-              {/* tool settings */}
-              {(currentToolSettings.length > 0 || currentToolParams.length > 0) && currentProvider?.is_team_authorization && (
-                <>
-                  <Divider className="my-1 w-full" />
-                  {/* tabs */}
-                  {nodeId && showTabSlider && (
-                    <TabSlider
-                      className="mt-1 shrink-0 px-4"
-                      itemClassName="py-3"
-                      noBorderBottom
-                      smallItem
-                      value={currType}
-                      onChange={(value) => {
-                        setCurrType(value)
-                      }}
-                      options={[
-                        { value: 'settings', text: t('detailPanel.toolSelector.settings', { ns: 'plugin' })! },
-                        { value: 'params', text: t('detailPanel.toolSelector.params', { ns: 'plugin' })! },
-                      ]}
-                    />
-                  )}
-                  {nodeId && showTabSlider && currType === 'params' && (
-                    <div className="px-4 py-2">
-                      <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}</div>
-                      <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}</div>
-                    </div>
-                  )}
-                  {/* user settings only */}
-                  {userSettingsOnly && (
-                    <div className="p-4 pb-1">
-                      <div className="system-sm-semibold-uppercase text-text-primary">{t('detailPanel.toolSelector.settings', { ns: 'plugin' })}</div>
-                    </div>
-                  )}
-                  {/* reasoning config only */}
-                  {nodeId && reasoningConfigOnly && (
-                    <div className="mb-1 p-4 pb-1">
-                      <div className="system-sm-semibold-uppercase text-text-primary">{t('detailPanel.toolSelector.params', { ns: 'plugin' })}</div>
-                      <div className="pb-1">
-                        <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}</div>
-                        <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}</div>
-                      </div>
-                    </div>
-                  )}
-                  {/* user settings form */}
-                  {(currType === 'settings' || userSettingsOnly) && (
-                    <div className="px-4 py-2">
-                      <ToolForm
-                        inPanel
-                        readOnly={false}
-                        nodeId={nodeId}
-                        schema={settingsFormSchemas as any}
-                        value={getPlainValue(value?.settings || {})}
-                        onChange={handleSettingsFormChange}
-                      />
-                    </div>
-                  )}
-                  {/* reasoning config form */}
-                  {nodeId && (currType === 'params' || reasoningConfigOnly) && (
-                    <ReasoningConfigForm
-                      value={value?.parameters || {}}
-                      onChange={handleParamsFormChange}
-                      schemas={paramsFormSchemas as any}
-                      nodeOutputVars={nodeOutputVars}
-                      availableNodes={availableNodes}
-                      nodeId={nodeId}
-                    />
-                  )}
-                </>
-              )}
-            </>
+          {/* Header */}
+          <div className="system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary">
+            {t(`detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`, { ns: 'plugin' })}
           </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
-    </>
+
+          {/* Base form: tool picker + description */}
+          <ToolBaseForm
+            value={value}
+            currentProvider={currentProvider}
+            offset={offset}
+            scope={scope}
+            selectedTools={selectedTools}
+            isShowChooseTool={isShowChooseTool}
+            panelShowState={panelShowState}
+            hasTrigger={!!trigger}
+            onShowChange={setIsShowChooseTool}
+            onPanelShowStateChange={onPanelShowStateChange}
+            onSelectTool={handleSelectTool}
+            onSelectMultipleTool={handleSelectMultipleTool}
+            onDescriptionChange={handleDescriptionChange}
+          />
+
+          {/* Authorization section */}
+          <ToolAuthorizationSection
+            currentProvider={currentProvider}
+            credentialId={value?.credential_id}
+            onAuthorizationItemClick={handleAuthorizationItemClick}
+          />
+
+          {/* Settings panel */}
+          <ToolSettingsPanel
+            value={value}
+            currentProvider={currentProvider}
+            nodeId={nodeId}
+            currType={currType}
+            settingsFormSchemas={settingsFormSchemas}
+            paramsFormSchemas={paramsFormSchemas}
+            settingsValue={getSettingsValue()}
+            showTabSlider={showTabSlider}
+            userSettingsOnly={userSettingsOnly}
+            reasoningConfigOnly={reasoningConfigOnly}
+            nodeOutputVars={nodeOutputVars}
+            availableNodes={availableNodes}
+            onCurrTypeChange={setCurrType}
+            onSettingsFormChange={handleSettingsFormChange}
+            onParamsFormChange={handleParamsFormChange}
+          />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }
+
 export default React.memo(ToolSelector)

web/app/components/tools/utils/to-form-schema.ts

@@ -1,8 +1,41 @@
 import type { TriggerEventParameter } from '../../plugins/types'
 import type { ToolCredential, ToolParameter } from '../types'
+import type { TypeWithI18N } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { SchemaRoot } from '@/app/components/workflow/nodes/llm/types'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 
+/**
+ * Form schema type for tool parameters.
+ * This type represents the schema returned by toolParametersToFormSchemas.
+ */
+export type ToolFormSchema = {
+  name: string
+  variable: string
+  label: TypeWithI18N
+  type: string
+  _type: string
+  form: string
+  required: boolean
+  default?: string
+  tooltip?: TypeWithI18N
+  show_on: { variable: string, value: string }[]
+  options?: {
+    label: TypeWithI18N
+    value: string
+    show_on: { variable: string, value: string }[]
+  }[]
+  placeholder?: TypeWithI18N
+  min?: number
+  max?: number
+  llm_description?: string
+  human_description?: TypeWithI18N
+  multiple?: boolean
+  url?: string
+  scope?: string
+  input_schema?: SchemaRoot
+}
+
 export const toType = (type: string) => {
   switch (type) {
     case 'string':
@@ -30,11 +63,11 @@ export const triggerEventParametersToFormSchemas = (parameters: TriggerEventPara
   })
 }
 
-export const toolParametersToFormSchemas = (parameters: ToolParameter[]) => {
+export const toolParametersToFormSchemas = (parameters: ToolParameter[]): ToolFormSchema[] => {
   if (!parameters)
     return []
 
-  const formSchemas = parameters.map((parameter) => {
+  const formSchemas = parameters.map((parameter): ToolFormSchema => {
     return {
       ...parameter,
       variable: parameter.name,

web/app/components/workflow/nodes/tool/components/tool-form/item.tsx

@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import SchemaModal from '@/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal'
+import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
 import FormInputItem from '@/app/components/workflow/nodes/_base/components/form-input-item'
 
 type Props = {

web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx

@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import SchemaModal from '@/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal'
+import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
 import FormInputItem from '@/app/components/workflow/nodes/_base/components/form-input-item'
 
 type Props = {