@magmamath/students-features 1.6.4 → 1.7.0-rc.0

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

@@ -1,229 +0,0 @@
-const SUPPORTED_CODES = new Set<string>()
-const NAME_TO_CODE: Record<string, string> = {}
-
-const normalizeLanguageName = (language: string): string =>
-  language
-    .trim()
-    .toUpperCase()
-    .replace(/[\s()-]+/g, '_')
-
-/**
- * Resolves an arbitrary language input (ISO code, locale, or English name) to the
- * Google Translate ISO code. Returns null when the language is not supported.
- *
- * Examples:
- *   "en"         → "en"
- *   "en-SE"      → "en"  (base fallback)
- *   "zh-CN"      → "zh-CN" (exact match)
- *   "Spanish"    → "es"  (name lookup)
- *   "Chinese Simplified" → "zh-CN"
- */
-export const resolveGoogleLanguageCode = (language?: string | null): string | null => {
-  if (!language) return null
-  if (SUPPORTED_CODES.has(language)) return language
-  const base = language.split('-')[0]
-  if (base !== language && SUPPORTED_CODES.has(base)) return base
-  return NAME_TO_CODE[normalizeLanguageName(language)] ?? null
-}
-
-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',
-}
-
-Object.entries(GoogleTranslateLanguage).forEach(([name, code]) => {
-  SUPPORTED_CODES.add(code)
-  NAME_TO_CODE[name] = code
-})

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,63 +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.resolveLanguage(language) !== null
-  }
-
-  /**
-   * Returns the provider-supported variant of `language`, falling back to the base
-   * language part (e.g. "en-SE" → "en") when the exact locale is not listed.
-   * Subclasses may override to add their own resolution (e.g. language names).
-   * Returns null when the language cannot be resolved.
-   */
-  public resolveLanguage(language: string): string | null {
-    if (!language) return null
-    if (this.supportedLanguages.has(language)) return language
-    const base = language.split('-')[0]
-    if (base !== language && this.supportedLanguages.has(base)) return base
-    return null
-  }
-
-  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,44 +0,0 @@
-import {
-  COLORS,
-  Loader,
-  LoaderColor,
-  LoaderSize,
-  SPACING,
-  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: SPACING[200],
-    paddingVertical: SPACING[200],
-  },
-  loaderContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: SPACING[200],
-  },
-})

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

