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

package/src/features/chatbot/components/ChatMessage/ReceivedMessage.tsx

@@ -2,41 +2,42 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { VariantProps } from './ChatMessage'
 import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
-import { MessageTextToSpeech } from './MessageTextToSpeech'
-import { MessageVariant } from '../../types/model.types'
+import { MessageButtonsBlock } from './MessageButtonsBlock'
 
 export const ReceivedMessage = ({
   message,
-  onPressTextToSpeech,
   isTextToSpeechPending,
   isActive,
   audioStatus,
-  renderer,
   withTextToSpeech = true,
-}: VariantProps) => (
-  <View style={styles.container}>
-    <View style={styles.icon}>
-      <ChatbotIcon width={60} height={80} />
-    </View>
+  isTranslated,
+}: VariantProps) => {
+  const text = isTranslated ? message.translatedMessage : message.message
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.icon}>
+        <ChatbotIcon width={60} height={80} />
+      </View>
 
-    <View style={styles.message}>
-      <Text style={[styles.messageText, { width: withTextToSpeech ? 240 : 305 }]}>
-        {renderer
-          ? renderer({ message, variant: MessageVariant.RECEIVED, withTextToSpeech })
-          : message}
-      </Text>
-      {withTextToSpeech && (
-        <MessageTextToSpeech
-          isActive={isActive}
-          isLoading={isTextToSpeechPending}
-          onPress={onPressTextToSpeech}
-          disabled={isTextToSpeechPending}
-          status={audioStatus}
-        />
-      )}
+      <View style={styles.message}>
+        <Text style={[styles.messageText, { width: withTextToSpeech ? 240 : 305 }]}>
+          {text}
+          <MessageButtonsBlock
+            message={message}
+            withTextToSpeech={withTextToSpeech}
+            t2sState={{
+              isActive,
+              isLoading: isTextToSpeechPending,
+              status: audioStatus,
+              disabled: isTextToSpeechPending,
+            }}
+          />
+        </Text>
+      </View>
     </View>
