@magmamath/students-features 0.10.0 → 0.11.0-rc.0

package/dist/typescript/module/lib/effector/createControllerEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createControllerEffect.d.ts","sourceRoot":"","sources":["../../../../../src/lib/effector/createControllerEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAMpD,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAClD,UAAU,EAAE,eAAe,CAAA;CAC5B,CAAA;AAED,KAAK,sBAAsB,CAAC,CAAC,IAAI;IAC/B,IAAI,EAAE,CAAC,CAAA;IACP,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAE,CAAA;AAErD,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,EAClD,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC,CAAC,CAAC,uCAM9D,sBAAsB,CAAC,CAAC,CAAC,gBAwB7B;AAED,eAAO,MAAM,sBAAsB,GAAI,CAAC,EAAE,CAAC,aACrC,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC,CAAC,CAAC,2BAa7D,CAAA"}
+{"version":3,"file":"createControllerEffect.d.ts","sourceRoot":"","sources":["../../../../../src/lib/effector/createControllerEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAMpD,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAClD,UAAU,EAAE,eAAe,CAAA;CAC5B,CAAA;AAED,KAAK,sBAAsB,CAAC,CAAC,IAAI;IAC/B,IAAI,EAAE,CAAC,CAAA;IACP,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAE,CAAA;AAE5D,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,EAClD,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC,CAAC,CAAC,uCAM9D,sBAAsB,CAAC,CAAC,CAAC,gBAwB7B;AAED,eAAO,MAAM,sBAAsB,GAAI,CAAC,EAAE,CAAC,aACrC,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC,CAAC,CAAC,2BAa7D,CAAA"}

package/dist/typescript/module/shared/common.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const isWeb: boolean;
+//# sourceMappingURL=common.constants.d.ts.map

package/dist/typescript/module/shared/common.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.constants.d.ts","sourceRoot":"","sources":["../../../../src/shared/common.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,SAAwB,CAAA"}

package/dist/typescript/module/shared/icons/TimeIcon.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from './icon.types';
+import React from 'react';
+export declare const TimeIcon: ({ size, color }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=TimeIcon.d.ts.map

package/dist/typescript/module/shared/icons/TimeIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeIcon.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/TimeIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,QAAQ,oBAA6C,SAAS,sBAiB1E,CAAA"}

package/dist/typescript/module/shared/icons/keyboard/RoundBracketLeftIcon/RoundBracketLeftIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from '../../icon.types';
+export declare const RoundBracketLeftIcon: ({ size, color }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=RoundBracketLeftIcon.d.ts.map

package/dist/typescript/module/shared/icons/keyboard/RoundBracketLeftIcon/RoundBracketLeftIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundBracketLeftIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/keyboard/RoundBracketLeftIcon/RoundBracketLeftIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAK5C,eAAO,MAAM,oBAAoB,oBAA0B,SAAS,sBAWnE,CAAA"}

package/dist/typescript/module/shared/icons/keyboard/RoundBracketRightIcon/RoundBracketRightIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from '../../icon.types';
+export declare const RoundBracketRightIcon: ({ size, color }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=RoundBracketRightIcon.d.ts.map

package/dist/typescript/module/shared/icons/keyboard/RoundBracketRightIcon/RoundBracketRightIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundBracketRightIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/keyboard/RoundBracketRightIcon/RoundBracketRightIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAK5C,eAAO,MAAM,qBAAqB,oBAA0B,SAAS,sBAWpE,CAAA"}

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

@@ -39,6 +39,7 @@ export declare const LOCALIZATION_CONFIGS: {
             area: string;
             volume: string;
             weight: string;
+            time: string;
         };
     };
     "en-GB": {
@@ -81,6 +82,7 @@ export declare const LOCALIZATION_CONFIGS: {
             area: string;
             volume: string;
             weight: string;
+            time: string;
         };
     };
     "sv-SE": {
@@ -123,6 +125,7 @@ export declare const LOCALIZATION_CONFIGS: {
             area: string;
             volume: string;
             weight: string;
+            time: string;
         };
     };
     "en-CA": {
@@ -165,6 +168,7 @@ export declare const LOCALIZATION_CONFIGS: {
             area: string;
             volume: string;
             weight: string;
+            time: string;
         };
     };
     "en-SCT": {
@@ -207,6 +211,7 @@ export declare const LOCALIZATION_CONFIGS: {
             area: string;
             volume: string;
             weight: string;
+            time: string;
         };
     };
     "de-DE": {
@@ -249,6 +254,7 @@ export declare const LOCALIZATION_CONFIGS: {
             area: string;
             volume: string;
             weight: string;
+            time: string;
         };
     };
 };

package/dist/typescript/module/shared/translation/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOhC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOhC,CAAA"}

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

@@ -40,6 +40,7 @@ export declare const setLocalization: import("effector").EventCallable<{
         area: string;
         volume: string;
         weight: string;
+        time: string;
     };
 } | ((config: typeof LOCALIZATION_CONFIGS) => Translations)>;
 export declare const $localization: import("effector").StoreWritable<{
@@ -82,6 +83,7 @@ export declare const $localization: import("effector").StoreWritable<{
         area: string;
         volume: string;
         weight: string;
+        time: 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,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"}
+{"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/types/common.types.d.ts

@@ -1,5 +1,7 @@
+import { COLORS } from '@magmamath/react-native-ui';
 export type Size = {
     width: number;
     height: number;
 };
+export type ColorValue = (typeof COLORS)[keyof typeof COLORS];
 //# sourceMappingURL=common.types.d.ts.map

package/dist/typescript/module/types/common.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.types.d.ts","sourceRoot":"","sources":["../../../../src/types/common.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA"}
+{"version":3,"file":"common.types.d.ts","sourceRoot":"","sources":["../../../../src/types/common.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAEnD,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,OAAO,MAAM,CAAC,CAAA"}

package/package.json

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

package/src/features/celebrations/helpers.ts

@@ -1,39 +1,41 @@
-import { ParticlesBatch } from './components/ParticleBatch';
-import { Spark } from './components/Spark';
-import { CELEBRATION_ICON_CONFIG, CELEBRATION_VARIANTS } from './config';
-import { CelebrationVariant } from './types';
+import { ParticlesBatch } from './components/ParticleBatch'
+import { Spark } from './components/Spark'
+import { CELEBRATION_ICON_CONFIG, CELEBRATION_VARIANTS } from './config'
+import { CelebrationVariant } from './types'
 
-export const randomRange = (min: number, max: number) => Math.random() * (max - min) + min;
+export const randomRange = (min: number, max: number) => Math.random() * (max - min) + min
 
 const isDateInRange = (currentDate: Date, startDateStr: string, endDateStr: string) => {
-  const [startDay, startMonth] = startDateStr.split('-').map(Number);
-  const [endDay, endMonth] = endDateStr.split('-').map(Number);
+  const [startDay, startMonth] = startDateStr.split('-').map(Number)
+  const [endDay, endMonth] = endDateStr.split('-').map(Number)
 
-  const currentYear = currentDate.getFullYear();
-  const startDate = new Date(currentYear, startMonth - 1, startDay);
-  const endDate = new Date(currentYear, endMonth - 1, endDay + 1);
+  const currentYear = currentDate.getFullYear()
+  const startDate = new Date(currentYear, startMonth - 1, startDay)
 
-  return currentDate >= startDate && currentDate <= endDate;
-};
+  // If end month is earlier than start month, it spans to next year
+  const endYear = endMonth < startMonth ? currentYear + 1 : currentYear
+  const endDate = new Date(endYear, endMonth - 1, endDay + 1)
+
+  return currentDate >= startDate && currentDate <= endDate
+}
 
 export const getIconForCurrentDate = () => {
-  const currentDate = new Date();
+  const currentDate = new Date()
 
   for (const celebration of CELEBRATION_ICON_CONFIG) {
     if (celebration.activePeriod) {
-      const { start, end } = celebration.activePeriod;
+      const { start, end } = celebration.activePeriod
       if (isDateInRange(currentDate, start, end)) {
-        return celebration.Icon;
+        return celebration.Icon
       }
     }
   }
 
-  return CELEBRATION_ICON_CONFIG[0].Icon;
-};
+  return CELEBRATION_ICON_CONFIG[0].Icon
+}
 
-const MainIcon = getIconForCurrentDate();
-export const generateParticle = (variant: CelebrationVariant
-) => {
+const MainIcon = getIconForCurrentDate()
+export const generateParticle = (variant: CelebrationVariant) => {
   const {
     elementsCount,
     angle,
@@ -44,20 +46,20 @@ export const generateParticle = (variant: CelebrationVariant
     friction,
     life,
     angularAcceleration,
-    speedRange
-  } = CELEBRATION_VARIANTS[variant];
+    speedRange,
+  } = CELEBRATION_VARIANTS[variant]
 
   const sparkSpeedMin = speedRange?.spark?.[0]
   const sparkSpeedMax = speedRange?.spark?.[1]
   const mainSpeedMin = speedRange?.main?.[0]
   const mainSpeedMax = speedRange?.main?.[1]
 
-  const particles: ParticlesBatch[] = [];
+  const particles: ParticlesBatch[] = []
 
   for (let i = 0; i < elementsCount.spark; i++) {
-    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180);
-    const randomSpeed = randomRange(sparkSpeedMin, sparkSpeedMax);
-    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to);
+    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180)
+    const randomSpeed = randomRange(sparkSpeedMin, sparkSpeedMax)
+    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to)
 
     particles.push({
       id: Math.random(),
@@ -74,12 +76,12 @@ export const generateParticle = (variant: CelebrationVariant
       friction,
       Component: Spark,
       life,
-    });
+    })
   }
   for (let i = 0; i < elementsCount.star; i++) {
-    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180);
-    const randomSpeed = randomRange(mainSpeedMin, mainSpeedMax);
-    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to);
+    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180)
+    const randomSpeed = randomRange(mainSpeedMin, mainSpeedMax)
+    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to)
 
     particles.push({
       id: Math.random(),
@@ -96,8 +98,8 @@ export const generateParticle = (variant: CelebrationVariant
       friction,
       Component: MainIcon,
       life,
-    });
+    })
   }
 