@@ -1,117 +0,0 @@
-import { Typography, COLORS, SPACING } from '@magmamath/react-native-ui'
-import React from 'react'
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
-import Animated from 'react-native-reanimated'
-import { AnswerAudio, VoiceTranscriptionVariant } from '../../types'
-import { useText } from '../../../../i18n/i18n'
-import { useVoiceTranscriptionController } from '../hooks/useVoiceTranscriptionController'
-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 { display, flags, actions } = useVoiceTranscriptionController({
-    model,
-    answers,
-    attemptOffset,
-    attemptsCount,
-    problemId,
-  })
-  const isLargeVariant = variant === VoiceTranscriptionVariant.LARGE
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        isLargeVariant ? styles.largeContainer : styles.smallContainer,
-        style,
-      ]}
-    >
-      <View style={styles.header}>
-        <Typography style={styles.title} variant="h7">
-          {t('voice.transcriptions')}
-        </Typography>
-        {flags.anyAttemptHasAudio && (
-          <VoiceTranscriptionHeaderActions
-            playerState={flags.playerState}
-            isTranslationActive={flags.isTranslationActive}
-            canTranslate={flags.canTranslate}
-            onPlayPress={actions.onPlayPress}
-            onTranslationPress={actions.onTranslationToggle}
-          />
-        )}
-      </View>
-
-      {isLargeVariant ? (
-        <VoiceTranscriptContent text={display.text} isLoading={display.isLoading} />
-      ) : (
-        <VoiceTranscriptionCollapsible
-          text={display.text}
-          isLoading={display.isLoading}
-          dropdown={model.dropdown}
-        />
-      )}
-    </Animated.View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    padding: SPACING[100],
-    boxShadow: '0px 1px 3px 0px rgba(51, 51, 51, 0.25)',
-    borderRadius: 12,
-    backgroundColor: COLORS.NEUTRAL_1,
-    overflow: 'hidden',
-  },
-  // SMALL: floats over the drawing area; consumer-positioned siblings sit
-  // beneath it. Absolute positioning is intentional here.
-  smallContainer: {
-    position: 'absolute',
-    top: 56,
-    left: SPACING[200],
-    width: 222,
-    maxHeight: 405,
-    minHeight: 51,
-  },
-  // LARGE: rendered as a flex child of the SolutionCard's column flow,
-  // between the header and footer. Auto-sizes to whatever space the footer
-  // (with or without the playable timeline) leaves — no magic numbers.
-  largeContainer: {
-    flex: 1,
-    marginHorizontal: SPACING[200],
-    marginTop: SPACING[200],
-    marginBottom: SPACING[200],
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: SPACING[100],
-    marginBottom: SPACING[100],
-    height: 32,
-  },
-  title: {
-    color: COLORS.NEUTRAL_9,
-    marginLeft: SPACING[100],
-  },
-})

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 { useDropdownAnimation } from '../hooks/useDropdownAnimation'
-import { DropdownModel } from '../model/Dropdown.model'
-import { VoiceTranscriptContent } from './VoiceTranscriptContent'
-
-const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity)
-
-type VoiceTranscriptionCollapsibleProps = {
-  text: string
-  isLoading: boolean
-  dropdown: DropdownModel
-}
-
-export const VoiceTranscriptionCollapsible = ({
-  text,
-  isLoading,
-  dropdown,
-}: VoiceTranscriptionCollapsibleProps) => {
-  const { listAnimatedStyle, iconAnimatedStyle, onListLayout } =
-    useDropdownAnimation(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,61 +0,0 @@
-import { Button, COLORS, GlobeIcon, SPACING } from '@magmamath/react-native-ui'
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-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 (
-    <View style={styles.container}>
-      <PlayButton
-        state={playButtonState}
-        onPress={onPlayPress}
-        activityIndicatorColor={COLORS.NEUTRAL_1}
-        colorScheme={ColorScheme.Yellow}
-      />
-      {canTranslate && (
-        <Button
-          variant="secondary"
-          size="small"
-          colorScheme={ColorScheme.Yellow}
-          isActive={isTranslationActive}
-          onPress={onTranslationPress}
-          icon={<GlobeIcon color={isTranslationActive ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} />}
-        />
-      )}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[200],
-  },
-  hidden: {
-    opacity: 0,
-  },
-})

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

@@ -1,64 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react'
-import { getActiveAttempt } from '../../helpers'
-import { AnswerAudio } from '../../types'
-import { VoicePlayerModel } from '../model'
-
-type Params = {
-  model: VoicePlayerModel
-  answers: AnswerAudio[]
-  attemptOffset: number
-  attemptsCount: number
-  problemId: string
-}
-
-// Owns playback engine mutations (init/reset/setCurrentAttempt/stopAudio).
-// VoiceTranscription stays read-only; consumers call this once per page.
-export const useVoicePlayerLifecycle = ({
-  model,
-  answers,
-  attemptOffset,
-  attemptsCount,
-  problemId,
-}: Params) => {
-  const activeAttempt = getActiveAttempt(attemptOffset, attemptsCount)
-
-  const answersKey = useMemo(
-    () => answers.map((a) => `${a._id}:${a.audioFileId ?? ''}`).join(','),
-    [answers],
-  )
-
-  const hasAnyAudio = useMemo(() => answers.some((a) => !!a.audioFileId), [answers])
-
-  const answersRef = useRef(answers)
-  answersRef.current = answers
-
-  useEffect(() => {
-    model.reinitializePlayer()
-    // No stopAudio cleanup: this hook re-runs across normal renders in some
-    // host components, and tearing down audio in the cleanup races with
-    // play() requests from other consumers (e.g. TimelineManager). The page
-    // unmount path (resetPlayer / cleanup) still releases audio properly.
-  }, [model])
-
-  useEffect(() => {
-    model.resetPlayer()
-  }, [problemId])
-
-  useEffect(() => {
-    if (answersRef.current.some((a) => a.audioFileId)) {
-      model.initializeWithAudios(answersRef.current)
-    }
-  }, [model, answersKey])
-
-  useEffect(() => {
-    // No stopAudio: VoiceSource (timeline) and VoiceTranscription (manual play
-    // button) drive playback transitions themselves. Calling stopAudio here
-    // races with concurrent play() requests and aborts in-flight audio.play().
-    model.setCurrentAttempt(activeAttempt)
-    if (activeAttempt !== null) {
-      model.loader.loadTranscriptForAttempt(activeAttempt)
-    }
-  }, [model, activeAttempt, answersKey])
-
-  return { activeAttempt, hasAnyAudio }
-}