@blario/react-native 0.0.0-stage → 0.1.0

package/src/agent-mode/ui/WarningIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export interface WarningIconProps {
+  color: string;
+  background: string;
+}
+
+export function WarningIcon({ color, background }: WarningIconProps): React.JSX.Element {
+  return (
+    <View style={styles.box}>
+      <View style={[styles.triangle, { borderBottomColor: color }]} />
+      <Text style={[styles.mark, { color: background }]}>!</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { width: 18, height: 18, alignItems: 'center', justifyContent: 'flex-end' },
+  triangle: {
+    position: 'absolute',
+    bottom: 1,
+    width: 0,
+    height: 0,
+    borderLeftWidth: 9,
+    borderRightWidth: 9,
+    borderBottomWidth: 16,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+  },
+  mark: { fontSize: 11, lineHeight: 13, fontWeight: '700', marginBottom: 1 },
+});

package/src/agent-mode/ui/full-window-overlay.ts

@@ -0,0 +1,16 @@
+import type { ComponentType, ReactNode } from 'react';
+
+import { isFunction, isRecord } from '../../fiber/narrow.ts';
+
+export type OverlayComponent = ComponentType<{ children?: ReactNode }>;
+
+declare const require: (moduleName: string) => unknown;
+
+export function loadFullWindowOverlay(): OverlayComponent | null {
+  try {
+    const screens = require('react-native-screens');
+    return isRecord(screens) && isFunction(screens.FullWindowOverlay) ? (screens.FullWindowOverlay as OverlayComponent) : null;
+  } catch {
+    return null;
+  }
+}

package/src/agent-mode/ui/layer-host.ts

@@ -0,0 +1,11 @@
+export type LayerHostKind = 'modal' | 'full-window-overlay' | 'root';
+
+export function chooseLayerHost(platform: string, hasFullWindowOverlay: boolean): LayerHostKind {
+  if (platform === 'android') {
+    return 'modal';
+  }
+  if (platform === 'ios' && hasFullWindowOverlay) {
+    return 'full-window-overlay';
+  }
+  return 'root';
+}

package/src/backend/api-client.ts

