@magmamath/students-features 1.7.9 → 1.7.10-rc.2

package/src/features/voice/__tests__/VoiceRecordWithTranscript.model.test.ts

@@ -0,0 +1,228 @@
+import { allSettled, createEffect, createEvent, fork, restore } from 'effector'
+
+import { TranscriptionStatus, VoicePanelPhase, VoiceRecorderState } from '../constants'
+import { VoiceRecordWithTranscriptModel } from '../recording/model/VoiceRecordWithTranscript.model'
+import type { VoiceRecordModel } from '../recording/model/VoiceRecord.model'
+import type { AudioTranscriptResponse, VoiceRecordCollectionItem } from '../types'
+
+const createRecordModelStub = () => {
+  const setVoiceRecordState = createEvent<VoiceRecorderState>()
+  const setCurrentRecord = createEvent<VoiceRecordCollectionItem | null>()
+  const startAudioUpload = createEvent<string>()
+  const reset = createEvent()
+  const stop = createEffect(async () => {})
+
+  const stub = {
+    recorderModel: {
+      $voiceRecordState: restore(setVoiceRecordState, VoiceRecorderState.IDLE),
+    },
+    $currentRecord: restore(setCurrentRecord, null),
+    startAudioUpload,
+    reset,
+    stop,
+  }
+
+  return {
+    // The integration model only touches the members stubbed above
+    recordModel: stub as unknown as VoiceRecordModel,
+    setVoiceRecordState,
+    setCurrentRecord,
+    startAudioUpload,
+    reset,
+  }
+}
+
+const completedTranscript = (text: string): AudioTranscriptResponse => ({
+  text,
+  language: 'en',
+  status: TranscriptionStatus.COMPLETED,
+})
+
+const createUploadedRecord = (id: string): VoiceRecordCollectionItem => ({
+  durationMs: 5000,
+  audioUploadPromise: Promise.resolve({ id, fileName: 'rec', fileType: 'audio/mp4' }),
+})
+
+describe('VoiceRecordWithTranscriptModel', () => {
+  it('opens the panel when recording starts', async () => {
+    const stub = createRecordModelStub()
+    const model = new VoiceRecordWithTranscriptModel({
+      recordModel: stub.recordModel,
+      getTranscript: async () => completedTranscript('text'),
+    })
+    const scope = fork()
+
+    await allSettled(stub.setVoiceRecordState, { scope, params: VoiceRecorderState.RECORDING })
+
+    expect(scope.getState(model.panel.$phase)).toBe(VoicePanelPhase.RECORDING)
+  })
+
+  it('moves the panel to processing when the upload starts', async () => {
+    const stub = createRecordModelStub()
+    const model = new VoiceRecordWithTranscriptModel({
+      recordModel: stub.recordModel,
+      getTranscript: async () => completedTranscript('text'),
+    })
+    const scope = fork()
+
+    await allSettled(stub.setVoiceRecordState, { scope, params: VoiceRecorderState.RECORDING })
+    await allSettled(stub.startAudioUpload, { scope, params: 'file://rec' })
+
+    expect(scope.getState(model.panel.$phase)).toBe(VoicePanelPhase.PROCESSING)
+  })
+
+  it('shows the transcript once the uploaded record resolves', async () => {
+    const stub = createRecordModelStub()
+    const getTranscript = jest.fn(async () => completedTranscript('sixty times three'))
+    const model = new VoiceRecordWithTranscriptModel({
+      recordModel: stub.recordModel,
+      getTranscript,
+    })
+    const scope = fork()
+
+    await allSettled(stub.setVoiceRecordState, { scope, params: VoiceRecorderState.RECORDING })
+    await allSettled(stub.startAudioUpload, { scope, params: 'file://rec' })
+    await allSettled(stub.setCurrentRecord, { scope, params: createUploadedRecord('audio-1') })
+
+    expect(getTranscript).toHaveBeenCalledWith('audio-1')
+    expect(scope.getState(model.panel.$phase)).toBe(VoicePanelPhase.DONE)
+    expect(scope.getState(model.panel.$transcript)).toBe('sixty times three')
+  })
+
+  it('fails the panel when the transcript is not available', async () => {
+    const stub = createRecordModelStub()
+    const model = new VoiceRecordWithTranscriptModel({
+      recordModel: stub.recordModel,
+      getTranscript: async () => ({
+        text: '',
+        language: '',
+        status: TranscriptionStatus.FAILED,
+      }),
+    })
+    const scope = fork()
+
+    await allSettled(stub.setVoiceRecordState, { scope, params: VoiceRecorderState.RECORDING })
+    await allSettled(stub.startAudioUpload, { scope, params: 'file://rec' })
+    await allSettled(stub.setCurrentRecord, { scope, params: createUploadedRecord('audio-1') })
+
+    expect(scope.getState(model.panel.$phase)).toBe(VoicePanelPhase.DONE)
+    expect(scope.getState(model.panel.$hasError)).toBe(true)
+  })
+
+  it('discards the panel when the record is deleted', async () => {
+    const stub = createRecordModelStub()
+    const model = new VoiceRecordWithTranscriptModel({
+      recordModel: stub.recordModel,
+      getTranscript: async () => completedTranscript('text'),
+    })
+    const scope = fork()
+
+    await allSettled(stub.setVoiceRecordState, { scope, params: VoiceRecorderState.RECORDING })
+    await allSettled(stub.reset, { scope })
+
+    expect(scope.getState(model.panel.$phase)).toBeNull()
+  })
+
+  it('keeps the dimmed panel open when the record resets during dismissal', async () => {
+    jest.useFakeTimers()
+    try {
+      const stub = createRecordModelStub()
+      const model = new VoiceRecordWithTranscriptModel({
+        recordModel: stub.recordModel,
+        getTranscript: async () => completedTranscript('text'),
+      })
+      const scope = fork()
+
+      // Drive the panel straight to DONE — this test isolates the wrapper's
+      // reset-suppression wiring, not the transcript fetch effect
+      await allSettled(model.panel.open, { scope })
+      await allSettled(model.panel.confirm, { scope })
+      await allSettled(model.panel.complete, { scope, params: 'text' })
+      // Wrong answer: the panel starts dimming (linger timer running), then the
+      // attempt key rotation resets the record — that incidental reset must not
+      // close the panel. Both stores update synchronously, so assert before the
+      // timer; awaiting allSettled here would block on the pending linger delay.
+      void allSettled(model.panel.requestDismiss, { scope })
+      void allSettled(stub.reset, { scope })
+
+      expect(scope.getState(model.panel.$flags).isDone).toBe(true)
+      expect(scope.getState(model.panel.$isDimmed)).toBe(true)
+
+      await jest.runAllTimersAsync()
+    } finally {
+      jest.clearAllTimers()
+      jest.useRealTimers()
+    }
+  })
+
+  it('shows an in-flight transcript before dismissing when a wrong answer lands mid-load', async () => {
+    jest.useFakeTimers()
+    try {
+      let resolveTranscript!: (response: AudioTranscriptResponse) => void
+      const transcriptPromise = new Promise<AudioTranscriptResponse>((resolve) => {
+        resolveTranscript = resolve
+      })
+      const stub = createRecordModelStub()
+      const model = new VoiceRecordWithTranscriptModel({
+        recordModel: stub.recordModel,
+        getTranscript: () => transcriptPromise,
+      })
+      const scope = fork()
+
+      await allSettled(stub.setVoiceRecordState, { scope, params: VoiceRecorderState.RECORDING })
+      await allSettled(stub.startAudioUpload, { scope, params: 'file://rec' })
+      // The transcript fetch stays in flight (promise unresolved), so the scope
+      // never goes idle — awaiting allSettled would hang. These triggers apply
+      // their store updates synchronously, so fire them without awaiting.
+      void allSettled(stub.setCurrentRecord, { scope, params: createUploadedRecord('audio-1') })
+
+      expect(scope.getState(model.panel.$phase)).toBe(VoicePanelPhase.PROCESSING)
+
+      // Wrong answer mid-load: the dismissal is deferred and the attempt key
+      // rotation both resets the record and rotates $currentRecord away from
+      // the take whose transcript is still loading.
+      void allSettled(model.panel.requestDismiss, { scope })
+      void allSettled(stub.reset, { scope })
+      void allSettled(stub.setCurrentRecord, { scope, params: null })
+
+      expect(scope.getState(model.panel.$phase)).toBe(VoicePanelPhase.PROCESSING)
+      expect(scope.getState(model.panel.$isDismissPending)).toBe(true)
+
+      // The transcript finally arrives — it must still be shown briefly even
+      // though $currentRecord has moved on. Flush the fetch's microtasks
+      // without advancing the linger timer.
+      resolveTranscript(completedTranscript('mid-load transcript'))
+      await jest.advanceTimersByTimeAsync(0)
+
+      expect(scope.getState(model.panel.$phase)).toBe(VoicePanelPhase.DONE)
+      expect(scope.getState(model.panel.$transcript)).toBe('mid-load transcript')
+      expect(scope.getState(model.panel.$isDimmed)).toBe(true)
+
+      await jest.runAllTimersAsync()
+      expect(scope.getState(model.panel.$flags).isOpen).toBe(false)
+    } finally {
+      jest.clearAllTimers()
+      jest.useRealTimers()
+    }
+  })
+
+  it('drops a transcript fetched for a record that is no longer current', async () => {
+    const stub = createRecordModelStub()
+    const model = new VoiceRecordWithTranscriptModel({
+      recordModel: stub.recordModel,
+      getTranscript: async () => completedTranscript('stale text'),
+    })
+    const scope = fork()
+
+    await allSettled(stub.setVoiceRecordState, { scope, params: VoiceRecorderState.RECORDING })
+    await allSettled(stub.startAudioUpload, { scope, params: 'file://rec' })
+
+    // The fetched record is replaced before its transcript resolves
+    const staleRecord = createUploadedRecord('audio-stale')
+    const replacementPromise = allSettled(stub.setCurrentRecord, { scope, params: staleRecord })
+    await allSettled(stub.setCurrentRecord, { scope, params: { durationMs: 1 } })
+    await replacementPromise
+
+    expect(scope.getState(model.panel.$transcript)).toBe('')
+  })
+})

