Add chat feedback, allowed domains, and speech to text options to chatflow context menu in table view

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

@@ -12,6 +12,9 @@ import FileDownloadIcon from '@mui/icons-material/Downloading'
 import FileDeleteIcon from '@mui/icons-material/Delete'
 import FileCategoryIcon from '@mui/icons-material/Category'
 import PictureInPictureAltIcon from '@mui/icons-material/PictureInPictureAlt'
+import ThumbsUpDownOutlinedIcon from '@mui/icons-material/ThumbsUpDownOutlined'
+import VpnLockOutlinedIcon from '@mui/icons-material/VpnLockOutlined'
+import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined'
 import Button from '@mui/material/Button'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import { IconX } from '@tabler/icons'
@@ -29,6 +32,9 @@ import StarterPromptsDialog from '@/ui-component/dialog/StarterPromptsDialog'
 
 import { generateExportFlowData } from '@/utils/genericHelper'
 import useNotifier from '@/utils/useNotifier'
+import ChatFeedbackDialog from '../dialog/ChatFeedbackDialog'
+import AllowedDomainsDialog from '../dialog/AllowedDomainsDialog'
+import SpeechToTextDialog from '../dialog/SpeechToTextDialog'
 
 const StyledMenu = styled((props) => (
     <Menu
@@ -82,6 +88,12 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
     const open = Boolean(anchorEl)
     const [conversationStartersDialogOpen, setConversationStartersDialogOpen] = useState(false)
     const [conversationStartersDialogProps, setConversationStartersDialogProps] = useState({})
+    const [chatFeedbackDialogOpen, setChatFeedbackDialogOpen] = useState(false)
+    const [chatFeedbackDialogProps, setChatFeedbackDialogProps] = useState({})
+    const [allowedDomainsDialogOpen, setAllowedDomainsDialogOpen] = useState(false)
+    const [allowedDomainsDialogProps, setAllowedDomainsDialogProps] = useState({})
+    const [speechToTextDialogOpen, setSpeechToTextDialogOpen] = useState(false)
+    const [speechToTextDialogProps, setSpeechToTextDialogProps] = useState({})
 
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget)
@@ -105,9 +117,31 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
         setConversationStartersDialogOpen(true)
     }
 
-    const saveFlowStarterPrompts = async () => {
+    const handleFlowChatFeedback = () => {
-        setConversationStartersDialogOpen(false)
+        setAnchorEl(null)
-        await updateFlowsApi.request()
+        setChatFeedbackDialogProps({
+            title: 'Chat Feedback - ' + chatflow.name,
+            chatflow: chatflow
+        })
+        setChatFeedbackDialogOpen(true)
+    }
+
+    const handleAllowedDomains = () => {
+        setAnchorEl(null)
+        setAllowedDomainsDialogProps({
+            title: 'Allowed Domains - ' + chatflow.name,
+            chatflow: chatflow
+        })
+        setAllowedDomainsDialogOpen(true)
+    }
+
+    const handleSpeechToText = () => {
+        setAnchorEl(null)
+        setSpeechToTextDialogProps({
+            title: 'Speech To Text - ' + chatflow.name,
+            chatflow: chatflow
+        })
+        setSpeechToTextDialogOpen(true)
     }
 
     const saveFlowRename = async (chatflowName) => {
@@ -275,6 +309,18 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
                     <PictureInPictureAltIcon />
                     Starter Prompts
                 </MenuItem>
+                <MenuItem onClick={handleFlowChatFeedback} disableRipple>
+                    <ThumbsUpDownOutlinedIcon />
+                    Chat Feedback
+                </MenuItem>
+                <MenuItem onClick={handleAllowedDomains} disableRipple>
+                    <VpnLockOutlinedIcon />
+                    Allowed Domains
+                </MenuItem>
+                <MenuItem onClick={handleSpeechToText} disableRipple>
+                    <MicNoneOutlinedIcon />
+                    Speech To Text
+                </MenuItem>
                 <MenuItem onClick={handleFlowCategory} disableRipple>
                     <FileCategoryIcon />
                     Update Category
@@ -304,9 +350,23 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
             <StarterPromptsDialog
                 show={conversationStartersDialogOpen}
                 dialogProps={conversationStartersDialogProps}
-                onConfirm={saveFlowStarterPrompts}
                 onCancel={() => setConversationStartersDialogOpen(false)}
             />
+            <ChatFeedbackDialog
+                show={chatFeedbackDialogOpen}
+                dialogProps={chatFeedbackDialogProps}
+                onCancel={() => setChatFeedbackDialogOpen(false)}
+            />
+            <AllowedDomainsDialog
+                show={allowedDomainsDialogOpen}
+                dialogProps={allowedDomainsDialogProps}
+                onCancel={() => setAllowedDomainsDialogOpen(false)}
+            />
+            <SpeechToTextDialog
+                show={speechToTextDialogOpen}
+                dialogProps={speechToTextDialogProps}
+                onCancel={() => setSpeechToTextDialogOpen(false)}
+            />
         </div>
     )
 }

