@robono/messaging-react-native 0.1.0 → 0.3.0

package/dist/message-order.js

@@ -0,0 +1,27 @@
+/** Only adjacent parts of the same send share a rail. Never join across a
+ * missing part, another sender/conversation, or a date separator. */
+export function continuesAttachmentSend(before, after) {
+    if (!before || !after || before.deleted || after.deleted)
+        return false;
+    const a = before.attachmentBatch, b = after.attachmentBatch;
+    return !!a && !!b && a.id === b.id && a.count === b.count && a.index + 1 === b.index
+        && before.senderId === after.senderId && before.conversationId === after.conversationId
+        && new Date(before.createdAt).toDateString() === new Date(after.createdAt).toDateString();
+}
+/** Upload completion order must not reorder the attachments selected together.
+ * Transport state remains in server sequence order for reconnect cursors. */
+export function orderChatMessages(messages) {
+    const first = new Map();
+    const key = (m) => m.attachmentBatch ? JSON.stringify([m.senderId, m.attachmentBatch.id]) : null;
+    for (let i = 0; i < messages.length; i++) {
+        const k = key(messages[i]);
+        if (k && !first.has(k))
+            first.set(k, i);
+    }
+    return messages.map((message, index) => ({ message, index })).sort((a, b) => {
+        const ak = key(a.message), bk = key(b.message);
+        if (ak && ak === bk)
+            return a.message.attachmentBatch.index - b.message.attachmentBatch.index || a.index - b.index;
+        return (ak ? first.get(ak) : a.index) - (bk ? first.get(bk) : b.index);
+    }).map(item => item.message);
+}

package/dist/messenger-video-view.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type VideoViewProps, type VideoPlayer } from 'expo-video';
+/** Shared by Robono Messenger and the SDK. A decoded frame includes the camera's
+ * rotation; the encoded track's natural width/height does not necessarily do so. */
+export declare function MessengerVideoView({ player, posterUri, ...props }: Omit<VideoViewProps, 'player' | 'contentFit' | 'fullscreenOptions'> & {
+    player: VideoPlayer;
+    posterUri?: string | null;
+}): React.JSX.Element;

package/dist/messenger-video-view.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Image } from 'react-native';
+import { VideoView } from 'expo-video';
+/** Shared by Robono Messenger and the SDK. A decoded frame includes the camera's
+ * rotation; the encoded track's natural width/height does not necessarily do so. */
+export function MessengerVideoView({ player, posterUri, ...props }) {
+    const [orientation, setOrientation] = useState('default');
+    useEffect(() => {
+        let alive = true, pending = false, resolved = false;
+        setOrientation('default');
+        const accept = (width, height) => { if (!alive || width <= 0 || height <= 0)
+            return; resolved = true; setOrientation(width > height ? 'landscape' : 'portrait'); };
+        const decode = async () => {
+            if (!alive || pending || resolved || player.status !== 'readyToPlay' || typeof player.generateThumbnailsAsync !== 'function')
+                return;
+            pending = true;
+            try {
+                const frames = await player.generateThumbnailsAsync(0, { maxWidth: 96, maxHeight: 96 });
+                try {
+                    const frame = frames[0];
+                    if (frame)
+                        accept(frame.width, frame.height);
+                }
+                finally {
+                    for (const frame of frames)
+                        frame.release();
+                }
+            }
+            catch { /* Keep the platform default if this source cannot provide a frame. */ }
+            finally {
+                pending = false;
+            }
+        };
+        if (posterUri)
+            Image.getSize(posterUri, accept, () => { void decode(); });
+        else
+            void decode();
+        const status = player.addListener('statusChange', () => { if (!posterUri)
+            void decode(); });
+        const source = player.addListener('sourceLoad', () => { if (!posterUri)
+            void decode(); });
+        return () => { alive = false; status.remove(); source.remove(); };
+    }, [player, posterUri]);
+    return _jsx(VideoView, { nativeControls: true, ...props, player: player, contentFit: "contain", fullscreenOptions: { enable: true, orientation } });
+}

package/dist/native-outbox.d.ts

@@ -0,0 +1,55 @@
+import type { TranslationPreference, MessageContent, MessageMedia, MessagingOutbox, SavedOutgoingMessage } from '@robono/messaging';
+import type { LocalMessagingMedia } from './media-controller.js';
+export interface NativeDraftFiles {
+    read(scope: string, conversation: string): Promise<NativeDraftState>;
+    write(scope: string, conversation: string, state: NativeDraftState): Promise<void>;
+    copy(scope: string, conversation: string, id: string, source: LocalMessagingMedia): Promise<string>;
+    file(scope: string, conversation: string, id: string): Promise<string | null>;
+    remove(scope: string, conversation: string, id: string): Promise<void>;
+    clear(scope: string, conversation?: string): Promise<void>;
+}
+export interface NativeDraftState {
+    translationPreference?: TranslationPreference;
+    quickMessage?: string;
+    draft: string;
+    messages: Array<SavedOutgoingMessage & {
+        fileId?: string;
+    }>;
+    files: Record<string, {
+        kind: MessageContent['kind'];
+        media: MessageMedia;
+    }>;
+}
+export declare const emptyNativeDraft: () => NativeDraftState;
+/** Durable outgoing content only, isolated by endpoint, namespace and signed-in user. */
+export declare class NativeMessagingOutbox implements MessagingOutbox {
+    private files;
+    private generation;
+    private scope;
+    constructor(endpoint: string, userId: string, files: NativeDraftFiles, namespace?: string);
+    private serial;
+    load(cid: string): Promise<{
+        draft: string;
+        messages: {
+            clientMessageId: string;
+            createdAt: string;
+            content: MessageContent;
+            needsPreparation?: boolean;
+        }[];
+        attachments: {
+            kind: "text" | "video" | "image" | "document" | "poll" | "voice";
+            media: MessageMedia;
+        }[];
+        quickMessage?: string | undefined;
+        translationPreference?: TranslationPreference | undefined;
+    }>;
+    put(cid: string, message: SavedOutgoingMessage): Promise<void>;
+    remove(cid: string, id: string): Promise<void>;
+    draft(cid: string, text: string): Promise<void>;
+    translationPreference(cid: string, value: TranslationPreference): Promise<void>;
+    quickMessage(cid: string, emoji: string): Promise<void>;
+    clear(cid?: string): Promise<void>;
+    saveFile(cid: string, media: MessageMedia, file: LocalMessagingMedia, kind: MessageContent['kind']): Promise<void>;
+    file(cid: string, id: string): Promise<LocalMessagingMedia | undefined>;
+    releaseFile(cid: string, id: string): Promise<void>;
+}

