@magmamath/students-features 0.6.1-8.rc-3 → 0.6.2

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

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

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

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

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

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

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

@@ -1,39 +1,20 @@
 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,
-  withIcon,
-  colorScheme = ColorScheme.Blue,
-  withErrorSpotting,
-}: VariantProps) => {
+export const ReceivedMessage = ({ message, isTranslated, t2sState }: VariantProps) => {
   const text = isTranslated ? message.translatedMessage : message.message
 
   return (
     <View style={styles.container}>
-      {withIcon && (
-        <View style={styles.icon}>
-          <ChatbotIcon width={60} height={80} />
-        </View>
-      )}
+      <View style={styles.icon}>
+        <ChatbotIcon width={60} height={80} />
+      </View>
 
       <View style={styles.message}>
-        <MessageContent
-          message={message}
-          variant={MessageVariant.RECEIVED}
-          t2sState={t2sState}
-          text={text ?? ''}
-          colorScheme={colorScheme}
-          withErrorSpotting={withErrorSpotting}
-        />
+        <MessageContent message={message} t2sState={t2sState} text={text ?? ''} />
       </View>
     </View>
   )
@@ -46,7 +27,6 @@ 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,41 +1,30 @@
 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, colorScheme = ColorScheme.Blue }: VariantProps) => {
-    const text = isTranslated ? message.translatedMessage : message.message
+export const SentMessage = React.memo(({ message, isTranslated }: VariantProps) => {
+  const text = isTranslated ? message.translatedMessage : message.message
 
-    return (
-      <View
-        style={[
-          styles.container,
-          { backgroundColor: MESSAGE_COLORS_MAP[colorScheme][MessageVariant.SENT].background },
-        ]}
-      >
-        <Text style={styles.text}>{text}</Text>
-      </View>
-    )
-  },
-)
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>{text}</Text>
+    </View>
+  )
+})
 
 const styles = StyleSheet.create({
   container: {
     alignSelf: 'flex-end',
     maxWidth: 305,
-    padding: SPACING[200],
-    borderRadius: BORDER_RADIUS[200],
+    padding: 8,
+    borderRadius: 8,
     borderBottomRightRadius: 0,
+    backgroundColor: '#55ABE0',
   },
   text: {
     fontSize: 20,
     fontWeight: 400,
-    fontFamily: FONT_FAMILY.buenosAires,
-    color: COLORS.NEUTRAL_1,
+    fontFamily: 'Buenos Aires',
+    color: '#FFF',
   },
 })

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

@@ -1,19 +1,16 @@
 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
@@ -26,7 +23,6 @@ export const ChatbotMessages = ({
   model,
   isHintFeedback,
   isTextToSpeechEnabled,
-  colorScheme = ColorScheme.Blue,
 }: ChatbotMessagesProps) => {
   const dimensions = useWindowDimensions()
   const ref = useRef<ScrollView>(null)
@@ -38,13 +34,11 @@ export const ChatbotMessages = ({
   const currentPlayingId = useUnit(model.t2s.$currentPlayingId)
   const isTranslated = useUnit(model.translation.$isTranslated)
   const audioStatus = useUnit(model.t2s.$status)
-  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 messages = useStoreMap(model.$currentChatData, ({ messages }) => messages)
+
   const askChatForHelp = (message: string, translatedMessage?: string) => {
     void model.sendHelpRequestFx({ message, translatedMessage })
   }
@@ -69,11 +63,8 @@ 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,
@@ -84,7 +75,7 @@ export const ChatbotMessages = ({
               />
             ))}
 
-            {isHelpRequestPending && <MessageLoader colorScheme={colorScheme} />}
+            {isHelpRequestPending && <MessageLoader />}
           </View>
         )}
 
@@ -93,7 +84,6 @@ export const ChatbotMessages = ({
             onPressAlternative={askChatForHelp}
             hasMessages={messages.length > 1}
             isHintFeedback={isHintFeedback}
-            colorScheme={colorScheme}
           />
         )}
       </ScrollView>

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

@@ -1,12 +1,11 @@
-import React, { ComponentType, PropsWithChildren } 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 React from 'react'
 import { ChatBotModelContext } from '../context/ChatBotModelContext'
