feat: add output variables display to webhook trigger node (#26478)

Co-authored-by: Claude <noreply@anthropic.com>

web/app/components/workflow/nodes/trigger-webhook/panel.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { HttpMethod, WebhookTriggerNodeType } from './types'
@@ -7,8 +7,10 @@ import useConfig from './use-config'
 import ParameterTable from './components/parameter-table'
 import HeaderTable from './components/header-table'
 import ParagraphInput from './components/paragraph-input'
+import { OutputVariablesContent } from './utils/render-output-vars'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
+import OutputVars from '@/app/components/workflow/nodes/_base/components/output-vars'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import InputWithCopy from '@/app/components/base/input-with-copy'
 import { InputNumber } from '@/app/components/base/input-number'
@@ -42,6 +44,7 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
 }) => {
   const { t } = useTranslation()
   const [debugUrlCopied, setDebugUrlCopied] = React.useState(false)
+  const [outputVarsCollapsed, setOutputVarsCollapsed] = useState(false)
   const {
     readOnly,
     inputs,
@@ -214,6 +217,17 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
           </div>
         </Field>
       </div>
+
+      <Split />
+
+      <div className=''>
+        <OutputVars
+          collapsed={outputVarsCollapsed}
+          onCollapse={setOutputVarsCollapsed}
+        >
+          <OutputVariablesContent variables={inputs.variables} />
+        </OutputVars>
+      </div>
     </div>
   )
 }

web/app/components/workflow/nodes/trigger-webhook/utils/render-output-vars.tsx

@@ -0,0 +1,62 @@
+import type { FC } from 'react'
+import React from 'react'
+import type { Variable } from '@/app/components/workflow/types'
+
+type OutputVariablesContentProps = {
+  variables?: Variable[]
+}
+
+const getLabelPrefix = (label: string): string => {
+  const prefixMap: Record<string, string> = {
+    param: 'query_params',
+    header: 'header_params',
+    body: 'req_body_params',
+  }
+  return prefixMap[label] || label
+}
+
+type VarItemProps = {
+  prefix: string
+  name: string
+  type: string
+}
+
+const VarItem: FC<VarItemProps> = ({ prefix, name, type }) => {
+  return (
+    <div className='py-1'>
+      <div className='flex items-center leading-[18px]'>
+        <span className='code-sm-regular text-text-tertiary'>{prefix}.</span>
+        <span className='code-sm-semibold text-text-secondary'>{name}</span>
+        <span className='system-xs-regular ml-2 text-text-tertiary'>{type}</span>
+      </div>
+    </div>
+  )
+}
+
+export const OutputVariablesContent: FC<OutputVariablesContentProps> = ({ variables = [] }) => {
+  if (!variables || variables.length === 0) {
+    return (
+      <div className="system-sm-regular py-2 text-text-tertiary">
+        No output variables
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {variables.map((variable, index) => {
+        const label = typeof variable.label === 'string' ? variable.label : ''
+        const varName = typeof variable.variable === 'string' ? variable.variable : ''
+
+        return (
+          <VarItem
+            key={`${label}-${varName}-${index}`}
+            prefix={getLabelPrefix(label)}
+            name={varName}
+            type={variable.value_type || 'string'}
+          />
+        )
+      })}
+    </div>
+  )
+}