@magmamath/students-features 0.6.14-rc.2 → 0.6.14-rc.21

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,153 @@
+import React, { 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 [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('')
+  }
+
+  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
+        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,83 @@
+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'
+import { decodeHTMLEntities } from '../../../helpers'
+
+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 context = useUnit(model.$context)
+
+  const handleOnSubmit = async () => {
+    let translatedMessage = ''
+    if (context?.translationTargetLanguage) {
+      const response = await model.translation.api.translateTextFx({
+        text: [inputValue],
+        targetLanguage: context?.translationTargetLanguage,
+      })
+      translatedMessage =
+        response.data.translations.map(({ translatedText }) =>
+          decodeHTMLEntities(translatedText),
+        )?.[0] ?? ''
+    }
+
+    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/{Alternatives/InputButton.tsx → ChatInput/freeText/SendMessageButton.tsx}

@@ -6,9 +6,9 @@ import Animated, {
   useAnimatedStyle,
   interpolateColor,
 } from 'react-native-reanimated'
-import { ArrowUpIcon, COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+import { ArrowUpIcon, COLORS, IS_MOBILE } from '@magmamath/react-native-ui'
 import { ColorScheme } from '@magmamath/students-features'
-import { MESSAGE_COLORS_MAP } from '../../constants'
+import { MESSAGE_COLORS_MAP } from '../../../constants'
 
 type HelpRequestOptionProps = {
   onPress: () => void
@@ -16,7 +16,7 @@ type HelpRequestOptionProps = {
   colorScheme?: ColorScheme
 }
 
-export const InputButton = ({
+export const SendMessageButton = ({
   onPress,
   disabled = false,
   colorScheme = ColorScheme.Blue,
@@ -30,8 +30,12 @@ export const InputButton = ({
     if (!disabled) hoverSv.value = withTiming(0, { duration: 200 })
   }
 
-  const animatedWrapperStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(hoverSv.value, [0, 1], [COLORS.NEUTRAL_1, MESSAGE_COLORS_MAP[colorScheme].sent.border])
+  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 {
@@ -51,9 +55,25 @@ export const InputButton = ({
       accessibilityState={{ disabled }}
       accessibilityRole="button"
     >
-      <Animated.Text style={[styles.textWrapper, animatedWrapperStyle]}>
-        <ArrowUpIcon color={'currentColor'} size={16} />
-      </Animated.Text>
+      {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>
   )
 }
@@ -62,19 +82,20 @@ const styles = StyleSheet.create({
   button: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
+    height: 44,
+    width: 44,
   },
-  text: {
-    fontSize: 18,
-    fontWeight: '400',
-    fontFamily: FONT_FAMILY.buenosAires,
-    color: COLORS.NEUTRAL_10,
-    backgroundColor: 'purple',
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 21,
+    borderWidth: 1,
   },
-  textWrapper: {
+  webIconContainer: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
     paddingHorizontal: 13,
     paddingVertical: 12,
     borderWidth: 1,

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

@@ -2,11 +2,12 @@ import React, { ComponentType, PropsWithChildren } from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 
 import { ChatbotModel } from '../model/ChatBotModel'
-import { ChatbotMessages } from './ChatMessages/ChatbotMessages'
+import { Chat } from './Chat/Chat'
 import { ChatControls } from './ChatControls/ChatControls'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
 import { ChatBotModelContext } from '../context/ChatBotModelContext'
 import { ColorScheme } from '../types/style.types'
+import { ChatInputMode } from '../types/units.types'
 
 type ChatbotProps = {
   model: ChatbotModel
@@ -16,6 +17,7 @@ type ChatbotProps = {
     voice: typeof DEFAULT_VOICE
     audioConfig: typeof AUDIO_CONFIG
   }
+  inputMode?: ChatInputMode
   ButtonWrapper: ComponentType<PropsWithChildren>
   iconSize?: { width: number; height: number } // TODO: use number instead
   colorScheme?: ColorScheme
@@ -43,7 +45,7 @@ export const Chatbot = ({
 
   return (
     <ChatBotModelContext.Provider value={model}>
-      <ChatbotMessages
+      <Chat
         model={model}
         colorScheme={colorScheme}
         isHintFeedback={isHintFeedback}

package/src/features/chatbot/constants.ts

@@ -2,6 +2,7 @@ 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'
+import { ANIMATION_DURATION } from '../gifCelebrations/constants'
 
 export const AUDIO_CONFIG = {
   audioEncoding: 'LINEAR16',
@@ -77,3 +78,5 @@ export const CONTROLS_COLORS_MAP = {
     background: COLORS.PRIMARY_YELLOW,
   },
 }
+
+export const HOVER_ANIMATION_DURATION = 200

package/src/features/chatbot/index.ts

@@ -9,5 +9,7 @@ export {
 export type { PostMessageResponse } from './types/api.types'
 export { DefaultMessagesCreator } from './model/DefaultMessageCreator'
 export type { ChatAnswer } from './types/units.types'
+export { ChatInputMode } from './types/units.types'
+
 export type { ConversationMessage } from './types/units.types'
 export { ColorScheme } from './types/style.types'