@lorikeetai/react-native-sdk 2.1.0 → 2.2.0-beta.2

package/dist/voice.cjs

@@ -0,0 +1,772 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_rolldown_runtime = require("./rolldown-runtime-xuxB8TGW.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_native_safe_area_context = require("react-native-safe-area-context");
+let react_native_svg = require("react-native-svg");
+react_native_svg = require_rolldown_runtime.__toESM(react_native_svg, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _livekit_react_native = require("@livekit/react-native");
+let livekit_client = require("livekit-client");
+
+// src/voice/call-icons.tsx
+const Icon = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.default, {
+	fill: "none",
+	height: 24,
+	viewBox: "0 0 24 24",
+	width: 24,
+	children
+});
+const stroke = (color) => ({
+	stroke: color,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2
+});
+const MicIcon = ({ color }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+		d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+		d: "M19 10v2a7 7 0 0 1-14 0v-2",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Line, {
+		x1: "12",
+		x2: "12",
+		y1: "19",
+		y2: "22",
+		...stroke(color)
+	})
+] });
+const MicOffIcon = ({ color }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Line, {
+		x1: "2",
+		x2: "22",
+		y1: "2",
+		y2: "22",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+		d: "M18.89 13.23A7.12 7.12 0 0 0 19 12v-2",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+		d: "M5 10v2a7 7 0 0 0 12 5",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+		d: "M15 9.34V5a3 3 0 0 0-5.68-1.33",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+		d: "M9 9v3a3 3 0 0 0 5.12 2.12",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Line, {
+		x1: "12",
+		x2: "12",
+		y1: "19",
+		y2: "22",
+		...stroke(color)
+	})
+] });
+const PhoneOffIcon = ({ color }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+	d: "M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.34a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91",
+	...stroke(color)
+}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Line, {
+	x1: "22",
+	x2: "2",
+	y1: "2",
+	y2: "22",
+	...stroke(color)
+})] });
+const SPEAKER = "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z";
+const Volume2Icon = ({ color }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+		d: SPEAKER,
+		...stroke(color)
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+		d: "M16 9a5 5 0 0 1 0 6",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+		d: "M19.364 18.364a9 9 0 0 0 0-12.728",
+		...stroke(color)
+	})
+] });
+const VolumeXIcon = ({ color }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+		d: SPEAKER,
+		...stroke(color)
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Line, {
+		x1: "22",
+		x2: "16",
+		y1: "9",
+		y2: "15",
+		...stroke(color)
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Line, {
+		x1: "16",
+		x2: "22",
+		y1: "9",
+		y2: "15",
+		...stroke(color)
+	})
+] });
+/** The design system's `LorikeetLogoMark`. `color` paints the whole mark in one colour. */
+const LorikeetLogoMark = ({ color, size }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native_svg.default, {
+	fill: "none",
+	height: size,
+	viewBox: "-45 -20 274 274",
+	width: size,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+			d: "M112.661 179.008C152.133 154.751 173.914 119.21 161.82 96.8859L81.0549 140.608L10.1309 179.008H112.667H112.661Z",
+			fill: color !== null && color !== void 0 ? color : "#FF29E5"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+			d: "M0.242676 184.284C0.242676 211.383 41.3656 233.356 92.0903 233.356C142.815 233.356 183.938 211.389 183.938 184.29H0.242676V184.284Z",
+			fill: color !== null && color !== void 0 ? color : "#4348DC"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+			d: "M83.4604 133.156C84.7013 131.069 85.9155 128.94 87.0924 126.763C111.185 82.1465 111.376 35.539 87.5131 22.6682L43.8872 103.459L4.88379 175.692L83.4604 133.156Z",
+			fill: color !== null && color !== void 0 ? color : "#EA4921"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.Path, {
+			d: "M49.0555 82.6487C46.4408 36.5522 25.5864 0.643799 0.242676 0.643799V92.4482V173.048L49.0555 82.6487Z",
+			fill: color !== null && color !== void 0 ? color : "#FACB12"
+		})
+	]
+});
+
+// src/voice/call-theme.ts
+const LIGHT = {
+	accent: "hsl(233, 69%, 55%)",
+	card: "hsl(240, 3%, 97%)",
+	control: "hsl(0, 0%, 100%)",
+	inverseText: "hsl(0, 0%, 100%)",
+	ring: "hsl(240, 31%, 94%)",
+	shell: "hsl(0, 0%, 100%)",
+	subtleText: "hsl(240, 3%, 31%)",
+	text: "hsl(240, 3%, 4%)"
+};
+const DARK = {
+	accent: "hsl(233, 68%, 65%)",
+	card: "hsl(240, 3%, 8%)",
+	control: "hsl(240, 3%, 4%)",
+	inverseText: "hsl(240, 0%, 2%)",
+	ring: "hsl(233, 69%, 15%)",
+	shell: "hsl(240, 0%, 2%)",
+	subtleText: "hsl(240, 3%, 61%)",
+	text: "hsl(240, 3%, 81%)"
+};
+const paintable = (colour) => {
+	var _processColor;
+	return colour !== void 0 && ((_processColor = (0, react_native.processColor)(colour)) !== null && _processColor !== void 0 ? _processColor : void 0) !== void 0 ? colour : void 0;
+};
+const hsl = (components) => components ? paintable(`hsl(${components})`) : void 0;
+/** `generateVoiceWidgetThemeStyle` from the web Voice Widget, for React Native. */
+function callColours(theme) {
+	var _hsl, _ref, _paintable, _hsl2, _hsl3, _ref2, _paintable2, _hsl4;
+	const base = (theme === null || theme === void 0 ? void 0 : theme.colorMode) === "dark" ? DARK : LIGHT;
+	return {
+		accent: (_hsl = hsl(theme === null || theme === void 0 ? void 0 : theme.brandColor)) !== null && _hsl !== void 0 ? _hsl : base.accent,
+		card: (_ref = (_paintable = paintable(theme === null || theme === void 0 ? void 0 : theme.headerBackground)) !== null && _paintable !== void 0 ? _paintable : hsl(theme === null || theme === void 0 ? void 0 : theme.brandAccentColor)) !== null && _ref !== void 0 ? _ref : base.card,
+		control: base.control,
+		inverseText: (_hsl2 = hsl(theme === null || theme === void 0 ? void 0 : theme.inverseTextColor)) !== null && _hsl2 !== void 0 ? _hsl2 : base.inverseText,
+		ring: (_hsl3 = hsl(theme === null || theme === void 0 ? void 0 : theme.subtleBrandColor)) !== null && _hsl3 !== void 0 ? _hsl3 : base.ring,
+		shell: (_ref2 = (_paintable2 = paintable(theme === null || theme === void 0 ? void 0 : theme.background)) !== null && _paintable2 !== void 0 ? _paintable2 : hsl(theme === null || theme === void 0 ? void 0 : theme.backgroundColor)) !== null && _ref2 !== void 0 ? _ref2 : base.shell,
+		subtleText: base.subtleText,
+		text: (_hsl4 = hsl(theme === null || theme === void 0 ? void 0 : theme.textColor)) !== null && _hsl4 !== void 0 ? _hsl4 : base.text
+	};
+}
+
+// src/voice/call-wave.tsx
+const BARS = 24;
+const PHASES = 8;
+const CYCLE_MS = 1440;
+const STAGGER_MS = 90;
+const MIN_HEIGHT = 8;
+const MAX_HEIGHT = 38;
+const STILL_HEIGHT = 20;
+const triangle = (x) => 1 - Math.abs(2 * x - 1);
+/**
+* Where one bar's height peaks and troughs as the loop runs from 0 to 1, so a
+* single animated value drives every phase.
+*/
+const phaseKeyframes = (phase) => {
+	const frames = /* @__PURE__ */ new Map([[0, triangle(phase)], [1, triangle(phase)]]);
+	for (const x of [0, .5]) frames.set((x - phase + 1) % 1, triangle(x));
+	const sorted = [...frames.entries()].sort(([a], [b]) => a - b);
+	return {
+		inputRange: sorted.map(([at]) => at),
+		outputRange: sorted.map(([, height]) => (MIN_HEIGHT + height * 30) / MAX_HEIGHT)
+	};
+};
+const useReduceMotion = () => {
+	const [reduceMotion, setReduceMotion] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		let mounted = true;
+		react_native.AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+			if (mounted) setReduceMotion(enabled);
+		});
+		const subscription = react_native.AccessibilityInfo.addEventListener("reduceMotionChanged", setReduceMotion);
+		return () => {
+			mounted = false;
+			subscription.remove();
+		};
+	}, []);
+	return reduceMotion;
+};
+function CallWave({ active, color }) {
+	const reduceMotion = useReduceMotion();
+	const progress = (0, react.useRef)(new react_native.Animated.Value(0)).current;
+	const animate = active && !reduceMotion;
+	(0, react.useEffect)(() => {
+		if (!animate) return;
+		const loop = react_native.Animated.loop(react_native.Animated.timing(progress, {
+			duration: CYCLE_MS,
+			easing: react_native.Easing.linear,
+			toValue: 1,
+			useNativeDriver: true
+		}));
+		loop.start();
+		return () => {
+			loop.stop();
+			progress.setValue(0);
+		};
+	}, [animate, progress]);
+	const scales = (0, react.useMemo)(() => Array.from({ length: PHASES }, (_, index) => progress.interpolate(phaseKeyframes(index * STAGGER_MS / CYCLE_MS))), [progress]);
+	const stillScale = (active ? STILL_HEIGHT : MIN_HEIGHT) / MAX_HEIGHT;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no-hide-descendants",
+		style: styles$1.wave,
+		children: Array.from({ length: BARS }, (_, index) => {
+			var _scales;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, { style: [
+				styles$1.bar,
+				{ backgroundColor: color },
+				{ transform: [{ scaleY: animate ? (_scales = scales[index % PHASES]) !== null && _scales !== void 0 ? _scales : stillScale : stillScale }] }
+			] }, index);
+		})
+	});
+}
+const styles$1 = react_native.StyleSheet.create({
+	bar: {
+		borderRadius: 999,
+		height: MAX_HEIGHT,
+		opacity: .45,
+		width: 3
+	},
+	wave: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: 3,
+		height: 48,
+		justifyContent: "center"
+	}
+});
+
+// src/voice/use-lorikeet-call.ts
+/** The server's `LORIKEET_AGENT_IDENTITY`. The call ends when it leaves. */
+const LORIKEET_AGENT_IDENTITY = "lorikeet-agent";
+const errorFor = (error) => {
+	if (typeof error !== "object" || error === null || !("name" in error)) return "failed";
+	return error.name === "SecurityError" || error.name === "NotAllowedError" ? "microphone_denied" : "failed";
+};
+const isSession = (value) => typeof value === "object" && value !== null && "conversationId" in value && typeof value.conversationId === "string" && "token" in value && typeof value.token === "string" && "wsUrl" in value && typeof value.wsUrl === "string";
+/**
+* Runs a Lorikeet voice call over LiveKit's native audio, with the web Voice
+* Widget's states and errors.
+*/
+function useLorikeetCall({ getSession, onError }) {
+	const [state, setState] = (0, react.useState)("idle");
+	const [error, setError] = (0, react.useState)();
+	const [ended, setEnded] = (0, react.useState)(false);
+	const [microphoneMuted, setMicrophoneMutedState] = (0, react.useState)(false);
+	const [speakerMuted, setSpeakerMutedState] = (0, react.useState)(false);
+	const stateRef = (0, react.useRef)(state);
+	const generationRef = (0, react.useRef)(0);
+	const localTrackRef = (0, react.useRef)(null);
+	const roomRef = (0, react.useRef)(null);
+	const speakerMutedRef = (0, react.useRef)(false);
+	const audioSessionActiveRef = (0, react.useRef)(false);
+	const audioSessionStoppedRef = (0, react.useRef)(Promise.resolve());
+	const optionsRef = (0, react.useRef)({
+		getSession,
+		onError
+	});
+	optionsRef.current = {
+		getSession,
+		onError
+	};
+	const transitionTo = (0, react.useCallback)((next) => {
+		stateRef.current = next;
+		setState(next);
+	}, []);
+	const cleanup = (0, react.useCallback)(() => {
+		var _localTrackRef$curren;
+		(_localTrackRef$curren = localTrackRef.current) === null || _localTrackRef$curren === void 0 || _localTrackRef$curren.stop();
+		localTrackRef.current = null;
+		const room = roomRef.current;
+		roomRef.current = null;
+		const disconnected = (room ? room.disconnect() : Promise.resolve()).catch(() => void 0);
+		if (audioSessionActiveRef.current) {
+			audioSessionActiveRef.current = false;
+			audioSessionStoppedRef.current = disconnected.then(() => _livekit_react_native.AudioSession.stopAudioSession()).catch(() => void 0);
+		}
+	}, []);
+	const resetMutes = (0, react.useCallback)(() => {
+		setMicrophoneMutedState(false);
+		setSpeakerMutedState(false);
+		speakerMutedRef.current = false;
+	}, []);
+	const end = (0, react.useCallback)(() => {
+		generationRef.current += 1;
+		cleanup();
+		setEnded(stateRef.current === "connecting" || stateRef.current === "active");
+		setError(void 0);
+		resetMutes();
+		transitionTo("idle");
+	}, [
+		cleanup,
+		resetMutes,
+		transitionTo
+	]);
+	const fail = (0, react.useCallback)((callError) => {
+		generationRef.current += 1;
+		cleanup();
+		setEnded(false);
+		setError(callError);
+		transitionTo("error");
+	}, [cleanup, transitionTo]);
+	(0, react.useEffect)(() => {
+		return () => {
+			generationRef.current += 1;
+			cleanup();
+		};
+	}, [cleanup]);
+	const start = (0, react.useCallback)(async () => {
+		if (stateRef.current !== "idle" && stateRef.current !== "error") return;
+		setError(void 0);
+		setEnded(false);
+		resetMutes();
+		transitionTo("starting");
+		const generation = ++generationRef.current;
+		const isStale = () => generationRef.current !== generation;
+		try {
+			if (!("LiveKitReactNativeGlobal" in globalThis)) (0, _livekit_react_native.registerGlobals)();
+			await audioSessionStoppedRef.current;
+			if (isStale()) return;
+			audioSessionActiveRef.current = true;
+			await _livekit_react_native.AudioSession.startAudioSession();
+			if (isStale()) return;
+			const localTrack = await (0, livekit_client.createLocalAudioTrack)();
+			if (isStale()) {
+				localTrack.stop();
+				return;
+			}
+			localTrackRef.current = localTrack;
+			const session = await optionsRef.current.getSession();
+			if (isStale()) return;
+			if (session === null) {
+				fail("not_available");
+				return;
+			}
+			if (!isSession(session)) throw new TypeError("getSession must resolve to { conversationId, wsUrl, token } or null");
+			transitionTo("connecting");
+			const room = new livekit_client.Room();
+			roomRef.current = room;
+			const isCurrentRoom = () => roomRef.current === room;
+			room.on(livekit_client.RoomEvent.ParticipantDisconnected, (participant) => {
+				if (isCurrentRoom() && participant.identity === "lorikeet-agent") end();
+			});
+			room.on(livekit_client.RoomEvent.TrackSubscribed, (track) => {
+				if (isCurrentRoom() && track instanceof livekit_client.RemoteAudioTrack) track.setVolume(speakerMutedRef.current ? 0 : 1);
+			});
+			let joined = false;
+			room.on(livekit_client.RoomEvent.Disconnected, () => {
+				if (isCurrentRoom() && joined) end();
+			});
+			await room.connect(session.wsUrl, session.token, { autoSubscribe: true });
+			if (isStale()) return;
+			joined = true;
+			await room.localParticipant.publishTrack(localTrack, { source: livekit_client.Track.Source.Microphone });
+			if (isStale()) return;
+			transitionTo("active");
+		} catch (caught) {
+			if (isStale()) return;
+			const callError = errorFor(caught);
+			fail(callError);
+			if (callError === "failed") try {
+				var _optionsRef$current$o, _optionsRef$current;
+				(_optionsRef$current$o = (_optionsRef$current = optionsRef.current).onError) === null || _optionsRef$current$o === void 0 || _optionsRef$current$o.call(_optionsRef$current, caught);
+			} catch {}
+		}
+	}, [
+		end,
+		fail,
+		resetMutes,
+		transitionTo
+	]);
+	return {
+		end,
+		ended,
+		error,
+		microphoneMuted,
+		setMicrophoneMuted: (0, react.useCallback)((muted) => {
+			const track = localTrackRef.current;
+			if (!track) return;
+			const reconcile = () => {
+				if (localTrackRef.current === track) setMicrophoneMutedState(track.isMuted);
+			};
+			(muted ? track.mute() : track.unmute()).then(reconcile, reconcile);
+		}, []),
+		setSpeakerMuted: (0, react.useCallback)((muted) => {
+			var _roomRef$current$remo, _roomRef$current;
+			speakerMutedRef.current = muted;
+			const participants = (_roomRef$current$remo = (_roomRef$current = roomRef.current) === null || _roomRef$current === void 0 ? void 0 : _roomRef$current.remoteParticipants.values()) !== null && _roomRef$current$remo !== void 0 ? _roomRef$current$remo : [];
+			for (const participant of participants) for (const { track } of participant.audioTrackPublications.values()) if (track instanceof livekit_client.RemoteAudioTrack) track.setVolume(muted ? 0 : 1);
+			setSpeakerMutedState(muted);
+		}, []),
+		speakerMuted,
+		start,
+		state
+	};
+}
+
+// src/voice/lorikeet-call-view.tsx
+const ERROR_MESSAGES = {
+	failed: "The call could not start. Please try again.",
+	microphone_denied: "Allow microphone access, then try again.",
+	microphone_system_denied: "Enable microphone access for your browser in system settings.",
+	not_available: "We can't start a call on this page. Please try again later."
+};
+const errorHeading = (error) => error === "not_available" ? "Calling isn't available right now" : "Something went wrong";
+const formatDuration = (seconds) => `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+const statusLabel = (state, seconds) => {
+	switch (state) {
+		case "active": return formatDuration(seconds);
+		case "starting": return "Starting call";
+		case "connecting": return "Connecting";
+		case "error":
+		case "idle": return;
+	}
+};
+/** What a screen reader hears when the call state changes. The clock is left out. */
+const announcementFor = ({ ended, error, state }) => {
+	switch (state) {
+		case "active": return "Listening";
+		case "error": return `${errorHeading(error !== null && error !== void 0 ? error : "failed")}. ${ERROR_MESSAGES[error !== null && error !== void 0 ? error : "failed"]}`;
+		case "idle": return ended ? "Call ended" : void 0;
+		case "starting":
+		case "connecting": return statusLabel(state, 0);
+	}
+};
+const useCallSeconds = (state) => {
+	const [seconds, setSeconds] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		if (state !== "active") {
+			setSeconds(0);
+			return;
+		}
+		const interval = setInterval(() => setSeconds((value) => value + 1), 1e3);
+		return () => clearInterval(interval);
+	}, [state]);
+	return seconds;
+};
+function CallLogo({ logoUrl }) {
+	if (!logoUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LorikeetLogoMark, { size: 48 });
+	if (/\.svg($|[?#])/i.test(logoUrl)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.SvgUri, {
+		height: 48,
+		uri: logoUrl,
+		width: 48
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Image, {
+		resizeMode: "contain",
+		source: { uri: logoUrl },
+		style: styles.logo
+	});
+}
+function CallMessage({ call, colours }) {
+	if (call.state === "error") {
+		var _call$error;
+		const error = (_call$error = call.error) !== null && _call$error !== void 0 ? _call$error : "failed";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+			style: [styles.bold, { color: colours.text }],
+			children: errorHeading(error)
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+			style: [styles.body, { color: colours.subtleText }],
+			children: ERROR_MESSAGES[error]
+		})] });
+	}
+	if (call.state === "active") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+		style: [styles.body, { color: colours.text }],
+		children: "Listening"
+	});
+	if (call.ended) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+		style: styles.marker,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles.markerRule, { backgroundColor: colours.subtleText }] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+				style: [styles.small, { color: colours.subtleText }],
+				children: "Call ended"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles.markerRule, { backgroundColor: colours.subtleText }] })
+		]
+	});
+	return null;
+}
+function RoundButton({ children, disabled = false, label, onPress, style }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableOpacity, {
+		accessibilityLabel: label,
+		accessibilityRole: "button",
+		accessibilityState: { disabled },
+		disabled,
+		onPress,
+		style: [
+			styles.roundButton,
+			style,
+			disabled && styles.disabled
+		],
+		children
+	});
+}
+function CallActions({ call, colours }) {
+	if (call.state === "idle" || call.state === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.TouchableOpacity, {
+		accessibilityRole: "button",
+		onPress: () => void call.start(),
+		style: [styles.startButton, { backgroundColor: colours.accent }],
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+			style: [styles.bold, { color: colours.inverseText }],
+			children: "Start call"
+		})
+	});
+	const inactive = call.state !== "active";
+	const control = { backgroundColor: colours.control };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+		style: styles.controls,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RoundButton, {
+				disabled: inactive,
+				label: call.microphoneMuted ? "Unmute microphone" : "Mute microphone",
+				onPress: () => call.setMicrophoneMuted(!call.microphoneMuted),
+				style: control,
+				children: call.microphoneMuted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MicOffIcon, { color: colours.accent }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MicIcon, { color: colours.accent })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RoundButton, {
+				label: "End call",
+				onPress: call.end,
+				style: { backgroundColor: colours.accent },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PhoneOffIcon, { color: colours.inverseText })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RoundButton, {
+				disabled: inactive,
+				label: call.speakerMuted ? "Unmute speaker" : "Mute speaker",
+				onPress: () => call.setSpeakerMuted(!call.speakerMuted),
+				style: control,
+				children: call.speakerMuted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VolumeXIcon, { color: colours.accent }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Volume2Icon, { color: colours.accent })
+			})
+		]
+	});
+}
+function PoweredBy({ color }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.TouchableOpacity, {
+		accessibilityLabel: "Powered by Lorikeet",
+		accessibilityRole: "link",
+		onPress: () => void react_native.Linking.openURL("https://lorikeetcx.ai"),
+		style: styles.poweredBy,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LorikeetLogoMark, {
+			color,
+			size: 16
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+			style: [styles.small, { color }],
+			children: "Powered by Lorikeet"
+		})]
+	});
+}
+/** The web Voice Widget's call screen and copy, on `useLorikeetCall`. */
+function LorikeetCallView({ customisations, getSession, onError, style }) {
+	const call = useLorikeetCall({
+		getSession,
+		onError
+	});
+	const seconds = useCallSeconds(call.state);
+	const colours = callColours(customisations === null || customisations === void 0 ? void 0 : customisations.theme);
+	const status = statusLabel(call.state, seconds);
+	const announcement = announcementFor(call);
+	const liveRegion = react_native.Platform.OS === "android" ? "polite" : void 0;
+	(0, react.useEffect)(() => {
+		if (react_native.Platform.OS === "ios" && announcement) react_native.AccessibilityInfo.announceForAccessibilityWithOptions(announcement, { queue: true });
+	}, [announcement]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_safe_area_context.SafeAreaView, {
+		style: [
+			styles.shell,
+			{ backgroundColor: colours.shell },
+			style
+		],
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+			style: styles.ringed,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [
+				react_native.StyleSheet.absoluteFill,
+				styles.ring,
+				{ backgroundColor: colours.ring }
+			] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+				style: [styles.card, {
+					backgroundColor: colours.card,
+					shadowColor: colours.accent
+				}],
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+						style: styles.identity,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CallLogo, { logoUrl: customisations === null || customisations === void 0 ? void 0 : customisations.logoUrl }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+								accessibilityRole: "header",
+								numberOfLines: 1,
+								style: [styles.bold, { color: colours.text }],
+								children: (customisations === null || customisations === void 0 ? void 0 : customisations.title) || "Lorikeet AI Agent"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+								accessibilityElementsHidden: !status,
+								accessibilityLiveRegion: call.state === "active" ? "none" : liveRegion,
+								style: [styles.small, { color: colours.text }],
+								children: status
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CallWave, {
+						active: call.state === "active",
+						color: colours.accent
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+						accessibilityLiveRegion: liveRegion,
+						style: styles.message,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CallMessage, {
+							call,
+							colours
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+						style: styles.footer,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CallActions, {
+							call,
+							colours
+						}), (customisations === null || customisations === void 0 ? void 0 : customisations.useSubtleBranding) ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PoweredBy, { color: colours.subtleText })]
+					})
+				]
+			})]
+		})
+	});
+}
+const styles = react_native.StyleSheet.create({
+	body: {
+		fontSize: 14,
+		lineHeight: 20,
+		textAlign: "center"
+	},
+	bold: {
+		fontSize: 14,
+		fontWeight: "600",
+		lineHeight: 20,
+		textAlign: "center"
+	},
+	card: {
+		alignItems: "center",
+		borderColor: "rgba(255, 255, 255, 0.8)",
+		borderRadius: 20,
+		borderWidth: 1,
+		elevation: 8,
+		flex: 1,
+		justifyContent: "space-between",
+		paddingHorizontal: 24,
+		paddingVertical: 32,
+		shadowOffset: {
+			height: 18,
+			width: 0
+		},
+		shadowOpacity: .28,
+		shadowRadius: 17
+	},
+	controls: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: 12
+	},
+	disabled: { opacity: .5 },
+	footer: {
+		alignItems: "center",
+		gap: 16
+	},
+	identity: {
+		alignItems: "center",
+		gap: 8,
+		maxWidth: 320
+	},
+	logo: {
+		height: 48,
+		width: 48
+	},
+	marker: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: 8,
+		width: "100%"
+	},
+	markerRule: {
+		flex: 1,
+		height: react_native.StyleSheet.hairlineWidth,
+		opacity: .4
+	},
+	message: {
+		gap: 4,
+		justifyContent: "center",
+		maxWidth: 320,
+		minHeight: 96,
+		width: "100%"
+	},
+	poweredBy: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: 2
+	},
+	ring: {
+		borderRadius: 27,
+		opacity: .8
+	},
+	ringed: {
+		flex: 1,
+		padding: 7
+	},
+	roundButton: {
+		alignItems: "center",
+		borderRadius: 24,
+		height: 48,
+		justifyContent: "center",
+		width: 48
+	},
+	shell: {
+		flex: 1,
+		padding: 16
+	},
+	small: {
+		fontSize: 12,
+		lineHeight: 16,
+		textAlign: "center"
+	},
+	startButton: {
+		borderRadius: 8,
+		justifyContent: "center",
+		minHeight: 40,
+		paddingHorizontal: 16
+	}
+});
+
+exports.LorikeetCallView = LorikeetCallView;
+exports.useLorikeetCall = useLorikeetCall;
+//# sourceMappingURL=voice.cjs.map