@robylon/react-native-sdk 2.0.19-staging.3 → 2.0.19-staging.31

package/src/Chatbotsdk.tsx

@@ -39,6 +39,8 @@ import {
   getStorageScript,
   createStorageMessage,
 } from "./utils/webViewStorage";
+import ChatbotWebView from "./components/ChatbotWebView";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export interface ChatbotProps {
   api_key: string;
@@ -384,7 +386,8 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
       id: api_key,
     });
     console.log("BASE_CHATBOT_URL SDK_VERSION", BASE_CHATBOT_URL, SDK_VERSION);
-    return `${BASE_CHATBOT_URL}?${params.toString()}`;
+    // return `${BASE_CHATBOT_URL}?${params.toString()}`;
+    return "https://demo.robylon.ai/chat/public/RG5x9i1fvk/";
   }
 
   // Handle opening the chatbot
@@ -488,8 +491,16 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
   //   }
   // }, []);
 
+  // Add userAgent configuration
+  const userAgent = Platform.select({
+    android:
+      "Mozilla/5.0 (Linux; Android 10; Android SDK built for x86) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36",
+    ios: "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
+  });
+
   return (
-    <ErrorBoundary componentName="ChatbotSDK">
+    // <ErrorBoundary componentName="ChatbotSDK">
+    <SafeAreaView style={styles.mainContainer}>
       <View style={styles.mainContainer}>
         {!loading && (
           <>
@@ -507,139 +518,102 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
             </ErrorBoundary>
             <View
               style={[
-                styles.webViewWrapper,
+                // styles.webViewWrapper,
                 { height: isWebViewVisible ? "100%" : 0 },
+                // { height: "100%" },
               ]}
-              pointerEvents={isWebViewVisible ? "auto" : "none"}
+              // pointerEvents={isWebViewVisible ? "auto" : "none"}
+              pointerEvents="auto"
             >
-              <Animated.View
+              {/* <Animated.View
                 style={[styles.fullScreenContainer, { opacity: fadeAnim }]}
-              >
-                <ErrorBoundary componentName="ChatbotWebView">
-                  <WebView
-                    ref={webViewRef}
-                    source={{ uri: constructUrl() }}
-                    onMessage={handleMessage}
-                    style={styles.webview}
-                    containerStyle={
-                      isFullScreen
-                        ? {
-                            width: screenDimensions.width,
-                            height: screenDimensions.height,
-                          }
-                        : undefined
+              > */}
+              {/* <ErrorBoundary componentName="ChatbotWebView"> */}
+              <ChatbotWebView
+                ref={webViewRef}
+                source={{ uri: constructUrl() }}
+                onMessage={handleMessage}
+                onDebugMessage={(message) => {
+                  console.log("WebView Debug:", message);
+                }}
+                style={styles.webview}
+                // containerStyle={
+                //   isFullScreen
+                //     ? {
+                //         width: screenDimensions.width,
+                //         height: screenDimensions.height,
+                //       }
+                //     : undefined
+                // }
+                allowsInlineMediaPlayback={true}
+                mediaPlaybackRequiresUserAction={false}
+                allowFileAccess={false}
+                geolocationEnabled={false}
+                javaScriptEnabled={true}
+                domStorageEnabled={true}
+                cacheEnabled={true}
+                scrollEnabled={true}
+                bounces={false}
+                onShouldStartLoadWithRequest={(request) => {
+                  // Allow navigation only to trusted domains
+                  const allowedDomains = [BASE_CHATBOT_URL, "about:blank"];
+                  return allowedDomains.some((domain) =>
+                    request.url.startsWith(domain)
+                  );
+                }}
+                startInLoadingState={isFirstLoadRef.current}
+                onLoadEnd={() => {
+                  isFirstLoadRef.current = false;
+                }}
+                onError={(syntheticEvent) => {
+                  const { nativeEvent } = syntheticEvent;
+                  errorTracker.trackError(
+                    new Error(nativeEvent.description),
+                    "ChatbotWebView",
+                    {
+                      type: ErrorTypes.RUNTIME_ERROR,
+                      context: {
+                        url: nativeEvent.url,
+                        code: nativeEvent.code,
+                      },
                     }
-                    allowsInlineMediaPlayback={true}
-                    mediaPlaybackRequiresUserAction={false}
-                    allowFileAccess={false}
-                    geolocationEnabled={false}
-                    javaScriptEnabled={true}
-                    domStorageEnabled={true}
-                    cacheEnabled={true}
-                    scrollEnabled={true}
-                    bounces={false}
-                    onShouldStartLoadWithRequest={(request) => {
-                      return request.url.startsWith(BASE_CHATBOT_URL);
-                    }}
-                    startInLoadingState={isFirstLoadRef.current}
-                    onLoadEnd={() => {
-                      if (__DEV__) {
-                        enableWebViewDebug(webViewRef);
-                      }
-                      webViewRef.current?.injectJavaScript(`
-  if (!document.querySelector('meta[name="viewport"]')) {
-    var meta = document.createElement('meta');
-    meta.name = 'viewport';
-    meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
-    document.getElementsByTagName('head')[0].appendChild(meta);
-  }
-
-  if (!document.querySelector('#injectedStyle')) {
-    const style = document.createElement('style');
-    style.id = 'injectedStyle';
-    style.textContent = \`
-      html, body, #root, #__next {
-        height: 100% !important;
-        min-height: 100% !important;
-        overflow: hidden !important;
-      }
-    \`;
-    document.head.appendChild(style);
-  }
-
-  window.sendToChatbot = function(message) {
-    window.ReactNativeWebView.postMessage(JSON.stringify(message));
-  };
-
-  // Only create observer if it doesn't exist
-  if (!window.closeButtonObserver) {
-    // Setup mutation observer to watch for close button
-    window.closeButtonObserver = new MutationObserver(function(mutations) {
-      const closeButton = document.querySelector('.chatbot-close-button');
-      if (closeButton && !closeButton.hasAttribute('listener-attached')) {
-        closeButton.setAttribute('listener-attached', 'true');
-        closeButton.addEventListener('click', () => {
-          try {
-            const message = { type: 'close_chatbot' };
-            window.ReactNativeWebView.postMessage(JSON.stringify(message));
-          } catch (error) {
-            console.error('Error sending close message:', error);
-          }
-        });
-        console.log('Close button listener attached');
-      }
-    });
-
-    // Start observing
-    window.closeButtonObserver.observe(document.body, {
-      childList: true,
-      subtree: true
-    });
-
-    // Initial check for existing button
-    const existingButton = document.querySelector('.chatbot-close-button');
-    if (existingButton && !existingButton.hasAttribute('listener-attached')) {
-      existingButton.setAttribute('listener-attached', 'true');
-      existingButton.addEventListener('click', () => {
-        try {
-          const message = { type: 'close_chatbot' };
-          window.ReactNativeWebView.postMessage(JSON.stringify(message));
-        } catch (error) {
-          console.error('Error sending close message:', error);
-        }
-      });
-      console.log('Close button listener attached to existing button');
-    }
-  }
-
-  true;
-`);
-                      isFirstLoadRef.current = false;
-                    }}
-                    onError={(syntheticEvent) => {
-                      const { nativeEvent } = syntheticEvent;
-                      errorTracker.trackError(
-                        new Error(nativeEvent.description),
-                        "ChatbotWebView",
-                        {
-                          type: ErrorTypes.RUNTIME_ERROR,
-                          context: {
-                            url: nativeEvent.url,
-                            code: nativeEvent.code,
-                          },
-                        }
-                      );
-                    }}
-                  />
-                </ErrorBoundary>
-              </Animated.View>
+                  );
+                }}
+                userAgent={userAgent}
+                originWhitelist={["*"]}
+                mixedContentMode="always"
+                onContentProcessDidTerminate={() => {
+                  webViewRef.current?.reload();
+                }}
+                injectedJavaScriptBeforeContentLoaded={`
+                    window.onerror = function(message, source, lineno, colno, error) {
+                      window.ReactNativeWebView.postMessage(JSON.stringify({
+                        type: 'ERROR',
+                        data: {message, source, lineno, colno}
+                      }));
+                      return true;
+                    };
+                    true;
+                  `}
+                androidLayerType="hardware"
+                overScrollMode="never"
+                textZoom={100}
+                setSupportMultipleWindows={false}
+                allowsBackForwardNavigationGestures={false}
+                useWebKit={true}
+                keyboardDisplayRequiresUserAction={false}
+                hideKeyboardAccessoryView={true}
+                applicationNameForUserAgent="ChatbotApp"
+              />
+              {/* </ErrorBoundary> */}
+              {/* </Animated.View> */}
             </View>
           </>
         )}
         {/* <Toast message={toastMessage} visible={toastVisible} duration={10000} /> */}
-        {__DEV__ && <DebugButton />}
       </View>
-    </ErrorBoundary>
+    </SafeAreaView>
+    // </ErrorBoundary>
   );
 };
 
