@assistant-ui/react-streamdown 0.0.0

package/src/__tests__/defaults.test.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect } from "vitest";
+import { mergePlugins, DEFAULT_SHIKI_THEME } from "../defaults";
+import type { PluginConfig, ResolvedPluginConfig } from "../types";
+
+describe("DEFAULT_SHIKI_THEME", () => {
+  it("has light and dark theme", () => {
+    expect(DEFAULT_SHIKI_THEME).toEqual(["github-light", "github-dark"]);
+  });
+});
+
+describe("mergePlugins", () => {
+  const mockCodePlugin = { type: "code" };
+  const mockMathPlugin = { type: "math" };
+  const mockCjkPlugin = { type: "cjk" };
+  const mockMermaidPlugin = { type: "mermaid" };
+
+  it("returns empty object when no plugins provided or detected", () => {
+    const result = mergePlugins(undefined, {});
+    expect(result).toEqual({});
+  });
+
+  it("uses default plugins when user provides undefined", () => {
+    const defaults: ResolvedPluginConfig = {
+      code: mockCodePlugin,
+      math: mockMathPlugin,
+    };
+    const result = mergePlugins(undefined, defaults);
+    expect(result).toEqual({
+      code: mockCodePlugin,
+      math: mockMathPlugin,
+    });
+  });
+
+  it("uses user plugins over defaults", () => {
+    const userCode = { type: "user-code" };
+    const userPlugins: PluginConfig = { code: userCode };
+    const defaults: ResolvedPluginConfig = { code: mockCodePlugin };
+
+    const result = mergePlugins(userPlugins, defaults);
+    expect(result.code).toBe(userCode);
+  });
+
+  it("disables plugin when set to false", () => {
+    const userPlugins: PluginConfig = { code: false };
+    const defaults: ResolvedPluginConfig = { code: mockCodePlugin };
+
+    const result = mergePlugins(userPlugins, defaults);
+    expect(result.code).toBeUndefined();
+  });
+
+  it("allows mixing user plugins with defaults", () => {
+    const userMath = { type: "user-math" };
+    const userPlugins: PluginConfig = {
+      code: false,
+      math: userMath,
+    };
+    const defaults: ResolvedPluginConfig = {
+      code: mockCodePlugin,
+      cjk: mockCjkPlugin,
+    };
+
+    const result = mergePlugins(userPlugins, defaults);
+    expect(result).toEqual({
+      math: userMath,
+      cjk: mockCjkPlugin,
+    });
+  });
+
+  it("includes mermaid only when explicitly provided", () => {
+    const userPlugins: PluginConfig = { mermaid: mockMermaidPlugin };
+    const defaults: ResolvedPluginConfig = { code: mockCodePlugin };
+
+    const result = mergePlugins(userPlugins, defaults);
+    expect(result).toEqual({
+      code: mockCodePlugin,
+      mermaid: mockMermaidPlugin,
+    });
+  });
+
+  it("does not include mermaid from defaults", () => {
+    // mermaid should never be in defaults, but even if it were,
+    // it should not be auto-enabled
+    const defaults: ResolvedPluginConfig = {
+      code: mockCodePlugin,
+    };
+
+    const result = mergePlugins(undefined, defaults);
+    expect(result.mermaid).toBeUndefined();
+  });
+
+  it("excludes mermaid when set to false", () => {
+    const userPlugins: PluginConfig = { mermaid: false };
+    const result = mergePlugins(userPlugins, {});
+    expect(result.mermaid).toBeUndefined();
+  });
+});

