Sultan
/
Flowise
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add additional params

This commit is contained in:
Henry 2023-04-27 23:14:42 +01:00
parent 0f6da4c44f
commit e53651a415
6 changed files with 161 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/components/nodes/agents/ConversationalAgent/ConversationalAgent.ts
View File

@ -1,5 +1,5 @@
import { INode, INodeData, INodeParams } from '../../../src/Interface'
import { initializeAgentExecutorWithOptions, AgentExecutor } from 'langchain/agents'
import { initializeAgentExecutorWithOptions, AgentExecutor, InitializeAgentExecutorOptions } from 'langchain/agents'
import { Tool } from 'langchain/tools'
import { BaseChatModel } from 'langchain/chat_models/base'
import { BaseChatMemory } from 'langchain/memory'
@ -39,6 +39,22 @@ class ConversationalAgent_Agents implements INode {
label: 'Memory',
name: 'memory',
type: 'BaseChatMemory'
},
{
label: 'System Message',
name: 'systemMessage',
type: 'string',
rows: 4,
optional: true,
additionalParams: true
},
{
label: 'Human Message',
name: 'humanMessage',
type: 'string',
rows: 4,
optional: true,
additionalParams: true
}
]
}
@ -47,11 +63,25 @@ class ConversationalAgent_Agents implements INode {
const model = nodeData.inputs?.model as BaseChatModel
const tools = nodeData.inputs?.tools as Tool[]
const memory = nodeData.inputs?.memory as BaseChatMemory
const humanMessage = nodeData.inputs?.humanMessage as string
const systemMessage = nodeData.inputs?.systemMessage as string
const executor = await initializeAgentExecutorWithOptions(tools, model, {
const obj: InitializeAgentExecutorOptions = {
agentType: 'chat-conversational-react-description',
verbose: true
})
}
const agentArgs: any = {}
if (humanMessage) {
agentArgs.humanMessage = humanMessage
}
if (systemMessage) {
agentArgs.systemMessage = systemMessage
}
if (Object.keys(agentArgs).length) obj.agentArgs = agentArgs
const executor = await initializeAgentExecutorWithOptions(tools, model, obj)
executor.memory = memory
return executor
}

1
packages/components/src/Interface.ts
View File

