@magmamath/students-features 0.10.0-rc.7 → 0.10.0

package/src/features/chatbot/model/ChatTTSHighlightModel.ts

@@ -1,64 +0,0 @@
-import { restore, createEvent, combine } from 'effector'
-import { Timepoint } from '../types/api.types'
-import { OnTimeUpdate } from '../types/t2s.types'
-import { findCurrentMark } from '../helpers/ttsHighlight'
-import { WORD_MARK_REGEX } from '../constants'
-
-/**
- * Manages word-by-word highlight state during TTS playback.
- * Tracks which word index should be highlighted based on audio timepoints
- * and current playback time from the AudioProvider.
- */
-export class ChatTTSHighlightModel {
-  private lastMark: string | undefined = undefined
-
-  readonly setTimepoints = createEvent<Timepoint[]>()
-  readonly setTime = createEvent<number>()
-  readonly setIsActive = createEvent<boolean>()
-  readonly reset = createEvent()
-
-  readonly $time = restore(this.setTime, 0).reset(this.reset)
-  readonly $timepoints = restore(this.setTimepoints, []).reset(this.reset)
-  readonly $isActive = restore(this.setIsActive, false).reset(this.reset)
-
-  readonly $highlightedWordIndex = combine(
-    this.$timepoints,
-    this.$time,
-    this.$isActive,
-    (timepoints, time, isActive) => {
-      if (!isActive || !timepoints.length) return -1
-
-      const currentMark = findCurrentMark(timepoints, time)
-      if (!currentMark) return -1
-
-      const match = currentMark.match(WORD_MARK_REGEX)
-      return match ? parseInt(match[1], 10) : -1
-    },
-  )
-
-  /**
-   * Sets timepoints and starts listening to AudioProvider time updates.
-   * Only triggers store updates when the highlighted word actually changes.
-   */
-  activate(timepoints: Timepoint[], onTimeUpdate: OnTimeUpdate) {
-    this.setTimepoints(timepoints)
-    this.setIsActive(true)
-    this.lastMark = undefined
-
-    onTimeUpdate((time: number) => {
-      const currentMark = findCurrentMark(this.$timepoints.getState(), time)
-      if (!currentMark) return
-
-      if (currentMark !== this.lastMark) {
-        this.lastMark = currentMark
-        this.setTime(time)
-      }
-    })
-  }
-
-  deactivate(onTimeUpdate: OnTimeUpdate | null) {
-    onTimeUpdate?.(null)
-    this.lastMark = undefined
-    this.reset()
-  }
-}

package/src/features/chatbot/model/ChatTTSModel.ts

