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

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,115 +1,359 @@
-import React, { useRef } from 'react'
-import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
+import React, {
+  ComponentType,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  FlatList,
+  ListRenderItemInfo,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Platform,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native'
 import { useStoreMap, useUnit } from 'effector-react'
+import { SPACING } from '@magmamath/react-native-ui'
 
+import { ConversationMessage } from '../../types/units.types'
 import { ChatbotModel } from '../../model/ChatBotModel'
+import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
+import { LavaIconInGlasses } from '../../../../shared/icons/LavaIconInGlasses'
+import { AnimatedMessage } from '../ChatMessage/AnimatedMessage'
 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 SCROLL_BOTTOM_THRESHOLD = 1
 const TOOLBAR_HEIGHT = 140
-const BOTTOM_OFFSET = Platform.select({
-  web: 265,
-  default: 294,
+const BOTTOM_OFFSET = Platform.select({ web: 265, default: 294 })
+
+const TOP_FADE_MASK = Platform.select({
+  web: { maskImage: 'linear-gradient(to top, transparent, black 10%, black)' } as any,
+  default: undefined,
 })
 
+const Separator = () => <View style={styles.separator} />
+
+const BottomFade = ({ visible }: { visible: boolean }) => (
+  <View
+    style={[styles.bottomFade, { opacity: visible ? 1 : 0 }]}
+    pointerEvents="none"
+  />
+)
+
+type ChatIconProps = {
+  isLoading: boolean
+}
+
+const ChatIcon = ({ isLoading }: ChatIconProps) => (
+  <View style={styles.iconAbsolute}>
+    {isLoading ? (
+      <LavaIconInGlasses width={53} height={73} />
+    ) : (
+      <ChatbotIcon width={53} height={73} color={'blue'} />
+    )}
+  </View>
+)
+
+type ChatFooterProps = {
+  isHintFeedback: boolean
+  isInputDisabled?: boolean
+  colorScheme: ColorScheme
+  hasMessages: boolean
+  onPressClose?: () => void
+}
+
+const ChatFooter = ({
+  isHintFeedback,
+  isInputDisabled,
+  colorScheme,
+  hasMessages,
+  onPressClose,
+}: ChatFooterProps) => (
+  <View style={styles.inputRow}>
+    <CloseButton onPress={onPressClose} />
+    {!isInputDisabled && (
+      <ChatInput
+        isHintFeedback={isHintFeedback}
+        colorScheme={colorScheme}
+        hasMessages={hasMessages}
+      />
+    )}
+  </View>
+)
+
 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 ref = useRef<FlatList>(null)
+  const maxHeightRef = useRef(0)
   const dimensions = useWindowDimensions()
-  const ref = useRef<ScrollView>(null)
   const isOpen = useUnit(model.$isOpen)
 
   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 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 lastBotMessageId = messages.findLast((m) => !m.isOwnMessage)?.id
   const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
+  maxHeightRef.current = MAX_HEIGHT
+
+  const [isScrollable, setIsScrollable] = useState(false)
+  const [showBottomFade, setShowBottomFade] = useState(false)
+
+  useEffect(() => {
+    if (!isOpen) {
+      setIsScrollable(false)
+      setShowBottomFade(false)
+    }
+  }, [isOpen])
+
+  const handleScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { contentOffset } = e.nativeEvent
+    setShowBottomFade(contentOffset.y > SCROLL_BOTTOM_THRESHOLD)
+  }, [])
+
+  const handleContentSizeChange = useCallback((_: number, contentHeight: number) => {
+    setIsScrollable(contentHeight >= maxHeightRef.current)
+  }, [])
+
+  const shouldWrapMessage = MessageWrapper && isInputDisabled && messages.length === 1
+  const reversedMessages = useMemo(() => [...messages].reverse(), [messages])
+  const showAbsoluteIcon = !showBottomFade && !isInputDisabled
+
+  const renderMessage = useCallback(
+    ({ item: message }: ListRenderItemInfo<ConversationMessage>) => {
+      const isPlayingMessage = message.id === currentPlayingId
+      const messageHighlightIndex =
+        model.t2s.isWordHighlightEnabled && isPlayingMessage ? highlightedWordIndex : -1
+      const showInlineIcon =
+        showBottomFade && !message.isOwnMessage && message.id === lastBotMessageId
+
+      return (
+        <MessageItem
+          message={message}
+          showInlineIcon={showInlineIcon}
+          animate={!isInputDisabled}
+          shouldWrapMessage={!!shouldWrapMessage}
+          MessageWrapper={MessageWrapper}
+          isTranslated={isTranslated}
+          colorScheme={colorScheme}
+          withIcon={isInputDisabled}
+          withErrorSpotting={errorSpottingEnabled && !message.isOwnMessage}
+          highlightedWordIndex={messageHighlightIndex}
+          TTSHighlightRenderer={TTSHighlightRenderer}
+          isTextToSpeechEnabled={isTextToSpeechEnabled && !message.isOwnMessage}
+          isPlayingMessage={isPlayingMessage}
+          isTextToSpeechPending={isTextToSpeechPending}
+          audioStatus={audioStatus}
+        />
+      )
+    },
+    [
+      currentPlayingId,
+      highlightedWordIndex,
+      showBottomFade,
+      lastBotMessageId,
+      shouldWrapMessage,
+      isTranslated,
+      colorScheme,
+      errorSpottingEnabled,
+      isTextToSpeechEnabled,
+      isTextToSpeechPending,
+      audioStatus,
+    ],
+  )
+
+  if (!isOpen) return null
 
   return (
     <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
-      <ScrollView
+      <FlatList
         ref={ref}
+        inverted
         bounces={false}
+        style={[styles.flatList, isScrollable && TOP_FADE_MASK]}
+        data={reversedMessages}
+        keyExtractor={keyExtractor}
+        renderItem={renderMessage}
         contentContainerStyle={styles.list}
-        onContentSizeChange={(_, height) => {
-          ref.current?.scrollToEnd()
-
-          if (height >= MAX_HEIGHT) {
-            model.setScrollActive(true)
-          }
-        }}
-      >
-        {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,
-                }}
-              />
-            ))}
-
-            {isHelpRequestPending && <MessageLoader colorScheme={colorScheme} />}
-          </View>
-        )}
-
-        {isOpen && (
-          <ChatInput
-            isHintFeedback={isHintFeedback}
-            colorScheme={colorScheme}
-            hasMessages={messages.length > 1}
-          />
-        )}
-      </ScrollView>
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        onContentSizeChange={handleContentSizeChange}
+        ListHeaderComponent={<MessageLoader isLoading={isHelpRequestPending} />}
+        ItemSeparatorComponent={Separator}
+      />
+
+      <BottomFade visible={showBottomFade} />
+
+      {showAbsoluteIcon && <ChatIcon isLoading={isHelpRequestPending} />}
+
+      <ChatFooter
+        isHintFeedback={isHintFeedback}
+        isInputDisabled={isInputDisabled}
+        colorScheme={colorScheme}
+        hasMessages={messages.length > 1}
+        onPressClose={onPressClose}
+      />
     </View>
   )
 }
 
