@magmamath/students-features 0.6.14-rc.8 → 0.6.14

package/dist/typescript/module/features/chatbot/components/ChatInput/freeText/FreeTextInputBlock.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { ColorScheme } from '../../../types/style.types';
-type FreeTextInputAreaProps = {
-    onPress: () => void;
-    message: string;
-    disabled: boolean;
-    colorScheme?: ColorScheme;
-};
-export declare const FreeTextInputBlock: ({ onPress, message, disabled, colorScheme, }: FreeTextInputAreaProps) => React.JSX.Element;
-export {};
-//# sourceMappingURL=FreeTextInputBlock.d.ts.map

package/dist/typescript/module/features/chatbot/components/ChatInput/freeText/FreeTextInputBlock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FreeTextInputBlock.d.ts","sourceRoot":"","sources":["../../../../../../../../src/features/chatbot/components/ChatInput/freeText/FreeTextInputBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAIxD,KAAK,sBAAsB,GAAG;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,kBAAkB,iDAK5B,sBAAsB,sBAaxB,CAAA"}

package/dist/typescript/module/features/chatbot/components/ChatInput/freeText/SendMessageButton.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { ColorScheme } from '@magmamath/students-features';
-type HelpRequestOptionProps = {
-    onPress: () => void;
-    disabled: boolean;
-    colorScheme?: ColorScheme;
-};
-export declare const SendMessageButton: ({ onPress, disabled, colorScheme, }: HelpRequestOptionProps) => React.JSX.Element;
-export {};
-//# sourceMappingURL=SendMessageButton.d.ts.map

package/dist/typescript/module/features/chatbot/components/ChatInput/freeText/SendMessageButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SendMessageButton.d.ts","sourceRoot":"","sources":["../../../../../../../../src/features/chatbot/components/ChatInput/freeText/SendMessageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAG1D,KAAK,sBAAsB,GAAG;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,iBAAiB,wCAI3B,sBAAsB,sBAwDxB,CAAA"}

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

@@ -1,56 +0,0 @@
-import React, { ComponentType } from 'react'
-import { useStoreMap, useUnit } from 'effector-react'
-
-import { useChatModel } from '../../context/ChatBotModelContext'
-import { ColorScheme } from '../../types/style.types'
-import { ChatInputAreaProps, ChatInputMode, ChatInputProps } from '../../types/units.types'
-import { InputOption } from './InputOption'
-import { InputOptionWithTextArea } from './InputOptionWithTextArea'
-
-const chatInputVariant: Record<ChatInputMode, ComponentType<ChatInputProps>> = {
-  [ChatInputMode.Option]: InputOption,
-  [ChatInputMode.FreeText]: InputOptionWithTextArea,
-}
-
-export const ChatInput = ({
-  onPressAlternative,
-  hasMessages,
-  isHintFeedback,
-  inputMode,
-  colorScheme = ColorScheme.Blue,
-}: ChatInputAreaProps) => {
-  const model = useChatModel()
-  const isTranslated = useUnit(model.translation.$isTranslated)
-  const alternatives = useUnit(model.$alternatives)
-  const isTranslationPending = useUnit(model.translation.translateAllMessagesFx.pending)
-  const isHelpRequestPending = useUnit(model.sendHelpRequestFx.pending)
-
-  const lastMessageOptions = useStoreMap(model.$currentChatData, ({ messages }) => {
-    const lastMessage = messages.at(-1)
-    return lastMessage?.options ?? []
-  })
-
-  const availableOption = (() => {
-    if (hasMessages && lastMessageOptions.length) return lastMessageOptions[0]
-    if (isHintFeedback && alternatives?.options.hints) return alternatives?.options.hints[0]
-    return alternatives?.options.default[0] ?? null
-  })()
-
-  const buttonLabel =
-    (isTranslated && !isTranslationPending
-      ? availableOption?.translatedText
-      : availableOption?.text) ?? ''
-
-  const Component = chatInputVariant[inputMode]
-
-  return (
-    availableOption?.text && (
-      <Component
-        message={buttonLabel}
-        onPress={() => onPressAlternative(availableOption.text, availableOption.translatedText)}
-        disabled={isHelpRequestPending || (hasMessages && lastMessageOptions.length === 0)}
-        colorScheme={colorScheme}
-      />
-    )
-  )
-}

package/src/features/chatbot/components/ChatInput/InputOption.tsx

@@ -1,29 +0,0 @@
-import { StyleSheet, View } from 'react-native'
-import React from 'react'
-import { ChatInputProps } from '../../types/units.types'
-import { OptionButtonVariant } from './RequestHintButton'
-import { RequestHintButton } from './RequestHintButton'
-
-export const InputOption = ({ message, onPress, colorScheme, disabled }: ChatInputProps) => {
-  return (
-    <View style={styles.container}>
-      <RequestHintButton
-        onPress={onPress}
-        message={message}
-        disabled={disabled}
-        colorScheme={colorScheme}
-        variant={OptionButtonVariant.Default}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: 305,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginVertical: 8,
-  },
-})

