@magmamath/students-features 0.4.5 → 0.5.0-rc.1

package/src/features/chatbot/errorSpotting/ErrorSpottingModel.ts

@@ -0,0 +1,150 @@
+import { ChatbotAPI } from '../model/ChatbotApi'
+import { createEvent, createStore, sample, createEffect, Store } from 'effector'
+import { ChatItem, ConversationMessage } from '../types/units.types'
+import { ChatbotContext } from '../types/model.types'
+
+type ErrorSpottingProps = {
+  api: ChatbotAPI
+  $currentChatData: Store<ChatItem>
+  $currentChatContext: Store<ChatbotContext | null>
+}
+
+type ActiveErrorSpottingData = {
+  isActive: boolean
+  isDisabled: boolean
+  strokesIds: string[]
+  validationKey: null | string
+}
+
+type ErrorSpottingReducerProps = {
+  chatData: ChatItem
+  activeSpotting: ActiveErrorSpottingData | null
+  message: ConversationMessage
+  context: ChatbotContext | null
+}
+
+const AUTO_CLOSE_TIMEOUT = 5000
+
+type ErrorSpottingPressedProps = {
+  message: ConversationMessage
+}
+
+export class ErrorSpottingModel {
+  private readonly api: ChatbotAPI
+
+  public readonly errorSpottingPressed = createEvent<ErrorSpottingPressedProps>()
+  private readonly activeDataChanged = createEvent<ActiveErrorSpottingData | null>()
+  private readonly spottingHidden = createEvent()
+
+  public readonly $validationKey = createStore<string | null>(null)
+  public readonly $activeData = createStore<ActiveErrorSpottingData | null>(null)
+    .on(this.activeDataChanged, (_, payload) => payload)
+    .on(this.spottingHidden, (state) => {
+      if (state) return { ...state, isActive: false }
+      return null
+    })
+    .on(this.$validationKey, (state, payload) => {
+      if (!state || payload === null) return state
+      const isDisabled = payload !== state.validationKey
+      return { ...state, isDisabled, isActive: isDisabled ? false : state.isActive }
+    })
+
+  public readonly $isLoading
+
+  private closeTimeout: NodeJS.Timeout | null = null
+
+  public constructor({ api, $currentChatData, $currentChatContext }: ErrorSpottingProps) {
+    this.api = api
+
+    this.$isLoading = api.spotErrorFx.pending
+
+    this.$activeData.on($currentChatData, (state, payload) => {
+      if (!state || state.validationKey !== payload.currentThread?.strokesValidationKey) return null
+    })
+
+    sample({
+      clock: api.spotErrorFx.doneData,
+      source: {
+        chatData: $currentChatData,
+        activeSpotting: this.$activeData,
+        validationKey: this.$validationKey,
+      },
+      fn: (source, result) => {
+        const key = source.chatData.currentThread?.strokesValidationKey || null
+        const currentKey = source.validationKey
+        const isDisabled = !!currentKey && currentKey !== key
+        return {
+          validationKey: key,
+          strokesIds: result.highlightedStrokeIds,
+          isActive: !isDisabled,
+          isDisabled,
+        }
+      },
+      target: this.$activeData,
+    })
+
+    sample({
+      clock: this.errorSpottingPressed,
+      source: {
+        context: $currentChatContext,
+        chatData: $currentChatData,
+        activeSpotting: this.$activeData,
+      },
+      fn: (source, { message }) => ({ ...source, message }),
+      target: createEffect(
+        ({ chatData, activeSpotting, message, context }: ErrorSpottingReducerProps) => {
+          if (!context) throw new Error('Trying to use error spotting in chat without context')
+          if (!chatData.currentThread?.strokes) return
+          if (!activeSpotting) {
+            return this.api
+              .spotErrorFx({
+                strokes: chatData.currentThread.strokes,
+                problemDescription: context.problem,
+                correctAnswer: context.problemAnswer,
+                userAnswer: context.answer ?? '',
+                hint: message.message,
+              })
+              .then(() => {
+                this.scheduleClose()
+              })
+          }
+          this.activeDataChanged({ ...activeSpotting, isActive: !activeSpotting.isActive })
+          this.scheduleClose()
+        },
+      ),
+    })
+
+    this.activeDataChanged.watch((spotting) => {
+      if ((!spotting || !spotting.isActive) && this.closeTimeout) {
+        clearTimeout(this.closeTimeout)
+        this.closeTimeout = null
+      }
+    })
+  }
+
+  private scheduleClose() {
+    if (this.closeTimeout) clearTimeout(this.closeTimeout)
+    this.closeTimeout = setTimeout(() => {
+      this.spottingHidden()
+      this.closeTimeout = null
+    }, AUTO_CLOSE_TIMEOUT)
+  }
+
+  public bindStrokesValidation($store: Store<string | null>) {
+    sample({
+      source: $store,
+      target: this.$validationKey,
+    })
+    return this
+  }
+
+  public abortPendingRequest() {
+    const isPending = this.api.spotErrorFx.pending.getState()
+    if (isPending) this.api.spotErrorFx.controller.abort()
+  }
+
+  public reset() {
+    this.activeDataChanged(null)
+    this.abortPendingRequest()
+  }
+}