-  return particles;
-};
+  return particles
+}

package/src/features/chatbot/TTS_HIGHLIGHTING.md

@@ -0,0 +1,120 @@
+# TTS Word-by-Word Highlighting
+
+## Overview
+
+Word-by-word text highlighting synchronized with text-to-speech playback in the chatbot. The feature is optional and enabled via `isWordHighlightEnabled` config flag.
+
+## How It Works
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  1. User clicks TTS button on a message                         │
+│                           ↓                                     │
+│  2. Text is converted to SSML with word marks                   │
+│     "Hello world" → <speak><mark name="w_0"/>Hello              │
+│                            <mark name="w_1"/>world</speak>      │
+│                           ↓                                     │
+│  3. Google TTS API returns audio + timepoints                   │
+│     [{ markName: "w_0", timeSeconds: 0.0 },                     │
+│      { markName: "w_1", timeSeconds: 0.5 }]                     │
+│                           ↓                                     │
+│  4. Audio plays, onTimeUpdate fires via RAF loop                │
+│                           ↓                                     │
+│  5. Current time → find matching timepoint → word index         │
+│                           ↓                                     │
+│  6. $highlightedWordIndex updates → UI re-renders highlighted   │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## Usage
+
+```tsx
+// In students-web model setup
+chatModel.bot.setUpT2S({
+  audioProvider: createT2SAudioProvider(),
+  textSanitizer: removeKatexPartFromTextToSpeech,
+  isWordHighlightEnabled: true,
+})
+```
+
+## Architecture
+
+### ChatTTSModel (ChatTTSModel.ts)
+
+Handles TTS playback and word highlighting. Key design decisions:
+
+- **Map-based cache** — `audioCache: Map<string, AudioCache>` stores both `audioPath` and `timepoints` per message. When highlighting is off, `timepoints` is `[]`. Cache lives for the model's lifetime (cleared when user leaves the problem).
+- **`fetchAudio()` method** — encapsulates API call + audioContent decoding. Highlight vs non-highlight differences are ternaries (SSML vs plain text, `enableTimePointing`).
+- **`play()` is linear** — cache lookup → fetch if miss → store → activate highlight if enabled → play audio. No branching between highlight/non-highlight paths.
+- **Pause/resume guards** — `wordHighlightEnabled` check before toggling `setIsActive(false)`/`setIsActive(true)` on pause/resume.
+- **`wordHighlightEnabled` (private)** — stored result of `!!isWordHighlightEnabled && !!audioProvider.onTimeUpdate`. Set once at `setConfig`.
+- **`isWordHighlightEnabled` (public getter)** — read-only access for external consumers (e.g. `Chat.tsx`).
+
+### AudioProvider type
+
+```typescript
+type AudioProvider = {
+  play: (audioPath: string, onPlaybackComplete: () => void) => Promise<void>
+  pause: () => void
+  resume: () => void
+  stop: () => void
+  onTimeUpdate?: OnTimeUpdate  // optional — presence enables highlight capability
+}
+```
+
+`onTimeUpdate` is optional. It's the mechanism that syncs audio playback time with word highlights via a RAF loop. If the provider doesn't have it, highlighting won't activate even if `isWordHighlightEnabled: true`.
+
+### ChatTTSHighlightModel (ChatTTSHighlightModel.ts)
+
+Manages highlight state using Effector stores with declarative reset. Receives `OnTimeUpdate` callback directly (not the whole `AudioProvider`).
+
+- **`$isActive`** — gates `$highlightedWordIndex` computation. Toggled on pause/resume without resetting timepoints.
+- **`$highlightedWordIndex`** — derived store, returns `-1` when inactive or no match. Parses mark name via `WORD_MARK_REGEX`.
+- **`activate(timepoints, onTimeUpdate)`** — sets timepoints, enables highlighting, registers time update callback. Only triggers store updates when the highlighted word actually changes (`lastMark` comparison).
+- **`deactivate(onTimeUpdate)`** — stops listening, resets all state via declarative `.reset()` chain.
+- **All stores use `.reset(this.reset)`** — single `reset` event clears `$time`, `$timepoints`, and `$isActive`.
+
+### Helpers (helpers/ttsHighlight.ts)
+
+- **`textToSSML(text)`** — converts plain text to SSML with `<mark>` tags for word timing.
+- **`findCurrentMark(timepoints, time)`** — iterates backwards through timepoints to find the current mark. Efficient for linear playback.
+
+### Constants (constants.ts)
+
+- **`WORD_MARK_REGEX`** — `/^w_(\d+)$/` — extracts word index from mark names like `w_0`, `w_1`.
+
+### Naming conventions
+
+| Name | Scope | Purpose |
+|------|-------|---------|
+| `wordHighlight` | public instance | `ChatTTSHighlightModel` instance on `ChatTTSModel` |
+| `wordHighlightEnabled` | private field | Whether highlighting is active (set once at config) |
+| `isWordHighlightEnabled` | public getter | Read-only access to `wordHighlightEnabled` for external consumers |
+| `isWordHighlightEnabled` | T2SConfig field | Config flag passed to `setUpT2S()` |
+
+## Data Flow
+
+```
+AudioProvider.onTimeUpdate(callback)
+       ↓
+ChatTTSHighlightModel.activate(timepoints, onTimeUpdate)
+       ↓
+RAF loop → audio.currentTime → findCurrentMark() → only updates when mark changes
+       ↓
+$highlightedWordIndex = parse mark name "w_N" → N (or -1 if inactive/no match)
+       ↓
+Chat.tsx: model.t2s.isWordHighlightEnabled && isPlayingMessage ? highlightedWordIndex : -1
+       ↓
+ChatMessage → MessageContent → TTSHighlightRenderer({ text, highlightedIndex })
+```
+
+## Key Files
+
+| File | Purpose |
+|------|---------|
+| `model/ChatTTSModel.ts` | `ChatTTSModel` — TTS playback, caching, highlight orchestration |
+| `model/ChatTTSHighlightModel.ts` | Highlight state — timepoints, current time, `$isActive`, derived word index |
+| `helpers/ttsHighlight.ts` | `textToSSML` + `findCurrentMark` — SSML conversion and playback position lookup |
+| `constants.ts` | `WORD_MARK_REGEX` and audio config defaults |
+| `types/t2s.types.ts` | `AudioProvider`, `OnTimeUpdate`, `AudioStatus`, `AudioCache`, `TTSHighlightRendererProps` types |
+| `components/Chat/Chat.tsx` | Reads `isWordHighlightEnabled` and `$highlightedWordIndex`, passes to messages |

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

