feat: default fold output

web/app/components/workflow/nodes/_base/components/output-vars.tsx

@@ -3,6 +3,8 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import { useBoolean } from 'ahooks'
+import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 type Props = {
   className?: string
@@ -16,15 +18,22 @@ const OutputVars: FC<Props> = ({
   children,
 }) => {
   const { t } = useTranslation()
-
+  const [isFold, {
+    toggle: toggleFold,
+  }] = useBoolean(true)
   return (
     <div>
-      <div className={cn(className, 'leading-[18px] text-[13px] font-semibold text-gray-700 uppercase')}>
-        {title || t('workflow.nodes.common.outputVars')}
-      </div>
-      <div className='mt-2 space-y-1'>
-        {children}
+      <div
+        onClick={toggleFold}
+        className={cn(className, 'flex justify-between leading-[18px] text-[13px] font-semibold text-gray-700 uppercase cursor-pointer')}>
+        <div>{title || t('workflow.nodes.common.outputVars')}</div>
+        <ChevronRight className='w-4 h-4 text-gray-500 transform transition-transform' style={{ transform: isFold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
       </div>
+      {!isFold && (
+        <div className='mt-2 space-y-1'>
+          {children}
+        </div>
+      )}
     </div>
   )
 }

web/app/components/workflow/nodes/_base/components/split.tsx

@@ -11,7 +11,7 @@ const Split: FC<Props> = ({
   className,
 }) => {
   return (
-    <div className={cn(className, 'h-px bg-black/5')}>
+    <div className={cn(className, 'h-[0.5px] bg-black/5')}>
     </div>
   )
 }

web/app/components/workflow/nodes/llm/panel.tsx

@@ -178,7 +178,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
           />
         )}
 
-        {/* Memory examples. Wait for design */}
+        {/* Memory put place examples. Wait for design */}
         {/* {isChatModel && (
           <div className='text-xs text-gray-300'>Memory examples(Designing)</div>
         )} */}
@@ -191,24 +191,27 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
               onChange={handleMemoryChange}
               canSetRoleName={isCompletionModel}
             />
-            <Split />
           </>
         )}
 
         {/* Vision: GPT4-vision and so on */}
         {isShowVisionConfig && (
-          <Field
-            title={t(`${i18nPrefix}.vision`)}
-            tooltip={t('appDebug.vision.description')!}
-            operations={
-              <ResolutionPicker
-                value={inputs.vision.configs?.detail || Resolution.high}
-                onChange={handleVisionResolutionChange}
-              />
-            }
-          />
+          <>
+            <Split />
+            <Field
+              title={t(`${i18nPrefix}.vision`)}
+              tooltip={t('appDebug.vision.description')!}
+              operations={
+                <ResolutionPicker
+                  value={inputs.vision.configs?.detail || Resolution.high}
+                  onChange={handleVisionResolutionChange}
+                />
+              }
+            />
+          </>
         )}
       </div>
+      <Split />
       <div className='px-4 pt-4 pb-2'>
         <OutputVars>
           <>