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

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

@@ -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/StarterPromptsCard.js

@@ -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/StarterPromptsDialog.js

@@ -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, {
+            let value = {
-                chatbotConfig: {
+                starterPrompts: {
-                    starterPrompts: JSON.stringify(inputFields)
+                    ...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' }}>
+                                <div key={index} style={{ display: 'flex', width: '100%' }}>
-                                    <Box sx={{ width: '85%', mb: 1 }}>
+                                    <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 />
+                <Button onClick={onCancel}>Cancel</Button>
-                <StyledButton variant='contained' color={'error'} onClick={onCancel}>
-                    Cancel
-                </StyledButton>
                 <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

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

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

@@ -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 (
+            if (getChatflowConfig.data?.chatbotConfig && JSON.parse(getChatflowConfig.data?.chatbotConfig)) {
-                getChatflowConfig.data?.chatbotConfig?.starterPrompts &&
+                let config = JSON.parse(getChatflowConfig.data?.chatbotConfig)
-                JSON.parse(getChatflowConfig.data?.chatbotConfig?.starterPrompts)
+                if (config.starterPrompts) {
-            ) {
+                    let inputFields = []
-                setStarterPrompts(JSON.parse(getChatflowConfig.data?.chatbotConfig?.starterPrompts))
+                    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
+                            <StarterPromptsCard starterPrompts={starterPrompts || []} onPromptClick={handlePromptClick} isGrid={isDialog} />
-                                starterPrompts={starterPrompts || []}
-                                onPromptClick={handlePromptClick}
-                                isGrid={isDialog}
-                            />
                         )}
                         <OutlinedInput
                             inputRef={inputRef}