@magmamath/students-features 0.6.14-rc.9 → 0.6.15

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

@@ -5,7 +5,6 @@ import {
   IChatDrawBoardAdapter,
   SendHelpParams,
   SendHelpProps,
-  SendMessageProps,
   SetHintMessageProps,
   StartConversationFxData,
   StartConversationProps,
@@ -21,9 +20,6 @@ import { ErrorSpottingModel } from '../errorSpotting/ErrorSpottingModel'
 import { withEvent } from '../../../lib/effector/withEvent'
 import { ChatBotTextManager } from './ChatBoxTextManager'
 import { ControlledSample } from '../../../lib/effector/ControlledSample'
-import { DefaultMessagesCreator } from './DefaultMessageCreator'
-import { t } from '../../../shared/translation'
-import { IS_WEB } from '@magmamath/react-native-ui'
 
 type ReinitConversationProps = {
   key: string
@@ -50,19 +46,12 @@ export class ChatbotModel {
 
   readonly resetAlternatives = createEvent()
   readonly setAlternatives = createEvent<GetAlternativesResponse | null>()
-  readonly $alternatives
+  readonly $alternatives: Store<GetAlternativesResponse | null>
 
   readonly setIsOpen = createEvent<boolean>()
   readonly toggleOpen = createEvent()
   readonly $isOpen = restore(this.setIsOpen, false).on(this.toggleOpen, (isOpen) => !isOpen)
 
-  readonly setIsTextInputFocused = createEvent<boolean>()
-  readonly $isTextInputFocused = restore(this.setIsTextInputFocused, false).reset(
-    this.resetAlternatives,
-  )
-  readonly setTextInputValue = createEvent<string>()
-  readonly $textInputValue = restore(this.setTextInputValue, '').reset(this.resetAlternatives)
-
   public readonly removeLastMessage = createEvent()
   private readonly setLastMessageKey = createEvent<string>()
   public readonly $lastMessageKey = restore(this.setLastMessageKey, null)
@@ -83,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, sendMessage: api.sendMessage })
+    this.threadManager.setApi({ getHint: api.requestHint })
     if (threadMessagesLimit) {
       this.threadManager.setMessagesLimit(threadMessagesLimit)
     }
@@ -119,29 +108,6 @@ export class ChatbotModel {
       target: [this.t2s.reset, this.errorSpotting.spottingHidden],
     })
 
