From d568ecb3ff4f938cceaa639b68c3d216dd6b0ea3 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 25 Mar 2025 10:56:01 +0800
Subject: [PATCH] chore: enable auto collapse

---
 .../nodes/_base/components/collapse/field-collapse.tsx      | 6 ++++++
 .../workflow/nodes/_base/components/output-vars.tsx         | 6 ++++++
 web/app/components/workflow/nodes/llm/panel.tsx             | 4 ++++
 web/app/components/workflow/nodes/llm/use-config.ts         | 5 +++++
 4 files changed, 21 insertions(+)

diff --git a/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx b/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx
index 40ed4616c8..2390dfd74e 100644
--- a/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx
+++ b/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx
@@ -4,11 +4,15 @@ import Collapse from '.'
 type FieldCollapseProps = {
   title: string
   children: ReactNode
+  collapsed?: boolean
+  onCollapse?: (collapsed: boolean) => void
   operations?: ReactNode
 }
 const FieldCollapse = ({
   title,
   children,
+  collapsed,
+  onCollapse,
   operations,
 }: FieldCollapseProps) => {
   return (
@@ -18,6 +22,8 @@ const FieldCollapse = ({
           <div className='system-sm-semibold-uppercase flex h-6 cursor-pointer items-center text-text-secondary'>{title}</div>
         }
         operations={operations}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
       >
         <div className='px-4'>
           {children}
diff --git a/web/app/components/workflow/nodes/_base/components/output-vars.tsx b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
index cc9cebb080..3d9ed6b6e9 100644
--- a/web/app/components/workflow/nodes/_base/components/output-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
@@ -9,18 +9,24 @@ type Props = {
   title?: string
   children: ReactNode
   operations?: ReactNode
+  collapsed?: boolean
+  onCollapse?: (collapsed: boolean) => void
 }
 
 const OutputVars: FC<Props> = ({
   title,
   children,
   operations,
+  collapsed,
+  onCollapse,
 }) => {
   const { t } = useTranslation()
   return (
     <FieldCollapse
       title={title || t('workflow.nodes.common.outputVars')}
       operations={operations}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
     >
       {children}
     </FieldCollapse>
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index efe679051a..1dd7a4cd42 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -68,6 +68,8 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
     setContexts,
     runningStatus,
     isModelSupportStructuredOutput,
+    structuredOutputCollapsed,
+    setStructuredOutputCollapsed,
     handleStructureOutputEnableChange,
     handleStructureOutputChange,
     handleRun,
@@ -289,6 +291,8 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
       </div>
       <Split />
       <OutputVars
+        collapsed={structuredOutputCollapsed}
+        onCollapse={setStructuredOutputCollapsed}
         operations={
           <div className='mr-4 flex items-center'>
             {!isModelSupportStructuredOutput && (
diff --git a/web/app/components/workflow/nodes/llm/use-config.ts b/web/app/components/workflow/nodes/llm/use-config.ts
index c9e54f3e5a..13db9e4031 100644
--- a/web/app/components/workflow/nodes/llm/use-config.ts
+++ b/web/app/components/workflow/nodes/llm/use-config.ts
@@ -285,11 +285,14 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     ?.models.find(modelItem => modelItem.model === model?.name)
     ?.features?.includes(ModelFeatureEnum.StructuredOutput)
 
+  const [structuredOutputCollapsed, setStructuredOutputCollapsed] = useState(true)
   const handleStructureOutputEnableChange = useCallback((enabled: boolean) => {
     const newInputs = produce(inputs, (draft) => {
       draft.structured_output_enabled = enabled
     })
     setInputs(newInputs)
+    if (enabled)
+      setStructuredOutputCollapsed(false)
   }, [inputs, setInputs])
 
   const handleStructureOutputChange = useCallback((newOutput: StructuredOutput) => {
@@ -432,6 +435,8 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     runningStatus,
     isModelSupportStructuredOutput,
     handleStructureOutputChange,
+    structuredOutputCollapsed,
+    setStructuredOutputCollapsed,
     handleStructureOutputEnableChange,
     handleRun,
     handleStop,