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 (
-                <li key={key} className="pl-1">
-                  <div
-                    onClick={handleSubMenuClick(nextOption, dataType)}
-                    className="hover:bg-bg-card p-1 text-text-primary rounded-sm flex justify-between"
-                  >
-                    {key}
-                    <span className="text-text-secondary">{dataType}</span>
-                  </div>
-                  {dataType === JsonSchemaDataType.Object &&
-                    renderAgentStructuredOutput(value, nextOption)}
-                </li>
-              );
+              if (
+                !type ||
+                (type &&
+                  (dataType === type ||
+                    hasSpecificTypeChild(value ?? {}, type)))
+              ) {
+                return (
+                  <li key={key} className="pl-1">
+                    <div
+                      onClick={handleSubMenuClick(nextOption, dataType)}
+                      className="hover:bg-bg-card p-1 text-text-primary rounded-sm flex justify-between"
+                    >
+                      {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>