-    // sample({
-    //   source: { alternatives: this.$alternatives },
-    //   // filter: ({ alternatives }) => !!alternatives && alternatives.isOpenChatEnabled && IS_WEB,
-    //   target: createEffect(() => {
-    //     this.textManager.update((creator) => ({
-    //       anotherHintOption: creator.createMessagÏe(t('chat.giveHint')),
-    //     }))
-    //   }),
-    // })
-
-    // // Update default "another hint" option from alternatives when they arrive
-    // this.$alternatives.updates.watch((alternatives) => {
-    //   const dynamicOption = alternatives?.options?.default?.[0]
-    //   if (dynamicOption) {
-    //     this.textManager.update(() => ({ anotherHintOption: dynamicOption }))
-    //   }
-    // })
-    //
-    // // Restore default texts when alternatives are reset
-    // this.resetAlternatives.watch(() => {
-    //   this.textManager.restore()
-    // })
-
     sample({
       clock: this.removeLastMessage,
       source: [this.$lastMessageKey, this.cache.$data] as const,
@@ -196,42 +162,34 @@ export class ChatbotModel {
       mapParams: (params: SendHelpParams, [key, context]) => ({
         message: params.message,
         translatedMessage: params.translatedMessage,
-        isFreeText: params.isFreeText,
         context,
         key,
       }),
-      effect: createEffect(
-        async ({ message, translatedMessage, key, context, isFreeText }: 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,
-            message: isFreeText ? message : undefined,
-          })
-
-          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 }: 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 })
+      }),
     })
 
     sample({
@@ -315,8 +273,6 @@ export class ChatbotModel {
         this.api.postMessageFx.controller.abort()
         this.removeLastMessage()
       }
-      this.setIsTextInputFocused(false)
-      this.setTextInputValue('')
       this.errorSpotting.abortPendingRequest()
 
       this.t2s.stop()

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

@@ -4,18 +4,12 @@ import {
   ChatHintResponse,
   PostMessagePayload,
   PostMessageResponse,
-  SendMessagePayload,
-  SendMessageResponse,
 } from '../types/api.types'
-import {
-  ChatbotMessages,
-  IChatDrawBoardAdapter,
-} from '../types/model.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 = {
@@ -32,7 +26,6 @@ export class ChatBotThreadManager {
 
   private messagesLimit
   private currentKey = ''
-  private currentConversationId: null | string = null
 
   private readonly defaultMessages
 
@@ -76,7 +69,6 @@ export class ChatBotThreadManager {
     answer,
     language,
     imageAltText,
-    message,
   }: PostMessagePayload): Promise<PostMessageResponse> => {
     if (!this.api) {
       throw new Error(
@@ -85,28 +77,14 @@ export class ChatBotThreadManager {
     }
     const threadItem = await this.getThreadItem()
 
-    let result = {} as ChatHintResponse | SendMessageResponse
-
-    if (message) {
-      result = await this.api.sendMessage({
-        problemDescription: problem,
-        correctAnswer: problemAnswer,
-        language,
-        message,
-        conversationId: this.currentConversationId ?? '',
-      })
-      //@ts-ignore
-      this.conversationId = result?.conversationId ?? null
-    } else {
-      result = await this.api.getHint({
-        ...threadItem.getNextHintProps(),
-        correctAnswer: problemAnswer,
-        problemDescription: problem,
-        userAnswer: answer,
-        language,
-        imageAltText,
-      })
-    }
+    const result = await this.api.getHint({
+      ...threadItem.getNextHintProps(),
+      correctAnswer: problemAnswer,
+      problemDescription: problem,
+      userAnswer: answer,
+      language,
+      imageAltText,
+    })
 
     threadItem.history.push(result.message)
     const nextOptions =
@@ -117,8 +95,6 @@ export class ChatBotThreadManager {
       options: nextOptions,
       endMessage: !nextOptions.length,
       threadId: threadItem.id,
-      //@ts-ignore
-      conversationId: result?.conversationId ?? null,
     }
   }
 
@@ -128,7 +104,6 @@ export class ChatBotThreadManager {
 
   public reset(key?: string) {
     if (typeof key === 'string') {
-      this.currentConversationId = null
       this.threads.delete(key)
       return
     }
@@ -147,8 +122,4 @@ export class ChatBotThreadManager {
   public setCurrentKey(key: string) {
     this.currentKey = key
   }
-
-  public setCurrentConversationId(id: string) {
-    this.currentConversationId = id
-  }
 }

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

@@ -9,12 +9,10 @@ export class ChatbotAPI {
   public readonly getAlternativesFx
   public readonly translateTextFx
   public readonly textToSpeechTextFx
-  // public readonly sendMessageFx
 
   public readonly spotErrorFx
 
   constructor(api: ChatbotApiRequests) {
-    // this.sendMessageFx = createControllerEffect(api.sendMessage)
     this.spotErrorFx = createControllerEffect(api.spotError)
     this.postMessageFx = createControllerEffect(api.postMessage)
     this.getAlternativesFx = createEffect(api.getAlternatives)

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

@@ -5,31 +5,12 @@ export type GetAlternativesPayload = {
   assignmentClassGrade: number
 } | null
 
-export type AlternativesOptions = {
-  default: ChatAnswer[]
-  hints: ChatAnswer[]
-}
-
 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
+  options: {
+    default: ChatAnswer[]
+    hints: ChatAnswer[]
+  }
 }
 
 export type PostMessagePayload = {
@@ -38,7 +19,6 @@ export type PostMessagePayload = {
   answer?: string | string[]
   problem: string
   imageAltText?: string
-  message?: string
 }
 
 export type PostMessageResponse = {

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

@@ -12,8 +12,6 @@ import {
   GoogleTranslateResponse,
   PostMessagePayload,
   PostMessageResponse,
-  SendMessagePayload,
-  SendMessageResponse,
 } from './api.types'
 import { ExtendWithOptional } from '../../../lib/helpers/types'
 import { ChatAnswer, ConversationMessage, FullStrokeData } from './units.types'
@@ -27,7 +25,6 @@ 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,20 +47,11 @@ export type ChatbotModelProps = {
 export type SendHelpParams = {
   message: string
   translatedMessage?: string
-  isFreeText?: boolean
 }
 
 export type SendHelpProps = SendHelpParams & {
   key: string
   context: ChatbotContext | null
-  isFreeText?: boolean
-}
-
-export type SendMessageProps = SendHelpParams & {
-  key: string
-  context: ChatbotContext | null
-  conversationId?: string
-  message: string
 }
 
 export type SetHintMessageProps = {
@@ -120,6 +108,3 @@ export type ChatbotContext = {
   translationTargetLanguage: string
   imageDescription?: string
 }
-
-
-

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

@@ -1,5 +1,3 @@
-import { ColorScheme } from './style.types'
-
 export type Stroke = {
   x: number[]
   y: number[]
@@ -37,23 +35,3 @@ export type ChatItem = {
   isAvailable: boolean
   currentThread: IThreadItem | null
 }
-
-export type ChatInputAreaProps = {
-  onPressAlternative: (message: string, translatedMessage?: string) => void
-  hasMessages: boolean
-  isHintFeedback: boolean
-  inputMode: ChatInputMode
-  colorScheme?: ColorScheme
-}
-
-export enum ChatInputMode {
-  FreeText = 1,
-  Option = 2,
-}
-
-export type ChatInputProps = {
-  message: string
-  disabled: boolean
-  onPress: () => void
-  colorScheme: ColorScheme
-}

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

@@ -10,11 +10,13 @@ import { QuestionSection } from './QuestionSection'
 import { SolutionSection } from './SolutionSection'
 import { useExampleSolution } from '../hooks/useExampleSolution'
 
+type ExampleSolutionModalContentProps = {
+  params: ExampleSolutionModalParams
+}
+
 export const ExampleSolutionModalContent = ({
-  model,
-  payload,
-  cacheKey,
-}: ExampleSolutionModalParams) => {
+  params: { model, payload, cacheKey },
+}: ExampleSolutionModalContentProps) => {
   const { result, status } = useExampleSolution({ model, payload, cacheKey })
   const localization = useUnit($localization)
 
@@ -24,7 +26,11 @@ export const ExampleSolutionModalContent = ({
         {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 +42,7 @@ export const ExampleSolutionModalContent = ({
 const styles = StyleSheet.create({
   container: {
     width: 880,
-    height: 593,
+    maxHeight: 593,
   },
   content: {
     flex: 1,
@@ -53,8 +59,8 @@ const styles = StyleSheet.create({
   },
   lavaIconContainer: {
     position: 'absolute',
-    bottom: -54,
-    right: -50,
+    bottom: -24,
+    right: -26,
   },
   loaderContainer: {
     paddingTop: 34,
@@ -65,7 +71,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],
   },
 })

package/src/features/exampleSolution/model/ExampleSolution.model.ts

@@ -1,4 +1,4 @@
-import { GifCelebrationsModelProps } from '../types'
+import { ExampleSolutionModelProps } from '../types'
 import { ExampleSolutionsApi } from './ExampleSolutionApi'
 import { ExampleSolutionCache } from './ExampleSolutionCache'
 
@@ -6,7 +6,10 @@ export class ExampleSolutionModel {
   public readonly api
   public readonly cache = new ExampleSolutionCache()
 
-  constructor({ api, errorHandler }: GifCelebrationsModelProps) {
+  public readonly renderKatexComponent: (katexString: string) => React.ReactNode
+
+  constructor({ api, errorHandler, renderKatexComponent }: ExampleSolutionModelProps) {
     this.api = new ExampleSolutionsApi({ api, errorHandler })
+    this.renderKatexComponent = renderKatexComponent
   }
 }

package/src/features/exampleSolution/types.ts

@@ -15,9 +15,10 @@ export type ExampleSolutionApiRequests = {
   generateExampleSolution: (body: ExampleSolutionPayload) => Promise<ExampleSolutionResponse>
 }
 export type ExampleSolutionErrorHandler = (errorMessage: string) => void
-export type GifCelebrationsModelProps = {
+export type ExampleSolutionModelProps = {
   api: ExampleSolutionApiRequests
   errorHandler?: ExampleSolutionErrorHandler
+  renderKatexComponent: (katexString: string) => React.ReactNode
 }
 export type ExampleSolutionModalParams = {
   cacheKey: string