feat: introduce trigger functionality (#27644)

Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com> Co-authored-by: Stream <Stream_2@qq.com> Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com> Co-authored-by: zhsama <torvalds@linux.do> Co-authored-by: Harry <xh001x@hotmail.com> Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com> Co-authored-by: yessenia <yessenia.contact@gmail.com> Co-authored-by: hjlarry <hjlarry@163.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: WTW0313 <twwu@dify.ai> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-11-12 17:59:37 +08:00
parent ca7794305b
commit b76e17b25d
785 changed files with 41186 additions and 3725 deletions
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@@ -6,7 +6,7 @@ import AppInputsForm from '@/app/components/plugins/plugin-detail-panel/app-sele
 import { useAppDetail } from '@/service/use-apps'
 import { useAppWorkflow } from '@/service/use-workflow'
 import { useFileUploadConfig } from '@/service/use-common'
-import { Resolution } from '@/types/app'
+import { AppModeEnum, Resolution } from '@/types/app'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import type { App } from '@/types/app'
 import type { FileUpload } from '@/app/components/base/features/types'
@@ -30,7 +30,7 @@ const AppInputsPanel = ({
 }: Props) => {
  const { t } = useTranslation()
  const inputsRef = useRef<any>(value?.inputs || {})
-  const isBasicApp = appDetail.mode !== 'advanced-chat' && appDetail.mode !== 'workflow'
+  const isBasicApp = appDetail.mode !== AppModeEnum.ADVANCED_CHAT && appDetail.mode !== AppModeEnum.WORKFLOW
  const { data: fileUploadConfig } = useFileUploadConfig()
  const { data: currentApp, isFetching: isAppLoading } = useAppDetail(appDetail.id)
  const { data: currentWorkflow, isFetching: isWorkflowLoading } = useAppWorkflow(isBasicApp ? '' : appDetail.id)
@@ -77,7 +77,7 @@ const AppInputsPanel = ({
            required: false,
          }
        }
-        if(item.checkbox) {
+        if (item.checkbox) {
          return {
            ...item.checkbox,
            type: 'checkbox',
@@ -148,7 +148,7 @@ const AppInputsPanel = ({
        }
      }) || []
    }
-    if ((currentApp.mode === 'completion' || currentApp.mode === 'workflow') && basicAppFileConfig.enabled) {
+    if ((currentApp.mode === AppModeEnum.COMPLETION || currentApp.mode === AppModeEnum.WORKFLOW) && basicAppFileConfig.enabled) {
      inputFormSchema.push({
        label: 'Image Upload',
        variable: '#image#',
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
@@ -12,7 +12,7 @@ import type {
 } from '@floating-ui/react'
 import Input from '@/app/components/base/input'
 import AppIcon from '@/app/components/base/app-icon'
-import type { App } from '@/types/app'
+import { type App, AppModeEnum } from '@/types/app'
 import { useTranslation } from 'react-i18next'

 type Props = {
@@ -118,15 +118,15 @@ const AppPicker: FC<Props> = ({

  const getAppType = (app: App) => {
    switch (app.mode) {
-      case 'advanced-chat':
+      case AppModeEnum.ADVANCED_CHAT:
        return 'chatflow'
-      case 'agent-chat':
+      case AppModeEnum.AGENT_CHAT:
        return 'agent'
-      case 'chat':
+      case AppModeEnum.CHAT:
        return 'chat'
-      case 'completion':
+      case AppModeEnum.COMPLETION:
        return 'completion'
-      case 'workflow':
+      case AppModeEnum.WORKFLOW:
        return 'workflow'
    }
  }
--- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
@@ -1,7 +1,26 @@
-import React, { useCallback, useMemo, useState } from 'react'
-import { useTheme } from 'next-themes'
-import { useTranslation } from 'react-i18next'
-import { useBoolean } from 'ahooks'
+import ActionButton from '@/app/components/base/action-button'
+import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import Confirm from '@/app/components/base/confirm'
+import { Github } from '@/app/components/base/icons/src/public/common'
+import { BoxSparkleFill } from '@/app/components/base/icons/src/vender/plugin'
+import Toast from '@/app/components/base/toast'
+import Tooltip from '@/app/components/base/tooltip'
+import { AuthCategory, PluginAuth } from '@/app/components/plugins/plugin-auth'
+import OperationDropdown from '@/app/components/plugins/plugin-detail-panel/operation-dropdown'
+import PluginInfo from '@/app/components/plugins/plugin-page/plugin-info'
+import UpdateFromMarketplace from '@/app/components/plugins/update-plugin/from-market-place'
+import PluginVersionPicker from '@/app/components/plugins/update-plugin/plugin-version-picker'
+import { API_PREFIX } from '@/config'
+import { useAppContext } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useGetLanguage, useI18N } from '@/context/i18n'
+import { useModalContext } from '@/context/modal-context'
+import { useProviderContext } from '@/context/provider-context'
+import { uninstallPlugin } from '@/service/plugins'
+import { useAllToolProviders, useInvalidateAllToolProviders } from '@/service/use-tools'
+import cn from '@/utils/classnames'
+import { getMarketplaceUrl } from '@/utils/var'
 import {
  RiArrowLeftRightLine,
  RiBugLine,
@@ -9,54 +28,35 @@ import {
  RiHardDrive3Line,
  RiVerifiedBadgeLine,
 } from '@remixicon/react'
-import type { PluginDetail } from '../types'
-import { PluginSource, PluginType } from '../types'
-import Description from '../card/base/description'
-import Icon from '../card/base/card-icon'
-import Title from '../card/base/title'
-import OrgInfo from '../card/base/org-info'
-import { useGitHubReleases } from '../install-plugin/hooks'
-import PluginVersionPicker from '@/app/components/plugins/update-plugin/plugin-version-picker'
-import UpdateFromMarketplace from '@/app/components/plugins/update-plugin/from-market-place'
-import OperationDropdown from '@/app/components/plugins/plugin-detail-panel/operation-dropdown'
-import PluginInfo from '@/app/components/plugins/plugin-page/plugin-info'
-import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
-import Badge from '@/app/components/base/badge'
-import Confirm from '@/app/components/base/confirm'
-import Tooltip from '@/app/components/base/tooltip'
-import Toast from '@/app/components/base/toast'
-import { BoxSparkleFill } from '@/app/components/base/icons/src/vender/plugin'
-import { Github } from '@/app/components/base/icons/src/public/common'
-import { uninstallPlugin } from '@/service/plugins'
-import { useGetLanguage, useI18N } from '@/context/i18n'
-import { useModalContext } from '@/context/modal-context'
-import { useProviderContext } from '@/context/provider-context'
-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'
-import DeprecationNotice from '../base/deprecation-notice'
+import { useBoolean } from 'ahooks'
+import { useTheme } from 'next-themes'
+import React, { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { AutoUpdateLine } from '../../base/icons/src/vender/system'
-import { convertUTCDaySecondsToLocalSeconds, timeOfDayToDayjs } from '../reference-setting-modal/auto-update-setting/utils'
+import DeprecationNotice from '../base/deprecation-notice'
+import Icon from '../card/base/card-icon'
+import Description from '../card/base/description'
+import OrgInfo from '../card/base/org-info'
+import Title from '../card/base/title'
+import { useGitHubReleases } from '../install-plugin/hooks'
 import useReferenceSetting from '../plugin-page/use-reference-setting'
 import { AUTO_UPDATE_MODE } from '../reference-setting-modal/auto-update-setting/types'
-import { useAppContext } from '@/context/app-context'
-import { useGlobalPublicStore } from '@/context/global-public-context'
+import { convertUTCDaySecondsToLocalSeconds, timeOfDayToDayjs } from '../reference-setting-modal/auto-update-setting/utils'
+import type { PluginDetail } from '../types'
+import { PluginCategoryEnum, PluginSource } from '../types'

 const i18nPrefix = 'plugin.action'

 type Props = {
  detail: PluginDetail
-  onHide: () => void
-  onUpdate: (isDelete?: boolean) => void
+  isReadmeView?: boolean
+  onHide?: () => void
+  onUpdate?: (isDelete?: boolean) => void
 }

 const DetailHeader = ({
  detail,
+  isReadmeView = false,
  onHide,
  onUpdate,
 }: Props) => {
@@ -85,8 +85,9 @@ const DetailHeader = ({
    deprecated_reason,
    alternative_plugin_id,
  } = detail
-  const { author, category, name, label, description, icon, verified, tool } = detail.declaration
-  const isTool = category === PluginType.tool
+
+  const { author, category, name, label, description, icon, verified, tool } = detail.declaration || detail
+  const isTool = category === PluginCategoryEnum.tool
  const providerBriefInfo = tool?.identity
  const providerKey = `${plugin_id}/${providerBriefInfo?.name}`
  const { data: collectionList = [] } = useAllToolProviders(isTool)
@@ -128,13 +129,13 @@ const DetailHeader = ({
      return false
    if (!autoUpgradeInfo || !isFromMarketplace)
      return false
-    if(autoUpgradeInfo.strategy_setting === 'disabled')
+    if (autoUpgradeInfo.strategy_setting === 'disabled')
      return false
-    if(autoUpgradeInfo.upgrade_mode === AUTO_UPDATE_MODE.update_all)
+    if (autoUpgradeInfo.upgrade_mode === AUTO_UPDATE_MODE.update_all)
      return true
-    if(autoUpgradeInfo.upgrade_mode === AUTO_UPDATE_MODE.partial && autoUpgradeInfo.include_plugins.includes(plugin_id))
+    if (autoUpgradeInfo.upgrade_mode === AUTO_UPDATE_MODE.partial && autoUpgradeInfo.include_plugins.includes(plugin_id))
      return true
-    if(autoUpgradeInfo.upgrade_mode === AUTO_UPDATE_MODE.exclude && !autoUpgradeInfo.exclude_plugins.includes(plugin_id))
+    if (autoUpgradeInfo.upgrade_mode === AUTO_UPDATE_MODE.exclude && !autoUpgradeInfo.exclude_plugins.includes(plugin_id))
      return true
    return false
  }, [autoUpgradeInfo, plugin_id, isFromMarketplace])
@@ -156,7 +157,7 @@ const DetailHeader = ({
    if (needUpdate) {
      setShowUpdatePluginModal({
        onSaveCallback: () => {
-          onUpdate()
+          onUpdate?.()
        },
        payload: {
          type: PluginSource.github,
@@ -176,7 +177,7 @@ const DetailHeader = ({
  }

  const handleUpdatedFromMarketplace = () => {
-    onUpdate()
+    onUpdate?.()
    hideUpdateModal()
  }

@@ -201,26 +202,26 @@ const DetailHeader = ({
    hideDeleting()
    if (res.success) {
      hideDeleteConfirm()
-      onUpdate(true)
-      if (PluginType.model.includes(category))
+      onUpdate?.(true)
+      if (PluginCategoryEnum.model.includes(category))
        refreshModelProviders()
-      if (PluginType.tool.includes(category))
+      if (PluginCategoryEnum.tool.includes(category))
        invalidateAllToolProviders()
    }
  }, [showDeleting, id, hideDeleting, hideDeleteConfirm, onUpdate, category, refreshModelProviders, invalidateAllToolProviders])

  return (
-    <div className={cn('shrink-0 border-b border-divider-subtle bg-components-panel-bg p-4 pb-3')}>
+    <div className={cn('shrink-0 border-b border-divider-subtle bg-components-panel-bg p-4 pb-3', isReadmeView && 'border-b-0 bg-transparent p-0')}>
      <div className="flex">
-        <div className='overflow-hidden rounded-xl border border-components-panel-border-subtle'>
-          <Icon src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${tenant_id}&filename=${icon}`} />
+        <div className={cn('overflow-hidden rounded-xl border border-components-panel-border-subtle', isReadmeView && 'bg-components-panel-bg')}>
+          <Icon src={icon.startsWith('http') ? icon : `${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${tenant_id}&filename=${icon}`} />
        </div>
        <div className="ml-3 w-0 grow">
          <div className="flex h-5 items-center">
            <Title title={label[locale]} />
-            {verified && <RiVerifiedBadgeLine className="ml-0.5 h-4 w-4 shrink-0 text-text-accent" />}
-            <PluginVersionPicker
-              disabled={!isFromMarketplace}
+            {verified && !isReadmeView && <RiVerifiedBadgeLine className="ml-0.5 h-4 w-4 shrink-0 text-text-accent" />}
+            {version && <PluginVersionPicker
+              disabled={!isFromMarketplace || isReadmeView}
              isShow={isShow}
              onShowChange={setIsShow}
              pluginID={plugin_id}
@@ -240,15 +241,15 @@ const DetailHeader = ({
                  text={
                    <>
                      <div>{isFromGitHub ? meta!.version : version}</div>
-                      {isFromMarketplace && <RiArrowLeftRightLine className='ml-1 h-3 w-3 text-text-tertiary' />}
+                      {isFromMarketplace && !isReadmeView && <RiArrowLeftRightLine className='ml-1 h-3 w-3 text-text-tertiary' />}
                    </>
                  }
                  hasRedCornerMark={hasNewVersion}
                />
              }
-            />
+            />}
            {/* Auto update info */}
-            {isAutoUpgradeEnabled && (
+            {isAutoUpgradeEnabled && !isReadmeView && (
              <Tooltip popupContent={t('plugin.autoUpdate.nextUpdateTime', { time: timeOfDayToDayjs(convertUTCDaySecondsToLocalSeconds(autoUpgradeInfo?.upgrade_time_of_day || 0, timezone!)).format('hh:mm A') })}>
                {/* add a a div to fix tooltip hover not show problem */}
                <div>
@@ -276,44 +277,47 @@ const DetailHeader = ({
              <OrgInfo
                packageNameClassName='w-auto'
                orgName={author}
-                packageName={name}
+                packageName={name?.includes('/') ? (name.split('/').pop() || '') : name}
              />
-              <div className='system-xs-regular ml-1 mr-0.5 text-text-quaternary'>·</div>
-              {detail.source === PluginSource.marketplace && (
-                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.marketplace')} >
-                  <div><BoxSparkleFill className='h-3.5 w-3.5 text-text-tertiary hover:text-text-accent' /></div>
-                </Tooltip>
-              )}
-              {detail.source === PluginSource.github && (
-                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.github')} >
-                  <div><Github className='h-3.5 w-3.5 text-text-secondary hover:text-text-primary' /></div>
-                </Tooltip>
-              )}
-              {detail.source === PluginSource.local && (
-                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.local')} >
-                  <div><RiHardDrive3Line className='h-3.5 w-3.5 text-text-tertiary' /></div>
-                </Tooltip>
-              )}
-              {detail.source === PluginSource.debugging && (
-                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.debugging')} >
-                  <div><RiBugLine className='h-3.5 w-3.5 text-text-tertiary hover:text-text-warning' /></div>
-                </Tooltip>
-              )}
+              {source && <>
+                <div className='system-xs-regular ml-1 mr-0.5 text-text-quaternary'>·</div>
+                {source === PluginSource.marketplace && (
+                  <Tooltip popupContent={t('plugin.detailPanel.categoryTip.marketplace')} >
+                    <div><BoxSparkleFill className='h-3.5 w-3.5 text-text-tertiary hover:text-text-accent' /></div>
+                  </Tooltip>
+                )}
+                {source === PluginSource.github && (
+                  <Tooltip popupContent={t('plugin.detailPanel.categoryTip.github')} >
+                    <div><Github className='h-3.5 w-3.5 text-text-secondary hover:text-text-primary' /></div>
+                  </Tooltip>
+                )}
+                {source === PluginSource.local && (
+                  <Tooltip popupContent={t('plugin.detailPanel.categoryTip.local')} >
+                    <div><RiHardDrive3Line className='h-3.5 w-3.5 text-text-tertiary' /></div>
+                  </Tooltip>
+                )}
+                {source === PluginSource.debugging && (
+                  <Tooltip popupContent={t('plugin.detailPanel.categoryTip.debugging')} >
+                    <div><RiBugLine className='h-3.5 w-3.5 text-text-tertiary hover:text-text-warning' /></div>
+                  </Tooltip>
+                )}
+              </>}
            </div>
          </div>
        </div>
-        <div className='flex gap-1'>
-          <OperationDropdown
-            source={detail.source}
-            onInfo={showPluginInfo}
-            onCheckVersion={handleUpdate}
-            onRemove={showDeleteConfirm}
-            detailUrl={detailUrl}
-          />
-          <ActionButton onClick={onHide}>
-            <RiCloseLine className='h-4 w-4' />
-          </ActionButton>
-        </div>
+        {!isReadmeView && (
+          <div className='flex gap-1'>
+            <OperationDropdown
+              source={source}
+              onInfo={showPluginInfo}
+              onCheckVersion={handleUpdate}
+              onRemove={showDeleteConfirm}
+              detailUrl={detailUrl}
+            />
+            <ActionButton onClick={onHide}>
+              <RiCloseLine className='h-4 w-4' />
+            </ActionButton>
+          </div>)}
      </div>
      {isFromMarketplace && (
        <DeprecationNotice
@@ -324,14 +328,15 @@ const DetailHeader = ({
          className='mt-3'
        />
      )}
-      <Description className='mb-2 mt-3 h-auto' text={description[locale]} descriptionLineRows={2}></Description>
+      {!isReadmeView && <Description className='mb-2 mt-3 h-auto' text={description[locale]} descriptionLineRows={2}></Description>}
      {
-        category === PluginType.tool && (
+        category === PluginCategoryEnum.tool && !isReadmeView && (
          <PluginAuth
            pluginPayload={{
              provider: provider?.name || '',
              category: AuthCategory.tool,
              providerType: provider?.type || '',
+              detail,
            }}
          />
        )
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import copy from 'copy-to-clipboard'
 import { RiClipboardLine, RiDeleteBinLine, RiEditLine, RiLoginCircleLine } from '@remixicon/react'
-import type { EndpointListItem } from '../types'
+import type { EndpointListItem, PluginDetail } from '../types'
 import EndpointModal from './endpoint-modal'
 import { NAME_FIELD } from './utils'
 import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
@@ -22,11 +22,13 @@ import {
 } from '@/service/use-endpoints'

 type Props = {
+  pluginDetail: PluginDetail
  data: EndpointListItem
  handleChange: () => void
 }

 const EndpointCard = ({
+  pluginDetail,
  data,
  handleChange,
 }: Props) => {
@@ -206,10 +208,11 @@ const EndpointCard = ({
      )}
      {isShowEndpointModal && (
        <EndpointModal
-          formSchemas={formSchemas}
+          formSchemas={formSchemas as any}
          defaultValues={formValue}
          onCancel={hideEndpointModalConfirm}
          onSaved={handleUpdate}
+          pluginDetail={pluginDetail}
        />
      )}
    </div>
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -102,14 +102,16 @@ const EndpointList = ({ detail }: Props) => {
            key={index}
            data={item}
            handleChange={() => invalidateEndpointList(detail.plugin_id)}
+            pluginDetail={detail}
          />
        ))}
      </div>
      {isShowEndpointModal && (
        <EndpointModal
-          formSchemas={formSchemas}
+          formSchemas={formSchemas as any}
          onCancel={hideEndpointModal}
          onSaved={handleCreate}
+          pluginDetail={detail}
        />
      )}
    </div>
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -10,12 +10,16 @@ import Form from '@/app/components/header/account-setting/model-provider-page/mo
 import Toast from '@/app/components/base/toast'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import cn from '@/utils/classnames'
+import { ReadmeEntrance } from '../readme-panel/entrance'
+import type { PluginDetail } from '../types'
+import type { FormSchema } from '../../base/form/types'

 type Props = {
-  formSchemas: any
+  formSchemas: FormSchema[]
  defaultValues?: any
  onCancel: () => void
  onSaved: (value: Record<string, any>) => void
+  pluginDetail: PluginDetail
 }

 const extractDefaultValues = (schemas: any[]) => {
@@ -32,6 +36,7 @@ const EndpointModal: FC<Props> = ({
  defaultValues = {},
  onCancel,
  onSaved,
+  pluginDetail,
 }) => {
  const getValueFromI18nObject = useRenderI18nObject()
  const { t } = useTranslation()
@@ -43,7 +48,7 @@ const EndpointModal: FC<Props> = ({
  const handleSave = () => {
    for (const field of formSchemas) {
      if (field.required && !tempCredential[field.name]) {
-        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: getValueFromI18nObject(field.label) }) })
+        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: typeof field.label === 'string' ? field.label : getValueFromI18nObject(field.label as Record<string, string>) }) })
        return
      }
    }
@@ -84,6 +89,7 @@ const EndpointModal: FC<Props> = ({
            </ActionButton>
          </div>
          <div className='system-xs-regular mt-0.5 text-text-tertiary'>{t('plugin.detailPanel.endpointModalDesc')}</div>
+          <ReadmeEntrance pluginDetail={pluginDetail} className='px-0 pt-3' />
        </div>
        <div className='grow overflow-y-auto'>
          <div className='px-4 py-2'>
@@ -92,7 +98,7 @@ const EndpointModal: FC<Props> = ({
              onChange={(v) => {
                setTempCredential(v)
              }}
-              formSchemas={formSchemas}
+              formSchemas={formSchemas as any}
              isEditMode={true}
              showOnVariableMap={{}}
              validating={false}
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -1,15 +1,19 @@
 'use client'
-import React from 'react'
+import Drawer from '@/app/components/base/drawer'
+import { PluginCategoryEnum, type PluginDetail } from '@/app/components/plugins/types'
+import cn from '@/utils/classnames'
 import type { FC } from 'react'
+import { useCallback, useEffect } from 'react'
+import ActionList from './action-list'
+import AgentStrategyList from './agent-strategy-list'
+import DatasourceActionList from './datasource-action-list'
 import DetailHeader from './detail-header'
 import EndpointList from './endpoint-list'
-import ActionList from './action-list'
-import DatasourceActionList from './datasource-action-list'
 import ModelList from './model-list'
-import AgentStrategyList from './agent-strategy-list'
-import Drawer from '@/app/components/base/drawer'
-import type { PluginDetail } from '@/app/components/plugins/types'
-import cn from '@/utils/classnames'
+import { SubscriptionList } from './subscription-list'
+import { usePluginStore } from './store'
+import { TriggerEventsList } from './trigger/event-list'
+import { ReadmeEntrance } from '../readme-panel/entrance'

 type Props = {
  detail?: PluginDetail
@@ -22,11 +26,24 @@ const PluginDetailPanel: FC<Props> = ({
  onUpdate,
  onHide,
 }) => {
-  const handleUpdate = (isDelete = false) => {
+  const handleUpdate = useCallback((isDelete = false) => {
    if (isDelete)
      onHide()
    onUpdate()
-  }
+  }, [onHide, onUpdate])
+
+  const { setDetail } = usePluginStore()
+
+  useEffect(() => {
+    setDetail(!detail ? undefined : {
+      plugin_id: detail.plugin_id,
+      provider: `${detail.plugin_id}/${detail.declaration.name}`,
+      plugin_unique_identifier: detail.plugin_unique_identifier || '',
+      declaration: detail.declaration,
+      name: detail.name,
+      id: detail.id,
+    })
+  }, [detail])

  if (!detail)
    return null
@@ -43,17 +60,24 @@ const PluginDetailPanel: FC<Props> = ({
    >
      {detail && (
        <>
-          <DetailHeader
-            detail={detail}
-            onHide={onHide}
-            onUpdate={handleUpdate}
-          />
+          <DetailHeader detail={detail} onUpdate={handleUpdate} onHide={onHide} />
          <div className='grow overflow-y-auto'>
-            {!!detail.declaration.tool && <ActionList detail={detail} />}
-            {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
-            {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
-            {!!detail.declaration.model && <ModelList detail={detail} />}
-            {!!detail.declaration.datasource && <DatasourceActionList detail={detail} />}
+            <div className='flex min-h-full flex-col'>
+              <div className='flex-1'>
+                {detail.declaration.category === PluginCategoryEnum.trigger && (
+                  <>
+                    <SubscriptionList />
+                    <TriggerEventsList />
+                  </>
+                )}
+                {!!detail.declaration.tool && <ActionList detail={detail} />}
+                {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
+                {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
+                {!!detail.declaration.model && <ModelList detail={detail} />}
+                {!!detail.declaration.datasource && <DatasourceActionList detail={detail} />}
+              </div>
+              <ReadmeEntrance pluginDetail={detail} className='mt-auto' />
+            </div>
          </div>
        </>
      )}
--- a/web/app/components/plugins/plugin-detail-panel/store.ts
+++ b/web/app/components/plugins/plugin-detail-panel/store.ts
@@ -0,0 +1,29 @@
+import { create } from 'zustand'
+import type {
+  ParametersSchema,
+  PluginDeclaration,
+  PluginDetail,
+  PluginTriggerSubscriptionConstructor,
+} from '../types'
+
+type TriggerDeclarationSummary = {
+  subscription_schema?: ParametersSchema[]
+  subscription_constructor?: PluginTriggerSubscriptionConstructor | null
+}
+
+export type SimpleDetail = Pick<PluginDetail, 'plugin_id' | 'name' | 'plugin_unique_identifier' | 'id'> & {
+  provider: string
+  declaration: Partial<Omit<PluginDeclaration, 'trigger'>> & {
+    trigger?: TriggerDeclarationSummary
+  }
+}
+
+type Shape = {
+  detail: SimpleDetail | undefined
+  setDetail: (detail?: SimpleDetail) => void
+}
+
+export const usePluginStore = create<Shape>(set => ({
+  detail: undefined,
+  setDetail: (detail?: SimpleDetail) => set({ detail }),
+}))
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
@@ -0,0 +1,449 @@
+'use client'
+// import { CopyFeedbackNew } from '@/app/components/base/copy-feedback'
+import { EncryptedBottom } from '@/app/components/base/encrypted-bottom'
+import { BaseForm } from '@/app/components/base/form/components/base'
+import type { FormRefObject } from '@/app/components/base/form/types'
+import { FormTypeEnum } from '@/app/components/base/form/types'
+import Modal from '@/app/components/base/modal/modal'
+import Toast from '@/app/components/base/toast'
+import { SupportedCreationMethods } from '@/app/components/plugins/types'
+import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
+import type { BuildTriggerSubscriptionPayload } from '@/service/use-triggers'
+import {
+  useBuildTriggerSubscription,
+  useCreateTriggerSubscriptionBuilder,
+  useTriggerSubscriptionBuilderLogs,
+  useUpdateTriggerSubscriptionBuilder,
+  useVerifyTriggerSubscriptionBuilder,
+} from '@/service/use-triggers'
+import { parsePluginErrorMessage } from '@/utils/error-parser'
+import { isPrivateOrLocalAddress } from '@/utils/urlValidation'
+import { RiLoader2Line } from '@remixicon/react'
+import { debounce } from 'lodash-es'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import LogViewer from '../log-viewer'
+import { usePluginSubscriptionStore } from '../store'
+import { usePluginStore } from '../../store'
+
+type Props = {
+  onClose: () => void
+  createType: SupportedCreationMethods
+  builder?: TriggerSubscriptionBuilder
+}
+
+const CREDENTIAL_TYPE_MAP: Record<SupportedCreationMethods, TriggerCredentialTypeEnum> = {
+  [SupportedCreationMethods.APIKEY]: TriggerCredentialTypeEnum.ApiKey,
+  [SupportedCreationMethods.OAUTH]: TriggerCredentialTypeEnum.Oauth2,
+  [SupportedCreationMethods.MANUAL]: TriggerCredentialTypeEnum.Unauthorized,
+}
+
+enum ApiKeyStep {
+  Verify = 'verify',
+  Configuration = 'configuration',
+}
+
+const defaultFormValues = { values: {}, isCheckValidated: false }
+
+const normalizeFormType = (type: FormTypeEnum | string): FormTypeEnum => {
+  if (Object.values(FormTypeEnum).includes(type as FormTypeEnum))
+    return type as FormTypeEnum
+
+  switch (type) {
+    case 'string':
+    case 'text':
+      return FormTypeEnum.textInput
+    case 'password':
+    case 'secret':
+      return FormTypeEnum.secretInput
+    case 'number':
+    case 'integer':
+      return FormTypeEnum.textNumber
+    case 'boolean':
+      return FormTypeEnum.boolean
+    default:
+      return FormTypeEnum.textInput
+  }
+}
+
+const StatusStep = ({ isActive, text }: { isActive: boolean, text: string }) => {
+  return <div className={`system-2xs-semibold-uppercase flex items-center gap-1 ${isActive
+    ? 'text-state-accent-solid'
+    : 'text-text-tertiary'}`}>
+    {/* Active indicator dot */}
+    {isActive && (
+      <div className='h-1 w-1 rounded-full bg-state-accent-solid'></div>
+    )}
+    {text}
+  </div>
+}
+
+const MultiSteps = ({ currentStep }: { currentStep: ApiKeyStep }) => {
+  const { t } = useTranslation()
+  return <div className='mb-6 flex w-1/3 items-center gap-2'>
+    <StatusStep isActive={currentStep === ApiKeyStep.Verify} text={t('pluginTrigger.modal.steps.verify')} />
+    <div className='h-px w-3 shrink-0 bg-divider-deep'></div>
+    <StatusStep isActive={currentStep === ApiKeyStep.Configuration} text={t('pluginTrigger.modal.steps.configuration')} />
+  </div>
+}
+
+export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
+  const { t } = useTranslation()
+  const detail = usePluginStore(state => state.detail)
+  const { refresh } = usePluginSubscriptionStore()
+
+  const [currentStep, setCurrentStep] = useState<ApiKeyStep>(createType === SupportedCreationMethods.APIKEY ? ApiKeyStep.Verify : ApiKeyStep.Configuration)
+
+  const [subscriptionBuilder, setSubscriptionBuilder] = useState<TriggerSubscriptionBuilder | undefined>(builder)
+  const isInitializedRef = useRef(false)
+
+  const { mutate: verifyCredentials, isPending: isVerifyingCredentials } = useVerifyTriggerSubscriptionBuilder()
+  const { mutateAsync: createBuilder /* isPending: isCreatingBuilder */ } = useCreateTriggerSubscriptionBuilder()
+  const { mutate: buildSubscription, isPending: isBuilding } = useBuildTriggerSubscription()
+  const { mutate: updateBuilder } = useUpdateTriggerSubscriptionBuilder()
+
+  const manualPropertiesSchema = detail?.declaration?.trigger?.subscription_schema || [] // manual
+  const manualPropertiesFormRef = React.useRef<FormRefObject>(null)
+
+  const subscriptionFormRef = React.useRef<FormRefObject>(null)
+
+  const autoCommonParametersSchema = detail?.declaration.trigger?.subscription_constructor?.parameters || [] // apikey and oauth
+  const autoCommonParametersFormRef = React.useRef<FormRefObject>(null)
+
+  const rawApiKeyCredentialsSchema = detail?.declaration.trigger?.subscription_constructor?.credentials_schema || []
+  const apiKeyCredentialsSchema = useMemo(() => {
+    return rawApiKeyCredentialsSchema.map(schema => ({
+      ...schema,
+      tooltip: schema.help,
+    }))
+  }, [rawApiKeyCredentialsSchema])
+  const apiKeyCredentialsFormRef = React.useRef<FormRefObject>(null)
+
+  const { data: logData } = useTriggerSubscriptionBuilderLogs(
+    detail?.provider || '',
+    subscriptionBuilder?.id || '',
+    {
+      enabled: createType === SupportedCreationMethods.MANUAL,
+      refetchInterval: 3000,
+    },
+  )
+
+  useEffect(() => {
+    const initializeBuilder = async () => {
+      isInitializedRef.current = true
+      try {
+        const response = await createBuilder({
+          provider: detail?.provider || '',
+          credential_type: CREDENTIAL_TYPE_MAP[createType],
+        })
+        setSubscriptionBuilder(response.subscription_builder)
+      }
+      catch (error) {
+        console.error('createBuilder error:', error)
+        Toast.notify({
+          type: 'error',
+          message: t('pluginTrigger.modal.errors.createFailed'),
+        })
+      }
+    }
+    if (!isInitializedRef.current && !subscriptionBuilder && detail?.provider)
+      initializeBuilder()
+  }, [subscriptionBuilder, detail?.provider, createType, createBuilder, t])
+
+  useEffect(() => {
+    if (subscriptionBuilder?.endpoint && subscriptionFormRef.current && currentStep === ApiKeyStep.Configuration) {
+      const form = subscriptionFormRef.current.getForm()
+      if (form)
+        form.setFieldValue('callback_url', subscriptionBuilder.endpoint)
+      if (isPrivateOrLocalAddress(subscriptionBuilder.endpoint)) {
+        console.log('isPrivateOrLocalAddress', isPrivateOrLocalAddress(subscriptionBuilder.endpoint))
+        subscriptionFormRef.current?.setFields([{
+          name: 'callback_url',
+          warnings: [t('pluginTrigger.modal.form.callbackUrl.privateAddressWarning')],
+        }])
+      }
+      else {
+        subscriptionFormRef.current?.setFields([{
+          name: 'callback_url',
+          warnings: [],
+        }])
+      }
+    }
+  }, [subscriptionBuilder?.endpoint, currentStep, t])
+
+  const debouncedUpdate = useMemo(
+    () => debounce((provider: string, builderId: string, properties: Record<string, any>) => {
+      updateBuilder(
+        {
+          provider,
+          subscriptionBuilderId: builderId,
+          properties,
+        },
+        {
+          onError: (error: any) => {
+            console.error('Failed to update subscription builder:', error)
+            Toast.notify({
+              type: 'error',
+              message: error?.message || t('pluginTrigger.modal.errors.updateFailed'),
+            })
+          },
+        },
+      )
+    }, 500),
+    [updateBuilder, t],
+  )
+
+  const handleManualPropertiesChange = useCallback(() => {
+    if (!subscriptionBuilder || !detail?.provider)
+      return
+
+    const formValues = manualPropertiesFormRef.current?.getFormValues({ needCheckValidatedValues: false }) || { values: {}, isCheckValidated: true }
+
+    debouncedUpdate(detail.provider, subscriptionBuilder.id, formValues.values)
+  }, [subscriptionBuilder, detail?.provider, debouncedUpdate])
+
+  useEffect(() => {
+    return () => {
+      debouncedUpdate.cancel()
+    }
+  }, [debouncedUpdate])
+
+  const handleVerify = () => {
+    const apiKeyCredentialsFormValues = apiKeyCredentialsFormRef.current?.getFormValues({}) || defaultFormValues
+    const credentials = apiKeyCredentialsFormValues.values
+
+    if (!Object.keys(credentials).length) {
+      Toast.notify({
+        type: 'error',
+        message: 'Please fill in all required credentials',
+      })
+      return
+    }
+
+    apiKeyCredentialsFormRef.current?.setFields([{
+      name: Object.keys(credentials)[0],
+      errors: [],
+    }])
+
+    verifyCredentials(
+      {
+        provider: detail?.provider || '',
+        subscriptionBuilderId: subscriptionBuilder?.id || '',
+        credentials,
+      },
+      {
+        onSuccess: () => {
+          Toast.notify({
+            type: 'success',
+            message: t('pluginTrigger.modal.apiKey.verify.success'),
+          })
+          setCurrentStep(ApiKeyStep.Configuration)
+        },
+        onError: async (error: any) => {
+          const errorMessage = await parsePluginErrorMessage(error) || t('pluginTrigger.modal.apiKey.verify.error')
+          apiKeyCredentialsFormRef.current?.setFields([{
+            name: Object.keys(credentials)[0],
+            errors: [errorMessage],
+          }])
+        },
+      },
+    )
+  }
+
+  const handleCreate = () => {
+    if (!subscriptionBuilder) {
+      Toast.notify({
+        type: 'error',
+        message: 'Subscription builder not found',
+      })
+      return
+    }
+
+    const subscriptionFormValues = subscriptionFormRef.current?.getFormValues({})
+    if (!subscriptionFormValues?.isCheckValidated)
+      return
+
+    const subscriptionNameValue = subscriptionFormValues?.values?.subscription_name as string
+
+    const params: BuildTriggerSubscriptionPayload = {
+      provider: detail?.provider || '',
+      subscriptionBuilderId: subscriptionBuilder.id,
+      name: subscriptionNameValue,
+    }
+
+    if (createType !== SupportedCreationMethods.MANUAL) {
+      if (autoCommonParametersSchema.length > 0) {
+        const autoCommonParametersFormValues = autoCommonParametersFormRef.current?.getFormValues({}) || defaultFormValues
+        if (!autoCommonParametersFormValues?.isCheckValidated)
+          return
+        params.parameters = autoCommonParametersFormValues.values
+      }
+    }
+    else if (manualPropertiesSchema.length > 0) {
+      const manualFormValues = manualPropertiesFormRef.current?.getFormValues({}) || defaultFormValues
+      if (!manualFormValues?.isCheckValidated)
+        return
+    }
+
+    buildSubscription(
+      params,
+      {
+        onSuccess: () => {
+          Toast.notify({
+            type: 'success',
+            message: t('pluginTrigger.subscription.createSuccess'),
+          })
+          onClose()
+          refresh?.()
+        },
+        onError: async (error: any) => {
+          const errorMessage = await parsePluginErrorMessage(error) || t('pluginTrigger.subscription.createFailed')
+          Toast.notify({
+            type: 'error',
+            message: errorMessage,
+          })
+        },
+      },
+    )
+  }
+
+  const handleConfirm = () => {
+    if (currentStep === ApiKeyStep.Verify)
+      handleVerify()
+    else
+      handleCreate()
+  }
+
+  const handleApiKeyCredentialsChange = () => {
+    apiKeyCredentialsFormRef.current?.setFields([{
+      name: apiKeyCredentialsSchema[0].name,
+      errors: [],
+    }])
+  }
+
+  return (
+    <Modal
+      title={t(`pluginTrigger.modal.${createType === SupportedCreationMethods.APIKEY ? 'apiKey' : createType.toLowerCase()}.title`)}
+      confirmButtonText={
+        currentStep === ApiKeyStep.Verify
+          ? isVerifyingCredentials ? t('pluginTrigger.modal.common.verifying') : t('pluginTrigger.modal.common.verify')
+          : isBuilding ? t('pluginTrigger.modal.common.creating') : t('pluginTrigger.modal.common.create')
+      }
+      onClose={onClose}
+      onCancel={onClose}
+      onConfirm={handleConfirm}
+      disabled={isVerifyingCredentials || isBuilding}
+      bottomSlot={currentStep === ApiKeyStep.Verify ? <EncryptedBottom /> : null}
+      size={createType === SupportedCreationMethods.MANUAL ? 'md' : 'sm'}
+      containerClassName='min-h-[360px]'
+      clickOutsideNotClose
+    >
+      {createType === SupportedCreationMethods.APIKEY && <MultiSteps currentStep={currentStep} />}
+      {currentStep === ApiKeyStep.Verify && (
+        <>
+          {apiKeyCredentialsSchema.length > 0 && (
+            <div className='mb-4'>
+              <BaseForm
+                formSchemas={apiKeyCredentialsSchema}
+                ref={apiKeyCredentialsFormRef}
+                labelClassName='system-sm-medium mb-2 flex items-center gap-1 text-text-primary'
+                preventDefaultSubmit={true}
+                formClassName='space-y-4'
+                onChange={handleApiKeyCredentialsChange}
+              />
+            </div>
+          )}
+        </>
+      )}
+      {currentStep === ApiKeyStep.Configuration && <div className='max-h-[70vh]'>
+        <BaseForm
+          formSchemas={[
+            {
+              name: 'subscription_name',
+              label: t('pluginTrigger.modal.form.subscriptionName.label'),
+              placeholder: t('pluginTrigger.modal.form.subscriptionName.placeholder'),
+              type: FormTypeEnum.textInput,
+              required: true,
+            },
+            {
+              name: 'callback_url',
+              label: t('pluginTrigger.modal.form.callbackUrl.label'),
+              placeholder: t('pluginTrigger.modal.form.callbackUrl.placeholder'),
+              type: FormTypeEnum.textInput,
+              required: false,
+              default: subscriptionBuilder?.endpoint || '',
+              disabled: true,
+              tooltip: t('pluginTrigger.modal.form.callbackUrl.tooltip'),
+              showCopy: true,
+            },
+          ]}
+          ref={subscriptionFormRef}
+          labelClassName='system-sm-medium mb-2 flex items-center gap-1 text-text-primary'
+          formClassName='space-y-4 mb-4'
+        />
+        {/* <div className='system-xs-regular mb-6 mt-[-1rem] text-text-tertiary'>
+          {t('pluginTrigger.modal.form.callbackUrl.description')}
+        </div> */}
+        {createType !== SupportedCreationMethods.MANUAL && autoCommonParametersSchema.length > 0 && (
+          <BaseForm
+            formSchemas={autoCommonParametersSchema.map((schema) => {
+              const normalizedType = normalizeFormType(schema.type as FormTypeEnum | string)
+              return {
+                ...schema,
+                tooltip: schema.description,
+                type: normalizedType,
+                dynamicSelectParams: normalizedType === FormTypeEnum.dynamicSelect ? {
+                  plugin_id: detail?.plugin_id || '',
+                  provider: detail?.provider || '',
+                  action: 'provider',
+                  parameter: schema.name,
+                  credential_id: subscriptionBuilder?.id || '',
+                } : undefined,
+                fieldClassName: schema.type === FormTypeEnum.boolean ? 'flex items-center justify-between' : undefined,
+                labelClassName: schema.type === FormTypeEnum.boolean ? 'mb-0' : undefined,
+              }
+            })}
+            ref={autoCommonParametersFormRef}
+            labelClassName='system-sm-medium mb-2 flex items-center gap-1 text-text-primary'
+            formClassName='space-y-4'
+          />
+        )}
+        {createType === SupportedCreationMethods.MANUAL && <>
+          {manualPropertiesSchema.length > 0 && (
+            <div className='mb-6'>
+              <BaseForm
+                formSchemas={manualPropertiesSchema.map(schema => ({
+                  ...schema,
+                  tooltip: schema.description,
+                }))}
+                ref={manualPropertiesFormRef}
+                labelClassName='system-sm-medium mb-2 flex items-center gap-1 text-text-primary'
+                formClassName='space-y-4'
+                onChange={handleManualPropertiesChange}
+              />
+            </div>
+          )}
+          <div className='mb-6'>
+            <div className='mb-3 flex items-center gap-2'>
+              <div className='system-xs-medium-uppercase text-text-tertiary'>
+                {t('pluginTrigger.modal.manual.logs.title')}
+              </div>
+              <div className='h-px flex-1 bg-gradient-to-r from-divider-regular to-transparent' />
+            </div>
+
+            <div className='mb-1 flex items-center justify-center gap-1 rounded-lg bg-background-section p-3'>
+              <div className='h-3.5 w-3.5'>
+                <RiLoader2Line className='h-full w-full animate-spin' />
+              </div>
+              <div className='system-xs-regular text-text-tertiary'>
+                {t('pluginTrigger.modal.manual.logs.loading', { pluginName: detail?.name || '' })}
+              </div>
+            </div>
+            <LogViewer logs={logData?.logs || []} />
+          </div>
+        </>}
+      </div>}
+    </Modal>
+  )
+}
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
@@ -0,0 +1,242 @@
+import { ActionButton, ActionButtonState } from '@/app/components/base/action-button'
+import Badge from '@/app/components/base/badge'
+import { Button } from '@/app/components/base/button'
+import type { Option } from '@/app/components/base/select/custom'
+import CustomSelect from '@/app/components/base/select/custom'
+import Toast from '@/app/components/base/toast'
+import Tooltip from '@/app/components/base/tooltip'
+import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import { openOAuthPopup } from '@/hooks/use-oauth'
+import { useInitiateTriggerOAuth, useTriggerOAuthConfig, useTriggerProviderInfo } from '@/service/use-triggers'
+import cn from '@/utils/classnames'
+import { RiAddLine, RiEqualizer2Line } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SupportedCreationMethods } from '../../../types'
+import { usePluginStore } from '../../store'
+import { useSubscriptionList } from '../use-subscription-list'
+import { CommonCreateModal } from './common-modal'
+import { OAuthClientSettingsModal } from './oauth-client'
+
+export enum CreateButtonType {
+  FULL_BUTTON = 'full-button',
+  ICON_BUTTON = 'icon-button',
+}
+
+type Props = {
+  className?: string
+  buttonType?: CreateButtonType
+  shape?: 'square' | 'circle'
+}
+
+const MAX_COUNT = 10
+
+export const DEFAULT_METHOD = 'default'
+
+export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BUTTON, shape = 'square' }: Props) => {
+  const { t } = useTranslation()
+  const { subscriptions } = useSubscriptionList()
+  const subscriptionCount = subscriptions?.length || 0
+  const [selectedCreateInfo, setSelectedCreateInfo] = useState<{ type: SupportedCreationMethods, builder?: TriggerSubscriptionBuilder } | null>(null)
+
+  const detail = usePluginStore(state => state.detail)
+
+  const { data: providerInfo } = useTriggerProviderInfo(detail?.provider || '')
+  const supportedMethods = providerInfo?.supported_creation_methods || []
+  const { data: oauthConfig, refetch: refetchOAuthConfig } = useTriggerOAuthConfig(detail?.provider || '', supportedMethods.includes(SupportedCreationMethods.OAUTH))
+  const { mutate: initiateOAuth } = useInitiateTriggerOAuth()
+
+  const methodType = supportedMethods.length === 1 ? supportedMethods[0] : DEFAULT_METHOD
+
+  const [isShowClientSettingsModal, {
+    setTrue: showClientSettingsModal,
+    setFalse: hideClientSettingsModal,
+  }] = useBoolean(false)
+
+  const buttonTextMap = useMemo(() => {
+    return {
+      [SupportedCreationMethods.OAUTH]: t('pluginTrigger.subscription.createButton.oauth'),
+      [SupportedCreationMethods.APIKEY]: t('pluginTrigger.subscription.createButton.apiKey'),
+      [SupportedCreationMethods.MANUAL]: t('pluginTrigger.subscription.createButton.manual'),
+      [DEFAULT_METHOD]: t('pluginTrigger.subscription.empty.button'),
+    }
+  }, [t])
+
+  const onClickClientSettings = (e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {
+    e.stopPropagation()
+    e.preventDefault()
+    showClientSettingsModal()
+  }
+
+  const allOptions = useMemo(() => {
+    const showCustomBadge = oauthConfig?.custom_enabled && oauthConfig?.custom_configured
+
+    return [
+      {
+        value: SupportedCreationMethods.OAUTH,
+        label: t('pluginTrigger.subscription.addType.options.oauth.title'),
+        tag: !showCustomBadge ? null : <Badge className='ml-1 mr-0.5'>
+          {t('plugin.auth.custom')}
+        </Badge>,
+        extra: <Tooltip popupContent={t('pluginTrigger.subscription.addType.options.oauth.clientSettings')}>
+          <ActionButton onClick={onClickClientSettings}>
+            <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
+          </ActionButton>
+        </Tooltip>,
+        show: supportedMethods.includes(SupportedCreationMethods.OAUTH),
+      },
+      {
+        value: SupportedCreationMethods.APIKEY,
+        label: t('pluginTrigger.subscription.addType.options.apikey.title'),
+        show: supportedMethods.includes(SupportedCreationMethods.APIKEY),
+      },
+      {
+        value: SupportedCreationMethods.MANUAL,
+        label: t('pluginTrigger.subscription.addType.options.manual.description'),
+        extra: <Tooltip popupContent={t('pluginTrigger.subscription.addType.options.manual.tip')} />,
+        show: supportedMethods.includes(SupportedCreationMethods.MANUAL),
+      },
+    ]
+  }, [t, oauthConfig, supportedMethods, methodType])
+
+  const onChooseCreateType = async (type: SupportedCreationMethods) => {
+    if (type === SupportedCreationMethods.OAUTH) {
+      if (oauthConfig?.configured) {
+        initiateOAuth(detail?.provider || '', {
+          onSuccess: (response) => {
+            openOAuthPopup(response.authorization_url, (callbackData) => {
+              if (callbackData) {
+                Toast.notify({
+                  type: 'success',
+                  message: t('pluginTrigger.modal.oauth.authorization.authSuccess'),
+                })
+                setSelectedCreateInfo({ type: SupportedCreationMethods.OAUTH, builder: response.subscription_builder })
+              }
+            })
+          },
+          onError: () => {
+            Toast.notify({
+              type: 'error',
+              message: t('pluginTrigger.modal.oauth.authorization.authFailed'),
+            })
+          },
+        })
+      }
+      else {
+        showClientSettingsModal()
+      }
+    }
+    else {
+      setSelectedCreateInfo({ type })
+    }
+  }
+
+  const onClickCreate = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (subscriptionCount >= MAX_COUNT) {
+      e.stopPropagation()
+      return
+    }
+
+    if (methodType === DEFAULT_METHOD || (methodType === SupportedCreationMethods.OAUTH && supportedMethods.length === 1))
+      return
+
+    e.stopPropagation()
+    e.preventDefault()
+    onChooseCreateType(methodType)
+  }
+
+  if (!supportedMethods.length)
+    return null
+
+  return <>
+    <CustomSelect<Option & { show: boolean; extra?: React.ReactNode; tag?: React.ReactNode }>
+      options={allOptions.filter(option => option.show)}
+      value={methodType}
+      onChange={value => onChooseCreateType(value as any)}
+      containerProps={{
+        open: (methodType === DEFAULT_METHOD || (methodType === SupportedCreationMethods.OAUTH && supportedMethods.length === 1)) ? undefined : false,
+        placement: 'bottom-start',
+        offset: 4,
+        triggerPopupSameWidth: buttonType === CreateButtonType.FULL_BUTTON,
+      }}
+      triggerProps={{
+        className: cn('h-8 bg-transparent px-0 hover:bg-transparent', methodType !== DEFAULT_METHOD && supportedMethods.length > 1 && 'pointer-events-none', buttonType === CreateButtonType.FULL_BUTTON && 'grow'),
+      }}
+      popupProps={{
+        wrapperClassName: 'z-[1000]',
+      }}
+      CustomTrigger={() => {
+        return buttonType === CreateButtonType.FULL_BUTTON ? (
+          <Button
+            variant='primary'
+            size='medium'
+            className='flex w-full items-center justify-between px-0'
+            onClick={onClickCreate}
+          >
+            <div className='flex flex-1 items-center justify-center'>
+              <RiAddLine className='mr-2 size-4' />
+              {buttonTextMap[methodType]}
+              {methodType === SupportedCreationMethods.OAUTH && oauthConfig?.custom_enabled && oauthConfig?.custom_configured && <Badge
+                className='ml-1 mr-0.5 border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface'
+              >
+                {t('plugin.auth.custom')}
+              </Badge>}
+            </div>
+            {methodType === SupportedCreationMethods.OAUTH
+              && <div className='ml-auto flex items-center'>
+                <div className="h-4 w-px bg-text-primary-on-surface opacity-15" />
+                <Tooltip popupContent={t('pluginTrigger.subscription.addType.options.oauth.clientSettings')}>
+                  <div onClick={onClickClientSettings} className='p-2'>
+                    <RiEqualizer2Line className='size-4 text-components-button-primary-text' />
+                  </div>
+                </Tooltip>
+              </div>
+            }
+          </Button>
+        ) : (
+          <Tooltip
+            popupContent={subscriptionCount >= MAX_COUNT ? t('pluginTrigger.subscription.maxCount', { num: MAX_COUNT }) : t(`pluginTrigger.subscription.addType.options.${methodType.toLowerCase()}.description`)}
+            disabled={!(supportedMethods?.length === 1 || subscriptionCount >= MAX_COUNT)}>
+            <ActionButton
+              onClick={onClickCreate}
+              className={cn(
+                'float-right',
+                shape === 'circle' && '!rounded-full border-[0.5px] border-components-button-secondary-border-hover bg-components-button-secondary-bg-hover text-components-button-secondary-accent-text shadow-xs hover:border-components-button-secondary-border-disabled hover:bg-components-button-secondary-bg-disabled hover:text-components-button-secondary-accent-text-disabled',
+              )}
+              state={subscriptionCount >= MAX_COUNT ? ActionButtonState.Disabled : ActionButtonState.Default}
+            >
+              <RiAddLine className='size-4' />
+            </ActionButton>
+          </Tooltip>
+        )
+      }}
+      CustomOption={option => (
+        <>
+          <div className='mr-8 flex grow items-center gap-1 truncate px-1'>
+            {option.label}
+            {option.tag}
+          </div>
+          {option.extra}
+        </>
+      )}
+    />
+    {selectedCreateInfo && (
+      <CommonCreateModal
+        createType={selectedCreateInfo.type}
+        builder={selectedCreateInfo.builder}
+        onClose={() => setSelectedCreateInfo(null)}
+      />
+    )}
+    {isShowClientSettingsModal && (
+      <OAuthClientSettingsModal
+        oauthConfig={oauthConfig}
+        onClose={() => {
+          hideClientSettingsModal()
+          refetchOAuthConfig()
+        }}
+        showOAuthCreateModal={builder => setSelectedCreateInfo({ type: SupportedCreationMethods.OAUTH, builder })}
+      />
+    )}
+  </>
+}
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
@@ -0,0 +1,257 @@
+'use client'
+import Button from '@/app/components/base/button'
+import { BaseForm } from '@/app/components/base/form/components/base'
+import type { FormRefObject } from '@/app/components/base/form/types'
+import Modal from '@/app/components/base/modal/modal'
+import Toast from '@/app/components/base/toast'
+import type { TriggerOAuthClientParams, TriggerOAuthConfig, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
+import { openOAuthPopup } from '@/hooks/use-oauth'
+import type { ConfigureTriggerOAuthPayload } from '@/service/use-triggers'
+import {
+  useConfigureTriggerOAuth,
+  useDeleteTriggerOAuth,
+  useInitiateTriggerOAuth,
+  useVerifyTriggerSubscriptionBuilder,
+} from '@/service/use-triggers'
+import {
+  RiClipboardLine,
+  RiInformation2Fill,
+} from '@remixicon/react'
+import React, { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { usePluginStore } from '../../store'
+
+type Props = {
+  oauthConfig?: TriggerOAuthConfig
+  onClose: () => void
+  showOAuthCreateModal: (builder: TriggerSubscriptionBuilder) => void
+}
+
+enum AuthorizationStatusEnum {
+  Pending = 'pending',
+  Success = 'success',
+  Failed = 'failed',
+}
+
+enum ClientTypeEnum {
+  Default = 'default',
+  Custom = 'custom',
+}
+
+export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreateModal }: Props) => {
+  const { t } = useTranslation()
+  const detail = usePluginStore(state => state.detail)
+  const { system_configured, params, oauth_client_schema } = oauthConfig || {}
+  const [subscriptionBuilder, setSubscriptionBuilder] = useState<TriggerSubscriptionBuilder | undefined>()
+  const [authorizationStatus, setAuthorizationStatus] = useState<AuthorizationStatusEnum>()
+
+  const [clientType, setClientType] = useState<ClientTypeEnum>(system_configured ? ClientTypeEnum.Default : ClientTypeEnum.Custom)
+
+  const clientFormRef = React.useRef<FormRefObject>(null)
+
+  const oauthClientSchema = useMemo(() => {
+    if (oauth_client_schema && oauth_client_schema.length > 0 && params) {
+      const oauthConfigPramaKeys = Object.keys(params || {})
+      for (const schema of oauth_client_schema) {
+        if (oauthConfigPramaKeys.includes(schema.name))
+          schema.default = params?.[schema.name]
+      }
+      return oauth_client_schema
+    }
+    return []
+  }, [oauth_client_schema, params])
+
+  const providerName = detail?.provider || ''
+  const { mutate: initiateOAuth } = useInitiateTriggerOAuth()
+  const { mutate: verifyBuilder } = useVerifyTriggerSubscriptionBuilder()
+  const { mutate: configureOAuth } = useConfigureTriggerOAuth()
+  const { mutate: deleteOAuth } = useDeleteTriggerOAuth()
+
+  const handleAuthorization = () => {
+    setAuthorizationStatus(AuthorizationStatusEnum.Pending)
+    initiateOAuth(providerName, {
+      onSuccess: (response) => {
+        setSubscriptionBuilder(response.subscription_builder)
+        openOAuthPopup(response.authorization_url, (callbackData) => {
+          if (callbackData) {
+            Toast.notify({
+              type: 'success',
+              message: t('pluginTrigger.modal.oauth.authorization.authSuccess'),
+            })
+            onClose()
+            showOAuthCreateModal(response.subscription_builder)
+          }
+        })
+      },
+      onError: () => {
+        setAuthorizationStatus(AuthorizationStatusEnum.Failed)
+        Toast.notify({
+          type: 'error',
+          message: t('pluginTrigger.modal.oauth.authorization.authFailed'),
+        })
+      },
+    })
+  }
+
+  useEffect(() => {
+    if (providerName && subscriptionBuilder && authorizationStatus === AuthorizationStatusEnum.Pending) {
+      const pollInterval = setInterval(() => {
+        verifyBuilder(
+          {
+            provider: providerName,
+            subscriptionBuilderId: subscriptionBuilder.id,
+          },
+          {
+            onSuccess: (response) => {
+              if (response.verified) {
+                setAuthorizationStatus(AuthorizationStatusEnum.Success)
+                clearInterval(pollInterval)
+              }
+            },
+            onError: () => {
+              // Continue polling - auth might still be in progress
+            },
+          },
+        )
+      }, 3000)
+
+      return () => clearInterval(pollInterval)
+    }
+  }, [subscriptionBuilder, authorizationStatus, verifyBuilder, providerName, t])
+
+  const handleRemove = () => {
+    deleteOAuth(providerName, {
+      onSuccess: () => {
+        onClose()
+        Toast.notify({
+          type: 'success',
+          message: t('pluginTrigger.modal.oauth.remove.success'),
+        })
+      },
+      onError: (error: any) => {
+        Toast.notify({
+          type: 'error',
+          message: error?.message || t('pluginTrigger.modal.oauth.remove.failed'),
+        })
+      },
+    })
+  }
+
+  const handleSave = (needAuth: boolean) => {
+    const isCustom = clientType === ClientTypeEnum.Custom
+    const params: ConfigureTriggerOAuthPayload = {
+      provider: providerName,
+      enabled: isCustom,
+    }
+
+    if (isCustom) {
+      const clientFormValues = clientFormRef.current?.getFormValues({}) as { values: TriggerOAuthClientParams, isCheckValidated: boolean }
+      if (!clientFormValues.isCheckValidated)
+        return
+      const clientParams = clientFormValues.values
+      if (clientParams.client_id === oauthConfig?.params.client_id)
+        clientParams.client_id = '[__HIDDEN__]'
+
+      if (clientParams.client_secret === oauthConfig?.params.client_secret)
+        clientParams.client_secret = '[__HIDDEN__]'
+
+      params.client_params = clientParams
+    }
+
+    configureOAuth(params, {
+      onSuccess: () => {
+        if (needAuth) {
+          handleAuthorization()
+        }
+        else {
+          onClose()
+          Toast.notify({
+            type: 'success',
+            message: t('pluginTrigger.modal.oauth.save.success'),
+          })
+        }
+      },
+    })
+  }
+
+  return (
+    <Modal
+      title={t('pluginTrigger.modal.oauth.title')}
+      confirmButtonText={authorizationStatus === AuthorizationStatusEnum.Pending ? t('pluginTrigger.modal.common.authorizing')
+        : authorizationStatus === AuthorizationStatusEnum.Success ? t('pluginTrigger.modal.oauth.authorization.waitingJump') : t('plugin.auth.saveAndAuth')}
+      cancelButtonText={t('plugin.auth.saveOnly')}
+      extraButtonText={t('common.operation.cancel')}
+      showExtraButton
+      clickOutsideNotClose
+      extraButtonVariant='secondary'
+      onExtraButtonClick={onClose}
+      onClose={onClose}
+      onCancel={() => handleSave(false)}
+      onConfirm={() => handleSave(true)}
+      footerSlot={
+        oauthConfig?.custom_enabled && oauthConfig?.params && clientType === ClientTypeEnum.Custom && (
+          <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>
+        )
+      }
+    >
+      <div className='system-sm-medium mb-2 text-text-secondary'>{t('pluginTrigger.subscription.addType.options.oauth.clientTitle')}</div>
+      {oauthConfig?.system_configured && <div className='mb-4 flex w-full items-start justify-between gap-2'>
+        {[ClientTypeEnum.Default, ClientTypeEnum.Custom].map(option => (
+          <OptionCard
+            key={option}
+            title={t(`pluginTrigger.subscription.addType.options.oauth.${option}`)}
+            onSelect={() => setClientType(option)}
+            selected={clientType === option}
+            className="flex-1"
+          />
+        ))}
+      </div>}
+      {clientType === ClientTypeEnum.Custom && oauthConfig?.redirect_uri && (
+        <div className='mb-4 flex items-start gap-3 rounded-xl bg-background-section-burn p-4'>
+          <div className='rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg p-2 shadow-xs shadow-shadow-shadow-3'>
+            <RiInformation2Fill className='h-5 w-5 shrink-0 text-text-accent' />
+          </div>
+          <div className='flex-1 text-text-secondary'>
+            <div className='system-sm-regular whitespace-pre-wrap leading-4'>
+              {t('pluginTrigger.modal.oauthRedirectInfo')}
+            </div>
+            <div className='system-sm-medium my-1.5 break-all leading-4'>
+              {oauthConfig.redirect_uri}
+            </div>
+            <Button
+              variant='secondary'
+              size='small'
+              onClick={() => {
+                navigator.clipboard.writeText(oauthConfig.redirect_uri)
+                Toast.notify({
+                  type: 'success',
+                  message: t('common.actionMsg.copySuccessfully'),
+                })
+              }}>
+              <RiClipboardLine className='mr-1 h-[14px] w-[14px]' />
+              {t('common.operation.copy')}
+            </Button>
+          </div>
+        </div>
+      )}
+      {clientType === ClientTypeEnum.Custom && oauthClientSchema.length > 0 && (
+        <BaseForm
+          formSchemas={oauthClientSchema}
+          ref={clientFormRef}
+          labelClassName='system-sm-medium mb-2 block text-text-secondary'
+          formClassName='space-y-4'
+        />
+      )}
+    </Modal >
+  )
+}
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx
@@ -0,0 +1,75 @@
+import Confirm from '@/app/components/base/confirm'
+import Input from '@/app/components/base/input'
+import Toast from '@/app/components/base/toast'
+import { useDeleteTriggerSubscription } from '@/service/use-triggers'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { usePluginSubscriptionStore } from './store'
+
+type Props = {
+  onClose: (deleted: boolean) => void
+  isShow: boolean
+  currentId: string
+  currentName: string
+  workflowsInUse: number
+}
+
+const tPrefix = 'pluginTrigger.subscription.list.item.actions.deleteConfirm'
+
+export const DeleteConfirm = (props: Props) => {
+  const { onClose, isShow, currentId, currentName, workflowsInUse } = props
+  const { refresh } = usePluginSubscriptionStore()
+  const { mutate: deleteSubscription, isPending: isDeleting } = useDeleteTriggerSubscription()
+  const { t } = useTranslation()
+  const [inputName, setInputName] = useState('')
+
+  const onConfirm = () => {
+    if (workflowsInUse > 0 && inputName !== currentName) {
+      Toast.notify({
+        type: 'error',
+        message: t(`${tPrefix}.confirmInputWarning`),
+        // temporarily
+        className: 'z-[10000001]',
+      })
+      return
+    }
+    deleteSubscription(currentId, {
+      onSuccess: () => {
+        Toast.notify({
+          type: 'success',
+          message: t(`${tPrefix}.success`, { name: currentName }),
+          className: 'z-[10000001]',
+        })
+        refresh?.()
+        onClose(true)
+      },
+      onError: (error: any) => {
+        Toast.notify({
+          type: 'error',
+          message: error?.message || t(`${tPrefix}.error`, { name: currentName }),
+          className: 'z-[10000001]',
+        })
+      },
+    })
+  }
+  return <Confirm
+    title={t(`${tPrefix}.title`, { name: currentName })}
+    confirmText={t(`${tPrefix}.confirm`)}
+    content={workflowsInUse > 0 ? <>
+      {t(`${tPrefix}.contentWithApps`, { count: workflowsInUse })}
+      <div className='system-sm-medium mb-2 mt-6 text-text-secondary'>{t(`${tPrefix}.confirmInputTip`, { name: currentName })}</div>
+      <Input
+        value={inputName}
+        onChange={e => setInputName(e.target.value)}
+        placeholder={t(`${tPrefix}.confirmInputPlaceholder`, { name: currentName })}
+      />
+    </>
+      : t(`${tPrefix}.content`)}
+    isShow={isShow}
+    isLoading={isDeleting}
+    isDisabled={isDeleting}
+    onConfirm={onConfirm}
+    onCancel={() => onClose(false)}
+    maskClosable={false}
+  />
+}
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx
@@ -0,0 +1,51 @@
+import { withErrorBoundary } from '@/app/components/base/error-boundary'
+import Loading from '@/app/components/base/loading'
+import { SubscriptionListView } from './list-view'
+import { SubscriptionSelectorView } from './selector-view'
+import { useSubscriptionList } from './use-subscription-list'
+
+export enum SubscriptionListMode {
+  PANEL = 'panel',
+  SELECTOR = 'selector',
+}
+
+export type SimpleSubscription = {
+  id: string,
+  name: string
+}
+
+type SubscriptionListProps = {
+  mode?: SubscriptionListMode
+  selectedId?: string
+  onSelect?: (v: SimpleSubscription, callback?: () => void) => void
+}
+
+export { SubscriptionSelectorEntry } from './selector-entry'
+
+export const SubscriptionList = withErrorBoundary(({
+  mode = SubscriptionListMode.PANEL,
+  selectedId,
+  onSelect,
+}: SubscriptionListProps) => {
+  const { isLoading, refetch } = useSubscriptionList()
+  if (isLoading) {
+    return (
+      <div className='flex items-center justify-center py-4'>
+        <Loading />
+      </div>
+    )
+  }
+
+  if (mode === SubscriptionListMode.SELECTOR) {
+    return (
+      <SubscriptionSelectorView
+        selectedId={selectedId}
+        onSelect={(v) => {
+          onSelect?.(v, refetch)
+        }}
+      />
+    )
+  }
+
+  return <SubscriptionListView />
+})
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
@@ -0,0 +1,50 @@
+'use client'
+import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { CreateButtonType, CreateSubscriptionButton } from './create'
+import SubscriptionCard from './subscription-card'
+import { useSubscriptionList } from './use-subscription-list'
+
+type SubscriptionListViewProps = {
+  showTopBorder?: boolean
+}
+
+export const SubscriptionListView: React.FC<SubscriptionListViewProps> = ({
+  showTopBorder = false,
+}) => {
+  const { t } = useTranslation()
+  const { subscriptions } = useSubscriptionList()
+
+  const subscriptionCount = subscriptions?.length || 0
+
+  return (
+    <div className={cn('border-divider-subtle px-4 py-2', showTopBorder && 'border-t')}>
+      <div className='relative flex items-center justify-between'>
+        {subscriptionCount > 0 && (
+          <div className='flex h-8 shrink-0 items-center gap-1'>
+            <span className='system-sm-semibold-uppercase text-text-secondary'>
+              {t('pluginTrigger.subscription.listNum', { num: subscriptionCount })}
+            </span>
+            <Tooltip popupContent={t('pluginTrigger.subscription.list.tip')} />
+          </div>
+        )}
+        <CreateSubscriptionButton
+          buttonType={subscriptionCount > 0 ? CreateButtonType.ICON_BUTTON : CreateButtonType.FULL_BUTTON}
+        />
+      </div>
+
+      {subscriptionCount > 0 && (
+        <div className='flex flex-col gap-1'>
+          {subscriptions?.map(subscription => (
+            <SubscriptionCard
+              key={subscription.id}
+              data={subscription}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
@@ -0,0 +1,193 @@
+'use client'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+  RiCheckboxCircleFill,
+  RiErrorWarningFill,
+  RiFileCopyLine,
+} from '@remixicon/react'
+import cn from '@/utils/classnames'
+import Toast from '@/app/components/base/toast'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import type { TriggerLogEntity } from '@/app/components/workflow/block-selector/types'
+import dayjs from 'dayjs'
+
+type Props = {
+  logs: TriggerLogEntity[]
+  className?: string
+}
+
+enum LogTypeEnum {
+  REQUEST = 'request',
+  RESPONSE = 'response',
+}
+
+const LogViewer = ({ logs, className }: Props) => {
+  const { t } = useTranslation()
+  const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set())
+
+  const toggleLogExpansion = (logId: string) => {
+    const newExpanded = new Set(expandedLogs)
+    if (newExpanded.has(logId))
+      newExpanded.delete(logId)
+    else
+      newExpanded.add(logId)
+
+    setExpandedLogs(newExpanded)
+  }
+
+  const parseRequestData = (data: any) => {
+    if (typeof data === 'string' && data.startsWith('payload=')) {
+      try {
+        const urlDecoded = decodeURIComponent(data.substring(8)) // Remove 'payload='
+        return JSON.parse(urlDecoded)
+      }
+      catch {
+        return data
+      }
+    }
+
+    if (typeof data === 'object')
+      return data
+
+    try {
+      return JSON.parse(data)
+    }
+    catch {
+      return data
+    }
+  }
+
+  const renderJsonContent = (originalData: any, title: LogTypeEnum) => {
+    const parsedData = title === LogTypeEnum.REQUEST ? { headers: originalData.headers, data: parseRequestData(originalData.data) } : originalData
+    const isJsonObject = typeof parsedData === 'object'
+
+    if (isJsonObject) {
+      return (
+        <CodeEditor
+          readOnly
+          title={<div className="system-xs-semibold-uppercase text-text-secondary">{title}</div>}
+          language={CodeLanguage.json}
+          value={parsedData}
+          isJSONStringifyBeauty
+          nodeId=""
+        />
+      )
+    }
+
+    return (
+      <div className='rounded-md bg-components-input-bg-normal'>
+        <div className='flex items-center justify-between px-2 py-1'>
+          <div className='system-xs-semibold-uppercase text-text-secondary'>
+            {title}
+          </div>
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(String(parsedData))
+              Toast.notify({
+                type: 'success',
+                message: t('common.actionMsg.copySuccessfully'),
+              })
+            }}
+            className='rounded-md p-0.5 hover:bg-components-panel-border'
+          >
+            <RiFileCopyLine className='h-4 w-4 text-text-tertiary' />
+          </button>
+        </div>
+        <div className='px-2 pb-2 pt-1'>
+          <pre className='code-xs-regular whitespace-pre-wrap break-all text-text-secondary'>
+            {String(parsedData)}
+          </pre>
+        </div>
+      </div>
+    )
+  }
+
+  if (!logs || logs.length === 0)
+    return null
+
+  return (
+    <div className={cn('flex flex-col gap-1', className)}>
+      {logs.map((log, index) => {
+        const logId = log.id || index.toString()
+        const isExpanded = expandedLogs.has(logId)
+        const isSuccess = log.response.status_code === 200
+        const isError = log.response.status_code >= 400
+
+        return (
+          <div
+            key={logId}
+            className={cn(
+              'relative overflow-hidden rounded-lg border bg-components-panel-on-panel-item-bg shadow-sm hover:bg-components-panel-on-panel-item-bg-hover',
+              isError && 'border-state-destructive-border',
+              !isError && isExpanded && 'border-components-panel-border',
+              !isError && !isExpanded && 'border-components-panel-border-subtle',
+            )}
+          >
+            {isError && (
+              <div className='pointer-events-none absolute left-0 top-0 h-7 w-[179px]'>
+                <svg xmlns="http://www.w3.org/2000/svg" width="179" height="28" viewBox="0 0 179 28" fill="none" className='h-full w-full'>
+                  <g filter="url(#filter0_f_error_glow)">
+                    <circle cx="27" cy="14" r="32" fill="#F04438" fillOpacity="0.25" />
+                  </g>
+                  <defs>
+                    <filter id="filter0_f_error_glow" x="-125" y="-138" width="304" height="304" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                      <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                      <feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur" />
+                    </filter>
+                  </defs>
+                </svg>
+              </div>
+            )}
+
+            <button
+              onClick={() => toggleLogExpansion(logId)}
+              className={cn(
+                'flex w-full items-center justify-between px-2 py-1.5 text-left',
+                isExpanded ? 'pb-1 pt-2' : 'min-h-7',
+              )}
+            >
+              <div className='flex items-center gap-0'>
+                {isExpanded ? (
+                  <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
+                ) : (
+                  <RiArrowRightSLine className='h-4 w-4 text-text-tertiary' />
+                )}
+                <div className='system-xs-semibold-uppercase text-text-secondary'>
+                  {t(`pluginTrigger.modal.manual.logs.${LogTypeEnum.REQUEST}`)} #{index + 1}
+                </div>
+              </div>
+
+              <div className='flex items-center gap-1'>
+                <div className='system-xs-regular text-text-tertiary'>
+                  {dayjs(log.created_at).format('HH:mm:ss')}
+                </div>
+                <div className='h-3.5 w-3.5'>
+                  {isSuccess ? (
+                    <RiCheckboxCircleFill className='h-full w-full text-text-success' />
+                  ) : (
+                    <RiErrorWarningFill className='h-full w-full text-text-destructive' />
+                  )}
+                </div>
+              </div>
+            </button>
+
+            {isExpanded && (
+              <div className='flex flex-col gap-1 px-1 pb-1'>
+                {renderJsonContent(log.request, LogTypeEnum.REQUEST)}
+                {renderJsonContent(log.response, LogTypeEnum.RESPONSE)}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default LogViewer
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
@@ -0,0 +1,126 @@
+'use client'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
+import { SubscriptionList, SubscriptionListMode } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
+import cn from '@/utils/classnames'
+import { RiArrowDownSLine, RiWebhookLine } from '@remixicon/react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSubscriptionList } from './use-subscription-list'
+
+type SubscriptionTriggerButtonProps = {
+  selectedId?: string
+  onClick?: () => void
+  isOpen?: boolean
+  className?: string
+}
+
+const SubscriptionTriggerButton: React.FC<SubscriptionTriggerButtonProps> = ({
+  selectedId,
+  onClick,
+  isOpen = false,
+  className,
+}) => {
+  const { t } = useTranslation()
+  const { subscriptions } = useSubscriptionList()
+
+  const statusConfig = useMemo(() => {
+    if (!selectedId) {
+      if (isOpen) {
+        return {
+          label: t('pluginTrigger.subscription.selectPlaceholder'),
+          color: 'yellow' as const,
+        }
+      }
+      return {
+        label: t('pluginTrigger.subscription.noSubscriptionSelected'),
+        color: 'red' as const,
+      }
+    }
+
+    if (subscriptions && subscriptions.length > 0) {
+      const selectedSubscription = subscriptions?.find(sub => sub.id === selectedId)
+
+      if (!selectedSubscription) {
+        return {
+          label: t('pluginTrigger.subscription.subscriptionRemoved'),
+          color: 'red' as const,
+        }
+      }
+
+      return {
+        label: selectedSubscription.name,
+        color: 'green' as const,
+      }
+    }
+
+    return {
+      label: t('pluginTrigger.subscription.noSubscriptionSelected'),
+      color: 'red' as const,
+    }
+  }, [selectedId, subscriptions, t, isOpen])
+
+  return (
+    <button
+      className={cn(
+        'flex h-8 items-center gap-1 rounded-lg px-2 transition-colors',
+        'hover:bg-state-base-hover-alt',
+        isOpen && 'bg-state-base-hover-alt',
+        className,
+      )}
+      onClick={onClick}
+    >
+      <RiWebhookLine className={cn('h-3.5 w-3.5 shrink-0 text-text-secondary', statusConfig.color === 'red' && 'text-components-button-destructive-secondary-text')} />
+      <span className={cn('system-xs-medium truncate text-components-button-ghost-text', statusConfig.color === 'red' && 'text-components-button-destructive-secondary-text')}>
+        {statusConfig.label}
+      </span>
+      <RiArrowDownSLine
+        className={cn(
+          'ml-auto h-4 w-4 shrink-0 text-text-quaternary transition-transform',
+          isOpen && 'rotate-180',
+          statusConfig.color === 'red' && 'text-components-button-destructive-secondary-text',
+        )}
+      />
+    </button>
+  )
+}
+
+export const SubscriptionSelectorEntry = ({ selectedId, onSelect }: {
+  selectedId?: string,
+  onSelect: (v: SimpleSubscription, callback?: () => void) => void
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return <PortalToFollowElem
+    placement='bottom-start'
+    offset={4}
+    open={isOpen}
+    onOpenChange={setIsOpen}
+  >
+    <PortalToFollowElemTrigger asChild>
+      <div>
+        <SubscriptionTriggerButton
+          selectedId={selectedId}
+          onClick={() => setIsOpen(!isOpen)}
+          isOpen={isOpen}
+        />
+      </div>
+    </PortalToFollowElemTrigger>
+    <PortalToFollowElemContent className='z-[11]'>
+      <div className='rounded-xl border border-components-panel-border bg-components-panel-bg shadow-lg'>
+        <SubscriptionList
+          mode={SubscriptionListMode.SELECTOR}
+          selectedId={selectedId}
+          onSelect={(...args) => {
+            onSelect(...args)
+            setIsOpen(false)
+          }}
+        />
+      </div>
+    </PortalToFollowElemContent>
+  </PortalToFollowElem>
+}
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
@@ -0,0 +1,90 @@
+'use client'
+import ActionButton from '@/app/components/base/action-button'
+import Tooltip from '@/app/components/base/tooltip'
+import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import cn from '@/utils/classnames'
+import { RiCheckLine, RiDeleteBinLine, RiWebhookLine } from '@remixicon/react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CreateButtonType, CreateSubscriptionButton } from './create'
+import { DeleteConfirm } from './delete-confirm'
+import { useSubscriptionList } from './use-subscription-list'
+
+type SubscriptionSelectorProps = {
+  selectedId?: string
+  onSelect?: ({ id, name }: { id: string, name: string }) => void
+}
+
+export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
+  selectedId,
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+  const { subscriptions } = useSubscriptionList()
+  const [deletedSubscription, setDeletedSubscription] = useState<TriggerSubscription | null>(null)
+  const subscriptionCount = subscriptions?.length || 0
+
+  return (
+    <div className='w-[320px] p-1'>
+      {subscriptionCount > 0 && <div className='ml-7 mr-1.5 flex h-8 items-center justify-between'>
+        <div className='flex shrink-0 items-center gap-1'>
+          <span className='system-sm-semibold-uppercase text-text-secondary'>
+            {t('pluginTrigger.subscription.listNum', { num: subscriptionCount })}
+          </span>
+          <Tooltip popupContent={t('pluginTrigger.subscription.list.tip')} />
+        </div>
+        <CreateSubscriptionButton
+          buttonType={CreateButtonType.ICON_BUTTON}
+          shape='circle'
+        />
+      </div>}
+      <div className='max-h-[320px] overflow-y-auto'>
+        {subscriptions?.map(subscription => (
+          <div
+            key={subscription.id}
+            className={cn(
+              'group flex w-full items-center justify-between rounded-lg p-1 text-left transition-colors',
+              'hover:bg-state-base-hover has-[.subscription-delete-btn:hover]:!bg-state-destructive-hover',
+              selectedId === subscription.id && 'bg-state-base-hover',
+            )}
+          >
+            <button
+              type='button'
+              className='flex flex-1 items-center text-left'
+              onClick={() => onSelect?.(subscription)}
+            >
+              <div className='flex items-center'>
+                {selectedId === subscription.id && (
+                  <RiCheckLine className='mr-2 h-4 w-4 shrink-0 text-text-accent' />
+                )}
+                <RiWebhookLine className={cn('mr-1.5 h-3.5 w-3.5 text-text-secondary', selectedId !== subscription.id && 'ml-6')} />
+                <span className='system-md-regular leading-6 text-text-secondary'>
+                  {subscription.name}
+                </span>
+              </div>
+            </button>
+            <ActionButton onClick={(e) => {
+              e.stopPropagation()
+              setDeletedSubscription(subscription)
+            }} className='subscription-delete-btn hidden shrink-0 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive group-hover:flex'>
+              <RiDeleteBinLine className='size-4' />
+            </ActionButton>
+          </div>
+        ))}
+      </div>
+      {deletedSubscription && (
+        <DeleteConfirm
+          onClose={(deleted) => {
+            if (deleted)
+              onSelect?.({ id: '', name: '' })
+            setDeletedSubscription(null)
+          }}
+          isShow={!!deletedSubscription}
+          currentId={deletedSubscription.id}
+          currentName={deletedSubscription.name}
+          workflowsInUse={deletedSubscription.workflows_in_use}
+        />
+      )}
+    </div>
+  )
+}
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/store.ts
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/store.ts
@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+
+type ShapeSubscription = {
+  refresh?: () => void
+  setRefresh: (refresh: () => void) => void
+}
+
+export const usePluginSubscriptionStore = create<ShapeSubscription>(set => ({
+  refresh: undefined,
+  setRefresh: (refresh: () => void) => set({ refresh }),
+}))
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
@@ -0,0 +1,85 @@
+'use client'
+import ActionButton from '@/app/components/base/action-button'
+import Tooltip from '@/app/components/base/tooltip'
+import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import cn from '@/utils/classnames'
+import {
+  RiDeleteBinLine,
+  RiWebhookLine,
+} from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import { useTranslation } from 'react-i18next'
+import { DeleteConfirm } from './delete-confirm'
+
+type Props = {
+  data: TriggerSubscription
+}
+
+const SubscriptionCard = ({ data }: Props) => {
+  const { t } = useTranslation()
+  const [isShowDeleteModal, {
+    setTrue: showDeleteModal,
+    setFalse: hideDeleteModal,
+  }] = useBoolean(false)
+
+  return (
+    <>
+      <div
+        className={cn(
+          'group relative cursor-pointer rounded-lg border-[0.5px] px-4 py-3 shadow-xs transition-all',
+          'border-components-panel-border-subtle bg-components-panel-on-panel-item-bg',
+          'hover:bg-components-panel-on-panel-item-bg-hover',
+          'has-[.subscription-delete-btn:hover]:!border-state-destructive-border has-[.subscription-delete-btn:hover]:!bg-state-destructive-hover',
+        )}
+      >
+        <div className='flex items-center justify-between'>
+          <div className='flex h-6 items-center gap-1'>
+            <RiWebhookLine className='h-4 w-4 text-text-secondary' />
+            <span className='system-md-semibold text-text-secondary'>
+              {data.name}
+            </span>
+          </div>
+
+          <ActionButton
+            onClick={showDeleteModal}
+            className='subscription-delete-btn hidden transition-colors hover:bg-state-destructive-hover hover:text-text-destructive group-hover:block'
+          >
+            <RiDeleteBinLine className='h-4 w-4' />
+          </ActionButton>
+        </div>
+
+        <div className='mt-1 flex items-center justify-between'>
+          <Tooltip
+            disabled={!data.endpoint}
+            popupContent={data.endpoint && (
+              <div className='max-w-[320px] break-all'>
+                {data.endpoint}
+              </div>
+            )}
+            position='left'
+          >
+            <div className='system-xs-regular flex-1 truncate text-text-tertiary'>
+              {data.endpoint}
+            </div>
+          </Tooltip>
+          <div className="mx-2 text-xs text-text-tertiary opacity-30">·</div>
+          <div className='system-xs-regular shrink-0 text-text-tertiary'>
+            {data.workflows_in_use > 0 ? t('pluginTrigger.subscription.list.item.usedByNum', { num: data.workflows_in_use }) : t('pluginTrigger.subscription.list.item.noUsed')}
+          </div>
+        </div>
+      </div>
+
+      {isShowDeleteModal && (
+        <DeleteConfirm
+          onClose={hideDeleteModal}
+          isShow={isShowDeleteModal}
+          currentId={data.id}
+          currentName={data.name}
+          workflowsInUse={data.workflows_in_use}
+        />
+      )}
+    </>
+  )
+}
+
+export default SubscriptionCard
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/use-subscription-list.ts
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/use-subscription-list.ts
@@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+import { useTriggerSubscriptions } from '@/service/use-triggers'
+import { usePluginStore } from '../store'
+import { usePluginSubscriptionStore } from './store'
+
+export const useSubscriptionList = () => {
+  const detail = usePluginStore(state => state.detail)
+  const { setRefresh } = usePluginSubscriptionStore()
+
+  const { data: subscriptions, isLoading, refetch } = useTriggerSubscriptions(detail?.provider || '')
+
+  useEffect(() => {
+    if (refetch)
+      setRefresh(refetch)
+  }, [refetch, setRefresh])
+
+  return {
+    detail,
+    subscriptions,
+    isLoading,
+    refetch,
+  }
+}
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -40,6 +40,7 @@ import {
  AuthCategory,
  PluginAuthInAgent,
 } from '@/app/components/plugins/plugin-auth'
+import { ReadmeEntrance } from '../../readme-panel/entrance'

 type Props = {
  disabled?: boolean
@@ -272,7 +273,10 @@ const ToolSelector: FC<Props> = ({
              {/* 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>
+                  <div className='system-sm-semibold flex h-6 items-center justify-between text-text-secondary'>
+                    {t('plugin.detailPanel.toolSelector.toolLabel')}
+                    <ReadmeEntrance pluginDetail={currentProvider as any} showShortTip className='pb-0' />
+                  </div>
                  <ToolPicker
                    placement='bottom'
                    offset={offset}
@@ -315,6 +319,7 @@ const ToolSelector: FC<Props> = ({
                        provider: currentProvider.name,
                        category: AuthCategory.tool,
                        providerType: currentProvider.type,
+                        detail: currentProvider as any,
                      }}
                      credentialId={value?.credential_id}
                      onAuthorizationItemClick={handleAuthorizationItemClick}
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
@@ -54,7 +54,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
  const getVarKindType = (type: FormTypeEnum) => {
    if (type === FormTypeEnum.file || type === FormTypeEnum.files)
      return VarKindType.variable
-    if (type === FormTypeEnum.select || type === FormTypeEnum.boolean || type === FormTypeEnum.textNumber || type === FormTypeEnum.array || type === FormTypeEnum.object)
+    if (type === FormTypeEnum.select || type === FormTypeEnum.checkbox || type === FormTypeEnum.textNumber || type === FormTypeEnum.array || type === FormTypeEnum.object)
      return VarKindType.constant
    if (type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput)
      return VarKindType.mixed
@@ -164,7 +164,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
    const isArray = type === FormTypeEnum.array
    const isShowJSONEditor = isObject || isArray
    const isFile = type === FormTypeEnum.file || type === FormTypeEnum.files
-    const isBoolean = type === FormTypeEnum.boolean
+    const isBoolean = type === FormTypeEnum.checkbox
    const isSelect = type === FormTypeEnum.select
    const isAppSelector = type === FormTypeEnum.appSelector
    const isModelSelector = type === FormTypeEnum.modelSelector
--- a/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
@@ -0,0 +1,157 @@
+'use client'
+import ActionButton from '@/app/components/base/action-button'
+import Divider from '@/app/components/base/divider'
+import Drawer from '@/app/components/base/drawer'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import Icon from '@/app/components/plugins/card/base/card-icon'
+import Description from '@/app/components/plugins/card/base/description'
+import OrgInfo from '@/app/components/plugins/card/base/org-info'
+import { triggerEventParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import type { TriggerProviderApiEntity } from '@/app/components/workflow/block-selector/types'
+import Field from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field'
+import cn from '@/utils/classnames'
+import {
+  RiArrowLeftLine,
+  RiCloseLine,
+} from '@remixicon/react'
+import type { TFunction } from 'i18next'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { TriggerEvent } from '@/app/components/plugins/types'
+
+type EventDetailDrawerProps = {
+  eventInfo: TriggerEvent
+  providerInfo: TriggerProviderApiEntity
+  onClose: () => void
+}
+
+const getType = (type: string, t: TFunction) => {
+  if (type === 'number-input')
+    return t('tools.setBuiltInTools.number')
+  if (type === 'text-input')
+    return t('tools.setBuiltInTools.string')
+  if (type === 'checkbox')
+    return 'boolean'
+  if (type === 'file')
+    return t('tools.setBuiltInTools.file')
+  return type
+}
+
+// Convert JSON Schema to StructuredOutput format
+const convertSchemaToField = (schema: any): any => {
+  const field: any = {
+    type: Array.isArray(schema.type) ? schema.type[0] : schema.type || 'string',
+  }
+
+  if (schema.description)
+    field.description = schema.description
+
+  if (schema.properties) {
+    field.properties = Object.entries(schema.properties).reduce((acc, [key, value]: [string, any]) => ({
+      ...acc,
+      [key]: convertSchemaToField(value),
+    }), {})
+  }
+
+  if (schema.required)
+    field.required = schema.required
+
+  if (schema.items)
+    field.items = convertSchemaToField(schema.items)
+
+  if (schema.enum)
+    field.enum = schema.enum
+
+  return field
+}
+
+export const EventDetailDrawer: FC<EventDetailDrawerProps> = (props) => {
+  const { eventInfo, providerInfo, onClose } = props
+  const language = useLanguage()
+  const { t } = useTranslation()
+  const parametersSchemas = triggerEventParametersToFormSchemas(eventInfo.parameters)
+
+  // Convert output_schema properties to array for direct rendering
+  const outputFields = eventInfo.output_schema?.properties
+    ? Object.entries(eventInfo.output_schema.properties).map(([name, schema]: [string, any]) => ({
+      name,
+      field: convertSchemaToField(schema),
+      required: eventInfo.output_schema.required?.includes(name) || false,
+    }))
+    : []
+
+  return (
+    <Drawer
+      isOpen
+      clickOutsideNotOpen={false}
+      onClose={onClose}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+    >
+      <div className='relative border-b border-divider-subtle p-4 pb-3'>
+        <div className='absolute right-3 top-3'>
+          <ActionButton onClick={onClose}>
+            <RiCloseLine className='h-4 w-4' />
+          </ActionButton>
+        </div>
+        <div
+          className='system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1 text-text-accent-secondary'
+          onClick={onClose}
+        >
+          <RiArrowLeftLine className='h-4 w-4' />
+          {t('plugin.detailPanel.operation.back')}
+        </div>
+        <div className='flex items-center gap-1'>
+          <Icon size='tiny' className='h-6 w-6' src={providerInfo.icon!} />
+          <OrgInfo
+            packageNameClassName='w-auto'
+            orgName={providerInfo.author}
+            packageName={providerInfo.name.split('/').pop() || ''}
+          />
+        </div>
+        <div className='system-md-semibold mt-1 text-text-primary'>{eventInfo?.identity?.label[language]}</div>
+        <Description className='mb-2 mt-3 h-auto' text={eventInfo.description[language]} descriptionLineRows={2}></Description>
+      </div>
+      <div className='flex h-full flex-col gap-2 overflow-y-auto px-4 pb-2 pt-4'>
+        <div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.setBuiltInTools.parameters')}</div>
+        {parametersSchemas.length > 0 ? (
+          parametersSchemas.map((item, index) => (
+            <div key={index} className='py-1'>
+              <div className='flex items-center gap-2'>
+                <div className='code-sm-semibold text-text-secondary'>{item.label[language]}</div>
+                <div className='system-xs-regular text-text-tertiary'>
+                  {getType(item.type, t)}
+                </div>
+                {item.required && (
+                  <div className='system-xs-medium text-text-warning-secondary'>{t('tools.setBuiltInTools.required')}</div>
+                )}
+              </div>
+              {item.description && (
+                <div className='system-xs-regular mt-0.5 text-text-tertiary'>
+                  {item.description?.[language]}
+                </div>
+              )}
+            </div>
+          ))
+        ) : <div className='system-xs-regular text-text-tertiary'>{t('pluginTrigger.events.item.noParameters')}</div>}
+        <Divider className='mb-2 mt-1 h-px' />
+        <div className='flex flex-col gap-2'>
+          <div className='system-sm-semibold-uppercase text-text-secondary'>{t('pluginTrigger.events.output')}</div>
+          <div className='relative left-[-7px]'>
+            {outputFields.map(item => (
+              <Field
+                key={item.name}
+                name={item.name}
+                payload={item.field}
+                required={item.required}
+                rootClassName='code-sm-semibold text-text-secondary'
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  )
+}
--- a/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx
@@ -0,0 +1,71 @@
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import type { TriggerEvent } from '@/app/components/plugins/types'
+import type { TriggerProviderApiEntity } from '@/app/components/workflow/block-selector/types'
+import { useTriggerProviderInfo } from '@/service/use-triggers'
+import cn from '@/utils/classnames'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { usePluginStore } from '../store'
+import { EventDetailDrawer } from './event-detail-drawer'
+
+type TriggerEventCardProps = {
+  eventInfo: TriggerEvent
+  providerInfo: TriggerProviderApiEntity
+}
+
+const TriggerEventCard = ({ eventInfo, providerInfo }: TriggerEventCardProps) => {
+  const { identity, description } = eventInfo
+  const language = useLanguage()
+  const [showDetail, setShowDetail] = useState(false)
+  const title = identity.label?.[language] ?? identity.label?.en_US ?? ''
+  const descriptionText = description?.[language] ?? description?.en_US ?? ''
+  return (
+    <>
+      <div
+        className={cn('bg-components-panel-item-bg cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover')}
+        onClick={() => setShowDetail(true)}
+      >
+        <div className='system-md-semibold pb-0.5 text-text-secondary'>{title}</div>
+        <div className='system-xs-regular line-clamp-2 text-text-tertiary' title={descriptionText}>{descriptionText}</div>
+      </div>
+      {showDetail && (
+        <EventDetailDrawer
+          eventInfo={eventInfo}
+          providerInfo={providerInfo}
+          onClose={() => setShowDetail(false)}
+        />
+      )}
+    </>
+  )
+}
+
+export const TriggerEventsList = () => {
+  const { t } = useTranslation()
+  const detail = usePluginStore(state => state.detail)
+
+  const { data: providerInfo } = useTriggerProviderInfo(detail?.provider || '')
+  const triggerEvents = providerInfo?.events || []
+
+  if (!providerInfo || !triggerEvents.length)
+    return null
+
+  return (
+    <div className='px-4 pb-4 pt-2'>
+      <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('pluginTrigger.events.actionNum', { num: triggerEvents.length, event: t(`pluginTrigger.events.${triggerEvents.length > 1 ? 'events' : 'event'}`) })}
+        </div>
+      </div>
+      <div className='flex flex-col gap-2'>
+        {
+          triggerEvents.map((triggerEvent: TriggerEvent) => (
+            <TriggerEventCard
+              key={`${detail?.plugin_id}${triggerEvent.identity?.name || ''}`}
+              eventInfo={triggerEvent}
+              providerInfo={providerInfo}
+            />))
+        }
+      </div>
+    </div>
+  )
+}