Feat: Filter structured output data directly during the rendering stage. #10866 (#10958)

### What problem does this PR solve?

Feat: Filter structured output data directly during the rendering stage.
#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

@@ -31,12 +31,10 @@ import * as ReactDOM from 'react-dom';
 import { $createVariableNode } from './variable-node';
 
 import {
-  useFilterStructuredOutputByValue,
   useFindAgentStructuredOutputLabel,
   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';
@@ -89,8 +87,6 @@ function VariablePickerMenuItem({
     option: VariableOption | VariableInnerOption,
   ) => void;
 }) {
-  const filterStructuredOutput = useFilterStructuredOutputByValue();
-
   const showSecondaryMenu = useShowSecondaryMenu();
 
   return (
@@ -108,12 +104,6 @@ function VariablePickerMenuItem({
             const shouldShowSecondary = showSecondaryMenu(x.value, x.label);
 
             if (shouldShowSecondary) {
-              const filteredStructuredOutput = filterStructuredOutput(x.value);
-
-              if (!hasJsonSchemaChild(filteredStructuredOutput)) {
-                return null;
-              }
-
               return (
                 <StructuredOutputSecondaryMenu
                   key={x.value}
@@ -124,7 +114,6 @@ function VariablePickerMenuItem({
                       ...y,
                     } as VariableInnerOption)
                   }
-                  filteredStructuredOutput={filteredStructuredOutput}
                 ></StructuredOutputSecondaryMenu>
               );
             }

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

@@ -25,11 +25,9 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VariableType } from '../../constant';
 import {
-  useFilterStructuredOutputByValue,
   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 = {
@@ -68,7 +66,6 @@ export function GroupedSelectWithSecondaryMenu({
   const [open, setOpen] = React.useState(false);
 
   const showSecondaryMenu = useShowSecondaryMenu();
-  const filterStructuredOutput = useFilterStructuredOutputByValue();
   const findAgentStructuredOutputLabel = useFindAgentStructuredOutputLabel();
 
   // Find the label of the selected item
@@ -155,21 +152,11 @@ export function GroupedSelectWithSecondaryMenu({
                   );
 
                   if (shouldShowSecondary) {
-                    const filteredStructuredOutput = filterStructuredOutput(
-                      option.value,
-                      type,
-                    );
-
-                    if (!hasJsonSchemaChild(filteredStructuredOutput)) {
-                      return null;
-                    }
-
                     return (
                       <StructuredOutputSecondaryMenu
                         key={option.value}
                         data={option}
                         click={handleSecondaryMenuClick}
-                        filteredStructuredOutput={filteredStructuredOutput}
                         type={type}
                       ></StructuredOutputSecondaryMenu>
                     );

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

@@ -1,4 +1,3 @@
-import { JSONSchema } from '@/components/jsonjoy-builder';
 import {
   HoverCard,
   HoverCardContent,
@@ -9,22 +8,28 @@ import { get, isEmpty, isPlainObject } from 'lodash';
 import { ChevronRight } from 'lucide-react';
 import { PropsWithChildren, ReactNode, useCallback } from 'react';
 import { JsonSchemaDataType, VariableType } from '../../constant';
+import { useGetStructuredOutputByValue } from '../../hooks/use-build-structured-output';
+import {
+  hasJsonSchemaChild,
+  hasSpecificTypeChild,
+} from '../../utils/filter-agent-structured-output';
 
 type DataItem = { label: ReactNode; value: string; parentLabel?: ReactNode };
 
 type StructuredOutputSecondaryMenuProps = {
   data: DataItem;
   click(option: { label: ReactNode; value: string }): void;
-  filteredStructuredOutput: JSONSchema;
   type?: VariableType | JsonSchemaDataType;
 } & PropsWithChildren;
 
 export function StructuredOutputSecondaryMenu({
   data,
   click,
-  filteredStructuredOutput,
   type,
 }: StructuredOutputSecondaryMenuProps) {
+  const filterStructuredOutput = useGetStructuredOutputByValue();
+  const structuredOutput = filterStructuredOutput(data.value);
+
   const handleSubMenuClick = useCallback(
     (option: { label: ReactNode; value: string }, dataType?: string) => () => {
       // The query variable of the iteration operator can only select array type data.
@@ -54,19 +59,28 @@ export function StructuredOutputSecondaryMenu({
 
               const dataType = get(value, 'type');
 
-              return (
+              if (
-                <li key={key} className="pl-1">
+                !type ||
-                  <div
+                (type &&
-                    onClick={handleSubMenuClick(nextOption, dataType)}
+                  (dataType === type ||
-                    className="hover:bg-bg-card p-1 text-text-primary rounded-sm flex justify-between"
+                    hasSpecificTypeChild(value ?? {}, type)))
-                  >
+              ) {
-                    {key}
+                return (
-                    <span className="text-text-secondary">{dataType}</span>
+                  <li key={key} className="pl-1">
-                  </div>
+                    <div
-                  {dataType === JsonSchemaDataType.Object &&
+                      onClick={handleSubMenuClick(nextOption, dataType)}
-                    renderAgentStructuredOutput(value, nextOption)}
+                      className="hover:bg-bg-card p-1 text-text-primary rounded-sm flex justify-between"
-                </li>
+                    >
-              );
+                      {key}
+                      <span className="text-text-secondary">{dataType}</span>
+                    </div>
+                    {dataType === JsonSchemaDataType.Object &&
+                      renderAgentStructuredOutput(value, nextOption)}
+                  </li>
+                );
+              }
+
+              return null;
             })}
           </ul>
         );
@@ -74,9 +88,13 @@ export function StructuredOutputSecondaryMenu({
 
       return <div></div>;
     },
-    [handleSubMenuClick],
+    [handleSubMenuClick, type],
   );
 
+  if (!hasJsonSchemaChild(structuredOutput)) {
+    return null;
+  }
+
   return (
     <HoverCard key={data.value} openDelay={100} closeDelay={100}>
       <HoverCardTrigger asChild>
@@ -96,7 +114,7 @@ export function StructuredOutputSecondaryMenu({
       >
         <section className="p-2">
           <div className="p-1">{data?.parentLabel} structured output:</div>
-          {renderAgentStructuredOutput(filteredStructuredOutput, data)}
+          {renderAgentStructuredOutput(structuredOutput, data)}
         </section>
       </HoverCardContent>
     </HoverCard>

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

@@ -2,7 +2,6 @@ import { get } from 'lodash';
 import { ReactNode, useCallback } from 'react';
 import { AgentStructuredOutputField, Operator } from '../constant';
 import useGraphStore from '../store';
-import { filterAgentStructuredOutput } from '../utils/filter-agent-structured-output';
 
 function getNodeId(value: string) {
   return value.split('@').at(0);
@@ -25,28 +24,23 @@ export function useShowSecondaryMenu() {
   return showSecondaryMenu;
 }
 
-export function useFilterStructuredOutputByValue() {
+export function useGetStructuredOutputByValue() {
   const { getNode } = useGraphStore((state) => state);
 
-  const filterStructuredOutput = useCallback(
+  const getStructuredOutput = useCallback(
-    (value: string, type?: string) => {
+    (value: string) => {
       const node = getNode(getNodeId(value));
       const structuredOutput = get(
         node,
         `data.form.outputs.${AgentStructuredOutputField}`,
       );
 
-      const filteredStructuredOutput = filterAgentStructuredOutput(
+      return structuredOutput;
-        structuredOutput,
-        type,
-      );
-
-      return filteredStructuredOutput;
     },
     [getNode],
   );
 
-  return filterStructuredOutput;
+  return getStructuredOutput;
 }
 
 export function useFindAgentStructuredOutputLabel() {

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

@@ -2,64 +2,6 @@ import { JSONSchema } from '@/components/jsonjoy-builder';
 import { get, isPlainObject } from 'lodash';
 import { JsonSchemaDataType } from '../constant';
 
-// Loop operators can only accept variables of type list.
-
-// Recursively traverse the JSON schema, keeping attributes with type "array" and discarding others.
-
-export function filterLoopOperatorInput(
-  structuredOutput: JSONSchema,
-  type: string,
-  path = [],
-) {
-  if (typeof structuredOutput === 'boolean') {
-    return structuredOutput;
-  }
-  if (
-    structuredOutput.properties &&
-    isPlainObject(structuredOutput.properties)
-  ) {
-    const properties = Object.entries({
-      ...structuredOutput.properties,
-    }).reduce(
-      (pre, [key, value]) => {
-        if (
-          typeof value !== 'boolean' &&
-          (value.type === type || hasArrayChild(value))
-        ) {
-          pre[key] = filterLoopOperatorInput(value, type, path);
-        }
-        return pre;
-      },
-      {} as Record<string, JSONSchema>,
-    );
-
-    return { ...structuredOutput, properties };
-  }
-
-  return structuredOutput;
-}
-
-export function filterAgentStructuredOutput(
-  structuredOutput: JSONSchema,
-  type?: string,
-) {
-  if (typeof structuredOutput === 'boolean') {
-    return structuredOutput;
-  }
-  if (
-    structuredOutput.properties &&
-    isPlainObject(structuredOutput.properties)
-  ) {
-    if (type) {
-      return filterLoopOperatorInput(structuredOutput, type);
-    }
-
-    return structuredOutput;
-  }
-
-  return structuredOutput;
-}
-
 export function hasSpecificTypeChild(
   data: Record<string, any> | Array<any>,
   type: string,