@robono/messaging-react-native 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,17 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { orderChatMessages } from './message-order.js';
+import { MessagingPopup } from './popup.js';
+import { messageLinks } from './message-links.js';
+import { MessagingForward } from './forward.js';
+import { SavedMessagesPopup } from './saved.js';
+import { SocialMessagePreview } from './social.js';
+import { MessagingSearch } from './search.js';
+export { MessagingSearch } from './search.js';
 import { MessagingSafety } from './safety.js';
 export { MessagingSafety } from './safety.js';
 import { PollMessage, PollComposer } from "./polls.js";
 export { PollMessage, PollComposer } from "./polls.js";
 import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore, } from "react";
-import { Animated, AppState, BackHandler, FlatList, Image, KeyboardAvoidingView, Keyboard, Modal, Platform, Pressable, ScrollView, Text, TextInput, View, useWindowDimensions, } from "react-native";
+import { Animated, ActivityIndicator, AppState, BackHandler, FlatList, Image, KeyboardAvoidingView, Keyboard, Linking, Modal, Platform, Pressable, ScrollView, Text, TextInput, View, useWindowDimensions, } from "react-native";
 import { useQuoteGesture } from "./use-quote-gesture.js";
 import { MessageIcon, duration, fileSize, chatSurface } from "./icons.js";
 import { VoiceMessageComposer } from "./voice-composer.js";
 export { VoiceMessageComposer, VoiceDraftPlayback } from "./voice-composer.js";
 import { VoicePlayback } from "./media-ui.js";
 export { VoicePlayback, MediaViewer, MediaPlaybackControls, ZoomablePhoto } from "./media-ui.js";
-import { defaultMessagingSettings, defaultAttachmentLimits, messageReactions, } from "@robono/messaging";
+import { defaultMessagingSettings, defaultAttachmentLimits, messageReactions, savedMessageKey, } from "@robono/messaging";
 const Context = createContext(null);
 export function useMessagingUI() {
     const context = useContext(Context);
@@ -21,17 +29,70 @@ export function useMessagingUI() {
 }
 export function MessagingProvider({ children, ...props }) {
     const state = useSyncExternalStore(props.client.subscribe, props.client.getSnapshot, props.client.getSnapshot);
+    useEffect(() => {
+        const update = (value) => props.client.setPresenceActive(props.active !== false && (value === null || value === 'active'));
+        update(AppState.currentState);
+        const subscription = AppState.addEventListener('change', update);
+        return () => { subscription.remove(); props.client.setPresenceActive(false); };
+    }, [props.client, props.active]);
+    const [forwarding, setForwarding] = useState([]), [deleting, setDeleting] = useState([]);
+    const [selection, setSelection] = useState([]);
+    const [saved, setSaved] = useState([]), [savedOpen, setSavedOpen] = useState(false), [saving, setSaving] = useState(false), [savedError, setSavedError] = useState('');
+    const savingRef = useRef(false), savedContext = useRef({ client: props.client, conversationId: state.conversationId });
+    savedContext.current = { client: props.client, conversationId: state.conversationId };
+    useEffect(() => { let live = true; setSaved([]); setSavedOpen(false); if (props.client.hasSavedMessages())
+        void props.client.savedMessages().then(rows => { if (live)
+            setSaved(rows); }).catch(() => { if (live)
+            setSavedError('Saved messages could not be opened.'); }); return () => { live = false; }; }, [props.client, state.conversationId]);
+    async function toggleSaved(message) { if (savingRef.current)
+        return; const origin = savedContext.current, live = () => savedContext.current.client === origin.client && savedContext.current.conversationId === origin.conversationId; savingRef.current = true; setSaving(true); setSavedError(''); try {
+        const key = savedMessageKey(message);
+        if (saved.some(r => r.key === key))
+            await props.client.removeSavedMessage(key);
+        else
+            await props.client.saveMessage(message.id, state.conversation?.kind === 'group' ? state.conversation.name ?? 'Group' : props.contact.name);
+        const rows = await props.client.savedMessages();
+        if (live()) {
+            setSaved(rows);
+            setSelection([]);
+        }
+    }
+    catch (e) {
+        if (live())
+            setSavedError(e instanceof Error ? e.message : 'This message could not be saved.');
+    }
+    finally {
+        savingRef.current = false;
+        setSaving(false);
+    } }
+    const selected = selection.map(old => state.messages.find(m => m.id === old.id) ?? old).filter(m => !m.deleted && m.conversationId === state.conversationId);
+    useEffect(() => { setSelection([]); }, [state.conversationId, state.settings?.enabled, state.historyWindow, state.focus?.sequence]);
+    useEffect(() => { if (!selection.length)
+        return; const sub = BackHandler.addEventListener('hardwareBackPress', () => { setSelection([]); return true; }); return () => sub.remove(); }, [selection.length]);
+    useEffect(() => { if (Platform.OS !== 'web' || !selection.length)
+        return; const escape = (event) => { if (event.key === 'Escape') {
+        event.preventDefault();
+        setSelection([]);
+    } }; document.addEventListener('keydown', escape); return () => document.removeEventListener('keydown', escape); }, [selection.length]);
+    const [editing, setEditing] = useState(null);
     const [reply, setReply] = useState(null);
+    useEffect(() => { setEditing(null); }, [state.conversationId, state.settings?.enabled, state.messageActionsAvailable, state.conversation?.canSend]);
     useEffect(() => {
         void props.client.reportUsage({
             platform: Platform.OS === "ios"
                 ? "ios"
                 : Platform.OS === "android"
                     ? "android"
-                    : "other",
+                    : Platform.OS === "web" ? "web" : "other",
             components: ["screen"],
         }).catch(() => { });
     }, [props.client]);
+    useEffect(() => { setForwarding([]); setDeleting([]); }, [state.conversationId, state.settings?.enabled]);
+    useEffect(() => { const action = props.requestedMessageAction, m = state.messages.find(m => m.id === action?.messageId && !m.deleted); if (!action || !m)
+        return; if (action.kind === 'forward')
+        setForwarding([m]);
+    else
+        setDeleting([m]); }, [props.requestedMessageAction]);
     const value = {
         ...props,
         state,
@@ -39,26 +100,51 @@ export function MessagingProvider({ children, ...props }) {
             ? state.messages.find(m => m.id === reply.id && !m.deleted) ?? null
             : null,
         setReply,
+        editing: state.messageActionsAvailable && editing?.conversationId === state.conversationId && state.settings?.enabled && state.conversation?.canSend !== false && state.messages.some(m => m.id === editing.id && !m.deleted) ? editing : null,
+        setEditing, setForwarding, setDeleting, selection: selected, setSelection, saved, saving, toggleSaved, setSavedOpen,
         design: props.appearance ?? state.settings?.appearance ??
             defaultMessagingSettings().appearance,
     };
-    return _jsx(Context.Provider, { value: value, children: children });
+    return _jsxs(Context.Provider, { value: value, children: [children, forwarding.length > 0 && _jsx(MessagingForward, { messages: forwarding, client: props.client, appearance: value.design, participants: props.participants, userId: props.userId, onClose: () => setForwarding([]) }), _jsx(MessageDeletion, { messages: deleting, onClose: () => setDeleting([]) }), savedOpen && _jsx(SavedMessagesPopup, { records: saved, appearance: value.design, onClose: () => setSavedOpen(false), onOpen: async (record) => { setSavedOpen(false); try {
+                    if (!props.openSavedAttachment)
+                        throw Error('Saved attachments cannot be opened here.');
+                    await props.openSavedAttachment(record);
+                }
+                catch (e) {
+                    setSavedError(e instanceof Error ? e.message : 'This saved attachment could not be opened.');
+                } }, onRemove: async (key) => { await props.client.removeSavedMessage(key); setSaved(await props.client.savedMessages()); } }), !!savedError && _jsxs(MessagingPopup, { background: value.design.colors.background, onClose: () => setSavedError(''), children: [_jsx(Text, { accessibilityRole: "alert", style: { color: value.design.colors.foreground }, children: savedError }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => setSavedError(''), style: { minHeight: 44, alignSelf: 'flex-end', justifyContent: 'center' }, children: _jsx(Text, { style: { color: value.design.colors.accent }, children: "OK" }) })] })] });
+}
+export function messagingHeaderColors(design, group) {
+    const background = group ? '#1F5F7A' : design.colors.accent;
+    const rgb = background.slice(1).match(/.{2}/g)?.map(v => parseInt(v, 16)) ?? [0, 0, 0];
+    const foreground = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000 > 150 ? '#050505' : '#F7F7F7';
+    return { background, foreground };
+}
+function MessagingActivity({ ink }) {
+    const { state, design, participants } = useMessagingUI(), [now, setNow] = useState(Date.now());
+    useEffect(() => { setNow(Date.now()); if (!state.presence?.peers.length)
+        return; const timer = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(timer); }, [state.presence]);
+    const typing = state.settings?.features.typing ? state.presence?.peers.filter(peer => peer.typingUntil > now) ?? [] : [];
+    const online = state.settings?.features.online && state.presence?.peers.some(peer => peer.onlineUntil > now);
+    const group = state.conversation?.kind === 'group';
+    const text = typing.length ? (group ? (typing.length > 2 ? 'Several people are typing…' : typing.map(peer => participants?.[peer.userId]?.name ?? 'Someone').join(' and ') + ' ' + (typing.length > 1 ? 'are' : 'is') + ' typing…') : 'Typing…') : !group && online ? 'Online now' : group ? `${state.conversation?.memberCount ?? state.conversation?.memberIds?.length ?? 0} members` : design.name;
+    return _jsx(Text, { numberOfLines: 1, style: { color: ink, opacity: .8, fontSize: 12 }, children: text });
 }
 export function MessagingHeader({ children } = {}) {
-    const { contact, design, state, client, onBack, onContactOptions } = useMessagingUI();
-    const [safetyOpen, setSafetyOpen] = useState(false);
-    const c = design.colors;
+    const { contact, design, state, client, userId, participants, onBack, onContactOptions, selection, setSelection, setSavedOpen } = useMessagingUI();
+    const [safetyOpen, setSafetyOpen] = useState(false), [searchOpen, setSearchOpen] = useState(false);
+    const c = design.colors, header = messagingHeaderColors(design, state.conversation?.kind === 'group');
     return (_jsxs(View, { style: {
             flexDirection: "row",
             alignItems: "center",
             paddingHorizontal: 8,
             paddingVertical: 6,
             minHeight: 58,
-            backgroundColor: chatSurface(c.background),
+            backgroundColor: header.background,
             gap: 8,
             borderBottomWidth: 1,
             borderBottomColor: c.foreground + "12",
-        }, children: [onBack && (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Back", onPress: onBack, style: { minWidth: 44, minHeight: 44, justifyContent: "center" }, children: _jsx(MessageIcon, { name: "back", color: c.foreground, size: 25 }) })), design.showAvatars && (contact.avatarUrl
+        }, children: [(onBack || selection.length > 0) && (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: selection.length ? 'Clear message selection' : 'Back', onPress: () => selection.length ? setSelection([]) : onBack?.(), style: { minWidth: 44, minHeight: 44, justifyContent: "center" }, children: _jsx(MessageIcon, { name: "back", color: header.foreground, size: 25 }) })), design.showAvatars && (contact.avatarUrl
                 ? (_jsx(Image, { source: { uri: contact.avatarUrl }, style: { width: 36, height: 36, borderRadius: 18 } }))
                 : (_jsx(View, { style: {
                         width: 36,
@@ -67,7 +153,7 @@ export function MessagingHeader({ children } = {}) {
                         backgroundColor: c.incoming,
                         alignItems: "center",
                         justifyContent: "center",
-                    }, children: _jsx(Text, { style: { color: c.incomingText }, children: contact.name.slice(0, 1) }) }))), _jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 17, fontWeight: "600" }, children: state.conversation?.kind === 'group' ? state.conversation.name : contact.name }), _jsx(Text, { style: { color: c.secondary, fontSize: 12 }, children: state.conversation?.kind === 'group' ? `${state.conversation.memberIds?.length ?? 0} members` : design.name })] }), design.logoUrl && (_jsx(Image, { source: { uri: design.logoUrl }, accessibilityLabel: design.name, style: { width: 32, height: 32 } })), children, (onContactOptions || state.conversation?.safety) && (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Contact options", onPress: onContactOptions ?? (() => setSafetyOpen(true)), style: { padding: 12 }, children: _jsx(MessageIcon, { name: "more", color: c.foreground, size: 22 }) })), safetyOpen && _jsx(MessagingSafety, { client: client, state: state, appearance: design, name: state.conversation?.kind === 'group' ? (state.conversation.name ?? 'Conversation') : contact.name, onClose: () => setSafetyOpen(false) })] }));
+                    }, children: _jsx(Text, { style: { color: c.incomingText }, children: contact.name.slice(0, 1) }) }))), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { color: header.foreground, fontSize: 17, fontWeight: "600" }, children: state.conversation?.kind === 'group' ? state.conversation.name : contact.name }), _jsx(MessagingActivity, { ink: header.foreground })] }), design.logoUrl && (_jsx(Image, { source: { uri: design.logoUrl }, accessibilityLabel: design.name, style: { width: 32, height: 32 } })), children, client.hasSavedMessages() && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Saved messages", onPress: () => setSavedOpen(true), style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "bookmark", color: header.foreground, size: 22 }) }), (onContactOptions || state.conversation?.safety || state.searchAvailable) && (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Contact options", onPress: onContactOptions ?? (() => setSafetyOpen(true)), style: { padding: 12 }, children: _jsx(MessageIcon, { name: "more", color: header.foreground, size: 22 }) })), searchOpen && state.searchAvailable && state.settings?.enabled && _jsx(MessagingSearch, { client: client, appearance: design, onClose: () => setSearchOpen(false), resolveName: id => id === userId ? 'You' : participants?.[id]?.name ?? (state.conversation?.kind === 'direct' ? contact.name : 'Chat member') }, state.conversationId), safetyOpen && _jsx(MessagingSafety, { client: client, state: state, appearance: design, name: state.conversation?.kind === 'group' ? (state.conversation.name ?? 'Conversation') : contact.name, onSearch: state.searchAvailable && state.settings?.enabled ? () => { setSafetyOpen(false); setSearchOpen(true); } : undefined, onClose: () => setSafetyOpen(false) })] }));
 }
 const mediaNames = {
     voice: "Voice message",
@@ -76,6 +162,22 @@ const mediaNames = {
     document: "File",
 };
 function quoteSummary(message) { return message?.poll?.question ?? message?.text ?? (message && message.kind !== "text" && message.kind !== "poll" ? mediaNames[message.kind] : "Earlier message"); }
+/** The same compact quoted preview in the composer and delivered bubble. */
+function QuotedPreview({ message, ink }) {
+    const { attachmentPreview, userId, participants, contact, state, design } = useMessagingUI();
+    const [thumbnail, setThumbnail] = useState();
+    useEffect(() => {
+        let current = true;
+        setThumbnail(undefined);
+        if (message && !message.deleted && ['image', 'video'].includes(message.kind) && attachmentPreview)
+            void attachmentPreview(message).then(preview => { if (current)
+                setThumbnail(preview.uri); }).catch(() => { });
+        return () => { current = false; };
+    }, [message?.id, message?.conversationId, message?.media?.assetId, message?.deleted, attachmentPreview]);
+    const name = message && !message.deleted ? (message.senderId === userId ? 'You' : participants?.[message.senderId]?.name ?? (state.conversation?.kind === 'direct' ? contact.name : 'Chat member')) : null;
+    const media = message && !message.deleted && message.kind !== 'text' && message.kind !== 'poll';
+    return _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 7, minWidth: 0 }, children: [media && (thumbnail ? _jsx(Image, { accessibilityLabel: "Quoted attachment thumbnail", source: { uri: thumbnail }, onError: () => setThumbnail(undefined), resizeMode: "cover", style: { width: 28, height: 28, borderRadius: 3 } }) : _jsx(MessageIcon, { name: message.kind === 'voice' ? 'mic' : message.kind, color: design.colors.accent, size: 24 })), _jsxs(Text, { numberOfLines: 2, style: { flexShrink: 1, color: ink, fontSize: 12, lineHeight: 15, opacity: .8 }, children: [name && _jsxs(Text, { style: { fontWeight: '600' }, children: [name, ": "] }), message?.deleted ? 'Message deleted' : quoteSummary(message), message?.kind === 'voice' && message.media?.durationMs ? ` · ${duration(message.media.durationMs)}` : ''] })] });
+}
 /** Thumbnails stay local to the view and are discarded on conversation/message changes. */
 function MediaContent({ message, ink, footer, onOpen, onLongPress }) {
     const { attachmentPreview, components, design } = useMessagingUI();
@@ -90,53 +192,70 @@ function MediaContent({ message, ink, footer, onOpen, onLongPress }) {
     }, [message.id, message.conversationId, message.media?.assetId, attachmentPreview]);
     if (message.kind === 'voice') {
         const Voice = components?.VoiceMessage;
-        return Voice ? _jsx(Voice, { message: message, ink: ink, accent: design.colors.accent, waveform: preview.waveform, footer: footer, onOpen: onOpen, onLongPress: onLongPress }) : _jsx(VoicePlayback, { ink: ink, accent: design.colors.accent, waveform: preview.waveform, footer: footer, durationMs: message.media?.durationMs, onToggle: onOpen, onLongPress: onLongPress });
+        return Voice ? _jsx(Voice, { message: message, ink: ink, accent: design.colors.accent, waveform: preview.waveform ?? message.media?.waveform, showWaveform: design.showWaveform !== false, footer: footer, onOpen: onOpen, onLongPress: onLongPress }) : _jsx(VoicePlayback, { ink: ink, accent: design.colors.accent, waveform: preview.waveform ?? message.media?.waveform, showWaveform: design.showWaveform !== false, footer: footer, durationMs: message.media?.durationMs, onToggle: onOpen, onLongPress: onLongPress });
     }
     if (message.kind === 'image' || message.kind === 'video')
         return _jsx(View, { style: { width: 260, maxWidth: '100%', gap: 0 }, children: _jsxs(View, { style: { height: 186, borderRadius: 6, overflow: 'hidden', alignItems: 'center', justifyContent: 'center', backgroundColor: '#00000012' }, children: [preview.uri ? _jsx(Image, { source: { uri: preview.uri }, accessibilityLabel: message.media?.fileName ?? mediaNames[message.kind], resizeMode: "cover", onError: () => setPreview(value => ({ ...value, uri: undefined })), style: { width: '100%', height: '100%' } }) : _jsx(MessageIcon, { name: message.kind, color: ink, size: 36 }), message.kind === 'video' && _jsxs(_Fragment, { children: [_jsx(View, { style: { position: 'absolute', borderRadius: 24, padding: 10, backgroundColor: '#00000099' }, children: _jsx(MessageIcon, { name: "play", color: "#ffffff" }) }), _jsx(Text, { style: { position: 'absolute', left: 8, bottom: 8, color: '#ffffff', backgroundColor: '#000000aa', borderRadius: 4, paddingHorizontal: 5, fontSize: 12 }, children: duration(message.media?.durationMs) })] }), _jsx(View, { style: { position: 'absolute', right: 6, bottom: 6, paddingHorizontal: 6, paddingVertical: 3, borderRadius: 9, backgroundColor: '#00000070' }, children: footer })] }) });
     return _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 12, width: 246, minHeight: 62, padding: 10, borderRadius: 6, backgroundColor: ink + '09' }, children: [_jsx(MessageIcon, { name: "document", color: design.colors.accent, size: 30 }), _jsxs(View, { style: { flex: 1, gap: 4 }, children: [_jsx(Text, { numberOfLines: 2, style: { color: ink, fontSize: 14, fontWeight: '600' }, children: message.media?.fileName ?? 'File' }), _jsxs(Text, { style: { color: ink, fontSize: 12, opacity: 0.75 }, children: [message.media?.fileName?.split('.').pop()?.toUpperCase(), " \u00B7 ", fileSize(message.media?.byteSize)] })] })] });
 }
