Fix UI issues - chat window height, image & audio styling, and image + audio not sending together

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

@@ -1,6 +1,4 @@
 .button-container {
-    position: absolute;
-    z-index: 1000;
     display: flex;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch; /* For momentum scroll on mobile devices */
@@ -9,5 +7,4 @@
 
 .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

@@ -5,7 +5,10 @@ import './StarterPromptsCard.css'
 
 const StarterPromptsCard = ({ isGrid, starterPrompts, sx, onPromptClick }) => {
     return (
-        <Box className={'button-container'} sx={{ bottom: 0, maxWidth: isGrid ? 'inherit' : '400px', m: 1, ...sx }}>
+        <Box
+            className={'button-container'}
+            sx={{ width: '100%', maxWidth: isGrid ? 'inherit' : '400px', p: 1.5, display: 'flex', gap: 1, ...sx }}
+        >
             {starterPrompts.map((sp, index) => (
                 <Chip label={sp.prompt} className={'button'} key={index} onClick={(e) => onPromptClick(sp.prompt, e)} />
             ))}

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

@@ -7,7 +7,7 @@ import { ChatMessage } from './ChatMessage'
 import { StyledButton } from 'ui-component/button/StyledButton'
 import { IconEraser } from '@tabler/icons'
 
-const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel }) => {
+const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel, previews, setPreviews }) => {
     const portalElement = document.getElementById('portal')
     const customization = useSelector((state) => state.customization)
 
@@ -47,7 +47,13 @@ const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel }) => {
                 className='cloud-dialog-wrapper'
                 sx={{ display: 'flex', justifyContent: 'flex-end', flexDirection: 'column', p: 0 }}
             >
-                <ChatMessage isDialog={true} open={dialogProps.open} chatflowid={dialogProps.chatflowid} />
+                <ChatMessage
+                    isDialog={true}
+                    open={dialogProps.open}
+                    chatflowid={dialogProps.chatflowid}
+                    previews={previews}
+                    setPreviews={setPreviews}
+                />
             </DialogContent>
         </Dialog>
     ) : null
@@ -59,7 +65,9 @@ ChatExpandDialog.propTypes = {
     show: PropTypes.bool,
     dialogProps: PropTypes.object,
     onClear: PropTypes.func,
-    onCancel: PropTypes.func
+    onCancel: PropTypes.func,
+    previews: PropTypes.array,
+    setPreviews: PropTypes.func
 }
 
 export default ChatExpandDialog

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

@@ -115,14 +115,14 @@
     padding: 12px;
 }
 
-.cloud-wrapper,
+.cloud-wrapper {
-.cloud-dialog-wrapper {
     width: 400px;
-    height: calc(100vh - 260px);
+    height: calc(100vh - 180px);
 }
 
 .cloud-dialog-wrapper {
     width: 100%;
+    height: calc(100vh - 120px);
 }
 
 .cloud-wrapper > div,
@@ -198,3 +198,8 @@
     z-index: 2000; /* Ensure it's above other content */
     border: 2px dashed #0094ff; /* Example style */
 }
+
+.center audio {
+    height: 100%;
+    border-radius: 0;
+}

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

@@ -58,7 +58,7 @@ const messageImageStyle = {
     objectFit: 'cover'
 }
 
