@magmamath/students-features 0.3.0-rc.8 → 0.3.0

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

@@ -22,6 +22,7 @@ type ChatbotProps = {
   }
   ButtonWrapper: ComponentType<PropsWithChildren>
   renderer?: (props: ChatbotRenderer) => ReactNode
+  iconSize?: { width: number; height: number } // TODO: use number instead
 }
 
 export const Chatbot = ({
@@ -35,18 +36,13 @@ export const Chatbot = ({
   isTranslationEnabled,
   renderer,
   ButtonWrapper,
+  iconSize,
 }: ChatbotProps) => {
-  const currentKey = useUnit(model.$currentKey)
   const alternatives = useUnit(model.$alternatives)
-
-  const isAvailable = useStoreMap({
-    store: model.availableChats.$state,
-    keys: [currentKey],
-    fn: state => !!state[currentKey],
-  })
+  const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
 
   const translateMessages = () => {
-    void model.translation.translateBatchFx({
+    void model.translation.translateAllMessagesFx({
       targetLanguage: translationTargetLanguage,
     })
   }
@@ -78,6 +74,7 @@ export const Chatbot = ({
         onPressClose={closeChat}
         isTranslationEnabled={isTranslationEnabled}
         ButtonWrapper={ButtonWrapper}
+        iconSize={iconSize}
       />
     </>
   )

package/src/features/chatbot/index.ts

@@ -1,4 +1,10 @@
 export { Chatbot } from './components/Chatbot'
 export { ChatbotModel } from './model/ChatBotModel'
 export { AudioStatus, type AudioProvider } from './types/t2s.types'
-export { MessageVariant, type ConversationMessage, type ChatbotRenderer } from './types/model.types'
+export {
+  MessageVariant,
+  type ConversationMessage,
+  type ChatbotRenderer,
+  type ChatbotModelProps,
+} from './types/model.types'
+export type { PostMessageResponse, ChatAnswer } from './types/api.types'

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

@@ -4,10 +4,9 @@ import {
   restore,
   sample,
   type Store,
-  type Effect,
-  combine,
   createStore,
   createEffect,
+  combine,
 } from 'effector'
 import { createControllerEffect, createEntityFieldStore } from '../../../lib/effector'
 import {
@@ -18,12 +17,12 @@ import {
   SetHintMessageProps,
   StartConversationFxData,
 } from '../types/model.types'
-import { ChatAnswer, GetAlternativesResponse, PostMessageResponse } from '../types/api.types'
-import { generateRandomId } from '../../../lib/helpers/helpers'
+import { GetAlternativesResponse } from '../types/api.types'
 import { ChatbotAPI } from './api'
 import { ChatbotTranslation } from './translation'
 import { ChatTextToSpeechModel } from './t2s'
 import { AudioProvider } from '../types/t2s.types'
+import { messagesHelper } from './messagesHelper'
 
 type ReinitConversationProps = {
   key: string
@@ -42,9 +41,8 @@ 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)
@@ -52,134 +50,120 @@ export class ChatbotModel {
   readonly setScrollActive = createEvent<boolean>()
   readonly $isScrollActive = restore(this.setScrollActive, false)
 
-  readonly sendHelpRequestFx: Effect<SendHelpParams, PostMessageResponse | ConversationMessage>
+  readonly sendHelpRequestFx
 
   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) {
     this.api = new ChatbotAPI(api)
 
     this.defaultMessages = messages
-    if ($key) {
-      sample({
-        source: $key,
-        target: this.$currentKey,
-      })
-    }
+    if ($key) sample({ source: $key, 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.translation = new ChatbotTranslation({
+      defaultMessages: messages,
+      $key: this.$currentKey,
+      api: this.api,
+      messagesModel: this.messages,
+      alternativesModel: {
+        $store: this.$alternatives,
+        set: this.setAlternatives,
+      },
+    })
+
     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]) => ({
+    const effect = attach({
+      source: [this.$currentKey, this.translation.$isTranslated],
+      mapParams: (params: SendHelpParams, [key, isTranslated]) => ({
         ...params,
         key,
-        messages,
         isTranslated,
       }),
       effect: createControllerEffect(
         async ({
           payload,
-          message = '',
-          translationTargetLanguage,
+          message,
+          translationTargetLanguage: targetLanguage,
           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: [],
-              },
+            fn: (currentMessages) => [
+              ...(currentMessages || []),
+              messagesHelper.createOwn({ message, translatedMessage, threadId: payload.threadId }),
             ],
           })
 
           const response = await this.api.postMessageFx(payload)
+          let messages = [messagesHelper.createAnswer(response)]
+          if (response.endMessage) {
+            messages.push(messagesHelper.createLast(this.defaultMessages.endMessage))
+          }
           if (isTranslated) {
-            return await this.translation.translateMessageFx({
-              targetLanguage: translationTargetLanguage as string,
-              message: {
-                ...response,
-                id: generateRandomId(),
-                isOwnMessage: false,
-              },
-            })
+            messages = await this.translation.translateMessagesFx({ targetLanguage, messages })
           }
 
-          return response
+          this.messages.setField({
+            key,
+            fn: (currentMessages) => [...(currentMessages || []), ...messages],
+          })
+          this.threadIds.setField({ key, data: response.threadId })
         },
       ),
     })
-  }
 
-  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] }),
+      clock: effect.fail,
+      source: this.$currentChatData,
+      fn: ({ key, messages }) => ({ key, data: [...messages, 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]) => {
-        const mockData = { key: '', data: [] }
-        if (!lastMessageKey) return mockData
-        const updatedMessages = messages[lastMessageKey]
-        if (!updatedMessages?.length) return mockData
+        if (!lastMessageKey) return { key: '', data: [] }
+        const updatedMessages = [...messages[lastMessageKey]]
         updatedMessages.pop()
         return { key: lastMessageKey, data: updatedMessages }
       },
@@ -189,27 +173,20 @@ export class ChatbotModel {
   }
 
   public readonly startConversation = attach({
-    source: {
-      key: this.$currentKey,
-      messages: this.messages.$state,
-    },
-    mapParams: (_: void, source) => ({
-      key: source.key,
-      messages: source.messages[source.key] ?? [],
-    }),
+    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({ entityId, fieldId, ...message }: SetHintMessageProps) {
+  public setHintMessage({ key, ...message }: SetHintMessageProps) {
     const options = this.$alternatives.getState()?.options.hints ?? message.options
     this.messages.setField({
-      key: `${entityId}-${fieldId}`,
-      fn: messages => {
+      key,
+      fn: (messages) => {
         if (!messages || messages.length > 1) return
         return [{ ...message, options }]
       },
@@ -219,13 +196,19 @@ export class ChatbotModel {
   public readonly reinitConversation = createEffect(({ key }: ReinitConversationProps) => {
     this.messages.setField({
       key,
-      fn: messages => {
-        if (!messages?.length) return
-        const lastMessage = messages[messages.length - 1]
+      fn: (messages) => {
+        if (!messages?.length || messages.length === 1) return
         const copy = [...messages]
-        copy.splice(messages.length - 1, 1, {
+        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.start.options,
+          options: [this.defaultMessages.anotherHintOption],
         })
         return copy
       },

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

@@ -1,46 +1,37 @@
-import { createEffect, Effect } from 'effector'
-
+import { createEffect } from 'effector'
 import { createControllerEffect } from '../../../lib/effector'
-import { ControlledEffect } from '../../../lib/effector/createControllerEffect'
 import { ChatbotModelProps } from '../types/model.types'
-import {
-  GetAlternativesResponse,
-  PostMessagePayload,
-  PostMessageResponse,
-  GoogleTranslatePayload,
-  GoogleTranslateResponse,
-  GoogleText2SpeechPayload,
-  GoogleText2SpeechResponse,
-  GetAlternativesPayload,
-} from '../types/api.types'
+import { GoogleTranslatePayload, GoogleTranslateResponse } from '../types/api.types'
 import { replaceKatexSyntax } from '../helpers'
 
 export class ChatbotAPI {
-  postMessageFx: ControlledEffect<PostMessagePayload, PostMessageResponse>
-  getAlternativesFx: Effect<GetAlternativesPayload, GetAlternativesResponse>
-  translateTextFx: Effect<GoogleTranslatePayload, GoogleTranslateResponse>
-  textToSpeechTextFx: Effect<GoogleText2SpeechPayload, GoogleText2SpeechResponse>
+  public readonly postMessageFx
+  public readonly getAlternativesFx
+  public readonly translateTextFx
+  public readonly textToSpeechTextFx
 
   constructor(api: ChatbotModelProps['api']) {
     this.postMessageFx = createControllerEffect(api.postMessage)
     this.getAlternativesFx = createEffect(api.getAlternatives)
-    this.translateTextFx = createEffect(async (payload: GoogleTranslatePayload) => {
-      const response = await api.postTranslateText({
-        ...payload,
-        text: replaceKatexSyntax(payload.text),
-      })
+    this.translateTextFx = createEffect(
+      async (payload: GoogleTranslatePayload): Promise<GoogleTranslateResponse> => {
+        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/messagesHelper.ts

@@ -0,0 +1,48 @@
+import { generateRandomId } from '../../../lib/helpers/helpers'
+import { ConversationMessage, CreateMessageResponse } from '../types/model.types'
+
+type OwnMessageProps = {
+  message?: string
+  translatedMessage?: string
+  threadId?: string | null
+}
+
+export class messagesHelper {
+  public static createAnswer(data: CreateMessageResponse): ConversationMessage {
+    return {
+      id: generateRandomId(),
+      isOwnMessage: false,
+      message: data.message,
+      threadId: data.threadId,
+      options: data.options,
+      translatedMessage: data.translatedMessage,
+    }
+  }
+
+  public static createLast(data: CreateMessageResponse) {
+    return {
+      id: generateRandomId(),
+      message: data.message,
+      translatedMessage: data.translatedMessage,
+      isOwnMessage: false,
+      options: [],
+      threadId: '',
+      endMessage: true,
+    }
+  }
+
+  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,8 +1,7 @@
-import { restore, createEvent, Store, sample } 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 './api'
-import { createEffect } from 'effector/effector.umd'
 
 type ChatTextToSpeechModelProps = {
   $isOpen: Store<boolean>

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

@@ -0,0 +1,58 @@
+import {
+  AddTranslationToAlternativesProps,
+  GetOptionsProps,
+  GetOptionsResult,
+} from '../types/translation.types'
+import { ChatAnswer, GetAlternativesResponse } from '../types/api.types'
+
+export function getOptionsForTranslation({
+  lastMessage,
+  alternatives,
+}: GetOptionsProps): GetOptionsResult {
+  if (!lastMessage) return { lastMessage: null, alternatives: null }
+  if (!lastMessage.options.length) {
+    if (!alternatives) return { lastMessage: null, alternatives: null }
+    const hintAlternatives = alternatives.options.hints ?? []
+    const defaultAlternatives = alternatives.options.default ?? []
+    return {
+      lastMessage: null,
+      alternatives: {
+        hints: hintAlternatives.map(({ text }) => text),
+        default: defaultAlternatives.map(({ text }) => text),
+      },
+    }
+  }
+
+  return {
+    lastMessage: lastMessage.options.map(({ text }) => text),
+    alternatives: null,
+  }
+}
+
+export function addTranslationsToAlternative({
+  alternatives,
+  translatedHints,
+  translatedDefaults,
+}: AddTranslationToAlternativesProps): GetAlternativesResponse {
+  return {
+    ...alternatives,
+    options: {
+      ...alternatives.options,
+      hints: translatedHints.map((translatedText, index) => ({
+        ...alternatives.options.hints[index],
+        translatedText,
+      })),
+      default: translatedDefaults.map((translatedText, index) => ({
+        ...alternatives.options.default[index],
+        translatedText,
+      })),
+    },
+  }
+}
+
+export function addTranslationToOptions(options: ChatAnswer[], translations: string[]) {
+  return options.map((option, index) => ({
+    ...option,
+    translatedText: translations[index],
+  }))
+}