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

package/chat/chat/SkipsChat.d.ts

@@ -0,0 +1,36 @@
+import type { ImageSourcePropType } from 'react-native';
+import { type PickedFile, type TypingTimes, type WelcomeTypingTimes } from '../helpers/index.ts';
+import type { ChatIcon, ChatWords } from '../ui/parts.ts';
+import { type WelcomeWords } from '../ui/Welcome.tsx';
+import { type SkipsChatOptions } from './useSkipsChat.ts';
+export interface SkipsChatWords extends ChatWords {
+    thread: string;
+    welcome: WelcomeWords;
+    welcomeText: string;
+    emailText: string;
+    nameText: string;
+    codeText: (email: string) => string;
+    unreachable: string;
+    tryAgain: string;
+}
+export interface SkipsChatWelcome {
+    verifyUrl: string;
+    onLogIn: (line: string) => void;
+    codeNote?: string | undefined;
+    resendAfterMs?: number | undefined;
+    typing?: WelcomeTypingTimes | undefined;
+}
+export interface SkipsChatProps extends Omit<SkipsChatOptions, 'verifyUrl'> {
+    welcome?: SkipsChatWelcome | undefined;
+    words: SkipsChatWords;
+    Icon: ChatIcon;
+    skipMark: ImageSourcePropType;
+    skipUserId: number | null;
+    typingTimes?: TypingTimes | undefined;
+    pickFile?: (() => Promise<PickedFile | null>) | undefined;
+    keyboardOffset?: number | undefined;
+    bottomInset?: number | undefined;
+    draft?: string | undefined;
+}
+/** The one Skips chat: the welcome for a new visitor, the conversation, Skip's questions and dots, and the box. */
+export declare function SkipsChat({ welcome, words, Icon, skipMark, skipUserId, typingTimes, pickFile, keyboardOffset, bottomInset, draft, ...options }: SkipsChatProps): import("react").JSX.Element;

