Feature/UI updates - Reorganizing Chatflow Dashboard

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

@@ -0,0 +1,276 @@
+import * as React from 'react'
+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 PropTypes from 'prop-types'
+import { uiBaseURL } from '../../store/constant'
+import { generateExportFlowData } from '../../utils/genericHelper'
+import chatflowsApi from 'api/chatflows'
+import useConfirm from 'hooks/useConfirm'
+import useNotifier from '../../utils/useNotifier'
+import { closeSnackbar as closeSnackbarAction, enqueueSnackbar as enqueueSnackbarAction } from '../../store/actions'
+import { IconX } from '@tabler/icons'
+import { useDispatch } from 'react-redux'
+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
+        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 [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) => {
+        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) 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 = {
+            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}
+                onClose={() => setCategoryDialogOpen(false)}
+                tags={categoryValues}
+                setTags={setCategoryValues}
+                onSubmit={saveFlowCategory}
+            />
+        </div>
+    )
+}
+
+FlowListMenu.propTypes = {
+    chatflow: PropTypes.object,
+    updateFlowsApi: PropTypes.object
+}

packages/ui/src/ui-component/button/StyledButton.js

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