@magmamath/students-features 0.1.0

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

@@ -0,0 +1,92 @@
+import React from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { Animated, Platform, Pressable, StyleSheet } from 'react-native'
+import { ArrowRightIcon } from '../../../../shared/icons/ArrowRightIcon'
+
+const transitionColor = (isHovered: boolean, value: Animated.Value) =>
+  Animated.timing(value, {
+    toValue: isHovered ? 1 : 0,
+    duration: 200,
+    useNativeDriver: Platform.OS !== 'web',
+  }).start()
+
+type HelpRequestOptionProps = {
+  onPress: () => void
+  message: string
+  disabled: boolean
+}
+
+export const HelpRequestOption = ({
+  onPress,
+  message,
+  disabled = false,
+}: HelpRequestOptionProps) => {
+  const [isHovered, setIsHovered] = useState(false)
+
+  const backgroundColor = useRef(new Animated.Value(0)).current
+  const backgroundInterpolation = backgroundColor.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['#FFFFFF', '#55ABE0'],
+  })
+
+  const textColor = useRef(new Animated.Value(0)).current
+  const textInterpolation = textColor.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['#33334D', '#FFFFFF'],
+  })
+
+  useEffect(() => {
+    transitionColor(isHovered, backgroundColor)
+    transitionColor(isHovered, textColor)
+  }, [isHovered])
+
+  return (
+    <Pressable
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      onPress={onPress}
+      style={styles.button}
+      disabled={disabled}
+    >
+      <Animated.View style={[styles.textWrapper, { backgroundColor: backgroundInterpolation }]}>
+        <Animated.Text numberOfLines={1} style={[styles.text, { color: textInterpolation }]}>
+          {message}
+        </Animated.Text>
+        <ArrowRightIcon color={isHovered ? '#FFFFFF' : '#33334D'} />
+      </Animated.View>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: 400,
+    fontFamily: 'Buenos Aires',
+    color: '#33334D',
+  },
+  textWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    maxWidth: 305,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderWidth: 1,
+    borderRadius: 48,
+    borderColor: '#55ABE0',
+    elevation: 3,
+    shadowColor: '#333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    backgroundColor: '#FFFFFF',
+  },
+})

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

@@ -0,0 +1,103 @@
+import React from 'react'
+import { ComponentType, PropsWithChildren } from 'react'
+import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native'
+import { Button } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { ChatbotModel } from '../../model/model'
+import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
+import { GlobeIcon } from '../../../../shared/icons/GlobeIcon'
+import { CloseIcon } from '../../../../shared/icons/CloseIcon'
+
+type ChatControlsProps = {
+  model: ChatbotModel
+  onPressTranslate: () => void
+  onPressChatIcon: () => void
+  onPressClose: () => void
+  isTranslationEnabled: boolean
+  ButtonWrapper: ComponentType<PropsWithChildren>
+}
+
+export const ChatControls = ({
+  model,
+  onPressTranslate,
+  onPressChatIcon,
+  onPressClose,
+  isTranslationEnabled,
+  ButtonWrapper,
+}: ChatControlsProps) => {
+  const isOpen = useUnit(model.$isOpen)
+  const isTranslated = useUnit(model.translation.$isTranslated)
+  const isTranslationPending = useUnit(model.translation.translateBatchFx.pending)
+  const isHelpRequestPending = useUnit(model.sendHelpRequestFx.pending)
+
+  if (isOpen) {
+    const backgroundColor = isTranslated ? '#55ABE0' : '#FFF'
+    const fillColor = isTranslated ? '#FFF' : '#4D4D63'
+
+    return (
+      <View style={styles.container}>
+        {isTranslationEnabled && (
+          <Pressable
+            onPress={onPressTranslate}
+            disabled={isHelpRequestPending || isTranslationPending}
+            style={[styles.buttonTranslate, { backgroundColor }]}
+          >
+            {isTranslationPending ? <ActivityIndicator /> : <GlobeIcon color={fillColor} />}
+          </Pressable>
+        )}
+
+        <Button
+          onPress={onPressClose}
+          style={{
+            container: styles.buttonClose,
+            button: {
+              backgroundColor: '#FFF',
+            },
+          }}
+          raiseLevel={5}
+        >
+          <CloseIcon />
+        </Button>
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.container}>
+      <ButtonWrapper>
+        <Pressable onPress={onPressChatIcon}>
+          <ChatbotIcon />
+        </Pressable>
+      </ButtonWrapper>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    flexDirection: 'row',
+    height: 60,
+    gap: 8,
+  },
+  buttonClose: {
+    width: 50,
+    height: 50,
+  },
+  buttonTranslate: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 36,
+    height: 36,
+    borderRadius: 32,
+    borderWidth: 1,
+    borderColor: '#F2F2F4',
+    shadowColor: '#333333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    elevation: 3,
+    backgroundColor: '#FFF',
+  },
+})

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

