@magmamath/students-features 0.9.9 → 0.9.14-rc.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.9.9",
+  "version": "0.9.14-rc.10",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",

package/src/features/celebrations/helpers.ts

@@ -1,39 +1,41 @@
-import { ParticlesBatch } from './components/ParticleBatch';
-import { Spark } from './components/Spark';
-import { CELEBRATION_ICON_CONFIG, CELEBRATION_VARIANTS } from './config';
-import { CelebrationVariant } from './types';
+import { ParticlesBatch } from './components/ParticleBatch'
+import { Spark } from './components/Spark'
+import { CELEBRATION_ICON_CONFIG, CELEBRATION_VARIANTS } from './config'
+import { CelebrationVariant } from './types'
 
-export const randomRange = (min: number, max: number) => Math.random() * (max - min) + min;
+export const randomRange = (min: number, max: number) => Math.random() * (max - min) + min
 
 const isDateInRange = (currentDate: Date, startDateStr: string, endDateStr: string) => {
-  const [startDay, startMonth] = startDateStr.split('-').map(Number);
-  const [endDay, endMonth] = endDateStr.split('-').map(Number);
+  const [startDay, startMonth] = startDateStr.split('-').map(Number)
+  const [endDay, endMonth] = endDateStr.split('-').map(Number)
 
-  const currentYear = currentDate.getFullYear();
-  const startDate = new Date(currentYear, startMonth - 1, startDay);
-  const endDate = new Date(currentYear, endMonth - 1, endDay + 1);
+  const currentYear = currentDate.getFullYear()
+  const startDate = new Date(currentYear, startMonth - 1, startDay)
 
-  return currentDate >= startDate && currentDate <= endDate;
-};
+  // If end month is earlier than start month, it spans to next year
+  const endYear = endMonth < startMonth ? currentYear + 1 : currentYear
+  const endDate = new Date(endYear, endMonth - 1, endDay + 1)
+
+  return currentDate >= startDate && currentDate <= endDate
+}
 
 export const getIconForCurrentDate = () => {
-  const currentDate = new Date();
+  const currentDate = new Date()
 
   for (const celebration of CELEBRATION_ICON_CONFIG) {
     if (celebration.activePeriod) {
-      const { start, end } = celebration.activePeriod;
+      const { start, end } = celebration.activePeriod
       if (isDateInRange(currentDate, start, end)) {
-        return celebration.Icon;
+        return celebration.Icon
       }
     }
   }
 
-  return CELEBRATION_ICON_CONFIG[0].Icon;
-};
+  return CELEBRATION_ICON_CONFIG[0].Icon
+}
 
-const MainIcon = getIconForCurrentDate();
-export const generateParticle = (variant: CelebrationVariant
-) => {
+const MainIcon = getIconForCurrentDate()
+export const generateParticle = (variant: CelebrationVariant) => {
   const {
     elementsCount,
     angle,
@@ -44,20 +46,20 @@ export const generateParticle = (variant: CelebrationVariant
     friction,
     life,
     angularAcceleration,
-    speedRange
-  } = CELEBRATION_VARIANTS[variant];
+    speedRange,
+  } = CELEBRATION_VARIANTS[variant]
 
   const sparkSpeedMin = speedRange?.spark?.[0]
   const sparkSpeedMax = speedRange?.spark?.[1]
   const mainSpeedMin = speedRange?.main?.[0]
   const mainSpeedMax = speedRange?.main?.[1]
 
-  const particles: ParticlesBatch[] = [];
+  const particles: ParticlesBatch[] = []
 
   for (let i = 0; i < elementsCount.spark; i++) {
-    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180);
-    const randomSpeed = randomRange(sparkSpeedMin, sparkSpeedMax);
-    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to);
+    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180)
+    const randomSpeed = randomRange(sparkSpeedMin, sparkSpeedMax)
+    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to)
 
     particles.push({
       id: Math.random(),
@@ -74,12 +76,12 @@ export const generateParticle = (variant: CelebrationVariant
       friction,
       Component: Spark,
       life,
-    });
+    })
   }
   for (let i = 0; i < elementsCount.star; i++) {
-    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180);
-    const randomSpeed = randomRange(mainSpeedMin, mainSpeedMax);
-    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to);
+    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180)
+    const randomSpeed = randomRange(mainSpeedMin, mainSpeedMax)
+    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to)
 
     particles.push({
       id: Math.random(),
@@ -96,8 +98,8 @@ export const generateParticle = (variant: CelebrationVariant
       friction,
       Component: MainIcon,
       life,
-    });
+    })
   }
 
