@webotme/react-native 0.1.1 → 0.1.2

package/src/index.ts

@@ -10,7 +10,61 @@ export type { WebotMeLauncherProps, LauncherPosition } from "./launcher";
 export { WebotMeClient } from "./client";
 export type { SendResult } from "./client";
 
+export {
+  chatWithUs,
+  configureChat,
+  resetChat,
+  updateChatScreenContext,
+  useChat,
+  subscribeChat,
+  getChatState,
+  getChatSessionId,
+} from "./chat";
+export type { ChatResult } from "./chat";
+
+export {
+  configureVoice,
+  isVoiceSupported,
+  setVoiceReplies,
+  speakReplyIfEnabled,
+  speakWithUs,
+  stopVoice,
+  useVoiceChat,
+  voiceWithUs,
+} from "./voice";
+export type { VoiceOptions, VoiceResult, VoiceState } from "./voice";
+
 export { WebotMeError } from "./types";
+export {
+  executeAction,
+  executeActions,
+  resetExecutorState,
+  setupExecutor,
+  type ExecutorOptions,
+} from "./executor";
+export {
+  getCurrentRoute,
+  goBack,
+  navigateTo,
+  setCurrentRoute,
+  useNavigationAdapter,
+} from "./navigationAdapter";
+export {
+  isActionAllowed,
+  isBlocked,
+  needsConfirmation,
+  requireConfirmation,
+  setupSafetyLayer,
+} from "./safety";
+export {
+  registerScreenTree,
+  scanScreen,
+  setupFiberScanner,
+  stopFiberScanner,
+  useFiberScanner,
+  findClickHandler,
+  findFillHandler,
+} from "./screenScanner";
 export type {
   WebotMeAction,
   WebotMeButton,

package/src/lazy-webview.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+/**
+ * `react-native-webview` is a native module, so importing it at the top of a
+ * file breaks any app that runs in Expo Go or a plain JS bundle. The web
+ * variant is the only thing that needs it, so it is resolved on first render
+ * instead — apps that only use `chatWithUs` never touch it.
+ */
+
+type AnyProps = Record<string, unknown>;
+
+function MissingWebView() {
+  return (
+    <View style={styles.wrap}>
+      <Text style={styles.title}>Web chat needs a development build</Text>
+      <Text style={styles.body}>
+        react-native-webview is a native module, so it is not available in Expo Go.
+      </Text>
+      <Text style={styles.body}>
+        Run "npx expo run:android" / "npx expo run:ios", or use an EAS build. If you
+        only need text chat, use variant="native" or the chatWithUs function.
+      </Text>
+    </View>
+  );
+}
+
+let resolved: React.ComponentType<AnyProps> | null = null;
+
+export function loadWebView(): React.ComponentType<AnyProps> {
+  if (resolved) return resolved;
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require("react-native-webview");
+    const candidate = mod?.WebView ?? mod?.default ?? mod;
+    resolved =
+      candidate && (typeof candidate === "function" || typeof candidate === "object")
+        ? (candidate as React.ComponentType<AnyProps>)
+        : MissingWebView;
+  } catch {
+    resolved = MissingWebView;
+  }
+
+  return resolved;
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    padding: 24,
+    backgroundColor: "#0f172a",
+  },
+  title: { color: "#f8fafc", fontSize: 15, fontWeight: "700", textAlign: "center" },
+  body: { color: "#94a3b8", fontSize: 13, textAlign: "center", lineHeight: 19 },
+});

package/src/navigationAdapter.ts

