@magmamath/students-features 0.10.0 → 0.11.0-rc.0

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

@@ -1,23 +1,18 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { ComponentType, PropsWithChildren } from 'react'
 import { Pressable, StyleSheet, View } from 'react-native'
-import {
-  Button,
-  ButtonColor,
-  ButtonSize,
-  ButtonStates,
-  ButtonVariant,
-  COLORS,
-} from '@magmamath/react-native-ui'
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from '@magmamath/react-native-ui'
 import { useUnit } from 'effector-react'
 import { ChatbotModel } from '../../model/ChatBotModel'
 import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
-import { CloseIcon } from '../../../../shared/icons/CloseIcon'
+
+const HELP_BUTTON_TIMEOUT_MS = 5000
 
 type ChatControlsProps = {
   model: ChatbotModel
   onPressChatIcon: () => void
-  onPressClose: () => void
+  onPressHelpButton?: () => void
+  withHelpButton?: boolean
   ButtonWrapper?: ComponentType<PropsWithChildren>
   iconSize?: { width: number; height: number }
 }
@@ -25,56 +20,46 @@ type ChatControlsProps = {
 export const ChatControls = ({
   model,
   onPressChatIcon,
-  onPressClose,
+  onPressHelpButton,
+  withHelpButton = false,
   ButtonWrapper = React.Fragment,
-  iconSize = { width: 80, height: 100 },
+  iconSize = { width: 70, height: 90 },
 }: ChatControlsProps) => {
   const isOpen = useUnit(model.$isOpen)
+  const [isHelpButtonVisible, setIsHelpButtonVisible] = useState(withHelpButton)
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => setIsHelpButtonVisible(false), HELP_BUTTON_TIMEOUT_MS)
+    return () => {
+      clearTimeout(timeoutId)
+      setIsHelpButtonVisible(false)
+    }
+  }, [withHelpButton])
+
   if (isOpen) {
-    return (
-      <View style={styles.container}>
-        <Button
-          onPress={onPressClose}
-          style={{
-            button: styles.buttonClose,
-          }}
-          variant={ButtonVariant.PRIMARY}
-          size={ButtonSize.LARGE}
-          colorScheme={ButtonColor.WHITE}
-          raiseLevel={5}
-          customColorScheme={{
-            [ButtonStates.DEFAULT]: {
-              backgroundColor: COLORS.NEUTRAL_1,
-              borderColor: COLORS.NEUTRAL_5,
-              raiseColor: COLORS.NEUTRAL_5,
-              color: COLORS.NEUTRAL_10,
-            },
-            [ButtonStates.PRESSED]: {
-              backgroundColor: COLORS.NEUTRAL_4,
-              borderColor: COLORS.NEUTRAL_5,
-              raiseColor: COLORS.NEUTRAL_5,
-              color: COLORS.NEUTRAL_1,
-            },
-            [ButtonStates.HOVER]: {
-              backgroundColor: COLORS.NEUTRAL_3,
-              borderColor: COLORS.NEUTRAL_5,
-              raiseColor: COLORS.NEUTRAL_5,
-              color: COLORS.NEUTRAL_10,
-            },
-          }}
-        >
-          <CloseIcon />
-        </Button>
-      </View>
-    )
+    return null
   }
 
   return (
     <View style={styles.container}>
       <ButtonWrapper>
-        <Pressable onPress={onPressChatIcon}>
-          <ChatbotIcon width={iconSize?.width} height={iconSize?.height} />
-        </Pressable>
+        <View style={styles.closedWrapper}>
+          <Pressable onPress={onPressChatIcon}>
+            <ChatbotIcon width={iconSize?.width} height={iconSize?.height} />
+          </Pressable>
+          {isHelpButtonVisible && (
+            <Button
+              variant={ButtonVariant.PRIMARY}
+              colorScheme={ButtonColor.WHITE}
+              size={ButtonSize.MEDIUM}
+              raiseLevel={3}
+              onPress={onPressHelpButton}
+              style={{ text: styles.helpButtonText }}
+            >
+              Want some help?
+            </Button>
+          )}
+        </View>
       </ButtonWrapper>
     </View>
   )
