@joinskips/brand 9.0.0-develop.146 → 9.0.0-develop.148

package/chat/{attachments.d.ts → helpers/attachments.d.ts}

@@ -7,5 +7,6 @@ export interface FileFacts {
     type: string;
     size: number;
 }
+export type AttachmentProblem = 'type' | 'size';
 /** Why a picked file cannot be sent, or null when it can. */
-export declare function attachmentProblem(file: FileFacts): 'type' | 'size' | null;
+export declare function attachmentProblem(file: FileFacts): AttachmentProblem | null;

package/chat/helpers/cable.d.ts

@@ -0,0 +1,34 @@
+import { type ChatEvent } from './cableFrames.ts';
+export declare const STALE_MS = 10000;
+export declare const FIRST_RETRY_MS = 1000;
+export declare const MAX_RETRY_MS = 30000;
+export type CableState = 'connecting' | 'live' | 'down';
+export interface CableOptions {
+    careTeamName: string;
+    createSocket: (url: string) => Socket;
+    now: () => number;
+}
+export interface CableHandlers {
+    onEvent: (event: ChatEvent) => void;
+    onState: (state: CableState) => void;
+    onKeysRefused: () => void;
+}
+/** The socket address for a Skips App origin, such as https://app.joinskips.com. */
+export declare const cableUrl: (origin: string) => string;
+/** The wait before the nth reconnect, doubling up to MAX_RETRY_MS. */
+export declare const retryDelay: (attempt: number) => number;
+export interface SocketMessage {
+    data: unknown;
+}
+export interface Socket extends Pick<WebSocket, 'send' | 'close'> {
+    onopen: ((event: unknown) => void) | null;
+    onmessage: ((event: SocketMessage) => void) | null;
+    onclose: ((event: unknown) => void) | null;
+    onerror: ((event: unknown) => void) | null;
+}
+/**
+ * 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 declare function openCable(url: string, keys: string[], handlers: CableHandlers, { careTeamName, createSocket, now }: CableOptions): () => void;

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

@@ -0,0 +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 { 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

@@ -0,0 +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 { 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/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/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export { useCodeEntry, type CodeEntry } from './useCodeEntry.ts';
+export { useComposer, type Composer, type ComposerOptions } from './useComposer.ts';
+export { useResendCountdown } from './useResendCountdown.ts';
+export { useStepField, type StepField } from './useStepField.ts';
+export { useTypingCue, type SkipsTyping, type TypingCue } from './useTypingCue.ts';
+export { useWelcomeTyping } from './useWelcomeTyping.ts';

package/chat/hooks/index.js

@@ -0,0 +1,6 @@
+export { useCodeEntry } from "./useCodeEntry.js";
+export { useComposer } from "./useComposer.js";
+export { useResendCountdown } from "./useResendCountdown.js";
+export { useStepField } from "./useStepField.js";
+export { useTypingCue } from "./useTypingCue.js";
+export { useWelcomeTyping } from "./useWelcomeTyping.js";

package/chat/hooks/useCodeEntry.d.ts

@@ -0,0 +1,6 @@
+/** The emailed code as it is typed: digits only, handed on by itself once it is whole. */
+export interface CodeEntry {
+    code: string;
+    onChangeText: (typed: string) => void;
+}
+export declare function useCodeEntry(length: number, onSubmit: (code: string) => void): CodeEntry;

package/chat/hooks/useCodeEntry.js

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+import { codeDigits, completesCode } from "../helpers/welcome.js";
+export function useCodeEntry(length, onSubmit) {
+    const [code, setCode] = useState('');
+    return {
+        code,
+        onChangeText: (typed) => {
+            const digits = codeDigits(typed, length);
+            setCode(digits);
+            if (completesCode(digits, code, length))
+                onSubmit(digits);
+        },
+    };
+}

package/chat/hooks/useComposer.d.ts

@@ -0,0 +1,20 @@
+import { type AttachmentProblem } from '../helpers/attachments.ts';
+import type { PickedFile } from '../helpers/message.ts';
+export interface ComposerOptions {
+    onSend: (text: string, file: PickedFile | null) => void;
+    onTyped: (text: string) => void;
+    pickFile?: () => Promise<PickedFile | null>;
+    initialText?: string;
+}
+/** The message box's state and what each control does, which Conversation draws. */
+export interface Composer {
+    text: string;
+    picked: PickedFile | null;
+    refused: AttachmentProblem | null;
+    canSend: boolean;
+    onChangeText: (text: string) => void;
+    attach: (() => void) | null;
+    remove: () => void;
+    submit: () => void;
+}
+export declare function useComposer({ onSend, onTyped, pickFile, initialText }: ComposerOptions): Composer;

