Merge branch 'main' into FEATURE/env-vars

packages/server/src/index.ts

@@ -140,6 +140,7 @@ export class App {
                 '/api/v1/verify/apikey/',
                 '/api/v1/chatflows/apikey/',
                 '/api/v1/public-chatflows',
+                '/api/v1/public-chatbotConfig',
                 '/api/v1/prediction/',
                 '/api/v1/vector/upsert/',
                 '/api/v1/node-icon/',
@@ -202,7 +203,7 @@ export class App {
 
         // Get component credential via name
         this.app.get('/api/v1/components-credentials/:name', (req: Request, res: Response) => {
-            if (!req.params.name.includes('&')) {
+            if (!req.params.name.includes('&')) {
                 if (Object.prototype.hasOwnProperty.call(this.nodesPool.componentCredentials, req.params.name)) {
                     return res.json(this.nodesPool.componentCredentials[req.params.name])
                 } else {
@@ -210,7 +211,7 @@ export class App {
                 }
             } else {
                 const returnResponse = []
-                for (const name of req.params.name.split('&')) {
+                for (const name of req.params.name.split('&')) {
                     if (Object.prototype.hasOwnProperty.call(this.nodesPool.componentCredentials, name)) {
                         returnResponse.push(this.nodesPool.componentCredentials[name])
                     } else {
@@ -330,6 +331,23 @@ export class App {
             return res.status(404).send(`Chatflow ${req.params.id} not found`)
         })
 
+        // Get specific chatflow chatbotConfig via id (PUBLIC endpoint, used to retrieve config for embedded chat)
+        // Safe as public endpoint as chatbotConfig doesn't contain sensitive credential
+        this.app.get('/api/v1/public-chatbotConfig/:id', async (req: Request, res: Response) => {
+            const chatflow = await this.AppDataSource.getRepository(ChatFlow).findOneBy({
+                id: req.params.id
+            })
+            if (chatflow && chatflow.chatbotConfig) {
+                try {
+                    const parsedConfig = JSON.parse(chatflow.chatbotConfig)
+                    return res.json(parsedConfig)
+                } catch (e) {
+                    return res.status(500).send(`Error parsing Chatbot Config for Chatflow ${req.params.id}`)
+                }
+            }
+            return res.status(404).send(`Chatbot Config for Chatflow ${req.params.id} not found`)
+        })
+
         // Save chatflow
         this.app.post('/api/v1/chatflows', async (req: Request, res: Response) => {
             const body = req.body

packages/server/src/utils/XSS.ts

@@ -6,8 +6,15 @@ export function sanitizeMiddleware(req: Request, res: Response, next: NextFuncti
     const decodedURI = decodeURI(req.url)
     req.url = sanitizeHtml(decodedURI)
     for (let p in req.query) {
-        req.query[p] = sanitizeHtml(req.query[p] as string)
+        if (Array.isArray(req.query[p])) {
+            const sanitizedQ = []
+            for (const q of req.query[p] as string[]) {
+                sanitizedQ.push(sanitizeHtml(q))
+            }
+            req.query[p] = sanitizedQ
+        } else {
+            req.query[p] = sanitizeHtml(req.query[p] as string)
+        }
     }
-
     next()
 }

packages/ui/src/menu-items/settings.js

@@ -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: 'Starter Prompts',
+            type: 'item',
+            url: '',
+            icon: icons.IconPictureInPictureOff
+        },
         {
             id: 'viewMessages',
             title: 'View Messages',

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'
@@ -27,6 +28,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
@@ -78,6 +80,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)
@@ -92,6 +96,20 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
         setFlowDialogOpen(true)
     }
 
+    const handleFlowStarterPrompts = () => {
+        setAnchorEl(null)
+        setConversationStartersDialogProps({
+            title: 'Starter Prompts - ' + chatflow.name,
+            chatflow: chatflow
+        })
+        setConversationStartersDialogOpen(true)
+    }
+
+    const saveFlowStarterPrompts = async () => {
+        setConversationStartersDialogOpen(false)
+        await updateFlowsApi.request()
+    }
+
     const saveFlowRename = async (chatflowName) => {
         const updateBody = {
             name: chatflowName,
@@ -253,6 +271,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
@@ -279,6 +301,12 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
                 onClose={() => setCategoryDialogOpen(false)}
                 onSubmit={saveFlowCategory}
             />
+            <StarterPromptsDialog
+                show={conversationStartersDialogOpen}
+                dialogProps={conversationStartersDialogProps}
+                onConfirm={saveFlowStarterPrompts}
+                onCancel={() => setConversationStartersDialogOpen(false)}
+            />
         </div>
     )
 }

packages/ui/src/ui-component/cards/StarterPromptsCard.css

@@ -0,0 +1,14 @@
+.button-container {
+    position: absolute;
+    bottom: 0;
+    z-index: 1000;
+    display: flex;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch; /* For momentum scroll on mobile devices */
+    scrollbar-width: none; /* For Firefox */
+}
+
+.button {
+    flex: 0 0 auto; /* Don't grow, don't shrink, base width on content */
+    margin: 5px; /* Adjust as needed for spacing between buttons */
+}

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

@@ -0,0 +1,22 @@
+import Box from '@mui/material/Box'
+import PropTypes from 'prop-types'
+import { Chip } from '@mui/material'
+import './StarterPromptsCard.css'
+
+const StarterPromptsCard = ({ isGrid, starterPrompts, onPromptClick }) => {
+    return (
+        <Box className={'button-container'} sx={{ maxWidth: isGrid ? 'inherit' : '400px', m: 1 }}>
+            {starterPrompts.map((sp, index) => (
+                <Chip label={sp.prompt} className={'button'} key={index} onClick={(e) => onPromptClick(sp.prompt, e)} />
+            ))}
+        </Box>
+    )
+}
+
+StarterPromptsCard.propTypes = {
+    isGrid: PropTypes.bool,
+    starterPrompts: PropTypes.arrayOf(PropTypes.string),
+    onPromptClick: PropTypes.func
+}
+
+export default StarterPromptsCard

packages/ui/src/ui-component/dialog/StarterPromptsDialog.js

@@ -0,0 +1,252 @@
+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,
+    InputAdornment
+} from '@mui/material'
+import { IconX, IconTrash, IconPlus, IconBulb } 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 StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
+    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 [chatbotConfig, setChatbotConfig] = useState({})
+
+    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 {
+            let value = {
+                starterPrompts: {
+                    ...inputFields
+                }
+            }
+            chatbotConfig.starterPrompts = value.starterPrompts
+            const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, {
+                chatbotConfig: JSON.stringify(chatbotConfig)
+            })
+            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 })
+            }
+            onConfirm()
+        } 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.chatbotConfig) {
+            try {
+                let chatbotConfig = JSON.parse(dialogProps.chatflow.chatbotConfig)
+                setChatbotConfig(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: ''
+                    }
+                ])
+            }
+        }
+
+        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'>
+                {dialogProps.title || 'Conversation Starter Prompts'}
+            </DialogTitle>
+            <DialogContent>
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        borderRadius: 10,
+                        background: '#d8f3dc',
+                        padding: 10
+                    }}
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center'
+                        }}
+                    >
+                        <IconBulb size={30} color='#2d6a4f' />
+                        <span style={{ color: '#2d6a4f', marginLeft: 10, fontWeight: 500 }}>
+                            Starter prompts will only be shown when there is no messages on the chat
+                        </span>
+                    </div>
+                </div>
+                <Box sx={{ '& > :not(style)': { m: 1 }, pt: 2 }}>
+                    <List>
+                        {inputFields.map((data, index) => {
+                            return (
+                                <div key={index} style={{ display: 'flex', width: '100%' }}>
+                                    <Box sx={{ width: '95%', 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' }}>
+                                                    {inputFields.length > 1 && (
+                                                        <IconButton
+                                                            sx={{ height: 30, width: 30 }}
+                                                            size='small'
+                                                            color='error'
+                                                            disabled={inputFields.length === 1}
+                                                            onClick={() => removeInputFields(index)}
+                                                            edge='end'
+                                                        >
+                                                            <IconTrash />
+                                                        </IconButton>
+                                                    )}
+                                                </InputAdornment>
+                                            }
+                                        />
+                                    </Box>
+                                    <Box sx={{ width: '5%', mb: 1 }}>
+                                        {index === inputFields.length - 1 && (
+                                            <IconButton color='primary' onClick={addInputField}>
+                                                <IconPlus />
+                                            </IconButton>
+                                        )}
+                                    </Box>
+                                </div>
+                            )
+                        })}
+                    </List>
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onCancel}>Cancel</Button>
+                <StyledButton variant='contained' onClick={onSave}>
+                    Save
+                </StyledButton>
+            </DialogActions>
+        </Dialog>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+StarterPromptsDialog.propTypes = {
+    show: PropTypes.bool,
+    dialogProps: PropTypes.object,
+    onCancel: PropTypes.func,
+    onConfirm: PropTypes.func
+}
+
+export default StarterPromptsDialog

