@usechatting/react-native 0.1.0

package/dist/chatting-push-registration.d.ts

@@ -0,0 +1,20 @@
+import type { ChattingPushRegistrationInput, ChattingSessionState } from "./chatting-types";
+import type { ChattingTransport } from "./chatting-transport";
+export declare function registerChattingPushToken(input: {
+    siteId: string;
+    state: ChattingSessionState;
+    transport: ChattingTransport;
+    registration: ChattingPushRegistrationInput;
+}): Promise<ChattingSessionState>;
+export declare function unregisterChattingPushToken(input: {
+    siteId: string;
+    state: ChattingSessionState;
+    transport: ChattingTransport;
+    pushToken?: string | null;
+}): Promise<ChattingSessionState>;
+export declare function syncChattingPushToken(input: {
+    siteId: string;
+    state: ChattingSessionState;
+    transport: ChattingTransport;
+}): Promise<ChattingSessionState>;
+export declare function clearConversationPushState(state: ChattingSessionState): ChattingSessionState;

package/dist/chatting-push-registration.js

@@ -0,0 +1,69 @@
+import { normalizeText } from "./chatting-utils";
+export async function registerChattingPushToken(input) {
+    const pushToken = requirePushToken(input.registration.pushToken);
+    const nextState = {
+        ...input.state,
+        pushToken,
+        pushPlatform: normalizeText(input.registration.platform),
+        pushAppId: normalizeText(input.registration.appId)
+    };
+    return syncChattingPushToken({
+        siteId: input.siteId,
+        state: nextState,
+        transport: input.transport
+    });
+}
+export async function unregisterChattingPushToken(input) {
+    const pushToken = normalizeText(input.pushToken) ?? normalizeText(input.state.pushToken);
+    if (!pushToken) {
+        return clearedPushState(input.state);
+    }
+    await input.transport.delete("/api/public/mobile-device", {
+        siteId: input.siteId,
+        sessionId: input.state.sessionId,
+        pushToken
+    });
+    return clearedPushState(input.state);
+}
+export async function syncChattingPushToken(input) {
+    const pushToken = normalizeText(input.state.pushToken);
+    if (!pushToken || !input.state.conversationId || input.state.pushTokenSyncedConversationId === input.state.conversationId) {
+        return input.state;
+    }
+    await input.transport.post("/api/public/mobile-device", {
+        siteId: input.siteId,
+        sessionId: input.state.sessionId,
+        conversationId: input.state.conversationId,
+        pushToken,
+        platform: input.state.pushPlatform ?? null,
+        appId: input.state.pushAppId ?? null
+    });
+    return {
+        ...input.state,
+        pushToken,
+        pushTokenSyncedConversationId: input.state.conversationId
+    };
+}
+export function clearConversationPushState(state) {
+    return {
+        ...state,
+        conversationId: null,
+        pushTokenSyncedConversationId: null
+    };
+}
+function clearedPushState(state) {
+    return {
+        ...state,
+        pushToken: null,
+        pushPlatform: null,
+        pushAppId: null,
+        pushTokenSyncedConversationId: null
+    };
+}
+function requirePushToken(value) {
+    const pushToken = normalizeText(value);
+    if (!pushToken) {
+        throw new Error("Push token is required.");
+    }
+    return pushToken;
+}

package/dist/chatting-screen-styles.d.ts

