From 414e261edab23c8048c71279b829cea088676f4d Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 4 Feb 2026 09:48:28 +0800
Subject: [PATCH] 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   | 21 +++++++++++++------
 .../form-sheet/single-debug-sheet/index.tsx   |  2 ++
 .../form/components/query-variable-list.tsx   |  2 +-
 web/src/pages/agent/run-sheet/index.tsx       | 14 +++++++------
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/web/src/pages/agent/debug-content/index.tsx b/web/src/pages/agent/debug-content/index.tsx
index d96ea79aa..64fa7e219 100644
--- a/web/src/pages/agent/debug-content/index.tsx
+++ b/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">
-            {parameters.map((x, idx) => {
-              return <div key={idx}>{renderWidget(x, idx.toString())}</div>;
-            })}
-            <div>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <section
+              className={cn('overflow-auto px-2 space-y-4 pb-4', maxHeight)}
+            >
+              {parameters.map((x, idx) => {
+                return <div key={idx}>{renderWidget(x, idx.toString())}</div>;
+              })}
+            </section>
+            <div className="px-2">
               <ButtonLoading
                 type="submit"
                 loading={loading}
diff --git a/web/src/pages/agent/form-sheet/single-debug-sheet/index.tsx b/web/src/pages/agent/form-sheet/single-debug-sheet/index.tsx
index c5fe6e876..b65f67df7 100644
--- a/web/src/pages/agent/form-sheet/single-debug-sheet/index.tsx
+++ b/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
diff --git a/web/src/pages/agent/form/components/query-variable-list.tsx b/web/src/pages/agent/form/components/query-variable-list.tsx
index d2ed52fce..eb771eb6c 100644
--- a/web/src/pages/agent/form/components/query-variable-list.tsx
+++ b/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);
 
diff --git a/web/src/pages/agent/run-sheet/index.tsx b/web/src/pages/agent/run-sheet/index.tsx
index d7a339b90..3afe759db 100644
--- a/web/src/pages/agent/run-sheet/index.tsx
+++ b/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>
   );