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

package/README.md

@@ -397,6 +397,219 @@ WebView component that handles the widget content.
 - `webviewProps` (optional): Passed through to the webview component. The SDK
   adds external-link handling on `onNavigationStateChange` and then calls yours
 
+## Voice calls (beta)
+
+`@lorikeetai/react-native-sdk/voice` runs a Lorikeet voice call inside your
+app with native audio, so the customer can keep talking while the app is in
+the background. It is a beta. Install it from the `beta` tag, and expect its
+API to change before it is stable.
+
+Nothing here touches the chat widget. Only the `voice` entry point loads
+LiveKit, so an app that never imports it installs nothing new and needs no
+native rebuild.
+
+### Install
+
+The LiveKit packages are optional peer dependencies, so install them yourself:
+
+```bash
+pnpm add @lorikeetai/react-native-sdk@beta \
+  @livekit/react-native@^3.1.0 \
+  @livekit/react-native-webrtc@^150.1.0 \
+  livekit-client@^2.20.0
+```
+
+`@livekit/react-native` depends on `@livekit/components-react`, which needs
+`react-dom`. Install the `react-dom` version that matches your `react`, or the
+package manager may pick a newer one that your `react` does not satisfy.
+
+Do not install `@livekit/krisp-noise-filter`. The call does not use it, and
+its license is not open source.
+
+Voice requires React Native 0.79 or later, though the chat widget's peer range
+is unchanged. The `voice` subpath is in the package's `exports` map, and 0.79
+ships the first Metro (0.82) that reads that map by default. TypeScript reads
+it with `moduleResolution` set to `bundler` or `node16`, and Expo's base
+`tsconfig` uses `bundler`.
+
+### Native setup
+
+These are native modules. Expo Go does not include them, so use a
+[development build](https://docs.expo.dev/develop/development-builds/introduction/)
+on Expo, and rebuild native code after installing.
+
+With Expo SDK 56 or later, add the two config plugins, the iOS microphone
+string and audio background mode, and the Android audio permissions to
+`app.json`, then run `expo prebuild`:
+
+```bash
+npx expo install @livekit/react-native-expo-plugin @config-plugins/react-native-webrtc
+```
+
+```json
+{
+  "expo": {
+    "platforms": ["ios", "android"],
+    "plugins": [
+      "@livekit/react-native-expo-plugin",
+      "@config-plugins/react-native-webrtc"
+    ],
+    "ios": {
+      "infoPlist": {
+        "NSMicrophoneUsageDescription": "Talk to our support team.",
+        "UIBackgroundModes": ["audio"]
+      }
+    },
+    "android": {
+      "permissions": [
+        "android.permission.RECORD_AUDIO",
+        "android.permission.MODIFY_AUDIO_SETTINGS"
+      ]
+    }
+  }
+}
+```
+
+Set `platforms` to iOS and Android. Expo treats an app with `react-dom`
+installed as web-capable, so `expo export` would also try a web bundle, which
+LiveKit's native modules cannot build.
+
+Use version 1.1.0 or later of `@livekit/react-native-expo-plugin`. It adds the
+`livekit/podspecs` CocoaPods source, which LiveKit's iOS pods need once
+CocoaPods trunk stops accepting new pods on 2 December 2026.
+
+Without Expo, follow LiveKit's
+[installation steps](https://github.com/livekit/client-sdk-react-native#installation).
+Add the `livekit/podspecs` source to your `Podfile`, call
+`LiveKitReactNative.setup` in `MainApplication` and `LivekitReactNative.setup`
+in `AppDelegate`, and add the same permissions and background mode as above.
+
+On Android, the microphone keeps working in the background only while your
+app runs a foreground service of type `microphone`, which the SDK does not
+start for you. Without one, the agent can still be heard, but the customer's
+microphone goes silent when the app leaves the foreground.
+
+### Usage
+
+Your backend creates the session with
+`POST /v1/conversation/voice/web/create`, using your API credentials, and
+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'
+
+import { useLorikeetCall } from '@lorikeetai/react-native-sdk/voice'
+
+export function SupportCall() {
+  const call = useLorikeetCall({
+    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()
+    },
+    onError: (cause) => console.warn('Support call failed', cause),
+  })
+
+  return (
+    <View>
+      <Text>{call.state}</Text>
+      {call.state === 'idle' || call.state === 'error' ? (
+        <Button title="Start call" onPress={() => void call.start()} />
+      ) : (
+        <Button title="End call" onPress={call.end} />
+      )}
+    </View>
+  )
+}
+```
+
+`useLorikeetCall({ getSession, onError })` returns:
+
+- `state`: `idle`, `starting`, `connecting`, `active` or `error`, as in the web
+  Voice Widget. `starting` covers asking for the microphone and fetching the
+  session, and `connecting` covers joining the call.
+- `error`: why the call is in `error`. `microphone_denied` means the customer
+  refused the microphone, or it is off for the app in the device's settings.
+  `not_available` means `getSession` returned `null`. `failed` is anything
+  else, and `onError` receives its cause. `microphone_system_denied` is the web
+  Voice Widget's code for a browser blocked by the operating system, and a
+  mobile device never reports it.
+- `start()`: start a call from `idle` or `error`. The hook asks for microphone
+  access before it calls `getSession`, so a refusal starts no conversation.
+- `end()`: hang up, or abandon a call still starting. The call also ends, and
+  returns to `idle`, when the agent leaves.
+- `ended`: whether the last call ended after it began connecting.
+- `microphoneMuted` and `setMicrophoneMuted(muted)`: mute the customer.
+- `speakerMuted` and `setSpeakerMuted(muted)`: mute the agent.
+
+The call has no live transcript. The conversation is in Lorikeet under its
+`conversationId`.
+
+If your app already calls LiveKit's `registerGlobals()`, the hook leaves your
+configuration alone. Otherwise the hook calls it when the first call starts.
+
+The hook owns the native audio session for the length of a call and stops it
+when the call ends. An app that runs its own LiveKit call at the same time
+should not use the hook.
+
 ## Development
 
 This package is outside the root pnpm workspace, on its own lockfile, so run these from `packages/react-native-widget` after `pnpm install` there.

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