@duffel/react-native-components-assistant 0.2.0 → 0.4.0

package/lib/module/index.js

@@ -4,15 +4,35 @@ import React from 'react';
 import { Modal, Platform, StyleSheet, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import { hasJsonWebTokenFormat } from "./lib/hasJsonWebTokenFormat.js";
+import { getClientKeyPayload } from "./lib/getClientKeyPayload.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DuffelAssistant = ({
   isOpen,
   onClose,
+  onNewMessage,
   ...properties
 }) => {
   if (!hasJsonWebTokenFormat(properties.clientKey)) {
     throw new Error('Duffel Assistant client key format must be a valid JWT.');
   }
+  const clientKeyPayload = getClientKeyPayload(properties.clientKey);
+  if (!clientKeyPayload) {
+    throw new Error('The client key property is invalid. A client key must follow the JWT format.');
+  }
+  const clientKeyIncludesResource = clientKeyPayload.order_id !== undefined || clientKeyPayload.booking_id !== undefined;
+  if (!('user_id' in clientKeyPayload)) {
+    throw new Error('The client key in the props does not include a user_id. Make sure a user_id is included in the payload of the client key creation.');
+  }
+  if (typeof properties.issueType !== 'undefined') {
+    console.warn('The issueType prop has been deprecated and will no longer be supported in the future. Please use the context prop instead.');
+  }
+  if (!clientKeyIncludesResource && typeof properties.issueType !== 'undefined') {
+    console.warn('The issueType prop is only supported when the client key includes a resource id, it will be ignored.');
+    delete properties.issueType;
+  }
+  if (!clientKeyIncludesResource && properties.context) {
+    throw new Error('The context prop is only supported when the client key includes a resource id.');
+  }
   return /*#__PURE__*/_jsx(Modal, {
     visible: isOpen,
     onRequestClose: () => onClose(),
@@ -20,7 +40,12 @@ export const DuffelAssistant = ({
     children: /*#__PURE__*/_jsx(View, {
       style: styles.container,
       children: Platform.OS === 'ios' ? /*#__PURE__*/_jsx(WebView, {
-        injectedJavaScriptObject: properties,
+        injectedJavaScriptObject: properties
+        // When you are running this in development iOS doesn't allow request from hosts with invalid https certificates.
+        // If you try ngrok with the local esbuild server it will fail because ngrok requests in https and the dev server rejects http requests.
+        // Easiest solution is to use the production URL with test data.
+        // If that's not possible, you can also upload the assistant built assets to a different folder in assets.duffel and work with that.
+        ,
         source: {
           uri: 'https://assets.duffel.com/assistant/iframe.html'
         },
@@ -28,6 +53,17 @@ export const DuffelAssistant = ({
           if (event.nativeEvent.data === 'duffel-assistant-close') {
             onClose();
           }
+          try {
+            const parsedData = JSON.parse(event.nativeEvent.data);
+            if (parsedData.type === 'duffel-assistant-new-message' && typeof parsedData.userId === 'string' && typeof parsedData.resourceId === 'string' && onNewMessage !== undefined) {
+              onNewMessage({
+                userId: parsedData.userId,
+                resourceId: parsedData.resourceId
+              });
+            }
+          } catch (error) {
+            // do nothing, invalid JSON
+          }
         }
       }) : /*#__PURE__*/_jsx(WebView
       // Required for Android

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Modal","Platform","StyleSheet","View","WebView","hasJsonWebTokenFormat","jsx","_jsx","DuffelAssistant","isOpen","onClose","properties","clientKey","Error","visible","onRequestClose","animationType","children","style","styles","container","OS","injectedJavaScriptObject","source","uri","onMessage","event","nativeEvent","data","injectedJavaScript","JSON","stringify","create","height","width","paddingHorizontal","paddingTop","paddingBottom"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAChE,SAASC,OAAO,QAAQ,sBAAsB;AAE9C,SAASC,qBAAqB,QAAQ,gCAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIpE,OAAO,MAAMC,eAA+C,GAAGA,CAAC;EAC9DC,MAAM;EACNC,OAAO;EACP,GAAGC;AACL,CAAC,KAAK;EACJ,IAAI,CAACN,qBAAqB,CAACM,UAAU,CAACC,SAAS,CAAC,EAAE;IAChD,MAAM,IAAIC,KAAK,CAAC,yDAAyD,CAAC;EAC5E;EAEA,oBACEN,IAAA,CAACP,KAAK;IACJc,OAAO,EAAEL,MAAO;IAChBM,cAAc,EAAEA,CAAA,KAAML,OAAO,CAAC,CAAE;IAChCM,aAAa,EAAC,OAAO;IAAAC,QAAA,eAErBV,IAAA,CAACJ,IAAI;MAACe,KAAK,EAAEC,MAAM,CAACC,SAAU;MAAAH,QAAA,EAC3BhB,QAAQ,CAACoB,EAAE,KAAK,KAAK,gBACpBd,IAAA,CAACH,OAAO;QACNkB,wBAAwB,EAAEX,UAAW;QACrCY,MAAM,EAAE;UAAEC,GAAG,EAAE;QAAkD,CAAE;QACnEC,SAAS,EAAGC,KAAK,IAAK;UACpB,IAAIA,KAAK,CAACC,WAAW,CAACC,IAAI,KAAK,wBAAwB,EAAE;YACvDlB,OAAO,CAAC,CAAC;UACX;QACF;MAAE,CACH,CAAC,gBAEFH,IAAA,CAACH;MACC;MAAA;QACAyB,kBAAkB,EAAE;AAChC;AACA;AACA;AACA,4BAA4BC,IAAI,CAACC,SAAS,CAACpB,UAAU,CAAC;AACtD;AACA;AACA;AACA,gBAAiB;QACLY,MAAM,EAAE;UAAEC,GAAG,EAAE;QAAkD,CAAE;QACnEC,SAAS,EAAGC,KAAK,IAAK;UACpB,IAAIA,KAAK,CAACC,WAAW,CAACC,IAAI,KAAK,wBAAwB,EAAE;YACvDlB,OAAO,CAAC,CAAC;UACX;QACF;MAAE,CACH;IACF,CACG;EAAC,CACF,CAAC;AAEZ,CAAC;AAED,MAAMS,MAAM,GAAGjB,UAAU,CAAC8B,MAAM,CAAC;EAC/BZ,SAAS,EAAE;IACTa,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,iBAAiB,EAAE,EAAE;IACrBC,UAAU,EAAE,EAAE;IACdC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Modal","Platform","StyleSheet","View","WebView","hasJsonWebTokenFormat","getClientKeyPayload","jsx","_jsx","DuffelAssistant","isOpen","onClose","onNewMessage","properties","clientKey","Error","clientKeyPayload","clientKeyIncludesResource","order_id","undefined","booking_id","issueType","console","warn","context","visible","onRequestClose","animationType","children","style","styles","container","OS","injectedJavaScriptObject","source","uri","onMessage","event","nativeEvent","data","parsedData","JSON","parse","type","userId","resourceId","error","injectedJavaScript","stringify","create","height","width","paddingHorizontal","paddingTop","paddingBottom"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/lib/getClientKeyPayload.js

@@ -0,0 +1,39 @@
+"use strict";
+
+export function getClientKeyPayload(clientKey) {
+  if (typeof clientKey !== 'string') {
+    return null;
+  }
+  const payload = clientKey.split('.')[1];
+  if (!payload) {
+    throw new Error('Malformed client key. Make sure the client key given to props has a valid JWT format.');
+  }
+  try {
+    const decodedPayload = atob(payload);
+    const json = JSON.parse(decodedPayload);
+    const data = {
+      ...(json.exp && {
+        exp: json.exp
+      }),
+      ...(json.user_id && {
+        user_id: json.user_id
+      }),
+      ...(json.live_mode && {
+        live_mode: json.live_mode
+      }),
+      ...(json.organisation_id && {
+        organisation_id: json.organisation_id
+      }),
+      ...(json.order_id && {
+        order_id: json.order_id
+      }),
+      ...(json.booking_id && {
+        booking_id: json.booking_id
+      })
+    };
+    return data;
+  } catch (error) {
+    return null;
+  }
+}
+//# sourceMappingURL=getClientKeyPayload.js.map

package/lib/module/lib/getClientKeyPayload.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getClientKeyPayload","clientKey","payload","split","Error","decodedPayload","atob","json","JSON","parse","data","exp","user_id","live_mode","organisation_id","order_id","booking_id","error"],"sourceRoot":"../../../src","sources":["lib/getClientKeyPayload.ts"],"mappings":";;AAgCA,OAAO,SAASA,mBAAmBA,CACjCC,SAAiB,EACQ;EACzB,IAAI,OAAOA,SAAS,KAAK,QAAQ,EAAE;IACjC,OAAO,IAAI;EACb;EAEA,MAAMC,OAAO,GAAGD,SAAS,CAACE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EACvC,IAAI,CAACD,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CACb,uFACF,CAAC;EACH;EAEA,IAAI;IACF,MAAMC,cAAc,GAAGC,IAAI,CAACJ,OAAO,CAAC;IAEpC,MAAMK,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACJ,cAAc,CAAC;IACvC,MAAMK,IAAI,GAAG;MACX,IAAIH,IAAI,CAACI,GAAG,IAAI;QAAEA,GAAG,EAAEJ,IAAI,CAACI;MAAI,CAAC,CAAC;MAClC,IAAIJ,IAAI,CAACK,OAAO,IAAI;QAAEA,OAAO,EAAEL,IAAI,CAACK;MAAQ,CAAC,CAAC;MAC9C,IAAIL,IAAI,CAACM,SAAS,IAAI;QAAEA,SAAS,EAAEN,IAAI,CAACM;MAAU,CAAC,CAAC;MACpD,IAAIN,IAAI,CAACO,eAAe,IAAI;QAC1BA,eAAe,EAAEP,IAAI,CAACO;MACxB,CAAC,CAAC;MACF,IAAIP,IAAI,CAACQ,QAAQ,IAAI;QAAEA,QAAQ,EAAER,IAAI,CAACQ;MAAS,CAAC,CAAC;MACjD,IAAIR,IAAI,CAACS,UAAU,IAAI;QAAEA,UAAU,EAAET,IAAI,CAACS;MAAW,CAAC;IACxD,CAAC;IACD,OAAON,IAAI;EACb,CAAC,CAAC,OAAOO,KAAK,EAAE;IACd,OAAO,IAAI;EACb;AACF","ignoreList":[]}

package/lib/typescript/src/DuffelAssistantProps.d.ts

@@ -1,5 +1,28 @@
+export type SupportIssueType = 'cancellation' | 'change' | 'other';
+export type DuffelAssistantContext = {
+    /**
+     * A summary of the customer's request for handover to Duffel Support.
+     * This will only be displayed to the agent handling the chat.
+     *
+     * @default undefined
+     */
+    summary?: string;
+    /**
+     * When the intent is set to "chat", you may use this value to immediately open a support case for a specific issue type.
+     * When no issue type is provided, the user will be able to select the issue type in the chat UI.
+     *
+     * @default undefined
+     */
+    issueType?: SupportIssueType;
+};
 export interface DuffelAssistantProps {
+    /**
+     * This prop is used to control whether the Assistant is open/visible or closed.
+     */
     isOpen: boolean;
+    /**
+     * This function callback is called when the user click to close/minimise the Assistant.
+     */
     onClose: () => void;
     /**
      * This is used to authenticate requests to the Duffel API.
@@ -21,12 +44,24 @@ export interface DuffelAssistantProps {
      */
     environment?: 'staging' | 'production' | 'development';
     /**
-     * When the clientKey include both the user and resource IDs, the assistant will open directly on the chat window.
-     * You may use `issueType` to immediately open a support case with a specific issue type.
-     * When no issue type is provided, the user will be able to select the issue type in the chat UI.
+     * @deprecated Put this in `context.issueType` instead.
+     */
+    issueType?: SupportIssueType;
+    /**
+     * This callback is called when a new message is received from the Assistant.
+     * You can react to this to notify users that a new message has been received.
+     *
+     * @param eventPayload - The event payload containing the user ID and resource ID associated with the message.
+     */
+    onNewMessage?: (eventPayload: {
+        userId: string;
+        resourceId: string;
+    }) => void;
+    /**
+     * The context of the customer's request for handover to Duffel Support. This is used to pass additional information to the Assistant.
      *
      * @default undefined
      */
-    issueType?: 'cancellation' | 'change' | 'other';
+    context?: DuffelAssistantContext;
 }
 //# sourceMappingURL=DuffelAssistantProps.d.ts.map

package/lib/typescript/src/DuffelAssistantProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DuffelAssistantProps.d.ts","sourceRoot":"","sources":["../../../src/DuffelAssistantProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IAEvD;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC;CACjD"}
+{"version":3,"file":"DuffelAssistantProps.d.ts","sourceRoot":"","sources":["../../../src/DuffelAssistantProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IAEvD;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAE9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC"}

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,oBAAoB,IAAI,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAGnG,MAAM,MAAM,oBAAoB,GAAG,4BAA4B,CAAC;AAEhE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiD1D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,oBAAoB,IAAI,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAInG,MAAM,MAAM,oBAAoB,GAAG,4BAA4B,CAAC;AAEhE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6G1D,CAAC"}

package/lib/typescript/src/lib/getClientKeyPayload.d.ts

@@ -0,0 +1,28 @@
+export type ClientKeyPayload = {
+    /**
+     * When the token expires, in unix time.
+     */
+    exp: number;
+    /**
+     * The customer user ID.
+     */
+    user_id: string;
+    /**
+     * The live mode flag.
+     */
+    live_mode: boolean;
+    /**
+     * The organisation ID.
+     */
+    organisation_id: string;
+    /**
+     * The ID of an order when integrating the chat only mode.
+     */
+    order_id?: string;
+    /**
+     * The ID of a booking when integrating the chat only mode.
+     */
+    booking_id?: string;
+};
+export declare function getClientKeyPayload(clientKey: string): ClientKeyPayload | null;
+//# sourceMappingURL=getClientKeyPayload.d.ts.map

package/lib/typescript/src/lib/getClientKeyPayload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getClientKeyPayload.d.ts","sourceRoot":"","sources":["../../../../src/lib/getClientKeyPayload.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,MAAM,GAChB,gBAAgB,GAAG,IAAI,CA8BzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duffel/react-native-components-assistant",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Duffel Assistant component in React Native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -33,7 +33,7 @@
   ],
   "scripts": {
     "example": "yarn workspace duffel-react-native-components-assistant-example",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
@@ -76,10 +76,10 @@
     "eslint-plugin-prettier": "^5.2.3",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
-    "react": "19.0.0",
-    "react-native": "0.79.5",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-builder-bob": "^0.40.12",
-    "react-native-webview": "^13.16.0",
+    "react-native-webview": "13.15.0",
     "release-it": "^17.10.0",
     "typescript": "^5.8.3"
   },
@@ -152,5 +152,8 @@
     "languages": "js",
     "type": "library",
     "version": "0.51.1"
+  },
+  "dependencies": {
+    "expo": "^54.0.0"
   }
 }

package/src/DuffelAssistantProps.ts

@@ -1,5 +1,32 @@
+export type SupportIssueType = 'cancellation' | 'change' | 'other';
+
+export type DuffelAssistantContext = {
+  /**
+   * A summary of the customer's request for handover to Duffel Support.
+   * This will only be displayed to the agent handling the chat.
+   *
+   * @default undefined
+   */
+  summary?: string;
+
+  /**
+   * When the intent is set to "chat", you may use this value to immediately open a support case for a specific issue type.
+   * When no issue type is provided, the user will be able to select the issue type in the chat UI.
+   *
+   * @default undefined
+   */
+  issueType?: SupportIssueType;
+};
+
 export interface DuffelAssistantProps {
+  /**
+   * This prop is used to control whether the Assistant is open/visible or closed.
+   */
   isOpen: boolean;
+
+  /**
+   * This function callback is called when the user click to close/minimise the Assistant.
+   */
   onClose: () => void;
 
   /**
@@ -25,11 +52,22 @@ export interface DuffelAssistantProps {
   environment?: 'staging' | 'production' | 'development';
 
   /**
-   * When the clientKey include both the user and resource IDs, the assistant will open directly on the chat window.
-   * You may use `issueType` to immediately open a support case with a specific issue type.
-   * When no issue type is provided, the user will be able to select the issue type in the chat UI.
+   * @deprecated Put this in `context.issueType` instead.
+   */
+  issueType?: SupportIssueType;
+
+  /**
+   * This callback is called when a new message is received from the Assistant.
+   * You can react to this to notify users that a new message has been received.
+   *
+   * @param eventPayload - The event payload containing the user ID and resource ID associated with the message.
+   */
+  onNewMessage?: (eventPayload: { userId: string; resourceId: string }) => void;
+
+  /**
+   * The context of the customer's request for handover to Duffel Support. This is used to pass additional information to the Assistant.
    *
    * @default undefined
    */
-  issueType?: 'cancellation' | 'change' | 'other';
+  context?: DuffelAssistantContext;
 }

package/src/index.tsx

@@ -3,18 +3,59 @@ import { Modal, Platform, StyleSheet, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import { type DuffelAssistantProps as DuffelAssistantPropsImported } from './DuffelAssistantProps';
 import { hasJsonWebTokenFormat } from './lib/hasJsonWebTokenFormat';
+import { getClientKeyPayload } from './lib/getClientKeyPayload';
 
 export type DuffelAssistantProps = DuffelAssistantPropsImported;
 
 export const DuffelAssistant: React.FC<DuffelAssistantProps> = ({
   isOpen,
   onClose,
+  onNewMessage,
   ...properties
 }) => {
   if (!hasJsonWebTokenFormat(properties.clientKey)) {
     throw new Error('Duffel Assistant client key format must be a valid JWT.');
   }
 
+  const clientKeyPayload = getClientKeyPayload(properties.clientKey);
+  if (!clientKeyPayload) {
+    throw new Error(
+      'The client key property is invalid. A client key must follow the JWT format.'
+    );
+  }
+
+  const clientKeyIncludesResource =
+    clientKeyPayload.order_id !== undefined ||
+    clientKeyPayload.booking_id !== undefined;
+
+  if (!('user_id' in clientKeyPayload)) {
+    throw new Error(
+      'The client key in the props does not include a user_id. Make sure a user_id is included in the payload of the client key creation.'
+    );
+  }
+
+  if (typeof properties.issueType !== 'undefined') {
+    console.warn(
+      'The issueType prop has been deprecated and will no longer be supported in the future. Please use the context prop instead.'
+    );
+  }
+
+  if (
+    !clientKeyIncludesResource &&
+    typeof properties.issueType !== 'undefined'
+  ) {
+    console.warn(
+      'The issueType prop is only supported when the client key includes a resource id, it will be ignored.'
+    );
+    delete properties.issueType;
+  }
+
+  if (!clientKeyIncludesResource && properties.context) {
+    throw new Error(
+      'The context prop is only supported when the client key includes a resource id.'
+    );
+  }
+
   return (
     <Modal
       visible={isOpen}
@@ -25,11 +66,31 @@ export const DuffelAssistant: React.FC<DuffelAssistantProps> = ({
         {Platform.OS === 'ios' ? (
           <WebView
             injectedJavaScriptObject={properties}
+            // When you are running this in development iOS doesn't allow request from hosts with invalid https certificates.
+            // If you try ngrok with the local esbuild server it will fail because ngrok requests in https and the dev server rejects http requests.
+            // Easiest solution is to use the production URL with test data.
+            // If that's not possible, you can also upload the assistant built assets to a different folder in assets.duffel and work with that.
             source={{ uri: 'https://assets.duffel.com/assistant/iframe.html' }}
             onMessage={(event) => {
               if (event.nativeEvent.data === 'duffel-assistant-close') {
                 onClose();
               }
+              try {
+                const parsedData = JSON.parse(event.nativeEvent.data);
+                if (
+                  parsedData.type === 'duffel-assistant-new-message' &&
+                  typeof parsedData.userId === 'string' &&
+                  typeof parsedData.resourceId === 'string' &&
+                  onNewMessage !== undefined
+                ) {
+                  onNewMessage({
+                    userId: parsedData.userId,
+                    resourceId: parsedData.resourceId,
+                  });
+                }
+              } catch (error) {
+                // do nothing, invalid JSON
+              }
             }}
           />
         ) : (

package/src/lib/getClientKeyPayload.ts

@@ -0,0 +1,65 @@
+export type ClientKeyPayload = {
+  /**
+   * When the token expires, in unix time.
+   */
+  exp: number;
+
+  /**
+   * The customer user ID.
+   */
+  user_id: string;
+
+  /**
+   * The live mode flag.
+   */
+  live_mode: boolean;
+
+  /**
+   * The organisation ID.
+   */
+  organisation_id: string;
+
+  /**
+   * The ID of an order when integrating the chat only mode.
+   */
+  order_id?: string;
+
+  /**
+   * The ID of a booking when integrating the chat only mode.
+   */
+  booking_id?: string;
+};
+
+export function getClientKeyPayload(
+  clientKey: string
+): ClientKeyPayload | null {
+  if (typeof clientKey !== 'string') {
+    return null;
+  }
+
+  const payload = clientKey.split('.')[1];
+  if (!payload) {
+    throw new Error(
+      'Malformed client key. Make sure the client key given to props has a valid JWT format.'
+    );
+  }
+
+  try {
+    const decodedPayload = atob(payload);
+
+    const json = JSON.parse(decodedPayload);
+    const data = {
+      ...(json.exp && { exp: json.exp }),
+      ...(json.user_id && { user_id: json.user_id }),
+      ...(json.live_mode && { live_mode: json.live_mode }),
+      ...(json.organisation_id && {
+        organisation_id: json.organisation_id,
+      }),
+      ...(json.order_id && { order_id: json.order_id }),
+      ...(json.booking_id && { booking_id: json.booking_id }),
+    };
+    return data as ClientKeyPayload;
+  } catch (error) {
+    return null;
+  }
+}