@magmamath/students-features 0.7.0 → 0.8.0-rc.0

package/src/features/chatbot/components/{ChatMessages/ChatbotMessages.tsx → Chat/Chat.tsx}

@@ -5,29 +5,29 @@ 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 { ChatInput } from '../ChatInput/ChatInput'
 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
 const BOTTOM_OFFSET = Platform.select({
   web: 265,
   default: 294,
 })
 
-export const ChatbotMessages = ({
+type ChatProps = {
+  model: ChatbotModel
+  isHintFeedback: boolean
+  isTextToSpeechEnabled: boolean
+  colorScheme?: ColorScheme
+}
+
+export const Chat = ({
   model,
   isHintFeedback,
   isTextToSpeechEnabled,
   colorScheme = ColorScheme.Blue,
-}: ChatbotMessagesProps) => {
+}: ChatProps) => {
   const dimensions = useWindowDimensions()
   const ref = useRef<ScrollView>(null)
   const isOpen = useUnit(model.$isOpen)
@@ -45,10 +45,6 @@ export const ChatbotMessages = ({
 
   const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
 
-  const askChatForHelp = (message: string, translatedMessage?: string) => {
-    void model.sendHelpRequestFx({ message, translatedMessage })
-  }
-
   return (
     <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
       <ScrollView
@@ -88,12 +84,11 @@ export const ChatbotMessages = ({
           </View>
         )}
 
-        {!isHelpRequestPending && isOpen && (
-          <Alternatives
-            onPressAlternative={askChatForHelp}
-            hasMessages={messages.length > 1}
+        {isOpen && (
+          <ChatInput
             isHintFeedback={isHintFeedback}
             colorScheme={colorScheme}
+            hasMessages={messages.length > 1}
           />
         )}
       </ScrollView>

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

@@ -18,7 +18,7 @@ type ChatControlsProps = {
   model: ChatbotModel
   onPressChatIcon: () => void
   onPressClose: () => void
-  ButtonWrapper: ComponentType<PropsWithChildren>
+  ButtonWrapper?: ComponentType<PropsWithChildren>
   iconSize?: { width: number; height: number }
 }
 
@@ -26,7 +26,7 @@ export const ChatControls = ({
   model,
   onPressChatIcon,
   onPressClose,
-  ButtonWrapper,
+  ButtonWrapper = React.Fragment,
   iconSize = { width: 80, height: 100 },
 }: ChatControlsProps) => {
   const isOpen = useUnit(model.$isOpen)

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

@@ -0,0 +1,88 @@
+import React, { useCallback, useMemo } from 'react'
+import { IS_WEB } from '@magmamath/react-native-ui'
+import { StyleSheet, View } from 'react-native'
+import { useStoreMap, useUnit } from 'effector-react'
+import { useChatModel } from '../../context/ChatBotModelContext'
+import { ColorScheme } from '../../types/style.types'
+import { HintButtonVariant, RequestHintButton } from './RequestHintButton'
+import { FreeTextInputBlock } from './freeText/FreeTextInputBlock'
+
+export type ChatInputProps = {
+  hasMessages: boolean
+  isHintFeedback: boolean
+  colorScheme?: ColorScheme
+}
+
+export const ChatInput = ({
+  isHintFeedback,
+  hasMessages,
+  colorScheme = ColorScheme.Blue,
+}: ChatInputProps) => {
+  const model = useChatModel()
+  const alternatives = useUnit(model.$alternatives)
+  const isTranslated = useUnit(model.translation.$isTranslated)
+  const isTranslationPending = useUnit(model.translation.translateAllMessagesFx.pending)
+  const isHelpRequestPending = useUnit(model.sendHelpRequestFx.pending)
+
+  const lastMessageOptions = useStoreMap(model.$currentChatData, ({ messages }) => {
+    const lastMessage = messages.at(-1)
+    return lastMessage?.options ?? []
+  })
+
+  const option = useMemo(() => {
+    if (hasMessages && lastMessageOptions.length) return lastMessageOptions[0]
+
+    const shouldShowNextHintOption =
+      (isHintFeedback && !!alternatives?.options.hints) || hasMessages || isHelpRequestPending
+
+    return shouldShowNextHintOption
+      ? alternatives?.options.hints[0]
+      : alternatives?.options.default[0]
+  }, [hasMessages, isHintFeedback, isHelpRequestPending, lastMessageOptions, alternatives?.options])
+
+  const optionLabel =
+    (isTranslated && !isTranslationPending ? option?.translatedText : option?.text) ?? ''
+
+  if (!option) return null
+
+  const sendMessage = useCallback(() => {
+    void model.sendHelpRequestFx({
+      message: option.text,
+      translatedMessage: option.translatedText,
+    })
+  }, [option.text, option.translatedText])
+
+  const shouldDisableInput =
+    isHelpRequestPending || (hasMessages && lastMessageOptions.length === 0)
+
+  return (
+    <View style={styles.container}>
+      {IS_WEB && alternatives?.isOpenChatEnabled ? (
+        <FreeTextInputBlock
+          optionLabel={optionLabel}
+          onOptionPress={sendMessage}
+          disabled={shouldDisableInput}
+          colorScheme={colorScheme}
+        />
+      ) : (
+        <RequestHintButton
+          onPress={sendMessage}
+          label={optionLabel}
+          disabled={shouldDisableInput}
+          colorScheme={colorScheme}
+          variant={HintButtonVariant.Default}
+        />
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: 305,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 8,
+  },
+})

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

@@ -0,0 +1,156 @@
+import { Pressable, StyleSheet } from 'react-native'
+import React, { memo } from 'react'
+import Animated, {
+  useSharedValue,
+  withTiming,
+  useAnimatedStyle,
+  interpolateColor,
+} from 'react-native-reanimated'
+import {
+  ArrowRightIcon,
+  ArrowUpIcon,
+  COLORS,
+  FONT_FAMILY,
+  IS_MOBILE,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { ColorScheme } from '@magmamath/students-features'
+import { MESSAGE_COLORS_MAP } from '../../constants'
+
+export enum HintButtonVariant {
+  Default = 'default',
+  Short = 'short',
+}
+
+const HOVER_ANIMATION_DURATION = 200
+
+const REQUEST_HINT_BUTTON = {
+  [HintButtonVariant.Default]: {
+    width: 305,
+    fontSize: 20,
+  },
+  [HintButtonVariant.Short]: { width: 163, fontSize: 18 },
+}
+
+type RequestHintButtonProps = {
+  onPress: () => void
+  label: string
+  disabled: boolean
+  colorScheme?: ColorScheme
+  variant: HintButtonVariant
+}
+
+export const RequestHintButton = memo(
+  ({
+    onPress,
+    label,
+    disabled = false,
+    colorScheme = ColorScheme.Blue,
+    variant = HintButtonVariant.Default,
+  }: RequestHintButtonProps) => {
+    const hoverSv = useSharedValue(0)
+
+    const onHoverIn = () => {
+      if (!disabled) hoverSv.value = withTiming(1, { duration: HOVER_ANIMATION_DURATION })
+    }
+    const onHoverOut = () => {
+      if (!disabled) hoverSv.value = withTiming(0, { duration: HOVER_ANIMATION_DURATION })
+    }
+
+    const animatedTextContainerStyle = useAnimatedStyle(() => {
+      if (disabled) {
+        return {
+          backgroundColor: COLORS.NEUTRAL_2,
+          borderColor: COLORS.NEUTRAL_5,
+        }
+      }
+
+      const defaultBorderColor =
+        variant === HintButtonVariant.Default
+          ? COLORS.NEUTRAL_1
+          : MESSAGE_COLORS_MAP[colorScheme].sent.border
+
+      return {
+        backgroundColor: interpolateColor(
+          hoverSv.value,
+          [0, 1],
+          [COLORS.NEUTRAL_1, MESSAGE_COLORS_MAP[colorScheme].sent.background],
+        ),
+        borderColor: interpolateColor(
+          hoverSv.value,
+          [0, 1],
+          [defaultBorderColor, MESSAGE_COLORS_MAP[colorScheme].sent.border],
+        ),
+      }
+    }, [hoverSv, disabled, colorScheme])
+
+    const animatedTextStyle = useAnimatedStyle(() => {
+      if (disabled) return { color: COLORS.NEUTRAL_5 }
+
+      return {
+        color: interpolateColor(hoverSv.value, [0, 1], [COLORS.NEUTRAL_10, COLORS.NEUTRAL_1]),
+      }
+    }, [hoverSv, disabled])
+
+    const iconColor = disabled ? COLORS.NEUTRAL_5 : 'currentColor'
+    const { width, fontSize } = REQUEST_HINT_BUTTON[variant]
+
+    return (
+      <Pressable
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
+        onPress={onPress}
+        style={[styles.button, { cursor: disabled ? 'auto' : 'pointer', width }]}
+        disabled={disabled}
+        accessibilityState={{ disabled }}
+        accessibilityRole="button"
+      >
+        <Animated.View style={[styles.content, animatedTextContainerStyle]}>
+          <Animated.Text numberOfLines={1} style={[styles.text, animatedTextStyle, { fontSize }]}>
+            {label}
+          </Animated.Text>
+
+          <Animated.Text style={[styles.iconWrapper, animatedTextStyle]}>
+            {variant === HintButtonVariant.Default ? (
+              <ArrowRightIcon color={iconColor} size={16} />
+            ) : (
+              <ArrowUpIcon color={iconColor} size={16} />
+            )}
+          </Animated.Text>
+        </Animated.View>
+      </Pressable>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  text: {
+    fontWeight: '400',
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.NEUTRAL_10,
+  },
+  content: {
+    height: 44,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: SPACING[400],
+    borderWidth: 1,
+    borderRadius: 48,
+    elevation: 3,
+    shadowColor: '#333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    backgroundColor: COLORS.PRIMARY_BLUE,
+    borderColor: COLORS.PRIMARY_BLUE,
+  },
+  iconWrapper: {
+    top: IS_MOBILE ? 3 : 0,
+  },
+})

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

@@ -0,0 +1,156 @@
+import React, { useRef, useState } from 'react'
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
+import {
+  NativeSyntheticEvent,
+  Platform,
+  StyleSheet,
+  TextInput,
+  TextInputFocusEventData,
+} from 'react-native'
+import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { ColorScheme } from '@magmamath/students-features'
+import { useKeyBoard } from '../../../../../shared/hooks/useKeyboard'
+import { KeyboardKeys } from '../../../../../lib/constants'
+
+import { SendMessageButton } from './SendMessageButton'
+
+const MAX_AVAILABLE_MESSAGE_LENGTH = 500
+const COMPACT_WIDTH = 134
+const FULL_WIDTH = 305
+const ANIMATION_DURATION = 200
+
+type ChatTextInputProps = {
+  value: string
+  onSubmit: () => void
+  submitDisabled?: boolean
+  onChangeText?: (text: string) => void
+  onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void
+  onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void
+  placeholder?: string
+  colorScheme?: ColorScheme
+}
+
+export const ChatTextInput = ({
+  value,
+  submitDisabled,
+  onSubmit,
+  onChangeText,
+  onBlur,
+  onFocus,
+  colorScheme = ColorScheme.Blue,
+  placeholder,
+}: ChatTextInputProps) => {
+  const inputRef  = useRef<TextInput>(null)
+  const [isFocused, setIsFocused] = useState(false)
+  const widthSv = useSharedValue(value ? FULL_WIDTH : COMPACT_WIDTH )
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      width: widthSv.value,
+    }),
+    [widthSv],
+  )
+
+  const handleInputChange = (text: string) => {
+    if (text.length > MAX_AVAILABLE_MESSAGE_LENGTH) return
+
+    onChangeText?.(text)
+
+    const hasText = text.trim().length > 0
+    const isExpanded = widthSv.value > COMPACT_WIDTH
+    const shouldCollapseInput = !hasText && isExpanded
+    const shouldExpandInput = hasText && !isExpanded
+
+    if (shouldExpandInput) {
+      widthSv.value = withTiming(FULL_WIDTH, { duration: ANIMATION_DURATION })
+    } else if (shouldCollapseInput) {
+      widthSv.value = withTiming(COMPACT_WIDTH, { duration: ANIMATION_DURATION })
+    }
+  }
+
+  const handleSendMessage = () => {
+    if (submitDisabled || value.trim().length < 1 || value.length > MAX_AVAILABLE_MESSAGE_LENGTH)
+      return
+
+    onSubmit?.()
+    handleInputChange('')
+    inputRef.current?.focus()
+  }
+
+  const handleOnFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setIsFocused(true)
+    onFocus?.(e)
+  }
+
+  const handleOnBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setIsFocused(false)
+    onBlur?.(e)
+  }
+
+  useKeyBoard((event) => {
+    if (event.key === KeyboardKeys.ENTER) {
+      void handleSendMessage()
+    }
+  }, isFocused)
+
+  return (
+    <Animated.View style={[styles.inputWrapper, animatedStyle]}>
+      <TextInput
+        ref={inputRef}
+        value={value}
+        onChangeText={handleInputChange}
+        onBlur={handleOnBlur}
+        onFocus={handleOnFocus}
+        placeholder={placeholder}
+        placeholderTextColor={COLORS.NEUTRAL_6}
+        style={styles.input}
+      />
+      <SendMessageButton
+        onPress={handleSendMessage}
+        disabled={!!submitDisabled}
+        colorScheme={colorScheme}
+      />
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+    alignItems: 'flex-end',
+    height: 52,
+    justifyContent: 'center',
+  },
+  inputWrapper: {
+    position: 'absolute',
+    zIndex: 1,
+    left: 0,
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+    borderRadius: 200,
+    backgroundColor: COLORS.NEUTRAL_1,
+    paddingHorizontal: SPACING[100],
+    paddingVertical: SPACING[100],
+    elevation: 3,
+    shadowColor: '#333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    minWidth: 60,
+    minHeight: 22,
+    fontWeight: '400',
+    fontFamily: FONT_FAMILY.buenosAires,
+    paddingHorizontal: SPACING[200],
+    paddingVertical: SPACING[200],
+    ...(Platform.OS === 'web' && { outlineStyle: 'none' }),
+  },
+  arrowWrapper: {
+    marginLeft: SPACING[200],
+  },
+})

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

@@ -0,0 +1,71 @@
+import React from 'react'
+import { useUnit } from 'effector-react'
+import { StyleSheet, View } from 'react-native'
+import { ColorScheme } from '../../../types/style.types'
+import { HintButtonVariant, RequestHintButton } from '../RequestHintButton'
+import { useChatModel } from '../../../context/ChatBotModelContext'
+import { t } from '../../../../../shared/translation'
+import { ChatTextInput } from './ChatTextInput'
+
+type FreeTextInputBlockProps = {
+  optionLabel: string
+  disabled: boolean
+  onOptionPress: () => void
+  colorScheme?: ColorScheme
+}
+
+export const FreeTextInputBlock = ({
+  optionLabel,
+  onOptionPress,
+  disabled,
+  colorScheme,
+}: FreeTextInputBlockProps) => {
+  const model = useChatModel()
+  const inputValue = useUnit(model.textInput.$value)
+
+  const handleOnSubmit = async () => {
+    const translatedMessage = await model.translation.translateSingleMessageFx(inputValue)
+
+    void model.textInput.setValue('')
+    void model.sendHelpRequestFx({
+      message: inputValue,
+      translatedMessage,
+      isFreeText: true,
+    })
+  }
+  const handleOnBlur = () => model.textInput.setIsFocused(false)
+  const handleOnFocus = () => model.textInput.setIsFocused(true)
+  const handleOnChangeText = (text: string) => model.textInput.setValue(text)
+
+  return (
+    <View style={styles.container}>
+      <ChatTextInput
+        value={inputValue}
+        onSubmit={handleOnSubmit}
+        onChangeText={handleOnChangeText}
+        onBlur={handleOnBlur}
+        onFocus={handleOnFocus}
+        submitDisabled={disabled || inputValue.trim().length < 1}
+        colorScheme={colorScheme}
+        placeholder={t('chat.inputPlaceholder')}
+      />
+      <RequestHintButton
+        onPress={onOptionPress}
+        label={optionLabel}
+        disabled={disabled}
+        colorScheme={colorScheme}
+        variant={HintButtonVariant.Short}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+    alignItems: 'flex-end',
+    height: 52,
+    justifyContent: 'center',
+  },
+})

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

@@ -0,0 +1,111 @@
+import React from 'react'
+import { Pressable, StyleSheet } from 'react-native'
+import Animated, {
+  useSharedValue,
+  withTiming,
+  useAnimatedStyle,
+  interpolateColor,
+} from 'react-native-reanimated'
+import { ArrowUpIcon, COLORS, IS_MOBILE } from '@magmamath/react-native-ui'
+import { ColorScheme } from '@magmamath/students-features'
+import { MESSAGE_COLORS_MAP } from '../../../constants'
+
+type SendMessageButtonProps = {
+  onPress: () => void
+  disabled: boolean
+  colorScheme?: ColorScheme
+}
+
+export const SendMessageButton = ({
+  onPress,
+  disabled = false,
+  colorScheme = ColorScheme.Blue,
+}: SendMessageButtonProps) => {
+  const hoverSv = useSharedValue(0)
+
+  const onHoverIn = () => {
+    if (!disabled) hoverSv.value = withTiming(1, { duration: 200 })
+  }
+  const onHoverOut = () => {
+    if (!disabled) hoverSv.value = withTiming(0, { duration: 200 })
+  }
+
+  const animatedIconStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      hoverSv.value,
+      [0, 1],
+      [COLORS.NEUTRAL_1, MESSAGE_COLORS_MAP[colorScheme].sent.border],
+    )
+    const color = interpolateColor(hoverSv.value, [0, 1], [COLORS.NEUTRAL_10, COLORS.NEUTRAL_1])
+
+    return {
+      backgroundColor: disabled ? COLORS.NEUTRAL_2 : backgroundColor,
+      borderColor: disabled ? COLORS.NEUTRAL_5 : MESSAGE_COLORS_MAP[colorScheme].sent.border,
+      color: disabled ? COLORS.NEUTRAL_5 : color,
+    }
+  }, [hoverSv, disabled])
+
+  return (
+    <Pressable
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
+      onPress={onPress}
+      style={[styles.button, disabled && { cursor: 'auto' }]}
+      disabled={disabled}
+      accessibilityState={{ disabled }}
+      accessibilityRole="button"
+    >
+      {IS_MOBILE ? (
+        <Animated.View
+          style={[
+            styles.iconContainer,
+            animatedIconStyle,
+            {
+              borderColor: disabled
+                ? COLORS.NEUTRAL_5
+                : MESSAGE_COLORS_MAP[colorScheme].sent.border,
+            },
+          ]}
+        >
+          <ArrowUpIcon color={'currentColor'} size={16} />
+        </Animated.View>
+      ) : (
+        <Animated.Text style={[styles.webIconContainer, animatedIconStyle]}>
+          <ArrowUpIcon color={'currentColor'} size={16} />
+        </Animated.Text>
+      )}
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    height: 44,
+    width: 44,
+  },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 21,
+    borderWidth: 1,
+  },
+  webIconContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 13,
+    paddingVertical: 12,
+    borderWidth: 1,
+    borderRadius: 48,
+    elevation: 3,
+    shadowColor: '#333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderColor: COLORS.PRIMARY_BLUE,
+  },
+})

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

@@ -6,6 +6,7 @@ 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
@@ -14,7 +15,7 @@ type MessageLoaderProps = {
 export const MessageLoader = ({ colorScheme = ColorScheme.Blue }: MessageLoaderProps) => (
   <View style={styles.container}>
     <View style={styles.icon}>
-      <ChatbotIcon width={60} height={80} />
+      <LavaIconInGlasses width={60} height={80} />
     </View>
     <View style={styles.loader}>
       <ThreeDotsLoader backgroundColor={CONTROLS_COLORS_MAP[colorScheme].background} />
@@ -27,10 +28,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     width: 327,
     alignItems: 'flex-end',
+    paddingLeft:70
   },
   icon: {
+    position: 'absolute',
+    zIndex:1,
     alignSelf: 'flex-end',
-    marginRight: 8,
+    left: 0
   },
   loader: {
     flex: 1,