fix(web): workflow variable

web/src/i18n/en.ts

@@ -324,7 +324,8 @@ export const en = {
       loginApiCannotRefreshToken: 'Login API cannot refresh token',
       logoutApiCannotRefreshToken: 'Logout API cannot refresh token',
       publicApiCannotRefreshToken: 'Public API cannot refresh token',
-      refreshTokenNotExist: 'Refresh token does not exist'
+      refreshTokenNotExist: 'Refresh token does not exist',
+      reset: 'Reset',
     },
     model: {
       searchPlaceholder: 'search model…',

web/src/views/Workflow/components/Chat/Chat.tsx

@@ -13,14 +13,14 @@ import ChatContent from '@/components/Chat/ChatContent'
 import type { ChatItem } from '@/components/Chat/types'
 import ChatSendIcon from '@/assets/images/application/chatSend.svg'
 import dayjs from 'dayjs'
-import type { ChatRef, VariableEditModalRef, StartVariableItem, GraphRef } from '../../types'
+import type { ChatRef, VariableConfigModalRef, StartVariableItem, GraphRef } from '../../types'
 import { type SSEMessage } from '@/utils/stream'
 
 const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId, graphRef }, ref) => {
   const { t } = useTranslation()
   const { message: messageApi } = App.useApp()
   const [form] = Form.useForm<{ message: string }>()
-  const variableConfigModalRef = useRef<VariableEditModalRef>(null)
+  const variableConfigModalRef = useRef<VariableConfigModalRef>(null)
   const [open, setOpen] = useState(false)
   const [loading, setLoading] = useState(false)
   const [chatList, setChatList] = useState<ChatItem[]>([])
@@ -38,15 +38,16 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
     if (startNodes.length) {
       const curVariables = startNodes[0].config.variables?.defaultValue
 
-      const initialValue: Record<string, any> = {}
-
       curVariables.forEach((vo: StartVariableItem) => {
         if (vo.default) {
-          initialValue[vo.name] = vo.default
+          vo.value = vo.default
+        }
+        const lastVo = variables.find(item => item.name === vo.name)
+        if (lastVo?.value) {
+          vo.value = lastVo.value
         }
       })
       setVariables(curVariables)
-      form.setFieldsValue(initialValue)
     }
   }
   const handleClose = () => {
@@ -114,6 +115,15 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
             })
             break
           case 'workflow_end':
+            setChatList(prev => {
+              const lastChat = { ...prev[prev.length - 1] }
+              lastChat.content = lastChat.content === '' ? null : lastChat.content
+
+              return [
+                ...prev.slice(0, prev.length - 1),
+                lastChat
+              ]
+            })
             setStreamLoading(false);
             break;
         }

web/src/views/Workflow/components/Chat/VariableConfigModal.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useImperativeHandle, useState } from 'react';
 import { Form, Input, InputNumber, Checkbox } from 'antd';
 import { useTranslation } from 'react-i18next';
 
