From c2ecb48900bf746fc098322aed0fe98fdb121b76 Mon Sep 17 00:00:00 2001
From: Ilango <rajagopalilango@gmail.com>
Date: Tue, 12 Mar 2024 18:11:18 +0530
Subject: [PATCH] Update how chatflow data is updated when configuration dialog
 is open

---
 .../dialog/ChatflowConfigurationDialog.jsx    | 25 +++++--------------
 packages/ui/src/views/canvas/CanvasHeader.jsx |  8 ++++++
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/ui/src/ui-component/dialog/ChatflowConfigurationDialog.jsx b/packages/ui/src/ui-component/dialog/ChatflowConfigurationDialog.jsx
index c8744629..28ad7a70 100644
--- a/packages/ui/src/ui-component/dialog/ChatflowConfigurationDialog.jsx
+++ b/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>
diff --git a/packages/ui/src/views/canvas/CanvasHeader.jsx b/packages/ui/src/views/canvas/CanvasHeader.jsx
index 9a220d77..3833fdee 100644
--- a/packages/ui/src/views/canvas/CanvasHeader.jsx
+++ b/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)}