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>
2025-11-12 17:59:37 +08:00
parent ca7794305b
commit b76e17b25d
785 changed files with 41186 additions and 3725 deletions
--- a/web/app/components/workflow/nodes/trigger-webhook/utils/render-output-vars.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/utils/render-output-vars.tsx
@@ -0,0 +1,75 @@
+import type { FC } from 'react'
+import React from 'react'
+import type { Variable } from '@/app/components/workflow/types'
+
+type OutputVariablesContentProps = {
+  variables?: Variable[]
+}
+
+// Define the display order for variable labels to match the table order in the UI
+const LABEL_ORDER = { raw: 0, param: 1, header: 2, body: 3 } as const
+
+const getLabelPrefix = (label: string): string => {
+  const prefixMap: Record<string, string> = {
+    raw: 'payload',
+    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>
+    )
+  }
+
+  // Sort variables by label to match the table display order: param → header → body
+  // Unknown labels are placed at the end (order value 999)
+  const sortedVariables = [...variables].sort((a, b) => {
+    const labelA = typeof a.label === 'string' ? a.label : ''
+    const labelB = typeof b.label === 'string' ? b.label : ''
+    return (LABEL_ORDER[labelA as keyof typeof LABEL_ORDER] || 999)
+           - (LABEL_ORDER[labelB as keyof typeof LABEL_ORDER] || 999)
+  })
+
+  return (
+    <div>
+      {sortedVariables.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>
+  )
+}