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

package/src/features/translation/model/TranslationService.ts

@@ -0,0 +1,148 @@
+import { Store } from 'effector'
+import { TranslationKatexPreprocessor } from './TranslationPreprocessor'
+import { LanguageGlossary, TranslationProvider } from '../providers/translation.interface'
+
+type TranslationServiceProps = {
+  providers: TranslationProvider[]
+  preserve?: {
+    map: LanguageGlossary
+    replacers: [RegExp, string][]
+  }
+  onError?: () => void
+}
+
+export type TranslateConfigProps = {
+  targetLang?: string
+  sourceLang?: string
+  cacheKeySuffix?: string
+  cacheKey?: string
+}
+
+export class TranslationService {
+  private readonly preprocessor = new TranslationKatexPreprocessor()
+  private readonly cache = new Map<string, string | string[]>()
+  private readonly providers: TranslationProvider[] = []
+  private readonly onError
+
+  private globalTargetLanguage: string | null = null
+  private sourceLanguage: string | null = null
+  private customCacheKeyFn: ((text: string | string[], target: string) => string) | null = null
+
+  constructor({ providers, preserve, onError }: TranslationServiceProps) {
+    this.providers = providers
+    this.onError = onError
+
+    if (preserve) {
+      this.preprocessor.setupPreservable({
+        glossaryToPreserve: preserve.map,
+        preserveWordsReplacers: preserve.replacers,
+      })
+    }
+  }
+
+  private getTargetLanguage(targetLang?: string) {
+    const target = targetLang || this.globalTargetLanguage
+    if (!target) {
+      throw new Error(
+        'Target language is missing, either provide in arguments or use .bindTargetLanguage()',
+      )
+    }
+    return target
+  }
+
+  private getProvider(target: string) {
+    const provider = this.providers.find((svc) => svc.isTargetSupported(target))
+    if (!provider) throw new Error(`This target language: "${target}" is not supported.`)
+    return provider
+  }
+
+  private createCacheKey(text: string | string[], target: string, suffix?: string) {
+    let baseKey: string
+
+    if (this.customCacheKeyFn) {
+      baseKey = this.customCacheKeyFn(text, target)
+    } else {
+      baseKey = Array.isArray(text) ? `${JSON.stringify(text)}::${target}` : `${text}::${target}`
+    }
+
+    return suffix ? `${baseKey}${suffix}` : baseKey
+  }
+
+  public translate = async <T extends string | string[]>(
+    text: T = '' as T,
+    config?: TranslateConfigProps,
+  ): Promise<T> => {
+    const isArrayInput = Array.isArray(text)
+    const target = this.getTargetLanguage(config?.targetLang) ?? ''
+
+    if (!text.length || TranslationKatexPreprocessor.shouldSkipTranslation(text)) {
+      const key = config?.cacheKey ?? this.createCacheKey(text, target, config?.cacheKeySuffix)
+      if (this.cache.has(key)) return this.cache.get(key) as T
+
+      return text
+    }
+
+    const source = config?.sourceLang ?? this.sourceLanguage ?? undefined
+    const provider = this.getProvider(target)
+    const key = config?.cacheKey ?? this.createCacheKey(text, target, config?.cacheKeySuffix)
+
+    if (this.cache.has(key)) return this.cache.get(key) as T
+
+    let translated: string | string[]
+
+    if (isArrayInput) {
+      const { sanitized, replacements } = this.preprocessor.sanitizeBatch(text)
+      const response = await provider.requestBatch(sanitized, target, source)
+      translated = this.preprocessor.restoreBatch(response, replacements)
+    } else {
+      const { sanitized, replacements } = this.preprocessor.sanitize(text)
+      const response = await provider.request(sanitized, target, source)
+      translated = this.preprocessor.restore(response, replacements)
+    }
+
+    this.cache.set(key, translated)
+
+    return translated as T
+  }
+
+  public bindTargetLanguage<T extends string>(
+    store: Store<T>,
+    callback?: (value: T) => string,
+  ): this {
+    store.watch((t) => {
+      const value = callback ? callback(t) : t
+      this.globalTargetLanguage = value
+      this.preprocessor.setupTarget(value)
+    })
+
+    return this
+  }
+
+  public bindSourceLanguage<T extends string>(store: Store<T>): this {
+    store.watch((value) => {
+      this.sourceLanguage = value
+    })
+
+    return this
+  }
+
+  public bindCustomCacheKey<T extends string>(
+    store: Store<T>,
+    callback: (value: T, input: { text: string | string[]; target: string }) => string,
+  ): this {
+    store.watch((t) => {
+      this.customCacheKeyFn = (text: string | string[], target: string) =>
+        callback(t, { text, target })
+    })
+
+    return this
+  }
+
+  public getCached<T extends string | string[]>(key: string): T | undefined {
+    return this.cache.get(key) as T | undefined
+  }
+
+  public reset() {
+    this.cache.clear()
+  }
+}

