@robylon/react-native-sdk 2.0.21-staging.2 → 2.0.21-staging.3

package/src/Chatbotsdk.tsx

@@ -39,6 +39,7 @@ import {
   getStorageScript,
   createStorageMessage,
 } from "./utils/webViewStorage";
+import { animateWebViewOpen, animateWebViewClose } from "./utils/animations";
 
 export interface ChatbotProps {
   api_key: string;
@@ -132,7 +133,6 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
   );
   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("");
@@ -140,9 +140,15 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
   const [isStorageReady, setIsStorageReady] = useState(false);
   const pendingStorageOps = useRef<Array<() => void>>([]);
   const memoryCache = useRef<Record<string, string>>({});
-
   const [systemInfo, setSystemInfo] = useState({ os: "", browser: "" });
 
+  // Initialize animated values
+  const animatedValues = useRef({
+    scale: new Animated.Value(1),
+    translateY: new Animated.Value(0),
+    opacity: new Animated.Value(1),
+  }).current;
+
   // Create chatbotConfig object for events
   const chatbotConfigForEvents = useMemo(
     () => ({
@@ -462,11 +468,7 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
   const openWebView = useCallback(() => {
     setIsWebViewVisible(true);
     if (enableAnimation) {
-      Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 250,
-        useNativeDriver: true,
-      }).start(() => {
+      animateWebViewOpen(animatedValues, () => {
         onOpen?.();
         emitEvent(ChatbotEventType.CHATBOT_OPENED);
         if (!isFirstLoadRef.current) {
@@ -474,7 +476,6 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
         }
       });
     } else {
-      fadeAnim.setValue(1);
       requestAnimationFrame(() => {
         onOpen?.();
         emitEvent(ChatbotEventType.CHATBOT_OPENED);
@@ -483,7 +484,7 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
         }
       });
     }
-  }, [enableAnimation, fadeAnim, onOpen, emitEvent]);
+  }, [enableAnimation, animatedValues, onOpen, emitEvent]);
 
   // Handle closing the chatbot
   const closeWebView = useCallback(() => {
@@ -496,23 +497,18 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
       );
     }
 
-    const complete = () => {
+    if (enableAnimation) {
+      animateWebViewClose(animatedValues, () => {
+        setIsWebViewVisible(false);
+        onClose?.();
+        emitEvent(ChatbotEventType.CHATBOT_CLOSED);
+      });
+    } else {
       setIsWebViewVisible(false);
       onClose?.();
       emitEvent(ChatbotEventType.CHATBOT_CLOSED);
-    };
-
-    if (enableAnimation) {
-      Animated.timing(fadeAnim, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver: true,
-      }).start(complete);
-    } else {
-      fadeAnim.setValue(0);
-      requestAnimationFrame(complete);
     }
