@robylon/react-native-sdk 2.0.30 → 2.0.31-staging.1

package/src/FloatingButton/launchers/ImageLauncher.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
+import { ChatbotConfig } from "../../Chatbotsdk";
+import { errorTracker } from "../../services/ErrorTrackingService";
+import { ErrorTypes } from "../../constants/errorConstants";
+
+interface ImageLauncherProps {
+  chatbotConfig: ChatbotConfig;
+  onPress: () => void;
+  isWebViewVisible: boolean;
+}
+
+const ImageLauncher: React.FC<ImageLauncherProps> = ({
+  chatbotConfig,
+  onPress,
+  isWebViewVisible,
+}) => {
+  const handleImageError = () => {
+    errorTracker.trackError(
+      new Error("Failed to load launcher image"),
+      "ImageLauncher",
+      {
+        type: ErrorTypes.RUNTIME_ERROR,
+        context: { imageUrl: chatbotConfig?.images?.launcher_image_url?.url },
+      }
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        {
+          backgroundColor: isWebViewVisible
+            ? "transparent"
+            : chatbotConfig.brand_colour,
+        },
+        isWebViewVisible && styles.disabledButton,
+      ]}
+      onPress={isWebViewVisible ? undefined : onPress}
+      activeOpacity={isWebViewVisible ? 1 : 0.7}
+    >
+      <Image
+        source={{ uri: chatbotConfig?.images?.launcher_image_url?.url }}
+        style={styles.buttonImage}
+        onError={handleImageError}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    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,
+  },
+  buttonImage: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+  },
+  disabledButton: {
+    backgroundColor: "rgba(0, 0, 0, 0)",
+  },
+});
+
+export default ImageLauncher;

package/src/FloatingButton/launchers/TextLauncher.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { ChatbotConfig } from "../../Chatbotsdk";
+import { getBestFontColor } from "../../utils/colorUtils";
+
+interface TextLauncherProps {
+  chatbotConfig: ChatbotConfig;
+  onPress: () => void;
+  isWebViewVisible: boolean;
+}
+
+const TextLauncher: React.FC<TextLauncherProps> = ({
+  chatbotConfig,
+  onPress,
+  isWebViewVisible,
+}) => {
+  console.log("TEXT_LAUNCHER", {
+    brand_colour: chatbotConfig?.brand_colour,
+    isWebViewVisible,
+  });
+
+  const containerStyle = {
+    ...styles.container,
+    backgroundColor: isWebViewVisible
+      ? "transparent"
+      : chatbotConfig?.brand_colour || "#007AFF",
+  };
+
+  const buttonTextStyle = {
+    ...styles.buttonText,
+    color: getBestFontColor(chatbotConfig?.brand_colour || "#ffffff"),
+  };
+
+  return (
+    <View style={[containerStyle, isWebViewVisible && styles.disabledButton]}>
+      <TouchableOpacity
+        style={[styles.button]}
+        onPress={isWebViewVisible ? undefined : onPress}
+        activeOpacity={isWebViewVisible ? 1 : 0.7}
+      >
+        <View style={styles.textContainer}>
+          <Text style={buttonTextStyle} numberOfLines={1}>
+            {chatbotConfig?.launcher_properties?.text || "Chat"}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    maxWidth: 160,
+    minWidth: 120,
+    height: 40,
+    borderRadius: 9999,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.24,
+    shadowRadius: 16,
+    elevation: 5,
+  },
+  button: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingVertical: 9,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  textContainer: {
+    flex: 1,
+    minWidth: 0,
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+  disabledButton: {
+    backgroundColor: "rgba(0, 0, 0, 0)",
+  },
+});
+
+export default TextLauncher;

