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

packages/server/src/database/entities/ChatFlow.ts

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

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

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

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

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

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

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

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

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

@@ -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'>
+                            <StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '25%' }} key='1'>
-                                Nodes (Showing first 5)
+                                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

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