package/dist/native-outbox.js

@@ -0,0 +1,53 @@
+export const emptyNativeDraft = () => ({ draft: '', messages: [], files: {} });
+const queues = new Map();
+const epochs = new Map();
+/** Durable outgoing content only, isolated by endpoint, namespace and signed-in user. */
+export class NativeMessagingOutbox {
+    files;
+    generation = 0;
+    scope;
+    constructor(endpoint, userId, files, namespace = 'default') {
+        this.files = files;
+        this.scope = JSON.stringify([endpoint, namespace, userId]);
+    }
+    serial(work) { const task = (queues.get(this.scope) ?? Promise.resolve()).catch(() => { }).then(work); queues.set(this.scope, task); void task.finally(() => { if (queues.get(this.scope) === task)
+        queues.delete(this.scope); }).catch(() => { }); return task; }
+    load(cid) { return this.serial(async () => { const saved = await this.files.read(this.scope, cid), used = new Set(saved.messages.map(m => m.fileId)); return { ...(saved.translationPreference ? { translationPreference: saved.translationPreference } : {}), ...(saved.quickMessage ? { quickMessage: saved.quickMessage } : {}), draft: saved.draft, messages: saved.messages.map(({ fileId, ...message }) => message), attachments: Object.entries(saved.files).filter(([id]) => !used.has(id)).map(([, f]) => ({ kind: f.kind, media: f.media })) }; }); }
+    put(cid, message) { return this.serial(async () => { const state = await this.files.read(this.scope, cid), previous = state.messages.find(m => m.clientMessageId === message.clientMessageId); state.messages = state.messages.filter(m => m.clientMessageId !== message.clientMessageId); state.messages.push({ ...message, fileId: message.needsPreparation ? message.content.media?.assetId : previous?.fileId }); await this.files.write(this.scope, cid, state); }); }
+    remove(cid, id) { return this.serial(async () => { const state = await this.files.read(this.scope, cid), fileId = state.messages.find(m => m.clientMessageId === id)?.fileId; state.messages = state.messages.filter(m => m.clientMessageId !== id); if (fileId && !state.messages.some(m => m.fileId === fileId)) {
+        delete state.files[fileId];
+        await this.files.write(this.scope, cid, state);
+        await this.files.remove(this.scope, cid, fileId);
+    }
+    else
+        await this.files.write(this.scope, cid, state); }); }
+    draft(cid, text) { return this.serial(async () => { const state = await this.files.read(this.scope, cid); state.draft = text.slice(0, 10000); await this.files.write(this.scope, cid, state); }); }
+    translationPreference(cid, value) { return this.serial(async () => { const state = await this.files.read(this.scope, cid); state.translationPreference = value; await this.files.write(this.scope, cid, state); }); }
+    quickMessage(cid, emoji) { return this.serial(async () => { const state = await this.files.read(this.scope, cid); state.quickMessage = emoji; await this.files.write(this.scope, cid, state); }); }
+    clear(cid) { this.generation++; epochs.set(this.scope, (epochs.get(this.scope) ?? 0) + 1); return this.serial(() => this.files.clear(this.scope, cid)); }
+    saveFile(cid, media, file, kind) {
+        const generation = this.generation, epoch = epochs.get(this.scope) ?? 0;
+        const current = () => generation === this.generation && epoch === (epochs.get(this.scope) ?? 0);
+        return this.serial(async () => {
+            if (!current())
+                throw Error('The chat closed before the attachment was saved.');
+            await this.files.copy(this.scope, cid, media.assetId, file);
+            try {
+                if (!current())
+                    throw Error('The chat closed before the attachment was saved.');
+                const state = await this.files.read(this.scope, cid);
+                state.files[media.assetId] = { kind, media };
+                await this.files.write(this.scope, cid, state);
+            }
+            catch (error) {
+                await this.files.remove(this.scope, cid, media.assetId).catch(() => { });
+                throw error;
+            }
+        });
+    }
+    file(cid, id) { return this.serial(async () => { const saved = (await this.files.read(this.scope, cid)).files[id]; if (!saved)
+        return undefined; const uri = await this.files.file(this.scope, cid, id); if (!uri)
+        throw Error('This saved attachment is missing. Remove it and choose it again.'); return { ...saved.media, uri }; }); }
+    releaseFile(cid, id) { return this.serial(async () => { const state = await this.files.read(this.scope, cid); if (state.messages.some(m => m.fileId === id))
+        return; delete state.files[id]; await this.files.write(this.scope, cid, state); await this.files.remove(this.scope, cid, id); }); }
+}

