@kesha-antonov/react-native-chat 4.2.0 → 4.4.0

package/README.md

@@ -1,6 +1,8 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/@kesha-antonov/react-native-chat"><img alt="npm version" src="https://badge.fury.io/js/@kesha-antonov%2Freact-native-chat.svg"/></a>
   <a href="https://www.npmjs.com/package/@kesha-antonov/react-native-chat"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@kesha-antonov%2Freact-native-chat.svg"/></a>
+  <a href="https://npm-stat.com/charts.html?package=%40kesha-antonov%2Freact-native-chat&from=2015-01-01"><img alt="total npm downloads" src="https://img.shields.io/badge/total%20downloads-466-blue.svg"/></a>
+  <a href="https://www.npmjs.com/package/@kesha-antonov/react-native-chat"><img alt="npm downloads (last 18 months)" src="https://img.shields.io/npm/dt/@kesha-antonov%2Freact-native-chat.svg?label=18-months%20downloads"/></a>
   <a href="https://github.com/kesha-antonov/react-native-chat/actions/workflows/main.yml"><img src="https://github.com/kesha-antonov/react-native-chat/actions/workflows/main.yml/badge.svg" alt="build"></a>
   <img src="https://img.shields.io/badge/platforms-iOS%20%7C%20Android%20%7C%20Web-lightgrey.svg" alt="platforms">
   <img src="https://img.shields.io/badge/TypeScript-supported-blue.svg" alt="TypeScript">
@@ -13,19 +15,34 @@
   The most complete chat UI for React Native & Web
 </p>
 
+<p align="center">
+  <img width="300" src="https://raw.githubusercontent.com/kesha-antonov/react-native-chat/main/media/streaming-demo.gif" alt="Streaming AI reply rendering markdown token by token" />
+</p>
+
 <p align="center">
   <a href="https://snack.expo.dev/@kesha-antonov/react-native-chat-playground" target="_blank">
     <img src="https://img.shields.io/badge/▶️_Try_in_Browser-4630EB?style=for-the-badge&logo=expo&logoColor=white" alt="Try Chat on Expo Snack"/>
   </a>
 </p>
 
