From e3daef19e7ec9740286b3cbb2218b629201c5842 Mon Sep 17 00:00:00 2001
From: "Junjie.M" <118170653@qq.com>
Date: Sun, 27 Apr 2025 16:12:02 +0800
Subject: [PATCH] chatflow/workflow add field required (#18892)

---
 .../components/workflow/nodes/_base/components/field.tsx    | 6 +++++-
 web/app/components/workflow/nodes/agent/panel.tsx           | 6 +++++-
 web/app/components/workflow/nodes/code/panel.tsx            | 2 +-
 .../components/workflow/nodes/document-extractor/panel.tsx  | 1 +
 web/app/components/workflow/nodes/http/panel.tsx            | 2 ++
 web/app/components/workflow/nodes/iteration/panel.tsx       | 2 ++
 .../components/workflow/nodes/knowledge-retrieval/panel.tsx | 2 ++
 web/app/components/workflow/nodes/list-operator/panel.tsx   | 1 +
 web/app/components/workflow/nodes/llm/panel.tsx             | 1 +
 .../components/workflow/nodes/parameter-extractor/panel.tsx | 3 +++
 .../components/workflow/nodes/question-classifier/panel.tsx | 3 +++
 11 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index 14e850b99a..aadcea1065 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/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}
diff --git a/web/app/components/workflow/nodes/agent/panel.tsx b/web/app/components/workflow/nodes/agent/panel.tsx
index 19be60cb51..7fd6314781 100644
--- a/web/app/components/workflow/nodes/agent/panel.tsx
+++ b/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!,
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index 4fd7a1a11c..a0b7535f89 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/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}
diff --git a/web/app/components/workflow/nodes/document-extractor/panel.tsx b/web/app/components/workflow/nodes/document-extractor/panel.tsx
index df144d56bf..5ed1425778 100644
--- a/web/app/components/workflow/nodes/document-extractor/panel.tsx
+++ b/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
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 4ba9b04a12..60f3de81c0 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/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}
diff --git a/web/app/components/workflow/nodes/iteration/panel.tsx b/web/app/components/workflow/nodes/iteration/panel.tsx
index 67e67988b2..1f29a07946 100644
--- a/web/app/components/workflow/nodes/iteration/panel.tsx
+++ b/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>
           )}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
index 20fd24e50c..3b5eefd853 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
+++ b/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
diff --git a/web/app/components/workflow/nodes/list-operator/panel.tsx b/web/app/components/workflow/nodes/list-operator/panel.tsx
index 42d5ff3bf1..a09839f04f 100644
--- a/web/app/components/workflow/nodes/list-operator/panel.tsx
+++ b/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}
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 2335fa0c80..d595933aad 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/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]'
diff --git a/web/app/components/workflow/nodes/parameter-extractor/panel.tsx b/web/app/components/workflow/nodes/parameter-extractor/panel.tsx
index ba6aed13ea..d03f1d9ff3 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/panel.tsx
+++ b/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
               ? (
diff --git a/web/app/components/workflow/nodes/question-classifier/panel.tsx b/web/app/components/workflow/nodes/question-classifier/panel.tsx
index 96e8fabd47..d2e0fb060a 100644
--- a/web/app/components/workflow/nodes/question-classifier/panel.tsx
+++ b/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}