@magmamath/students-features 0.2.22 → 0.3.0-rc.0

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

@@ -0,0 +1,222 @@
+import {
+  attach,
+  createEvent,
+  restore,
+  sample,
+  type Store,
+  type Effect,
+  combine,
+  createStore,
+} from 'effector'
+import { createControllerEffect, createEntityFieldStore } from '../../../lib/effector'
+
+import {
+  ChatbotModelProps,
+  ConversationMessage,
+  SendHelpParams,
+  SendHelpProps,
+  SetHintMessageProps,
+} from '../types/model.types'
+import { GetAlternativesResponse, PostMessageResponse } from '../types/api.types'
+
+import { generateRandomId } from '../../../lib/helpers/helpers'
+import { ChatbotAPI } from './api'
+import { ChatbotTranslation } from './translation'
+import { ChatTextToSpeechModel } from './t2s'
+
+export class ChatbotModel {
+  readonly api: ChatbotAPI
+  readonly translation: ChatbotTranslation
+  readonly t2s: ChatTextToSpeechModel
+
+  readonly credits: ChatbotModelProps['credits']
+  public readonly $currentKey = createStore('')
+
+  readonly resetAlternatives = createEvent()
+  readonly setAlternatives = createEvent<GetAlternativesResponse | null>()
+  readonly $alternatives: Store<GetAlternativesResponse | null>
+
+  readonly setIsOpen = createEvent<boolean>()
+  readonly toggleOpen = createEvent()
+  readonly $isOpen = restore(this.setIsOpen, false).on(this.toggleOpen, isOpen => !isOpen)
+
+  // separate messages and alternatives class?
+  public readonly removeLastMessage = createEvent()
+  private readonly setLastMessageKey = createEvent<string>()
+  private readonly $lastMessageKey = restore(this.setLastMessageKey, null)
+
+  readonly setScrollActive = createEvent<boolean>()
+  readonly $isScrollActive = restore(this.setScrollActive, false)
+
+  readonly sendHelpRequestFx: Effect<SendHelpParams, PostMessageResponse | ConversationMessage>
+
+  readonly defaultMessages: ChatbotModelProps['messages']
+
+  constructor({ credits, api, messages, $key }: ChatbotModelProps) {
+    this.api = new ChatbotAPI(api)
+
+    this.defaultMessages = messages
+    this.credits = credits
+    if ($key) {
+      sample({
+        source: $key,
+        target: this.$currentKey,
+      })
+    } else if (credits) {
+      sample({
+        source: combine(
+          credits,
+          ({ $assignmentId, $exerciseId }) => `${$assignmentId}-${$exerciseId}`,
+        ),
+        target: this.$currentKey,
+      })
+    }
+
+    this.$alternatives = restore(this.api.getAlternativesFx.doneData, null)
+      .on(this.setAlternatives, (_, payload) => payload)
+      .reset(this.resetAlternatives)
+
+    // TODO: do not pass this, just what you need
+    this.translation = new ChatbotTranslation(this)
+    this.t2s = new ChatTextToSpeechModel({ $isOpen: this.$isOpen, api: this.api })
+
+    this.sendHelpRequestFx = this.createSendHelpRequestFx()
+    this.initChatReplyWatcher()
+  }
+
+  readonly messages = createEntityFieldStore<ConversationMessage[]>()
+  readonly threadIds = createEntityFieldStore<string>()
+  readonly availableChats = createEntityFieldStore<boolean>()
+
+  private createSendHelpRequestFx() {
+    return attach({
+      source: [this.$currentKey, this.messages.$state, this.translation.$isTranslated],
+      mapParams: (params: SendHelpParams, [key, messages, isTranslated]) => ({
+        ...params,
+        key,
+        messages,
+        isTranslated,
+      }),
+      effect: createControllerEffect(
+        async ({
+          payload,
+          message = '',
+          translationTargetLanguage,
+          translatedMessage,
+          key,
+          messages,
+          isTranslated,
+        }: SendHelpProps) => {
+          this.setLastMessageKey(key)
+
+          const currentMessages = messages[key] || []
+
+          this.messages.setField({
+            key,
+            data: [
+              ...currentMessages,
+              {
+                id: generateRandomId(),
+                message: message ?? '',
+                translatedMessage,
+                isOwnMessage: true,
+                threadId: payload.threadId ?? '',
+                options: [],
+              },
+            ],
+          })
+
+          const response = await this.api.postMessageFx(payload)
+          if (isTranslated) {
+            return await this.translation.translateMessageFx({
+              targetLanguage: translationTargetLanguage as string,
+              message: {
+                ...response,
+                id: generateRandomId(),
+                isOwnMessage: false,
+              },
+            })
+          }
+
+          return response
+        },
+      ),
+    })
+  }
+
+  private initChatReplyWatcher() {
+    sample({
+      clock: this.sendHelpRequestFx.doneData,
+      source: [this.$currentKey, this.messages.$state] as const,
+      fn: ([key, messages], response) => ({ key, messages: messages[key] || [], response }),
+    }).watch(({ key, messages, response }) => {
+      this.messages.setField({
+        key,
+        data: [
+          ...messages,
+          {
+            id: generateRandomId(),
+            message: response.message,
+            isOwnMessage: false,
+            threadId: response.threadId,
+            options: response.options,
+            translatedMessage:
+              'translatedMessage' in response ? response.translatedMessage : undefined,
+          },
+        ],
+      })
+
+      this.threadIds.setField({ key, data: response.threadId })
+    })
+
+    sample({
+      clock: this.sendHelpRequestFx.fail,
+      source: [this.$currentKey, this.messages.$state] as const,
+      fn: ([key, messages]) => ({ key, data: [...messages[key], this.defaultMessages.error] }),
+      filter: (_, { error }) => error.message !== 'Request aborted manually',
+      target: this.messages.setField,
+    })
+
+    sample({
+      clock: this.removeLastMessage,
+      source: [this.$lastMessageKey, this.messages.$state] as const,
+      fn: ([lastMessageKey, messages]) => {
+        const mockData = { key: '', data: [] }
+        if (!lastMessageKey) return mockData
+        const updatedMessages = messages[lastMessageKey]
+        if (!updatedMessages?.length) return mockData
+        updatedMessages.pop()
+        return { key: lastMessageKey, data: updatedMessages }
+      },
+      filter: ([lastMessageKey]) => !!lastMessageKey,
+      target: this.messages.setField,
+    })
+  }
+
+  public startConversation() {
+    const key = this.$currentKey.getState()
+    const messages = this.messages.$state.getState()[key] ?? []
+
+    if (messages.length) return
+
+    this.messages.setField({ key, data: [this.defaultMessages.start] })
+    this.availableChats.setField({ key, data: true })
+  }
+
+  public setHintMessage({ entityId, fieldId, ...message }: SetHintMessageProps) {
+    const options = this.$alternatives.getState()?.options.hints ?? message.options
+    const messagesList = this.messages.$state.getState()
+    const key = `${entityId}-${fieldId}`
+    const messages = messagesList[key]
+    if (messages?.length > 1) return
+    this.messages.setField({ key, data: [{ ...message, options }] })
+  }
+
+  public bindKey($store: Store<string>) {
+    sample({
+      source: $store,
+      target: this.$currentKey,
+    })
+    return this
+  }
+}

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

