streaming-markdown-react 0.1.4

package/dist/index.js

@@ -0,0 +1,537 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CodeBlock: () => CodeBlock,
+  MessageBlockRenderer: () => MessageBlockRenderer,
+  MessageBlockStatus: () => MessageBlockStatus,
+  MessageBlockStore: () => MessageBlockStore,
+  MessageBlockType: () => MessageBlockType,
+  MessageItem: () => MessageItem,
+  MessageStatus: () => MessageStatus,
+  StreamingMarkdown: () => StreamingMarkdown,
+  messageBlockStore: () => messageBlockStore,
+  useShikiHighlight: () => useShikiHighlight,
+  useSmoothStream: () => useSmoothStream
+});
+module.exports = __toCommonJS(index_exports);
+
+// 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
+var import_react3 = require("react");
+var import_react_markdown = __toESM(require("react-markdown"));
+var import_remark_gfm = __toESM(require("remark-gfm"));
+
+// src/hooks/useSmoothStream.ts
+var import_react = require("react");
+var segmenter = new Intl.Segmenter(["en", "zh", "ja", "ru", "fr", "de"], {
+  granularity: "grapheme"
+});
+function useSmoothStream({
+  onUpdate,
+  streamDone,
+  minDelay = 10,
+  initialText = "",
+  onComplete
+}) {
+  const chunkQueueRef = (0, import_react.useRef)([]);
+  const displayedTextRef = (0, import_react.useRef)(initialText);
+  const lastUpdateTimeRef = (0, import_react.useRef)(0);
+  const animationFrameRef = (0, import_react.useRef)(null);
+  const completedRef = (0, import_react.useRef)(false);
+  const onUpdateRef = (0, import_react.useRef)(onUpdate);
+  const onCompleteRef = (0, import_react.useRef)(onComplete);
+  const streamDoneRef = (0, import_react.useRef)(streamDone);
+  const minDelayRef = (0, import_react.useRef)(minDelay);
+  (0, import_react.useEffect)(() => {
+    onUpdateRef.current = onUpdate;
+  }, [onUpdate]);
+  (0, import_react.useEffect)(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
+  const renderLoopRef = (0, import_react.useRef)(null);
+  (0, import_react.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]);
+  (0, import_react.useEffect)(() => {
+    minDelayRef.current = minDelay;
+  }, [minDelay]);
+  (0, import_react.useEffect)(() => {
+    if (initialText) {
+      onUpdateRef.current(initialText);
+    }
+  }, [initialText]);
+  const renderLoop = (0, import_react.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);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    renderLoopRef.current = renderLoop;
+  }, [renderLoop]);
+  const addChunk = (0, import_react.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 = (0, import_react.useCallback)((newText = "") => {
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    chunkQueueRef.current = [];
+    displayedTextRef.current = newText;
+    completedRef.current = false;
+    onUpdateRef.current(newText);
+  }, []);
+  (0, import_react.useEffect)(
+    () => () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    },
+    []
+  );
+  return { addChunk, reset };
+}
+
+// src/hooks/useShikiHighlight.ts
+var import_react2 = require("react");
+var import_core = require("shiki/core");
+var import_javascript = require("shiki/engine/javascript");
+var highlighterPromise;
+async function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = (0, import_core.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: (0, import_javascript.createJavaScriptRegexEngine)()
+    });
+  }
+  return highlighterPromise;
+}
+function useShikiHighlight({
+  code,
+  language = "text",
+  theme = "light"
+}) {
+  const [html, setHtml] = (0, import_react2.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
+  const [error, setError] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    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
+var import_jsx_runtime = require("react/jsx-runtime");
+function CodeBlock({
+  code,
+  language = "text",
+  className,
+  theme = "light"
+}) {
+  const { html, isLoading } = useShikiHighlight({ code, language, theme });
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { "data-language": language, children: code }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      dangerouslySetInnerHTML: { __html: html },
+      className,
+      style: {
+        borderRadius: "8px",
+        overflow: "auto"
+      }
+    }
+  );
+}
+
+// src/components/Markdown/StreamingMarkdown.tsx
+var import_jsx_runtime2 = require("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] = (0, import_react3.useState)(status !== "streaming" ? markdown : "");
+  const previousChildrenRef = (0, import_react3.useRef)(status !== "streaming" ? markdown : "");
+  console.log("StreamingMarkdown children:", markdown);
+  const { addChunk, reset } = useSmoothStream({
+    onUpdate: setDisplayedText,
+    streamDone: status !== "streaming",
+    minDelay,
+    initialText: status !== "streaming" ? markdown : "",
+    onComplete
+  });
+  (0, import_react3.useEffect)(() => {
+    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 = (0, import_react3.useMemo)(() => {
+    const baseComponents = {
+      code: (props) => {
+        const { node, inline, className: className2, children: children2, ...rest } = props;
+        if (inline) {
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(CodeBlock, { code, language, className: className2 });
+      },
+      pre: (props) => {
+        const { children: children2, ...rest } = props;
+        if (children2?.type === CodeBlock) {
+          return children2;
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children });
+        }
+        const hasImage = props?.node?.children?.some((child) => child.tagName === "img");
+        if (hasImage) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ...props });
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { ...props });
+      }
+    };
+    if (/<style\b[^>]*>/i.test(markdown)) {
+      baseComponents.style = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ...props });
+    }
+    return { ...baseComponents, ...customComponents };
+  }, [markdown, customComponents]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_markdown.default,
+    {
+      className,
+      remarkPlugins: [import_remark_gfm.default],
+      components,
+      children: displayedText
+    }
+  );
+}
+
+// src/components/Message/MessageBlockRenderer.tsx
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)(
+        StreamingMarkdown,
+        {
+          className,
+          status: block.status === "streaming" /* STREAMING */ ? "streaming" : "success",
+          children: textBlock.content
+        }
+      );
+    }
+    case "code" /* CODE */: {
+      const codeBlock = block;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { children: codeBlock.content }) }) });
+    }
+    case "image" /* IMAGE */:
+    case "video" /* VIDEO */:
+    case "file" /* FILE */: {
+      const mediaBlock = block;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { children: JSON.stringify(toolBlock.payload ?? {}, null, 2) }) });
+    }
+    default:
+      return null;
+  }
+}
+
+// src/components/Message/MessageItem.tsx
+var import_react4 = require("react");
+var import_react_markdown2 = __toESM(require("react-markdown"));
+var import_remark_gfm2 = __toESM(require("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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function MessageItem({
+  children,
+  role = "assistant",
+  messageId,
+  className,
+  blockClassName
+}) {
+  const markdown = typeof children === "string" ? children : String(children ?? "");
+  if (role === "user") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, "data-role": "user", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_markdown2.default, { remarkPlugins: [import_remark_gfm2.default], children: markdown }) });
+  }
+  const generatedId = (0, import_react4.useId)();
+  const messageIdRef = messageId ?? generatedId;
+  const blocks = (0, import_react4.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime4.jsx)("div", { className, "data-message-id": messageIdRef, "data-role": role, children: blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageBlockRenderer, { block, className: blockClassName }, block.id)) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CodeBlock,
+  MessageBlockRenderer,
+  MessageBlockStatus,
+  MessageBlockStore,
+  MessageBlockType,
+  MessageItem,
+  MessageStatus,
+  StreamingMarkdown,
+  messageBlockStore,
+  useShikiHighlight,
+  useSmoothStream
+});