feat: update conversation vars after change

web/app/components/workflow/panel/chat-variable-panel/index.tsx

@@ -25,6 +25,7 @@ import { BlockEnum } from '@/app/components/workflow/types'
 import I18n from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n/language'
 import cn from '@/utils/classnames'
+import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
 
 const ChatVariablePanel = () => {
   const { t } = useTranslation()
@@ -34,6 +35,16 @@ const ChatVariablePanel = () => {
   const varList = useStore(s => s.conversationVariables) as ConversationVariable[]
   const updateChatVarList = useStore(s => s.setConversationVariables)
   const { doSyncWorkflowDraft } = useNodesSyncDraft()
+  const {
+    invalidateConversationVarValues,
+  } = useInspectVarsCrud()
+  const handleVarChanged = useCallback(() => {
+    doSyncWorkflowDraft(false, {
+      onSuccess() {
+        invalidateConversationVarValues()
+      },
+    })
+  }, [doSyncWorkflowDraft, invalidateConversationVarValues])
 
   const [showTip, setShowTip] = useState(true)
   const [showVariableModal, setShowVariableModal] = useState(false)
@@ -73,8 +84,8 @@ const ChatVariablePanel = () => {
     updateChatVarList(varList.filter(v => v.id !== chatVar.id))
     setCacheForDelete(undefined)
     setShowRemoveConfirm(false)
-    doSyncWorkflowDraft()
+    handleVarChanged()
-  }, [doSyncWorkflowDraft, removeUsedVarInNodes, updateChatVarList, varList])
+  }, [handleVarChanged, removeUsedVarInNodes, updateChatVarList, varList])
 
   const deleteCheck = useCallback((chatVar: ConversationVariable) => {
     const effectedNodes = getEffectedNodes(chatVar)
@@ -92,7 +103,7 @@ const ChatVariablePanel = () => {
     if (!currentVar) {
       const newList = [chatVar, ...varList]
       updateChatVarList(newList)
-      doSyncWorkflowDraft()
+      handleVarChanged()
       return
     }
     // edit chatVar
@@ -110,8 +121,8 @@ const ChatVariablePanel = () => {
       })
       setNodes(newNodes)
     }
-    doSyncWorkflowDraft()
+    handleVarChanged()
-  }, [currentVar, doSyncWorkflowDraft, getEffectedNodes, store, updateChatVarList, varList])
+  }, [currentVar, getEffectedNodes, handleVarChanged, store, updateChatVarList, varList])
 
   return (
     <div