@getuserfeedback/react-native 1.0.0 → 1.3.3

package/dist/index.js

@@ -1,14 +1,819 @@
-import { createContext, createElement, useContext, useMemo, } from "react";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { assertNoSegmentExternalIdsInValueArgument, CommandSettlementError, CommandSettlementTimeoutError, } from "@getuserfeedback/protocol/host";
+import { parseWebViewTransportNativeMessage } from "@getuserfeedback/protocol/webview-transport";
+import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { useResolvedHostViewport } from "./host-viewport.js";
+import { applyProviderOverlayFlowState, applyProviderOverlayHandleInvalidated, createDefaultProviderOverlayState, DEFAULT_PROVIDER_OVERLAY_VISIBILITY, updateProviderOverlayReadySequence, } from "./provider-overlay-state.js";
+import { REACT_NATIVE_SDK_VERSION } from "./version.js";
+import { WidgetHost, } from "./widget-host.js";
+export { REACT_NATIVE_SDK_VERSION } from "./version.js";
+export { buildNativeMessageInjectionScript, buildWebViewBridgeScript, } from "./webview-bridge-script.js";
+export { WidgetHost };
 const GetUserFeedbackNativeContext = createContext(null);
-export function GetUserFeedbackProvider({ children, configureOptions, initOptions, onWebMessage, }) {
-    const contextValue = useMemo(() => ({
-        configureOptions,
-        initOptions,
+const DEFAULT_COMMAND_TIMEOUT_MS = 30000;
+const PROVIDER_UNMOUNTED_ERROR_MESSAGE = "GetUserFeedbackProvider unmounted before command settled";
+const STARTUP_COMMAND_REPLACED_ERROR_MESSAGE = "GetUserFeedbackProvider replaced startup command before settlement";
+const CLIENT_META = {
+    clientName: "@getuserfeedback/react-native",
+    clientVersion: REACT_NATIVE_SDK_VERSION,
+    loader: "sdk",
+    transport: "loader",
+};
+const HIDDEN_WIDGET_HOST_STYLE = {
+    height: 1,
+    left: -1,
+    opacity: 0,
+    position: "absolute",
+    top: -1,
+    width: 1,
+};
+const WIDGET_SHEET_OVERLAY_STYLE = {
+    bottom: 0,
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+    zIndex: 2147483647,
+};
+const WIDGET_SHEET_BACKDROP_STYLE = {
+    backgroundColor: "rgba(15, 23, 42, 0.36)",
+    bottom: 0,
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+};
+const WIDGET_SHEET_STYLE = {
+    backgroundColor: "#ffffff",
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    bottom: 0,
+    left: 0,
+    overflow: "hidden",
+    position: "absolute",
+    right: 0,
+    shadowColor: "#000000",
+    shadowOffset: { height: -4, width: 0 },
+    shadowOpacity: 0.16,
+    shadowRadius: 18,
+    elevation: 18,
+};
+const VISIBLE_WIDGET_HOST_STYLE = {
+    flex: 1,
+};
+const VISIBLE_WIDGET_HOST_LAYOUT_STYLE_KEYS = new Set([
+    "alignSelf",
+    "bottom",
+    "display",
+    "end",
+    "flex",
+    "flexBasis",
+    "flexGrow",
+    "flexShrink",
+    "height",
+    "left",
+    "margin",
+    "marginBottom",
+    "marginEnd",
+    "marginHorizontal",
+    "marginLeft",
+    "marginRight",
+    "marginStart",
+    "marginTop",
+    "marginVertical",
+    "maxHeight",
+    "maxWidth",
+    "minHeight",
+    "minWidth",
+    "position",
+    "right",
+    "start",
+    "top",
+    "width",
+]);
+const DEFAULT_WIDGET_SHEET_HEIGHT_RATIO = 0.86;
+const DEFAULT_WIDGET_SHEET_MIN_HEIGHT = 320;
+const createUniqueId = (prefix) => {
+    if (typeof globalThis.crypto !== "undefined" &&
+        typeof globalThis.crypto.randomUUID === "function") {
+        return `${prefix}_${globalThis.crypto.randomUUID()}`;
+    }
+    return `${prefix}_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+};
+const createCommandRequestId = () => createUniqueId("req");
+const createTransportMessageId = () => createUniqueId("native");
+const normalizeOptionalString = (value) => {
+    if (value === undefined) {
+        return undefined;
+    }
+    const normalized = value.trim();
+    return normalized.length > 0 ? normalized : undefined;
+};
+const resolveRequiredString = (name, value) => {
+    const normalized = normalizeOptionalString(value);
+    if (normalized === undefined) {
+        throw new Error(`${name} must be a non-empty string`);
+    }
+    return normalized;
+};
+const toJsonKey = (value) => JSON.stringify(value);
+const toStableHash = (value) => {
+    const json = toJsonKey(value);
+    let hash = 0x811c9dc5;
+    for (let index = 0; index < json.length; index += 1) {
+        hash ^= json.charCodeAt(index);
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return (hash >>> 0).toString(16);
+};
+const FallbackNativeView = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return createElement("div", props, children);
+};
+function resolveNativeView() {
+    var _a;
+    try {
+        const reactNativeModule = require("react-native");
+        return (_a = reactNativeModule.View) !== null && _a !== void 0 ? _a : FallbackNativeView;
+    }
+    catch (_b) {
+        return FallbackNativeView;
+    }
+}
+function toSheetHostViewport(viewport) {
+    if (!viewport) {
+        return undefined;
+    }
+    const desiredHeight = Math.max(DEFAULT_WIDGET_SHEET_MIN_HEIGHT, Math.round(viewport.height * DEFAULT_WIDGET_SHEET_HEIGHT_RATIO));
+    return {
+        width: viewport.width,
+        height: Math.min(viewport.height, desiredHeight),
+    };
+}
+function toVisibleWidgetHostPresentationStyle(style) {
+    if (style === undefined || style === null) {
+        return undefined;
+    }
+    if (Array.isArray(style)) {
+        const styles = style
+            .map(toVisibleWidgetHostPresentationStyle)
+            .filter((entry) => entry !== undefined && entry !== null);
+        return styles.length > 0 ? styles : undefined;
+    }
+    if (typeof style !== "object") {
+        return style;
+    }
+    const presentationStyle = {};
+    for (const [key, value] of Object.entries(style)) {
+        if (!VISIBLE_WIDGET_HOST_LAYOUT_STYLE_KEYS.has(key)) {
+            presentationStyle[key] = value;
+        }
+    }
+    return Object.keys(presentationStyle).length > 0
+        ? presentationStyle
+        : undefined;
+}
+const toIdentifyCommandPayload = (identifyInput, traitsOrOptions, options) => {
+    if (typeof identifyInput === "string") {
+        assertNoSegmentExternalIdsInValueArgument({
+            argument: traitsOrOptions,
+            commandName: "identify",
+            valueArgumentName: "traits",
+            callShape: "identify(userId, traits, { externalIds })",
+        });
+        return {
+            kind: "identify",
+            userId: resolveRequiredString("userId", identifyInput),
+            traits: traitsOrOptions,
+            options,
+        };
+    }
+    assertNoSegmentExternalIdsInValueArgument({
+        argument: identifyInput,
+        commandName: "identify",
+        valueArgumentName: "traits",
+        callShape: "identify(traits, { externalIds })",
+    });
+    return {
+        kind: "identify",
+        traits: identifyInput,
+        options: options !== null && options !== void 0 ? options : traitsOrOptions,
+    };
+};
+const isFlowCommand = (command) => command.kind === "open" ||
+    command.kind === "prefetch" ||
+    command.kind === "prerender";
+const toSettledFlowHandleId = (result) => {
+    if (typeof result !== "object" || result === null) {
+        return undefined;
+    }
+    const flowHandleId = result.flowHandleId;
+    return typeof flowHandleId === "string" && flowHandleId.trim().length > 0
+        ? flowHandleId
+        : undefined;
+};
+const toCommandFlowId = (command) => {
+    if (!isFlowCommand(command)) {
+        return undefined;
+    }
+    return command.flowId;
+};
+const toRetryWithoutFlowHandle = (command) => {
+    if (!isFlowCommand(command) || command.flowHandleId === undefined) {
+        return null;
+    }
+    return Object.assign(Object.assign({}, command), { flowHandleId: undefined });
+};
+const toCommandSettlementError = (event) => {
+    if (event.detail.ok) {
+        return null;
+    }
+    return new CommandSettlementError({
+        code: event.detail.error.code,
+        instanceId: event.detail.instanceId,
+        kind: event.detail.kind,
+        message: event.detail.error.message,
+        requestId: event.detail.requestId,
+    });
+};
+export function GetUserFeedbackProvider({ autoInit = true, children, commandTimeoutMs = DEFAULT_COMMAND_TIMEOUT_MS, configureOptions, hostViewport, instanceId: instanceIdProp, initOptions, loaderUrl, onCommandError, onInvalidWebMessage, onWebMessage, source, webViewComponent, webViewProps, }) {
+    var _a, _b, _c;
+    const NativeView = useMemo(resolveNativeView, []);
+    const [instanceId] = useState(() => { var _a; return (_a = normalizeOptionalString(instanceIdProp)) !== null && _a !== void 0 ? _a : createUniqueId("rn"); });
+    const [nativeMessages, setNativeMessages] = useState([]);
+    const [widgetHostVisibility, setWidgetHostVisibility] = useState(DEFAULT_PROVIDER_OVERLAY_VISIBILITY);
+    const resolvedHostViewport = useResolvedHostViewport(hostViewport);
+    const nativeMessagesRef = useRef([]);
+    const pendingCommandsRef = useRef(new Map());
+    const hostEpochRef = useRef(0);
+    const flowHandleCacheEpochRef = useRef(0);
+    const flowHandleIdsByFlowIdRef = useRef(new Map());
+    const flowCommandSequencesByFlowIdRef = useRef(new Map());
+    const providerOverlayStateRef = useRef(createDefaultProviderOverlayState());
+    const initOptionsRef = useRef(initOptions);
+    const configureOptionsRef = useRef(configureOptions);
+    const initOptionsKey = useMemo(() => toJsonKey(initOptions), [initOptions]);
+    const configureOptionsKey = useMemo(() => (configureOptions === undefined ? null : toJsonKey(configureOptions)), [configureOptions]);
+    const hostSourceKey = useMemo(() => toJsonKey({ loaderUrl: loaderUrl !== null && loaderUrl !== void 0 ? loaderUrl : null, source: source !== null && source !== void 0 ? source : null }), [loaderUrl, source]);
+    const startupOptionsKey = useMemo(() => toJsonKey({ configureOptionsKey, initOptionsKey }), [configureOptionsKey, initOptionsKey]);
+    const startupIdempotencyKey = useMemo(() => toStableHash({ configureOptionsKey, initOptionsKey }), [configureOptionsKey, initOptionsKey]);
+    const startupQueuedKeyRef = useRef(null);
+    const lastReadyRef = useRef(null);
+    const visibilitySourceKeyRef = useRef(hostSourceKey);
+    const hostSourceKeyRef = useRef(hostSourceKey);
+    const hostSourceVersionRef = useRef(0);
+    if (hostSourceKeyRef.current !== hostSourceKey) {
+        hostSourceKeyRef.current = hostSourceKey;
+        hostSourceVersionRef.current += 1;
+        for (const pendingCommand of pendingCommandsRef.current.values()) {
+            if (!pendingCommand.timeout) {
+                continue;
+            }
+            clearTimeout(pendingCommand.timeout);
+            pendingCommand.timeout = null;
+        }
+        lastReadyRef.current = null;
+        startupQueuedKeyRef.current = null;
+        flowHandleCacheEpochRef.current += 1;
+        flowHandleIdsByFlowIdRef.current.clear();
+        providerOverlayStateRef.current = createDefaultProviderOverlayState();
+    }
+    initOptionsRef.current = initOptions;
+    configureOptionsRef.current = configureOptions;
+    nativeMessagesRef.current = nativeMessages;
+    const reportCommandError = useCallback((error) => {
+        if (error.message === PROVIDER_UNMOUNTED_ERROR_MESSAGE ||
+            error.message === STARTUP_COMMAND_REPLACED_ERROR_MESSAGE) {
+            return;
+        }
+        if (onCommandError) {
+            onCommandError(error);
+            return;
+        }
+        setTimeout(() => {
+            throw error;
+        }, 0);
+    }, [onCommandError]);
+    const rejectPendingCommand = useCallback((requestId, pendingCommand, error) => {
+        pendingCommandsRef.current.delete(requestId);
+        if (pendingCommand.timeout) {
+            clearTimeout(pendingCommand.timeout);
+            pendingCommand.timeout = null;
+        }
+        if (pendingCommand.isStartup) {
+            startupQueuedKeyRef.current = null;
+        }
+        setNativeMessages((messages) => messages.filter((entry) => entry.id !== pendingCommand.messageId));
+        pendingCommand.reject(error);
+    }, []);
+    const startPendingCommandTimeout = useCallback((requestId, pendingCommand) => {
+        var _a, _b;
+        pendingCommand.hostEpoch = (_b = (_a = lastReadyRef.current) === null || _a === void 0 ? void 0 : _a.hostEpoch) !== null && _b !== void 0 ? _b : null;
+        if (commandTimeoutMs <= 0) {
+            return;
+        }
+        if (pendingCommand.timeout) {
+            clearTimeout(pendingCommand.timeout);
+        }
+        pendingCommand.timeout = setTimeout(() => {
+            rejectPendingCommand(requestId, pendingCommand, new CommandSettlementTimeoutError(requestId));
+        }, commandTimeoutMs);
+    }, [commandTimeoutMs, rejectPendingCommand]);
+    const startPendingCommandTimeouts = useCallback(() => {
+        for (const [requestId, pendingCommand] of pendingCommandsRef.current) {
+            startPendingCommandTimeout(requestId, pendingCommand);
+        }
+    }, [startPendingCommandTimeout]);
+    const pausePendingCommandTimeouts = useCallback(() => {
+        for (const pendingCommand of pendingCommandsRef.current.values()) {
+            if (!pendingCommand.timeout) {
+                continue;
+            }
+            clearTimeout(pendingCommand.timeout);
+            pendingCommand.timeout = null;
+        }
+    }, []);
+    const enqueueTransportCommand = useCallback((command, options, { isStartup = false, prioritizeStartup = false, } = {}) => {
+        var _a, _b;
+        const requestId = createCommandRequestId();
+        const idempotencyKey = (_a = normalizeOptionalString(options === null || options === void 0 ? void 0 : options.idempotencyKey)) !== null && _a !== void 0 ? _a : requestId;
+        const envelope = {
+            version: "1",
+            instanceId,
+            requestId,
+            idempotencyKey,
+            clientMeta: CLIENT_META,
+            command,
+        };
+        const message = {
+            kind: "enqueueCommand",
+            id: createTransportMessageId(),
+            envelope,
+        };
+        let validatedMessage;
+        try {
+            validatedMessage = parseWebViewTransportNativeMessage(message);
+        }
+        catch (error) {
+            if (isStartup) {
+                startupQueuedKeyRef.current = null;
+            }
+            return Promise.reject(error instanceof Error ? error : new Error(String(error)));
+        }
+        const result = {
+            envelope: validatedMessage.envelope,
+            message: validatedMessage,
+        };
+        const flowId = toCommandFlowId(validatedMessage.envelope.command);
+        const flowCommandSequence = flowId === undefined
+            ? null
+            : ((_b = flowCommandSequencesByFlowIdRef.current.get(flowId)) !== null && _b !== void 0 ? _b : 0) + 1;
+        if (flowId !== undefined && flowCommandSequence !== null) {
+            flowCommandSequencesByFlowIdRef.current.set(flowId, flowCommandSequence);
+        }
+        const promise = new Promise((resolve, reject) => {
+            pendingCommandsRef.current.set(requestId, {
+                flowCommandSequence,
+                flowHandleCacheEpoch: flowHandleCacheEpochRef.current,
+                hostEpoch: null,
+                isStartup,
+                messageId: validatedMessage.id,
+                reject,
+                resolve,
+                result,
+                timeout: null,
+            });
+            if (lastReadyRef.current !== null) {
+                startPendingCommandTimeout(requestId, pendingCommandsRef.current.get(requestId));
+            }
+        });
+        setNativeMessages((messages) => {
+            if (!(isStartup && prioritizeStartup)) {
+                return [...messages, validatedMessage];
+            }
+            const firstActionIndex = messages.findIndex((entry) => {
+                const pendingCommand = pendingCommandsRef.current.get(entry.envelope.requestId);
+                return !(pendingCommand === null || pendingCommand === void 0 ? void 0 : pendingCommand.isStartup);
+            });
+            if (firstActionIndex === -1) {
+                return [...messages, validatedMessage];
+            }
+            return [
+                ...messages.slice(0, firstActionIndex),
+                validatedMessage,
+                ...messages.slice(firstActionIndex),
+            ];
+        });
+        return promise;
+    }, [instanceId, startPendingCommandTimeout]);
+    const reissueDeliveredPendingActionCommands = useCallback(() => {
+        var _a;
+        const replacements = new Map();
+        for (const [requestId, pendingCommand] of [
+            ...pendingCommandsRef.current.entries(),
+        ]) {
+            if (pendingCommand.isStartup || pendingCommand.hostEpoch === null) {
+                continue;
+            }
+            pendingCommandsRef.current.delete(requestId);
+            if (pendingCommand.timeout) {
+                clearTimeout(pendingCommand.timeout);
+                pendingCommand.timeout = null;
+            }
+            const command = pendingCommand.result.envelope.command;
+            const nextEnvelope = Object.assign(Object.assign({}, pendingCommand.result.envelope), { command: (_a = toRetryWithoutFlowHandle(command)) !== null && _a !== void 0 ? _a : command, requestId: createCommandRequestId() });
+            const nextMessage = parseWebViewTransportNativeMessage({
+                kind: "enqueueCommand",
+                id: createTransportMessageId(),
+                envelope: nextEnvelope,
+            });
+            const previousMessageId = pendingCommand.messageId;
+            pendingCommand.flowHandleCacheEpoch = flowHandleCacheEpochRef.current;
+            pendingCommand.hostEpoch = null;
+            pendingCommand.messageId = nextMessage.id;
+            pendingCommand.result = {
+                envelope: nextMessage.envelope,
+                message: nextMessage,
+            };
+            pendingCommandsRef.current.set(nextEnvelope.requestId, pendingCommand);
+            replacements.set(previousMessageId, nextMessage);
+        }
+        if (replacements.size === 0) {
+            return false;
+        }
+        setNativeMessages((messages) => messages.map((message) => { var _a; return (_a = replacements.get(message.id)) !== null && _a !== void 0 ? _a : message; }));
+        return true;
+    }, []);
+    const cancelPendingStartupCommands = useCallback(() => {
+        const canceledMessageIds = new Set();
+        for (const [requestId, pendingCommand] of pendingCommandsRef.current) {
+            if (!pendingCommand.isStartup) {
+                continue;
+            }
+            pendingCommandsRef.current.delete(requestId);
+            canceledMessageIds.add(pendingCommand.messageId);
+            if (pendingCommand.timeout) {
+                clearTimeout(pendingCommand.timeout);
+            }
+            pendingCommand.reject(new Error(STARTUP_COMMAND_REPLACED_ERROR_MESSAGE));
+        }
+        if (canceledMessageIds.size === 0) {
+            return;
+        }
+        setNativeMessages((messages) => messages.filter((entry) => !canceledMessageIds.has(entry.id)));
+    }, []);
+    const enqueueStartupCommands = useCallback(({ force = false } = {}) => {
+        if (!autoInit) {
+            return;
+        }
+        if (!force && startupQueuedKeyRef.current === startupOptionsKey) {
+            return;
+        }
+        const isReplacingStartup = force || startupQueuedKeyRef.current !== startupOptionsKey;
+        if (isReplacingStartup) {
+            cancelPendingStartupCommands();
+        }
+        startupQueuedKeyRef.current = startupOptionsKey;
+        enqueueTransportCommand({ kind: "init", opts: initOptionsRef.current }, { idempotencyKey: `${instanceId}:init:${startupIdempotencyKey}` }, { isStartup: true, prioritizeStartup: isReplacingStartup }).catch(reportCommandError);
+        if (configureOptionsRef.current === undefined) {
+            return;
+        }
+        enqueueTransportCommand({ kind: "configure", opts: configureOptionsRef.current }, { idempotencyKey: `${instanceId}:configure:${startupIdempotencyKey}` }, { isStartup: true, prioritizeStartup: isReplacingStartup }).catch(reportCommandError);
+    }, [
+        autoInit,
+        cancelPendingStartupCommands,
+        enqueueTransportCommand,
+        instanceId,
+        reportCommandError,
+        startupIdempotencyKey,
+        startupOptionsKey,
+    ]);
+    const enqueueCommand = useCallback((command, options) => {
+        enqueueStartupCommands();
+        return enqueueTransportCommand(command, options);
+    }, [enqueueStartupCommands, enqueueTransportCommand]);
+    const handleWidgetReady = useCallback((event) => {
+        const previous = lastReadyRef.current;
+        const alreadySeen = (previous === null || previous === void 0 ? void 0 : previous.sourceKey) === event.sourceKey &&
+            previous.readySequence === event.readySequence;
+        if (alreadySeen) {
+            return false;
+        }
+        const hasDeliveredPendingCommands = [
+            ...pendingCommandsRef.current.values(),
+        ].some((pendingCommand) => pendingCommand.hostEpoch !== null);
+        let didReissueDeliveredCommands = false;
+        if (previous !== null || hasDeliveredPendingCommands) {
+            hostEpochRef.current += 1;
+            startupQueuedKeyRef.current = null;
+            flowHandleCacheEpochRef.current += 1;
+            flowHandleIdsByFlowIdRef.current.clear();
+            didReissueDeliveredCommands = reissueDeliveredPendingActionCommands();
+        }
+        lastReadyRef.current = Object.assign(Object.assign({}, event), { hostEpoch: hostEpochRef.current });
+        const nextVisibility = updateProviderOverlayReadySequence({
+            ready: {
+                hostSourceVersion: hostSourceVersionRef.current,
+                readySequence: event.readySequence,
+                sourceKey: event.sourceKey,
+            },
+            visibility: providerOverlayStateRef.current.visibility,
+        });
+        providerOverlayStateRef.current = Object.assign(Object.assign({}, providerOverlayStateRef.current), { visibility: nextVisibility });
+        setWidgetHostVisibility(nextVisibility);
+        enqueueStartupCommands({ force: previous !== null });
+        startPendingCommandTimeouts();
+        return didReissueDeliveredCommands;
+    }, [
+        enqueueStartupCommands,
+        reissueDeliveredPendingActionCommands,
+        startPendingCommandTimeouts,
+    ]);
+    const handleWidgetReadyStateChange = useCallback((event) => {
+        if (event.isReady) {
+            const didReissueDeliveredCommands = handleWidgetReady({
+                readySequence: event.readySequence,
+                sourceKey: event.sourceKey,
+            });
+            return {
+                deferNativeMessageInjection: didReissueDeliveredCommands,
+            };
+        }
+        if (lastReadyRef.current !== null) {
+            hostEpochRef.current += 1;
+            startupQueuedKeyRef.current = null;
+            flowHandleCacheEpochRef.current += 1;
+            flowHandleIdsByFlowIdRef.current.clear();
+            reissueDeliveredPendingActionCommands();
+        }
+        lastReadyRef.current = null;
+        providerOverlayStateRef.current = createDefaultProviderOverlayState();
+        setWidgetHostVisibility(providerOverlayStateRef.current.visibility);
+        pausePendingCommandTimeouts();
+    }, [
+        handleWidgetReady,
+        pausePendingCommandTimeouts,
+        reissueDeliveredPendingActionCommands,
+    ]);
+    const deleteCachedFlowHandleId = useCallback((flowHandleId) => {
+        for (const [flowId, cachedFlowHandleId,] of flowHandleIdsByFlowIdRef.current) {
+            if (cachedFlowHandleId === flowHandleId) {
+                flowHandleIdsByFlowIdRef.current.delete(flowId);
+            }
+        }
+        flowHandleCacheEpochRef.current += 1;
+    }, []);
+    const handleFlowHandleInvalidated = useCallback((flowHandleId) => {
+        deleteCachedFlowHandleId(flowHandleId);
+        const nextState = applyProviderOverlayHandleInvalidated({
+            flowHandleId,
+            state: providerOverlayStateRef.current,
+        });
+        providerOverlayStateRef.current = nextState;
+        setWidgetHostVisibility(nextState.visibility);
+    }, [deleteCachedFlowHandleId]);
+    const handleFlowStateChanged = useCallback((detail, options) => {
+        if (detail.instanceId !== instanceId) {
+            return;
+        }
+        const readyState = lastReadyRef.current;
+        if (!readyState) {
+            return;
+        }
+        const nextState = applyProviderOverlayFlowState({
+            detail,
+            origin: options.origin,
+            ready: {
+                hostSourceVersion: hostSourceVersionRef.current,
+                readySequence: readyState.readySequence,
+                sourceKey: readyState.sourceKey,
+            },
+            state: providerOverlayStateRef.current,
+        });
+        providerOverlayStateRef.current = nextState;
+        setWidgetHostVisibility(nextState.visibility);
+    }, [instanceId]);
+    const handleWebMessage = useCallback((message) => {
+        var _a;
+        if (message.kind === "hostEvent" &&
+            message.event.name === "instance:handle:invalidated") {
+            handleFlowHandleInvalidated(message.event.detail.handleId);
+        }
+        if (message.kind === "hostEvent" &&
+            message.event.name === "instance:flow:state-changed") {
+            handleFlowStateChanged(message.event.detail, { origin: "handle" });
+        }
+        if (message.kind === "hostEvent" &&
+            message.event.name === "instance:flow:state-changed:instance") {
+            handleFlowStateChanged(message.event.detail, { origin: "aggregate" });
+        }
+        if (message.kind === "hostEvent" &&
+            message.event.name === "instance:command:settled") {
+            const requestId = message.event.detail.requestId;
+            const pendingCommand = pendingCommandsRef.current.get(requestId);
+            if (pendingCommand) {
+                if (pendingCommand.hostEpoch !== null &&
+                    pendingCommand.hostEpoch !== ((_a = lastReadyRef.current) === null || _a === void 0 ? void 0 : _a.hostEpoch)) {
+                    onWebMessage === null || onWebMessage === void 0 ? void 0 : onWebMessage(message);
+                    return;
+                }
+                pendingCommandsRef.current.delete(requestId);
+                setNativeMessages((messages) => messages.filter((entry) => entry.id !== pendingCommand.messageId));
+                if (pendingCommand.timeout) {
+                    clearTimeout(pendingCommand.timeout);
+                }
+                const error = toCommandSettlementError(message.event);
+                if (error) {
+                    if (pendingCommand.isStartup) {
+                        startupQueuedKeyRef.current = null;
+                    }
+                    const flowId = toCommandFlowId(pendingCommand.result.envelope.command);
+                    const isStaleFlowHandleError = error.code === "STALE_HANDLE" ||
+                        error.message.includes("flowHandleId is stale");
+                    if (flowId && isStaleFlowHandleError) {
+                        flowHandleIdsByFlowIdRef.current.delete(flowId);
+                    }
+                    const retryCommand = isStaleFlowHandleError
+                        ? toRetryWithoutFlowHandle(pendingCommand.result.envelope.command)
+                        : null;
+                    if (retryCommand) {
+                        enqueueTransportCommand(retryCommand).then(pendingCommand.resolve, pendingCommand.reject);
+                        return;
+                    }
+                    pendingCommand.reject(error);
+                }
+                else {
+                    const settlement = message.event
+                        .detail;
+                    const flowId = toCommandFlowId(pendingCommand.result.envelope.command);
+                    const flowHandleId = toSettledFlowHandleId(settlement.result);
+                    const canWriteFlowHandle = flowId &&
+                        flowHandleId &&
+                        pendingCommand.flowHandleCacheEpoch ===
+                            flowHandleCacheEpochRef.current &&
+                        pendingCommand.flowCommandSequence ===
+                            flowCommandSequencesByFlowIdRef.current.get(flowId);
+                    if (canWriteFlowHandle) {
+                        flowHandleIdsByFlowIdRef.current.set(flowId, flowHandleId);
+                    }
+                    if (pendingCommand.result.envelope.command.kind === "reset") {
+                        flowHandleCacheEpochRef.current += 1;
+                        flowHandleIdsByFlowIdRef.current.clear();
+                    }
+                    const settledResult = Object.assign(Object.assign({}, pendingCommand.result), { settlement, settlementResult: settlement.result });
+                    pendingCommand.resolve(settledResult);
+                }
+            }
+        }
+        onWebMessage === null || onWebMessage === void 0 ? void 0 : onWebMessage(message);
+    }, [
+        enqueueTransportCommand,
+        handleFlowStateChanged,
+        handleFlowHandleInvalidated,
         onWebMessage,
-    }), [configureOptions, initOptions, onWebMessage]);
+    ]);
+    useEffect(() => () => {
+        for (const pendingCommand of pendingCommandsRef.current.values()) {
+            if (pendingCommand.timeout) {
+                clearTimeout(pendingCommand.timeout);
+            }
+            pendingCommand.reject(new Error(PROVIDER_UNMOUNTED_ERROR_MESSAGE));
+        }
+        pendingCommandsRef.current.clear();
+    }, []);
+    useEffect(() => {
+        if (visibilitySourceKeyRef.current === hostSourceKey) {
+            return;
+        }
+        visibilitySourceKeyRef.current = hostSourceKey;
+        providerOverlayStateRef.current = createDefaultProviderOverlayState();
+        setWidgetHostVisibility(providerOverlayStateRef.current.visibility);
+    }, [hostSourceKey]);
+    const contextValue = useMemo(() => ({
+        instanceId,
+        get nativeMessages() {
+            return nativeMessagesRef.current;
+        },
+        enqueueCommand,
+        configure: (opts, options) => enqueueCommand({ kind: "configure", opts }, options),
+        identify: ((identifyInput, traitsOrOptions, options) => enqueueCommand(toIdentifyCommandPayload(identifyInput, traitsOrOptions, options))),
+        track: (eventName, properties, options) => {
+            assertNoSegmentExternalIdsInValueArgument({
+                argument: properties,
+                commandName: "track",
+                valueArgumentName: "properties",
+                callShape: "track(eventName, properties, { externalIds })",
+            });
+            return enqueueCommand(Object.assign(Object.assign({ kind: "track", origin: "customer", event: resolveRequiredString("eventName", eventName) }, (properties === undefined ? {} : { properties })), ((options === null || options === void 0 ? void 0 : options.externalIds) === undefined
+                ? {}
+                : { context: { externalIds: options.externalIds } })));
+        },
+        open: (flowId, options, commandOptions) => {
+            const normalizedFlowId = resolveRequiredString("flowId", flowId);
+            return enqueueCommand({
+                kind: "open",
+                flowId: normalizedFlowId,
+                flowHandleId: flowHandleIdsByFlowIdRef.current.get(normalizedFlowId),
+                hideCloseButton: options === null || options === void 0 ? void 0 : options.hideCloseButton,
+            }, commandOptions);
+        },
+        prefetch: (flowId, options) => {
+            const normalizedFlowId = resolveRequiredString("flowId", flowId);
+            return enqueueCommand({
+                kind: "prefetch",
+                flowId: normalizedFlowId,
+                flowHandleId: flowHandleIdsByFlowIdRef.current.get(normalizedFlowId),
+            }, options);
+        },
+        prerender: (flowId, options, commandOptions) => {
+            const normalizedFlowId = resolveRequiredString("flowId", flowId);
+            return enqueueCommand({
+                kind: "prerender",
+                flowId: normalizedFlowId,
+                flowHandleId: flowHandleIdsByFlowIdRef.current.get(normalizedFlowId),
+                hideCloseButton: options === null || options === void 0 ? void 0 : options.hideCloseButton,
+            }, commandOptions);
+        },
+        close: (flowHandleId, options) => enqueueCommand(Object.assign({ kind: "close" }, (flowHandleId === undefined
+            ? {}
+            : {
+                flowHandleId: resolveRequiredString("flowHandleId", flowHandleId),
+            })), options),
+        reset: (options) => enqueueCommand({ kind: "reset" }, options),
+        updateHostContext: (context, options) => enqueueCommand({ kind: "updateHostContext", context }, options),
+        emitHostSignal: (name, data, options) => enqueueCommand(Object.assign({ kind: "emitHostSignal", name: resolveRequiredString("name", name) }, (data === undefined ? {} : { data })), options),
+        handleWebMessage,
+    }), [enqueueCommand, handleWebMessage, instanceId]);
+    useEffect(() => {
+        if (startupQueuedKeyRef.current !== startupOptionsKey) {
+            startupQueuedKeyRef.current = null;
+        }
+        enqueueStartupCommands();
+    }, [enqueueStartupCommands, startupOptionsKey]);
+    const isWidgetHostVisible = widgetHostVisibility.isVisible &&
+        widgetHostVisibility.hostSourceVersion === hostSourceVersionRef.current &&
+        widgetHostVisibility.sourceKey === ((_a = lastReadyRef.current) === null || _a === void 0 ? void 0 : _a.sourceKey) &&
+        widgetHostVisibility.readySequence === ((_b = lastReadyRef.current) === null || _b === void 0 ? void 0 : _b.readySequence);
+    const sheetHostViewport = toSheetHostViewport(hostViewport !== null && hostViewport !== void 0 ? hostViewport : resolvedHostViewport);
+    const widgetHostViewport = isWidgetHostVisible
+        ? sheetHostViewport
+        : (hostViewport !== null && hostViewport !== void 0 ? hostViewport : resolvedHostViewport);
+    const widgetSheetStyle = sheetHostViewport
+        ? Object.assign(Object.assign({}, WIDGET_SHEET_STYLE), { height: sheetHostViewport.height }) : Object.assign(Object.assign({}, WIDGET_SHEET_STYLE), { height: "86%" });
+    const widgetHostStyle = isWidgetHostVisible
+        ? VISIBLE_WIDGET_HOST_STYLE
+        : HIDDEN_WIDGET_HOST_STYLE;
+    const visiblePresentationStyle = isWidgetHostVisible
+        ? toVisibleWidgetHostPresentationStyle(webViewProps === null || webViewProps === void 0 ? void 0 : webViewProps.style)
+        : undefined;
+    const composedWebViewStyle = isWidgetHostVisible
+        ? visiblePresentationStyle !== undefined
+            ? [visiblePresentationStyle, widgetHostStyle]
+            : widgetHostStyle
+        : ((_c = webViewProps === null || webViewProps === void 0 ? void 0 : webViewProps.style) !== null && _c !== void 0 ? _c : widgetHostStyle);
+    const widgetHost = createElement(WidgetHost, {
+        hostViewport: widgetHostViewport,
+        instanceId,
+        loaderUrl,
+        nativeMessages,
+        onInvalidWebMessage,
+        onReadyStateChange: handleWidgetReadyStateChange,
+        onWebMessage: handleWebMessage,
+        source,
+        webViewComponent,
+        webViewProps: Object.assign(Object.assign({}, webViewProps), { pointerEvents: isWidgetHostVisible ? "auto" : "none", style: composedWebViewStyle }),
+    });
     return createElement(GetUserFeedbackNativeContext.Provider, {
         value: contextValue,
-    }, children);
+    }, children, createElement(NativeView, {
+        pointerEvents: isWidgetHostVisible ? "auto" : "none",
+        style: isWidgetHostVisible
+            ? WIDGET_SHEET_OVERLAY_STYLE
+            : HIDDEN_WIDGET_HOST_STYLE,
+        testID: "gx-widget-host-overlay",
+    }, createElement(NativeView, {
+        pointerEvents: isWidgetHostVisible ? "auto" : "none",
+        style: isWidgetHostVisible
+            ? WIDGET_SHEET_BACKDROP_STYLE
+            : HIDDEN_WIDGET_HOST_STYLE,
+        testID: "gx-widget-host-backdrop",
+    }), createElement(NativeView, {
+        pointerEvents: isWidgetHostVisible ? "auto" : "none",
+        style: isWidgetHostVisible
+            ? widgetSheetStyle
+            : HIDDEN_WIDGET_HOST_STYLE,
+        testID: "gx-widget-host-sheet",
+    }, widgetHost)));
 }
 export function useGetUserFeedbackNative() {
     const context = useContext(GetUserFeedbackNativeContext);
@@ -17,6 +822,4 @@ export function useGetUserFeedbackNative() {
     }
     return context;
 }
-export function WidgetHost(_props) {
-    return null;
-}
+export const useGetUserFeedback = useGetUserFeedbackNative;