@magmamath/students-features 0.6.14-rc.9 → 0.6.14

package/dist/typescript/module/features/exampleSolution/components/ExampleSolutionModalContent.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { ExampleSolutionModalParams } from '../types';
-export declare const ExampleSolutionModalContent: ({ model, payload, cacheKey, }: ExampleSolutionModalParams) => React.JSX.Element;
+type ExampleSolutionModalContentProps = {
+    params: ExampleSolutionModalParams;
+};
+export declare const ExampleSolutionModalContent: ({ params: { model, payload, cacheKey }, }: ExampleSolutionModalContentProps) => React.JSX.Element;
+export {};
 //# sourceMappingURL=ExampleSolutionModalContent.d.ts.map

package/dist/typescript/module/features/exampleSolution/components/ExampleSolutionModalContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleSolutionModalContent.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/components/ExampleSolutionModalContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAA;AAKrD,eAAO,MAAM,2BAA2B,kCAIrC,0BAA0B,sBAiB5B,CAAA"}
+{"version":3,"file":"ExampleSolutionModalContent.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/components/ExampleSolutionModalContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAA;AAKrD,KAAK,gCAAgC,GAAG;IACtC,MAAM,EAAE,0BAA0B,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,2BAA2B,8CAErC,gCAAgC,sBAqBlC,CAAA"}

package/dist/typescript/module/features/exampleSolution/components/QuestionSection.d.ts

@@ -3,7 +3,8 @@ import { ExampleSolutionStatuses } from '../constants';
 type QuestionSectionProps = {
     question?: string;
     status: ExampleSolutionStatuses;
+    renderKatexComponent: (katexString: string) => React.ReactNode;
 };
