Support OAuth Integration for Plugin Tools (#22550)

Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: Yeuoly <admin@srmxy.cn>
2025-07-17 17:18:44 +08:00
parent 965e952336
commit a4ef900916
89 changed files with 5516 additions and 875 deletions
--- a/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
@@ -0,0 +1,50 @@
+import {
+  memo,
+  useState,
+} from 'react'
+import Button from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/button'
+import ApiKeyModal from './api-key-modal'
+import type { PluginPayload } from '../types'
+
+export type AddApiKeyButtonProps = {
+  pluginPayload: PluginPayload
+  buttonVariant?: ButtonProps['variant']
+  buttonText?: string
+  disabled?: boolean
+  onUpdate?: () => void
+}
+const AddApiKeyButton = ({
+  pluginPayload,
+  buttonVariant = 'secondary-accent',
+  buttonText = 'use api key',
+  disabled,
+  onUpdate,
+}: AddApiKeyButtonProps) => {
+  const [isApiKeyModalOpen, setIsApiKeyModalOpen] = useState(false)
+
+  return (
+    <>
+      <Button
+        className='w-full'
+        variant={buttonVariant}
+        onClick={() => setIsApiKeyModalOpen(true)}
+        disabled={disabled}
+      >
+        {buttonText}
+      </Button>
+      {
+        isApiKeyModalOpen && (
+          <ApiKeyModal
+            pluginPayload={pluginPayload}
+            onClose={() => setIsApiKeyModalOpen(false)}
+            onUpdate={onUpdate}
+          />
+        )
+      }
+    </>
+
+  )
+}
+
+export default memo(AddApiKeyButton)
--- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
@@ -0,0 +1,259 @@
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiClipboardLine,
+  RiEqualizer2Line,
+  RiInformation2Fill,
+} from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/button'
+import OAuthClientSettings from './oauth-client-settings'
+import cn from '@/utils/classnames'
+import type { PluginPayload } from '../types'
+import { openOAuthPopup } from '@/hooks/use-oauth'
+import Badge from '@/app/components/base/badge'
+import {
+  useGetPluginOAuthClientSchemaHook,
+  useGetPluginOAuthUrlHook,
+} from '../hooks/use-credential'
+import type { FormSchema } from '@/app/components/base/form/types'
+import { FormTypeEnum } from '@/app/components/base/form/types'
+import ActionButton from '@/app/components/base/action-button'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+
+export type AddOAuthButtonProps = {
+  pluginPayload: PluginPayload
+  buttonVariant?: ButtonProps['variant']
+  buttonText?: string
+  className?: string
+  buttonLeftClassName?: string
+  buttonRightClassName?: string
+  dividerClassName?: string
+  disabled?: boolean
+  onUpdate?: () => void
+}
+const AddOAuthButton = ({
+  pluginPayload,
+  buttonVariant = 'primary',
+  buttonText = 'use oauth',
+  className,
+  buttonLeftClassName,
+  buttonRightClassName,
+  dividerClassName,
+  disabled,
+  onUpdate,
+}: AddOAuthButtonProps) => {
+  const { t } = useTranslation()
+  const renderI18nObject = useRenderI18nObject()
+  const [isOAuthSettingsOpen, setIsOAuthSettingsOpen] = useState(false)
+  const { mutateAsync: getPluginOAuthUrl } = useGetPluginOAuthUrlHook(pluginPayload)
+  const { data, isLoading } = useGetPluginOAuthClientSchemaHook(pluginPayload)
+  const {
+    schema = [],
+    is_oauth_custom_client_enabled,
+    is_system_oauth_params_exists,
+    client_params,
+    redirect_uri,
+  } = data || {}
+  const isConfigured = is_system_oauth_params_exists || is_oauth_custom_client_enabled
+  const handleOAuth = useCallback(async () => {
+    const { authorization_url } = await getPluginOAuthUrl()
+
+    if (authorization_url) {
+      openOAuthPopup(
+        authorization_url,
+        () => onUpdate?.(),
+      )
+    }
+  }, [getPluginOAuthUrl, onUpdate])
+
+  const renderCustomLabel = useCallback((item: FormSchema) => {
+    return (
+      <div className='w-full'>
+        <div className='mb-4 flex rounded-xl bg-background-section-burn p-4'>
+          <div className='mr-3 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg'>
+            <RiInformation2Fill className='h-5 w-5 text-text-accent' />
+          </div>
+          <div className='w-0 grow'>
+            <div className='system-sm-regular mb-1.5'>
+              {t('plugin.auth.clientInfo')}
+            </div>
+            {
+              redirect_uri && (
+                <div className='system-sm-medium flex w-full py-0.5'>
+                  <div className='w-0 grow break-words'>{redirect_uri}</div>
+                  <ActionButton
+                    className='shrink-0'
+                    onClick={() => {
+                      navigator.clipboard.writeText(redirect_uri || '')
+                    }}
+                  >
+                    <RiClipboardLine className='h-4 w-4' />
+                  </ActionButton>
+                </div>
+              )
+            }
+          </div>
+        </div>
+        <div className='system-sm-medium flex h-6 items-center text-text-secondary'>
+          {renderI18nObject(item.label as Record<string, string>)}
+          {
+            item.required && (
+              <span className='ml-1 text-text-destructive-secondary'>*</span>
+            )
+          }
+        </div>
+      </div>
+    )
+  }, [t, redirect_uri, renderI18nObject])
+  const memorizedSchemas = useMemo(() => {
+    const result: FormSchema[] = schema.map((item, index) => {
+      return {
+        ...item,
+        label: index === 0 ? renderCustomLabel(item) : item.label,
+        labelClassName: index === 0 ? 'h-auto' : undefined,
+      }
+    })
+    if (is_system_oauth_params_exists) {
+      result.unshift({
+        name: '__oauth_client__',
+        label: t('plugin.auth.oauthClient'),
+        type: FormTypeEnum.radio,
+        options: [
+          {
+            label: t('plugin.auth.default'),
+            value: 'default',
+          },
+          {
+            label: t('plugin.auth.custom'),
+            value: 'custom',
+          },
+        ],
+        required: false,
+        default: is_oauth_custom_client_enabled ? 'custom' : 'default',
+      } as FormSchema)
+      result.forEach((item, index) => {
+        if (index > 0) {
+          item.show_on = [
+            {
+              variable: '__oauth_client__',
+              value: 'custom',
+            },
+          ]
+          if (client_params)
+            item.default = client_params[item.name] || item.default
+        }
+      })
+    }
+
+    return result
+  }, [schema, renderCustomLabel, t, is_system_oauth_params_exists, is_oauth_custom_client_enabled, client_params])
+
+  const __auth_client__ = useMemo(() => {
+    if (isConfigured) {
+      if (is_oauth_custom_client_enabled)
+        return 'custom'
+      return 'default'
+    }
+    else {
+      if (is_system_oauth_params_exists)
+        return 'default'
+      return 'custom'
+    }
+  }, [isConfigured, is_oauth_custom_client_enabled, is_system_oauth_params_exists])
+
+  return (
+    <>
+      {
+        isConfigured && (
+          <Button
+            variant={buttonVariant}
+            className={cn(
+              'w-full px-0 py-0 hover:bg-components-button-primary-bg',
+              className,
+            )}
+            disabled={disabled}
+            onClick={handleOAuth}
+          >
+            <div className={cn(
+              'flex h-full w-0 grow items-center justify-center rounded-l-lg pl-0.5 hover:bg-components-button-primary-bg-hover',
+              buttonLeftClassName,
+            )}>
+              <div
+                className='truncate'
+                title={buttonText}
+              >
+                {buttonText}
+              </div>
+              {
+                is_oauth_custom_client_enabled && (
+                  <Badge
+                    className={cn(
+                      'ml-1 mr-0.5',
+                      buttonVariant === 'primary' && 'border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface',
+                    )}
+                  >
+                    {t('plugin.auth.custom')}
+                  </Badge>
+                )
+              }
+            </div>
+            <div className={cn(
+              'h-4 w-[1px] shrink-0 bg-text-primary-on-surface opacity-[0.15]',
+              dividerClassName,
+            )}></div>
+            <div
+              className={cn(
+                'flex h-full w-8 shrink-0 items-center justify-center rounded-r-lg hover:bg-components-button-primary-bg-hover',
+                buttonRightClassName,
+              )}
+              onClick={(e) => {
+                e.stopPropagation()
+                setIsOAuthSettingsOpen(true)
+              }}
+            >
+              <RiEqualizer2Line className='h-4 w-4' />
+            </div>
+          </Button>
+        )
+      }
+      {
+        !isConfigured && (
+          <Button
+            variant={buttonVariant}
+            onClick={() => setIsOAuthSettingsOpen(true)}
+            disabled={disabled}
+            className='w-full'
+          >
+            <RiEqualizer2Line className='mr-0.5 h-4 w-4' />
+            {t('plugin.auth.setupOAuth')}
+          </Button>
+        )
+      }
+      {
+        isOAuthSettingsOpen && (
+          <OAuthClientSettings
+            pluginPayload={pluginPayload}
+            onClose={() => setIsOAuthSettingsOpen(false)}
+            disabled={disabled || isLoading}
+            schemas={memorizedSchemas}
+            onAuth={handleOAuth}
+            editValues={{
+              ...client_params,
+              __oauth_client__: __auth_client__,
+            }}
+            hasOriginalClientParams={Object.keys(client_params || {}).length > 0}
+            onUpdate={onUpdate}
+          />
+        )
+      }
+    </>
+  )
+}
+
+export default memo(AddOAuthButton)
--- a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
@@ -0,0 +1,181 @@
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiExternalLinkLine } from '@remixicon/react'
+import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import Modal from '@/app/components/base/modal/modal'
+import { CredentialTypeEnum } from '../types'
+import AuthForm from '@/app/components/base/form/form-scenarios/auth'
+import type { FormRefObject } from '@/app/components/base/form/types'
+import { FormTypeEnum } from '@/app/components/base/form/types'
+import { useToastContext } from '@/app/components/base/toast'
+import Loading from '@/app/components/base/loading'
+import type { PluginPayload } from '../types'
+import {
+  useAddPluginCredentialHook,
+  useGetPluginCredentialSchemaHook,
+  useUpdatePluginCredentialHook,
+} from '../hooks/use-credential'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+
+export type ApiKeyModalProps = {
+  pluginPayload: PluginPayload
+  onClose?: () => void
+  editValues?: Record<string, any>
+  onRemove?: () => void
+  disabled?: boolean
+  onUpdate?: () => void
+}
+const ApiKeyModal = ({
+  pluginPayload,
+  onClose,
+  editValues,
+  onRemove,
+  disabled,
+  onUpdate,
+}: ApiKeyModalProps) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const [doingAction, setDoingAction] = useState(false)
+  const doingActionRef = useRef(doingAction)
+  const handleSetDoingAction = useCallback((value: boolean) => {
+    doingActionRef.current = value
+    setDoingAction(value)
+  }, [])
+  const { data = [], isLoading } = useGetPluginCredentialSchemaHook(pluginPayload, CredentialTypeEnum.API_KEY)
+  const formSchemas = useMemo(() => {
+    return [
+      {
+        type: FormTypeEnum.textInput,
+        name: '__name__',
+        label: t('plugin.auth.authorizationName'),
+        required: false,
+      },
+      ...data,
+    ]
+  }, [data, t])
+  const defaultValues = formSchemas.reduce((acc, schema) => {
+    if (schema.default)
+      acc[schema.name] = schema.default
+    return acc
+  }, {} as Record<string, any>)
+  const helpField = formSchemas.find(schema => schema.url && schema.help)
+  const renderI18nObject = useRenderI18nObject()
+  const { mutateAsync: addPluginCredential } = useAddPluginCredentialHook(pluginPayload)
+  const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
+  const formRef = useRef<FormRefObject>(null)
+  const handleConfirm = useCallback(async () => {
+    if (doingActionRef.current)
+      return
+    const {
+      isCheckValidated,
+      values,
+    } = formRef.current?.getFormValues({
+      needCheckValidatedValues: true,
+      needTransformWhenSecretFieldIsPristine: true,
+    }) || { isCheckValidated: false, values: {} }
+    if (!isCheckValidated)
+      return
+
+    try {
+      const {
+        __name__,
+        __credential_id__,
+        ...restValues
+      } = values
+
+      handleSetDoingAction(true)
+      if (editValues) {
+        await updatePluginCredential({
+          credentials: restValues,
+          credential_id: __credential_id__,
+          name: __name__ || '',
+        })
+      }
+      else {
+        await addPluginCredential({
+          credentials: restValues,
+          type: CredentialTypeEnum.API_KEY,
+          name: __name__ || '',
+        })
+      }
+      notify({
+        type: 'success',
+        message: t('common.api.actionSuccess'),
+      })
+
+      onClose?.()
+      onUpdate?.()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [addPluginCredential, onClose, onUpdate, updatePluginCredential, notify, t, editValues, handleSetDoingAction])
+
+  return (
+    <Modal
+      size='md'
+      title={t('plugin.auth.useApiAuth')}
+      subTitle={t('plugin.auth.useApiAuthDesc')}
+      onClose={onClose}
+      onCancel={onClose}
+      footerSlot={
+        helpField && (
+          <a
+            className='system-xs-regular mr-2 flex items-center py-2 text-text-accent'
+            href={helpField?.url}
+            target='_blank'
+          >
+            <span className='break-all'>
+              {renderI18nObject(helpField?.help as any)}
+            </span>
+            <RiExternalLinkLine className='ml-1 h-3 w-3' />
+          </a>
+        )
+      }
+      bottomSlot={
+        <div className='flex items-center justify-center bg-background-section-burn py-3 text-xs text-text-tertiary'>
+          <Lock01 className='mr-1 h-3 w-3 text-text-tertiary' />
+          {t('common.modelProvider.encrypted.front')}
+          <a
+            className='mx-1 text-text-accent'
+            target='_blank' rel='noopener noreferrer'
+            href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
+          >
+            PKCS1_OAEP
+          </a>
+          {t('common.modelProvider.encrypted.back')}
+        </div>
+      }
+      onConfirm={handleConfirm}
+      showExtraButton={!!editValues}
+      onExtraButtonClick={onRemove}
+      disabled={disabled || isLoading || doingAction}
+    >
+      {
+        isLoading && (
+          <div className='flex h-40 items-center justify-center'>
+            <Loading />
+          </div>
+        )
+      }
+      {
+        !isLoading && !!data.length && (
+          <AuthForm
+            ref={formRef}
+            formSchemas={formSchemas}
+            defaultValues={editValues || defaultValues}
+            disabled={disabled}
+          />
+        )
+      }
+    </Modal>
+  )
+}
+
+export default memo(ApiKeyModal)
--- a/web/app/components/plugins/plugin-auth/authorize/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/index.tsx
@@ -0,0 +1,104 @@
+import {
+  memo,
+  useMemo,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import AddOAuthButton from './add-oauth-button'
+import type { AddOAuthButtonProps } from './add-oauth-button'
+import AddApiKeyButton from './add-api-key-button'
+import type { AddApiKeyButtonProps } from './add-api-key-button'
+import type { PluginPayload } from '../types'
+
+type AuthorizeProps = {
+  pluginPayload: PluginPayload
+  theme?: 'primary' | 'secondary'
+  showDivider?: boolean
+  canOAuth?: boolean
+  canApiKey?: boolean
+  disabled?: boolean
+  onUpdate?: () => void
+}
+const Authorize = ({
+  pluginPayload,
+  theme = 'primary',
+  showDivider = true,
+  canOAuth,
+  canApiKey,
+  disabled,
+  onUpdate,
+}: AuthorizeProps) => {
+  const { t } = useTranslation()
+  const oAuthButtonProps: AddOAuthButtonProps = useMemo(() => {
+    if (theme === 'secondary') {
+      return {
+        buttonText: !canApiKey ? t('plugin.auth.useOAuthAuth') : t('plugin.auth.addOAuth'),
+        buttonVariant: 'secondary',
+        className: 'hover:bg-components-button-secondary-bg',
+        buttonLeftClassName: 'hover:bg-components-button-secondary-bg-hover',
+        buttonRightClassName: 'hover:bg-components-button-secondary-bg-hover',
+        dividerClassName: 'bg-divider-regular opacity-100',
+        pluginPayload,
+      }
+    }
+
+    return {
+      buttonText: !canApiKey ? t('plugin.auth.useOAuthAuth') : t('plugin.auth.addOAuth'),
+      pluginPayload,
+    }
+  }, [canApiKey, theme, pluginPayload, t])
+
+  const apiKeyButtonProps: AddApiKeyButtonProps = useMemo(() => {
+    if (theme === 'secondary') {
+      return {
+        pluginPayload,
+        buttonVariant: 'secondary',
+        buttonText: !canOAuth ? t('plugin.auth.useApiAuth') : t('plugin.auth.addApi'),
+      }
+    }
+    return {
+      pluginPayload,
+      buttonText: !canOAuth ? t('plugin.auth.useApiAuth') : t('plugin.auth.addApi'),
+      buttonVariant: !canOAuth ? 'primary' : 'secondary-accent',
+    }
+  }, [canOAuth, theme, pluginPayload, t])
+
+  return (
+    <>
+      <div className='flex items-center space-x-1.5'>
+        {
+          canOAuth && (
+            <div className='min-w-0 flex-[1]'>
+              <AddOAuthButton
+                {...oAuthButtonProps}
+                disabled={disabled}
+                onUpdate={onUpdate}
+              />
+            </div>
+          )
+        }
+        {
+          showDivider && canOAuth && canApiKey && (
+            <div className='system-2xs-medium-uppercase flex shrink-0 flex-col items-center justify-between text-text-tertiary'>
+              <div className='h-2 w-[1px] bg-divider-subtle'></div>
+              or
+              <div className='h-2 w-[1px] bg-divider-subtle'></div>
+            </div>
+          )
+        }
+        {
+          canApiKey && (
+            <div className='min-w-0 flex-[1]'>
+              <AddApiKeyButton
+                {...apiKeyButtonProps}
+                disabled={disabled}
+                onUpdate={onUpdate}
+              />
+            </div>
+          )
+        }
+      </div>
+    </>
+  )
+}
+
+export default memo(Authorize)
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
@@ -0,0 +1,188 @@
+import {
+  memo,
+  useCallback,
+  useRef,
+  useState,
+} from 'react'
+import { RiExternalLinkLine } from '@remixicon/react'
+import {
+  useForm,
+  useStore,
+} from '@tanstack/react-form'
+import { useTranslation } from 'react-i18next'
+import Modal from '@/app/components/base/modal/modal'
+import {
+  useDeletePluginOAuthCustomClientHook,
+  useInvalidPluginOAuthClientSchemaHook,
+  useSetPluginOAuthCustomClientHook,
+} from '../hooks/use-credential'
+import type { PluginPayload } from '../types'
+import AuthForm from '@/app/components/base/form/form-scenarios/auth'
+import type {
+  FormRefObject,
+  FormSchema,
+} from '@/app/components/base/form/types'
+import { useToastContext } from '@/app/components/base/toast'
+import Button from '@/app/components/base/button'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+
+type OAuthClientSettingsProps = {
+  pluginPayload: PluginPayload
+  onClose?: () => void
+  editValues?: Record<string, any>
+  disabled?: boolean
+  schemas: FormSchema[]
+  onAuth?: () => Promise<void>
+  hasOriginalClientParams?: boolean
+  onUpdate?: () => void
+}
+const OAuthClientSettings = ({
+  pluginPayload,
+  onClose,
+  editValues,
+  disabled,
+  schemas,
+  onAuth,
+  hasOriginalClientParams,
+  onUpdate,
+}: OAuthClientSettingsProps) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const [doingAction, setDoingAction] = useState(false)
+  const doingActionRef = useRef(doingAction)
+  const handleSetDoingAction = useCallback((value: boolean) => {
+    doingActionRef.current = value
+    setDoingAction(value)
+  }, [])
+  const defaultValues = schemas.reduce((acc, schema) => {
+    if (schema.default)
+      acc[schema.name] = schema.default
+    return acc
+  }, {} as Record<string, any>)
+  const { mutateAsync: setPluginOAuthCustomClient } = useSetPluginOAuthCustomClientHook(pluginPayload)
+  const invalidPluginOAuthClientSchema = useInvalidPluginOAuthClientSchemaHook(pluginPayload)
+  const formRef = useRef<FormRefObject>(null)
+  const handleConfirm = useCallback(async () => {
+    if (doingActionRef.current)
+      return
+
+    try {
+      const {
+        isCheckValidated,
+        values,
+      } = formRef.current?.getFormValues({
+        needCheckValidatedValues: true,
+        needTransformWhenSecretFieldIsPristine: true,
+      }) || { isCheckValidated: false, values: {} }
+      if (!isCheckValidated)
+        throw new Error('error')
+      const {
+        __oauth_client__,
+        ...restValues
+      } = values
+
+      handleSetDoingAction(true)
+      await setPluginOAuthCustomClient({
+        client_params: restValues,
+        enable_oauth_custom_client: __oauth_client__ === 'custom',
+      })
+      notify({
+        type: 'success',
+        message: t('common.api.actionSuccess'),
+      })
+
+      onClose?.()
+      onUpdate?.()
+      invalidPluginOAuthClientSchema()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [onClose, onUpdate, invalidPluginOAuthClientSchema, setPluginOAuthCustomClient, notify, t, handleSetDoingAction])
+
+  const handleConfirmAndAuthorize = useCallback(async () => {
+    await handleConfirm()
+    if (onAuth)
+      await onAuth()
+  }, [handleConfirm, onAuth])
+  const { mutateAsync: deletePluginOAuthCustomClient } = useDeletePluginOAuthCustomClientHook(pluginPayload)
+  const handleRemove = useCallback(async () => {
+    if (doingActionRef.current)
+      return
+
+    try {
+      handleSetDoingAction(true)
+      await deletePluginOAuthCustomClient()
+      notify({
+        type: 'success',
+        message: t('common.api.actionSuccess'),
+      })
+      onClose?.()
+      onUpdate?.()
+      invalidPluginOAuthClientSchema()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [onUpdate, invalidPluginOAuthClientSchema, deletePluginOAuthCustomClient, notify, t, handleSetDoingAction, onClose])
+  const form = useForm({
+    defaultValues: editValues || defaultValues,
+  })
+  const __oauth_client__ = useStore(form.store, s => s.values.__oauth_client__)
+  const helpField = schemas.find(schema => schema.url && schema.help)
+  const renderI18nObject = useRenderI18nObject()
+  return (
+    <Modal
+      title={t('plugin.auth.oauthClientSettings')}
+      confirmButtonText={t('plugin.auth.saveAndAuth')}
+      cancelButtonText={t('plugin.auth.saveOnly')}
+      extraButtonText={t('common.operation.cancel')}
+      showExtraButton
+      extraButtonVariant='secondary'
+      onExtraButtonClick={onClose}
+      onClose={onClose}
+      onCancel={handleConfirm}
+      onConfirm={handleConfirmAndAuthorize}
+      disabled={disabled || doingAction}
+      footerSlot={
+        __oauth_client__ === 'custom' && hasOriginalClientParams && (
+          <div className='grow'>
+            <Button
+              variant='secondary'
+              className='text-components-button-destructive-secondary-text'
+              disabled={disabled || doingAction || !editValues}
+              onClick={handleRemove}
+            >
+              {t('common.operation.remove')}
+            </Button>
+          </div>
+        )
+      }
+    >
+      <>
+        <AuthForm
+          formFromProps={form}
+          ref={formRef}
+          formSchemas={schemas}
+          defaultValues={editValues || defaultValues}
+          disabled={disabled}
+        />
+        {
+          helpField && __oauth_client__ === 'custom' && (
+          <a
+            className='system-xs-regular mt-4 flex items-center text-text-accent'
+            href={helpField?.url}
+            target='_blank'
+          >
+            <span className='break-all'>
+              {renderI18nObject(helpField?.help as any)}
+            </span>
+            <RiExternalLinkLine className='ml-1 h-3 w-3' />
+          </a>
+        )}
+      </>
+    </Modal>
+  )
+}
+
+export default memo(OAuthClientSettings)
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@@ -0,0 +1,113 @@
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import Indicator from '@/app/components/header/indicator'
+import cn from '@/utils/classnames'
+import type {
+  Credential,
+  PluginPayload,
+} from './types'
+import {
+  Authorized,
+  usePluginAuth,
+} from '.'
+
+type AuthorizedInNodeProps = {
+  pluginPayload: PluginPayload
+  onAuthorizationItemClick: (id: string) => void
+  credentialId?: string
+}
+const AuthorizedInNode = ({
+  pluginPayload,
+  onAuthorizationItemClick,
+  credentialId,
+}: AuthorizedInNodeProps) => {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+  const {
+    canApiKey,
+    canOAuth,
+    credentials,
+    disabled,
+    invalidPluginCredentialInfo,
+  } = usePluginAuth(pluginPayload, isOpen || !!credentialId)
+  const renderTrigger = useCallback((open?: boolean) => {
+    let label = ''
+    let removed = false
+    if (!credentialId) {
+      label = t('plugin.auth.workspaceDefault')
+    }
+    else {
+      const credential = credentials.find(c => c.id === credentialId)
+      label = credential ? credential.name : t('plugin.auth.authRemoved')
+      removed = !credential
+    }
+    return (
+      <Button
+        size='small'
+        className={cn(
+          open && !removed && 'bg-components-button-ghost-bg-hover',
+          removed && 'bg-transparent text-text-destructive',
+        )}
+      >
+        <Indicator
+          className='mr-1.5'
+          color={removed ? 'red' : 'green'}
+        />
+        {label}
+        <RiArrowDownSLine
+          className={cn(
+            'h-3.5 w-3.5 text-components-button-ghost-text',
+            removed && 'text-text-destructive',
+          )}
+        />
+      </Button>
+    )
+  }, [credentialId, credentials, t])
+  const extraAuthorizationItems: Credential[] = [
+    {
+      id: '__workspace_default__',
+      name: t('plugin.auth.workspaceDefault'),
+      provider: '',
+      is_default: !credentialId,
+      isWorkspaceDefault: true,
+    },
+  ]
+  const handleAuthorizationItemClick = useCallback((id: string) => {
+    onAuthorizationItemClick(id)
+    setIsOpen(false)
+  }, [
+    onAuthorizationItemClick,
+    setIsOpen,
+  ])
+
+  return (
+    <Authorized
+      pluginPayload={pluginPayload}
+      credentials={credentials}
+      canOAuth={canOAuth}
+      canApiKey={canApiKey}
+      renderTrigger={renderTrigger}
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+      offset={4}
+      placement='bottom-end'
+      triggerPopupSameWidth={false}
+      popupClassName='w-[360px]'
+      disabled={disabled}
+      disableSetDefault
+      onItemClick={handleAuthorizationItemClick}
+      extraAuthorizationItems={extraAuthorizationItems}
+      showItemSelectedIcon
+      selectedCredentialId={credentialId || '__workspace_default__'}
+      onUpdate={invalidPluginCredentialInfo}
+    />
+  )
+}
+
+export default memo(AuthorizedInNode)
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -0,0 +1,342 @@
+import {
+  memo,
+  useCallback,
+  useRef,
+  useState,
+} from 'react'
+import {
+  RiArrowDownSLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type {
+  PortalToFollowElemOptions,
+} from '@/app/components/base/portal-to-follow-elem'
+import Button from '@/app/components/base/button'
+import Indicator from '@/app/components/header/indicator'
+import cn from '@/utils/classnames'
+import Confirm from '@/app/components/base/confirm'
+import Authorize from '../authorize'
+import type { Credential } from '../types'
+import { CredentialTypeEnum } from '../types'
+import ApiKeyModal from '../authorize/api-key-modal'
+import Item from './item'
+import { useToastContext } from '@/app/components/base/toast'
+import type { PluginPayload } from '../types'
+import {
+  useDeletePluginCredentialHook,
+  useSetPluginDefaultCredentialHook,
+  useUpdatePluginCredentialHook,
+} from '../hooks/use-credential'
+
+type AuthorizedProps = {
+  pluginPayload: PluginPayload
+  credentials: Credential[]
+  canOAuth?: boolean
+  canApiKey?: boolean
+  disabled?: boolean
+  renderTrigger?: (open?: boolean) => React.ReactNode
+  isOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  offset?: PortalToFollowElemOptions['offset']
+  placement?: PortalToFollowElemOptions['placement']
+  triggerPopupSameWidth?: boolean
+  popupClassName?: string
+  disableSetDefault?: boolean
+  onItemClick?: (id: string) => void
+  extraAuthorizationItems?: Credential[]
+  showItemSelectedIcon?: boolean
+  selectedCredentialId?: string
+  onUpdate?: () => void
+}
+const Authorized = ({
+  pluginPayload,
+  credentials,
+  canOAuth,
+  canApiKey,
+  disabled,
+  renderTrigger,
+  isOpen,
+  onOpenChange,
+  offset = 8,
+  placement = 'bottom-start',
+  triggerPopupSameWidth = true,
+  popupClassName,
+  disableSetDefault,
+  onItemClick,
+  extraAuthorizationItems,
+  showItemSelectedIcon,
+  selectedCredentialId,
+  onUpdate,
+}: AuthorizedProps) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const [isLocalOpen, setIsLocalOpen] = useState(false)
+  const mergedIsOpen = isOpen ?? isLocalOpen
+  const setMergedIsOpen = useCallback((open: boolean) => {
+    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
+
+    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
+    if (!pendingOperationCredentialId.current) {
+      setDeleteCredentialId(null)
+      return
+    }
+    try {
+      handleSetDoingAction(true)
+      await deletePluginCredential({ credential_id: pendingOperationCredentialId.current })
+      notify({
+        type: 'success',
+        message: t('common.api.actionSuccess'),
+      })
+      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('common.api.actionSuccess'),
+      })
+      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('common.api.actionSuccess'),
+      })
+      onUpdate?.()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [updatePluginCredential, notify, t, handleSetDoingAction, onUpdate])
+
+  return (
+    <>
+      <PortalToFollowElem
+        open={mergedIsOpen}
+        onOpenChange={setMergedIsOpen}
+        placement={placement}
+        offset={offset}
+        triggerPopupSameWidth={triggerPopupSameWidth}
+      >
+        <PortalToFollowElemTrigger
+          onClick={() => setMergedIsOpen(!mergedIsOpen)}
+          asChild
+        >
+          {
+            renderTrigger
+              ? renderTrigger(mergedIsOpen)
+              : (
+                <Button
+                  className={cn(
+                    'w-full',
+                    isOpen && 'bg-components-button-secondary-bg-hover',
+                  )}>
+                  <Indicator className='mr-2' />
+                  {credentials.length}&nbsp;
+                  {
+                    credentials.length > 1
+                      ? t('plugin.auth.authorizations')
+                      : t('plugin.auth.authorization')
+                  }
+                  <RiArrowDownSLine className='ml-0.5 h-4 w-4' />
+                </Button>
+              )
+          }
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[100]'>
+          <div className={cn(
+            'max-h-[360px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg',
+            popupClassName,
+          )}>
+            <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>
+                )
+              }
+            </div>
+            <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('datasetDocuments.list.delete.title')}
+            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}
+          />
+        )
+      }
+    </>
+  )
+}
+
+export default memo(Authorized)
--- a/web/app/components/plugins/plugin-auth/authorized/item.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/item.tsx
@@ -0,0 +1,219 @@
+import {
+  memo,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiCheckLine,
+  RiDeleteBinLine,
+  RiEditLine,
+  RiEqualizer2Line,
+} from '@remixicon/react'
+import Indicator from '@/app/components/header/indicator'
+import Badge from '@/app/components/base/badge'
+import ActionButton from '@/app/components/base/action-button'
+import Tooltip from '@/app/components/base/tooltip'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import cn from '@/utils/classnames'
+import type { Credential } from '../types'
+import { CredentialTypeEnum } from '../types'
+
+type ItemProps = {
+  credential: Credential
+  disabled?: boolean
+  onDelete?: (id: string) => void
+  onEdit?: (id: string, values: Record<string, any>) => void
+  onSetDefault?: (id: string) => void
+  onRename?: (payload: {
+    credential_id: string
+    name: string
+  }) => void
+  disableRename?: boolean
+  disableEdit?: boolean
+  disableDelete?: boolean
+  disableSetDefault?: boolean
+  onItemClick?: (id: string) => void
+  showSelectedIcon?: boolean
+  selectedCredentialId?: string
+}
+const Item = ({
+  credential,
+  disabled,
+  onDelete,
+  onEdit,
+  onSetDefault,
+  onRename,
+  disableRename,
+  disableEdit,
+  disableDelete,
+  disableSetDefault,
+  onItemClick,
+  showSelectedIcon,
+  selectedCredentialId,
+}: ItemProps) => {
+  const { t } = useTranslation()
+  const [renaming, setRenaming] = useState(false)
+  const [renameValue, setRenameValue] = useState(credential.name)
+  const isOAuth = credential.credential_type === CredentialTypeEnum.OAUTH2
+  const showAction = useMemo(() => {
+    return !(disableRename && disableEdit && disableDelete && disableSetDefault)
+  }, [disableRename, disableEdit, disableDelete, disableSetDefault])
+
+  return (
+    <div
+      key={credential.id}
+      className={cn(
+        'group flex h-8 items-center rounded-lg p-1 hover:bg-state-base-hover',
+        renaming && 'bg-state-base-hover',
+      )}
+      onClick={() => onItemClick?.(credential.id === '__workspace_default__' ? '' : credential.id)}
+    >
+      {
+        renaming && (
+          <div className='flex w-full items-center space-x-1'>
+            <Input
+              wrapperClassName='grow rounded-[6px]'
+              className='h-6'
+              value={renameValue}
+              onChange={e => setRenameValue(e.target.value)}
+              placeholder={t('common.placeholder.input')}
+              onClick={e => e.stopPropagation()}
+            />
+            <Button
+              size='small'
+              variant='primary'
+              onClick={(e) => {
+                e.stopPropagation()
+                onRename?.({
+                  credential_id: credential.id,
+                  name: renameValue,
+                })
+                setRenaming(false)
+              }}
+            >
+              {t('common.operation.save')}
+            </Button>
+            <Button
+              size='small'
+              onClick={(e) => {
+                e.stopPropagation()
+                setRenaming(false)
+              }}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+          </div>
+        )
+      }
+      {
+        !renaming && (
+          <div className='flex w-0 grow items-center space-x-1.5'>
+            {
+              showSelectedIcon && (
+                <div className='h-4 w-4'>
+                  {
+                    selectedCredentialId === credential.id && (
+                      <RiCheckLine className='h-4 w-4 text-text-accent' />
+                    )
+                  }
+                </div>
+              )
+            }
+            <Indicator className='ml-2 mr-1.5 shrink-0' />
+            <div
+              className='system-md-regular truncate text-text-secondary'
+              title={credential.name}
+            >
+              {credential.name}
+            </div>
+            {
+              credential.is_default && (
+                <Badge className='shrink-0'>
+                  {t('plugin.auth.default')}
+                </Badge>
+              )
+            }
+          </div>
+        )
+      }
+      {
+        showAction && !renaming && (
+          <div className='ml-2 hidden shrink-0 items-center group-hover:flex'>
+            {
+              !credential.is_default && !disableSetDefault && (
+                <Button
+                  size='small'
+                  disabled={disabled}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onSetDefault?.(credential.id)
+                  }}
+                >
+                  {t('plugin.auth.setDefault')}
+                </Button>
+              )
+            }
+            {
+              !disableRename && (
+                <Tooltip popupContent={t('common.operation.rename')}>
+                  <ActionButton
+                    disabled={disabled}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      setRenaming(true)
+                      setRenameValue(credential.name)
+                    }}
+                  >
+                    <RiEditLine className='h-4 w-4 text-text-tertiary' />
+                  </ActionButton>
+                </Tooltip>
+              )
+            }
+            {
+              !isOAuth && !disableEdit && (
+                <Tooltip popupContent={t('common.operation.edit')}>
+                  <ActionButton
+                    disabled={disabled}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onEdit?.(
+                        credential.id,
+                        {
+                          ...credential.credentials,
+                          __name__: credential.name,
+                          __credential_id__: credential.id,
+                        },
+                      )
+                    }}
+                  >
+                    <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
+                  </ActionButton>
+                </Tooltip>
+              )
+            }
+            {
+              !disableDelete && (
+                <Tooltip popupContent={t('common.operation.delete')}>
+                  <ActionButton
+                    className='hover:bg-transparent'
+                    disabled={disabled}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onDelete?.(credential.id)
+                    }}
+                  >
+                    <RiDeleteBinLine className='h-4 w-4 text-text-tertiary hover:text-text-destructive' />
+                  </ActionButton>
+                </Tooltip>
+              )
+            }
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default memo(Item)
--- a/web/app/components/plugins/plugin-auth/hooks/use-credential.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/use-credential.ts
@@ -0,0 +1,88 @@
+import {
+  useAddPluginCredential,
+  useDeletePluginCredential,
+  useDeletePluginOAuthCustomClient,
+  useGetPluginCredentialInfo,
+  useGetPluginCredentialSchema,
+  useGetPluginOAuthClientSchema,
+  useGetPluginOAuthUrl,
+  useInvalidPluginCredentialInfo,
+  useInvalidPluginOAuthClientSchema,
+  useSetPluginDefaultCredential,
+  useSetPluginOAuthCustomClient,
+  useUpdatePluginCredential,
+} from '@/service/use-plugins-auth'
+import { useGetApi } from './use-get-api'
+import type { PluginPayload } from '../types'
+import type { CredentialTypeEnum } from '../types'
+
+export const useGetPluginCredentialInfoHook = (pluginPayload: PluginPayload, enable?: boolean) => {
+  const apiMap = useGetApi(pluginPayload)
+  return useGetPluginCredentialInfo(enable ? apiMap.getCredentialInfo : '')
+}
+
+export const useDeletePluginCredentialHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useDeletePluginCredential(apiMap.deleteCredential)
+}
+
+export const useInvalidPluginCredentialInfoHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useInvalidPluginCredentialInfo(apiMap.getCredentialInfo)
+}
+
+export const useSetPluginDefaultCredentialHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useSetPluginDefaultCredential(apiMap.setDefaultCredential)
+}
+
+export const useGetPluginCredentialSchemaHook = (pluginPayload: PluginPayload, credentialType: CredentialTypeEnum) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useGetPluginCredentialSchema(apiMap.getCredentialSchema(credentialType))
+}
+
+export const useAddPluginCredentialHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useAddPluginCredential(apiMap.addCredential)
+}
+
+export const useUpdatePluginCredentialHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useUpdatePluginCredential(apiMap.updateCredential)
+}
+
+export const useGetPluginOAuthUrlHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useGetPluginOAuthUrl(apiMap.getOauthUrl)
+}
+
+export const useGetPluginOAuthClientSchemaHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useGetPluginOAuthClientSchema(apiMap.getOauthClientSchema)
+}
+
+export const useInvalidPluginOAuthClientSchemaHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useInvalidPluginOAuthClientSchema(apiMap.getOauthClientSchema)
+}
+
+export const useSetPluginOAuthCustomClientHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useSetPluginOAuthCustomClient(apiMap.setCustomOauthClient)
+}
+
+export const useDeletePluginOAuthCustomClientHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useDeletePluginOAuthCustomClient(apiMap.deleteCustomOAuthClient)
+}
--- a/web/app/components/plugins/plugin-auth/hooks/use-get-api.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/use-get-api.ts
@@ -0,0 +1,41 @@
+import {
+  AuthCategory,
+} from '../types'
+import type {
+  CredentialTypeEnum,
+  PluginPayload,
+} from '../types'
+
+export const useGetApi = ({ category = AuthCategory.tool, provider }: PluginPayload) => {
+  if (category === AuthCategory.tool) {
+    return {
+      getCredentialInfo: `/workspaces/current/tool-provider/builtin/${provider}/credential/info`,
+      setDefaultCredential: `/workspaces/current/tool-provider/builtin/${provider}/default-credential`,
+      getCredentials: `/workspaces/current/tool-provider/builtin/${provider}/credentials`,
+      addCredential: `/workspaces/current/tool-provider/builtin/${provider}/add`,
+      updateCredential: `/workspaces/current/tool-provider/builtin/${provider}/update`,
+      deleteCredential: `/workspaces/current/tool-provider/builtin/${provider}/delete`,
+      getCredentialSchema: (credential_type: CredentialTypeEnum) => `/workspaces/current/tool-provider/builtin/${provider}/credential/schema/${credential_type}`,
+      getOauthUrl: `/oauth/plugin/${provider}/tool/authorization-url`,
+      getOauthClientSchema: `/workspaces/current/tool-provider/builtin/${provider}/oauth/client-schema`,
+      setCustomOauthClient: `/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`,
+      getCustomOAuthClientValues: `/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`,
+      deleteCustomOAuthClient: `/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`,
+    }
+  }
+
+  return {
+    getCredentialInfo: '',
+    setDefaultCredential: '',
+    getCredentials: '',
+    addCredential: '',
+    updateCredential: '',
+    deleteCredential: '',
+    getCredentialSchema: () => '',
+    getOauthUrl: '',
+    getOauthClientSchema: '',
+    setCustomOauthClient: '',
+    getCustomOAuthClientValues: '',
+    deleteCustomOAuthClient: '',
+  }
+}
--- a/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth.ts
@@ -0,0 +1,25 @@
+import { useAppContext } from '@/context/app-context'
+import {
+  useGetPluginCredentialInfoHook,
+  useInvalidPluginCredentialInfoHook,
+} from './use-credential'
+import { CredentialTypeEnum } from '../types'
+import type { PluginPayload } from '../types'
+
+export const usePluginAuth = (pluginPayload: PluginPayload, enable?: boolean) => {
+  const { data } = useGetPluginCredentialInfoHook(pluginPayload, enable)
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const isAuthorized = !!data?.credentials.length
+  const canOAuth = data?.supported_credential_types.includes(CredentialTypeEnum.OAUTH2)
+  const canApiKey = data?.supported_credential_types.includes(CredentialTypeEnum.API_KEY)
+  const invalidPluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
+
+  return {
+    isAuthorized,
+    canOAuth,
+    canApiKey,
+    credentials: data?.credentials || [],
+    disabled: !isCurrentWorkspaceManager,
+    invalidPluginCredentialInfo,
+  }
+}
--- a/web/app/components/plugins/plugin-auth/index.tsx
+++ b/web/app/components/plugins/plugin-auth/index.tsx
@@ -0,0 +1,6 @@
+export { default as PluginAuth } from './plugin-auth'
+export { default as Authorized } from './authorized'
+export { default as AuthorizedInNode } from './authorized-in-node'
+export { default as PluginAuthInAgent } from './plugin-auth-in-agent'
+export { usePluginAuth } from './hooks/use-plugin-auth'
+export * from './types'
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
@@ -0,0 +1,123 @@
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Authorize from './authorize'
+import Authorized from './authorized'
+import type {
+  Credential,
+  PluginPayload,
+} from './types'
+import { usePluginAuth } from './hooks/use-plugin-auth'
+import Button from '@/app/components/base/button'
+import Indicator from '@/app/components/header/indicator'
+import cn from '@/utils/classnames'
+
+type PluginAuthInAgentProps = {
+  pluginPayload: PluginPayload
+  credentialId?: string
+  onAuthorizationItemClick?: (id: string) => void
+}
+const PluginAuthInAgent = ({
+  pluginPayload,
+  credentialId,
+  onAuthorizationItemClick,
+}: PluginAuthInAgentProps) => {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+  const {
+    isAuthorized,
+    canOAuth,
+    canApiKey,
+    credentials,
+    disabled,
+    invalidPluginCredentialInfo,
+  } = usePluginAuth(pluginPayload, true)
+
+  const extraAuthorizationItems: Credential[] = [
+    {
+      id: '__workspace_default__',
+      name: t('plugin.auth.workspaceDefault'),
+      provider: '',
+      is_default: !credentialId,
+      isWorkspaceDefault: true,
+    },
+  ]
+
+  const handleAuthorizationItemClick = useCallback((id: string) => {
+    onAuthorizationItemClick?.(id)
+    setIsOpen(false)
+  }, [
+    onAuthorizationItemClick,
+    setIsOpen,
+  ])
+
+  const renderTrigger = useCallback((isOpen?: boolean) => {
+    let label = ''
+    let removed = false
+    if (!credentialId) {
+      label = t('plugin.auth.workspaceDefault')
+    }
+    else {
+      const credential = credentials.find(c => c.id === credentialId)
+      label = credential ? credential.name : t('plugin.auth.authRemoved')
+      removed = !credential
+    }
+    return (
+      <Button
+        className={cn(
+          'w-full',
+          isOpen && 'bg-components-button-secondary-bg-hover',
+          removed && 'text-text-destructive',
+        )}>
+        <Indicator
+          className='mr-2'
+          color={removed ? 'red' : 'green'}
+        />
+        {label}
+        <RiArrowDownSLine className='ml-0.5 h-4 w-4' />
+      </Button>
+    )
+  }, [credentialId, credentials, t])
+
+  return (
+    <>
+      {
+        !isAuthorized && (
+          <Authorize
+            pluginPayload={pluginPayload}
+            canOAuth={canOAuth}
+            canApiKey={canApiKey}
+            disabled={disabled}
+            onUpdate={invalidPluginCredentialInfo}
+          />
+        )
+      }
+      {
+        isAuthorized && (
+          <Authorized
+            pluginPayload={pluginPayload}
+            credentials={credentials}
+            canOAuth={canOAuth}
+            canApiKey={canApiKey}
+            disabled={disabled}
+            disableSetDefault
+            onItemClick={handleAuthorizationItemClick}
+            extraAuthorizationItems={extraAuthorizationItems}
+            showItemSelectedIcon
+            renderTrigger={renderTrigger}
+            isOpen={isOpen}
+            onOpenChange={setIsOpen}
+            selectedCredentialId={credentialId || '__workspace_default__'}
+            onUpdate={invalidPluginCredentialInfo}
+          />
+        )
+      }
+    </>
+  )
+}
+
+export default memo(PluginAuthInAgent)
--- a/web/app/components/plugins/plugin-auth/plugin-auth.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth.tsx
@@ -0,0 +1,59 @@
+import { memo } from 'react'
+import Authorize from './authorize'
+import Authorized from './authorized'
+import type { PluginPayload } from './types'
+import { usePluginAuth } from './hooks/use-plugin-auth'
+import cn from '@/utils/classnames'
+
+type PluginAuthProps = {
+  pluginPayload: PluginPayload
+  children?: React.ReactNode
+  className?: string
+}
+const PluginAuth = ({
+  pluginPayload,
+  children,
+  className,
+}: PluginAuthProps) => {
+  const {
+    isAuthorized,
+    canOAuth,
+    canApiKey,
+    credentials,
+    disabled,
+    invalidPluginCredentialInfo,
+  } = usePluginAuth(pluginPayload, !!pluginPayload.provider)
+
+  return (
+    <div className={cn(!isAuthorized && className)}>
+      {
+        !isAuthorized && (
+          <Authorize
+            pluginPayload={pluginPayload}
+            canOAuth={canOAuth}
+            canApiKey={canApiKey}
+            disabled={disabled}
+            onUpdate={invalidPluginCredentialInfo}
+          />
+        )
+      }
+      {
+        isAuthorized && !children && (
+          <Authorized
+            pluginPayload={pluginPayload}
+            credentials={credentials}
+            canOAuth={canOAuth}
+            canApiKey={canApiKey}
+            disabled={disabled}
+            onUpdate={invalidPluginCredentialInfo}
+          />
+        )
+      }
+      {
+        isAuthorized && children
+      }
+    </div>
+  )
+}
+
+export default memo(PluginAuth)
--- a/web/app/components/plugins/plugin-auth/types.ts
+++ b/web/app/components/plugins/plugin-auth/types.ts
@@ -0,0 +1,25 @@
+export enum AuthCategory {
+  tool = 'tool',
+  datasource = 'datasource',
+  model = 'model',
+}
+
+export type PluginPayload = {
+  category: AuthCategory
+  provider: string
+}
+
+export enum CredentialTypeEnum {
+  OAUTH2 = 'oauth2',
+  API_KEY = 'api-key',
+}
+
+export type Credential = {
+  id: string
+  name: string
+  provider: string
+  credential_type?: CredentialTypeEnum
+  is_default: boolean
+  credentials?: Record<string, any>
+  isWorkspaceDefault?: boolean
+}
--- a/web/app/components/plugins/plugin-auth/utils.ts
+++ b/web/app/components/plugins/plugin-auth/utils.ts
@@ -0,0 +1,10 @@
+export const transformFormSchemasSecretInput = (isPristineSecretInputNames: string[], values: Record<string, any>) => {
+  const transformedValues: Record<string, any> = { ...values }
+
+  isPristineSecretInputNames.forEach((name) => {
+    if (transformedValues[name])
+      transformedValues[name] = '[__HIDDEN__]'
+  })
+
+  return transformedValues
+}
--- a/web/app/components/plugins/plugin-detail-panel/action-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/action-list.tsx
@@ -1,17 +1,9 @@
-import React, { useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useAppContext } from '@/context/app-context'
-import Button from '@/app/components/base/button'
-import Toast from '@/app/components/base/toast'
-import Indicator from '@/app/components/header/indicator'
 import ToolItem from '@/app/components/tools/provider/tool-item'