package/src/__tests__/index.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import {
+  StreamdownTextPrimitive,
+  useIsStreamdownCodeBlock,
+  useStreamdownPreProps,
+  memoCompareNodes,
+  DEFAULT_SHIKI_THEME,
+  parseMarkdownIntoBlocks,
+  StreamdownContext,
+} from "../index";
+
+describe("package exports", () => {
+  it("exports StreamdownTextPrimitive", () => {
+    expect(StreamdownTextPrimitive).toBeDefined();
+  });
+
+  it("exports useIsStreamdownCodeBlock", () => {
+    expect(useIsStreamdownCodeBlock).toBeDefined();
+  });
+
+  it("exports useStreamdownPreProps", () => {
+    expect(useStreamdownPreProps).toBeDefined();
+  });
+
+  it("exports memoCompareNodes", () => {
+    expect(memoCompareNodes).toBeDefined();
+  });
+
+  it("exports DEFAULT_SHIKI_THEME with correct values", () => {
+    expect(DEFAULT_SHIKI_THEME).toEqual(["github-light", "github-dark"]);
+  });
+
+  it("exports parseMarkdownIntoBlocks as a function", () => {
+    expect(typeof parseMarkdownIntoBlocks).toBe("function");
+  });
+
+  it("exports StreamdownContext", () => {
+    expect(StreamdownContext).toBeDefined();
+  });
+});

package/src/__tests__/memoization.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from "vitest";
+import { createElement } from "react";
+import { memoCompareNodes } from "../memoization";
+
+describe("memoCompareNodes", () => {
+  it("returns true for identical props", () => {
+    const props = { className: "test", id: "foo" };
+    expect(memoCompareNodes(props, props)).toBe(true);
+  });
+
+  it("returns true for equal primitive props", () => {
+    const prev = { className: "test", count: 5 };
+    const next = { className: "test", count: 5 };
+    expect(memoCompareNodes(prev, next)).toBe(true);
+  });
+
+  it("returns false for different primitive props", () => {
+    const prev = { className: "test", count: 5 };
+    const next = { className: "test", count: 6 };
+    expect(memoCompareNodes(prev, next)).toBe(false);
+  });
+
+  it("returns false for different number of props", () => {
+    const prev = { className: "test" };
+    const next = { className: "test", id: "foo" };
+    expect(memoCompareNodes(prev, next)).toBe(false);
+  });
+
+  it("returns true for same string children", () => {
+    const prev = { children: "hello" };
+    const next = { children: "hello" };
+    expect(memoCompareNodes(prev, next)).toBe(true);
+  });
+
+  it("returns false for different string children", () => {
+    const prev = { children: "hello" };
+    const next = { children: "world" };
+    expect(memoCompareNodes(prev, next)).toBe(false);
+  });
+
+  it("returns true for null children", () => {
+    const prev = { children: null };
+    const next = { children: null };
+    expect(memoCompareNodes(prev, next)).toBe(true);
+  });
+
+  it("returns true for same React element type and key", () => {
+    const child = createElement("div", { key: "1" }, "content");
+    const prev = { children: child };
+    const next = { children: child };
+    expect(memoCompareNodes(prev, next)).toBe(true);
+  });
+
+  it("returns true for equivalent React elements (same type and key)", () => {
+    const prev = { children: createElement("div", { key: "1" }) };
+    const next = { children: createElement("div", { key: "1" }) };
+    expect(memoCompareNodes(prev, next)).toBe(true);
+  });
+
+  it("returns false for different React element types", () => {
+    const prev = { children: createElement("div", { key: "1" }) };
+    const next = { children: createElement("span", { key: "1" }) };
+    expect(memoCompareNodes(prev, next)).toBe(false);
+  });
+
+  it("returns false for different React element keys", () => {
+    const prev = { children: createElement("div", { key: "1" }) };
+    const next = { children: createElement("div", { key: "2" }) };
+    expect(memoCompareNodes(prev, next)).toBe(false);
+  });
+});

