@magmamath/students-features 0.3.2 → 0.4.0-rc.0

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

@@ -0,0 +1,94 @@
+import { createEvent } from 'effector'
+import { createEntityFieldStore } from '../../../lib/effector'
+import { ChatAnswer, ChatItem, ConversationMessage, IThreadItem } from '../types/units.types'
+
+type ReinitChatThreadSettings = {
+  initialOption: ChatAnswer
+}
+
+type UpdateProps = {
+  key: string
+  data: Partial<ChatItem>
+}
+
+type AddMessagesProps = {
+  messages: ConversationMessage[]
+  thread?: IThreadItem | null
+}
+
+export function defaultChatData(props: Partial<ChatItem> = {}): ChatItem {
+  return {
+    messages: [],
+    isAvailable: false,
+    currentThread: null,
+    ...props,
+  }
+}
+
+export class ChatsCacheModel {
+  public readonly update = createEvent<UpdateProps>()
+  private readonly cache = createEntityFieldStore<ChatItem>().on(
+    this.update,
+    (state, { key, data }) => {
+      const currentData = state[key] ?? defaultChatData()
+      return { ...state, [key]: { ...currentData, ...data } }
+    },
+  )
+
+  public readonly $data = this.cache.$state
+  public readonly reset = this.cache.reset
+
+  public disableChat(key: string) {
+    this.cache.setField({
+      key,
+      fn: (current) =>
+        current ? { ...current, isAvailable: false } : defaultChatData({ isAvailable: false }),
+    })
+  }
+
+  public reinitChatThread(key: string, { initialOption }: ReinitChatThreadSettings) {
+    this.cache.setField({
+      key,
+      fn: (current) => {
+        if (!current || current.messages.length <= 1) return
+        const copy = [...current.messages]
+        while (copy.at(-1)?.endMessage) {
+          copy.pop()
+        }
+        const lastMessage = copy.at(-1)
+        if (!lastMessage) return
+        copy.splice(copy.length - 1, 1, {
+          ...lastMessage,
+          options: [initialOption],
+        })
+        return { ...current, messages: copy }
+      },
+    })
+  }
+
+  public setSingleMessage(key: string, message: ConversationMessage) {
+    this.cache.setField({
+      key,
+      fn: (current) => {
+        if (!current || current.messages.length > 1) return
+        return { ...current, messages: [message] }
+      },
+    })
+  }
+
+  public addMessages(key: string, { messages, thread = null }: AddMessagesProps) {
+    this.cache.setField({
+      key,
+      fn: (current) => {
+        if (!current) return defaultChatData({ messages, currentThread: thread })
+        const result = { ...current, messages: [...current.messages, ...messages] }
+        if (thread) result.currentThread = thread
+        return result
+      },
+    })
+  }
+
+  public add(key: string, data: ChatItem) {
+    this.cache.setField({ key, data })
+  }
+}

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

@@ -1,7 +1,8 @@
-import { ChatAnswer, PostMessageResponse } from '../types/api.types'
+import { PostMessageResponse } from '../types/api.types'
 import { createEvent } from 'effector'
+import { ChatAnswer } from '../types/units.types'
 
-type ChatMessage = PostMessageResponse & {
+type ChatMessage = Omit<PostMessageResponse, 'thread'> & {
   id: string
   isOwnMessage: boolean
 }
@@ -38,7 +39,6 @@ export class DefaultMessagesCreator<K extends string> {
     const message: ChatMessage = {
       id: this.list.size.toString(),
       message: this.getter(key),
-      threadId: '',
       options: [],
       isOwnMessage: isOwn,
     }

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

@@ -1,28 +1,39 @@
-import { Stroke } from '../types/api.types'
+import { FullStrokeData, IThreadItem } from '../types/units.types'
 
 type ThreadItemProps = {
-  strokes?: Stroke[] | null
+  strokes: FullStrokeData[]
+  key: string
 }
 
 export class ThreadItem {
-  public readonly strokes: Stroke[] | null
-  public readonly hints: string[] = []
+  public readonly key: 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.key = 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 {}
   }
+
+  public toObject(): IThreadItem {
+    return {
+      key: this.key,
+      strokes: this.strokes,
+      history: [...this.history],
+    }
+  }
 }

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

@@ -1,10 +1,10 @@
 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
 }
 
 export class messagesHelper {
@@ -13,7 +13,6 @@ export class messagesHelper {
       id: generateRandomId(),
       isOwnMessage: false,
       message: data.message,
-      threadId: data.threadId,
       options: data.options,
       translatedMessage: data.translatedMessage,
     }
@@ -26,7 +25,6 @@ export class messagesHelper {
       translatedMessage: data.translatedMessage,
       isOwnMessage: false,
       options: [],
-      threadId: '',
       endMessage: true,
     }
   }
