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/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>
   );
 }