@usechatting/react-native 0.1.0 → 0.1.2

package/README.md

@@ -1,14 +1,6 @@
 # @usechatting/react-native
 
-Expo-friendly React Native chat package for Chatting.
-
-## What it includes
-
-- JavaScript client for Chatting public chat APIs
-- pluggable async session storage
-- React hook for conversation state
-- simple React Native chat screen
-- live conversation sync with automatic polling fallback
+Add Chatting customer support to an Expo or React Native app.
 
 ## Install
 
@@ -16,107 +8,46 @@ Expo-friendly React Native chat package for Chatting.
 npm install @usechatting/react-native
 ```
 
-If you want session persistence across app restarts, also install an async storage adapter in your app, for example React Native Async Storage.
-
-For Expo push notifications in your host app, also install:
-
-```bash
-npx expo install expo-notifications
-```
-
-## Required config
+## Get your site ID
 
-- `baseURL`: use `https://usechatting.com`
-- `siteId`: your site/workspace ID inside Chatting
+Open [Widget → Installation](https://usechatting.com/dashboard/widget?tab=installation) in Chatting and copy the `data-site-id` value.
 
-## Exact Expo integration snippet
+## Add the support screen
 
 ```tsx
-import { useEffect, useMemo, useState } from "react";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import * as Notifications from "expo-notifications";
-import { AppState, Platform } from "react-native";
 import {
   ChattingClient,
-  ChattingConversationScreen,
-  createKeyValueSessionStore
+  ChattingConversationScreen
 } from "@usechatting/react-native";
 
-Notifications.setNotificationHandler({
-  handleNotification: async () => ({
-    shouldShowAlert: false,
-    shouldPlaySound: false,
-    shouldSetBadge: false
-  })
-});
-
 const client = new ChattingClient({
-  baseURL: "https://usechatting.com",
-  siteId: "your-site-id",
-  sessionStore: createKeyValueSessionStore(AsyncStorage, "your-site-id")
+  siteId: "your-site-id"
 });
 
 export function SupportScreen() {
-  const [refreshKey, setRefreshKey] = useState(0);
-  const context = useMemo(() => ({ pageUrl: "myapp://support" }), []);
-
-  useEffect(() => {
-    let mounted = true;
-    const refreshChat = async () => {
-      await client.syncPushToken();
-      if (mounted) {
-        setRefreshKey((current) => current + 1);
-      }
-    };
-
-    const registerPush = async () => {
-      const permission = await Notifications.requestPermissionsAsync();
-      if (!mounted || permission.status !== "granted") {
-        return;
-      }
-
-      const token = await Notifications.getExpoPushTokenAsync({
-        projectId: "your-expo-project-id"
-      });
-
-      await client.registerPushToken({
-        pushToken: token.data,
-        platform: Platform.OS
-      });
-    };
-
-    void registerPush();
-
-    const appStateSubscription = AppState.addEventListener("change", (nextState) => {
-      if (nextState === "active") {
-        void refreshChat();
-      }
-    });
-
-    const responseSubscription = Notifications.addNotificationResponseReceivedListener(() => {
-      void refreshChat();
-    });
-
-    return () => {
-      mounted = false;
-      appStateSubscription.remove();
-      responseSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <ChattingConversationScreen
-      key={refreshKey}
-      client={client}
-      context={context}
-      draftVisitorEmail="customer@example.com"
-    />
-  );
+  return <ChattingConversationScreen client={client} />;
 }
 ```
 
-## Realtime behavior
+Messages sent here appear in your Chatting inbox. Team replies appear in the app while the screen is open.
+
+## Keep conversations after the app closes
+
+Add `persistSession: true` so customers can reopen the same conversation later:
+
+```tsx
+import { ChattingClient } from "@usechatting/react-native";
+
+const client = new ChattingClient({
+  siteId: "your-site-id",
+  persistSession: true
+});
+```
+
+## Optional features
 
-This package uses a dedicated React Native live transport for Chatting's SSE conversation stream, so new team messages and team typing updates show up immediately while the app is open. If that live connection drops, the hook falls back to foreground polling so the conversation stays usable while reconnecting.
+- Pass a signed-in customer to the screen with `profile={signedInCustomer}`.
+- Register an Expo push token if customers should receive phone notifications when your team replies and the app is not open.
+- Use `useChattingConversation` instead of the ready-made screen if you want to build your own interface.
 
-Expo push delivery is now supported for background and suspended apps once the host app registers an Expo push token through `client.registerPushToken(...)`. When the app becomes active again or a notification is tapped, call `client.syncPushToken()` and remount or refresh your chat screen so the conversation refetches cleanly.
+See the [complete setup guide](https://usechatting.com/guides/chatting-react-native-expo-guide).

package/dist/chatting-client.d.ts

@@ -1,4 +1,4 @@
-import type { ChattingClientOptions, ChattingConversationState, ChattingLiveEvent, ChattingPushRegistrationInput, ChattingSendMessageResult, ChattingSessionState, ChattingSiteConfig, ChattingSiteStatus, ChattingVisitorContext, ChattingVisitorProfile } from "./chatting-types";
+import type { ChattingClientOptions, ChattingConversationState, ChattingLiveEvent, ChattingPushRegistrationInput, ChattingSendMessageResult, ChattingSessionState, ChattingSiteStatus, ChattingVisitorContext, ChattingVisitorProfile } from "./chatting-types";
 export declare class ChattingClient {
     readonly siteId: string;
     private readonly sessionStore;
@@ -7,7 +7,7 @@ export declare class ChattingClient {
     currentSessionState(): Promise<ChattingSessionState>;
     clearConversation(): Promise<void>;
     saveEmail(email: string): Promise<void>;
-    fetchSiteConfig(context?: ChattingVisitorContext): Promise<ChattingSiteConfig>;
+    fetchSiteConfig(context?: ChattingVisitorContext): Promise<import("./chatting-types").ChattingSiteConfig>;
     fetchSiteStatus(context?: ChattingVisitorContext): Promise<ChattingSiteStatus>;
     fetchConversationIfAvailable(): Promise<ChattingConversationState | null>;
     fetchConversation(): Promise<ChattingConversationState>;

package/dist/chatting-client.js

@@ -1,4 +1,5 @@
-import { createMemorySessionStore } from "./chatting-session-store";
+import { resolveChattingSessionStore } from "./chatting-session-store";
+import { fetchChattingSiteConfig } from "./chatting-sdk-presence";
 import { buildChattingSiteQuery, DEFAULT_CHATTING_BASE_URL, requireChattingText } from "./chatting-client-shared";
 import { clearConversationPushState, registerChattingPushToken, syncChattingPushToken, unregisterChattingPushToken } from "./chatting-push-registration";
 import { ChattingTransport } from "./chatting-transport";
@@ -9,7 +10,7 @@ export class ChattingClient {
     transport;
     constructor(options) {
         this.siteId = options.siteId;
-        this.sessionStore = options.sessionStore ?? createMemorySessionStore();
+        this.sessionStore = resolveChattingSessionStore(options);
         this.transport = new ChattingTransport(options.baseURL ?? DEFAULT_CHATTING_BASE_URL, options.fetchImpl ?? fetch);
     }
     async currentSessionState() {
@@ -42,11 +43,12 @@ export class ChattingClient {
     }
     async fetchSiteConfig(context = {}) {
         const state = await this.currentSessionState();
-        const response = await this.transport.get("/api/public/site-config", {
-            ...buildChattingSiteQuery(this.siteId, state, resolveContext(context)),
-            conversationId: state.conversationId ?? null
+        return fetchChattingSiteConfig({
+            transport: this.transport,
+            siteId: this.siteId,
+            state,
+            context: resolveContext(context)
         });
-        return response.site;
     }
     async fetchSiteStatus(context = {}) {
         const state = await this.currentSessionState();

package/dist/chatting-conversation-screen.js

@@ -5,12 +5,13 @@ import { styles } from "./chatting-screen-styles";
 export function ChattingConversationScreen(input) {
     const conversation = useChattingConversation(input);
     const title = conversation.siteConfig?.widgetTitle ?? "Chatting";
-    const subtitle = conversation.siteConfig?.showOnlineStatus !== false && conversation.siteStatus
+    const greeting = conversation.siteConfig?.greetingText?.trim() || "Start a conversation";
+    const teamStatus = conversation.siteConfig?.showOnlineStatus !== false && conversation.siteStatus
         ? conversation.siteStatus.online
             ? "Team is online"
             : "Team is away"
-        : conversation.siteConfig?.greetingText ?? "Start a conversation";
-    return (_jsxs(View, { style: styles.screen, children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: styles.title, children: title }), _jsx(Text, { style: styles.subtitle, children: subtitle })] }), _jsxs(ScrollView, { style: styles.scroll, contentContainerStyle: styles.content, children: [conversation.errorMessage ? (_jsx(View, { style: styles.banner, children: _jsx(Text, { style: [styles.bannerText, styles.error], children: conversation.errorMessage }) })) : null, conversation.isLoading ? _jsx(ActivityIndicator, { color: "#2563EB" }) : null, !conversation.isLoading && conversation.messages.length === 0 ? (_jsx(View, { style: styles.banner, children: _jsx(Text, { style: styles.bannerText, children: "Open support inside your app without rebuilding visitor chat from scratch." }) })) : null, conversation.messages.map((message) => (_jsx(View, { style: styles.row, children: message.sender === "team" ? (_jsxs(_Fragment, { children: [_jsx(Bubble, { message: message.content || "(attachment placeholder)", isUser: false }), _jsx(View, { style: styles.spacer })] })) : (_jsxs(_Fragment, { children: [_jsx(View, { style: styles.spacer }), _jsx(Bubble, { message: message.content || "(attachment placeholder)", isUser: true })] })) }, message.id))), conversation.teamTyping ? (_jsxs(View, { style: styles.row, children: [_jsx(Bubble, { message: "Team is typing...", isUser: false, subtle: true }), _jsx(View, { style: styles.spacer })] })) : null, conversation.faqSuggestions?.items.map((item) => (_jsxs(View, { style: styles.faqCard, children: [_jsx(Text, { style: styles.faqTitle, children: item.question }), _jsx(Text, { style: styles.faqText, children: item.answer })] }, item.id))), conversation.faqSuggestions?.fallbackMessage ? (_jsx(Text, { style: styles.meta, children: conversation.faqSuggestions.fallbackMessage })) : null] }), _jsxs(View, { style: styles.footer, children: [_jsx(TextInput, { value: conversation.emailAddress, onChangeText: conversation.setEmailAddress, placeholder: "Email for follow-up", autoCapitalize: "none", autoCorrect: false, style: styles.input }), _jsx(TextInput, { value: conversation.draftMessage, onChangeText: conversation.setDraftMessage, placeholder: "Type a message", multiline: true, style: [styles.input, styles.composer] }), _jsxs(View, { style: styles.actions, children: [_jsx(TouchableOpacity, { style: [styles.button, styles.secondaryButton], onPress: () => void conversation.saveEmail(), children: _jsx(Text, { style: styles.secondaryButtonText, children: conversation.isSavingEmail ? "Saving..." : "Save email" }) }), _jsx(TouchableOpacity, { style: styles.button, onPress: () => void conversation.sendMessage(), children: _jsx(Text, { style: styles.buttonText, children: conversation.isSending ? "Sending..." : "Send" }) })] })] })] }));
+        : null;
+    return (_jsxs(View, { style: styles.screen, children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: styles.title, children: title }), teamStatus ? _jsx(Text, { style: styles.subtitle, children: teamStatus }) : null] }), _jsxs(ScrollView, { style: styles.scroll, contentContainerStyle: styles.content, children: [conversation.errorMessage ? (_jsx(View, { style: styles.banner, children: _jsx(Text, { style: [styles.bannerText, styles.error], children: conversation.errorMessage }) })) : null, conversation.isLoading ? _jsx(ActivityIndicator, { color: "#2563EB" }) : null, !conversation.isLoading && conversation.messages.length === 0 ? (_jsxs(View, { style: styles.row, children: [_jsx(Bubble, { message: greeting, isUser: false }), _jsx(View, { style: styles.spacer })] })) : null, conversation.messages.map((message) => (_jsx(View, { style: styles.row, children: message.sender === "team" ? (_jsxs(_Fragment, { children: [_jsx(Bubble, { message: message.content || "(attachment placeholder)", isUser: false }), _jsx(View, { style: styles.spacer })] })) : (_jsxs(_Fragment, { children: [_jsx(View, { style: styles.spacer }), _jsx(Bubble, { message: message.content || "(attachment placeholder)", isUser: true })] })) }, message.id))), conversation.teamTyping ? (_jsxs(View, { style: styles.row, children: [_jsx(Bubble, { message: "Team is typing...", isUser: false, subtle: true }), _jsx(View, { style: styles.spacer })] })) : null, conversation.faqSuggestions?.items.map((item) => (_jsxs(View, { style: styles.faqCard, children: [_jsx(Text, { style: styles.faqTitle, children: item.question }), _jsx(Text, { style: styles.faqText, children: item.answer })] }, item.id))), conversation.faqSuggestions?.fallbackMessage ? (_jsx(Text, { style: styles.meta, children: conversation.faqSuggestions.fallbackMessage })) : null] }), _jsx(View, { style: styles.footer, children: _jsxs(View, { style: styles.composerRow, children: [_jsx(TextInput, { value: conversation.draftMessage, onChangeText: conversation.setDraftMessage, placeholder: "Type a message", multiline: true, style: [styles.input, styles.composer] }), _jsx(TouchableOpacity, { style: [styles.button, styles.sendButton], onPress: () => void conversation.sendMessage(), children: _jsx(Text, { style: styles.buttonText, children: conversation.isSending ? "Sending..." : "Send" }) })] }) })] }));
 }
 function Bubble(input) {
     return (_jsx(View, { style: [

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

@@ -4,9 +4,9 @@ export declare const styles: {
         backgroundColor: string;
     };
     header: {
-        padding: number;
-        borderBottomWidth: number;
-        borderBottomColor: string;
+        paddingHorizontal: number;
+        paddingTop: number;
+        paddingBottom: number;
         backgroundColor: string;
     };
     title: {
@@ -25,6 +25,7 @@ export declare const styles: {
     content: {
         padding: number;
         gap: number;
+        flexGrow: number;
     };
     banner: {
         padding: number;
@@ -60,8 +61,15 @@ export declare const styles: {
     };
     teamBubble: {
         backgroundColor: string;
-        borderWidth: number;
-        borderColor: string;
+        borderBottomLeftRadius: number;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        elevation: number;
     };
     typingBubble: {
         opacity: number;
@@ -100,12 +108,16 @@ export declare const styles: {
         color: string;
     };
     footer: {
-        gap: number;
         padding: number;
         borderTopWidth: number;
         borderTopColor: string;
         backgroundColor: string;
     };
+    composerRow: {
+        flexDirection: string;
+        alignItems: string;
+        gap: number;
+    };
     input: {
         borderWidth: number;
         borderColor: string;
@@ -116,14 +128,11 @@ export declare const styles: {
         color: string;
     };
     composer: {
+        flex: number;
         minHeight: number;
         maxHeight: number;
         textAlignVertical: string;
     };
-    actions: {
-        flexDirection: string;
-        gap: number;
-    };
     button: {
         flex: number;
         borderRadius: number;
@@ -132,15 +141,13 @@ export declare const styles: {
         justifyContent: string;
         backgroundColor: string;
     };
-    secondaryButton: {
-        backgroundColor: string;
+    sendButton: {
+        flex: number;
+        minHeight: number;
+        paddingHorizontal: number;
     };
     buttonText: {
         color: string;
         fontWeight: string;
     };
-    secondaryButtonText: {
-        color: string;
-        fontWeight: string;
-    };
 };

package/dist/chatting-screen-styles.js

@@ -1,11 +1,11 @@
 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" },
+    screen: { flex: 1, backgroundColor: "#F6F8FB" },
+    header: { paddingHorizontal: 18, paddingTop: 18, paddingBottom: 16, backgroundColor: "#2563EB" },
+    title: { fontSize: 19, fontWeight: "700", color: "#FFFFFF" },
+    subtitle: { marginTop: 4, fontSize: 13, color: "#DBEAFE" },
     scroll: { flex: 1 },
-    content: { padding: 16, gap: 12 },
+    content: { padding: 16, gap: 12, flexGrow: 1 },
     banner: { padding: 12, borderRadius: 16, backgroundColor: "#FFFFFF", borderWidth: 1, borderColor: "#E2E8F0" },
     bannerText: { color: "#334155", fontSize: 14, lineHeight: 20 },
     error: { color: "#B91C1C" },
@@ -13,7 +13,15 @@ export const styles = StyleSheet.create({
     spacer: { flex: 1, minWidth: 40 },
     bubble: { maxWidth: "78%", borderRadius: 18, paddingHorizontal: 14, paddingVertical: 10 },
     userBubble: { backgroundColor: "#2563EB" },
-    teamBubble: { backgroundColor: "#FFFFFF", borderWidth: 1, borderColor: "#E2E8F0" },
+    teamBubble: {
+        backgroundColor: "#FFFFFF",
+        borderBottomLeftRadius: 6,
+        shadowColor: "#0F172A",
+        shadowOpacity: 0.08,
+        shadowRadius: 10,
+        shadowOffset: { width: 0, height: 4 },
+        elevation: 2
+    },
     typingBubble: { opacity: 0.8 },
     userText: { color: "#FFFFFF", fontSize: 15, lineHeight: 22 },
     teamText: { color: "#0F172A", fontSize: 15, lineHeight: 22 },
@@ -21,12 +29,11 @@ export const styles = StyleSheet.create({
     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" }
+    footer: { padding: 14, borderTopWidth: 1, borderTopColor: "#E2E8F0", backgroundColor: "#FFFFFF" },
+    composerRow: { flexDirection: "row", alignItems: "flex-end", gap: 8 },
+    input: { borderWidth: 1, borderColor: "#CBD5E1", borderRadius: 20, paddingHorizontal: 14, paddingVertical: 10, backgroundColor: "#F8FAFC", color: "#0F172A" },
+    composer: { flex: 1, minHeight: 44, maxHeight: 120, textAlignVertical: "top" },
+    button: { flex: 1, borderRadius: 20, paddingVertical: 12, alignItems: "center", justifyContent: "center", backgroundColor: "#2563EB" },
+    sendButton: { flex: 0, minHeight: 44, paddingHorizontal: 18 },
+    buttonText: { color: "#FFFFFF", fontWeight: "700" }
 });

package/dist/chatting-sdk-presence.d.ts

@@ -0,0 +1,9 @@
+import { ChattingTransport } from "./chatting-transport";
+import type { ChattingSessionState, ChattingSiteConfig } from "./chatting-types";
+import type { resolveContext } from "./chatting-utils";
+export declare function fetchChattingSiteConfig(input: {
+    transport: ChattingTransport;
+    siteId: string;
+    state: ChattingSessionState;
+    context: ReturnType<typeof resolveContext>;
+}): Promise<ChattingSiteConfig>;

package/dist/chatting-sdk-presence.js

@@ -0,0 +1,10 @@
+import { buildChattingSiteQuery } from "./chatting-client-shared";
+export async function fetchChattingSiteConfig(input) {
+    const request = buildChattingSiteQuery(input.siteId, input.state, input.context);
+    await input.transport.post("/api/public/sdk-presence", request).catch(() => undefined);
+    const response = await input.transport.get("/api/public/site-config", {
+        ...request,
+        conversationId: input.state.conversationId ?? null
+    });
+    return response.site;
+}

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

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

package/dist/chatting-session-store.js

@@ -1,3 +1,12 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+export function resolveChattingSessionStore(options) {
+    if (options.sessionStore) {
+        return options.sessionStore;
+    }
+    return options.persistSession
+        ? createKeyValueSessionStore(AsyncStorage, options.siteId)
+        : createMemorySessionStore();
+}
 export function createMemorySessionStore() {
     let state = null;
     return {

package/dist/chatting-types.d.ts

@@ -98,6 +98,7 @@ export interface ChattingSiteStatus {
 export interface ChattingClientOptions {
     siteId: string;
     baseURL?: string;
+    persistSession?: boolean;
     sessionStore?: ChattingSessionStore;
     fetchImpl?: typeof fetch;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usechatting/react-native",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "React Native and Expo visitor chat SDK for Chatting.",
   "license": "Proprietary",
   "main": "dist/index.js",
@@ -14,6 +14,9 @@
   "scripts": {
     "build": "tsc -p tsconfig.json"
   },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "2.2.0"
+  },
   "peerDependencies": {
     "react": ">=18",
     "react-native": ">=0.74"