@@ -0,0 +1,28 @@
+import React, { ComponentType, ReactNode } from 'react'
+import { ReceivedMessage } from './ReceivedMessage'
+import { SentMessage } from './SentMessage'
+import { AudioStatus } from '../../types/t2s.types'
+import { MessageVariant, ChatbotRenderer } from '../../types/model.types'
+
+type ChatMessageProps = {
+  variant: MessageVariant
+  message: string
+  onPressTextToSpeech: () => void
+  isTextToSpeechPending: boolean
+  isActive: boolean
+  withTextToSpeech?: boolean
+  audioStatus: AudioStatus
+  renderer?: (props: ChatbotRenderer) => ReactNode
+}
+
+export type VariantProps = Omit<ChatMessageProps, 'variant'>
+
+const variantsMap: Record<MessageVariant, ComponentType<VariantProps>> = {
+  [MessageVariant.SENT]: SentMessage,
+  [MessageVariant.RECEIVED]: ReceivedMessage,
+}
+
+export const ChatMessage = ({ variant, ...props }: ChatMessageProps) => {
+  const Component = variantsMap[variant]
+  return <Component {...props} />
+}

package/src/features/chatbot/components/ChatMessage/MessageLoader.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
+import { ThreeDotsLoader } from '../ThreeDotsLoader/ThreeDotsLoader'
+
+export const MessageLoader = () => (
+  <View style={styles.container}>
+    <View style={styles.icon}>
+      <ChatbotIcon width={38} height={38} />
+    </View>
+    <View style={styles.loader}>
+      <ThreeDotsLoader />
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    width: 305,
+  },
+  icon: {
+    alignSelf: 'flex-end',
+    marginRight: 8,
+  },
+  loader: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    maxWidth: 70,
+    padding: 8,
+    paddingTop: 15,
+    shadowColor: '#333333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    elevation: 3,
+    borderRadius: 8,
+    borderBottomLeftRadius: 0,
+    backgroundColor: '#F2F2F4',
+  },
+})

package/src/features/chatbot/components/ChatMessage/MessageTextToSpeech.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { ActivityIndicator, Pressable, StyleSheet, TouchableOpacity } from 'react-native'
+import { SpeakerIcon } from '../../../../shared/icons/SpeakerIcon'
+import { PlayIcon } from '../../../../shared/icons/PlayIcon'
+import { PauseIcon } from '../../../../shared/icons/PauseIcon'
+import { AudioStatus } from '../../types/t2s.types'
+
+type TextToSpeechIconProps = {
+  status: AudioStatus
+  isLoading: boolean
+  isActive: boolean
+}
+
+const TextToSpeechIcon = ({ status, isActive, isLoading }: TextToSpeechIconProps) => {
+  if (isLoading && isActive) {
+    return <ActivityIndicator />
+  }
+
+  if (!isActive) {
+    return <SpeakerIcon color={isActive ? '#55ABE0' : undefined} />
+  }
+
+  if (status === 'playing') return <PauseIcon color="#FFF" />
+  if (status === 'paused') return <PlayIcon color="#FFF" />
+  return <SpeakerIcon color={isActive ? '#55ABE0' : undefined} />
+}
+
+type MessageTextToSpeechProps = {
+  status: AudioStatus
+  disabled: boolean
+  isActive: boolean
+  isLoading: boolean
+  onPress: () => void
+}
+
+export const MessageTextToSpeech = ({
+  status,
+  disabled,
+  isActive,
+  isLoading,
+  onPress,
+}: MessageTextToSpeechProps) => (
+  <TouchableOpacity style={styles.container} onPress={onPress}>
+    <Pressable
+      disabled={disabled}
+      onPress={onPress}
+      style={[styles.button, { backgroundColor: isActive && !isLoading ? '#55ABE0' : '#FFF' }]}
+    >
+      <TextToSpeechIcon isActive={isActive} isLoading={isLoading} status={status} />
+    </Pressable>
+  </TouchableOpacity>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-end',
+    justifyContent: 'flex-end',
+    width: 45,
+    height: '100%',
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 28,
+    height: 28,
+    padding: 1,
+    marginLeft: 'auto',
+    shadowColor: '#333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    elevation: 3,
+    borderRadius: 6,
+    borderColor: '#F2F2F4',
+    borderWidth: 0.5,
+    backgroundColor: '#FFF',
+  },
+})

