Feat: Display the selected variables in the variable aggregation node. #10427 (#11113)

### What problem does this PR solve?
Feat: Display the selected variables in the variable aggregation node.
#10427

### Type of change


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

web/src/pages/agent/canvas/node/data-operations-node.tsx

@@ -1,11 +1,22 @@
-import { IRagNode } from '@/interfaces/database/agent';
+import { BaseNode } from '@/interfaces/database/agent';
 import { NodeProps } from '@xyflow/react';
+import { camelCase } from 'lodash';
+import { useTranslation } from 'react-i18next';
 import { RagNode } from '.';
+import { DataOperationsFormSchemaType } from '../../form/data-operations-form';
+import { LabelCard } from './card';
+
+export function DataOperationsNode({
+  ...props
+}: NodeProps<BaseNode<DataOperationsFormSchemaType>>) {
+  const { data } = props;
+  const { t } = useTranslation();
 
-export function DataOperationsNode({ ...props }: NodeProps<IRagNode>) {
   return (
     <RagNode {...props}>
-      <section>select</section>
+      <LabelCard>
+        {t(`flow.operationsOptions.${camelCase(data.form?.operations)}`)}
+      </LabelCard>
     </RagNode>
   );
 }

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

@@ -1,11 +1,36 @@
-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 { VariableAggregatorFormSchemaType } from '../../form/variable-aggregator-form/schema';
+import { useGetVariableLabelOrTypeByValue } from '../../hooks/use-get-begin-query';
+import { LabelCard } from './card';
+
+export function VariableAggregatorNode({
+  ...props
+}: NodeProps<BaseNode<VariableAggregatorFormSchemaType>>) {
+  const { data } = props;
+  const { getLabel } = useGetVariableLabelOrTypeByValue();
 
-export function VariableAggregatorNode({ ...props }: NodeProps<IRagNode>) {
   return (
     <RagNode {...props}>
-      <section>VariableAggregatorNode</section>
+      <NodeCollapsible items={data.form?.groups}>
+        {(x, idx) => (
+          <section key={idx} className="space-y-1">
+            <div className="flex justify-between items-center gap-2">
+              <span className="flex-1 min-w-0 truncate"> {x.group_name}</span>
+              <span className="text-text-secondary">{x.type}</span>
+            </div>
+            <div className="space-y-1">
+              {x.variables.map((y, index) => (
+                <LabelCard key={index} className="truncate">
+                  {getLabel(y.value)}
+                </LabelCard>
+              ))}
+            </div>
+          </section>
+        )}
+      </NodeCollapsible>
     </RagNode>
   );
 }

web/src/pages/agent/hooks/use-build-structured-output.ts

@@ -153,3 +153,24 @@ export function useFindAgentStructuredOutputTypeByValue() {
 
   return findAgentStructuredOutputTypeByValue;
 }
+
+export function useFindAgentStructuredOutputLabelByValue() {
+  const { getNode } = useGraphStore((state) => state);
+
+  const findAgentStructuredOutputLabel = useCallback(
+    (value?: string) => {
+      if (value) {
+        const operatorName = getNode(getNodeId(value ?? ''))?.data.name;
+
+        if (operatorName) {
+          return operatorName + ' / ' + value?.split('@').at(1);
+        }
+      }
+
+      return '';
+    },
+    [getNode],
+  );
+
+  return findAgentStructuredOutputLabel;
+}

web/src/pages/agent/hooks/use-get-begin-query.tsx

@@ -20,7 +20,10 @@ import { buildBeginInputListFromObject } from '../form/begin-form/utils';
 import { BeginQuery } from '../interface';
 import OperatorIcon from '../operator-icon';
 import useGraphStore from '../store';
-import { useFindAgentStructuredOutputTypeByValue } from './use-build-structured-output';
+import {
+  useFindAgentStructuredOutputLabelByValue,
+  useFindAgentStructuredOutputTypeByValue,
+} from './use-build-structured-output';
 
 export function useSelectBeginNodeDataInputs() {
   const getNode = useGraphStore((state) => state.getNode);
@@ -281,6 +284,8 @@ export function useGetVariableLabelOrTypeByValue(nodeId?: string) {
   const flattenOptions = useFlattenQueryVariableOptions(nodeId);
   const findAgentStructuredOutputTypeByValue =
     useFindAgentStructuredOutputTypeByValue();
+  const findAgentStructuredOutputLabel =
+    useFindAgentStructuredOutputLabelByValue();
 
   const getItem = useCallback(
     (val?: string) => {
@@ -291,9 +296,17 @@ export function useGetVariableLabelOrTypeByValue(nodeId?: string) {
 
   const getLabel = useCallback(
     (val?: string) => {
-      return getItem(val)?.label;
+      const item = getItem(val);
+      if (item) {
+        return (
+          <div>
+            {item.parentLabel} / {item.label}
+          </div>
+        );
+      }
+      return getItem(val)?.label || findAgentStructuredOutputLabel(val);
     },
-    [getItem],
+    [findAgentStructuredOutputLabel, getItem],
   );
 
   const getType = useCallback(