package/src/features/voice/__tests__/VoiceTranscriptPanel.model.test.ts

@@ -0,0 +1,237 @@
+import { allSettled, fork } from 'effector'
+
+import { VoicePanelPhase } from '../constants'
+import { VoiceTranscriptPanelModel } from '../recording/model/VoiceTranscriptPanel.model'
+
+describe('VoiceTranscriptPanelModel', () => {
+  it('opens into the recording phase', async () => {
+    const model = new VoiceTranscriptPanelModel()
+    const scope = fork()
+
+    await allSettled(model.open, { scope })
+
+    expect(scope.getState(model.$phase)).toBe(VoicePanelPhase.RECORDING)
+    expect(scope.getState(model.$flags).isRecording).toBe(true)
+  })
+
+  it('confirm moves recording to processing', async () => {
+    const model = new VoiceTranscriptPanelModel()
+    const scope = fork()
+
+    await allSettled(model.open, { scope })
+    await allSettled(model.confirm, { scope })
+
+    expect(scope.getState(model.$phase)).toBe(VoicePanelPhase.PROCESSING)
+  })
+
+  it('ignores confirm when the panel is not recording', async () => {
+    const model = new VoiceTranscriptPanelModel()
+    const scope = fork()
+
+    await allSettled(model.confirm, { scope })
+
+    expect(scope.getState(model.$phase)).toBeNull()
+  })
+
+  it('complete lands on done with the transcript text', async () => {
+    const transcript = 'three times sixty is one hundred eighty'
+    const model = new VoiceTranscriptPanelModel()
+    const scope = fork()
+
+    await allSettled(model.open, { scope })
+    await allSettled(model.confirm, { scope })
+    await allSettled(model.complete, { scope, params: transcript })
+
+    expect(scope.getState(model.$phase)).toBe(VoicePanelPhase.DONE)
+    expect(scope.getState(model.$transcript)).toBe(transcript)
+    expect(scope.getState(model.$hasError)).toBe(false)
+  })
+
+  it('fail lands on done with the error flag', async () => {
+    const model = new VoiceTranscriptPanelModel()
+    const scope = fork()
+
+    await allSettled(model.open, { scope })
+    await allSettled(model.confirm, { scope })
+    await allSettled(model.fail, { scope })
+
+    expect(scope.getState(model.$phase)).toBe(VoicePanelPhase.DONE)
+    expect(scope.getState(model.$hasError)).toBe(true)
+  })
+
+  it('ignores a transcript that arrives after discard', async () => {
+    const model = new VoiceTranscriptPanelModel()
+    const scope = fork()
+
+    await allSettled(model.open, { scope })
+    await allSettled(model.confirm, { scope })
+    await allSettled(model.discard, { scope })
+    await allSettled(model.complete, { scope, params: 'late transcript' })
+
+    expect(scope.getState(model.$phase)).toBeNull()
+    expect(scope.getState(model.$transcript)).toBe('')
+  })
+
+  it('discard closes the panel', async () => {
+    const model = new VoiceTranscriptPanelModel()
+    const scope = fork()
+
+    await allSettled(model.open, { scope })
+    await allSettled(model.discard, { scope })
+
+    expect(scope.getState(model.$flags).isOpen).toBe(false)
+  })
+
+  it('discard after done clears the transcript', async () => {
+    const model = new VoiceTranscriptPanelModel()
+    const scope = fork()
+
+    await allSettled(model.open, { scope })
+    await allSettled(model.confirm, { scope })
+    await allSettled(model.complete, { scope, params: 'transcript' })
+    await allSettled(model.discard, { scope })
+
+    expect(scope.getState(model.$phase)).toBeNull()
+    expect(scope.getState(model.$transcript)).toBe('')
+  })
+
+  it('the transcript arrives collapsed by default', async () => {
+    const model = new VoiceTranscriptPanelModel()
+    const scope = fork()
+
+    await allSettled(model.open, { scope })
+    await allSettled(model.confirm, { scope })
+    await allSettled(model.complete, { scope, params: 'transcript' })
+
+    expect(scope.getState(model.$phase)).toBe(VoicePanelPhase.DONE)
+    expect(scope.getState(model.dropdown.$isExpanded)).toBe(false)
+  })
+
+  it('toggleExpand unfolds the collapsed dropdown', async () => {
+    const model = new VoiceTranscriptPanelModel()
+    const scope = fork()
+
+    await allSettled(model.open, { scope })
+    await allSettled(model.confirm, { scope })
+    await allSettled(model.complete, { scope, params: 'transcript' })
+    await allSettled(model.dropdown.toggleExpand, { scope })
+
+    expect(scope.getState(model.dropdown.$isExpanded)).toBe(true)
+  })
+
+  it('discard resets the dropdown state', async () => {
+    const model = new VoiceTranscriptPanelModel()
+    const scope = fork()
+
+    await allSettled(model.open, { scope })
+    await allSettled(model.confirm, { scope })
+    await allSettled(model.complete, { scope, params: 'transcript' })
+    await allSettled(model.dropdown.toggleExpand, { scope })
+    await allSettled(model.discard, { scope })
+
+    expect(scope.getState(model.dropdown.$isExpanded)).toBe(false)
+    expect(scope.getState(model.$flags).isOpen).toBe(false)
+  })
+
+  describe('requestDismiss', () => {
+    beforeEach(() => jest.useFakeTimers())
+    afterEach(() => jest.useRealTimers())
+
+    const reachDone = async (scope: ReturnType<typeof fork>, model: VoiceTranscriptPanelModel) => {
+      await allSettled(model.open, { scope })
+      await allSettled(model.confirm, { scope })
+      await allSettled(model.complete, { scope, params: 'transcript' })
+    }
+
+    it('dims the transcript immediately but keeps it open', async () => {
+      const model = new VoiceTranscriptPanelModel()
+      const scope = fork()
+
+      await reachDone(scope, model)
+      // Don't await — that would block on the linger timer; the dim is synchronous
+      const settled = allSettled(model.requestDismiss, { scope })
+
+      expect(scope.getState(model.$isDimmed)).toBe(true)
+      expect(scope.getState(model.$flags).isOpen).toBe(true)
+
+      await jest.runAllTimersAsync()
+      await settled
+    })
+
+    it('dismisses the panel after the linger delay', async () => {
+      const model = new VoiceTranscriptPanelModel()
+      const scope = fork()
+
+      await reachDone(scope, model)
+      const settled = allSettled(model.requestDismiss, { scope })
+      await jest.runAllTimersAsync()
+      await settled
+
+      expect(scope.getState(model.$flags).isOpen).toBe(false)
+      expect(scope.getState(model.$isDimmed)).toBe(false)
+    })
+
+    it('ignores requestDismiss outside the done phase', async () => {
+      const model = new VoiceTranscriptPanelModel()
+      const scope = fork()
+
+      await allSettled(model.open, { scope })
+      await allSettled(model.requestDismiss, { scope })
+
+      expect(scope.getState(model.$isDimmed)).toBe(false)
+      expect(scope.getState(model.$phase)).toBe(VoicePanelPhase.RECORDING)
+    })
+
+    it('defers a dismissal requested while the transcript is still loading', async () => {
+      const model = new VoiceTranscriptPanelModel()
+      const scope = fork()
+
+      await allSettled(model.open, { scope })
+      await allSettled(model.confirm, { scope })
+      await allSettled(model.requestDismiss, { scope })
+
+      // Nothing to dim yet — the panel stays open in processing, but marks the
+      // dismissal as pending and protects itself from incidental closes.
+      expect(scope.getState(model.$phase)).toBe(VoicePanelPhase.PROCESSING)
+      expect(scope.getState(model.$isDimmed)).toBe(false)
+      expect(scope.getState(model.$flags).isOpen).toBe(true)
+      expect(scope.getState(model.$isDismissPending)).toBe(true)
+      expect(scope.getState(model.$isHandlingDismissal)).toBe(true)
+    })
+
+    it('runs the deferred dismissal once the transcript arrives', async () => {
+      const model = new VoiceTranscriptPanelModel()
+      const scope = fork()
+
+      await allSettled(model.open, { scope })
+      await allSettled(model.confirm, { scope })
+      await allSettled(model.requestDismiss, { scope })
+
+      // The transcript lands after the wrong answer — it shows, then dims.
+      const settled = allSettled(model.complete, { scope, params: 'late transcript' })
+
+      expect(scope.getState(model.$phase)).toBe(VoicePanelPhase.DONE)
+      expect(scope.getState(model.$transcript)).toBe('late transcript')
+      expect(scope.getState(model.$isDimmed)).toBe(true)
+
+      await jest.runAllTimersAsync()
+      await settled
+
+      expect(scope.getState(model.$flags).isOpen).toBe(false)
+      expect(scope.getState(model.$isDismissPending)).toBe(false)
+    })
+
+    it('clears a pending dismissal when a new recording opens the panel', async () => {
+      const model = new VoiceTranscriptPanelModel()
+      const scope = fork()
+
+      await allSettled(model.open, { scope })
+      await allSettled(model.confirm, { scope })
+      await allSettled(model.requestDismiss, { scope })
+      await allSettled(model.open, { scope })
+
+      expect(scope.getState(model.$isDismissPending)).toBe(false)
+      expect(scope.getState(model.$phase)).toBe(VoicePanelPhase.RECORDING)
+    })
+  })
+})

