@joinskips/brand 9.0.0-develop.147 → 9.0.0-develop.149

package/chat/helpers/cable.js

@@ -0,0 +1,88 @@
+// A small ActionCable client for the Skips App's RoomChannel. It says when the feed is live or down, so a silent drop
+// never goes unnoticed: no frame for STALE_MS counts as down, and it reconnects with backoff. The Skips App pings
+// every 3 seconds.
+import { readFrame } from "./cableFrames.js";
+export const STALE_MS = 10_000;
+export const FIRST_RETRY_MS = 1_000;
+export const MAX_RETRY_MS = 30_000;
+/** The socket address for a Skips App origin, such as https://app.joinskips.com. */
+export const cableUrl = (origin) => `${origin.replace(/\/$/, '').replace(/^http/, 'ws')}/cable`;
+/** The wait before the nth reconnect, doubling up to MAX_RETRY_MS. */
+export const retryDelay = (attempt) => Math.min(MAX_RETRY_MS, FIRST_RETRY_MS * 2 ** attempt);
+/**
+ * Opens the feed for the member's keys, the Skips App's pubsub tokens, on sockets the app makes with createSocket.
+ * now is the app's clock, which the stale check reads.
+ * Returns a function that closes it for good.
+ */
+export function openCable(url, keys, handlers, { careTeamName, createSocket, now }) {
+    let socket = null;
+    let attempt = 0;
+    let lastFrameAt = now();
+    let closed = false;
+    let retry = null;
+    let state = null;
+    const setState = (next) => {
+        if (next !== state)
+            handlers.onState((state = next));
+    };
+    const drop = (reconnect) => {
+        if (socket) {
+            const old = socket;
+            socket = null;
+            old.onclose = old.onmessage = old.onerror = old.onopen = null;
+            old.close();
+        }
+        setState('down');
+        if (reconnect && !closed && !retry)
+            retry = setTimeout(connect, retryDelay(attempt++));
+    };
+    function connect() {
+        retry = null;
+        setState('connecting');
+        lastFrameAt = now();
+        const next = createSocket(url);
+        socket = next;
+        next.onmessage = ({ data }) => {
+            lastFrameAt = now();
+            const frame = readFrame(String(data), careTeamName);
+            if (frame.type === 'welcome') {
+                attempt = 0;
+                for (const key of keys) {
+                    next.send(JSON.stringify({
+                        command: 'subscribe',
+                        identifier: JSON.stringify({ channel: 'RoomChannel', pubsub_token: key }),
+                    }));
+                }
+            }
+            else if (frame.type === 'confirm_subscription')
+                setState('live');
+            else if (frame.type === 'event')
+                handlers.onEvent(frame.event);
+            else if (frame.type === 'reject_subscription' || (frame.type === 'disconnect' && !frame.reconnect)) {
+                drop(false);
+                handlers.onKeysRefused();
+            }
+            else if (frame.type === 'disconnect')
+                drop(true);
+        };
+        next.onclose = () => {
+            drop(true);
+        };
+        next.onerror = () => {
+            drop(true);
+        };
+    }
+    const watchdog = setInterval(() => {
+        if (socket && now() - lastFrameAt > STALE_MS)
+            drop(true);
+    }, STALE_MS / 2);
+    connect();
+    return () => {
+        closed = true;
+        clearInterval(watchdog);
+        if (retry)
+            clearTimeout(retry);
+        retry = null;
+        drop(false);
+    };
+}

package/chat/helpers/cableFrames.d.ts

@@ -0,0 +1,40 @@
+import type { ChatMessage } from './message.ts';
+interface ChatMessageEvent {
+    kind: 'message';
+    conversationId: number;
+    message: ChatMessage;
+}
+interface TypingEvent {
+    kind: 'typing';
+    conversationId: number;
+    typing: boolean;
+    name: string;
+}
+interface ConversationEvent {
+    kind: 'conversation';
+    conversationId: number;
+}
+export type ChatEvent = ChatMessageEvent | TypingEvent | ConversationEvent;
+type ControlType = 'welcome' | 'ping' | 'confirm_subscription' | 'reject_subscription';
+interface ControlFrame {
+    type: ControlType;
+}
+interface DisconnectFrame {
+    type: 'disconnect';
+    reconnect: boolean;
+}
+interface EventFrame {
+    type: 'event';
+    event: ChatEvent;
+}
+interface IgnoredFrame {
+    type: 'ignored';
+}
+/** One ActionCable frame: a control frame the client handles, or a Skips App event. */
+export type CableFrame = ControlFrame | DisconnectFrame | EventFrame | IgnoredFrame;
+/**
+ * Reads one frame of text from the socket. A frame that is not JSON, or not one the app knows, is ignored.
+ * careTeamName is the app's name for a care team line with no named sender (toChatMessage).
+ */
+export declare function readFrame(text: string, careTeamName: string): CableFrame;
+export {};

package/chat/helpers/cableFrames.js

