@magmamath/students-features 1.0.2 → 1.0.3-rc.1

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

@@ -1,11 +1,12 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-
-import { VariantProps } from './ChatMessage'
-import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
+import { Platform, StyleSheet, View } from 'react-native'
+import { BORDER_RADIUS, SPACING } from '@magmamath/react-native-ui'
+import { CHATBOT_ICON_SIZE, MESSAGE_WIDTH } from '../../constants'
+import { ChatbotIcon } from '@magmamath/students-features'
 import { ColorScheme } from '../../types/style.types'
-import { MessageContent } from './MessageContent'
 import { MessageVariant } from '../../types/model.types'
+import { VariantProps } from './ChatMessage'
+import { MessageContent } from './MessageContent'
 
 export const ReceivedMessage = ({
   message,
@@ -21,12 +22,9 @@ export const ReceivedMessage = ({
 
   return (
     <View style={styles.container}>
-      {withIcon && (
-        <View style={styles.icon}>
-          <ChatbotIcon width={60} height={80} />
-        </View>
-      )}
-
+      <View style={[styles.iconWrapper, { opacity: withIcon ? 1 : 0 }]}>
+        <ChatbotIcon width={CHATBOT_ICON_SIZE.width} height={CHATBOT_ICON_SIZE.height} />
+      </View>
       <View style={styles.message}>
         <MessageContent
           message={message}
@@ -45,29 +43,28 @@ export const ReceivedMessage = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     flexDirection: 'row',
-    maxWidth: 372,
-    width: 372,
     alignItems: 'flex-end',
     justifyContent: 'flex-end',
-  },
-  icon: {
-    alignSelf: 'flex-end',
-    marginRight: 8,
+    paddingHorizontal: 3,
   },
   message: {
-    flex: 1,
+    width: MESSAGE_WIDTH,
     flexDirection: 'row',
-    maxWidth: 305,
     padding: 8,
     shadowColor: '#333',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.25,
     shadowRadius: 3,
     elevation: 3,
-    borderRadius: 8,
+    borderRadius: BORDER_RADIUS[300],
     borderBottomLeftRadius: 0,
     backgroundColor: '#F2F2F4',
+    ...Platform.select({ web: { backfaceVisibility: 'hidden' } }),
+  },
+  iconWrapper: {
+    width: CHATBOT_ICON_SIZE.width + SPACING[200],
+    alignItems: 'flex-start',
+    justifyContent: 'flex-end',
   },
 })

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

@@ -1,6 +1,7 @@
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { Platform, StyleSheet, Text, View } from 'react-native'
 import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { MESSAGE_WIDTH } from '../../constants'
 
 import { VariantProps } from './ChatMessage'
 import { MESSAGE_COLORS_MAP } from '../../constants'
@@ -27,10 +28,11 @@ export const SentMessage = React.memo(
 const styles = StyleSheet.create({
   container: {
     alignSelf: 'flex-end',
-    maxWidth: 305,
+    maxWidth: MESSAGE_WIDTH,
     padding: SPACING[200],
-    borderRadius: BORDER_RADIUS[200],
+    borderRadius: BORDER_RADIUS[300],
     borderBottomRightRadius: 0,
+    ...Platform.select({ web: { backfaceVisibility: 'hidden' } }),
   },
   text: {
     fontSize: 20,

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

@@ -1,4 +1,4 @@
-import React, { ComponentType, PropsWithChildren, useMemo } from 'react'
+import React, { ComponentType, PropsWithChildren, useCallback } from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 
 import { ChatbotModel } from '../model/ChatBotModel'
@@ -13,6 +13,7 @@ type ChatbotProps = {
   model: ChatbotModel
   isHintFeedback: boolean
   isTextToSpeechEnabled: boolean
+  withQuickActionButton?: boolean
   textToSpeechConfig?: {
     voice: typeof DEFAULT_VOICE
     audioConfig: typeof AUDIO_CONFIG
@@ -22,6 +23,7 @@ type ChatbotProps = {
   isInputDisabled?: boolean
   colorScheme?: ColorScheme
   TTSHighlightRenderer?: TTSHighlightRenderer
+  maxHeight?: number
 }
 
 export const Chatbot = ({
@@ -33,23 +35,32 @@ export const Chatbot = ({
   ButtonWrapper,
   iconSize,
   colorScheme = ColorScheme.Blue,
+  withQuickActionButton,
   TTSHighlightRenderer,
+  maxHeight,
 }: ChatbotProps) => {
+  const alternatives = useUnit(model.$alternatives)
   const isChatAllowed = useUnit(model.$chatAccess)
   const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
-  model.t2s.setAudioConfig(textToSpeechConfig ?? null)
+  const hasBeenOpened = useStoreMap(model.$currentChatData, ({ hasBeenOpened }) => !!hasBeenOpened)
 
-  const shouldAnimateCloseButton = useStoreMap({
-    store: model.$currentChatData,
-    fn: (chat, [isInputDisabled]) => {
-      return isInputDisabled && chat.messages.length === 1
-    },
-    keys: [isInputDisabled],
-  })
+  model.t2s.setAudioConfig(textToSpeechConfig ?? null)
 
   const openChat = () => model.setIsOpen(true)
   const closeChat = () => model.setIsOpen(false)
 
+  const sendHelpRequest = () => {
+    const option = alternatives?.options.default[0]
+    if (!option) return
+
+    model.setIsOpen(true)
+    void model.sendHelpRequestFx({
+      message: option.text,
+      translatedMessage: option.translatedText,
+      clearDefaultMessages: true,
+    })
+  }
+
   if (!isAvailable || !isChatAllowed) {
     return null
   }
@@ -62,17 +73,19 @@ export const Chatbot = ({
         isHintFeedback={isHintFeedback}
         isTextToSpeechEnabled={isTextToSpeechEnabled}
         isInputDisabled={isInputDisabled}
+        maxHeight={maxHeight}
         MessageWrapper={ButtonWrapper}
         TTSHighlightRenderer={TTSHighlightRenderer}
+        onPressClose={closeChat}
       />
 
       <ChatControls
         model={model}
         onPressChatIcon={openChat}
-        onPressClose={closeChat}
+        onPressHelpButton={sendHelpRequest}
         iconSize={iconSize}
         ButtonWrapper={isInputDisabled ? undefined : ButtonWrapper}
-        shouldAnimateCloseButton={shouldAnimateCloseButton}
+        withHelpButton={withQuickActionButton && !hasBeenOpened}
       />
     </ChatBotModelContext.Provider>
   )

package/src/features/chatbot/constants.ts

@@ -1,4 +1,4 @@
-import { ButtonColor, COLORS } from '@magmamath/react-native-ui'
+import { ButtonColor, COLORS, IS_WEB } from '@magmamath/react-native-ui'
 import { Platform } from 'react-native'
 import { MessageVariant } from './types/model.types'
 import { ColorScheme } from './types/style.types'
@@ -82,3 +82,12 @@ export const CONTROLS_COLORS_MAP = {
 export const HOVER_ANIMATION_DURATION = 200
 
 export const WORD_MARK_REGEX = /^w_(\d+)$/
+
+// Scroll constants
+export const SCROLL_BOTTOM_THRESHOLD = 0.5
+
+// Layout constants
+export const MESSAGE_WIDTH = 304
+export const INPUT_WIDTH = IS_WEB ? MESSAGE_WIDTH : 301
+export const CHAT_CONTAINER_WIDTH = 370
+export const CHATBOT_ICON_SIZE = { width: 51, height: 73 }

package/src/features/chatbot/errorSpotting/ErrorSpottingModel.ts

@@ -1,5 +1,5 @@
 import { createEvent, createStore, sample, Store, restore } from 'effector'
-import { ChatItem, ConversationMessage } from '../types/units.types'
+import { ChatItem, ConversationMessage, ErrorChar } from '../types/units.types'
 
 type ErrorSpottingProps = {
   $currentChatData: Store<ChatItem>
@@ -10,6 +10,7 @@ type ActiveErrorSpottingData = {
   isDisabled: boolean
   strokesIds: string[]
   validationKey: null | string
+  errorChars: ErrorChar[] | null
 }
 
 const AUTO_CLOSE_TIMEOUT = 5000
@@ -62,6 +63,7 @@ export class ErrorSpottingModel {
         return {
           validationKey: key,
           strokesIds: chatData.currentThread.errorStrokesIds,
+          errorChars: chatData.currentThread.errorChars,
           isActive: source.isEnabled && !isDisabled && isKeyChanged,
           isDisabled,
         }

package/src/features/chatbot/helpers.ts

@@ -34,14 +34,14 @@ export const transformAlternatives = (payload: GetAlternativesResponse | null) =
     options: {
       default: [
         {
-          text: isOpenChatEnabled ? t('chat.giveHintOpenChat') : t('chat.giveHint'),
+          text: t('chat.needHint'),
           promptKey: payload.options.default[0].promptKey,
           translatedText: payload.options.default[0].translatedText,
         },
       ],
       hints: [
         {
-          text: isOpenChatEnabled ? t('chat.giveHintOpenChat') : t('chat.anotherHint'),
+          text: isOpenChatEnabled ? t('chat.needHint') : t('chat.anotherHint'),
           promptKey: payload.options.hints[0].promptKey,
           translatedText: payload.options.hints[0].translatedText,
         },
@@ -103,6 +103,7 @@ export function prepareChatRequestPayload(
       ...(imageCdnId && { imageCdnId }),
       ...(imageAltText && { altText: imageAltText }),
       ...(!!problemStandards?.length && { problemStandards }),
+      ...(!!answerOptions?.length && { answerOptions }),
     },
   }
 }

package/src/features/chatbot/hooks/useChatFade.native.tsx

@@ -0,0 +1,75 @@
+import React, { useCallback, useRef, useState } from 'react'
+import { StyleSheet } from 'react-native'
+import { LinearGradient } from 'react-native-linear-gradient'
+
+import { FadeOverlaysProps, FadePosition, FadeUpdateFn, ScrollState } from '../types/chat.types'
+
+const computeFade = (state: ScrollState) => {
+  if (!state.isScrollable) return undefined
+  if (state.isAtTop) return FadePosition.BOTTOM
+  if (state.isScrolledUp) return FadePosition.BOTH
+  return FadePosition.TOP
+}
+
+export const useChatFade = () => {
+  const fadeRef = useRef<FadeUpdateFn | null>(null)
+  const lastFade = useRef<FadePosition | undefined>(undefined)
+
+  const handleScrollStateChange = useCallback((state: ScrollState) => {
+    const fade = computeFade(state)
+    if (fade === lastFade.current) return
+    lastFade.current = fade
+    fadeRef.current?.(fade)
+  }, [])
+
+  const resetFade = useCallback(() => {
+    lastFade.current = undefined
+    fadeRef.current?.(undefined)
+  }, [])
+
+  return { fadeRef, maskStyle: undefined, handleScrollStateChange, resetFade }
+}
+
+const FADE_HEIGHT = 35
+
+export const FadeOverlays = ({ fadeRef }: FadeOverlaysProps) => {
+  const [fade, setFade] = useState<FadePosition | undefined>(undefined)
+  fadeRef.current = setFade
+
+  const showTop = fade === FadePosition.TOP || fade === FadePosition.BOTH
+  const showBottom = fade === FadePosition.BOTTOM || fade === FadePosition.BOTH
+
+  return (
+    <>
+      <LinearGradient
+        colors={['white', 'rgba(255,255,255,0)']}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+        style={[styles.gradient, styles.gradientTop, { opacity: showTop ? 1 : 0 }]}
+        pointerEvents="none"
+      />
+      <LinearGradient
+        colors={['rgba(255,255,255,0)', 'white']}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+        style={[styles.gradient, styles.gradientBottom, { opacity: showBottom ? 1 : 0 }]}
+        pointerEvents="none"
+      />
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  gradient: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: FADE_HEIGHT,
+  },
+  gradientTop: {
+    top: 0,
+  },
+  gradientBottom: {
+    bottom: 0,
+  },
+})

package/src/features/chatbot/hooks/useChatFade.ts

@@ -0,0 +1 @@
+export { useChatFade, FadeOverlays } from './useChatFade.native'

package/src/features/chatbot/hooks/useChatFade.web.ts

@@ -0,0 +1,45 @@
+import { useCallback, useRef, useState } from 'react'
+import { ViewStyle } from 'react-native'
+
+import { FadePosition, ScrollState } from '../types/chat.types'
+
+const MASKS: Record<FadePosition, ViewStyle> = {
+  [FadePosition.TOP]: {
+    maskImage: 'linear-gradient(to top, transparent, black 10%, black)',
+  } as any,
+  [FadePosition.BOTTOM]: {
+    maskImage: 'linear-gradient(to bottom, transparent, black 10%, black)',
+  } as any,
+  [FadePosition.BOTH]: {
+    maskImage: 'linear-gradient(to top, transparent, black 10%, black 90%, transparent)',
+  } as any,
+}
+
+const computeFade = (state: ScrollState) => {
+  if (!state.isScrollable) return undefined
+  if (state.isAtTop) return FadePosition.BOTTOM
+  if (state.isScrolledUp) return FadePosition.BOTH
+  return FadePosition.TOP
+}
+
+export const useChatFade = () => {
+  const fadeRef = useRef(null)
+  const lastFade = useRef<FadePosition | undefined>(undefined)
+  const [maskStyle, setMaskStyle] = useState<ViewStyle | undefined>(undefined)
+
+  const handleScrollStateChange = useCallback((state: ScrollState) => {
+    const fade = computeFade(state)
+    if (fade === lastFade.current) return
+    lastFade.current = fade
+    setMaskStyle(fade ? MASKS[fade] : undefined)
+  }, [])
+
+  const resetFade = useCallback(() => {
+    lastFade.current = undefined
+    setMaskStyle(undefined)
+  }, [])
+
+  return { fadeRef, maskStyle, handleScrollStateChange, resetFade }
+}
+
+export const FadeOverlays = (_: { fadeRef: any }) => null

package/src/features/chatbot/hooks/useChatScroll.ts

@@ -0,0 +1,102 @@
+import { MutableRefObject, useCallback, useRef, useState } from 'react'
+import { FlatList, NativeScrollEvent, NativeSyntheticEvent } from 'react-native'
+import { SCROLL_BOTTOM_THRESHOLD } from '../constants'
+
+type ScrollState = {
+  isScrollable: boolean
+  isScrolledUp: boolean
+  isAtTop: boolean
+  listHeight: number
+  contentHeight: number
+}
+
+const initialScrollState: ScrollState = {
+  isScrollable: false,
+  isScrolledUp: false,
+  isAtTop: false,
+  listHeight: 0,
+  contentHeight: 0,
+}
+
+type ScrollStateListener = (state: ScrollState) => void
+
+type UseChatScrollProps = {
+  listRef: MutableRefObject<FlatList | null>
+  onStateChange?: ScrollStateListener
+}
+
+export const useChatScroll = ({ listRef, onStateChange }: UseChatScrollProps) => {
+  const scrollStateRef = useRef<ScrollState>({ ...initialScrollState })
+  const isAutoScrollingRef = useRef(false)
+  // Stored as state (not in ref) because it drives UI re-renders (ChatIcon visibility, FlatList extraData)
+  const [isScrolledUp, setIsScrolledUp] = useState(false)
+
+  const handleScroll = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent
+      const scrolledUp = contentOffset.y > SCROLL_BOTTOM_THRESHOLD
+      const atTop =
+        contentOffset.y >= contentSize.height - layoutMeasurement.height - SCROLL_BOTTOM_THRESHOLD
+
+      const state = scrollStateRef.current
+      state.isAtTop = atTop
+
+      if (isAutoScrollingRef.current) {
+        if (!scrolledUp) {
+          isAutoScrollingRef.current = false
+        }
+      } else {
+        state.isScrolledUp = scrolledUp
+        setIsScrolledUp(scrolledUp)
+      }
+
+      onStateChange?.(state)
+    },
+    [onStateChange],
+  )
+
+  const handleLayout = useCallback(
+    (e: { nativeEvent: { layout: { height: number } } }) => {
+      const state = scrollStateRef.current
+      state.listHeight = e.nativeEvent.layout.height
+      state.isScrollable = state.contentHeight > state.listHeight
+      onStateChange?.(state)
+    },
+    [onStateChange],
+  )
+
+  const handleContentSizeChange = useCallback(
+    (_: number, contentHeight: number) => {
+      const state = scrollStateRef.current
+      state.contentHeight = contentHeight
+      state.isScrollable = state.contentHeight > state.listHeight
+      onStateChange?.(state)
+    },
+    [onStateChange],
+  )
+
+  const scrollToBottom = () => {
+    if (scrollStateRef.current.isScrolledUp) {
+      isAutoScrollingRef.current = true
+      scrollStateRef.current.isScrolledUp = false
+      setIsScrolledUp(false)
+      listRef.current?.scrollToOffset({ offset: 0, animated: true })
+    }
+  }
+
+  const reset = () => {
+    scrollStateRef.current = { ...initialScrollState }
+    isAutoScrollingRef.current = false
+    setIsScrolledUp(false)
+  }
+
+  return {
+    scrollStateRef,
+    isScrolledUp,
+    handleScroll,
+    handleLayout,
+    handleContentSizeChange,
+    scrollToBottom,
+    reset,
+  }
+}

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

@@ -58,7 +58,7 @@ export class ChatbotModel {
 
   readonly resetAlternatives = createEvent()
   readonly setAlternatives = createEvent<GetAlternativesResponse | null>()
-  readonly $alternatives: Store<GetAlternativesResponse | null>
+  readonly $alternatives = createStore<GetAlternativesResponse | null>(null)
 
   readonly setIsOpen = createEvent<boolean>()
   readonly toggleOpen = createEvent()
@@ -94,7 +94,7 @@ export class ChatbotModel {
       this.threadManager.setMessagesLimit(threadMessagesLimit)
     }
 
-    this.$alternatives = createStore<GetAlternativesResponse | null>(null)
+    this.$alternatives
       .on(this.api.getAlternativesFx.doneData, (_, payload) => transformAlternatives(payload))
       .on(this.setAlternatives, (_, payload) => transformAlternatives(payload))
       .reset(this.resetAlternatives)
@@ -122,9 +122,17 @@ export class ChatbotModel {
     })
 
     sample({
-      source: this.$isOpen.updates,
+      clock: this.$isOpen.updates,
       filter: (isOpen) => !isOpen,
-      target: [this.t2s.reset, this.errorSpotting.spottingHidden],
+      target: [this.t2s.reset, this.errorSpotting.spottingHidden, this.setScrollActive],
+    })
+
+    sample({
+      clock: this.setIsOpen,
+      source: this.$currentChatData,
+      filter: ({ hasBeenOpened }, isOpen) => isOpen && !hasBeenOpened,
+      fn: ({ key }) => ({ key, data: { hasBeenOpened: true } }),
+      target: this.cache.update,
     })
 
     sample({
@@ -196,30 +204,57 @@ export class ChatbotModel {
 
   private createSendHelpRequestFx() {
     const effect = attach({
-      source: { key: this.$currentKey, context: this.$context, cache: this.cache.$data },
+      source: {
+        key: this.$currentKey,
+        context: this.$context,
+        cache: this.cache.$data,
+        alternatives: this.$alternatives,
+      },
       mapParams: (params: SendHelpParams, source) => ({
         ...params,
         ...source,
       }),
       effect: createEffect(
-        async ({ message, translatedMessage, key, context, isFreeText, cache }: SendHelpProps) => {
+        async ({
+          message,
+          translatedMessage,
+          key,
+          context,
+          isFreeText,
+          clearDefaultMessages,
+          cache,
+          alternatives,
+        }: SendHelpProps) => {
           if (!context) throw new Error('Trying to send message in chat without context')
           this.setLastMessageKey(key)
+          if (clearDefaultMessages) {
+            this.cache.clearMessages(key)
+          }
           this.cache.addMessages(key, {
             messages: [messagesHelper.createOwn({ message, translatedMessage })],
           })
 
+          const chatHistory =
+            context.assignmentId && context.problemId
+              ? {
+                  exerciseId: context.assignmentId,
+                  problemId: context.problemId,
+                  chatVersion: alternatives?.version,
+                }
+              : undefined
+
           // Request is overridden by ThreadManager.postMessage (delegates to sendMessage/getHint)
           const response = await this.api.postMessageFx({
             answer: context.answer,
             answerOptions: context.answerOptions,
-            problemDescription: context.problem,
+            problemDescription: context.problemDescription,
             problemStandards: context.problemStandards,
             problemAnswer: context.problemAnswer,
             language: context.language,
             imageAltText: context.imageDescription,
             imageCdnId: context.imageCdnId,
             conversationId: cache[key].conversationId,
+            chatHistory,
             ...(isFreeText && { freeTextMessage: message }),
           })
 

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

@@ -63,8 +63,20 @@ export class ChatBotThreadManager {
       const content = await this.drawBoardAdapter.getContent()
       if (!content) return threadItem
       threadItem.setValidationKey(content.validationKey)
-      if (content.text) return threadItem.setText(content.text)
-      if (content.strokes?.length) return threadItem.setStrokes(content.strokes)
+      threadItem.setStudentInput(content.studentInput)
+
+      if (content.strokes?.length) {
+        threadItem.setStrokes(content.strokes)
+      }
+      if (content.spreadSheetContent?.length) {
+        threadItem.setSpreadSheetContent(content.spreadSheetContent)
+      }
+      if (content.equationContent?.length) {
+        threadItem.setEquationContent(content.equationContent)
+      }
+      if (content.drawBoardImage) {
+        threadItem.setDrawBoardImage(content.drawBoardImage)
+      }
     } catch {}
 
     return threadItem
@@ -91,10 +103,21 @@ export class ChatBotThreadManager {
         ? await this.api.sendMessage(data, requestConfig)
         : await this.api.getHint(data, requestConfig)
 
+    const isFirstHint = threadItem.history.length === 0
     threadItem.history.push(result.message)
 
-    if ('errorStrokeIds' in result && result?.errorStrokeIds) {
-      threadItem.setErrorStrokesIds(result.errorStrokeIds)
+    if (isFirstHint) {
+      if ('errorChars' in result && result.errorChars?.length) {
+        const errorStrokeIds = result.errorChars.map((c) => c.id)
+        threadItem.setErrorStrokesIds(errorStrokeIds)
+        threadItem.setErrorChars(result.errorChars)
+      }
+      if ('errorCellIds' in result && result.errorCellIds?.length) {
+        threadItem.setErrorStrokesIds(result.errorCellIds)
+      }
+      if ('errorStrokeIds' in result && result?.errorStrokeIds) {
+        threadItem.setErrorStrokesIds(result.errorStrokeIds)
+      }
     }
 
     const nextOptions =

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

@@ -11,11 +11,12 @@ export class ChatBotTextManager {
 
   public readonly messages: ChatbotMessages = {
     error: this.messagesCreator.createMessage('chat.errorMessage', {
-      options: [this.messagesCreator.createOption('chat.giveHint')],
+      options: [this.messagesCreator.createOption('chat.needHint')],
     }),
     start: this.messagesCreator.createMessage('chat.howCanIHelp'),
     endMessage: this.messagesCreator.createMessage('chat.answerAgain'),
     anotherHintOption: this.messagesCreator.createOption('chat.anotherHint'),
+    getHint: this.messagesCreator.createOption('chat.getHint'),
   }
   private readonly defaultMessages = { ...this.messages }
 

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

@@ -153,7 +153,7 @@ export class ChatbotTranslation {
       }
 
       const defaultMessages = [this.defaultMessages.error, this.defaultMessages.endMessage]
-      const defaultOptions = [this.defaultMessages.anotherHintOption]
+      const defaultOptions = [this.defaultMessages.anotherHintOption, this.defaultMessages.getHint]
       const options = getOptionsForTranslation({ lastMessage: messages.at(-1), alternatives })
 
       const translatedTextsList = await this.translateRequest({

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

@@ -71,6 +71,13 @@ export class ChatsCacheModel {
     })
   }
 
+  public clearMessages(key: string) {
+    this.cache.setField({
+      key,
+      fn: (current) => (current ? { ...current, messages: [] } : undefined),
+    })
+  }
+
   public setSingleMessage(key: string, message: ConversationMessage) {
     this.cache.setField({
       key,