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/header/chat-variable-button.tsx

@@ -7,13 +7,16 @@ import cn from '@/utils/classnames'
 
 const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
   const { theme } = useTheme()
+  const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
   const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
+  const setShowGlobalVariablePanel = useStore(s => s.setShowGlobalVariablePanel)
   const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
 
   const handleClick = () => {
     setShowChatVariablePanel(true)
     setShowEnvPanel(false)
+    setShowGlobalVariablePanel(false)
     setShowDebugAndPreviewPanel(false)
   }
 
@@ -21,10 +24,11 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
     <Button
       className={cn(
         'p-2',
-        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        theme === 'dark' && showChatVariablePanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
       )}
       disabled={disabled}
       onClick={handleClick}
+      variant='ghost'
     >
       <BubbleX className='h-4 w-4 text-components-button-secondary-text' />
     </Button>

web/app/components/workflow/header/checklist.tsx

@@ -16,6 +16,7 @@ import {
   useChecklist,
   useNodesInteractions,
 } from '../hooks'
+import type { ChecklistItem } from '../hooks/use-checklist'
 import type {
   CommonEdgeType,
   CommonNodeType,
@@ -29,7 +30,9 @@ import {
 import {
   ChecklistSquare,
 } from '@/app/components/base/icons/src/vender/line/general'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import { Warning } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import { IconR } from '@/app/components/base/icons/src/vender/line/arrows'
+import type { BlockEnum } from '../types'
 
 type WorkflowChecklistProps = {
   disabled: boolean
@@ -44,6 +47,13 @@ const WorkflowChecklist = ({
   const needWarningNodes = useChecklist(nodes, edges)
   const { handleNodeSelect } = useNodesInteractions()
 
+  const handleChecklistItemClick = (item: ChecklistItem) => {
+    if (!item.canNavigate)
+      return
+    handleNodeSelect(item.id)
+    setOpen(false)
+  }
+
   return (
     <PortalToFollowElem
       placement='bottom-end'
@@ -93,38 +103,53 @@ const WorkflowChecklist = ({
               <RiCloseLine className='h-4 w-4 text-text-tertiary' />
             </div>
           </div>
-          <div className='py-2'>
+          <div className='pb-2'>
             {
               !!needWarningNodes.length && (
                 <>
-                  <div className='px-4 text-xs text-text-tertiary'>{t('workflow.panel.checklistTip')}</div>
+                  <div className='px-4 pt-1 text-xs text-text-tertiary'>{t('workflow.panel.checklistTip')}</div>
                   <div className='px-4 py-2'>
                     {
                       needWarningNodes.map(node => (
                         <div
                           key={node.id}
-                          className='mb-2 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0'
-                          onClick={() => {
-                            handleNodeSelect(node.id)
-                            setOpen(false)
-                          }}
+                          className={cn(
+                            'group mb-2 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0',
+                            node.canNavigate ? 'cursor-pointer' : 'cursor-default opacity-80',
+                          )}
+                          onClick={() => handleChecklistItemClick(node)}
                         >
                           <div className='flex h-9 items-center p-2 text-xs font-medium text-text-secondary'>
                             <BlockIcon
-                              type={node.type}
+                              type={node.type as BlockEnum}
                               className='mr-1.5'
                               toolIcon={node.toolIcon}
                             />
                             <span className='grow truncate'>
                               {node.title}
                             </span>
+                            {
+                              node.canNavigate && (
+                                <div className='flex h-4 w-[60px] shrink-0 items-center justify-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100'>
+                                  <span className='whitespace-nowrap text-xs font-medium leading-4 text-primary-600'>
+                                    {t('workflow.panel.goTo')}
+                                  </span>
+                                  <IconR className='h-3.5 w-3.5 text-primary-600' />
+                                </div>
+                              )
+                            }
                           </div>
-                          <div className='border-t-[0.5px] border-divider-regular'>
+                          <div
+                            className={cn(
+                              'rounded-b-lg border-t-[0.5px] border-divider-regular',
+                              (node.unConnected || node.errorMessage) && 'bg-gradient-to-r from-components-badge-bg-orange-soft to-transparent',
+                            )}
+                          >
                             {
                               node.unConnected && (
-                                <div className='px-3 py-2 last:rounded-b-lg'>
-                                  <div className='flex text-xs leading-[18px] text-text-tertiary'>
-                                    <AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' />
+                                <div className='px-3 py-1 first:pt-1.5 last:pb-1.5'>
+                                  <div className='flex text-xs leading-4 text-text-tertiary'>
+                                    <Warning className='mr-2 mt-[2px] h-3 w-3 text-[#F79009]' />
                                     {t('workflow.common.needConnectTip')}
                                   </div>
                                 </div>
@@ -132,9 +157,9 @@ const WorkflowChecklist = ({
                             }
                             {
                               node.errorMessage && (
-                                <div className='px-3 py-2 last:rounded-b-lg'>
-                                  <div className='flex text-xs leading-[18px] text-text-tertiary'>
-                                    <AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' />
+                                <div className='px-3 py-1 first:pt-1.5 last:pb-1.5'>
+                                  <div className='flex text-xs leading-4 text-text-tertiary'>
+                                    <Warning className='mr-2 mt-[2px] h-3 w-3 text-[#F79009]' />
                                     {node.errorMessage}
                                   </div>
                                 </div>

web/app/components/workflow/header/editing-title.tsx

@@ -11,9 +11,10 @@ const EditingTitle = () => {
   const draftUpdatedAt = useStore(state => state.draftUpdatedAt)
   const publishedAt = useStore(state => state.publishedAt)
   const isSyncingWorkflowDraft = useStore(s => s.isSyncingWorkflowDraft)
+  const maximizeCanvas = useStore(s => s.maximizeCanvas)
 
   return (
-    <div className='system-xs-regular flex h-[18px] items-center text-text-tertiary'>
+    <div className={`system-xs-regular flex h-[18px] min-w-[300px] items-center whitespace-nowrap text-text-tertiary ${maximizeCanvas ? 'ml-2' : ''}`}>
       {
         !!draftUpdatedAt && (
           <>

web/app/components/workflow/header/env-button.tsx

@@ -9,13 +9,16 @@ import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 const EnvButton = ({ disabled }: { disabled: boolean }) => {
   const { theme } = useTheme()
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
+  const showEnvPanel = useStore(s => s.showEnvPanel)
   const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
+  const setShowGlobalVariablePanel = useStore(s => s.setShowGlobalVariablePanel)
   const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
   const { closeAllInputFieldPanels } = useInputFieldPanel()
 
   const handleClick = () => {
     setShowEnvPanel(true)
     setShowChatVariablePanel(false)
+    setShowGlobalVariablePanel(false)
     setShowDebugAndPreviewPanel(false)
     closeAllInputFieldPanels()
   }
@@ -24,8 +27,9 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
     <Button
       className={cn(
         'p-2',
-        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        theme === 'dark' && showEnvPanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
       )}
+      variant='ghost'
       disabled={disabled}
       onClick={handleClick}
     >

web/app/components/workflow/header/global-variable-button.tsx

@@ -2,16 +2,37 @@ import { memo } from 'react'
 import Button from '@/app/components/base/button'
 import { GlobalVariable } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
+import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 
 const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
-  const setShowPanel = useStore(s => s.setShowGlobalVariablePanel)
+  const { theme } = useTheme()
+  const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
+  const setShowGlobalVariablePanel = useStore(s => s.setShowGlobalVariablePanel)
+  const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
+  const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
+  const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
+  const { closeAllInputFieldPanels } = useInputFieldPanel()
 
   const handleClick = () => {
-    setShowPanel(true)
+    setShowGlobalVariablePanel(true)
+    setShowEnvPanel(false)
+    setShowChatVariablePanel(false)
+    setShowDebugAndPreviewPanel(false)
+    closeAllInputFieldPanels()
   }
 
   return (
-    <Button className='p-2' disabled={disabled} onClick={handleClick}>
+    <Button
+      className={cn(
+        'p-2',
+        theme === 'dark' && showGlobalVariablePanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+      )}
+      disabled={disabled}
+      onClick={handleClick}
+      variant='ghost'
+    >
       <GlobalVariable className='h-4 w-4 text-components-button-secondary-text' />
     </Button>
   )

web/app/components/workflow/header/header-in-normal.tsx

@@ -19,11 +19,14 @@ import EditingTitle from './editing-title'
 import EnvButton from './env-button'
 import VersionHistoryButton from './version-history-button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
+import ScrollToSelectedNodeButton from './scroll-to-selected-node-button'
+import GlobalVariableButton from './global-variable-button'
 
 export type HeaderInNormalProps = {
   components?: {
     left?: React.ReactNode
     middle?: React.ReactNode
+    chatVariableTrigger?: React.ReactNode
   }
   runAndHistoryProps?: RunAndHistoryProps
 }
@@ -39,6 +42,7 @@ const HeaderInNormal = ({
   const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
   const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
+  const setShowGlobalVariablePanel = useStore(s => s.setShowGlobalVariablePanel)
   const nodes = useNodes<StartNodeType>()
   const selectedNode = nodes.find(node => node.data.selected)
   const { handleBackupDraft } = useWorkflowRun()
@@ -55,23 +59,31 @@ const HeaderInNormal = ({
     setShowDebugAndPreviewPanel(false)
     setShowVariableInspectPanel(false)
     setShowChatVariablePanel(false)
+    setShowGlobalVariablePanel(false)
     closeAllInputFieldPanels()
-  }, [workflowStore, handleBackupDraft, selectedNode, handleNodeSelect, setShowWorkflowVersionHistoryPanel, setShowEnvPanel, setShowDebugAndPreviewPanel, setShowVariableInspectPanel, setShowChatVariablePanel])
+  }, [workflowStore, handleBackupDraft, selectedNode, handleNodeSelect, setShowWorkflowVersionHistoryPanel, setShowEnvPanel, setShowDebugAndPreviewPanel, setShowVariableInspectPanel, setShowChatVariablePanel, setShowGlobalVariablePanel])
 
   return (
-    <>
+    <div className='flex w-full items-center justify-between'>
       <div>
         <EditingTitle />
       </div>
+      <div>
+        <ScrollToSelectedNodeButton />
+      </div>
       <div className='flex items-center gap-2'>
         {components?.left}
-        <EnvButton disabled={nodesReadOnly} />
         <Divider type='vertical' className='mx-auto h-3.5' />
         <RunAndHistory {...runAndHistoryProps} />
+        <div className='shrink-0 cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs backdrop-blur-[10px]'>
+          {components?.chatVariableTrigger}
+          <EnvButton disabled={nodesReadOnly} />
+          <GlobalVariableButton disabled={nodesReadOnly} />
+        </div>
         {components?.middle}
         <VersionHistoryButton onClick={onStartRestoring} />
       </div>
-    </>
+    </div>
   )
 }
 

web/app/components/workflow/header/run-mode.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useWorkflowRun, useWorkflowStartRun } from '@/app/components/workflow/hooks'
+import { useWorkflowRun, useWorkflowRunValidation, useWorkflowStartRun } from '@/app/components/workflow/hooks'
 import { useStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
@@ -9,6 +9,9 @@ import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
 import cn from '@/utils/classnames'
 import { RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import { useDynamicTestRunOptions } from '../hooks/use-dynamic-test-run-options'
+import TestRunMenu, { type TestRunMenuRef, type TriggerOption, TriggerType } from './test-run-menu'
+import { useToastContext } from '@/app/components/base/toast'
 
 type RunModeProps = {
   text?: string
@@ -18,16 +21,84 @@ const RunMode = ({
   text,
 }: RunModeProps) => {
   const { t } = useTranslation()
-  const { handleWorkflowStartRunInWorkflow } = useWorkflowStartRun()
+  const {
+    handleWorkflowStartRunInWorkflow,
+    handleWorkflowTriggerScheduleRunInWorkflow,
+    handleWorkflowTriggerWebhookRunInWorkflow,
+    handleWorkflowTriggerPluginRunInWorkflow,
+    handleWorkflowRunAllTriggersInWorkflow,
+  } = useWorkflowStartRun()
   const { handleStopRun } = useWorkflowRun()
+  const { validateBeforeRun, warningNodes } = useWorkflowRunValidation()
   const workflowRunningData = useStore(s => s.workflowRunningData)
+  const isListening = useStore(s => s.isListening)
 
-  const isRunning = workflowRunningData?.result.status === WorkflowRunningStatus.Running
+  const status = workflowRunningData?.result.status
+  const isRunning = status === WorkflowRunningStatus.Running || isListening
+
+  const dynamicOptions = useDynamicTestRunOptions()
+  const testRunMenuRef = useRef<TestRunMenuRef>(null)
+  const { notify } = useToastContext()
+
+  useEffect(() => {
+    // @ts-expect-error - Dynamic property for backward compatibility with keyboard shortcuts
+    window._toggleTestRunDropdown = () => {
+      testRunMenuRef.current?.toggle()
+    }
+    return () => {
+      // @ts-expect-error - Dynamic property cleanup
+      delete window._toggleTestRunDropdown
+    }
+  }, [])
 
   const handleStop = useCallback(() => {
     handleStopRun(workflowRunningData?.task_id || '')
   }, [handleStopRun, workflowRunningData?.task_id])
 
+  const handleTriggerSelect = useCallback((option: TriggerOption) => {
+    // Validate checklist before running any workflow
+    let isValid: boolean = true
+    warningNodes.forEach((node) => {
+      if (node.id === option.nodeId)
+        isValid = false
+    })
+    if (!isValid) {
+      notify({ type: 'error', message: t('workflow.panel.checklistTip') })
+      return
+    }
+
+    if (option.type === TriggerType.UserInput) {
+      handleWorkflowStartRunInWorkflow()
+    }
+    else if (option.type === TriggerType.Schedule) {
+      handleWorkflowTriggerScheduleRunInWorkflow(option.nodeId)
+    }
+    else if (option.type === TriggerType.Webhook) {
+      if (option.nodeId)
+        handleWorkflowTriggerWebhookRunInWorkflow({ nodeId: option.nodeId })
+    }
+    else if (option.type === TriggerType.Plugin) {
+      if (option.nodeId)
+        handleWorkflowTriggerPluginRunInWorkflow(option.nodeId)
+    }
+    else if (option.type === TriggerType.All) {
+      const targetNodeIds = option.relatedNodeIds?.filter(Boolean)
+      if (targetNodeIds && targetNodeIds.length > 0)
+        handleWorkflowRunAllTriggersInWorkflow(targetNodeIds)
+    }
+    else {
+      // Placeholder for trigger-specific execution logic for schedule, webhook, plugin types
+      console.log('TODO: Handle trigger execution for type:', option.type, 'nodeId:', option.nodeId)
+    }
+  }, [
+    validateBeforeRun,
+    handleWorkflowStartRunInWorkflow,
+    handleWorkflowTriggerScheduleRunInWorkflow,
+    handleWorkflowTriggerWebhookRunInWorkflow,
+    handleWorkflowTriggerPluginRunInWorkflow,
+    handleWorkflowRunAllTriggersInWorkflow,
+  ])
+
   const { eventEmitter } = useEventEmitterContextContext()
   eventEmitter?.useSubscription((v: any) => {
     if (v.type === EVENT_WORKFLOW_STOP)
@@ -36,46 +107,46 @@ const RunMode = ({
 
   return (
     <div className='flex items-center gap-x-px'>
-      <button
-        type='button'
-        className={cn(
-          'system-xs-medium flex h-7 items-center gap-x-1 px-1.5 text-text-accent hover:bg-state-accent-hover',
-          isRunning && 'cursor-not-allowed bg-state-accent-hover',
-          isRunning ? 'rounded-l-md' : 'rounded-md',
-        )}
-        onClick={() => {
-          handleWorkflowStartRunInWorkflow()
-        }}
-        disabled={isRunning}
-      >
-        {
-          isRunning
-            ? (
-              <>
-                <RiLoader2Line className='mr-1 size-4 animate-spin' />
-                {t('workflow.common.running')}
-              </>
-            )
-            : (
-              <>
+      {
+        isRunning
+          ? (
+            <button
+              type='button'
+              className={cn(
+                'system-xs-medium flex h-7 cursor-not-allowed items-center gap-x-1 rounded-l-md bg-state-accent-hover px-1.5 text-text-accent',
+              )}
+              disabled={true}
+            >
+              <RiLoader2Line className='mr-1 size-4 animate-spin' />
+              {isListening ? t('workflow.common.listening') : t('workflow.common.running')}
+            </button>
+          )
+          : (
+            <TestRunMenu
+              ref={testRunMenuRef}
+              options={dynamicOptions}
+              onSelect={handleTriggerSelect}
+            >
+              <div
+                className={cn(
+                  'system-xs-medium flex h-7 cursor-pointer items-center gap-x-1 rounded-md px-1.5 text-text-accent hover:bg-state-accent-hover',
+                )}
+                style={{ userSelect: 'none' }}
+              >
                 <RiPlayLargeLine className='mr-1 size-4' />
                 {text ?? t('workflow.common.run')}
-              </>
-            )
-        }
-        {
-          !isRunning && (
-            <div className='system-kbd flex items-center gap-x-0.5 text-text-tertiary'>
-              <div className='flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray'>
-                {getKeyboardKeyNameBySystem('alt')}
+                <div className='system-kbd flex items-center gap-x-0.5 text-text-tertiary'>
+                  <div className='flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray'>
+                    {getKeyboardKeyNameBySystem('alt')}
+                  </div>
+                  <div className='flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray'>
+                    R
+                  </div>
+                </div>
               </div>
-              <div className='flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray'>
-                R
-              </div>
-            </div>
+            </TestRunMenu>
           )
-        }
-      </button>
+      }
       {
         isRunning && (
           <button

web/app/components/workflow/header/scroll-to-selected-node-button.tsx

@@ -0,0 +1,34 @@
+import type { FC } from 'react'
+import { useCallback } from 'react'
+import { useNodes } from 'reactflow'
+import { useTranslation } from 'react-i18next'
+import type { CommonNodeType } from '../types'
+import { scrollToWorkflowNode } from '../utils/node-navigation'
+import cn from '@/utils/classnames'
+
+const ScrollToSelectedNodeButton: FC = () => {
+  const { t } = useTranslation()
+  const nodes = useNodes<CommonNodeType>()
+  const selectedNode = nodes.find(node => node.data.selected)
+
+  const handleScrollToSelectedNode = useCallback(() => {
+    if (!selectedNode) return
+    scrollToWorkflowNode(selectedNode.id)
+  }, [selectedNode])
+
+  if (!selectedNode)
+    return null
+
+  return (
+    <div
+      className={cn(
+        'system-xs-medium flex h-6 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-3 text-text-tertiary shadow-lg backdrop-blur-sm transition-colors duration-200 hover:text-text-accent',
+      )}
+      onClick={handleScrollToSelectedNode}
+    >
+      {t('workflow.panel.scrollToSelectedNode')}
+    </div>
+  )
+}
+
+export default ScrollToSelectedNodeButton

web/app/components/workflow/header/test-run-menu.tsx

@@ -0,0 +1,251 @@
+import {
+  type MouseEvent,
+  type MouseEventHandler,
+  type ReactElement,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import ShortcutsName from '../shortcuts-name'
+
+export enum TriggerType {
+  UserInput = 'user_input',
+  Schedule = 'schedule',
+  Webhook = 'webhook',
+  Plugin = 'plugin',
+  All = 'all',
+}
+
+export type TriggerOption = {
+  id: string
+  type: TriggerType
+  name: string
+  icon: React.ReactNode
+  nodeId?: string
+  relatedNodeIds?: string[]
+  enabled: boolean
+}
+
+export type TestRunOptions = {
+  userInput?: TriggerOption
+  triggers: TriggerOption[]
+  runAll?: TriggerOption
+}
+
+type TestRunMenuProps = {
+  options: TestRunOptions
+  onSelect: (option: TriggerOption) => void
+  children: React.ReactNode
+}
+
+export type TestRunMenuRef = {
+  toggle: () => void
+}
+
+type ShortcutMapping = {
+  option: TriggerOption
+  shortcutKey: string
+}
+
+const buildShortcutMappings = (options: TestRunOptions): ShortcutMapping[] => {
+  const mappings: ShortcutMapping[] = []
+
+  if (options.userInput && options.userInput.enabled !== false)
+    mappings.push({ option: options.userInput, shortcutKey: '~' })
+
+  let numericShortcut = 0
+
+  if (options.runAll && options.runAll.enabled !== false)
+    mappings.push({ option: options.runAll, shortcutKey: String(numericShortcut++) })
+
+  options.triggers.forEach((trigger) => {
+    if (trigger.enabled !== false)
+      mappings.push({ option: trigger, shortcutKey: String(numericShortcut++) })
+  })
+
+  return mappings
+}
+
+const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
+  options,
+  onSelect,
+  children,
+}, ref) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const shortcutMappings = useMemo(() => buildShortcutMappings(options), [options])
+  const shortcutKeyById = useMemo(() => {
+    const map = new Map<string, string>()
+    shortcutMappings.forEach(({ option, shortcutKey }) => {
+      map.set(option.id, shortcutKey)
+    })
+    return map
+  }, [shortcutMappings])
+
+  const handleSelect = useCallback((option: TriggerOption) => {
+    onSelect(option)
+    setOpen(false)
+  }, [onSelect])
+
+  const enabledOptions = useMemo(() => {
+    const flattened: TriggerOption[] = []
+
+    if (options.userInput)
+      flattened.push(options.userInput)
+    if (options.runAll)
+      flattened.push(options.runAll)
+    flattened.push(...options.triggers)
+
+    return flattened.filter(option => option.enabled !== false)
+  }, [options])
+
+  const hasSingleEnabledOption = enabledOptions.length === 1
+  const soleEnabledOption = hasSingleEnabledOption ? enabledOptions[0] : undefined
+
+  const runSoleOption = useCallback(() => {
+    if (soleEnabledOption)
+      handleSelect(soleEnabledOption)
+  }, [handleSelect, soleEnabledOption])
+
+  useImperativeHandle(ref, () => ({
+    toggle: () => {
+      if (hasSingleEnabledOption) {
+        runSoleOption()
+        return
+      }
+
+      setOpen(prev => !prev)
+    },
+  }), [hasSingleEnabledOption, runSoleOption])
+
+  useEffect(() => {
+    if (!open)
+      return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || event.repeat || event.altKey || event.ctrlKey || event.metaKey)
+        return
+
+      const normalizedKey = event.key === '`' ? '~' : event.key
+      const mapping = shortcutMappings.find(({ shortcutKey }) => shortcutKey === normalizedKey)
+
+      if (mapping) {
+        event.preventDefault()
+        handleSelect(mapping.option)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [handleSelect, open, shortcutMappings])
+
+  const renderOption = (option: TriggerOption) => {
+    const shortcutKey = shortcutKeyById.get(option.id)
+
+    return (
+      <div
+        key={option.id}
+        className='system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'
+        onClick={() => handleSelect(option)}
+      >
+        <div className='flex min-w-0 flex-1 items-center'>
+          <div className='flex h-6 w-6 shrink-0 items-center justify-center'>
+            {option.icon}
+          </div>
+          <span className='ml-2 truncate'>{option.name}</span>
+        </div>
+        {shortcutKey && (
+          <ShortcutsName keys={[shortcutKey]} className="ml-2" textColor="secondary" />
+        )}
+      </div>
+    )
+  }
+
+  const hasUserInput = !!options.userInput && options.userInput.enabled !== false
+  const hasTriggers = options.triggers.some(trigger => trigger.enabled !== false)
+  const hasRunAll = !!options.runAll && options.runAll.enabled !== false
+
+  if (hasSingleEnabledOption && soleEnabledOption) {
+    const handleRunClick = (event?: MouseEvent<HTMLElement>) => {
+      if (event?.defaultPrevented)
+        return
+
+      runSoleOption()
+    }
+
+    if (isValidElement(children)) {
+      const childElement = children as ReactElement<{ onClick?: MouseEventHandler<HTMLElement> }>
+      const originalOnClick = childElement.props?.onClick
+
+      return cloneElement(childElement, {
+        onClick: (event: MouseEvent<HTMLElement>) => {
+          if (typeof originalOnClick === 'function')
+            originalOnClick(event)
+
+          if (event?.defaultPrevented)
+            return
+
+          runSoleOption()
+        },
+      })
+    }
+
+    return (
+      <span onClick={handleRunClick}>
+        {children}
+      </span>
+    )
+  }
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={{ mainAxis: 8, crossAxis: -4 }}
+    >
+      <PortalToFollowElemTrigger asChild onClick={() => setOpen(!open)}>
+        <div style={{ userSelect: 'none' }}>
+          {children}
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[12]'>
+        <div className='w-[284px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg'>
+          <div className='mb-2 px-3 pt-2 text-sm font-medium text-text-primary'>
+            {t('workflow.common.chooseStartNodeToRun')}
+          </div>
+          <div>
+            {hasUserInput && renderOption(options.userInput!)}
+
+            {(hasTriggers || hasRunAll) && hasUserInput && (
+              <div className='mx-3 my-1 h-px bg-divider-subtle' />
+            )}
+
+            {hasRunAll && renderOption(options.runAll!)}
+
+            {hasTriggers && options.triggers
+              .filter(trigger => trigger.enabled !== false)
+              .map(trigger => renderOption(trigger))}
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+})
+
+TestRunMenu.displayName = 'TestRunMenu'
+
+export default TestRunMenu