@robylon/react-native-sdk 1.10.1-staging.7 → 1.10.1-staging.8

package/.npmignore.staging

@@ -3,5 +3,4 @@ __tests__/
 __fixtures__/
 __mocks__/
 .env*
-*.log
-src
+*.log

package/lib/module/openChatbot.js

@@ -1,2 +1,3 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.openChatbot=void 0;var _reactNative=require("react-native");var _constants=require("./constants");var openChatbot=exports.openChatbot=function openChatbot(chatbotId){var additionalParams=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var params=new URLSearchParams(Object.assign({id:chatbotId},additionalParams));var url=_constants.BASE_CHATBOT_URL+"?"+params.toString();_reactNative.Linking.openURL(url);};
+
+//# sourceMappingURL=openChatbot.js.mape",{value:true});exports.openChatbot=void 0;var _reactNative=require("react-native");var _constants=require("./constants");var openChatbot=exports.openChatbot=function openChatbot(chatbotId){var additionalParams=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var params=new URLSearchParams(Object.assign({id:chatbotId},additionalParams));var url=_constants.BASE_CHATBOT_URL+"?"+params.toString();_reactNative.Linking.openURL(url);};
 //# sourceMappingURL=openChatbot.js.map

package/lib/module/openChatbot.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_constants","openChatbot","exports","chatbotId","additionalParams","arguments","length","undefined","params","URLSearchParams","Object","assign","id","url","BASE_CHATBOT_URL","toString","Linking","openURL"],"sourceRoot":"../../src","sources":["openChatbot.ts"],"mappings":"oFAAA,IAAAA,YAAA,CAAAC,OAAA,iBACA,IAAAC,UAAA,CAAAD,OAAA,gBAEO,GAAM,CAAAE,WAAW,CAAAC,OAAA,CAAAD,WAAA,CAAG,QAAd,CAAAA,WAAWA,CACtBE,SAAiB,CAER,IADT,CAAAC,gBAAwC,CAAAC,SAAA,CAAAC,MAAA,IAAAD,SAAA,MAAAE,SAAA,CAAAF,SAAA,IAAG,CAAC,CAAC,CAE7C,GAAM,CAAAG,MAAM,CAAG,GAAI,CAAAC,eAAe,CAAAC,MAAA,CAAAC,MAAA,EAAGC,EAAE,CAAET,SAAS,EAAKC,gBAAgB,CAAE,CAAC,CAC1E,GAAM,CAAAS,GAAG,CAAMC,2BAAgB,KAAIN,MAAM,CAACO,QAAQ,CAAC,CAAG,CACtDC,oBAAO,CAACC,OAAO,CAACJ,GAAG,CAAC,CACtB,CAAC","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["openChatbot.tsx"],"mappings":"","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robylon/react-native-sdk",
-  "version": "1.10.1-staging.7",
+  "version": "1.10.1-staging.8",
   "description": "React Native SDK for Robylon",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/ChatbotWebview.tsx

@@ -0,0 +1,44 @@
+// File: src/ChatbotWebview.tsx
+import React, { useEffect, useState } from "react";
+import { View } from "react-native";
+import { WebView } from "react-native-webview";
+import { BASE_CHATBOT_URL } from "./constants";
+import LoadingIndicator from "./LoadingIndicator";
+
+interface ChatbotWebviewProps {
+  chatbotId: string;
+  additionalParams?: Record<string, string>;
+}
+
+const constructUrl = (
+  chatbotId: string,
+  additionalParams: Record<string, string> = {}
+): string => {
+  const params = new URLSearchParams({ id: chatbotId, ...additionalParams });
+  return `${BASE_CHATBOT_URL}?${params.toString()}`;
+};
+
+export const ChatbotWebview: React.FC<ChatbotWebviewProps> = ({
+  chatbotId,
+  additionalParams,
+}) => {
+  const [url, setUrl] = useState<string>("");
+
+  useEffect(() => {
+    setUrl(constructUrl(chatbotId, additionalParams));
+  }, [chatbotId, additionalParams]);
+
+  return (
+    <View style={{ flex: 1 }}>
+      {url ? (
+        <WebView
+          source={{ uri: url }}
+          startInLoadingState={true}
+          renderLoading={() => <LoadingIndicator />}
+        />
+      ) : (
+        <LoadingIndicator />
+      )}
+    </View>
+  );
+};

