feat(auth): implement credential management modals and hooks

- Added  component for handling delete confirmation and edit modals.
- Introduced  and  for displaying credentials.
- Created custom hooks  and  to manage credential actions and modal states.
- Refactored  component to utilize new hooks and components for improved readability and maintainability.

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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,123 @@
+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

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

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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,71 @@
+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,29 +8,23 @@ import {
 import {
   memo,
   useCallback,
-  useRef,
+  useMemo,
   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 Item from './item'
+import AuthorizedModals from './authorized-modals'
+import CredentialSection, { ExtraCredentialSection } from './credential-section'
+import { useCredentialActions, useModalState } from './hooks'
 
 type AuthorizedProps = {
   pluginPayload: PluginPayload
@@ -53,6 +47,7 @@ type AuthorizedProps = {
   onUpdate?: () => void
   notAllowCustomCredential?: boolean
 }
+
 const Authorized = ({
   pluginPayload,
   credentials,
@@ -75,105 +70,55 @@ const Authorized = ({
   notAllowCustomCredential,
 }: AuthorizedProps) => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
+
+  // Dropdown open state
   const [isLocalOpen, setIsLocalOpen] = useState(false)
   const mergedIsOpen = isOpen ?? isLocalOpen
   const setMergedIsOpen = useCallback((open: boolean) => {
-    if (onOpenChange)
-      onOpenChange(open)
-
+    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
 
-    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)
+  // 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)
       return
-    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)
+    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])
 
   return (
     <>
@@ -188,33 +133,27 @@ 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={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>
-                )
-          }
+          {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>
+              )}
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-[100]">
           <div className={cn(
@@ -223,137 +162,72 @@ const Authorized = ({
           )}
           >
             <div className="py-1">
-              {
-                !!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>
-                )
-              }
+              <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}
+              />
             </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>
-      {
-        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}
-          />
-        )
-      }
+      <AuthorizedModals
+        pluginPayload={pluginPayload}
+        deleteCredentialId={deleteCredentialId}
+        doingAction={doingAction}
+        onDeleteConfirm={handleDeleteConfirm}
+        onDeleteCancel={closeDeleteConfirm}
+        editValues={editValues}
+        disabled={disabled}
+        onEditClose={closeEditModal}
+        onRemove={handleRemoveFromEdit}
+        onUpdate={onUpdate}
+      />
     </>
   )
 }

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

@@ -1,8 +0,0 @@
-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/tool-authorization-section.tsx

@@ -1,48 +0,0 @@
-'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

@@ -1,98 +0,0 @@
-'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

@@ -1,155 +0,0 @@
-'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.ts

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

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

@@ -1,3 +0,0 @@
-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-tool-selector-state.ts

@@ -1,247 +0,0 @@
-'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,26 +5,43 @@ import type {
 } from '@floating-ui/react'
 import type { FC } from 'react'
 import type { Node } from 'reactflow'
-import type { ToolValue } from '@/app/components/workflow/block-selector/types'
+import type { ToolDefaultValue, 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 { CollectionType } from '@/app/components/tools/types'
-import { cn } from '@/utils/classnames'
+import TabSlider from '@/app/components/base/tab-slider-plain'
+import Textarea from '@/app/components/base/textarea'
 import {
-  ToolAuthorizationSection,
-  ToolBaseForm,
-  ToolItem,
-  ToolSettingsPanel,
-  ToolTrigger,
-} from './components'
-import { useToolSelectorState } from './hooks/use-tool-selector-state'
+  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'
 
 type Props = {
   disabled?: boolean
@@ -48,7 +65,6 @@ type Props = {
   availableNodes: Node[]
   nodeId?: string
 }
-
 const ToolSelector: FC<Props> = ({
   value,
   selectedTools,
@@ -71,177 +87,321 @@ const ToolSelector: FC<Props> = ({
   nodeId = '',
 }) => {
   const { t } = useTranslation()
-
-  // 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 [isShow, onShowChange] = useState(false)
   const handleTriggerClick = () => {
     if (disabled)
       return
-    setIsShow(true)
+    onShowChange(true)
   }
 
-  // Determine portal open state based on controlled vs uncontrolled mode
-  const portalOpen = trigger ? controlledState : isShow
-  const onPortalOpenChange = trigger ? onControlledStateChange : setIsShow
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()
+  const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
 
-  // 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>
-  )
+  // 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)
+  }
 
   return (
-    <PortalToFollowElem
-      placement={placement}
-      offset={offset}
-      open={portalOpen}
-      onOpenChange={onPortalOpenChange}
-    >
-      <PortalToFollowElemTrigger
-        className="w-full"
-        onClick={() => {
-          if (!currentProvider || !currentTool)
-            return
-          handleTriggerClick()
-        }}
+    <>
+      <PortalToFollowElem
+        placement={placement}
+        offset={offset}
+        open={trigger ? controlledState : isShow}
+        onOpenChange={trigger ? onControlledStateChange : onShowChange}
       >
-        {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',
-        )}
+        <PortalToFollowElemTrigger
+          className="w-full"
+          onClick={() => {
+            if (!currentProvider || !currentTool)
+              return
+            handleTriggerClick()
+          }}
         >
-          {/* Header */}
-          <div className="system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary">
-            {t(`detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`, { ns: 'plugin' })}
+          {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}
+                    />
+                  )}
+                </>
+              )}
+            </>
           </div>
