@robono/messaging-react-native 0.1.0 → 0.3.0

package/dist/account.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/** Profile and account actions belong to the customer's sign-in system. */
+export interface MessagingAccount {
+    name: string;
+    avatarUrl?: string;
+    phone?: string;
+    email?: string;
+    onEditProfile?: () => void | Promise<void>;
+    onSignOut?: () => void | Promise<void>;
+}
+export declare function MessagingAccountScreen({ account, companyName, onClose }: {
+    account?: MessagingAccount;
+    companyName: string;
+    onClose: () => void;
+}): React.JSX.Element;

package/dist/account.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Image, Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { MessagingPopup, messagingPopupColors as c } from './popup.js';
+import { MessageIcon } from './icons.js';
+export function MessagingAccountScreen({ account, companyName, onClose }) {
+    const [busy, setBusy] = useState(false), [error, setError] = useState(''), [visible, setVisible] = useState(true), pending = useRef(null);
+    const dismissed = () => { const action = pending.current; pending.current = null; if (action)
+        requestAnimationFrame(() => void run(action)); };
+    useEffect(() => { if (!visible && Platform.OS !== 'ios')
+        dismissed(); }, [visible]);
+    const begin = (action) => { if (busy)
+        return; setBusy(true); pending.current = action; setVisible(false); };
+    const run = async (action) => { setBusy(true); setError(''); try {
+        await action();
+        onClose();
+    }
+    catch {
+        setVisible(true);
+        setError('The change could not be completed. Please try again.');
+    }
+    finally {
+        setBusy(false);
+    } };
+    return _jsx(MessagingPopup, { visible: visible, onDismiss: dismissed, title: "Account", closeLabel: "Close account", closeDisabled: busy, background: c.background, contentWidth: 640, onClose: () => { if (!busy)
+            onClose(); }, children: _jsxs(ScrollView, { contentContainerStyle: { gap: 16, paddingBottom: 12 }, children: [_jsxs(View, { style: { backgroundColor: '#111111', borderRadius: 16, padding: 16, gap: 14 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 14 }, children: [account?.avatarUrl ? _jsx(Image, { source: { uri: account.avatarUrl }, style: { width: 56, height: 56, borderRadius: 28 } }) : _jsx(View, { style: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#252525', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "person-circle-outline", color: c.foreground, size: 36 }) }), _jsxs(View, { style: { flex: 1, gap: 4 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 20, fontWeight: '600' }, children: account?.name ?? 'Your account' }), _jsx(Text, { style: { color: c.secondary, fontSize: 14 }, children: companyName })] })] }), account?.phone && _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: account.phone }), account?.email && _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: account.email }), account?.onEditProfile && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: "Edit profile", disabled: busy, onPress: () => begin(account.onEditProfile), style: { minHeight: 44, flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx(MessageIcon, { name: "edit", color: c.foreground, size: 20 }), _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Edit profile" })] })] }), account?.onSignOut && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Sign out", disabled: busy, onPress: () => begin(account.onSignOut), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Sign out" }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 15 }, children: error })] }) });
+}

package/dist/call-message.js

@@ -47,7 +47,13 @@ export function UnansweredCallMessage({ callId, onDismiss }) {
                 setOption(current);
                 return;
             }
-            const media = await pickAttachment(current.kind, { maxDurationMs: current.maxDurationMs, ...(current.kind === 'video' ? { source: 'call-video' } : {}), intent: 'attach' });
+            const selected = await pickAttachment(current.kind, { maxCount: 1, maxDurationMs: current.maxDurationMs, ...(current.kind === 'video' ? { source: 'call-video' } : {}), intent: 'attach' });
+            const items = selected ? (Array.isArray(selected) ? selected : [selected]) : [];
+            if (items.length > 1) {
+                items.forEach(item => void release.current?.(item));
+                throw Error('Choose one call message.');
+            }
+            const media = items[0];
             if (!media)
                 return;
             if (id !== generation.current || client.getSnapshot().conversationId !== conversation) {

package/dist/calling.js

@@ -2,21 +2,17 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createContext, useContext, useSyncExternalStore } from 'react';
 import { Pressable, View, Text } from 'react-native';
 import { RobonoIcon } from './visual/RobonoIcon.js';
-import { MessagingScreen, MessagingProvider, MessagingHeader, MessagingComposer, useMessagingUI } from './index.js';
+import { MessagingScreen, MessagingProvider, MessagingHeader, MessagingComposer } from './index.js';
 import { UnansweredCallMessage } from './call-message.js';
 export { UnansweredCallMessage } from './call-message.js';
-const Action = createContext(null);
 const FollowUp = createContext(null);
 function CallingMessageComposer() { const follow = useContext(FollowUp); return _jsxs(_Fragment, { children: [follow && _jsx(UnansweredCallMessage, { callId: follow.callId, onDismiss: follow.dismiss }), _jsx(MessagingComposer, {})] }); }
 /** Optional call entry in the standard message header. The host controls eligibility and admission. */
-export function MessagingCallHeader() {
-    const action = useContext(Action), { design, state } = useMessagingUI();
-    const allowed = state.conversation?.canSend !== false;
-    return _jsxs(MessagingHeader, { children: [allowed && action?.onCall && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: action.label, onPress: action.onCall, style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(RobonoIcon, { name: "phone", size: 24, color: design.colors.foreground }) }), allowed && action?.onVideoCall && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: action.videoLabel, onPress: action.onVideoCall, style: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(RobonoIcon, { name: "video", size: 24, color: design.colors.foreground }) })] });
-}
-export function MessagingCallingScreen({ onCall, onVideoCall, videoCallLabel = 'Video call', callLabel = 'Voice call', components, unansweredCallId, onDismissCallMessage, ...props }) {
+export function MessagingCallHeader() { return _jsx(MessagingHeader, {}); }
+export function MessagingCallingScreen({ onCall, onVideoCall, videoCallLabel = 'Video call', callLabel = 'Robono call', components, unansweredCallId, onDismissCallMessage, ...props }) {
     const state = useSyncExternalStore(props.client.subscribe, props.client.getSnapshot, props.client.getSnapshot);
     const design = props.appearance ?? state.settings?.appearance;
+    const screenProps = { ...props, callActions: { ...props.callActions, ...(onCall ? { voice: onCall, voiceLabel: callLabel } : {}), ...(onVideoCall ? { video: onVideoCall, videoLabel: videoCallLabel } : {}) } };
     const callingOnly = (onCall || onVideoCall) && design && state.settings && !state.settings.enabled;
-    return _jsx(Action.Provider, { value: onCall || onVideoCall ? { onCall, onVideoCall, label: callLabel, videoLabel: videoCallLabel } : null, children: _jsx(FollowUp.Provider, { value: unansweredCallId && onDismissCallMessage ? { callId: unansweredCallId, dismiss: onDismissCallMessage } : null, children: callingOnly ? _jsx(MessagingProvider, { ...props, children: _jsxs(View, { style: [{ flex: 1, backgroundColor: design.colors.background }, props.style], children: [_jsx(MessagingCallHeader, {}), _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 24, padding: 24 }, children: [_jsx(Text, { style: { fontSize: 28, fontWeight: '600', color: design.colors.foreground }, children: props.contact.name }), onCall && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Start ${callLabel.toLowerCase()}`, onPress: onCall, style: { minHeight: 56, minWidth: 160, borderRadius: 28, backgroundColor: design.colors.incoming, alignItems: 'center', justifyContent: 'center', padding: 16, flexDirection: 'row', gap: 12 }, children: [_jsx(RobonoIcon, { name: "phone", size: 24, color: design.colors.incomingText }), _jsx(Text, { style: { fontSize: 18, color: design.colors.incomingText }, children: callLabel })] }), onVideoCall && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Start ${videoCallLabel.toLowerCase()}`, onPress: onVideoCall, style: { minHeight: 56, padding: 16, borderRadius: 28, backgroundColor: design.colors.incoming, flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx(RobonoIcon, { name: "video", size: 24, color: design.colors.incomingText }), _jsx(Text, { style: { color: design.colors.incomingText, fontSize: 18 }, children: videoCallLabel })] })] })] }) }) : _jsx(MessagingScreen, { ...props, components: { Header: MessagingCallHeader, Composer: CallingMessageComposer, ...components } }) }) });
+    return _jsx(FollowUp.Provider, { value: unansweredCallId && onDismissCallMessage ? { callId: unansweredCallId, dismiss: onDismissCallMessage } : null, children: callingOnly ? _jsx(MessagingProvider, { ...screenProps, children: _jsxs(View, { style: [{ flex: 1, backgroundColor: design.colors.background }, props.style], children: [_jsx(MessagingCallHeader, {}), _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 24, padding: 24 }, children: [_jsx(Text, { style: { fontSize: 28, fontWeight: '600', color: design.colors.foreground }, children: props.contact.name }), onCall && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Start ${callLabel.toLowerCase()}`, onPress: onCall, style: { minHeight: 56, minWidth: 160, borderRadius: 28, backgroundColor: design.colors.incoming, alignItems: 'center', justifyContent: 'center', padding: 16, flexDirection: 'row', gap: 12 }, children: [_jsx(RobonoIcon, { name: "phone", size: 24, color: design.colors.incomingText }), _jsx(Text, { style: { fontSize: 18, color: design.colors.incomingText }, children: callLabel })] }), onVideoCall && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `Start ${videoCallLabel.toLowerCase()}`, onPress: onVideoCall, style: { minHeight: 56, padding: 16, borderRadius: 28, backgroundColor: design.colors.incoming, flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx(RobonoIcon, { name: "video", size: 24, color: design.colors.incomingText }), _jsx(Text, { style: { color: design.colors.incomingText, fontSize: 18 }, children: videoCallLabel })] })] })] }) }) : _jsx(MessagingScreen, { ...screenProps, components: { Header: MessagingCallHeader, Composer: CallingMessageComposer, ...components } }) });
 }

package/dist/conversation-details.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { MessagingClient, MessagingMessage, MessagingState } from '@robono/messaging';
+type Person = {
+    name: string;
+    avatarUrl?: string;
+};
+export interface ConversationDetailsProps {
+    client: MessagingClient;
+    state: MessagingState;
+    userId: string;
+    contact: Person;
+    participants?: Record<string, Person>;
+    accent: string;
+    onClose: () => void;
+    onEditGroup?: () => void;
+    onLeft?: () => void;
+    attachmentPreview?: (message: MessagingMessage) => Promise<{
+        uri?: string;
+    }>;
+    openAttachment?: (message: MessagingMessage) => Promise<void>;
+}
+/** Contact/group identity and retained shared media, using Messenger's bounded popup. */
+export declare function ConversationDetails(props: ConversationDetailsProps): React.JSX.Element;
+export {};

package/dist/conversation-details.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, FlatList, Image, Platform, Pressable, Text, View } from 'react-native';
+import { MessagingPopup, messagingPopupColors as c } from './popup.js';
+import { MessageIcon, fileSize, duration } from './icons.js';
+function MediaThumbnail({ message, preview }) {
+    const [uri, setUri] = useState();
+    useEffect(() => { let live = true; setUri(undefined); if (preview && ['image', 'video'].includes(message.kind))
+        void preview(message).then(value => { if (live)
+            setUri(value.uri); }).catch(() => { }); return () => { live = false; }; }, [message.id, message.media?.assetId, preview]);
+    return _jsxs(View, { style: { width: 56, height: 56, borderRadius: 8, overflow: 'hidden', alignItems: 'center', justifyContent: 'center', backgroundColor: c.incoming }, children: [uri ? _jsx(Image, { source: { uri }, accessibilityLabel: message.media?.fileName ?? 'Attachment', onError: () => setUri(undefined), style: { width: '100%', height: '100%' } }) : _jsx(MessageIcon, { name: message.kind === 'voice' ? 'mic' : message.kind === 'document' ? 'document' : message.kind === 'video' ? 'video' : 'image', color: c.foreground, size: 24 }), uri && message.kind === 'video' && _jsx(View, { style: { position: 'absolute', backgroundColor: '#0008', padding: 3, borderRadius: 20 }, children: _jsx(MessageIcon, { name: "play", color: "#fff", size: 18 }) })] });
+}
+/** Contact/group identity and retained shared media, using Messenger's bounded popup. */
+export function ConversationDetails(props) {
+    const { client, state, contact, participants = {}, userId, accent, onClose } = props, group = state.conversation?.kind === 'group';
+    const [tab, setTab] = useState('media'), [messages, setMessages] = useState([]), [members, setMembers] = useState([]);
+    const [next, setNext] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState(''), [visible, setVisible] = useState(true);
+    const [leaving, setLeaving] = useState(false), leaveRequest = useRef(undefined);
+    const request = useRef(null), generation = useRef(0), pending = useRef(null);
+    const title = group ? state.conversation?.name ?? 'Group' : contact.name;
+    const dismiss = () => { const action = pending.current; pending.current = null; onClose(); action?.(); };
+    useEffect(() => { if (!visible && Platform.OS !== 'ios')
+        dismiss(); }, [visible]);
+    useEffect(() => { if (!state.settings?.enabled && !leaving)
+        onClose(); }, [state.settings?.enabled]);
+    async function leave() {
+        setBusy(true);
+        setError('');
+        leaveRequest.current ??= client.createForwardId();
+        try {
+            await client.leaveGroup(leaveRequest.current);
+            pending.current = props.onLeft ?? null;
+            setVisible(false);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'The group could not be left.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function load(more = false) {
+        request.current?.abort();
+        const control = new AbortController();
+        request.current = control;
+        const version = ++generation.current;
+        setBusy(true);
+        setError('');
+        try {
+            if (tab === 'media') {
+                const page = await client.sharedMedia({ ...(more && next ? { before: next } : {}), signal: control.signal });
+                if (version !== generation.current)
+                    return;
+                setMessages(current => more ? [...new Map([...current, ...page.messages].map(m => [m.id, m])).values()] : page.messages);
+                setNext(page.hasMore ? page.nextCursor : null);
+            }
+            else {
+                const page = await client.groupMembers(more && next ? next : undefined);
+                if (version !== generation.current)
+                    return;
+                setMembers(current => more ? [...new Map([...current, ...page.members].map(m => [m.userId, m])).values()] : page.members);
+                setNext(page.hasMore ? page.nextCursor : null);
+            }
+        }
+        catch (e) {
+            if (version === generation.current && !control.signal.aborted)
+                setError(e instanceof Error ? e.message : 'These details are unavailable.');
+        }
+        finally {
+            if (version === generation.current)
+                setBusy(false);
+        }
+    }
+    useEffect(() => { setMessages([]); setMembers([]); setNext(null); if (tab === 'members' || state.sharedMediaAvailable)
+        void load(); return () => { ++generation.current; request.current?.abort(); }; }, [client, state.conversationId, tab]);
+    const footer = _jsxs(View, { children: [busy && _jsx(ActivityIndicator, { accessibilityLabel: "Loading conversation details", color: accent, style: { padding: 16 } }), !!error && _jsxs(_Fragment, { children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, padding: 12 }, children: error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void load(!!next), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: "Try again" }) })] }), next && !busy && !error && _jsx(Pressable, { accessibilityRole: "button", onPress: () => void load(true), style: { minHeight: 48, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: "Load more" }) })] });
+    return _jsx(MessagingPopup, { visible: visible, onDismiss: dismiss, title: leaving ? 'Leave group?' : group ? 'Group details' : 'Contact details', compact: leaving, closeDisabled: busy, background: c.background, onClose: () => { if (!busy) {
+            if (leaving)
+                setLeaving(false);
+            else
+                setVisible(false);
+        } }, children: leaving ? _jsxs(View, { style: { gap: 16, paddingTop: 12 }, children: [_jsxs(Text, { style: { color: c.secondary, fontSize: 16, lineHeight: 23 }, children: ["You will stop receiving this group\u2019s messages.", state.conversation?.ownerId === userId ? ' Ownership will pass to another member.' : ''] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: error }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => void leave(), style: { minHeight: 48, borderRadius: 12, backgroundColor: '#b72d34', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: '#fff', fontSize: 16, fontWeight: '600' }, children: busy ? 'Leaving…' : 'Leave group' }) })] }) : _jsxs(_Fragment, { children: [_jsxs(View, { style: { alignItems: 'center', gap: 8, paddingVertical: 20 }, children: [!group && contact.avatarUrl ? _jsx(Image, { source: { uri: contact.avatarUrl }, style: { width: 64, height: 64, borderRadius: 32 } }) : _jsx(View, { style: { width: 64, height: 64, borderRadius: 32, backgroundColor: c.incoming, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontSize: 26, color: accent }, children: title.slice(0, 1).toUpperCase() }) }), _jsx(Text, { style: { color: c.foreground, fontSize: 21, fontWeight: '600' }, children: title }), group && _jsxs(Text, { style: { color: c.secondary, fontSize: 15 }, children: [state.conversation?.memberCount ?? state.conversation?.memberIds?.length ?? 0, " members"] })] }), _jsx(View, { style: { flexDirection: 'row', gap: 8, paddingBottom: 12 }, children: ['media', ...(group ? ['members'] : [])].map(value => _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: value === 'media' ? 'Shared media' : 'Members', accessibilityState: { selected: tab === value }, onPress: () => setTab(value), style: { flex: 1, minHeight: 44, alignItems: 'center', justifyContent: 'center', borderBottomWidth: 2, borderBottomColor: tab === value ? accent : 'transparent' }, children: _jsx(Text, { style: { color: tab === value ? accent : c.secondary, fontSize: 16, fontWeight: '600' }, children: value === 'media' ? 'Shared media' : 'Members' }) }, value)) }), tab === 'media' ? _jsx(FlatList, { data: messages, keyExtractor: m => m.id, style: { flex: 1 }, ListFooterComponent: footer, ListEmptyComponent: !busy && !error ? _jsx(Text, { style: { color: c.secondary, padding: 16, textAlign: 'center' }, children: state.sharedMediaAvailable ? 'No shared photos, videos, files or voice messages.' : 'Shared media is unavailable for this integration.' }) : null, renderItem: ({ item }) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: 'Open ' + (item.media?.fileName ?? 'attachment'), disabled: !props.openAttachment, onPress: () => { pending.current = () => { void props.openAttachment?.(item).catch(() => { }); }; setVisible(false); }, style: { minHeight: 76, flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#ffffff16' }, children: [_jsx(MediaThumbnail, { message: item, preview: props.attachmentPreview }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [_jsx(Text, { numberOfLines: 2, style: { color: c.foreground, fontSize: 16 }, children: item.media?.fileName ?? ({ image: 'Photo', video: 'Video', voice: 'Voice message', document: 'File' }[item.kind]) }), _jsxs(Text, { style: { color: c.secondary, fontSize: 13 }, children: [item.senderId === userId ? 'You' : participants[item.senderId]?.name ?? (!group ? contact.name : 'Member'), " \u00B7 ", item.media?.durationMs ? duration(item.media.durationMs) : fileSize(item.media?.byteSize), " \u00B7 ", new Date(item.createdAt).toLocaleDateString()] })] }), _jsx(MessageIcon, { name: "chevron-right", color: c.secondary, size: 20 })] }) }) : _jsx(FlatList, { data: members, keyExtractor: m => m.userId, style: { flex: 1 }, ListFooterComponent: footer, renderItem: ({ item }) => _jsxs(View, { style: { minHeight: 56, flexDirection: 'row', alignItems: 'center', gap: 12, borderBottomWidth: 1, borderBottomColor: '#ffffff16' }, children: [participants[item.userId]?.avatarUrl ? _jsx(Image, { source: { uri: participants[item.userId].avatarUrl }, style: { width: 36, height: 36, borderRadius: 18 } }) : _jsx(View, { style: { width: 36, height: 36, borderRadius: 18, backgroundColor: c.incoming, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: (participants[item.userId]?.name ?? 'Member').slice(0, 1) }) }), _jsx(Text, { style: { flex: 1, color: c.foreground, fontSize: 16 }, children: item.userId === userId ? 'You' : participants[item.userId]?.name ?? 'Member' }), state.conversation?.ownerId === item.userId && _jsx(Text, { style: { color: accent, fontSize: 13 }, children: "Owner" }), !item.canSend && _jsx(Text, { style: { color: c.secondary, fontSize: 13 }, children: "Read only" })] }) }), group && state.conversation?.managementAvailable && _jsxs(View, { style: { flexDirection: 'row', gap: 12, borderTopWidth: 1, borderTopColor: '#ffffff20' }, children: [state.conversation.ownerId === userId && props.onEditGroup && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { pending.current = props.onEditGroup; setVisible(false); }, style: { flex: 1, minHeight: 48, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 16 }, children: "Edit group" }) }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => { setError(''); setLeaving(true); }, style: { flex: 1, minHeight: 48, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { color: '#ff8282', fontSize: 16 }, children: "Leave group" }) })] })] }) });
+}

package/dist/emoji-text.d.ts

@@ -0,0 +1,2 @@
+/** Match Messenger's emoji-only message layout (AppRoot.isBigEmojiText). */
+export declare function isBigEmojiText(value: string | undefined | null): boolean;

package/dist/emoji-text.js

@@ -0,0 +1,8 @@
+/** Match Messenger's emoji-only message layout (AppRoot.isBigEmojiText). */
+export function isBigEmojiText(value) {
+    const compact = (value ?? '').trim().replace(/\s+/g, '');
+    if (!compact || compact.length > 16)
+        return false;
+    const sequences = compact.match(/(?:\p{Regional_Indicator}{2}|[0-9#*]\uFE0F?\u20E3|(?:\p{Extended_Pictographic}|\p{Emoji_Presentation})(?:\p{Emoji_Modifier}|\uFE0F|\uFE0E)?(?:\u200D(?:\p{Extended_Pictographic}|\p{Emoji_Presentation})(?:\p{Emoji_Modifier}|\uFE0F|\uFE0E)?)*(?:[\u{E0020}-\u{E007E}]+\u{E007F})?)/gu) ?? [];
+    return sequences.length > 0 && sequences.join('') === compact;
+}

package/dist/expo-download.d.ts

@@ -0,0 +1,3 @@
+import type { LocalMessagingMedia, MediaKind } from './media-controller.js';
+/** Export an already-authorized viewer copy; never expose its private source URL. */
+export declare function saveMessagingAttachment(file: LocalMessagingMedia, kind: MediaKind): Promise<void>;

package/dist/expo-download.js

@@ -0,0 +1,43 @@
+import { Platform } from 'react-native';
+import * as FS from 'expo-file-system/legacy';
+import * as Sharing from 'expo-sharing';
+import * as MediaLibrary from 'expo-media-library';
+/** Export an already-authorized viewer copy; never expose its private source URL. */
+export async function saveMessagingAttachment(file, kind) {
+    if (kind === 'image' || kind === 'video') {
+        const permission = await MediaLibrary.requestPermissionsAsync(true, [kind === 'image' ? 'photo' : 'video']);
+        if (!permission.granted)
+            throw Error('Allow photo access to save this attachment.');
+        await MediaLibrary.saveToLibraryAsync(file.uri);
+        return;
+    }
+    if (kind !== 'document')
+        throw Error('This attachment cannot be downloaded.');
+    if (Platform.OS !== 'android') {
+        if (!await Sharing.isAvailableAsync())
+            throw Error('File saving is unavailable.');
+        await Sharing.shareAsync(file.uri, { mimeType: file.mimeType, dialogTitle: 'Save ' + file.fileName });
+        return;
+    }
+    const permission = await FS.StorageAccessFramework.requestDirectoryPermissionsAsync();
+    if (!permission.granted)
+        return;
+    const name = file.fileName.split(/[\\/]/).at(-1)?.replace(/[\u0000-\u001f\u007f]/g, '').trim() || 'Attachment';
+    const destination = await FS.StorageAccessFramework.createFileAsync(permission.directoryUri, name, file.mimeType);
+    try {
+        // Bounded chunks avoid keeping an entire large document and its base64 copy in memory.
+        const chunk = 3 * 256 * 1024;
+        for (let position = 0; position < file.byteSize; position += chunk) {
+            const length = Math.min(chunk, file.byteSize - position);
+            const data = await FS.readAsStringAsync(file.uri, { encoding: FS.EncodingType.Base64, position, length });
+            const bytes = data.length * 3 / 4 - (data.endsWith('==') ? 2 : data.endsWith('=') ? 1 : 0);
+            if (bytes !== length)
+                throw Error('The attachment could not be read completely.');
+            await FS.writeAsStringAsync(destination, data, { encoding: FS.EncodingType.Base64, append: position > 0 });
+        }
+    }
+    catch (error) {
+        await FS.deleteAsync(destination, { idempotent: true }).catch(() => { });
+        throw error;
+    }
+}

package/dist/expo-history.d.ts

@@ -0,0 +1,3 @@
+import { MessagingHistoryCache } from '@robono/messaging';
+/** App-private recent history; no downloaded attachments or access tokens. */
+export declare function createExpoMessagingHistory(endpoint: string, userId: string, namespace?: string): MessagingHistoryCache;

package/dist/expo-history.js

@@ -0,0 +1,59 @@
+import * as FS from 'expo-file-system/legacy';
+import * as Crypto from 'expo-crypto';
+import { MessagingHistoryCache } from '@robono/messaging';
+/** App-private recent history; no downloaded attachments or access tokens. */
+export function createExpoMessagingHistory(endpoint, userId, namespace = 'default') {
+    const digest = (value) => Crypto.digestStringAsync(Crypto.CryptoDigestAlgorithm.SHA256, value);
+    const directory = async () => {
+        if (!FS.documentDirectory)
+            throw Error('Offline history storage is unavailable.');
+        return FS.documentDirectory + 'robono-recent-history/' + await digest(JSON.stringify([endpoint, namespace, userId])) + '/';
+    };
+    const names = async (dir) => (await FS.getInfoAsync(dir)).exists ? (await FS.readDirectoryAsync(dir)).filter(name => /^\d+-[a-f\d]{64}\.json$/.test(name)).sort((a, b) => Number(b.split('-')[0]) - Number(a.split('-')[0])) : [];
+    const store = {
+        async read(cid) {
+            const dir = await directory(), hash = await digest(cid), file = (await names(dir)).find(name => name.endsWith('-' + hash + '.json'));
+            if (!file)
+                return null;
+            const info = await FS.getInfoAsync(dir + file);
+            if (!info.exists || info.isDirectory || info.size > 200000) {
+                await FS.deleteAsync(dir + file, { idempotent: true });
+                return null;
+            }
+            try {
+                return JSON.parse(await FS.readAsStringAsync(dir + file));
+            }
+            catch {
+                await FS.deleteAsync(dir + file, { idempotent: true });
+                return null;
+            }
+        },
+        async write(snapshot) {
+            const dir = await directory(), hash = await digest(snapshot.conversationId), file = snapshot.savedAt + '-' + hash + '.json';
+            await FS.makeDirectoryAsync(dir, { intermediates: true });
+            const old = await names(dir);
+            if (old.some(name => name.endsWith('-' + hash + '.json') && Number(name.split('-')[0]) > snapshot.savedAt))
+                return;
+            const temporary = dir + Crypto.randomUUID() + '.tmp';
+            try {
+                await FS.writeAsStringAsync(temporary, JSON.stringify(snapshot));
+                await FS.moveAsync({ from: temporary, to: dir + file });
+            }
+            finally {
+                await FS.deleteAsync(temporary, { idempotent: true }).catch(() => { });
+            }
+            const ordered = await names(dir), keep = new Set(ordered.filter(name => name === file || !name.endsWith('-' + hash + '.json')).slice(0, 20));
+            await Promise.all(ordered.filter(name => !keep.has(name)).map(name => FS.deleteAsync(dir + name, { idempotent: true })));
+        },
+        async clear(cid) {
+            const dir = await directory();
+            if (cid === undefined) {
+                await FS.deleteAsync(dir, { idempotent: true });
+                return;
+            }
+            const hash = await digest(cid);
+            await Promise.all((await names(dir)).filter(name => name.endsWith('-' + hash + '.json')).map(name => FS.deleteAsync(dir + name, { idempotent: true })));
+        },
+    };
+    return new MessagingHistoryCache(store);
+}

package/dist/expo-media.d.ts

@@ -16,4 +16,5 @@ export declare function createExpoMessagingStorage(options: {
     url: string;
     getAccessToken: () => Promise<string>;
     streaming?: boolean;
+    fetch?: typeof fetch;
 }): MessagingMediaStorage;

package/dist/expo-media.js

@@ -109,55 +109,58 @@ export function createExpoMessagingDevice(audio) {
     let recordingDeadline = 0;
     let starting = null;
     let stopping = null;
-    return {
-        async pick(kind, settings, signal, source) {
-            if (source === 'camera' && (!['image', 'video'].includes(kind) || !settings.appearance.showCamera))
-                throw Error('Camera capture is unavailable.');
-            if (source === 'call-video' && (kind !== 'video' || !settings.enabled || !settings.features.video || settings.unansweredCalls?.video !== 'video'))
-                throw Error('Video messages after a call are unavailable.');
-            const limits = (settings.attachments ?? defaultAttachmentLimits())[kind];
+    async function chooseFiles(kind, settings, signal, source, maximum) {
+        if (source === 'camera' && (!['image', 'video'].includes(kind) || !settings.appearance.showCamera))
+            throw Error('Camera capture is unavailable.');
+        if (source === 'call-video' && (kind !== 'video' || !settings.enabled || !settings.features.video || settings.unansweredCalls?.video !== 'video'))
+            throw Error('Video messages after a call are unavailable.');
+        const limits = (settings.attachments ?? defaultAttachmentLimits())[kind];
+        let assets = [];
+        const copies = [];
+        try {
             if (kind === 'document') {
-                const result = await Documents.getDocumentAsync({ type: limits.allowedMimeTypes, multiple: false, copyToCacheDirectory: true });
-                if (signal.aborted) {
-                    for (const a of result.assets ?? [])
-                        if (FS.cacheDirectory && a.uri.startsWith(FS.cacheDirectory))
-                            await FS.deleteAsync(a.uri, { idempotent: true }).catch(() => { });
+                const result = await Documents.getDocumentAsync({ type: limits.allowedMimeTypes, multiple: maximum > 1, copyToCacheDirectory: true });
+                assets = result.assets ?? [];
+                if (result.canceled)
+                    return [];
+            }
+            else {
+                if (source) {
+                    const permission = await Picker.requestCameraPermissionsAsync();
                     check(signal);
+                    if (!permission.granted)
+                        throw Error('Camera permission is needed to take photos or record videos.');
                 }
+                const result = await (source ? Picker.launchCameraAsync : Picker.launchImageLibraryAsync)({ mediaTypes: source === 'call-video' ? ['videos'] : source ? [...((settings.features?.image ?? kind === 'image') ? ['images'] : []), ...(settings.features?.video ? ['videos'] : [])] : kind === 'image' ? ['images'] : ['videos'], ...(source ? { videoMaxDuration: settings.attachments?.video?.maxDurationSeconds ?? 60 } : {}), allowsMultipleSelection: !source && maximum > 1, selectionLimit: maximum, orderedSelection: true, allowsEditing: false, quality: 1, preferredAssetRepresentationMode: Picker.UIImagePickerPreferredAssetRepresentationMode.Current });
+                assets = result.assets ?? [];
                 if (result.canceled)
-                    return null;
-                const asset = result.assets[0];
-                if (!asset)
-                    return null;
-                return pickedCopy(asset.uri, asset.name, mime(asset.mimeType, asset.name));
-            }
-            if ((source === 'camera' || source === 'call-video')) {
-                const permission = await Picker.requestCameraPermissionsAsync();
-                check(signal);
-                if (!permission.granted)
-                    throw Error('Camera permission is needed to take photos or record videos.');
+                    return [];
             }
-            const result = await ((source === 'camera' || source === 'call-video') ? Picker.launchCameraAsync : Picker.launchImageLibraryAsync)({ mediaTypes: source === 'call-video' ? ['videos'] : (source === 'camera' || source === 'call-video') ? ([...((settings.features?.image ?? kind === 'image') ? ['images'] : []), ...(settings.features?.video ? ['videos'] : [])]) : kind === 'image' ? ['images'] : ['videos'], ...((source === 'camera' || source === 'call-video') ? { videoMaxDuration: settings.attachments?.video?.maxDurationSeconds ?? 60 } : {}), allowsMultipleSelection: false, allowsEditing: false, quality: 1, preferredAssetRepresentationMode: Picker.UIImagePickerPreferredAssetRepresentationMode.Current });
-            if (signal.aborted) {
-                for (const a of result.assets ?? [])
-                    if (FS.cacheDirectory && a.uri.startsWith(FS.cacheDirectory))
-                        await FS.deleteAsync(a.uri, { idempotent: true }).catch(() => { });
+            check(signal);
+            if (assets.length > maximum)
+                throw Error(`Choose up to ${maximum} attachments.`);
+            for (const asset of assets) {
                 check(signal);
+                const video = kind === 'video' || !!source && (asset.type === 'video' || asset.mimeType?.startsWith('video/'));
+                const name = asset.name ?? asset.fileName ?? asset.uri.split('/').at(-1) ?? (video ? 'Video' : 'Photo');
+                if (video && (!asset.duration || !Number.isFinite(asset.duration)))
+                    throw Error('The video length could not be read. Choose another video.');
+                copies.push(await copied(asset.uri, name, mime(asset.mimeType, name), video ? asset.duration : undefined));
             }
-            if (result.canceled)
-                return null;
-            const asset = result.assets[0];
-            if (!asset)
-                return null;
-            const video = (source === 'camera' || source === 'call-video') ? (asset.type === 'video' || asset.mimeType?.startsWith('video/')) : kind === 'video';
-            const name = asset.fileName ?? asset.uri.split('/').at(-1) ?? (kind === 'image' ? 'Photo' : 'Video');
-            if (video && (!asset.duration || !Number.isFinite(asset.duration))) {
-                if (FS.cacheDirectory && asset.uri.startsWith(FS.cacheDirectory))
-                    await FS.deleteAsync(asset.uri, { idempotent: true }).catch(() => { });
-                throw Error('The video length could not be read. Choose another video.');
-            }
-            return pickedCopy(asset.uri, name, mime(asset.mimeType, name), video ? asset.duration : undefined);
-        },
+            check(signal);
+            return copies;
+        }
+        catch (error) {
+            await Promise.all(copies.map(file => remove(file).catch(() => { })));
+            throw error;
+        }
+        finally {
+            await Promise.all(assets.filter(a => FS.cacheDirectory && a.uri.startsWith(FS.cacheDirectory)).map(a => FS.deleteAsync(a.uri, { idempotent: true }).catch(() => { })));
+        }
+    }
+    return {
+        async pick(kind, settings, signal, source) { return (await chooseFiles(kind, settings, signal, source, 1))[0] ?? null; },
+        pickMany: (kind, settings, signal, maximum) => chooseFiles(kind, settings, signal, undefined, maximum),
         async startRecording(maximum, signal) {
             if (starting || recorder)
                 throw Error('A recording is already in progress.');
@@ -256,7 +259,7 @@ export function createExpoMessagingStorage(options) {
             bounded.abort();
         const timeout = setTimeout(cancel, operation === 'complete' ? 120000 : 15000);
         try {
-            const response = await fetch(endpoint, { method: 'POST', redirect: 'error', signal: bounded.signal, headers: { 'content-type': 'application/json', authorization: `Bearer ${token}` }, body: JSON.stringify({ ...input, operation }) });
+            const response = await (options.fetch ?? fetch)(endpoint, { method: 'POST', redirect: 'error', signal: bounded.signal, headers: { 'content-type': 'application/json', authorization: `Bearer ${token}` }, body: JSON.stringify({ ...input, operation }) });
             const result = await response.json();
             if (!response.ok) {
                 const error = Object.assign(Error(result?.error?.message ?? 'The file could not be transferred. Try again.'), { status: response.status });
@@ -342,6 +345,29 @@ export function createExpoMessagingStorage(options) {
                 }
             }
         },
+        async thumbnail(message, context) {
+            check(context.signal);
+            const plan = await request('thumbnail', { conversationId: message.conversationId, messageId: message.id }, context.signal);
+            if (!plan)
+                return null;
+            const media = plan.media;
+            if (media?.assetId !== message.media?.assetId || media?.mimeType !== 'image/jpeg' || !Number.isInteger(media.byteSize) || media.byteSize < 1 || media.byteSize > 131072)
+                throw Error('Invalid attachment preview.');
+            const path = await cachePath('preview.jpg');
+            try {
+                const task = FS.createDownloadResumable(https(plan.url), path, { headers: plan.headers ?? {}, sessionType: FS.FileSystemSessionType.FOREGROUND }, progress => { if (progress.totalBytesWritten > media.byteSize)
+                    void task.cancelAsync().catch(() => { }); });
+                const result = await cancellable(task, context, () => task.downloadAsync());
+                const info = await FS.getInfoAsync(path);
+                if (!result || result.status !== 200 || !info.exists || info.isDirectory || info.size !== media.byteSize)
+                    throw Error('Attachment preview is incomplete.');
+                return { uri: path, mimeType: 'image/jpeg', fileName: 'preview.jpg', byteSize: media.byteSize };
+            }
+            catch (error) {
+                await removeUri(path).catch(() => { });
+                throw error;
+            }
+        },
         async download(message, context) {
             check(context.signal);
             if (message.deleted)

package/dist/expo-messenger.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { MessagingInboxClient, type ConversationSummary } from '@robono/messaging';
+import { type ExpoMessagingScreenProps } from './expo-screen.js';
+import { type MessagingAudioSession } from './expo-media.js';
+/** One account, one authenticated route, supplied storage and media-session adapters. */
+export declare function createExpoMessenger(options: {
+    endpoint: string;
+    userId: string;
+    getAccessToken: () => Promise<string>;
+    fetch?: typeof fetch;
+    persistence?: false;
+    namespace?: string;
+    audioSession?: MessagingAudioSession;
+    isCallActive?: () => boolean;
+}): {
+    client: import("@robono/messaging").MessagingClient;
+    inbox: MessagingInboxClient;
+    storage: import("./media-controller.js").MessagingMediaStorage;
+    audioSession: MessagingAudioSession;
+    signOut(): Promise<void>;
+    dispose(): void;
+};
+export interface ExpoMessengerProps extends Omit<ExpoMessagingScreenProps, 'contact' | 'renderConversation' | 'onBack'> {
+    inbox: MessagingInboxClient;
+    contacts?: Record<string, {
+        name: string;
+        avatarUrl?: string;
+        phoneNumber?: string;
+    }>;
+    initialConversation?: ConversationSummary;
+    selectedConversation?: ConversationSummary | null;
+    onSelectConversation?: (conversation: ConversationSummary | null) => void;
+}
+/** Supplied inbox, group creation, conversation, settings and media screens. */
+export declare function ExpoMessenger({ inbox, contacts, initialConversation, selectedConversation, onSelectConversation, ...props }: ExpoMessengerProps): React.JSX.Element;

package/dist/expo-messenger.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useSyncExternalStore } from 'react';
+import { createMessagingTransport, defaultMessagingSettings, MessagingInboxClient } from '@robono/messaging';
+import { ExpoMessagingScreen } from './expo-screen.js';
+import { createExpoMessagingClient } from './expo-outbox.js';
+import { createExpoMessagingAudioSession, createExpoMessagingStorage } from './expo-media.js';
+import { MessagingProvider, MessagingConversation, MessagingAccountMenu } from './index.js';
+import { MessagingInbox } from './inbox.js';
+import { MessagingGroupEditor } from './group-editor.js';
+/** One account, one authenticated route, supplied storage and media-session adapters. */
+export function createExpoMessenger(options) {
+    const endpoint = new URL(options.endpoint);
+    if (endpoint.protocol !== 'https:' || endpoint.username || endpoint.password)
+        throw Error('Use your authenticated HTTPS messenger endpoint.');
+    const media = new URL(endpoint);
+    media.searchParams.set('service', 'media');
+    const client = createExpoMessagingClient({ ...options, url: endpoint.href });
+    const inbox = new MessagingInboxClient({ request: createMessagingTransport({ ...options, url: endpoint.href }) });
+    const storage = createExpoMessagingStorage({ url: media.href, getAccessToken: options.getAccessToken, ...(options.fetch ? { fetch: options.fetch } : {}) });
+    const audioSession = options.audioSession ?? createExpoMessagingAudioSession({ isCallActive: options.isCallActive });
+    return { client, inbox, storage, audioSession,
+        async signOut() { inbox.dispose(); await client.signOut(); },
+        dispose() { inbox.dispose(); client.dispose(); },
+    };
+}
+/** Supplied inbox, group creation, conversation, settings and media screens. */
+export function ExpoMessenger({ inbox, contacts = {}, initialConversation, selectedConversation, onSelectConversation, ...props }) {
+    const [internal, setInternal] = useState(initialConversation ?? null), [newGroup, setNewGroup] = useState(false);
+    const selected = selectedConversation === undefined ? internal : selectedConversation;
+    const setSelected = (row) => { setInternal(row); onSelectConversation?.(row); };
+    const inboxState = useSyncExternalStore(inbox.subscribe, inbox.getSnapshot, inbox.getSnapshot);
+    const open = (row, messageId) => {
+        setSelected(row);
+        void props.client.open(row.id).then(async () => { if (messageId && props.client.getSnapshot().conversationId === row.id)
+            await props.client.focusMessage(messageId); }).catch(() => { });
+    };
+    const contact = selected?.kind === 'group' ? { name: selected.name ?? 'Group' } : contacts[selected?.contactId ?? ''] ?? { name: selected?.contactId ?? 'Chat' };
+    return _jsx(ExpoMessagingScreen, { ...props, contact: contact, participants: props.participants ?? contacts, extras: selected ? props.extras : undefined, callActions: selected ? { ...props.callActions, phoneNumber: contacts[selected.contactId ?? '']?.phoneNumber ?? props.callActions?.phoneNumber } : undefined, onBack: () => { props.client.stop(); setSelected(null); void inbox.refresh().catch(() => { }); }, renderConversation: screen => _jsx(MessagingProvider, { ...screen, children: selected ? _jsx(MessagingConversation, {}) : _jsxs(_Fragment, { children: [_jsx(MessagingInbox, { client: inbox, userId: props.userId, contacts: contacts, companyName: props.companyName, appearance: props.appearance, active: props.active !== false, headerActions: _jsx(MessagingAccountMenu, { onNewGroup: inboxState.groupCreationAvailable ? () => setNewGroup(true) : undefined }), onSelect: open, onDeleted: id => props.client.forgetConversation(id) }), newGroup && _jsx(MessagingGroupEditor, { client: props.client, inbox: inbox, userId: props.userId, contacts: contacts, groups: inboxState.groups, accent: (props.appearance ?? inboxState.appearance ?? defaultMessagingSettings().appearance).colors.accent, onClose: () => setNewGroup(false), onSaved: (id, name) => { setNewGroup(false); const row = inbox.getSnapshot().conversations.find(c => c.id === id) ?? { id, kind: 'group', name, contactId: null, lastMessage: null, unreadCount: 0, canSend: true }; open(row); } })] }) }) });
+}

package/dist/expo-notifications.d.ts

@@ -0,0 +1,31 @@
+import * as Notifications from 'expo-notifications';
+import { type MessagingNotification } from '@robono/messaging';
+export interface ExpoMessagingNotificationOptions {
+    /** The combined server route, with service=notifications. */
+    url: string;
+    userId: string;
+    getAccessToken: () => Promise<string>;
+    authorize: (event: MessagingNotification) => Promise<boolean>;
+    open: (event: MessagingNotification) => void | Promise<void>;
+    refresh: () => void | Promise<void>;
+    onError: (error: Error) => void;
+    fetch?: typeof fetch;
+}
+/** One restored account. Never prompts on mount, replaces a global handler or handles calling pushes. */
+export declare function connectExpoMessagingNotifications(options: ExpoMessagingNotificationOptions): Promise<{
+    ready: Promise<void>;
+    /** Call only after the user chooses Enable notifications in your interface. */
+    enable(): Promise<boolean>;
+    /** Await before revoking your login session, so the old account's token is removed. */
+    signOut(): Promise<void>;
+    dispose: () => void;
+}>;
+/** Compose with the host's existing handler. Suppress only this account's open conversation. */
+export declare function withMessagingNotificationPresentation(handler: Notifications.NotificationHandler, current: () => {
+    accountScope: string;
+    conversationId: string | null;
+}): {
+    handleNotification: (notification: Notifications.Notification) => Promise<Notifications.NotificationBehavior>;
+    handleSuccess?: (notificationId: string) => void;
+    handleError?: (notificationId: string, error: Notifications.NotificationHandlingError) => void;
+};