@magmamath/students-features 0.6.14-rc.2 → 0.6.14-rc.21

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

@@ -1,8 +1,10 @@
 import { attach, combine, createEffect, createEvent, restore, sample, type Store } from 'effector'
+import { IS_WEB } from '@magmamath/react-native-ui'
 import {
   ChatbotContext,
   ChatbotModelProps,
   IChatDrawBoardAdapter,
+  ReinitConversationProps,
   SendHelpParams,
   SendHelpProps,
   SetHintMessageProps,
@@ -17,14 +19,11 @@ 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
-}
-
 export class ChatbotModel {
   public readonly textManager = new ChatBotTextManager()
   private readonly defaultMessages = this.textManager.messages
@@ -37,6 +36,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, '')
@@ -46,7 +46,7 @@ export class ChatbotModel {
 
   readonly resetAlternatives = createEvent()
   readonly setAlternatives = createEvent<GetAlternativesResponse | null>()
-  readonly $alternatives: Store<GetAlternativesResponse | null>
+  readonly $alternatives
 
   readonly setIsOpen = createEvent<boolean>()
   readonly toggleOpen = createEvent()
@@ -72,7 +72,7 @@ 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)
     }
@@ -122,6 +122,11 @@ export class ChatbotModel {
       target: this.cache.update,
     })
 
+    sample({
+      clock: this.resetAlternatives,
+      target: this.textInput.reset
+    })
+
     if (settings.closeOnKeyChange) {
       sample({
         clock: this.$currentKey.updates,
@@ -154,42 +159,69 @@ export class ChatbotModel {
         },
       ),
     })