@@ -0,0 +1,70 @@
+// What the Skips App's live socket says, read into the few things an app acts on. Shapes come from the socket itself
+// (message_type and created_at as numbers, the member's own typing never sent back), and anything else is ignored.
+import { firstFilled, isNullableString, isObject, isRawMessage, optional, toChatMessage } from "./skipsMessage.js";
+const CONTROL_TYPES = ['welcome', 'ping', 'confirm_subscription', 'reject_subscription'];
+const IGNORED = { type: 'ignored' };
+function isTypingData(value) {
+    if (!isObject(value) || !isObject(value.user) || !isObject(value.conversation))
+        return false;
+    const { user } = value;
+    return (optional(value.is_private, (flag) => typeof flag === 'boolean') &&
+        optional(user.type, (type) => typeof type === 'string') &&
+        optional(user.available_name, isNullableString) &&
+        optional(user.name, isNullableString) &&
+        typeof value.conversation.id === 'number');
+}
+const fieldIn = (value, key) => (isObject(value) ? value[key] : undefined);
+function toEvent(message, careTeamName) {
+    const event = fieldIn(message, 'event');
+    const data = fieldIn(message, 'data');
+    switch (event) {
+        case 'message.created':
+        case 'message.updated': {
+            if (!isRawMessage(data))
+                return null;
+            const chatMessage = toChatMessage(data, careTeamName);
+            return chatMessage ? { kind: 'message', conversationId: data.conversation_id ?? 0, message: chatMessage } : null;
+        }
+        case 'conversation.typing_on':
+        case 'conversation.typing_off': {
+            // A private note's typing is the care team's own, and a contact's typing is the member's.
+            if (!isTypingData(data) || data.is_private || data.user.type === 'contact')
+                return null;
+            return {
+                kind: 'typing',
+                conversationId: data.conversation.id,
+                typing: event === 'conversation.typing_on',
+                name: firstFilled(data.user.available_name, data.user.name) ?? '',
+            };
+        }
+        // Only which conversation changed: its fields on the socket can be partial, so the app asks for them again.
+        case 'conversation.updated':
+        case 'conversation.status_changed': {
+            const id = fieldIn(data, 'id');
+            return typeof id === 'number' ? { kind: 'conversation', conversationId: id } : null;
+        }
+        default:
+            return null;
+    }
+}
+/**
+ * Reads one frame of text from the socket. A frame that is not JSON, or not one the app knows, is ignored.
+ * careTeamName is the app's name for a care team line with no named sender (toChatMessage).
+ */
+export function readFrame(text, careTeamName) {
+    let frame;
+    try {
+        frame = JSON.parse(text);
+    }
+    catch {
+        return IGNORED;
+    }
+    const type = fieldIn(frame, 'type');
+    if (type === 'disconnect')
+        return { type: 'disconnect', reconnect: fieldIn(frame, 'reconnect') !== false };
+    const control = CONTROL_TYPES.find((each) => each === type);
+    if (control)
+        return { type: control };
+    const event = toEvent(fieldIn(frame, 'message'), careTeamName);
+    return event ? { type: 'event', event } : IGNORED;
+}

package/chat/helpers/index.d.ts

@@ -1,7 +1,10 @@
 export { ATTACHMENT_TYPES, MAX_ATTACHMENT_BYTES, attachmentProblem, attachmentType, type AttachmentProblem } from './attachments.ts';
 export { isSkip, type ChatAttachment, type ChatAuthor, type ChatMessage, type ChoiceItem, type MessageChoice, type PickedFile, } from './message.ts';
-export { CLUSTER_GAP_MS, EMPTY_THREAD, groupThread, pendingId, withFailed, withoutMessage, withPending, withReceived, withReceivedAll, withSent, type Delivery, type RunSender, type Thread, type ThreadItem, type ThreadMessage, } from './thread.ts';
+export { CLUSTER_GAP_MS, EMPTY_THREAD, groupThread, openQuestion, pendingId, storedIds, withFailed, withoutMessage, withPending, withReceived, withReceivedAll, withSent, type Delivery, type OpenQuestion, type RunSender, type Thread, type ThreadItem, type ThreadMessage, } from './thread.ts';
 export { TYPING_CLEAR_MS, TYPING_IDLE_MS, createTypingSignal, createTypingWatch } from './typing.ts';
 export { DOT_CYCLE_MS, TYPING_IDLE, TYPING_TIMES, heldFrom, typingReducer, type TypingEvent, type TypingSignal, type TypingStarted, type TypingState, type TypingTimes, } from './skipTyping.ts';
 export { fitVisibleArea, type Fit, type VisualViewportBox } from './visibleArea.ts';
+export { FIRST_RETRY_MS, MAX_RETRY_MS, STALE_MS, cableUrl, openCable, retryDelay, type CableHandlers, type CableOptions, type CableState, type Socket, type SocketMessage, } from './cable.ts';
+export { readFrame, type CableFrame, type ChatEvent } from './cableFrames.ts';
+export { CHOICE_CONTENT_TYPE, choiceFrom, fileNameIn, firstFilled, fromContact, isRawMessage, toChatMessage, toMs, type RawMessage, type RawMessageFile, type RawSender, } from './skipsMessage.ts';
 export { EMAIL_MAX_LENGTH, NAME_MAX_LENGTH, RESEND_AFTER_MS, WELCOME_TYPING_TIMES, givenEmail, givenName, isEmail, isName, typesBefore, typingMs, type WelcomeStep, type WelcomeTypingTimes, } from './welcome.ts';

package/chat/helpers/index.js

@@ -1,7 +1,10 @@
 export { ATTACHMENT_TYPES, MAX_ATTACHMENT_BYTES, attachmentProblem, attachmentType } from "./attachments.js";
 export { isSkip, } from "./message.js";
