Feat: The output is derived based on the configuration of the variable aggregation operator. #10427 (#11109)

### What problem does this PR solve?

Feat: The output is derived based on the configuration of the variable
aggregation operator. #10427

### Type of change


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

web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx

@@ -36,6 +36,7 @@ import {
   useShowSecondaryMenu,
 } from '@/pages/agent/hooks/use-build-structured-output';
 import { useFilterQueryVariableOptionsByTypes } from '@/pages/agent/hooks/use-get-begin-query';
+import { get } from 'lodash';
 import { PromptIdentity } from '../../agent-form/use-build-prompt-options';
 import { StructuredOutputSecondaryMenu } from '../structured-output-secondary-menu';
 import { ProgrammaticTag } from './constant';
@@ -45,18 +46,21 @@ class VariableInnerOption extends MenuOption {
   value: string;
   parentLabel: string | JSX.Element;
   icon?: ReactNode;
+  type?: string;
 
   constructor(
     label: string,
     value: string,
     parentLabel: string | JSX.Element,
     icon?: ReactNode,
+    type?: string,
   ) {
     super(value);
     this.label = label;
     this.value = value;
     this.parentLabel = parentLabel;
     this.icon = icon;
+    this.type = type;
   }
 }
 
@@ -126,9 +130,10 @@ function VariablePickerMenuItem({
               <li
                 key={x.value}
                 onClick={() => selectOptionAndCleanUp(x)}
-                className="hover:bg-bg-card p-1 text-text-primary rounded-sm"
+                className="hover:bg-bg-card p-1 text-text-primary rounded-sm flex justify-between items-center"
               >
-                {x.label}
+                <span className="truncate flex-1 min-w-0">{x.label}</span>
+                <span className="text-text-secondary">{get(x, 'type')}</span>
               </li>
             );
           })}
@@ -146,6 +151,7 @@ export type VariablePickerMenuOptionType = {
     label: string;
     value: string;
     icon: ReactNode;
+    type?: string;
   }>;
 };
 
@@ -214,7 +220,13 @@ export default function VariablePickerMenuPlugin({
           x.label,
           x.title,
           x.options.map((y) => {
-            return new VariableInnerOption(y.label, y.value, x.label, y.icon);
+            return new VariableInnerOption(
+              y.label,
+              y.value,
+              x.label,
+              y.icon,
+              y.type,
+            );
           }),
         ),
     );
@@ -378,7 +390,7 @@ export default function VariablePickerMenuPlugin({
         const nextOptions = buildNextOptions();
         return anchorElementRef.current && nextOptions.length
           ? ReactDOM.createPortal(
-              <div className="typeahead-popover w-[200px] p-2 bg-bg-base">
+              <div className="typeahead-popover w-80 p-2 bg-bg-base">
                 <ul className="scroll-auto overflow-x-hidden">
                   {nextOptions.map((option, i: number) => (
                     <VariablePickerMenuItem

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

@@ -18,6 +18,7 @@ type QueryVariableProps = {
   label?: ReactNode;
   hideLabel?: boolean;
   className?: string;
+  onChange?: (value: string) => void;
 };
 
 export function QueryVariable({
@@ -26,6 +27,7 @@ export function QueryVariable({
   label,
   hideLabel = false,
   className,
+  onChange,
 }: QueryVariableProps) {
   const { t } = useTranslation();
   const form = useFormContext();
@@ -46,7 +48,11 @@ export function QueryVariable({
           <FormControl>
             <GroupedSelectWithSecondaryMenu
               options={finalOptions}
-              {...field}
+              value={field.value}
+              onChange={(val) => {
+                field.onChange(val);
+                onChange?.(val);
+              }}
               // allowClear
               types={types}
             ></GroupedSelectWithSecondaryMenu>

web/src/pages/agent/form/components/select-with-secondary-menu.tsx

@@ -209,8 +209,12 @@ export function GroupedSelectWithSecondaryMenu({
                         onChange?.(option.value);
                         setOpen(false);
                       }}
+                      className="flex items-center justify-between"
                     >
-                      {option.label}
+                      <span> {option.label}</span>
+                      <span className="text-text-secondary">
+                        {get(option, 'type')}
+                      </span>
                     </CommandItem>
                   );
                 })}

web/src/pages/agent/form/components/structured-output-secondary-menu.tsx

@@ -112,9 +112,12 @@ export function StructuredOutputSecondaryMenu({
       <HoverCardTrigger asChild>
         <li
           onClick={handleMenuClick}
-          className="hover:bg-bg-card py-1 px-2 text-text-primary rounded-sm text-sm flex justify-between items-center"
+          className="hover:bg-bg-card py-1 px-2 text-text-primary rounded-sm text-sm flex justify-between items-center gap-2"
         >
-          {data.label} <ChevronRight className="size-3.5 text-text-secondary" />
+          <div className="flex justify-between flex-1">
+            {data.label} <span className="text-text-secondary">object</span>
+          </div>
+          <ChevronRight className="size-3.5 text-text-secondary" />
         </li>
       </HoverCardTrigger>
       <HoverCardContent