@magmamath/students-features 0.11.0-rc.9 → 1.0.0

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

@@ -1,38 +1,54 @@
-import React, { PropsWithChildren } from 'react'
+import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { BORDER_RADIUS, COLORS, Loader, LoaderColor } from '@magmamath/react-native-ui'
-import { SPACING } from '@magmamath/react-native-ui'
+import { COLORS } from '@magmamath/react-native-ui'
+
+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 = {
-  isLoading?: boolean
+  colorScheme?: ColorScheme
 }
 
-export const MessageLoader = ({ isLoading }: MessageLoaderProps) => {
-  if (!isLoading) return null
-
-  return (
+export const MessageLoader = ({ colorScheme = ColorScheme.Blue }: MessageLoaderProps) => (
+  <View style={styles.container}>
+    <View style={styles.icon}>
+      <LavaIconInGlasses width={60} height={80} />
+    </View>
     <View style={styles.loader}>
-      <Loader color={LoaderColor.GRAY} />
+      <ThreeDotsLoader backgroundColor={CONTROLS_COLORS_MAP[colorScheme].background} />
     </View>
-  )
-}
+  </View>
+)
 
 const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    width: 327,
+    alignItems: 'flex-end',
+    paddingLeft:70
+  },
+  icon: {
+    position: 'absolute',
+    zIndex:1,
+    alignSelf: 'flex-end',
+    left: 0
+  },
   loader: {
-    marginLeft: 68,
-    alignSelf: 'flex-start',
-    marginTop: SPACING['200'],
+    flex: 1,
     flexDirection: 'row',
     alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-    maxWidth: 62,
+    maxWidth: 70,
     padding: 8,
+    paddingTop: 15,
     shadowColor: '#333333',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.25,
     shadowRadius: 3,
     elevation: 3,
-    borderRadius: BORDER_RADIUS['300'],
+    borderRadius: 8,
     borderBottomLeftRadius: 0,
     backgroundColor: COLORS.NEUTRAL_3,
   },

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

@@ -1,42 +1,11 @@
 import React from 'react'
-import { ActivityIndicator } from 'react-native'
-import { Button, COLORS } from '@magmamath/react-native-ui'
-
-import { SpeakerIcon } from '../../../../shared/icons/SpeakerIcon'
-import { PlayIcon } from '../../../../shared/icons/PlayIcon'
-import { PauseIcon } from '../../../../shared/icons/PauseIcon'
-import { AudioStatus, T2SState } from '../../types/t2s.types'
 import { useChatModel } from '../../context/ChatBotModelContext'
+import { PlayButton } from '../../../../shared/components/PlayButton'
+import { T2SState } from '../../types/t2s.types'
 import { ConversationMessage } from '../../types/units.types'
-import { ColorScheme } from '../../types/style.types'
 import { MessageVariant } from '../../types/model.types'
