@robono/messaging-react-native 0.1.0 → 0.3.0

package/dist/popup.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { Keyboard, KeyboardAvoidingView, Modal, Platform, Pressable, SafeAreaView, Text, View, useWindowDimensions } from 'react-native';
+import { MessageIcon } from './icons.js';
+/** Browser hosts can keep settings dialogs inside their embedded chat. */
+export const MessagingPopupSurface = createContext(null);
+export const messagingPopupBackdrop = '#000000d9';
+export const messagingPopupColors = { background: '#000000', foreground: '#ffffff', secondary: '#aaaaaa', incoming: '#202020' };
+/** One title/close row for forms, menus and expanded content. */
+export function MessagingPopupHeader({ title, foreground, onClose, closeLabel = 'Close ' + title.toLowerCase(), disabled = false, back = false }) {
+    return _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8, minHeight: 44, borderBottomWidth: 1, borderBottomColor: '#ffffff18' }, children: [_jsx(Text, { accessibilityRole: "header", style: { flex: 1, color: foreground, fontSize: 17, lineHeight: 23, fontWeight: '600' }, children: title }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: closeLabel, disabled: disabled, accessibilityState: { disabled }, onPress: onClose, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', opacity: disabled ? 0.45 : 1 }, children: _jsx(MessageIcon, { name: back ? 'back' : 'close', color: foreground, size: 24 }) })] });
+}
+// Measure the host and its persistent header, including embedded native layouts.
+const PopupBounds = createContext(null);
+export function MessagingPopupHost({ children }) {
+    const root = useRef(null), header = useRef(null), [revision, setRevision] = useState(0);
+    const changed = useCallback(() => setRevision(value => value + 1), []);
+    const value = useMemo(() => ({ root, header, revision, changed }), [revision, changed]);
+    return _jsx(PopupBounds.Provider, { value: value, children: _jsx(View, { ref: root, collapsable: false, onLayout: changed, style: { flex: 1, minHeight: 0 }, children: children }) });
+}
+export function MessagingPopupHeaderBoundary({ children }) {
+    const bounds = useContext(PopupBounds);
+    return _jsx(View, { ref: bounds?.header, collapsable: false, onLayout: bounds?.changed, children: children });
+}
+/** Content panels occupy the area below the persistent header; confirmations stay compact. */
+export function MessagingPopup({ children, onClose, background, form = false, visible = true, onDismiss, expanded = true, bottomPadding, title, foreground, closeLabel, closeDisabled = false, contentWidth, headerBack = false, withinChat = false, compact = false }) {
+    const ChatSurface = useContext(MessagingPopupSurface), bounds = useContext(PopupBounds), viewport = useWindowDimensions();
+    const [rect, setRect] = useState(null);
+    useLayoutEffect(() => {
+        if (!visible || Platform.OS === 'web' || !bounds)
+            return;
+        let active = true;
+        // Fabric's Android measureInWindow subtracts the activity's system inset,
+        // while the edge-to-edge modal starts at the screen origin. Page coordinates
+        // retain that inset and keep the popup below the actual visible header.
+        const measure = (view, done) => {
+            if (Platform.OS === 'android')
+                view.measure((_x, _y, width, height, x, y) => done(x, y, width, height));
+            else
+                view.measureInWindow(done);
+        };
+        const frame = requestAnimationFrame(() => {
+            const root = bounds.root.current;
+            if (!root)
+                return;
+            measure(root, (x, y, width, height) => {
+                const apply = (top) => { if (active)
+                    setRect({ left: x, top, width, height: Math.max(0, y + height - top) }); };
+                if (bounds.header.current)
+                    measure(bounds.header.current, (_x, hy, _w, hh) => apply(Math.max(y, hy + hh)));
+                else
+                    apply(y);
+            });
+        });
+        return () => { active = false; cancelAnimationFrame(frame); };
+    }, [visible, bounds, viewport.width, viewport.height]);
+    useEffect(() => { if (visible && Platform.OS !== 'web')
+        Keyboard.dismiss(); }, [visible]);
+    const close = useRef(onClose);
+    close.current = onClose;
+    useEffect(() => { if (!visible || Platform.OS !== 'web')
+        return; const escape = (event) => { if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        close.current();
+    } }; document.addEventListener('keydown', escape, true); return () => document.removeEventListener('keydown', escape, true); }, [visible]);
+    const bounded = Platform.OS !== 'web' && !!bounds;
+    const Frame = Platform.OS === 'ios' && !bounded ? SafeAreaView : View;
+    const content = _jsx(Frame, { style: [{ flex: 1, backgroundColor: messagingPopupBackdrop }, bounded ? { position: 'absolute', ...(rect ?? { left: 0, top: 0, width: 0, height: 0 }) } : undefined], children: _jsxs(KeyboardAvoidingView, { testID: "messaging-popup-backdrop", behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: compact ? 24 : 8 }, children: [_jsx(Pressable, { accessible: false, onPress: onClose, style: { position: 'absolute', inset: 0 } }), _jsxs(View, { testID: "messaging-popup-panel", accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: { width: '100%', ...(compact ? { maxWidth: 360, maxHeight: '100%', flexShrink: 1 } : { flex: 1, minHeight: 0 }), backgroundColor: compact ? '#111111' : messagingPopupColors.background, borderRadius: compact ? 20 : 18, paddingHorizontal: compact ? 20 : 8, paddingTop: compact ? 8 : 0, paddingBottom: bottomPadding ?? (compact ? 20 : 4), overflow: 'hidden' }, children: [title && _jsx(MessagingPopupHeader, { title: title, foreground: messagingPopupColors.foreground, onClose: onClose, closeLabel: closeLabel, disabled: closeDisabled, back: headerBack }), contentWidth ? _jsx(View, { style: { ...(compact ? { flexShrink: 1 } : { flex: 1, minHeight: 0 }), width: '100%', maxWidth: contentWidth, alignSelf: 'center', paddingTop: 12 }, children: children }) : children] })] }) });
+    if (Platform.OS === 'web' && ChatSurface)
+        return _jsx(ChatSurface, { visible: visible, title: title, onDismiss: onDismiss, onClose: onClose, children: content });
+    return _jsx(Modal, { visible: visible, statusBarTranslucent: true, navigationBarTranslucent: true, onDismiss: onDismiss, transparent: true, animationType: "fade", onRequestClose: onClose, children: content });
+}

package/dist/quick-send.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type MessagingAppearance } from '@robono/messaging';
+/** Messenger's empty-composer shortcut and anchored picker. Selecting never sends. */
+export declare function QuickSendButton({ choice, empty, enabled, disabled, editing, sendAvailable, appearance, onChoose, onSend, onQuickSend }: {
+    choice?: string;
+    empty: boolean;
+    enabled: boolean;
+    disabled: boolean;
+    editing: boolean;
+    sendAvailable: boolean;
+    appearance: MessagingAppearance;
+    onChoose: (emoji: string) => void;
+    onSend: () => void;
+    onQuickSend: (emoji: string) => void;
+}): React.JSX.Element;