@@ -1,168 +0,0 @@
-import { restore, createEvent, createEffect, sample, Store } from 'effector'
-import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
-import {
-  AudioCache,
-  AudioConfig,
-  AudioProvider,
-  AudioStatus,
-  PlayTextToSpeechProps,
-  T2SConfig,
-} from '../types/t2s.types'
-
-import { ChatItem } from '../types/units.types'
-import { textToSSML } from '../helpers/ttsHighlight'
-import { ChatbotAPI } from './ChatbotApi'
-import { ChatTTSHighlightModel } from './ChatTTSHighlightModel'
-
-type ChatTextToSpeechModelProps = {
-  api: ChatbotAPI
-  $currentChatData: Store<ChatItem>
-  $isTranslated: Store<boolean>
-}
-
-export class ChatTTSModel {
-  private readonly api: ChatbotAPI
-  public readonly wordHighlight = new ChatTTSHighlightModel()
-  private readonly audioCache = new Map<string, AudioCache>()
-  private readonly $currentChatData
-  private readonly $isTranslated
-  private audioProvider: AudioProvider | null = null
-  private wordHighlightEnabled = false
-
-  readonly setCurrentPlayingId = createEvent<string | null>()
-  readonly $currentPlayingId = restore(this.setCurrentPlayingId, null)
-  readonly setStatus = createEvent<AudioStatus>()
-  readonly $status = restore(this.setStatus, AudioStatus.STOPPED)
-
-  private audioConfig: AudioConfig | null = null
-  private textSanitizer = (value: string) => value
-
-  constructor({ api, $currentChatData, $isTranslated }: ChatTextToSpeechModelProps) {
-    this.api = api
-    this.$currentChatData = $currentChatData
-    this.$isTranslated = $isTranslated
-
-    sample({
-      clock: $isTranslated,
-      target: this.reset,
-    })
-  }
-
-  public setAudioConfig(config: AudioConfig | null) {
-    this.audioConfig = config
-  }
-
-  public setConfig({ audioProvider, textSanitizer, isWordHighlightEnabled }: T2SConfig) {
-    if (audioProvider) this.audioProvider = audioProvider
-    if (textSanitizer) this.textSanitizer = textSanitizer
-    // Highlighting requires audioProvider.onTimeUpdate to sync playback time with word highlights
-    this.wordHighlightEnabled = !!isWordHighlightEnabled && !!this.audioProvider?.onTimeUpdate
-  }
-
-  public get isWordHighlightEnabled() {
-    return this.wordHighlightEnabled
-  }
-
-  private getCacheKey = (messageId: string, isTranslated: boolean) => {
-    return `${messageId}-${isTranslated ? 'translated' : 'original'}`
-  }
-
-  private async fetchAudio(text: string): Promise<AudioCache> {
-    const config = this.audioConfig
-    const response = await this.api.textToSpeechTextFx({
-      input: this.wordHighlightEnabled ? { ssml: textToSSML(text) } : { text },
-      voice: config?.voice ?? DEFAULT_VOICE,
-      audioConfig: config?.audioConfig ?? AUDIO_CONFIG,
-      enableTimePointing: this.wordHighlightEnabled ? ['SSML_MARK'] : [],
-    })
-
-    const audioPath =
-      typeof response.audioContent === 'string'
-        ? `data:audio/mpeg;base64,${response.audioContent}`
-        : (response?.audioContent ?? '')
-
-    return { audioPath, timepoints: response.timepoints ?? [] }
-  }
-
-  public async play({ message, isTranslated }: PlayTextToSpeechProps) {
-    if (!this.audioProvider) throw new Error('Audio provider is not set. Use setConfig.')
-    const messageText = isTranslated ? message.translatedMessage! : message.message
-    const messageId = message.id
-    const text = this.textSanitizer(messageText)
-
-    try {
-      const status = this.$status.getState()
-      const playingId = this.$currentPlayingId.getState()
-      const isPlaying = status === AudioStatus.PLAYING
-      const isPaused = status === AudioStatus.PAUSED
-      const isCurrentMessage = messageId === playingId
-
-      if (isPlaying && isCurrentMessage) {
-        this.audioProvider.pause()
-        if (this.wordHighlightEnabled) this.wordHighlight.setIsActive(false)
-        this.setStatus(AudioStatus.PAUSED)
-        return
-      }
-
-      if (isPaused && isCurrentMessage) {
-        this.audioProvider.resume()
-        if (this.wordHighlightEnabled) this.wordHighlight.setIsActive(true)
-        this.setStatus(AudioStatus.PLAYING)
-        return
-      }
-
-      if (messageId && !isCurrentMessage) {
-        this.audioProvider.stop()
-        this.wordHighlight.deactivate(this.audioProvider?.onTimeUpdate ?? null)
-      }
-
-      const cacheKey = this.getCacheKey(messageId, isTranslated)
-      this.setCurrentPlayingId(messageId)
-
-      const cached = this.audioCache.get(cacheKey)
-      const { audioPath, timepoints } = cached ?? (await this.fetchAudio(text))
-
-      if (!cached) {
-        this.audioCache.set(cacheKey, { audioPath, timepoints })
-      }
-
-      if (this.wordHighlightEnabled && this.audioProvider?.onTimeUpdate && timepoints.length > 0) {
-        this.wordHighlight.activate(timepoints, this.audioProvider.onTimeUpdate)
-      }
-
-      this.setStatus(AudioStatus.PLAYING)
-      await this.audioProvider.play(audioPath, () => {
-        this.onPlaybackComplete()
-      })
-    } catch (error) {
-      void this.reset()
-      console.error('Error playing text-to-speech: ', error)
-    }
-  }
-
-  public async playLatest() {
-    const lastMessage = this.$currentChatData.getState().messages.at(-1)
-    if (!lastMessage) return
-
-    const isTranslated = this.$isTranslated.getState()
-    return this.play({ message: lastMessage, isTranslated })
-  }
-
-  private onPlaybackComplete = () => {
-    this.setStatus(AudioStatus.STOPPED)
-    this.setCurrentPlayingId(null)
-    this.wordHighlight.deactivate(this.audioProvider?.onTimeUpdate ?? null)
-  }
-
-  public stop() {
-    if (!this.audioProvider) throw new Error('Audio provider is not set. Use setAudioProvider.')
-    this.audioProvider.stop()
-  }
-
-  public readonly reset = createEffect(() => {
-    this.stop()
-    this.setStatus(AudioStatus.STOPPED)
-    this.setCurrentPlayingId(null)
-    this.wordHighlight.deactivate(this.audioProvider?.onTimeUpdate ?? null)
-  })
-}

