add aiplugintools

packages/components/nodes/agents/MRKLAgentChat/MRKLAgentChat.ts

@@ -1,6 +1,6 @@
 import { INode, INodeData, INodeParams } from '../../../src/Interface'
 import { initializeAgentExecutor, AgentExecutor } from 'langchain/agents'
-import { Tool } from 'langchain/tools'
+import { AIPluginTool } from 'langchain/tools'
 import { BaseChatModel } from 'langchain/chat_models/base'
 import { getBaseClasses } from '../../../src/utils'
 
@@ -39,9 +39,20 @@ class MRKLAgentChat_Agents implements INode {
 
     async init(nodeData: INodeData): Promise<any> {
         const model = nodeData.inputs?.model as BaseChatModel
-        const tools = nodeData.inputs?.tools as Tool[]
+        const tools = nodeData.inputs?.tools
 
-        const executor = await initializeAgentExecutor(tools, model, 'chat-zero-shot-react-description', true)
+        const allowedTools = []
+        for (let i = 0; i < tools.length; i += 1) {
+            if (tools[i].pluginUrl) {
+                const pluginURL: string = tools[i].pluginUrl
+                const aiplugin = await AIPluginTool.fromPluginUrl(pluginURL)
+                allowedTools.push(aiplugin)
+            } else {
+                allowedTools.push(tools[i])
+            }
+        }
+
+        const executor = await initializeAgentExecutor(allowedTools, model, 'chat-zero-shot-react-description', true)
         return executor
     }
 

packages/components/nodes/tools/AIPlugin/AIPlugin.ts

@@ -1,4 +1,6 @@
 import { INode, INodeData, INodeParams } from '../../../src/Interface'
+import { AIPluginTool } from 'langchain/tools'
+import { getBaseClasses } from '../../../src/utils'
 
 class AIPlugin implements INode {
     label: string
@@ -17,6 +19,7 @@ class AIPlugin implements INode {
         this.icon = 'aiplugin.svg'
         this.category = 'Tools'
         this.description = 'Execute actions using ChatGPT Plugin Url'
+        this.baseClasses = [this.type, ...getBaseClasses(AIPluginTool)]
         this.inputs = [
             {
                 label: 'Plugin Url',
@@ -27,15 +30,13 @@ class AIPlugin implements INode {
         ]
     }
 
-    async getBaseClasses(): Promise<string[]> {
-        return ['Tool']
-    }
-
     async init(nodeData: INodeData): Promise<any> {
-        const { AIPluginTool } = await import('langchain/tools')
         const pluginUrl = nodeData.inputs?.pluginUrl as string
-
-        const aiplugin = await AIPluginTool.fromPluginUrl(pluginUrl)
+        // Doesn't work currently
+        // const aiplugin = await AIPluginTool.fromPluginUrl(pluginUrl)
+        const aiplugin = {
+            pluginUrl: pluginUrl
+        }
         return aiplugin
     }
 }

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

@@ -13,13 +13,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
+                })
+            )
+        }
     }
 
     return (

packages/ui/src/utils/genericHelper.js

@@ -233,3 +233,20 @@ export const copyToClipboard = (e) => {
         navigator.clipboard.writeText(src)
     }
 }
+
+export const rearrangeToolsOrdering = (newValues, sourceNodeId) => {
+    // RequestsGet and RequestsPost have to be in order before other tools
+    newValues.push(`{{${sourceNodeId}.data.instance}}`)
+
+    const sortKey = (item) => {
+        if (item.includes('requestsGet')) {
+            return 0
+        } else if (item.includes('requestsPost')) {
+            return 1
+        } else {
+            return 2
+        }
+    }
+
+    newValues.sort((a, b) => sortKey(a) - sortKey(b))
+}

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

@@ -38,7 +38,7 @@ import useConfirm from 'hooks/useConfirm'
 import { IconX } from '@tabler/icons'
 
 // utils
-import { getUniqueNodeId, initNode, getEdgeLabelName } from 'utils/genericHelper'
+import { getUniqueNodeId, initNode, getEdgeLabelName, rearrangeToolsOrdering } from 'utils/genericHelper'
 import useNotifier from 'utils/useNotifier'
 
 const nodeTypes = { customNode: CanvasNode }
@@ -110,7 +110,11 @@ const Canvas = () => {
                     const inputAnchor = node.data.inputAnchors.find((ancr) => ancr.name === targetInput)
                     if (inputAnchor && inputAnchor.list) {
                         const newValues = node.data.inputs[targetInput] || []
-                        newValues.push(`{{${sourceNodeId}.data.instance}}`)
+                        if (targetInput === 'tools') {
+                            rearrangeToolsOrdering(newValues, sourceNodeId)
+                        } else {
+                            newValues.push(`{{${sourceNodeId}.data.instance}}`)
+                        }
                         value = newValues
                     } else {
                         value = `{{${sourceNodeId}.data.instance}}`