streaming-markdown-react 0.1.4 → 0.2.0

package/dist/index.js

@@ -30,15 +30,51 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Block: () => Block,
   CodeBlock: () => CodeBlock,
+  MemoBlockquote: () => MemoBlockquote,
+  MemoCode: () => MemoCode,
+  MemoDelete: () => MemoDelete,
+  MemoEmphasis: () => MemoEmphasis,
+  MemoH1: () => MemoH1,
+  MemoH2: () => MemoH2,
+  MemoH3: () => MemoH3,
+  MemoH4: () => MemoH4,
+  MemoH5: () => MemoH5,
+  MemoH6: () => MemoH6,
+  MemoHr: () => MemoHr,
+  MemoImage: () => MemoImage,
+  MemoLink: () => MemoLink,
+  MemoList: () => MemoList,
+  MemoListItem: () => MemoListItem,
+  MemoParagraph: () => MemoParagraph,
+  MemoPreformatted: () => MemoPreformatted,
+  MemoStrong: () => MemoStrong,
+  MemoTable: () => MemoTable,
+  MemoTableBody: () => MemoTableBody,
+  MemoTableCell: () => MemoTableCell,
+  MemoTableHead: () => MemoTableHead,
+  MemoTableRow: () => MemoTableRow,
   MessageBlockRenderer: () => MessageBlockRenderer,
   MessageBlockStatus: () => MessageBlockStatus,
   MessageBlockStore: () => MessageBlockStore,
   MessageBlockType: () => MessageBlockType,
   MessageItem: () => MessageItem,
   MessageStatus: () => MessageStatus,
+  ShikiHighlighterManager: () => ShikiHighlighterManager,
   StreamingMarkdown: () => StreamingMarkdown,
+  getLanguageImport: () => getLanguageImport,
+  getSupportedLanguages: () => getSupportedLanguages,
+  getSupportedThemes: () => getSupportedThemes,
+  getThemeImport: () => getThemeImport,
+  highlighterManager: () => highlighterManager,
+  isLanguageSupported: () => isLanguageSupported,
+  isThemeSupported: () => isThemeSupported,
   messageBlockStore: () => messageBlockStore,
+  parseMarkdownIntoBlocks: () => parseMarkdownIntoBlocks,
+  sameClassAndNode: () => sameClassAndNode,
+  sameNodePosition: () => sameNodePosition,
+  splitMarkdownIntoBlocks: () => splitMarkdownIntoBlocks,
   useShikiHighlight: () => useShikiHighlight,
   useSmoothStream: () => useSmoothStream
 });
