text);
+global.marked = {
+ use: mockMarkedUse,
+ parse: mockMarkedParse,
+};
+
+const SELECTORS = {
+ textAnswerContainer: 'span.generated-answer-content__answer',
+ markdownAnswerContainer: 'div.generated-answer-content__answer',
+};
+
+const defaultOptions = {
+ isStreaming: false,
+ answerContentFormat: 'text/plain',
+ answer: '',
+};
+
+function createTestComponent(options = defaultOptions) {
+ const element = createElement('c-quantic-generated-answer-content', {
+ is: QuanticGeneratedAnswerContent,
+ });
+ for (const [key, value] of Object.entries(options)) {
+ element[key] = value;
+ }
+
+ document.body.appendChild(element);
+ return element;
+}
+
+// Helper function to wait until the microtask queue is empty.
+function flushPromises() {
+ // eslint-disable-next-line @lwc/lwc/no-async-operation
+ return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+describe('c-quantic-generated-answer-content', () => {
+ function cleanup() {
+ // The jsdom instance is shared across test cases in a single file so reset the DOM
+ while (document.body.firstChild) {
+ document.body.removeChild(document.body.firstChild);
+ }
+ jest.clearAllMocks();
+ }
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ describe('text/plain answer content', () => {
+ it('should render a simple text/plain answer when not streaming', async () => {
+ const element = createTestComponent({
+ ...defaultOptions,
+ answer: 'Hello, world!',
+ });
+ await flushPromises();
+
+ const answerContent = element.shadowRoot.querySelector(
+ SELECTORS.textAnswerContainer
+ );
+
+ expect(answerContent.textContent).toBe('Hello, world!');
+ expect(answerContent.className).toBe('generated-answer-content__answer');
+ });
+
+ it('should render a text/plain answer when streaming', async () => {
+ const element = createTestComponent({
+ ...defaultOptions,
+ answer: 'Hello, world!',
+ isStreaming: true,
+ });
+ await flushPromises();
+
+ const answerContent = element.shadowRoot.querySelector(
+ SELECTORS.textAnswerContainer
+ );
+
+ expect(answerContent.textContent).toBe('Hello, world!');
+ expect(answerContent.className).toContain(
+ 'generated-answer-content__answer--streaming'
+ );
+ });
+ });
+
+ describe('text/markdown answer content', () => {
+ it('should render a simple markdown answer when not streaming', async () => {
+ const element = createTestComponent({
+ ...defaultOptions,
+ answerContentFormat: 'text/markdown',
+ answer: 'Hello, world!',
+ });
+ await flushPromises();
+
+ const answerContent = element.shadowRoot.querySelector(
+ SELECTORS.markdownAnswerContainer
+ );
+
+ expect(answerContent.textContent).toBe('Hello, world!');
+ expect(answerContent.className).toBe('generated-answer-content__answer');
+ });
+
+ it('should render a simple markdown answer when streaming', async () => {
+ const element = createTestComponent({
+ ...defaultOptions,
+ answerContentFormat: 'text/markdown',
+ answer: 'Hello, world!',
+ isStreaming: true,
+ });
+ await flushPromises();
+
+ const answerContent = element.shadowRoot.querySelector(
+ SELECTORS.markdownAnswerContainer
+ );
+
+ expect(answerContent.textContent).toBe('Hello, world!');
+ expect(answerContent.className).toContain(
+ 'generated-answer-content__answer--streaming'
+ );
+ });
+ });
+});
diff --git a/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/quanticGeneratedAnswerContent.js b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/quanticGeneratedAnswerContent.js
new file mode 100644
index 00000000000..0e79e5d597d
--- /dev/null
+++ b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/quanticGeneratedAnswerContent.js
@@ -0,0 +1,116 @@
+import {
+ transformMarkdownToHtml,
+ loadMarkdownDependencies,
+} from 'c/quanticUtils';
+import {LightningElement, api} from 'lwc';
+// @ts-ignore
+import generatedMarkdownContentTemplate from './templates/generatedMarkdownContent.html';
+// @ts-ignore
+import generatedTextContentTemplate from './templates/generatedTextContent.html';
+
+/**
+ * The `QuanticGeneratedAnswerContent` component displays the generated answer content.
+ * @category Internal
+ * @example
+ *
+ */
+export default class QuanticGeneratedAnswerContent extends LightningElement {
+ /**
+ * If the answer is streaming, it will render a blinking cursor at the end of the answer.
+ * @api
+ * @type {boolean}
+ */
+ @api isStreaming;
+ /**
+ * The format of the answer content. Can be either `text/plain` or `text/markdown`.
+ * When `text/markdown` is selected, the answer content will be converted from markdown to HTML.
+ * @api
+ * @type {'text/plain' | 'text/markdown'}
+ * @default {'text/plain'}
+ */
+ @api answerContentFormat = 'text/plain';
+ /**
+ * The answer content to display.
+ * @api
+ * @type {string}
+ */
+ @api
+ get answer() {
+ return this._answer;
+ }
+ set answer(value) {
+ this._answer = value;
+ if (
+ this.answerContentFormat === 'text/markdown' &&
+ this._markedLoaded &&
+ this._domPurifyLoaded
+ ) {
+ this.updateHtmlContent();
+ }
+ }
+
+ _answer;
+ _markedLoaded = false;
+ _domPurifyLoaded = false;
+
+ connectedCallback() {
+ if (this.answerContentFormat === 'text/markdown') {
+ loadMarkdownDependencies(this)
+ .then(() => {
+ // @ts-ignore
+ this._markedLoaded = true;
+ // @ts-ignore
+ this._domPurifyLoaded = true;
+ this.updateHtmlContent();
+ })
+ .catch((error) => {
+ console.error('Error loading the Marked library.', error);
+ this._markedLoadingError = true;
+ });
+ }
+ }
+
+ updateHtmlContent() {
+ const answerContainer = this.template.querySelector(
+ '.generated-answer-content__answer'
+ );
+ if (this._markedLoaded && this._domPurifyLoaded) {
+ // Transform the markdown answer to HTML and update the innerHTML of the container
+ const newHTMLContent =
+ // @ts-ignore
+ (window.marked &&
+ // @ts-ignore
+ transformMarkdownToHtml(this.answer, window.marked)) ||
+ '';
+ if (answerContainer) {
+ try {
+ // @ts-ignore
+ // eslint-disable-next-line @lwc/lwc/no-inner-html
+ answerContainer.innerHTML = DOMPurify.sanitize(newHTMLContent);
+ } catch (error) {
+ // DOMPurify is not compatible with Locker Service, but Locker already sanitizes HTML.
+ // eslint-disable-next-line @lwc/lwc/no-inner-html
+ answerContainer.innerHTML = newHTMLContent;
+ }
+ }
+ }
+ // Fallback to display answer as text if the Marked library failed to load
+ else {
+ answerContainer.textContent = this.answer;
+ }
+ }
+
+ get generatedAnswerContentClass() {
+ return `generated-answer-content__answer ${this.isStreaming ? 'generated-answer-content__answer--streaming' : ''}`;
+ }
+
+ get contentAsText() {
+ return this._answer;
+ }
+
+ render() {
+ return this.answerContentFormat === 'text/markdown'
+ ? generatedMarkdownContentTemplate
+ : generatedTextContentTemplate;
+ }
+}
diff --git a/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/quanticGeneratedAnswerContent.js-meta.xml b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/quanticGeneratedAnswerContent.js-meta.xml
new file mode 100644
index 00000000000..6127d855ae7
--- /dev/null
+++ b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/quanticGeneratedAnswerContent.js-meta.xml
@@ -0,0 +1,5 @@
+
+
+ 59.0
+ false
+
\ No newline at end of file
diff --git a/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedMarkdownContent.css b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedMarkdownContent.css
new file mode 100644
index 00000000000..35c5d41bc17
--- /dev/null
+++ b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedMarkdownContent.css
@@ -0,0 +1,150 @@
+:host {
+ --quantic-genqa-inline-code: var(--quantic-inline-code, var(--lwc-colorTextRequired, #cd2113));
+ --quantic-genqa-text-small: var(--quantic-text-small, 0.75rem);
+ --quantic-genqa-bg-neutral-light: var(--quantic-bg-neutral-light, #f3f3f3);
+ --quantic-genqa-border-neutral-dim: var(--quantic-border-neutral-dim, var(--lwc-colorBorder, #bfc4c8));
+ --quantic-genqa-border-neutral: var(--quantic-border-neutral, var(--lwc-colorBorderButtonDefault, #d6dcdd));
+ --quantic-genqa-bg-neutral: var(--quantic-bg-neutral, var(--lwc-colorBackgroundToast, #747474));
+ --quantic-genqa-bg-table-header: var(--quantic-bg-table-header, #e5e8e8);
+ --quantic-genqa-border-radius: var(--quantic-border-radius, var(--lwc-borderRadiusMedium, .25rem));
+ --quantic-genqa-text-color-on-background: var(--quantic-text-color-on-background, #181818));
+ --quantic-genqa-line-height: var(--quantic-line-height, var(--lwc-lineHeightText, 1.5));
+}
+
+.generated-answer-content__answer--streaming::after {
+ content: '';
+ width: 0.5rem;
+ height: 0.9rem;
+ margin-left: 0.1rem;
+ background: var(--lwc-brandAccessible, #0176d3);
+ display: inline-block;
+ animation: cursor-blink 1.5s steps(2, start) infinite;
+ vertical-align: baseline;
+}
+
+@keyframes cursor-blink {
+ 100% {
+ visibility: hidden;
+ }
+}
+
+div[data-level='answer-heading-1'] {
+ font-size: 1.75rem;
+}
+div[data-level='answer-heading-2'] {
+ font-size: 1.25rem;
+}
+div[data-level='answer-heading-3'] {
+ font-size: 1rem;
+}
+
+div[data-level] {
+ margin-top: var(--lwc-spacingMedium, 1rem);
+ margin-bottom: var(--lwc-spacingXSmall, 0.5rem);
+ font-weight: bold;
+}
+
+li,
+p,
+blockquote,
+th,
+td {
+ line-height: var(--quantic-genqa-line-height);
+}
+
+ol {
+ list-style-type: decimal;
+ padding-inline-start: var(--lwc-spacingXLarge, 2rem);
+ margin-bottom: var(--lwc-spacingXSmall, 0.5rem);
+}
+
+ul {
+ list-style-type: disc;
+ padding-inline-start: var(--lwc-spacingXLarge, 2rem);
+ margin-bottom: var(--lwc-spacingXSmall, 0.5rem);
+}
+
+code {
+ padding: var(--lwc-spacingXxxSmall, 0.125rem) var(--lwc-spacingXxSmall, 0.25rem);
+ border: 1px solid;
+ color: var(--quantic-genqa-inline-code);
+ font-size: var(--quantic-genqa-text-small);
+ background-color: var(--quantic-genqa-bg-neutral-light);
+ border-color: var(--quantic-genqa-border-neutral);
+ border-radius: var(--quantic-genqa-border-radius);
+ text-wrap: nowrap;
+ line-height: 1.5rem;
+}
+
+pre {
+ padding: var(--lwc-spacingXSmall, 0.5rem);
+ overflow: auto;
+ max-height: 24rem;
+ border: 1px solid;
+ background-color: var(--quantic-genqa-bg-neutral-light);
+ border-color: var(--quantic-genqa-border-neutral);
+ border-radius: var(--quantic-genqa-border-radius);
+ scrollbar-color: var(--quantic-genqa-bg-neutral);
+}
+
+pre > code {
+ padding: 0;
+ border: 0;
+ background-color: transparent;
+ color: var(--quantic-genqa-text-color-on-background);
+}
+
+blockquote {
+ margin-left: var(--lwc-spacingXxLarge, 4rem);
+ margin-right: var(--lwc-spacingXxLarge, 4rem);;
+ font-size: italic;
+}
+
+.scrollable-table {
+ margin-bottom: var(--lwc-spacingLarge, 1.5rem);
+ display: inline-block;
+ border: 1px solid;
+ overflow: auto;
+ max-height: 24rem;
+ border-color: var(--quantic-genqa-border-neutral-dim);
+ border-radius: var(--quantic-genqa-border-radius);
+}
+
+.scrollable-table th {
+ top: 0px;
+ position: sticky;
+}
+
+table {
+ font-size: var(--atomic-text-base);
+}
+
+table thead th {
+ padding: var(--lwc-spacingMedium, 1rem);
+ text-align: left;
+ background-color: var(--quantic-genqa-bg-table-header);
+ border-bottom: solid 2px var(--quantic-genqa-border-neutral-dim);
+ border-left: solid 1px var(--quantic-genqa-border-neutral-dim);
+}
+
+table thead th:first-of-type {
+ border-left: none;
+}
+
+tbody tr:nth-child(even) {
+ background-color: var(--quantic-genqa-bg-neutral-light);
+}
+
+tbody tr td {
+ padding: var(--lwc-spacingMedium, 1rem);
+ border-left: solid 1px var(--quantic-genqa-border-neutral-dim);
+ border-bottom: solid 1px var(--quantic-genqa-border-neutral-dim);
+}
+
+tbody tr td:first-of-type {
+ border-left: none;
+}
+
+tbody tr td:last-of-type td {
+ border-bottom: unset;
+}
diff --git a/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedMarkdownContent.html b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedMarkdownContent.html
new file mode 100644
index 00000000000..ca44d130e06
--- /dev/null
+++ b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedMarkdownContent.html
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedTextContent.css b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedTextContent.css
new file mode 100644
index 00000000000..32b85be8bef
--- /dev/null
+++ b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedTextContent.css
@@ -0,0 +1,16 @@
+.generated-answer-content__answer--streaming::after {
+ content: '';
+ width: 0.5rem;
+ height: 0.9rem;
+ margin-left: 0.1rem;
+ background: var(--lwc-brandAccessible, #0176d3);
+ display: inline-block;
+ animation: cursor-blink 1.5s steps(2, start) infinite;
+ vertical-align: baseline;
+}
+
+@keyframes cursor-blink {
+ 100% {
+ visibility: hidden;
+ }
+}
\ No newline at end of file
diff --git a/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedTextContent.html b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedTextContent.html
new file mode 100644
index 00000000000..4bcd1abec84
--- /dev/null
+++ b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedTextContent.html
@@ -0,0 +1,5 @@
+
+
+ {contentAsText}
+
+
\ No newline at end of file
diff --git a/packages/quantic/force-app/main/default/lwc/quanticUtils/__tests__/markdownUtils.test.js b/packages/quantic/force-app/main/default/lwc/quanticUtils/__tests__/markdownUtils.test.js
new file mode 100644
index 00000000000..3a161743252
--- /dev/null
+++ b/packages/quantic/force-app/main/default/lwc/quanticUtils/__tests__/markdownUtils.test.js
@@ -0,0 +1,63 @@
+// This is the same js file as what we load inside the LWC via a static resource.
+import {transformMarkdownToHtml} from 'c/quanticUtils';
+import {marked} from '../../../../../../node_modules/marked/lib/marked.cjs';
+
+const removeLineBreaks = (text) => text.replace(/\n/g, '');
+
+describe('c/markdownUtils', () => {
+ describe('transformMarkdownToHtml', () => {
+ it('should transform markdown text to HTML', () => {
+ const text = 'Hello, world!';
+ const result = transformMarkdownToHtml(text, marked);
+ expect(removeLineBreaks(result)).toEqual('
Hello, world!
');
+ });
+
+ it('should transform markdown code to HTML
', () => {
+ const text = '```javascript\nconst foo = "bar";\n```';
+ const result = transformMarkdownToHtml(text, marked);
+ expect(removeLineBreaks(result)).toEqual(
+ 'const foo = "bar";
'
+ );
+ });
+
+ it('should transform markdown heading to HTML with data-level="answer-heading-${level}"', () => {
+ const text = '# Hello, world!';
+ const result = transformMarkdownToHtml(text, marked);
+ expect(removeLineBreaks(result)).toEqual(
+ '
Hello, world!
'
+ );
+ });
+
+ it('should transform markdown list item to HTML
', () => {
+ const text = '- Hello, world!';
+ const result = transformMarkdownToHtml(text, marked);
+ expect(removeLineBreaks(result)).toEqual(
+ ''
+ );
+ });
+
+ it('should transform markdown table to HTML ', () => {
+ const text = '| Header |\n| ------ |\n| Cell |';
+ const result = transformMarkdownToHtml(text, marked);
+ expect(removeLineBreaks(result)).toEqual(
+ '
'
+ );
+ });
+
+ it('should complete unclosed inline elements such as bold, italic, and code', () => {
+ const textBold = '**bold';
+ const resultBold = transformMarkdownToHtml(textBold, marked);
+ expect(removeLineBreaks(resultBold)).toEqual(
+ '
bold
'
+ );
+
+ const textItalic = '*italic';
+ const resultItalic = transformMarkdownToHtml(textItalic, marked);
+ expect(removeLineBreaks(resultItalic)).toEqual('
italic
');
+
+ const textCode = '`code';
+ const resultCode = transformMarkdownToHtml(textCode, marked);
+ expect(removeLineBreaks(resultCode)).toEqual('
code
');
+ });
+ });
+});
diff --git a/packages/quantic/force-app/main/default/lwc/quanticUtils/markdownUtils.js b/packages/quantic/force-app/main/default/lwc/quanticUtils/markdownUtils.js
new file mode 100644
index 00000000000..88e87d83f03
--- /dev/null
+++ b/packages/quantic/force-app/main/default/lwc/quanticUtils/markdownUtils.js
@@ -0,0 +1,118 @@
+import DOMPURIFY from '@salesforce/resourceUrl/dompurify';
+import MARKED_JS from '@salesforce/resourceUrl/marked';
+// @ts-ignore
+import {loadScript} from 'lightning/platformResourceLoader';
+
+// Any number of `*` between 1 and 3, or a single backtick, followed by a word character or whitespace character
+const unclosedElement = /(\*{1,3}|`)($|\w[\w\s]*$)/;
+
+/**
+ * Complete unclosed elements such as bold, italic, and code.
+ * @param {string} text
+ * @returns {string}
+ */
+const completeUnclosedElement = (text) => {
+ const match = unclosedElement.exec(text);
+ if (match) {
+ const symbol = match[1];
+
+ const replacements = {
+ '***': '
$2',
+ '**': '
$2',
+ '*': '
$2',
+ '`': '
$2',
+ };
+
+ return text.replace(unclosedElement, replacements[symbol]);
+ }
+
+ return text;
+};
+
+const escapeHtml = (text) => {
+ return text
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+};
+
+const customRenderer = {
+ code(code) {
+ return `
${escapeHtml(code)}
`;
+ },
+
+ /**
+ * Custom Marked renderer to replace heading elements with div elements.
+ * @param {string} text
+ * @param {string} level
+ */
+ heading(text, level) {
+ return `
${text}
`;
+ },
+
+ /**
+ * Returns escaped HTML.
+ * @param {string} text
+ * @returns
+ */
+ html(text) {
+ return escapeHtml(text);
+ },
+
+ /**
+ * Custom Marked renderer to remove wrapping `
` element around list item content.
+ * @param {string} text The element text content.
+ * @returns {string} The list item element to render.
+ */
+ listitem(text) {
+ const unwrappedText = text.replace(/^]*>/, '').replace(/<\/p>\n?/, '');
+ const withClosedElement = completeUnclosedElement(unwrappedText);
+ return `${withClosedElement}`;
+ },
+
+ /**
+ * Custom Marked renderer to wrap `` element in a scrolling container.
+ * @param {string} header The table header content.
+ * @param {string} body The table body content.
+ * @returns {string} The element to render.
+ */
+ table(header, body) {
+ return ``;
+ },
+
+ /**
+ * Custom Marked renderer to complete unclosed inline elements such as bold, italic, and code.
+ * @param {string} text The text content.
+ * @returns {string} The corrected text content.
+ */
+ text(text) {
+ return completeUnclosedElement(text);
+ },
+};
+
+/**
+ * Transform markdown text to HTML
+ * @param {string} text
+ * @param {object} marked The marked library object
+ * @returns {string} HTML text corresponding to markdown
+ */
+const transformMarkdownToHtml = (text, marked) => {
+ marked.use({renderer: customRenderer});
+ return marked.parse(text);
+};
+
+/**
+ * Load the libraries Marked and DOMPurify.
+ * @param element
+ * @returns {Promise}
+ */
+const loadMarkdownDependencies = (element) => {
+ return Promise.all([
+ loadScript(element, MARKED_JS + '/marked.min.js'),
+ loadScript(element, DOMPURIFY + '/purify.min.js'),
+ ]);
+};
+
+export {transformMarkdownToHtml, loadMarkdownDependencies};
diff --git a/packages/quantic/force-app/main/default/lwc/quanticUtils/quanticUtils.js b/packages/quantic/force-app/main/default/lwc/quanticUtils/quanticUtils.js
index f719958f43a..50564f301f0 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticUtils/quanticUtils.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticUtils/quanticUtils.js
@@ -31,6 +31,8 @@ import pastYear_plural from '@salesforce/label/c.quantic_PastYear_plural';
/** @typedef {import("coveo").Result} Result */
+export * from './markdownUtils';
+
export class Debouncer {
_timeout;
diff --git a/packages/quantic/force-app/main/default/staticresources/dompurify.resource-meta.xml b/packages/quantic/force-app/main/default/staticresources/dompurify.resource-meta.xml
new file mode 100644
index 00000000000..8b42614c3f4
--- /dev/null
+++ b/packages/quantic/force-app/main/default/staticresources/dompurify.resource-meta.xml
@@ -0,0 +1,6 @@
+
+
+ application/zip
+ DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML.
+ Public
+
\ No newline at end of file
diff --git a/packages/quantic/force-app/main/default/staticresources/marked.resource-meta.xml b/packages/quantic/force-app/main/default/staticresources/marked.resource-meta.xml
new file mode 100644
index 00000000000..051e590cee6
--- /dev/null
+++ b/packages/quantic/force-app/main/default/staticresources/marked.resource-meta.xml
@@ -0,0 +1,6 @@
+
+
+ application/zip
+ A markdown parser built for speed.
+ Public
+
\ No newline at end of file
diff --git a/packages/quantic/package.json b/packages/quantic/package.json
index 4daef9c8319..7cfa90574a8 100644
--- a/packages/quantic/package.json
+++ b/packages/quantic/package.json
@@ -46,7 +46,9 @@
},
"dependencies": {
"@coveo/bueno": "0.45.9",
- "@coveo/headless": "2.68.0"
+ "@coveo/headless": "2.68.0",
+ "dompurify": "3.1.5",
+ "marked": "12.0.2"
},
"engines": {
"node": ">=14.0.0"
diff --git a/packages/quantic/typings/lwc/dompurify.resource.d.ts b/packages/quantic/typings/lwc/dompurify.resource.d.ts
new file mode 100644
index 00000000000..f9d158254ed
--- /dev/null
+++ b/packages/quantic/typings/lwc/dompurify.resource.d.ts
@@ -0,0 +1,4 @@
+declare module '@salesforce/resourceUrl/dompurify' {
+ var DOMPurify: string;
+ export default DOMPurify;
+}
\ No newline at end of file
diff --git a/packages/quantic/typings/lwc/marked.resource.d.ts b/packages/quantic/typings/lwc/marked.resource.d.ts
new file mode 100644
index 00000000000..e816fee1319
--- /dev/null
+++ b/packages/quantic/typings/lwc/marked.resource.d.ts
@@ -0,0 +1,4 @@
+declare module '@salesforce/resourceUrl/marked' {
+ var marked: string;
+ export default marked;
+}
\ No newline at end of file