@magmamath/students-features 0.6.10 → 0.6.11-rc.1

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

@@ -1,30 +1,33 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+
 import { VariantProps } from './ChatMessage'
 
-export const SentMessage = React.memo(({ message, isTranslated }: VariantProps) => {
-  const text = isTranslated ? message.translatedMessage : message.message
+export const SentMessage = React.memo(
+  ({ message, isTranslated, backgroundColor = COLORS.PRIMARY_BLUE }: VariantProps) => {
+    const text = isTranslated ? message.translatedMessage : message.message
 
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>{text}</Text>
-    </View>
-  )
-})
+    return (
+      <View style={[styles.container, { backgroundColor }]}>
+        <Text style={styles.text}>{text}</Text>
+      </View>
+    )
+  },
+)
 
 const styles = StyleSheet.create({
   container: {
     alignSelf: 'flex-end',
     maxWidth: 305,
-    padding: 8,
-    borderRadius: 8,
+    padding: SPACING[200],
+    borderRadius: BORDER_RADIUS[200],
     borderBottomRightRadius: 0,
-    backgroundColor: '#55ABE0',
   },
   text: {
     fontSize: 20,
     fontWeight: 400,
-    fontFamily: 'Buenos Aires',
-    color: '#FFF',
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.NEUTRAL_1,
   },
 })

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

@@ -1,6 +1,8 @@
 import React, { useRef } from 'react'
 import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useStoreMap, useUnit } from 'effector-react'
+import { COLORS } from '@magmamath/react-native-ui'
+
 import { ChatbotModel } from '../../model/ChatBotModel'
 import { ChatMessage } from '../ChatMessage/ChatMessage'
 import { MessageLoader } from '../ChatMessage/MessageLoader'
