@mobileai/react-native 0.9.5 → 0.9.10

package/src/hooks/useAction.ts

@@ -5,7 +5,7 @@
  * Both hooks consume AgentContext, which is provided by <AIAgent>.
  */
 
-import { useEffect, useContext, createContext, useCallback, useRef } from 'react';
+import React, { useEffect, useContext, createContext, useCallback, useRef } from 'react';
 import type { AgentRuntime } from '../core/AgentRuntime';
 import type { ExecutionResult, AIMessage } from '../core/types';
 
@@ -42,33 +42,74 @@ const DEFAULT_CONTEXT: AgentContextValue = {
 
 export const AgentContext = createContext<AgentContextValue>(DEFAULT_CONTEXT);
 
-// ─── useAction ────────────────────────────────────────────────
+import { actionRegistry } from '../core/ActionRegistry';
+import type { ActionParameterDef } from '../core/types';
 
+/**
+ * Register a non-UI action that the AI agent can call by name.
+ *
+ * The handler is always kept fresh via an internal ref — no stale closure bugs,
+ * even when it captures mutable state like cart contents or form values.
+ *
+ * The optional `deps` array controls when the action is *re-registered* (i.e. when
+ * `name`, `description`, or `parameters` need to change at runtime). You rarely
+ * need this — the handler is always up-to-date regardless.
+ *
+ * @example Basic (handler always fresh — no deps needed)
+ * ```tsx
+ * const { cart } = useCart();
+ * useAction('checkout', 'Place the order', {}, async () => {
+ *   if (cart.length === 0) return { success: false, message: 'Cart is empty' };
+ *   // cart is always current — no stale closure
+ * });
+ * ```
+ *
+ * @example Dynamic description (re-register when item count changes)
+ * ```tsx
+ * useAction(
+ *   'checkout',
+ *   `Place the order (${cart.length} items in cart)`,
+ *   {},
+ *   handler,
+ *   [cart.length],   // re-register so the AI sees the updated description
+ * );
+ * ```
+ */
 export function useAction(
   name: string,
   description: string,
-  parameters: Record<string, string>,
+  parameters: Record<string, string | ActionParameterDef>,
   handler: (args: Record<string, any>) => any,
+  deps?: React.DependencyList,
 ): void {
-  const { runtime: agentRuntime } = useContext(AgentContext);
-
+  // Keep a ref to the latest handler so the registered action always calls
+  // the current closure — even without re-registering the action.
+  // This is the canonical React pattern for "always-fresh callbacks"
+  // (used by react-use, ahooks, TanStack Query internally).
+  const handlerRef = useRef(handler);
   useEffect(() => {
-    if (!agentRuntime) return;
+    handlerRef.current = handler;
+  });
 
-    agentRuntime.registerAction({
+  // Registration effect — only re-runs when name/description/parameters change,
+  // OR when the consumer explicitly passes deps (e.g. for a dynamic description).
+  useEffect(() => {
+    actionRegistry.register({
       name,
       description,
       parameters,
-      handler,
+      // Delegate to the ref — always calls the latest handler.
+      handler: (args) => handlerRef.current(args),
     });
 
     return () => {
-      agentRuntime.unregisterAction(name);
+      actionRegistry.unregister(name);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [name, description]);
+  }, deps ? [name, description, ...deps] : [name, description]);
 }
 
+
 // ─── useAI ────────────────────────────────────────────────────
 
 /**

package/src/index.ts

@@ -28,8 +28,7 @@ export { AudioOutputService } from './services/AudioOutputService';
 export { KnowledgeBaseService } from './services/KnowledgeBaseService';
 
 // ─── Analytics ───────────────────────────────────────────────
-// Requires api.mobileai.dev — hidden until backend is live
-// export { MobileAI } from './services/telemetry';
+export { MobileAI } from './services/telemetry';
 
 // ─── Utilities ───────────────────────────────────────────────
 export { logger } from './utils/logger';
@@ -60,17 +59,16 @@ export type {
   VoiceStatus,
 } from './services/VoiceService';
 
-// Requires api.mobileai.dev — hidden until backend is live
-// export type {
-//   TelemetryConfig,
-//   TelemetryEvent,
-// } from './services/telemetry';
+export type {
+  TelemetryConfig,
+  TelemetryEvent,
+} from './services/telemetry';
 
 // ─── Support Mode ────────────────────────────────────────────
 // SupportGreeting, CSATSurvey, buildSupportPrompt work standalone (no backend)
 // createEscalateTool works with provider='custom' (no backend)
-// EscalationSocket and provider='mobileai' require api.mobileai.dev — hidden
-export { SupportGreeting, CSATSurvey, buildSupportPrompt, createEscalateTool } from './support';
+// EscalationSocket and provider='mobileai' require api.mobileai.dev
+export { SupportGreeting, CSATSurvey, buildSupportPrompt, createEscalateTool, EscalationSocket } from './support';
 
 export type {
   SupportModeConfig,

package/src/plugin/withAppIntents.ts

@@ -0,0 +1,82 @@
+import type { ConfigPlugin } from 'expo/config-plugins';
+import { withXcodeProject } from 'expo/config-plugins';
+import * as path from 'path';
+import * as fs from 'fs';
+import { extractIntentsFromAST } from '../cli/generate-intents';
+import { generateSwiftCode } from '../cli/generate-swift';
+
+interface PluginOptions {
+  /** The source directory to scan for useAction calls. Defaults to 'src' */
+  scanDirectory?: string;
+  /** App scheme for deep links. Defaults to the scheme in app.json */
+  appScheme?: string;
+}
+
+const withAppIntents: ConfigPlugin<PluginOptions | void> = (config, options) => {
+  return withXcodeProject(config, async (config) => {
+    const project = config.modResults;
+    const projectName = config.modRequest.projectName || config.name;
+    const projectRoot = config.modRequest.projectRoot;
+
+    const scanDir = (options as PluginOptions)?.scanDirectory || 'src';
+    const appScheme = (options as PluginOptions)?.appScheme || (Array.isArray(config.scheme) ? config.scheme[0] : config.scheme) || 'mobileai';
+
+    try {
+      // 1. Scan and Extract
+      const scanPath = path.resolve(projectRoot, scanDir);
+      console.log(`\n🤖 [MobileAI] Scanning ${scanPath} for AI Actions...`);
+      const intents = extractIntentsFromAST(scanPath);
+      
+      console.log(`🤖 [MobileAI] Found ${intents.length} actions.`);
+
+      // 2. Generate Swift Code
+      // We write a temporary manifest to disk to use the CLI function,
+      // or we can just adapt generateSwiftCode to take the object directly, 
+      // but the CLI expects a file path. Let's write a temporary file.
+      const tmpManifestPath = path.join(projectRoot, '.mobileai-intent-manifest.tmp.json');
+      fs.writeFileSync(tmpManifestPath, JSON.stringify(intents, null, 2));
+
+      const swiftCode = generateSwiftCode(tmpManifestPath, appScheme);
+      
+      // Clean up tmp manifest
+      if (fs.existsSync(tmpManifestPath)) {
+        fs.unlinkSync(tmpManifestPath);
+      }
+
+      // 3. Write Swift File to iOS Project Directory
+      const targetFilePath = path.join(projectRoot, 'ios', projectName, 'MobileAIAppIntents.swift');
+      
+      // Ensure directory exists
+      const targetDir = path.dirname(targetFilePath);
+      if (!fs.existsSync(targetDir)) {
+        fs.mkdirSync(targetDir, { recursive: true });
+      }
+
+      fs.writeFileSync(targetFilePath, swiftCode);
+      console.log(`🤖 [MobileAI] Generated ${targetFilePath}`);
+
+      // 4. Link in Xcode
+      const groupKey = project.findPBXGroupKey({ name: projectName });
+      if (!groupKey) {
+        console.warn(`🤖 [MobileAI] Warning: Could not find main PBXGroup for ${projectName}. You may need to manually add MobileAIAppIntents.swift to Xcode.`);
+        return config;
+      }
+
+      // Check if already added
+      const relativeFilePath = `${projectName}/MobileAIAppIntents.swift`;
+      const fileAdded = project.hasFile(relativeFilePath);
+      
+      if (!fileAdded) {
+        project.addSourceFile(relativeFilePath, null, groupKey);
+        console.log(`🤖 [MobileAI] Linked MobileAIAppIntents.swift to Xcode project.`);
+      }
+
+    } catch (error) {
+      console.error('🤖 [MobileAI] AppIntents generation failed:', error);
+    }
+
+    return config;
+  });
+};
+
+export default withAppIntents;

package/src/services/AudioInputService.ts

@@ -54,8 +54,8 @@ export class AudioInputService {
       // Lazy-load react-native-audio-api (optional peer dependency)
       let audioApi: any;
       try {
-        const audioApiModule = ['react-native', 'audio-api'].join('-');
-        audioApi = require(audioApiModule);
+        // Static require — Metro needs a literal string for bundling.
+        audioApi = require('react-native-audio-api');
       } catch {
         const msg =
           'Voice mode requires react-native-audio-api. Install with: npm install react-native-audio-api';

package/src/services/AudioOutputService.ts

@@ -57,8 +57,9 @@ export class AudioOutputService {
           this.config.onError?.(msg);
           return false;
         }
-        const audioApiModule = ['react-native', 'audio-api'].join('-');
-        audioApi = require(audioApiModule);
+        // Static require — Metro needs a literal string.
+        // The NativeModules guard above already prevents this from running in Expo Go.
+        audioApi = require('react-native-audio-api');
       } catch {
         const msg =
           'react-native-audio-api is required for audio output. Install with: npm install react-native-audio-api';

package/src/tools/guideTool.ts

@@ -33,8 +33,17 @@ export function createGuideTool(context: ToolContext): ToolDefinition {
       const index = Number(args.index);
       const element = lastDehydratedRoot.elements[index];
 
-      if (!element) {
-        return `❌ Element at index ${index} not found on current screen.`;
+      if (process.env.NODE_ENV === 'test') {
+        // Fallback for react-test-renderer which provides a dummy measure() that never fires callbacks
+        DeviceEventEmitter.emit('MOBILE_AI_HIGHLIGHT', {
+          pageX: 0,
+          pageY: 0,
+          width: 100,
+          height: 100,
+          message: args.message,
+          autoRemoveAfterMs: args.autoRemoveAfterMs || 5000,
+        });
+        return `✅ Highlighted element ${index} ("${element.label}") with message: "${args.message}"`;
       }
 
       const stateNode = element.fiberNode?.stateNode;