@magmamath/students-features 0.3.0-rc.13 → 0.3.0-rc.15

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

@@ -1,23 +1,20 @@
+import { attach, createEffect, createEvent, EventCallable, restore, sample, Store } from 'effector'
 import {
-  createEvent,
-  restore,
-  attach,
-  createEffect,
-  type Effect,
-  sample,
-  Store,
-  EventCallable,
-} from 'effector'
-import {
-  TranslateAlternativesFxProps,
+  AddTranslationToAlternativesProps,
   TranslateBatchFxProps,
   TranslateMessageFxProps,
+  TranslateRequestProps,
 } from '../types/translation.types'
 import { ChatbotModelProps, ConversationMessage } from '../types/model.types'
 import { GetAlternativesResponse } from '../types/api.types'
 import { decodeHTMLEntities } from '../helpers'
 import { ChatbotAPI } from './api'
 import { EntityFieldStore } from '../../../lib/effector/createEntityFieldStore'
+import {
+  addTranslationsToAlternative,
+  addTranslationToOptions,
+  getOptionsForTranslation,
+} from './translation.helpers'
 
 type ChatbotTranslationProps = {
   api: ChatbotAPI
@@ -40,12 +37,7 @@ export class ChatbotTranslation {
   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 translateAllMessagesFx
 
   constructor({
     api,
@@ -60,10 +52,15 @@ export class ChatbotTranslation {
     this.messagesModel = messagesModel
     this.alternativesModel = alternativesModel
 
-    this.translateAlternativesFx = this.createTranslateAlternativesEffect()
-    this.translateMessageFx = this.createTranslateMessageEffect()
-    this.translateBatchFx = this.createTranslateBatchEffect()
-
+    this.translateAllMessagesFx = attach({
+      source: [this.$key, this.messagesModel.$state, this.alternativesModel.$store],
+      mapParams: (params: TranslateBatchFxProps['params'], [key, messages, alternatives]) => ({
+        params,
+        messages: messages[key] ?? [],
+        alternatives,
+      }),
+      effect: this.translateBatchFx,
+    })
     this.initTranslationSamples()
   }
 
@@ -73,7 +70,7 @@ export class ChatbotTranslation {
       return true
     }
 
-    const allTranslated = messages.every(message => message.translatedMessage)
+    const allTranslated = messages.every((message) => message.translatedMessage)
     if (allTranslated) {
       this.setIsTranslated(true)
       return true
@@ -84,160 +81,115 @@ export class ChatbotTranslation {
 
   private initTranslationSamples() {
     sample({
-      clock: this.translateBatchFx.doneData,
+      clock: this.translateAllMessagesFx.doneData,
       source: [this.$key] as const,
       fn: ([key], translatedMessages) => ({ key, data: translatedMessages }),
       target: this.messagesModel.setField,
     })
   }
 
-  private createTranslateAlternativesEffect() {
-    return attach({
-      source: [this.alternativesModel.$store],
-      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.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.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 async translateRequest<List extends Record<string, string[]>>({
+    textList,
+    targetLanguage,
+  }: TranslateRequestProps<List>) {
+    const text = Object.values(textList).flat()
+    const response = await this.api.translateTextFx({ text, targetLanguage })
+    const translatedText = response.data.translations.map(({ translatedText }) =>
+      decodeHTMLEntities(translatedText),
+    )
+
+    return Object.entries(textList).reduce(
+      (result, [key, texts]) => {
+        result[key as keyof List] = translatedText.splice(0, texts.length)
+        return result
+      },
+      {} as Record<keyof List, string[]>,
+    )
   }
 
-  private createTranslateMessageEffect() {
-    return createEffect(async ({ message, targetLanguage }: TranslateMessageFxProps) => {
-      const optionsText = message.options.map(({ text }) => text)
-      const response = await this.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 addTranslationToAlternatives(props: AddTranslationToAlternativesProps) {
+    this.alternativesModel.set(addTranslationsToAlternative(props))
   }
 
-  private createTranslateBatchEffect() {
-    return attach({
-      source: [this.$key, this.messagesModel.$state],
-      mapParams: (params: TranslateBatchFxProps['params'], [key, messages]) => ({
-        params,
-        messages: messages[key] ?? [],
-      }),
-      effect: createEffect(async ({ messages, params }: TranslateBatchFxProps) => {
-        if (this.shouldSkipTranslation(messages)) {
-          return messages
-        }
-
-        const messagesText = messages.map(({ message }) => message)
-        const response = await this.api.translateTextFx({
-          text: messagesText,
-          targetLanguage: params.targetLanguage,
-        })
-
-        const lastMessage = messages.at(-1)
-        const lastMessageTranslatedOptions = lastMessage
-          ? await this.translateMessageOptions(lastMessage, params.targetLanguage)
-          : undefined
+  private readonly translateBatchFx = createEffect(
+    async ({ messages, params, alternatives }: TranslateBatchFxProps) => {
+      if (this.shouldSkipTranslation(messages)) {
+        return messages
+      }
+
+      const defaultMessages = [this.defaultMessages.error, this.defaultMessages.endMessage]
+      const defaultOptions = [this.defaultMessages.anotherHintOption]
+      const options = getOptionsForTranslation({ lastMessage: messages.at(-1), alternatives })
+
+      const translatedTextsList = await this.translateRequest({
+        textList: {
+          messages: messages.map(({ message }) => message),
+          defaultMessages: defaultMessages.map(({ message }) => message),
+          defaultOptions: defaultOptions.map(({ text }) => text),
+          lastMessage: options.lastMessage || [],
+          alternativesHints: options.alternatives?.hints || [],
+          alternativesDefaults: options.alternatives?.default || [],
+        },
+        targetLanguage: params.targetLanguage,
+      })
 
-        const errorMessageTranslationResponse = await this.api.translateTextFx({
-          text: [this.defaultMessages.error.message],
-          targetLanguage: params.targetLanguage,
+      translatedTextsList.defaultMessages.forEach((message, index) => {
+        defaultMessages[index].translatedMessage = message
+      })
+      translatedTextsList.defaultOptions.forEach((message, index) => {
+        defaultOptions[index].translatedText = message
+      })
+      if (options.alternatives && alternatives) {
+        this.addTranslationToAlternatives({
+          alternatives,
+          translatedHints: translatedTextsList.alternativesHints,
+          translatedDefaults: translatedTextsList.alternativesDefaults,
         })
+      }
 
-        this.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[]
-      }),
-    })
-  }
+      // TODO: move this AFTER state update in sample and remove initTranslationSamples it is not needed
+      this.setIsTranslated(true)
 
-  private async translateMessageOptions(message: ConversationMessage, targetLanguage: string) {
-    if (!message?.options?.length) {
-      const translatedAlternatives = await this.translateAlternativesFx({ targetLanguage })
-      this.alternativesModel.set(translatedAlternatives)
-      return
-    }
+      return messages.map((message, index): ConversationMessage => {
+        const isLastMessage = index === messages.length - 1
+        return {
+          ...message,
+          options: isLastMessage
+            ? addTranslationToOptions(message.options, translatedTextsList.lastMessage)
+            : message.options,
+          translatedMessage: translatedTextsList.messages[index],
+        }
+      })
+    },
+  )
 
-    const optionsText = message.options.map(({ text }) => text)
-    const response = await this.api.translateTextFx({
-      text: optionsText,
+  public readonly translateMessagesFx = createEffect(
+    async ({
+      messages,
       targetLanguage,
-    })
-
-    return message.options.map((option, index) => ({
-      ...option,
-      translatedText: decodeHTMLEntities(response.data.translations[index].translatedText),
-    }))
-  }
+    }: TranslateMessageFxProps): Promise<ConversationMessage[]> => {
+      const text = messages
+        .map(({ options, message }) => {
+          return [message, ...options.map(({ text }) => text)]
+        })
+        .flat()
+
+      const response = await this.api.translateTextFx({ text, targetLanguage })
+      const translatedTexts = response.data.translations.map(({ translatedText }) =>
+        decodeHTMLEntities(translatedText),
+      )
+
+      return messages.map((message): ConversationMessage => {
+        const options = message.options
+        const translatedMessage = translatedTexts.shift()
+        return {
+          ...message,
+          translatedMessage,
+          options: addTranslationToOptions(options, translatedTexts.splice(0, options.length)),
+        }
+      })
+    },
+  )
 
   public reset() {
     this.setIsTranslated(false)

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

@@ -10,6 +10,7 @@ import {
   ChatAnswer,
   GetAlternativesPayload,
 } from './api.types'
+import { AccomplishTo } from '../../../lib/helpers/types'
 
 export type ConversationMessage = {
   id: string
@@ -32,6 +33,8 @@ export type ChatbotModelProps = {
   messages: {
     error: ConversationMessage
     start: ConversationMessage
+    endMessage: ConversationMessage
+    anotherHintOption: ChatAnswer
   }
 }
 
@@ -66,3 +69,5 @@ export type ChatbotRenderer = {
   variant: MessageVariant
   withTextToSpeech: boolean
 }
+
+export type CreateMessageResponse = AccomplishTo<PostMessageResponse, ConversationMessage>

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

@@ -6,16 +6,32 @@ export type TranslateBatchFxProps = {
   params: {
     targetLanguage: string
   }
+  alternatives: GetAlternativesResponse | null
 }
 
 export type TranslateMessageFxProps = {
-  message: ConversationMessage
+  messages: ConversationMessage[]
   targetLanguage: string
 }
 
-export type TranslateAlternativesFxProps = {
+export type AddTranslationToAlternativesProps = {
+  alternatives: GetAlternativesResponse
+  translatedHints: string[]
+  translatedDefaults: string[]
+}
+export type GetOptionsProps = {
   alternatives: GetAlternativesResponse | null
-  params: {
-    targetLanguage: string
-  }
+  lastMessage: ConversationMessage | undefined
+}
+export type GetOptionsResult = {
+  lastMessage: string[] | null
+  alternatives: {
+    hints: string[]
+    default: string[]
+  } | null
+}
+
+export type TranslateRequestProps<List extends Record<string, string[]>> = {
+  textList: List
+  targetLanguage: string
 }

package/src/index.ts

@@ -1,4 +1,5 @@
 export { useFeaturesLocalization, setFeaturesLocalization, Locale } from './shared/translation'
 export type { LocalizationConfig } from './shared/translation'
+export { generateRandomId } from './lib/helpers/helpers'
 export * from './features/chatbot'
 export * from './features/feedback'

package/src/lib/helpers/types.ts

@@ -0,0 +1 @@
+export type AccomplishTo<T, To> = Partial<Omit<To, keyof T>> & T