@@ -0,0 +1,58 @@
+import { useEffect } from "react";
+
+let lastRoute = "";
+
+/** Last route seen by the app. */
+export function getCurrentRoute(): string {
+  return lastRoute;
+}
+
+export function setCurrentRoute(route: string): void {
+  lastRoute = route;
+}
+
+/** Navigate imperatively using Expo Router's router. */
+export function navigateTo(route: string, params?: Record<string, any>): void {
+  try {
+    const router =
+      require("expo-router").default ?? require("expo-router").router;
+    if (params) (router as any)?.push?.({ pathname: route as any, params } as any);
+    else (router as any)?.push?.(route as any);
+  } catch {
+    /* no router available */
+  }
+}
+
+export function goBack(): void {
+  try {
+    const router =
+      require("expo-router").default ?? require("expo-router").router;
+    (router as any)?.back?.();
+  } catch {
+    /* noop */
+  }
+}
+
+/**
+ * Bridge the live Expo Router pathname into the scanner's screen map. Call
+ * this once from a component that sits inside the router context.
+ */
+export function useNavigationAdapter(): { route: string | undefined; back: () => void } {
+  let pathname: string | undefined;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const usePathname = require("expo-router").usePathname as () => string | undefined;
+    // Expo Router provides this hook inside the app root; if it is missing the
+    // scanner/scanner route just stays blank.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    pathname = usePathname();
+  } catch {
+    pathname = undefined;
+  }
+
+  useEffect(() => {
+    if (pathname) setCurrentRoute(pathname);
+  }, [pathname]);
+
+  return { route: pathname, back: goBack };
+}

package/src/provider.tsx

