Feat: description field for env variables (#21556)

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

@@ -462,6 +462,7 @@ const formatItem = (
         return {
           variable: `env.${env.name}`,
           type: env.value_type,
+          description: env.description,
         }
       }) as Var[]
       break
@@ -472,7 +473,7 @@ const formatItem = (
         return {
           variable: `conversation.${chatVar.name}`,
           type: chatVar.value_type,
-          des: chatVar.description,
+          description: chatVar.description,
         }
       }) as Var[]
       break

web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx

@@ -80,7 +80,7 @@ const ChatVariableModal = ({
   const [objectValue, setObjectValue] = React.useState<ObjectValueItem[]>([DEFAULT_OBJECT_VALUE])
   const [editorContent, setEditorContent] = React.useState<string>()
   const [editInJSON, setEditInJSON] = React.useState(false)
-  const [des, setDes] = React.useState<string>('')
+  const [description, setDescription] = React.useState<string>('')
 
   const editorMinHeight = useMemo(() => {
     if (type === ChatVarType.ArrayObject)
@@ -237,7 +237,7 @@ const ChatVariableModal = ({
       name,
       value_type: type,
       value: formatValue(value),
-      description: des,
+      description,
     })
     onClose()
   }
@@ -247,7 +247,7 @@ const ChatVariableModal = ({
       setName(chatVar.name)
       setType(chatVar.value_type)
       setValue(chatVar.value)
-      setDes(chatVar.description)
+      setDescription(chatVar.description)
       setObjectValue(getObjectValue())
       if (chatVar.value_type === ChatVarType.ArrayObject) {
         setEditorContent(JSON.stringify(chatVar.value))
@@ -385,9 +385,9 @@ const ChatVariableModal = ({
           <div className='flex'>
             <textarea
               className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
-              value={des}
+              value={description}
               placeholder={t('workflow.chatVariable.modal.descriptionPlaceholder') || ''}
-              onChange={e => setDes(e.target.value)}
+              onChange={e => setDescription(e.target.value)}
             />
           </div>
         </div>

web/app/components/workflow/panel/env-panel/env-item.tsx

@@ -22,30 +22,42 @@ const EnvItem = ({
 
   return (
     <div className={cn(
-      'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      'radius-md group mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
       destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
     )}>
-      <div className='flex items-center justify-between'>
-        <div className='flex grow items-center gap-1'>
-          <Env className='h-4 w-4 text-util-colors-violet-violet-600' />
-          <div className='system-sm-medium text-text-primary'>{env.name}</div>
-          <div className='system-xs-medium text-text-tertiary'>{capitalize(env.value_type)}</div>
-          {env.value_type === 'secret' && <RiLock2Line className='h-3 w-3 text-text-tertiary' />}
-        </div>
-        <div className='flex shrink-0 items-center gap-1 text-text-tertiary'>
-          <div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
-            <RiEditLine className='h-4 w-4' onClick={() => onEdit(env)}/>
+      <div className='px-2.5 py-2'>
+        <div className='flex items-center justify-between'>
+          <div className='flex grow items-center gap-1'>
+            <Env className='h-4 w-4 text-util-colors-violet-violet-600' />
+            <div className='system-sm-medium text-text-primary'>{env.name}</div>
+            <div className='system-xs-medium text-text-tertiary'>{capitalize(env.value_type)}</div>
+            {env.value_type === 'secret' && <RiLock2Line className='h-3 w-3 text-text-tertiary' />}
           </div>
-          <div
-            className='radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
-            onMouseOver={() => setDestructive(true)}
-            onMouseOut={() => setDestructive(false)}
-          >
-            <RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(env)} />
+          <div className='flex shrink-0 items-center gap-1 text-text-tertiary'>
+            <div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
+              <RiEditLine className='h-4 w-4' onClick={() => onEdit(env)}/>
+            </div>
+            <div
+              className='radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
+              onMouseOver={() => setDestructive(true)}
+              onMouseOut={() => setDestructive(false)}
+            >
+              <RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(env)} />
+            </div>
           </div>
         </div>
+        <div className='system-xs-regular truncate text-text-tertiary'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
       </div>
-      <div className='system-xs-regular truncate text-text-tertiary'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
+      {env.description && (
+        <>
+          <div className={'h-[0.5px] bg-divider-subtle'} />
+          <div className={cn('rounded-bl-[8px] rounded-br-[8px] bg-background-default-subtle px-2.5 py-2 group-hover:bg-transparent',
+            destructive && 'bg-state-destructive-hover hover:bg-state-destructive-hover',
+          )}>
+            <div className='system-xs-regular truncate text-text-tertiary'>{env.description}</div>
+          </div>
+        </>
+      )}
     </div>
   )
 }

web/app/components/workflow/panel/env-panel/variable-modal.tsx

@@ -29,6 +29,7 @@ const VariableModal = ({
   const [type, setType] = React.useState<'string' | 'number' | 'secret'>('string')
   const [name, setName] = React.useState('')
   const [value, setValue] = React.useState<any>()
+  const [description, setDescription] = React.useState<string>('')
 
   const checkVariableName = (value: string) => {
     const { isValid, errorMessageKey } = checkKeys([value], false)
@@ -67,6 +68,7 @@ const VariableModal = ({
       value_type: type,
       name,
       value: type === 'number' ? Number(value) : value,
+      description,
     })
     onClose()
   }
@@ -76,6 +78,7 @@ const VariableModal = ({
       setType(env.value_type)
       setName(env.name)
       setValue(env.value_type === 'secret' ? envSecrets[env.id] : env.value)
+      setDescription(env.description)
     }
   }, [env, envSecrets])
 
@@ -141,7 +144,7 @@ const VariableModal = ({
           </div>
         </div>
         {/* value */}
-        <div className=''>
+        <div className='mb-4'>
           <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.value')}</div>
           <div className='flex'>
             {
@@ -160,6 +163,18 @@ const VariableModal = ({
             }
           </div>
         </div>
+        {/* description */}
+        <div className=''>
+          <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.description')}</div>
+          <div className='flex'>
+            <textarea
+              className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
+              value={description}
+              placeholder={t('workflow.env.modal.descriptionPlaceholder') || ''}
+              onChange={e => setDescription(e.target.value)}
+            />
+          </div>
+        </div>
       </div>
       <div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'>
         <div className='flex gap-2'>

web/app/components/workflow/types.ts

@@ -149,6 +149,7 @@ export type EnvironmentVariable = {
   name: string
   value: any
   value_type: 'string' | 'number' | 'secret'
+  description: string
 }
 
 export type ConversationVariable = {