package/chat/chat/SkipsChat.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text, View } from 'react-native';
+import { givenEmail, givenName, RESEND_AFTER_MS, } from "../helpers/index.js";
+import { useCodeEntry, useComposer, useResendCountdown, useStepField, useTypingCue, useWelcomeTyping, } from "../hooks/index.js";
+import { Bubble } from "../ui/Bubble.js";
+import { Conversation, Unsent } from "../ui/Conversation.js";
+import { CodeStep, EmailStep, NameStep, Pill, SkipTyping, WelcomeChoice } from "../ui/Welcome.js";
+import { CODE_LENGTH } from "./verify.js";
+import { useSkipsChat, } from "./useSkipsChat.js";
+/** The one Skips chat: the welcome for a new visitor, the conversation, Skip's questions and dots, and the box. */
+export function SkipsChat({ welcome, words, Icon, skipMark, skipUserId, typingTimes, pickFile, keyboardOffset, bottomInset, draft = '', ...options }) {
+    const chat = useSkipsChat({ ...options, verifyUrl: welcome?.verifyUrl });
+    const { thread, status, welcome: way } = chat;
+    const cue = useTypingCue(thread.messages.filter((message) => !message.mine).map((message) => message.id), chat.skipsTyping, typingTimes);
+    const welcomeTyping = useWelcomeTyping(way?.step ?? null, welcome?.typing);
+    const composer = useComposer({
+        onSend: (text, picked) => {
+            chat.stillHere();
+            void chat.send(text, picked);
+        },
+        onTyped: (text) => {
+            chat.stillHere();
+            chat.typed(text);
+        },
+        ...(pickFile ? { pickFile } : {}),
+        initialText: draft,
+    });
+    // The visitor's first line stays where they wrote it, above the welcome. Once they are through, it is the
+    // conversation's first line.
+    const opening = way?.step === 'through'
+        ? thread.messages.find((message) => message.id === way.lineId || message.localId === way.lineId)
+        : undefined;
+    const retry = (id) => {
+        for (const failed of thread.messages)
+            if (failed.id === id)
+                void chat.retry(failed);
+    };
+    const hidden = new Set(cue.held);
+    if (opening)
+        hidden.add(opening.id);
+    const load = status === 'starting' && way === null && thread.messages.length === 0 ? 'loading' : 'ready';
+    return (_jsx(View, { className: "flex-1", 
+        // A tap anywhere in the chat is the visitor still being there. Asked on the way down, it takes nothing over.
+        onStartShouldSetResponderCapture: () => {
+            chat.stillHere();
+            return false;
+        }, children: _jsx(Conversation, { thread: thread, load: load, feedDown: chat.reconnecting, typists: [], skipUserId: skipUserId, composer: composer, composerClosed: status !== 'ready' || (way !== null && way.step !== 'through'), holding: cue.dots, onRetry: retry, onLoadOlder: () => void chat.loadOlder(), onReload: chat.tryAgain, keyboardOffset: keyboardOffset, bottomInset: bottomInset, words: words, Icon: Icon, skipMark: skipMark, label: words.thread, hidden: hidden, choices: {
+                sending: chat.choosing,
+                failed: chat.choiceFailed,
+                holding: cue.dots,
+                words: words.welcome,
+                onChoose: (question, answer) => void chat.choose(question, answer),
+            }, lead: way !== null && welcome !== undefined ? (_jsx(WelcomeLead, { way: way, opening: opening, welcome: welcome, words: words, Icon: Icon, typing: welcomeTyping, holding: cue.dots, onRetry: retry, chat: chat })) : null, trail: _jsxs(_Fragment, { children: [cue.dots || welcomeTyping !== null ? _jsx(SkipTyping, { label: words.welcome.typing, skipMark: skipMark }) : null, status === 'unreachable' || way?.unreachable === true ? (_jsxs(View, { role: "alert", className: "flex-row items-center gap-3", children: [_jsx(Text, { className: "font-ui text-sm text-error-ink", children: words.unreachable }), status === 'unreachable' ? _jsx(Pill, { label: words.tryAgain, onPress: chat.tryAgain }) : null] })) : null] }) }) }));
+}
+// The welcome, line by line: each step's line, and its field or buttons, show once Skip has typed it.
+function WelcomeLead({ way, opening, welcome, words, Icon, typing, holding, onRetry, chat }) {
+    const typed = (step) => typing !== step;
+    const skip = (text) => _jsx(SkipLine, { text: text, label: words.skip });
+    const asked = way.step === 'code' || way.step === 'name' || (way.step === 'through' && !way.signedIn);
+    return (_jsxs(View, { className: "gap-4 pb-4", children: [opening && opening.delivery !== 'sent' ? (_jsx(Unsent, { message: opening, words: words, onRetry: onRetry, Icon: Icon, holding: holding })) : (_jsxs(View, { className: "items-end gap-1 self-end", children: [_jsx(Bubble, { mine: true, text: opening?.text ?? way.line }), _jsx(LineLabel, { text: opening ? `${words.you} · ${words.messageTime(opening.sentAt)}` : words.you })] })), typed('choosing') ? skip(words.welcomeText) : null, way.step === 'choosing' ? (typed('choosing') ? (_jsx(WelcomeChoice, { words: words.welcome, onLogIn: () => {
+                    welcome.onLogIn(way.line);
+                }, onContinueHere: () => {
+                    chat.continueHere(way.line);
+                } })) : null) : !(way.step === 'through' && way.signedIn) && typed('email') ? (skip(words.emailText)) : null, way.step === 'email' && typed('email') ? (_jsx(EmailField, { initial: way.email ?? '', words: words.welcome, onSubmit: (email) => {
+                    void chat.sendCode(email);
+                } })) : null, asked && typed('code') ? (_jsxs(_Fragment, { children: [skip(words.codeText(way.email)), welcome.codeNote === undefined ? null : skip(welcome.codeNote)] })) : null, way.step === 'code' && typed('code') ? (_jsx(CodeField, { step: way, words: words.welcome, 
+                // No new code has gone out since the one that ran out, so there is no wait to sit through.
+                resendAfterMs: way.ranOut ? 0 : (welcome.resendAfterMs ?? RESEND_AFTER_MS), chat: chat }, way.codes)) : null, (way.step === 'name' || (way.step === 'through' && way.named)) && typed('name') ? skip(words.nameText) : null, way.step === 'name' && typed('name') ? _jsx(NameField, { step: way, words: words.welcome, chat: chat }) : null] }));
+}
+function SkipLine({ text, label }) {
+    return (_jsxs(View, { className: "max-w-[82%] items-start gap-1 self-start", children: [_jsx(Bubble, { text: text }), _jsx(LineLabel, { text: label })] }));
+}
+// Who said a line of the welcome, as the thread names each run of lines.
+function LineLabel({ text }) {
+    return _jsx(Text, { className: "px-1 font-ui text-xs text-ink-secondary", children: text });
+}
+function EmailField({ initial, words, onSubmit }) {
+    return _jsx(EmailStep, { words: words, field: useStepField(givenEmail, onSubmit, initial) });
+}
+function NameField({ step, words, chat }) {
+    const field = useStepField(givenName, (name) => {
+        void chat.giveName(step, name);
+    });
+    return (_jsx(NameStep, { words: words, field: field, onChangeEmail: () => {
+            chat.changeEmail(step);
+        } }));
+}
+// Mounted afresh for each code that goes out.
+function CodeField({ step, words, resendAfterMs, chat }) {
+    const onSubmit = (code) => {
+        void chat.checkCode(step, code);
+    };
+    return (_jsx(CodeStep, { words: words, length: CODE_LENGTH, noMatch: step.noMatch, ranOut: step.ranOut, entry: useCodeEntry(CODE_LENGTH, onSubmit), secondsLeft: useResendCountdown(resendAfterMs), onSubmit: onSubmit, onResend: () => {
+            void chat.sendCode(step.email);
+        }, onChangeEmail: () => {
+            chat.changeEmail(step);
+        } }));
+}

