@magmamath/students-features 0.1.0

package/src/features/chatbot/components/ThreeDotsLoader/ThreeDotsLoader.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { useEffect, useMemo } from 'react'
+import { View, Animated, StyleSheet, Platform } from 'react-native'
+
+type ChatLoaderProps = {
+  dotsCount?: number
+  animationDuration?: number
+  backgroundColor?: string
+}
+
+export const ThreeDotsLoader = ({
+  dotsCount = 3,
+  animationDuration = 250,
+  backgroundColor = '#55ABE0',
+}: ChatLoaderProps) => {
+  const isWeb = Platform.OS === 'web'
+  const animations = useMemo(
+    () => [...Array(dotsCount)].map(() => new Animated.Value(0)),
+    [dotsCount]
+  )
+
+  useEffect(() => {
+    const animationsArray = animations.map((anim, index) =>
+      Animated.sequence([
+        Animated.timing(anim, {
+          toValue: 1,
+          duration: animationDuration,
+          useNativeDriver: !isWeb,
+          delay: index * (animationDuration / dotsCount),
+        }),
+        Animated.timing(anim, {
+          toValue: 0,
+          duration: animationDuration,
+          useNativeDriver: !isWeb,
+        }),
+      ])
+    )
+
+    Animated.loop(Animated.parallel(animationsArray)).start()
+  }, [animations, animationDuration])
+
+  return (
+    <View style={styles.container}>
+      {animations.map((anim, index) => {
+        const translateY = anim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-6, 0],
+        })
+
+        return (
+          <Animated.View
+            key={index}
+            style={[
+              styles.dot,
+              { transform: [{ translateY }] },
+              { backgroundColor },
+            ]}
+          />
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dot: {
+    borderRadius: 6,
+    height: 12,
+    width: 12,
+    marginHorizontal: 3,
+  },
+})

package/src/features/chatbot/constants.ts

@@ -0,0 +1,30 @@
+import { Platform } from 'react-native'
+
+export const AUDIO_CONFIG = {
+    audioEncoding: 'LINEAR16',
+    pitch: 0,
+    speakingRate: 0.8,
+}
+
+export const DEFAULT_VOICE = {
+    languageCode: 'en-US',
+    name: 'en-US-Wavenet-C',
+}
+
+export const TEXT_TO_SPEECH_CONFIG =
+    Platform.OS === 'ios'
+        ? {
+              audioConfig: {
+                  audioEncoding: 'MP3',
+                  pitch: 0.8,
+                  speakingRate: 0.8,
+              },
+              voice: {
+                  languageCode: 'en-US',
+                  name: 'en-US-Wavenet-C',
+              },
+          }
+        : {
+              audioConfig: AUDIO_CONFIG,
+              voice: DEFAULT_VOICE,
+          }

package/src/features/chatbot/helpers.ts

@@ -0,0 +1,4 @@
+// https://stackoverflow.com/questions/56575859/google-translate-api-does-not-return-apostrophe-as-apostrophe-in-python
+export const decodeHTMLEntities = (input: string) => {
+    return input.replace(/'/g, "'")
+}

package/src/features/chatbot/index.ts

@@ -0,0 +1,4 @@
+export { Chatbot } from './components/Chatbot'
+export { ChatbotModel } from './model/model'
+export { AudioStatus, type AudioProvider } from './types/t2s.types'
+export { MessageVariant, type ConversationMessage, type ChatbotRenderer } from './types/model.types'

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

@@ -0,0 +1,28 @@
+import { createEffect, Effect } from 'effector'
+
+import { createControllerEffect } from '../../../lib/effector'
+import { ControlledEffect } from '../../../lib/effector/createControllerEffect'
+import { ChatbotModelProps } from '../types/model.types'
+import {
+    GetAlternativesResponse,
+    PostMessagePayload,
+    PostMessageResponse,
+    GoogleTranslatePayload,
+    GoogleTranslateResponse,
+    GoogleText2SpeechPayload,
+    GoogleText2SpeechResponse,
+} from '../types/api.types'
+
+export class ChatbotAPI {
+    postMessageFx: ControlledEffect<PostMessagePayload, PostMessageResponse>
+    getAlternativesFx: Effect<void, GetAlternativesResponse>
+    translateTextFx: Effect<GoogleTranslatePayload, GoogleTranslateResponse>
+    textToSpeechTextFx: Effect<GoogleText2SpeechPayload, GoogleText2SpeechResponse>
+
+    constructor(api: ChatbotModelProps['api']) {
+        this.postMessageFx = createControllerEffect(api.postMessage)
+        this.getAlternativesFx = createEffect(api.getAlternatives)
+        this.translateTextFx = createEffect(api.postTranslateText)
+        this.textToSpeechTextFx = createEffect(api.postTextToSpeech)
+    }
+}

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

@@ -0,0 +1,277 @@
+import { attach, createEvent, restore, sample, type Store, type Effect } from 'effector'
+import { createControllerEffect, createEntityFieldStore } from '../../../lib/effector'
+
+import {
+    AvailableChatsModel,
+    ChatbotModelProps,
+    ChatMessagesModel,
+    ConversationMessage,
+    EntityIds,
+    SendHelpParams,
+    SendHelpProps,
+    SetHintMessageProps,
+    ThreadIdsModel,
+} from '../types/model.types'
+import { GetAlternativesResponse, PostMessageResponse } from '../types/api.types'
+
+import { generateRandomId } from '../../../lib/helpers/helpers'
+import { ChatbotAPI } from './api'
+import { ChatbotTranslation } from './translation'
+import { ChatTextToSpeech } from './t2s'
+
+export class ChatbotModel {
+    readonly api: ChatbotAPI
+    readonly translation: ChatbotTranslation
+    readonly t2s: ChatTextToSpeech
+
+    readonly credits: ChatbotModelProps['credits']
+
+    readonly resetAlternatives = createEvent()
+    readonly setAlternatives = createEvent<GetAlternativesResponse | null>()
+    readonly $alternatives: Store<GetAlternativesResponse | null>
+
+    readonly setIsOpen = createEvent<boolean>()
+    readonly toggleOpen = createEvent()
+    readonly $isOpen = restore(this.setIsOpen, false).on(this.toggleOpen, isOpen => !isOpen)
+
+    // separate messages and alternatives class?
+    readonly removeLastMessage = createEvent()
+    readonly setLastMessageIds = createEvent<EntityIds | null>()
+    readonly $lastMessageIds = restore(this.setLastMessageIds, null)
+
+    readonly setScrollActive = createEvent<boolean>()
+    readonly $isScrollActive = restore(this.setScrollActive, false)
+
+    readonly sendHelpRequestFx: Effect<SendHelpParams, PostMessageResponse | ConversationMessage>
+
+    readonly defaultMessages: ChatbotModelProps['messages']
+
+    constructor({
+        credits,
+        api,
+        messages,
+    }: ChatbotModelProps) {
+        this.api = new ChatbotAPI(api)
+
+        this.defaultMessages = messages
+        this.credits = credits
+
+        this.$alternatives = restore(this.api.getAlternativesFx.doneData, null)
+            .on(this.setAlternatives, (_, payload) => payload)
+            .reset(this.resetAlternatives)
+
+        // TODO: do not pass this, just what you need
+        this.translation = new ChatbotTranslation(this)
+        this.t2s = new ChatTextToSpeech(this)
+
+        this.sendHelpRequestFx = this.createSendHelpRequestFx()
+        this.initChatReplyWatcher()
+    }
+
+    readonly messages = createEntityFieldStore({
+        mapper: ({ entityId, fieldId, messages }: ChatMessagesModel) => ({
+            entityId,
+            fieldId,
+            data: { messages },
+        }),
+    })
+
+    readonly threadIds = createEntityFieldStore({
+        mapper: ({ entityId, fieldId, threadId }: ThreadIdsModel) => ({
+            entityId,
+            fieldId,
+            data: { threadId },
+        }),
+    })
+
+    readonly availableChats = createEntityFieldStore({
+        mapper: ({ entityId, fieldId, isAvailable = true }: AvailableChatsModel) => ({
+            entityId,
+            fieldId,
+            data: { isAvailable },
+        }),
+    })
+
+    private createSendHelpRequestFx() {
+        return attach({
+            source: [
+                this.credits.$assignmentId,
+                this.credits.$exerciseId,
+                this.messages.$state,
+                this.translation.$isTranslated,
+            ],
+            mapParams: (
+                params: SendHelpParams,
+                [assignmentId, exerciseId, messages, isTranslated],
+            ) => ({
+                ...params,
+                assignmentId,
+                exerciseId,
+                messages,
+                isTranslated,
+            }),
+            effect: createControllerEffect(
+                async ({
+                    payload,
+                    message = '',
+                    translationTargetLanguage,
+                    translatedMessage,
+                    assignmentId,
+                    exerciseId,
+                    messages,
+                    isTranslated,
+                }: SendHelpProps) => {
+                    this.setLastMessageIds({
+                        entityId: assignmentId,
+                        fieldId: exerciseId,
+                    })
+
+                    const currentMessages = messages[assignmentId]?.[exerciseId]?.messages || []
+
+                    this.messages.setField({
+                        entityId: assignmentId,
+                        fieldId: exerciseId,
+                        messages: [
+                            ...currentMessages,
+                            {
+                                id: generateRandomId(),
+                                message: message ?? '',
+                                translatedMessage,
+                                isOwnMessage: true,
+                                threadId: payload.threadId ?? '',
+                                options: [],
+                            },
+                        ],
+                    })
+
+                    const response = await this.api.postMessageFx(payload)
+                    if (isTranslated) {
+                        return await this.translation.translateMessageFx({
+                            targetLanguage: translationTargetLanguage as string,
+                            message: {
+                                ...response,
+                                id: generateRandomId(),
+                                isOwnMessage: false,
+                            },
+                        })
+                    }
+
+                    return response
+                },
+            ),
+        })
+    }
+
+    private initChatReplyWatcher() {
+        sample({
+            clock: this.sendHelpRequestFx.doneData,
+            source: [this.credits.$assignmentId, this.credits.$exerciseId, this.messages.$state] as const,
+            fn: ([assignmentId, exerciseId, messages], response) => ({
+                assignmentId,
+                exerciseId,
+                messages: messages[assignmentId]?.[exerciseId]?.messages || [],
+                response,
+            }),
+        }).watch(({ assignmentId, exerciseId, messages, response }) => {
+            this.messages.setField({
+                entityId: assignmentId,
+                fieldId: exerciseId,
+                messages: [
+                    ...messages,
+                    {
+                        id: generateRandomId(),
+                        message: response.message,
+                        isOwnMessage: false,
+                        threadId: response.threadId,
+                        options: response.options,
+                        translatedMessage:
+                            'translatedMessage' in response
+                                ? response.translatedMessage
+                                : undefined,
+                    },
+                ],
+            })
+
+            this.threadIds.setField({
+                entityId: assignmentId,
+                fieldId: exerciseId,
+                threadId: response.threadId,
+            })
+        })
+
+        sample({
+            clock: this.sendHelpRequestFx.fail,
+            source: [this.credits.$assignmentId, this.credits.$exerciseId, this.messages.$state] as const,
+            fn: ([assignmentId, exerciseId, messages]) => ({
+                assignmentId,
+                exerciseId,
+                messages: messages[assignmentId]?.[exerciseId]?.messages || [],
+            }),
+            filter: (_, { error }) => error.message !== 'Request aborted manually',
+        }).watch(({ assignmentId, exerciseId, messages }) => {
+            this.messages.setField({
+                entityId: assignmentId,
+                fieldId: exerciseId,
+                messages: [...messages, this.defaultMessages.error],
+            })
+        })
+
+        sample({
+            clock: this.removeLastMessage,
+            source: [this.$lastMessageIds, this.messages.$state] as const,
+            fn: ([lastMessageIds, messages]) => ({
+                lastMessageIds,
+                messages,
+            }),
+        }).watch(({ lastMessageIds, messages }) => {
+            if (!lastMessageIds) return
+
+            const updatedMessages = [
+                ...messages[lastMessageIds.entityId][lastMessageIds.fieldId].messages,
+            ]
+            if (updatedMessages) updatedMessages.pop()
+
+            this.messages.setField({
+                entityId: lastMessageIds.entityId,
+                fieldId: lastMessageIds.fieldId,
+                messages: updatedMessages,
+            })
+        })
+    }
+
+    public startConversation() {
+        const assignmentId = this.credits.$assignmentId.getState()
+        const exerciseId = this.credits.$exerciseId.getState()
+        const messages = this.messages.$state.getState()[assignmentId]?.[exerciseId]?.messages ?? []
+
+        if (messages.length) return
+
+        this.messages.setField({
+            entityId: assignmentId,
+            fieldId: exerciseId,
+            messages: [this.defaultMessages.start],
+        })
+
+        this.availableChats.setField({
+            entityId: assignmentId,
+            fieldId: exerciseId,
+            isAvailable: true,
+        });
+    }
+
+    public setHintMessage({ entityId, fieldId, ...message }: SetHintMessageProps) {
+        const messages = this.messages.$state.getState()?.[entityId]?.[fieldId]?.messages
+        if (messages?.length > 1) return
+
+        this.messages.setField({
+            entityId,
+            fieldId,
+            messages: [
+                {
+                    ...message,
+                    options: this.$alternatives.getState()?.options.hints ?? message.options,
+                },
+            ],
+        })
+    }
+}

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

@@ -0,0 +1,107 @@
+import { ChatbotModel } from './model'
+import { restore, createEvent } from 'effector'
+import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
+import { AudioProvider, AudioStatus, PlayTextToSpeechProps } from '../types/t2s.types'
+
+export class ChatTextToSpeech {
+    private readonly model: ChatbotModel
+    private readonly audioCache: Record<string, string> = {}
+    private audioProvider: AudioProvider | null = null
+
+    readonly setCurrentPlayingId = createEvent<string | null>()
+    readonly $currentPlayingId = restore(this.setCurrentPlayingId, null)
+    readonly setStatus = createEvent<AudioStatus>()
+    readonly $status = restore(this.setStatus, AudioStatus.STOPPED)
+
+    constructor(chatbotModel: ChatbotModel) {
+        this.model = chatbotModel
+
+        this.model.$isOpen.updates.watch((isOpen) => {
+            if (!isOpen) this.reset()
+        })
+    }
+
+    public setAudioProvider(audioProvider: AudioProvider) {
+        this.audioProvider = audioProvider
+    }
+
+    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.')
+
+        try {
+            const status = this.$status.getState()
+            const playingId = this.$currentPlayingId.getState()
+            const isPlaying = status === AudioStatus.PLAYING
+            const isPaused = status === AudioStatus.PAUSED
+            const isCurrentMessage = messageId === playingId
+
+            if (isPlaying && isCurrentMessage) {
+                this.audioProvider.pause()
+                this.setStatus(AudioStatus.PAUSED)
+                return
+            }
+
+            if (isPaused && isCurrentMessage) {
+                this.audioProvider.resume()
+                this.setStatus(AudioStatus.PLAYING)
+                return
+            }
+
+            if (messageId && !isCurrentMessage) {
+                this.audioProvider.stop()
+            }
+
+            const cacheKey = this.getCacheKey(messageId, isTranslated)
+            let audioPath = this.audioCache[cacheKey]
+            this.setCurrentPlayingId(messageId)
+
+            if (!audioPath) {
+                const response = await this.model.api.textToSpeechTextFx({
+                    input: { text },
+                    voice: config?.voice ?? DEFAULT_VOICE,
+                    audioConfig: config?.audioConfig ?? AUDIO_CONFIG,
+                })
+
+                // Response might be different type based on provided AUDIO_CONFIG
+                if (typeof response === 'string') {
+                    audioPath = `data:audio/mpeg;base64,${response}`
+                } else {
+                    audioPath = response?.audioContent ?? ''
+                }
+
+                this.audioCache[cacheKey] = audioPath
+            }
+
+            this.setStatus(AudioStatus.PLAYING)
+            await this.audioProvider.play(audioPath, () => {
+                this.setStatus(AudioStatus.STOPPED)
+                this.setCurrentPlayingId(null)
+            })
+        } catch (error) {
+            this.reset()
+            console.error('Error playing text-to-speech: ', error)
+        }
+    }
+
+    public stop() {
+        if (!this.audioProvider) throw new Error('Audio provider is not set. Use setAudioProvider.')
+        this.audioProvider.stop()
+    }
+
+    // reset should also do stop(), add watcher to model to not write it in repos
+    // chatbotModel.$isOpen.updates.watch((isOpen) => {
+    //     if (!isOpen) {
+    //     chatbotModel.t2s.stop();
+    //     chatbotModel.t2s.reset();
+    // }
+
+    public reset() {
+        this.stop()
+        this.setStatus(AudioStatus.STOPPED)
+        this.setCurrentPlayingId(null)
+    }
+}