@robono/messaging-react-native 0.0.0-stage → 0.2.0

package/dist/icons.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { type RobonoIconProps } from "./visual/RobonoIcon.js";
+export declare function MessageIcon(props: RobonoIconProps): React.JSX.Element;
+export declare function duration(ms?: number): string;
+export declare function fileSize(bytes?: number): string;
+/** Neutral app chrome stays legible for light and dark customer palettes. */
+export declare function chatSurface(background: string): "#1e262b" | "#ffffff";

package/dist/icons.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RobonoIcon } from "./visual/RobonoIcon.js";
+export function MessageIcon(props) { return _jsx(RobonoIcon, { ...props }); }
+export function duration(ms = 0) { const seconds = Math.ceil(ms / 1000); return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`; }
+export function fileSize(bytes = 0) { return bytes >= 1048576 ? `${(bytes / 1048576).toFixed(1)} MB` : bytes >= 1024 ? `${Math.ceil(bytes / 1024)} KB` : `${bytes} B`; }
+/** Neutral app chrome stays legible for light and dark customer palettes. */
+export function chatSurface(background) {
+    const rgb = background.slice(1).match(/../g)?.map(v => parseInt(v, 16)) ?? [255, 255, 255];
+    return rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 < 128 ? "#1e262b" : "#ffffff";
+}

package/dist/inbox.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type MessagingAppearance, type MessagingInboxClient, type ConversationSummary } from '@robono/messaging';
+export interface MessagingInboxProps {
+    client: MessagingInboxClient;
+    userId: string;
+    contacts?: Record<string, {
+        name: string;
+        avatarUrl?: string;
+    }>;
+    appearance?: MessagingAppearance;
+    active?: boolean;
+    onSelect: (conversation: ConversationSummary) => void;
+    onDeleted?: (conversationId: string) => Promise<void> | void;
+}
+/** Compact Messenger chat rows: avatar, name, last message, time and unread badge. */
+export declare function MessagingInbox({ client, userId, contacts, appearance, active, onSelect, onDeleted }: MessagingInboxProps): React.JSX.Element;

package/dist/inbox.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { AppState, FlatList, Image, Modal, Platform, Pressable, Text, View, useWindowDimensions } from 'react-native';
+import { defaultMessagingSettings } from '@robono/messaging';
+import { MessagingPopup } from './popup.js';
+/** Compact Messenger chat rows: avatar, name, last message, time and unread badge. */
+export function MessagingInbox({ client, userId, contacts = {}, appearance, active = true, onSelect, onDeleted }) {
+    const state = useSyncExternalStore(client.subscribe, client.getSnapshot, client.getSnapshot), design = appearance ?? state.appearance ?? defaultMessagingSettings().appearance, c = design.colors;
+    useEffect(() => { const update = (value) => { if (active && (value === null || value === 'active'))
+        client.start();
+    else
+        client.stop(); }; update(AppState.currentState); const sub = AppState.addEventListener('change', update); return () => { sub.remove(); client.stop(); }; }, [client, active]);
+    const [selected, setSelected] = useState(null), [confirm, setConfirm] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState(''), [anchor, setAnchor] = useState({ x: 8, y: 8 });
+    const window = useWindowDimensions();
+    const title = (row) => row.kind === 'group' ? row.name ?? 'Group' : contacts[row.contactId ?? '']?.name ?? row.contactId ?? 'Chat';
+    const openOptions = (row, x, y) => { if (!state.inboxActionsAvailable)
+        return; setSelected(row); setAnchor({ x: Math.max(8, Math.min(x, window.width - 288)), y: Math.max(8, Math.min(y, window.height - 200)) }); setConfirm(false); setError(''); };
+    useEffect(() => { if (selected && !state.conversations.some(c => c.id === selected.id) && !busy && !error)
+        setSelected(null); }, [state.conversations, busy, selected, error]);
+    async function act(remove) { if (!selected || busy)
+        return; setBusy(true); setError(''); try {
+        if (remove) {
+            await client.deleteConversation(selected);
+            await onDeleted?.(selected.id);
+        }
+        else
+            await client.setMuted(selected.id, !selected.muted);
+        setSelected(null);
+        setConfirm(false);
+    }
+    catch (e) {
+        setError(e instanceof Error ? e.message : 'Chat options could not be saved.');
+    }
+    finally {
+        setBusy(false);
+    } }
+    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 _jsxs(View, { style: { flex: 1, minHeight: 0, backgroundColor: c.background }, children: [_jsx(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 20, fontWeight: '700', padding: 12, borderBottomWidth: 1, borderBottomColor: c.foreground + '12' }, children: "Chats" }), 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: "Try again" }) })] }), _jsx(FlatList, { data: state.conversations, 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 ? 'Loading chats…' : state.error ? '' : '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 ? 'Loading…' : '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 date = item.lastMessage ? new Date(item.lastMessage.createdAt) : null;
+                    return _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${title}${item.unreadCount ? `, ${item.unreadCount} unread` : ''}`, onPress: () => onSelect(item), onLongPress: e => openOptions(item, e.nativeEvent.pageX, e.nativeEvent.pageY), accessibilityActions: state.inboxActionsAvailable ? [{ name: 'showOptions', label: 'Chat options' }] : [], onAccessibilityAction: e => { if (e.nativeEvent.actionName === 'showOptions')
+                            openOptions(item, window.width / 2 - 140, window.height / 2 - 100); }, ...(Platform.OS === 'web' ? { onContextMenu: (e) => { e.preventDefault(); openOptions(item, e.clientX, e.clientY); } } : {}), style: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 12, paddingVertical: 10, minHeight: 68 }, children: [person?.avatarUrl ? _jsx(Image, { source: { uri: person.avatarUrl }, style: { width: 40, height: 40, borderRadius: 20 } }) : _jsx(View, { style: { width: 40, height: 40, borderRadius: 20, backgroundColor: c.accent + '20', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 18, fontWeight: '700' }, children: title.slice(0, 1).toUpperCase() }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsxs(Text, { numberOfLines: 1, style: { color: c.foreground, fontSize: 16, fontWeight: '700' }, children: [title, item.muted ? ' · Muted' : ''] }), _jsx(Text, { numberOfLines: 1, style: { color: c.secondary, marginTop: 3, fontSize: 14 }, children: preview(item) })] }), _jsxs(View, { style: { alignItems: 'flex-end', gap: 4 }, children: [_jsx(Text, { style: { color: item.unreadCount ? c.accent : c.secondary, fontSize: 12 }, children: date ? date.toDateString() === new Date().toDateString() ? date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' }) : date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : '' }), item.unreadCount > 0 && _jsx(View, { style: { minWidth: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: c.accent, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 5 }, children: _jsx(Text, { style: { color: c.accent, fontSize: 10, fontWeight: '900' }, children: item.unreadCount > 99 ? '99+' : item.unreadCount }) })] })] });
+                } }), selected && !confirm && _jsx(Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: () => { if (!busy)
+                    setSelected(null); }, children: _jsx(Pressable, { accessibilityLabel: "Close chat options", onPress: () => { if (!busy)
+                        setSelected(null); }, style: { flex: 1, backgroundColor: '#0004' }, children: _jsxs(View, { onStartShouldSetResponder: () => true, style: { position: 'absolute', left: anchor.x, top: anchor.y, width: 280, borderRadius: 18, padding: 8, backgroundColor: c.background }, children: [_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => void act(false), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground }, children: selected.muted ? 'Unmute' : 'Mute' }) }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setConfirm(true), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.foreground }, children: "Delete chat" }) }), _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setSelected(null), style: { padding: 16 }, children: _jsx(Text, { style: { color: c.secondary }, children: "Cancel" }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, padding: 12 }, children: error })] }) }) }), selected && confirm && _jsxs(MessagingPopup, { background: c.background, onClose: () => { if (!busy)
+                    setConfirm(false); }, children: [_jsxs(Text, { accessibilityRole: "header", style: { color: c.foreground, fontSize: 17, fontWeight: '600' }, children: ["Delete chat with ", title(selected), "?"] }), _jsx(Text, { style: { color: c.secondary, marginTop: 8 }, children: "This removes the chat and its history from your view. Other people keep their copy. New messages can bring the chat back." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'flex-end', gap: 20, marginTop: 12 }, children: [_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setConfirm(false), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground }, children: "Cancel" }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Confirm delete chat", disabled: busy, onPress: () => void act(true), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent }, children: "Delete" }) })] })] })] });
+}

package/dist/index.d.ts

@@ -0,0 +1,144 @@
+import { type SocialPlayerProps } from './social.js';
+export type { SocialPlayerProps } from './social.js';
+export { MessagingSearch } from './search.js';
+export { MessagingSafety } from './safety.js';
+export { PollMessage, PollComposer } from "./polls.js";
+import React, { type ComponentType, type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type VoiceComposerProps } from "./voice-composer.js";
+export { VoiceMessageComposer, VoiceDraftPlayback } from "./voice-composer.js";
+export type { VoiceComposerProps } from "./voice-composer.js";
+import { type VoiceBubbleProps } from "./media-ui.js";
+export { VoicePlayback, MediaViewer, MediaPlaybackControls, ZoomablePhoto } from "./media-ui.js";
+export type { VoiceBubbleProps } from "./media-ui.js";
+import { type MessageKind, type MessageMedia, type MessagingAppearance, type MessagingClient, type MessagingMessage, type MessagingState, type MessageTransform, type SavedMessage } from "@robono/messaging";
+export interface VoiceAttachmentProps {
+    media: MessageMedia;
+    appearance: MessagingAppearance;
+    disabled: boolean;
+    onRemove: () => void;
+}
+export interface TranslationVoiceProps {
+    transform: MessageTransform;
+    ink: string;
+    accent: string;
+    showWaveform?: boolean;
+}
+export interface MessagingComponents {
+    SocialPlayer?: ComponentType<SocialPlayerProps>;
+    TranslationVoice?: ComponentType<TranslationVoiceProps>;
+    VoiceAttachment?: ComponentType<VoiceAttachmentProps>;
+    Header?: ComponentType;
+    Message?: ComponentType<{
+        message: MessagingMessage;
+    }>;
+    /** Optional inline audio adapter. The shared VoicePlayback supplies all visible controls. */
+    VoiceMessage?: ComponentType<VoiceBubbleProps>;
+    VoiceComposer?: ComponentType<VoiceComposerProps>;
+    List?: ComponentType;
+    Composer?: ComponentType;
+}
+/** Assets supplied by the host's authorized media library; choosing one adds a pending attachment. */
+export interface AttachmentChoice {
+    id: string;
+    kind: 'image' | 'video' | 'document';
+    name: string;
+    thumbnailUri?: string;
+    durationMs?: number;
+}
+export interface MessagingScreenProps {
+    client: MessagingClient;
+    /** Browser adapter supplies the hosting origin; native embeds use Robono's domain. */
+    socialOrigin?: string;
+    /** Optional self-hosted copy of messaging-embed.html, for strict website policies. */
+    socialEmbedPageUrl?: string;
+    /** Target language for this viewer; defaults to the device locale. */
+    language?: string;
+    userId: string;
+    contact: {
+        name: string;
+        avatarUrl?: string;
+    };
+    /** Resolve group member names through your app's authorized contact directory. */
+    participants?: Record<string, {
+        name: string;
+        avatarUrl?: string;
+    }>;
+    appearance?: MessagingAppearance;
+    components?: MessagingComponents;
+    style?: StyleProp<ViewStyle>;
+    /** Set false when this conversation is covered by another route. */
+    active?: boolean;
+    onBack?: () => void;
+    /** Optional override for the supplied contact safety menu; use your existing safety flow. */
+    onContactOptions?: () => void;
+    onMessageOptions?: (message: MessagingMessage) => void;
+    /** Used by the media preview to open the same message actions. */
+    requestedMessageAction?: {
+        kind: 'forward' | 'delete';
+        messageId: string;
+        sequence: number;
+    };
+    /** Native clipboard adapter. Supplied by ExpoMessagingScreen. Web uses its clipboard. */
+    copyText?: (text: string) => Promise<void>;
+    /** Optional recent media shown beneath the attachment buttons. */
+    attachmentChoices?: AttachmentChoice[];
+    /** Pick, capture or record, then upload to your private store. Return an opaque asset reference. */
+    pickAttachment?: (kind: Exclude<MessageKind, "text" | "poll">, options: {
+        maxDurationMs?: number;
+        maxFileBytes?: number;
+        allowedMimeTypes?: string[];
+        source?: "camera" | "call-video";
+        attachmentId?: string;
+        intent?: "send" | "preview" | "attach";
+    }) => Promise<MessageMedia | null>;
+    /** Release local draft resources after removal or submission; keep uploaded assets needed by retries. */
+    releaseAttachment?: (media: MessageMedia) => void | Promise<void>;
+    /** Upload a locally selected attachment after its outgoing bubble is visible. */
+    prepareAttachment?: (kind: Exclude<MessageKind, 'text' | 'poll'>, media: MessageMedia) => Promise<MessageMedia>;
+    retainDraftAttachments?: boolean;
+    /** Resolve an authorized thumbnail and/or normalized waveform. Never put signed URLs in message data. */
+    attachmentPreview?: (message: MessagingMessage) => Promise<{
+        uri?: string;
+        waveform?: number[];
+    }>;
+    /** Authorize the asset and open it using your app's media player/viewer. */
+    openAttachment?: (message: MessagingMessage) => Promise<void>;
+    openSavedAttachment?: (record: SavedMessage) => Promise<void>;
+}
+interface MessagingContext extends MessagingScreenProps {
+    state: MessagingState;
+    design: MessagingAppearance;
+    reply: MessagingMessage | null;
+    editing: MessagingMessage | null;
+    setEditing: (message: MessagingMessage | null) => void;
+    setForwarding: (messages: MessagingMessage[]) => void;
+    setDeleting: (messages: MessagingMessage[]) => void;
+    selection: MessagingMessage[];
+    setSelection: (messages: MessagingMessage[]) => void;
+    saved: SavedMessage[];
+    saving: boolean;
+    toggleSaved: (message: MessagingMessage) => Promise<void>;
+    setSavedOpen: (open: boolean) => void;
+    setReply: (message: MessagingMessage | null) => void;
+}
+export declare function useMessagingUI(): MessagingContext;
+export declare function MessagingProvider({ children, ...props }: MessagingScreenProps & {
+    children: ReactNode;
+}): React.JSX.Element;
+export declare function messagingHeaderColors(design: MessagingAppearance, group: boolean): {
+    background: string;
+    foreground: string;
+};
+export declare function MessagingHeader({ children }?: {
+    children?: ReactNode;
+}): React.JSX.Element;
+export declare function MessagingBubble({ message, pendingStatus }: {
+    message: MessagingMessage;
+    pendingStatus?: 'sending' | 'failed';
+}): React.JSX.Element;
+export declare function MessagingList(): React.JSX.Element;
+export declare function MessagingComposer(): React.JSX.Element;
+/** Embed inside your app's safe area and navigation. No engine, push or global audio side effects. */
+export declare function MessagingScreen(props: MessagingScreenProps): React.JSX.Element;
+export { MessagingInbox, type MessagingInboxProps } from './inbox.js';