@vanira/sdk-react-native 0.0.2

package/src/presets/NativePresetRenderer.tsx

@@ -0,0 +1,350 @@
+import React, {useEffect, useMemo, useRef} from 'react';
+import {BookingCalendarModal} from './BookingCalendarModal';
+import {CameraModal} from './CameraModal';
+import {ClipRegionModal} from './clipRegion/ClipRegionModal';
+import {DynamicFormModal} from './DynamicFormModal';
+import {HostElementPresetHandler} from './host/HostElementPresetHandler';
+import {CloseLiveScreenHandler} from './liveScreen/CloseLiveScreenHandler';
+import {LiveScreenHandler} from './liveScreen/LiveScreenHandler';
+import {CloseLiveVisionHandler} from './liveVision/CloseLiveVisionHandler';
+import {LiveVisionHandler} from './liveVision/LiveVisionHandler';
+import {NavigateHandler} from './NavigateHandler';
+import {parseToolCall} from './parseToolCall';
+import {cancelPreset, completePreset} from './presetCompletion';
+import {
+  isBoardQueuedPreset,
+  isFireAndForgetPreset,
+  isNonInteractivePreset,
+  VaniraPresetId,
+} from './registry';
+import {UploadModal} from './UploadModal';
+import type {NativePresetRendererProps, PresetContext, PresetId} from './types';
+import {PRESET_RENDERER_KNOWN_PRESETS as KNOWN} from './types';
+import {
+  enqueueBoardCommand,
+  getBoardTerminalResult,
+  resetBoardSession,
+} from './chalkboard/boardQueue';
+
+const HOST_ELEMENT_PRESETS = new Set<string>([
+  VaniraPresetId.HighlightElement,
+  VaniraPresetId.ClickElement,
+  VaniraPresetId.SelectOption,
+  VaniraPresetId.SetDate,
+]);
+
+const MODAL_PRESETS = new Set<string>([
+  VaniraPresetId.Form,
+  VaniraPresetId.Calendar,
+  VaniraPresetId.Camera,
+  VaniraPresetId.Upload,
+  VaniraPresetId.ClipRegion,
+]);
+
+/**
+ * RN equivalent of PresetRenderer.tsx + WidgetPresetRenderer.handle() routing.
+ */
+export function NativePresetRenderer({
+  client,
+  toolCall,
+  onDismiss,
+  onReleaseToolCall,
+}: NativePresetRendererProps) {
+  const popupShownRef = useRef<string | null>(null);
+  const settledBoardResultsRef = useRef<Set<string>>(new Set());
+  const lastHandledBoardToolCallIdRef = useRef<string | null>(null);
+  const parsed = useMemo(() => parseToolCall(toolCall), [toolCall]);
+
+  useEffect(() => {
+    if (!toolCall) {
+      popupShownRef.current = null;
+      settledBoardResultsRef.current.clear();
+      lastHandledBoardToolCallIdRef.current = null;
+      resetBoardSession();
+    }
+  }, [toolCall]);
+
+  useEffect(() => {
+    if (!parsed?.presetId || !client) {
+      return;
+    }
+
+    const presetId = parsed.presetId;
+    const isInteractivePopup =
+      (KNOWN as readonly string[]).includes(presetId) &&
+      MODAL_PRESETS.has(presetId);
+
+    if (!isInteractivePopup || popupShownRef.current === parsed.toolCallId) {
+      return;
+    }
+
+    popupShownRef.current = parsed.toolCallId;
+    try {
+      client.sendToolResult(parsed.toolCallId, {
+        status: 'popup_shown',
+        message: `The UI preset ${presetId} is now visible. I am waiting for the user to complete it. STAY SILENT.`,
+      });
+      client.sendContextUpdate?.({
+        ui_state: 'waiting_for_preset_data',
+        tool_status: 'active_waiting',
+        visible_preset: presetId,
+      });
+      console.log('[NativePresetRenderer] popup_shown ack sent for', presetId);
+    } catch (err) {
+      console.warn('[NativePresetRenderer] popup_shown ack failed:', err);
+    }
+  }, [parsed, client]);
+
+  useEffect(() => {
+    if (!parsed?.presetId || !client || !isBoardQueuedPreset(parsed.presetId)) {
+      return;
+    }
+
+    const toolCallId = parsed.toolCallId;
+    if (toolCallId && lastHandledBoardToolCallIdRef.current === toolCallId) {
+      return;
+    }
+    if (toolCallId) {
+      lastHandledBoardToolCallIdRef.current = toolCallId;
+    }
+
+    const presetId = parsed.presetId;
+    const mergedClientFields = {...parsed.arguments, ...parsed.clientFields};
+    const ctx: PresetContext = {
+      toolCallId: parsed.toolCallId,
+      presetId,
+      clientFields: mergedClientFields,
+      args: parsed.arguments,
+      toolCall: parsed.raw,
+    };
+
+    console.log('[NativePresetRenderer] enqueue board preset:', presetId, {
+      toolCallId: parsed.toolCallId,
+    });
+
+    enqueueBoardCommand(
+      {
+        ctx,
+        presetId,
+        onComplete: result => {
+          if (!client || !toolCallId) {
+            return;
+          }
+          if (result?.status === 'cancelled') {
+            return;
+          }
+          if (settledBoardResultsRef.current.has(toolCallId)) {
+            return;
+          }
+          settledBoardResultsRef.current.add(toolCallId);
+          client.sendToolResult(toolCallId, result);
+        },
+        onCancel: (reason, meta) => {
+          if (!client || !toolCallId) {
+            return;
+          }
+          const terminalStatus = meta?.status ?? 'cancelled';
+          if (settledBoardResultsRef.current.has(toolCallId)) {
+            return;
+          }
+          settledBoardResultsRef.current.add(toolCallId);
+          client.sendToolResult(
+            toolCallId,
+            getBoardTerminalResult(terminalStatus, reason, presetId),
+          );
+        },
+      },
+      client,
+    );
+  }, [parsed, client]);
+
+  useEffect(() => {
+    if (!parsed?.presetId || isBoardQueuedPreset(parsed.presetId)) {
+      return;
+    }
+    resetBoardSession();
+  }, [parsed?.toolCallId, parsed?.presetId]);
+
+  if (!parsed?.presetId) {
+    if (toolCall) {
+      console.warn(
+        '[NativePresetRenderer] toolCall present but no presetId — UI skipped',
+        toolCall,
+      );
+    }
+    return null;
+  }
+
+  const presetId = parsed.presetId as PresetId;
+
+  if (isBoardQueuedPreset(presetId)) {
+    return null;
+  }
+
+  const mergedClientFields = {...parsed.arguments, ...parsed.clientFields};
+  const ctx: PresetContext = {
+    toolCallId: parsed.toolCallId,
+    presetId,
+    clientFields: mergedClientFields,
+    args: parsed.arguments,
+    toolCall: parsed.raw,
+  };
+
+  console.log('[NativePresetRenderer] routing preset:', presetId, {
+    toolCallId: parsed.toolCallId,
+    name: parsed.name,
+  });
+
+  const handleCancel = (reason?: string) => {
+    cancelPreset(client, presetId, parsed.toolCallId, reason);
+    onDismiss?.();
+  };
+
+  const handleComplete = (payload: Record<string, unknown>) => {
+    completePreset(
+      client,
+      presetId,
+      parsed.toolCallId,
+      mergedClientFields,
+      payload,
+      parsed.name,
+    );
+    if (!isFireAndForgetPreset(presetId)) {
+      onDismiss?.();
+    }
+  };
+
+  if (HOST_ELEMENT_PRESETS.has(presetId)) {
+    return (
+      <HostElementPresetHandler
+        ctx={ctx}
+        onComplete={handleComplete}
+        onCancel={handleCancel}
+        onDismiss={() => onDismiss?.()}
+      />
+    );
+  }
+
+  if (presetId === VaniraPresetId.Navigate) {
+    return (
+      <NavigateHandler
+        ctx={ctx}
+        onComplete={handleComplete}
+        onCancel={handleCancel}
+        onDismiss={() => onDismiss?.()}
+      />
+    );
+  }
+
+  if (presetId === VaniraPresetId.LiveVision) {
+    return (
+      <LiveVisionHandler
+        client={client}
+        ctx={ctx}
+        onReleaseToolCall={() => onReleaseToolCall?.()}
+      />
+    );
+  }
+
+  if (presetId === VaniraPresetId.CloseLiveCamera) {
+    return (
+      <CloseLiveVisionHandler
+        client={client}
+        ctx={ctx}
+        onComplete={handleComplete}
+        onDismiss={() => onDismiss?.()}
+      />
+    );
+  }
+
+  if (presetId === VaniraPresetId.LiveScreen) {
+    return (
+      <LiveScreenHandler
+        client={client}
+        ctx={ctx}
+        onReleaseToolCall={() => onReleaseToolCall?.()}
+      />
+    );
+  }
+
+  if (presetId === VaniraPresetId.CloseLiveScreen) {
+    return (
+      <CloseLiveScreenHandler
+        client={client}
+        ctx={ctx}
+        onComplete={handleComplete}
+        onDismiss={() => onDismiss?.()}
+      />
+    );
+  }
+
+  if (isNonInteractivePreset(presetId) && !MODAL_PRESETS.has(presetId)) {
+    return null;
+  }
+
+  let modal: React.ReactNode = null;
+  switch (presetId) {
+    case VaniraPresetId.Calendar:
+      modal = (
+        <BookingCalendarModal
+          visible
+          ctx={ctx}
+          onClose={() => handleCancel('User closed the preset')}
+          onCancel={handleCancel}
+          onComplete={handleComplete}
+        />
+      );
+      break;
+    case VaniraPresetId.Form:
+      modal = (
+        <DynamicFormModal
+          visible
+          ctx={ctx}
+          onClose={() => handleCancel('User closed')}
+          onCancel={handleCancel}
+          onComplete={handleComplete}
+        />
+      );
+      break;
+    case VaniraPresetId.Camera:
+      modal = (
+        <CameraModal
+          visible
+          ctx={ctx}
+          client={client}
+          onClose={() => handleCancel('User closed')}
+          onCancel={handleCancel}
+          onComplete={handleComplete}
+        />
+      );
+      break;
+    case VaniraPresetId.Upload:
+      modal = (
+        <UploadModal
+          visible
+          ctx={ctx}
+          client={client}
+          onClose={() => handleCancel('User closed')}
+          onCancel={handleCancel}
+          onComplete={handleComplete}
+        />
+      );
+      break;
+    case VaniraPresetId.ClipRegion:
+      modal = (
+        <ClipRegionModal
+          visible
+          ctx={ctx}
+          client={client}
+          onClose={() => onDismiss?.()}
+          onCancel={handleCancel}
+          onComplete={handleComplete}
+        />
+      );
+      break;
+    default:
+      return null;
+  }
+
+  return modal;
+}

