Markdown copying / html formatting (#4120)

* k

* delete unnecessary util

web/package-lock.json

@@ -70,6 +70,8 @@
         "recharts": "^2.13.1",
         "rehype-katex": "^7.0.1",
         "rehype-prism-plus": "^2.0.0",
+        "rehype-sanitize": "^6.0.0",
+        "rehype-stringify": "^10.0.1",
         "remark-gfm": "^4.0.0",
         "remark-math": "^6.0.0",
         "semver": "^7.5.4",
@@ -11741,6 +11743,54 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
       "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
     },
+    "node_modules/hast-util-sanitize": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-sanitize/-/hast-util-sanitize-5.0.2.tgz",
+      "integrity": "sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "unist-util-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
+      "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-html/node_modules/property-information": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.0.0.tgz",
+      "integrity": "sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz",
@@ -11919,6 +11969,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz",
@@ -19125,6 +19185,35 @@
         "unist-util-visit": "^5.0.0"
       }
     },
+    "node_modules/rehype-sanitize": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-sanitize/-/rehype-sanitize-6.0.0.tgz",
+      "integrity": "sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-sanitize": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-stringify": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.1.tgz",
+      "integrity": "sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-to-html": "^9.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/relateurl": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",

web/package.json

@@ -73,6 +73,8 @@
     "recharts": "^2.13.1",
     "rehype-katex": "^7.0.1",
     "rehype-prism-plus": "^2.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "semver": "^7.5.4",

web/src/app/chat/message/AgenticMessage.tsx

