@magmamath/students-features 0.11.0-rc.8 → 1.0.0

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

@@ -3,5 +3,8 @@ export type Size = {
     width: number;
     height: number;
 };
+export type WithAbortSignal<T> = T & {
+    signal?: AbortSignal;
+};
 export type ColorValue = (typeof COLORS)[keyof typeof COLORS];
 //# sourceMappingURL=common.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"common.types.d.ts","sourceRoot":"","sources":["../../../../src/types/common.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAEnD,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,OAAO,MAAM,CAAC,CAAA"}
+{"version":3,"file":"common.types.d.ts","sourceRoot":"","sources":["../../../../src/types/common.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAEnD,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AACD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAE,CAAA;AAE7D,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,OAAO,MAAM,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.11.0-rc.8",
+  "version": "1.0.0",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -21,15 +21,18 @@
     "@magmamath/react-native-ui": "*",
     "effector": "^23.2.3",
     "effector-react": "^23.2.1",
+    "patronum": "^2.3.0",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "*",
     "react-native-modalfy": "*",
     "react-native-reanimated": ">=0.3.16",
-    "react-native-svg": "^15.10.0"
+    "react-native-svg": "^15.10.0",
+    "expo-audio": "^1.1.1",
+    "expo": ">=52.0.47"
   },
   "devDependencies": {
-    "@magmamath/react-native-ui": "0.4.61",
+    "@magmamath/react-native-ui": "0.4.82",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
@@ -40,8 +43,11 @@
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
+    "expo": "^52.0.47",
+    "expo-audio": "^1.1.1",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
+    "patronum": "^2.3.0",
     "react": "18.3.1",
     "react-native": "0.76.3",
     "react-native-builder-bob": "^0.33.3",
@@ -50,7 +56,8 @@
     "react-native-reanimated": "^3.17.2",
     "react-native-svg": "^15.10.0",
     "release-it": "^17.10.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "axios": "^1.13.5"
   },
   "resolutions": {
     "@types/react": "^18.2.44"

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

@@ -1,42 +1,16 @@
-import React, {
-  ComponentType,
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {
-  FlatList,
-  ListRenderItemInfo,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  Platform,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-} from 'react-native'
+import React, { ComponentType, PropsWithChildren, useRef } from 'react'
+import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useStoreMap, useUnit } from 'effector-react'
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
-import { SPACING } from '@magmamath/react-native-ui'
 
-import { ConversationMessage } from '../../types/units.types'
 import { ChatbotModel } from '../../model/ChatBotModel'
-import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
-import { LavaIconInGlasses } from '../../../../shared/icons/LavaIconInGlasses'
-import { AnimatedMessage } from '../ChatMessage/AnimatedMessage'
 import { ChatMessage } from '../ChatMessage/ChatMessage'
 import { MessageLoader } from '../ChatMessage/MessageLoader'
 import { ChatInput } from '../ChatInput/ChatInput'
-import { CloseButton } from './CloseButton'
 import { MessageVariant } from '../../types/model.types'
 import { ColorScheme } from '../../types/style.types'
 import { ConditionalWrapper } from '../../../../lib/components/ConditionalWrapper'
 import { TTSHighlightRenderer } from '../../types/t2s.types'
 
-const SCROLL_BOTTOM_THRESHOLD = 1
-
 const TOOLBAR_HEIGHT = 140
 const BOTTOM_OFFSET = Platform.select({
   web: 265,
@@ -51,7 +25,6 @@ type ChatProps = {
   colorScheme?: ColorScheme
   MessageWrapper?: ComponentType<PropsWithChildren>
   TTSHighlightRenderer?: TTSHighlightRenderer
-  onPressClose?: () => void
 }
 
 export const Chat = ({
@@ -62,10 +35,9 @@ export const Chat = ({
   colorScheme = ColorScheme.Blue,
   MessageWrapper,
   TTSHighlightRenderer,
-  onPressClose,
 }: ChatProps) => {
   const dimensions = useWindowDimensions()
-  const ref = useRef<FlatList>(null)
+  const ref = useRef<ScrollView>(null)
   const isOpen = useUnit(model.$isOpen)
 
   const isHelpRequestPending = useUnit(model.sendHelpRequestFx.pending)
@@ -79,133 +51,70 @@ export const Chat = ({
   const errorSpottingEnabled = useUnit(model.errorSpotting.$isEnabled)
 
   const messages = useStoreMap(model.$currentChatData, ({ messages }) => messages)
-  const lastBotMessageId = messages.findLast((m) => !m.isOwnMessage)?.id
-  const [showBottomFade, setShowBottomFade] = useState(false)
-
-  useEffect(() => {
-    if (!isOpen) {
-      setShowBottomFade(false)
-    }
-  }, [isOpen])
-
-  const handleScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const { contentOffset } = e.nativeEvent
-    setShowBottomFade(contentOffset.y > SCROLL_BOTTOM_THRESHOLD)
-  }, [])
+  const lastMessageId = messages.at(-1)?.id
 
   const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
   const shouldWrapMessage = MessageWrapper && isInputDisabled && messages.length === 1
-  const reversedMessages = useMemo(() => [...messages].reverse(), [messages])
-
-  const renderMessage = useCallback(
-    ({ item: message }: ListRenderItemInfo<ConversationMessage>) => {
-      const isPlayingMessage = message.id === currentPlayingId
-      const messageHighlightIndex =
-        model.t2s.isWordHighlightEnabled && isPlayingMessage ? highlightedWordIndex : -1
-
-      const showInlineIcon =
-        showBottomFade && !message.isOwnMessage && message.id === lastBotMessageId
-
-      return (
-        <View style={[styles.messageItem, showInlineIcon && styles.messageWithIcon]}>
-          {showInlineIcon && (
-            <View style={styles.inlineIcon}>
-              <ChatbotIcon width={53} height={73} />
-            </View>
-          )}
-          <AnimatedMessage>
-            <ConditionalWrapper withWrapper={shouldWrapMessage} Wrapper={MessageWrapper}>
-              <ChatMessage
-                isTranslated={isTranslated}
-                message={message}
-                variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
-                colorScheme={colorScheme}
-                withErrorSpotting={errorSpottingEnabled && !message.isOwnMessage}
-                highlightedWordIndex={messageHighlightIndex}
-                TTSHighlightRenderer={TTSHighlightRenderer}
-                t2sState={{
-                  isEnabled: isTextToSpeechEnabled && !message.isOwnMessage,
-                  isActive: isPlayingMessage,
-                  isLoading: isTextToSpeechPending,
-                  status: audioStatus,
-                  disabled: isTextToSpeechPending,
-                }}
-              />
-            </ConditionalWrapper>
-          </AnimatedMessage>
-        </View>
-      )
-    },
-    [
-      currentPlayingId,
-      highlightedWordIndex,
-      showBottomFade,
-      lastBotMessageId,
-      shouldWrapMessage,
-      isTranslated,
-      colorScheme,
-      errorSpottingEnabled,
-      isTextToSpeechEnabled,
-      isTextToSpeechPending,
-      audioStatus,
-    ],
-  )
 
   return (
     <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
-      {isOpen && (
-        <FlatList
-          ref={ref}
-          inverted
-          bounces={false}
-          style={styles.flatList}
-          data={reversedMessages}
-          keyExtractor={(item, index) => `${item.id}-${index}`}
-          renderItem={renderMessage}
-          contentContainerStyle={styles.list}
-          onScroll={handleScroll}
-          scrollEventThrottle={16}
-          onContentSizeChange={(_, height) => {
-            if (height >= MAX_HEIGHT) {
-              model.setScrollActive(true)
-            }
-          }}
-          ListHeaderComponent={isHelpRequestPending ? <MessageLoader /> : null}
-          ItemSeparatorComponent={() => <View style={styles.separator} />}
-        />
-      )}
-      {isOpen && showBottomFade && (
-        <Animated.View
-          entering={FadeIn.duration(200)}
-          exiting={FadeOut.duration(200)}
-          style={styles.bottomFade}
-          pointerEvents="none"
-        />
-      )}
-
-      {isOpen && !showBottomFade && (
-        // {isOpen && (
-        <View style={styles.iconAbsolute}>
-          {isHelpRequestPending ? (
-            <LavaIconInGlasses width={53} height={73} />
-          ) : (
-            <ChatbotIcon width={53} height={73} color={'blue'} />
-          )}
-        </View>
-      )}
-
-      {isOpen && (
-        <View style={styles.inputRow}>
-          <CloseButton onPress={onPressClose} />
-          {!isInputDisabled && (
-            <ChatInput
-              isHintFeedback={isHintFeedback}
-              colorScheme={colorScheme}
-              hasMessages={messages.length > 1}
-            />
-          )}
-        </View>
-      )}
+      <ScrollView
+        ref={ref}
+        bounces={false}
+        contentContainerStyle={styles.list}
+        onContentSizeChange={(_, height) => {
+          ref.current?.scrollToEnd()
+
+          if (height >= MAX_HEIGHT) {
+            model.setScrollActive(true)
+          }
+        }}
+      >
+        {isOpen && (
+          <View style={[styles.gap, isInputDisabled && styles.messagesWithoutInput]}>
+            {messages.map((message, index) => {
+              const key = `${message.id}-${index}`
+              const isPlayingMessage = message.id === currentPlayingId
+              const messageHighlightIndex =
+                model.t2s.isWordHighlightEnabled && isPlayingMessage ? highlightedWordIndex : -1
+
+              return (
+                <React.Fragment key={key}>
+                  <ConditionalWrapper withWrapper={shouldWrapMessage} Wrapper={MessageWrapper}>
+                    <ChatMessage
+                      isTranslated={isTranslated}
+                      withIcon={!message.isOwnMessage && message.id === lastMessageId}
+                      message={message}
+                      variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
+                      colorScheme={colorScheme}
+                      withErrorSpotting={errorSpottingEnabled && !message.isOwnMessage}
+                      highlightedWordIndex={messageHighlightIndex}
+                      TTSHighlightRenderer={TTSHighlightRenderer}
+                      t2sState={{
+                        isEnabled: isTextToSpeechEnabled && !message.isOwnMessage,
+                        isActive: isPlayingMessage,
+                        isLoading: isTextToSpeechPending,
+                        status: audioStatus,
+                        disabled: isTextToSpeechPending,
+                      }}
+                    />
+                  </ConditionalWrapper>
+                </React.Fragment>
+              )
+            })}
+
+            {isHelpRequestPending && <MessageLoader colorScheme={colorScheme} />}
+          </View>
+        )}
+
+        {isOpen && !isInputDisabled && (
+          <ChatInput
+            isHintFeedback={isHintFeedback}
+            colorScheme={colorScheme}
+            hasMessages={messages.length > 1}
+          />
+        )}
+      </ScrollView>
     </View>
   )
 }
@@ -214,51 +123,19 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'flex-end',
-    width: 374,
+    width: 378,
     height: '100%',
-    paddingRight: SPACING['100'],
-  },
-  flatList: {
-    alignSelf: 'stretch',
   },
   list: {
-    paddingVertical: 2,
-  },
-  inputRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING['200'],
-  },
-  bottomFade: {
-    width: 370,
-    // backgroundColor: 'red',
-    position: 'absolute',
-    bottom: 62,
-    right: 0,
-    height: 40,
-    backgroundImage:
-      'linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 40%, transparent 100%)',
-  } as any,
-  iconAbsolute: {
-    position: 'absolute',
-    bottom: 70,
-    left: 4,
-  },
-  messageItem: {
-    alignSelf: 'flex-end',
-  },
-  messageWithIcon: {
-    flexDirection: 'row',
     alignItems: 'flex-end',
+    paddingVertical: 2,
+    paddingRight: 6,
   },
-  inlineIcon: {
-    marginRight: 8,
+  messagesWithoutInput: {
+    marginBottom: 8,
   },
-  // loaderWrapper: {
-  //   width: '100%',
-  //   alignItems: 'flex-start',
-  // },
-  separator: {
-    height: SPACING['200'],
+  gap: {
+    flex: 1,
+    gap: 8,
   },
 })

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

@@ -1,65 +1,87 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { ComponentType, PropsWithChildren } from 'react'
 import { Pressable, StyleSheet, View } from 'react-native'
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from '@magmamath/react-native-ui'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonStates,
+  ButtonVariant,
+  COLORS,
+} from '@magmamath/react-native-ui'
+import Animated, { FadeIn } from 'react-native-reanimated'
 import { useUnit } from 'effector-react'
 import { ChatbotModel } from '../../model/ChatBotModel'
 import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
-
-const HELP_BUTTON_TIMEOUT_MS = 5000
+import { CloseIcon } from '../../../../shared/icons/CloseIcon'
 
 type ChatControlsProps = {
   model: ChatbotModel
   onPressChatIcon: () => void
-  onPressHelpButton?: () => void
-  withHelpButton?: boolean
+  onPressClose: () => void
   ButtonWrapper?: ComponentType<PropsWithChildren>
   iconSize?: { width: number; height: number }
+  shouldAnimateCloseButton?: boolean
 }
 
 export const ChatControls = ({
   model,
   onPressChatIcon,
-  onPressHelpButton,
-  withHelpButton = false,
+  onPressClose,
   ButtonWrapper = React.Fragment,
-  iconSize = { width: 70, height: 90 },
+  iconSize = { width: 80, height: 100 },
+  shouldAnimateCloseButton,
 }: 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 null
+    return (
+      <Animated.View
+        style={styles.container}
+        entering={shouldAnimateCloseButton ? FadeIn.duration(900) : undefined}
+      >
+        <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>
+      </Animated.View>
+    )
   }
 
   return (
     <View style={styles.container}>
       <ButtonWrapper>
-        <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>
+        <Pressable onPress={onPressChatIcon}>
+          <ChatbotIcon width={iconSize?.width} height={iconSize?.height} />
+        </Pressable>
       </ButtonWrapper>
     </View>
   )
@@ -71,15 +93,15 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     flexDirection: 'row',
     maxHeight: 100,
-    gap: 2,
-    paddingBottom: 5,
-  },
-  closedWrapper: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
     gap: 8,
+    paddingBottom: 5,
   },
-  helpButtonText: {
-    textTransform: 'uppercase',
+  buttonClose: {
+    width: 50,
+    height: 50,
+    borderRadius: 50,
+    paddingHorizontal: 0,
+    borderWidth: 1.5,
+    borderColor: COLORS.NEUTRAL_5,
   },
 })

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