packages/ui/src/views/canvas/CanvasHeader.js

@@ -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 StarterPromptsDialog from 'ui-component/dialog/StarterPromptsDialog'
 
 // 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: 'Starter Prompts - ' + chatflow.name,
+                chatflow: chatflow
+            })
+            setConversationStartersDialogOpen(true)
         } else if (setting === 'analyseChatflow') {
             setAnalyseDialogProps({
                 title: 'Analyse Chatflow',
@@ -376,6 +385,12 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
             />
             <APICodeDialog show={apiDialogOpen} dialogProps={apiDialogProps} onCancel={() => setAPIDialogOpen(false)} />
             <AnalyseFlowDialog show={analyseDialogOpen} dialogProps={analyseDialogProps} onCancel={() => setAnalyseDialogOpen(false)} />
+            <StarterPromptsDialog
+                show={conversationStartersDialogOpen}
+                dialogProps={conversationStartersDialogProps}
+                onConfirm={() => setConversationStartersDialogOpen(false)}
+                onCancel={() => setConversationStartersDialogOpen(false)}
+            />
             <ViewMessagesDialog
                 show={viewMessagesDialogOpen}
                 dialogProps={viewMessagesDialogProps}

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

@@ -135,6 +135,8 @@ const ShareChatbot = ({ isSessionMemory }) => {
 
         if (isSessionMemory) obj.overrideConfig.generateNewSession = generateNewSession
 
+        if (chatbotConfig?.starterPrompts) obj.starterPrompts = chatbotConfig.starterPrompts
+
         return obj
     }
 

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 StarterPromptsCard from '../../ui-component/cards/StarterPromptsCard'
 import { isValidURL, removeDuplicateURL, setLocalStorageChatflow } from 'utils/genericHelper'
 
 export const ChatMessage = ({ open, chatflowid, isDialog }) => {
@@ -57,6 +58,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,21 +108,30 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
         }, 100)
     }
 
-    // Handle form submission
+    const handlePromptClick = async (promptStarterInput) => {
-    const handleSubmit = async (e) => {
+        setUserInput(promptStarterInput)
-        e.preventDefault()
+        handleSubmit(undefined, promptStarterInput)
+    }
 
-        if (userInput.trim() === '') {
+    // Handle form submission
+    const handleSubmit = async (e, promptStarterInput) => {
+        if (e) e.preventDefault()
+
+        if (!promptStarterInput && userInput.trim() === '') {
             return
         }
 
+        let input = userInput
+
+        if (promptStarterInput !== undefined && promptStarterInput.trim() !== '') input = promptStarterInput
+
         setLoading(true)
-        setMessages((prevMessages) => [...prevMessages, { message: userInput, type: 'userMessage' }])
+        setMessages((prevMessages) => [...prevMessages, { message: input, type: 'userMessage' }])
 
         // Send user question and history to API
         try {
             const params = {
-                question: userInput,
+                question: input,
                 history: messages.filter((msg) => msg.message !== 'Hi there! How can I help?'),
                 chatId
             }
@@ -223,10 +236,27 @@ 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?.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
+    }, [getChatflowConfig.data])
+
     // Auto scroll chat to bottom
     useEffect(() => {
         scrollToBottom()
@@ -245,6 +275,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
         if (open && chatflowid) {
             getChatmessageApi.request(chatflowid)
             getIsChatflowStreamingApi.request(chatflowid)
+            getChatflowConfig.request(chatflowid)
             scrollToBottom()
 
             socket = socketIOClient(baseURL)
@@ -412,7 +443,13 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                         })}
                 </div>
             </div>
-            <Divider />
+
+            <div style={{ position: 'relative' }}>
+                {messages && messages.length === 1 && (
+                    <StarterPromptsCard starterPrompts={starterPrompts || []} onPromptClick={handlePromptClick} isGrid={isDialog} />
+                )}
+                <Divider />
+            </div>
             <div className='center'>
                 <div style={{ width: '100%' }}>
                     <form style={{ width: '100%' }} onSubmit={handleSubmit}>