-
-          {/* 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>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </>
   )
 }
-
 export default React.memo(ToolSelector)

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

@@ -1,6 +1,4 @@
 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 {
@@ -37,7 +35,7 @@ import SchemaModal from './schema-modal'
 type Props = {
   value: Record<string, any>
   onChange: (val: Record<string, any>) => void
-  schemas: ToolFormSchema[]
+  schemas: any[]
   nodeOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   nodeId: string
@@ -53,7 +51,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const language = useLanguage()
-  const getVarKindType = (type: string) => {
+  const getVarKindType = (type: FormTypeEnum) => {
     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)
@@ -62,7 +60,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
       return VarKindType.mixed
   }
 
-  const handleAutomatic = (key: string, val: any, type: string) => {
+  const handleAutomatic = (key: string, val: any, type: FormTypeEnum) => {
     onChange({
       ...value,
       [key]: {
@@ -82,7 +80,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
       onChange(res)
     }
   }, [onChange, value])
-  const handleValueChange = useCallback((variable: string, varType: string) => {
+  const handleValueChange = useCallback((variable: string, varType: FormTypeEnum) => {
     return (newValue: any) => {
       const res = produce(value, (draft: ToolVarInputs) => {
         draft[variable].value = {
@@ -136,7 +134,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
   const [schema, setSchema] = useState<SchemaRoot | null>(null)
   const [schemaRootName, setSchemaRootName] = useState<string>('')
 
-  const renderField = (schema: ToolFormSchema, showSchema: (schema: SchemaRoot, rootName: string) => void) => {
+  const renderField = (schema: any, showSchema: (schema: SchemaRoot, rootName: string) => void) => {
     const {
       default: defaultValue,
       variable,
@@ -277,16 +275,16 @@ const ReasoningConfigForm: React.FC<Props> = ({
                 onChange={handleValueChange(variable, type)}
               />
             )}
-            {isSelect && options && (
+            {isSelect && (
               <SimpleSelect
                 wrapperClassName="h-8 grow"
                 defaultValue={varInput?.value}
-                items={options.filter((option) => {
+                items={options.filter((option: { show_on: any[] }) => {
                   if (option.show_on.length)
                     return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
 
                   return true
-                }).map(option => ({ value: option.value, name: option.label[language] || option.label.en_US }))}
+                }).map((option: { value: any, label: { [x: string]: any, en_US: any } }) => ({ 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}
               />
@@ -334,7 +332,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
                 value={varInput?.value || []}
                 onChange={handleVariableSelectorChange(variable)}
                 filterVar={getFilterVar()}
-                schema={schema as Partial<CredentialFormSchema>}
+                schema={schema}
                 valueTypePlaceHolder={targetVarType()}
               />
             )}

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

@@ -1,41 +1,8 @@
 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':
@@ -63,11 +30,11 @@ export const triggerEventParametersToFormSchemas = (parameters: TriggerEventPara
   })
 }
 
-export const toolParametersToFormSchemas = (parameters: ToolParameter[]): ToolFormSchema[] => {
+export const toolParametersToFormSchemas = (parameters: ToolParameter[]) => {
   if (!parameters)
     return []
 
-  const formSchemas = parameters.map((parameter): ToolFormSchema => {
+  const formSchemas = parameters.map((parameter) => {
     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/components'
+import SchemaModal from '@/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal'
 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/components'
+import SchemaModal from '@/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal'
 import FormInputItem from '@/app/components/workflow/nodes/_base/components/form-input-item'
 
 type Props = {