Sultan
/
Flowise
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Ilango 2024-01-22 11:10:27 +05:30
parent e774bd3c12
commit 7e5d8e7294
4 changed files with 95 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui/src/views/chatmessage/ChatExpandDialog.js
View File

@ -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>

28
packages/ui/src/views/chatmessage/ChatMessage.css
View File

@ -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 {

140
packages/ui/src/views/chatmessage/ChatMessage.js
View File

@ -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)} />
</>

9
packages/ui/src/views/chatmessage/ChatPopUp.js
View File

@ -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>