package/src/features/chatbot/components/ChatMessage/ReceivedMessage.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { VariantProps } from './ChatMessage'
+import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
+import { MessageTextToSpeech } from './MessageTextToSpeech'
+import { MessageVariant } from '../../types/model.types'
+
+export const ReceivedMessage = ({
+  message,
+  onPressTextToSpeech,
+  isTextToSpeechPending,
+  isActive,
+  audioStatus,
+  renderer,
+  withTextToSpeech = true,
+}: VariantProps) => (
+  <View style={styles.container}>
+    <View style={styles.icon}>
+      <ChatbotIcon width={38} height={38} />
+    </View>
+
+    <View style={styles.message}>
+      <Text style={[styles.messageText, { width: withTextToSpeech ? 240 : 305 }]}>
+        {renderer
+          ? renderer({ message, variant: MessageVariant.RECEIVED, withTextToSpeech })
+          : message}
+      </Text>
+      {withTextToSpeech && (
+        <MessageTextToSpeech
+          isActive={isActive}
+          isLoading={isTextToSpeechPending}
+          onPress={onPressTextToSpeech}
+          disabled={isTextToSpeechPending}
+          status={audioStatus}
+        />
+      )}
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    maxWidth: 350,
+    width: 350,
+  },
+  icon: {
+    alignSelf: 'flex-end',
+    marginRight: 8,
+  },
+  message: {
+    flex: 1,
+    flexDirection: 'row',
+    maxWidth: 305,
+    padding: 8,
+    shadowColor: '#333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    elevation: 3,
+    borderRadius: 8,
+    borderBottomLeftRadius: 0,
+    backgroundColor: '#F2F2F4',
+  },
+  messageText: {
+    flex: 1,
+    fontSize: 20,
+    fontWeight: 400,
+    fontFamily: 'Buenos Aires',
+    color: '#33334D',
+  },
+})

package/src/features/chatbot/components/ChatMessage/SentMessage.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { VariantProps } from './ChatMessage'
+import { MessageVariant } from '../../types/model.types'
+
+export const SentMessage = ({ message, renderer }: VariantProps) => (
+  <View style={styles.container}>
+    <Text style={styles.text}>
+      {renderer
+        ? renderer({ message, variant: MessageVariant.SENT, withTextToSpeech: false })
+        : message}
+    </Text>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-end',
+    maxWidth: 305,
+    padding: 8,
+    borderRadius: 8,
+    borderBottomRightRadius: 0,
+    backgroundColor: '#55ABE0',
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: 400,
+    fontFamily: 'Buenos Aires',
+    color: '#FFF',
+  },
+})

package/src/features/chatbot/components/ChatMessages/ChatbotMessages.tsx

