@robylon/react-native-sdk 2.0.16-staging.2 → 2.0.16

package/src/Chatbotsdk.tsx

@@ -1,399 +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;
-  user_info?: {
-    name?: string;
-    email?: string;
-    mobile?: string;
-  };
-}
-
-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,
-  user_info,
-}) => {
-  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 [toastVisible, setToastVisible] = useState(false);
-  const [toastMessage, setToastMessage] = useState("");
-  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}/chat/chatbot/get/`;
-        const payload = {
-          client_user_id: user_id,
-          org_id: api_key,
-          token: user_token,
-          extra_info: stableAdditionalParams,
-        };
-
-        // setToastMessage(endpointUrl + " : " + BASE_CHATBOT_URL);
-        // setToastVisible(true);
-
-        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,
-    });
-    console.log("BASE_CHATBOT_URL", BASE_CHATBOT_URL);
-    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}`,
-                user_info: {
-                  ...user_info,
-                  platform: Platform.OS,
-                  SDK_VERSION: "${SDK_VERSION}",
-                  OS: Platform.OS,
-                  browser: Platform.OS,
-                },
-              },
-            })}, '*');
-          `);
-        }
-      }
-
-      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>
-        </>
-      )}
-      {/* <Toast message={toastMessage} visible={toastVisible} duration={10000} /> */}
-    </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/Toast.tsx

@@ -1,65 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { View, Text, StyleSheet, Animated } from "react-native";
-
-const Toast = ({
-  message,
-  visible,
-  duration = 3000,
-}: {
-  message: any;
-  visible: boolean;
-  duration?: number;
-}) => {
-  const [fadeAnim] = useState(new Animated.Value(0));
-
-  useEffect(() => {
-    if (visible) {
-      // Fade in the toast
-      Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 300,
-        useNativeDriver: true,
-      }).start(() => {
-        // Auto-hide after duration
-        setTimeout(() => {
-          Animated.timing(fadeAnim, {
-            toValue: 0,
-            duration: 300,
-            useNativeDriver: true,
-          }).start();
-        }, duration);
-      });
-    }
-  }, [visible]);
-
-  return (
-    <Animated.View
-      style={[
-        styles.toastContainer,
-        { opacity: fadeAnim, display: visible ? "flex" : "none" },
-      ]}
-    >
-      <Text style={styles.toastText}>{message}</Text>
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  toastContainer: {
-    position: "absolute",
-    bottom: 50,
-    left: "10%",
-    right: "10%",
-    backgroundColor: "rgba(0, 0, 0, 0.8)",
-    padding: 10,
-    borderRadius: 5,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  toastText: {
-    color: "#fff",
-    textAlign: "center",
-  },
-});
-
-export default Toast;

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,11 +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
-// }
-
-declare module "*.json" {
-  const value: any;
-  export default value;
-}

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);
-};