@magmamath/students-features 0.6.13 → 0.6.14-rc.1

package/src/features/chatbot/components/Alternatives/HelpRequestOption.tsx

@@ -1,58 +1,182 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { Animated, Pressable, StyleSheet } from 'react-native'
-import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
-import { ArrowRightIcon } from '../../../../shared/icons/ArrowRightIcon'
+// import React, { useEffect, useRef, useState } from 'react'
+// import { Animated, Pressable, StyleSheet } from 'react-native'
+// import { ArrowUpIcon, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+//
+// type HelpRequestOptionProps = {
+//   onPress: () => void
+//   message: string
+//   disabled: boolean
+//   hoverColor?: string
+// }
+//
+// export const HelpRequestOption = ({
+//   onPress,
+//   message,
+//   disabled = false,
+//   hoverColor = COLORS.PRIMARY_BLUE,
+// }: HelpRequestOptionProps) => {
+//   const [isHovered, setIsHovered] = useState(false)
+//   const hoverAnim = useRef(new Animated.Value(0)).current
+//
+//   const backgroundColor = hoverAnim.interpolate({
+//     inputRange: [0, 1],
+//     outputRange: [COLORS.NEUTRAL_1, hoverColor],
+//   })
+//   const textColor = hoverAnim.interpolate({
+//     inputRange: [0, 1],
+//     outputRange: [COLORS.NEUTRAL_10, COLORS.NEUTRAL_1],
+//   })
+//
+//   useEffect(() => {
+//     Animated.timing(hoverAnim, {
+//       toValue: isHovered ? 1 : 0,
+//       duration: 200,
+//       useNativeDriver: false,
+//     }).start()
+//   }, [isHovered, hoverAnim])
+//
+//   return (
+//     <Pressable
+//       onHoverIn={() => setIsHovered(true)}
+//       onHoverOut={() => setIsHovered(false)}
+//       onPress={onPress}
+//       style={styles.button}
+//       disabled={disabled}
+//       accessibilityState={{ disabled }}
+//       accessibilityRole="button"
+//     >
+//       <Animated.View
+//         style={[styles.textWrapper, { backgroundColor, borderColor: isHovered ? backgroundColor: COLORS.PRIMARY_BLUE }]}
+//       >
+//         <Animated.Text numberOfLines={1} style={[styles.text, { color: textColor }]}>
+//          I need a hint
+//         </Animated.Text>
+//         <ArrowUpIcon color={isHovered ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_10} />
+//       </Animated.View>
+//     </Pressable>
+//   )
+// }
+//
+// const styles = StyleSheet.create({
+//   button: {
+//     flexDirection: 'row',
+//     alignItems: 'flex-end',
+//     justifyContent: 'space-between',
+//     width: '100%',
+//   },
+//   text: {
+//     fontSize: 18,
+//     fontWeight: 400,
+//     fontFamily: FONT_FAMILY.buenosAires,
+//     color: COLORS.NEUTRAL_10,
+//   },
+//   textWrapper: {
+//     flex: 1,
+//     flexDirection: 'row',
+//     alignItems: 'center',
+//     justifyContent: 'space-between',
+//     maxWidth: 163,
+//     paddingHorizontal: SPACING[400],
+//     paddingVertical: SPACING[200],
+//     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,
+//   },
+// })
+
+import React from 'react'
+import { Pressable, StyleSheet } from 'react-native'
+import Animated, {
+  useSharedValue,
+  withTiming,
+  useAnimatedStyle,
+  interpolateColor,
+  SharedValue,
+} from 'react-native-reanimated'
+import { ArrowUpIcon, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { ColorScheme } from '@magmamath/students-features'
+import { MESSAGE_COLORS_MAP } from '../../constants'
 
 type HelpRequestOptionProps = {
   onPress: () => void
   message: string
   disabled: boolean
-  hoverColor?: string
+  colorScheme?: ColorScheme
+  visibleSv?: SharedValue<number>
 }
 
 export const HelpRequestOption = ({
   onPress,
   message,
   disabled = false,
-  hoverColor = COLORS.PRIMARY_BLUE,
+  colorScheme = ColorScheme.Blue,
+  visibleSv,
 }: HelpRequestOptionProps) => {
-  const [isHovered, setIsHovered] = useState(false)
-  const hoverAnim = useRef(new Animated.Value(0)).current
+  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 animatedWrapperStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      hoverSv.value,
+      [0, 1],
+      [COLORS.NEUTRAL_1, MESSAGE_COLORS_MAP[colorScheme].sent.background],
+    )
+    const borderColor = interpolateColor(
+      hoverSv.value,
+      [0, 1],
+      [
+        MESSAGE_COLORS_MAP[colorScheme].sent.border,
+        MESSAGE_COLORS_MAP[colorScheme].sent.border,
+      ],
+    )
+
+    return {
+      backgroundColor: disabled ? COLORS.NEUTRAL_2 : backgroundColor,
+      borderColor: disabled ? COLORS.NEUTRAL_5 : borderColor,
+    }
+  }, [hoverSv, disabled, colorScheme])
 
