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

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

@@ -2,11 +2,12 @@ import React, { ComponentType, PropsWithChildren } from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 
 import { ChatbotModel } from '../model/ChatBotModel'
-import { ChatbotMessages } from './ChatMessages/ChatbotMessages'
+import { Chat } from './Chat/Chat'
 import { ChatControls } from './ChatControls/ChatControls'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
 import { ChatBotModelContext } from '../context/ChatBotModelContext'
 import { ColorScheme } from '../types/style.types'
+import { ChatInputMode } from '../types/units.types'
 
 type ChatbotProps = {
   model: ChatbotModel
@@ -16,7 +17,8 @@ type ChatbotProps = {
     voice: typeof DEFAULT_VOICE
     audioConfig: typeof AUDIO_CONFIG
   }
-  ButtonWrapper: ComponentType<PropsWithChildren>
+  inputMode?: ChatInputMode
+  ButtonWrapper?: ComponentType<PropsWithChildren>
   iconSize?: { width: number; height: number } // TODO: use number instead
   colorScheme?: ColorScheme
 }
@@ -43,7 +45,7 @@ export const Chatbot = ({
 
   return (
     <ChatBotModelContext.Provider value={model}>
-      <ChatbotMessages
+      <Chat
         model={model}
         colorScheme={colorScheme}
         isHintFeedback={isHintFeedback}

package/src/features/chatbot/constants.ts

@@ -2,6 +2,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'
+import { ANIMATION_DURATION } from '../gifCelebrations/constants'
 
 export const AUDIO_CONFIG = {
   audioEncoding: 'LINEAR16',
@@ -44,20 +45,24 @@ export const MESSAGE_COLORS_MAP = {
   [ColorScheme.Blue]: {
     [MessageVariant.RECEIVED]: {
       background: COLORS.NEUTRAL_3,
+      border: COLORS.NEUTRAL_3,
       icon: ButtonColor.BLUE,
     },
     [MessageVariant.SENT]: {
       background: COLORS.PRIMARY_BLUE,
+      border: COLORS.PRIMARY_BLUE,
       icon: ButtonColor.BLUE,
     },
   },
   [ColorScheme.Yellow]: {
     [MessageVariant.RECEIVED]: {
       background: COLORS.NEUTRAL_3,
+      border: COLORS.NEUTRAL_3,
       icon: ButtonColor.YELLOW,
     },
     [MessageVariant.SENT]: {
       background: COLORS.PRIMARY_YELLOW,
+      border: COLORS.PRIMARY_YELLOW,
       icon: ButtonColor.YELLOW,
     },
   },
@@ -73,3 +78,5 @@ export const CONTROLS_COLORS_MAP = {
     background: COLORS.PRIMARY_YELLOW,
   },
 }
+
+export const HOVER_ANIMATION_DURATION = 200

package/src/features/chatbot/helpers.ts

@@ -1,5 +1,9 @@
 // https://stackoverflow.com/questions/56575859/google-translate-api-does-not-return-apostrophe-as-apostrophe-in-python
 import { KATEX_REPLACEMENTS, KATEX_REPLACEMENTS_REVERSE } from './constants'
+import { GetAlternativesResponse, PostMessagePayload } from './types/api.types'
+import { t } from '../../shared/translation'
+import { ThreadItem } from './model/ThreadItem'
+import { ChatRequestPayload, ChatRequestType } from './types/model.types'
 
 export const decodeHTMLEntities = (input: string) => {
   return input.replace(/'/g, "'")
@@ -10,10 +14,75 @@ export const replaceKatexSyntax = (texts: string[], reverse = false) => {
     ? Object.entries(KATEX_REPLACEMENTS_REVERSE)
     : Object.entries(KATEX_REPLACEMENTS)
 
-  return texts.map(text =>
+  return texts.map((text) =>
     replacements.reduce(
       (newText, [pattern, placeholder]) => newText.replace(new RegExp(pattern, 'g'), placeholder),
       text,
     ),
   )
 }
+
+export const transformAlternatives = (payload: GetAlternativesResponse | null) => {
+  if (!payload) return payload
+
+  return {
+    ...payload,
+    options: {
+      ...payload.options,
+      hints: [
+        {
+          text: payload.isOpenChatEnabled ? t('chat.giveHint') : t('chat.anotherHint'),
+          promptKey: payload.options.hints[0].promptKey,
+          translatedText: payload.options.hints[0].translatedText,
+        },
+      ],
+    },
+  } as GetAlternativesResponse
+}
+
+export function prepareChatRequestPayload(
+  payload: PostMessagePayload,
+  threadItem: ThreadItem,
+): ChatRequestPayload {
+  const {
+    conversationId,
+    freeTextMessage,
+    problemDescription,
+    problemAnswer,
+    language,
+    imageCdnId,
+    imageAltText,
+    answerOptions,
+    answer,
+  } = payload
+
+  if (freeTextMessage) {
+    return conversationId
+      ? { type: ChatRequestType.Freetext, data: { conversationId, message: freeTextMessage } }
+      : {
+          type: ChatRequestType.Freetext,
+          data: {
+            message: freeTextMessage,
+            correctAnswer: problemAnswer,
+            problemDescription,
+            language,
+            ...(imageCdnId && { imageCdnId }),
+            ...(imageAltText && { altText: imageAltText }),
+            ...(!!answerOptions?.length && { answerOptions }),
+          },
+        }
+  }
+
+  return {
+    type: ChatRequestType.Hint,
+    data: {
+      ...threadItem.getNextHintProps(),
+      correctAnswer: problemAnswer,
+      problemDescription,
+      userAnswer: answer,
+      language,
+      ...(imageCdnId && { imageCdnId }),
+      ...(imageAltText && { altText: imageAltText }),
+    },
+  }
+}

package/src/features/chatbot/index.ts

@@ -9,5 +9,6 @@ export {
 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,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,
 }