chore: output lines

web/app/(commonLayout)/workflow/nodes/page.tsx

@@ -48,7 +48,7 @@ const Page: FC = () => {
         * 2 directAnswer 3: llm 5: questionClassifier
         * 7 Code, 8 TemplateTransform
         */
-        selectedNodeId='8'
+        selectedNodeId='3'
       />
     </div>
   )

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

@@ -33,7 +33,8 @@ const Panel: FC = () => {
     handleCodeLanguageChange,
   } = useConfig(mockData)
   return (
-    <div className='mt-2 px-4 space-y-4'>
+    <div className='mt-2'>
+      <div className='px-4 pb-4 space-y-4'>
         <Field
           title={t(`${i18nPrefix}.inputVars`)}
           operations={
@@ -58,7 +59,11 @@ const Panel: FC = () => {
           value={inputs.code}
           onChange={handleCodeChange}
         />
+      </div>
       <Split />
+      <div className='px-4 pt-4 pb-2'>
+        output var
+      </div>
     </div>
   )
 }

web/app/components/workflow/nodes/direct-answer/use-config.ts

 import { useCallback, useState } from 'react'
 import produce from 'immer'
-import type { Variable } from '../../types'
+import useVarList from '../_base/hooks/use-var-list'
 import type { DirectAnswerNodeType } from './types'
 
 const useConfig = (initInputs: DirectAnswerNodeType) => {
   const [inputs, setInputs] = useState<DirectAnswerNodeType>(initInputs)
   // variables
-  const handleVarListChange = useCallback((newList: Variable[]) => {
-    const newInputs = produce(inputs, (draft) => {
-      draft.variables = newList
-    })
-    setInputs(newInputs)
-  }, [inputs, setInputs])
-
-  const handleAddVariable = useCallback(() => {
-    const newInputs = produce(inputs, (draft) => {
-      draft.variables.push({
-        variable: '',
-        value_selector: [],
-      })
+  const { handleVarListChange, handleAddVariable } = useVarList<DirectAnswerNodeType>({
+    inputs,
+    setInputs,
   })
-    setInputs(newInputs)
-  }, [inputs, setInputs])
 
   const handleAnswerChange = useCallback((value: string) => {
     const newInputs = produce(inputs, (draft) => {

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

@@ -29,7 +29,8 @@ const Panel: FC = () => {
   // const isChatMode = modelMode === 'chat'
 
   return (
-    <div className='mt-2 px-4 space-y-4'>
+    <div className='mt-2'>
+      <div className='px-4 pb-4 space-y-4'>
         <Field
           title={t(`${i18nPrefix}.model`)}
         >
@@ -88,7 +89,9 @@ const Panel: FC = () => {
         >
           Vision
         </Field>
-
+      </div>
+      <Split />
+      <div className='px-4 pt-4 pb-2'>
         <OutputVars>
           <>
             <VarItem
@@ -104,6 +107,8 @@ const Panel: FC = () => {
           </>
         </OutputVars>
       </div>
+
+    </div>
   )
 }
 

web/app/components/workflow/nodes/template-transform/node.tsx

@@ -2,7 +2,8 @@ import type { FC } from 'react'
 
 const Node: FC = () => {
   return (
-    <div>template-transform</div>
+    // No summary content
+    <div></div>
   )
 }
 

web/app/components/workflow/nodes/template-transform/panel.tsx

@@ -23,7 +23,9 @@ const Panel: FC = () => {
     handleCodeChange,
   } = useConfig(mockData)
   return (
-    <div className='mt-2 px-4 space-y-4'>
+    <div className='mt-2'>
+      <div className='px-4 pb-4 space-y-4'>
+
         <Field
           title={t(`${i18nPrefix}.inputVars`)}
           operations={
@@ -56,7 +58,9 @@ const Panel: FC = () => {
           value={inputs.template}
           onChange={handleCodeChange}
         />
+      </div>
       <Split />
+      <div className='px-4 pt-4 pb-2'>
         <OutputVars>
           <>
             <VarItem
@@ -67,6 +71,7 @@ const Panel: FC = () => {
           </>
         </OutputVars>
       </div>
+    </div>
   )
 }