@constructor-io/constructorio-ui-pia 2.18.0 → 2.18.1

package/lib/cjs/components/Answer/Answer.js

@@ -8,7 +8,7 @@ function Answer({ text, componentOverride }) {
     if (!text) {
         return null;
     }
-    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: { text }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
-        react_1.default.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text', dangerouslySetInnerHTML: { __html: (0, contentTransformers_1.renderMarkdown)(text) } })));
+    const html = (0, contentTransformers_1.renderMarkdown)(text);
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: { text }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode }, html ? (react_1.default.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text', dangerouslySetInnerHTML: { __html: html } })) : (react_1.default.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text' }, text))));
 }
 exports.default = Answer;

package/lib/cjs/stories/assets/storybook-styles.css

@@ -1,15 +1,3 @@
-div.subheading {
-  --mediumdark: '#999999';
-  font-weight: 700;
-  font-size: 13px;
-  color: #999;
-  letter-spacing: 6px;
-  line-height: 24px;
-  text-transform: uppercase;
-  margin-bottom: 12px;
-  margin-top: 40px;
-}
-
 div.link-list {
   display: grid;
   grid-template-columns: 1fr;
@@ -78,126 +66,3 @@ a.link-item p {
   line-height: 20px;
 }
 
-span.badge {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-div.badge-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-div.badge-wrapper code {
-  font-size: 12px;
-  display: inline-block;
-}
-
-.badge.tip {
-  background: #e7fdd8;
-  color: #66bf3c;
-}
-
-.badge.note {
-  background: #d8e8fd;
-  color: #3c70bf;
-}
-
-.cio-flow-diagram {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 24px 0 0;
-  font-family: system-ui, sans-serif;
-  font-size: 14px;
-}
-
-.cio-flow-diagram .flow-step {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.cio-flow-diagram .flow-box {
-  padding: 10px 16px;
-  border-radius: 8px;
-  min-width: 220px;
-  text-align: center;
-}
-
-.cio-flow-diagram .flow-box--consumer {
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
-}
-
-.cio-flow-diagram .flow-box--internal {
-  background: #f5f3ff;
-  border: 1px solid #ddd6fe;
-}
-
-.cio-flow-diagram .flow-box--output {
-  background: #f0fdf4;
-  border: 1px solid #bbf7d0;
-}
-
-.cio-flow-diagram .flow-arrow {
-  margin-left: 110px;
-  color: #9ca3af;
-}
-
-.cio-flow-diagram .flow-label {
-  font-size: 12px;
-  color: #9ca3af;
-  font-style: italic;
-}
-
-.cio-flow-diagram .flow-callback {
-  font-size: 12px;
-  color: #059669;
-}
-
-.cio-flow-diagram .flow-box-subtitle {
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.cio-flow-legend {
-  display: flex;
-  gap: 16px;
-  margin: 32px 0 16px;
-  font-size: 12px;
-}
-
-.cio-flow-legend .legend-swatch {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 3px;
-  margin-right: 4px;
-  vertical-align: middle;
-}
-
-.cio-flow-legend .legend-swatch--consumer {
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
-}
-
-.cio-flow-legend .legend-swatch--internal {
-  background: #f5f3ff;
-  border: 1px solid #ddd6fe;
-}
-
-.cio-flow-legend .legend-swatch--output {
-  background: #f0fdf4;
-  border: 1px solid #bbf7d0;
-}

package/lib/cjs/utils/contentTransformers.js

@@ -4,25 +4,71 @@ exports.renderMarkdown = exports.sanitizeHtml = void 0;
 const tslib_1 = require("tslib");
 const dompurify_1 = tslib_1.__importDefault(require("dompurify"));
 const marked_1 = require("marked");
+// For catalog HTML (product descriptions).
 const purifyConfig = {
     FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form'],
 };
+// For the answer, which an LLM writes from text a shopper can steer, so only the tags `marked`
+// outputs are kept. Images, media and SVG would load a URL with no click and could leak data;
+// form controls and `style` could fake a form.
+const markdownPurifyConfig = {
+    ALLOWED_TAGS: 'p br strong em del a ul ol li blockquote hr code pre table thead tbody tr th td h1 h2 h3 h4 h5 h6'.split(' '),
+    ALLOWED_ATTR: ['href', 'align', 'start'],
+};
+// Text the agent reads (catalog, knowledge base, reviews) could plant a phishing link, so only
+// links to this site, its subdomains, email and phone stay clickable. A link a custom `sanitize`
+// deliberately keeps (e.g. `sms:`) stays too, but web links to other sites never do.
+function isOnThisSite(href, { keepOtherSchemes = false } = {}) {
+    try {
+        const url = new URL(href, window.location.href);
+        if (url.protocol === 'mailto:' || url.protocol === 'tel:')
+            return true;
+        if (url.protocol !== 'http:' && url.protocol !== 'https:')
+            return keepOtherSchemes;
+        const site = window.location.hostname.replace(/^www\./, '');
+        return url.hostname === site || url.hostname.endsWith(`.${site}`);
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function unlinkOffSiteLinks(html, options) {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    doc.querySelectorAll('a[href]').forEach((link) => {
+        if (!isOnThisSite(link.getAttribute('href'), options)) {
+            link.replaceWith(...Array.from(link.childNodes));
+        }
+    });
+    return doc.body.innerHTML;
+}
+/**
+ * Sanitizes catalog HTML such as a product description. Browser only: without a DOM to sanitize
+ * with (server rendering) it returns `''`.
+ */
 function sanitizeHtml(html) {
-    if (!html)
+    if (!html || !dompurify_1.default.isSupported)
         return '';
     return dompurify_1.default.sanitize(html, purifyConfig);
 }
 exports.sanitizeHtml = sanitizeHtml;
+/**
+ * Turns the answer's markdown into sanitized HTML. Only the tags markdown produces are kept, and
+ * only links to this site, its subdomains, `mailto:` and `tel:` stay clickable. A custom `sanitize`
+ * can keep other schemes, but web links to other sites always become plain text. Browser only:
+ * without a DOM to sanitize with (server rendering) it returns `''`, so render the plain text.
+ */
 function renderMarkdown(content, options) {
-    var _a;
-    if (!content)
+    var _a, _b;
+    if (!content || !dompurify_1.default.isSupported)
         return '';
     const html = marked_1.marked.parse(content, { async: false, breaks: true });
     if (options === null || options === void 0 ? void 0 : options.sanitize) {
         const purifier = (0, dompurify_1.default)(window);
-        const config = Object.assign(Object.assign({}, purifyConfig), { FORBID_TAGS: [...((_a = purifyConfig.FORBID_TAGS) !== null && _a !== void 0 ? _a : [])] });
-        return options.sanitize(purifier, html, { config });
+        const config = Object.assign(Object.assign({}, markdownPurifyConfig), { ALLOWED_TAGS: [...((_a = markdownPurifyConfig.ALLOWED_TAGS) !== null && _a !== void 0 ? _a : [])], ALLOWED_ATTR: [...((_b = markdownPurifyConfig.ALLOWED_ATTR) !== null && _b !== void 0 ? _b : [])] });
+        return unlinkOffSiteLinks(options.sanitize(purifier, html, { config }), {
+            keepOtherSchemes: true,
+        });
     }
-    return dompurify_1.default.sanitize(html, purifyConfig);
+    return unlinkOffSiteLinks(dompurify_1.default.sanitize(html, markdownPurifyConfig));
 }
 exports.renderMarkdown = renderMarkdown;

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.18.0';
+exports.default = '2.18.1';

package/lib/mjs/components/Answer/Answer.js

@@ -5,7 +5,7 @@ function Answer({ text, componentOverride }) {
     if (!text) {
         return null;
     }
-    return (React.createElement(RenderPropsWrapper, { props: { text }, override: componentOverride?.reactNode },
-        React.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text', dangerouslySetInnerHTML: { __html: renderMarkdown(text) } })));
+    const html = renderMarkdown(text);
+    return (React.createElement(RenderPropsWrapper, { props: { text }, override: componentOverride?.reactNode }, html ? (React.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text', dangerouslySetInnerHTML: { __html: html } })) : (React.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text' }, text))));
 }
 export default Answer;

package/lib/mjs/stories/assets/storybook-styles.css

@@ -1,15 +1,3 @@
-div.subheading {
-  --mediumdark: '#999999';
-  font-weight: 700;
-  font-size: 13px;
-  color: #999;
-  letter-spacing: 6px;
-  line-height: 24px;
-  text-transform: uppercase;
-  margin-bottom: 12px;
-  margin-top: 40px;
-}
-
 div.link-list {
   display: grid;
   grid-template-columns: 1fr;
@@ -78,126 +66,3 @@ a.link-item p {
   line-height: 20px;
 }
 
-span.badge {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-div.badge-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-div.badge-wrapper code {
-  font-size: 12px;
-  display: inline-block;
-}
-
-.badge.tip {
-  background: #e7fdd8;
-  color: #66bf3c;
-}
-
-.badge.note {
-  background: #d8e8fd;
-  color: #3c70bf;
-}
-
-.cio-flow-diagram {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 24px 0 0;
-  font-family: system-ui, sans-serif;
-  font-size: 14px;
-}
-
-.cio-flow-diagram .flow-step {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.cio-flow-diagram .flow-box {
-  padding: 10px 16px;
-  border-radius: 8px;
-  min-width: 220px;
-  text-align: center;
-}
-
-.cio-flow-diagram .flow-box--consumer {
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
-}
-
-.cio-flow-diagram .flow-box--internal {
-  background: #f5f3ff;
-  border: 1px solid #ddd6fe;
-}
-
-.cio-flow-diagram .flow-box--output {
-  background: #f0fdf4;
-  border: 1px solid #bbf7d0;
-}
-
-.cio-flow-diagram .flow-arrow {
-  margin-left: 110px;
-  color: #9ca3af;
-}
-
-.cio-flow-diagram .flow-label {
-  font-size: 12px;
-  color: #9ca3af;
-  font-style: italic;
-}
-
-.cio-flow-diagram .flow-callback {
-  font-size: 12px;
-  color: #059669;
-}
-
-.cio-flow-diagram .flow-box-subtitle {
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.cio-flow-legend {
-  display: flex;
-  gap: 16px;
-  margin: 32px 0 16px;
-  font-size: 12px;
-}
-
-.cio-flow-legend .legend-swatch {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 3px;
-  margin-right: 4px;
-  vertical-align: middle;
-}
-
-.cio-flow-legend .legend-swatch--consumer {
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
-}
-
-.cio-flow-legend .legend-swatch--internal {
-  background: #f5f3ff;
-  border: 1px solid #ddd6fe;
-}
-
-.cio-flow-legend .legend-swatch--output {
-  background: #f0fdf4;
-  border: 1px solid #bbf7d0;
-}

package/lib/mjs/utils/contentTransformers.js

@@ -1,21 +1,71 @@
 import DOMPurify from 'dompurify';
 import { marked } from 'marked';
+// For catalog HTML (product descriptions).
 const purifyConfig = {
     FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form'],
 };
+// For the answer, which an LLM writes from text a shopper can steer, so only the tags `marked`
+// outputs are kept. Images, media and SVG would load a URL with no click and could leak data;
+// form controls and `style` could fake a form.
+const markdownPurifyConfig = {
+    ALLOWED_TAGS: 'p br strong em del a ul ol li blockquote hr code pre table thead tbody tr th td h1 h2 h3 h4 h5 h6'.split(' '),
+    ALLOWED_ATTR: ['href', 'align', 'start'],
+};
+// Text the agent reads (catalog, knowledge base, reviews) could plant a phishing link, so only
+// links to this site, its subdomains, email and phone stay clickable. A link a custom `sanitize`
+// deliberately keeps (e.g. `sms:`) stays too, but web links to other sites never do.
+function isOnThisSite(href, { keepOtherSchemes = false } = {}) {
+    try {
+        const url = new URL(href, window.location.href);
+        if (url.protocol === 'mailto:' || url.protocol === 'tel:')
+            return true;
+        if (url.protocol !== 'http:' && url.protocol !== 'https:')
+            return keepOtherSchemes;
+        const site = window.location.hostname.replace(/^www\./, '');
+        return url.hostname === site || url.hostname.endsWith(`.${site}`);
+    }
+    catch {
+        return false;
+    }
+}
+function unlinkOffSiteLinks(html, options) {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    doc.querySelectorAll('a[href]').forEach((link) => {
+        if (!isOnThisSite(link.getAttribute('href'), options)) {
+            link.replaceWith(...Array.from(link.childNodes));
+        }
+    });
+    return doc.body.innerHTML;
+}
+/**
+ * Sanitizes catalog HTML such as a product description. Browser only: without a DOM to sanitize
+ * with (server rendering) it returns `''`.
+ */
 export function sanitizeHtml(html) {
-    if (!html)
+    if (!html || !DOMPurify.isSupported)
         return '';
     return DOMPurify.sanitize(html, purifyConfig);
 }
+/**
+ * Turns the answer's markdown into sanitized HTML. Only the tags markdown produces are kept, and
+ * only links to this site, its subdomains, `mailto:` and `tel:` stay clickable. A custom `sanitize`
+ * can keep other schemes, but web links to other sites always become plain text. Browser only:
+ * without a DOM to sanitize with (server rendering) it returns `''`, so render the plain text.
+ */
 export function renderMarkdown(content, options) {
-    if (!content)
+    if (!content || !DOMPurify.isSupported)
         return '';
     const html = marked.parse(content, { async: false, breaks: true });
     if (options?.sanitize) {
         const purifier = DOMPurify(window);
-        const config = { ...purifyConfig, FORBID_TAGS: [...(purifyConfig.FORBID_TAGS ?? [])] };
-        return options.sanitize(purifier, html, { config });
+        const config = {
+            ...markdownPurifyConfig,
+            ALLOWED_TAGS: [...(markdownPurifyConfig.ALLOWED_TAGS ?? [])],
+            ALLOWED_ATTR: [...(markdownPurifyConfig.ALLOWED_ATTR ?? [])],
+        };
+        return unlinkOffSiteLinks(options.sanitize(purifier, html, { config }), {
+            keepOtherSchemes: true,
+        });
     }
-    return DOMPurify.sanitize(html, purifyConfig);
+    return unlinkOffSiteLinks(DOMPurify.sanitize(html, markdownPurifyConfig));
 }

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '2.18.0';
+export default '2.18.1';

package/lib/types/utils/contentTransformers.d.ts

@@ -23,5 +23,15 @@ export interface RenderMarkdownOptions {
      */
     sanitize?: (purifier: typeof DOMPurify, html: string, options: SanitizeOptions) => string;
 }
+/**
+ * Sanitizes catalog HTML such as a product description. Browser only: without a DOM to sanitize
+ * with (server rendering) it returns `''`.
+ */
 export declare function sanitizeHtml(html: string): string;
+/**
+ * Turns the answer's markdown into sanitized HTML. Only the tags markdown produces are kept, and
+ * only links to this site, its subdomains, `mailto:` and `tel:` stay clickable. A custom `sanitize`
+ * can keep other schemes, but web links to other sites always become plain text. Browser only:
+ * without a DOM to sanitize with (server rendering) it returns `''`, so render the plain text.
+ */
 export declare function renderMarkdown(content: string, options?: RenderMarkdownOptions): string;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.18.0";
+declare const _default: "2.18.1";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-pia",
-  "version": "2.18.0",
+  "version": "2.18.1",
   "description": "Constructor.io AI Product Insights Agent UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",