@@ -1,7 +1,8 @@
-import { restore, createEvent, Store } from 'effector'
+import { restore, createEvent, Store, sample } from 'effector'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
 import { AudioProvider, AudioStatus, PlayTextToSpeechProps } from '../types/t2s.types'
 import { ChatbotAPI } from './api'
+import { createEffect } from 'effector/effector.umd'
 
 type ChatTextToSpeechModelProps = {
   $isOpen: Store<boolean>
@@ -21,8 +22,10 @@ export class ChatTextToSpeechModel {
   constructor({ $isOpen, api }: ChatTextToSpeechModelProps) {
     this.api = api
 
-    $isOpen.updates.watch(isOpen => {
-      if (!isOpen) this.reset()
+    sample({
+      source: $isOpen.updates,
+      filter: isOpen => !isOpen,
+      target: this.reset,
     })
   }
 
@@ -97,9 +100,9 @@ export class ChatTextToSpeechModel {
     this.audioProvider.stop()
   }
 
-  public reset() {
+  public readonly reset = createEffect(() => {
     this.stop()
     this.setStatus(AudioStatus.STOPPED)
     this.setCurrentPlayingId(null)
-  }
+  })
 }

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

@@ -1,231 +1,211 @@
 import { createEvent, restore, attach, createEffect, type Effect, sample } from 'effector'
-import { ChatbotModel } from './model'
+import { ChatbotModel } from './ChatBotModel'
 
 import {
-    TranslateAlternativesFxProps,
-    TranslateBatchFxProps,
-    TranslateMessageFxProps,
+  TranslateAlternativesFxProps,
+  TranslateBatchFxProps,
+  TranslateMessageFxProps,
 } from '../types/translation.types'
 import { ConversationMessage } from '../types/model.types'
 import { GetAlternativesResponse } from '../types/api.types'
 import { decodeHTMLEntities } from '../helpers'
 
 export class ChatbotTranslation {
-    private readonly model: ChatbotModel
+  private readonly model: ChatbotModel
 
-    readonly setIsTranslated = createEvent<boolean>()
-    readonly $isTranslated = restore(this.setIsTranslated, false)
+  readonly setIsTranslated = createEvent<boolean>()
+  readonly $isTranslated = restore(this.setIsTranslated, false)
 
-    readonly translateMessageFx: Effect<TranslateMessageFxProps, ConversationMessage>
-    readonly translateBatchFx: Effect<TranslateBatchFxProps['params'], ConversationMessage[]>
-    readonly translateAlternativesFx: Effect<
-        TranslateAlternativesFxProps['params'],
-        GetAlternativesResponse | null
-    >
+  readonly translateMessageFx: Effect<TranslateMessageFxProps, ConversationMessage>
+  readonly translateBatchFx: Effect<TranslateBatchFxProps['params'], ConversationMessage[]>
+  readonly translateAlternativesFx: Effect<
+    TranslateAlternativesFxProps['params'],
+    GetAlternativesResponse | null
+  >
 
-    constructor(chatbotModel: ChatbotModel) {
-        this.model = chatbotModel
+  constructor(chatbotModel: ChatbotModel) {
+    this.model = chatbotModel
 
-        this.translateAlternativesFx = this.createTranslateAlternativesEffect()
-        this.translateMessageFx = this.createTranslateMessageEffect()
-        this.translateBatchFx = this.createTranslateBatchEffect()
+    this.translateAlternativesFx = this.createTranslateAlternativesEffect()
+    this.translateMessageFx = this.createTranslateMessageEffect()
+    this.translateBatchFx = this.createTranslateBatchEffect()
 
-        this.initTranslationSamples()
-    }
-
-    private shouldSkipTranslation(messages: ConversationMessage[]) {
-        if (this.$isTranslated.getState()) {
-            this.setIsTranslated(false)
-            return true
-        }
-
-        const allTranslated = messages.every(message => message.translatedMessage)
-        if (allTranslated) {
-            this.setIsTranslated(true)
-            return true
-        }
+    this.initTranslationSamples()
+  }
 
-        return false
+  private shouldSkipTranslation(messages: ConversationMessage[]) {
+    if (this.$isTranslated.getState()) {
+      this.setIsTranslated(false)
+      return true
     }
 
-    private initTranslationSamples() {
-        sample({
-            clock: this.translateBatchFx.doneData,
-            source: [this.model.credits.$assignmentId, this.model.credits.$exerciseId] as const,
-            fn: ([assignmentId, exerciseId], translatedMessages) => ({
-                assignmentId,
-                exerciseId,
-                translatedMessages,
-            }),
-        }).watch(({ assignmentId, exerciseId, translatedMessages }) => {
-            this.model.messages.setField({
-                entityId: assignmentId,
-                fieldId: exerciseId,
-                messages: translatedMessages,
-            })
-        })
+    const allTranslated = messages.every(message => message.translatedMessage)
+    if (allTranslated) {
+      this.setIsTranslated(true)
+      return true
     }
 
-    private createTranslateAlternativesEffect() {
-        return attach({
-            source: [this.model.$alternatives],
-            mapParams: (params: TranslateAlternativesFxProps['params'], [alternatives]) => ({
-                params,
-                alternatives,
-            }),
-            effect: createEffect(async ({ alternatives, params }: TranslateAlternativesFxProps) => {
-                const hintAlternatives = alternatives?.options.hints ?? []
-                const defaultAlternatives = alternatives?.options.default ?? []
-
-                const translatedAlternatives = { ...alternatives }
-
-                if (hintAlternatives.length) {
-                    const hintText = hintAlternatives.map(({ text }) => text)
-                    const response = await this.model.api.translateTextFx({
-                        text: hintText,
-                        targetLanguage: params.targetLanguage,
-                    })
-
-                    if (translatedAlternatives.options) {
-                        translatedAlternatives.options.hints = hintAlternatives.map(
-                            (alternative, index) => ({
-                                ...alternative,
-                                translatedMessage: decodeHTMLEntities(
-                                    response.data.translations[index].translatedText,
-                                ),
-                            }),
-                        )
-                    }
-                }
-
-                if (defaultAlternatives.length) {
-                    const defaultText = defaultAlternatives.map(({ text }) => text)
-                    const response = await this.model.api.translateTextFx({
-                        text: defaultText,
-                        targetLanguage: params.targetLanguage,
-                    })
-
-                    if (translatedAlternatives.options) {
-                        translatedAlternatives.options.default = defaultAlternatives.map(
-                            (alternative, index) => ({
-                                ...alternative,
-                                translatedText: decodeHTMLEntities(
-                                    response.data.translations[index].translatedText,
-                                ),
-                            }),
-                        )
-                    }
-                }
-
-                return translatedAlternatives as GetAlternativesResponse | null
-            }),
-        })
-    }
-
-    private createTranslateMessageEffect() {
-        return createEffect(async ({ message, targetLanguage }: TranslateMessageFxProps) => {
-            const optionsText = message.options.map(({ text }) => text)
-            const response = await this.model.api.translateTextFx({
-                text: [message.message, ...optionsText],
-                targetLanguage,
-            })
-
-            const translatedOptions = response.data.translations.slice(1)
-            const optionsCopy = [...message.options]
-            const newOptions = optionsCopy.map((option, index) => ({
-                ...option,
-                translatedText: decodeHTMLEntities(translatedOptions[index].translatedText),
+    return false
+  }
+
+  private initTranslationSamples() {
+    sample({
+      clock: this.translateBatchFx.doneData,
+      source: [this.model.$currentKey] as const,
+      fn: ([key], translatedMessages) => ({ key, data: translatedMessages }),
+      target: this.model.messages.setField,
+    })
+  }
+
+  private createTranslateAlternativesEffect() {
+    return attach({
+      source: [this.model.$alternatives],
+      mapParams: (params: TranslateAlternativesFxProps['params'], [alternatives]) => ({
+        params,
+        alternatives,
+      }),
+      effect: createEffect(async ({ alternatives, params }: TranslateAlternativesFxProps) => {
+        const hintAlternatives = alternatives?.options.hints ?? []
+        const defaultAlternatives = alternatives?.options.default ?? []
+
+        const translatedAlternatives = { ...alternatives }
+
+        if (hintAlternatives.length) {
+          const hintText = hintAlternatives.map(({ text }) => text)
+          const response = await this.model.api.translateTextFx({
+            text: hintText,
+            targetLanguage: params.targetLanguage,
+          })
+
+          if (translatedAlternatives.options) {
+            translatedAlternatives.options.hints = hintAlternatives.map((alternative, index) => ({
+              ...alternative,
+              translatedMessage: decodeHTMLEntities(
+                response.data.translations[index].translatedText,
+              ),
             }))
+          }
+        }
 
-            return {
-                ...message,
-                translatedMessage: decodeHTMLEntities(response.data.translations[0].translatedText),
-                options: newOptions,
-            } as ConversationMessage
-        })
-    }
-
-    private createTranslateBatchEffect() {
-        return attach({
-            source: [this.model.credits.$assignmentId, this.model.credits.$exerciseId, this.model.messages.$state],
-            mapParams: (
-                params: TranslateBatchFxProps['params'],
-                [assignmentId, exerciseId, messages],
-            ) => ({
-                params,
-                assignmentId,
-                exerciseId,
-                messages,
-            }),
-            effect: createEffect(
-                async ({ messages, assignmentId, exerciseId, params }: TranslateBatchFxProps) => {
-                    const currentMessages = messages[assignmentId]?.[exerciseId]?.messages ?? []
-
-                    if (this.shouldSkipTranslation(currentMessages)) {
-                        return currentMessages
-                    }
-
-                    const messagesText = currentMessages.map(({ message }) => message)
-                    const response = await this.model.api.translateTextFx({
-                        text: messagesText,
-                        targetLanguage: params.targetLanguage,
-                    })
-
-                    const lastMessage = currentMessages.at(-1)
-                    const lastMessageTranslatedOptions = lastMessage
-                        ? await this.translateMessageOptions(lastMessage, params.targetLanguage)
-                        : undefined
-
-                    const errorMessageTranslationResponse = await this.model.api.translateTextFx({
-                        text: [this.model.defaultMessages.error.message],
-                        targetLanguage: params.targetLanguage,
-                    })
-
-                    this.model.defaultMessages.error.translatedMessage = decodeHTMLEntities(
-                        errorMessageTranslationResponse.data.translations[0].translatedText,
-                    )
-
-                    // TODO: move this AFTER state update in sample and remove initTranslationSamples it is not needed
-                    // TODO: maybe just one request to translate everything
-                    this.setIsTranslated(true)
-
-                    const translatedMessages = response.data.translations.map(
-                        ({ translatedText }) => translatedText,
-                    )
-
-                    return currentMessages.map((message, index) => {
-                        const isLastMessage = index === currentMessages.length - 1
-                        return {
-                            ...message,
-                            options: isLastMessage ? lastMessageTranslatedOptions : message.options,
-                            translatedMessage: decodeHTMLEntities(translatedMessages[index]),
-                        }
-                    }) as ConversationMessage[]
-                },
-            ),
-        })
-    }
+        if (defaultAlternatives.length) {
+          const defaultText = defaultAlternatives.map(({ text }) => text)
+          const response = await this.model.api.translateTextFx({
+            text: defaultText,
+            targetLanguage: params.targetLanguage,
+          })
+
+          if (translatedAlternatives.options) {
+            translatedAlternatives.options.default = defaultAlternatives.map(
+              (alternative, index) => ({
+                ...alternative,
+                translatedText: decodeHTMLEntities(
+                  response.data.translations[index].translatedText,
+                ),
+              }),
+            )
+          }
+        }
 
-    private async translateMessageOptions(message: ConversationMessage, targetLanguage: string) {
-        if (!message?.options?.length) {
-            const translatedAlternatives = await this.translateAlternativesFx({ targetLanguage })
-            this.model.setAlternatives(translatedAlternatives)
-            return
+        return translatedAlternatives as GetAlternativesResponse | null
+      }),
+    })
+  }
+
+  private createTranslateMessageEffect() {
+    return createEffect(async ({ message, targetLanguage }: TranslateMessageFxProps) => {
+      const optionsText = message.options.map(({ text }) => text)
+      const response = await this.model.api.translateTextFx({
+        text: [message.message, ...optionsText],
+        targetLanguage,
+      })
+
+      const translatedOptions = response.data.translations.slice(1)
+      const optionsCopy = [...message.options]
+      const newOptions = optionsCopy.map((option, index) => ({
+        ...option,
+        translatedText: decodeHTMLEntities(translatedOptions[index].translatedText),
+      }))
+
+      return {
+        ...message,
+        translatedMessage: decodeHTMLEntities(response.data.translations[0].translatedText),
+        options: newOptions,
+      } as ConversationMessage
+    })
+  }
+
+  private createTranslateBatchEffect() {
+    return attach({
+      source: [this.model.$currentKey, this.model.messages.$state],
+      mapParams: (params: TranslateBatchFxProps['params'], [key, messages]) => ({
+        params,
+        messages: messages[key] ?? [],
+      }),
+      effect: createEffect(async ({ messages, params }: TranslateBatchFxProps) => {
+        if (this.shouldSkipTranslation(messages)) {
+          return messages
         }
 
-        const optionsText = message.options.map(({ text }) => text)
+        const messagesText = messages.map(({ message }) => message)
         const response = await this.model.api.translateTextFx({
-            text: optionsText,
-            targetLanguage,
+          text: messagesText,
+          targetLanguage: params.targetLanguage,
         })
 
-        return message.options.map((option, index) => ({
-            ...option,
-            translatedText: decodeHTMLEntities(response.data.translations[index].translatedText),
-        }))
-    }
+        const lastMessage = messages.at(-1)
+        const lastMessageTranslatedOptions = lastMessage
+          ? await this.translateMessageOptions(lastMessage, params.targetLanguage)
+          : undefined
 
-    public reset() {
-        this.setIsTranslated(false)
+        const errorMessageTranslationResponse = await this.model.api.translateTextFx({
+          text: [this.model.defaultMessages.error.message],
+          targetLanguage: params.targetLanguage,
+        })
+
+        this.model.defaultMessages.error.translatedMessage = decodeHTMLEntities(
+          errorMessageTranslationResponse.data.translations[0].translatedText,
+        )
+
+        // TODO: move this AFTER state update in sample and remove initTranslationSamples it is not needed
+        // TODO: maybe just one request to translate everything
+        this.setIsTranslated(true)
+
+        const translatedMessages = response.data.translations.map(
+          ({ translatedText }) => translatedText,
+        )
+
+        return messages.map((message, index) => {
+          const isLastMessage = index === messages.length - 1
+          return {
+            ...message,
+            options: isLastMessage ? lastMessageTranslatedOptions : message.options,
+            translatedMessage: decodeHTMLEntities(translatedMessages[index]),
+          }
+        }) as ConversationMessage[]
+      }),
+    })
+  }
+
+  private async translateMessageOptions(message: ConversationMessage, targetLanguage: string) {
+    if (!message?.options?.length) {
+      const translatedAlternatives = await this.translateAlternativesFx({ targetLanguage })
+      this.model.setAlternatives(translatedAlternatives)
+      return
     }
+
+    const optionsText = message.options.map(({ text }) => text)
+    const response = await this.model.api.translateTextFx({
+      text: optionsText,
+      targetLanguage,
+    })
+
+    return message.options.map((option, index) => ({
+      ...option,
+      translatedText: decodeHTMLEntities(response.data.translations[index].translatedText),
+    }))
+  }
+
+  public reset() {
+    this.setIsTranslated(false)
+  }
 }