package/chat/hooks/useComposer.js

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { attachmentProblem } from "../helpers/attachments.js";
+export function useComposer({ onSend, onTyped, pickFile, initialText = '' }) {
+    const [text, setText] = useState(initialText);
+    const [picked, setPicked] = useState(null);
+    const [refused, setRefused] = useState(null);
+    const attach = async (pick) => {
+        const file = await pick();
+        if (!file)
+            return;
+        const problem = attachmentProblem(file);
+        setRefused(problem);
+        if (!problem)
+            setPicked(file);
+    };
+    return {
+        text,
+        picked,
+        refused,
+        canSend: Boolean(text.trim() || picked),
+        onChangeText: (value) => {
+            setText(value);
+            onTyped(value);
+        },
+        attach: pickFile
+            ? () => {
+                void attach(pickFile);
+            }
+            : null,
+        remove: () => {
+            setPicked(null);
+        },
+        submit: () => {
+            onSend(text, picked);
+            setText('');
+            setPicked(null);
+            setRefused(null);
+        },
+    };
+}

package/chat/hooks/useResendCountdown.d.ts

@@ -0,0 +1,2 @@
+/** Whole seconds left before a new code can be sent, counting down to 0 from when the wait starts. */
+export declare function useResendCountdown(waitMs: number): number;

package/chat/hooks/useResendCountdown.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+const TICK_MS = 250;
+/** Whole seconds left before a new code can be sent, counting down to 0 from when the wait starts. */
+export function useResendCountdown(waitMs) {
+    const [secondsLeft, setSecondsLeft] = useState(Math.ceil(waitMs / 1000));
+    useEffect(() => {
+        const end = Date.now() + waitMs;
+        const timer = setInterval(() => {
+            const left = Math.max(0, Math.ceil((end - Date.now()) / 1000));
+            setSecondsLeft(left);
+            if (left === 0)
+                clearInterval(timer);
+        }, TICK_MS);
+        return () => {
+            clearInterval(timer);
+        };
+    }, [waitMs]);
+    return secondsLeft;
+}

package/chat/hooks/useStepField.d.ts

@@ -0,0 +1,8 @@
+/** A welcome step's field: what was typed, whether it was refused, and its change and submit. */
+export interface StepField {
+    typed: string;
+    refused: boolean;
+    onChangeText: (typed: string) => void;
+    submit: () => void;
+}
+export declare function useStepField(usable: (typed: string) => string | null, onSubmit: (value: string) => void, initial?: string): StepField;

package/chat/hooks/useStepField.js

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+// usable turns what was typed into what is handed on, or null when it cannot be used, as givenEmail and givenName do.
+export function useStepField(usable, onSubmit, initial = '') {
+    const [typed, setTyped] = useState(initial);
+    const [refused, setRefused] = useState(false);
+    return {
+        typed,
+        refused,
+        onChangeText: setTyped,
+        submit: () => {
+            const value = usable(typed);
+            setRefused(value === null);
+            if (value !== null)
+                onSubmit(value);
+        },
+    };
+}

package/chat/hooks/useTypingCue.d.ts

@@ -0,0 +1,11 @@
+import { type TypingTimes } from '../helpers/skipTyping.ts';
+/** The Skips App's last word on Skip typing. */
+export interface SkipsTyping {
+    typing: boolean;
+    count: number;
+}
+export interface TypingCue {
+    dots: boolean;
+    held: ReadonlySet<number>;
+}
+export declare function useTypingCue(skipsLineIds: readonly number[], skipsTyping: SkipsTyping, times?: TypingTimes): TypingCue;

package/chat/hooks/useTypingCue.js

@@ -0,0 +1,41 @@
+import { useEffect, useReducer, useState } from 'react';
+import { heldFrom, TYPING_IDLE, TYPING_TIMES, typingReducer } from "../helpers/skipTyping.js";
+const NONE = new Set();
+// The Skips App's word on Skip typing and Skip's lines landing drive the cue, and two timers keep the dots up for
+// their minimum and stop them at the limit. skipsLineIds are Skip's lines in the conversation, in order.
+export function useTypingCue(skipsLineIds, skipsTyping, times = TYPING_TIMES) {
+    const [state, dispatch] = useReducer(typingReducer, TYPING_IDLE);
+    const [wordsSeen, setWordsSeen] = useState(skipsTyping.count);
+    const [linesSeen, setLinesSeen] = useState(skipsLineIds.length);
+    if (skipsTyping.count !== wordsSeen) {
+        setWordsSeen(skipsTyping.count);
+        // The lines before this render: a reply that lands with typing_on, as one sent in a keystroke does, waits for the dots.
+        dispatch(skipsTyping.typing ? { type: 'typing', skipsLines: linesSeen } : { type: 'stopped' });
+    }
+    if (skipsLineIds.length !== linesSeen) {
+        setLinesSeen(skipsLineIds.length);
+        dispatch({ type: 'stopped' });
+    }
+    useEffect(() => {
+        if (!state.dots || state.shown)
+            return undefined;
+        const shown = setTimeout(() => {
+            dispatch({ type: 'shown' });
+        }, times.leastMs);
+        return () => {
+            clearTimeout(shown);
+        };
+    }, [state.dots, state.shown, state.turn, times.leastMs]);
+    useEffect(() => {
+        if (!state.dots)
+            return undefined;
+        const capped = setTimeout(() => {
+            dispatch({ type: 'capped' });
+        }, times.limitMs);
+        return () => {
+            clearTimeout(capped);
+        };
+    }, [state.dots, state.beats, times.limitMs]);
+    const from = heldFrom(state);
+    return { dots: state.dots, held: from === null ? NONE : new Set(skipsLineIds.slice(from)) };
+}

