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

Merge pull request #1231 from vinodkiran/FEATURE/UI-Updates 

Feature/UI updates - Reorganizing Chatflow Dashboard
This commit is contained in:
Henry Heng 2023-11-21 11:02:41 +00:00 committed by GitHub
parent 65304bb84b c7bf75e259
commit d4e68f2a79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 872 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/server/src/database/entities/ChatFlow.ts
View File

@ -36,4 +36,7 @@ export class ChatFlow implements IChatFlow {
@UpdateDateColumn()
updatedDate: Date
@Column({ nullable: true, type: 'text' })
category?: string
}

12
packages/server/src/database/migrations/mysql/1699900910291-AddCategoryToChatFlow.ts Normal file
View File

@ -0,0 +1,12 @@
import { MigrationInterface, QueryRunner } from 'typeorm'
export class AddCategoryToChatFlow1699900910291 implements MigrationInterface {
public async up(queryRunner: QueryRunner): Promise<void> {
const columnExists = await queryRunner.hasColumn('chat_flow', 'category')
if (!columnExists) queryRunner.query(`ALTER TABLE \`chat_flow\` ADD COLUMN \`category\` TEXT;`)
}
public async down(queryRunner: QueryRunner): Promise<void> {
await queryRunner.query(`ALTER TABLE \`chat_flow\` DROP COLUMN \`category\`;`)
}
}

2
packages/server/src/database/migrations/mysql/index.ts
View File

