chatflow/workflow add field required (#18892)

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

   children?: React.JSX.Element | string | null
   operations?: React.JSX.Element
   inline?: boolean
+  required?: boolean
 }
 
 const Field: FC<Props> = ({
   operations,
   inline,
   supportFold,
+  required,
 }) => {
   const [fold, {
     toggle: toggleFold,
         onClick={() => supportFold && toggleFold()}
         className={cn('flex items-center justify-between', supportFold && 'cursor-pointer')}>
         <div className='flex h-6 items-center'>
-          <div className={cn(isSubTitle ? 'system-xs-medium-uppercase text-text-tertiary' : 'system-sm-semibold-uppercase text-text-secondary')}>{title}</div>
+          <div className={cn(isSubTitle ? 'system-xs-medium-uppercase text-text-tertiary' : 'system-sm-semibold-uppercase text-text-secondary')}>
+            {title} {required && <span className='text-text-destructive'>*</span>}
+          </div>
           {tooltip && (
             <Tooltip
               popupContent={tooltip}

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

   const resetEditor = useStore(s => s.setControlPromptEditorRerenderKey)
 
   return <div className='my-2'>
-    <Field title={t('workflow.nodes.agent.strategy.label')} className='px-4 py-2' tooltip={t('workflow.nodes.agent.strategy.tooltip')} >
+    <Field
+    required
+    title={t('workflow.nodes.agent.strategy.label')}
+    className='px-4 py-2'
+    tooltip={t('workflow.nodes.agent.strategy.tooltip')} >
       <AgentStrategy
         strategy={inputs.agent_strategy_name ? {
           agent_strategy_provider_name: inputs.agent_strategy_provider_name!,

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

           operations={
             <AddButton onClick={handleAddOutputVariable} />
           }
+          required
         >
-
           <OutputVarList
             readonly={readOnly}
             outputs={inputs.outputs}

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

       <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.inputVar`)}
+          required
         >
           <>
             <VarReferencePicker

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

       <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.api`)}
+          required
           operations={
             <div className='flex'>
               <div
         </Field>
         <Field
           title={t(`${i18nPrefix}.body`)}
+          required
         >
           <EditBody
             nodeId={id}

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

       <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.input`)}
+          required
           operations={(
             <div className='system-2xs-medium-uppercase flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 capitalize text-text-tertiary'>Array</div>
           )}
       <div className='mt-2 space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.output`)}
+          required
           operations={(
             <div className='system-2xs-medium-uppercase flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 capitalize text-text-tertiary'>Array</div>
           )}

web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx

         {/* {JSON.stringify(inputs, null, 2)} */}
         <Field
           title={t(`${i18nPrefix}.queryVariable`)}
+          required
         >
           <VarReferencePicker
             nodeId={id}
 
         <Field
           title={t(`${i18nPrefix}.knowledge`)}
+          required
           operations={
             <div className='flex items-center space-x-1'>
               <RetrievalConfig

web/app/components/workflow/nodes/list-operator/panel.tsx

       <div className='space-y-4 px-4'>
         <Field
           title={t(`${i18nPrefix}.inputVar`)}
+          required
         >
           <VarReferencePicker
             readonly={readOnly}

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

       <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.model`)}
+          required
         >
           <ModelParameterModal
             popupClassName='!w-[387px]'

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

       <div className='space-y-4 px-4'>
         <Field
           title={t(`${i18nCommonPrefix}.model`)}
+          required
         >
           <ModelParameterModal
             popupClassName='!w-[387px]'
         </Field>
         <Field
           title={t(`${i18nPrefix}.inputVar`)}
+          required
         >
           <>
             <VarReferencePicker
         />
         <Field
           title={t(`${i18nPrefix}.extractParameters`)}
+          required
           operations={
             !readOnly
               ? (

web/app/components/workflow/nodes/question-classifier/panel.tsx

       <div className='space-y-4 px-4'>
         <Field
           title={t(`${i18nPrefix}.model`)}
+          required
         >
           <ModelParameterModal
             popupClassName='!w-[387px]'
         </Field>
         <Field
           title={t(`${i18nPrefix}.inputVars`)}
+          required
         >
           <VarReferencePicker
             readonly={readOnly}
         />
         <Field
           title={t(`${i18nPrefix}.class`)}
+          required
         >
           <ClassList
             nodeId={id}