@magmamath/students-features 0.9.113 → 0.9.114-rc.0

package/src/shared/icons/PentagonIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Svg, { G, Path, Defs } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+export const PentagonIcon = ({ size = 32, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 31" fill="none">
+      <G filter="url(#filter0_dd_2255_6755)">
+        <Path
+          d="M14.025 2.573a3 3 0 013.527 0l9.788 7.111a3 3 0 011.09 3.355l-3.74 11.506a3 3 0 01-2.852 2.073H9.739a3 3 0 01-2.853-2.073L3.147 13.038a3 3 0 011.09-3.354l9.788-7.111z"
+          fill={color}
+        />
+      </G>
+      <Defs></Defs>
+    </Svg>
+  )
+}

package/src/shared/icons/SketchArrowRight.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+export const SketchArrowRight = ({ size = 46, color = '#4D4D63' }: IconProps) => {
+  const sizeRatio = 1.65
+  return (
+    <Svg width={size} height={size * sizeRatio} viewBox="0 0 46 28" fill="none">
+      <Path
+        d="M2 14.714c17.875-3.906 41.975-1.466 41.975-1.466m0 0s-7.319-9-11.4-11.248m11.4 11.248s-8.773 6.653-10.562 12.737"
+        stroke={color}
+        strokeWidth={4}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/SliceDiamondIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { G, Path } from 'react-native-svg'
+
+export const SliceDiamondIcon = ({ color, size = 28 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 28 27" fill="none">
+      <G filter="url(#filter0_dd_1929_4175)">
+        <Path
+          d="M12.004 22.19a2.25 2.25 0 003.652 0l9.269-12.877a2.578 2.578 0 00-.27-3.329C18.677.005 8.983.005 3.005 5.984a2.578 2.578 0 00-.27 3.33l9.269 12.876z"
+          fill={color}
+        />
+      </G>
+    </Svg>
+  )
+}

package/src/shared/icons/StarIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+import { COLORS } from '@magmamath/react-native-ui'
+
+export const StarIcon = ({ width = 25, color = COLORS.NEUTRAL_1 }: IconProps) => {
+  return (
+    <Svg width={width} height={width} viewBox="0 0 25 25" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.76.971c-.776-1.295-2.653-1.295-3.43 0L7.082 6.387l-5.565 1.39c-1.508.378-2.028 2.256-.929 3.355l4.128 4.128-1.368 6.502c-.35 1.659 1.394 2.973 2.892 2.18l5.795-3.068 3.865 2.147 2.007 1.004c1.497.748 3.196-.563 2.851-2.201l-1.381-6.564 4.128-4.128c1.099-1.099.579-2.977-.93-3.354L17.01 6.387 13.76.97zM8.796 7.416L12.046 2l3.249 5.416a2 2 0 001.23.91l5.565 1.392-4.129 4.128a2 2 0 00-.542 1.826l1.381 6.564-1.968-.984-3.827-2.126a2 2 0 00-1.907-.02l-5.794 3.068 1.368-6.502a2 2 0 00-.542-1.826L2 9.718l5.565-1.391a2 2 0 001.23-.911z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/TimerIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+import { COLORS } from '@magmamath/react-native-ui'
+
+export const TimerIcon = ({ size = 25, color = COLORS.NEUTRAL_1 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 21 23" fill="none">
+      <Path
+        d="M10.781 8.984a1.078 1.078 0 10-2.156 0v3.235H6.828a1.078 1.078 0 100 2.156h2.875c.596 0 1.078-.483 1.078-1.078V8.984z"
+        fill={color}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.547 0a1.078 1.078 0 100 2.156h1.078v1.497C3.773 4.189 0 8.303 0 13.297 0 18.656 4.344 23 9.703 23c5.359 0 9.703-4.344 9.703-9.703 0-2.28-.787-4.377-2.103-6.033l1.034-1.058.666.666a1.078 1.078 0 101.525-1.525l-2.875-2.875a1.078 1.078 0 10-1.525 1.525l.684.684-1.029 1.054a9.663 9.663 0 00-5.002-2.082V2.156h1.078a1.078 1.078 0 000-2.156H7.547zm-5.39 13.297a7.547 7.547 0 1115.093 0 7.547 7.547 0 01-15.094 0z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/dist/commonjs/features/chatbot/TTS_HIGHLIGHTING.md

@@ -1,120 +0,0 @@
-# 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/dist/module/features/chatbot/TTS_HIGHLIGHTING.md

@@ -1,120 +0,0 @@
-# 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/TTS_HIGHLIGHTING.md

@@ -1,120 +0,0 @@
-# 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 |