@@ -34,13 +32,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,10 +1,9 @@
-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
 }
 
@@ -18,14 +17,8 @@ export class ChatTextToSpeechModel {
   readonly setStatus = createEvent<AudioStatus>()
   readonly $status = restore(this.setStatus, AudioStatus.STOPPED)
 
-  constructor({ $isOpen, api }: ChatTextToSpeechModelProps) {
+  constructor({ api }: ChatTextToSpeechModelProps) {
     this.api = api
-
-    sample({
-      source: $isOpen.updates,
-      filter: isOpen => !isOpen,
-      target: this.reset,
-    })
   }
 
   public setAudioProvider(audioProvider: AudioProvider) {

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, IThreadItem, 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
+  thread: IThreadItem
 }
 
 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,29 @@ 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 +53,6 @@ export type SendHelpParams = {
 
 export type SendHelpProps = SendHelpParams & {
   key: string
-  isTranslated: boolean
-  threadId: string
   context: ChatbotContext | null
 }
 
@@ -77,10 +80,19 @@ export type ChatbotRenderer = {
   withTextToSpeech: boolean
 }
 
-export type CreateMessageResponse = ExtendWithOptional<PostMessageResponse, ConversationMessage>
+export type CreateMessageResponse = ExtendWithOptional<
+  Omit<PostMessageResponse, 'thread'>,
+  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/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,34 @@
+export type Stroke = {
+  x: number[]
+  y: number[]
+}
+export type FullStrokeData = Stroke & {
+  id?: string
+}
+
+export type IThreadItem = {
+  key: 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
+}
+
+export type ChatItem = {
+  messages: ConversationMessage[]
+  isAvailable: boolean
+  currentThread: IThreadItem | null
+}

package/src/features/feedback/components/TeacherFeedbackButton/colorSchemes.ts

@@ -6,16 +6,19 @@ export const COLOR_SCHEMES: Record<string, Partial<Record<ButtonStates, ButtonEl
       borderColor: COLORS.PURPLE_6,
       raiseColor: COLORS.PURPLE_6,
       backgroundColor: COLORS.PRIMARY_PURPLE,
+      color: COLORS.NEUTRAL_1,
     },
     [ButtonStates.PRESSED]: {
       borderColor: COLORS.PURPLE_6,
       raiseColor: COLORS.PURPLE_6,
       backgroundColor: COLORS.PRIMARY_PURPLE,
+      color: COLORS.NEUTRAL_1,
     },
     [ButtonStates.HOVER]: {
       borderColor: COLORS.PURPLE_6,
       raiseColor: COLORS.PURPLE_6,
       backgroundColor: COLORS.PRIMARY_PURPLE,
+      color: COLORS.NEUTRAL_1,
     },
   },
   BLUE: {
@@ -23,16 +26,19 @@ export const COLOR_SCHEMES: Record<string, Partial<Record<ButtonStates, ButtonEl
       borderColor: COLORS.BLUE_6,
       raiseColor: COLORS.BLUE_6,
       backgroundColor: COLORS.PRIMARY_BLUE,
+      color: COLORS.NEUTRAL_1,
     },
     [ButtonStates.PRESSED]: {
       borderColor: COLORS.BLUE_6,
       raiseColor: COLORS.BLUE_6,
       backgroundColor: COLORS.PRIMARY_BLUE,
+      color: COLORS.NEUTRAL_1,
     },
     [ButtonStates.HOVER]: {
       borderColor: COLORS.BLUE_6,
       raiseColor: COLORS.BLUE_6,
       backgroundColor: COLORS.PRIMARY_BLUE,
+      color: COLORS.NEUTRAL_1,
     },
   },
   GREY: {
@@ -40,16 +46,19 @@ export const COLOR_SCHEMES: Record<string, Partial<Record<ButtonStates, ButtonEl
       borderColor: COLORS.NEUTRAL_5,
       raiseColor: COLORS.NEUTRAL_5,
       backgroundColor: COLORS.NEUTRAL_1,
+      color: COLORS.NEUTRAL_10,
     },
     [ButtonStates.PRESSED]: {
       borderColor: COLORS.NEUTRAL_5,
       raiseColor: COLORS.NEUTRAL_5,
       backgroundColor: COLORS.NEUTRAL_1,
+      color: COLORS.NEUTRAL_10,
     },
     [ButtonStates.HOVER]: {
       borderColor: COLORS.NEUTRAL_5,
       raiseColor: COLORS.NEUTRAL_5,
       backgroundColor: COLORS.NEUTRAL_1,
+      color: COLORS.NEUTRAL_10,
     },
   },
 }

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>() {