@appsupportkit/support-sdk 0.2.0 → 0.4.0

package/lib/typescript/useSupportThreads.d.ts

@@ -1,5 +1,6 @@
 import { type ApiConfig } from './api';
-import type { Thread } from './types';
+import type { StringKey } from './i18n';
+import type { StoreListing, Thread } from './types';
 export declare const IDLE_POLL_MS = 60000;
 export interface SupportThreadsState {
     /** Server threads with unread counts narrowed by local reads. */
@@ -10,19 +11,34 @@ export interface SupportThreadsState {
     /** User-pulled refresh with content already on screen. */
     refreshing: boolean;
     /** Set only when there is nothing cached; background failures stay quiet. */
-    error: string | null;
+    errorKey: StringKey | null;
+    /** The language this user picked, or null if they never have. */
+    serverLanguage: string | null;
+    /**
+     * False until the first successful load. `serverLanguage === null` only
+     * means "never picked" once this is true — before that it means "don't
+     * know yet", and showing the picker on a guess would nag a user who
+     * answered on another device.
+     */
+    languageLoaded: boolean;
+    /** The app's store listings, for review request buttons. */
+    store: StoreListing | null;
     /** User-initiated refresh (pull-to-refresh, retry button). */
     refresh: () => void;
     /** Awaited by send/submit handlers so the list reflects the write. */
     reload: () => Promise<void>;
 }
-export declare function useSupportThreads({ config, revenuecatId, enabled, sheetOpen, activeThreadId, idlePollMs, }: {
+export declare function useSupportThreads({ config, revenuecatId, enabled, sheetOpen, chatVisible, idlePollMs, }: {
     config: ApiConfig;
     revenuecatId: string;
     /** False when props failed validation — no requests are made. */
     enabled: boolean;
     sheetOpen: boolean;
-    activeThreadId: string | null;
+    /**
+     * The chat is on screen. It shows every conversation at once, so all of
+     * them are read while it is — including replies that arrive meanwhile.
+     */
+    chatVisible: boolean;
     idlePollMs: number;
 }): SupportThreadsState;
 //# sourceMappingURL=useSupportThreads.d.ts.map

package/lib/typescript/useSupportThreads.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSupportThreads.d.ts","sourceRoot":"","sources":["../../src/useSupportThreads.ts"],"names":[],"mappings":"AAgBA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAetC,eAAO,MAAM,YAAY,QAAS,CAAC;AA0CnC,MAAM,WAAW,mBAAmB;IAClC,iEAAiE;IACjE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,OAAO,EAAE,OAAO,CAAC;IACjB,0DAA0D;IAC1D,UAAU,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sEAAsE;IACtE,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,YAAY,EACZ,OAAO,EACP,SAAS,EACT,cAAc,EACd,UAAU,GACX,EAAE;IACD,MAAM,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,mBAAmB,CAoQtB"}
+{"version":3,"file":"useSupportThreads.d.ts","sourceRoot":"","sources":["../../src/useSupportThreads.ts"],"names":[],"mappings":"AAgBA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAepD,eAAO,MAAM,YAAY,QAAS,CAAC;AA8CnC,MAAM,WAAW,mBAAmB;IAClC,iEAAiE;IACjE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,OAAO,EAAE,OAAO,CAAC;IACjB,0DAA0D;IAC1D,UAAU,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,QAAQ,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,iEAAiE;IACjE,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;;OAKG;IACH,cAAc,EAAE,OAAO,CAAC;IACxB,4DAA4D;IAC5D,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sEAAsE;IACtE,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,YAAY,EACZ,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAU,GACX,EAAE;IACD,MAAM,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,mBAAmB,CAiRtB"}

package/lib/typescript/utils.d.ts

@@ -1,11 +1,13 @@
-/** "2h ago" relative time — mirrors the web dashboard's formatting. */
-export declare function relativeTime(iso: string): string;
-export declare function formatDate(iso: string): string;
-/** "14:32" in the device's locale — shown under a group of messages. */
-export declare function formatTime(iso: string): string;
+import type { Translator } from './i18n';
+import type { SupportUser, UserPlan } from './types';
+export declare function formatDate(iso: string, strings: Translator): string;
+/** "14:32" in the user's locale — shown under a group of messages. */
+export declare function formatTime(iso: string, strings: Translator): string;
 export declare function isSameDay(a: string, b: string): boolean;
 /** Date separator label: Today / Yesterday / "Mon, 5 Jan". */
-export declare function dayLabel(iso: string): string;
+export declare function dayLabel(iso: string, strings: Translator): string;
+/** The user's plan, reading the deprecated `isPaid` when `plan` is absent. */
+export declare function userPlan(user: SupportUser): UserPlan;
 /** Dev-mode prop validation with actionable messages. */
 export declare function validateProps(props: {
     appName?: unknown;

package/lib/typescript/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAehD;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAM9C;AAED,wEAAwE;AACxE,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAK9C;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAQvD;AAED,8DAA8D;AAC9D,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAY5C;AAED,yDAAyD;AACzD,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,MAAM,GAAG,IAAI,CA8BhB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKrD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,CAMnE;AAED,sEAAsE;AACtE,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,CAKnE;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAQvD;AAED,8DAA8D;AAC9D,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,CAYjE;AAID,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,QAAQ,CAEpD;AAED,yDAAyD;AACzD,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,MAAM,GAAG,IAAI,CAiChB"}

package/lib/typescript/version.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Sent as `x-sdk-version` on every request. The backend uses its presence to
+ * tell 0.4+ (one support chat) from older builds still in the App Store, so
+ * keep it in step with package.json.
+ */
+export declare const SDK_VERSION = "0.4.0";
+//# sourceMappingURL=version.d.ts.map

package/lib/typescript/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,WAAW,UAAU,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appsupportkit/support-sdk",
-  "version": "0.2.0",
-  "description": "In-app customer support for React Native: feedback, feature requests, and bug reports with two-way threads.",
+  "version": "0.4.0",
+  "description": "In-app customer support for React Native: feedback, feature requests, and bug reports with two-way threads, in the user's own language.",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
   "types": "./lib/typescript/index.d.ts",

package/src/api.ts

@@ -1,10 +1,7 @@
 // Thin client for the Supabase Edge Functions. Every call authenticates with
 // the per-app x-api-key header; no Supabase JS client is needed on-device.
-import type {
-  PushPermissionStatus,
-  QueryType,
-  ThreadsResponse,
-} from './types';
+import type { PushPermissionStatus, ThreadsResponse, UserPlan } from './types';
+import { SDK_VERSION } from './version';
 
 export interface ApiConfig {
   supabaseUrl: string;
@@ -38,6 +35,8 @@ async function request<T>(
       headers: {
         'Content-Type': 'application/json',
         'x-api-key': config.apiKey,
+        // Tells the backend this build speaks the single support chat.
+        'x-sdk-version': SDK_VERSION,
         ...init.headers,
       },
     });
@@ -112,41 +111,94 @@ export function registerPush(
   });
 }
 
-export function submitQuery(
+/** Records the language the user reads and writes support messages in. */
+export function setLanguage(
+  config: ApiConfig,
+  input: { revenuecatId: string; language: string },
+): Promise<{ language: string }> {
+  return request(config, 'set-language', {
+    method: 'POST',
+    body: JSON.stringify({
+      revenuecat_id: input.revenuecatId,
+      language: input.language,
+    }),
+  });
+}
+
+/** What the backend is told about the current user. */
+export interface ReportedUser {
+  name: string;
+  plan: UserPlan;
+  appVersion: string;
+  /** Decides which store a review request opens. */
+  platform?: 'ios' | 'android';
+}
+
+function reportedUser(user: ReportedUser) {
+  return {
+    name: user.name,
+    plan: user.plan,
+    app_version: user.appVersion,
+    platform: user.platform,
+  };
+}
+
+/**
+ * Sends one chat message. The server appends it to the user's open
+ * conversation, or starts one if none is open (a first message, or the first
+ * after a resolve).
+ */
+export function sendMessage(
   config: ApiConfig,
   input: {
-    queryType: QueryType;
-    message: string;
-    userName: string;
-    isPaid: boolean;
     revenuecatId: string;
-    appVersion: string;
+    message: string;
+    language: string;
+    user: ReportedUser;
   },
-): Promise<{ query_id: string }> {
-  return request(config, 'submit-query', {
+): Promise<{ query_id: string; message_id: string; started: boolean }> {
+  return request(config, 'send-message', {
     method: 'POST',
     body: JSON.stringify({
       app_name: config.appName,
-      query_type: input.queryType,
+      revenuecat_id: input.revenuecatId,
       message: input.message,
-      user_name: input.userName,
-      is_paid: input.isPaid,
+      // Sent on every write so a lost set-language call self-heals.
+      language: input.language,
+      user: reportedUser(input.user),
+    }),
+  });
+}
+
+/**
+ * Records the user in the app's directory, so the team can find and message
+ * them before they ever open support. Called on every load.
+ */
+export function registerUser(
+  config: ApiConfig,
+  input: { revenuecatId: string; user: ReportedUser },
+): Promise<{ ok: boolean }> {
+  return request(config, 'register-user', {
+    method: 'POST',
+    body: JSON.stringify({
+      app_name: config.appName,
       revenuecat_id: input.revenuecatId,
-      app_version: input.appVersion,
+      user: reportedUser(input.user),
     }),
   });
 }
 
-export function postMessage(
+/** Records a tap on a review request's store button, for the dashboard. */
+export function reviewOpened(
   config: ApiConfig,
-  input: { queryId: string; revenuecatId: string; message: string },
-): Promise<{ message_id: string }> {
-  return request(config, 'post-message', {
+  input: { revenuecatId: string; messageId: string },
+): Promise<{ ok: boolean }> {
+  return request(config, 'review-opened', {
     method: 'POST',
     body: JSON.stringify({
-      query_id: input.queryId,
+      app_name: config.appName,
       revenuecat_id: input.revenuecatId,
-      message: input.message,
+      message_id: input.messageId,
     }),
   });
 }

package/src/components/BottomSheet.tsx

@@ -155,7 +155,7 @@ export function BottomSheet({
           <Animated.View
             style={{
               height: sheetHeight,
-              backgroundColor: theme.colors.bg,
+              backgroundColor: theme.colors.sheet,
               borderTopLeftRadius: theme.radii.sheet,
               borderTopRightRadius: theme.radii.sheet,
               borderWidth: 1,

package/src/components/LauncherButton.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react-native';
 import type { SupportTheme } from '../theme';
 import type { LauncherVariant } from '../types';
-import { ChatBubbleMark } from './icons';
+import { ConversationMark } from './icons';
 
 const PRESS_SCALE = 0.93;
 
@@ -87,7 +87,7 @@ export function LauncherButton({
     : soft
       ? theme.colors.accent
       : theme.launcher.minimalMark;
-  // Dots are punched out of the bubble in whatever sits behind the mark —
+  // The gap between the bubbles is cut in whatever sits behind the mark —
   // the button's own fill, or the app background when there isn't one.
   const markHoleColor = solid
     ? theme.colors.accent
@@ -106,7 +106,7 @@ export function LauncherButton({
   const badgeFg = solid ? theme.colors.accent : theme.colors.accentForeground;
 
   const height = label ? Math.max(44, size * 0.84) : size;
-  const markSize = Math.round(size * (label ? 0.36 : 0.42));
+  const markSize = Math.round(size * (label ? 0.4 : 0.46));
 
   return (
     <Animated.View
@@ -167,7 +167,7 @@ export function LauncherButton({
           ...(variant === 'minimal' ? null : theme.shadows.launcher),
         }}
       >
-        <ChatBubbleMark color={markColor} dotColor={markHoleColor} size={markSize} />
+        <ConversationMark color={markColor} holeColor={markHoleColor} size={markSize} />
         {label !== undefined && (
           <Text
             style={{