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

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

@@ -1,13 +1,112 @@
-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'
 
 type HelpRequestOptionProps = {
   onPress: () => void
   message: string
   disabled: boolean
   hoverColor?: string
+  visibleSv: SharedValue<number>
 }
 
 export const HelpRequestOption = ({
@@ -15,44 +114,56 @@ export const HelpRequestOption = ({
   message,
   disabled = false,
   hoverColor = COLORS.PRIMARY_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, hoverColor])
+    const borderColor = interpolateColor(hoverSv.value, [0, 1], [COLORS.PRIMARY_BLUE, hoverColor])
 
-  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],
-  })
+    return {
+      backgroundColor,
+      borderColor,
+    }
+  }, [hoverSv])
 
-  useEffect(() => {
-    Animated.timing(hoverAnim, {
-      toValue: isHovered ? 1 : 0,
-      duration: 200,
-      useNativeDriver: false,
-    }).start()
-  }, [isHovered, hoverAnim])
+  const animatedTextStyle = useAnimatedStyle(() => {
+    const color = interpolateColor(hoverSv.value, [0, 1], [COLORS.NEUTRAL_10, COLORS.NEUTRAL_1])
+    return { color }
+  }, [hoverSv])
+
+  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, disabled && { cursor: 'auto' }]}
       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,22 +172,21 @@ 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,
+
   },
   textWrapper: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    maxWidth: 305,
+    minWidth: 163,
     paddingHorizontal: SPACING[400],
     paddingVertical: SPACING[200],
     borderWidth: 1,
@@ -87,5 +197,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,101 @@
+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, SPACING } from '@magmamath/react-native-ui'
+
+type HelpRequestOptionProps = {
+  onPress: () => void
+  disabled: boolean
+  hoverColor?: string
+}
+
+export const InputButton = ({
+  onPress,
+  disabled = false,
+  hoverColor = COLORS.PRIMARY_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, hoverColor])
+  //   const borderColor = interpolateColor(hoverSv.value, [0, 1], [COLORS.PRIMARY_BLUE, hoverColor])
+  //   const color = interpolateColor(hoverSv.value, [0, 1], [COLORS.NEUTRAL_10, COLORS.NEUTRAL_1])
+  //
+  //   return {
+  //     backgroundColor,
+  //     borderColor,
+  //     color
+  //   }
+  // }, [hoverSv])
+
+  const animatedWrapperStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(hoverSv.value, [0, 1], [COLORS.NEUTRAL_1, hoverColor])
+    const borderColor = interpolateColor(hoverSv.value, [0, 1], [COLORS.PRIMARY_BLUE, hoverColor])
+    const color = interpolateColor(hoverSv.value, [0, 1], [COLORS.NEUTRAL_10, COLORS.NEUTRAL_1])
+
+    return {
+      backgroundColor: disabled ? COLORS.NEUTRAL_2 : backgroundColor, // 👈 dimmed when disabled
+      borderColor: disabled ? COLORS.NEUTRAL_5 : borderColor,
+      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,157 @@
+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'
+
+const COMPACT_WIDTH = 134
+
+type InputWithHintRowProps = {
+  onPress: () => void
+  message: string
+  disabled: boolean
+  hoverColor?: string
+}
+
+export const InputWithHintRow = ({
+  onPress,
+  message,
+  disabled,
+  hoverColor,
+}: 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}
+          />
+        </Animated.View>
+      </Animated.View>
+
+      <HelpRequestOption
+        visibleSv={hintVisibleSv}
+        disabled={disabled || shouldDisable}
+        onPress={onPress}
+        message={message}
+        hoverColor={hoverColor}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative', // 👈 allows overlap
+    width: '100%',
+    alignItems: 'flex-end', // keeps hint button aligned right
+    height: 52,
+    justifyContent: 'center',
+  },
+  inputWrapper: {
+    position: 'absolute', // 👈 overlap on top
+    zIndex: 1,
+    right: SPACING[200], // align with hint button
+    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/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?",