@robono/messaging-react-native 0.11.0 → 0.12.0

package/dist/account.d.ts

@@ -10,6 +10,7 @@ export interface MessagingAccount {
     email?: string;
     onEnableNotifications?: () => void | Promise<void>;
     onEditProfile?: () => void | Promise<void>;
+    onDeleteAccount?: () => void | Promise<void>;
     onSignOut?: () => void | Promise<void>;
 }
 export declare function MessagingAccountScreen({ account, companyName, onClose }: {

package/dist/account.js

@@ -36,5 +36,5 @@ export function MessagingAccountScreen({ account, companyName, onClose }) {
             }
             else
                 onClose();
-        } }, children: _jsx(ScrollView, { contentContainerStyle: { gap: 16, paddingBottom: 12 }, children: checking && account?.deviceCheck ? _jsx(CallDeviceCheckPanel, { check: account.deviceCheck, renderVideo: account.renderCallPreview, labels: Object.fromEntries(Object.entries(callDeviceCheckText).map(([key, value]) => [key, uiText(value)])) }) : _jsxs(_Fragment, { 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 ?? uiText("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: uiText("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: uiText("Edit profile") })] })] }), account?.deviceCheck && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Check call devices"), disabled: busy, onPress: () => setChecking(true), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Check call devices") }) }), account?.onEnableNotifications && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Enable notifications"), disabled: busy, onPress: () => void run(account.onEnableNotifications), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Enable notifications") }) }), account?.onSignOut && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("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: uiText("Sign out") }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 15 }, children: error })] }) }) });
+        } }, children: _jsx(ScrollView, { contentContainerStyle: { gap: 16, paddingBottom: 12 }, children: checking && account?.deviceCheck ? _jsx(CallDeviceCheckPanel, { check: account.deviceCheck, renderVideo: account.renderCallPreview, labels: Object.fromEntries(Object.entries(callDeviceCheckText).map(([key, value]) => [key, uiText(value)])) }) : _jsxs(_Fragment, { 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 ?? uiText("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: uiText("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: uiText("Edit profile") })] })] }), account?.deviceCheck && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Check call devices"), disabled: busy, onPress: () => setChecking(true), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Check call devices") }) }), account?.onEnableNotifications && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Enable notifications"), disabled: busy, onPress: () => void run(account.onEnableNotifications), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Enable notifications") }) }), account?.onDeleteAccount && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Delete account"), disabled: busy, onPress: () => begin(account.onDeleteAccount), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: '#ffb5a3', fontSize: 16 }, children: uiText("Delete account") }) }), account?.onSignOut && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("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: uiText("Sign out") }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 15 }, children: error })] }) }) });
 }

package/dist/expo-media.js

@@ -1,5 +1,7 @@
 import { MessagingError } from '@robono/messaging';
 import { awaitMediaScreening } from './media-screening';
+import { AppState } from 'react-native';
+import { prepareRecordingPermission } from './recording-permission.js';
 import { AudioModule, RecordingPresets, createAudioPlayer, setAudioModeAsync } from 'expo-audio';
 import * as Picker from 'expo-image-picker';
 import * as Documents from 'expo-document-picker';