@ -8,6 +8,7 @@ import { AddAnalytic1694432361423 } from './1694432361423-AddAnalytic'
import { AddChatHistory1694658767766 } from './1694658767766-AddChatHistory'
import { AddAssistantEntity1699325775451 } from './1699325775451-AddAssistantEntity'
import { AddUsedToolsToChatMessage1699481607341 } from './1699481607341-AddUsedToolsToChatMessage'
import { AddCategoryToChatFlow1699900910291 } from './1699900910291-AddCategoryToChatFlow'
import { AddFileAnnotationsToChatMessage1700271021237 } from './1700271021237-AddFileAnnotationsToChatMessage'
export const mysqlMigrations = [
@ -21,5 +22,6 @@ export const mysqlMigrations = [
AddChatHistory1694658767766,
AddAssistantEntity1699325775451,
AddUsedToolsToChatMessage1699481607341,
AddCategoryToChatFlow1699900910291,
AddFileAnnotationsToChatMessage1700271021237
]

11
packages/server/src/database/migrations/postgres/1699900910291-AddCategoryToChatFlow.ts Normal file
View File

@ -0,0 +1,11 @@
import { MigrationInterface, QueryRunner } from 'typeorm'
export class AddCategoryToChatFlow1699900910291 implements MigrationInterface {
public async up(queryRunner: QueryRunner): Promise<void> {
await queryRunner.query(`ALTER TABLE "chat_flow" ADD COLUMN IF NOT EXISTS "category" TEXT;`)
}
public async down(queryRunner: QueryRunner): Promise<void> {
await queryRunner.query(`ALTER TABLE "chat_flow" DROP COLUMN "category";`)
}
}

2
packages/server/src/database/migrations/postgres/index.ts
View File

@ -8,6 +8,7 @@ import { AddAnalytic1694432361423 } from './1694432361423-AddAnalytic'
import { AddChatHistory1694658756136 } from './1694658756136-AddChatHistory'
import { AddAssistantEntity1699325775451 } from './1699325775451-AddAssistantEntity'
import { AddUsedToolsToChatMessage1699481607341 } from './1699481607341-AddUsedToolsToChatMessage'
import { AddCategoryToChatFlow1699900910291 } from './1699900910291-AddCategoryToChatFlow'
import { AddFileAnnotationsToChatMessage1700271021237 } from './1700271021237-AddFileAnnotationsToChatMessage'
export const postgresMigrations = [
@ -21,5 +22,6 @@ export const postgresMigrations = [
AddChatHistory1694658756136,
AddAssistantEntity1699325775451,
AddUsedToolsToChatMessage1699481607341,
AddCategoryToChatFlow1699900910291,
AddFileAnnotationsToChatMessage1700271021237
]

11
packages/server/src/database/migrations/sqlite/1699900910291-AddCategoryToChatFlow.ts Normal file
View File

@ -0,0 +1,11 @@
import { MigrationInterface, QueryRunner } from 'typeorm'
export class AddCategoryToChatFlow1699900910291 implements MigrationInterface {
public async up(queryRunner: QueryRunner): Promise<void> {
await queryRunner.query(`ALTER TABLE "chat_flow" ADD COLUMN "category" TEXT;`)
}
public async down(queryRunner: QueryRunner): Promise<void> {
await queryRunner.query(`ALTER TABLE "chat_flow" DROP COLUMN "category";`)
}
}

2
packages/server/src/database/migrations/sqlite/index.ts
View File

@ -8,6 +8,7 @@ import { AddAnalytic1694432361423 } from './1694432361423-AddAnalytic'
import { AddChatHistory1694657778173 } from './1694657778173-AddChatHistory'
import { AddAssistantEntity1699325775451 } from './1699325775451-AddAssistantEntity'
import { AddUsedToolsToChatMessage1699481607341 } from './1699481607341-AddUsedToolsToChatMessage'
import { AddCategoryToChatFlow1699900910291 } from './1699900910291-AddCategoryToChatFlow'
import { AddFileAnnotationsToChatMessage1700271021237 } from './1700271021237-AddFileAnnotationsToChatMessage'
export const sqliteMigrations = [
@ -21,5 +22,6 @@ export const sqliteMigrations = [
AddChatHistory1694657778173,
AddAssistantEntity1699325775451,
AddUsedToolsToChatMessage1699481607341,
AddCategoryToChatFlow1699900910291,
AddFileAnnotationsToChatMessage1700271021237
]

8
packages/server/src/index.ts
View File

@ -356,8 +356,12 @@ export class App {
this.AppDataSource.getRepository(ChatFlow).merge(chatflow, updateChatFlow)
const result = await this.AppDataSource.getRepository(ChatFlow).save(chatflow)
// Update chatflowpool inSync to false, to build Langchain again because data has been changed
this.chatflowPool.updateInSync(chatflow.id, false)
// chatFlowPool is initialized only when a flow is opened
// if the user attempts to rename/update category without opening any flow, chatFlowPool will be undefined
if (this.chatflowPool) {
// Update chatflowpool inSync to false, to build Langchain again because data has been changed
this.chatflowPool.updateInSync(chatflow.id, false)
}
return res.json(result)
})

291
packages/ui/src/ui-component/button/FlowListMenu.js Normal file
View File

@ -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
}

8
packages/ui/src/ui-component/button/StyledButton.js
View File

@ -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
}
}))

110
packages/ui/src/ui-component/dialog/TagDialog.js Normal file
View File

@ -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

152
packages/ui/src/ui-component/table/FlowListTable.js Normal file
View File

@ -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
}}
>
&nbsp;
{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
}

24
packages/ui/src/ui-component/toolbar/Toolbar.js Normal file
View File

@ -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>
)
}

71
packages/ui/src/views/apikey/index.js
View File

