@magmamath/students-features 0.9.107-rc.2 → 0.9.107-rc.21

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

@@ -1,4 +1,4 @@
-import React, { ComponentType, PropsWithChildren } from 'react'
+import React, { ComponentType, PropsWithChildren, useMemo } from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 
 import { ChatbotModel } from '../model/ChatBotModel'
@@ -18,6 +18,7 @@ type ChatbotProps = {
   }
   ButtonWrapper?: ComponentType<PropsWithChildren>
   iconSize?: { width: number; height: number } // TODO: use number instead
+  isInputDisabled?: boolean
   colorScheme?: ColorScheme
 }
 
@@ -25,6 +26,7 @@ export const Chatbot = ({
   model,
   isHintFeedback,
   isTextToSpeechEnabled = false,
+  isInputDisabled,
   textToSpeechConfig,
   ButtonWrapper,
   iconSize,
@@ -34,6 +36,14 @@ export const Chatbot = ({
   const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
   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)
 
@@ -48,14 +58,17 @@ export const Chatbot = ({
         colorScheme={colorScheme}
         isHintFeedback={isHintFeedback}
         isTextToSpeechEnabled={isTextToSpeechEnabled}
+        isInputDisabled={isInputDisabled}
+        MessageWrapper={ButtonWrapper}
       />
 
       <ChatControls
         model={model}
         onPressChatIcon={openChat}
         onPressClose={closeChat}
-        ButtonWrapper={ButtonWrapper}
         iconSize={iconSize}
+        ButtonWrapper={isInputDisabled ? undefined : ButtonWrapper}
+        shouldAnimateCloseButton={shouldAnimateCloseButton}
       />
     </ChatBotModelContext.Provider>
   )

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

@@ -7,7 +7,7 @@ import {
   restore,
   sample,
   type Store,
-  StoreWritable
+  StoreWritable,
 } from 'effector'
 import {
   ChatbotContext,
@@ -156,7 +156,12 @@ export class ChatbotModel {
         ...source,
       }),
       effect: createEffect(
-        ({ currentChatData, initOnly, chatAccess }: StartConversationFxData) => {
+        ({
+          currentChatData,
+          initOnly,
+          chatAccess,
+          withGreetingMessage = true,
+        }: StartConversationFxData) => {
           const { key, messages } = currentChatData
 
           if (!chatAccess) return
@@ -166,7 +171,7 @@ export class ChatbotModel {
             return this.reinitConversation({ key })
           }
           this.cache.add(key, {
-            messages: [this.defaultMessages.start],
+            messages: withGreetingMessage ? [this.defaultMessages.start] : [],
             isAvailable: true,
             currentThread: null,
           })
@@ -294,6 +299,10 @@ export class ChatbotModel {
     this.cache.setSingleMessage(key, { ...message, options })
   }
 
+  public addMessage({ key, ...message }: SetHintMessageProps) {
+    this.cache.addMessages(key, { messages: [message] })
+  }
+
   public readonly reinitConversation = ({ key }: ReinitConversationProps) => {
     this.cache.reinitChatThread(key, { initialOption: this.defaultMessages.anotherHintOption })
     this.threadManager.reset(key)

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

@@ -17,6 +17,10 @@ type AddMessagesProps = {
   thread?: ThreadItem | null
 }
 
+type AddMessageProps = {
+  message: ConversationMessage
+}
+
 export function defaultChatData(props: Partial<ChatItem> = {}): ChatItem {
   return {
     messages: [],

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

@@ -16,6 +16,7 @@ export type GetAlternativesResponse = {
    */
   chatAccess?: boolean
   isOpenChatEnabled?: boolean
+  municipalityChatEnable: boolean
   version: string
   options: AlternativesOptions
 }

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

@@ -75,6 +75,7 @@ export type SetHintMessageProps = {
 
 export type StartConversationProps = {
   initOnly?: boolean
+  withGreetingMessage?: boolean
 }
 
 export type StartConversationFxData = {

package/src/features/voiceRecord/components/VoiceRecord.tsx

@@ -1,8 +1,8 @@
 import { StyleProp, ViewStyle, StyleSheet } from 'react-native'
 import { VoiceRecordButton } from './VoiceRecordButton'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { COLORS, SPACING } from '@magmamath/react-native-ui'
-import { VoiceRecordDelete } from './VoiceRecordDelete'
+import { VoiceRecordDeleteButton } from './VoiceRecordDeleteButton'
 import { VoiceRecordDevider } from './VoiceRecordDevider'
 import VoiceRecordTimer from './VoiceRecordTimer'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
@@ -17,32 +17,43 @@ type VoiceRecordProps = {
 }
 
 export const VoiceRecord = ({ style, model }: VoiceRecordProps) => {
-  const { recorder, recorderState, player, startRecording, stopRecording } = useVoiceRecorder(model)
+  const { recorderState } = useVoiceRecorder(model)
+  const [isRecording, currentRecord] = useUnit([
+    model.recorderModel.$voiceRecordState,
+    model.$currentRecord,
+  ])
 
-  const { containerAnimatedStyle } = useVoiceRecorderAnimation(recorderState)
+  const isDisabled = useUnit(model.$isDisabled)
 
-  const availableInputs = useUnit(model.$availableInputs)
+  const isExpanded = !!(isRecording || currentRecord)
+
+  const { containerAnimatedStyle } = useVoiceRecorderAnimation(isExpanded)
+
+  const cleanup = async () => {
+    if (model.recorderModel.recorder.getStatus().isRecording) {
+      await model.recorderModel.recorder.stop()
+    }
+    model.recorderModel.reset()
+  }
+
+  useEffect(() => {
+    return () => {
+      cleanup()
+    }
+  }, [])
 
   return (
     <Animated.View style={[styles.container, style, containerAnimatedStyle]}>
-      <VoiceRecordButton
-        onPress={recorderState.isRecording ? stopRecording : startRecording}
-        isRecording={recorderState.isRecording}
-        noAudioInputs={!availableInputs.length}
-        model={model}
-      />
-      {recorderState.isRecording && (
+      <VoiceRecordButton model={model} />
+      {isExpanded && (
         <Animated.View entering={FadeIn} exiting={FadeOut} style={styles.expendedContainer}>
           <VoiceRecordTimer
             style={styles.timer}
-            time={
-              recorderState.durationMillis
-                ? new Date(recorderState.durationMillis).toISOString().substring(14, 19)
-                : '0:00'
-            }
+            model={model}
+            recordingFileDurationMs={recorderState.durationMillis}
           />
           <VoiceRecordDevider />
-          <VoiceRecordDelete onPress={() => model.deleteFile()} />
+          <VoiceRecordDeleteButton isDisabled={isDisabled} onPress={model.events.deleteRecord} />
         </Animated.View>
       )}
     </Animated.View>

package/src/features/voiceRecord/components/VoiceRecordButton.tsx

@@ -6,28 +6,38 @@ import {
   ButtonStyle,
   ButtonVariant,
 } from '@magmamath/react-native-ui'
-import { Pressable, View, ViewStyle } from 'react-native'
+import { Pressable, ViewStyle } from 'react-native'
 import { MicrophoneIcon, CheckIcon } from '@magmamath/react-native-ui'
 import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useUnit } from 'effector-react'
+import { VoiceRecorderState } from '../constants'
+import { useText } from '../../../shared/translation'
 
 type VoiceRecordButtonProps = {
   style?: ButtonStyle
-  onPress?: () => void
-  isRecording: boolean
-  disabled?: boolean
-  noAudioInputs?: boolean
   model: VoiceRecordModel
 }
 
-export const VoiceRecordButton = ({
-  style,
-  onPress,
-  isRecording,
-  disabled,
-  model,
-}: VoiceRecordButtonProps) => {
-  const noAvailabelInputs = useUnit(model.$availableInputs).length === 0
+export const VoiceRecordButton = ({ style, model }: VoiceRecordButtonProps) => {
+  const t = useText()
+
+  const noAvailabelInputs = useUnit(model.recorderModel.$availableInputs).length === 0
+  const voiceRecordState = useUnit(model.recorderModel.$voiceRecordState)
+  const currentKey = useUnit(model.$currentKey)
+  const isDisabled = useUnit(model.$isDisabled)
+
+  const onButtonPress = () => {
+    if (model.recorderModel.recorder.isRecording) {
+      model.recorderModel.stop()
+      return
+    }
+    if (model.collection.get(currentKey)) {
+      model.events.undoRecord()
+      return
+    }
+
+    model.initializeRecording()
+  }
 
   const combinedStyles = useMemo((): ButtonStyle => {
     return {
@@ -50,20 +60,26 @@ export const VoiceRecordButton = ({
         noAvailabelInputs
           ? (e) => {
               e.preventDefault()
-              model.showToast.warning('availableInputs')
+              model.notification.warning(t('voiceRecorder.noMicrophoneFound'))
             }
           : undefined
       }
       pointerEvents={noAvailabelInputs ? 'box-only' : 'auto'}
     >
       <Button
-        disabled={disabled || noAvailabelInputs}
-        onPress={onPress}
+        disabled={isDisabled || noAvailabelInputs}
+        onPress={onButtonPress}
         style={combinedStyles}
         size={ButtonSize.LARGE}
         variant={ButtonVariant.SECONDARY}
         colorScheme={ButtonColor.WHITE}
-        icon={isRecording ? <CheckIcon size={25} /> : <MicrophoneIcon size={19} />}
+        icon={
+          voiceRecordState === VoiceRecorderState.RECORDING ? (
+            <CheckIcon size={25} />
+          ) : (
+            <MicrophoneIcon size={19} />
+          )
+        }
       />
     </Pressable>
   )

package/src/features/voiceRecord/components/{VoiceRecordDelete.tsx → VoiceRecordDeleteButton.tsx}

@@ -1,15 +1,16 @@
 import { StyleSheet, TouchableOpacity } from 'react-native'
-import { TrashcanIcon } from '@magmamath/react-native-ui'
+import { COLORS, TrashcanIcon } from '@magmamath/react-native-ui'
 import React from 'react'
 
 type VoiceRecordDeleteProps = {
   onPress?: () => void
+  isDisabled?: boolean
 }
 
-export const VoiceRecordDelete = ({ onPress }: VoiceRecordDeleteProps) => {
+export const VoiceRecordDeleteButton = ({ onPress, isDisabled }: VoiceRecordDeleteProps) => {
   return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
-      <TrashcanIcon size={20} />
+    <TouchableOpacity style={styles.container} onPress={onPress} disabled={isDisabled}>
+      <TrashcanIcon size={20} color={isDisabled ? COLORS.NEUTRAL_5 : COLORS.NEUTRAL_9} />
     </TouchableOpacity>
   )
 }

package/src/features/voiceRecord/components/VoiceRecordTimer.tsx

@@ -1,16 +1,32 @@
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import { COLORS, Typography } from '@magmamath/react-native-ui'
 import React from 'react'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+import { useUnit } from 'effector-react'
+import { formatDuration } from '../helpers'
 
 type VoiceRecordTimerProps = {
   style?: StyleProp<ViewStyle>
-  time: string
+  model: VoiceRecordModel
+  recordingFileDurationMs?: number
 }
 
-export const VoiceRecordTimer = ({ style, time }: VoiceRecordTimerProps) => {
+export const VoiceRecordTimer = ({
+  style,
+  model,
+  recordingFileDurationMs,
+}: VoiceRecordTimerProps) => {
+  const savedAudioFileDurationMs = useUnit(model.recorderModel.$audioFileDurationMs)
+
+  const displayDurationMs = recordingFileDurationMs
+    ? recordingFileDurationMs
+    : savedAudioFileDurationMs
+
   return (
     <View style={[styles.container, style]}>
-      <Typography style={styles.text}>{time}</Typography>
+      <Typography style={styles.text}>
+        {displayDurationMs ? formatDuration(displayDurationMs) : '0:00'}
+      </Typography>
     </View>
   )
 }

package/src/features/voiceRecord/constants.ts

@@ -2,3 +2,9 @@ export const VOICE_RECORDER_CONTAINER_SIZES = {
   COLLAPSED: 61,
   EXPANDED: 152,
 }
+export const VOICE_RECORDER_MAX_DURATION_MS = 300000 // 5 minutes
+export enum VoiceRecorderState {
+  IDLE,
+  RECORDING,
+  PAUSED,
+}

package/src/features/voiceRecord/helpers.ts

@@ -1,9 +1,19 @@
 import { IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
 import {
+  AudioPlayer,
   AudioRecorder,
+  createAudioPlayer,
   getRecordingPermissionsAsync,
   requestRecordingPermissionsAsync,
 } from 'expo-audio'
+import { AudioApi } from './types'
+
+export const formatDuration = (ms: number): string => {
+  const totalSeconds = Math.floor(ms / 1000)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`
+}
 
 export const ensureRecordingPermissions = async () => {
   const { status } = await getRecordingPermissionsAsync()
@@ -33,7 +43,7 @@ export const getAvailableInputs = async (recorder: AudioRecorder) => {
   return []
 }
 
-export const addInputsListenerWeb = (callback: (devices: MediaDeviceInfo[]) => void) => {
+export const addAudioInputsListenerWeb = (callback: (devices: MediaDeviceInfo[]) => void) => {
   if (!IS_WEB || !navigator.mediaDevices?.addEventListener) {
     return () => {}
   }
@@ -51,3 +61,107 @@ export const addInputsListenerWeb = (callback: (devices: MediaDeviceInfo[]) => v
     navigator.mediaDevices.removeEventListener('devicechange', handleDeviceChange)
   }
 }
+/**
+ *
+ * @param fileUri
+ * @param externalPlayer - is optional expo-audio player, but should be provided
+ * because creating player is resource consuming operation
+ */
+export const getAudioDurationMs = (
+  fileUri: string,
+  externalPlayer?: AudioPlayer,
+): Promise<number | undefined> => {
+  if (!fileUri) return Promise.resolve(undefined)
+
+  const player = externalPlayer ?? createAudioPlayer()
+  const isInternalPlayer = !externalPlayer
+
+  player.replace(fileUri)
+
+  return new Promise((resolve, reject) => {
+    const subscription = player.addListener('playbackStatusUpdate', () => {
+      if (player.duration !== undefined && player.duration > 0) {
+        subscription.remove()
+
+        // player.duration is in seconds (e.g., 1.234567)
+        const durationMs = Math.round(player.duration * 1000) // convert to milliseconds
+
+        if (isInternalPlayer) {
+          player.remove()
+        }
+
+        resolve(durationMs)
+      }
+    })
+
+    setTimeout(() => {
+      subscription.remove()
+
+      if (isInternalPlayer) {
+        player.remove()
+      }
+
+      reject(new Error('Timeout loading audio metadata'))
+    }, 3000)
+  })
+}
+
+type GenerateAudioFormDataParams = {
+  audioFileUri: string
+  durationMs?: number
+  fileName?: string
+}
+
+export const generateAudioFormData = async ({
+  audioFileUri,
+  durationMs,
+  fileName,
+}: GenerateAudioFormDataParams): Promise<FormData> => {
+  //todo: add web or ios prefix to filename
+
+  const formData = new FormData()
+  const duration = durationMs?.toString() || '0'
+
+  if (IS_WEB) {
+    const response = await fetch(audioFileUri)
+    const blob = await response.blob()
+    const filename = fileName || 'solution_voice_record.webm'
+
+    formData.append('file', blob, filename)
+    formData.append('filename', filename)
+    formData.append('duration', duration)
+
+    return formData
+  }
+
+  const filename = fileName || audioFileUri.split('/').pop() || 'solution_voice_record.m4a'
+  const file = {
+    uri: audioFileUri,
+    type: 'audio/m4a',
+    name: filename,
+  } as any
+
+  formData.append('file', file, filename)
+  formData.append('filename', filename)
+  formData.append('duration', duration)
+
+  return formData
+}
+
+export const uploadAudioFileRequestGenerator = (audioFileFormData: FormData, api: AudioApi) => {
+  const controller = new AbortController()
+
+  return {
+    uploadAudio: () =>
+      api.uploadAudioFile(
+        {
+          audioFileFormData,
+        },
+        //@ts-ignore
+        {
+          signal: controller.signal,
+        },
+      ),
+    controller,
+  }
+}

package/src/features/voiceRecord/hooks/useVoiceRecorder.ts

@@ -1,63 +1,77 @@
 import {
   RecordingPresets,
-  setAudioModeAsync,
   useAudioPlayer,
   useAudioRecorder,
   useAudioRecorderState,
 } from 'expo-audio'
-import { addInputsListenerWeb, ensureRecordingPermissions, getAvailableInputs } from '../helpers'
+import { addAudioInputsListenerWeb, getAudioDurationMs, getAvailableInputs } from '../helpers'
 import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useEffect } from 'react'
+import { IS_WEB } from '@magmamath/react-native-ui'
+import { VOICE_RECORDER_MAX_DURATION_MS, VoiceRecorderState } from '../constants'
+import { useUnit } from 'effector-react'
 
 export const useVoiceRecorder = (model: VoiceRecordModel) => {
-  const recorder = useAudioRecorder(RecordingPresets.LOW_QUALITY, (status) =>
-    console.log('Recording status:', status),
-  )
-  const recorderState = useAudioRecorderState(recorder)
-
   const player = useAudioPlayer()
+  const currentRecord = useUnit(model.$currentRecord)
 
-  const startRecording = async () => {
-    if (!(await ensureRecordingPermissions())) return model.showToast.error('No microphone access')
+  const recorder = useAudioRecorder(RecordingPresets.LOW_QUALITY, model.recordingStatusUpdate)
+  const recorderState = useAudioRecorderState(recorder)
 
-    await recorder.prepareToRecordAsync()
+  useEffect(() => {
+    if (
+      recorderState.durationMillis >= VOICE_RECORDER_MAX_DURATION_MS &&
+      recorderState.isRecording
+    ) {
+      model.recorderModel.stop()
+    }
+  }, [recorderState.durationMillis])
 
-    if (await getAvailableInputs(recorder).then((inputs) => inputs.length === 0)) {
-      return model.showToast.error('No microphone found')
+  useEffect(() => {
+    if (!IS_WEB) {
+      //only once for iPad and listener for WEB
+      getAvailableInputs(recorder).then((inputs) => {
+        model.recorderModel.setAvailableInputs(inputs)
+      })
+      return
     }
-    const availabelInputs = await getAvailableInputs(recorder)
-    console.log('availabelInputs: ', availabelInputs)
-    await setAudioModeAsync({
-      playsInSilentMode: true,
-      allowsRecording: true,
-    })
 
-    recorder.record()
-  }
+    const removeListener = addAudioInputsListenerWeb((devices) => {
+      model.recorderModel.setAvailableInputs(devices)
+    })
 
-  const stopRecording = async () => {
-    await recorder.stop()
-    recorder.uri && console.log('Recording stopped and stored at', recorder.uri)
+    return removeListener
+  }, [])
 
-    player.replace(recorder.uri)
-    player.play()
-  }
+  useEffect(() => {
+    if (currentRecord?.uri) {
+      const getDuration = async () => {
+        const durationMs = await getAudioDurationMs(currentRecord.uri!, player)
+        model.recorderModel.setAudioFileDurationMs(durationMs || 0)
+      }
+      getDuration()
+    }
+  }, [currentRecord?.uri])
 
   useEffect(() => {
-    model.setIsRecording(recorderState.isRecording)
+    if (recorderState.isRecording) {
+      model.recorderModel.setVoiceRecordState(VoiceRecorderState.RECORDING)
+      return
+    }
+    if (recorderState.durationMillis > 0) {
+      model.recorderModel.setVoiceRecordState(VoiceRecorderState.PAUSED)
+      return
+    }
+    model.recorderModel.setVoiceRecordState(VoiceRecorderState.IDLE)
 
     return () => {
-      model.resetIsRecording()
+      model.recorderModel.reset()
     }
-  }, [recorderState.isRecording])
+  }, [recorderState])
 
   useEffect(() => {
-    const removeListener = addInputsListenerWeb((devices) => {
-      model.setAvailableInputs(devices)
-    })
-
-    return removeListener
-  }, [])
+    model.recorderModel.recorder = recorder
+  }, [recorder])
 
-  return { recorder, recorderState, player, startRecording, stopRecording }
+  return { recorderState }
 }

package/src/features/voiceRecord/hooks/useVoiceRecorderAnimation.ts

@@ -1,12 +1,11 @@
 import { useAnimatedStyle, withTiming } from 'react-native-reanimated'
 import { VOICE_RECORDER_CONTAINER_SIZES } from '../constants'
-import { RecorderState } from 'expo-audio'
 
-export const useVoiceRecorderAnimation = (recorderState: RecorderState) => {
+export const useVoiceRecorderAnimation = (isExpanded: boolean) => {
   const containerAnimatedStyle = useAnimatedStyle(() => {
     return {
       height: withTiming(
-        recorderState.isRecording
+        isExpanded
           ? VOICE_RECORDER_CONTAINER_SIZES.EXPANDED
           : VOICE_RECORDER_CONTAINER_SIZES.COLLAPSED,
         {
@@ -14,7 +13,7 @@ export const useVoiceRecorderAnimation = (recorderState: RecorderState) => {
         },
       ),
     }
-  }, [recorderState])
+  }, [isExpanded])
 
   return { containerAnimatedStyle }
 }

package/src/features/voiceRecord/index.ts

@@ -1,2 +1,6 @@
 export * from './components/VoiceRecord'
 export * from './model/VoiceRecord.model'
+export * from './modal/VoiceRecordDeleteModal'
+export * from './modal/VoiceRecordUndoModal'
+export * from './constants'
+export * from './types'