@magmamath/students-features 0.10.0-rc.6 → 0.10.0

package/src/features/chatbot/components/ChatMessage/ReceivedMessage.tsx

@@ -14,8 +14,6 @@ export const ReceivedMessage = ({
   withIcon,
   colorScheme = ColorScheme.Blue,
   withErrorSpotting,
-  highlightedWordIndex,
-  TTSHighlightRenderer,
 }: VariantProps) => {
   const text = isTranslated ? message.translatedMessage : message.message
 
@@ -35,8 +33,6 @@ export const ReceivedMessage = ({
           text={text ?? ''}
           colorScheme={colorScheme}
           withErrorSpotting={withErrorSpotting}
-          highlightedWordIndex={highlightedWordIndex}
-          TTSHighlightRenderer={TTSHighlightRenderer}
         />
       </View>
     </View>

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

@@ -1,4 +1,4 @@
-import React, { ComponentType, PropsWithChildren, useMemo } from 'react'
+import React, { ComponentType, PropsWithChildren } from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 
 import { ChatbotModel } from '../model/ChatBotModel'
@@ -7,7 +7,6 @@ import { ChatControls } from './ChatControls/ChatControls'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
 import { ChatBotModelContext } from '../context/ChatBotModelContext'
 import { ColorScheme } from '../types/style.types'
-import { TTSHighlightRenderer } from '../types/t2s.types'
 
 type ChatbotProps = {
   model: ChatbotModel
@@ -19,34 +18,22 @@ type ChatbotProps = {
   }
   ButtonWrapper?: ComponentType<PropsWithChildren>
   iconSize?: { width: number; height: number } // TODO: use number instead
-  isInputDisabled?: boolean
   colorScheme?: ColorScheme
-  TTSHighlightRenderer?: TTSHighlightRenderer
 }
 
 export const Chatbot = ({
   model,
   isHintFeedback,
   isTextToSpeechEnabled = false,
-  isInputDisabled,
   textToSpeechConfig,
   ButtonWrapper,
   iconSize,
   colorScheme = ColorScheme.Blue,
-  TTSHighlightRenderer,
 }: ChatbotProps) => {
   const isChatAllowed = useUnit(model.$chatAccess)
   const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
   model.t2s.setAudioConfig(textToSpeechConfig ?? null)
 
-  const shouldAnimateCloseButton = useStoreMap({
-    store: model.$currentChatData,
-    fn: (chat, [isInputDisabled]) => {
-      return isInputDisabled && chat.messages.length === 1
-    },
-    keys: [isInputDisabled],
-  })
-
   const openChat = () => model.setIsOpen(true)
   const closeChat = () => model.setIsOpen(false)
 
@@ -61,18 +48,14 @@ export const Chatbot = ({
         colorScheme={colorScheme}
         isHintFeedback={isHintFeedback}
         isTextToSpeechEnabled={isTextToSpeechEnabled}
-        isInputDisabled={isInputDisabled}
-        MessageWrapper={ButtonWrapper}
-        TTSHighlightRenderer={TTSHighlightRenderer}
       />
 
       <ChatControls
         model={model}
         onPressChatIcon={openChat}
         onPressClose={closeChat}
+        ButtonWrapper={ButtonWrapper}
         iconSize={iconSize}
-        ButtonWrapper={isInputDisabled ? undefined : ButtonWrapper}
-        shouldAnimateCloseButton={shouldAnimateCloseButton}
       />
     </ChatBotModelContext.Provider>
   )

package/src/features/chatbot/constants.ts

@@ -80,5 +80,3 @@ export const CONTROLS_COLORS_MAP = {
 }
 
 export const HOVER_ANIMATION_DURATION = 200
-
-export const WORD_MARK_REGEX = /^w_(\d+)$/

package/src/features/chatbot/helpers.ts

@@ -58,27 +58,17 @@ export function prepareChatRequestPayload(
     conversationId,
     freeTextMessage,
     problemDescription,
-    problemStandards,
     problemAnswer,
     language,
     imageCdnId,
     imageAltText,
     answerOptions,
     answer,
-    chatHistory,
   } = payload
 
   if (freeTextMessage) {
     return conversationId
-      ? {
-          type: ChatRequestType.FREETEXT,
-          data: {
-            conversationId,
-            message: freeTextMessage,
-            ...(chatHistory && { chatHistory }),
-            ...(!!problemStandards?.length && { problemStandards }),
-          },
-        }
+      ? { type: ChatRequestType.FREETEXT, data: { conversationId, message: freeTextMessage } }
       : {
           type: ChatRequestType.FREETEXT,
           data: {
@@ -86,10 +76,8 @@ export function prepareChatRequestPayload(
             correctAnswer: problemAnswer,
             problemDescription,
             language,
-            ...(chatHistory && { chatHistory }),
             ...(imageCdnId && { imageCdnId }),
             ...(imageAltText && { altText: imageAltText }),
-            ...(!!problemStandards?.length && { problemStandards }),
             ...(!!answerOptions?.length && { answerOptions }),
           },
         }
@@ -105,7 +93,6 @@ export function prepareChatRequestPayload(
       language,
       ...(imageCdnId && { imageCdnId }),
       ...(imageAltText && { altText: imageAltText }),
-      ...(!!problemStandards?.length && { problemStandards }),
     },
   }
 }

package/src/features/chatbot/index.ts

@@ -1,27 +1,12 @@
 export { Chatbot } from './components/Chatbot'
 export { ChatbotModel } from './model/ChatBotModel'
-export {
-  AudioStatus,
-  type AudioProvider,
-  type TTSHighlightRenderer,
-  type TTSHighlightRendererProps,
-} from './types/t2s.types'
+export { AudioStatus, type AudioProvider } from './types/t2s.types'
 export {
   MessageVariant,
   type ChatbotModelProps,
   type IChatDrawBoardAdapter,
 } from './types/model.types'
-export type { RequestOptionalConfig } from '../../lib/effector/createControllerEffect'
-export type {
-  ChatHintPayload,
-  ChatHintResponse,
-  ChatHistory,
-  GetAlternativesResponse,
-  GetAlternativesPayload,
-  SendMessagePayload,
-  SendMessageResponse,
-  PostMessageResponse,
-} from './types/api.types'
+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'

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

@@ -7,7 +7,7 @@ import {
   restore,
   sample,
   type Store,
-  StoreWritable,
+  StoreWritable
 } from 'effector'
 import {
   ChatbotContext,
@@ -23,7 +23,7 @@ import {
 import { GetAlternativesResponse } from '../types/api.types'
 import { ChatbotAPI } from './ChatbotApi'
 import { ChatbotTranslation } from './ChatbotTranslation'
-import { ChatTTSModel } from './ChatTTSModel'
+import { ChatTextToSpeechModel, T2SConfig } from './t2s'
 import { messagesHelper } from './messagesHelper'
 import { ChatBotThreadManager } from './ChatBotThreadManager'
 import { ChatsCacheModel, defaultChatData } from './ChatsCacheModel'
@@ -34,7 +34,6 @@ import { ChatBotTextManager } from './ChatBoxTextManager'
 import { ControlledSample } from '../../../lib/effector/ControlledSample'
 import { transformAlternatives } from '../helpers'
 import { IS_WEB } from '@magmamath/react-native-ui'
-import { T2SConfig } from '../types/t2s.types'
 
 export class ChatbotModel {
   public readonly textManager = new ChatBotTextManager()
@@ -46,7 +45,7 @@ export class ChatbotModel {
   public readonly api: ChatbotAPI
 
   public readonly translation: ChatbotTranslation
-  public readonly t2s: ChatTTSModel
+  public readonly t2s: ChatTextToSpeechModel
   public readonly errorSpotting: ErrorSpottingModel
   public readonly textInput = new ChatBotTextInput()
 
@@ -58,7 +57,7 @@ export class ChatbotModel {
 
   readonly resetAlternatives = createEvent()
   readonly setAlternatives = createEvent<GetAlternativesResponse | null>()
-  readonly $alternatives = createStore<GetAlternativesResponse | null>(null)
+  readonly $alternatives: Store<GetAlternativesResponse | null>
 
   readonly setIsOpen = createEvent<boolean>()
   readonly toggleOpen = createEvent()
@@ -87,18 +86,18 @@ export class ChatbotModel {
     this.api = new ChatbotAPI({ ...api, postMessage: this.threadManager.postMessage })
 
     this.$chatAccess = chatAccess
-    if ($key) this.bindKey($key)
 
     this.threadManager.setApi({ getHint: api.requestHint, sendMessage: api.sendMessage })
     if (threadMessagesLimit) {
       this.threadManager.setMessagesLimit(threadMessagesLimit)
     }
 
-    this.$alternatives
+    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 })
     this.translation = new ChatbotTranslation({
       $context: this.$context,
       defaultMessages: this.defaultMessages,
@@ -111,16 +110,12 @@ export class ChatbotModel {
       chats: this.cache,
     })
 
-    this.t2s = new ChatTTSModel({
-      api: this.api,
-      $currentChatData: this.$currentChatData,
-      $isTranslated: this.translation.$isTranslated,
-    })
-
     this.errorSpotting = new ErrorSpottingModel({
       $currentChatData: this.$currentChatData,
     })
 
+    if ($key) this.bindKey($key)
+
     sample({
       source: this.$isOpen.updates,
       filter: (isOpen) => !isOpen,
@@ -161,12 +156,7 @@ export class ChatbotModel {
         ...source,
       }),
       effect: createEffect(
-        ({
-          currentChatData,
-          initOnly,
-          chatAccess,
-          withGreetingMessage = true,
-        }: StartConversationFxData) => {
+        ({ currentChatData, initOnly, chatAccess }: StartConversationFxData) => {
           const { key, messages } = currentChatData
 
           if (!chatAccess) return
@@ -176,7 +166,7 @@ export class ChatbotModel {
             return this.reinitConversation({ key })
           }
           this.cache.add(key, {
-            messages: withGreetingMessage ? [this.defaultMessages.start] : [],
+            messages: [this.defaultMessages.start],
             isAvailable: true,
             currentThread: null,
           })
@@ -196,53 +186,29 @@ export class ChatbotModel {
 
   private createSendHelpRequestFx() {
     const effect = attach({
-      source: {
-        key: this.$currentKey,
-        context: this.$context,
-        cache: this.cache.$data,
-        alternatives: this.$alternatives,
-      },
+      source: { key: this.$currentKey, context: this.$context, cache: this.cache.$data },
       mapParams: (params: SendHelpParams, source) => ({
         ...params,
         ...source,
       }),
       effect: createEffect(
-        async ({
-          message,
-          translatedMessage,
-          key,
-          context,
-          isFreeText,
-          cache,
-          alternatives,
-        }: SendHelpProps) => {
+        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 chatHistory =
-            context.assignmentId && context.problemId
-              ? {
-                  exerciseId: context.assignmentId,
-                  problemId: context.problemId,
-                  chatVersion: alternatives?.version ?? '',
-                }
-              : undefined
-
           // Request is overridden by ThreadManager.postMessage (delegates to sendMessage/getHint)
           const response = await this.api.postMessageFx({
             answer: context.answer,
             answerOptions: context.answerOptions,
-            problemDescription: context.problemDescription,
-            problemStandards: context.problemStandards,
+            problemDescription: context.problem,
             problemAnswer: context.problemAnswer,
             language: context.language,
             imageAltText: context.imageDescription,
             imageCdnId: context.imageCdnId,
             conversationId: cache[key].conversationId,
-            chatHistory,
             ...(isFreeText && { freeTextMessage: message }),
           })
 
@@ -328,10 +294,6 @@ export class ChatbotModel {
     this.cache.setSingleMessage(key, { ...message, options })
   }
 
-  public addMessage({ key, ...message }: SetHintMessageProps) {
-    this.cache.addMessages(key, { messages: [message] })
-  }
-
   public readonly reinitConversation = ({ key }: ReinitConversationProps) => {
     this.cache.reinitChatThread(key, { initialOption: this.defaultMessages.anotherHintOption })
     this.threadManager.reset(key)

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

@@ -10,17 +10,10 @@ import {
 import { ChatbotMessages, ChatRequestType, IChatDrawBoardAdapter } from '../types/model.types'
 import { CHAT_BOT_MODEL_DEFAULTS } from './constants'
 import { prepareChatRequestPayload } from '../helpers'
-import { RequestOptionalConfig } from 'src/lib/effector/createControllerEffect'
 
 type ThreadManagerApi = {
-  getHint: (
-    props: ChatHintPayload,
-    requestConfig?: RequestOptionalConfig,
-  ) => Promise<ChatHintResponse>
-  sendMessage: (
-    props: SendMessagePayload,
-    requestConfig?: RequestOptionalConfig,
-  ) => Promise<SendMessageResponse>
+  getHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
+  sendMessage: (props: SendMessagePayload) => Promise<SendMessageResponse>
 }
 
 type ChatBotThreadManagerProps = {
@@ -76,7 +69,6 @@ export class ChatBotThreadManager {
 
   public readonly postMessage = async (
     payload: PostMessagePayload,
-    requestConfig?: RequestOptionalConfig,
   ): Promise<PostMessageResponse> => {
     if (!this.api) {
       throw new Error(
@@ -88,8 +80,8 @@ export class ChatBotThreadManager {
 
     const result: SendMessageResponse | ChatHintResponse =
       type === ChatRequestType.FREETEXT
-        ? await this.api.sendMessage(data, requestConfig)
-        : await this.api.getHint(data, requestConfig)
+        ? await this.api.sendMessage(data)
+        : await this.api.getHint(data)
 
     threadItem.history.push(result.message)
 

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

@@ -13,7 +13,6 @@ export class ChatbotAPI {
   constructor(api: ChatbotApiRequests) {
     this.postMessageFx = createControllerEffect(api.postMessage)
     this.getAlternativesFx = createEffect(api.getAlternatives)
-    this.textToSpeechTextFx = createEffect(api.postTextToSpeech)
     this.translateTextFx = createEffect(
       async (payload: GoogleTranslatePayload): Promise<GoogleTranslateResponse> => {
         const response = await api.postTranslateText({
@@ -33,5 +32,6 @@ export class ChatbotAPI {
         }
       },
     )
+    this.textToSpeechTextFx = createEffect(api.postTextToSpeech)
   }
 }

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

@@ -17,10 +17,6 @@ type AddMessagesProps = {
   thread?: ThreadItem | null
 }
 
-type AddMessageProps = {
-  message: ConversationMessage
-}
-
 export function defaultChatData(props: Partial<ChatItem> = {}): ChatItem {
   return {
     messages: [],

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

@@ -0,0 +1,123 @@
+import { restore, createEvent, createEffect } from 'effector'
+import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
+import { AudioProvider, AudioStatus, PlayTextToSpeechProps } from '../types/t2s.types'
+import { ChatbotAPI } from './ChatbotApi'
+
+type ChatTextToSpeechModelProps = {
+  api: ChatbotAPI
+}
+
+export type T2SConfig = {
+  audioProvider?: AudioProvider
+  textSanitizer?: (speech: string) => string
+}
+
+type AudioConfig = {
+  voice?: typeof DEFAULT_VOICE
+  audioConfig?: typeof AUDIO_CONFIG
+}
+
+export class ChatTextToSpeechModel {
+  private readonly api: ChatbotAPI
+  private readonly audioCache: Record<string, string> = {}
+  private audioProvider: AudioProvider | null = null
+
+  readonly setCurrentPlayingId = createEvent<string | null>()
+  readonly $currentPlayingId = restore(this.setCurrentPlayingId, null)
+  readonly setStatus = createEvent<AudioStatus>()
+  readonly $status = restore(this.setStatus, AudioStatus.STOPPED)
+
+  private audioConfig: AudioConfig | null = null
+  private textSanitizer = (value: string) => value
+
+  constructor({ api }: ChatTextToSpeechModelProps) {
+    this.api = api
+  }
+
+  public setAudioConfig(config: AudioConfig | null) {
+    this.audioConfig = config
+  }
+
+  public setConfig({ audioProvider, textSanitizer }: T2SConfig) {
+    if (audioProvider) this.audioProvider = audioProvider
+    if (textSanitizer) this.textSanitizer = textSanitizer
+  }
+
+  private getCacheKey = (messageId: string, isTranslated: boolean) => {
+    return `${messageId}-${isTranslated ? 'translated' : 'original'}`
+  }
+
+  public async play({ message, isTranslated }: PlayTextToSpeechProps) {
+    if (!this.audioProvider) throw new Error('Audio provider is not set. Use setConfig.')
+    const messageText = isTranslated ? message.translatedMessage! : message.message
+    const messageId = message.id
+    const text = this.textSanitizer(messageText)
+
+    try {
+      const status = this.$status.getState()
+      const playingId = this.$currentPlayingId.getState()
+      const isPlaying = status === AudioStatus.PLAYING
+      const isPaused = status === AudioStatus.PAUSED
+      const isCurrentMessage = messageId === playingId
+
+      if (isPlaying && isCurrentMessage) {
+        this.audioProvider.pause()
+        this.setStatus(AudioStatus.PAUSED)
+        return
+      }
+
+      if (isPaused && isCurrentMessage) {
+        this.audioProvider.resume()
+        this.setStatus(AudioStatus.PLAYING)
+        return
+      }
+
+      if (messageId && !isCurrentMessage) {
+        this.audioProvider.stop()
+      }
+
+      const cacheKey = this.getCacheKey(messageId, isTranslated)
+      let audioPath = this.audioCache[cacheKey]
+      this.setCurrentPlayingId(messageId)
+
+      if (!audioPath) {
+        const config = this.audioConfig
+        const response = await this.api.textToSpeechTextFx({
+          input: { text },
+          voice: config?.voice ?? DEFAULT_VOICE,
+          audioConfig: config?.audioConfig ?? AUDIO_CONFIG,
+          enableTimePointing: [],
+        })
+
+        // Response might be different type based on provided AUDIO_CONFIG
+        if (typeof response.audioContent === 'string') {
+          audioPath = `data:audio/mpeg;base64,${response.audioContent}`
+        } else {
+          audioPath = response?.audioContent ?? ''
+        }
+
+        this.audioCache[cacheKey] = audioPath
+      }
+
+      this.setStatus(AudioStatus.PLAYING)
+      await this.audioProvider.play(audioPath, () => {
+        this.setStatus(AudioStatus.STOPPED)
+        this.setCurrentPlayingId(null)
+      })
+    } catch (error) {
+      this.reset()
+      console.error('Error playing text-to-speech: ', error)
+    }
+  }
+
+  public stop() {
+    if (!this.audioProvider) throw new Error('Audio provider is not set. Use setAudioProvider.')
+    this.audioProvider.stop()
+  }
+
+  public readonly reset = createEffect(() => {
+    this.stop()
+    this.setStatus(AudioStatus.STOPPED)
+    this.setCurrentPlayingId(null)
+  })
+}

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

@@ -1,4 +1,4 @@
-import { ChatAnswer, Stroke } from './units.types'
+import { ChatAnswer, FullStrokeData, Stroke } from './units.types'
 
 export type GetAlternativesPayload = {
   municipalityId: string
@@ -10,36 +10,21 @@ export type AlternativesOptions = {
   hints: ChatAnswer[]
 }
 
-export type ChatHistory = { exerciseId: string; chatVersion: string; problemId: string }
-
-export type ProblemStandard = {
-  id: string
-  name: string
-  description: string
-  numberOfMatchedSkills: number
-}
-
 export type GetAlternativesResponse = {
-  /**
-   * @deprecated chatAccess depends on assignment.lavaChat or class grade
-   */
   chatAccess?: boolean
   isOpenChatEnabled?: boolean
-  municipalityChatEnable: boolean
   version: string
   options: AlternativesOptions
 }
 
 export type SendMessagePayload = {
-  message: string
-  altText?: string
-  answerOptions?: string[]
-  chatHistory?: ChatHistory
-  correctAnswer?: string | string[]
-  conversationId?: string
   problemDescription?: string
-  problemStandards?: ProblemStandard[]
+  correctAnswer?: string | string[]
+  answerOptions?: string[]
+  altText?: string
   language?: string
+  message: string
+  conversationId?: string
 }
 
 export type SendMessageResponse = {
@@ -51,14 +36,12 @@ export type PostMessagePayload = {
   language: string
   problemAnswer: string[]
   problemDescription: string
-  problemStandards?: ProblemStandard[]
   answer?: string | string[]
   answerOptions?: string[]
   imageAltText?: string
   imageCdnId?: string
   freeTextMessage?: string
   conversationId?: string | null
-  chatHistory?: ChatHistory
 }
 
 export type PostMessageResponse = {
@@ -83,7 +66,9 @@ export type GoogleTranslateResponse = {
 }
 
 export type GoogleText2SpeechPayload = {
-  input: { text: string } | { ssml: string }
+  input: {
+    text: string
+  }
   voice: {
     languageCode: string
     name: string
@@ -108,7 +93,6 @@ export type GoogleText2SpeechResponse = {
 
 export type ChatHintPayload = {
   problemDescription: string
-  problemStandards?: ProblemStandard[]
   correctAnswer: string[]
   userAnswer?: string | string[]
   stroke?: Stroke[]
@@ -124,3 +108,13 @@ export type ChatHintResponse = {
   conversationId?: string | null
   errorStrokeIds?: string[]
 }
+export type ErrorSpottingPayload = {
+  strokes: FullStrokeData[]
+  problemDescription: string
+  correctAnswer: string[]
+  userAnswer: string | string[]
+  hint: string
+}
+export type ErrorSpottingResponse = {
+  highlightedStrokeIds: string[]
+}