Fix audio recorder functionality on Apple devices

chatbot/package.json

@@ -13,8 +13,8 @@
     "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-replace": "^5.0.2",
-    "@types/react": "^16.9.9",
-    "@types/react-dom": "^16.9.2",
+    "@types/react": "18.2.25",
+    "@types/react-dom": "18.0.11",
     "autoprefixer": "^10.4.14",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-preset-es2015": "^6.24.1",

chatbot/yarn.lock

@@ -530,17 +530,26 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
-"@types/react-dom@^16.9.2":
-  version "16.9.19"
-  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.19.tgz"
-  integrity sha512-xC8D280Bf6p0zguJ8g62jcEOKZiUbx9sIe6O3tT/lKfR87A7A6g65q13z6D5QUMIa/6yFPkNhqjF5z/VVZEYqQ==
+"@types/react-dom@18.0.11":
+  version "18.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.11.tgz#321351c1459bc9ca3d216aefc8a167beec334e33"
+  integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==
   dependencies:
-    "@types/react" "^16"
+    "@types/react" "*"
 
-"@types/react@^16", "@types/react@^16.9.9":
-  version "16.14.43"
-  resolved "https://registry.npmjs.org/@types/react/-/react-16.14.43.tgz"
-  integrity sha512-7zdjv7jvoLLQg1tTvpQsm+hyNUMT2mPlNV1+d0I8fbGhkJl82spopMyBlu4wb1dviZAxpGdk5eHu/muacknnfw==
+"@types/react@*":
+  version "18.2.45"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.45.tgz#253f4fac288e7e751ab3dc542000fb687422c15c"
+  integrity sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/react@18.2.25":
+  version "18.2.25"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.25.tgz#99fa44154132979e870ff409dc5b6e67f06f0199"
+  integrity sha512-24xqse6+VByVLIr+xWaQ9muX1B4bXJKXBbjszbld/UEDslGLY53+ZucF44HCmLbMPejTzGG9XgR+3m2/Wqu1kw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"

next.config.js

@@ -21,7 +21,7 @@ module.exports = withSentryConfig(
     // https://github.com/getsentry/sentry-webpack-plugin#options
 
     // Suppresses source map uploading logs during build
-    silent: false,
+    silent: true,
     org: "coronasafe-network",
     project: "ayushma-nextjs",
   },

package.json

@@ -20,8 +20,9 @@
     "@tanstack/react-query": "^4.29.3",
     "@tanstack/react-query-devtools": "^4.29.3",
     "@types/node": "18.16.0",
-    "@types/react": "18.0.38",
+    "@types/react": "18.2.25",
     "@types/react-dom": "18.0.11",
+    "audio-recorder-polyfill": "^0.4.1",
     "autoprefixer": "10.4.14",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
@@ -37,7 +38,6 @@
     "react-hot-toast": "^2.4.1",
     "react-infinite-scroller": "^1.2.6",
     "react-markdown": "^8.0.7",
-    "react-media-recorder-2": "^1.6.23",
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
     "tailwind-merge": "^1.12.0",

src/components/chatbar.tsx

@@ -1,12 +1,12 @@
 import { useState } from "react";
 import { Input } from "./ui/interactive";
 import Loading from "./ui/loading";
-import { useReactMediaRecorder } from "react-media-recorder-2";
 import LangDialog from "./ui/langdialog";
 import { supportedLanguages } from "@/utils/constants";
 import { storageAtom } from "@/store";
 import { useAtom } from "jotai";
 import Modal from "./modal";
+import { useAudioRecorder } from "./recorder";
 
 export default function ChatBar(props: {
     chat: string,
@@ -20,11 +20,7 @@ export default function ChatBar(props: {
     const { chat, onChange, onSubmit, errors, loading, onAudio } = props;
 
     const [storage, setStorage] = useAtom(storageAtom);
-
-    const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({
-        audio: true,
-        onStop: onAudio
-    });
+    const { status, startRecording, stopRecording } = useAudioRecorder(onAudio);
 
     const [langDialogOpen, setLangDialogOpen] = useState<boolean>(false);
 
@@ -90,7 +86,7 @@ export default function ChatBar(props: {
                                 <i className="fal fa-microphone" />
                             </button>
                             </span>
-                            <button className="w-12 h-12 p-1 text-xl ml-2 rounded-lg enabled:hover:bg-green-600 enabled:bg-green-500 enabled:text-white disabled:text-gray-300 transition"  disabled={chat.length < 1}>
+                            <button className="w-12 h-12 p-1 text-xl ml-2 rounded-lg enabled:hover:bg-green-600 enabled:bg-green-500 enabled:text-white disabled:text-gray-300 transition"  disabled={(chat?.length || 0) < 1}>
                                 <i className="fal fa-paper-plane-top" />
                             </button>
                         </span>

src/components/recorder.ts

@@ -0,0 +1,52 @@
+import { useState, useCallback } from 'react';
+import AudioRecorder from 'audio-recorder-polyfill';
+
+type UseAudioRecorderReturn = {
+    status: string,
+    startRecording: () => void,
+    stopRecording: () => void,
+    mediaBlobUrl: string | null,
+};
+
+export const useAudioRecorder = (onStop?: (url: string) => void): UseAudioRecorderReturn => {
+    const [status, setStatus] = useState('idle');
+    const [mediaBlobUrl, setMediaBlobUrl] = useState<string | null>(null);
+    const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
+    const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
+
+    const startRecording = useCallback(() => {
+        if (status !== 'idle') return;
+
+        navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
+            setMediaStream(stream);
+
+            const recorder = new AudioRecorder(stream);
+            setMediaRecorder(recorder);
+
+            const audioChunks: BlobPart[] = [];
+            recorder.addEventListener('dataavailable', (event: any) => audioChunks.push(event.data));
+            recorder.addEventListener('stop', () => {
+                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                const audioUrl = URL.createObjectURL(audioBlob);
+                setMediaBlobUrl(audioUrl);
+                onStop?.(audioUrl);
+                setStatus('stopped');
+            });
+
+            recorder.start();
+            setStatus('recording');
+        }).catch(error => {
+            console.error('Error accessing media devices:', error);
+        });
+    }, [status, onStop]);
+
+    const stopRecording = useCallback(() => {
+        if (mediaRecorder && mediaRecorder.state === 'recording') {
+            mediaRecorder.stop();
+            mediaStream?.getTracks().forEach(track => track.stop());
+            setMediaStream(null);
+        }
+    }, [mediaRecorder, mediaStream]);
+
+    return { status, startRecording, stopRecording, mediaBlobUrl };
+};