feat: remove var check in start node

web/app/components/base/tag-input/index.tsx

@@ -88,10 +88,13 @@ const TagInput: FC<TagInputProps> = ({
         !disableAdd && (
           <AutosizeInput
             inputClassName={cn('outline-none appearance-none placeholder:text-gray-300 caret-primary-600 hover:placeholder:text-gray-400', isSpecialMode ? 'bg-transparent' : '')}
-            className={`
-              mt-1 py-1 rounded-lg border border-transparent text-sm max-w-[300px] overflow-hidden
+            className={cn(
+              !isInWorkflow && 'max-w-[300px]',
+              isInWorkflow && 'max-w-[130px]',
+              `
+              mt-1 py-1 rounded-lg border border-transparent text-sm  overflow-hidden
               ${focused && 'px-2 border !border-dashed !border-gray-200'}
-            `}
+            `)}
             onFocus={() => setFocused(true)}
             onBlur={handleBlur}
             value={value}

web/app/components/workflow/hooks/use-workflow.ts

@@ -233,13 +233,15 @@ export const useWorkflow = () => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [store])
 
-  const isVarUsedInNodes = useCallback((nodeId: string, varSelector: ValueSelector) => {
+  const isVarUsedInNodes = useCallback((varSelector: ValueSelector) => {
+    const nodeId = varSelector[0]
     const afterNodes = getAfterNodesInSameBranch(nodeId)
     const effectNodes = findUsedVarNodes(varSelector, afterNodes)
     return effectNodes.length > 0
   }, [getAfterNodesInSameBranch])
 
-  const removeUsedVarInNodes = useCallback((nodeId: string, varSelector: ValueSelector) => {
+  const removeUsedVarInNodes = useCallback((varSelector: ValueSelector) => {
+    const nodeId = varSelector[0]
     const { getNodes, setNodes } = store.getState()
     const afterNodes = getAfterNodesInSameBranch(nodeId)
     const effectNodes = findUsedVarNodes(varSelector, afterNodes)
@@ -257,7 +259,7 @@ export const useWorkflow = () => {
   const isNodeVarsUsedInNodes = useCallback((node: Node, isChatMode: boolean) => {
     const outputVars = getNodeOutputVars(node, isChatMode)
     const isUsed = outputVars.some((varSelector) => {
-      return isVarUsedInNodes(node.id, varSelector)
+      return isVarUsedInNodes(varSelector)
     })
     return isUsed
   }, [isVarUsedInNodes])

web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx

@@ -0,0 +1,32 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Confirm from '@/app/components/base/confirm'
+
+type Props = {
+  isShow: boolean
+  onConfirm: () => void
+  onCancel: () => void
+}
+const i18nPrefix = 'workflow.common.effectVarConfirm'
+
+const RemoveVarConfirm: FC<Props> = ({
+  isShow,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <Confirm
+      isShow={isShow}
+      title={t(`${i18nPrefix}.title`)}
+      content={t(`${i18nPrefix}.content`)}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      onClose={onCancel}
+    />
+  )
+}
+export default React.memo(RemoveVarConfirm)

web/app/components/workflow/nodes/start/panel.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm'
 import VarList from './components/var-list'
 import useConfig from './use-config'
 import type { StartNodeType } from './types'
@@ -27,6 +28,9 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
     handleAddVariable,
     hideAddVarModal,
     handleVarListChange,
+    isShowRemoveVarConfirm,
+    hideRemoveVarConfirm,
+    onRemoveVarConfirm,
   } = useConfig(id, data)
 
   const handleAddVarConfirm = (payload: InputVar) => {
@@ -96,6 +100,12 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
           onConfirm={handleAddVarConfirm}
         />
       )}
+
+      <RemoveEffectVarConfirm
+        isShow={isShowRemoveVarConfirm}
+        onCancel={hideRemoveVarConfirm}
+        onConfirm={onRemoveVarConfirm}
+      />
     </div>
   )
 }

web/app/components/workflow/nodes/start/use-config.ts

@@ -1,8 +1,9 @@
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import produce from 'immer'
 import { useBoolean } from 'ahooks'
 import type { StartNodeType } from './types'
-import { ChangeType, type InputVar, type MoreInfo } from '@/app/components/workflow/types'
+import { ChangeType } from '@/app/components/workflow/types'
+import type { InputVar, MoreInfo, ValueSelector } from '@/app/components/workflow/types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import {
   useIsChatMode,
@@ -12,7 +13,7 @@ import {
 
 const useConfig = (id: string, payload: StartNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
-  const { handleOutVarRenameChange, removeUsedVarInNodes } = useWorkflow()
+  const { handleOutVarRenameChange, isVarUsedInNodes, removeUsedVarInNodes } = useWorkflow()
   const isChatMode = useIsChatMode()
 
   const { inputs, setInputs } = useNodeCrud<StartNodeType>(id, payload)
@@ -22,7 +23,20 @@ const useConfig = (id: string, payload: StartNodeType) => {
     setFalse: hideAddVarModal,
   }] = useBoolean(false)
 
+  const [isShowRemoveVarConfirm, {
+    setTrue: showRemoveVarConfirm,
+    setFalse: hideRemoveVarConfirm,
+  }] = useBoolean(false)
+  const [removedVar, setRemovedVar] = useState<ValueSelector>([])
   const handleVarListChange = useCallback((newList: InputVar[], moreInfo?: { index: number; payload: MoreInfo }) => {
+    if (moreInfo?.payload?.type === ChangeType.remove) {
+      if (isVarUsedInNodes([id, moreInfo?.payload?.payload?.beforeKey || ''])) {
+        showRemoveVarConfirm()
+        setRemovedVar([id, moreInfo?.payload?.payload?.beforeKey || ''])
+        return
+      }
+    }
+
     const newInputs = produce(inputs, (draft: any) => {
       draft.variables = newList
     })
@@ -31,9 +45,12 @@ const useConfig = (id: string, payload: StartNodeType) => {
       const changedVar = newList[moreInfo.index]
       handleOutVarRenameChange(id, [id, inputs.variables[moreInfo.index].variable], [id, changedVar.variable])
     }
-    if (moreInfo?.payload?.type === ChangeType.remove)
-      removeUsedVarInNodes(id, [id, moreInfo?.payload?.payload?.beforeKey || ''])
-  }, [handleOutVarRenameChange, id, inputs, setInputs])
+  }, [handleOutVarRenameChange, id, inputs, isVarUsedInNodes, setInputs, showRemoveVarConfirm])
+
+  const removeVarInNode = useCallback(() => {
+    removeUsedVarInNodes(removedVar)
+    hideRemoveVarConfirm()
+  }, [hideRemoveVarConfirm, removeUsedVarInNodes, removedVar])
 
   const handleAddVariable = useCallback((payload: InputVar) => {
     const newInputs = produce(inputs, (draft: StartNodeType) => {
@@ -50,6 +67,9 @@ const useConfig = (id: string, payload: StartNodeType) => {
     hideAddVarModal,
     handleVarListChange,
     handleAddVariable,
+    isShowRemoveVarConfirm,
+    hideRemoveVarConfirm,
+    onRemoveVarConfirm: removeVarInNode,
   }
 }
 

web/i18n/en-US/workflow.ts

@@ -31,6 +31,10 @@ const translation = {
     workflowProcess: 'Workflow Process',
     notRunning: 'Not running yet',
     previewPlaceholder: 'Enter content in the box below to start debugging the Chatbot',
+    effectVarConfirm: {
+      title: 'Remove Variable',
+      content: 'The variable is used in other nodes. Do you still want to remove it?',
+    },
   },
   errorMsg: {
     fieldRequired: '{{field}} is required',

web/i18n/zh-Hans/workflow.ts

@@ -31,6 +31,10 @@ const translation = {
     workflowProcess: '工作流',
     notRunning: '尚未运行',
     previewPlaceholder: '在下面的框中输入内容开始调试聊天机器人',
+    effectVarConfirm: {
+      title: '移除变量',
+      content: '该变量在其他节点中使用。您是否仍要删除它？',
+    },
   },
   errorMsg: {
     fieldRequired: '{{field}} 不能为空',