feat: insert var key ui

web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import produce from 'immer'
 import type { InputVar } from '../../../../types'
-import { InputVarType } from '../../../../types'
+import { BlockEnum, InputVarType } from '../../../../types'
 import CodeEditor from '../editor/code-editor'
 import { CodeLanguage } from '../../../code/types'
 import Select from '@/app/components/base/select'
@@ -11,6 +11,9 @@ import TextGenerationImageUploader from '@/app/components/base/image-uploader/te
 import { Resolution } from '@/types/app'
 import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import { useFeatures } from '@/app/components/base/features/hooks'
+import { VarBlockIcon } from '@/app/components/workflow/block-icon'
+import { Line3 } from '@/app/components/base/icons/src/public/common'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 
 type Props = {
   payload: InputVar
@@ -44,9 +47,35 @@ const FormItem: FC<Props> = ({
       onChange(newValues)
     }
   }, [value, onChange])
+  const nodeKey = (() => {
+    if (typeof payload.label === 'object') {
+      const { nodeType, nodeName, variable } = payload.label
+      return (
+        <div className='flex items-center'>
+          <div className='flex items-center'>
+            <div className='p-[1px]'>
+              <VarBlockIcon type={nodeType || BlockEnum.Start} />
+            </div>
+            <div className='mx-0.5 text-xs font-medium text-gray-700 max-w-[150px] truncate' title={nodeName}>
+              {nodeName}
+            </div>
+            <Line3 className='mr-0.5'></Line3>
+          </div>
+
+          <div className='flex items-center text-primary-600'>
+            <Variable02 className='w-3.5 h-3.5' />
+            <div className='ml-0.5 text-xs font-medium max-w-[150px] truncate' title={variable} >
+              {variable}
+            </div>
+          </div>
+        </div>
+      )
+    }
+    return ''
+  })()
   return (
     <div className={`${className}`}>
-      {type !== InputVarType.contexts && <div className='shrink-0 w-[96px] pr-1 h-8 leading-8 text-[13px] font-medium text-gray-700 truncate'>{payload.label}</div>}
+      {type !== InputVarType.contexts && <div className='h-8 leading-8 text-[13px] font-medium text-gray-700 truncate'>{typeof payload.label === 'object' ? nodeKey : payload.label}</div>}
       <div className='grow'>
         {
           type === InputVarType.textInput && (

web/app/components/workflow/nodes/llm/use-config.ts

@@ -282,11 +282,13 @@ const useConfig = (id: string, payload: LLMNodeType) => {
 
     const variables = uniqBy(valueSelectors, item => item.join('.')).map((item) => {
       const varInfo = getNodeInfoById(availableNodes, item[0])?.data
-      const variable = [...item]
-      variable[0] = varInfo?.title || availableNodes[0]?.data.title // default start node title
 
       return {
-        label: `${variable[0]}/${variable[variable.length - 1]}`,
+        label: {
+          nodeType: varInfo?.type,
+          nodeName: varInfo?.title || availableNodes[0]?.data.title, // default start node title
+          variable: item[item.length - 1],
+        },
         variable: `#${item.join('.')}#`,
         value_selector: item,
       }

web/app/components/workflow/types.ts

@@ -63,7 +63,11 @@ export type ValueSelector = string[] // [nodeId, key | obj key path]
 
 export type Variable = {
   variable: string
-  label?: string
+  label?: string | {
+    nodeType: BlockEnum
+    nodeName: string
+    variable: string
+  }
   value_selector: ValueSelector
   variable_type?: VarKindType
   value?: string
@@ -90,7 +94,11 @@ export enum InputVarType {
 
 export type InputVar = {
   type: InputVarType
-  label: string
+  label: string | {
+    nodeType: BlockEnum
+    nodeName: string
+    variable: string
+  }
   variable: string
   max_length?: number
   default?: string