Merge branch 'main' into FEATURE/Vision

# Conflicts:
#	packages/server/src/index.ts
#	packages/ui/src/views/chatmessage/ChatMessage.js

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

@@ -48,6 +48,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'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { cancelAudioRecording, startAudioRecording, stopAudioRecording } from './audio-recording'
@@ -75,6 +76,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([])
 
     // drag & drop and file input
     const fileUploadRef = useRef(null)
@@ -348,14 +352,23 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
         }, 100)
     }
 
-    // Handle form submission
-    const handleSubmit = async (e) => {
-        e.preventDefault()
+    const handlePromptClick = async (promptStarterInput) => {
+        setUserInput(promptStarterInput)
+        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)
         const urls = []
         previews.map((item) => {
@@ -367,12 +380,12 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
             })
         })
         clearPreviews()
-        setMessages((prevMessages) => [...prevMessages, { message: userInput, type: 'userMessage', fileUploads: urls }])
+        setMessages((prevMessages) => [...prevMessages, { message: input, type: 'userMessage', fileUploads: urls }])
 
         // 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
             }
@@ -486,7 +499,6 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
         if (getIsChatflowStreamingApi.data) {
             setIsChatFlowAvailableToStream(getIsChatflowStreamingApi.data?.isStreaming ?? false)
         }
-
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getIsChatflowStreamingApi.data])
 
@@ -498,6 +510,24 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getAllowChatFlowUploads.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()
@@ -517,6 +547,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
             getChatmessageApi.request(chatflowid)
             getIsChatflowStreamingApi.request(chatflowid)
             getAllowChatFlowUploads.request(chatflowid)
+            getChatflowConfig.request(chatflowid)
             scrollToBottom()
             setIsRecording(false)
             socket = socketIOClient(baseURL)
@@ -762,6 +793,13 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                         })}
                 </div>
             </div>
+
+            <div style={{ position: 'relative' }}>
+                {messages && messages.length === 1 && (
+                    <StarterPromptsCard starterPrompts={starterPrompts || []} onPromptClick={handlePromptClick} isGrid={isDialog} />
+                )}
+                <Divider />
+            </div>
             <Divider />
             <div>
                 {previews && previews.length > 0 && (