-import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
 import {
  useAllToolProviders,
  useBuiltinTools,
-  useInvalidateAllToolProviders,
-  useRemoveProviderCredentials,
-  useUpdateProviderCredentials,
 } from '@/service/use-tools'
 import type { PluginDetail } from '@/app/components/plugins/types'

@@ -23,35 +15,14 @@ const ActionList = ({
  detail,
 }: Props) => {
  const { t } = useTranslation()
-  const { isCurrentWorkspaceManager } = useAppContext()
  const providerBriefInfo = detail.declaration.tool.identity
  const providerKey = `${detail.plugin_id}/${providerBriefInfo.name}`
  const { data: collectionList = [] } = useAllToolProviders()
-  const invalidateAllToolProviders = useInvalidateAllToolProviders()
  const provider = useMemo(() => {
    return collectionList.find(collection => collection.name === providerKey)
  }, [collectionList, providerKey])
  const { data } = useBuiltinTools(providerKey)

-  const [showSettingAuth, setShowSettingAuth] = useState(false)
-
-  const handleCredentialSettingUpdate = () => {
-    invalidateAllToolProviders()
-    Toast.notify({
-      type: 'success',
-      message: t('common.api.actionSuccess'),
-    })
-    setShowSettingAuth(false)
-  }
-
-  const { mutate: updatePermission, isPending } = useUpdateProviderCredentials({
-    onSuccess: handleCredentialSettingUpdate,
-  })
-
-  const { mutate: removePermission } = useRemoveProviderCredentials({
-    onSuccess: handleCredentialSettingUpdate,
-  })
-
  if (!data || !provider)
    return null

@@ -60,26 +31,7 @@ const ActionList = ({
      <div className='mb-1 py-1'>
        <div className='system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary'>
          {t('plugin.detailPanel.actionNum', { num: data.length, action: data.length > 1 ? 'actions' : 'action' })}
-          {provider.is_team_authorization && provider.allow_delete && (
-            <Button
-              variant='secondary'
-              size='small'
-              onClick={() => setShowSettingAuth(true)}
-              disabled={!isCurrentWorkspaceManager}
-            >
-              <Indicator className='mr-2' color={'green'} />
-              {t('tools.auth.authorized')}
-            </Button>
-          )}
        </div>
-        {!provider.is_team_authorization && provider.allow_delete && (
-          <Button
-            variant='primary'
-            className='w-full'
-            onClick={() => setShowSettingAuth(true)}
-            disabled={!isCurrentWorkspaceManager}
-          >{t('workflow.nodes.tool.authorize')}</Button>
-        )}
      </div>
      <div className='flex flex-col gap-2'>
        {data.map(tool => (
@@ -93,18 +45,6 @@ const ActionList = ({
          />
        ))}
      </div>
-      {showSettingAuth && (
-        <ConfigCredential
-          collection={provider}
-          onCancel={() => setShowSettingAuth(false)}
-          onSaved={async value => updatePermission({
-            providerName: provider.name,
-            credentials: value,
-          })}
-          onRemove={async () => removePermission(provider.name)}
-          isSaving={isPending}
-        />
-      )}
    </div>
  )
 }
--- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
@@ -36,6 +36,9 @@ import { useInvalidateAllToolProviders } from '@/service/use-tools'
 import { API_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
+import { PluginAuth } from '@/app/components/plugins/plugin-auth'
+import { AuthCategory } from '@/app/components/plugins/plugin-auth'
+import { useAllToolProviders } from '@/service/use-tools'

 const i18nPrefix = 'plugin.action'

@@ -68,7 +71,14 @@ const DetailHeader = ({
    meta,
    plugin_id,
  } = detail
-  const { author, category, name, label, description, icon, verified } = detail.declaration
+  const { author, category, name, label, description, icon, verified, tool } = detail.declaration
+  const isTool = category === PluginType.tool
+  const providerBriefInfo = tool?.identity
+  const providerKey = `${plugin_id}/${providerBriefInfo?.name}`
+  const { data: collectionList = [] } = useAllToolProviders(isTool)
+  const provider = useMemo(() => {
+    return collectionList.find(collection => collection.name === providerKey)
+  }, [collectionList, providerKey])
  const isFromGitHub = source === PluginSource.github
  const isFromMarketplace = source === PluginSource.marketplace

@@ -262,7 +272,17 @@ const DetailHeader = ({
          </ActionButton>
        </div>
      </div>
-      <Description className='mt-3' text={description[locale]} descriptionLineRows={2}></Description>
+      <Description className='mb-2 mt-3 h-auto' text={description[locale]} descriptionLineRows={2}></Description>
+      {
+        category === PluginType.tool && (
+          <PluginAuth
+            pluginPayload={{
+              provider: provider?.name || '',
+              category: AuthCategory.tool,
+            }}
+          />
+        )
+      }
      {isShowPluginInfo && (
        <PluginInfo
          repository={isFromGitHub ? meta?.repo : ''}
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -3,9 +3,6 @@ import type { FC } from 'react'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
-import {
-  RiArrowLeftLine,
-} from '@remixicon/react'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
@@ -15,24 +12,17 @@ import ToolTrigger from '@/app/components/plugins/plugin-detail-panel/tool-selec
 import ToolItem from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-item'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 import ToolForm from '@/app/components/workflow/nodes/tool/components/tool-form'
-import Button from '@/app/components/base/button'
-import Indicator from '@/app/components/header/indicator'
-import ToolCredentialForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form'
-import Toast from '@/app/components/base/toast'
 import Textarea from '@/app/components/base/textarea'
 import Divider from '@/app/components/base/divider'
 import TabSlider from '@/app/components/base/tab-slider-plain'
 import ReasoningConfigForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form'
 import { generateFormValue, getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
-
-import { useAppContext } from '@/context/app-context'
 import {
  useAllBuiltInTools,
  useAllCustomTools,
  useAllMCPTools,
  useAllWorkflowTools,
  useInvalidateAllBuiltInTools,
-  useUpdateProviderCredentials,
 } from '@/service/use-tools'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
@@ -46,6 +36,10 @@ import { MARKETPLACE_API_PREFIX } from '@/config'
 import type { Node } from 'reactflow'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
+import {
+  AuthCategory,
+  PluginAuthInAgent,
+} from '@/app/components/plugins/plugin-auth'

 type Props = {
  disabled?: boolean
@@ -196,23 +190,6 @@ const ToolSelector: FC<Props> = ({
    } as any)
  }

-  // authorization
-  const { isCurrentWorkspaceManager } = useAppContext()
-  const [isShowSettingAuth, setShowSettingAuth] = useState(false)
-  const handleCredentialSettingUpdate = () => {
-    invalidateAllBuiltinTools()
-    Toast.notify({
-      type: 'success',
-      message: t('common.api.actionSuccess'),
-    })
-    setShowSettingAuth(false)
-    onShowChange(false)
-  }
-
-  const { mutate: updatePermission } = useUpdateProviderCredentials({
-    onSuccess: handleCredentialSettingUpdate,
-  })
-
  // install from marketplace
  const currentTool = useMemo(() => {
    return currentProvider?.tools.find(tool => tool.name === value?.tool_name)
@@ -226,6 +203,12 @@ const ToolSelector: FC<Props> = ({
    invalidateAllBuiltinTools()
    invalidateInstalledPluginList()
  }
+  const handleAuthorizationItemClick = (id: string) => {
+    onSelect({
+      ...value,
+      credential_id: id,
+    } as any)
+  }

  return (
    <>
@@ -264,7 +247,6 @@ const ToolSelector: FC<Props> = ({
              onSwitchChange={handleEnabledChange}
              onDelete={onDelete}
              noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
-              onAuth={() => setShowSettingAuth(true)}
              uninstalled={!currentProvider && inMarketPlace}
              versionMismatch={currentProvider && inMarketPlace && !currentTool}
              installInfo={manifest?.latest_package_identifier}
@@ -284,171 +266,131 @@ const ToolSelector: FC<Props> = ({
          )}
        </PortalToFollowElemTrigger>
        <PortalToFollowElemContent>
-          <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', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
-            {!isShowSettingAuth && (
-              <>
-                <div className='system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary'>{t(`plugin.detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`)}</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 text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</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}
-                      canChooseMCPTool={canChooseMCPTool}
-                    />
-                  </div>
-                  <div className='flex flex-col gap-1'>
-                    <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
-                    <Textarea
-                      className='resize-none'
-                      placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
-                      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'>
-                      {!currentProvider.is_team_authorization && (
-                        <Button
-                          variant='primary'
-                          className={cn('w-full shrink-0')}
-                          onClick={() => setShowSettingAuth(true)}
-                          disabled={!isCurrentWorkspaceManager}
-                        >
-                          {t('tools.auth.unauthorized')}
-                        </Button>
-                      )}
-                      {currentProvider.is_team_authorization && (
-                        <Button
-                          variant='secondary'
-                          className={cn('w-full shrink-0')}
-                          onClick={() => setShowSettingAuth(true)}
-                          disabled={!isCurrentWorkspaceManager}
-                        >
-                          <Indicator className='mr-2' color={'green'} />
-                          {t('tools.auth.authorized')}
-                        </Button>
-                      )}
-                    </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('plugin.detailPanel.toolSelector.settings')! },
-                          { value: 'params', text: t('plugin.detailPanel.toolSelector.params')! },
-                        ]}
+          <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(`plugin.detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`)}</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 text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
+                  <ToolPicker
+                    placement='bottom'
+                    offset={offset}
+                    trigger={
+                      <ToolTrigger
+                        open={panelShowState || isShowChooseTool}
+                        value={value}
+                        provider={currentProvider}
                      />
-                    )}
-                    {nodeId && showTabSlider && currType === 'params' && (
-                      <div className='px-4 py-2'>
+                    }
+                    isShow={panelShowState || isShowChooseTool}
+                    onShowChange={trigger ? onPanelShowStateChange as any : setIsShowChooseTool}
+                    disabled={false}
+                    supportAddCustomTool
+                    onSelect={handleSelectTool}
+                    onSelectMultiple={handleSelectMultipleTool}
+                    scope={scope}
+                    selectedTools={selectedTools}
+                    canChooseMCPTool={canChooseMCPTool}
+                  />
+                </div>
+                <div className='flex flex-col gap-1'>
+                  <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
+                  <Textarea
+                    className='resize-none'
+                    placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
+                    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,
+                        }}
+                        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('plugin.detailPanel.toolSelector.settings')! },
+                        { value: 'params', text: t('plugin.detailPanel.toolSelector.params')! },
+                      ]}
+                    />
+                  )}
+                  {nodeId && showTabSlider && currType === 'params' && (
+                    <div className='px-4 py-2'>
+                      <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
+                      <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
+                    </div>
+                  )}
+                  {/* user settings only */}
+                  {userSettingsOnly && (
+                    <div className='p-4 pb-1'>
+                      <div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.settings')}</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('plugin.detailPanel.toolSelector.params')}</div>
+                      <div className='pb-1'>
                        <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
                        <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
                      </div>
-                    )}
-                    {/* user settings only */}
-                    {userSettingsOnly && (
-                      <div className='p-4 pb-1'>
-                        <div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.settings')}</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('plugin.detailPanel.toolSelector.params')}</div>
-                        <div className='pb-1'>
-                          <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
-                          <div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</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}
+                    </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}
                      />
-                    )}
-                  </>
-                )}
-              </>
-            )}
-            {/* authorization panel */}
-            {isShowSettingAuth && currentProvider && (
-              <>
-                <div className='relative flex flex-col gap-1 pt-3.5'>
-                  <div className='absolute -top-2 left-2 w-[345px] rounded-t-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-2 backdrop-blur-sm'></div>
-                  <div
-                    className='system-xs-semibold-uppercase flex h-6 cursor-pointer items-center gap-1 px-3 text-text-accent-secondary'
-                    onClick={() => setShowSettingAuth(false)}
-                  >
-                    <RiArrowLeftLine className='h-4 w-4' />
-                    BACK
-                  </div>
-                  <div className='system-xl-semibold px-4 text-text-primary'>{t('tools.auth.setupModalTitle')}</div>
-                  <div className='system-xs-regular px-4 text-text-tertiary'>{t('tools.auth.setupModalTitleDescription')}</div>
-                </div>
-                <ToolCredentialForm
-                  collection={currentProvider}
-                  onCancel={() => setShowSettingAuth(false)}
-                  onSaved={async value => updatePermission({
-                    providerName: currentProvider.name,
-                    credentials: value,
-                  })}
-                />
-              </>
-            )}
+                    </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>
        </PortalToFollowElemContent>
      </PortalToFollowElem>
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
@@ -30,7 +30,6 @@ type Props = {
  onSwitchChange?: (value: boolean) => void
  onDelete?: () => void
  noAuth?: boolean
-  onAuth?: () => void
  isError?: boolean
  errorTip?: any
  uninstalled?: boolean
@@ -38,6 +37,7 @@ type Props = {
  onInstall?: () => void
  versionMismatch?: boolean
  open: boolean
+  authRemoved?: boolean
  canChooseMCPTool?: boolean,
 }

@@ -53,13 +53,13 @@ const ToolItem = ({
  onSwitchChange,
  onDelete,
  noAuth,
-  onAuth,
  uninstalled,
  installInfo,
  onInstall,
  isError,
  errorTip,
  versionMismatch,
+  authRemoved,
  canChooseMCPTool,
 }: Props) => {
  const { t } = useTranslation()
@@ -125,11 +125,17 @@ const ToolItem = ({
        <McpToolNotSupportTooltip />
      )}
      {!isError && !uninstalled && !versionMismatch && noAuth && (
-        <Button variant='secondary' size='small' onClick={onAuth}>
+        <Button variant='secondary' size='small'>
          {t('tools.notAuthorized')}
          <Indicator className='ml-2' color='orange' />
        </Button>
      )}
+      {!isError && !uninstalled && !versionMismatch && authRemoved && (
+        <Button variant='secondary' size='small'>
+          {t('plugin.auth.authRemoved')}
+          <Indicator className='ml-2' color='red' />
+        </Button>
+      )}
      {!isError && !uninstalled && versionMismatch && installInfo && (
        <div onClick={e => e.stopPropagation()}>
          <SwitchPluginVersion