@@ -0,0 +1,210 @@
+import { isRecord } from '../fiber/narrow.ts';
+import { type BootstrapResponse, type HeartbeatResponse, type IdentifyRequest, parseBootstrap, parseHeartbeat, parseSessionId } from './api-types.ts';
+import { ApiRequestError, isIdentityRejection } from './errors.ts';
+import type { BlarIdentity, IdentityProof, IdentityRefusalReason } from './identity.ts';
+import { IdentityProofStore } from './identity-proof.ts';
+
+const LOAD_ENDPOINT = '/api/tickets/contacts/load/';
+const IDENTIFY_ENDPOINT = '/api/tickets/contacts/identify/';
+const HEARTBEAT_ENDPOINT = '/api/tickets/contacts/heartbeat/';
+const CREATE_SESSION_ENDPOINT = '/api/ai/contact-sessions/widget/create/';
+const NUDGE_OPEN_ENDPOINT = '/api/activation/nudges/open/';
+const NUDGE_DISMISS_ENDPOINT = '/api/activation/nudges/dismiss/';
+const NUDGE_SNOOZE_ENDPOINT = '/api/activation/nudges/snooze/';
+const REQUEST_TIMEOUT_MS = 10_000;
+
+export interface ApiClientHooks {
+  restoreSource?: () => Promise<string | null>;
+  onIdentityRefused?: (reason: IdentityRefusalReason) => void;
+}
+
+export interface ApiClientOptions {
+  apiBaseUrl: string;
+  publishableKey: string;
+}
+
+interface RetryBudget {
+  refresh: boolean;
+  restore: boolean;
+}
+
+interface RequestSpec {
+  endpoint: string;
+  method: 'GET' | 'POST';
+  body?: unknown;
+}
+
+const FULL_BUDGET: RetryBudget = { refresh: true, restore: true };
+
+async function readErrorCode(response: Response): Promise<string | null> {
+  try {
+    const body: unknown = await response.clone().json();
+    return isRecord(body) && typeof body.code === 'string' ? body.code : null;
+  } catch {
+    return null;
+  }
+}
+
+async function readJson(response: Response, endpoint: string): Promise<unknown> {
+  const contentType = response.headers.get('content-type') ?? '';
+  if (!contentType.includes('application/json')) {
+    return {};
+  }
+  try {
+    return await response.json();
+  } catch {
+    throw ApiRequestError.transport(endpoint, 'network');
+  }
+}
+
+export class ApiClient {
+  private sourceId: string | null = null;
+
+  private hooks: ApiClientHooks = {};
+
+  private readonly proofs = new IdentityProofStore();
+
+  constructor(private readonly options: ApiClientOptions) {}
+
+  setHooks(hooks: ApiClientHooks): void {
+    this.hooks = hooks;
+  }
+
+  setSourceId(sourceId: string | null): void {
+    this.sourceId = sourceId;
+  }
+
+  getSourceId(): string | null {
+    return this.sourceId;
+  }
+
+  getApiBaseUrl(): string {
+    return this.options.apiBaseUrl;
+  }
+
+  getPublishableKey(): string {
+    return this.options.publishableKey;
+  }
+
+  setIdentity(identity: BlarIdentity | null): void {
+    this.proofs.setIdentity(identity);
+  }
+
+  getIdentity(): BlarIdentity | null {
+    return this.proofs.getIdentity();
+  }
+
+  getIdentityProof(): Promise<IdentityProof | null> | null {
+    return this.proofs.hasIdentity() ? this.proofs.get() : null;
+  }
+
+  refreshIdentityProof(): Promise<IdentityProof | null> {
+    return this.proofs.get({ refresh: true });
+  }
+
+  async loadSession(sourceId: string | null): Promise<BootstrapResponse> {
+    const raw = await this.send({ endpoint: LOAD_ENDPOINT, method: 'POST', body: sourceId === null ? {} : { source_id: sourceId } }, {
+      refresh: true,
+      restore: false,
+    });
+    return this.requireBootstrap(raw, LOAD_ENDPOINT);
+  }
+
+  async identifyUser(request: IdentifyRequest): Promise<BootstrapResponse> {
+    const raw = await this.send({ endpoint: IDENTIFY_ENDPOINT, method: 'POST', body: request }, FULL_BUDGET);
+    return this.requireBootstrap(raw, IDENTIFY_ENDPOINT);
+  }
+
+  async heartbeat(): Promise<HeartbeatResponse> {
+    return parseHeartbeat(await this.send({ endpoint: HEARTBEAT_ENDPOINT, method: 'POST', body: {} }, FULL_BUDGET));
+  }
+
+  async createSession(): Promise<number | null> {
+    const raw = await this.send({ endpoint: CREATE_SESSION_ENDPOINT, method: 'POST', body: { force_agent_mode: false } }, FULL_BUDGET);
+    return parseSessionId(raw);
+  }
+
+  async openNudge(tabId: string): Promise<number | null> {
+    return parseSessionId(await this.send({ endpoint: NUDGE_OPEN_ENDPOINT, method: 'POST', body: { tab_id: tabId } }, FULL_BUDGET));
+  }
+
+  async dismissNudge(milestoneMessageId: number): Promise<void> {
+    await this.send({ endpoint: NUDGE_DISMISS_ENDPOINT, method: 'POST', body: { milestone_message_id: milestoneMessageId } }, FULL_BUDGET);
+  }
+
+  async snoozeNudge(milestoneMessageId: number): Promise<void> {
+    await this.send({ endpoint: NUDGE_SNOOZE_ENDPOINT, method: 'POST', body: { milestone_message_id: milestoneMessageId } }, FULL_BUDGET);
+  }
+
+  private requireBootstrap(raw: unknown, endpoint: string): BootstrapResponse {
+    const bootstrap = parseBootstrap(raw);
+    if (bootstrap === null) {
+      throw new ApiRequestError({ kind: 'http', endpoint, message: `${endpoint} answered without a source_id` });
+    }
+    return bootstrap;
+  }
+
+  private async buildHeaders(): Promise<Record<string, string>> {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      'X-Publishable-Key': this.options.publishableKey,
+    };
+    if (this.sourceId !== null) {
+      headers['X-Source-Id'] = this.sourceId;
+    }
+    const proof = await this.proofs.get();
+    if (proof !== null) {
+      headers[proof.header] = proof.value;
+    }
+    return headers;
+  }
+
+  private async fetchWithTimeout(spec: RequestSpec, headers: Record<string, string>): Promise<Response> {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+    try {
+      return await fetch(`${this.options.apiBaseUrl}${spec.endpoint}`, {
+        method: spec.method,
+        headers,
+        body: spec.body === undefined ? undefined : JSON.stringify(spec.body),
+        signal: controller.signal,
+      });
+    } catch (error) {
+      const timedOut = error instanceof Error && error.name === 'AbortError';
+      throw ApiRequestError.transport(spec.endpoint, timedOut ? 'timeout' : 'network');
+    } finally {
+      clearTimeout(timer);
+    }
+  }
+
+  private async send(spec: RequestSpec, budget: RetryBudget): Promise<unknown> {
+    const headers = await this.buildHeaders();
+    const response = await this.fetchWithTimeout(spec, headers);
+    if (response.ok) {
+      return readJson(response, spec.endpoint);
+    }
+    const error = ApiRequestError.http(spec.endpoint, response.status, response.statusText, await readErrorCode(response));
+    return this.recover(spec, budget, headers, error);
+  }
+
+  private async recover(spec: RequestSpec, budget: RetryBudget, headers: Record<string, string>, error: ApiRequestError): Promise<unknown> {
+    if (error.status === 401 && headers['X-Source-Id'] === undefined) {
+      if (budget.restore && this.hooks.restoreSource !== undefined && (await this.hooks.restoreSource()) !== null) {
+        return this.send(spec, { ...budget, restore: false });
+      }
+      throw error;
+    }
+    if (budget.refresh && isIdentityRejection(error) && this.proofs.canRefresh()) {
+      await this.proofs.get({ refresh: true });
+      return this.send(spec, { ...budget, refresh: false });
+    }
+    const refused = error.code === 'identity_verification_required' && this.proofs.hasIdentity() && (!budget.refresh || !this.proofs.canRefresh());
+    if (refused && this.hooks.onIdentityRefused !== undefined) {
+      this.hooks.onIdentityRefused(this.proofs.refusalReason());
+      if (spec.endpoint !== IDENTIFY_ENDPOINT) {
+        return this.send(spec, { ...budget, refresh: false });
+      }
+    }
+    throw error;
+  }
+}

