Fix: If the agent debug sheet contains too much content, some of it will not be displayed. #12974 (#12975)

### What problem does this PR solve?

Fix: If the agent debug sheet contains too much content, some of it will
not be displayed. #12974

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/agent/debug-content/index.tsx

@@ -13,6 +13,7 @@ import { RAGFlowSelect } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { IMessage } from '@/interfaces/database/chat';
+import { cn } from '@/lib/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
 import React, { ReactNode, useCallback, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
@@ -36,6 +37,8 @@ interface IProps {
   loading?: boolean;
   submitButtonDisabled?: boolean;
   btnText?: ReactNode;
+  className?: string;
+  maxHeight?: string;
 }
 
 const DebugContent = ({
@@ -46,6 +49,8 @@ const DebugContent = ({
   loading = false,
   submitButtonDisabled = false,
   btnText,
+  className,
+  maxHeight,
 }: IProps) => {
   const { t } = useTranslation();
 
@@ -234,7 +239,7 @@ const DebugContent = ({
   );
   return (
     <>
-      <section>
+      <section className={className}>
         {message?.data?.tips && (
           <div className="mb-2">
             <MarkdownContent
@@ -244,11 +249,15 @@ const DebugContent = ({
           </div>
         )}
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <form onSubmit={form.handleSubmit(onSubmit)}>
-            {parameters.map((x, idx) => {
+            <section
-              return <div key={idx}>{renderWidget(x, idx.toString())}</div>;
+              className={cn('overflow-auto px-2 space-y-4 pb-4', maxHeight)}
-            })}
+            >
-            <div>
+              {parameters.map((x, idx) => {
+                return <div key={idx}>{renderWidget(x, idx.toString())}</div>;
+              })}
+            </section>
+            <div className="px-2">
               <ButtonLoading
                 type="submit"
                 loading={loading}

web/src/pages/agent/form-sheet/single-debug-sheet/index.tsx

@@ -60,6 +60,8 @@ const SingleDebugSheet = ({
             isNext={false}
             loading={loading}
             submitButtonDisabled={list.length === 0}
+            className="flex-1 overflow-auto min-h-0 pb-5"
+            maxHeight="max-h-[83vh]"
           ></DebugContent>
           {!isEmpty(data) ? (
             <div

web/src/pages/agent/form/components/query-variable-list.tsx

@@ -20,7 +20,7 @@ export function QueryVariableList({
   const form = useFormContext();
   const name = 'query';
 
-  let options = useFilterQueryVariableOptionsByTypes({ types });
+  const options = useFilterQueryVariableOptionsByTypes({ types });
 
   const secondOptions = flatOptions(options);
 

web/src/pages/agent/run-sheet/index.tsx

@@ -52,15 +52,17 @@ const RunSheet = ({
 
   return (
     <Sheet onOpenChange={hideModal} open modal={false}>
-      <SheetContent className={cn('top-20 p-2')}>
+      <SheetContent className={cn('top-20 px-0 flex flex-col')}>
         <SheetHeader>
           <SheetTitle>{t('flow.testRun')}</SheetTitle>
-          <DebugContent
-            ok={onOk}
-            parameters={inputs}
-            loading={loading}
-          ></DebugContent>
         </SheetHeader>
+        <DebugContent
+          ok={onOk}
+          parameters={inputs}
+          loading={loading}
+          className="flex-1 overflow-auto min-h-0 pb-5"
+          maxHeight="max-h-[83vh]"
+        ></DebugContent>
       </SheetContent>
     </Sheet>
   );