@magmamath/students-features 0.6.0 → 0.6.1-2.rc-2

package/src/features/chatbot/components/Chatbot.tsx

@@ -1,11 +1,12 @@
-import { ComponentType, PropsWithChildren } from 'react'
+import React, { ComponentType, PropsWithChildren } from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
+
 import { ChatbotModel } from '../model/ChatBotModel'
 import { ChatbotMessages } from './ChatMessages/ChatbotMessages'
 import { ChatControls } from './ChatControls/ChatControls'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
-import React from 'react'
 import { ChatBotModelContext } from '../context/ChatBotModelContext'
+import { ColorScheme } from '../types/style.types'
 
 type ChatbotProps = {
   model: ChatbotModel
@@ -17,6 +18,7 @@ type ChatbotProps = {
   }
   ButtonWrapper: ComponentType<PropsWithChildren>
   iconSize?: { width: number; height: number } // TODO: use number instead
+  colorScheme?: ColorScheme
 }
 
 export const Chatbot = ({
@@ -26,6 +28,7 @@ export const Chatbot = ({
   textToSpeechConfig,
   ButtonWrapper,
   iconSize,
+  colorScheme = ColorScheme.Blue,
 }: ChatbotProps) => {
   const alternatives = useUnit(model.$alternatives)
   const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
@@ -42,6 +45,7 @@ export const Chatbot = ({
     <ChatBotModelContext.Provider value={model}>
       <ChatbotMessages
         model={model}
+        colorScheme={colorScheme}
         isHintFeedback={isHintFeedback}
         isTextToSpeechEnabled={isTextToSpeechEnabled}
       />

package/src/features/chatbot/components/ThreeDotsLoader/ThreeDotsLoader.tsx

@@ -1,7 +1,8 @@
-import React from 'react'
-import { useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { View, Animated, StyleSheet, Platform } from 'react-native'
 
+import { COLORS } from '@magmamath/react-native-ui'
+
 type ChatLoaderProps = {
   dotsCount?: number
   animationDuration?: number
@@ -11,12 +12,12 @@ type ChatLoaderProps = {
 export const ThreeDotsLoader = ({
   dotsCount = 3,
   animationDuration = 250,
-  backgroundColor = '#55ABE0',
+  backgroundColor = COLORS.PRIMARY_BLUE,
 }: ChatLoaderProps) => {
   const isWeb = Platform.OS === 'web'
   const animations = useMemo(
     () => [...Array(dotsCount)].map(() => new Animated.Value(0)),
-    [dotsCount]
+    [dotsCount],
   )
 
   useEffect(() => {
@@ -33,7 +34,7 @@ export const ThreeDotsLoader = ({
           duration: animationDuration,
           useNativeDriver: !isWeb,
         }),
-      ])
+      ]),
     )
 
     Animated.loop(Animated.parallel(animationsArray)).start()
@@ -50,11 +51,7 @@ export const ThreeDotsLoader = ({
         return (
           <Animated.View
             key={index}
-            style={[
-              styles.dot,
-              { transform: [{ translateY }] },
-              { backgroundColor },
-            ]}
+            style={[styles.dot, { transform: [{ translateY }] }, { backgroundColor }]}
           />
         )
       })}

package/src/features/chatbot/constants.ts

@@ -1,4 +1,7 @@
+import { ButtonColor, COLORS } from '@magmamath/react-native-ui'
 import { Platform } from 'react-native'
+import { MessageVariant } from './types/model.types'
+import { ColorScheme } from './types/style.types'
 
 export const AUDIO_CONFIG = {
   audioEncoding: 'LINEAR16',
@@ -36,3 +39,37 @@ export const KATEX_REPLACEMENTS = {
 export const KATEX_REPLACEMENTS_REVERSE = {
   __KATEX_DOLLAR_SYMBOL__: '$',
 } as const
+
+export const MESSAGE_COLORS_MAP = {
+  [ColorScheme.Blue]: {
+    [MessageVariant.RECEIVED]: {
+      background: COLORS.NEUTRAL_3,
+      icon: ButtonColor.BLUE,
+    },
+    [MessageVariant.SENT]: {
+      background: COLORS.PRIMARY_BLUE,
+      icon: ButtonColor.BLUE,
+    },
+  },
+  [ColorScheme.Yellow]: {
+    [MessageVariant.RECEIVED]: {
+      background: COLORS.NEUTRAL_3,
+      icon: ButtonColor.YELLOW,
+    },
+    [MessageVariant.SENT]: {
+      background: COLORS.PRIMARY_YELLOW,
+      icon: ButtonColor.YELLOW,
+    },
+  },
+}
+
+export const CONTROLS_COLORS_MAP = {
+  [ColorScheme.Blue]: {
+    hover: COLORS.PRIMARY_BLUE,
+    background: COLORS.PRIMARY_BLUE,
+  },
+  [ColorScheme.Yellow]: {
+    hover: COLORS.PRIMARY_YELLOW,
+    background: COLORS.PRIMARY_YELLOW,
+  },
+}

package/src/features/chatbot/errorSpotting/ErrorSpottingModel.ts

@@ -1,5 +1,5 @@
 import { ChatbotAPI } from '../model/ChatbotApi'
-import { createEvent, createStore, sample, createEffect, Store } from 'effector'
+import { createEvent, createStore, sample, createEffect, Store, restore } from 'effector'
 import { ChatItem, ConversationMessage } from '../types/units.types'
 import { ChatbotContext } from '../types/model.types'
 
@@ -35,7 +35,9 @@ export class ErrorSpottingModel {
   public readonly errorSpottingPressed = createEvent<ErrorSpottingPressedProps>()
   private readonly activeDataChanged = createEvent<ActiveErrorSpottingData | null>()
   public readonly spottingHidden = createEvent()
+  public readonly setIsEnabled = createEvent<boolean>()
 
+  public readonly $isEnabled = restore(this.setIsEnabled, false)
   public readonly $validationKey = createStore<string | null>(null)
   public readonly $activeData = createStore<ActiveErrorSpottingData | null>(null)
     .on(this.activeDataChanged, (_, payload) => payload)
@@ -147,4 +149,12 @@ export class ErrorSpottingModel {
     this.activeDataChanged(null)
     this.abortPendingRequest()
   }
+
+  public enable() {
+    this.setIsEnabled(true)
+  }
+
+  public disable() {
+    this.setIsEnabled(false)
+  }
 }

package/src/features/chatbot/index.ts

@@ -10,3 +10,4 @@ export type { PostMessageResponse } from './types/api.types'
 export { DefaultMessagesCreator } from './model/DefaultMessageCreator'
 export type { ChatAnswer } from './types/units.types'
 export type { ConversationMessage } from './types/units.types'
+export { ColorScheme } from './types/style.types'

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

@@ -1,13 +1,4 @@
-import {
-  attach,
-  combine,
-  createEffect,
-  createEvent,
-  createStore,
-  restore,
-  sample,
-  type Store,
-} from 'effector'
+import { attach, combine, createEffect, createEvent, restore, sample, type Store } from 'effector'
 import {
   ChatbotContext,
   ChatbotModelProps,
@@ -28,6 +19,7 @@ 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
@@ -46,7 +38,11 @@ export class ChatbotModel {
   public readonly t2s: ChatTextToSpeechModel
   public readonly errorSpotting: ErrorSpottingModel
 
-  public readonly $currentKey = createStore('')
+  private readonly setCurrentKey = createEvent<string>()
+  public readonly $currentKey = restore(this.setCurrentKey, '')
+
+  private unbindCurrentKey: null | (() => void) = null
+  private externalTranslationStateSync?: ControlledSample<boolean, void>
 
   readonly resetAlternatives = createEvent()
   readonly setAlternatives = createEvent<GetAlternativesResponse | null>()
@@ -133,6 +129,31 @@ 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() {
@@ -174,11 +195,11 @@ export class ChatbotModel {
     sample({
       clock: effect.fail,
       source: this.$currentChatData,
+      filter: (_, { error }) => error.message !== 'Request aborted manually',
       fn: ({ key, messages }) => ({
         key,
         data: { messages: [...messages, this.defaultMessages.error] },
       }),
-      filter: (_, { error }) => error.message !== 'Request aborted manually',
       target: this.cache.update,
     })
 
@@ -186,21 +207,28 @@ export class ChatbotModel {
   }
 
   public bindKey($store: Store<string>) {
-    sample({
-      source: $store,
-      target: this.$currentKey,
+    this.unbindCurrentKey?.()
+    this.unbindCurrentKey = $store.watch((value) => {
+      this.setCurrentKey(value)
+      this.threadManager.setCurrentKey(value)
     })
-    this.threadManager.bindKeyStore($store)
+
+    const initialValue = $store.getState()
+    this.setCurrentKey(initialValue)
+    this.threadManager.setCurrentKey(initialValue)
     return this
   }
 
-  public bindExternalTranslationState($store: Store<boolean>) {
-    sample({
-      source: $store,
-      clock: [this.$currentKey.updates, this.startConversation.done],
-      filter: (isTranslated) => !!isTranslated,
-      target: this.translation.translateAllMessagesFx,
-    })
+  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,
+      })
+    }
     return this
   }
 
@@ -215,27 +243,9 @@ 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 })
@@ -277,4 +287,18 @@ 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,5 +1,4 @@
 import { ThreadItem } from './ThreadItem'
-import { Store } from 'effector'
 import {
   ChatHintPayload,
   ChatHintResponse,
@@ -27,7 +26,6 @@ export class ChatBotThreadManager {
 
   private messagesLimit
   private currentKey = ''
-  private currentBinding: null | (() => void) = null
 
   private readonly defaultMessages
 
@@ -43,14 +41,6 @@ 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)
@@ -128,4 +118,8 @@ export class ChatBotThreadManager {
     this.api = api
     return this
   }
+
+  public setCurrentKey(key: string) {
+    this.currentKey = key
+  }
 }

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

@@ -10,9 +10,22 @@ export class ChatBotTextManager {
   }).bindToLanguageChanged($localization.updates)
 
   public readonly messages: ChatbotMessages = {
-    error: this.messagesCreator.createMessage('chat.errorMessage'),
+    error: this.messagesCreator.createMessage('chat.errorMessage', {
+      options: [this.messagesCreator.createOption('chat.giveHint')],
+    }),
     start: this.messagesCreator.createMessage('chat.howCanIHelp'),
     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

@@ -8,6 +8,7 @@ type ChatMessage = Omit<PostMessageResponse, 'threadId'> & {
 }
 
 type DefaultMessageSettings = {
+  options?: ChatAnswer[]
   isOwn?: boolean
 }
 
@@ -23,11 +24,11 @@ export class DefaultMessagesCreator<K extends string> {
     this.getter = textGetter
   }
 
-  public createMessage(key: K, { isOwn = false }: DefaultMessageSettings = {}) {
+  public createMessage(key: K, { isOwn = false, options = [] }: DefaultMessageSettings = {}) {
     const message: ChatMessage = {
       id: this.list.size.toString(),
       message: this.getter(key),
-      options: [],
+      options,
       isOwnMessage: isOwn,
     }
     this.list.set(message, key)
@@ -37,6 +38,7 @@ 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/constants.ts

@@ -1,5 +1,3 @@
-import { ChatbotMessages } from '../types/model.types'
-
 export const CHAT_BOT_MODEL_DEFAULTS = {
   THREAD_MESSAGES_LIMIT: 3,
 }

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

@@ -79,6 +79,7 @@ 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,
@@ -117,7 +118,7 @@ export class ChatbotTranslation {
   private readonly translateBatchFx = createEffect(
     async ({ messages, alternatives, targetLanguage }: TranslateBatchFxProps) => {
       const allTranslated = messages.every((message) => message.translatedMessage)
-      if (allTranslated || !targetLanguage) {
+      if (allTranslated || !targetLanguage || !messages) {
         return messages
       }
 
@@ -129,6 +130,9 @@ 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 || [],
@@ -139,6 +143,12 @@ 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,8 +63,11 @@ export type StartConversationProps = {
 }
 
 export type StartConversationFxData = {
-  key: string
-  messages: ConversationMessage[]
+  currentChatData: {
+    key: string
+    messages: ConversationMessage[]
+  }
+  alternatives?: GetAlternativesResponse | null
 } & StartConversationProps
 
 export enum MessageVariant {

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

@@ -0,0 +1,4 @@
+export enum ColorScheme {
+  Blue = 'blue',
+  Yellow = 'yellow',
+}

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

@@ -2,6 +2,7 @@ import React, { ReactNode, useEffect, useState } from 'react'
 import {
   Animated,
   GestureResponderEvent,
+  Keyboard,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -62,6 +63,8 @@ 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/exampleSolution/ExampleSolutionModal.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { BaseModal, SPACING } from '@magmamath/react-native-ui'
+import { ExampleSolutionModalContent } from './components/ExampleSolutionModalContent'
+import { ExampleSolutionModalParams } from './types'
+
+type ExampleSolutionModalComponentProps = {
+  modal: {
+    closeModal: () => void
+    params: ExampleSolutionModalParams
+  }
+}
+
+export const ExampleSolutionModal = ({
+  modal: { closeModal, params },
+}: ExampleSolutionModalComponentProps) => (
+  <BaseModal
+    style={{
+      container: { paddingHorizontal: SPACING[800] },
+    }}
+    onClose={closeModal}
+    content={
+      <ExampleSolutionModalContent
+        model={params.model}
+        payload={params.payload}
+        problemId={params.problemId}
+      />
+    }
+  />
+)

package/src/features/exampleSolution/components/ExampleSolutionModalContent.tsx

@@ -0,0 +1,78 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { $localization } from '../../../shared/translation'
+import { MessageBlock } from './MessageBlock'
+import { LavaIcon } from './LavaIcon'
+import { ExampleSolutionPayload } from '../types'
+import { ExampleSolutionModel } from '../model/ExampleSolution.model'
+import { QuestionSection } from './QuestionSection'
+import { SolutionSection } from './SolutionSection'
+import { useExampleSolution } from '../hooks/useExampleSolution'
+
+type ExampleSolutionModalContentProps = {
+  model: ExampleSolutionModel
+  payload: ExampleSolutionPayload
+  problemId: string
+}
+
+export const ExampleSolutionModalContent = ({
+  model,
+  payload,
+  problemId,
+}: ExampleSolutionModalContentProps) => {
+  const { result, status } = useExampleSolution({ model, payload, problemId })
+  const localisation = useUnit($localization)
+
+  return (
+    <View style={styles.container}>
+      <Typography align="center" variant={HeadingVariants.H2} style={{ color: COLORS.NEUTRAL_9 }}>
+        {localisation.exampleSolution.exampleSolution}
+      </Typography>
+      <View style={styles.content}>
+        <QuestionSection status={status} question={result?.question} />
+        <SolutionSection status={status} answer={result?.answer} />
+      </View>
+      <MessageBlock status={status} style={styles.messageBlock} />
+      <LavaIcon status={status} style={styles.lavaIconContainer} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 532,
+    height: 369,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: SPACING[400],
+    gap: SPACING[400],
+  },
+  solutionContainer: {
+    width: 351,
+    overflow: 'hidden',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+  lavaIconContainer: {
+    position: 'absolute',
+    bottom: -54,
+    right: -50,
+  },
+  loaderContainer: {
+    paddingTop: 34,
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  messageBlock: {
+    position: 'absolute',
+    right: 38,
+    bottom: -22,
+  },
+})

package/src/features/exampleSolution/components/LavaIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { ExcitedLavaIcon } from '../../../shared/icons/ExcitedLavaIcon'
+import { LavaIconInGlasses } from '../../../shared/icons'
+import Animated, { FadeIn, useAnimatedStyle, withTiming } from 'react-native-reanimated'
+import { StyleProp, ViewStyle } from 'react-native'
+import { ExampleSolutionStatuses } from '../constants'
+
+type LavaIconProps = {
+  status: ExampleSolutionStatuses
+  style?: StyleProp<ViewStyle>
+}
+
+export const LavaIcon = ({ status, style }: LavaIconProps) => {
+  const opacityAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(status === ExampleSolutionStatuses.LOADING ? 1 : 0, { duration: 500 }),
+    }
+  }, [status])
+
+  return (
+    <>
+      <Animated.View style={[style, opacityAnimation]}>
+        <LavaIconInGlasses height={112} />
+      </Animated.View>
+
+      {status !== ExampleSolutionStatuses.LOADING && (
+        <Animated.View style={style} entering={FadeIn}>
+          <ExcitedLavaIcon height={112} />
+        </Animated.View>
+      )}
+    </>
+  )
+}