chatflow/workflow add field required (#18892)

Author: junjiem

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

@@ -17,6 +17,7 @@ type Props = {
   children?: React.JSX.Element | string | null
   operations?: React.JSX.Element
   inline?: boolean
+  required?: boolean
 }
 
 const Field: FC<Props> = ({
@@ -28,6 +29,7 @@ const Field: FC<Props> = ({
   operations,
   inline,
   supportFold,
+  required,
 }) => {
   const [fold, {
     toggle: toggleFold,
@@ -38,7 +40,9 @@ const Field: FC<Props> = ({
         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

@@ -81,7 +81,11 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
   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

@@ -117,8 +117,8 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
           operations={
             <AddButton onClick={handleAddOutputVariable} />
           }
+          required
         >
-
           <OutputVarList
             readonly={readOnly}
             outputs={inputs.outputs}

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

@@ -64,6 +64,7 @@ const Panel: FC<NodePanelProps<DocExtractorNodeType>> = ({
       <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.inputVar`)}
+          required
         >
           <>
             <VarReferencePicker

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

@@ -69,6 +69,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
       <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.api`)}
+          required
           operations={
             <div className='flex'>
               <div
@@ -126,6 +127,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
         </Field>
         <Field
           title={t(`${i18nPrefix}.body`)}
+          required
         >
           <EditBody
             nodeId={id}

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

@@ -73,6 +73,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
       <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>
           )}
@@ -91,6 +92,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
       <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

@@ -81,6 +81,7 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
         {/* {JSON.stringify(inputs, null, 2)} */}
         <Field
           title={t(`${i18nPrefix}.queryVariable`)}
+          required
         >
           <VarReferencePicker
             nodeId={id}
@@ -94,6 +95,7 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
 
         <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

@@ -46,6 +46,7 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
       <div className='space-y-4 px-4'>
         <Field
           title={t(`${i18nPrefix}.inputVar`)}
+          required
         >
           <VarReferencePicker
             readonly={readOnly}

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

@@ -147,6 +147,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
       <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

@@ -115,6 +115,7 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
       <div className='space-y-4 px-4'>
         <Field
           title={t(`${i18nCommonPrefix}.model`)}
+          required
         >
           <ModelParameterModal
             popupClassName='!w-[387px]'
@@ -133,6 +134,7 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
         </Field>
         <Field
           title={t(`${i18nPrefix}.inputVar`)}
+          required
         >
           <>
             <VarReferencePicker
@@ -157,6 +159,7 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
         />
         <Field
           title={t(`${i18nPrefix}.extractParameters`)}
+          required
           operations={
             !readOnly
               ? (

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

@@ -103,6 +103,7 @@ const Panel: FC<NodePanelProps<QuestionClassifierNodeType>> = ({
       <div className='space-y-4 px-4'>
         <Field
           title={t(`${i18nPrefix}.model`)}
+          required
         >
           <ModelParameterModal
             popupClassName='!w-[387px]'
@@ -121,6 +122,7 @@ const Panel: FC<NodePanelProps<QuestionClassifierNodeType>> = ({
         </Field>
         <Field
           title={t(`${i18nPrefix}.inputVars`)}
+          required
         >
           <VarReferencePicker
             readonly={readOnly}
@@ -143,6 +145,7 @@ const Panel: FC<NodePanelProps<QuestionClassifierNodeType>> = ({
         />
         <Field
           title={t(`${i18nPrefix}.class`)}
+          required
         >
           <ClassList
             nodeId={id}