@@ -1,5 +1,6 @@
 import React, {
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -7,6 +8,17 @@ import React, {
   useState,
 } from "react";
 import { WebotMeClient } from "./client";
+import {
+  chatWithUs,
+  configureChat,
+  resetChat,
+  updateChatScreenContext,
+  useChat,
+} from "./chat";
+import { registerScreenTree, setupFiberScanner } from "./screenScanner";
+import { setupExecutor } from "./executor";
+import { setupSafetyLayer } from "./safety";
+import { useNavigationAdapter } from "./navigationAdapter";
 import type {
   WebotMeConfig,
   WebotMeContract,
@@ -85,16 +97,50 @@ export function WebotMeProvider({
     [botId, apiBaseUrl, timeoutMs],
   );
 
+  // Feed the same bot into the one-function chat engine so `chatWithUs` works
+  // in apps that only mounted the provider and nothing else.
+  useEffect(() => {
+    configureChat({ botId, apiBaseUrl, userId, theme, welcome, screenContext, timeoutMs });
+    // Only re-run when the bot itself changes; message sends must not reset it.
+  }, [botId, apiBaseUrl, userId, welcome, timeoutMs]);
+
+  // Keep the element tree snapshot fresh for the screen scanner.
+  useEffect(() => {
+    registerScreenTree(children);
+  }, [children]);
+
+  // Auto-start the screen scanner so it can feed live screen context.
+  useEffect(() => {
+    const stop = setupFiberScanner({ intervalMs: 2500 });
+    return stop;
+  }, []);
+
+  // Arm the action executor so server-returned actions run on their own.
+  useEffect(() => {
+    const unsubscribe = setupExecutor();
+    return unsubscribe;
+  }, []);
+
+  // Default safety gate: confirm sensitive actions, block configured keywords.
+  useEffect(() => {
+    const reset = setupSafetyLayer();
+    return reset;
+  }, []);
+
+  useEffect(() => {
+    updateChatScreenContext(screenContext);
+  }, [screenContext]);
+
   // Stable visitor id for the lifetime of the app install.
   const visitorRef = useRef<string>(userId || makeId("v"));
-  const [sessionId, setSessionId] = useState(() => makeId("s"));
-  const [messages, setMessages] = useState<WebotMeMessage[]>([]);
-  const [sending, setSending] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [contract, setContract] = useState<WebotMeContract | null>(null);
   const [attempt, setAttempt] = useState(0);
-  const [pendingWorkflow, setPendingWorkflow] = useState<WebotMePendingWorkflow | null>(null);
-  const [autoTask, setAutoTask] = useState<WebotMeAutoTask | null>(null);
+
+  // The engine owns the conversation so `chatWithUs` and `useWebotMeChat`
+  // always share one session and one transcript.
+  const engineState = useChat();
+  // Track the live route so the scanner + executor act on the current screen.
+  useNavigationAdapter();
 
   const chatBaseUrl = useMemo(
     () => (chatBaseUrlProp || apiBaseUrl).replace(/\/+$/, ""),
@@ -122,76 +168,27 @@ export function WebotMeProvider({
   // New session when the caller bumps resetKey.
   useEffect(() => {
     if (resetKey === undefined) return;
-    setSessionId(makeId("s"));
-    setMessages(welcome ? [botMessage(welcome)] : []);
-    setError(null);
-    setPendingWorkflow(null);
-    setAutoTask(null);
+    resetChat();
   }, [resetKey, welcome]);
 
-  const send = async (text: string) => {
-    const trimmed = text.trim();
-    if (!trimmed || sending) return;
-
-    const userMsg: WebotMeMessage = {
-      id: makeId("m"),
-      from: "user",
-      text: trimmed,
-      createdAt: Date.now(),
-    };
-    const pendingId = makeId("m");
-    setMessages((prev) => [
-      ...prev,
-      userMsg,
-      { id: pendingId, from: "bot", text: "", createdAt: Date.now(), pending: true },
-    ]);
-    setSending(true);
-    setError(null);
-
-    try {
-      const result = await client.send({
-        message: trimmed,
-        sessionId,
-        userId: visitorRef.current,
-        screenContext,
-      });
-      
-      // Handle new response format with actions, pendingWorkflow, autoTask
-      const botMsg: WebotMeMessage = {
-        id: pendingId,
-        from: "bot",
-        text: result.text || result.reply || "",
-        createdAt: Date.now(),
-        action: result.action ? result.actions?.[0] : undefined,
-      };
-      
-      setMessages((prev) =>
-        prev.map((m) =>
-          m.id === pendingId ? botMsg : m,
-        ),
-      );
-      
-      // Update workflow state
-      if (result.pendingWorkflow) {
-        setPendingWorkflow(result.pendingWorkflow);
-      } else if (result.autoTask) {
-        setAutoTask(result.autoTask);
-      } else if (!result.pendingWorkflow && !result.autoTask) {
-        // Only clear if server explicitly says no workflow
-        setPendingWorkflow(null);
-        setAutoTask(null);
-      }
-    } catch (err) {
-      const message = err instanceof Error ? err.message : "Something went wrong";
-      setError(message);
-      setMessages((prev) => prev.filter((m) => m.id !== pendingId));
-    } finally {
-      setSending(false);
-    }
-  };
+  const send = useCallback(
+    async (text: string) => {
+      await chatWithUs(text);
+    },
+    [],
+  );
 
   const retry = () => setAttempt((n) => n + 1);
-  const reset = () => setSessionId(makeId("s"));
+  const reset = () => resetChat();
+
+  const {
+    sessionId,
+    messages,
+    sending,
+    error,
+    pendingWorkflow,
+    autoTask,
+  } = engineState;
 
   const value = useMemo<WebotMeContextValue>(
     () => ({
@@ -221,6 +218,9 @@ export function WebotMeProvider({
       sending,
       error,
       contract,
+      send,
+      retry,
+      reset,
       pendingWorkflow,
       autoTask,
     ],
@@ -231,8 +231,4 @@ export function WebotMeProvider({
   );
 }
 
-function botMessage(text: string): WebotMeMessage {
-  return { id: makeId("m"), from: "bot", text, createdAt: Date.now() };
-}
-
 export type { WebotMeTheme } from "./types";

package/src/safety.ts

@@ -0,0 +1,72 @@
+import { Alert } from "react-native";
+import type { WebotMeAction } from "./types";
+
+type SafetyOptions = {
+  /** Show a confirmation before running any action. Default false. */
+  alwaysConfirm?: boolean;
+  /** URL/label substrings that make an action require confirmation. */
+  confirmKeywords?: string[];
+  /** URL/label substrings whose actions are blocked entirely. */
+  blockKeywords?: string[];
+};
+
+let options: SafetyOptions = {
+  alwaysConfirm: false,
+  confirmKeywords: ["delete", "remove", "cancel", "purchase", "checkout", "payment", "order", "logout"],
+  blockKeywords: [],
+};
+
+export function setupSafetyLayer(next?: Partial<SafetyOptions>): () => void {
+  const previous = options;
+  options = { ...options, ...next };
+  return () => {
+    options = previous;
+  };
+}
+
+function hazardText(action: WebotMeAction): string {
+  const parts = [
+    action.type,
+    (action as any).label ?? "",
+    (action as any).data?.url ?? "",
+    (action as any).data?.text ?? "",
+    (action as any).data?.label ?? "",
+    (action as any).data?.selector ?? "",
+  ];
+  return parts.join(" ").toLowerCase();
+}
+
+export function isBlocked(action: WebotMeAction): boolean {
+  const hay = hazardText(action);
+  return (options.blockKeywords ?? []).some((k) => k && hay.includes(k.toLowerCase()));
+}
+
+export function needsConfirmation(action: WebotMeAction): boolean {
+  if (options.alwaysConfirm) return true;
+  if (action.type === "checkout") return true;
+  const hay = hazardText(action);
+  return (options.confirmKeywords ?? []).some((k) => k && hay.includes(k.toLowerCase()));
+}
+
+/** Ask the user before running an action. Returns true if approved. */
+export function requireConfirmation(action: WebotMeAction): Promise<boolean> {
+  const label = (action as any).label ?? (action as any).data?.url ?? (action as any).data?.text ?? action.type;
+  return new Promise<boolean>((resolve) => {
+    Alert.alert(
+      "Allow this action?",
+      `${action.type}: ${label}`,
+      [
+        { text: "Cancel", style: "cancel", onPress: () => resolve(false) },
+        { text: "Allow", onPress: () => resolve(true) },
+      ],
+      { cancelable: true, onDismiss: () => resolve(false) },
+    );
+  });
+}
+
+/** Full gate used by the executor before every action run. */
+export async function isActionAllowed(action: WebotMeAction): Promise<boolean> {
+  if (isBlocked(action)) return false;
+  if (needsConfirmation(action)) return requireConfirmation(action);
+  return true;
+}

package/src/scan.txt

@@ -0,0 +1 @@
+��

package/src/screenHook.ts

@@ -0,0 +1,82 @@
+/**
+ * Screen hook: grab the live React tree by installing a minimal React
+ * DevTools global hook (the same seam the React DevTools overlay uses)
+ * *before* React / RN get to wire themselves in. An app that wants the
+ * full automatic screen scan should require this module as the very first
+ * import — typically via a tiny `entry.js` that replaces the package `main`.
+ *
+ * The package's own entry point can't do this alone: by the time
+ * `<WebotMeProvider>` renders, RN's ReactFabric module has already decided
+ * not to call into the hook. A file loaded *before* expo-router/entry can.
+ */
+
+let capturedRoot: any = null;
+
+function capture(root: any) {
+  try {
+    capturedRoot = root || null;
+  } catch {
+    /* noop */
+  }
+}
+
+export function installScreenHook(): void {
+  const g = globalThis as any;
+  const existing = g.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+  if (existing) {
+    // DevTools attached already: wrap commits so we capture the root too.
+    if (!existing.__weBotCapturedHook) {
+      const prev = existing.onCommitFiberRoot;
+      existing.onCommitFiberRoot = (id: any, root: any, ...rest: any[]) => {
+        capture(root);
+        try {
+          prev?.(id, root, ...rest);
+        } catch {
+          /* ignore */
+        }
+      };
+      existing.__weBotCapturedHook = true;
+    }
+    return;
+  }
+
+  const hook: any = {
+    isDisabled: false,
+    supportsFiber: true,
+    checkDCE: false,
+    renderers: new Map(),
+    internalModuleStop: undefined,
+    getFiberRoots(_id: any) {
+      return capturedRoot ? new Set([capturedRoot]) : new Set();
+    },
+    inject(internals: any) {
+      hook.injectedInternals = internals;
+      return 1;
+    },
+    onScheduleFiberRoot() {},
+    onCommitFiberRoot(_id: any, root: any) {
+      capture(root);
+    },
+    onCommitFiberUnmount() {},
+    onPostCommitFiberRoot() {},
+    setStrictMode() {},
+    registerInternalModuleStop() {},
+    overrideHookState() {},
+    supportsChunkDevMode: false,
+  };
+  g.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook;
+}
+
+installScreenHook();
+
+/** The committed React fiber root (HostRoot) of the app, or null if not yet. */
+export function getCapturedRootFiber(): any | null {
+  try {
+    const raw = capturedRoot;
+    if (!raw) return null;
+    return raw.current ? raw.current : raw;
+  } catch {
+    return null;
+  }
+}