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

package/lib/mjs/components/PiaConversation/PiaModal.js

@@ -1,8 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { createContext, useCallback, useEffect, useRef, useState, } from 'react';
 import Input from '../Input/Input';
 import { translate } from '../../utils/translate';
 import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
 const OVERFLOW_HIDDEN_CLASS = 'cio-pia-modal-open';
+/** Lets the conversation rendered as the modal's children hand it the node of its input. */
+export const ModalInputRefContext = createContext(undefined);
 function CloseIcon() {
     return (React.createElement("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' },
         React.createElement("path", { d: 'M15.8334 5.34166L14.6584 4.16666L10.0001 8.82499L5.34175 4.16666L4.16675 5.34166L8.82508 9.99999L4.16675 14.6583L5.34175 15.8333L10.0001 11.175L14.6584 15.8333L15.8334 14.6583L11.1751 9.99999L15.8334 5.34166Z', fill: 'currentColor' })));
@@ -11,6 +13,11 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
     const [isOpen, setIsOpen] = useState(false);
     const dialogRef = useRef(null);
     const triggerRef = useRef(null);
+    const initialFocusRef = useRef(null);
+    const inputNodeRef = useRef(null);
+    const setInputNode = useCallback((node) => {
+        inputNodeRef.current = node;
+    }, []);
     const openModal = useCallback(() => {
         const active = document.activeElement;
         const isRealTrigger = !!active && active !== document.body && active !== document.documentElement;
@@ -27,6 +34,7 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
             return undefined;
         if (isOpen) {
             dialog.showModal();
+            initialFocusRef.current = document.activeElement;
             document.body.classList.add(OVERFLOW_HIDDEN_CLASS);
         }
         else {
@@ -38,6 +46,18 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
             document.body.classList.remove(OVERFLOW_HIDDEN_CLASS);
         };
     }, [isOpen]);
+    // The input is disabled when the dialog opens, so showModal() parks focus on the first enabled
+    // control. Hand it to the input once the answer has loaded, unless the shopper has moved it.
+    useEffect(() => {
+        if (!isOpen || isLoading || !initialFocusRef.current)
+            return;
+        const placed = initialFocusRef.current;
+        initialFocusRef.current = null;
+        const active = document.activeElement;
+        if (active !== placed && active !== document.body)
+            return;
+        inputNodeRef.current?.focus();
+    }, [isOpen, isLoading]);
     // Restore focus to the trigger. Re-runs on `isLoading`: the input trigger is
     // disabled while a request is in flight and `focus()` would no-op.
     useEffect(() => {
@@ -89,5 +109,6 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
                     React.createElement("p", { className: 'cio-pia-title', id: 'cio-pia-modal-title' }, translate('Ask about this product', translations)),
                     React.createElement("button", { type: 'button', className: 'cio-pia-modal-close-button', "aria-label": translate('Close', translations), onClick: closeModal },
                         React.createElement(CloseIcon, null))),
-                React.createElement("div", { className: 'cio-pia-modal-body' }, children)))));
+                React.createElement("div", { className: 'cio-pia-modal-body' },
+                    React.createElement(ModalInputRefContext.Provider, { value: setInputNode }, children))))));
 }

package/lib/mjs/hooks/useReturnFocusToInput.js

@@ -0,0 +1,25 @@
+import { useCallback, useEffect, useRef } from 'react';
+/**
+ * While an answer loads, the control the shopper used to ask is disabled or swapped for a
+ * skeleton, and the browser drops focus to <body>.
+ */
+export default function useReturnFocusToInput(isLoading) {
+    const inputNodeRef = useRef(null);
+    const pendingRef = useRef(false);
+    useEffect(() => {
+        if (isLoading || !pendingRef.current)
+            return;
+        pendingRef.current = false;
+        const active = document.activeElement;
+        const focusWasDropped = !active || active === document.body;
+        if (inputNodeRef.current && focusWasDropped)
+            inputNodeRef.current.focus();
+    }, [isLoading]);
+    const inputRef = useCallback((node) => {
+        inputNodeRef.current = node;
+    }, []);
+    const returnFocusAfterLoading = useCallback(() => {
+        pendingRef.current = true;
+    }, []);
+    return { inputRef, returnFocusAfterLoading };
+}

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.17.0';
+export default '2.18.1';

package/lib/types/components/Input/Input.d.ts

@@ -11,6 +11,7 @@ interface InputProps {
     translations?: Translations;
     componentOverride?: ComponentOverrideProps<InputRenderProps>;
     error?: string;
+    inputRef?: (node: HTMLElement | null) => void;
     placeholderKey?: string;
     /**
      * Render the Send button after the field.
@@ -19,5 +20,5 @@ interface InputProps {
      */
     showSendButton?: boolean;
 }
-declare function Input({ value: providedValue, placeholder, disabled, onSubmit, onFocus, translations, componentOverride, error, placeholderKey, showSendButton, }: InputProps): React.JSX.Element;
+declare function Input({ value: providedValue, placeholder, disabled, onSubmit, onFocus, translations, componentOverride, error, inputRef, placeholderKey, showSendButton, }: InputProps): React.JSX.Element;
 export default Input;

package/lib/types/components/PiaConversation/PiaModal.d.ts

@@ -1,5 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { Translations, Question, CioPiaComponentOverrides } from '../../types';
+/** Lets the conversation rendered as the modal's children hand it the node of its input. */
+export declare const ModalInputRefContext: React.Context<((node: HTMLElement | null) => void) | undefined>;
 interface PiaModalProps {
     initialQuestions: Question[];
     handleSubmitQuestion: (question: string) => void;

package/lib/types/hooks/useReturnFocusToInput.d.ts

@@ -0,0 +1,9 @@
+export interface UseReturnFocusToInputReturn {
+    inputRef: (node: HTMLElement | null) => void;
+    returnFocusAfterLoading: () => void;
+}
+/**
+ * While an answer loads, the control the shopper used to ask is disabled or swapped for a
+ * skeleton, and the browser drops focus to <body>.
+ */
+export default function useReturnFocusToInput(isLoading: boolean): UseReturnFocusToInputReturn;

package/lib/types/types.d.ts

@@ -291,6 +291,11 @@ export interface InputRenderProps {
     translations?: Translations;
     /** Validation message for the value that was just submitted, when there is one. */
     error?: string;
+    /**
+     * Attach to your text field (`ref={inputRef}`) so focus returns to it after an answer loads.
+     * Without it, keyboard focus is lost while your field is disabled or a suggestion is replaced.
+     */
+    inputRef?: (node: HTMLElement | null) => void;
 }
 /**
  * Component overrides for CioPia.

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.17.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.17.0",
+  "version": "2.18.1",
   "description": "Constructor.io AI Product Insights Agent UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",