@@ -1,13 +1,17 @@
-import React, { useRef } from 'react'
+import React, { ComponentType, PropsWithChildren, useRef } from 'react'
 import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useStoreMap, useUnit } from 'effector-react'
+import { SPACING } from '@magmamath/react-native-ui'
 
 import { ChatbotModel } from '../../model/ChatBotModel'
 import { ChatMessage } from '../ChatMessage/ChatMessage'
 import { MessageLoader } from '../ChatMessage/MessageLoader'
 import { ChatInput } from '../ChatInput/ChatInput'
+import { CloseButton } from './CloseButton'
 import { MessageVariant } from '../../types/model.types'
 import { ColorScheme } from '../../types/style.types'
+import { ConditionalWrapper } from '../../../../lib/components/ConditionalWrapper'
+import { TTSHighlightRenderer } from '../../types/t2s.types'
 
 const TOOLBAR_HEIGHT = 140
 const BOTTOM_OFFSET = Platform.select({
@@ -19,14 +23,22 @@ type ChatProps = {
   model: ChatbotModel
   isHintFeedback: boolean
   isTextToSpeechEnabled: boolean
+  isInputDisabled?: boolean
   colorScheme?: ColorScheme
+  MessageWrapper?: ComponentType<PropsWithChildren>
+  TTSHighlightRenderer?: TTSHighlightRenderer
+  onPressClose?: () => void
 }
 
 export const Chat = ({
   model,
   isHintFeedback,
   isTextToSpeechEnabled,
+  isInputDisabled,
   colorScheme = ColorScheme.Blue,
+  MessageWrapper,
+  TTSHighlightRenderer,
+  onPressClose,
 }: ChatProps) => {
   const dimensions = useWindowDimensions()
   const ref = useRef<ScrollView>(null)
@@ -35,15 +47,19 @@ export const Chat = ({
   const isHelpRequestPending = useUnit(model.sendHelpRequestFx.pending)
   const isTextToSpeechPending = useUnit(model.api.textToSpeechTextFx.pending)
 
+  const audioStatus = useUnit(model.t2s.$status)
   const currentPlayingId = useUnit(model.t2s.$currentPlayingId)
+  const highlightedWordIndex = useUnit(model.t2s.wordHighlight.$highlightedWordIndex)
+
+  const isScrollActive = useUnit(model.$isScrollActive)
   const isTranslated = useUnit(model.translation.$isTranslated)
-  const audioStatus = useUnit(model.t2s.$status)
   const errorSpottingEnabled = useUnit(model.errorSpotting.$isEnabled)
 
   const messages = useStoreMap(model.$currentChatData, ({ messages }) => messages)
   const lastMessageId = messages.at(-1)?.id
 
   const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
+  const shouldWrapMessage = MessageWrapper && isInputDisabled && messages.length === 1
 
   return (
     <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
@@ -52,7 +68,9 @@ export const Chat = ({
         bounces={false}
         contentContainerStyle={styles.list}
         onContentSizeChange={(_, height) => {
-          ref.current?.scrollToEnd()
+          if (messages.length > 1) {
+            ref.current?.scrollToEnd()
+          }
 
           if (height >= MAX_HEIGHT) {
             model.setScrollActive(true)
@@ -60,38 +78,55 @@ export const Chat = ({
         }}
       >
         {isOpen && (
-          <View style={styles.gap}>
-            {messages.map((message) => (
-              <ChatMessage
-                key={message.id}
-                isTranslated={isTranslated}
-                withIcon={!message.isOwnMessage && message.id === lastMessageId}
-                message={message}
-                variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
-                colorScheme={colorScheme}
-                withErrorSpotting={errorSpottingEnabled && !message.isOwnMessage}
-                t2sState={{
-                  isEnabled: isTextToSpeechEnabled && !message.isOwnMessage,
-                  isActive: message.id === currentPlayingId,
-                  isLoading: isTextToSpeechPending,
-                  status: audioStatus,
-                  disabled: isTextToSpeechPending,
-                }}
-              />
-            ))}
+          <View style={[styles.gap, isInputDisabled && styles.messagesWithoutInput]}>
+            {messages.map((message, index) => {
+              const key = `${message.id}-${index}`
+              const isPlayingMessage = message.id === currentPlayingId
+              const messageHighlightIndex =
+                model.t2s.isWordHighlightEnabled && isPlayingMessage ? highlightedWordIndex : -1
 
-            {isHelpRequestPending && <MessageLoader colorScheme={colorScheme} />}
-          </View>
-        )}
+              return (
+                <React.Fragment key={key}>
+                  <ConditionalWrapper withWrapper={shouldWrapMessage} Wrapper={MessageWrapper}>
+                    <ChatMessage
+                      isTranslated={isTranslated}
+                      withIcon={!message.isOwnMessage && message.id === lastMessageId}
+                      message={message}
+                      variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
+                      colorScheme={colorScheme}
+                      withErrorSpotting={errorSpottingEnabled && !message.isOwnMessage}
+                      highlightedWordIndex={messageHighlightIndex}
+                      TTSHighlightRenderer={TTSHighlightRenderer}
+                      t2sState={{
+                        isEnabled: isTextToSpeechEnabled && !message.isOwnMessage,
+                        isActive: isPlayingMessage,
+                        isLoading: isTextToSpeechPending,
+                        status: audioStatus,
+                        disabled: isTextToSpeechPending,
+                      }}
+                    />
+                  </ConditionalWrapper>
+                </React.Fragment>
+              )
+            })}
 
-        {isOpen && (
-          <ChatInput
-            isHintFeedback={isHintFeedback}
-            colorScheme={colorScheme}
-            hasMessages={messages.length > 1}
-          />
+            {isHelpRequestPending && <MessageLoader />}
+          </View>
         )}
       </ScrollView>
+
+      {isOpen && (
+        <View style={styles.inputRow}>
+          <CloseButton onPress={onPressClose} />
+          {!isInputDisabled && (
+            <ChatInput
+              isHintFeedback={isHintFeedback}
+              colorScheme={colorScheme}
+              hasMessages={messages.length > 1}
+            />
+          )}
+        </View>
+      )}
     </View>
   )
 }
@@ -102,14 +137,22 @@ const styles = StyleSheet.create({
     alignItems: 'flex-end',
     width: 378,
     height: '100%',
+    paddingRight: SPACING['200'],
   },
   list: {
     alignItems: 'flex-end',
     paddingVertical: 2,
-    paddingRight: 6,
+  },
+  messagesWithoutInput: {
+    marginBottom: SPACING['200'],
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING['200'],
   },
   gap: {
     flex: 1,
-    gap: 8,
+    gap: SPACING['200'],
   },
 })

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

@@ -0,0 +1,60 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonStates,
+  ButtonVariant,
+  COLORS,
+} from '@magmamath/react-native-ui'
+import { CloseIcon } from '../../../../shared/icons/CloseIcon'
+
+const COLOR_SCHEME = {
+  [ButtonStates.DEFAULT]: {
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderColor: COLORS.NEUTRAL_5,
+    raiseColor: COLORS.NEUTRAL_5,
+    color: COLORS.NEUTRAL_10,
+  },
+  [ButtonStates.PRESSED]: {
+    backgroundColor: COLORS.NEUTRAL_4,
+    borderColor: COLORS.NEUTRAL_5,
+    raiseColor: COLORS.NEUTRAL_5,
+    color: COLORS.NEUTRAL_1,
+  },
+  [ButtonStates.HOVER]: {
+    backgroundColor: COLORS.NEUTRAL_3,
+    borderColor: COLORS.NEUTRAL_5,
+    raiseColor: COLORS.NEUTRAL_5,
+    color: COLORS.NEUTRAL_10,
+  },
+}
+
+type CloseButtonProps = {
+  onPress?: () => void
+}
+
+export const CloseButton = ({ onPress }: CloseButtonProps) => (
+  <Button
+    onPress={onPress}
+    style={{ button: styles.button }}
+    variant={ButtonVariant.PRIMARY}
+    size={ButtonSize.MEDIUM}
+    colorScheme={ButtonColor.WHITE}
+    raiseLevel={5}
+    // customColorScheme={COLOR_SCHEME}
+  >
+    <CloseIcon width={18} height={18} />
+  </Button>
+)
+
+const styles = StyleSheet.create({
+  button: {
+    width: 38,
+    height: 38,
+    borderRadius: 36,
+    paddingHorizontal: 0,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+})