@magmamath/students-features 0.6.0 → 0.6.1-2.rc-2

package/dist/typescript/module/shared/translation/validation.types.d.ts

@@ -1,6 +1,8 @@
 import enTranslations from './localization/en.json';
 import swTranslations from './localization/sw.json';
 import gbTranslations from './localization/gb.json';
+import caTranslations from './localization/ca.json';
+import sctTranslations from './localization/sct.json';
 type Extends<T, U> = T extends U ? true : false;
 type ExtendsAll<Candidate, Types extends unknown[]> = Types extends [infer Head, ...infer Tail] ? Extends<Candidate, Head> extends true ? ExtendsAll<Candidate, Tail> : false : true;
 type FindDominantType<Types extends unknown[]> = Types extends [
@@ -10,7 +12,9 @@ type FindDominantType<Types extends unknown[]> = Types extends [
 type DominantTranslation = FindDominantType<[
     typeof enTranslations,
     typeof swTranslations,
-    typeof gbTranslations
+    typeof gbTranslations,
+    typeof caTranslations,
+    typeof sctTranslations
 ]>;
 export type ISValidTranslation<T extends DominantTranslation> = T;
 export {};

package/dist/typescript/module/shared/translation/validation.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validation.types.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/validation.types.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,wBAAwB,CAAA;AACnD,OAAO,cAAc,MAAM,wBAAwB,CAAA;AACnD,OAAO,cAAc,MAAM,wBAAwB,CAAA;AAEnD,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,KAAK,CAAA;AAE/C,KAAK,UAAU,CAAC,SAAS,EAAE,KAAK,SAAS,OAAO,EAAE,IAAI,KAAK,SAAS,CAAC,MAAM,IAAI,EAAE,GAAG,MAAM,IAAI,CAAC,GAC3F,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,GACnC,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,GAC3B,KAAK,GACP,IAAI,CAAA;AAER,KAAK,gBAAgB,CAAC,KAAK,SAAS,OAAO,EAAE,IAAI,KAAK,SAAS;IAC7D,MAAM,KAAK;IACX,GAAG,MAAM,IAAI,SAAS,OAAO,EAAE;CAChC,GACG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,IAAI,GAClC,KAAK,GACL,gBAAgB,CAAC,IAAI,CAAC,GACxB,KAAK,CAAA;AAET,KAAK,mBAAmB,GAAG,gBAAgB,CACzC;IAAC,OAAO,cAAc;IAAE,OAAO,cAAc;IAAE,OAAO,cAAc;CAAC,CACtE,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,mBAAmB,IAAI,CAAC,CAAA"}
+{"version":3,"file":"validation.types.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/validation.types.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,wBAAwB,CAAA;AACnD,OAAO,cAAc,MAAM,wBAAwB,CAAA;AACnD,OAAO,cAAc,MAAM,wBAAwB,CAAA;AACnD,OAAO,cAAc,MAAM,wBAAwB,CAAA;AACnD,OAAO,eAAe,MAAM,yBAAyB,CAAA;AAErD,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,KAAK,CAAA;AAE/C,KAAK,UAAU,CAAC,SAAS,EAAE,KAAK,SAAS,OAAO,EAAE,IAAI,KAAK,SAAS,CAAC,MAAM,IAAI,EAAE,GAAG,MAAM,IAAI,CAAC,GAC3F,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,GACnC,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,GAC3B,KAAK,GACP,IAAI,CAAA;AAER,KAAK,gBAAgB,CAAC,KAAK,SAAS,OAAO,EAAE,IAAI,KAAK,SAAS;IAC7D,MAAM,KAAK;IACX,GAAG,MAAM,IAAI,SAAS,OAAO,EAAE;CAChC,GACG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,IAAI,GAClC,KAAK,GACL,gBAAgB,CAAC,IAAI,CAAC,GACxB,KAAK,CAAA;AAET,KAAK,mBAAmB,GAAG,gBAAgB,CACzC;IACE,OAAO,cAAc;IACrB,OAAO,cAAc;IACrB,OAAO,cAAc;IACrB,OAAO,cAAc;IACrB,OAAO,eAAe;CACvB,CACF,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,mBAAmB,IAAI,CAAC,CAAA"}

package/dist/typescript/module/types/common.types.d.ts

@@ -0,0 +1,5 @@
+export type Size = {
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=common.types.d.ts.map

package/dist/typescript/module/types/common.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.types.d.ts","sourceRoot":"","sources":["../../../../src/types/common.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.6.0",
+  "version": "0.6.12.rc-2",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -17,19 +17,21 @@
     "prepare": "bob build",
     "release": "release-it"
   },
-  "dependencies": {
-    "effector": "^23.2.3",
-    "effector-react": "^23.2.1"
-  },
   "peerDependencies": {
     "@magmamath/react-native-ui": "*",
+    "effector": "^23.2.3",
+    "effector-react": "^23.2.1",
     "react": "*",
     "react-native": "*",
     "react-native-reanimated": ">=0.3.16",
-    "react-native-svg": "^15.10.0"
+    "react-native-svg": "^15.10.0",
+    "react-native-gesture-handler": "*",
+    "react-native-modalfy": "*"
   },
   "devDependencies": {
-    "@magmamath/react-native-ui": "0.4.17",
+    "@magmamath/react-native-ui": "0.4.22",
+    "effector": "^23.2.3",
+    "effector-react": "^23.2.1",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
@@ -45,6 +47,8 @@
     "react-native-builder-bob": "^0.33.3",
     "react-native-reanimated": "^3.17.2",
     "react-native-svg": "^15.10.0",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-modalfy": "^3.7.0",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"
   },

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

@@ -1,19 +1,24 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useStoreMap, useUnit } from 'effector-react'
+
 import { HelpRequestOption } from './HelpRequestOption'
 import { useChatModel } from '../../context/ChatBotModelContext'
+import { ColorScheme } from '../../types/style.types'
+import { CONTROLS_COLORS_MAP } from '../../constants'
 
 type AlternativesProps = {
   onPressAlternative: (message: string, translatedMessage?: string) => void
   hasMessages: boolean
   isHintFeedback: boolean
+  colorScheme?: ColorScheme
 }
 
 export const Alternatives = ({
   onPressAlternative,
   hasMessages,
   isHintFeedback,
+  colorScheme = ColorScheme.Blue,
 }: AlternativesProps) => {
   const model = useChatModel()
   const isTranslated = useUnit(model.translation.$isTranslated)
@@ -38,6 +43,7 @@ export const Alternatives = ({
           onPress={() => onPressAlternative(text, translatedText)}
           message={isTranslated ? (translatedText as string) : text}
           disabled={isTranslationPending}
+          hoverColor={CONTROLS_COLORS_MAP[colorScheme].hover}
         />
       ))}
     </View>

package/src/features/chatbot/components/Alternatives/HelpRequestOption.tsx

@@ -1,44 +1,40 @@
-import React from 'react'
-import { useEffect, useRef, useState } from 'react'
-import { Animated, Platform, Pressable, StyleSheet } from 'react-native'
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated, Pressable, StyleSheet } from 'react-native'
+import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
 import { ArrowRightIcon } from '../../../../shared/icons/ArrowRightIcon'
 