@@ -655,7 +629,7 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     overflow: "hidden",
-    zIndex: 1000,
+    zIndex: 100,
   },
   fullScreenContainer: {
     position: "absolute",
@@ -664,7 +638,7 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     backgroundColor: "white",
-    zIndex: 1000,
+    zIndex: 100,
   },
   inlineContainer: {
     flex: 1,

package/src/components/ChatbotWebView.tsx

@@ -0,0 +1,74 @@
+import React, { forwardRef } from "react";
+import { Platform } from "react-native";
+import { WebView, WebViewProps } from "react-native-webview";
+
+interface ChatbotWebViewProps extends WebViewProps {
+  onDebugMessage?: (message: string) => void;
+  useWebKit?: boolean;
+  keyboardDisplayRequiresUserAction?: boolean;
+  hideKeyboardAccessoryView?: boolean;
+  applicationNameForUserAgent?: string;
+  textZoom?: number;
+  androidLayerType?: "none" | "software" | "hardware";
+  setSupportMultipleWindows?: boolean;
+  overScrollMode?: "always" | "content" | "never";
+  directionalLockEnabled?: boolean;
+}
+
+const ChatbotWebView = forwardRef<WebView, ChatbotWebViewProps>(
+  (props, ref) => {
+    const { onDebugMessage, ...restProps } = props;
+
+    const defaultInjectedJavaScript = `
+    // Set viewport
+    const meta = document.createElement('meta');
+    meta.name = 'viewport';
+    meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover';
+    document.head.appendChild(meta);
+
+    // Basic touch handling
+    document.documentElement.style.webkitTouchCallout = 'none';
+    document.documentElement.style.webkitUserSelect = 'none';
+    document.documentElement.style.userSelect = 'none';
+    
+    // Make all interactive elements clickable
+    const style = document.createElement('style');
+    style.textContent = \`
+      * { touch-action: manipulation; }
+      button, [role="button"], a, input, select, textarea {
+        cursor: pointer !important;
+        -webkit-tap-highlight-color: transparent;
+      }
+    \`;
+    document.head.appendChild(style);
+
+    true;
+    `;
+
+    return (
+      <WebView
+        ref={ref}
+        {...restProps}
+        injectedJavaScript={`
+          ${defaultInjectedJavaScript}
+          ${props.injectedJavaScript || ""}
+        `}
+        onMessage={props.onMessage}
+        style={[{ opacity: 0.99 }, props.style]}
+        bounces={false}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        scalesPageToFit={Platform.OS === "android"}
+        automaticallyAdjustContentInsets={false}
+        contentInsetAdjustmentBehavior="never"
+        decelerationRate="normal"
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        scrollEnabled={true}
+        directionalLockEnabled={true}
+      />
+    );
+  }
+);
+
+export default ChatbotWebView;

package/src/utils/systemInfo.ts

@@ -10,7 +10,7 @@ interface SystemInfo {
   platform: string;
   os: string;
   browser: string;
-  SDK_VERSION: string;
+  sdk_version: string;
   device: string;
   screen_size: ScreenSize;
 }
@@ -77,7 +77,7 @@ export const getSystemInfo = (webViewSystemInfo: {
     platform: Platform.OS,
     os: webViewSystemInfo.os || Platform.OS,
     browser: webViewSystemInfo.browser || "WebView",
-    SDK_VERSION,
+    sdk_version: SDK_VERSION,
     device: getDeviceType(),
     screen_size: getScreenSize(),
   };

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not modify it manually.
-export const SDK_VERSION = '2.0.16-staging.2';
+export { SDK_VERSION } from './versions/version.staging';

package/src/versions/version.dev.ts

@@ -0,0 +1,2 @@
+// This file is auto-generated. Do not modify it manually.
+export const SDK_VERSION = "0.0.0-dev.0";

package/src/versions/version.production.ts

@@ -0,0 +1,2 @@
+// This file is auto-generated. Do not modify it manually.
+export const SDK_VERSION = "0.0.0";

package/src/versions/version.staging.ts

@@ -0,0 +1,2 @@
+// This file is auto-generated. Do not modify it manually.
+export const SDK_VERSION = '2.0.19-staging.31';