@magmamath/students-features 0.1.0

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

@@ -0,0 +1,231 @@
+import { createEvent, restore, attach, createEffect, type Effect, sample } from 'effector'
+import { ChatbotModel } from './model'
+
+import {
+    TranslateAlternativesFxProps,
+    TranslateBatchFxProps,
+    TranslateMessageFxProps,
+} from '../types/translation.types'
+import { ConversationMessage } from '../types/model.types'
+import { GetAlternativesResponse } from '../types/api.types'
+import { decodeHTMLEntities } from '../helpers'
+
+export class ChatbotTranslation {
+    private readonly model: ChatbotModel
+
+    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: ChatbotModel) {
+        this.model = chatbotModel
+
+        this.translateAlternativesFx = this.createTranslateAlternativesEffect()
+        this.translateMessageFx = this.createTranslateMessageEffect()
+        this.translateBatchFx = this.createTranslateBatchEffect()
+
+        this.initTranslationSamples()
+    }
+
+    private shouldSkipTranslation(messages: ConversationMessage[]) {
+        if (this.$isTranslated.getState()) {
+            this.setIsTranslated(false)
+            return true
+        }
+
+        const allTranslated = messages.every(message => message.translatedMessage)
+        if (allTranslated) {
+            this.setIsTranslated(true)
+            return true
+        }
+
+        return false
+    }
+
+    private initTranslationSamples() {
+        sample({
+            clock: this.translateBatchFx.doneData,
+            source: [this.model.credits.$assignmentId, this.model.credits.$exerciseId] as const,
+            fn: ([assignmentId, exerciseId], translatedMessages) => ({
+                assignmentId,
+                exerciseId,
+                translatedMessages,
+            }),
+        }).watch(({ assignmentId, exerciseId, translatedMessages }) => {
+            this.model.messages.setField({
+                entityId: assignmentId,
+                fieldId: exerciseId,
+                messages: translatedMessages,
+            })
+        })
+    }
+
+    private createTranslateAlternativesEffect() {
+        return attach({
+            source: [this.model.$alternatives],
+            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.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 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 createTranslateBatchEffect() {
+        return attach({
+            source: [this.model.credits.$assignmentId, this.model.credits.$exerciseId, this.model.messages.$state],
+            mapParams: (
+                params: TranslateBatchFxProps['params'],
+                [assignmentId, exerciseId, messages],
+            ) => ({
+                params,
+                assignmentId,
+                exerciseId,
+                messages,
+            }),
+            effect: createEffect(
+                async ({ messages, assignmentId, exerciseId, params }: TranslateBatchFxProps) => {
+                    const currentMessages = messages[assignmentId]?.[exerciseId]?.messages ?? []
+
+                    if (this.shouldSkipTranslation(currentMessages)) {
+                        return currentMessages
+                    }
+
+                    const messagesText = currentMessages.map(({ message }) => message)
+                    const response = await this.model.api.translateTextFx({
+                        text: messagesText,
+                        targetLanguage: params.targetLanguage,
+                    })
+
+                    const lastMessage = currentMessages.at(-1)
+                    const lastMessageTranslatedOptions = lastMessage
+                        ? await this.translateMessageOptions(lastMessage, params.targetLanguage)
+                        : undefined
+
+                    const errorMessageTranslationResponse = await this.model.api.translateTextFx({
+                        text: [this.model.defaultMessages.error.message],
+                        targetLanguage: params.targetLanguage,
+                    })
+
+                    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 }) => translatedText,
+                    )
+
+                    return currentMessages.map((message, index) => {
+                        const isLastMessage = index === currentMessages.length - 1
+                        return {
+                            ...message,
+                            options: isLastMessage ? lastMessageTranslatedOptions : message.options,
+                            translatedMessage: decodeHTMLEntities(translatedMessages[index]),
+                        }
+                    }) as ConversationMessage[]
+                },
+            ),
+        })
+    }
+
+    private async translateMessageOptions(message: ConversationMessage, targetLanguage: string) {
+        if (!message?.options?.length) {
+            const translatedAlternatives = await this.translateAlternativesFx({ targetLanguage })
+            this.model.setAlternatives(translatedAlternatives)
+            return
+        }
+
+        const optionsText = message.options.map(({ text }) => text)
+        const response = await this.model.api.translateTextFx({
+            text: optionsText,
+            targetLanguage,
+        })
+
+        return message.options.map((option, index) => ({
+            ...option,
+            translatedText: decodeHTMLEntities(response.data.translations[index].translatedText),
+        }))
+    }
+
+    public reset() {
+        this.setIsTranslated(false)
+    }
+}

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

