update chat message layout and fix when first start prompt clicked but not sent

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

@@ -1,4 +1,7 @@
 .button-container {
+    position: absolute;
+    bottom: 0;
+    z-index: 1000;
     display: flex;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch; /* For momentum scroll on mobile devices */

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

@@ -1,15 +1,13 @@
 import Box from '@mui/material/Box'
 import PropTypes from 'prop-types'
-import { Button } from '@mui/material'
+import { Chip } from '@mui/material'
 import './StarterPromptsCard.css'
 
 const StarterPromptsCard = ({ isGrid, starterPrompts, onPromptClick }) => {
     return (
-        <Box className={'button-container'} sx={{ maxWidth: isGrid ? 'inherit' : '400px' }}>
+        <Box className={'button-container'} sx={{ maxWidth: isGrid ? 'inherit' : '400px', m: 1 }}>
             {starterPrompts.map((sp, index) => (
-                <Button variant='outlined' className={'button'} key={index} onClick={(e) => onPromptClick(sp.prompt, e)}>
+                <Chip label={sp.prompt} className={'button'} key={index} onClick={(e) => onPromptClick(sp.prompt, e)} />
-                    {sp.prompt}
-                </Button>
             ))}
         </Box>
     )

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

@@ -108,26 +108,30 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
         }, 100)
     }
 
-    const handlePromptClick = async (prompt, e) => {
+    const handlePromptClick = async (promptStarterInput) => {
-        setUserInput(prompt)
+        setUserInput(promptStarterInput)
-        await handleSubmit(e)
+        handleSubmit(undefined, promptStarterInput)
     }
 
     // Handle form submission
-    const handleSubmit = async (e) => {
+    const handleSubmit = async (e, promptStarterInput) => {
-        e.preventDefault()
+        if (e) e.preventDefault()
 
-        if (userInput.trim() === '') {
+        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
             }
@@ -439,13 +443,16 @@ 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}>
-                        {messages && messages.length === 1 && (
-                            <StarterPromptsCard starterPrompts={starterPrompts || []} onPromptClick={handlePromptClick} isGrid={isDialog} />
-                        )}
                         <OutlinedInput
                             inputRef={inputRef}
                             // eslint-disable-next-line