-  const backgroundColor = hoverAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [COLORS.NEUTRAL_1, hoverColor],
-  })
-  const textColor = hoverAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [COLORS.NEUTRAL_10, COLORS.NEUTRAL_1],
-  })
+  const animatedTextStyle = useAnimatedStyle(() => {
+    const color = interpolateColor(hoverSv.value, [0, 1], [COLORS.NEUTRAL_10, COLORS.NEUTRAL_1])
+    return { color: disabled ? COLORS.NEUTRAL_5 : color }
+  }, [hoverSv, disabled])
 
-  useEffect(() => {
-    Animated.timing(hoverAnim, {
-      toValue: isHovered ? 1 : 0,
-      duration: 200,
-      useNativeDriver: false,
-    }).start()
-  }, [isHovered, hoverAnim])
+  const animatedVisibilityStyle = useAnimatedStyle(() => {
+    return {
+      opacity: visibleSv ? visibleSv.value : 1,
+    }
+  }, [visibleSv])
 
   return (
     <Pressable
-      onHoverIn={() => setIsHovered(true)}
-      onHoverOut={() => setIsHovered(false)}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
       onPress={onPress}
-      style={styles.button}
+      style={[styles.button, { cursor: disabled ? 'auto' : 'pointer' }]}
       disabled={disabled}
       accessibilityState={{ disabled }}
       accessibilityRole="button"
     >
-      <Animated.View
-        style={[styles.textWrapper, { backgroundColor, borderColor: backgroundColor }]}
-      >
-        <Animated.Text numberOfLines={1} style={[styles.text, { color: textColor }]}>
+      <Animated.View style={[styles.textWrapper, animatedWrapperStyle, animatedVisibilityStyle]}>
+        <Animated.Text numberOfLines={1} style={[styles.text, animatedTextStyle]}>
           {message}
         </Animated.Text>
-        <ArrowRightIcon color={isHovered ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_10} />
+
+        <Animated.Text style={animatedTextStyle}>
+          <ArrowUpIcon color={'currentColor'} size={16} />
+        </Animated.Text>
       </Animated.View>
     </Pressable>
   )
