react-native-agentic-ai 0.5.4 → 0.5.6

package/src/components/AIAgent.tsx

@@ -41,8 +41,7 @@ interface AIAgentProps {
   model?: string;
   /** Navigation container ref (from useNavigationContainerRef) */
   navRef?: any;
-  /** UI language */
-  language?: 'en' | 'ar';
+
   /** Max agent steps per request */
   maxSteps?: number;
   /** Show/hide the chat bar */
@@ -52,7 +51,7 @@ interface AIAgentProps {
   /** Callback when agent completes */
   onResult?: (result: ExecutionResult) => void;
 
-  // ── Security (mirrors page-agent.js) ──────────────────────
+  // ── Security ──────────────────────
 
   /** Refs of elements the AI must NOT interact with */
   interactiveBlacklist?: React.RefObject<any>[];
@@ -101,7 +100,7 @@ export function AIAgent({
   apiKey,
   model = 'gemini-2.5-flash',
   navRef,
-  language = 'en',
+
   maxSteps = 10,
   showChatBar = true,
   children,
@@ -169,7 +168,7 @@ export function AIAgent({
   const config: AgentConfig = useMemo(() => ({
     apiKey,
     model,
-    language,
+    language: 'en',
     maxSteps,
     interactiveBlacklist,
     interactiveWhitelist,
@@ -185,7 +184,7 @@ export function AIAgent({
     pathname,
     onStatusUpdate: setStatusText,
     onTokenUsage,
-    // Page-agent pattern: block the agent loop until user responds
+    // Block the agent loop until user responds
     onAskUser: mode === 'voice' ? undefined : ((question: string) => {
       return new Promise<string>((resolve) => {
         askUserResolverRef.current = resolve;
@@ -196,7 +195,7 @@ export function AIAgent({
       });
     }),
   }), [
-    mode, apiKey, model, language, maxSteps,
+    mode, apiKey, model, maxSteps,
     interactiveBlacklist, interactiveWhitelist,
     onBeforeStep, onAfterStep, onBeforeTask, onAfterTask,
     transformScreenContent, customTools, instructions, stepDelay,
@@ -250,13 +249,13 @@ export function AIAgent({
       logger.info('AIAgent', `Registering ${runtimeTools.length} tools with VoiceService: ${runtimeTools.map(t => t.name).join(', ')}`);
       // Use voice-adapted system prompt — same core rules as text mode
       // but without agent-loop directives that trigger autonomous actions
-      const voicePrompt = buildVoiceSystemPrompt(language, instructions?.system);
+      const voicePrompt = buildVoiceSystemPrompt('en', instructions?.system);
       logger.info('AIAgent', `📝 Voice system prompt (${voicePrompt.length} chars):\n${voicePrompt}`);
       voiceServiceRef.current = new VoiceService({
         apiKey,
         systemPrompt: voicePrompt,
         tools: runtimeTools,
-        language,
+        language: 'en',
       });
       logger.info('AIAgent', `VoiceService created with ${runtimeTools.length} tools: ${runtimeTools.map(t => t.name).join(', ')}`);
     }
@@ -498,7 +497,7 @@ export function AIAgent({
       setIsVoiceConnected(false);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, apiKey, runtime, language, instructions]);
+  }, [mode, apiKey, runtime, instructions]);
 
   // ─── Stop Voice Session (full cleanup) ─────────────────────
 
@@ -572,59 +571,59 @@ export function AIAgent({
     <AgentContext.Provider value={runtime}>
       <View ref={rootViewRef} style={styles.root} collapsable={false}>
         {children}
-      </View>
 
-      {/* Overlay (shown while thinking) */}
-      <AgentOverlay visible={isThinking} statusText={statusText} />
-
-      {/* Chat bar */}
-      {showChatBar && (
-        <AgentChatBar
-          onSend={handleSend}
-          isThinking={isThinking}
-          lastResult={lastResult}
-          language={language}
-          onDismiss={() => setLastResult(null)}
-          availableModes={availableModes}
-          mode={mode}
-          onModeChange={(newMode) => {
-            logger.info('AIAgent', `Mode change: ${mode} → ${newMode}`);
-            setMode(newMode);
-          }}
-          isMicActive={isMicActive}
-          isSpeakerMuted={isSpeakerMuted}
-          isAISpeaking={isAISpeaking}
-          onStopSession={stopVoiceSession}
-          isVoiceConnected={isVoiceConnected}
-          onMicToggle={(active) => {
-            if (active && !isVoiceConnected) {
-              logger.warn('AIAgent', 'Cannot toggle mic — VoiceService not connected yet');
-              return;
-            }
-            logger.info('AIAgent', `Mic toggle: ${active ? 'ON' : 'OFF'}`);
-            setIsMicActive(active);
-            if (active) {
-              logger.info('AIAgent', 'Starting AudioInput...');
-              audioInputRef.current?.start().then((ok) => {
-                logger.info('AIAgent', `AudioInput start result: ${ok}`);
-              });
-            } else {
-              logger.info('AIAgent', 'Stopping AudioInput...');
-              audioInputRef.current?.stop();
-            }
-          }}
-          onSpeakerToggle={(muted) => {
-            logger.info('AIAgent', `Speaker toggle: ${muted ? 'MUTED' : 'UNMUTED'}`);
-            setIsSpeakerMuted(muted);
-            if (muted) {
-              audioOutputRef.current?.mute();
-            } else {
-              audioOutputRef.current?.unmute();
-            }
-          }}
+        {/* Overlay (shown while thinking) */}
+        <AgentOverlay visible={isThinking} statusText={statusText} />
+
+        {/* Chat bar */}
+        {showChatBar && (
+          <AgentChatBar
+            onSend={handleSend}
+            isThinking={isThinking}
+            lastResult={lastResult}
+            language={'en'}
+            onDismiss={() => setLastResult(null)}
+            availableModes={availableModes}
+            mode={mode}
+            onModeChange={(newMode) => {
+              logger.info('AIAgent', `Mode change: ${mode} → ${newMode}`);
+              setMode(newMode);
+            }}
+            isMicActive={isMicActive}
+            isSpeakerMuted={isSpeakerMuted}
+            isAISpeaking={isAISpeaking}
+            onStopSession={stopVoiceSession}
+            isVoiceConnected={isVoiceConnected}
+            onMicToggle={(active) => {
+              if (active && !isVoiceConnected) {
+                logger.warn('AIAgent', 'Cannot toggle mic — VoiceService not connected yet');
+                return;
+              }
+              logger.info('AIAgent', `Mic toggle: ${active ? 'ON' : 'OFF'}`);
+              setIsMicActive(active);
+              if (active) {
+                logger.info('AIAgent', 'Starting AudioInput...');
+                audioInputRef.current?.start().then((ok) => {
+                  logger.info('AIAgent', `AudioInput start result: ${ok}`);
+                });
+              } else {
+                logger.info('AIAgent', 'Stopping AudioInput...');
+                audioInputRef.current?.stop();
+              }
+            }}
+            onSpeakerToggle={(muted) => {
+              logger.info('AIAgent', `Speaker toggle: ${muted ? 'MUTED' : 'UNMUTED'}`);
+              setIsSpeakerMuted(muted);
+              if (muted) {
+                audioOutputRef.current?.mute();
+              } else {
+                audioOutputRef.current?.unmute();
+              }
+            }}
 
-        />
-      )}
+          />
+        )}
+      </View>
     </AgentContext.Provider>
   );
 }

package/src/core/AgentRuntime.ts

@@ -1,5 +1,5 @@
 /**
- * AgentRuntime — The main agent loop, inspired by page-agent.js.
+ * AgentRuntime — The main agent loop.
  *
  * Flow:
  * 1. Walk Fiber tree → detect interactive elements
@@ -52,7 +52,7 @@ export class AgentRuntime {
 
     this.registerBuiltInTools();
 
-    // Apply customTools — mirrors page-agent: null = remove, otherwise override
+    // Apply customTools
     if (config.customTools) {
       for (const [name, tool] of Object.entries(config.customTools)) {
         if (tool === null) {
@@ -237,7 +237,7 @@ export class AgentRuntime {
       },
     });
 
-    // ask_user — ask for clarification (mirrors page-agent: blocks until user responds)
+    // ask_user — ask for clarification
     this.tools.set('ask_user', {
       name: 'ask_user',
       description: 'Ask the user a question and wait for their answer. Use this if you need more information or clarification.',
@@ -246,7 +246,7 @@ export class AgentRuntime {
       },
       execute: async (args) => {
         if (this.config.onAskUser) {
-          // Page-agent pattern: block until user responds, then continue the loop
+          // Block until user responds, then continue the loop
           this.config.onStatusUpdate?.('Waiting for your answer...');
           const answer = await this.config.onAskUser(args.question);
           return `User answered: ${answer}`;
@@ -444,7 +444,7 @@ export class AgentRuntime {
   /**
    * Get current screen context as formatted text.
    * Used by voice mode: sent once at connect + after each tool call.
-   * Follows page-agent pattern: tree in user prompt, not system instructions.
+   * Tree goes in user prompt, not system instructions.
    */
   public getScreenContext(): string {
     try {
@@ -531,7 +531,7 @@ ${screen.elementsText}
     };
   }
 
-  // ─── Instructions (mirrors page-agent #getInstructions) ───────
+  // ─── Instructions ───────
 
   private getInstructions(screenName: string): string {
     const { instructions } = this.config;
@@ -556,7 +556,7 @@ ${screen.elementsText}
     return result ? `<instructions>\n${result}</instructions>\n\n` : '';
   }
 
-  // ─── Observation System (mirrors PageAgentCore.#handleObservations) ──
+  // ─── Observation System ──
 
   private observations: string[] = [];
   private lastScreenName: string = '';
@@ -581,7 +581,7 @@ ${screen.elementsText}
     }
   }
 
-  // ─── User Prompt Assembly (mirrors PageAgentCore.#assembleUserPrompt) ──
+  // ─── User Prompt Assembly ──
 
   private assembleUserPrompt(
     step: number,
@@ -595,7 +595,7 @@ ${screen.elementsText}
     // 1. <instructions> (optional system/screen instructions)
     prompt += this.getInstructions(screenName);
 
-    // 2. <agent_state> — user request + step info (mirrors page-agent)
+    // 2. <agent_state> — user request + step info
     prompt += '<agent_state>\n';
     prompt += '<user_request>\n';
     prompt += `${contextualMessage}\n`;
@@ -605,7 +605,7 @@ ${screen.elementsText}
     prompt += '</step_info>\n';
     prompt += '</agent_state>\n\n';
 
-    // 3. <agent_history> — structured per-step history (mirrors page-agent)
+    // 3. <agent_history> — structured per-step history
     prompt += '<agent_history>\n';
 
     let stepIndex = 0;
@@ -667,14 +667,14 @@ ${screen.elementsText}
 
     logger.info('AgentRuntime', `Starting execution: "${contextualMessage}"`);
 
-    // Lifecycle: onBeforeTask (mirrors page-agent)
+    // Lifecycle: onBeforeTask
     await this.config.onBeforeTask?.();
 
     try {
       for (let step = 0; step < maxSteps; step++) {
         logger.info('AgentRuntime', `===== Step ${step + 1}/${maxSteps} =====`);
 
-        // Lifecycle: onBeforeStep (mirrors page-agent)
+        // Lifecycle: onBeforeStep
         await this.config.onBeforeStep?.(step);
 
         // 1. Walk Fiber tree with security config and dehydrate screen
@@ -690,16 +690,16 @@ ${screen.elementsText}
         logger.info('AgentRuntime', `Screen: ${screen.screenName}`);
         logger.debug('AgentRuntime', `Dehydrated:\n${screen.elementsText}`);
 
-        // 2. Apply transformScreenContent (mirrors page-agent transformPageContent)
+        // 2. Apply transformScreenContent
         let screenContent = screen.elementsText;
         if (this.config.transformScreenContent) {
           screenContent = await this.config.transformScreenContent(screenContent);
         }
 
-        // 3. Handle observations (mirrors page-agent #handleObservations)
+        // 3. Handle observations
         this.handleObservations(step, maxSteps, screenName);
 
-        // 4. Assemble structured user prompt (mirrors page-agent #assembleUserPrompt)
+        // 4. Assemble structured user prompt
         const contextMessage = this.assembleUserPrompt(
           step, maxSteps, contextualMessage, screenName, screenContent,
         );
@@ -709,7 +709,7 @@ ${screen.elementsText}
 
         // 5. Send to AI provider
         this.config.onStatusUpdate?.('Analyzing screen...');
-        const systemPrompt = buildSystemPrompt(this.config.language || 'en');
+        const systemPrompt = buildSystemPrompt('en');
         const tools = this.buildToolsForProvider();
 
         logger.info('AgentRuntime', `Sending to AI with ${tools.length} tools...`);
@@ -789,7 +789,7 @@ ${screen.elementsText}
         };
         this.history.push(agentStep);
 
-        // Lifecycle: onAfterStep (mirrors page-agent)
+        // Lifecycle: onAfterStep
         await this.config.onAfterStep?.(this.history);
 
         // Check if done
@@ -817,7 +817,7 @@ ${screen.elementsText}
           return result;
         }
 
-        // Step delay (mirrors page-agent stepDelay)
+        // Step delay
         await new Promise(resolve => setTimeout(resolve, stepDelay));
       }
 

package/src/core/FiberTreeWalker.ts

@@ -1,22 +1,21 @@
 /**
  * FiberTreeWalker — Traverses React's Fiber tree to discover interactive elements.
  *
- * This is the React Native equivalent of page-agent.js reading the DOM.
+ * Walks the React Native fiber tree to extract a text representation of the UI.
  * Instead of traversing HTML nodes, we traverse React Fiber nodes and detect
  * interactive elements by their type and props (onPress, onChangeText, etc.).
  *
- * Architecture inspired by: https://github.com/alibaba/page-agent
  */
 
 import { logger } from '../utils/logger';
 import type { InteractiveElement, ElementType } from './types';
 
-// ─── Walk Configuration (mirrors page-agent DomConfig) ─────────
+// ─── Walk Configuration ─────────
 
 export interface WalkConfig {
-  /** React refs of elements to exclude — mirrors page-agent interactiveBlacklist */
+  /** React refs of elements to exclude */
   interactiveBlacklist?: React.RefObject<any>[];
-  /** If set, only these elements are interactive — mirrors page-agent interactiveWhitelist */
+  /** If set, only these elements are interactive */
   interactiveWhitelist?: React.RefObject<any>[];
 }
 
@@ -53,14 +52,14 @@ const RN_INTERNAL_NAMES = new Set([
   'AnimatedComponentWrapper', 'Animated',
 ]);
 
-// ─── State Extraction (mirrors page-agent DEFAULT_INCLUDE_ATTRIBUTES) ──
+// ─── State Extraction ──
 
 /** Props to extract as state attributes — covers lazy devs who skip accessibility */
 const STATE_PROPS = ['value', 'checked', 'selected', 'active', 'on', 'isOn', 'toggled', 'enabled'];
 
 /**
  * Extract state attributes from a fiber node's props.
- * Mirrors page-agent's DEFAULT_INCLUDE_ATTRIBUTES extraction.
+ * Extracts meaningful state from a fiber node.
  * Priority: accessibilityState > accessibilityRole > direct scalar props.
  */
 function extractStateAttributes(props: any): string {
@@ -319,7 +318,7 @@ function getFiberFromRef(ref: any): any | null {
 
 /**
  * Check if a Fiber node matches any ref in the given list.
- * Mirrors page-agent.js: `interactiveBlacklist.includes(element)`
+ * Checks if an element is excluded from AI interaction
  * We compare the Fiber's stateNode (native instance) against ref.current.
  */
 function matchesRefList(node: any, refs?: React.RefObject<any>[]): boolean {
@@ -402,7 +401,7 @@ export function walkFiberTree(rootRef: any, config?: WalkConfig): WalkResult {
         props: { ...props },
       });
 
-      // Build output tag with state attributes (mirrors page-agent format)
+      // Build output tag with state attributes
       const stateAttrs = extractStateAttributes(props);
       const attrStr = stateAttrs ? ` ${stateAttrs}` : '';
       const textContent = label || '';

package/src/core/ScreenDehydrator.ts

@@ -1,6 +1,6 @@
 /**
  * ScreenDehydrator — Converts discovered interactive elements into
- * a text representation for the LLM, matching page-agent.js format.
+ * a text representation for the LLM.
  *
  * Output example:
  * ```

package/src/core/systemPrompt.ts

@@ -1,8 +1,8 @@
 /**
- * System prompt for the AI agent — adapted from page-agent reference.
+ * System prompt for the AI agent.
  *
  * Separated into its own file for maintainability.
- * The prompt uses XML-style tags (matching page-agent's structure)
+ * The prompt uses XML-style tags
  * to give the LLM clear, structured instructions.
  */
 

package/src/core/types.ts

@@ -1,5 +1,5 @@
 /**
- * Core types for the page-agent-style React Native AI SDK.
+ * Core types for the React Native AI SDK.
  */
 
 // ─── Agent Modes ──────────────────────────────────────────────
@@ -61,27 +61,27 @@ export interface AgentStep {
 export interface AgentConfig {
   apiKey: string;
   model?: string;
-  language?: 'en' | 'ar';
 
-  /** Maximum steps per task (page-agent default: 40) */
+
+  /** Maximum steps per task */
   maxSteps?: number;
 
-  // ─── Element Gating (mirrors page-agent interactiveBlacklist/Whitelist) ──
+  // ─── Element Gating ──
 
   /**
    * React refs of elements the AI must NOT interact with.
-   * Mirrors page-agent.js `interactiveBlacklist: Element[]`.
+   * Refs of elements the AI must NOT interact with.
    * The Fiber walker skips any node whose ref matches one in this list.
    */
   interactiveBlacklist?: React.RefObject<any>[];
 
   /**
    * If set, the AI can ONLY interact with these elements.
-   * Mirrors page-agent.js `interactiveWhitelist: Element[]`.
+   * If set, AI can ONLY interact with these elements.
    */
   interactiveWhitelist?: React.RefObject<any>[];
 
-  // ─── Lifecycle Hooks (mirrors page-agent onBefore/AfterStep/Task) ───────
+  // ─── Lifecycle Hooks ───────
 
   /** Called before each agent step. */
   onBeforeStep?: (stepCount: number) => Promise<void> | void;
@@ -95,25 +95,25 @@ export interface AgentConfig {
   /** Called after task completes (success or failure). */
   onAfterTask?: (result: ExecutionResult) => Promise<void> | void;
 
-  // ─── Content Masking (mirrors page-agent transformPageContent) ──────────
+  // ─── Content Masking ──────────
 
   /**
    * Transform dehydrated screen text before sending to LLM.
    * Use to mask sensitive data (credit cards, PII, etc).
-   * Mirrors page-agent.js `transformPageContent`.
+   * Transform screen content before the LLM sees it (for data masking).
    */
   transformScreenContent?: (content: string) => Promise<string> | string;
 
-  // ─── Custom Tools (mirrors page-agent customTools) ─────────────────────
+  // ─── Custom Tools ─────────────────────
 
   /**
    * Override or remove built-in tools.
    * Set tool to `null` to remove it (e.g., `{ navigate: null }`).
-   * Mirrors page-agent.js `customTools: Record<string, Tool | null>`.
+   * Override or remove built-in tools (null = remove).
    */
   customTools?: Record<string, ToolDefinition | null>;
 
-  // ─── Instructions (mirrors page-agent instructions) ────────────────────
+  // ─── Instructions ────────────────────
 
   /** Instructions to guide the agent's behavior. */
   instructions?: {
@@ -122,12 +122,12 @@ export interface AgentConfig {
     /**
      * Dynamic per-screen instructions callback.
      * Called before each step to get instructions for the current screen.
-     * Mirrors page-agent.js `getPageInstructions(url)`.
+     * Per-screen instructions callback.
      */
     getScreenInstructions?: (screenName: string) => string | undefined | null;
   };
 
-  /** Delay between steps in ms (page-agent default: 400ms). */
+  /** Delay between steps in ms. */
   stepDelay?: number;
 
   // ─── Status Updates ──────────────────────────────────────────────────────
@@ -146,7 +146,7 @@ export interface AgentConfig {
 
   /**
    * Callback for when agent needs user input (ask_user tool).
-   * Mirrors page-agent: the agent loop blocks until the user responds.
+   * The agent loop blocks until the user responds.
    * If not set, ask_user tool will break the loop (legacy behavior).
    * @example onAskUser: (q) => new Promise(resolve => showPrompt(q, resolve))
    */

package/src/index.ts

@@ -1,5 +1,5 @@
 /**
- * @mobileai/react-native — Page-Agent Architecture
+ * @mobileai/react-native
  *
  * Zero-wrapper AI agent for React Native.
  * Auto-detects interactive elements via React Fiber tree traversal.

package/lib/typescript/fetch-models.d.mts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=fetch-models.d.mts.map

package/lib/typescript/fetch-models.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fetch-models.d.mts","sourceRoot":"","sources":["../../fetch-models.mjs"],"names":[],"mappings":""}

package/lib/typescript/list-all-models.d.mts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=list-all-models.d.mts.map

package/lib/typescript/list-all-models.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"list-all-models.d.mts","sourceRoot":"","sources":["../../list-all-models.mjs"],"names":[],"mappings":""}

package/lib/typescript/list-models.d.mts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=list-models.d.mts.map

package/lib/typescript/list-models.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"list-models.d.mts","sourceRoot":"","sources":["../../list-models.mjs"],"names":[],"mappings":""}