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

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,16 +1,17 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { BORDER_RADIUS, COLORS } from '@magmamath/react-native-ui'
 
-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,
   isTranslated,
   t2sState,
+  withIcon,
   colorScheme = ColorScheme.Blue,
   withErrorSpotting,
   highlightedWordIndex,
@@ -20,6 +21,12 @@ export const ReceivedMessage = ({
 
   return (
     <View style={styles.container}>
+      {withIcon && (
+        <View style={styles.icon}>
+          <ChatbotIcon width={60} height={80} />
+        </View>
+      )}
+
       <View style={styles.message}>
         <MessageContent
           message={message}
@@ -40,15 +47,16 @@ 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,
-    // backgroundColor: COLORS.BLUE_6,
+  },
+  icon: {
+    alignSelf: 'flex-end',
+    marginRight: 8,
   },
   message: {
-    // backgroundColor: COLORS.BLUE_6,
     flex: 1,
     flexDirection: 'row',
     maxWidth: 305,
@@ -58,10 +66,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3,
     elevation: 3,
-    borderRadius: BORDER_RADIUS[300],
+    borderRadius: 8,
     borderBottomLeftRadius: 0,
     backgroundColor: '#F2F2F4',
-    // alignItems: 'flex-end',
-    // justifyContent: 'flex-end',
   },
 })

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/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/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[]
+}

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

@@ -2,6 +2,8 @@ import type { Store, StoreWritable } from 'effector'
 import {
   ChatHintPayload,
   ChatHintResponse,
+  ErrorSpottingPayload,
+  ErrorSpottingResponse,
   GetAlternativesPayload,
   GetAlternativesResponse,
   GoogleText2SpeechPayload,
@@ -10,7 +12,6 @@ import {
   GoogleTranslateResponse,
   PostMessagePayload,
   PostMessageResponse,
-  ProblemStandard,
   SendMessagePayload,
   SendMessageResponse,
 } from './api.types'
@@ -42,6 +43,10 @@ export type ChatbotApiRequests = {
   postTextToSpeech: (
     props: WithAbortSignal<GoogleText2SpeechPayload>,
   ) => Promise<GoogleText2SpeechResponse>
+  /**
+   * @deprecated merged with hint
+   */
+  spotError?: (props: ErrorSpottingPayload) => Promise<ErrorSpottingResponse>
 }
 
 type ChatbotSettings = {
@@ -65,14 +70,12 @@ export type SendHelpParams = {
   message: string
   translatedMessage?: string
   isFreeText?: boolean
-  skipOwnMessage?: boolean
 }
 
 export type SendHelpProps = SendHelpParams & {
   key: string
   context: ChatbotContext | null
   cache: Record<string, ChatItem>
-  alternatives?: GetAlternativesResponse | null
   isFreeText?: boolean
 }
 
@@ -126,15 +129,13 @@ export type IChatDrawBoardAdapter = {
 
 export type ChatbotContext = {
   language: string
-  problemDescription: string
+  problem: string
   problemAnswer: string[]
   translationTargetLanguage: string
-  assignmentId?: string
   answer?: string | string[]
   answerOptions?: string[]
   imageDescription?: string
   imageCdnId?: string
-  problemId?: string
   problemStandards?: ProblemStandard[]
 }
 
@@ -149,7 +150,7 @@ export enum ChatRequestType {
 
 type FreeTextWithConversationId = {
   type: ChatRequestType.FREETEXT
-  data: Pick<SendMessagePayload, 'message' | 'conversationId' | 'chatHistory'>
+  data: Pick<SendMessagePayload, 'message' | 'conversationId'>
 }
 
 type FreeTextNewConversation = {
@@ -162,4 +163,11 @@ export type HintRequest = {
   data: ChatHintPayload
 }
 
+export type ProblemStandard = {
+  id: string
+  name: string
+  description: string
+  numberOfMatchedSkills: number
+}
+
 export type ChatRequestPayload = FreeTextWithConversationId | FreeTextNewConversation | HintRequest

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

@@ -36,5 +36,4 @@ export type ChatItem = {
   isAvailable: boolean
   currentThread: IThreadItem | null
   conversationId?: string | null
-  hasBeenOpened?: boolean
 }

package/src/features/gifCelebrations/helpers.ts

@@ -52,6 +52,7 @@ export const generateProblemsGifsTable = (
     const selectedGif = unshownGif || gifsInGroup[0]
 
     if (selectedGif) {
+      selectedGif.isShown = true
       result[problemNumber] = {
         url: selectedGif.url,
         group: groupKey,

package/src/features/voice/constants.ts

@@ -0,0 +1,15 @@
+export const VOICE_RECORDER_CONTAINER_SIZES = {
+  COLLAPSED: 61,
+  EXPANDED: 152,
+}
+export const VOICE_RECORDER_MAX_DURATION_MS = 60000 // 1 minute
+export const VOICE_RECORDER_MIN_DURATION_MS = 300
+export enum VoiceRecorderState {
+  IDLE,
+  RECORDING,
+  PAUSED,
+}
+export const DROPDOWN_MAX_CONTENT_HEIGHT = 330
+export const TRANSCRIPT_RETRY_INTERVAL_MS = 4000
+export const TRANSCRIPT_MAX_RETRIES = 15
+export const NO_AUDIO_BE_MESSAGE = 'No audio'