@blario/react-native 0.0.0 → 0.1.0

package/src/backend/tab-id.ts

@@ -0,0 +1,24 @@
+const ID_LENGTH = 16;
+const ALPHABET = 'abcdefghijklmnopqrstuvwxyz0123456789';
+
+function randomSegment(length: number): string {
+  let segment = '';
+  for (let index = 0; index < length; index += 1) {
+    segment += ALPHABET.charAt(Math.floor(Math.random() * ALPHABET.length));
+  }
+  return segment;
+}
+
+let processTabId: string | null = null;
+
+export function getTabId(): string {
+  processTabId = processTabId ?? `rn-${randomSegment(ID_LENGTH)}`;
+  return processTabId;
+}
+
+export function generateIdempotencyKey(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (placeholder) => {
+    const digit = Math.floor(Math.random() * 16);
+    return (placeholder === 'x' ? digit : (digit & 0x3) | 0x8).toString(16);
+  });
+}

package/src/blar.ts

@@ -0,0 +1,100 @@
+import type { BackendTransport } from './backend/backend-transport.ts';
+import type { BlarIdentity } from './backend/identity.ts';
+import type { MessageMetadata } from './backend/message-metadata.ts';
+
+export interface MessageMetadataOptions {
+  includeTextDom: boolean;
+}
+
+export interface ChatControls {
+  open: () => void;
+  close: () => void;
+  getUnread: () => number;
+  isOpen: () => boolean;
+}
+
+export type MessageMetadataReader = (options: MessageMetadataOptions) => Promise<MessageMetadata | null>;
+
+class BlarClient {
+  private transport: BackendTransport | null = null;
+
+  private metadataReader: MessageMetadataReader | null = null;
+
+  private chat: ChatControls | null = null;
+
+  private pendingUser: BlarIdentity | null = null;
+
+  private logoutRequested = false;
+
+  attach(transport: BackendTransport, metadataReader: MessageMetadataReader): void {
+    this.transport = transport;
+    this.metadataReader = metadataReader;
+  }
+
+  detach(transport: BackendTransport): void {
+    if (this.transport === transport) {
+      this.transport = null;
+      this.metadataReader = null;
+    }
+  }
+
+  attachChat(controls: ChatControls): void {
+    this.chat = controls;
+  }
+
+  detachChat(controls: ChatControls): void {
+    if (this.chat === controls) {
+      this.chat = null;
+    }
+  }
+
+  open(): void {
+    this.chat?.open();
+  }
+
+  close(): void {
+    this.chat?.close();
+  }
+
+  getUnreadCount(): number {
+    return this.chat?.getUnread() ?? 0;
+  }
+
+  isChatOpen(): boolean {
+    return this.chat?.isOpen() ?? false;
+  }
+
+  async setUser(identity: BlarIdentity): Promise<void> {
+    this.logoutRequested = false;
+    this.pendingUser = identity;
+    await this.transport?.setUser(identity);
+  }
+
+  async logout(): Promise<void> {
+    this.pendingUser = null;
+    this.logoutRequested = true;
+    await this.transport?.logout();
+  }
+
+  consumePendingUser(): BlarIdentity | null {
+    return this.logoutRequested ? null : this.pendingUser;
+  }
+
+  isConnected(): boolean {
+    return this.transport?.isConnected() ?? false;
+  }
+
+  getTabId(): string | null {
+    return this.transport?.getTabId() ?? null;
+  }
+
+  getSessionState(): ReturnType<BackendTransport['getState']> | null {
+    return this.transport?.getState() ?? null;
+  }
+
+  getMessageMetadata(options: MessageMetadataOptions = { includeTextDom: false }): Promise<MessageMetadata | null> {
+    return this.metadataReader === null ? Promise.resolve(null) : this.metadataReader(options);
+  }
+}
+
+export const Blar = new BlarClient();