@@ -0,0 +1,59 @@
+export type ChatAnswer = {
+    text: string
+    promptKey: string
+    translatedText?: string
+}
+
+export type GetAlternativesResponse = {
+    options: {
+        default: ChatAnswer[]
+        hints: ChatAnswer[]
+    }
+}
+
+export type PostMessagePayload = {
+    hint: string | null
+    language: string
+    problem: string
+    problemAnswer: string[]
+    solutionImages: { canvasDrawing: string | null }
+    type: string
+    problemId?: string
+    answer?: string | string[]
+    grade?: string | null
+    threadId?: string | null
+}
+
+export type PostMessageResponse = {
+    message: string
+    threadId: string
+    options: ChatAnswer[]
+}
+
+export type GoogleTranslatePayload = {
+    text: string[]
+    targetLanguage: string
+}
+
+export type GoogleTranslateResponse = {
+    data: {
+        translations: { translatedText: string; detectedSourceLanguage: string }[]
+    }
+}
+
+export type GoogleText2SpeechPayload = {
+    input: {
+        text: string
+    }
+    voice: {
+        languageCode: string
+        name: string
+    }
+    audioConfig: {
+        audioEncoding: string
+        pitch: number
+        speakingRate: number
+    }
+}
+
+export type GoogleText2SpeechResponse = string | undefined | { audioContent?: string }

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

@@ -0,0 +1,73 @@
+import type { Store } from 'effector'
+import {
+    GetAlternativesResponse,
+    PostMessagePayload,
+    PostMessageResponse,
+    GoogleTranslatePayload,
+    GoogleTranslateResponse,
+    GoogleText2SpeechPayload,
+    GoogleText2SpeechResponse,
+    ChatAnswer,
+} from './api.types'
+
+export type ConversationMessage = {
+    id: string
+    message: string
+    threadId: string
+    options: ChatAnswer[]
+    isOwnMessage: boolean
+    translatedMessage?: string
+}
+
+export type EntityIds = {
+    entityId: string
+    fieldId: string
+}
+
+export type ChatMessagesModel = EntityIds & { messages: ConversationMessage[] }
+export type ThreadIdsModel = EntityIds & { threadId: string }
+export type AvailableChatsModel = EntityIds & { isAvailable: boolean }
+
+export type ChatbotModelProps = {
+    credits: {
+        $assignmentId: Store<string>
+        $exerciseId: Store<string>
+    },
+    api: {
+        getAlternatives: (props: void) => Promise<GetAlternativesResponse>
+        postMessage: (props: PostMessagePayload) => Promise<PostMessageResponse>
+        postTranslateText: (props: GoogleTranslatePayload) => Promise<GoogleTranslateResponse>
+        postTextToSpeech: (props: GoogleText2SpeechPayload) => Promise<GoogleText2SpeechResponse>
+    }
+    messages: {
+        error: ConversationMessage,
+        start: ConversationMessage
+    }
+}
+
+export type SendHelpParams = {
+    payload: PostMessagePayload
+    message: string
+    translationTargetLanguage: string
+    translatedMessage?: string
+}
+
+export type SendHelpProps = SendHelpParams & {
+    assignmentId: string
+    exerciseId: string
+    messages: Record<string, Record<string, { messages: ConversationMessage[] }>>
+    isTranslated: boolean
+}
+
+export type SetHintMessageProps = EntityIds & ConversationMessage
+
+export enum MessageVariant {
+    SENT = 'sent',
+    RECEIVED = 'received',
+}
+
+export type ChatbotRenderer = {
+    message: string
+    variant: MessageVariant
+    withTextToSpeech: boolean
+}

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

@@ -0,0 +1,24 @@
+import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
+
+export enum AudioStatus {
+    PLAYING = 'playing',
+    STOPPED = 'stopped',
+    PAUSED = 'paused',
+}
+
+export type AudioProvider = {
+    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
+    }
+}

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

