mirror of
https://github.com/danswer-ai/danswer.git
synced 2025-03-26 17:51:54 +01:00
Markdown copying / html formatting (#4120)
* k * delete unnecessary util
This commit is contained in:
pablonyx
GitHub
parent
a98dcbc7de
commit
426a8842ae
89
web/package-lock.json
generated
89
web/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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,34 +366,24 @@ 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}
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[[rehypePrism, { ignoreMissing: true }], rehypeKatex]}
|
||||
>
|
||||
{finalContent}
|
||||
</ReactMarkdown>
|
||||
</>
|
||||
<ReactMarkdown
|
||||
className="prose dark:prose-invert max-w-full text-base"
|
||||
components={markdownComponents}
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[[rehypePrism, { ignoreMissing: true }], rehypeKatex]}
|
||||
>
|
||||
{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"
|
||||
suppressContentEditableWarning
|
||||
ref={markdownRef}
|
||||
className="focus:outline-none cursor-text select-text"
|
||||
style={{
|
||||
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]);
|
||||
}}
|
||||
onCopy={(e) => handleCopy(e, markdownRef)}
|
||||
>
|
||||
{renderedMarkdown}
|
||||
</div>
|
||||
@ -643,13 +580,8 @@ export const AIMessage = ({
|
||||
</div>
|
||||
<CustomTooltip showTick line content="Copy">
|
||||
<CopyButton
|
||||
content={
|
||||
typeof content === "string"
|
||||
? {
|
||||
html: markdownToHtml(content),
|
||||
plainText: content,
|
||||
}
|
||||
: content.toString()
|
||||
copyAllFn={() =>
|
||||
copyAll(finalContent as string, markdownRef)
|
||||
}
|
||||
/>
|
||||
</CustomTooltip>
|
||||
@ -734,13 +666,8 @@ export const AIMessage = ({
|
||||
</div>
|
||||
<CustomTooltip showTick line content="Copy">
|
||||
<CopyButton
|
||||
content={
|
||||
typeof content === "string"
|
||||
? {
|
||||
html: markdownToHtml(content),
|
||||
plainText: content,
|
||||
}
|
||||
: content.toString()
|
||||
copyAllFn={() =>
|
||||
copyAll(finalContent as string, markdownRef)
|
||||
}
|
||||
/>
|
||||
</CustomTooltip>
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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
|
||||
|
||||
71
web/src/app/chat/message/copyingUtils.tsx
Normal file
71
web/src/app/chat/message/copyingUtils.tsx
Normal file
@ -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]);
|
||||
});
|
||||
};
|
||||
@ -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 (
|
||||
content: string | { html: string; plainText: string }
|
||||
) => {
|
||||
const copyToClipboard = async () => {
|
||||
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(
|
||||
[typeof content === "string" ? content : content.html],
|
||||
{ type: "text/html" }
|
||||
),
|
||||
"text/plain": new Blob(
|
||||
[typeof content === "string" ? content : content.plainText],
|
||||
{ type: "text/plain" }
|
||||
),
|
||||
"text/html": new Blob([content], { type: "text/html" }),
|
||||
"text/plain": new Blob([content], { type: "text/plain" }),
|
||||
});
|
||||
await navigator.clipboard.write([clipboardItem]);
|
||||
} catch (err) {
|
||||
// Fallback to basic text copy if HTML copy fails
|
||||
await navigator.clipboard.writeText(
|
||||
typeof content === "string" ? content : content.plainText
|
||||
);
|
||||
if (content) {
|
||||
await navigator.clipboard.writeText(content);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -38,9 +41,7 @@ export function CopyButton({
|
||||
<HoverableIcon
|
||||
icon={copyClicked ? <CheckmarkIcon /> : <CopyMessageIcon />}
|
||||
onClick={() => {
|
||||
if (content) {
|
||||
copyToClipboard(content);
|
||||
}
|
||||
copyToClipboard();
|
||||
onClick && onClick();
|
||||
|
||||
setCopyClicked(true);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user