package/dist/photo-gesture.d.ts

@@ -0,0 +1,20 @@
+/** Messenger photo transforms, shared by native touches and browser pointers. */
+export type PhotoPoint = {
+    x: number;
+    y: number;
+};
+export type PhotoTransform = {
+    zoom: number;
+    x: number;
+    y: number;
+};
+export declare function createPhotoGesture(changed: (value: PhotoTransform) => void): {
+    readonly value: PhotoTransform;
+    layout(w: number, h: number): void;
+    image(w: number, h: number): void;
+    reset(): void;
+    zoom(zoom: number): void;
+    begin(points: PhotoPoint[]): void;
+    move(points: PhotoPoint[]): void;
+    end(points: PhotoPoint[], cancelled?: boolean): boolean;
+};

package/dist/photo-gesture.js

@@ -0,0 +1,52 @@
+const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+const center = (p) => ({ x: p.reduce((n, p) => n + p.x, 0) / p.length, y: p.reduce((n, p) => n + p.y, 0) / p.length });
+const distance = (p) => p.length > 1 ? Math.hypot(p[0].x - p[1].x, p[0].y - p[1].y) : 0;
+export function createPhotoGesture(changed) {
+    let value = { zoom: 1, x: 0, y: 0 }, width = 1, height = 1, imageWidth = 1, imageHeight = 1;
+    let start = null;
+    let tap = false, started = 0;
+    function apply(zoom, x, y) {
+        zoom = clamp(zoom, 1, 5);
+        const fit = Math.min(width / imageWidth, height / imageHeight);
+        const maxX = Math.max(0, (imageWidth * fit * zoom - width) / 2), maxY = Math.max(0, (imageHeight * fit * zoom - height) / 2);
+        value = { zoom, x: clamp(x, -maxX, maxX), y: clamp(y, -maxY, maxY) };
+        changed(value);
+    }
+    function rebase(points) { start = points.length ? { value: { ...value }, center: center(points), distance: distance(points), count: points.length } : null; }
+    return {
+        get value() { return value; },
+        layout(w, h) { width = Math.max(1, w); height = Math.max(1, h); apply(value.zoom, value.x, value.y); },
+        image(w, h) { imageWidth = Math.max(1, w); imageHeight = Math.max(1, h); apply(value.zoom, value.x, value.y); },
+        reset() { tap = false; start = null; apply(1, 0, 0); },
+        zoom(zoom) { tap = false; apply(zoom, 0, 0); },
+        begin(points) { if (!start) {
+            tap = points.length === 1;
+            started = Date.now();
+        }
+        else
+            tap = false; rebase(points); },
+        move(points) {
+            if (!points.length)
+                return;
+            if (!start || start.count !== points.length) {
+                tap = false;
+                rebase(points);
+                return;
+            }
+            const at = center(points), dx = at.x - start.center.x, dy = at.y - start.center.y;
+            if (points.length > 1 || Math.abs(dx) > 8 || Math.abs(dy) > 8)
+                tap = false;
+            const zoom = points.length > 1 && start.distance > 0 ? start.value.zoom * distance(points) / start.distance : start.value.zoom;
+            apply(zoom, start.value.x + dx, start.value.y + dy);
+        },
+        end(points, cancelled = false) {
+            const tapped = !cancelled && !points.length && tap && Date.now() - started < 260;
+            if (points.length)
+                tap = false;
+            rebase(points);
+            if (!points.length)
+                tap = false;
+            return tapped;
+        }
+    };
+}

package/dist/pollVoteQueue.d.ts

@@ -0,0 +1,3 @@
+/** Show the latest selection immediately, but serialize complete selections so
+ * an older, slower request can never overwrite a newer vote on the server. */
+export declare function createPollVoteQueue(save: (choices: number[]) => Promise<void>, pending: (choices: number[] | null) => void, failed: () => void): (choices: number[]) => Promise<void>;

package/dist/pollVoteQueue.js

@@ -0,0 +1,29 @@
+/** Show the latest selection immediately, but serialize complete selections so
+ * an older, slower request can never overwrite a newer vote on the server. */
+export function createPollVoteQueue(save, pending, failed) {
+    let running = false, next;
+    return async (choices) => {
+        next = [...choices];
+        pending(next);
+        if (running)
+            return;
+        running = true;
+        try {
+            while (next) {
+                const current = next;
+                next = undefined;
+                try {
+                    await save(current);
+                }
+                catch {
+                    if (!next)
+                        failed();
+                }
+            }
+        }
+        finally {
+            running = false;
+            pending(null);
+        }
+    };
+}

package/dist/polls.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 import { type MessagingAppearance, type MessagingMessage, type MessagePoll } from '@robono/messaging';
 /** Optional reusable poll content. Votes are submitted as a complete selection, not a toggle request. */
