@lorikeetai/react-native-sdk 2.2.0-beta.1 → 2.2.0-beta.3

package/README.md

@@ -98,9 +98,10 @@ twice.
 If you compose the parts yourself, the keyboard is yours. Wrap them in a
 `KeyboardAvoidingView` with `behavior="padding"` on both platforms, and set
 `keyboardVerticalOffset` to their distance from the top of the screen.
-`apps/rn-widget-demo/src/components/WidgetPane.tsx` measures it with
-`measureInWindow`. Check it on an Android device: an iOS simulator will not
-show the problem.
+`apps/rn-widget-demo/src/components/WidgetPane.tsx` shows how: `measureInWindow`
+on iOS, and on Android the larger of `measureInWindow` and `measure`'s `pageY`,
+because the first can leave out the status bar and the second stops at the React
+root. Check it on an Android device: an iOS simulator will not show the problem.
 
 ## Which header you get
 
@@ -496,6 +497,60 @@ Your backend creates the session with
 returns its `{ conversationId, wsUrl, token }` to the app. Never put your API
 credentials in the app.
 
+### Call screen
+
+`LorikeetCallView` draws the web Voice Widget's call screen, with its copy.
+It shows the logo, the title, the call status and clock, the call wave, and
+the start, mute, speaker and end buttons. Every control has an accessibility
+label, and screen readers hear each change in the call.
+
+```tsx
+import { LorikeetCallView } from '@lorikeetai/react-native-sdk/voice'
+
+const getSession = async () => {
+  const response = await fetch('https://api.example.com/support/call', {
+    method: 'POST',
+  })
+  if (response.status === 404) return null
+  if (!response.ok) throw new Error(`Call session: ${response.status}`)
+  return response.json()
+}
+
+export function SupportCallScreen() {
+  return (
+    <LorikeetCallView
+      customisations={{
+        title: 'Acme support',
+        theme: { brandColor: '214 100% 50%' },
+      }}
+      getSession={getSession}
+    />
+  )
+}
+```
+
+The view runs the call itself, so the call ends when the view unmounts. To
+keep a call going across screens, run `useLorikeetCall` above them and build
+the screen yourself.
+
+It takes the hook's `getSession` and `onError`, a `style` for its outer view,
+and these `customisations`, as the chat widget reads them:
+
+- `title`: the heading. Defaults to "Lorikeet AI Agent".
+- `logoUrl`: the image above the heading, PNG, JPEG or SVG. Defaults to the
+  Lorikeet mark. An SVG is drawn only when the URL's path ends in `.svg`.
+- `useSubtleBranding`: hides "Powered by Lorikeet".
+- `theme`: `colorMode`, `brandColor`, `brandAccentColor`, `subtleBrandColor`,
+  `backgroundColor`, `textColor` and `inverseTextColor`, as the web Voice
+  Widget reads them. `background` and `headerBackground` apply when they are
+  plain colours. React Native cannot draw a CSS gradient, so a gradient falls
+  back to `backgroundColor` or `brandAccentColor`. `fontFamily` and `fontUrl`
+  do not apply.
+
+### Your own call screen
+
+`useLorikeetCall` runs the call without any UI.
+
 ```tsx
 import { Button, Text, View } from 'react-native'
 

package/dist/customisations-BTaJ84md.d.cts

@@ -0,0 +1,137 @@
+/**
+ * What the chat page accepts as `customisations`, as the SDK's own types.
+ *
+ * A copy of the web SDK's shape rather than an import of it. The web SDK is a
+ * browser bundle an app has no reason to install, and importing a type from it
+ * left the published `dist/index.d.ts` referencing a module consumers do not
+ * have: `Customisations` then degraded to `any` and typed nothing.
+ * `ConversationMetadata` is duplicated here for the same reason.
+ *
+ * `src/customisations.web-sdk-parity.ts` fails `typecheck` if the two drift. Not
+ * the build: that file is unreachable from `index.ts`, so the declaration build
+ * never sees it.
+ *
+ * Fields that only mean something on a web page are kept so the page's behaviour
+ * is unchanged and so a host sharing one configuration object with its web
+ * widget still type-checks. The viewport sizes, the launcher button and `mode`
+ * are all read by the web SDK rather than by the page, so none of them reaches
+ * anything this SDK renders.
+ */
+/**
+ * Sizing for one viewport. Mostly desktop: the page is full-screen on mobile, so
+ * `height`, `width` and `borderRadius` are read for `desktop` alone, while
+ * `topClearance` and `default_open` are read for whichever viewport applies.
+ */
+interface ViewportCustomisations {
+  /** Clamped to a 2rem maximum. */
+  borderRadius?: string;
+  default_open?: boolean;
+  /** Clamped to the viewport minus `topClearance`, and to a 20rem minimum. */
+  height?: string;
+  /** Reserved space above the widget. Desktop default 6.5rem. */
+  topClearance?: string;
+  width?: string;
+}
+interface Customisations {
+  /** Falls back to the logo image. */
+  avatarUrl?: string;
+  botName?: string;
+  desktop?: ViewportCustomisations;
+  /**
+   * Which header the customer gets, not whether there is one. `true` hides the
+   * page's own; `false` keeps it, and with it the page's way out of a
+   * conversation. Ending and minimising are what that header is for, and which
+   * controls it offers depends on the subscriber's configuration, so hiding it
+   * leaves the customer no way to end or minimise unless the host supplies one.
+   *
+   * What replaces a hidden one is the host's business, so there is no one
+   * default to quote. `LorikeetWidgetView` substitutes its own header, a title
+   * and new chat, and does so when this is omitted. `LorikeetClient` only
+   * serialises the flag and renders nothing, so a composed host keeps the page's
+   * header unless it asks for it to go, and must render `LorikeetWidgetHeader`
+   * itself when it does.
+   */
+  hideHeader?: boolean;
+  /** @default '_blank' */
+  linkTarget?: '_blank' | '_parent';
+  logoUrl?: string;
+  messages?: {
+    /** Shown when the widget is in an unexpectedly failed state. */
+    failOver?: string;
+    /**
+     * Shown when live chat has been switched off deliberately. Reachable only
+     * where the live agent bridge is on for the subscriber; without it the widget
+     * has no unavailable state for this to label.
+     */
+    unavailable?: string;
+    /**
+     * Replaces the line under "Someone is taking a look", for a conversation
+     * handed to a person. Say where the reply will come from when the default
+     * should not promise it. Shown only where the live chat experience is on,
+     * which is what puts the notice on screen in the first place.
+     */
+    escalated?: string;
+  };
+  mobile?: ViewportCustomisations;
+  mode?: 'controlled' | 'uncontrolled';
+  /**
+   * Styling for the launcher button the web widget renders. The React Native
+   * SDK renders no launcher, so this reaches the page and does nothing.
+   *
+   * @danger Experimental and may change.
+   */
+  rootElement?: {
+    border?: string;
+    borderRadius?: string;
+    zIndex?: number;
+    bottom?: string;
+    right?: string;
+    /** Any CSS size value. Defaults to 3rem. */
+    size?: string;
+  };
+  /** Show dates as well as times, on every message. */
+  showVerboseTimestamps?: boolean;
+  theme?: CustomisationTheme;
+  title?: string;
+  /** @default false */
+  useSubtleBranding?: boolean;
+}
+interface CustomisationTheme {
+  /**
+   * Colour or gradient for the main area. Any colour value, and any gradient
+   * function including multiple layers. Image-based backgrounds are not
+   * supported. Takes precedence over `backgroundColor`.
+   */
+  background?: string;
+  backgroundColor?: string;
+  /** Accent fill, currently the header. Resolves to a neutral when unset. */
+  brandAccentColor?: string;
+  brandColor?: string;
+  /** @default 'light' */
+  colorMode?: 'light' | 'dark';
+  fontFamily?: string;
+  /**
+   * Google Fonts CSS URL declaring the `@font-face` rules for `fontFamily`.
+   * The page ships Inter only, so a brand font the device lacks falls back
+   * unless its files are loaded. Must be https, host `fonts.googleapis.com`,
+   * path `/css` or `/css2`, and carry `family` plus at most a standard
+   * `display`. A URL failing any of that is dropped whole rather than trimmed,
+   * so one stray query param means no font loads at all.
+   */
+  fontUrl?: string;
+  /**
+   * Colour or gradient for the header, on the same terms as `background`.
+   * Takes precedence over `brandAccentColor`.
+   */
+  headerBackground?: string;
+  /** For text on a dark background. */
+  inverseTextColor?: string;
+  /** Falls back to the brand colour. */
+  linkColor?: string;
+  linkHoverColor?: string;
+  secondaryBrandColor?: string;
+  subtleBrandColor?: string;
+  textColor?: string;
+}
+export { Customisations as n, CustomisationTheme as t };
+//# sourceMappingURL=customisations-BTaJ84md.d.cts.map

package/dist/customisations-BTaJ84md.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"customisations-BTaJ84md.d.cts","names":[],"sources":["../src/customisations.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;UAyBU;;EAER;EACA;;EAEA;;EAEA;EACA;;UAGe;;EAEf;EACA;EACA,UAAU;;;;;;;;;;;;;;;EAeV;;EAEA;EACA;EACA;;IAEE;;;;;;IAMA;;;;;;;IAOA;;EAEF,SAAS;EACT;;;;;;;EAOA;IACE;IACA;IACA;IACA;IACA;;IAEA;;;EAGF;EACA,QAAQ;EACR;;EAEA;;UAGe;;;;;;EAMf;EACA;;EAEA;EACA;;EAEA;EACA;;;;;;;;;EASA;;;;;EAKA;;EAEA;;EAEA;EACA;EACA;EACA;EACA"}

package/dist/customisations-BTaJ84md.d.ts

@@ -0,0 +1,137 @@
+/**
+ * What the chat page accepts as `customisations`, as the SDK's own types.
+ *
+ * A copy of the web SDK's shape rather than an import of it. The web SDK is a
+ * browser bundle an app has no reason to install, and importing a type from it
+ * left the published `dist/index.d.ts` referencing a module consumers do not
+ * have: `Customisations` then degraded to `any` and typed nothing.
+ * `ConversationMetadata` is duplicated here for the same reason.
+ *
+ * `src/customisations.web-sdk-parity.ts` fails `typecheck` if the two drift. Not
+ * the build: that file is unreachable from `index.ts`, so the declaration build
+ * never sees it.
+ *
+ * Fields that only mean something on a web page are kept so the page's behaviour
+ * is unchanged and so a host sharing one configuration object with its web
+ * widget still type-checks. The viewport sizes, the launcher button and `mode`
+ * are all read by the web SDK rather than by the page, so none of them reaches
+ * anything this SDK renders.
+ */
+/**
+ * Sizing for one viewport. Mostly desktop: the page is full-screen on mobile, so
+ * `height`, `width` and `borderRadius` are read for `desktop` alone, while
+ * `topClearance` and `default_open` are read for whichever viewport applies.
+ */
+interface ViewportCustomisations {
+  /** Clamped to a 2rem maximum. */
+  borderRadius?: string;
+  default_open?: boolean;
+  /** Clamped to the viewport minus `topClearance`, and to a 20rem minimum. */
+  height?: string;
+  /** Reserved space above the widget. Desktop default 6.5rem. */
+  topClearance?: string;
+  width?: string;
+}
+interface Customisations {
+  /** Falls back to the logo image. */
+  avatarUrl?: string;
+  botName?: string;
+  desktop?: ViewportCustomisations;
+  /**
+   * Which header the customer gets, not whether there is one. `true` hides the
+   * page's own; `false` keeps it, and with it the page's way out of a
+   * conversation. Ending and minimising are what that header is for, and which
+   * controls it offers depends on the subscriber's configuration, so hiding it
+   * leaves the customer no way to end or minimise unless the host supplies one.
+   *
+   * What replaces a hidden one is the host's business, so there is no one
+   * default to quote. `LorikeetWidgetView` substitutes its own header, a title
+   * and new chat, and does so when this is omitted. `LorikeetClient` only
+   * serialises the flag and renders nothing, so a composed host keeps the page's
+   * header unless it asks for it to go, and must render `LorikeetWidgetHeader`
+   * itself when it does.
+   */
+  hideHeader?: boolean;
+  /** @default '_blank' */
+  linkTarget?: '_blank' | '_parent';
+  logoUrl?: string;
+  messages?: {
+    /** Shown when the widget is in an unexpectedly failed state. */
+    failOver?: string;
+    /**
+     * Shown when live chat has been switched off deliberately. Reachable only
+     * where the live agent bridge is on for the subscriber; without it the widget
+     * has no unavailable state for this to label.
+     */
+    unavailable?: string;
+    /**
+     * Replaces the line under "Someone is taking a look", for a conversation
+     * handed to a person. Say where the reply will come from when the default
+     * should not promise it. Shown only where the live chat experience is on,
+     * which is what puts the notice on screen in the first place.
+     */
+    escalated?: string;
+  };
+  mobile?: ViewportCustomisations;
+  mode?: 'controlled' | 'uncontrolled';
+  /**
+   * Styling for the launcher button the web widget renders. The React Native
+   * SDK renders no launcher, so this reaches the page and does nothing.
+   *
+   * @danger Experimental and may change.
+   */
+  rootElement?: {
+    border?: string;
+    borderRadius?: string;
+    zIndex?: number;
+    bottom?: string;
+    right?: string;
+    /** Any CSS size value. Defaults to 3rem. */
+    size?: string;
+  };
+  /** Show dates as well as times, on every message. */
+  showVerboseTimestamps?: boolean;
+  theme?: CustomisationTheme;
+  title?: string;
+  /** @default false */
+  useSubtleBranding?: boolean;
+}
+interface CustomisationTheme {
+  /**
+   * Colour or gradient for the main area. Any colour value, and any gradient
+   * function including multiple layers. Image-based backgrounds are not
+   * supported. Takes precedence over `backgroundColor`.
+   */
+  background?: string;
+  backgroundColor?: string;
+  /** Accent fill, currently the header. Resolves to a neutral when unset. */
+  brandAccentColor?: string;
+  brandColor?: string;
+  /** @default 'light' */
+  colorMode?: 'light' | 'dark';
+  fontFamily?: string;
+  /**
+   * Google Fonts CSS URL declaring the `@font-face` rules for `fontFamily`.
+   * The page ships Inter only, so a brand font the device lacks falls back
+   * unless its files are loaded. Must be https, host `fonts.googleapis.com`,
+   * path `/css` or `/css2`, and carry `family` plus at most a standard
+   * `display`. A URL failing any of that is dropped whole rather than trimmed,
+   * so one stray query param means no font loads at all.
+   */
+  fontUrl?: string;
+  /**
+   * Colour or gradient for the header, on the same terms as `background`.
+   * Takes precedence over `brandAccentColor`.
+   */
+  headerBackground?: string;
+  /** For text on a dark background. */
+  inverseTextColor?: string;
+  /** Falls back to the brand colour. */
+  linkColor?: string;
+  linkHoverColor?: string;
+  secondaryBrandColor?: string;
+  subtleBrandColor?: string;
+  textColor?: string;
+}
+export { Customisations as n, CustomisationTheme as t };
+//# sourceMappingURL=customisations-BTaJ84md.d.ts.map

package/dist/customisations-BTaJ84md.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"customisations-BTaJ84md.d.ts","names":[],"sources":["../src/customisations.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;UAyBU;;EAER;EACA;;EAEA;;EAEA;EACA;;UAGe;;EAEf;EACA;EACA,UAAU;;;;;;;;;;;;;;;EAeV;;EAEA;EACA;EACA;;IAEE;;;;;;IAMA;;;;;;;IAOA;;EAEF,SAAS;EACT;;;;;;;EAOA;IACE;IACA;IACA;IACA;IACA;;IAEA;;;EAGF;EACA,QAAQ;EACR;;EAEA;;UAGe;;;;;;EAMf;EACA;;EAEA;EACA;;EAEA;EACA;;;;;;;;;EASA;;;;;EAKA;;EAEA;;EAEA;EACA;EACA;EACA;EACA"}

package/dist/index.cjs

@@ -1,36 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-// \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") {
-		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-			key = keys[i];
-			if (!__hasOwnProp.call(to, key) && key !== except) {
-				__defProp(to, key, {
-					get: ((k) => from[k]).bind(null, key),
-					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-				});
-			}
-		}
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
+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_webview = require("react-native-webview");
 let react_native_svg = require("react-native-svg");
-react_native_svg = __toESM(react_native_svg, 1);
+react_native_svg = require_rolldown_runtime.__toESM(react_native_svg, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 
 // src/bridge.ts
@@ -532,10 +507,16 @@ const LorikeetWidgetView = (0, react.forwardRef)(function LorikeetWidgetView({ p
 	const containerRef = (0, react.useRef)(null);
 	const [keyboardOffset, setKeyboardOffset] = (0, react.useState)(0);
 	const measureKeyboardOffset = (0, react.useCallback)((event) => {
-		var _containerRef$current;
 		const { y } = event.nativeEvent.layout;
-		(_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || _containerRef$current.measureInWindow((_x, windowY) => {
-			setKeyboardOffset(windowY - y);
+		const view = containerRef.current;
+		view === null || view === void 0 || view.measureInWindow((_windowX, windowY) => {
+			if (react_native.Platform.OS !== "android") {
+				setKeyboardOffset(windowY - y);
+				return;
+			}
+			view.measure((_x, _y, _width, _height, _pageX, pageY) => {
+				setKeyboardOffset(Math.max(windowY, pageY) - y);
+			});
 		});
 	}, []);
 	const [refusedTicketId, setRefusedTicketId] = (0, react.useState)(null);