From 94dbda503f30016794c071752ca00fd3dca52306 Mon Sep 17 00:00:00 2001
From: Harry <xh001x@hotmail.com>
Date: Thu, 8 Jan 2026 14:15:58 +0800
Subject: [PATCH] refactor(llm-panel): update layout and enhance Max Iterations
 component

- Adjusted padding in the LLM panel for better visual alignment.
- Refactored the Max Iterations component to accept a className prop for flexible styling.
- Maintained the structure of advanced settings while ensuring consistent rendering of fields.
---
 .../llm/components/tools/max-iterations.tsx   |   7 +-
 .../components/workflow/nodes/llm/panel.tsx   | 102 +++++++++---------
 2 files changed, 57 insertions(+), 52 deletions(-)

diff --git a/web/app/components/workflow/nodes/llm/components/tools/max-iterations.tsx b/web/app/components/workflow/nodes/llm/components/tools/max-iterations.tsx
index 3f1a4b7130..d9de3623e3 100644
--- a/web/app/components/workflow/nodes/llm/components/tools/max-iterations.tsx
+++ b/web/app/components/workflow/nodes/llm/components/tools/max-iterations.tsx
@@ -3,13 +3,16 @@ import { InputNumber } from '@/app/components/base/input-number'
 import Slider from '@/app/components/base/slider'
 import Tooltip from '@/app/components/base/tooltip'
 
+import { cn } from '@/utils/classnames'
+
 type MaxIterationsProps = {
   value?: number
   onChange?: (value: number) => void
+  className?: string
 }
-const MaxIterations = ({ value = 10, onChange }: MaxIterationsProps) => {
+const MaxIterations = ({ value = 10, onChange, className }: MaxIterationsProps) => {
   return (
-    <div className="mt-3 flex h-10 items-center">
+    <div className={cn('mt-3 flex h-10 items-center', className)}>
       <div className="system-sm-semibold mr-0.5 truncate uppercase text-text-secondary">Max Iterations</div>
       <Tooltip
         popupContent="Max Iterations is the maximum number of iterations to run the tool."
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 63c59d29dc..d5ccc44e27 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -105,7 +105,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
   }, [inputs.model.completion_params])
   return (
     <div className="mt-2">
-      <div className="space-y-4 px-4 pb-4">
+      <div className="space-y-4 px-4 pb-0">
         <Field
           title={t(`${i18nPrefix}.model`, { ns: 'workflow' })}
           required
@@ -227,56 +227,58 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
           maxIterations={inputs.max_iterations}
           hideMaxIterations
         />
-
-        {/* Advanced Settings - 折叠区 */}
-        <FieldCollapse title={t(`${i18nPrefix}.advancedSettings`, { ns: 'workflow' })}>
-          <div className="space-y-4">
-            {/* Context */}
-            <Field
-              title={t(`${i18nPrefix}.context`, { ns: 'workflow' })}
-              tooltip={t(`${i18nPrefix}.contextTooltip`, { ns: 'workflow' })!}
-            >
-              <>
-                <VarReferencePicker
-                  readonly={readOnly}
-                  nodeId={id}
-                  isShowNodeName
-                  value={inputs.context?.variable_selector || []}
-                  onChange={handleContextVarChange}
-                  filterVar={filterVar}
-                />
-                {shouldShowContextTip && (
-                  <div className="text-xs font-normal leading-[18px] text-[#DC6803]">{t(`${i18nPrefix}.notSetContextInPromptTip`, { ns: 'workflow' })}</div>
-                )}
-              </>
-            </Field>
-
-            {/* Vision: GPT4-vision and so on */}
-            <ConfigVision
-              nodeId={id}
-              readOnly={readOnly}
-              isVisionModel={isVisionModel}
-              enabled={inputs.vision?.enabled}
-              onEnabledChange={handleVisionResolutionEnabledChange}
-              config={inputs.vision?.configs}
-              onConfigChange={handleVisionResolutionChange}
-            />
-
-            {/* Max Iterations */}
-            <MaxIterations
-              value={inputs.max_iterations}
-              onChange={handleMaxIterationsChange}
-            />
-
-            {/* Reasoning Format */}
-            <ReasoningFormatConfig
-              value={inputs.reasoning_format || 'tagged'}
-              onChange={handleReasoningFormatChange}
-              readonly={readOnly}
-            />
-          </div>
-        </FieldCollapse>
       </div>
+
+      {/* Advanced Settings - 折叠区 */}
+      <FieldCollapse title={t(`${i18nPrefix}.advancedSettings`, { ns: 'workflow' })}>
+        <div className="space-y-4">
+          {/* Context */}
+          <Field
+            title={t(`${i18nPrefix}.context`, { ns: 'workflow' })}
+            tooltip={t(`${i18nPrefix}.contextTooltip`, { ns: 'workflow' })!}
+          >
+            <>
+              <VarReferencePicker
+                readonly={readOnly}
+                nodeId={id}
+                isShowNodeName
+                value={inputs.context?.variable_selector || []}
+                onChange={handleContextVarChange}
+                filterVar={filterVar}
+              />
+              {shouldShowContextTip && (
+                <div className="text-xs font-normal leading-[18px] text-[#DC6803]">{t(`${i18nPrefix}.notSetContextInPromptTip`, { ns: 'workflow' })}</div>
+              )}
+            </>
+          </Field>
+
+          {/* Vision: GPT4-vision and so on */}
+          <ConfigVision
+            nodeId={id}
+            readOnly={readOnly}
+            isVisionModel={isVisionModel}
+            enabled={inputs.vision?.enabled}
+            onEnabledChange={handleVisionResolutionEnabledChange}
+            config={inputs.vision?.configs}
+            onConfigChange={handleVisionResolutionChange}
+          />
+
+          {/* Max Iterations */}
+          <MaxIterations
+            className="flex h-10 items-center"
+            value={inputs.max_iterations}
+            onChange={handleMaxIterationsChange}
+          />
+
+          {/* Reasoning Format */}
+          <ReasoningFormatConfig
+            value={inputs.reasoning_format || 'tagged'}
+            onChange={handleReasoningFormatChange}
+            readonly={readOnly}
+          />
+        </div>
+      </FieldCollapse>
+
       <Split />
       <OutputVars
         collapsed={structuredOutputCollapsed}