@magmamath/students-features 1.2.2-rc.5 → 1.3.1-rc.0

package/example/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "example",
+    "slug": "example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "magmamath.features.example"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "magmamath.features.example"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/example/babel.config.js

@@ -0,0 +1,28 @@
+const path = require('path')
+const { getConfig } = require('react-native-builder-bob/babel-config')
+const pkg = require('../package.json')
+
+const root = path.resolve(__dirname, '..')
+
+module.exports = function (api) {
+  api.cache(true)
+
+  return getConfig(
+    {
+      presets: ['babel-preset-expo'],
+      plugins: [
+        [
+          'module-resolver',
+          {
+            extensions: ['.tsx', '.ts', '.js', '.json'],
+            alias: {
+              [pkg.name]: path.join(__dirname, '../', pkg.source),
+            },
+          },
+        ],
+        ['@babel/plugin-transform-private-methods', { loose: true }],
+      ],
+    },
+    { root, pkg },
+  )
+}

package/example/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './src/App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

package/example/metro.config.js

@@ -0,0 +1,18 @@
+const path = require('path');
+const { getDefaultConfig } = require('@expo/metro-config');
+const { getConfig } = require('react-native-builder-bob/metro-config');
+const pkg = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+module.exports = getConfig(getDefaultConfig(__dirname), {
+  root,
+  pkg,
+  project: __dirname,
+});

package/example/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@magmamath/students-features-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~4.0.0",
+    "expo": "~52.0.11",
+    "expo-status-bar": "~2.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-web": "~0.19.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "react-native-builder-bob": "^0.33.3"
+  },
+  "private": true
+}

package/example/src/App.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Text } from 'react-native'
+
+const App = () => {
+  return <Text>Hello</Text>
+}
+
+export default App

package/example/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    // Avoid expo-cli auto-generating a tsconfig
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.2.2-rc.5",
+  "version": "1.3.1-rc.0",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -90,4 +90,4 @@
     "type": "library",
     "version": "0.44.3"
   }
-}
+}

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

@@ -21,7 +21,6 @@ import { MessageItem } from './MessageItem'
 import { CHAT_CONTAINER_WIDTH } from '../../constants'
 import { useChatScroll } from '../../hooks/useChatScroll'
 import { useChatFade, FadeOverlays } from '../../hooks/useChatFade'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 const Separator = () => <View style={styles.separator} />
 const keyExtractor = (item: ConversationMessage, index: number) => `${item.id}-${index}`
