add listening status for variable panel

web/app/components/app/workflow-log/detail.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import Run from '@/app/components/workflow/run'
+import { WorkflowContextProvider } from '@/app/components/workflow/context'
 import { useStore } from '@/app/components/app/store'
 
 type ILogDetail = {
@@ -20,10 +21,12 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose }) => {
         <RiCloseLine className='h-4 w-4 text-text-tertiary' />
       </span>
       <h1 className='system-xl-semibold shrink-0 px-4 py-1 text-text-primary'>{t('appLog.runDetail.workflowTitle')}</h1>
-      <Run
-        runDetailUrl={runID ? `/apps/${appDetail?.id}/workflow-runs/${runID}` : ''}
-        tracingListUrl={runID ? `/apps/${appDetail?.id}/workflow-runs/${runID}/node-executions` : ''}
-      />
+      <WorkflowContextProvider>
+        <Run
+          runDetailUrl={runID ? `/apps/${appDetail?.id}/workflow-runs/${runID}` : ''}
+          tracingListUrl={runID ? `/apps/${appDetail?.id}/workflow-runs/${runID}/node-executions` : ''}
+        />
+      </WorkflowContextProvider>
     </div>
   )
 }

web/app/components/workflow-app/hooks/use-workflow-run.ts

@@ -216,10 +216,12 @@ export const useWorkflowRun = () => {
     const {
       setWorkflowRunningData,
       setIsListening,
+      setShowVariableInspectPanel,
     } = workflowStore.getState()
 
     if (runMode === 'webhook') {
       setIsListening(true)
+      setShowVariableInspectPanel(true)
       setWorkflowRunningData({
         result: {
           status: WorkflowRunningStatus.Running,
@@ -479,11 +481,11 @@ export const useWorkflowRun = () => {
               },
               tracing: [],
             })
-            setIsListening(false)
+            clearListeningState()
             return
           }
 
-          setIsListening(false)
+          clearListeningState()
           handleStream(
             response,
             baseSseOptions.onData ?? noop,
@@ -531,7 +533,7 @@ export const useWorkflowRun = () => {
             },
             tracing: [],
           })
-          setIsListening(false)
+          clearListeningState()
         }
       }
 
@@ -575,7 +577,7 @@ export const useWorkflowRun = () => {
       abortControllerRef.current.abort()
 
     abortControllerRef.current = null
-    const { setWorkflowRunningData, setIsListening } = workflowStore.getState()
+    const { setWorkflowRunningData, setIsListening, setShowVariableInspectPanel } = workflowStore.getState()
     setWorkflowRunningData({
       result: {
         status: WorkflowRunningStatus.Stopped,
@@ -587,6 +589,7 @@ export const useWorkflowRun = () => {
       resultText: '',
     })
     setIsListening(false)
+    setShowVariableInspectPanel(true)
   }, [workflowStore])
 
   const handleRestoreFromPublishedWorkflow = useCallback((publishedWorkflow: VersionHistory) => {

web/app/components/workflow/variable-inspect/listening.tsx

@@ -0,0 +1,43 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiStopLargeLine } from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+export type ListeningProps = {
+  onStop: () => void
+  message?: string
+}
+
+const Listening: FC<ListeningProps> = ({
+  onStop,
+  message,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex h-full flex-col gap-4 rounded-xl bg-background-section p-8'>
+      <div className='flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] bg-util-colors-blue-blue-500 shadow-lg backdrop-blur-sm'>
+        <BlockIcon type={BlockEnum.TriggerWebhook} size="md" />
+      </div>
+      <div className='flex flex-col gap-1'>
+        <div className='system-sm-semibold text-text-secondary'>{t('workflow.debug.variableInspect.listening.title')}</div>
+        <div className='system-xs-regular text-text-tertiary'>{message ?? t('workflow.debug.variableInspect.listening.tip')}</div>
+      </div>
+      <div>
+        <Button
+          size='medium'
+          className='px-3'
+          variant='primary'
+          onClick={onStop}
+        >
+          <RiStopLargeLine className='mr-1 size-4' />
+          {t('workflow.debug.variableInspect.listening.stopButton')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default Listening

web/app/components/workflow/variable-inspect/panel.tsx

@@ -7,6 +7,7 @@ import {
 import { useStore } from '../store'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import Empty from './empty'
+import Listening from './listening'
 import Left from './left'
 import Right from './right'
 import ActionButton from '@/app/components/base/action-button'
@@ -16,6 +17,8 @@ import { VarInInspectType } from '@/types/workflow'
 import cn from '@/utils/classnames'
 import type { NodeProps } from '../types'
 import useMatchSchemaType from '../nodes/_base/components/variable/use-match-schema-type'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 
 export type currentVarType = {
   nodeId: string
@@ -32,6 +35,7 @@ const Panel: FC = () => {
   const bottomPanelWidth = useStore(s => s.bottomPanelWidth)
   const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
   const [showLeftPanel, setShowLeftPanel] = useState(true)
+  const isListening = useStore(s => s.isListening)
 
   const environmentVariables = useStore(s => s.environmentVariables)
   const currentFocusNodeId = useStore(s => s.currentFocusNodeId)
@@ -135,6 +139,11 @@ const Panel: FC = () => {
   }, [setCurrentFocusNodeId, setCurrentVarId])
 
   const { isLoading, schemaTypeDefinitions } = useMatchSchemaType()
+  const { eventEmitter } = useEventEmitterContextContext()
+
+  const handleStopListening = useCallback(() => {
+    eventEmitter?.emit({ type: EVENT_WORKFLOW_STOP } as any)
+  }, [eventEmitter])
 
   useEffect(() => {
     if (currentFocusNodeId && currentVarId && !isLoading) {
@@ -144,6 +153,24 @@ const Panel: FC = () => {
     }
   }, [currentFocusNodeId, currentVarId, nodesWithInspectVars, fetchInspectVarValue, schemaTypeDefinitions, isLoading])
 
+  if (isListening) {
+    return (
+      <div className={cn('flex h-full flex-col')}>
+        <div className='flex shrink-0 items-center justify-between pl-4 pr-2 pt-2'>
+          <div className='system-sm-semibold-uppercase text-text-primary'>{t('workflow.debug.variableInspect.title')}</div>
+          <ActionButton onClick={() => setShowVariableInspectPanel(false)}>
+            <RiCloseLine className='h-4 w-4' />
+          </ActionButton>
+        </div>
+        <div className='grow p-2'>
+          <Listening
+            onStop={handleStopListening}
+          />
+        </div>
+      </div>
+    )
+  }
+
   if (isEmpty) {
     return (
       <div className={cn('flex h-full flex-col')}>

web/i18n/en-US/workflow.ts

@@ -1193,6 +1193,11 @@ const translation = {
       view: 'View log',
       edited: 'Edited',
       reset: 'Reset to last run value',
+      listening: {
+        title: 'Listening for events from triggers...',
+        tip: 'Now you can create events in Slack and Gmail, and retrieve outputs from these events in the Variable Inspector.',
+        stopButton: 'Stop',
+      },
       trigger: {
         normal: 'Variable Inspect',
         running: 'Caching running status',