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

Fix issue where audio recording is not sent on stopping recording

Browse Source
This commit is contained in:
Ilango
2024-01-23 11:03:38 +05:30
parent f384ad9086
commit 318686e622
1 changed files with 183 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/views/chatmessage/ChatMessage.js
+26 -19
View File
@@ -1,4 +1,4 @@
import { useState, useRef, useEffect, useCallback } from 'react'
import { useState, useRef, useEffect, useCallback, Fragment } from 'react'
import { useSelector } from 'react-redux'
import PropTypes from 'prop-types'
import socketIOClient from 'socket.io-client'
@@ -96,6 +96,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
// recording
const [isRecording, setIsRecording] = useState(false)
const [recordingNotSupported, setRecordingNotSupported] = useState(false)
const [isLoadingRecording, setIsLoadingRecording] = useState(false)
const isFileAllowedForUpload = (file) => {
const constraints = getAllowChatFlowUploads.data
@@ -292,10 +293,8 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
}
const onRecordingStopped = async () => {
setIsLoadingRecording(true)
stopAudioRecording(addRecordingToPreviews)
setIsRecording(false)
setRecordingNotSupported(false)
handlePromptClick('')
}
const onSourceDialogClick = (data, title) => {
@@ -364,14 +363,13 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
if (promptStarterInput !== undefined && promptStarterInput.trim() !== '') input = promptStarterInput
setLoading(true)
const urls = []
previews.map((item) => {
urls.push({
const urls = previews.map((item) => {
return {
data: item.data,
type: item.type,
name: item.name,
mime: item.mime
})
}
})
clearPreviews()
setMessages((prevMessages) => [...prevMessages, { message: input, type: 'userMessage', fileUploads: urls }])
@@ -383,7 +381,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
history: messages.filter((msg) => msg.message !== 'Hi there! How can I help?'),
chatId
}
if (urls) params.uploads = urls
if (urls && urls.length > 0) params.uploads = urls
if (isChatFlowAvailableToStream) params.socketIOClientId = socketIOClientId
const response = await predictionApi.sendMessageAndGetPrediction(chatflowid, params)
@@ -584,6 +582,16 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open, chatflowid])
useEffect(() => {
// wait for audio recording to load and then send
if (previews.length === 1 && previews[0].type === 'audio') {
setIsRecording(false)
setRecordingNotSupported(false)
handlePromptClick('')
}
// eslint-disable-next-line
}, [previews])
return (
<div onDragEnter={handleDrag}>
{isDragActive && (
@@ -614,7 +622,6 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
messages.map((message, index) => {
return (
// The latest message sent by the user will be animated while waiting for a response
<>
<Box
sx={{
background: message.type === 'apiMessage' ? theme.palette.asyncSelect.main : ''
@@ -776,7 +783,6 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
)}
</div>
</Box>
</>
)
})}
</div>
@@ -800,11 +806,10 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
{previews && previews.length > 0 && (
<Box sx={{ width: '100%', mb: 1.5 }}>
{previews.map((item, index) => (
<>
<Fragment key={index}>
{item.mime.startsWith('image/') ? (
<ImageButton
focusRipple
key={index}
style={{
width: '48px',
height: '48px',
@@ -831,7 +836,6 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
backgroundColor: theme.palette.grey[500],
flex: '0 0 auto'
}}
key={index}
variant='outlined'
>
<CardMedia
@@ -845,7 +849,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
</IconButton>
</Card>
)}
</>
</Fragment>
))}
</Box>
)}
@@ -854,7 +858,9 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
{recordingNotSupported && (
<div className='overlay hide'>
<div className='browser-not-supporting-audio-recording-box'>
<p>To record audio, use modern browsers like Chrome or Firefox that support audio recording.</p>
<Typography variant='body1'>
To record audio, use modern browsers like Chrome or Firefox that support audio recording.
</Typography>
<Button
variant='contained'
color='error'
@@ -880,10 +886,11 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
}}
>
<div className='recording-elapsed-time'>
<i className='red-recording-dot'>
<span className='red-recording-dot'>
<IconCircleDot />
</i>
<p id='elapsed-time'>00:00</p>
</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'>