@magmamath/students-features 0.4.4 → 0.5.0-rc.0

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

@@ -1,7 +1,8 @@
-import { ChatAnswer, PostMessageResponse } from '../types/api.types'
-import { createEvent } from 'effector'
+import { PostMessageResponse } from '../types/api.types'
+import { Event } from 'effector'
+import { ChatAnswer } from '../types/units.types'
 
-type ChatMessage = PostMessageResponse & {
+type ChatMessage = Omit<PostMessageResponse, 'threadId'> & {
   id: string
   isOwnMessage: boolean
 }
@@ -15,30 +16,17 @@ type DefaultMessageCreatorProps<K extends string> = {
 }
 
 export class DefaultMessagesCreator<K extends string> {
-  public readonly languageChanged = createEvent()
-
   private readonly list = new Map<ChatMessage | ChatAnswer, K>()
   private readonly getter
 
   constructor({ textGetter }: DefaultMessageCreatorProps<K>) {
     this.getter = textGetter
-
-    this.languageChanged.watch(() => {
-      this.list.forEach((key, chatMessage) => {
-        if ('message' in chatMessage) {
-          chatMessage.message = this.getter(key)
-          return
-        }
-        chatMessage.text = this.getter(key)
-      })
-    })
   }
 
   public createMessage(key: K, { isOwn = false }: DefaultMessageSettings = {}) {
     const message: ChatMessage = {
       id: this.list.size.toString(),
       message: this.getter(key),
-      threadId: '',
       options: [],
       isOwnMessage: isOwn,
     }
@@ -54,4 +42,17 @@ export class DefaultMessagesCreator<K extends string> {
     this.list.set(option, key)
     return option
   }
+
+  public bindToLanguageChanged(event: Event<unknown>) {
+    event.watch(() => {
+      this.list.forEach((key, chatMessage) => {
+        if ('message' in chatMessage) {
+          chatMessage.message = this.getter(key)
+          return
+        }
+        chatMessage.text = this.getter(key)
+      })
+    })
+    return this
+  }
 }

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

@@ -1,26 +1,31 @@
-import { Stroke } from '../types/api.types'
+import { FullStrokeData, IThreadItem } from '../types/units.types'
+import { generateRandomId } from '../../../lib/helpers/helpers'
 
 type ThreadItemProps = {
-  strokes?: Stroke[] | null
+  strokes: FullStrokeData[]
+  key: string
 }
 
-export class ThreadItem {
-  public readonly strokes: Stroke[] | null
-  public readonly hints: string[] = []
+export class ThreadItem implements IThreadItem {
+  public readonly id = generateRandomId()
+  public readonly strokesValidationKey: string | null = null
+  public readonly strokes: FullStrokeData[] | null
+  public readonly history: string[] = []
 
-  public constructor({ strokes }: ThreadItemProps = {}) {
-    this.strokes = strokes ?? null
+  public constructor(props?: ThreadItemProps | null) {
+    this.strokes = props?.strokes ?? null
+    this.strokesValidationKey = props?.key ?? null
   }
 
   public getNextHintProps() {
-    if (this.hints.length) {
+    if (this.history.length) {
       return {
-        previousHint: this.hints[this.hints.length - 1],
+        previousHint: this.history[this.history.length - 1],
       }
     }
 
     if (this.strokes) {
-      return { stroke: this.strokes }
+      return { stroke: this.strokes.map(({ x, y }) => ({ x, y })) }
     }
 
     return {}

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

@@ -1,3 +1,5 @@
+import { ChatbotMessages } from '../types/model.types'
+
 export const CHAT_BOT_MODEL_DEFAULTS = {
   THREAD_MESSAGES_LIMIT: 3,
 }

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

@@ -1,21 +1,29 @@
 import { generateRandomId } from '../../../lib/helpers/helpers'
-import { ConversationMessage, CreateMessageResponse } from '../types/model.types'
+import { CreateMessageResponse } from '../types/model.types'
+import { ConversationMessage } from '../types/units.types'
 
 type OwnMessageProps = {
   message?: string
   translatedMessage?: string
-  threadId?: string | null
+}
+
+type CreateAnswerSettings = {
+  isInitial?: boolean
 }
 
 export class messagesHelper {
-  public static createAnswer(data: CreateMessageResponse): ConversationMessage {
+  public static createAnswer(
+    data: CreateMessageResponse,
+    { isInitial }: CreateAnswerSettings = {},
+  ): ConversationMessage {
     return {
       id: generateRandomId(),
       isOwnMessage: false,
       message: data.message,
-      threadId: data.threadId,
       options: data.options,
+      threadId: data.threadId,
       translatedMessage: data.translatedMessage,
+      isInitial,
     }
   }
 
@@ -26,7 +34,6 @@ export class messagesHelper {
       translatedMessage: data.translatedMessage,
       isOwnMessage: false,
       options: [],
-      threadId: '',
       endMessage: true,
     }
   }
@@ -34,13 +41,11 @@ export class messagesHelper {
   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,13 +1,22 @@
-import { restore, createEvent, Store, sample, createEffect } from 'effector'
+import { restore, createEvent, createEffect } from 'effector'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
 import { AudioProvider, AudioStatus, PlayTextToSpeechProps } from '../types/t2s.types'
-import { ChatbotAPI } from './api'
+import { ChatbotAPI } from './ChatbotApi'
 
 type ChatTextToSpeechModelProps = {
-  $isOpen: Store<boolean>
   api: ChatbotAPI
 }
 
+export type T2SConfig = {
+  audioProvider?: AudioProvider
+  textSanitizer?: (speech: string) => string
+}
+
+type AudioConfig = {
+  voice?: typeof DEFAULT_VOICE
+  audioConfig?: typeof AUDIO_CONFIG
+}
+
 export class ChatTextToSpeechModel {
   private readonly api: ChatbotAPI
   private readonly audioCache: Record<string, string> = {}
@@ -18,26 +27,31 @@ export class ChatTextToSpeechModel {
   readonly setStatus = createEvent<AudioStatus>()
   readonly $status = restore(this.setStatus, AudioStatus.STOPPED)
 
-  constructor({ $isOpen, api }: ChatTextToSpeechModelProps) {
+  private audioConfig: AudioConfig | null = null
+  private textSanitizer = (value: string) => value
+
+  constructor({ api }: ChatTextToSpeechModelProps) {
     this.api = api
+  }
 
-    sample({
-      source: $isOpen.updates,
-      filter: isOpen => !isOpen,
-      target: this.reset,
-    })
+  public setAudioConfig(config: AudioConfig | null) {
+    this.audioConfig = config
   }
 
-  public setAudioProvider(audioProvider: AudioProvider) {
-    this.audioProvider = audioProvider
+  public setConfig({ audioProvider, textSanitizer }: T2SConfig) {
+    if (audioProvider) this.audioProvider = audioProvider
+    if (textSanitizer) this.textSanitizer = textSanitizer
   }
 
   private getCacheKey = (messageId: string, isTranslated: boolean) => {
     return `${messageId}-${isTranslated ? 'translated' : 'original'}`
   }
 
-  async play({ text, messageId, isTranslated, config }: PlayTextToSpeechProps) {
-    if (!this.audioProvider) throw new Error('Audio provider is not set. Use setAudioProvider.')
+  public async play({ message, isTranslated }: PlayTextToSpeechProps) {
+    if (!this.audioProvider) throw new Error('Audio provider is not set. Use setConfig.')
+    const messageText = isTranslated ? message.translatedMessage! : message.message
+    const messageId = message.id
+    const text = this.textSanitizer(messageText)
 
     try {
       const status = this.$status.getState()
@@ -67,6 +81,7 @@ export class ChatTextToSpeechModel {
       this.setCurrentPlayingId(messageId)
 
       if (!audioPath) {
+        const config = this.audioConfig
         const response = await this.api.textToSpeechTextFx({
           input: { text },
           voice: config?.voice ?? DEFAULT_VOICE,

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

@@ -3,7 +3,8 @@ import {
   GetOptionsProps,
   GetOptionsResult,
 } from '../types/translation.types'
-import { ChatAnswer, GetAlternativesResponse } from '../types/api.types'
+import { GetAlternativesResponse } from '../types/api.types'
+import { ChatAnswer } from '../types/units.types'
 
 export function getOptionsForTranslation({
   lastMessage,

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

@@ -5,27 +5,29 @@ import {
   TranslateMessageFxProps,
   TranslateRequestProps,
 } from '../types/translation.types'
-import { ChatbotContext, ChatbotMessages, ConversationMessage } from '../types/model.types'
+import { ChatbotContext, ChatbotMessages } 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 { ChatbotAPI } from './ChatbotApi'
 import {
   addTranslationsToAlternative,
   addTranslationToOptions,
   getOptionsForTranslation,
 } from './translation.helpers'
 
+import { ChatsCacheModel } from './ChatsCacheModel'
+import { ConversationMessage } from '../types/units.types'
+
 type ChatbotTranslationProps = {
   api: ChatbotAPI
   $key: Store<string>
   defaultMessages: ChatbotMessages
-  messagesModel: EntityFieldStore<ConversationMessage[]>
   $context: Store<ChatbotContext | null>
   alternativesModel: {
     set: EventCallable<GetAlternativesResponse | null>
     $store: Store<GetAlternativesResponse | null>
   }
+  chats: ChatsCacheModel
 }
 
 export class ChatbotTranslation {
@@ -33,7 +35,6 @@ export class ChatbotTranslation {
   private readonly $key
   private readonly $context
   private readonly defaultMessages
-  private readonly messagesModel
   private readonly alternativesModel
 
   readonly setIsTranslated = createEvent<boolean>()
@@ -45,27 +46,32 @@ export class ChatbotTranslation {
     api,
     $key,
     defaultMessages,
-    messagesModel,
     alternativesModel,
     $context,
+    chats,
   }: ChatbotTranslationProps) {
     this.api = api
     this.$key = $key
     this.$context = $context
     this.defaultMessages = defaultMessages
-    this.messagesModel = messagesModel
     this.alternativesModel = alternativesModel
 
     this.translateAllMessagesFx = attach({
-      source: [this.$key, this.messagesModel.$state, this.alternativesModel.$store, this.$context],
-      mapParams: (_: void, [key, messages, alternatives, context]) => ({
+      source: [this.$key, chats.$data, this.alternativesModel.$store, this.$context],
+      mapParams: (_: void, [key, chats, alternatives, context]) => ({
         targetLanguage: context?.translationTargetLanguage ?? '',
-        messages: messages[key] ?? [],
+        messages: chats[key]?.messages ?? [],
         alternatives,
       }),
       effect: this.translateBatchFx,
     })
-    this.initTranslationSamples()
+
+    sample({
+      clock: this.translateAllMessagesFx.doneData,
+      source: [this.$key] as const,
+      fn: ([key], translatedMessages) => ({ key, data: { messages: translatedMessages } }),
+      target: chats.update,
+    })
   }
 
   private shouldSkipTranslation(messages: ConversationMessage[]) {
@@ -83,15 +89,6 @@ export class ChatbotTranslation {
     return false
   }
 
-  private initTranslationSamples() {
-    sample({
-      clock: this.translateAllMessagesFx.doneData,
-      source: [this.$key] as const,
-      fn: ([key], translatedMessages) => ({ key, data: translatedMessages }),
-      target: this.messagesModel.setField,
-    })
-  }
-
   private async translateRequest<List extends Record<string, string[]>>({
     textList,
     targetLanguage,
@@ -167,33 +164,42 @@ export class ChatbotTranslation {
     },
   )
 
-  public readonly translateMessagesFx = createEffect(
-    async ({
-      messages,
-      targetLanguage,
-    }: TranslateMessageFxProps): Promise<ConversationMessage[]> => {
-      const text = messages
-        .map(({ options, message }) => {
-          return [message, ...options.map(({ text }) => text)]
+  public readonly applyTranslationFx = attach({
+    source: { isTranslated: this.$isTranslated },
+    mapParams: (props: Omit<TranslateMessageFxProps, 'isTranslated'>, source) => ({
+      ...props,
+      ...source,
+    }),
+    effect: createEffect(
+      async ({
+        messages,
+        targetLanguage,
+        preventTranslate,
+      }: TranslateMessageFxProps): Promise<ConversationMessage[]> => {
+        if (!preventTranslate) return messages
+        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)),
+          }
         })
-        .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

@@ -1,8 +1,4 @@
-export type ChatAnswer = {
-  text: string
-  promptKey: string
-  translatedText?: string
-}
+import { ChatAnswer, Stroke } from './units.types'
 
 export type GetAlternativesPayload = {
   municipalityId: string
@@ -21,16 +17,15 @@ export type PostMessagePayload = {
   language: string
   problemAnswer: string[]
   answer?: string | string[]
-  threadId?: string | null
   problem: string
   imageAltText?: string
 }
 
 export type PostMessageResponse = {
   message: string
-  threadId: string
   options: ChatAnswer[]
   endMessage?: boolean
+  threadId: string
 }
 
 export type GoogleTranslatePayload = {
@@ -61,11 +56,6 @@ export type GoogleText2SpeechPayload = {
 
 export type GoogleText2SpeechResponse = string | undefined | { audioContent?: string }
 
-export type Stroke = {
-  x: number[]
-  y: number[]
-}
-
 export type ChatHintPayload = {
   problemDescription: string
   correctAnswer: string[]

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

@@ -1,27 +1,18 @@
 import type { Store } from 'effector'
 import {
+  ChatHintPayload,
+  ChatHintResponse,
+  GetAlternativesPayload,
   GetAlternativesResponse,
-  PostMessagePayload,
-  PostMessageResponse,
-  GoogleTranslatePayload,
-  GoogleTranslateResponse,
   GoogleText2SpeechPayload,
   GoogleText2SpeechResponse,
-  ChatAnswer,
-  GetAlternativesPayload,
-  Stroke,
+  GoogleTranslatePayload,
+  GoogleTranslateResponse,
+  PostMessagePayload,
+  PostMessageResponse,
 } from './api.types'
 import { ExtendWithOptional } from '../../../lib/helpers/types'
-
-export type ConversationMessage = {
-  id: string
-  message: string
-  threadId: string
-  options: ChatAnswer[]
-  isOwnMessage: boolean
-  translatedMessage?: string
-  endMessage?: boolean
-}
+import { ChatAnswer, ConversationMessage, FullStrokeData } from './units.types'
 
 export type ChatbotMessages = {
   error: ConversationMessage
@@ -30,15 +21,28 @@ export type ChatbotMessages = {
   anotherHintOption: ChatAnswer
 }
 
+export type SpotErrorPayload = {
+  strokes: FullStrokeData[]
+}
+
+export type SpotErrorResponse = {
+  strokesIds: string[]
+}
+
+export type ChatbotApiRequests = {
+  getAlternatives: (props: GetAlternativesPayload) => Promise<GetAlternativesResponse>
+  postMessage: (props: PostMessagePayload) => Promise<PostMessageResponse>
+  postTranslateText: (props: GoogleTranslatePayload) => Promise<GoogleTranslateResponse>
+  postTextToSpeech: (props: GoogleText2SpeechPayload) => Promise<GoogleText2SpeechResponse>
+  spotError: (props: SpotErrorPayload) => Promise<SpotErrorResponse>
+}
+
 export type ChatbotModelProps = {
   $key?: Store<string>
-  api: {
-    getAlternatives: (props: GetAlternativesPayload) => Promise<GetAlternativesResponse>
-    postMessage: (props: PostMessagePayload) => Promise<PostMessageResponse>
-    postTranslateText: (props: GoogleTranslatePayload) => Promise<GoogleTranslateResponse>
-    postTextToSpeech: (props: GoogleText2SpeechPayload) => Promise<GoogleText2SpeechResponse>
+  api: Omit<ChatbotApiRequests, 'postMessage'> & {
+    requestHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
   }
-  messages: ChatbotMessages
+  threadMessagesLimit?: number
 }
 
 export type SendHelpParams = {
@@ -48,8 +52,6 @@ export type SendHelpParams = {
 
 export type SendHelpProps = SendHelpParams & {
   key: string
-  isTranslated: boolean
-  threadId: string
   context: ChatbotContext | null
 }
 
@@ -71,16 +73,19 @@ export enum MessageVariant {
   RECEIVED = 'received',
 }
 
-export type ChatbotRenderer = {
-  message: string
-  variant: MessageVariant
-  withTextToSpeech: boolean
-}
+export type CreateMessageResponse = ExtendWithOptional<
+  Omit<PostMessageResponse, 'threadId'>,
+  ConversationMessage
+>
 
-export type CreateMessageResponse = ExtendWithOptional<PostMessageResponse, ConversationMessage>
+type GetVisibleStrokesResponse = {
+  strokes: FullStrokeData[]
+  validationKey: string
+}
 
 export type IChatDrawBoardAdapter = {
-  getVisibleStrokes(): Promise<Stroke[] | null>
+  $strokesValidationKey: Store<string | null>
+  getVisibleStrokes(): Promise<GetVisibleStrokesResponse | null>
 }
 
 export type ChatbotContext = {

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

@@ -1,24 +1,19 @@
-import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
+import { ConversationMessage } from './units.types'
 
 export enum AudioStatus {
-    PLAYING = 'playing',
-    STOPPED = 'stopped',
-    PAUSED = 'paused',
+  PLAYING = 'playing',
+  STOPPED = 'stopped',
+  PAUSED = 'paused',
 }
 
 export type AudioProvider = {
-    play: (audioPath: string, onPlaybackComplete: () => void) => Promise<void>
-    pause: () => void
-    resume: () => void
-    stop: () => void
+  play: (audioPath: string, onPlaybackComplete: () => void) => Promise<void>
+  pause: () => void
+  resume: () => void
+  stop: () => void
 }
 
 export type PlayTextToSpeechProps = {
-    text: string
-    messageId: string
-    isTranslated: boolean
-    config?: {
-        voice?: typeof DEFAULT_VOICE
-        audioConfig?: typeof AUDIO_CONFIG
-    }
+  message: ConversationMessage
+  isTranslated: boolean
 }

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

@@ -1,5 +1,5 @@
-import { ConversationMessage } from './model.types'
 import { GetAlternativesResponse } from './api.types'
+import { ConversationMessage } from './units.types'
 
 export type TranslateBatchFxProps = {
   messages: ConversationMessage[]
@@ -8,6 +8,7 @@ export type TranslateBatchFxProps = {
 }
 
 export type TranslateMessageFxProps = {
+  preventTranslate?: boolean
   messages: ConversationMessage[]
   targetLanguage: string
 }

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

@@ -0,0 +1,37 @@
+export type Stroke = {
+  x: number[]
+  y: number[]
+}
+export type FullStrokeData = Stroke & {
+  id?: string
+}
+
+export type IThreadItem = {
+  id: string
+  strokesValidationKey: string | null
+  strokes: FullStrokeData[] | null
+  history: string[]
+}
+
+export type ChatAnswer = {
+  text: string
+  promptKey: string
+  translatedText?: string
+}
+
+export type ConversationMessage = {
+  id: string
+  message: string
+  options: ChatAnswer[]
+  isOwnMessage: boolean
+  translatedMessage?: string
+  endMessage?: boolean
+  isInitial?: boolean
+  threadId?: string
+}
+
+export type ChatItem = {
+  messages: ConversationMessage[]
+  isAvailable: boolean
+  currentThread: IThreadItem | null
+}

package/src/index.ts

@@ -1,7 +1,4 @@
 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'
-export * from './features/celebrations'
-export * from './features/endOfAssignment'

package/src/lib/effector/createEntityFieldStore.ts

@@ -1,4 +1,4 @@
-import { createEvent, createStore } from 'effector'
+import { createEvent, createStore, Event } from 'effector'
 
 type UpdateField<T> = {
   key: string
@@ -19,6 +19,14 @@ export class EntityFieldStore<T> {
       return { ...state, [key]: data }
     })
     .reset(this.reset)
+
+  public on<EV>(
+    event: Event<EV>,
+    fn: (state: Record<string, T>, payload: EV) => Record<string, T> | void,
+  ) {
+    this.$state.on(event, fn)
+    return this
+  }
 }
 
 export function createEntityFieldStore<T>() {