-import { CONTROLS_COLORS_MAP, MESSAGE_COLORS_MAP } from '../../constants'
-
-type TextToSpeechIconProps = {
-  status: AudioStatus
-  isLoading: boolean
-  isActive: boolean
-  colorScheme?: ColorScheme
-}
-
-const TextToSpeechIcon = ({
-  status,
-  isActive,
-  isLoading,
-  colorScheme = ColorScheme.Blue,
-}: TextToSpeechIconProps) => {
-  if (isLoading && isActive) {
-    return <ActivityIndicator color={CONTROLS_COLORS_MAP[colorScheme].background} />
-  }
-
-  if (!isActive) {
-    return <SpeakerIcon />
-  }
-
-  if (status === 'playing') return <PauseIcon color={COLORS.NEUTRAL_1} />
-  if (status === 'paused') return <PlayIcon color={COLORS.NEUTRAL_1} />
-  return <SpeakerIcon />
-}
+import { ColorScheme } from '../../types/style.types'
+import { MESSAGE_COLORS_MAP } from '../../constants'
 
 type MessageTextToSpeechProps = {
   state: T2SState
@@ -46,14 +15,14 @@ type MessageTextToSpeechProps = {
 }
 
 export const MessageTextToSpeech = ({
-  state: { status, disabled, isActive, isLoading },
-  message,
+  state,
   variant,
+  message,
   colorScheme = ColorScheme.Blue,
 }: MessageTextToSpeechProps) => {
   const model = useChatModel()
 
-  function play() {
+  const play = () => {
     void model.t2s.play({
       isTranslated: model.translation.$isTranslated.getState(),
       message,
@@ -61,21 +30,10 @@ export const MessageTextToSpeech = ({
   }
 
   return (
-    <Button
-      disabled={disabled}
-      isActive={isActive}
-      variant={'secondary'}
+    <PlayButton
       colorScheme={MESSAGE_COLORS_MAP[colorScheme][variant].icon}
-      size={'small'}
+      state={state}
       onPress={play}
-      icon={
-        <TextToSpeechIcon
-          isActive={isActive}
-          isLoading={isLoading}
-          status={status}
-          colorScheme={colorScheme}
-        />
-      }
     />
   )
 }

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

@@ -1,11 +1,11 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { BORDER_RADIUS, SPACING } from '@magmamath/react-native-ui'
-import { ChatbotIcon } from '@magmamath/students-features'
-import { ColorScheme } from '../../types/style.types'
-import { MessageVariant } from '../../types/model.types'
+
 import { VariantProps } from './ChatMessage'
+import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
+import { ColorScheme } from '../../types/style.types'
 import { MessageContent } from './MessageContent'
+import { MessageVariant } from '../../types/model.types'
 
 export const ReceivedMessage = ({
   message,
@@ -23,7 +23,7 @@ export const ReceivedMessage = ({
     <View style={styles.container}>
       {withIcon && (
         <View style={styles.icon}>
-          <ChatbotIcon width={53} height={73} />
+          <ChatbotIcon width={60} height={80} />
         </View>
       )}
 
@@ -47,11 +47,14 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'row',
-    maxWidth: 365,
-    width: 305,
+    maxWidth: 372,
+    width: 372,
     alignItems: 'flex-end',
     justifyContent: 'flex-end',
-    paddingHorizontal: 2,
+  },
+  icon: {
+    alignSelf: 'flex-end',
+    marginRight: 8,
   },
   message: {
     flex: 1,
@@ -63,12 +66,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3,
     elevation: 3,
-    borderRadius: BORDER_RADIUS[300],
+    borderRadius: 8,
     borderBottomLeftRadius: 0,
     backgroundColor: '#F2F2F4',
   },
-
-  icon: {
-    paddingRight: SPACING[200],
-  },
 })

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

@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
     maxWidth: 305,
     padding: SPACING[200],
-    borderRadius: BORDER_RADIUS[300],
+    borderRadius: BORDER_RADIUS[200],
     borderBottomRightRadius: 0,
   },
   text: {

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

@@ -1,4 +1,4 @@
-import React, { ComponentType, PropsWithChildren, useCallback } from 'react'
+import React, { ComponentType, PropsWithChildren, useMemo } from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 
 import { ChatbotModel } from '../model/ChatBotModel'
@@ -13,7 +13,6 @@ type ChatbotProps = {
   model: ChatbotModel
   isHintFeedback: boolean
   isTextToSpeechEnabled: boolean
-  withQuickActionButton?: boolean
   textToSpeechConfig?: {
     voice: typeof DEFAULT_VOICE
     audioConfig: typeof AUDIO_CONFIG
@@ -34,31 +33,23 @@ export const Chatbot = ({
   ButtonWrapper,
   iconSize,
   colorScheme = ColorScheme.Blue,
-  withQuickActionButton,
   TTSHighlightRenderer,
 }: ChatbotProps) => {
-  const alternatives = useUnit(model.$alternatives)
   const isChatAllowed = useUnit(model.$chatAccess)
   const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
-  const hasBeenOpened = useStoreMap(model.$currentChatData, ({ hasBeenOpened }) => hasBeenOpened)
-
   model.t2s.setAudioConfig(textToSpeechConfig ?? null)
 
+  const shouldAnimateCloseButton = useStoreMap({
+    store: model.$currentChatData,
+    fn: (chat, [isInputDisabled]) => {
+      return isInputDisabled && chat.messages.length === 1
+    },
+    keys: [isInputDisabled],
+  })
+
   const openChat = () => model.setIsOpen(true)
   const closeChat = () => model.setIsOpen(false)
 
-  const sendHelpRequest = useCallback(() => {
-    const option = alternatives?.options.default[0]
-    if (!option) return
-
-    model.setIsOpen(true)
-    void model.sendHelpRequestFx({
-      message: option.text,
-      translatedMessage: option.translatedText,
-      skipOwnMessage: true,
-    })
-  }, [alternatives])
-
   if (!isAvailable || !isChatAllowed) {
     return null
   }
@@ -73,16 +64,15 @@ export const Chatbot = ({
         isInputDisabled={isInputDisabled}
         MessageWrapper={ButtonWrapper}
         TTSHighlightRenderer={TTSHighlightRenderer}
-        onPressClose={closeChat}
       />
 
       <ChatControls
         model={model}
         onPressChatIcon={openChat}
-        onPressHelpButton={sendHelpRequest}
+        onPressClose={closeChat}
         iconSize={iconSize}
         ButtonWrapper={isInputDisabled ? undefined : ButtonWrapper}
-        withHelpButton={withQuickActionButton && !hasBeenOpened}
+        shouldAnimateCloseButton={shouldAnimateCloseButton}
       />
     </ChatBotModelContext.Provider>
   )

package/src/features/chatbot/constants.ts

@@ -46,24 +46,24 @@ export const MESSAGE_COLORS_MAP = {
     [MessageVariant.RECEIVED]: {
       background: COLORS.NEUTRAL_3,
       border: COLORS.NEUTRAL_3,
-      icon: ButtonColor.BLUE,
+      icon: ColorScheme.Blue,
     },
     [MessageVariant.SENT]: {
       background: COLORS.PRIMARY_BLUE,
       border: COLORS.PRIMARY_BLUE,
-      icon: ButtonColor.BLUE,
+      icon: ColorScheme.Blue,
     },
   },
   [ColorScheme.Yellow]: {
     [MessageVariant.RECEIVED]: {
       background: COLORS.NEUTRAL_3,
       border: COLORS.NEUTRAL_3,
-      icon: ButtonColor.YELLOW,
+      icon: ColorScheme.Yellow,
     },
     [MessageVariant.SENT]: {
       background: COLORS.PRIMARY_YELLOW,
       border: COLORS.PRIMARY_YELLOW,
-      icon: ButtonColor.YELLOW,
+      icon: ColorScheme.Yellow,
     },
   },
 }

package/src/features/chatbot/helpers.ts

@@ -65,7 +65,6 @@ export function prepareChatRequestPayload(
     imageAltText,
     answerOptions,
     answer,
-    chatHistory,
   } = payload
 
   if (freeTextMessage) {
@@ -75,7 +74,6 @@ export function prepareChatRequestPayload(
           data: {
             conversationId,
             message: freeTextMessage,
-            ...(chatHistory && { chatHistory }),
             ...(!!problemStandards?.length && { problemStandards }),
           },
         }
@@ -86,7 +84,6 @@ export function prepareChatRequestPayload(
             correctAnswer: problemAnswer,
             problemDescription,
             language,
-            ...(chatHistory && { chatHistory }),
             ...(imageCdnId && { imageCdnId }),
             ...(imageAltText && { altText: imageAltText }),
             ...(!!problemStandards?.length && { problemStandards }),

package/src/features/chatbot/index.ts

@@ -1,27 +1,13 @@
 export { Chatbot } from './components/Chatbot'
 export { ChatbotModel } from './model/ChatBotModel'
-export {
-  AudioStatus,
-  type AudioProvider,
-  type TTSHighlightRenderer,
-  type TTSHighlightRendererProps,
-} from './types/t2s.types'
+export { AudioStatus, type AudioProvider, type TTSHighlightRenderer, type TTSHighlightRendererProps } from './types/t2s.types'
 export {
   MessageVariant,
   type ChatbotModelProps,
   type IChatDrawBoardAdapter,
 } from './types/model.types'
 export type { RequestOptionalConfig } from '../../lib/effector/createControllerEffect'
-export type {
-  ChatHintPayload,
-  ChatHintResponse,
-  ChatHistory,
-  GetAlternativesResponse,
-  GetAlternativesPayload,
-  SendMessagePayload,
-  SendMessageResponse,
-  PostMessageResponse,
-} from './types/api.types'
+export type { PostMessageResponse } from './types/api.types'
 export { DefaultMessagesCreator } from './model/DefaultMessageCreator'
 export type { ChatAnswer } from './types/units.types'
 export type { ConversationMessage } from './types/units.types'

package/src/features/chatbot/model/ChatBotModel.ts

@@ -58,7 +58,7 @@ export class ChatbotModel {
 
   readonly resetAlternatives = createEvent()
   readonly setAlternatives = createEvent<GetAlternativesResponse | null>()
-  readonly $alternatives = createStore<GetAlternativesResponse | null>(null)
+  readonly $alternatives: Store<GetAlternativesResponse | null>
 
   readonly setIsOpen = createEvent<boolean>()
   readonly toggleOpen = createEvent()
@@ -94,7 +94,7 @@ export class ChatbotModel {
       this.threadManager.setMessagesLimit(threadMessagesLimit)
     }
 
-    this.$alternatives
+    this.$alternatives = createStore<GetAlternativesResponse | null>(null)
       .on(this.api.getAlternativesFx.doneData, (_, payload) => transformAlternatives(payload))
       .on(this.setAlternatives, (_, payload) => transformAlternatives(payload))
       .reset(this.resetAlternatives)
@@ -127,21 +127,6 @@ export class ChatbotModel {
       target: [this.t2s.reset, this.errorSpotting.spottingHidden],
     })
 
-    sample({
-      clock: this.$isOpen.updates,
-      filter: (isOpen) => !isOpen,
-      fn: () => false,
-      target: this.setScrollActive,
-    })
-
-    sample({
-      clock: this.setIsOpen,
-      source: this.$currentChatData,
-      filter: ({ hasBeenOpened }, isOpen) => isOpen && !hasBeenOpened,
-      fn: ({ key }) => ({ key, data: { hasBeenOpened: true } }),
-      target: this.cache.update,
-    })
-
     sample({
       clock: this.removeLastMessage,
       source: [this.$lastMessageKey, this.cache.$data] as const,
@@ -211,58 +196,30 @@ export class ChatbotModel {
 
   private createSendHelpRequestFx() {
     const effect = attach({
-      source: {
-        key: this.$currentKey,
-        context: this.$context,
-        cache: this.cache.$data,
-        alternatives: this.$alternatives,
-      },
+      source: { key: this.$currentKey, context: this.$context, cache: this.cache.$data },
       mapParams: (params: SendHelpParams, source) => ({
         ...params,
         ...source,
       }),
       effect: createEffect(
-        async ({
-          message,
-          translatedMessage,
-          key,
-          context,
-          isFreeText,
-          skipOwnMessage,
-          cache,
-          alternatives,
-        }: SendHelpProps) => {
+        async ({ message, translatedMessage, key, context, isFreeText, cache }: SendHelpProps) => {
           if (!context) throw new Error('Trying to send message in chat without context')
           this.setLastMessageKey(key)
-          if (skipOwnMessage) {
-            this.cache.clearMessages(key)
-          } else {
-            this.cache.addMessages(key, {
-              messages: [messagesHelper.createOwn({ message, translatedMessage })],
-            })
-          }
-
-          const chatHistory =
-            context.assignmentId && context.problemId
-              ? {
-                  exerciseId: context.assignmentId,
-                  problemId: context.problemId,
-                  chatVersion: alternatives?.version,
-                }
-              : undefined
+          this.cache.addMessages(key, {
+            messages: [messagesHelper.createOwn({ message, translatedMessage })],
+          })
 
           // Request is overridden by ThreadManager.postMessage (delegates to sendMessage/getHint)
           const response = await this.api.postMessageFx({
             answer: context.answer,
             answerOptions: context.answerOptions,
-            problemDescription: context.problemDescription,
+            problemDescription: context.problem,
             problemStandards: context.problemStandards,
             problemAnswer: context.problemAnswer,
             language: context.language,
             imageAltText: context.imageDescription,
             imageCdnId: context.imageCdnId,
             conversationId: cache[key].conversationId,
-            chatHistory,
             ...(isFreeText && { freeTextMessage: message }),
           })
 

package/src/features/chatbot/model/ChatBoxTextManager.ts

@@ -16,7 +16,6 @@ export class ChatBotTextManager {
     start: this.messagesCreator.createMessage('chat.howCanIHelp'),
     endMessage: this.messagesCreator.createMessage('chat.answerAgain'),
     anotherHintOption: this.messagesCreator.createOption('chat.anotherHint'),
-    wantHelp: this.messagesCreator.createOption('chat.wantHelp'),
   }
   private readonly defaultMessages = { ...this.messages }
 

package/src/features/chatbot/model/ChatbotApi.ts

@@ -13,7 +13,6 @@ export class ChatbotAPI {
   constructor(api: ChatbotApiRequests) {
     this.postMessageFx = createControllerEffect(api.postMessage)
     this.getAlternativesFx = createEffect(api.getAlternatives)
-    this.textToSpeechTextFx = createEffect(api.postTextToSpeech)
     this.translateTextFx = createEffect(
       async (payload: GoogleTranslatePayload): Promise<GoogleTranslateResponse> => {
         const response = await api.postTranslateText({
@@ -33,5 +32,6 @@ export class ChatbotAPI {
         }
       },
     )
+    this.textToSpeechTextFx = createEffect(api.postTextToSpeech)
   }
 }

package/src/features/chatbot/model/ChatbotTranslation.ts

@@ -153,7 +153,7 @@ export class ChatbotTranslation {
       }
 
       const defaultMessages = [this.defaultMessages.error, this.defaultMessages.endMessage]
-      const defaultOptions = [this.defaultMessages.anotherHintOption, this.defaultMessages.wantHelp]
+      const defaultOptions = [this.defaultMessages.anotherHintOption]
       const options = getOptionsForTranslation({ lastMessage: messages.at(-1), alternatives })
 
       const translatedTextsList = await this.translateRequest({

package/src/features/chatbot/model/ChatsCacheModel.ts

@@ -71,13 +71,6 @@ export class ChatsCacheModel {
     })
   }
 
-  public clearMessages(key: string) {
-    this.cache.setField({
-      key,
-      fn: (current) => (current ? { ...current, messages: [] } : undefined),
-    })
-  }
-
   public setSingleMessage(key: string, message: ConversationMessage) {
     this.cache.setField({
       key,

package/src/features/chatbot/types/api.types.ts

@@ -1,4 +1,5 @@
-import { ChatAnswer, Stroke } from './units.types'
+import { ChatAnswer, FullStrokeData, Stroke } from './units.types'
+import { ProblemStandard } from './model.types'
 
 export type GetAlternativesPayload = {
   municipalityId: string
@@ -10,15 +11,6 @@ export type AlternativesOptions = {
   hints: ChatAnswer[]
 }
 
-export type ChatHistory = { exerciseId: string; problemId: string; chatVersion?: string }
-
-export type ProblemStandard = {
-  id: string
-  name: string
-  description: string
-  numberOfMatchedSkills: number
-}
-
 export type GetAlternativesResponse = {
   /**
    * @deprecated chatAccess depends on assignment.lavaChat or class grade
@@ -31,15 +23,14 @@ export type GetAlternativesResponse = {
 }
 
 export type SendMessagePayload = {
-  message: string
-  altText?: string
-  answerOptions?: string[]
-  chatHistory?: ChatHistory
-  correctAnswer?: string | string[]
-  conversationId?: string
   problemDescription?: string
   problemStandards?: ProblemStandard[]
+  correctAnswer?: string | string[]
+  answerOptions?: string[]
+  altText?: string
   language?: string
+  message: string
+  conversationId?: string
 }
 
 export type SendMessageResponse = {
@@ -58,7 +49,6 @@ export type PostMessagePayload = {
   imageCdnId?: string
   freeTextMessage?: string
   conversationId?: string | null
-  chatHistory?: ChatHistory
 }
 
 export type PostMessageResponse = {
@@ -124,3 +114,13 @@ export type ChatHintResponse = {
   conversationId?: string | null
   errorStrokeIds?: string[]
 }
+export type ErrorSpottingPayload = {
+  strokes: FullStrokeData[]
+  problemDescription: string
+  correctAnswer: string[]
+  userAnswer: string | string[]
+  hint: string
+}
+export type ErrorSpottingResponse = {
+  highlightedStrokeIds: string[]
+}