Feat: conversation variable & variable assigner node (#7222)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>

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

@@ -0,0 +1,53 @@
+import { memo, useState } from 'react'
+import { capitalize } from 'lodash-es'
+import { RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
+import { Env } from '@/app/components/base/icons/src/vender/line/others'
+import { useStore } from '@/app/components/workflow/store'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type EnvItemProps = {
+  env: EnvironmentVariable
+  onEdit: (env: EnvironmentVariable) => void
+  onDelete: (env: EnvironmentVariable) => void
+}
+
+const EnvItem = ({
+  env,
+  onEdit,
+  onDelete,
+}: EnvItemProps) => {
+  const envSecrets = useStore(s => s.envSecrets)
+  const [destructive, setDestructive] = useState(false)
+
+  return (
+    <div className={cn(
+      'mb-1 px-2.5 py-2 bg-components-panel-on-panel-item-bg radius-md border border-components-panel-border-subtle 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='grow flex gap-1 items-center'>
+          <Env className='w-4 h-4 text-util-colors-violet-violet-600' />
+          <div className='text-text-primary system-sm-medium'>{env.name}</div>
+          <div className='text-text-tertiary system-xs-medium'>{capitalize(env.value_type)}</div>
+          {env.value_type === 'secret' && <RiLock2Line className='w-3 h-3 text-text-tertiary' />}
+        </div>
+        <div className='shrink-0 flex gap-1 items-center text-text-tertiary'>
+          <div className='p-1 radius-md cursor-pointer hover:bg-state-base-hover hover:text-text-secondary'>
+            <RiEditLine className='w-4 h-4' onClick={() => onEdit(env)}/>
+          </div>
+          <div
+            className='p-1 radius-md cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive'
+            onMouseOver={() => setDestructive(true)}
+            onMouseOut={() => setDestructive(false)}
+          >
+            <RiDeleteBinLine className='w-4 h-4' onClick={() => onDelete(env)} />
+          </div>
+        </div>
+      </div>
+      <div className='text-text-tertiary system-xs-regular truncate'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
+    </div>
+  )
+}
+
+export default memo(EnvItem)

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

@@ -3,15 +3,14 @@ import {
   useCallback,
   useState,
 } from 'react'
-import { capitalize } from 'lodash-es'
 import {
   useStoreApi,
 } from 'reactflow'
-import { RiCloseLine, RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
+import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/workflow/store'
-import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import VariableTrigger from '@/app/components/workflow/panel/env-panel/variable-trigger'
+import EnvItem from '@/app/components/workflow/panel/env-panel/env-item'
 import type {
   EnvironmentVariable,
 } from '@/app/components/workflow/types'
@@ -61,6 +60,11 @@ const EnvPanel = () => {
     setNodes(newNodes)
   }, [getEffectedNodes, store])
 
+  const handleEdit = (env: EnvironmentVariable) => {
+    setCurrentVar(env)
+    setShowVariableModal(true)
+  }
+
   const handleDelete = useCallback((env: EnvironmentVariable) => {
     removeUsedVarInNodes(env)
     updateEnvList(envList.filter(e => e.id !== env.id))
@@ -145,7 +149,7 @@ const EnvPanel = () => {
   return (
     <div
       className={cn(
-        'relative flex flex-col w-[400px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
+        'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
       )}
     >
       <div className='shrink-0 flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
@@ -171,31 +175,12 @@ const EnvPanel = () => {
       </div>
       <div className='grow px-4 rounded-b-2xl overflow-y-auto'>
         {envList.map(env => (
-          <div
-            key={env.name}
-            className='mb-1 px-2.5 py-2 bg-components-panel-on-panel-item-bg radius-md border-[0.5px] border-components-panel-border-subtle shadow-xs'
-          >
-            <div className='flex items-center justify-between'>
-              <div className='grow flex gap-1 items-center'>
-                <Env className='w-4 h-4 text-util-colors-violet-violet-600' />
-                <div className='text-text-primary system-sm-medium'>{env.name}</div>
-                <div className='text-text-tertiary system-xs-medium'>{capitalize(env.value_type)}</div>
-                {env.value_type === 'secret' && <RiLock2Line className='w-3 h-3 text-text-tertiary' />}
-              </div>
-              <div className='shrink-0 flex gap-1 items-center text-text-tertiary'>
-                <div className='p-1 radius-md cursor-pointer hover:bg-state-base-hover hover:text-text-secondary'>
-                  <RiEditLine className='w-4 h-4' onClick={() => {
-                    setCurrentVar(env)
-                    setShowVariableModal(true)
-                  }}/>
-                </div>
-                <div className='p-1 radius-md cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive'>
-                  <RiDeleteBinLine className='w-4 h-4' onClick={() => deleteCheck(env)} />
-                </div>
-              </div>
-            </div>
-            <div className='text-text-tertiary system-xs-regular truncate'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
-          </div>
+          <EnvItem
+            key={env.id}
+            env={env}
+            onEdit={handleEdit}
+            onDelete={deleteCheck}
+          />
         ))}
       </div>
       <RemoveEffectVarConfirm

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

@@ -80,7 +80,7 @@ const VariableModal = ({
       <div className='px-4 py-2'>
         {/* type */}
         <div className='mb-4'>
-          <div className='mb-1 text-text-secondary system-sm-semibold'>{t('workflow.env.modal.type')}</div>
+          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.type')}</div>
           <div className='flex gap-2'>
             <div className={cn(
               'w-[106px] flex items-center justify-center p-2 radius-md bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary system-sm-regular cursor-pointer hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
@@ -111,11 +111,11 @@ const VariableModal = ({
         </div>
         {/* name */}
         <div className='mb-4'>
-          <div className='mb-1 text-text-secondary system-sm-semibold'>{t('workflow.env.modal.name')}</div>
+          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.name')}</div>
           <div className='flex'>
             <input
               tabIndex={0}
-              className='block px-3 w-full h-9 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
+              className='block px-3 w-full h-8 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
               placeholder={t('workflow.env.modal.namePlaceholder') || ''}
               value={name}
               onChange={e => handleNameChange(e.target.value)}
@@ -125,11 +125,11 @@ const VariableModal = ({
         </div>
         {/* value */}
         <div className=''>
-          <div className='mb-1 text-text-secondary system-sm-semibold'>{t('workflow.env.modal.value')}</div>
+          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.value')}</div>
           <div className='flex'>
             <input
               tabIndex={0}
-              className='block px-3 w-full h-9 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
+              className='block px-3 w-full h-8 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
               placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
               value={value}
               onChange={e => setValue(e.target.value)}

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

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { RiAddLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
-// import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,