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/nodes/http/components/key-value/key-value-edit/index.tsx

@@ -17,6 +17,8 @@ type Props = {
   onChange: (newList: KeyValue[]) => void
   onAdd: () => void
   // onSwitchToBulkEdit: () => void
+  keyNotSupportVar?: boolean
+  insertVarTipToLeft?: boolean
 }
 
 const KeyValueList: FC<Props> = ({
@@ -26,6 +28,8 @@ const KeyValueList: FC<Props> = ({
   onChange,
   onAdd,
   // onSwitchToBulkEdit,
+  keyNotSupportVar,
+  insertVarTipToLeft,
 }) => {
   const { t } = useTranslation()
 
@@ -47,6 +51,9 @@ const KeyValueList: FC<Props> = ({
     }
   }, [list, onChange])
 
+  if (!Array.isArray(list))
+    return null
+
   return (
     <div className='border border-gray-200 rounded-lg overflow-hidden'>
       <div className='flex items-center h-7 leading-7 text-xs font-medium text-gray-500 uppercase'>
@@ -79,6 +86,8 @@ const KeyValueList: FC<Props> = ({
             onAdd={onAdd}
             readonly={readonly}
             canRemove={list.length > 1}
+            keyNotSupportVar={keyNotSupportVar}
+            insertVarTipToLeft={insertVarTipToLeft}
           />
         ))
       }

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx

@@ -18,6 +18,7 @@ type Props = {
   onRemove?: () => void
   placeholder?: string
   readOnly?: boolean
+  insertVarTipToLeft?: boolean
 }
 
 const InputItem: FC<Props> = ({
@@ -30,6 +31,7 @@ const InputItem: FC<Props> = ({
   onRemove,
   placeholder,
   readOnly,
+  insertVarTipToLeft,
 }) => {
   const { t } = useTranslation()
 
@@ -64,6 +66,7 @@ const InputItem: FC<Props> = ({
             placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
             placeholderClassName='!leading-[21px]'
             promptMinHeightClassName='h-full'
+            insertVarTipToLeft={insertVarTipToLeft}
           />
         )
         : <div
@@ -83,6 +86,7 @@ const InputItem: FC<Props> = ({
               placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
               placeholderClassName='!leading-[21px]'
               promptMinHeightClassName='h-full'
+              insertVarTipToLeft={insertVarTipToLeft}
             />
           )}
 

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx

@@ -6,6 +6,7 @@ import produce from 'immer'
 import type { KeyValue } from '../../../types'
 import InputItem from './input-item'
 import cn from '@/utils/classnames'
+import Input from '@/app/components/base/input'
 
 const i18nPrefix = 'workflow.nodes.http'
 
@@ -20,6 +21,8 @@ type Props = {
   onRemove: () => void
   isLastItem: boolean
   onAdd: () => void
+  keyNotSupportVar?: boolean
+  insertVarTipToLeft?: boolean
 }
 
 const KeyValueItem: FC<Props> = ({
@@ -33,6 +36,8 @@ const KeyValueItem: FC<Props> = ({
   onRemove,
   isLastItem,
   onAdd,
+  keyNotSupportVar,
+  insertVarTipToLeft,
 }) => {
   const { t } = useTranslation()
 
@@ -51,15 +56,26 @@ const KeyValueItem: FC<Props> = ({
     // group class name is for hover row show remove button
     <div className={cn(className, 'group flex h-min-7 border-t border-gray-200')}>
       <div className='w-1/2 border-r border-gray-200'>
-        <InputItem
-          instanceId={`http-key-${instanceId}`}
-          nodeId={nodeId}
-          value={payload.key}
-          onChange={handleChange('key')}
-          hasRemove={false}
-          placeholder={t(`${i18nPrefix}.key`)!}
-          readOnly={readonly}
-        />
+        {!keyNotSupportVar
+          ? (
+            <InputItem
+              instanceId={`http-key-${instanceId}`}
+              nodeId={nodeId}
+              value={payload.key}
+              onChange={handleChange('key')}
+              hasRemove={false}
+              placeholder={t(`${i18nPrefix}.key`)!}
+              readOnly={readonly}
+              insertVarTipToLeft={insertVarTipToLeft}
+            />
+          )
+          : (
+            <Input
+              className='rounded-none bg-white border-none system-sm-regular focus:ring-0 focus:bg-gray-100! hover:bg-gray-50'
+              value={payload.key}
+              onChange={handleChange('key')}
+            />
+          )}
       </div>
       <div className='w-1/2'>
         <InputItem
@@ -71,6 +87,7 @@ const KeyValueItem: FC<Props> = ({
           onRemove={onRemove}
           placeholder={t(`${i18nPrefix}.value`)!}
           readOnly={readonly}
+          insertVarTipToLeft={insertVarTipToLeft}
         />
       </div>
     </div>