Using markdown-it instead of marked as the markdown parser significantly improves the flickering issue during message rendering.

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img alt="demo" src="./demos/demo.png?v=1">
+  <img alt="demo" src="./demos/demo.gif?v=1">
 </p>
 
 [English](./README.md) | [中文](./docs/zh/README.md)
@@ -26,15 +26,15 @@ Version 2 is a major update that separates the backend functionality as an indep
 
 If you still wish to use the old version, please visit the [v1 branch](https://github.com/WongSaang/chatgpt-ui/tree/v1).
 
-Version 2 introduces the following new features:
+</details>
+
+## Version 2 introduces the following new features:
 
 - 😉 Separation of the frontend and backend, with the backend now using the Python-based Django framework.
 - 😘 User authentication, supporting multiple users.
 - 😀 Ability to store data in an external database (defaulting to Sqlite).
 - 😎 Session persistence, allowing the API to answer questions based on your context.
 
-</details>
-
 ## 🚀 One-click deployment <a name="one-click-depolyment"></a>
 
 Note: This script has only been tested on Ubuntu Server 22.04 LTS.

components/MsgContent.vue

@@ -1,34 +1,36 @@
 <script setup>
-import { marked } from "marked"
 import hljs from "highlight.js"
+import MarkdownIt from 'markdown-it'
 import copy from 'copy-to-clipboard'
 
-// Part of the code comes from this project https://github.com/arronhunt/highlightjs-copy, thanks to the author's contribution
 
-hljs.addPlugin({
-  'after:highlightElement': ({ el, result, text }) => {
-    let header = el.parentElement.querySelector(".hljs-code-header");
-    if (header) {
-      header.remove();
+const md = new MarkdownIt({
+  linkify: true,
+  highlight(code, lang) {
+    const language = hljs.getLanguage(lang) ? lang : 'plaintext'
+    return `<pre class="hljs-code-container my-3"><div class="hljs-code-header d-flex align-center justify-space-between bg-grey-darken-3 pa-1"><span class="pl-2 text-caption">${language}</span><button class="hljs-copy-button" data-copied="false">Copy</button></div><code class="hljs language-${language}">${hljs.highlight(code, { language: language, ignoreIllegals: true }).value}</code></pre>`
+  },
+})
+
+const props = defineProps(['content'])
+
+const contentHtml = ref('')
+
+const contentElm = ref(null)
+
+watchEffect(() => {
+  contentHtml.value = props.content ? md.render(props.content) : ''
+})
+
+const bindCopyCodeToButtons = () => {
+  if (!contentElm.value) {
+    return
   }
-
-    header = Object.assign(document.createElement("div"), {
-      className: "hljs-code-header d-flex align-center justify-space-between bg-grey-darken-3 pa-1",
-      innerHTML: `<div class="pl-2 text-caption">${result.language}</div>`
-    });
-
-    let copyButton = Object.assign(document.createElement("button"), {
-      innerHTML: "Copy",
-      className: "hljs-copy-button",
-    });
-    copyButton.dataset.copied = false;
-
-    header.append(copyButton);
-    //
-    el.parentElement.classList.add("d-flex","flex-column", "my-3");
-    el.parentElement.prepend(header);
+  contentElm.value.querySelectorAll('.hljs-code-container').forEach((codeContainer) => {
+    const copyButton = codeContainer.querySelector('.hljs-copy-button');
+    const codeBody = codeContainer.querySelector('code');
     copyButton.onclick = function () {
-      copy(text);
+      copy(codeBody.textContent ?? '');
 
       copyButton.innerHTML = "Copied!";
       copyButton.dataset.copied = 'true';
@@ -38,39 +40,15 @@ hljs.addPlugin({
         copyButton.dataset.copied = 'false';
       }, 2000);
     };
-  }
-});
-
-marked.setOptions({
-  // highlight: function (code, lang) {
-  //   const language = hljs.getLanguage(lang) ? lang : 'plaintext'
-  //   return hljs.highlight(code, { language }).value
-  // },
-  langPrefix: 'hljs language-', // highlight.js css class prefix
-})
-
-const props = defineProps(['content'])
-
-const contentHtml = ref('')
-
-const contentElm = ref(null)
-
-const highlightCode = () => {
-  if (!contentElm.value) {
-    return
-  }
-  contentElm.value.querySelectorAll('pre code').forEach((block) => {
-    hljs.highlightElement(block)
   })
 }
 
-watchEffect(() => {
-  contentHtml.value = props.content ? marked(props.content) : ''
-  if (props.content && props.content.endsWith('```')) {
-    nextTick(() => {
-      highlightCode()
+onMounted(() => {
+  bindCopyCodeToButtons()
 })
-  }
+
+onUpdated(() => {
+  bindCopyCodeToButtons()
 })
 
 </script>
@@ -79,7 +57,7 @@ watchEffect(() => {
   <div
       ref="contentElm"
       v-html="contentHtml"
-      class="chat-msg-content text-justify"
+      class="chat-msg-content"
   ></div>
 </template>
 
@@ -87,6 +65,10 @@ watchEffect(() => {
 .chat-msg-content ol {
   list-style-position: inside;
 }
+.hljs-code-container {
+  border-radius: 3px;
+  overflow: hidden;
+}
 .hljs-copy-button{
   width:2rem;height:2rem;text-indent:-9999px;color:#fff;
   border-radius:.25rem;border:1px solid #ffffff22;

docs/zh/README.md

@@ -1,8 +1,8 @@
 <p align="center">
-  <img alt="demo" src="./demos/demo.png?v=1">
+  <img alt="demo" src="../../demos/demo.gif?v=1">
 </p>
 
-[English](./README.md) | [中文](./docs/zh/README.md)
+[English](../../README.md) | [中文](./docs/zh/README.md)
 
 # ChatGPT UI
 

package.json

@@ -18,7 +18,7 @@
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",
     "is-mobile": "^3.1.1",
-    "marked": "^4.2.12",
+    "markdown-it": "^13.0.1",
     "nanoid": "^4.0.1",
     "vuetify": "^3.0.6"
   },

pages/index.vue

@@ -24,16 +24,19 @@ const processMessageQueue = () => {
   }
   isProcessingQueue = true
   const nextMessage = messageQueue.shift()
-  let wordIndex = 0;
-  const intervalId = setInterval(() => {
-    currentConversation.value.messages[currentConversation.value.messages.length - 1].message += nextMessage[wordIndex]
-    wordIndex++
-    if (wordIndex === nextMessage.length) {
-      clearInterval(intervalId)
+  currentConversation.value.messages[currentConversation.value.messages.length - 1].message += nextMessage
   isProcessingQueue = false
   processMessageQueue()
-    }
-  }, 50)
+  // let wordIndex = 0;
+  // const intervalId = setInterval(() => {
+  //   currentConversation.value.messages[currentConversation.value.messages.length - 1].message += nextMessage[wordIndex]
+  //   wordIndex++
+  //   if (wordIndex === nextMessage.length) {
+  //     clearInterval(intervalId)
+  //     isProcessingQueue = false
+  //     processMessageQueue()
+  //   }
+  // }, 50)
 }
 
 let ctrl

yarn.lock

@@ -2005,6 +2005,11 @@ entities@^2.0.0:
   resolved "https://registry.npmmirror.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 errno@^0.1.3:
   version "0.1.8"
   resolved "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -2801,6 +2806,13 @@ lilconfig@^2.0.3:
   resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
   integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
 
+linkify-it@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
+  integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 listhen@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/listhen/-/listhen-1.0.2.tgz#3332af0cf77dd914e12d125c70a9c6aed9537033"
@@ -2950,6 +2962,17 @@ make-dir@^3.1.0, make-dir@~3.1.0:
   dependencies:
     semver "^6.0.0"
 
+markdown-it@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.npmmirror.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
+  integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~3.0.1"
+    linkify-it "^4.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 marked@^4.2.12:
   version "4.2.12"
   resolved "https://registry.npmmirror.com/marked/-/marked-4.2.12.tgz#d69a64e21d71b06250da995dcd065c11083bebb5"
@@ -2965,6 +2988,11 @@ mdn-data@2.0.14:
   resolved "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+
 memory-fs@^0.5.0:
   version "0.5.0"
   resolved "https://registry.npmmirror.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
@@ -4266,6 +4294,11 @@ type-fest@^3.0.0:
   resolved "https://registry.npmmirror.com/type-fest/-/type-fest-3.5.7.tgz#1ee9efc9a172f4002c40b896689928a7bba537f2"
   integrity sha512-6J4bYzb4sdkcLBty4XW7F18VPI66M4boXNE+CY40532oq2OJe6AVMB5NmjOp6skt/jw5mRjz/hLRpuglz0U+FA==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.npmmirror.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 ufo@^1.0.0, ufo@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/ufo/-/ufo-1.0.1.tgz#64ed43b530706bda2e4892f911f568cf4cf67d29"