Bugfix/speech input on Safari/iOS (#1971)

* debug to identify

* Safari sends audio file as mp4 and nor webp

* Safari on iOS needs special handling

* lint fixes

* updated condition

* Remove unused import

---------

Co-authored-by: Ilango <rajagopalilango@gmail.com>

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

@@ -241,7 +241,13 @@ export const ChatMessage = ({ open, chatflowid, isDialog, previews, setPreviews
     }
 
     const addRecordingToPreviews = (blob) => {
-        const mimeType = blob.type.substring(0, blob.type.indexOf(';'))
+        let mimeType = ''
+        const pos = blob.type.indexOf(';')
+        if (pos === -1) {
+            mimeType = blob.type
+        } else {
+            mimeType = blob.type.substring(0, pos)
+        }
         // read blob and add to previews
         const reader = new FileReader()
         reader.readAsDataURL(blob)

packages/ui/src/views/chatmessage/audio-recording.js

@@ -2,6 +2,7 @@
  * @fileoverview This file contains the API to handle audio recording.
  * Originally from 'https://ralzohairi.medium.com/audio-recording-in-javascript-96eed45b75ee'
  */
+import { isSafari } from 'react-device-detect'
 
 // audio-recording.js ---------------
 let microphoneButton, elapsedTimeTag
@@ -277,7 +278,13 @@ export const audioRecorder = {
                         })
 
                         //start the recording by calling the start method on the media recorder
-                        audioRecorder.mediaRecorder.start()
+                        if (isSafari) {
+                            // https://community.openai.com/t/whisper-problem-with-audio-mp4-blobs-from-safari/322252
+                            // https://community.openai.com/t/whisper-api-cannot-read-files-correctly/93420/46
+                            audioRecorder.mediaRecorder.start(1000)
+                        } else {
+                            audioRecorder.mediaRecorder.start()
+                        }
                     })
             )