package/src/backend/api-types.ts

@@ -0,0 +1,56 @@
+import { isRecord, nonEmptyString } from '../fiber/narrow.ts';
+import type { CustomFields } from './identity.ts';
+
+export interface BootstrapResponse {
+  sourceId: string;
+  conversationId: number | null;
+  sessionId: number | null;
+  aiActive: boolean;
+  isIdentityVerified: boolean;
+}
+
+export interface IdentifyRequest {
+  external_id: string;
+  email?: string;
+  name?: string;
+  phone?: string;
+  contact_company?: string;
+  contact_company_external_id?: string;
+  country?: string;
+  custom_fields?: CustomFields;
+}
+
+export interface HeartbeatResponse {
+  hasPendingNudge: boolean;
+  conversationId: number | null;
+}
+
+function numberOrNull(value: unknown): number | null {
+  return typeof value === 'number' ? value : null;
+}
+
+export function parseBootstrap(raw: unknown): BootstrapResponse | null {
+  if (!isRecord(raw)) {
+    return null;
+  }
+  const sourceId = nonEmptyString(raw.source_id);
+  if (sourceId === null) {
+    return null;
+  }
+  return {
+    sourceId,
+    conversationId: numberOrNull(raw.conversation_id),
+    sessionId: numberOrNull(raw.session_id),
+    aiActive: raw.ai_active !== false,
+    isIdentityVerified: raw.is_identity_verified === true,
+  };
+}
+
+export function parseHeartbeat(raw: unknown): HeartbeatResponse {
+  const record = isRecord(raw) ? raw : {};
+  return { hasPendingNudge: record.has_pending_nudge === true, conversationId: numberOrNull(record.conversation_id) };
+}
+
+export function parseSessionId(raw: unknown): number | null {
+  return isRecord(raw) ? numberOrNull(raw.session_id) : null;
+}

package/src/backend/app-info.ts

@@ -0,0 +1,40 @@
+import { Platform } from 'react-native';
+
+import { isRecord } from '../fiber/narrow.ts';
+
+export interface AppInfo {
+  platform: 'react-native';
+  os: string;
+  os_version: string;
+  rn_version: string;
+  new_arch: boolean;
+}
+
+interface GlobalMarkers {
+  nativeFabricUIManager?: unknown;
+  RN$Bridgeless?: unknown;
+}
+
+function readReactNativeVersion(): string {
+  const constants: unknown = Platform.constants;
+  const version = isRecord(constants) ? constants.reactNativeVersion : null;
+  if (!isRecord(version)) {
+    return 'unknown';
+  }
+  const { major, minor, patch } = version;
+  return `${String(major)}.${String(minor)}.${String(patch)}`;
+}
+
+export function detectNewArchitecture(markers: GlobalMarkers): boolean {
+  return markers.nativeFabricUIManager !== undefined || markers.RN$Bridgeless === true;
+}
+
+export function readAppInfo(): AppInfo {
+  return {
+    platform: 'react-native',
+    os: Platform.OS,
+    os_version: String(Platform.Version),
+    rn_version: readReactNativeVersion(),
+    new_arch: detectNewArchitecture(globalThis as GlobalMarkers),
+  };
+}