chore: improve node user experience (#4792)

web/app/components/workflow/nodes/_base/components/variable/utils.ts

@@ -206,13 +206,14 @@ const formatItem = (item: any, isChatMode: boolean, filterVar: (payload: Var, se
 
     case BlockEnum.ParameterExtractor: {
       res.vars = [
-        ...PARAMETER_EXTRACTOR_COMMON_STRUCT,
         ...((data as ParameterExtractorNodeType).parameters || []).map((p) => {
           return {
             variable: p.name,
             type: p.type as unknown as VarType,
           }
-        })]
+        }),
+        ...PARAMETER_EXTRACTOR_COMMON_STRUCT,
+      ]
       break
     }
 

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

@@ -53,6 +53,9 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
       <div className='px-4 pb-4 space-y-4'>
         <Field
           title={t(`${i18nPrefix}.input`)}
+          operations={(
+            <div className='flex items-center h-[18px] px-1 border border-black/8 rounded-[5px] text-xs font-medium text-gray-500 capitalize'>Array</div>
+          )}
         >
           <VarReferencePicker
             readonly={readOnly}

web/app/components/workflow/nodes/parameter-extractor/panel.tsx

@@ -176,6 +176,14 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
         <div className='px-4 pt-4 pb-2'>
           <OutputVars>
             <>
+              {inputs.parameters.map((param, index) => (
+                <VarItem
+                  key={index}
+                  name={param.name}
+                  type={param.type}
+                  description={param.description}
+                />
+              ))}
               <VarItem
                 name='__is_success'
                 type={VarType.number}
@@ -186,14 +194,6 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
                 type={VarType.string}
                 description={t(`${i18nPrefix}.errorReason`)}
               />
-              {inputs.parameters.map((param, index) => (
-                <VarItem
-                  key={index}
-                  name={param.name}
-                  type={param.type}
-                  description={param.description}
-                />
-              ))}
             </>
           </OutputVars>
         </div>