@@ -61,13 +185,11 @@ export const HelpRequestOption = ({
 const styles = StyleSheet.create({
   button: {
     flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
+    justifyContent: 'flex-end',
   },
   text: {
-    fontSize: 20,
-    fontWeight: 400,
+    fontSize: 18,
+    fontWeight: '400',
     fontFamily: FONT_FAMILY.buenosAires,
     color: COLORS.NEUTRAL_10,
   },
@@ -76,7 +198,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    maxWidth: 305,
+    width: 163,
     paddingHorizontal: SPACING[400],
     paddingVertical: SPACING[200],
     borderWidth: 1,
@@ -87,5 +209,6 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3,
     backgroundColor: COLORS.NEUTRAL_1,
+    borderColor: COLORS.PRIMARY_BLUE,
   },
 })

package/src/features/chatbot/components/Alternatives/InputButton.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import { Pressable, StyleSheet } from 'react-native'
+import Animated, {
+  useSharedValue,
+  withTiming,
+  useAnimatedStyle,
+  interpolateColor,
+} from 'react-native-reanimated'
+import { ArrowUpIcon, COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+import { ColorScheme } from '@magmamath/students-features'
+import { MESSAGE_COLORS_MAP } from '../../constants'
+
+type HelpRequestOptionProps = {
+  onPress: () => void
+  disabled: boolean
+  colorScheme?: ColorScheme
+}
+
+export const InputButton = ({
+  onPress,
+  disabled = false,
+  colorScheme = ColorScheme.Blue,
+}: HelpRequestOptionProps) => {
+  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 animatedWrapperStyle = 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"
+    >
+      <Animated.Text style={[styles.textWrapper, animatedWrapperStyle]}>
+        <ArrowUpIcon color={'currentColor'} size={16} />
+      </Animated.Text>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: '400',
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.NEUTRAL_10,
+    backgroundColor: 'purple',
+  },
+  textWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    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/Alternatives/InputWithHintRow.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react'
+import { Platform, StyleSheet, TextInput, View } from 'react-native'
+import Animated, {
+  useSharedValue,
+  withTiming,
+  useAnimatedStyle,
+  useAnimatedReaction,
+} from 'react-native-reanimated'
+import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { HelpRequestOption } from './HelpRequestOption'
+import { InputButton } from './InputButton'
+import { ColorScheme } from '@magmamath/students-features'
+
+const COMPACT_WIDTH = 134
+
+type InputWithHintRowProps = {
+  onPress: () => void
+  message: string
+  disabled: boolean
+  colorScheme?: ColorScheme
+}
+
+export const InputWithHintRow = ({
+  onPress,
+  message,
+  disabled,
+  colorScheme,
+}: InputWithHintRowProps) => {
+  const [value, setValue] = useState('')
+
+  const widthSv = useSharedValue(COMPACT_WIDTH)
+  const arrowOpacitySv = useSharedValue(1)
+  const hintVisibleSv = useSharedValue(1)
+  const valueLengthSv = useSharedValue(0)
+
+  const shouldDisable = value.trim().length > 0
+
+  const animatedInputStyle = useAnimatedStyle(
+    () => ({
+      width: widthSv.value,
+    }),
+    [widthSv],
+  )
+
+  const handleChangeText = (text: string) => {
+    setValue(text)
+    valueLengthSv.value = text.trim().length
+  }
+
+  useAnimatedReaction(
+    () => valueLengthSv.value,
+    (currentLength) => {
+      if (currentLength > 0) {
+        widthSv.value = withTiming(305, { duration: 200 })
+        arrowOpacitySv.value = withTiming(0, { duration: 200 })
+        hintVisibleSv.value = withTiming(0, { duration: 200 })
+      } else {
+        widthSv.value = withTiming(COMPACT_WIDTH, { duration: 200 })
+        arrowOpacitySv.value = withTiming(1, { duration: 200 })
+        hintVisibleSv.value = withTiming(1, { duration: 200 })
+      }
+    },
+    [valueLengthSv],
+  )
+
+  // const handleFocus = () => {
+  //   widthSv.value = withTiming(305, { duration: 200 }) // expand full width (container limits it)
+  //   arrowOpacitySv.value = withTiming(0, { duration: 200 })
+  //   hintVisibleSv.value = withTiming(0, { duration: 200 })
+  //
+  //   // setIsFocused(true)
+  // }
+  //
+  // const handleBlur = () => {
+  //   if (value.trim().length > 0) return
+  //   widthSv.value = withTiming(COMPACT_WIDTH, { duration: 200 })
+  //   arrowOpacitySv.value = withTiming(1, { duration: 200 })
+  //   hintVisibleSv.value = withTiming(1, { duration: 200 })
+  //   // setIsFocused(false)
+  // }
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={[styles.inputWrapper, animatedInputStyle]}>
+        <TextInput
+          style={styles.input}
+          placeholder="Type..."
+          placeholderTextColor={COLORS.NEUTRAL_6}
+          value={value}
+          onChangeText={handleChangeText}
+          // onFocus={handleFocus}
+          // onBlur={handleBlur}
+        />
+        <Animated.View style={[styles.arrowWrapper]}>
+          <InputButton
+            onPress={() => {
+              console.log('Pressed')
+            }}
+            disabled={value.trim().length < 1 || disabled}
+            colorScheme={colorScheme}
+          />
+        </Animated.View>
+      </Animated.View>
+
+      <HelpRequestOption
+        visibleSv={hintVisibleSv}
+        disabled={disabled || shouldDisable}
+        onPress={onPress}
+        message={message}
+        colorScheme={colorScheme}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+    alignItems: 'flex-end',
+    height: 52,
+    justifyContent: 'center',
+  },
+  inputWrapper: {
+    position: 'absolute',
+    zIndex: 1,
+    right: SPACING[200],
+    left: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+    borderRadius: 200,
+    backgroundColor: COLORS.NEUTRAL_1,
+    paddingHorizontal: SPACING[100],
+    paddingVertical: SPACING[100],
+    overflow: 'hidden',
+    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,
+    ...(Platform.OS === 'web' && { outlineStyle: 'none' }),
+    paddingHorizontal: SPACING[100],
+    paddingVertical: SPACING[200],
+  },
+  arrowWrapper: {
+    marginLeft: SPACING[200],
+  },
+})

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/ChatMessages/ChatbotMessages.tsx

