From 641395b3ec613248f2698578f5cf05a1e5e58929 Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Thu, 9 Jan 2025 15:17:27 +0800
Subject: [PATCH] feat: agent strategy form support required mark

---
 .../nodes/_base/components/agent-strategy.tsx   | 17 +++++++++++++++--
 .../workflow/nodes/_base/components/field.tsx   |  7 +++----
 .../nodes/_base/components/prompt/editor.tsx    |  4 +++-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
index 295c0a6252..01a1aba24e 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -82,6 +82,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
             availableNodes={availableNodes}
             nodesOutputVars={nodeOutputVars}
             isSupportJinja={def.template?.enabled}
+            required={def.required}
             varList={[]}
             modelConfig={
               defaultModel.data
@@ -107,7 +108,13 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
           const onChange = (value: number) => {
             props.onChange({ ...props.value, [schema.variable]: value })
           }
-          return <Field title={renderI18nObject(def.label)} tooltip={def.tooltip && renderI18nObject(def.tooltip)} inline>
+          return <Field
+            title={<>
+              {renderI18nObject(def.label)} {def.required && <span className='text-red-500'>*</span>}
+            </>}
+            tooltip={def.tooltip && renderI18nObject(def.tooltip)}
+            inline
+          >
             <div className='flex w-[200px] items-center gap-3'>
               <Slider
                 value={value}
@@ -140,7 +147,12 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
           props.onChange({ ...props.value, [schema.variable]: value })
         }
         return (
-          <Field title={renderI18nObject(schema.label)} tooltip={schema.tooltip && renderI18nObject(schema.tooltip)}>
+          <Field
+            title={<>
+              {renderI18nObject(schema.label)} {schema.required && <span className='text-red-500'>*</span>}
+            </>}
+            tooltip={schema.tooltip && renderI18nObject(schema.tooltip)}
+          >
             <ToolSelector
               scope={schema.scope}
               value={value}
@@ -163,6 +175,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
             tooltip={schema.tooltip && renderI18nObject(schema.tooltip)}
             onChange={onChange}
             supportCollapse
+            required={schema.required}
           />
         )
       }
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index eb8976f78d..d5d5ed7394 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -1,18 +1,17 @@
 'use client'
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 import React from 'react'
 import {
   RiArrowDownSLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import type { DefaultTFuncReturn } from 'i18next'
 import cn from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
   className?: string
-  title: JSX.Element | string | DefaultTFuncReturn
-  tooltip?: React.ReactNode
+  title: ReactNode
+  tooltip?: ReactNode
   isSubTitle?: boolean
   supportFold?: boolean
   children?: JSX.Element | string | null
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index 43db8a276e..9b7c63d862 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -75,6 +75,7 @@ type Props = {
   editorContainerClassName?: string
   placeholderClassName?: string
   titleClassName?: string
+  required?: boolean
 }
 
 const Editor: FC<Props> = ({
@@ -110,6 +111,7 @@ const Editor: FC<Props> = ({
   placeholderClassName,
   titleClassName,
   editorContainerClassName,
+  required,
 }) => {
   const { t } = useTranslation()
   const { eventEmitter } = useEventEmitterContextContext()
@@ -147,7 +149,7 @@ const Editor: FC<Props> = ({
         <div className={cn(isFocus ? 'bg-gray-50' : 'bg-gray-100', isExpand && 'h-full flex flex-col', 'rounded-lg', containerClassName)}>
           <div className={cn('pt-1 pl-3 pr-2 flex justify-between items-center', headerClassName)}>
             <div className='flex gap-2'>
-              <div className={cn('leading-4 text-xs font-semibold text-gray-700 uppercase', titleClassName)}>{title}</div>
+              <div className={cn('leading-4 text-xs font-semibold text-gray-700 uppercase', titleClassName)}>{title} {required && <span className='text-red-500'>*</span>}</div>
               {titleTooltip && <Tooltip popupContent={titleTooltip} />}
             </div>
             <div className='flex items-center'>