farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-22 11:01:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

UX Changes: Ability to set category (tags) to each chatflow; corresponding changes to table display and table search

Browse Source
This commit is contained in:
vinodkiran
2023-11-16 08:29:06 +05:30
parent 8d22b706fb
commit a7b34848cd
11 changed files with 220 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/server/src/database/entities/ChatFlow.ts
+3
View File
@@ -36,4 +36,7 @@ export class ChatFlow implements IChatFlow {
@UpdateDateColumn()
updatedDate: Date
@Column({ nullable: true, type: 'text' })
category?: string
}
packages/server/src/database/migrations/mysql/1699900910291-AddCategoryToChatFlow.ts
+12
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\`;`)
}
}
packages/server/src/database/migrations/mysql/index.ts
+3 -1
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'
export const mysqlMigrations = [
Init1693840429259,
@@ -19,5 +20,6 @@ export const mysqlMigrations = [
AddAnalytic1694432361423,
AddChatHistory1694658767766,
AddAssistantEntity1699325775451,
AddUsedToolsToChatMessage1699481607341
AddUsedToolsToChatMessage1699481607341,
AddCategoryToChatFlow1699900910291
]
packages/server/src/database/migrations/postgres/1699900910291-AddCategoryToChatFlow.ts
+11
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";`)
}
}
packages/server/src/database/migrations/postgres/index.ts
+3 -1
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'
export const postgresMigrations = [
Init1693891895163,
@@ -19,5 +20,6 @@ export const postgresMigrations = [
AddAnalytic1694432361423,
AddChatHistory1694658756136,
AddAssistantEntity1699325775451,
AddUsedToolsToChatMessage1699481607341
AddUsedToolsToChatMessage1699481607341,
AddCategoryToChatFlow1699900910291
]
packages/server/src/database/migrations/sqlite/1699900910291-AddCategoryToChatFlow.ts
+11
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";`)
}
}
packages/server/src/database/migrations/sqlite/index.ts
+3 -1
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'
export const sqliteMigrations = [
Init1693835579790,
@@ -19,5 +20,6 @@ export const sqliteMigrations = [
AddAnalytic1694432361423,
AddChatHistory1694657778173,
AddAssistantEntity1699325775451,
AddUsedToolsToChatMessage1699481607341
AddUsedToolsToChatMessage1699481607341,
AddCategoryToChatFlow1699900910291
]
packages/ui/src/ui-component/button/FlowListMenu.js
+50 -5
View File
@@ -7,6 +7,7 @@ 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 PropTypes from 'prop-types'
@@ -22,6 +23,7 @@ import ConfirmDialog from '../dialog/ConfirmDialog'
import SaveChatflowDialog from '../dialog/SaveChatflowDialog'
import { useState } from 'react'
import useApi from '../../hooks/useApi'
import TagDialog from '../dialog/TagDialog'
const StyledMenu = styled((props) => (
<Menu
@@ -64,13 +66,15 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
const { confirm } = useConfirm()
const dispatch = useDispatch()
const [flowDialogOpen, setFlowDialogOpen] = useState(false)
const [categoryValues, setCategoryValues] = useState([])
const [categoryDialogOpen, setCategoryDialogOpen] = useState(false)
const updateChatflowApi = useApi(chatflowsApi.updateChatflow)
// ==============================|| Snackbar ||============================== //
useNotifier()
const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
const [anchorEl, setAnchorEl] = React.useState(null)
const open = Boolean(anchorEl)
const handleClick = (event) => {
@@ -79,12 +83,10 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
const handleClose = () => {
setAnchorEl(null)
}
const handleFlowRename = () => {
setAnchorEl(null)
setFlowDialogOpen(true)
}
const saveFlowRename = async (chatflowName) => {
const updateBody = {
name: chatflowName,
@@ -110,7 +112,39 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
})
}
}
const handleFlowCategory = () => {
setAnchorEl(null)
if (chatflow.category) setCategoryValues(chatflow.category.split(';'))
else setCategoryValues([])
setCategoryDialogOpen(true)
}
const saveFlowCategory = async (categories) => {
// 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 = {
@@ -143,7 +177,6 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
}
}
}
const handleDuplicate = () => {
setAnchorEl(null)
try {
@@ -206,6 +239,11 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
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
@@ -222,6 +260,13 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
onCancel={() => setFlowDialogOpen(false)}
onConfirm={saveFlowRename}
/>
<TagDialog
isOpen={categoryDialogOpen}
onClose={() => setCategoryDialogOpen(false)}
tags={categoryValues}
setTags={setCategoryValues}
onSubmit={saveFlowCategory}
/>
</div>
)
}
packages/ui/src/ui-component/dialog/TagDialog.js
+91
View File
@@ -0,0 +1,91 @@
import { useState } 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 } from '@mui/material'
const TagDialog = ({ isOpen, onClose, tags, setTags, onSubmit }) => {
const [inputValue, setInputValue] = useState('')
const handleInputChange = (event) => {
setInputValue(event.target.value)
}
const handleInputKeyDown = (event) => {
if (event.key === 'Enter' && inputValue.trim()) {
event.preventDefault()
if (!tags.includes(inputValue)) {
setTags([...tags, inputValue])
setInputValue('')
}
}
}
const handleDeleteTag = (tagToDelete) => {
setTags(tags.filter((tag) => tag !== tagToDelete))
}
const handleSubmit = (event) => {
event.preventDefault()
onSubmit(tags)
onClose()
}
return (
<Dialog
fullWidth
maxWidth='xs'
open={isOpen}
onClose={onClose}
aria-labelledby='tag-dialog-title'
aria-describedby='tag-dialog-description'
>
<DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
Set Chatflow Category Tags
</DialogTitle>
<DialogContent>
<Box>
<form onSubmit={handleSubmit}>
<div style={{ marginBottom: 20 }}>
{tags.map((tag, index) => (
<Chip
key={index}
label={tag}
onDelete={() => handleDeleteTag(tag)}
style={{ marginRight: 5, marginBottom: 5 }}
/>
))}
</div>
<TextField
fullWidth
value={inputValue}
onChange={handleInputChange}
onKeyDown={handleInputKeyDown}
label='Add a tag'
variant='outlined'
/>
</form>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>Cancel</Button>
<Button variant='contained' onClick={handleSubmit}>
Submit
</Button>
</DialogActions>
</Dialog>
)
}
TagDialog.propTypes = {
isOpen: PropTypes.bool,
onClose: PropTypes.func,
tags: PropTypes.array,
setTags: PropTypes.func,
onSubmit: PropTypes.func
}
export default TagDialog
packages/ui/src/ui-component/table/FlowListTable.js
+28 -7
View File
@@ -11,6 +11,7 @@ import TableRow from '@mui/material/TableRow'
import Paper from '@mui/material/Paper'
import { Button, Stack, Typography } from '@mui/material'
import FlowListMenu from '../button/FlowListMenu'
import Chip from '@mui/material/Chip'
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
@@ -47,13 +48,16 @@ export const FlowListTable = ({ data, images, filterFunction, updateFlowsApi })
<StyledTableCell component='th' scope='row' style={{ width: '20%' }} key='0'>
Name
</StyledTableCell>
<StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '35%' }} key='1'>
Nodes (Showing first 5)
<StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '25%' }} key='1'>
Category
</StyledTableCell>
<StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '30%' }} key='2'>
Last Modified Date
Nodes (Showing first 5)
</StyledTableCell>
<StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '15%' }} key='3'>
Last Modified Date
</StyledTableCell>
<StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '10%' }} key='4'>
Actions
</StyledTableCell>
</TableRow>
@@ -68,8 +72,25 @@ export const FlowListTable = ({ data, images, filterFunction, updateFlowsApi })
<Button onClick={() => goToCanvas(row)}>{row.templateName || row.name}</Button>
</Typography>
</TableCell>
<TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} 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 sx={{ display: { xs: 'none', sm: 'table-cell' } }} key='2'>
{images[row.id] && (
<div
style={{
@@ -108,10 +129,10 @@ export const FlowListTable = ({ data, images, filterFunction, updateFlowsApi })
</div>
)}
</TableCell>
<TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} key='2'>
{moment(row.updatedDate).format('dddd, MMMM Do, YYYY h:mm:ss A')}
</TableCell>
<TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} key='3'>
{moment(row.updatedDate).format('MMMM Do, YYYY')}
</TableCell>
<TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} key='4'>
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} justifyContent='center' alignItems='center'>
{/*<Button sx={{ marginRight: '10px' }} onClick={() => goToCanvas(row)}>*/}
{/* OPEN*/}
packages/ui/src/views/chatflows/index.js
+5 -2
View File
@@ -54,7 +54,10 @@ const Chatflows = () => {
}
function filterFlows(data) {
return data.name.toLowerCase().indexOf(search.toLowerCase()) > -1
return (
data.name.toLowerCase().indexOf(search.toLowerCase()) > -1 ||
(data.category && data.category.toLowerCase().indexOf(search.toLowerCase()) > -1)
)
}
const onLoginClick = (username, password) => {
@@ -137,7 +140,7 @@ const Chatflows = () => {
size='small'
sx={{ display: { xs: 'none', sm: 'block' }, marginLeft: 3 }}
variant='outlined'
placeholder='Search Chatflows'
placeholder='Search name or category'
onChange={onSearchChange}
InputProps={{
startAdornment: (