@magmamath/students-features 0.4.5 → 0.5.0-rc.1

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

@@ -1,5 +1,45 @@
-import { LocalizationConfig } from './types';
+import { Translations } from './types';
 import { LOCALIZATION_CONFIGS } from './constants';
-export declare const setLocalization: import("effector").EventCallable<LocalizationConfig | ((config: typeof LOCALIZATION_CONFIGS) => LocalizationConfig)>;
-export declare const $localization: import("effector").StoreWritable<LocalizationConfig>;
+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;
+    };
+}>;
 //# 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,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"}
+{"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"}

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

@@ -1,11 +1,11 @@
-import enTranslations from '../../lib/localization/en.json';
+import enTranslations from './localization/en.json';
+import { RetrieveKeys } from '../../lib/types/keys';
 export type Translations = typeof enTranslations;
-export type TranslationKeys = keyof Translations;
-export type GetText = <T extends TranslationKeys>(key: T, args?: Record<string, string> | null) => Translations[T];
+export type TranslationKeys = RetrieveKeys<Translations>;
+export type GetText = (key: TranslationKeys, args?: Record<string, string> | null) => string;
 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,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"}
+{"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"}

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

@@ -0,0 +1,17 @@
+import enTranslations from './localization/en.json';
+import swTranslations from './localization/sw.json';
+import gbTranslations from './localization/gb.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
+]>;
+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;AAEnD,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;IAAC,OAAO,cAAc;IAAE,OAAO,cAAc;IAAE,OAAO,cAAc;CAAC,CACtE,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,mBAAmB,IAAI,CAAC,CAAA"}

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.4.5",
+  "version": "0.5.0-rc.1",
   "description": "Magmamath features library",
   "source": "src/index.ts",
-  "main": "src/index.ts",
-  "react-native": "src/index.ts",
+  "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",
   "types": "dist/typescript/module/index.d.ts",
   "files": [
@@ -25,11 +24,10 @@
     "@magmamath/react-native-ui": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-reanimated": ">=0.3.16",
     "react-native-svg": "^15.10.0"
   },
   "devDependencies": {
-    "@magmamath/react-native-ui": "0.3.22",
+    "@magmamath/react-native-ui": "0.4.1-rc.0",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
@@ -43,7 +41,6 @@
     "react": "18.3.1",
     "react-native": "0.76.3",
     "react-native-builder-bob": "^0.33.3",
-    "react-native-reanimated": "^3.17.2",
     "react-native-svg": "^15.10.0",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"

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

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

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { ErrorSpottingButton } from '../../errorSpotting/ErrorSpottingButton'
+import { MessageTextToSpeech, T2SState } from './MessageTextToSpeech'
+import { ConversationMessage } from '../../types/units.types'
+import { IS_WEB } from '@magmamath/react-native-ui'
+
+type MessageButtonsBlockProps = {
+  withTextToSpeech?: boolean
+  t2sState: T2SState
+  message: ConversationMessage
+}
+
+export const MessageButtonsBlock = ({
+  withTextToSpeech,
+  t2sState,
+  message,
+}: MessageButtonsBlockProps) => {
+  if (!withTextToSpeech && !message.isInitial) return null
+
+  return (
+    <View style={styles.container}>
+      {!!message.isInitial && <ErrorSpottingButton contextMessage={message} />}
+      {withTextToSpeech && <MessageTextToSpeech state={t2sState} message={message} />}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: 8,
+    marginLeft: 'auto',
+    ...(IS_WEB ? { float: 'right' } : {}),
+  },
+})

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

@@ -1,9 +1,12 @@
 import React from 'react'
-import { ActivityIndicator, Pressable, StyleSheet, TouchableOpacity } from 'react-native'
+import { ActivityIndicator } from 'react-native'
 import { SpeakerIcon } from '../../../../shared/icons/SpeakerIcon'
 import { PlayIcon } from '../../../../shared/icons/PlayIcon'
 import { PauseIcon } from '../../../../shared/icons/PauseIcon'
 import { AudioStatus } from '../../types/t2s.types'
+import { useChatModel } from '../../context/ChatBotModelContext'
+import { ConversationMessage } from '../../types/units.types'
+import { Button, COLORS } from '@magmamath/react-native-ui'
 
 type TextToSpeechIconProps = {
   status: AudioStatus
@@ -17,61 +20,48 @@ const TextToSpeechIcon = ({ status, isActive, isLoading }: TextToSpeechIconProps
   }
 
   if (!isActive) {
-    return <SpeakerIcon color={isActive ? '#55ABE0' : undefined} />
+    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} />
+  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} />
 }
 
