From 5aa991ae56d910120b3bbb27e1ead14a81e79559 Mon Sep 17 00:00:00 2001
From: Ilango <rajagopalilango@gmail.com>
Date: Mon, 19 Feb 2024 12:15:43 +0530
Subject: [PATCH] Update how uploads are shown in view messages dialog

---
 .../ui-component/dialog/ViewMessagesDialog.js | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/packages/ui/src/ui-component/dialog/ViewMessagesDialog.js b/packages/ui/src/ui-component/dialog/ViewMessagesDialog.js
index 2df501fb..a28f2c68 100644
--- a/packages/ui/src/ui-component/dialog/ViewMessagesDialog.js
+++ b/packages/ui/src/ui-component/dialog/ViewMessagesDialog.js
@@ -632,8 +632,8 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
                                                             sx={{
                                                                 background:
                                                                     message.type === 'apiMessage' ? theme.palette.asyncSelect.main : '',
-                                                                pl: 1,
-                                                                pr: 1
+                                                                py: '1rem',
+                                                                px: '1.5rem'
                                                             }}
                                                             key={index}
                                                             style={{ display: 'flex', justifyContent: 'center', alignContent: 'center' }}
@@ -683,34 +683,6 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
                                                                         })}
                                                                     </div>
                                                                 )}
-                                                                <div className='markdownanswer'>
-                                                                    {/* Messages are being rendered in Markdown format */}
-                                                                    <MemoizedReactMarkdown
-                                                                        remarkPlugins={[remarkGfm, remarkMath]}
-                                                                        rehypePlugins={[rehypeMathjax, rehypeRaw]}
-                                                                        components={{
-                                                                            code({ inline, className, children, ...props }) {
-                                                                                const match = /language-(\w+)/.exec(className || '')
-                                                                                return !inline ? (
-                                                                                    <CodeBlock
-                                                                                        key={Math.random()}
-                                                                                        chatflowid={dialogProps.chatflow.id}
-                                                                                        isDialog={true}
-                                                                                        language={(match && match[1]) || ''}
-                                                                                        value={String(children).replace(/\n$/, '')}
-                                                                                        {...props}
-                                                                                    />
-                                                                                ) : (
-                                                                                    <code className={className} {...props}>
-                                                                                        {children}
-                                                                                    </code>
-                                                                                )
-                                                                            }
-                                                                        }}
-                                                                    >
-                                                                        {message.message}
-                                                                    </MemoizedReactMarkdown>
-                                                                </div>
                                                                 {message.fileUploads && message.fileUploads.length > 0 && (
                                                                     <div
                                                                         style={{
@@ -756,6 +728,34 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
                                                                         })}
                                                                     </div>
                                                                 )}
+                                                                <div className='markdownanswer'>
+                                                                    {/* Messages are being rendered in Markdown format */}
+                                                                    <MemoizedReactMarkdown
+                                                                        remarkPlugins={[remarkGfm, remarkMath]}
+                                                                        rehypePlugins={[rehypeMathjax, rehypeRaw]}
+                                                                        components={{
+                                                                            code({ inline, className, children, ...props }) {
+                                                                                const match = /language-(\w+)/.exec(className || '')
+                                                                                return !inline ? (
+                                                                                    <CodeBlock
+                                                                                        key={Math.random()}
+                                                                                        chatflowid={dialogProps.chatflow.id}
+                                                                                        isDialog={true}
+                                                                                        language={(match && match[1]) || ''}
+                                                                                        value={String(children).replace(/\n$/, '')}
+                                                                                        {...props}
+                                                                                    />
+                                                                                ) : (
+                                                                                    <code className={className} {...props}>
+                                                                                        {children}
+                                                                                    </code>
+                                                                                )
+                                                                            }
+                                                                        }}
+                                                                    >
+                                                                        {message.message}
+                                                                    </MemoizedReactMarkdown>
+                                                                </div>
                                                                 {message.fileAnnotations && (
                                                                     <div style={{ display: 'block', flexDirection: 'row', width: '100%' }}>
                                                                         {message.fileAnnotations.map((fileAnnotation, index) => {