@@ -34,6 +36,7 @@ export const ChatbotMessages = ({
   const currentPlayingId = useUnit(model.t2s.$currentPlayingId)
   const isTranslated = useUnit(model.translation.$isTranslated)
   const audioStatus = useUnit(model.t2s.$status)
+  const context = useUnit(model.$context)
 
   const messages = useStoreMap(model.$currentChatData, ({ messages }) => messages)
   const lastMessageId = messages.at(-1)?.id
@@ -60,24 +63,37 @@ export const ChatbotMessages = ({
       >
         {isOpen && (
           <View style={styles.gap}>
-            {messages.map((message) => (
-              <ChatMessage
-                key={message.id}
-                isTranslated={isTranslated}
-                withIcon={!message.isOwnMessage && message.id === lastMessageId}
-                message={message}
-                variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
-                t2sState={{
-                  isEnabled: isTextToSpeechEnabled && !message.isOwnMessage,
-                  isActive: message.id === currentPlayingId,
-                  isLoading: isTextToSpeechPending,
-                  status: audioStatus,
-                  disabled: isTextToSpeechPending,
-                }}
-              />
-            ))}
+            {messages.map((message) => {
+              const backgroundColor = message.isOwnMessage
+                ? context?.isPracticeMode
+                  ? COLORS.PRIMARY_YELLOW
+                  : COLORS.PRIMARY_BLUE
+                : COLORS.NEUTRAL_3
 
-            {isHelpRequestPending && <MessageLoader />}
+              return (
+                <ChatMessage
+                  key={message.id}
+                  isTranslated={isTranslated}
+                  withIcon={!message.isOwnMessage && message.id === lastMessageId}
+                  message={message}
+                  variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
+                  backgroundColor={backgroundColor}
+                  t2sState={{
+                    isEnabled: isTextToSpeechEnabled && !message.isOwnMessage,
+                    isActive: message.id === currentPlayingId,
+                    isLoading: isTextToSpeechPending,
+                    status: audioStatus,
+                    disabled: isTextToSpeechPending,
+                  }}
+                />
+              )
+            })}
+
+            {isHelpRequestPending && (
+              <MessageLoader
+                dotsColor={context?.isPracticeMode ? COLORS.PRIMARY_YELLOW : COLORS.PRIMARY_BLUE}
+              />
+            )}
           </View>
         )}
 

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

@@ -1,7 +1,8 @@
-import React from 'react'
-import { useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { View, Animated, StyleSheet, Platform } from 'react-native'
 
+import { COLORS } from '@magmamath/react-native-ui'
+
 type ChatLoaderProps = {
   dotsCount?: number
   animationDuration?: number
@@ -11,12 +12,12 @@ type ChatLoaderProps = {
 export const ThreeDotsLoader = ({
   dotsCount = 3,
   animationDuration = 250,
-  backgroundColor = '#55ABE0',
+  backgroundColor = COLORS.PRIMARY_BLUE,
 }: ChatLoaderProps) => {
   const isWeb = Platform.OS === 'web'
   const animations = useMemo(
     () => [...Array(dotsCount)].map(() => new Animated.Value(0)),
-    [dotsCount]
+    [dotsCount],
   )
 
   useEffect(() => {
@@ -33,7 +34,7 @@ export const ThreeDotsLoader = ({
           duration: animationDuration,
           useNativeDriver: !isWeb,
         }),
-      ])
+      ]),
     )
 
     Animated.loop(Animated.parallel(animationsArray)).start()
@@ -50,11 +51,7 @@ export const ThreeDotsLoader = ({
         return (
           <Animated.View
             key={index}
-            style={[
-              styles.dot,
-              { transform: [{ translateY }] },
-              { backgroundColor },
-            ]}
+            style={[styles.dot, { transform: [{ translateY }] }, { backgroundColor }]}
           />
         )
       })}

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

@@ -163,7 +163,9 @@ export class ChatbotModel {
           messagesHelper.createAnswer(response, { isInitial: thread?.history.length === 1 }),
         ]
         if (response.endMessage) {
-          messages.push(messagesHelper.createLast(this.defaultMessages.endMessage))
+          context.isPracticeMode
+            ? messages.push(messagesHelper.createLast(this.defaultMessages.hintsLimitReached))
+            : messages.push(messagesHelper.createLast(this.defaultMessages.endMessage))
         }
         const translatedMessages = await this.translation.applyTranslationFx(messages)
 

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

@@ -16,5 +16,6 @@ export class ChatBotTextManager {
     start: this.messagesCreator.createMessage('chat.howCanIHelp'),
     endMessage: this.messagesCreator.createMessage('chat.answerAgain'),
     anotherHintOption: this.messagesCreator.createOption('chat.anotherHint'),
+    hintsLimitReached: this.messagesCreator.createMessage('chat.hintsLimitReached'),
   }
 }

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

@@ -21,6 +21,7 @@ export type ChatbotMessages = {
   start: ConversationMessage
   endMessage: ConversationMessage
   anotherHintOption: ChatAnswer
+  hintsLimitReached: ConversationMessage
 }
 
 export type ChatbotApiRequests = {
@@ -104,4 +105,5 @@ export type ChatbotContext = {
   answer?: string | string[]
   translationTargetLanguage: string
   imageDescription?: string
+  isPracticeMode?: boolean
 }

package/src/shared/translation/localization/ca.json

@@ -17,7 +17,8 @@
     "answerAgain": "Answer again to get another hint!",
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
-    "showError": "Show error"
+    "showError": "Show error",
+    "hintsLimitReached": "I cannot give any more hints."
   },
   "gifCelebrations": {
     "greatStart": "Great start!",

package/src/shared/translation/localization/en.json

@@ -17,7 +17,8 @@
     "answerAgain": "Answer again to get another hint!",
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
-    "showError": "Show error"
+    "showError": "Show error",
+    "hintsLimitReached": "I cannot give any more hints."
   },
   "gifCelebrations": {
     "greatStart": "Great start!",

package/src/shared/translation/localization/gb.json

@@ -17,7 +17,8 @@
     "answerAgain": "Answer again to get another hint!",
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
-    "showError": "Show error"
+    "showError": "Show error",
+    "hintsLimitReached": "I cannot give any more hints."
   },
   "gifCelebrations": {
     "greatStart": "Great start!",

package/src/shared/translation/localization/sct.json

@@ -17,7 +17,8 @@
     "answerAgain": "Answer again to get another hint!",
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
-    "showError": "Show error"
+    "showError": "Show error",
+    "hintsLimitReached": "I cannot give any more hints."
   },
   "gifCelebrations": {
     "greatStart": "Great start!",

package/src/shared/translation/localization/sw.json

@@ -17,7 +17,8 @@
     "answerAgain": "Svara igen för att få en till ledtråd!",
     "errorMessage": "Något gick snett! Försök igen",
     "howCanIHelp": "Hej! Hur kan jag hjälpa dig?",
-    "showError": "Visa fel"
+    "showError": "Visa fel",
+    "hintsLimitReached": "Jag kan inte ge några fler ledtrådar."
   },
   "gifCelebrations": {
     "greatStart": "Bra start!",