-  }, [enableAnimation, fadeAnim, onClose, emitEvent]);
+  }, [enableAnimation, animatedValues, onClose, emitEvent]);
 
   // Emit button loaded event when component mounts
   useEffect(() => {
@@ -564,29 +560,28 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
   const bottomSpacing =
     chatbotConfig?.interface_properties?.bottom_spacing ?? 20;
 
-  const mainContainerStyle = useMemo(() => {
-    return {
-      ...styles.mainContainer,
-      [position.toLowerCase()]: `${sideSpacing ?? 20}px`,
-      alignItems:
-        position === "Right" ? "flex-end" : ("flex-start" as FlexAlignType),
-      // Explicitly clear mobile-specific styles
-      top: undefined,
-      [position === "Right" ? "left" : "right"]: undefined,
-      backgroundColor: "red",
-    };
-  }, [position, sideSpacing, styles.mainContainer]);
-
-  console.log("MAINCONTAINERSTYLE", mainContainerStyle, position, sideSpacing);
+  // const mainContainerStyle = useMemo(() => {
+  //   return {
+  //     ...styles.mainContainer,
+  //     [position.toLowerCase()]: `${sideSpacing ?? 20}px`,
+  //     alignItems:
+  //       position === "Right" ? "flex-end" : ("flex-start" as FlexAlignType),
+  //     // Explicitly clear mobile-specific styles
+  //     top: undefined,
+  //     [position === "Right" ? "left" : "right"]: undefined,
+  //     backgroundColor: "green",
+  //   };
+  // }, [position, sideSpacing, styles.mainContainer]);
 
   return (
     <ErrorBoundary componentName="ChatbotSDK">
-      <View style={mainContainerStyle}>
+      <View style={styles?.mainContainer}>
         {!loading && (
           <>
             <ErrorBoundary componentName="FloatingButton">
               {show_floating_button && api_key && chatbotConfig && (
                 <FloatingButton
+                  chatbotConfig={chatbotConfig}
                   isWebViewVisible={isWebViewVisible}
                   onPress={() => {
                     emitEvent(ChatbotEventType.CHATBOT_BUTTON_CLICKED);
@@ -605,7 +600,16 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
               pointerEvents={isWebViewVisible ? "auto" : "none"}
             >
               <Animated.View
-                style={[styles.fullScreenContainer, { opacity: 1 }]}
+                style={[
+                  styles.fullScreenContainer,
+                  {
+                    opacity: animatedValues.opacity,
+                    transform: [
+                      { scale: animatedValues.scale },
+                      { translateY: animatedValues.translateY },
+                    ],
+                  },
+                ]}
               >
                 <ErrorBoundary componentName="ChatbotWebView">
                   <WebView

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

@@ -1,88 +1,97 @@
-import React from "react";
-import { TouchableOpacity, StyleSheet, Text, Image, View } from "react-native";
-import { errorTracker } from "./services/ErrorTrackingService";
-import { ErrorTypes } from "./constants/errorConstants";
+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; // For dynamic branding
-  imageUrl?: string; // For brand logo or icon
+  brandColor?: string;
+  imageUrl?: string;
   isWebViewVisible: boolean;
+  chatbotConfig: ChatbotConfig;
 }
 
 const FloatingButton: React.FC<FloatingButtonProps> = ({
   onPress,
-  brandColor = "#007AFF", // Default color
-  imageUrl,
   isWebViewVisible,
+  chatbotConfig,
 }) => {
-  const handleImageError = () => {
-    errorTracker.trackError(
-      new Error("Failed to load button image"),
-      "FloatingButton",
-      {
-        type: ErrorTypes.RUNTIME_ERROR,
-        context: { imageUrl },
-      }
-    );
+  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 (
-    <View
-      style={styles.container}
+    <Animated.View
+      style={buttonContainerStyle}
       pointerEvents={isWebViewVisible ? "none" : "auto"}
     >
-      <TouchableOpacity
-        style={[
-          styles.button,
-          { backgroundColor: isWebViewVisible ? "transparent" : brandColor }, // Set transparent to visually disable
-          isWebViewVisible && styles.disabledButton, // Add a disabled style
-        ]}
-        onPress={isWebViewVisible ? undefined : onPress} // Disable interaction
-        activeOpacity={isWebViewVisible ? 1 : 0.7} // Prevent touch feedback when disabled
-      >
-        {imageUrl && !isWebViewVisible ? (
-          <Image source={{ uri: imageUrl }} style={styles.buttonImage} />
-        ) : (
-          <Text style={styles.buttonText}>Chat</Text>
-        )}
-      </TouchableOpacity>
-    </View>
+      {renderLauncher()}
+    </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     position: "absolute",
-    bottom: 20,
-    right: 20,
     zIndex: 998,
   },
-  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,
-  },
-  buttonText: {
-    color: "white",
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-  buttonImage: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-  },
-  disabledButton: {
-    backgroundColor: "rgba(0, 0, 0, 0)", // Fully transparent to disable visuals
-  },
 });
 
 export default FloatingButton;

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;