@zean-chat/react 0.1.0 → 0.1.2

package/README.md

@@ -10,13 +10,13 @@ npm install @zean-chat/react
 import { ZeanChat, useZean } from "@zean-chat/react";
 
 // Once, in the root layout or root route.
-<ZeanChat appKey="app_your_app_key" getToken={user ? fetchZeanToken : undefined} attributes={{ plan: "pro" }} />;
+<ZeanChat appKey="app_your_app_key" user={user ? { id: user.id, name: user.name, email: user.email } : undefined} attributes={{ plan: "pro" }} />;
 
 // Anywhere.
 const { open, close, toggle, unreadCount, identify, signOut, setAttributes } = useZean();
 ```
 
-To switch people, render one time without `getToken` in between. Full guide: [install the chat in React and Next.js](https://zean.chat/docs/install-react), [React reference](https://zean.chat/docs/reference-react).
+Passing `user` signs the person in; `undefined` signs them out. Full guide: [install the chat in React and Next.js](https://zean.chat/docs/install-react), [React reference](https://zean.chat/docs/reference-react).
 
 ## Why Zean
 

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import type { ZeanChatProps, ZeanControls } from './interfaces.js';
-export type { ZeanAttributes, ZeanLocale, ZeanTokenSource } from '@zean-chat/js';
+export type { ZeanAttributes, ZeanLocale, ZeanUser } from '@zean-chat/js';
 export type { ZeanChatProps, ZeanControls } from './interfaces.js';
 /**
  * Shows the chat. Render it once, near the root, on every page. It renders nothing itself: the chat sits in its own
  * frame, and stays across page changes.
  */
-export declare function ZeanChat({ appKey, getToken, attributes, locale, loaderUrl }: ZeanChatProps): null;
+export declare function ZeanChat({ appKey, user, attributes, locale, loaderUrl }: ZeanChatProps): null;
 /** Opens and closes the chat, and follows the unread count. Works in any component, before the chat has loaded. */
 export declare function useZean(): ZeanControls;

package/dist/index.js

@@ -3,23 +3,18 @@
 // src/index.ts
 import { useEffect, useRef, useSyncExternalStore } from "react";
 import { loadZean, zean } from "@zean-chat/js";
-function ZeanChat({ appKey, getToken, attributes, locale, loaderUrl }) {
-  const latestToken = useRef(getToken);
-  const tokenSource = useRef(() => latestToken.current?.() ?? Promise.resolve(null));
+function ZeanChat({ appKey, user, attributes, locale, loaderUrl }) {
+  const userKey = user ? JSON.stringify(user) : null;
   const identified = useRef(false);
-  const signedIn = Boolean(getToken);
   const attributesKey = attributes ? JSON.stringify(attributes) : null;
-  useEffect(() => {
-    latestToken.current = getToken;
-  });
   useEffect(() => {
     loadZean({ appKey, locale, loaderUrl });
   }, [appKey, locale, loaderUrl]);
   useEffect(() => {
-    if (signedIn && !identified.current) zean.identify(tokenSource.current);
-    else if (!signedIn && identified.current) zean.signOut();
-    identified.current = signedIn;
-  }, [signedIn]);
+    if (userKey) zean.identify(JSON.parse(userKey));
+    else if (identified.current) zean.signOut();
+    identified.current = userKey !== null;
+  }, [userKey]);
   useEffect(() => {
     if (attributesKey) zean.setAttributes(JSON.parse(attributesKey));
   }, [attributesKey]);

package/dist/interfaces.d.ts

@@ -1,10 +1,7 @@
 import type { ZeanApi, ZeanAttributes, ZeanOptions } from '@zean-chat/js';
 export interface ZeanChatProps extends ZeanOptions {
-    /**
-     * While a person is signed in: returns a token your server signed. Leave it out when no one is; to switch people,
-     * leave it out once in between.
-     */
-    getToken?: ZeanOptions['getToken'];
+    /** The person signed in to your app: `{ id, name, email }`. Leave it out when no one is: the chat signs out. */
+    user?: ZeanOptions['user'];
     /** What the page knows about the person, shown on the Contact's profile. */
     attributes?: ZeanAttributes;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@zean-chat/react",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"description": "Live chat widget for React and Next.js: add a free customer support chat to your app with one component and a hook. Intercom and Crisp alternative.",
 	"keywords": [
 		"react",
@@ -35,6 +35,9 @@
 	"license": "MIT",
 	"type": "module",
 	"sideEffects": false,
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {
 			"zean-source": "./src/index.ts",
@@ -54,7 +57,7 @@
 		"check-types": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@zean-chat/js": "^0.1.0"
+		"@zean-chat/js": "^0.1.1"
 	},
 	"peerDependencies": {
 		"react": ">=18"