@magmamath/students-features 0.5.0 → 0.5.1-rc-0

package/src/features/chatbot/components/ChatMessages/ChatbotMessages.tsx

@@ -1,16 +1,23 @@
-import React, { useRef } from 'react'
+import React, { ReactNode, useRef } from 'react'
 import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useStoreMap, useUnit } from 'effector-react'
 import { ChatbotModel } from '../../model/ChatBotModel'
 import { ChatMessage } from '../ChatMessage/ChatMessage'
 import { MessageLoader } from '../ChatMessage/MessageLoader'
 import { Alternatives } from '../Alternatives/Alternatives'
-import { MessageVariant } from '../../types/model.types'
+import { AUDIO_CONFIG, DEFAULT_VOICE, TEXT_TO_SPEECH_CONFIG } from '../../constants'
+import { MessageVariant, ChatbotRenderer } from '../../types/model.types'
 
 type ChatbotMessagesProps = {
   model: ChatbotModel
   isHintFeedback: boolean
+  sanitizeSpeechInput: (speech: string) => string
   isTextToSpeechEnabled: boolean
+  textToSpeechConfig?: {
+    voice: typeof DEFAULT_VOICE
+    audioConfig: typeof AUDIO_CONFIG
+  }
+  renderer?: (props: ChatbotRenderer) => ReactNode
 }
 
 const TOOLBAR_HEIGHT = 140