package/src/features/openEnded/components/OpenEndedAttemptsLimit.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { View, StyleSheet, Text } from 'react-native'
-import { SPACING, BORDER_RADIUS, COLORS } from '@magmamath/react-native-ui'
-
-type OEAttemptsLimitProps = {
-  text: string
-}
-
-export const OpenEndedAttemptsLimit = ({ text }: OEAttemptsLimitProps) => (
-  <View style={styles.container}>
-    <Text style={styles.text}>{text}</Text>
-  </View>
-)
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: SPACING[50],
-    paddingHorizontal: SPACING[200],
-    borderRadius: BORDER_RADIUS[300],
-    backgroundColor: COLORS.PRIMARY_RED,
-  },
-  text: {
-    fontSize: 14,
-    color: COLORS.NEUTRAL_1,
-  },
-})

package/src/features/openEnded/components/OpenEndedScoreLabel.tsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import {
-  Typography,
-  HeadingVariants,
-  SPACING,
-  BORDER_RADIUS,
-  COLORS,
-} from '@magmamath/react-native-ui'
-import { getScoreLabelColor } from '../oe.helpers'
-import { OpenEndedScoreLabelVariant } from '../oe.types'
-import { isWeb } from '../../../shared/common.constants'
-
-type OpenEndedScoreLabelProps = {
-  label: string
-  score: number | null
-  maxScore: number
-  disabled: boolean
-  variant: OpenEndedScoreLabelVariant
-}
-
-const SCORE_WIDTH = {
-  DEFAULT: isWeb ? 20 : 26,
-  LARGE: isWeb ? 26 : 30,
-} as const
-
-export const OpenEndedScoreLabel = ({
-  label,
-  score,
-  maxScore,
-  disabled,
-  variant,
-}: OpenEndedScoreLabelProps) => {
-  const colors = getScoreLabelColor({ variant, disabled })
-  const scoreContainerWidth =
-    score !== null && score >= 10 ? SCORE_WIDTH.LARGE : SCORE_WIDTH.DEFAULT
-
-  return (
-    <View style={styles.container}>
-      <View style={[styles.score, { width: scoreContainerWidth }]}>
-        <Typography
-          variant={HeadingVariants.H3}
-          style={[styles.scoreText, { color: colors.score }]}
-        >
-          {score}
-        </Typography>
-      </View>
-      <Typography
-        variant={HeadingVariants.H3}
-        style={[styles.maxScoreText, { color: colors.maxScore }]}
-      >
-        / {maxScore} {label}
-      </Typography>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  score: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 32,
-    borderWidth: 1,
-    borderRadius: BORDER_RADIUS[200],
-    borderColor: COLORS.NEUTRAL_5,
-    paddingVertical: isWeb ? SPACING[50] : 0,
-    paddingHorizontal: SPACING[100],
-    backgroundColor: COLORS.NEUTRAL_1,
-  },
-  scoreText: {
-    textAlign: 'center',
-  },
-  maxScoreText: {
-    marginLeft: SPACING[200],
-  },
-})

package/src/features/openEnded/index.ts

@@ -1,4 +0,0 @@
-export * from './oe.helpers'
-export * from './oe.types'
-export { OpenEndedScoreLabel } from './components/OpenEndedScoreLabel'
-export { OpenEndedAttemptsLimit } from './components/OpenEndedAttemptsLimit'

package/src/features/openEnded/oe.helpers.ts

@@ -1,31 +0,0 @@
-import { COLORS } from '@magmamath/react-native-ui'
-import { ColorValue } from '../../types/common.types'
-import { OpenEndedScoreLabelVariant } from './oe.types'
-
-type GetScoreLabelColorProps = {
-  variant: OpenEndedScoreLabelVariant
-  disabled: boolean
-}
-
-type ScoreLabelColors = {
-  score: ColorValue
-  maxScore: ColorValue
-}
-
-const scoreVariantToColor = (variant: OpenEndedScoreLabelVariant): ColorValue => {
-  const colors: Record<OpenEndedScoreLabelVariant, ColorValue> = {
-    [OpenEndedScoreLabelVariant.CORRECT]: COLORS.PRIMARY_YELLOW,
-    [OpenEndedScoreLabelVariant.FIRST_ATTEMPT]: COLORS.PRIMARY_GREEN,
-    [OpenEndedScoreLabelVariant.WRONG]: COLORS.PRIMARY_RED,
-    [OpenEndedScoreLabelVariant.DEFAULT]: COLORS.PRIMARY_BLUE,
-  }
-  return colors[variant] ?? COLORS.PRIMARY_BLUE
-}
-
-export const getScoreLabelColor = ({
-  variant,
-  disabled,
-}: GetScoreLabelColorProps): ScoreLabelColors => ({
-  score: disabled ? COLORS.NEUTRAL_6 : COLORS.NEUTRAL_9,
-  maxScore: disabled ? COLORS.NEUTRAL_6 : scoreVariantToColor(variant),
-})