-const transitionColor = (isHovered: boolean, value: Animated.Value) =>
-  Animated.timing(value, {
-    toValue: isHovered ? 1 : 0,
-    duration: 200,
-    useNativeDriver: Platform.OS !== 'web',
-  }).start()
-
 type HelpRequestOptionProps = {
   onPress: () => void
   message: string
   disabled: boolean
+  hoverColor?: string
 }
 
 export const HelpRequestOption = ({
   onPress,
   message,
   disabled = false,
+  hoverColor = COLORS.PRIMARY_BLUE,
 }: HelpRequestOptionProps) => {
   const [isHovered, setIsHovered] = useState(false)
+  const hoverAnim = useRef(new Animated.Value(0)).current
 
-  const backgroundColor = useRef(new Animated.Value(0)).current
-  const backgroundInterpolation = backgroundColor.interpolate({
+  const backgroundColor = hoverAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: ['#FFFFFF', '#55ABE0'],
+    outputRange: [COLORS.NEUTRAL_1, hoverColor],
   })
-
-  const textColor = useRef(new Animated.Value(0)).current
-  const textInterpolation = textColor.interpolate({
+  const textColor = hoverAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: ['#33334D', '#FFFFFF'],
+    outputRange: [COLORS.NEUTRAL_10, COLORS.NEUTRAL_1],
   })
 
   useEffect(() => {
-    transitionColor(isHovered, backgroundColor)
-    transitionColor(isHovered, textColor)
-  }, [isHovered])
+    Animated.timing(hoverAnim, {
+      toValue: isHovered ? 1 : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start()
+  }, [isHovered, hoverAnim])
 
   return (
     <Pressable
@@ -47,12 +43,16 @@ export const HelpRequestOption = ({
       onPress={onPress}
       style={styles.button}
       disabled={disabled}
+      accessibilityState={{ disabled }}
+      accessibilityRole="button"
     >
-      <Animated.View style={[styles.textWrapper, { backgroundColor: backgroundInterpolation }]}>
-        <Animated.Text numberOfLines={1} style={[styles.text, { color: textInterpolation }]}>
+      <Animated.View
+        style={[styles.textWrapper, { backgroundColor, borderColor: backgroundColor }]}
+      >
+        <Animated.Text numberOfLines={1} style={[styles.text, { color: textColor }]}>
           {message}
         </Animated.Text>
-        <ArrowRightIcon color={isHovered ? '#FFFFFF' : '#33334D'} />
+        <ArrowRightIcon color={isHovered ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_10} />
       </Animated.View>
     </Pressable>
   )
@@ -68,8 +68,8 @@ const styles = StyleSheet.create({
   text: {
     fontSize: 20,
     fontWeight: 400,
-    fontFamily: 'Buenos Aires',
-    color: '#33334D',
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.NEUTRAL_10,
   },
   textWrapper: {
     flex: 1,
@@ -77,16 +77,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     maxWidth: 305,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
+    paddingHorizontal: SPACING[400],
+    paddingVertical: SPACING[200],
     borderWidth: 1,
     borderRadius: 48,
-    borderColor: '#55ABE0',
     elevation: 3,
     shadowColor: '#333',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.25,
     shadowRadius: 3,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: COLORS.NEUTRAL_1,
   },
 })

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

@@ -1,15 +1,20 @@
 import React, { ComponentType } from 'react'
+
 import { ReceivedMessage } from './ReceivedMessage'
 import { SentMessage } from './SentMessage'
 import { T2SState } from '../../types/t2s.types'
 import { MessageVariant } from '../../types/model.types'
 import { ConversationMessage } from '../../types/units.types'
+import { ColorScheme } from '../../types/style.types'
 
 type ChatMessageProps = {
   variant: MessageVariant
   message: ConversationMessage
-  isTranslated?: boolean
   t2sState: T2SState
+  isTranslated?: boolean
+  withErrorSpotting?: boolean
+  withIcon?: boolean
+  colorScheme?: ColorScheme
 }
 
 export type VariantProps = Omit<ChatMessageProps, 'variant'>

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

@@ -1,23 +1,43 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
+import { IS_WEB } from '@magmamath/react-native-ui'
+
 import { ErrorSpottingButton } from '../../errorSpotting/ErrorSpottingButton'
 import { MessageTextToSpeech } from './MessageTextToSpeech'
 import { ConversationMessage } from '../../types/units.types'
-import { IS_WEB } from '@magmamath/react-native-ui'
+
 import { T2SState } from '../../types/t2s.types'
+import { ColorScheme } from '../../types/style.types'
+import { MessageVariant } from '../../types/model.types'
 
 type MessageButtonsBlockProps = {
   t2sState: T2SState
   message: ConversationMessage
+  variant: MessageVariant
+  colorScheme?: ColorScheme
+  withErrorSpotting?: boolean
 }
 
-export const MessageButtonsBlock = ({ t2sState, message }: MessageButtonsBlockProps) => {
+export const MessageButtonsBlock = ({
+  t2sState,
+  message,
+  variant,
+  colorScheme,
+  withErrorSpotting,
+}: MessageButtonsBlockProps) => {
   if (!t2sState.isEnabled && !message.isInitial) return null
 
   return (
     <View style={styles.container}>
-      {!!message.isInitial && <ErrorSpottingButton contextMessage={message} />}
-      {t2sState.isEnabled && <MessageTextToSpeech state={t2sState} message={message} />}
+      {withErrorSpotting && !!message.isInitial && <ErrorSpottingButton contextMessage={message} />}
+      {t2sState.isEnabled && (
+        <MessageTextToSpeech
+          state={t2sState}
+          message={message}
+          variant={variant}
+          colorScheme={colorScheme}
+        />
+      )}
     </View>
   )
 }

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

@@ -1,33 +1,66 @@
+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 { Platform, StyleSheet, Text, View } from 'react-native'
+import { ColorScheme } from '../../types/style.types'
+
 import { MessageButtonsBlock } from './MessageButtonsBlock'
 import { getSpacerSize } from './helpers'
-import React from 'react'
+import { MessageVariant } from '../../types/model.types'
 
 type MessageContentProps = {
   text: string
   message: ConversationMessage
   t2sState: T2SState
+  variant: MessageVariant
+  colorScheme?: ColorScheme
+  withErrorSpotting?: boolean
 }
 
-const MessageContentWeb = ({ message, text, t2sState }: MessageContentProps) => {
+const MessageContentWeb = ({
+  message,
+  text,
+  t2sState,
+  variant,
+  colorScheme = ColorScheme.Blue,
+  withErrorSpotting,
+}: MessageContentProps) => {
   return (
     <Text style={styles.messageText}>
       {text}
-      <MessageButtonsBlock message={message} t2sState={t2sState} />
+      <MessageButtonsBlock
+        message={message}
+        t2sState={t2sState}
+        variant={variant}
+        colorScheme={colorScheme}
+        withErrorSpotting={withErrorSpotting}
+      />
     </Text>
   )
 }
 
-const MessageContentMobile = ({ message, text, t2sState }: MessageContentProps) => {
+const MessageContentMobile = ({
+  message,
+  text,
+  t2sState,
+  variant,
+  colorScheme = ColorScheme.Blue,
+  withErrorSpotting,
+}: MessageContentProps) => {
   return (
     <>
       <Text style={[styles.messageText, styles.mobileMessageText]}>
         {text}
         <View style={{ width: getSpacerSize(message, t2sState) }} />
       </Text>
-      <MessageButtonsBlock message={message} t2sState={t2sState} />
+      <MessageButtonsBlock
+        message={message}
+        t2sState={t2sState}
+        variant={variant}
+        colorScheme={colorScheme}
+        withErrorSpotting={withErrorSpotting}
+      />
     </>
   )
 }

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

@@ -1,15 +1,23 @@
 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'
+
+type MessageLoaderProps = {
+  colorScheme?: ColorScheme
+}
 
-export const MessageLoader = () => (
+export const MessageLoader = ({ colorScheme = ColorScheme.Blue }: MessageLoaderProps) => (
   <View style={styles.container}>
     <View style={styles.icon}>
       <ChatbotIcon width={60} height={80} />
     </View>
     <View style={styles.loader}>
-      <ThreeDotsLoader />
+      <ThreeDotsLoader backgroundColor={CONTROLS_COLORS_MAP[colorScheme].background} />
     </View>
   </View>
 )
@@ -38,6 +46,6 @@ const styles = StyleSheet.create({
     elevation: 3,
     borderRadius: 8,
     borderBottomLeftRadius: 0,
-    backgroundColor: '#F2F2F4',
+    backgroundColor: COLORS.NEUTRAL_3,
   },
 })

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

@@ -1,41 +1,55 @@
 import React from 'react'
 import { ActivityIndicator } from 'react-native'
+import { Button, COLORS } from '@magmamath/react-native-ui'
+
 import { SpeakerIcon } from '../../../../shared/icons/SpeakerIcon'
 import { PlayIcon } from '../../../../shared/icons/PlayIcon'
 import { PauseIcon } from '../../../../shared/icons/PauseIcon'
 import { AudioStatus, T2SState } from '../../types/t2s.types'
 import { useChatModel } from '../../context/ChatBotModelContext'
 import { ConversationMessage } from '../../types/units.types'
-import { Button, COLORS } from '@magmamath/react-native-ui'
+import { ColorScheme } from '../../types/style.types'
+import { MessageVariant } from '../../types/model.types'
+import { CONTROLS_COLORS_MAP, MESSAGE_COLORS_MAP } from '../../constants'
 
 type TextToSpeechIconProps = {
   status: AudioStatus
   isLoading: boolean
   isActive: boolean
+  colorScheme?: ColorScheme
 }
 
-const TextToSpeechIcon = ({ status, isActive, isLoading }: TextToSpeechIconProps) => {
+const TextToSpeechIcon = ({
+  status,
+  isActive,
+  isLoading,
+  colorScheme = ColorScheme.Blue,
+}: TextToSpeechIconProps) => {
   if (isLoading && isActive) {
-    return <ActivityIndicator />
+    return <ActivityIndicator color={CONTROLS_COLORS_MAP[colorScheme].background} />
   }
 
   if (!isActive) {
-    return <SpeakerIcon color={isActive ? COLORS.PRIMARY_BLUE : undefined} />
+    return <SpeakerIcon />
   }
 
   if (status === 'playing') return <PauseIcon color={COLORS.NEUTRAL_1} />
   if (status === 'paused') return <PlayIcon color={COLORS.NEUTRAL_1} />
-  return <SpeakerIcon color={isActive ? COLORS.PRIMARY_BLUE : undefined} />
+  return <SpeakerIcon />
 }
 
 type MessageTextToSpeechProps = {
   state: T2SState
   message: ConversationMessage
+  variant: MessageVariant
+  colorScheme?: ColorScheme
 }
 
 export const MessageTextToSpeech = ({
   state: { status, disabled, isActive, isLoading },
   message,
+  variant,
+  colorScheme = ColorScheme.Blue,
 }: MessageTextToSpeechProps) => {
   const model = useChatModel()
 
@@ -51,10 +65,17 @@ export const MessageTextToSpeech = ({
       disabled={disabled}
       isActive={isActive}
       variant={'secondary'}
-      colorScheme={'blue'}
+      colorScheme={MESSAGE_COLORS_MAP[colorScheme][variant].icon}
       size={'small'}
       onPress={play}
-      icon={<TextToSpeechIcon isActive={isActive} isLoading={isLoading} status={status} />}
+      icon={
+        <TextToSpeechIcon
+          isActive={isActive}
+          isLoading={isLoading}
+          status={status}
+          colorScheme={colorScheme}
+        />
+      }
     />
   )
 }

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

@@ -1,20 +1,39 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
+
 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'
 
-export const ReceivedMessage = ({ message, isTranslated, t2sState }: VariantProps) => {
+export const ReceivedMessage = ({
+  message,
+  isTranslated,
+  t2sState,
+  withIcon,
+  colorScheme = ColorScheme.Blue,
+  withErrorSpotting,
+}: VariantProps) => {
   const text = isTranslated ? message.translatedMessage : message.message
 
   return (
     <View style={styles.container}>
-      <View style={styles.icon}>
-        <ChatbotIcon width={60} height={80} />
-      </View>
+      {withIcon && (
+        <View style={styles.icon}>
+          <ChatbotIcon width={60} height={80} />
+        </View>
+      )}
 
       <View style={styles.message}>
-        <MessageContent message={message} t2sState={t2sState} text={text ?? ''} />
+        <MessageContent
+          message={message}
+          variant={MessageVariant.RECEIVED}
+          t2sState={t2sState}
+          text={text ?? ''}
+          colorScheme={colorScheme}
+          withErrorSpotting={withErrorSpotting}
+        />
       </View>
     </View>
   )
@@ -27,6 +46,7 @@ const styles = StyleSheet.create({
     maxWidth: 372,
     width: 372,
     alignItems: 'flex-end',
+    justifyContent: 'flex-end',
   },
   icon: {
     alignSelf: 'flex-end',

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

@@ -1,30 +1,41 @@
 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'
+import { MESSAGE_COLORS_MAP } from '../../constants'
+import { ColorScheme } from '../../types/style.types'
+import { MessageVariant } from '../../types/model.types'
 
-export const SentMessage = React.memo(({ message, isTranslated }: VariantProps) => {
-  const text = isTranslated ? message.translatedMessage : message.message
+export const SentMessage = React.memo(
+  ({ message, isTranslated, colorScheme = ColorScheme.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: MESSAGE_COLORS_MAP[colorScheme][MessageVariant.SENT].background },
+        ]}
+      >
+        <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,16 +1,19 @@
 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'
 import { ChatMessage } from '../ChatMessage/ChatMessage'
 import { MessageLoader } from '../ChatMessage/MessageLoader'
 import { Alternatives } from '../Alternatives/Alternatives'
 import { MessageVariant } from '../../types/model.types'
+import { ColorScheme } from '../../types/style.types'
 
 type ChatbotMessagesProps = {
   model: ChatbotModel
   isHintFeedback: boolean
   isTextToSpeechEnabled: boolean
+  colorScheme?: ColorScheme
 }
 
 const TOOLBAR_HEIGHT = 140
@@ -23,6 +26,7 @@ export const ChatbotMessages = ({
   model,
   isHintFeedback,
   isTextToSpeechEnabled,
+  colorScheme = ColorScheme.Blue,
 }: ChatbotMessagesProps) => {
   const dimensions = useWindowDimensions()
   const ref = useRef<ScrollView>(null)
@@ -34,10 +38,12 @@ export const ChatbotMessages = ({
   const currentPlayingId = useUnit(model.t2s.$currentPlayingId)
   const isTranslated = useUnit(model.translation.$isTranslated)
   const audioStatus = useUnit(model.t2s.$status)
-
-  const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
+  const errorSpottingEnabled = useUnit(model.errorSpotting.$isEnabled)
 
   const messages = useStoreMap(model.$currentChatData, ({ messages }) => messages)
+  const lastMessageId = messages.at(-1)?.id
+
+  const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
 
   const askChatForHelp = (message: string, translatedMessage?: string) => {
     void model.sendHelpRequestFx({ message, translatedMessage })
@@ -63,8 +69,11 @@ export const ChatbotMessages = ({
               <ChatMessage
                 key={message.id}
                 isTranslated={isTranslated}
+                withIcon={!message.isOwnMessage && message.id === lastMessageId}
                 message={message}
                 variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
+                colorScheme={colorScheme}
+                withErrorSpotting={errorSpottingEnabled && !message.isOwnMessage}
                 t2sState={{
                   isEnabled: isTextToSpeechEnabled && !message.isOwnMessage,
                   isActive: message.id === currentPlayingId,
@@ -75,7 +84,7 @@ export const ChatbotMessages = ({
               />
             ))}
 
-            {isHelpRequestPending && <MessageLoader />}
+            {isHelpRequestPending && <MessageLoader colorScheme={colorScheme} />}
           </View>
         )}
 
@@ -84,6 +93,7 @@ export const ChatbotMessages = ({
             onPressAlternative={askChatForHelp}
             hasMessages={messages.length > 1}
             isHintFeedback={isHintFeedback}
+            colorScheme={colorScheme}
           />
         )}
       </ScrollView>