mirror of
https://github.com/farcasclaudiu/Flowise.git
synced 2026-06-28 19:00:59 +03:00
Merge branch 'main' into FEATURE/conversation-starters
This commit is contained in:
vinodkiran
@@ -0,0 +1,291 @@
|
||||
import { useState } from 'react'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import { styled, alpha } from '@mui/material/styles'
|
||||
import Menu from '@mui/material/Menu'
|
||||
import MenuItem from '@mui/material/MenuItem'
|
||||
import EditIcon from '@mui/icons-material/Edit'
|
||||
import Divider from '@mui/material/Divider'
|
||||
import FileCopyIcon from '@mui/icons-material/FileCopy'
|
||||
import FileDownloadIcon from '@mui/icons-material/Downloading'
|
||||
import FileDeleteIcon from '@mui/icons-material/Delete'
|
||||
import FileCategoryIcon from '@mui/icons-material/Category'
|
||||
import Button from '@mui/material/Button'
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
|
||||
import { IconX } from '@tabler/icons'
|
||||
|
||||
import chatflowsApi from 'api/chatflows'
|
||||
|
||||
import useApi from '../../hooks/useApi'
|
||||
import useConfirm from 'hooks/useConfirm'
|
||||
import { uiBaseURL } from '../../store/constant'
|
||||
import { closeSnackbar as closeSnackbarAction, enqueueSnackbar as enqueueSnackbarAction } from '../../store/actions'
|
||||
|
||||
import ConfirmDialog from '../dialog/ConfirmDialog'
|
||||
import SaveChatflowDialog from '../dialog/SaveChatflowDialog'
|
||||
import TagDialog from '../dialog/TagDialog'
|
||||
|
||||
import { generateExportFlowData } from '../../utils/genericHelper'
|
||||
import useNotifier from '../../utils/useNotifier'
|
||||
|
||||
const StyledMenu = styled((props) => (
|
||||
<Menu
|
||||
elevation={0}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
))(({ theme }) => ({
|
||||
'& .MuiPaper-root': {
|
||||
borderRadius: 6,
|
||||
marginTop: theme.spacing(1),
|
||||
minWidth: 180,
|
||||
boxShadow:
|
||||
'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
|
||||
'& .MuiMenu-list': {
|
||||
padding: '4px 0'
|
||||
},
|
||||
'& .MuiMenuItem-root': {
|
||||
'& .MuiSvgIcon-root': {
|
||||
fontSize: 18,
|
||||
color: theme.palette.text.secondary,
|
||||
marginRight: theme.spacing(1.5)
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
export default function FlowListMenu({ chatflow, updateFlowsApi }) {
|
||||
const { confirm } = useConfirm()
|
||||
const dispatch = useDispatch()
|
||||
const updateChatflowApi = useApi(chatflowsApi.updateChatflow)
|
||||
|
||||
useNotifier()
|
||||
const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
|
||||
const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
|
||||
|
||||
const [flowDialogOpen, setFlowDialogOpen] = useState(false)
|
||||
const [categoryDialogOpen, setCategoryDialogOpen] = useState(false)
|
||||
const [categoryDialogProps, setCategoryDialogProps] = useState({})
|
||||
const [anchorEl, setAnchorEl] = useState(null)
|
||||
const open = Boolean(anchorEl)
|
||||
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null)
|
||||
}
|
||||
|
||||
const handleFlowRename = () => {
|
||||
setAnchorEl(null)
|
||||
setFlowDialogOpen(true)
|
||||
}
|
||||
|
||||
const saveFlowRename = async (chatflowName) => {
|
||||
const updateBody = {
|
||||
name: chatflowName,
|
||||
chatflow
|
||||
}
|
||||
try {
|
||||
await updateChatflowApi.request(chatflow.id, updateBody)
|
||||
await updateFlowsApi.request()
|
||||
} catch (error) {
|
||||
const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
|
||||
enqueueSnackbar({
|
||||
message: errorData,
|
||||
options: {
|
||||
key: new Date().getTime() + Math.random(),
|
||||
variant: 'error',
|
||||
persist: true,
|
||||
action: (key) => (
|
||||
<Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
|
||||
<IconX />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleFlowCategory = () => {
|
||||
setAnchorEl(null)
|
||||
if (chatflow.category) {
|
||||
setCategoryDialogProps({
|
||||
category: chatflow.category.split(';')
|
||||
})
|
||||
}
|
||||
setCategoryDialogOpen(true)
|
||||
}
|
||||
|
||||
const saveFlowCategory = async (categories) => {
|
||||
setCategoryDialogOpen(false)
|
||||
// save categories as string
|
||||
const categoryTags = categories.join(';')
|
||||
const updateBody = {
|
||||
category: categoryTags,
|
||||
chatflow
|
||||
}
|
||||
try {
|
||||
await updateChatflowApi.request(chatflow.id, updateBody)
|
||||
await updateFlowsApi.request()
|
||||
} catch (error) {
|
||||
const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
|
||||
enqueueSnackbar({
|
||||
message: errorData,
|
||||
options: {
|
||||
key: new Date().getTime() + Math.random(),
|
||||
variant: 'error',
|
||||
persist: true,
|
||||
action: (key) => (
|
||||
<Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
|
||||
<IconX />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
setAnchorEl(null)
|
||||
const confirmPayload = {
|
||||
title: `Delete`,
|
||||
description: `Delete chatflow ${chatflow.name}?`,
|
||||
confirmButtonName: 'Delete',
|
||||
cancelButtonName: 'Cancel'
|
||||
}
|
||||
const isConfirmed = await confirm(confirmPayload)
|
||||
|
||||
if (isConfirmed) {
|
||||
try {
|
||||
await chatflowsApi.deleteChatflow(chatflow.id)
|
||||
await updateFlowsApi.request()
|
||||
} catch (error) {
|
||||
const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
|
||||
enqueueSnackbar({
|
||||
message: errorData,
|
||||
options: {
|
||||
key: new Date().getTime() + Math.random(),
|
||||
variant: 'error',
|
||||
persist: true,
|
||||
action: (key) => (
|
||||
<Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
|
||||
<IconX />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleDuplicate = () => {
|
||||
setAnchorEl(null)
|
||||
try {
|
||||
localStorage.setItem('duplicatedFlowData', chatflow.flowData)
|
||||
window.open(`${uiBaseURL}/canvas`, '_blank')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
setAnchorEl(null)
|
||||
try {
|
||||
const flowData = JSON.parse(chatflow.flowData)
|
||||
let dataStr = JSON.stringify(generateExportFlowData(flowData), null, 2)
|
||||
let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
|
||||
|
||||
let exportFileDefaultName = `${chatflow.name} Chatflow.json`
|
||||
|
||||
let linkElement = document.createElement('a')
|
||||
linkElement.setAttribute('href', dataUri)
|
||||
linkElement.setAttribute('download', exportFileDefaultName)
|
||||
linkElement.click()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
id='demo-customized-button'
|
||||
aria-controls={open ? 'demo-customized-menu' : undefined}
|
||||
aria-haspopup='true'
|
||||
aria-expanded={open ? 'true' : undefined}
|
||||
disableElevation
|
||||
onClick={handleClick}
|
||||
endIcon={<KeyboardArrowDownIcon />}
|
||||
>
|
||||
Options
|
||||
</Button>
|
||||
<StyledMenu
|
||||
id='demo-customized-menu'
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'demo-customized-button'
|
||||
}}
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<MenuItem onClick={handleFlowRename} disableRipple>
|
||||
<EditIcon />
|
||||
Rename
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleDuplicate} disableRipple>
|
||||
<FileCopyIcon />
|
||||
Duplicate
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleExport} disableRipple>
|
||||
<FileDownloadIcon />
|
||||
Export
|
||||
</MenuItem>
|
||||
<Divider sx={{ my: 0.5 }} />
|
||||
<MenuItem onClick={handleFlowCategory} disableRipple>
|
||||
<FileCategoryIcon />
|
||||
Update Category
|
||||
</MenuItem>
|
||||
<Divider sx={{ my: 0.5 }} />
|
||||
<MenuItem onClick={handleDelete} disableRipple>
|
||||
<FileDeleteIcon />
|
||||
Delete
|
||||
</MenuItem>
|
||||
</StyledMenu>
|
||||
<ConfirmDialog />
|
||||
<SaveChatflowDialog
|
||||
show={flowDialogOpen}
|
||||
dialogProps={{
|
||||
title: `Rename Chatflow`,
|
||||
confirmButtonName: 'Rename',
|
||||
cancelButtonName: 'Cancel'
|
||||
}}
|
||||
onCancel={() => setFlowDialogOpen(false)}
|
||||
onConfirm={saveFlowRename}
|
||||
/>
|
||||
<TagDialog
|
||||
isOpen={categoryDialogOpen}
|
||||
dialogProps={categoryDialogProps}
|
||||
onClose={() => setCategoryDialogOpen(false)}
|
||||
onSubmit={saveFlowCategory}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
FlowListMenu.propTypes = {
|
||||
chatflow: PropTypes.object,
|
||||
updateFlowsApi: PropTypes.object
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { styled } from '@mui/material/styles'
|
||||
import { Button } from '@mui/material'
|
||||
import MuiToggleButton from '@mui/material/ToggleButton'
|
||||
|
||||
export const StyledButton = styled(Button)(({ theme, color = 'primary' }) => ({
|
||||
color: 'white',
|
||||
@@ -9,3 +10,10 @@ export const StyledButton = styled(Button)(({ theme, color = 'primary' }) => ({
|
||||
backgroundImage: `linear-gradient(rgb(0 0 0/10%) 0 0)`
|
||||
}
|
||||
}))
|
||||
|
||||
export const StyledToggleButton = styled(MuiToggleButton)(({ theme, color = 'primary' }) => ({
|
||||
'&.Mui-selected, &.Mui-selected:hover': {
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette[color].main
|
||||
}
|
||||
}))
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import Dialog from '@mui/material/Dialog'
|
||||
import Box from '@mui/material/Box'
|
||||
import Button from '@mui/material/Button'
|
||||
import TextField from '@mui/material/TextField'
|
||||
import Chip from '@mui/material/Chip'
|
||||
import PropTypes from 'prop-types'
|
||||
import { DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material'
|
||||
|
||||
const TagDialog = ({ isOpen, dialogProps, onClose, onSubmit }) => {
|
||||
const [inputValue, setInputValue] = useState('')
|
||||
const [categoryValues, setCategoryValues] = useState([])
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
setInputValue(event.target.value)
|
||||
}
|
||||
|
||||
const handleInputKeyDown = (event) => {
|
||||
if (event.key === 'Enter' && inputValue.trim()) {
|
||||
event.preventDefault()
|
||||
if (!categoryValues.includes(inputValue)) {
|
||||
setCategoryValues([...categoryValues, inputValue])
|
||||
setInputValue('')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteTag = (categoryToDelete) => {
|
||||
setCategoryValues(categoryValues.filter((category) => category !== categoryToDelete))
|
||||
}
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault()
|
||||
let newCategories = [...categoryValues]
|
||||
if (inputValue.trim() && !categoryValues.includes(inputValue)) {
|
||||
newCategories = [...newCategories, inputValue]
|
||||
setCategoryValues(newCategories)
|
||||
}
|
||||
onSubmit(newCategories)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (dialogProps.category) setCategoryValues(dialogProps.category)
|
||||
|
||||
return () => {
|
||||
setInputValue('')
|
||||
setCategoryValues([])
|
||||
}
|
||||
}, [dialogProps])
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
fullWidth
|
||||
maxWidth='xs'
|
||||
open={isOpen}
|
||||
onClose={onClose}
|
||||
aria-labelledby='category-dialog-title'
|
||||
aria-describedby='category-dialog-description'
|
||||
>
|
||||
<DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
|
||||
Set Chatflow Category Tags
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box>
|
||||
<form onSubmit={handleSubmit}>
|
||||
{categoryValues.length > 0 && (
|
||||
<div style={{ marginBottom: 10 }}>
|
||||
{categoryValues.map((category, index) => (
|
||||
<Chip
|
||||
key={index}
|
||||
label={category}
|
||||
onDelete={() => handleDeleteTag(category)}
|
||||
style={{ marginRight: 5, marginBottom: 5 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<TextField
|
||||
sx={{ mt: 2 }}
|
||||
fullWidth
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
label='Add a tag'
|
||||
variant='outlined'
|
||||
/>
|
||||
<Typography variant='body2' sx={{ fontStyle: 'italic', mt: 1 }} color='text.secondary'>
|
||||
Enter a tag and press enter to add it to the list. You can add as many tags as you want.
|
||||
</Typography>
|
||||
</form>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
<Button variant='contained' onClick={handleSubmit}>
|
||||
Submit
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
TagDialog.propTypes = {
|
||||
isOpen: PropTypes.bool,
|
||||
dialogProps: PropTypes.object,
|
||||
onClose: PropTypes.func,
|
||||
onSubmit: PropTypes.func
|
||||
}
|
||||
|
||||
export default TagDialog
|
||||
@@ -7,6 +7,7 @@ import rehypeMathjax from 'rehype-mathjax'
|
||||
import rehypeRaw from 'rehype-raw'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import remarkMath from 'remark-math'
|
||||
import axios from 'axios'
|
||||
|
||||
// material-ui
|
||||
import {
|
||||
@@ -28,7 +29,7 @@ import DatePicker from 'react-datepicker'
|
||||
import robotPNG from 'assets/images/robot.png'
|
||||
import userPNG from 'assets/images/account.png'
|
||||
import msgEmptySVG from 'assets/images/message_empty.svg'
|
||||
import { IconFileExport, IconEraser, IconX } from '@tabler/icons'
|
||||
import { IconFileExport, IconEraser, IconX, IconDownload } from '@tabler/icons'
|
||||
|
||||
// Project import
|
||||
import { MemoizedReactMarkdown } from 'ui-component/markdown/MemoizedReactMarkdown'
|
||||
@@ -48,6 +49,7 @@ import useConfirm from 'hooks/useConfirm'
|
||||
// Utils
|
||||
import { isValidURL, removeDuplicateURL } from 'utils/genericHelper'
|
||||
import useNotifier from 'utils/useNotifier'
|
||||
import { baseURL } from 'store/constant'
|
||||
|
||||
import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from 'store/actions'
|
||||
|
||||
@@ -130,6 +132,7 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
}
|
||||
if (chatmsg.sourceDocuments) msg.sourceDocuments = JSON.parse(chatmsg.sourceDocuments)
|
||||
if (chatmsg.usedTools) msg.usedTools = JSON.parse(chatmsg.usedTools)
|
||||
if (chatmsg.fileAnnotations) msg.fileAnnotations = JSON.parse(chatmsg.fileAnnotations)
|
||||
|
||||
if (!Object.prototype.hasOwnProperty.call(obj, chatPK)) {
|
||||
obj[chatPK] = {
|
||||
@@ -253,6 +256,7 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
}
|
||||
if (chatmsg.sourceDocuments) obj.sourceDocuments = JSON.parse(chatmsg.sourceDocuments)
|
||||
if (chatmsg.usedTools) obj.usedTools = JSON.parse(chatmsg.usedTools)
|
||||
if (chatmsg.fileAnnotations) obj.fileAnnotations = JSON.parse(chatmsg.fileAnnotations)
|
||||
|
||||
loadedMessages.push(obj)
|
||||
}
|
||||
@@ -318,6 +322,26 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
window.open(data, '_blank')
|
||||
}
|
||||
|
||||
const downloadFile = async (fileAnnotation) => {
|
||||
try {
|
||||
const response = await axios.post(
|
||||
`${baseURL}/api/v1/openai-assistants-file`,
|
||||
{ fileName: fileAnnotation.fileName },
|
||||
{ responseType: 'blob' }
|
||||
)
|
||||
const blob = new Blob([response.data], { type: response.headers['content-type'] })
|
||||
const downloadUrl = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = downloadUrl
|
||||
link.download = fileAnnotation.fileName
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
} catch (error) {
|
||||
console.error('Download failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const onSourceDialogClick = (data, title) => {
|
||||
setSourceDialogProps({ data, title })
|
||||
setSourceDialogOpen(true)
|
||||
@@ -648,10 +672,37 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
{message.message}
|
||||
</MemoizedReactMarkdown>
|
||||
</div>
|
||||
{message.fileAnnotations && (
|
||||
<div style={{ display: 'block', flexDirection: 'row', width: '100%' }}>
|
||||
{message.fileAnnotations.map((fileAnnotation, index) => {
|
||||
return (
|
||||
<Button
|
||||
sx={{
|
||||
fontSize: '0.85rem',
|
||||
textTransform: 'none',
|
||||
mb: 1,
|
||||
mr: 1
|
||||
}}
|
||||
key={index}
|
||||
variant='outlined'
|
||||
onClick={() => downloadFile(fileAnnotation)}
|
||||
endIcon={
|
||||
<IconDownload color={theme.palette.primary.main} />
|
||||
}
|
||||
>
|
||||
{fileAnnotation.fileName}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{message.sourceDocuments && (
|
||||
<div style={{ display: 'block', flexDirection: 'row', width: '100%' }}>
|
||||
{removeDuplicateURL(message).map((source, index) => {
|
||||
const URL = isValidURL(source.metadata.source)
|
||||
const URL =
|
||||
source.metadata && source.metadata.source
|
||||
? isValidURL(source.metadata.source)
|
||||
: undefined
|
||||
return (
|
||||
<Chip
|
||||
size='small'
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import moment from 'moment'
|
||||
import { styled } from '@mui/material/styles'
|
||||
import Table from '@mui/material/Table'
|
||||
import TableBody from '@mui/material/TableBody'
|
||||
import TableCell, { tableCellClasses } from '@mui/material/TableCell'
|
||||
import TableContainer from '@mui/material/TableContainer'
|
||||
import TableHead from '@mui/material/TableHead'
|
||||
import TableRow from '@mui/material/TableRow'
|
||||
import Paper from '@mui/material/Paper'
|
||||
import Chip from '@mui/material/Chip'
|
||||
import { Button, Stack, Typography } from '@mui/material'
|
||||
import FlowListMenu from '../button/FlowListMenu'
|
||||
|
||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
[`&.${tableCellClasses.head}`]: {
|
||||
backgroundColor: theme.palette.common.black,
|
||||
color: theme.palette.common.white
|
||||
},
|
||||
[`&.${tableCellClasses.body}`]: {
|
||||
fontSize: 14
|
||||
}
|
||||
}))
|
||||
|
||||
const StyledTableRow = styled(TableRow)(({ theme }) => ({
|
||||
'&:nth-of-type(odd)': {
|
||||
backgroundColor: theme.palette.action.hover
|
||||
},
|
||||
// hide last border
|
||||
'&:last-child td, &:last-child th': {
|
||||
border: 0
|
||||
}
|
||||
}))
|
||||
|
||||
export const FlowListTable = ({ data, images, filterFunction, updateFlowsApi }) => {
|
||||
const navigate = useNavigate()
|
||||
const goToCanvas = (selectedChatflow) => {
|
||||
navigate(`/canvas/${selectedChatflow.id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<TableContainer style={{ marginTop: '30', border: 1 }} component={Paper}>
|
||||
<Table sx={{ minWidth: 650 }} size='small' aria-label='a dense table'>
|
||||
<TableHead>
|
||||
<TableRow sx={{ marginTop: '10', backgroundColor: 'primary' }}>
|
||||
<StyledTableCell component='th' scope='row' style={{ width: '20%' }} key='0'>
|
||||
Name
|
||||
</StyledTableCell>
|
||||
<StyledTableCell style={{ width: '25%' }} key='1'>
|
||||
Category
|
||||
</StyledTableCell>
|
||||
<StyledTableCell style={{ width: '30%' }} key='2'>
|
||||
Nodes
|
||||
</StyledTableCell>
|
||||
<StyledTableCell style={{ width: '15%' }} key='3'>
|
||||
Last Modified Date
|
||||
</StyledTableCell>
|
||||
<StyledTableCell style={{ width: '10%' }} key='4'>
|
||||
Actions
|
||||
</StyledTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.filter(filterFunction).map((row, index) => (
|
||||
<StyledTableRow key={index}>
|
||||
<TableCell key='0'>
|
||||
<Typography
|
||||
sx={{ fontSize: '1.2rem', fontWeight: 500, overflowWrap: 'break-word', whiteSpace: 'pre-line' }}
|
||||
>
|
||||
<Button onClick={() => goToCanvas(row)}>{row.templateName || row.name}</Button>
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell key='1'>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
marginTop: 5
|
||||
}}
|
||||
>
|
||||
|
||||
{row.category &&
|
||||
row.category
|
||||
.split(';')
|
||||
.map((tag, index) => (
|
||||
<Chip key={index} label={tag} style={{ marginRight: 5, marginBottom: 5 }} />
|
||||
))}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell key='2'>
|
||||
{images[row.id] && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
marginTop: 5
|
||||
}}
|
||||
>
|
||||
{images[row.id].slice(0, images[row.id].length > 5 ? 5 : images[row.id].length).map((img) => (
|
||||
<div
|
||||
key={img}
|
||||
style={{
|
||||
width: 35,
|
||||
height: 35,
|
||||
marginRight: 5,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'white',
|
||||
marginTop: 5
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }}
|
||||
alt=''
|
||||
src={img}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{images[row.id].length > 5 && (
|
||||
<Typography
|
||||
sx={{ alignItems: 'center', display: 'flex', fontSize: '.8rem', fontWeight: 200 }}
|
||||
>
|
||||
+ {images[row.id].length - 5} More
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell key='3'>{moment(row.updatedDate).format('MMMM Do, YYYY')}</TableCell>
|
||||
<TableCell key='4'>
|
||||
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} justifyContent='center' alignItems='center'>
|
||||
<FlowListMenu chatflow={row} updateFlowsApi={updateFlowsApi} />
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
FlowListTable.propTypes = {
|
||||
data: PropTypes.object,
|
||||
images: PropTypes.array,
|
||||
filterFunction: PropTypes.func,
|
||||
updateFlowsApi: PropTypes.object
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import * as React from 'react'
|
||||
import ViewListIcon from '@mui/icons-material/ViewList'
|
||||
import ViewModuleIcon from '@mui/icons-material/ViewModule'
|
||||
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
|
||||
import { StyledToggleButton } from '../button/StyledButton'
|
||||
|
||||
export default function Toolbar() {
|
||||
const [view, setView] = React.useState('list')
|
||||
|
||||
const handleChange = (event, nextView) => {
|
||||
setView(nextView)
|
||||
}
|
||||
|
||||
return (
|
||||
<ToggleButtonGroup value={view} exclusive onChange={handleChange}>
|
||||
<StyledToggleButton variant='contained' value='list' aria-label='list'>
|
||||
<ViewListIcon />
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton variant='contained' value='module' aria-label='module'>
|
||||
<ViewModuleIcon />
|
||||
</StyledToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user