-export declare const QuestionSection: ({ question, status }: QuestionSectionProps) => React.JSX.Element;
+export declare const QuestionSection: ({ question, status, renderKatexComponent, }: QuestionSectionProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=QuestionSection.d.ts.map

package/dist/typescript/module/features/exampleSolution/components/QuestionSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionSection.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/components/QuestionSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAA;AAEtD,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,uBAAuB,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,eAAe,yBAA0B,oBAAoB,sBAazE,CAAA"}
+{"version":3,"file":"QuestionSection.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/components/QuestionSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAA;AAEtD,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,uBAAuB,CAAA;IAC/B,oBAAoB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CAC/D,CAAA;AAED,eAAO,MAAM,eAAe,gDAIzB,oBAAoB,sBAWtB,CAAA"}

package/dist/typescript/module/features/exampleSolution/components/SolutionSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolutionSection.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/components/SolutionSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAA;AAGtD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,uBAAuB,CAAA;CAChC,CAAA;AAID,eAAO,MAAM,eAAe,uBAAwB,oBAAoB,sBAsBvE,CAAA"}
+{"version":3,"file":"SolutionSection.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/components/SolutionSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAA;AAGtD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,uBAAuB,CAAA;CAChC,CAAA;AAUD,eAAO,MAAM,eAAe,uBAAwB,oBAAoB,sBA+CvE,CAAA"}

package/dist/typescript/module/features/exampleSolution/model/ExampleSolution.model.d.ts

@@ -1,9 +1,10 @@
-import { GifCelebrationsModelProps } from '../types';
+import { ExampleSolutionModelProps } from '../types';
 import { ExampleSolutionsApi } from './ExampleSolutionApi';
 import { ExampleSolutionCache } from './ExampleSolutionCache';
 export declare class ExampleSolutionModel {
     readonly api: ExampleSolutionsApi;
     readonly cache: ExampleSolutionCache;
-    constructor({ api, errorHandler }: GifCelebrationsModelProps);
+    readonly renderKatexComponent: (katexString: string) => React.ReactNode;
+    constructor({ api, errorHandler, renderKatexComponent }: ExampleSolutionModelProps);
 }
 //# sourceMappingURL=ExampleSolution.model.d.ts.map

package/dist/typescript/module/features/exampleSolution/model/ExampleSolution.model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleSolution.model.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/model/ExampleSolution.model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D,qBAAa,oBAAoB;IAC/B,SAAgB,GAAG,sBAAA;IACnB,SAAgB,KAAK,uBAA6B;gBAEtC,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,yBAAyB;CAG7D"}
+{"version":3,"file":"ExampleSolution.model.d.ts","sourceRoot":"","sources":["../../../../../../src/features/exampleSolution/model/ExampleSolution.model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D,qBAAa,oBAAoB;IAC/B,SAAgB,GAAG,sBAAA;IACnB,SAAgB,KAAK,uBAA6B;IAElD,SAAgB,oBAAoB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;gBAElE,EAAE,GAAG,EAAE,YAAY,EAAE,oBAAoB,EAAE,EAAE,yBAAyB;CAInF"}

package/dist/typescript/module/features/exampleSolution/types.d.ts

@@ -14,9 +14,10 @@ export type ExampleSolutionApiRequests = {
     generateExampleSolution: (body: ExampleSolutionPayload) => Promise<ExampleSolutionResponse>;
 };
 export type ExampleSolutionErrorHandler = (errorMessage: string) => void;
-export type GifCelebrationsModelProps = {
+export type ExampleSolutionModelProps = {
     api: ExampleSolutionApiRequests;
     errorHandler?: ExampleSolutionErrorHandler;
+    renderKatexComponent: (katexString: string) => React.ReactNode;
 };
 export type ExampleSolutionModalParams = {
     cacheKey: string;

package/dist/typescript/module/features/exampleSolution/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/features/exampleSolution/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AAEpE,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AACD,MAAM,MAAM,0BAA0B,GAAG;IACvC,uBAAuB,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,OAAO,CAAC,uBAAuB,CAAC,CAAA;CAC5F,CAAA;AACD,MAAM,MAAM,2BAA2B,GAAG,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;AACxE,MAAM,MAAM,yBAAyB,GAAG;IACtC,GAAG,EAAE,0BAA0B,CAAA;IAC/B,YAAY,CAAC,EAAE,2BAA2B,CAAA;CAC3C,CAAA;AACD,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,sBAAsB,CAAA;IAC/B,KAAK,EAAE,oBAAoB,CAAA;CAC5B,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/features/exampleSolution/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AAEpE,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AACD,MAAM,MAAM,0BAA0B,GAAG;IACvC,uBAAuB,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,OAAO,CAAC,uBAAuB,CAAC,CAAA;CAC5F,CAAA;AACD,MAAM,MAAM,2BAA2B,GAAG,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;AACxE,MAAM,MAAM,yBAAyB,GAAG;IACtC,GAAG,EAAE,0BAA0B,CAAA;IAC/B,YAAY,CAAC,EAAE,2BAA2B,CAAA;IAC1C,oBAAoB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CAC/D,CAAA;AACD,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,sBAAsB,CAAA;IAC/B,KAAK,EAAE,oBAAoB,CAAA;CAC5B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.6.14-rc.9",
+  "version": "0.6.14",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",

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

@@ -0,0 +1,60 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useStoreMap, useUnit } from 'effector-react'
+
+import { HelpRequestOption } from './HelpRequestOption'
+import { useChatModel } from '../../context/ChatBotModelContext'
+import { ColorScheme } from '../../types/style.types'
+import { CONTROLS_COLORS_MAP } from '../../constants'
+
+type AlternativesProps = {
+  onPressAlternative: (message: string, translatedMessage?: string) => void
+  hasMessages: boolean
+  isHintFeedback: boolean
+  colorScheme?: ColorScheme
+}
+
+export const Alternatives = ({
+  onPressAlternative,
+  hasMessages,
+  isHintFeedback,
+  colorScheme = ColorScheme.Blue,
+}: AlternativesProps) => {
+  const model = useChatModel()
+  const isTranslated = useUnit(model.translation.$isTranslated)
+  const alternatives = useUnit(model.$alternatives)
+  const isTranslationPending = useUnit(model.translation.translateAllMessagesFx.pending)
+  const lastMessageOptions = useStoreMap(model.$currentChatData, ({ messages }) => {
+    const lastMessage = messages.at(-1)
+    return lastMessage?.options ?? []
+  })
+
+  const options = (() => {
+    if (hasMessages) return lastMessageOptions
+    if (isHintFeedback) return alternatives?.options.hints ?? []
+    return alternatives?.options.default ?? []
+  })()
+
+  return (
+    <View style={styles.container}>
+      {options.map(({ text, translatedText }, index) => (
+        <HelpRequestOption
+          key={index}
+          onPress={() => onPressAlternative(text, translatedText)}
+          message={isTranslated ? (translatedText as string) : text}
+          disabled={isTranslationPending}
+          hoverColor={CONTROLS_COLORS_MAP[colorScheme].hover}
+        />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: 305,
+    marginVertical: 8,
+    gap: 8,
+  },
+})

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

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated, Pressable, StyleSheet } from 'react-native'
+import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { ArrowRightIcon } from '../../../../shared/icons/ArrowRightIcon'
+
+type HelpRequestOptionProps = {
+  onPress: () => void
+  message: string
+  disabled: boolean
+  hoverColor?: string
+}
+
+export const HelpRequestOption = ({
+  onPress,
+  message,
+  disabled = false,
+  hoverColor = COLORS.PRIMARY_BLUE,
+}: HelpRequestOptionProps) => {
+  const [isHovered, setIsHovered] = useState(false)
+  const hoverAnim = useRef(new Animated.Value(0)).current
+
+  const backgroundColor = hoverAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [COLORS.NEUTRAL_1, hoverColor],
+  })
+  const textColor = hoverAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [COLORS.NEUTRAL_10, COLORS.NEUTRAL_1],
+  })
+
+  useEffect(() => {
+    Animated.timing(hoverAnim, {
+      toValue: isHovered ? 1 : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start()
+  }, [isHovered, hoverAnim])
+
+  return (
+    <Pressable
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      onPress={onPress}
+      style={styles.button}
+      disabled={disabled}
+      accessibilityState={{ disabled }}
+      accessibilityRole="button"
+    >
+      <Animated.View
+        style={[styles.textWrapper, { backgroundColor, borderColor: backgroundColor }]}
+      >
+        <Animated.Text numberOfLines={1} style={[styles.text, { color: textColor }]}>
+          {message}
+        </Animated.Text>
+        <ArrowRightIcon color={isHovered ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_10} />
+      </Animated.View>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: 400,
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.NEUTRAL_10,
+  },
+  textWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    maxWidth: 305,
+    paddingHorizontal: SPACING[400],
+    paddingVertical: SPACING[200],
+    borderWidth: 1,
+    borderRadius: 48,
+    elevation: 3,
+    shadowColor: '#333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+})

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

@@ -6,7 +6,6 @@ import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
 import { ThreeDotsLoader } from '../ThreeDotsLoader/ThreeDotsLoader'
 import { CONTROLS_COLORS_MAP } from '../../constants'
 import { ColorScheme } from '../../types/style.types'
-import { LavaIconInGlasses } from '@magmamath/students-features'
 
 type MessageLoaderProps = {
   colorScheme?: ColorScheme
@@ -15,7 +14,7 @@ type MessageLoaderProps = {
 export const MessageLoader = ({ colorScheme = ColorScheme.Blue }: MessageLoaderProps) => (
   <View style={styles.container}>
     <View style={styles.icon}>
-      <LavaIconInGlasses width={60} height={80} />
+      <ChatbotIcon width={60} height={80} />
     </View>
     <View style={styles.loader}>
       <ThreeDotsLoader backgroundColor={CONTROLS_COLORS_MAP[colorScheme].background} />
@@ -28,13 +27,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     width: 327,
     alignItems: 'flex-end',
-    paddingLeft:70
   },
   icon: {
-    position: 'absolute',
-    zIndex:1,
     alignSelf: 'flex-end',
-    left: 0
+    marginRight: 8,
   },
   loader: {
     flex: 1,

package/src/features/chatbot/components/{Chat/Chat.tsx → ChatMessages/ChatbotMessages.tsx}

@@ -5,16 +5,14 @@ import { useStoreMap, useUnit } from 'effector-react'
 import { ChatbotModel } from '../../model/ChatBotModel'
 import { ChatMessage } from '../ChatMessage/ChatMessage'
 import { MessageLoader } from '../ChatMessage/MessageLoader'
-import { ChatInput } from '../ChatInput/ChatInput'
+import { Alternatives } from '../Alternatives/Alternatives'
 import { MessageVariant } from '../../types/model.types'
 import { ColorScheme } from '../../types/style.types'
-import { ChatInputMode } from '../../types/units.types'
 
 type ChatbotMessagesProps = {
   model: ChatbotModel
   isHintFeedback: boolean
   isTextToSpeechEnabled: boolean
-  inputMode: ChatInputMode
   colorScheme?: ColorScheme
 }
 
@@ -24,11 +22,10 @@ const BOTTOM_OFFSET = Platform.select({
   default: 294,
 })
 
-export const Chat = ({
+export const ChatbotMessages = ({
   model,
   isHintFeedback,
   isTextToSpeechEnabled,
-  inputMode,
   colorScheme = ColorScheme.Blue,
 }: ChatbotMessagesProps) => {
   const dimensions = useWindowDimensions()
@@ -48,8 +45,8 @@ export const Chat = ({
 
   const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
 
-  const askChatForHelp = (message: string, translatedMessage?: string, isFreeText?: boolean) => {
-    void model.sendHelpRequestFx({ message, translatedMessage, isFreeText })
+  const askChatForHelp = (message: string, translatedMessage?: string) => {
+    void model.sendHelpRequestFx({ message, translatedMessage })
   }
 
   return (
@@ -91,13 +88,12 @@ export const Chat = ({
           </View>
         )}
 
-        {isOpen && (
-          <ChatInput
+        {!isHelpRequestPending && isOpen && (
+          <Alternatives
             onPressAlternative={askChatForHelp}
             hasMessages={messages.length > 1}
             isHintFeedback={isHintFeedback}
             colorScheme={colorScheme}
-            inputMode={inputMode}
           />
         )}
       </ScrollView>

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

@@ -2,13 +2,11 @@ import React, { ComponentType, PropsWithChildren } from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 
 import { ChatbotModel } from '../model/ChatBotModel'
-import { Chat } from './Chat/Chat'
+import { ChatbotMessages } from './ChatMessages/ChatbotMessages'
 import { ChatControls } from './ChatControls/ChatControls'
 import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
 import { ChatBotModelContext } from '../context/ChatBotModelContext'
 import { ColorScheme } from '../types/style.types'
-import { ChatInputMode } from '../types/units.types'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 type ChatbotProps = {
   model: ChatbotModel
@@ -18,7 +16,6 @@ type ChatbotProps = {
     voice: typeof DEFAULT_VOICE
     audioConfig: typeof AUDIO_CONFIG
   }
-  inputMode?: ChatInputMode
   ButtonWrapper: ComponentType<PropsWithChildren>
   iconSize?: { width: number; height: number } // TODO: use number instead
   colorScheme?: ColorScheme
@@ -46,12 +43,11 @@ export const Chatbot = ({
 
   return (
     <ChatBotModelContext.Provider value={model}>
-      <Chat
+      <ChatbotMessages
         model={model}
         colorScheme={colorScheme}
         isHintFeedback={isHintFeedback}
         isTextToSpeechEnabled={isTextToSpeechEnabled}
-        inputMode={alternatives?.isOpenChatEnabled ? ChatInputMode.FreeText : ChatInputMode.Option}
       />
 
       <ChatControls

package/src/features/chatbot/constants.ts

@@ -2,7 +2,6 @@ import { ButtonColor, COLORS } from '@magmamath/react-native-ui'
 import { Platform } from 'react-native'
 import { MessageVariant } from './types/model.types'
 import { ColorScheme } from './types/style.types'
-import { ANIMATION_DURATION } from '../gifCelebrations/constants'
 
 export const AUDIO_CONFIG = {
   audioEncoding: 'LINEAR16',
@@ -45,24 +44,20 @@ export const MESSAGE_COLORS_MAP = {
   [ColorScheme.Blue]: {
     [MessageVariant.RECEIVED]: {
       background: COLORS.NEUTRAL_3,
-      border: COLORS.NEUTRAL_3,
       icon: ButtonColor.BLUE,
     },
     [MessageVariant.SENT]: {
       background: COLORS.PRIMARY_BLUE,
-      border: COLORS.PRIMARY_BLUE,
       icon: ButtonColor.BLUE,
     },
   },
   [ColorScheme.Yellow]: {
     [MessageVariant.RECEIVED]: {
       background: COLORS.NEUTRAL_3,
-      border: COLORS.NEUTRAL_3,
       icon: ButtonColor.YELLOW,
     },
     [MessageVariant.SENT]: {
       background: COLORS.PRIMARY_YELLOW,
-      border: COLORS.PRIMARY_YELLOW,
       icon: ButtonColor.YELLOW,
     },
   },
@@ -78,5 +73,3 @@ export const CONTROLS_COLORS_MAP = {
     background: COLORS.PRIMARY_YELLOW,
   },
 }
-
-export const HOVER_ANIMATION_DURATION = 200

package/src/features/chatbot/index.ts

@@ -9,7 +9,5 @@ export {
 export type { PostMessageResponse } from './types/api.types'
 export { DefaultMessagesCreator } from './model/DefaultMessageCreator'
 export type { ChatAnswer } from './types/units.types'
-export { ChatInputMode } from './types/units.types'
-
 export type { ConversationMessage } from './types/units.types'
 export { ColorScheme } from './types/style.types'

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

@@ -5,7 +5,6 @@ import {
   IChatDrawBoardAdapter,
   SendHelpParams,
   SendHelpProps,
-  SendMessageProps,
   SetHintMessageProps,
   StartConversationFxData,
   StartConversationProps,
@@ -21,9 +20,6 @@ import { ErrorSpottingModel } from '../errorSpotting/ErrorSpottingModel'
 import { withEvent } from '../../../lib/effector/withEvent'
 import { ChatBotTextManager } from './ChatBoxTextManager'
 import { ControlledSample } from '../../../lib/effector/ControlledSample'
-import { DefaultMessagesCreator } from './DefaultMessageCreator'
-import { t } from '../../../shared/translation'
-import { IS_WEB } from '@magmamath/react-native-ui'
 
 type ReinitConversationProps = {
   key: string
@@ -50,19 +46,12 @@ export class ChatbotModel {
 
   readonly resetAlternatives = createEvent()
   readonly setAlternatives = createEvent<GetAlternativesResponse | null>()
-  readonly $alternatives
+  readonly $alternatives: Store<GetAlternativesResponse | null>
 
   readonly setIsOpen = createEvent<boolean>()
   readonly toggleOpen = createEvent()
   readonly $isOpen = restore(this.setIsOpen, false).on(this.toggleOpen, (isOpen) => !isOpen)
 
-  readonly setIsTextInputFocused = createEvent<boolean>()
-  readonly $isTextInputFocused = restore(this.setIsTextInputFocused, false).reset(
-    this.resetAlternatives,
-  )
-  readonly setTextInputValue = createEvent<string>()
-  readonly $textInputValue = restore(this.setTextInputValue, '').reset(this.resetAlternatives)
-
   public readonly removeLastMessage = createEvent()
   private readonly setLastMessageKey = createEvent<string>()
   public readonly $lastMessageKey = restore(this.setLastMessageKey, null)
@@ -83,7 +72,7 @@ export class ChatbotModel {
   constructor({ api, $key, threadMessagesLimit, settings = {} }: ChatbotModelProps) {
     this.api = new ChatbotAPI({ ...api, postMessage: this.threadManager.postMessage })
 
-    this.threadManager.setApi({ getHint: api.requestHint, sendMessage: api.sendMessage })
+    this.threadManager.setApi({ getHint: api.requestHint })
     if (threadMessagesLimit) {
       this.threadManager.setMessagesLimit(threadMessagesLimit)
     }
@@ -119,29 +108,6 @@ export class ChatbotModel {
       target: [this.t2s.reset, this.errorSpotting.spottingHidden],
     })
 
-    // sample({
-    //   source: { alternatives: this.$alternatives },
-    //   // filter: ({ alternatives }) => !!alternatives && alternatives.isOpenChatEnabled && IS_WEB,
-    //   target: createEffect(() => {
-    //     this.textManager.update((creator) => ({
-    //       anotherHintOption: creator.createMessagÏe(t('chat.giveHint')),
-    //     }))
-    //   }),
-    // })
-
-    // // Update default "another hint" option from alternatives when they arrive
-    // this.$alternatives.updates.watch((alternatives) => {
-    //   const dynamicOption = alternatives?.options?.default?.[0]
-    //   if (dynamicOption) {
-    //     this.textManager.update(() => ({ anotherHintOption: dynamicOption }))
-    //   }
-    // })
-    //
-    // // Restore default texts when alternatives are reset
-    // this.resetAlternatives.watch(() => {
-    //   this.textManager.restore()
-    // })
-
     sample({
       clock: this.removeLastMessage,
       source: [this.$lastMessageKey, this.cache.$data] as const,
@@ -196,42 +162,34 @@ export class ChatbotModel {
       mapParams: (params: SendHelpParams, [key, context]) => ({
         message: params.message,
         translatedMessage: params.translatedMessage,
-        isFreeText: params.isFreeText,
         context,
         key,
       }),
-      effect: createEffect(
-        async ({ message, translatedMessage, key, context, isFreeText }: SendHelpProps) => {
-          if (!context) throw new Error('Trying to send message in chat without context')
-          this.setLastMessageKey(key)
-          this.cache.addMessages(key, {
-            messages: [messagesHelper.createOwn({ message, translatedMessage })],
-          })
-
-          const response = await this.api.postMessageFx({
-            problem: context.problem,
-            language: context.language,
-            problemAnswer: context.problemAnswer,
-            answer: context.answer,
-            imageAltText: context.imageDescription,
-            message: isFreeText ? message : undefined,
-          })
-
-          const thread = this.threadManager.get(key)
-          const messages = [
-            messagesHelper.createAnswer(response, { isInitial: thread?.history.length === 1 }),
-          ]
-          if (response.endMessage) {
-            messages.push(messagesHelper.createLast(this.defaultMessages.endMessage))
-          }
-          const translatedMessages = await this.translation.applyTranslationFx(messages)
-
-          this.cache.addMessages(key, {
-            messages: translatedMessages,
-            thread,
-          })
-        },
-      ),
+      effect: createEffect(async ({ message, translatedMessage, key, context }: SendHelpProps) => {
+        if (!context) throw new Error('Trying to send message in chat without context')
+        this.setLastMessageKey(key)
+        this.cache.addMessages(key, {
+          messages: [messagesHelper.createOwn({ message, translatedMessage })],
+        })
+
+        const response = await this.api.postMessageFx({
+          problem: context.problem,
+          language: context.language,
+          problemAnswer: context.problemAnswer,
+          answer: context.answer,
+          imageAltText: context.imageDescription,
+        })
+        const thread = this.threadManager.get(key)
+        const messages = [
+          messagesHelper.createAnswer(response, { isInitial: thread?.history.length === 1 }),
+        ]
+        if (response.endMessage) {
+          messages.push(messagesHelper.createLast(this.defaultMessages.endMessage))
+        }
+        const translatedMessages = await this.translation.applyTranslationFx(messages)
+
+        this.cache.addMessages(key, { messages: translatedMessages, thread })
+      }),
     })
 
     sample({
@@ -315,8 +273,6 @@ export class ChatbotModel {
         this.api.postMessageFx.controller.abort()
         this.removeLastMessage()
       }
-      this.setIsTextInputFocused(false)
-      this.setTextInputValue('')
       this.errorSpotting.abortPendingRequest()
 
       this.t2s.stop()

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

@@ -4,18 +4,12 @@ import {
   ChatHintResponse,
   PostMessagePayload,
   PostMessageResponse,
-  SendMessagePayload,
-  SendMessageResponse,
 } from '../types/api.types'
-import {
-  ChatbotMessages,
-  IChatDrawBoardAdapter,
-} from '../types/model.types'
+import { ChatbotMessages, IChatDrawBoardAdapter } from '../types/model.types'
 import { CHAT_BOT_MODEL_DEFAULTS } from './constants'
 
 type ThreadManagerApi = {
   getHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
-  sendMessage: (props: SendMessagePayload) => Promise<SendMessageResponse>
 }
 
 type ChatBotThreadManagerProps = {
@@ -32,7 +26,6 @@ export class ChatBotThreadManager {
 
   private messagesLimit
   private currentKey = ''
-  private currentConversationId: null | string = null
 
   private readonly defaultMessages
 
@@ -76,7 +69,6 @@ export class ChatBotThreadManager {
     answer,
     language,
     imageAltText,
-    message,
   }: PostMessagePayload): Promise<PostMessageResponse> => {
     if (!this.api) {
       throw new Error(
@@ -85,28 +77,14 @@ export class ChatBotThreadManager {
     }
     const threadItem = await this.getThreadItem()
 
-    let result = {} as ChatHintResponse | SendMessageResponse
-
-    if (message) {
-      result = await this.api.sendMessage({
-        problemDescription: problem,
-        correctAnswer: problemAnswer,
-        language,
-        message,
-        conversationId: this.currentConversationId ?? '',
-      })
-      //@ts-ignore
-      this.conversationId = result?.conversationId ?? null
-    } else {
-      result = await this.api.getHint({
-        ...threadItem.getNextHintProps(),
-        correctAnswer: problemAnswer,
-        problemDescription: problem,
-        userAnswer: answer,
-        language,
-        imageAltText,
-      })
-    }
+    const result = await this.api.getHint({
+      ...threadItem.getNextHintProps(),
+      correctAnswer: problemAnswer,
+      problemDescription: problem,
+      userAnswer: answer,
+      language,
+      imageAltText,
+    })
 
     threadItem.history.push(result.message)
     const nextOptions =
@@ -117,8 +95,6 @@ export class ChatBotThreadManager {
       options: nextOptions,
       endMessage: !nextOptions.length,
       threadId: threadItem.id,
-      //@ts-ignore
-      conversationId: result?.conversationId ?? null,
     }
   }
 
@@ -128,7 +104,6 @@ export class ChatBotThreadManager {
 
   public reset(key?: string) {
     if (typeof key === 'string') {
-      this.currentConversationId = null
       this.threads.delete(key)
       return
     }
@@ -147,8 +122,4 @@ export class ChatBotThreadManager {
   public setCurrentKey(key: string) {
     this.currentKey = key
   }
-
-  public setCurrentConversationId(id: string) {
-    this.currentConversationId = id
-  }
 }