package/chat/hooks/useWelcomeTyping.d.ts

@@ -0,0 +1,2 @@
+import { type WelcomeStep, type WelcomeTypingTimes } from '../helpers/welcome.ts';
+export declare function useWelcomeTyping(step: WelcomeStep | null, times?: WelcomeTypingTimes): WelcomeStep | null;

package/chat/hooks/useWelcomeTyping.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { typesBefore, typingMs, WELCOME_TYPING_TIMES, } from "../helpers/welcome.js";
+// The welcome step whose new line Skip is still typing, kept out of sight with its field or buttons until the
+// dots go, or null.
+export function useWelcomeTyping(step, times = WELCOME_TYPING_TIMES) {
+    const [seen, setSeen] = useState(null);
+    const [typing, setTyping] = useState(null);
+    const { leastMs, mostMs } = times;
+    if (step !== seen) {
+        setSeen(step);
+        // With no time to type in, the line shows as the step is reached.
+        setTyping(step !== null && mostMs > 0 && typesBefore(seen, step) ? step : null);
+    }
+    useEffect(() => {
+        if (typing === null)
+            return undefined;
+        const typed = setTimeout(() => {
+            setTyping(null);
+        }, typingMs({ leastMs, mostMs }, Math.random()));
+        return () => {
+            clearTimeout(typed);
+        };
+    }, [typing, leastMs, mostMs]);
+    return typing;
+}

package/chat/index.d.ts

