Add more nodes for agents, loaders

packages/ui/src/views/canvas/ButtonEdge.js

@@ -1,7 +1,9 @@
 import { getBezierPath, EdgeText } from 'reactflow'
 import PropTypes from 'prop-types'
 import { useDispatch } from 'react-redux'
-import { REMOVE_EDGE } from 'store/actions'
+import { useContext } from 'react'
+import { SET_DIRTY } from 'store/actions'
+import { flowContext } from 'store/context/ReactFlowContext'
 
 import './index.css'
 
@@ -17,11 +19,14 @@ const ButtonEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, ta
         targetPosition
     })
 
+    const { deleteEdge } = useContext(flowContext)
+
     const dispatch = useDispatch()
 
     const onEdgeClick = (evt, id) => {
         evt.stopPropagation()
-        dispatch({ type: REMOVE_EDGE, edgeId: `${id}:${Date.now()}` })
+        deleteEdge(id)
+        dispatch({ type: SET_DIRTY })
     }
 
     return (

packages/ui/src/views/canvas/CanvasNode.js

@@ -47,7 +47,7 @@ const CanvasNode = ({ data }) => {
             >
                 <Box>
                     <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                        <Box item style={{ width: 50, marginRight: 10, padding: 5 }}>
+                        <Box style={{ width: 50, marginRight: 10, padding: 5 }}>
                             <div
                                 style={{
                                     ...theme.typography.commonAvatar,

packages/ui/src/views/canvas/NodeInputHandler.js

@@ -8,6 +8,7 @@ import { Box, Typography, Tooltip } from '@mui/material'
 
 import { Dropdown } from 'ui-component/dropdown/Dropdown'
 import { Input } from 'ui-component/input/Input'
+import { File } from 'ui-component/file/File'
 import { flowContext } from 'store/context/ReactFlowContext'
 import { isValidConnection } from 'utils/genericHelper'
 
@@ -73,6 +74,13 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data }) => {
                             {inputParam.label}
                             {!inputParam.optional && <span style={{ color: 'red' }}>&nbsp;*</span>}
                         </Typography>
+                        {inputParam.type === 'file' && (
+                            <File
+                                fileType={inputParam.fileType || '*'}
+                                onChange={(newValue) => (data.inputs[inputParam.name] = newValue)}
+                                value={data.inputs[inputParam.name] ?? inputParam.default ?? 'Choose a file to upload'}
+                            />
+                        )}
                         {(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') && (
                             <Input
                                 inputParam={inputParam}

packages/ui/src/views/canvas/index.js

@@ -124,7 +124,6 @@ const Canvas = () => {
         )
 
         setEdges((eds) => addEdge(newEdge, eds))
-        setDirty()
     }
 
     const handleLoadFlow = (file) => {
@@ -389,18 +388,6 @@ const Canvas = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [testChatflowApi.error])
 
-    // Listen to edge button click remove redux event
-    useEffect(() => {
-        if (reactFlowInstance) {
-            const edges = reactFlowInstance.getEdges()
-            const toRemoveEdgeId = canvasDataStore.removeEdgeId.split(':')[0]
-            setEdges(edges.filter((edge) => edge.id !== toRemoveEdgeId))
-            setDirty()
-        }
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [canvasDataStore.removeEdgeId])
-
     useEffect(() => setChatflow(canvasDataStore.chatflow), [canvasDataStore.chatflow])
 
     // Initialization

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

@@ -46,7 +46,6 @@ export const ChatMessage = ({ chatflowid }) => {
 
     const [open, setOpen] = useState(false)
     const [userInput, setUserInput] = useState('')
-    const [history, setHistory] = useState([])
     const [loading, setLoading] = useState(false)
     const [messages, setMessages] = useState([
         {
@@ -157,7 +156,10 @@ export const ChatMessage = ({ chatflowid }) => {
 
         // Send user question and history to API
         try {
-            const response = await predictionApi.sendMessageAndGetPrediction(chatflowid, { question: userInput, history: history })
+            const response = await predictionApi.sendMessageAndGetPrediction(chatflowid, {
+                question: userInput,
+                history: messages.filter((msg) => msg.message !== 'Hi there! How can I help?')
+            })
             if (response.data) {
                 const data = response.data
                 setMessages((prevMessages) => [...prevMessages, { message: data, type: 'apiMessage' }])
@@ -203,13 +205,6 @@ export const ChatMessage = ({ chatflowid }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getChatmessageApi.data])
 
-    // Keep history in sync with messages
-    useEffect(() => {
-        if (messages.length >= 3) {
-            setHistory([[messages[messages.length - 2].message, messages[messages.length - 1].message]])
-        }
-    }, [messages])
-
     // Auto scroll chat to bottom
     useEffect(() => {
         scrollToBottom()
@@ -229,7 +224,6 @@ export const ChatMessage = ({ chatflowid }) => {
 
         return () => {
             setUserInput('')
-            setHistory([])
             setLoading(false)
             setMessages([
                 {