Sultan
/
Flowise
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Ilango 2024-03-13 10:17:31 +05:30
parent 02963ce0d5
commit ad3d5032a5
4 changed files with 232 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
packages/ui/src/ui-component/button/FlowListMenu.jsx
View File

@ -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 () => {
setConversationStartersDialogOpen(false)
await updateFlowsApi.request()
const handleFlowChatFeedback = () => {
setAnchorEl(null)
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>
)
}

56
packages/ui/src/ui-component/dialog/AllowedDomainsDialog.jsx Normal file
View File

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

56
packages/ui/src/ui-component/dialog/ChatFeedbackDialog.jsx Normal file
View File

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

56
packages/ui/src/ui-component/dialog/SpeechToTextDialog.jsx Normal file
View File

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