@@ -7,14 +7,9 @@ import React, {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import ReactMarkdown from "react-markdown";
 import { OnyxDocument, FilteredOnyxDocument } from "@/lib/search/interfaces";
 import remarkGfm from "remark-gfm";
@@ -54,6 +49,7 @@ import rehypeKatex from "rehype-katex";
 import "katex/dist/katex.min.css";
 import SubQuestionsDisplay from "./SubQuestionsDisplay";
 import { StatusRefinement } from "../Refinement";
+import { copyAll, handleCopy } from "./copyingUtils";
 
 export const AgenticMessage = ({
   isStreamingQuestions,
@@ -312,6 +308,8 @@ export const AgenticMessage = ({
     [anchorCallback, paragraphCallback, streamedContent]
   );
 
+  const markdownRef = useRef<HTMLDivElement>(null);
+
   const renderedAlternativeMarkdown = useMemo(() => {
     return (
       <ReactMarkdown
@@ -492,7 +490,11 @@ export const AgenticMessage = ({
 
                         <div className="px-4">
                           {typeof content === "string" ? (
-                            <div className="overflow-x-visible !text-sm max-w-content-max">
+                            <div
+                              onCopy={(e) => handleCopy(e, markdownRef)}
+                              ref={markdownRef}
+                              className="overflow-x-visible !text-sm max-w-content-max"
+                            >
                               {isViewingInitialAnswer
                                 ? renderedMarkdown
                                 : renderedAlternativeMarkdown}
@@ -558,7 +560,16 @@ export const AgenticMessage = ({
                             )}
                           </div>
                           <CustomTooltip showTick line content="Copy">
-                            <CopyButton content={content.toString()} />
+                            <CopyButton
+                              copyAllFn={() =>
+                                copyAll(
+                                  (isViewingInitialAnswer
+                                    ? finalContent
+                                    : finalAlternativeContent) as string,
+                                  markdownRef
+                                )
+                              }
+                            />
                           </CustomTooltip>
                           <CustomTooltip showTick line content="Good response">
                             <HoverableIcon
@@ -644,7 +655,16 @@ export const AgenticMessage = ({
                             )}
                           </div>
                           <CustomTooltip showTick line content="Copy">
-                            <CopyButton content={content.toString()} />
+                            <CopyButton
+                              copyAllFn={() =>
+                                copyAll(
+                                  (isViewingInitialAnswer
+                                    ? finalContent
+                                    : finalAlternativeContent) as string,
+                                  markdownRef
+                                )
+                              }
+                            />
                           </CustomTooltip>
 
                           <CustomTooltip showTick line content="Good response">

web/src/app/chat/message/Messages.tsx

@@ -16,15 +16,16 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { unified } from "unified";
 import ReactMarkdown from "react-markdown";
 import { OnyxDocument, FilteredOnyxDocument } from "@/lib/search/interfaces";
 import { SearchSummary } from "./SearchSummary";
-import {
-  markdownToHtml,
-  getMarkdownForSelection,
-} from "@/app/chat/message/codeUtils";
 import { SkippedSearch } from "./SkippedSearch";
 import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeSanitize from "rehype-sanitize";
+import rehypeStringify from "rehype-stringify";
 import { CopyButton } from "@/components/CopyButton";
 import { ChatFileType, FileDescriptor, ToolCallMetadata } from "../interfaces";
 import {
@@ -69,6 +70,7 @@ import { SourceCard } from "./SourcesDisplay";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 import "katex/dist/katex.min.css";
+import { copyAll, handleCopy } from "./copyingUtils";
 
 const TOOLS_WITH_CUSTOM_HANDLING = [
   SEARCH_TOOL_NAME,
@@ -364,25 +366,16 @@ export const AIMessage = ({
     }),
     [anchorCallback, paragraphCallback, finalContent]
   );
+  const markdownRef = useRef<HTMLDivElement>(null);
+
+  // Process selection copying with HTML formatting
 
   const renderedMarkdown = useMemo(() => {
     if (typeof finalContent !== "string") {
       return finalContent;
     }
 
-    // Create a hidden div with the HTML content for copying
-    const htmlContent = markdownToHtml(finalContent);
-
     return (
-      <>
-        <div
-          style={{
-            position: "absolute",
-            left: "-9999px",
-            display: "none",
-          }}
-          dangerouslySetInnerHTML={{ __html: htmlContent }}
-        />
       <ReactMarkdown
         className="prose dark:prose-invert max-w-full text-base"
         components={markdownComponents}
@@ -391,7 +384,6 @@ export const AIMessage = ({
       >
         {finalContent}
       </ReactMarkdown>
-      </>
     );
   }, [finalContent, markdownComponents]);
 
@@ -535,64 +527,9 @@ export const AIMessage = ({
                         {typeof content === "string" ? (
                           <div className="overflow-x-visible max-w-content-max">
                             <div
-                              contentEditable="true"
+                              ref={markdownRef}
-                              suppressContentEditableWarning
                               className="focus:outline-none cursor-text select-text"
-                              style={{
+                              onCopy={(e) => handleCopy(e, markdownRef)}
-                                MozUserModify: "read-only",
-                                WebkitUserModify: "read-only",
-                              }}
-                              onCopy={(e) => {
-                                e.preventDefault();
-                                const selection = window.getSelection();
-                                const selectedPlainText =
-                                  selection?.toString() || "";
-                                if (!selectedPlainText) {
-                                  // If no text is selected, copy the full content
-                                  const contentStr =
-                                    typeof content === "string"
-                                      ? content
-                                      : (
-                                          content as JSX.Element
-                                        ).props?.children?.toString() || "";
-                                  const clipboardItem = new ClipboardItem({
-                                    "text/html": new Blob(
-                                      [
-                                        typeof content === "string"
-                                          ? markdownToHtml(content)
-                                          : contentStr,
-                                      ],
-                                      { type: "text/html" }
-                                    ),
-                                    "text/plain": new Blob([contentStr], {
-                                      type: "text/plain",
-                                    }),
-                                  });
-                                  navigator.clipboard.write([clipboardItem]);
-                                  return;
-                                }
-
-                                const contentStr =
-                                  typeof content === "string"
-                                    ? content
-                                    : (
-                                        content as JSX.Element
-                                      ).props?.children?.toString() || "";
-                                const markdownText = getMarkdownForSelection(
-                                  contentStr,
-                                  selectedPlainText
-                                );
-                                const clipboardItem = new ClipboardItem({
-                                  "text/html": new Blob(
-                                    [markdownToHtml(markdownText)],
-                                    { type: "text/html" }
-                                  ),
-                                  "text/plain": new Blob([selectedPlainText], {
-                                    type: "text/plain",
-                                  }),
-                                });
-                                navigator.clipboard.write([clipboardItem]);
-                              }}
                             >
                               {renderedMarkdown}
                             </div>
@@ -643,13 +580,8 @@ export const AIMessage = ({
                           </div>
                           <CustomTooltip showTick line content="Copy">
                             <CopyButton
-                              content={
+                              copyAllFn={() =>
-                                typeof content === "string"
+                                copyAll(finalContent as string, markdownRef)
-                                  ? {
-                                      html: markdownToHtml(content),
-                                      plainText: content,
-                                    }
-                                  : content.toString()
                               }
                             />
                           </CustomTooltip>
@@ -734,13 +666,8 @@ export const AIMessage = ({
                           </div>
                           <CustomTooltip showTick line content="Copy">
                             <CopyButton
-                              content={
+                              copyAllFn={() =>
-                                typeof content === "string"
+                                copyAll(finalContent as string, markdownRef)
-                                  ? {
-                                      html: markdownToHtml(content),
-                                      plainText: content,
-                                    }
-                                  : content.toString()
                               }
                             />
                           </CustomTooltip>

web/src/app/chat/message/SubQuestionsDisplay.tsx

@@ -24,6 +24,7 @@ import { CodeBlock } from "./CodeBlock";
 import { CheckIcon, ChevronDown } from "lucide-react";
 import { PHASE_MIN_MS, useStreamingMessages } from "./StreamingMessages";
 import { CirclingArrowIcon } from "@/components/icons/icons";
+import { handleCopy } from "./copyingUtils";
 
 export const StatusIndicator = ({ status }: { status: ToggleState }) => {
   return (
@@ -292,6 +293,7 @@ const SubQuestionDisplay: React.FC<{
     }
   }, [currentlyClosed]);
 
+  const analysisRef = useRef<HTMLDivElement>(null);
   const renderedMarkdown = useMemo(() => {
     return (
       <ReactMarkdown
@@ -428,7 +430,11 @@ const SubQuestionDisplay: React.FC<{
                           />
                         </div>
                         {analysisToggled && (
-                          <div className="flex flex-wrap gap-2">
+                          <div
+                            ref={analysisRef}
+                            onCopy={(e) => handleCopy(e, analysisRef)}
+                            className="flex flex-wrap gap-2"
+                          >
                             {renderedMarkdown}
                           </div>
                         )}

web/src/app/chat/message/__tests__/codeUtils.test.ts

@@ -1,176 +0,0 @@
-import { markdownToHtml, parseMarkdownToSegments } from "../codeUtils";
-
-describe("markdownToHtml", () => {
-  test("converts bold text with asterisks and underscores", () => {
-    expect(markdownToHtml("This is **bold** text")).toBe(
-      "<p>This is <strong>bold</strong> text</p>"
-    );
-    expect(markdownToHtml("This is __bold__ text")).toBe(
-      "<p>This is <strong>bold</strong> text</p>"
-    );
-  });
-
-  test("converts italic text with asterisks and underscores", () => {
-    expect(markdownToHtml("This is *italic* text")).toBe(
-      "<p>This is <em>italic</em> text</p>"
-    );
-    expect(markdownToHtml("This is _italic_ text")).toBe(
-      "<p>This is <em>italic</em> text</p>"
-    );
-  });
-
-  test("handles mixed bold and italic", () => {
-    expect(markdownToHtml("This is **bold** and *italic* text")).toBe(
-      "<p>This is <strong>bold</strong> and <em>italic</em> text</p>"
-    );
-    expect(markdownToHtml("This is __bold__ and _italic_ text")).toBe(
-      "<p>This is <strong>bold</strong> and <em>italic</em> text</p>"
-    );
-  });
-
-  test("handles text with spaces and special characters", () => {
-    expect(markdownToHtml("This is *as delicious and* tasty")).toBe(
-      "<p>This is <em>as delicious and</em> tasty</p>"
-    );
-    expect(markdownToHtml("This is _as delicious and_ tasty")).toBe(
-      "<p>This is <em>as delicious and</em> tasty</p>"
-    );
-  });
-
-  test("handles multi-paragraph text with italics", () => {
-    const input =
-      "Sure! Here is a sentence with one italicized word:\n\nThe cake was _delicious_ and everyone enjoyed it.";
-    expect(markdownToHtml(input)).toBe(
-      "<p>Sure! Here is a sentence with one italicized word:</p>\n<p>The cake was <em>delicious</em> and everyone enjoyed it.</p>"
-    );
-  });
-
-  test("handles malformed markdown without crashing", () => {
-    expect(markdownToHtml("This is *malformed markdown")).toBe(
-      "<p>This is *malformed markdown</p>"
-    );
-    expect(markdownToHtml("This is _also malformed")).toBe(
-      "<p>This is _also malformed</p>"
-    );
-    expect(markdownToHtml("This has **unclosed bold")).toBe(
-      "<p>This has **unclosed bold</p>"
-    );
-    expect(markdownToHtml("This has __unclosed bold")).toBe(
-      "<p>This has __unclosed bold</p>"
-    );
-  });
-
-  test("handles empty or null input", () => {
-    expect(markdownToHtml("")).toBe("");
-    expect(markdownToHtml(" ")).toBe("");
-    expect(markdownToHtml("\n")).toBe("");
-  });
-
-  test("handles extremely long input without crashing", () => {
-    const longText = "This is *italic* ".repeat(1000);
-    expect(() => markdownToHtml(longText)).not.toThrow();
-  });
-});
-
-describe("parseMarkdownToSegments", () => {
-  test("parses italic text with asterisks", () => {
-    const segments = parseMarkdownToSegments("This is *italic* text");
-    expect(segments).toEqual([
-      { type: "text", text: "This is ", raw: "This is ", length: 8 },
-      { type: "italic", text: "italic", raw: "*italic*", length: 6 },
-      { type: "text", text: " text", raw: " text", length: 5 },
-    ]);
-  });
-
-  test("parses italic text with underscores", () => {
-    const segments = parseMarkdownToSegments("This is _italic_ text");
-    expect(segments).toEqual([
-      { type: "text", text: "This is ", raw: "This is ", length: 8 },
-      { type: "italic", text: "italic", raw: "_italic_", length: 6 },
-      { type: "text", text: " text", raw: " text", length: 5 },
-    ]);
-  });
-
-  test("parses bold text with asterisks", () => {
-    const segments = parseMarkdownToSegments("This is **bold** text");
-    expect(segments).toEqual([
-      { type: "text", text: "This is ", raw: "This is ", length: 8 },
-      { type: "bold", text: "bold", raw: "**bold**", length: 4 },
-      { type: "text", text: " text", raw: " text", length: 5 },
-    ]);
-  });
-
-  test("parses bold text with underscores", () => {
-    const segments = parseMarkdownToSegments("This is __bold__ text");
-    expect(segments).toEqual([
-      { type: "text", text: "This is ", raw: "This is ", length: 8 },
-      { type: "bold", text: "bold", raw: "__bold__", length: 4 },
-      { type: "text", text: " text", raw: " text", length: 5 },
-    ]);
-  });
-
-  test("parses text with spaces and special characters in italics", () => {
-    const segments = parseMarkdownToSegments(
-      "The cake was _delicious_ and everyone enjoyed it."
-    );
-    expect(segments).toEqual([
-      { type: "text", text: "The cake was ", raw: "The cake was ", length: 13 },
-      { type: "italic", text: "delicious", raw: "_delicious_", length: 9 },
-      {
-        type: "text",
-        text: " and everyone enjoyed it.",
-        raw: " and everyone enjoyed it.",
-        length: 25,
-      },
-    ]);
-  });
-
-  test("parses multi-paragraph text with italics", () => {
-    const segments = parseMarkdownToSegments(
-      "Sure! Here is a sentence with one italicized word:\n\nThe cake was _delicious_ and everyone enjoyed it."
-    );
-    expect(segments).toEqual([
-      {
-        type: "text",
-        text: "Sure! Here is a sentence with one italicized word:\n\nThe cake was ",
-        raw: "Sure! Here is a sentence with one italicized word:\n\nThe cake was ",
-        length: 65,
-      },
-      { type: "italic", text: "delicious", raw: "_delicious_", length: 9 },
-      {
-        type: "text",
-        text: " and everyone enjoyed it.",
-        raw: " and everyone enjoyed it.",
-        length: 25,
-      },
-    ]);
-  });
-
-  test("handles malformed markdown without crashing", () => {
-    expect(() => parseMarkdownToSegments("This is *malformed")).not.toThrow();
-    expect(() =>
-      parseMarkdownToSegments("This is _also malformed")
-    ).not.toThrow();
-    expect(() =>
-      parseMarkdownToSegments("This has **unclosed bold")
-    ).not.toThrow();
-    expect(() =>
-      parseMarkdownToSegments("This has __unclosed bold")
-    ).not.toThrow();
-  });
-
-  test("handles empty or null input", () => {
-    expect(parseMarkdownToSegments("")).toEqual([]);
-    expect(parseMarkdownToSegments(" ")).toEqual([
-      { type: "text", text: " ", raw: " ", length: 1 },
-    ]);
-    expect(parseMarkdownToSegments("\n")).toEqual([
-      { type: "text", text: "\n", raw: "\n", length: 1 },
-    ]);
-  });
-
-  test("handles extremely long input without crashing", () => {
-    const longText = "This is *italic* ".repeat(1000);
-    expect(() => parseMarkdownToSegments(longText)).not.toThrow();
-  });
-});

web/src/app/chat/message/codeUtils.ts

@@ -83,35 +83,6 @@ export const preprocessLaTeX = (content: string) => {
   return inlineProcessedContent;
 };
 
-export const markdownToHtml = (content: string): string => {
-  if (!content || !content.trim()) {
-    return "";
-  }
-
-  // Basic markdown to HTML conversion for common patterns
-  const processedContent = content
-    .replace(/(\*\*|__)((?:(?!\1).)*?)\1/g, "<strong>$2</strong>") // Bold with ** or __, non-greedy and no nesting
-    .replace(/(\*|_)([^*_\n]+?)\1(?!\*|_)/g, "<em>$2</em>"); // Italic with * or _
-
-  // Handle code blocks and links
-  const withCodeAndLinks = processedContent
-    .replace(/`([^`]+)`/g, "<code>$1</code>") // Inline code
-    .replace(
-      /```(\w*)\n([\s\S]*?)```/g,
-      (_, lang, code) =>
-        `<pre><code class="language-${lang}">${code.trim()}</code></pre>`
-    ) // Code blocks
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>'); // Links
-
-  // Handle paragraphs
-  return withCodeAndLinks
-    .split(/\n\n+/)
-    .map((para) => para.trim())
-    .filter((para) => para.length > 0)
-    .map((para) => `<p>${para}</p>`)
-    .join("\n");
-};
-
 interface MarkdownSegment {
   type: "text" | "link" | "code" | "bold" | "italic" | "codeblock";
   text: string; // The visible/plain text

web/src/app/chat/message/copyingUtils.tsx

@@ -0,0 +1,71 @@
+"use client";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import remarkRehype from "remark-rehype";
+import rehypePrism from "rehype-prism-plus";
+import rehypeKatex from "rehype-katex";
+import rehypeSanitize from "rehype-sanitize";
+import rehypeStringify from "rehype-stringify";
+
+export const handleCopy = (
+  e: React.ClipboardEvent,
+  markdownRef: React.RefObject<HTMLDivElement>
+) => {
+  // Check if we have a selection
+  const selection = window.getSelection();
+  if (!selection?.rangeCount) return;
+
+  const range = selection.getRangeAt(0);
+
+  // If selection is within our markdown container
+  if (
+    markdownRef.current &&
+    markdownRef.current.contains(range.commonAncestorContainer)
+  ) {
+    e.preventDefault();
+
+    // Clone selection to get the HTML
+    const fragment = range.cloneContents();
+    const tempDiv = document.createElement("div");
+    tempDiv.appendChild(fragment);
+
+    // Create clipboard data with both HTML and plain text
+    e.clipboardData.setData("text/html", tempDiv.innerHTML);
+    e.clipboardData.setData("text/plain", selection.toString());
+  }
+};
+
+// For copying the entire content
+export const copyAll = (
+  content: string,
+  markdownRef: React.RefObject<HTMLDivElement>
+) => {
+  if (!markdownRef.current || typeof content !== "string") {
+    return;
+  }
+
+  // Convert markdown to HTML using unified ecosystem
+  unified()
+    .use(remarkParse)
+    .use(remarkGfm)
+    .use(remarkMath)
+    .use(remarkRehype)
+    .use(rehypePrism, { ignoreMissing: true })
+    .use(rehypeKatex)
+    .use(rehypeSanitize)
+    .use(rehypeStringify)
+    .process(content)
+    .then((file: any) => {
+      const htmlContent = String(file);
+
+      // Create clipboard data
+      const clipboardItem = new ClipboardItem({
+        "text/html": new Blob([htmlContent], { type: "text/html" }),
+        "text/plain": new Blob([content], { type: "text/plain" }),
+      });
+
+      navigator.clipboard.write([clipboardItem]);
+    });
+};

web/src/components/CopyButton.tsx

@@ -4,33 +4,36 @@ import { CheckmarkIcon, CopyMessageIcon } from "./icons/icons";
 
 export function CopyButton({
   content,
+  copyAllFn,
   onClick,
 }: {
-  content?: string | { html: string; plainText: string };
+  content?: string;
+  copyAllFn?: () => void;
   onClick?: () => void;
 }) {
   const [copyClicked, setCopyClicked] = useState(false);
 
-  const copyToClipboard = async (
+  const copyToClipboard = async () => {
-    content: string | { html: string; plainText: string }
-  ) => {
     try {
+      // If copyAllFn is provided, use it instead of the default behavior
+      if (copyAllFn) {
+        await copyAllFn();
+        return;
+      }
+
+      // Fall back to original behavior if no copyAllFn is provided
+      if (!content) return;
+
       const clipboardItem = new ClipboardItem({
-        "text/html": new Blob(
+        "text/html": new Blob([content], { type: "text/html" }),
-          [typeof content === "string" ? content : content.html],
+        "text/plain": new Blob([content], { type: "text/plain" }),
-          { type: "text/html" }
-        ),
-        "text/plain": new Blob(
-          [typeof content === "string" ? content : content.plainText],
-          { type: "text/plain" }
-        ),
       });
       await navigator.clipboard.write([clipboardItem]);
     } catch (err) {
       // Fallback to basic text copy if HTML copy fails
-      await navigator.clipboard.writeText(
+      if (content) {
-        typeof content === "string" ? content : content.plainText
+        await navigator.clipboard.writeText(content);
-      );
+      }
     }
   };
 
@@ -38,9 +41,7 @@ export function CopyButton({
     <HoverableIcon
       icon={copyClicked ? <CheckmarkIcon /> : <CopyMessageIcon />}
       onClick={() => {
-        if (content) {
+        copyToClipboard();
-          copyToClipboard(content);
-        }
         onClick && onClick();
 
         setCopyClicked(true);