@magmamath/students-features 0.5.0 → 0.5.1-rc-0

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

@@ -2,32 +2,30 @@ import { attach, createEffect, createEvent, EventCallable, restore, sample, Stor
 import {
   AddTranslationToAlternativesProps,
   TranslateBatchFxProps,
-  ApplyTranslationProps,
+  TranslateMessageFxProps,
   TranslateRequestProps,
 } from '../types/translation.types'
-import { ChatbotContext, ChatbotMessages } from '../types/model.types'
+import { ChatbotContext, ChatbotMessages, ConversationMessage } from '../types/model.types'
 import { GetAlternativesResponse } from '../types/api.types'
 import { decodeHTMLEntities } from '../helpers'
-import { ChatbotAPI } from './ChatbotApi'
+import { ChatbotAPI } from './api'
+import { EntityFieldStore } from '../../../lib/effector/createEntityFieldStore'
 import {
   addTranslationsToAlternative,
   addTranslationToOptions,
   getOptionsForTranslation,
 } from './translation.helpers'
 
-import { ChatsCacheModel } from './ChatsCacheModel'
-import { ConversationMessage } from '../types/units.types'
-
 type ChatbotTranslationProps = {
   api: ChatbotAPI
   $key: Store<string>
   defaultMessages: ChatbotMessages
+  messagesModel: EntityFieldStore<ConversationMessage[]>
   $context: Store<ChatbotContext | null>
   alternativesModel: {
     set: EventCallable<GetAlternativesResponse | null>
     $store: Store<GetAlternativesResponse | null>
   }
-  chats: ChatsCacheModel
 }
 
 export class ChatbotTranslation {
@@ -35,54 +33,39 @@ export class ChatbotTranslation {
   private readonly $key
   private readonly $context
   private readonly defaultMessages
+  private readonly messagesModel
   private readonly alternativesModel
 
   readonly setIsTranslated = createEvent<boolean>()
   readonly $isTranslated = restore(this.setIsTranslated, false)
 
-  public readonly translateAllMessagesFx
-  public readonly applyTranslationFx
+  readonly translateAllMessagesFx
 
   constructor({
     api,
     $key,
     defaultMessages,
+    messagesModel,
     alternativesModel,
     $context,
-    chats,
   }: ChatbotTranslationProps) {
     this.api = api
     this.$key = $key
     this.$context = $context
     this.defaultMessages = defaultMessages
+    this.messagesModel = messagesModel
     this.alternativesModel = alternativesModel
 
-    this.applyTranslationFx = attach({
-      source: [this.$isTranslated, this.$context],
-      mapParams: (messages: ConversationMessage[], [isTranslationActive, context]) => ({
-        messages,
-        targetLanguage: context?.translationTargetLanguage ?? '',
-        isTranslationActive,
-      }),
-      effect: this.translateMessagesFx,
-    })
-
     this.translateAllMessagesFx = attach({
-      source: [this.$key, chats.$data, this.alternativesModel.$store, this.$context],
-      mapParams: (_: void, [key, chats, alternatives, context]) => ({
+      source: [this.$key, this.messagesModel.$state, this.alternativesModel.$store, this.$context],
+      mapParams: (_: void, [key, messages, alternatives, context]) => ({
         targetLanguage: context?.translationTargetLanguage ?? '',
-        messages: chats[key]?.messages ?? [],
+        messages: messages[key] ?? [],
         alternatives,
       }),
       effect: this.translateBatchFx,
     })
-
-    sample({
-      clock: this.translateAllMessagesFx.doneData,
-      source: [this.$key] as const,
-      fn: ([key], translatedMessages) => ({ key, data: { messages: translatedMessages } }),
-      target: chats.update,
-    })
+    this.initTranslationSamples()
   }
 
   private shouldSkipTranslation(messages: ConversationMessage[]) {
@@ -100,6 +83,15 @@ export class ChatbotTranslation {
     return false
   }
 
+  private initTranslationSamples() {
+    sample({
+      clock: this.translateAllMessagesFx.doneData,
+      source: [this.$key] as const,
+      fn: ([key], translatedMessages) => ({ key, data: translatedMessages }),
+      target: this.messagesModel.setField,
+    })
+  }
+
   private async translateRequest<List extends Record<string, string[]>>({
     textList,
     targetLanguage,
@@ -175,13 +167,11 @@ export class ChatbotTranslation {
     },
   )
 
-  private readonly translateMessagesFx = createEffect(
+  public readonly translateMessagesFx = createEffect(
     async ({
       messages,
       targetLanguage,
-      isTranslationActive,
-    }: ApplyTranslationProps): Promise<ConversationMessage[]> => {
-      if (!isTranslationActive || !targetLanguage) return messages
+    }: TranslateMessageFxProps): Promise<ConversationMessage[]> => {
       const text = messages
         .map(({ options, message }) => {
           return [message, ...options.map(({ text }) => text)]

package/src/features/chatbot/types/api.types.ts

@@ -1,4 +1,8 @@
-import { ChatAnswer, FullStrokeData, Stroke } from './units.types'
+export type ChatAnswer = {
+  text: string
+  promptKey: string
+  translatedText?: string
+}
 
 export type GetAlternativesPayload = {
   municipalityId: string
@@ -17,15 +21,16 @@ export type PostMessagePayload = {
   language: string
   problemAnswer: string[]
   answer?: string | string[]
+  threadId?: string | null
   problem: string
   imageAltText?: string
 }
 
 export type PostMessageResponse = {
   message: string
+  threadId: string
   options: ChatAnswer[]
   endMessage?: boolean
-  threadId: string
 }
 
 export type GoogleTranslatePayload = {
@@ -56,6 +61,11 @@ export type GoogleText2SpeechPayload = {
 
 export type GoogleText2SpeechResponse = string | undefined | { audioContent?: string }
 
+export type Stroke = {
+  x: number[]
+  y: number[]
+}
+
 export type ChatHintPayload = {
   problemDescription: string
   correctAnswer: string[]
@@ -69,13 +79,3 @@ export type ChatHintPayload = {
 export type ChatHintResponse = {
   message: string
 }
-export type ErrorSpottingPayload = {
-  strokes: FullStrokeData[]
-  problemDescription: string
-  correctAnswer: string[]
-  userAnswer: string | string[]
-  hint: string
-}
-export type ErrorSpottingResponse = {
-  highlightedStrokeIds: string[]
-}

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

@@ -1,20 +1,27 @@
 import type { Store } from 'effector'
 import {
-  ChatHintPayload,
-  ChatHintResponse,
-  ErrorSpottingPayload,
-  ErrorSpottingResponse,
-  GetAlternativesPayload,
   GetAlternativesResponse,
-  GoogleText2SpeechPayload,
-  GoogleText2SpeechResponse,
-  GoogleTranslatePayload,
-  GoogleTranslateResponse,
   PostMessagePayload,
   PostMessageResponse,
+  GoogleTranslatePayload,
+  GoogleTranslateResponse,
+  GoogleText2SpeechPayload,
+  GoogleText2SpeechResponse,
+  ChatAnswer,
+  GetAlternativesPayload,
+  Stroke,
 } from './api.types'
 import { ExtendWithOptional } from '../../../lib/helpers/types'
-import { ChatAnswer, ConversationMessage, FullStrokeData } from './units.types'
+
+export type ConversationMessage = {
+  id: string
+  message: string
+  threadId: string
+  options: ChatAnswer[]
+  isOwnMessage: boolean
+  translatedMessage?: string
+  endMessage?: boolean
+}
 
 export type ChatbotMessages = {
   error: ConversationMessage
@@ -23,20 +30,15 @@ export type ChatbotMessages = {
   anotherHintOption: ChatAnswer
 }
 
-export type ChatbotApiRequests = {
-  getAlternatives: (props: GetAlternativesPayload) => Promise<GetAlternativesResponse>
-  postMessage: (props: PostMessagePayload) => Promise<PostMessageResponse>
-  postTranslateText: (props: GoogleTranslatePayload) => Promise<GoogleTranslateResponse>
-  postTextToSpeech: (props: GoogleText2SpeechPayload) => Promise<GoogleText2SpeechResponse>
-  spotError: (props: ErrorSpottingPayload) => Promise<ErrorSpottingResponse>
-}
-
 export type ChatbotModelProps = {
   $key?: Store<string>
-  api: Omit<ChatbotApiRequests, 'postMessage'> & {
-    requestHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
+  api: {
+    getAlternatives: (props: GetAlternativesPayload) => Promise<GetAlternativesResponse>
+    postMessage: (props: PostMessagePayload) => Promise<PostMessageResponse>
+    postTranslateText: (props: GoogleTranslatePayload) => Promise<GoogleTranslateResponse>
+    postTextToSpeech: (props: GoogleText2SpeechPayload) => Promise<GoogleText2SpeechResponse>
   }
-  threadMessagesLimit?: number
+  messages: ChatbotMessages
 }
 
 export type SendHelpParams = {
@@ -46,6 +48,8 @@ export type SendHelpParams = {
 
 export type SendHelpProps = SendHelpParams & {
   key: string
+  isTranslated: boolean
+  threadId: string
   context: ChatbotContext | null
 }
 
@@ -67,19 +71,16 @@ export enum MessageVariant {
   RECEIVED = 'received',
 }
 
-export type CreateMessageResponse = ExtendWithOptional<
-  Omit<PostMessageResponse, 'threadId'>,
-  ConversationMessage
->
-
-type GetVisibleStrokesResponse = {
-  strokes: FullStrokeData[]
-  validationKey: string
+export type ChatbotRenderer = {
+  message: string
+  variant: MessageVariant
+  withTextToSpeech: boolean
 }
 
+export type CreateMessageResponse = ExtendWithOptional<PostMessageResponse, ConversationMessage>
+
 export type IChatDrawBoardAdapter = {
-  $strokesValidationKey: Store<string | null>
-  getVisibleStrokes(): Promise<GetVisibleStrokesResponse | null>
+  getVisibleStrokes(): Promise<Stroke[] | null>
 }
 
 export type ChatbotContext = {

package/src/features/chatbot/types/t2s.types.ts

@@ -1,27 +1,24 @@
-import { ConversationMessage } from './units.types'
+import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
 
 export enum AudioStatus {
-  PLAYING = 'playing',
-  STOPPED = 'stopped',
-  PAUSED = 'paused',
+    PLAYING = 'playing',
+    STOPPED = 'stopped',
+    PAUSED = 'paused',
 }
 
 export type AudioProvider = {
-  play: (audioPath: string, onPlaybackComplete: () => void) => Promise<void>
-  pause: () => void
-  resume: () => void
-  stop: () => void
+    play: (audioPath: string, onPlaybackComplete: () => void) => Promise<void>
+    pause: () => void
+    resume: () => void
+    stop: () => void
 }
 
 export type PlayTextToSpeechProps = {
-  message: ConversationMessage
-  isTranslated: boolean
-}
-
-export type T2SState = {
-  status: AudioStatus
-  disabled: boolean
-  isActive: boolean
-  isLoading: boolean
-  isEnabled: boolean
+    text: string
+    messageId: string
+    isTranslated: boolean
+    config?: {
+        voice?: typeof DEFAULT_VOICE
+        audioConfig?: typeof AUDIO_CONFIG
+    }
 }

package/src/features/chatbot/types/translation.types.ts

@@ -1,5 +1,5 @@
+import { ConversationMessage } from './model.types'
 import { GetAlternativesResponse } from './api.types'
-import { ConversationMessage } from './units.types'
 
 export type TranslateBatchFxProps = {
   messages: ConversationMessage[]
@@ -7,10 +7,9 @@ export type TranslateBatchFxProps = {
   alternatives: GetAlternativesResponse | null
 }
 
-export type ApplyTranslationProps = {
+export type TranslateMessageFxProps = {
   messages: ConversationMessage[]
   targetLanguage: string
-  isTranslationActive: boolean
 }
 
 export type AddTranslationToAlternativesProps = {

package/src/features/endOfAssignment/components/CorrectAnswer/AnimatedCard.tsx

@@ -64,8 +64,6 @@ export const AnimatedCard = memo(
     const statsOpacity = useSharedValue(OPACITY.initial)
     const delaySv = useSharedValue(0)
 
-    const starOffsetLeft = gbdAmount > 9 ? 70 : 55
-
     const animatedCardStyle = useAnimatedStyle(() => {
       const progress = interpolate(
         statsOpacity.value,
@@ -194,7 +192,7 @@ export const AnimatedCard = memo(
 
             <Animated.View style={[styles.statsWrapper, animatedStatsStyle]}>
               {variant === AnimatedCardVariant.GOOD_DRAWING && (
-                <View style={[styles.starContainer, { left: starOffsetLeft }]}>
+                <View style={styles.starContainer}>
                   <SparkIcon size={20} color={VARIANT_COLORS[variant].initial} />
                   <View style={styles.starCircle} />
                   <SparkIcon size={12} color={VARIANT_COLORS[variant].initial} />
@@ -283,6 +281,7 @@ const styles = StyleSheet.create({
   },
   starContainer: {
     position: 'absolute',
+    left: 70,
     top: 10,
   },
   starCircle: {

package/src/features/endOfAssignment/ui/PracticeButtonGroup.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react'
 import { StyleSheet } from 'react-native'
+
 import Animated, {
   useSharedValue,
   withDelay,

package/src/index.ts

@@ -1,4 +1,5 @@
 export { useFeaturesLocalization, setFeaturesLocalization, Locale } from './shared/translation'
+export type { LocalizationConfig } from './shared/translation'
 export { generateRandomId } from './lib/helpers/helpers'
 export * from './features/chatbot'
 export * from './features/feedback'

package/src/lib/effector/createEntityFieldStore.ts

@@ -1,4 +1,4 @@
-import { createEvent, createStore, Event } from 'effector'
+import { createEvent, createStore } from 'effector'
 
 type UpdateField<T> = {
   key: string
@@ -19,14 +19,6 @@ export class EntityFieldStore<T> {
       return { ...state, [key]: data }
     })
     .reset(this.reset)
-
-  public on<EV>(
-    event: Event<EV>,
-    fn: (state: Record<string, T>, payload: EV) => Record<string, T> | void,
-  ) {
-    this.$state.on(event, fn)
-    return this
-  }
 }
 
 export function createEntityFieldStore<T>() {

package/{dist/commonjs/shared/translation → src/lib}/localization/en.json

@@ -10,12 +10,5 @@
   "time.monthAgo": "month ago",
   "time.monthsAgo": "months ago",
   "time.yearAgo": "year ago",
-  "time.yearsAgo": "years ago",
-  "chat": {
-    "anotherHint": "Give me another hint",
-    "answerAgain": "Answer again to get another hint!",
-    "errorMessage": "Sorry, I can't help with this issue at the moment 😔.",
-    "howCanIHelp": "Hi! Do you want help?",
-    "showError": "Show error"
-  }
+  "time.yearsAgo": "years ago"
 }

package/src/{shared/translation → lib}/localization/gb.json

@@ -10,12 +10,5 @@
   "time.monthAgo": "month ago",
   "time.monthsAgo": "months ago",
   "time.yearAgo": "year ago",
-  "time.yearsAgo": "years ago",
-  "chat": {
-    "anotherHint": "Give me another hint",
-    "answerAgain": "Answer again to get another hint!",
-    "errorMessage": "Sorry, I can't help with this issue at the moment 😔.",
-    "howCanIHelp": "Hi! Do you want help?",
-    "showError": "Show error"
-  }
+  "time.yearsAgo": "years ago"
 }

package/src/{shared/translation → lib}/localization/sw.json

@@ -10,12 +10,5 @@
   "time.monthAgo": "månad sedan",
   "time.monthsAgo": "månader sedan",
   "time.yearAgo": "år sedan",
-  "time.yearsAgo": "år sedan",
-  "chat": {
-    "anotherHint": "Ge mig en ledtråd",
-    "answerAgain": "Svara igen för att få en till ledtråd!",
-    "errorMessage": "Tyvärr kan jag inte hjälpa dig just nu 😔.",
-    "howCanIHelp": "Hej! Hur kan jag hjälpa dig?",
-    "showError": "Visa fel"
-  }
+  "time.yearsAgo": "år sedan"
 }

package/src/shared/icons/icon.types.ts

@@ -1,11 +1,8 @@
-import { StyleProp, ViewStyle } from 'react-native'
-
 export type IconProps = {
-  color?: string
-  className?: string
-  size?: number
-  strokeWidth?: string
-  width?: number
-  height?: number
-  style?: StyleProp<ViewStyle>
+    color?: string
+    className?: string
+    size?: number
+    strokeWidth?: string
+    width?: number
+    height?: number
 }

package/src/shared/translation/constants.ts

@@ -1,7 +1,7 @@
 import { Locale } from './types'
-import EN from './localization/en.json'
-import GB from './localization/gb.json'
-import SW from './localization/sw.json'
+import EN from '../../lib/localization/en.json'
+import GB from '../../lib/localization/gb.json'
+import SW from '../../lib/localization/sw.json'
 
 export const LOCALIZATION_CONFIGS = {
   [Locale.EN]: EN,

package/src/shared/translation/helpers.ts

@@ -1,23 +1,6 @@
 import { LOCALIZATION_CONFIGS } from './constants'
 import { $localization, setLocalization } from './model'
-import { GetText, TranslationKeys, Translations } from './types'
-
-export function getTranslation(config: Translations, key: TranslationKeys) {
-  const rawTranslation = config?.[key as keyof Translations]
-  if (typeof rawTranslation === 'string' || !key.includes('.')) {
-    return rawTranslation as string
-  }
-  const keys = key.split('.')
-  let translation = config
-  for (const k of keys) {
-    if (translation[k as keyof Translations] === undefined) return key
-    translation = translation[k as keyof Translations] as any
-  }
-  if (typeof translation === 'string') {
-    return translation
-  }
-  return key
-}
+import { GetText, LocalizationConfig, TranslationKeys } from './types'
 
 export const getSubstitutedString = (str: string, substitutions: Record<string, string> = {}) => {
   const substitutionsArray = Object.entries(substitutions)
@@ -35,13 +18,17 @@ export const getSubstitutedString = (str: string, substitutions: Record<string,
 export const getText: GetText = (key: TranslationKeys, args = null) => {
   const config = $localization.getState()
 
-  const translation = getTranslation(config, key)
-  if (args) return getSubstitutedString(translation, args)
-  return translation
+  const translation = config?.[key]
+
+  if (translation && args) {
+    return getSubstitutedString(translation, args)
+  }
+
+  return translation ?? key
 }
 
 export const setFeaturesLocalization = (
-  generator: ((config: typeof LOCALIZATION_CONFIGS) => Translations) | Translations,
+  generator: ((config: typeof LOCALIZATION_CONFIGS) => LocalizationConfig) | LocalizationConfig,
 ) => {
   setLocalization(generator)
 }

package/src/shared/translation/hooks.ts

@@ -1,24 +1,28 @@
 import { useUnit } from 'effector-react'
 import { $localization, setLocalization } from './model'
-import { GetText, Translations } from './types'
+import { GetText, LocalizationConfig } from './types'
 import { useEffect } from 'react'
 import { LOCALIZATION_CONFIGS } from './constants'
-import { getSubstitutedString, getTranslation } from './helpers'
+import { getSubstitutedString } from './helpers'
 
 export const useText = (): GetText => {
-  const config = useUnit($localization)
+    const config = useUnit($localization) as LocalizationConfig
 
-  return (key, args = null) => {
-    const translation = getTranslation(config, key)
-    if (args) return getSubstitutedString(translation, args)
-    return translation
-  }
+    return (key, args = null) => {
+        const translation = config?.[key]
+
+        if (translation && args) {
+            return getSubstitutedString(translation, args)
+        }
+
+        return translation ?? key
+    }
 }
 
 export const useFeaturesLocalization = (
-  generator: ((config: typeof LOCALIZATION_CONFIGS) => Translations) | Translations,
+    generator: ((config: typeof LOCALIZATION_CONFIGS) => LocalizationConfig) | LocalizationConfig,
 ) => {
-  useEffect(() => {
-    setLocalization(generator)
-  }, [generator])
+    useEffect(() => {
+        setLocalization(generator)
+    }, [generator])
 }

package/src/shared/translation/index.ts

@@ -2,3 +2,4 @@ export { useFeaturesLocalization, useText } from './hooks'
 export { setFeaturesLocalization, getText as t } from './helpers'
 export { $localization, setLocalization } from './model'
 export { Locale } from './types'
+export type { LocalizationConfig } from './types'

package/src/shared/translation/model.ts

@@ -1,15 +1,15 @@
 import { createEvent, createStore } from 'effector'
-import { Locale, Translations } from './types'
+import { Locale, LocalizationConfig } from './types'
 import { LOCALIZATION_CONFIGS } from './constants'
 
 export const setLocalization = createEvent<
-  Translations | ((config: typeof LOCALIZATION_CONFIGS) => Translations)
+    LocalizationConfig | ((config: typeof LOCALIZATION_CONFIGS) => LocalizationConfig)
 >()
 
-export const $localization = createStore<Translations>(LOCALIZATION_CONFIGS[Locale.EN]).on(
-  setLocalization,
-  (state, payload) => {
-    if (typeof payload === 'function') return payload(LOCALIZATION_CONFIGS)
-    return payload
-  },
+export const $localization = createStore<LocalizationConfig>(LOCALIZATION_CONFIGS[Locale.EN]).on(
+    setLocalization,
+    (state, payload) => {
+        if (typeof payload === 'function') return payload(LOCALIZATION_CONFIGS)
+        if (state.locale !== payload.locale) return payload
+    },
 )

package/src/shared/translation/types.ts

@@ -1,12 +1,12 @@
-import enTranslations from './localization/en.json'
-import swTranslations from './localization/sw.json'
-import gbTranslations from './localization/gb.json'
-import { RetrieveKeys } from '../../lib/types/keys'
-import { ISValidTranslation } from './validation.types'
+import enTranslations from '../../lib/localization/en.json'
 
 export type Translations = typeof enTranslations
-export type TranslationKeys = RetrieveKeys<Translations>
-export type GetText = (key: TranslationKeys, args?: Record<string, string> | null) => string
+export type TranslationKeys = keyof Translations
+
+export type GetText = <T extends TranslationKeys>(
+  key: T,
+  args?: Record<string, string> | null,
+) => Translations[T]
 
 export enum Locale {
   EN = 'en-SE',
@@ -14,7 +14,4 @@ export enum Locale {
   GB = 'en-GB',
 }
 
-//  Validation of translations, do not remove
-type ISValidEN = ISValidTranslation<Translations>
-type ISValidSW = ISValidTranslation<typeof swTranslations>
-type ISValidGB = ISValidTranslation<typeof gbTranslations>
+export type LocalizationConfig = Record<string, string>