@blario/react-native 0.0.0-stage → 0.1.0

package/src/chat/chat-coordinator.ts

@@ -0,0 +1,189 @@
+import { isRecord } from '../fiber/narrow.ts';
+import { parseFrameNudge, type NudgeView } from '../nudge/nudge.ts';
+import { type ChatEvent, type ChatState, INITIAL_CHAT_STATE, reduceChat } from './chat-state.ts';
+
+export interface ChatBackend {
+  getSessionId: () => number | null;
+  openNudge: () => Promise<number | null>;
+  dismissNudge: (milestoneMessageId: number) => Promise<void>;
+  snoozeNudge: (milestoneMessageId: number) => Promise<void>;
+  switchSession: (sessionId: number) => Promise<void>;
+}
+
+export interface ChatEvents {
+  onSessionReplaced?: () => void;
+}
+
+export interface SessionRequest {
+  id: number;
+  sessionId: number;
+}
+
+export interface ChatSnapshot {
+  chat: ChatState;
+  nudge: NudgeView | null;
+  chatKey: number;
+  mounted: boolean;
+  sessionRequest: SessionRequest | null;
+}
+
+type Listener = (snapshot: ChatSnapshot) => void;
+
+const VISIBLE_ROLES: readonly string[] = ['ai', 'agent'];
+
+export class ChatCoordinator {
+  private chat: ChatState = INITIAL_CHAT_STATE;
+
+  private nudge: NudgeView | null = null;
+
+  private nudgeLatched = false;
+
+  private chatKey = 0;
+
+  private mounted = false;
+
+  private sessionRequest: SessionRequest | null = null;
+
+  private snapshot: ChatSnapshot;
+
+  private readonly listeners = new Set<Listener>();
+
+  constructor(
+    private readonly backend: ChatBackend,
+    private readonly events: ChatEvents = {},
+  ) {
+    this.snapshot = this.buildSnapshot();
+  }
+
+  getSnapshot(): ChatSnapshot {
+    return this.snapshot;
+  }
+
+  subscribe(listener: Listener): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  open(): void {
+    this.mounted = true;
+    this.nudge = null;
+    this.nudgeLatched = false;
+    this.dispatch({ type: 'open' });
+  }
+
+  close(): void {
+    this.dispatch({ type: 'close' });
+  }
+
+  agentEngaged(): void {
+    this.dispatch({ type: 'agent_started' });
+  }
+
+  agentReleased(): void {
+    this.dispatch({ type: 'agent_finished' });
+    this.open();
+  }
+
+  handleFrame(frame: Record<string, unknown>): void {
+    const type = typeof frame.type === 'string' ? frame.type : '';
+    if (type === 'activation_session_started') {
+      this.followStartedSession(frame);
+      return;
+    }
+    if (type === 'message' && this.isVisibleMessage(frame)) {
+      this.dispatch({ type: 'message_arrived' });
+    }
+    const nudge = parseFrameNudge(frame, this.backend.getSessionId());
+    if (nudge !== null) {
+      this.surfaceNudge(nudge);
+    }
+  }
+
+  async acceptNudge(): Promise<void> {
+    const nudge = this.nudge;
+    if (nudge === null) {
+      return;
+    }
+    this.hideNudge();
+    const accepted = nudge.continuation ? null : await this.backend.openNudge().catch(() => null);
+    const sessionId = accepted ?? nudge.sessionId;
+    if (sessionId !== null && sessionId !== this.backend.getSessionId()) {
+      await this.backend.switchSession(sessionId).catch(() => undefined);
+    }
+    if (sessionId !== null) {
+      this.sessionRequest = { id: (this.sessionRequest?.id ?? 0) + 1, sessionId };
+    }
+    this.open();
+  }
+
+  declineNudge(): void {
+    this.reportAndHide((milestoneId) => this.backend.dismissNudge(milestoneId));
+  }
+
+  snoozeNudge(): void {
+    this.reportAndHide((milestoneId) => this.backend.snoozeNudge(milestoneId));
+    this.nudgeLatched = false;
+  }
+
+  reset(): void {
+    this.nudge = null;
+    this.nudgeLatched = false;
+    this.chat = INITIAL_CHAT_STATE;
+    this.chatKey += 1;
+    this.publish();
+  }
+
+  private followStartedSession(frame: Record<string, unknown>): void {
+    const sessionId = typeof frame.session_id === 'number' ? frame.session_id : null;
+    if (sessionId === null || sessionId === this.backend.getSessionId()) {
+      return;
+    }
+    this.events.onSessionReplaced?.();
+    this.backend.switchSession(sessionId).catch(() => undefined);
+  }
+
+  private isVisibleMessage(frame: Record<string, unknown>): boolean {
+    const message = isRecord(frame.message) ? frame.message : null;
+    if (message === null || typeof message.role !== 'string' || !VISIBLE_ROLES.includes(message.role)) {
+      return false;
+    }
+    const body = typeof message.body === 'string' ? message.body : typeof message.text === 'string' ? message.text : '';
+    return body.trim().length > 0;
+  }
+
+  private surfaceNudge(nudge: NudgeView): void {
+    if (this.chat.mode === 'open' || this.nudgeLatched) {
+      return;
+    }
+    this.nudgeLatched = true;
+    this.nudge = nudge;
+    this.publish();
+  }
+
+  private reportAndHide(report: (milestoneMessageId: number) => Promise<void>): void {
+    const milestoneId = this.nudge?.milestoneMessageId ?? null;
+    this.hideNudge();
+    if (milestoneId !== null) {
+      report(milestoneId).catch(() => undefined);
+    }
+  }
+
+  private hideNudge(): void {
+    this.nudge = null;
+    this.publish();
+  }
+
+  private dispatch(event: ChatEvent): void {
+    this.chat = reduceChat(this.chat, event);
+    this.publish();
+  }
+
+  private publish(): void {
+    this.snapshot = this.buildSnapshot();
+    this.listeners.forEach((listener) => listener(this.snapshot));
+  }
+
+  private buildSnapshot(): ChatSnapshot {
+    return { chat: this.chat, nudge: this.nudge, chatKey: this.chatKey, mounted: this.mounted, sessionRequest: this.sessionRequest };
+  }
+}