packages/ui/src/ui-component/dialog/AllowedDomainsDialog.jsx

@@ -0,0 +1,56 @@
+import { createPortal } from 'react-dom'
+import { useDispatch } from 'react-redux'
+import { useEffect } from 'react'
+import PropTypes from 'prop-types'
+
+// material-ui
+import { Dialog, DialogContent, DialogTitle } from '@mui/material'
+
+// store
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
+import useNotifier from '@/utils/useNotifier'
+
+// Project imports
+import AllowedDomains from '@/ui-component/extended/AllowedDomains'
+
+const AllowedDomainsDialog = ({ show, dialogProps, onCancel }) => {
+    const portalElement = document.getElementById('portal')
+    const dispatch = useDispatch()
+
+    useNotifier()
+
+    useEffect(() => {
+        if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
+        else dispatch({ type: HIDE_CANVAS_DIALOG })
+        return () => dispatch({ type: HIDE_CANVAS_DIALOG })
+    }, [show, dispatch])
+
+    const component = show ? (
+        <Dialog
+            onClose={onCancel}
+            open={show}
+            fullWidth
+            maxWidth='sm'
+            aria-labelledby='alert-dialog-title'
+            aria-describedby='alert-dialog-description'
+        >
+            <DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
+                {dialogProps.title || 'Allowed Domains'}
+            </DialogTitle>
+            <DialogContent>
+                <AllowedDomains dialogProps={dialogProps} />
+            </DialogContent>
+        </Dialog>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+AllowedDomainsDialog.propTypes = {
+    show: PropTypes.bool,
+    dialogProps: PropTypes.object,
+    onCancel: PropTypes.func,
+    onConfirm: PropTypes.func
+}
+
+export default AllowedDomainsDialog

packages/ui/src/ui-component/dialog/ChatFeedbackDialog.jsx

@@ -0,0 +1,56 @@
+import { createPortal } from 'react-dom'
+import { useDispatch } from 'react-redux'
+import { useEffect } from 'react'
+import PropTypes from 'prop-types'
+
+// material-ui
+import { Dialog, DialogContent, DialogTitle } from '@mui/material'
+
+// store
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
+import useNotifier from '@/utils/useNotifier'
+
+// Project imports
+import ChatFeedback from '@/ui-component/extended/ChatFeedback'
+
+const ChatFeedbackDialog = ({ show, dialogProps, onCancel }) => {
+    const portalElement = document.getElementById('portal')
+    const dispatch = useDispatch()
+
+    useNotifier()
+
+    useEffect(() => {
+        if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
+        else dispatch({ type: HIDE_CANVAS_DIALOG })
+        return () => dispatch({ type: HIDE_CANVAS_DIALOG })
+    }, [show, dispatch])
+
+    const component = show ? (
+        <Dialog
+            onClose={onCancel}
+            open={show}
+            fullWidth
+            maxWidth='sm'
+            aria-labelledby='alert-dialog-title'
+            aria-describedby='alert-dialog-description'
+        >
+            <DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
+                {dialogProps.title || 'Allowed Domains'}
+            </DialogTitle>
+            <DialogContent>
+                <ChatFeedback dialogProps={dialogProps} />
+            </DialogContent>
+        </Dialog>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+ChatFeedbackDialog.propTypes = {
+    show: PropTypes.bool,
+    dialogProps: PropTypes.object,
+    onCancel: PropTypes.func,
+    onConfirm: PropTypes.func
+}
+
+export default ChatFeedbackDialog

packages/ui/src/ui-component/dialog/SpeechToTextDialog.jsx

@@ -0,0 +1,56 @@
+import { createPortal } from 'react-dom'
+import { useDispatch } from 'react-redux'
+import { useEffect } from 'react'
+import PropTypes from 'prop-types'
+
+// material-ui
+import { Dialog, DialogContent, DialogTitle } from '@mui/material'
+
+// store
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
+import useNotifier from '@/utils/useNotifier'
+
+// Project imports
+import SpeechToText from '@/ui-component/extended/SpeechToText'
+
+const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => {
+    const portalElement = document.getElementById('portal')
+    const dispatch = useDispatch()
+
+    useNotifier()
+
+    useEffect(() => {
+        if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
+        else dispatch({ type: HIDE_CANVAS_DIALOG })
+        return () => dispatch({ type: HIDE_CANVAS_DIALOG })
+    }, [show, dispatch])
+
+    const component = show ? (
+        <Dialog
+            onClose={onCancel}
+            open={show}
+            fullWidth
+            maxWidth='sm'
+            aria-labelledby='alert-dialog-title'
+            aria-describedby='alert-dialog-description'
+        >
+            <DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
+                {dialogProps.title || 'Allowed Domains'}
+            </DialogTitle>
+            <DialogContent>
+                <SpeechToText dialogProps={dialogProps} />
+            </DialogContent>
+        </Dialog>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+SpeechToTextDialog.propTypes = {
+    show: PropTypes.bool,
+    dialogProps: PropTypes.object,
+    onCancel: PropTypes.func,
+    onConfirm: PropTypes.func
+}
+
+export default SpeechToTextDialog