package/src/features/voice/constants.ts

@@ -20,8 +20,51 @@ export const TRANSCRIPT_RETRY_INTERVAL_MS = 4000
 export const TRANSCRIPT_MAX_RETRIES = 15
 export const NO_AUDIO_BE_MESSAGE = 'No audio'
 
+export enum TranscriptionStatus {
+  PENDING = 'pending',
+  COMPLETED = 'completed',
+  FAILED = 'failed',
+}
+
 //todo: remove native shadows from rn-ui and set from WEB for both platforms
 export const VOICE_RECORD_SHADOWS = {
   default: '0 1px 3px 0 rgba(51, 51, 51, 0.10), 0 0 1px 0 rgba(51, 51, 51, 0.40)',
   advanced: '0 0 1px 0 rgba(51, 51, 51, 0.20), 0 3px 10px 0 rgba(51, 51, 51, 0.16)',
 }
+
+export enum VoicePanelPhase {
+  RECORDING = 'recording',
+  PROCESSING = 'processing',
+  DONE = 'done',
+}
+
+export const VOICE_WAVEFORM = {
+  BAR_WIDTH: 3,
+  BAR_GAP: 3,
+  MIN_BAR_HEIGHT: 2,
+  HEIGHT: 40,
+  AMPLITUDE_PADDING: 12,
+  MIN_LEVEL: 0.04,
+  MIN_BARS: 16,
+  BUFFER_SIZE: 120,
+  SAMPLE_INTERVAL_MS: 80,
+  FADE_RATIO: 0.22,
+  METERING_FLOOR_DB: -60,
+  // Low-pass factor for bar levels: 1 = raw values, lower = smoother flow
+  LEVEL_SMOOTHING: 0.55,
+} as const
+
+// expo-audio polls recorder status every 500ms by default — too coarse for a
+// live waveform. The same cadence drives the web Audio API meter.
+export const METERING_UPDATE_INTERVAL_MS = 100
+export const WEB_METERING_FFT_SIZE = 1024
+
+export const VOICE_TRANSCRIPT_PANEL = {
+  WIDTH: 240,
+  WIDTH_DONE: 360,
+  TRANSCRIPT_MAX_HEIGHT: 200,
+  SCROLLBAR_WIDTH: 8,
+  // After a wrong answer the transcript fades out, lingers, then auto-dismisses
+  WRONG_ANSWER_DISMISS_DELAY_MS: 5000,
+  DIMMED_OPACITY: 0.4,
+} as const

