morgan
/
chatgpt-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move to Code.svelte

This commit is contained in:
littlemoonstones 2023-03-12 16:22:43 +08:00
parent 52593b4120
commit 9b68ec3f45
2 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/lib/Chat.svelte
View File

@ -5,7 +5,6 @@
import type { Request, Response, Message, Settings } from "./Types.svelte"; import type { Request, Response, Message, Settings } from "./Types.svelte";
import Code from "./Code.svelte"; import Code from "./Code.svelte";
import copy from "copy-to-clipboard";
import { afterUpdate, onMount } from "svelte"; import { afterUpdate, onMount } from "svelte";
import SvelteMarkdown from "svelte-markdown"; import SvelteMarkdown from "svelte-markdown";
@ -97,8 +96,7 @@
// Scroll to the bottom of the page after any updates to the messages array // Scroll to the bottom of the page after any updates to the messages array
window.scrollTo(0, document.body.scrollHeight); window.scrollTo(0, document.body.scrollHeight);
input.focus(); input.focus();
copyFunction();
copyFunction();
}); });
// Marked options // Marked options
@ -262,28 +260,6 @@
} }
}; };
// copy code block
// reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
const copyFunction = () => {
const codeBlocks = document.querySelectorAll("pre");
const showCopyMessage = "Copy";
codeBlocks.forEach((block) => {
const copyPrompt = document.createElement("div");
copyPrompt.className = "copy-prompt";
const copyPromptText = document.createElement("button");
copyPromptText.classList.add("button", "is-light", "is-outlined", "is-small", "is-responsive");
copyPromptText.innerHTML = showCopyMessage;
copyPrompt.appendChild(copyPromptText);
block.appendChild(copyPrompt);
block.querySelector(".copy-prompt > button").addEventListener("click", (evt) => {
copy(block.querySelector("code").textContent);
block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
setTimeout(() => {
block.querySelector(".copy-prompt > button").innerHTML = showCopyMessage;
}, 1000);
});
});
};
</script> </script>
<nav class="level chat-header"> <nav class="level chat-header">

32
src/lib/Code.svelte
View File

@ -7,6 +7,10 @@
// Style depends on system theme // Style depends on system theme
const style = window.matchMedia("(prefers-color-scheme: dark)").matches ? githubDark : github; const style = window.matchMedia("(prefers-color-scheme: dark)").matches ? githubDark : github;
// Copy function for the code block
import copy from "copy-to-clipboard";
import { afterUpdate } from "svelte";
// Import all supported languages // Import all supported languages
import { import {
javascript, javascript,
@ -68,6 +72,34 @@
default: default:
language = plaintext; language = plaintext;
} }
// For copying code
// reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
const copyFunction = () => {
const codeBlocks = document.querySelectorAll("pre");
const showCopyMessage = "Copy";
codeBlocks.forEach((block) => {
const copyPrompt = document.createElement("div");
copyPrompt.className = "copy-prompt";
const copyPromptText = document.createElement("button");
copyPromptText.classList.add("button", "is-light", "is-outlined", "is-small", "is-responsive");
copyPromptText.innerHTML = showCopyMessage;
copyPrompt.appendChild(copyPromptText);
block.appendChild(copyPrompt);
block.querySelector(".copy-prompt > button").addEventListener("click", (evt) => {
copy(block.querySelector("code").textContent);
block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
setTimeout(() => {
block.querySelector(".copy-prompt > button").innerHTML = showCopyMessage;
}, 1000);
});
});
};
afterUpdate(() => {
copyFunction();
})
</script> </script>
<svelte:head> <svelte:head>