-import { ColorScheme } from '../types/style.types'
 
 type ChatbotProps = {
   model: ChatbotModel
@@ -18,7 +17,6 @@ type ChatbotProps = {
   }
   ButtonWrapper: ComponentType<PropsWithChildren>
   iconSize?: { width: number; height: number } // TODO: use number instead
-  colorScheme?: ColorScheme
 }
 
 export const Chatbot = ({
@@ -28,7 +26,6 @@ export const Chatbot = ({
   textToSpeechConfig,
   ButtonWrapper,
   iconSize,
-  colorScheme = ColorScheme.Blue,
 }: ChatbotProps) => {
   const alternatives = useUnit(model.$alternatives)
   const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
@@ -45,7 +42,6 @@ export const Chatbot = ({
     <ChatBotModelContext.Provider value={model}>
       <ChatbotMessages
         model={model}
-        colorScheme={colorScheme}
         isHintFeedback={isHintFeedback}
         isTextToSpeechEnabled={isTextToSpeechEnabled}
       />

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

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

package/src/features/chatbot/constants.ts

@@ -1,7 +1,4 @@
-import { ButtonColor, COLORS } from '@magmamath/react-native-ui'
 import { Platform } from 'react-native'
-import { MessageVariant } from './types/model.types'
-import { ColorScheme } from './types/style.types'
 
 export const AUDIO_CONFIG = {
   audioEncoding: 'LINEAR16',
@@ -39,37 +36,3 @@ export const KATEX_REPLACEMENTS = {
 export const KATEX_REPLACEMENTS_REVERSE = {
   __KATEX_DOLLAR_SYMBOL__: '$',
 } as const
-
-export const MESSAGE_COLORS_MAP = {
-  [ColorScheme.Blue]: {
-    [MessageVariant.RECEIVED]: {
-      background: COLORS.NEUTRAL_3,
-      icon: ButtonColor.BLUE,
-    },
-    [MessageVariant.SENT]: {
-      background: COLORS.PRIMARY_BLUE,
-      icon: ButtonColor.BLUE,
-    },
-  },
-  [ColorScheme.Yellow]: {
-    [MessageVariant.RECEIVED]: {
-      background: COLORS.NEUTRAL_3,
-      icon: ButtonColor.YELLOW,
-    },
-    [MessageVariant.SENT]: {
-      background: COLORS.PRIMARY_YELLOW,
-      icon: ButtonColor.YELLOW,
-    },
-  },
-}
-
-export const CONTROLS_COLORS_MAP = {
-  [ColorScheme.Blue]: {
-    hover: COLORS.PRIMARY_BLUE,
-    background: COLORS.PRIMARY_BLUE,
-  },
-  [ColorScheme.Yellow]: {
-    hover: COLORS.PRIMARY_YELLOW,
-    background: COLORS.PRIMARY_YELLOW,
-  },
-}

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

@@ -1,5 +1,5 @@
 import { ChatbotAPI } from '../model/ChatbotApi'
-import { createEvent, createStore, sample, createEffect, Store, restore } from 'effector'
+import { createEvent, createStore, sample, createEffect, Store } from 'effector'
 import { ChatItem, ConversationMessage } from '../types/units.types'
 import { ChatbotContext } from '../types/model.types'
 
@@ -35,9 +35,7 @@ export class ErrorSpottingModel {
   public readonly errorSpottingPressed = createEvent<ErrorSpottingPressedProps>()
   private readonly activeDataChanged = createEvent<ActiveErrorSpottingData | null>()
   public readonly spottingHidden = createEvent()
-  public readonly setIsEnabled = createEvent<boolean>()
 
-  public readonly $isEnabled = restore(this.setIsEnabled, false)
   public readonly $validationKey = createStore<string | null>(null)
   public readonly $activeData = createStore<ActiveErrorSpottingData | null>(null)
     .on(this.activeDataChanged, (_, payload) => payload)
@@ -149,12 +147,4 @@ export class ErrorSpottingModel {
     this.activeDataChanged(null)
     this.abortPendingRequest()
   }
-
-  public enable() {
-    this.setIsEnabled(true)
-  }
-
-  public disable() {
-    this.setIsEnabled(false)
-  }
 }

package/src/features/chatbot/index.ts

@@ -10,4 +10,3 @@ 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'
-export { ColorScheme } from './types/style.types'