@magmamath/students-features 0.3.0-rc.18 → 0.3.0-rc.2

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

@@ -4,9 +4,9 @@ import {
   restore,
   sample,
   type Store,
-  createStore,
-  createEffect,
+  type Effect,
   combine,
+  createStore,
 } from 'effector'
 import { createControllerEffect, createEntityFieldStore } from '../../../lib/effector'
 import {
@@ -15,17 +15,16 @@ import {
   SendHelpParams,
   SendHelpProps,
   SetHintMessageProps,
-  StartConversationFxData,
 } from '../types/model.types'
-import { GetAlternativesResponse } from '../types/api.types'
+import { ChatAnswer, GetAlternativesResponse, PostMessageResponse } from '../types/api.types'
+import { generateRandomId } from '../../../lib/helpers/helpers'
 import { ChatbotAPI } from './api'
 import { ChatbotTranslation } from './translation'
 import { ChatTextToSpeechModel } from './t2s'
-import { AudioProvider } from '../types/t2s.types'
-import { messagesHelper } from './messagesHelper'
 
-type ReinitConversationProps = {
+type AddOptionProps = {
   key: string
+  options: ChatAnswer[]
 }
 
 export class ChatbotModel {
@@ -41,129 +40,152 @@ export class ChatbotModel {
 
   readonly setIsOpen = createEvent<boolean>()
   readonly toggleOpen = createEvent()
-  readonly $isOpen = restore(this.setIsOpen, false).on(this.toggleOpen, (isOpen) => !isOpen)
+  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>()
-  public readonly $lastMessageKey = restore(this.setLastMessageKey, null)
+  private readonly $lastMessageKey = restore(this.setLastMessageKey, null)
 
   readonly setScrollActive = createEvent<boolean>()
   readonly $isScrollActive = restore(this.setScrollActive, false)
 
-  readonly sendHelpRequestFx
+  readonly sendHelpRequestFx: Effect<SendHelpParams, PostMessageResponse | ConversationMessage>
 
   readonly defaultMessages: ChatbotModelProps['messages']
 
-  readonly messages = createEntityFieldStore<ConversationMessage[]>()
-  readonly threadIds = createEntityFieldStore<string>()
-  readonly availableChats = createEntityFieldStore<boolean>()
-
-  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,
-      }
-    },
-  )
-
-  constructor({ api, messages, $key }: ChatbotModelProps) {
+  constructor({ credits, api, messages, $key }: ChatbotModelProps) {
     this.api = new ChatbotAPI(api)
 
     this.defaultMessages = messages
-    if ($key) sample({ source: $key, target: this.$currentKey })
+    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)
 
-    this.translation = new ChatbotTranslation({
-      defaultMessages: messages,
-      $key: this.$currentKey,
-      api: this.api,
-      messagesModel: this.messages,
-      alternativesModel: {
-        $store: this.$alternatives,
-        set: this.setAlternatives,
-      },
-    })
-
+    // 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() {
-    const effect = attach({
-      source: [this.$currentKey, this.translation.$isTranslated],
-      mapParams: (params: SendHelpParams, [key, isTranslated]) => ({
+    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: targetLanguage,
+          message = '',
+          translationTargetLanguage,
           translatedMessage,
           key,
+          messages,
           isTranslated,
         }: SendHelpProps) => {
           this.setLastMessageKey(key)
+
+          const currentMessages = messages[key] || []
+
           this.messages.setField({
             key,
-            fn: (currentMessages) => [
-              ...(currentMessages || []),
-              messagesHelper.createOwn({ message, translatedMessage, threadId: payload.threadId }),
+            data: [
+              ...currentMessages,
+              {
+                id: generateRandomId(),
+                message: message ?? '',
+                translatedMessage,
+                isOwnMessage: true,
+                threadId: payload.threadId ?? '',
+                options: [],
+              },
             ],
           })
 
           const response = await this.api.postMessageFx(payload)
-          let messages = [messagesHelper.createAnswer(response)]
-          if (response.endMessage) {
-            messages.push(messagesHelper.createLast(this.defaultMessages.endMessage))
-          }
           if (isTranslated) {
-            messages = await this.translation.translateMessagesFx({ targetLanguage, messages })
+            return await this.translation.translateMessageFx({
+              targetLanguage: translationTargetLanguage as string,
+              message: {
+                ...response,
+                id: generateRandomId(),
+                isOwnMessage: false,
+              },
+            })
           }
 
-          this.messages.setField({
-            key,
-            fn: (currentMessages) => [...(currentMessages || []), ...messages],
-          })
-          this.threadIds.setField({ key, data: response.threadId })
+          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: effect.fail,
-      source: this.$currentChatData,
-      fn: ({ key, messages }) => ({ key, data: [...messages, this.defaultMessages.error] }),
+      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,
     })
 
-    return effect
-  }
-
-  private initChatReplyWatcher() {
     sample({
       clock: this.removeLastMessage,
       source: [this.$lastMessageKey, this.messages.$state] as const,
       fn: ([lastMessageKey, messages]) => {
-        if (!lastMessageKey) return { key: '', data: [] }
-        const updatedMessages = [...messages[lastMessageKey]]
+        const mockData = { key: '', data: [] }
+        if (!lastMessageKey) return mockData
+        const updatedMessages = messages[lastMessageKey]
+        if (!updatedMessages?.length) return mockData
         updatedMessages.pop()
         return { key: lastMessageKey, data: updatedMessages }
       },
@@ -172,48 +194,42 @@ export class ChatbotModel {
     })
   }
 
-  public readonly startConversation = attach({
-    source: this.$currentChatData,
-    mapParams: (_: void, source) => source,
-    effect: createEffect(({ key, messages }: StartConversationFxData) => {
-      if (messages.length) return this.reinitConversation({ key })
-      this.messages.setField({ key, data: [this.defaultMessages.start] })
-      this.availableChats.setField({ key, data: true })
-    }),
-  })
-
-  public setHintMessage({ key, ...message }: SetHintMessageProps) {
+  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
     this.messages.setField({
-      key,
-      fn: (messages) => {
+      key: `${entityId}-${fieldId}`,
+      fn: messages => {
         if (!messages || messages.length > 1) return
         return [{ ...message, options }]
       },
     })
   }
 
-  public readonly reinitConversation = createEffect(({ key }: ReinitConversationProps) => {
+  public addOption({ options, key }: AddOptionProps) {
     this.messages.setField({
       key,
-      fn: (messages) => {
-        if (!messages?.length || messages.length === 1) return
+      fn: messages => {
+        if (!messages?.length) return
+        const lastMessage = messages[messages.length - 1]
         const copy = [...messages]
-        while (copy.at(-1)?.endMessage) {
-          copy.pop()
-        }
-
-        const lastMessage = copy.at(-1)
-        if (!lastMessage) return
-
-        copy.splice(copy.length - 1, 1, {
+        copy.splice(messages.length - 1, 1, {
           ...lastMessage,
-          options: [this.defaultMessages.anotherHintOption],
+          options: [...lastMessage.options, ...options],
         })
         return copy
       },
     })
-  })
+  }
 
   public bindKey($store: Store<string>) {
     sample({
@@ -222,9 +238,4 @@ export class ChatbotModel {
     })
     return this
   }
-
-  public setT2SAudioProvider(audioProvider: AudioProvider) {
-    this.t2s.setAudioProvider(audioProvider)
-    return this
-  }
 }

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

@@ -1,37 +1,46 @@
-import { createEffect } from 'effector'
+import { createEffect, Effect } from 'effector'
+
 import { createControllerEffect } from '../../../lib/effector'
+import { ControlledEffect } from '../../../lib/effector/createControllerEffect'
 import { ChatbotModelProps } from '../types/model.types'
-import { GoogleTranslatePayload, GoogleTranslateResponse } from '../types/api.types'
+import {
+  GetAlternativesResponse,
+  PostMessagePayload,
+  PostMessageResponse,
+  GoogleTranslatePayload,
+  GoogleTranslateResponse,
+  GoogleText2SpeechPayload,
+  GoogleText2SpeechResponse,
+  GetAlternativesPayload,
+} from '../types/api.types'
 import { replaceKatexSyntax } from '../helpers'
 
 export class ChatbotAPI {
-  public readonly postMessageFx
-  public readonly getAlternativesFx
-  public readonly translateTextFx
-  public readonly textToSpeechTextFx
+  postMessageFx: ControlledEffect<PostMessagePayload, PostMessageResponse>
+  getAlternativesFx: Effect<GetAlternativesPayload, GetAlternativesResponse>
+  translateTextFx: Effect<GoogleTranslatePayload, GoogleTranslateResponse>
+  textToSpeechTextFx: Effect<GoogleText2SpeechPayload, GoogleText2SpeechResponse>
 
   constructor(api: ChatbotModelProps['api']) {
     this.postMessageFx = createControllerEffect(api.postMessage)
     this.getAlternativesFx = createEffect(api.getAlternatives)
-    this.translateTextFx = createEffect(
-      async (payload: GoogleTranslatePayload): Promise<GoogleTranslateResponse> => {
-        const response = await api.postTranslateText({
-          ...payload,
-          text: replaceKatexSyntax(payload.text),
-        })
+    this.translateTextFx = createEffect(async (payload: GoogleTranslatePayload) => {
+      const response = await api.postTranslateText({
+        ...payload,
+        text: replaceKatexSyntax(payload.text),
+      })
 
-        return {
-          ...response,
-          data: {
-            ...response.data,
-            translations: response.data.translations.map((translation) => ({
-              ...translation,
-              translatedText: replaceKatexSyntax([translation.translatedText], true)[0],
-            })),
-          },
-        }
-      },
-    )
+      return {
+        ...response,
+        data: {
+          ...response.data,
+          translations: response.data.translations.map(translation => ({
+            ...translation,
+            translatedText: replaceKatexSyntax([translation.translatedText], true)[0],
+          })),
+        },
+      }
+    })
     this.textToSpeechTextFx = createEffect(api.postTextToSpeech)
   }
 }

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

@@ -1,7 +1,8 @@
-import { restore, createEvent, Store, sample, createEffect } 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>