Merge branch 'feat/trigger' of https://github.com/langgenius/dify into feat/trigger

web/app/components/plugins/readme-panel/index.tsx

@@ -2,7 +2,6 @@
 import ActionButton from '@/app/components/base/action-button'
 import Loading from '@/app/components/base/loading'
 import { Markdown } from '@/app/components/base/markdown'
-import Modal from '@/app/components/base/modal'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { usePluginReadme } from '@/service/use-plugins'
 import cn from '@/utils/classnames'
@@ -85,29 +84,36 @@ const ReadmePanel: FC = () => {
     </div>
   )
 
-  return showType === ReadmeShowType.drawer ? createPortal(
+  const portalContent = showType === ReadmeShowType.drawer
-    <div className='pointer-events-none fixed inset-0 z-[9997] flex justify-start'>
+    ? (
-      <div
+      <div className='pointer-events-none fixed inset-0 z-[9997] flex justify-start'>
-        className={cn(
+        <div
-          'pointer-events-auto mb-2 ml-2 mr-2 mt-16 w-[600px] max-w-[600px] justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl',
+          className={cn(
-        )}
+            'pointer-events-auto mb-2 ml-2 mr-2 mt-16 w-[600px] max-w-[600px] justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl',
-      >
+          )}
-        {children}
+        >
+          {children}
+        </div>
       </div>
-    </div>,
+    )
+    : (
+      <div className='pointer-events-none fixed inset-0 z-[9997] flex items-center justify-center p-2'>
+        <div
+          className={cn(
+            'pointer-events-auto relative h-[calc(100vh-16px)] w-full max-w-[800px] rounded-2xl bg-components-panel-bg p-0 shadow-xl',
+          )}
+          onClick={(event) => {
+            event.stopPropagation()
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    )
+
+  return createPortal(
+    portalContent,
     document.body,
-  ) : (
-    <Modal
-      isShow={!!detail}
-      onClose={onClose}
-      overlayOpacity={true}
-      className='h-[calc(100vh-16px)] max-w-[800px] p-0'
-      wrapperClassName='!z-[102]'
-      containerClassName='p-2'
-      clickOutsideNotClose={true}
-    >
-      {children}
-    </Modal>
   )
 }
 

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -1,5 +1,17 @@
 import { useStore as useAppStore } from '@/app/components/app/store'
+import { Stop } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import Tooltip from '@/app/components/base/tooltip'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import {
+  AuthCategory,
+  AuthorizedInDataSourceNode,
+  AuthorizedInNode,
+  PluginAuth,
+  PluginAuthInDataSourceNode,
+} from '@/app/components/plugins/plugin-auth'
+import { usePluginStore } from '@/app/components/plugins/plugin-detail-panel/store'
+import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
+import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import {
   WorkflowHistoryEvent,
@@ -11,7 +23,14 @@ import {
   useToolIcon,
   useWorkflowHistory,
 } from '@/app/components/workflow/hooks'
+import { useHooksStore } from '@/app/components/workflow/hooks-store'
+import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
+import DataSourceBeforeRunForm from '@/app/components/workflow/nodes/data-source/before-run-form'
+import type { CustomRunFormProps } from '@/app/components/workflow/nodes/data-source/types'
+import { DataSourceClassification } from '@/app/components/workflow/nodes/data-source/types'
+import { useLogs } from '@/app/components/workflow/run/hooks'
+import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel'
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum, type Node, NodeRunningStatus } from '@/app/components/workflow/types'
 import {
@@ -20,16 +39,18 @@ import {
   hasRetryNode,
   isSupportCustomRunForm,
 } from '@/app/components/workflow/utils'
+import { useModalContext } from '@/context/modal-context'
+import { useAllBuiltInTools } from '@/service/use-tools'
 import { useAllTriggerPlugins } from '@/service/use-triggers'
+import { FlowType } from '@/types/common'
+import { canFindTool } from '@/utils'
 import cn from '@/utils/classnames'
 import {
   RiCloseLine,
   RiPlayLargeLine,
 } from '@remixicon/react'
-import type {
+import { debounce } from 'lodash-es'
-  FC,
+import type { FC, ReactNode } from 'react'
-  ReactNode,
-} from 'react'
 import React, {
   cloneElement,
   memo,
@@ -42,44 +63,18 @@ import React, {
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import { useResizePanel } from '../../hooks/use-resize-panel'
+import BeforeRunForm from '../before-run-form'
+import PanelWrap from '../before-run-form/panel-wrap'
 import ErrorHandleOnPanel from '../error-handle/error-handle-on-panel'
 import HelpLink from '../help-link'
 import NextStep from '../next-step'
 import PanelOperator from '../panel-operator'
 import RetryOnPanel from '../retry/retry-on-panel'
-import {
+import { DescriptionInput, TitleInput } from '../title-description-input'
-  DescriptionInput,
-  TitleInput,
-} from '../title-description-input'
-import Tab, { TabType } from './tab'
-// import AuthMethodSelector from '@/app/components/workflow/nodes/trigger-plugin/components/auth-method-selector'
-import { Stop } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import {
-  AuthCategory,
-  AuthorizedInDataSourceNode,
-  AuthorizedInNode,
-  PluginAuth,
-  PluginAuthInDataSourceNode,
-} from '@/app/components/plugins/plugin-auth'
-import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
-import { useHooksStore } from '@/app/components/workflow/hooks-store'
-import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
-import DataSourceBeforeRunForm from '@/app/components/workflow/nodes/data-source/before-run-form'
-import type { CustomRunFormProps } from '@/app/components/workflow/nodes/data-source/types'
-import { DataSourceClassification } from '@/app/components/workflow/nodes/data-source/types'
-import { useLogs } from '@/app/components/workflow/run/hooks'
-import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel'
-import { useModalContext } from '@/context/modal-context'
-import { FlowType } from '@/types/common'
-import { canFindTool } from '@/utils'
-import { debounce } from 'lodash-es'
-import BeforeRunForm from '../before-run-form'
-import PanelWrap from '../before-run-form/panel-wrap'
 import LastRun from './last-run'
 import useLastRun from './last-run/use-last-run'
+import Tab, { TabType } from './tab'
 import { TriggerSubscription } from './trigger-subscription'
-import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
-import { useAllBuiltInTools } from '@/service/use-tools'
 
 const getCustomRunForm = (params: CustomRunFormProps): React.JSX.Element => {
   const nodeType = params.payload.type
@@ -103,6 +98,7 @@ const BasePanel: FC<BasePanelProps> = ({
   children,
 }) => {
   const { t } = useTranslation()
+  const language = useLanguage()
   const { showMessageLogModal } = useAppStore(useShallow(state => ({
     showMessageLogModal: state.showMessageLogModal,
   })))
@@ -224,6 +220,7 @@ const BasePanel: FC<BasePanelProps> = ({
   useEffect(() => {
     hasClickRunning.current = false
   }, [id])
+
   const {
     nodesMap,
   } = useNodesMetaData()
@@ -278,12 +275,7 @@ const BasePanel: FC<BasePanelProps> = ({
   }, [pendingSingleRun, id, handleSingleRun, handleStop, setPendingSingleRun])
 
   const logParams = useLogs()
-  const passedLogParams = (() => {
+  const passedLogParams = useMemo(() => [BlockEnum.Tool, BlockEnum.Agent, BlockEnum.Iteration, BlockEnum.Loop].includes(data.type) ? logParams : {}, [data.type, logParams])
-    if ([BlockEnum.Tool, BlockEnum.Agent, BlockEnum.Iteration, BlockEnum.Loop].includes(data.type))
-      return logParams
-
-    return {}
-  })()
 
   const storeBuildInTools = useStore(s => s.buildInTools)
   const { data: buildInTools } = useAllBuiltInTools()
@@ -295,16 +287,32 @@ const BasePanel: FC<BasePanelProps> = ({
     return data.type === BlockEnum.Tool && currToolCollection?.allow_delete
   }, [data.type, currToolCollection?.allow_delete])
 
-  const { data: triggerProviders = [] } = useAllTriggerPlugins()
+  // only fetch trigger plugins when the node is a trigger plugin
-  const currentTriggerProvider = useMemo(() => {
+  const { data: triggerPlugins = [] } = useAllTriggerPlugins(data.type === BlockEnum.TriggerPlugin)
-    if (!data.provider_id || !data.provider_name)
+  const currentTriggerPlugin = useMemo(() => {
+    if (data.type !== BlockEnum.TriggerPlugin || !data.plugin_id || !triggerPlugins?.length)
       return undefined
-    return triggerProviders.find(p => p.name === data.provider_id) // todo: confirm
+    return triggerPlugins?.find(p => p.plugin_id === data.plugin_id)
-  }, [data.type, data.provider_id, data.provider_name, triggerProviders])
+  }, [data.type, data.plugin_id, triggerPlugins])
+  const { setDetail } = usePluginStore()
 
-  const showTriggerConfig = useMemo(() => {
+  useEffect(() => {
-    return data.type === BlockEnum.TriggerPlugin && currentTriggerProvider
+    if (currentTriggerPlugin) {
-  }, [data.type, currentTriggerProvider])
+      setDetail({
+        name: currentTriggerPlugin.label[language],
+        plugin_id: currentTriggerPlugin.plugin_id || '',
+        provider: currentTriggerPlugin.name,
+        declaration: {
+          tool: undefined,
+          // @ts-expect-error just remain the necessary fields
+          trigger: {
+            subscription_schema: currentTriggerPlugin.subscription_schema || [],
+            subscription_constructor: currentTriggerPlugin.subscription_constructor,
+          },
+        },
+      })
+    }
+  }, [currentTriggerPlugin, setDetail])
 
   const dataSourceList = useStore(s => s.dataSourceList)
 
@@ -352,14 +360,14 @@ const BasePanel: FC<BasePanelProps> = ({
         pluginDetail = currentDataSource
         break
       case BlockEnum.TriggerPlugin:
-        pluginDetail = currentTriggerProvider
+        pluginDetail = currentTriggerPlugin
         break
 
       default:
         break
     }
     return !pluginDetail ? null : <ReadmeEntrance pluginDetail={pluginDetail as any} className='mt-auto' />
-  }, [data.type, currToolCollection, currentDataSource, currentTriggerProvider])
+  }, [data.type, currToolCollection, currentDataSource, currentTriggerPlugin])
 
   if (logParams.showSpecialResultPanel) {
     return (
@@ -558,9 +566,9 @@ const BasePanel: FC<BasePanelProps> = ({
             )
           }
           {
-            showTriggerConfig && (
+            currentTriggerPlugin && (
               <TriggerSubscription
-                data={data}
+                subscriptionIdSelected={data.subscription_id}
                 onSubscriptionChange={handleSubscriptionChange}
               >
                 <Tab
@@ -571,7 +579,7 @@ const BasePanel: FC<BasePanelProps> = ({
             )
           }
           {
-            !needsToolAuth && !currentDataSource && !showTriggerConfig && (
+            !needsToolAuth && !currentDataSource && !currentTriggerPlugin && (
               <div className='flex items-center justify-between pl-4 pr-3'>
                 <Tab
                   value={tabType}

web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx

@@ -1,52 +1,25 @@
-import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
 import { CreateButtonType, CreateSubscriptionButton } from '@/app/components/plugins/plugin-detail-panel/subscription-list/create'
 import { SubscriptionSelectorEntry } from '@/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry'
-import { usePluginStore } from '@/app/components/plugins/plugin-detail-panel/store'
 import { useSubscriptionList } from '@/app/components/plugins/plugin-detail-panel/subscription-list/use-subscription-list'
-import useConfig from '@/app/components/workflow/nodes/trigger-plugin/use-config'
-import type { Node } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 import type { FC } from 'react'
-import { useEffect } from 'react'
 
 type TriggerSubscriptionProps = {
-  data: Node['data']
+  subscriptionIdSelected?: string
   onSubscriptionChange: (v: SimpleSubscription, callback?: () => void) => void
   children: React.ReactNode
 }
 
-export const TriggerSubscription: FC<TriggerSubscriptionProps> = ({ data, onSubscriptionChange, children }) => {
+export const TriggerSubscription: FC<TriggerSubscriptionProps> = ({ subscriptionIdSelected, onSubscriptionChange, children }) => {
-  // @ts-expect-error TODO: fix this
-  const { currentProvider } = useConfig(data.id as string, data)
-  const { setDetail } = usePluginStore()
-  const language = useLanguage()
   const { subscriptions } = useSubscriptionList()
   const subscriptionCount = subscriptions?.length || 0
 
-  useEffect(() => {
-    if (currentProvider) {
-      setDetail({
-        name: currentProvider.label[language],
-        plugin_id: currentProvider.plugin_id || '',
-        provider: currentProvider.name,
-        declaration: {
-          tool: undefined,
-          // @ts-expect-error just remain the necessary fields
-          trigger: {
-            subscription_schema: currentProvider.subscription_schema || [],
-            subscription_constructor: currentProvider.subscription_constructor,
-          },
-        },
-      })
-    }
-  }, [currentProvider, setDetail])
-
   return <div className={cn('px-4', subscriptionCount > 0 && 'flex items-center justify-between pr-3')}>
     {!subscriptionCount && <CreateSubscriptionButton buttonType={CreateButtonType.FULL_BUTTON} />}
     {children}
     {subscriptionCount > 0 && <SubscriptionSelectorEntry
-      selectedId={data.subscription_id}
+      selectedId={subscriptionIdSelected}
       onSelect={onSubscriptionChange}
     />}
   </div>

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

@@ -14,7 +14,7 @@ type Props = {
   onChange: (value: PluginTriggerVarInputs) => void
   onOpen?: (index: number) => void
   inPanel?: boolean
-  currentTrigger?: Event
+  currentEvent?: Event
   currentProvider?: TriggerWithProvider
   extraParams?: Record<string, any>
   disableVariableInsertion?: boolean
@@ -27,7 +27,7 @@ const TriggerForm: FC<Props> = ({
   value,
   onChange,
   inPanel,
-  currentTrigger,
+  currentEvent,
   currentProvider,
   extraParams,
   disableVariableInsertion = false,
@@ -44,7 +44,7 @@ const TriggerForm: FC<Props> = ({
             value={value}
             onChange={onChange}
             inPanel={inPanel}
-            currentTrigger={currentTrigger}
+            currentEvent={currentEvent}
             currentProvider={currentProvider}
             extraParams={extraParams}
             disableVariableInsertion={disableVariableInsertion}

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

@@ -22,7 +22,7 @@ type Props = {
   value: PluginTriggerVarInputs
   onChange: (value: PluginTriggerVarInputs) => void
   inPanel?: boolean
-  currentTrigger?: Event
+  currentEvent?: Event
   currentProvider?: TriggerWithProvider
   extraParams?: Record<string, any>
   disableVariableInsertion?: boolean
@@ -35,7 +35,7 @@ const TriggerFormItem: FC<Props> = ({
   value,
   onChange,
   inPanel,
-  currentTrigger,
+  currentEvent,
   currentProvider,
   extraParams,
   disableVariableInsertion = false,
@@ -91,7 +91,7 @@ const TriggerFormItem: FC<Props> = ({
         value={value}
         onChange={onChange}
         inPanel={inPanel}
-        currentTool={currentTrigger}
+        currentTool={currentEvent}
         currentProvider={currentProvider}
         providerType='trigger'
         extraParams={extraParams}

web/app/components/workflow/nodes/trigger-plugin/panel.tsx

@@ -22,7 +22,8 @@ const Panel: FC<NodePanelProps<PluginTriggerNodeType>> = ({
     outputSchema,
     hasObjectOutput,
     currentProvider,
-    currentTrigger,
+    currentEvent,
+    subscriptionSelected,
   } = useConfig(id, data)
   const disableVariableInsertion = data.type === BlockEnum.TriggerPlugin
 
@@ -36,7 +37,7 @@ const Panel: FC<NodePanelProps<PluginTriggerNodeType>> = ({
   return (
     <div className='mt-2'>
       {/* Dynamic Parameters Form - Only show when authenticated */}
-      {triggerParameterSchema.length > 0 && (
+      {triggerParameterSchema.length > 0 && subscriptionSelected && (
         <>
           <div className='px-4 pb-4'>
             <TriggerForm
@@ -46,7 +47,7 @@ const Panel: FC<NodePanelProps<PluginTriggerNodeType>> = ({
               value={triggerParameterValue}
               onChange={setTriggerParameterValue}
               currentProvider={currentProvider}
-              currentTrigger={currentTrigger}
+              currentEvent={currentEvent}
               disableVariableInsertion={disableVariableInsertion}
             />
           </div>

web/app/components/workflow/nodes/trigger-plugin/use-config.ts

@@ -86,6 +86,7 @@ const useConfig = (id: string, payload: PluginTriggerNodeType) => {
     event_name: event_name,
     config = {},
     event_parameters: rawEventParameters = {},
+    subscription_id,
   } = inputs
 
   const event_parameters = useMemo(
@@ -97,16 +98,6 @@ const useConfig = (id: string, payload: PluginTriggerNodeType) => {
     [config],
   )
 
-  // Construct provider for authentication check
-  const authProvider = useMemo(() => {
-    return provider_name || ''
-  }, [provider_id, provider_name])
-
-  const { data: subscriptions = [] } = useTriggerSubscriptions(
-    authProvider,
-    !!authProvider,
-  )
-
   const currentProvider = useMemo<TriggerWithProvider | undefined>(() => {
     return triggerPlugins.find(
       provider =>
@@ -116,6 +107,12 @@ const useConfig = (id: string, payload: PluginTriggerNodeType) => {
     )
   }, [triggerPlugins, provider_name, provider_id])
 
+  const { data: subscriptions = [] } = useTriggerSubscriptions(provider_id || '')
+
+  const subscriptionSelected = useMemo(() => {
+    return subscriptions?.find(s => s.id === subscription_id)
+  }, [subscriptions, subscription_id])
+
   const currentEvent = useMemo<Event | undefined>(() => {
     return currentProvider?.events.find(
       event => event.name === event_name,
@@ -221,7 +218,7 @@ const useConfig = (id: string, payload: PluginTriggerNodeType) => {
     readOnly,
     inputs,
     currentProvider,
-    currentTrigger: currentEvent,
+    currentEvent,
     triggerParameterSchema,
     triggerParameterValue,
     setTriggerParameterValue,
@@ -229,6 +226,7 @@ const useConfig = (id: string, payload: PluginTriggerNodeType) => {
     outputSchema,
     hasObjectOutput,
     subscriptions,
+    subscriptionSelected,
   }
 }