feat: support copying code block and highlighting user input's code

support copying code block and highlighting user input's code

fix lisiur#52

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "install": "cd web && pnpm install",
     "dev": "cd gui && RUST_LOG=chat_wizard_service=debug cargo tauri dev --no-watch",
+    "build": "pnpm run build:gui",
     "build:web": "cd web && pnpm build",
     "build:gui": "cd gui && cargo tauri build",
     "build:server": "pnpm run build:web && cd server && cargo build",

web/src/components/chat/History.tsx

@@ -31,7 +31,7 @@ import {
   UserMessage,
 } from "../../models/message";
 import { interceptLink } from "../../utils/interceptLink";
-import mdRender from "../../utils/mdRender";
+import { renderMarkdown } from "../../utils/mdRender";
 import { writeToClipboard } from "../../utils/api";
 import {
   Clipboard20Regular as CopyIcon,
@@ -201,16 +201,15 @@ export default defineComponent({
       if (codeBlockAssignNum % 2 === 1) {
         content += "\n```";
       }
-      const html = mdRender(content);
+      const html = renderMarkdown(content);
       return (
         <div
           key={msg.id}
           class="relative flex justify-start items-start px-4 pb-4 group"
           id={`assistant-${msg.id}`}
         >
           <div
-            class="markdown-root inline-block px-3 ml-2 rounded-t-xl rounded-r-xl z-1"
-            style="background-color: var(--assistant-msg-bg-color); color: var(--assistant-msg-color)"
+            class="markdown-root assistant-msg inline-block px-3 ml-2 rounded-t-xl rounded-r-xl z-1"
             v-html={html}
           ></div>
           {msg.done ? (
@@ -230,14 +229,13 @@ export default defineComponent({
     }
 
     function renderUserMessage(msg: UserMessage) {
+      const html = renderMarkdown(msg.content);
       return (
         <div key={msg.id} class="flex items-start px-4 pb-4 group relative">
           <div
-            class="markdown-root inline-block px-3 ml-2 rounded-t-xl rounded-r-xl z-1"
-            style="background-color: var(--user-msg-bg-color); color: var(--user-msg-color)"
-          >
-            <p>{msg.content}</p>
-          </div>
+            class="markdown-root user-msg inline-block px-3 ml-2 rounded-t-xl rounded-r-xl z-1"
+            v-html={html}
+          ></div>
           <div
             class="group-hover:grid w-full gap-1 hidden absolute bottom-[-.6rem] left-5 text-xs"
             style="grid-template-columns: repeat(auto-fit, minmax(0, 1rem));"

web/src/style.css

@@ -30,6 +30,16 @@ html, body, #app {
   word-break: break-word;
 }
 
+.markdown-root.assistant-msg {
+  color: var(--assistant-msg-color);
+  background-color: var(--assistant-msg-bg-color);
+}
+
+.markdown-root.user-msg {
+  color: var(--user-msg-color);
+  background-color: var(--user-msg-bg-color);
+}
+
 .markdown-root p {
   padding: .5rem 0;
 }

web/src/themes/dark/vars.ts

@@ -22,6 +22,9 @@ const vars: ThemeVars = {
     switcherColor: "#918f93",
     assistantMsgBgColor: "#2c2c2c",
     assistantMsgColor: "#fff",
+    codeBlockColor: "#fff",
+    codeBlockLangBgColor: "#222",
+    codeBlockLangColor: "#ccc",
     userMsgBgColor: "#59b269",
     userMsgColor: "#000",
     activeMenuBgColor: "#363636",

web/src/themes/light/vars.ts

@@ -22,6 +22,9 @@ const vars: ThemeVars = {
     switcherColor: "#918f93",
     assistantMsgBgColor: "#ffffff",
     assistantMsgColor: "#000",
+    codeBlockColor: "#000",
+    codeBlockLangBgColor: "#ebebeb",
+    codeBlockLangColor: "#000",
     userMsgBgColor: "#18A058",
     userMsgColor: "#fff",
     activeMenuBgColor: "#dedede",

web/src/themes/types.ts

@@ -6,6 +6,9 @@ export interface ThemeVars extends GlobalThemeOverrides {
     switcherColor: string;
     assistantMsgBgColor: string;
     assistantMsgColor: string;
+    codeBlockColor: string;
+    codeBlockLangBgColor: string;
+    codeBlockLangColor: string;
     userMsgBgColor: string;
     userMsgColor: string;
     activeMenuBgColor: string;

web/src/utils/mdRender.ts

@@ -1,6 +1,11 @@
 import { marked } from "marked";
 import hljs from "highlight.js";
 import { onThemeChanged, getTheme } from "../themes";
+import { i18n } from "../hooks/i18n";
+import { writeToClipboard } from "./api";
+import { message } from "./prompt";
+
+const { t } = i18n.global;
 
 marked.setOptions({
   highlight(code, lang) {
@@ -23,4 +28,43 @@ function reloadTheme() {
   }
 }
 
+const renderer = new marked.Renderer();
+renderer.code = (code, lang) => {
+  lang ??= "plaintext";
+  const language = hljs.getLanguage(lang) ? lang : "plaintext";
+  const id = "id_" + Math.random().toString(36).slice(2);
+  (window as any)[id] = () => {
+    writeToClipboard(code);
+    message.success(t("common.copy.success"));
+  }
+  return `
+    <div class="code-wrapper relative">
+      <pre style="padding: 1.5rem 1rem !important;"><code lang="${language}" class="text-[var(--code-block-color)]">${
+    hljs.highlight(code, { language }).value
+  }</code></pre>
+      <div class="absolute top-0 left-0 rounded py-1 px-[0.5rem] cursor-pointer text-xs text-gray-500 text-[var(--code-block-lang-color)]"
+      onclick="${id}()"
+      >
+        ${t("common.copy")}
+      </div>
+      <div class="absolute top-0 right-0 py-1 px-[0.5rem] cursor-pointer text-xs text-gray-500 text-[var(--code-block-lang-color)] bg-[var(--code-block-lang-bg-color)] rounded-tr-md rounded-bl-md">
+        ${language}
+      </div>
+    </div>
+    `;
+};
+renderer.html = (html) => {
+  return `<p>${escapeHtml(html)}</p>`;
+};
+
+export function renderMarkdown(md: string) {
+  return marked(md, { renderer });
+}
+
+function escapeHtml(str: string) {
+  let div = document.createElement("div");
+  div.innerText = str;
+  return div.innerHTML;
+}
+
 export default marked.parse;