klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 13:25:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add a subtle check mark when the copy button is selected

Browse Source
This commit is contained in:
sabaimran
2024-10-07 09:41:03 -07:00
parent 405c047c0c
commit e4a8a69bc8
1 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/interface/web/app/components/chatMessage/chatMessage.tsx
View File

@@ -25,6 +25,7 @@ import {
Pause, Pause,
Palette, Palette,
ClipboardText, ClipboardText,
Check,
} from "@phosphor-icons/react"; } from "@phosphor-icons/react";
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
@@ -377,8 +378,9 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
if (messageRef.current) { if (messageRef.current) {
const preElements = messageRef.current.querySelectorAll("pre > .hljs"); const preElements = messageRef.current.querySelectorAll("pre > .hljs");
preElements.forEach((preElement) => { preElements.forEach((preElement) => {
if (!preElement.querySelector(`${styles.codeCopyButton}`)) {
const copyButton = document.createElement("button"); const copyButton = document.createElement("button");
const copyIcon = <ClipboardText size={24} weight="bold" />; const copyIcon = <ClipboardText size={24} />;
createRoot(copyButton).render(copyIcon); createRoot(copyButton).render(copyIcon);
copyButton.className = `hljs ${styles.codeCopyButton}`; copyButton.className = `hljs ${styles.codeCopyButton}`;
@@ -390,15 +392,19 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
textContent = textContent.replace(/^Copy/, ""); textContent = textContent.replace(/^Copy/, "");
textContent = textContent.trim(); textContent = textContent.trim();
navigator.clipboard.writeText(textContent); navigator.clipboard.writeText(textContent);
// Replace the copy icon with a checkmark
const copiedIcon = <Check size={24} />;
createRoot(copyButton).render(copiedIcon);
}); });
preElement.prepend(copyButton); preElement.prepend(copyButton);
}
}); });
renderMathInElement(messageRef.current, { renderMathInElement(messageRef.current, {
delimiters: [ delimiters: [
{ left: "$$", right: "$$", display: true }, { left: "$$", right: "$$", display: true },
{ left: "\\[", right: "\\]", display: true }, { left: "\\[", right: "\\]", display: true },
{ left: "$", right: "$", display: false },
{ left: "\\(", right: "\\)", display: false }, { left: "\\(", right: "\\)", display: false },
], ],
}); });