-type MessageTextToSpeechProps = {
+export type T2SState = {
   status: AudioStatus
   disabled: boolean
   isActive: boolean
   isLoading: boolean
-  onPress: () => void
+}
+
+type MessageTextToSpeechProps = {
+  state: T2SState
+  message: ConversationMessage
 }
 
 export const MessageTextToSpeech = ({
-  status,
-  disabled,
-  isActive,
-  isLoading,
-  onPress,
-}: MessageTextToSpeechProps) => (
-  <TouchableOpacity style={styles.container} onPress={onPress}>
-    <Pressable
-      disabled={disabled}
-      onPress={onPress}
-      style={[styles.button, { backgroundColor: isActive && !isLoading ? '#55ABE0' : '#FFF' }]}
-    >
-      <TextToSpeechIcon isActive={isActive} isLoading={isLoading} status={status} />
-    </Pressable>
-  </TouchableOpacity>
-)
+  state: { status, disabled, isActive, isLoading },
+  message,
+}: MessageTextToSpeechProps) => {
+  const model = useChatModel()
 
-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',
-  },
-})
+  function play() {
+    void model.t2s.play({
+      isTranslated: model.translation.$isTranslated.getState(),
+      message,
+    })
+  }
+
+  return (
+    <Button
+      disabled={disabled}
+      isActive={isActive}
+      variant={'secondary'}
+      colorScheme={'blue'}
+      size={'small'}
+      onPress={play}
+      icon={<TextToSpeechIcon isActive={isActive} isLoading={isLoading} status={status} />}
+    />
+  )
+}

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

@@ -2,41 +2,42 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { VariantProps } from './ChatMessage'
 import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
-import { MessageTextToSpeech } from './MessageTextToSpeech'
-import { MessageVariant } from '../../types/model.types'
+import { MessageButtonsBlock } from './MessageButtonsBlock'
 
 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>
+  isTranslated,
+}: VariantProps) => {
+  const text = isTranslated ? message.translatedMessage : message.message
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.icon}>
+        <ChatbotIcon width={60} height={80} />
+      </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 style={styles.message}>
+        <Text style={[styles.messageText, { width: withTextToSpeech ? 240 : 305 }]}>
+          {text}
+          <MessageButtonsBlock
+            message={message}
+            withTextToSpeech={withTextToSpeech}
+            t2sState={{
+              isActive,
+              isLoading: isTextToSpeechPending,
+              status: audioStatus,
+              disabled: isTextToSpeechPending,
+            }}
+          />
+        </Text>
+      </View>
     </View>