+
+    this.$alternatives.updates.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,
-        })
-        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 })],
+          })
+
+          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({
@@ -273,6 +305,7 @@ export class ChatbotModel {
         this.api.postMessageFx.controller.abort()
         this.removeLastMessage()
       }
+      this.textInput.reset()
       this.errorSpotting.abortPendingRequest()
 
       this.t2s.stop()
@@ -286,6 +319,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,15 @@ import {
   ChatHintResponse,
   PostMessagePayload,
   PostMessageResponse,
+  SendMessagePayload,
+  SendMessageResponse,
 } from '../types/api.types'
 import { ChatbotMessages, IChatDrawBoardAdapter } from '../types/model.types'
 import { CHAT_BOT_MODEL_DEFAULTS } from './constants'
 
 type ThreadManagerApi = {
   getHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
+  sendMessage: (props: SendMessagePayload) => Promise<SendMessageResponse>
 }
 
 type ChatBotThreadManagerProps = {
@@ -65,10 +68,14 @@ export class ChatBotThreadManager {
 
   public readonly postMessage = async ({
     problemAnswer,
-    problem,
+    problemDescription,
     answer,
+    answerOptions,
     language,
     imageAltText,
+    imageCdnId,
+    freeTextMessage,
+    conversationId,
   }: PostMessagePayload): Promise<PostMessageResponse> => {
     if (!this.api) {
       throw new Error(
@@ -77,14 +84,32 @@ export class ChatBotThreadManager {
     }
     const threadItem = await this.getThreadItem()
 
-    const result = await this.api.getHint({
-      ...threadItem.getNextHintProps(),
-      correctAnswer: problemAnswer,
-      problemDescription: problem,
-      userAnswer: answer,
-      language,
-      imageAltText,
-    })
+    let result
+
+    if (freeTextMessage) {
+      const payload = conversationId
+        ? { conversationId, message: freeTextMessage }
+        : {
+            message: freeTextMessage,
+            problemDescription,
+            correctAnswer: problemAnswer,
+            language,
+            ...(imageCdnId && { imageCdnId }),
+            ...(imageAltText && { altText: imageAltText }),
+            ...(!!answerOptions?.length && { answerOptions }),
+          }
+      result = await this.api.sendMessage(payload)
+    } else {
+      result = await this.api.getHint({
+        ...threadItem.getNextHintProps(),
+        correctAnswer: problemAnswer,
+        problemDescription,
+        userAnswer: answer,
+        language,
+        ...(imageCdnId && { imageCdnId }),
+        ...(imageAltText && { imageAltText }),
+      })
+    }
 
     threadItem.history.push(result.message)
     const nextOptions =
@@ -95,6 +120,7 @@ export class ChatBotThreadManager {
       options: nextOptions,
       endMessage: !nextOptions.length,
       threadId: threadItem.id,
+      conversationId: result?.conversationId ?? null,
     }
   }
 

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

@@ -31,7 +31,7 @@ type ChatbotTranslationProps = {
 }
 
 export class ChatbotTranslation {
-  private readonly api
+  public readonly api
   private readonly $key
   private readonly $context
   private readonly defaultMessages

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

@@ -12,21 +12,43 @@ export type AlternativesOptions = {
 
 export type GetAlternativesResponse = {
   chatAccess?: boolean
+  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
+  conversationId?: string | null
   threadId: string
 }
 
@@ -66,11 +88,13 @@ export type ChatHintPayload = {
   previousHint?: string
   language: string
   imageAltText?: string
+  imageCdnId?: string
   drawBoardText?: string
 }
 
 export type ChatHintResponse = {
   message: string
+  conversationId?: string | null
 }
 export type ErrorSpottingPayload = {
   strokes: FullStrokeData[]

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>
@@ -47,11 +50,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 = {
@@ -105,6 +111,15 @@ export type ChatbotContext = {
   problem: string
   problemAnswer: string[]
   answer?: string | string[]
+  answerOptions?: string[]
   translationTargetLanguage: string
   imageDescription?: string
+  imageCdnId?: string
 }
+
+export type ReinitConversationProps = {
+  key: string
+}
+
+
+

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

@@ -34,4 +34,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/ExampleSolutionModal.tsx

@@ -18,12 +18,6 @@ export const ExampleSolutionModal = ({
       container: { paddingHorizontal: SPACING[800] },
     }}
     onClose={closeModal}
-    content={
-      <ExampleSolutionModalContent
-        model={params.model}
-        payload={params.payload}
-        cacheKey={params.cacheKey}
-      />
-    }
+    content={<ExampleSolutionModalContent params={params} />}
   />
 )

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

@@ -1,6 +1,6 @@
 import { StyleSheet, View } from 'react-native'
 import React from 'react'
-import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+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'
@@ -10,21 +10,34 @@ import { QuestionSection } from './QuestionSection'
 import { SolutionSection } from './SolutionSection'
 import { useExampleSolution } from '../hooks/useExampleSolution'
 
+type ExampleSolutionModalContentProps = {
+  params: ExampleSolutionModalParams
+}
+
+const CONTAINER_HEIGHT = 593
+
 export const ExampleSolutionModalContent = ({
-  model,
-  payload,
-  cacheKey,
-}: ExampleSolutionModalParams) => {
+  params: { model, payload, cacheKey },
+}: ExampleSolutionModalContentProps) => {
   const { result, status } = useExampleSolution({ model, payload, cacheKey })
   const localization = useUnit($localization)
 
   return (
-    <View style={styles.container}>
+    <View
+      style={[
+        styles.container,
+        IS_WEB ? { maxHeight: CONTAINER_HEIGHT } : { height: CONTAINER_HEIGHT },
+      ]}
+    >
       <Typography align="center" variant={HeadingVariants.H2} style={{ color: COLORS.NEUTRAL_9 }}>
         {localization.exampleSolution.exampleSolution}
       </Typography>
       <View style={styles.content}>
-        <QuestionSection status={status} question={result?.question} />
+        <QuestionSection
+          status={status}
+          question={result?.question}
+          renderKatexComponent={model.renderKatexComponent}
+        />
         <SolutionSection status={status} answer={result?.answer} />
       </View>
       <MessageBlock status={status} style={styles.messageBlock} />
@@ -36,7 +49,6 @@ export const ExampleSolutionModalContent = ({
 const styles = StyleSheet.create({
   container: {
     width: 880,
-    height: 593,
   },
   content: {
     flex: 1,
@@ -53,8 +65,8 @@ const styles = StyleSheet.create({
   },
   lavaIconContainer: {
     position: 'absolute',
-    bottom: -54,
-    right: -50,
+    bottom: -24,
+    right: -26,
   },
   loaderContainer: {
     paddingTop: 34,
@@ -65,7 +77,7 @@ const styles = StyleSheet.create({
   },
   messageBlock: {
     position: 'absolute',
-    right: 38,
-    bottom: -22,
+    right: 58,
+    bottom: -12,
   },
 })

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

@@ -1,20 +1,23 @@
-import { StyleSheet, View, ScrollView } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import React from 'react'
-import { COLORS, Loader, LoaderColor, SPACING, Typography } from '@magmamath/react-native-ui'
+import { COLORS, Loader, LoaderColor, SPACING } from '@magmamath/react-native-ui'
 import Animated, { FadeOut } from 'react-native-reanimated'
 import { ExampleSolutionStatuses } from '../constants'
 
 type QuestionSectionProps = {
   question?: string
   status: ExampleSolutionStatuses
+  renderKatexComponent: (katexString: string) => React.ReactNode
 }
 
-export const QuestionSection = ({ question, status }: QuestionSectionProps) => {
+export const QuestionSection = ({
+  question,
+  status,
+  renderKatexComponent,
+}: QuestionSectionProps) => {
   return (
     <View style={styles.container}>
-      <ScrollView style={styles.scrollView}>
-        <Typography>{question}</Typography>
-      </ScrollView>
+      {question && <View style={styles.katexContainer}>{renderKatexComponent(question)}</View>}
       {status === ExampleSolutionStatuses.LOADING && (
         <Animated.View exiting={FadeOut} style={styles.loaderContainer}>
           <Loader size="large" color={LoaderColor.BLUE} />
@@ -28,12 +31,13 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  scrollView: {
+  katexContainer: {
     flex: 1,
   },
   loaderContainer: {
     paddingTop: 34,
     position: 'absolute',
+    zIndex: 100,
     width: '100%',
     height: '100%',
     backgroundColor: COLORS.NEUTRAL_1,

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

@@ -1,69 +1,112 @@
-import { StyleSheet, View, Image, Text } from 'react-native'
+import {
+  StyleSheet,
+  View,
+  Image,
+  ImageBackground,
+  ScrollView,
+  useWindowDimensions,
+} from 'react-native'
 import React from 'react'
 import { COLORS, IS_WEB, SPACING } from '@magmamath/react-native-ui'
 import Animated, { FadeIn } from 'react-native-reanimated'
 import { ExampleSolutionStatuses } from '../constants'
-import gridImage from '../assets/grid.png'
+import gridImage from '../assets/grid.webp'
 
 type SolutionSectionProps = {
   answer?: string
   status: ExampleSolutionStatuses
 }
 
+const CONTAINER_SIZES = {
+  width: 489,
+  height: 543,
+}
+const BORDER_WIDTH = 1
+const CONTAINER_HEIGHT_OFFSET = 160
+
 const gridImagePath = !IS_WEB ? Image.resolveAssetSource(gridImage).uri : gridImage
 
 export const SolutionSection = ({ answer, status }: SolutionSectionProps) => {
+  const { height } = useWindowDimensions()
+
   const shouldShowAnswer =
     answer &&
     (status === ExampleSolutionStatuses.DONE_DATA || status === ExampleSolutionStatuses.CACHE)
 
   return (
-    <View style={styles.container}>
-      <Image
-        source={{ uri: gridImagePath }}
-        style={[styles.gridImage, IS_WEB && styles.gridImageWeb]}
-      />
-      {shouldShowAnswer && (
-        <Animated.ScrollView
-          style={styles.solutionScroll}
-          contentContainerStyle={styles.solutionScrollContent}
-          entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
-        >
-          <Text style={styles.solutionText}>{answer}</Text>
-        </Animated.ScrollView>
-      )}
+    <View style={[styles.container, IS_WEB && { maxHeight: height - CONTAINER_HEIGHT_OFFSET }]}>
+      <ScrollView
+        style={styles.solutionScroll}
+        contentContainerStyle={styles.solutionScrollContent}
+        bounces
+      >
+        {IS_WEB ? (
+          <ImageBackground
+            resizeMode="repeat"
+            style={[styles.gridImageWeb]}
+            source={{ uri: gridImagePath }}
+          >
+            {shouldShowAnswer && (
+              <Animated.Text
+                entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
+                style={styles.solutionText}
+              >
+                {answer}
+              </Animated.Text>
+            )}
+          </ImageBackground>
+        ) : (
+          <>
+            <ImageBackground
+              resizeMode="repeat"
+              style={styles.gridImageRn}
+              source={{ uri: gridImagePath }}
+            />
+            {shouldShowAnswer && (
+              <Animated.Text
+                entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
+                style={styles.solutionText}
+              >
+                {answer}
+              </Animated.Text>
+            )}
+          </>
+        )}
+      </ScrollView>
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    width: 500,
+    width: CONTAINER_SIZES.width,
+    height: CONTAINER_SIZES.height,
     overflow: 'hidden',
     borderRadius: 8,
-    borderWidth: 1,
+    borderWidth: BORDER_WIDTH,
     borderColor: COLORS.NEUTRAL_5,
   },
-  gridImage: {
+  gridImageRn: {
+    top: -327,
     width: '100%',
-    height: '100%',
-    resizeMode: 'cover',
-    aspectRatio: 28 / 8,
+    height: '150%',
+    position: 'absolute',
   },
   gridImageWeb: {
-    transform: [{ scale: 3.5 }],
-  },
-  solutionScroll: {
-    position: 'absolute',
     width: '100%',
     height: '100%',
   },
+  solutionScroll: {
+    flex: 1,
+  },
   solutionScrollContent: {
-    paddingHorizontal: SPACING[800],
-    paddingVertical: SPACING[400],
+    minHeight: CONTAINER_SIZES.height - BORDER_WIDTH * 2,
+    width: '100%',
   },
   solutionText: {
     fontFamily: 'PlaypenSans-Light',
-    fontSize: 22,
+    fontSize: 28,
+    marginHorizontal: SPACING[800],
+    marginVertical: SPACING[400],
   },
 })