package/src/features/chatbot/components/ChatInput/InputOptionWithTextArea.tsx

@@ -1,27 +0,0 @@
-import { StyleSheet, View } from 'react-native'
-import React from 'react'
-import { ChatInputProps } from '../../types/units.types'
-import { FreeTextInputBlock } from './freeText/FreeTextInputBlock'
-
-export const InputOptionWithTextArea = ({ message, disabled, onPress, colorScheme }: ChatInputProps) => {
-  return (
-    <View style={styles.container}>
-      <FreeTextInputBlock
-        message={message}
-        onPress={onPress}
-        disabled={disabled}
-        colorScheme={colorScheme}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: 305,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginVertical: 8,
-  },
-})

package/src/features/chatbot/components/ChatInput/RequestHintButton.tsx

@@ -1,160 +0,0 @@
-import { Pressable, StyleSheet } from 'react-native'
-import React from 'react'
-import Animated, {
-  useSharedValue,
-  withTiming,
-  useAnimatedStyle,
-  interpolateColor,
-  SharedValue,
-} from 'react-native-reanimated'
-import {
-  ArrowRightIcon,
-  ArrowUpIcon,
-  COLORS,
-  FONT_FAMILY,
-  IS_MOBILE,
-  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
-  variant: OptionButtonVariant
-  colorScheme?: ColorScheme
-  visibleSv?: SharedValue<number>
-}
-
-export enum OptionButtonVariant {
-  Default = 'default',
-  Short = 'short',
-}
-
-const REQUEST_HINT_BUTTON = {
-  [OptionButtonVariant.Default]: {
-    WIDTH: 305,
-    FONT_SIZE: 20,
-  },
-  [OptionButtonVariant.Short]: { WIDTH: 163, FONT_SIZE: 18 },
-}
-
-export const RequestHintButton = ({
-  onPress,
-  message,
-  disabled = false,
-  colorScheme = ColorScheme.Blue,
-  variant = OptionButtonVariant.Default,
-}: 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 animatedTextContainerStyle = useAnimatedStyle(() => {
-    if (disabled) {
-      return {
-        backgroundColor: COLORS.NEUTRAL_2,
-        borderColor: COLORS.NEUTRAL_5,
-      }
-    }
-
-    const defaultBorderColor =
-      variant === OptionButtonVariant.Default
-        ? COLORS.NEUTRAL_1
-        : MESSAGE_COLORS_MAP[colorScheme].sent.border
-
-    return {
-      backgroundColor: interpolateColor(
-        hoverSv.value,
-        [0, 1],
-        [COLORS.NEUTRAL_1, MESSAGE_COLORS_MAP[colorScheme].sent.background],
-      ),
-      borderColor: interpolateColor(
-        hoverSv.value,
-        [0, 1],
-        [defaultBorderColor, MESSAGE_COLORS_MAP[colorScheme].sent.border],
-      ),
-    }
-  }, [hoverSv, disabled, colorScheme])
-
-  const animatedTextStyle = useAnimatedStyle(() => {
-    if (disabled) return { color: COLORS.NEUTRAL_5 }
-
-    return { color: interpolateColor(hoverSv.value, [0, 1], [COLORS.NEUTRAL_10, COLORS.NEUTRAL_1]) }
-  }, [hoverSv, disabled])
-
-  return (
-    <Pressable
-      onHoverIn={onHoverIn}
-      onHoverOut={onHoverOut}
-      onPress={onPress}
-      style={[
-        styles.button,
-        { cursor: disabled ? 'auto' : 'pointer', width: REQUEST_HINT_BUTTON[variant].WIDTH },
-      ]}
-      disabled={disabled}
-      accessibilityState={{ disabled }}
-      accessibilityRole="button"
-    >
-      <Animated.View style={[styles.content, animatedTextContainerStyle]}>
-        <Animated.Text
-          numberOfLines={1}
-          style={[
-            styles.text,
-            animatedTextStyle,
-            { fontSize: REQUEST_HINT_BUTTON[variant].FONT_SIZE },
-          ]}
-        >
-          {message}
-        </Animated.Text>
-
-        <Animated.Text style={[styles.icon, animatedTextStyle]}>
-          {variant === OptionButtonVariant.Default ? (
-            <ArrowRightIcon color={disabled ? COLORS.NEUTRAL_5 : 'currentColor'} size={16} />
-          ) : (
-            <ArrowUpIcon color={disabled ? COLORS.NEUTRAL_5 : 'currentColor'} size={16} />
-          )}
-        </Animated.Text>
-      </Animated.View>
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-  },
-  text: {
-    fontWeight: '400',
-    fontFamily: FONT_FAMILY.buenosAires,
-    color: COLORS.NEUTRAL_10,
-  },
-  content: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    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.PRIMARY_BLUE,
-    borderColor: COLORS.PRIMARY_BLUE,
-  },
-  icon: {
-    top: IS_MOBILE ? 3 : 0,
-  },
-})

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,
-  },
-})