@robylon/react-native-sdk 2.0.2-staging.0 → 2.0.2

package/lib/commonjs/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/commonjs/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": "2.0.2-staging.0",
+  "version": "2.0.2",
   "description": "React Native SDK for Robylon",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/ChatbotWebview.tsx

@@ -1,44 +0,0 @@
-// 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

@@ -1,378 +0,0 @@
-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 { API_URL, 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 = `${API_URL}/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

@@ -1,57 +0,0 @@
-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: 24,
-    width: 48,
-    height: 48,
-    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: 48,
-    height: 48,
-    borderRadius: 24,
-  },
-});
-
-export default FloatingButton;

package/src/LoadingIndicator.tsx

@@ -1,11 +0,0 @@
-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

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

package/src/constants.ts

@@ -1,4 +0,0 @@
-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}`;
-export const API_URL = process.env.API_URL;

package/src/global.d.ts

@@ -1,6 +0,0 @@
-// 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

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

package/src/openChatbot.ts

@@ -1,11 +0,0 @@
-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);
-};