package/src/features/chatbot/index.ts

@@ -3,11 +3,10 @@ export { ChatbotModel } from './model/ChatBotModel'
 export { AudioStatus, type AudioProvider } from './types/t2s.types'
 export {
   MessageVariant,
-  type ConversationMessage,
-  type ChatbotRenderer,
   type ChatbotModelProps,
   type IChatDrawBoardAdapter,
 } from './types/model.types'
-export type { PostMessageResponse, ChatAnswer } from './types/api.types'
-export { ChatMessageHandler } from './model/ChatBotMessageHandler'
+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

@@ -1,18 +1,18 @@
 import {
   attach,
+  combine,
+  createEffect,
   createEvent,
+  createStore,
   restore,
   sample,
   type Store,
-  createStore,
-  createEffect,
-  combine,
 } from 'effector'
-import { createControllerEffect, createEntityFieldStore } from '../../../lib/effector'
+import { createControllerEffect } from '../../../lib/effector'
 import {
   ChatbotContext,
   ChatbotModelProps,
-  ConversationMessage,
+  IChatDrawBoardAdapter,
   SendHelpParams,
   SendHelpProps,
   SetHintMessageProps,
@@ -20,20 +20,32 @@ import {
   StartConversationProps,
 } from '../types/model.types'
 import { GetAlternativesResponse } from '../types/api.types'
-import { ChatbotAPI } from './api'
+import { ChatbotAPI } from './ChatbotApi'
 import { ChatbotTranslation } from './translation'
-import { ChatTextToSpeechModel } from './t2s'
-import { AudioProvider } from '../types/t2s.types'
+import { ChatTextToSpeechModel, T2SConfig } from './t2s'
 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 {
-  readonly api: ChatbotAPI
-  readonly translation: ChatbotTranslation
-  readonly t2s: ChatTextToSpeechModel
+  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
 
   public readonly $currentKey = createStore('')
 
@@ -52,95 +64,85 @@ export class ChatbotModel {
   public readonly setContext = createEvent<null | ChatbotContext>()
   public readonly $context = restore(this.setContext, null)
 
-  readonly setScrollActive = createEvent<boolean>()
-  readonly $isScrollActive = restore(this.setScrollActive, false)
+  public readonly setScrollActive = createEvent<boolean>()
+  public readonly $isScrollActive = restore(this.setScrollActive, false)
 
-  readonly sendHelpRequestFx
-
-  readonly defaultMessages: ChatbotModelProps['messages']
-
-  readonly messages = createEntityFieldStore<ConversationMessage[]>()
-  readonly threadIds = createEntityFieldStore<string>()
-  readonly availableChats = createEntityFieldStore<boolean>()
+  private readonly cache = new ChatsCacheModel()
 
   public readonly $currentChatData = combine(
-    {
-      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,
-      }
-    },
+    { data: this.cache.$data, key: this.$currentKey },
+    ({ data, key }) => (data[key] ? { ...data[key], key } : { ...defaultChatData(), key }),
   )
 
-  constructor({ api, messages, $key }: ChatbotModelProps) {
-    this.api = new ChatbotAPI(api)
+  constructor({ api, $key, threadMessagesLimit }: ChatbotModelProps) {
+    this.api = new ChatbotAPI({ ...api, postMessage: this.threadManager.postMessage })
 
-    this.defaultMessages = messages
-    if ($key) sample({ source: $key, target: this.$currentKey })
+    this.threadManager.setApi({ getHint: api.requestHint })
+    if (threadMessagesLimit) {
+      this.threadManager.setMessagesLimit(threadMessagesLimit)
+    }
 
     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: messages,
+      defaultMessages: this.defaultMessages,
       $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)
 
-    this.sendHelpRequestFx = this.createSendHelpRequestFx()
-    this.initChatReplyWatcher()
+    sample({
+      source: this.$isOpen.updates,
+      filter: (isOpen) => !isOpen,
+      target: this.t2s.reset,
+    })
+
+    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,
+    })
   }
 
   private createSendHelpRequestFx() {
     const effect = attach({
-      source: [
-        this.$currentKey,
-        this.translation.$isTranslated,
-        this.$currentChatData,
-        this.$context,
-      ],
-      mapParams: (params: SendHelpParams, [key, isTranslated, currentData, context]) => ({
+      source: [this.$currentKey, this.$context],
+      mapParams: (params: SendHelpParams, [key, context]) => ({
         message: params.message,
         translatedMessage: params.translatedMessage,
         context,
         key,
-        isTranslated,
-        threadId: currentData.threadId,
       }),
       effect: createControllerEffect(
-        async ({
-          message,
-          translatedMessage,
-          key,
-          isTranslated,
-          threadId,
-          context,
-        }: SendHelpProps) => {
-          if (!context) throw new Error('Context is required')
+        async ({ message, translatedMessage, key, context }: SendHelpProps) => {
+          if (!context) throw new Error('Trying to send message in chat without context')
           this.setLastMessageKey(key)
-          this.messages.setField({
-            key,
-            fn: (currentMessages) => [
-              ...(currentMessages || []),
-              messagesHelper.createOwn({ message, translatedMessage, threadId }),
-            ],
+          this.cache.addMessages(key, {
+            messages: [messagesHelper.createOwn({ message, translatedMessage })],
           })
 
           const response = await this.api.postMessageFx({
@@ -148,25 +150,21 @@ export class ChatbotModel {
             language: context.language,
             problemAnswer: context.problemAnswer,
             answer: context.answer,
-            threadId,
             imageAltText: context.imageDescription,
           })
-          let messages = [messagesHelper.createAnswer(response)]
+          const thread = this.threadManager.get(key)
+          let messages = [
+            messagesHelper.createAnswer(response, { isInitial: thread?.history.length === 1 }),
+          ]
           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],
+          messages = await this.translation.applyTranslationFx({
+            targetLanguage: context.translationTargetLanguage,
+            messages,
           })
-          this.threadIds.setField({ key, data: response.threadId })
+
+          this.cache.addMessages(key, { messages, thread })
         },
       ),
     })
@@ -174,29 +172,39 @@ export class ChatbotModel {
     sample({
       clock: effect.fail,
       source: this.$currentChatData,
-      fn: ({ key, messages }) => ({ key, data: [...messages, this.defaultMessages.error] }),
+      fn: ({ key, messages }) => ({
+        key,
+        data: { messages: [...messages, this.defaultMessages.error] },
+      }),
       filter: (_, { error }) => error.message !== 'Request aborted manually',
-      target: this.messages.setField,
+      target: this.cache.update,
     })
 
     return effect
   }
 
-  private initChatReplyWatcher() {
+  public bindKey($store: Store<string>) {
     sample({
-      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,
+      source: $store,
+      target: this.$currentKey,
     })
+    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) => ({
@@ -208,54 +216,54 @@ export class ChatbotModel {
         if (initOnly) return
         return this.reinitConversation({ key })
       }
-      this.messages.setField({ key, data: [this.defaultMessages.start] })
-      this.availableChats.setField({ key, data: true })
+      this.cache.add(key, {
+        messages: [this.defaultMessages.start],
+        isAvailable: true,
+        currentThread: null,
+      })
     }),
   })
 
   public setHintMessage({ key, ...message }: SetHintMessageProps) {
     const options = this.$alternatives.getState()?.options.hints ?? message.options
-    this.messages.setField({
-      key,
-      fn: (messages) => {
-        if (!messages || messages.length > 1) return
-        return [{ ...message, options }]
-      },
-    })
+    this.cache.setSingleMessage(key, { ...message, options })
   }
 
-  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()
-        }
-
-        const lastMessage = copy.at(-1)
-        if (!lastMessage) return
-
-        copy.splice(copy.length - 1, 1, {
-          ...lastMessage,
-          options: [this.defaultMessages.anotherHintOption],
-        })
-        return copy
-      },
-    })
-  })
-
-  public bindKey($store: Store<string>) {
-    sample({
-      source: $store,
-      target: this.$currentKey,
-    })
-    return this
+  public readonly reinitConversation = ({ key }: ReinitConversationProps) => {
+    this.cache.reinitChatThread(key, { initialOption: this.defaultMessages.anotherHintOption })
+    this.threadManager.reset(key)
   }
 
-  public setT2SAudioProvider(audioProvider: AudioProvider) {
-    this.t2s.setAudioProvider(audioProvider)
-    return this
+  public disableChat(key: string) {
+    this.t2s.stop()
+    void this.t2s.reset()
+    this.cache.disableChat(key)
   }
+
+  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()
+
+      this.t2s.stop()
+      void this.t2s.reset()
+      this.translation.reset()
+      this.setScrollActive(false)
+    }),
+  })
+
+  public readonly reset = withEvent(() => {
+    this.cache.reset()
+    this.resetAlternatives()
+    this.threadManager.reset()
+    this.errorSpotting.reset()
+  })
 }