package/src/features/openEnded/oe.types.ts

@@ -1,6 +0,0 @@
-export enum OpenEndedScoreLabelVariant {
-  CORRECT = 'CORRECT',
-  FIRST_ATTEMPT = 'FIRST_ATTEMPT',
-  WRONG = 'WRONG',
-  DEFAULT = 'DEFAULT',
-}

package/src/lib/components/ConditionalWrapper.tsx

@@ -1,15 +0,0 @@
-import React, { ComponentType, PropsWithChildren, ReactNode } from 'react'
-
-type ConditionalWrapperProps = {
-  children: ReactNode
-  withWrapper?: boolean
-  Wrapper?: ComponentType<PropsWithChildren>
-}
-
-export const ConditionalWrapper = ({ withWrapper, Wrapper, children }: ConditionalWrapperProps) => {
-  if (withWrapper && Wrapper) {
-    return <Wrapper>{children}</Wrapper>
-  }
-
-  return children
-}

package/src/shared/common.constants.ts

@@ -1,3 +0,0 @@
-import { Platform } from 'react-native'
-
-export const isWeb = Platform.OS === 'web'

package/src/shared/icons/TimeIcon.tsx

@@ -1,23 +0,0 @@
-import { COLORS } from '@magmamath/react-native-ui'
-import { IconProps } from './icon.types'
-import Svg, { Path } from 'react-native-svg'
-import React from 'react'
-
-export const TimeIcon = ({ size = 20, color = COLORS.NEUTRAL_9 }: IconProps) => {
-  return (
-    <Svg width={size} height={size} viewBox="0 0 17 17" fill="none">
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.84 1.5C4.33851 1.5 1.5 4.33851 1.5 7.84C1.5 11.3415 4.33851 14.18 7.84 14.18C11.3415 14.18 14.18 11.3415 14.18 7.84C14.18 4.33851 11.3415 1.5 7.84 1.5ZM0 7.84C0 3.51009 3.51009 0 7.84 0C12.1699 0 15.68 3.51009 15.68 7.84C15.68 12.1699 12.1699 15.68 7.84 15.68C3.51009 15.68 0 12.1699 0 7.84Z"
-        fill={color}
-      />
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.83999 3.0826C8.2542 3.0826 8.58999 3.41839 8.58999 3.8326V7.8033L10.4859 9.42838C10.8004 9.69794 10.8368 10.1714 10.5673 10.4859C10.2977 10.8004 9.82421 10.8368 9.50972 10.5673L7.57539 8.90926C7.2673 8.64519 7.08999 8.25967 7.08999 7.85389V3.8326C7.08999 3.41839 7.42578 3.0826 7.83999 3.0826Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}

package/src/shared/icons/keyboard/RoundBracketLeftIcon/RoundBracketLeftIcon.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { IconProps } from '../../icon.types'
-import Svg, { Path } from 'react-native-svg'
-
-const ASPECT_RATIO = 5 / 14
-
-export const RoundBracketLeftIcon = ({ size = 20, color }: IconProps) => {
-  return (
-    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 5 14" fill="none">
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.90533 0.21967C4.19823 0.512563 4.19823 0.987437 3.90533 1.28033C0.67361 4.51206 0.736927 10.001 3.8631 12.6806C4.17759 12.9501 4.21401 13.4236 3.94445 13.7381C3.67488 14.0526 3.20141 14.089 2.88691 13.8194C-0.986916 10.499 -0.923598 3.98794 2.84467 0.21967C3.13757 -0.0732233 3.61244 -0.0732233 3.90533 0.21967Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}

package/src/shared/icons/keyboard/RoundBracketRightIcon/RoundBracketRightIcon.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { IconProps } from '../../icon.types'
-import Svg, { Path } from 'react-native-svg'
-
-const ASPECT_RATIO = 5 / 14
-
-export const RoundBracketRightIcon = ({ size = 20, color }: IconProps) => {
-  return (
-    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 5 14" fill="none">
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0.219696 0.21967C-0.0731974 0.512563 -0.0731974 0.987437 0.219696 1.28033C3.45142 4.51206 3.3881 10.001 0.261932 12.6806C-0.0525622 12.9501 -0.0889835 13.4236 0.180583 13.7381C0.45015 14.0526 0.923625 14.089 1.23812 13.8194C5.11195 10.499 5.04863 3.98794 1.28036 0.21967C0.987463 -0.0732233 0.512589 -0.0732233 0.219696 0.21967Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}