@magmamath/students-features 1.3.23-rc.8 → 1.3.23

package/src/features/translation/providers/google/supportedLanguages.ts

@@ -1,196 +0,0 @@
-export const GoogleTranslateLanguage = {
-  ABKHAZ: 'ab',
-  ACEHNESE: 'ace',
-  ACHOLI: 'ach',
-  AFRIKAANS: 'af',
-  ALBANIAN: 'sq',
-  ALUR: 'alz',
-  AMHARIC: 'am',
-  ARABIC: 'ar',
-  ARMENIAN: 'hy',
-  ASSAMESE: 'as',
-  AWADHI: 'awa',
-  AYMARA: 'ay',
-  AZERBAIJANI: 'az',
-  BALINESE: 'ban',
-  BAMBARA: 'bm',
-  BASHKIR: 'ba',
-  BASQUE: 'eu',
-  BATAK_KARO: 'btx',
-  BATAK_SIMALUNGUN: 'bts',
-  BATAK_TOBA: 'bbc',
-  BELARUSIAN: 'be',
-  BEMBA: 'bem',
-  BENGALI: 'bn',
-  BETAWI: 'bew',
-  BHOJPURI: 'bho',
-  BIKOL: 'bik',
-  BOSNIAN: 'bs',
-  BRETON: 'br',
-  BULGARIAN: 'bg',
-  BURMESE: 'my',
-  BURYAT: 'bua',
-  CANTONESE: 'yue',
-  CATALAN: 'ca',
-  CEBUANO: 'ceb',
-  CHICHEWA_NYANJA: 'ny',
-  CHINESE_SIMPLIFIED: 'zh-CN',
-  CHINESE_TRADITIONAL: 'zh-TW',
-  CHUVASH: 'cv',
-  CORSICAN: 'co',
-  CRIMEAN_TATAR: 'crh',
-  CROATIAN: 'hr',
-  CZECH: 'cs',
-  DANISH: 'da',
-  DINKA: 'din',
-  DIVEHI: 'dv',
-  DOGRI: 'doi',
-  DOMBE: 'dov',
-  DUTCH: 'nl',
-  DZONGKHA: 'dz',
-  ENGLISH: 'en',
-  ESPERANTO: 'eo',
-  ESTONIAN: 'et',
-  EWE: 'ee',
-  FIJIAN: 'fj',
-  FILIPINO_TAGALOG: 'fil',
-  FINNISH: 'fi',
-  FRENCH: 'fr',
-  FRENCH_CANADA: 'fr-CA',
-  FRENCH_FRANCE: 'fr-FR',
-  FRISIAN: 'fy',
-  FULFULDE: 'ff',
-  GA: 'gaa',
-  GALICIAN: 'gl',
-  GANDA_LUGANDA: 'lg',
-  GEORGIAN: 'ka',
-  GERMAN: 'de',
-  GREEK: 'el',
-  GUARANI: 'gn',
-  GUJARATI: 'gu',
-  HAITIAN_CREOLE: 'ht',
-  HAKHA_CHIN: 'cnh',
-  HAUSA: 'ha',
-  HAWAIIAN: 'haw',
-  HEBREW: 'he',
-  HILIGAYNON: 'hil',
-  HINDI: 'hi',
-  HMONG: 'hmn',
-  HUNGARIAN: 'hu',
-  HUNSRIK: 'hrx',
-  ICELANDIC: 'is',
-  IGBO: 'ig',
-  ILOKO: 'ilo',
-  INDONESIAN: 'id',
-  IRISH: 'ga',
-  ITALIAN: 'it',
-  JAPANESE: 'ja',
-  JAVANESE: 'jw',
-  KANNADA: 'kn',
-  KAPAMPANGAN: 'pam',
-  KAZAKH: 'kk',
-  KHMER: 'km',
-  KIGA: 'cgg',
-  KINYARWANDA: 'rw',
-  KITUBA: 'ktu',
-  KONKANI: 'gom',
-  KOREAN: 'ko',
-  KRIO: 'kri',
-  KURMANJI: 'ku',
-  KYRGYZ: 'ky',
-  LAO: 'lo',
-  LATGALIAN: 'ltg',
-  LATIN: 'la',
-  LATVIAN: 'lv',
-  LIGURIAN: 'lij',
-  LIMBURGAN: 'li',
-  LINGALA: 'ln',
-  LITHUANIAN: 'lt',
-  LOMBARD: 'lmo',
-  LUO: 'luo',
-  LUXEMBOURGISH: 'lb',
-  MACEDONIAN: 'mk',
-  MAITHILI: 'mai',
-  MAKASSAR: 'mak',
-  MALAGASY: 'mg',
-  MALAY: 'ms',
-  MALAYALAM: 'ml',
-  MALAY_JAWI: 'ms-Arab',
-  MALTESE: 'mt',
-  MAORI: 'mi',
-  MARATHI: 'mr',
-  MEADOW_MARI: 'chm',
-  MEITEILON_MANIPURI: 'mni-Mtei',
-  MINANG: 'min',
-  MIZO: 'lus',
-  MONGOLIAN: 'mn',
-  NDEBELE_SOUTH: 'nr',
-  NEPALBHASA_NEWARI: 'new',
-  NEPALI: 'ne',
-  NORTHERN_SOTHO: 'nso',
-  NORWEGIAN: 'no',
-  NUER: 'nus',
-  OCCITAN: 'oc',
-  ODIA: 'or',
-  OROMO: 'om',
-  PANGASINAN: 'pag',
-  PAPIAMENTO: 'pap',
-  PASHTO: 'ps',
-  PERSIAN: 'fa',
-  POLISH: 'pl',
-  PORTUGUESE: 'pt',
-  PORTUGUESE_BRAZIL: 'pt-BR',
-  PORTUGUESE_PORTUGAL: 'pt-PT',
-  PUNJABI: 'pa',
-  PUNJABI_SHAHMUKHI: 'pa-Arab',
-  QUECHUA: 'qu',
-  ROMANI: 'rom',
-  ROMANIAN: 'ro',
-  RUNDI: 'rn',
-  RUSSIAN: 'ru',
-  SAMOAN: 'sm',
-  SANGO: 'sg',
-  SANSKRIT: 'sa',
-  SCOTS_GAELIC: 'gd',
-  SERBIAN: 'sr',
-  SESOTHO: 'st',
-  SEYCHELLOIS_CREOLE: 'crs',
-  SHAN: 'shn',
-  SHONA: 'sn',
-  SICILIAN: 'scn',
-  SILESIAN: 'szl',
-  SINDHI: 'sd',
-  SINHALA: 'si',
-  SLOVAK: 'sk',
-  SLOVENIAN: 'sl',
-  SOMALI: 'so',
-  SORANI: 'ckb',
-  SPANISH: 'es',
-  SUNDANESE: 'su',
-  SWAHILI: 'sw',
-  SWATI: 'ss',
-  SWEDISH: 'sv',
-  TAJIK: 'tg',
-  TAMIL: 'ta',
-  TATAR: 'tt',
-  TELUGU: 'te',
-  TETUM: 'tet',
-  THAI: 'th',
-  TIGRINYA: 'ti',
-  TSONGA: 'ts',
-  TSWANA: 'tn',
-  TURKISH: 'tr',
-  TURKMEN: 'tk',
-  TWI_AKAN: 'ak',
-  UKRAINIAN: 'uk',
-  URDU: 'ur',
-  UYGHUR: 'ug',
-  UZBEK: 'uz',
-  VIETNAMESE: 'vi',
-  WELSH: 'cy',
-  XHOSA: 'xh',
-  YIDDISH: 'yi',
-  YORUBA: 'yo',
-  YUCATEC_MAYA: 'yua',
-  ZULU: 'zu',
-}

