Fix issue where audio recording is not sent on stopping recording

packages/ui/src/views/chatmessage/ChatMessage.js

@@ -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 = []
+        const urls = previews.map((item) => {
-        previews.map((item) => {
+            return {
-            urls.push({
                 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>
+                                </span>
-                                <p id='elapsed-time'>00:00</p>
+                                <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'>