@magmamath/students-features 0.5.0 → 0.5.1-rc-1

package/dist/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA"}

package/dist/typescript/module/lib/effector/createEntityFieldStore.d.ts

@@ -1,4 +1,3 @@
-import { Event } from 'effector';
 type UpdateField<T> = {
     key: string;
 } & ({
@@ -12,7 +11,6 @@ export declare class EntityFieldStore<T> {
     readonly setField: import("effector").EventCallable<UpdateField<T>>;
     readonly reset: import("effector").EventCallable<void>;
     readonly $state: import("effector").StoreWritable<Record<string, T>>;
-    on<EV>(event: Event<EV>, fn: (state: Record<string, T>, payload: EV) => Record<string, T> | void): this;
 }
 export declare function createEntityFieldStore<T>(): EntityFieldStore<T>;
 export {};

package/dist/typescript/module/lib/effector/createEntityFieldStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createEntityFieldStore.d.ts","sourceRoot":"","sources":["../../../../../src/lib/effector/createEntityFieldStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,EAAE,MAAM,UAAU,CAAA;AAE1D,KAAK,WAAW,CAAC,CAAC,IAAI;IACpB,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,CAAC;IAAE,IAAI,EAAE,CAAC,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,CAAC,GAAG,IAAI,CAAA;CAAE,CAAC,CAAA;AAEnF,qBAAa,gBAAgB,CAAC,CAAC;IAC7B,SAAgB,QAAQ,mDAAgC;IACxD,SAAgB,KAAK,yCAAgB;IAErC,SAAgB,MAAM,sDAUF;IAEb,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,EAChB,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,KAAK,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,IAAI;CAK1E;AAED,wBAAgB,sBAAsB,CAAC,CAAC,yBAEvC"}
+{"version":3,"file":"createEntityFieldStore.d.ts","sourceRoot":"","sources":["../../../../../src/lib/effector/createEntityFieldStore.ts"],"names":[],"mappings":"AAEA,KAAK,WAAW,CAAC,CAAC,IAAI;IACpB,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,CAAC;IAAE,IAAI,EAAE,CAAC,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,CAAC,GAAG,IAAI,CAAA;CAAE,CAAC,CAAA;AAEnF,qBAAa,gBAAgB,CAAC,CAAC;IAC7B,SAAgB,QAAQ,mDAAgC;IACxD,SAAgB,KAAK,yCAAgB;IAErC,SAAgB,MAAM,sDAUF;CACrB;AAED,wBAAgB,sBAAsB,CAAC,CAAC,yBAEvC"}

package/dist/typescript/module/shared/icons/icon.types.d.ts

@@ -1,4 +1,3 @@
-import { StyleProp, ViewStyle } from 'react-native';
 export type IconProps = {
     color?: string;
     className?: string;
@@ -6,6 +5,5 @@ export type IconProps = {
     strokeWidth?: string;
     width?: number;
     height?: number;
-    style?: StyleProp<ViewStyle>;
 };
 //# sourceMappingURL=icon.types.d.ts.map

package/dist/typescript/module/shared/icons/icon.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.types.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEnD,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B,CAAA"}
+{"version":3,"file":"icon.types.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/icon.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA"}

package/dist/typescript/module/shared/translation/constants.d.ts

@@ -12,13 +12,6 @@ export declare const LOCALIZATION_CONFIGS: {
         "time.monthsAgo": string;
         "time.yearAgo": string;
         "time.yearsAgo": string;
-        chat: {
-            anotherHint: string;
-            answerAgain: string;
-            errorMessage: string;
-            howCanIHelp: string;
-            showError: string;
-        };
     };
     "en-GB": {
         "teacherFeedback.noComments": string;
@@ -33,13 +26,6 @@ export declare const LOCALIZATION_CONFIGS: {
         "time.monthsAgo": string;
         "time.yearAgo": string;
         "time.yearsAgo": string;
-        chat: {
-            anotherHint: string;
-            answerAgain: string;
-            errorMessage: string;
-            howCanIHelp: string;
-            showError: string;
-        };
     };
     "sv-SE": {
         "teacherFeedback.noComments": string;
@@ -54,13 +40,6 @@ export declare const LOCALIZATION_CONFIGS: {
         "time.monthsAgo": string;
         "time.yearAgo": string;
         "time.yearsAgo": string;
-        chat: {
-            anotherHint: string;
-            answerAgain: string;
-            errorMessage: string;
-            howCanIHelp: string;
-            showError: string;
-        };
     };
 };
 //# sourceMappingURL=constants.d.ts.map

package/dist/typescript/module/shared/translation/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIhC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIhC,CAAA"}

package/dist/typescript/module/shared/translation/helpers.d.ts

@@ -1,7 +1,6 @@
 import { LOCALIZATION_CONFIGS } from './constants';
-import { GetText, TranslationKeys, Translations } from './types';
-export declare function getTranslation(config: Translations, key: TranslationKeys): string;
+import { GetText, LocalizationConfig } from './types';
 export declare const getSubstitutedString: (str: string, substitutions?: Record<string, string>) => string;
 export declare const getText: GetText;
-export declare const setFeaturesLocalization: (generator: ((config: typeof LOCALIZATION_CONFIGS) => Translations) | Translations) => void;
+export declare const setFeaturesLocalization: (generator: ((config: typeof LOCALIZATION_CONFIGS) => LocalizationConfig) | LocalizationConfig) => void;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/typescript/module/shared/translation/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEhE,wBAAgB,cAAc,CAAC,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,eAAe,UAexE;AAED,eAAO,MAAM,oBAAoB,QAAS,MAAM,kBAAiB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,WAWtF,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,OAMrB,CAAA;AAED,eAAO,MAAM,uBAAuB,cACvB,CAAC,CAAC,MAAM,EAAE,OAAO,oBAAoB,KAAK,YAAY,CAAC,GAAG,YAAY,SAGlF,CAAA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAmB,MAAM,SAAS,CAAA;AAEtE,eAAO,MAAM,oBAAoB,QAAS,MAAM,kBAAiB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,WAWtF,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,OAUrB,CAAA;AAED,eAAO,MAAM,uBAAuB,cACvB,CAAC,CAAC,MAAM,EAAE,OAAO,oBAAoB,KAAK,kBAAkB,CAAC,GAAG,kBAAkB,SAG9F,CAAA"}

package/dist/typescript/module/shared/translation/hooks.d.ts

@@ -1,5 +1,5 @@
-import { GetText, Translations } from './types';
+import { GetText, LocalizationConfig } from './types';
 import { LOCALIZATION_CONFIGS } from './constants';
 export declare const useText: () => GetText;
-export declare const useFeaturesLocalization: (generator: ((config: typeof LOCALIZATION_CONFIGS) => Translations) | Translations) => void;
+export declare const useFeaturesLocalization: (generator: ((config: typeof LOCALIZATION_CONFIGS) => LocalizationConfig) | LocalizationConfig) => void;
 //# sourceMappingURL=hooks.d.ts.map

package/dist/typescript/module/shared/translation/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAGlD,eAAO,MAAM,OAAO,QAAO,OAQ1B,CAAA;AAED,eAAO,MAAM,uBAAuB,cACvB,CAAC,CAAC,MAAM,EAAE,OAAO,oBAAoB,KAAK,YAAY,CAAC,GAAG,YAAY,SAKlF,CAAA"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAGlD,eAAO,MAAM,OAAO,QAAO,OAY1B,CAAA;AAED,eAAO,MAAM,uBAAuB,cACrB,CAAC,CAAC,MAAM,EAAE,OAAO,oBAAoB,KAAK,kBAAkB,CAAC,GAAG,kBAAkB,SAKhG,CAAA"}

package/dist/typescript/module/shared/translation/index.d.ts

@@ -2,4 +2,5 @@ export { useFeaturesLocalization, useText } from './hooks';
 export { setFeaturesLocalization, getText as t } from './helpers';
 export { $localization, setLocalization } from './model';
 export { Locale } from './types';
+export type { LocalizationConfig } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/shared/translation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAC1D,OAAO,EAAE,uBAAuB,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,WAAW,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAC1D,OAAO,EAAE,uBAAuB,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,WAAW,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAChC,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA"}

package/dist/typescript/module/shared/translation/model.d.ts

@@ -1,45 +1,5 @@
-import { Translations } from './types';
+import { LocalizationConfig } from './types';
 import { LOCALIZATION_CONFIGS } from './constants';
-export declare const setLocalization: import("effector").EventCallable<{
-    "teacherFeedback.noComments": string;
-    "time.justNow": string;
-    "time.minuteAgo": string;
-    "time.minutesAgo": string;
-    "time.hourAgo": string;
-    "time.hoursAgo": string;
-    "time.dayAgo": string;
-    "time.daysAgo": string;
-    "time.monthAgo": string;
-    "time.monthsAgo": string;
-    "time.yearAgo": string;
-    "time.yearsAgo": string;
-    chat: {
-        anotherHint: string;
-        answerAgain: string;
-        errorMessage: string;
-        howCanIHelp: string;
-        showError: string;
-    };
-} | ((config: typeof LOCALIZATION_CONFIGS) => Translations)>;
-export declare const $localization: import("effector").StoreWritable<{
-    "teacherFeedback.noComments": string;
-    "time.justNow": string;
-    "time.minuteAgo": string;
-    "time.minutesAgo": string;
-    "time.hourAgo": string;
-    "time.hoursAgo": string;
-    "time.dayAgo": string;
-    "time.daysAgo": string;
-    "time.monthAgo": string;
-    "time.monthsAgo": string;
-    "time.yearAgo": string;
-    "time.yearsAgo": string;
-    chat: {
-        anotherHint: string;
-        answerAgain: string;
-        errorMessage: string;
-        howCanIHelp: string;
-        showError: string;
-    };
-}>;
+export declare const setLocalization: import("effector").EventCallable<LocalizationConfig | ((config: typeof LOCALIZATION_CONFIGS) => LocalizationConfig)>;
+export declare const $localization: import("effector").StoreWritable<LocalizationConfig>;
 //# sourceMappingURL=model.d.ts.map

package/dist/typescript/module/shared/translation/model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,YAAY,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,kBAAkB,EAAE,MAAM,SAAS,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe,kEACO,OAAO,oBAAoB,KAAK,kBAAkB,EAClF,CAAA;AAEH,eAAO,MAAM,aAAa,sDAMzB,CAAA"}

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

@@ -1,11 +1,11 @@
-import enTranslations from './localization/en.json';
-import { RetrieveKeys } from '../../lib/types/keys';
+import enTranslations from '../../lib/localization/en.json';
 export type Translations = typeof enTranslations;
-export type TranslationKeys = RetrieveKeys<Translations>;
-export type GetText = (key: TranslationKeys, args?: Record<string, string> | null) => string;
+export type TranslationKeys = keyof Translations;
+export type GetText = <T extends TranslationKeys>(key: T, args?: Record<string, string> | null) => Translations[T];
 export declare enum Locale {
     EN = "en-SE",
     SW = "sv-SE",
     GB = "en-GB"
 }
+export type LocalizationConfig = Record<string, string>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/types.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,wBAAwB,CAAA;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAGnD,MAAM,MAAM,YAAY,GAAG,OAAO,cAAc,CAAA;AAChD,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;AACxD,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,KAAK,MAAM,CAAA;AAE5F,oBAAY,MAAM;IAChB,EAAE,UAAU;IACZ,EAAE,UAAU;IACZ,EAAE,UAAU;CACb"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/types.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,gCAAgC,CAAA;AAE3D,MAAM,MAAM,YAAY,GAAG,OAAO,cAAc,CAAA;AAChD,MAAM,MAAM,eAAe,GAAG,MAAM,YAAY,CAAA;AAEhD,MAAM,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,eAAe,EAC9C,GAAG,EAAE,CAAC,EACN,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,KACjC,YAAY,CAAC,CAAC,CAAC,CAAA;AAEpB,oBAAY,MAAM;IAChB,EAAE,UAAU;IACZ,EAAE,UAAU;IACZ,EAAE,UAAU;CACb;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.5.0",
+  "version": "0.5.1-rc-1",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -29,7 +29,7 @@
     "react-native-svg": "^15.10.0"
   },
   "devDependencies": {
-    "@magmamath/react-native-ui": "0.4.0",
+    "@magmamath/react-native-ui": "0.3.22",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",

package/src/features/celebrations/config.ts

@@ -181,10 +181,10 @@ export const CELEBRATION_VARIANTS = {
     },
     speedRange: {
       spark: [14, 28],
-      main: [6, 18],
+      main: [12, 24],
     },
     life: 100,
-    gravity: 0.1,
+    gravity: 0.19,
   },
   [CelebrationVariant.CORRECT_FINISH_ASSIGNMENT]: {
     color: COLORS.PRIMARY_GREEN,
@@ -216,9 +216,9 @@ export const CELEBRATION_VARIANTS = {
     },
     speedRange: {
       spark: [14, 28],
-      main: [6, 18],
+      main: [12, 24],
     },
     life: 100,
-    gravity: 0.1,
+    gravity: 0.19,
   },
 }

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

@@ -1,21 +1,23 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useStoreMap, useUnit } from 'effector-react'
+
+import { ChatbotModel } from '../../model/ChatBotModel'
 import { HelpRequestOption } from './HelpRequestOption'