package/src/presets/NavigateHandler.tsx

@@ -0,0 +1,75 @@
+import React, {useEffect, useRef} from 'react';
+import {navigateToTarget} from './navigation/navigationBridge';
+import type {PresetContext} from './types';
+
+type Props = {
+  ctx: PresetContext;
+  onComplete: (payload: Record<string, unknown>) => void;
+  onCancel: (reason?: string) => void;
+  onDismiss: () => void;
+};
+
+function resolveTargetUrl(ctx: PresetContext): string {
+  const merged = {...ctx.args, ...ctx.clientFields};
+  return String(
+    merged.target_url ?? ctx.clientFields.target_url ?? ctx.args.target_url ?? '/',
+  );
+}
+
+/**
+ * vanira_navigate — web parity:
+ * external URLs open in browser; internal routes need registerInternalRouteHandler().
+ */
+export function NavigateHandler({ctx, onComplete, onCancel, onDismiss}: Props) {
+  const ranRef = useRef(false);
+
+  useEffect(() => {
+    if (ranRef.current) {
+      return;
+    }
+    ranRef.current = true;
+
+    const targetUrl = resolveTargetUrl(ctx);
+
+    (async () => {
+      try {
+        const event = await navigateToTarget(targetUrl);
+
+        if (event.external) {
+          if (!event.opened) {
+            onCancel(`Could not open URL: ${targetUrl}`);
+            return;
+          }
+          onComplete({
+            navigated_to: targetUrl,
+            status: 'success',
+            navigation_type: 'external',
+          });
+          return;
+        }
+
+        if (!event.handled) {
+          console.warn(
+            '[NavigateHandler] No internal route handler — register registerInternalRouteHandler() in your app',
+          );
+          onCancel('No internal navigation handler registered');
+          return;
+        }
+
+        onComplete({
+          navigated_to: targetUrl,
+          path: targetUrl,
+          status: 'success',
+          navigation_type: 'internal',
+        });
+      } catch (err: unknown) {
+        const message = err instanceof Error ? err.message : 'Navigation failed';
+        onCancel(message);
+      } finally {
+        onDismiss();
+      }
+    })();
+  }, [ctx, onCancel, onComplete, onDismiss]);
+
+  return null;
+}

