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

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

@@ -1,98 +1,22 @@
-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 { 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, default: 294 })
-
-const TOP_FADE_MASK = Platform.select({
-  web: { maskImage: 'linear-gradient(to top, transparent, black 10%, black)' } as any,
-  default: undefined,
+const BOTTOM_OFFSET = Platform.select({
+  web: 265,
+  default: 294,
 })
 
-const Separator = () => <View style={styles.separator} />
-
-const BottomFade = ({ visible }: { visible: boolean }) => (
-  <View
-    style={[styles.bottomFade, { opacity: visible ? 1 : 0 }]}
-    pointerEvents="none"
-  />
-)
-
-type ChatIconProps = {
-  isLoading: boolean
-}
-
-const ChatIcon = ({ isLoading }: ChatIconProps) => (
-  <View style={styles.iconAbsolute}>
-    {isLoading ? (
-      <LavaIconInGlasses width={53} height={73} />
-    ) : (
-      <ChatbotIcon width={53} height={73} color={'blue'} />
-    )}
-  </View>
-)
-
-type ChatFooterProps = {
-  isHintFeedback: boolean
-  isInputDisabled?: boolean
-  colorScheme: ColorScheme
-  hasMessages: boolean
-  onPressClose?: () => void
-}
-
-const ChatFooter = ({
-  isHintFeedback,
-  isInputDisabled,
-  colorScheme,
-  hasMessages,
-  onPressClose,
-}: ChatFooterProps) => (
-  <View style={styles.inputRow}>
-    <CloseButton onPress={onPressClose} />
-    {!isInputDisabled && (
-      <ChatInput
-        isHintFeedback={isHintFeedback}
-        colorScheme={colorScheme}
-        hasMessages={hasMessages}
-      />
-    )}
-  </View>
-)
-
 type ChatProps = {
   model: ChatbotModel
   isHintFeedback: boolean
@@ -101,7 +25,6 @@ type ChatProps = {
   colorScheme?: ColorScheme
   MessageWrapper?: ComponentType<PropsWithChildren>
   TTSHighlightRenderer?: TTSHighlightRenderer
-  onPressClose?: () => void
 }
 
 export const Chat = ({
@@ -112,11 +35,9 @@ export const Chat = ({
   colorScheme = ColorScheme.Blue,
   MessageWrapper,
   TTSHighlightRenderer,
-  onPressClose,
 }: ChatProps) => {
-  const ref = useRef<FlatList>(null)
-  const maxHeightRef = useRef(0)
   const dimensions = useWindowDimensions()
+  const ref = useRef<ScrollView>(null)
   const isOpen = useUnit(model.$isOpen)
 
   const isHelpRequestPending = useUnit(model.sendHelpRequestFx.pending)
@@ -130,230 +51,91 @@ 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 MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
-  maxHeightRef.current = MAX_HEIGHT
-
-  const [isScrollable, setIsScrollable] = useState(false)
-  const [showBottomFade, setShowBottomFade] = useState(false)
-
-  useEffect(() => {
-    if (!isOpen) {
-      setIsScrollable(false)
-      setShowBottomFade(false)
-    }
-  }, [isOpen])
-
-  const handleScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const { contentOffset } = e.nativeEvent
-    setShowBottomFade(contentOffset.y > SCROLL_BOTTOM_THRESHOLD)
-  }, [])
-
-  const handleContentSizeChange = useCallback((_: number, contentHeight: number) => {
-    setIsScrollable(contentHeight >= maxHeightRef.current)
-  }, [])
+  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 showAbsoluteIcon = !showBottomFade && !isInputDisabled
-
-  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 (
-        <MessageItem
-          message={message}
-          showInlineIcon={showInlineIcon}
-          animate={!isInputDisabled}
-          shouldWrapMessage={!!shouldWrapMessage}
-          MessageWrapper={MessageWrapper}
-          isTranslated={isTranslated}
-          colorScheme={colorScheme}
-          withIcon={isInputDisabled}
-          withErrorSpotting={errorSpottingEnabled && !message.isOwnMessage}
-          highlightedWordIndex={messageHighlightIndex}
-          TTSHighlightRenderer={TTSHighlightRenderer}
-          isTextToSpeechEnabled={isTextToSpeechEnabled && !message.isOwnMessage}
-          isPlayingMessage={isPlayingMessage}
-          isTextToSpeechPending={isTextToSpeechPending}
-          audioStatus={audioStatus}
-        />
-      )
-    },
-    [
-      currentPlayingId,
-      highlightedWordIndex,
-      showBottomFade,
-      lastBotMessageId,
-      shouldWrapMessage,
-      isTranslated,
-      colorScheme,
-      errorSpottingEnabled,
-      isTextToSpeechEnabled,
-      isTextToSpeechPending,
-      audioStatus,
-    ],
-  )
-
-  if (!isOpen) return null
 
   return (
     <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
-      <FlatList
+      <ScrollView
         ref={ref}
-        inverted
         bounces={false}
-        style={[styles.flatList, isScrollable && TOP_FADE_MASK]}
-        data={reversedMessages}
-        keyExtractor={keyExtractor}
-        renderItem={renderMessage}
         contentContainerStyle={styles.list}
-        onScroll={handleScroll}
-        scrollEventThrottle={16}
-        onContentSizeChange={handleContentSizeChange}
-        ListHeaderComponent={<MessageLoader isLoading={isHelpRequestPending} />}
-        ItemSeparatorComponent={Separator}
-      />
-
-      <BottomFade visible={showBottomFade} />
-
-      {showAbsoluteIcon && <ChatIcon isLoading={isHelpRequestPending} />}
-
-      <ChatFooter
-        isHintFeedback={isHintFeedback}
-        isInputDisabled={isInputDisabled}
-        colorScheme={colorScheme}
-        hasMessages={messages.length > 1}
-        onPressClose={onPressClose}
-      />
+        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>
   )
 }
 
-const keyExtractor = (item: ConversationMessage, index: number) => `${item.id}-${index}`
-
-type MessageItemProps = {
-  message: ConversationMessage
-  showInlineIcon: boolean
-  animate?: boolean
-  shouldWrapMessage?: boolean
-  MessageWrapper?: ComponentType<PropsWithChildren>
-  isTranslated?: boolean
-  colorScheme: ColorScheme
-  withIcon?: boolean
-  withErrorSpotting?: boolean
-  highlightedWordIndex: number
-  TTSHighlightRenderer?: TTSHighlightRenderer
-  isTextToSpeechEnabled: boolean
-  isPlayingMessage: boolean
-  isTextToSpeechPending: boolean
-  audioStatus: any
-}
-
-const MessageItem = ({
-  message,
-  showInlineIcon,
-  animate,
-  shouldWrapMessage,
-  MessageWrapper,
-  isTranslated,
-  colorScheme,
-  withIcon,
-  withErrorSpotting,
-  highlightedWordIndex,
-  TTSHighlightRenderer,
-  isTextToSpeechEnabled,
-  isPlayingMessage,
-  isTextToSpeechPending,
-  audioStatus,
-}: MessageItemProps) => (
-  <View style={[styles.messageItem, showInlineIcon && styles.messageWithIcon]}>
-    {showInlineIcon && (
-      <View style={styles.inlineIcon}>
-        <ChatbotIcon width={53} height={73} />
-      </View>
-    )}
-    <AnimatedMessage animate={animate}>
-      <ConditionalWrapper withWrapper={shouldWrapMessage} Wrapper={MessageWrapper}>
-        <ChatMessage
-          withIcon={withIcon}
-          isTranslated={isTranslated}
-          message={message}
-          variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
-          colorScheme={colorScheme}
-          withErrorSpotting={withErrorSpotting}
-          highlightedWordIndex={highlightedWordIndex}
-          TTSHighlightRenderer={TTSHighlightRenderer}
-          t2sState={{
-            isEnabled: isTextToSpeechEnabled,
-            isActive: isPlayingMessage,
-            isLoading: isTextToSpeechPending,
-            status: audioStatus,
-            disabled: isTextToSpeechPending,
-          }}
-        />
-      </ConditionalWrapper>
-    </AnimatedMessage>
-  </View>
-)
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'flex-end',
-    width: 374,
+    width: 378,
     height: '100%',
-    paddingRight: SPACING['100'],
-  },
-  flatList: {
-    alignSelf: 'stretch',
-    paddingTop: SPACING['300'],
   },
   list: {
-    paddingVertical: 2,
-  },
-  inputRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING['200'],
-    minHeight: 52,
-  },
-  bottomFade: {
-    position: 'absolute',
-    bottom: 52,
-    right: 0,
-    width: 370,
-    height: 40,
-    transition: 'opacity 0.2s ease-in-out',
-    ...Platform.select({
-      web: {
-        backgroundImage:
-          'linear-gradient(to top, rgba(255,255,255,1) 10%, rgba(255,255,255,0.8) 40%, transparent 100%)',
-      },
-      default: {},
-    }),
-  } as any,
-  iconAbsolute: {
-    position: 'absolute',
-    bottom: 65,
-    left: 4,
-  },
-  messageItem: {
-    alignSelf: 'flex-end',
-  },
-  messageWithIcon: {
-    flexDirection: 'row',
     alignItems: 'flex-end',
+    paddingVertical: 2,
+    paddingRight: 6,
   },
-  inlineIcon: {
-    marginRight: 8,
+  messagesWithoutInput: {
+    marginBottom: 8,
   },
-  separator: {
-    height: SPACING['200'],
+  gap: {
+    flex: 1,
+    gap: 8,
   },
 })

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

@@ -1,67 +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 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 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 }}
-            >
-              {(isTranslated && wantHelp.translatedText) || wantHelp.text}
-            </Button>
-          )}
-        </View>
+        <Pressable onPress={onPressChatIcon}>
+          <ChatbotIcon width={iconSize?.width} height={iconSize?.height} />
+        </Pressable>
       </ButtonWrapper>
     </View>
   )
@@ -73,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,6 +82,6 @@ const styles = StyleSheet.create({
     width: 305,
     alignItems: 'center',
     justifyContent: 'center',
-    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,10 +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/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