@@ -107,6 +109,7 @@ async function recordingDuration(uri) {
 const extensionMimes = { jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', gif: 'image/gif', webp: 'image/webp', heic: 'image/heic', heif: 'image/heif', avif: 'image/avif', mp4: 'video/mp4', mov: 'video/quicktime', webm: 'video/webm', '3gp': 'video/3gpp', pdf: 'application/pdf', txt: 'text/plain', csv: 'text/csv', zip: 'application/zip', doc: 'application/msword', docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', xls: 'application/vnd.ms-excel', xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', ppt: 'application/vnd.ms-powerpoint', pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' };
 function mime(value, name) { return value?.toLowerCase() || extensionMimes[name.split('.').at(-1)?.toLowerCase() ?? ''] || 'application/octet-stream'; }
 export function createExpoMessagingDevice(audio) {
+    let permissionPending = false;
     let recorder = null, release = null;
     let recordingDeadline = 0;
     let starting = null;
@@ -163,20 +166,31 @@ export function createExpoMessagingDevice(audio) {
     return {
         async pick(kind, settings, signal, source) { return (await chooseFiles(kind, settings, signal, source, 1))[0] ?? null; },
         pickMany: (kind, settings, signal, maximum, mixedLibrary) => chooseFiles(kind, settings, signal, undefined, maximum, mixedLibrary),
+        isRequestingRecordingPermission: () => permissionPending,
         async startRecording(maximum, signal) {
             if (starting || recorder)
                 throw Error('A recording is already in progress.');
             const work = (async () => {
-                const permission = await AudioModule.requestRecordingPermissionsAsync();
-                check(signal);
-                if (!permission.granted)
-                    throw Error('Microphone permission is needed to record a voice message.');
+                permissionPending = true;
+                try {
+                    await prepareRecordingPermission({
+                        read: () => AudioModule.getRecordingPermissionsAsync(), request: () => AudioModule.requestRecordingPermissionsAsync(),
+                        state: () => AppState.currentState, subscribe: changed => { const subscription = AppState.addEventListener('change', changed); return () => subscription.remove(); },
+                    }, signal);
+                }
+                finally {
+                    permissionPending = false;
+                }
                 release = await audio.acquire('recording');
                 try {
                     check(signal);
+                    if (AppState.currentState !== 'active')
+                        throw Error('Return to the conversation to record a voice message.');
                     recorder = new AudioModule.AudioRecorder({ ...RecordingPresets.HIGH_QUALITY, isMeteringEnabled: true });
                     await recorder.prepareToRecordAsync({ ...RecordingPresets.HIGH_QUALITY, isMeteringEnabled: true });
                     check(signal); // Leave room for AAC encoder/container padding; the backend checks final file duration.
+                    if (AppState.currentState !== 'active')
+                        throw Error('Return to the conversation to record a voice message.');
                     const captureMs = Math.max(100, maximum - 100);
                     recorder.record({ forDuration: captureMs / 1000 });
                     recordingDeadline = Date.now() + captureMs;

package/dist/expo-messenger.d.ts

@@ -118,11 +118,16 @@ export interface ExpoMessengerProps extends Omit<ExpoMessagingScreenProps, 'cont
         start: (open: (conversationId: string, messageId: string) => Promise<void>) => Promise<void>;
         enable: () => Promise<void>;
     };
+    /** Let the host choose/create an authorized contact; no customer directory is guessed. */
+    onNewConversation?: () => void;
+    /** Custom inbox dialogs share the same bounded popup host. */
+    inboxOverlay?: React.ReactNode;
     inbox: MessagingInboxClient;
     contacts?: Record<string, {
         name: string;
         avatarUrl?: string;
         phoneNumber?: string;
+        groupEligible?: boolean;
     }>;
     initialConversation?: ConversationSummary;
     selectedConversation?: ConversationSummary | null;

package/dist/expo-messenger.js

@@ -160,7 +160,7 @@ function ExpoMessengerContent({ inbox, contacts = {}, initialConversation, selec
         const subscription = AppState.addEventListener('change', sync);
         return () => { subscription.remove(); props.client.stop(); };
     }, [selected?.id, props.client, props.active]);
-    const autoCalls = calling && selected && groupAllowed ? { ...(callState.features.voice ? { voice: () => calling.call(selected.id, 'voice', selected.kind === 'group') } : {}), ...(callState.features.video ? { video: () => calling.call(selected.id, 'video', selected.kind === 'group') } : {}), voiceLabel: 'Internet call' } : undefined;
+    const autoCalls = calling && selected && selected.contactId !== props.userId && groupAllowed ? { ...(callState.features.voice ? { voice: () => calling.call(selected.id, 'voice', selected.kind === 'group') } : {}), ...(callState.features.video ? { video: () => calling.call(selected.id, 'video', selected.kind === 'group') } : {}), voiceLabel: 'Internet call' } : undefined;
     const setSelected = (row) => { setInternal(row); onSelectConversation?.(row); };
     const [showMaps, setShowMaps] = useState(false), mapConnection = useMessengerMaps(maps), mapsAvailable = mapConnection.available;
     const inboxState = useSyncExternalStore(inbox.subscribe, inbox.getSnapshot, inbox.getSnapshot);
@@ -174,6 +174,6 @@ function ExpoMessengerContent({ inbox, contacts = {}, initialConversation, selec
         open(row, message); }).catch(() => { }); }, [notifications, inbox]);
     const notificationAccount = notifications ? { name: props.account?.name ?? 'Your account', ...props.account, onEnableNotifications: () => notifications.enable() } : props.account;
     const account = calling?.deviceCheck ? { name: 'Your account', ...notificationAccount, deviceCheck: calling.deviceCheck, renderCallPreview: (stream) => renderNativeCallVideo({ stream, local: true, style: { width: '100%', height: '100%' } }) } : notificationAccount;
-    const contact = selected?.kind === 'group' ? { name: selected.name ?? 'Group' } : contacts[selected?.contactId ?? ''] ?? { name: selected?.contactId ?? 'Chat' };
-    return _jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsx(MessengerMapsNotice, { error: mapConnection.error, retry: mapConnection.retry }), showMaps && maps ? _jsx(RobonoMaps, { interfaceLocale: mapsLocale, workspace: maps, contacts: contacts, onClose: () => setShowMaps(false) }) : _jsx(ExpoMessagingScreen, { ...props, account: account, contact: contact, participants: props.participants ?? contacts, extras: selected ? props.extras : undefined, callActions: selected ? { ...autoCalls, ...props.callActions, phoneNumber: contacts[selected.contactId ?? '']?.phoneNumber ?? props.callActions?.phoneNumber } : undefined, onBack: () => { props.client.stop(); setSelected(null); void inbox.refresh().catch(() => { }); }, renderConversation: screen => selected ? _jsx(MessagingCallingScreen, { ...screen, onCall: screen.callActions?.voice, onVideoCall: screen.callActions?.video, callLabel: "Internet call", unansweredCallId: callState.unanswered?.conversationId === selected.id ? callState.unanswered.id : undefined, onDismissCallMessage: calling?.dismissUnanswered }) : _jsxs(MessagingProvider, { ...screen, children: [_jsx(MessagingInbox, { viewMemory: inboxMemory, client: inbox, userId: props.userId, contacts: contacts, companyName: props.companyName, appearance: props.appearance, active: props.active !== false, headerActions: _jsx(MessagingAccountMenu, { onPublicRooms: inboxState.publicRoomsAvailable ? () => setPublicRooms(true) : undefined, onMaps: mapsAvailable ? () => setShowMaps(true) : undefined, onNewGroup: inboxState.groupCreationAvailable ? () => setNewGroup(true) : undefined }), onSelect: open, onDeleted: id => props.client.forgetConversation(id) }), publicRooms && _jsx(MessagingPublicRooms, { inbox: inbox, accent: (props.appearance ?? inboxState.appearance ?? defaultMessagingSettings().appearance).colors.accent, createRequestId: () => props.client.createForwardId(), onClose: () => setPublicRooms(false), onJoined: (id, name) => { setPublicRooms(false); open(inbox.getSnapshot().conversations.find(c => c.id === id) ?? { id, kind: 'group', name, contactId: null, lastMessage: null, unreadCount: 0, canSend: true }); } }), 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); } })] }) }), _jsx(ExpoMessengerCalls, { calling: calling, state: callState })] });
+    const contact = selected?.contactId === props.userId ? { name: 'Notes to self' } : selected?.kind === 'group' ? { name: selected.name ?? 'Group' } : contacts[selected?.contactId ?? ''] ?? { name: selected?.contactId ?? 'Chat' };
+    return _jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsx(MessengerMapsNotice, { error: mapConnection.error, retry: mapConnection.retry }), showMaps && maps ? _jsx(RobonoMaps, { interfaceLocale: mapsLocale, workspace: maps, contacts: contacts, onClose: () => setShowMaps(false) }) : _jsx(ExpoMessagingScreen, { ...props, account: account, contact: contact, participants: props.participants ?? contacts, extras: selected ? props.extras : undefined, callActions: selected && selected.contactId !== props.userId ? { ...autoCalls, ...props.callActions, phoneNumber: contacts[selected.contactId ?? '']?.phoneNumber ?? props.callActions?.phoneNumber } : undefined, onBack: () => { props.client.stop(); setSelected(null); void inbox.refresh().catch(() => { }); }, renderConversation: screen => selected ? _jsx(MessagingCallingScreen, { ...screen, onCall: screen.callActions?.voice, onVideoCall: screen.callActions?.video, callLabel: "Internet call", unansweredCallId: callState.unanswered?.conversationId === selected.id ? callState.unanswered.id : undefined, onDismissCallMessage: calling?.dismissUnanswered }) : _jsxs(MessagingProvider, { ...screen, children: [_jsx(MessagingInbox, { viewMemory: inboxMemory, client: inbox, userId: props.userId, contacts: contacts, companyName: props.companyName, appearance: props.appearance, active: props.active !== false, headerActions: _jsx(MessagingAccountMenu, { onNewConversation: props.onNewConversation, onPublicRooms: inboxState.publicRoomsAvailable ? () => setPublicRooms(true) : undefined, onMaps: mapsAvailable ? () => setShowMaps(true) : undefined, onNewGroup: inboxState.groupCreationAvailable ? () => setNewGroup(true) : undefined }), onSelect: open, onDeleted: id => props.client.forgetConversation(id) }), publicRooms && _jsx(MessagingPublicRooms, { inbox: inbox, accent: (props.appearance ?? inboxState.appearance ?? defaultMessagingSettings().appearance).colors.accent, createRequestId: () => props.client.createForwardId(), onClose: () => setPublicRooms(false), onJoined: (id, name) => { setPublicRooms(false); open(inbox.getSnapshot().conversations.find(c => c.id === id) ?? { id, kind: 'group', name, contactId: null, lastMessage: null, unreadCount: 0, canSend: true }); } }), 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); } }), props.inboxOverlay] }) }), _jsx(ExpoMessengerCalls, { calling: calling, state: callState })] });
 }

