diff --git a/packages/ui/src/ui-component/table/ToolsListTable.jsx b/packages/ui/src/ui-component/table/ToolsListTable.jsx new file mode 100644 index 000000000..f02e6366d --- /dev/null +++ b/packages/ui/src/ui-component/table/ToolsListTable.jsx @@ -0,0 +1,144 @@ +import PropTypes from 'prop-types' +import { useSelector } from 'react-redux' +import { styled } from '@mui/material/styles' +import { tableCellClasses } from '@mui/material/TableCell' +import { + Button, + Paper, + Skeleton, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography, + useTheme +} from '@mui/material' + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + borderColor: theme.palette.grey[900] + 25, + + [`&.${tableCellClasses.head}`]: { + color: theme.palette.grey[900] + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 14, + height: 64 + } +})) + +const StyledTableRow = styled(TableRow)(() => ({ + // hide last border + '&:last-child td, &:last-child th': { + border: 0 + } +})) + +export const ToolsTable = ({ data, isLoading, onSelect }) => { + const theme = useTheme() + const customization = useSelector((state) => state.customization) + + return ( + <> + + + + + + Name + + Description + +   + + + + + {isLoading ? ( + <> + + + + + + + + + + + + + + + + + + + + + + + + ) : ( + <> + {data?.map((row, index) => ( + + +
+ + + + + + + {row.description || ''} + + + + + ))} + + )} + +
+ + + ) +} + +ToolsTable.propTypes = { + data: PropTypes.array, + isLoading: PropTypes.bool, + onSelect: PropTypes.func +} diff --git a/packages/ui/src/views/tools/index.jsx b/packages/ui/src/views/tools/index.jsx index 358f1e487..5840935a5 100644 --- a/packages/ui/src/views/tools/index.jsx +++ b/packages/ui/src/views/tools/index.jsx @@ -1,7 +1,7 @@ import { useEffect, useState, useRef } from 'react' // material-ui -import { Box, Stack, Button, ButtonGroup, Skeleton } from '@mui/material' +import { Box, Stack, Button, ButtonGroup, Skeleton, ToggleButtonGroup, ToggleButton } from '@mui/material' // project imports import MainCard from '@/ui-component/cards/MainCard' @@ -10,6 +10,7 @@ import { gridSpacing } from '@/store/constant' import ToolEmptySVG from '@/assets/images/tools_empty.svg' import { StyledButton } from '@/ui-component/button/StyledButton' import ToolDialog from './ToolDialog' +import { ToolsTable } from '@/ui-component/table/ToolsListTable' // API import toolsApi from '@/api/tools' @@ -18,22 +19,31 @@ import toolsApi from '@/api/tools' import useApi from '@/hooks/useApi' // icons -import { IconPlus, IconFileUpload } from '@tabler/icons-react' +import { IconPlus, IconFileUpload, IconLayoutGrid, IconList } from '@tabler/icons-react' import ViewHeader from '@/layout/MainLayout/ViewHeader' import ErrorBoundary from '@/ErrorBoundary' +import { useTheme } from '@mui/material/styles' // ==============================|| CHATFLOWS ||============================== // const Tools = () => { + const theme = useTheme() const getAllToolsApi = useApi(toolsApi.getAllTools) const [isLoading, setLoading] = useState(true) const [error, setError] = useState(null) const [showDialog, setShowDialog] = useState(false) const [dialogProps, setDialogProps] = useState({}) + const [view, setView] = useState(localStorage.getItem('toolsDisplayStyle') || 'card') const inputRef = useRef(null) + const handleChange = (event, nextView) => { + if (nextView === null) return + localStorage.setItem('toolsDisplayStyle', nextView) + setView(nextView) + } + const onUploadFile = (file) => { try { const dialogProp = { @@ -118,6 +128,38 @@ const Tools = () => { ) : ( + + + + + + + +