@@ -0,0 +1,23 @@
+import { ConversationMessage } from './model.types'
+import { GetAlternativesResponse } from './api.types'
+
+export type TranslateBatchFxProps = {
+    messages: Record<string, Record<string, { messages: ConversationMessage[] }>>
+    assignmentId: string
+    exerciseId: string
+    params: {
+        targetLanguage: string
+    }
+}
+
+export type TranslateMessageFxProps = {
+    message: ConversationMessage
+    targetLanguage: string
+}
+
+export type TranslateAlternativesFxProps = {
+    alternatives: GetAlternativesResponse | null
+    params: {
+        targetLanguage: string
+    }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { useFeaturesLocalization, setFeaturesLocalization, Locale } from './shared/translation'
+export type { LocalizationConfig } from './shared/translation'
+export * from './features/chatbot'

package/src/lib/createFeature/createFeature.tsx

@@ -0,0 +1,21 @@
+import React, { createContext, PropsWithChildren, useContext } from 'react'
+
+export function createFeature<T>() {
+  const context = createContext<T | null>(null)
+
+  type ProviderProps = {
+    model: T | null
+  } & PropsWithChildren
+
+  const FeatureProvider = ({ children, model }: ProviderProps) => {
+    if (!model) return null
+
+    return <context.Provider value={model}>{children}</context.Provider>
+  }
+
+  const useFeatureModel = () => {
+    return useContext(context) as T
+  }
+
+  return [FeatureProvider, useFeatureModel, context] as const
+}

package/src/lib/effector/createControllerEffect.ts

@@ -0,0 +1,66 @@
+import { createEffect, type Effect } from 'effector'
+
+type LikeCanceledError = {
+    code?: string
+}
+
+export type ControlledEffect<P, T> = Effect<P, T> & {
+    controller: AbortController
+}
+
+type ControlledRequestProps<P> = {
+    data: P
+    controller?: AbortController
+    abortAfter?: number
+}
+
+type RequestOptionalConfig = { signal?: AbortSignal }
+
+export function controlledRequest<R = void, P = void>(
+    request: (props: P, config?: RequestOptionalConfig) => Promise<R>,
+) {
+    return async ({
+        data,
+        controller = new AbortController(),
+        abortAfter = 20000,
+    }: ControlledRequestProps<P>) => {
+        let timeout: ReturnType<typeof setTimeout> | null = null
+
+        if (abortAfter) {
+            timeout = setTimeout(() => {
+                controller.abort('timeout')
+            }, abortAfter)
+        }
+
+        try {
+            const response = await request(data, { signal: controller?.signal })
+            if (timeout !== null) clearTimeout(timeout)
+            return response
+        } catch (error: unknown) {
+            if ((error as LikeCanceledError).code === 'ERR_CANCELED') {
+                if (controller.signal.reason === 'timeout') {
+                    throw new Error('Request timed out')
+                }
+                throw new Error('Request aborted manually')
+            }
+
+            throw error
+        }
+    }
+}
+
+export const createControllerEffect = <T, P>(
+    fn: (props: P, config?: RequestOptionalConfig) => Promise<T>,
+) => {
+    const request = controlledRequest<T, P>(fn)
+    const effect = createEffect((data: P) =>
+        request({ data, controller: effect.controller }),
+    ) as ControlledEffect<P, T>
+    effect.controller = new AbortController()
+
+    effect.fail.watch(() => {
+        effect.controller = new AbortController()
+    })
+
+    return effect
+}

package/src/lib/effector/createEntityFieldStore.ts

@@ -0,0 +1,43 @@
+import { createEvent, createStore } from 'effector'
+
+type UpdateField<T> = {
+    entityId: string
+    fieldId: string
+    data: T
+}
+
+type CreateEntityFieldStoreSettings<T, U> = {
+    mapper?: (value: U) => UpdateField<T>
+}
+
+export function createEntityFieldStore<T, U = UpdateField<T>>({
+    mapper = (value: any) => value,
+}: CreateEntityFieldStoreSettings<T, U> = {}) {
+    const initialState: Record<string, Record<string, T>> = {}
+    const fieldAdded = createEvent<UpdateField<T>>()
+    const reset = createEvent()
+
+    const setField = (value: U) => {
+        fieldAdded(mapper(value))
+    }
+
+    const $state = createStore(initialState)
+        .on(fieldAdded, (state, { entityId, fieldId, data }) => {
+            if (!fieldId || !entityId) {
+                console.error('fieldId or entityId missing in createValuePersistorModel.ts')
+                return state
+            }
+
+            const newState = { ...state }
+
+            if (!newState[entityId]) {
+                newState[entityId] = {}
+            }
+
+            newState[entityId][fieldId] = data
+            return newState
+        })
+        .reset(reset)
+
+    return { $state, setField, fieldAdded, reset }
+}

package/src/lib/effector/index.ts

@@ -0,0 +1,2 @@
+export { createEntityFieldStore } from './createEntityFieldStore'
+export { createControllerEffect } from './createControllerEffect'

package/src/lib/helpers/helpers.ts

@@ -0,0 +1,2 @@
+export const generateRandomId = () =>
+  Date.now().toString(36) + Math.random().toString(36).substring(2)

package/src/lib/localization/en.json

@@ -0,0 +1,2 @@
+{
+}

package/src/lib/localization/gb.json

@@ -0,0 +1,2 @@
+{
+}

package/src/lib/localization/sw.json

@@ -0,0 +1,2 @@
+{
+}

package/src/shared/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+export const useDebounce = <T>(value: T, delay?: number): T => {
+    const [debouncedValue, setDebouncedValue] = useState(value)
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedValue(value)
+        }, delay || 300)
+
+        return () => {
+            clearTimeout(timer)
+        }
+    }, [value, delay])
+
+    return debouncedValue
+}

package/src/shared/icons/ArrowRightIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+export const ArrowRightIcon = ({ width = 16, height = 16, color = '#33334D' }: IconProps) => (
+  <Svg width={width} height={height} viewBox="0 0 16 16" fill="none">
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.91 12.53a.75.75 0 010-1.06l2.72-2.72H2.56a.75.75 0 110-1.5h9.07L8.91 4.53a.75.75 0 011.06-1.06l4 4a.75.75 0 010 1.06l-4 4a.75.75 0 01-1.06 0z"
+      fill={color}
+    />
+  </Svg>
+)