package/src/presets/PresetHost.tsx

@@ -0,0 +1,155 @@
+import React, {createContext, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {Modal, StyleSheet, View} from 'react-native';
+import type {VaniraAI} from '../core/VaniraAI';
+import {registerClipRegionCaptureTarget} from './clipRegion/clipRegionBridge';
+import {extractPresetId} from './presetEventHelpers';
+import {ChalkboardOverlay} from './chalkboard/ChalkboardOverlay';
+import {
+  abortBoardTools,
+  dismissChalkboardUser,
+  isBoardQueuedPreset,
+  resetBoardSession,
+} from './chalkboard/boardQueue';
+import {subscribeBoardAbort} from './chalkboard/boardAbort';
+import {isNonInteractivePreset, VaniraPresetId} from './registry';
+import {LiveScreenPipOverlay} from './liveScreen/LiveScreenPipOverlay';
+import {stopLiveScreen} from './liveScreen/liveScreenSession';
+import {LiveVisionPipOverlay} from './liveVision/LiveVisionPipOverlay';
+import {stopLiveVision} from './liveVision/liveVisionSession';
+import {NativePresetRenderer} from './NativePresetRenderer';
+import {toPresetClient} from './presetClientAdapter';
+
+type PresetHostContextValue = {
+  aiClient: VaniraAI | null;
+  activeToolCall: unknown | null;
+  setAiClient: (client: VaniraAI | null) => void;
+  setActiveToolCall: (toolCall: unknown | null) => void;
+  clearPreset: () => void;
+};
+
+const PresetHostContext = createContext<PresetHostContextValue | null>(null);
+
+export function usePresetHost(): PresetHostContextValue {
+  const ctx = useContext(PresetHostContext);
+  if (!ctx) {
+    throw new Error('usePresetHost must be used within PresetHostProvider');
+  }
+  return ctx;
+}
+
+type Props = {children: React.ReactNode};
+
+/**
+ * Renders NativePresetRenderer at the app root so overlays sit above all screens.
+ */
+export function PresetHostProvider({children}: Props) {
+  const [aiClient, setAiClient] = useState<VaniraAI | null>(null);
+  const [activeToolCall, setActiveToolCall] = useState<unknown | null>(null);
+  const captureRootRef = useRef<View>(null);
+
+  const syncClipCaptureTarget = useCallback(() => {
+    registerClipRegionCaptureTarget(captureRootRef.current);
+  }, []);
+
+  const releaseToolCall = useCallback(() => {
+    setActiveToolCall(null);
+  }, []);
+
+  const clearPreset = useCallback(() => {
+    resetBoardSession();
+    const client = toPresetClient(aiClient);
+    stopLiveVision(client);
+    stopLiveScreen(client);
+    setActiveToolCall(null);
+  }, [aiClient]);
+
+  useEffect(() => {
+    syncClipCaptureTarget();
+  }, [syncClipCaptureTarget]);
+
+  useEffect(() => {
+    return subscribeBoardAbort(detail => {
+      abortBoardTools(
+        detail.reason || 'Server interrupted',
+        detail.toolCallId,
+        'interrupted',
+      );
+    });
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      aiClient,
+      activeToolCall,
+      setAiClient,
+      setActiveToolCall,
+      clearPreset,
+    }),
+    [aiClient, activeToolCall, clearPreset],
+  );
+
+  const presetId = activeToolCall ? extractPresetId(activeToolCall) : undefined;
+  const boardPreset = presetId ? isBoardQueuedPreset(presetId) : false;
+  const headlessPreset =
+    (presetId && isNonInteractivePreset(presetId)) ||
+    boardPreset ||
+    presetId === VaniraPresetId.Camera;
+  const presetVisible = !!activeToolCall && !!presetId;
+  const modalVisible = presetVisible && !headlessPreset;
+
+  const renderer = (
+    <NativePresetRenderer
+      client={toPresetClient(aiClient)}
+      toolCall={activeToolCall}
+      onDismiss={clearPreset}
+      onReleaseToolCall={releaseToolCall}
+    />
+  );
+
+  return (
+    <PresetHostContext.Provider value={value}>
+      <View style={styles.host}>
+        <View
+          ref={captureRootRef}
+          collapsable={false}
+          style={styles.root}
+          onLayout={syncClipCaptureTarget}>
+          {children}
+        </View>
+        {presetVisible && !modalVisible ? (
+          <View
+            style={styles.headlessHost}
+            pointerEvents={boardPreset ? 'none' : 'box-none'}>
+            {renderer}
+          </View>
+        ) : null}
+        <Modal
+          visible={modalVisible}
+          transparent
+          animationType="fade"
+          statusBarTranslucent
+          presentationStyle="overFullScreen"
+          onRequestClose={clearPreset}>
+          {modalVisible ? renderer : null}
+        </Modal>
+        <ChalkboardOverlay onUserDismiss={() => dismissChalkboardUser()} />
+        <LiveVisionPipOverlay client={toPresetClient(aiClient)} />
+        <LiveScreenPipOverlay client={toPresetClient(aiClient)} />
+      </View>
+    </PresetHostContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    flex: 1,
+  },
+  root: {
+    flex: 1,
+  },
+  headlessHost: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 999999,
+    elevation: 999999,
+  },
+});