package/src/features/translation/preserve/wordsToPreserve.ts

@@ -0,0 +1,87 @@
+export const wordsToPreserve: Record<string, Record<string, string>> = {
+  es: { mile: 'milla', miles: 'millas' },
+  hy: { mile: 'մղոն', miles: 'մղոններ' },
+  fr: { mile: 'mille', miles: 'milles' },
+  ru: { mile: 'миля', miles: 'мили' },
+  ar: { mile: 'ميل', miles: 'أميال' },
+  is: { mile: 'míla', miles: 'mílur' },
+  ja: { mile: 'マイル', miles: 'マイル' },
+  'zh-Hans': { mile: '英里', miles: '英里' },
+  af: { mile: 'myl', miles: 'myls' },
+  ko: { mile: '마일', miles: '마일' },
+  de: { mile: 'Meile', miles: 'Meilen' },
+  zu: { mile: 'ileyili', miles: 'amayela' },
+  'zh-Hant': { mile: '英里', miles: '英里' },
+  it: { mile: 'miglio', miles: 'miglia' },
+  ht: { mile: 'miy', miles: 'miy' },
+  hi: { mile: 'मील', miles: 'मील' },
+  pt: { mile: 'milha', miles: 'milhas' },
+  sq: { mile: 'milje', miles: 'milje' },
+  el: { mile: 'μίλι', miles: 'μίλια' },
+  pl: { mile: 'mila', miles: 'mile' },
+  te: { mile: 'మైలు', miles: 'మైలు‌లు' },
+  am: { mile: 'ማይል', miles: 'ማይሎች' },
+  ta: { mile: 'மைல்', miles: 'மைல்கள்' },
+  vi: { mile: 'dặm', miles: 'dặm' },
+  uk: { mile: 'миля', miles: 'милі' },
+  haw: { mile: 'maila', miles: 'maila' },
+  sv: { mile: 'mile', miles: 'miles' },
+  bn: { mile: 'মাইল', miles: 'মাইল' },
+  tl: { mile: 'milya', miles: 'milya' },
+  ga: { mile: 'míle', miles: 'míleanna' },
+  nl: { mile: 'mijl', miles: 'mijlen' },
+  ur: { mile: 'میل', miles: 'میل' },
+  ee: { mile: 'maili', miles: 'maili' },
+  en: { mile: 'mile', miles: 'miles' },
+  az: { mile: 'mil', miles: 'mil' },
+  gu: { mile: 'માઈલ', miles: 'માઈલ્સ' },
+  ml: { mile: 'മൈൽ', miles: 'മൈലുകൾ' },
+  pa: { mile: 'ਮਾਈਲ', miles: 'ਮਾਈਲਾਂ' },
+  as: { mile: 'মাইল', miles: 'মাইল' },
+  bm: { mile: 'maili', miles: 'maili' },
+  he: { mile: 'מייל', miles: 'מיילים' },
+  fa: { mile: 'مایل', miles: 'مایل‌ها' },
+  fi: { mile: 'maili', miles: 'mailia' },
+  tr: { mile: 'mil', miles: 'mil' },
+  da: { mile: 'mil', miles: 'mil' },
+  bg: { mile: 'миля', miles: 'мили' },
+  xh: { mile: 'imayile', miles: 'iimayile' },
+  yi: { mile: 'מייל', miles: 'מיילן' },
+  ps: { mile: 'مایل', miles: 'مایلونه' },
+  mr: { mile: 'मैल', miles: 'मैले' },
+  eu: { mile: 'mila', miles: 'milak' },
+  bs: { mile: 'milja', miles: 'milje' },
+  cs: { mile: 'míle', miles: 'míle' },
+  yo: { mile: 'maili', miles: 'maili' },
+  ak: { mile: 'maili', miles: 'maili' },
+  ro: { mile: 'milă', miles: 'mile' },
+  mn: { mile: 'миль', miles: 'миль' },
+  bho: { mile: 'माइल', miles: 'माइल्स' },
+  ka: { mile: 'მილი', miles: 'მილი' },
+  ca: { mile: 'milla', miles: 'milles' },
+  be: { mile: 'міля', miles: 'мілі' },
+  sw: { mile: 'maili', miles: 'maili' },
+  eo: { mile: 'mejlo', miles: 'mejloj' },
+  th: { mile: 'ไมล์', miles: 'ไมล์' },
+  ay: { mile: 'maili', miles: 'maili' },
+  doi: { mile: 'माइल', miles: 'माइल्स' },
+  hr: { mile: 'milja', miles: 'milje' },
+  sm: { mile: 'maila', miles: 'maila' },
+  kn: { mile: 'ಮೈಲು', miles: 'ಮೈಲುಗಳು' },
+  et: { mile: 'miil', miles: 'miilid' },
+  ceb: { mile: 'milya', miles: 'milya' },
+  ig: { mile: 'maịlụ', miles: 'maịlụ' },
+  ne: { mile: 'माइल', miles: 'माइलहरू' },
+  uz: { mile: 'mil', miles: 'mil' },
+  cy: { mile: 'filltir', miles: 'mili' },
+}
+
+const MILE_REGEX = /mile/gm
+const MILE_PLACEHOLDER = '__!{21_37_70}!__'
+const MILES_REGEX = /miles/gm
+const MILES_PLACEHOLDER = '__!{21_37_69}!__'
+
+export const preservedWordsReplacers: [RegExp, string][] = [
+  [MILES_REGEX, MILES_PLACEHOLDER],
+  [MILE_REGEX, MILE_PLACEHOLDER],
+]

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

