add tools warning

packages/components/nodes/tools/ReadFile/ReadFile.ts

@@ -20,6 +20,7 @@ class ReadFile_Tools implements INode {
     category: string
     baseClasses: string[]
     inputs: INodeParams[]
+    warning: string
 
     constructor() {
         this.label = 'Read File'
@@ -28,6 +29,7 @@ class ReadFile_Tools implements INode {
         this.type = 'ReadFile'
         this.icon = 'readfile.svg'
         this.category = 'Tools'
+        this.warning = 'This tool can be used to read files from the disk. It is recommended to use this tool with caution.'
         this.description = 'Read file from disk'
         this.baseClasses = [this.type, 'Tool', ...getBaseClasses(ReadFileTool)]
         this.inputs = [

packages/components/nodes/tools/WriteFile/WriteFile.ts

@@ -20,6 +20,7 @@ class WriteFile_Tools implements INode {
     category: string
     baseClasses: string[]
     inputs: INodeParams[]
+    warning: string
 
     constructor() {
         this.label = 'Write File'
@@ -28,6 +29,7 @@ class WriteFile_Tools implements INode {
         this.type = 'WriteFile'
         this.icon = 'writefile.svg'
         this.category = 'Tools'
+        this.warning = 'This tool can be used to write files to the disk. It is recommended to use this tool with caution.'
         this.description = 'Write file to disk'
         this.baseClasses = [this.type, 'Tool', ...getBaseClasses(WriteFileTool)]
         this.inputs = [

packages/components/src/Interface.ts

@@ -134,6 +134,7 @@ export interface INodeProperties {
     documentation?: string
     color?: string
     hint?: string
+    warning?: string
 }
 
 export interface INode extends INodeProperties {

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

@@ -179,6 +179,8 @@ const AgentFlowNode = ({ data }) => {
                     componentNode?.deprecateMessage ??
                         'This node will be deprecated in the next release. Change to a new node tagged with NEW'
                 )
+            } else if (componentNode.warning) {
+                setWarningMessage(componentNode.warning)
             } else {
                 setWarningMessage('')
             }

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

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
 import { cloneDeep } from 'lodash'
 
 // Material
-import { Accordion, AccordionSummary, AccordionDetails, Box, Typography } from '@mui/material'
+import { Accordion, AccordionSummary, AccordionDetails, Box, Typography, Tooltip, IconButton } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { IconSettings } from '@tabler/icons-react'
+import { IconSettings, IconAlertTriangle } from '@tabler/icons-react'
 
 // Project imports
 import NodeInputHandler from '../canvas/NodeInputHandler'
@@ -292,8 +292,21 @@ export const ConfigInput = ({ data, inputParam, disabled = false, arrayIndex = n
             >
                 <Accordion sx={{ background: 'transparent' }} expanded={expanded} onChange={handleAccordionChange}>
                     <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ background: 'transparent' }}>
-                        <IconSettings stroke={1.5} size='1.3rem' />
-                        <Typography sx={{ ml: 1 }}>{selectedComponentNodeData?.label} Parameters</Typography>
+                        <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                            <IconSettings stroke={1.5} size='1.3rem' />
+                            <Typography sx={{ ml: 1 }}>{selectedComponentNodeData?.label} Parameters</Typography>
+                            <div style={{ flexGrow: 1 }}></div>
+                            {selectedComponentNodeData?.warning && (
+                                <Tooltip
+                                    title={<span style={{ whiteSpace: 'pre-line' }}>{selectedComponentNodeData.warning}</span>}
+                                    placement='top'
+                                >
+                                    <IconButton sx={{ height: 35, width: 35 }}>
+                                        <IconAlertTriangle size={20} color='orange' />
+                                    </IconButton>
+                                </Tooltip>
+                            )}
+                        </div>
                     </AccordionSummary>
                     <AccordionDetails>
                         {(selectedComponentNodeData.inputParams ?? [])

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

@@ -82,6 +82,8 @@ const CanvasNode = ({ data }) => {
                     componentNode?.deprecateMessage ??
                         'This node will be deprecated in the next release. Change to a new node tagged with NEW'
                 )
+            } else if (componentNode.warning) {
+                setWarningMessage(componentNode.warning)
             } else {
                 setWarningMessage('')
             }