package/dist/quick-send.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MessagingPopupHeader, messagingPopupBackdrop } from './popup.js';
+import { useEffect, useRef, useState } from 'react';
+import { Modal, Platform, Pressable, ScrollView, Text, View, useWindowDimensions } from 'react-native';
+import { quickMessageOptions, validQuickMessage } from '@robono/messaging';
+import { MessageIcon, chatSurface } from './icons.js';
+/** Messenger's empty-composer shortcut and anchored picker. Selecting never sends. */
+export function QuickSendButton({ choice, empty, enabled, disabled, editing, sendAvailable, appearance, onChoose, onSend, onQuickSend }) {
+    const [anchor, setAnchor] = useState(null), held = useRef(false), button = useRef(null), viewport = useWindowDimensions();
+    const emoji = validQuickMessage(choice) ? choice : '👍', quick = empty && enabled && !editing, unavailable = disabled || (!quick && !sendAvailable), c = appearance.colors;
+    useEffect(() => { if (!quick || disabled)
+        setAnchor(null); }, [quick, disabled]);
+    const show = () => { held.current = true; button.current?.measureInWindow((x, y, width) => setAnchor({ x: x + width, y })); };
+    const label = quickMessageOptions.find(option => option.emoji === emoji).label;
+    return _jsxs(_Fragment, { children: [_jsx(Pressable, { ref: button, testID: "quick-send-button", accessibilityRole: "button", accessibilityLabel: quick ? 'Send ' + label : editing ? 'Save message' : appearance.labels.send, accessibilityHint: quick ? 'Hold to choose a different quick message.' : undefined, accessibilityState: { disabled: unavailable, expanded: anchor !== null }, accessibilityActions: quick ? [{ name: 'choose', label: 'Choose quick message' }] : undefined, onAccessibilityAction: event => { if (event.nativeEvent.actionName === 'choose' && quick && !unavailable)
+                    show(); }, disabled: unavailable, delayLongPress: 350, onPressIn: () => { held.current = false; }, onLongPress: quick ? show : undefined, onPress: () => { if (held.current) {
+                    held.current = false;
+                    return;
+                } quick ? onQuickSend(emoji) : onSend(); }, ...(Platform.OS === 'web' ? { onContextMenu: (event) => { if (quick && !unavailable) {
+                        event.preventDefault();
+                        show();
+                    } }, onKeyDown: (event) => { if (quick && !unavailable && (event.key === 'F10' && event.shiftKey || event.key === 'ArrowUp')) {
+                        event.preventDefault();
+                        show();
+                    } } } : {}), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center', opacity: unavailable ? .4 : 1 }, children: quick ? _jsx(Text, { style: { fontSize: 26, lineHeight: 32 }, children: emoji }) : _jsx(MessageIcon, { name: editing ? 'check' : 'send', size: 24, color: c.accent }) }), _jsx(Modal, { visible: anchor !== null, transparent: true, animationType: "fade", onRequestClose: () => setAnchor(null), children: _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1 }, children: [_jsx(Pressable, { accessibilityLabel: "Close quick messages", onPress: () => setAnchor(null), style: { position: 'absolute', inset: 0, backgroundColor: messagingPopupBackdrop } }), _jsxs(View, { style: { position: 'absolute', width: Math.min(304, viewport.width - 24), left: Math.max(12, Math.min((anchor?.x ?? viewport.width) - 304, viewport.width - 316)), top: Math.max(48, Math.min((anchor?.y ?? viewport.height) - 282, viewport.height - 312)), backgroundColor: chatSurface(c.background), borderRadius: 18, borderWidth: 1, borderColor: c.secondary + '40', padding: 8, boxShadow: '0 4px 18px #0005' }, children: [_jsx(MessagingPopupHeader, { title: "Quick message", foreground: c.foreground, closeLabel: "Close quick message picker", onClose: () => setAnchor(null) }), _jsx(ScrollView, { style: { maxHeight: 220 }, keyboardShouldPersistTaps: "handled", contentContainerStyle: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center' }, children: quickMessageOptions.map(item => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: item.label, accessibilityState: { selected: emoji === item.emoji }, onPress: () => { held.current = false; setAnchor(null); onChoose(item.emoji); }, style: { width: 46, height: 44, alignItems: 'center', justifyContent: 'center', borderRadius: 10, backgroundColor: emoji === item.emoji ? c.accent + '20' : 'transparent' }, children: _jsx(Text, { style: { fontSize: 26, lineHeight: 32 }, children: item.emoji }) }, item.emoji)) })] })] }) })] });
+}

package/dist/recent-media.js

@@ -13,6 +13,7 @@ export class RecentMessagingMedia {
         this.now = now;
     }
     storage = {
+        thumbnail: (message, context) => this.source.thumbnail?.(message, context) ?? Promise.resolve(null),
         stream: (message, context) => this.source.stream?.(message, context) ?? Promise.resolve(null),
         upload: (file, context) => this.source.upload(file, context), discard: id => this.source.discard(id),
         download: async (message, context) => {

package/dist/safety.d.ts

@@ -1,11 +1,20 @@
 import React from 'react';
 import type { MessagingClient, MessagingAppearance, MessagingState } from '@robono/messaging';
 /** Uses the authenticated messaging client's durable safety operations, or the host can keep its own UI. */
-export declare function MessagingSafety({ client, state, appearance, name, messageId, onClose }: {
+export declare function MessagingSafety({ client, state, appearance, name, messageId, onClose, onSearch, onDetails, onPins, onSaved, children, menuAnchor }: {
     client: MessagingClient;
     state: MessagingState;
     appearance: MessagingAppearance;
     name: string;
     messageId?: string;
     onClose: () => void;
+    onSearch?: () => void;
+    onDetails?: () => void;
+    onPins?: () => void;
+    onSaved?: () => void;
+    children?: React.ReactNode;
+    menuAnchor?: {
+        x: number;
+        y: number;
+    };
 }): React.JSX.Element;

package/dist/safety.js

@@ -1,14 +1,30 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { messagingPopupColors } from './popup.js';
+import { useEffect, useRef, useState } from 'react';
+import { MessagingPopup } from './popup.js';
+import { MessageIcon } from './icons.js';
+import { Modal, Platform, Pressable, ScrollView, Text, TextInput, View, useWindowDimensions } from 'react-native';
 /** Uses the authenticated messaging client's durable safety operations, or the host can keep its own UI. */
-export function MessagingSafety({ client, state, appearance, name, messageId, onClose }) {
+export function MessagingSafety({ client, state, appearance, name, messageId, onClose, onSearch, onDetails, onPins, onSaved, children, menuAnchor }) {
     const [mode, setMode] = useState(messageId ? 'report' : 'menu');
     const [category, setCategory] = useState(''), [details, setDetails] = useState(''), [busy, setBusy] = useState(false), [error, setError] = useState('');
     const reportRequest = useRef(null), reportContent = useRef('');
-    const c = appearance.colors, safety = state.conversation?.safety, blocked = safety?.blockedByMe;
+    const [visible, setVisible] = useState(true), afterClose = useRef(null);
+    const dismissed = () => { const next = afterClose.current; afterClose.current = null; next?.(); };
+    useEffect(() => { if (!visible && Platform.OS !== 'ios')
+        dismissed(); }, [visible]);
+    useEffect(() => () => { afterClose.current = null; }, [client]);
+    const viewport = useWindowDimensions();
+    useEffect(() => { if (!visible || mode !== 'menu' || !menuAnchor || Platform.OS !== 'web')
+        return; const close = (event) => { if (event.key === 'Escape') {
+        event.stopPropagation();
+        onClose();
+    } }; document.addEventListener('keydown', close, true); return () => document.removeEventListener('keydown', close, true); }, [visible, mode, menuAnchor, onClose]);
+    const search = () => { afterClose.current = onSearch ?? null; setVisible(false); };
+    const c = { ...appearance.colors, ...messagingPopupColors }, safety = state.conversation?.safety, blocked = safety?.blockedByMe;
     const primaryInk = (() => { const hex = c.accent.replace('#', ''); const expanded = hex.length === 3 ? hex.split('').map(x => x + x).join('') : hex; const value = parseInt(expanded, 16); return Number.isFinite(value) && ((value >> 16) * .299 + ((value >> 8) & 255) * .587 + (value & 255) * .114) > 155 ? '#111111' : '#ffffff'; })();
-    const button = (label, press, disabled = false, kind = 'plain') => _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: busy || disabled }, disabled: busy || disabled, onPress: press, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, paddingVertical: 10, justifyContent: 'center', alignItems: kind === 'plain' ? 'flex-start' : 'center', borderRadius: 12, flex: kind === 'plain' ? undefined : 1, backgroundColor: kind === 'primary' ? c.accent : kind === 'danger' ? '#b72d34' : kind === 'cancel' ? c.incoming : 'transparent', opacity: (busy || disabled) ? 0.5 : pressed ? 0.7 : 1 }), children: _jsx(Text, { style: { color: kind === 'primary' ? primaryInk : kind === 'danger' ? '#fff' : c.foreground, fontSize: 16, fontWeight: kind === 'plain' ? '400' : '600' }, children: label }) });
+    const button = (label, press, disabled = false, kind = 'plain') => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label, accessibilityState: { disabled: busy || disabled }, disabled: busy || disabled, onPress: press, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, paddingVertical: 10, justifyContent: 'center', alignItems: kind === 'plain' ? 'flex-start' : 'center', borderRadius: 12, flex: kind === 'plain' ? undefined : 1, backgroundColor: kind === 'primary' ? c.accent : kind === 'danger' ? '#b72d34' : kind === 'cancel' ? c.incoming : 'transparent', opacity: (busy || disabled) ? 0.5 : pressed ? 0.7 : 1 }), children: _jsx(Text, { style: { color: kind === 'primary' ? primaryInk : kind === 'danger' ? '#fff' : c.foreground, fontSize: 16, fontWeight: kind === 'plain' ? '400' : '600' }, children: label }) });
+    const menuRow = (label, icon, press, accessibilityLabel = label) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel, onPress: press, style: ({ pressed }) => ({ minHeight: 44, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 12, backgroundColor: pressed ? '#ffffff0c' : 'transparent' }), children: [_jsx(MessageIcon, { name: icon, color: c.secondary, size: 22 }), _jsx(Text, { style: { flex: 1, color: c.foreground, fontSize: 15, fontWeight: '600' }, children: label })] });
     async function block() { setBusy(true); setError(''); try {
         await client.setBlocked(!blocked);
         onClose();
@@ -42,6 +58,11 @@ export function MessagingSafety({ client, state, appearance, name, messageId, on
             setBusy(false);
         }
     }
-    return _jsx(Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: () => { if (!busy)
-            onClose(); }, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: { flex: 1, backgroundColor: '#0009', justifyContent: 'center', alignItems: 'center', padding: 24 }, children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", accessibilityViewIsModal: true, style: { width: '100%', maxWidth: 360, flexGrow: 0, flexShrink: 1, maxHeight: '90%', backgroundColor: c.background, borderRadius: 20, borderWidth: 1, borderColor: c.secondary + '40' }, contentContainerStyle: { padding: 20, gap: 8 }, children: [_jsx(Text, { accessibilityRole: "header", style: { fontSize: 20, fontWeight: '600', color: c.foreground }, children: mode === 'menu' ? name : mode === 'block' ? `${blocked ? 'Unblock' : 'Block'} ${name}?` : mode === 'sent' ? 'Report sent' : messageId ? 'Report message' : 'Report conversation' }), mode === 'menu' && _jsxs(_Fragment, { children: [safety?.canBlock && button(blocked ? 'Unblock contact' : 'Block contact', () => setMode('block')), safety?.canReport && button('Report', () => setMode('report'))] }), mode === 'block' && _jsx(_Fragment, { children: _jsx(Text, { style: { fontSize: 14, lineHeight: 21, color: c.secondary }, children: blocked ? 'You will be able to message and call each other again. Messages attempted while blocked will not be delivered.' : 'This stops direct messages and calls between you. Your existing chat stays. They will not receive a notification that you blocked them. Shared group messages are not hidden.' }) }), mode === 'report' && _jsxs(_Fragment, { children: [_jsxs(Text, { style: { fontSize: 14, lineHeight: 21, color: c.secondary }, children: [messageId ? 'This message and your reason will be shared with this app’s moderation team.' : 'Up to five recent messages from other people in this conversation and your reason will be shared with this app’s moderation team.', " Report details are kept for up to 30 days. Reporting does not block this contact."] }), ['Spam', 'Harassment', 'Inappropriate content', 'Other'].map(value => _jsxs(Pressable, { accessibilityRole: "radio", accessibilityLabel: value, accessibilityState: { checked: category === value }, disabled: busy, onPress: () => setCategory(value), style: { minHeight: 40, flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx(View, { style: { width: 18, height: 18, borderRadius: 9, borderWidth: 2, borderColor: c.accent, backgroundColor: category === value ? c.accent : 'transparent' } }), _jsx(Text, { style: { color: c.foreground, fontSize: 15 }, children: value })] }, value)), _jsx(TextInput, { accessibilityLabel: "Report details", placeholder: "Tell us what happened (optional)", placeholderTextColor: c.secondary, value: details, onChangeText: setDetails, multiline: true, maxLength: 1800, editable: !busy, style: { color: c.foreground, minHeight: 80, borderWidth: 1, borderColor: c.secondary + '60', borderRadius: 10, padding: 12, fontSize: 15 } })] }), mode === 'sent' && _jsx(Text, { style: { color: c.secondary, fontSize: 15, lineHeight: 21 }, children: "Your report was saved for review. The other person is not notified." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), _jsxs(View, { style: { flexDirection: 'row', gap: 8, marginTop: 8 }, children: [mode !== 'sent' && button('Cancel', onClose, false, 'cancel'), mode === 'block' && button(blocked ? 'Unblock' : 'Block', () => void block(), false, blocked ? 'primary' : 'danger'), mode === 'report' && button(busy ? 'Sending…' : 'Send report', () => void report(), !category && !details.trim(), 'primary'), mode === 'sent' && button('Done', onClose, false, 'primary')] })] }) }) });
+    const choose = (next) => { afterClose.current = () => { setMode(next); setVisible(true); }; setVisible(false); };
+    if (mode === 'menu' && menuAnchor) {
+        const count = Number(!!onSearch) + Number(!!onDetails) + Number(!!onPins) + Number(!!children) + Number(!!safety?.canBlock) + Number(!!safety?.canReport), height = count * 44 + 8;
+        return _jsx(Modal, { visible: visible, transparent: true, animationType: "none", onDismiss: dismissed, onRequestClose: onClose, children: _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1 }, children: [_jsx(Pressable, { accessibilityLabel: "Close contact options", onPress: onClose, style: { position: 'absolute', inset: 0 } }), _jsx(View, { testID: "messaging-contact-dropdown", style: { position: 'absolute', left: menuAnchor.x, top: Math.max(12, Math.min(menuAnchor.y, viewport.height - height - 12)), width: Math.min(240, viewport.width - 24), maxHeight: viewport.height - 24, borderRadius: 16, borderWidth: .5, borderColor: '#ffffff22', backgroundColor: '#151515', paddingVertical: 4, overflow: 'hidden', boxShadow: '0 8px 18px #0006' }, children: _jsxs(ScrollView, { bounces: false, keyboardShouldPersistTaps: "handled", children: [onDetails && menuRow(state.conversation?.kind === 'group' ? 'Group details' : 'Contact details', 'person', () => { afterClose.current = onDetails; setVisible(false); }), onPins && menuRow('Pinned messages', 'bookmark', () => { afterClose.current = onPins; setVisible(false); }), onSearch && menuRow('Search this chat', 'search', search), children && menuRow('Translation', 'translate', () => choose('translation')), safety?.canBlock && menuRow(blocked ? 'Unblock contact' : 'Block contact', 'shield', () => choose('block')), safety?.canReport && menuRow('Report', 'flag-outline', () => choose('report'))] }) })] }) });
+    }
+    return _jsx(MessagingPopup, { compact: mode === 'block' || mode === 'sent', withinChat: mode === 'translation', contentWidth: 640, visible: visible, onDismiss: dismissed, background: c.background, foreground: c.foreground, closeLabel: "Close contact options", closeDisabled: busy, title: mode === 'menu' ? name : mode === 'translation' ? 'Translation' : mode === 'block' ? `${blocked ? 'Unblock' : 'Block'} ${name}?` : mode === 'sent' ? 'Report sent' : messageId ? 'Report message' : 'Report conversation', onClose: () => { if (!busy)
+            onClose(); }, children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", style: { ...(mode === 'block' || mode === 'sent' ? { flexGrow: 0, flexShrink: 1 } : { flex: 1 }), minHeight: 0 }, contentContainerStyle: { gap: 20, paddingBottom: 12 }, children: [mode === 'menu' && _jsxs(_Fragment, { children: [onSearch && _jsx(View, { style: { backgroundColor: '#111111', borderRadius: 12, borderWidth: 1, borderColor: '#ffffff14', overflow: 'hidden' }, children: menuRow('Search this chat', 'search', search) }), children, (safety?.canBlock || safety?.canReport) && _jsxs(View, { style: { backgroundColor: '#111111', borderRadius: 12, borderWidth: 1, borderColor: '#ffffff14', overflow: 'hidden' }, children: [safety?.canBlock && menuRow(blocked ? 'Unblock contact' : 'Block contact', 'shield', () => setMode('block')), safety?.canReport && menuRow('Report', 'flag-outline', () => setMode('report'))] })] }), mode === 'translation' && children, mode === 'block' && _jsx(_Fragment, { children: _jsx(Text, { style: { fontSize: 14, lineHeight: 21, color: c.secondary }, children: blocked ? 'You will be able to message and call each other again. Messages attempted while blocked will not be delivered.' : 'This stops direct messages and calls between you. Your existing chat stays. They will not receive a notification that you blocked them. Shared group messages are not hidden.' }) }), mode === 'report' && _jsxs(_Fragment, { children: [_jsxs(Text, { style: { fontSize: 14, lineHeight: 21, color: c.secondary }, children: [messageId ? 'This message and your reason will be shared with this app’s moderation team.' : 'Up to five recent messages from other people in this conversation and your reason will be shared with this app’s moderation team.', " Report details are kept for up to 30 days. Reporting does not block this contact."] }), ['Spam', 'Harassment', 'Inappropriate content', 'Other'].map(value => _jsxs(Pressable, { accessibilityRole: "radio", accessibilityLabel: value, accessibilityState: { checked: category === value }, disabled: busy, onPress: () => setCategory(value), style: { minHeight: 40, flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx(View, { style: { width: 18, height: 18, borderRadius: 9, borderWidth: 2, borderColor: c.accent, backgroundColor: category === value ? c.accent : 'transparent' } }), _jsx(Text, { style: { color: c.foreground, fontSize: 15 }, children: value })] }, value)), _jsx(TextInput, { accessibilityLabel: "Report details", placeholder: "Tell us what happened (optional)", placeholderTextColor: c.secondary, value: details, onChangeText: setDetails, multiline: true, maxLength: 1800, editable: !busy, style: { color: c.foreground, minHeight: 80, borderWidth: 1, borderColor: c.secondary + '60', borderRadius: 10, padding: 12, fontSize: 15 } })] }), mode === 'sent' && _jsx(Text, { style: { color: c.secondary, fontSize: 15, lineHeight: 21 }, children: "Your report was saved for review. The other person is not notified." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), mode !== 'menu' && mode !== 'translation' && _jsxs(View, { style: { flexDirection: 'row', gap: 8, marginTop: 8 }, children: [(mode === 'block' || mode === 'report') && button('Cancel', onClose, false, 'cancel'), mode === 'block' && button(blocked ? 'Unblock' : 'Block', () => void block(), false, blocked ? 'primary' : 'danger'), mode === 'report' && button(busy ? 'Sending…' : 'Send report', () => void report(), !category && !details.trim(), 'primary'), mode === 'sent' && button('Done', onClose, false, 'primary')] })] }) });
 }

package/dist/saved.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { MessagingAppearance, SavedMessage } from '@robono/messaging';
+/** Same app-sized popup and media viewer as the conversation; no server-history copy. */
+export declare function SavedMessagesPopup({ records, appearance, onClose, onOpen, onRemove }: {
+    records: SavedMessage[];
+    appearance: MessagingAppearance;
+    onClose: () => void;
+    onOpen: (record: SavedMessage) => Promise<void>;
+    onRemove: (key: string) => Promise<void>;
+}): React.JSX.Element;

package/dist/saved.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { messagingPopupColors } from './popup.js';
+import { useEffect, useRef, useState } from 'react';
+import { Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { MessagingPopup } from './popup.js';
+import { MessageIcon } from './icons.js';
+/** Same app-sized popup and media viewer as the conversation; no server-history copy. */
+export function SavedMessagesPopup({ records, appearance, onClose, onOpen, onRemove }) {
+    const c = { ...appearance.colors, ...messagingPopupColors }, [limit, setLimit] = useState(30), [error, setError] = useState(''), [busy, setBusy] = useState(false), [detail, setDetail] = useState(null);
+    const [visible, setVisible] = useState(true), pending = useRef(null), alive = useRef(true);
+    useEffect(() => { alive.current = true; return () => { alive.current = false; pending.current = null; }; }, []);
+    // iOS presents one controller at a time. Finish dismissing Saved before opening
+    // the media controller; otherwise iOS can silently discard the new viewer.
+    async function dismissed() {
+        const record = pending.current;
+        if (!record)
+            return;
+        pending.current = null;
+        try {
+            // Let React remove the dismissed native host before mounting the viewer.
+            // Presenting it in the dismissal callback can leave controls with no window.
+            if (Platform.OS === 'ios')
+                await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+            if (!alive.current)
+                return;
+            await onOpen(record);
+            if (alive.current)
+                onClose();
+        }
+        catch (e) {
+            if (alive.current) {
+                setError(e instanceof Error ? e.message : 'This saved attachment could not be opened.');
+                setBusy(false);
+                setVisible(true);
+            }
+        }
+    }
+    useEffect(() => { if (!visible && Platform.OS !== 'ios')
+        void dismissed(); }, [visible]);
+    function open(record) { if (record.message.kind === 'text') {
+        setDetail(record);
+        return;
+    } if (busy)
+        return; setBusy(true); setError(''); pending.current = record; setVisible(false); }
+    return _jsxs(MessagingPopup, { contentWidth: 640, visible: visible, onDismiss: () => void dismissed(), background: c.background, title: detail ? 'Saved message' : 'Saved', foreground: c.foreground, closeLabel: detail ? 'Back to Saved' : 'Close Saved', closeDisabled: busy, headerBack: !!detail, onClose: () => { if (!busy) {
+            if (detail)
+                setDetail(null);
+            else
+                onClose();
+        } }, children: [!detail && _jsx(Text, { style: { color: c.secondary, fontSize: 13, marginBottom: 12 }, children: "Saved from all chats" }), _jsxs(ScrollView, { style: { flex: 1, minHeight: 0 }, children: [!records.length && _jsx(Text, { style: { color: c.secondary, marginVertical: 16 }, children: "No saved messages yet." }), detail ? _jsxs(_Fragment, { children: [_jsxs(Text, { style: { color: c.secondary, fontSize: 12, marginBottom: 10 }, children: [detail.conversationTitle, " \u00B7 ", new Date(detail.message.createdAt).toLocaleDateString()] }), _jsx(Text, { selectable: true, style: { color: c.foreground, fontSize: 16, lineHeight: 23 }, children: detail.message.text })] }) : records.slice(0, limit).map(record => _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: c.secondary + '20' }, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Open saved message: ' + (record.message.text || record.message.media?.fileName || 'Attachment'), disabled: busy, onPress: () => void open(record), style: { flex: 1, paddingVertical: 14, paddingHorizontal: 8, gap: 4 }, children: [_jsxs(Text, { style: { color: c.secondary, fontSize: 12 }, children: [record.conversationTitle, " \u00B7 ", new Date(record.message.createdAt).toLocaleDateString()] }), _jsx(Text, { numberOfLines: 2, style: { color: c.foreground, fontSize: 15, lineHeight: 20 }, children: record.message.text || record.message.media?.fileName || 'Attachment' }), record.message.media && !!record.message.text && _jsx(Text, { numberOfLines: 1, style: { color: c.secondary, fontSize: 12 }, children: record.message.media.fileName || record.message.kind })] }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Remove saved message: ' + (record.message.text || record.message.media?.fileName || 'Attachment'), disabled: busy, onPress: () => { setBusy(true); setError(''); void onRemove(record.key).catch(e => setError(e instanceof Error ? e.message : 'This saved message could not be removed.')).finally(() => setBusy(false)); }, style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "trash", color: c.secondary, size: 20 }) })] }, record.key))] }), !detail && records.length > limit && _jsx(Pressable, { accessibilityRole: "button", onPress: () => setLimit(n => n + 30), style: { minHeight: 44, justifyContent: 'center', alignSelf: 'flex-end' }, children: _jsx(Text, { style: { color: c.accent }, children: "More saved messages" }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error })] });
+}