-export const ChatMessage = ({ open, chatflowid, isDialog }) => {
+export const ChatMessage = ({ open, chatflowid, isDialog, previews, setPreviews }) => {
     const theme = useTheme()
     const customization = useSelector((state) => state.customization)
 
@@ -90,7 +90,6 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
     // drag & drop and file input
     const fileUploadRef = useRef(null)
     const [isChatFlowAvailableForUploads, setIsChatFlowAvailableForUploads] = useState(false)
-    const [previews, setPreviews] = useState([])
     const [isDragActive, setIsDragActive] = useState(false)
 
     // recording
@@ -353,7 +352,8 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
         if (e) e.preventDefault()
 
         if (!promptStarterInput && userInput.trim() === '') {
-            if (!(previews.length === 1 && previews[0].type === 'audio')) {
+            const containsAudio = previews.filter((item) => item.type === 'audio').length > 0
+            if (!(previews.length > 1 && containsAudio)) {
                 return
             }
         }
@@ -584,7 +584,8 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
 
     useEffect(() => {
         // wait for audio recording to load and then send
-        if (previews.length === 1 && previews[0].type === 'audio') {
+        const containsAudio = previews.filter((item) => item.type === 'audio').length > 0
+        if (previews.length > 1 && containsAudio) {
             setIsRecording(false)
             setRecordingNotSupported(false)
             handlePromptClick('')
@@ -669,7 +670,8 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                                                     display: 'flex',
                                                     flexWrap: 'wrap',
                                                     flexDirection: 'row',
-                                                    width: '100%'
+                                                    width: '100%',
+                                                    gap: '4px'
                                                 }}
                                             >
                                                 {message.fileUploads.map((item, index) => {
@@ -788,23 +790,22 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                 </div>
             </div>
 
+            {messages && messages.length === 1 && starterPrompts.length > 0 && (
                 <div style={{ position: 'relative' }}>
-                {messages && messages.length === 1 && (
                     <StarterPromptsCard
                         sx={{ bottom: previews && previews.length > 0 ? 70 : 0 }}
                         starterPrompts={starterPrompts || []}
                         onPromptClick={handlePromptClick}
                         isGrid={isDialog}
                     />
-                )}
-                <Divider />
                 </div>
+            )}
 
             <Divider sx={{ width: '100%' }} />
 
             <div className='center'>
                 {previews && previews.length > 0 && (
-                    <Box sx={{ width: '100%', mb: 1.5 }}>
+                    <Box sx={{ width: '100%', mb: 1.5, display: 'flex', alignItems: 'center' }}>
                         {previews.map((item, index) => (
                             <Fragment key={index}>
                                 {item.mime.startsWith('image/') ? (
@@ -827,23 +828,18 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                                 ) : (
                                     <Card
                                         sx={{
-                                            display: 'flex',
+                                            display: 'inline-flex',
                                             alignItems: 'center',
                                             height: '48px',
                                             width: isDialog ? ps?.current?.offsetWidth / 4 : ps?.current?.offsetWidth / 2,
-                                            pl: 0.5,
+                                            p: 0.5,
                                             mr: 1,
                                             backgroundColor: theme.palette.grey[500],
                                             flex: '0 0 auto'
                                         }}
                                         variant='outlined'
                                     >
-                                        <CardMedia
+                                        <CardMedia component='audio' sx={{ color: 'transparent' }} controls src={item.data} />
-                                            component='audio'
-                                            sx={{ height: '40px', color: 'transparent' }}
-                                            controls
-                                            src={item.data}
-                                        />
                                         <IconButton onClick={() => handleDeletePreview(item)} size='small'>
                                             <IconTrash size={20} color='white' />
                                         </IconButton>
@@ -993,5 +989,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
 ChatMessage.propTypes = {
     open: PropTypes.bool,
     chatflowid: PropTypes.string,
-    isDialog: PropTypes.bool
+    isDialog: PropTypes.bool,
+    previews: PropTypes.array,
+    setPreviews: PropTypes.func
 }

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

@@ -35,6 +35,7 @@ export const ChatPopUp = ({ chatflowid }) => {
     const [open, setOpen] = useState(false)
     const [showExpandDialog, setShowExpandDialog] = useState(false)
     const [expandDialogProps, setExpandDialogProps] = useState({})
+    const [previews, setPreviews] = useState([])
 
     const anchorRef = useRef(null)
     const prevOpen = useRef(open)
@@ -199,7 +200,7 @@ export const ChatPopUp = ({ chatflowid }) => {
                                     boxShadow
                                     shadow={theme.shadows[16]}
                                 >
-                                    <ChatMessage chatflowid={chatflowid} open={open} />
+                                    <ChatMessage chatflowid={chatflowid} open={open} previews={previews} setPreviews={setPreviews} />
                                 </MainCard>
                             </ClickAwayListener>
                         </Paper>
@@ -211,6 +212,8 @@ export const ChatPopUp = ({ chatflowid }) => {
                 dialogProps={expandDialogProps}
                 onClear={clearChat}
                 onCancel={() => setShowExpandDialog(false)}
+                previews={previews}
+                setPreviews={setPreviews}
             ></ChatExpandDialog>
         </>
     )