Feat: The structured output of the variable query can also be clicked. #10866 (#10952)

### What problem does this PR solve?

Feat: The structured output of the variable query can also be clicked.
#10866

### 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 { useBuildQueryVariableOptions } from '@/pages/agent/hooks/use-get-begin-query';
+import { hasJsonSchemaChild } from '@/pages/agent/utils/filter-agent-structured-output';
 import { PromptIdentity } from '../../agent-form/use-build-prompt-options';
 import { StructuredOutputSecondaryMenu } from '../structured-output-secondary-menu';
 import { ProgrammaticTag } from './constant';
@@ -109,6 +110,10 @@ function VariablePickerMenuItem({
             if (shouldShowSecondary) {
               const filteredStructuredOutput = filterStructuredOutput(x.value);
 
+              if (!hasJsonSchemaChild(filteredStructuredOutput)) {
+                return null;
+              }
+
               return (
                 <StructuredOutputSecondaryMenu
                   key={x.value}

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

@@ -29,6 +29,7 @@ import {
   useFindAgentStructuredOutputLabel,
   useShowSecondaryMenu,
 } from '../../hooks/use-build-structured-output';
+import { hasJsonSchemaChild } from '../../utils/filter-agent-structured-output';
 import { StructuredOutputSecondaryMenu } from './structured-output-secondary-menu';
 
 type Item = {
@@ -156,7 +157,13 @@ export function GroupedSelectWithSecondaryMenu({
                   if (shouldShowSecondary) {
                     const filteredStructuredOutput = filterStructuredOutput(
                       option.value,
+                      type,
                     );
+
+                    if (!hasJsonSchemaChild(filteredStructuredOutput)) {
+                      return null;
+                    }
+
                     return (
                       <StructuredOutputSecondaryMenu
                         key={option.value}

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

@@ -5,10 +5,10 @@ import {
   HoverCardTrigger,
 } from '@/components/ui/hover-card';
 import { cn } from '@/lib/utils';
-import { get, isPlainObject } from 'lodash';
+import { get, isEmpty, isPlainObject } from 'lodash';
 import { ChevronRight } from 'lucide-react';
 import { PropsWithChildren, ReactNode, useCallback } from 'react';
-import { VariableType } from '../../constant';
+import { JsonSchemaDataType, VariableType } from '../../constant';
 
 type DataItem = { label: ReactNode; value: string; parentLabel?: ReactNode };
 
@@ -16,8 +16,9 @@ type StructuredOutputSecondaryMenuProps = {
   data: DataItem;
   click(option: { label: ReactNode; value: string }): void;
   filteredStructuredOutput: JSONSchema;
-  type?: VariableType;
+  type?: VariableType | JsonSchemaDataType;
 } & PropsWithChildren;
+
 export function StructuredOutputSecondaryMenu({
   data,
   click,
@@ -34,6 +35,12 @@ export function StructuredOutputSecondaryMenu({
     [click, type],
   );
 
+  const handleMenuClick = useCallback(() => {
+    if (isEmpty(type) || type === JsonSchemaDataType.Object) {
+      click(data);
+    }
+  }, [click, data, type]);
+
   const renderAgentStructuredOutput = useCallback(
     (values: any, option: { label: ReactNode; value: string }) => {
       if (isPlainObject(values) && 'properties' in values) {
@@ -56,7 +63,7 @@ export function StructuredOutputSecondaryMenu({
                     {key}
                     <span className="text-text-secondary">{dataType}</span>
                   </div>
-                  {dataType === 'object' &&
+                  {dataType === JsonSchemaDataType.Object &&
                     renderAgentStructuredOutput(value, nextOption)}
                 </li>
               );
@@ -74,7 +81,7 @@ export function StructuredOutputSecondaryMenu({
     <HoverCard key={data.value} openDelay={100} closeDelay={100}>
       <HoverCardTrigger asChild>
         <li
-          onClick={() => click(data)}
+          onClick={handleMenuClick}
           className="hover:bg-bg-card py-1 px-2 text-text-primary rounded-sm text-sm flex justify-between items-center"
         >
           {data.label} <ChevronRight className="size-3.5 text-text-secondary" />