@poolse/react-native 2.0.12 → 2.1.0

package/dist/index.js

@@ -1,12 +1,18 @@
-import { useUser, useMe, useConversations, useAttachmentUpload, useConversation, useMembers, usePresence, useMessages, useTyping, useReactions, useThread, useAttachmentUrl, usePoolse } from '@poolse/react';
-import { createContext, forwardRef, useRef, useState, useImperativeHandle, useEffect, useMemo, useCallback, useContext } from 'react';
-import { StyleSheet, View, Pressable, TextInput, Text, useWindowDimensions, Animated, Easing, PanResponder, Image, ScrollView, ActivityIndicator, FlatList, KeyboardAvoidingView, Platform, Modal, Dimensions, AppState } from 'react-native';
+import { useUser, useMe, useConversations, useAttachmentUpload, useConversation, useMembers, usePresence, useMessages, useTyping, useRealtimeStatus, computeGroupPosition, formatDayLabel, useReactions, sameDay, useThread, useAttachmentUrl, usePoolse } from '@poolse/react';
+import { createContext, forwardRef, useRef, useState, useEffect, useImperativeHandle, useMemo, useCallback, useContext, createElement } from 'react';
+import { StyleSheet, Platform, Keyboard, View, Pressable, TextInput, Text, useWindowDimensions, Animated, Easing, PanResponder, Image, ScrollView, ActivityIndicator, FlatList, AppState, KeyboardAvoidingView, Modal, Linking, Dimensions } from 'react-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { SvgXml, Svg, Path, Circle, G } from 'react-native-svg';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
+import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';
 
-// src/PoolseInbox.tsx
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/theme/default.ts
 var lightColors = {
@@ -1160,24 +1166,84 @@ async function uriToBlob(uri) {
   }
   return res.blob();
 }
+var COMPRESSION_LONG_SIDE_PX = 1600;
+var COMPRESSION_QUALITY = 0.75;
+function getImageSize(uri) {
+  return new Promise((resolve, reject) => {
+    Image.getSize(uri, (width, height) => resolve({ width, height }), reject);
+  });
+}
+async function compressImage({
+  uri,
+  width,
+  height,
+  filename
+}) {
+  let w = width;
+  let h = height;
+  if (!w || !h) {
+    try {
+      const size = await getImageSize(uri);
+      w = size.width;
+      h = size.height;
+    } catch {
+      w = 0;
+      h = 0;
+    }
+  }
+  const longSide = Math.max(w ?? 0, h ?? 0);
+  const scale = longSide > COMPRESSION_LONG_SIDE_PX ? COMPRESSION_LONG_SIDE_PX / longSide : 1;
+  const actions = scale < 1 && w && h ? [{ resize: { width: Math.round(w * scale), height: Math.round(h * scale) } }] : [];
+  const result = await manipulateAsync(uri, actions, {
+    compress: COMPRESSION_QUALITY,
+    format: SaveFormat.WEBP
+  });
+  const blob = await uriToBlob(result.uri);
+  const base = (filename ?? `image-${Date.now()}`).replace(/\.[^.]+$/, "");
+  return {
+    blob,
+    contentType: "image/webp",
+    filename: `${base}.webp`
+  };
+}
 async function defaultAdapter(kind) {
   if (kind === "image") {
     const res2 = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: "images",
-      quality: 0.85
+      // Quality 1 — picker hands back the source as-is and we do the
+      // compression ourselves below. Letting the picker re-encode
+      // first just chains two lossy passes.
+      quality: 1
     });
     if (res2.canceled) return [];
     return Promise.all(
       res2.assets.map(async (asset) => {
-        const blob = await uriToBlob(asset.uri);
-        const contentType = asset.mimeType ?? blob.type ?? "image/jpeg";
-        return {
-          body: blob,
-          contentType,
-          byteSize: asset.fileSize ?? blob.size,
-          filename: asset.fileName ?? `image-${Date.now()}.jpg`,
-          _previewUri: asset.uri
-        };
+        try {
+          const compressed = await compressImage({
+            uri: asset.uri,
+            width: asset.width,
+            height: asset.height,
+            filename: asset.fileName ?? `image-${Date.now()}`
+          });
+          return {
+            body: compressed.blob,
+            contentType: compressed.contentType,
+            byteSize: compressed.blob.size,
+            filename: compressed.filename,
+            _previewUri: asset.uri
+          };
+        } catch (err) {
+          console.warn("[poolse/picker] image compression failed, sending original:", err);
+          const blob = await uriToBlob(asset.uri);
+          const contentType = asset.mimeType ?? blob.type ?? "image/jpeg";
+          return {
+            body: blob,
+            contentType,
+            byteSize: asset.fileSize ?? blob.size,
+            filename: asset.fileName ?? `image-${Date.now()}.jpg`,
+            _previewUri: asset.uri
+          };
+        }
       })
     );
   }
