add custom tool

2026-06-28 13:00:56 +03:00 · 2023-06-21 18:31:53 +01:00
parent 8c880199cd
commit 70da39629c
28 changed files with 1346 additions and 43 deletions
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'

 // material-ui
-import { styled, useTheme } from '@mui/material/styles'
-import { Box, Grid, Chip, Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { Box, Grid, Typography } from '@mui/material'

 // project imports
 import MainCard from 'ui-component/cards/MainCard'
@@ -27,20 +27,7 @@ const CardWrapper = styled(MainCard)(({ theme }) => ({

 // ===========================|| CONTRACT CARD ||=========================== //

-const ItemCard = ({ isLoading, data, images, onClick }) => {
-    const theme = useTheme()
-
-    const chipSX = {
-        height: 24,
-        padding: '0 6px'
-    }
-
-    const activeChatflowSX = {
-        ...chipSX,
-        color: 'white',
-        backgroundColor: theme.palette.success.dark
-    }
-
+const ItemCard = ({ isLoading, data, images, color, onClick }) => {
    return (
        <>
            {isLoading ? (
@@ -49,7 +36,24 @@ const ItemCard = ({ isLoading, data, images, onClick }) => {
                <CardWrapper border={false} content={false} onClick={onClick}>
                    <Box sx={{ p: 2.25 }}>
                        <Grid container direction='column'>
-                            <div>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center'
+                                }}
+                            >
+                                {color && (
+                                    <div
+                                        style={{
+                                            width: 35,
+                                            height: 35,
+                                            marginRight: 10,
+                                            borderRadius: '50%',
+                                            background: color
+                                        }}
+                                    ></div>
+                                )}
                                <Typography
                                    sx={{ fontSize: '1.5rem', fontWeight: 500, overflowWrap: 'break-word', whiteSpace: 'pre-line' }}
                                >
@@ -61,13 +65,6 @@ const ItemCard = ({ isLoading, data, images, onClick }) => {
                                    {data.description}
                                </span>
                            )}
-                            <Grid sx={{ mt: 1, mb: 1 }} container direction='row'>
-                                {data.deployed && (
-                                    <Grid item>
-                                        <Chip label='Deployed' sx={activeChatflowSX} />
-                                    </Grid>
-                                )}
-                            </Grid>
                            {images && (
                                <div
                                    style={{
@@ -110,6 +107,7 @@ ItemCard.propTypes = {
    isLoading: PropTypes.bool,
    data: PropTypes.object,
    images: PropTypes.array,
+    color: PropTypes.string,
    onClick: PropTypes.func
 }

@@ -0,0 +1,147 @@
+import { useState, useEffect, Fragment } from 'react'
+import { useSelector } from 'react-redux'
+
+import PropTypes from 'prop-types'
+import axios from 'axios'
+
+import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete'
+import { Popper, CircularProgress, TextField, Box, Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+import { baseURL } from 'store/constant'
+
+const StyledPopper = styled(Popper)({
+    boxShadow: '0px 8px 10px -5px rgb(0 0 0 / 20%), 0px 16px 24px 2px rgb(0 0 0 / 14%), 0px 6px 30px 5px rgb(0 0 0 / 12%)',
+    borderRadius: '10px',
+    [`& .${autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 10,
+            margin: 10
+        }
+    }
+})
+
+const fetchList = async ({ name, nodeData }) => {
+    const loadMethod = nodeData.inputParams.find((param) => param.name === name)?.loadMethod
+    const username = localStorage.getItem('username')
+    const password = localStorage.getItem('password')
+
+    let lists = await axios
+        .post(
+            `${baseURL}/api/v1/node-load-method/${nodeData.name}`,
+            { ...nodeData, loadMethod },
+            { auth: username && password ? { username, password } : undefined }
+        )
+        .then(async function (response) {
+            return response.data
+        })
+        .catch(function (error) {
+            console.error(error)
+        })
+    return lists
+}
+
+export const AsyncDropdown = ({
+    name,
+    nodeData,
+    value,
+    onSelect,
+    isCreateNewOption,
+    onCreateNew,
+    disabled = false,
+    disableClearable = false
+}) => {
+    const customization = useSelector((state) => state.customization)
+
+    const [open, setOpen] = useState(false)
+    const [options, setOptions] = useState([])
+    const [loading, setLoading] = useState(false)
+    const findMatchingOptions = (options = [], value) => options.find((option) => option.name === value)
+    const getDefaultOptionValue = () => ''
+    const addNewOption = [{ label: '- Create New -', name: '-create-' }]
+    let [internalValue, setInternalValue] = useState(value ?? 'choose an option')
+
+    useEffect(() => {
+        setLoading(true)
+        ;(async () => {
+            const fetchData = async () => {
+                let response = await fetchList({ name, nodeData })
+                if (isCreateNewOption) setOptions([...response, ...addNewOption])
+                else setOptions([...response])
+                setLoading(false)
+            }
+            fetchData()
+        })()
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    return (
+        <>
+            <Autocomplete
+                id={name}
+                disabled={disabled}
+                disableClearable={disableClearable}
+                size='small'
+                sx={{ width: '100%' }}
+                open={open}
+                onOpen={() => {
+                    setOpen(true)
+                }}
+                onClose={() => {
+                    setOpen(false)
+                }}
+                options={options}
+                value={findMatchingOptions(options, internalValue) || getDefaultOptionValue()}
+                onChange={(e, selection) => {
+                    const value = selection ? selection.name : ''
+                    if (isCreateNewOption && value === '-create-') {
+                        onCreateNew()
+                    } else {
+                        setInternalValue(value)
+                        onSelect(value)
+                    }
+                }}
+                PopperComponent={StyledPopper}
+                loading={loading}
+                renderInput={(params) => (
+                    <TextField
+                        {...params}
+                        value={internalValue}
+                        InputProps={{
+                            ...params.InputProps,
+                            endAdornment: (
+                                <Fragment>
+                                    {loading ? <CircularProgress color='inherit' size={20} /> : null}
+                                    {params.InputProps.endAdornment}
+                                </Fragment>
+                            )
+                        }}
+                    />
+                )}
+                renderOption={(props, option) => (
+                    <Box component='li' {...props}>
+                        <div style={{ display: 'flex', flexDirection: 'column' }}>
+                            <Typography variant='h5'>{option.label}</Typography>
+                            {option.description && (
+                                <Typography sx={{ color: customization.isDarkMode ? '#9e9e9e' : '' }}>{option.description}</Typography>
+                            )}
+                        </div>
+                    </Box>
+                )}
+            />
+        </>
+    )
+}
+
+AsyncDropdown.propTypes = {
+    name: PropTypes.string,
+    nodeData: PropTypes.object,
+    value: PropTypes.string,
+    onSelect: PropTypes.func,
+    onCreateNew: PropTypes.func,
+    disabled: PropTypes.bool,
+    disableClearable: PropTypes.bool,
+    isCreateNewOption: PropTypes.bool
+}
@@ -21,6 +21,7 @@ export const DarkCodeEditor = ({ value, placeholder, disabled = false, type, sty
            onValueChange={onValueChange}
            onMouseUp={onMouseUp}
            onBlur={onBlur}
+            tabSize={4}
            style={{
                ...style,
                background: theme.palette.codeEditor.main
@@ -21,6 +21,7 @@ export const LightCodeEditor = ({ value, placeholder, disabled = false, type, st
            onValueChange={onValueChange}
            onMouseUp={onMouseUp}
            onBlur={onBlur}
+            tabSize={4}
            style={{
                ...style,
                background: theme.palette.card.main
@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'
+import { DataGrid } from '@mui/x-data-grid'
+import { IconPlus } from '@tabler/icons'
+import { Button } from '@mui/material'
+
+export const Grid = ({ columns, rows, style, onRowUpdate, addNewRow }) => {
+    const handleProcessRowUpdate = (newRow) => {
+        onRowUpdate(newRow)
+        return newRow
+    }
+
+    return (
+        <>
+            <Button variant='outlined' onClick={addNewRow} startIcon={<IconPlus />}>
+                Add Item
+            </Button>
+            {rows && columns && (
+                <div style={{ marginTop: 10, height: 300, width: '100%', ...style }}>
+                    <DataGrid
+                        processRowUpdate={handleProcessRowUpdate}
+                        onProcessRowUpdateError={(error) => console.error(error)}
+                        rows={rows}
+                        columns={columns}
+                    />
+                </div>
+            )}
+        </>
+    )
+}
+
+Grid.propTypes = {
+    rows: PropTypes.array,
+    columns: PropTypes.array,
+    style: PropTypes.any,
+    addNewRow: PropTypes.func,
+    onRowUpdate: PropTypes.func
+}