@magmamath/students-features 0.5.0 → 0.5.1-rc-0

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

@@ -1,17 +1,18 @@
 import {
   attach,
-  combine,
-  createEffect,
   createEvent,
-  createStore,
   restore,
   sample,
   type Store,
+  createStore,
+  createEffect,
+  combine,
 } from 'effector'
+import { createControllerEffect, createEntityFieldStore } from '../../../lib/effector'
 import {
   ChatbotContext,
   ChatbotModelProps,
-  IChatDrawBoardAdapter,
+  ConversationMessage,
   SendHelpParams,
   SendHelpProps,
   SetHintMessageProps,
@@ -19,32 +20,20 @@ import {
   StartConversationProps,
 } from '../types/model.types'
 import { GetAlternativesResponse } from '../types/api.types'
-import { ChatbotAPI } from './ChatbotApi'
+import { ChatbotAPI } from './api'
 import { ChatbotTranslation } from './translation'
-import { ChatTextToSpeechModel, T2SConfig } from './t2s'
+import { ChatTextToSpeechModel } from './t2s'
+import { AudioProvider } from '../types/t2s.types'
 import { messagesHelper } from './messagesHelper'
-import { ChatBotThreadManager } from './ChatBotThreadManager'
-import { ChatsCacheModel, defaultChatData } from './ChatsCacheModel'
-import { ErrorSpottingModel } from '../errorSpotting/ErrorSpottingModel'
-import { withEvent } from '../../../lib/effector/withEvent'
-import { ChatBotTextManager } from './ChatBoxTextManager'
 
 type ReinitConversationProps = {
   key: string
 }
 
 export class ChatbotModel {
-  public readonly textManager = new ChatBotTextManager()
-  private readonly defaultMessages = this.textManager.messages
-
-  public readonly threadManager = new ChatBotThreadManager({
-    messages: this.defaultMessages,
-  })
-  public readonly api: ChatbotAPI
-
-  public readonly translation: ChatbotTranslation
-  public readonly t2s: ChatTextToSpeechModel
-  public readonly errorSpotting: ErrorSpottingModel
+  readonly api: ChatbotAPI
+  readonly translation: ChatbotTranslation
+  readonly t2s: ChatTextToSpeechModel
 
   public readonly $currentKey = createStore('')
 
@@ -63,142 +52,151 @@ export class ChatbotModel {
   public readonly setContext = createEvent<null | ChatbotContext>()
   public readonly $context = restore(this.setContext, null)
 
-  public readonly setScrollActive = createEvent<boolean>()
-  public readonly $isScrollActive = restore(this.setScrollActive, false)
+  readonly setScrollActive = createEvent<boolean>()
+  readonly $isScrollActive = restore(this.setScrollActive, false)
+
+  readonly sendHelpRequestFx
 
-  private readonly cache = new ChatsCacheModel()
+  readonly defaultMessages: ChatbotModelProps['messages']
+
+  readonly messages = createEntityFieldStore<ConversationMessage[]>()
+  readonly threadIds = createEntityFieldStore<string>()
+  readonly availableChats = createEntityFieldStore<boolean>()
 
   public readonly $currentChatData = combine(
-    { data: this.cache.$data, key: this.$currentKey },
-    ({ data, key }) => (data[key] ? { ...data[key], key } : { ...defaultChatData(), key }),
+    {
+      messages: this.messages.$state,
+      threadIds: this.threadIds.$state,
+      availableChats: this.availableChats.$state,
+      key: this.$currentKey,
+    },
+    ({ messages, threadIds, availableChats, key }) => {
+      return {
+        messages: messages[key] ?? [],
+        threadId: threadIds[key] ?? null,
+        isAvailable: availableChats[key] ?? false,
+        key,
+      }
+    },
   )
 
-  constructor({ api, $key, threadMessagesLimit }: ChatbotModelProps) {
-    this.api = new ChatbotAPI({ ...api, postMessage: this.threadManager.postMessage })
+  constructor({ api, messages, $key }: ChatbotModelProps) {
+    this.api = new ChatbotAPI(api)
 
-    this.threadManager.setApi({ getHint: api.requestHint })
-    if (threadMessagesLimit) {
-      this.threadManager.setMessagesLimit(threadMessagesLimit)
-    }
+    this.defaultMessages = messages
+    if ($key) sample({ source: $key, target: this.$currentKey })
 
     this.$alternatives = restore(this.api.getAlternativesFx.doneData, null)
       .on(this.setAlternatives, (_, payload) => payload)
       .reset(this.resetAlternatives)
 
-    this.t2s = new ChatTextToSpeechModel({ api: this.api })
     this.translation = new ChatbotTranslation({
       $context: this.$context,
-      defaultMessages: this.defaultMessages,
+      defaultMessages: messages,
       $key: this.$currentKey,
       api: this.api,
+      messagesModel: this.messages,
       alternativesModel: {
         $store: this.$alternatives,
         set: this.setAlternatives,
       },
-      chats: this.cache,
     })
 
-    this.errorSpotting = new ErrorSpottingModel({
-      api: this.api,
-      $currentChatData: this.$currentChatData,
-      $currentChatContext: this.$context,
-    })
+    this.t2s = new ChatTextToSpeechModel({ $isOpen: this.$isOpen, api: this.api })
 
-    if ($key) this.bindKey($key)
-
-    sample({
-      source: this.$isOpen.updates,
-      filter: (isOpen) => !isOpen,
-      target: [this.t2s.reset, this.errorSpotting.spottingHidden],
-    })
-
-    sample({
-      clock: this.removeLastMessage,
-      source: [this.$lastMessageKey, this.cache.$data] as const,
-      fn: ([lastMessageKey, chatsData]) => {
-        const chat = chatsData[lastMessageKey ?? '']
-        if (!chat) return { key: '', data: {} }
-        const updatedMessages = [...chat.messages]
-        updatedMessages.pop()
-        return { key: lastMessageKey ?? '', data: { messages: updatedMessages } }
-      },
-      filter: ([lastMessageKey]) => !!lastMessageKey,
-      target: this.cache.update,
-    })
+    this.sendHelpRequestFx = this.createSendHelpRequestFx()
+    this.initChatReplyWatcher()
   }
 
   private createSendHelpRequestFx() {
     const effect = attach({
-      source: [this.$currentKey, this.$context],
-      mapParams: (params: SendHelpParams, [key, context]) => ({
+      source: [
+        this.$currentKey,
+        this.translation.$isTranslated,
+        this.$currentChatData,
+        this.$context,
+      ],
+      mapParams: (params: SendHelpParams, [key, isTranslated, currentData, context]) => ({
         message: params.message,
         translatedMessage: params.translatedMessage,
         context,
         key,
+        isTranslated,
+        threadId: currentData.threadId,
       }),
-      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: createControllerEffect(
+        async ({
+          message,
+          translatedMessage,
+          key,
+          isTranslated,
+          threadId,
+          context,
+        }: SendHelpProps) => {
+          if (!context) throw new Error('Context is required')
+          this.setLastMessageKey(key)
+          this.messages.setField({
+            key,
+            fn: (currentMessages) => [
+              ...(currentMessages || []),
+              messagesHelper.createOwn({ message, translatedMessage, threadId }),
+            ],
+          })
+
+          const response = await this.api.postMessageFx({
+            problem: context.problem,
+            language: context.language,
+            problemAnswer: context.problemAnswer,
+            answer: context.answer,
+            threadId,
+            imageAltText: context.imageDescription,
+          })
+          let messages = [messagesHelper.createAnswer(response)]
+          if (response.endMessage) {
+            messages.push(messagesHelper.createLast(this.defaultMessages.endMessage))
+          }
+          if (isTranslated) {
+            messages = await this.translation.translateMessagesFx({
+              targetLanguage: context.translationTargetLanguage,
+              messages,
+            })
+          }
+
+          this.messages.setField({
+            key,
+            fn: (currentMessages) => [...(currentMessages || []), ...messages],
+          })
+          this.threadIds.setField({ key, data: response.threadId })
+        },
+      ),
     })
 
     sample({
       clock: effect.fail,
       source: this.$currentChatData,
-      fn: ({ key, messages }) => ({
-        key,
-        data: { messages: [...messages, this.defaultMessages.error] },
-      }),
+      fn: ({ key, messages }) => ({ key, data: [...messages, this.defaultMessages.error] }),
       filter: (_, { error }) => error.message !== 'Request aborted manually',
-      target: this.cache.update,
+      target: this.messages.setField,
     })
 
     return effect
   }
 
-  public bindKey($store: Store<string>) {
+  private initChatReplyWatcher() {
     sample({
-      source: $store,
-      target: this.$currentKey,
+      clock: this.removeLastMessage,
+      source: [this.$lastMessageKey, this.messages.$state] as const,
+      fn: ([lastMessageKey, messages]) => {
+        if (!lastMessageKey) return { key: '', data: [] }
+        const updatedMessages = [...messages[lastMessageKey]]
+        updatedMessages.pop()
+        return { key: lastMessageKey, data: updatedMessages }
+      },
+      filter: ([lastMessageKey]) => !!lastMessageKey,
+      target: this.messages.setField,
     })
-    this.threadManager.bindKeyStore($store)
-    return this
-  }
-
-  public setUpT2S(config: T2SConfig) {
-    this.t2s.setConfig(config)
-    return this
   }
 
-  public setDrawBoardAdapter(adapter: IChatDrawBoardAdapter) {
-    this.threadManager.setDrawBoardAdapter(adapter)
-    this.errorSpotting.bindStrokesValidation(adapter.$strokesValidationKey)
-    return this
-  }
-
-  public readonly sendHelpRequestFx = this.createSendHelpRequestFx()
-
   public readonly startConversation = attach({
     source: this.$currentChatData,
     mapParams: (props: StartConversationProps | void, source) => ({
@@ -210,54 +208,54 @@ export class ChatbotModel {
         if (initOnly) return
         return this.reinitConversation({ key })
       }
-      this.cache.add(key, {
-        messages: [this.defaultMessages.start],
-        isAvailable: true,
-        currentThread: null,
-      })
+      this.messages.setField({ key, data: [this.defaultMessages.start] })
+      this.availableChats.setField({ key, data: true })
     }),
   })
 
   public setHintMessage({ key, ...message }: SetHintMessageProps) {
     const options = this.$alternatives.getState()?.options.hints ?? message.options
-    this.cache.setSingleMessage(key, { ...message, options })
-  }
-
-  public readonly reinitConversation = ({ key }: ReinitConversationProps) => {
-    this.cache.reinitChatThread(key, { initialOption: this.defaultMessages.anotherHintOption })
-    this.threadManager.reset(key)
+    this.messages.setField({
+      key,
+      fn: (messages) => {
+        if (!messages || messages.length > 1) return
+        return [{ ...message, options }]
+      },
+    })
   }
 
-  public disableChat(key: string) {
-    this.t2s.stop()
-    void this.t2s.reset()
-    this.cache.disableChat(key)
-  }
+  public readonly reinitConversation = createEffect(({ key }: ReinitConversationProps) => {
+    this.messages.setField({
+      key,
+      fn: (messages) => {
+        if (!messages?.length || messages.length === 1) return
+        const copy = [...messages]
+        while (copy.at(-1)?.endMessage) {
+          copy.pop()
+        }
 
-  public softReset = attach({
-    source: {
-      isLoading: this.sendHelpRequestFx.pending,
-      lastMessageKey: this.$lastMessageKey,
-    },
-    mapParams: (_: void, { isLoading, lastMessageKey }) => !!(isLoading && lastMessageKey),
-    effect: createEffect((hasPendingMessage: boolean) => {
-      if (hasPendingMessage) {
-        this.api.postMessageFx.controller.abort()
-        this.removeLastMessage()
-      }
-      this.errorSpotting.abortPendingRequest()
+        const lastMessage = copy.at(-1)
+        if (!lastMessage) return
 
-      this.t2s.stop()
-      void this.t2s.reset()
-      this.translation.reset()
-      this.setScrollActive(false)
-    }),
+        copy.splice(copy.length - 1, 1, {
+          ...lastMessage,
+          options: [this.defaultMessages.anotherHintOption],
+        })
+        return copy
+      },
+    })
   })
 
-  public readonly reset = withEvent(() => {
-    this.cache.reset()
-    this.resetAlternatives()
-    this.threadManager.reset()
-    this.errorSpotting.reset()
-  })
+  public bindKey($store: Store<string>) {
+    sample({
+      source: $store,
+      target: this.$currentKey,
+    })
+    return this
+  }
+
+  public setT2SAudioProvider(audioProvider: AudioProvider) {
+    this.t2s.setAudioProvider(audioProvider)
+    return this
+  }
 }

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

@@ -1,8 +1,7 @@
-import { PostMessageResponse } from '../types/api.types'
-import { Event } from 'effector'
-import { ChatAnswer } from '../types/units.types'
+import { ChatAnswer, PostMessageResponse } from '../types/api.types'
+import { createEvent } from 'effector'
 
-type ChatMessage = Omit<PostMessageResponse, 'threadId'> & {
+type ChatMessage = PostMessageResponse & {
   id: string
   isOwnMessage: boolean
 }
@@ -16,17 +15,30 @@ type DefaultMessageCreatorProps<K extends string> = {
 }
 
 export class DefaultMessagesCreator<K extends string> {
+  public readonly languageChanged = createEvent()
+
   private readonly list = new Map<ChatMessage | ChatAnswer, K>()
   private readonly getter
 
   constructor({ textGetter }: DefaultMessageCreatorProps<K>) {
     this.getter = textGetter
+
+    this.languageChanged.watch(() => {
+      this.list.forEach((key, chatMessage) => {
+        if ('message' in chatMessage) {
+          chatMessage.message = this.getter(key)
+          return
+        }
+        chatMessage.text = this.getter(key)
+      })
+    })
   }
 
   public createMessage(key: K, { isOwn = false }: DefaultMessageSettings = {}) {
     const message: ChatMessage = {
       id: this.list.size.toString(),
       message: this.getter(key),
+      threadId: '',
       options: [],
       isOwnMessage: isOwn,
     }
@@ -42,17 +54,4 @@ export class DefaultMessagesCreator<K extends string> {
     this.list.set(option, key)
     return option
   }
-
-  public bindToLanguageChanged(event: Event<unknown>) {
-    event.watch(() => {
-      this.list.forEach((key, chatMessage) => {
-        if ('message' in chatMessage) {
-          chatMessage.message = this.getter(key)
-          return
-        }
-        chatMessage.text = this.getter(key)
-      })
-    })
-    return this
-  }
 }

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

@@ -1,31 +1,26 @@
-import { FullStrokeData, IThreadItem } from '../types/units.types'
-import { generateRandomId } from '../../../lib/helpers/helpers'
+import { Stroke } from '../types/api.types'
 
 type ThreadItemProps = {
-  strokes: FullStrokeData[]
-  key: string
+  strokes?: Stroke[] | null
 }
 
-export class ThreadItem implements IThreadItem {
-  public readonly id = generateRandomId()
-  public readonly strokesValidationKey: string | null = null
-  public readonly strokes: FullStrokeData[] | null
-  public readonly history: string[] = []
+export class ThreadItem {
+  public readonly strokes: Stroke[] | null
+  public readonly hints: string[] = []
 
-  public constructor(props?: ThreadItemProps | null) {
-    this.strokes = props?.strokes ?? null
-    this.strokesValidationKey = props?.key ?? null
+  public constructor({ strokes }: ThreadItemProps = {}) {
+    this.strokes = strokes ?? null
   }
 
   public getNextHintProps() {
-    if (this.history.length) {
+    if (this.hints.length) {
       return {
-        previousHint: this.history[this.history.length - 1],
+        previousHint: this.hints[this.hints.length - 1],
       }
     }
 
     if (this.strokes) {
-      return { stroke: this.strokes.map(({ x, y }) => ({ x, y })) }
+      return { stroke: this.strokes }
     }
 
     return {}

package/src/features/chatbot/model/{ChatbotApi.ts → api.ts}

@@ -1,6 +1,6 @@
 import { createEffect } from 'effector'
 import { createControllerEffect } from '../../../lib/effector'
-import { ChatbotApiRequests } from '../types/model.types'
+import { ChatbotModelProps } from '../types/model.types'
 import { GoogleTranslatePayload, GoogleTranslateResponse } from '../types/api.types'
 import { replaceKatexSyntax } from '../helpers'
 
@@ -10,10 +10,7 @@ export class ChatbotAPI {
   public readonly translateTextFx
   public readonly textToSpeechTextFx
 
-  public readonly spotErrorFx
-
-  constructor(api: ChatbotApiRequests) {
-    this.spotErrorFx = createControllerEffect(api.spotError)
+  constructor(api: ChatbotModelProps['api']) {
     this.postMessageFx = createControllerEffect(api.postMessage)
     this.getAlternativesFx = createEffect(api.getAlternatives)
     this.translateTextFx = createEffect(

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

@@ -1,5 +1,3 @@
-import { ChatbotMessages } from '../types/model.types'
-
 export const CHAT_BOT_MODEL_DEFAULTS = {
   THREAD_MESSAGES_LIMIT: 3,
 }

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

@@ -1,29 +1,21 @@
 import { generateRandomId } from '../../../lib/helpers/helpers'
-import { CreateMessageResponse } from '../types/model.types'
-import { ConversationMessage } from '../types/units.types'
+import { ConversationMessage, CreateMessageResponse } from '../types/model.types'
 
 type OwnMessageProps = {
   message?: string
   translatedMessage?: string
-}
-
-type CreateAnswerSettings = {
-  isInitial?: boolean
+  threadId?: string | null
 }
 
 export class messagesHelper {
-  public static createAnswer(
-    data: CreateMessageResponse,
-    { isInitial }: CreateAnswerSettings = {},
-  ): ConversationMessage {
+  public static createAnswer(data: CreateMessageResponse): ConversationMessage {
     return {
       id: generateRandomId(),
       isOwnMessage: false,
       message: data.message,
-      options: data.options,
       threadId: data.threadId,
+      options: data.options,
       translatedMessage: data.translatedMessage,
-      isInitial,
     }
   }
 
@@ -34,6 +26,7 @@ export class messagesHelper {
       translatedMessage: data.translatedMessage,
       isOwnMessage: false,
       options: [],
+      threadId: '',
       endMessage: true,
     }
   }
@@ -41,11 +34,13 @@ export class messagesHelper {
   public static createOwn({
     message = '',
     translatedMessage,
+    threadId,
   }: OwnMessageProps): ConversationMessage {
     return {
       id: generateRandomId(),
       message,
       translatedMessage,
+      threadId: threadId || '',
       isOwnMessage: true,
       options: [],
     }

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

@@ -1,22 +1,13 @@
-import { restore, createEvent, createEffect } from 'effector'
+import { restore, createEvent, Store, sample, createEffect } from 'effector'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
 import { AudioProvider, AudioStatus, PlayTextToSpeechProps } from '../types/t2s.types'
-import { ChatbotAPI } from './ChatbotApi'
+import { ChatbotAPI } from './api'
 
 type ChatTextToSpeechModelProps = {
+  $isOpen: Store<boolean>
   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> = {}
@@ -27,31 +18,26 @@ export class ChatTextToSpeechModel {
   readonly setStatus = createEvent<AudioStatus>()
   readonly $status = restore(this.setStatus, AudioStatus.STOPPED)
 
-  private audioConfig: AudioConfig | null = null
-  private textSanitizer = (value: string) => value
-
-  constructor({ api }: ChatTextToSpeechModelProps) {
+  constructor({ $isOpen, api }: ChatTextToSpeechModelProps) {
     this.api = api
-  }
 
-  public setAudioConfig(config: AudioConfig | null) {
-    this.audioConfig = config
+    sample({
+      source: $isOpen.updates,
+      filter: isOpen => !isOpen,
+      target: this.reset,
+    })
   }
 
-  public setConfig({ audioProvider, textSanitizer }: T2SConfig) {
-    if (audioProvider) this.audioProvider = audioProvider
-    if (textSanitizer) this.textSanitizer = textSanitizer
+  public setAudioProvider(audioProvider: AudioProvider) {
+    this.audioProvider = audioProvider
   }
 
   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)
+  async play({ text, messageId, isTranslated, config }: PlayTextToSpeechProps) {
+    if (!this.audioProvider) throw new Error('Audio provider is not set. Use setAudioProvider.')
 
     try {
       const status = this.$status.getState()
@@ -81,7 +67,6 @@ export class ChatTextToSpeechModel {
       this.setCurrentPlayingId(messageId)
 
       if (!audioPath) {
-        const config = this.audioConfig
         const response = await this.api.textToSpeechTextFx({
           input: { text },
           voice: config?.voice ?? DEFAULT_VOICE,

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

@@ -3,8 +3,7 @@ import {
   GetOptionsProps,
   GetOptionsResult,
 } from '../types/translation.types'
-import { GetAlternativesResponse } from '../types/api.types'
-import { ChatAnswer } from '../types/units.types'
+import { ChatAnswer, GetAlternativesResponse } from '../types/api.types'
 
 export function getOptionsForTranslation({
   lastMessage,