React Native integration

import { useRef } from 'react';
import { WebView } from 'react-native-webview';

// Forwards every tars: message from the page to onMessage
const RELAY = `
  window.addEventListener('message', function (event) {
    var msg = event.data;
    if (msg && typeof msg.type === 'string' && msg.type.indexOf('tars:') === 0) {
      window.ReactNativeWebView.postMessage(JSON.stringify(msg));
    }
  });
  true;
`;

export function TarsAgentChat({ navigation }) {
  const webViewRef = useRef(null);

  function handleMessage(event) {
    const msg = JSON.parse(event.nativeEvent.data);
    switch (msg.type) {
      case 'tars:ready':
        // The bare ready means the page is listening. Init starts the bridge.
        // The bridge replies with a second ready carrying version+capabilities.
        webViewRef.current?.injectJavaScript(`
          window.postMessage(${JSON.stringify({
            type: 'tars:init',
            platform: 'react-native',
            version: '1.0',
            chrome: { showHeader: false, showCloseButton: true }
          })}, '*'); true;
        `);
        break;
      case 'tars:navigate':
        navigation.navigate(msg.route, msg.params);
        break;
      case 'tars:close':
        navigation.goBack();
        break;
      case 'tars:data':
        // msg.variables holds the captured conversation variables
        break;
    }
  }

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: 'https://YOUR_WIDGET_HOST/widget/YOUR_AGENT_ID?region=YOUR_REGION' }}
      injectedJavaScriptBeforeContentLoaded={RELAY}
      onMessage={handleMessage}
      javaScriptEnabled
      domStorageEnabled
    />
  );
}