@vanira/sdk-react-native 0.0.2

package/src/presets/form/parseFormFields.ts

@@ -0,0 +1,171 @@
+/**
+ * Parse vanira_form fields from client_fields — web-compatible + extended types.
+ */
+
+export type FormFieldType =
+  | 'text'
+  | 'textarea'
+  | 'select'
+  | 'radio'
+  | 'checkbox'
+  | 'email'
+  | 'phone'
+  | 'number'
+  | 'date';
+
+export type FormFieldOption = string | {label: string; value: string};
+
+export type FormFieldDefinition = {
+  id: string;
+  label: string;
+  type: FormFieldType;
+  required: boolean;
+  placeholder?: string;
+  options: FormFieldOption[];
+};
+
+export function normalizeFieldId(label: string): string {
+  return label.toLowerCase().replace(/[^a-z0-9]/g, '_');
+}
+
+function inferTypeFromId(id: string, explicit?: string): FormFieldType {
+  const t = explicit?.toLowerCase();
+  if (
+    t &&
+    [
+      'text',
+      'textarea',
+      'select',
+      'radio',
+      'checkbox',
+      'email',
+      'phone',
+      'number',
+      'date',
+      'tel',
+    ].includes(t)
+  ) {
+    if (t === 'tel') {
+      return 'phone';
+    }
+    return t as FormFieldType;
+  }
+  if (id.includes('email')) {
+    return 'email';
+  }
+  if (id.includes('phone')) {
+    return 'phone';
+  }
+  if (id.includes('date') && !id.includes('update')) {
+    return 'date';
+  }
+  return 'text';
+}
+
+function normalizeOptions(raw: unknown): FormFieldOption[] {
+  if (!raw) {
+    return [];
+  }
+  if (Array.isArray(raw)) {
+    return raw.map(item => {
+      if (typeof item === 'string') {
+        return item;
+      }
+      if (item && typeof item === 'object') {
+        const obj = item as {label?: string; value?: string};
+        return {
+          label: String(obj.label ?? obj.value ?? ''),
+          value: String(obj.value ?? obj.label ?? ''),
+        };
+      }
+      return String(item);
+    });
+  }
+  if (typeof raw === 'string') {
+    return raw
+      .split(',')
+      .map(s => s.trim())
+      .filter(Boolean);
+  }
+  return [];
+}
+
+function fieldFromObject(obj: Record<string, unknown>): FormFieldDefinition | null {
+  const label = String(
+    obj.label ?? obj.name ?? obj.title ?? obj.field ?? '',
+  ).trim();
+  if (!label) {
+    return null;
+  }
+  const id = String(obj.id ?? obj.key ?? normalizeFieldId(label));
+  const type = inferTypeFromId(id, String(obj.type ?? ''));
+  return {
+    id,
+    label,
+    type,
+    required: obj.required !== false,
+    placeholder: obj.placeholder ? String(obj.placeholder) : undefined,
+    options: normalizeOptions(obj.options ?? obj.choices ?? obj.values),
+  };
+}
+
+function fieldFromLabel(label: string): FormFieldDefinition {
+  const trimmed = label.trim();
+  const id = normalizeFieldId(trimmed);
+  return {
+    id,
+    label: trimmed,
+    type: inferTypeFromId(id),
+    required: true,
+    placeholder: `Enter your ${trimmed.toLowerCase()}`,
+    options: [],
+  };
+}
+
+/** Parse `fields` from merged client_fields / args (web + extended JSON). */
+export function parseFormFields(rawFields: unknown): FormFieldDefinition[] {
+  if (rawFields === undefined || rawFields === null) {
+    return [];
+  }
+
+  if (typeof rawFields === 'string') {
+    const trimmed = rawFields.trim();
+    if (trimmed.startsWith('[')) {
+      try {
+        const parsed = JSON.parse(trimmed) as unknown;
+        return parseFormFields(parsed);
+      } catch {
+        /* fall through to comma split */
+      }
+    }
+    return trimmed
+      .split(',')
+      .map(s => s.trim())
+      .filter(Boolean)
+      .map(fieldFromLabel);
+  }
+
+  if (Array.isArray(rawFields)) {
+    const out: FormFieldDefinition[] = [];
+    for (const item of rawFields) {
+      if (typeof item === 'string') {
+        out.push(fieldFromLabel(item));
+        continue;
+      }
+      if (item && typeof item === 'object') {
+        const def = fieldFromObject(item as Record<string, unknown>);
+        if (def) {
+          out.push(def);
+        }
+      }
+    }
+    return out;
+  }
+
+  if (typeof rawFields === 'object') {
+    const def = fieldFromObject(rawFields as Record<string, unknown>);
+    return def ? [def] : [];
+  }
+
+  return [];
+}

package/src/presets/host/HostElementPresetHandler.tsx