@@ -0,0 +1,148 @@
+import React, { ReactNode, useRef } from 'react'
+import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { useStoreMap, useUnit } from 'effector-react'
+import { ChatbotModel } from '../../model/model'
+import { ChatMessage } from '../ChatMessage/ChatMessage'
+import { MessageLoader } from '../ChatMessage/MessageLoader'
+import { Alternatives } from '../Alternatives/Alternatives'
+import { PostMessagePayload } from '../../types/api.types'
+import { AUDIO_CONFIG, DEFAULT_VOICE, TEXT_TO_SPEECH_CONFIG } from '../../constants'
+import { MessageVariant, ChatbotRenderer } from '../../types/model.types'
+
+type ChatbotMessagesProps = {
+  model: ChatbotModel
+  isHintFeedback: boolean
+  sendHelpRequestPayload: Omit<PostMessagePayload, 'type'>
+  translationTargetLanguage: string
+  sanitizeSpeechInput: (speech: string) => string
+  isTextToSpeechEnabled: boolean
+  textToSpeechConfig?: {
+    voice: typeof DEFAULT_VOICE
+    audioConfig: typeof AUDIO_CONFIG
+  }
+  renderer?: (props: ChatbotRenderer) => ReactNode
+}
+
+const TOOLBAR_HEIGHT = 140
+const BOTTOM_OFFSET = Platform.OS === 'web' ? 250 : 284
+
+export const ChatbotMessages = ({
+  model,
+  isHintFeedback,
+  sendHelpRequestPayload,
+  translationTargetLanguage,
+  sanitizeSpeechInput,
+  isTextToSpeechEnabled,
+  textToSpeechConfig,
+  renderer,
+}: ChatbotMessagesProps) => {
+  const dimensions = useWindowDimensions()
+  const ref = useRef<ScrollView>(null)
+  const assignmentId = useUnit(model.credits.$assignmentId)
+  const exerciseId = useUnit(model.credits.$exerciseId)
+  const isOpen = useUnit(model.$isOpen)
+
+  const isHelpRequestPending = useUnit(model.sendHelpRequestFx.pending)
+  const isTextToSpeechPending = useUnit(model.api.textToSpeechTextFx.pending)
+
+  const currentPlayingId = useUnit(model.t2s.$currentPlayingId)
+  const isTranslated = useUnit(model.translation.$isTranslated)
+  const audioStatus = useUnit(model.t2s.$status)
+
+  const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
+
+  const messages = useStoreMap({
+    store: model.messages.$state,
+    keys: [assignmentId, exerciseId],
+    fn: state => state[assignmentId]?.[exerciseId]?.messages ?? [],
+  })
+
+  const playTextToSpeech = (id: string, message: string, translatedMessage?: string) => {
+    if (isTranslated) {
+      model.t2s.play({
+        text: sanitizeSpeechInput(translatedMessage as string),
+        messageId: id,
+        isTranslated: true,
+        config: textToSpeechConfig ?? TEXT_TO_SPEECH_CONFIG,
+      })
+    } else {
+      model.t2s.play({
+        text: sanitizeSpeechInput(message),
+        messageId: id,
+        isTranslated: false,
+        config: textToSpeechConfig ?? TEXT_TO_SPEECH_CONFIG,
+      })
+    }
+  }
+
+  const askChatForHelp = (message: string, promptKey: string, translatedMessage?: string) => {
+    model.sendHelpRequestFx({
+      payload: { ...sendHelpRequestPayload, type: promptKey },
+      message,
+      translatedMessage,
+      translationTargetLanguage,
+    })
+  }
+
+  return (
+    <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
+      <ScrollView
+        ref={ref}
+        contentContainerStyle={styles.list}
+        onContentSizeChange={(_, height) => {
+          ref.current?.scrollToEnd()
+
+          if (height >= MAX_HEIGHT) {
+            model.setScrollActive(true)
+          }
+        }}
+      >
+        {isOpen && (
+          <View style={styles.gap}>
+            {messages.map(({ id, message, translatedMessage, isOwnMessage }) => (
+              <ChatMessage
+                key={id}
+                message={isTranslated ? (translatedMessage as string) : message}
+                renderer={renderer}
+                audioStatus={audioStatus}
+                onPressTextToSpeech={() => playTextToSpeech(id, message, translatedMessage)}
+                isActive={id === currentPlayingId}
+                isTextToSpeechPending={isTextToSpeechPending}
+                variant={isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
+                withTextToSpeech={isTextToSpeechEnabled && !isOwnMessage}
+              />
+            ))}
+
+            {isHelpRequestPending && <MessageLoader />}
+          </View>
+        )}
+
+        {!isHelpRequestPending && isOpen && (
+          <Alternatives
+            model={model}
+            onPressAlternative={askChatForHelp}
+            hasMessages={messages.length > 1}
+            isHintFeedback={isHintFeedback}
+          />
+        )}
+      </ScrollView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-end',
+    width: 350,
+    height: '100%',
+  },
+  list: {
+    alignItems: 'flex-end',
+    paddingVertical: 2,
+  },
+  gap: {
+    flex: 1,
+    gap: 8,
+  },
+})

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