-import type { StartVariableItem, VariableEditModalRef } from '../../types'
+import type { StartVariableItem, VariableConfigModalRef } from '../../types'
 import RbModal from '@/components/RbModal'
 
 interface VariableEditModalProps {
@@ -10,7 +10,7 @@ interface VariableEditModalProps {
   variables: StartVariableItem[]
 }
 
-const VariableConfigModal = forwardRef<VariableEditModalRef, VariableEditModalProps>(({
+const VariableConfigModal = forwardRef<VariableConfigModalRef, VariableEditModalProps>(({
   refresh,
 }, ref) => {
   const { t } = useTranslation();

web/src/views/Workflow/components/Nodes/NormalNode.tsx

@@ -19,7 +19,10 @@ const NormalNode: ReactShapeConfig['component'] = ({ node }) => {
         
         <div 
           className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]" 
-          onClick={() => {}}
+          onClick={(e) => {
+            e.stopPropagation()
+            node.remove()
+          }}
         ></div>
       </div>
 

web/src/views/Workflow/components/Properties/VariableEditModal.tsx

@@ -26,6 +26,10 @@ const variableType = {
   // array: 'array',
   // object: 'object',
 }
+const initialValues = {
+  max_length: 48,
+  required: true
+}
 
 const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProps>(({
   refresh
@@ -71,17 +75,12 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
     handleOpen,
     handleClose
   }));
-  // 变量类型改变时，更新初始化其他字段值
+  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-  const handleChangeType = (value: StartVariableItem['type']) => {
+    if (values.description && values.description !== '') return
-    if (value) {
+    const { value } = e.target
-      form.setFieldsValue({
+    form.setFieldsValue({
-        type: value,
+      description: value,
-        name: undefined,
+    })
-        description: undefined,
-        max_length: undefined,
-        default: undefined
-      })
-    }
   }
 
   return (
@@ -96,6 +95,7 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
       <Form
         form={form}
         layout="vertical"
+        initialValues={initialValues}
         scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
       >
         {/* 变量类型 */}
@@ -110,7 +110,6 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
               value: key,
               label: t(`workflow.config.start.${key}`),
             }))}
-            onChange={handleChangeType}
             labelRender={(props) => <div className="rb:flex rb:justify-between rb:items-center">{props.label} <Tag color="blue">{variableType[props.value as keyof typeof variableType]}</Tag></div>}
             optionRender={(props) => <div className="rb:flex rb:justify-between rb:items-center">{props.label} <Tag color="blue">{variableType[props.value as keyof typeof variableType]}</Tag></div>}
           />
@@ -124,7 +123,7 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
             { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: t('workflow.config.start.invalidVariableName') },
           ]}
         >
-          <Input placeholder={t('common.enter')} />
+          <Input placeholder={t('common.enter')} onBlur={nameChange} />
         </FormItem>
 
         {/* 显示名称 */}

web/src/views/Workflow/components/Properties/index.tsx

@@ -63,7 +63,7 @@ const Properties: FC<PropertiesProps> = ({
       const { id, ...rest } = values
 
       Object.keys(values).forEach(key => {
-        if (selectedNode.data.config[key]) {
+        if (selectedNode.data?.config[key]) {
           selectedNode.data.config[key].defaultValue = values[key]
         }
       })
@@ -132,7 +132,7 @@ const Properties: FC<PropertiesProps> = ({
             {configs && Object.keys(configs).length > 0 && Object.keys(configs).map((key) => {
               const config = configs[key] || {}
 
-              if (selectedNode.data.type === 'start' && key === 'variables' && config.type === 'define') {
+              if (selectedNode.data?.type === 'start' && key === 'variables' && config.type === 'define') {
                 return (
                   <div key={key}>
                     <div className="rb:flex rb:items-center rb:justify-between rb:mb-2.75">
@@ -177,7 +177,7 @@ const Properties: FC<PropertiesProps> = ({
                 )
               }
 
-              if (selectedNode.data.type === 'llm' && key === 'messages' && config.type === 'define') {
+              if (selectedNode.data?.type === 'llm' && key === 'messages' && config.type === 'define') {
                 return (
                   <Form.Item key={key} name={key}>
                     <MessageEditor />

web/src/views/Workflow/hooks/useWorkflowGraph.ts

@@ -83,8 +83,8 @@ export const useWorkflowGraph = ({
 
         if (nodeLibraryConfig?.config) {
           Object.keys(nodeLibraryConfig.config).forEach(key => {
-            if (nodeLibraryConfig.config && nodeLibraryConfig.config[key]) {
+            if (nodeLibraryConfig.config && nodeLibraryConfig.config[key] && config[key]) {
-              nodeLibraryConfig.config[key].defaultValue = config[key] || {}
+              nodeLibraryConfig.config[key].defaultValue = config[key]
             }
           })
         }

web/src/views/Workflow/types.ts

@@ -75,7 +75,7 @@ export interface WorkflowConfig {
 }
 
 export interface VariableEditModalRef {
-  handleOpen: (values: StartVariableItem[]) => void;
+  handleOpen: (values?: StartVariableItem) => void;
 }
 export interface StartVariableItem {
   name: string;
@@ -93,3 +93,6 @@ export interface ChatRef {
   handleOpen: () => void;
 }
 export type GraphRef = React.MutableRefObject<Graph | undefined>
+export interface VariableConfigModalRef {
+  handleOpen: (values: StartVariableItem[]) => void;
+}