-import { useChatModel } from '../../context/ChatBotModelContext'
 
 type AlternativesProps = {
+  model: ChatbotModel
   onPressAlternative: (message: string, translatedMessage?: string) => void
   hasMessages: boolean
   isHintFeedback: boolean
 }
 
 export const Alternatives = ({
+  model,
   onPressAlternative,
   hasMessages,
   isHintFeedback,
 }: AlternativesProps) => {
-  const model = useChatModel()
   const isTranslated = useUnit(model.translation.$isTranslated)
   const alternatives = useUnit(model.$alternatives)
   const isTranslationPending = useUnit(model.translation.translateAllMessagesFx.pending)

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

@@ -1,15 +1,18 @@
-import React, { ComponentType } from 'react'
+import React, { ComponentType, ReactNode } from 'react'
 import { ReceivedMessage } from './ReceivedMessage'
 import { SentMessage } from './SentMessage'
-import { T2SState } from '../../types/t2s.types'
-import { MessageVariant } from '../../types/model.types'
-import { ConversationMessage } from '../../types/units.types'
+import { AudioStatus } from '../../types/t2s.types'
+import { MessageVariant, ChatbotRenderer } from '../../types/model.types'
 
 type ChatMessageProps = {
   variant: MessageVariant
-  message: ConversationMessage
-  isTranslated?: boolean
-  t2sState: T2SState
+  message: string
+  onPressTextToSpeech: () => void
+  isTextToSpeechPending: boolean
+  isActive: boolean
+  withTextToSpeech?: boolean
+  audioStatus: AudioStatus
+  renderer?: (props: ChatbotRenderer) => ReactNode
 }
 
 export type VariantProps = Omit<ChatMessageProps, 'variant'>

package/src/features/chatbot/components/ChatMessage/MessageTextToSpeech.tsx

@@ -1,12 +1,9 @@
 import React from 'react'
-import { ActivityIndicator } from 'react-native'
+import { ActivityIndicator, Pressable, StyleSheet, TouchableOpacity } from 'react-native'
 import { SpeakerIcon } from '../../../../shared/icons/SpeakerIcon'
 import { PlayIcon } from '../../../../shared/icons/PlayIcon'
 import { PauseIcon } from '../../../../shared/icons/PauseIcon'
-import { AudioStatus, T2SState } from '../../types/t2s.types'
-import { useChatModel } from '../../context/ChatBotModelContext'
-import { ConversationMessage } from '../../types/units.types'
-import { Button, COLORS } from '@magmamath/react-native-ui'
+import { AudioStatus } from '../../types/t2s.types'
 
 type TextToSpeechIconProps = {
   status: AudioStatus
@@ -20,41 +17,61 @@ const TextToSpeechIcon = ({ status, isActive, isLoading }: TextToSpeechIconProps
   }
 
   if (!isActive) {
-    return <SpeakerIcon color={isActive ? COLORS.PRIMARY_BLUE : undefined} />
+    return <SpeakerIcon color={isActive ? '#55ABE0' : undefined} />
   }
 
-  if (status === 'playing') return <PauseIcon color={COLORS.NEUTRAL_1} />
-  if (status === 'paused') return <PlayIcon color={COLORS.NEUTRAL_1} />
-  return <SpeakerIcon color={isActive ? COLORS.PRIMARY_BLUE : undefined} />
+  if (status === 'playing') return <PauseIcon color="#FFF" />
+  if (status === 'paused') return <PlayIcon color="#FFF" />
+  return <SpeakerIcon color={isActive ? '#55ABE0' : undefined} />
 }
 
 type MessageTextToSpeechProps = {
-  state: T2SState
-  message: ConversationMessage
+  status: AudioStatus
+  disabled: boolean
+  isActive: boolean
+  isLoading: boolean
+  onPress: () => void
 }
 
 export const MessageTextToSpeech = ({
-  state: { status, disabled, isActive, isLoading },
-  message,
-}: MessageTextToSpeechProps) => {
-  const model = useChatModel()
-
-  function play() {
-    void model.t2s.play({
-      isTranslated: model.translation.$isTranslated.getState(),
-      message,
-    })
-  }
-
-  return (
-    <Button
+  status,
+  disabled,
+  isActive,
+  isLoading,
+  onPress,
+}: MessageTextToSpeechProps) => (
+  <TouchableOpacity style={styles.container} onPress={onPress}>
+    <Pressable
       disabled={disabled}
-      isActive={isActive}
-      variant={'secondary'}
-      colorScheme={'blue'}
-      size={'small'}
-      onPress={play}
-      icon={<TextToSpeechIcon isActive={isActive} isLoading={isLoading} status={status} />}
-    />
-  )
-}
+      onPress={onPress}
+      style={[styles.button, { backgroundColor: isActive && !isLoading ? '#55ABE0' : '#FFF' }]}
+    >
+      <TextToSpeechIcon isActive={isActive} isLoading={isLoading} status={status} />
+    </Pressable>
+  </TouchableOpacity>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'stretch',
+    justifyContent: 'flex-end',
+    width: 45,
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 28,
+    height: 28,
+    padding: 1,
+    marginLeft: 'auto',
+    shadowColor: '#333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    elevation: 3,
+    borderRadius: 6,
+    borderColor: '#F2F2F4',
+    borderWidth: 0.5,
+    backgroundColor: '#FFF',
+  },
+})

