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' aria-describedby='alert-dialog-description'
sx={{ overflow: 'visible' }} 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' }}> <div style={{ display: 'flex', flexDirection: 'row' }}>
{dialogProps.title} {dialogProps.title}
<div style={{ flex: 1 }}></div> <div style={{ flex: 1 }}></div>
@ -43,7 +43,10 @@ const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel }) => {
)} )}
</div> </div>
</DialogTitle> </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} /> <ChatMessage isDialog={true} open={dialogProps.open} chatflowid={dialogProps.chatflowid} />
</DialogContent> </DialogContent>
</Dialog> </Dialog>

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

@ -1,8 +1,6 @@
.messagelist { .messagelist {
width: 100%; width: 100%;
height: 100%; height: auto;
overflow-y: scroll;
overflow-x: hidden;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
@ -108,32 +106,38 @@
} }
.center { .center {
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
padding: 10px; padding: 12px;
} }
.cloud { .cloud-wrapper,
.cloud-dialog-wrapper {
width: 400px; width: 400px;
height: calc(100vh - 260px); height: calc(100vh - 260px);
overflow-y: scroll;
border-radius: 0.5rem;
display: flex; display: flex;
justify-content: center; align-items: start;
align-items: center; justify-content: start;
flex-direction: column;
} }
.cloud-dialog-wrapper {
width: 100%;
}
.cloud,
.cloud-dialog { .cloud-dialog {
width: 100%; width: 100%;
height: 100vh; height: auto;
max-height: calc(100% - 72px);
overflow-y: scroll; overflow-y: scroll;
border-radius: 0.5rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: start;
} }
.cloud-message { .cloud-message {

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

@ -703,7 +703,14 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
</div> </div>
)} )}
{message.fileUploads && message.fileUploads.length > 0 && ( {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) => { {message.fileUploads.map((item, index) => {
return ( return (
<> <>
@ -833,9 +840,9 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
<Divider /> <Divider />
</div> </div>
<div style={{ position: 'relative' }}> <div className='center'>
{previews && previews.length > 0 && ( {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) => ( {previews.map((item, index) => (
<> <>
{item.mime.startsWith('image/') ? ( {item.mime.startsWith('image/') ? (
@ -886,85 +893,70 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
))} ))}
</Box> </Box>
)} )}
<Divider /> <form style={{ width: '100%' }} onSubmit={handleSubmit}>
</div> <OutlinedInput
inputRef={inputRef}
<div className='center'> // eslint-disable-next-line
<div style={{ width: '100%' }}> autoFocus
<form style={{ width: '100%' }} onSubmit={handleSubmit}> sx={{ width: '100%' }}
<OutlinedInput disabled={loading || !chatflowid}
inputRef={inputRef} onKeyDown={handleEnter}
// eslint-disable-next-line id='userInput'
autoFocus name='userInput'
sx={{ width: '100%' }} placeholder={loading ? 'Waiting for response...' : 'Type your question...'}
disabled={loading || !chatflowid} value={userInput}
onKeyDown={handleEnter} onChange={onChange}
id='userInput' multiline={true}
name='userInput' maxRows={isDialog ? 7 : 2}
placeholder={loading ? 'Waiting for response...' : 'Type your question...'} startAdornment={
value={userInput} isChatFlowAvailableForUploads && (
onChange={onChange} <InputAdornment position='start' sx={{ pl: 2 }}>
multiline={true} <IconButton onClick={handleUploadClick} type='button' disabled={loading || !chatflowid} edge='start'>
maxRows={isDialog ? 7 : 2} <IconPhotoPlus
startAdornment={ color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
isChatFlowAvailableForUploads && ( />
<InputAdornment position='start' sx={{ pl: 2 }}> </IconButton>
</InputAdornment>
)
}
endAdornment={
<>
{isChatFlowAvailableForUploads && (
<InputAdornment position='end'>
<IconButton <IconButton
onClick={handleUploadClick} onClick={() => onMicrophonePressed()}
type='button' type='button'
disabled={loading || !chatflowid} disabled={loading || !chatflowid}
edge='start' edge='end'
> >
<IconPhotoPlus <IconMicrophone
className={'start-recording-button'}
color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'} color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
/> />
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>
) )}
} <InputAdornment position='end' sx={{ padding: '15px' }}>
endAdornment={ <IconButton type='submit' disabled={loading || !chatflowid} edge='end'>
<> {loading ? (
{isChatFlowAvailableForSpeech && ( <div>
<InputAdornment position='end'> <CircularProgress color='inherit' size={20} />
<IconButton </div>
onClick={() => onMicrophonePressed()} ) : (
type='button' // Send icon SVG in input field
disabled={loading || !chatflowid} <IconSend
edge='end' color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
> />
<IconMicrophone )}
className={'start-recording-button'} </IconButton>
color={ </InputAdornment>
loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5' </>
} }
/> />
</IconButton> {isChatFlowAvailableForUploads && (
</InputAdornment> <input style={{ display: 'none' }} multiple ref={fileUploadRef} type='file' onChange={handleFileChange} />
)} )}
<InputAdornment position='end' sx={{ padding: '15px' }}> </form>
<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>
</div> </div>
<SourceDocDialog show={sourceDialogOpen} dialogProps={sourceDialogProps} onCancel={() => setSourceDialogOpen(false)} /> <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}> <Transitions in={open} {...TransitionProps}>
<Paper> <Paper>
<ClickAwayListener onClickAway={handleClose}> <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} /> <ChatMessage chatflowid={chatflowid} open={open} />
</MainCard> </MainCard>
</ClickAwayListener> </ClickAwayListener>