@cstar.help/react 0.10.0 → 0.10.1

package/README.md

@@ -367,7 +367,7 @@ component.
 
 - React 18+
 - @cstar.help/js 0.1.0+
-- Node.js 18+ (for SSR)
+- Node.js 22+ for SSR with `@cstar.help/js` 0.17
 
 ## License
 

package/dist/index.cjs

@@ -246,36 +246,48 @@ function useMessages(ticketId) {
   const [error, setError] = (0, import_react5.useState)(null);
   const mountedRef = (0, import_react5.useRef)(true);
   const seenIdsRef = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
+  const requestRef = (0, import_react5.useRef)(0);
+  const scopeRef = (0, import_react5.useRef)(0);
+  const optimisticRef = (0, import_react5.useRef)(0);
   const refresh = (0, import_react5.useCallback)(async () => {
     if (!ticketId) return;
+    const request = ++requestRef.current;
     setIsLoading(true);
     setError(null);
     try {
       const msgs = await client.messages.list(ticketId);
-      if (mountedRef.current) {
+      if (mountedRef.current && request === requestRef.current) {
         seenIdsRef.current = new Set(msgs.map((m) => m.id));
         setMessages(msgs);
       }
     } catch (err) {
-      if (mountedRef.current) {
+      if (mountedRef.current && request === requestRef.current) {
         setError(err instanceof Error ? err : new Error(String(err)));
       }
     } finally {
-      if (mountedRef.current) {
+      if (mountedRef.current && request === requestRef.current) {
         setIsLoading(false);
       }
     }
   }, [client, ticketId]);
   (0, import_react5.useEffect)(() => {
     mountedRef.current = true;
+    const scope = ++scopeRef.current;
+    seenIdsRef.current = /* @__PURE__ */ new Set();
+    setMessages([]);
+    setError(null);
     if (!ticketId) {
       setMessages([]);
       setIsLoading(false);
-      return;
+      return () => {
+        mountedRef.current = false;
+        requestRef.current++;
+        scopeRef.current++;
+      };
     }
     refresh();
     const unsubscribe = client.onMessage(ticketId, (msg) => {
-      if (mountedRef.current && !seenIdsRef.current.has(msg.id)) {
+      if (mountedRef.current && scope === scopeRef.current && !seenIdsRef.current.has(msg.id)) {
         seenIdsRef.current.add(msg.id);
         setMessages((prev) => {
           const optimisticIdx = prev.findIndex(
@@ -292,14 +304,17 @@ function useMessages(ticketId) {
     });
     return () => {
       mountedRef.current = false;
+      requestRef.current++;
+      scopeRef.current++;
       unsubscribe();
     };
   }, [client, ticketId, refresh]);
   const send = (0, import_react5.useCallback)(
     async (content) => {
       if (!ticketId) throw new Error("No ticket selected");
+      const scope = scopeRef.current;
       const optimistic = {
-        id: `optimistic-${Date.now()}`,
+        id: `optimistic-${++optimisticRef.current}`,
         content,
         sender: "customer",
         sender_name: "",
@@ -310,11 +325,14 @@ function useMessages(ticketId) {
       setMessages((prev) => [...prev, optimistic]);
       try {
         const msg = await client.messages.send(ticketId, content);
+        if (!mountedRef.current || scope !== scopeRef.current) return msg;
         seenIdsRef.current.add(msg.id);
         setMessages((prev) => prev.map((m) => m.id === optimistic.id ? msg : m));
         return msg;
       } catch (err) {
-        setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
+        if (mountedRef.current && scope === scopeRef.current) {
+          setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
+        }
         throw err;
       }
     },

package/dist/index.d.cts

@@ -6,7 +6,6 @@ import { LibraryClient, LibraryConfig, Category, LibraryArticle, LibraryArticleL
 export { Category, LibraryArticle, LibraryArticleListParams, LibraryConfig, LibrarySearchParams, LibrarySearchResult } from '@cstar.help/js/library';
 import { CommunityClient, CommunityConfig, CommunityTopic, CommunityPost, CommunityPostListParams, CommunityPostDetail, CommunitySearchResult } from '@cstar.help/js/community';
 export { CommunityComment, CommunityConfig, CommunityPost, CommunityPostDetail, CommunityPostListParams, CommunitySearchResult, CommunityTopic } from '@cstar.help/js/community';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CStarClientConfig, CStarClient, RealtimeEvent, Boss, Player, LeaderboardEntry } from '@cstar.help/js';
 
 declare const CStarChatContext: react.Context<ChatClient | null>;
@@ -41,7 +40,7 @@ interface CStarChatProviderProps extends ChatConfig {
  * </CStarChatProvider>
  * ```
  */
-declare function CStarChatProvider({ children, ...config }: CStarChatProviderProps): react_jsx_runtime.JSX.Element;
+declare function CStarChatProvider({ children, ...config }: CStarChatProviderProps): react.JSX.Element;
 
 interface UseChatReturn {
     /** Identify a customer with HMAC signature. */
@@ -178,7 +177,7 @@ interface CStarLibraryProviderProps extends LibraryConfig {
  * </CStarLibraryProvider>
  * ```
  */
-declare function CStarLibraryProvider({ children, ...config }: CStarLibraryProviderProps): react_jsx_runtime.JSX.Element;
+declare function CStarLibraryProvider({ children, ...config }: CStarLibraryProviderProps): react.JSX.Element;
 
 interface UseCategoriesReturn {
     /** All public categories. */
@@ -271,7 +270,7 @@ interface CStarCommunityProviderProps extends CommunityConfig {
  * </CStarCommunityProvider>
  * ```
  */
-declare function CStarCommunityProvider({ children, ...config }: CStarCommunityProviderProps): react_jsx_runtime.JSX.Element;
+declare function CStarCommunityProvider({ children, ...config }: CStarCommunityProviderProps): react.JSX.Element;
 
 interface UseTopicsReturn {
     /** Community discussion topics. */
@@ -360,6 +359,7 @@ interface CStarDashboardProviderProps {
      * provider builds the `CStarClient` internally so this prop can be passed
      * across the React Server Components boundary without tripping the
      * "Classes or null prototypes are not supported" runtime error.
+     * Config is visible to the browser: use only a publishable key here.
      *
      * Either `config` or `client` is required.
      */
@@ -378,19 +378,22 @@ interface CStarDashboardProviderProps {
 /**
  * Provides a `CStarClient` to dashboard hooks.
  *
- * Unlike `CStarChatProvider` (which uses a publishable key for customer-facing
- * chat), this provider wraps a full admin client with a secret key for building
- * custom dashboards.
+ * Provider props and bundled clients are visible to the browser. Pass only
+ * a publishable key; supported operations are limited by that key's permissions.
+ * Run privileged dashboard reads and mutations through your authenticated
+ * backend, where a secret-key `CStarClient` stays on the server.
  *
  * ```tsx
- * // Recommended: pass serializable config — works in any React tree, including
- * // App Router server components that hand the props to a client component.
- * <CStarDashboardProvider config={{ apiKey: process.env.CSTAR_API_KEY!, teamId }}>
+ * // app/providers.tsx
+ * 'use client';
+ * <CStarDashboardProvider
+ *   config={{ apiKey: process.env.NEXT_PUBLIC_CSTAR_PUBLISHABLE_KEY!, teamId }}
+ * >
  *   <TicketList />
  * </CStarDashboardProvider>
  * ```
  */
-declare function CStarDashboardProvider({ config, client: providedClient, children }: CStarDashboardProviderProps): react_jsx_runtime.JSX.Element;
+declare function CStarDashboardProvider({ config, client: providedClient, children }: CStarDashboardProviderProps): react__default.JSX.Element;
 /**
  * Access the `CStarClient` from the nearest `CStarDashboardProvider`.
  * Throws if used outside a provider.

package/dist/index.d.ts

@@ -6,7 +6,6 @@ import { LibraryClient, LibraryConfig, Category, LibraryArticle, LibraryArticleL
 export { Category, LibraryArticle, LibraryArticleListParams, LibraryConfig, LibrarySearchParams, LibrarySearchResult } from '@cstar.help/js/library';
 import { CommunityClient, CommunityConfig, CommunityTopic, CommunityPost, CommunityPostListParams, CommunityPostDetail, CommunitySearchResult } from '@cstar.help/js/community';
 export { CommunityComment, CommunityConfig, CommunityPost, CommunityPostDetail, CommunityPostListParams, CommunitySearchResult, CommunityTopic } from '@cstar.help/js/community';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CStarClientConfig, CStarClient, RealtimeEvent, Boss, Player, LeaderboardEntry } from '@cstar.help/js';
 
 declare const CStarChatContext: react.Context<ChatClient | null>;
@@ -41,7 +40,7 @@ interface CStarChatProviderProps extends ChatConfig {
  * </CStarChatProvider>
  * ```
  */
-declare function CStarChatProvider({ children, ...config }: CStarChatProviderProps): react_jsx_runtime.JSX.Element;
+declare function CStarChatProvider({ children, ...config }: CStarChatProviderProps): react.JSX.Element;
 
 interface UseChatReturn {
     /** Identify a customer with HMAC signature. */
@@ -178,7 +177,7 @@ interface CStarLibraryProviderProps extends LibraryConfig {
  * </CStarLibraryProvider>
  * ```
  */
-declare function CStarLibraryProvider({ children, ...config }: CStarLibraryProviderProps): react_jsx_runtime.JSX.Element;
+declare function CStarLibraryProvider({ children, ...config }: CStarLibraryProviderProps): react.JSX.Element;
 
 interface UseCategoriesReturn {
     /** All public categories. */
@@ -271,7 +270,7 @@ interface CStarCommunityProviderProps extends CommunityConfig {
  * </CStarCommunityProvider>
  * ```
  */
-declare function CStarCommunityProvider({ children, ...config }: CStarCommunityProviderProps): react_jsx_runtime.JSX.Element;
+declare function CStarCommunityProvider({ children, ...config }: CStarCommunityProviderProps): react.JSX.Element;
 
 interface UseTopicsReturn {
     /** Community discussion topics. */
@@ -360,6 +359,7 @@ interface CStarDashboardProviderProps {
      * provider builds the `CStarClient` internally so this prop can be passed
      * across the React Server Components boundary without tripping the
      * "Classes or null prototypes are not supported" runtime error.
+     * Config is visible to the browser: use only a publishable key here.
      *
      * Either `config` or `client` is required.
      */
@@ -378,19 +378,22 @@ interface CStarDashboardProviderProps {
 /**
  * Provides a `CStarClient` to dashboard hooks.
  *
- * Unlike `CStarChatProvider` (which uses a publishable key for customer-facing
- * chat), this provider wraps a full admin client with a secret key for building
- * custom dashboards.
+ * Provider props and bundled clients are visible to the browser. Pass only
+ * a publishable key; supported operations are limited by that key's permissions.
+ * Run privileged dashboard reads and mutations through your authenticated
+ * backend, where a secret-key `CStarClient` stays on the server.
  *
  * ```tsx
- * // Recommended: pass serializable config — works in any React tree, including
- * // App Router server components that hand the props to a client component.
- * <CStarDashboardProvider config={{ apiKey: process.env.CSTAR_API_KEY!, teamId }}>
+ * // app/providers.tsx
+ * 'use client';
+ * <CStarDashboardProvider
+ *   config={{ apiKey: process.env.NEXT_PUBLIC_CSTAR_PUBLISHABLE_KEY!, teamId }}
+ * >
  *   <TicketList />
  * </CStarDashboardProvider>
  * ```
  */
-declare function CStarDashboardProvider({ config, client: providedClient, children }: CStarDashboardProviderProps): react_jsx_runtime.JSX.Element;
+declare function CStarDashboardProvider({ config, client: providedClient, children }: CStarDashboardProviderProps): react__default.JSX.Element;
 /**
  * Access the `CStarClient` from the nearest `CStarDashboardProvider`.
  * Throws if used outside a provider.

package/dist/index.js

@@ -191,36 +191,48 @@ function useMessages(ticketId) {
   const [error, setError] = useState3(null);
   const mountedRef = useRef3(true);
   const seenIdsRef = useRef3(/* @__PURE__ */ new Set());
+  const requestRef = useRef3(0);
+  const scopeRef = useRef3(0);
+  const optimisticRef = useRef3(0);
   const refresh = useCallback3(async () => {
     if (!ticketId) return;
+    const request = ++requestRef.current;
     setIsLoading(true);
     setError(null);
     try {
       const msgs = await client.messages.list(ticketId);
-      if (mountedRef.current) {
+      if (mountedRef.current && request === requestRef.current) {
         seenIdsRef.current = new Set(msgs.map((m) => m.id));
         setMessages(msgs);
       }
     } catch (err) {
-      if (mountedRef.current) {
+      if (mountedRef.current && request === requestRef.current) {
         setError(err instanceof Error ? err : new Error(String(err)));
       }
     } finally {
-      if (mountedRef.current) {
+      if (mountedRef.current && request === requestRef.current) {
         setIsLoading(false);
       }
     }
   }, [client, ticketId]);
   useEffect4(() => {
     mountedRef.current = true;
+    const scope = ++scopeRef.current;
+    seenIdsRef.current = /* @__PURE__ */ new Set();
+    setMessages([]);
+    setError(null);
     if (!ticketId) {
       setMessages([]);
       setIsLoading(false);
-      return;
+      return () => {
+        mountedRef.current = false;
+        requestRef.current++;
+        scopeRef.current++;
+      };
     }
     refresh();
     const unsubscribe = client.onMessage(ticketId, (msg) => {
-      if (mountedRef.current && !seenIdsRef.current.has(msg.id)) {
+      if (mountedRef.current && scope === scopeRef.current && !seenIdsRef.current.has(msg.id)) {
         seenIdsRef.current.add(msg.id);
         setMessages((prev) => {
           const optimisticIdx = prev.findIndex(
@@ -237,14 +249,17 @@ function useMessages(ticketId) {
     });
     return () => {
       mountedRef.current = false;
+      requestRef.current++;
+      scopeRef.current++;
       unsubscribe();
     };
   }, [client, ticketId, refresh]);
   const send = useCallback3(
     async (content) => {
       if (!ticketId) throw new Error("No ticket selected");
+      const scope = scopeRef.current;
       const optimistic = {
-        id: `optimistic-${Date.now()}`,
+        id: `optimistic-${++optimisticRef.current}`,
         content,
         sender: "customer",
         sender_name: "",
@@ -255,11 +270,14 @@ function useMessages(ticketId) {
       setMessages((prev) => [...prev, optimistic]);
       try {
         const msg = await client.messages.send(ticketId, content);
+        if (!mountedRef.current || scope !== scopeRef.current) return msg;
         seenIdsRef.current.add(msg.id);
         setMessages((prev) => prev.map((m) => m.id === optimistic.id ? msg : m));
         return msg;
       } catch (err) {
-        setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
+        if (mountedRef.current && scope === scopeRef.current) {
+          setMessages((prev) => prev.filter((m) => m.id !== optimistic.id));
+        }
         throw err;
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cstar.help/react",
-	"version": "0.10.0",
+	"version": "0.10.1",
 	"description": "React hooks for the cStar customer support platform",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -35,14 +35,15 @@
 	"devDependencies": {
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"@cstar.help/js": "file:../js",
+		"@cstar.help/js": "^0.17.0",
 		"@testing-library/react": "^16.1.0",
 		"@types/react": "^18.3.0",
 		"@types/react-dom": "^18.3.0",
 		"tsup": "^8.5.0",
 		"typescript": "^5.7.0",
 		"vitest": "^3.2.0",
-		"jsdom": "^25.0.0"
+		"jsdom": "^25.0.0",
+		"@testing-library/dom": "^10.4.1"
 	},
 	"license": "MIT",
 	"engines": {
@@ -51,11 +52,11 @@
 	"homepage": "https://cstar.help/developers/sdk/react",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/cstar-help/cstar",
+		"url": "https://github.com/msjoshlopez/cstar",
 		"directory": "packages/react"
 	},
 	"bugs": {
-		"url": "https://github.com/cstar-help/cstar/issues"
+		"url": "https://www.cstar.help/support"
 	},
 	"keywords": [
 		"cstar",