-function MessageMetadata({ message, mine, ink }) {
+function messageTimeLabel(message) { return (message.editedAt && !message.deleted ? 'edited · ' : '') + new Date(message.createdAt).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }); }
+function MessageMetadata({ message, mine, ink, pendingStatus }) {
     const { state, design } = useMessagingUI();
     const read = !!message.readAt && state.settings?.features.readReceipts;
-    return _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 4, alignSelf: 'flex-end' }, children: [_jsx(Text, { style: { color: ink, fontSize: 11, lineHeight: 14, opacity: 0.64, fontVariant: ['tabular-nums'] }, children: new Date(message.createdAt).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) }), mine && _jsx(View, { accessibilityLabel: read ? 'Read' : 'Sent', children: _jsx(MessageIcon, { name: read ? 'read' : 'check', color: read ? design.colors.accent : ink, size: 15 }) })] });
+    return _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 4, alignSelf: 'flex-end' }, children: [_jsx(Text, { style: { color: ink, fontSize: 11, lineHeight: 14, opacity: 0.64, fontVariant: ['tabular-nums'] }, children: messageTimeLabel(message) }), mine && _jsx(View, { accessibilityLabel: pendingStatus === 'sending' ? 'Sending message' : pendingStatus === 'failed' ? 'Message not sent' : read ? 'Read' : 'Sent', children: _jsx(MessageIcon, { name: pendingStatus === 'sending' ? 'clock' : pendingStatus === 'failed' ? 'warning' : read ? 'read' : 'check', color: pendingStatus === 'failed' ? '#c94040' : read ? design.colors.accent : ink, size: 15 }) })] });
 }