-  return particles;
-};
+  return particles
+}

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

@@ -30,14 +30,14 @@ export const Chatbot = ({
   iconSize,
   colorScheme = ColorScheme.Blue,
 }: ChatbotProps) => {
-  const alternatives = useUnit(model.$alternatives)
+  const isChatAllowed = useUnit(model.$chatAccess)
   const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
   model.t2s.setAudioConfig(textToSpeechConfig ?? null)
 
   const openChat = () => model.setIsOpen(true)
   const closeChat = () => model.setIsOpen(false)
 
-  if (!isAvailable || alternatives?.chatAccess === false) {
+  if (!isAvailable || !isChatAllowed) {
     return null
   }
 

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

@@ -7,6 +7,7 @@ import {
   restore,
   sample,
   type Store,
+  StoreWritable
 } from 'effector'
 import {
   ChatbotContext,
@@ -74,14 +75,18 @@ export class ChatbotModel {
 
   private readonly cache = new ChatsCacheModel()
 
+  public readonly $chatAccess: StoreWritable<boolean>
+
   public readonly $currentChatData = combine(
     { data: this.cache.$data, key: this.$currentKey },
     ({ data, key }) => (data[key] ? { ...data[key], key } : { ...defaultChatData(), key }),
   )
 
-  constructor({ api, $key, threadMessagesLimit, settings = {} }: ChatbotModelProps) {
+  constructor({ api, $key, threadMessagesLimit, settings = {}, chatAccess }: ChatbotModelProps) {
     this.api = new ChatbotAPI({ ...api, postMessage: this.threadManager.postMessage })
 
+    this.$chatAccess = chatAccess
+
     this.threadManager.setApi({ getHint: api.requestHint, sendMessage: api.sendMessage })
     if (threadMessagesLimit) {
       this.threadManager.setMessagesLimit(threadMessagesLimit)
@@ -145,16 +150,16 @@ export class ChatbotModel {
     }
 
     this.startConversation = attach({
-      source: { currentChatData: this.$currentChatData, alternatives: this.$alternatives },
+      source: { currentChatData: this.$currentChatData, chatAccess: this.$chatAccess },
       mapParams: (props: StartConversationProps | void, source) => ({
         ...props,
         ...source,
       }),
       effect: createEffect(
-        ({ currentChatData, alternatives, initOnly }: StartConversationFxData) => {
+        ({ currentChatData, initOnly, chatAccess }: StartConversationFxData) => {
           const { key, messages } = currentChatData
 
-          if (!alternatives?.chatAccess) return
+          if (!chatAccess) return
 
           if (messages.length) {
             if (initOnly) return
@@ -171,7 +176,7 @@ export class ChatbotModel {
 
     this.api.getAlternativesFx.doneData.watch((alternatives) => {
       // Use short text for another hint option if openChatEnabled
-      if (alternatives?.chatAccess && alternatives?.isOpenChatEnabled && IS_WEB) {
+      if (alternatives?.isOpenChatEnabled && IS_WEB) {
         this.textManager.update((creator) => ({
           anotherHintOption: creator.createOption('chat.giveHintOpenChat'),
         }))

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

@@ -86,11 +86,12 @@ export class ChatTextToSpeechModel {
           input: { text },
           voice: config?.voice ?? DEFAULT_VOICE,
           audioConfig: config?.audioConfig ?? AUDIO_CONFIG,
+          enableTimePointing: [],
         })
 
         // Response might be different type based on provided AUDIO_CONFIG
-        if (typeof response === 'string') {
-          audioPath = `data:audio/mpeg;base64,${response}`
+        if (typeof response.audioContent === 'string') {
+          audioPath = `data:audio/mpeg;base64,${response.audioContent}`
         } else {
           audioPath = response?.audioContent ?? ''
         }

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

@@ -11,6 +11,9 @@ export type AlternativesOptions = {
 }
 
 export type GetAlternativesResponse = {
+  /**
+   * @deprecated chatAccess depends on assignment.lavaChat or class grade
+   */
   chatAccess?: boolean
   isOpenChatEnabled?: boolean
   version: string
@@ -56,6 +59,7 @@ export type PostMessageResponse = {
 export type GoogleTranslatePayload = {
   text: string[]
   targetLanguage: string
+  sourceLanguage?: string
 }
 
 export type GoogleTranslateResponse = {
@@ -77,9 +81,18 @@ export type GoogleText2SpeechPayload = {
     pitch: number
     speakingRate: number
   }
+  enableTimePointing?: string[]
 }
 
-export type GoogleText2SpeechResponse = string | undefined | { audioContent?: string }
+export type Timepoint = {
+  markName: string
+  timeSeconds: number
+}
+
+export type GoogleText2SpeechResponse = {
+  audioContent?: string
+  timepoints?: Timepoint[]
+}
 
 export type ChatHintPayload = {
   problemDescription: string

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

@@ -1,4 +1,4 @@
-import type { Store } from 'effector'
+import type { Store, StoreWritable } from 'effector'
 import {
   ChatHintPayload,
   ChatHintResponse,
@@ -17,6 +17,7 @@ import {
 } from './api.types'
 import { ExtendWithOptional } from '../../../lib/helpers/types'
 import { ChatAnswer, ChatItem, ConversationMessage, FullStrokeData } from './units.types'
+import { WithAbortSignal } from '../../../lib/types/requests'
 
 export type ChatbotMessages = {
   error: ConversationMessage
@@ -27,10 +28,14 @@ export type ChatbotMessages = {
 
 export type ChatbotApiRequests = {
   getAlternatives: (props: GetAlternativesPayload) => Promise<GetAlternativesResponse>
-  sendMessage: (props: SendMessagePayload) => Promise<SendMessageResponse>
-  postMessage: (props: PostMessagePayload) => Promise<PostMessageResponse>
-  postTranslateText: (props: GoogleTranslatePayload) => Promise<GoogleTranslateResponse>
-  postTextToSpeech: (props: GoogleText2SpeechPayload) => Promise<GoogleText2SpeechResponse>
+  sendMessage: (props: WithAbortSignal<SendMessagePayload>) => Promise<SendMessageResponse>
+  postMessage: (props: WithAbortSignal<PostMessagePayload>) => Promise<PostMessageResponse>
+  postTranslateText: (
+    props: WithAbortSignal<GoogleTranslatePayload>,
+  ) => Promise<GoogleTranslateResponse>
+  postTextToSpeech: (
+    props: WithAbortSignal<GoogleText2SpeechPayload>,
+  ) => Promise<GoogleText2SpeechResponse>
   /**
    * @deprecated merged with hint
    */
@@ -47,6 +52,7 @@ export type ChatbotModelProps = {
     requestHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
   }
   threadMessagesLimit?: number
+  chatAccess: StoreWritable<boolean>
   settings?: ChatbotSettings
 }
 
@@ -77,6 +83,7 @@ export type StartConversationFxData = {
     messages: ConversationMessage[]
   }
   alternatives?: GetAlternativesResponse | null
+  chatAccess: boolean
 } & StartConversationProps
 
 export enum MessageVariant {

package/src/features/endOfAssignment/ui/PracticeButtonGroup.tsx

@@ -11,7 +11,6 @@ import Animated, {
 import { ButtonVariant, SPACING, Button, ButtonSize, ButtonColor } from '@magmamath/react-native-ui'
 
 import { PracticeButton } from './PracticeButton'
-import { getEoaButtonColor } from '../helpers'
 
 type PracticeButtonGroupProps = {
   textContent: { leftButtonText?: string; rightButtonText?: string }
@@ -21,6 +20,8 @@ type PracticeButtonGroupProps = {
   buttonColor?: ButtonColor
 }
 
+const APPEARANCE_DELAY = 1600
+
 export const PracticeButtonGroup = ({
   textContent,
   isPracticeButtonVisible,
@@ -31,7 +32,7 @@ export const PracticeButtonGroup = ({
   const buttonsContainerOpacity = useSharedValue(0)
 
   useEffect(() => {
-    buttonsContainerOpacity.value = withDelay(1000, withTiming(1, { duration: 500 }))
+    buttonsContainerOpacity.value = withDelay(APPEARANCE_DELAY, withTiming(1, { duration: 500 }))
   }, [])
 
   return (
@@ -39,7 +40,7 @@ export const PracticeButtonGroup = ({
       <Animated.View
         entering={
           isPracticeButtonVisible
-            ? FadeInRight.delay(1000).duration(500).easing(Easing.ease)
+            ? FadeInRight.delay(APPEARANCE_DELAY).duration(500).easing(Easing.ease)
             : FadeInUp.duration(500)
         }
       >

package/src/features/feedback/model/model.ts

@@ -11,7 +11,10 @@ export type TeacherFeedbackModelProps = {
     getComments: (props: GetCommentsPayload) => Promise<GetCommentsResponse>
     updateCommentStatusSeen: (props: UpdateCommentStatusSeenPayload) => Promise<void>
   }
-  socket: any
+  /**
+   * @deprecated - use socket and events directly in the client
+   */
+  socket?: any
   credits: {
     $assignmentId: Store<string>
     $problemId: Store<string>

package/src/features/feedback/model/sockets.ts

@@ -2,21 +2,23 @@ import { createEvent } from 'effector'
 import { TeacherComment, FeedbackSocketEvents } from '../types'
 
 export class TeacherFeedbackSockets {
-  private readonly socket: any
+  private readonly socket: any = null
   public readonly commentAdded = createEvent<TeacherComment>()
   public readonly commentDeleted = createEvent<TeacherComment>()
 
   constructor(socket: any) {
-    this.socket = socket
+    if (socket) {
+      this.socket = socket
+    }
   }
 
   connect() {
-    this.socket.on(FeedbackSocketEvents.COMMENT_ADDED, this.commentAdded)
-    this.socket.on(FeedbackSocketEvents.COMMENT_DELETED, this.commentDeleted)
+    this.socket?.on(FeedbackSocketEvents.COMMENT_ADDED, this.commentAdded)
+    this.socket?.on(FeedbackSocketEvents.COMMENT_DELETED, this.commentDeleted)
   }
 
   off() {
-    this.socket.off(FeedbackSocketEvents.COMMENT_ADDED, this.commentAdded)
-    this.socket.off(FeedbackSocketEvents.COMMENT_DELETED, this.commentDeleted)
+    this.socket?.off(FeedbackSocketEvents.COMMENT_ADDED, this.commentAdded)
+    this.socket?.off(FeedbackSocketEvents.COMMENT_DELETED, this.commentDeleted)
   }
 }

package/src/features/keyboard/components/BasicLayout/keyboardGroups.ts

@@ -58,3 +58,7 @@ export const MATH_CURRENCY_US_KEYBOARD_GROUP: KeyboardGroup = {
   id: MathEntryKeyboardGroupId.CURRENCY_US,
   keys: [MATH_CURRENCY_UNITS.DOLLAR, MATH_CURRENCY_UNITS.CENT],
 }
+export const MATH_CURRENCY_DE_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.CURRENCY_DE,
+  keys: [MATH_CURRENCY_UNITS.EURO, MATH_CURRENCY_UNITS.DOLLAR, MATH_CURRENCY_UNITS.POUND],
+}

package/src/features/keyboard/components/Keyboard.tsx

@@ -1,12 +1,15 @@
-import React, { useMemo } from 'react'
-import { StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
-import { COLORS, IS_MOBILE, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
-import { KeyboardKey, KeyboardKeyValue } from '../types/types'
+import React, { useEffect, useMemo, useRef } from 'react'
+import { Animated, StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
+import { COLORS, IS_MOBILE, IS_WEB, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
+import { KeyboardKey, KeyboardKeyValue } from '../types'
 import { Numpad } from './Numpad/Numpad'
+import { MainLayout } from './MainLayout/MainLayout'
+import {
+  getLayoutConfigStyles,
+  KEYBOARD_SLIDE_DISTANCE,
+  slideInAnimationSettings,
+} from './MainLayout/constants'
 import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
-import { getLayoutConfigStyles } from './constants'
-import { MainLayout } from './MainLayout'
-import Animated, { SlideInDown } from 'react-native-reanimated'
 
 type KeyboardProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -14,11 +17,19 @@ type KeyboardProps = {
   style?: StyleProp<ViewStyle>
   color?: SelectOptionColor
   isDisabled?: boolean
+  isMainLayoutDisabled?: boolean
   showUnderlinedKeys?: boolean
   disabledKeys?: KeyboardKey[]
 }
 
-export const Keyboard = ({ style, characterType, ...props }: KeyboardProps) => {
+export const Keyboard = ({
+  style,
+  characterType,
+  isMainLayoutDisabled,
+  ...props
+}: KeyboardProps) => {
+  const slideAnim = useRef(new Animated.Value(KEYBOARD_SLIDE_DISTANCE)).current
+
   const { width } = useWindowDimensions()
   const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
   const mobileStyles = useMemo(
@@ -26,12 +37,34 @@ export const Keyboard = ({ style, characterType, ...props }: KeyboardProps) => {
     [characterType, isMobile],
   )
 
+  useEffect(() => {
+    const anim = Animated.spring(slideAnim, {
+      ...slideInAnimationSettings,
+      mass: 1,
+      velocity: 0,
+      useNativeDriver: !IS_WEB,
+    })
+
+    anim.start()
+
+    return () => anim.stop()
+  }, [])
+
   return (
     <Animated.View
-      style={[styles.container, style]}
-      entering={SlideInDown.damping(40).stiffness(320)}
+      style={[
+        styles.container,
+        style,
+        {
+          transform: [{ translateY: slideAnim }],
+        },
+      ]}
     >
-      <MainLayout {...props} characterType={characterType} />
+      <MainLayout
+        {...props}
+        isDisabled={isMainLayoutDisabled || props.isDisabled}
+        characterType={characterType}
+      />
       <Numpad {...props} style={mobileStyles} />
     </Animated.View>
   )

package/src/features/keyboard/components/KeysList/KeysList.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import { StyleSheet } from 'react-native'
 import {
   ButtonStyle,
   SelectGroup,

package/src/features/keyboard/components/{MainLayout.tsx → MainLayout/MainLayout.tsx}

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
 import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { SelectOptionColor, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
-import { getLayoutByCharType } from '../constants/keyboardLayouts'
-import { KeyboardKey, KeyboardKeyValue } from '../types/types'
-import { UnderlinedLayout } from './UnderlinedLayout/UnderlinedLayout'
-import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
+import { getLayoutByCharType, isBasicPlusPlusLayout } from '../../constants/keyboardLayouts'
+import { KeyboardKey, KeyboardKeyValue } from '../../types/types'
+import { UnderlinedLayout } from '../UnderlinedLayout/UnderlinedLayout'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
 
 type LayoutProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -60,11 +60,11 @@ export const MainLayout = ({
   }, [showUnderlinedKeys, animateFade])
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, IS_MOBILE && { flex: 1 }]}>
       <Layout {...props} onLayoutChange={setIsSecondaryLayoutSelected} />
       {isUnderlinedLayoutVisible && (
         <Animated.View style={{ opacity: fadeAnim }}>
-          <UnderlinedLayout {...props} />
+          <UnderlinedLayout {...props} showSlashKey={!isBasicPlusPlusLayout(characterType)} />
         </Animated.View>
       )}
     </View>
@@ -74,6 +74,5 @@ export const MainLayout = ({
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    flex: 1,
   },
 })

package/src/features/keyboard/components/{constants.ts → MainLayout/constants.ts}

@@ -1,5 +1,5 @@
 import { COLORS, SPACING } from '@magmamath/react-native-ui'
-import { KEYBOARD_LAYOUTS } from '../constants/keyboardLayouts'
+import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 
 export const KEYBOARD_SLIDE_DISTANCE = 600
 
@@ -20,3 +20,8 @@ export const getLayoutConfigStyles = (characterType?: number, isMobile?: boolean
 
   return LAYOUT_STYLES_CONFIG.DEFAULT
 }
+export const slideInAnimationSettings = {
+  toValue: 0,
+  stiffness: 320,
+  damping: 40,
+}

package/src/features/keyboard/components/UnderlinedLayout/UnderlinedLayout.tsx

@@ -4,9 +4,14 @@ import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
 import { getKeyboardGroup } from '../../helpers'
 
-export const UnderlinedLayout = (props: KeyboardLayoutProps) => {
+type UnderlinedLayoutProps = {
+  showSlashKey?: boolean
+} & KeyboardLayoutProps
+
+export const UnderlinedLayout = (props: UnderlinedLayoutProps) => {
   const t = useText()
   const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Underlined)
+  const keys = props.showSlashKey ? keysGroup.keys : keysGroup.keys.slice(0, -1)
 
-  return <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
+  return <KeysList keys={keys} numOfRows={props.showSlashKey ? 2 : keys.length} {...props} />
 }

package/src/features/keyboard/components/UnderlinedLayout/keyboardGroups.ts

@@ -1,12 +1,14 @@
 import { KeyboardGroup } from '../../types/types'
 import { MathEntryKeyboardGroupId } from '../../types/keyboardGroupIds'
 import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
+import { MATH_SPECIAL_OPERATORS } from '../../types/MathKeysGroups/specialOperators'
 
 export const MATH_ENTRY_UNDERLINED_KEYBOARD_GROUP: KeyboardGroup = {
   id: MathEntryKeyboardGroupId.UNDERLINED,
   keys: [
-    MATH_BASIC_OPERATORS.UNDERLINED_TEN,
-    MATH_BASIC_OPERATORS.UNDERLINED_ONE,
-    MATH_BASIC_OPERATORS.UNDERLINED_U,
+    MATH_SPECIAL_OPERATORS.UNDERLINED_TEN,
+    MATH_SPECIAL_OPERATORS.UNDERLINED_U,
+    MATH_SPECIAL_OPERATORS.UNDERLINED_ONE,
+    MATH_BASIC_OPERATORS.SLASH,
   ],
 }

package/src/features/keyboard/components/UnitsLayout/UnitsLayout.tsx

@@ -62,6 +62,7 @@ const styles = StyleSheet.create({
     flexDirection: IS_MOBILE ? 'column' : 'row',
     gap: 16,
     paddingRight: 16,
+    flex: 1,
   },
   option: {
     flexBasis: 45,

package/src/features/keyboard/components/UnitsLayout/helpers.tsx

@@ -50,3 +50,6 @@ export const getSelectOptions = ({
     ]
   }
 }
+
+export const isKeyboardUnitsGroupType = (k: string): k is KeyboardUnitsGroupType =>
+  (Object.values(KeyboardUnitsGroupType) as string[]).includes(k)

package/src/features/keyboard/components/UnitsLayout/hooks/useUnitTabs.ts

@@ -1,32 +1,43 @@
 import { useText } from '../../../../../shared/translation'
 import { useMemo, useState } from 'react'
+import { KeyboardUnitsGroupType, UnitTab } from '../types'
+import { useWindowDimensions } from 'react-native'
 import { TabOptionProps } from '@magmamath/react-native-ui'
-
-import { KeyboardUnitsGroupType } from '../types'
+import { isKeyboardUnitsGroupType } from '../helpers'
 
 export const useUnitTabs = () => {
   const t = useText()
-  const tabs = useMemo(
+  const { width } = useWindowDimensions()
+
+  const allTabs = useMemo<UnitTab[]>(
     () => [
-      {
-        title: t('keyboard.length'),
-        key: KeyboardUnitsGroupType.LENGTH,
-      },
-      {
-        title: t('keyboard.area'),
-        key: KeyboardUnitsGroupType.AREA,
-      },
-      {
-        title: t('keyboard.volume'),
-        key: KeyboardUnitsGroupType.VOLUME,
-      },
-      {
-        title: t('keyboard.weight'),
-        key: KeyboardUnitsGroupType.WEIGHT,
-      },
+      { title: t('keyboard.length'), key: KeyboardUnitsGroupType.LENGTH },
+      { title: t('keyboard.area'), key: KeyboardUnitsGroupType.AREA, minWidth: 1005 },
+      { title: t('keyboard.volume'), key: KeyboardUnitsGroupType.VOLUME, minWidth: 1060 },
+      { title: t('keyboard.weight'), key: KeyboardUnitsGroupType.WEIGHT, minWidth: 1060 },
+      { title: t('keyboard.time'), key: KeyboardUnitsGroupType.TIME, minWidth: 1125 },
     ],
     [t],
   )
-  const [activeTab, setActiveTab] = useState<TabOptionProps>(tabs[0])
-  return { tabs, activeTab, setActiveTab }
+
+  const tabs = useMemo(
+    () => allTabs.filter((tab) => tab.minWidth === undefined || width >= tab.minWidth),
+    [allTabs, width],
+  )
+
+  const [activeKey, setActiveKey] = useState<KeyboardUnitsGroupType | undefined>(() => tabs[0]?.key)
+
+  const activeTab = useMemo(() => {
+    return tabs.find((t) => t?.key && t.key === activeKey) ?? tabs[0]
+  }, [tabs, activeKey])
+
+  return {
+    tabs,
+    activeTab,
+    setActiveTab: (tab: TabOptionProps) => {
+      if (isKeyboardUnitsGroupType(tab.key)) {
+        setActiveKey(tab.key)
+      }
+    },
+  }
 }