@@ -88,7 +88,7 @@ export const ChatbotMessages = ({
           </View>
         )}
 
-        {!isHelpRequestPending && isOpen && (
+        {isOpen && (
           <Alternatives
             onPressAlternative={askChatForHelp}
             hasMessages={messages.length > 1}

package/src/features/chatbot/constants.ts

@@ -44,20 +44,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,
     },
   },

package/src/features/chatbot/types/api.types.ts

@@ -5,12 +5,14 @@ export type GetAlternativesPayload = {
   assignmentClassGrade: number
 } | null
 
+export type AlternativesOptions = {
+  default: ChatAnswer[]
+  hints: ChatAnswer[]
+}
+
 export type GetAlternativesResponse = {
   chatAccess?: boolean
-  options: {
-    default: ChatAnswer[]
-    hints: ChatAnswer[]
-  }
+  options: AlternativesOptions
 }
 
 export type PostMessagePayload = {

package/src/features/problemSelector/components/ProblemSelectorButton.tsx

@@ -38,7 +38,7 @@ export const ProblemSelectorButton = ({
         disabled={locked}
         icon={
           locked ? (
-            <LockIcon color={customColorScheme[ButtonStates.DISABLED]?.color} size="large" />
+            <LockIcon color={customColorScheme[ButtonStates.DISABLED]?.color} size={25} />
           ) : (
             <Typography
               variant="h3"

package/src/shared/translation/localization/ca.json

@@ -13,7 +13,7 @@
   "time.yearsAgo": "years ago",
   "chat": {
     "anotherHint": "Give me another hint",
-    "giveHint": "Give me a hint",
+    "giveHint": "I need a hint",
     "answerAgain": "Answer again to get another hint!",
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",

package/src/shared/translation/localization/en.json

@@ -12,8 +12,8 @@
   "time.yearAgo": "year ago",
   "time.yearsAgo": "years ago",
   "chat": {
-    "anotherHint": "Give me another hint",
-    "giveHint": "Give me a hint",
+    "anotherHint": "I need a hint",
+    "giveHint": "I need a hint",
     "answerAgain": "Answer again to get another hint!",
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",

package/src/shared/translation/localization/gb.json

@@ -13,7 +13,7 @@
   "time.yearsAgo": "years ago",
   "chat": {
     "anotherHint": "Give me another hint",
-    "giveHint": "Give me a hint",
+    "giveHint": "I need a hint",
     "answerAgain": "Answer again to get another hint!",
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",

package/src/shared/translation/localization/sct.json

@@ -13,7 +13,7 @@
   "time.yearsAgo": "years ago",
   "chat": {
     "anotherHint": "Give me another hint",
-    "giveHint": "Give me a hint",
+    "giveHint": "I need a hint",
     "answerAgain": "Answer again to get another hint!",
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",

package/src/shared/translation/localization/sw.json

@@ -13,7 +13,7 @@
   "time.yearsAgo": "år sedan",
   "chat": {
     "anotherHint": "Ge mig en ledtråd",
-    "giveHint": "Ge mig en ledtråd",
+    "giveHint": "Ge ledtråd",
     "answerAgain": "Svara igen för att få en till ledtråd!",
     "errorMessage": "Något gick snett! Försök igen",
     "howCanIHelp": "Hej! Hur kan jag hjälpa dig?",