@lorikeetai/react-native-sdk 2.0.0-alpha.1 → 2.0.0-alpha.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { AppState, Linking, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { WebView } from "react-native-webview";
@@ -115,6 +115,26 @@ var LorikeetClient = class {
 			if (this.metadata) url.searchParams.append("metadata", JSON.stringify(this.metadata));
 			return url.toString();
 		});
+		_defineProperty(
+			this,
+			/**
+			* The page that clears this key's credentials from the WebView: its cookies,
+			* server-side, and the storage the frame keeps. Navigating a WebView here is
+			* the only way to reach either, so a host that only drops its own copy of
+			* `ticketId` and `session` leaves the next person on the device able to
+			* reopen the conversation.
+			*
+			* The page confirms with a `loggedOut` message, which the SDK reports as
+			* `logged_out`. The load event does not: an error page fires that too.
+			*/
+			"getLogoutUrl",
+			() => {
+				const url = new URL(this.baseUrl);
+				url.pathname = "/logout";
+				url.searchParams.append("public_key", this.publicKey);
+				return url.toString();
+			}
+		);
 		if (api_base) this.baseUrl = api_base;
 		this.publicKey = public_key;
 		if (customisations) this.customisations = customisations;
@@ -181,7 +201,10 @@ const eventFromMessage = (message) => {
 	switch (record.type) {
 		case "ready": return { type: "ready" };
 		case "customerMessage": return { type: "customer_message" };
-		case "agentMessage": return { type: "agent_message" };
+		case "agentMessage": return typeof record.markUnread === "boolean" ? {
+			type: "agent_message",
+			markUnread: record.markUnread
+		} : { type: "agent_message" };
 		case "closeChat": {
 			const reason = asNonEmptyString(record.reason);
 			return reason === "ended_by_customer" || reason === "minimised" ? {
@@ -205,6 +228,7 @@ const eventFromMessage = (message) => {
 				session
 			};
 		}
+		case "loggedOut": return { type: "logged_out" };
 		case "error": {
 			const error = asNonEmptyString(record.error);
 			return error === null ? null : {
@@ -255,6 +279,13 @@ const resumedTicketIdFromUri = (uri) => {
 */
 const BACKGROUND_RELOAD_THRESHOLD_MS = 18e4;
 /**
+* How long `/logout` gets to confirm it cleared the frame before the host is
+* told it did not. Matches the web SDK's own budget, and like it, a logout that
+* misses the deadline leaves the widget unavailable rather than letting the next
+* customer start a chat on a device the previous one's credentials still open.
+*/
+const LOGOUT_CONFIRMATION_TIMEOUT_MS = 1e4;
+/**
 * Elapsed time is the only signal available: the bridge reports `ready`,
 * `error` and the persistence messages, but never stream health, so the SDK
 * cannot ask whether the connection actually survived.
@@ -381,6 +412,7 @@ const stylesheet = StyleSheet.create({
 		textAlign: "center",
 		fontSize: 16
 	},
+	closedControl: { padding: 16 },
 	webView: { flex: 1 },
 	closed: {
 		flex: 1,
@@ -459,8 +491,8 @@ const LorikeetWidgetHeader = ({ title, style, icon = /* @__PURE__ */ jsx(Message
 		]
 	});
 };
-function LorikeetWidgetView({ publicKey, baseUrl, authToken, customisations, styles, onEvent, onWebViewMessage, ticketId, session, metadata, webviewProps }) {
-	var _customisations$title;
+const LorikeetWidgetView = forwardRef(function LorikeetWidgetView({ publicKey, baseUrl, authToken, customisations, styles, onEvent, onWebViewMessage, ticketId, session, metadata, webviewProps }, ref) {
+	var _customisations$hideH, _customisations$title;
 	const [lorikeetClient, setLorikeetClient] = useState(null);
 	const [loaded, setLoaded] = useState(null);
 	const [generation, setGeneration] = useState(0);
@@ -485,7 +517,12 @@ function LorikeetWidgetView({ publicKey, baseUrl, authToken, customisations, sty
 	});
 	const resumingTicketId = ticketId !== void 0 && ticketId !== refusedTicketId ? ticketId : void 0;
 	const [attemptedTicketId, setAttemptedTicketId] = useState(void 0);
-	const [closed, setClosed] = useState(false);
+	const [closed, setClosed] = useState(null);
+	const [clearing, setClearing] = useState(null);
+	const [loggedOutIdentity, setLoggedOutIdentity] = useState(null);
+	const onEventRef = useRef(onEvent);
+	onEventRef.current = onEvent;
+	const hideHeader = (_customisations$hideH = customisations === null || customisations === void 0 ? void 0 : customisations.hideHeader) !== null && _customisations$hideH !== void 0 ? _customisations$hideH : true;
 	const load = useCallback((client, forIdentity, intendedTicketId, resume, force = false) => {
 		const next = client.getWebviewUrl({
 			token: authToken,
@@ -493,7 +530,7 @@ function LorikeetWidgetView({ publicKey, baseUrl, authToken, customisations, sty
 			session: resume === null || resume === void 0 ? void 0 : resume.session
 		});
 		const unchanged = uriRef.current === next;
-		if (loadedForRef.current.identity !== forIdentity || loadedForRef.current.intendedTicketId !== intendedTicketId) setClosed(false);
+		if (loadedForRef.current.identity !== forIdentity || loadedForRef.current.intendedTicketId !== intendedTicketId) setClosed(null);
 		uriRef.current = next;
 		loadedForRef.current = {
 			identity: forIdentity,
@@ -522,10 +559,12 @@ function LorikeetWidgetView({ publicKey, baseUrl, authToken, customisations, sty
 			metadata,
 			customisations: {
 				...customisations,
-				hideHeader: (customisations === null || customisations === void 0 ? void 0 : customisations.hideHeader) === void 0 ? true : customisations.hideHeader
+				hideHeader
 			}
 		});
 		setLorikeetClient(lorikeetClient);
+		if (clearing !== null || loggedOutIdentity === identity) return;
+		if (loggedOutIdentity !== null) setLoggedOutIdentity(null);
 		const resume = resumingTicketId !== void 0 ? {
 			session,
 			ticketId: resumingTicketId
@@ -535,13 +574,108 @@ function LorikeetWidgetView({ publicKey, baseUrl, authToken, customisations, sty
 		publicKey,
 		baseUrl,
 		authToken,
+		clearing,
 		customisations,
+		hideHeader,
+		loggedOutIdentity,
 		metadata,
 		session,
 		resumingTicketId,
 		identity,
 		load
 	]);
+	/**
+	* Clear this customer's chat from the device. Loads the page's own `/logout`,
+	* the only thing that can drop the chat's cookies and the storage the page
+	* keeps; a host clearing its stored `ticketId` and `session` leaves both
+	* behind.
+	*
+	* Nothing else loads until the page confirms with `logged_out`, and nothing
+	* loads for these credentials after it, so pass the next customer's in to
+	* start their chat. Clear your own stored `ticketId` and `session` too.
+	*/
+	const logout = useCallback(() => {
+		observedRef.current = null;
+		setClosed(null);
+		setClearing((previous) => {
+			if (previous !== null) return {
+				...previous,
+				attempt: previous.attempt + 1
+			};
+			setLoggedOutIdentity(identity);
+			return {
+				attempt: 1,
+				baseUrl,
+				identity,
+				uri: new LorikeetClient({
+					api_base: baseUrl,
+					public_key: publicKey
+				}).getLogoutUrl(),
+				webviewProps: {
+					...webviewProps,
+					injectedJavaScript: void 0,
+					injectedJavaScriptBeforeContentLoaded: void 0,
+					onMessage: void 0,
+					onShouldStartLoadWithRequest: void 0
+				}
+			};
+		});
+	}, [
+		baseUrl,
+		identity,
+		publicKey,
+		webviewProps
+	]);
+	/**
+	* Show a minimised conversation again, exactly as the customer left it.
+	*
+	* A no-op unless something is minimised, so a host with its own launcher can
+	* call it without first asking.
+	*/
+	const reopen = useCallback(() => {
+		setClosed((previous) => previous === "minimised" ? null : previous);
+	}, []);
+	/**
+	* What the widget is actually on, for a host that has to store it or draw its
+	* own launcher around it.
+	*/
+	const getConversation = useCallback(() => {
+		const resumable = resumableConversation(observedRef.current, identity, resumingTicketId);
+		if (resumable === null) return null;
+		return {
+			minimised: closed === "minimised",
+			session: resumable.session,
+			ticketId: resumable.ticketId
+		};
+	}, [
+		closed,
+		identity,
+		resumingTicketId
+	]);
+	useImperativeHandle(ref, () => ({
+		getConversation,
+		logout,
+		reopen
+	}), [
+		getConversation,
+		logout,
+		reopen
+	]);
+	const clearingAttempt = clearing === null || clearing === void 0 ? void 0 : clearing.attempt;
+	useEffect(() => {
+		if (clearingAttempt === void 0) return;
+		const timer = setTimeout(() => {
+			var _onEventRef$current;
+			(_onEventRef$current = onEventRef.current) === null || _onEventRef$current === void 0 || _onEventRef$current.call(onEventRef, { type: "logout_failed" });
+		}, LOGOUT_CONFIRMATION_TIMEOUT_MS);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [clearingAttempt]);
+	const handleClearingEvent = useCallback((event) => {
+		if (event.type === "logged_out") setClearing((previous) => (previous === null || previous === void 0 ? void 0 : previous.attempt) === clearingAttempt ? null : previous);
+		onEvent === null || onEvent === void 0 || onEvent(event);
+	}, [clearingAttempt, onEvent]);
 	const reload = useCallback(() => {
 		const resume = resumableConversation(observedRef.current, identity, resumingTicketId);
 		if (lorikeetClient !== null && resume !== null) {
@@ -573,7 +707,7 @@ function LorikeetWidgetView({ publicKey, baseUrl, authToken, customisations, sty
 		};
 	}, [reload]);
 	const startNewChat = useCallback(() => {
-		setClosed(false);
+		setClosed(null);
 		if (lorikeetClient !== null && resumingTicketId === void 0) {
 			observedRef.current = null;
 			load(lorikeetClient, identity, void 0, null, true);
@@ -599,7 +733,7 @@ function LorikeetWidgetView({ publicKey, baseUrl, authToken, customisations, sty
 					intendedTicketId: resumingTicketId
 				};
 			}
-			if (event.type === "close") setClosed(true);
+			if (event.type === "close") setClosed(event.reason === "minimised" ? "minimised" : "ended");
 			if (event.type === "new_chat") startNewChat();
 			if (event.type === "error" && attemptedTicketId !== void 0 && isUnusableConversationCode(event.error)) {
 				observedRef.current = null;
@@ -623,7 +757,31 @@ function LorikeetWidgetView({ publicKey, baseUrl, authToken, customisations, sty
 		onWebViewMessage === null || onWebViewMessage === void 0 || onWebViewMessage(event);
 		webviewProps === null || webviewProps === void 0 || (_webviewProps$onMessa2 = webviewProps.onMessage) === null || _webviewProps$onMessa2 === void 0 || _webviewProps$onMessa2.call(webviewProps, event);
 	}, [onWebViewMessage, webviewProps]);
-	if (lorikeetClient === null || loaded === null || loaded.identity !== identity || loaded.intendedTicketId !== resumingTicketId) return null;
+	if (clearing !== null) return /* @__PURE__ */ jsx(SafeAreaView, {
+		edges: [
+			"top",
+			"left",
+			"right"
+		],
+		style: stylesheet.root,
+		children: /* @__PURE__ */ jsx(View, {
+			accessibilityElementsHidden: true,
+			importantForAccessibility: "no-hide-descendants",
+			pointerEvents: "none",
+			style: stylesheet.closed,
+			children: /* @__PURE__ */ jsx(LorikeetWidgetWebView, {
+				baseUrl: clearing.baseUrl,
+				onEvent: handleClearingEvent,
+				uri: clearing.uri,
+				webviewProps: {
+					...clearing.webviewProps,
+					style: stylesheet.webView
+				}
+			}, `logout|${clearing.attempt}`)
+		})
+	});
+	if (lorikeetClient === null || loaded === null || loaded.identity !== identity || loaded.intendedTicketId !== resumingTicketId || loggedOutIdentity === identity) return null;
+	const isClosed = closed !== null;
 	return /* @__PURE__ */ jsx(SafeAreaView, {
 		edges: [
 			"top",
@@ -633,44 +791,64 @@ function LorikeetWidgetView({ publicKey, baseUrl, authToken, customisations, sty
 		style: stylesheet.root,
 		children: /* @__PURE__ */ jsxs(View, {
 			style: stylesheet.container,
-			children: [/* @__PURE__ */ jsx(LorikeetWidgetHeader, {
-				onIconPress: startNewChat,
-				style: styles === null || styles === void 0 ? void 0 : styles.header,
-				title: (_customisations$title = customisations === null || customisations === void 0 ? void 0 : customisations.title) !== null && _customisations$title !== void 0 ? _customisations$title : "Lorikeet AI Agent"
-			}), /* @__PURE__ */ jsx(View, {
-				accessibilityElementsHidden: closed,
-				importantForAccessibility: closed ? "no-hide-descendants" : "auto",
-				pointerEvents: closed ? "none" : "auto",
-				style: closed ? stylesheet.closed : stylesheet.webView,
-				children: /* @__PURE__ */ jsx(LorikeetWidgetWebView, {
-					baseUrl: lorikeetClient.baseUrl,
-					onEvent: handleEvent,
-					ref: webViewRef,
-					uri: loaded.uri,
-					webviewProps: {
-						allowsInlineMediaPlayback: true,
-						mediaPlaybackRequiresUserAction: false,
-						scalesPageToFit: true,
-						startInLoadingState: true,
-						style: stylesheet.webView,
-						...webviewProps,
-						onMessage: handleMessage,
-						onRenderProcessGone: (event) => {
-							var _webviewProps$onRende;
-							if (generation === generationRef.current) reload();
-							webviewProps === null || webviewProps === void 0 || (_webviewProps$onRende = webviewProps.onRenderProcessGone) === null || _webviewProps$onRende === void 0 || _webviewProps$onRende.call(webviewProps, event);
-						},
-						onContentProcessDidTerminate: (event) => {
-							var _webviewProps$onConte;
-							if (generation === generationRef.current) reload();
-							webviewProps === null || webviewProps === void 0 || (_webviewProps$onConte = webviewProps.onContentProcessDidTerminate) === null || _webviewProps$onConte === void 0 || _webviewProps$onConte.call(webviewProps, event);
+			children: [
+				hideHeader && closed !== "minimised" ? /* @__PURE__ */ jsx(LorikeetWidgetHeader, {
+					onIconPress: startNewChat,
+					style: styles === null || styles === void 0 ? void 0 : styles.header,
+					title: (_customisations$title = customisations === null || customisations === void 0 ? void 0 : customisations.title) !== null && _customisations$title !== void 0 ? _customisations$title : "Lorikeet AI Agent"
+				}) : null,
+				closed === "minimised" ? /* @__PURE__ */ jsx(TouchableOpacity, {
+					onPress: reopen,
+					style: stylesheet.closedControl,
+					children: /* @__PURE__ */ jsx(Text, {
+						style: stylesheet.headerText,
+						children: "Reopen chat"
+					})
+				}) : null,
+				!hideHeader && closed === "ended" ? /* @__PURE__ */ jsx(TouchableOpacity, {
+					onPress: startNewChat,
+					style: stylesheet.closedControl,
+					children: /* @__PURE__ */ jsx(Text, {
+						style: stylesheet.headerText,
+						children: "Start new chat"
+					})
+				}) : null,
+				/* @__PURE__ */ jsx(View, {
+					accessibilityElementsHidden: isClosed,
+					importantForAccessibility: isClosed ? "no-hide-descendants" : "auto",
+					pointerEvents: isClosed ? "none" : "auto",
+					style: isClosed ? stylesheet.closed : stylesheet.webView,
+					children: /* @__PURE__ */ jsx(LorikeetWidgetWebView, {
+						baseUrl: lorikeetClient.baseUrl,
+						onEvent: handleEvent,
+						ref: webViewRef,
+						uri: loaded.uri,
+						webviewProps: {
+							allowsInlineMediaPlayback: true,
+							mediaPlaybackRequiresUserAction: false,
+							scalesPageToFit: true,
+							startInLoadingState: true,
+							style: stylesheet.webView,
+							...webviewProps,
+							onMessage: handleMessage,
+							onRenderProcessGone: (event) => {
+								var _webviewProps$onRende;
+								if (generation === generationRef.current) reload();
+								webviewProps === null || webviewProps === void 0 || (_webviewProps$onRende = webviewProps.onRenderProcessGone) === null || _webviewProps$onRende === void 0 || _webviewProps$onRende.call(webviewProps, event);
+							},
+							onContentProcessDidTerminate: (event) => {
+								var _webviewProps$onConte;
+								if (generation === generationRef.current) reload();
+								webviewProps === null || webviewProps === void 0 || (_webviewProps$onConte = webviewProps.onContentProcessDidTerminate) === null || _webviewProps$onConte === void 0 || _webviewProps$onConte.call(webviewProps, event);
+							}
 						}
-					}
-				}, `${identity}|${resumingTicketId !== null && resumingTicketId !== void 0 ? resumingTicketId : ""}|${generation}`)
-			})]
+					}, `${identity}|${resumingTicketId !== null && resumingTicketId !== void 0 ? resumingTicketId : ""}|${generation}`)
+				})
+			]
 		})
 	});
-}
+});
+LorikeetWidgetView.displayName = "LorikeetWidgetView";
 
 //#endregion
 export { LORIKEET_ERROR_CODES, LorikeetClient, LorikeetWidgetHeader, LorikeetWidgetView, LorikeetWidgetWebView, isUnusableConversation, isUnusableConversationCode };