@magmamath/students-features 1.3.22 → 1.3.23-rc.10

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

@@ -0,0 +1,175 @@
+import { Typography, COLORS } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { NO_AUDIO_BE_MESSAGE } from '../../constants'
+import { getActiveAttempt } from '../../helpers'
+import { AnswerAudio, VoiceTranscriptionVariant } from '../../types'
+import { resolveGoogleLanguageCode } from '../../../translation/providers/google/supportedLanguages'
+import { useText } from '../../../../i18n/i18n'
+import { useVoiceTranscriptionEffects } from '../hooks/useVoiceTranscriptionEffects'
+import { useVoiceTranscriptionAutoTranslate } from '../hooks/useVoiceTranscriptionAutoTranslate'
+import { VoicePlayerModel } from '../model'
+import { VoiceTranscriptContent } from './VoiceTranscriptContent'
+import { VoiceTranscriptionCollapsible } from './VoiceTranscriptionCollapsible'
+import { VoiceTranscriptionHeaderActions } from './VoiceTranscriptionHeaderActions'
+
+type VoiceTranscriptionProps = {
+  style?: StyleProp<ViewStyle>
+  model: VoicePlayerModel
+  answers: AnswerAudio[]
+  attemptOffset: number
+  attemptsCount: number
+  problemId: string
+  variant?: VoiceTranscriptionVariant
+}
+
+export const VoiceTranscription = ({
+  style,
+  model,
+  answers,
+  attemptOffset,
+  attemptsCount,
+  problemId,
+  variant = VoiceTranscriptionVariant.SMALL,
+}: VoiceTranscriptionProps) => {
+  const t = useText()
+  const { i18n } = useTranslation()
+
+  const [playerState, isLoadingTranscripts, isTranslationActive, translations, isTranslating] =
+    useUnit([
+      model.$playerState,
+      model.loader.loadAllTranscripts.pending,
+      model.translation.$isActive,
+      model.translation.$translations,
+      model.translation.translate.pending,
+    ])
+
+  const activeAttempt = getActiveAttempt(attemptOffset, attemptsCount)
+  const isLargeVariant = variant === VoiceTranscriptionVariant.LARGE
+
+  const answersKey = useMemo(
+    () => answers.map((a) => `${a._id}:${a.audioFileId ?? ''}`).join(','),
+    [answers],
+  )
+
+  useVoiceTranscriptionEffects({ model, answers, answersKey, problemId, activeAttempt })
+
+  const hasActiveAudio =
+    activeAttempt !== null && answers?.[activeAttempt - 1]?.audioFileId !== undefined
+
+  const activeTranscript = activeAttempt !== null ? model.loader.getTranscript(activeAttempt) : null
+  const hasTranscriptText = !!activeTranscript && activeTranscript !== NO_AUDIO_BE_MESSAGE
+  const isActiveTranscriptLoading = isLoadingTranscripts && hasActiveAudio && !activeTranscript
+
+  const transcriptLanguage =
+    activeAttempt !== null ? model.loader.getTranscriptLanguage(activeAttempt) : undefined
+  const isSourceSameAsTarget =
+    !!transcriptLanguage &&
+    resolveGoogleLanguageCode(transcriptLanguage) === resolveGoogleLanguageCode(i18n.language)
+
+  const canTranslate = hasTranscriptText && !isSourceSameAsTarget
+
+  const cachedTranslation = activeAttempt !== null ? translations[activeAttempt] : undefined
+  const showTranslation = isTranslationActive && canTranslate
+  const isTranslationLoading = showTranslation && !cachedTranslation && isTranslating
+
+  const displayText = showTranslation
+    ? (cachedTranslation ?? activeTranscript!)
+    : hasTranscriptText
+      ? activeTranscript!
+      : t('voice.transcriptNotAvailable')
+
+  useVoiceTranscriptionAutoTranslate({
+    translationModel: model.translation,
+    canTranslate,
+    activeAttempt,
+    problemId,
+  })
+
+  useEffect(() => {
+    if (showTranslation && activeAttempt !== null && !cachedTranslation && !isTranslating) {
+      model.translation.translate({
+        attemptNumber: activeAttempt,
+        targetLanguage: i18n.language,
+      })
+    }
+  }, [showTranslation, activeAttempt, cachedTranslation, isTranslating, i18n.language, model])
+
+  const handlePlayPress = useCallback(() => {
+    if (activeAttempt) {
+      model.translation.setActive(false)
+      model.togglePlayPause(activeAttempt)
+    }
+  }, [model, activeAttempt])
+
+  const handleTranslationToggle = useCallback(() => {
+    model.translation.toggle()
+  }, [model])
+
+  return (
+    <Animated.View style={[styles.container, isLargeVariant && styles.largeContainer, style]}>
+      <View style={styles.header}>
+        <Typography style={styles.title} variant="h7">
+          {t('voice.transcriptions')}
+        </Typography>
+        {hasActiveAudio && (
+          <VoiceTranscriptionHeaderActions
+            playerState={playerState}
+            isTranslationActive={isTranslationActive}
+            canTranslate={canTranslate}
+            onPlayPress={handlePlayPress}
+            onTranslationPress={handleTranslationToggle}
+          />
+        )}
+      </View>
+
+      {isLargeVariant ? (
+        <VoiceTranscriptContent
+          text={displayText}
+          isLoading={isActiveTranscriptLoading || isTranslationLoading}
+        />
+      ) : (
+        <VoiceTranscriptionCollapsible
+          text={displayText}
+          isLoading={isActiveTranscriptLoading || isTranslationLoading}
+          dropdown={model.dropdown}
+        />
+      )}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 56,
+    left: 8,
+    width: 222,
+    maxHeight: 405,
+    minHeight: 51,
+    padding: 4,
+    boxShadow: '0px 1px 3px 0px rgba(51, 51, 51, 0.25)',
+    borderRadius: 12,
+    backgroundColor: COLORS.NEUTRAL_1,
+    overflow: 'hidden',
+  },
+  largeContainer: {
+    width: '98%',
+    height: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 4,
+    marginBottom: 4,
+    height: 32,
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+    marginLeft: 4,
+  },
+})

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