package/src/adapters/PreOverride.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import type { Element } from "hast";
+import {
+  type ComponentPropsWithoutRef,
+  createContext,
+  memo,
+  useContext,
+} from "react";
+import { memoCompareNodes } from "../memoization";
+
+type PreOverrideProps = ComponentPropsWithoutRef<"pre"> & {
+  node?: Element | undefined;
+};
+
+/**
+ * Context that indicates we're inside a <pre> element (code block).
+ * Used by code adapter to distinguish inline code from block code.
+ */
+export const PreContext = createContext<PreOverrideProps | null>(null);
+
+/**
+ * Hook to check if the current code element is inside a code block.
+ * Returns true if inside a <pre> (code block), false if inline code.
+ */
+export function useIsStreamdownCodeBlock(): boolean {
+  return useContext(PreContext) !== null;
+}
+
+/**
+ * Hook to get the pre element props when inside a code block.
+ * Returns null if not inside a code block.
+ */
+export function useStreamdownPreProps(): PreOverrideProps | null {
+  return useContext(PreContext);
+}
+
+/**
+ * Pre component override that provides context for child code elements.
+ * This enables reliable inline vs block code detection.
+ */
+export const PreOverride = memo(function PreOverride({
+  children,
+  node,
+  ...rest
+}: PreOverrideProps) {
+  return (
+    <PreContext.Provider value={{ node, ...rest }}>
+      <pre {...rest}>{children}</pre>
+    </PreContext.Provider>
+  );
+}, memoCompareNodes);

package/src/adapters/code-adapter.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import type { Element } from "hast";
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  isValidElement,
+  memo,
+  type ReactNode,
+} from "react";
+import type {
+  CodeHeaderProps,
+  ComponentsByLanguage,
+  SyntaxHighlighterProps,
+} from "../types";
+import { useIsStreamdownCodeBlock } from "./PreOverride";
+
+const LANGUAGE_REGEX = /language-([^\s]+)/;
+
+type CodeProps = ComponentPropsWithoutRef<"code"> & {
+  node?: Element | undefined;
+};
+
+type PreProps = ComponentPropsWithoutRef<"pre"> & {
+  node?: Element | undefined;
+};
+
+interface CodeAdapterOptions {
+  SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps> | undefined;
+  CodeHeader?: ComponentType<CodeHeaderProps> | undefined;
+  componentsByLanguage?: ComponentsByLanguage | undefined;
+}
+
+/**
+ * Extracts code string from children.
+ */
+function extractCode(children: unknown): string {
+  if (typeof children === "string") return children;
+  if (!isValidElement(children)) return "";
+
+  const props = children.props as Record<string, unknown> | null;
+  if (props && typeof props["children"] === "string") {
+    return props["children"];
+  }
+  return "";
+}
+
+function DefaultPre({ node: _, ...props }: PreProps): ReactNode {
+  return <pre {...props} />;
+}
+
+function DefaultCode({ node: _, ...props }: CodeProps): ReactNode {
+  return <code {...props} />;
+}
+
+/**
+ * Creates a code component adapter that bridges the assistant-ui
+ * SyntaxHighlighter/CodeHeader API to streamdown's code component.
+ */
+export function createCodeAdapter(options: CodeAdapterOptions) {
+  const {
+    SyntaxHighlighter: UserSyntaxHighlighter,
+    CodeHeader: UserCodeHeader,
+    componentsByLanguage = {},
+  } = options;
+
+  /**
+   * Inner component that uses the hook for inline/block detection.
+   */
+  function AdaptedCodeInner({
+    node,
+    className,
+    children,
+    ...props
+  }: CodeProps) {
+    // Use context-based detection for inline vs block code
+    const isCodeBlock = useIsStreamdownCodeBlock();
+
+    if (!isCodeBlock) {
+      // Inline code - render as simple code element
+      return (
+        <code
+          className={`aui-streamdown-inline-code ${className ?? ""}`.trim()}
+          {...props}
+        >
+          {children}
+        </code>
+      );
+    }
+
+    // Block code - extract language and code content
+    const match = className?.match(LANGUAGE_REGEX);
+    const language = match?.[1] ?? "";
+    const code = extractCode(children);
+
+    // Get language-specific or fallback components
+    const SyntaxHighlighter =
+      componentsByLanguage[language]?.SyntaxHighlighter ??
+      UserSyntaxHighlighter;
+
+    const CodeHeader =
+      componentsByLanguage[language]?.CodeHeader ?? UserCodeHeader;
+
+    // If user provided custom SyntaxHighlighter, use it
+    if (SyntaxHighlighter) {
+      return (
+        <>
+          {CodeHeader && (
+            <CodeHeader node={node} language={language} code={code} />
+          )}
+          <SyntaxHighlighter
+            node={node}
+            components={{ Pre: DefaultPre, Code: DefaultCode }}
+            language={language}
+            code={code}
+          />
+        </>
+      );
+    }
+
+    // No custom SyntaxHighlighter - return null to let streamdown handle it
+    // This signals to the adapter that we should use streamdown's default
+    return null;
+  }
+
+  const AdaptedCode = memo(AdaptedCodeInner, (prev, next) => {
+    return (
+      prev.className === next.className &&
+      prev.children === next.children &&
+      prev.node?.position?.start.line === next.node?.position?.start.line &&
+      prev.node?.position?.end.line === next.node?.position?.end.line
+    );
+  });
+
+  return AdaptedCode;
+}
+
+/**
+ * Checks if the code adapter should be used (i.e., user provided custom components).
+ */
+export function shouldUseCodeAdapter(options: CodeAdapterOptions): boolean {
+  return !!(
+    options.SyntaxHighlighter ||
+    options.CodeHeader ||
+    (options.componentsByLanguage &&
+      Object.keys(options.componentsByLanguage).length > 0)
+  );
+}

