@ai-react-markdown/core 1.4.0 → 1.4.2

package/README.md

@@ -95,7 +95,7 @@ function StreamingChat({ content, isStreaming }: { content: string; isStreaming:
 | `customComponents`     | `AIMarkdownCustomComponents`     | `undefined`                     | `react-markdown` component overrides for specific HTML elements.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `Typography`           | `AIMarkdownTypographyComponent`  | `DefaultTypography`             | Typography wrapper component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | `ExtraStyles`          | `AIMarkdownExtraStylesComponent` | `undefined`                     | Optional extra style wrapper rendered between typography and content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `documentId`           | `string`                         | auto via `useId()`              | Stable id for the _logical markdown document_ this `<AIMarkdown>` is rendering. Used as the id namespace for clobberable attributes (`id`, hash hrefs) so two documents on the same page do not cross-link (footnote `[^1]` in message A won't scroll to `[^1]` in message B). When one document is split into chunks rendered by multiple `<AIMarkdown>` instances, pass the SAME `documentId` to every chunk so prefixes align. The value is passed through `encodeURIComponent` before being injected into HTML attributes, so any string is safe (React's `useId()` output, your own opaque ids, user-supplied UUIDs). |
+| `documentId`           | `string`                         | auto via `useId()`              | Stable id for the _logical markdown document_ this `<AIMarkdown>` is rendering. Used as the id namespace for clobberable attributes (`id`, hash hrefs) so two documents on the same page do not cross-link (footnote `[^1]` in message A won't scroll to `[^1]` in message B). When one document is split into chunks rendered by multiple `<AIMarkdown>` instances, pass the SAME `documentId` to every chunk so prefixes align. The value is passed through `encodeURIComponent` before being injected into HTML attributes, so any string is safe (React's `useId()` output, your own opaque ids, user-supplied UUIDs). Long ids (>16 chars, e.g. UUIDs) are hashed via MurmurHash3 to a short Base62 form **inside the rendered `id="…"`/`href="#…"` prefix only** to keep HTML compact; `state.documentId` itself and registry keying via `useDocumentRegistry` stay raw, so deep linking and any consumer code reading `documentId` are unaffected. |
 
 ## Configuration
 
@@ -220,7 +220,7 @@ function CustomCodeBlock({ children }: PropsWithChildren) {
 | `variant`       | `AIMarkdownVariant`     | Active typography variant.                                                                                                                                                                                                |
 | `colorScheme`   | `AIMarkdownColorScheme` | Active color scheme.                                                                                                                                                                                                      |
 | `documentId`    | `string`                | Stable id for the logical markdown document — caller-supplied or auto-generated via `useId()`.                                                                                                                            |
-| `clobberPrefix` | `string`                | URI-safe id prefix derived from `documentId`, used by every clobberable HTML attribute (`id=…` / `href="#…"`). Read this from the render state rather than recomputing locally when writing components that emit anchors. |
+| `clobberPrefix` | `string`                | URI-safe id prefix derived from `documentId` (with MurmurHash3 → Base62 shortening applied for >16-char ids), used by every clobberable HTML attribute (`id=…` / `href="#…"`). Read this from the render state rather than recomputing locally when writing components that emit anchors — the prefix's exact byte form is not part of the stability contract and may shift across versions. |
 | `config`        | `TConfig`               | Active render configuration (merged with defaults).                                                                                                                                                                       |
 
 ### `useAIMarkdownMetadata<TMetadata>()`

package/dist/index.cjs

@@ -1112,6 +1112,64 @@ var defaultAIMarkdownRenderConfig = Object.freeze({
   preserveOrphanReferences: true
 });
 
+// src/components/shortenDocumentId.ts
+var BASE62_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+function toBase62(n) {
+  if (n === 0) return BASE62_ALPHABET[0];
+  let v = n >>> 0;
+  let out = "";
+  while (v > 0) {
+    out = BASE62_ALPHABET[v % 62] + out;
+    v = Math.floor(v / 62);
+  }
+  return out;
+}
+function rotl32(x, r) {
+  return (x << r | x >>> 32 - r) >>> 0;
+}
+var C1 = 3432918353;
+var C2 = 461845907;
+var UTF8_ENCODER = /* @__PURE__ */ new TextEncoder();
+function murmur3_32(s, seed = 0) {
+  const bytes = UTF8_ENCODER.encode(s);
+  const len = bytes.length;
+  let h1 = seed >>> 0;
+  const nblocks = len >>> 2;
+  for (let i = 0; i < nblocks; i++) {
+    const b = i * 4;
+    let k1 = bytes[b] | bytes[b + 1] << 8 | bytes[b + 2] << 16 | bytes[b + 3] << 24;
+    k1 = Math.imul(k1, C1);
+    k1 = rotl32(k1, 15);
+    k1 = Math.imul(k1, C2);
+    h1 ^= k1;
+    h1 = rotl32(h1, 13);
+    h1 = Math.imul(h1, 5) + 3864292196 >>> 0;
+  }
+  const tail = nblocks * 4;
+  const rem = len & 3;
+  if (rem > 0) {
+    let k1 = 0;
+    if (rem === 3) k1 ^= bytes[tail + 2] << 16;
+    if (rem >= 2) k1 ^= bytes[tail + 1] << 8;
+    k1 ^= bytes[tail];
+    k1 = Math.imul(k1, C1);
+    k1 = rotl32(k1, 15);
+    k1 = Math.imul(k1, C2);
+    h1 ^= k1;
+  }
+  h1 ^= len;
+  h1 ^= h1 >>> 16;
+  h1 = Math.imul(h1, 2246822507);
+  h1 ^= h1 >>> 13;
+  h1 = Math.imul(h1, 3266489909);
+  h1 ^= h1 >>> 16;
+  return h1 >>> 0;
+}
+function shortenDocumentId(id, threshold = 16) {
+  if (id.length <= threshold) return id;
+  return toBase62(murmur3_32(id));
+}
+
 // src/context.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var AIMarkdownRenderStateContext = (0, import_react.createContext)(null);
@@ -1167,7 +1225,15 @@ var AIMarkdownRenderStateProvider = ({
       // construction site, not at the documentId storage site, so consumers
       // accessing `documentId` directly still see the raw React-native value
       // (e.g. `useId()`'s `_r_0_`) while id="..."/href="#..." bytes are safe.
-      clobberPrefix: `${encodeURIComponent(resolvedDocumentId)}-user-content-`,
+      //
+      // `shortenDocumentId` is applied here (NOT at the documentId storage
+      // site) for the same reason: consumer-supplied UUIDs and nanoids
+      // shouldn't bloat every rendered `id="…"`. Registry keying — which
+      // reads `state.documentId` directly — stays on the raw value, so the
+      // shortening is a pure HTML-output concern and the `useDocumentRegistry`
+      // API surface is unaffected. Pure function ⇒ all chunks sharing one
+      // logical documentId still produce identical prefixes.
+      clobberPrefix: `${encodeURIComponent(shortenDocumentId(resolvedDocumentId))}-user-content-`,
       config: mergedConfig
     }),
     [streaming, fontSize, variant, colorScheme, resolvedDocumentId, mergedConfig]