llm-message-react 0.1.0

package/dist/types-Dz7GupgB.d.ts

@@ -0,0 +1,133 @@
+import { ComponentType, ReactNode } from 'react';
+
+/** Props passed to a custom fenced code block renderer. */
+interface CodeBlockProps {
+    /** The raw code content (without the trailing newline). */
+    code: string;
+    /** The language detected from the fence info string (may be empty). */
+    language: string;
+    className?: string;
+}
+/** Props passed to a custom inline code renderer. */
+interface InlineCodeProps {
+    className?: string;
+    children?: ReactNode;
+}
+/** Props passed to a code-highlighter component. */
+interface CodeHighlighterProps {
+    /** The raw code content (without the trailing newline). */
+    code: string;
+    /** The language detected from the fence info string (may be empty). */
+    language: string;
+    className?: string;
+}
+/** A component that renders a syntax-highlighted code body. */
+type CodeHighlighter = ComponentType<CodeHighlighterProps>;
+/**
+ * A `codeToHtml`-compatible function. The signature is shared by `shiki`,
+ * `shiki/bundle/web`, and a `createHighlighterCore` instance's `codeToHtml`,
+ * so any of them can be passed to `createShikiHighlighter`.
+ */
+type CodeToHtml = (code: string, options: {
+    lang: string;
+    themes: {
+        light: string;
+        dark: string;
+    };
+}) => string | Promise<string>;
+/** Props passed to a custom copy button renderer. */
+interface CopyButtonProps {
+    /** The text that should be written to the clipboard. */
+    text: string;
+    className?: string;
+}
+/** Props passed to a custom task-list checkbox renderer. */
+interface CheckboxProps {
+    checked: boolean;
+    className?: string;
+}
+/** Props passed to generic block/inline element overrides. */
+interface ElementProps {
+    className?: string;
+    children?: ReactNode;
+}
+/** Props passed to a custom anchor renderer. */
+interface AnchorProps extends ElementProps {
+    href?: string;
+}
+/** Props passed to a custom image renderer. */
+interface ImageProps {
+    src?: string;
+    alt?: string;
+    title?: string;
+    className?: string;
+}
+/**
+ * Per-element class overrides. Each value is merged with the built-in
+ * semantic class name, so the default theme still applies unless overridden
+ * via CSS.
+ */
+interface LLMMessageClassNames {
+    root?: string;
+    p?: string;
+    h1?: string;
+    h2?: string;
+    h3?: string;
+    h4?: string;
+    h5?: string;
+    h6?: string;
+    ul?: string;
+    ol?: string;
+    li?: string;
+    code?: string;
+    codeBlock?: string;
+    codeHeader?: string;
+    codeLanguage?: string;
+    copyButton?: string;
+    table?: string;
+    tableWrapper?: string;
+    th?: string;
+    td?: string;
+    blockquote?: string;
+    a?: string;
+    hr?: string;
+    strong?: string;
+    em?: string;
+    del?: string;
+    img?: string;
+    checkbox?: string;
+}
+/**
+ * Per-element component overrides. When provided, the user component fully
+ * controls the markup for that element; otherwise the built-in native renderer
+ * is used.
+ */
+interface LLMMessageComponents {
+    codeBlock?: ComponentType<CodeBlockProps>;
+    code?: ComponentType<InlineCodeProps>;
+    copyButton?: ComponentType<CopyButtonProps>;
+    checkbox?: ComponentType<CheckboxProps>;
+    a?: ComponentType<AnchorProps>;
+    img?: ComponentType<ImageProps>;
+    p?: ComponentType<ElementProps>;
+    h1?: ComponentType<ElementProps>;
+    h2?: ComponentType<ElementProps>;
+    h3?: ComponentType<ElementProps>;
+    h4?: ComponentType<ElementProps>;
+    h5?: ComponentType<ElementProps>;
+    h6?: ComponentType<ElementProps>;
+    ul?: ComponentType<ElementProps>;
+    ol?: ComponentType<ElementProps>;
+    li?: ComponentType<ElementProps>;
+    blockquote?: ComponentType<ElementProps>;
+    table?: ComponentType<ElementProps>;
+    th?: ComponentType<ElementProps>;
+    td?: ComponentType<ElementProps>;
+    hr?: ComponentType<ElementProps>;
+    strong?: ComponentType<ElementProps>;
+    em?: ComponentType<ElementProps>;
+    del?: ComponentType<ElementProps>;
+    pre?: ComponentType<ElementProps>;
+}
+
+export type { AnchorProps as A, CodeHighlighter as C, ElementProps as E, ImageProps as I, LLMMessageClassNames as L, LLMMessageComponents as a, CodeToHtml as b, CheckboxProps as c, CodeBlockProps as d, CodeHighlighterProps as e, CopyButtonProps as f, InlineCodeProps as g };

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "llm-message-react",
+  "version": "0.1.0",
+  "description": "React component for rendering streaming LLM markdown, repairing incomplete tokens mid-stream, with GFM, KaTeX math and Shiki code highlighting.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Aleksandr Afonasev <dify.chrome@gmail.com>",
+  "homepage": "https://github.com/chrome/llm-message-react#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chrome/llm-message-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chrome/llm-message-react/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "react",
+    "markdown",
+    "llm",
+    "chat",
+    "ai",
+    "katex",
+    "shiki",
+    "gfm"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./shiki": {
+      "types": "./dist/highlighters/shiki.d.ts",
+      "import": "./dist/highlighters/shiki.js",
+      "require": "./dist/highlighters/shiki.cjs"
+    },
+    "./shiki-web": {
+      "types": "./dist/highlighters/shikiWeb.d.ts",
+      "import": "./dist/highlighters/shikiWeb.js",
+      "require": "./dist/highlighters/shikiWeb.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "shiki": ">=1"
+  },
+  "peerDependenciesMeta": {
+    "shiki": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "katex": "^0.16.22",
+    "react-markdown": "^10.1.0",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "eslint": "^10.6.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "shiki": "^4.3.0",
+    "tsup": "^8.5.1",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.62.0",
+    "vitest": "^4.1.9"
+  }
+}