Bugfix/AgentflowV2 State (#4512)

* add persistence state, http node variables, custom function flow state

* update marketplace templates

packages/ui/src/ui-component/array/ArrayRenderer.jsx

@@ -54,7 +54,7 @@ export const ArrayRenderer = ({ inputParam, data, disabled }) => {
 
     // Initialize array items and parameters when component mounts or data changes
     useEffect(() => {
-        const initialArrayItems = cloneDeep(data.inputs[inputParam.name]) || []
+        const initialArrayItems = data.inputs[inputParam.name] || []
         setArrayItems(initialArrayItems)
 
         // Calculate initial display parameters for each array item

packages/ui/src/views/agentflowsv2/AgentFlowNode.jsx

@@ -20,7 +20,8 @@ import {
     IconCopy,
     IconTrash,
     IconInfoCircle,
-    IconLoader
+    IconLoader,
+    IconAlertCircleFilled
 } from '@tabler/icons-react'
 import StopCircleIcon from '@mui/icons-material/StopCircle'
 import CancelIcon from '@mui/icons-material/Cancel'
@@ -51,11 +52,13 @@ const StyledNodeToolbar = styled(NodeToolbar)(({ theme }) => ({
 const AgentFlowNode = ({ data }) => {
     const theme = useTheme()
     const customization = useSelector((state) => state.customization)
+    const canvas = useSelector((state) => state.canvas)
     const ref = useRef(null)
     const updateNodeInternals = useUpdateNodeInternals()
     // eslint-disable-next-line
     const [position, setPosition] = useState(0)
     const [isHovered, setIsHovered] = useState(false)
+    const [warningMessage, setWarningMessage] = useState('')
     const { deleteNode, duplicateNode } = useContext(flowContext)
     const [showInfoDialog, setShowInfoDialog] = useState(false)
     const [infoDialogProps, setInfoDialogProps] = useState({})
@@ -132,6 +135,28 @@ const AgentFlowNode = ({ data }) => {
         }
     }, [data, ref, updateNodeInternals])
 
+    useEffect(() => {
+        const nodeOutdatedMessage = (oldVersion, newVersion) =>
+            `Node version ${oldVersion} outdated\nUpdate to latest version ${newVersion}`
+        const nodeVersionEmptyMessage = (newVersion) => `Node outdated\nUpdate to latest version ${newVersion}`
+
+        const componentNode = canvas.componentNodes.find((nd) => nd.name === data.name)
+        if (componentNode) {
+            if (!data.version) {
+                setWarningMessage(nodeVersionEmptyMessage(componentNode.version))
+            } else if (data.version && componentNode.version > data.version) {
+                setWarningMessage(nodeOutdatedMessage(data.version, componentNode.version))
+            } else if (componentNode.badge === 'DEPRECATING') {
+                setWarningMessage(
+                    componentNode?.deprecateMessage ??
+                        'This node will be deprecated in the next release. Change to a new node tagged with NEW'
+                )
+            } else {
+                setWarningMessage('')
+            }
+        }
+    }, [canvas.componentNodes, data.name, data.version])
+
     return (
         <div ref={ref} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
             <StyledNodeToolbar>
@@ -236,6 +261,24 @@ const AgentFlowNode = ({ data }) => {
                     </Tooltip>
                 )}
 
+                {warningMessage && (
+                    <Tooltip placement='right-start' title={<span style={{ whiteSpace: 'pre-line' }}>{warningMessage}</span>}>
+                        <Avatar
+                            variant='rounded'
+                            sx={{
+                                ...theme.typography.smallAvatar,
+                                borderRadius: '50%',
+                                background: 'white',
+                                position: 'absolute',
+                                top: -10,
+                                left: -10
+                            }}
+                        >
+                            <IconAlertCircleFilled color='orange' />
+                        </Avatar>
+                    </Tooltip>
+                )}
+
                 <Box sx={{ width: '100%' }}>
                     {!data.hideInput && (
                         <Handle

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

@@ -1037,6 +1037,7 @@ const NodeInputHandler = ({
                                             variant='outlined'
                                             onClick={() => {
                                                 data.inputs[inputParam.name] = inputParam.codeExample
+                                                setReloadTimestamp(Date.now().toString())
                                             }}
                                         >
                                             See Example
@@ -1044,6 +1045,7 @@ const NodeInputHandler = ({
                                     )}
                                 </div>
                                 <div
+                                    key={`${reloadTimestamp}_${data.id}}`}
                                     style={{
                                         marginTop: '10px',
                                         border: '1px solid',