-  </View>
-)
+  )
+}
 
 const styles = StyleSheet.create({
   container: {

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

@@ -3,15 +3,15 @@ import { StyleSheet, Text, View } from 'react-native'
 import { VariantProps } from './ChatMessage'
 import { MessageVariant } from '../../types/model.types'
 
-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>
-)
+export const SentMessage = ({ message, isTranslated }: VariantProps) => {
+  const text = isTranslated ? message.translatedMessage : message.message
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>{text}</Text>
+    </View>
+  )
+}
 
 const styles = StyleSheet.create({
   container: {

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

@@ -1,23 +1,16 @@
-import React, { ReactNode, useRef } from 'react'
+import React, { 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 { AUDIO_CONFIG, DEFAULT_VOICE, TEXT_TO_SPEECH_CONFIG } from '../../constants'
-import { MessageVariant, ChatbotRenderer } from '../../types/model.types'
+import { MessageVariant } 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
@@ -29,10 +22,7 @@ const BOTTOM_OFFSET = Platform.select({
 export const ChatbotMessages = ({
   model,
   isHintFeedback,
-  sanitizeSpeechInput,
   isTextToSpeechEnabled,
-  textToSpeechConfig,
-  renderer,
 }: ChatbotMessagesProps) => {
   const dimensions = useWindowDimensions()
   const ref = useRef<ScrollView>(null)
@@ -49,16 +39,6 @@ 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 })
   }
@@ -78,17 +58,16 @@ export const ChatbotMessages = ({
       >
         {isOpen && (
           <View style={styles.gap}>
-            {messages.map(({ id, message, translatedMessage, isOwnMessage }) => (
+            {messages.map((message) => (
               <ChatMessage
-                key={id}
-                message={isTranslated ? (translatedMessage as string) : message}
-                renderer={renderer}
+                key={message.id}
+                isTranslated={isTranslated}
+                message={message}
                 audioStatus={audioStatus}
-                onPressTextToSpeech={() => playTextToSpeech(id, message, translatedMessage)}
-                isActive={id === currentPlayingId}
+                isActive={message.id === currentPlayingId}
                 isTextToSpeechPending={isTextToSpeechPending}
-                variant={isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
-                withTextToSpeech={isTextToSpeechEnabled && !isOwnMessage}
+                variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
+                withTextToSpeech={isTextToSpeechEnabled && !message.isOwnMessage}
               />
             ))}
 
@@ -98,7 +77,6 @@ export const ChatbotMessages = ({
 
         {!isHelpRequestPending && isOpen && (
           <Alternatives
-            model={model}
             onPressAlternative={askChatForHelp}
             hasMessages={messages.length > 1}
             isHintFeedback={isHintFeedback}

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

@@ -1,16 +1,15 @@
-import { ComponentType, PropsWithChildren, ReactNode } from 'react'
+import { ComponentType, PropsWithChildren } from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 import { ChatbotModel } from '../model/ChatBotModel'
 import { ChatbotMessages } from './ChatMessages/ChatbotMessages'
 import { ChatControls } from './ChatControls/ChatControls'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
-import { ChatbotRenderer } from '../types/model.types'
 import React from 'react'
+import { ChatBotModelContext } from '../context/ChatBotModelContext'
 
 type ChatbotProps = {
   model: ChatbotModel
   isHintFeedback: boolean
-  sanitizeSpeechInput: (speech: string) => string
   isTextToSpeechEnabled: boolean
   isTranslationEnabled: boolean
   textToSpeechConfig?: {
@@ -18,24 +17,22 @@ type ChatbotProps = {
     audioConfig: typeof AUDIO_CONFIG
   }
   ButtonWrapper: ComponentType<PropsWithChildren>
-  renderer?: (props: ChatbotRenderer) => ReactNode
   iconSize?: { width: number; height: number } // TODO: use number instead
 }
 
 export const Chatbot = ({
   model,
   isHintFeedback,
-  sanitizeSpeechInput,
   isTextToSpeechEnabled = false,
   textToSpeechConfig,
   isTranslationEnabled,
-  renderer,
   ButtonWrapper,
   iconSize,
 }: ChatbotProps) => {
   const alternatives = useUnit(model.$alternatives)
   const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
 
+  model.t2s.setAudioConfig(textToSpeechConfig ?? null)
   const translateMessages = () => {
     void model.translation.translateAllMessagesFx()
   }
@@ -48,14 +45,11 @@ export const Chatbot = ({
   }
 
   return (
-    <>
+    <ChatBotModelContext.Provider value={model}>
       <ChatbotMessages
         model={model}
-        renderer={renderer}
         isHintFeedback={isHintFeedback}
-        sanitizeSpeechInput={sanitizeSpeechInput}
         isTextToSpeechEnabled={isTextToSpeechEnabled}
-        textToSpeechConfig={textToSpeechConfig}
       />
 
       <ChatControls
@@ -67,6 +61,6 @@ export const Chatbot = ({
         ButtonWrapper={ButtonWrapper}
         iconSize={iconSize}
       />
-    </>
+    </ChatBotModelContext.Provider>
   )
 }

package/src/features/chatbot/context/ChatBotModelContext.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react'
+import { ChatbotModel } from '../model/ChatBotModel'
+
+export const ChatBotModelContext = createContext<ChatbotModel | null>(null)
+
+export function useChatModel() {
+  const model = useContext(ChatBotModelContext)
+  if (!model) {
+    throw new Error(
+      'Something went wrong, you are probably trying to use component that is supposed to be inside ChatBotContext.Provider',
+    )
+  }
+  return model
+}

package/src/features/chatbot/errorSpotting/ErrorSpottingButton.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Button, COLORS, IS_WEB, StopIcon } from '@magmamath/react-native-ui'
+import { useChatModel } from '../context/ChatBotModelContext'
+import { useStoreMap, useUnit } from 'effector-react'
+import { StyleSheet, View } from 'react-native'
+import { HighlighterIcon } from '../../../shared/icons/HighlighterIcon'
+import { ConversationMessage } from '../types/units.types'
+import { useText } from '../../../shared/translation'
+
+type ErrorSpottingButtonProps = {
+  contextMessage: ConversationMessage
+}
+
+export const ErrorSpottingButton = ({ contextMessage }: ErrorSpottingButtonProps) => {
+  const t = useText()
+  const model = useChatModel()
+  const activeErrorSpotting = useUnit(model.errorSpotting.$activeData)
+  const validationKey = useUnit(model.errorSpotting.$validationKey)
+  const isLoading = useUnit(model.errorSpotting.$isLoading)
+  const currentThread = useStoreMap(model.$currentChatData, (chatData) => chatData.currentThread)
+
+  const threadId = contextMessage.threadId
+  if (!currentThread?.strokes || (threadId && currentThread.id !== threadId)) {
+    return null
+  }
+
+  const isActive = !!activeErrorSpotting?.isActive
+  return (
+    <Button
+      style={buttonStyles}
+      disabled={validationKey !== currentThread.strokesValidationKey}
+      isActive={isActive}
+      isLoading={isLoading}
+      variant={'secondary'}
+      colorScheme={'blue'}
+      size={'small'}
+      onPress={() => {
+        if (isLoading) return
+        model.errorSpotting.errorSpottingPressed({ message: contextMessage })
+      }}
+      icon={isActive ? <StopIcon color={COLORS.NEUTRAL_1} /> : <HighlighterIcon />}
+    >
+      {t('chat.showError')}
+    </Button>
+  )
+}
+
+const buttonStyles = StyleSheet.create({
+  text: {
+    textTransform: 'uppercase',
+    paddingTop: 0.5,
+  },
+})