fix(web): workflow variable

2025-12-23 11:20:04 +08:00
parent cd325fe198
commit 5736a70ccb
8 changed files with 46 additions and 30 deletions
--- a/web/src/i18n/en.ts
+++ b/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…',
--- a/web/src/views/Workflow/components/Chat/Chat.tsx
+++ b/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;
        }
--- a/web/src/views/Workflow/components/Chat/VariableConfigModal.tsx
+++ b/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();
--- a/web/src/views/Workflow/components/Nodes/NormalNode.tsx
+++ b/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>

--- a/web/src/views/Workflow/components/Properties/VariableEditModal.tsx
+++ b/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 handleChangeType = (value: StartVariableItem['type']) => {
-    if (value) {
-      form.setFieldsValue({
-        type: value,
-        name: undefined,
-        description: undefined,
-        max_length: undefined,
-        default: undefined
-      })
-    }
+  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (values.description && values.description !== '') return
+    const { value } = e.target
+    form.setFieldsValue({
+      description: value,
+    })
  }

  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>

        {/* 显示名称 */}
--- a/web/src/views/Workflow/components/Properties/index.tsx
+++ b/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 />
--- a/web/src/views/Workflow/hooks/useWorkflowGraph.ts
+++ b/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]) {
-              nodeLibraryConfig.config[key].defaultValue = config[key] || {}
+            if (nodeLibraryConfig.config && nodeLibraryConfig.config[key] && config[key]) {
+              nodeLibraryConfig.config[key].defaultValue = config[key]
            }
          })
        }
--- a/web/src/views/Workflow/types.ts
+++ b/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;
@@ -92,4 +92,7 @@ export interface StartVariableItem {
 export interface ChatRef {
  handleOpen: () => void;
 }
-export type GraphRef = React.MutableRefObject<Graph | undefined>
+export type GraphRef = React.MutableRefObject<Graph | undefined>
+export interface VariableConfigModalRef {
+  handleOpen: (values: StartVariableItem[]) => void;
+}