@@ -1188,6 +1254,24 @@ async function defaultAdapter(kind) {
   if (res.canceled) return [];
   return Promise.all(
     res.assets.map(async (asset) => {
+      const isImage = (asset.mimeType ?? "").startsWith("image/");
+      if (isImage) {
+        try {
+          const compressed = await compressImage({
+            uri: asset.uri,
+            filename: asset.name
+          });
+          return {
+            body: compressed.blob,
+            contentType: compressed.contentType,
+            byteSize: compressed.blob.size,
+            filename: compressed.filename,
+            _previewUri: asset.uri
+          };
+        } catch (err) {
+          console.warn("[poolse/picker] image compression failed, sending original:", err);
+        }
+      }
       const blob = await uriToBlob(asset.uri);
       const contentType = asset.mimeType ?? blob.type ?? "application/octet-stream";
       return {
@@ -1228,6 +1312,51 @@ var styles6 = StyleSheet.create({
     fontWeight: "500"
   }
 });
+function DaySeparator({ label }) {
+  const theme = usePoolseTheme();
+  return /* @__PURE__ */ jsx(View, { style: styles7.wrap, children: /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        styles7.chip,
+        {
+          backgroundColor: theme.colors.surface2,
+          borderColor: theme.colors.border
+        }
+      ],
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            styles7.label,
+            {
+              color: theme.colors.ink2,
+              fontFamily: theme.type.fontBody
+            }
+          ],
+          children: label
+        }
+      )
+    }
+  ) });
+}
+var styles7 = StyleSheet.create({
+  wrap: {
+    alignItems: "center",
+    marginVertical: 8
+  },
+  chip: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 999,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "600",
+    letterSpacing: 0.3
+  }
+});
 function UploadQueueStrip() {
   const theme = usePoolseTheme();
   const upload = useSharedUpload();
@@ -1238,8 +1367,8 @@ function UploadQueueStrip() {
     {
       horizontal: true,
       showsHorizontalScrollIndicator: false,
-      contentContainerStyle: styles7.scroll,
-      style: [styles7.scrollStyle, { marginBottom: 8 }],
+      contentContainerStyle: styles8.scroll,
+      style: [styles8.scrollStyle, { marginBottom: 8 }],
       children: upload.queue.map((item) => {
         const isError = item.status === "error";
         const isUploading = item.status === "uploading" || item.status === "pending";
@@ -1250,7 +1379,7 @@ function UploadQueueStrip() {
           if (item.status === "ready" || isError) upload.remove(item.localId);
           else upload.cancel(item.localId);
         };
-        return /* @__PURE__ */ jsxs(View, { style: styles7.tileWrap, children: [
+        return /* @__PURE__ */ jsxs(View, { style: styles8.tileWrap, children: [
           isImage && previewUri ? /* @__PURE__ */ jsx(ImageTile, { uri: previewUri, uploading: isUploading, error: isError }) : /* @__PURE__ */ jsx(
             FileTile,
             {
@@ -1265,13 +1394,13 @@ function UploadQueueStrip() {
             {
               onPress: handleClose,
               hitSlop: 8,
-              style: [styles7.closeBtn, { backgroundColor: theme.colors.ink }],
+              style: [styles8.closeBtn, { backgroundColor: theme.colors.ink }],
               accessibilityLabel: isError ? "Remove failed upload" : "Cancel upload",
               children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 11, color: theme.colors.onBrand })
             }
           ) : null,
-          isUploading ? /* @__PURE__ */ jsx(View, { style: styles7.progressOverlay, children: /* @__PURE__ */ jsx(View, { style: [styles7.spinner, { borderColor: theme.colors.onBrand }] }) }) : null,
-          isError ? /* @__PURE__ */ jsx(View, { style: [styles7.errorOverlay, { backgroundColor: "rgba(229,72,77,0.85)" }], children: /* @__PURE__ */ jsx(Text, { style: [styles7.errorText, { color: "#fff" }], children: "Failed" }) }) : null
+          isUploading ? /* @__PURE__ */ jsx(View, { style: styles8.progressOverlay, children: /* @__PURE__ */ jsx(View, { style: [styles8.spinner, { borderColor: theme.colors.onBrand }] }) }) : null,
+          isError ? /* @__PURE__ */ jsx(View, { style: [styles8.errorOverlay, { backgroundColor: "rgba(229,72,77,0.85)" }], children: /* @__PURE__ */ jsx(Text, { style: [styles8.errorText, { color: "#fff" }], children: "Failed" }) }) : null
         ] }, item.localId);
       })
     }
@@ -1284,7 +1413,7 @@ function ImageTile({ uri, uploading, error }) {
     {
       source: { uri },
       style: [
-        styles7.imageTile,
+        styles8.imageTile,
         {
           backgroundColor: theme.colors.surface2,
           borderColor: error ? theme.colors.error : "transparent",
@@ -1306,24 +1435,24 @@ function FileTile({
     View,
     {
       style: [
-        styles7.fileTile,
+        styles8.fileTile,
         {
           backgroundColor: theme.colors.surface2,
           borderColor: error ? theme.colors.error : uploading ? theme.colors.brand : theme.colors.border
         }
       ],
       children: [
-        /* @__PURE__ */ jsx(View, { style: [styles7.fileIconBox, { backgroundColor: theme.colors.brandSoft }], children: /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 18, color: theme.colors.brand }) }),
-        /* @__PURE__ */ jsxs(View, { style: styles7.fileInfo, children: [
+        /* @__PURE__ */ jsx(View, { style: [styles8.fileIconBox, { backgroundColor: theme.colors.brandSoft }], children: /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 18, color: theme.colors.brand }) }),
+        /* @__PURE__ */ jsxs(View, { style: styles8.fileInfo, children: [
           /* @__PURE__ */ jsx(
             Text,
             {
-              style: [styles7.fileName, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+              style: [styles8.fileName, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
               numberOfLines: 1,
               children: filename
             }
           ),
-          /* @__PURE__ */ jsx(Text, { style: [styles7.fileSize, { color: theme.colors.ink3 }], children: formatBytes(size) })
+          /* @__PURE__ */ jsx(Text, { style: [styles8.fileSize, { color: theme.colors.ink3 }], children: formatBytes(size) })
         ] })
       ]
     }
@@ -1337,7 +1466,7 @@ function formatBytes(n) {
   return `${(n / 1024 / 1024 / 1024).toFixed(1)} GB`;
 }
 var TILE = 64;
-var styles7 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   scrollStyle: {
     overflow: "visible"
   },
@@ -1437,6 +1566,22 @@ var styles7 = StyleSheet.create({
     fontWeight: "700"
   }
 });
+var FALLBACK = {
+  top: Platform.OS === "ios" ? 50 : 24,
+  bottom: Platform.OS === "ios" ? 34 : 0,
+  left: 0,
+  right: 0
+};
+var realHook = null;
+try {
+  const mod = __require("react-native-safe-area-context");
+  if (mod && typeof mod.useSafeAreaInsets === "function") {
+    realHook = mod.useSafeAreaInsets;
+  }
+} catch {
+}
+var useFallback = () => FALLBACK;
+var useSafeInsets = realHook ?? useFallback;
 var MessageComposer = forwardRef(
   function MessageComposer2({
     onSend,
@@ -1448,13 +1593,32 @@ var MessageComposer = forwardRef(
     labelFor,
     attachments = true,
     onAttachPress,
-    keyboardOffset: _keyboardOffset = 0
+    keyboardOffset: _keyboardOffset = 0,
+    editingMessage = null,
+    onCancelEdit,
+    onSaveEdit
   }, ref) {
     const theme = usePoolseTheme();
     const inputRef = useRef(null);
     const [value, setValue] = useState("");
     const [sending, setSending] = useState(false);
+    const [keyboardOpen, setKeyboardOpen] = useState(false);
     const upload = useSharedUpload();
+    const insets = useSafeInsets();
+    useEffect(() => {
+      const show = Keyboard.addListener(
+        Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
+        () => setKeyboardOpen(true)
+      );
+      const hide = Keyboard.addListener(
+        Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
+        () => setKeyboardOpen(false)
+      );
+      return () => {
+        show.remove();
+        hide.remove();
+      };
+    }, []);
     useImperativeHandle(
       ref,
       () => ({
@@ -1473,36 +1637,65 @@ var MessageComposer = forwardRef(
     const isUploading = upload.queue.some(
       (item) => item.status === "uploading" || item.status === "pending"
     );
-    const submitDisabled = disabled || sending || isUploading || value.trim().length === 0 && readyAttachmentIds.length === 0;
+    const previousDraftRef = useRef(null);
+    const editingIdRef = useRef(null);
+    useEffect(() => {
+      const id = editingMessage?.id ?? null;
+      if (id === editingIdRef.current) return;
+      if (id) {
+        previousDraftRef.current = value;
+        setValue(editingMessage?.body ?? "");
+        inputRef.current?.focus();
+      } else {
+        setValue(previousDraftRef.current ?? "");
+        previousDraftRef.current = null;
+      }
+      editingIdRef.current = id;
+    }, [editingMessage?.id, editingMessage?.body]);
+    const isEditing = !!editingMessage;
+    const editChanged = isEditing && value.trim() !== (editingMessage?.body?.trim() ?? "");
+    const submitDisabled = disabled || sending || isUploading || value.trim().length === 0 || (isEditing ? !editChanged : value.trim().length === 0 && readyAttachmentIds.length === 0);
     const handleSend = async () => {
       if (submitDisabled) return;
       const body = value.trim();
-      const replyId = replyingTo?.id;
-      const attachmentIds = readyAttachmentIds;
-      setValue("");
-      upload.reset();
       setSending(true);
       try {
-        await onSend(body, {
-          ...replyId ? { quoted_message_id: replyId } : {},
-          ...attachmentIds.length > 0 ? { attachment_ids: attachmentIds } : {}
-        });
+        if (isEditing && onSaveEdit) {
+          await onSaveEdit(body);
+        } else {
+          const replyId = replyingTo?.id;
+          const attachmentIds = readyAttachmentIds;
+          setValue("");
+          upload.reset();
+          await onSend(body, {
+            ...replyId ? { quoted_message_id: replyId } : {},
+            ...attachmentIds.length > 0 ? { attachment_ids: attachmentIds } : {}
+          });
+        }
       } finally {
         setSending(false);
       }
     };
+    const paddingBottom = keyboardOpen ? 10 : Math.max(10, insets.bottom);
     return /* @__PURE__ */ jsxs(
       View,
       {
         style: [
-          styles8.wrap,
+          styles9.wrap,
           {
             backgroundColor: theme.colors.surface,
-            borderTopColor: theme.colors.border
+            borderTopColor: theme.colors.border,
+            paddingBottom
           }
         ],
         children: [
-          replyingTo ? /* @__PURE__ */ jsx(
+          isEditing ? /* @__PURE__ */ jsx(
+            EditChip,
+            {
+              message: editingMessage,
+              ...onCancelEdit ? { onCancel: onCancelEdit } : {}
+            }
+          ) : replyingTo ? /* @__PURE__ */ jsx(
             ReplyChip,
             {
               message: replyingTo,
@@ -1510,14 +1703,14 @@ var MessageComposer = forwardRef(
               ...onCancelReply ? { onCancel: onCancelReply } : {}
             }
           ) : null,
-          attachments ? /* @__PURE__ */ jsx(UploadQueueStrip, {}) : null,
-          /* @__PURE__ */ jsxs(View, { style: styles8.row, children: [
+          attachments && !isEditing ? /* @__PURE__ */ jsx(UploadQueueStrip, {}) : null,
+          /* @__PURE__ */ jsxs(View, { style: styles9.row, children: [
             attachments && onAttachPress ? /* @__PURE__ */ jsx(
               Pressable,
               {
                 onPress: onAttachPress,
                 hitSlop: 8,
-                style: styles8.iconBtn,
+                style: styles9.iconBtn,
                 accessibilityLabel: "Attach file",
                 children: /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 22, color: theme.colors.ink2 })
               }
@@ -1536,7 +1729,7 @@ var MessageComposer = forwardRef(
                 multiline: true,
                 editable: !disabled,
                 style: [
-                  styles8.input,
+                  styles9.input,
                   {
                     color: theme.colors.ink,
                     backgroundColor: theme.colors.surface2,
@@ -1553,7 +1746,7 @@ var MessageComposer = forwardRef(
                 onPress: handleSend,
                 disabled: submitDisabled,
                 style: [
-                  styles8.sendBtn,
+                  styles9.sendBtn,
                   {
                     backgroundColor: submitDisabled ? theme.colors.ink3 : theme.colors.brand,
                     opacity: submitDisabled ? 0.6 : 1
@@ -1569,6 +1762,28 @@ var MessageComposer = forwardRef(
     );
   }
 );
+function EditChip({ message, onCancel }) {
+  const theme = usePoolseTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles9.replyChip,
+        {
+          backgroundColor: theme.colors.surface2,
+          borderLeftColor: theme.colors.brand
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles9.replyName, { color: theme.colors.brand }], children: "Editing message" }),
+          /* @__PURE__ */ jsx(Text, { style: [styles9.replyBody, { color: theme.colors.ink2 }], numberOfLines: 1, children: message.body ?? "\u2026" })
+        ] }),
+        onCancel ? /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 8, style: styles9.replyCancel, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
+      ]
+    }
+  );
+}
 function ReplyChip({
   message,
   labelFor,
@@ -1581,7 +1796,7 @@ function ReplyChip({
     View,
     {
       style: [
-        styles8.replyChip,
+        styles9.replyChip,
         {
           backgroundColor: theme.colors.surface2,
           borderLeftColor: theme.colors.brand
@@ -1589,27 +1804,26 @@ function ReplyChip({
       ],
       children: [
         /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsxs(Text, { style: [styles8.replyName, { color: theme.colors.brand }], children: [
+          /* @__PURE__ */ jsxs(Text, { style: [styles9.replyName, { color: theme.colors.brand }], children: [
             "Replying to ",
             senderName
           ] }),
-          /* @__PURE__ */ jsx(Text, { style: [styles8.replyBody, { color: theme.colors.ink2 }], numberOfLines: 1, children: message.body ?? "\u2026" })
+          /* @__PURE__ */ jsx(Text, { style: [styles9.replyBody, { color: theme.colors.ink2 }], numberOfLines: 1, children: message.body ?? "\u2026" })
         ] }),
-        onCancel ? /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 8, style: styles8.replyCancel, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
+        onCancel ? /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 8, style: styles9.replyCancel, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
       ]
     }
   );
 }
-var styles8 = StyleSheet.create({
+var styles9 = StyleSheet.create({
   wrap: {
     borderTopWidth: StyleSheet.hairlineWidth,
     paddingTop: 8,
-    paddingBottom: 10,
     paddingHorizontal: 12
-    // Note: no safe-area inset here on purpose. Wrap your chat
-    // surface in <SafeAreaView> (or <SafeAreaView edges={['bottom']}>)
-    // at the app root so the home-indicator clearance is handled
-    // once. Doing it here too produces double padding.
+    // paddingBottom is applied inline — it follows the keyboard state
+    // (10 px while open, max(10, safeBottomInset) while closed) so the
+    // send/attach buttons stay clear of the home indicator without
+    // double-padding above the keyboard.
   },
   row: {
     flexDirection: "row",
@@ -1698,11 +1912,11 @@ function MentionInput({ conversationId, onSend, ...composerProps }) {
         transparent: true,
         animationType: "slide",
         onRequestClose: () => setPickerOpen(false),
-        children: /* @__PURE__ */ jsx(Pressable, { style: styles9.backdrop, onPress: () => setPickerOpen(false), children: /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx(Pressable, { style: styles10.backdrop, onPress: () => setPickerOpen(false), children: /* @__PURE__ */ jsxs(
           View,
           {
             style: [
-              styles9.sheet,
+              styles10.sheet,
               {
                 backgroundColor: theme.colors.surface,
                 borderTopLeftRadius: theme.radii.lg,
@@ -1713,7 +1927,7 @@ function MentionInput({ conversationId, onSend, ...composerProps }) {
               /* @__PURE__ */ jsx(
                 Text,
                 {
-                  style: [styles9.title, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+                  style: [styles10.title, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
                   children: "Mention a member"
                 }
               ),
@@ -1744,12 +1958,12 @@ function MentionInput({ conversationId, onSend, ...composerProps }) {
 }
 function MentionRow({ member, onPress }) {
   const theme = usePoolseTheme();
-  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: styles9.row, children: [
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: styles10.row, children: [
     /* @__PURE__ */ jsx(Avatar, { src: null, name: member.external_id, seed: member.external_id, size: "sm" }),
-    /* @__PURE__ */ jsx(Text, { style: [styles9.rowText, { color: theme.colors.ink, fontFamily: theme.type.fontBody }], children: member.external_id })
+    /* @__PURE__ */ jsx(Text, { style: [styles10.rowText, { color: theme.colors.ink, fontFamily: theme.type.fontBody }], children: member.external_id })
   ] });
 }
-var styles9 = StyleSheet.create({
+var styles10 = StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.35)",
@@ -1776,138 +1990,134 @@ var styles9 = StyleSheet.create({
     fontSize: 14
   }
 });
+var AT_BOTTOM_THRESHOLD = 32;
 function MessageList({
   messages,
+  items,
   loading = false,
   hasMore = false,
   onLoadMore,
   renderItem,
   ListHeader = null,
   ListFooter = null,
-  emptyState
+  emptyState,
+  meId = null
 }) {
   const theme = usePoolseTheme();
-  const data = [...messages].reverse();
+  const flatListRef = useRef(null);
+  const [atBottom, setAtBottom] = useState(true);
+  const [newCount, setNewCount] = useState(0);
+  const lastTailIdRef = useRef(null);
+  const sourceItems = items ?? messages.map((msg) => ({ kind: "msg", msg }));
+  const data = [...sourceItems].reverse();
+  useEffect(() => {
+    const tail = messages[messages.length - 1];
+    if (!tail) return;
+    const tailId = tail.id;
+    if (tailId === lastTailIdRef.current) return;
+    const isFirstSet = lastTailIdRef.current === null;
+    lastTailIdRef.current = tailId;
+    if (atBottom || isFirstSet) {
+      setNewCount(0);
+      return;
+    }
+    if (meId !== null && tail.sender_id === meId) return;
+    setNewCount((n) => n + 1);
+  }, [messages, atBottom, meId]);
+  const handleScroll = useCallback((e) => {
+    const y = e.nativeEvent.contentOffset.y;
+    const next = y <= AT_BOTTOM_THRESHOLD;
+    setAtBottom((prev) => prev === next ? prev : next);
+    if (next) setNewCount(0);
+  }, []);
+  const scrollToBottom = useCallback(() => {
+    flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+    setNewCount(0);
+  }, []);
   const handleRender = useCallback(
-    ({ item, index }) => renderItem(item, messages.length - 1 - index),
-    [renderItem, messages.length]
+    ({ item, index }) => {
+      if (item.kind === "separator") return item.node;
+      const sourceIndex = data.length - 1 - index;
+      return renderItem(item.msg, sourceIndex);
+    },
+    [renderItem, data.length]
   );
   if (loading && messages.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles10.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
+    return /* @__PURE__ */ jsx(View, { style: [styles11.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
   }
   if (messages.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles10.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState }) : emptyState ?? null });
+    return /* @__PURE__ */ jsx(View, { style: [styles11.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState }) : emptyState ?? null });
   }
-  return /* @__PURE__ */ jsx(
-    FlatList,
-    {
-      inverted: true,
-      data,
-      keyExtractor: (item) => item.id,
-      renderItem: handleRender,
-      onEndReached: hasMore ? onLoadMore : void 0,
-      onEndReachedThreshold: 0.3,
-      ListHeaderComponent: ListHeader,
-      ListFooterComponent: /* @__PURE__ */ jsxs(View, { children: [
-        hasMore && loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.ink3, style: { marginVertical: 8 } }) : null,
-        ListFooter
-      ] }),
-      style: { backgroundColor: theme.colors.paper },
-      contentContainerStyle: { paddingVertical: 8 }
-    }
-  );
+  return /* @__PURE__ */ jsxs(View, { style: styles11.root, children: [
+    /* @__PURE__ */ jsx(
+      FlatList,
+      {
+        ref: flatListRef,
+        inverted: true,
+        data,
+        keyExtractor: (item) => item.kind === "msg" ? item.msg.id : item.id,
+        renderItem: handleRender,
+        onEndReached: hasMore ? onLoadMore : void 0,
+        onEndReachedThreshold: 0.3,
+        onScroll: handleScroll,
+        scrollEventThrottle: 32,
+        ListHeaderComponent: ListHeader,
+        ListFooterComponent: /* @__PURE__ */ jsxs(View, { children: [
+          hasMore && loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.ink3, style: { marginVertical: 8 } }) : null,
+          ListFooter
+        ] }),
+        style: { backgroundColor: theme.colors.paper },
+        contentContainerStyle: { paddingVertical: 8 }
+      }
+    ),
+    !atBottom && newCount > 0 ? /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        onPress: scrollToBottom,
+        style: [
+          styles11.jumpButton,
+          {
+            backgroundColor: theme.colors.brand
+          },
+          theme.shadows.sm
+        ],
+        accessibilityLabel: `${newCount} new ${newCount === 1 ? "message" : "messages"}, jump to latest`,
+        children: [
+          /* @__PURE__ */ jsx(PoolseIcon, { name: "chevron-down", size: 14, color: theme.colors.onBrand }),
+          /* @__PURE__ */ jsxs(Text, { style: [styles11.jumpText, { color: theme.colors.onBrand }], children: [
+            newCount,
+            " new ",
+            newCount === 1 ? "message" : "messages"
+          ] })
+        ]
+      }
+    ) : null
+  ] });
 }
-var styles10 = StyleSheet.create({
+var styles11 = StyleSheet.create({
+  root: {
+    flex: 1
+  },
   placeholder: {
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
     padding: 24
-  }
-});
-function EditableMessageBubble({
-  message,
-  currentUserId,
-  onCancel,
-  onSave
-}) {
-  const theme = usePoolseTheme();
-  const isSelf = currentUserId !== null && message.sender_id === currentUserId;
-  const [value, setValue] = useState(message.body ?? "");
-  const [saving, setSaving] = useState(false);
-  const submit = async () => {
-    if (saving || !value.trim()) return;
-    setSaving(true);
-    try {
-      await onSave(value.trim());
-    } finally {
-      setSaving(false);
-    }
-  };
-  const bg = isSelf ? theme.colors.selfBubble : theme.colors.otherBubble;
-  const ink = isSelf ? theme.colors.selfBubbleText : theme.colors.otherBubbleText;
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      style: [
-        styles11.wrap,
-        {
-          alignSelf: isSelf ? "flex-end" : "flex-start",
-          maxWidth: "80%"
-        }
-      ],
-      children: /* @__PURE__ */ jsxs(
-        View,
-        {
-          style: [
-            styles11.bubble,
-            {
-              backgroundColor: bg,
-              borderRadius: theme.radii.bubble,
-              paddingHorizontal: theme.spacing.md,
-              paddingVertical: theme.spacing.sm
-            },
-            theme.shadows.sm
-          ],
-          children: [
-            /* @__PURE__ */ jsx(
-              TextInput,
-              {
-                value,
-                onChangeText: setValue,
-                multiline: true,
-                autoFocus: true,
-                style: {
-                  color: ink,
-                  fontFamily: theme.type.fontBody,
-                  fontSize: theme.type.bodySize,
-                  minHeight: 24
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxs(View, { style: styles11.actions, children: [
-              /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 6, children: /* @__PURE__ */ jsx(Text, { style: [styles11.btn, { color: ink, opacity: 0.7 }], children: "Cancel" }) }),
-              /* @__PURE__ */ jsx(Pressable, { onPress: submit, disabled: saving, hitSlop: 6, children: /* @__PURE__ */ jsx(Text, { style: [styles11.btn, { color: ink, fontWeight: "700" }], children: saving ? "Saving\u2026" : "Save" }) })
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}
-var styles11 = StyleSheet.create({
-  wrap: {
-    marginBottom: 4
   },
-  bubble: {},
-  actions: {
+  jumpButton: {
+    position: "absolute",
+    alignSelf: "center",
+    bottom: 12,
     flexDirection: "row",
-    justifyContent: "flex-end",
-    gap: 12,
-    marginTop: 6
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 999
   },
-  btn: {
-    fontSize: 13
+  jumpText: {
+    fontSize: 13,
+    fontWeight: "600"
   }
 });
 var DEFAULT_REACTION_EMOJIS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F389}", "\u{1F64F}", "\u{1F525}"];
@@ -2370,6 +2580,77 @@ var styles14 = StyleSheet.create({
     borderRadius: 20
   }
 });
+var MarkdownModule;
+var warned = false;
+function loadMarkdown() {
+  if (MarkdownModule === void 0) {
+    try {
+      MarkdownModule = __require("react-native-markdown-display");
+    } catch {
+      MarkdownModule = null;
+    }
+  }
+  const fn = MarkdownModule?.default;
+  if (!fn) {
+    if (!warned) {
+      warned = true;
+      console.warn(
+        "[@poolse/react-native] Markdown rendering requires `react-native-markdown-display`. Install it to enable bold/italic/code/links in message bubbles. Falling back to plain text."
+      );
+    }
+    return null;
+  }
+  return fn;
+}
+function renderMarkdown(body, args) {
+  const Markdown = loadMarkdown();
+  if (!Markdown) return null;
+  const baseText = {
+    color: args.textColor,
+    fontFamily: args.fontFamily,
+    fontSize: args.fontSize,
+    lineHeight: args.lineHeight
+  };
+  const style = {
+    body: baseText,
+    paragraph: { ...baseText, marginTop: 0, marginBottom: 0 },
+    text: baseText,
+    strong: { ...baseText, fontWeight: "700" },
+    em: { ...baseText, fontStyle: "italic" },
+    s: { ...baseText, textDecorationLine: "line-through" },
+    link: { color: args.linkColor, textDecorationLine: "underline" },
+    code_inline: {
+      ...baseText,
+      backgroundColor: "rgba(127,127,127,0.18)",
+      borderRadius: 4,
+      paddingHorizontal: 4
+    },
+    code_block: {
+      ...baseText,
+      backgroundColor: "rgba(127,127,127,0.18)",
+      padding: 8,
+      borderRadius: 6
+    },
+    fence: {
+      ...baseText,
+      backgroundColor: "rgba(127,127,127,0.18)",
+      padding: 8,
+      borderRadius: 6
+    },
+    bullet_list: { marginTop: 2, marginBottom: 2 },
+    ordered_list: { marginTop: 2, marginBottom: 2 },
+    list_item: baseText,
+    blockquote: {
+      ...baseText,
+      borderLeftWidth: 3,
+      borderLeftColor: args.linkColor,
+      paddingLeft: 8,
+      marginVertical: 4,
+      opacity: 0.85
+    }
+  };
+  return createElement(Markdown, { style, onLinkPress: args.onLinkPress }, body);
+}
 function MessageBubble({
   message,
   currentUserId,
@@ -2380,7 +2661,8 @@ function MessageBubble({
   maxBodyLength = 0,
   showSenderName = false,
   actionsTrigger,
-  showAttachments = true
+  showAttachments = true,
+  markdown = true
 }) {
   const theme = usePoolseTheme();
   const { width: screenWidth } = useWindowDimensions();
@@ -2465,22 +2747,53 @@ function MessageBubble({
             ) : null,
             renderAttachments && images.length > 0 ? /* @__PURE__ */ jsx(ImageMosaic, { images, maxWidth: contentMaxWidth }) : null,
             renderAttachments && files.length > 0 ? /* @__PURE__ */ jsx(View, { style: { gap: theme.spacing.xs, marginBottom: theme.spacing.xs }, children: files.map((att) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment: att, maxWidth: contentMaxWidth }, att.id)) }) : null,
-            body.length > 0 ? /* @__PURE__ */ jsx(
-              Text,
-              {
-                style: [
-                  styles15.body,
+            body.length > 0 ? (() => {
+              if (isDeleted) {
+                return /* @__PURE__ */ jsx(
+                  Text,
                   {
-                    color: isDeleted ? theme.colors.ink3 : textColor,
-                    fontFamily: theme.type.fontBody,
-                    fontSize: theme.type.bodySize,
-                    lineHeight: theme.type.lineHeight,
-                    fontStyle: isDeleted ? "italic" : "normal"
+                    style: [
+                      styles15.body,
+                      {
+                        color: theme.colors.ink3,
+                        fontFamily: theme.type.fontBody,
+                        fontSize: theme.type.bodySize,
+                        lineHeight: theme.type.lineHeight,
+                        fontStyle: "italic"
+                      }
+                    ],
+                    children: "Message deleted"
                   }
-                ],
-                children: isDeleted ? "Message deleted" : truncated
+                );
               }
-            ) : null,
+              const md = markdown ? renderMarkdown(truncated, {
+                textColor,
+                linkColor: isSelf ? theme.colors.onBrand : theme.colors.brand,
+                fontFamily: theme.type.fontBody,
+                fontSize: theme.type.bodySize,
+                lineHeight: theme.type.lineHeight,
+                onLinkPress: (url) => {
+                  void Linking.openURL(url).catch(() => void 0);
+                  return false;
+                }
+              }) : null;
+              if (md) return md;
+              return /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [
+                    styles15.body,
+                    {
+                      color: textColor,
+                      fontFamily: theme.type.fontBody,
+                      fontSize: theme.type.bodySize,
+                      lineHeight: theme.type.lineHeight
+                    }
+                  ],
+                  children: truncated
+                }
+              );
+            })() : null,
             maxBodyLength > 0 && body.length > maxBodyLength ? /* @__PURE__ */ jsx(Pressable, { onPress: () => setExpanded((e) => !e), children: /* @__PURE__ */ jsx(
               Text,
               {
@@ -2573,9 +2886,9 @@ function formatTime(iso) {
   try {
     const d = new Date(iso);
     const now = /* @__PURE__ */ new Date();
-    const sameDay = isSameDay(d, now);
+    const sameDay2 = isSameDay(d, now);
     const time = d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
-    if (sameDay) return time;
+    if (sameDay2) return time;
     const yesterday = new Date(now);
     yesterday.setDate(now.getDate() - 1);
     if (isSameDay(d, yesterday)) return `Yesterday ${time}`;
@@ -2683,12 +2996,26 @@ function ReactionStrip({
           styles16.chip,
           {
             backgroundColor: meReacted ? theme.colors.brandSoft : theme.colors.surface2,
-            borderColor: meReacted ? theme.colors.brand : theme.colors.border
+            borderColor: meReacted ? theme.colors.brand : theme.colors.border,
+            borderWidth: meReacted ? 1.5 : 1,
+            transform: meReacted ? [{ scale: 1.04 }] : void 0
           }
         ],
         children: [
           /* @__PURE__ */ jsx(Text, { style: styles16.emoji, children: emoji }),
-          /* @__PURE__ */ jsx(Text, { style: [styles16.count, { color: theme.colors.ink2 }], children: userArr.length })
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                styles16.count,
+                {
+                  color: meReacted ? theme.colors.brand : theme.colors.ink2,
+                  fontWeight: meReacted ? "700" : "600"
+                }
+              ],
+              children: userArr.length
+            }
+          )
         ]
       },
       emoji
@@ -2741,7 +3068,6 @@ var styles16 = StyleSheet.create({
     paddingHorizontal: 9,
     paddingVertical: 4,
     borderRadius: 14,
-    borderWidth: 1,
     gap: 5,
     minHeight: 26,
     // Subtle elevation so chips lift off the surface
@@ -2757,7 +3083,6 @@ var styles16 = StyleSheet.create({
   },
   count: {
     fontSize: 12,
-    fontWeight: "600",
     fontVariant: ["tabular-nums"]
   },
   backdrop: {
@@ -2795,11 +3120,10 @@ function MessageRow({
   actions = true,
   threads = true,
   quotations = true,
+  markdown = true,
   readState,
-  editing = false,
+  isEditing = false,
   onStartEdit,
-  onCancelEdit,
-  onSaveEdit,
   onDelete,
   onOpenThread,
   onQuote,
@@ -2820,7 +3144,7 @@ function MessageRow({
     ...msg.reactions ? { initialReactions: msg.reactions } : {}
   });
   const translateX = useRef(new Animated.Value(0)).current;
-  const swipeEnabled = quotations && !!onQuote && !editing;
+  const swipeEnabled = quotations && !!onQuote && !isEditing;
   const panResponder = useMemo(
     () => PanResponder.create({
       // Tap / long-press still go to the inner Pressable.
@@ -2895,137 +3219,149 @@ function MessageRow({
   const rowSender = useUser(showAvatarSlot ? msg.sender_external_id : null);
   const avatarUrl = msg.sender_external_id ? avatarFor?.(msg.sender_external_id) ?? rowSender.profile?.avatarUrl ?? null : null;
   const senderLabel = msg.sender_external_id ? labelFor?.(msg.sender_external_id) ?? rowSender.profile?.displayName ?? msg.sender_external_id : null;
-  return /* @__PURE__ */ jsxs(View, { style: [styles17.row, { alignSelf: isSelf ? "flex-end" : "flex-start" }], children: [
-    showAvatarSlot ? /* @__PURE__ */ jsx(View, { style: styles17.avatarSlot, children: showAvatarRender ? /* @__PURE__ */ jsx(
-      Avatar,
-      {
-        src: avatarUrl ?? null,
-        name: senderLabel,
-        seed: msg.sender_external_id ?? null,
-        size: "sm"
-      }
-    ) : null }) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles17.bubbleCol, children: [
-      swipeEnabled ? /* @__PURE__ */ jsx(
-        Animated.View,
-        {
-          pointerEvents: "none",
-          style: [
-            styles17.replyHint,
-            isSelf ? styles17.replyHintRight : styles17.replyHintLeft,
-            {
-              opacity: replyIconOpacity,
-              transform: [{ scale: replyIconScale }],
-              backgroundColor: theme.colors.surface2
-            }
-          ],
-          children: /* @__PURE__ */ jsx(PoolseIcon, { name: "reply", size: 16, color: theme.colors.brand })
-        }
-      ) : null,
-      /* @__PURE__ */ jsx(
-        Animated.View,
-        {
-          ...swipeEnabled ? panResponder.panHandlers : {},
-          style: { transform: [{ translateX }] },
-          children: /* @__PURE__ */ jsx(
-            Pressable,
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles17.row,
+        { alignSelf: isSelf ? "flex-end" : "flex-start" },
+        // Lift this row above the dim backdrop the parent renders
+        // during edit mode. zIndex covers iOS / web; elevation does
+        // the equivalent on Android.
+        isEditing ? styles17.rowEditing : null
+      ],
+      children: [
+        showAvatarSlot ? /* @__PURE__ */ jsx(View, { style: styles17.avatarSlot, children: showAvatarRender ? /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            src: avatarUrl ?? null,
+            name: senderLabel,
+            seed: msg.sender_external_id ?? null,
+            size: "sm"
+          }
+        ) : null }) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles17.bubbleCol, children: [
+          swipeEnabled ? /* @__PURE__ */ jsx(
+            Animated.View,
             {
-              onLongPress: () => {
-                if (!actions) return;
-                setActionsOpen(true);
-              },
-              accessibilityRole: "button",
-              accessibilityLabel: "Message actions",
-              children: editing ? /* @__PURE__ */ jsx(
-                EditableMessageBubble,
+              pointerEvents: "none",
+              style: [
+                styles17.replyHint,
+                isSelf ? styles17.replyHintRight : styles17.replyHintLeft,
                 {
-                  message: msg,
-                  currentUserId: meId,
-                  onCancel: onCancelEdit ?? (() => void 0),
-                  onSave: onSaveEdit ?? (() => void 0)
+                  opacity: replyIconOpacity,
+                  transform: [{ scale: replyIconScale }],
+                  backgroundColor: theme.colors.surface2
                 }
-              ) : /* @__PURE__ */ jsx(
-                MessageBubble,
+              ],
+              children: /* @__PURE__ */ jsx(PoolseIcon, { name: "reply", size: 16, color: theme.colors.brand })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              ...swipeEnabled ? panResponder.panHandlers : {},
+              style: { transform: [{ translateX }] },
+              children: /* @__PURE__ */ jsx(
+                Pressable,
                 {
-                  message: msg,
-                  currentUserId: meId,
-                  ...readState ? { readState } : {},
-                  ...labelFor ? { labelFor } : {},
-                  ...onQuotedClick ? { onQuotedClick } : {},
-                  groupPosition,
-                  maxBodyLength,
-                  showSenderName,
-                  showAttachments: attachments,
-                  actionsTrigger: actions ? /* @__PURE__ */ jsx(Pressable, { onPress: () => setActionsOpen(true), hitSlop: 8, children: /* @__PURE__ */ jsx(
-                    PoolseIcon,
+                  onLongPress: () => {
+                    if (!actions) return;
+                    setActionsOpen(true);
+                  },
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Message actions",
+                  children: /* @__PURE__ */ jsx(
+                    MessageBubble,
                     {
-                      name: "chevron-down",
-                      size: 14,
-                      color: isSelf ? theme.colors.onBrand : theme.colors.ink3
+                      message: msg,
+                      currentUserId: meId,
+                      ...readState ? { readState } : {},
+                      ...labelFor ? { labelFor } : {},
+                      ...onQuotedClick ? { onQuotedClick } : {},
+                      groupPosition,
+                      maxBodyLength,
+                      showSenderName,
+                      showAttachments: attachments,
+                      markdown,
+                      actionsTrigger: actions ? /* @__PURE__ */ jsx(Pressable, { onPress: () => setActionsOpen(true), hitSlop: 8, children: /* @__PURE__ */ jsx(
+                        PoolseIcon,
+                        {
+                          name: "chevron-down",
+                          size: 14,
+                          color: isSelf ? theme.colors.onBrand : theme.colors.ink3
+                        }
+                      ) }) : null
                     }
-                  ) }) : null
+                  )
                 }
               )
             }
-          )
-        }
-      ),
-      threads && (msg.reply_count ?? 0) > 0 && onOpenThread ? /* @__PURE__ */ jsx(Pressable, { onPress: onOpenThread, style: styles17.threadPill, children: /* @__PURE__ */ jsxs(Text, { style: [styles17.threadPillText, { color: theme.colors.brand }], children: [
-        "\u{1F4AC} ",
-        msg.reply_count,
-        " ",
-        msg.reply_count === 1 ? "reply" : "replies"
-      ] }) }) : null,
-      reactions ? /* @__PURE__ */ jsx(View, { style: [styles17.reactionsRow, { alignSelf: isSelf ? "flex-end" : "flex-start" }], children: /* @__PURE__ */ jsx(
-        ReactionStrip,
-        {
-          messageId: msg.id,
-          conversationId: msg.conversation_id,
-          meId,
-          ...msg.reactions ? { initialReactions: msg.reactions } : {}
-        }
-      ) }) : null
-    ] }),
-    actions && actionsOpen ? /* @__PURE__ */ jsx(
-      MessageActions,
-      {
-        visible: actionsOpen,
-        onClose: () => setActionsOpen(false),
-        isSelf,
-        ...reactions ? {
-          // Inline quick-react row at the top of the sheet —
-          // one tap = react + close, no second modal needed.
-          onPickReaction: (emoji) => {
-            void reactionsApi.addReaction(emoji);
-          }
-        } : {},
-        ...onStartEdit ? {
-          onEdit: () => {
-            setActionsOpen(false);
-            onStartEdit();
-          }
-        } : {},
-        ...onDelete ? {
-          onDelete: () => {
-            setActionsOpen(false);
-            onDelete();
-          }
-        } : {},
-        ...onOpenThread ? {
-          onReplyInThread: () => {
-            setActionsOpen(false);
-            onOpenThread();
-          }
-        } : {},
-        ...quotations && onQuote ? {
-          onQuote: () => {
-            setActionsOpen(false);
-            onQuote();
+          ),
+          threads && (msg.reply_count ?? 0) > 0 && onOpenThread ? /* @__PURE__ */ jsx(Pressable, { onPress: onOpenThread, style: styles17.threadPill, children: /* @__PURE__ */ jsxs(Text, { style: [styles17.threadPillText, { color: theme.colors.brand }], children: [
+            "\u{1F4AC} ",
+            msg.reply_count,
+            " ",
+            msg.reply_count === 1 ? "reply" : "replies"
+          ] }) }) : null,
+          reactions ? /* @__PURE__ */ jsx(View, { style: [styles17.reactionsRow, { alignSelf: isSelf ? "flex-end" : "flex-start" }], children: /* @__PURE__ */ jsx(
+            ReactionStrip,
+            {
+              messageId: msg.id,
+              conversationId: msg.conversation_id,
+              meId,
+              ...msg.reactions ? { initialReactions: msg.reactions } : {}
+            }
+          ) }) : null
+        ] }),
+        actions && actionsOpen ? /* @__PURE__ */ jsx(
+          MessageActions,
+          {
+            visible: actionsOpen,
+            onClose: () => setActionsOpen(false),
+            isSelf,
+            ...reactions ? {
+              // Inline quick-react row at the top of the sheet —
+              // one tap = react + close, no second modal needed.
+              onPickReaction: (emoji) => {
+                void reactionsApi.addReaction(emoji);
+              }
+            } : {},
+            ...msg.body && !msg.deleted_at ? {
+              onCopy: () => {
+                setActionsOpen(false);
+                void copyToClipboard(msg.body ?? "");
+              }
+            } : {},
+            ...onStartEdit ? {
+              onEdit: () => {
+                setActionsOpen(false);
+                onStartEdit();
+              }
+            } : {},
+            ...onDelete ? {
+              onDelete: () => {
+                setActionsOpen(false);
+                onDelete();
+              }
+            } : {},
+            ...onOpenThread ? {
+              onReplyInThread: () => {
+                setActionsOpen(false);
+                onOpenThread();
+              }
+            } : {},
+            ...quotations && onQuote ? {
+              onQuote: () => {
+                setActionsOpen(false);
+                onQuote();
+              }
+            } : {}
           }
-        } : {}
-      }
-    ) : null
-  ] });
+        ) : null
+      ]
+    }
+  );
 }
 var styles17 = StyleSheet.create({
   row: {
@@ -3041,6 +3377,12 @@ var styles17 = StyleSheet.create({
     paddingHorizontal: 10,
     maxWidth: "95%"
   },
+  rowEditing: {
+    // Above ConversationView's editBackdrop (zIndex 5). Elevation
+    // does the equivalent stacking on Android.
+    zIndex: 10,
+    elevation: 10
+  },
   avatarSlot: {
     width: 36,
     marginRight: 6
@@ -3080,6 +3422,27 @@ var styles17 = StyleSheet.create({
     marginTop: 2
   }
 });
+var clipboardModule;
+var clipboardWarned = false;
+async function copyToClipboard(text) {
+  if (clipboardModule === void 0) {
+    try {
+      clipboardModule = __require("expo-clipboard");
+    } catch {
+      clipboardModule = null;
+    }
+  }
+  if (!clipboardModule?.setStringAsync) {
+    if (!clipboardWarned) {
+      clipboardWarned = true;
+      console.warn(
+        "[@poolse/react-native] Copy action requires `expo-clipboard`. Install it to enable copy-to-clipboard."
+      );
+    }
+    return;
+  }
+  await clipboardModule.setStringAsync(text);
+}
 var SHEET_HEIGHT_FRACTION = 0.88;
 function ThreadView({
   visible,
@@ -3135,31 +3498,34 @@ function ThreadSheet({
   const [pickerOpen, setPickerOpen] = useState(false);
   const [editingId, setEditingId] = useState(null);
   const renderReply = useCallback(
-    (msg) => /* @__PURE__ */ jsx(
-      MessageRow,
-      {
-        msg,
-        meId,
-        reactions: true,
-        attachments: true,
-        actions: true,
-        threads: false,
-        quotations: false,
-        editing: editingId === msg.id,
-        onStartEdit: () => setEditingId(msg.id),
-        onCancelEdit: () => setEditingId(null),
-        onSaveEdit: async (body) => {
-          await edit(msg.id, body);
-          setEditingId(null);
-        },
-        onDelete: () => {
-          void deleteReply(msg.id);
-        },
-        ...labelFor ? { labelFor } : {},
-        ...avatarFor ? { avatarFor } : {}
-      }
-    ),
-    [meId, editingId, edit, deleteReply, labelFor, avatarFor]
+    (msg) => {
+      const isSelf = meId !== null && msg.sender_id === meId;
+      const canEdit = isSelf && !msg.deleted_at;
+      return /* @__PURE__ */ jsx(
+        MessageRow,
+        {
+          msg,
+          meId,
+          reactions: true,
+          attachments: true,
+          actions: true,
+          threads: false,
+          quotations: false,
+          isEditing: editingId === msg.id,
+          ...canEdit ? { onStartEdit: () => setEditingId(msg.id) } : {},
+          onDelete: () => {
+            void deleteReply(msg.id);
+          },
+          ...labelFor ? { labelFor } : {},
+          ...avatarFor ? { avatarFor } : {}
+        }
+      );
+    },
+    [meId, editingId, deleteReply, labelFor, avatarFor]
+  );
+  const editingMessage = useMemo(
+    () => editingId ? replies.find((m) => m.id === editingId) ?? null : null,
+    [editingId, replies]
   );
   const rootRow = useMemo(
     () => /* @__PURE__ */ jsx(
@@ -3245,7 +3611,14 @@ function ThreadSheet({
                     },
                     placeholder: "Reply to thread\u2026",
                     attachments: true,
-                    onAttachPress: () => setPickerOpen(true)
+                    onAttachPress: () => setPickerOpen(true),
+                    editingMessage,
+                    onCancelEdit: () => setEditingId(null),
+                    onSaveEdit: async (body) => {
+                      if (!editingId) return;
+                      await edit(editingId, body);
+                      setEditingId(null);
+                    }
                   }
                 )
               ]
@@ -3409,6 +3782,7 @@ var styles19 = StyleSheet.create({
     fontSize: 12
   }
 });
+var GROUPING_WINDOW_MS = 5 * 60 * 1e3;
 function ConversationView({
   conversationId,
   emptyState,
@@ -3425,6 +3799,7 @@ function ConversationView({
   threads = true,
   quotations = true,
   readReceipts = true,
+  markdown = true,
   maxBodyLength = 200,
   senderLabels = "auto",
   avatars = "auto",
@@ -3443,9 +3818,25 @@ function ConversationView({
     send,
     edit,
     delete: deleteMsg,
-    markReadUpTo
+    markReadUpTo,
+    refetch
   } = useMessages(conversationId);
   const { typing, signalTyping } = useTyping(conversationId);
+  const realtimeStatus = useRealtimeStatus();
+  useEffect(() => {
+    const sub = AppState.addEventListener("change", (next) => {
+      if (next === "active") void refetch();
+    });
+    return () => sub.remove();
+  }, [refetch]);
+  const prevStatusRef = useRef(realtimeStatus);
+  useEffect(() => {
+    const prev = prevStatusRef.current;
+    prevStatusRef.current = realtimeStatus;
+    if (realtimeStatus === "connected" && (prev === "reconnecting" || prev === "closed" || prev === "connecting")) {
+      void refetch();
+    }
+  }, [realtimeStatus, refetch]);
   const wantsMembers = mentions || senderLabels === "auto" || avatars === "auto";
   const { members } = useMembers(wantsMembers ? conversationId : "");
   const isGroupChat = members.length > 2;
@@ -3476,10 +3867,24 @@ function ConversationView({
     });
     onMarkedRead?.(conversationId, latest.id);
   }, [messages, meId, readReceipts, markReadUpTo, onMarkedRead, conversationId]);
+  const groupPositionById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (let i = 0; i < messages.length; i++) {
+      const msg = messages[i];
+      if (!msg) continue;
+      const prev = i > 0 ? messages[i - 1] ?? null : null;
+      const next = i < messages.length - 1 ? messages[i + 1] ?? null : null;
+      map.set(msg.id, computeGroupPosition(msg, prev, next, GROUPING_WINDOW_MS));
+    }
+    return map;
+  }, [messages]);
   const renderItem = useCallback(
     (msg) => {
       if (renderMessage) return /* @__PURE__ */ jsx(Fragment, { children: renderMessage(msg, meId) });
       const readState = readReceipts && meId !== null && msg.sender_id === meId ? readStateForMessage(msg, members, meId, sequenceByMessageId) : void 0;
+      const isSelf = meId !== null && msg.sender_id === meId;
+      const canEdit = isSelf && !msg.deleted_at && (readState ?? "sent") === "sent";
+      const groupPosition = groupPositionById.get(msg.id) ?? "standalone";
       return /* @__PURE__ */ jsx(
         MessageRow,
         {
@@ -3491,13 +3896,8 @@ function ConversationView({
           threads,
           quotations,
           ...readState ? { readState } : {},
-          editing: editingId === msg.id,
-          onStartEdit: () => setEditingId(msg.id),
-          onCancelEdit: () => setEditingId(null),
-          onSaveEdit: async (body) => {
-            await edit(msg.id, body);
-            setEditingId(null);
-          },
+          isEditing: editingId === msg.id,
+          ...canEdit ? { onStartEdit: () => setEditingId(msg.id) } : {},
           onDelete: () => deleteMsg(msg.id),
           ...threads ? { onOpenThread: () => setThreadRoot(msg) } : {},
           ...quotations ? { onQuote: () => setReplyingTo(msg) } : {},
@@ -3505,7 +3905,9 @@ function ConversationView({
           ...avatarFor ? { avatarFor } : {},
           showSenderName: showSenderLabels,
           showAvatar: showAvatars,
-          maxBodyLength
+          maxBodyLength,
+          groupPosition,
+          markdown
         }
       );
     },
@@ -3520,16 +3922,38 @@ function ConversationView({
       threads,
       quotations,
       editingId,
-      edit,
       deleteMsg,
       labelFor,
       avatarFor,
       showSenderLabels,
       showAvatars,
       maxBodyLength,
-      sequenceByMessageId
+      sequenceByMessageId,
+      groupPositionById,
+      markdown
     ]
   );
+  const editingMessage = useMemo(
+    () => editingId ? messages.find((m) => m.id === editingId) ?? null : null,
+    [editingId, messages]
+  );
+  const listItems = useMemo(() => {
+    const out = [];
+    let prev = null;
+    for (const msg of messages) {
+      if (prev === null || !sameDay(msg.inserted_at, prev.inserted_at)) {
+        const label = formatDayLabel(msg.inserted_at);
+        out.push({
+          kind: "separator",
+          id: `sep-${msg.id}`,
+          node: /* @__PURE__ */ jsx(DaySeparator, { label })
+        });
+      }
+      out.push({ kind: "msg", msg });
+      prev = msg;
+    }
+    return out;
+  }, [messages]);
   const composerProps = useMemo(
     () => ({
       onSend: async (body, opts) => {
@@ -3543,9 +3967,28 @@ function ConversationView({
       onCancelReply: () => setReplyingTo(null),
       ...labelFor ? { labelFor } : {},
       attachments,
-      keyboardOffset
+      keyboardOffset,
+      editingMessage,
+      onCancelEdit: () => setEditingId(null),
+      onSaveEdit: async (body) => {
+        if (!editingId) return;
+        await edit(editingId, body);
+        setEditingId(null);
+      }
     }),
-    [send, signalTyping, attachments, replyingTo, labelFor, keyboardOffset, onSent, conversationId]
+    [
+      send,
+      signalTyping,
+      attachments,
+      replyingTo,
+      labelFor,
+      keyboardOffset,
+      onSent,
+      conversationId,
+      editingMessage,
+      editingId,
+      edit
+    ]
   );
   const headerNode = header === false ? null : header === true ? /* @__PURE__ */ jsx(
     ChatHeader,
@@ -3565,18 +4008,30 @@ function ConversationView({
       keyboardVerticalOffset: keyboardOffset,
       children: [
         headerNode,
-        /* @__PURE__ */ jsx(View, { style: styles20.listWrap, children: /* @__PURE__ */ jsx(
-          MessageList,
-          {
-            messages,
-            loading,
-            hasMore,
-            onLoadMore: loadMore,
-            renderItem,
-            ListHeader: /* @__PURE__ */ jsx(TypingIndicator, { typing, ...labelFor ? { labelFor } : {} }),
-            ...emptyState !== void 0 ? { emptyState } : {}
-          }
-        ) }),
+        /* @__PURE__ */ jsxs(View, { style: styles20.listWrap, children: [
+          /* @__PURE__ */ jsx(
+            MessageList,
+            {
+              messages,
+              items: listItems,
+              meId,
+              loading,
+              hasMore,
+              onLoadMore: loadMore,
+              renderItem,
+              ListHeader: /* @__PURE__ */ jsx(TypingIndicator, { typing, ...labelFor ? { labelFor } : {} }),
+              ...emptyState !== void 0 ? { emptyState } : {}
+            }
+          ),
+          editingId ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              style: styles20.editBackdrop,
+              onPress: () => setEditingId(null),
+              accessibilityLabel: "Cancel editing"
+            }
+          ) : null
+        ] }),
         mentions ? /* @__PURE__ */ jsx(MentionInput, { conversationId, ...composerProps }) : /* @__PURE__ */ jsx(MessageComposer, { ...composerProps }),
         attachments ? /* @__PURE__ */ jsx(AttachmentPicker, { visible: pickerOpen, onClose: () => setPickerOpen(false) }) : null,
         threads && threadRoot ? /* @__PURE__ */ jsx(
@@ -3612,6 +4067,14 @@ var styles20 = StyleSheet.create({
   },
   listWrap: {
     flex: 1
+  },
+  editBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.45)",
+    // Sit above message rows by default but below any row that
+    // explicitly elevates itself (MessageRow bumps zIndex/elevation
+    // when isEditing is true).
+    zIndex: 5
   }
 });
 function UserPickerSheet({
@@ -4470,6 +4933,6 @@ function useAppStateLifecycle() {
   }, [poolse]);
 }
 
-export { AttachmentPicker, AttachmentPreview, Avatar, ChatHeader, ConversationList, ConversationView, EditableMessageBubble, GroupDetailsSheet, ImageMosaic, MemberList, MentionInput, MessageActions, MessageBubble, MessageComposer, MessageList, MessageRow, PoolseIcon, PoolseInbox, PoolseLogo, PoolseTheme, primitives as Primitives, ReactionPicker, ReactionStrip, ThreadView, TypingIndicator, UploadQueueStrip, UserName, defaultDarkTheme, defaultLightTheme, useAppStateLifecycle, useDisplayName, usePoolseTheme };
+export { AttachmentPicker, AttachmentPreview, Avatar, ChatHeader, ConversationList, ConversationView, DaySeparator, GroupDetailsSheet, ImageMosaic, MemberList, MentionInput, MessageActions, MessageBubble, MessageComposer, MessageList, MessageRow, PoolseIcon, PoolseInbox, PoolseLogo, PoolseTheme, primitives as Primitives, ReactionPicker, ReactionStrip, ThreadView, TypingIndicator, UploadQueueStrip, UserName, defaultDarkTheme, defaultLightTheme, useAppStateLifecycle, useDisplayName, usePoolseTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map