-export { CLUSTER_GAP_MS, EMPTY_THREAD, groupThread, pendingId, withFailed, withoutMessage, withPending, withReceived, withReceivedAll, withSent, } from "./thread.js";
+export { CLUSTER_GAP_MS, EMPTY_THREAD, groupThread, openQuestion, pendingId, storedIds, withFailed, withoutMessage, withPending, withReceived, withReceivedAll, withSent, } from "./thread.js";
 export { TYPING_CLEAR_MS, TYPING_IDLE_MS, createTypingSignal, createTypingWatch } from "./typing.js";
 export { DOT_CYCLE_MS, TYPING_IDLE, TYPING_TIMES, heldFrom, typingReducer, } from "./skipTyping.js";
 export { fitVisibleArea } from "./visibleArea.js";
+export { FIRST_RETRY_MS, MAX_RETRY_MS, STALE_MS, cableUrl, openCable, retryDelay, } from "./cable.js";
+export { readFrame } from "./cableFrames.js";
+export { CHOICE_CONTENT_TYPE, choiceFrom, fileNameIn, firstFilled, fromContact, isRawMessage, toChatMessage, toMs, } from "./skipsMessage.js";
 export { EMAIL_MAX_LENGTH, NAME_MAX_LENGTH, RESEND_AFTER_MS, WELCOME_TYPING_TIMES, givenEmail, givenName, isEmail, isName, typesBefore, typingMs, } from "./welcome.js";

package/chat/helpers/message.d.ts

