Conversation Starters: Initial Implementation

2026-06-28 17:01:00 +03:00 · 2023-11-21 17:15:39 +05:30
parent 0f464fddb8
commit 77a09929ab
14 changed files with 319 additions and 93 deletions
@@ -1,8 +1,8 @@
 // assets
-import { IconTrash, IconFileUpload, IconFileExport, IconCopy, IconSearch, IconMessage } from '@tabler/icons'
+import { IconTrash, IconFileUpload, IconFileExport, IconCopy, IconSearch, IconMessage, IconPictureInPictureOff } from '@tabler/icons'

 // constant
-const icons = { IconTrash, IconFileUpload, IconFileExport, IconCopy, IconSearch, IconMessage }
+const icons = { IconTrash, IconFileUpload, IconFileExport, IconCopy, IconSearch, IconMessage, IconPictureInPictureOff }

 // ==============================|| SETTINGS MENU ITEMS ||============================== //

@@ -11,6 +11,13 @@ const settings = {
    title: '',
    type: 'group',
    children: [
+        {
+            id: 'conversationStarters',
+            title: 'Set Starter Prompts',
+            type: 'item',
+            url: '',
+            icon: icons.IconPictureInPictureOff
+        },
        {
            id: 'viewMessages',
            title: 'View Messages',
@@ -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
@@ -16,6 +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'

 // API
 import chatflowsApi from 'api/chatflows'
@@ -45,6 +46,8 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
    const [apiDialogProps, setAPIDialogProps] = useState({})
    const [analyseDialogOpen, setAnalyseDialogOpen] = useState(false)
    const [analyseDialogProps, setAnalyseDialogProps] = useState({})
+    const [conversationStartersDialogOpen, setConversationStartersDialogOpen] = useState(false)
+    const [conversationStartersDialogProps, setConversationStartersDialogProps] = useState({})
    const [viewMessagesDialogOpen, setViewMessagesDialogOpen] = useState(false)
    const [viewMessagesDialogProps, setViewMessagesDialogProps] = useState({})

@@ -56,6 +59,12 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl

        if (setting === 'deleteChatflow') {
            handleDeleteFlow()
+        } else if (setting === 'conversationStarters') {
+            setConversationStartersDialogProps({
+                title: 'Set Conversation Starters - ' + chatflow.name,
+                chatflow: chatflow
+            })
+            setConversationStartersDialogOpen(true)
        } else if (setting === 'analyseChatflow') {
            setAnalyseDialogProps({
                title: 'Analyse Chatflow',
@@ -376,6 +385,11 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
            />
            <APICodeDialog show={apiDialogOpen} dialogProps={apiDialogProps} onCancel={() => setAPIDialogOpen(false)} />
            <AnalyseFlowDialog show={analyseDialogOpen} dialogProps={analyseDialogProps} onCancel={() => setAnalyseDialogOpen(false)} />
+            <ConversationStarterDialog
+                show={conversationStartersDialogOpen}
+                dialogProps={conversationStartersDialogProps}
+                onCancel={() => setConversationStartersDialogOpen(false)}
+            />
            <ViewMessagesDialog
                show={viewMessagesDialogOpen}
                dialogProps={viewMessagesDialogProps}
@@ -4,10 +4,6 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
 import PropTypes from 'prop-types'

 import { Box, Typography, Button, OutlinedInput } from '@mui/material'
-import Accordion from '@mui/material/Accordion'
-import AccordionSummary from '@mui/material/AccordionSummary'
-import AccordionDetails from '@mui/material/AccordionDetails'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'

 // Project import
 import { StyledButton } from 'ui-component/button/StyledButton'
@@ -36,10 +32,6 @@ const Configuration = () => {
    const [limitMax, setLimitMax] = useState(apiConfig?.rateLimit?.limitMax ?? '')
    const [limitDuration, setLimitDuration] = useState(apiConfig?.rateLimit?.limitDuration ?? '')
    const [limitMsg, setLimitMsg] = useState(apiConfig?.rateLimit?.limitMsg ?? '')
-    const [prompt1, setPrompt1] = useState(apiConfig?.prompt?.prompt1 ?? '')
-    const [prompt2, setPrompt2] = useState(apiConfig?.prompt?.prompt2 ?? '')
-    const [prompt3, setPrompt3] = useState(apiConfig?.prompt?.prompt3 ?? '')
-    const [prompt4, setPrompt4] = useState(apiConfig?.prompt?.prompt4 ?? '')

    const formatObj = () => {
        const obj = {
@@ -119,7 +111,7 @@ const Configuration = () => {
        return (
            <Box sx={{ pt: 2, pb: 2 }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
-                    {fieldLabel && <Typography sx={{ mb: 1 }}>{fieldLabel}</Typography>}
+                    <Typography sx={{ mb: 1 }}>{fieldLabel}</Typography>
                    <OutlinedInput
                        id={fieldName}
                        type={fieldType}
@@ -138,41 +130,20 @@ const Configuration = () => {

    return (
        <>
-            <Accordion>
-                <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls='panel1a-content' id='panel1a-header'>
-                    <Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
-                        Rate Limit{' '}
-                        <TooltipWithParser
-                            style={{ mb: 1, mt: 2, marginLeft: 10 }}
-                            title={
-                                'Visit <a target="_blank" href="https://docs.flowiseai.com/rate-limit">Rate Limit Setup Guide</a> to set up Rate Limit correctly in your hosting environment.'
-                            }
-                        />
-                    </Typography>
-                </AccordionSummary>
-                <AccordionDetails>
-                    <Typography>
-                        {/*Rate Limit*/}
-                        {textField(limitMax, 'limitMax', 'Message Limit per Duration', 'number')}
-                        {textField(limitDuration, 'limitDuration', 'Duration in Second', 'number')}
-                        {textField(limitMsg, 'limitMsg', 'Limit Message', 'string')}
-                    </Typography>
-                </AccordionDetails>
-            </Accordion>
+            {/*Rate Limit*/}
+            <Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
+                Rate Limit{' '}
+                <TooltipWithParser
+                    style={{ mb: 1, mt: 2, marginLeft: 10 }}
+                    title={
+                        'Visit <a target="_blank" href="https://docs.flowiseai.com/rate-limit">Rate Limit Setup Guide</a> to set up Rate Limit correctly in your hosting environment.'
+                    }
+                />
+            </Typography>
+            {textField(limitMax, 'limitMax', 'Message Limit per Duration', 'number')}
+            {textField(limitDuration, 'limitDuration', 'Duration in Second', 'number')}
+            {textField(limitMsg, 'limitMsg', 'Limit Message', 'string')}

-            <Accordion>
-                <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls='panel2a-content' id='panel2a-header'>
-                    <Typography variant={'h4'}>Conversation Starters</Typography>
-                </AccordionSummary>
-                <AccordionDetails>
-                    <Typography>
-                        {textField(prompt1, 'prompt1', 'Starter Prompts', 'string')}
-                        {textField(prompt2, 'prompt2', '', 'string')}
-                        {textField(prompt3, 'prompt3', '', 'string')}
-                        {textField(prompt4, 'prompt4', '', 'string')}
-                    </Typography>
-                </AccordionDetails>
-            </Accordion>
            <StyledButton style={{ marginBottom: 10, marginTop: 10 }} variant='contained' onClick={() => onSave()}>
                Save Changes
            </StyledButton>
@@ -57,6 +57,9 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
    const inputRef = useRef(null)
    const getChatmessageApi = useApi(chatmessageApi.getInternalChatmessageFromChatflow)
    const getIsChatflowStreamingApi = useApi(chatflowsApi.getIsChatflowStreaming)
+    const getChatflowConfig = useApi(chatflowsApi.getSpecificChatflow)
+
+    const [starterPrompts, setStarterPrompts] = useState([])

    const onSourceDialogClick = (data, title) => {
        setSourceDialogProps({ data, title })
@@ -104,14 +107,14 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
        }, 100)
    }

-    const handlePromptClick = async (prompt) => {
+    const handlePromptClick = async (prompt, e) => {
        setUserInput(prompt)
-        await handleSubmit()
+        await handleSubmit(e)
    }

    // Handle form submission
    const handleSubmit = async (e) => {
-        if (e) e.preventDefault()
+        e.preventDefault()

        if (userInput.trim() === '') {
            return
@@ -202,10 +205,18 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
        if (getIsChatflowStreamingApi.data) {
            setIsChatFlowAvailableToStream(getIsChatflowStreamingApi.data?.isStreaming ?? false)
        }
-
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [getIsChatflowStreamingApi.data])

+    useEffect(() => {
+        if (getChatflowConfig.data) {
+            if (getChatflowConfig.data?.starterPrompt && JSON.parse(getChatflowConfig.data?.starterPrompt)) {
+                setStarterPrompts(JSON.parse(getChatflowConfig.data?.starterPrompt))
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getChatflowConfig.data])
+
    // Auto scroll chat to bottom
    useEffect(() => {
        scrollToBottom()
@@ -224,6 +235,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
        if (open && chatflowid) {
            getChatmessageApi.request(chatflowid)
            getIsChatflowStreamingApi.request(chatflowid)
+            getChatflowConfig.request(chatflowid)
            scrollToBottom()

            socket = socketIOClient(baseURL)
@@ -377,8 +389,8 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                    <form style={{ width: '100%' }} onSubmit={handleSubmit}>
                        {messages && messages.length === 1 && (
                            <StarterConversationCard
-                                chipsData={['prompt 1', 'prompt 2', 'prompt 3']}
-                                onChipClick={handlePromptClick}
+                                starterPrompts={starterPrompts || []}
+                                onPromptClick={handlePromptClick}
                                isGrid={isDialog}
                            />
                        )}