import PropTypes from 'prop-types' import { useContext, useState, useEffect } from 'react' import { useSelector } from 'react-redux' // material-ui import { useTheme } from '@mui/material/styles' import { IconButton, Box, Typography, Divider, Button } from '@mui/material' import Tooltip from '@mui/material/Tooltip' // project imports import NodeCardWrapper from '../../ui-component/cards/NodeCardWrapper' import NodeTooltip from '../../ui-component/tooltip/NodeTooltip' import NodeInputHandler from './NodeInputHandler' import NodeOutputHandler from './NodeOutputHandler' import AdditionalParamsDialog from 'ui-component/dialog/AdditionalParamsDialog' import NodeInfoDialog from 'ui-component/dialog/NodeInfoDialog' // const import { baseURL } from 'store/constant' import { IconTrash, IconCopy, IconInfoCircle, IconAlertTriangle } from '@tabler/icons' import { flowContext } from 'store/context/ReactFlowContext' import LlamaindexPNG from 'assets/images/llamaindex.png' // ===========================|| CANVAS NODE ||=========================== // const CanvasNode = ({ data }) => { const theme = useTheme() const canvas = useSelector((state) => state.canvas) const { deleteNode, duplicateNode } = useContext(flowContext) const [showDialog, setShowDialog] = useState(false) const [dialogProps, setDialogProps] = useState({}) const [showInfoDialog, setShowInfoDialog] = useState(false) const [infoDialogProps, setInfoDialogProps] = useState({}) const [warningMessage, setWarningMessage] = useState('') const [open, setOpen] = useState(false) const handleClose = () => { setOpen(false) } const handleOpen = () => { setOpen(true) } const nodeOutdatedMessage = (oldVersion, newVersion) => `Node version ${oldVersion} outdated\nUpdate to latest version ${newVersion}` const nodeVersionEmptyMessage = (newVersion) => `Node outdated\nUpdate to latest version ${newVersion}` const onDialogClicked = () => { const dialogProps = { data, inputParams: data.inputParams.filter((inputParam) => !inputParam.hidden).filter((param) => param.additionalParams), confirmButtonName: 'Save', cancelButtonName: 'Cancel' } setDialogProps(dialogProps) setShowDialog(true) } useEffect(() => { 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('This node will be deprecated in the next release. Change to a new node tagged with NEW') } } }, [canvas.componentNodes, data.name, data.version]) return ( <> { duplicateNode(data.id) }} sx={{ height: '35px', width: '35px', '&:hover': { color: theme?.palette.primary.main } }} color={theme?.customization?.isDarkMode ? theme.colors?.paper : 'inherit'} > { deleteNode(data.id) }} sx={{ height: '35px', width: '35px', '&:hover': { color: 'red' } }} color={theme?.customization?.isDarkMode ? theme.colors?.paper : 'inherit'} > { setInfoDialogProps({ data }) setShowInfoDialog(true) }} sx={{ height: '35px', width: '35px', '&:hover': { color: theme?.palette.secondary.main } }} color={theme?.customization?.isDarkMode ? theme.colors?.paper : 'inherit'} > } placement='right-start' >
Notification
{data.label}
{data.tags && data.tags.includes('LlamaIndex') && ( <>
LlamaIndex
)} {warningMessage && ( <> {warningMessage}} placement='top'> )}
{(data.inputAnchors.length > 0 || data.inputParams.length > 0) && ( <> Inputs )} {data.inputAnchors.map((inputAnchor, index) => ( ))} {data.inputParams .filter((inputParam) => !inputParam.hidden) .map((inputParam, index) => ( ))} {data.inputParams.find((param) => param.additionalParams) && (
param.additionalParams).length === data.inputParams.length + data.inputAnchors.length ? 20 : 0 }} >
)} Output {data.outputAnchors.map((outputAnchor, index) => ( ))}
setShowDialog(false)} > setShowInfoDialog(false)}> ) } CanvasNode.propTypes = { data: PropTypes.object } export default CanvasNode