@@ -0,0 +1,92 @@
+import { ComponentType, PropsWithChildren, ReactNode, useEffect } from 'react'
+import { useStoreMap, useUnit } from 'effector-react'
+
+import { ChatbotModel } from '../model/model'
+import { ChatbotMessages } from './ChatMessages/ChatbotMessages'
+import { ChatControls } from './ChatControls/ChatControls'
+import { PostMessagePayload } from '../types/api.types'
+import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
+import { ChatbotRenderer } from '../types/model.types'
+import React from 'react'
+
+type ChatbotProps = {
+  model: ChatbotModel
+  translationTargetLanguage: string
+  isEnabled: boolean
+  isHintFeedback: boolean
+  sendHelpRequestPayload: Omit<PostMessagePayload, 'type'>
+  sanitizeSpeechInput: (speech: string) => string
+  isTextToSpeechEnabled: boolean
+  isTranslationEnabled: boolean
+  textToSpeechConfig?: {
+    voice: typeof DEFAULT_VOICE
+    audioConfig: typeof AUDIO_CONFIG
+  }
+  ButtonWrapper: ComponentType<PropsWithChildren>
+  renderer?: (props: ChatbotRenderer) => ReactNode
+}
+
+export const Chatbot = ({
+  model,
+  translationTargetLanguage,
+  isEnabled,
+  isHintFeedback,
+  sendHelpRequestPayload,
+  sanitizeSpeechInput,
+  isTextToSpeechEnabled = false,
+  textToSpeechConfig,
+  isTranslationEnabled,
+  renderer,
+  ButtonWrapper,
+}: ChatbotProps) => {
+  const assignmentId = useUnit(model.credits.$assignmentId)
+  const exerciseId = useUnit(model.credits.$exerciseId)
+  const alternatives = useUnit(model.$alternatives)
+
+  const isAvailable = useStoreMap({
+    store: model.availableChats.$state,
+    keys: [assignmentId, exerciseId],
+    fn: (state) => !!state[assignmentId]?.[exerciseId]?.isAvailable,
+  })
+
+  const translateMessages = () => {
+    model.translation.translateBatchFx({
+      targetLanguage: translationTargetLanguage,
+    })
+  }
+
+  const openChat = () => model.setIsOpen(true)
+  const closeChat = () => model.setIsOpen(false)
+
+  useEffect(() => {
+    if (!alternatives) model.api.getAlternativesFx()
+  }, [alternatives, model])
+
+  if (!isEnabled || !isAvailable) {
+    return null
+  }
+
+  return (
+    <>
+      <ChatbotMessages
+        model={model}
+        renderer={renderer}
+        sendHelpRequestPayload={sendHelpRequestPayload}
+        translationTargetLanguage={translationTargetLanguage}
+        isHintFeedback={isHintFeedback}
+        sanitizeSpeechInput={sanitizeSpeechInput}
+        isTextToSpeechEnabled={isTextToSpeechEnabled}
+        textToSpeechConfig={textToSpeechConfig}
+      />
+
+      <ChatControls
+        model={model}
+        onPressTranslate={translateMessages}
+        onPressChatIcon={openChat}
+        onPressClose={closeChat}
+        isTranslationEnabled={isTranslationEnabled}
+        ButtonWrapper={ButtonWrapper}
+      />
+    </>
+  )
+}