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

package/src/features/chatbot/components/Chat/GradientFade.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Platform, StyleSheet, View, ViewStyle } from 'react-native'
+
+type GradientFadeProps = {
+  colors: string[]
+  locations?: number[]
+  style?: ViewStyle
+}
+
+const WebGradient = ({ colors, locations, style }: GradientFadeProps) => {
+  const stops = colors
+    .map((color, i) => {
+      const position = locations ? `${locations[i] * 100}%` : undefined
+      return position ? `${color} ${position}` : color
+    })
+    .join(', ')
+
+  return (
+    <View
+      style={[
+        StyleSheet.absoluteFill,
+        style,
+        { backgroundImage: `linear-gradient(to bottom, ${stops})` } as any,
+      ]}
+    />
+  )
+}
+
+const NativeGradient = ({ colors, locations, style }: GradientFadeProps) => {
+  const { LinearGradient } = require('expo-linear-gradient')
+  return (
+    <LinearGradient
+      colors={colors}
+      locations={locations}
+      style={[StyleSheet.absoluteFill, style]}
+    />
+  )
+}
+
+export const GradientFade = Platform.select({
+  web: WebGradient,
+  default: NativeGradient,
+})

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,48 @@ 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 isTranslated = useUnit(model.translation.$isTranslated)
+  const wantHelp = model.textManager.messages.wantHelp
+  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 }}
+            >
+              {(isTranslated && wantHelp.translatedText) || wantHelp.text}
+            </Button>
+          )}
+        </View>
       </ButtonWrapper>
     </View>
   )
@@ -86,15 +73,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,6 @@ const styles = StyleSheet.create({
     width: 305,
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: 8,
+    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/AnimatedMessage.tsx

@@ -0,0 +1,30 @@
+import React, { PropsWithChildren, useEffect } from 'react'
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
+
+const INITIAL_OFFSET = 25
+const SPRING_CONFIG = { mass: 1.1, stiffness: 177, damping: 20 }
+
+type AnimatedMessageProps = PropsWithChildren<{ animate?: boolean }>
+
+export const AnimatedMessage = ({ children, animate = true }: AnimatedMessageProps) => {
+  const translateY = useSharedValue(animate ? INITIAL_OFFSET : 0)
+
+  useEffect(() => {
+    if (animate) {
+      translateY.value = withSpring(0, SPRING_CONFIG)
+    }
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateY: translateY.value }],
+    }),
+    [translateY],
+  )
+
+  return (
+    <Animated.View style={[animate && animatedStyle, { alignItems: 'flex-end' }]}>
+      {children}
+    </Animated.View>
+  )
+}

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'
@@ -13,8 +13,10 @@ type ChatMessageProps = {
   t2sState: T2SState
   isTranslated?: boolean
   withErrorSpotting?: boolean
-  withIcon?: boolean
   colorScheme?: ColorScheme
+  highlightedWordIndex?: number
+  TTSHighlightRenderer?: TTSHighlightRenderer
+  withIcon?: boolean
 }
 
 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,38 @@
-import React from 'react'
+import React, { PropsWithChildren } 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'
+import { SPACING } from '@magmamath/react-native-ui'
 
 type MessageLoaderProps = {
-  colorScheme?: ColorScheme
+  isLoading?: boolean
 }
 
-export const MessageLoader = ({ colorScheme = ColorScheme.Blue }: MessageLoaderProps) => (
-  <View style={styles.container}>
-    <View style={styles.icon}>
-      <LavaIconInGlasses width={60} height={80} />
-    </View>
+export const MessageLoader = ({ isLoading }: MessageLoaderProps) => {
+  if (!isLoading) return null
+
+  return (
     <View style={styles.loader}>
-      <ThreeDotsLoader backgroundColor={CONTROLS_COLORS_MAP[colorScheme].background} />
+      <Loader color={LoaderColor.GRAY} />
     </View>
-  </View>
-)
+  )
+}
 
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    width: 327,
-    alignItems: 'flex-end',
-    paddingLeft:70
-  },
-  icon: {
-    position: 'absolute',
-    zIndex:1,
-    alignSelf: 'flex-end',
-    left: 0
-  },
   loader: {
-    flex: 1,
+    marginLeft: 68,
+    alignSelf: 'flex-start',
+    marginTop: SPACING['200'],
     flexDirection: 'row',
     alignItems: 'flex-start',
-    maxWidth: 70,
+    justifyContent: 'flex-start',
+    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,11 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-
-import { VariantProps } from './ChatMessage'
-import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
+import { BORDER_RADIUS, SPACING } from '@magmamath/react-native-ui'
+import { ChatbotIcon } from '@magmamath/students-features'
 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 +14,8 @@ export const ReceivedMessage = ({
   withIcon,
   colorScheme = ColorScheme.Blue,
   withErrorSpotting,
+  highlightedWordIndex,
+  TTSHighlightRenderer,
 }: VariantProps) => {
   const text = isTranslated ? message.translatedMessage : message.message
 
@@ -21,7 +23,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 +35,8 @@ export const ReceivedMessage = ({
           text={text ?? ''}
           colorScheme={colorScheme}
           withErrorSpotting={withErrorSpotting}
+          highlightedWordIndex={highlightedWordIndex}
+          TTSHighlightRenderer={TTSHighlightRenderer}
         />
       </View>
     </View>
@@ -43,14 +47,11 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'row',
-    maxWidth: 372,
-    width: 372,
+    maxWidth: 365,
+    width: 305,
     alignItems: 'flex-end',
     justifyContent: 'flex-end',
-  },
-  icon: {
-    alignSelf: 'flex-end',
-    marginRight: 8,
+    paddingHorizontal: 2,
   },
   message: {
     flex: 1,
@@ -62,8 +63,12 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3,
     elevation: 3,
-    borderRadius: 8,
+    borderRadius: BORDER_RADIUS[300],
     borderBottomLeftRadius: 0,
     backgroundColor: '#F2F2F4',
   },
+
+  icon: {
+    paddingRight: SPACING[200],
+  },
 })

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,36 +7,58 @@ 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
   isHintFeedback: boolean
   isTextToSpeechEnabled: boolean
+  withQuickActionButton?: boolean
   textToSpeechConfig?: {
     voice: typeof DEFAULT_VOICE
     audioConfig: typeof AUDIO_CONFIG
   }
   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,
+  withQuickActionButton,
+  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 +70,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={withQuickActionButton && !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 }),
     },
   }
 }