package/src/adapters/components-adapter.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useMemo } from "react";
+import type { StreamdownProps } from "streamdown";
+import { createCodeAdapter, shouldUseCodeAdapter } from "./code-adapter";
+import { PreOverride } from "./PreOverride";
+import type { ComponentsByLanguage, StreamdownTextComponents } from "../types";
+
+interface UseAdaptedComponentsOptions {
+  components?: StreamdownTextComponents | undefined;
+  componentsByLanguage?: ComponentsByLanguage | undefined;
+}
+
+/**
+ * Hook that adapts assistant-ui component API to streamdown's component API.
+ *
+ * Handles:
+ * - SyntaxHighlighter -> custom code component
+ * - CodeHeader -> custom code component
+ * - componentsByLanguage -> custom code component with language dispatch
+ * - PreOverride -> context-based inline/block code detection
+ */
+export function useAdaptedComponents({
+  components,
+  componentsByLanguage,
+}: UseAdaptedComponentsOptions): StreamdownProps["components"] {
+  return useMemo(() => {
+    const { SyntaxHighlighter, CodeHeader, ...htmlComponents } =
+      components ?? {};
+
+    const codeAdapterOptions = {
+      SyntaxHighlighter,
+      CodeHeader,
+      componentsByLanguage,
+    };
+
+    const baseComponents = { pre: PreOverride };
+
+    if (!shouldUseCodeAdapter(codeAdapterOptions)) {
+      return { ...htmlComponents, ...baseComponents };
+    }
+
+    const AdaptedCode = createCodeAdapter(codeAdapterOptions);
+
+    return {
+      ...htmlComponents,
+      ...baseComponents,
+      code: (props) => AdaptedCode(props) ?? undefined,
+    };
+  }, [components, componentsByLanguage]);
+}

package/src/defaults.ts

