Fix image uploads appear on top of chat messages. Now image uploads will appear above the text input on its own row.

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

@@ -21,7 +21,7 @@ const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel }) => {
             aria-describedby='alert-dialog-description'
             sx={{ overflow: 'visible' }}
         >
-            <DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
+            <DialogTitle sx={{ fontSize: '1rem', p: 1.5 }} id='alert-dialog-title'>
                 <div style={{ display: 'flex', flexDirection: 'row' }}>
                     {dialogProps.title}
                     <div style={{ flex: 1 }}></div>
@@ -43,7 +43,10 @@ const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel }) => {
                     )}
                 </div>
             </DialogTitle>
-            <DialogContent sx={{ display: 'flex', justifyContent: 'flex-end', flexDirection: 'column' }}>
+            <DialogContent
+                className='cloud-dialog-wrapper'
+                sx={{ display: 'flex', justifyContent: 'flex-end', flexDirection: 'column', p: 0 }}
+            >
                 <ChatMessage isDialog={true} open={dialogProps.open} chatflowid={dialogProps.chatflowid} />
             </DialogContent>
         </Dialog>

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

@@ -1,8 +1,6 @@
 .messagelist {
     width: 100%;
-    height: 100%;
+    height: auto;
-    overflow-y: scroll;
-    overflow-x: hidden;
     border-radius: 0.5rem;
 }
 
@@ -108,32 +106,38 @@
 }
 
 .center {
+    width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     flex-direction: column;
-    padding: 10px;
+    padding: 12px;
 }
 
-.cloud {
+.cloud-wrapper,
+.cloud-dialog-wrapper {
     width: 400px;
     height: calc(100vh - 260px);
-    overflow-y: scroll;
-    border-radius: 0.5rem;
     display: flex;
-    justify-content: center;
+    align-items: start;
-    align-items: center;
+    justify-content: start;
+    flex-direction: column;
 }
 
+.cloud-dialog-wrapper {
+    width: 100%;
+}
+
+.cloud,
 .cloud-dialog {
     width: 100%;
-    height: 100vh;
+    height: auto;
+    max-height: calc(100% - 72px);
     overflow-y: scroll;
-    border-radius: 0.5rem;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: start;
 }
 
 .cloud-message {

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

@@ -703,7 +703,14 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                                                 </div>
                                             )}
                                             {message.fileUploads && message.fileUploads.length > 0 && (
-                                                <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row', width: '100%' }}>
+                                                <div
+                                                    style={{
+                                                        display: 'flex',
+                                                        flexWrap: 'wrap',
+                                                        flexDirection: 'row',
+                                                        width: '100%'
+                                                    }}
+                                                >
                                                     {message.fileUploads.map((item, index) => {
                                                         return (
                                                             <>
@@ -833,9 +840,9 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                 <Divider />
             </div>
 
-            <div style={{ position: 'relative' }}>
+            <div className='center'>
                 {previews && previews.length > 0 && (
-                    <Box className={'preview'} sx={{ maxWidth: isDialog ? 'inherit' : '400px', m: 1, pb: 0.5 }}>
+                    <Box sx={{ width: '100%', mb: 1.5 }}>
                         {previews.map((item, index) => (
                             <>
                                 {item.mime.startsWith('image/') ? (
@@ -886,11 +893,6 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                         ))}
                     </Box>
                 )}
-                <Divider />
-            </div>
-
-            <div className='center'>
-                <div style={{ width: '100%' }}>
                 <form style={{ width: '100%' }} onSubmit={handleSubmit}>
                     <OutlinedInput
                         inputRef={inputRef}
@@ -909,12 +911,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                         startAdornment={
                             isChatFlowAvailableForUploads && (
                                 <InputAdornment position='start' sx={{ pl: 2 }}>
-                                        <IconButton
+                                    <IconButton onClick={handleUploadClick} type='button' disabled={loading || !chatflowid} edge='start'>
-                                            onClick={handleUploadClick}
-                                            type='button'
-                                            disabled={loading || !chatflowid}
-                                            edge='start'
-                                        >
                                         <IconPhotoPlus
                                             color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
                                         />
@@ -924,7 +921,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                         }
                         endAdornment={
                             <>
-                                    {isChatFlowAvailableForSpeech && (
+                                {isChatFlowAvailableForUploads && (
                                     <InputAdornment position='end'>
                                         <IconButton
                                             onClick={() => onMicrophonePressed()}
@@ -934,9 +931,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                                         >
                                             <IconMicrophone
                                                 className={'start-recording-button'}
-                                                    color={
+                                                color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
-                                                        loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'
-                                                    }
                                             />
                                         </IconButton>
                                     </InputAdornment>
@@ -950,9 +945,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                                         ) : (
                                             // Send icon SVG in input field
                                             <IconSend
-                                                    color={
+                                                color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
-                                                        loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'
-                                                    }
                                             />
                                         )}
                                     </IconButton>
@@ -965,7 +958,6 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                     )}
                 </form>
             </div>
-            </div>
             <SourceDocDialog show={sourceDialogOpen} dialogProps={sourceDialogProps} onCancel={() => setSourceDialogOpen(false)} />
         </>
     )

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

@@ -191,7 +191,14 @@ export const ChatPopUp = ({ chatflowid }) => {
                     <Transitions in={open} {...TransitionProps}>
                         <Paper>
                             <ClickAwayListener onClickAway={handleClose}>
-                                <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
+                                <MainCard
+                                    border={false}
+                                    className='cloud-wrapper'
+                                    elevation={16}
+                                    content={false}
+                                    boxShadow
+                                    shadow={theme.shadows[16]}
+                                >
                                     <ChatMessage chatflowid={chatflowid} open={open} />
                                 </MainCard>
                             </ClickAwayListener>