@@ -17,7 +17,7 @@ export interface PickedFile {
     name: string;
     type: string;
     size: number;
-    file?: File;
+    file?: Blob;
 }
 /** One answer a question from Skips offers: the words on its button, and the value the Skips App keeps. */
 export interface ChoiceItem {

package/chat/helpers/skipsMessage.d.ts

@@ -0,0 +1,52 @@
+import type { ChatMessage, MessageChoice } from './message.ts';
+export interface RawSender {
+    id?: number;
+    type?: string;
+    name?: string | null;
+    available_name?: string | null;
+    thumbnail?: string | null;
+}
+export interface RawMessageFile {
+    file_type?: string;
+    data_url?: string;
+    thumb_url?: string | null;
+    file_name?: string | null;
+}
+/** A message as the Skips App's API and its socket give it. The socket spells message_type as a word. */
+export interface RawMessage {
+    id: number;
+    conversation_id?: number;
+    content: string | null;
+    message_type: number | string;
+    created_at: number | string;
+    private?: boolean;
+    sender?: RawSender | null;
+    attachments?: RawMessageFile[];
+    content_type?: unknown;
+    content_attributes?: unknown;
+}
+export type JsonObject = Record<string, unknown>;
+export declare const isObject: (value: unknown) => value is JsonObject;
+export declare const isNullableString: (value: unknown) => value is string | null;
+export declare const optional: (value: unknown, check: (value: unknown) => boolean) => boolean;
+/** Whether a value from the Skips App has a message's shape, every field it carries checked. */
+export declare function isRawMessage(value: unknown): value is RawMessage;
+/** The first value that holds text, an empty string counting as none, or undefined when none does. */
+export declare const firstFilled: (...values: (string | null | undefined)[]) => string | undefined;
+/** A file's name from its Skips App address, which ends with it. */
+export declare const fileNameIn: (url: string) => string;
+export declare const fromContact: (raw: RawMessage) => boolean;
+/** A Skips App time in milliseconds: the API gives seconds, the socket text. */
+export declare const toMs: (value: number | string) => number;
+export declare const CHOICE_CONTENT_TYPE = "input_select";
+/**
+ * A question's buttons, with the answer already given if it is one of them. A message of another type, or one whose
+ * buttons cannot all be read, offers none: a button with no words could not be pressed knowingly. Nor does one with
+ * two buttons of the same value, since the answer kept could not say which was pressed.
+ */
+export declare function choiceFrom(contentType: unknown, attributes: unknown): MessageChoice | null;
+/**
+ * The member's view of a message, or null when it is a private note or an activity the member does not see.
+ * careTeamName, the app's own words, names a care team line whose sender the Skips App leaves unnamed.
+ */
+export declare function toChatMessage(raw: RawMessage, careTeamName: string): ChatMessage | null;

package/chat/helpers/skipsMessage.js

@@ -0,0 +1,129 @@
+// A Skips App message as its API and its live socket give it, and the member's view of it. Neither ever shows the
+// member a private note or an internal activity line.
+export const isObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+const isNumber = (value) => typeof value === 'number';
+const isString = (value) => typeof value === 'string';
+const isBoolean = (value) => typeof value === 'boolean';
+const isNumberOrString = (value) => isNumber(value) || isString(value);
+export const isNullableString = (value) => value === null || isString(value);
+// A field left out passes, and a field that is there must have its type.
+export const optional = (value, check) => value === undefined || check(value);
+function isRawSender(value) {
+    return (isObject(value) &&
+        optional(value.id, isNumber) &&
+        optional(value.type, isString) &&
+        optional(value.name, isNullableString) &&
+        optional(value.available_name, isNullableString) &&
+        optional(value.thumbnail, isNullableString));
+}
+function isRawMessageFile(value) {
+    return (isObject(value) &&
+        optional(value.file_type, isString) &&
+        optional(value.data_url, isString) &&
+        optional(value.thumb_url, isNullableString) &&
+        optional(value.file_name, isNullableString));
+}
+/** Whether a value from the Skips App has a message's shape, every field it carries checked. */
+export function isRawMessage(value) {
+    return (isObject(value) &&
+        isNumber(value.id) &&
+        optional(value.conversation_id, isNumber) &&
+        isNullableString(value.content) &&
+        isNumberOrString(value.message_type) &&
+        isNumberOrString(value.created_at) &&
+        optional(value.private, isBoolean) &&
+        optional(value.sender, (sender) => sender === null || isRawSender(sender)) &&
+        optional(value.attachments, (files) => Array.isArray(files) && files.every(isRawMessageFile)));
+}
+/** The first value that holds text, an empty string counting as none, or undefined when none does. */
+export const firstFilled = (...values) => values.find((value) => Boolean(value));
+/** A file's name from its Skips App address, which ends with it. */
+export const fileNameIn = (url) => {
+    let path = url;
+    try {
+        path = new URL(url).pathname;
+    }
+    catch {
+        // Not a full address: its last part is still the best name there is.
+    }
+    const name = path.slice(path.lastIndexOf('/') + 1);
+    try {
+        return decodeURIComponent(name);
+    }
+    catch {
+        return name;
+    }
+};
+// message_type 0 is the contact's, 2 an activity. The socket sends the names instead of the numbers.
+export const fromContact = (raw) => raw.sender?.type === 'contact' || raw.message_type === 0 || raw.message_type === 'incoming';
+const isActivity = (raw) => raw.message_type === 2 || raw.message_type === 'activity';
+// Of the Skips App's activity lines, only a conversation closing or reopening is the member's business.
+const NOTICE = /conversation was (resolved|reopened)|(resolved|reopened) the conversation/i;
+/** A Skips App time in milliseconds: the API gives seconds, the socket text. */
+export const toMs = (value) => (typeof value === 'number' ? value * 1000 : Date.parse(value));
+// The Skips App's question answered with one of its buttons.
+export const CHOICE_CONTENT_TYPE = 'input_select';
+function isChoiceItem(value) {
+    return (isObject(value) &&
+        isString(value.title) &&
+        value.title.trim().length > 0 &&
+        isString(value.value) &&
+        value.value.length > 0);
+}
+/**
+ * A question's buttons, with the answer already given if it is one of them. A message of another type, or one whose
+ * buttons cannot all be read, offers none: a button with no words could not be pressed knowingly. Nor does one with
+ * two buttons of the same value, since the answer kept could not say which was pressed.
+ */
+export function choiceFrom(contentType, attributes) {
+    if (contentType !== CHOICE_CONTENT_TYPE || !isObject(attributes))
+        return null;
+    const { items, submitted_values: submitted } = attributes;
+    if (!Array.isArray(items) || items.length === 0 || !items.every(isChoiceItem))
+        return null;
+    if (new Set(items.map((item) => item.value)).size !== items.length)
+        return null;
+    const first = Array.isArray(submitted) ? submitted[0] : null;
+    const given = isObject(first) ? first.value : null;
+    const chosen = items.find((item) => item.value === given)?.value ?? null;
+    return { items, chosen };
+}
+/**
+ * The member's view of a message, or null when it is a private note or an activity the member does not see.
+ * careTeamName, the app's own words, names a care team line whose sender the Skips App leaves unnamed.
+ */
+export function toChatMessage(raw, careTeamName) {
+    if (raw.private)
+        return null;
+    const notice = isActivity(raw);
+    if (notice && !NOTICE.test(raw.content ?? ''))
+        return null;
+    const mine = !notice && fromContact(raw);
+    const choice = mine || notice ? null : choiceFrom(raw.content_type, raw.content_attributes);
+    return {
+        ...(choice === null ? {} : { choice }),
+        id: raw.id,
+        text: raw.content ?? '',
+        sentAt: toMs(raw.created_at),
+        mine,
+        notice,
+        author: mine || notice
+            ? null
+            : {
+                id: raw.sender?.id ?? null,
+                name: firstFilled(raw.sender?.available_name, raw.sender?.name) ?? careTeamName,
+                avatarUrl: firstFilled(raw.sender?.thumbnail) ?? null,
+                bot: raw.sender?.type === 'agent_bot',
+            },
+        attachments: (raw.attachments ?? []).flatMap((a) => a.data_url
+            ? [
+                {
+                    kind: a.file_type === 'image' ? 'image' : 'file',
+                    url: a.data_url,
+                    thumbUrl: a.thumb_url ?? null,
+                    name: firstFilled(a.file_name) ?? fileNameIn(a.data_url),
+                },
+            ]
+            : []),
+    };
+}

package/chat/helpers/thread.d.ts

@@ -1,4 +1,4 @@
-import { type ChatAuthor, type ChatMessage, type PickedFile } from './message.ts';
+import { type ChatAuthor, type ChatMessage, type ChoiceItem, type PickedFile } from './message.ts';
 export type Delivery = 'sent' | 'pending' | 'failed';
 export interface ThreadMessage extends ChatMessage {
     delivery: Delivery;
@@ -16,6 +16,17 @@ export declare function withSent(thread: Thread, pending: number, message: ChatM
 /** Marks a pending line failed, or pending again as it is retried. */
 export declare function withFailed(thread: Thread, pending: number, failed?: boolean): Thread;
 export declare function withoutMessage(thread: Thread, id: number): Thread;
+/** The ids of the thread's messages the Skips App holds, oldest first: pending and failed lines have no place in its pages. */
+export declare const storedIds: (thread: Thread) => number[];
+/**
+ * The question from Skip whose buttons can still be pressed: unanswered, with nothing written after it. A line from the
+ * care team after it leaves it open, since what asked it still waits for the press.
+ */
+export declare function openQuestion(messages: readonly ThreadMessage[]): OpenQuestion | undefined;
+export interface OpenQuestion {
+    message: ThreadMessage;
+    items: ChoiceItem[];
+}
 /**
  * A message from a page or the socket, added once. The socket can echo the member's line before the send that stored
  * it answers, and the echo then takes the place of the earliest pending line with its text instead of showing twice.

package/chat/helpers/thread.js

@@ -1,6 +1,6 @@
 // One conversation as the chat shows it: messages in time order, each sent, pending or failed, with no duplicates
 // when a page and the socket bring the same message, or when the socket echoes what the member just sent.
-import { isSkip } from "./message.js";
+import { isSkip, } from "./message.js";
 export const EMPTY_THREAD = { messages: [] };
 // Pending lines get negative ids, which never collide with the Skips App's.
 let nextPendingId = -1;
@@ -39,6 +39,21 @@ export function withFailed(thread, pending, failed = true) {
 export function withoutMessage(thread, id) {
     return { messages: thread.messages.filter((m) => m.id !== id) };
 }
+/** The ids of the thread's messages the Skips App holds, oldest first: pending and failed lines have no place in its pages. */
+export const storedIds = (thread) => thread.messages.filter((message) => message.delivery === 'sent').map((message) => message.id);
+/**
+ * The question from Skip whose buttons can still be pressed: unanswered, with nothing written after it. A line from the
+ * care team after it leaves it open, since what asked it still waits for the press.
+ */
+export function openQuestion(messages) {
+    for (const message of [...messages].reverse()) {
+        if (message.mine)
+            return undefined;
+        if (message.choice)
+            return message.choice.chosen === null ? { message, items: message.choice.items } : undefined;
+    }
+    return undefined;
+}
 // An answer is never taken back, so a copy of a question without one keeps the answer the chat has.
 function keptChoice(known, incoming) {
     if (incoming === undefined)

package/chat/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ui/index.ts';
 export * from './hooks/index.ts';
 export * from './helpers/index.ts';
+export * from './chat/index.ts';

package/chat/index.js

@@ -1,3 +1,4 @@
 export * from "./ui/index.js";
 export * from "./hooks/index.js";
 export * from "./helpers/index.js";
+export * from "./chat/index.js";

package/chat/ui/Conversation.d.ts

@@ -1,7 +1,10 @@
+import { type ReactNode } from 'react';
 import { type ImageSourcePropType } from 'react-native';
 import type { Composer } from '../hooks/useComposer.ts';
-import { type Thread } from '../helpers/thread.ts';
+import type { ChoiceItem } from '../helpers/message.ts';
+import { type Thread, type ThreadMessage } from '../helpers/thread.ts';
 import { type ChatIcon, type ChatWords } from './parts.ts';
+import { type WelcomeWords } from './Welcome.tsx';
 export type LoadState = 'loading' | 'ready' | 'failed';
 export interface ConversationProps {
     thread: Thread;
@@ -13,13 +16,36 @@ export interface ConversationProps {
     onRetry: (id: number) => void;
     onLoadOlder: () => void;
     onReload: () => void;
-    keyboardOffset?: number;
-    bottomInset?: number;
+    keyboardOffset?: number | undefined;
+    bottomInset?: number | undefined;
     words: ChatWords;
     Icon: ChatIcon;
     skipMark: ImageSourcePropType;
+    label?: string;
+    lead?: ReactNode;
+    trail?: ReactNode;
+    hidden?: ReadonlySet<number>;
+    choices?: ConversationChoices;
+    composerClosed?: boolean;
+    holding?: boolean;
+}
+export interface ConversationChoices {
+    sending: string | null;
+    failed: number | null;
+    holding?: boolean;
+    words: WelcomeWords;
+    onChoose: (question: ThreadMessage, answer: ChoiceItem) => void;
 }
 export declare const PHOTO_RETRIES = 5;
 export declare const PHOTO_RETRY_MS = 1500;
 /** One conversation: its messages oldest at the top, the care team's typing, and the box to write in. */
 export declare function Conversation(props: ConversationProps): import("react").JSX.Element;
+export interface UnsentProps {
+    message: ThreadMessage;
+    words: ChatWords;
+    onRetry: (id: number) => void;
+    Icon: ChatIcon;
+    holding: boolean;
+}
+/** The member's line while it is on its way, or after it failed, with its retry. */
+export declare function Unsent({ message, words, onRetry, Icon, holding, }: UnsentProps): import("react").JSX.Element;

package/chat/ui/Conversation.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ActivityIndicator, FlatList, Image, KeyboardAvoidingView, Linking, Platform, Pressable, Text, TextInput, View, } from 'react-native';
-import { groupThread } from "../helpers/thread.js";
+import { groupThread, openQuestion, } from "../helpers/thread.js";
 import { Bubble } from "./Bubble.js";
 import { useColor } from "./parts.js";
+import { Choices } from "./Welcome.js";
 // An image from require needs its size in style: the web draws it at its own size otherwise.
 const AVATAR_SIZE = 32;
 export const PHOTO_RETRIES = 5;
@@ -18,40 +19,64 @@ export function Conversation(props) {
     const { thread, load, feedDown, typists, words, onReload, onLoadOlder } = props;
     const secondary = useColor('ink-secondary');
     // The list is inverted so it rests at the newest message and stays put while the member reads older ones.
-    const items = groupThread(thread.messages, props.skipUserId).reverse();
-    return (_jsxs(KeyboardAvoidingView, { behavior: "padding", keyboardVerticalOffset: props.keyboardOffset ?? 0, className: "flex-1", children: [feedDown ? (_jsx(Line, { role: "status", className: "bg-muted px-gutter-phone py-2 text-center text-sm text-ink-secondary", children: words.feedDown })) : null, load === 'loading' ? (_jsx(ActivityIndicator, { accessibilityLabel: words.loading, className: "flex-1", color: secondary })) : load === 'failed' ? (_jsxs(View, { role: "alert", className: "flex-1 items-center justify-center gap-3 px-gutter-phone", children: [_jsx(Line, { className: "text-center text-base text-ink-secondary", children: words.loadFailed }), _jsx(Pressable, { role: "button", onPress: onReload, className: "h-control items-center justify-center rounded-pill border border-line-control px-6 active:opacity-80", children: _jsx(Line, { className: "text-md font-semibold text-ink", children: words.retry }) })] })) : (_jsx(FlatList, { inverted: true, data: items, keyExtractor: itemKey, onEndReached: onLoadOlder, contentContainerClassName: "gap-4 px-gutter-phone py-4 md:mx-auto md:w-full md:max-w-reading", ListHeaderComponent: typists.length ? _jsx(Line, { className: "text-sm text-ink-secondary", children: words.typingLine(typists) }) : undefined, renderItem: ({ item }) => _jsx(ThreadRow, { item: item, ...props }) })), _jsx(ComposerBox, { ...props })] }));
+    const shown = props.hidden ? thread.messages.filter((message) => !props.hidden?.has(message.id)) : thread.messages;
+    const items = groupThread(shown, props.skipUserId).reverse();
+    const question = props.choices ? openQuestion(shown) : undefined;
+    return (_jsxs(KeyboardAvoidingView, { behavior: "padding", keyboardVerticalOffset: props.keyboardOffset ?? 0, className: "flex-1", children: [feedDown ? (_jsx(Line, { role: "status", className: "bg-muted px-gutter-phone py-2 text-center text-sm text-ink-secondary", children: words.feedDown })) : null, load === 'loading' ? (_jsx(ActivityIndicator, { accessibilityLabel: words.loading, className: "flex-1", color: secondary })) : load === 'failed' ? (_jsxs(View, { role: "alert", className: "flex-1 items-center justify-center gap-3 px-gutter-phone", children: [_jsx(Line, { className: "text-center text-base text-ink-secondary", children: words.loadFailed }), _jsx(Pressable, { role: "button", onPress: onReload, className: "h-control items-center justify-center rounded-pill border border-line-control px-6 active:opacity-80", children: _jsx(Line, { className: "text-md font-semibold text-ink", children: words.retry }) })] })) : (_jsx(FlatList, { inverted: true, data: items, keyExtractor: itemKey, onEndReached: onLoadOlder, contentContainerClassName: "gap-4 px-gutter-phone py-4 md:mx-auto md:w-full md:max-w-reading", role: "log", "aria-label": props.label, 
+                // The conversation scrolls, so the keyboard has to be able to reach it.
+                tabIndex: 0, ListHeaderComponent: _jsxs(_Fragment, { children: [props.trail, typists.length ? _jsx(Line, { className: "text-sm text-ink-secondary", children: words.typingLine(typists) }) : null] }), ListFooterComponent: _jsx(_Fragment, { children: props.lead }), renderItem: ({ item }) => _jsx(ThreadRow, { item: item, question: question, ...props }) })), _jsx(ComposerBox, { ...props })] }));
 }
 function itemKey(item) {
     if (item.kind === 'run')
         return `r${String(item.messages[0]?.id)}`;
     return `${item.kind === 'notice' ? 'n' : 'u'}${String(item.message.id)}`;
 }
-function ComposerBox({ composer, bottomInset, words, Icon }) {
+// The web sends on Enter, as joinskips.com's chat does, and Shift+Enter starts a new line. A phone's return key
+// starts a new line.
+function sendOnEnter(canSend, submit) {
+    return (event) => {
+        const { nativeEvent } = event;
+        if (nativeEvent.key !== 'Enter' || ('shiftKey' in nativeEvent && nativeEvent.shiftKey === true))
+            return;
+        event.preventDefault();
+        if (canSend)
+            submit();
+    };
+}
+function ComposerBox({ composer, bottomInset, words, Icon, composerClosed = false, holding = false }) {
     const secondary = useColor('ink-secondary');
     const placeholder = useColor('ink-placeholder');
     const actionInk = useColor('action-ink');
-    const { text, picked, refused, canSend } = composer;
-    return (_jsxs(View, { style: { paddingBottom: Math.max(bottomInset ?? 0, MIN_BOTTOM_SPACE) }, className: "gap-2 px-gutter-phone pt-2 md:mx-auto md:w-full md:max-w-reading", children: [refused ? (_jsx(Line, { role: "alert", className: "text-sm text-error-ink", children: words.attachmentRefused[refused] })) : null, picked ? (_jsxs(View, { className: "flex-row items-center gap-3 self-start rounded-control border border-line-subtle bg-surface p-2 pr-3", children: [isPhoto(picked) ? (_jsx(Image, { source: { uri: picked.uri }, resizeMode: "cover", className: "h-10 w-10 rounded-control bg-muted" })) : (_jsx(View, { className: "h-10 w-10 items-center justify-center", children: _jsx(Icon, { name: "file", color: secondary, size: 20 }) })), _jsxs(View, { className: "max-w-56", children: [_jsx(Line, { className: "text-sm text-ink", numberOfLines: 1, children: picked.name }), _jsx(Line, { className: "text-xs text-ink-secondary", children: `${isPhoto(picked) ? words.photo : words.pdf} · ${words.fileSize(picked.size)}` })] }), _jsx(Pressable, { role: "button", accessibilityLabel: `${words.remove} ${picked.name}`, hitSlop: 8, onPress: composer.remove, children: _jsx(Icon, { name: "close", color: secondary, size: 18 }) })] })) : null, _jsxs(View, { className: "flex-row items-end gap-1 rounded-[24px] border border-line-subtle bg-surface p-1.5 shadow-card", children: [composer.attach ? (_jsx(Pressable, { role: "button", accessibilityLabel: words.attach, onPress: composer.attach, className: "h-[42px] w-[42px] items-center justify-center rounded-pill active:bg-muted", children: _jsx(Icon, { name: "attach", color: secondary, size: 18 }) })) : null, _jsx(TextInput, { value: text, onChangeText: composer.onChangeText, placeholder: words.composerPlaceholder, placeholderTextColor: placeholder, accessibilityLabel: words.composerPlaceholder, multiline: true, ...Platform.select({ web: { rows: 1 }, default: {} }), className: "max-h-40 flex-1 self-center px-1 py-2 font-ui text-md leading-6 text-ink" }), _jsx(Pressable, { role: "button", accessibilityLabel: words.send, disabled: !canSend, onPress: composer.submit, className: `h-[42px] w-[42px] items-center justify-center rounded-pill bg-action active:bg-action-pressed ${canSend ? '' : 'opacity-40'}`, children: _jsx(View, { style: { transform: [{ rotate: '-90deg' }] }, children: _jsx(Icon, { name: "arrow-right", color: actionInk, size: 18 }) }) })] }), _jsx(Line, { className: "text-center text-xs text-ink-secondary", children: words.emergencyNote })] }));
+    const { text, picked, refused } = composer;
+    const canSend = composer.canSend && !composerClosed && !holding;
+    return (_jsxs(View, { style: { paddingBottom: Math.max(bottomInset ?? 0, MIN_BOTTOM_SPACE) }, className: "gap-2 px-gutter-phone pt-2 md:mx-auto md:w-full md:max-w-reading", children: [refused ? (_jsx(Line, { role: "alert", className: "text-sm text-error-ink", children: words.attachmentRefused[refused] })) : null, picked ? (_jsxs(View, { className: "flex-row items-center gap-3 self-start rounded-control border border-line-subtle bg-surface p-2 pr-3", children: [isPhoto(picked) ? (_jsx(Image, { source: { uri: picked.uri }, resizeMode: "cover", className: "h-10 w-10 rounded-control bg-muted" })) : (_jsx(View, { className: "h-10 w-10 items-center justify-center", children: _jsx(Icon, { name: "file", color: secondary, size: 20 }) })), _jsxs(View, { className: "max-w-56", children: [_jsx(Line, { className: "text-sm text-ink", numberOfLines: 1, children: picked.name }), _jsx(Line, { className: "text-xs text-ink-secondary", children: `${isPhoto(picked) ? words.photo : words.pdf} · ${words.fileSize(picked.size)}` })] }), _jsx(Pressable, { role: "button", accessibilityLabel: `${words.remove} ${picked.name}`, hitSlop: 8, onPress: composer.remove, children: _jsx(Icon, { name: "close", color: secondary, size: 18 }) })] })) : null, _jsxs(View, { className: "flex-row items-end gap-1 rounded-[24px] border border-line-subtle bg-surface p-1.5 shadow-card", children: [composer.attach && !composerClosed ? (_jsx(Pressable, { role: "button", accessibilityLabel: words.attach, onPress: composer.attach, className: "h-[42px] w-[42px] items-center justify-center rounded-pill active:bg-muted", children: _jsx(Icon, { name: "attach", color: secondary, size: 18 }) })) : null, _jsx(TextInput, { value: text, editable: !composerClosed, onChangeText: composer.onChangeText, placeholder: words.composerPlaceholder, placeholderTextColor: placeholder, accessibilityLabel: words.composerPlaceholder, multiline: true, ...Platform.select({ web: { rows: 1, onKeyPress: sendOnEnter(canSend, composer.submit) }, default: {} }), className: "max-h-40 flex-1 self-center px-1 py-2 font-ui text-md leading-6 text-ink" }), _jsx(Pressable, { role: "button", accessibilityLabel: words.send, disabled: !canSend, onPress: composer.submit, className: `h-[42px] w-[42px] items-center justify-center rounded-pill bg-action active:bg-action-pressed ${canSend ? '' : 'opacity-40'}`, children: _jsx(View, { style: { transform: [{ rotate: '-90deg' }] }, children: _jsx(Icon, { name: "arrow-right", color: actionInk, size: 18 }) }) })] }), words.emergencyNote ? (_jsx(Line, { className: "text-center text-xs text-ink-secondary", children: words.emergencyNote })) : null] }));
 }
 function ThreadRow({ item, words, onRetry, ...props }) {
     if (item.kind === 'notice') {
         return (_jsx(Line, { className: "self-center rounded-control border border-line-subtle px-3 py-2 text-sm text-ink-secondary", children: item.message.text }));
     }
-    if (item.kind === 'unsent')
-        return _jsx(Unsent, { message: item.message, words: words, onRetry: onRetry, Icon: props.Icon });
+    if (item.kind === 'unsent') {
+        return (_jsx(Unsent, { message: item.message, words: words, onRetry: onRetry, Icon: props.Icon, holding: props.holding ?? false }));
+    }
     const { sender, messages } = item;
     const mine = sender === 'mine';
     const name = mine ? words.you : sender === 'skip' ? words.skip : sender.name;
     // The run is in time order, so its time is its last line's.
     const sentAt = Math.max(...messages.map((m) => m.sentAt));
-    return (_jsxs(View, { className: `max-w-[82%] gap-1 ${mine ? 'items-end self-end' : 'items-start self-start'}`, children: [messages.map((message, index) => (_jsxs(View, { className: "flex-row items-end gap-2", children: [mine ? null : index === messages.length - 1 ? (_jsx(SenderAvatar, { sender: sender, name: name, skipMark: props.skipMark })) : (_jsx(View, { className: "w-8" })), _jsxs(View, { className: `shrink gap-2 ${mine ? 'items-end' : 'items-start'}`, children: [message.attachments.map((attachment) => (_jsx(Attachment, { attachment: attachment, words: words, Icon: props.Icon }, attachment.url))), message.text ? _jsx(Bubble, { mine: mine, text: message.text }) : null] })] }, message.id))), _jsx(Line, { className: `px-1 text-xs text-ink-secondary ${mine ? '' : 'ml-10'}`, children: `${name} · ${words.messageTime(sentAt)}` })] }));
+    return (_jsxs(View, { className: `max-w-[82%] gap-1 ${mine ? 'items-end self-end' : 'items-start self-start'}`, children: [messages.map((message, index) => (_jsxs(View, { className: "flex-row items-end gap-2", children: [mine ? null : index === messages.length - 1 ? (_jsx(SenderAvatar, { sender: sender, name: name, skipMark: props.skipMark })) : (_jsx(View, { className: "w-8" })), _jsxs(View, { className: `shrink gap-2 ${mine ? 'items-end' : 'items-start'}`, children: [message.attachments.map((attachment) => (_jsx(Attachment, { attachment: attachment, words: words, Icon: props.Icon }, attachment.url))), message.text ? _jsx(Bubble, { mine: mine, text: message.text }) : null, props.choices && props.question?.message.id === message.id ? (_jsx(ChoiceRow, { question: props.question, choices: props.choices })) : null] })] }, message.id))), _jsx(Line, { className: `px-1 text-xs text-ink-secondary ${mine ? '' : 'ml-10'}`, children: `${name} · ${words.messageTime(sentAt)}` })] }));
+}
+function ChoiceRow({ question, choices }) {
+    return (_jsx(Choices, { items: question.items, question: question.message.text, sending: choices.sending, holding: choices.holding ?? false, failed: choices.failed === question.message.id, words: choices.words, onChoose: (answer) => {
+            choices.onChoose(question.message, answer);
+        } }));
 }
 // A failed line is a button to send it again, and its note is announced.
 const BUTTON_ROLE = 'button';
 const ALERT_ROLE = 'alert';
-function Unsent({ message, words, onRetry, Icon, }) {
+/** The member's line while it is on its way, or after it failed, with its retry. */
+export function Unsent({ message, words, onRetry, Icon, holding, }) {
     const failed = message.delivery === 'failed';
-    return (_jsxs(Pressable, { ...(failed ? { role: BUTTON_ROLE } : {}), disabled: !failed, onPress: () => {
+    return (_jsxs(Pressable, { ...(failed ? { role: BUTTON_ROLE } : {}), disabled: !failed || holding, onPress: () => {
             onRetry(message.id);
         }, className: `max-w-[82%] items-end gap-1 self-end ${failed ? '' : 'opacity-70'}`, children: [message.file ? _jsx(PickedPreview, { picked: message.file, words: words, Icon: Icon }) : null, message.text ? _jsx(Bubble, { mine: true, text: message.text }) : null, _jsx(Line, { ...(failed ? { role: ALERT_ROLE } : {}), className: `px-1 text-xs ${failed ? 'text-error-ink' : 'text-ink-secondary'}`, children: `${words.you} · ${failed ? words.notSent : words.sending}` })] }));
 }