package/dist/search.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { MessagingAppearance, MessagingClient } from '@robono/messaging';
+/** Messenger's in-conversation search: keep the chat visible and move between matches. */
+export declare function MessagingSearch({ client, appearance, onClose }: {
+    client: MessagingClient;
+    appearance: MessagingAppearance;
+    onClose: () => void;
+    resolveName?: (id: string) => string;
+}): React.JSX.Element;

package/dist/search.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, Pressable, Text, TextInput, View } from 'react-native';
+import { MessageIcon } from './icons.js';
+/** Messenger's in-conversation search: keep the chat visible and move between matches. */
+export function MessagingSearch({ client, appearance, onClose }) {
+    const c = appearance.colors, [query, setQuery] = useState(''), [messages, setMessages] = useState([]), [index, setIndex] = useState(0), [next, setNext] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState('');
+    const request = useRef(null), generation = useRef(0), timer = useRef(undefined);
+    useEffect(() => () => { generation.current++; request.current?.abort(); clearTimeout(timer.current); }, []);
+    async function focus(message, id) { try {
+        await client.focusMessage(message.id);
+    }
+    catch (e) {
+        if (id === generation.current)
+            setError(e instanceof Error ? e.message : 'This message is unavailable.');
+    } }
+    async function search(more = false) {
+        clearTimeout(timer.current);
+        const term = query.trim();
+        if (!term)
+            return;
+        request.current?.abort();
+        const control = new AbortController();
+        request.current = control;
+        const id = ++generation.current;
+        setBusy(true);
+        setError('');
+        try {
+            const result = await client.search(term, { ...(more && next ? { before: next } : {}), signal: control.signal });
+            if (id !== generation.current)
+                return;
+            const rows = more ? [...messages, ...result.messages.filter(m => !messages.some(old => old.id === m.id))] : result.messages;
+            const target = more ? Math.min(index + 1, Math.max(0, rows.length - 1)) : 0;
+            setMessages(rows);
+            setIndex(target);
+            setNext(result.hasMore ? result.nextCursor : null);
+            if (rows[target])
+                await focus(rows[target], id);
+        }
+        catch (e) {
+            if (id === generation.current && !control.signal.aborted)
+                setError(e instanceof Error ? e.message : 'Search could not be completed. Try again.');
+        }
+        finally {
+            if (id === generation.current)
+                setBusy(false);
+        }
+    }
+    useEffect(() => { if (query.trim())
+        timer.current = setTimeout(() => void search(), 300); return () => clearTimeout(timer.current); }, [query]);
+    function change(value) { generation.current++; request.current?.abort(); clearTimeout(timer.current); setBusy(Boolean(value.trim())); setQuery(value); setMessages([]); setIndex(0); setNext(null); setError(''); }
+    async function move(direction) { if (busy || !messages.length)
+        return; if (direction > 0 && index === messages.length - 1 && next) {
+        await search(true);
+        return;
+    } const target = (index + direction + messages.length) % messages.length; setIndex(target); await focus(messages[target], generation.current); }
+    const nav = (label, icon, direction) => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label, disabled: busy || !messages.length, onPress: () => void move(direction), style: { width: 36, height: 44, alignItems: 'center', justifyContent: 'center', opacity: (busy || !messages.length) ? 0.4 : 1 }, children: _jsx(MessageIcon, { name: icon, size: 20, color: c.foreground }) });
+    return _jsxs(View, { testID: "conversation-search", style: { backgroundColor: c.background, borderBottomWidth: 1, borderBottomColor: c.foreground + '20' }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', paddingLeft: 10, gap: 4 }, children: [_jsx(MessageIcon, { name: "search", size: 18, color: c.secondary }), _jsx(TextInput, { accessibilityLabel: "Search this chat", placeholder: "Search this chat", value: query, onChangeText: change, onSubmitEditing: () => void search(), autoFocus: true, autoCapitalize: "none", autoCorrect: false, maxLength: 200, returnKeyType: "search", placeholderTextColor: c.secondary, style: { flex: 1, minWidth: 0, minHeight: 44, color: c.foreground, fontSize: 15 } }), busy ? _jsx(ActivityIndicator, { accessibilityLabel: "Searching messages", color: c.accent }) : !!query.trim() && _jsx(Text, { accessibilityLiveRegion: "polite", style: { color: c.secondary, fontSize: 12 }, children: messages.length ? `${index + 1}/${messages.length}${next ? '+' : ''}` : '0' }), nav('Previous search result', 'chevron-up', -1), nav('Next search result', 'chevron-down', 1), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close search", onPress: onClose, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", size: 20, color: c.foreground }) })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, paddingHorizontal: 12, paddingBottom: 8, fontSize: 13 }, children: error })] });
+}

package/dist/social.d.ts

@@ -0,0 +1,25 @@
+import React, { type ComponentType, type ReactNode } from 'react';
+import { type MessagingClient, type MessagingMessage } from '@robono/messaging';
+export interface SocialPlayerProps {
+    html: string;
+    frame: string | null;
+    origin: string;
+    provider: string;
+    onError: () => void;
+    onClose: () => void;
+}
+interface SocialMessagePreviewProps {
+    message: MessagingMessage;
+    client: MessagingClient;
+    Player: ComponentType<SocialPlayerProps>;
+    origin: string;
+    accent: string;
+    foreground: string;
+    background: string;
+    onLongPress?: () => void;
+    renderMessage?: (action: ReactNode) => ReactNode;
+}
+export declare const SocialMessagePreview: React.ForwardRefExoticComponent<SocialMessagePreviewProps & React.RefAttributes<{
+    open: () => void;
+}>>;
+export {};

package/dist/social.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useEffect, useState } from 'react';
+import { ActivityIndicator, AppState, Linking, Pressable, Text, View } from 'react-native';
+import { socialShare } from '@robono/messaging';
+import { MessagingPopup } from './popup.js';
+import { MessageIcon } from './icons.js';
+import { messageLinks } from './message-links.js';
+export const SocialMessagePreview = forwardRef(function SocialMessagePreview({ message, client, Player, origin, accent, foreground, background, onLongPress, renderMessage }, ref) {
+    const share = messageLinks(message.text ?? '').map(link => link.url ? socialShare(link.url, origin) : null).find(Boolean);
+    const [opened, setOpened] = useState(null);
+    useImperativeHandle(ref, () => ({ open: () => { if (share && !message.deleted)
+            setOpened({ client, message }); } }), [share, client, message]);
+    const open = opened?.client === client && opened.message.id === message.id && opened.message.conversationId === message.conversationId && opened.message.text === message.text && opened.message.revision === message.revision;
+    useEffect(() => { const sub = AppState.addEventListener('change', state => { if (state !== 'active')
+        setOpened(null); }); return () => sub.remove(); }, []);
+    if (!share || message.deleted)
+        return null;
+    const action = _jsx(Pressable, { testID: "social-preview-action", hitSlop: 6, accessibilityRole: "button", accessibilityLabel: `Play ${share.provider} preview`, onLongPress: onLongPress, onPress: event => { event.stopPropagation(); setOpened({ client, message }); }, style: ({ pressed }) => ({ flexShrink: 0, width: 32, height: 32, borderRadius: 16, borderWidth: 1, borderColor: accent + '70', backgroundColor: accent + (pressed ? '30' : '0d'), flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }), children: _jsx(MessageIcon, { name: "play", color: accent, size: 16 }) });
+    return _jsxs(_Fragment, { children: [renderMessage ? renderMessage(action) : action, open && _jsx(SocialPreviewPopup, { message: message, client: client, Player: Player, origin: origin, provider: share.provider, url: share.url, accent: accent, foreground: foreground, background: background, onClose: () => setOpened(null) }, message.id)] });
+});
+function SocialPreviewPopup({ message, client, Player, origin, provider, url, accent, foreground, background, onClose }) {
+    const [preview, setPreview] = useState(null), [busy, setBusy] = useState(true), [error, setError] = useState('');
+    useEffect(() => { let active = true; void client.socialPreview(message.id, origin).then(result => { if (active) {
+        setPreview(result);
+        if (!result.html)
+            setError('This post cannot be played here. Open the original below.');
+    } }).catch(() => { if (active)
+        setError('This preview could not be loaded. Open the original below.'); }).finally(() => { if (active)
+        setBusy(false); }); return () => { active = false; }; }, [client, message.id, origin]);
+    return _jsxs(MessagingPopup, { expanded: true, bottomPadding: 4, background: "#000000", title: provider, foreground: "#ffffff", closeLabel: "Close social preview", onClose: onClose, children: [busy && _jsx(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, children: _jsx(ActivityIndicator, { accessibilityLabel: "Loading social preview", color: accent }) }), !!preview?.html && _jsx(View, { testID: "social-preview-player", style: { flex: 1, minHeight: 0, overflow: 'hidden', borderRadius: 10 }, children: _jsx(Player, { html: preview.html, frame: preview.frame, origin: origin, provider: provider, onClose: onClose, onError: () => setError('This preview is unavailable. Open the original below.') }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#ffffff', fontSize: 13, paddingVertical: 8 }, children: error }), _jsx(Pressable, { accessibilityRole: "link", accessibilityLabel: `Open ${provider}`, onPress: () => { void Linking.openURL(url).catch(() => setError('This link could not be opened.')); }, style: { minHeight: 44, justifyContent: 'center' }, children: _jsxs(Text, { style: { color: accent, fontWeight: '600' }, children: ["Open ", provider] }) })] });
+}

package/dist/translation-settings.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type TranslationPreference, type MessagingClient, type MessagingAppearance } from '@robono/messaging';
+/** The choice belongs to the conversation, never to an individual message. */
+export declare function TranslationSettings({ client, appearance, preference, language, sourceLanguage, voiceAvailable, onSaved }: {
+    client: MessagingClient;
+    appearance: MessagingAppearance;
+    preference?: TranslationPreference;
+    language?: string;
+    sourceLanguage?: string;
+    voiceAvailable: boolean;
+    onSaved: () => void;
+}): React.JSX.Element;

package/dist/translation-settings.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageIcon } from './icons.js';
+import { messagingPopupColors } from './popup.js';
+import { useState } from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+import { normalizeLanguageCode, supportedLanguages, supportedLanguageLabel } from '@robono/messaging';
+/** The choice belongs to the conversation, never to an individual message. */
+export function TranslationSettings({ client, appearance, preference, language, sourceLanguage, voiceAvailable, onSaved }) {
+    const [value, setValue] = useState(() => preference ?? { mode: 'off', language: normalizeLanguageCode(language ?? Intl.DateTimeFormat().resolvedOptions().locale) ?? 'en', sourceLanguage: normalizeLanguageCode(sourceLanguage) });
+    const [choosing, setChoosing] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState('');
+    const c = { ...appearance.colors, ...messagingPopupColors };
+    return _jsxs(View, { style: { gap: 8 }, children: [_jsx(Text, { style: { fontSize: 13, fontWeight: '600', color: c.secondary, paddingHorizontal: 4 }, children: "Translation" }), _jsxs(View, { style: { backgroundColor: '#111111', borderRadius: 12, borderWidth: 1, borderColor: '#ffffff14', padding: 12, gap: 4 }, children: [_jsx(View, { accessibilityRole: "radiogroup", style: { flexDirection: 'row', borderWidth: 1, borderColor: '#ffffff14', borderRadius: 9, overflow: 'hidden', padding: 3, gap: 3 }, children: ['off', 'text', 'voice'].map(mode => _jsx(Pressable, { accessibilityRole: "radio", accessibilityLabel: 'Translation ' + mode, accessibilityState: { checked: value.mode === mode, disabled: busy || mode === 'voice' && !voiceAvailable }, disabled: busy || mode === 'voice' && !voiceAvailable, onPress: () => setValue(v => ({ ...v, mode })), style: { flex: 1, minHeight: 36, borderRadius: 6, alignItems: 'center', justifyContent: 'center', backgroundColor: value.mode === mode ? c.accent + '25' : 'transparent', opacity: mode === 'voice' && !voiceAvailable ? .4 : 1 }, children: _jsx(Text, { style: { color: value.mode === mode ? c.accent : c.secondary, fontSize: 14, fontWeight: '600' }, children: mode === 'off' ? 'Off' : mode === 'text' ? 'Text' : 'Voice' }) }, mode)) }), ['sourceLanguage', 'language'].map(field => _jsxs(View, { children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: field === 'language' ? 'Translation language' : 'Incoming language', disabled: busy, onPress: () => setChoosing(choosing === field ? null : field), style: { minHeight: 48, flexDirection: 'row', alignItems: 'center', gap: 10, borderBottomWidth: field === 'sourceLanguage' ? 1 : 0, borderBottomColor: '#ffffff14' }, children: [_jsx(Text, { style: { flex: 1, color: c.secondary, fontSize: 14 }, children: field === 'language' ? 'Translate into' : 'Messages in' }), _jsx(Text, { style: { color: c.accent, fontSize: 15, flexShrink: 1, textAlign: 'right' }, children: value[field] ? supportedLanguageLabel(value[field]) : 'Choose language' }), _jsx(MessageIcon, { name: choosing === field ? 'chevron-up' : 'chevron-down', color: c.secondary, size: 16 })] }), choosing === field && _jsx(ScrollView, { style: { maxHeight: 180 }, keyboardShouldPersistTaps: "handled", children: supportedLanguages.map(item => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Choose ' + item.name, onPress: () => { setValue(v => ({ ...v, [field]: item.code })); setChoosing(null); }, style: { minHeight: 40, paddingHorizontal: 8, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground }, children: item.name }) }, item.code)) })] }, field)), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Save translation preference", disabled: busy, onPress: () => { if (value.mode !== 'off' && !value.sourceLanguage) {
+                            setError('Choose the incoming language once for this conversation.');
+                            return;
+                        } setError(''); setBusy(true); void client.setTranslationPreference(value).then(onSaved).catch(() => setError('The translation preference could not be saved. Try again.')).finally(() => setBusy(false)); }, style: { minHeight: 40, minWidth: 96, paddingHorizontal: 18, marginTop: 8, alignSelf: 'flex-end', alignItems: 'center', justifyContent: 'center', borderRadius: 9, backgroundColor: c.accent, opacity: busy ? 0.5 : 1 }, children: _jsx(Text, { style: { color: '#111111', fontSize: 14, fontWeight: '600' }, children: busy ? 'Saving…' : 'Save' }) })] })] });
+}

package/dist/use-quote-gesture.d.ts

@@ -1,7 +1,11 @@
 import { Animated } from 'react-native';
-export declare function useQuoteGesture(enabled: boolean, outgoing: boolean, quote: () => void): {
+export declare const messageInfoRevealWidth = 176;
+export declare const messageReplyRevealWidth = 104;
+export declare function useQuoteGesture(enabled: boolean, outgoing: boolean, quote: (() => void) | undefined, details?: () => void): {
     offset: number | Animated.Value;
     webRef: import("react").RefObject<HTMLElement | null> | undefined;
+    infoLoaded: boolean;
+    infoOpacity: number | Animated.AnimatedInterpolation<string | number>;
     revealOpacity: number | Animated.AnimatedInterpolation<string | number>;
     revealWebStyle: {
         transitionProperty: string;

package/dist/use-quote-gesture.js

@@ -1,12 +1,17 @@
 import { useEffect, useRef, useState } from 'react';
-import { Animated, PanResponder, Platform } from 'react-native';
-const threshold = 48;
-export function useQuoteGesture(enabled, outgoing, quote) {
+import { Animated, Easing, I18nManager, PanResponder, Platform } from 'react-native';
+// Same travel, trigger and return timing as Messenger's MessageSwipeReveal.
+export const messageInfoRevealWidth = 176;
+export const messageReplyRevealWidth = 104;
+const threshold = 82;
+export function useQuoteGesture(enabled, outgoing, quote, details) {
     const offset = useRef(new Animated.Value(0)).current;
     const [webOffset, setWebOffset] = useState(0);
     const [webDragging, setWebDragging] = useState(false);
-    const current = useRef({ enabled, direction: outgoing ? -1 : 1, quote });
-    current.current = { enabled, direction: outgoing ? -1 : 1, quote };
+    const direction = (outgoing !== !!I18nManager.isRTL) ? -1 : 1;
+    const [infoLoaded, setInfoLoaded] = useState(false);
+    const current = useRef({ enabled, direction, quote, details });
+    current.current = { enabled, direction, quote, details };
     const suppressUntil = useRef(0);
     const reset = () => {
         if (Platform.OS === 'web') {
@@ -14,13 +19,21 @@ export function useQuoteGesture(enabled, outgoing, quote) {
             setWebOffset(0);
         }
         else
-            Animated.spring(offset, { toValue: 0, useNativeDriver: true, speed: 28, bounciness: 0 }).start();
+            Animated.timing(offset, { toValue: 0, duration: 150, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
+    };
+    const accepts = (dx, dy) => {
+        const { enabled, direction, quote } = current.current;
+        return enabled && Math.abs(dx) >= (Platform.OS === 'ios' ? 10 : 8) &&
+            Math.abs(dx) >= Math.abs(dy) * (Platform.OS === 'ios' ? .55 : 1.15) &&
+            (dx * direction < 0 || !!quote && dx * direction > 0);
     };
-    const accepts = (dx, dy) => current.current.enabled &&
-        dx * current.current.direction > 10 && Math.abs(dx) > Math.abs(dy) * 1.5;
     const move = (dx) => {
         suppressUntil.current = Date.now() + 400;
-        const value = current.current.direction * Math.max(0, Math.min(72, dx * current.current.direction));
+        const info = dx * current.current.direction < 0;
+        if (info)
+            setInfoLoaded(true);
+        const limit = info ? messageInfoRevealWidth : current.current.quote ? messageReplyRevealWidth : 0;
+        const value = Math.sign(dx) * Math.min(limit, Math.abs(dx));
         if (Platform.OS === 'web') {
             setWebDragging(true);
             setWebOffset(value);
@@ -29,20 +42,23 @@ export function useQuoteGesture(enabled, outgoing, quote) {
             offset.setValue(value);
     };
     const finish = (dx, cancelled = false) => {
+        suppressUntil.current = Date.now() + 400;
         if (!cancelled && current.current.enabled && dx * current.current.direction >= threshold)
-            current.current.quote();
+            current.current.quote?.();
+        else if (!cancelled && current.current.enabled && dx * current.current.direction <= -threshold)
+            current.current.details?.();
         reset();
     };
     const responder = useRef(PanResponder.create({
         onStartShouldSetPanResponder: () => { suppressUntil.current = 0; return false; },
         onStartShouldSetPanResponderCapture: () => { suppressUntil.current = 0; return false; },
-        onMoveShouldSetPanResponderCapture: (_, gesture) => gesture.numberActiveTouches === 1 && accepts(gesture.dx, gesture.dy),
+        onMoveShouldSetPanResponderCapture: (_, gesture) => Platform.OS === 'ios' && gesture.numberActiveTouches === 1 && accepts(gesture.dx, gesture.dy),
         onMoveShouldSetPanResponder: (_, gesture) => accepts(gesture.dx, gesture.dy),
         onPanResponderGrant: () => offset.stopAnimation(),
         onPanResponderMove: (_, gesture) => move(gesture.dx),
         onPanResponderRelease: (_, gesture) => finish(gesture.dx),
         onPanResponderTerminate: () => finish(0, true),
-        onPanResponderTerminationRequest: () => true,
+        onPanResponderTerminationRequest: () => Platform.OS !== 'ios',
     })).current;
     const pointer = useRef(null);
     const webHandlers = {
@@ -67,7 +83,7 @@ export function useQuoteGesture(enabled, outgoing, quote) {
                 event.preventDefault();
                 move(dx);
             }
-            else if (Math.abs(dy) > 10 || dx * current.current.direction < -10)
+            else if (Math.abs(dy) > 10 || !current.current.quote && dx * current.current.direction > 10)
                 pointer.current = null;
         },
         onPointerUp: (event) => {
@@ -118,10 +134,12 @@ export function useQuoteGesture(enabled, outgoing, quote) {
     }, []);
     return { offset: Platform.OS === 'web' ? webOffset : offset,
         webRef: Platform.OS === 'web' ? webRef : undefined,
-        revealOpacity: Platform.OS === 'web' ? Math.min(1, Math.abs(webOffset) / threshold)
-            : offset.interpolate({ inputRange: outgoing ? [-threshold, 0] : [0, threshold], outputRange: outgoing ? [1, 0] : [0, 1], extrapolate: 'clamp' }),
-        revealWebStyle: Platform.OS === 'web' ? { transitionProperty: 'opacity', transitionDuration: webDragging ? '0ms' : '160ms' } : {},
-        webStyle: Platform.OS === 'web' ? { transitionProperty: 'transform', transitionDuration: webDragging ? '0ms' : '160ms', transitionTimingFunction: 'ease-out' } : {},
+        infoLoaded,
+        infoOpacity: Platform.OS === 'web' ? Math.min(1, Math.max(0, -webOffset * direction) / 24) : offset.interpolate({ inputRange: direction === 1 ? [-24, -8, 0] : [0, 8, 24], outputRange: direction === 1 ? [1, .35, 0] : [0, .35, 1], extrapolate: 'clamp' }),
+        revealOpacity: Platform.OS === 'web' ? Math.min(1, Math.max(0, webOffset * direction) / messageReplyRevealWidth)
+            : offset.interpolate({ inputRange: direction === -1 ? [-messageReplyRevealWidth, -18, 0] : [0, 18, messageReplyRevealWidth], outputRange: direction === -1 ? [1, .35, 0] : [0, .35, 1], extrapolate: 'clamp' }),
+        revealWebStyle: Platform.OS === 'web' ? { transitionProperty: 'opacity', transitionDuration: webDragging ? '0ms' : '150ms' } : {},
+        webStyle: Platform.OS === 'web' ? { transitionProperty: 'transform', transitionDuration: webDragging ? '0ms' : '150ms', transitionTimingFunction: 'cubic-bezier(0.215,0.61,0.355,1)' } : {},
         handlers: Platform.OS === 'web' ? {} : responder.panHandlers,
         suppressPress: () => Date.now() < suppressUntil.current };
 }