@@ -86,15 +71,15 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     flexDirection: 'row',
     maxHeight: 100,
-    gap: 8,
+    gap: 2,
     paddingBottom: 5,
   },
-  buttonClose: {
-    width: 50,
-    height: 50,
-    borderRadius: 50,
-    paddingHorizontal: 0,
-    borderWidth: 1.5,
-    borderColor: COLORS.NEUTRAL_5,
+  closedWrapper: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 8,
+  },
+  helpButtonText: {
+    textTransform: 'uppercase',
   },
 })

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react'
 import { StyleSheet, View } from 'react-native'
+import { SPACING } from '@magmamath/react-native-ui'
 import { useStoreMap, useUnit } from 'effector-react'
 import { useChatModel } from '../../context/ChatBotModelContext'
 import { ColorScheme } from '../../types/style.types'
@@ -82,6 +83,7 @@ const styles = StyleSheet.create({
     width: 305,
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: 8,
+    marginVertical: SPACING['200'],
+    marginLeft: 6,
   },
 })

package/src/features/chatbot/components/ChatInput/FreeText/ChatTextInput.tsx

@@ -107,7 +107,7 @@ export const ChatTextInput = ({
         onBlur={handleOnBlur}
         onFocus={handleOnFocus}
         placeholder={placeholder}
-        placeholderTextColor={COLORS.NEUTRAL_6}
+        placeholderTextColor={COLORS.NEUTRAL_5}
         style={styles.input}
       />
       <SendMessageButton
@@ -124,10 +124,10 @@ const styles = StyleSheet.create({
     position: 'relative',
     width: '100%',
     alignItems: 'flex-end',
-    height: 52,
     justifyContent: 'center',
   },
   inputWrapper: {
+    height: 52,
     position: 'absolute',
     zIndex: 1,
     left: 0,

package/src/features/chatbot/components/ChatInput/FreeText/SendMessageButton.tsx

@@ -82,7 +82,7 @@ const styles = StyleSheet.create({
   button: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
-    height: 44,
+    height: 43,
     width: 44,
   },
   iconContainer: {

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

@@ -2,7 +2,7 @@ import React, { ComponentType } from 'react'
 
 import { ReceivedMessage } from './ReceivedMessage'
 import { SentMessage } from './SentMessage'
-import { T2SState } from '../../types/t2s.types'
+import { TTSHighlightRenderer, T2SState } from '../../types/t2s.types'
 import { MessageVariant } from '../../types/model.types'
 import { ConversationMessage } from '../../types/units.types'
 import { ColorScheme } from '../../types/style.types'
@@ -15,6 +15,8 @@ type ChatMessageProps = {
   withErrorSpotting?: boolean
   withIcon?: boolean
   colorScheme?: ColorScheme
+  highlightedWordIndex?: number
+  TTSHighlightRenderer?: TTSHighlightRenderer
 }
 
 export type VariantProps = Omit<ChatMessageProps, 'variant'>

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { Platform, StyleSheet, Text, View } from 'react-native'
 
 import { ConversationMessage } from '../../types/units.types'
-import { T2SState } from '../../types/t2s.types'
+import { TTSHighlightRenderer, T2SState } from '../../types/t2s.types'
 import { ColorScheme } from '../../types/style.types'
 
 import { MessageButtonsBlock } from './MessageButtonsBlock'
@@ -16,6 +16,8 @@ type MessageContentProps = {
   variant: MessageVariant
   colorScheme?: ColorScheme
   withErrorSpotting?: boolean
+  highlightedWordIndex?: number
+  TTSHighlightRenderer?: TTSHighlightRenderer
 }
 
 const MessageContentWeb = ({
@@ -25,10 +27,20 @@ const MessageContentWeb = ({
   variant,
   colorScheme = ColorScheme.Blue,
   withErrorSpotting,
+  highlightedWordIndex,
+  TTSHighlightRenderer: TTSHighlightComponent,
 }: MessageContentProps) => {
   return (
     <Text style={styles.messageText}>
-      {text}
+      {TTSHighlightComponent ? (
+        <TTSHighlightComponent
+          text={text}
+          highlightedIndex={highlightedWordIndex ?? -1}
+          colorScheme={colorScheme}
+        />
+      ) : (
+        text
+      )}
       <MessageButtonsBlock
         message={message}
         t2sState={t2sState}
@@ -47,11 +59,21 @@ const MessageContentMobile = ({
   variant,
   colorScheme = ColorScheme.Blue,
   withErrorSpotting,
+  highlightedWordIndex,
+  TTSHighlightRenderer: TTSHighlightComponent,
 }: MessageContentProps) => {
   return (
     <>
       <Text style={[styles.messageText, styles.mobileMessageText]}>
-        {text}
+        {TTSHighlightComponent ? (
+          <TTSHighlightComponent
+            text={text}
+            highlightedIndex={highlightedWordIndex ?? -1}
+            colorScheme={colorScheme}
+          />
+        ) : (
+          text
+        )}
         <View style={{ width: getSpacerSize(message, t2sState) }} />
       </Text>
       <MessageButtonsBlock

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

@@ -1,54 +1,42 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { COLORS } from '@magmamath/react-native-ui'
-
-import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
-import { ThreeDotsLoader } from '../ThreeDotsLoader/ThreeDotsLoader'
-import { CONTROLS_COLORS_MAP } from '../../constants'
-import { ColorScheme } from '../../types/style.types'
 import { LavaIconInGlasses } from '@magmamath/students-features'
+import { BORDER_RADIUS, COLORS, Loader, LoaderColor } from '@magmamath/react-native-ui'
 
-type MessageLoaderProps = {
-  colorScheme?: ColorScheme
-}
-
-export const MessageLoader = ({ colorScheme = ColorScheme.Blue }: MessageLoaderProps) => (
+export const MessageLoader = () => (
   <View style={styles.container}>
     <View style={styles.icon}>
-      <LavaIconInGlasses width={60} height={80} />
+      <LavaIconInGlasses width={53} height={73} />
     </View>
     <View style={styles.loader}>
-      <ThreeDotsLoader backgroundColor={CONTROLS_COLORS_MAP[colorScheme].background} />
+      <Loader color={LoaderColor.GRAY} />
     </View>
   </View>
 )
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     flexDirection: 'row',
-    width: 327,
+    width: 365,
     alignItems: 'flex-end',
-    paddingLeft:70
   },
   icon: {
-    position: 'absolute',
-    zIndex:1,
     alignSelf: 'flex-end',
-    left: 0
+    marginRight: 8,
   },
   loader: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'flex-start',
-    maxWidth: 70,
+    maxWidth: 62,
     padding: 8,
-    paddingTop: 15,
     shadowColor: '#333333',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.25,
     shadowRadius: 3,
     elevation: 3,
-    borderRadius: 8,
+    borderRadius: BORDER_RADIUS['300'],
     borderBottomLeftRadius: 0,
     backgroundColor: COLORS.NEUTRAL_3,
   },

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

@@ -1,11 +1,12 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
+import { BORDER_RADIUS } from '@magmamath/react-native-ui'
 
-import { VariantProps } from './ChatMessage'
 import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
 import { ColorScheme } from '../../types/style.types'
-import { MessageContent } from './MessageContent'
 import { MessageVariant } from '../../types/model.types'
+import { VariantProps } from './ChatMessage'
+import { MessageContent } from './MessageContent'
 
 export const ReceivedMessage = ({
   message,
@@ -14,6 +15,8 @@ export const ReceivedMessage = ({
   withIcon,
   colorScheme = ColorScheme.Blue,
   withErrorSpotting,
+  highlightedWordIndex,
+  TTSHighlightRenderer,
 }: VariantProps) => {
   const text = isTranslated ? message.translatedMessage : message.message
 
@@ -21,7 +24,7 @@ export const ReceivedMessage = ({
     <View style={styles.container}>
       {withIcon && (
         <View style={styles.icon}>
-          <ChatbotIcon width={60} height={80} />
+          <ChatbotIcon width={53} height={73} />
         </View>
       )}
 
@@ -33,6 +36,8 @@ export const ReceivedMessage = ({
           text={text ?? ''}
           colorScheme={colorScheme}
           withErrorSpotting={withErrorSpotting}
+          highlightedWordIndex={highlightedWordIndex}
+          TTSHighlightRenderer={TTSHighlightRenderer}
         />
       </View>
     </View>
@@ -43,8 +48,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'row',
-    maxWidth: 372,
-    width: 372,
+    maxWidth: 365,
+    width: 365,
     alignItems: 'flex-end',
     justifyContent: 'flex-end',
   },
@@ -62,7 +67,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3,
     elevation: 3,
-    borderRadius: 8,
+    borderRadius: BORDER_RADIUS[300],
     borderBottomLeftRadius: 0,
     backgroundColor: '#F2F2F4',
   },

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

@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
     maxWidth: 305,
     padding: SPACING[200],
-    borderRadius: BORDER_RADIUS[200],
+    borderRadius: BORDER_RADIUS[300],
     borderBottomRightRadius: 0,
   },
   text: {

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

@@ -1,4 +1,4 @@
-import React, { ComponentType, PropsWithChildren } from 'react'
+import React, { ComponentType, PropsWithChildren, useCallback } from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 
 import { ChatbotModel } from '../model/ChatBotModel'
@@ -7,6 +7,7 @@ import { ChatControls } from './ChatControls/ChatControls'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
 import { ChatBotModelContext } from '../context/ChatBotModelContext'
 import { ColorScheme } from '../types/style.types'
+import { TTSHighlightRenderer } from '../types/t2s.types'
 
 type ChatbotProps = {
   model: ChatbotModel
@@ -18,25 +19,44 @@ type ChatbotProps = {
   }
   ButtonWrapper?: ComponentType<PropsWithChildren>
   iconSize?: { width: number; height: number } // TODO: use number instead
+  isInputDisabled?: boolean
   colorScheme?: ColorScheme
+  TTSHighlightRenderer?: TTSHighlightRenderer
 }
 
 export const Chatbot = ({
   model,
   isHintFeedback,
   isTextToSpeechEnabled = false,
+  isInputDisabled,
   textToSpeechConfig,
   ButtonWrapper,
   iconSize,
   colorScheme = ColorScheme.Blue,
+  TTSHighlightRenderer,
 }: ChatbotProps) => {
+  const alternatives = useUnit(model.$alternatives)
   const isChatAllowed = useUnit(model.$chatAccess)
   const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
+  const hasBeenOpened = useStoreMap(model.$currentChatData, ({ hasBeenOpened }) => hasBeenOpened)
+
   model.t2s.setAudioConfig(textToSpeechConfig ?? null)
 
   const openChat = () => model.setIsOpen(true)
   const closeChat = () => model.setIsOpen(false)
 
+  const sendHelpRequest = useCallback(() => {
+    const option = alternatives?.options.default[0]
+    if (!option) return
+
+    model.setIsOpen(true)
+    void model.sendHelpRequestFx({
+      message: option.text,
+      translatedMessage: option.translatedText,
+      skipOwnMessage: true,
+    })
+  }, [alternatives])
+
   if (!isAvailable || !isChatAllowed) {
     return null
   }
@@ -48,14 +68,19 @@ export const Chatbot = ({
         colorScheme={colorScheme}
         isHintFeedback={isHintFeedback}
         isTextToSpeechEnabled={isTextToSpeechEnabled}
+        isInputDisabled={isInputDisabled}
+        MessageWrapper={ButtonWrapper}
+        TTSHighlightRenderer={TTSHighlightRenderer}
+        onPressClose={closeChat}
       />
 
       <ChatControls
         model={model}
         onPressChatIcon={openChat}
-        onPressClose={closeChat}
-        ButtonWrapper={ButtonWrapper}
+        onPressHelpButton={sendHelpRequest}
         iconSize={iconSize}
+        ButtonWrapper={isInputDisabled ? undefined : ButtonWrapper}
+        withHelpButton={!isInputDisabled && !hasBeenOpened}
       />
     </ChatBotModelContext.Provider>
   )

package/src/features/chatbot/constants.ts

@@ -80,3 +80,5 @@ export const CONTROLS_COLORS_MAP = {
 }
 
 export const HOVER_ANIMATION_DURATION = 200
+
+export const WORD_MARK_REGEX = /^w_(\d+)$/

package/src/features/chatbot/helpers/ttsHighlight.ts

@@ -0,0 +1,25 @@
+import { Timepoint } from '../types/api.types'
+
+const escapeXml = (str: string): string =>
+  str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+
+/**
+ * Converts plain text to SSML with word marks for TTS highlighting.
+ * "Hello world" -> '<speak><mark name="w_0"/>Hello <mark name="w_1"/>world</speak>'
+ */
+export const textToSSML = (text: string): string => {
+  const words = text.split(/\s+/).filter(Boolean)
+  if (words.length === 0) return '<speak></speak>'
+
+  const ssmlParts = words.map((word, i) => `<mark name="w_${i}"/>${escapeXml(word)}`)
+  return `<speak>${ssmlParts.join(' ')}</speak>`
+}
+
+export const findCurrentMark = (timepoints: Timepoint[], time: number): string | undefined => {
+  for (let i = timepoints.length - 1; i >= 0; i--) {
+    if (timepoints[i].timeSeconds <= time) {
+      return timepoints[i].markName
+    }
+  }
+  return undefined
+}

package/src/features/chatbot/helpers.ts

@@ -58,17 +58,27 @@ export function prepareChatRequestPayload(
     conversationId,
     freeTextMessage,
     problemDescription,
+    problemStandards,
     problemAnswer,
     language,
     imageCdnId,
     imageAltText,
     answerOptions,
     answer,
+    chatHistory,
   } = payload
 
   if (freeTextMessage) {
     return conversationId
-      ? { type: ChatRequestType.FREETEXT, data: { conversationId, message: freeTextMessage } }
+      ? {
+          type: ChatRequestType.FREETEXT,
+          data: {
+            conversationId,
+            message: freeTextMessage,
+            ...(chatHistory && { chatHistory }),
+            ...(!!problemStandards?.length && { problemStandards }),
+          },
+        }
       : {
           type: ChatRequestType.FREETEXT,
           data: {
@@ -76,8 +86,10 @@ export function prepareChatRequestPayload(
             correctAnswer: problemAnswer,
             problemDescription,
             language,
+            ...(chatHistory && { chatHistory }),
             ...(imageCdnId && { imageCdnId }),
             ...(imageAltText && { altText: imageAltText }),
+            ...(!!problemStandards?.length && { problemStandards }),
             ...(!!answerOptions?.length && { answerOptions }),
           },
         }
@@ -93,6 +105,7 @@ export function prepareChatRequestPayload(
       language,
       ...(imageCdnId && { imageCdnId }),
       ...(imageAltText && { altText: imageAltText }),
+      ...(!!problemStandards?.length && { problemStandards }),
     },
   }
 }

package/src/features/chatbot/index.ts

@@ -1,12 +1,27 @@
 export { Chatbot } from './components/Chatbot'
 export { ChatbotModel } from './model/ChatBotModel'
-export { AudioStatus, type AudioProvider } from './types/t2s.types'
+export {
+  AudioStatus,
+  type AudioProvider,
+  type TTSHighlightRenderer,
+  type TTSHighlightRendererProps,
+} from './types/t2s.types'
 export {
   MessageVariant,
   type ChatbotModelProps,
   type IChatDrawBoardAdapter,
 } from './types/model.types'
-export type { PostMessageResponse } from './types/api.types'
+export type { RequestOptionalConfig } from '../../lib/effector/createControllerEffect'
+export type {
+  ChatHintPayload,
+  ChatHintResponse,
+  ChatHistory,
+  GetAlternativesResponse,
+  GetAlternativesPayload,
+  SendMessagePayload,
+  SendMessageResponse,
+  PostMessageResponse,
+} from './types/api.types'
 export { DefaultMessagesCreator } from './model/DefaultMessageCreator'
 export type { ChatAnswer } from './types/units.types'
 export type { ConversationMessage } from './types/units.types'