@magmamath/students-features 0.7.0 → 0.8.0-rc.0

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

@@ -1,60 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { useStoreMap, useUnit } from 'effector-react'
-
-import { HelpRequestOption } from './HelpRequestOption'
-import { useChatModel } from '../../context/ChatBotModelContext'
-import { ColorScheme } from '../../types/style.types'
-import { CONTROLS_COLORS_MAP } from '../../constants'
-
-type AlternativesProps = {
-  onPressAlternative: (message: string, translatedMessage?: string) => void
-  hasMessages: boolean
-  isHintFeedback: boolean
-  colorScheme?: ColorScheme
-}
-
-export const Alternatives = ({
-  onPressAlternative,
-  hasMessages,
-  isHintFeedback,
-  colorScheme = ColorScheme.Blue,
-}: AlternativesProps) => {
-  const model = useChatModel()
-  const isTranslated = useUnit(model.translation.$isTranslated)
-  const alternatives = useUnit(model.$alternatives)
-  const isTranslationPending = useUnit(model.translation.translateAllMessagesFx.pending)
-  const lastMessageOptions = useStoreMap(model.$currentChatData, ({ messages }) => {
-    const lastMessage = messages.at(-1)
-    return lastMessage?.options ?? []
-  })
-
-  const options = (() => {
-    if (hasMessages) return lastMessageOptions
-    if (isHintFeedback) return alternatives?.options.hints ?? []
-    return alternatives?.options.default ?? []
-  })()
-
-  return (
-    <View style={styles.container}>
-      {options.map(({ text, translatedText }, index) => (
-        <HelpRequestOption
-          key={index}
-          onPress={() => onPressAlternative(text, translatedText)}
-          message={isTranslated ? (translatedText as string) : text}
-          disabled={isTranslationPending}
-          hoverColor={CONTROLS_COLORS_MAP[colorScheme].hover}
-        />
-      ))}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: 305,
-    marginVertical: 8,
-    gap: 8,
-  },
-})

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

@@ -1,91 +0,0 @@
-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'
-
-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: backgroundColor }]}
-      >
-        <Animated.Text numberOfLines={1} style={[styles.text, { color: textColor }]}>
-          {message}
-        </Animated.Text>
-        <ArrowRightIcon color={isHovered ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_10} />
-      </Animated.View>
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-  },
-  text: {
-    fontSize: 20,
-    fontWeight: 400,
-    fontFamily: FONT_FAMILY.buenosAires,
-    color: COLORS.NEUTRAL_10,
-  },
-  textWrapper: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    maxWidth: 305,
-    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,
-  },
-})