@magmamath/students-features 0.2.0-fix1 → 0.2.0-hotfix-circular-dependencies-chatbot

package/dist/typescript/module/features/chatbot/model/t2s.d.ts

@@ -1,14 +1,16 @@
-import { ChatbotModel } from './model';
+import { StoreWritable } from 'effector';
 import { AudioProvider, AudioStatus, PlayTextToSpeechProps } from '../types/t2s.types';
+import { ChatbotAPI } from './api';
 export declare class ChatTextToSpeech {
-    private readonly model;
     private readonly audioCache;
     private audioProvider;
     readonly setCurrentPlayingId: import("effector").EventCallable<string | null>;
-    readonly $currentPlayingId: import("effector").StoreWritable<string | null>;
+    readonly $currentPlayingId: StoreWritable<string | null>;
     readonly setStatus: import("effector").EventCallable<AudioStatus>;
-    readonly $status: import("effector").StoreWritable<AudioStatus>;
-    constructor(chatbotModel: ChatbotModel);
+    readonly $status: StoreWritable<AudioStatus>;
+    readonly $isOpen: StoreWritable<boolean>;
+    readonly api: ChatbotAPI;
+    constructor({ $isOpen, api }: any);
     setAudioProvider(audioProvider: AudioProvider): void;
     private getCacheKey;
     play({ text, messageId, isTranslated, config }: PlayTextToSpeechProps): Promise<void>;

package/dist/typescript/module/features/chatbot/model/t2s.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"t2s.d.ts","sourceRoot":"","sources":["../../../../../../src/features/chatbot/model/t2s.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGtC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEtF,qBAAa,gBAAgB;IACzB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAc;IACpC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA6B;IACxD,OAAO,CAAC,aAAa,CAA6B;IAElD,QAAQ,CAAC,mBAAmB,kDAA+B;IAC3D,QAAQ,CAAC,iBAAiB,kDAA0C;IACpE,QAAQ,CAAC,SAAS,gDAA6B;IAC/C,QAAQ,CAAC,OAAO,gDAA+C;gBAEnD,YAAY,EAAE,YAAY;IAQ/B,gBAAgB,CAAC,aAAa,EAAE,aAAa;IAIpD,OAAO,CAAC,WAAW,CAElB;IAEK,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,qBAAqB;IA0DpE,IAAI;IAYJ,KAAK;CAKf"}
+{"version":3,"file":"t2s.d.ts","sourceRoot":"","sources":["../../../../../../src/features/chatbot/model/t2s.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAE,MAAM,UAAU,CAAA;AAE9D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,qBAAa,gBAAgB;IACzB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA6B;IACxD,OAAO,CAAC,aAAa,CAA6B;IAElD,QAAQ,CAAC,mBAAmB,kDAA+B;IAC3D,QAAQ,CAAC,iBAAiB,+BAA0C;IACpE,QAAQ,CAAC,SAAS,gDAA6B;IAC/C,QAAQ,CAAC,OAAO,6BAA+C;IAE/D,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC1C,QAAQ,CAAC,GAAG,EAAE,UAAU,CAAA;gBAEV,EACV,OAAO,EACK,GAAG,EAChB,EAAE,GAAG;IASC,gBAAgB,CAAC,aAAa,EAAE,aAAa;IAIpD,OAAO,CAAC,WAAW,CAElB;IAEK,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,qBAAqB;IA0DpE,IAAI;IAYJ,KAAK;CAKf"}

package/dist/typescript/module/features/chatbot/model/translation.d.ts

@@ -1,16 +1,21 @@
-import { type Effect } from 'effector';
-import { ChatbotModel } from './model';
+import { type Effect, type Store } from 'effector';
 import { TranslateAlternativesFxProps, TranslateBatchFxProps, TranslateMessageFxProps } from '../types/translation.types';
-import { ConversationMessage } from '../types/model.types';
+import { ChatbotModelProps, ConversationMessage } from '../types/model.types';
 import { GetAlternativesResponse } from '../types/api.types';
+import { ChatbotAPI } from './api';
 export declare class ChatbotTranslation {
-    private readonly model;
     readonly setIsTranslated: import("effector").EventCallable<boolean>;
     readonly $isTranslated: import("effector").StoreWritable<boolean>;
     readonly translateMessageFx: Effect<TranslateMessageFxProps, ConversationMessage>;
     readonly translateBatchFx: Effect<TranslateBatchFxProps['params'], ConversationMessage[]>;
     readonly translateAlternativesFx: Effect<TranslateAlternativesFxProps['params'], GetAlternativesResponse | null>;
-    constructor(chatbotModel: ChatbotModel);
+    readonly credits: ChatbotModelProps['credits'];
+    readonly $alternatives: Store<GetAlternativesResponse | null>;
+    readonly setAlternatives: import("effector").EventCallable<GetAlternativesResponse | null>;
+    readonly defaultMessages: ChatbotModelProps['messages'];
+    readonly api: ChatbotAPI;
+    readonly messages: any;
+    constructor({ credits, $alternatives, setAlternatives, defaultMessages, messages, api, }: any);
     private shouldSkipTranslation;
     private initTranslationSamples;
     private createTranslateAlternativesEffect;

package/dist/typescript/module/features/chatbot/model/translation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translation.d.ts","sourceRoot":"","sources":["../../../../../../src/features/chatbot/model/translation.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,MAAM,EAAU,MAAM,UAAU,CAAA;AAC1F,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,OAAO,EACH,4BAA4B,EAC5B,qBAAqB,EACrB,uBAAuB,EAC1B,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAG5D,qBAAa,kBAAkB;IAC3B,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAc;IAEpC,QAAQ,CAAC,eAAe,4CAAyB;IACjD,QAAQ,CAAC,aAAa,4CAAuC;IAE7D,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAA;IACjF,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC,CAAA;IACzF,QAAQ,CAAC,uBAAuB,EAAE,MAAM,CACpC,4BAA4B,CAAC,QAAQ,CAAC,EACtC,uBAAuB,GAAG,IAAI,CACjC,CAAA;gBAEW,YAAY,EAAE,YAAY;IAUtC,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,sBAAsB;IAkB9B,OAAO,CAAC,iCAAiC;IAwDzC,OAAO,CAAC,4BAA4B;IAuBpC,OAAO,CAAC,0BAA0B;YA6DpB,uBAAuB;IAmB9B,KAAK;CAGf"}
+{"version":3,"file":"translation.d.ts","sourceRoot":"","sources":["../../../../../../src/features/chatbot/model/translation.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,MAAM,EAAU,KAAK,KAAK,EAAE,MAAM,UAAU,CAAA;AAEtG,OAAO,EACH,4BAA4B,EAC5B,qBAAqB,EACrB,uBAAuB,EAC1B,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,qBAAa,kBAAkB;IAC3B,QAAQ,CAAC,eAAe,4CAAyB;IACjD,QAAQ,CAAC,aAAa,4CAAuC;IAE7D,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAA;IACjF,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC,CAAA;IACzF,QAAQ,CAAC,uBAAuB,EAAE,MAAM,CACpC,4BAA4B,CAAC,QAAQ,CAAC,EACtC,uBAAuB,GAAG,IAAI,CACjC,CAAA;IAEH,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IAC9C,QAAQ,CAAC,aAAa,EAAE,KAAK,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAA;IAC7D,QAAQ,CAAC,eAAe,mEAAgD;IACxE,QAAQ,CAAC,eAAe,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAA;IACvD,QAAQ,CAAC,GAAG,EAAE,UAAU,CAAA;IACxB,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAA;gBAER,EACV,OAAO,EACP,aAAa,EACb,eAAe,EACf,eAAe,EACf,QAAQ,EACR,GAAG,GACJ,EAAE,GAAG;IAgBN,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,sBAAsB;IAkB9B,OAAO,CAAC,iCAAiC;IAwDzC,OAAO,CAAC,4BAA4B;IAuBpC,OAAO,CAAC,0BAA0B;YA8DpB,uBAAuB;IAmB9B,KAAK;CAGf"}

package/dist/typescript/module/features/feedback/components/TeacherFeedbackButton/TeacherFeedbackButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TeacherFeedbackButton.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/feedback/components/TeacherFeedbackButton/TeacherFeedbackButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,KAAK,0BAA0B,GAAG;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,qBAAqB,+DAM/B,0BAA0B,sBA4D5B,CAAA"}
+{"version":3,"file":"TeacherFeedbackButton.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/feedback/components/TeacherFeedbackButton/TeacherFeedbackButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,KAAK,0BAA0B,GAAG;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,qBAAqB,+DAM/B,0BAA0B,sBAgE5B,CAAA"}

package/dist/typescript/module/features/feedback/components/UnreadMessagesBadge.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 type UnreadMessagesBadgeProps = {
     badgeContent?: number;
     withBorder?: boolean;
     style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
 };
-export declare const UnreadMessagesBadge: ({ badgeContent, withBorder, style }: UnreadMessagesBadgeProps) => React.JSX.Element;
+export declare const UnreadMessagesBadge: ({ badgeContent, withBorder, style, textStyle }: UnreadMessagesBadgeProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=UnreadMessagesBadge.d.ts.map

package/dist/typescript/module/features/feedback/components/UnreadMessagesBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnreadMessagesBadge.d.ts","sourceRoot":"","sources":["../../../../../../src/features/feedback/components/UnreadMessagesBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoC,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrF,KAAK,wBAAwB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,mBAAmB,wCAAiD,wBAAwB,sBAcxG,CAAA"}
+{"version":3,"file":"UnreadMessagesBadge.d.ts","sourceRoot":"","sources":["../../../../../../src/features/feedback/components/UnreadMessagesBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAGhG,KAAK,wBAAwB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,mBAAmB,mDAA4D,wBAAwB,sBAcnH,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.2.0-fix1",
+  "version": "0.2.0-hotfix-circular-dependencies-chatbot",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "dist/commonjs/index.js",
@@ -17,17 +17,17 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@magmamath/react-native-ui": "0.2.15",
     "effector": "^23.2.3",
     "effector-react": "^23.2.1"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-svg": "^15.10.0"
+    "react-native-svg": "^15.10.0",
+    "@magmamath/react-native-ui": "*"
   },
   "devDependencies": {
-    "@magmamath/react-native-ui": "0.2.15",
+    "@magmamath/react-native-ui": "0.3.0",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",

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

@@ -1,7 +1,14 @@
 import React from 'react'
 import { ComponentType, PropsWithChildren } from 'react'
 import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native'
-import { Button } from '@magmamath/react-native-ui'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonStates,
+  ButtonVariant,
+  COLORS,
+} from '@magmamath/react-native-ui'
 import { useUnit } from 'effector-react'
 import { ChatbotModel } from '../../model/model'
 import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
@@ -49,12 +56,24 @@ export const ChatControls = ({
         <Button
           onPress={onPressClose}
           style={{
-            container: styles.buttonClose,
-            button: {
+            button: styles.buttonClose,
+          }}
+          variant={ButtonVariant.PRIMARY}
+          size={ButtonSize.LARGE}
+          colorScheme={ButtonColor.GRAY}
+          raiseLevel={5}
+          customColorScheme={{
+            [ButtonStates.DEFAULT]: {
               backgroundColor: '#FFF',
+              borderColor: COLORS.NEUTRAL_5,
+              raiseColor: COLORS.NEUTRAL_5,
+            },
+            [ButtonStates.PRESSED]: {
+              backgroundColor: COLORS.NEUTRAL_4,
+              borderColor: COLORS.NEUTRAL_5,
+              raiseColor: COLORS.NEUTRAL_5,
             },
           }}
-          raiseLevel={5}
         >
           <CloseIcon />
         </Button>
@@ -84,6 +103,10 @@ const styles = StyleSheet.create({
   buttonClose: {
     width: 50,
     height: 50,
+    borderRadius: 50,
+    paddingHorizontal: 0,
+    borderWidth: 1.5,
+    borderColor: COLORS.NEUTRAL_5,
   },
   buttonTranslate: {
     alignItems: 'center',

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

@@ -61,8 +61,19 @@ export class ChatbotModel {
             .reset(this.resetAlternatives)
 
         // TODO: do not pass this, just what you need
-        this.translation = new ChatbotTranslation(this)
-        this.t2s = new ChatTextToSpeech(this)
+        this.translation = new ChatbotTranslation({
+          credits: this.credits,
+          $alternatives: this.$alternatives,
+          setAlternatives: this.setAlternatives,
+          defaultMessages: this.defaultMessages,
+          messages: this.messages,
+          api: this.api,
+        })
+
+        this.t2s = new ChatTextToSpeech({
+          $isOpen: this.$isOpen,
+          api: this.api
+        })
 
         this.sendHelpRequestFx = this.createSendHelpRequestFx()
         this.initChatReplyWatcher()

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

@@ -1,10 +1,9 @@
-import { ChatbotModel } from './model'
-import { restore, createEvent } from 'effector'
+import { restore, createEvent, StoreWritable } from 'effector'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
 import { AudioProvider, AudioStatus, PlayTextToSpeechProps } from '../types/t2s.types'
+import { ChatbotAPI } from './api'
 
 export class ChatTextToSpeech {
-    private readonly model: ChatbotModel
     private readonly audioCache: Record<string, string> = {}
     private audioProvider: AudioProvider | null = null
 
@@ -13,10 +12,17 @@ export class ChatTextToSpeech {
     readonly setStatus = createEvent<AudioStatus>()
     readonly $status = restore(this.setStatus, AudioStatus.STOPPED)
 
-    constructor(chatbotModel: ChatbotModel) {
-        this.model = chatbotModel
+    readonly $isOpen: StoreWritable<boolean>
+  readonly api: ChatbotAPI
 
-        this.model.$isOpen.updates.watch((isOpen) => {
+    constructor({
+      $isOpen,
+                  api
+    }: any) {
+      this.$isOpen = $isOpen
+      this.api = api
+
+        this.$isOpen.updates.watch((isOpen) => {
             if (!isOpen) this.reset()
         })
     }
@@ -60,7 +66,7 @@ export class ChatTextToSpeech {
             this.setCurrentPlayingId(messageId)
 
             if (!audioPath) {
-                const response = await this.model.api.textToSpeechTextFx({
+                const response = await this.api.textToSpeechTextFx({
                     input: { text },
                     voice: config?.voice ?? DEFAULT_VOICE,
                     audioConfig: config?.audioConfig ?? AUDIO_CONFIG,

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

@@ -1,18 +1,16 @@
-import { createEvent, restore, attach, createEffect, type Effect, sample } from 'effector'
-import { ChatbotModel } from './model'
+import { createEvent, restore, attach, createEffect, type Effect, sample, type Store } from 'effector'
 
 import {
     TranslateAlternativesFxProps,
     TranslateBatchFxProps,
     TranslateMessageFxProps,
 } from '../types/translation.types'
-import { ConversationMessage } from '../types/model.types'
+import { ChatbotModelProps, ConversationMessage } from '../types/model.types'
 import { GetAlternativesResponse } from '../types/api.types'
 import { decodeHTMLEntities } from '../helpers'
+import { ChatbotAPI } from './api'
 
 export class ChatbotTranslation {
-    private readonly model: ChatbotModel
-
     readonly setIsTranslated = createEvent<boolean>()
     readonly $isTranslated = restore(this.setIsTranslated, false)
 
@@ -23,14 +21,34 @@ export class ChatbotTranslation {
         GetAlternativesResponse | null
     >
 
-    constructor(chatbotModel: ChatbotModel) {
-        this.model = chatbotModel
-
-        this.translateAlternativesFx = this.createTranslateAlternativesEffect()
-        this.translateMessageFx = this.createTranslateMessageEffect()
-        this.translateBatchFx = this.createTranslateBatchEffect()
-
-        this.initTranslationSamples()
+  readonly credits: ChatbotModelProps['credits']
+  readonly $alternatives: Store<GetAlternativesResponse | null>
+  readonly setAlternatives = createEvent<GetAlternativesResponse | null>()
+  readonly defaultMessages: ChatbotModelProps['messages']
+  readonly api: ChatbotAPI
+  readonly messages: any
+
+    constructor({
+      credits,
+      $alternatives,
+      setAlternatives,
+      defaultMessages,
+      messages,
+      api,
+    }: any) {
+      this.credits = credits
+      this.$alternatives = $alternatives
+      this.setAlternatives = setAlternatives
+      this.defaultMessages = defaultMessages
+      this.messages = messages
+      this.api = api
+
+      this.translateAlternativesFx = this.createTranslateAlternativesEffect()
+      this.translateMessageFx = this.createTranslateMessageEffect()
+      // @ts-ignore
+      this.translateBatchFx = this.createTranslateBatchEffect()
+
+      this.initTranslationSamples()
     }
 
     private shouldSkipTranslation(messages: ConversationMessage[]) {
@@ -51,14 +69,14 @@ export class ChatbotTranslation {
     private initTranslationSamples() {
         sample({
             clock: this.translateBatchFx.doneData,
-            source: [this.model.credits.$assignmentId, this.model.credits.$exerciseId] as const,
+            source: [this.credits.$assignmentId, this.credits.$exerciseId] as const,
             fn: ([assignmentId, exerciseId], translatedMessages) => ({
                 assignmentId,
                 exerciseId,
                 translatedMessages,
             }),
         }).watch(({ assignmentId, exerciseId, translatedMessages }) => {
-            this.model.messages.setField({
+            this.messages.setField({
                 entityId: assignmentId,
                 fieldId: exerciseId,
                 messages: translatedMessages,
@@ -68,7 +86,7 @@ export class ChatbotTranslation {
 
     private createTranslateAlternativesEffect() {
         return attach({
-            source: [this.model.$alternatives],
+            source: [this.$alternatives],
             mapParams: (params: TranslateAlternativesFxProps['params'], [alternatives]) => ({
                 params,
                 alternatives,
@@ -81,7 +99,7 @@ export class ChatbotTranslation {
 
                 if (hintAlternatives.length) {
                     const hintText = hintAlternatives.map(({ text }) => text)
-                    const response = await this.model.api.translateTextFx({
+                    const response = await this.api.translateTextFx({
                         text: hintText,
                         targetLanguage: params.targetLanguage,
                     })
@@ -100,7 +118,7 @@ export class ChatbotTranslation {
 
                 if (defaultAlternatives.length) {
                     const defaultText = defaultAlternatives.map(({ text }) => text)
-                    const response = await this.model.api.translateTextFx({
+                    const response = await this.api.translateTextFx({
                         text: defaultText,
                         targetLanguage: params.targetLanguage,
                     })
@@ -125,7 +143,7 @@ export class ChatbotTranslation {
     private createTranslateMessageEffect() {
         return createEffect(async ({ message, targetLanguage }: TranslateMessageFxProps) => {
             const optionsText = message.options.map(({ text }) => text)
-            const response = await this.model.api.translateTextFx({
+            const response = await this.api.translateTextFx({
                 text: [message.message, ...optionsText],
                 targetLanguage,
             })
@@ -147,8 +165,9 @@ export class ChatbotTranslation {
 
     private createTranslateBatchEffect() {
         return attach({
-            source: [this.model.credits.$assignmentId, this.model.credits.$exerciseId, this.model.messages.$state],
-            mapParams: (
+            source: [this.credits.$assignmentId, this.credits.$exerciseId, this.messages.$state],
+          // @ts-ignore
+          mapParams: (
                 params: TranslateBatchFxProps['params'],
                 [assignmentId, exerciseId, messages],
             ) => ({
@@ -166,7 +185,7 @@ export class ChatbotTranslation {
                     }
 
                     const messagesText = currentMessages.map(({ message }) => message)
-                    const response = await this.model.api.translateTextFx({
+                    const response = await this.api.translateTextFx({
                         text: messagesText,
                         targetLanguage: params.targetLanguage,
                     })
@@ -176,12 +195,12 @@ export class ChatbotTranslation {
                         ? await this.translateMessageOptions(lastMessage, params.targetLanguage)
                         : undefined
 
-                    const errorMessageTranslationResponse = await this.model.api.translateTextFx({
-                        text: [this.model.defaultMessages.error.message],
+                    const errorMessageTranslationResponse = await this.api.translateTextFx({
+                        text: [this.defaultMessages.error.message],
                         targetLanguage: params.targetLanguage,
                     })
 
-                    this.model.defaultMessages.error.translatedMessage = decodeHTMLEntities(
+                    this.defaultMessages.error.translatedMessage = decodeHTMLEntities(
                         errorMessageTranslationResponse.data.translations[0].translatedText,
                     )
 
@@ -209,12 +228,12 @@ export class ChatbotTranslation {
     private async translateMessageOptions(message: ConversationMessage, targetLanguage: string) {
         if (!message?.options?.length) {
             const translatedAlternatives = await this.translateAlternativesFx({ targetLanguage })
-            this.model.setAlternatives(translatedAlternatives)
+            this.setAlternatives(translatedAlternatives)
             return
         }
 
         const optionsText = message.options.map(({ text }) => text)
-        const response = await this.model.api.translateTextFx({
+        const response = await this.api.translateTextFx({
             text: optionsText,
             targetLanguage,
         })

package/src/features/feedback/components/EmptyComment/EmptyComment.tsx

@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,
     borderBottomRightRadius: 8,
-    shadowColor: COLORS.PRIMARY_SHADOW,
+    shadowColor: COLORS.NEUTRAL_10,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.25,
     shadowRadius: 3,
@@ -38,6 +38,5 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     color: COLORS.NEUTRAL_7,
     padding: 8,
-    lineHeight: 20,
   },
 })

package/src/features/feedback/components/TeacherFeedbackButton/TeacherFeedbackButton.tsx

@@ -73,8 +73,12 @@ export const TeacherFeedbackButton = ({
             size={size === 'large' ? 37 : 26}
           />
           {!!unreadCommentsCount && (
-            <View style={styles.badgeContainer}>
-              <UnreadMessagesBadge badgeContent={unreadCommentsCount} />
+            <View style={size === 'large' ? styles.badgeContainerLarge : styles.badgeContainer}>
+              <UnreadMessagesBadge
+                badgeContent={unreadCommentsCount}
+                textStyle={size === 'large' && { fontSize: 18 }}
+                style={size === 'large' && { width: 32, height: 32, borderRadius: 16 }}
+              />
             </View>
           )}
         </View>
@@ -107,6 +111,11 @@ const styles = StyleSheet.create({
   iconContainer: {
     position: 'relative',
   },
+  badgeContainerLarge: {
+    position: 'absolute',
+    top: -24,
+    right: -24,
+  },
   badgeContainer: {
     position: 'absolute',
     top: -17,

package/src/features/feedback/components/TeacherFeedbackComments/TeacherComment.tsx

@@ -40,7 +40,7 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,
     borderBottomRightRadius: 8,
-    shadowColor: COLORS.PRIMARY_SHADOW,
+    shadowColor: COLORS.NEUTRAL_10,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.25,
     shadowRadius: 3,

package/src/features/feedback/components/UnreadMessagesBadge.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
-import { Text, View, StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native'
+import { Text, View, StyleSheet, Platform, StyleProp, ViewStyle, TextStyle } from 'react-native'
 import { COLORS } from '@magmamath/react-native-ui'
 
 type UnreadMessagesBadgeProps = {
   badgeContent?: number
   withBorder?: boolean
   style?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
 }
 
-export const UnreadMessagesBadge = ({ badgeContent, withBorder = false, style }: UnreadMessagesBadgeProps) => {
+export const UnreadMessagesBadge = ({ badgeContent, withBorder = false, style, textStyle }: UnreadMessagesBadgeProps) => {
   return (
     <View
       style={[
@@ -19,7 +20,7 @@ export const UnreadMessagesBadge = ({ badgeContent, withBorder = false, style }:
         withBorder && (badgeContent ? styles.withBorderSize : styles.withBorderSizeEmpty),
       ]}
     >
-      <Text style={styles.text}>{badgeContent && badgeContent > 99 ? '99+' : badgeContent}</Text>
+      <Text style={[styles.text, textStyle]}>{badgeContent && badgeContent > 99 ? '99+' : badgeContent}</Text>
     </View>
   )
 }
@@ -52,8 +53,10 @@ const styles = StyleSheet.create({
     borderRadius: 5.75,
   },
   text: {
+    alignItems: 'center',
+    justifyContent: 'center',
     fontSize: 12,
-    lineHeight: 16,
+    textAlign: 'center',
     fontWeight: '600',
     fontFamily: Platform.OS === 'web' ? 'Open Sans, sans-serif' : 'OpenSans-SemiBold',
     color: COLORS.NEUTRAL_1,