package/src/chat/ChatLayer.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo } from 'react';
+
+import type { WidgetProof } from '../backend/backend-transport.ts';
+import type { BlarIdentity } from '../backend/identity.ts';
+import type { MessageMetadata } from '../backend/message-metadata.ts';
+import { NudgeBubble } from '../nudge/NudgeBubble.tsx';
+import type { Language, UiStrings } from '../ui/strings.ts';
+import { ChatSheet } from './ChatSheet.tsx';
+import { ChatView } from './ChatView.tsx';
+import { Launcher } from './Launcher.tsx';
+import type { ChatSnapshot } from './chat-coordinator.ts';
+import { shouldShowLauncher } from './chat-state.ts';
+import type { ResolvedChatOptions } from './options.ts';
+import type { ShellIdentity } from './widget-shell.ts';
+import { WIDGET_BUNDLE } from './widget-bundle.generated.ts';
+
+export interface ChatLayerProps {
+  snapshot: ChatSnapshot;
+  options: ResolvedChatOptions;
+  strings: UiStrings;
+  language: Language;
+  publishableKey: string;
+  apiBaseUrl: string;
+  tabId: string;
+  identity: BlarIdentity | null;
+  getMetadata: (options: { includeTextDom: boolean }) => Promise<MessageMetadata | null>;
+  getProof: () => Promise<WidgetProof | null>;
+  onOpen: () => void;
+  onClose: () => void;
+  onSessionChanged: (sessionId: number | null) => void;
+  onAcceptNudge: () => void;
+  onDeclineNudge: () => void;
+  onSnoozeNudge: () => void;
+  log?: (message: string) => void;
+}
+
+function toShellIdentity(identity: BlarIdentity | null): ShellIdentity | null {
+  if (identity === null) {
+    return null;
+  }
+  return {
+    externalId: identity.externalId,
+    email: identity.email,
+    name: identity.name,
+    phone: identity.phone,
+    contactCompany: identity.contactCompany,
+    contactCompanyExternalId: identity.contactCompanyExternalId,
+    country: identity.country,
+    customFields: identity.customFields,
+    identityToken: identity.identityToken,
+    identitySignature: identity.identitySignature,
+    providesProof: identity.getProof !== undefined || identity.getIdentityToken !== undefined || identity.getIdentitySignature !== undefined,
+  };
+}
+
+export function ChatLayer(props: ChatLayerProps): React.JSX.Element {
+  const { snapshot, options, strings, identity } = props;
+  const shellIdentity = useMemo(() => toShellIdentity(identity), [identity]);
+  const shell = useMemo(
+    () => ({
+      bundle: options.scriptUrl === null ? WIDGET_BUNDLE : null,
+      scriptUrl: options.scriptUrl,
+      publishableKey: props.publishableKey,
+      apiBaseUrl: props.apiBaseUrl,
+      language: props.language,
+      tabId: props.tabId,
+      primaryColor: options.widgetColor,
+      identity: shellIdentity,
+    }),
+    [options.scriptUrl, options.widgetColor, props.publishableKey, props.apiBaseUrl, props.language, props.tabId, shellIdentity],
+  );
+  const { chat, nudge, chatKey, mounted, sessionRequest } = snapshot;
+  const launcherShown = options.launcherVisible && shouldShowLauncher(chat);
+  return (
+    <>
+      <ChatSheet mode={chat.mode} mounted={mounted} strings={strings} onClose={props.onClose}>
+        {mounted ? (
+          <ChatView
+            key={chatKey}
+            shell={shell}
+            unavailableText={strings.chatUnavailable}
+            getMetadata={props.getMetadata}
+            getProof={props.getProof}
+            onClosed={props.onClose}
+            onSessionChanged={props.onSessionChanged}
+            open={chat.mode === 'open'}
+            sessionRequest={sessionRequest}
+            log={props.log}
+          />
+        ) : null}
+      </ChatSheet>
+      {launcherShown ? (
+        <Launcher unread={chat.unread} label={strings.chatLauncher} color={options.primaryColor} placement={options.placement} onPress={props.onOpen} />
+      ) : null}
+      {nudge === null || chat.mode === 'open' || chat.agentWorking ? null : (
+        <NudgeBubble
+          nudge={nudge}
+          strings={strings}
+          color={options.primaryColor}
+          placement={options.placement}
+          launcherVisible={launcherShown}
+          onAccept={props.onAcceptNudge}
+          onDecline={props.onDeclineNudge}
+          onLater={props.onSnoozeNudge}
+        />
+      )}
+    </>
+  );
+}

