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>

web/app/components/workflow/nodes/_base/node.tsx

@@ -16,23 +16,18 @@ import {
   RiLoader2Line,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import type { NodeProps } from '../../types'
+import type { NodeProps } from '@/app/components/workflow/types'
 import {
   BlockEnum,
   NodeRunningStatus,
-} from '../../types'
-import {
-  useNodesReadOnly,
-  useToolIcon,
-} from '../../hooks'
-import {
-  hasErrorHandleNode,
-  hasRetryNode,
-} from '../../utils'
-import { useNodeIterationInteractions } from '../iteration/use-interactions'
-import { useNodeLoopInteractions } from '../loop/use-interactions'
-import type { IterationNodeType } from '../iteration/types'
-import CopyID from '../tool/components/copy-id'
+  isTriggerNode,
+} from '@/app/components/workflow/types'
+import { useNodesReadOnly, useToolIcon } from '@/app/components/workflow/hooks'
+import { hasErrorHandleNode, hasRetryNode } from '@/app/components/workflow/utils'
+import { useNodeIterationInteractions } from '@/app/components/workflow/nodes/iteration/use-interactions'
+import { useNodeLoopInteractions } from '@/app/components/workflow/nodes/loop/use-interactions'
+import type { IterationNodeType } from '@/app/components/workflow/nodes/iteration/types'
+import CopyID from '@/app/components/workflow/nodes/tool/components/copy-id'
 import {
   NodeSourceHandle,
   NodeTargetHandle,
@@ -42,11 +37,12 @@ import NodeControl from './components/node-control'
 import ErrorHandleOnNode from './components/error-handle/error-handle-on-node'
 import RetryOnNode from './components/retry/retry-on-node'
 import AddVariablePopupWithPosition from './components/add-variable-popup-with-position'
+import EntryNodeContainer, { StartNodeTypeEnum } from './components/entry-node-container'
 import cn from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import Tooltip from '@/app/components/base/tooltip'
-import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
-import { ToolTypeEnum } from '../../block-selector/types'
+import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
+import { ToolTypeEnum } from '@/app/components/workflow/block-selector/types'
 
 type NodeChildProps = {
   id: string
@@ -67,6 +63,7 @@ const BaseNode: FC<BaseNodeProps> = ({
   const { t } = useTranslation()
   const nodeRef = useRef<HTMLDivElement>(null)
   const { nodesReadOnly } = useNodesReadOnly()
+
   const { handleNodeIterationChildSizeChange } = useNodeIterationInteractions()
   const { handleNodeLoopChildSizeChange } = useNodeLoopInteractions()
   const toolIcon = useToolIcon(data)
@@ -141,13 +138,13 @@ const BaseNode: FC<BaseNodeProps> = ({
     return null
   }, [data._loopIndex, data._runningStatus, t])
 
-  return (
+  const nodeContent = (
     <div
       className={cn(
         'relative flex rounded-2xl border',
         showSelectedBorder ? 'border-components-option-card-option-selected-border' : 'border-transparent',
         data._waitingRun && 'opacity-70',
-        data._dimmed && 'opacity-30',
+        data._pluginInstallLocked && 'cursor-not-allowed',
       )}
       ref={nodeRef}
       style={{
@@ -155,6 +152,17 @@ const BaseNode: FC<BaseNodeProps> = ({
         height: (data.type === BlockEnum.Iteration || data.type === BlockEnum.Loop) ? data.height : 'auto',
       }}
     >
+      {(data._dimmed || data._pluginInstallLocked) && (
+        <div
+          className={cn(
+            'absolute inset-0 rounded-2xl transition-opacity',
+            data._pluginInstallLocked
+              ? 'pointer-events-auto z-30 bg-workflow-block-parma-bg opacity-80 backdrop-blur-[2px]'
+              : 'pointer-events-none z-20 bg-workflow-block-parma-bg opacity-50',
+          )}
+          data-testid='workflow-node-install-overlay'
+        />
+      )}
       {
         data.type === BlockEnum.DataSource && (
           <div className='absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]'>
@@ -297,13 +305,13 @@ const BaseNode: FC<BaseNodeProps> = ({
         </div>
         {
           data.type !== BlockEnum.Iteration && data.type !== BlockEnum.Loop && (
-            cloneElement(children, { id, data })
+            cloneElement(children, { id, data } as any)
           )
         }
         {
           (data.type === BlockEnum.Iteration || data.type === BlockEnum.Loop) && (
             <div className='grow pb-1 pl-1 pr-1'>
-              {cloneElement(children, { id, data })}
+              {cloneElement(children, { id, data } as any)}
             </div>
           )
         }
@@ -338,6 +346,17 @@ const BaseNode: FC<BaseNodeProps> = ({
       </div>
     </div>
   )
+
+  const isStartNode = data.type === BlockEnum.Start
+  const isEntryNode = isTriggerNode(data.type as any) || isStartNode
+
+  return isEntryNode ? (
+    <EntryNodeContainer
+      nodeType={isStartNode ? StartNodeTypeEnum.Start : StartNodeTypeEnum.Trigger}
+    >
+      {nodeContent}
+    </EntryNodeContainer>
+  ) : nodeContent
 }
 
 export default memo(BaseNode)