package/src/FloatingButton/launchers/TextualImageLauncher.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View, Image } from "react-native";
+import { ChatbotConfig } from "../../Chatbotsdk";
+import { errorTracker } from "../../services/ErrorTrackingService";
+import { ErrorTypes } from "../../constants/errorConstants";
+import { getBestFontColor } from "../../utils/colorUtils";
+import { FONT_FAMILY, FONT_LINE_HEIGHT } from "../../constants/fontStyles";
+
+interface TextualImageLauncherProps {
+  chatbotConfig: ChatbotConfig;
+  onPress: () => void;
+  isWebViewVisible: boolean;
+}
+
+const TextualImageLauncher: React.FC<TextualImageLauncherProps> = ({
+  chatbotConfig,
+  onPress,
+  isWebViewVisible,
+}) => {
+  console.log("TEXTUALIMAGE_LAUNCHER_DEBUG", {
+    brand_colour: chatbotConfig?.brand_colour,
+    text: chatbotConfig?.launcher_properties?.text,
+    isWebViewVisible,
+  });
+
+  const containerStyle = {
+    ...styles.container,
+    backgroundColor: isWebViewVisible
+      ? "transparent"
+      : chatbotConfig?.brand_colour || "#007AFF",
+  };
+
+  const handleImageError = () => {
+    errorTracker.trackError(
+      new Error("Failed to load launcher image"),
+      "TextualImageLauncher",
+      {
+        type: ErrorTypes.RUNTIME_ERROR,
+        context: { imageUrl: chatbotConfig?.images?.launcher_image_url?.url },
+      }
+    );
+  };
+
+  const buttonTextStyle = {
+    ...styles.buttonText,
+    color: getBestFontColor(chatbotConfig?.brand_colour || "#ffffff"),
+  };
+
+  console.log("TEXTUALIMAGE_LAUNCHER_TEXT_STYLE", {
+    brand_colour: chatbotConfig?.brand_colour,
+    text_color: buttonTextStyle.color,
+    text: chatbotConfig?.launcher_properties?.text,
+  });
+
+  return (
+    <View style={[containerStyle, isWebViewVisible && styles.disabledButton]}>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={isWebViewVisible ? undefined : onPress}
+        activeOpacity={isWebViewVisible ? 1 : 0.7}
+      >
+        <View style={styles.contentContainer}>
+          <View style={styles.textContainer}>
+            <Text
+              style={buttonTextStyle}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {chatbotConfig?.launcher_properties?.text || "Chat"}
+            </Text>
+          </View>
+          <View style={styles.imageContainer}>
+            <Image
+              source={{ uri: chatbotConfig?.images?.launcher_image_url?.url }}
+              style={styles.buttonImage}
+              onError={handleImageError}
+            />
+          </View>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minWidth: 140,
+    maxWidth: 208,
+    height: 40,
+    borderRadius: 9999,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.24,
+    shadowRadius: 16,
+    elevation: 5,
+  },
+  button: {
+    flex: 1,
+    height: "100%",
+  },
+  contentContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingLeft: 20,
+    height: "100%",
+  },
+  textContainer: {
+    flexShrink: 1,
+    flexGrow: 0,
+    marginRight: 8,
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  imageContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 9999,
+    overflow: "hidden",
+  },
+  buttonImage: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "cover",
+  },
+  disabledButton: {
+    backgroundColor: "rgba(0, 0, 0, 0)",
+  },
+});
+
+export default TextualImageLauncher;

package/src/FloatingButton.tsx

