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

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

@@ -1,34 +1,66 @@
-import { createEvent, restore, attach, createEffect, type Effect, sample } from 'effector'
-
+import { attach, createEffect, createEvent, EventCallable, restore, sample, Store } from 'effector'
 import {
-  TranslateAlternativesFxProps,
+  AddTranslationToAlternativesProps,
   TranslateBatchFxProps,
   TranslateMessageFxProps,
+  TranslateRequestProps,
 } from '../types/translation.types'
-import { ConversationMessage } from '../types/model.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
+  $key: Store<string>
+  defaultMessages: ChatbotModelProps['messages']
+  messagesModel: EntityFieldStore<ConversationMessage[]>
+  alternativesModel: {
+    set: EventCallable<GetAlternativesResponse | null>
+    $store: Store<GetAlternativesResponse | null>
+  }
+}
 
 export class ChatbotTranslation {
-  private readonly model: any
+  private readonly api
+  private readonly $key
+  private readonly defaultMessages
+  private readonly messagesModel
+  private readonly alternativesModel
 
   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
-  >
-
-  constructor(chatbotModel: any) {
-    this.model = chatbotModel
-
-    this.translateAlternativesFx = this.createTranslateAlternativesEffect()
-    this.translateMessageFx = this.createTranslateMessageEffect()
-    this.translateBatchFx = this.createTranslateBatchEffect()
-
+  readonly translateAllMessagesFx
+
+  constructor({
+    api,
+    $key,
+    defaultMessages,
+    messagesModel,
+    alternativesModel,
+  }: ChatbotTranslationProps) {
+    this.api = api
+    this.$key = $key
+    this.defaultMessages = defaultMessages
+    this.messagesModel = messagesModel
+    this.alternativesModel = alternativesModel
+
+    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()
   }
 
@@ -38,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
@@ -49,160 +81,115 @@ export class ChatbotTranslation {
 
   private initTranslationSamples() {
     sample({
-      clock: this.translateBatchFx.doneData,
-      source: [this.model.$currentKey] as const,
+      clock: this.translateAllMessagesFx.doneData,
+      source: [this.$key] as const,
       fn: ([key], translatedMessages) => ({ key, data: translatedMessages }),
-      target: this.model.messages.setField,
+      target: this.messagesModel.setField,
     })
   }
 
-  private createTranslateAlternativesEffect() {
-    return attach({
-      source: [this.model.$alternatives],
-      mapParams: (params: TranslateAlternativesFxProps['params'], [alternatives]): any => ({
-        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 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.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 addTranslationToAlternatives(props: AddTranslationToAlternativesProps) {
+    this.alternativesModel.set(addTranslationsToAlternative(props))
   }
 
-  private createTranslateBatchEffect() {
-    return attach({
-      source: [this.model.$currentKey, this.model.messages.$state],
-      mapParams: (params: TranslateBatchFxProps['params'], [key, messages]: any) => ({
-        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.model.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.model.api.translateTextFx({
-          text: [this.model.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.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 }: any) => 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.model.setAlternatives(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.model.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/api.types.ts

@@ -34,6 +34,7 @@ export type PostMessageResponse = {
   message: string
   threadId: string
   options: ChatAnswer[]
+  endMessage?: boolean
 }
 
 export type GoogleTranslatePayload = {

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
@@ -18,6 +19,7 @@ export type ConversationMessage = {
   options: ChatAnswer[]
   isOwnMessage: boolean
   translatedMessage?: string
+  endMessage?: boolean
 }
 
 export type ChatbotModelProps = {
@@ -31,6 +33,8 @@ export type ChatbotModelProps = {
   messages: {
     error: ConversationMessage
     start: ConversationMessage
+    endMessage: ConversationMessage
+    anotherHintOption: ChatAnswer
   }
 }
 
@@ -43,13 +47,11 @@ export type SendHelpParams = {
 
 export type SendHelpProps = SendHelpParams & {
   key: string
-  messages: Record<string, ConversationMessage[]>
   isTranslated: boolean
 }
 
 export type SetHintMessageProps = {
-  entityId: string
-  fieldId: string
+  key: string
 } & ConversationMessage
 
 export type StartConversationFxData = {
@@ -67,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/effector/createEntityFieldStore.ts

@@ -4,21 +4,23 @@ type UpdateField<T> = {
   key: string
 } & ({ data: T; fn?: never } | { data?: never; fn: (props: T | void) => T | void })
 
-export function createEntityFieldStore<T>() {
-  const setField = createEvent<UpdateField<T>>()
-  const reset = createEvent()
+export class EntityFieldStore<T> {
+  public readonly setField = createEvent<UpdateField<T>>()
+  public readonly reset = createEvent()
 
-  const $state = createStore<Record<string, T>>({})
-    .on(setField, (state, { key, data }) => {
-      if (typeof data === 'function') {
+  public readonly $state = createStore<Record<string, T>>({})
+    .on(this.setField, (state, { key, data, fn }) => {
+      if (fn) {
         const currentData = state[key]
-        const newData = data(currentData)
+        const newData = fn(currentData)
         if (newData === undefined) return state
         return { ...state, [key]: newData }
       }
       return { ...state, [key]: data }
     })
-    .reset(reset)
+    .reset(this.reset)
+}
 
-  return { $state, setField, reset }
+export function createEntityFieldStore<T>() {
+  return new EntityFieldStore<T>()
 }

package/src/lib/helpers/types.ts

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