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/constant/index.tsx

@@ -929,3 +929,11 @@ export const HALF_PLACEHOLDER_NODE_HEIGHT =
 export const DROPDOWN_HORIZONTAL_OFFSET = 28;
 export const DROPDOWN_VERTICAL_OFFSET = 74;
 export const PREVENT_CLOSE_DELAY = 300;
+
+export enum JsonSchemaDataType {
+  String = 'string',
+  Number = 'number',
+  Boolean = 'boolean',
+  Array = 'array',
+  Object = 'object',
+}

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" />

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

@@ -26,12 +26,10 @@ export function useShowSecondaryMenu() {
 }
 
 export function useFilterStructuredOutputByValue() {
-  const { getOperatorTypeFromId, getNode, clickedNodeId } = useGraphStore(
+  const { getNode } = useGraphStore((state) => state);
-    (state) => state,
-  );
 
   const filterStructuredOutput = useCallback(
-    (value: string) => {
+    (value: string, type?: string) => {
       const node = getNode(getNodeId(value));
       const structuredOutput = get(
         node,
@@ -40,12 +38,12 @@ export function useFilterStructuredOutputByValue() {
 
       const filteredStructuredOutput = filterAgentStructuredOutput(
         structuredOutput,
-        getOperatorTypeFromId(clickedNodeId),
+        type,
       );
 
       return filteredStructuredOutput;
     },
-    [clickedNodeId, getNode, getOperatorTypeFromId],
+    [getNode],
   );
 
   return filterStructuredOutput;

web/src/pages/agent/utils/filter-agent-structured-output.ts

@@ -1,6 +1,6 @@
 import { JSONSchema } from '@/components/jsonjoy-builder';
-import { Operator } from '@/constants/agent';
+import { get, isPlainObject } from 'lodash';
-import { isPlainObject } from 'lodash';
+import { JsonSchemaDataType } from '../constant';
 
 // Loop operators can only accept variables of type list.
 
@@ -8,6 +8,7 @@ import { isPlainObject } from 'lodash';
 
 export function filterLoopOperatorInput(
   structuredOutput: JSONSchema,
+  type: string,
   path = [],
 ) {
   if (typeof structuredOutput === 'boolean') {
@@ -23,9 +24,9 @@ export function filterLoopOperatorInput(
       (pre, [key, value]) => {
         if (
           typeof value !== 'boolean' &&
-          (value.type === 'array' || hasArrayChild(value))
+          (value.type === type || hasArrayChild(value))
         ) {
-          pre[key] = filterLoopOperatorInput(value, path);
+          pre[key] = filterLoopOperatorInput(value, type, path);
         }
         return pre;
       },
@@ -40,7 +41,7 @@ export function filterLoopOperatorInput(
 
 export function filterAgentStructuredOutput(
   structuredOutput: JSONSchema,
-  operator?: string,
+  type?: string,
 ) {
   if (typeof structuredOutput === 'boolean') {
     return structuredOutput;
@@ -49,8 +50,8 @@ export function filterAgentStructuredOutput(
     structuredOutput.properties &&
     isPlainObject(structuredOutput.properties)
   ) {
-    if (operator === Operator.Iteration) {
+    if (type) {
-      return filterLoopOperatorInput(structuredOutput);
+      return filterLoopOperatorInput(structuredOutput, type);
     }
 
     return structuredOutput;
@@ -59,13 +60,16 @@ export function filterAgentStructuredOutput(
   return structuredOutput;
 }
 
-export function hasArrayChild(data: Record<string, any> | Array<any>) {
+export function hasSpecificTypeChild(
+  data: Record<string, any> | Array<any>,
+  type: string,
+) {
   if (Array.isArray(data)) {
     for (const value of data) {
-      if (isPlainObject(value) && value.type === 'array') {
+      if (isPlainObject(value) && value.type === type) {
         return true;
       }
-      if (hasArrayChild(value)) {
+      if (hasSpecificTypeChild(value, type)) {
         return true;
       }
     }
@@ -73,11 +77,11 @@ export function hasArrayChild(data: Record<string, any> | Array<any>) {
 
   if (isPlainObject(data)) {
     for (const value of Object.values(data)) {
-      if (isPlainObject(value) && value.type === 'array') {
+      if (isPlainObject(value) && value.type === type) {
         return true;
       }
 
-      if (hasArrayChild(value)) {
+      if (hasSpecificTypeChild(value, type)) {
         return true;
       }
     }
@@ -85,3 +89,12 @@ export function hasArrayChild(data: Record<string, any> | Array<any>) {
 
   return false;
 }
+
+export function hasArrayChild(data: Record<string, any> | Array<any>) {
+  return hasSpecificTypeChild(data, JsonSchemaDataType.Array);
+}
+
+export function hasJsonSchemaChild(data: JSONSchema) {
+  const properties = get(data, 'properties') ?? {};
+  return isPlainObject(properties) && Object.keys(properties).length > 0;
+}