@@ -0,0 +1,50 @@
+import { createEffect, Effect } from 'effector'
+import { LanguageGlossary, TranslationProvider } from '../translation.interface'
+import { GoogleTranslateLanguage, resolveGoogleLanguageCode } from './supportedLanguages'
+import { GoogleTranslateProps, GoogleTranslateResponse } from '../google.types'
+import { decodeHtmlEntities } from '../../helpers'
+
+type GoogleTranslationProviderProps = {
+  api: {
+    translateRequest: (payload: GoogleTranslateProps) => Promise<GoogleTranslateResponse>
+  }
+  glossaries?: LanguageGlossary
+}
+
+export class GoogleTranslationProvider extends TranslationProvider {
+  private readonly getTranslationFx: Effect<GoogleTranslateProps, GoogleTranslateResponse>
+
+  constructor({ api, glossaries }: GoogleTranslationProviderProps) {
+    super({ supportedLanguages: Object.values(GoogleTranslateLanguage), glossaries })
+    this.getTranslationFx = createEffect(api.translateRequest)
+  }
+
+  public resolveLanguage(language: string): string | null {
+    return resolveGoogleLanguageCode(language)
+  }
+
+  public async request(text: string, targetLanguage: string, sourceLanguage?: string) {
+    const resolvedTarget = this.resolveLanguage(targetLanguage) ?? targetLanguage
+    const resolvedSource = sourceLanguage ? this.resolveLanguage(sourceLanguage) ?? undefined : undefined
+    const response = await this.getTranslationFx({
+      text: [text],
+      targetLanguage: resolvedTarget,
+      sourceLanguage: resolvedSource,
+    })
+    const translated = response.data.translations[0]?.translatedText ?? ''
+    return this.applyGlossary(decodeHtmlEntities(translated), resolvedTarget)
+  }
+
+  public async requestBatch(text: string[], targetLanguage: string, sourceLanguage?: string) {
+    const resolvedTarget = this.resolveLanguage(targetLanguage) ?? targetLanguage
+    const resolvedSource = sourceLanguage ? this.resolveLanguage(sourceLanguage) ?? undefined : undefined
+    const response = await this.getTranslationFx({
+      text,
+      targetLanguage: resolvedTarget,
+      sourceLanguage: resolvedSource,
+    })
+    return response.data.translations.map(({ translatedText }) =>
+      this.applyGlossary(decodeHtmlEntities(translatedText), resolvedTarget),
+    )
+  }
+}

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

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

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

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

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

@@ -4,7 +4,7 @@ export * from './recording/modal/VoiceRecordDeleteModal'
 export * from './recording/modal/VoiceRecordUndoModal'
 
 export * from './playing/model/VoicePlayer.model'
-export * from './playing/components/VoiceTranscriptionsDropdown'
+export * from './playing/components/VoiceTranscription'
 
 export * from './playing/components/VoiceIcon'
 export * from './constants'

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

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