@@ -0,0 +1,97 @@
+import React, { useMemo, useEffect, useRef } from "react";
+import { View, StyleSheet, FlexAlignType, Animated } from "react-native";
+import { ChatbotConfig, LauncherType } from "./Chatbotsdk";
+import ImageLauncher from "./FloatingButton/launchers/ImageLauncher";
+import TextLauncher from "./FloatingButton/launchers/TextLauncher";
+import TextualImageLauncher from "./FloatingButton/launchers/TextualImageLauncher";
+import { animateButtonScale } from "./utils/animations";
+
+interface FloatingButtonProps {
+  onPress: () => void;
+  brandColor?: string;
+  imageUrl?: string;
+  isWebViewVisible: boolean;
+  chatbotConfig: ChatbotConfig;
+}
+
+const FloatingButton: React.FC<FloatingButtonProps> = ({
+  onPress,
+  isWebViewVisible,
+  chatbotConfig,
+}) => {
+  const buttonScale = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    animateButtonScale(buttonScale, isWebViewVisible);
+  }, [isWebViewVisible, buttonScale]);
+
+  console.log("FLOATING_BUTTON_CONFIG", {
+    config: chatbotConfig,
+    brand_colour: chatbotConfig?.brand_colour,
+    launcher_type: chatbotConfig?.launcher_type,
+  });
+
+  const position = chatbotConfig?.interface_properties?.position || "Right";
+  const sideSpacing = chatbotConfig?.interface_properties?.side_spacing ?? 20;
+  const bottomSpacing =
+    chatbotConfig?.interface_properties?.bottom_spacing ?? 20;
+
+  const buttonContainerStyle = useMemo(() => {
+    return {
+      ...styles.container,
+      [position.toLowerCase()]: sideSpacing ?? 20,
+      alignItems:
+        position === "Right" ? "flex-end" : ("flex-start" as FlexAlignType),
+      bottom: bottomSpacing ?? 20,
+      transform: [{ scale: buttonScale }],
+    };
+  }, [position, sideSpacing, bottomSpacing, buttonScale]);
+
+  const renderLauncher = () => {
+    switch (chatbotConfig?.launcher_type) {
+      case LauncherType.TEXT:
+        return (
+          <TextLauncher
+            chatbotConfig={chatbotConfig}
+            onPress={onPress}
+            isWebViewVisible={isWebViewVisible}
+          />
+        );
+      case LauncherType.TEXTUAL_IMAGE:
+        return (
+          <TextualImageLauncher
+            chatbotConfig={chatbotConfig}
+            onPress={onPress}
+            isWebViewVisible={isWebViewVisible}
+          />
+        );
+      case LauncherType.IMAGE:
+      default:
+        return (
+          <ImageLauncher
+            chatbotConfig={chatbotConfig}
+            onPress={onPress}
+            isWebViewVisible={isWebViewVisible}
+          />
+        );
+    }
+  };
+
+  return (
+    <Animated.View
+      style={buttonContainerStyle}
+      pointerEvents={isWebViewVisible ? "none" : "auto"}
+    >
+      {renderLauncher()}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    zIndex: 998,
+  },
+});
+
+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/Toast.tsx

@@ -0,0 +1,65 @@
+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/components/DebugButton.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet, View } from "react-native";
+import { openDebugMenu } from "../utils/debugMenu";
+import { openDebuggerFromApp } from "../utils/debugMenu";
+
+const DebugButton = () => {
+  if (!__DEV__) return null;
+
+  return (
+    <View style={styles.debugContainer}>
+      <TouchableOpacity style={styles.debugButton} onPress={openDebugMenu}>
+        <Text style={styles.debugText}>Menu</Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[styles.debugButton, styles.debuggerButton]}
+        onPress={openDebuggerFromApp}
+      >
+        <Text style={styles.debugText}>Debug</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  debugContainer: {
+    position: "absolute",
+    top: 40,
+    right: 10,
+    flexDirection: "row",
+    gap: 8,
+  },
+  debugButton: {
+    backgroundColor: "rgba(0,0,0,0.7)",
+    padding: 8,
+    borderRadius: 4,
+  },
+  debuggerButton: {
+    backgroundColor: "rgba(255,0,0,0.7)",
+  },
+  debugText: {
+    color: "white",
+    fontSize: 12,
+  },
+});
+
+export default DebugButton;

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+import { errorTracker } from "../services/ErrorTrackingService";
+import { ErrorTypes } from "../constants/errorConstants";
+
+interface Props {
+  children: ReactNode;
+  componentName: string;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(_: Error): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    errorTracker.trackError(error, this.props.componentName, {
+      errorInfo,
+      type: ErrorTypes.RUNTIME_ERROR,
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null; // Or a fallback UI if needed
+    }
+
+    return this.props.children;
+  }
+}

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/errorConstants.ts