package/src/presets/PresetShellModal.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+
+type Props = {
+  visible: boolean;
+  title: string;
+  subtitle?: string;
+  onClose: () => void;
+  children?: React.ReactNode;
+  /** When true, modal provides its own Cancel/Confirm (calendar, form). */
+  hideDefaultClose?: boolean;
+};
+
+/**
+ * Preset card content — parent PresetHost wraps this in a root RN Modal.
+ */
+export function PresetShellModal({
+  visible,
+  title,
+  subtitle,
+  onClose,
+  children,
+  hideDefaultClose = false,
+}: Props) {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <View style={styles.backdrop}>
+      <View style={styles.card}>
+        <View style={styles.headerRow}>
+          <View style={styles.headerText}>
+            <Text style={styles.title}>{title}</Text>
+            {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+          </View>
+          <Pressable style={styles.closeX} onPress={onClose} hitSlop={8}>
+            <Text style={styles.closeXText}>✕</Text>
+          </Pressable>
+        </View>
+        {children ?? (
+          <Text style={styles.placeholder}>
+            Native preset UI skeleton — logic pending parity with web
+            WidgetPresetRenderer.
+          </Text>
+        )}
+        {!hideDefaultClose ? (
+          <Pressable style={styles.closeBtn} onPress={onClose}>
+            <Text style={styles.closeBtnText}>Close</Text>
+          </Pressable>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.75)',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 20,
+    gap: 12,
+    maxHeight: '90%',
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  headerText: {flex: 1, gap: 4},
+  closeX: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: '#f3f4f6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeXText: {fontSize: 14, color: '#6b7280', fontWeight: '600'},
+  title: {fontSize: 18, fontWeight: '700', color: '#111'},
+  subtitle: {fontSize: 13, color: '#6b7280', lineHeight: 18},
+  placeholder: {fontSize: 13, color: '#374151', lineHeight: 20},
+  closeBtn: {
+    marginTop: 8,
+    backgroundColor: '#111',
+    borderRadius: 10,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  closeBtnText: {color: '#fff', fontWeight: '600'},
+});