package/chat/chat/client.d.ts

@@ -0,0 +1,48 @@
+import { type ChatMessage, type ChoiceItem, type PickedFile, type RawMessage } from '../helpers/index.ts';
+export interface ChatClientOptions {
+    baseUrl: string;
+    inboxIdentifier: string;
+    careTeamName: string;
+    fetchFn?: typeof fetch;
+}
+export interface ContactSession {
+    sourceId: string;
+    pubsubToken: string;
+    inboxIdentifier?: string;
+}
+export interface Conversation {
+    id: number;
+}
+export declare const WEBSITE_CHAT_ATTRIBUTE = "website_chat";
+export declare class ChatApiError extends Error {
+    readonly status: number;
+    constructor(status: number, detail: string);
+}
+export declare function isRecord(value: unknown): value is Record<string, unknown>;
+export declare function isInbox(value: unknown): value is string;
+export declare function contactSessionFrom(value: unknown): ContactSession | null;
+/**
+ * The visitor's view of a Skips App message, or null for one they never see. A care team member's photo shows only
+ * from a secure web address, so the page never loads one over plain http, and their name stays without it.
+ */
+export declare function visitorView(raw: RawMessage, careTeamName: string): ChatMessage | null;
+export declare class ChatClient {
+    private readonly baseUrl;
+    private readonly inbox;
+    private readonly careTeamName;
+    private readonly fetchFn;
+    constructor({ baseUrl, inboxIdentifier, careTeamName, fetchFn }: ChatClientOptions);
+    private messageFrom;
+    private url;
+    private inboxOf;
+    private request;
+    createContact(): Promise<ContactSession>;
+    /** `startingPage` is the page the chat was opened on, which the Skips App shows the care team as the conversation's referer. */
+    createConversation(contact: ContactSession, startingPage?: string): Promise<Conversation>;
+    choose(contact: ContactSession, conversation: Conversation, question: number, answer: ChoiceItem): Promise<ChatMessage>;
+    private conversationPath;
+    sendMessage(contact: ContactSession, conversation: Conversation, text: string, picked?: PickedFile | null): Promise<ChatMessage>;
+    listMessages(contact: ContactSession, conversation: Conversation, before?: number): Promise<ChatMessage[]>;
+    typing(contact: ContactSession, conversation: Conversation, on: boolean): Promise<void>;
+    seen(contact: ContactSession, conversation: Conversation): Promise<void>;
+}

package/chat/chat/client.js

