@magmamath/students-features 0.6.12 → 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/exampleSolution/ExampleSolutionModal.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { BaseModal, SPACING } from '@magmamath/react-native-ui'
+import { ExampleSolutionModalContent } from './components/ExampleSolutionModalContent'
+import { ExampleSolutionModalParams } from './types'
+
+type ExampleSolutionModalComponentProps = {
+  modal: {
+    closeModal: () => void
+    params: ExampleSolutionModalParams
+  }
+}
+
+export const ExampleSolutionModal = ({
+  modal: { closeModal, params },
+}: ExampleSolutionModalComponentProps) => (
+  <BaseModal
+    style={{
+      container: { paddingHorizontal: SPACING[800] },
+    }}
+    onClose={closeModal}
+    content={
+      <ExampleSolutionModalContent
+        model={params.model}
+        payload={params.payload}
+        cacheKey={params.cacheKey}
+      />
+    }
+  />
+)

package/src/features/exampleSolution/components/ExampleSolutionModalContent.tsx

@@ -0,0 +1,71 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { $localization } from '../../../shared/translation'
+import { MessageBlock } from './MessageBlock'
+import { LavaIcon } from './LavaIcon'
+import { ExampleSolutionModalParams } from '../types'
+import { QuestionSection } from './QuestionSection'
+import { SolutionSection } from './SolutionSection'
+import { useExampleSolution } from '../hooks/useExampleSolution'
+
+export const ExampleSolutionModalContent = ({
+  model,
+  payload,
+  cacheKey,
+}: ExampleSolutionModalParams) => {
+  const { result, status } = useExampleSolution({ model, payload, cacheKey })
+  const localization = useUnit($localization)
+
+  return (
+    <View style={styles.container}>
+      <Typography align="center" variant={HeadingVariants.H2} style={{ color: COLORS.NEUTRAL_9 }}>
+        {localization.exampleSolution.exampleSolution}
+      </Typography>
+      <View style={styles.content}>
+        <QuestionSection status={status} question={result?.question} />
+        <SolutionSection status={status} answer={result?.answer} />
+      </View>
+      <MessageBlock status={status} style={styles.messageBlock} />
+      <LavaIcon status={status} style={styles.lavaIconContainer} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 880,
+    height: 593,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: SPACING[400],
+    gap: SPACING[400],
+  },
+  solutionContainer: {
+    width: 351,
+    overflow: 'hidden',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+  lavaIconContainer: {
+    position: 'absolute',
+    bottom: -54,
+    right: -50,
+  },
+  loaderContainer: {
+    paddingTop: 34,
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  messageBlock: {
+    position: 'absolute',
+    right: 38,
+    bottom: -22,
+  },
+})

package/src/features/exampleSolution/components/LavaIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { ExcitedLavaIcon } from '../../../shared/icons/ExcitedLavaIcon'
+import { LavaIconInGlasses } from '../../../shared/icons'
+import Animated, { FadeIn, useAnimatedStyle, withTiming } from 'react-native-reanimated'
+import { StyleProp, ViewStyle } from 'react-native'
+import { ExampleSolutionStatuses } from '../constants'
+
+const LAVA_ICON_HEIGHT = 112
+
+type LavaIconProps = {
+  status: ExampleSolutionStatuses
+  style?: StyleProp<ViewStyle>
+}
+
+export const LavaIcon = ({ status, style }: LavaIconProps) => {
+  const opacityAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(status === ExampleSolutionStatuses.LOADING ? 1 : 0, { duration: 500 }),
+    }
+  }, [status])
+
+  return (
+    <>
+      <Animated.View style={[style, opacityAnimation]}>
+        <LavaIconInGlasses height={112} />
+      </Animated.View>
+
+      {status !== ExampleSolutionStatuses.LOADING && (
+        <Animated.View style={style} entering={FadeIn}>
+          <ExcitedLavaIcon height={LAVA_ICON_HEIGHT} />
+        </Animated.View>
+      )}
+    </>
+  )
+}