@magmamath/students-features 1.3.3-rc.2 → 1.3.3

package/dist/typescript/module/shared/translation/validation.types.d.ts

@@ -0,0 +1,21 @@
+import enTranslations from './localization/en.json';
+import swTranslations from './localization/sw.json';
+import gbTranslations from './localization/gb.json';
+import caTranslations from './localization/ca.json';
+import sctTranslations from './localization/sct.json';
+type Extends<T, U> = T extends U ? true : false;
+type ExtendsAll<Candidate, Types extends unknown[]> = Types extends [infer Head, ...infer Tail] ? Extends<Candidate, Head> extends true ? ExtendsAll<Candidate, Tail> : false : true;
+type FindDominantType<Types extends unknown[]> = Types extends [
+    infer First,
+    ...infer Rest extends unknown[]
+] ? ExtendsAll<First, Rest> extends true ? First : FindDominantType<Rest> : never;
+type DominantTranslation = FindDominantType<[
+    typeof enTranslations,
+    typeof swTranslations,
+    typeof gbTranslations,
+    typeof caTranslations,
+    typeof sctTranslations
+]>;
+export type ISValidTranslation<T extends DominantTranslation> = T;
+export {};
+//# sourceMappingURL=validation.types.d.ts.map

package/dist/typescript/module/shared/translation/validation.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.types.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/validation.types.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,wBAAwB,CAAA;AACnD,OAAO,cAAc,MAAM,wBAAwB,CAAA;AACnD,OAAO,cAAc,MAAM,wBAAwB,CAAA;AACnD,OAAO,cAAc,MAAM,wBAAwB,CAAA;AACnD,OAAO,eAAe,MAAM,yBAAyB,CAAA;AAErD,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,KAAK,CAAA;AAE/C,KAAK,UAAU,CAAC,SAAS,EAAE,KAAK,SAAS,OAAO,EAAE,IAAI,KAAK,SAAS,CAAC,MAAM,IAAI,EAAE,GAAG,MAAM,IAAI,CAAC,GAC3F,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,GACnC,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,GAC3B,KAAK,GACP,IAAI,CAAA;AAER,KAAK,gBAAgB,CAAC,KAAK,SAAS,OAAO,EAAE,IAAI,KAAK,SAAS;IAC7D,MAAM,KAAK;IACX,GAAG,MAAM,IAAI,SAAS,OAAO,EAAE;CAChC,GACG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,IAAI,GAClC,KAAK,GACL,gBAAgB,CAAC,IAAI,CAAC,GACxB,KAAK,CAAA;AAET,KAAK,mBAAmB,GAAG,gBAAgB,CACzC;IACE,OAAO,cAAc;IACrB,OAAO,cAAc;IACrB,OAAO,cAAc;IACrB,OAAO,cAAc;IACrB,OAAO,eAAe;CACvB,CACF,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,mBAAmB,IAAI,CAAC,CAAA"}

package/example/.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/example/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

package/example/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "example",
+    "slug": "example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "magmamath.features.example"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "magmamath.features.example"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/example/babel.config.js

@@ -0,0 +1,28 @@
+const path = require('path')
+const { getConfig } = require('react-native-builder-bob/babel-config')
+const pkg = require('../package.json')
+
+const root = path.resolve(__dirname, '..')
+
+module.exports = function (api) {
+  api.cache(true)
+
+  return getConfig(
+    {
+      presets: ['babel-preset-expo'],
+      plugins: [
+        [
+          'module-resolver',
+          {
+            extensions: ['.tsx', '.ts', '.js', '.json'],
+            alias: {
+              [pkg.name]: path.join(__dirname, '../', pkg.source),
+            },
+          },
+        ],
+        ['@babel/plugin-transform-private-methods', { loose: true }],
+      ],
+    },
+    { root, pkg },
+  )
+}

package/example/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './src/App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

package/example/metro.config.js

@@ -0,0 +1,18 @@
+const path = require('path');
+const { getDefaultConfig } = require('@expo/metro-config');
+const { getConfig } = require('react-native-builder-bob/metro-config');
+const pkg = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+module.exports = getConfig(getDefaultConfig(__dirname), {
+  root,
+  pkg,
+  project: __dirname,
+});