@@ -1,11 +1,3 @@
-export { Conversation, type ConversationProps, type LoadState } from './components/Conversation.tsx';
-export { Bubble, type BubbleProps } from './components/Bubble.tsx';
-export type { ChatIcon, ChatIconName, ChatWords } from './components/parts.ts';
-export { ATTACHMENT_TYPES, MAX_ATTACHMENT_BYTES, attachmentProblem, attachmentType } 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 { TYPING_CLEAR_MS, TYPING_IDLE_MS, createTypingSignal, createTypingWatch } from './typing.ts';
-export { 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 { 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';
-export { Choices, CodeStep, EmailStep, NameStep, SkipTyping, WelcomeChoice, type WelcomeWords, } from './components/Welcome.tsx';
+export * from './ui/index.ts';
+export * from './hooks/index.ts';
+export * from './helpers/index.ts';

package/chat/index.js

@@ -1,10 +1,3 @@
-export { Conversation } from "./components/Conversation.js";
-export { Bubble } from "./components/Bubble.js";
-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 { TYPING_CLEAR_MS, TYPING_IDLE_MS, createTypingSignal, createTypingWatch } from "./typing.js";
-export { TYPING_IDLE, TYPING_TIMES, heldFrom, typingReducer, } from "./skipTyping.js";
-export { fitVisibleArea } from "./visibleArea.js";
-export { EMAIL_MAX_LENGTH, NAME_MAX_LENGTH, RESEND_AFTER_MS, WELCOME_TYPING_TIMES, givenEmail, givenName, isEmail, isName, typesBefore, typingMs, } from "./welcome.js";
-export { Choices, CodeStep, EmailStep, NameStep, SkipTyping, WelcomeChoice, } from "./components/Welcome.js";
+export * from "./ui/index.js";
+export * from "./hooks/index.js";
+export * from "./helpers/index.js";

package/chat/ui/CheckIn.d.ts

@@ -0,0 +1,25 @@
+import { type ChatIcon } from './parts.ts';
+/** What a person says about one of their current medications. */
+export type MedicationAnswer = 'taking' | 'refill' | 'reorder' | 'stopped';
+/** Every word the medication check-in shows, which the app passes in. */
+export interface CheckInWords {
+    taking: string;
+    refill: string;
+    reorder: string;
+    stopped: string;
+    whyStopped: string;
+}
+export declare const STOPPED_REASON_MAX_LENGTH = 500;
+export interface MedicationCheckProps {
+    name: string;
+    directions: string;
+    refillable: boolean;
+    answer: MedicationAnswer | null;
+    reason: string;
+    words: CheckInWords;
+    Icon: ChatIcon;
+    onAnswer: (answer: MedicationAnswer) => void;
+    onReason: (reason: string) => void;
+}
+/** One current medication in the check-in: still taking, a refill or re-order, or stopped and why. */
+export declare function MedicationCheck({ name, directions, refillable, answer, reason, words, Icon, onAnswer, onReason, }: MedicationCheckProps): import("react").JSX.Element;

package/chat/ui/CheckIn.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Text, TextInput, View } from 'react-native';
+import { useColor } from "./parts.js";
+export const STOPPED_REASON_MAX_LENGTH = 500;
+const ICONS = {
+    taking: 'thumbs-up',
+    refill: 'repeat',
+    reorder: 'copy-plus',
+    stopped: 'close',
+};
+const ICON_SIZE = 24;
+/** One current medication in the check-in: still taking, a refill or re-order, or stopped and why. */
+export function MedicationCheck({ name, directions, refillable, answer, reason, words, Icon, onAnswer, onReason, }) {
+    const ink = useColor('ink');
+    const accentInk = useColor('accent-ink');
+    const placeholder = useColor('ink-placeholder');
+    const answers = ['taking', refillable ? 'refill' : 'reorder', 'stopped'];
+    return (_jsxs(View, { className: "w-80 max-w-full gap-3.5 rounded-[20px] border border-line-subtle bg-surface p-4", children: [_jsxs(View, { className: "gap-0.5", children: [_jsx(Text, { className: "font-ui text-md font-semibold text-ink", children: name }), _jsx(Text, { className: "font-ui text-sm text-ink-secondary", children: directions })] }), _jsx(View, { role: "radiogroup", accessibilityLabel: name, className: "flex-row", children: answers.map((each) => {
+                    const picked = answer === each;
+                    return (_jsxs(Pressable, { role: "radio", "aria-checked": picked, accessibilityLabel: words[each], onPress: () => {
+                            onAnswer(each);
+                        }, className: "flex-1 items-center gap-1.5", children: [_jsx(View, { className: `h-[52px] w-[52px] items-center justify-center rounded-pill border ${picked ? 'border-accent bg-accent' : 'border-line-control bg-surface'}`, children: _jsx(Icon, { name: ICONS[each], color: picked ? accentInk : ink, size: ICON_SIZE }) }), _jsx(Text, { className: "text-center font-ui text-xs font-semibold text-ink", children: words[each] })] }, each));
+                }) }), answer === 'stopped' ? (_jsx(TextInput, { value: reason, onChangeText: onReason, accessibilityLabel: words.whyStopped, placeholder: words.whyStopped, placeholderTextColor: placeholder, multiline: true, maxLength: STOPPED_REASON_MAX_LENGTH, className: "min-h-20 rounded-control border border-line-control bg-surface px-3 py-2 font-ui text-md text-ink" })) : null] }));
+}

package/chat/{components → ui}/Conversation.d.ts

@@ -1,6 +1,6 @@
 import { type ImageSourcePropType } from 'react-native';
-import type { PickedFile } from '../message.ts';
-import { type Thread } from '../thread.ts';
+import type { Composer } from '../hooks/useComposer.ts';
+import { type Thread } from '../helpers/thread.ts';
 import { type ChatIcon, type ChatWords } from './parts.ts';
 export type LoadState = 'loading' | 'ready' | 'failed';
 export interface ConversationProps {
@@ -9,13 +9,10 @@ export interface ConversationProps {
     feedDown: boolean;
     typists: string[];
     skipUserId: number | null;
-    onSend: (text: string, file: PickedFile | null) => void;
+    composer: Composer;
     onRetry: (id: number) => void;
-    onTyped: (text: string) => void;
     onLoadOlder: () => void;
     onReload: () => void;
-    pickFile?: () => Promise<PickedFile | null>;
-    initialText?: string;
     keyboardOffset?: number;
     bottomInset?: number;
     words: ChatWords;

package/chat/{components → ui}/Conversation.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ActivityIndicator, FlatList, Image, KeyboardAvoidingView, Linking, Platform, Pressable, Text, TextInput, View, } from 'react-native';
-import { attachmentProblem } from "../attachments.js";
-import { groupThread } from "../thread.js";
+import { groupThread } from "../helpers/thread.js";
 import { Bubble } from "./Bubble.js";
 import { useColor } from "./parts.js";
 // An image from require needs its size in style: the web draws it at its own size otherwise.
@@ -20,42 +19,19 @@ export function Conversation(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(Composer, { ...props })] }));
+    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 })] }));
 }
 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 Composer({ onSend, onTyped, pickFile, initialText, bottomInset, words, Icon }) {
+function ComposerBox({ composer, bottomInset, words, Icon }) {
     const secondary = useColor('ink-secondary');
     const placeholder = useColor('ink-placeholder');
     const actionInk = useColor('action-ink');
-    const [text, setText] = useState(initialText ?? '');
-    const [picked, setPicked] = useState(null);
-    const [refused, setRefused] = useState(null);
-    const canSend = Boolean(text.trim() || picked);
-    const attach = async (pick) => {
-        const file = await pick();
-        if (!file)
-            return;
-        const problem = attachmentProblem(file);
-        setRefused(problem ? words.attachmentRefused[problem] : null);
-        if (!problem)
-            setPicked(file);
-    };
-    const submit = () => {
-        onSend(text, picked);
-        setText('');
-        setPicked(null);
-        setRefused(null);
-    };
-    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: 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: () => {
-                            setPicked(null);
-                        }, 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: [pickFile ? (_jsx(Pressable, { role: "button", accessibilityLabel: words.attach, onPress: () => void attach(pickFile), 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: (value) => {
-                            setText(value);
-                            onTyped(value);
-                        }, 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: 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, 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 })] }));
 }
 function ThreadRow({ item, words, onRetry, ...props }) {
     if (item.kind === 'notice') {

package/chat/{components → ui}/Markdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Linking, Platform, Text, View } from 'react-native';
-import { readMarkdown } from "../markdown.js";
+import { readMarkdown } from "../helpers/markdown.js";
 // On the web a link opens in a new tab, as the website's own links do, telling the other site nothing.
 export const NEW_TAB = { target: '_blank', rel: 'noopener noreferrer nofollow' };
 function Inlines({ nodes }) {

package/chat/{components → ui}/Welcome.d.ts

@@ -1,5 +1,7 @@
 import { type ImageSourcePropType } from 'react-native';
-import type { ChoiceItem } from '../message.ts';
+import type { ChoiceItem } from '../helpers/message.ts';
+import type { CodeEntry } from '../hooks/useCodeEntry.ts';
+import type { StepField as StepFieldState } from '../hooks/useStepField.ts';
 /** Every word the website's welcome shows, which the website passes in. */
 export interface WelcomeWords {
     logIn: string;
@@ -20,6 +22,16 @@ export interface WelcomeWords {
     codeRanOut: string;
     typing: string;
 }
+type PillLook = 'solid' | 'stroked' | 'flat';
+export interface PillProps {
+    label: string;
+    look?: PillLook;
+    disabled?: boolean;
+    loading?: boolean;
+    onPress: () => void;
+}
+/** The chat's button, in the brand's pill. */
+export declare function Pill({ label, look, disabled, loading, onPress, }: PillProps): import("react").JSX.Element;
 export interface WelcomeChoiceProps {
     words: WelcomeWords;
     onLogIn: () => void;
@@ -40,18 +52,17 @@ export interface ChoicesProps {
 export declare function Choices({ items, question, sending, holding, failed, words, onChoose, }: ChoicesProps): import("react").JSX.Element;
 export interface EmailStepProps {
     words: WelcomeWords;
-    onSubmit: (email: string) => void;
-    initial?: string;
+    field: StepFieldState;
 }
 /** The email asked for after Continue here, and again for a visitor changing it. */
-export declare function EmailStep({ words, onSubmit, initial, }: EmailStepProps): import("react").JSX.Element;
+export declare function EmailStep({ words, field }: EmailStepProps): import("react").JSX.Element;
 export interface NameStepProps {
     words: WelcomeWords;
-    onSubmit: (name: string) => void;
+    field: StepFieldState;
     onChangeEmail: () => void;
 }
 /** The name asked of a visitor the Skips App does not know, with the way back to change a mistyped email. */
-export declare function NameStep({ words, onSubmit, onChangeEmail, }: NameStepProps): import("react").JSX.Element;
+export declare function NameStep({ words, field, onChangeEmail }: NameStepProps): import("react").JSX.Element;
 /**
  * The code emailed to the visitor, one digit to a box over one real field, so typing, deleting, a paste and the
  * phone's own code suggestion work as in any field. The chat mounts it afresh for each code that goes out.
@@ -61,12 +72,13 @@ export interface CodeStepProps {
     length: number;
     noMatch: boolean;
     ranOut: boolean;
-    resendAfterMs?: number;
+    entry: CodeEntry;
+    secondsLeft: number;
     onSubmit: (code: string) => void;
     onResend: () => void;
     onChangeEmail: () => void;
 }
-export declare function CodeStep({ words, length, noMatch, ranOut, resendAfterMs, onSubmit, onResend, onChangeEmail, }: CodeStepProps): import("react").JSX.Element;
+export declare function CodeStep({ words, length, noMatch, ranOut, entry, secondsLeft, onSubmit, onResend, onChangeEmail, }: CodeStepProps): import("react").JSX.Element;
 export declare const DOT_REST_OPACITY = 0.35;
 export declare const DOT_RISE = 3;
 export declare const DOT_STILL_OPACITY = 0.6;
@@ -76,3 +88,4 @@ export interface SkipTypingProps {
     skipMark: ImageSourcePropType;
 }
 export declare function SkipTyping({ label, skipMark }: SkipTypingProps): import("react").JSX.Element;
+export {};

package/chat/{components → ui}/Welcome.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useId, useState } from 'react';
 import { AccessibilityInfo, ActivityIndicator, Animated, Image, Pressable, Text, TextInput, View } from 'react-native';
-import { DOT_CYCLE_MS } from "../skipTyping.js";
-import { codeDigits, completesCode, EMAIL_MAX_LENGTH, givenEmail, givenName, NAME_MAX_LENGTH, RESEND_AFTER_MS, resendClock, } from "../welcome.js";
+import { DOT_CYCLE_MS } from "../helpers/skipTyping.js";
+import { EMAIL_MAX_LENGTH, NAME_MAX_LENGTH, resendClock } from "../helpers/welcome.js";
 import { useColor } from "./parts.js";
 const PILL_LOOK = {
     solid: { box: 'bg-action active:bg-action-pressed', text: 'text-action-ink' },
-    stroked: { box: 'border border-line-control active:bg-muted', text: 'text-ink' },
+    stroked: { box: 'border border-line-control bg-surface active:bg-muted', text: 'text-ink' },
     flat: { box: 'active:bg-muted', text: 'text-ink' },
 };
-function Pill({ label, look = 'solid', disabled = false, loading = false, onPress, }) {
+/** The chat's button, in the brand's pill. */
+export function Pill({ label, look = 'solid', disabled = false, loading = false, onPress, }) {
     const ink = useColor(look === 'solid' ? 'action-ink' : 'ink');
     return (_jsxs(Pressable, { role: "button", accessibilityLabel: label, disabled: disabled || loading, "aria-busy": loading, onPress: onPress, className: `h-control-compact flex-row items-center justify-center gap-2 rounded-pill px-5 ${PILL_LOOK[look].box} ${disabled ? 'opacity-40' : ''}`, children: [loading ? _jsx(ActivityIndicator, { "aria-hidden": true, size: "small", color: ink }) : null, _jsx(Text, { className: `font-ui text-sm font-semibold ${PILL_LOOK[look].text}`, children: label })] }));
 }
@@ -28,58 +29,31 @@ export function Choices({ items, question, sending, holding = false, failed, wor
 function describedBy(errorId) {
     return errorId === undefined ? {} : { 'aria-describedby': errorId };
 }
-// One thing asked of a new visitor: a field in focus and its button. What is typed is checked here and handed on.
-function StepField({ label, error, submitLabel, input, usable, onSubmit, initial = '', aside }) {
-    const [typed, setTyped] = useState(initial);
-    const [refused, setRefused] = useState(false);
+// One thing asked of a new visitor: a field in focus and its button.
+function StepField({ label, error, submitLabel, input, field, aside }) {
     const errorId = useId();
     const placeholder = useColor('ink-placeholder');
-    const submit = () => {
-        const value = usable(typed);
-        setRefused(value === null);
-        if (value !== null)
-            onSubmit(value);
-    };
-    return (_jsxs(View, { className: "w-full max-w-[360px] gap-2 self-center", children: [_jsx(Text, { className: "font-ui text-sm font-medium text-ink", children: label }), _jsx(TextInput, { autoFocus: true, value: typed, onChangeText: setTyped, onSubmitEditing: submit, accessibilityLabel: label, "aria-invalid": refused, ...describedBy(refused ? errorId : undefined), placeholderTextColor: placeholder, className: `h-control rounded-control border bg-surface px-3 font-ui text-md text-ink ${refused ? 'border-error-ink' : 'border-line-control'}`, ...input }), refused ? (_jsx(Text, { nativeID: errorId, role: "alert", className: "font-ui text-sm text-error-ink", children: error })) : null, aside ? (_jsx(View, { className: "self-center", children: _jsx(Pill, { label: aside.label, look: "flat", onPress: aside.onPress }) })) : null, _jsx(View, { className: "self-center", children: _jsx(Pill, { label: submitLabel, onPress: submit }) })] }));
+    return (_jsxs(View, { className: "w-full max-w-[360px] gap-2 self-center", children: [_jsx(Text, { className: "font-ui text-sm font-medium text-ink", children: label }), _jsx(TextInput, { autoFocus: true, value: field.typed, onChangeText: field.onChangeText, onSubmitEditing: field.submit, accessibilityLabel: label, "aria-invalid": field.refused, ...describedBy(field.refused ? errorId : undefined), placeholderTextColor: placeholder, className: `h-control rounded-control border bg-surface px-3 font-ui text-md text-ink ${field.refused ? 'border-error-ink' : 'border-line-control'}`, ...input }), field.refused ? (_jsx(Text, { nativeID: errorId, role: "alert", className: "font-ui text-sm text-error-ink", children: error })) : null, aside ? (_jsx(View, { className: "self-center", children: _jsx(Pill, { label: aside.label, look: "flat", onPress: aside.onPress }) })) : null, _jsx(View, { className: "self-center", children: _jsx(Pill, { label: submitLabel, onPress: field.submit }) })] }));
 }
 /** The email asked for after Continue here, and again for a visitor changing it. */
-export function EmailStep({ words, onSubmit, initial, }) {
-    return (_jsx(StepField, { label: words.emailLabel, error: words.emailError, submitLabel: words.emailSubmit, input: { autoComplete: 'email', inputMode: 'email', maxLength: EMAIL_MAX_LENGTH, autoCapitalize: 'none' }, usable: givenEmail, onSubmit: onSubmit, ...(initial === undefined ? {} : { initial }) }));
+export function EmailStep({ words, field }) {
+    return (_jsx(StepField, { label: words.emailLabel, error: words.emailError, submitLabel: words.emailSubmit, input: { autoComplete: 'email', inputMode: 'email', maxLength: EMAIL_MAX_LENGTH, autoCapitalize: 'none' }, field: field }));
 }
 /** The name asked of a visitor the Skips App does not know, with the way back to change a mistyped email. */
-export function NameStep({ words, onSubmit, onChangeEmail, }) {
-    return (_jsx(StepField, { label: words.nameLabel, error: words.nameError, submitLabel: words.nameSubmit, input: { autoComplete: 'name', maxLength: NAME_MAX_LENGTH, autoCapitalize: 'words' }, usable: givenName, onSubmit: onSubmit, aside: { label: words.changeEmail, onPress: onChangeEmail } }));
+export function NameStep({ words, field, onChangeEmail }) {
+    return (_jsx(StepField, { label: words.nameLabel, error: words.nameError, submitLabel: words.nameSubmit, input: { autoComplete: 'name', maxLength: NAME_MAX_LENGTH, autoCapitalize: 'words' }, field: field, aside: { label: words.changeEmail, onPress: onChangeEmail } }));
 }
-const TICK_MS = 250;
-function NewCode({ waitMs, words, onResend }) {
-    const [secondsLeft, setSecondsLeft] = useState(Math.ceil(waitMs / 1000));
-    useEffect(() => {
-        const end = Date.now() + waitMs;
-        const timer = setInterval(() => {
-            const left = Math.max(0, Math.ceil((end - Date.now()) / 1000));
-            setSecondsLeft(left);
-            if (left === 0)
-                clearInterval(timer);
-        }, TICK_MS);
-        return () => {
-            clearInterval(timer);
-        };
-    }, [waitMs]);
+function NewCode({ secondsLeft, words, onResend }) {
     return (_jsxs(_Fragment, { children: [_jsx(Pill, { label: words.resend, look: "flat", disabled: secondsLeft > 0, onPress: onResend }), secondsLeft > 0 ? (_jsx(Text, { role: "timer", accessibilityLabel: words.resendWait, className: "font-ui text-sm text-ink-secondary", children: resendClock(secondsLeft) })) : null] }));
 }
-export function CodeStep({ words, length, noMatch, ranOut, resendAfterMs = RESEND_AFTER_MS, onSubmit, onResend, onChangeEmail, }) {
-    const [code, setCode] = useState('');
+export function CodeStep({ words, length, noMatch, ranOut, entry, secondsLeft, onSubmit, onResend, onChangeEmail, }) {
+    const { code } = entry;
     const [focused, setFocused] = useState(false);
     const errorId = useId();
     const error = ranOut ? words.codeRanOut : noMatch ? words.codeNoMatch : null;
     // The box the next digit goes in, or the last once the code is whole.
     const nextBox = Math.min(code.length, length - 1);
-    return (_jsxs(View, { className: "w-full max-w-[360px] items-center gap-3 self-center", children: [_jsx(Text, { className: "font-ui text-sm font-medium text-ink", children: words.codeLabel }), _jsxs(View, { className: "relative", children: [_jsx(View, { "aria-hidden": true, className: "flex-row gap-2", children: Array.from({ length }, (_, box) => (_jsx(View, { className: `h-control w-11 items-center justify-center rounded-control border ${focused && box === nextBox ? 'border-focus' : error ? 'border-error-ink' : 'border-line-control'}`, children: _jsx(Text, { className: "font-ui text-xl font-medium text-ink", children: code[box] ?? '' }) }, box))) }), _jsx(TextInput, { autoFocus: true, value: code, onChangeText: (typed) => {
-                            const digits = codeDigits(typed, length);
-                            setCode(digits);
-                            if (completesCode(digits, code, length))
-                                onSubmit(digits);
-                        }, onFocus: () => {
+    return (_jsxs(View, { className: "w-full max-w-[360px] items-center gap-3 self-center", children: [_jsx(Text, { className: "font-ui text-sm font-medium text-ink", children: words.codeLabel }), _jsxs(View, { className: "relative", children: [_jsx(View, { "aria-hidden": true, className: "flex-row gap-2", children: Array.from({ length }, (_, box) => (_jsx(View, { className: `h-control w-11 items-center justify-center rounded-control border ${focused && box === nextBox ? 'border-focus' : error ? 'border-error-ink' : 'border-line-control'}`, children: _jsx(Text, { className: "font-ui text-xl font-medium text-ink", children: code[box] ?? '' }) }, box))) }), _jsx(TextInput, { autoFocus: true, value: code, onChangeText: entry.onChangeText, onFocus: () => {
                             setFocused(true);
                         }, onBlur: () => {
                             setFocused(false);
@@ -87,7 +61,7 @@ export function CodeStep({ words, length, noMatch, ranOut, resendAfterMs = RESEN
                         // The boxes draw the digits and the focus. Clear on iOS, which hands no taps to a view under 0.01 alpha.
                         // Unseen elsewhere: Android would draw a long press's selection over the boxes, and a web checker would read
                         // clear text as text with no contrast.
-                        className: "absolute inset-0 ios:text-transparent android:opacity-0 web:opacity-0" })] }), error ? (_jsx(Text, { nativeID: errorId, role: "alert", className: "text-center font-ui text-sm text-error-ink", children: error })) : null, _jsxs(View, { className: "flex-row flex-wrap items-center justify-center gap-2", children: [_jsx(Pill, { label: words.changeEmail, look: "flat", onPress: onChangeEmail }), _jsx(NewCode, { waitMs: resendAfterMs, words: words, onResend: onResend }), _jsx(Pill, { label: words.codeSubmit, disabled: code.length < length, onPress: () => {
+                        className: "absolute inset-0 ios:text-transparent android:opacity-0 web:opacity-0" })] }), error ? (_jsx(Text, { nativeID: errorId, role: "alert", className: "text-center font-ui text-sm text-error-ink", children: error })) : null, _jsxs(View, { className: "flex-row flex-wrap items-center justify-center gap-2", children: [_jsx(Pill, { label: words.changeEmail, look: "flat", onPress: onChangeEmail }), _jsx(NewCode, { secondsLeft: secondsLeft, words: words, onResend: onResend }), _jsx(Pill, { label: words.codeSubmit, disabled: code.length < length, onPress: () => {
                             onSubmit(code);
                         } })] })] }));
 }

package/chat/ui/index.d.ts

@@ -0,0 +1,5 @@
+export { Conversation, type ConversationProps, type LoadState } from './Conversation.tsx';
+export { Bubble, type BubbleProps } from './Bubble.tsx';
+export type { ChatIcon, ChatIconName, ChatWords } from './parts.ts';
+export { Choices, CodeStep, EmailStep, NameStep, Pill, SkipTyping, WelcomeChoice, type PillProps, type WelcomeWords, } from './Welcome.tsx';
+export { MedicationCheck, STOPPED_REASON_MAX_LENGTH, type CheckInWords, type MedicationAnswer, type MedicationCheckProps, } from './CheckIn.tsx';

package/chat/ui/index.js

@@ -0,0 +1,4 @@
+export { Conversation } from "./Conversation.js";
+export { Bubble } from "./Bubble.js";
+export { Choices, CodeStep, EmailStep, NameStep, Pill, SkipTyping, WelcomeChoice, } from "./Welcome.js";
+export { MedicationCheck, STOPPED_REASON_MAX_LENGTH, } from "./CheckIn.js";

package/chat/{components → ui}/parts.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 /** The icons the chat draws, from the brand's interface icons, which each app already draws. */
-export type ChatIconName = 'attach' | 'arrow-right' | 'file' | 'close';
+export type ChatIconName = 'attach' | 'arrow-right' | 'file' | 'close' | 'thumbs-up' | 'repeat' | 'copy-plus';
 export interface ChatIconProps {
     name: ChatIconName;
     color: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joinskips/brand",
-  "version": "9.0.0-develop.146",
+  "version": "9.0.0-develop.148",
   "description": "Skips design tokens, Onest, logos, favicons, interface icons, member pictures and app icons.",
   "license": "UNLICENSED",
   "homepage": "https://brand.joinskips.com",
@@ -13,6 +13,18 @@
       "types": "./chat/index.d.ts",
       "default": "./chat/index.js"
     },
+    "./chat/ui": {
+      "types": "./chat/ui/index.d.ts",
+      "default": "./chat/ui/index.js"
+    },
+    "./chat/hooks": {
+      "types": "./chat/hooks/index.d.ts",
+      "default": "./chat/hooks/index.js"
+    },
+    "./chat/helpers": {
+      "types": "./chat/helpers/index.d.ts",
+      "default": "./chat/helpers/index.js"
+    },
     "./ui": {
       "types": "./ui/index.d.ts",
       "default": "./ui/index.js"