farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-28 21:00:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

Conversation Starter: Setup of prompts from the chatflow dashboard and other refactorings.

Browse Source
This commit is contained in:
vinodkiran
2023-11-23 22:38:45 +05:30
parent 4b1c404e4c
commit 6881231ea4
7 changed files with 104 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/ui-component/button/FlowListMenu.js
+22
View File
@@ -11,6 +11,7 @@ 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 PictureInPictureAltIcon from '@mui/icons-material/PictureInPictureAlt'
import Button from '@mui/material/Button'
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
import { IconX } from '@tabler/icons'
@@ -28,6 +29,7 @@ import TagDialog from '../dialog/TagDialog'
import { generateExportFlowData } from '../../utils/genericHelper'
import useNotifier from '../../utils/useNotifier'
import StarterPromptsDialog from '../dialog/StarterPromptsDialog'
const StyledMenu = styled((props) => (
<Menu
@@ -79,6 +81,8 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
const [categoryDialogProps, setCategoryDialogProps] = useState({})
const [anchorEl, setAnchorEl] = useState(null)
const open = Boolean(anchorEl)
const [conversationStartersDialogOpen, setConversationStartersDialogOpen] = useState(false)
const [conversationStartersDialogProps, setConversationStartersDialogProps] = useState({})
const handleClick = (event) => {
setAnchorEl(event.currentTarget)
@@ -93,6 +97,15 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
setFlowDialogOpen(true)
}
const handleFlowStarterPrompts = () => {
setAnchorEl(null)
setConversationStartersDialogProps({
title: 'Starter Prompts - ' + chatflow.name,
chatflow: chatflow
})
setConversationStartersDialogOpen(true)
}
const saveFlowRename = async (chatflowName) => {
const updateBody = {
name: chatflowName,
@@ -254,6 +267,10 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
Export
</MenuItem>
<Divider sx={{ my: 0.5 }} />
<MenuItem onClick={handleFlowStarterPrompts} disableRipple>
<PictureInPictureAltIcon />
Starter Prompts
</MenuItem>
<MenuItem onClick={handleFlowCategory} disableRipple>
<FileCategoryIcon />
Update Category
@@ -281,6 +298,11 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
onClose={() => setCategoryDialogOpen(false)}
onSubmit={saveFlowCategory}
/>
<StarterPromptsDialog
show={conversationStartersDialogOpen}
dialogProps={conversationStartersDialogProps}
onCancel={() => setConversationStartersDialogOpen(false)}
/>
</div>
)
}
packages/ui/src/ui-component/cards/StarterConversationCard.css → packages/ui/src/ui-component/cards/StarterPromptsCard.css
View File
packages/ui/src/ui-component/cards/StarterConversationCard.js → packages/ui/src/ui-component/cards/StarterPromptsCard.js
+4 -4
View File
@@ -1,9 +1,9 @@
import Box from '@mui/material/Box'
import PropTypes from 'prop-types'
import { Button } from '@mui/material'
import './StarterConversationCard.css'
import './StarterPromptsCard.css'
const StarterConversationCard = ({ isGrid, starterPrompts, onPromptClick }) => {
const StarterPromptsCard = ({ isGrid, starterPrompts, onPromptClick }) => {
return (
<Box className={'button-container'} sx={{ maxWidth: isGrid ? 'inherit' : '400px' }}>
{starterPrompts.map((sp, index) => (
@@ -15,10 +15,10 @@ const StarterConversationCard = ({ isGrid, starterPrompts, onPromptClick }) => {
)
}
StarterConversationCard.propTypes = {
StarterPromptsCard.propTypes = {
isGrid: PropTypes.bool,
starterPrompts: PropTypes.arrayOf(PropTypes.string),
onPromptClick: PropTypes.func
}
export default StarterConversationCard
export default StarterPromptsCard
packages/ui/src/ui-component/dialog/ConversationStarterDialog.js → packages/ui/src/ui-component/dialog/StarterPromptsDialog.js
+62 -24
View File
@@ -5,7 +5,18 @@ 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 {
Button,
IconButton,
Dialog,
DialogContent,
OutlinedInput,
DialogTitle,
DialogActions,
Box,
List,
InputAdornment
} from '@mui/material'
import { IconX, IconTrash, IconPlus } from '@tabler/icons'
// Project import
@@ -18,7 +29,7 @@ import useNotifier from 'utils/useNotifier'
// API
import chatflowsApi from 'api/chatflows'
const ConversationStarterDialog = ({ show, dialogProps, onCancel }) => {
const StarterPromptsDialog = ({ show, dialogProps, onCancel }) => {
const portalElement = document.getElementById('portal')
const dispatch = useDispatch()
@@ -56,10 +67,13 @@ const ConversationStarterDialog = ({ show, dialogProps, onCancel }) => {
const onSave = async () => {
try {
const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, {
chatbotConfig: {
starterPrompts: JSON.stringify(inputFields)
let value = {
starterPrompts: {
...inputFields
}
}
const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, {
chatbotConfig: JSON.stringify(value)
})
if (saveResp.data) {
enqueueSnackbar({
@@ -96,16 +110,30 @@ const ConversationStarterDialog = ({ show, dialogProps, onCancel }) => {
}
useEffect(() => {
if (dialogProps.chatflow && dialogProps.chatbotConfig.starterPrompts) {
if (dialogProps.chatflow && dialogProps.chatflow.chatbotConfig) {
try {
setInputFields(JSON.parse(dialogProps.chatbotConfig.starterPrompts))
let chatbotConfig = JSON.parse(dialogProps.chatflow.chatbotConfig)
if (chatbotConfig.starterPrompts) {
let inputFields = []
Object.getOwnPropertyNames(chatbotConfig.starterPrompts).forEach((key) => {
if (chatbotConfig.starterPrompts[key]) {
inputFields.push(chatbotConfig.starterPrompts[key])
}
})
setInputFields(inputFields)
} else {
setInputFields([
{
prompt: ''
}
])
}
} catch (e) {
setInputFields([
{
prompt: ''
}
])
console.error(e)
}
}
@@ -131,28 +159,34 @@ const ConversationStarterDialog = ({ show, dialogProps, onCancel }) => {
{dialogProps.title || 'Conversation Starter Prompts'}
</DialogTitle>
<DialogContent>
<Box sx={{ p: 2 }}>
<Box sx={{ '& > :not(style)': { m: 1 }, pt: 2 }}>
<List>
{inputFields.map((data, index) => {
return (
<div key={index} style={{ display: 'flex', width: '100%', flexDirection: 'row' }}>
<Box sx={{ width: '85%', mb: 1 }}>
<div key={index} style={{ display: 'flex', width: '100%' }}>
<Box sx={{ width: '90%', mb: 1 }}>
<OutlinedInput
sx={{ width: '100%' }}
key={index}
type='text'
onChange={(e) => handleChange(index, e)}
size='small'
value={data.prompt}
name='prompt'
endAdornment={
<InputAdornment position='end' sx={{ padding: '2px' }}>
<IconButton
size='small'
disabled={inputFields.length === 1}
onClick={removeInputFields}
edge='end'
>
<IconTrash />
</IconButton>
</InputAdornment>
}
/>
</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}>
@@ -160,6 +194,13 @@ const ConversationStarterDialog = ({ show, dialogProps, onCancel }) => {
</IconButton>
)}
</Box>
{/*<Box sx={{ width: '10%' }}>*/}
{/* {inputFields.length !== 1 && (*/}
{/* <IconButton onClick={removeInputFields}>*/}
{/* <IconTrash />*/}
{/* </IconButton>*/}
{/* )}*/}
{/*</Box>*/}
</div>
)
})}
@@ -167,10 +208,7 @@ const ConversationStarterDialog = ({ show, dialogProps, onCancel }) => {
</Box>
</DialogContent>
<DialogActions>
<Divider />
<StyledButton variant='contained' color={'error'} onClick={onCancel}>
Cancel
</StyledButton>
<Button onClick={onCancel}>Cancel</Button>
<StyledButton variant='contained' onClick={onSave}>
Save
</StyledButton>
@@ -181,10 +219,10 @@ const ConversationStarterDialog = ({ show, dialogProps, onCancel }) => {
return createPortal(component, portalElement)
}
ConversationStarterDialog.propTypes = {
StarterPromptsDialog.propTypes = {
show: PropTypes.bool,
dialogProps: PropTypes.object,
onCancel: PropTypes.func
}
export default ConversationStarterDialog
export default StarterPromptsDialog
packages/ui/src/views/canvas/CanvasHeader.js
+2 -2
View File
@@ -16,7 +16,7 @@ import SaveChatflowDialog from 'ui-component/dialog/SaveChatflowDialog'
import APICodeDialog from 'views/chatflows/APICodeDialog'
import AnalyseFlowDialog from 'ui-component/dialog/AnalyseFlowDialog'
import ViewMessagesDialog from 'ui-component/dialog/ViewMessagesDialog'
import ConversationStarterDialog from 'ui-component/dialog/ConversationStarterDialog'
import StarterPromptsDialog from 'ui-component/dialog/StarterPromptsDialog'
// API
import chatflowsApi from 'api/chatflows'
@@ -385,7 +385,7 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
/>
<APICodeDialog show={apiDialogOpen} dialogProps={apiDialogProps} onCancel={() => setAPIDialogOpen(false)} />
<AnalyseFlowDialog show={analyseDialogOpen} dialogProps={analyseDialogProps} onCancel={() => setAnalyseDialogOpen(false)} />
<ConversationStarterDialog
<StarterPromptsDialog
show={conversationStartersDialogOpen}
dialogProps={conversationStartersDialogProps}
onCancel={() => setConversationStartersDialogOpen(false)}
packages/ui/src/views/chatmessage/ChatMessage.css
+1 -1
View File
@@ -118,7 +118,7 @@
.cloud {
width: 400px;
height: calc(100vh - 260px);
height: calc(90vh - 260px);
border-radius: 0.5rem;
display: flex;
justify-content: center;
packages/ui/src/views/chatmessage/ChatMessage.js
+13 -11
View File
@@ -33,7 +33,7 @@ import { baseURL, maxScroll } from 'store/constant'
import robotPNG from 'assets/images/robot.png'
import userPNG from 'assets/images/account.png'
import { isValidURL, removeDuplicateURL } from 'utils/genericHelper'
import StarterConversationCard from '../../ui-component/cards/StarterConversationCard'
import StarterPromptsCard from '../../ui-component/cards/StarterPromptsCard'
export const ChatMessage = ({ open, chatflowid, isDialog }) => {
const theme = useTheme()
@@ -238,11 +238,17 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
useEffect(() => {
if (getChatflowConfig.data) {
if (
getChatflowConfig.data?.chatbotConfig?.starterPrompts &&
JSON.parse(getChatflowConfig.data?.chatbotConfig?.starterPrompts)
) {
setStarterPrompts(JSON.parse(getChatflowConfig.data?.chatbotConfig?.starterPrompts))
if (getChatflowConfig.data?.chatbotConfig && JSON.parse(getChatflowConfig.data?.chatbotConfig)) {
let config = JSON.parse(getChatflowConfig.data?.chatbotConfig)
if (config.starterPrompts) {
let inputFields = []
Object.getOwnPropertyNames(config.starterPrompts).forEach((key) => {
if (config.starterPrompts[key]) {
inputFields.push(config.starterPrompts[key])
}
})
setStarterPrompts(inputFields)
}
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -439,11 +445,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
<div style={{ width: '100%' }}>
<form style={{ width: '100%' }} onSubmit={handleSubmit}>
{messages && messages.length === 1 && (
<StarterConversationCard
starterPrompts={starterPrompts || []}
onPromptClick={handlePromptClick}
isGrid={isDialog}
/>
<StarterPromptsCard starterPrompts={starterPrompts || []} onPromptClick={handlePromptClick} isGrid={isDialog} />
)}
<OutlinedInput
inputRef={inputRef}