@magmamath/students-features 0.6.14-rc.9 → 0.6.15

package/src/features/chatbot/components/ChatInput/freeText/ChatTextInput.tsx

@@ -1,133 +0,0 @@
-import React from 'react'
-import { useUnit } from 'effector-react'
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
-import { Platform, StyleSheet, TextInput } from 'react-native'
-import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
-
-import { SendMessageButton } from './SendMessageButton'
-import { ColorScheme } from '@magmamath/students-features'
-import { useChatModel } from '../../../context/ChatBotModelContext'
-import { useKeyBoard } from '../../../../../shared/hooks/useKeyboard'
-import { KeyboardKeys } from '../../../../../lib/constants'
-
-const COMPACT_WIDTH = 134
-const FULL_WIDTH = 305
-
-const ANIMATION_DURATION = 200
-
-type ChatTextInputProps = {
-  onPress: () => void
-  disabled: boolean
-  colorScheme?: ColorScheme
-}
-
-export const ChatTextInput = ({ disabled, colorScheme }: ChatTextInputProps) => {
-  const model = useChatModel()
-  const inputValue = useUnit(model.$textInputValue)
-  const { language } = useUnit(model.$context) ?? {}
-
-  const widthSv = useSharedValue(COMPACT_WIDTH)
-  const arrowOpacitySv = useSharedValue(1)
-  const hintVisibleSv = useSharedValue(1)
-
-  const animatedInputStyle = useAnimatedStyle(
-    () => ({
-      width: widthSv.value,
-    }),
-    [widthSv],
-  )
-
-  const handleChangeText = (text: string) => {
-    if (text.trim().length > 500) return
-
-    model.setTextInputValue(text)
-    const hasText = text.trim().length > 0
-    const isExpanded = widthSv.value > COMPACT_WIDTH
-
-    if (hasText && !isExpanded) {
-      widthSv.value = withTiming(FULL_WIDTH, { duration: ANIMATION_DURATION })
-      arrowOpacitySv.value = withTiming(0, { duration: ANIMATION_DURATION })
-      hintVisibleSv.value = withTiming(0, { duration: ANIMATION_DURATION })
-    } else if (!hasText && isExpanded) {
-      widthSv.value = withTiming(COMPACT_WIDTH, { duration: ANIMATION_DURATION })
-      arrowOpacitySv.value = withTiming(1, { duration: ANIMATION_DURATION })
-      hintVisibleSv.value = withTiming(1, { duration: ANIMATION_DURATION })
-    }
-  }
-
-  const handleOnPress = () => {
-    if (disabled || inputValue.trim().length < 1 || inputValue.length > 500) return
-    handleChangeText('')
-    void model.sendHelpRequestFx({
-      message: inputValue,
-      translatedMessage: inputValue,
-      isFreeText: true,
-    })
-  }
-
-  useKeyBoard((event) => {
-    if (event.key === KeyboardKeys.ENTER) {
-      handleOnPress()
-    }
-  })
-
-  return (
-    <Animated.View style={[styles.inputWrapper, animatedInputStyle]}>
-      <TextInput
-        style={styles.input}
-        placeholder={language === 'Swedish' ? 'Skriv...' : 'Type...'}
-        placeholderTextColor={COLORS.NEUTRAL_6}
-        value={inputValue}
-        onChangeText={handleChangeText}
-        onBlur={() => model.setIsTextInputFocused(false)}
-        onFocus={() => model.setIsTextInputFocused(true)}
-      />
-      <SendMessageButton
-        onPress={handleOnPress}
-        disabled={inputValue.trim().length < 1 || disabled}
-        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

@@ -1,42 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { ColorScheme } from '../../../types/style.types'
-import { ChatTextInput } from './ChatTextInput'
-import { OptionButtonVariant, RequestHintButton } from '../RequestHintButton'
-
-type FreeTextInputAreaProps = {
-  onPress: () => void
-  message: string
-  disabled: boolean
-  colorScheme?: ColorScheme
-}
-
-export const FreeTextInputBlock = ({
-  onPress,
-  message,
-  disabled,
-  colorScheme,
-}: FreeTextInputAreaProps) => {
-  return (
-    <View style={styles.container}>
-      <ChatTextInput onPress={onPress} disabled={disabled} colorScheme={colorScheme} />
-      <RequestHintButton
-        onPress={onPress}
-        message={message}
-        disabled={disabled}
-        colorScheme={colorScheme}
-        variant={OptionButtonVariant.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

@@ -1,110 +0,0 @@
-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 HelpRequestOptionProps = {
-  onPress: () => void
-  disabled: boolean
-  colorScheme?: ColorScheme
-}
-
-export const SendMessageButton = ({
-  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 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',
-  },
-  iconContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-    borderRadius: 21,
-    borderWidth: 1,
-  },
-  webIconContainer: {
-    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,
-  },
-})