@@ -110,8 +146,7 @@ var MessageBlockStore = class {
 var messageBlockStore = new MessageBlockStore();
 
 // src/components/Markdown/StreamingMarkdown.tsx
-var import_react3 = require("react");
-var import_react_markdown = __toESM(require("react-markdown"));
+var import_react5 = require("react");
 var import_remark_gfm = __toESM(require("remark-gfm"));
 
 // src/hooks/useSmoothStream.ts
@@ -225,8 +260,126 @@ function useSmoothStream({
   return { addChunk, reset };
 }
 
-// src/hooks/useShikiHighlight.ts
+// src/utils/markdown/parseMarkdownIntoBlocks.ts
+var import_marked = require("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 = import_marked.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
 var import_react2 = require("react");
+var import_react_markdown = __toESM(require("react-markdown"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Block = (0, import_react2.memo)(
+  ({ content, components, remarkPlugins, rehypePlugins, className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_markdown.default,
+      {
+        className,
+        components,
+        remarkPlugins,
+        rehypePlugins,
+        children: content
+      }
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.content === nextProps.content && prevProps.className === nextProps.className;
+  }
+);
+Block.displayName = "Block";
+
+// src/hooks/useShikiHighlight.ts
+var import_react3 = require("react");
 var import_core = require("shiki/core");
 var import_javascript = require("shiki/engine/javascript");
 var highlighterPromise;
@@ -274,10 +427,10 @@ function useShikiHighlight({
   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)(() => {
+  const [html, setHtml] = (0, import_react3.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
+  const [error, setError] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
     let cancelled = false;
     async function highlight() {
       try {
@@ -316,7 +469,7 @@ function escapeHtml(unsafe) {
 }
 
 // src/components/Markdown/CodeBlock.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function CodeBlock({
   code,
   language = "text",
@@ -325,9 +478,9 @@ function CodeBlock({
 }) {
   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_runtime2.jsx)("pre", { className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { "data-language": language, children: code }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       dangerouslySetInnerHTML: { __html: html },
@@ -340,89 +493,286 @@ function CodeBlock({
   );
 }
 
-// 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;
+// src/components/Markdown/MemoizedComponents.tsx
+var import_react4 = require("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
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MemoH1 = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH1.displayName = "MemoH1";
+var MemoH2 = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH2.displayName = "MemoH2";
+var MemoH3 = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH3.displayName = "MemoH3";
+var MemoH4 = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH4.displayName = "MemoH4";
+var MemoH5 = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h5", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH5.displayName = "MemoH5";
+var MemoH6 = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h6", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoH6.displayName = "MemoH6";
+var MemoParagraph = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoParagraph.displayName = "MemoParagraph";
+var MemoLink = (0, import_react4.memo)(
+  ({ children, className, href, title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "a",
+    {
+      className,
+      href,
+      title,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      ...props,
+      children
     }
-  }, [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 });
+  ),
+  (p, n) => sameClassAndNode(p, n) && p.href === n.href && p.title === n.title
+);
+MemoLink.displayName = "MemoLink";
+var MemoBlockquote = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("blockquote", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoBlockquote.displayName = "MemoBlockquote";
+var MemoList = (0, import_react4.memo)(
+  ({ children, className, ordered, start, ...props }) => {
+    if (ordered) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ol", { className, start, ...props, children });
     }
-    return { ...baseComponents, ...customComponents };
-  }, [markdown, customComponents]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_markdown.default,
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className, ...props, children });
+  },
+  (p, n) => sameClassAndNode(p, n) && p.ordered === n.ordered && p.start === n.start
+);
+MemoList.displayName = "MemoList";
+var MemoListItem = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoListItem.displayName = "MemoListItem";
+var MemoTable = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("table", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoTable.displayName = "MemoTable";
+var MemoTableHead = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoTableHead.displayName = "MemoTableHead";
+var MemoTableBody = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoTableBody.displayName = "MemoTableBody";
+var MemoTableRow = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoTableRow.displayName = "MemoTableRow";
+var MemoTableCell = (0, import_react4.memo)(
+  ({ children, className, isHeader, align, ...props }) => {
+    const style = align ? { textAlign: align } : void 0;
+    if (isHeader) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className, style, ...props, children });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className, style, ...props, children });
+  },
+  (p, n) => sameClassAndNode(p, n) && p.isHeader === n.isHeader && p.align === n.align
+);
+MemoTableCell.displayName = "MemoTableCell";
+var MemoCode = (0, import_react4.memo)(
+  ({ children, className, inline, ...props }) => {
+    if (inline) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { className, ...props, children });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { className, ...props, children });
+  },
+  (p, n) => sameClassAndNode(p, n) && p.inline === n.inline
+);
+MemoCode.displayName = "MemoCode";
+var MemoPreformatted = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoPreformatted.displayName = "MemoPreformatted";
+var MemoStrong = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoStrong.displayName = "MemoStrong";
+var MemoEmphasis = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("em", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoEmphasis.displayName = "MemoEmphasis";
+var MemoHr = (0, import_react4.memo)(
+  ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", { className, ...props }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoHr.displayName = "MemoHr";
+var MemoImage = (0, import_react4.memo)(
+  ({ className, href, title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "img",
     {
       className,
-      remarkPlugins: [import_remark_gfm.default],
-      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 = (0, import_react4.memo)(
+  ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("del", { className, ...props, children }),
+  (p, n) => sameClassAndNode(p, n)
+);
+MemoDelete.displayName = "MemoDelete";
+
+// src/components/Markdown/StreamingMarkdown.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var StreamingMarkdown = (0, import_react5.memo)(
+  function StreamingMarkdown2({
+    children,
+    className,
+    components: customComponents,
+    status = "idle",
+    onComplete,
+    minDelay = 10
+  }) {
+    const markdown = typeof children === "string" ? children : String(children || "");
+    const [displayedText, setDisplayedText] = (0, import_react5.useState)(status !== "streaming" ? markdown : "");
+    const previousChildrenRef = (0, import_react5.useRef)(status !== "streaming" ? markdown : "");
+    const generatedId = (0, import_react5.useId)();
+    const { addChunk, reset } = useSmoothStream({
+      onUpdate: setDisplayedText,
+      streamDone: status !== "streaming",
+      minDelay,
+      initialText: status !== "streaming" ? markdown : "",
+      onComplete
+    });
+    (0, import_react5.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 blocks = (0, import_react5.useMemo)(
+      () => parseMarkdownIntoBlocks(displayedText),
+      [displayedText]
+    );
+    const components = (0, import_react5.useMemo)(() => {
+      const baseComponents = {
+        h1: MemoH1,
+        h2: MemoH2,
+        h3: MemoH3,
+        h4: MemoH4,
+        h5: MemoH5,
+        h6: MemoH6,
+        p: MemoParagraph,
+        a: MemoLink,
+        blockquote: MemoBlockquote,
+        ul: (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MemoList, { ordered: false, ...props }),
+        ol: (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MemoList, { ordered: true, ...props }),
+        li: MemoListItem,
+        table: MemoTable,
+        thead: MemoTableHead,
+        tbody: MemoTableBody,
+        tr: MemoTableRow,
+        th: (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MemoTableCell, { isHeader: true, ...props }),
+        td: MemoTableCell,
+        strong: MemoStrong,
+        em: MemoEmphasis,
+        hr: MemoHr,
+        img: (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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__ */ (0, import_jsx_runtime4.jsx)(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__ */ (0, import_jsx_runtime4.jsx)(CodeBlock, { code, language, className: className2 });
+        },
+        pre: (props) => {
+          const { children: children2, ...rest } = props;
+          if (children2?.type === CodeBlock) {
+            return children2;
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MemoPreformatted, { ...rest, children: children2 });
+        }
+      };
+      if (/<style\b[^>]*>/i.test(markdown)) {
+        baseComponents.style = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...props });
+      }
+      return { ...baseComponents, ...customComponents };
+    }, [markdown, customComponents]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, children: blocks.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Block,
+      {
+        content: block,
+        components,
+        remarkPlugins: [import_remark_gfm.default]
+      },
+      `${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
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function MessageBlockRenderer({ block, className }) {
   switch (block.type) {
     case "main_text" /* MAIN_TEXT */:
@@ -431,7 +781,7 @@ function MessageBlockRenderer({ block, className }) {
     case "error" /* ERROR */:
     case "unknown" /* UNKNOWN */: {
       const textBlock = block;
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         StreamingMarkdown,
         {
           className,
@@ -442,18 +792,18 @@ function MessageBlockRenderer({ block, className }) {
     }
     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 }) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime5.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" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime5.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) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", { children: JSON.stringify(toolBlock.payload ?? {}, null, 2) }) });
     }
     default:
       return null;
@@ -461,17 +811,17 @@ function MessageBlockRenderer({ block, className }) {
 }
 
 // src/components/Message/MessageItem.tsx
-var import_react4 = require("react");
+var import_react6 = 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}`;
+var blockIdCounter2 = 0;
+function generateBlockId2() {
+  blockIdCounter2 += 1;
+  return `block-${Date.now()}-${blockIdCounter2}`;
 }
-function splitMarkdownIntoBlocks({
+function splitMarkdownIntoBlocks2({
   messageId,
   markdown,
   status = "idle" /* IDLE */
@@ -480,7 +830,7 @@ function splitMarkdownIntoBlocks({
     return [];
   }
   const block = {
-    id: generateBlockId(),
+    id: generateBlockId2(),
     messageId,
     type: "main_text" /* MAIN_TEXT */,
     status,
@@ -491,7 +841,7 @@ function splitMarkdownIntoBlocks({
 }
 
 // src/components/Message/MessageItem.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function MessageItem({
   children,
   role = "assistant",
@@ -501,17 +851,17 @@ function MessageItem({
 }) {
   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 }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, "data-role": "user", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_markdown2.default, { remarkPlugins: [import_remark_gfm2.default], children: markdown }) });
   }
-  const generatedId = (0, import_react4.useId)();
+  const generatedId = (0, import_react6.useId)();
   const messageIdRef = messageId ?? generatedId;
-  const blocks = (0, import_react4.useMemo)(() => {
+  const blocks = (0, import_react6.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({
+    const newBlocks = splitMarkdownIntoBlocks2({
       messageId: messageIdRef,
       markdown,
       status: "idle" /* IDLE */
@@ -519,19 +869,237 @@ function MessageItem({
     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)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, "data-message-id": messageIdRef, "data-role": role, children: blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBlockRenderer, { block, className: blockClassName }, block.id)) });
+}
+
+// src/utils/shiki/ShikiHighlighterManager.ts
+var import_core2 = require("shiki/core");
+var import_javascript2 = require("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 (0, import_core2.createHighlighterCore)({
+        themes: [getThemeImport(lightTheme)],
+        langs: languageSupported ? [getLanguageImport(language)] : [],
+        engine: (0, import_javascript2.createJavaScriptRegexEngine)({ 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 (0, import_core2.createHighlighterCore)({
+        themes: [getThemeImport(darkTheme)],
+        langs: languageSupported ? [getLanguageImport(language)] : [],
+        engine: (0, import_javascript2.createJavaScriptRegexEngine)({ 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();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  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
 });