fix: change to use marked

Azure-Samples · Nov 7, 2023 · 9d1fdea · 9d1fdea
1 parent b1baf35
commit 9d1fdea
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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);