Feat: Display variables in the variable assignment node. #10427 (#11349)

### What problem does this PR solve?

Feat: Display variables in the variable assignment node. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/locales/en.ts

@@ -1852,6 +1852,19 @@ Important structured information may include: names, dates, locations, events, k
         asc: 'Ascending',
         desc: 'Descending',
       },
+      variableAssignerLogicalOperatorOptions: {
+        overwrite: 'Overwrite',
+        clear: 'Clear',
+        set: 'Set',
+        '+=': 'Add',
+        '-=': 'Subtract',
+        '*=': 'Multiply',
+        '/=': 'Divide',
+        append: 'Append',
+        extend: 'Extend',
+        removeFirst: 'Remove first',
+        removeLast: 'Remove last',
+      },
     },
     llmTools: {
       bad_calculator: {

web/src/locales/zh.ts

@@ -1713,6 +1713,19 @@ Tokenizer 会根据所选方式将内容存储为对应的数据结构。`,
         asc: '升序',
         desc: '降序',
       },
+      variableAssignerLogicalOperatorOptions: {
+        overwrite: '覆盖',
+        clear: '清除',
+        set: '设置',
+        add: '加',
+        subtract: '减',
+        multiply: '乘',
+        divide: '除',
+        append: '追加',
+        extend: '扩展',
+        removeFirst: '移除第一个',
+        removeLast: '移除最后一个',
+      },
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/agent/canvas/node/variable-assigner-node.tsx

@@ -1,11 +1,31 @@
-import { IRagNode } from '@/interfaces/database/agent';
+import { NodeCollapsible } from '@/components/collapse';
+import { BaseNode } from '@/interfaces/database/agent';
 import { NodeProps } from '@xyflow/react';
 import { RagNode } from '.';
+import { VariableAssignerFormSchemaType } from '../../form/variable-assigner-form';
+import { useGetVariableLabelOrTypeByValue } from '../../hooks/use-get-begin-query';
+import { LabelCard } from './card';
+
+export function VariableAssignerNode({
+  ...props
+}: NodeProps<BaseNode<VariableAssignerFormSchemaType>>) {
+  const { data } = props;
+  const { getLabel } = useGetVariableLabelOrTypeByValue();
 
-export function VariableAssignerNode({ ...props }: NodeProps<IRagNode>) {
   return (
     <RagNode {...props}>
-      <section>select</section>
+      <NodeCollapsible items={data.form?.variables}>
+        {(x, idx) => (
+          <section key={idx} className="space-y-1">
+            <LabelCard key={idx} className="flex justify-between gap-2">
+              <span className="flex truncate min-w-0">
+                {getLabel(x.variable)}
+              </span>
+              <span className="border px-1 rounded-sm">{x.operator}</span>
+            </LabelCard>
+          </section>
+        )}
+      </NodeCollapsible>
     </RagNode>
   );
 }

web/src/pages/agent/constant/index.tsx

@@ -851,6 +851,13 @@ export enum VariableAssignerLogicalNumberOperator {
   Divide = '/=',
 }
 
+export const VariableAssignerLogicalNumberOperatorLabelMap = {
+  [VariableAssignerLogicalNumberOperator.Add]: 'add',
+  [VariableAssignerLogicalNumberOperator.Subtract]: 'subtract',
+  [VariableAssignerLogicalNumberOperator.Multiply]: 'multiply',
+  [VariableAssignerLogicalNumberOperator.Divide]: 'divide',
+};
+
 export enum VariableAssignerLogicalArrayOperator {
   Overwrite = VariableAssignerLogicalOperator.Overwrite,
   Clear = VariableAssignerLogicalOperator.Clear,

web/src/pages/agent/form/variable-assigner-form/use-build-logical-options.ts

@@ -1,26 +1,57 @@
 import { buildOptions } from '@/utils/form';
+import { camelCase } from 'lodash';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   JsonSchemaDataType,
   VariableAssignerLogicalArrayOperator,
   VariableAssignerLogicalNumberOperator,
+  VariableAssignerLogicalNumberOperatorLabelMap,
   VariableAssignerLogicalOperator,
 } from '../../constant';
 
 export function useBuildLogicalOptions() {
-  const buildLogicalOptions = useCallback((type: string) => {
-    if (
-      type?.toLowerCase().startsWith(JsonSchemaDataType.Array.toLowerCase())
-    ) {
-      return buildOptions(VariableAssignerLogicalArrayOperator);
-    }
+  const { t } = useTranslation();
 
-    if (type === JsonSchemaDataType.Number) {
-      return buildOptions(VariableAssignerLogicalNumberOperator);
-    }
+  const buildVariableAssignerLogicalOptions = useCallback(
+    (record: Record<string, any>) => {
+      return buildOptions(
+        record,
+        t,
+        'flow.variableAssignerLogicalOperatorOptions',
+        true,
+      );
+    },
+    [t],
+  );
 
-    return buildOptions(VariableAssignerLogicalOperator);
-  }, []);
+  const buildLogicalOptions = useCallback(
+    (type: string) => {
+      if (
+        type?.toLowerCase().startsWith(JsonSchemaDataType.Array.toLowerCase())
+      ) {
+        return buildVariableAssignerLogicalOptions(
+          VariableAssignerLogicalArrayOperator,
+        );
+      }
+
+      if (type === JsonSchemaDataType.Number) {
+        return Object.values(VariableAssignerLogicalNumberOperator).map(
+          (val) => ({
+            label: t(
+              `flow.variableAssignerLogicalOperatorOptions.${camelCase(VariableAssignerLogicalNumberOperatorLabelMap[val as keyof typeof VariableAssignerLogicalNumberOperatorLabelMap] || val)}`,
+            ),
+            value: val,
+          }),
+        );
+      }
+
+      return buildVariableAssignerLogicalOptions(
+        VariableAssignerLogicalOperator,
+      );
+    },
+    [buildVariableAssignerLogicalOptions, t],
+  );
 
   return {
     buildLogicalOptions,