@@ -0,0 +1,146 @@
+export declare const styles: {
+    screen: {
+        flex: number;
+        backgroundColor: string;
+    };
+    header: {
+        padding: number;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+        backgroundColor: string;
+    };
+    title: {
+        fontSize: number;
+        fontWeight: string;
+        color: string;
+    };
+    subtitle: {
+        marginTop: number;
+        fontSize: number;
+        color: string;
+    };
+    scroll: {
+        flex: number;
+    };
+    content: {
+        padding: number;
+        gap: number;
+    };
+    banner: {
+        padding: number;
+        borderRadius: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+    };
+    bannerText: {
+        color: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    error: {
+        color: string;
+    };
+    row: {
+        flexDirection: string;
+        alignItems: string;
+    };
+    spacer: {
+        flex: number;
+        minWidth: number;
+    };
+    bubble: {
+        maxWidth: string;
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    userBubble: {
+        backgroundColor: string;
+    };
+    teamBubble: {
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+    };
+    typingBubble: {
+        opacity: number;
+    };
+    userText: {
+        color: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    teamText: {
+        color: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    meta: {
+        marginTop: number;
+        fontSize: number;
+        color: string;
+    };
+    faqCard: {
+        padding: number;
+        borderRadius: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        gap: number;
+    };
+    faqTitle: {
+        fontSize: number;
+        fontWeight: string;
+        color: string;
+    };
+    faqText: {
+        fontSize: number;
+        lineHeight: number;
+        color: string;
+    };
+    footer: {
+        gap: number;
+        padding: number;
+        borderTopWidth: number;
+        borderTopColor: string;
+        backgroundColor: string;
+    };
+    input: {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        backgroundColor: string;
+        color: string;
+    };
+    composer: {
+        minHeight: number;
+        maxHeight: number;
+        textAlignVertical: string;
+    };
+    actions: {
+        flexDirection: string;
+        gap: number;
+    };
+    button: {
+        flex: number;
+        borderRadius: number;
+        paddingVertical: number;
+        alignItems: string;
+        justifyContent: string;
+        backgroundColor: string;
+    };
+    secondaryButton: {
+        backgroundColor: string;
+    };
+    buttonText: {
+        color: string;
+        fontWeight: string;
+    };
+    secondaryButtonText: {
+        color: string;
+        fontWeight: string;
+    };
+};

package/dist/chatting-screen-styles.js

@@ -0,0 +1,32 @@
+import { StyleSheet } from "react-native";
+export const styles = StyleSheet.create({
+    screen: { flex: 1, backgroundColor: "#F8FAFC" },
+    header: { padding: 16, borderBottomWidth: 1, borderBottomColor: "#E2E8F0", backgroundColor: "#FFFFFF" },
+    title: { fontSize: 18, fontWeight: "700", color: "#0F172A" },
+    subtitle: { marginTop: 4, fontSize: 14, color: "#475569" },
+    scroll: { flex: 1 },
+    content: { padding: 16, gap: 12 },
+    banner: { padding: 12, borderRadius: 16, backgroundColor: "#FFFFFF", borderWidth: 1, borderColor: "#E2E8F0" },
+    bannerText: { color: "#334155", fontSize: 14, lineHeight: 20 },
+    error: { color: "#B91C1C" },
+    row: { flexDirection: "row", alignItems: "flex-end" },
+    spacer: { flex: 1, minWidth: 40 },
+    bubble: { maxWidth: "78%", borderRadius: 18, paddingHorizontal: 14, paddingVertical: 10 },
+    userBubble: { backgroundColor: "#2563EB" },
+    teamBubble: { backgroundColor: "#FFFFFF", borderWidth: 1, borderColor: "#E2E8F0" },
+    typingBubble: { opacity: 0.8 },
+    userText: { color: "#FFFFFF", fontSize: 15, lineHeight: 22 },
+    teamText: { color: "#0F172A", fontSize: 15, lineHeight: 22 },
+    meta: { marginTop: 4, fontSize: 12, color: "#94A3B8" },
+    faqCard: { padding: 12, borderRadius: 14, backgroundColor: "#FFFFFF", borderWidth: 1, borderColor: "#E2E8F0", gap: 4 },
+    faqTitle: { fontSize: 14, fontWeight: "700", color: "#0F172A" },
+    faqText: { fontSize: 13, lineHeight: 19, color: "#475569" },
+    footer: { gap: 12, padding: 16, borderTopWidth: 1, borderTopColor: "#E2E8F0", backgroundColor: "#FFFFFF" },
+    input: { borderWidth: 1, borderColor: "#CBD5E1", borderRadius: 14, paddingHorizontal: 12, paddingVertical: 10, backgroundColor: "#FFFFFF", color: "#0F172A" },
+    composer: { minHeight: 44, maxHeight: 120, textAlignVertical: "top" },
+    actions: { flexDirection: "row", gap: 12 },
+    button: { flex: 1, borderRadius: 14, paddingVertical: 12, alignItems: "center", justifyContent: "center", backgroundColor: "#2563EB" },
+    secondaryButton: { backgroundColor: "#EFF6FF" },
+    buttonText: { color: "#FFFFFF", fontWeight: "700" },
+    secondaryButtonText: { color: "#2563EB", fontWeight: "700" }
+});

package/dist/chatting-session-store.d.ts

@@ -0,0 +1,3 @@
+import type { ChattingKeyValueStorage, ChattingSessionStore } from "./chatting-types";
+export declare function createMemorySessionStore(): ChattingSessionStore;
+export declare function createKeyValueSessionStore(storage: ChattingKeyValueStorage, namespace: string): ChattingSessionStore;

package/dist/chatting-session-store.js

@@ -0,0 +1,34 @@
+export function createMemorySessionStore() {
+    let state = null;
+    return {
+        async load() {
+            return state;
+        },
+        async save(nextState) {
+            state = nextState;
+        },
+        async clear() {
+            state = null;
+        }
+    };
+}
+export function createKeyValueSessionStore(storage, namespace) {
+    const key = `chatting:${namespace}:session`;
+    return {
+        async load() {
+            const value = await storage.getItem(key);
+            return value ? JSON.parse(value) : null;
+        },
+        async save(state) {
+            await storage.setItem(key, JSON.stringify(state));
+        },
+        async clear() {
+            if (typeof storage.removeItem === "function") {
+                await storage.removeItem(key);
+            }
+            else {
+                await storage.setItem(key, "");
+            }
+        }
+    };
+}

package/dist/chatting-transport.d.ts

@@ -0,0 +1,13 @@
+export declare class ChattingTransport {
+    private readonly baseURL;
+    private readonly fetchImpl;
+    constructor(baseURL: string, fetchImpl: typeof fetch);
+    get<Response>(path: string, query: Record<string, string | null | undefined>): Promise<Response>;
+    post<Response>(path: string, body: Record<string, unknown>): Promise<Response>;
+    delete<Response>(path: string, body: Record<string, unknown>): Promise<Response>;
+    connectLive(path: string, query: Record<string, string | null | undefined>, input: {
+        onEvent(event: unknown): void;
+        onDisconnect?(error?: unknown): void;
+    }): Promise<() => void>;
+    private request;
+}

package/dist/chatting-transport.js

@@ -0,0 +1,63 @@
+import { connectChattingLiveStream } from "./chatting-live-stream";
+import { normalizeBaseURL, toErrorMessage } from "./chatting-utils";
+export class ChattingTransport {
+    baseURL;
+    fetchImpl;
+    constructor(baseURL, fetchImpl) {
+        this.baseURL = normalizeBaseURL(baseURL);
+        this.fetchImpl = fetchImpl;
+    }
+    async get(path, query) {
+        return this.request(path, { method: "GET", query });
+    }
+    async post(path, body) {
+        return this.request(path, { method: "POST", body });
+    }
+    async delete(path, body) {
+        return this.request(path, { method: "DELETE", body });
+    }
+    connectLive(path, query, input) {
+        return connectChattingLiveStream({
+            url: buildURL(this.baseURL, path, query),
+            fetchImpl: this.fetchImpl,
+            onEvent: input.onEvent,
+            onDisconnect: input.onDisconnect
+        });
+    }
+    async request(path, init) {
+        const response = await this.fetchImpl(buildURL(this.baseURL, path, init.query), {
+            method: init.method,
+            headers: {
+                Accept: "application/json",
+                ...(init.body ? { "Content-Type": "application/json" } : {})
+            },
+            body: init.body ? JSON.stringify(init.body) : undefined
+        });
+        const payload = await readPayload(response);
+        if (!response.ok) {
+            throw new Error(payload?.error ?? `Chatting request failed with ${response.status}.`);
+        }
+        return payload;
+    }
+}
+function buildURL(baseURL, path, query) {
+    const url = new URL(path, `${baseURL}/`);
+    for (const [key, value] of Object.entries(query ?? {})) {
+        if (value) {
+            url.searchParams.set(key, value);
+        }
+    }
+    return url.toString();
+}
+async function readPayload(response) {
+    const text = await response.text();
+    if (!text) {
+        return null;
+    }
+    try {
+        return JSON.parse(text);
+    }
+    catch (error) {
+        throw new Error(toErrorMessage(error));
+    }
+}

package/dist/chatting-types.d.ts

@@ -0,0 +1,108 @@
+export type ChattingSender = "user" | "team";
+export interface ChattingSessionState {
+    sessionId: string;
+    conversationId?: string | null;
+    email?: string | null;
+    pushToken?: string | null;
+    pushPlatform?: string | null;
+    pushAppId?: string | null;
+    pushTokenSyncedConversationId?: string | null;
+}
+export interface ChattingSessionStore {
+    load(): Promise<ChattingSessionState | null>;
+    save(state: ChattingSessionState): Promise<void>;
+    clear?(): Promise<void>;
+}
+export interface ChattingKeyValueStorage {
+    getItem(key: string): Promise<string | null>;
+    setItem(key: string, value: string): Promise<void>;
+    removeItem?(key: string): Promise<void>;
+}
+export interface ChattingVisitorContext {
+    pageUrl?: string | null;
+    referrer?: string | null;
+    timezone?: string | null;
+    locale?: string | null;
+    tags?: string[];
+    customFields?: Record<string, string>;
+}
+export interface ChattingVisitorProfile {
+    email: string;
+    name?: string | null;
+    phone?: string | null;
+    company?: string | null;
+    role?: string | null;
+    avatarUrl?: string | null;
+    status?: string | null;
+    tags?: string[];
+    customFields?: Record<string, string>;
+}
+export interface ChattingMessageAttachment {
+    id: string;
+    fileName: string;
+    contentType: string;
+    sizeBytes: number;
+    url: string;
+    isImage: boolean;
+}
+export interface ChattingMessage {
+    id: string;
+    content: string;
+    createdAt: string;
+    sender: ChattingSender;
+    attachments: ChattingMessageAttachment[];
+}
+export interface ChattingFAQItem {
+    id: string;
+    question: string;
+    answer: string;
+    link?: string | null;
+}
+export interface ChattingFAQSuggestions {
+    fallbackMessage: string;
+    items: ChattingFAQItem[];
+}
+export interface ChattingConversationState {
+    conversationId: string;
+    messages: ChattingMessage[];
+    faqSuggestions: ChattingFAQSuggestions | null;
+}
+export interface ChattingSendMessageResult {
+    conversationId: string;
+    message: ChattingMessage;
+    faqSuggestions: ChattingFAQSuggestions | null;
+}
+export type ChattingLiveEventType = "connected" | "message.created" | "typing.updated" | "conversation.updated";
+export type ChattingTypingActor = "team" | "visitor";
+export interface ChattingLiveEvent {
+    type: ChattingLiveEventType;
+    conversationId?: string | null;
+    sender?: ChattingSender;
+    actor?: ChattingTypingActor;
+    typing?: boolean;
+    status?: string | null;
+    createdAt?: string | null;
+    updatedAt?: string | null;
+}
+export interface ChattingSiteConfig {
+    id: string;
+    widgetTitle: string;
+    greetingText?: string | null;
+    brandColor?: string | null;
+    showOnlineStatus?: boolean | null;
+}
+export interface ChattingSiteStatus {
+    online: boolean;
+    lastSeenAt?: string | null;
+}
+export interface ChattingClientOptions {
+    siteId: string;
+    baseURL?: string;
+    sessionStore?: ChattingSessionStore;
+    fetchImpl?: typeof fetch;
+}
+export interface ChattingPushRegistrationInput {
+    pushToken: string;
+    platform?: string | null;
+    appId?: string | null;
+}

package/dist/chatting-types.js

@@ -0,0 +1 @@
+export {};

package/dist/chatting-utils.d.ts

@@ -0,0 +1,13 @@
+import type { ChattingVisitorContext } from "./chatting-types";
+export declare function createSessionId(): string;
+export declare function normalizeBaseURL(baseURL: string): string;
+export declare function normalizeText(value: string | null | undefined): string | null;
+export declare function resolveContext(context?: ChattingVisitorContext): {
+    pageUrl: string | null;
+    referrer: string | null;
+    timezone: string | null;
+    locale: string | null;
+    tags: string[];
+    customFields: Record<string, string>;
+};
+export declare function toErrorMessage(error: unknown): string;

package/dist/chatting-utils.js

@@ -0,0 +1,32 @@
+export function createSessionId() {
+    if (typeof globalThis.crypto?.randomUUID === "function") {
+        return globalThis.crypto.randomUUID().toLowerCase();
+    }
+    return `chat_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+}
+export function normalizeBaseURL(baseURL) {
+    return baseURL.replace(/\/+$/, "");
+}
+export function normalizeText(value) {
+    const trimmed = value?.trim();
+    return trimmed ? trimmed : null;
+}
+export function resolveContext(context = {}) {
+    return {
+        pageUrl: normalizeText(context.pageUrl),
+        referrer: normalizeText(context.referrer),
+        timezone: normalizeText(context.timezone) ?? currentTimeZone(),
+        locale: normalizeText(context.locale) ?? currentLocale(),
+        tags: context.tags ?? [],
+        customFields: context.customFields ?? {}
+    };
+}
+export function toErrorMessage(error) {
+    return error instanceof Error ? error.message : "Unknown Chatting error.";
+}
+function currentLocale() {
+    return typeof Intl === "object" ? Intl.DateTimeFormat().resolvedOptions().locale : null;
+}
+function currentTimeZone() {
+    return typeof Intl === "object" ? Intl.DateTimeFormat().resolvedOptions().timeZone : null;
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { ChattingClient } from "./chatting-client";
+export { ChattingConversationScreen } from "./chatting-conversation-screen";
+export { ChattingLiveStreamUnsupportedError } from "./chatting-live-stream";
+export { startConversationPolling } from "./chatting-poller";
+export { createKeyValueSessionStore, createMemorySessionStore } from "./chatting-session-store";
+export { useChattingConversation } from "./use-chatting-conversation";
+export type { ChattingClientOptions, ChattingConversationState, ChattingFAQSuggestions, ChattingKeyValueStorage, ChattingLiveEvent, ChattingLiveEventType, ChattingMessage, ChattingPushRegistrationInput, ChattingSessionState, ChattingSessionStore, ChattingSiteConfig, ChattingSiteStatus, ChattingTypingActor, ChattingVisitorContext, ChattingVisitorProfile } from "./chatting-types";

package/dist/index.js

@@ -0,0 +1,6 @@
+export { ChattingClient } from "./chatting-client";
+export { ChattingConversationScreen } from "./chatting-conversation-screen";
+export { ChattingLiveStreamUnsupportedError } from "./chatting-live-stream";
+export { startConversationPolling } from "./chatting-poller";
+export { createKeyValueSessionStore, createMemorySessionStore } from "./chatting-session-store";
+export { useChattingConversation } from "./use-chatting-conversation";

package/dist/use-chatting-conversation.d.ts

@@ -0,0 +1,26 @@
+import { ChattingClient } from "./chatting-client";
+import type { ChattingFAQSuggestions, ChattingMessage, ChattingSiteConfig, ChattingSiteStatus, ChattingVisitorContext, ChattingVisitorProfile } from "./chatting-types";
+export declare function useChattingConversation(input: {
+    client: ChattingClient;
+    context?: ChattingVisitorContext;
+    profile?: ChattingVisitorProfile | null;
+    draftVisitorEmail?: string | null;
+    pollIntervalMs?: number;
+}): {
+    siteConfig: ChattingSiteConfig | null;
+    siteStatus: ChattingSiteStatus | null;
+    messages: ChattingMessage[];
+    faqSuggestions: ChattingFAQSuggestions | null;
+    draftMessage: string;
+    emailAddress: string;
+    teamTyping: boolean;
+    errorMessage: string | null;
+    isLoading: boolean;
+    isSending: boolean;
+    isSavingEmail: boolean;
+    setDraftMessage: (value: string) => void;
+    setEmailAddress: import("react").Dispatch<import("react").SetStateAction<string>>;
+    refreshConversation: () => Promise<void>;
+    sendMessage: () => Promise<void>;
+    saveEmail: () => Promise<void>;
+};