@kesha-antonov/react-native-chat 5.0.0 → 6.0.0

package/lib/MessagesContainer/rowStore.js

@@ -0,0 +1,140 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useCallback, useContext, useSyncExternalStore } from 'react';
+import isEqual from 'lodash.isequal';
+import { warning } from '../logging';
+import { isSameDay, isSameGroup } from '../utils';
+
+/** What a row renders: its message, and the neighbours its grouping is decided against. */
+
+// Stable stand-in for the missing neighbour at either end of the list.
+const EMPTY_MESSAGE = Object.freeze({});
+
+/**
+ * Everything about a neighbour that changes how a row draws: whether there is one (quick
+ * replies hide once answered), whether they group (the tail, the avatar, the gap below) and
+ * whether they share a day (the date separator). A neighbour's own text, status or reactions
+ * do not matter to this row, so they never re-render it.
+ */
+const neighbourSignature = (message, neighbour) => {
+  if (!neighbour) return 0;
+  return 1 + (neighbour._id != null ? 2 : 0) + (isSameGroup(message, neighbour) ? 4 : 0) + (isSameDay(message, neighbour) ? 8 : 0);
+};
+/**
+ * The messages, by id, for the rows to subscribe to one by one. A send, a status change, a
+ * reaction or a streamed token re-renders the row it belongs to - plus a neighbour only when
+ * its grouping actually changed - instead of every row the list has mounted.
+ *
+ * `sync` runs while the list renders, so rows mounting in that same render read the new
+ * messages; `flush` notifies the rows already on screen once it has committed.
+ */
+export class MessageRowStore {
+  entries = new Map();
+  listeners = new Map();
+  changed = new Set();
+  sync(messages, isInverted) {
+    if (messages === this.lastMessages && isInverted === this.lastIsInverted) return;
+    this.lastMessages = messages;
+    this.lastIsInverted = isInverted;
+    const seen = new Set();
+    for (let i = 0; i < messages.length; i++) {
+      const message = messages[i];
+      if (message._id == null) warning('Chat: `_id` is missing for message', JSON.stringify(message));
+      if (!message.user) {
+        if (!message.system) warning('Chat: `user` is missing for message', JSON.stringify(message));
+        message.user = {
+          _id: 0
+        };
+      }
+      const id = String(message._id);
+      seen.add(id);
+      const previousMessage = isInverted ? messages[i + 1] : messages[i - 1];
+      const nextMessage = isInverted ? messages[i - 1] : messages[i + 1];
+      const previousSignature = neighbourSignature(message, previousMessage);
+      const nextSignature = neighbourSignature(message, nextMessage);
+      const stored = this.entries.get(id);
+      if (stored && stored.previousSignature === previousSignature && stored.nextSignature === nextSignature && (
+      // A store that rebuilds every message object on each update (a server snapshot)
+      // still only re-renders what changed.
+      stored.entry.message === message || isEqual(stored.entry.message, message))) continue;
+      this.entries.set(id, {
+        entry: {
+          message,
+          previousMessage: previousMessage ?? EMPTY_MESSAGE,
+          nextMessage: nextMessage ?? EMPTY_MESSAGE
+        },
+        previousSignature,
+        nextSignature
+      });
+      this.changed.add(id);
+    }
+    if (seen.size !== this.entries.size) for (const id of this.entries.keys()) if (!seen.has(id)) {
+      this.entries.delete(id);
+      this.changed.add(id);
+    }
+  }
+  flush() {
+    if (this.changed.size === 0) return;
+    const ids = [...this.changed];
+    this.changed.clear();
+    for (const id of ids) this.listeners.get(id)?.forEach(listener => listener());
+  }
+  get(id) {
+    return this.entries.get(id)?.entry;
+  }
+  getMessage(id) {
+    return this.entries.get(String(id))?.entry.message;
+  }
+  subscribe(id, listener) {
+    let set = this.listeners.get(id);
+    if (!set) {
+      set = new Set();
+      this.listeners.set(id, set);
+    }
+    set.add(listener);
+    return () => {
+      set.delete(listener);
+      if (set.size === 0) this.listeners.delete(id);
+    };
+  }
+}
+export const MessageRowStoreContext = createContext(null);
+
+/** The entry for one row, re-rendering it only when that entry changes. */
+export function useRowEntry(id) {
+  const $ = _c(6);
+  const store = useContext(MessageRowStoreContext);
+  let t0;
+  if ($[0] !== id || $[1] !== store) {
+    t0 = listener => store ? store.subscribe(id, listener) : _temp;
+    $[0] = id;
+    $[1] = store;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const subscribe = t0;
+  let t1;
+  if ($[3] !== id || $[4] !== store) {
+    t1 = () => store?.get(id);
+    $[3] = id;
+    $[4] = store;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const getSnapshot = t1;
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+/**
+ * `messages`, or the previous array when it holds the same ids in the same order. The list is
+ * then handed the same data when only a message's content changed, and does not touch its
+ * cells at all - the store re-renders that one row.
+ */
+function _temp() {}
+export function sameOrder(previous, messages) {
+  if (!previous || previous.length !== messages.length) return messages;
+  for (let i = 0; i < messages.length; i++) if (previous[i]._id !== messages[i]._id) return messages;
+  return previous;
+}
+//# sourceMappingURL=rowStore.js.map

package/lib/MessagesContainer/rowStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowStore.js","names":["createContext","useCallback","useContext","useSyncExternalStore","isEqual","warning","isSameDay","isSameGroup","EMPTY_MESSAGE","Object","freeze","neighbourSignature","message","neighbour","_id","MessageRowStore","entries","Map","listeners","changed","Set","sync","messages","isInverted","lastMessages","lastIsInverted","seen","i","length","JSON","stringify","user","system","id","String","add","previousMessage","nextMessage","previousSignature","nextSignature","stored","get","entry","set","size","keys","has","delete","flush","ids","clear","forEach","listener","getMessage","subscribe","MessageRowStoreContext","useRowEntry","$","_c","store","t0","_temp","t1","getSnapshot","sameOrder","previous"],"sources":["../../src/MessagesContainer/rowStore.ts"],"sourcesContent":["import { createContext, useCallback, useContext, useSyncExternalStore } from 'react'\nimport isEqual from 'lodash.isequal'\n\nimport { warning } from '../logging'\nimport { IMessage } from '../Models'\nimport { isSameDay, isSameGroup } from '../utils'\n\n/** What a row renders: its message, and the neighbours its grouping is decided against. */\nexport interface RowEntry<TMessage extends IMessage = IMessage> {\n  message: TMessage\n  previousMessage: TMessage\n  nextMessage: TMessage\n}\n\n// Stable stand-in for the missing neighbour at either end of the list.\nconst EMPTY_MESSAGE = Object.freeze({}) as IMessage\n\n/**\n * Everything about a neighbour that changes how a row draws: whether there is one (quick\n * replies hide once answered), whether they group (the tail, the avatar, the gap below) and\n * whether they share a day (the date separator). A neighbour's own text, status or reactions\n * do not matter to this row, so they never re-render it.\n */\nconst neighbourSignature = (message: IMessage, neighbour: IMessage | undefined) => {\n  if (!neighbour)\n    return 0\n  return 1 +\n    (neighbour._id != null ? 2 : 0) +\n    (isSameGroup(message, neighbour) ? 4 : 0) +\n    (isSameDay(message, neighbour) ? 8 : 0)\n}\n\ninterface StoredEntry<TMessage extends IMessage> {\n  entry: RowEntry<TMessage>\n  previousSignature: number\n  nextSignature: number\n}\n\n/**\n * The messages, by id, for the rows to subscribe to one by one. A send, a status change, a\n * reaction or a streamed token re-renders the row it belongs to - plus a neighbour only when\n * its grouping actually changed - instead of every row the list has mounted.\n *\n * `sync` runs while the list renders, so rows mounting in that same render read the new\n * messages; `flush` notifies the rows already on screen once it has committed.\n */\nexport class MessageRowStore<TMessage extends IMessage = IMessage> {\n  private entries = new Map<string, StoredEntry<TMessage>>()\n  private listeners = new Map<string, Set<() => void>>()\n  private changed = new Set<string>()\n  private lastMessages: TMessage[] | undefined\n  private lastIsInverted: boolean | undefined\n\n  sync (messages: TMessage[], isInverted: boolean) {\n    if (messages === this.lastMessages && isInverted === this.lastIsInverted)\n      return\n    this.lastMessages = messages\n    this.lastIsInverted = isInverted\n\n    const seen = new Set<string>()\n    for (let i = 0; i < messages.length; i++) {\n      const message = messages[i]\n      if (message._id == null)\n        warning('Chat: `_id` is missing for message', JSON.stringify(message))\n      if (!message.user) {\n        if (!message.system)\n          warning('Chat: `user` is missing for message', JSON.stringify(message))\n        message.user = { _id: 0 }\n      }\n\n      const id = String(message._id)\n      seen.add(id)\n      const previousMessage = isInverted ? messages[i + 1] : messages[i - 1]\n      const nextMessage = isInverted ? messages[i - 1] : messages[i + 1]\n      const previousSignature = neighbourSignature(message, previousMessage)\n      const nextSignature = neighbourSignature(message, nextMessage)\n\n      const stored = this.entries.get(id)\n      if (\n        stored &&\n        stored.previousSignature === previousSignature &&\n        stored.nextSignature === nextSignature &&\n        // A store that rebuilds every message object on each update (a server snapshot)\n        // still only re-renders what changed.\n        (stored.entry.message === message || isEqual(stored.entry.message, message))\n      )\n        continue\n\n      this.entries.set(id, {\n        entry: {\n          message,\n          previousMessage: previousMessage ?? EMPTY_MESSAGE as TMessage,\n          nextMessage: nextMessage ?? EMPTY_MESSAGE as TMessage,\n        },\n        previousSignature,\n        nextSignature,\n      })\n      this.changed.add(id)\n    }\n\n    if (seen.size !== this.entries.size)\n      for (const id of this.entries.keys())\n        if (!seen.has(id)) {\n          this.entries.delete(id)\n          this.changed.add(id)\n        }\n  }\n\n  flush () {\n    if (this.changed.size === 0)\n      return\n    const ids = [...this.changed]\n    this.changed.clear()\n    for (const id of ids)\n      this.listeners.get(id)?.forEach(listener => listener())\n  }\n\n  get (id: string): RowEntry<TMessage> | undefined {\n    return this.entries.get(id)?.entry\n  }\n\n  getMessage (id: string | number): TMessage | undefined {\n    return this.entries.get(String(id))?.entry.message\n  }\n\n  subscribe (id: string, listener: () => void) {\n    let set = this.listeners.get(id)\n    if (!set) {\n      set = new Set()\n      this.listeners.set(id, set)\n    }\n    set.add(listener)\n    return () => {\n      set!.delete(listener)\n      if (set!.size === 0)\n        this.listeners.delete(id)\n    }\n  }\n}\n\nexport const MessageRowStoreContext = createContext<MessageRowStore | null>(null)\n\n/** The entry for one row, re-rendering it only when that entry changes. */\nexport function useRowEntry<TMessage extends IMessage> (id: string): RowEntry<TMessage> | undefined {\n  const store = useContext(MessageRowStoreContext) as MessageRowStore<TMessage> | null\n  const subscribe = useCallback((listener: () => void) => store ? store.subscribe(id, listener) : () => {}, [store, id])\n  const getSnapshot = useCallback(() => store?.get(id), [store, id])\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n}\n\n/**\n * `messages`, or the previous array when it holds the same ids in the same order. The list is\n * then handed the same data when only a message's content changed, and does not touch its\n * cells at all - the store re-renders that one row.\n */\nexport function sameOrder<TMessage extends IMessage> (previous: TMessage[] | undefined, messages: TMessage[]) {\n  if (!previous || previous.length !== messages.length)\n    return messages\n  for (let i = 0; i < messages.length; i++)\n    if (previous[i]._id !== messages[i]._id)\n      return messages\n  return previous\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/MessagesContainer/styles.d.ts

@@ -1,11 +1,8 @@
 import { ChatTheme } from '../Theme';
-export declare const createThemedStyles: (theme: ChatTheme) => {
+export declare const createThemedStyles: (theme: ChatTheme) => Readonly<{
     root: {
         backgroundColor: string;
     };
-    scrollSurface: {
-        backgroundColor: string;
-    };
     scrollChevron: {
         width: number;
         height: number;
@@ -17,11 +14,24 @@ export declare const createThemedStyles: (theme: ChatTheme) => {
             rotate: string;
         }[];
     };
+    scrollToBottomBadge: {
+        backgroundColor: string;
+    };
+    scrollToBottomPressed: {
+        backgroundColor: string;
+    };
+    scrollToBottomBadgeText: {
+        color: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "500";
+        fontVariant: "tabular-nums"[];
+    };
     chevronColor: {
         color: string;
     };
-};
-declare const _default: {
+}>;
+declare const _default: Readonly<{
     contentContainerStyle: {
         flexGrow: number;
         justifyContent: "flex-start";
@@ -29,43 +39,39 @@ declare const _default: {
     messagesContainer: {
         paddingBottom: number;
     };
-    emptyChatContainer: {
-        transform: {
-            scaleY: number;
-        }[];
-    };
     scrollToBottom: {
         position: "absolute";
         right: number;
         bottom: number;
         zIndex: number;
     };
-    scrollToBottomContent: {
+    scrollToBottomBadge: {
+        position: "absolute";
+        top: number;
+        alignSelf: "center";
+        minWidth: number;
         height: number;
-        width: number;
         borderRadius: number;
-    } | {
-        shadowColor: string;
-        shadowOpacity: number;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowRadius: number;
-        elevation?: undefined;
+        paddingHorizontal: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    scrollToBottomContent: {
         height: number;
         width: number;
         borderRadius: number;
-    } | {
-        elevation: number;
-        shadowColor?: undefined;
-        shadowOpacity?: undefined;
-        shadowOffset?: undefined;
-        shadowRadius?: undefined;
-        height: number;
-        width: number;
+    };
+    scrollToBottomSurface: {
         borderRadius: number;
     };
-};
+    scrollToBottomPressed: {
+        borderRadius: number;
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+}>;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/lib/MessagesContainer/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/MessagesContainer/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,eAAO,MAAM,kBAAkB,GAAI,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;CAoBjD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF,wBAiCE"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/MessagesContainer/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,eAAO,MAAM,kBAAkB,GAAI,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCjD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF,wBAwCE"}

package/lib/MessagesContainer/styles.js

@@ -1,58 +1,79 @@
-import { Platform, StyleSheet } from 'react-native';
-import { Color } from '../Color';
-export const createThemedStyles = (theme) => StyleSheet.create({
-    root: {
-        backgroundColor: theme.colors.background,
-    },
-    scrollSurface: {
-        backgroundColor: theme.colors.surface,
-    },
-    scrollChevron: {
-        width: 10,
-        height: 10,
-        marginTop: -3,
-        borderColor: theme.colors.accent,
-        borderRightWidth: 2,
-        borderBottomWidth: 2,
-        transform: [{ rotate: '45deg' }],
-    },
-    // Carries the accent color for an overridden chevron icon.
-    chevronColor: {
-        color: theme.colors.accent,
-    },
+import { StyleSheet } from 'react-native';
+import { multiplyAlpha } from '../colorUtils';
+export const createThemedStyles = theme => StyleSheet.create({
+  // The chat's wallpaper (or `colors.background`) is painted behind the list by `Chat`.
+  root: {
+    backgroundColor: 'transparent'
+  },
+  scrollChevron: {
+    width: 10,
+    height: 10,
+    marginTop: -3,
+    borderColor: theme.colors.scrollToBottomIcon,
+    borderRightWidth: 2,
+    borderBottomWidth: 2,
+    transform: [{
+      rotate: '45deg'
+    }]
+  },
+  scrollToBottomBadge: {
+    backgroundColor: theme.colors.scrollToBottomBadge
+  },
+  scrollToBottomPressed: {
+    backgroundColor: multiplyAlpha(theme.colors.scrollToBottomIcon, 0.15)
+  },
+  // The unread counter: 13 bold white.
+  scrollToBottomBadgeText: {
+    color: theme.colors.scrollToBottomBadgeText,
+    fontSize: 13,
+    lineHeight: 16,
+    fontWeight: '500',
+    fontVariant: ['tabular-nums']
+  },
+  // Carries the icon color for an overridden chevron icon.
+  chevronColor: {
+    color: theme.colors.scrollToBottomIcon
+  }
 });
 export default StyleSheet.create({
-    contentContainerStyle: {
-        flexGrow: 1,
-        justifyContent: 'flex-start',
-    },
-    messagesContainer: {
-        paddingBottom: 10,
-    },
-    emptyChatContainer: {
-        transform: [{ scaleY: -1 }],
-    },
-    scrollToBottom: {
-        position: 'absolute',
-        right: 10,
-        bottom: 30,
-        zIndex: 999,
-    },
-    scrollToBottomContent: {
-        height: 40,
-        width: 40,
-        borderRadius: 20,
-        ...Platform.select({
-            ios: {
-                shadowColor: Color.black,
-                shadowOpacity: 0.12,
-                shadowOffset: { width: 0, height: 2 },
-                shadowRadius: 8,
-            },
-            android: {
-                elevation: 3,
-            },
-        }),
-    },
+  contentContainerStyle: {
+    flexGrow: 1,
+    justifyContent: 'flex-start'
+  },
+  messagesContainer: {
+    paddingBottom: 10
+  },
+  // The scroll-to-bottom button: a 44pt glass circle about 7 from the screen edge and 10
+  // above the composer island.
+  scrollToBottom: {
+    position: 'absolute',
+    right: 7,
+    bottom: 6,
+    zIndex: 999
+  },
+  // The counter is a 23pt pill centred on the circle's top edge.
+  scrollToBottomBadge: {
+    position: 'absolute',
+    top: -11.5,
+    alignSelf: 'center',
+    minWidth: 23,
+    height: 23,
+    borderRadius: 11.5,
+    paddingHorizontal: 6,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  scrollToBottomContent: {
+    height: 44,
+    width: 44,
+    borderRadius: 22
+  },
+  scrollToBottomSurface: {
+    borderRadius: 22
+  },
+  scrollToBottomPressed: {
+    ...StyleSheet.absoluteFill,
+    borderRadius: 22
+  }
 });
 //# sourceMappingURL=styles.js.map

package/lib/MessagesContainer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/MessagesContainer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC;IACxE,IAAI,EAAE;QACJ,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;KACzC;IACD,aAAa,EAAE;QACb,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;KACtC;IACD,aAAa,EAAE;QACb,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,SAAS,EAAE,CAAC,CAAC;QACb,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;QAChC,gBAAgB,EAAE,CAAC;QACnB,iBAAiB,EAAE,CAAC;QACpB,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;KACjC;IACD,2DAA2D;IAC3D,YAAY,EAAE;QACZ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;KAC3B;CACF,CAAC,CAAA;AAEF,eAAe,UAAU,CAAC,MAAM,CAAC;IAC/B,qBAAqB,EAAE;QACrB,QAAQ,EAAE,CAAC;QACX,cAAc,EAAE,YAAY;KAC7B;IACD,iBAAiB,EAAE;QACjB,aAAa,EAAE,EAAE;KAClB;IACD,kBAAkB,EAAE;QAClB,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC;KAC5B;IACD,cAAc,EAAE;QACd,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,GAAG;KACZ;IACD,qBAAqB,EAAE;QACrB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,YAAY,EAAE,EAAE;QAChB,GAAG,QAAQ,CAAC,MAAM,CAAC;YACjB,GAAG,EAAE;gBACH,WAAW,EAAE,KAAK,CAAC,KAAK;gBACxB,aAAa,EAAE,IAAI;gBACnB,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;gBACrC,YAAY,EAAE,CAAC;aAChB;YACD,OAAO,EAAE;gBACP,SAAS,EAAE,CAAC;aACb;SACF,CAAC;KACH;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","names":["StyleSheet","multiplyAlpha","createThemedStyles","theme","create","root","backgroundColor","scrollChevron","width","height","marginTop","borderColor","colors","scrollToBottomIcon","borderRightWidth","borderBottomWidth","transform","rotate","scrollToBottomBadge","scrollToBottomPressed","scrollToBottomBadgeText","color","fontSize","lineHeight","fontWeight","fontVariant","chevronColor","contentContainerStyle","flexGrow","justifyContent","messagesContainer","paddingBottom","scrollToBottom","position","right","bottom","zIndex","top","alignSelf","minWidth","borderRadius","paddingHorizontal","alignItems","scrollToBottomContent","scrollToBottomSurface","absoluteFill"],"sources":["../../src/MessagesContainer/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\nimport { multiplyAlpha } from '../colorUtils'\nimport { ChatTheme } from '../Theme'\n\nexport const createThemedStyles = (theme: ChatTheme) => StyleSheet.create({\n  // The chat's wallpaper (or `colors.background`) is painted behind the list by `Chat`.\n  root: {\n    backgroundColor: 'transparent',\n  },\n  scrollChevron: {\n    width: 10,\n    height: 10,\n    marginTop: -3,\n    borderColor: theme.colors.scrollToBottomIcon,\n    borderRightWidth: 2,\n    borderBottomWidth: 2,\n    transform: [{ rotate: '45deg' }],\n  },\n  scrollToBottomBadge: {\n    backgroundColor: theme.colors.scrollToBottomBadge,\n  },\n  scrollToBottomPressed: {\n    backgroundColor: multiplyAlpha(theme.colors.scrollToBottomIcon, 0.15),\n  },\n  // The unread counter: 13 bold white.\n  scrollToBottomBadgeText: {\n    color: theme.colors.scrollToBottomBadgeText,\n    fontSize: 13,\n    lineHeight: 16,\n    fontWeight: '500',\n    fontVariant: ['tabular-nums'],\n  },\n  // Carries the icon color for an overridden chevron icon.\n  chevronColor: {\n    color: theme.colors.scrollToBottomIcon,\n  },\n})\n\nexport default StyleSheet.create({\n  contentContainerStyle: {\n    flexGrow: 1,\n    justifyContent: 'flex-start',\n  },\n  messagesContainer: {\n    paddingBottom: 10,\n  },\n  // The scroll-to-bottom button: a 44pt glass circle about 7 from the screen edge and 10\n  // above the composer island.\n  scrollToBottom: {\n    position: 'absolute',\n    right: 7,\n    bottom: 6,\n    zIndex: 999,\n  },\n  // The counter is a 23pt pill centred on the circle's top edge.\n  scrollToBottomBadge: {\n    position: 'absolute',\n    top: -11.5,\n    alignSelf: 'center',\n    minWidth: 23,\n    height: 23,\n    borderRadius: 11.5,\n    paddingHorizontal: 6,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  scrollToBottomContent: {\n    height: 44,\n    width: 44,\n    borderRadius: 22,\n  },\n  scrollToBottomSurface: {\n    borderRadius: 22,\n  },\n  scrollToBottomPressed: {\n    ...StyleSheet.absoluteFill,\n    borderRadius: 22,\n  },\n})\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,aAAa,QAAQ,eAAe;AAG7C,OAAO,MAAMC,kBAAkB,GAAIC,KAAgB,IAAKH,UAAU,CAACI,MAAM,CAAC;EACxE;EACAC,IAAI,EAAE;IACJC,eAAe,EAAE;EACnB,CAAC;EACDC,aAAa,EAAE;IACbC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,SAAS,EAAE,CAAC,CAAC;IACbC,WAAW,EAAER,KAAK,CAACS,MAAM,CAACC,kBAAkB;IAC5CC,gBAAgB,EAAE,CAAC;IACnBC,iBAAiB,EAAE,CAAC;IACpBC,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAQ,CAAC;EACjC,CAAC;EACDC,mBAAmB,EAAE;IACnBZ,eAAe,EAAEH,KAAK,CAACS,MAAM,CAACM;EAChC,CAAC;EACDC,qBAAqB,EAAE;IACrBb,eAAe,EAAEL,aAAa,CAACE,KAAK,CAACS,MAAM,CAACC,kBAAkB,EAAE,IAAI;EACtE,CAAC;EACD;EACAO,uBAAuB,EAAE;IACvBC,KAAK,EAAElB,KAAK,CAACS,MAAM,CAACQ,uBAAuB;IAC3CE,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,EAAE;IACdC,UAAU,EAAE,KAAK;IACjBC,WAAW,EAAE,CAAC,cAAc;EAC9B,CAAC;EACD;EACAC,YAAY,EAAE;IACZL,KAAK,EAAElB,KAAK,CAACS,MAAM,CAACC;EACtB;AACF,CAAC,CAAC;AAEF,eAAeb,UAAU,CAACI,MAAM,CAAC;EAC/BuB,qBAAqB,EAAE;IACrBC,QAAQ,EAAE,CAAC;IACXC,cAAc,EAAE;EAClB,CAAC;EACDC,iBAAiB,EAAE;IACjBC,aAAa,EAAE;EACjB,CAAC;EACD;EACA;EACAC,cAAc,EAAE;IACdC,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE;EACV,CAAC;EACD;EACAlB,mBAAmB,EAAE;IACnBe,QAAQ,EAAE,UAAU;IACpBI,GAAG,EAAE,CAAC,IAAI;IACVC,SAAS,EAAE,QAAQ;IACnBC,QAAQ,EAAE,EAAE;IACZ9B,MAAM,EAAE,EAAE;IACV+B,YAAY,EAAE,IAAI;IAClBC,iBAAiB,EAAE,CAAC;IACpBC,UAAU,EAAE,QAAQ;IACpBb,cAAc,EAAE;EAClB,CAAC;EACDc,qBAAqB,EAAE;IACrBlC,MAAM,EAAE,EAAE;IACVD,KAAK,EAAE,EAAE;IACTgC,YAAY,EAAE;EAChB,CAAC;EACDI,qBAAqB,EAAE;IACrBJ,YAAY,EAAE;EAChB,CAAC;EACDrB,qBAAqB,EAAE;IACrB,GAAGnB,UAAU,CAAC6C,YAAY;IAC1BL,YAAY,EAAE;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/MessagesContainer/types.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from 'react';
-import { FlatListProps, StyleProp, ViewStyle } from 'react-native';
-import { FlatList } from 'react-native-gesture-handler';
-import { ScrollEvent } from 'react-native-reanimated';
+import { StyleProp, ViewStyle } from 'react-native';
+import type { LegendListRef } from '@legendapp/list/react-native';
+import type { AnimatedLegendListProps } from '@legendapp/list/reanimated';
 import { DayProps } from '../Day';
 import { LoadEarlierMessagesProps } from '../LoadEarlierMessages';
 import { MessageProps } from '../Message';
@@ -9,20 +9,13 @@ import { User, IMessage, Reply } from '../Models';
 import { ReactionsProps } from '../Reactions';
 import { ReplyProps } from '../Reply';
 import { TypingIndicatorProps } from '../TypingIndicator/types';
-/**
- * Typed AnimatedFlatList component that preserves generic type parameter.
- * Uses react-native-gesture-handler's FlatList which respects keyboardShouldPersistTaps.
- */
-export declare const AnimatedFlatList: <TMessage>(props: FlatListProps<TMessage> & {
-    ref?: RefObject<FlatList<TMessage>>;
-}) => React.ReactElement;
-export type AnimatedListProps<TMessage extends IMessage = IMessage> = Partial<Omit<FlatListProps<TMessage>, 'onScroll'> & {
-    onScroll?: (event: ScrollEvent) => void;
-}>;
-export type AnimatedList<TMessage> = FlatList<TMessage>;
+/** Extra props for the message list, a Legend List (`@legendapp/list`). */
+export type AnimatedListProps<TMessage extends IMessage = IMessage> = Partial<AnimatedLegendListProps<TMessage>>;
+/** The message list's ref: Legend List's (`scrollToEnd`, `scrollToKey`, `scrollToOffset`, `getState`...). */
+export type AnimatedList = LegendListRef;
 export interface MessagesContainerProps<TMessage extends IMessage = IMessage> extends Omit<TypingIndicatorProps, 'style'> {
-    /** Ref for the FlatList message container */
-    forwardRef?: RefObject<AnimatedList<TMessage>>;
+    /** Ref for the message list (a Legend List) */
+    forwardRef?: RefObject<AnimatedList | null>;
     /** Messages to display */
     messages?: TMessage[];
     /** Format to use for rendering dates; default is 'll' */
@@ -31,17 +24,8 @@ export interface MessagesContainerProps<TMessage extends IMessage = IMessage> ex
     dateFormatCalendar?: object;
     /** User sending the messages: { _id, name, avatar } */
     user?: User;
-    /** Additional props for FlatList */
+    /** Additional props for the message list, a [Legend List](https://legendapp.com/open-source/list/) */
     listProps?: AnimatedListProps<TMessage>;
-    /**
-     * Render messages with `@shopify/flash-list` (v2) instead of `FlatList`.
-     * Requires the optional `@shopify/flash-list` peer dependency and the New
-     * Architecture; falls back to `FlatList` with a warning when it is missing.
-     * FlashList recycles rows, which removes the `VirtualizedList: You have a
-     * large list that is slow to update` warning on long histories.
-     * @default false
-     */
-    isFlashListEnabled?: boolean;
     /** Reverses display order of messages; default is true */
     isInverted?: boolean;
     /**
@@ -54,19 +38,36 @@ export interface MessagesContainerProps<TMessage extends IMessage = IMessage> ex
      *   conversation starts under the header and re-anchors above the keyboard when the
      *   composer is focused.
      *
-     * Works with both `isInverted` settings. Ignored when `isFlashListEnabled` is set.
+     * Works with both `isInverted` settings.
      */
     isAlignedTop?: boolean | 'auto';
-    /** Enables the isScrollToBottomEnabled Component */
+    /** Show the scroll-to-bottom button once scrolled away from the newest message; default is true */
     isScrollToBottomEnabled?: boolean;
+    /**
+     * Count incoming messages that arrive while scrolled up, in a badge on the scroll-to-bottom
+     * button; default is true
+     */
+    isScrollToBottomBadgeEnabled?: boolean;
     /** Scroll to bottom wrapper style */
     scrollToBottomStyle?: StyleProp<ViewStyle>;
     /** Scroll to bottom content style */
     scrollToBottomContentStyle?: StyleProp<ViewStyle>;
     /** Distance from bottom before showing scroll to bottom button */
     scrollToBottomOffset?: number;
-    /** Custom component to render when messages are empty */
-    renderChatEmpty?: () => React.ReactNode;
+    /**
+     * What to show while there are no messages. `Chat` shows a greeting card by default
+     * ("No messages here yet..." and a 👋 that sends itself); pass your own render function to
+     * replace it, or `null` for nothing.
+     */
+    renderChatEmpty?: (() => React.ReactNode) | null;
+    /**
+     * The first message the user has not read yet. An "Unread Messages" bar is drawn above
+     * it, and the chat opens scrolled so the bar is at the top. Keep it fixed while the chat is
+     * open (the bar stays until you leave), e.g. from the unread count when it opened.
+     */
+    firstUnreadMessageId?: string | number | null;
+    /** Custom "Unread Messages" bar, or `null` to only scroll to the first unread message. */
+    renderUnreadSeparator?: (() => React.ReactNode) | null;
     /** Custom footer component on the ListView, e.g. 'User is typing...' */
     renderFooter?: (props: MessagesContainerProps<TMessage>) => React.ReactNode;
     /** Custom message container */
@@ -85,6 +86,8 @@ export interface MessagesContainerProps<TMessage extends IMessage = IMessage> ex
     loadEarlierMessagesProps?: LoadEarlierMessagesProps;
     /** Style for TypingIndicator component */
     typingIndicatorStyle?: StyleProp<ViewStyle>;
+    /** Whether incoming messages leave room for an avatar; the typing bubble lines up with them */
+    isAvatarVisible?: boolean;
     /** Enable animated day label that appears on scroll; default is true */
     isDayAnimationEnabled?: boolean;
     /** Reply functionality configuration */

package/lib/MessagesContainer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/MessagesContainer/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/MessagesContainer/types.ts"],"names":[],"mappings":"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"}

package/lib/MessagesContainer/types.js

@@ -1,10 +1,2 @@
-import { FlatList } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
-/** Animated FlatList created from react-native-gesture-handler's FlatList */
-const RNGHAnimatedFlatList = Animated.createAnimatedComponent(FlatList);
-/**
- * Typed AnimatedFlatList component that preserves generic type parameter.
- * Uses react-native-gesture-handler's FlatList which respects keyboardShouldPersistTaps.
- */
-export const AnimatedFlatList = RNGHAnimatedFlatList;
+export {};
 //# sourceMappingURL=types.js.map

package/lib/MessagesContainer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/MessagesContainer/types.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AACvD,OAAO,QAAyB,MAAM,yBAAyB,CAAA;AAU/D,6EAA6E;AAC7E,MAAM,oBAAoB,GAAG,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAA;AAEvE;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,oBAIT,CAAA"}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/MessagesContainer/types.ts"],"sourcesContent":["import { RefObject } from 'react'\nimport { StyleProp, ViewStyle } from 'react-native'\nimport type { LegendListRef } from '@legendapp/list/react-native'\nimport type { AnimatedLegendListProps } from '@legendapp/list/reanimated'\n\nimport { DayProps } from '../Day'\nimport { LoadEarlierMessagesProps } from '../LoadEarlierMessages'\nimport { MessageProps } from '../Message'\nimport { User, IMessage, Reply } from '../Models'\nimport { ReactionsProps } from '../Reactions'\nimport { ReplyProps } from '../Reply'\nimport { TypingIndicatorProps } from '../TypingIndicator/types'\n\n/** Extra props for the message list, a Legend List (`@legendapp/list`). */\nexport type AnimatedListProps<TMessage extends IMessage = IMessage> = Partial<AnimatedLegendListProps<TMessage>>\n\n/** The message list's ref: Legend List's (`scrollToEnd`, `scrollToKey`, `scrollToOffset`, `getState`...). */\nexport type AnimatedList = LegendListRef\n\nexport interface MessagesContainerProps<TMessage extends IMessage = IMessage>\n  extends Omit<TypingIndicatorProps, 'style'> {\n  /** Ref for the message list (a Legend List) */\n  forwardRef?: RefObject<AnimatedList | null>\n  /** Messages to display */\n  messages?: TMessage[]\n  /** Format to use for rendering dates; default is 'll' */\n  dateFormat?: string\n  /** Format to use for rendering relative times */\n  dateFormatCalendar?: object\n  /** User sending the messages: { _id, name, avatar } */\n  user?: User\n  /** Additional props for the message list, a [Legend List](https://legendapp.com/open-source/list/) */\n  listProps?: AnimatedListProps<TMessage>\n  /** Reverses display order of messages; default is true */\n  isInverted?: boolean\n  /**\n   * Where the bubbles sit while the whole conversation fits on screen. Once it is taller\n   * than the list this has no effect - the messages fill it either way.\n   *\n   * - `false` (default) - bottom, the usual chat look.\n   * - `true` - top.\n   * - `'auto'` - top while the keyboard is closed, bottom while it is open, so a short\n   *   conversation starts under the header and re-anchors above the keyboard when the\n   *   composer is focused.\n   *\n   * Works with both `isInverted` settings.\n   */\n  isAlignedTop?: boolean | 'auto'\n  /** Show the scroll-to-bottom button once scrolled away from the newest message; default is true */\n  isScrollToBottomEnabled?: boolean\n  /**\n   * Count incoming messages that arrive while scrolled up, in a badge on the scroll-to-bottom\n   * button; default is true\n   */\n  isScrollToBottomBadgeEnabled?: boolean\n  /** Scroll to bottom wrapper style */\n  scrollToBottomStyle?: StyleProp<ViewStyle>\n  /** Scroll to bottom content style */\n  scrollToBottomContentStyle?: StyleProp<ViewStyle>\n  /** Distance from bottom before showing scroll to bottom button */\n  scrollToBottomOffset?: number\n  /**\n   * What to show while there are no messages. `Chat` shows a greeting card by default\n   * (\"No messages here yet...\" and a 👋 that sends itself); pass your own render function to\n   * replace it, or `null` for nothing.\n   */\n  renderChatEmpty?: (() => React.ReactNode) | null\n  /**\n   * The first message the user has not read yet. An \"Unread Messages\" bar is drawn above\n   * it, and the chat opens scrolled so the bar is at the top. Keep it fixed while the chat is\n   * open (the bar stays until you leave), e.g. from the unread count when it opened.\n   */\n  firstUnreadMessageId?: string | number | null\n  /** Custom \"Unread Messages\" bar, or `null` to only scroll to the first unread message. */\n  renderUnreadSeparator?: (() => React.ReactNode) | null\n  /** Custom footer component on the ListView, e.g. 'User is typing...' */\n  renderFooter?: (props: MessagesContainerProps<TMessage>) => React.ReactNode\n  /** Custom message container */\n  renderMessage?: (props: MessageProps<TMessage>) => React.ReactElement\n  /** Custom day above a message */\n  renderDay?: (props: DayProps) => React.ReactNode\n  /** Custom \"Load earlier messages\" button */\n  renderLoadEarlier?: (props: LoadEarlierMessagesProps) => React.ReactNode\n  /** Custom typing indicator */\n  renderTypingIndicator?: () => React.ReactNode\n  /** Scroll to bottom custom component */\n  scrollToBottomComponent?: () => React.ReactNode\n  /** Callback when quick reply is sent */\n  onQuickReply?: (replies: Reply[]) => void\n  /** Props to pass to the LoadEarlierMessages component. The LoadEarlierMessages button is only visible when isAvailable is true. Includes isAvailable (controls button visibility), isInfiniteScrollEnabled (infinite scroll up when reach the top of messages container, automatically call onPress function if it exists - not yet supported for web), onPress (callback when button is pressed), isLoading (display loading indicator), label (override default \"Load earlier messages\" text), and styling props (containerStyle, wrapperStyle, textStyle, activityIndicatorStyle, activityIndicatorColor, activityIndicatorSize). */\n  loadEarlierMessagesProps?: LoadEarlierMessagesProps\n  /** Style for TypingIndicator component */\n  typingIndicatorStyle?: StyleProp<ViewStyle>\n  /** Whether incoming messages leave room for an avatar; the typing bubble lines up with them */\n  isAvatarVisible?: boolean\n  /** Enable animated day label that appears on scroll; default is true */\n  isDayAnimationEnabled?: boolean\n  /** Reply functionality configuration */\n  reply?: ReplyProps<TMessage>\n  /** Emoji reactions configuration */\n  reactions?: ReactionsProps<TMessage>\n}\n\nexport interface State {\n  showScrollBottom: boolean\n  hasScrolled: boolean\n}\n\ninterface ViewLayout {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\n// `dayKey` is the local calendar day as a sortable integer (YYYYMMDD-ish). It is\n// computed once, on the JS side, where a Date is already in hand - the worklet that\n// compares entries runs on every cell layout, and constructing Dates there to compare\n// them allocated two objects per entry per layout.\nexport type DaysPositions = { [key: string]: ViewLayout & { createdAt: number, dayKey: number } }\n"],"mappings":"","ignoreList":[]}

package/lib/MessagesContainer/useCellLayouts.d.ts

@@ -0,0 +1,17 @@
+import { SharedValue } from 'react-native-reanimated';
+import { ListState } from './listState';
+/**
+ * Where each screen-gradient bubble's row sits, for `BubbleGradientContext`, fed by the list's
+ * position listeners.
+ */
+export declare function useCellLayouts(listState: () => ListState | undefined, isListLaidOut: boolean): {
+    cellLayout: (id: string) => SharedValue<{
+        y: number;
+        height: number;
+    } | undefined>;
+    onItemSizeChanged: ({ itemKey, size }: {
+        itemKey: string;
+        size: number;
+    }) => void;
+};
+//# sourceMappingURL=useCellLayouts.d.ts.map

package/lib/MessagesContainer/useCellLayouts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCellLayouts.d.ts","sourceRoot":"","sources":["../../src/MessagesContainer/useCellLayouts.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC;;;GAGG;AACH,wBAAgB,cAAc,CAAE,SAAS,EAAE,MAAM,SAAS,GAAG,SAAS,EAAE,aAAa,EAAE,OAAO;qBAqBxD,MAAM;WAd6B,MAAM;gBAAU,MAAM;;2CAoCnC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE;EAQ5F"}