+const keyExtractor = (item: ConversationMessage, index: number) => `${item.id}-${index}`
+
+type MessageItemProps = {
+  message: ConversationMessage
+  showInlineIcon: boolean
+  animate?: boolean
+  shouldWrapMessage?: boolean
+  MessageWrapper?: ComponentType<PropsWithChildren>
+  isTranslated?: boolean
+  colorScheme: ColorScheme
+  withIcon?: boolean
+  withErrorSpotting?: boolean
+  highlightedWordIndex: number
+  TTSHighlightRenderer?: TTSHighlightRenderer
+  isTextToSpeechEnabled: boolean
+  isPlayingMessage: boolean
+  isTextToSpeechPending: boolean
+  audioStatus: any
+}
+
+const MessageItem = ({
+  message,
+  showInlineIcon,
+  animate,
+  shouldWrapMessage,
+  MessageWrapper,
+  isTranslated,
+  colorScheme,
+  withIcon,
+  withErrorSpotting,
+  highlightedWordIndex,
+  TTSHighlightRenderer,
+  isTextToSpeechEnabled,
+  isPlayingMessage,
+  isTextToSpeechPending,
+  audioStatus,
+}: MessageItemProps) => (
+  <View style={[styles.messageItem, showInlineIcon && styles.messageWithIcon]}>
+    {showInlineIcon && (
+      <View style={styles.inlineIcon}>
+        <ChatbotIcon width={53} height={73} />
+      </View>
+    )}
+    <AnimatedMessage animate={animate}>
+      <ConditionalWrapper withWrapper={shouldWrapMessage} Wrapper={MessageWrapper}>
+        <ChatMessage
+          withIcon={withIcon}
+          isTranslated={isTranslated}
+          message={message}
+          variant={message.isOwnMessage ? MessageVariant.SENT : MessageVariant.RECEIVED}
+          colorScheme={colorScheme}
+          withErrorSpotting={withErrorSpotting}
+          highlightedWordIndex={highlightedWordIndex}
+          TTSHighlightRenderer={TTSHighlightRenderer}
+          t2sState={{
+            isEnabled: isTextToSpeechEnabled,
+            isActive: isPlayingMessage,
+            isLoading: isTextToSpeechPending,
+            status: audioStatus,
+            disabled: isTextToSpeechPending,
+          }}
+        />
+      </ConditionalWrapper>
+    </AnimatedMessage>
+  </View>
+)
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'flex-end',
-    width: 378,
+    width: 374,
     height: '100%',
+    paddingRight: SPACING['100'],
+  },
+  flatList: {
+    alignSelf: 'stretch',
+    paddingTop: SPACING['300'],
   },
   list: {
-    alignItems: 'flex-end',
     paddingVertical: 2,
-    paddingRight: 6,
   },
-  gap: {
-    flex: 1,
-    gap: 8,
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING['200'],
+    minHeight: 52,
+  },
+  bottomFade: {
+    position: 'absolute',
+    bottom: 52,
+    right: 0,
+    width: 370,
+    height: 40,
+    transition: 'opacity 0.2s ease-in-out',
+    ...Platform.select({
+      web: {
+        backgroundImage:
+          'linear-gradient(to top, rgba(255,255,255,1) 10%, rgba(255,255,255,0.8) 40%, transparent 100%)',
+      },
+      default: {},
+    }),
+  } as any,
+  iconAbsolute: {
+    position: 'absolute',
+    bottom: 65,
+    left: 4,
+  },
+  messageItem: {
+    alignSelf: 'flex-end',
+  },
+  messageWithIcon: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+  inlineIcon: {
+    marginRight: 8,
+  },
+  separator: {
+    height: SPACING['200'],
   },
 })

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

@@ -0,0 +1,31 @@
+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'
+
+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}
+  >
+    <CloseIcon width={18} height={18} />
+  </Button>
+)
+
+const styles = StyleSheet.create({
+  button: {
+    width: 38,
+    height: 38,
+    borderRadius: 36,
+    paddingHorizontal: 0,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+})