From 8df93fa789163e6c0ad338af97a6edac89898f9a Mon Sep 17 00:00:00 2001
From: Henry <hzj94@hotmail.com>
Date: Wed, 29 Nov 2023 16:05:59 +0000
Subject: [PATCH] update chat message layout and fix when first start prompt
 clicked but not sent

---
 .../ui-component/cards/StarterPromptsCard.css |  3 ++
 .../ui-component/cards/StarterPromptsCard.js  |  8 ++---
 .../ui/src/views/chatmessage/ChatMessage.js   | 31 ++++++++++++-------
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/ui-component/cards/StarterPromptsCard.css b/packages/ui/src/ui-component/cards/StarterPromptsCard.css
index 2b8df226..85c2d415 100644
--- a/packages/ui/src/ui-component/cards/StarterPromptsCard.css
+++ b/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 */
diff --git a/packages/ui/src/ui-component/cards/StarterPromptsCard.js b/packages/ui/src/ui-component/cards/StarterPromptsCard.js
index caf8a219..3abd8378 100644
--- a/packages/ui/src/ui-component/cards/StarterPromptsCard.js
+++ b/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)}>
-                    {sp.prompt}
-                </Button>
+                <Chip label={sp.prompt} className={'button'} key={index} onClick={(e) => onPromptClick(sp.prompt, e)} />
             ))}
         </Box>
     )
diff --git a/packages/ui/src/views/chatmessage/ChatMessage.js b/packages/ui/src/views/chatmessage/ChatMessage.js
index 33ec50d7..b52ff2da 100644
--- a/packages/ui/src/views/chatmessage/ChatMessage.js
+++ b/packages/ui/src/views/chatmessage/ChatMessage.js
@@ -108,26 +108,30 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
         }, 100)
     }
 
-    const handlePromptClick = async (prompt, e) => {
-        setUserInput(prompt)
-        await handleSubmit(e)
+    const handlePromptClick = async (promptStarterInput) => {
+        setUserInput(promptStarterInput)
+        handleSubmit(undefined, promptStarterInput)
     }
 
     // Handle form submission
-    const handleSubmit = async (e) => {
-        e.preventDefault()
+    const handleSubmit = async (e, promptStarterInput) => {
+        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