@magmamath/students-features 1.0.2 → 1.0.3-rc.1

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

@@ -1,24 +1,42 @@
-import { FullStrokeData, IThreadItem } from '../types/units.types'
+import {
+  ErrorChar,
+  EquationItem,
+  FullStrokeData,
+  IThreadItem,
+  SpreadsheetItem,
+} from '../types/units.types'
 import { generateRandomId } from '../../../lib/helpers/helpers'
 
 type ThreadItemProps = {
   strokes?: FullStrokeData[]
-  text?: string
   key: string
+  spreadSheetContent?: SpreadsheetItem[]
+  equationContent?: EquationItem[]
+  drawBoardImage?: string
+  studentInput?: string
 }
 
+const DEFAULT_STUDENT_INPUT = 'none'
+
 export class ThreadItem implements IThreadItem {
   public readonly id = generateRandomId()
   public readonly history: string[] = []
   public strokesValidationKey: string | null = null
   public strokes: FullStrokeData[] | null
-  public text: string | null = null
   public errorStrokesIds: string[] | null = null
+  public errorChars: ErrorChar[] | null = null
+  public spreadSheetContent?: SpreadsheetItem[]
+  public equationContent?: EquationItem[]
+  public drawBoardImage?: string
+  public studentInput: string
 
   public constructor(props?: ThreadItemProps | null) {
     this.strokes = props?.strokes ?? null
-    this.text = props?.text ?? null
     this.strokesValidationKey = props?.key ?? null
+    this.spreadSheetContent = props?.spreadSheetContent
+    this.equationContent = props?.equationContent
+    this.drawBoardImage = props?.drawBoardImage
+    this.studentInput = props?.studentInput ?? DEFAULT_STUDENT_INPUT
   }
 
   public setStrokes(strokes: FullStrokeData[]) {
@@ -26,11 +44,6 @@ export class ThreadItem implements IThreadItem {
     return this
   }
 
-  public setText(text: string) {
-    this.text = text
-    return this
-  }
-
   public setValidationKey(key: string) {
     this.strokesValidationKey = key
     return this
@@ -41,19 +54,54 @@ export class ThreadItem implements IThreadItem {
     return this
   }
 
-  public getNextHintProps() {
-    if (this.history.length) {
-      return {
-        previousHint: this.history[this.history.length - 1],
-      }
-    }
+  public setErrorChars(chars: ErrorChar[]) {
+    this.errorChars = chars
+    return this
+  }
 
-    if (this.text) {
-      return { drawBoardText: this.text }
-    }
+  public setSpreadSheetContent(content: SpreadsheetItem[]) {
+    this.spreadSheetContent = content
+    return this
+  }
+
+  public setEquationContent(content: EquationItem[]) {
+    this.equationContent = content
+    return this
+  }
 
-    if (this.strokes && this.strokes.length > 0) {
+  public setDrawBoardImage(image: string) {
+    this.drawBoardImage = image
+    return this
+  }
+
+  public setStudentInput(studentInput: string) {
+    this.studentInput = studentInput
+    return this
+  }
+
+  private getContentProps() {
+    if (this.strokes?.length) {
       return { stroke: this.strokes }
     }
+    if (this.spreadSheetContent?.length) {
+      return { spreadSheetContent: this.spreadSheetContent }
+    }
+    if (this.equationContent?.length) {
+      return { equationContent: this.equationContent }
+    }
+    return {}
+  }
+
+  public getNextHintProps() {
+    const hintNumber = this.history.length
+    const isFirstHint = hintNumber === 0
+
+    return {
+      hintNumber,
+      studentInput: this.studentInput,
+      ...(this.drawBoardImage && { drawBoardImage: this.drawBoardImage }),
+      ...(isFirstHint && this.getContentProps()),
+      ...(this.history.length && { previousHints: [...this.history] }),
+    }
   }
 }

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

@@ -1,4 +1,11 @@
-import { ChatAnswer, FullStrokeData, Stroke } from './units.types'
+import {
+  ChatAnswer,
+  FullStrokeData,
+  Stroke,
+  EquationItem,
+  SpreadsheetItem,
+  ErrorChar,
+} from './units.types'
 import { ProblemStandard } from './model.types'
 
 export type GetAlternativesPayload = {
@@ -49,6 +56,11 @@ export type PostMessagePayload = {
   imageCdnId?: string
   freeTextMessage?: string
   conversationId?: string | null
+  chatHistory?: {
+    exerciseId: string
+    problemId: string
+    chatVersion?: string
+  }
 }
 
 export type PostMessageResponse = {
@@ -102,17 +114,25 @@ export type ChatHintPayload = {
   correctAnswer: string[]
   userAnswer?: string | string[]
   stroke?: Stroke[]
-  previousHint?: string
+  previousHints?: string[]
   language: string
   imageAltText?: string
   imageCdnId?: string
   drawBoardText?: string
+  spreadSheetContent?: SpreadsheetItem[]
+  equationContent?: EquationItem[]
+  drawBoardImage?: string
+  hintNumber: number
+  studentInput: string
+  answerOptions?: string[]
 }
 
 export type ChatHintResponse = {
   message: string
   conversationId?: string | null
   errorStrokeIds?: string[]
+  errorCellIds?: string[]
+  errorChars?: ErrorChar[]
 }
 export type ErrorSpottingPayload = {
   strokes: FullStrokeData[]

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

@@ -0,0 +1,19 @@
+import { MutableRefObject } from 'react'
+
+export enum FadePosition {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  BOTH = 'both',
+}
+
+export type FadeUpdateFn = (fade: FadePosition | undefined) => void
+
+export type ScrollState = {
+  isScrollable: boolean
+  isScrolledUp: boolean
+  isAtTop: boolean
+}
+
+export type FadeOverlaysProps = {
+  fadeRef: MutableRefObject<FadeUpdateFn | null>
+}

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

@@ -16,7 +16,14 @@ import {
   SendMessageResponse,
 } from './api.types'
 import { ExtendWithOptional } from '../../../lib/helpers/types'
-import { ChatAnswer, ChatItem, ConversationMessage, FullStrokeData } from './units.types'
+import {
+  EquationItem,
+  ChatAnswer,
+  ChatItem,
+  ConversationMessage,
+  FullStrokeData,
+  SpreadsheetItem,
+} from './units.types'
 import { WithAbortSignal } from '../../../lib/types/requests'
 import { RequestOptionalConfig } from '../../../lib/effector/createControllerEffect'
 
@@ -25,6 +32,7 @@ export type ChatbotMessages = {
   start: ConversationMessage
   endMessage: ConversationMessage
   anotherHintOption: ChatAnswer
+  getHint: ChatAnswer
 }
 
 export type ChatbotApiRequests = {
@@ -70,12 +78,14 @@ export type SendHelpParams = {
   message: string
   translatedMessage?: string
   isFreeText?: boolean
+  clearDefaultMessages?: boolean
 }
 
 export type SendHelpProps = SendHelpParams & {
   key: string
   context: ChatbotContext | null
   cache: Record<string, ChatItem>
+  alternatives: GetAlternativesResponse | null
   isFreeText?: boolean
 }
 
@@ -114,8 +124,11 @@ type GetVisibleStrokesResponse = {
 
 type GetBoardContentResponse = {
   strokes?: FullStrokeData[]
-  text?: string
   validationKey: string
+  spreadSheetContent?: SpreadsheetItem[]
+  equationContent?: EquationItem[]
+  drawBoardImage?: string
+  studentInput: string
 }
 
 export type IChatDrawBoardAdapter = {
@@ -129,7 +142,7 @@ export type IChatDrawBoardAdapter = {
 
 export type ChatbotContext = {
   language: string
-  problem: string
+  problemDescription: string
   problemAnswer: string[]
   translationTargetLanguage: string
   answer?: string | string[]
@@ -137,6 +150,8 @@ export type ChatbotContext = {
   imageDescription?: string
   imageCdnId?: string
   problemStandards?: ProblemStandard[]
+  assignmentId?: string
+  problemId?: string
 }
 
 export type ReinitConversationProps = {

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

@@ -2,16 +2,41 @@ export type Stroke = {
   x: number[]
   y: number[]
 }
+
 export type FullStrokeData = Stroke & {
   id: string
 }
 
+export type EquationItem = {
+  id: string
+  value?: string
+}
+
+export type SpreadsheetItem = {
+  id: string
+  value?: string
+  point: {
+    x: number
+    y: number
+  }
+}
+
+export type ErrorChar = {
+  id: string
+  value: string
+}
+
 export type IThreadItem = {
   id: string
   strokesValidationKey: string | null
   strokes: FullStrokeData[] | null
   history: string[]
   errorStrokesIds: string[] | null
+  errorChars: ErrorChar[] | null
+  spreadSheetContent?: SpreadsheetItem[]
+  equationContent?: EquationItem[]
+  drawBoardImage?: string
+  studentInput: string
 }
 
 export type ChatAnswer = {
@@ -36,4 +61,5 @@ export type ChatItem = {
   isAvailable: boolean
   currentThread: IThreadItem | null
   conversationId?: string | null
+  hasBeenOpened?: boolean
 }

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

@@ -2,26 +2,23 @@ import React, { useMemo, useState } from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { COLORS, IS_MOBILE, SelectGroup, SelectOptionSize } from '@magmamath/react-native-ui'
-import { Locale, useText } from '../../../../shared/translation'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { SelectedLayout } from './types'
-import { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 import { getSelectOptions } from './helpers'
 import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 
-export const AlgebraLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) => {
+export const AlgebraLayout = ({ onLayoutChange, keys, ...props }: KeyboardLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
-  const t = useText()
   const { width } = useWindowDimensions()
   const selectOptions = getSelectOptions({ selectedLayout, setSelectedLayout, onLayoutChange })
   const isDesktop =
     width > KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].mobileBreakpoint && !IS_MOBILE
-  const locale = t('locale') as Locale
 
   const keyboardGroups = useMemo(() => {
-    const algebra = getKeyboardGroup(locale, KeyboardType.AlgebraAdvanced)
-    const basic = getKeyboardGroup(
-      locale,
+    const algebra = getMainKeyboardGroup(keys, KeyboardType.AlgebraAdvanced)
+    const basic = getMainKeyboardGroup(
+      keys,
       isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,
     )
 
@@ -29,7 +26,7 @@ export const AlgebraLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps)
       [SelectedLayout.BASIC, basic],
       [SelectedLayout.ALGEBRA, algebra],
     ])
-  }, [locale, isDesktop])
+  }, [isDesktop, keys])
 
   const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
 

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

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react'
 import { COLORS } from '@magmamath/react-native-ui'
 import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
-import { IntegralABIcon } from '../../../../shared/icons/keyboard/IntegralABIcon/IntegralABIcon'
+import { IntegralABIcon } from '../../../../shared/icons/IntegralABIcon'
 import { SelectedLayout } from './types'
 
 type LayoutOption = {

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

@@ -2,15 +2,14 @@ import React, { PropsWithChildren } from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-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'
+import { getMainKeyboardGroup } from '../../helpers'
+
+export const BasicLayout = ({ keys, ...props }: KeyboardLayoutProps & PropsWithChildren) => {
+  const keysByLocale = getMainKeyboardGroup(keys, KeyboardType.Basic)
+  const keysToShow = props.children ? keysByLocale.keys : keysByLocale.keys.slice(0, -1)
 
-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 <= KEYBOARD_LAYOUTS[KeyboardType.Basic].mobileBreakpoint || IS_MOBILE
 
@@ -20,7 +19,7 @@ export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
 
   return (
     <View style={styles.container}>
-      <KeysList keys={keys} numOfRows={2} {...props} />
+      <KeysList keys={keysToShow} numOfRows={2} {...props} />
       {props.children || null}
     </View>
   )

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

@@ -2,15 +2,13 @@ import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 
-export const CurrencyBasicLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
-  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.BasicCurrency)
+export const CurrencyBasicLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
+  const keysGroup = getMainKeyboardGroup(keys, KeyboardType.BasicCurrency)
 
   return (
-    <BasicLayout {...props}>
+    <BasicLayout keys={keys} {...props}>
       <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
     </BasicLayout>
   )

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

@@ -3,16 +3,14 @@ import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet } from 'react-native'
 import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { useText, Locale } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
-  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.BasicTime)
+export const TimeBasicLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
+  const keysGroup = getMainKeyboardGroup(keys, KeyboardType.BasicTime)
 
   return (
-    <BasicLayout {...props}>
+    <BasicLayout keys={keys} {...props}>
       <KeysList
         keys={keysGroup.keys}
         numOfRows={keysGroup.numOfRows || keysGroup.keys.length}

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

@@ -2,18 +2,16 @@ import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
-import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { getMainKeyboardGroup } from '../../helpers'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/keyboard.constants'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const BasicPlusLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
-  const locale = t('locale') as Locale
+export const BasicPlusLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
   const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
-  const keysGroup = getKeyboardGroup(
-    locale,
+
+  const keysGroup = getMainKeyboardGroup(
+    keys,
     isMobile ? KeyboardType.BasicPlusMobile : KeyboardType.BasicPlus,
   )
 

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

@@ -2,19 +2,18 @@ import React from 'react'
 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 { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 
-export const BasicPlusPlusLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
+export const BasicPlusPlusLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
-  const locale = t('locale') as Locale
+
   const isDesktop =
     width > KEYBOARD_LAYOUTS[KeyboardType.BasicPlusPlus].mobileBreakpoint && !IS_MOBILE
-  const keysGroup = getKeyboardGroup(
-    locale,
+
+  const keysGroup = getMainKeyboardGroup(
+    keys,
     isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,
   )
 

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

@@ -1,7 +1,6 @@
 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 {
@@ -10,9 +9,13 @@ import {
   slideInAnimationSettings,
 } from './MainLayout/constants'
 import { isMobileWidth } from '../helpers'
+import { KeyboardConfig } from '@magmamath/frontend-config'
+import { KeyboardKey, KeyboardKeyValue } from '../types/types'
+import { resolveKeyboard } from '../constants/keyboard.helpers'
 
 type KeyboardProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
+  keys: KeyboardConfig
   characterType?: number
   style?: StyleProp<ViewStyle>
   color?: SelectOptionColor
@@ -28,6 +31,7 @@ export const Keyboard = ({
   isMainLayoutDisabled,
   ...props
 }: KeyboardProps) => {
+  const resolvedKeys = useMemo(() => resolveKeyboard(props.keys), [props.keys])
   const slideAnim = useRef(new Animated.Value(KEYBOARD_SLIDE_DISTANCE)).current
 
   const { width } = useWindowDimensions()
@@ -62,10 +66,11 @@ export const Keyboard = ({
     >
       <MainLayout
         {...props}
+        keys={resolvedKeys}
         isDisabled={isMainLayoutDisabled || props.isDisabled}
         characterType={characterType}
       />
-      <Numpad {...props} style={mobileStyles} />
+      <Numpad {...props} keys={resolvedKeys} style={mobileStyles} />
     </Animated.View>
   )
 }

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

@@ -2,13 +2,13 @@ import React, { useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import {
   ButtonStyle,
+  IS_MOBILE,
   SelectGroup,
   SelectOptionColor,
   SelectOptionSize,
 } from '@magmamath/react-native-ui'
 import { KeyboardKey, KeyboardLayoutProps } from '../../types/types'
 import { mapKeyToOption } from './helpers'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 type KeysListProps = {
   keys: KeyboardKey[]
@@ -18,7 +18,7 @@ type KeysListProps = {
   style?: {
     option?: ButtonStyle
   }
-} & KeyboardLayoutProps
+} & Omit<KeyboardLayoutProps, 'keys'>
 
 export const KeysList = ({
   keys,

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

@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Animated, StyleSheet, View } from 'react-native'
-import { SelectOptionColor, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
+import { IS_MOBILE, IS_WEB, SelectOptionColor } from '@magmamath/react-native-ui'
 import { getLayoutByCharType, isBasicPlusPlusLayout } from '../../constants/keyboardLayouts'
-import { KeyboardKey, KeyboardKeyValue } from '../../types/types'
 import { UnderlinedLayout } from '../UnderlinedLayout/UnderlinedLayout'
+import { KeyboardKey, KeyboardKeyValue, ResolvedKeyboard } from '../../types/types'
 
 type LayoutProps = {
+  keys: ResolvedKeyboard
   onKeyPress: (key: KeyboardKeyValue) => void
   characterType?: number
   color?: SelectOptionColor

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

@@ -3,16 +3,16 @@ import { KeysList } from '../KeysList/KeysList'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import { SPACING } from '@magmamath/react-native-ui'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { useText } from '../../../../shared/translation'
+import { getMainKeyboardGroup } from '../../helpers'
 
 type NumpadProps = {
   style?: StyleProp<ViewStyle>
 } & KeyboardLayoutProps
 
-export const Numpad = ({ style, ...props }: NumpadProps) => {
+export const Numpad = ({ style, keys, ...props }: NumpadProps) => {
   const t = useText()
-  const keyboardGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Numpad)
+  const keyboardGroup = getMainKeyboardGroup(keys, KeyboardType.Numpad)
 
   return (
     <View style={[styles.container, style]}>

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

@@ -1,17 +1,18 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { KeyboardLayoutProps, KeyboardType, ResolvedKeyboard } from '../../types/types'
+import { getMainKeyboardGroup } from '../../helpers'
 
 type UnderlinedLayoutProps = {
+  keys: ResolvedKeyboard
   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)
+export const UnderlinedLayout = ({ keys, ...props }: UnderlinedLayoutProps) => {
+  const keysGroup = getMainKeyboardGroup(keys, KeyboardType.Underlined)
+  const keysToShow = props.showSlashKey ? keysGroup.keys : keysGroup.keys.slice(0, -1)
 
-  return <KeysList keys={keys} numOfRows={props.showSlashKey ? 2 : keys.length} {...props} />
+  return (
+    <KeysList keys={keysToShow} numOfRows={props.showSlashKey ? 2 : keysToShow.length} {...props} />
+  )
 }

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

@@ -1,13 +1,9 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, View } from 'react-native'
-import { COLORS, TabGroup, TabOptionProps, TabVariant, IS_MOBILE } from '@magmamath/react-native-ui'
-import { MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS } from './keyboardGroups'
-import { KeyboardLayoutProps } from '../../types/types'
-import { Locale } from '@magmamath/students-features'
-import { useText } from '../../../../shared/translation'
-import { KEYBOARD_UNITS_GROUPS_BY_LOCALE } from '../../constants/keyboardGroupsByLocale'
-import { KeyboardUnitsGroupType } from './types'
+import { COLORS, IS_MOBILE, TabGroup, TabOptionProps, TabVariant } from '@magmamath/react-native-ui'
+import { KeyboardLayoutProps, KeyboardUnitsGroupType } from '../../types/types'
+import { getUnitsKeyboardGroup } from '../../helpers'
 
 type UnitTabsProps = {
   tabs: TabOptionProps[]
@@ -15,12 +11,8 @@ type UnitTabsProps = {
   onTabChange?: (value: TabOptionProps) => void
 } & KeyboardLayoutProps
 
-export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsProps) => {
-  const t = useText()
-  const locale = t('locale') as Locale
-  const keyboardGroups =
-    KEYBOARD_UNITS_GROUPS_BY_LOCALE[locale]?.[activeTab.key as KeyboardUnitsGroupType]?.keys ||
-    MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS.keys
+export const UnitTabs = ({ activeTab, tabs, onTabChange, keys, ...props }: UnitTabsProps) => {
+  const keyboardGroups = getUnitsKeyboardGroup(keys, activeTab.key as KeyboardUnitsGroupType).keys
 
   return (
     <View style={styles.container}>