package/src/chat/ChatSheet.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, BackHandler, Dimensions, Easing, KeyboardAvoidingView, Platform, Pressable, StyleSheet, View } from 'react-native';
+
+import { useInsets } from '../ui/useInsets.ts';
+import type { UiStrings } from '../ui/strings.ts';
+import type { SheetMode } from './chat-state.ts';
+
+export interface ChatSheetProps {
+  mode: SheetMode;
+  mounted: boolean;
+  strings: UiStrings;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const TOP_GAP = 12;
+const ANIMATION_MS = 240;
+
+export function ChatSheet({ mode, mounted, strings, onClose, children }: ChatSheetProps): React.JSX.Element | null {
+  const insets = useInsets();
+  const windowHeight = Dimensions.get('window').height;
+  const sheetHeight = windowHeight - insets.top - TOP_GAP;
+  const progress = useRef(new Animated.Value(mode === 'open' ? 1 : 0)).current;
+  const isOpen = mode === 'open';
+
+  useEffect(() => {
+    Animated.timing(progress, { toValue: isOpen ? 1 : 0, duration: ANIMATION_MS, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
+  }, [isOpen, progress]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return undefined;
+    }
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      onClose();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [isOpen, onClose]);
+
+  if (!mounted) {
+    return null;
+  }
+  const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [sheetHeight + 48, 0] });
+  const backdropOpacity = progress.interpolate({ inputRange: [0, 1], outputRange: [0, 0.35] });
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents={isOpen ? 'auto' : 'none'}>
+      <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
+        <Pressable accessibilityLabel={strings.chatClose} style={StyleSheet.absoluteFill} onPress={onClose} />
+      </Animated.View>
+      <KeyboardAvoidingView
+        style={[styles.container, { paddingTop: insets.top + TOP_GAP }]}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        pointerEvents="box-none"
+      >
+        <Animated.View
+          accessibilityElementsHidden={!isOpen}
+          importantForAccessibility={isOpen ? 'yes' : 'no-hide-descendants'}
+          style={[styles.sheet, { height: sheetHeight, paddingBottom: insets.bottom, transform: [{ translateY }] }]}
+        >
+          {children}
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: '#000000' },
+  container: { flex: 1, justifyContent: 'flex-end' },
+  sheet: {
+    flexShrink: 1,
+    backgroundColor: '#ffffff',
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    overflow: 'hidden',
+    elevation: 12,
+    shadowColor: '#000000',
+    shadowOpacity: 0.2,
+    shadowRadius: 12,
+  },
+});

package/src/chat/ChatView.tsx

