fix: display correct icon for trigger nodes in listening panel

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={BlockEnum.TriggerWebhook} size="md" />
-      </div>
+      <BlockIcon type={triggerType} toolIcon={toolIcon} size="md" className="!h-10 !w-10 !rounded-xl [&_svg]:!h-7 [&_svg]:!w-7" />
       <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>