package/src/Chatbotsdk.tsx

@@ -0,0 +1,379 @@
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import {
+  View,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  Platform,
+  StatusBar,
+} from "react-native";
+import { WebView, WebViewMessageEvent } from "react-native-webview";
+import FloatingButton from "./FloatingButton";
+import { BASE_CHATBOT_URL } from "./constants";
+
+interface ChatbotSDKProps {
+  api_key: string;
+  user_id?: string;
+  user_token?: string;
+  additional_params?: Record<string, string>;
+  show_floating_button?: boolean;
+  onMessage?: (message: any) => void;
+  isFullScreen?: boolean;
+  enableAnimation?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+
+interface ChatbotMessage {
+  type: string;
+  data?: any;
+}
+
+interface ChatbotConfig {
+  brand_color: string;
+  image_url: string;
+  welcome_message: string;
+}
+
+const ChatbotSDK: React.FC<ChatbotSDKProps> = ({
+  api_key,
+  user_id,
+  user_token,
+  additional_params = {},
+  show_floating_button = true,
+  onMessage,
+  isFullScreen = true,
+  enableAnimation = true,
+  onOpen,
+  onClose,
+}) => {
+  const [isWebViewVisible, setIsWebViewVisible] = useState(false);
+  const [chatbotConfig, setChatbotConfig] = useState<ChatbotConfig | null>(
+    null
+  );
+  const [loading, setLoading] = useState(true);
+  const webViewRef = useRef<WebView>(null);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const isFirstLoadRef = useRef(true);
+  const webViewUrl = useMemo(
+    () => constructUrl(),
+    [api_key, user_id, additional_params]
+  );
+
+  const stableAdditionalParams = useMemo(
+    () => additional_params,
+    [JSON.stringify(additional_params)]
+  );
+
+  const triggerAppInit = () => {
+    if (webViewRef.current) {
+      webViewRef.current.injectJavaScript(`
+        // Trigger APP_READY equivalent
+        window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'APP_READY' }));
+        true;
+      `);
+    }
+  };
+
+  useEffect(() => {
+    const fetchChatbotConfig = async () => {
+      try {
+        const endpointUrl = `https://stage-api.robylon.ai/users/auth/copilot/`;
+        const payload = {
+          client_user_id: user_id,
+          org_id: api_key,
+          token: user_token,
+          extra_info: stableAdditionalParams,
+        };
+
+        const response = await fetch(endpointUrl, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch chatbot configuration");
+        }
+
+        const data = await response.json();
+        const orgInfo = data?.user?.org_info;
+
+        if (orgInfo) {
+          setChatbotConfig({
+            brand_color: orgInfo?.config?.brand_colour || "#007AFF",
+            image_url: orgInfo?.brand_config?.launcher_logo_url || "",
+            welcome_message: orgInfo?.config?.welcome_message || "",
+          });
+        }
+      } catch (error) {
+        console.error("Error fetching chatbot configuration:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (api_key && user_id) {
+      fetchChatbotConfig();
+    }
+  }, [api_key, user_id, user_token, stableAdditionalParams]);
+
+  function constructUrl(): string {
+    if (!user_id) return "";
+    const params = new URLSearchParams({
+      id: api_key,
+      user_id,
+      ...additional_params,
+    });
+    return `${BASE_CHATBOT_URL}?${params.toString()}`;
+  }
+
+  const openWebView = () => {
+    setIsWebViewVisible(true);
+    if (enableAnimation) {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true,
+      }).start(() => {
+        onOpen?.();
+        if (!isFirstLoadRef.current) {
+          // If not first load, manually trigger initialization
+          setTimeout(triggerAppInit, 100);
+        }
+      });
+    } else {
+      fadeAnim.setValue(1);
+      requestAnimationFrame(() => {
+        onOpen?.();
+        if (!isFirstLoadRef.current) {
+          setTimeout(triggerAppInit, 100);
+        }
+      });
+    }
+  };
+
+  const closeWebView = () => {
+    if (webViewRef.current) {
+      console.log("closeWebView");
+      webViewRef.current.postMessage(
+        JSON.stringify({
+          name: "closeFrame",
+          domain: "app-domain.com",
+        })
+      );
+    }
+
+    const complete = () => {
+      setIsWebViewVisible(false);
+      onClose?.();
+    };
+
+    if (enableAnimation) {
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start(complete);
+    } else {
+      fadeAnim.setValue(0);
+      requestAnimationFrame(complete);
+    }
+  };
+
+  const handleMessage = (event: WebViewMessageEvent) => {
+    const { data } = event.nativeEvent;
+
+    try {
+      const parsedData: ChatbotMessage = JSON.parse(data);
+
+      if (parsedData.type === "APP_READY") {
+        console.log("APP_READY", webViewRef.current && isWebViewVisible);
+        if (webViewRef.current && isWebViewVisible) {
+          webViewRef.current.injectJavaScript(`
+            window.postMessage(${JSON.stringify({
+              name: "openFrame",
+              domain: "app-domain.com",
+            })}, '*');
+            window.postMessage(${JSON.stringify({
+              name: "registerUserId",
+              action: "registerUserId",
+              domain: "app-domain.com",
+              data: {
+                userId: `${user_id}`,
+                token: `${user_token}`,
+              },
+            })}, '*');
+          `);
+        }
+      }
+
+      if (typeof parsedData !== "object" || !parsedData.type) {
+        console.warn("Invalid message structure");
+        return;
+      }
+
+      switch (parsedData.type) {
+        case "close_chatbot":
+          closeWebView();
+          break;
+        default:
+          if (onMessage) onMessage(parsedData);
+      }
+    } catch (error) {
+      console.error("Failed to parse or process WebView message:", error);
+    }
+  };
+
+  const getScreenDimensions = () => {
+    const windowHeight = Dimensions.get("window").height;
+    const windowWidth = Dimensions.get("window").width;
+    const statusBarHeight =
+      Platform.OS === "ios" ? 0 : StatusBar.currentHeight || 0;
+
+    return {
+      height: windowHeight - statusBarHeight,
+      width: windowWidth,
+    };
+  };
+
+  const screenDimensions = getScreenDimensions();
+
+  return (
+    <View style={styles.mainContainer}>
+      {!loading && (
+        <>
+          {show_floating_button && api_key && chatbotConfig && (
+            <FloatingButton
+              onPress={openWebView}
+              brandColor={chatbotConfig.brand_color}
+              imageUrl={chatbotConfig.image_url}
+            />
+          )}
+          <View
+            style={[
+              styles.webViewWrapper,
+              { height: isWebViewVisible ? "100%" : 0 },
+            ]}
+            pointerEvents={isWebViewVisible ? "auto" : "none"}
+          >
+            <Animated.View
+              style={[
+                isFullScreen
+                  ? styles.fullScreenContainer
+                  : styles.inlineContainer,
+                { opacity: fadeAnim },
+              ]}
+            >
+              <WebView
+                ref={webViewRef}
+                source={{ uri: webViewUrl }}
+                onMessage={handleMessage}
+                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) => {
+                  return request.url.startsWith(BASE_CHATBOT_URL);
+                }}
+                startInLoadingState={isFirstLoadRef.current}
+                onLoadEnd={() => {
+                  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));
+  };
+
+  var closeButton = document.querySelector('.chatbot-close-button');
+  if (closeButton) {
+    closeButton.addEventListener('click', () => {
+      window.sendToChatbot({ type: 'close_chatbot' });
+    });
+  }
+  
+  true;
+`);
+                  isFirstLoadRef.current = false;
+                }}
+                onError={(syntheticEvent) => {
+                  const { nativeEvent } = syntheticEvent;
+                  console.warn("WebView error:", nativeEvent);
+                }}
+              />
+            </Animated.View>
+          </View>
+        </>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    position: "relative",
+  },
+  webViewWrapper: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: "hidden",
+    zIndex: 1000,
+  },
+  fullScreenContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "white",
+    zIndex: 1000,
+  },
+  inlineContainer: {
+    flex: 1,
+    backgroundColor: "white",
+  },
+  webview: {
+    flex: 1,
+    backgroundColor: "white",
+  },
+});
+
+export default ChatbotSDK;

package/src/FloatingButton.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { TouchableOpacity, StyleSheet, Text, Image } from "react-native";
+
+interface FloatingButtonProps {
+  onPress: () => void;
+  brandColor?: string; // For dynamic branding
+  imageUrl?: string; // For brand logo or icon
+}
+
+const FloatingButton: React.FC<FloatingButtonProps> = ({
+  onPress,
+  brandColor = "#007AFF", // Default color
+  imageUrl,
+}) => {
+  return (
+    <TouchableOpacity
+      style={[styles.button, { backgroundColor: brandColor }]}
+      onPress={onPress}
+    >
+      {imageUrl ? (
+        <Image source={{ uri: imageUrl }} style={styles.buttonImage} />
+      ) : (
+        <Text style={styles.buttonText}>Chat</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    position: "absolute",
+    bottom: 20,
+    right: 20,
+    borderRadius: 30,
+    width: 60,
+    height: 60,
+    justifyContent: "center",
+    alignItems: "center",
+    elevation: 5,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+  buttonImage: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+  },
+});
+
+export default FloatingButton;

package/src/LoadingIndicator.tsx

@@ -0,0 +1,11 @@
+import React, { useEffect, useState } from "react";
+import { View, ActivityIndicator } from "react-native";
+import { WebView } from "react-native-webview";
+
+const LoadingIndicator: React.FC = () => (
+  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+    <ActivityIndicator size="large" color="#0000ff" />
+  </View>
+);
+
+export default LoadingIndicator;

package/src/config.ts

@@ -0,0 +1,4 @@
+export const config = {
+  API_URL: process.env.API_URL || 'https://api.robylon.com',
+  DEBUG: process.env.DEBUG === 'true'
+};

package/src/constants.ts

@@ -0,0 +1,3 @@
+const BASE_CHATBOT_DOMAIN = process.env.CHATBOT_DOMAIN || "";
+const CHATBOT_PATH = process.env.CHATBOT_PATH || "";
+export const BASE_CHATBOT_URL = `${BASE_CHATBOT_DOMAIN}/${CHATBOT_PATH}`;

package/src/global.d.ts

@@ -0,0 +1,6 @@
+// declare module "react-native" {
+//   export const View: any;
+//   export const ActivityIndicator: any;
+//   export const Linking: any;
+//   // Add other React Native exports as needed
+// }

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { default as ChatbotSDK } from "./Chatbotsdk";
+export { openChatbot } from "./openChatbot";

package/src/openChatbot.ts

@@ -0,0 +1,11 @@
+import { Linking } from "react-native";
+import { BASE_CHATBOT_URL } from "./constants";
+
+export const openChatbot = (
+  chatbotId: string,
+  additionalParams: Record<string, string> = {}
+): void => {
+  const params = new URLSearchParams({ id: chatbotId, ...additionalParams });
+  const url = `${BASE_CHATBOT_URL}?${params.toString()}`;
+  Linking.openURL(url);
+};