streaming-markdown-react 0.1.4 → 0.2.0

package/dist/index.mjs

@@ -64,8 +64,7 @@ var MessageBlockStore = class {
 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 { memo as memo3, useEffect as useEffect3, useId, useMemo, useRef as useRef2, useState as useState2 } from "react";
 import remarkGfm from "remark-gfm";
 
 // src/hooks/useSmoothStream.ts
@@ -179,6 +178,124 @@ function useSmoothStream({
   return { addChunk, reset };
 }
 
+// src/utils/markdown/parseMarkdownIntoBlocks.ts
+import { Lexer } from "marked";
+var blockIdCounter = 0;
+function generateBlockId() {
+  blockIdCounter += 1;
+  return `block-${Date.now()}-${blockIdCounter}`;
+}
+function parseMarkdownIntoBlocks(markdown) {
+  if (!markdown.trim()) {
+    return [];
+  }
+  const hasFootnoteReference = /\[\^[^\]\s]{1,200}\](?!:)/.test(markdown);
+  const hasFootnoteDefinition = /\[\^[^\]\s]{1,200}\]:/.test(markdown);
+  if (hasFootnoteReference || hasFootnoteDefinition) {
+    return [markdown];
+  }
+  const tokens = Lexer.lex(markdown, { gfm: true });
+  const mergedBlocks = [];
+  const htmlStack = [];
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i];
+    const currentBlock = token.raw;
+    if (htmlStack.length > 0) {
+      mergedBlocks[mergedBlocks.length - 1] += currentBlock;
+      if (token.type === "html") {
+        const closingTagMatch = currentBlock.match(/<\/(\w+)>/);
+        if (closingTagMatch) {
+          const closingTag = closingTagMatch[1];
+          if (htmlStack[htmlStack.length - 1] === closingTag) {
+            htmlStack.pop();
+          }
+        }
+      }
+      continue;
+    }
+    if (token.type === "html" && token.block) {
+      const openingTagMatch = currentBlock.match(/<(\w+)[\s>]/);
+      if (openingTagMatch) {
+        const tagName = openingTagMatch[1];
+        const hasClosingTag = currentBlock.includes(`</${tagName}>`);
+        if (!hasClosingTag) {
+          htmlStack.push(tagName);
+        }
+      }
+    }
+    if (currentBlock.trim() === "$" && mergedBlocks.length > 0) {
+      const previousBlock = mergedBlocks.at(-1);
+      if (!previousBlock) {
+        mergedBlocks.push(currentBlock);
+        continue;
+      }
+      const prevStartsWith$ = previousBlock.trimStart().startsWith("$");
+      const prevDollarCount = (previousBlock.match(/\$\$/g) || []).length;
+      if (prevStartsWith$ && prevDollarCount % 2 === 1) {
+        mergedBlocks[mergedBlocks.length - 1] = previousBlock + currentBlock;
+        continue;
+      }
+    }
+    if (mergedBlocks.length > 0 && currentBlock.trimEnd().endsWith("$")) {
+      const previousBlock = mergedBlocks.at(-1);
+      if (!previousBlock) {
+        mergedBlocks.push(currentBlock);
+        continue;
+      }
+      const prevStartsWith$ = previousBlock.trimStart().startsWith("$");
+      const prevDollarCount = (previousBlock.match(/\$\$/g) || []).length;
+      const currDollarCount = (currentBlock.match(/\$\$/g) || []).length;
+      if (prevStartsWith$ && prevDollarCount % 2 === 1 && !currentBlock.trimStart().startsWith("$") && currDollarCount === 1) {
+        mergedBlocks[mergedBlocks.length - 1] = previousBlock + currentBlock;
+        continue;
+      }
+    }
+    mergedBlocks.push(currentBlock);
+  }
+  return mergedBlocks;
+}
+function splitMarkdownIntoBlocks({
+  messageId,
+  markdown,
+  status = "idle" /* IDLE */
+}) {
+  const blocks = parseMarkdownIntoBlocks(markdown);
+  return blocks.map((content) => {
+    const block = {
+      id: generateBlockId(),
+      messageId,
+      type: "main_text" /* MAIN_TEXT */,
+      status,
+      content,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    return block;
+  });
+}
+
+// src/components/Markdown/Block.tsx
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import { jsx } from "react/jsx-runtime";
+var Block = memo(
+  ({ content, components, remarkPlugins, rehypePlugins, className }) => {
+    return /* @__PURE__ */ jsx(
+      ReactMarkdown,
+      {
+        className,
+        components,
+        remarkPlugins,
+        rehypePlugins,
+        children: content
+      }
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.content === nextProps.content && prevProps.className === nextProps.className;
+  }
+);
+Block.displayName = "Block";
+
 // src/hooks/useShikiHighlight.ts
 import { useEffect as useEffect2, useState } from "react";
 import { createHighlighterCore } from "shiki/core";
@@ -270,7 +387,7 @@ function escapeHtml(unsafe) {
 }
 
 // src/components/Markdown/CodeBlock.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function CodeBlock({
   code,
   language = "text",
@@ -279,9 +396,9 @@ function CodeBlock({
 }) {
   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__ */ jsx2("pre", { className, children: /* @__PURE__ */ jsx2("code", { "data-language": language, children: code }) });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       dangerouslySetInnerHTML: { __html: html },
@@ -294,89 +411,286 @@ function CodeBlock({
   );
 }
 
-// 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;
+// src/components/Markdown/MemoizedComponents.tsx
+import { memo as memo2 } from "react";
+
+// src/utils/markdown/sameNodePosition.ts
+function sameNodePosition(prev, next) {
+  if (!(prev?.position || next?.position)) {
+    return true;
+  }
+  if (!(prev?.position && next?.position)) {
+    return false;
+  }
+  const prevStart = prev.position.start;
+  const nextStart = next.position.start;
+  const prevEnd = prev.position.end;
+  const nextEnd = next.position.end;
+  return prevStart?.line === nextStart?.line && prevStart?.column === nextStart?.column && prevEnd?.line === nextEnd?.line && prevEnd?.column === nextEnd?.column;
+}
+function sameClassAndNode(prev, next) {
+  return prev.className === next.className && sameNodePosition(prev.node, next.node);
+}
+
+// src/components/Markdown/MemoizedComponents.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var MemoH1 = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("h1", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH1.displayName = "MemoH1";
+var MemoH2 = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("h2", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH2.displayName = "MemoH2";
+var MemoH3 = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("h3", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH3.displayName = "MemoH3";
+var MemoH4 = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("h4", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH4.displayName = "MemoH4";
+var MemoH5 = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("h5", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH5.displayName = "MemoH5";
+var MemoH6 = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("h6", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH6.displayName = "MemoH6";
+var MemoParagraph = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("p", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoParagraph.displayName = "MemoParagraph";
+var MemoLink = memo2(
+  ({ children, className, href, title, ...props }) => /* @__PURE__ */ jsx3(
+    "a",
+    {
+      className,
+      href,
+      title,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      ...props,
+      children
     }
-  }, [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 });
+  ),
+  (p, n) => sameClassAndNode(p, n) && p.href === n.href && p.title === n.title
+);
+MemoLink.displayName = "MemoLink";
+var MemoBlockquote = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("blockquote", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoBlockquote.displayName = "MemoBlockquote";
+var MemoList = memo2(
+  ({ children, className, ordered, start, ...props }) => {
+    if (ordered) {
+      return /* @__PURE__ */ jsx3("ol", { className, start, ...props, children });
     }
-    return { ...baseComponents, ...customComponents };
-  }, [markdown, customComponents]);
-  return /* @__PURE__ */ jsx2(
-    ReactMarkdown,
+    return /* @__PURE__ */ jsx3("ul", { className, ...props, children });
+  },
+  (p, n) => sameClassAndNode(p, n) && p.ordered === n.ordered && p.start === n.start
+);
+MemoList.displayName = "MemoList";
+var MemoListItem = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("li", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoListItem.displayName = "MemoListItem";
+var MemoTable = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("table", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoTable.displayName = "MemoTable";
+var MemoTableHead = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("thead", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoTableHead.displayName = "MemoTableHead";
+var MemoTableBody = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("tbody", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoTableBody.displayName = "MemoTableBody";
+var MemoTableRow = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("tr", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoTableRow.displayName = "MemoTableRow";
+var MemoTableCell = memo2(
+  ({ children, className, isHeader, align, ...props }) => {
+    const style = align ? { textAlign: align } : void 0;
+    if (isHeader) {
+      return /* @__PURE__ */ jsx3("th", { className, style, ...props, children });
+    }
+    return /* @__PURE__ */ jsx3("td", { className, style, ...props, children });
+  },
+  (p, n) => sameClassAndNode(p, n) && p.isHeader === n.isHeader && p.align === n.align
+);
+MemoTableCell.displayName = "MemoTableCell";
+var MemoCode = memo2(
+  ({ children, className, inline, ...props }) => {
+    if (inline) {
+      return /* @__PURE__ */ jsx3("code", { className, ...props, children });
+    }
+    return /* @__PURE__ */ jsx3("code", { className, ...props, children });
+  },
+  (p, n) => sameClassAndNode(p, n) && p.inline === n.inline
+);
+MemoCode.displayName = "MemoCode";
+var MemoPreformatted = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("pre", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoPreformatted.displayName = "MemoPreformatted";
+var MemoStrong = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("strong", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoStrong.displayName = "MemoStrong";
+var MemoEmphasis = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("em", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoEmphasis.displayName = "MemoEmphasis";
+var MemoHr = memo2(
+  ({ className, ...props }) => /* @__PURE__ */ jsx3("hr", { className, ...props }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoHr.displayName = "MemoHr";
+var MemoImage = memo2(
+  ({ className, href, title, ...props }) => /* @__PURE__ */ jsx3(
+    "img",
     {
       className,
-      remarkPlugins: [remarkGfm],
-      components,
-      children: displayedText
+      src: href,
+      alt: title ?? "",
+      title,
+      ...props
     }
-  );
-}
+  ),
+  (p, n) => sameClassAndNode(p, n) && p.href === n.href && p.title === n.title
+);
+MemoImage.displayName = "MemoImage";
+var MemoDelete = memo2(
+  ({ children, className, ...props }) => /* @__PURE__ */ jsx3("del", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoDelete.displayName = "MemoDelete";
+
+// src/components/Markdown/StreamingMarkdown.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StreamingMarkdown = memo3(
+  function StreamingMarkdown2({
+    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 : "");
+    const generatedId = useId();
+    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 blocks = useMemo(
+      () => parseMarkdownIntoBlocks(displayedText),
+      [displayedText]
+    );
+    const components = useMemo(() => {
+      const baseComponents = {
+        h1: MemoH1,
+        h2: MemoH2,
+        h3: MemoH3,
+        h4: MemoH4,
+        h5: MemoH5,
+        h6: MemoH6,
+        p: MemoParagraph,
+        a: MemoLink,
+        blockquote: MemoBlockquote,
+        ul: (props) => /* @__PURE__ */ jsx4(MemoList, { ordered: false, ...props }),
+        ol: (props) => /* @__PURE__ */ jsx4(MemoList, { ordered: true, ...props }),
+        li: MemoListItem,
+        table: MemoTable,
+        thead: MemoTableHead,
+        tbody: MemoTableBody,
+        tr: MemoTableRow,
+        th: (props) => /* @__PURE__ */ jsx4(MemoTableCell, { isHeader: true, ...props }),
+        td: MemoTableCell,
+        strong: MemoStrong,
+        em: MemoEmphasis,
+        hr: MemoHr,
+        img: (props) => /* @__PURE__ */ jsx4(MemoImage, { href: props.src, title: props.alt, ...props }),
+        del: MemoDelete,
+        code: (props) => {
+          const { node, inline, className: className2, children: children2, ...rest } = props;
+          if (inline) {
+            return /* @__PURE__ */ jsx4(MemoCode, { inline: true, className: className2, node, ...rest, children: children2 });
+          }
+          const match = /language-(\w+)/.exec(className2 || "");
+          const language = match ? match[1] : void 0;
+          const code = String(children2).replace(/\n$/, "");
+          return /* @__PURE__ */ jsx4(CodeBlock, { code, language, className: className2 });
+        },
+        pre: (props) => {
+          const { children: children2, ...rest } = props;
+          if (children2?.type === CodeBlock) {
+            return children2;
+          }
+          return /* @__PURE__ */ jsx4(MemoPreformatted, { ...rest, children: children2 });
+        }
+      };
+      if (/<style\b[^>]*>/i.test(markdown)) {
+        baseComponents.style = (props) => /* @__PURE__ */ jsx4("div", { ...props });
+      }
+      return { ...baseComponents, ...customComponents };
+    }, [markdown, customComponents]);
+    return /* @__PURE__ */ jsx4("div", { className, children: blocks.map((block, index) => /* @__PURE__ */ jsx4(
+      Block,
+      {
+        content: block,
+        components,
+        remarkPlugins: [remarkGfm]
+      },
+      `${generatedId}-block-${index}`
+    )) });
+  },
+  (prevProps, nextProps) => {
+    return prevProps.children === nextProps.children && prevProps.status === nextProps.status && prevProps.className === nextProps.className;
+  }
+);
+StreamingMarkdown.displayName = "StreamingMarkdown";
 
 // src/components/Message/MessageBlockRenderer.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function MessageBlockRenderer({ block, className }) {
   switch (block.type) {
     case "main_text" /* MAIN_TEXT */:
@@ -385,7 +699,7 @@ function MessageBlockRenderer({ block, className }) {
     case "error" /* ERROR */:
     case "unknown" /* UNKNOWN */: {
       const textBlock = block;
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx5(
         StreamingMarkdown,
         {
           className,
@@ -396,18 +710,18 @@ function MessageBlockRenderer({ block, className }) {
     }
     case "code" /* CODE */: {
       const codeBlock = block;
-      return /* @__PURE__ */ jsx3("div", { className, children: /* @__PURE__ */ jsx3("pre", { children: /* @__PURE__ */ jsx3("code", { children: codeBlock.content }) }) });
+      return /* @__PURE__ */ jsx5("div", { className, children: /* @__PURE__ */ jsx5("pre", { children: /* @__PURE__ */ jsx5("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" }) });
+      return /* @__PURE__ */ jsx5("div", { className, children: /* @__PURE__ */ jsx5("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) }) });
+      return /* @__PURE__ */ jsx5("div", { className, children: /* @__PURE__ */ jsx5("pre", { children: JSON.stringify(toolBlock.payload ?? {}, null, 2) }) });
     }
     default:
       return null;
@@ -415,17 +729,17 @@ function MessageBlockRenderer({ block, className }) {
 }
 
 // src/components/Message/MessageItem.tsx
-import { useId, useMemo as useMemo2 } from "react";
+import { useId as useId2, 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}`;
+var blockIdCounter2 = 0;
+function generateBlockId2() {
+  blockIdCounter2 += 1;
+  return `block-${Date.now()}-${blockIdCounter2}`;
 }
-function splitMarkdownIntoBlocks({
+function splitMarkdownIntoBlocks2({
   messageId,
   markdown,
   status = "idle" /* IDLE */
@@ -434,7 +748,7 @@ function splitMarkdownIntoBlocks({
     return [];
   }
   const block = {
-    id: generateBlockId(),
+    id: generateBlockId2(),
     messageId,
     type: "main_text" /* MAIN_TEXT */,
     status,
@@ -445,7 +759,7 @@ function splitMarkdownIntoBlocks({
 }
 
 // src/components/Message/MessageItem.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function MessageItem({
   children,
   role = "assistant",
@@ -455,9 +769,9 @@ function MessageItem({
 }) {
   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 }) });
+    return /* @__PURE__ */ jsx6("div", { className, "data-role": "user", children: /* @__PURE__ */ jsx6(ReactMarkdown2, { remarkPlugins: [remarkGfm2], children: markdown }) });
   }
-  const generatedId = useId();
+  const generatedId = useId2();
   const messageIdRef = messageId ?? generatedId;
   const blocks = useMemo2(() => {
     const allBlocks = messageBlockStore.selectAll();
@@ -465,7 +779,7 @@ function MessageItem({
     if (oldBlockIds.length > 0) {
       messageBlockStore.remove(oldBlockIds);
     }
-    const newBlocks = splitMarkdownIntoBlocks({
+    const newBlocks = splitMarkdownIntoBlocks2({
       messageId: messageIdRef,
       markdown,
       status: "idle" /* IDLE */
@@ -473,18 +787,236 @@ function MessageItem({
     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)) });
+  return /* @__PURE__ */ jsx6("div", { className, "data-message-id": messageIdRef, "data-role": role, children: blocks.map((block) => /* @__PURE__ */ jsx6(MessageBlockRenderer, { block, className: blockClassName }, block.id)) });
+}
+
+// src/utils/shiki/ShikiHighlighterManager.ts
+import { createHighlighterCore as createHighlighterCore2 } from "shiki/core";
+import { createJavaScriptRegexEngine as createJavaScriptRegexEngine2 } from "shiki/engine/javascript";
+
+// src/utils/shiki/languageRegistry.ts
+var LANGUAGE_REGISTRY = {
+  javascript: () => import("shiki/langs/javascript.mjs"),
+  js: () => import("shiki/langs/javascript.mjs"),
+  typescript: () => import("shiki/langs/typescript.mjs"),
+  ts: () => import("shiki/langs/typescript.mjs"),
+  tsx: () => import("shiki/langs/tsx.mjs"),
+  jsx: () => import("shiki/langs/jsx.mjs"),
+  python: () => import("shiki/langs/python.mjs"),
+  py: () => import("shiki/langs/python.mjs"),
+  java: () => import("shiki/langs/java.mjs"),
+  json: () => import("shiki/langs/json.mjs"),
+  html: () => import("shiki/langs/html.mjs"),
+  css: () => import("shiki/langs/css.mjs"),
+  bash: () => import("shiki/langs/bash.mjs"),
+  sh: () => import("shiki/langs/bash.mjs"),
+  shell: () => import("shiki/langs/shell.mjs"),
+  sql: () => import("shiki/langs/sql.mjs"),
+  markdown: () => import("shiki/langs/markdown.mjs"),
+  md: () => import("shiki/langs/markdown.mjs"),
+  go: () => import("shiki/langs/go.mjs"),
+  rust: () => import("shiki/langs/rust.mjs"),
+  rs: () => import("shiki/langs/rust.mjs"),
+  c: () => import("shiki/langs/c.mjs"),
+  cpp: () => import("shiki/langs/cpp.mjs"),
+  "c++": () => import("shiki/langs/cpp.mjs"),
+  csharp: () => import("shiki/langs/csharp.mjs"),
+  "c#": () => import("shiki/langs/csharp.mjs"),
+  cs: () => import("shiki/langs/csharp.mjs"),
+  php: () => import("shiki/langs/php.mjs"),
+  ruby: () => import("shiki/langs/ruby.mjs"),
+  rb: () => import("shiki/langs/ruby.mjs"),
+  swift: () => import("shiki/langs/swift.mjs"),
+  kotlin: () => import("shiki/langs/kotlin.mjs"),
+  kt: () => import("shiki/langs/kotlin.mjs"),
+  yaml: () => import("shiki/langs/yaml.mjs"),
+  yml: () => import("shiki/langs/yaml.mjs"),
+  xml: () => import("shiki/langs/xml.mjs"),
+  dockerfile: () => import("shiki/langs/dockerfile.mjs"),
+  graphql: () => import("shiki/langs/graphql.mjs"),
+  gql: () => import("shiki/langs/graphql.mjs"),
+  terraform: () => import("shiki/langs/terraform.mjs"),
+  tf: () => import("shiki/langs/terraform.mjs"),
+  lua: () => import("shiki/langs/lua.mjs"),
+  r: () => import("shiki/langs/r.mjs"),
+  scala: () => import("shiki/langs/scala.mjs"),
+  elixir: () => import("shiki/langs/elixir.mjs"),
+  ex: () => import("shiki/langs/elixir.mjs"),
+  dart: () => import("shiki/langs/dart.mjs"),
+  vue: () => import("shiki/langs/vue.mjs"),
+  svelte: () => import("shiki/langs/svelte.mjs"),
+  astro: () => import("shiki/langs/astro.mjs")
+};
+var THEME_REGISTRY = {
+  "github-light": () => import("shiki/themes/github-light.mjs"),
+  "github-dark": () => import("shiki/themes/github-dark.mjs"),
+  "github-dark-dimmed": () => import("shiki/themes/github-dark-dimmed.mjs"),
+  "dracula": () => import("shiki/themes/dracula.mjs"),
+  "monokai": () => import("shiki/themes/monokai.mjs"),
+  "nord": () => import("shiki/themes/nord.mjs"),
+  "one-dark-pro": () => import("shiki/themes/one-dark-pro.mjs"),
+  "solarized-light": () => import("shiki/themes/solarized-light.mjs"),
+  "solarized-dark": () => import("shiki/themes/solarized-dark.mjs"),
+  "vitesse-light": () => import("shiki/themes/vitesse-light.mjs"),
+  "vitesse-dark": () => import("shiki/themes/vitesse-dark.mjs")
+};
+function getLanguageImport(lang) {
+  const normalizedLang = lang.toLowerCase();
+  const importFn = LANGUAGE_REGISTRY[normalizedLang];
+  if (!importFn) {
+    console.warn(`[Shiki] Language "${lang}" not found in registry, falling back to plain text`);
+    return import("shiki/langs/javascript.mjs");
+  }
+  return importFn();
+}
+function getThemeImport(theme) {
+  const normalizedTheme = theme.toLowerCase();
+  const importFn = THEME_REGISTRY[normalizedTheme];
+  if (!importFn) {
+    console.warn(`[Shiki] Theme "${theme}" not found in registry, falling back to github-light`);
+    return import("shiki/themes/github-light.mjs");
+  }
+  return importFn();
+}
+function isLanguageSupported(lang) {
+  return lang.toLowerCase() in LANGUAGE_REGISTRY;
+}
+function isThemeSupported(theme) {
+  return theme.toLowerCase() in THEME_REGISTRY;
+}
+function getSupportedLanguages() {
+  return Object.keys(LANGUAGE_REGISTRY);
 }
+function getSupportedThemes() {
+  return Object.keys(THEME_REGISTRY);
+}
+
+// src/utils/shiki/ShikiHighlighterManager.ts
+var ShikiHighlighterManager = class {
+  constructor() {
+    this.lightHighlighter = null;
+    this.darkHighlighter = null;
+    this.lightTheme = null;
+    this.darkTheme = null;
+    this.loadedLanguages = /* @__PURE__ */ new Set();
+  }
+  /**
+   * 高亮代码（返回 light 和 dark 两个主题的 HTML）
+   * 
+   * @param code - 代码字符串
+   * @param language - 语言标识符
+   * @param themes - [light theme, dark theme] 元组
+   * @returns [lightHtml, darkHtml] - 两个主题的 HTML 元组
+   */
+  async highlightCode(code, language, themes) {
+    const [lightTheme, darkTheme] = themes;
+    const needsLightRecreation = !this.lightHighlighter || this.lightTheme !== lightTheme;
+    const needsDarkRecreation = !this.darkHighlighter || this.darkTheme !== darkTheme;
+    if (needsLightRecreation || needsDarkRecreation) {
+      this.loadedLanguages.clear();
+    }
+    const languageSupported = isLanguageSupported(language);
+    const needsLanguageLoad = !this.loadedLanguages.has(language) && languageSupported;
+    if (needsLightRecreation) {
+      this.lightHighlighter = await createHighlighterCore2({
+        themes: [getThemeImport(lightTheme)],
+        langs: languageSupported ? [getLanguageImport(language)] : [],
+        engine: createJavaScriptRegexEngine2({ forgiving: true })
+      });
+      this.lightTheme = lightTheme;
+      if (languageSupported) {
+        this.loadedLanguages.add(language);
+      }
+    } else if (needsLanguageLoad && this.lightHighlighter) {
+      await this.lightHighlighter.loadLanguage(getLanguageImport(language));
+      this.loadedLanguages.add(language);
+    }
+    if (needsDarkRecreation) {
+      this.darkHighlighter = await createHighlighterCore2({
+        themes: [getThemeImport(darkTheme)],
+        langs: languageSupported ? [getLanguageImport(language)] : [],
+        engine: createJavaScriptRegexEngine2({ forgiving: true })
+      });
+      this.darkTheme = darkTheme;
+    } else if (needsLanguageLoad && this.darkHighlighter) {
+      await this.darkHighlighter.loadLanguage(getLanguageImport(language));
+    }
+    const lang = languageSupported ? language : "text";
+    const light = this.lightHighlighter?.codeToHtml(code, {
+      lang,
+      theme: lightTheme
+    }) ?? "";
+    const dark = this.darkHighlighter?.codeToHtml(code, {
+      lang,
+      theme: darkTheme
+    }) ?? "";
+    return [light, dark];
+  }
+  /**
+   * 高亮代码（单一主题版本）
+   */
+  async highlightCodeSingle(code, language, theme) {
+    const [light] = await this.highlightCode(code, language, [theme, theme]);
+    return light;
+  }
+  /**
+   * 清除缓存（用于测试或内存清理）
+   */
+  clear() {
+    this.lightHighlighter = null;
+    this.darkHighlighter = null;
+    this.lightTheme = null;
+    this.darkTheme = null;
+    this.loadedLanguages.clear();
+  }
+};
+var highlighterManager = new ShikiHighlighterManager();
 export {
+  Block,
   CodeBlock,
+  MemoBlockquote,
+  MemoCode,
+  MemoDelete,
+  MemoEmphasis,
+  MemoH1,
+  MemoH2,
+  MemoH3,
+  MemoH4,
+  MemoH5,
+  MemoH6,
+  MemoHr,
+  MemoImage,
+  MemoLink,
+  MemoList,
+  MemoListItem,
+  MemoParagraph,
+  MemoPreformatted,
+  MemoStrong,
+  MemoTable,
+  MemoTableBody,
+  MemoTableCell,
+  MemoTableHead,
+  MemoTableRow,
   MessageBlockRenderer,
   MessageBlockStatus,
   MessageBlockStore,
   MessageBlockType,
   MessageItem,
   MessageStatus,
+  ShikiHighlighterManager,
   StreamingMarkdown,
+  getLanguageImport,
+  getSupportedLanguages,
+  getSupportedThemes,
+  getThemeImport,
+  highlighterManager,
+  isLanguageSupported,
+  isThemeSupported,
   messageBlockStore,
+  parseMarkdownIntoBlocks,
+  sameClassAndNode,
+  sameNodePosition,
+  splitMarkdownIntoBlocks,
   useShikiHighlight,
   useSmoothStream
 };