@@ -0,0 +1,46 @@
+"use client";
+
+import type { BundledTheme } from "streamdown";
+import type { PluginConfig, ResolvedPluginConfig } from "./types";
+
+/**
+ * Default Shiki theme for code highlighting.
+ * First value is light theme, second is dark theme.
+ */
+export const DEFAULT_SHIKI_THEME: [BundledTheme, BundledTheme] = [
+  "github-light",
+  "github-dark",
+];
+
+const PLUGIN_KEYS = ["code", "math", "cjk"] as const;
+
+/**
+ * Merges user plugin configuration with detected defaults.
+ *
+ * Rules:
+ * - `false` = explicitly disable a plugin
+ * - `undefined` = use default (auto-detect)
+ * - plugin instance = use provided plugin
+ * - mermaid requires explicit enabling (not auto-detected)
+ */
+export function mergePlugins(
+  userPlugins: PluginConfig | undefined,
+  defaultPlugins: ResolvedPluginConfig,
+): ResolvedPluginConfig {
+  const result: Record<string, unknown> = {};
+
+  for (const key of PLUGIN_KEYS) {
+    const userValue = userPlugins?.[key];
+    if (userValue === false) continue;
+    const value = userValue || defaultPlugins[key];
+    if (value) result[key] = value;
+  }
+
+  // Mermaid requires explicit enabling (not auto-detected)
+  const mermaid = userPlugins?.mermaid;
+  if (mermaid && mermaid !== false) {
+    result["mermaid"] = mermaid;
+  }
+
+  return result as ResolvedPluginConfig;
+}

package/src/index.ts

@@ -0,0 +1,45 @@
+export { StreamdownTextPrimitive } from "./primitives/StreamdownText";
+export {
+  useIsStreamdownCodeBlock,
+  useStreamdownPreProps,
+} from "./adapters/PreOverride";
+export { DEFAULT_SHIKI_THEME } from "./defaults";
+export { memoCompareNodes } from "./memoization";
+
+export type {
+  StreamdownTextPrimitiveProps,
+  SyntaxHighlighterProps,
+  CodeHeaderProps,
+  ComponentsByLanguage,
+  StreamdownTextComponents,
+  PluginConfig,
+  ResolvedPluginConfig,
+  CaretStyle,
+  ControlsConfig,
+  LinkSafetyConfig,
+  LinkSafetyModalProps,
+  RemendConfig,
+  RemendHandler,
+  MermaidOptions,
+  MermaidErrorComponentProps,
+  AllowedTags,
+  RemarkRehypeOptions,
+  BlockProps,
+  SecurityConfig,
+} from "./types";
+
+// Re-export streamdown context and utilities
+export { StreamdownContext, parseMarkdownIntoBlocks } from "streamdown";
+
+// Re-export streamdown types
+export type {
+  StreamdownProps,
+  CodeHighlighterPlugin,
+  DiagramPlugin,
+  MathPlugin,
+  CjkPlugin,
+  HighlightOptions,
+} from "streamdown";
+
+// Re-export shiki types from streamdown
+export type { BundledTheme, BundledLanguage } from "streamdown";

package/src/memoization.ts

@@ -0,0 +1,38 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+type ReactElement = { type: unknown; key: unknown };
+
+function isReactElement(node: unknown): node is ReactElement {
+  return (
+    typeof node === "object" && node !== null && "type" in node && "key" in node
+  );
+}
+
+/**
+ * Compares two ReactNode values for shallow equality.
+ */
+function compareNodes(a: ReactNode, b: ReactNode): boolean {
+  if (a === b) return true;
+  if (!isReactElement(a) || !isReactElement(b)) return false;
+  return a.type === b.type && a.key === b.key;
+}
+
+/**
+ * Memo comparison function for components with children prop.
+ * Inspired by react-markdown's approach.
+ */
+export function memoCompareNodes<
+  T extends { children?: ReactNode; [key: string]: unknown },
+>(prev: Readonly<T>, next: Readonly<T>): boolean {
+  const prevKeys = Object.keys(prev).filter((k) => k !== "children");
+  const nextKeys = Object.keys(next).filter((k) => k !== "children");
+
+  if (prevKeys.length !== nextKeys.length) return false;
+  for (const key of prevKeys) {
+    if (prev[key] !== next[key]) return false;
+  }
+
+  return compareNodes(prev.children, next.children);
+}