Feat: Filter the query variable drop-down box options by type #3221 (#8485)

### What problem does this PR solve?

Feat: Filter the query variable drop-down box options by type #3221

### Type of change


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

web/src/pages/agent/hooks/use-add-node.ts

@@ -232,8 +232,15 @@ function useAddToolNode() {
   return { addToolNode };
 }
 
+function isBottomSubAgent(type: string, position: Position) {
+  return (
+    (type === Operator.Agent && position === Position.Bottom) ||
+    type === Operator.Tool
+  );
+}
+
 export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
-  const { edges, nodes, addEdge, addNode, getNode } = useGraphStore(
+  const { edges, nodes, addEdge, addNode, getNode, updateNode } = useGraphStore(
     (state) => state,
   );
   const getNodeName = useGetNodeName();
@@ -291,6 +298,18 @@ export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
         if (node && node.parentId) {
           newNode.parentId = node.parentId;
           newNode.extent = 'parent';
+          const parentNode = getNode(node.parentId);
+          if (parentNode && !isBottomSubAgent(type, params.position)) {
+            const MoveRightDistance = 310;
+            updateNode({
+              ...parentNode,
+              width: (parentNode.width || 0) + MoveRightDistance,
+              position: {
+                x: parentNode.position.x + MoveRightDistance / 2,
+                y: parentNode.position.y,
+              },
+            });
+          }
         }
 
         if (type === Operator.Iteration) {
@@ -377,6 +396,7 @@ export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
       initializeOperatorParams,
       nodes,
       reactFlowInstance,
+      updateNode,
     ],
   );
 

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

@@ -5,7 +5,7 @@ import { DefaultOptionType } from 'antd/es/select';
 import { isEmpty } from 'lodash';
 import get from 'lodash/get';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { BeginId, Operator } from '../constant';
+import { BeginId, BeginQueryType, Operator, VariableType } from '../constant';
 import { AgentFormContext } from '../context';
 import { buildBeginInputListFromObject } from '../form/begin-form/utils';
 import { BeginQuery } from '../interface';
@@ -65,6 +65,7 @@ function buildOutputOptions(
   return Object.keys(outputs).map((x) => ({
     label: x,
     value: `${nodeId}@${x}`,
+    type: outputs[x]?.type,
   }));
 }
 
@@ -104,6 +105,19 @@ const ExcludedNodes = [
   Operator.Note,
 ];
 
+const StringList = [
+  BeginQueryType.Line,
+  BeginQueryType.Paragraph,
+  BeginQueryType.Options,
+];
+
+function transferToVariableType(type: string) {
+  if (StringList.some((x) => x === type)) {
+    return VariableType.String;
+  }
+  return type;
+}
+
 export function useBuildBeginVariableOptions() {
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
 
@@ -116,6 +130,7 @@ export function useBuildBeginVariableOptions() {
         options: query.map((x) => ({
           label: x.name,
           value: `begin@${x.key}`,
+          type: transferToVariableType(x.type),
         })),
       },
     ];
@@ -141,9 +156,11 @@ export function useBuildQueryVariableOptions() {
   const options = useBuildVariableOptions(node?.id);
 
   const nextOptions = useMemo(() => {
-    const globalOptions = Object.keys(data?.dsl?.globals ?? {}).map((x) => ({
-      label: x,
-      value: x,
+    const globals = data?.dsl?.globals ?? {};
+    const globalOptions = Object.entries(globals).map(([key, value]) => ({
+      label: key,
+      value: key,
+      type: Array.isArray(value) ? VariableType.Array : typeof value,
     }));
     return [
       { ...options[0], options: [...options[0]?.options, ...globalOptions] },

web/src/pages/agent/hooks/use-show-drawer.tsx

@@ -57,7 +57,7 @@ export const useShowSingleDebugDrawer = () => {
   };
 };
 
-const ExcludedNodes = [Operator.IterationStart, Operator.Note];
+const ExcludedNodes = [Operator.Note];
 
 export function useShowDrawer({
   drawerVisible,