@magmamath/students-features 0.7.1 → 0.8.0-rc.0

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

@@ -1,8 +1,19 @@
-import { attach, combine, createEffect, createEvent, restore, sample, type Store } from 'effector'
+import {
+  attach,
+  combine,
+  createEffect,
+  createEvent,
+  createStore,
+  restore,
+  sample,
+  type Store,
+} from 'effector'
+import { IS_WEB } from '@magmamath/react-native-ui'
 import {
   ChatbotContext,
   ChatbotModelProps,
   IChatDrawBoardAdapter,
+  ReinitConversationProps,
   SendHelpParams,
   SendHelpProps,
   SetHintMessageProps,
@@ -11,19 +22,17 @@ import {
 } from '../types/model.types'
 import { GetAlternativesResponse } from '../types/api.types'
 import { ChatbotAPI } from './ChatbotApi'
-import { ChatbotTranslation } from './translation'
+import { ChatbotTranslation } from './ChatbotTranslation'
 import { ChatTextToSpeechModel, T2SConfig } from './t2s'
 import { messagesHelper } from './messagesHelper'
 import { ChatBotThreadManager } from './ChatBotThreadManager'
 import { ChatsCacheModel, defaultChatData } from './ChatsCacheModel'
 import { ErrorSpottingModel } from '../errorSpotting/ErrorSpottingModel'
+import { ChatBotTextInput } from './ChatBotTextInput'
 import { withEvent } from '../../../lib/effector/withEvent'
 import { ChatBotTextManager } from './ChatBoxTextManager'
 import { ControlledSample } from '../../../lib/effector/ControlledSample'
-
-type ReinitConversationProps = {
-  key: string
-}
+import { transformAlternatives } from '../helpers'
 
 export class ChatbotModel {
   public readonly textManager = new ChatBotTextManager()
@@ -37,6 +46,7 @@ export class ChatbotModel {
   public readonly translation: ChatbotTranslation
   public readonly t2s: ChatTextToSpeechModel
   public readonly errorSpotting: ErrorSpottingModel
+  public readonly textInput = new ChatBotTextInput()
 
   private readonly setCurrentKey = createEvent<string>()
   public readonly $currentKey = restore(this.setCurrentKey, '')
@@ -72,13 +82,14 @@ export class ChatbotModel {
   constructor({ api, $key, threadMessagesLimit, settings = {} }: ChatbotModelProps) {
     this.api = new ChatbotAPI({ ...api, postMessage: this.threadManager.postMessage })
 
-    this.threadManager.setApi({ getHint: api.requestHint })
+    this.threadManager.setApi({ getHint: api.requestHint, sendMessage: api.sendMessage })
     if (threadMessagesLimit) {
       this.threadManager.setMessagesLimit(threadMessagesLimit)
     }
 
-    this.$alternatives = restore(this.api.getAlternativesFx.doneData, null)
-      .on(this.setAlternatives, (_, payload) => payload)
+    this.$alternatives = createStore<GetAlternativesResponse | null>(null)
+      .on(this.api.getAlternativesFx.doneData, (_, payload) => transformAlternatives(payload))
+      .on(this.setAlternatives, (_, payload) => transformAlternatives(payload))
       .reset(this.resetAlternatives)
 
     this.t2s = new ChatTextToSpeechModel({ api: this.api })
@@ -120,6 +131,11 @@ export class ChatbotModel {
       target: this.cache.update,
     })
 
+    sample({
+      clock: this.resetAlternatives,
+      target: this.textInput.reset,
+    })
+
     if (settings.closeOnKeyChange) {
       sample({
         clock: this.$currentKey.updates,
@@ -152,43 +168,70 @@ export class ChatbotModel {
         },
       ),
     })
+
+    this.api.getAlternativesFx.doneData.watch((alternatives) => {
+      // Use short text for another hint option if openChatEnabled
+      if (alternatives?.chatAccess && alternatives?.isOpenChatEnabled && IS_WEB) {
+        this.textManager.update((creator) => ({
+          anotherHintOption: creator.createOption('chat.giveHint'),
+        }))
+      }
+    })
   }
 
   private createSendHelpRequestFx() {
     const effect = attach({
-      source: [this.$currentKey, this.$context],
-      mapParams: (params: SendHelpParams, [key, context]) => ({
+      source: [this.$currentKey, this.$context, this.cache.$data],
+      mapParams: (params: SendHelpParams, [key, context, cache]) => ({
         message: params.message,
         translatedMessage: params.translatedMessage,
+        isFreeText: params.isFreeText,
+        cache,
         context,
         key,
       }),
-      effect: createEffect(async ({ message, translatedMessage, key, context }: SendHelpProps) => {
-        if (!context) throw new Error('Trying to send message in chat without context')
-        this.setLastMessageKey(key)
-        this.cache.addMessages(key, {
-          messages: [messagesHelper.createOwn({ message, translatedMessage })],
-        })
-
-        const response = await this.api.postMessageFx({
-          problem: context.problem,
-          language: context.language,
-          problemAnswer: context.problemAnswer,
-          answer: context.answer,
-          imageAltText: context.imageDescription,
-          imageCdnId: context.imageId,
-        })
-        const thread = this.threadManager.get(key)
-        const messages = [
-          messagesHelper.createAnswer(response, { isInitial: thread?.history.length === 1 }),
-        ]
-        if (response.endMessage) {
-          messages.push(messagesHelper.createLast(this.defaultMessages.endMessage))
-        }
-        const translatedMessages = await this.translation.applyTranslationFx(messages)
-
-        this.cache.addMessages(key, { messages: translatedMessages, thread })
-      }),
+      effect: createEffect(
+        async ({ message, translatedMessage, key, context, isFreeText, cache }: SendHelpProps) => {
+          if (!context) throw new Error('Trying to send message in chat without context')
+          this.setLastMessageKey(key)
+          this.cache.addMessages(key, {
+            messages: [messagesHelper.createOwn({ message, translatedMessage })],
+          })
+
+          // Request is overridden by ThreadManager.postMessage (delegates to sendMessage/getHint)
+          const response = await this.api.postMessageFx({
+            answer: context.answer,
+            answerOptions: context.answerOptions,
+            problemDescription: context.problem,
+            problemAnswer: context.problemAnswer,
+            language: context.language,
+            imageAltText: context.imageDescription,
+            imageCdnId: context.imageCdnId,
+            conversationId: cache[key].conversationId,
+            ...(isFreeText && { freeTextMessage: message }),
+          })
+
+          const thread = this.threadManager.get(key)
+          const messages = [
+            messagesHelper.createAnswer(response, { isInitial: thread?.history.length === 1 }),
+          ]
+
+          if (response.endMessage) {
+            messages.push(messagesHelper.createLast(this.defaultMessages.endMessage))
+          }
+
+          const translatedMessages = await this.translation.applyTranslationFx(messages)
+
+          this.cache.addMessages(key, {
+            messages: translatedMessages,
+            thread,
+          })
+
+          if (response.conversationId) {
+            this.cache.update({ key, data: { conversationId: response.conversationId } })
+          }
+        },
+      ),
     })
 
     sample({
@@ -272,6 +315,7 @@ export class ChatbotModel {
         this.api.postMessageFx.controller.abort()
         this.removeLastMessage()
       }
+      this.textInput.reset()
 
       this.t2s.stop()
       void this.t2s.reset()
@@ -284,6 +328,7 @@ export class ChatbotModel {
     this.resetAlternatives()
     this.threadManager.reset()
     this.errorSpotting.reset()
+    this.textInput.reset()
   })
 
   public unbindKey() {

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

@@ -0,0 +1,10 @@
+import { createEvent, restore } from 'effector'
+
+export class ChatBotTextInput {
+  public readonly setValue = createEvent<string>()
+  public readonly setIsFocused = createEvent<boolean>()
+  public readonly reset = createEvent()
+
+  public readonly $value = restore(this.setValue, '').reset(this.reset)
+  public readonly $isFocused = restore(this.setIsFocused, false).reset(this.reset)
+}

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

@@ -4,12 +4,16 @@ import {
   ChatHintResponse,
   PostMessagePayload,
   PostMessageResponse,
+  SendMessagePayload,
+  SendMessageResponse,
 } from '../types/api.types'
-import { ChatbotMessages, IChatDrawBoardAdapter } from '../types/model.types'
+import { ChatbotMessages, ChatRequestType, IChatDrawBoardAdapter } from '../types/model.types'
 import { CHAT_BOT_MODEL_DEFAULTS } from './constants'
+import { prepareChatRequestPayload } from '../helpers'
 
 type ThreadManagerApi = {
   getHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
+  sendMessage: (props: SendMessagePayload) => Promise<SendMessageResponse>
 }
 
 type ChatBotThreadManagerProps = {
@@ -63,35 +67,28 @@ export class ChatBotThreadManager {
     this.drawBoardAdapter = adapter
   }
 
-  public readonly postMessage = async ({
-    problemAnswer,
-    problem,
-    answer,
-    language,
-    imageAltText,
-    imageCdnId,
-  }: PostMessagePayload): Promise<PostMessageResponse> => {
+  public readonly postMessage = async (
+    payload: PostMessagePayload,
+  ): Promise<PostMessageResponse> => {
     if (!this.api) {
       throw new Error(
         'API is not set in ThreadManagersApi, pls provide API before sending requests',
       )
     }
     const threadItem = await this.getThreadItem()
+    const { type, data } = prepareChatRequestPayload(payload, threadItem)
 
-    const result = await this.api.getHint({
-      ...threadItem.getNextHintProps(),
-      correctAnswer: problemAnswer,
-      problemDescription: problem,
-      userAnswer: answer,
-      language,
-      imageAltText,
-      imageCdnId,
-    })
+    const result: SendMessageResponse | ChatHintResponse =
+      type === ChatRequestType.Freetext
+        ? await this.api.sendMessage(data)
+        : await this.api.getHint(data)
 
     threadItem.history.push(result.message)
-    if (result.errorStrokeIds) {
+
+    if ('errorStrokeIds' in result && result?.errorStrokeIds) {
       threadItem.setErrorStrokesIds(result.errorStrokeIds)
     }
+
     const nextOptions =
       threadItem.history.length < this.messagesLimit ? [this.defaultMessages.anotherHintOption] : []
 
@@ -100,6 +97,7 @@ export class ChatBotThreadManager {
       options: nextOptions,
       endMessage: !nextOptions.length,
       threadId: threadItem.id,
+      conversationId: result?.conversationId ?? null,
     }
   }
 

package/src/features/chatbot/model/{translation.ts → ChatbotTranslation.ts}

@@ -4,9 +4,11 @@ import {
   ApplyTranslationProps,
   TranslateBatchFxProps,
   TranslateRequestProps,
+  TranslateSingleMessageFxParams,
 } from '../types/translation.types'
 import { ChatbotContext, ChatbotMessages } from '../types/model.types'
 import { GetAlternativesResponse } from '../types/api.types'
+import { ConversationMessage } from '../types/units.types'
 import { decodeHTMLEntities } from '../helpers'
 import { ChatbotAPI } from './ChatbotApi'
 import {
@@ -14,9 +16,7 @@ import {
   addTranslationToOptions,
   getOptionsForTranslation,
 } from './translation.helpers'
-
 import { ChatsCacheModel } from './ChatsCacheModel'
-import { ConversationMessage } from '../types/units.types'
 
 type ChatbotTranslationProps = {
   api: ChatbotAPI
@@ -41,6 +41,7 @@ export class ChatbotTranslation {
   readonly $isTranslated = restore(this.setIsTranslated, false)
 
   public readonly translateAllMessagesFx
+  public readonly translateSingleMessageFx
   public readonly applyTranslationFx
 
   constructor({
@@ -77,6 +78,35 @@ export class ChatbotTranslation {
       effect: this.translateBatchFx,
     })
 
+    this.translateSingleMessageFx = attach({
+      source: { context: this.$context, isTranslationActive: this.$isTranslated },
+      mapParams: (message: string, { context, isTranslationActive }) => ({
+        message,
+        targetLanguage: context?.translationTargetLanguage ?? null,
+        isTranslationActive,
+      }),
+      effect: createEffect(
+        async ({
+          message,
+          targetLanguage,
+          isTranslationActive,
+        }: TranslateSingleMessageFxParams) => {
+          if (!isTranslationActive || !targetLanguage || !message.trim().length) return message
+
+          const response = await this.api.translateTextFx({
+            text: [message],
+            targetLanguage,
+          })
+
+          return (
+            response.data.translations.map(({ translatedText }) =>
+              decodeHTMLEntities(translatedText),
+            )?.[0] ?? ''
+          )
+        },
+      ),
+    })
+
     sample({
       clock: this.translateAllMessagesFx.doneData,
       filter: (_, translatedMessages) => !!translatedMessages.length,

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

@@ -5,28 +5,52 @@ export type GetAlternativesPayload = {
   assignmentClassGrade: number
 } | null
 
+export type AlternativesOptions = {
+  default: ChatAnswer[]
+  hints: ChatAnswer[]
+}
+
 export type GetAlternativesResponse = {
   chatAccess?: boolean
-  options: {
-    default: ChatAnswer[]
-    hints: ChatAnswer[]
-  }
+  isOpenChatEnabled?: boolean
+  version: string
+  options: AlternativesOptions
+}
+
+export type SendMessagePayload = {
+  problemDescription?: string
+  correctAnswer?: string | string[]
+  answerOptions?: string[]
+  altText?: string
+  language?: string
+  message: string
+  conversationId?: string
+}
+
+export type SendMessageResponse = {
+  message: string
+  conversationId?: string | null
 }
 
 export type PostMessagePayload = {
   language: string
   problemAnswer: string[]
+  problemDescription: string
   answer?: string | string[]
-  problem: string
+  answerOptions?: string[]
   imageAltText?: string
   imageCdnId?: string
+  freeTextMessage?: string
+  conversationId?: string | null
 }
 
 export type PostMessageResponse = {
   message: string
   options: ChatAnswer[]
-  endMessage?: boolean
   threadId: string
+  endMessage?: boolean
+  conversationId?: string | null
+  errorStrokeIds?: string[]
 }
 
 export type GoogleTranslatePayload = {
@@ -71,6 +95,7 @@ export type ChatHintPayload = {
 
 export type ChatHintResponse = {
   message: string
+  conversationId?: string | null
   errorStrokeIds?: string[]
 }
 export type ErrorSpottingPayload = {

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

@@ -12,9 +12,11 @@ import {
   GoogleTranslateResponse,
   PostMessagePayload,
   PostMessageResponse,
+  SendMessagePayload,
+  SendMessageResponse,
 } from './api.types'
 import { ExtendWithOptional } from '../../../lib/helpers/types'
-import { ChatAnswer, ConversationMessage, FullStrokeData } from './units.types'
+import { ChatAnswer, ChatItem, ConversationMessage, FullStrokeData } from './units.types'
 
 export type ChatbotMessages = {
   error: ConversationMessage
@@ -25,6 +27,7 @@ export type ChatbotMessages = {
 
 export type ChatbotApiRequests = {
   getAlternatives: (props: GetAlternativesPayload) => Promise<GetAlternativesResponse>
+  sendMessage: (props: SendMessagePayload) => Promise<SendMessageResponse>
   postMessage: (props: PostMessagePayload) => Promise<PostMessageResponse>
   postTranslateText: (props: GoogleTranslatePayload) => Promise<GoogleTranslateResponse>
   postTextToSpeech: (props: GoogleText2SpeechPayload) => Promise<GoogleText2SpeechResponse>
@@ -50,11 +53,14 @@ export type ChatbotModelProps = {
 export type SendHelpParams = {
   message: string
   translatedMessage?: string
+  isFreeText?: boolean
 }
 
 export type SendHelpProps = SendHelpParams & {
   key: string
   context: ChatbotContext | null
+  cache: Record<string, ChatItem>
+  isFreeText?: boolean
 }
 
 export type SetHintMessageProps = {
@@ -108,7 +114,34 @@ export type ChatbotContext = {
   problem: string
   problemAnswer: string[]
   answer?: string | string[]
+  answerOptions?: string[]
   translationTargetLanguage: string
   imageDescription?: string
-  imageId?: string
+  imageCdnId?: string
 }
+
+export type ReinitConversationProps = {
+  key: string
+}
+
+export enum ChatRequestType {
+  Freetext = 'sendMessage',
+  Hint = 'getHint',
+}
+
+type FreeTextWithConversationId = {
+  type: ChatRequestType.Freetext
+  data: Pick<SendMessagePayload, 'message' | 'conversationId'>
+}
+
+type FreeTextNewConversation = {
+  type: ChatRequestType.Freetext
+  data: SendMessagePayload
+}
+
+export type HintRequest = {
+  type: ChatRequestType.Hint
+  data: ChatHintPayload
+}
+
+export type ChatRequestPayload = FreeTextWithConversationId | FreeTextNewConversation | HintRequest

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

@@ -34,3 +34,9 @@ export type TranslateRequestProps<List extends Record<string, string[]>> = {
   textList: List
   targetLanguage: string
 }
+
+export type TranslateSingleMessageFxParams = {
+  message: string
+  targetLanguage: string | null
+  isTranslationActive: boolean
+}

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

@@ -35,4 +35,10 @@ export type ChatItem = {
   messages: ConversationMessage[]
   isAvailable: boolean
   currentThread: IThreadItem | null
+  conversationId?: string | null
+}
+
+export enum ChatInputMode {
+  FreeText = 1,
+  Option = 2,
 }

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

@@ -3,6 +3,8 @@ import React from 'react'
 import { COLORS, HeadingVariants, IS_WEB, 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 { ExampleSolutionModalParams } from '../types'
 import { QuestionSection } from './QuestionSection'
 import { SolutionSection } from './SolutionSection'
@@ -38,6 +40,8 @@ export const ExampleSolutionModalContent = ({
         />
         <SolutionSection status={status} answer={result?.answer} />
       </View>
+      <MessageBlock status={status} style={styles.messageBlock} />
+      <LavaIcon status={status} style={styles.lavaIconContainer} />
     </View>
   )
 }

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

@@ -0,0 +1,35 @@
+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'
+
+const LAVA_ICON_HEIGHT = 112
+
+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={LAVA_ICON_HEIGHT} />
+        </Animated.View>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,67 @@
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import React from 'react'
+import { COLORS, SPACING, Typography } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { $localization } from '../../../shared/translation'
+import Animated, {
+  LinearTransition,
+  useAnimatedStyle,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+
+type MessageBlockProps = {
+  status: ExampleSolutionStatuses
+  style?: StyleProp<ViewStyle>
+}
+
+export const MessageBlock = ({ status, style }: MessageBlockProps) => {
+  const localization = useUnit($localization)
+
+  const opacityAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: withDelay(
+        2000,
+        withTiming(status === ExampleSolutionStatuses.LOADING ? 1 : 0, { duration: 350 }),
+      ),
+    }
+  }, [status])
+
+  if (status === ExampleSolutionStatuses.CACHE) return null
+
+  return (
+    <Animated.View
+      layout={LinearTransition.duration(250)}
+      style={[styles.container, opacityAnimation, style]}
+    >
+      <Typography variant={'small'} numberOfLines={1}>
+        {status === ExampleSolutionStatuses.LOADING
+          ? localization.exampleSolution.letMeThink
+          : localization.exampleSolution.aha}
+      </Typography>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: SPACING[200],
+    backgroundColor: COLORS.NEUTRAL_3,
+    height: 44,
+    borderRadius: 12,
+    borderBottomRightRadius: 2,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: COLORS.NEUTRAL_5,
+
+    shadowColor: COLORS.NEUTRAL_10,
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1,
+
+    elevation: 3,
+  },
+})

package/src/shared/hooks/useKeyDownListener.ts

@@ -4,12 +4,14 @@ import { KeyboardKeys } from '../../lib/constants'
 
 export const useKeyDownListener = (
   callback: (event: KeyboardEvent) => void,
+  enabled = true,
   overrideKeys = [KeyboardKeys.ENTER],
 ) => {
   const callbackRef = useRef(callback)
   callbackRef.current = callback
 
   useEffect(() => {
+    if (!enabled) return
     const eventHandler = (event: KeyboardEvent) => {
       if (overrideKeys.includes(event.key as KeyboardKeys)) {
         event.preventDefault()
@@ -23,5 +25,5 @@ export const useKeyDownListener = (
     return () => {
       document.removeEventListener('keydown', eventHandler, true)
     }
-  }, [])
+  }, [enabled])
 }

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

@@ -13,11 +13,12 @@
   "time.yearsAgo": "years ago",
   "chat": {
     "anotherHint": "Give me another hint",
-    "giveHint": "Give me a hint",
+    "giveHint": "I need a hint",
     "answerAgain": "Answer again to get another hint!",
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
-    "showError": "Show error"
+    "showError": "Show error",
+    "inputPlaceholder": "Type..."
   },
   "gifCelebrations": {
     "greatStart": "Great start!",

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

@@ -13,11 +13,12 @@
   "time.yearsAgo": "years ago",
   "chat": {
     "anotherHint": "Give me another hint",
-    "giveHint": "Give me a hint",
+    "giveHint": "I need a hint",
     "answerAgain": "Answer again to get another hint!",
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
-    "showError": "Show error"
+    "showError": "Show error",
+    "inputPlaceholder": "Type..."
   },
   "gifCelebrations": {
     "greatStart": "Great start!",