add fix where tags are not added when submit is clicked without enter

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

@@ -1,4 +1,7 @@
-import * as React from 'react'
+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'
@@ -10,21 +13,22 @@ 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 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 { useState } from 'react'
-import useApi from '../../hooks/useApi'
 import TagDialog from '../dialog/TagDialog'
 
+import { generateExportFlowData } from '../../utils/genericHelper'
+import useNotifier from '../../utils/useNotifier'
+
 const StyledMenu = styled((props) => (
     <Menu
         elevation={0}
@@ -64,28 +68,31 @@ const StyledMenu = styled((props) => (
 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 [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,
@@ -111,13 +118,19 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
             })
         }
     }
+
     const handleFlowCategory = () => {
         setAnchorEl(null)
-        if (chatflow.category) setCategoryValues(chatflow.category.split(';'))
-        else setCategoryValues([])
+        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 = {
@@ -144,6 +157,7 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
             })
         }
     }
+
     const handleDelete = async () => {
         setAnchorEl(null)
         const confirmPayload = {
@@ -176,6 +190,7 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
             }
         }
     }
+
     const handleDuplicate = () => {
         setAnchorEl(null)
         try {
@@ -185,6 +200,7 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
             console.error(e)
         }
     }
+
     const handleExport = () => {
         setAnchorEl(null)
         try {
@@ -261,9 +277,8 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
             />
             <TagDialog
                 isOpen={categoryDialogOpen}
+                dialogProps={categoryDialogProps}
                 onClose={() => setCategoryDialogOpen(false)}
-                tags={categoryValues}
-                setTags={setCategoryValues}
                 onSubmit={saveFlowCategory}
             />
         </div>

packages/ui/src/ui-component/dialog/TagDialog.js

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import Dialog from '@mui/material/Dialog'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
@@ -7,8 +7,9 @@ import Chip from '@mui/material/Chip'
 import PropTypes from 'prop-types'
 import { DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material'
 
-const TagDialog = ({ isOpen, onClose, tags, setTags, onSubmit }) => {
+const TagDialog = ({ isOpen, dialogProps, onClose, onSubmit }) => {
     const [inputValue, setInputValue] = useState('')
+    const [categoryValues, setCategoryValues] = useState([])
 
     const handleInputChange = (event) => {
         setInputValue(event.target.value)
@@ -17,34 +18,44 @@ const TagDialog = ({ isOpen, onClose, tags, setTags, onSubmit }) => {
     const handleInputKeyDown = (event) => {
         if (event.key === 'Enter' && inputValue.trim()) {
             event.preventDefault()
-            if (!tags.includes(inputValue)) {
-                setTags([...tags, inputValue])
+            if (!categoryValues.includes(inputValue)) {
+                setCategoryValues([...categoryValues, inputValue])
                 setInputValue('')
             }
         }
     }
 
-    const handleDeleteTag = (tagToDelete) => {
-        setTags(tags.filter((tag) => tag !== tagToDelete))
+    const handleDeleteTag = (categoryToDelete) => {
+        setCategoryValues(categoryValues.filter((category) => category !== categoryToDelete))
     }
 
     const handleSubmit = (event) => {
         event.preventDefault()
-        if (inputValue.trim() && !tags.includes(inputValue)) {
-            setTags([...tags, inputValue])
+        let newCategories = [...categoryValues]
+        if (inputValue.trim() && !categoryValues.includes(inputValue)) {
+            newCategories = [...newCategories, inputValue]
+            setCategoryValues(newCategories)
         }
-        onSubmit(tags)
-        onClose()
+        onSubmit(newCategories)
     }
 
+    useEffect(() => {
+        if (dialogProps.category) setCategoryValues(dialogProps.category)
+
+        return () => {
+            setInputValue('')
+            setCategoryValues([])
+        }
+    }, [dialogProps])
+
     return (
         <Dialog
             fullWidth
             maxWidth='xs'
             open={isOpen}
             onClose={onClose}
-            aria-labelledby='tag-dialog-title'
-            aria-describedby='tag-dialog-description'
+            aria-labelledby='category-dialog-title'
+            aria-describedby='category-dialog-description'
         >
             <DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
                 Set Chatflow Category Tags
@@ -52,17 +63,20 @@ const TagDialog = ({ isOpen, onClose, tags, setTags, onSubmit }) => {
             <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>
+                        {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}
@@ -70,7 +84,7 @@ const TagDialog = ({ isOpen, onClose, tags, setTags, onSubmit }) => {
                             label='Add a tag'
                             variant='outlined'
                         />
-                        <Typography variant='body2' sx={{ fontStyle: 'italic' }} color='text.secondary'>
+                        <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>
@@ -88,9 +102,8 @@ const TagDialog = ({ isOpen, onClose, tags, setTags, onSubmit }) => {
 
 TagDialog.propTypes = {
     isOpen: PropTypes.bool,
+    dialogProps: PropTypes.object,
     onClose: PropTypes.func,
-    tags: PropTypes.array,
-    setTags: PropTypes.func,
     onSubmit: PropTypes.func
 }
 

packages/ui/src/ui-component/table/FlowListTable.js

@@ -9,9 +9,9 @@ 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'
-import Chip from '@mui/material/Chip'
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
     [`&.${tableCellClasses.head}`]: {