@getecho-ai/react-native-sdk 1.0.0

package/dist/bridge/WebViewBridge.js

@@ -0,0 +1,151 @@
+"use strict";
+/**
+ * WebViewBridge - Handles communication between WebView and React Native
+ *
+ * Uses postMessage API for bidirectional communication:
+ * - WebView → Native: window.ReactNativeWebView.postMessage()
+ * - Native → WebView: webViewRef.injectJavaScript()
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebViewBridge = exports.webViewBridge = void 0;
+const CallbackManager_1 = __importDefault(require("./CallbackManager"));
+class WebViewBridge {
+    constructor() {
+        this.messageHandlers = new Set();
+        this.webViewRef = null;
+    }
+    /**
+     * Set the WebView reference for sending messages to WebView
+     */
+    setWebViewRef(ref) {
+        this.webViewRef = ref;
+    }
+    /**
+     * Register a message handler
+     */
+    onMessage(handler) {
+        this.messageHandlers.add(handler);
+        // Return unsubscribe function
+        return () => {
+            this.messageHandlers.delete(handler);
+        };
+    }
+    /**
+     * Handle incoming message from WebView
+     * This is called by the WebView's onMessage prop
+     */
+    handleMessage(event) {
+        try {
+            const data = JSON.parse(event.nativeEvent.data);
+            console.log("[EchoSDK] Received from WebView:", data);
+            const message = {
+                type: data.type,
+                callbackId: data.callbackId,
+                payload: data.payload ?? data,
+            };
+            // First, handle internal messages
+            this.handleInternalMessage(message);
+            // Then, notify all registered handlers
+            for (const handler of this.messageHandlers) {
+                try {
+                    handler(message);
+                }
+                catch (error) {
+                    console.error("[EchoSDK] Message handler error:", error);
+                }
+            }
+        }
+        catch (error) {
+            console.error("[EchoSDK] Failed to parse WebView message:", error);
+        }
+    }
+    /**
+     * Send message to WebView
+     */
+    sendToWebView(type, payload, callbackId) {
+        if (!this.webViewRef) {
+            console.warn("[EchoSDK] WebView ref not set, cannot send message");
+            return;
+        }
+        const message = {
+            type,
+            callbackId,
+            payload,
+        };
+        const jsCode = `
+      (function() {
+        window.dispatchEvent(new MessageEvent('message', {
+          data: ${JSON.stringify(message)}
+        }));
+      })();
+      true;
+    `;
+        this.webViewRef.injectJavaScript(jsCode);
+        console.log("[EchoSDK] Sent to WebView:", message);
+    }
+    /**
+     * Send a raw message to WebView without wrapping payload
+     * Used when the web embed expects root-level fields.
+     */
+    sendRawToWebView(message) {
+        console.log("[EchoSDK] Sending raw to WebView:", message);
+        if (!this.webViewRef) {
+            console.warn("[EchoSDK] WebView ref not set, cannot send message");
+            return;
+        }
+        const serialized = JSON.stringify(message);
+        const serializedString = JSON.stringify(serialized);
+        const jsCode = `
+      (function() {
+        const payload = JSON.parse(${serializedString});
+        window.dispatchEvent(new MessageEvent('message', { data: payload }));
+      })();
+      true;
+    `;
+        this.webViewRef.injectJavaScript(jsCode);
+        console.log("[EchoSDK] Sent raw to WebView:", message);
+    }
+    /**
+     * Initialize WebView with config
+     */
+    initWebView(config) {
+        this.sendToWebView("init", config);
+    }
+    /**
+     * Complete an action in WebView
+     */
+    completeActionInWebView(callbackId, result) {
+        this.sendToWebView("actionComplete", result, callbackId);
+    }
+    /**
+     * Handle internal messages (action completion, etc.)
+     */
+    handleInternalMessage(message) {
+        switch (message.type) {
+            case "actionComplete":
+                if (message.callbackId) {
+                    CallbackManager_1.default.completeAction(message.callbackId, message.payload);
+                }
+                break;
+            case "chatReady":
+                console.log("[EchoSDK] WebView chat is ready");
+                break;
+            default:
+                // Other message types are handled by registered handlers
+                break;
+        }
+    }
+    /**
+     * Clear all handlers (useful on unmount)
+     */
+    clearHandlers() {
+        this.messageHandlers.clear();
+    }
+}
+exports.WebViewBridge = WebViewBridge;
+// Export singleton instance
+exports.webViewBridge = new WebViewBridge();
+exports.default = exports.webViewBridge;

package/dist/components/EchoChat.d.ts

