streaming-markdown-react 0.1.4

package/dist/index.mjs

@@ -0,0 +1,490 @@
+// src/types/message.ts
+var MessageStatus = /* @__PURE__ */ ((MessageStatus2) => {
+  MessageStatus2["IDLE"] = "idle";
+  MessageStatus2["STREAMING"] = "streaming";
+  MessageStatus2["SUCCESS"] = "success";
+  MessageStatus2["ERROR"] = "error";
+  return MessageStatus2;
+})(MessageStatus || {});
+var MessageBlockStatus = /* @__PURE__ */ ((MessageBlockStatus2) => {
+  MessageBlockStatus2["IDLE"] = "idle";
+  MessageBlockStatus2["STREAMING"] = "streaming";
+  MessageBlockStatus2["SUCCESS"] = "success";
+  MessageBlockStatus2["ERROR"] = "error";
+  return MessageBlockStatus2;
+})(MessageBlockStatus || {});
+var MessageBlockType = /* @__PURE__ */ ((MessageBlockType2) => {
+  MessageBlockType2["MAIN_TEXT"] = "main_text";
+  MessageBlockType2["CODE"] = "code";
+  MessageBlockType2["IMAGE"] = "image";
+  MessageBlockType2["FILE"] = "file";
+  MessageBlockType2["TOOL"] = "tool";
+  MessageBlockType2["CITATION"] = "citation";
+  MessageBlockType2["TRANSLATION"] = "translation";
+  MessageBlockType2["THINKING"] = "thinking";
+  MessageBlockType2["VIDEO"] = "video";
+  MessageBlockType2["ERROR"] = "error";
+  MessageBlockType2["UNKNOWN"] = "unknown";
+  return MessageBlockType2;
+})(MessageBlockType || {});
+
+// src/store/messageBlocks.ts
+var MessageBlockStore = class {
+  constructor() {
+    this.blocks = /* @__PURE__ */ new Map();
+  }
+  upsert(input) {
+    const list = Array.isArray(input) ? input : [input];
+    for (const block of list) {
+      this.blocks.set(block.id, block);
+    }
+  }
+  selectById(id) {
+    return this.blocks.get(id);
+  }
+  selectMany(ids) {
+    return ids.map((id) => this.blocks.get(id)).filter((block) => Boolean(block));
+  }
+  remove(input) {
+    const list = Array.isArray(input) ? input : [input];
+    for (const blockId of list) {
+      this.blocks.delete(blockId);
+    }
+  }
+  clear() {
+    this.blocks.clear();
+  }
+  selectAll() {
+    return Array.from(this.blocks.values());
+  }
+  toJSON() {
+    return Object.fromEntries(this.blocks.entries());
+  }
+};
+var messageBlockStore = new MessageBlockStore();
+
+// src/components/Markdown/StreamingMarkdown.tsx
+import { useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+// src/hooks/useSmoothStream.ts
+import { useCallback, useEffect, useRef } from "react";
+var segmenter = new Intl.Segmenter(["en", "zh", "ja", "ru", "fr", "de"], {
+  granularity: "grapheme"
+});
+function useSmoothStream({
+  onUpdate,
+  streamDone,
+  minDelay = 10,
+  initialText = "",
+  onComplete
+}) {
+  const chunkQueueRef = useRef([]);
+  const displayedTextRef = useRef(initialText);
+  const lastUpdateTimeRef = useRef(0);
+  const animationFrameRef = useRef(null);
+  const completedRef = useRef(false);
+  const onUpdateRef = useRef(onUpdate);
+  const onCompleteRef = useRef(onComplete);
+  const streamDoneRef = useRef(streamDone);
+  const minDelayRef = useRef(minDelay);
+  useEffect(() => {
+    onUpdateRef.current = onUpdate;
+  }, [onUpdate]);
+  useEffect(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
+  const renderLoopRef = useRef(null);
+  useEffect(() => {
+    streamDoneRef.current = streamDone;
+    if (streamDone) {
+      if (chunkQueueRef.current.length === 0 && !completedRef.current) {
+        completedRef.current = true;
+        onCompleteRef.current?.();
+      } else if (!animationFrameRef.current && renderLoopRef.current) {
+        animationFrameRef.current = requestAnimationFrame(renderLoopRef.current);
+      }
+    }
+  }, [streamDone]);
+  useEffect(() => {
+    minDelayRef.current = minDelay;
+  }, [minDelay]);
+  useEffect(() => {
+    if (initialText) {
+      onUpdateRef.current(initialText);
+    }
+  }, [initialText]);
+  const renderLoop = useCallback((currentTime) => {
+    const queue = chunkQueueRef.current;
+    const hasQueue = queue.length > 0;
+    if (!hasQueue) {
+      if (streamDoneRef.current && !completedRef.current) {
+        completedRef.current = true;
+        onCompleteRef.current?.();
+        animationFrameRef.current = null;
+        return;
+      }
+      animationFrameRef.current = null;
+      return;
+    }
+    if (currentTime - lastUpdateTimeRef.current < minDelayRef.current) {
+      animationFrameRef.current = requestAnimationFrame(renderLoop);
+      return;
+    }
+    lastUpdateTimeRef.current = currentTime;
+    let count = Math.max(1, Math.floor(queue.length / 5));
+    if (streamDoneRef.current) {
+      count = queue.length;
+    }
+    const next = queue.splice(0, count).join("");
+    displayedTextRef.current += next;
+    onUpdateRef.current(displayedTextRef.current);
+    animationFrameRef.current = requestAnimationFrame(renderLoop);
+  }, []);
+  useEffect(() => {
+    renderLoopRef.current = renderLoop;
+  }, [renderLoop]);
+  const addChunk = useCallback(
+    (chunk) => {
+      if (!chunk) {
+        return;
+      }
+      const segments = Array.from(segmenter.segment(chunk)).map((s) => s.segment);
+      chunkQueueRef.current.push(...segments);
+      if (!animationFrameRef.current) {
+        animationFrameRef.current = requestAnimationFrame(renderLoop);
+      }
+    },
+    [renderLoop]
+  );
+  const reset = useCallback((newText = "") => {
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    chunkQueueRef.current = [];
+    displayedTextRef.current = newText;
+    completedRef.current = false;
+    onUpdateRef.current(newText);
+  }, []);
+  useEffect(
+    () => () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    },
+    []
+  );
+  return { addChunk, reset };
+}
+
+// src/hooks/useShikiHighlight.ts
+import { useEffect as useEffect2, useState } from "react";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+var highlighterPromise;
+async function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighterCore({
+      themes: [
+        import("shiki/themes/github-light.mjs"),
+        import("shiki/themes/github-dark.mjs")
+      ],
+      langs: [
+        import("shiki/langs/javascript.mjs"),
+        import("shiki/langs/typescript.mjs"),
+        import("shiki/langs/tsx.mjs"),
+        import("shiki/langs/jsx.mjs"),
+        import("shiki/langs/python.mjs"),
+        import("shiki/langs/java.mjs"),
+        import("shiki/langs/json.mjs"),
+        import("shiki/langs/html.mjs"),
+        import("shiki/langs/css.mjs"),
+        import("shiki/langs/bash.mjs"),
+        import("shiki/langs/shell.mjs"),
+        import("shiki/langs/sql.mjs"),
+        import("shiki/langs/markdown.mjs"),
+        import("shiki/langs/go.mjs"),
+        import("shiki/langs/rust.mjs"),
+        import("shiki/langs/c.mjs"),
+        import("shiki/langs/cpp.mjs"),
+        import("shiki/langs/csharp.mjs"),
+        import("shiki/langs/php.mjs"),
+        import("shiki/langs/ruby.mjs"),
+        import("shiki/langs/swift.mjs"),
+        import("shiki/langs/kotlin.mjs"),
+        import("shiki/langs/yaml.mjs"),
+        import("shiki/langs/xml.mjs"),
+        import("shiki/langs/dockerfile.mjs")
+      ],
+      engine: createJavaScriptRegexEngine()
+    });
+  }
+  return highlighterPromise;
+}
+function useShikiHighlight({
+  code,
+  language = "text",
+  theme = "light"
+}) {
+  const [html, setHtml] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect2(() => {
+    let cancelled = false;
+    async function highlight() {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const highlighter = await getHighlighter();
+        if (cancelled) return;
+        const normalizedLang = language.toLowerCase();
+        if (cancelled) return;
+        const themeName = theme === "dark" ? "github-dark" : "github-light";
+        const highlighted = highlighter.codeToHtml(code, {
+          lang: normalizedLang,
+          theme: themeName
+        });
+        if (!cancelled) {
+          setHtml(highlighted);
+          setIsLoading(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err : new Error(String(err)));
+          setIsLoading(false);
+          setHtml(`<pre><code>${escapeHtml(code)}</code></pre>`);
+        }
+      }
+    }
+    highlight();
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, theme]);
+  return { html, isLoading, error };
+}
+function escapeHtml(unsafe) {
+  return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+
+// src/components/Markdown/CodeBlock.tsx
+import { jsx } from "react/jsx-runtime";
+function CodeBlock({
+  code,
+  language = "text",
+  className,
+  theme = "light"
+}) {
+  const { html, isLoading } = useShikiHighlight({ code, language, theme });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("pre", { className, children: /* @__PURE__ */ jsx("code", { "data-language": language, children: code }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      dangerouslySetInnerHTML: { __html: html },
+      className,
+      style: {
+        borderRadius: "8px",
+        overflow: "auto"
+      }
+    }
+  );
+}
+
+// src/components/Markdown/StreamingMarkdown.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+function StreamingMarkdown({
+  children,
+  className,
+  components: customComponents,
+  status = "idle",
+  onComplete,
+  minDelay = 10
+}) {
+  const markdown = typeof children === "string" ? children : String(children || "");
+  const [displayedText, setDisplayedText] = useState2(status !== "streaming" ? markdown : "");
+  const previousChildrenRef = useRef2(status !== "streaming" ? markdown : "");
+  console.log("StreamingMarkdown children:", markdown);
+  const { addChunk, reset } = useSmoothStream({
+    onUpdate: setDisplayedText,
+    streamDone: status !== "streaming",
+    minDelay,
+    initialText: status !== "streaming" ? markdown : "",
+    onComplete
+  });
+  useEffect3(() => {
+    const currentContent = markdown;
+    const previousContent = previousChildrenRef.current;
+    if (currentContent !== previousContent) {
+      if (currentContent.startsWith(previousContent)) {
+        const delta = currentContent.slice(previousContent.length);
+        addChunk(delta);
+      } else {
+        reset(currentContent);
+      }
+      previousChildrenRef.current = currentContent;
+    }
+  }, [markdown, addChunk, reset]);
+  const components = useMemo(() => {
+    const baseComponents = {
+      code: (props) => {
+        const { node, inline, className: className2, children: children2, ...rest } = props;
+        if (inline) {
+          return /* @__PURE__ */ jsx2("code", { className: className2, ...rest, children: children2 });
+        }
+        const match = /language-(\w+)/.exec(className2 || "");
+        const language = match ? match[1] : void 0;
+        const code = String(children2).replace(/\n$/, "");
+        return /* @__PURE__ */ jsx2(CodeBlock, { code, language, className: className2 });
+      },
+      pre: (props) => {
+        const { children: children2, ...rest } = props;
+        if (children2?.type === CodeBlock) {
+          return children2;
+        }
+        return /* @__PURE__ */ jsx2("pre", { style: { overflow: "visible" }, ...rest, children: children2 });
+      },
+      p: (props) => {
+        const hasCodeBlock = props?.node?.children?.some(
+          (child) => child.tagName === "pre" || child.tagName === "code"
+        );
+        if (hasCodeBlock) {
+          return /* @__PURE__ */ jsx2(Fragment, { children: props.children });
+        }
+        const hasImage = props?.node?.children?.some((child) => child.tagName === "img");
+        if (hasImage) return /* @__PURE__ */ jsx2("div", { ...props });
+        return /* @__PURE__ */ jsx2("p", { ...props });
+      }
+    };
+    if (/<style\b[^>]*>/i.test(markdown)) {
+      baseComponents.style = (props) => /* @__PURE__ */ jsx2("div", { ...props });
+    }
+    return { ...baseComponents, ...customComponents };
+  }, [markdown, customComponents]);
+  return /* @__PURE__ */ jsx2(
+    ReactMarkdown,
+    {
+      className,
+      remarkPlugins: [remarkGfm],
+      components,
+      children: displayedText
+    }
+  );
+}
+
+// src/components/Message/MessageBlockRenderer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function MessageBlockRenderer({ block, className }) {
+  switch (block.type) {
+    case "main_text" /* MAIN_TEXT */:
+    case "translation" /* TRANSLATION */:
+    case "thinking" /* THINKING */:
+    case "error" /* ERROR */:
+    case "unknown" /* UNKNOWN */: {
+      const textBlock = block;
+      return /* @__PURE__ */ jsx3(
+        StreamingMarkdown,
+        {
+          className,
+          status: block.status === "streaming" /* STREAMING */ ? "streaming" : "success",
+          children: textBlock.content
+        }
+      );
+    }
+    case "code" /* CODE */: {
+      const codeBlock = block;
+      return /* @__PURE__ */ jsx3("div", { className, children: /* @__PURE__ */ jsx3("pre", { children: /* @__PURE__ */ jsx3("code", { children: codeBlock.content }) }) });
+    }
+    case "image" /* IMAGE */:
+    case "video" /* VIDEO */:
+    case "file" /* FILE */: {
+      const mediaBlock = block;
+      return /* @__PURE__ */ jsx3("div", { className, children: /* @__PURE__ */ jsx3("a", { href: mediaBlock.url, target: "_blank", rel: "noopener noreferrer", children: mediaBlock.name ?? "Media File" }) });
+    }
+    case "tool" /* TOOL */:
+    case "citation" /* CITATION */: {
+      const toolBlock = block;
+      return /* @__PURE__ */ jsx3("div", { className, children: /* @__PURE__ */ jsx3("pre", { children: JSON.stringify(toolBlock.payload ?? {}, null, 2) }) });
+    }
+    default:
+      return null;
+  }
+}
+
+// src/components/Message/MessageItem.tsx
+import { useId, useMemo as useMemo2 } from "react";
+import ReactMarkdown2 from "react-markdown";
+import remarkGfm2 from "remark-gfm";
+
+// src/utils/markdown/splitMarkdownIntoBlocks.ts
+var blockIdCounter = 0;
+function generateBlockId() {
+  blockIdCounter += 1;
+  return `block-${Date.now()}-${blockIdCounter}`;
+}
+function splitMarkdownIntoBlocks({
+  messageId,
+  markdown,
+  status = "idle" /* IDLE */
+}) {
+  if (!markdown.trim()) {
+    return [];
+  }
+  const block = {
+    id: generateBlockId(),
+    messageId,
+    type: "main_text" /* MAIN_TEXT */,
+    status,
+    content: markdown,
+    createdAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  return [block];
+}
+
+// src/components/Message/MessageItem.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function MessageItem({
+  children,
+  role = "assistant",
+  messageId,
+  className,
+  blockClassName
+}) {
+  const markdown = typeof children === "string" ? children : String(children ?? "");
+  if (role === "user") {
+    return /* @__PURE__ */ jsx4("div", { className, "data-role": "user", children: /* @__PURE__ */ jsx4(ReactMarkdown2, { remarkPlugins: [remarkGfm2], children: markdown }) });
+  }
+  const generatedId = useId();
+  const messageIdRef = messageId ?? generatedId;
+  const blocks = useMemo2(() => {
+    const allBlocks = messageBlockStore.selectAll();
+    const oldBlockIds = allBlocks.filter((b) => b.messageId === messageIdRef).map((b) => b.id);
+    if (oldBlockIds.length > 0) {
+      messageBlockStore.remove(oldBlockIds);
+    }
+    const newBlocks = splitMarkdownIntoBlocks({
+      messageId: messageIdRef,
+      markdown,
+      status: "idle" /* IDLE */
+    });
+    messageBlockStore.upsert(newBlocks);
+    return newBlocks;
+  }, [markdown, messageIdRef]);
+  return /* @__PURE__ */ jsx4("div", { className, "data-message-id": messageIdRef, "data-role": role, children: blocks.map((block) => /* @__PURE__ */ jsx4(MessageBlockRenderer, { block, className: blockClassName }, block.id)) });
+}
+export {
+  CodeBlock,
+  MessageBlockRenderer,
+  MessageBlockStatus,
+  MessageBlockStore,
+  MessageBlockType,
+  MessageItem,
+  MessageStatus,
+  StreamingMarkdown,
+  messageBlockStore,
+  useShikiHighlight,
+  useSmoothStream
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "streaming-markdown-react",
+  "version": "0.1.4",
+  "description": "React component for rendering streaming markdown content",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "markdown",
+    "streaming",
+    "ai",
+    "llm"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "nanoid": "^5.0.0",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "shiki": "^3.12.2",
+    "unified": "^11.0.0",
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.3.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@vitest/coverage-v8": "^1.6.1",
+    "@vitest/ui": "^1.6.1",
+    "happy-dom": "^20.0.10",
+    "jsdom": "^24.1.3",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.6.1"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}