feat(react-client): migrate from recoil to zustand

 - Migrate from recoil to zustand
 - Bump react to v19

Author: aleks3fs

libs/react-client/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@chainlit/react-client",
   "description": "Websocket client to connect to your chainlit app.",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "scripts": {
-    "build": "tsup src/index.ts --tsconfig tsconfig.build.json --clean --format esm,cjs --dts  --external react --external recoil --minify --sourcemap --treeshake",
-    "dev": "tsup src/index.ts --clean --format esm,cjs --dts  --external react --external recoil --minify --sourcemap --treeshake",
+    "build": "tsup src/index.ts --tsconfig tsconfig.build.json --clean --format esm,cjs --dts  --external react --external zustand --minify --sourcemap --treeshake",
+    "dev": "tsup src/index.ts --clean --format esm,cjs --dts  --external react --external zustand --minify --sourcemap --treeshake",
     "lint": "eslint ./src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && tsc --noemit",
     "format": "prettier '**/*.{ts,tsx}' --write",
     "test": "echo no tests yet",
@@ -31,8 +31,9 @@
   "types": "dist/index.d.ts",
   "devDependencies": {
     "@swc/core": "^1.3.86",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/lodash": "^4.14.199",
     "@types/uuid": "^9.0.3",
     "@vitejs/plugin-react": "^4.0.4",
@@ -46,18 +47,19 @@
     "vitest": "^0.34.4"
   },
   "peerDependencies": {
-    "@types/react": "^18.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "recoil": "^0.7.7"
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.3"
   },
   "dependencies": {
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.7.2",
     "sonner": "^1.7.1",
-    "swr": "^2.2.2",
-    "uuid": "^9.0.0"
+    "swr": "^2.3.0",
+    "uuid": "^9.0.0",
+    "zustand": "^5.0.3"
   },
   "pnpm": {
     "overrides": {

libs/react-client/pnpm-lock.yaml

@@ -1,10 +1,11 @@
-import { useRecoilState, useSetRecoilState } from 'recoil';
-import { authState, threadHistoryState, userState } from 'src/state';
+import { useAuthStore } from 'src/store/auth';
 
 export const useAuthState = () => {
-  const [authConfig, setAuthConfig] = useRecoilState(authState);
-  const [user, setUser] = useRecoilState(userState);
-  const setThreadHistory = useSetRecoilState(threadHistoryState);
+  const authConfig = useAuthStore((s) => s.authConfig);
+  const setAuthConfig = useAuthStore((s) => s.setAuthConfig);
+  const user = useAuthStore((s) => s.user);
+  const setUser = useAuthStore((s) => s.setUser);
+  const setThreadHistory = useAuthStore((s) => s.setThreadHistory);
 
   return {
     authConfig,

libs/react-client/src/api/hooks/auth/state.ts

@@ -7,7 +7,6 @@ export * from './useConfig';
 export * from './api';
 export * from './types';
 export * from './context';
-export * from './state';
 export * from './utils/message';
 
 export { Socket } from 'socket.io-client';

libs/react-client/src/index.ts

@@ -0,0 +1,52 @@
+import { isEqual } from 'lodash';
+import { groupByDate } from 'src/utils/group';
+import { create } from 'zustand';
+
+import { IAuthConfig, IUser, ThreadHistory } from '..';
+
+interface AuthState {
+  authConfig?: IAuthConfig;
+  user?: IUser | null;
+
+  threadHistory?: ThreadHistory;
+
+  setAuthConfig: (authConfig?: IAuthConfig) => void;
+  setUser: (user?: IUser | null) => void;
+  setThreadHistory: (threadHistory?: ThreadHistory) => void;
+}
+
+export const useAuthStore = create<AuthState>((set, get) => ({
+  threadHistory: {
+    threads: undefined,
+    currentThreadId: undefined,
+    timeGroupedThreads: undefined,
+    pageInfo: undefined
+  },
+
+  setAuthConfig: (authConfig?: IAuthConfig) => {
+    set({ authConfig });
+  },
+
+  setUser: (user?: IUser | null) => {
+    set({ user });
+  },
+
+  setThreadHistory: (threadHistory?: ThreadHistory) => {
+    const oldValue = get().threadHistory;
+
+    let timeGroupedThreads = threadHistory?.timeGroupedThreads;
+    if (
+      threadHistory?.threads &&
+      !isEqual(threadHistory.threads, oldValue?.timeGroupedThreads)
+    ) {
+      timeGroupedThreads = groupByDate(threadHistory.threads);
+    }
+
+    set({
+      threadHistory: {
+        ...threadHistory,
+        timeGroupedThreads
+      }
+    });
+  }
+}));