package/src/features/translation/providers/google.types.ts

@@ -1,16 +0,0 @@
-export type GoogleTranslateProps = {
-  text: string[]
-  targetLanguage: string
-  sourceLanguage?: string
-}
-
-export type GoogleTranslation = {
-  translatedText: string
-  detectedSourceLanguage: string
-}
-
-export type GoogleTranslateResponse = {
-  data: {
-    translations: GoogleTranslation[]
-  }
-}

package/src/features/translation/providers/translation.interface.ts

@@ -1,49 +0,0 @@
-import { replaceMappedTokens } from '../helpers'
-
-export type LanguageGlossary = {
-  [languageCode: string]: Record<string, string>
-}
-
-type TranslationProviderProps = {
-  supportedLanguages: string[]
-  glossaries?: LanguageGlossary
-}
-
-export abstract class TranslationProvider {
-  protected readonly supportedLanguages: ReadonlySet<string>
-  protected readonly glossaries: LanguageGlossary = {}
-
-  protected constructor({ supportedLanguages, glossaries = {} }: TranslationProviderProps) {
-    this.supportedLanguages = new Set(supportedLanguages)
-    this.glossaries = glossaries
-  }
-
-  public abstract request(
-    text: string,
-    targetLanguage: string,
-    sourceLanguage?: string,
-  ): Promise<string>
-  public abstract requestBatch(
-    text: string[],
-    targetLanguage: string,
-    sourceLanguage?: string,
-  ): Promise<string[]>
-
-  public isTargetSupported(language: string) {
-    return this.supportedLanguages.has(language)
-  }
-
-  public getSupportedLanguages() {
-    return this.supportedLanguages.values()
-  }
-
-  /**
-   * Replaces full standalone words in text using a custom glossary for the target language,
-   * matching words like "Hello", or "Hej" regardless of case, but not when they appear inside other words.
-   */
-  public applyGlossary(text: string, targetLanguage: string): string {
-    const glossary = this.glossaries[targetLanguage]
-    if (!glossary) return text
-    return replaceMappedTokens(text, glossary)
-  }
-}

