Conversation Starters: Initial commit

packages/ui/src/ui-component/cards/StarterConversationCard.js

@@ -0,0 +1,49 @@
+import Chip from '@mui/material/Chip'
+import Box from '@mui/material/Box'
+import PropTypes from 'prop-types'
+import { MenuItem, Select } from '@mui/material'
+
+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>
+        )
+    }
+}
+
+StarterConversationCard.propTypes = {
+    isGrid: PropTypes.bool,
+    chipsData: PropTypes.arrayOf(PropTypes.string),
+    onChipClick: PropTypes.func
+}
+
+export default StarterConversationCard

packages/ui/src/views/chatflows/Configuration.js

@@ -4,6 +4,10 @@ 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'
@@ -32,6 +36,10 @@ 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 = {
@@ -111,7 +119,7 @@ const Configuration = () => {
         return (
             <Box sx={{ pt: 2, pb: 2 }}>
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
-                    <Typography sx={{ mb: 1 }}>{fieldLabel}</Typography>
+                    {fieldLabel && <Typography sx={{ mb: 1 }}>{fieldLabel}</Typography>}
                     <OutlinedInput
                         id={fieldName}
                         type={fieldType}
@@ -130,20 +138,41 @@ const Configuration = () => {
 
     return (
         <>
-            {/*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='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>
 
+            <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>

packages/ui/src/views/chatmessage/ChatMessage.js

@@ -32,6 +32,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'
 
 export const ChatMessage = ({ open, chatflowid, isDialog }) => {
     const theme = useTheme()
@@ -103,9 +104,14 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
         }, 100)
     }
 
+    const handlePromptClick = async (prompt) => {
+        setUserInput(prompt)
+        await handleSubmit()
+    }
+
     // Handle form submission
     const handleSubmit = async (e) => {
-        e.preventDefault()
+        if (e) e.preventDefault()
 
         if (userInput.trim() === '') {
             return
@@ -369,6 +375,13 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
             <div className='center'>
                 <div style={{ width: '100%' }}>
                     <form style={{ width: '100%' }} onSubmit={handleSubmit}>
+                        {messages && messages.length === 1 && (
+                            <StarterConversationCard
+                                chipsData={['prompt 1', 'prompt 2', 'prompt 3']}
+                                onChipClick={handlePromptClick}
+                                isGrid={isDialog}
+                            />
+                        )}
                         <OutlinedInput
                             inputRef={inputRef}
                             // eslint-disable-next-line