-  </View>
-)
+  )
+}
 
 const styles = StyleSheet.create({
   container: {

package/src/features/chatbot/components/ChatMessage/SentMessage.tsx

@@ -3,15 +3,15 @@ import { StyleSheet, Text, View } from 'react-native'
 import { VariantProps } from './ChatMessage'
 import { MessageVariant } from '../../types/model.types'
 
-export const SentMessage = ({ message, renderer }: VariantProps) => (
-  <View style={styles.container}>
-    <Text style={styles.text}>
-      {renderer
-        ? renderer({ message, variant: MessageVariant.SENT, withTextToSpeech: false })
-        : message}
-    </Text>
-  </View>
-)
+export const SentMessage = ({ message, isTranslated }: VariantProps) => {
+  const text = isTranslated ? message.translatedMessage : message.message
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>{text}</Text>
+    </View>
+  )
+}
 
 const styles = StyleSheet.create({
   container: {

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, useRef } from 'react'
+import React, { useRef } from 'react'
 import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useStoreMap, useUnit } from 'effector-react'
 import { ChatbotModel } from '../../model/ChatBotModel'
@@ -6,18 +6,12 @@ import { ChatMessage } from '../ChatMessage/ChatMessage'
 import { MessageLoader } from '../ChatMessage/MessageLoader'
 import { Alternatives } from '../Alternatives/Alternatives'
 import { AUDIO_CONFIG, DEFAULT_VOICE, TEXT_TO_SPEECH_CONFIG } from '../../constants'
-import { MessageVariant, ChatbotRenderer } from '../../types/model.types'
+import { MessageVariant } 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
@@ -29,10 +23,7 @@ const BOTTOM_OFFSET = Platform.select({
 export const ChatbotMessages = ({
   model,
   isHintFeedback,
-  sanitizeSpeechInput,
   isTextToSpeechEnabled,
-  textToSpeechConfig,
-  renderer,
 }: ChatbotMessagesProps) => {
   const dimensions = useWindowDimensions()
   const ref = useRef<ScrollView>(null)
@@ -49,16 +40,6 @@ 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 })
   }
@@ -78,17 +59,16 @@ export const ChatbotMessages = ({
       >
         {isOpen && (
           <View style={styles.gap}>
-            {messages.map(({ id, message, translatedMessage, isOwnMessage }) => (
+            {messages.map((message) => (
               <ChatMessage
-                key={id}
-                message={isTranslated ? (translatedMessage as string) : message}
-                renderer={renderer}
+                key={message.id}
+                isTranslated={isTranslated}
+                message={message}
                 audioStatus={audioStatus}
-                onPressTextToSpeech={() => playTextToSpeech(id, message, translatedMessage)}
-                isActive={id === currentPlayingId}
+                isActive={message.id === currentPlayingId}
                 isTextToSpeechPending={isTextToSpeechPending}
-                variant={isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
-                withTextToSpeech={isTextToSpeechEnabled && !isOwnMessage}
+                variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
+                withTextToSpeech={isTextToSpeechEnabled && !message.isOwnMessage}
               />
             ))}
 
@@ -98,7 +78,6 @@ export const ChatbotMessages = ({
 
         {!isHelpRequestPending && isOpen && (
           <Alternatives
-            model={model}
             onPressAlternative={askChatForHelp}
             hasMessages={messages.length > 1}
             isHintFeedback={isHintFeedback}

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

@@ -1,16 +1,15 @@
-import { ComponentType, PropsWithChildren, ReactNode } from 'react'
+import { ComponentType, PropsWithChildren } 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?: {
@@ -18,24 +17,22 @@ 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()
   }
@@ -48,14 +45,11 @@ export const Chatbot = ({
   }
 
   return (
-    <>
+    <ChatBotModelContext.Provider value={model}>
       <ChatbotMessages
         model={model}
-        renderer={renderer}
         isHintFeedback={isHintFeedback}
-        sanitizeSpeechInput={sanitizeSpeechInput}
         isTextToSpeechEnabled={isTextToSpeechEnabled}
-        textToSpeechConfig={textToSpeechConfig}
       />
 
       <ChatControls
@@ -67,6 +61,6 @@ export const Chatbot = ({
         ButtonWrapper={ButtonWrapper}
         iconSize={iconSize}
       />
-    </>
+    </ChatBotModelContext.Provider>
   )
 }

package/src/features/chatbot/context/ChatBotModelContext.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react'
+import { ChatbotModel } from '../model/ChatBotModel'
+
+export const ChatBotModelContext = createContext<ChatbotModel | null>(null)
+
+export function useChatModel() {
+  const model = useContext(ChatBotModelContext)
+  if (!model) {
+    throw new Error(
+      'Something went wrong, you are probably trying to use component that is supposed to be inside ChatBotContext.Provider',
+    )
+  }
+  return model
+}

package/src/features/chatbot/errorSpotting/ErrorSpottingButton.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { Button, COLORS, IS_WEB, StopIcon } from '@magmamath/react-native-ui'
+import { useChatModel } from '../context/ChatBotModelContext'
+import { useStoreMap, useUnit } from 'effector-react'
+import { StyleSheet, View } from 'react-native'
+import { HighlighterIcon } from '../../../shared/icons/HighlighterIcon'
+
+type ErrorSpottingButtonProps = {
+  contextThreadId?: string
+}
+
+export const ErrorSpottingButton = ({ contextThreadId }: ErrorSpottingButtonProps) => {
+  const model = useChatModel()
+  const activeErrorSpotting = useUnit(model.errorSpotting.$activeData)
+  const validationKey = useUnit(model.errorSpotting.$validationKey)
+  const isLoading = useUnit(model.errorSpotting.$isLoading)
+  const currentThread = useStoreMap(model.$currentChatData, (chatData) => chatData.currentThread)
+
+  if (!currentThread?.strokes || (contextThreadId && currentThread.id !== contextThreadId)) {
+    return null
+  }
+
+  const isActive = !!activeErrorSpotting?.isActive
+  return (
+    <Button
+      style={buttonStyles}
+      disabled={validationKey !== currentThread.strokesValidationKey}
+      isActive={isActive}
+      isLoading={isLoading}
+      variant={'secondary'}
+      colorScheme={'blue'}
+      size={'small'}
+      onPress={() => {
+        if (isLoading) return
+        model.errorSpotting.errorSpottingPressed()
+      }}
+      icon={isActive ? <StopIcon color={COLORS.NEUTRAL_1} /> : <HighlighterIcon />}
+    >
+      show error
+    </Button>
+  )
+}
+
+const buttonStyles = StyleSheet.create({
+  text: {
+    textTransform: 'uppercase',
+  },
+})

package/src/features/chatbot/errorSpotting/ErrorSpottingModel.ts

@@ -0,0 +1,130 @@
+import { ChatbotAPI } from '../model/ChatbotApi'
+import { createEvent, createStore, sample, createEffect, Store } from 'effector'
+import { ChatItem } from '../types/units.types'
+
+type ErrorSpottingProps = {
+  api: ChatbotAPI
+  $currentChatData: Store<ChatItem>
+}
+
+type ActiveErrorSpottingData = {
+  isActive: boolean
+  isDisabled: boolean
+  strokesIds: string[]
+  validationKey: null | string
+}
+
+type ErrorSpottingReducerProps = {
+  chatData: ChatItem
+  activeSpotting: ActiveErrorSpottingData | null
+}
+
+const AUTO_CLOSE_TIMEOUT = 5000
+
+export class ErrorSpottingModel {
+  private readonly api: ChatbotAPI
+
+  public readonly errorSpottingPressed = createEvent()
+  private readonly activeDataChanged = createEvent<ActiveErrorSpottingData | null>()
+  private readonly spottingHidden = createEvent()
+
+  public readonly $validationKey = createStore<string | null>(null)
+  public readonly $activeData = createStore<ActiveErrorSpottingData | null>(null)
+    .on(this.activeDataChanged, (_, payload) => payload)
+    .on(this.spottingHidden, (state) => {
+      if (state) return { ...state, isActive: false }
+      return null
+    })
+    .on(this.$validationKey, (state, payload) => {
+      if (!state || payload === null) return state
+      const isDisabled = payload !== state.validationKey
+      return { ...state, isDisabled, isActive: isDisabled ? false : state.isActive }
+    })
+
+  public readonly $isLoading
+
+  private closeTimeout: NodeJS.Timeout | null = null
+
+  public constructor({ api, $currentChatData }: ErrorSpottingProps) {
+    this.api = api
+
+    this.$isLoading = api.spotErrorFx.pending
+
+    this.$activeData.on($currentChatData, (state, payload) => {
+      if (!state || state.validationKey !== payload.currentThread?.strokesValidationKey) return null
+    })
+
+    sample({
+      clock: api.spotErrorFx.doneData,
+      source: {
+        chatData: $currentChatData,
+        activeSpotting: this.$activeData,
+        validationKey: this.$validationKey,
+      },
+      fn: (source, result) => {
+        const key = source.chatData.currentThread?.strokesValidationKey || null
+        const currentKey = source.validationKey
+        const isDisabled = !!currentKey && currentKey !== key
+        return {
+          validationKey: key,
+          strokesIds: result.strokesIds,
+          isActive: !isDisabled,
+          isDisabled,
+        }
+      },
+      target: this.$activeData,
+    })
+
+    sample({
+      clock: this.errorSpottingPressed,
+      source: {
+        chatData: $currentChatData,
+        activeSpotting: this.$activeData,
+      },
+      fn: (source) => source,
+      target: createEffect(({ chatData, activeSpotting }: ErrorSpottingReducerProps) => {
+        if (!chatData.currentThread?.strokes) return
+        if (!activeSpotting) {
+          return this.api.spotErrorFx({ strokes: chatData.currentThread.strokes }).then(() => {
+            this.scheduleClose()
+          })
+        }
+        this.activeDataChanged({ ...activeSpotting, isActive: !activeSpotting.isActive })
+        this.scheduleClose()
+      }),
+    })
+
+    this.activeDataChanged.watch((spotting) => {
+      if ((!spotting || !spotting.isActive) && this.closeTimeout) {
+        clearTimeout(this.closeTimeout)
+        this.closeTimeout = null
+      }
+    })
+  }
+
+  private scheduleClose() {
+    if (this.closeTimeout) clearTimeout(this.closeTimeout)
+    this.closeTimeout = setTimeout(() => {
+      this.spottingHidden()
+      this.closeTimeout = null
+    }, AUTO_CLOSE_TIMEOUT)
+  }
+
+  public bindStrokesValidation($store: Store<string | null>) {
+    sample({
+      source: $store,
+      target: this.$validationKey,
+    })
+    return this
+  }
+
+  public abortPendingRequest() {
+    const isPending = this.api.spotErrorFx.pending.getState()
+    if (isPending) this.api.spotErrorFx.controller.abort()
+  }
+
+  public reset() {
+    this.activeDataChanged(null)
+    this.abortPendingRequest()
+  }
+}

package/src/features/chatbot/index.ts

@@ -3,11 +3,10 @@ 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, ChatAnswer } from './types/api.types'
-export { ChatMessageHandler } from './model/ChatBotMessageHandler'
+export type { PostMessageResponse } from './types/api.types'
 export { DefaultMessagesCreator } from './model/DefaultMessageCreator'
+export type { ChatAnswer } from './types/units.types'
+export type { ConversationMessage } from './types/units.types'