@@ -0,0 +1,127 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Linking, StyleSheet, Text, View } from 'react-native';
+import type { WebViewMessageEvent } from 'react-native-webview';
+
+import type { WidgetProof } from '../backend/backend-transport.ts';
+import type { MessageMetadata } from '../backend/message-metadata.ts';
+import type { UnknownRecord } from '../fiber/narrow.ts';
+import { buildEventScript, buildResolveScript, parsePageMessage, type PageMessage } from './bridge.ts';
+import type { SessionRequest } from './chat-coordinator.ts';
+import { type ChatNavigation, leavesChat } from './navigation.ts';
+import { buildWidgetShell, type WidgetShellOptions } from './widget-shell.ts';
+import { loadWebView, type WebViewHandle } from './webview.ts';
+
+export interface ChatViewProps {
+  shell: WidgetShellOptions;
+  unavailableText: string;
+  getMetadata: (options: { includeTextDom: boolean }) => Promise<MessageMetadata | null>;
+  getProof: () => Promise<WidgetProof | null>;
+  onClosed: () => void;
+  onSessionChanged: (sessionId: number | null) => void;
+  open: boolean;
+  sessionRequest: SessionRequest | null;
+  log?: (message: string) => void;
+}
+
+const WebView = loadWebView();
+
+export function ChatView({ shell, unavailableText, getMetadata, getProof, onClosed, onSessionChanged, open, sessionRequest, log }: ChatViewProps): React.JSX.Element {
+  const handle = useRef<WebViewHandle | null>(null);
+  const html = useMemo(() => buildWidgetShell(shell), [shell]);
+
+  const answer = useCallback((id: string, value: unknown, error: string | null) => {
+    handle.current?.injectJavaScript(buildResolveScript(id, value, error));
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      handle.current?.injectJavaScript(buildEventScript('open', null));
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (sessionRequest !== null) {
+      handle.current?.injectJavaScript(buildEventScript('openSession', { sessionId: sessionRequest.sessionId }));
+    }
+  }, [sessionRequest]);
+
+  const handleCall = useCallback(
+    async (message: Extract<PageMessage, { kind: 'call' }>) => {
+      try {
+        const value = message.name === 'metadata' ? await getMetadata({ includeTextDom: readIncludeTextDom(message.args) }) : await getProof();
+        answer(message.id, value, null);
+      } catch (error) {
+        answer(message.id, null, error instanceof Error ? error.message : String(error));
+      }
+    },
+    [answer, getMetadata, getProof],
+  );
+
+  const onMessage = useCallback(
+    (event: WebViewMessageEvent) => {
+      const message = parsePageMessage(event.nativeEvent.data);
+      if (message === null) {
+        return;
+      }
+      if (message.kind === 'call') {
+        void handleCall(message);
+      } else if (message.kind === 'closed') {
+        onClosed();
+      } else if (message.kind === 'session') {
+        onSessionChanged(message.sessionId);
+      } else if (message.kind === 'log') {
+        log?.(`webview ${message.level}: ${message.text}`);
+      } else {
+        log?.('webview ready');
+      }
+    },
+    [handleCall, log, onClosed, onSessionChanged],
+  );
+
+  const onNavigation = useCallback(
+    (navigation: ChatNavigation) => {
+      if (!leavesChat(navigation, shell.apiBaseUrl)) {
+        return true;
+      }
+      Linking.openURL(navigation.url).catch(() => log?.('chat link could not be opened'));
+      return false;
+    },
+    [log, shell.apiBaseUrl],
+  );
+
+  if (WebView === null) {
+    return (
+      <View style={styles.fallback}>
+        <Text style={styles.fallbackText}>{unavailableText}</Text>
+      </View>
+    );
+  }
+  return (
+    <WebView
+      ref={handle}
+      style={styles.webview}
+      originWhitelist={['*']}
+      source={{ html, baseUrl: shell.apiBaseUrl }}
+      javaScriptEnabled
+      domStorageEnabled
+      mixedContentMode="always"
+      setSupportMultipleWindows={false}
+      keyboardDisplayRequiresUserAction={false}
+      automaticallyAdjustContentInsets={false}
+      overScrollMode="never"
+      onMessage={onMessage}
+      onShouldStartLoadWithRequest={onNavigation}
+      onError={(event) => log?.(`webview load error: ${event.nativeEvent.description}`)}
+    />
+  );
+}
+
+function readIncludeTextDom(args: UnknownRecord): boolean {
+  return args.includeTextDom === true;
+}
+
+const styles = StyleSheet.create({
+  webview: { flex: 1, backgroundColor: 'transparent' },
+  fallback: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
+  fallbackText: { color: '#6b7280', textAlign: 'center' },
+});

