@magmamath/students-features 0.7.1 → 0.8.0-rc.1

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/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/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,

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,7 +17,8 @@ type ChatbotProps = {
     voice: typeof DEFAULT_VOICE
     audioConfig: typeof AUDIO_CONFIG
   }
-  ButtonWrapper: ComponentType<PropsWithChildren>
+  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',
@@ -44,20 +45,24 @@ export const MESSAGE_COLORS_MAP = {
   [ColorScheme.Blue]: {
     [MessageVariant.RECEIVED]: {
       background: COLORS.NEUTRAL_3,
+      border: COLORS.NEUTRAL_3,
       icon: ButtonColor.BLUE,
     },
     [MessageVariant.SENT]: {
       background: COLORS.PRIMARY_BLUE,
+      border: COLORS.PRIMARY_BLUE,
       icon: ButtonColor.BLUE,
     },
   },
   [ColorScheme.Yellow]: {
     [MessageVariant.RECEIVED]: {
       background: COLORS.NEUTRAL_3,
+      border: COLORS.NEUTRAL_3,
       icon: ButtonColor.YELLOW,
     },
     [MessageVariant.SENT]: {
       background: COLORS.PRIMARY_YELLOW,
+      border: COLORS.PRIMARY_YELLOW,
       icon: ButtonColor.YELLOW,
     },
   },
@@ -73,3 +78,5 @@ export const CONTROLS_COLORS_MAP = {
     background: COLORS.PRIMARY_YELLOW,
   },
 }
+
+export const HOVER_ANIMATION_DURATION = 200

package/src/features/chatbot/helpers.ts

@@ -1,5 +1,10 @@
+import { IS_WEB } from '@magmamath/react-native-ui'
 // https://stackoverflow.com/questions/56575859/google-translate-api-does-not-return-apostrophe-as-apostrophe-in-python
 import { KATEX_REPLACEMENTS, KATEX_REPLACEMENTS_REVERSE } from './constants'
+import { GetAlternativesResponse, PostMessagePayload } from './types/api.types'
+import { t } from '../../shared/translation'
+import { ThreadItem } from './model/ThreadItem'
+import { ChatRequestPayload, ChatRequestType } from './types/model.types'
 
 export const decodeHTMLEntities = (input: string) => {
   return input.replace(/'/g, "'")
@@ -10,10 +15,75 @@ export const replaceKatexSyntax = (texts: string[], reverse = false) => {
     ? Object.entries(KATEX_REPLACEMENTS_REVERSE)
     : Object.entries(KATEX_REPLACEMENTS)
 
-  return texts.map(text =>
+  return texts.map((text) =>
     replacements.reduce(
       (newText, [pattern, placeholder]) => newText.replace(new RegExp(pattern, 'g'), placeholder),
       text,
     ),
   )
 }
+
+export const transformAlternatives = (payload: GetAlternativesResponse | null) => {
+  if (!payload) return payload
+
+  return {
+    ...payload,
+    options: {
+      ...payload.options,
+      hints: [
+        {
+          text: payload.isOpenChatEnabled && IS_WEB ? t('chat.giveHint') : t('chat.anotherHint'),
+          promptKey: payload.options.hints[0].promptKey,
+          translatedText: payload.options.hints[0].translatedText,
+        },
+      ],
+    },
+  } as GetAlternativesResponse
+}
+
+export function prepareChatRequestPayload(
+  payload: PostMessagePayload,
+  threadItem: ThreadItem,
+): ChatRequestPayload {
+  const {
+    conversationId,
+    freeTextMessage,
+    problemDescription,
+    problemAnswer,
+    language,
+    imageCdnId,
+    imageAltText,
+    answerOptions,
+    answer,
+  } = payload
+
+  if (freeTextMessage) {
+    return conversationId
+      ? { type: ChatRequestType.Freetext, data: { conversationId, message: freeTextMessage } }
+      : {
+          type: ChatRequestType.Freetext,
+          data: {
+            message: freeTextMessage,
+            correctAnswer: problemAnswer,
+            problemDescription,
+            language,
+            ...(imageCdnId && { imageCdnId }),
+            ...(imageAltText && { altText: imageAltText }),
+            ...(!!answerOptions?.length && { answerOptions }),
+          },
+        }
+  }
+
+  return {
+    type: ChatRequestType.Hint,
+    data: {
+      ...threadItem.getNextHintProps(),
+      correctAnswer: problemAnswer,
+      problemDescription,
+      userAnswer: answer,
+      language,
+      ...(imageCdnId && { imageCdnId }),
+      ...(imageAltText && { altText: imageAltText }),
+    },
+  }
+}

package/src/features/chatbot/index.ts

@@ -9,5 +9,6 @@ export {
 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'