From 9d1fdea097d0b4098a06f707f73fe7e991f00a73 Mon Sep 17 00:00:00 2001 From: Shibani Basava Date: Tue, 7 Nov 2023 17:33:21 +0000 Subject: [PATCH] fix: change to use marked --- package-lock.json | 51 +++++----------------------- packages/chat-component/package.json | 2 +- packages/chat-component/src/main.ts | 9 ++--- packages/chat-component/src/style.ts | 7 ++-- 4 files changed, 15 insertions(+), 54 deletions(-) diff --git a/package-lock.json b/package-lock.json index 62b2c6c3..3311a597 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5413,17 +5413,6 @@ "once": "^1.4.0" } }, - "node_modules/entities": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", - "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==", - "engines": { - "node": ">=0.12" - }, - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, "node_modules/env-paths": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", @@ -8928,14 +8917,6 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "peer": true }, - "node_modules/linkify-it": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz", - "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==", - "dependencies": { - "uc.micro": "^1.0.1" - } - }, "node_modules/lint-staged": { "version": "14.0.1", "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-14.0.1.tgz", @@ -9255,19 +9236,15 @@ "tmpl": "1.0.5" } }, - "node_modules/markdown-it": { - "version": "13.0.2", - "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz", - "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==", - "dependencies": { - "argparse": "^2.0.1", - "entities": "~3.0.1", - "linkify-it": "^4.0.1", - "mdurl": "^1.0.1", - "uc.micro": "^1.0.5" - }, + "node_modules/marked": { + "version": "9.1.5", + "resolved": "https://registry.npmjs.org/marked/-/marked-9.1.5.tgz", + "integrity": "sha512-14QG3shv8Kg/xc0Yh6TNkMj90wXH9mmldi5941I2OevfJ/FQAFLEwtwU2/FfgSAOMlWHrEukWSGQf8MiVYNG2A==", "bin": { - "markdown-it": "bin/markdown-it.js" + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 16" } }, "node_modules/md5": { @@ -9279,11 +9256,6 @@ "is-buffer": "~1.1.6" } }, - "node_modules/mdurl": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", - "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==" - }, "node_modules/media-typer": { "version": "0.3.0", "license": "MIT", @@ -12871,11 +12843,6 @@ "node": ">=14.17" } }, - "node_modules/uc.micro": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", - "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" - }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -13585,7 +13552,7 @@ "dependencies": { "dompurify": "^3.0.6", "lit": "^2.8.0", - "markdown-it": "^13.0.2" + "marked": "^9.1.5" }, "devDependencies": { "@types/dompurify": "^3.0.3", diff --git a/packages/chat-component/package.json b/packages/chat-component/package.json index 6fb44b03..c91e3c53 100644 --- a/packages/chat-component/package.json +++ b/packages/chat-component/package.json @@ -24,7 +24,7 @@ "dependencies": { "dompurify": "^3.0.6", "lit": "^2.8.0", - "markdown-it": "^13.0.2" + "marked": "^9.1.5" }, "devDependencies": { "@types/dompurify": "^3.0.3", diff --git a/packages/chat-component/src/main.ts b/packages/chat-component/src/main.ts index e05e8a15..73d51e96 100644 --- a/packages/chat-component/src/main.ts +++ b/packages/chat-component/src/main.ts @@ -9,7 +9,6 @@ import { parseStreamedMessages } from './core/parser/index.js'; import { mainStyle } from './style.js'; import { getTimestamp, processText } from './utils/index.js'; import { unsafeSVG } from 'lit/directives/unsafe-svg.js'; -import markdownIt from 'markdown-it'; // TODO: allow host applications to customize these icons @@ -20,6 +19,7 @@ import iconCopyToClipboard from '../public/svg/copy-icon.svg?raw'; import iconSend from '../public/svg/send-icon.svg?raw'; import iconClose from '../public/svg/close-icon.svg?raw'; import iconQuestion from '../public/svg/question-icon.svg?raw'; +import { marked } from 'marked'; /** * A chat component that allows the user to ask questions and get answers from an API. @@ -32,11 +32,6 @@ import iconQuestion from '../public/svg/question-icon.svg?raw'; * @fires chat-component#defaultQuestionClicked - Fired when the user clicks on a default question * */ -const md = markdownIt({ - html: true, - linkify: true, -}); - @customElement('chat-component') export class ChatComponent extends LitElement { //-- @@ -232,7 +227,7 @@ export class ChatComponent extends LitElement { const previewer = this.shadowRoot?.querySelector('#citation-previewer'); if (previewer) { const markdownContent = await response.text(); - previewer.innerHTML = DOMPurify.sanitize(md.render(markdownContent)); + previewer.innerHTML = DOMPurify.sanitize(marked.parse(markdownContent)); } } } diff --git a/packages/chat-component/src/style.ts b/packages/chat-component/src/style.ts index 2bb935c1..077b8b7b 100644 --- a/packages/chat-component/src/style.ts +++ b/packages/chat-component/src/style.ts @@ -405,10 +405,6 @@ export const mainStyle = css` } .items__listItem--citation.active { background-color: var(--accent-high); - - .items__link { - color: var(--white); - } } .items__listItem--citation:not(first-child) { margin-left: 5px; @@ -417,6 +413,9 @@ export const mainStyle = css` text-decoration: none; color: var(--text-color); } + .items__listItem--citation.active .items__link { + color: var(--white); + } .steps .items__listItem--step { padding: 5px 0; border-bottom: 1px solid var(--light-gray);