fix: ui between state when deleting recording

Author: isekovanic

package/src/components/MessageInput/hooks/useAudioRecorder.tsx

@@ -27,9 +27,12 @@ export const useAudioRecorder = ({
    * side only. Meant to be used as a pure function (during unmounting for instance)
    * hence this approach.
    */
-  const stopVoiceRecording = useCallback(async () => {
-    await audioRecorderManager.stopRecording();
-  }, [audioRecorderManager]);
+  const stopVoiceRecording = useCallback(
+    async (withDelete?: boolean) => {
+      await audioRecorderManager.stopRecording(withDelete);
+    },
+    [audioRecorderManager],
+  );
 
   // This effect stop the player from playing and stops audio recording on
   // the audio SDK side on unmount.
@@ -60,9 +63,8 @@ export const useAudioRecorder = ({
    * Function to delete voice recording.
    */
   const deleteVoiceRecording = useCallback(async () => {
-    await stopVoiceRecording();
-    audioRecorderManager.reset();
-  }, [audioRecorderManager, stopVoiceRecording]);
+    await stopVoiceRecording(true);
+  }, [stopVoiceRecording]);
 
   /**
    * Function to upload or send voice recording.

package/src/state-store/audio-recorder-manager.ts

@@ -139,7 +139,7 @@ export class AudioRecorderManager {
     return accessGranted;
   }
 
-  async stopRecording() {
+  async stopRecording(withDelete: boolean = false) {
     if (!NativeHandlers.Audio) {
       return;
     }
@@ -157,7 +157,12 @@ export class AudioRecorderManager {
     } catch {
       // Best effort cleanup, native implementation may already be stopped.
     }
-    this.state.partialNext({ isStarting: false, status: 'stopped' });
+
+    if (withDelete) {
+      this.reset();
+    } else {
+      this.state.partialNext({ isStarting: false, status: 'stopped' });
+    }
   }
 
   set micLocked(value: boolean) {