From 7e5d8e7294cdf7affa9fb6aeee67148d7cde40b0 Mon Sep 17 00:00:00 2001
From: Ilango <rajagopalilango@gmail.com>
Date: Mon, 22 Jan 2024 11:10:27 +0530
Subject: [PATCH] Fix image uploads appear on top of chat messages. Now image
 uploads will appear above the text input on its own row.

---
 .../src/views/chatmessage/ChatExpandDialog.js |   7 +-
 .../ui/src/views/chatmessage/ChatMessage.css  |  28 ++--
 .../ui/src/views/chatmessage/ChatMessage.js   | 140 +++++++++---------
 .../ui/src/views/chatmessage/ChatPopUp.js     |   9 +-
 4 files changed, 95 insertions(+), 89 deletions(-)

diff --git a/packages/ui/src/views/chatmessage/ChatExpandDialog.js b/packages/ui/src/views/chatmessage/ChatExpandDialog.js
index 1b2037a87..e2044ea37 100644
--- a/packages/ui/src/views/chatmessage/ChatExpandDialog.js
+++ b/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>
diff --git a/packages/ui/src/views/chatmessage/ChatMessage.css b/packages/ui/src/views/chatmessage/ChatMessage.css
index 9e7a18577..c00186bf7 100644
--- a/packages/ui/src/views/chatmessage/ChatMessage.css
+++ b/packages/ui/src/views/chatmessage/ChatMessage.css
@@ -1,8 +1,6 @@
 .messagelist {
     width: 100%;
-    height: 100%;
-    overflow-y: scroll;
-    overflow-x: hidden;
+    height: auto;
     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: center;
+    align-items: start;
+    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 {
diff --git a/packages/ui/src/views/chatmessage/ChatMessage.js b/packages/ui/src/views/chatmessage/ChatMessage.js
index 155b3e990..db2ed7492 100644
--- a/packages/ui/src/views/chatmessage/ChatMessage.js
+++ b/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,85 +893,70 @@ 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}
-                            // eslint-disable-next-line
-                            autoFocus
-                            sx={{ width: '100%' }}
-                            disabled={loading || !chatflowid}
-                            onKeyDown={handleEnter}
-                            id='userInput'
-                            name='userInput'
-                            placeholder={loading ? 'Waiting for response...' : 'Type your question...'}
-                            value={userInput}
-                            onChange={onChange}
-                            multiline={true}
-                            maxRows={isDialog ? 7 : 2}
-                            startAdornment={
-                                isChatFlowAvailableForUploads && (
-                                    <InputAdornment position='start' sx={{ pl: 2 }}>
+                <form style={{ width: '100%' }} onSubmit={handleSubmit}>
+                    <OutlinedInput
+                        inputRef={inputRef}
+                        // eslint-disable-next-line
+                        autoFocus
+                        sx={{ width: '100%' }}
+                        disabled={loading || !chatflowid}
+                        onKeyDown={handleEnter}
+                        id='userInput'
+                        name='userInput'
+                        placeholder={loading ? 'Waiting for response...' : 'Type your question...'}
+                        value={userInput}
+                        onChange={onChange}
+                        multiline={true}
+                        maxRows={isDialog ? 7 : 2}
+                        startAdornment={
+                            isChatFlowAvailableForUploads && (
+                                <InputAdornment position='start' sx={{ pl: 2 }}>
+                                    <IconButton onClick={handleUploadClick} type='button' disabled={loading || !chatflowid} edge='start'>
+                                        <IconPhotoPlus
+                                            color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
+                                        />
+                                    </IconButton>
+                                </InputAdornment>
+                            )
+                        }
+                        endAdornment={
+                            <>
+                                {isChatFlowAvailableForUploads && (
+                                    <InputAdornment position='end'>
                                         <IconButton
-                                            onClick={handleUploadClick}
+                                            onClick={() => onMicrophonePressed()}
                                             type='button'
                                             disabled={loading || !chatflowid}
-                                            edge='start'
+                                            edge='end'
                                         >
-                                            <IconPhotoPlus
+                                            <IconMicrophone
+                                                className={'start-recording-button'}
                                                 color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
                                             />
                                         </IconButton>
                                     </InputAdornment>
-                                )
-                            }
-                            endAdornment={
-                                <>
-                                    {isChatFlowAvailableForSpeech && (
-                                        <InputAdornment position='end'>
-                                            <IconButton
-                                                onClick={() => onMicrophonePressed()}
-                                                type='button'
-                                                disabled={loading || !chatflowid}
-                                                edge='end'
-                                            >
-                                                <IconMicrophone
-                                                    className={'start-recording-button'}
-                                                    color={
-                                                        loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'
-                                                    }
-                                                />
-                                            </IconButton>
-                                        </InputAdornment>
-                                    )}
-                                    <InputAdornment position='end' sx={{ padding: '15px' }}>
-                                        <IconButton type='submit' disabled={loading || !chatflowid} edge='end'>
-                                            {loading ? (
-                                                <div>
-                                                    <CircularProgress color='inherit' size={20} />
-                                                </div>
-                                            ) : (
-                                                // Send icon SVG in input field
-                                                <IconSend
-                                                    color={
-                                                        loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'
-                                                    }
-                                                />
-                                            )}
-                                        </IconButton>
-                                    </InputAdornment>
-                                </>
-                            }
-                        />
-                        {isChatFlowAvailableForUploads && (
-                            <input style={{ display: 'none' }} multiple ref={fileUploadRef} type='file' onChange={handleFileChange} />
-                        )}
-                    </form>
-                </div>
+                                )}
+                                <InputAdornment position='end' sx={{ padding: '15px' }}>
+                                    <IconButton type='submit' disabled={loading || !chatflowid} edge='end'>
+                                        {loading ? (
+                                            <div>
+                                                <CircularProgress color='inherit' size={20} />
+                                            </div>
+                                        ) : (
+                                            // Send icon SVG in input field
+                                            <IconSend
+                                                color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
+                                            />
+                                        )}
+                                    </IconButton>
+                                </InputAdornment>
+                            </>
+                        }
+                    />
+                    {isChatFlowAvailableForUploads && (
+                        <input style={{ display: 'none' }} multiple ref={fileUploadRef} type='file' onChange={handleFileChange} />
+                    )}
+                </form>
             </div>
             <SourceDocDialog show={sourceDialogOpen} dialogProps={sourceDialogProps} onCancel={() => setSourceDialogOpen(false)} />
         </>
diff --git a/packages/ui/src/views/chatmessage/ChatPopUp.js b/packages/ui/src/views/chatmessage/ChatPopUp.js
index 670fb00f0..91ba73e23 100644
--- a/packages/ui/src/views/chatmessage/ChatPopUp.js
+++ b/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>