@@ -0,0 +1,173 @@
+// The Skips App's public Client API, the part of it a visitor's browser may call with
+// no secret: make a contact, open a conversation, send and list messages. The inbox
+// identifier is public by design. Plain fetch, no framework, so a native app can use it.
+import { isRawMessage, toChatMessage, } from "../helpers/index.js";
+// The conversation attribute the chat sets on each conversation it opens, so Skips asks a question with buttons only
+// where they can be pressed.
+export const WEBSITE_CHAT_ATTRIBUTE = 'website_chat';
+export class ChatApiError extends Error {
+    status;
+    constructor(status, detail) {
+        super(`Skips App answered ${String(status)}: ${detail}`);
+        this.name = 'ChatApiError';
+        this.status = status;
+    }
+}
+export function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+// An inbox's identifier as a contact can carry it.
+export function isInbox(value) {
+    return typeof value === 'string' && value.length > 0;
+}
+// An inbox that is named and cannot be used is not left out: the contact is in it, so the built-in one is wrong.
+function isContactResponse(value) {
+    return (isRecord(value) &&
+        typeof value.source_id === 'string' &&
+        typeof value.pubsub_token === 'string' &&
+        (value.inbox_identifier === undefined || isInbox(value.inbox_identifier)));
+}
+// The contact as the Skips App answers with it, from its own route or by way of the code service.
+export function contactSessionFrom(value) {
+    if (!isContactResponse(value))
+        return null;
+    const contact = { sourceId: value.source_id, pubsubToken: value.pubsub_token };
+    return value.inbox_identifier === undefined
+        ? contact
+        : { ...contact, inboxIdentifier: value.inbox_identifier };
+}
+function isConversationResponse(value) {
+    return isRecord(value) && typeof value.id === 'number';
+}
+function isSecureAddress(address) {
+    try {
+        return new URL(address).protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * The visitor's view of a Skips App message, or null for one they never see. A care team member's photo shows only
+ * from a secure web address, so the page never loads one over plain http, and their name stays without it.
+ */
+export function visitorView(raw, careTeamName) {
+    const message = toChatMessage(raw, careTeamName);
+    const photo = message?.author?.avatarUrl;
+    if (!message?.author || photo === null || photo === undefined || isSecureAddress(photo)) {
+        return message;
+    }
+    return { ...message, author: { ...message.author, avatarUrl: null } };
+}
+export class ChatClient {
+    baseUrl;
+    inbox;
+    careTeamName;
+    fetchFn;
+    constructor({ baseUrl, inboxIdentifier, careTeamName, fetchFn = fetch }) {
+        this.baseUrl = baseUrl.replace(/\/$/, '');
+        this.inbox = inboxIdentifier;
+        this.careTeamName = careTeamName;
+        this.fetchFn = fetchFn;
+    }
+    // A message the Skips App answered with, as the visitor sees it. One it stored for the visitor is never hidden.
+    messageFrom(body) {
+        const message = isRawMessage(body) ? visitorView(body, this.careTeamName) : null;
+        if (!message)
+            throw new ChatApiError(200, 'unexpected message shape');
+        return message;
+    }
+    url(inbox, path) {
+        return `${this.baseUrl}/public/api/v1/inboxes/${inbox}${path}`;
+    }
+    // A contact's own routes are in the inbox the contact was made in.
+    inboxOf(contact) {
+        return contact.inboxIdentifier ?? this.inbox;
+    }
+    async request(inbox, path, init = {}) {
+        const headers = new Headers(init.headers);
+        // A photo goes as a form, whose boundary fetch writes into the type itself.
+        if (!(init.body instanceof FormData))
+            headers.set('Content-Type', 'application/json');
+        headers.set('Accept', 'application/json');
+        // Called detached: window.fetch throws when any other object is its this.
+        const { fetchFn } = this;
+        const response = await fetchFn(this.url(inbox, path), { ...init, headers });
+        const body = await response.json().catch(() => null);
+        if (!response.ok) {
+            const detail = isRecord(body) && typeof body.error === 'string' ? body.error : response.statusText;
+            throw new ChatApiError(response.status, detail);
+        }
+        return body;
+    }
+    async createContact() {
+        const contact = contactSessionFrom(await this.request(this.inbox, '/contacts', {
+            method: 'POST',
+            body: JSON.stringify({}),
+        }));
+        if (!contact)
+            throw new ChatApiError(200, 'unexpected contact shape');
+        return contact;
+    }
+    /** `startingPage` is the page the chat was opened on, which the Skips App shows the care team as the conversation's referer. */
+    async createConversation(contact, startingPage) {
+        // Skips asks a question with buttons only in a conversation the website chat opened.
+        const conversation = startingPage
+            ? { referer_url: startingPage, custom_attributes: { [WEBSITE_CHAT_ATTRIBUTE]: true } }
+            : {};
+        const body = await this.request(this.inboxOf(contact), `/contacts/${contact.sourceId}/conversations`, { method: 'POST', body: JSON.stringify(conversation) });
+        if (!isConversationResponse(body))
+            throw new ChatApiError(200, 'unexpected conversation shape');
+        return { id: body.id };
+    }
+    // The visitor's answer to a question from Skips, kept on the question itself, where a reload finds it.
+    async choose(contact, conversation, question, answer) {
+        const body = await this.request(this.inboxOf(contact), `/contacts/${contact.sourceId}/conversations/${String(conversation.id)}/messages/${String(question)}`, {
+            method: 'PATCH',
+            body: JSON.stringify({
+                submitted_values: [{ title: answer.title, value: answer.value }],
+            }),
+        });
+        return this.messageFrom(body);
+    }
+    conversationPath(contact, conversation, path) {
+        return `/contacts/${contact.sourceId}/conversations/${String(conversation.id)}${path}`;
+    }
+    // A line, a photo or PDF, or both. The description types the JSON body only: the form's attachments[] is what
+    // the Skips App's Chatwoot takes for files (app/controllers/public/api/v1/inboxes/messages_controller.rb).
+    async sendMessage(contact, conversation, text, picked = null) {
+        let body = JSON.stringify({ content: text });
+        if (picked) {
+            if (!picked.file)
+                throw new ChatApiError(0, 'picked file has no contents');
+            const form = new FormData();
+            form.append('content', text);
+            form.append('attachments[]', picked.file, picked.name);
+            body = form;
+        }
+        const answer = await this.request(this.inboxOf(contact), this.conversationPath(contact, conversation, '/messages'), { method: 'POST', body });
+        return this.messageFrom(answer);
+    }
+    // The newest page, or the page before a stored message.
+    async listMessages(contact, conversation, before) {
+        const query = before === undefined ? '' : `?before=${String(before)}`;
+        const body = await this.request(this.inboxOf(contact), this.conversationPath(contact, conversation, `/messages${query}`));
+        if (!Array.isArray(body))
+            throw new ChatApiError(200, 'unexpected messages shape');
+        return body.filter(isRawMessage).flatMap((raw) => visitorView(raw, this.careTeamName) ?? []);
+    }
+    // Whether the visitor is typing, for the care team.
+    async typing(contact, conversation, on) {
+        const status = { typing_status: on ? 'on' : 'off' };
+        await this.request(this.inboxOf(contact), this.conversationPath(contact, conversation, '/toggle_typing'), {
+            method: 'POST',
+            body: JSON.stringify(status),
+        });
+    }
+    // The visitor has read the conversation up to now.
+    async seen(contact, conversation) {
+        await this.request(this.inboxOf(contact), this.conversationPath(contact, conversation, '/update_last_seen'), {
+            method: 'POST',
+        });
+    }
+}

package/chat/chat/connection.d.ts

@@ -0,0 +1,4 @@
+export { ChatApiError, ChatClient, WEBSITE_CHAT_ATTRIBUTE, type ContactSession } from './client.ts';
+export { clearSession, loadReadThrough, loadSession, saveReadThrough, saveSession, SESSION_IDLE_MS, sessionEndsAt, type ChatSession, type SessionStore, } from './session.ts';
+export { platformSocket, platformStore } from './platform.ts';
+export { CODE_LENGTH } from './verify.ts';

package/chat/chat/connection.js

@@ -0,0 +1,6 @@
+// The chat's Skips App connection without its screen, for code that runs where React Native does not, as an app's
+// Node tests and a header that only counts replies do.
+export { ChatApiError, ChatClient, WEBSITE_CHAT_ATTRIBUTE } from "./client.js";
+export { clearSession, loadReadThrough, loadSession, saveReadThrough, saveSession, SESSION_IDLE_MS, sessionEndsAt, } from "./session.js";
+export { platformSocket, platformStore } from "./platform.js";
+export { CODE_LENGTH } from "./verify.js";

package/chat/chat/generated/skips-app/index.d.ts

@@ -0,0 +1 @@
+export type { AccountId, AgentBotId, BadRequestError, ClientOptions, ContactSortParam, ConversationId, ConversationUuid, CreateAContactData, CreateAContactError, CreateAContactErrors, CreateAContactResponse, CreateAContactResponses, CreateAConversationData, CreateAConversationError, CreateAConversationErrors, CreateAConversationResponse, CreateAConversationResponses, CreateAMessageData, CreateAMessageError, CreateAMessageErrors, CreateAMessageResponse, CreateAMessageResponses, CustomFilterId, HookId, InboxId, MessageId, Page, PlatformUserId, PortalSlug, PublicContact, PublicContactCreateUpdatePayload, PublicContactIdentifier, PublicContactRecord, PublicConversation, PublicConversationCreatePayload, PublicInbox, PublicInboxIdentifier, PublicMessage, PublicMessageAttachment, PublicMessageCreatePayload, PublicMessageSender, PublicMessageUpdatePayload, ReportMetric, ReportType, RequestError, SourceId, TeamId, ToggleTypingStatusData, ToggleTypingStatusError, ToggleTypingStatusErrors, ToggleTypingStatusResponses, UpdateAMessageData, UpdateAMessageError, UpdateAMessageErrors, UpdateAMessageResponse, UpdateAMessageResponses, WebhookId } from './types.gen';

package/chat/chat/generated/skips-app/index.js

@@ -0,0 +1,2 @@
+// This file is auto-generated by @hey-api/openapi-ts
+export {};