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)
2025-12-08 20:42:30 +08:00 · 2025-11-03 12:30:30 +08:00
parent b47361432a
commit a52bdf0b7e
6 changed files with 61 additions and 23 deletions
--- a/web/src/pages/agent/constant/index.tsx
+++ b/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',
+}
--- a/web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx
+++ b/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}
--- a/web/src/pages/agent/form/components/select-with-secondary-menu.tsx
+++ b/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}
--- a/web/src/pages/agent/form/components/structured-output-secondary-menu.tsx
+++ b/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" />
--- a/web/src/pages/agent/hooks/use-build-structured-output.ts
+++ b/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(
-    (state) => state,
-  );
+  const { getNode } = useGraphStore((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;
--- a/web/src/pages/agent/utils/filter-agent-structured-output.ts
+++ b/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 { isPlainObject } from 'lodash';
+import { get, 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) {
-      return filterLoopOperatorInput(structuredOutput);
+    if (type) {
+      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;
+}