package/src/features/voice/helpers.ts

@@ -8,7 +8,12 @@ import {
 } from 'expo-audio'
 import * as FileSystem from 'expo-file-system'
 import { VoicePlayerApi, VoiceRecorderApi } from './types'
-import { VOICE_RECORDER_MAX_DURATION_MS } from './constants'
+import {
+  METERING_UPDATE_INTERVAL_MS,
+  VOICE_RECORDER_MAX_DURATION_MS,
+  VOICE_WAVEFORM,
+  WEB_METERING_FFT_SIZE,
+} from './constants'
 import { PlayerState } from './playing/model'
 import { AudioStatus } from '../chatbot'
 import { AxiosResponse } from 'axios'
@@ -20,6 +25,85 @@ export const formatDuration = (ms: number): string => {
   return `${minutes}:${seconds.toString().padStart(2, '0')}`
 }
 
+// Maps a metering value (dBFS, roughly -160..0) to a 0..1 bar level.
+// Anything at or below the floor reads as silence (MIN_LEVEL dots).
+export const normalizeMetering = (metering: number | null | undefined): number => {
+  if (metering === null || metering === undefined || Number.isNaN(metering)) {
+    return VOICE_WAVEFORM.MIN_LEVEL
+  }
+
+  const range = -VOICE_WAVEFORM.METERING_FLOOR_DB
+  const ratio = (metering - VOICE_WAVEFORM.METERING_FLOOR_DB) / range
+  return Math.max(VOICE_WAVEFORM.MIN_LEVEL, Math.min(1, ratio))
+}
+
+type WebMediaRecorderHolder = { mediaRecorder: MediaRecorder }
+
+// expo-audio's web AudioRecorder keeps its MediaRecorder on a public (but
+// untyped) field. Reach for it defensively — if the internals change after an
+// upgrade, we fall back to our own getUserMedia stream.
+const hasWebMediaRecorder = (value: unknown): value is WebMediaRecorderHolder => {
+  if (typeof value !== 'object' || value === null) return false
+  if (typeof MediaRecorder === 'undefined') return false
+  return 'mediaRecorder' in value && value.mediaRecorder instanceof MediaRecorder
+}
+
+type MeteringCallback = (decibels: number | null) => void
+
+const computeStreamDecibels = (analyser: AnalyserNode, samples: Float32Array): number => {
+  analyser.getFloatTimeDomainData(samples)
+  const sumOfSquares = samples.reduce((acc, value) => acc + value * value, 0)
+  const rms = Math.sqrt(sumOfSquares / samples.length)
+  return rms > 0 ? 20 * Math.log10(rms) : VOICE_WAVEFORM.METERING_FLOOR_DB
+}
+
+// expo-audio does not implement metering on web, so we measure the input level
+// ourselves with the Web Audio API. Prefers the recorder's own MediaStream;
+// falls back to a dedicated getUserMedia capture (permission is already
+// granted at this point because recording is in progress).
+export const createWebMeteringMonitor = (
+  recorder: AudioRecorder,
+  onMetering: MeteringCallback,
+): (() => void) => {
+  if (!IS_WEB || typeof AudioContext === 'undefined') return () => {}
+
+  let isDisposed = false
+  let context: AudioContext | null = null
+  let ownedStream: MediaStream | null = null
+  let intervalId: ReturnType<typeof setInterval> | null = null
+
+  const start = async () => {
+    const recorderStream = hasWebMediaRecorder(recorder) ? recorder.mediaRecorder.stream : null
+    const stream = recorderStream ?? (await navigator.mediaDevices.getUserMedia({ audio: true }))
+
+    if (isDisposed) {
+      if (!recorderStream) stream.getTracks().forEach((track) => track.stop())
+      return
+    }
+    if (!recorderStream) ownedStream = stream
+
+    context = new AudioContext()
+    const analyser = context.createAnalyser()
+    analyser.fftSize = WEB_METERING_FFT_SIZE
+    context.createMediaStreamSource(stream).connect(analyser)
+
+    const samples = new Float32Array(analyser.fftSize)
+    intervalId = setInterval(() => {
+      onMetering(computeStreamDecibels(analyser, samples))
+    }, METERING_UPDATE_INTERVAL_MS)
+  }
+
+  start().catch(() => onMetering(null))
+
+  return () => {
+    isDisposed = true
+    if (intervalId) clearInterval(intervalId)
+    ownedStream?.getTracks().forEach((track) => track.stop())
+    context?.close().catch(() => {})
+    onMetering(null)
+  }
+}
+
 export const ensureRecordingPermissions = async () => {
   const { status } = await getRecordingPermissionsAsync()
 

package/src/features/voice/index.ts

@@ -1,7 +1,14 @@
 export * from './recording/components/VoiceRecord'
+export * from './recording/components/VoiceRecordWithTranscript'
+export * from './recording/components/VoiceWaveform'
+export * from './recording/components/VoiceTranscriptPanel'
+export * from './recording/hooks/useVoiceWaveform'
 export * from './recording/model/VoiceRecord.model'
+export * from './recording/model/VoiceRecordWithTranscript.model'
+export * from './recording/model/VoiceTranscriptPanel.model'
 export * from './recording/modal/VoiceRecordDeleteModal'
 export * from './recording/modal/VoiceRecordUndoModal'
+export * from './transcript.helpers'
 
 export * from './playing/model/VoicePlayer.model'
 export * from './playing/components/VoiceTranscription'

package/src/features/voice/playing/components/VoiceTranscriptContent.tsx

@@ -8,33 +8,52 @@ import {
 } from '@magmamath/react-native-ui'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
+import Animated, { FadeIn } from 'react-native-reanimated'
+
+import { VOICE_TRANSCRIPT_PANEL } from '../../constants'
 
 type VoiceTranscriptContentProps = {
   text: string
   isLoading: boolean
+  numberOfLines?: number
+  dimmed?: boolean
 }
 
-export const VoiceTranscriptContent = ({ text, isLoading }: VoiceTranscriptContentProps) => {
+export const VoiceTranscriptContent = ({
+  text,
+  isLoading,
+  numberOfLines,
+  dimmed,
+}: VoiceTranscriptContentProps) => {
   if (isLoading) {
     return (
       <View style={styles.loaderContainer}>
-        <Loader size={LoaderSize.SMALL} color={LoaderColor.BLUE} />
+        <Loader size={LoaderSize.SMALL} color={LoaderColor.GRAY} />
       </View>
     )
   }
 
   return (
-    <Typography variant="h8" style={styles.text}>
-      {text}
-    </Typography>
+    <Animated.View entering={FadeIn.duration(400)}>
+      <Typography
+        variant="h8"
+        style={[styles.text, dimmed && styles.dimmed]}
+        numberOfLines={numberOfLines}
+      >
+        {text}
+      </Typography>
+    </Animated.View>
   )
 }
 
 const styles = StyleSheet.create({
   text: {
-    color: COLORS.NEUTRAL_7,
-    paddingHorizontal: SPACING[200],
-    paddingVertical: SPACING[200],
+    color: COLORS.NEUTRAL_9,
+    paddingVertical: SPACING[100],
+    marginRight: SPACING[200],
+  },
+  dimmed: {
+    opacity: VOICE_TRANSCRIPT_PANEL.DIMMED_OPACITY,
   },
   loaderContainer: {
     justifyContent: 'center',