@@ -0,0 +1,59 @@
+import { CaretDownIcon } from '@magmamath/react-native-ui'
+import React, { useCallback } from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { useVoiceTranscriptionDropdown } from '../hooks/useVoiceTranscription'
+import { VoiceTranscriptionModel } from '../model/VoiceTranscription.model'
+import { VoiceTranscriptContent } from './VoiceTranscriptContent'
+
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity)
+
+type VoiceTranscriptionCollapsibleProps = {
+  text: string
+  isLoading: boolean
+  dropdown: VoiceTranscriptionModel
+}
+
+export const VoiceTranscriptionCollapsible = ({
+  text,
+  isLoading,
+  dropdown,
+}: VoiceTranscriptionCollapsibleProps) => {
+  const { listAnimatedStyle, iconAnimatedStyle, onListLayout } =
+    useVoiceTranscriptionDropdown(dropdown)
+
+  const handleToggle = useCallback(() => {
+    dropdown.toggleExpand()
+  }, [dropdown])
+
+  return (
+    <>
+      <Animated.View style={[listAnimatedStyle, styles.collapsibleContent]}>
+        <View onLayout={onListLayout} style={styles.transcriptContainer}>
+          <VoiceTranscriptContent text={text} isLoading={isLoading} />
+        </View>
+      </Animated.View>
+      <AnimatedTouchableOpacity
+        style={[styles.expandButton, iconAnimatedStyle]}
+        onPress={handleToggle}
+      >
+        <CaretDownIcon size={22} />
+      </AnimatedTouchableOpacity>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  collapsibleContent: {
+    overflow: 'hidden',
+  },
+  transcriptContainer: {
+    position: 'absolute',
+    width: '100%',
+    paddingHorizontal: 4,
+  },
+  expandButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

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

@@ -0,0 +1,62 @@
+import { Button, COLORS, GlobeIcon, SPACING } from '@magmamath/react-native-ui'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
+import { ColorScheme } from '../../../chatbot/types/style.types'
+import { PlayButton } from '../../../../shared/components/PlayButton'
+import { PlayerState } from '../model'
+import { getAudioStatus } from '../../helpers'
+
+type VoiceTranscriptionsHeaderActionsProps = {
+  playerState: PlayerState
+  isTranslationActive: boolean
+  canTranslate: boolean
+  onPlayPress: () => void
+  onTranslationPress: () => void
+}
+
+export const VoiceTranscriptionHeaderActions = ({
+  playerState,
+  isTranslationActive,
+  canTranslate,
+  onPlayPress,
+  onTranslationPress,
+}: VoiceTranscriptionsHeaderActionsProps) => {
+  const playButtonState = {
+    isActive: playerState !== PlayerState.IDLE,
+    isLoading: playerState === PlayerState.LOADING,
+    status: getAudioStatus(playerState),
+  }
+
+  return (
+    <Animated.View
+      entering={FadeIn.duration(120)}
+      exiting={FadeOut.duration(120)}
+      style={styles.container}
+    >
+      <PlayButton
+        state={playButtonState}
+        onPress={onPlayPress}
+        activityIndicatorColor={COLORS.NEUTRAL_1}
+      />
+      {canTranslate && (
+        <Button
+          variant="secondary"
+          size="small"
+          colorScheme={ColorScheme.Blue}
+          isActive={isTranslationActive}
+          onPress={onTranslationPress}
+          icon={<GlobeIcon color={isTranslationActive ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} />}
+        />
+      )}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+})

package/src/features/voice/playing/hooks/{useVoiceTranscriptionsDropdown.ts → useVoiceTranscription.ts}

@@ -1,11 +1,11 @@
 import { useEffect } from 'react'
 import { useUnit } from 'effector-react'
 import { useAnimatedStyle, useSharedValue, withTiming, interpolate } from 'react-native-reanimated'
-import { VoiceTranscriptionsDropdownModel } from '../model/VoiceTranscriptionsDropdown.model'
+import { VoiceTranscriptionModel } from '../model/VoiceTranscription.model'
 import { DROPDOWN_MAX_CONTENT_HEIGHT } from '../../constants'
 import { LayoutChangeEvent } from 'react-native'
 
-export const useVoiceTranscriptionsDropdown = (model: VoiceTranscriptionsDropdownModel) => {
+export const useVoiceTranscriptionDropdown = (model: VoiceTranscriptionModel) => {
   const isExpanded = useUnit(model.$isExpanded)
 
   const contentHeight = useSharedValue(0)

package/src/features/voice/playing/hooks/useVoiceTranscriptionAutoTranslate.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react'
+import { VoiceTranscriptionTranslationModel } from '../model/VoiceTranscriptionTranslation.model'
+
+type Params = {
+  translationModel: VoiceTranscriptionTranslationModel
+  canTranslate: boolean
+  activeAttempt: number | null
+  problemId: string
+}
+export const useVoiceTranscriptionAutoTranslate = ({
+  translationModel,
+  canTranslate,
+  activeAttempt,
+  problemId,
+}: Params) => {
+  const autoActivatedAttempts = useRef(new Set<number>())
+
+  useEffect(() => {
+    autoActivatedAttempts.current.clear()
+  }, [problemId])
+
+  useEffect(() => {
+    if (
+      canTranslate &&
+      activeAttempt !== null &&
+      !autoActivatedAttempts.current.has(activeAttempt)
+    ) {
+      autoActivatedAttempts.current.add(activeAttempt)
+      translationModel.setActive(true)
+    }
+  }, [canTranslate, activeAttempt, translationModel])
+}

package/src/features/voice/playing/hooks/useVoiceTranscriptionEffects.ts

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react'
+import { AnswerAudio } from '../../types'
+import { VoicePlayerModel } from '../model'
+
+type Params = {
+  model: VoicePlayerModel
+  answers: AnswerAudio[]
+  answersKey: string
+  problemId: string
+  activeAttempt: number | null
+}
+
+export const useVoiceTranscriptionEffects = ({
+  model,
+  answers,
+  answersKey,
+  problemId,
+  activeAttempt,
+}: Params) => {
+  const answersRef = useRef(answers)
+  answersRef.current = answers
+
+  useEffect(() => {
+    model.reinitializePlayer()
+    return () => model.cleanup()
+  }, [model])
+
+  useEffect(() => {
+    const lastAnswerHasNoDrawing = !answers[answers.length - 1]?.drawing
+    model.dropdown.setExpanded(answers.length > 0 && lastAnswerHasNoDrawing)
+    model.resetPlayer()
+  }, [problemId])
+
+  useEffect(() => {
+    if (answersRef.current.some((answer) => answer.audioFileId)) {
+      model.initializeWithAudios(answersRef.current)
+      model.loader.loadAllTranscripts()
+    }
+  }, [model, answersKey])
+
+  useEffect(() => {
+    model.stopAudio()
+  }, [activeAttempt])
+}

package/src/features/voice/playing/model/TranscriptionsDownloaderModel.ts

@@ -21,23 +21,25 @@ export class TranscriptionsDownloaderModel {
     this.api = api
   }
 
-  private async fetchTranscriptWithRetry(audioFileId: string): Promise<string> {
+  private async fetchTranscriptWithRetry(
+    audioFileId: string,
+  ): Promise<{ text: string; language?: string }> {
     for (let attempt = 0; attempt < TRANSCRIPT_MAX_RETRIES; attempt++) {
       const response = await this.api.getAudioFileTranscript(audioFileId)
 
       if (response.status === 'completed') {
-        return response.text
+        return { text: response.text, language: response.language }
       }
 
       if (response.status === 'failed') {
-        return NO_AUDIO_BE_MESSAGE
+        return { text: NO_AUDIO_BE_MESSAGE }
       }
 
       if (attempt < TRANSCRIPT_MAX_RETRIES - 1) {
         await new Promise((resolve) => setTimeout(resolve, TRANSCRIPT_RETRY_INTERVAL_MS))
       }
     }
-    return NO_AUDIO_BE_MESSAGE
+    return { text: NO_AUDIO_BE_MESSAGE }
   }
 
   public readonly loadAllTranscripts = createEffect(async () => {
@@ -51,10 +53,11 @@ export class TranscriptionsDownloaderModel {
       this.collection.update(item.attemptNumber, { transcriptLoading: true })
 
       try {
-        const text = await this.fetchTranscriptWithRetry(item.audioFileId)
+        const { text, language } = await this.fetchTranscriptWithRetry(item.audioFileId)
 
         this.collection.update(item.attemptNumber, {
           transcript: text,
+          transcriptLanguage: language,
           transcriptLoading: false,
           transcriptError: undefined,
         })
@@ -74,6 +77,10 @@ export class TranscriptionsDownloaderModel {
     return this.collection.get(attemptNumber)?.transcript
   }
 
+  public getTranscriptLanguage(attemptNumber: number): string | undefined {
+    return this.collection.get(attemptNumber)?.transcriptLanguage
+  }
+
   public isTranscriptLoading(attemptNumber: number): boolean {
     return this.collection.get(attemptNumber)?.transcriptLoading || false
   }

package/src/features/voice/playing/model/VoicePlayer.model.ts

@@ -1,7 +1,8 @@
 import { attach, createEffect, createEvent, restore } from 'effector'
 import { VoiceTranscriptionsCollection } from './VoiceTranscriptionsCollection'
 import { VoiceFileDownloaderModel } from './VoiceFileDownloader.model'
-import { VoiceTranscriptionsDropdownModel } from './VoiceTranscriptionsDropdown.model'
+import { VoiceTranscriptionModel } from './VoiceTranscription.model'
+import { VoiceTranscriptionTranslationModel } from './VoiceTranscriptionTranslation.model'
 import { AnswerAudio, VoicePlayerApi, VoiceTranscriptionItem } from '../../types'
 import { PlayerModel, PlayerState } from './Player.model'
 import { TranscriptionsDownloaderModel } from './TranscriptionsDownloaderModel'
@@ -18,7 +19,8 @@ type TogglePlayPauseParams = {
 export class VoicePlayerModel {
   public readonly collection = new VoiceTranscriptionsCollection()
   public readonly downloader = new VoiceFileDownloaderModel()
-  public readonly dropdown = new VoiceTranscriptionsDropdownModel()
+  public readonly dropdown = new VoiceTranscriptionModel()
+  public readonly translation: VoiceTranscriptionTranslationModel
   public readonly playerModel = new PlayerModel()
   public readonly loader: TranscriptionsDownloaderModel
   public readonly api: VoicePlayerApi
@@ -48,11 +50,13 @@ export class VoicePlayerModel {
     this.currentPlayingAttempt = null
     this.setCurrentAttempt(null)
     this.collection.clear()
+    this.translation.clearCache()
   }
 
   constructor(params: VoiceTranscriptionsPlayerModelParams) {
     this.api = params.api
     this.loader = new TranscriptionsDownloaderModel(this.collection, params.api)
+    this.translation = new VoiceTranscriptionTranslationModel(this.collection, params.api)
     this.downloader.setApi(params.api)
 
     this.playerModel.playbackFinished.watch(() => {
@@ -238,6 +242,7 @@ export class VoicePlayerModel {
     this.reset()
     this.loader.reset()
     this.dropdown.reset()
+    this.translation.reset()
     this.playerModel.release()
   }
 

package/src/features/voice/playing/model/{VoiceTranscriptionsDropdown.model.ts → VoiceTranscription.model.ts}

@@ -1,6 +1,6 @@
-import { createEvent, createStore, restore } from 'effector'
+import { createEvent, restore } from 'effector'
 
-export class VoiceTranscriptionsDropdownModel {
+export class VoiceTranscriptionModel {
   public readonly toggleExpand = createEvent()
   public readonly setExpanded = createEvent<boolean>()
   public readonly reset = createEvent()

package/src/features/voice/playing/model/VoiceTranscriptionTranslation.model.ts

@@ -0,0 +1,75 @@
+import { createEffect, createEvent, createStore, restore } from 'effector'
+import { VoiceTranscriptionsCollection } from './VoiceTranscriptionsCollection'
+import { VoicePlayerApi } from '../../types'
+import { TranslationService } from '../../../translation/model/TranslationService'
+import { GoogleTranslationProvider } from '../../../translation/providers/google/GoogleTranslationProvider'
+import {
+  preservedWordsReplacers,
+  wordsToPreserve,
+} from '../../../translation/preserve/wordsToPreserve'
+
+type TranslateParams = {
+  attemptNumber: number
+  targetLanguage: string
+}
+
+type TranslateResult = {
+  attemptNumber: number
+  text: string
+}
+
+export class VoiceTranscriptionTranslationModel {
+  private readonly collection: VoiceTranscriptionsCollection
+  private readonly service: TranslationService
+
+  public readonly toggle = createEvent()
+  public readonly setActive = createEvent<boolean>()
+  public readonly clearCache = createEvent()
+  public readonly reset = createEvent()
+
+  public readonly $isActive = restore(this.setActive, false)
+    .on(this.toggle, (state) => !state)
+    .reset(this.reset)
+
+  public readonly translate = createEffect<TranslateParams, TranslateResult | null>(
+    async ({ attemptNumber, targetLanguage }) => {
+      const item = this.collection.get(attemptNumber)
+      if (!item?.transcript) return null
+
+      const text = await this.service.translate(item.transcript, {
+        targetLang: targetLanguage,
+        sourceLang: item.transcriptLanguage,
+        cacheKey: `voice::${attemptNumber}::${targetLanguage}`,
+      })
+
+      if (!text) return null
+
+      return { attemptNumber, text }
+    },
+  )
+
+  public readonly $translations = createStore<Record<number, string>>({})
+    .on(this.translate.doneData, (state, result) => {
+      if (!result) return state
+      return { ...state, [result.attemptNumber]: result.text }
+    })
+    .reset(this.reset, this.clearCache)
+
+  constructor(collection: VoiceTranscriptionsCollection, api: VoicePlayerApi) {
+    this.collection = collection
+    this.service = new TranslationService({
+      preserve: {
+        map: wordsToPreserve,
+        replacers: preservedWordsReplacers,
+      },
+      providers: [new GoogleTranslationProvider({ api: { translateRequest: api.translateText } })],
+    })
+
+    this.clearCache.watch(() => this.service.reset())
+    this.reset.watch(() => this.service.reset())
+  }
+
+  public getTranslation(attemptNumber: number): string | undefined {
+    return this.$translations.getState()[attemptNumber]
+  }
+}

package/src/features/voice/types.ts

@@ -2,6 +2,12 @@ import { WithAbortSignal } from 'src/types/common.types'
 import { getAvailableInputs } from './helpers'
 import { VoiceRecordModel } from './recording/model/VoiceRecord.model'
 import { AxiosResponse } from 'axios'
+import type {
+  GoogleTranslateProps as GoogleTranslatePayload,
+  GoogleTranslateResponse,
+} from '../translation/providers/google.types'
+
+export type { GoogleTranslatePayload, GoogleTranslateResponse }
 
 export type VoiceRecordNotificationTypes = {
   success: (message: string) => void
@@ -57,6 +63,7 @@ export type VoiceRecorderApi = {
 type TranscriptionStatus = 'pending' | 'completed' | 'failed'
 export type AudioTranscriptResponse = {
   text: string
+  language: string
   status: TranscriptionStatus
 }
 
@@ -66,6 +73,7 @@ export type VoicePlayerApi = {
     audioFileId: string,
     options?: { signal?: AbortSignal },
   ) => Promise<AxiosResponse<Blob>>
+  translateText: (payload: GoogleTranslatePayload) => Promise<GoogleTranslateResponse>
 }
 
 export type VoiceTranscriptionItem = {
@@ -73,6 +81,7 @@ export type VoiceTranscriptionItem = {
   audioFileId: string
   _id: string
   transcript?: string
+  transcriptLanguage?: string
   transcriptLoading?: boolean
   transcriptError?: string
   audioUri?: string
@@ -87,3 +96,9 @@ export enum RecordButtonVariant {
   DEFAULT = 'default',
   ADVANCED = 'advanced',
 }
+
+export enum VoiceTranscriptionVariant {
+  SMALL = 'small',
+  LARGE = 'large',
+}
+

package/src/index.ts

@@ -14,3 +14,4 @@ export * from './shared/icons'
 export * from './features/voice'
 export * from './features/featureUsage'
 export * from './features/uiMode'
+export * from './features/translation'