Update how chatflow data is updated when configuration dialog is open

packages/ui/src/ui-component/dialog/ChatflowConfigurationDialog.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
-import { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Box, Dialog, DialogContent, DialogTitle, Tabs, Tab } from '@mui/material'
 import SpeechToText from './SpeechToText'
@@ -70,18 +69,6 @@ const ChatflowConfigurationDialog = ({ show, dialogProps, onCancel }) => {
     const portalElement = document.getElementById('portal')
     const [tabValue, setTabValue] = useState(0)
 
-    const canvas = useSelector((state) => state.canvas)
-    const [canvasDataStore, setCanvasDataStore] = useState(canvas)
-    const [chatflow, setChatflow] = useState(null)
-
-    useEffect(() => {
-        setCanvasDataStore(canvas)
-    }, [canvas])
-
-    useEffect(() => {
-        setChatflow(canvasDataStore.chatflow)
-    }, [canvasDataStore.chatflow])
-
     const component = show ? (
         <Dialog
             onClose={onCancel}
@@ -113,11 +100,11 @@ const ChatflowConfigurationDialog = ({ show, dialogProps, onCancel }) => {
                 {CHATFLOW_CONFIGURATION_TABS.map((item, index) => (
                     <TabPanel key={index} value={tabValue} index={index}>
                         {item.id === 'rateLimiting' && <Configuration />}
-                        {item.id === 'conversationStarters' ? <StarterPrompts dialogProps={{ chatflow }} /> : null}
-                        {item.id === 'speechToText' ? <SpeechToText dialogProps={{ chatflow }} /> : null}
-                        {item.id === 'chatFeedback' ? <ChatFeedback dialogProps={{ chatflow }} /> : null}
-                        {item.id === 'allowedDomains' ? <AllowedDomains dialogProps={{ chatflow }} /> : null}
-                        {item.id === 'analyseChatflow' ? <AnalyseFlow dialogProps={{ chatflow }} /> : null}
+                        {item.id === 'conversationStarters' ? <StarterPrompts dialogProps={dialogProps} /> : null}
+                        {item.id === 'speechToText' ? <SpeechToText dialogProps={dialogProps} /> : null}
+                        {item.id === 'chatFeedback' ? <ChatFeedback dialogProps={dialogProps} /> : null}
+                        {item.id === 'allowedDomains' ? <AllowedDomains dialogProps={dialogProps} /> : null}
+                        {item.id === 'analyseChatflow' ? <AnalyseFlow dialogProps={dialogProps} /> : null}
                     </TabPanel>
                 ))}
             </DialogContent>

packages/ui/src/views/canvas/CanvasHeader.jsx

@@ -171,6 +171,13 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
     useEffect(() => {
         if (chatflow) {
             setFlowName(chatflow.name)
+            // if configuration dialog is open, update its data
+            if (chatflowConfigurationDialogOpen) {
+                setChatflowConfigurationDialogProps({
+                    title: 'Chatflow Configuration',
+                    chatflow
+                })
+            }
         }
     }, [chatflow])
 
@@ -381,6 +388,7 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
                 onCancel={() => setViewMessagesDialogOpen(false)}
             />
             <ChatflowConfigurationDialog
+                key='chatflowConfiguration'
                 show={chatflowConfigurationDialogOpen}
                 dialogProps={chatflowConfigurationDialogProps}
                 onCancel={() => setChatflowConfigurationDialogOpen(false)}