@magmamath/students-features 0.6.1-8.rc-3 → 0.6.2

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

@@ -1,4 +1,13 @@
-import { attach, combine, createEffect, createEvent, restore, sample, type Store } from 'effector'
+import {
+  attach,
+  combine,
+  createEffect,
+  createEvent,
+  createStore,
+  restore,
+  sample,
+  type Store,
+} from 'effector'
 import {
   ChatbotContext,
   ChatbotModelProps,
@@ -19,7 +28,6 @@ import { ChatsCacheModel, defaultChatData } from './ChatsCacheModel'
 import { ErrorSpottingModel } from '../errorSpotting/ErrorSpottingModel'
 import { withEvent } from '../../../lib/effector/withEvent'
 import { ChatBotTextManager } from './ChatBoxTextManager'
-import { ControlledSample } from '../../../lib/effector/ControlledSample'
 
 type ReinitConversationProps = {
   key: string
@@ -38,11 +46,7 @@ export class ChatbotModel {
   public readonly t2s: ChatTextToSpeechModel
   public readonly errorSpotting: ErrorSpottingModel
 
-  private readonly setCurrentKey = createEvent<string>()
-  public readonly $currentKey = restore(this.setCurrentKey, '')
-
-  private unbindCurrentKey: null | (() => void) = null
-  private externalTranslationStateSync?: ControlledSample<boolean, void>
+  public readonly $currentKey = createStore('')
 
   readonly resetAlternatives = createEvent()
   readonly setAlternatives = createEvent<GetAlternativesResponse | null>()
@@ -129,31 +133,6 @@ export class ChatbotModel {
         target: this.$isOpen,
       })
     }
-
-    this.startConversation = attach({
-      source: { currentChatData: this.$currentChatData, alternatives: this.$alternatives },
-      mapParams: (props: StartConversationProps | void, source) => ({
-        ...props,
-        ...source,
-      }),
-      effect: createEffect(
-        ({ currentChatData, alternatives, initOnly }: StartConversationFxData) => {
-          const { key, messages } = currentChatData
-
-          if (!alternatives?.chatAccess) return
-
-          if (messages.length) {
-            if (initOnly) return
-            return this.reinitConversation({ key })
-          }
-          this.cache.add(key, {
-            messages: [this.defaultMessages.start],
-            isAvailable: true,
-            currentThread: null,
-          })
-        },
-      ),
-    })
   }
 
   private createSendHelpRequestFx() {
@@ -207,28 +186,21 @@ export class ChatbotModel {
   }
 
   public bindKey($store: Store<string>) {
-    this.unbindCurrentKey?.()
-    this.unbindCurrentKey = $store.watch((value) => {
-      this.setCurrentKey(value)
-      this.threadManager.setCurrentKey(value)
+    sample({
+      source: $store,
+      target: this.$currentKey,
     })
-
-    const initialValue = $store.getState()
-    this.setCurrentKey(initialValue)
-    this.threadManager.setCurrentKey(initialValue)
+    this.threadManager.bindKeyStore($store)
     return this
   }
 
-  public bindExternalTranslationState($isTranslated: Store<boolean>) {
-    if (!this.externalTranslationStateSync) {
-      this.externalTranslationStateSync = new ControlledSample<boolean, void>({
-        clock: [this.$currentKey.updates, this.startConversation.done],
-        source: $isTranslated,
-        filter: (flag) => flag,
-        target: this.translation.translateAllMessagesFx,
-        isActiveDefault: true,
-      })
-    }
+  public bindExternalTranslationState($store: Store<boolean>) {
+    sample({
+      source: $store,
+      clock: [this.$currentKey.updates, this.startConversation.done],
+      filter: (isTranslated) => !!isTranslated,
+      target: this.translation.translateAllMessagesFx,
+    })
     return this
   }
 
@@ -243,9 +215,27 @@ export class ChatbotModel {
     return this
   }
 
-  public readonly startConversation
   public readonly sendHelpRequestFx = this.createSendHelpRequestFx()
 
+  public readonly startConversation = attach({
+    source: this.$currentChatData,
+    mapParams: (props: StartConversationProps | void, source) => ({
+      ...props,
+      ...source,
+    }),
+    effect: createEffect(({ key, messages, initOnly }: StartConversationFxData) => {
+      if (messages.length) {
+        if (initOnly) return
+        return this.reinitConversation({ key })
+      }
+      this.cache.add(key, {
+        messages: [this.defaultMessages.start],
+        isAvailable: true,
+        currentThread: null,
+      })
+    }),
+  })
+
   public setHintMessage({ key, ...message }: SetHintMessageProps) {
     const options = this.$alternatives.getState()?.options.hints ?? message.options
     this.cache.setSingleMessage(key, { ...message, options })
@@ -287,18 +277,4 @@ export class ChatbotModel {
     this.threadManager.reset()
     this.errorSpotting.reset()
   })
-
-  public unbindKey() {
-    this.unbindCurrentKey?.()
-    this.unbindCurrentKey = null
-
-    this.setCurrentKey('')
-    this.threadManager.setCurrentKey('')
-    return this
-  }
-
-  public unbindExternalTranslationState() {
-    this.externalTranslationStateSync?.disable()
-    return this
-  }
 }

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

@@ -1,4 +1,5 @@
 import { ThreadItem } from './ThreadItem'
+import { Store } from 'effector'
 import {
   ChatHintPayload,
   ChatHintResponse,
@@ -26,6 +27,7 @@ export class ChatBotThreadManager {
 
   private messagesLimit
   private currentKey = ''
+  private currentBinding: null | (() => void) = null
 
   private readonly defaultMessages
 
@@ -41,6 +43,14 @@ export class ChatBotThreadManager {
     this.defaultMessages = messages
   }
 
+  public bindKeyStore($store: Store<string>) {
+    this.currentBinding?.()
+    this.currentBinding = $store.watch((value) => {
+      this.currentKey = value
+    })
+    return this
+  }
+
   private async getThreadItem() {
     const key = this.currentKey
     const existingThreadItem = this.threads.get(key)
@@ -118,8 +128,4 @@ export class ChatBotThreadManager {
     this.api = api
     return this
   }
-
-  public setCurrentKey(key: string) {
-    this.currentKey = key
-  }
 }

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

@@ -17,15 +17,4 @@ export class ChatBotTextManager {
     endMessage: this.messagesCreator.createMessage('chat.answerAgain'),
     anotherHintOption: this.messagesCreator.createOption('chat.anotherHint'),
   }
-  private readonly defaultMessages = { ...this.messages }
-
-  public update(
-    cb: (manager: DefaultMessagesCreator<TranslationKeys>) => Partial<ChatbotMessages>,
-  ) {
-    Object.assign(this.messages, cb(this.messagesCreator))
-  }
-
-  public restore() {
-    Object.assign(this.messages, this.defaultMessages)
-  }
 }

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

@@ -38,7 +38,6 @@ export class DefaultMessagesCreator<K extends string> {
   public createOption(key: K) {
     const option: ChatAnswer = {
       text: this.getter(key),
-      translatedText: '',
       promptKey: '',
     }
     this.list.set(option, key)

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

@@ -79,7 +79,6 @@ export class ChatbotTranslation {
 
     sample({
       clock: this.translateAllMessagesFx.doneData,
-      filter: (_, translatedMessages) => !!translatedMessages.length,
       source: [this.$key] as const,
       fn: ([key], translatedMessages) => ({ key, data: { messages: translatedMessages } }),
       target: chats.update,
@@ -118,7 +117,7 @@ export class ChatbotTranslation {
   private readonly translateBatchFx = createEffect(
     async ({ messages, alternatives, targetLanguage }: TranslateBatchFxProps) => {
       const allTranslated = messages.every((message) => message.translatedMessage)
-      if (allTranslated || !targetLanguage || !messages) {
+      if (allTranslated || !targetLanguage) {
         return messages
       }
 
@@ -130,9 +129,6 @@ export class ChatbotTranslation {
         textList: {
           messages: messages.map(({ message }) => message),
           defaultMessages: defaultMessages.map(({ message }) => message),
-          defaultMessagesOptions: defaultMessages.flatMap((message) =>
-            message.options.map((option) => option.text),
-          ),
           defaultOptions: defaultOptions.map(({ text }) => text),
           lastMessage: options.lastMessage || [],
           alternativesHints: options.alternatives?.hints || [],
@@ -143,12 +139,6 @@ export class ChatbotTranslation {
 
       translatedTextsList.defaultMessages.forEach((message, index) => {
         defaultMessages[index].translatedMessage = message
-        defaultMessages[index].options = defaultMessages[index].options.map((option) => {
-          return {
-            ...option,
-            translatedText: translatedTextsList.defaultMessagesOptions[index],
-          }
-        })
       })
       translatedTextsList.defaultOptions.forEach((message, index) => {
         defaultOptions[index].translatedText = message

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

@@ -63,11 +63,8 @@ export type StartConversationProps = {
 }
 
 export type StartConversationFxData = {
-  currentChatData: {
-    key: string
-    messages: ConversationMessage[]
-  }
-  alternatives?: GetAlternativesResponse | null
+  key: string
+  messages: ConversationMessage[]
 } & StartConversationProps
 
 export enum MessageVariant {

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

@@ -2,7 +2,6 @@ import React, { ReactNode, useEffect, useState } from 'react'
 import {
   Animated,
   GestureResponderEvent,
-  Keyboard,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -63,8 +62,6 @@ export const Modal = ({
   useEffect(() => {
     if (isVisible) {
       modalModel.animation.show()
-      // It's important to blur drawboard text input when modal appears
-      Keyboard.dismiss()
     }
   }, [isVisible])
 

package/src/features/feedback/model/comments.ts

@@ -23,18 +23,18 @@ export class TeacherCommentsModel {
         state,
         assignmentId,
         problemId,
-        fn: (data) => ({
-          comments: data.comments.map((comment) => ({ ...comment, isRead: true })),
+        fn: data => ({
+          comments: data.comments.map(comment => ({ ...comment, isRead: true })),
           unreadMessagesCount: 0,
         }),
       }),
     )
-    .on(this.add, (state, { assignmentId, comment, isRead }) =>
+    .on(this.add, (state, { assignmentId, problemId, comment, isRead }) =>
       updateCommentsState({
         state,
         assignmentId,
-        problemId: comment.problemId,
-        fn: (data) => ({
+        problemId,
+        fn: data => ({
           comments: [...data.comments, comment],
           unreadMessagesCount: isRead ? data.unreadMessagesCount : data.unreadMessagesCount + 1,
         }),
@@ -45,7 +45,7 @@ export class TeacherCommentsModel {
         state,
         assignmentId,
         problemId,
-        fn: (data) => {
+        fn: data => {
           const commentToDelete = data.comments.find(({ _id }) => _id === commentId)
           if (!commentToDelete) return data
 
@@ -77,7 +77,7 @@ export class TeacherCommentsModel {
     sample({
       clock: this.add,
       source: { isOpen: $isOpen },
-      filter: ({ isOpen }, { problemId, comment }) => isOpen && comment.problemId === problemId,
+      filter: ({ isOpen }) => isOpen,
       fn: (_, { comment }) => ({
         ids: [comment._id],
       }),

package/src/features/feedback/model/model.ts

@@ -56,7 +56,7 @@ export class TeacherFeedbackModel {
           comments?.length === 1 && comments[0]._id === EMPTY_COMMENT_ID
         return !isOpen && isOnlyNoCommentsMessage
       },
-      fn: ({ assignmentId, problemId }) => ({
+      fn: ({ assignmentId, problemId }, comment) => ({
         assignmentId,
         problemId,
         commentId: EMPTY_COMMENT_ID,
@@ -76,7 +76,7 @@ export class TeacherFeedbackModel {
         const hasUnreadComments = comments.some(({ isRead }) => !isRead)
         return isOpen && hasUnreadComments
       },
-      fn: (source) => {
+      fn: source => {
         const comments = findCommentsByCredits(source)
         return { ids: comments.map(({ _id }) => _id) }
       },
@@ -97,8 +97,9 @@ export class TeacherFeedbackModel {
 
     sample({
       clock: this.sockets.commentDeleted,
-      fn: (comment) => ({
-        assignmentId: comment.exerciseId,
+      source: { assignmentId: credits.$assignmentId },
+      fn: ({ assignmentId }, comment) => ({
+        assignmentId,
         problemId: comment.problemId,
         commentId: comment._id,
       }),
@@ -112,11 +113,10 @@ export class TeacherFeedbackModel {
         problemId: credits.$problemId,
         isOpen: this.$isOpen,
       },
-      filter: ({ assignmentId }, comment) => assignmentId === comment.exerciseId,
       fn: ({ assignmentId, problemId, isOpen }, comment) => ({
         comment,
         assignmentId,
-        problemId,
+        problemId: comment.problemId,
         isRead: isOpen && comment.problemId === problemId,
       }),
       target: this.comments.add,

package/src/features/formulaSheet/components/FormulaSheet.tsx

@@ -43,11 +43,6 @@ export const FormulaSheet = forwardRef<ButtonRef | null, FormulaSheetProps>(
     const sheetFileBlob = useUnit(model.file.$blob)
     const isRequestPending = useUnit(model.api.getPDFFileBlobFx.pending)
 
-    const onPressHandler = () => {
-      model.modal.toggle()
-      onPress?.()
-    }
-
     useEffect(() => {
       model.file.setId(fileId ?? null)
     }, [fileId])
@@ -60,7 +55,10 @@ export const FormulaSheet = forwardRef<ButtonRef | null, FormulaSheetProps>(
           variant={ButtonVariant.SECONDARY}
           colorScheme={buttonColor}
           isActive={isOpen}
-          onPress={() => onPressHandler()}
+          onPress={() => {
+            model.modal.toggle()
+            onPress?.()
+          }}
           icon={<TheoryIcon color={isOpen ? COLORS.NEUTRAL_1 : undefined} size={20} />}
           style={style}
         />

package/src/features/problemSelector/components/ProblemSelectorButton.tsx

@@ -7,12 +7,11 @@ import {
   ButtonSize,
   ButtonStates,
   ButtonVariant,
-  FONT_FAMILY,
-  LockIcon,
   Typography,
 } from '@magmamath/react-native-ui'
 
-import { BADGE_COORDINATES, BUTTON_BORDER_WIDTH, BUTTON_SIZE, COLOR_SCHEME_MAP } from '../constants'
+import { BADGE_COORDINATES, BUTTON_SIZE, COLOR_SCHEME_MAP, ICON_SIZE } from '../constants'
+import { LockIcon } from '../../../shared/icons/LockIcon'
 
 import { ProblemSelectorButtonProps } from '../types'
 
@@ -38,16 +37,15 @@ export const ProblemSelectorButton = ({
         disabled={locked}
         icon={
           locked ? (
-            <LockIcon color={customColorScheme[ButtonStates.DISABLED]?.color} size={25} />
+            <LockIcon
+              height={ICON_SIZE.height}
+              width={ICON_SIZE.width}
+              color={customColorScheme[ButtonStates.DISABLED]?.color}
+            />
           ) : (
             <Typography
-              variant="h3"
-              style={[
-                styles.buttonText,
-                {
-                  color: customColorScheme[ButtonStates.DEFAULT]?.color,
-                },
-              ]}
+              variant="h2"
+              style={{ color: customColorScheme[ButtonStates.DEFAULT]?.color }}
             >
               {text ?? ''}
             </Typography>
@@ -78,11 +76,6 @@ const styles = StyleSheet.create({
   button: {
     width: BUTTON_SIZE,
     height: BUTTON_SIZE,
-    borderWidth: BUTTON_BORDER_WIDTH,
-  },
-  buttonText: {
-    textAlign: 'center',
-    fontWeight: 400,
-    fontFamily: FONT_FAMILY.buenosAires,
+    borderWidth: 2.75,
   },
 })

package/src/features/problemSelector/constants.ts

@@ -1,10 +1,9 @@
 import { ButtonColorPreset, ButtonStates, COLORS } from '@magmamath/react-native-ui'
-
 import { ProblemSelectorButtonState } from './types'
 
-export const BUTTON_SIZE = 49
-export const BUTTON_BORDER_WIDTH = 3
+export const BUTTON_SIZE = 49.5
 export const BADGE_COORDINATES = { top: 4, right: 4 }
+export const ICON_SIZE = { width: 23, height: 25 }
 export const PROBLEM_SELECTOR_CONTENT_WIDTH = 265
 
 export const PROBLEM_SELECTOR_BUTTON_STATE = {

package/src/index.ts

@@ -6,6 +6,3 @@ export * from './features/celebrations'
 export * from './features/endOfAssignment'
 export * from './features/formulaSheet'
 export * from './features/problemSelector'
-export * from './features/gifCelebrations'
-export * from './features/exampleSolution'
-export * from './shared/icons'

package/src/lib/effector/createControllerEffect.ts

@@ -1,66 +1,66 @@
 import { createEffect, type Effect } from 'effector'
 
 type LikeCanceledError = {
-  code?: string
+    code?: string
 }
 
 export type ControlledEffect<P, T> = Effect<P, T> & {
-  controller: AbortController
+    controller: AbortController
 }
 
 type ControlledRequestProps<P> = {
-  data: P
-  controller?: AbortController
-  abortAfter?: number
+    data: P
+    controller?: AbortController
+    abortAfter?: number
 }
 
 type RequestOptionalConfig = { signal?: AbortSignal }
 
 export function controlledRequest<R = void, P = void>(
-  request: (props: P, config?: RequestOptionalConfig) => Promise<R>,
+    request: (props: P, config?: RequestOptionalConfig) => Promise<R>,
 ) {
-  return async ({
-    data,
-    controller = new AbortController(),
-    abortAfter = 20000,
-  }: ControlledRequestProps<P>) => {
-    let timeout: ReturnType<typeof setTimeout> | null = null
+    return async ({
+        data,
+        controller = new AbortController(),
+        abortAfter = 20000,
+    }: ControlledRequestProps<P>) => {
+        let timeout: ReturnType<typeof setTimeout> | null = null
 
-    if (abortAfter) {
-      timeout = setTimeout(() => {
-        controller.abort('timeout')
-      }, abortAfter)
-    }
-
-    try {
-      const response = await request(data, { signal: controller?.signal })
-      if (timeout !== null) clearTimeout(timeout)
-      return response
-    } catch (error: unknown) {
-      if ((error as LikeCanceledError).code === 'ERR_CANCELED') {
-        if (controller.signal.reason === 'timeout') {
-          throw new Error('Request timed out')
+        if (abortAfter) {
+            timeout = setTimeout(() => {
+                controller.abort('timeout')
+            }, abortAfter)
         }
-        throw new Error('Request aborted manually')
-      }
 
-      throw error
+        try {
+            const response = await request(data, { signal: controller?.signal })
+            if (timeout !== null) clearTimeout(timeout)
+            return response
+        } catch (error: unknown) {
+            if ((error as LikeCanceledError).code === 'ERR_CANCELED') {
+                if (controller.signal.reason === 'timeout') {
+                    throw new Error('Request timed out')
+                }
+                throw new Error('Request aborted manually')
+            }
+
+            throw error
+        }
     }
-  }
 }
 
-export const createControllerEffect = <T, P = void>(
-  fn: (props: P, config?: RequestOptionalConfig) => Promise<T>,
+export const createControllerEffect = <T, P>(
+    fn: (props: P, config?: RequestOptionalConfig) => Promise<T>,
 ) => {
-  const request = controlledRequest<T, P>(fn)
-  const effect = createEffect((data: P) =>
-    request({ data, controller: effect.controller }),
-  ) as ControlledEffect<P, T>
-  effect.controller = new AbortController()
-
-  effect.fail.watch(() => {
+    const request = controlledRequest<T, P>(fn)
+    const effect = createEffect((data: P) =>
+        request({ data, controller: effect.controller }),
+    ) as ControlledEffect<P, T>
     effect.controller = new AbortController()
-  })
 
-  return effect
+    effect.fail.watch(() => {
+        effect.controller = new AbortController()
+    })
+
+    return effect
 }

package/src/lib/helpers/helpers.ts

@@ -1,6 +1,6 @@
 import { getText } from '../../shared/translation/helpers'
 
-export const noop = () => {}
+export const noop = () => {};
 
 export const generateRandomId = () =>
   Date.now().toString(36) + Math.random().toString(36).substring(2)

package/src/shared/icons/LockIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, { Path, Rect } from 'react-native-svg'
+import { COLORS } from '@magmamath/react-native-ui'
+
+import { IconProps } from './icon.types'
+
+export const LockIcon = ({ width = 23, height = 25, color = COLORS.NEUTRAL_6 }: IconProps) => (
+  <Svg width={width} height={height} viewBox="0.5 1 23 25" fill="none">
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.183 8.91H3.44A2.578 2.578 0 00.862 11.49v11.068a2.578 2.578 0 002.578 2.578h17.12a2.578 2.578 0 002.578-2.578V11.49a2.578 2.578 0 00-2.578-2.578h-.743c-.119-1.421-.391-3.307-1.374-4.897C17.304 2.172 15.303.864 12 .864c-3.304 0-5.304 1.308-6.443 3.15-.983 1.59-1.255 3.476-1.374 4.897zm2.008 0h11.618c-.12-1.303-.369-2.714-1.067-3.844C16.002 3.87 14.68 2.864 12 2.864c-2.68 0-4.003 1.006-4.742 2.202-.699 1.13-.947 2.54-1.067 3.845zm-2.75 2H20.56c.319 0 .578.26.578.579v11.068c0 .32-.26.578-.578.578H3.44a.578.578 0 01-.578-.578V11.49c0-.32.26-.578.578-.578z"
+      fill={color}
+    />
+  </Svg>
+)

package/src/shared/translation/constants.ts

@@ -2,13 +2,9 @@ import { Locale } from './types'
 import EN from './localization/en.json'
 import GB from './localization/gb.json'
 import SW from './localization/sw.json'
-import CA from './localization/ca.json'
-import SCT from './localization/sct.json'
 
 export const LOCALIZATION_CONFIGS = {
   [Locale.EN]: EN,
   [Locale.GB]: GB,
   [Locale.SW]: SW,
-  [Locale.CA]: CA,
-  [Locale.SCT]: SCT,
 }

package/src/shared/translation/localization/en.json

@@ -18,16 +18,5 @@
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
     "showError": "Show error"
-  },
-  "gifCelebrations": {
-    "greatStart": "Great start!",
-    "onTheWay": "On the way!",
-    "almostThere": "Almost there"
-  },
-  "exampleSolution": {
-    "exampleSolution": "Example solution",
-    "letMeThink": "Let me think...",
-    "aha": "Aha!",
-    "errorMessage": "Something went wrong with generating an example solution"
   }
 }

package/src/shared/translation/localization/gb.json

@@ -18,16 +18,5 @@
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
     "showError": "Show error"
-  },
-  "gifCelebrations": {
-    "greatStart": "Great start!",
-    "onTheWay": "On the way!",
-    "almostThere": "Almost there"
-  },
-  "exampleSolution": {
-    "exampleSolution": "Example solution",
-    "letMeThink": "Let me think...",
-    "aha": "Aha!",
-    "errorMessage": "Something went wrong with generating an example solution"
   }
 }

package/src/shared/translation/localization/sw.json

@@ -18,16 +18,5 @@
     "errorMessage": "Något gick snett! Försök igen",
     "howCanIHelp": "Hej! Hur kan jag hjälpa dig?",
     "showError": "Visa fel"
-  },
-  "gifCelebrations": {
-    "greatStart": "Bra start!",
-    "onTheWay": "På god väg!",
-    "almostThere": "Nästan där"
-  },
-  "exampleSolution": {
-    "exampleSolution": "Lösningsexempel",
-    "letMeThink": "Låt mig tänka...",
-    "aha": "Aha!",
-    "errorMessage": "Något gick snett med att generera en exempellösning"
   }
 }