fix: display correct icon for trigger nodes in listening panel

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

@@ -237,6 +237,8 @@ export const useWorkflowRun = () => {
       setWorkflowRunningData,
       setIsListening,
       setShowVariableInspectPanel,
+      setListeningTriggerType,
+      setListeningTriggerNodeId,
     } = workflowStore.getState()
 
     if (runMode === 'webhook') {
@@ -267,6 +269,8 @@ export const useWorkflowRun = () => {
     }
     else {
       setIsListening(false)
+      setListeningTriggerType(null)
+      setListeningTriggerNodeId(null)
       setWorkflowRunningData({
         result: {
           status: WorkflowRunningStatus.Running,
@@ -302,6 +306,8 @@ export const useWorkflowRun = () => {
     const clearListeningState = () => {
       const state = workflowStore.getState()
       state.setIsListening(false)
+      state.setListeningTriggerType(null)
+      state.setListeningTriggerNodeId(null)
     }
 
     const wrappedOnError = (params: any) => {
@@ -625,7 +631,7 @@ export const useWorkflowRun = () => {
       abortControllerRef.current.abort()
 
     abortControllerRef.current = null
-    const { setWorkflowRunningData, setIsListening, setShowVariableInspectPanel } = workflowStore.getState()
+    const { setWorkflowRunningData, setIsListening, setShowVariableInspectPanel, setListeningTriggerType, setListeningTriggerNodeId } = workflowStore.getState()
     setWorkflowRunningData({
       result: {
         status: WorkflowRunningStatus.Stopped,
@@ -637,6 +643,8 @@ export const useWorkflowRun = () => {
       resultText: '',
     })
     setIsListening(false)
+    setListeningTriggerType(null)
+    setListeningTriggerNodeId(null)
     setShowVariableInspectPanel(true)
   }, [workflowStore])
 

web/app/components/workflow-app/hooks/use-workflow-start-run.tsx

@@ -71,6 +71,8 @@ export const useWorkflowStartRun = () => {
       setShowDebugAndPreviewPanel,
       setShowInputsPanel,
       setShowEnvPanel,
+      setListeningTriggerType,
+      setListeningTriggerNodeId,
     } = workflowStore.getState()
 
     if (workflowRunningData?.result.status === WorkflowRunningStatus.Running)
@@ -92,6 +94,9 @@ export const useWorkflowStartRun = () => {
       return
     }
 
+    setListeningTriggerType(BlockEnum.TriggerSchedule)
+    setListeningTriggerNodeId(nodeId)
+
     await doSyncWorkflowDraft()
     handleRun(
       {},
@@ -115,6 +120,8 @@ export const useWorkflowStartRun = () => {
       setShowDebugAndPreviewPanel,
       setShowInputsPanel,
       setShowEnvPanel,
+      setListeningTriggerType,
+      setListeningTriggerNodeId,
     } = workflowStore.getState()
 
     if (workflowRunningData?.result.status === WorkflowRunningStatus.Running)
@@ -135,6 +142,8 @@ export const useWorkflowStartRun = () => {
       setShowDebugAndPreviewPanel(true)
 
     setShowInputsPanel(false)
+    setListeningTriggerType(BlockEnum.TriggerWebhook)
+    setListeningTriggerNodeId(nodeId)
 
     await doSyncWorkflowDraft()
     handleRun(
@@ -156,6 +165,8 @@ export const useWorkflowStartRun = () => {
       setShowDebugAndPreviewPanel,
       setShowInputsPanel,
       setShowEnvPanel,
+      setListeningTriggerType,
+      setListeningTriggerNodeId,
     } = workflowStore.getState()
 
     if (workflowRunningData?.result.status === WorkflowRunningStatus.Running)
@@ -176,6 +187,8 @@ export const useWorkflowStartRun = () => {
       setShowDebugAndPreviewPanel(true)
 
     setShowInputsPanel(false)
+    setListeningTriggerType(BlockEnum.TriggerPlugin)
+    setListeningTriggerNodeId(nodeId)
 
     await doSyncWorkflowDraft()
     handleRun(

web/app/components/workflow/store/workflow/workflow-slice.ts

@@ -1,6 +1,7 @@
 import type { StateCreator } from 'zustand'
 import type {
   Node,
+  TriggerNodeType,
   WorkflowRunningData,
 } from '@/app/components/workflow/types'
 import type { FileUploadConfigResponse } from '@/models/common'
@@ -15,6 +16,10 @@ export type WorkflowSliceShape = {
   setWorkflowRunningData: (workflowData: PreviewRunningData) => void
   isListening: boolean
   setIsListening: (listening: boolean) => void
+  listeningTriggerType: TriggerNodeType | null
+  setListeningTriggerType: (triggerType: TriggerNodeType | null) => void
+  listeningTriggerNodeId: string | null
+  setListeningTriggerNodeId: (nodeId: string | null) => void
   clipboardElements: Node[]
   setClipboardElements: (clipboardElements: Node[]) => void
   selection: null | { x1: number; y1: number; x2: number; y2: number }
@@ -40,6 +45,10 @@ export const createWorkflowSlice: StateCreator<WorkflowSliceShape> = set => ({
   setWorkflowRunningData: workflowRunningData => set(() => ({ workflowRunningData })),
   isListening: false,
   setIsListening: listening => set(() => ({ isListening: listening })),
+  listeningTriggerType: null,
+  setListeningTriggerType: triggerType => set(() => ({ listeningTriggerType: triggerType })),
+  listeningTriggerNodeId: null,
+  setListeningTriggerNodeId: nodeId => set(() => ({ listeningTriggerNodeId: nodeId })),
   clipboardElements: [],
   setClipboardElements: clipboardElements => set(() => ({ clipboardElements })),
   selection: null,

web/app/components/workflow/types.ts

@@ -507,6 +507,9 @@ export const TRIGGER_NODE_TYPES = [
   BlockEnum.TriggerPlugin,
 ] as const
 
+// Type-safe trigger node type extracted from TRIGGER_NODE_TYPES array
+export type TriggerNodeType = typeof TRIGGER_NODE_TYPES[number]
+
 export function isTriggerNode(nodeType: BlockEnum): boolean {
   return TRIGGER_NODE_TYPES.includes(nodeType as any)
 }

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

@@ -1,9 +1,12 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useStoreApi } from 'reactflow'
 import Button from '@/app/components/base/button'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import { useStore } from '../store'
+import { useToolIcon } from '@/app/components/workflow/hooks/use-tool-icon'
 
 export type ListeningProps = {
   onStop: () => void
@@ -15,12 +18,26 @@ const Listening: FC<ListeningProps> = ({
   message,
 }) => {
   const { t } = useTranslation()
+  const store = useStoreApi()
+
+  // Get the current trigger type and node ID from store
+  const listeningTriggerType = useStore(s => s.listeningTriggerType)
+  const listeningTriggerNodeId = useStore(s => s.listeningTriggerNodeId)
+  const triggerType = listeningTriggerType || BlockEnum.TriggerWebhook
+
+  // Get the trigger node data to extract icon information
+  const { getNodes } = store.getState()
+  const nodes = getNodes()
+  const triggerNode = listeningTriggerNodeId
+    ? nodes.find(node => node.id === listeningTriggerNodeId)
+    : undefined
+
+  // Use the useToolIcon hook to get the icon for plugin/datasource triggers
+  const toolIcon = useToolIcon(triggerNode?.data)
 
   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={triggerType} toolIcon={toolIcon} size="md" className="!h-10 !w-10 !rounded-xl [&_svg]:!h-7 [&_svg]:!w-7" />
-        <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>