farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-29 07:01:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Showing image/audio files in the View Messages Dialog

Browse Source
This commit is contained in:
vinodkiran
2024-02-14 13:14:46 -05:00
parent 86da67f467
commit 44c1f54d05
1 changed files with 62 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/ui-component/dialog/ViewMessagesDialog.js
+62 -1
View File
@@ -21,7 +21,9 @@ import {
DialogTitle, DialogTitle,
ListItem, ListItem,
ListItemText, ListItemText,
Chip Chip,
Card,
CardMedia
} from '@mui/material' } from '@mui/material'
import { useTheme } from '@mui/material/styles' import { useTheme } from '@mui/material/styles'
import DatePicker from 'react-datepicker' import DatePicker from 'react-datepicker'
@@ -69,6 +71,12 @@ DatePickerCustomInput.propTypes = {
onClick: PropTypes.func onClick: PropTypes.func
} }
const messageImageStyle = {
width: '128px',
height: '128px',
objectFit: 'cover'
}
const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => { const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
const portalElement = document.getElementById('portal') const portalElement = document.getElementById('portal')
const dispatch = useDispatch() 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 = { const obj = {
...chatmsg, ...chatmsg,
message: chatmsg.content, message: chatmsg.content,
@@ -672,6 +688,51 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
{message.message} {message.message}
</MemoizedReactMarkdown> </MemoizedReactMarkdown>
</div> </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 && ( {message.fileAnnotations && (
<div style={{ display: 'block', flexDirection: 'row', width: '100%' }}> <div style={{ display: 'block', flexDirection: 'row', width: '100%' }}>
{message.fileAnnotations.map((fileAnnotation, index) => { {message.fileAnnotations.map((fileAnnotation, index) => {