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

Fix UI issues - chat window height, image & audio styling, and image + audio not sending together

Browse Source
This commit is contained in:
Ilango
2024-02-06 12:59:40 +05:30
parent c504f91752
commit 8c494cf17e
6 changed files with 45 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/ui-component/cards/StarterPromptsCard.css
-3
View File
@@ -1,6 +1,4 @@
.button-container {
position: absolute;
z-index: 1000;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* For momentum scroll on mobile devices */
@@ -9,5 +7,4 @@
.button {
flex: 0 0 auto; /* Don't grow, don't shrink, base width on content */
margin: 5px; /* Adjust as needed for spacing between buttons */
}
packages/ui/src/ui-component/cards/StarterPromptsCard.js
+4 -1
View File
@@ -5,7 +5,10 @@ import './StarterPromptsCard.css'
const StarterPromptsCard = ({ isGrid, starterPrompts, sx, onPromptClick }) => {
return (
<Box className={'button-container'} sx={{ bottom: 0, maxWidth: isGrid ? 'inherit' : '400px', m: 1, ...sx }}>
<Box
className={'button-container'}
sx={{ width: '100%', maxWidth: isGrid ? 'inherit' : '400px', p: 1.5, display: 'flex', gap: 1, ...sx }}
>
{starterPrompts.map((sp, index) => (
<Chip label={sp.prompt} className={'button'} key={index} onClick={(e) => onPromptClick(sp.prompt, e)} />
))}
packages/ui/src/views/chatmessage/ChatExpandDialog.js
+11 -3
View File
@@ -7,7 +7,7 @@ import { ChatMessage } from './ChatMessage'
import { StyledButton } from 'ui-component/button/StyledButton'
import { IconEraser } from '@tabler/icons'
const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel }) => {
const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel, previews, setPreviews }) => {
const portalElement = document.getElementById('portal')
const customization = useSelector((state) => state.customization)
@@ -47,7 +47,13 @@ const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel }) => {
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}
previews={previews}
setPreviews={setPreviews}
/>
</DialogContent>
</Dialog>
) : null
@@ -59,7 +65,9 @@ ChatExpandDialog.propTypes = {
show: PropTypes.bool,
dialogProps: PropTypes.object,
onClear: PropTypes.func,
onCancel: PropTypes.func
onCancel: PropTypes.func,
previews: PropTypes.array,
setPreviews: PropTypes.func
}
export default ChatExpandDialog
packages/ui/src/views/chatmessage/ChatMessage.css
+8 -3
View File
@@ -115,14 +115,14 @@
padding: 12px;
}
.cloud-wrapper,
.cloud-dialog-wrapper {
.cloud-wrapper {
width: 400px;
height: calc(100vh - 260px);
height: calc(100vh - 180px);
}
.cloud-dialog-wrapper {
width: 100%;
height: calc(100vh - 120px);
}
.cloud-wrapper > div,
@@ -198,3 +198,8 @@
z-index: 2000; /* Ensure it's above other content */
border: 2px dashed #0094ff; /* Example style */
}
.center audio {
height: 100%;
border-radius: 0;
}
packages/ui/src/views/chatmessage/ChatMessage.js
+18 -20
View File
@@ -58,7 +58,7 @@ const messageImageStyle = {
objectFit: 'cover'
}
export const ChatMessage = ({ open, chatflowid, isDialog }) => {
export const ChatMessage = ({ open, chatflowid, isDialog, previews, setPreviews }) => {
const theme = useTheme()
const customization = useSelector((state) => state.customization)
@@ -90,7 +90,6 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
// drag & drop and file input
const fileUploadRef = useRef(null)
const [isChatFlowAvailableForUploads, setIsChatFlowAvailableForUploads] = useState(false)
const [previews, setPreviews] = useState([])
const [isDragActive, setIsDragActive] = useState(false)
// recording
@@ -353,7 +352,8 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
if (e) e.preventDefault()
if (!promptStarterInput && userInput.trim() === '') {
if (!(previews.length === 1 && previews[0].type === 'audio')) {
const containsAudio = previews.filter((item) => item.type === 'audio').length > 0
if (!(previews.length > 1 && containsAudio)) {
return
}
}
@@ -584,7 +584,8 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
useEffect(() => {
// wait for audio recording to load and then send
if (previews.length === 1 && previews[0].type === 'audio') {
const containsAudio = previews.filter((item) => item.type === 'audio').length > 0
if (previews.length > 1 && containsAudio) {
setIsRecording(false)
setRecordingNotSupported(false)
handlePromptClick('')
@@ -669,7 +670,8 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
display: 'flex',
flexWrap: 'wrap',
flexDirection: 'row',
width: '100%'
width: '100%',
gap: '4px'
}}
>
{message.fileUploads.map((item, index) => {
@@ -788,23 +790,22 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
</div>
</div>
<div style={{ position: 'relative' }}>
{messages && messages.length === 1 && (
{messages && messages.length === 1 && starterPrompts.length > 0 && (
<div style={{ position: 'relative' }}>
<StarterPromptsCard
sx={{ bottom: previews && previews.length > 0 ? 70 : 0 }}
starterPrompts={starterPrompts || []}
onPromptClick={handlePromptClick}
isGrid={isDialog}
/>
)}
<Divider />
</div>
</div>
)}
<Divider sx={{ width: '100%' }} />
<div className='center'>
{previews && previews.length > 0 && (
<Box sx={{ width: '100%', mb: 1.5 }}>
<Box sx={{ width: '100%', mb: 1.5, display: 'flex', alignItems: 'center' }}>
{previews.map((item, index) => (
<Fragment key={index}>
{item.mime.startsWith('image/') ? (
@@ -827,23 +828,18 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
) : (
<Card
sx={{
display: 'flex',
display: 'inline-flex',
alignItems: 'center',
height: '48px',
width: isDialog ? ps?.current?.offsetWidth / 4 : ps?.current?.offsetWidth / 2,
pl: 0.5,
p: 0.5,
mr: 1,
backgroundColor: theme.palette.grey[500],
flex: '0 0 auto'
}}
variant='outlined'
>
<CardMedia
component='audio'
sx={{ height: '40px', color: 'transparent' }}
controls
src={item.data}
/>
<CardMedia component='audio' sx={{ color: 'transparent' }} controls src={item.data} />
<IconButton onClick={() => handleDeletePreview(item)} size='small'>
<IconTrash size={20} color='white' />
</IconButton>
@@ -993,5 +989,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
ChatMessage.propTypes = {
open: PropTypes.bool,
chatflowid: PropTypes.string,
isDialog: PropTypes.bool
isDialog: PropTypes.bool,
previews: PropTypes.array,
setPreviews: PropTypes.func
}
packages/ui/src/views/chatmessage/ChatPopUp.js
+4 -1
View File
@@ -35,6 +35,7 @@ export const ChatPopUp = ({ chatflowid }) => {
const [open, setOpen] = useState(false)
const [showExpandDialog, setShowExpandDialog] = useState(false)
const [expandDialogProps, setExpandDialogProps] = useState({})
const [previews, setPreviews] = useState([])
const anchorRef = useRef(null)
const prevOpen = useRef(open)
@@ -199,7 +200,7 @@ export const ChatPopUp = ({ chatflowid }) => {
boxShadow
shadow={theme.shadows[16]}
>
<ChatMessage chatflowid={chatflowid} open={open} />
<ChatMessage chatflowid={chatflowid} open={open} previews={previews} setPreviews={setPreviews} />
</MainCard>
</ClickAwayListener>
</Paper>
@@ -211,6 +212,8 @@ export const ChatPopUp = ({ chatflowid }) => {
dialogProps={expandDialogProps}
onClear={clearChat}
onCancel={() => setShowExpandDialog(false)}
previews={previews}
setPreviews={setPreviews}
></ChatExpandDialog>
</>
)