@magmamath/students-features 0.10.0 → 0.11.0-rc.0

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

@@ -2,8 +2,6 @@ import type { Store, StoreWritable } from 'effector'
 import {
   ChatHintPayload,
   ChatHintResponse,
-  ErrorSpottingPayload,
-  ErrorSpottingResponse,
   GetAlternativesPayload,
   GetAlternativesResponse,
   GoogleText2SpeechPayload,
@@ -12,12 +10,14 @@ import {
   GoogleTranslateResponse,
   PostMessagePayload,
   PostMessageResponse,
+  ProblemStandard,
   SendMessagePayload,
   SendMessageResponse,
 } from './api.types'
 import { ExtendWithOptional } from '../../../lib/helpers/types'
 import { ChatAnswer, ChatItem, ConversationMessage, FullStrokeData } from './units.types'
 import { WithAbortSignal } from '../../../lib/types/requests'
+import { RequestOptionalConfig } from '../../../lib/effector/createControllerEffect'
 
 export type ChatbotMessages = {
   error: ConversationMessage
@@ -28,18 +28,20 @@ export type ChatbotMessages = {
 
 export type ChatbotApiRequests = {
   getAlternatives: (props: GetAlternativesPayload) => Promise<GetAlternativesResponse>
-  sendMessage: (props: WithAbortSignal<SendMessagePayload>) => Promise<SendMessageResponse>
-  postMessage: (props: WithAbortSignal<PostMessagePayload>) => Promise<PostMessageResponse>
+  sendMessage: (
+    props: WithAbortSignal<SendMessagePayload>,
+    requestConfig?: RequestOptionalConfig,
+  ) => Promise<SendMessageResponse>
+  postMessage: (
+    props: WithAbortSignal<PostMessagePayload>,
+    requestConfig?: RequestOptionalConfig,
+  ) => Promise<PostMessageResponse>
   postTranslateText: (
     props: WithAbortSignal<GoogleTranslatePayload>,
   ) => Promise<GoogleTranslateResponse>
   postTextToSpeech: (
     props: WithAbortSignal<GoogleText2SpeechPayload>,
   ) => Promise<GoogleText2SpeechResponse>
-  /**
-   * @deprecated merged with hint
-   */
-  spotError?: (props: ErrorSpottingPayload) => Promise<ErrorSpottingResponse>
 }
 
 type ChatbotSettings = {
@@ -49,7 +51,10 @@ type ChatbotSettings = {
 export type ChatbotModelProps = {
   $key?: Store<string>
   api: Omit<ChatbotApiRequests, 'postMessage'> & {
-    requestHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
+    requestHint: (
+      props: ChatHintPayload,
+      requestConfig?: RequestOptionalConfig,
+    ) => Promise<ChatHintResponse>
   }
   threadMessagesLimit?: number
   chatAccess: StoreWritable<boolean>
@@ -60,12 +65,14 @@ 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
 }
 
@@ -75,6 +82,7 @@ export type SetHintMessageProps = {
 
 export type StartConversationProps = {
   initOnly?: boolean
+  withGreetingMessage?: boolean
 }
 
 export type StartConversationFxData = {
@@ -118,13 +126,16 @@ export type IChatDrawBoardAdapter = {
 
 export type ChatbotContext = {
   language: string
-  problem: string
+  problemDescription: string
   problemAnswer: string[]
+  translationTargetLanguage: string
+  assignmentId?: string
   answer?: string | string[]
   answerOptions?: string[]
-  translationTargetLanguage: string
   imageDescription?: string
   imageCdnId?: string
+  problemId?: string
+  problemStandards?: ProblemStandard[]
 }
 
 export type ReinitConversationProps = {
@@ -138,7 +149,7 @@ export enum ChatRequestType {
 
 type FreeTextWithConversationId = {
   type: ChatRequestType.FREETEXT
-  data: Pick<SendMessagePayload, 'message' | 'conversationId'>
+  data: Pick<SendMessagePayload, 'message' | 'conversationId' | 'chatHistory'>
 }
 
 type FreeTextNewConversation = {

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

@@ -1,4 +1,10 @@
+import React from 'react'
+import { ColorScheme } from './style.types'
 import { ConversationMessage } from './units.types'
+import { ChatbotAPI } from '../model/ChatbotApi'
+import { ChatTTSHighlightModel } from '../model/ChatTTSHighlightModel'
+import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
+import { Timepoint } from './api.types'
 
 export enum AudioStatus {
   PLAYING = 'playing',
@@ -6,13 +12,24 @@ export enum AudioStatus {
   PAUSED = 'paused',
 }
 
+export type OnTimeUpdate = (callback: ((time: number) => void) | null) => void
+
 export type AudioProvider = {
   play: (audioPath: string, onPlaybackComplete: () => void) => Promise<void>
   pause: () => void
   resume: () => void
   stop: () => void
+  onTimeUpdate?: OnTimeUpdate
+}
+
+export type TTSHighlightRendererProps = {
+  text: string
+  highlightedIndex: number
+  colorScheme?: ColorScheme
 }
 
+export type TTSHighlightRenderer = React.ComponentType<TTSHighlightRendererProps>
+
 export type PlayTextToSpeechProps = {
   message: ConversationMessage
   isTranslated: boolean
@@ -25,3 +42,19 @@ export type T2SState = {
   isLoading: boolean
   isEnabled: boolean
 }
+
+export type T2SConfig = {
+  audioProvider?: AudioProvider
+  textSanitizer?: (speech: string) => string
+  isWordHighlightEnabled?: boolean
+}
+
+export type AudioConfig = {
+  voice?: typeof DEFAULT_VOICE
+  audioConfig?: typeof AUDIO_CONFIG
+}
+
+export type AudioCache = {
+  audioPath: string
+  timepoints: Timepoint[]
+}

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

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

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/AlgebraLayout/AlgebraLayout.tsx

@@ -1,20 +1,21 @@
 import React, { useMemo, useState } from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
-import { COLORS, SelectGroup, SelectOptionSize, IS_MOBILE } from '@magmamath/react-native-ui'
+import { COLORS, IS_MOBILE, SelectGroup, SelectOptionSize } from '@magmamath/react-native-ui'
 import { Locale, useText } from '../../../../shared/translation'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
 import { SelectedLayout } from './types'
 import { getKeyboardGroup } from '../../helpers'
 import { getSelectOptions } from './helpers'
+import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 
 export const AlgebraLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
   const t = useText()
   const { width } = useWindowDimensions()
   const selectOptions = getSelectOptions({ selectedLayout, setSelectedLayout, onLayoutChange })
-  const isDesktop = width > MOBILE_LAYOUT_WIDTH && !IS_MOBILE
+  const isDesktop =
+    width > KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].mobileBreakpoint && !IS_MOBILE
   const locale = t('locale') as Locale
 
   const keyboardGroups = useMemo(() => {

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

@@ -2,17 +2,17 @@ import React, { PropsWithChildren } from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
 import { Locale, useText } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keyboardGroupsByLocale'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 
 export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
   const t = useText()
   const keysByLocale = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.Basic]
   const keys = props.children ? keysByLocale.keys : keysByLocale.keys.slice(0, -1)
   const { width } = useWindowDimensions()
-  const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
+  const isMobile = width <= KEYBOARD_LAYOUTS[KeyboardType.Basic].mobileBreakpoint || IS_MOBILE
 
   if (isMobile && !props.children) {
     return null

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

@@ -9,19 +9,21 @@ export const MATH_ENTRY_BASIC_SW_PLUS: KeyboardGroup = {
     MATH_BASIC_OPERATORS.ADDITION,
     MATH_BASIC_OPERATORS.SUBTRACTION,
     MATH_BASIC_OPERATORS.EQUALS,
-    MATH_BASIC_OPERATORS.PARENTHESES,
-    MATH_BASIC_OPERATORS.SQUARE_POWER,
-    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+    MATH_BASIC_OPERATORS.FRACTION,
     MATH_BASIC_OPERATORS.C_DOT,
     MATH_BASIC_OPERATORS.DIVISION,
     MATH_BASIC_OPERATORS.DOT,
     MATH_BASIC_OPERATORS.PERCENT,
-    MATH_BASIC_OPERATORS.NTH_POWER,
-    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
     MATH_TEXT_SYMBOLS.X,
     MATH_TEXT_SYMBOLS.Y,
     MATH_TEXT_SYMBOLS.Z,
     MATH_BASIC_OPERATORS.PERMILLE,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
   ],
 }
 
@@ -31,17 +33,20 @@ export const MATH_ENTRY_BASIC_PLUS_MOBILE_SW: KeyboardGroup = {
     MATH_BASIC_OPERATORS.ADDITION,
     MATH_BASIC_OPERATORS.SUBTRACTION,
     MATH_BASIC_OPERATORS.EQUALS,
-    MATH_BASIC_OPERATORS.SQUARE_POWER,
-    MATH_BASIC_OPERATORS.SQUARE_ROOT,
-    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.C_DOT,
     MATH_BASIC_OPERATORS.DIVISION,
     MATH_BASIC_OPERATORS.DOT,
     MATH_BASIC_OPERATORS.PERCENT,
-    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
     MATH_TEXT_SYMBOLS.X,
     MATH_TEXT_SYMBOLS.Y,
     MATH_TEXT_SYMBOLS.Z,
     MATH_BASIC_OPERATORS.PERMILLE,
+    MATH_BASIC_OPERATORS.NTH_POWER,
   ],
 }
 
@@ -51,19 +56,21 @@ export const MATH_ENTRY_BASIC_US_PLUS: KeyboardGroup = {
     MATH_BASIC_OPERATORS.ADDITION,
     MATH_BASIC_OPERATORS.SUBTRACTION,
     MATH_BASIC_OPERATORS.EQUALS,
-    MATH_BASIC_OPERATORS.PARENTHESES,
-    MATH_BASIC_OPERATORS.SQUARE_POWER,
-    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+    MATH_BASIC_OPERATORS.FRACTION,
     MATH_BASIC_OPERATORS.MULTIPLICATION,
     MATH_BASIC_OPERATORS.DIVISION,
     MATH_BASIC_OPERATORS.COMMA,
     MATH_BASIC_OPERATORS.PERCENT,
-    MATH_BASIC_OPERATORS.NTH_POWER,
-    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
     MATH_TEXT_SYMBOLS.X,
     MATH_TEXT_SYMBOLS.Y,
     MATH_TEXT_SYMBOLS.Z,
     MATH_BASIC_OPERATORS.PERMILLE,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
   ],
 }
 
@@ -73,16 +80,19 @@ export const MATH_ENTRY_BASIC_PLUS_MOBILE: KeyboardGroup = {
     MATH_BASIC_OPERATORS.ADDITION,
     MATH_BASIC_OPERATORS.SUBTRACTION,
     MATH_BASIC_OPERATORS.EQUALS,
-    MATH_BASIC_OPERATORS.SQUARE_POWER,
-    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+    MATH_BASIC_OPERATORS.FRACTION,
     MATH_BASIC_OPERATORS.MULTIPLICATION,
     MATH_BASIC_OPERATORS.DIVISION,
     MATH_BASIC_OPERATORS.COMMA,
     MATH_BASIC_OPERATORS.PERCENT,
-    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
     MATH_TEXT_SYMBOLS.X,
     MATH_TEXT_SYMBOLS.Y,
     MATH_TEXT_SYMBOLS.Z,
     MATH_BASIC_OPERATORS.PERMILLE,
+    MATH_BASIC_OPERATORS.NTH_POWER,
   ],
 }

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

@@ -3,15 +3,16 @@ import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeysList } from '../KeysList/KeysList'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
-import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
 import { getKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 
 export const BasicPlusPlusLayout = (props: KeyboardLayoutProps) => {
   const t = useText()
   const { width } = useWindowDimensions()
   const locale = t('locale') as Locale
-  const isDesktop = width > MOBILE_LAYOUT_WIDTH && !IS_MOBILE
+  const isDesktop =
+    width > KEYBOARD_LAYOUTS[KeyboardType.BasicPlusPlus].mobileBreakpoint && !IS_MOBILE
   const keysGroup = getKeyboardGroup(
     locale,
     isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,

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

@@ -11,21 +11,22 @@ export const MATH_ENTRY_BASIC_PLUS_PLUS: KeyboardGroup = {
     MATH_BASIC_OPERATORS.ADDITION,
     MATH_BASIC_OPERATORS.SUBTRACTION,
     MATH_BASIC_OPERATORS.EQUALS,
-    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
     MATH_BASIC_OPERATORS.SQUARE_POWER,
     MATH_BASIC_OPERATORS.SQUARE_ROOT,
-    MATH_BASIC_OPERATORS.PLUS_MINUS,
     MATH_SYMBOLS.PI,
     MATH_GEOMETRY_SYMBOLS.RADIAN,
     MATH_BASIC_OPERATORS.MULTIPLICATION,
     MATH_BASIC_OPERATORS.FRACTION,
     MATH_BASIC_OPERATORS.SLASH,
-    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.PLUS_MINUS,
     MATH_BASIC_OPERATORS.PERCENT,
     MATH_BASIC_OPERATORS.NTH_POWER,
     MATH_BASIC_OPERATORS.NTH_ROOT,
     MATH_SYMBOLS.THETA,
     MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_BASIC_OPERATORS.COMMA,
     MATH_TEXT_SYMBOLS.X,
     MATH_TEXT_SYMBOLS.Y,
     MATH_TEXT_SYMBOLS.Z,
@@ -43,21 +44,23 @@ export const MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE: KeyboardGroup = {
     MATH_BASIC_OPERATORS.ADDITION,
     MATH_BASIC_OPERATORS.SUBTRACTION,
     MATH_BASIC_OPERATORS.EQUALS,
-    MATH_BASIC_OPERATORS.SQUARE_POWER,
-    MATH_BASIC_OPERATORS.SQUARE_ROOT,
-    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+    MATH_SYMBOLS.PI,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
     MATH_BASIC_OPERATORS.MULTIPLICATION,
     MATH_BASIC_OPERATORS.FRACTION,
     MATH_BASIC_OPERATORS.COMMA,
-    MATH_BASIC_OPERATORS.NTH_POWER,
-    MATH_SYMBOLS.PI,
-    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
     MATH_TEXT_SYMBOLS.X,
     MATH_TEXT_SYMBOLS.Y,
     MATH_TEXT_SYMBOLS.Z,
-    MATH_SYMBOLS.THETA,
-    MATH_GEOMETRY_SYMBOLS.DEGREE,
-    MATH_GEOMETRY_SYMBOLS.RADIAN,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
   ],
 }
 
@@ -67,21 +70,22 @@ export const MATH_ENTRY_BASIC_PLUS_PLUS_SW: KeyboardGroup = {
     MATH_BASIC_OPERATORS.ADDITION,
     MATH_BASIC_OPERATORS.SUBTRACTION,
     MATH_BASIC_OPERATORS.EQUALS,
-    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
     MATH_BASIC_OPERATORS.SQUARE_POWER,
     MATH_BASIC_OPERATORS.SQUARE_ROOT,
-    MATH_BASIC_OPERATORS.PLUS_MINUS,
     MATH_SYMBOLS.PI,
     MATH_GEOMETRY_SYMBOLS.RADIAN,
     MATH_BASIC_OPERATORS.C_DOT,
     MATH_BASIC_OPERATORS.FRACTION,
     MATH_BASIC_OPERATORS.SLASH,
-    MATH_BASIC_OPERATORS.DOT,
+    MATH_BASIC_OPERATORS.PLUS_MINUS,
     MATH_BASIC_OPERATORS.PERCENT,
     MATH_BASIC_OPERATORS.NTH_POWER,
     MATH_BASIC_OPERATORS.NTH_ROOT,
     MATH_SYMBOLS.THETA,
     MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_BASIC_OPERATORS.DOT,
     MATH_TEXT_SYMBOLS.X,
     MATH_TEXT_SYMBOLS.Y,
     MATH_TEXT_SYMBOLS.Z,
@@ -99,20 +103,22 @@ export const MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE_SW: KeyboardGroup = {
     MATH_BASIC_OPERATORS.ADDITION,
     MATH_BASIC_OPERATORS.SUBTRACTION,
     MATH_BASIC_OPERATORS.EQUALS,
-    MATH_BASIC_OPERATORS.SQUARE_POWER,
-    MATH_BASIC_OPERATORS.SQUARE_ROOT,
-    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+    MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+    MATH_SYMBOLS.PI,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
     MATH_BASIC_OPERATORS.C_DOT,
     MATH_BASIC_OPERATORS.FRACTION,
     MATH_BASIC_OPERATORS.DOT,
-    MATH_BASIC_OPERATORS.NTH_POWER,
-    MATH_SYMBOLS.PI,
-    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
     MATH_TEXT_SYMBOLS.X,
     MATH_TEXT_SYMBOLS.Y,
     MATH_TEXT_SYMBOLS.Z,
-    MATH_SYMBOLS.THETA,
-    MATH_GEOMETRY_SYMBOLS.DEGREE,
-    MATH_GEOMETRY_SYMBOLS.RADIAN,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
   ],
 }

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

@@ -9,7 +9,7 @@ import {
   KEYBOARD_SLIDE_DISTANCE,
   slideInAnimationSettings,
 } from './MainLayout/constants'
-import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
+import { isMobileWidth } from '../helpers'
 
 type KeyboardProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -17,15 +17,21 @@ 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 isMobile = IS_MOBILE || isMobileWidth(width, characterType)
   const mobileStyles = useMemo(
     () => getLayoutConfigStyles(characterType, isMobile),
     [characterType, isMobile],
@@ -54,7 +60,11 @@ export const Keyboard = ({ style, characterType, ...props }: KeyboardProps) => {
         },
       ]}
     >
-      <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/MainLayout.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
-import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { Animated, StyleSheet, View } from 'react-native'
 import { SelectOptionColor, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
 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
@@ -27,11 +26,8 @@ export const MainLayout = ({
   const fadeAnim = useRef(new Animated.Value(showUnderlinedKeys ? 1 : 0)).current
   const fadeRef = useRef<Animated.CompositeAnimation | null>(null)
 
-  const { width } = useWindowDimensions()
-  const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
-
   const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType])
-  const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile
+  const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !IS_MOBILE
 
   const animateFade = useCallback(
     (toValue: number, onComplete?: () => void) => {

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

@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: COLORS.NEUTRAL_3,
     paddingTop: 0,
-    gap: 24,
+    gap: 12,
   },
   keyGroupContainer: {
     gap: 8,

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,46 @@
 import { useText } from '../../../../../shared/translation'
 import { useMemo, useState } from 'react'
-import { TabOptionProps } from '@magmamath/react-native-ui'
-
-import { KeyboardUnitsGroupType } from '../types'
+import { KeyboardUnitsGroupType, UnitTab } from '../types'
+import { useWindowDimensions } from 'react-native'
+import { IS_MOBILE, TabOptionProps } from '@magmamath/react-native-ui'
+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, minBreakpoint: 1005 },
+      { title: t('keyboard.volume'), key: KeyboardUnitsGroupType.VOLUME, minBreakpoint: 1060 },
+      { title: t('keyboard.weight'), key: KeyboardUnitsGroupType.WEIGHT, minBreakpoint: 1060 },
+      { title: t('keyboard.time'), key: KeyboardUnitsGroupType.TIME, minBreakpoint: 1125 },
     ],
     [t],
   )
-  const [activeTab, setActiveTab] = useState<TabOptionProps>(tabs[0])
-  return { tabs, activeTab, setActiveTab }
+
+  const tabs = useMemo(
+    () =>
+      allTabs.filter(
+        (tab) => IS_MOBILE || tab.minBreakpoint === undefined || width >= tab.minBreakpoint,
+      ),
+    [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)
+      }
+    },
+  }
 }