-export function MessagingBubble({ message }) {
-    const { userId, design, state, client, participants, setReply, onMessageOptions, openAttachment, language } = useMessagingUI();
+export function MessagingBubble({ message, pendingStatus }) {
+    const { userId, design, state, client, participants, setReply, setEditing, setForwarding, setDeleting, setSelection, saved, saving, toggleSaved, onMessageOptions, openAttachment, language, contact, copyText, components } = useMessagingUI();
+    const socialOrigin = useMessagingUI().socialOrigin ?? 'https://robono.com';
+    const contextContactName = contact.name;
     const mine = message.senderId === userId, c = design.colors, ink = mine ? c.outgoingText : c.incomingText;
     const visual = message.kind === 'image' || message.kind === 'video', voice = message.kind === 'voice';
     const previous = state.messages[state.messages.findIndex(m => m.id === message.id) - 1];
     const grouped = previous?.senderId === message.senderId && new Date(previous.createdAt).toDateString() === new Date(message.createdAt).toDateString();
     const [error, setError] = useState(''), [busy, setBusy] = useState(false), [actions, setActions] = useState(false), [reportOpen, setReportOpen] = useState(false);
+    const afterMenu = useRef(null);
+    const menuDismissed = () => { const next = afterMenu.current; afterMenu.current = null; next?.(); };
+    const leaveMenu = (next) => { afterMenu.current = next; setActions(false); if (Platform.OS !== 'ios')
+        menuDismissed(); };
+    useEffect(() => () => { afterMenu.current = null; }, [client, message.id]);
+    const canChange = mine && !pendingStatus && !message.deleted && !!state.messageActionsAvailable && !!state.settings?.enabled && state.conversation?.canSend !== false && !message.readAt;
     const anchor = useRef(null), viewport = useWindowDimensions();
-    const [menuPosition, setMenuPosition] = useState({ x: 12, y: 12 }), [hovered, setHovered] = useState(false);
+    const [menuPosition, setMenuPosition] = useState({ x: 12, y: 12, above: false, available: 400 }), [hovered, setHovered] = useState(false);
+    const [footerWidth, setFooterWidth] = useState(0);
     const openMenu = () => anchor.current?.measureInWindow((x, y, width, height) => {
-        const menuHeight = 20 + (state.settings?.features.reactions ? 46 : 0) + (state.settings?.features.replies ? 54 : 0) + (!mine && state.conversation?.safety?.canReport ? 46 : 0) + (onMessageOptions ? 54 : 0) + 54;
-        const top = y >= menuHeight + 8 ? y - menuHeight - 6 : y + height + 6;
-        setMenuPosition({ x: Math.max(8, Math.min(x, viewport.width - 312)), y: Math.max(8, Math.min(top, viewport.height - menuHeight - 8)) });
+        const center = Math.max(16, Math.min(y + height / 2, viewport.height - 16)), above = center > viewport.height * .52;
+        setMenuPosition({ x: Math.max(8, Math.min(x, viewport.width - 312)), y: center, above, available: Math.max(60, (above ? center : viewport.height - center) - 16) });
         setActions(true);
     });
-    const [transformed, setTransformed] = useState(null), [transforming, setTransforming] = useState(false);
-    const canTranscript = voice && !!state.settings?.features.transcription && client.hasLanguageTools() && !message.deleted;
-    const canTranslate = ['text', 'voice'].includes(message.kind) && !!state.settings?.features.translation && client.hasLanguageTools() && !message.deleted;
-    useEffect(() => { setTransformed(null); }, [message.id, message.deleted, state.settings?.features.transcription, state.settings?.features.translation]);
-    async function transform(kind) { if (transformed?.kind === kind) {
+    const [transformed, setTransformed] = useState(null), [transforming, setTransforming] = useState(false), [translationChoices, setTranslationChoices] = useState(false);
+    const TranslationVoice = components?.TranslationVoice;
+    const canTranscript = !pendingStatus && voice && !!state.settings?.features.transcription && client.hasLanguageTools() && !message.deleted;
+    const canTranslate = !pendingStatus && ['text', 'voice'].includes(message.kind) && !!state.settings?.features.translation && client.hasLanguageTools() && !message.deleted;
+    const transformGeneration = useRef(0);
+    useEffect(() => { transformGeneration.current++; setTransformed(null); setTransforming(false); setTranslationChoices(false); return () => { transformGeneration.current++; }; }, [message.id, message.deleted, message.text, message.media?.assetId, language, state.settings?.enabled, state.settings?.features.transcription, state.settings?.features.translation]);
+    useEffect(() => { if (!transformed?.audio)
+        return; const timer = setTimeout(() => setTransformed(null), Math.max(0, Date.parse(transformed.audio.expiresAt) - Date.now())); return () => clearTimeout(timer); }, [transformed]);
+    async function transform(kind, output = 'text') { setTranslationChoices(false); if (transformed?.kind === kind && !!transformed.audio === (output === 'voice')) {
         setTransformed(null);
         return;
     } if (transforming)
-        return; setTransforming(true); setActions(false); setError(''); try {
-        setTransformed(await client.transform(message.id, kind, language ?? Intl.DateTimeFormat().resolvedOptions().locale));
+        return; const generation = ++transformGeneration.current; setTransforming(true); setActions(false); setError(''); try {
+        const result = await client.transform(message.id, kind, language ?? Intl.DateTimeFormat().resolvedOptions().locale, output);
+        if (generation === transformGeneration.current)
+            setTransformed(result);
     }
     catch {
-        setError('This message could not be converted. Try again.');
+        if (generation === transformGeneration.current)
+            setError('This message could not be converted. Try again.');
     }
     finally {
-        setTransforming(false);
+        if (generation === transformGeneration.current)
+            setTransforming(false);
     } }
-    const canInteract = !!state.settings?.enabled && state.conversation?.canSend !== false && !message.deleted;
+    const canInteract = !pendingStatus && !!state.settings?.enabled && state.conversation?.canSend !== false && !message.deleted;
     const quoting = !!state.settings?.features.replies && canInteract;
     const quoteGesture = useQuoteGesture(quoting, mine, () => setReply(message));
-    async function open() { if (quoteGesture.suppressPress())
+    async function open() { if (pendingStatus || quoteGesture.suppressPress())
         return; if (!openAttachment) {
         setError('This attachment cannot be opened.');
         return;
@@ -149,8 +268,8 @@ export function MessagingBubble({ message }) {
     finally {
         setBusy(false);
     } }
-    const menu = () => { if (quoteGesture.suppressPress())
-        return; if (canTranscript || canTranslate || canInteract && (quoting || state.settings?.features.reactions) || onMessageOptions || !mine && state.conversation?.safety?.canReport)
+    const menu = () => { if (pendingStatus === 'sending' || quoteGesture.suppressPress())
+        return; if (!pendingStatus && !message.deleted || canChange || pendingStatus === 'failed' || canTranscript || canTranslate || canInteract && (quoting || state.settings?.features.reactions) || message.text && (copyText || Platform.OS === 'web') || onMessageOptions || !mine && state.conversation?.safety?.canReport)
         openMenu(); };
     async function react(emoji) {
         if (busy)
@@ -169,15 +288,85 @@ export function MessagingBubble({ message }) {
             setBusy(false);
         }
     }
-    const footer = _jsx(MessageMetadata, { message: message, mine: mine, ink: visual ? '#ffffff' : ink });
-    const content = message.kind === 'poll' ? _jsx(PollMessage, { message: message, userId: userId, ink: ink, accent: c.accent, background: c.background, foreground: c.foreground, enabled: canInteract && !!state.settings?.features.poll, onVote: options => client.vote(message.id, options), onClose: () => client.closePoll(message.id) }) : message.kind === 'text' ? _jsxs(View, { testID: "message-original-text", style: { position: 'relative', paddingBottom: 2 }, children: [_jsxs(Text, { selectable: true, style: { color: ink, fontSize: 16, lineHeight: 22 }, children: [message.text, _jsx(Text, { accessible: false, style: { fontSize: 11, color: 'transparent' }, children: ' '.repeat(mine ? 15 : 12) })] }), _jsx(View, { pointerEvents: "none", testID: "message-timestamp", style: { position: 'absolute', right: 0, bottom: 0 }, children: footer })] }) : _jsx(MediaContent, { message: message, ink: ink, accent: c.accent, footer: footer, onOpen: () => void open(), onLongPress: menu });
-    return _jsxs(View, { ref: anchor, ...(Platform.OS === 'web' ? { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onContextMenu: (event) => { event.preventDefault(); menu(); } } : {}), style: { alignSelf: mine ? 'flex-end' : 'flex-start', maxWidth: '88%', marginTop: grouped ? 2 : 7, marginBottom: 0 }, children: [quoting && _jsx(Animated.View, { pointerEvents: "none", accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", testID: `quote-reveal-${mine ? 'outgoing' : 'incoming'}`, style: { ...quoteGesture.revealWebStyle, position: 'absolute', top: '50%', marginTop: -14, ...(mine ? { right: 12 } : { left: 12 }), width: 28, height: 28, alignItems: 'center', justifyContent: 'center', opacity: quoteGesture.revealOpacity }, children: _jsx(MessageIcon, { name: "quote", color: c.secondary, size: 23 }) }), _jsxs(Animated.View, { ref: quoteGesture.webRef, ...quoteGesture.handlers, accessibilityActions: quoting ? [{ name: "quote", label: "Quote message" }] : undefined, onAccessibilityAction: event => { if (quoting && event.nativeEvent.actionName === "quote")
-                    setReply(message); }, testID: `message-${message.kind}-${mine ? 'outgoing' : 'incoming'}`, style: { ...quoteGesture.webStyle, transform: [{ translateX: quoteGesture.offset }], ...(Platform.OS === "web" && quoting ? { touchAction: "pan-y", userSelect: "none" } : {}), backgroundColor: mine ? c.outgoing : c.incoming, borderRadius: 8, borderTopRightRadius: mine && !grouped ? 0 : 8, borderTopLeftRadius: !mine && !grouped ? 0 : 8, padding: visual ? 3 : design.compact ? 6 : 8, boxShadow: '0 1px 1px #00000010' }, children: [!grouped && _jsx(View, { pointerEvents: "none", style: { position: 'absolute', top: 0, ...(mine ? { right: -6, borderRightWidth: 6 } : { left: -6, borderLeftWidth: 6 }), borderRightColor: 'transparent', borderLeftColor: 'transparent', borderTopWidth: 7, borderTopColor: mine ? c.outgoing : c.incoming } }), message.replyTo && _jsx(View, { style: { borderLeftWidth: 3, borderLeftColor: c.accent, paddingLeft: 9, paddingVertical: 5, marginBottom: 7 }, children: _jsx(Text, { numberOfLines: 2, style: { color: ink, fontSize: 12, opacity: 0.7 }, children: quoteSummary(state.messages.find(m => m.id === message.replyTo)) }) }), !mine && !grouped && state.conversation?.kind === 'group' && _jsx(Text, { style: { color: ink, fontSize: 12, fontWeight: '600', marginBottom: 5 }, children: message.deleted ? 'Former member' : participants?.[message.senderId]?.name ?? 'Member' }), voice || message.kind === 'poll' ? content : _jsx(Pressable, { accessibilityRole: message.kind === 'text' ? undefined : 'button', accessibilityLabel: message.kind === 'text' ? undefined : `${mediaNames[message.kind]}: ${message.media?.fileName ?? 'Open attachment'}`, disabled: busy, onLongPress: menu, onPress: message.kind === 'text' ? undefined : () => void open(), children: content }), message.kind !== 'text' && !voice && !visual && _jsx(View, { style: { marginTop: 4, alignSelf: 'flex-end' }, children: footer }), transformed && _jsx(Text, { testID: "message-language-result", style: { color: ink, fontSize: 13, lineHeight: 18, opacity: .8, marginTop: 4 }, children: transformed.text }), (canTranscript || canTranslate) && _jsxs(View, { style: { flexDirection: 'row', gap: 12, marginTop: 2 }, children: [canTranscript && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Read voice message", accessibilityState: { expanded: transformed?.kind === 'transcript' }, disabled: transforming, onPress: () => void transform('transcript'), style: { minHeight: 28, justifyContent: 'center' }, children: _jsx(Text, { style: { color: ink, fontSize: 11, opacity: .7 }, children: "Transcript" }) }), canTranslate && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Translate message", accessibilityState: { expanded: transformed?.kind === 'translation' }, disabled: transforming, onPress: () => void transform('translation'), style: { minHeight: 28, justifyContent: 'center' }, children: _jsx(Text, { style: { color: ink, fontSize: 11, opacity: .7 }, children: "Translate" }) })] }), transforming && _jsx(Text, { accessibilityLiveRegion: "polite", style: { color: ink, fontSize: 11 }, children: "Converting\u2026" }), busy && !voice && _jsx(Text, { style: { color: ink, fontSize: 12, marginTop: 4 }, children: "Opening\u2026" }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink, fontSize: 12 }, children: error }), Platform.OS === 'web' && canInteract && state.settings?.features.reactions && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "React to message", onFocus: () => setHovered(true), onBlur: () => setHovered(false), onPress: openMenu, style: { opacity: hovered || actions ? 1 : 0, position: 'absolute', top: 6, ...(mine ? { left: -34 } : { right: -34 }), width: 32, height: 32, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "reaction", color: c.secondary, size: 20 }) }), !!message.reactions?.length && _jsx(View, { style: { flexDirection: 'row', gap: 4, marginTop: 5, flexWrap: 'wrap' }, children: message.reactions.map(r => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${r.emoji}, ${r.userIds.length} reaction${r.userIds.length === 1 ? '' : 's'}`, accessibilityState: { selected: r.userIds.includes(userId) }, disabled: busy || !canInteract || !state.settings?.features.reactions, onPress: () => void react(r.emoji), style: { flexDirection: 'row', gap: 4, minWidth: 40, minHeight: 32, paddingHorizontal: 7, alignItems: 'center', justifyContent: 'center', borderRadius: 16, backgroundColor: r.userIds.includes(userId) ? c.accent + '24' : c.background, borderWidth: 1, borderColor: r.userIds.includes(userId) ? c.accent : c.secondary + '30' }, children: [_jsx(Text, { style: { fontSize: 17 }, children: r.emoji }), _jsx(Text, { style: { color: c.foreground, fontSize: 12 }, children: r.userIds.length })] }, r.emoji)) }), _jsx(Modal, { visible: actions, transparent: true, animationType: "fade", onRequestClose: () => setActions(false), children: _jsx(Pressable, { accessibilityLabel: "Close message options", onPress: () => setActions(false), style: { flex: 1, backgroundColor: '#00000022' }, children: _jsxs(View, { style: { position: 'absolute', left: menuPosition.x, top: menuPosition.y, width: Math.min(304, viewport.width - 16), backgroundColor: c.background, borderRadius: 18, padding: 8, gap: 2, boxShadow: '0 4px 20px #0003' }, children: [canInteract && state.settings?.features.reactions && _jsx(View, { accessibilityLabel: "Choose a reaction", style: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 2 }, children: messageReactions.map(emoji => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `React ${emoji}`, disabled: busy, onPress: () => void react(emoji), style: { minWidth: 42, minHeight: 42, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontSize: 28 }, children: emoji }) }, emoji)) }), quoting && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setActions(false); setReply(message); }, style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Quote" }) }), !mine && state.conversation?.safety?.canReport && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setActions(false); setReportOpen(true); }, style: { padding: 12 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 15 }, children: "Report message" }) }), onMessageOptions && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setActions(false); onMessageOptions(message); }, style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "More options" }) }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => setActions(false), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.secondary, fontSize: 16 }, children: "Cancel" }) })] }) }) }), reportOpen && _jsx(MessagingSafety, { client: client, state: state, appearance: design, name: participants?.[message.senderId]?.name ?? 'Contact', messageId: message.id, onClose: () => setReportOpen(false) })] })] });
+    const renderText = (text) => messageLinks(text).map((part, index) => part.url ? _jsx(Text, { accessibilityRole: "link", onPress: event => { event.stopPropagation(); void Linking.openURL(part.url).catch(() => setError('This link could not be opened.')); }, style: { textDecorationLine: 'underline' }, children: part.text }, index) : part.text);
+    const canCopy = !!message.text && (!!copyText || Platform.OS === 'web');
+    const reactionPicker = canInteract && state.settings?.features.reactions && _jsx(View, { accessibilityLabel: "Choose a reaction", style: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 2 }, children: messageReactions.map(emoji => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `React ${emoji}`, disabled: busy, onPress: () => void react(emoji), style: { minWidth: 42, minHeight: 42, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontSize: 28 }, children: emoji }) }, emoji)) });
+    const footer = _jsx(MessageMetadata, { message: message, mine: mine, ink: visual ? '#ffffff' : ink, pendingStatus: pendingStatus });
+    const content = message.kind === 'poll' ? _jsx(PollMessage, { message: message, userId: userId, ink: ink, accent: c.accent, background: c.background, foreground: c.foreground, resolveVoterName: id => id === userId ? 'You' : participants?.[id]?.name ?? (state.conversation?.kind === 'direct' ? contextContactName : 'Chat member'), enabled: canInteract && !!state.settings?.features.poll, onVote: options => client.vote(message.id, options), onClose: () => client.closePoll(message.id) }) : message.kind === 'text' ? _jsxs(View, { testID: "message-original-text", style: { position: 'relative', paddingBottom: 2 }, children: [_jsxs(Text, { selectable: true, style: { color: ink, fontSize: 16, lineHeight: 22 }, children: [renderText(message.text ?? ''), _jsx(View, { pointerEvents: "none", accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), style: { width: (footerWidth || (messageTimeLabel(message).length * 6.5 + (mine ? 19 : 0)) * (viewport.fontScale || 1)) + 6, height: 1 } })] }), _jsx(View, { pointerEvents: "none", testID: "message-timestamp", onLayout: e => { const width = e.nativeEvent.layout.width; setFooterWidth(old => Math.abs(old - width) < .5 ? old : width); }, style: { position: 'absolute', right: 0, bottom: 0 }, children: footer })] }) : _jsx(MediaContent, { message: message, ink: ink, accent: c.accent, footer: footer, onOpen: () => void open(), onLongPress: menu });
+    return _jsxs(View, { ref: anchor, ...(Platform.OS === 'web' ? { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onContextMenu: (event) => { event.preventDefault(); menu(); } } : {}), style: { alignSelf: mine ? 'flex-end' : 'flex-start', maxWidth: '88%', marginTop: grouped ? 2 : 7, marginBottom: 0 }, children: [quoting && _jsx(Animated.View, { pointerEvents: "none", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : { accessible: false, accessibilityElementsHidden: true, importantForAccessibility: 'no-hide-descendants' }), testID: `quote-reveal-${mine ? 'outgoing' : 'incoming'}`, style: { ...quoteGesture.revealWebStyle, position: 'absolute', top: '50%', marginTop: -14, ...(mine ? { right: 12 } : { left: 12 }), width: 28, height: 28, alignItems: 'center', justifyContent: 'center', opacity: quoteGesture.revealOpacity }, children: _jsx(MessageIcon, { name: "quote", color: c.secondary, size: 23 }) }), _jsxs(Animated.View, { ref: quoteGesture.webRef, ...quoteGesture.handlers, accessibilityActions: quoting ? [{ name: "quote", label: "Quote message" }] : undefined, onAccessibilityAction: event => { if (quoting && event.nativeEvent.actionName === "quote")
+                    setReply(message); }, testID: `message-${message.kind}-${mine ? 'outgoing' : 'incoming'}`, style: { ...quoteGesture.webStyle, transform: [{ translateX: quoteGesture.offset }], ...(Platform.OS === "web" && quoting ? { touchAction: "pan-y", userSelect: "none" } : {}), backgroundColor: mine ? c.outgoing : c.incoming, borderRadius: 8, borderTopRightRadius: mine && !grouped ? 0 : 8, borderTopLeftRadius: !mine && !grouped ? 0 : 8, padding: visual ? 3 : 6, boxShadow: '0 1px 1px #00000010' }, children: [!grouped && _jsx(View, { pointerEvents: "none", style: { position: 'absolute', top: 0, ...(mine ? { right: -6, borderRightWidth: 6 } : { left: -6, borderLeftWidth: 6 }), borderRightColor: 'transparent', borderLeftColor: 'transparent', borderTopWidth: 7, borderTopColor: mine ? c.outgoing : c.incoming } }), message.replyTo && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Go to quoted message", onPress: () => { void client.focusMessage(message.replyTo).catch(e => setError(e instanceof Error ? e.message : 'This message is unavailable.')); }, style: { borderLeftWidth: 3, borderLeftColor: c.accent, paddingLeft: 9, paddingVertical: 5, marginBottom: 7 }, children: _jsx(QuotedPreview, { message: state.messages.find(m => m.id === message.replyTo) ?? state.quotedMessages?.find(m => m.id === message.replyTo), ink: ink }) }), !mine && !grouped && state.conversation?.kind === 'group' && _jsx(Text, { style: { color: ink, fontSize: 12, fontWeight: '600', marginBottom: 5 }, children: message.deleted ? 'Former member' : participants?.[message.senderId]?.name ?? 'Member' }), voice || message.kind === 'poll' ? content : _jsx(Pressable, { accessibilityRole: message.kind === 'text' ? undefined : 'button', accessibilityLabel: message.kind === 'text' ? undefined : `${mediaNames[message.kind]}: ${message.media?.fileName ?? 'Open attachment'}`, disabled: busy, onLongPress: menu, onPress: message.kind === 'text' ? undefined : () => void open(), children: content }), !pendingStatus && state.settings?.enabled && state.socialPreviewAvailable && components?.SocialPlayer && _jsx(SocialMessagePreview, { message: message, client: client, Player: components.SocialPlayer, origin: socialOrigin, accent: c.accent, foreground: c.foreground, background: c.background }), message.kind !== 'text' && !!message.text && _jsx(Text, { selectable: true, style: { color: ink, fontSize: 16, lineHeight: 22, marginTop: 4 }, children: renderText(message.text) }), message.kind !== 'text' && !voice && !visual && _jsx(View, { style: { marginTop: 4, alignSelf: 'flex-end' }, children: footer }), transformed && !transformed.audio && _jsx(Text, { testID: "message-language-result", style: { color: ink, fontSize: 13, lineHeight: 18, opacity: .8, marginTop: 4 }, children: transformed.text }), transformed?.audio && TranslationVoice && _jsxs(View, { testID: "message-translated-voice", style: { marginTop: 4 }, children: [_jsx(TranslationVoice, { transform: transformed, ink: ink, accent: c.accent, showWaveform: design.showWaveform !== false }), _jsx(Text, { style: { color: ink, opacity: .6, fontSize: 10 }, children: "Translated voice" })] }), translationChoices && _jsxs(MessagingPopup, { background: chatSurface(c.background), onClose: () => setTranslationChoices(false), children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', marginBottom: 8 }, children: [_jsx(Text, { accessibilityRole: "header", style: { flex: 1, color: c.foreground, fontSize: 16, fontWeight: '600' }, children: "Translate" }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close translation options", onPress: () => setTranslationChoices(false), style: { minHeight: 44, minWidth: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", color: c.foreground }) })] }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void transform('translation', 'text'), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 16 }, children: "Translate to text" }) }), TranslationVoice && _jsx(Pressable, { accessibilityRole: "button", onPress: () => void transform('translation', 'voice'), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 16 }, children: "Translate to voice" }) })] }), (canTranscript || canTranslate) && _jsxs(View, { style: { flexDirection: 'row', gap: 12, marginTop: 2 }, children: [canTranscript && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Read voice message", accessibilityState: { expanded: transformed?.kind === 'transcript' }, disabled: transforming, onPress: () => void transform('transcript'), style: { minHeight: 28, justifyContent: 'center' }, children: _jsx(Text, { style: { color: ink, fontSize: 11, opacity: .7 }, children: "Transcript" }) }), canTranslate && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Translate message", accessibilityState: { expanded: transformed?.kind === 'translation' }, disabled: transforming, onPress: () => setTranslationChoices(true), style: { minHeight: 28, justifyContent: 'center' }, children: _jsx(Text, { style: { color: ink, fontSize: 11, opacity: .7 }, children: "Translate" }) })] }), transforming && _jsx(Text, { accessibilityLiveRegion: "polite", style: { color: ink, fontSize: 11 }, children: "Converting\u2026" }), busy && !voice && _jsx(Text, { style: { color: ink, fontSize: 12, marginTop: 4 }, children: "Opening\u2026" }), !!error && _jsxs(MessagingPopup, { background: chatSurface(c.background), onClose: () => setError(''), children: [_jsx(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 17, fontWeight: '600' }, children: "Message" }), _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 15, lineHeight: 21, marginTop: 8 }, children: error }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close message alert", onPress: () => setError(''), style: { alignSelf: 'flex-end', minHeight: 44, justifyContent: 'center', paddingHorizontal: 8, marginTop: 8 }, children: _jsx(Text, { style: { color: c.accent }, children: "OK" }) })] }), pendingStatus === 'failed' && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Retry sending message", onPress: () => void client.retry(message.clientMessageId).catch(() => { }), style: { minHeight: 32, justifyContent: 'center', alignSelf: 'flex-end' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 12 }, children: design.labels.retry }) }), Platform.OS === 'web' && canInteract && state.settings?.features.reactions && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "React to message", onFocus: () => setHovered(true), onBlur: () => setHovered(false), onPress: openMenu, style: { opacity: hovered || actions ? 1 : 0, position: 'absolute', top: 6, ...(mine ? { left: -34 } : { right: -34 }), width: 32, height: 32, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "reaction", color: c.secondary, size: 20 }) }), !!message.reactions?.length && _jsx(View, { style: { flexDirection: 'row', gap: 4, marginTop: 5, flexWrap: 'wrap' }, children: message.reactions.map(r => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${r.emoji}, ${r.userIds.length} reaction${r.userIds.length === 1 ? '' : 's'}`, accessibilityState: { selected: r.userIds.includes(userId) }, disabled: busy || !canInteract || !state.settings?.features.reactions, onPress: () => void react(r.emoji), style: { flexDirection: 'row', gap: 4, minWidth: 40, minHeight: 32, paddingHorizontal: 7, alignItems: 'center', justifyContent: 'center', borderRadius: 16, backgroundColor: r.userIds.includes(userId) ? c.accent + '24' : c.background, borderWidth: 1, borderColor: r.userIds.includes(userId) ? c.accent : c.secondary + '30' }, children: [_jsx(Text, { style: { fontSize: 17 }, children: r.emoji }), _jsx(Text, { style: { color: c.foreground, fontSize: 12 }, children: r.userIds.length })] }, r.emoji)) }), _jsx(Modal, { visible: actions, onDismiss: menuDismissed, transparent: true, animationType: "fade", onRequestClose: () => setActions(false), children: _jsx(Pressable, { accessibilityLabel: "Close message options", onPress: () => setActions(false), style: { flex: 1, backgroundColor: '#00000022' }, children: _jsxs(View, { style: { position: 'absolute', left: menuPosition.x, ...(menuPosition.above ? { bottom: viewport.height - menuPosition.y + 8 } : { top: menuPosition.y + 8 }), width: Math.min(304, viewport.width - 16), maxHeight: menuPosition.available, backgroundColor: c.background, borderRadius: 18, boxShadow: '0 4px 20px #0003', overflow: 'hidden' }, children: [!menuPosition.above && reactionPicker, _jsxs(ScrollView, { style: { maxHeight: Math.max(44, menuPosition.available - (reactionPicker ? 50 : 0)) }, contentContainerStyle: { padding: 8, gap: 2 }, children: [canCopy && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setActions(false); void (copyText ? copyText(message.text) : navigator.clipboard.writeText(message.text)).catch(() => setError('The text could not be copied.')); }, style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Copy" }) }), quoting && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setActions(false); setReply(message); }, style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Quote" }) }), canInteract && client.canForward(message) && _jsx(Pressable, { accessibilityRole: "button", onPress: () => leaveMenu(() => setForwarding([message])), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Forward" }) }), !pendingStatus && !message.deleted && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setActions(false); setSelection([message]); Keyboard.dismiss(); }, style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Select" }) }), !pendingStatus && !message.deleted && message.kind !== 'poll' && client.hasSavedMessages() && _jsx(Pressable, { accessibilityRole: "button", disabled: saving, onPress: () => { setActions(false); void toggleSaved(message); }, style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: saved.some(r => r.key === savedMessageKey(message)) ? 'Remove from Saved' : 'Save' }) }), canChange && message.kind !== 'poll' && state.settings?.features[message.kind] && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setActions(false); setEditing(message); }, style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Edit" }) }), canChange && _jsx(Pressable, { accessibilityRole: "button", onPress: () => leaveMenu(() => setDeleting([message])), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Delete" }) }), pendingStatus === 'failed' && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setActions(false); void client.discardPending(message.clientMessageId).catch(() => setError('The unsent message could not be removed.')); }, style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Remove unsent message" }) }), !mine && state.conversation?.safety?.canReport && _jsx(Pressable, { accessibilityRole: "button", onPress: () => leaveMenu(() => setReportOpen(true)), style: { padding: 12 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 15 }, children: "Report message" }) }), !pendingStatus && onMessageOptions && _jsx(Pressable, { accessibilityRole: "button", onPress: () => leaveMenu(() => onMessageOptions(message)), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "More options" }) }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => setActions(false), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.secondary, fontSize: 16 }, children: "Cancel" }) })] }), menuPosition.above && reactionPicker] }) }) }), reportOpen && _jsx(MessagingSafety, { client: client, state: state, appearance: design, name: participants?.[message.senderId]?.name ?? 'Contact', messageId: message.id, onClose: () => setReportOpen(false) })] })] });
+}
+function MessageDeletion({ messages, onClose }) {
+    const { client, design } = useMessagingUI(), [busy, setBusy] = useState(false), [error, setError] = useState('');
+    useEffect(() => setError(''), [messages]);
+    if (!messages.length)
+        return null;
+    const c = design.colors;
+    return _jsxs(MessagingPopup, { background: chatSurface(c.background), onClose: () => { if (!busy)
+            onClose(); }, children: [_jsxs(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 17, fontWeight: '600' }, children: ["Delete ", messages.length === 1 ? 'message' : messages.length + ' messages', "?"] }), _jsx(Text, { style: { color: c.secondary, marginTop: 8 }, children: "Delete for everyone? Only messages that have not been read, heard or opened can be deleted." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'flex-end', gap: 20, marginTop: 12 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: error ? 'Close message alert' : undefined, disabled: busy, onPress: onClose, style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground }, children: error ? 'OK' : 'Cancel' }) }), !error && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Delete for everyone", disabled: busy, onPress: () => { setBusy(true); void (async () => { try {
+                            for (const message of messages)
+                                await client.deleteMessage(message.id, message.revision ?? 0);
+                            onClose();
+                        }
+                        catch (e) {
+                            setError(e instanceof Error ? e.message : 'This message could not be deleted.');
+                        }
+                        finally {
+                            setBusy(false);
+                        } })(); }, style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "Delete" }) })] })] });
+}
+function MessageSelection() {
+    const { selection, setSelection, setForwarding, setDeleting, setEditing, state, client, design, userId, copyText, saved, saving, toggleSaved } = useMessagingUI();
+    const [error, setError] = useState('');
+    if (!selection.length)
+        return null;
+    const c = design.colors;
+    const ordered = orderChatMessages([...selection].sort((a, b) => BigInt(a.id) < BigInt(b.id) ? -1 : BigInt(a.id) > BigInt(b.id) ? 1 : 0)), enabled = !!state.settings?.enabled && state.conversation?.canSend !== false;
+    const forward = enabled && ordered.every(m => client.canForward(m)), remove = enabled && state.messageActionsAvailable && ordered.every(m => m.senderId === userId && !m.readAt && !m.deleted);
+    return _jsxs(View, { accessibilityLabel: "Selected message actions", style: { flexDirection: 'row', alignItems: 'center', minHeight: 48, paddingHorizontal: 4, gap: 0, backgroundColor: c.background, borderTopWidth: 1, borderTopColor: c.secondary + '25' }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Clear message selection", onPress: () => setSelection([]), style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", color: c.foreground }) }), _jsx(Text, { accessibilityLiveRegion: "polite", accessibilityLabel: selection.length + ' selected', style: { flex: 1, color: c.foreground, fontSize: 15 }, children: selection.length }), selection.length === 1 && !!ordered[0].text && (copyText || Platform.OS === 'web') && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Copy selected message text", onPress: () => { void (copyText ? copyText(ordered[0].text) : navigator.clipboard.writeText(ordered[0].text)).then(() => setSelection([])).catch(() => setError('The text could not be copied.')); }, style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "copy", color: c.accent }) }), selection.length === 1 && client.hasSavedMessages() && ordered[0].kind !== 'poll' && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: saved.some(r => r.key === savedMessageKey(ordered[0])) ? 'Remove selected message from Saved' : 'Save selected message', disabled: saving, onPress: () => void toggleSaved(ordered[0]), style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "bookmark", color: c.accent }) }), forward && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Forward selected messages", onPress: () => { setForwarding(ordered); setSelection([]); }, style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "forward", color: c.accent }) }), remove && selection.length === 1 && ordered[0].kind !== 'poll' && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Edit selected message", onPress: () => { setEditing(ordered[0]); setSelection([]); }, style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "edit", color: c.accent }) }), remove && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Delete selected messages", onPress: () => { setDeleting(ordered); setSelection([]); }, style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "trash", color: c.accent }) }), !!error && _jsxs(MessagingPopup, { background: c.background, onClose: () => setError(''), children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => setError(''), style: { minHeight: 44, alignSelf: 'flex-end', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "OK" }) })] })] });
 }
 export function MessagingList() {
     const context = useMessagingUI();
-    const { state, client, components, design } = context;
-    const Message = components?.Message ?? MessagingBubble;
+    const { state, client, components, design, userId, selection, setSelection } = context;
+    const items = orderChatMessages([...state.messages, ...state.pending.map(p => ({
+            ...p.content, id: 'pending:' + p.clientMessageId, clientMessageId: p.clientMessageId, conversationId: state.conversationId, senderId: userId,
+            createdAt: p.createdAt ?? new Date().toISOString(), readAt: null, pendingStatus: p.status,
+        }))]).reverse();
+    const list = useRef(null);
+    const nearLatest = useRef(true), lastNewest = useRef(''), lastPending = useRef('');
+    const [away, setAway] = useState(false), [newMessages, setNewMessages] = useState(false);
+    const jumpToLatest = (animated = true) => { if (state.historyWindow) {
+        void client.goToLatest().then(() => { list.current?.scrollToOffset({ offset: 0, animated }); nearLatest.current = true; setAway(false); setNewMessages(false); }).catch(() => { });
+        return;
+    } list.current?.scrollToOffset({ offset: 0, animated }); nearLatest.current = true; setAway(false); setNewMessages(false); };
+    useEffect(() => { nearLatest.current = true; lastNewest.current = ''; lastPending.current = ''; setAway(false); setNewMessages(false); list.current?.scrollToOffset({ offset: 0, animated: false }); }, [state.conversationId]);
+    const [highlight, setHighlight] = useState(null);
+    const scrollTarget = useRef(null);
+    useEffect(() => {
+        if (!state.focus)
+            return;
+        const index = items.findIndex(m => m.id === state.focus.messageId);
+        if (index < 0)
+            return;
+        nearLatest.current = false;
+        setAway(true);
+        setHighlight(state.focus.messageId);
+        scrollTarget.current = { index, attempts: 0 };
+        const frame = requestAnimationFrame(() => list.current?.scrollToIndex({ index, viewPosition: .5, animated: false }));
+        const timer = setTimeout(() => { setHighlight(null); scrollTarget.current = null; }, 2500);
+        return () => { cancelAnimationFrame(frame); clearTimeout(timer); };
+    }, [state.focus]);
+    const newest = items[0]?.clientMessageId ?? '', outgoing = state.pending.at(-1)?.clientMessageId ?? '';
+    useEffect(() => {
+        if (newest && newest !== lastNewest.current) {
+            if (!state.historyWindow && nearLatest.current || (outgoing && outgoing !== lastPending.current))
+                requestAnimationFrame(() => jumpToLatest(false));
+            else if (!state.historyWindow)
+                setNewMessages(true);
+        }
+        lastNewest.current = newest;
+        lastPending.current = outgoing;
+    }, [newest, outgoing]);
     const current = useRef(context);
     current.current = context;
     const read = useRef("");
@@ -185,7 +374,7 @@ export function MessagingList() {
     const onVisible = useRef(({ viewableItems }) => {
         const ui = current.current;
         if (ui.active === false || AppState.currentState !== "active" ||
-            !ui.state.settings?.features.readReceipts)
+            !ui.state.inboxAvailable && !ui.state.settings?.features.readReceipts)
             return;
         const visible = viewableItems.filter((v) => v.isViewable && v.item.senderId !== ui.userId).map((v) => v.item).sort((a, b) => BigInt(a.id) > BigInt(b.id) ? -1 : 1);
         const last = visible[0];
@@ -202,18 +391,23 @@ export function MessagingList() {
                 pending.current = "";
         });
     }).current;