@ -16,7 +16,11 @@ import {
Paper,
IconButton,
Popover,
Typography
Typography,
Toolbar,
TextField,
InputAdornment,
ButtonGroup
} from '@mui/material'
import { useTheme } from '@mui/material/styles'
@ -37,7 +41,7 @@ import useConfirm from 'hooks/useConfirm'
import useNotifier from 'utils/useNotifier'
// Icons
import { IconTrash, IconEdit, IconCopy, IconX, IconPlus, IconEye, IconEyeOff } from '@tabler/icons'
import { IconTrash, IconEdit, IconCopy, IconX, IconPlus, IconEye, IconEyeOff, IconSearch } from '@tabler/icons'
import APIEmptySVG from 'assets/images/api_empty.svg'
// ==============================|| APIKey ||============================== //
@ -59,6 +63,14 @@ const APIKey = () => {
const [showApiKeys, setShowApiKeys] = useState([])
const openPopOver = Boolean(anchorEl)
const [search, setSearch] = useState('')
const onSearchChange = (event) => {
setSearch(event.target.value)
}
function filterKeys(data) {
return data.keyName.toLowerCase().indexOf(search.toLowerCase()) > -1
}
const { confirm } = useConfirm()
const getAllAPIKeysApi = useApi(apiKeyApi.getAllAPIKeys)
@ -171,12 +183,53 @@ const APIKey = () => {
<>
<MainCard sx={{ background: customization.isDarkMode ? theme.palette.common.black : '' }}>
<Stack flexDirection='row'>
<h1>API Keys&nbsp;</h1>
<Box sx={{ flexGrow: 1 }} />
<StyledButton variant='contained' sx={{ color: 'white', mr: 1, height: 37 }} onClick={addNew} startIcon={<IconPlus />}>
Create Key
</StyledButton>
<Box sx={{ flexGrow: 1 }}>
<Toolbar
disableGutters={true}
style={{
margin: 1,
padding: 1,
paddingBottom: 10,
display: 'flex',
justifyContent: 'space-between',
width: '100%'
}}
>
<h1>API Keys&nbsp;</h1>
<TextField
size='small'
sx={{ display: { xs: 'none', sm: 'block' }, ml: 3 }}
variant='outlined'
placeholder='Search key name'
onChange={onSearchChange}
InputProps={{
startAdornment: (
<InputAdornment position='start'>
<IconSearch />
</InputAdornment>
)
}}
/>
<Box sx={{ flexGrow: 1 }} />
<ButtonGroup
sx={{ maxHeight: 40 }}
disableElevation
variant='contained'
aria-label='outlined primary button group'
>
<ButtonGroup disableElevation aria-label='outlined primary button group'>
<StyledButton
variant='contained'
sx={{ color: 'white', mr: 1, height: 37 }}
onClick={addNew}
startIcon={<IconPlus />}
>
Create Key
</StyledButton>
</ButtonGroup>
</ButtonGroup>
</Toolbar>
</Box>
</Stack>
{apiKeys.length <= 0 && (
<Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
@ -199,7 +252,7 @@ const APIKey = () => {
</TableRow>
</TableHead>
<TableBody>
{apiKeys.map((key, index) => (
{apiKeys.filter(filterKeys).map((key, index) => (
<TableRow key={index} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
<TableCell component='th' scope='row'>
{key.keyName}

123
packages/ui/src/views/chatflows/index.js
View File

@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
// material-ui
import { Grid, Box, Stack } from '@mui/material'
import { Grid, Box, Stack, Toolbar, ToggleButton, ButtonGroup, InputAdornment, TextField } from '@mui/material'
import { useTheme } from '@mui/material/styles'
// project imports
@ -11,7 +11,6 @@ import MainCard from 'ui-component/cards/MainCard'
import ItemCard from 'ui-component/cards/ItemCard'
import { gridSpacing } from 'store/constant'
import WorkflowEmptySVG from 'assets/images/workflow_empty.svg'
import { StyledButton } from 'ui-component/button/StyledButton'
import LoginDialog from 'ui-component/dialog/LoginDialog'
// API
@ -24,7 +23,11 @@ import useApi from 'hooks/useApi'
import { baseURL } from 'store/constant'
// icons
import { IconPlus } from '@tabler/icons'
import { IconPlus, IconSearch, IconLayoutGrid, IconList } from '@tabler/icons'
import * as React from 'react'
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
import { FlowListTable } from '../../ui-component/table/FlowListTable'
import { StyledButton } from '../../ui-component/button/StyledButton'
// ==============================|| CHATFLOWS ||============================== //
@ -35,10 +38,28 @@ const Chatflows = () => {
const [isLoading, setLoading] = useState(true)
const [images, setImages] = useState({})
const [search, setSearch] = useState('')
const [loginDialogOpen, setLoginDialogOpen] = useState(false)
const [loginDialogProps, setLoginDialogProps] = useState({})
const getAllChatflowsApi = useApi(chatflowsApi.getAllChatflows)
const [view, setView] = React.useState(localStorage.getItem('flowDisplayStyle') || 'card')
const handleChange = (event, nextView) => {
localStorage.setItem('flowDisplayStyle', nextView)
setView(nextView)
}
const onSearchChange = (event) => {
setSearch(event.target.value)
}
function filterFlows(data) {
return (
data.name.toLowerCase().indexOf(search.toLowerCase()) > -1 ||
(data.category && data.category.toLowerCase().indexOf(search.toLowerCase()) > -1)
)
}
const onLoginClick = (username, password) => {
localStorage.setItem('username', username)
@ -102,26 +123,86 @@ const Chatflows = () => {
return (
<MainCard sx={{ background: customization.isDarkMode ? theme.palette.common.black : '' }}>
<Stack flexDirection='row'>
<h1>Chatflows</h1>
<Grid sx={{ mb: 1.25 }} container direction='row'>
<Box sx={{ flexGrow: 1 }} />
<Grid item>
<StyledButton variant='contained' sx={{ color: 'white' }} onClick={addNew} startIcon={<IconPlus />}>
Add New
</StyledButton>
<Stack flexDirection='column'>
<Box sx={{ flexGrow: 1 }}>
<Toolbar
disableGutters={true}
style={{
margin: 1,
padding: 1,
paddingBottom: 10,
display: 'flex',
justifyContent: 'space-between',
width: '100%'
}}
>
<h1>Chatflows</h1>
<TextField
size='small'
sx={{ display: { xs: 'none', sm: 'block' }, ml: 3 }}
variant='outlined'
placeholder='Search name or category'
onChange={onSearchChange}
InputProps={{
startAdornment: (
<InputAdornment position='start'>
<IconSearch />
</InputAdornment>
)
}}
/>
<Box sx={{ flexGrow: 1 }} />
<ButtonGroup sx={{ maxHeight: 40 }} disableElevation variant='contained' aria-label='outlined primary button group'>
<ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
<ToggleButtonGroup sx={{ maxHeight: 40 }} value={view} color='primary' exclusive onChange={handleChange}>
<ToggleButton
sx={{ color: theme?.customization?.isDarkMode ? 'white' : 'inherit' }}
variant='contained'
value='card'
title='Card View'
selectedColor='#00abc0'
>
<IconLayoutGrid />
</ToggleButton>
<ToggleButton
sx={{ color: theme?.customization?.isDarkMode ? 'white' : 'inherit' }}
variant='contained'
value='list'
title='List View'
>
<IconList />
</ToggleButton>
</ToggleButtonGroup>
</ButtonGroup>
<Box sx={{ width: 5 }} />
<ButtonGroup disableElevation aria-label='outlined primary button group'>
<StyledButton variant='contained' onClick={addNew} startIcon={<IconPlus />}>
Add New
</StyledButton>
</ButtonGroup>
</ButtonGroup>
</Toolbar>
</Box>
{!isLoading && (!view || view === 'card') && getAllChatflowsApi.data && (
<Grid container spacing={gridSpacing}>
{getAllChatflowsApi.data.filter(filterFlows).map((data, index) => (
<Grid key={index} item lg={3} md={4} sm={6} xs={12}>
<ItemCard onClick={() => goToCanvas(data)} data={data} images={images[data.id]} />
</Grid>
))}
</Grid>
</Grid>
)}
{!isLoading && view === 'list' && getAllChatflowsApi.data && (
<FlowListTable
sx={{ mt: 20 }}
data={getAllChatflowsApi.data}
images={images}
filterFunction={filterFlows}
updateFlowsApi={getAllChatflowsApi}
/>
)}
</Stack>
<Grid container spacing={gridSpacing}>
{!isLoading &&
getAllChatflowsApi.data &&
getAllChatflowsApi.data.map((data, index) => (
<Grid key={index} item lg={3} md={4} sm={6} xs={12}>
<ItemCard onClick={() => goToCanvas(data)} data={data} images={images[data.id]} />
</Grid>
))}
</Grid>
{!isLoading && (!getAllChatflowsApi.data || getAllChatflowsApi.data.length === 0) && (
<Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
<Box sx={{ p: 2, height: 'auto' }}>

88
packages/ui/src/views/credentials/index.js
View File

@ -4,7 +4,23 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
import moment from 'moment'
// material-ui
import { Button, Box, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, IconButton } from '@mui/material'
import {
Button,
Box,
Stack,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
IconButton,
Toolbar,
TextField,
InputAdornment,
ButtonGroup
} from '@mui/material'
import { useTheme } from '@mui/material/styles'
// project imports
@ -25,7 +41,7 @@ import useConfirm from 'hooks/useConfirm'
import useNotifier from 'utils/useNotifier'
// Icons
import { IconTrash, IconEdit, IconX, IconPlus } from '@tabler/icons'
import { IconTrash, IconEdit, IconX, IconPlus, IconSearch } from '@tabler/icons'
import CredentialEmptySVG from 'assets/images/credential_empty.svg'
// const
@ -56,6 +72,14 @@ const Credentials = () => {
const getAllCredentialsApi = useApi(credentialsApi.getAllCredentials)
const getAllComponentsCredentialsApi = useApi(credentialsApi.getAllComponentsCredentials)
const [search, setSearch] = useState('')
const onSearchChange = (event) => {
setSearch(event.target.value)
}
function filterCredentials(data) {
return data.credentialName.toLowerCase().indexOf(search.toLowerCase()) > -1
}
const listCredential = () => {
const dialogProp = {
title: 'Add New Credential',
@ -168,17 +192,53 @@ const Credentials = () => {
<>
<MainCard sx={{ background: customization.isDarkMode ? theme.palette.common.black : '' }}>
<Stack flexDirection='row'>
<h1>Credentials&nbsp;</h1>
<Box sx={{ flexGrow: 1 }} />
<StyledButton
variant='contained'
sx={{ color: 'white', mr: 1, height: 37 }}
onClick={listCredential}
startIcon={<IconPlus />}
>
Add Credential
</StyledButton>
<Box sx={{ flexGrow: 1 }}>
<Toolbar
disableGutters={true}
style={{
margin: 1,
padding: 1,
paddingBottom: 10,
display: 'flex',
justifyContent: 'space-between',
width: '100%'
}}
>
<h1>Credentials&nbsp;</h1>
<TextField
size='small'
sx={{ display: { xs: 'none', sm: 'block' }, ml: 3 }}
variant='outlined'
placeholder='Search credential name'
onChange={onSearchChange}
InputProps={{
startAdornment: (
<InputAdornment position='start'>
<IconSearch />
</InputAdornment>
)
}}
/>
<Box sx={{ flexGrow: 1 }} />
<ButtonGroup
sx={{ maxHeight: 40 }}
disableElevation
variant='contained'
aria-label='outlined primary button group'
>
<ButtonGroup disableElevation aria-label='outlined primary button group'>
<StyledButton
variant='contained'
sx={{ color: 'white', mr: 1, height: 37 }}
onClick={listCredential}
startIcon={<IconPlus />}
>
Add Credential
</StyledButton>
</ButtonGroup>
</ButtonGroup>
</Toolbar>
</Box>
</Stack>
{credentials.length <= 0 && (
<Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
@ -205,7 +265,7 @@ const Credentials = () => {
</TableRow>
</TableHead>
<TableBody>
{credentials.map((credential, index) => (
{credentials.filter(filterCredentials).map((credential, index) => (
<TableRow key={index} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
<TableCell component='th' scope='row'>
<div