@magmamath/students-features 0.4.0-rc.0 → 0.4.0

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

@@ -5,29 +5,27 @@ import {
   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,6 +33,7 @@ export class ChatbotTranslation {
   private readonly $key
   private readonly $context
   private readonly defaultMessages
+  private readonly messagesModel
   private readonly alternativesModel
 
   readonly setIsTranslated = createEvent<boolean>()
@@ -46,32 +45,27 @@ export class ChatbotTranslation {
     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.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[]) {
@@ -89,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,
@@ -164,42 +167,33 @@ export class ChatbotTranslation {
     },
   )
 
-  public readonly applyTranslationFx = attach({
-    source: { isTranslated: this.$isTranslated },
-    mapParams: (props: Omit<TranslateMessageFxProps, 'isTranslated'>, source) => ({
-      ...props,
-      ...source,
-    }),
-    effect: createEffect(
-      async ({
-        messages,
-        targetLanguage,
-        preventTranslate,
-      }: TranslateMessageFxProps): Promise<ConversationMessage[]> => {
-        if (!preventTranslate) return messages
-        const text = messages
-          .map(({ options, message }) => {
-            return [message, ...options.map(({ text }) => text)]
-          })
-          .flat()
-
-        const response = await this.api.translateTextFx({ text, targetLanguage })
-        const translatedTexts = response.data.translations.map(({ translatedText }) =>
-          decodeHTMLEntities(translatedText),
-        )
-
-        return messages.map((message): ConversationMessage => {
-          const options = message.options
-          const translatedMessage = translatedTexts.shift()
-          return {
-            ...message,
-            translatedMessage,
-            options: addTranslationToOptions(options, translatedTexts.splice(0, options.length)),
-          }
+  public readonly translateMessagesFx = createEffect(
+    async ({
+      messages,
+      targetLanguage,
+    }: TranslateMessageFxProps): Promise<ConversationMessage[]> => {
+      const text = messages
+        .map(({ options, message }) => {
+          return [message, ...options.map(({ text }) => text)]
         })
-      },
-    ),
-  })
+        .flat()
+
+      const response = await this.api.translateTextFx({ text, targetLanguage })
+      const translatedTexts = response.data.translations.map(({ translatedText }) =>
+        decodeHTMLEntities(translatedText),
+      )
+
+      return messages.map((message): ConversationMessage => {
+        const options = message.options
+        const translatedMessage = translatedTexts.shift()
+        return {
+          ...message,
+          translatedMessage,
+          options: addTranslationToOptions(options, translatedTexts.splice(0, options.length)),
+        }
+      })
+    },
+  )
 
   public reset() {
     this.setIsTranslated(false)

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

@@ -1,4 +1,8 @@
-import { ChatAnswer, IThreadItem, 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
-  thread: IThreadItem
 }
 
 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[]

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

@@ -1,18 +1,27 @@
 import type { Store } from 'effector'
 import {
-  ChatHintPayload,
-  ChatHintResponse,
-  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
@@ -21,29 +30,15 @@ export type ChatbotMessages = {
   anotherHintOption: ChatAnswer
 }
 
-export type SpotErrorPayload = {
-  strokes: FullStrokeData[]
-}
-
-export type SpotErrorResponse = {
-  strokesIds: string[]
-}
-
-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: SpotErrorPayload) => Promise<SpotErrorResponse>
-}
-
 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>
   }
   messages: ChatbotMessages
-  threadMessagesLimit?: number
 }
 
 export type SendHelpParams = {
@@ -53,6 +48,8 @@ export type SendHelpParams = {
 
 export type SendHelpProps = SendHelpParams & {
   key: string
+  isTranslated: boolean
+  threadId: string
   context: ChatbotContext | null
 }
 
@@ -80,19 +77,10 @@ export type ChatbotRenderer = {
   withTextToSpeech: boolean
 }
 
-export type CreateMessageResponse = ExtendWithOptional<
-  Omit<PostMessageResponse, 'thread'>,
-  ConversationMessage
->
-
-type GetVisibleStrokesResponse = {
-  strokes: FullStrokeData[]
-  validationKey: string
-}
+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/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[]
@@ -8,7 +8,6 @@ export type TranslateBatchFxProps = {
 }
 
 export type TranslateMessageFxProps = {
-  preventTranslate?: boolean
   messages: ConversationMessage[]
   targetLanguage: string
 }

package/src/features/endOfAssignment/components/CheatDetected/CheatDetected.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { Button, SPACING, COLORS, Typography } from '@magmamath/react-native-ui'
+import { EOAModalContentProps } from '../../types'
+
+export const CheatDetected = ({ textContent, model }: EOAModalContentProps) => {
+  return (
+    <View style={styles.container}>
+      <Typography variant='h2' style={styles.title}>
+        {textContent.title}
+      </Typography>
+
+      <Typography variant='h1' style={styles.description}>
+        {textContent.description}
+      </Typography>
+
+      <Button
+        variant='primary'
+        colorScheme='red'
+        size='large'
+        style={{ text: styles.buttonText }}
+        onPress={model.hidePopUpAndLeave}
+      >
+        {textContent.leftButtonText}
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    gap: SPACING[800],
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+  },
+  description: {
+    color: COLORS.NEUTRAL_9,
+    textAlign: 'center',
+    fontWeight: '700',
+  },
+  buttonText: {
+    textTransform: 'uppercase',
+  },
+})

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

@@ -0,0 +1,293 @@
+import React, { memo, useEffect, useRef } from 'react'
+import { View, StyleSheet } from 'react-native'
+
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  withDelay,
+  interpolate,
+  interpolateColor,
+  runOnUI,
+  runOnJS,
+} from 'react-native-reanimated'
+import { SPACING, Typography, COLORS, BORDER_RADIUS, IS_MOBILE } from '@magmamath/react-native-ui'
+
+import { GoodDrawingSparks } from './GoodDrawingSparks'
+import { CorrectAnswerSparks } from './CorrectAnswerSparks'
+import { EOABadge } from '../../ui/EOABadge'
+import { SparkIcon } from '../../ui/SparkIcon'
+
+import { AnimatedCardVariant, EOAModalText } from '../../types'
+import {
+  ANIMATION_DELAYS,
+  BADGE_PARAMS,
+  CARD_DIMENSIONS,
+  OPACITY,
+  SPRING_CONFIG,
+  SPRING_CONFIG_STEP_3,
+  VARIANT_COLORS,
+} from '../../constants'
+import { CelebrationsRef, CelebrationVariant } from '../../../celebrations/types'
+import { Celebrations } from '../../../celebrations/components/Celebrations'
+
+type AnimatedCardProps = {
+  variant: AnimatedCardVariant
+  textContent: EOAModalText
+  shouldTriggerSparkles: boolean
+  solvedAmount?: number
+  problemsAmount?: number
+  gbdAmount?: number
+  delay?: number
+  onAnimationEnd?: () => void
+}
+
+export const AnimatedCard = memo(
+  ({
+    variant,
+    textContent,
+    shouldTriggerSparkles,
+    solvedAmount = 0,
+    problemsAmount = 0,
+    gbdAmount = 0,
+    delay = 0,
+    onAnimationEnd,
+  }: AnimatedCardProps) => {
+    const celebrationsRef = useRef<CelebrationsRef>(null)
+
+    const cardOpacity = useSharedValue(OPACITY.initial)
+    const cardWidth = useSharedValue(CARD_DIMENSIONS.initialWidth)
+    const badgeTranslateX = useSharedValue(BADGE_PARAMS.initialTranslateX)
+    const badgeRotation = useSharedValue(BADGE_PARAMS.initialRotation)
+    const badgeScale = useSharedValue(BADGE_PARAMS.initialScale)
+    const statsOpacity = useSharedValue(OPACITY.initial)
+    const delaySv = useSharedValue(0)
+
+    const animatedCardStyle = useAnimatedStyle(() => {
+      const progress = interpolate(
+        statsOpacity.value,
+        [OPACITY.initial, OPACITY.final],
+        [OPACITY.initial, OPACITY.final],
+      )
+      const backgroundColor = interpolateColor(
+        progress,
+        [OPACITY.initial, OPACITY.final],
+        [VARIANT_COLORS[variant].initial, VARIANT_COLORS[variant].final],
+      )
+      const height = interpolate(
+        cardWidth.value,
+        [CARD_DIMENSIONS.initialWidth, CARD_DIMENSIONS.finalWidth],
+        [CARD_DIMENSIONS.initialHeight, CARD_DIMENSIONS.finalHeight],
+      )
+      return {
+        opacity: cardOpacity.value,
+        width: cardWidth.value,
+        height,
+        backgroundColor,
+      }
+    }, [statsOpacity, cardOpacity, cardWidth])
+
+    const animatedBadgeStyle = useAnimatedStyle(
+      () => ({
+        transform: [
+          { translateX: badgeTranslateX.value },
+          { rotate: `${badgeRotation.value}deg` },
+          { scale: badgeScale.value },
+        ],
+      }),
+      [badgeTranslateX, badgeRotation, badgeScale],
+    )
+
+    const animatedStatsStyle = useAnimatedStyle(() => {
+      return {
+        opacity: statsOpacity.value,
+      }
+    }, [statsOpacity])
+
+    const statsSubtitle = (() => {
+      if (variant === AnimatedCardVariant.CORRECT_ANSWER) {
+        if (solvedAmount > 1) {
+          return textContent.stats?.correctAnswersPlural
+        }
+        return textContent.stats?.correctAnswers
+      } else {
+        if (gbdAmount > 1) {
+          return textContent.stats?.goodCalculationsPlural
+        }
+        return textContent.stats?.goodCalculations
+      }
+    })()
+
+    const runCelebration = () => {
+      if (variant === AnimatedCardVariant.CORRECT_ANSWER) {
+        celebrationsRef.current?.play(CelebrationVariant.CORRECT_FINISH_ASSIGNMENT)
+      } else {
+        celebrationsRef.current?.play(CelebrationVariant.GBD_FINISH_ASSIGNMENT)
+      }
+
+      onAnimationEnd?.()
+    }
+
+    useEffect(() => {
+      runOnUI(() => {
+        'worklet'
+        const step3 = () => {
+          badgeTranslateX.value = withSpring(BADGE_PARAMS.finalTranslateX, SPRING_CONFIG_STEP_3)
+          statsOpacity.value = withDelay(80, withSpring(OPACITY.final, SPRING_CONFIG_STEP_3))
+        }
+
+        const step2 = () => {
+          badgeTranslateX.value = withSpring(BADGE_PARAMS.intermediateTranslateX, SPRING_CONFIG)
+          cardWidth.value = withSpring(CARD_DIMENSIONS.finalWidth, SPRING_CONFIG)
+          badgeRotation.value = withSpring(0, SPRING_CONFIG)
+          badgeScale.value = withSpring(1, SPRING_CONFIG, () => {
+            delaySv.value = withTiming(1, { duration: ANIMATION_DELAYS.step3 }, () => {
+              step3()
+
+              delaySv.value = withTiming(0, { duration: 100 }, (finished) => {
+                if (finished) {
+                  runOnJS(runCelebration)()
+                }
+              })
+            })
+          })
+        }
+
+        const step1 = () => {
+          cardOpacity.value = withDelay(
+            delay,
+            withSpring(OPACITY.final, SPRING_CONFIG, () => {
+              step2()
+            }),
+          )
+        }
+
+        step1()
+      })()
+    }, [])
+
+    return (
+      <Animated.View style={styles.cardContainer}>
+        {variant === AnimatedCardVariant.CORRECT_ANSWER ? (
+          <CorrectAnswerSparks
+            color={COLORS.GREEN_3}
+            shouldStartAnimation={shouldTriggerSparkles}
+          />
+        ) : (
+          <GoodDrawingSparks color={COLORS.ORANGE_3} shouldStartAnimation={shouldTriggerSparkles} />
+        )}
+        <Celebrations modelRef={celebrationsRef} style={styles.celebrations} />
+
+        <Animated.View style={[styles.card, animatedCardStyle]}>
+          <Animated.View style={styles.cardContent}>
+            <Animated.View style={[styles.badgeContainer, animatedBadgeStyle]}>
+              <EOABadge
+                variant={variant}
+                color={VARIANT_COLORS[variant].primary}
+                size={88}
+                iconSize={56}
+              />
+            </Animated.View>
+
+            <Animated.View style={[styles.statsWrapper, animatedStatsStyle]}>
+              {variant === AnimatedCardVariant.GOOD_DRAWING && (
+                <View style={styles.starContainer}>
+                  <SparkIcon size={20} color={VARIANT_COLORS[variant].initial} />
+                  <View style={styles.starCircle} />
+                  <SparkIcon size={12} color={VARIANT_COLORS[variant].initial} />
+                </View>
+              )}
+
+              <View style={styles.statsValueContainer}>
+                <Typography
+                  variant="h1"
+                  style={[styles.largeText, { color: VARIANT_COLORS[variant].primary }]}
+                >
+                  {variant === AnimatedCardVariant.CORRECT_ANSWER ? solvedAmount : gbdAmount}
+                </Typography>
+                {variant === AnimatedCardVariant.CORRECT_ANSWER && (
+                  <Typography variant="h5" style={styles.smallText}>
+                    /{problemsAmount}
+                  </Typography>
+                )}
+              </View>
+
+              <Typography variant="h3" style={styles.cardTitle}>
+                {statsSubtitle}
+              </Typography>
+            </Animated.View>
+          </Animated.View>
+        </Animated.View>
+      </Animated.View>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    height: CARD_DIMENSIONS.finalHeight,
+    width: CARD_DIMENSIONS.finalWidth,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  card: {
+    padding: SPACING[200],
+    borderRadius: SPACING[400],
+  },
+  cardContent: {
+    flex: 1,
+    gap: SPACING[100],
+    borderRadius: BORDER_RADIUS[200],
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  badgeContainer: {
+    borderRadius: BORDER_RADIUS[400],
+    marginRight: 50,
+  },
+  statsWrapper: {
+    padding: SPACING[100],
+    gap: SPACING[100],
+  },
+  statsValueContainer: {
+    flexDirection: 'row',
+    height: IS_MOBILE ? 42 : 'auto',
+    paddingHorizontal: SPACING[100],
+    marginVertical: SPACING[100],
+  },
+  largeText: {
+    textAlign: 'center',
+    textAlignVertical: 'bottom',
+    fontSize: IS_MOBILE ? 56 : 60,
+    fontWeight: '700',
+    lineHeight: IS_MOBILE ? 54 : 46,
+  },
+  smallText: {
+    fontSize: 16,
+    fontWeight: '700',
+    lineHeight: 16,
+    color: COLORS.NEUTRAL_6,
+    alignSelf: 'flex-end',
+  },
+  cardTitle: {
+    color: COLORS.NEUTRAL_7,
+    padding: SPACING[100],
+  },
+  starContainer: {
+    position: 'absolute',
+    left: 55,
+    top: 10,
+  },
+  starCircle: {
+    width: 4,
+    height: 4,
+    borderRadius: 5,
+    backgroundColor: COLORS.ORANGE_2,
+  },
+  celebrations: {
+    top: 0,
+    zIndex: 100000,
+  },
+})