-    return (_jsx(FlatList, { data: [...state.messages].reverse(), inverted: true, keyExtractor: (m) => m.id, style: { flex: 1 }, keyboardShouldPersistTaps: "handled", contentContainerStyle: { paddingHorizontal: 12, paddingVertical: 10, flexGrow: 1, justifyContent: "flex-end" }, onViewableItemsChanged: onVisible, viewabilityConfig: {
-            itemVisiblePercentThreshold: 50,
-            minimumViewTime: 500,
-        }, renderItem: ({ item, index }) => {
-            const previous = [...state.messages].reverse()[index + 1];
-            const date = new Date(item.createdAt), start = !previous || date.toDateString() !== new Date(previous.createdAt).toDateString();
-            return _jsxs(View, { children: [start && _jsx(Text, { style: { alignSelf: 'center', fontSize: 12, color: design.colors.secondary, backgroundColor: chatSurface(design.colors.background), borderRadius: 7, paddingHorizontal: 12, paddingVertical: 5, marginTop: 4, marginBottom: 10 }, children: date.toDateString() === new Date().toDateString() ? 'Today' : date.toLocaleDateString([], { month: 'short', day: 'numeric' }) }), _jsx(Message, { message: item })] });
-        }, onEndReached: () => {
-            if (state.hasMore && !state.loading) {
-                void client.loadOlder().catch(() => { });
-            }
-        }, onEndReachedThreshold: 0.2, ListEmptyComponent: _jsx(Text, { style: { color: design.colors.secondary }, children: state.loading ? "Loading messages…" : design.labels.empty }) }));
+    return (_jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsx(FlatList, { ref: list, testID: "messaging-history", maintainVisibleContentPosition: { minIndexForVisible: 0 }, initialNumToRender: 30, maxToRenderPerBatch: 20, onScrollToIndexFailed: info => { const target = scrollTarget.current; if (!target || target.attempts++ >= 5)
+                    return; list.current?.scrollToOffset({ offset: info.averageItemLength * info.index, animated: false }); setTimeout(() => { if (scrollTarget.current === target)
+                    list.current?.scrollToIndex({ index: target.index, viewPosition: .5, animated: false }); }, 60); }, onScroll: event => { const near = event.nativeEvent.contentOffset.y < 80; nearLatest.current = near; setAway(!near); if (near)
+                    setNewMessages(false); }, scrollEventThrottle: 32, data: items, inverted: true, keyExtractor: (m) => m.senderId + ':' + m.clientMessageId, style: { flex: 1 }, keyboardShouldPersistTaps: "handled", contentContainerStyle: { paddingHorizontal: 12, paddingVertical: 10, flexGrow: 1, justifyContent: "flex-end" }, onViewableItemsChanged: onVisible, viewabilityConfig: {
+                    itemVisiblePercentThreshold: 50,
+                    minimumViewTime: 500,
+                }, renderItem: ({ item, index }) => {
+                    const previous = items[index + 1];
+                    const date = new Date(item.createdAt), start = !previous || date.toDateString() !== new Date(previous.createdAt).toDateString();
+                    const checked = selection.some(m => m.id === item.id), selectable = selection.length > 0 && !item.pendingStatus && !item.deleted;
+                    const toggle = () => setSelection(checked ? selection.filter(m => m.id !== item.id) : [...selection, item]);
+                    return _jsxs(View, { testID: highlight === item.id ? 'focused-message' : undefined, style: highlight === item.id || checked ? { backgroundColor: design.colors.accent + '20', borderRadius: 8 } : undefined, children: [start && _jsx(Text, { style: { alignSelf: 'center', fontSize: 12, color: design.colors.secondary, backgroundColor: chatSurface(design.colors.background), borderRadius: 7, paddingHorizontal: 12, paddingVertical: 5, marginTop: 4, marginBottom: 10 }, children: date.toDateString() === new Date().toDateString() ? 'Today' : date.toLocaleDateString([], { month: 'short', day: 'numeric' }) }), _jsx(View, { style: { paddingLeft: selection.length ? 32 : 0 }, pointerEvents: selection.length ? 'none' : 'auto', accessibilityElementsHidden: selection.length > 0, importantForAccessibility: selection.length ? 'no-hide-descendants' : 'auto', ...(Platform.OS === 'web' && selection.length ? { 'aria-hidden': true } : {}), children: components?.Message ? _jsx(components.Message, { message: item }) : _jsx(MessagingBubble, { message: item, pendingStatus: item.pendingStatus }) }), selectable && _jsx(Pressable, { accessibilityRole: "checkbox", accessibilityLabel: 'Select message: ' + (item.text || item.media?.fileName || mediaNames[item.kind] || 'Message'), accessibilityState: { checked }, onPress: toggle, style: { position: 'absolute', inset: 0, justifyContent: 'center' }, children: _jsx(View, { style: { width: 24, height: 24, borderRadius: 12, borderWidth: 1, borderColor: design.colors.accent, backgroundColor: checked ? design.colors.accent : design.colors.background, alignItems: 'center', justifyContent: 'center' }, children: checked && _jsx(MessageIcon, { name: "check", size: 16, color: "#ffffff" }) }) })] });
+                }, onEndReached: () => {
+                    if (state.hasMore && !state.loading && !state.historyError) {
+                        void client.loadOlder().catch(() => { });
+                    }
+                }, onEndReachedThreshold: 0.2, ListHeaderComponent: state.historyWindow && state.hasNewer ? _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Load newer messages", disabled: state.loading, onPress: () => void client.loadNewer().catch(() => { }), style: { padding: 10, minHeight: 44, alignItems: 'center' }, children: _jsx(Text, { style: { color: design.colors.accent }, children: "Load newer messages" }) }) : null, ListFooterComponent: state.messages.length > 0 && (state.loading || state.historyError || state.hasMore) ? _jsx(View, { style: { padding: 10, alignItems: 'center' }, children: state.loading ? _jsx(ActivityIndicator, { accessibilityLabel: "Loading earlier messages", color: design.colors.accent }) : _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: state.historyError ? 'Retry earlier messages' : 'Load earlier messages', onPress: () => void client.loadOlder().catch(() => { }), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: design.colors.accent }, children: state.historyError ? 'Earlier messages could not load. Retry' : 'Load earlier messages' }) }) }) : null, ListEmptyComponent: _jsx(Text, { style: { color: design.colors.secondary }, children: state.loading ? "Loading messages…" : design.labels.empty }) }), (away || state.historyWindow) && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: newMessages ? 'New messages. Go to latest' : 'Go to latest message', onPress: () => jumpToLatest(), style: { position: 'absolute', left: '50%', marginLeft: -22, bottom: 8, width: 44, height: 44, justifyContent: 'center', alignItems: 'center' }, children: _jsx(MessageIcon, { name: "arrow-down", color: design.colors.accent, size: 28 }) }), _jsx(MessageSelection, {})] }));
 }
 /** One horizontal media row on phones and in the browser preview. */
 function AttachmentStrip({ children, label, height, recent = false }) {
@@ -240,30 +434,62 @@ function AttachmentStrip({ children, label, height, recent = false }) {
     return _jsx(ScrollView, { ref: scroll, horizontal: true, accessibilityLabel: label, directionalLockEnabled: true, alwaysBounceVertical: false, showsVerticalScrollIndicator: false, showsHorizontalScrollIndicator: false, style: { height, flexGrow: 0, flexShrink: 0, ...(recent ? { marginTop: 8 } : {}), ...(Platform.OS === 'web' ? { overflowY: 'hidden', touchAction: 'pan-x' } : {}) }, contentContainerStyle: { flexDirection: 'row', alignItems: 'flex-start', gap: 8, paddingHorizontal: recent ? 0 : 8, paddingBottom: recent ? 4 : 2 }, children: children });
 }
 export function MessagingComposer() {
-    const { state, client, design, pickAttachment, attachmentChoices, attachmentPreview, releaseAttachment, reply, setReply, components } = useMessagingUI();
+    const { state, client, design, pickAttachment, attachmentChoices, attachmentPreview, releaseAttachment, prepareAttachment, retainDraftAttachments, reply, setReply, editing, setEditing, components, openAttachment, userId } = useMessagingUI();
     const VoiceComposer = components?.VoiceComposer ?? VoiceMessageComposer;
-    const [draft, setDraft] = useState(""), [busy, setBusy] = useState(false), [error, setError] = useState("");
-    const [selected, setSelected] = useState([]);
-    const selectedRef = useRef(selected);
-    selectedRef.current = selected;
+    const [savedDraft, setDraftState] = useState(state.draft ?? ""), [busy, setBusy] = useState(false), [error, setError] = useState("");
+    const [editDraft, setEditDraft] = useState('');
+    const draft = editing ? editDraft : savedDraft;
+    const setDraft = (value) => { if (editing)
+        setEditDraft(value);
+    else {
+        setDraftState(value);
+        client.setDraft(value);
+    } };
+    useEffect(() => { setEditDraft(editing?.text ?? ''); setError(''); if (editing) {
+        setAttachmentsOpen(false);
+        requestAnimationFrame(() => input.current?.focus());
+    } }, [editing]);
+    useEffect(() => setDraftState(state.draft ?? ''), [state.draft, state.conversationId]);
+    const [normalSelected, setNormalSelected] = useState([]);
     const selectionSequence = useRef(0);
-    useEffect(() => { setSelected(items => { for (const item of items)
-        void releaseAttachment?.(item.media); return []; }); }, [state.conversationId]);
-    useEffect(() => { setSelected(items => items.filter(item => { const allowed = state.settings?.enabled && state.conversation?.canSend !== false && state.settings.features[item.kind]; if (!allowed)
+    useEffect(() => { setNormalSelected(items => { if (!retainDraftAttachments)
+        for (const item of items)
+            void releaseAttachment?.(item.media); return []; }); }, [state.conversationId]);
+    useEffect(() => {
+        if (!state.draftAttachments)
+            return;
+        let active = true;
+        const items = state.draftAttachments.filter(item => item.media && item.kind !== 'text' && item.kind !== 'poll').map(item => ({ id: item.media.assetId, kind: item.kind, media: item.media }));
+        setNormalSelected(items);
+        for (const item of items)
+            if (attachmentPreview && ['image', 'video'].includes(item.kind))
+                void attachmentPreview({ ...item, id: item.id, conversationId: state.conversationId, clientMessageId: item.id, senderId: '', createdAt: new Date().toISOString(), readAt: null }).then(preview => { if (active)
+                    setNormalSelected(current => current.map(value => value.id === item.id ? { ...value, thumbnail: preview?.uri } : value)); }).catch(() => { });
+        return () => { active = false; };
+    }, [state.draftAttachments, attachmentPreview]);
+    useEffect(() => { setNormalSelected(items => items.filter(item => { const allowed = state.settings?.enabled && state.conversation?.canSend !== false && state.settings.features[item.kind]; if (!allowed)
         void releaseAttachment?.(item.media); return allowed; })); if (!state.settings?.enabled || state.conversation?.canSend === false)
         setDraft(''); }, [state.settings, state.conversation?.canSend]);
-    async function sendSelected() {
-        for (const item of selectedRef.current) {
-            // The client owns failed sends and exposes Retry; never leave a second draft copy.
-            setSelected(items => items.filter(value => value.id !== item.id));
-            try {
-                await submit({ kind: item.kind, media: item.media });
-            }
-            finally {
-                void releaseAttachment?.(item.media);
-            }
-        }
-    }
+    const [editSelected, setEditSelected] = useState([]);
+    const editSelectedRef = useRef(editSelected);
+    editSelectedRef.current = editSelected;
+    const editingRef = useRef(editing);
+    editingRef.current = editing;
+    const selected = editing ? editSelected : normalSelected;
+    const setSelected = editing ? setEditSelected : setNormalSelected;
+    const selectedRef = useRef(selected);
+    selectedRef.current = selected;
+    useEffect(() => {
+        let active = true;
+        const original = editing?.media && editing.kind !== 'text' && editing.kind !== 'poll' ? { id: editing.id, kind: editing.kind, media: editing.media } : null;
+        setEditSelected(original ? [original] : []);
+        if (original && attachmentPreview)
+            void attachmentPreview(editing).then(preview => { if (active)
+                setEditSelected(items => items.map(item => item.id === original.id ? { ...item, thumbnail: preview.uri } : item)); }).catch(() => { });
+        return () => { active = false; for (const item of editSelectedRef.current)
+            if (item.media.assetId !== editing?.media?.assetId)
+                void releaseAttachment?.(item.media); };
+    }, [editing?.id]);
     const [pollOpen, setPollOpen] = useState(false);
     useEffect(() => setPollOpen(false), [state.conversationId]);
     const [attachmentsOpen, setAttachmentsOpen] = useState(false);
@@ -284,52 +510,75 @@ export function MessagingComposer() {
     const c = design.colors, features = state.settings?.features, enabled = state.settings?.enabled;
     const library = { image: !!features?.image && design.showPhotoLibrary !== false, video: !!features?.video && design.showVideoLibrary !== false, document: !!features?.document };
     async function submit(content) {
-        await client.send({
+        const outgoing = {
             ...content,
             ...(reply && features?.replies ? { replyTo: reply.id } : {}),
-        });
+        };
+        const prepare = content.media && prepareAttachment && content.kind !== 'text' && content.kind !== 'poll'
+            ? async () => ({ ...outgoing, media: await prepareAttachment(content.kind, content.media) })
+            : undefined;
         setReply(null);
+        await client.send(outgoing, prepare);
+        if (content.media)
+            void releaseAttachment?.(content.media);
     }
     async function send() {
-        if (inFlight.current || (!draft.trim() && !selected.length))
-            return;
-        inFlight.current = true;
-        if (!selected.length && draft.trim()) {
-            // The client adds its pending bubble immediately. Network acknowledgement
-            // must not lock the composer or clear text/quotes typed for the next message.
-            const conversationId = state.conversationId;
-            const content = { kind: 'text', text: draft, ...(reply && features?.replies ? { replyTo: reply.id } : {}) };
-            setDraft('');
-            setReply(null);
+        if (editing) {
+            if (inFlight.current || !selected.length && !draft.trim())
+                return;
+            inFlight.current = true;
+            setBusy(true);
             setError('');
-            requestAnimationFrame(() => { inFlight.current = false; });
+            const current = editing;
             try {
-                await client.send(content);
+                const item = selectedRef.current[0];
+                const replacement = item ? (item.media.assetId === current.media?.assetId ? undefined : { kind: item.kind, media: prepareAttachment ? await prepareAttachment(item.kind, item.media) : item.media }) : null;
+                if (editingRef.current?.id !== current.id || client.getSnapshot().conversationId !== current.conversationId)
+                    return;
+                await client.editMessage(current.id, draft, current.revision ?? 0, replacement);
+                if (client.getSnapshot().conversationId === current.conversationId)
+                    setEditing(null);
             }
-            catch {
-                if (client.getSnapshot().conversationId === conversationId)
-                    setError('Message not sent. Use Retry to send it again.');
+            catch (e) {
+                if (client.getSnapshot().conversationId === current.conversationId)
+                    setError(e instanceof Error ? e.message : 'This message could not be changed.');
+            }
+            finally {
+                inFlight.current = false;
+                setBusy(false);
             }
             return;
         }
-        setBusy(true);
-        setError("");
-        const text = draft;
-        try {
-            await sendSelected();
-            setDraft("");
-            if (text.trim())
-                await submit({ kind: "text", text });
-        }
-        catch {
-            setError("Message not sent. Use Retry to send it again.");
-        }
-        finally {
-            inFlight.current = false;
-            setBusy(false);
-        }
+        if (inFlight.current || (!draft.trim() && !selected.length))
+            return;
+        inFlight.current = true;
+        const conversationId = state.conversationId;
+        const quote = reply && features?.replies ? { replyTo: reply.id } : {};
+        const attachments = [...selectedRef.current];
+        const batchId = attachments.length > 1 ? 'batch-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2) : null;
+        const outgoing = attachments.length ? attachments.map((item, index) => ({ kind: item.kind, media: item.media, ...(batchId ? { attachmentBatch: { id: batchId, index, count: attachments.length } } : {}), ...(index === 0 ? quote : {}), ...(index === attachments.length - 1 && draft.trim() ? { text: draft.trim() } : {}) })) : [{ kind: 'text', text: draft.trim(), ...quote }];
+        setSelected([]);
+        setDraft('');
+        setReply(null);
+        setError('');
+        // Put every item in the chat immediately; uploading must not lock the composer.
+        requestAnimationFrame(() => { inFlight.current = false; });
+        const results = await Promise.allSettled(outgoing.map(async (content) => {
+            const prepare = content.media && prepareAttachment && content.kind !== 'text' && content.kind !== 'poll'
+                ? async () => ({ ...content, media: await prepareAttachment(content.kind, content.media) })
+                : undefined;
+            await client.send(content, prepare);
+            if (content.media)
+                void releaseAttachment?.(content.media);
+        }));
+        if (client.getSnapshot().conversationId === conversationId && results.some(result => result.status === 'rejected') && !client.getSnapshot().pending.some(item => item.status === 'failed'))
+            setError('The message could not be prepared. Please try again.');
     }
     async function pick(kind, source, attachmentId, intent = "send") {
+        if (!editing && selectedRef.current.length >= 10) {
+            setError('Choose up to 10 attachments per message.');
+            return;
+        }
         if (intent === 'send')
             setAttachmentsOpen(false);
         if (inFlight.current)
@@ -339,6 +588,7 @@ export function MessagingComposer() {
             return;
         }
         const conversationId = state.conversationId;
+        const editId = editing?.id;
         const recording = kind === 'voice';
         if (recording && voiceInFlight.current)
             return;
@@ -357,6 +607,10 @@ export function MessagingComposer() {
                 ? { maxDurationMs: (state.settings?.voice?.maxDurationSeconds ?? 60) * 1000, intent: 'attach' }
                 : { ...(source ? { source } : {}), ...(attachmentId ? { attachmentId } : {}), ...(!source ? { intent } : {}), ...(state.settings?.attachments ?? defaultAttachmentLimits())[kind],
                     ...(kind === "video" ? { maxDurationMs: (state.settings?.attachments ?? defaultAttachmentLimits()).video.maxDurationSeconds * 1000 } : {}) });
+            if (media && (client.getSnapshot().conversationId !== conversationId || editingRef.current?.id !== editId)) {
+                void releaseAttachment?.(media);
+                return;
+            }
             if (media && client.getSnapshot().conversationId === conversationId) {
                 setAttachmentsOpen(false);
                 {
@@ -368,7 +622,11 @@ export function MessagingComposer() {
                     }
                     const id = 'attachment-' + (++selectionSequence.current);
                     const thumbnail = attachmentChoices?.find(item => item.id === attachmentId)?.thumbnailUri;
-                    setSelected(items => [...items, { id, kind: actualKind, media, thumbnail }]);
+                    if (editId)
+                        for (const previous of selectedRef.current)
+                            if (previous.media.assetId !== editing?.media?.assetId)
+                                void releaseAttachment?.(previous.media);
+                    setSelected(items => [...(editId ? [] : items), { id, kind: actualKind, media, thumbnail }]);
                     if (!thumbnail && attachmentPreview) {
                         const message = { id, conversationId: conversationId, kind: actualKind, media, senderId: '', clientMessageId: id, createdAt: new Date().toISOString(), readAt: null };
                         void attachmentPreview(message).then(result => setSelected(items => items.map(item => item.id === id ? { ...item, thumbnail: result.uri } : item))).catch(() => { });
@@ -391,43 +649,48 @@ export function MessagingComposer() {
             }
         }
     }
-    function removeSelected(id) { const item = selectedRef.current.find(item => item.id === id); setSelected(items => items.filter(item => item.id !== id)); if (item)
+    function removeSelected(id) { const item = selectedRef.current.find(item => item.id === id); setSelected(items => items.filter(item => item.id !== id)); if (item && (!editing || item.media.assetId !== editing.media?.assetId))
         void releaseAttachment?.(item.media); }
     function renderAttachments(voiceReview, blocked = busy) {
-        return selected.length > 0 || voiceReview ? _jsxs(AttachmentStrip, { label: "Pending attachments", height: selected.some(item => item.kind === 'document') ? 104 : 86, children: [selected.map(item => item.kind === 'voice' && components?.VoiceAttachment ? _jsx(components.VoiceAttachment, { media: item.media, appearance: design, disabled: blocked, onRemove: () => removeSelected(item.id) }, item.id) : _jsxs(View, { style: { width: 88, paddingTop: 8, paddingRight: 10 }, children: [_jsxs(View, { style: { width: 76, height: 76, borderRadius: 9, overflow: 'hidden', backgroundColor: c.incoming, borderWidth: 1, borderColor: c.secondary + '40', alignItems: 'center', justifyContent: 'center' }, children: [item.thumbnail ? _jsx(Image, { source: { uri: item.thumbnail }, accessibilityLabel: item.media.fileName ?? mediaNames[item.kind], resizeMode: "cover", style: { width: '100%', height: '100%' } }) : _jsx(MessageIcon, { name: item.kind === 'voice' ? 'mic' : item.kind, color: c.accent, size: 28 }), item.kind === 'video' && _jsx(View, { style: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 4, backgroundColor: '#0009' }, children: _jsx(Text, { style: { color: '#fff', fontSize: 10 }, children: duration(item.media.durationMs) }) })] }), item.kind === 'document' && _jsx(Text, { numberOfLines: 1, style: { fontSize: 10, color: c.foreground, marginTop: 3 }, children: item.media.fileName ?? mediaNames[item.kind] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Remove ' + (item.media.fileName ?? mediaNames[item.kind]), disabled: blocked, onPress: () => removeSelected(item.id), style: { position: 'absolute', right: 0, top: 0, width: 30, height: 30, alignItems: 'center', justifyContent: 'center' }, children: _jsx(View, { style: { backgroundColor: c.foreground, borderRadius: 11, padding: 3 }, children: _jsx(MessageIcon, { name: "close", size: 16, color: c.background }) }) })] }, item.id)), voiceReview] }) : null;
+        return selected.length > 0 || voiceReview ? _jsxs(AttachmentStrip, { label: "Pending attachments", height: selected.some(item => item.kind === 'document') ? 104 : 86, children: [selected.map(item => item.kind === 'voice' && item.media.assetId !== editing?.media?.assetId && components?.VoiceAttachment ? _jsx(components.VoiceAttachment, { media: item.media, appearance: design, disabled: blocked, onRemove: () => removeSelected(item.id) }, item.id) : _jsxs(View, { style: { width: 88, paddingTop: 8, paddingRight: 10 }, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Preview ' + (item.media.fileName ?? mediaNames[item.kind]), disabled: blocked || !openAttachment, onPress: () => void openAttachment?.({ ...item, id: item.id, clientMessageId: item.id, conversationId: state.conversationId, senderId: userId, createdAt: new Date().toISOString(), readAt: null }).catch(() => setError('This attachment could not be opened.')), style: { width: 76, height: 76, borderRadius: 9, overflow: 'hidden', backgroundColor: c.incoming, borderWidth: 1, borderColor: c.secondary + '40', alignItems: 'center', justifyContent: 'center' }, children: [item.thumbnail ? _jsx(Image, { source: { uri: item.thumbnail }, accessibilityLabel: item.media.fileName ?? mediaNames[item.kind], resizeMode: "cover", style: { width: '100%', height: '100%' } }) : _jsx(MessageIcon, { name: item.kind === 'voice' ? 'mic' : item.kind, color: c.accent, size: 28 }), item.kind === 'video' && _jsx(View, { style: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 4, backgroundColor: '#0009' }, children: _jsx(Text, { style: { color: '#fff', fontSize: 10 }, children: duration(item.media.durationMs) }) })] }), item.kind === 'document' && _jsx(Text, { numberOfLines: 1, style: { fontSize: 10, color: c.foreground, marginTop: 3 }, children: item.media.fileName ?? mediaNames[item.kind] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Remove ' + (item.media.fileName ?? mediaNames[item.kind]), disabled: blocked, onPress: () => removeSelected(item.id), style: { position: 'absolute', right: 0, top: 0, width: 30, height: 30, alignItems: 'center', justifyContent: 'center' }, children: _jsx(View, { style: { backgroundColor: c.foreground, borderRadius: 11, padding: 3 }, children: _jsx(MessageIcon, { name: "close", size: 16, color: c.background }) }) })] }, item.id)), voiceReview] }) : null;
     }
     function renderTextComposer(voice = { hasVoice: false, blocked: false }) {
         const blocked = voice.blocked || busy;
-        return _jsxs(View, { style: { flexDirection: 'row', alignItems: 'flex-end', gap: 2 }, children: [(library.image || library.video || library.document || features?.poll) && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Attach", accessibilityState: { expanded: attachmentsOpen }, disabled: busy || blocked, onPress: () => { if (attachmentsOpen) {
+        return _jsxs(View, { style: { flexDirection: 'row', alignItems: 'flex-end', gap: 2 }, children: [(library.image || library.video || library.document || !editing && features?.poll) && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Attach", accessibilityState: { expanded: attachmentsOpen }, disabled: busy || blocked, onPress: () => { if (attachmentsOpen) {
                         setAttachmentsOpen(false);
                         input.current?.focus();
                     }
                     else {
                         Keyboard.dismiss();
                         setAttachmentsOpen(true);
-                    } }, style: { width: 40, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: attachmentsOpen ? "keyboard" : "plus", color: c.foreground, size: 27 }) }), features?.text && _jsx(View, { style: { flex: 1, minWidth: 0, flexDirection: 'row', alignItems: 'flex-end', borderWidth: 1, borderColor: c.secondary + '30', backgroundColor: chatSurface(c.background), borderRadius: 23 }, children: _jsx(TextInput, { ref: input, accessibilityLabel: design.labels.compose, placeholder: design.labels.compose, placeholderTextColor: c.secondary, value: draft, editable: !blocked, onChangeText: setDraft, onContentSizeChange: e => setInputHeight(Math.max(42, Math.min(120, e.nativeEvent.contentSize.height))), multiline: true, numberOfLines: 1, maxLength: 10000, onFocus: () => setAttachmentsOpen(false), style: { ...(Platform.OS === 'web' ? { outlineStyle: 'none' } : {}), flex: 1, minWidth: 0, minHeight: 42, height: inputHeight, maxHeight: 120, color: c.foreground, fontSize: 16, lineHeight: 21, paddingHorizontal: 13, paddingVertical: 10 } }) }), !features?.text && _jsx(View, { style: { flex: 1 } }), (features?.image || features?.video) && design.showCamera && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Camera", disabled: busy || blocked, onPress: () => void pick(features?.image ? 'image' : 'video', 'camera'), style: { width: 42, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "camera", color: c.foreground, size: 24 }) }), features?.voice && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Voice message", disabled: voicePending || busy || blocked, onPress: () => void pick('voice'), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', opacity: voicePending || busy || blocked ? 0.5 : 1 }, children: _jsx(MessageIcon, { name: "mic", color: c.foreground, size: 25 }) }), (features?.text || selected.length > 0) && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: design.labels.send, disabled: blocked || (!draft.trim() && !voice.sendVoice && !selected.length), onPress: () => { if (voice.sendVoice)
+                    } }, style: { width: 40, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: attachmentsOpen ? "keyboard" : "plus", color: c.foreground, size: 27 }) }), features?.text && _jsx(View, { style: { flex: 1, minWidth: 0, flexDirection: 'row', alignItems: 'flex-end', borderWidth: 1, borderColor: c.secondary + '30', backgroundColor: chatSurface(c.background), borderRadius: 23 }, children: _jsx(TextInput, { ref: input, accessibilityLabel: design.labels.compose, placeholder: design.labels.compose, placeholderTextColor: c.secondary, value: draft, editable: !blocked, onChangeText: setDraft, onContentSizeChange: e => setInputHeight(Math.max(42, Math.min(120, e.nativeEvent.contentSize.height))), multiline: true, numberOfLines: 1, maxLength: 10000, ...(Platform.OS === 'web' ? { onKeyPress: (event) => { const native = event.nativeEvent; if (native.key === 'Enter' && !native.shiftKey && !native.isComposing && native.keyCode !== 229) {
+                                event.preventDefault();
+                                if (!blocked)
+                                    void send();
+                            } } } : {}), onFocus: () => setAttachmentsOpen(false), style: { ...(Platform.OS === 'web' ? { outlineStyle: 'none' } : {}), flex: 1, minWidth: 0, minHeight: 42, height: inputHeight, maxHeight: 120, color: c.foreground, fontSize: 16, lineHeight: 21, paddingHorizontal: 13, paddingVertical: 10 } }) }), !features?.text && _jsx(View, { style: { flex: 1 } }), (features?.image || features?.video) && design.showCamera && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Camera", disabled: busy || blocked, onPress: () => void pick(features?.image ? 'image' : 'video', 'camera'), style: { width: 42, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "camera", color: c.foreground, size: 24 }) }), features?.voice && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Voice message", disabled: voicePending || busy || blocked, onPress: () => void pick('voice'), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', opacity: voicePending || busy || blocked ? 0.5 : 1 }, children: _jsx(MessageIcon, { name: "mic", color: c.foreground, size: 25 }) }), (features?.text || selected.length > 0) && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: editing ? "Save message" : design.labels.send, disabled: blocked || (!draft.trim() && !voice.sendVoice && !selected.length), onPress: () => { if (voice.sendVoice)
                         voice.sendVoice();
                     else
-                        void send(); }, style: { width: 42, height: 42, marginLeft: 4, borderRadius: 21, backgroundColor: c.accent, alignItems: 'center', justifyContent: 'center', opacity: blocked || (!draft.trim() && !voice.sendVoice && !selected.length) ? 0.4 : 1 }, children: _jsx(MessageIcon, { name: "send", color: "#ffffff", size: 21 }) })] });
+                        void send(); }, style: { width: 42, height: 42, marginLeft: 4, borderRadius: 21, backgroundColor: c.accent, alignItems: 'center', justifyContent: 'center', opacity: blocked || (!draft.trim() && !voice.sendVoice && !selected.length) ? 0.4 : 1 }, children: _jsx(MessageIcon, { name: editing ? "check" : "send", color: "#ffffff", size: 21 }) })] });
     }
     if (!enabled || state.conversation?.canSend === false) {
         return (_jsx(Text, { style: { padding: 16, color: c.secondary }, children: state.conversation?.safety?.blockedByMe ? 'You blocked this contact. Use contact options to unblock.' : state.conversation?.canSend === false ? (state.conversation.kind === 'group' ? 'Only members allowed to send can post in this group.' : 'Messaging is unavailable for this conversation.') : design.labels.unavailable }));
     }
-    return (_jsxs(View, { style: { paddingHorizontal: 6, paddingTop: 5, paddingBottom: 6, gap: 6, backgroundColor: chatSurface(c.background) }, children: [reply && (_jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [_jsxs(Text, { style: { flex: 1, color: c.secondary }, children: ["Quoting: ", quoteSummary(reply)] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel quote", onPress: () => setReply(null), children: _jsx(Text, { style: { color: c.foreground }, children: "Cancel" }) })] })), state.settings?.history?.mode === 'last_two' && _jsx(Text, { style: { color: c.secondary, fontSize: 11, textAlign: 'center' }, children: "Only the latest two messages are kept." }), features?.voice ? _jsx(VoiceComposer, { appearance: design, maxSeconds: state.settings?.voice?.maxDurationSeconds ?? 60, busy: busy, onRecord: () => { Keyboard.dismiss(); void pick('voice'); }, renderAttachments: renderAttachments, renderTextComposer: features?.text || selected.length ? renderTextComposer : undefined, actions: _jsxs(_Fragment, { children: [(library.image || library.video || library.document || features?.poll) && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Attach", accessibilityState: { expanded: attachmentsOpen }, disabled: busy, onPress: () => setAttachmentsOpen(!attachmentsOpen), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: attachmentsOpen ? 'close' : 'plus', color: c.foreground, size: 25 }) }), (features?.image || features?.video) && design.showCamera && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Camera", disabled: busy, onPress: () => void pick(features?.image ? 'image' : 'video', 'camera'), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "camera", color: c.foreground, size: 23 }) })] }) }) : _jsxs(_Fragment, { children: [renderAttachments(), renderTextComposer()] }), attachmentsOpen && (library.image || library.video || library.document || features?.poll) && _jsxs(View, { accessibilityLabel: "Attachments", style: { paddingTop: 24, paddingBottom: 16, paddingHorizontal: 8, backgroundColor: chatSurface(c.background) }, children: [_jsxs(View, { style: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start' }, children: [features?.poll && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: "Create poll", disabled: busy, onPress: () => { setAttachmentsOpen(false); setPollOpen(true); }, style: { flex: 1, minWidth: 0, minHeight: 84, alignItems: 'center', gap: 3 }, children: [_jsx(View, { style: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#db7c2412', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "poll", color: "#b76920", size: 28 }) }), _jsx(Text, { style: { color: c.foreground, fontSize: 13 }, children: "Poll" })] }), ['image', 'video', 'document'].filter(kind => library[kind]).map(kind => {
+    return (_jsxs(View, { style: { paddingHorizontal: 6, paddingTop: 5, paddingBottom: 6, gap: 6, backgroundColor: chatSurface(c.background) }, children: [editing && _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsxs(Text, { numberOfLines: 1, style: { flex: 1, color: c.secondary }, children: ["Editing: ", editing.text || editing.media?.fileName] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel editing", disabled: busy, onPress: () => setEditing(null), style: { minHeight: 36, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "Cancel" }) })] }), !editing && reply && (_jsxs(View, { testID: "composer-quote", style: { flexDirection: "row", gap: 8 }, children: [_jsx(View, { style: { flex: 1 }, children: _jsx(QuotedPreview, { message: reply, ink: c.secondary }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel quote", onPress: () => setReply(null), children: _jsx(Text, { style: { color: c.foreground }, children: "Cancel" }) })] })), state.settings?.history?.mode === 'last_two' && _jsx(Text, { style: { color: c.secondary, fontSize: 11, textAlign: 'center' }, children: "Only the latest two messages are kept." }), editing ? _jsxs(_Fragment, { children: [renderAttachments(), renderTextComposer()] }) : features?.voice ? _jsx(VoiceComposer, { appearance: design, maxSeconds: state.settings?.voice?.maxDurationSeconds ?? 60, busy: busy, onRecord: () => { Keyboard.dismiss(); void pick('voice'); }, renderAttachments: renderAttachments, renderTextComposer: features?.text || selected.length ? renderTextComposer : undefined, actions: _jsxs(_Fragment, { children: [(library.image || library.video || library.document || !editing && features?.poll) && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Attach", accessibilityState: { expanded: attachmentsOpen }, disabled: busy, onPress: () => setAttachmentsOpen(!attachmentsOpen), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: attachmentsOpen ? 'close' : 'plus', color: c.foreground, size: 25 }) }), (features?.image || features?.video) && design.showCamera && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Camera", disabled: busy, onPress: () => void pick(features?.image ? 'image' : 'video', 'camera'), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "camera", color: c.foreground, size: 23 }) })] }) }) : _jsxs(_Fragment, { children: [renderAttachments(), renderTextComposer()] }), attachmentsOpen && (library.image || library.video || library.document || features?.poll) && _jsxs(View, { accessibilityLabel: "Attachments", style: { paddingTop: 24, paddingBottom: 16, paddingHorizontal: 8, backgroundColor: chatSurface(c.background) }, children: [_jsxs(View, { style: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start' }, children: [!editing && features?.poll && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: state.conversation?.kind === 'group' ? "Create poll" : "Ask Yes/No question", disabled: busy, onPress: () => { setAttachmentsOpen(false); setPollOpen(true); }, style: { flex: 1, minWidth: 0, minHeight: 84, alignItems: 'center', gap: 3 }, children: [_jsx(View, { style: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#db7c2412', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "poll", color: "#b76920", size: 28 }) }), _jsx(Text, { style: { color: c.foreground, fontSize: 13 }, children: state.conversation?.kind === 'group' ? 'Poll' : 'Yes/No' })] }), ['image', 'video', 'document'].filter(kind => library[kind]).map(kind => {
                                 const color = { image: '#1677e8', video: '#7b58cf', document: '#079ec3' }[kind];
                                 const label = { image: 'Photos', video: 'Videos', document: 'Document' }[kind];
                                 return _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: mediaNames[kind], accessibilityState: { selected: attachmentFilter === kind }, disabled: busy, onPress: () => { if (!attachmentChoices)
                                         void pick(kind);
                                     else
                                         setAttachmentFilter(attachmentFilter === kind ? null : kind); }, style: { flex: 1, minWidth: 0, minHeight: 84, alignItems: 'center', gap: 3 }, children: [_jsx(View, { style: { width: 56, height: 56, borderRadius: 28, backgroundColor: color + (attachmentFilter === kind ? '28' : '12'), borderWidth: attachmentFilter === kind ? 2 : 0, borderColor: color, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: kind, color: color, size: 28 }) }), _jsx(Text, { style: { color: c.foreground, fontSize: 13 }, children: label })] }, kind);
-                            })] }), !!attachmentChoices?.some(item => library[item.kind]) && _jsx(AttachmentStrip, { label: "Recent attachments", height: 116, recent: true, children: attachmentChoices.filter(item => library[item.kind] && (!attachmentFilter || item.kind === attachmentFilter)).map(item => _jsxs(View, { style: { width: 112, height: 112, borderRadius: 10, overflow: 'hidden', backgroundColor: c.incoming, borderWidth: 1, borderColor: c.secondary + '20' }, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Choose ${item.name}`, disabled: busy, onPress: () => void pick(item.kind, undefined, item.id), style: { width: '100%', height: '100%' }, children: [item.thumbnailUri ? _jsx(Image, { source: { uri: item.thumbnailUri }, accessibilityLabel: item.name, resizeMode: "cover", style: { width: '100%', height: '100%' } }) : _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 9, gap: 8 }, children: [_jsx(MessageIcon, { name: item.kind, color: c.accent, size: 30 }), _jsx(Text, { numberOfLines: 2, style: { color: c.incomingText, fontSize: 11, textAlign: 'center' }, children: item.name })] }), item.kind === 'video' && _jsxs(View, { style: { position: 'absolute', bottom: 0, left: 0, right: 0, backgroundColor: '#0008', flexDirection: 'row', alignItems: 'center', gap: 5, padding: 6 }, children: [_jsx(MessageIcon, { name: "play", size: 13, color: "#fff" }), _jsx(Text, { style: { color: '#fff', fontSize: 11 }, children: duration(item.durationMs) })] })] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Preview ${item.name}`, disabled: busy, onPress: () => void pick(item.kind, undefined, item.id, 'preview'), style: { position: 'absolute', top: 0, right: 0, width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(View, { style: { width: 30, height: 30, borderRadius: 15, backgroundColor: '#111b', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "search", size: 18, color: "#fff" }) }) })] }, item.id)) }), attachmentFilter && !attachmentChoices?.some(item => library[item.kind] && item.kind === attachmentFilter) && _jsxs(Text, { style: { color: c.secondary, paddingVertical: 16, textAlign: 'center' }, children: ["No recent ", attachmentFilter === 'image' ? 'photos' : attachmentFilter === 'video' ? 'videos' : 'files', "."] })] }), pollOpen && features?.poll && _jsx(PollComposer, { appearance: design, onSend: poll => submit({ kind: 'poll', poll }), onCancel: () => setPollOpen(false) }), error && (_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }))] }));
+                            })] }), !!attachmentChoices?.some(item => library[item.kind]) && _jsx(AttachmentStrip, { label: "Recent attachments", height: 116, recent: true, children: attachmentChoices.filter(item => library[item.kind] && (!attachmentFilter || item.kind === attachmentFilter)).map(item => _jsxs(View, { style: { width: 112, height: 112, borderRadius: 10, overflow: 'hidden', backgroundColor: c.incoming, borderWidth: 1, borderColor: c.secondary + '20' }, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Choose ${item.name}`, disabled: busy, onPress: () => void pick(item.kind, undefined, item.id), style: { width: '100%', height: '100%' }, children: [item.thumbnailUri ? _jsx(Image, { source: { uri: item.thumbnailUri }, accessibilityLabel: item.name, resizeMode: "cover", style: { width: '100%', height: '100%' } }) : _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 9, gap: 8 }, children: [_jsx(MessageIcon, { name: item.kind, color: c.accent, size: 30 }), _jsx(Text, { numberOfLines: 2, style: { color: c.incomingText, fontSize: 11, textAlign: 'center' }, children: item.name })] }), item.kind === 'video' && _jsxs(View, { style: { position: 'absolute', bottom: 0, left: 0, right: 0, backgroundColor: '#0008', flexDirection: 'row', alignItems: 'center', gap: 5, padding: 6 }, children: [_jsx(MessageIcon, { name: "play", size: 13, color: "#fff" }), _jsx(Text, { style: { color: '#fff', fontSize: 11 }, children: duration(item.durationMs) })] })] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Preview ${item.name}`, disabled: busy, onPress: () => void pick(item.kind, undefined, item.id, 'preview'), style: { position: 'absolute', top: 0, right: 0, width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(View, { style: { width: 30, height: 30, borderRadius: 15, backgroundColor: '#111b', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "search", size: 18, color: "#fff" }) }) })] }, item.id)) }), attachmentFilter && !attachmentChoices?.some(item => library[item.kind] && item.kind === attachmentFilter) && _jsxs(Text, { style: { color: c.secondary, paddingVertical: 16, textAlign: 'center' }, children: ["No recent ", attachmentFilter === 'image' ? 'photos' : attachmentFilter === 'video' ? 'videos' : 'files', "."] })] }), pollOpen && features?.poll && _jsx(PollComposer, { yesNo: state.conversation?.kind !== 'group', appearance: design, onSend: poll => submit({ kind: 'poll', poll }), onCancel: () => setPollOpen(false) }), error && (_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }))] }));
 }
 function Content() {
     const { state, client, components, design, style } = useMessagingUI();
     const Header = components?.Header ?? MessagingHeader, List = components?.List ?? MessagingList, Composer = components?.Composer ?? MessagingComposer;
-    return (_jsxs(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : undefined, style: [{ flex: 1, backgroundColor: design.colors.background }, style], children: [_jsx(Header, {}), _jsx(List, {}), state.error && (_jsx(Text, { accessibilityRole: "alert", style: { padding: 12, color: design.colors.foreground }, children: state.error })), state.pending.map((p) => (_jsxs(View, { style: { padding: 8, alignSelf: "flex-end" }, children: [_jsxs(Text, { style: { color: design.colors.foreground }, children: [p.content.text ?? "Attachment", " \u00B7", " ", p.status === "sending" ? "Sending…" : "Not sent"] }), p.status === "failed" && (_jsx(Pressable, { accessibilityRole: "button", onPress: () => void client.retry(p.clientMessageId).catch(() => { }), children: _jsx(Text, { style: { color: design.colors.accent, padding: 8 }, children: design.labels.retry }) }))] }, p.clientMessageId))), _jsx(Composer, {}, state.conversationId)] }));
+    return (_jsxs(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : undefined, style: [{ flex: 1, backgroundColor: design.colors.background }, style], children: [_jsx(Header, {}), _jsx(List, {}), state.error && (_jsx(Text, { accessibilityRole: "alert", style: { padding: 12, color: design.colors.foreground }, children: state.error })), _jsx(Composer, {}, state.conversationId)] }));
 }
 /** Embed inside your app's safe area and navigation. No engine, push or global audio side effects. */
 export function MessagingScreen(props) {
     return (_jsx(MessagingProvider, { ...props, children: _jsx(Content, {}) }));
 }
+export { MessagingInbox } from './inbox.js';