@ -49,6 +49,7 @@ export interface INodeParams {
acceptVariable?: boolean
placeholder?: string
fileType?: string
additionalParams?: boolean
}
export interface INodeExecutionData {

64
packages/ui/src/ui-component/dialog/AdditionalParamsDialog.js Normal file
View File

@ -0,0 +1,64 @@
import { createPortal } from 'react-dom'
import { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { Dialog, DialogContent } from '@mui/material'
import PerfectScrollbar from 'react-perfect-scrollbar'
import NodeInputHandler from 'views/canvas/NodeInputHandler'
const AdditionalParamsDialog = ({ show, dialogProps, onCancel }) => {
const portalElement = document.getElementById('portal')
const [inputParams, setInputParams] = useState([])
const [data, setData] = useState({})
useEffect(() => {
if (dialogProps.inputParams) setInputParams(dialogProps.inputParams)
if (dialogProps.data) setData(dialogProps.data)
return () => {
setInputParams([])
setData({})
}
}, [dialogProps])
const component = show ? (
<Dialog
onClose={onCancel}
open={show}
fullWidth
maxWidth='sm'
aria-labelledby='alert-dialog-title'
aria-describedby='alert-dialog-description'
>
<DialogContent>
<PerfectScrollbar
style={{
height: '100%',
maxHeight: 'calc(100vh - 220px)',
overflowX: 'hidden'
}}
>
{inputParams.map((inputParam, index) => (
<NodeInputHandler
disabled={dialogProps.disabled}
key={index}
inputParam={inputParam}
data={data}
isAdditionalParams={true}
/>
))}
</PerfectScrollbar>
</DialogContent>
</Dialog>
) : null
return createPortal(component, portalElement)
}
AdditionalParamsDialog.propTypes = {
show: PropTypes.bool,
dialogProps: PropTypes.object,
onCancel: PropTypes.func
}
export default AdditionalParamsDialog

32
packages/ui/src/views/canvas/CanvasNode.js
View File

@ -1,14 +1,15 @@
import PropTypes from 'prop-types'
import { useContext } from 'react'
import { useContext, useState } from 'react'
// material-ui
import { styled, useTheme } from '@mui/material/styles'
import { IconButton, Box, Typography, Divider } from '@mui/material'
import { IconButton, Box, Typography, Divider, Button } from '@mui/material'
// project imports
import MainCard from 'ui-component/cards/MainCard'
import NodeInputHandler from './NodeInputHandler'
import NodeOutputHandler from './NodeOutputHandler'
import AdditionalParamsDialog from 'ui-component/dialog/AdditionalParamsDialog'
// const
import { baseURL } from 'store/constant'
@ -35,6 +36,20 @@ const CanvasNode = ({ data }) => {
const theme = useTheme()
const { deleteNode, duplicateNode } = useContext(flowContext)
const [showDialog, setShowDialog] = useState(false)
const [dialogProps, setDialogProps] = useState({})
const onDialogClicked = () => {
const dialogProps = {
data,
inputParams: data.inputParams.filter((param) => param.additionalParams),
confirmButtonName: 'Save',
cancelButtonName: 'Cancel'
}
setDialogProps(dialogProps)
setShowDialog(true)
}
return (
<>
<CardWrapper
@ -118,7 +133,13 @@ const CanvasNode = ({ data }) => {
{data.inputParams.map((inputParam, index) => (
<NodeInputHandler key={index} inputParam={inputParam} data={data} />
))}
{data.inputParams.find((param) => param.additionalParams) && (
<div style={{ textAlign: 'center' }}>
<Button sx={{ borderRadius: 25, width: '90%', mb: 2 }} variant='outlined' onClick={onDialogClicked}>
Additional Parameters
</Button>
</div>
)}
<Divider />
<Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
<Typography
@ -137,6 +158,11 @@ const CanvasNode = ({ data }) => {
))}
</Box>
</CardWrapper>
<AdditionalParamsDialog
show={showDialog}
dialogProps={dialogProps}
onCancel={() => setShowDialog(false)}
></AdditionalParamsDialog>
</>
)
}

7
packages/ui/src/views/canvas/NodeInputHandler.js
View File

@ -24,7 +24,7 @@ const CustomWidthTooltip = styled(({ className, ...props }) => <Tooltip {...prop
// ===========================|| NodeInputHandler ||=========================== //
const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false }) => {
const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isAdditionalParams = false }) => {
const theme = useTheme()
const ref = useRef(null)
const { reactFlowInstance } = useContext(flowContext)
@ -96,7 +96,7 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false }) =
</>
)}
{inputParam && (
{((inputParam && !inputParam.additionalParams) || isAdditionalParams) && (
<>
{inputParam.acceptVariable && (
<CustomWidthTooltip placement='left' title={inputParam.type}>
@ -186,7 +186,8 @@ NodeInputHandler.propTypes = {
inputAnchor: PropTypes.object,
inputParam: PropTypes.object,
data: PropTypes.object,
disabled: PropTypes.bool
disabled: PropTypes.bool,
isAdditionalParams: PropTypes.bool
}
export default NodeInputHandler

32
packages/ui/src/views/marketplaces/MarketplaceCanvasNode.js
View File

@ -1,13 +1,15 @@
import PropTypes from 'prop-types'
import { useState } from 'react'
// material-ui
import { styled, useTheme } from '@mui/material/styles'
import { Box, Typography, Divider } from '@mui/material'
import { Box, Typography, Divider, Button } from '@mui/material'
// project imports
import MainCard from 'ui-component/cards/MainCard'
import NodeInputHandler from 'views/canvas/NodeInputHandler'
import NodeOutputHandler from 'views/canvas/NodeOutputHandler'
import AdditionalParamsDialog from 'ui-component/dialog/AdditionalParamsDialog'
// const
import { baseURL } from 'store/constant'
@ -31,6 +33,21 @@ const CardWrapper = styled(MainCard)(({ theme }) => ({
const MarketplaceCanvasNode = ({ data }) => {
const theme = useTheme()
const [showDialog, setShowDialog] = useState(false)
const [dialogProps, setDialogProps] = useState({})
const onDialogClicked = () => {
const dialogProps = {
data,
inputParams: data.inputParams.filter((param) => param.additionalParams),
disabled: true,
confirmButtonName: 'Save',
cancelButtonName: 'Cancel'
}
setDialogProps(dialogProps)
setShowDialog(true)
}
return (
<>
<CardWrapper
@ -93,7 +110,13 @@ const MarketplaceCanvasNode = ({ data }) => {
{data.inputParams.map((inputParam, index) => (
<NodeInputHandler disabled={true} key={index} inputParam={inputParam} data={data} />
))}
{data.inputParams.find((param) => param.additionalParams) && (
<div style={{ textAlign: 'center' }}>
<Button sx={{ borderRadius: 25, width: '90%', mb: 2 }} variant='outlined' onClick={onDialogClicked}>
Additional Parameters
</Button>
</div>
)}
<Divider />
<Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
<Typography
@ -112,6 +135,11 @@ const MarketplaceCanvasNode = ({ data }) => {
))}
</Box>
</CardWrapper>
<AdditionalParamsDialog
show={showDialog}
dialogProps={dialogProps}
onCancel={() => setShowDialog(false)}
></AdditionalParamsDialog>
</>
)
}