@getecho-ai/react-native-sdk 1.0.0

package/dist/components/EchoChatModal.js

@@ -0,0 +1,473 @@
+"use strict";
+/**
+ * EchoChatModal - Chat interface using WebView
+ *
+ * Embeds Echo web chat via WebView with postMessage bridge
+ * Handles all communication between WebView and React Native
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EchoChatModal = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_webview_1 = require("react-native-webview");
+const CallbackManager_1 = __importDefault(require("../bridge/CallbackManager"));
+const WebViewBridge_1 = __importDefault(require("../bridge/WebViewBridge"));
+const resolveApiUrl_1 = require("../utils/resolveApiUrl");
+const EchoProvider_1 = require("./EchoProvider");
+const ECHO_CHAT_URL = "https://get-echo.ai/embed";
+const TRAILING_SLASHES_REGEX = /\/+$/;
+function ensureHttpScheme(url) {
+    // WebView needs an absolute URL with a scheme.
+    if (url.startsWith("http://") || url.startsWith("https://")) {
+        return url;
+    }
+    return `http://${url}`;
+}
+function resolveEmbedUrl(url) {
+    const withScheme = ensureHttpScheme(url).trim();
+    // If caller already passes /embed, don't second-guess it.
+    if (withScheme.includes("/embed")) {
+        return withScheme;
+    }
+    // Treat it as a base (e.g. http://localhost:3000) and append /embed.
+    return `${withScheme.replace(TRAILING_SLASHES_REGEX, "")}/embed`;
+}
+const EchoChatModal = ({ visible, onClose, }) => {
+    const { config, userId, chatId, isReady, updateChatId, updateUserId, handleAddToCart, handleGetCart, handleNavigateToProduct, } = (0, EchoProvider_1.useEcho)();
+    const webViewRef = (0, react_1.useRef)(null);
+    const wasVisibleRef = (0, react_1.useRef)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [loadTimeout, setLoadTimeout] = (0, react_1.useState)(false);
+    const [activeResumeChatId, setActiveResumeChatId] = (0, react_1.useState)(null);
+    const [isResumeReady, setIsResumeReady] = (0, react_1.useState)(false);
+    // Set WebView ref for bridge - update whenever ref or isResumeReady changes
+    (0, react_1.useEffect)(() => {
+        if (webViewRef.current && isResumeReady) {
+            WebViewBridge_1.default.setWebViewRef(webViewRef.current);
+            console.log("[EchoChatModal] WebView ref set, ready for messaging");
+        }
+    }, [isResumeReady, webViewRef.current]);
+    // Handle messages from WebView
+    const handleMessage = (0, react_1.useCallback)(async (message) => {
+        console.log("[EchoChatModal] handleMessage", message);
+        if (message.type === "echo:request_actions") {
+            const actions = ["addToCart", "getCart"];
+            if (config.callbacks.onNavigateToCheckout) {
+                actions.push("redirectToCheckout");
+            }
+            WebViewBridge_1.default.sendRawToWebView({
+                source: "echo-widget",
+                type: "echo:available_actions",
+                actions,
+                schemas: {},
+                customerId: null,
+            });
+            return;
+        }
+        if (message.type === "requestWidgetState") {
+            WebViewBridge_1.default.sendRawToWebView({
+                source: "echo-parent",
+                type: "widgetState",
+                isExpanded: false, // Always false in RN - sidebar controlled via showSidebar URL param
+                isOpen: visible,
+            });
+            return;
+        }
+        if (message.type === "close") {
+            onClose();
+            return;
+        }
+        if (message.type === "chatId") {
+            const payload = message.payload;
+            if (payload?.chatId) {
+                await updateChatId(payload.chatId);
+            }
+            return;
+        }
+        if (message.type === "userId") {
+            const payload = message.payload;
+            if (payload?.userId) {
+                await updateUserId(payload.userId);
+            }
+            return;
+        }
+        if (message.type === "navigate") {
+            const payload = message.payload;
+            const navigateUrl = payload?.url;
+            const navigateProductId = payload?.productId;
+            if (navigateProductId !== undefined && navigateProductId !== null) {
+                handleNavigateToProduct(String(navigateProductId));
+                return;
+            }
+            if (navigateUrl) {
+                if (config.callbacks.onNavigateToUrl) {
+                    config.callbacks.onNavigateToUrl(navigateUrl);
+                }
+                else {
+                    try {
+                        await react_native_1.Linking.openURL(navigateUrl);
+                    }
+                    catch (error) {
+                        console.error("[EchoChatModal] Failed to open URL:", error);
+                    }
+                }
+            }
+            return;
+        }
+        if (message.type === "addToCart") {
+            const payload = message.payload ?? {};
+            const productPayload = payload.product ||
+                payload;
+            const callbackId = message.callbackId ||
+                payload.callbackId ||
+                "";
+            const productId = productPayload.productId ??
+                productPayload.id ??
+                "";
+            const quantity = productPayload.quantity ?? undefined;
+            const product = {
+                id: String(productId),
+                title: productPayload
+                    .productName ||
+                    productPayload.title ||
+                    String(productId),
+                priceAmount: productPayload
+                    .productPrice ?? productPayload.price,
+                primaryImage: productPayload
+                    .productImage ?? productPayload.image,
+                url: productPayload
+                    .productUrl ?? productPayload.url,
+            };
+            const result = await handleAddToCart(product, quantity);
+            WebViewBridge_1.default.sendRawToWebView({
+                source: "echo-parent",
+                type: "addToCartResponse",
+                callbackId,
+                success: result.success,
+                error: result.error,
+                cartItemCount: result.cartItemCount,
+            });
+            return;
+        }
+        if (message.type === "getCart") {
+            const payload = message.payload ?? {};
+            const callbackId = message.callbackId ||
+                payload.callbackId ||
+                "";
+            const result = await handleGetCart();
+            WebViewBridge_1.default.sendRawToWebView({
+                source: "echo-parent",
+                type: "getCartResponse",
+                callbackId,
+                success: result.success,
+                cart: result.cart,
+                error: result.error,
+            });
+            return;
+        }
+        if (message.type === "redirectToCheckout") {
+            const payload = message.payload ?? {};
+            const callbackId = message.callbackId ||
+                payload.callbackId ||
+                "";
+            if (!config.callbacks.onNavigateToCheckout) {
+                WebViewBridge_1.default.sendRawToWebView({
+                    source: "echo-parent",
+                    type: "redirectToCheckoutResponse",
+                    callbackId,
+                    success: false,
+                    error: "CALLBACK_NOT_REGISTERED",
+                });
+                return;
+            }
+            try {
+                config.callbacks.onNavigateToCheckout();
+                WebViewBridge_1.default.sendRawToWebView({
+                    source: "echo-parent",
+                    type: "redirectToCheckoutResponse",
+                    callbackId,
+                    success: true,
+                });
+            }
+            catch (error) {
+                WebViewBridge_1.default.sendRawToWebView({
+                    source: "echo-parent",
+                    type: "redirectToCheckoutResponse",
+                    callbackId,
+                    success: false,
+                    error: error instanceof Error ? error.message : "CHECKOUT_FAILED",
+                });
+            }
+            return;
+        }
+        switch (message.type) {
+            case "action": {
+                const { action, callbackId, product } = message.payload || {};
+                if (action === "addToCart" && product) {
+                    // Call partner's callback
+                    const result = await handleAddToCart(product);
+                    // Complete the action
+                    CallbackManager_1.default.completeAction(callbackId, result);
+                    // Send result back to WebView
+                    WebViewBridge_1.default.completeActionInWebView(callbackId, result);
+                }
+                else if (action === "getCart") {
+                    const result = await handleGetCart();
+                    WebViewBridge_1.default.completeActionInWebView(callbackId, {
+                        success: result.success,
+                        data: result.cart,
+                        error: result.error,
+                    });
+                }
+                break;
+            }
+            case "chatReady": {
+                // Initialize WebView with config
+                WebViewBridge_1.default.initWebView({
+                    apiKey: config.apiKey,
+                    userId,
+                    userEmail: config.userEmail,
+                    theme: config.theme,
+                });
+                break;
+            }
+            default:
+                break;
+        }
+    }, [
+        config,
+        userId,
+        visible,
+        onClose,
+        updateChatId,
+        updateUserId,
+        handleAddToCart,
+        handleGetCart,
+        handleNavigateToProduct,
+    ]);
+    // Subscribe to bridge messages
+    (0, react_1.useEffect)(() => {
+        console.log("[EchoChatModal] useEffect");
+        const unsubscribe = WebViewBridge_1.default.onMessage((message) => {
+            void handleMessage(message).catch((error) => {
+                console.error("[EchoChatModal] handleMessage error", error);
+            });
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [handleMessage]);
+    // Cancel all pending actions when modal closes
+    (0, react_1.useEffect)(() => {
+        if (!visible) {
+            CallbackManager_1.default.cancelAll("MODAL_CLOSED");
+        }
+    }, [visible]);
+    // Capture resume chat id only when opening the modal
+    (0, react_1.useEffect)(() => {
+        if (!isReady) {
+            return;
+        }
+        if (visible && !wasVisibleRef.current) {
+            setActiveResumeChatId(chatId || null);
+            setIsResumeReady(true);
+            setIsLoading(true);
+            setLoadTimeout(false);
+        }
+        if (!visible && wasVisibleRef.current) {
+            setIsResumeReady(false);
+        }
+        wasVisibleRef.current = visible;
+    }, [visible, chatId, isReady]);
+    // WebView loading timeout (15 seconds)
+    (0, react_1.useEffect)(() => {
+        if (visible && isResumeReady && isLoading) {
+            const timeoutId = setTimeout(() => {
+                setLoadTimeout(true);
+                setIsLoading(false);
+            }, 15000);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [visible, isResumeReady, isLoading]);
+    // Build WebView URL with params.
+    // Source: EchoProvider config only (no EchoChat override), then default.
+    // resolveApiUrl handles Android emulator localhost -> 10.0.2.2 conversion
+    const resolvedApiUrl = (0, resolveApiUrl_1.resolveApiUrl)(config.apiUrl) || ECHO_CHAT_URL;
+    const embedUrl = resolveEmbedUrl(resolvedApiUrl);
+    const separator = embedUrl.includes("?") ? "&" : "?";
+    const urlParams = new URLSearchParams();
+    urlParams.set("apiKey", config.apiKey);
+    urlParams.set("userId", userId);
+    urlParams.set("embed", "true");
+    urlParams.set("skipIdentify", "true"); // Skip web embed's auto-identify (SDK handles it)
+    if (config.userEmail) {
+        urlParams.set("userEmail", config.userEmail);
+    }
+    if (activeResumeChatId) {
+        urlParams.set("resumeChatId", activeResumeChatId);
+    }
+    // Add UI settings to URL params
+    if (config.uiSettings?.showSidebar !== undefined) {
+        urlParams.set("showSidebar", String(config.uiSettings.showSidebar));
+    }
+    if (config.uiSettings?.showExpandButton !== undefined) {
+        urlParams.set("showExpandButton", String(config.uiSettings.showExpandButton));
+    }
+    if (config.uiSettings?.showCartButton !== undefined) {
+        urlParams.set("showCartButton", String(config.uiSettings.showCartButton));
+    }
+    if (config.uiSettings?.showHistoryButton !== undefined) {
+        urlParams.set("showHistoryButton", String(config.uiSettings.showHistoryButton));
+    }
+    if (config.uiSettings?.showCloseButton !== undefined) {
+        urlParams.set("showCloseButton", String(config.uiSettings.showCloseButton));
+    }
+    const chatUrl = `${embedUrl}${separator}${urlParams.toString()}`;
+    return (<react_native_1.Modal animationType="slide" onRequestClose={onClose} transparent={true} visible={visible}>
+			<react_native_1.SafeAreaView style={styles.container}>
+				<react_native_1.View style={styles.header}>
+					<react_native_1.Text style={styles.title}>AI Asistan</react_native_1.Text>
+					<react_native_1.TouchableOpacity onPress={onClose} style={styles.closeButton}>
+						<react_native_1.Text style={styles.closeText}>✕</react_native_1.Text>
+					</react_native_1.TouchableOpacity>
+				</react_native_1.View>
+
+				<react_native_1.View style={styles.webviewContainer}>
+					{isLoading && (<react_native_1.View style={styles.loadingContainer}>
+							<react_native_1.ActivityIndicator color="#007AFF" size="large"/>
+							<react_native_1.Text style={styles.loadingText}>Yükleniyor...</react_native_1.Text>
+						</react_native_1.View>)}
+
+					{loadTimeout && (<react_native_1.View style={styles.errorContainer}>
+							<react_native_1.Text style={styles.errorTitle}>⏱️ Yükleme Zaman Aşımı</react_native_1.Text>
+							<react_native_1.Text style={styles.errorText}>
+								İnternet bağlantınızı kontrol edin
+							</react_native_1.Text>
+							<react_native_1.TouchableOpacity style={styles.retryButton} onPress={() => {
+                setLoadTimeout(false);
+                setIsLoading(true);
+                setIsResumeReady(false);
+                setTimeout(() => setIsResumeReady(true), 100);
+            }}>
+								<react_native_1.Text style={styles.retryButtonText}>🔄 Tekrar Dene</react_native_1.Text>
+							</react_native_1.TouchableOpacity>
+						</react_native_1.View>)}
+
+					{isResumeReady && (<react_native_webview_1.WebView domStorageEnabled={true} javaScriptEnabled={true} onLoad={() => {
+                setIsLoading(false);
+                // Broadcast available actions after WebView is loaded
+                // This ensures the web client receives actions even if it missed the initial request
+                const actions = ["addToCart", "getCart"];
+                if (config.callbacks.onNavigateToCheckout) {
+                    actions.push("redirectToCheckout");
+                }
+                // Small delay to ensure WebView's message listeners are set up
+                setTimeout(() => {
+                    WebViewBridge_1.default.sendRawToWebView({
+                        source: "echo-widget",
+                        type: "echo:available_actions",
+                        actions,
+                        schemas: {},
+                        customerId: null,
+                    });
+                }, 100);
+            }} onMessage={(event) => {
+                // console.log("[EchoChatModal] onMessage", event);
+                WebViewBridge_1.default.handleMessage(event);
+            }} ref={webViewRef} scalesPageToFit={true} source={{ uri: chatUrl }} startInLoadingState={true} style={styles.webview}/>)}
+				</react_native_1.View>
+			</react_native_1.SafeAreaView>
+		</react_native_1.Modal>);
+};
+exports.EchoChatModal = EchoChatModal;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#fff",
+    },
+    header: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: "#E5E5E5",
+        backgroundColor: "#fff",
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: "600",
+        color: "#000",
+    },
+    closeButton: {
+        padding: 8,
+    },
+    closeText: {
+        fontSize: 20,
+        color: "#666",
+    },
+    webviewContainer: {
+        flex: 1,
+        position: "relative",
+    },
+    webview: {
+        flex: 1,
+    },
+    loadingContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#fff",
+        zIndex: 1,
+    },
+    loadingText: {
+        marginTop: 12,
+        fontSize: 14,
+        color: "#666",
+    },
+    errorContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#fff",
+        zIndex: 2,
+        padding: 20,
+    },
+    errorTitle: {
+        fontSize: 18,
+        fontWeight: "600",
+        color: "#000",
+        marginBottom: 8,
+        textAlign: "center",
+    },
+    errorText: {
+        fontSize: 14,
+        color: "#666",
+        marginBottom: 20,
+        textAlign: "center",
+    },
+    retryButton: {
+        backgroundColor: "#007AFF",
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 8,
+    },
+    retryButtonText: {
+        color: "#fff",
+        fontSize: 16,
+        fontWeight: "600",
+    },
+});
+exports.default = exports.EchoChatModal;

package/dist/components/EchoProvider.d.ts

@@ -0,0 +1,30 @@
+/**
+ * EchoProvider - Main context provider for Echo SDK
+ *
+ * Provides:
+ * - SDK configuration (apiKey, callbacks)
+ * - User session management
+ * - Bridge initialization
+ */
+import type React from "react";
+import type { AddToCartResult, EchoConfig, GetCartResult, Product } from "../types";
+type EchoContextType = {
+    config: EchoConfig;
+    userId: string;
+    chatId: string;
+    isReady: boolean;
+    updateUserId: (newUserId: string) => Promise<void>;
+    updateChatId: (newChatId: string) => Promise<void>;
+    handleAddToCart: (product: Product, quantity?: number) => Promise<AddToCartResult>;
+    handleGetCart: () => Promise<GetCartResult>;
+    handleNavigateToProduct: (productId: string) => void;
+    handleNavigateToCheckout: () => void;
+    handleAuthRequired: () => void;
+};
+export declare const useEcho: () => EchoContextType;
+type EchoProviderProps = {
+    config: EchoConfig;
+    children: React.ReactNode;
+};
+export declare const EchoProvider: React.FC<EchoProviderProps>;
+export default EchoProvider;