From 44c1f54d05e948184229c9fc60c08739bfb3ff50 Mon Sep 17 00:00:00 2001
From: vinodkiran <vinodkiran@usa.net>
Date: Wed, 14 Feb 2024 13:14:46 -0500
Subject: [PATCH] Showing image/audio files in the View Messages Dialog

---
 .../ui-component/dialog/ViewMessagesDialog.js | 63 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/ui-component/dialog/ViewMessagesDialog.js b/packages/ui/src/ui-component/dialog/ViewMessagesDialog.js
index cadd4abd..6e206885 100644
--- a/packages/ui/src/ui-component/dialog/ViewMessagesDialog.js
+++ b/packages/ui/src/ui-component/dialog/ViewMessagesDialog.js
@@ -21,7 +21,9 @@ import {
     DialogTitle,
     ListItem,
     ListItemText,
-    Chip
+    Chip,
+    Card,
+    CardMedia
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import DatePicker from 'react-datepicker'
@@ -69,6 +71,12 @@ DatePickerCustomInput.propTypes = {
     onClick: PropTypes.func
 }
 
+const messageImageStyle = {
+    width: '128px',
+    height: '128px',
+    objectFit: 'cover'
+}
+
 const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
     const portalElement = document.getElementById('portal')
     const dispatch = useDispatch()
@@ -249,6 +257,14 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
                     })
                 }
             }
+            if (chatmsg.fileUploads) {
+                chatmsg.fileUploads = JSON.parse(chatmsg.fileUploads)
+                chatmsg.fileUploads.forEach((file) => {
+                    if (file.type === 'stored-file') {
+                        file.data = `${baseURL}/api/v1/get-upload-file?chatflowId=${chatmsg.chatflowid}&chatId=${chatmsg.chatId}&fileName=${file.name}`
+                    }
+                })
+            }
             const obj = {
                 ...chatmsg,
                 message: chatmsg.content,
@@ -672,6 +688,51 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
                                                                         {message.message}
                                                                     </MemoizedReactMarkdown>
                                                                 </div>
+                                                                {message.fileUploads && message.fileUploads.length > 0 && (
+                                                                    <div
+                                                                        style={{
+                                                                            display: 'flex',
+                                                                            flexWrap: 'wrap',
+                                                                            flexDirection: 'row',
+                                                                            width: '100%',
+                                                                            gap: '4px'
+                                                                        }}
+                                                                    >
+                                                                        {message.fileUploads.map((item, index) => {
+                                                                            return (
+                                                                                <>
+                                                                                    {item.mime.startsWith('image/') ? (
+                                                                                        <Card
+                                                                                            key={index}
+                                                                                            sx={{
+                                                                                                p: 0,
+                                                                                                m: 0,
+                                                                                                maxWidth: 128,
+                                                                                                marginRight: '10px',
+                                                                                                flex: '0 0 auto'
+                                                                                            }}
+                                                                                        >
+                                                                                            <CardMedia
+                                                                                                component='img'
+                                                                                                image={item.data}
+                                                                                                sx={{ height: 64 }}
+                                                                                                alt={'preview'}
+                                                                                                style={messageImageStyle}
+                                                                                            />
+                                                                                        </Card>
+                                                                                    ) : (
+                                                                                        // eslint-disable-next-line jsx-a11y/media-has-caption
+                                                                                        <audio controls='controls'>
+                                                                                            Your browser does not support the &lt;audio&gt;
+                                                                                            tag.
+                                                                                            <source src={item.data} type={item.mime} />
+                                                                                        </audio>
+                                                                                    )}
+                                                                                </>
+                                                                            )
+                                                                        })}
+                                                                    </div>
+                                                                )}
                                                                 {message.fileAnnotations && (
                                                                     <div style={{ display: 'block', flexDirection: 'row', width: '100%' }}>
                                                                         {message.fileAnnotations.map((fileAnnotation, index) => {