@@ -22,7 +29,10 @@ const BOTTOM_OFFSET = Platform.select({
 export const ChatbotMessages = ({
   model,
   isHintFeedback,
+  sanitizeSpeechInput,
   isTextToSpeechEnabled,
+  textToSpeechConfig,
+  renderer,
 }: ChatbotMessagesProps) => {
   const dimensions = useWindowDimensions()
   const ref = useRef<ScrollView>(null)
@@ -39,6 +49,16 @@ export const ChatbotMessages = ({
 
   const messages = useStoreMap(model.$currentChatData, ({ messages }) => messages)
 
+  const playTextToSpeech = (id: string, message: string, translatedMessage?: string) => {
+    const text = isTranslated ? (translatedMessage as string) : message
+    void model.t2s.play({
+      text: sanitizeSpeechInput(text),
+      messageId: id,
+      isTranslated,
+      config: textToSpeechConfig ?? TEXT_TO_SPEECH_CONFIG,
+    })
+  }
+
   const askChatForHelp = (message: string, translatedMessage?: string) => {
     void model.sendHelpRequestFx({ message, translatedMessage })
   }
@@ -47,7 +67,6 @@ export const ChatbotMessages = ({
     <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
       <ScrollView
         ref={ref}
-        bounces={false}
         contentContainerStyle={styles.list}
         onContentSizeChange={(_, height) => {
           ref.current?.scrollToEnd()
@@ -59,19 +78,17 @@ export const ChatbotMessages = ({
       >
         {isOpen && (
           <View style={styles.gap}>
-            {messages.map((message) => (
+            {messages.map(({ id, message, translatedMessage, isOwnMessage }) => (
               <ChatMessage
-                key={message.id}
-                isTranslated={isTranslated}
-                message={message}
-                variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
-                t2sState={{
-                  isEnabled: isTextToSpeechEnabled && !message.isOwnMessage,
-                  isActive: message.id === currentPlayingId,
-                  isLoading: isTextToSpeechPending,
-                  status: audioStatus,
-                  disabled: isTextToSpeechPending,
-                }}
+                key={id}
+                message={isTranslated ? (translatedMessage as string) : message}
+                renderer={renderer}
+                audioStatus={audioStatus}
+                onPressTextToSpeech={() => playTextToSpeech(id, message, translatedMessage)}
+                isActive={id === currentPlayingId}
+                isTextToSpeechPending={isTextToSpeechPending}
+                variant={isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
+                withTextToSpeech={isTextToSpeechEnabled && !isOwnMessage}
               />
             ))}
 
@@ -81,6 +98,7 @@ export const ChatbotMessages = ({
 
         {!isHelpRequestPending && isOpen && (
           <Alternatives
+            model={model}
             onPressAlternative={askChatForHelp}
             hasMessages={messages.length > 1}
             isHintFeedback={isHintFeedback}
@@ -95,13 +113,12 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'flex-end',
-    width: 378,
+    width: 372,
     height: '100%',
   },
   list: {
     alignItems: 'flex-end',
     paddingVertical: 2,
-    paddingRight: 6,
   },
   gap: {
     flex: 1,

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

@@ -1,15 +1,16 @@
-import { ComponentType, PropsWithChildren } from 'react'
+import { ComponentType, PropsWithChildren, ReactNode } from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 import { ChatbotModel } from '../model/ChatBotModel'
 import { ChatbotMessages } from './ChatMessages/ChatbotMessages'
 import { ChatControls } from './ChatControls/ChatControls'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
+import { ChatbotRenderer } from '../types/model.types'
 import React from 'react'
-import { ChatBotModelContext } from '../context/ChatBotModelContext'
 
 type ChatbotProps = {
   model: ChatbotModel
   isHintFeedback: boolean
+  sanitizeSpeechInput: (speech: string) => string
   isTextToSpeechEnabled: boolean
   isTranslationEnabled: boolean
   textToSpeechConfig?: {
@@ -17,22 +18,24 @@ type ChatbotProps = {
     audioConfig: typeof AUDIO_CONFIG
   }
   ButtonWrapper: ComponentType<PropsWithChildren>
+  renderer?: (props: ChatbotRenderer) => ReactNode
   iconSize?: { width: number; height: number } // TODO: use number instead
 }
 
 export const Chatbot = ({
   model,
   isHintFeedback,
+  sanitizeSpeechInput,
   isTextToSpeechEnabled = false,
   textToSpeechConfig,
   isTranslationEnabled,
+  renderer,
   ButtonWrapper,
   iconSize,
 }: ChatbotProps) => {
   const alternatives = useUnit(model.$alternatives)
   const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
 
-  model.t2s.setAudioConfig(textToSpeechConfig ?? null)
   const translateMessages = () => {
     void model.translation.translateAllMessagesFx()
   }
@@ -45,11 +48,14 @@ export const Chatbot = ({
   }
 
   return (
-    <ChatBotModelContext.Provider value={model}>
+    <>
       <ChatbotMessages
         model={model}
+        renderer={renderer}
         isHintFeedback={isHintFeedback}
+        sanitizeSpeechInput={sanitizeSpeechInput}
         isTextToSpeechEnabled={isTextToSpeechEnabled}
+        textToSpeechConfig={textToSpeechConfig}
       />
 
       <ChatControls
@@ -61,6 +67,6 @@ export const Chatbot = ({
         ButtonWrapper={ButtonWrapper}
         iconSize={iconSize}
       />
-    </ChatBotModelContext.Provider>
+    </>
   )
 }

package/src/features/chatbot/index.ts

@@ -3,10 +3,11 @@ export { ChatbotModel } from './model/ChatBotModel'
 export { AudioStatus, type AudioProvider } from './types/t2s.types'
 export {
   MessageVariant,
+  type ConversationMessage,
+  type ChatbotRenderer,
   type ChatbotModelProps,
   type IChatDrawBoardAdapter,
 } from './types/model.types'
-export type { PostMessageResponse } from './types/api.types'
+export type { PostMessageResponse, ChatAnswer } from './types/api.types'
+export { ChatMessageHandler } from './model/ChatBotMessageHandler'
 export { DefaultMessagesCreator } from './model/DefaultMessageCreator'
-export type { ChatAnswer } from './types/units.types'
-export type { ConversationMessage } from './types/units.types'

package/src/features/chatbot/model/{ChatBotThreadManager.ts → ChatBotMessageHandler.ts}

@@ -1,5 +1,6 @@
 import { ThreadItem } from './ThreadItem'
 import { Store } from 'effector'
+import { createEffect } from 'effector/effector.umd'
 import {
   ChatHintPayload,
   ChatHintResponse,
@@ -9,23 +10,25 @@ import {
 import { ChatbotMessages, IChatDrawBoardAdapter } from '../types/model.types'
 import { CHAT_BOT_MODEL_DEFAULTS } from './constants'
 
-type ThreadManagerApi = {
-  getHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
-}
-
-type ChatBotThreadManagerProps = {
+type ChatMessageHandlerProps = {
   messagesLimit?: number
-  drawBoardAdapter?: IChatDrawBoardAdapter
   messages: ChatbotMessages
-  api?: ThreadManagerApi
+  drawBoardAdapter: IChatDrawBoardAdapter
+  api: {
+    getHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
+  }
+}
+
+type ResetCacheProps = {
+  key: string
 }
 
-export class ChatBotThreadManager {
-  private api: ThreadManagerApi | null = null
-  private drawBoardAdapter: IChatDrawBoardAdapter | null = null
+export class ChatMessageHandler {
+  private readonly api
+  private readonly drawBoardAdapter: IChatDrawBoardAdapter
   private readonly threads = new Map<string, ThreadItem>()
 
-  private messagesLimit
+  private readonly messagesLimit
   private currentKey = ''
   private currentBinding: null | (() => void) = null
 
@@ -36,9 +39,9 @@ export class ChatBotThreadManager {
     api,
     messagesLimit = CHAT_BOT_MODEL_DEFAULTS.THREAD_MESSAGES_LIMIT,
     messages,
-  }: ChatBotThreadManagerProps) {
-    if (api) this.api = api
-    this.drawBoardAdapter = drawBoardAdapter ?? null
+  }: ChatMessageHandlerProps) {
+    this.api = api
+    this.drawBoardAdapter = drawBoardAdapter
     this.messagesLimit = messagesLimit
     this.defaultMessages = messages
   }
@@ -55,16 +58,9 @@ export class ChatBotThreadManager {
     const key = this.currentKey
     let threadItem = this.threads.get(key)
     if (threadItem) return threadItem
-    if (!this.drawBoardAdapter) {
-      threadItem = new ThreadItem()
-      this.threads.set(key, threadItem)
-      return threadItem
-    }
     try {
-      const result = await this.drawBoardAdapter.getVisibleStrokes()
-      threadItem = new ThreadItem(
-        result ? { strokes: result.strokes, key: result.validationKey } : null,
-      )
+      const strokes = await this.drawBoardAdapter.getVisibleStrokes()
+      threadItem = new ThreadItem({ strokes })
     } catch {
       threadItem = new ThreadItem()
     }
@@ -72,22 +68,13 @@ export class ChatBotThreadManager {
     return threadItem
   }
 
-  public setDrawBoardAdapter(adapter: IChatDrawBoardAdapter) {
-    this.drawBoardAdapter = adapter
-  }
-
-  public readonly postMessage = async ({
+  public readonly postMessageFx = async ({
     problemAnswer,
     problem,
     answer,
     language,
     imageAltText,
   }: PostMessagePayload): Promise<PostMessageResponse> => {
-    if (!this.api) {
-      throw new Error(
-        'API is not set in ThreadManagersApi, pls provide API before sending requests',
-      )
-    }
     const threadItem = await this.getThreadItem()
 
     const result = await this.api.getHint({
@@ -99,36 +86,23 @@ export class ChatBotThreadManager {
       imageAltText,
     })
 
-    threadItem.history.push(result.message)
+    threadItem.hints.push(result.message)
     const nextOptions =
-      threadItem.history.length < this.messagesLimit ? [this.defaultMessages.anotherHintOption] : []
+      threadItem.hints.length < this.messagesLimit ? [this.defaultMessages.anotherHintOption] : []
 
     return {
       message: result.message,
       options: nextOptions,
+      threadId: '',
       endMessage: !nextOptions.length,
-      threadId: threadItem.id,
     }
   }
 
-  public get(key: string) {
-    return this.threads.get(key)
-  }
+  public resetThread = createEffect(({ key }: ResetCacheProps) => {
+    this.threads.delete(key)
+  })
 
-  public reset(key?: string) {
-    if (typeof key === 'string') {
-      this.threads.delete(key)
-      return
-    }
+  public resetAll() {
     this.threads.clear()
   }
-
-  public setMessagesLimit(limit: number) {
-    this.messagesLimit = limit
-  }
-
-  public setApi(api: ThreadManagerApi) {
-    this.api = api
-    return this
-  }
 }