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)}>
-                    {sp.prompt}
-                </Button>
+                <Chip label={sp.prompt} className={'button'} key={index} onClick={(e) => onPromptClick(sp.prompt, e)} />
             ))}
         </Box>
     )