-> 🚧 **v4.3.0 is in active development (WIP)** on the [`4.3.0`](https://github.com/kesha-antonov/react-native-chat/tree/4.3.0) branch - a Telegram-inspired redesign with a theme system + dark mode, localization (i18n), an icon override registry, Telegram-style voice notes, round video notes, location/media messages, markdown replies, and a long-press context menu. See that branch for the latest work.
+<p align="center">
+  <strong>Coming from <code>react-native-gifted-chat</code>?</strong> This is a drop-in replacement -
+  same <code>IMessage</code>, same props, a few renamed exports.
+  <br/>
+  <a href="docs/MIGRATION.md">Migrate in one command with the codemod →</a>
+</p>
 
 ---
 
 ## ✨ Features
 
+> Actively maintained, New Architecture ready, and built for the latest Reanimated/Gesture Handler. A modern, themeable, drop-in successor to `react-native-gifted-chat`. **[See what is new ▸](#-whats-new-vs-react-native-gifted-chat)**
+
+- 🌗 **[Modern UI, Dark Mode & Theming](#-whats-new-vs-react-native-gifted-chat)** - A clean, modern default look with a full light/dark theme system, runtime theme switching, and every token overridable
 - 🤖 **[Streaming (AI) Messages](#streaming-ai-messages)** - Token-by-token streamed replies with a typing cursor and stop control
+- 🎥 **[Video & Audio Messages](#-whats-new-vs-react-native-gifted-chat)** - Real inline playback (optional `expo-video` / `expo-audio`) with a graceful tappable fallback - no more "implement it yourself"
+- 🎙️ **[Voice & Video Recording](#-whats-new-vs-react-native-gifted-chat)** - Telegram-style hold-to-record voice notes and camera video messages (optional, opt-in)
+- 📍 **[Location Messages](#-whats-new-vs-react-native-gifted-chat)** - Map card that opens the system maps app on tap
 - 🎨 **[Fully Customizable](#-props-reference)** - Override any component with your own implementation
 - 📎 **[Composer Actions](#actions--action-sheet)** - Attach photos, files, or trigger custom actions
 - ↩️ **[Reply to Messages](#reply-to-messages)** - Swipe-to-reply with reply preview and message threading
@@ -55,6 +72,75 @@
 
 ---
 
+## 🆕 What's new vs react-native-gifted-chat
+
+This library is kept in sync with upstream [`react-native-gifted-chat`](https://github.com/FaridSafi/react-native-gifted-chat)'s latest `master`, so you **keep everything it already has** - New Architecture support, the animated sticky day header, Reanimated 3/4, Gesture Handler, TypeScript - and the same `IMessage` model and prop names. **Moving over is a package swap plus a rename** (see [Migrating](#-migrating-from-react-native-gifted-chat)).
+
+On top of that, this fork adds the features people kept asking upstream for, plus a modern look out of the box:
+
+| Added in this fork | react-native-gifted-chat | @kesha-antonov/react-native-chat |
+| --- | :---: | :---: |
+| Active maintenance | 💤 sporadic | ✅ active |
+| Modern default UI (Telegram-inspired) | dated 2020 look | ✅ modern, fully overridable |
+| Light/Dark **theme system** | per-component color props | ✅ `theme` / `darkTheme` tokens, runtime switch |
+| Streaming (AI) messages | ❌ | ✅ token-by-token + typing cursor |
+| Emoji reactions | ❌ | ✅ long-press picker + reaction pills |
+| Swipe-to-reply + reply preview | ❌ | ✅ built in |
+| **Video / audio messages** | "not implemented, render your own" | ✅ inline players + tappable fallback |
+| **Voice notes** (hold-to-record + waveform) | ❌ | ✅ optional, Telegram-style |
+| **Video messages** (round camera notes) | ❌ | ✅ optional, Telegram-style |
+| **Location messages** | ❌ ignored | ✅ map card → opens system maps |
+| Bubble tails + tighter message grouping | flat bubbles | ✅ |
+
+Everything new is **non-breaking and opt-in**: keep passing the same props you do today and you simply get the modern look and the extra features for free. The media/recording features only activate when you install their optional peer deps and enable them - nobody is forced to add a single dependency.
+
+### Theming in one line
+
+```jsx
+// Modern defaults out of the box, or override any token (light + dark):
+<Chat
+  theme={{ colors: { accent: '#3390EC', outgoingBubble: '#EFFEDE' } }}
+  darkTheme={{ colors: { background: '#0E1621' } }}
+  {...props}
+/>
+```
+
+### Voice, video and location
+
+```jsx
+<Chat
+  audioRecording={{ isEnabled: true }}   // hold the mic to record a voice note (needs expo-audio)
+  videoRecording={{ isEnabled: true }}   // record a video message (needs expo-image-picker)
+  // location messages render automatically for any IMessage with a `location`
+  {...props}
+/>
+```
+
+```bash
+# Optional inline media playback + recording:
+npx expo install expo-video expo-audio expo-image-picker
+```
+
+### Custom icons (e.g. Lucide)
+
+Built-in icons are the official [Lucide](https://lucide.dev) glyphs, rendered via the optional `react-native-svg` peer when it is installed, or drawn with `View`s (no dependency) otherwise. Override any of them via the `icons` prop - for example with [`lucide-react-native`](https://lucide.dev/) - and the built-in icon is used for anything you don't override:
+
+```tsx
+import { Send, Mic } from 'lucide-react-native'
+
+<Chat
+  icons={{
+    send: ({ color, size }) => <Send color={color} size={size} />,
+    mic:  ({ color, size }) => <Mic color={color} size={size} />,
+  }}
+  {...props}
+/>
+```
+
+Overridable names: `send`, `mic`, `camera`, `play`, `pause`, `check`, `checkAll`, `clock`, `pin`, `plus`, `close`, `chevronLeft`, `chevronDown`, `emoji`, `paperclip`, `reply`, `pencil`, `lock`, `trash`.
+
+---
+
 <h3 align="center">Support This Project</h3>
 
 <p align="center">
@@ -70,6 +156,7 @@
 ## 📖 Table of Contents
 
 - [Features](#-features)
+- [What's new vs react-native-gifted-chat](#-whats-new-vs-react-native-gifted-chat)
 - [Requirements](#-requirements)
 - [Installation](#-installation)
 - [Migrating from react-native-gifted-chat](#-migrating-from-react-native-gifted-chat)
@@ -77,6 +164,7 @@
 - [Props Reference](#-props-reference)
 - [Data Structure](#-data-structure)
 - [Platform Notes](#-platform-notes)
+- [Performance](#-performance)
 - [Example App](#-example-app)
 - [Troubleshooting](#-troubleshooting)
 - [Contributing](#-contributing)
@@ -265,6 +353,10 @@ interface User {
 - **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to a simple random string generator.
 - **`locale`** _(String)_ - Locale to localize the dates. You need first to import the locale you need (ie. `require('dayjs/locale/de')` or `import 'dayjs/locale/fr'`)
 - **`colorScheme`** _('light' | 'dark')_ - Force color scheme (light/dark mode). When set to `'light'` or `'dark'`, it overrides the system color scheme. When `undefined`, it uses the system color scheme. Default is `undefined`.
+- **`theme`** _(Object)_ - Override the default light theme tokens (`colors` / `radii` / `spacing` / `typography` / `avatar` / `sendButton` / `composer` / `voice`). Deep-merged over `defaultLightTheme`; any subset is allowed. See [Theming & Dark Mode](#theming--dark-mode).
+- **`darkTheme`** _(Object)_ - Same as `theme`, applied when the resolved color scheme is dark (deep-merged over `defaultDarkTheme`).
+- **`icons`** _(Object)_ - Icon override registry. Supply a render function for any built-in icon to replace it (e.g. with `lucide-react-native`). See [Custom icons](#custom-icons-eg-lucide).
+- **`labels`** _(Object)_ - Override any UI string. See [Localization (i18n)](#localization-i18n).
 
 ### Refs
 
@@ -277,6 +369,7 @@ interface User {
 
   Only used when Chat mounts the provider itself. If your app already mounts a `KeyboardProvider` (the setup `react-native-keyboard-controller` recommends - once, at the root), Chat detects it and reuses it instead of nesting a second one, and this prop is ignored. Configure the provider where you mount it.
 - **`disableKeyboardProvider`** _(Bool)_ - Skip the built-in `KeyboardProvider` entirely; default is `false`. You do **not** need this just because your app mounts its own provider - that case is detected and reused. Reach for it only to opt out completely, e.g. when the provider's edge-to-edge behavior causes layout shift or a header jump on Android/Expo.
+- **`disableGestureHandlerRootView`** _(Bool)_ - Skip the `GestureHandlerRootView` Chat mounts around itself; default is `false`. Unlike `KeyboardProvider`, an existing one can't be auto-detected - `react-native-gesture-handler` doesn't expose that publicly - so set this yourself if your app (or a library it uses, e.g. a bottom sheet) already mounts one at the root. Nesting a second one changes the native view hierarchy around the composer, which has been observed to make a rare Fabric/Yoga layout assertion on iOS more likely, especially when Chat is mounted and unmounted while the keyboard is open ([#17](https://github.com/kesha-antonov/react-native-chat/issues/17)).
 - **`keyboardAvoidingViewProps`** _(Object)_ - Props to be passed to the [`KeyboardAvoidingView`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view). See **keyboardVerticalOffset** below for proper keyboard handling.
 - **`isAlignedTop`** _(`boolean | 'auto'`)_ - Where the bubbles sit **while the whole conversation fits on screen**; once it is taller than the list this has no effect. `false` (default) keeps the usual bottom-anchored chat, `true` pins the messages to the top, and `'auto'` pins them to the top while the keyboard is closed and re-anchors them to the bottom while it is open - so a short conversation starts under the header and moves above the keyboard when the composer is focused ([#2736](https://github.com/FaridSafi/react-native-gifted-chat/issues/2736)). Works with either `isInverted` setting; ignored when `isFlashListEnabled` is set, since FlashList positions its own items.
 - **`isInverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`
@@ -303,21 +396,25 @@ If you do, sanity-check it on device: a toolbar behind the keyboard means the va
 - **`initialText`** _(String)_ - Initial text to display in the input field
 - **`isSendButtonAlwaysVisible`** _(Bool)_ - Always show send button in input text composer; default `false`, show only when text input is not empty
 - **`isTextOptional`** _(Bool)_ - Allow sending messages without text (useful for media-only messages); default `false`. Use with `isSendButtonAlwaysVisible` for media attachments.
+- **`isMultiline`** _(Bool)_ - Whether the composer accepts multiple lines; default `true`. With `true` the return key inserts a newline and you send with the send button. Set `false` for a single-line composer whose **return key sends the message** (the keyboard's return key becomes "send" and stays open afterwards).
 - **`renderInputToolbar`** _(Component | Function)_ - Custom message composer container
 - **`renderComposer`** _(Component | Function)_ - Custom text input message composer
 - **`renderSend`** _(Component | Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/kesha-antonov/react-native-chat/pull/487))
 - **`renderActions`** _(Component | Function)_ - Custom action button on the left of the message composer
 - **`renderAccessory`** _(Component | Function)_ - Custom second line of actions below the message composer
+- **`onPressEmoji`** _(Function)_ - Callback for the optional emoji button on the left of the composer field. When omitted, the emoji button is hidden.
+- **`audioRecording`** _(Object)_ - Enable Telegram-style hold-to-record voice notes. `{ isEnabled, minDurationMs?, onError? }`. Requires the optional `expo-audio` peer (and `react-native-audio-api` for the playback waveform); the mic button is hidden when it is absent.
+- **`videoRecording`** _(Object)_ - Enable record-and-send video messages. `{ isEnabled, maxDuration?, onError? }`. Uses `react-native-vision-camera` for round camera notes, falling back to `expo-image-picker`'s system camera.
 - **`textInputProps`** _(Object)_ - props to be passed to the [`<TextInput>`](https://reactnative.dev/docs/textinput).
 
 > **Composer height** - there are no height props. The composer starts one line tall and grows with its content. Constrain it through `textInputProps.style` (e.g. `{ maxHeight: 120 }`), which is applied after the measured height and wins.
 
 ### Actions & Action Sheet
 
-- **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
-- **`actionSheet`** _(Function)_ - Custom action sheet interface for showing action options
-- **`actions`** _(Array)_ - Custom action options for the input toolbar action button; array of objects with `title` (string) and `action` (function) properties
-- **`actionSheetOptionTintColor`** _(String)_ - Tint color for action sheet options
+- **`actions`** _(Array)_ - Action options for the composer "+" button. Array of `{ title, action }`; add `icon` (and optional `color`) to an action to render a Telegram-style attachment **grid** (tiles) instead of a list. Opens the built-in themed `AttachmentSheet` - no extra dependency.
+- **`onPressActionButton`** _(Function)_ - Callback when the "+" button is pressed (if set, the built-in `AttachmentSheet` is not shown)
+- **`actionSheet`** _(Function)_ - Escape hatch for a custom system action sheet. **The bundled `@expo/react-native-action-sheet` dependency was removed**, so `context.actionSheet()` defaults to a no-op; pass your own implementation (with `ActionSheetProvider` in your tree) if you relied on it.
+- **`actionSheetOptionTintColor`** _(String)_ - Tint color for action labels in the attachment sheet
 
 ### Messages & Message Container
 
@@ -336,11 +433,13 @@ If you do, sanity-check it on device: a toolbar behind the keyboard means the va
 - **`renderMessageImage`** _(Component | Function)_ - Custom message image
 - **`renderMessageVideo`** _(Component | Function)_ - Custom message video
 - **`renderMessageAudio`** _(Component | Function)_ - Custom message audio
+- **`renderMessageLocation`** _(Component | Function)_ - Custom renderer for `IMessage.location`; defaults to a map card that opens the system maps app on tap
+- **`messageActions`** _(Array | Function(`message`))_ - Telegram-style long-press context menu. Each item is `{ label, icon?, onPress, destructive? }`. See [Message actions](#message-actions-long-press-context-menu).
 - **`renderCustomView`** _(Component | Function)_ - Custom view inside the bubble
 - **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`
 - **`onPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed
 - **`onLongPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed; you can use this to show action sheets (e.g., copy, delete, reply)
-- **`isMessageGestureEnabled`** _(Bool | Function(`message`))_ - Whether the bubble itself is part of the row's tap / long-press surface that `reactions` relies on; default is `true`. Pass `false`, or a predicate, for messages that render natively interactive content - the row beside the bubble stays pressable either way. See [Interactive content inside bubbles](#interactive-content-inside-bubbles-video-players-maps).
+- **`isMessageGestureEnabled`** _(Bool | Function(`message`))_ - Whether the bubble itself is part of the row's tap / long-press surface that `reactions` and `messageActions` rely on; default is `true`. Pass `false`, or a predicate, for messages that render natively interactive content - the row beside the bubble stays pressable either way. See [Interactive content inside bubbles](#interactive-content-inside-bubbles-video-players-maps).
 - **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image) component created by the default `renderMessageImage`
 - **`imageStyle`** _(Object)_ - Custom style for message images
 - **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
@@ -654,6 +753,12 @@ const [isScrolledUp, setIsScrolledUp] = useState(false)
 
 Render AI assistant replies token-by-token. The library batches incoming chunks with `requestAnimationFrame` (one render per frame, only the streaming bubble re-renders) and shows a blinking caret while a message is still streaming.
 
+<p align="center">
+  <img width="250" src="https://raw.githubusercontent.com/kesha-antonov/react-native-chat/main/media/ai-streaming-markdown.png" alt="AI reply streaming token-by-token and rendering as markdown, with a blinking caret and a Stop button in the composer" />
+</p>
+
+> The reply above streams in token-by-token (note the caret `▋`) and renders as **markdown** - bold, italics, lists, inline and fenced code - while the composer's send button turns into a **Stop** control mid-stream. See [Markdown rendering for AI replies](#markdown-rendering-for-ai-replies) to enable markdown.
+
 - **`IMessage.streaming`** - flag a message as streaming (shows the caret)
 - **`useStreamingMessages(...)`** - owns the message list, rAF-batches `push()`, and supports stop via `AbortController`. It returns `{ messages, setMessages, append, startStream, isStreaming, stop }`; `setMessages` is there for anything the hook does not cover, so you can patch a message with a plain `map`.
 
@@ -681,6 +786,33 @@ function Bot () {
 
 See **[docs/STREAMING.md](./docs/STREAMING.md)** for the full hook API and a real Claude streaming adapter (via a backend proxy). A runnable demo lives in `example/components/chat-examples/AIBotExample.tsx`.
 
+#### Markdown rendering for AI replies
+
+AI/LLM replies are usually markdown (bold, lists, fenced code). Enable markdown with `messageTextProps={{ markdown: true }}` (streamed messages auto-render as markdown unless you pass `markdown={false}`):
+
+```tsx
+// Force markdown for every message:
+<Chat messageTextProps={{ markdown: true }} {...props} />
+
+// Streamed messages auto-render as markdown; disable with markdown: false.
+```
+
+There are two renderers and you get the best available one automatically:
+
+- **Built-in, zero-dependency renderer** (default). Covers headings, bullet/ordered lists, blockquotes, fenced + inline code, bold/italic/strikethrough, and links. It handles streaming-incomplete markdown gracefully (a half-written `**bold` or an unclosed code fence renders as plain text until complete), so it's safe to feed token-by-token. Nothing to install. Exposed as `BasicMarkdown` if you want to use it directly.
+
+- **[`react-native-streamdown`](https://github.com/software-mansion-labs/react-native-streamdown)** (optional upgrade). When installed it's used instead, for richer streaming-safe markdown (tables, partial-table handling, etc.). It is a native module with its own peers - install the full set:
+
+  ```bash
+  npx expo install react-native-streamdown react-native-enriched-markdown remend katex
+  ```
+
+  It also requires `react-native-worklets >= 0.8.3` (i.e. `react-native-reanimated >= 4.3`), and `react-native-enriched-markdown` is a native module, so a dev build / prebuild is required (it does not work in Expo Go). Pass through Streamdown's own theming/rules via `markdownProps`:
+
+  ```tsx
+  <Chat messageTextProps={{ markdown: true, markdownProps: { /* ... */ } }} {...props} />
+  ```
+
 ### Emoji Reactions
 
 Long-press a message to open a quick emoji picker; selected reactions render as pills below the bubble and toggle on tap. The core ships a lightweight quick picker (built on `react-native-gesture-handler` and `react-native-reanimated`, no extra dependencies). A full emoji browser is optional and demonstrated in the example app via the `renderReactionPicker` override.
@@ -777,9 +909,25 @@ Message text is automatically scanned for URLs, emails, and phone numbers; hasht
 
 For full control, pass custom `matchers` (`{ type, pattern, getLinkUrl?, getLinkText?, renderLink?, onPress? }[]`) to add or override patterns. See the Links example in the [example app](#-example-app).
 
+### Message actions (long-press context menu)
+
+Long-press a message to open a floating, themed **context menu** (Telegram style) anchored to the bubble. Provide the actions via `messageActions` - an array, or a function of the message - each `{ label, icon?, onPress, destructive? }`. When reactions are enabled, a reactions row is shown on top of the menu automatically.
+
+```tsx
+import { setStringAsync } from 'expo-clipboard'
+import { Copy, Trash2 } from 'lucide-react-native' // optional icons
+
+<Chat
+  messageActions={message => [
+    { label: 'Copy', icon: ({ color, size }) => <Copy color={color} size={size} />, onPress: () => setStringAsync(message.text) },
+    { label: 'Delete', destructive: true, onPress: () => deleteMessage(message) },
+  ]}
+/>
+```
+
 ### Interactive content inside bubbles (video players, maps)
 
-When `reactions` are enabled, the long-press surface spans the **whole message row** - the bubble *and* the empty space beside it, the way Telegram behaves on Android. (A tap gesture is added on top only when `onPressMessage` is set.) Those recognizers do not cancel touches on native subviews, so a `react-native-video` / `expo-video` player rendered through `renderMessageVideo` keeps its native `controls` interactive.
+When `reactions` or `messageActions` are enabled, the long-press surface spans the **whole message row** - the bubble *and* the empty space beside it, the way Telegram behaves on Android. (A tap gesture is added on top only when `onPressMessage` is set.) Those recognizers do not cancel touches on native subviews, so a `react-native-video` / `expo-video` player rendered through `renderMessageVideo` keeps its native `controls` interactive.
 
 If a message must own every touch that lands on it, set `isMessageGestureEnabled` to `false` for it. The gesture surface then drops *behind* the bubble: the bubble's content takes its touches, and long-pressing the row next to the bubble still opens the picker - so reactions are never lost for that message.
 
@@ -792,64 +940,55 @@ If a message must own every touch that lands on it, set `isMessageGestureEnabled
 />
 ```
 
-### FlashList (opt-in)
-
-On long histories `FlatList` can log `VirtualizedList: You have a large list that is slow to update`. [FlashList](https://shopify.github.io/flash-list/) v2 recycles rows instead of keeping them mounted, which removes that class of stall. It is supported as an **optional** dependency - install it yourself and flip one prop:
-
-```bash
-yarn add @shopify/flash-list
-```
-
-```jsx
-<Chat messages={messages} user={user} isFlashListEnabled />
-```
+> **Note:** This library no longer depends on `@expo/react-native-action-sheet`. Prefer `messageActions` above. If you specifically want a native action sheet, install it yourself, wrap your tree in `ActionSheetProvider`, and either call `useActionSheet()` in your own `onLongPressMessage` or pass an `actionSheet` prop - the `actionSheet` prop / `context.actionSheet()` escape hatch still works when you provide an implementation. The composer "+" actions use the built-in themed `AttachmentSheet` and need no setup.
 
-Everything else keeps working: `isInverted`, the floating day header, `loadEarlierMessagesProps` infinite scroll, the scroll-to-bottom button, and `listProps` (spread last, so it overrides the defaults below).
+### Theming & Dark Mode
 
-The chat sets FlashList's `maintainVisibleContentPosition` for you - `startRenderingFromBottom` when `isInverted={false}`, plus `autoscrollToBottomThreshold: 0.2` so new messages follow the viewport only when you are already at the bottom. Override it through `listProps` if you want different thresholds:
+The chat ships with a modern default look and a full token-based theme. Override any subset of tokens via `theme` (light) and `darkTheme` (dark); your overrides are deep-merged over `defaultLightTheme` / `defaultDarkTheme`, and the resolved theme switches at runtime with the color scheme (system, or forced via `colorScheme`). Explicit per-component style props still win over the theme.
 
-```jsx
+```tsx
 <Chat
-  isFlashListEnabled
-  listProps={{
-    maintainVisibleContentPosition: {
-      autoscrollToBottomThreshold: 0.1,
-      animateAutoScrollToBottom: false,
-    },
+  theme={{
+    colors: { accent: '#3390EC', outgoingBubble: '#EFFEDE' },
+    radii: { bubble: 18 },
   }}
+  darkTheme={{ colors: { background: '#0E1621', incomingBubble: '#182533' } }}
+  // colorScheme="dark"   // optional: force a scheme instead of following the system
   {...props}
 />
 ```
 
-Notes:
-
-- FlashList v2 requires the **New Architecture**. On the old architecture it falls back to a slower JS path.
-- `FlatList`-only knobs (`windowSize`, `maxToRenderPerBatch`, `initialNumToRender`, `updateCellsBatchingPeriod`, `removeClippedSubviews`) are not forwarded to FlashList - it sizes its own render window.
-- If `@shopify/flash-list` is not installed, the prop is ignored, a warning is logged, and `FlatList` is used.
+Token groups: `colors`, `radii`, `spacing`, `typography`, `avatar`, `sendButton`, `composer`, `voice`. Build your own theme-aware components with the exported hooks:
 
-### Copy to Clipboard
+```tsx
+import { useTheme, useThemedStyles } from '@kesha-antonov/react-native-chat'
+import { StyleSheet } from 'react-native'
+
+const MyBadge = () => {
+  const theme = useTheme()
+  const styles = useThemedStyles(t => StyleSheet.create({
+    badge: { backgroundColor: t.colors.accent, borderRadius: t.radii.bubble },
+  }))
+  return <View style={styles.badge} />
+}
+```
 
-Long-press handling is exposed via `onLongPressMessage`. Chat wraps [`@expo/react-native-action-sheet`](https://github.com/expo/react-native-action-sheet), so you can show a "Copy Text" action sheet and copy with the clipboard library of your choice:
+Also exported: `defaultLightTheme`, `defaultDarkTheme`, and the `ChatTheme` / `PartialChatTheme` types.
 
-```tsx
-import { useActionSheet } from '@expo/react-native-action-sheet'
-import { setStringAsync } from 'expo-clipboard'
+### Localization (i18n)
 
-const { showActionSheetWithOptions } = useActionSheet()
+All built-in UI strings (composer placeholder, send/cancel, load earlier, today, voice/video/location labels, slide-to-cancel, reply/edit banner, camera-permission text) route through a label table. Built-in translations ship for `en`, `es`, `fr`, `de`, and `ru`, selected by the existing `locale` prop. Override any individual string with `labels`:
 
+```tsx
 <Chat
-  onLongPressMessage={(_context, message) => {
-    showActionSheetWithOptions(
-      { options: ['Copy Text', 'Cancel'], cancelButtonIndex: 1 },
-      buttonIndex => {
-        if (buttonIndex === 0)
-          setStringAsync(message.text)
-      }
-    )
-  }}
+  locale="fr"                       // pick a built-in translation
+  labels={{ placeholder: 'Votre message...' }}  // override any string
+  {...props}
 />
 ```
 
+Exported helpers: `ChatLabels` (type), `defaultLabels`, `translations`, `resolveLabels`, and the `useLabels` hook for reading the resolved labels in custom components.
+
 ### Message Status
 
 Set `sent`, `received`, or `pending` on a message to show its delivery status. By default these render as tick indicators next to the timestamp (`✓` sent, `✓✓` received, `🕓` pending):
@@ -961,6 +1100,73 @@ module.exports = function override(config, env) {
 
 ---
 
+## ⚡ Performance
+
+The chat is built for long lists, but a few habits on your side unlock the most:
+
+**Memoize your render props and config.** Each message row is wrapped in `React.memo` with a comparator that deep-compares the message and reference-compares every other prop. So an unchanged row only skips a re-render when the props you pass it are referentially stable. If you pass inline functions or objects, that row re-renders on every parent render:
+
+```jsx
+// ❌ New reference every render - the row can't skip
+<Chat renderBubble={props => <MyBubble {...props} />} reactions={{ isEnabled: true, onReactionPress }} />
+
+// ✅ Stable references - unchanged rows skip re-renders
+const renderBubble = useCallback(props => <MyBubble {...props} />, [])
+const reactions = useMemo(() => ({ isEnabled: true, onReactionPress }), [onReactionPress])
+const messageActions = useCallback(message => [{ label: 'Copy', onPress: () => copy(message.text) }], [copy])
+
+<Chat renderBubble={renderBubble} reactions={reactions} messageActions={messageActions} />
+```
+
+This applies to all render props (`renderBubble`, `renderMessageText`, `renderAvatar`, ...), the `reactions` / `audioRecording` / `videoRecording` / `messageActions` config objects, and any style objects.
+
+**Keep messages immutable.** Update messages by creating new arrays/objects (e.g. `Chat.append(...)`), never by mutating an existing message in place - the row comparator relies on value changes to detect updates.
+
+**Theme, icons and labels don't need drilling.** `theme` / `darkTheme`, `icons`, and `labels` are read from context (`useTheme`, `useIcons`, `useLabels`), so passing them once on `<Chat>` is enough; they don't cause per-row churn.
+
+**Tune virtualization if needed.** Sensible `FlatList` defaults ship out of the box (`removeClippedSubviews` on Android, `initialNumToRender`, `maxToRenderPerBatch`, `windowSize`, `updateCellsBatchingPeriod`). `windowSize` is measured in screen-heights (not messages); the default keeps a few screens of content mounted around the viewport. Override any of them via `listProps`:
+
+```jsx
+<Chat listProps={{ windowSize: 7, removeClippedSubviews: true }} {...props} />
+```
+
+### FlashList (opt-in)
+
+On long histories `FlatList` can log `VirtualizedList: You have a large list that is slow to update`. [FlashList](https://shopify.github.io/flash-list/) v2 recycles rows instead of keeping them mounted, which removes that class of stall. It is supported as an **optional** dependency - install it yourself and flip one prop:
+
+```bash
+yarn add @shopify/flash-list
+```
+
+```jsx
+<Chat messages={messages} user={user} isFlashListEnabled />
+```
+
+Everything else keeps working: `isInverted`, the floating day header, `loadEarlierMessagesProps` infinite scroll, the scroll-to-bottom button, and `listProps` (spread last, so it overrides the defaults below).
+
+The chat sets FlashList's `maintainVisibleContentPosition` for you - `startRenderingFromBottom` when `isInverted={false}`, plus `autoscrollToBottomThreshold: 0.2` so new messages follow the viewport only when you are already at the bottom. Override it through `listProps` if you want different thresholds:
+
+```jsx
+<Chat
+  isFlashListEnabled
+  listProps={{
+    maintainVisibleContentPosition: {
+      autoscrollToBottomThreshold: 0.1,
+      animateAutoScrollToBottom: false,
+    },
+  }}
+  {...props}
+/>
+```
+
+Notes:
+
+- FlashList v2 requires the **New Architecture**. On the old architecture it falls back to a slower JS path.
+- `FlatList`-only knobs (`windowSize`, `maxToRenderPerBatch`, `initialNumToRender`, `updateCellsBatchingPeriod`, `removeClippedSubviews`) are not forwarded to FlashList - it sizes its own render window.
+- If `@shopify/flash-list` is not installed, the prop is ignored, a warning is logged, and `FlatList` is used.
+
+---
+
 ## 🧪 Testing
 
 <details>

package/lib/Actions.d.ts

@@ -1,10 +1,10 @@
 import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { AttachmentAction } from './components/AttachmentSheet';
 export interface ActionsProps {
-    actions?: Array<{
-        title: string;
-        action: () => void;
-    }>;
+    /** Actions shown in the attachment sheet. Add `icon`/`color` for a grid layout. */
+    actions?: AttachmentAction[];
+    /** Tint color for the action labels in the sheet (defaults to the theme accent). */
     actionSheetOptionTintColor?: string;
     icon?: () => ReactNode;
     wrapperStyle?: StyleProp<ViewStyle>;
@@ -12,5 +12,5 @@ export interface ActionsProps {
     buttonStyle?: StyleProp<ViewStyle>;
     onPressActionButton?(): void;
 }
-export declare function Actions({ actions, actionSheetOptionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, buttonStyle, }: ActionsProps): React.JSX.Element;
+export declare function Actions({ actions, actionSheetOptionTintColor, icon, wrapperStyle, onPressActionButton, buttonStyle, }: ActionsProps): React.JSX.Element;
 //# sourceMappingURL=Actions.d.ts.map

package/lib/Actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAA;AACrD,OAAO,EAGL,SAAS,EACT,SAAS,EACT,SAAS,EACH,MAAM,cAAc,CAAA;AAM5B,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAA;IACtD,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,SAAS,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACpC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAClC,mBAAmB,CAAC,IAAI,IAAI,CAAA;CAC7B;AAED,wBAAgB,OAAO,CAAE,EACvB,OAAO,EACP,0BAAkD,EAClD,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,WAAW,GACZ,EAAE,YAAY,qBAmDd"}
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAA;AAC/D,OAAO,EAGL,SAAS,EACT,SAAS,EACT,SAAS,EAAE,MAAM,cAAc,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAmB,MAAM,8BAA8B,CAAA;AAQhF,MAAM,WAAW,YAAY;IAC3B,mFAAmF;IACnF,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,oFAAoF;IACpF,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,SAAS,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACpC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAClC,mBAAmB,CAAC,IAAI,IAAI,CAAA;CAC7B;AAED,wBAAgB,OAAO,CAAE,EACvB,OAAO,EACP,0BAA0B,EAC1B,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,WAAW,GACZ,EAAE,YAAY,qBA2Cd"}

package/lib/Actions.js

@@ -1,64 +1,53 @@
-import React, { useCallback } from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-import { useChatContext } from './ChatContext';
-import { Color } from './Color';
+import React, { useCallback, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { AttachmentSheet } from './components/AttachmentSheet';
+import { Icon } from './components/Icon';
+import { PaperclipIcon } from './components/MediaControls';
 import { TouchableOpacity } from './components/TouchableOpacity';
+import { useThemedStyles } from './hooks/useTheme';
 import stylesCommon from './styles';
-export function Actions({ actions, actionSheetOptionTintColor = Color.optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, buttonStyle, }) {
-    const { actionSheet } = useChatContext();
+export function Actions({ actions, actionSheetOptionTintColor, icon, wrapperStyle, onPressActionButton, buttonStyle, }) {
+    const styles = useThemedStyles(createStyles);
+    const [isSheetVisible, setIsSheetVisible] = useState(false);
     const handlePress = useCallback(() => {
         if (onPressActionButton) {
             onPressActionButton();
             return;
         }
-        if (!actions?.length)
-            return;
-        const titles = actions.map(item => item.title);
-        actionSheet().showActionSheetWithOptions({
-            options: titles,
-            cancelButtonIndex: titles.length - 1,
-            tintColor: actionSheetOptionTintColor,
-        }, (buttonIndex) => {
-            if (buttonIndex === undefined)
-                return;
-            const item = actions[buttonIndex];
-            item.action?.();
-        });
-    }, [actionSheet, actions, actionSheetOptionTintColor, onPressActionButton]);
+        if (actions?.length)
+            setIsSheetVisible(true);
+    }, [actions, onPressActionButton]);
     const renderIcon = useCallback(() => {
         if (icon)
             return icon();
-        return (<View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
-        <Text style={[styles.iconText, iconTextStyle]}>{'+'}</Text>
+        const size = styles.iconText.fontSize;
+        return (<View style={[stylesCommon.centerItems, wrapperStyle]}>
+        <Icon name='paperclip' color={styles.iconText.color} size={size} fallback={<PaperclipIcon color={styles.iconText.color} size={size}/>}/>
       </View>);
-    }, [icon, iconTextStyle, wrapperStyle]);
+    }, [icon, wrapperStyle, styles]);
     return (<View style={styles.container}>
-      <TouchableOpacity onPress={handlePress} style={[styles.button, buttonStyle]}>
+      <TouchableOpacity onPress={handlePress} hitSlop={8} style={[styles.button, buttonStyle]}>
         {renderIcon()}
       </TouchableOpacity>
+      <AttachmentSheet visible={isSheetVisible} actions={actions ?? []} onClose={() => setIsSheetVisible(false)} tintColor={actionSheetOptionTintColor}/>
     </View>);
 }
-const styles = StyleSheet.create({
+const createStyles = (theme) => StyleSheet.create({
     container: {
-        alignItems: 'flex-end',
+        alignItems: 'center',
+        justifyContent: 'center',
     },
     button: {
-        paddingLeft: 10,
-        paddingRight: 4,
-        paddingVertical: 7,
-    },
-    wrapper: {
-        borderColor: Color.defaultColor,
-        borderWidth: 2,
-        width: 26,
-        height: 26,
-        borderRadius: 13,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingBottom: 8,
     },
+    // Inset attachment icon: borderless, sized/colored as a field inset control.
     iconText: {
-        color: Color.defaultColor,
+        color: theme.colors.incomingMeta,
         fontWeight: 'bold',
-        fontSize: 16,
-        lineHeight: 16,
+        fontSize: theme.composer.insetIconSize,
+        lineHeight: theme.composer.insetIconSize,
     },
 });
 //# sourceMappingURL=Actions.js.map

package/lib/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,EACL,UAAU,EACV,IAAI,EAGO,MAAM,cAAc,CAAA;AACjC,OAAO,EAAoB,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAChF,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,YAAY,MAAM,UAAU,CAAA;AAenC,MAAM,UAAU,OAAO,CAAE,EACvB,OAAO,EACP,0BAA0B,EAC1B,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,WAAW,GACE;IACb,MAAM,MAAM,GAAG,eAAe,CAAC,YAAY,CAAC,CAAA;IAC5C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3D,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,mBAAmB,EAAE,CAAC;YACxB,mBAAmB,EAAE,CAAA;YACrB,OAAM;QACR,CAAC;QAED,IAAI,OAAO,EAAE,MAAM;YACjB,iBAAiB,CAAC,IAAI,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAElC,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,IAAI;YACN,OAAO,IAAI,EAAE,CAAA;QAEf,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAA;QACrC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CACpD;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAG,CAAC,EACzI;MAAA,EAAE,IAAI,CAAC,CACR,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,OAAO,CAAC,CAAC,CAAC,CAAC,CACX,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAEpC;QAAA,CAAC,UAAU,EAAE,CACf;MAAA,EAAE,gBAAgB,CAClB;MAAA,CAAC,eAAe,CACd,OAAO,CAAC,CAAC,cAAc,CAAC,CACxB,OAAO,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CACvB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CACxC,SAAS,CAAC,CAAC,0BAA0B,CAAC,EAE1C;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC;IAC3D,SAAS,EAAE;QACT,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,MAAM,EAAE;QACN,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,aAAa,EAAE,CAAC;KACjB;IACD,6EAA6E;IAC7E,QAAQ,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY;QAChC,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,aAAa;QACtC,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,aAAa;KACzC;CACF,CAAC,CAAA"}

package/lib/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAA;AACrD,OAAO,EACL,UAAU,EAEV,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AA6CzD,MAAM,WAAW,WAAW,CAAC,QAAQ,SAAS,QAAQ;IACpD,cAAc,EAAE,QAAQ,CAAA;IACxB,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,8BAA8B,CAAC,EAAE,OAAO,CAAA;IACxC,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAA;IACvC,cAAc,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,YAAY,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC,GAAG,SAAS,CAAA;IAC5E,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CACzC;AAED,wBAAgB,MAAM,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACzD,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,4BAkG7B"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAA;AACrD,OAAO,EACL,UAAU,EAEV,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAA;AAIrB,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAwCzD,MAAM,WAAW,WAAW,CAAC,QAAQ,SAAS,QAAQ;IACpD,cAAc,EAAE,QAAQ,CAAA;IACxB,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,8BAA8B,CAAC,EAAE,OAAO,CAAA;IACxC,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAA;IACvC,cAAc,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,YAAY,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC,GAAG,SAAS,CAAA;IAC5E,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CACzC;AAED,wBAAgB,MAAM,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACzD,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,4BA0G7B"}