@@ -0,0 +1,21 @@
+export enum ErrorCodes {
+  MISSING_API_KEY = "MISSING_API_KEY",
+  ERROR_TRACKING_INIT_FAILED = "ERROR_TRACKING_INIT_FAILED",
+  WEBVIEW_LOAD_ERROR = "WEBVIEW_LOAD_ERROR",
+  CONFIG_FETCH_ERROR = "CONFIG_FETCH_ERROR",
+}
+
+export enum ErrorTypes {
+  INITIALIZATION_ERROR = "INITIALIZATION_ERROR",
+  RUNTIME_ERROR = "RUNTIME_ERROR",
+  NETWORK_ERROR = "NETWORK_ERROR",
+}
+
+export const ErrorMessages = {
+  [ErrorCodes.MISSING_API_KEY]: (apiKey: any) =>
+    `Invalid API key: ${apiKey}. Please provide a valid API key.`,
+  [ErrorCodes.ERROR_TRACKING_INIT_FAILED]:
+    "Failed to initialize error tracking service.",
+  [ErrorCodes.WEBVIEW_LOAD_ERROR]: "Failed to load chatbot interface.",
+  [ErrorCodes.CONFIG_FETCH_ERROR]: "Failed to fetch chatbot configuration.",
+};

package/src/constants/fontStyles.ts

@@ -0,0 +1,3 @@
+export const FONT_FAMILY =
+  "system-ui, Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+export const FONT_LINE_HEIGHT = 21;

package/src/constants.ts

@@ -0,0 +1,5 @@
+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;
+export const DEFAULT_LAUNCHER_IMAGE = `${BASE_CHATBOT_DOMAIN}/chatbubble.png`;

package/src/global.d.ts

@@ -0,0 +1,11 @@
+// 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/hooks/useChatbotEvents.ts

@@ -0,0 +1,93 @@
+import { useCallback } from "react";
+import { getSystemInfo } from "../utils/systemInfo";
+import { logger } from "../utils/logger";
+import {
+  ChatbotEventType,
+  AllEventTypes,
+  ChatbotEventHandler,
+} from "../types/events";
+import { API_URL } from "../constants";
+
+interface EventHookProps {
+  api_key: string;
+  chatbotConfig: any;
+  user_profile?: Record<string, any>;
+  onEvent?: ChatbotEventHandler;
+  systemInfo: { os: string; browser: string }; // Add this to get system info from WebView
+}
+
+export const useChatbotEvents = ({
+  api_key,
+  chatbotConfig,
+  user_profile,
+  onEvent,
+  systemInfo,
+}: EventHookProps) => {
+  const onInternalEvent = useCallback(
+    async (
+      eventType: AllEventTypes,
+      additionalData: Record<string, any> = {}
+    ) => {
+      if (!api_key) return;
+
+      try {
+        const apiUrl = API_URL;
+        const sysInfo = getSystemInfo(systemInfo);
+
+        const eventData = {
+          trigger_time: Date.now(),
+          channel: "CHATBOT",
+          org_id: api_key,
+          client_user_id: chatbotConfig?.isAnonymous
+            ? "Anonymous"
+            : String(chatbotConfig?.userId || ""),
+          event_type: eventType,
+          user_profile: { ...(user_profile || {}) },
+          ...additionalData,
+        };
+
+        const payload = {
+          org_id: api_key,
+          event_data: eventData,
+          metadata: {
+            timestamp: Date.now(),
+            ...sysInfo,
+          },
+          event_type: "INFO",
+          user_id: chatbotConfig?.userId,
+        };
+
+        logger.debug("Sending internal event:", payload);
+
+        const response = await fetch(`${apiUrl}/users/sdk/record-logs/`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+
+        if (!response.ok) {
+          throw new Error(
+            `Failed to send internal event: ${response.statusText}`
+          );
+        }
+      } catch (error) {
+        logger.error("Failed to send internal event:", error);
+      }
+    },
+    [api_key, chatbotConfig, user_profile, systemInfo]
+  );
+
+  const emitEvent = useCallback(
+    (type: ChatbotEventType, data?: any) => {
+      const timestamp = Date.now();
+      onEvent?.({ type, timestamp, data });
+      onInternalEvent(type, { ...data, timestamp });
+    },
+    [onEvent, onInternalEvent]
+  );
+
+  return {
+    emitEvent,
+    onInternalEvent,
+  };
+};