Merge branch 'main' into feature/Chain-Prompt

packages/ui/src/store/context/ReactFlowContext.js

@@ -16,13 +16,51 @@ export const flowContext = createContext(initialValue)
 export const ReactFlowContext = ({ children }) => {
     const [reactFlowInstance, setReactFlowInstance] = useState(null)
 
-    const deleteNode = (id) => {
-        reactFlowInstance.setNodes(reactFlowInstance.getNodes().filter((n) => n.id !== id))
-        reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((ns) => ns.source !== id && ns.target !== id))
+    const deleteNode = (nodeid) => {
+        deleteConnectedInput(nodeid, 'node')
+        reactFlowInstance.setNodes(reactFlowInstance.getNodes().filter((n) => n.id !== nodeid))
+        reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((ns) => ns.source !== nodeid && ns.target !== nodeid))
     }
 
-    const deleteEdge = (id) => {
-        reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((edge) => edge.id !== id))
+    const deleteEdge = (edgeid) => {
+        deleteConnectedInput(edgeid, 'edge')
+        reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((edge) => edge.id !== edgeid))
+    }
+
+    const deleteConnectedInput = (id, type) => {
+        const connectedEdges =
+            type === 'node'
+                ? reactFlowInstance.getEdges().filter((edge) => edge.source === id)
+                : reactFlowInstance.getEdges().filter((edge) => edge.id === id)
+
+        for (const edge of connectedEdges) {
+            const targetNodeId = edge.target
+            const sourceNodeId = edge.source
+            const targetInput = edge.targetHandle.split('-')[2]
+
+            reactFlowInstance.setNodes((nds) =>
+                nds.map((node) => {
+                    if (node.id === targetNodeId) {
+                        let value
+                        const inputAnchor = node.data.inputAnchors.find((ancr) => ancr.name === targetInput)
+                        if (inputAnchor && inputAnchor.list) {
+                            const values = node.data.inputs[targetInput] || []
+                            value = values.filter((item) => !item.includes(sourceNodeId))
+                        } else {
+                            value = ''
+                        }
+                        node.data = {
+                            ...node.data,
+                            inputs: {
+                                ...node.data.inputs,
+                                [targetInput]: value
+                            }
+                        }
+                    }
+                    return node
+                })
+            )
+        }
     }
 
     const duplicateNode = (id) => {

packages/ui/src/views/chatmessage/ChatMessage.js

@@ -39,6 +39,7 @@ export const ChatMessage = ({ chatflowid }) => {
     const customization = useSelector((state) => state.customization)
     const { confirm } = useConfirm()
     const dispatch = useDispatch()
+    const ps = useRef()
 
     useNotifier()
     const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
@@ -54,7 +55,6 @@ export const ChatMessage = ({ chatflowid }) => {
         }
     ])
 
-    const messagesEndRef = useRef(null)
     const inputRef = useRef(null)
     const anchorRef = useRef(null)
     const prevOpen = useRef(open)
@@ -115,7 +115,9 @@ export const ChatMessage = ({ chatflowid }) => {
     }
 
     const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+        if (ps.current) {
+            ps.current.scrollTo({ top: Number.MAX_SAFE_INTEGER, behavior: 'smooth' })
+        }
     }
 
     const addChatMessage = async (message, type) => {
@@ -286,7 +288,7 @@ export const ChatMessage = ({ chatflowid }) => {
                             <ClickAwayListener onClickAway={handleClose}>
                                 <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
                                     <div className='cloud'>
-                                        <div className='messagelist'>
+                                        <div ref={ps} className='messagelist'>
                                             {messages.map((message, index) => {
                                                 return (
                                                     // The latest message sent by the user will be animated while waiting for a response
@@ -331,7 +333,6 @@ export const ChatMessage = ({ chatflowid }) => {
                                                     </Box>
                                                 )
                                             })}
-                                            <div ref={messagesEndRef} />
                                         </div>
                                     </div>
                                     <Divider />