package/src/chat/Launcher.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useInsets } from '../ui/useInsets.ts';
+
+export interface LauncherPlacement {
+  side: 'left' | 'right';
+  offsetX: number;
+  offsetY: number;
+}
+
+export interface LauncherProps {
+  unread: number;
+  label: string;
+  color: string;
+  placement: LauncherPlacement;
+  onPress: () => void;
+}
+
+const SIZE = 56;
+
+export function Launcher({ unread, label, color, placement, onPress }: LauncherProps): React.JSX.Element {
+  const insets = useInsets();
+  const horizontal = placement.side === 'left' ? { left: placement.offsetX } : { right: placement.offsetX };
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      style={[styles.button, horizontal, { bottom: insets.bottom + placement.offsetY, backgroundColor: color }]}
+    >
+      <View style={styles.bubble}>
+        <View style={styles.tail} />
+      </View>
+      {unread > 0 ? (
+        <View style={styles.badge}>
+          <Text style={styles.badgeText}>{unread > 9 ? '9+' : String(unread)}</Text>
+        </View>
+      ) : null}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    position: 'absolute',
+    width: SIZE,
+    height: SIZE,
+    borderRadius: SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 6,
+    shadowColor: '#000000',
+    shadowOpacity: 0.25,
+    shadowRadius: 6,
+  },
+  bubble: { width: 26, height: 20, borderRadius: 8, backgroundColor: '#ffffff' },
+  tail: { position: 'absolute', left: 4, bottom: -5, width: 0, height: 0, borderLeftWidth: 5, borderRightWidth: 5, borderTopWidth: 7, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderTopColor: '#ffffff' },
+  badge: {
+    position: 'absolute',
+    top: -2,
+    right: -2,
+    minWidth: 20,
+    height: 20,
+    paddingHorizontal: 5,
+    borderRadius: 10,
+    backgroundColor: '#ef4444',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeText: { color: '#ffffff', fontSize: 11, fontWeight: '700' },
+});

package/src/chat/bridge.ts

@@ -0,0 +1,56 @@
+import { isRecord, nonEmptyString, type UnknownRecord } from '../fiber/narrow.ts';
+
+export type NativeCallName = 'metadata' | 'proof';
+
+export type PageMessage =
+  | { kind: 'ready' }
+  | { kind: 'closed' }
+  | { kind: 'session'; sessionId: number | null }
+  | { kind: 'call'; id: string; name: NativeCallName; args: UnknownRecord }
+  | { kind: 'log'; level: string; text: string };
+
+const CALL_NAMES: readonly NativeCallName[] = ['metadata', 'proof'];
+
+function isCallName(value: unknown): value is NativeCallName {
+  return CALL_NAMES.some((name) => name === value);
+}
+
+export function parsePageMessage(raw: string): PageMessage | null {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (!isRecord(parsed)) {
+    return null;
+  }
+  switch (parsed.kind) {
+    case 'ready':
+      return { kind: 'ready' };
+    case 'closed':
+      return { kind: 'closed' };
+    case 'session':
+      return typeof parsed.sessionId === 'number' || parsed.sessionId === null ? { kind: 'session', sessionId: parsed.sessionId } : null;
+    case 'log':
+      return typeof parsed.text === 'string' ? { kind: 'log', level: nonEmptyString(parsed.level) ?? 'log', text: parsed.text } : null;
+    case 'call': {
+      const id = nonEmptyString(parsed.id);
+      return id !== null && isCallName(parsed.name) ? { kind: 'call', id, name: parsed.name, args: isRecord(parsed.args) ? parsed.args : {} } : null;
+    }
+    default:
+      return null;
+  }
+}
+
+function safeJson(value: unknown): string {
+  return JSON.stringify(value ?? null).replace(/</g, '\\u003c').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029');
+}
+
+export function buildResolveScript(id: string, value: unknown, error: string | null): string {
+  return `window.__blarNative && window.__blarNative.resolve(${safeJson(id)}, ${safeJson(value)}, ${safeJson(error)}); true;`;
+}
+
+export function buildEventScript(name: string, payload: unknown): string {
+  return `window.__blarNative && window.__blarNative.event(${safeJson(name)}, ${safeJson(payload)}); true;`;
+}