@robylon/react-native-sdk 2.2.3-staging.0 → 2.2.4

package/src/FloatingButton/launchers/ImageLauncher.tsx

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

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

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

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

@@ -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/components/DebugButton.tsx

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

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

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

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

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

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

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