mirror of
https://github.com/farcasclaudiu/Flowise.git
synced 2026-06-28 15:00:57 +03:00
Conversation Starters: Initial Implementation
This commit is contained in:
vinodkiran
@@ -0,0 +1,16 @@
|
||||
.button-container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch; /* For momentum scroll on mobile devices */
|
||||
scrollbar-width: none; /* For Firefox */
|
||||
}
|
||||
|
||||
/*.button-container::-webkit-scrollbar {*/
|
||||
/* display: none; !* For Chrome, Safari, and Opera *!*/
|
||||
/*}*/
|
||||
|
||||
.button {
|
||||
flex: 0 0 auto; /* Don't grow, don't shrink, base width on content */
|
||||
margin: 5px; /* Adjust as needed for spacing between buttons */
|
||||
/* Add additional button styling here */
|
||||
}
|
||||
@@ -1,49 +1,24 @@
|
||||
import Chip from '@mui/material/Chip'
|
||||
import Box from '@mui/material/Box'
|
||||
import PropTypes from 'prop-types'
|
||||
import { MenuItem, Select } from '@mui/material'
|
||||
import { Button } from '@mui/material'
|
||||
import './StarterConversationCard.css'
|
||||
|
||||
const StarterConversationCard = ({ isGrid, chipsData, onChipClick }) => {
|
||||
if (isGrid) {
|
||||
const chipStyle = {
|
||||
margin: '5px',
|
||||
width: 'calc(50% - 10px)'
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
{chipsData.map((chipLabel, index) => (
|
||||
<Chip key={index} label={chipLabel} style={chipStyle} onClick={() => onChipClick(chipLabel)} />
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<Select defaultValue='' onChange={(event) => onChipClick(event.target.value)} displayEmpty fullWidth>
|
||||
<MenuItem value='' disabled>
|
||||
Select a Chip
|
||||
</MenuItem>
|
||||
{chipsData.map((chipLabel, index) => (
|
||||
<MenuItem key={index} value={chipLabel}>
|
||||
{chipLabel}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
const StarterConversationCard = ({ isGrid, starterPrompts, onPromptClick }) => {
|
||||
return (
|
||||
<Box className={'button-container'} sx={{ maxWidth: isGrid ? 'inherit' : '400px' }}>
|
||||
{starterPrompts.map((sp, index) => (
|
||||
<Button variant='outlined' className={'button'} key={index} onClick={(e) => onPromptClick(sp.prompt, e)}>
|
||||
{sp.prompt}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
StarterConversationCard.propTypes = {
|
||||
isGrid: PropTypes.bool,
|
||||
chipsData: PropTypes.arrayOf(PropTypes.string),
|
||||
onChipClick: PropTypes.func
|
||||
starterPrompts: PropTypes.arrayOf(PropTypes.string),
|
||||
onPromptClick: PropTypes.func
|
||||
}
|
||||
|
||||
export default StarterConversationCard
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
import { createPortal } from 'react-dom'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { useState, useEffect } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from 'store/actions'
|
||||
|
||||
// material-ui
|
||||
import { Button, IconButton, Dialog, DialogContent, OutlinedInput, DialogTitle, DialogActions, Box, List, Divider } from '@mui/material'
|
||||
import { IconX, IconTrash, IconPlus } from '@tabler/icons'
|
||||
|
||||
// Project import
|
||||
import { StyledButton } from 'ui-component/button/StyledButton'
|
||||
|
||||
// store
|
||||
import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
|
||||
import useNotifier from 'utils/useNotifier'
|
||||
|
||||
// API
|
||||
import chatflowsApi from 'api/chatflows'
|
||||
|
||||
const ConversationStarterDialog = ({ show, dialogProps, onCancel }) => {
|
||||
const portalElement = document.getElementById('portal')
|
||||
const dispatch = useDispatch()
|
||||
|
||||
useNotifier()
|
||||
|
||||
const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
|
||||
const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
|
||||
|
||||
const [inputFields, setInputFields] = useState([
|
||||
{
|
||||
prompt: ''
|
||||
}
|
||||
])
|
||||
|
||||
const addInputField = () => {
|
||||
setInputFields([
|
||||
...inputFields,
|
||||
{
|
||||
prompt: ''
|
||||
}
|
||||
])
|
||||
}
|
||||
const removeInputFields = (index) => {
|
||||
const rows = [...inputFields]
|
||||
rows.splice(index, 1)
|
||||
setInputFields(rows)
|
||||
}
|
||||
|
||||
const handleChange = (index, evnt) => {
|
||||
const { name, value } = evnt.target
|
||||
const list = [...inputFields]
|
||||
list[index][name] = value
|
||||
setInputFields(list)
|
||||
}
|
||||
|
||||
const onSave = async () => {
|
||||
try {
|
||||
const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, {
|
||||
starterPrompt: JSON.stringify(inputFields)
|
||||
})
|
||||
if (saveResp.data) {
|
||||
enqueueSnackbar({
|
||||
message: 'Conversation Starter Prompts Saved',
|
||||
options: {
|
||||
key: new Date().getTime() + Math.random(),
|
||||
variant: 'success',
|
||||
action: (key) => (
|
||||
<Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
|
||||
<IconX />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
})
|
||||
dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data })
|
||||
}
|
||||
onCancel()
|
||||
} catch (error) {
|
||||
const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
|
||||
enqueueSnackbar({
|
||||
message: `Failed to save Conversation Starter Prompts: ${errorData}`,
|
||||
options: {
|
||||
key: new Date().getTime() + Math.random(),
|
||||
variant: 'error',
|
||||
persist: true,
|
||||
action: (key) => (
|
||||
<Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
|
||||
<IconX />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (dialogProps.chatflow && dialogProps.chatflow.starterPrompt) {
|
||||
try {
|
||||
setInputFields(JSON.parse(dialogProps.chatflow.starterPrompt))
|
||||
} catch (e) {
|
||||
setInputFields([
|
||||
{
|
||||
prompt: ''
|
||||
}
|
||||
])
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
return () => {}
|
||||
}, [dialogProps])
|
||||
|
||||
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'>
|
||||
Set Conversation Starter Prompts
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ p: 2 }}>
|
||||
<List>
|
||||
{inputFields.map((data, index) => {
|
||||
return (
|
||||
<div key={index} style={{ display: 'flex', width: '100%', flexDirection: 'row' }}>
|
||||
<Box sx={{ width: '85%', mb: 1 }}>
|
||||
<OutlinedInput
|
||||
sx={{ width: '100%' }}
|
||||
key={index}
|
||||
type='text'
|
||||
onChange={(e) => handleChange(index, e)}
|
||||
value={data.prompt}
|
||||
name='prompt'
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ width: '10%' }}>
|
||||
{inputFields.length !== 1 && (
|
||||
<IconButton onClick={removeInputFields}>
|
||||
<IconTrash />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ width: '10%' }}>
|
||||
{index === inputFields.length - 1 && (
|
||||
<IconButton onClick={addInputField}>
|
||||
<IconPlus />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Divider />
|
||||
<StyledButton variant='contained' color={'error'} onClick={onCancel}>
|
||||
Cancel
|
||||
</StyledButton>
|
||||
<StyledButton variant='contained' onClick={onSave}>
|
||||
Save
|
||||
</StyledButton>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
) : null
|
||||
|
||||
return createPortal(component, portalElement)
|
||||
}
|
||||
|
||||
ConversationStarterDialog.propTypes = {
|
||||
show: PropTypes.bool,
|
||||
dialogProps: PropTypes.object,
|
||||
onCancel: PropTypes.func
|
||||
}
|
||||
|
||||
export default ConversationStarterDialog
|
||||
Reference in New Issue
Block a user