Fix: Fixed the issue that the content of the Dropdown section cannot be seen when selecting the next operator #3221 (#8918)

…be seen when selecting the next operator #3221 ### What problem does this PR solve? Fix: Fixed the issue that the content of the Dropdown section cannot be seen when selecting the next operator #3221 ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
2025-12-26 00:46:52 +08:00 · 2025-07-18 17:54:32 +08:00
parent 92cfbcb382
commit e2f10fbd3e
24 changed files with 534 additions and 121 deletions
--- a/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
+++ b/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
@ -53,7 +53,7 @@ function AccordionOperators() {
  return (
    <Accordion
      type="multiple"
-      className="px-2 text-text-title"
+      className="px-2 text-text-title max-h-[45vh] overflow-auto"
      defaultValue={['item-1', 'item-2', 'item-3', 'item-4', 'item-5']}
    >
      <AccordionItem value="item-1">
--- a/web/src/pages/agent/canvas/node/iteration-node.tsx
+++ b/web/src/pages/agent/canvas/node/iteration-node.tsx
@ -21,10 +21,8 @@ export function InnerIterationNode({
  isConnectable = true,
  selected,
 }: NodeProps<IIterationNode>) {
-  // const { theme } = useTheme();
-
  return (
-    <ToolBar selected={selected} id={id} label={data.label}>
+    <ToolBar selected={selected} id={id} label={data.label} showRun={false}>
      <section
        className={cn('h-full bg-transparent rounded-b-md ', {
          [styles.selectedHeader]: selected,
@ -56,9 +54,7 @@ export function InnerIterationNode({
          label={data.label}
          wrapperClassName={cn(
            'bg-background-header-bar p-2 rounded-t-[10px] absolute w-full top-[-44px] left-[-0.3px]',
-            // styles.iterationHe ader,
            {
-              // [`${styles.dark} text-white`]: theme === 'dark',
              [styles.selectedHeader]: selected,
            },
          )}
--- a/web/src/pages/agent/canvas/node/toolbar.tsx
+++ b/web/src/pages/agent/canvas/node/toolbar.tsx
@ -27,9 +27,16 @@ type ToolBarProps = {
  selected?: boolean | undefined;
  label: string;
  id: string;
+  showRun?: boolean;
 } & PropsWithChildren;

-export function ToolBar({ selected, children, label, id }: ToolBarProps) {
+export function ToolBar({
+  selected,
+  children,
+  label,
+  id,
+  showRun = true,
+}: ToolBarProps) {
  const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
  const deleteIterationNodeById = useGraphStore(
    (store) => store.deleteIterationNodeById,
@ -63,9 +70,11 @@ export function ToolBar({ selected, children, label, id }: ToolBarProps) {

      <TooltipContent position={Position.Top}>
        <section className="flex gap-2 items-center">
-          <IconWrapper>
-            <Play className="size-3.5" />
-          </IconWrapper>
+          {showRun && (
+            <IconWrapper>
+              <Play className="size-3.5" data-play />
+            </IconWrapper>
+          )}{' '}
          <IconWrapper onClick={handleDuplicate}>
            <Copy className="size-3.5" />
          </IconWrapper>
--- a/web/src/pages/agent/constant.tsx
+++ b/web/src/pages/agent/constant.tsx
@ -320,6 +320,11 @@ export const initialCategorizeValues = {
  parameter: ModelVariableType.Precise,
  message_history_window_size: 1,
  category_description: {},
+  outputs: {
+    category_name: {
+      type: 'string',
+    },
+  },
 };

 export const initialMessageValues = {
--- a/web/src/pages/agent/form-sheet/next.tsx
+++ b/web/src/pages/agent/form-sheet/next.tsx
@ -20,7 +20,7 @@ import OperatorIcon from '../operator-icon';
 import useGraphStore from '../store';
 import { needsSingleStepDebugging } from '../utils';
 import { FormConfigMap } from './form-config-map';
-import SingleDebugDrawer from './single-debug-drawer';
+import SingleDebugSheet from './single-debug-sheet';

 interface IProps {
  node?: RAGFlowNodeType;
@ -115,11 +115,11 @@ const FormSheet = ({
        </section>
      </SheetContent>
      {singleDebugDrawerVisible && (
-        <SingleDebugDrawer
+        <SingleDebugSheet
          visible={singleDebugDrawerVisible}
          hideModal={hideSingleDebugDrawer}
          componentId={node?.id}
-        ></SingleDebugDrawer>
+        ></SingleDebugSheet>
      )}
    </Sheet>
  );
--- a/web/src/pages/agent/form-sheet/single-debug-drawer/index.tsx
+++ b/web/src/pages/agent/form-sheet/single-debug-drawer/index.tsx
@ -1,81 +0,0 @@
-import CopyToClipboard from '@/components/copy-to-clipboard';
-import { useDebugSingle, useFetchInputElements } from '@/hooks/flow-hooks';
-import { IModalProps } from '@/interfaces/common';
-import { CloseOutlined } from '@ant-design/icons';
-import { Drawer } from 'antd';
-import { isEmpty } from 'lodash';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import JsonView from 'react18-json-view';
-import 'react18-json-view/src/style.css';
-import DebugContent from '../../debug-content';
-
-interface IProps {
-  componentId?: string;
-}
-
-const SingleDebugDrawer = ({
-  componentId,
-  visible,
-  hideModal,
-}: IModalProps<any> & IProps) => {
-  const { t } = useTranslation();
-  const { data: list } = useFetchInputElements(componentId);
-  const { debugSingle, data, loading } = useDebugSingle();
-
-  const onOk = useCallback(
-    (nextValues: any[]) => {
-      if (componentId) {
-        debugSingle({ component_id: componentId, params: nextValues });
-      }
-    },
-    [componentId, debugSingle],
-  );
-
-  const content = JSON.stringify(data, null, 2);
-
-  return (
-    <Drawer
-      title={
-        <div className="flex justify-between">
-          {t('flow.testRun')}
-          <CloseOutlined onClick={hideModal} />
-        </div>
-      }
-      width={'100%'}
-      onClose={hideModal}
-      open={visible}
-      getContainer={false}
-      mask={false}
-      placement={'bottom'}
-      height={'95%'}
-      closeIcon={null}
-    >
-      <section className="overflow-y-auto">
-        <DebugContent
-          parameters={list}
-          ok={onOk}
-          isNext={false}
-          loading={loading}
-          submitButtonDisabled={list.length === 0}
-        ></DebugContent>
-        {!isEmpty(data) ? (
-          <div className="mt-4 rounded-md bg-slate-200 border border-neutral-200">
-            <div className="flex justify-between p-2">
-              <span>JSON</span>
-              <CopyToClipboard text={content}></CopyToClipboard>
-            </div>
-            <JsonView
-              src={data}
-              displaySize
-              collapseStringsAfterLength={100000000000}
-              className="w-full h-[800px] break-words overflow-auto p-2 bg-slate-100"
-            />
-          </div>
-        ) : null}
-      </section>
-    </Drawer>
-  );
-};
-
-export default SingleDebugDrawer;
--- a/web/src/pages/agent/form-sheet/single-debug-sheet/index.tsx
+++ b/web/src/pages/agent/form-sheet/single-debug-sheet/index.tsx
@ -0,0 +1,80 @@
+import CopyToClipboard from '@/components/copy-to-clipboard';
+import { Sheet, SheetContent, SheetHeader } from '@/components/ui/sheet';
+import { useDebugSingle } from '@/hooks/flow-hooks';
+import { useFetchInputForm } from '@/hooks/use-agent-request';
+import { IModalProps } from '@/interfaces/common';
+import { isEmpty } from 'lodash';
+import { X } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import JsonView from 'react18-json-view';
+import 'react18-json-view/src/style.css';
+import DebugContent from '../../debug-content';
+import { buildBeginInputListFromObject } from '../../form/begin-form/utils';
+
+interface IProps {
+  componentId?: string;
+}
+
+const SingleDebugSheet = ({
+  componentId,
+  visible,
+  hideModal,
+}: IModalProps<any> & IProps) => {
+  const { t } = useTranslation();
+  const inputForm = useFetchInputForm(componentId);
+  const { debugSingle, data, loading } = useDebugSingle();
+
+  const list = useMemo(() => {
+    return buildBeginInputListFromObject(inputForm);
+  }, [inputForm]);
+
+  const onOk = useCallback(
+    (nextValues: any[]) => {
+      if (componentId) {
+        debugSingle({ component_id: componentId, params: nextValues });
+      }
+    },
+    [componentId, debugSingle],
+  );
+
+  const content = JSON.stringify(data, null, 2);
+
+  return (
+    <Sheet open={visible} modal={false}>
+      <SheetContent className="top-20 p-0" closeIcon={false}>
+        <SheetHeader className="py-2 px-5">
+          <div className="flex justify-between ">
+            {t('flow.testRun')}
+            <X onClick={hideModal} className="cursor-pointer" />
+          </div>
+        </SheetHeader>
+        <section className="overflow-y-auto pt-4 px-5">
+          <DebugContent
+            parameters={list}
+            ok={onOk}
+            isNext={false}
+            loading={loading}
+            submitButtonDisabled={list.length === 0}
+          ></DebugContent>
+          {!isEmpty(data) ? (
+            <div className="mt-4 rounded-md bg-slate-200 border border-neutral-200">
+              <div className="flex justify-between p-2">
+                <span>JSON</span>
+                <CopyToClipboard text={content}></CopyToClipboard>
+              </div>
+              <JsonView
+                src={data}
+                displaySize
+                collapseStringsAfterLength={100000000000}
+                className="w-full h-[800px] break-words overflow-auto p-2 bg-slate-100"
+              />
+            </div>
+          ) : null}
+        </section>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default SingleDebugSheet;
--- a/web/src/pages/agent/form/categorize-form/dynamic-categorize.tsx
+++ b/web/src/pages/agent/form/categorize-form/dynamic-categorize.tsx
@ -28,8 +28,6 @@ import {
  useState,
 } from 'react';
 import { UseFormReturn, useFieldArray, useFormContext } from 'react-hook-form';
-import { Operator } from '../../constant';
-import { useBuildFormSelectOptions } from '../../form-hooks';
 import DynamicExample from './dynamic-example';

 interface IProps {
@ -107,13 +105,9 @@ const InnerNameInput = ({

 const NameInput = memo(InnerNameInput);

-const InnerFormSet = ({ nodeId, index }: IProps & { index: number }) => {
+const InnerFormSet = ({ index }: IProps & { index: number }) => {
  const form = useFormContext();
  const { t } = useTranslate('flow');
-  const buildCategorizeToOptions = useBuildFormSelectOptions(
-    Operator.Categorize,
-    nodeId,
-  );

  const buildFieldName = useCallback(
    (name: string) => {
--- a/web/src/pages/agent/form/categorize-form/dynamic-example.tsx
+++ b/web/src/pages/agent/form/categorize-form/dynamic-example.tsx
@ -25,7 +25,7 @@ const DynamicExample = ({ name }: DynamicExampleProps) => {

  return (
    <FormItem>
-      <FormLabel tooltip={t('flow.msgTip')}>{t('flow.msg')}</FormLabel>
+      <FormLabel tooltip={t('flow.msgTip')}>{t('flow.examples')}</FormLabel>
      <div className="space-y-4">
        {fields.map((field, index) => (
          <div key={field.id} className="flex items-start gap-2">
--- a/web/src/pages/agent/form/categorize-form/index.tsx
+++ b/web/src/pages/agent/form/categorize-form/index.tsx
@ -8,12 +8,17 @@ import { memo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
+import { initialCategorizeValues } from '../../constant';
 import { INextOperatorForm } from '../../interface';
+import { buildOutputList } from '../../utils/build-output-list';
+import { Output } from '../components/output';
 import { QueryVariable } from '../components/query-variable';
 import DynamicCategorize from './dynamic-categorize';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';

+const outputList = buildOutputList(initialCategorizeValues.outputs);
+
 function CategorizeForm({ node }: INextOperatorForm) {
  const { t } = useTranslation();

@ -62,6 +67,7 @@ function CategorizeForm({ node }: INextOperatorForm) {
        </FormContainer>
        <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
        <DynamicCategorize nodeId={node?.id}></DynamicCategorize>
+        <Output list={outputList}></Output>
      </form>
    </Form>
  );
--- a/web/src/pages/agent/index.tsx
+++ b/web/src/pages/agent/index.tsx
@ -17,6 +17,7 @@ import {
  Download,
  History,
  Key,
+  LaptopMinimalCheck,
  Logs,
  ScreenShare,
  Upload,
@ -91,7 +92,7 @@ export default function Agent() {
            onClick={() => saveGraph()}
            loading={loading}
          >
-            Save
+            <LaptopMinimalCheck /> Save
          </ButtonLoading>
          <Button variant={'secondary'} onClick={handleRunAgent}>
            <CirclePlay />