@@ -0,0 +1,20 @@
+/**
+ * EchoChat - Combined chat component
+ *
+ * Includes both the floating button and the chat modal.
+ * This is the simplest way to add Echo chat to a partner app.
+ *
+ * Usage:
+ * ```jsx
+ * <EchoProvider config={config}>
+ *   <EchoChat floating position="bottom-right" />
+ * </EchoProvider>
+ * ```
+ */
+import type React from "react";
+type EchoChatProps = {
+    floating?: boolean;
+    position?: "bottom-right" | "bottom-left";
+};
+export declare const EchoChat: React.FC<EchoChatProps>;
+export default EchoChat;

package/dist/components/EchoChat.js

@@ -0,0 +1,45 @@
+"use strict";
+/**
+ * EchoChat - Combined chat component
+ *
+ * Includes both the floating button and the chat modal.
+ * This is the simplest way to add Echo chat to a partner app.
+ *
+ * Usage:
+ * ```jsx
+ * <EchoProvider config={config}>
+ *   <EchoChat floating position="bottom-right" />
+ * </EchoProvider>
+ * ```
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EchoChat = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const EchoChatButton_1 = __importDefault(require("./EchoChatButton"));
+const EchoChatModal_1 = __importDefault(require("./EchoChatModal"));
+const EchoChat = ({ floating = true, position = "bottom-right", }) => {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    const openChat = () => setIsVisible(true);
+    const closeChat = () => setIsVisible(false);
+    return (<react_native_1.View style={floating ? styles.container : undefined}>
+			{floating && <EchoChatButton_1.default onPress={openChat} position={position}/>}
+
+			<EchoChatModal_1.default onClose={closeChat} visible={isVisible}/>
+		</react_native_1.View>);
+};
+exports.EchoChat = EchoChat;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: "box-none",
+    },
+});
+exports.default = exports.EchoChat;

package/dist/components/EchoChatButton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * EchoChatButton - Floating chat button
+ *
+ * Displays a floating button that opens the chat modal when pressed.
+ * Can show an unread message badge.
+ */
+import type React from "react";
+type EchoChatButtonProps = {
+    onPress: () => void;
+    unreadCount?: number;
+    position?: "bottom-right" | "bottom-left";
+    color?: string;
+};
+export declare const EchoChatButton: React.FC<EchoChatButtonProps>;
+export default EchoChatButton;

package/dist/components/EchoChatButton.js

@@ -0,0 +1,65 @@
+"use strict";
+/**
+ * EchoChatButton - Floating chat button
+ *
+ * Displays a floating button that opens the chat modal when pressed.
+ * Can show an unread message badge.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EchoChatButton = void 0;
+const react_native_1 = require("react-native");
+const EchoChatButton = ({ onPress, unreadCount = 0, position = "bottom-right", color = "#007AFF", }) => {
+    const positionStyle = position === "bottom-right" ? styles.right : styles.left;
+    return (<react_native_1.TouchableOpacity activeOpacity={0.8} onPress={onPress} style={[styles.button, positionStyle, { backgroundColor: color }]}>
+			<react_native_1.Text style={styles.icon}>💬</react_native_1.Text>
+			{unreadCount > 0 && (<react_native_1.View style={styles.badge}>
+					<react_native_1.Text style={styles.badgeText}>
+						{unreadCount > 99 ? "99+" : unreadCount}
+					</react_native_1.Text>
+				</react_native_1.View>)}
+		</react_native_1.TouchableOpacity>);
+};
+exports.EchoChatButton = EchoChatButton;
+const styles = react_native_1.StyleSheet.create({
+    button: {
+        position: "absolute",
+        bottom: 20,
+        width: 56,
+        height: 56,
+        borderRadius: 28,
+        justifyContent: "center",
+        alignItems: "center",
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 5,
+    },
+    right: {
+        right: 20,
+    },
+    left: {
+        left: 20,
+    },
+    icon: {
+        fontSize: 24,
+    },
+    badge: {
+        position: "absolute",
+        top: -4,
+        right: -4,
+        backgroundColor: "#FF3B30",
+        borderRadius: 12,
+        minWidth: 24,
+        height: 24,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 6,
+    },
+    badgeText: {
+        color: "#fff",
+        fontSize: 12,
+        fontWeight: "bold",
+    },
+});
+exports.default = exports.EchoChatButton;

package/dist/components/EchoChatModal.d.ts

@@ -0,0 +1,13 @@
+/**
+ * EchoChatModal - Chat interface using WebView
+ *
+ * Embeds Echo web chat via WebView with postMessage bridge
+ * Handles all communication between WebView and React Native
+ */
+import type React from "react";
+type EchoChatModalProps = {
+    visible: boolean;
+    onClose: () => void;
+};
+export declare const EchoChatModal: React.FC<EchoChatModalProps>;
+export default EchoChatModal;