@@ -116,7 +115,7 @@ export const Chat = ({
   if (!isOpen) return null
 
   return (
-    <View testID={TEST_IDS.CHAT_AREA} style={[styles.container, { maxHeight }]}>
+    <View style={[styles.container, { maxHeight }]}>
       <View style={styles.listWrapper}>
         <FlatList
           ref={listRef}

package/src/features/chatbot/components/Chat/ChatIcon.tsx

@@ -5,14 +5,13 @@ import { IS_WEB } from '@magmamath/react-native-ui'
 import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
 import { LavaIconInGlasses } from '../../../../shared/icons/LavaIconInGlasses'
 import { CHATBOT_ICON_SIZE } from '../../constants'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type ChatIconProps = {
   isLoading: boolean
 }
 
 export const ChatIcon = ({ isLoading }: ChatIconProps) => (
-  <View style={styles.container} testID={TEST_IDS.CHAT_ICON}>
+  <View style={styles.container}>
     {isLoading ? (
       <LavaIconInGlasses width={CHATBOT_ICON_SIZE.width} height={CHATBOT_ICON_SIZE.height} />
     ) : (

package/src/features/chatbot/components/Chat/CloseButton.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { StyleSheet } from 'react-native'
 import { Button, ButtonColor, ButtonSize, ButtonVariant, COLORS } from '@magmamath/react-native-ui'
 import { CloseIcon } from '../../../../shared/icons/CloseIcon'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type CloseButtonProps = {
   onPress?: () => void
@@ -16,7 +15,6 @@ export const CloseButton = ({ onPress }: CloseButtonProps) => (
     size={ButtonSize.MEDIUM}
     colorScheme={ButtonColor.WHITE}
     raiseLevel={5}
-    testID={TEST_IDS.CHAT_CLOSE_BUTTON}
   >
     <CloseIcon width={18} height={18} />
   </Button>

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

@@ -5,7 +5,6 @@ import { Button, ButtonColor, ButtonSize, ButtonVariant } from '@magmamath/react
 import { useUnit } from 'effector-react'
 import { ChatbotModel } from '../../model/ChatBotModel'
 import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type ChatControlsProps = {
   model: ChatbotModel
@@ -44,7 +43,6 @@ export const ChatControls = ({
               raiseLevel={3}
               onPress={onPressHelpButton}
               style={{ text: styles.helpButtonText }}
-              testID={TEST_IDS.CHAT_GET_A_HINT_BUTTON}
             >
               {(isTranslated && getHint.translatedText) || getHint.text}
             </Button>

package/src/features/chatbot/components/ChatInput/FreeText/ChatTextInput.tsx

@@ -14,7 +14,6 @@ import { useKeyBoard } from '../../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../../lib/constants'
 
 import { SendMessageButton } from './SendMessageButton'
-import { TEST_IDS } from '../../../../../config/dataTestIDs'
 
 const MAX_AVAILABLE_MESSAGE_LENGTH = 500
 const COMPACT_WIDTH = 134
@@ -111,7 +110,6 @@ export const ChatTextInput = ({
         placeholder={placeholder}
         placeholderTextColor={COLORS.NEUTRAL_5}
         style={styles.input}
-        testID={TEST_IDS.OPEN_CHAT_TEXT_INPUT}
       />
       <SendMessageButton
         onPress={handleSendMessage}

package/src/features/chatbot/components/ChatInput/FreeText/FreeTextInputBlock.tsx

@@ -6,7 +6,6 @@ import { HintButtonVariant, RequestHintButton } from '../RequestHintButton'
 import { useChatModel } from '../../../context/ChatBotModelContext'
 import { t } from '../../../../../shared/translation'
 import { ChatTextInput } from './ChatTextInput'
-import { TEST_IDS } from '../../../../../config/dataTestIDs'
 
 type FreeTextInputBlockProps = {
   optionLabel: string
@@ -39,7 +38,7 @@ export const FreeTextInputBlock = ({
   const handleOnChangeText = (text: string) => model.textInput.setValue(text)
 
   return (
-    <View style={styles.container} testID={TEST_IDS.OPEN_CHAT_INPUT_FIELD}>
+    <View style={styles.container}>
       <ChatTextInput
         value={inputValue}
         onSubmit={handleOnSubmit}

package/src/features/chatbot/components/ChatInput/FreeText/SendMessageButton.tsx

@@ -9,7 +9,6 @@ import Animated, {
 import { ArrowUpIcon, COLORS, IS_MOBILE } from '@magmamath/react-native-ui'
 import { ColorScheme } from '@magmamath/students-features'
 import { MESSAGE_COLORS_MAP } from '../../../constants'
-import { TEST_IDS } from '../../../../../config/dataTestIDs'
 
 type SendMessageButtonProps = {
   onPress: () => void
@@ -55,7 +54,6 @@ export const SendMessageButton = ({
       disabled={disabled}
       accessibilityState={{ disabled }}
       accessibilityRole="button"
-      testID={TEST_IDS.OPEN_CHAT_SEND_MESSAGE_BUTTON}
     >
       {IS_MOBILE ? (
         <Animated.View

package/src/features/chatbot/components/ChatInput/RequestHintButton.tsx

@@ -14,7 +14,6 @@ import {
   SPACING,
 } from '@magmamath/react-native-ui'
 import { ColorScheme } from '@magmamath/students-features'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 import { INPUT_WIDTH, MESSAGE_COLORS_MAP } from '../../constants'
 
 export enum HintButtonVariant {
@@ -104,7 +103,6 @@ export const RequestHintButton = memo(
         disabled={disabled}
         accessibilityState={{ disabled }}
         accessibilityRole="button"
-        testID={TEST_IDS.CHAT_NEED_A_HINT_BUTTON}
       >
         <Animated.View style={[styles.content, animatedTextContainerStyle]}>
           <Animated.Text numberOfLines={1} style={[styles.text, animatedTextStyle, { fontSize }]}>

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

@@ -1,8 +1,7 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { BORDER_RADIUS, COLORS, Loader, LoaderColor } from '@magmamath/react-native-ui'
 import { SPACING } from '@magmamath/react-native-ui'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type MessageLoaderProps = {
   isLoading?: boolean
@@ -12,7 +11,7 @@ export const MessageLoader = ({ isLoading }: MessageLoaderProps) => {
   if (!isLoading) return null
 
   return (
-    <View style={styles.loader} testID={TEST_IDS.CHAT_MESSAGE_LOADER}>
+    <View style={styles.loader}>
       <Loader color={LoaderColor.GRAY} />
     </View>
   )

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

@@ -6,7 +6,6 @@ import { ConversationMessage } from '../../types/units.types'
 import { MessageVariant } from '../../types/model.types'
 import { ColorScheme } from '../../types/style.types'
 import { MESSAGE_COLORS_MAP } from '../../constants'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 type MessageTextToSpeechProps = {
   state: T2SState
@@ -35,7 +34,6 @@ export const MessageTextToSpeech = ({
       colorScheme={MESSAGE_COLORS_MAP[colorScheme][variant].icon}
       state={state}
       onPress={play}
-      testID={TEST_IDS.CHAT_TTS_BUTTON}
     />
   )
 }

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

@@ -7,7 +7,6 @@ import { ColorScheme } from '../../types/style.types'
 import { MessageVariant } from '../../types/model.types'
 import { VariantProps } from './ChatMessage'
 import { MessageContent } from './MessageContent'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const ReceivedMessage = ({
   message,
@@ -22,7 +21,7 @@ export const ReceivedMessage = ({
   const text = isTranslated ? message.translatedMessage : message.message
 
   return (
-    <View style={styles.container} testID={TEST_IDS.CHAT_MESSAGE_RECEIVED}>
+    <View style={styles.container}>
       <View style={[styles.iconWrapper, { opacity: withIcon ? 1 : 0 }]}>
         <ChatbotIcon width={CHATBOT_ICON_SIZE.width} height={CHATBOT_ICON_SIZE.height} />
       </View>

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

@@ -7,7 +7,6 @@ import { VariantProps } from './ChatMessage'
 import { MESSAGE_COLORS_MAP } from '../../constants'
 import { ColorScheme } from '../../types/style.types'
 import { MessageVariant } from '../../types/model.types'
-import { TEST_IDS } from '../../../../config/dataTestIDs'
 
 export const SentMessage = React.memo(
   ({ message, isTranslated, colorScheme = ColorScheme.Blue }: VariantProps) => {
@@ -15,7 +14,6 @@ export const SentMessage = React.memo(
 
     return (
       <View
-        testID={TEST_IDS.CHAT_MESSAGE_SENT}
         style={[
           styles.container,
           { backgroundColor: MESSAGE_COLORS_MAP[colorScheme][MessageVariant.SENT].background },

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

@@ -6,7 +6,6 @@ import { StyleSheet } from 'react-native'
 import { HighlighterIcon } from '../../../shared/icons/HighlighterIcon'
 import { ConversationMessage } from '../types/units.types'
 import { useText } from '../../../shared/translation'
-import { TEST_IDS } from '../../../config/dataTestIDs'
 
 type ErrorSpottingButtonProps = {
   contextMessage: ConversationMessage
@@ -33,7 +32,6 @@ export const ErrorSpottingButton = ({ contextMessage }: ErrorSpottingButtonProps
       variant={'secondary'}
       colorScheme={'blue'}
       size={'small'}
-      testID={TEST_IDS.CHAT_ERROR_SPOTTING_BUTTON}
       onPress={() => {
         model.errorSpotting.errorSpottingPressed({ message: contextMessage })
       }}

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

@@ -103,6 +103,7 @@ export function prepareChatRequestPayload(
       ...(imageCdnId && { imageCdnId }),
       ...(imageAltText && { altText: imageAltText }),
       ...(!!problemStandards?.length && { problemStandards }),
+      ...(!!answerOptions?.length && { answerOptions }),
     },
   }
 }

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

@@ -56,24 +56,44 @@ export class ChatBotThreadManager {
     const key = this.currentKey
     const existingThreadItem = this.threads.get(key)
     if (existingThreadItem) return existingThreadItem
+
     const threadItem = new ThreadItem()
     this.threads.set(key, threadItem)
-    if (!this.drawBoardAdapter) return threadItem
+    await this.setDrawBoardContent(threadItem)
+    return threadItem
+  }
+
+  private async setDrawBoardContent(threadItem: ThreadItem) {
+    if (!this.drawBoardAdapter) return
     try {
       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)
-    } catch {}
+      if (!content) return
 
-    return threadItem
+      threadItem.setValidationKey(content.validationKey)
+      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 (e) {
+      console.error('Failed to load draw board content', e)
+    }
   }
 
   public setDrawBoardAdapter(adapter: IChatDrawBoardAdapter) {
     this.drawBoardAdapter = adapter
   }
 
+  // TODO: simplify this method, split it into smaller methods
   public readonly postMessage = async (
     payload: PostMessagePayload,
     requestConfig?: RequestOptionalConfig,
@@ -91,10 +111,25 @@ export class ChatBotThreadManager {
         ? await this.api.sendMessage(data, requestConfig)
         : await this.api.getHint(data, requestConfig)
 
+    const isFirstHint = threadItem.hintsHistory.length === 0
     threadItem.history.push(result.message)
 
-    if ('errorStrokeIds' in result && result?.errorStrokeIds) {
-      threadItem.setErrorStrokesIds(result.errorStrokeIds)
+    if (type === ChatRequestType.HINT) {
+      threadItem.hintsHistory.push(result.message)
+    }
+
+    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/ThreadItem.ts

@@ -1,24 +1,44 @@
-import { FullStrokeData, IThreadItem } from '../types/units.types'
+import {
+  ErrorChar,
+  EquationItem,
+  FullStrokeData,
+  IThreadItem,
+  SpreadsheetItem,
+} from '../types/units.types'
 import { generateRandomId } from '../../../lib/helpers/helpers'
 
 type ThreadItemProps = {
   strokes?: FullStrokeData[]
-  text?: string
   key: string
+  spreadSheetContent?: SpreadsheetItem[]
+  equationContent?: EquationItem[]
+  drawBoardImage?: string
+  studentInput?: string
 }
 
+const DEFAULT_STUDENT_INPUT = 'none'
+
+// TODO: move drawboard content to separate class and make ThreadItem responsible only for history and hints
 export class ThreadItem implements IThreadItem {
   public readonly id = generateRandomId()
   public readonly history: string[] = []
+  public readonly hintsHistory: string[] = []
   public strokesValidationKey: string | null = null
   public strokes: FullStrokeData[] | null
-  public text: string | null = null
   public errorStrokesIds: string[] | null = null
+  public errorChars: ErrorChar[] | null = null
+  public spreadSheetContent?: SpreadsheetItem[]
+  public equationContent?: EquationItem[]
+  public drawBoardImage?: string
+  public studentInput: string
 
   public constructor(props?: ThreadItemProps | null) {
     this.strokes = props?.strokes ?? null
-    this.text = props?.text ?? null
     this.strokesValidationKey = props?.key ?? null
+    this.spreadSheetContent = props?.spreadSheetContent
+    this.equationContent = props?.equationContent
+    this.drawBoardImage = props?.drawBoardImage
+    this.studentInput = props?.studentInput ?? DEFAULT_STUDENT_INPUT
   }
 
   public setStrokes(strokes: FullStrokeData[]) {
@@ -26,11 +46,6 @@ export class ThreadItem implements IThreadItem {
     return this
   }
 
-  public setText(text: string) {
-    this.text = text
-    return this
-  }
-
   public setValidationKey(key: string) {
     this.strokesValidationKey = key
     return this
@@ -41,19 +56,53 @@ export class ThreadItem implements IThreadItem {
     return this
   }
 
-  public getNextHintProps() {
-    if (this.history.length) {
-      return {
-        previousHint: this.history[this.history.length - 1],
-      }
-    }
+  public setErrorChars(chars: ErrorChar[]) {
+    this.errorChars = chars
+    return this
+  }
 
-    if (this.text) {
-      return { drawBoardText: this.text }
-    }
+  public setSpreadSheetContent(content: SpreadsheetItem[]) {
+    this.spreadSheetContent = content
+    return this
+  }
+
+  public setEquationContent(content: EquationItem[]) {
+    this.equationContent = content
+    return this
+  }
 
-    if (this.strokes && this.strokes.length > 0) {
+  public setDrawBoardImage(image: string) {
+    this.drawBoardImage = image
+    return this
+  }
+
+  public setStudentInput(studentInput: string) {
+    this.studentInput = studentInput
+    return this
+  }
+
+  private getContentProps() {
+    if (this.strokes?.length) {
       return { stroke: this.strokes }
     }
+    if (this.spreadSheetContent?.length) {
+      return { spreadSheetContent: this.spreadSheetContent }
+    }
+    if (this.equationContent?.length) {
+      return { equationContent: this.equationContent }
+    }
+    return {}
+  }
+
+  public getNextHintProps() {
+    const hintNumber = this.hintsHistory.length
+
+    return {
+      hintNumber,
+      studentInput: this.studentInput,
+      ...(this.drawBoardImage && { drawBoardImage: this.drawBoardImage }),
+      ...(hintNumber === 0 && this.getContentProps()),
+      ...(this.hintsHistory.length && { previousHints: [...this.hintsHistory] }),
+    }
   }
 }

package/src/features/chatbot/types/api.types.ts

@@ -1,4 +1,11 @@
-import { ChatAnswer, FullStrokeData, Stroke } from './units.types'
+import {
+  ChatAnswer,
+  FullStrokeData,
+  Stroke,
+  EquationItem,
+  SpreadsheetItem,
+  ErrorChar,
+} from './units.types'
 import { ProblemStandard } from './model.types'
 
 export type GetAlternativesPayload = {
@@ -107,17 +114,25 @@ export type ChatHintPayload = {
   correctAnswer: string[]
   userAnswer?: string | string[]
   stroke?: Stroke[]
-  previousHint?: string
+  previousHints?: string[]
   language: string
   imageAltText?: string
   imageCdnId?: string
   drawBoardText?: string
+  spreadSheetContent?: SpreadsheetItem[]
+  equationContent?: EquationItem[]
+  drawBoardImage?: string
+  hintNumber: number
+  studentInput: string
+  answerOptions?: string[]
 }
 
 export type ChatHintResponse = {
   message: string
   conversationId?: string | null
   errorStrokeIds?: string[]
+  errorCellIds?: string[]
+  errorChars?: ErrorChar[]
 }
 export type ErrorSpottingPayload = {
   strokes: FullStrokeData[]