package/src/features/translation/types.ts

@@ -1,30 +0,0 @@
-export type TranslatableProblem = {
-  description: string
-  richDescription?: string
-  answerVariants: string[]
-}
-
-export type TranslateAllFxParams<TProblem extends TranslatableProblem = TranslatableProblem> = {
-  problem: TProblem | null
-  translationLanguageCode?: string | null
-}
-
-export type TranslateFxParams = {
-  cacheKey: string
-  text: string
-}
-
-export type Replacement = {
-  placeholder: string
-  original: string
-  leftPad?: boolean
-  rightPad?: boolean
-}
-
-export type MaskSegmentParams = {
-  text: string
-  regex: RegExp
-  placeholder: string
-  replacements: Replacement[]
-  shouldSkip?: (match: string) => boolean
-}

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

@@ -1,37 +0,0 @@
-import { COLORS, Loader, LoaderColor, LoaderSize, Typography } from '@magmamath/react-native-ui'
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-
-type VoiceTranscriptContentProps = {
-  text: string
-  isLoading: boolean
-}
-
-export const VoiceTranscriptContent = ({ text, isLoading }: VoiceTranscriptContentProps) => {
-  if (isLoading) {
-    return (
-      <View style={styles.loaderContainer}>
-        <Loader size={LoaderSize.SMALL} color={LoaderColor.BLUE} />
-      </View>
-    )
-  }
-
-  return (
-    <Typography variant="h8" style={styles.text}>
-      {text}
-    </Typography>
-  )
-}
-
-const styles = StyleSheet.create({
-  text: {
-    color: COLORS.NEUTRAL_7,
-    paddingHorizontal: 8,
-    paddingVertical: 8,
-  },
-  loaderContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 8,
-  },
-})

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

@@ -1,163 +0,0 @@
-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 { useText } from '../../../../i18n/i18n'
-import { useVoiceTranscriptionEffects } from '../hooks/useVoiceTranscriptionEffects'
-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 cachedTranslation = activeAttempt !== null ? translations[activeAttempt] : undefined
-  const showTranslation = isTranslationActive && hasTranscriptText
-  const isTranslationLoading = showTranslation && !cachedTranslation && isTranslating
-
-  const displayText = showTranslation
-    ? cachedTranslation ?? activeTranscript!
-    : hasTranscriptText
-      ? activeTranscript!
-      : t('voice.transcriptNotAvailable')
-
-  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={hasTranscriptText}
-            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

@@ -1,59 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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/useVoiceTranscriptionEffects.ts

@@ -1,44 +0,0 @@
-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])
-}