From bb69d7bf7edba1f18acf3a37f6cbe9442bae38a2 Mon Sep 17 00:00:00 2001 From: Sensational Code Date: Sat, 20 Jul 2024 21:54:33 -0700 Subject: [PATCH 1/9] Install marked, marked-highlight, and highlight.js npm packages --- src/ui/UserPortal/package-lock.json | 30 +++++++++++++++++++++++++++++ src/ui/UserPortal/package.json | 3 +++ 2 files changed, 33 insertions(+) diff --git a/src/ui/UserPortal/package-lock.json b/src/ui/UserPortal/package-lock.json index 6d83ddda52..950e09b4b6 100644 --- a/src/ui/UserPortal/package-lock.json +++ b/src/ui/UserPortal/package-lock.json @@ -10,7 +10,10 @@ "@azure/app-configuration": "^1.4.1", "@azure/msal-browser": "^3.2.0", "@pinia/nuxt": "^0.5.1", + "highlight.js": "^11.10.0", "javascript-time-ago": "^2.5.9", + "marked": "^13.0.2", + "marked-highlight": "^2.1.3", "pinia": "^2.1.7", "primeicons": "^6.0.1", "primevue": "^3.35.0", @@ -8639,6 +8642,14 @@ "node": ">= 0.4" } }, + "node_modules/highlight.js": { + "version": "11.10.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz", + "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/hookable": { "version": "5.5.3", "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz", @@ -9874,6 +9885,25 @@ "node": "^16.14.0 || >=18.0.0" } }, + "node_modules/marked": { + "version": "13.0.2", + "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.2.tgz", + "integrity": "sha512-J6CPjP8pS5sgrRqxVRvkCIkZ6MFdRIjDkwUwgJ9nL2fbmM6qGQeB2C16hi8Cc9BOzj6xXzy0jyi0iPIfnMHYzA==", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/marked-highlight": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/marked-highlight/-/marked-highlight-2.1.3.tgz", + "integrity": "sha512-t35JWm2u8HanOJ+gSJBAYQ0Jgr3vy+gl7ORAXN8bSEQFHl5FYXH0A7YXVMrfhmKaSuBSy6LidXECn3U9Qv/dHA==", + "peerDependencies": { + "marked": ">=4 <14" + } + }, "node_modules/mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", diff --git a/src/ui/UserPortal/package.json b/src/ui/UserPortal/package.json index 4eae1add77..5a0ed29d4b 100644 --- a/src/ui/UserPortal/package.json +++ b/src/ui/UserPortal/package.json @@ -31,7 +31,10 @@ "@azure/app-configuration": "^1.4.1", "@azure/msal-browser": "^3.2.0", "@pinia/nuxt": "^0.5.1", + "highlight.js": "^11.10.0", "javascript-time-ago": "^2.5.9", + "marked": "^13.0.2", + "marked-highlight": "^2.1.3", "pinia": "^2.1.7", "primeicons": "^6.0.1", "primevue": "^3.35.0", From 4d907daf80bcd44f046bec9bdd063116bb8c9dcb Mon Sep 17 00:00:00 2001 From: Sensational Code Date: Sat, 20 Jul 2024 23:29:36 -0700 Subject: [PATCH 2/9] Install truncate-html npm package --- src/ui/UserPortal/package-lock.json | 96 ++++++++++++++++++++++++++--- src/ui/UserPortal/package.json | 1 + 2 files changed, 88 insertions(+), 9 deletions(-) diff --git a/src/ui/UserPortal/package-lock.json b/src/ui/UserPortal/package-lock.json index 950e09b4b6..86acc942c4 100644 --- a/src/ui/UserPortal/package-lock.json +++ b/src/ui/UserPortal/package-lock.json @@ -17,6 +17,7 @@ "pinia": "^2.1.7", "primeicons": "^6.0.1", "primevue": "^3.35.0", + "truncate-html": "^1.1.1", "vue-mention": "^2.0.0-alpha.3" }, "devDependencies": { @@ -5591,8 +5592,7 @@ "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", - "dev": true + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, "node_modules/brace-expansion": { "version": "2.0.1", @@ -5889,6 +5889,42 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/cheerio": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz", + "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==", + "dependencies": { + "cheerio-select": "^2.1.0", + "dom-serializer": "^2.0.0", + "domhandler": "^5.0.3", + "domutils": "^3.0.1", + "htmlparser2": "^8.0.1", + "parse5": "^7.0.0", + "parse5-htmlparser2-tree-adapter": "^7.0.0" + }, + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/cheeriojs/cheerio?sponsor=1" + } + }, + "node_modules/cheerio-select": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz", + "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==", + "dependencies": { + "boolbase": "^1.0.0", + "css-select": "^5.1.0", + "css-what": "^6.1.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3", + "domutils": "^3.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -6319,7 +6355,6 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", - "dev": true, "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", @@ -6348,7 +6383,6 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", - "dev": true, "engines": { "node": ">= 6" }, @@ -6762,7 +6796,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", - "dev": true, "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", @@ -6776,7 +6809,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", - "dev": true, "funding": [ { "type": "github", @@ -6788,7 +6820,6 @@ "version": "5.0.3", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", - "dev": true, "dependencies": { "domelementtype": "^2.3.0" }, @@ -6803,7 +6834,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", - "dev": true, "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", @@ -8688,6 +8718,24 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/htmlparser2": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", + "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==", + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3", + "domutils": "^3.0.1", + "entities": "^4.4.0" + } + }, "node_modules/http-cache-semantics": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", @@ -10739,7 +10787,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", - "dev": true, "dependencies": { "boolbase": "^1.0.0" }, @@ -11324,6 +11371,29 @@ "parse-path": "^7.0.0" } }, + "node_modules/parse5": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", + "dependencies": { + "entities": "^4.4.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, + "node_modules/parse5-htmlparser2-tree-adapter": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz", + "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==", + "dependencies": { + "domhandler": "^5.0.2", + "parse5": "^7.0.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -13794,6 +13864,14 @@ "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", "dev": true }, + "node_modules/truncate-html": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/truncate-html/-/truncate-html-1.1.1.tgz", + "integrity": "sha512-8U5jgta8uapbnTId/h95a5EVFGld94V7pZ2iLH18lRppjx8+r/Zx0VdFYThRQEVjBhbG7W2Goiv+b1+kceeb7A==", + "dependencies": { + "cheerio": "^1.0.0-rc.12" + } + }, "node_modules/ts-api-utils": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", diff --git a/src/ui/UserPortal/package.json b/src/ui/UserPortal/package.json index 5a0ed29d4b..7abcb699a7 100644 --- a/src/ui/UserPortal/package.json +++ b/src/ui/UserPortal/package.json @@ -38,6 +38,7 @@ "pinia": "^2.1.7", "primeicons": "^6.0.1", "primevue": "^3.35.0", + "truncate-html": "^1.1.1", "vue-mention": "^2.0.0-alpha.3" } } From c7fec565e52b4decd3c9cebef037621d051c22b6 Mon Sep 17 00:00:00 2001 From: Sensational Code Date: Sat, 20 Jul 2024 23:29:45 -0700 Subject: [PATCH 3/9] Formatting --- src/ui/UserPortal/plugins/primevue.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/UserPortal/plugins/primevue.ts b/src/ui/UserPortal/plugins/primevue.ts index b8d7f839fb..b18aed897f 100644 --- a/src/ui/UserPortal/plugins/primevue.ts +++ b/src/ui/UserPortal/plugins/primevue.ts @@ -16,7 +16,6 @@ import OverlayPanel from 'primevue/overlaypanel'; import Badge from 'primevue/badge'; import BadgeDirective from 'primevue/badgedirective'; - import { defineNuxtPlugin } from '#app'; export default defineNuxtPlugin((nuxtApp) => { From 87fd9e3b3d5bafb93daf9fcf22f13f6400f627d2 Mon Sep 17 00:00:00 2001 From: Sensational Code Date: Sat, 20 Jul 2024 23:33:30 -0700 Subject: [PATCH 4/9] Render markdown and highlight code in messages --- src/ui/UserPortal/components/ChatMessage.vue | 67 +++++++++++++++----- 1 file changed, 51 insertions(+), 16 deletions(-) diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue index a55ef3de35..9a24e6893b 100644 --- a/src/ui/UserPortal/components/ChatMessage.vue +++ b/src/ui/UserPortal/components/ChatMessage.vue @@ -36,7 +36,7 @@ - {{ displayText }} +
@@ -128,6 +128,31 @@ import type { PropType } from 'vue'; import type { Message, CompletionPrompt } from '@/js/types'; import api from '@/js/api'; +import hljs from 'highlight.js'; +import 'highlight.js/styles/github-dark-dimmed.css'; +import { marked } from 'marked'; +import { markedHighlight } from 'marked-highlight'; +import truncate from 'truncate-html'; + +// marked.use(markedHighlight({ +// langPrefix: 'hljs language-', +// highlight(code, lang) { +// if (hljs.getLanguage(lang)) { +// return hljs.highlight(code, { language: lang }).value; +// } +// return hljs.highlightAuto(code).value; +// } +// })); + +const renderer = new marked.Renderer(); +renderer.code = (code, language) => { + const validLanguage = !!(language && hljs.getLanguage(language)); + const highlighted = validLanguage ? hljs.highlight(code, { language }).value : hljs.highlightAuto(code).value; + const languageClass = validLanguage ? `hljs language-${language}` : 'hljs'; + return `
${highlighted}
`; +}; +marked.use({ renderer }); + export default { name: 'ChatMessage', @@ -149,34 +174,44 @@ export default { return { prompt: {} as CompletionPrompt, viewPrompt: false, - displayText: '', + displayHtml: '', + currentWordIndex: 0, primaryButtonBg: this.$appConfigStore.primaryButtonBg, - primaryButtonText: this.$appConfigStore.primaryButtonText + primaryButtonText: this.$appConfigStore.primaryButtonText, }; }, + computed: { + compiledMarkdown() { + return marked(this.message.text); + } + }, + created() { if (this.showWordAnimation) { this.displayWordByWord(); } else { - this.displayText = this.message.text; + this.displayHtml = this.compiledMarkdown; } }, methods: { displayWordByWord() { - const words = this.message.text.split(' '); - let index = 0; - - const displayNextWord = () => { - if (index < words.length) { - this.displayText += words[index] + ' '; - index++; - setTimeout(displayNextWord, 10); - } - }; - - displayNextWord(); + if (this.currentWordIndex >= this.compiledMarkdown.length) return; + + this.currentWordIndex += 1; + this.displayHtml = truncate(this.compiledMarkdown, this.currentWordIndex, { + byWords: true, + stripTags: false, + ellipsis: '', + decodeEntities: false, + keepWhitespaces: true, + excludes: '', + reserveLastWord: false, + keepWhitespaces: true + }); + + setTimeout(this.displayWordByWord, 10); }, formatTimeStamp(timeStamp: string) { From 2c274f94f1179f3ceceb3ba0c2dfb626e7c13800 Mon Sep 17 00:00:00 2001 From: Sensational Code Date: Sat, 20 Jul 2024 23:33:53 -0700 Subject: [PATCH 5/9] Adjust styling --- src/ui/UserPortal/components/ChatMessage.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue index 9a24e6893b..7e5c42b933 100644 --- a/src/ui/UserPortal/components/ChatMessage.vue +++ b/src/ui/UserPortal/components/ChatMessage.vue @@ -295,7 +295,7 @@ export default { } .message__body { - white-space: pre-wrap; + // white-space: pre-wrap; overflow-wrap: break-word; padding-left: 12px; padding-right: 12px; From fd08f9ca80232eaf36d1d7a5575ba9ca66c3272d Mon Sep 17 00:00:00 2001 From: Sensational Code Date: Sat, 20 Jul 2024 23:40:25 -0700 Subject: [PATCH 6/9] Install dompurify npm package --- src/ui/UserPortal/package-lock.json | 6 ++++++ src/ui/UserPortal/package.json | 1 + 2 files changed, 7 insertions(+) diff --git a/src/ui/UserPortal/package-lock.json b/src/ui/UserPortal/package-lock.json index 86acc942c4..40f09efdaf 100644 --- a/src/ui/UserPortal/package-lock.json +++ b/src/ui/UserPortal/package-lock.json @@ -10,6 +10,7 @@ "@azure/app-configuration": "^1.4.1", "@azure/msal-browser": "^3.2.0", "@pinia/nuxt": "^0.5.1", + "dompurify": "^3.1.6", "highlight.js": "^11.10.0", "javascript-time-ago": "^2.5.9", "marked": "^13.0.2", @@ -6830,6 +6831,11 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/dompurify": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz", + "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==" + }, "node_modules/domutils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", diff --git a/src/ui/UserPortal/package.json b/src/ui/UserPortal/package.json index 7abcb699a7..2b6943bcb8 100644 --- a/src/ui/UserPortal/package.json +++ b/src/ui/UserPortal/package.json @@ -31,6 +31,7 @@ "@azure/app-configuration": "^1.4.1", "@azure/msal-browser": "^3.2.0", "@pinia/nuxt": "^0.5.1", + "dompurify": "^3.1.6", "highlight.js": "^11.10.0", "javascript-time-ago": "^2.5.9", "marked": "^13.0.2", From 5703f14444bb69f0ddce673313f917a052735e6c Mon Sep 17 00:00:00 2001 From: Sensational Code Date: Sat, 20 Jul 2024 23:40:48 -0700 Subject: [PATCH 7/9] Sanitize html content in messages --- src/ui/UserPortal/components/ChatMessage.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue index 7e5c42b933..191b46fdbe 100644 --- a/src/ui/UserPortal/components/ChatMessage.vue +++ b/src/ui/UserPortal/components/ChatMessage.vue @@ -133,6 +133,7 @@ import 'highlight.js/styles/github-dark-dimmed.css'; import { marked } from 'marked'; import { markedHighlight } from 'marked-highlight'; import truncate from 'truncate-html'; +import DOMPurify from 'dompurify'; // marked.use(markedHighlight({ // langPrefix: 'hljs language-', @@ -183,7 +184,7 @@ export default { computed: { compiledMarkdown() { - return marked(this.message.text); + return DOMPurify.sanitize(marked(this.message.text)); } }, From 565b8a799a34239c4672b214432665d4c158a58d Mon Sep 17 00:00:00 2001 From: Sensational Code Date: Sat, 20 Jul 2024 23:46:41 -0700 Subject: [PATCH 8/9] Remove commented out code --- src/ui/UserPortal/components/ChatMessage.vue | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue index 191b46fdbe..86b171171c 100644 --- a/src/ui/UserPortal/components/ChatMessage.vue +++ b/src/ui/UserPortal/components/ChatMessage.vue @@ -135,16 +135,6 @@ import { markedHighlight } from 'marked-highlight'; import truncate from 'truncate-html'; import DOMPurify from 'dompurify'; -// marked.use(markedHighlight({ -// langPrefix: 'hljs language-', -// highlight(code, lang) { -// if (hljs.getLanguage(lang)) { -// return hljs.highlight(code, { language: lang }).value; -// } -// return hljs.highlightAuto(code).value; -// } -// })); - const renderer = new marked.Renderer(); renderer.code = (code, language) => { const validLanguage = !!(language && hljs.getLanguage(language)); From 42cab42f747882583cb751b74157d69984374257 Mon Sep 17 00:00:00 2001 From: Sensational Code Date: Sun, 21 Jul 2024 00:11:30 -0700 Subject: [PATCH 9/9] Use word count instead of character count --- src/ui/UserPortal/components/ChatMessage.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/UserPortal/components/ChatMessage.vue b/src/ui/UserPortal/components/ChatMessage.vue index 86b171171c..6c9bbf7466 100644 --- a/src/ui/UserPortal/components/ChatMessage.vue +++ b/src/ui/UserPortal/components/ChatMessage.vue @@ -188,7 +188,7 @@ export default { methods: { displayWordByWord() { - if (this.currentWordIndex >= this.compiledMarkdown.length) return; + if (this.currentWordIndex >= this.compiledMarkdown.split(/\s+/).length) return; this.currentWordIndex += 1; this.displayHtml = truncate(this.compiledMarkdown, this.currentWordIndex, {