package/dist/expo-screen.d.ts

@@ -1,6 +1,6 @@
 export { createExpoMessagingClient } from './expo-outbox.js';
 import React from 'react';
-import { type MessagingAppearance } from '@robono/messaging';
+import { type MessagingAppearance, type MessagingMessage } from '@robono/messaging';
 import { type MessagingScreenProps } from './index.js';
 import { MessagingMediaController, type LocalMessagingMedia, type MessagingMediaStorage } from './media-controller.js';
 import { type MediaReadyStage } from './media-readiness.js';
@@ -9,7 +9,13 @@ export { createExpoMessagingAudioSession, createExpoMessagingDevice, createExpoM
 export type { MessagingAudioSession } from './expo-media.js';
 export type { LocalMessagingMedia, MessagingMediaStorage, MediaTransferOptions } from './media-controller.js';
 export { MessagingMediaController } from './media-controller.js';
-export declare function MessagingMediaOverlay({ controller, audio, appearance, inlineVoice, inlineRecorder, viewerActions, onDismiss }: {
+export type MessagingAttachmentDownload = (input: {
+    message: MessagingMessage;
+    file: LocalMessagingMedia;
+    signal: AbortSignal;
+}) => Promise<void>;
+export declare function MessagingMediaOverlay({ controller, audio, appearance, inlineVoice, inlineRecorder, viewerActions, onDismiss, onDownloadAttachment }: {
+    onDownloadAttachment?: MessagingAttachmentDownload;
     onDismiss?: () => void;
     viewerActions?: () => {
         onForward?: () => void;
@@ -24,6 +30,8 @@ export declare function MessagingMediaOverlay({ controller, audio, appearance, i
 export interface ExpoMessagingScreenProps extends Omit<MessagingScreenProps, 'pickAttachment' | 'openAttachment'> {
     storage: MessagingMediaStorage;
     audioSession: MessagingAudioSession;
+    /** Save an authorized private copy to your own destination. Copy it before resolving; Robono removes its temporary copy afterward. Respect signal when the viewer/account closes. */
+    onDownloadAttachment?: MessagingAttachmentDownload;
     /** Optional timing callback from native image/frame/playback readiness, measured from opening. */
     onMediaReady?: (event: {
         messageId: string;

package/dist/expo-screen.js

@@ -140,7 +140,7 @@ function VoicePlayer({ file, audio, design, inline, draft, autoPlay = false }) {
         setLoaded(player.isLoaded);
         restorePaused();
         const subscription = player.addListener('playbackStatusUpdate', status => { if (!scope.alive)
-            return; setLoaded(status.isLoaded); if (status.error) {
+            return; setLoaded(status.isLoaded); if ('error' in status && status.error) {
             if (!recoverStream())
                 fail(Error('The recording could not be played. Try again.'));
             return;
@@ -332,7 +332,7 @@ function FileViewer({ file, kind, audio, design }) {
                     } })();
                 } }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: design.colors.foreground }, children: error })] });
 }
-export function MessagingMediaOverlay({ controller, audio, appearance, inlineVoice = false, inlineRecorder = false, viewerActions, onDismiss }) {
+export function MessagingMediaOverlay({ controller, audio, appearance, inlineVoice = false, inlineRecorder = false, viewerActions, onDismiss, onDownloadAttachment }) {
     const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
     const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
     const c = appearance.colors;
@@ -347,7 +347,14 @@ export function MessagingMediaOverlay({ controller, audio, appearance, inlineVoi
     if ((typeof inlineVoice === 'function' ? inlineVoice() : inlineVoice) && state.kind === 'voice' && ['opening', 'viewing', 'failed'].includes(state.phase) && !review)
         return null;
     const viewer = state.file && (review || state.phase === 'viewing') ? _jsx(MediaViewer, { expanded: expanded, onExpandedChange: setExpanded, kind: state.kind, uri: state.file.uri, title: review ? uiText("Preview attachment") : state.kind === 'image' ? uiText("Photo") : state.kind === 'video' ? uiText("Video") : state.kind === 'voice' ? uiText("Voice message") : uiText("File"), subtitle: state.file.fileName, fileName: state.file.fileName, byteSize: state.file.byteSize, error: state.error ?? fileError, onClose: () => { setFileError(''); void controller.cancel(); }, reviewAction: review ? (state.phase === 'failed' ? 'Retry upload' : 'Add attachment') : undefined, onReview: review ? () => void controller.send() : undefined, ...(!review ? viewerActions?.() : {}), downloading: downloading, onDownload: !review && appearance.showDownloadButton === true && ['image', 'video', 'document'].includes(state.kind) ? () => { if (saving.current || !state.file)
-            return; saving.current = true; setDownloading(true); setFileError(''); void controller.exportFile(async (file) => { await saveMessagingAttachment(file, state.kind); mediaReady('file-opened', state.file.uri); }).catch(e => setFileError(e instanceof Error ? e.message : uiText("Could not save the attachment."))).finally(() => { saving.current = false; setDownloading(false); }); } : undefined, onShare: !review ? () => { void controller.exportFile(async (file) => { await Sharing.shareAsync(file.uri, { mimeType: file.mimeType, dialogTitle: file.fileName }); mediaReady('file-opened', state.file.uri); }).catch(() => setFileError(uiText("Could not share this attachment."))); } : undefined, onFileAction: () => { void (async () => { try {
+            return; saving.current = true; setDownloading(true); setFileError(''); void controller.exportFile(async (file, context) => { if (onDownloadAttachment) {
+            if (!context.message)
+                throw Error('The attachment is unavailable.');
+            await onDownloadAttachment({ file, message: context.message, signal: context.signal });
+        }
+        else
+            await saveMessagingAttachment(file, state.kind); if (!context.signal.aborted)
+            mediaReady('file-opened', file.uri); }, { reauthorize: !!onDownloadAttachment }).catch(e => setFileError(e instanceof Error ? e.message : uiText("Could not save the attachment."))).finally(() => { saving.current = false; setDownloading(false); }); } : undefined, onShare: !review ? () => { void controller.exportFile(async (file) => { await Sharing.shareAsync(file.uri, { mimeType: file.mimeType, dialogTitle: file.fileName }); mediaReady('file-opened', state.file.uri); }).catch(() => setFileError(uiText("Could not share this attachment."))); } : undefined, onFileAction: () => { void (async () => { try {
             if (!await Sharing.isAvailableAsync())
                 throw Error('File opening is unavailable.');
             await Sharing.shareAsync(state.file.uri, { mimeType: state.file.mimeType, dialogTitle: state.file.fileName });
@@ -415,11 +422,12 @@ function ExpoMessagingScreenContent({ storage, audioSession, renderConversation,
         return copy;
     }, [controller, recorder, props.client, outbox, audioSession]);
     const prepare = async (kind, media) => { await restore(media, kind); const owner = recorder.getPrepared(media.assetId) ? recorder : controller; if (!owner.getPrepared(media.assetId))
-        return media; const uploaded = await owner.uploadPrepared(media.assetId, kind); thumbnails.alias(media.assetId, uploaded.assetId); return uploaded; };
+        return media; const uploaded = await owner.uploadPrepared(media.assetId, kind); return uploaded; };
     useEffect(() => props.client.setAttachmentPreparer(async (content) => { if (!content.media || content.kind === 'text' || content.kind === 'poll' || !await restore(content.media, content.kind))
         throw Error('The saved attachment is unavailable. Remove it and choose it again.'); return { ...content, media: await prepare(content.kind, content.media) }; }), [props.client, controller, recorder, outbox]);
     const thumbnails = useMemo(() => createExpoThumbnails(recent.storage, id => controller.getPrepared(id) ?? recorder.getPrepared(id), createExpoMessagingDevice(audioSession).remove), [recent, controller, recorder, audioSession]);
-    useEffect(() => () => thumbnails.clear(), [thumbnails, state.conversationId, state.settings?.enabled, state.conversation?.canSend, props.active]);
+    const thumbnailAccess = JSON.stringify([state.settings?.enabled, state.settings?.features, state.conversation?.canSend, !!state.error]);
+    useEffect(() => () => thumbnails.clear(), [thumbnails, state.conversationId, thumbnailAccess, props.active]);
     const cacheDisposal = useRef(new Map());
     useEffect(() => {
         clearTimeout(cacheDisposal.current.get(recent));
@@ -547,7 +555,7 @@ function ExpoMessagingScreenContent({ storage, audioSession, renderConversation,
             throw Error('This saved attachment is unavailable.'); const intent = ++openingIntent.current; await stopVoicePlayers(); const file = await copyMessagingCache(await saved.file(record)); if (intent !== openingIntent.current) {
             await createExpoMessagingDevice(audioSession).remove(file);
             return;
-        } opened.current = null; message.current = null; await controller.previewLocal(file, record.message.kind); },
+        } opened.current = null; message.current = null; await controller.previewLocal(file, record.message.kind, record.message); },
     };
     const mediaReady = (stage, uri) => { const event = opened.current; if (!event || controller.getSnapshot().phase !== 'viewing' || controller.getSnapshot().file?.uri !== uri)
         return; if (stage !== 'video-frame' && message.current?.conversationId === current.current.client.getSnapshot().conversationId)
@@ -556,7 +564,7 @@ function ExpoMessagingScreenContent({ storage, audioSession, renderConversation,
         current.current.onMediaReady?.({ messageId: event.messageId, kind: event.kind, stage, elapsedMs: Date.now() - event.started });
     }
     catch { } };
-    return _jsx(MessagingTypography, { appearance: props.appearance ?? state.settings?.appearance ?? defaultMessagingSettings().appearance, children: _jsx(StreamRecovery.Provider, { value: (uri, position, playing) => { void controller.fallbackStream(uri, position, playing); }, children: _jsxs(MediaReadiness.Provider, { value: mediaReady, children: [renderConversation ? renderConversation(screenProps) : _jsx(MessagingScreen, { ...screenProps }), _jsx(MessagingMediaOverlay, { onDismiss: viewerDismissed, viewerActions: () => {
+    return _jsx(MessagingTypography, { appearance: props.appearance ?? state.settings?.appearance ?? defaultMessagingSettings().appearance, children: _jsx(StreamRecovery.Provider, { value: (uri, position, playing) => { void controller.fallbackStream(uri, position, playing); }, children: _jsxs(MediaReadiness.Provider, { value: mediaReady, children: [renderConversation ? renderConversation(screenProps) : _jsx(MessagingScreen, { ...screenProps }), _jsx(MessagingMediaOverlay, { onDownloadAttachment: props.onDownloadAttachment, onDismiss: viewerDismissed, viewerActions: () => {
                             const m = message.current;
                             if (!m || !state.messages.some(row => row.id === m.id && !row.deleted))
                                 return {};

package/dist/expo-thumbnails.d.ts

@@ -5,5 +5,4 @@ import type { LocalMessagingMedia, MessagingMediaStorage } from './media-control
 export declare function createExpoThumbnails(storage: MessagingMediaStorage, local: (id: string) => LocalMessagingMedia | undefined, remove: (file: LocalMessagingMedia) => Promise<void>): {
     preview: (message: MessagingMessage) => Promise<{}>;
     clear: () => void;
-    alias: (from: string, to: string) => void;
 };

package/dist/expo-thumbnails.js

@@ -1,14 +1,12 @@
+import { MessagingPreviewCache } from './preview-cache.js';
 import * as ImageManipulator from 'expo-image-manipulator';
 import * as VideoThumbnails from 'expo-video-thumbnails';
 import * as FS from 'expo-file-system/legacy';
 /** Small local previews, with bounded downloads and memory. Large originals stay
  * tap-to-open until the storage service supplies a dedicated thumbnail. */
 export function createExpoThumbnails(storage, local, remove) {
-    let generation = 0;
-    const cache = new Map(), abort = new Set();
-    let queue = Promise.resolve();
-    function clear() { generation++; cache.clear(); for (const c of abort)
-        c.abort(); abort.clear(); }
+    const cache = new MessagingPreviewCache();
+    const clear = () => cache.clear();
     function preview(message) {
         const media = message.media;
         if (!media || message.deleted)
@@ -17,52 +15,45 @@ export function createExpoThumbnails(storage, local, remove) {
             return Promise.resolve({ waveform: media.waveform });
         if (!['image', 'video'].includes(message.kind))
             return Promise.resolve({});
-        const id = media.assetId, existing = cache.get(id);
-        if (existing)
-            return existing;
-        const g = generation;
-        const work = queue.then(async () => {
-            if (g !== generation)
+        const id = media.assetId, key = JSON.stringify([message.conversationId, id, message.revision, media]);
+        return cache.get(key, async (signal) => {
+            if (signal.aborted)
                 return {};
             let file = local(id), downloaded = false, poster, thumbnail;
-            const controller = new AbortController();
-            abort.add(controller);
+            // An optimistic bubble has no server message ID yet. Only its local file can
+            // supply a preview until acknowledgement replaces the pending bubble.
+            if (!file && message.id.startsWith('pending:'))
+                return {};
             try {
                 let dedicated = false;
                 if (!file && storage.thumbnail) {
-                    file = await storage.thumbnail(message, { signal: controller.signal, onProgress: () => { } }).catch(() => null) ?? undefined;
+                    file = await storage.thumbnail(message, { signal, onProgress: () => { } }) ?? undefined;
                     dedicated = !!file;
                     downloaded = !!file;
                 }
                 if (!file) {
                     if (media.byteSize > 2 * 1024 * 1024)
                         return {};
-                    file = await storage.download(message, { signal: controller.signal, onProgress: () => { } });
+                    file = await storage.download(message, { signal: signal, onProgress: () => { } });
                     downloaded = true;
                 }
-                if (g !== generation)
+                if (signal.aborted)
                     return {};
                 if (message.kind === 'video' && !dedicated)
                     poster = (await VideoThumbnails.getThumbnailAsync(file.uri, { time: 0, quality: .6 })).uri;
                 const result = await ImageManipulator.manipulateAsync(poster ?? file.uri, [{ resize: { width: 480 } }], { compress: .7, format: ImageManipulator.SaveFormat.JPEG, base64: true });
                 thumbnail = result.uri;
-                return g === generation && result.base64 ? { uri: 'data:image/jpeg;base64,' + result.base64 } : {};
+                return !signal.aborted && result.base64 ? { uri: 'data:image/jpeg;base64,' + result.base64 } : {};
             }
             finally {
-                abort.delete(controller);
                 if (downloaded && file)
                     await remove(file).catch(() => { });
                 for (const uri of [poster, thumbnail])
                     if (uri && FS.cacheDirectory && uri.startsWith(FS.cacheDirectory))
                         await FS.deleteAsync(uri, { idempotent: true }).catch(() => { });
             }
-        }).catch(() => ({}));
-        queue = work.then(() => { });
-        cache.set(id, work);
-        if (cache.size > 100)
-            cache.delete(cache.keys().next().value);
-        return work;
+        });
     }
-    return { preview, clear, alias: (from, to) => { const value = cache.get(from); if (value)
-            cache.set(to, value); } };
+    // Uploaded IDs get their own authorized preview; never alias access between assets.
+    return { preview, clear };
 }

package/dist/expo.d.ts

@@ -1,2 +1,3 @@
 export * from './expo-screen.js';
 export { ExpoMessenger, createExpoMessenger, createHostedExpoMessenger, type ExpoMessengerProps } from './expo-messenger.js';
+export { MessagingPopup } from './popup.js';

package/dist/expo.js

@@ -1,2 +1,3 @@
 export * from './expo-screen.js';
 export { ExpoMessenger, createExpoMessenger, createHostedExpoMessenger } from './expo-messenger.js';
+export { MessagingPopup } from './popup.js';

package/dist/group-editor.d.ts

@@ -7,6 +7,7 @@ export interface MessagingGroupEditorProps {
     contacts: Record<string, {
         name: string;
         avatarUrl?: string;
+        groupEligible?: boolean;
     }>;
     conversation?: MessagingState['conversation'];
     groups: MessagingSettings['groups'];

package/dist/group-editor.js

@@ -47,7 +47,7 @@ export function MessagingGroupEditor({ client, inbox, userId, contacts, conversa
     }
     useEffect(() => { if (editing)
         void load(); return () => { ++generation.current; }; }, [client, conversationId]);
-    const people = useMemo(() => [...new Set([...Object.keys(contacts), ...original])].filter(id => id !== userId &&
+    const people = useMemo(() => [...new Set([...Object.keys(contacts), ...original])].filter(id => id !== userId && contacts[id]?.groupEligible !== false &&
         (contacts[id]?.name ?? 'Member').toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())).sort((a, b) => (contacts[a]?.name ?? a).localeCompare(contacts[b]?.name ?? b)), [contacts, original, query, userId]);
     const chosen = (id) => !removed.has(id) && (original.has(id) || added.has(id));
     const toggle = (id) => {

package/dist/inbox.d.ts

@@ -7,6 +7,7 @@ export interface MessagingInboxProps {
     contacts?: Record<string, {
         name: string;
         avatarUrl?: string;
+        groupEligible?: boolean;
     }>;
     viewMemory?: InboxViewMemory;
     query?: string;

package/dist/inbox.js

@@ -24,7 +24,7 @@ export function MessagingInbox({ client, userId, contacts = {}, appearance, acti
     const setQuery = (value) => { memory.query = value; (onSearchChange ?? setLocalQuery)(value); };
     const scroll = useInboxScroll(memory, 'chats:' + query.trim(), state.conversations.length > 0 && !state.loading, !state.hasMore);
     const [selected, setSelected] = useState(null), [confirm, setConfirm] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState('');
-    const title = (row) => row.kind === 'group' ? row.name ?? 'Group' : contacts[row.contactId ?? '']?.name ?? row.contactId ?? 'Chat';
+    const title = (row) => row.contactId === userId ? uiText('Notes to self') : row.kind === 'group' ? row.name ?? 'Group' : contacts[row.contactId ?? '']?.name ?? row.contactId ?? 'Chat';
     const rows = useRef(new Map()), pending = useRef(null);
     const [menuVisible, setMenuVisible] = useState(false), [confirmVisible, setConfirmVisible] = useState(false), [anchor, setAnchor] = useState({ x: 12, y: 88 });
     const openOptions = (row) => { if (!state.inboxActionsAvailable)
@@ -62,7 +62,7 @@ export function MessagingInbox({ client, userId, contacts = {}, appearance, acti
     const preview = (row) => { const m = row.lastMessage; if (!m)
         return 'No messages yet'; const text = m.kind === 'text' ? m.text ?? '' : ({ voice: 'Voice message', image: 'Photo', video: 'Video', document: 'Document', poll: 'Poll' }[m.kind] ?? 'Message'); return (m.senderId === userId ? 'You: ' : '') + text; };
     return _jsx(MessagingTypography, { appearance: design, children: _jsxs(View, { style: { flex: 1, minHeight: 0, backgroundColor: c.background }, children: [_jsx(MessagingPopupHeaderBoundary, { children: _jsxs(View, { testID: "messaging-inbox-header", style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', minHeight: 64, paddingHorizontal: 16, paddingVertical: 8, gap: 8 }, children: [_jsx(Text, { accessibilityRole: "header", numberOfLines: 1, style: { flex: 1, color: c.foreground, fontSize: 20, fontWeight: '700' }, children: companyName ?? design.name }), headerActions] }) }), _jsxs(View, { style: { margin: 12, marginTop: 8, flexDirection: 'row', alignItems: 'center', gap: 8, borderRadius: 10, paddingHorizontal: 10, backgroundColor: c.foreground + '0b' }, children: [_jsx(MessageIcon, { name: "search", size: 20, color: c.secondary }), _jsx(TextInput, { accessibilityLabel: uiText("Search chats"), placeholder: state.globalSearchAvailable ? uiText("Search chats and messages") : uiText("Search chats"), placeholderTextColor: c.secondary, value: query, onChangeText: setQuery, maxLength: 200, autoCapitalize: "none", autoCorrect: false, style: { flex: 1, minHeight: 44, color: c.foreground, fontSize: 16 } }), !!query && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Clear chat search"), onPress: () => setQuery(''), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", size: 20, color: c.secondary }) })] }), state.error && _jsxs(View, { style: { padding: 12 }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground }, children: state.error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void client.refresh().catch(() => { }), children: _jsx(Text, { style: { color: c.accent, paddingVertical: 8 }, children: uiText("Try again") }) })] }), query.trim() && state.globalSearchAvailable ? _jsx(InboxMessageSearch, { viewMemory: memory, client: client, query: query.trim(), appearance: design, name: title, chats: state.conversations.filter(row => title(row).toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())), onSelect: onSelect }, userId) : _jsx(FlatList, { ...scroll, testID: "messaging-inbox-list", data: state.conversations.filter(row => !query.trim() || [title(row), row.lastMessage?.text ?? '', searchText?.(row) ?? ''].join(' ').toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())), keyExtractor: row => row.id, contentContainerStyle: { flexGrow: 1 }, ItemSeparatorComponent: () => _jsx(View, { style: { height: 1, backgroundColor: c.foreground + '12', marginLeft: 64 } }), ListEmptyComponent: _jsx(Text, { style: { padding: 20, textAlign: 'center', color: c.secondary }, children: state.loading ? uiText("Loading chats…") : state.error ? '' : query ? uiText("No matching chats.") : uiText("No chats yet") }), ListFooterComponent: state.hasMore ? _jsx(Pressable, { accessibilityRole: "button", disabled: state.loading, onPress: () => void client.loadMore().catch(() => { }), children: _jsx(Text, { style: { padding: 12, textAlign: 'center', color: c.accent }, children: state.loading ? uiText("Loading…") : uiText("More chats") }) }) : null, renderItem: ({ item }) => {
-                        const person = item.contactId ? contacts[item.contactId] : undefined, title = item.kind === 'group' ? item.name ?? 'Group' : person?.name ?? item.contactId ?? 'Chat';
+                        const person = item.contactId ? contacts[item.contactId] : undefined, title = item.contactId === userId ? uiText('Notes to self') : item.kind === 'group' ? item.name ?? 'Group' : person?.name ?? item.contactId ?? 'Chat';
                         const date = item.lastMessage ? new Date(item.lastMessage.createdAt) : null;
                         return _jsxs(Pressable, { ref: node => { if (node)
                                 rows.current.set(item.id, node);

package/dist/index.d.ts

@@ -60,6 +60,14 @@ export interface AttachmentChoice {
     durationMs?: number;
 }
 export interface MessagingScreenProps {
+    /** Disabled links render as plain text. Callbacks replace system navigation;
+     * providing openUrl also disables embedded social browsing. */
+    linkHandling?: {
+        webLinks?: boolean;
+        addresses?: boolean;
+        openUrl?: (url: string, message: MessagingMessage) => void | Promise<void>;
+        openAddress?: (address: string, message: MessagingMessage) => void | Promise<void>;
+    };
     /** Compose surrounding navigation while keeping a single message context. */
     renderLayout?: (conversation: ReactNode) => ReactNode;
     /** Language of controls and accessibility labels; separate from translated message content. */
@@ -175,7 +183,8 @@ export declare function MessagingBubble({ message, pendingStatus, previousMessag
 export declare function MessagingList(): React.JSX.Element;
 export declare function MessagingComposer(): React.JSX.Element;
 /** Account navigation. Mount in the inbox/app toolbar, never in a contact menu. */
-export declare function MessagingAccountMenu({ onNewGroup, onMaps, onPublicRooms }?: {
+export declare function MessagingAccountMenu({ onNewConversation, onNewGroup, onMaps, onPublicRooms }?: {
+    onNewConversation?: () => void;
     onNewGroup?: () => void;
     onMaps?: () => void;
     onPublicRooms?: () => void;