package/src/features/chatbot/components/ChatMessage/ReceivedMessage.tsx

@@ -1,24 +1,42 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
 import { VariantProps } from './ChatMessage'
 import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
-import { MessageContent } from './MessageContent'
+import { MessageTextToSpeech } from './MessageTextToSpeech'
+import { MessageVariant } from '../../types/model.types'
 
-export const ReceivedMessage = ({ message, isTranslated, t2sState }: VariantProps) => {
-  const text = isTranslated ? message.translatedMessage : message.message
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.icon}>
-        <ChatbotIcon width={60} height={80} />
-      </View>
+export const ReceivedMessage = ({
+  message,
+  onPressTextToSpeech,
+  isTextToSpeechPending,
+  isActive,
+  audioStatus,
+  renderer,
+  withTextToSpeech = true,
+}: VariantProps) => (
+  <View style={styles.container}>
+    <View style={styles.icon}>
+      <ChatbotIcon width={60} height={80} />
+    </View>
 
-      <View style={styles.message}>
-        <MessageContent message={message} t2sState={t2sState} text={text ?? ''} />
-      </View>
+    <View style={styles.message}>
+      <Text style={[styles.messageText, { width: withTextToSpeech ? 240 : 305 }]}>
+        {renderer
+          ? renderer({ message, variant: MessageVariant.RECEIVED, withTextToSpeech })
+          : message}
+      </Text>
+      {withTextToSpeech && (
+        <MessageTextToSpeech
+          isActive={isActive}
+          isLoading={isTextToSpeechPending}
+          onPress={onPressTextToSpeech}
+          disabled={isTextToSpeechPending}
+          status={audioStatus}
+        />
+      )}
     </View>
-  )
-}
+  </View>
+)
 
 const styles = StyleSheet.create({
   container: {
@@ -46,4 +64,11 @@ const styles = StyleSheet.create({
     borderBottomLeftRadius: 0,
     backgroundColor: '#F2F2F4',
   },
+  messageText: {
+    flex: 1,
+    fontSize: 20,
+    fontWeight: 400,
+    fontFamily: 'Buenos Aires',
+    color: '#33334D',
+  },
 })

package/src/features/chatbot/components/ChatMessage/SentMessage.tsx

@@ -1,16 +1,17 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { VariantProps } from './ChatMessage'
+import { MessageVariant } from '../../types/model.types'
 
-export const SentMessage = React.memo(({ message, isTranslated }: VariantProps) => {
-  const text = isTranslated ? message.translatedMessage : message.message
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>{text}</Text>
-    </View>
-  )
-})
+export const SentMessage = ({ message, renderer }: VariantProps) => (
+  <View style={styles.container}>
+    <Text style={styles.text}>
+      {renderer
+        ? renderer({ message, variant: MessageVariant.SENT, withTextToSpeech: false })
+        : message}
+    </Text>
+  </View>
+)
 
 const styles = StyleSheet.create({
   container: {

package/src/features/chatbot/components/ChatMessages/ChatbotMessages.tsx

@@ -1,16 +1,23 @@
-import React, { useRef } from 'react'
+import React, { ReactNode, useRef } from 'react'
 import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useStoreMap, useUnit } from 'effector-react'
 import { ChatbotModel } from '../../model/ChatBotModel'
 import { ChatMessage } from '../ChatMessage/ChatMessage'
 import { MessageLoader } from '../ChatMessage/MessageLoader'
 import { Alternatives } from '../Alternatives/Alternatives'
-import { MessageVariant } from '../../types/model.types'
+import { AUDIO_CONFIG, DEFAULT_VOICE, TEXT_TO_SPEECH_CONFIG } from '../../constants'
+import { MessageVariant, ChatbotRenderer } from '../../types/model.types'
 
 type ChatbotMessagesProps = {
   model: ChatbotModel
   isHintFeedback: boolean
+  sanitizeSpeechInput: (speech: string) => string
   isTextToSpeechEnabled: boolean
+  textToSpeechConfig?: {
+    voice: typeof DEFAULT_VOICE
+    audioConfig: typeof AUDIO_CONFIG
+  }
+  renderer?: (props: ChatbotRenderer) => ReactNode
 }
 
 const TOOLBAR_HEIGHT = 140
@@ -22,7 +29,10 @@ const BOTTOM_OFFSET = Platform.select({
 export const ChatbotMessages = ({
   model,
   isHintFeedback,
+  sanitizeSpeechInput,
   isTextToSpeechEnabled,
+  textToSpeechConfig,
+  renderer,
 }: ChatbotMessagesProps) => {
   const dimensions = useWindowDimensions()
   const ref = useRef<ScrollView>(null)
@@ -39,6 +49,16 @@ export const ChatbotMessages = ({
 
   const messages = useStoreMap(model.$currentChatData, ({ messages }) => messages)
 
+  const playTextToSpeech = (id: string, message: string, translatedMessage?: string) => {
+    const text = isTranslated ? (translatedMessage as string) : message
+    void model.t2s.play({
+      text: sanitizeSpeechInput(text),
+      messageId: id,
+      isTranslated,
+      config: textToSpeechConfig ?? TEXT_TO_SPEECH_CONFIG,
+    })
+  }
+
   const askChatForHelp = (message: string, translatedMessage?: string) => {
     void model.sendHelpRequestFx({ message, translatedMessage })
   }
@@ -47,7 +67,6 @@ export const ChatbotMessages = ({
     <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
       <ScrollView
         ref={ref}
-        bounces={false}
         contentContainerStyle={styles.list}
         onContentSizeChange={(_, height) => {
           ref.current?.scrollToEnd()
@@ -59,19 +78,17 @@ export const ChatbotMessages = ({
       >
         {isOpen && (
           <View style={styles.gap}>
-            {messages.map((message) => (
+            {messages.map(({ id, message, translatedMessage, isOwnMessage }) => (
               <ChatMessage
-                key={message.id}
-                isTranslated={isTranslated}
-                message={message}
-                variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
-                t2sState={{
-                  isEnabled: isTextToSpeechEnabled && !message.isOwnMessage,
-                  isActive: message.id === currentPlayingId,
-                  isLoading: isTextToSpeechPending,
-                  status: audioStatus,
-                  disabled: isTextToSpeechPending,
-                }}
+                key={id}
+                message={isTranslated ? (translatedMessage as string) : message}
+                renderer={renderer}
+                audioStatus={audioStatus}
+                onPressTextToSpeech={() => playTextToSpeech(id, message, translatedMessage)}
+                isActive={id === currentPlayingId}
+                isTextToSpeechPending={isTextToSpeechPending}
+                variant={isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
+                withTextToSpeech={isTextToSpeechEnabled && !isOwnMessage}
               />
             ))}
 
@@ -81,6 +98,7 @@ export const ChatbotMessages = ({
 
         {!isHelpRequestPending && isOpen && (
           <Alternatives
+            model={model}
             onPressAlternative={askChatForHelp}
             hasMessages={messages.length > 1}
             isHintFeedback={isHintFeedback}
@@ -95,13 +113,12 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'flex-end',
-    width: 378,
+    width: 372,
     height: '100%',
   },
   list: {
     alignItems: 'flex-end',
     paddingVertical: 2,
-    paddingRight: 6,
   },
   gap: {
     flex: 1,