@@ -0,0 +1,155 @@
+import React, {useEffect, useRef} from 'react';
+import {navigateToTarget} from '../navigation/navigationBridge';
+import type {PresetContext} from '../types';
+import {VaniraPresetId} from '../registry';
+import {
+  dispatchHostPresetAction,
+  type HostPresetAction,
+} from './hostPresetBridge';
+
+type Props = {
+  ctx: PresetContext;
+  onComplete: (payload: Record<string, unknown>) => void;
+  onCancel: (reason?: string) => void;
+  onDismiss: () => void;
+};
+
+function merged(ctx: PresetContext): Record<string, unknown> {
+  return {...ctx.args, ...ctx.clientFields};
+}
+
+function elementIdFrom(mergedFields: Record<string, unknown>): string {
+  return String(
+    mergedFields.element_id ??
+      mergedFields.id ??
+      mergedFields.css_selector ??
+      mergedFields.selector ??
+      '',
+  )
+    .trim()
+    .replace(/^#/, '');
+}
+
+function routeFrom(mergedFields: Record<string, unknown>): string | undefined {
+  const route = String(mergedFields.route ?? mergedFields.target_url ?? '').trim();
+  return route || undefined;
+}
+
+function buildAction(ctx: PresetContext): HostPresetAction | null {
+  const fields = merged(ctx);
+  const elementId = elementIdFrom(fields);
+  const route = routeFrom(fields);
+
+  switch (ctx.presetId) {
+    case VaniraPresetId.HighlightElement:
+      return {
+        type: 'highlight',
+        elementId: String(fields.css_selector ?? fields.selector ?? elementId),
+        cssSelector: String(fields.css_selector ?? fields.selector ?? ''),
+        color: String(fields.highlight_color ?? fields.color ?? '#a855f7'),
+        durationMs: Number(fields.duration_ms ?? 3000),
+        route,
+      };
+    case VaniraPresetId.ClickElement:
+      if (!elementId) {
+        return null;
+      }
+      return {
+        type: 'click',
+        elementId,
+        scrollBeforeClick:
+          fields.scroll_before_click !== false &&
+          fields.scroll_before_click !== 'false',
+        route,
+      };
+    case VaniraPresetId.SelectOption: {
+      if (!elementId) {
+        return null;
+      }
+      const optionValue = String(fields.option_value ?? '').trim();
+      const optionLabel = String(
+        fields.option_label ?? fields.option_text ?? '',
+      ).trim();
+      if (!optionValue && !optionLabel) {
+        return null;
+      }
+      return {
+        type: 'select',
+        elementId,
+        optionValue,
+        optionLabel,
+        route,
+      };
+    }
+    case VaniraPresetId.SetDate: {
+      if (!elementId) {
+        return null;
+      }
+      const date = String(fields.date ?? '').trim();
+      if (!date) {
+        return null;
+      }
+      return {
+        type: 'set_date',
+        elementId,
+        date,
+        inputKind: String(fields.input_kind ?? 'text'),
+        textFormat: String(fields.text_format ?? 'YYYY-MM-DD'),
+        route,
+      };
+    }
+    default:
+      return null;
+  }
+}
+
+export function HostElementPresetHandler({
+  ctx,
+  onComplete,
+  onCancel,
+  onDismiss,
+}: Props) {
+  const ranRef = useRef(false);
+
+  useEffect(() => {
+    if (ranRef.current) {
+      return;
+    }
+    ranRef.current = true;
+
+    (async () => {
+      const action = buildAction(ctx);
+      if (!action) {
+        onCancel('Missing required element_id or preset arguments');
+        onDismiss();
+        return;
+      }
+
+      try {
+        if (action.route && !/^https?:\/\//i.test(action.route)) {
+          const nav = await navigateToTarget(action.route);
+          if (!nav.handled && !nav.external) {
+            onCancel(`Route not handled: ${action.route}`);
+            onDismiss();
+            return;
+          }
+        }
+
+        const result = await dispatchHostPresetAction(action);
+        onComplete({
+          status: 'success',
+          preset_id: ctx.presetId,
+          ...result,
+        });
+      } catch (err: unknown) {
+        const message =
+          err instanceof Error ? err.message : 'Host preset action failed';
+        onCancel(message);
+      } finally {
+        onDismiss();
+      }
+    })();
+  }, [ctx, onCancel, onComplete, onDismiss]);
+
+  return null;
+}

package/src/presets/host/hostPresetBridge.ts

@@ -0,0 +1,71 @@
+/**
+ * Host-app bridge for presets that target logical element IDs (web: getElementById).
+ * Register handlers in your React Native app to wire agent tools to native UI.
+ */
+
+export type HostHighlightAction = {
+  type: 'highlight';
+  elementId: string;
+  cssSelector?: string;
+  color?: string;
+  durationMs?: number;
+  route?: string;
+};
+
+export type HostClickAction = {
+  type: 'click';
+  elementId: string;
+  scrollBeforeClick?: boolean;
+  route?: string;
+};
+
+export type HostSelectAction = {
+  type: 'select';
+  elementId: string;
+  optionValue?: string;
+  optionLabel?: string;
+  route?: string;
+};
+
+export type HostSetDateAction = {
+  type: 'set_date';
+  elementId: string;
+  date: string;
+  inputKind?: string;
+  textFormat?: string;
+  route?: string;
+};
+
+export type HostPresetAction =
+  | HostHighlightAction
+  | HostClickAction
+  | HostSelectAction
+  | HostSetDateAction;
+
+export type HostPresetHandler = (
+  action: HostPresetAction,
+) => Promise<Record<string, unknown>> | Record<string, unknown>;
+
+let hostPresetHandler: HostPresetHandler | null = null;
+
+export function registerHostPresetHandler(
+  handler: HostPresetHandler | null,
+): () => void {
+  hostPresetHandler = handler;
+  return () => {
+    if (hostPresetHandler === handler) {
+      hostPresetHandler = null;
+    }
+  };
+}
+
+export async function dispatchHostPresetAction(
+  action: HostPresetAction,
+): Promise<Record<string, unknown>> {
+  if (!hostPresetHandler) {
+    throw new Error(
+      `No host preset handler registered for ${action.type}. Call registerHostPresetHandler() in your app.`,
+    );
+  }
+  return Promise.resolve(hostPresetHandler(action));
+}

package/src/presets/index.ts

@@ -0,0 +1,63 @@
+export {NativePresetRenderer} from './NativePresetRenderer';
+export {PresetHostProvider, usePresetHost} from './PresetHost';
+export {parseToolCall} from './parseToolCall';
+export {
+  extractPresetId,
+  extractToolName,
+  toClientToolCallPayload,
+} from './presetEventHelpers';
+export {
+  getLastNavigation,
+  navigateToTarget,
+  subscribeNavigation,
+  type NavigationEvent,
+} from './navigation/navigationBridge';
+export {registerInternalRouteHandler} from './navigation/internalRouteRegistry';
+export {
+  prepareCallAudioForCapture,
+  activateCallAudioPlayback,
+  startCallAudioSession,
+  stopCallAudioSession,
+  setSpeakerphoneOn,
+  toggleSpeakerphone,
+  subscribeCallAudio,
+  isSpeakerOn,
+  isCallAudioSessionActive,
+  type CallAudioSnapshot,
+} from '../adapters/react-native/callAudioRouting';
+export {CallSpeakerToggle} from './call/CallSpeakerToggle';
+export {useCallSpeaker} from './call/useCallSpeaker';
+export {
+  resetBoardSession,
+  abortBoardTools,
+  isBoardQueuedPreset,
+} from './chalkboard/boardQueue';
+export {subscribeBoardAbort, dispatchBoardAbort} from './chalkboard/boardAbort';
+export {
+  VaniraPresetId,
+  VANIRA_PRESET_IDS,
+  isVaniraPresetId,
+  isBoardQueuedPreset as isBoardQueuedPresetId,
+  isFireAndForgetPreset,
+  isNonInteractivePreset,
+  resolvePresetId,
+  TOOL_NAME_TO_PRESET_ID,
+} from './registry';
+export {
+  registerHostPresetHandler,
+  dispatchHostPresetAction,
+  type HostPresetAction,
+  type HostPresetHandler,
+  type HostHighlightAction,
+  type HostClickAction,
+  type HostSelectAction,
+  type HostSetDateAction,
+} from './host/hostPresetBridge';
+export {registerClipRegionCaptureTarget} from './clipRegion/clipRegionBridge';
+export type {
+  NativePresetRendererProps,
+  ParsedToolCall,
+  PresetContext,
+  PresetClient,
+  PresetId,
+} from './types';

package/src/presets/liveScreen/CloseLiveScreenHandler.tsx

@@ -0,0 +1,36 @@
+import {useEffect, useRef} from 'react';
+import type {PresetClient, PresetContext} from '../types';
+import {stopLiveScreen} from './liveScreenSession';
+
+type Props = {
+  client: PresetClient | null;
+  ctx: PresetContext;
+  onComplete: (payload: Record<string, unknown>) => void;
+  onDismiss: () => void;
+};
+
+export function CloseLiveScreenHandler({
+  client,
+  ctx,
+  onComplete,
+  onDismiss,
+}: Props) {
+  const ranRef = useRef(false);
+
+  useEffect(() => {
+    if (ranRef.current) {
+      return;
+    }
+    ranRef.current = true;
+
+    stopLiveScreen(client);
+    onComplete({
+      status: 'success',
+      preset_id: ctx.presetId,
+      closed: true,
+    });
+    onDismiss();
+  }, [client, ctx.presetId, onComplete, onDismiss]);
+
+  return null;
+}