Feat: Customize the output variable name of the loop operator #3221 (#8514)

### What problem does this PR solve?

Feat: Customize the output variable name of the loop operator #3221

### Type of change


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

web/src/pages/agent/form/components/output.tsx

@@ -1,12 +1,19 @@
 export type OutputType = {
   title: string;
-  type: string;
+  type?: string;
 };
 
 type OutputProps = {
   list: Array<OutputType>;
 };
 
+export function transferOutputs(outputs: Record<string, any>) {
+  return Object.entries(outputs).map(([key, value]) => ({
+    title: key,
+    type: value?.type,
+  }));
+}
+
 export function Output({ list }: OutputProps) {
   return (
     <section className="space-y-2">

web/src/pages/agent/form/components/query-variable.tsx

@@ -14,19 +14,18 @@ import { useBuildQueryVariableOptions } from '../../hooks/use-get-begin-query';
 
 type QueryVariableProps = { name?: string; type?: VariableType };
 
-export function QueryVariable({
-  name = 'query',
-  type = VariableType.String,
-}: QueryVariableProps) {
+export function QueryVariable({ name = 'query', type }: QueryVariableProps) {
   const { t } = useTranslation();
   const form = useFormContext();
 
   const nextOptions = useBuildQueryVariableOptions();
 
   const finalOptions = useMemo(() => {
-    return nextOptions.map((x) => {
-      return { ...x, options: x.options.filter((y) => y.type === type) };
-    });
+    return type
+      ? nextOptions.map((x) => {
+          return { ...x, options: x.options.filter((y) => y.type === type) };
+        })
+      : nextOptions;
   }, [nextOptions, type]);
 
   return (