@gram-ai/elements 1.24.2 → 1.25.0

package/README.md

@@ -324,6 +324,30 @@ function MarketingDemo() {
 | `assistantStartDelay` | `400`   | Milliseconds before the assistant starts typing |
 | `onComplete`          | —       | Callback when replay finishes                   |
 
+## React Compatibility
+
+`@gram-ai/elements` supports React 16.8+, React 17, React 18, and React 19.
+
+React 18 and 19 work out of the box. For React 16 or 17, you need to configure your bundler to shim newer React APIs (`useSyncExternalStore`, `useId`, `useInsertionEffect`) that are used by transitive dependencies like zustand and @assistant-ui/react.
+
+> **Note:** React 16 and React 17 are not regularly tested. If you run into any issues using Elements with these versions, please reach out to us for support.
+
+### Vite Setup (React 16/17)
+
+Add the compatibility plugin to your Vite config:
+
+```typescript
+import react from '@vitejs/plugin-react'
+import { reactCompat } from '@gram-ai/elements/compat'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react(), reactCompat()],
+})
+```
+
+This automatically shims React 18 APIs (`useSyncExternalStore`, `useId`, `useInsertionEffect`) so that Elements and its dependencies work correctly on older React versions.
+
 ## Contributing
 
 We welcome pull requests to Elements. Please read the contributing guide.

package/README.typedoc.md

@@ -19,6 +19,20 @@ const config: ElementsConfig = {
 
 The `mcp` and `projectSlug` values can be retrieved from the MCP and project pages respectively.
 
+## React Compatibility
+
+`@gram-ai/elements` supports React 16.8+, React 17, React 18, and React 19. React 18 and 19 work out of the box. For React 16 or 17, add the compatibility plugin to your Vite config:
+
+```ts
+import { reactCompat } from '@gram-ai/elements/compat'
+
+export default defineConfig({
+  plugins: [react(), reactCompat()],
+})
+```
+
+React 16 and React 17 are not regularly tested — please reach out to us for support if you run into any issues with these versions.
+
 ## API Documentation
 
 `ElementsConfig` is the top level configuration object for the Elements library. Please refer the [ElementsConfig](./docs/interfaces/ElementsConfig.md) interface documentation for more details on how to configure Elements.

package/dist/compat-plugin.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("node:module"),e=require("node:path"),n=require("node:url");var r=typeof document<"u"?document.currentScript:null;const c=e.dirname(n.fileURLToPath(typeof document>"u"?require("url").pathToFileURL(__filename).href:r&&r.tagName.toUpperCase()==="SCRIPT"&&r.src||new URL("compat-plugin.cjs",document.baseURI).href)),o=e.resolve(c,"react-shim.js");function i(){return{name:"gram-elements-react-compat",enforce:"pre",config(){const t=a.createRequire(e.resolve(process.cwd(),"package.json"));return{resolve:{alias:[{find:"react-original",replacement:e.dirname(t.resolve("react/package.json"))},{find:/^react$/,replacement:o}],dedupe:["react","react-dom"]}}}}}exports.reactCompat=i;
+//# sourceMappingURL=compat-plugin.cjs.map

package/dist/compat-plugin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat-plugin.cjs","sources":["../src/compat-plugin.ts"],"sourcesContent":null,"names":["__dirname","dirname","fileURLToPath","_documentCurrentScript","shimPath","resolve","reactCompat","require","createRequire"],"mappings":"kNAeA,MAAMA,EAAYC,EAAAA,QAAQC,gBAAc,OAAA,SAAA,IAAA,QAAA,KAAA,EAAA,cAAA,UAAA,EAAA,KAAAC,GAAAA,EAAA,QAAA,YAAA,IAAA,UAAAA,EAAA,KAAA,IAAA,IAAA,oBAAA,SAAA,OAAA,EAAA,IAAe,CAAC,EAClDC,EAAWC,EAAAA,QAAQL,EAAW,eAAe,EAG5C,SAASM,GAAsB,CACpC,MAAO,CACL,KAAM,6BACN,QAAS,MACT,QAAS,CACP,MAAMC,EAAUC,EAAAA,cAAcH,EAAAA,QAAQ,QAAQ,IAAA,EAAO,cAAc,CAAC,EAEpE,MAAO,CACL,QAAS,CACP,MAAO,CACL,CAAE,KAAM,iBAAkB,YAJVJ,EAAAA,QAAQM,EAAQ,QAAQ,oBAAoB,CAAC,CAItB,EACvC,CAAE,KAAM,UAAW,YAAaH,CAAA,CAAS,EAE3C,OAAQ,CAAC,QAAS,WAAW,CAAA,CAC/B,CAEJ,CAAA,CAEJ"}

package/dist/compat-plugin.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from 'vite';
+/** Redirects `import ... from 'react'` through a shim that polyfills React 18 APIs. */
+export declare function reactCompat(): Plugin;

package/dist/compat-plugin.js

@@ -0,0 +1,26 @@
+import { createRequire as t } from "node:module";
+import { dirname as e, resolve as r } from "node:path";
+import { fileURLToPath as o } from "node:url";
+const c = e(o(import.meta.url)), n = r(c, "react-shim.js");
+function l() {
+  return {
+    name: "gram-elements-react-compat",
+    enforce: "pre",
+    config() {
+      const a = t(r(process.cwd(), "package.json"));
+      return {
+        resolve: {
+          alias: [
+            { find: "react-original", replacement: e(a.resolve("react/package.json")) },
+            { find: /^react$/, replacement: n }
+          ],
+          dedupe: ["react", "react-dom"]
+        }
+      };
+    }
+  };
+}
+export {
+  l as reactCompat
+};
+//# sourceMappingURL=compat-plugin.js.map

package/dist/compat-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat-plugin.js","sources":["../src/compat-plugin.ts"],"sourcesContent":null,"names":["__dirname","dirname","fileURLToPath","shimPath","resolve","reactCompat","require","createRequire"],"mappings":";;;AAeA,MAAMA,IAAYC,EAAQC,EAAc,YAAY,GAAG,CAAC,GAClDC,IAAWC,EAAQJ,GAAW,eAAe;AAG5C,SAASK,IAAsB;AACpC,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AACP,YAAMC,IAAUC,EAAcH,EAAQ,QAAQ,IAAA,GAAO,cAAc,CAAC;AAEpE,aAAO;AAAA,QACL,SAAS;AAAA,UACP,OAAO;AAAA,YACL,EAAE,MAAM,kBAAkB,aAJVH,EAAQK,EAAQ,QAAQ,oBAAoB,CAAC,EAItB;AAAA,YACvC,EAAE,MAAM,WAAW,aAAaH,EAAA;AAAA,UAAS;AAAA,UAE3C,QAAQ,CAAC,SAAS,WAAW;AAAA,QAAA;AAAA,MAC/B;AAAA,IAEJ;AAAA,EAAA;AAEJ;"}

package/dist/compat-shims-BPJ7Q68c.js

@@ -0,0 +1,38 @@
+function a(e) {
+  try {
+    return !Object.is(e.value, e.getSnapshot());
+  } catch {
+    return !0;
+  }
+}
+function f(e) {
+  return function(u, n) {
+    const s = n(), [{ inst: r }, c] = e.useState({ inst: { value: s, getSnapshot: n } });
+    return e.useLayoutEffect(() => {
+      r.value = s, r.getSnapshot = n, a(r) && c({ inst: r });
+    }, [u, s, n]), e.useEffect(() => (a(r) && c({ inst: r }), u(() => {
+      a(r) && c({ inst: r });
+    })), [u]), s;
+  };
+}
+function o(e) {
+  let t = 0;
+  return function() {
+    const n = e.useRef(null);
+    return n.current === null && (n.current = `:r${t++}:`), n.current;
+  };
+}
+function i(e) {
+  return {
+    useSyncExternalStore: e.useSyncExternalStore ?? f(e),
+    useId: e.useId ?? o(e),
+    useInsertionEffect: e.useInsertionEffect ?? e.useLayoutEffect,
+    startTransition: e.startTransition ?? ((t) => t()),
+    useTransition: e.useTransition ?? (() => [!1, (t) => t()]),
+    useDeferredValue: e.useDeferredValue ?? ((t) => t)
+  };
+}
+export {
+  i as c
+};
+//# sourceMappingURL=compat-shims-BPJ7Q68c.js.map

package/dist/compat-shims-BPJ7Q68c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat-shims-BPJ7Q68c.js","sources":["../src/compat-shims.ts"],"sourcesContent":null,"names":["snapshotChanged","inst","createUseSyncExternalStoreShim","R","subscribe","getSnapshot","value","forceUpdate","createUseIdShim","counter","ref","createShims","cb"],"mappings":"AAmBA,SAASA,EAAmBC,GAAmD;AAC7E,MAAI;AACF,WAAO,CAAC,OAAO,GAAGA,EAAK,OAAOA,EAAK,aAAa;AAAA,EAClD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAASC,EAA+BC,GAAc;AACpD,SAAO,SACLC,GACAC,GACG;AACH,UAAMC,IAAQD,EAAA,GACR,CAAC,EAAE,MAAAJ,KAAQM,CAAW,IAAIJ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAAG,GAAO,aAAAD,EAAA,GAAe;AAE3E,WAAAF,EAAE,gBAAgB,MAAM;AACtB,MAAAF,EAAK,QAAQK,GACbL,EAAK,cAAcI,GACfL,EAAgBC,CAAI,KAAGM,EAAY,EAAE,MAAAN,GAAM;AAAA,IACjD,GAAG,CAACG,GAAWE,GAAOD,CAAW,CAAC,GAElCF,EAAE,UAAU,OACNH,EAAgBC,CAAI,KAAGM,EAAY,EAAE,MAAAN,GAAM,GACxCG,EAAU,MAAM;AACrB,MAAIJ,EAAgBC,CAAI,KAAGM,EAAY,EAAE,MAAAN,GAAM;AAAA,IACjD,CAAC,IACA,CAACG,CAAS,CAAC,GAEPE;AAAA,EACT;AACF;AAEA,SAASE,EAAgBL,GAAc;AACrC,MAAIM,IAAU;AACd,SAAO,WAAyB;AAC9B,UAAMC,IAAMP,EAAE,OAAsB,IAAI;AACxC,WAAIO,EAAI,YAAY,SAAMA,EAAI,UAAU,KAAKD,GAAS,MAC/CC,EAAI;AAAA,EACb;AACF;AAGO,SAASC,EAAYR,GAAc;AACxC,SAAO;AAAA,IACL,sBACEA,EAAE,wBAAwBD,EAA+BC,CAAC;AAAA,IAC5D,OAAOA,EAAE,SAASK,EAAgBL,CAAC;AAAA,IACnC,oBAAoBA,EAAE,sBAAsBA,EAAE;AAAA,IAC9C,iBAAiBA,EAAE,oBAAoB,CAACS,MAAmBA,EAAA;AAAA,IAC3D,eACET,EAAE,kBACD,MAA2C,CAAC,IAAO,CAACS,MAAOA,EAAA,CAAI;AAAA,IAClE,kBAAkBT,EAAE,qBAAqB,CAAIG,MAAgBA;AAAA,EAAA;AAEjE;"}

package/dist/compat-shims-CO9JXXV4.cjs

@@ -0,0 +1,2 @@
+"use strict";function a(e){try{return!Object.is(e.value,e.getSnapshot())}catch{return!0}}function f(e){return function(u,n){const s=n(),[{inst:r},c]=e.useState({inst:{value:s,getSnapshot:n}});return e.useLayoutEffect(()=>{r.value=s,r.getSnapshot=n,a(r)&&c({inst:r})},[u,s,n]),e.useEffect(()=>(a(r)&&c({inst:r}),u(()=>{a(r)&&c({inst:r})})),[u]),s}}function i(e){let t=0;return function(){const n=e.useRef(null);return n.current===null&&(n.current=`:r${t++}:`),n.current}}function o(e){return{useSyncExternalStore:e.useSyncExternalStore??f(e),useId:e.useId??i(e),useInsertionEffect:e.useInsertionEffect??e.useLayoutEffect,startTransition:e.startTransition??(t=>t()),useTransition:e.useTransition??(()=>[!1,t=>t()]),useDeferredValue:e.useDeferredValue??(t=>t)}}exports.createShims=o;
+//# sourceMappingURL=compat-shims-CO9JXXV4.cjs.map

package/dist/compat-shims-CO9JXXV4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat-shims-CO9JXXV4.cjs","sources":["../src/compat-shims.ts"],"sourcesContent":null,"names":["snapshotChanged","inst","createUseSyncExternalStoreShim","R","subscribe","getSnapshot","value","forceUpdate","createUseIdShim","counter","ref","createShims","cb"],"mappings":"aAmBA,SAASA,EAAmBC,EAAmD,CAC7E,GAAI,CACF,MAAO,CAAC,OAAO,GAAGA,EAAK,MAAOA,EAAK,aAAa,CAClD,MAAQ,CACN,MAAO,EACT,CACF,CAEA,SAASC,EAA+BC,EAAc,CACpD,OAAO,SACLC,EACAC,EACG,CACH,MAAMC,EAAQD,EAAA,EACR,CAAC,CAAE,KAAAJ,GAAQM,CAAW,EAAIJ,EAAE,SAAS,CAAE,KAAM,CAAE,MAAAG,EAAO,YAAAD,CAAA,EAAe,EAE3E,OAAAF,EAAE,gBAAgB,IAAM,CACtBF,EAAK,MAAQK,EACbL,EAAK,YAAcI,EACfL,EAAgBC,CAAI,GAAGM,EAAY,CAAE,KAAAN,EAAM,CACjD,EAAG,CAACG,EAAWE,EAAOD,CAAW,CAAC,EAElCF,EAAE,UAAU,KACNH,EAAgBC,CAAI,GAAGM,EAAY,CAAE,KAAAN,EAAM,EACxCG,EAAU,IAAM,CACjBJ,EAAgBC,CAAI,GAAGM,EAAY,CAAE,KAAAN,EAAM,CACjD,CAAC,GACA,CAACG,CAAS,CAAC,EAEPE,CACT,CACF,CAEA,SAASE,EAAgBL,EAAc,CACrC,IAAIM,EAAU,EACd,OAAO,UAAyB,CAC9B,MAAMC,EAAMP,EAAE,OAAsB,IAAI,EACxC,OAAIO,EAAI,UAAY,OAAMA,EAAI,QAAU,KAAKD,GAAS,KAC/CC,EAAI,OACb,CACF,CAGO,SAASC,EAAYR,EAAc,CACxC,MAAO,CACL,qBACEA,EAAE,sBAAwBD,EAA+BC,CAAC,EAC5D,MAAOA,EAAE,OAASK,EAAgBL,CAAC,EACnC,mBAAoBA,EAAE,oBAAsBA,EAAE,gBAC9C,gBAAiBA,EAAE,kBAAqBS,GAAmBA,EAAA,GAC3D,cACET,EAAE,gBACD,IAA2C,CAAC,GAAQS,GAAOA,EAAA,CAAI,GAClE,iBAAkBT,EAAE,mBAAyBG,GAAgBA,EAAA,CAEjE"}

package/dist/compat-shims.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Polyfill factories for React 18 APIs. Shared by compat.ts (runtime patching)
+ * and react-shim.ts (bundler-level replacement). This module must NOT import
+ * from 'react' to avoid circular dependencies when the Vite plugin is active.
+ */
+interface ReactLike {
+    useState: typeof import('react').useState;
+    useEffect: typeof import('react').useEffect;
+    useLayoutEffect: typeof import('react').useLayoutEffect;
+    useRef: typeof import('react').useRef;
+    useSyncExternalStore?: typeof import('react').useSyncExternalStore;
+    useId?: typeof import('react').useId;
+    useInsertionEffect?: typeof import('react').useInsertionEffect;
+    startTransition?: typeof import('react').startTransition;
+    useTransition?: typeof import('react').useTransition;
+    useDeferredValue?: typeof import('react').useDeferredValue;
+}
+/** Build polyfills for a React instance. Native APIs take precedence via ??. */
+export declare function createShims(R: ReactLike): {
+    useSyncExternalStore: typeof import('react').useSyncExternalStore;
+    useId: typeof import('react').useId;
+    useInsertionEffect: typeof import('react').useLayoutEffect;
+    startTransition: typeof import('react').startTransition;
+    useTransition: typeof import('react').useTransition;
+    useDeferredValue: typeof import('react').useDeferredValue;
+};
+export {};

package/dist/compat.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Runtime React 16/17 compatibility shims.
+ *
+ * Patches the React module object with polyfills for React 18 APIs used by
+ * transitive deps (zustand, @assistant-ui/react, @tanstack/react-query).
+ * Must be imported before any modules that depend on these APIs.
+ */
+export {};

package/dist/elements.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-EMjYCXA1.cjs"),r=require("./index-iUSSoKFz.cjs");exports.Chat=e.Chat;exports.ChatHistory=e.ChatHistory;exports.ElementsProvider=e.ElementsProvider;exports.GramElementsProvider=e.ElementsProvider;exports.MODELS=e.MODELS;exports.Replay=e.Replay;exports.ShareButton=e.ShareButton;exports.defineFrontendTool=e.defineFrontendTool;exports.trackError=e.trackError;exports.useRecordCassette=e.useRecordCassette;exports.useThreadId=e.useThreadId;exports.useElements=r.useElements;exports.useGramElements=r.useElements;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-wBHCO1r-.cjs"),r=require("./index-iUSSoKFz.cjs");exports.Chat=e.Chat;exports.ChatHistory=e.ChatHistory;exports.ElementsProvider=e.ElementsProvider;exports.GramElementsProvider=e.ElementsProvider;exports.MODELS=e.MODELS;exports.Replay=e.Replay;exports.ShareButton=e.ShareButton;exports.defineFrontendTool=e.defineFrontendTool;exports.trackError=e.trackError;exports.useRecordCassette=e.useRecordCassette;exports.useThreadId=e.useThreadId;exports.useElements=r.useElements;exports.useGramElements=r.useElements;
 //# sourceMappingURL=elements.cjs.map

package/dist/elements.js

@@ -1,4 +1,4 @@
-import { aa as s, ab as r, a8 as t, a8 as o, ah as d, ad as m, ac as n, af as u, ag as l, ae as E, a9 as h } from "./index-B9hEyUXQ.js";
+import { aa as s, ab as r, a8 as t, a8 as o, ah as d, ad as m, ac as n, af as u, ag as l, ae as E, a9 as h } from "./index-DDb23655.js";
 import { u as i, u as c } from "./index-CtyV0c-T.js";
 export {
   s as Chat,