@ethora/chat-component-rn 26.4.1 → 26.5.1

package/README.md

@@ -4,7 +4,20 @@ React Native chat UI + chat core for iOS and Android, powered by the Ethora plat
 
 **Part of the [Ethora SDK ecosystem](https://github.com/dappros/ethora#ecosystem)** — see all SDKs, tools, and sample apps. Follow cross-SDK updates in the [Release Notes](https://github.com/dappros/ethora/blob/main/RELEASE-NOTES.md).
 
-> Looking for the React.js (web) version? See [`@ethora/chat-component`](https://github.com/dappros/ethora-chat-component).
+> Looking for the React.js (web) version? See [`@ethora/chat-component`](https://github.com/dappros/ethora-chat-component) (npm: [`@ethora/chat-component`](https://www.npmjs.com/package/@ethora/chat-component)).
+
+## Table of contents
+
+- [What you get](#what-you-get)
+- [Default backend endpoints](#default-backend-endpoints)
+- [Install](#install)
+- [Quick start](#quick-start)
+- [Configuration](#configuration) — full `IConfig` reference in [instructions.md](instructions.md)
+- [Authentication modes](#authentication-modes)
+- [Pinning a single room](#pinning-a-single-room)
+- [Quality & test coverage](#quality--test-coverage)
+- [Local development](#local-development)
+- [Changelog](CHANGELOG.md)
 
 ## What you get
 
@@ -75,6 +88,61 @@ export default function App() {
 
 Sign up at [app.chat.ethora.com/register](https://app.chat.ethora.com/register) to get an `appId` (and optionally an app token / JWT for backend integrations). For a guided setup that writes config files into your project, run `npx @ethora/setup`.
 
+## Configuration
+
+`<XmppProvider>` and `<Chat>` accept the same `config` object (shape: [`IConfig`](src/types/types.ts)). Real integrations should put the network/auth fields on the provider (single source of truth for the XMPP socket) and the UI/behavior toggles on the chat:
+
+```tsx
+const baseConfig = {
+  customAppToken: token || '',
+  baseUrl: backend.base_url,
+  xmppSettings: {
+    devServer: backend.dev_server,
+    host: backend.host,
+    conference: backend.conference,
+  },
+  jwtLogin: { enabled: true, token: token || '' },
+  refreshTokens: { enabled: true },
+  initBeforeLoad: true,
+};
+
+<XmppProvider config={baseConfig}>
+  <Chat
+    roomJID={room_jid}
+    config={{
+      ...baseConfig,
+      newArch: true,
+      disableInteractions: true,
+      disableChatInfo: {
+        disableHeader: false,
+        disableDescription: true,
+        disableType: true,
+        disableMembers: true,
+        disableChatHeaderMenu: true,
+      },
+      chatHeaderSettings: {
+        hide: false,
+        disableCreate: true,
+        disableMenu: true,
+        hideSearch: singleRoomMode,
+      },
+      clearStoreBeforeInit: true,
+      disableNewChatButton: true,
+      disableRoomConfig: true,
+      disableProfilesInteractions: true,
+      disableRoomMenu: singleRoomMode,
+      disableRooms: singleRoomMode,
+      enableRoomsRetry: {
+        enabled: true,
+        helperText: 'Initializing your messages…',
+      },
+    }}
+  />
+</XmppProvider>
+```
+
+The complete field-by-field reference — every option in `IConfig`, grouped by purpose, plus the single-init contract and a per-room single-chat recipe — lives in **[instructions.md](instructions.md)**. It mirrors the structure of the web package's [`@ethora/chat-component` README](https://www.npmjs.com/package/@ethora/chat-component).
+
 ## Authentication modes
 
 ```tsx
@@ -112,21 +180,205 @@ Sign up at [app.chat.ethora.com/register](https://app.chat.ethora.com/register)
 />
 ```
 
+## Quality & test coverage
+
+### Jest (unit + integration)
+
+```bash
+npm test          # ~2s, full suite
+```
+
+45 files, 486 tests cover the SDK's substantive surface:
+
+| Layer                          | Coverage |
+|--------------------------------|----------|
+| Redux slices (rooms, chatSettings, roomHeap) | reducers + slice contracts |
+| Middleware (unread, new-message, reactions, logout) | dispatch wiring + edge cases |
+| XMPP client                    | constructor, state machine, reconnect backoff, disconnect, QoS / coalesced MAM, delegating helpers |
+| XMPP stanza builders (~25 files) | exact wire shape via real `@xmpp/client` `xml()` |
+| REST API wrappers              | URL + body + headers + redux side effects, 60s cache, 401 refresh interceptor with queue-during-refresh |
+| Persistence                    | AsyncStorage rehydrate, debounced writes, key filtering, room cap |
+| Helpers                        | parseMessageBody (markdown render), markdownParser, insertMessageWithDelimiter, createMessageFromXml, ensureScopedChatCache, scheduler, etc. |
+| L2 components                  | ChatRoomItem (unread badge), TextInput, DeletedMessage, MessageReply, MessageReaction |
+| L3 / e2e (jest)                | `appLoginChatsRn` 3-tab testbed, JWT-login + room mount |
+
+### Maestro (live backend)
+
+```bash
+npm run e2e:ios            # boots iPhone 16 sim, runs auth-and-send flow
+npm run e2e:android        # ditto Pixel_6
+```
+
+Uses any profile in `~/.ethora/profiles.json` (the same file the
+`@ethora/setup` CLI writes to). The runner logs the test user via
+REST, seeds the testbed's AsyncStorage with the resolved Creds, and
+exercises the full pipeline against a real tenant:
+
+> REST login → AsyncStorage persisted Creds → app boot →
+> `/chats/my` → XMPP WebSocket → MUC presence join → MAM history →
+> chat thread rendered with input + send button visible.
+
+If any link in that chain breaks, Maestro fails — making this a
+single high-signal smoke for the most-likely class of regressions
+(auth flow, XMPP transport, room hydration).
+
+### Live deep test
+A documented session log + screenshots from a side-by-side
+alice/iOS ↔ bob/Android run against chat-qa.ethora.com lives at
+`docs/260517_deep-test-chat-qa.md`. Useful as a reproducer recipe.
+
+### Bugs surfaced + fixed (full history on PR #4)
+The test pass surfaced a handful of latent bugs that had been
+silently shipping. All fixed in the same branch:
+- **`apiClient` interceptor**: five separate bugs that combined to
+  swallow auth errors and hang the refresh-on-401 path.
+- **`unreadMiddleware`**: didn't filter own messages → MAM-replayed
+  own messages bumped the unread badge on re-login.
+- **`logoutMiddleware`**: filtered on the redux store key instead
+  of the slice's action prefix → the XMPP disconnect event never
+  fired on logout.
+- **`updateMessagesTillLast`**: imported two reducer exports that
+  don't exist → any call site crashed at runtime.
+- **`historyPreloadScheduler`**: the "skip if already preloaded"
+  check was dead — the batch-loading dispatch overwrote the state
+  the check read.
+- **`TextInput`**: `editable={isLoading}` was inverted vs convention.
+- **`MODAL_TYPES`** require cycle (logged on every app boot).
+
 ## Local development
 
-This repo is bootstrapped with `@react-native-community/cli`. To run it as its own RN sample app rather than as a library:
+This repo doubles as an Expo testbed app: `App.tsx` mounts
+`AppLoginChatsRn`, a 3-tab (Setup / Chat / Logs) shell that drives the
+SDK end-to-end via either paste-a-JWT or email + app-token login. Run
+it against the canonical Ethora Cloud endpoints, your QA tenant, or a
+self-hosted Ethora instance — all configurable from the Setup tab at
+runtime.
+
+### Prerequisites
+
+- Node.js 18+
+- Xcode 15+ (iOS), Android Studio with a working AVD (Android)
+- Java JDK 17+ — Android Studio's bundled JBR works:
+  `export JAVA_HOME="/Applications/Android Studio.app/Contents/jbr/Contents/Home"`
+- Android SDK with platform-tools on `$PATH`:
+  `export ANDROID_HOME="$HOME/Library/Android/sdk"`
+- **CocoaPods 1.13+** for iOS. macOS system Ruby (2.6) is too old for
+  the bundled Gemfile — install via Homebrew: `brew install cocoapods`
+
+### Build + run
 
 ```bash
 git clone https://github.com/dappros/ethora-chat-component-rn.git
 cd ethora-chat-component-rn
-yarn install
+npm install
+
+# iOS
 cd ios && pod install && cd ..
-yarn start            # Metro
-yarn ios              # in another terminal
-yarn android          # in another terminal
+npx expo run:ios --device "iPhone 16"
+
+# Android — write local.properties if expo prebuild didn't create it
+echo "sdk.dir=$ANDROID_HOME" > android/local.properties
+npx expo run:android
+```
+
+The first `expo run:*` will `expo prebuild` to generate `ios/` and
+`android/` from `app.json`. Both directories are gitignored — the
+source of truth is `app.json` + the config plugins it lists.
+
+This repo uses **npm** (not yarn). `package-lock.json` is the
+canonical lockfile and `yarn.lock` is intentionally absent so
+`expo run:*` defaults to `npm install` for its post-prebuild
+reinstall step. If you prefer yarn for your own work, that's fine —
+just don't commit a `yarn.lock` back into the repo.
+
+### Known first-run gotchas
+
+- **iOS `pod install` fails on system Ruby**: the Gemfile resolves
+  to ffi >= 1.17, which needs Ruby 3.0+. Install CocoaPods via
+  `brew install cocoapods` (uses brew's bundled Ruby) and run
+  `pod install` directly — skip Bundler.
+- **`expo run:android` errors with "SDK location not found"**: write
+  `android/local.properties` with `sdk.dir=$ANDROID_HOME` (the
+  Expo prebuild flow doesn't currently generate this).
+- **`expo run:ios` crashes at the very end on osascript**: the CLI
+  tries to count Simulator processes via AppleScript and fails if
+  Terminal lacks Automation permission. The build succeeds and the
+  app is installed — grant permission via System Settings →
+  Privacy & Security → Automation, or just open the Simulator
+  manually before the build.
+- **First-bundle ANR on Android emulator**: the debug bundle is
+  ~1500 modules and the cold JS eval can briefly trip the watchdog
+  on a fresh AVD. Tap "Wait" — the Setup tab will render. Release
+  builds (Hermes precompiled) don't show this.
+
+### `expo prebuild` and the `dependencies` guard
+
+`npm run prebuild|ios|android` each chain through to `expo prebuild`
+on first run, and `expo prebuild` likes to hoist `expo`, `react`,
+and `react-native` from `devDependencies` into `dependencies`.
+That's wrong for a published library — consumers of
+`@ethora/chat-component-rn` would install a duplicate copy of React
+and crash at runtime with the "two copies of React" reconciler
+error.
+
+To prevent the regression, those three npm scripts each invoke
+`scripts/fix-prebuild-deps.js` right after, which surgically strips
+the offending lines back out of `package.json` (preserving the rest
+of the file byte-for-byte). You can also run it manually:
+
+```bash
+npm run fix-prebuild-deps
 ```
 
-> Make sure you have completed the [React Native environment setup](https://reactnative.dev/docs/environment-setup) before proceeding.
+It's idempotent — runs are silent when there's nothing to fix.
+
+### Tests
+
+```bash
+npm test                          # jest, ~2s for the full suite
+npm test -- --watch               # watch mode
+npm test -- some.test.ts          # single file
+```
+
+### E2E (Maestro)
+
+`e2e/auth-and-send.yaml` drives the full Setup → Email auth → Chat
+tab → enter room → send message → assert it appears flow against a
+real backend. Credentials come from any profile in
+`~/.ethora/profiles.json` (the file the `@ethora/setup` CLI writes
+to), so you don't have to hardcode anything.
+
+Prerequisites:
+
+```bash
+# Install Maestro
+curl -fsSL https://get.maestro.mobile.dev | bash
+export PATH="$PATH:$HOME/.maestro/bin"
+
+# JDK 17+ — Android Studio's bundled JBR works; the runner script
+# auto-detects it on macOS so you don't have to set JAVA_HOME.
+```
+
+Run against an already-built + installed app + a booted simulator:
+
+```bash
+# Default profile "mychatapp QA", room "Main chat"
+npm run e2e:ios
+npm run e2e:android
+
+# Or pass a different profile / room
+scripts/run-e2e.sh ios "Vitall Dev2" "General"
+```
+
+The flow targets stable `testID`s wired into the SDK
+(`chat-message-input`, `chat-send-button`, plus `room-<jid-local>`
+on each room row) — please keep those identifiers stable for
+downstream e2e drivers (Detox, Appium) that rely on the same
+contracts.
+
+> Already have your RN environment set up? See the
+> [React Native environment setup](https://reactnative.dev/docs/environment-setup)
+> doc if any of the above feels unfamiliar.
 
 ## Related
 

package/index.js

@@ -7,6 +7,13 @@
  */
 
 import 'react-native-gesture-handler';
+// Polyfill `crypto.getRandomValues()` before anything that pulls in
+// uuid — RN's JS runtime doesn't ship one, and uuid throws
+// "crypto.getRandomValues() not supported" on the first send.
+// The library entry (src/main.ts) loads this too, but the testbed
+// here mounts the chat directly without going through that entry, so
+// we need it again at the testbed root.
+import 'react-native-get-random-values';
 import { registerRootComponent } from 'expo';
 import App from './App';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.04.01",
+  "version": "26.05.01",
   "description": "Drop-in XMPP chat component for React Native / Expo. <Chat config={...}/> and you're done.",
   "main": "index.js",
   "react-native": "src/main.ts",
@@ -10,38 +10,60 @@
     "src",
     "metro.js",
     "empty-shim.js",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=1.21.0",
     "react": ">=18.0.0",
     "react-native": ">=0.73.0",
-    "react-native-svg": ">=14.0.0",
-    "react-native-reanimated": ">=3.0.0",
-    "@react-native-async-storage/async-storage": ">=1.21.0",
+    "react-native-gesture-handler": ">=2.0.0",
     "react-native-get-random-values": ">=1.10.0",
-    "react-native-gesture-handler": ">=2.0.0"
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-svg": ">=14.0.0"
   },
   "peerDependenciesMeta": {
-    "react-native-svg": { "optional": false },
-    "react-native-reanimated": { "optional": false },
-    "@react-native-async-storage/async-storage": { "optional": false },
-    "react-native-get-random-values": { "optional": false },
-    "react-native-gesture-handler": { "optional": true }
+    "react-native-svg": {
+      "optional": false
+    },
+    "react-native-reanimated": {
+      "optional": false
+    },
+    "@react-native-async-storage/async-storage": {
+      "optional": false
+    },
+    "react-native-get-random-values": {
+      "optional": false
+    },
+    "react-native-gesture-handler": {
+      "optional": true
+    }
   },
   "scripts": {
+    "postinstall": "patch-package",
     "start": "expo start",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
+    "android": "node scripts/ensure-emulator.js && (expo run:android; node scripts/fix-prebuild-deps.js)",
+    "ios": "expo run:ios; node scripts/fix-prebuild-deps.js",
     "web": "expo start --web",
-    "prebuild": "expo prebuild",
+    "prebuild": "expo prebuild; node scripts/fix-prebuild-deps.js",
+    "fix-prebuild-deps": "node scripts/fix-prebuild-deps.js",
     "lint": "eslint .",
-    "test": "jest"
+    "test": "jest",
+    "e2e": "scripts/run-e2e.sh",
+    "e2e:ios": "scripts/run-e2e.sh ios",
+    "e2e:android": "scripts/run-e2e.sh android"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.5.0",
     "@xmpp/client": "^0.13.1",
     "axios": "^1.7.9",
+    "expo-clipboard": "~8.0.8",
+    "expo-document-picker": "~14.0.0",
+    "expo-image-manipulator": "~14.0.0",
+    "expo-image-picker": "~17.0.0",
     "js-sha256": "^0.11.0",
+    "react-native-keyboard-controller": "^1.18.5",
+    "react-native-webview": "^13.16.1",
     "react-redux": "^9.2.0",
     "styled-components": "^6.1.13"
   },
@@ -60,6 +82,7 @@
     "expo-build-properties": "^55.0.14",
     "expo-status-bar": "~3.0.0",
     "jest": "^29.6.3",
+    "patch-package": "^8.0.1",
     "jest-expo": "~54.0.0",
     "prettier": "2.8.8",
     "react": "19.1.0",
@@ -79,7 +102,15 @@
     "node": ">=18"
   },
   "author": "Ethora",
-  "license": "AGPL-3.0-only",
+  "homepage": "https://playground.chat.ethora.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dappros/ethora-chat-component-rn.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dappros/ethora-chat-component-rn/issues"
+  },
+  "license": "MIT",
   "keywords": [
     "chat",
     "messaging",

package/src/components/Header/HeaderRoomList.tsx

@@ -74,11 +74,10 @@ const styles = StyleSheet.create({
   headerContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    paddingTop: 62, // 60px top padding + 2px for header content
-    maxHeight: 24,
-    minHeight: 24,
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 8,
+    minHeight: 56,
     justifyContent: 'space-between',
   },
   menuButton: {
@@ -87,8 +86,9 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   leftContainer: {
-    flex: 1,
+    width: 40,
     alignItems: 'flex-start',
+    justifyContent: 'center',
   },
   centerContainer: {
     position: 'absolute',
@@ -98,7 +98,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   rightContainer: {
-    flex: 1,
+    width: 40,
     alignItems: 'flex-end',
+    justifyContent: 'center',
   },
 });

package/src/components/InputComponents/Search.tsx

@@ -20,9 +20,9 @@ const SearchInputWrapper = styled.View.withConfig({ shouldForwardProp })<{
   align-items: center;
   background-color: #fff;
   border-radius: 16px;
-  height: 48px;
-  padding: 0 16px;
-  margin: 0 6px 16px 6px;
+  height: 44px;
+  padding: 0 12px;
+  margin: 0 0 12px 0;
   flex: 1;
   ${({ animated, expanded }) =>
     animated &&
@@ -36,7 +36,10 @@ const SearchIcon = styled(TouchableOpacity)<{
   animated?: boolean;
   expanded?: boolean;
 }>`
-  padding: 3.5px;
+  padding: 0;
+  margin-right: 8px;
+  align-items: center;
+  justify-content: center;
   color: #999;
 `;
 

package/src/components/InputComponents/TextInput.tsx

@@ -42,6 +42,11 @@ const TextInput: React.FC<TextInputProps> = ({
   return (
     <>
       <MessageInput
+        // Stable testIDs so Maestro / Detox / Appium can drive the
+        // chat-send flow reliably. accessibilityLabel mirrors the
+        // testID so iOS accessibility-id lookups also work.
+        testID="chat-message-input"
+        accessibilityLabel="chat-message-input"
         color={config?.colors?.primary}
         placeholder="Type message"
         value={message}
@@ -49,9 +54,11 @@ const TextInput: React.FC<TextInputProps> = ({
         onSubmitEditing={handleSendClick}
         onFocus={onFocus}
         onBlur={onBlur}
-        editable={isLoading}
+        editable={!isLoading}
       />
       <Button
+        testID="chat-send-button"
+        accessibilityLabel="chat-send-button"
         onPress={handleSendClick}
         EndIcon={<SendIcon color={!message ? '#D4D4D8' : '#fff'} />}
         style={{

package/src/components/MainComponents/ChatRoom.tsx

@@ -28,13 +28,13 @@ import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingI
 // import {PanGestureHandler} from 'react-native-gesture-handler';
 import { FlatList } from 'react-native';
 import {
-  KeyboardAvoidingView,
   Platform,
   TouchableWithoutFeedback,
   Keyboard,
   View,
   KeyboardEvent,
 } from 'react-native';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import useComposing from '../../hooks/useComposing';
 
 interface ChatRoomProps {
@@ -112,7 +112,10 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
 
     const sendMedia = useCallback(
       (data: any, type: string) => {
-        sendMessageMedia(data, type, activeRoomJID || '');
+        // Return the promise so callers can sequence the follow-up
+        // text send AFTER the upload finishes (consumer expectation:
+        // media first, text second — never interleaved).
+        return sendMessageMedia(data, type, activeRoomJID || '');
       },
       [activeRoomJID],
     );
@@ -208,7 +211,16 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     }
 
     return (
-      <View style={{ flex: 1 }}>
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        // react-native-keyboard-controller drives a frame-perfect lift
+        // via Reanimated worklets on BOTH platforms, so `padding`
+        // behavior is correct everywhere — unlike RN's stock KAV
+        // which would double-handle against AndroidManifest's
+        // `adjustResize` and jitter.
+        behavior="padding"
+        keyboardVerticalOffset={configWithEventHandlers?.keyboardVerticalOffset ?? 0}
+      >
         <ChatContainer
           style={
             configWithEventHandlers?.chatRoomStyles
@@ -384,7 +396,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
               />
             )}
         </ChatContainer>
-      </View>
+      </KeyboardAvoidingView>
     );
   },
 );

package/src/components/MainComponents/ChatWrapper.tsx

@@ -274,12 +274,6 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 }}>
                 <ChatRoom
                   CustomMessageComponent={CustomMessageComponent || Message}
-                  // Only show the back button when there's a room list to
-                  // return to. In single-room mode (`roomJID` preselected
-                  // by the consumer) or when the consumer disabled the
-                  // list (`disableRooms`), there's nowhere to go back to,
-                  // so we omit the handler and ChatHeader renders without
-                  // the back arrow.
                   handleBackClick={
                     roomJID || config?.disableRooms
                       ? undefined
@@ -290,20 +284,22 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 />
               </ChatWrapperBox>
             )}
-            {/*
-              Mount the active-modal renderer so ChatHeader's onPress
-              (dispatch setActiveModal(CHAT_PROFILE)) actually surfaces
-              a modal. Without this, tapping the header was a no-op:
-              redux state flipped but nothing was listening. Web's
-              ChatWrapper mounts the same component (web ChatWrapper
-              lines 331-336).
-            */}
             <Modal
               modal={activeModal}
               setOpenModal={(value?: ModalType) =>
                 dispatch(setActiveModal(value))
               }
             />
+            {deleteModal?.isDeleteModal && (
+              <ModalWrapper
+                title="Delete Message"
+                description="Are you sure you want to delete this message?"
+                buttonText="Delete"
+                backgroundColorButton="#E53935"
+                handleClick={handleDeleteClick}
+                handleCloseModal={handleCloseDeleteModal}
+              />
+            )}
           </ChatWrapperBox>
         ) : (
           <StyledLoaderWrapper>

package/src/components/MainComponents/LoginWrapper.tsx

@@ -24,9 +24,12 @@ const LoginWrapper: React.FC<LoginWrapperProps> = ({...props}) => {
 
   const loginUserFunction = useCallback(async () => {
     try {
+      // Per product-code-policy: no compiled-in dev credentials. If the
+      // consumer didn't pass `user.email` / `user.password`, the call
+      // below fails on empty strings, hits catch, and returns null.
       const authData = await loginEmail(
-        props?.user?.email || 'yukiraze9@gmail.com',
-        props?.user?.password || 'Qwerty123',
+        props?.user?.email || '',
+        props?.user?.password || '',
       );
 
       return {

package/src/components/MainComponents/MessageList.tsx

@@ -126,36 +126,25 @@ const MessageList = <TMessage extends IMessage>({
     // even mid-stream — so the user sees them appear from oldest to
     // newest with no swap animation.
     const sorted = filtered.slice().sort((a, b) => {
-      // Pull a numeric timestamp out of the id (server stamps a
-      // microsecond timestamp into the stanza-id) — fallback to the
-      // `date` ISO string when id isn't numeric (e.g. delimiter rows).
-      const aNum = Number(a?.id) || new Date(a?.date as any).getTime() || 0;
-      const bNum = Number(b?.id) || new Date(b?.date as any).getTime() || 0;
+      const aNum = new Date(a?.date as any).getTime() || 0;
+      const bNum = new Date(b?.date as any).getTime() || 0;
       return aNum - bNum;
     });
     return sorted;
   }, [addReplyMessages, isReply, roomJID, activeMessage]);
 
   const handleLoadMore = useCallback(async () => {
-    console.log('🟠 [MessageList] handleLoadMore fired', {
-      loading,
-      isLoadingMore,
-      msgCount: memoizedMessages.length,
-      isScrollBlocked,
-    });
     if (
       loading ||
       isLoadingMore ||
       !memoizedMessages.length ||
       isScrollBlocked
     ) {
-      console.log('🟠 [MessageList] handleLoadMore gated out');
       return;
     }
 
     const oldestMessage = memoizedMessages[0];
     if (!oldestMessage || !oldestMessage.id) {
-      console.log('🟠 [MessageList] no oldest msg');
       return;
     }
 
@@ -163,19 +152,13 @@ const MessageList = <TMessage extends IMessage>({
     setIsScrollBlocked(true);
 
     try {
-      console.log('🟠 [MessageList] calling loadMoreMessages', {
-        room: oldestMessage.roomJid || roomJID,
-        beforeId: Number(oldestMessage.id),
-        oldestId: oldestMessage.id,
-      });
       await loadMoreMessages(
         oldestMessage.roomJid || roomJID,
         15,
         Number(oldestMessage.id)
       );
-      console.log('🟠 [MessageList] loadMoreMessages returned');
     } catch (error) {
-      console.error('🔴 [MessageList] loadMoreMessages threw:', error);
+      console.error(error);
     } finally {
       setTimeout(() => {
         setIsLoadingMore(false);