package/src/chat/chat-state.ts

@@ -0,0 +1,35 @@
+export type SheetMode = 'closed' | 'open' | 'collapsed';
+
+export interface ChatState {
+  mode: SheetMode;
+  unread: number;
+  agentWorking: boolean;
+}
+
+export type ChatEvent =
+  | { type: 'open' }
+  | { type: 'close' }
+  | { type: 'agent_started' }
+  | { type: 'agent_finished' }
+  | { type: 'message_arrived' };
+
+export const INITIAL_CHAT_STATE: ChatState = { mode: 'closed', unread: 0, agentWorking: false };
+
+export function reduceChat(state: ChatState, event: ChatEvent): ChatState {
+  switch (event.type) {
+    case 'open':
+      return { ...state, mode: 'open', unread: 0 };
+    case 'close':
+      return { ...state, mode: 'closed' };
+    case 'agent_started':
+      return { ...state, agentWorking: true, mode: state.mode === 'open' ? 'collapsed' : state.mode };
+    case 'agent_finished':
+      return { ...state, agentWorking: false };
+    case 'message_arrived':
+      return state.mode === 'open' ? state : { ...state, unread: state.unread + 1 };
+  }
+}
+
+export function shouldShowLauncher(state: ChatState): boolean {
+  return state.mode !== 'open' && !state.agentWorking;
+}

package/src/chat/navigation.ts

@@ -0,0 +1,15 @@
+export interface ChatNavigation {
+  url: string;
+  isTopFrame: boolean;
+}
+
+function documentOf(url: string): string {
+  return url.replace(/#.*$/, '').replace(/\/+$/, '');
+}
+
+export function leavesChat(navigation: ChatNavigation, documentUrl: string): boolean {
+  if (navigation.isTopFrame === false || navigation.url.startsWith('about:')) {
+    return false;
+  }
+  return documentOf(navigation.url) !== documentOf(documentUrl);
+}

package/src/chat/options.ts

@@ -0,0 +1,39 @@
+import type { LauncherPlacement } from './Launcher.tsx';
+
+export interface LauncherOptions {
+  visible?: boolean;
+  side?: 'left' | 'right';
+  offsetX?: number;
+  offsetY?: number;
+}
+
+export interface ChatOptions {
+  enabled?: boolean;
+  launcher?: LauncherOptions;
+  primaryColor?: string;
+  scriptUrl?: string;
+}
+
+export interface ResolvedChatOptions {
+  enabled: boolean;
+  launcherVisible: boolean;
+  placement: LauncherPlacement;
+  primaryColor: string;
+  widgetColor: string | null;
+  scriptUrl: string | null;
+}
+
+const DEFAULT_COLOR = '#7C3AED';
+const DEFAULT_OFFSET = 16;
+
+export function resolveChatOptions(options: ChatOptions | undefined): ResolvedChatOptions {
+  const launcher = options?.launcher;
+  return {
+    enabled: options?.enabled !== false,
+    launcherVisible: launcher?.visible !== false,
+    placement: { side: launcher?.side ?? 'right', offsetX: launcher?.offsetX ?? DEFAULT_OFFSET, offsetY: launcher?.offsetY ?? DEFAULT_OFFSET },
+    primaryColor: options?.primaryColor ?? DEFAULT_COLOR,
+    widgetColor: options?.primaryColor ?? null,
+    scriptUrl: options?.scriptUrl ?? null,
+  };
+}

package/src/chat/webview.ts

@@ -0,0 +1,23 @@
+import type { ComponentType, Ref } from 'react';
+import type { WebViewProps } from 'react-native-webview';
+
+import { isFunction, isRecord } from '../fiber/narrow.ts';
+
+export interface WebViewHandle {
+  injectJavaScript: (script: string) => void;
+  reload: () => void;
+}
+
+export type WebViewComponent = ComponentType<WebViewProps & { ref?: Ref<WebViewHandle> }>;
+
+declare const require: (moduleName: string) => unknown;
+
+export function loadWebView(): WebViewComponent | null {
+  try {
+    const loaded = require('react-native-webview');
+    const candidate = isRecord(loaded) ? (loaded.WebView ?? loaded.default) : null;
+    return isFunction(candidate) || isRecord(candidate) ? (candidate as unknown as WebViewComponent) : null;
+  } catch {
+    return null;
+  }
+}