@@ -1,6 +1,5 @@
 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'
@@ -83,7 +82,6 @@ const styles = StyleSheet.create({
     width: 305,
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: SPACING['200'],
-    marginLeft: 6,
+    marginVertical: 8,
   },
 })

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_5}
+        placeholderTextColor={COLORS.NEUTRAL_6}
         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: 43,
+    height: 44,
     width: 44,
   },
   iconContainer: {

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

@@ -11,7 +11,6 @@ import {
   ArrowUpIcon,
   COLORS,
   FONT_FAMILY,
-  IS_MOBILE,
   SPACING,
 } from '@magmamath/react-native-ui'
 import { ColorScheme } from '@magmamath/students-features'

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

@@ -13,6 +13,7 @@ type ChatMessageProps = {
   t2sState: T2SState
   isTranslated?: boolean
   withErrorSpotting?: boolean
+  withIcon?: boolean
   colorScheme?: ColorScheme
   highlightedWordIndex?: number
   TTSHighlightRenderer?: TTSHighlightRenderer

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

@@ -3,12 +3,12 @@ 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 { T2SState } from '../../types/t2s.types'
 import { ColorScheme } from '../../types/style.types'
 import { MessageVariant } from '../../types/model.types'
+import { MessageTextToSpeech } from './MessageTextToSpeech'
 
 type MessageButtonsBlockProps = {
   t2sState: T2SState

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

@@ -1,30 +1,54 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { BORDER_RADIUS, COLORS, Loader, LoaderColor } from '@magmamath/react-native-ui'
-import { SPACING } from '@magmamath/react-native-ui'
+import { COLORS } from '@magmamath/react-native-ui'
 
-export const MessageLoader = () => (
-  <View style={styles.loader}>
-    <Loader color={LoaderColor.GRAY} />
+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'
+
+type MessageLoaderProps = {
+  colorScheme?: ColorScheme
+}
+
+export const MessageLoader = ({ colorScheme = ColorScheme.Blue }: MessageLoaderProps) => (
+  <View style={styles.container}>
+    <View style={styles.icon}>
+      <LavaIconInGlasses width={60} height={80} />
+    </View>
+    <View style={styles.loader}>
+      <ThreeDotsLoader backgroundColor={CONTROLS_COLORS_MAP[colorScheme].background} />
+    </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: {
-    marginLeft: 68,
-    alignSelf: 'flex-start',
-    marginTop: SPACING['200'],
+    flex: 1,
     flexDirection: 'row',
     alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-    maxWidth: 62,
+    maxWidth: 70,
     padding: 8,
+    paddingTop: 15,
     shadowColor: '#333333',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.25,
     shadowRadius: 3,
     elevation: 3,
-    borderRadius: BORDER_RADIUS['300'],
+    borderRadius: 8,
     borderBottomLeftRadius: 0,
     backgroundColor: COLORS.NEUTRAL_3,
   },