-export declare function PollMessage({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, background, foreground }: {
+export declare function PollMessage({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, background, foreground, renderDetails, detailsOpen, onDetailsOpenChange, onLongPress }: {
+    onLongPress?: () => void;
+    detailsOpen?: boolean;
+    onDetailsOpenChange?: (open: boolean) => void;
+    renderDetails?: (content: React.ReactNode, onClose: () => void) => React.ReactNode;
     message: MessagingMessage;
     userId: string;
     ink: string;
@@ -13,7 +17,8 @@ export declare function PollMessage({ message, userId, ink, accent, enabled, onV
     background?: string;
     foreground?: string;
 }): React.JSX.Element | null;
-export declare function PollComposer({ appearance, onSend, onCancel, retrySafe }: {
+export declare function PollComposer({ appearance, onSend, onCancel, retrySafe, yesNo }: {
+    yesNo?: boolean;
     retrySafe?: boolean;
     appearance: MessagingAppearance;
     onSend: (poll: MessagePoll) => Promise<void>;

package/dist/polls.js

@@ -1,36 +1,100 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { ActivityIndicator, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Switch, Text, TextInput, View } from 'react-native';
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { messagingPopupColors } from './popup.js';
+import { ExtraPopup } from './extras.js';
+import { MessageIcon } from './icons.js';
+import { useRef, useState } from 'react';
+import { createPollVoteQueue } from './pollVoteQueue';
+import { ActivityIndicator, Pressable, ScrollView, Switch, Text, TextInput, View } from 'react-native';
 import { validatePoll } from '@robono/messaging';
+const PollArea = View;
+import { MessagingPopup as PollModal } from './popup.js';
 /** Optional reusable poll content. Votes are submitted as a complete selection, not a toggle request. */
-export function PollMessage({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, background = '#101010', foreground = '#fff' }) {
-    const [busy, setBusy] = useState(false), [error, setError] = useState(''), [showVotes, setShowVotes] = useState(false);
+export function PollMessage({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, background = '#101010', foreground = '#fff', renderDetails, detailsOpen, onDetailsOpenChange, onLongPress }) {
+    const [busy, setBusy] = useState(false), [error, setError] = useState(''), [localShowVotes, setLocalShowVotes] = useState(false);
+    const showVotes = detailsOpen ?? localShowVotes;
+    const setShowVotes = (open) => { setLocalShowVotes(open); onDetailsOpenChange?.(open); };
+    const [pending, setPending] = useState(null);
+    const current = useRef({ onVote });
+    current.current = { onVote };
+    const selection = useRef([]);
+    const queue = useRef(null);
+    if (!queue.current)
+        queue.current = createPollVoteQueue(choices => current.current.onVote(choices), choices => { if (choices)
+            selection.current = choices; setPending(choices); }, () => setError('The poll could not be updated. Try again.'));
+    const actionBusy = useRef(false);
     const poll = message.poll;
     if (!poll)
         return null;
-    const votes = message.pollState?.votes ?? [], selected = votes.find(v => v.userId === userId)?.options ?? [], closed = !!message.pollState?.closed;
-    async function act(work) { if (busy)
-        return; setBusy(true); setError(''); try {
+    if (poll.kind === 'yes_no')
+        return _jsx(YesNoQuestion, { message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, renderDetails, detailsOpen, onDetailsOpenChange, onLongPress, background, foreground });
+    const savedVotes = message.pollState?.votes ?? [], selected = pending ?? savedVotes.find(v => v.userId === userId)?.options ?? [], closed = !!message.pollState?.closed;
+    selection.current = selected;
+    const votes = pending === null ? savedVotes : [...savedVotes.filter(v => v.userId !== userId), ...(pending.length ? [{ userId, options: pending }] : [])];
+    async function act(work) { if (actionBusy.current)
+        return; actionBusy.current = true; setBusy(true); setError(''); try {
         await work();
     }
     catch {
         setError('The poll could not be updated. Try again.');
     }
     finally {
+        actionBusy.current = false;
         setBusy(false);
     } }
-    return _jsxs(View, { style: { width: 270, maxWidth: '100%', gap: 2, padding: 0 }, children: [_jsx(Text, { style: { fontSize: 17, lineHeight: 23, fontWeight: '600', color: ink }, children: poll.question }), _jsx(Text, { style: { fontSize: 12, color: ink, opacity: .7 }, children: closed ? 'Poll closed' : poll.multiple ? 'Choose one or more' : 'Choose one' }), poll.options.map((label, index) => {
-                const count = votes.filter(v => v.options.includes(index)).length, checked = selected.includes(index);
-                return _jsxs(Pressable, { accessibilityRole: poll.multiple ? 'checkbox' : 'radio', accessibilityLabel: `${label}, ${count} ${count === 1 ? 'vote' : 'votes'}`, "aria-checked": checked, accessibilityState: { checked, disabled: !enabled || closed || busy }, disabled: !enabled || closed || busy, onPress: () => void act(() => onVote(checked ? selected.filter(x => x !== index) : poll.multiple ? [...selected, index] : [index])), style: { minHeight: 44, paddingVertical: 5, gap: 3 }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 10, alignItems: 'center' }, children: [_jsx(View, { style: { width: 20, height: 20, borderRadius: poll.multiple ? 4 : 10, borderWidth: 2, borderColor: checked ? accent : ink, alignItems: 'center', justifyContent: 'center' }, children: checked && _jsx(View, { style: { width: 10, height: 10, borderRadius: poll.multiple ? 2 : 5, backgroundColor: accent } }) }), _jsx(Text, { style: { flex: 1, color: ink, fontSize: 16 }, children: label }), _jsx(Text, { style: { color: ink, fontSize: 13 }, children: count })] }), _jsx(View, { pointerEvents: "none", style: { height: 3, marginLeft: 30, backgroundColor: ink + '20', borderRadius: 2, overflow: 'hidden' }, children: _jsx(View, { style: { height: 3, width: `${votes.length ? count / votes.length * 100 : 0}%`, backgroundColor: accent } }) })] }, index);
-            }), _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: "View votes", onPress: () => setShowVotes(true), style: { minHeight: 44, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 }, children: [_jsx(Text, { style: { color: ink, fontSize: 14 }, children: "View votes" }), _jsxs(Text, { style: { color: ink, opacity: .7, fontSize: 12 }, children: [votes.length, " ", votes.length === 1 ? 'vote' : 'votes'] })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink }, children: error }), showVotes && _jsx(Modal, { visible: true, animationType: "slide", onRequestClose: () => setShowVotes(false), children: _jsx(SafeAreaProvider, { children: _jsxs(SafeAreaView, { style: { flex: 1, backgroundColor: background }, children: [_jsxs(View, { style: { height: 56, paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center', gap: 16 }, children: [_jsx(Text, { accessibilityRole: "header", style: { color: foreground, fontSize: 22, fontWeight: '600', flex: 1 }, children: "Votes" }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close votes", onPress: () => setShowVotes(false), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 17 }, children: "Done" }) })] }), _jsxs(ScrollView, { contentContainerStyle: { padding: 16, gap: 14 }, children: [_jsx(Text, { style: { fontSize: 20, lineHeight: 27, fontWeight: '600', color: foreground }, children: poll.question }), poll.options.map((option, index) => { const people = votes.filter(v => v.options.includes(index)); return _jsxs(View, { style: { gap: 8 }, children: [_jsx(Text, { style: { color: foreground, fontSize: 17, fontWeight: '600' }, children: option }), people.length ? people.map(v => _jsx(Text, { style: { color: foreground, fontSize: 16, paddingVertical: 3 }, children: v.userId === userId ? 'You' : resolveVoterName?.(v.userId) || 'Chat member' }, v.userId)) : _jsx(Text, { style: { color: foreground, opacity: .6, fontSize: 15 }, children: "No votes yet" })] }, index); }), message.senderId === userId && !closed && enabled && _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => void act(onClose), style: { minHeight: 48, justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 17 }, children: "End poll" }) }), closed && _jsx(Text, { style: { color: foreground, opacity: .7 }, children: "Poll closed" }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: foreground }, children: error })] })] }) }) })] });
+    const details = _jsxs(View, { style: { gap: 14 }, children: [_jsxs(View, { style: { gap: 4 }, children: [_jsx(Text, { style: { fontSize: 17, lineHeight: 23, fontWeight: '600', color: messagingPopupColors.foreground }, children: poll.question }), _jsxs(Text, { style: { fontSize: 12, lineHeight: 17, color: messagingPopupColors.foreground, opacity: .65 }, children: [votes.length, " ", votes.length === 1 ? 'person voted' : 'people voted', " \u00B7 ", closed ? 'Closed' : poll.multiple ? 'Multiple answers' : 'One answer per person'] })] }), _jsx(View, { style: { gap: 14 }, children: poll.options.map((option, index) => {
+                    const people = votes.filter(v => v.options.includes(index));
+                    const names = people.map(v => v.userId === userId ? 'You' : resolveVoterName?.(v.userId) || 'Chat member').join(', ');
+                    return _jsxs(View, { style: { gap: 5 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'baseline', gap: 12 }, children: [_jsx(Text, { style: { flex: 1, color: messagingPopupColors.foreground, fontSize: 15, lineHeight: 21, fontWeight: '600' }, children: option }), _jsx(Text, { style: { color: messagingPopupColors.foreground, opacity: .65, fontSize: 13 }, children: people.length })] }), _jsxs(View, { style: { height: 4, borderRadius: 2, overflow: 'hidden' }, children: [_jsx(View, { style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor: foreground, opacity: .12 } }), _jsx(View, { style: { height: 4, width: `${votes.length ? people.length / votes.length * 100 : 0}%`, backgroundColor: accent } })] }), !!names && _jsx(Text, { style: { color: messagingPopupColors.foreground, opacity: .7, fontSize: 13, lineHeight: 18 }, children: names })] }, index);
+                }) }), message.senderId === userId && !closed && enabled && _jsx(Pressable, { accessibilityRole: "button", disabled: busy || pending !== null, onPress: () => void act(onClose), style: { minHeight: 36, alignSelf: 'flex-end', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent, fontSize: 14 }, children: "End poll" }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: messagingPopupColors.foreground, fontSize: 13, lineHeight: 18 }, children: error })] });
+    return _jsxs(_Fragment, { children: [_jsxs(Pressable, { accessible: false, onLongPress: onLongPress, onPress: event => { event.stopPropagation(); setShowVotes(true); }, accessibilityLabel: `Poll: ${poll.question}. Open votes`, style: { width: 270, maxWidth: '100%', gap: 0, padding: 0 }, children: [_jsxs(Text, { accessibilityRole: "button", onLongPress: onLongPress, onPress: () => setShowVotes(true), style: { fontSize: 17, lineHeight: 23, fontWeight: '600', color: ink }, accessibilityHint: closed ? 'Poll closed' : poll.multiple ? 'Choose one or more answers' : 'Choose one answer', children: [poll.question, closed ? ' · Closed' : ''] }), poll.options.map((label, index) => {
+                        const count = votes.filter(v => v.options.includes(index)).length, checked = selected.includes(index);
+                        return _jsxs(View, { style: { minHeight: 36, paddingVertical: 3, gap: 2 }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 10, alignItems: 'center' }, children: [_jsx(Pressable, { accessibilityRole: poll.multiple ? 'checkbox' : 'radio', accessibilityLabel: `${label}, ${count} ${count === 1 ? 'vote' : 'votes'}`, "aria-checked": checked, accessibilityState: { checked, disabled: !enabled || closed || busy, busy: pending !== null }, hitSlop: 4, disabled: !enabled || closed || busy, onPress: event => { event.stopPropagation(); if (!enabled || closed || busy || actionBusy.current)
+                                                return; const previous = selection.current; setError(''); void queue.current(previous.includes(index) ? previous.filter(x => x !== index) : poll.multiple ? [...previous, index] : [index]); }, style: { width: 20, height: 20, borderRadius: poll.multiple ? 4 : 10, borderWidth: 2, borderColor: checked ? accent : ink, alignItems: 'center', justifyContent: 'center' }, children: checked && _jsx(View, { style: { width: 10, height: 10, borderRadius: poll.multiple ? 2 : 5, backgroundColor: accent } }) }), _jsx(Text, { style: { flex: 1, color: ink, fontSize: 16 }, children: label }), _jsx(Text, { style: { color: ink, fontSize: 13 }, children: count })] }), _jsx(View, { pointerEvents: "none", style: { height: 3, marginLeft: 30, backgroundColor: ink + '20', borderRadius: 2, overflow: 'hidden' }, children: _jsx(View, { style: { height: 3, width: `${votes.length ? count / votes.length * 100 : 0}%`, backgroundColor: accent } }) })] }, index);
+                    }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink }, children: error })] }), showVotes && (renderDetails ? renderDetails(details, () => setShowVotes(false)) : _jsx(ExtraPopup, { title: "Votes", background: background, foreground: foreground, onClose: () => setShowVotes(false), children: _jsx(ScrollView, { style: { flexShrink: 1 }, children: details }) }))] });
 }
-export function PollComposer({ appearance, onSend, onCancel, retrySafe = false }) {
+/** Recipient-only decision. Keep the attempted answer on an uncertain failure so
+ * retry cannot silently switch an answer the server may already have accepted. */
+function YesNoQuestion({ message, userId, ink, accent, enabled, onVote, onClose, resolveVoterName, renderDetails, detailsOpen, onDetailsOpenChange, onLongPress, background = '#111111', foreground = '#fff' }) {
+    const [attempt, setAttempt] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState(''), [localOpen, setLocalOpen] = useState(false);
+    const inFlight = useRef(false), firstChoice = useRef(null);
+    const poll = message.poll, answer = message.pollState?.votes.find(v => v.userId !== message.senderId)?.options[0];
+    const closed = !!message.pollState?.closed, chosen = answer ?? attempt, mine = message.senderId === userId;
+    const open = detailsOpen ?? localOpen;
+    const setOpen = (value) => { setLocalOpen(value); onDetailsOpenChange?.(value); };
+    async function choose(index) {
+        if (inFlight.current || !enabled || mine || closed)
+            return;
+        if (firstChoice.current !== null && firstChoice.current !== index)
+            return;
+        firstChoice.current = index;
+        inFlight.current = true;
+        setAttempt(index);
+        setBusy(true);
+        setError('');
+        setOpen(false);
+        try {
+            await onVote([index]);
+        }
+        catch {
+            setError('Answer not confirmed. Tap to retry.');
+        }
+        finally {
+            inFlight.current = false;
+            setBusy(false);
+        }
+    }
+    const respondent = message.pollState?.votes.find(v => v.userId !== message.senderId)?.userId;
+    const details = _jsxs(View, { style: { gap: 12 }, children: [_jsx(Text, { style: { color: messagingPopupColors.foreground, fontSize: 17, lineHeight: 23, fontWeight: '600' }, children: poll.question }), _jsx(Text, { style: { color: messagingPopupColors.foreground, fontSize: 15, lineHeight: 21 }, children: answer !== undefined ? `${respondent === userId ? 'You' : resolveVoterName?.(respondent) || 'Recipient'} answered ${poll.options[answer]}.` : closed ? 'Closed without an answer.' : attempt !== null ? 'Confirming your answer…' : 'Waiting for an answer.' }), mine && !closed && enabled && _jsx(Pressable, { accessibilityRole: "button", onPress: () => { if (inFlight.current)
+                    return; inFlight.current = true; void onClose().catch(() => setError('Could not close the question. Try again.')).finally(() => { inFlight.current = false; }); }, style: { minHeight: 36, alignSelf: 'flex-end', justifyContent: 'center' }, children: _jsx(Text, { style: { color: accent }, children: "End question" }) })] });
+    return _jsxs(_Fragment, { children: [_jsxs(Pressable, { accessible: false, onLongPress: onLongPress, onPress: e => { e.stopPropagation(); setOpen(true); }, testID: "yes-no-question", style: { maxWidth: 270, minWidth: 160 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'flex-start', gap: 6 }, children: [_jsx(View, { style: { paddingTop: 3 }, children: _jsx(MessageIcon, { name: "poll", color: accent, size: 16 }) }), _jsx(Text, { accessibilityRole: "button", onLongPress: onLongPress, onPress: () => setOpen(true), style: { flexShrink: 1, fontSize: 16, lineHeight: 22, fontWeight: '600', color: ink }, children: poll.question })] }), _jsx(View, { style: { flexDirection: 'row', gap: 20, marginTop: 2 }, children: poll.options.map((label, index) => _jsxs(Pressable, { accessibilityRole: "radio", accessibilityLabel: label, accessibilityState: { checked: chosen === index, disabled: !enabled || mine || closed || attempt !== null, busy }, disabled: !enabled || mine || closed || attempt !== null, onPress: e => { e.stopPropagation(); void choose(index); }, hitSlop: 4, style: { flexDirection: 'row', alignItems: 'center', gap: 8, minHeight: 32 }, children: [_jsx(View, { style: { width: 20, height: 20, borderRadius: 10, borderWidth: 2, borderColor: chosen === index ? accent : ink, alignItems: 'center', justifyContent: 'center', opacity: chosen === undefined && mine ? .5 : 1 }, children: chosen === index && _jsx(View, { style: { width: 10, height: 10, borderRadius: 5, backgroundColor: accent } }) }), _jsx(Text, { style: { color: ink, fontSize: 16, fontWeight: chosen === index ? '600' : '400' }, children: label })] }, index)) }), !!error && !closed && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Retry answer", disabled: busy || closed || attempt === null, onPress: e => { e.stopPropagation(); if (attempt !== null)
+                            void choose(attempt); }, children: _jsx(Text, { accessibilityRole: "alert", style: { color: ink, fontSize: 13 }, children: error }) })] }), open && (renderDetails ? renderDetails(details, () => setOpen(false)) : _jsx(ExtraPopup, { title: "Answer", background: background, foreground: foreground, onClose: () => setOpen(false), children: _jsx(ScrollView, { style: { flexShrink: 1 }, children: details }) }))] });
+}
+export function PollComposer({ appearance, onSend, onCancel, retrySafe = false, yesNo = false }) {
     const [question, setQuestion] = useState(''), [options, setOptions] = useState(['', '']), [multiple, setMultiple] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState(''), [submitted, setSubmitted] = useState(false);
-    const c = appearance.colors;
+    const c = { ...appearance.colors, ...messagingPopupColors };
     async function send() { if (busy || submitted)
         return; let poll; try {
-        poll = validatePoll({ question, options, multiple });
+        poll = validatePoll(yesNo ? { question, options: ['Yes', 'No'], multiple: false, kind: 'yes_no' } : { question, options, multiple });
     }
     catch (e) {
         setError(e.message);
@@ -47,8 +111,13 @@ export function PollComposer({ appearance, onSend, onCancel, retrySafe = false }
     finally {
         setBusy(false);
     } }
-    const inputStyle = { fontSize: 17, color: c.foreground, minHeight: 48, borderBottomWidth: 1, borderBottomColor: c.secondary + '40', paddingVertical: 12 };
-    const ready = question.trim().length > 0 && options.filter(o => o.trim()).length >= 2;
-    return _jsx(Modal, { visible: true, animationType: "slide", onRequestClose: () => { if (!busy)
-            onCancel(); }, children: _jsx(SafeAreaProvider, { children: _jsxs(SafeAreaView, { style: { flex: 1, backgroundColor: c.background }, children: [_jsxs(View, { style: { height: 56, paddingHorizontal: 16, flexDirection: 'row', alignItems: 'center', gap: 16 }, children: [_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: onCancel, style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: "Cancel" }) }), _jsx(Text, { accessibilityRole: "header", style: { flex: 1, fontSize: 20, fontWeight: '600', color: c.foreground }, children: "New poll" }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Send poll", disabled: busy || submitted || !ready, onPress: () => void send(), style: { minHeight: 44, justifyContent: 'center', opacity: ready ? 1 : .4 }, children: busy ? _jsx(ActivityIndicator, { color: c.accent }) : _jsx(Text, { style: { color: c.accent, fontSize: 17, fontWeight: '600' }, children: "Send" }) })] }), _jsx(KeyboardAvoidingView, { style: { flex: 1 }, behavior: Platform.OS === 'ios' ? 'padding' : 'height', children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", keyboardDismissMode: "on-drag", contentContainerStyle: { padding: 16, paddingBottom: 20, gap: 4 }, children: [_jsx(Text, { style: { color: c.secondary, fontSize: 14, marginTop: 12 }, children: "Question" }), _jsx(TextInput, { accessibilityLabel: "Poll question", placeholder: "Ask a question", placeholderTextColor: c.secondary, maxLength: 300, multiline: true, value: question, onChangeText: setQuestion, editable: !busy, style: inputStyle }), _jsx(Text, { style: { color: c.secondary, fontSize: 14, marginTop: 16 }, children: "Answers" }), options.map((option, i) => _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsx(TextInput, { accessibilityLabel: `Option ${i + 1}`, placeholder: "Add an option", placeholderTextColor: c.secondary, maxLength: 100, value: option, onChangeText: v => setOptions(items => items.map((x, n) => n === i ? v : x)), editable: !busy, style: { ...inputStyle, flex: 1 } }), options.length > 2 && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Remove option ${i + 1}`, disabled: busy, onPress: () => setOptions(items => items.filter((_, n) => n !== i)), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.secondary, fontSize: 26 }, children: "\u00D7" }) })] }, i)), options.length < 12 && _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setOptions(items => [...items, '']), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 16 }, children: "Add option" }) }), _jsxs(View, { style: { minHeight: 48, flexDirection: 'row', gap: 12, alignItems: 'center', marginTop: 8 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 16, flex: 1 }, children: "Allow multiple answers" }), _jsx(Switch, { accessibilityLabel: "Allow multiple answers", disabled: busy, value: multiple, onValueChange: setMultiple, trackColor: { true: c.accent } })] }), _jsx(Text, { style: { color: c.secondary, fontSize: 13, lineHeight: 19 }, children: "Everyone in the chat can see the votes." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error })] }) })] }) }) });
+    const inputStyle = { fontSize: 17, color: c.foreground, minHeight: 48, borderWidth: 1, borderColor: '#ffffff20', borderRadius: 10, backgroundColor: '#111111', padding: 12 };
+    let ready = false;
+    try {
+        validatePoll(yesNo ? { question, options: ['Yes', 'No'], multiple: false, kind: 'yes_no' } : { question, options, multiple });
+        ready = true;
+    }
+    catch { }
+    return _jsx(PollModal, { contentWidth: 640, form: true, title: yesNo ? 'Yes/No question' : 'New poll', foreground: c.foreground, closeDisabled: busy, background: c.background, onClose: () => { if (!busy)
+            onCancel(); }, children: _jsxs(PollArea, { style: { flex: 1, minHeight: 0, backgroundColor: c.background }, children: [_jsx(View, { style: { flexShrink: 1 }, children: _jsxs(ScrollView, { keyboardShouldPersistTaps: "handled", keyboardDismissMode: "on-drag", contentContainerStyle: { padding: 0, paddingBottom: 12, gap: 8 }, children: [_jsx(Text, { style: { color: c.secondary, fontSize: 13, fontWeight: '600', marginTop: 4 }, children: "Question" }), _jsx(TextInput, { accessibilityLabel: "Poll question", placeholder: "Ask a question", placeholderTextColor: c.secondary, maxLength: 300, multiline: true, value: question, onChangeText: setQuestion, editable: !busy, style: inputStyle }), !yesNo && _jsxs(_Fragment, { children: [_jsx(Text, { style: { color: c.secondary, fontSize: 13, fontWeight: '600', marginTop: 12 }, children: "Answers" }), options.map((option, i) => _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsx(TextInput, { accessibilityLabel: `Option ${i + 1}`, placeholder: "Add an option", placeholderTextColor: c.secondary, maxLength: 100, value: option, onChangeText: v => setOptions(items => items.map((x, n) => n === i ? v : x)), editable: !busy, style: { ...inputStyle, flex: 1 } }), options.length > 2 && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Remove option ${i + 1}`, disabled: busy, onPress: () => setOptions(items => items.filter((_, n) => n !== i)), style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.secondary, fontSize: 26 }, children: "\u00D7" }) })] }, i)), options.length < 12 && _jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: () => setOptions(items => [...items, '']), style: { minHeight: 44, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.accent, fontSize: 16 }, children: "Add option" }) }), _jsxs(View, { style: { minHeight: 48, flexDirection: 'row', gap: 12, alignItems: 'center', marginTop: 8 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 16, flex: 1 }, children: "Allow multiple answers" }), _jsx(Switch, { accessibilityLabel: "Allow multiple answers", disabled: busy, value: multiple, onValueChange: setMultiple, trackColor: { true: c.accent } })] }), _jsx(Text, { style: { color: c.secondary, fontSize: 13, lineHeight: 19 }, children: "Everyone in the chat can see the votes." })] }), yesNo && _jsx(Text, { style: { color: c.secondary, fontSize: 13, lineHeight: 19, marginTop: 8 }, children: "Their first Yes or No answer is final." }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, marginTop: 8 }, children: error })] }) }), _jsxs(View, { style: { flexDirection: 'row', gap: 8, marginTop: 8 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel", disabled: busy, onPress: onCancel, style: { flex: 1, minHeight: 44, borderRadius: 12, backgroundColor: c.secondary + '20', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16, fontWeight: '600' }, children: "Cancel" }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: yesNo ? "Send question" : "Send poll", disabled: busy || submitted || !ready, onPress: () => void send(), style: { flex: 1, minHeight: 44, borderRadius: 12, backgroundColor: c.accent, opacity: (busy || submitted || !ready) ? 0.45 : 1, alignItems: 'center', justifyContent: 'center' }, children: busy ? _jsx(ActivityIndicator, { color: "#fff" }) : _jsx(Text, { style: { color: '#fff', fontSize: 16, fontWeight: '600' }, children: "Send" }) })] })] }) });
 }

package/dist/popup.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+export interface MessagingPopupSurfaceProps {
+    children: React.ReactNode;
+    visible: boolean;
+    onDismiss?: () => void;
+    onClose: () => void;
+    title?: string;
+}
+/** Browser hosts can keep settings dialogs inside their embedded chat. */
+export declare const MessagingPopupSurface: React.Context<React.ComponentType<MessagingPopupSurfaceProps> | null>;
+export declare const messagingPopupBackdrop = "#000000d9";
+export declare const messagingPopupColors: {
+    background: string;
+    foreground: string;
+    secondary: string;
+    incoming: string;
+};
+/** One title/close row for forms, menus and expanded content. */
+export declare function MessagingPopupHeader({ title, foreground, onClose, closeLabel, disabled, back }: {
+    title: string;
+    foreground: string;
+    onClose: () => void;
+    closeLabel?: string;
+    disabled?: boolean;
+    back?: boolean;
+}): React.JSX.Element;
+export declare function MessagingPopupHost({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function MessagingPopupHeaderBoundary({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Content panels occupy the area below the persistent header; confirmations stay compact. */
+export declare function MessagingPopup({ children, onClose, background, form, visible, onDismiss, expanded, bottomPadding, title, foreground, closeLabel, closeDisabled, contentWidth, headerBack, withinChat, compact }: {
+    compact?: boolean;
+    withinChat?: boolean;
+    children: React.ReactNode;
+    onClose: () => void;
+    background: string;
+    form?: boolean;
+    visible?: boolean;
+    onDismiss?: () => void;
+    expanded?: boolean;
+    bottomPadding?: number;
+    title?: string;
+    foreground?: string;
+    closeLabel?: string;
+    closeDisabled?: boolean;
+    contentWidth?: number;
+    headerBack?: boolean;
+}): React.JSX.Element;