package/example/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@magmamath/students-features-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~4.0.0",
+    "expo": "~52.0.11",
+    "expo-status-bar": "~2.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-web": "~0.19.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "react-native-builder-bob": "^0.33.3"
+  },
+  "private": true
+}

package/example/src/App.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Text } from 'react-native'
+
+const App = () => {
+  return <Text>Hello</Text>
+}
+
+export default App

package/example/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    // Avoid expo-cli auto-generating a tsconfig
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.3.3-rc.2",
+  "version": "1.3.3",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -15,8 +15,7 @@
   "scripts": {
     "clean": "del-cli dist",
     "prepare": "bob build",
-    "release": "release-it",
-    "pull-translations": "node scripts/pullTranslations.mjs"
+    "release": "release-it"
   },
   "peerDependencies": {
     "@magmamath/frontend-config": "1.1.0",
@@ -33,9 +32,7 @@
     "expo-audio": "^1.1.1",
     "expo": ">=52.0.47",
     "@react-native-masked-view/masked-view": "*",
-    "react-native-linear-gradient": "*",
-    "i18next": ">=22",
-    "react-i18next": ">=11"
+    "react-native-linear-gradient": "*"
   },
   "devDependencies": {
     "@magmamath/react-native-ui": "0.4.83",
@@ -66,9 +63,7 @@
     "typescript": "^5.2.2",
     "axios": "^1.13.5",
     "@react-native-masked-view/masked-view": "^0.3.2",
-    "react-native-linear-gradient": "^2.8.3",
-    "i18next": "^22.5.1",
-    "react-i18next": "^11.3.4"
+    "react-native-linear-gradient": "^2.8.3"
   },
   "resolutions": {
     "@types/react": "^18.2.44"

package/src/features/chatbot/helpers.ts

@@ -65,6 +65,7 @@ export function prepareChatRequestPayload(
     imageAltText,
     answerOptions,
     answer,
+    chatHistory,
   } = payload
 
   if (freeTextMessage) {
@@ -86,6 +87,7 @@ export function prepareChatRequestPayload(
             language,
             ...(imageCdnId && { imageCdnId }),
             ...(imageAltText && { altText: imageAltText }),
+            ...(chatHistory && { chatHistory }),
             ...(!!problemStandards?.length && { problemStandards }),
             ...(!!answerOptions?.length && { answerOptions }),
           },

package/src/features/chatbot/index.ts

@@ -7,7 +7,15 @@ export {
   type IChatDrawBoardAdapter,
 } from './types/model.types'
 export type { RequestOptionalConfig } from '../../lib/effector/createControllerEffect'
-export type { PostMessageResponse } from './types/api.types'
+export type {
+  PostMessageResponse,
+  ChatHintPayload,
+  ChatHintResponse,
+  GetAlternativesPayload,
+  GetAlternativesResponse,
+  SendMessagePayload,
+  SendMessageResponse,
+} from './types/api.types'
 export { DefaultMessagesCreator } from './model/DefaultMessageCreator'
 export type { ChatAnswer } from './types/units.types'
 export type { ConversationMessage } from './types/units.types'

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

@@ -234,15 +234,6 @@ export class ChatbotModel {
             messages: [messagesHelper.createOwn({ message, translatedMessage })],
           })
 
-          const chatHistory =
-            context.assignmentId && context.problemId
-              ? {
-                  exerciseId: context.assignmentId,
-                  problemId: context.problemId,
-                  chatVersion: alternatives?.version,
-                }
-              : undefined
-
           // Request is overridden by ThreadManager.postMessage (delegates to sendMessage/getHint)
           const response = await this.api.postMessageFx({
             answer: context.answer,
@@ -254,8 +245,14 @@ export class ChatbotModel {
             imageAltText: context.imageDescription,
             imageCdnId: context.imageCdnId,
             conversationId: cache[key].conversationId,
-            chatHistory,
             ...(isFreeText && { freeTextMessage: message }),
+            ...(context.assignmentId && {
+              chatHistory: {
+                exerciseId: context.assignmentId,
+                problemId: context.problemId,
+                chatVersion: alternatives?.version,
+              },
+            }),
           })
 
           const thread = this.threadManager.get(key)

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

@@ -1,12 +1,13 @@
 import { DefaultMessagesCreator } from './DefaultMessageCreator'
+import { TranslationKeys } from '../../../shared/translation/types'
 import { getText } from '../../../shared/translation/helpers'
 import { ChatbotMessages } from '../types/model.types'
-import { TranslationKeys } from '../../../shared/translation'
+import { $localization } from '../../../shared/translation'
 
 export class ChatBotTextManager {
   private readonly messagesCreator = new DefaultMessagesCreator<TranslationKeys>({
     textGetter: getText,
-  }).bindToLanguageChanged()
+  }).bindToLanguageChanged($localization.updates)
 
   public readonly messages: ChatbotMessages = {
     error: this.messagesCreator.createMessage('chat.errorMessage', {

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

@@ -1,5 +1,5 @@
-import i18next from 'i18next'
 import { PostMessageResponse } from '../types/api.types'
+import { Event } from 'effector'
 import { ChatAnswer } from '../types/units.types'
 
 type ChatMessage = Omit<PostMessageResponse, 'threadId'> & {
@@ -45,8 +45,8 @@ export class DefaultMessagesCreator<K extends string> {
     return option
   }
 
-  public bindToLanguageChanged() {
-    i18next.on('languageChanged', () => {
+  public bindToLanguageChanged(event: Event<unknown>) {
+    event.watch(() => {
       this.list.forEach((key, chatMessage) => {
         if ('message' in chatMessage) {
           chatMessage.message = this.getter(key)

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

@@ -30,14 +30,15 @@ export type GetAlternativesResponse = {
 }
 
 export type SendMessagePayload = {
+  message: string
   problemDescription?: string
   problemStandards?: ProblemStandard[]
   correctAnswer?: string | string[]
   answerOptions?: string[]
   altText?: string
   language?: string
-  message: string
   conversationId?: string
+  chatHistory?: ChatHistory
 }
 
 export type SendMessageResponse = {
@@ -45,6 +46,12 @@ export type SendMessageResponse = {
   conversationId?: string | null
 }
 
+export type ChatHistory = {
+  exerciseId: string
+  problemId?: string
+  chatVersion?: string
+}
+
 export type PostMessagePayload = {
   language: string
   problemAnswer: string[]
@@ -56,11 +63,7 @@ export type PostMessagePayload = {
   imageCdnId?: string
   freeTextMessage?: string
   conversationId?: string | null
-  chatHistory?: {
-    exerciseId: string
-    problemId: string
-    chatVersion?: string
-  }
+  chatHistory?: ChatHistory
 }
 
 export type PostMessageResponse = {
@@ -134,6 +137,7 @@ export type ChatHintResponse = {
   errorCellIds?: string[]
   errorChars?: ErrorChar[]
 }
+
 export type ErrorSpottingPayload = {
   strokes: FullStrokeData[]
   problemDescription: string
@@ -141,6 +145,7 @@ export type ErrorSpottingPayload = {
   userAnswer: string | string[]
   hint: string
 }
+
 export type ErrorSpottingResponse = {
   highlightedStrokeIds: string[]
 }

package/src/features/exampleSolution/components/ExampleSolutionModalContent.tsx

@@ -1,7 +1,8 @@
 import { StyleSheet, View } from 'react-native'
 import React from 'react'
 import { COLORS, HeadingVariants, IS_WEB, SPACING, Typography } from '@magmamath/react-native-ui'
-import { useText } from '../../../shared/translation'
+import { useUnit } from 'effector-react'
+import { $localization } from '../../../shared/translation'
 import { ExampleSolutionModalParams } from '../types'
 import { QuestionSection } from './QuestionSection'
 import { SolutionSection } from './SolutionSection'
@@ -17,7 +18,7 @@ export const ExampleSolutionModalContent = ({
   params: { model, payload, cacheKey },
 }: ExampleSolutionModalContentProps) => {
   const { result, status } = useExampleSolution({ model, payload, cacheKey })
-  const t = useText()
+  const localization = useUnit($localization)
 
   return (
     <View
@@ -27,7 +28,7 @@ export const ExampleSolutionModalContent = ({
       ]}
     >
       <Typography align="center" variant={HeadingVariants.H2} style={{ color: COLORS.NEUTRAL_9 }}>
-        {t('exampleSolution.exampleSolution')}
+        {localization.exampleSolution.exampleSolution}
       </Typography>
       <View style={styles.content}>
         <QuestionSection

package/src/features/exampleSolution/model/ExampleSolutionApi.ts

@@ -1,7 +1,7 @@
 import { createControllerEffect } from './../../../lib/effector/createControllerEffect'
 import { ExampleSolutionApiRequests, ExampleSolutionErrorHandler } from '../types'
-import { getText } from '../../../shared/translation/helpers'
-import { createEffect, sample } from 'effector'
+import { $localization } from '../../../shared/translation'
+import { createEffect, sample, attach, StoreValue } from 'effector'
 
 type ExampleSolutionApiProps = {
   api: ExampleSolutionApiRequests
@@ -12,9 +12,13 @@ export class ExampleSolutionsApi {
   public readonly generateExampleSolutionFx
   public readonly errorHandlerFx?: ExampleSolutionErrorHandler
 
-  public readonly errorHandlingFx = createEffect(() => {
-    if (!this.errorHandlerFx) return
-    this.errorHandlerFx(getText('exampleSolution.errorMessage'))
+  public readonly errorHandlingFx = attach({
+    source: $localization,
+    effect: createEffect((localization: StoreValue<typeof $localization>) => {
+      if (!this.errorHandlerFx) return
+      const errorMessage = localization.exampleSolution.errorMessage
+      this.errorHandlerFx(errorMessage)
+    }),
   })
 
   constructor({ api, errorHandler }: ExampleSolutionApiProps) {

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

@@ -1,77 +1,21 @@
-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 React from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { SelectedLayout } from './types'
-import { getMainKeyboardGroup } from '../../helpers'
-import { getSelectOptions } from './helpers'
-import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
+import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
+import { IntegralABIcon } from '../../../../shared/icons/IntegralABIcon'
+import { SwitchableLayout } from '../SwitchableLayout/SwitchableLayout'
+import { SwitchableLayoutConfig } from '../SwitchableLayout/types'
 
-export const AlgebraLayout = ({ onLayoutChange, keys, ...props }: KeyboardLayoutProps) => {
-  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
-  const { width } = useWindowDimensions()
-  const selectOptions = getSelectOptions({ selectedLayout, setSelectedLayout, onLayoutChange })
-  const isDesktop =
-    width > KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].mobileBreakpoint && !IS_MOBILE
-
-  const keyboardGroups = useMemo(() => {
-    const algebra = getMainKeyboardGroup(keys, KeyboardType.AlgebraAdvanced)
-    const basic = getMainKeyboardGroup(
-      keys,
-      isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,
-    )
-
-    return new Map([
-      [SelectedLayout.BASIC, basic],
-      [SelectedLayout.ALGEBRA, algebra],
-    ])
-  }, [isDesktop, keys])
-
-  const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
-
-  return (
-    <View style={styles.container}>
-      {isDesktop && (
-        <SelectGroup
-          numOfRows={2}
-          options={selectOptions}
-          size={SelectOptionSize.SMALL}
-          style={{
-            container: styles.optionContainer,
-            option: { container: styles.option },
-          }}
-          color={props.color}
-          selectedOptions={[
-            selectedLayout === SelectedLayout.BASIC ? selectOptions[0] : selectOptions[1],
-          ]}
-        />
-      )}
-      <KeysList keys={currentKeys} numOfRows={3} {...props} />
-    </View>
-  )
+const ALGEBRA_CONFIG: SwitchableLayoutConfig = {
+  secondaryKeyboardType: KeyboardType.AlgebraAdvanced,
+  BasicIcon: (isSelected) => (
+    <AlgebraIcon color={isSelected ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} size={22} />
+  ),
+  SecondaryIcon: (isSelected) => (
+    <IntegralABIcon color={isSelected ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} size={25} />
+  ),
 }
 
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: 16,
-    paddingRight: 16,
-  },
-  optionContainer: {
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: IS_MOBILE ? 60 : 'auto',
-    width: 'auto',
-    paddingRight: 18,
-    borderRightWidth: 1,
-    borderRightColor: COLORS.NEUTRAL_3,
-    maxWidth: 65,
-    gap: 9,
-  },
-  option: {
-    flexBasis: 45,
-    width: 44,
-  },
-})
+export const AlgebraLayout = (props: KeyboardLayoutProps) => {
+  return <SwitchableLayout {...props} config={ALGEBRA_CONFIG} />
+}

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
+import { GeometryIcon } from '../../../../shared/icons/GeometryIcon'
+import { SwitchableLayout } from '../SwitchableLayout/SwitchableLayout'
+import { SwitchableLayoutConfig } from '../SwitchableLayout/types'
+
+const GEOMETRY_CONFIG: SwitchableLayoutConfig = {
+  secondaryKeyboardType: KeyboardType.Geometry,
+  BasicIcon: (isSelected) => (
+    <AlgebraIcon color={isSelected ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} size={22} />
+  ),
+  SecondaryIcon: (isSelected) => (
+    <GeometryIcon color={isSelected ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} size={16} />
+  ),
+}
+
+export const GeometryLayout = (props: KeyboardLayoutProps) => {
+  return <SwitchableLayout {...props} config={GEOMETRY_CONFIG} />
+}

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

@@ -0,0 +1,100 @@
+import React, { useMemo, useState } from 'react'
+import { KeysList } from '../KeysList/KeysList'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import {
+  COLORS,
+  IS_MOBILE,
+  SelectGroup,
+  SelectOptionSize,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { KeyboardType } from '../../types/types'
+import { SelectedLayout, SwitchableLayoutProps } from './types'
+import { getMainKeyboardGroup } from '../../helpers'
+import { getSelectOptions } from './helpers'
+import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
+
+export const SwitchableLayout = ({
+  onLayoutChange,
+  keys,
+  config,
+  ...props
+}: SwitchableLayoutProps) => {
+  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
+  const { width } = useWindowDimensions()
+  const selectOptions = getSelectOptions({
+    selectedLayout,
+    onBasicPressIn: () => {
+      setSelectedLayout(SelectedLayout.BASIC)
+      onLayoutChange?.(false)
+    },
+    onSecondaryPressIn: () => {
+      setSelectedLayout(SelectedLayout.SECONDARY)
+      onLayoutChange?.(true)
+    },
+    BasicIcon: config.BasicIcon,
+    SecondaryIcon: config.SecondaryIcon,
+  })
+  const isDesktop =
+    width > KEYBOARD_LAYOUTS[config.secondaryKeyboardType].mobileBreakpoint && !IS_MOBILE
+
+  const keyboardGroups = useMemo(() => {
+    const secondary = getMainKeyboardGroup(keys, config.secondaryKeyboardType)
+    const basic = getMainKeyboardGroup(
+      keys,
+      isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,
+    )
+
+    return new Map([
+      [SelectedLayout.BASIC, basic],
+      [SelectedLayout.SECONDARY, secondary],
+    ])
+  }, [isDesktop, keys, config.secondaryKeyboardType])
+
+  const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
+
+  return (
+    <View style={styles.container}>
+      {isDesktop && (
+        <SelectGroup
+          numOfRows={2}
+          options={selectOptions}
+          size={SelectOptionSize.SMALL}
+          style={{
+            container: styles.optionContainer,
+            option: { container: styles.option },
+          }}
+          color={props.color}
+          selectedOptions={[
+            selectedLayout === SelectedLayout.BASIC ? selectOptions[0] : selectOptions[1],
+          ]}
+        />
+      )}
+      <KeysList keys={currentKeys} numOfRows={3} {...props} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: SPACING[400],
+    paddingRight: SPACING[400],
+  },
+  optionContainer: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: IS_MOBILE ? 60 : 'auto',
+    width: 'auto',
+    paddingRight: 18,
+    borderRightWidth: 1,
+    borderRightColor: COLORS.NEUTRAL_3,
+    maxWidth: 65,
+    gap: 9,
+  },
+  option: {
+    flexBasis: 45,
+    width: 44,
+  },
+})