package/src/features/chatbot/model/{ChatBotMessageHandler.ts → ChatBotThreadManager.ts}

@@ -1,6 +1,5 @@
 import { ThreadItem } from './ThreadItem'
 import { Store } from 'effector'
-import { createEffect } from 'effector/effector.umd'
 import {
   ChatHintPayload,
   ChatHintResponse,
@@ -10,25 +9,23 @@ import {
 import { ChatbotMessages, IChatDrawBoardAdapter } from '../types/model.types'
 import { CHAT_BOT_MODEL_DEFAULTS } from './constants'
 
-type ChatMessageHandlerProps = {
-  messagesLimit?: number
-  messages: ChatbotMessages
-  drawBoardAdapter: IChatDrawBoardAdapter
-  api: {
-    getHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
-  }
+type ThreadManagerApi = {
+  getHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
 }
 
-type ResetCacheProps = {
-  key: string
+type ChatBotThreadManagerProps = {
+  messagesLimit?: number
+  drawBoardAdapter?: IChatDrawBoardAdapter
+  messages: ChatbotMessages
+  api?: ThreadManagerApi
 }
 
-export class ChatMessageHandler {
-  private readonly api
-  private readonly drawBoardAdapter: IChatDrawBoardAdapter
+export class ChatBotThreadManager {
+  private api: ThreadManagerApi | null = null
+  private drawBoardAdapter: IChatDrawBoardAdapter | null = null
   private readonly threads = new Map<string, ThreadItem>()
 
-  private readonly messagesLimit
+  private messagesLimit
   private currentKey = ''
   private currentBinding: null | (() => void) = null
 
@@ -39,9 +36,9 @@ export class ChatMessageHandler {
     api,
     messagesLimit = CHAT_BOT_MODEL_DEFAULTS.THREAD_MESSAGES_LIMIT,
     messages,
-  }: ChatMessageHandlerProps) {
-    this.api = api
-    this.drawBoardAdapter = drawBoardAdapter
+  }: ChatBotThreadManagerProps) {
+    if (api) this.api = api
+    this.drawBoardAdapter = drawBoardAdapter ?? null
     this.messagesLimit = messagesLimit
     this.defaultMessages = messages
   }
@@ -58,9 +55,16 @@ export class ChatMessageHandler {
     const key = this.currentKey
     let threadItem = this.threads.get(key)
     if (threadItem) return threadItem
+    if (!this.drawBoardAdapter) {
+      threadItem = new ThreadItem()
+      this.threads.set(key, threadItem)
+      return threadItem
+    }
     try {
-      const strokes = await this.drawBoardAdapter.getVisibleStrokes()
-      threadItem = new ThreadItem({ strokes })
+      const result = await this.drawBoardAdapter.getVisibleStrokes()
+      threadItem = new ThreadItem(
+        result ? { strokes: result.strokes, key: result.validationKey } : null,
+      )
     } catch {
       threadItem = new ThreadItem()
     }
@@ -68,13 +72,22 @@ export class ChatMessageHandler {
     return threadItem
   }
 
-  public readonly postMessageFx = async ({
+  public setDrawBoardAdapter(adapter: IChatDrawBoardAdapter) {
+    this.drawBoardAdapter = adapter
+  }
+
+  public readonly postMessage = async ({
     problemAnswer,
     problem,
     answer,
     language,
     imageAltText,
   }: 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 result = await this.api.getHint({
@@ -86,23 +99,36 @@ export class ChatMessageHandler {
       imageAltText,
     })
 
-    threadItem.hints.push(result.message)
+    threadItem.history.push(result.message)
     const nextOptions =
-      threadItem.hints.length < this.messagesLimit ? [this.defaultMessages.anotherHintOption] : []
+      threadItem.history.length < this.messagesLimit ? [this.defaultMessages.anotherHintOption] : []
 
     return {
       message: result.message,
       options: nextOptions,
-      threadId: '',
       endMessage: !nextOptions.length,
+      threadId: threadItem.id,
     }
   }
 
-  public resetThread = createEffect(({ key }: ResetCacheProps) => {
-    this.threads.delete(key)
-  })
+  public get(key: string) {
+    return this.threads.get(key)
+  }
 
-  public resetAll() {
+  public reset(key?: string) {
+    if (typeof key === 'string') {
+      this.threads.delete(key)
+      return
+    }
     this.threads.clear()
   }
+
+  public setMessagesLimit(limit: number) {
+    this.messagesLimit = limit
+  }
+
+  public setApi(api: ThreadManagerApi) {
+    this.api = api
+    return this
+  }
 }