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

Fix error message when audio recording is not available

Browse Source
This commit is contained in:
Ilango
2024-01-30 15:30:07 +05:30
parent d61e3d53ec
commit 517c2f2916
3 changed files with 41 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/views/chatmessage/ChatMessage.css
+1 -1
View File
@@ -151,7 +151,7 @@
.cloud-dialog { .cloud-dialog {
width: 100%; width: 100%;
height: auto; height: auto;
max-height: calc(100% - 72px); max-height: calc(100% - 54px);
overflow-y: scroll; overflow-y: scroll;
display: flex; display: flex;
justify-content: center; justify-content: center;
packages/ui/src/views/chatmessage/ChatMessage.js
+39 -32
View File
@@ -287,7 +287,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
} }
const onRecordingCancelled = () => { const onRecordingCancelled = () => {
cancelAudioRecording() if (!recordingNotSupported) cancelAudioRecording()
setIsRecording(false) setIsRecording(false)
setRecordingNotSupported(false) setRecordingNotSupported(false)
} }
@@ -855,8 +855,8 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
)} )}
{isRecording ? ( {isRecording ? (
<> <>
{recordingNotSupported && ( {recordingNotSupported ? (
<div className='overlay hide'> <div className='overlay'>
<div className='browser-not-supporting-audio-recording-box'> <div className='browser-not-supporting-audio-recording-box'>
<Typography variant='body1'> <Typography variant='body1'>
To record audio, use modern browsers like Chrome or Firefox that support audio recording. To record audio, use modern browsers like Chrome or Firefox that support audio recording.
@@ -872,35 +872,42 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
</Button> </Button>
</div> </div>
</div> </div>
) : (
<Box
sx={{
width: '100%',
height: '54px',
px: 2,
border: '1px solid',
borderRadius: 3,
backgroundColor: customization.isDarkMode ? '#32353b' : '#fafafa',
borderColor: 'rgba(0, 0, 0, 0.23)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}
>
<div className='recording-elapsed-time'>
<span className='red-recording-dot'>
<IconCircleDot />
</span>
<Typography id='elapsed-time'>00:00</Typography>
{isLoadingRecording && <Typography ml={1.5}>Sending...</Typography>}
</div>
<div className='recording-control-buttons-container'>
<IconButton onClick={onRecordingCancelled} size='small'>
<IconX
color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
/>
</IconButton>
<IconButton onClick={onRecordingStopped} size='small'>
<IconSend
color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
/>
</IconButton>
</div>
</Box>
)} )}
<Box
sx={{
width: '100%',
height: '54px',
px: 2,
borderRadius: 1.5,
backgroundColor: '#32353b',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}
>
<div className='recording-elapsed-time'>
<span className='red-recording-dot'>
<IconCircleDot />
</span>
<Typography id='elapsed-time'>00:00</Typography>
{isLoadingRecording && <Typography ml={1.5}>Sending...</Typography>}
</div>
<div className='recording-control-buttons-container'>
<IconButton onClick={onRecordingCancelled} size='small'>
<IconX color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'} />
</IconButton>
<IconButton onClick={onRecordingStopped} size='small'>
<IconSend color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'} />
</IconButton>
</div>
</Box>
</> </>
) : ( ) : (
<form style={{ width: '100%' }} onSubmit={handleSubmit}> <form style={{ width: '100%' }} onSubmit={handleSubmit}>
@@ -936,7 +943,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
} }
endAdornment={ endAdornment={
<> <>
{isChatFlowAvailableForUploads && ( {isChatFlowAvailableForSpeech && (
<InputAdornment position='end'> <InputAdornment position='end'>
<IconButton <IconButton
onClick={() => onMicrophonePressed()} onClick={() => onMicrophonePressed()}
packages/ui/src/views/chatmessage/audio-recording.css
+1 -1
View File
@@ -115,6 +115,7 @@
} }
.overlay { .overlay {
width: 100%; width: 100%;
height: '54px';
/*targeting Chrome & Safari*/ /*targeting Chrome & Safari*/
display: -webkit-flex; display: -webkit-flex;
/*targeting IE10*/ /*targeting IE10*/
@@ -123,7 +124,6 @@
justify-content: center; justify-content: center;
/*horizontal centering*/ /*horizontal centering*/
align-items: center; align-items: center;
margin-bottom: 12px;
} }
.overlay.hide { .overlay.hide {
display: none; display: none;