@constructor-io/constructorio-ui-asa 1.9.0 → 1.10.0

package/lib/cjs/utils/markdown.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markdownToText = exports.renderMarkdown = void 0;
+const tslib_1 = require("tslib");
+const dompurify_1 = tslib_1.__importDefault(require("dompurify"));
+const marked_1 = require("marked");
+// The text comes from an LLM 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 purifyConfig = {
+    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', 'tabindex', '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.
+function isOnThisSite(href) {
+    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 false;
+        const site = window.location.hostname.replace(/^www\./, '');
+        return url.hostname === site || url.hostname.endsWith(`.${site}`);
+    }
+    catch (_a) {
+        return false;
+    }
+}
+/**
+ * Turns the agent's markdown into sanitized HTML: paragraphs, bold, links, lists and tables.
+ * Links to other sites become plain text. Browser only: without a DOM to sanitize with (server
+ * rendering) it returns `''`, so render the plain text instead.
+ */
+function renderMarkdown(markdown) {
+    if (!markdown || !dompurify_1.default.isSupported)
+        return '';
+    const html = marked_1.marked.parse(markdown, { async: false, breaks: true })
+        // A wide table scrolls (AiMessage.css), so keyboard users need to be able to focus it.
+        .replace(/<table>/g, '<table tabindex="0">');
+    const doc = new DOMParser().parseFromString(dompurify_1.default.sanitize(html, purifyConfig), 'text/html');
+    doc.querySelectorAll('a[href]').forEach((link) => {
+        if (!isOnThisSite(link.getAttribute('href')))
+            link.replaceWith(...Array.from(link.childNodes));
+    });
+    return doc.body.innerHTML;
+}
+exports.renderMarkdown = renderMarkdown;
+/** The agent's markdown as plain text, one space between blocks and table cells, for screen readers. */
+function markdownToText(markdown) {
+    var _a;
+    const html = renderMarkdown(markdown);
+    if (!html)
+        return markdown;
+    // An inert document: nothing in it loads or runs.
+    const { body } = new DOMParser().parseFromString(html, 'text/html');
+    body.querySelectorAll('p, li, th, td, br').forEach((node) => node.append(' '));
+    return ((_a = body.textContent) !== null && _a !== void 0 ? _a : '').replace(/\s+/g, ' ').trim();
+}
+exports.markdownToText = markdownToText;

package/lib/cjs/version.js

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

package/lib/mjs/components/Chat/AiMessage.css

@@ -23,6 +23,9 @@
 }
 
 .cio-asa-ai-message__text {
+  width: 100%;
+  min-width: 0;
+  overflow-wrap: break-word;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
@@ -33,3 +36,52 @@
 .cio-asa-ai-message__bubble--error .cio-asa-ai-message__text {
   color: #B42318;
 }
+
+/* Agent markdown (see utils/markdown.ts) */
+.cio-asa-ai-message__text > :first-child {
+  margin-top: 0;
+}
+
+.cio-asa-ai-message__text > :last-child {
+  margin-bottom: 0;
+}
+
+.cio-asa-ai-message__text p {
+  margin: 0 0 8px;
+}
+
+.cio-asa-ai-message__text ul,
+.cio-asa-ai-message__text ol {
+  margin: 0 0 8px;
+  padding-left: 20px;
+}
+
+.cio-asa-ai-message__text a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+/* Wide tables scroll inside the bubble instead of widening it. */
+.cio-asa-ai-message__text table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  margin: 0 0 8px;
+  border-collapse: collapse;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.cio-asa-ai-message__text th,
+.cio-asa-ai-message__text td {
+  padding: 6px 8px;
+  border: 1px solid #D5D9E2;
+  background: #FFFFFF;
+  text-align: left;
+  vertical-align: top;
+}
+
+.cio-asa-ai-message__text th {
+  background: #F6F7F9;
+  font-weight: 600;
+}

package/lib/mjs/components/Chat/AiMessage.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RenderPropsWrapper } from '@constructor-io/constructorio-ui-components';
 import translate from '../../utils/translate';
+import { renderMarkdown } from '../../utils/markdown';
 import TypingIndicator from './TypingIndicator';
 export default function AiMessage({ message, componentOverrides, translations }) {
     const isLoading = message.status === 'loading';
@@ -11,6 +12,7 @@ export default function AiMessage({ message, componentOverrides, translations })
     const errorKey = message.interrupted ? 'CioAsa.error.interrupted' : 'CioAsa.error.message';
     const text = isError ? message.text || translate(errorKey, translations) : message.text || '';
     const hasText = text.length > 0;
+    const html = renderMarkdown(text);
     const loaderRenderProps = { translations };
     const textRenderProps = { text };
     return (React.createElement("div", { className: 'cio-asa-ai-message' },
@@ -22,7 +24,9 @@ export default function AiMessage({ message, componentOverrides, translations })
                     isError && 'cio-asa-ai-message__bubble--error',
                 ]
                     .filter(Boolean)
-                    .join(' '), role: isError ? 'alert' : undefined },
-                React.createElement("div", { className: 'cio-asa-ai-message__text' }, text))))));
+                    .join(' '), role: isError ? 'alert' : undefined }, html ? (React.createElement("div", { className: 'cio-asa-ai-message__text', 
+                // Sanitized by renderMarkdown
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: { __html: html } })) : (React.createElement("div", { className: 'cio-asa-ai-message__text' }, text)))))));
 }
 AiMessage.displayName = 'AiMessage';

package/lib/mjs/components/Chat/Chat.js

@@ -5,6 +5,7 @@ import useFocusTrap from '../../hooks/useFocusTrap';
 import useLatest from '../../hooks/useLatest';
 import { normalizeItemToProduct } from '../../utils/productNormalizer';
 import translate from '../../utils/translate';
+import { markdownToText } from '../../utils/markdown';
 import ChatHeader from './ChatHeader';
 import WelcomeScreen from './WelcomeScreen';
 import ChatMessageList from './ChatMessageList';
@@ -21,7 +22,7 @@ function getAnnouncement(messages, translations) {
         return `${youSaid}: ${userText}. ${typing}`;
     }
     if (lastMessage.status === 'done' && lastMessage.text) {
-        return `${translate('CioAsa.aiMessage.ariaLabel', translations)}: ${lastMessage.text}`;
+        return `${translate('CioAsa.aiMessage.ariaLabel', translations)}: ${markdownToText(lastMessage.text)}`;
     }
     return '';
 }

package/lib/mjs/components/Chat/ChatInput.js

@@ -9,8 +9,7 @@ export default function ChatInput({ onSubmit, isDisabled = false, isStreaming =
         isDisabled,
         submitOnEnterOnly: true,
     });
-    // The stop button only makes sense when there is something to stop and a way to do it.
-    const canAbort = isStreaming && showStopButton && typeof onAbort === 'function';
+    const canAbort = isStreaming && typeof onAbort === 'function';
     const renderProps = {
         value,
         onChange: setValue,
@@ -18,13 +17,14 @@ export default function ChatInput({ onSubmit, isDisabled = false, isStreaming =
         placeholder: translate('CioAsa.input.placeholder', translations),
         isDisabled,
         isStreaming,
+        canAbort,
         onAbort: onAbort ?? (() => { }),
     };
     return (React.createElement(RenderPropsWrapper, { override: componentOverrides?.reactNode, props: renderProps },
         React.createElement("div", { className: 'cio-asa-chat-input-wrapper' },
             React.createElement("div", { className: 'cio-asa-chat-input' },
                 React.createElement("input", { type: 'text', className: 'cio-asa-chat-input__field', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, placeholder: renderProps.placeholder, disabled: isDisabled, "aria-label": translate('CioAsa.input.ariaLabel', translations) }),
-                canAbort ? (React.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send cio-asa-chat-input__stop', onClick: onAbort, "aria-label": translate('CioAsa.input.stopAriaLabel', translations) },
+                canAbort && showStopButton ? (React.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send cio-asa-chat-input__stop', onClick: onAbort, "aria-label": translate('CioAsa.input.stopAriaLabel', translations) },
                     React.createElement(StopIcon, null))) : (React.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send', onClick: handleSubmit, disabled: isDisabled || !value.trim(), "aria-label": translate('CioAsa.input.sendAriaLabel', translations) },
                     React.createElement(SendArrowIcon, null)))))));
 }

package/lib/mjs/hooks/asaStreamHandlers.js

@@ -45,7 +45,7 @@ export function handleMessage(data, assistantId, setMessages) {
     updateMessageById(setMessages, assistantId, (msg) => ({
         ...msg,
         status: 'streaming',
-        text: (msg.text || '') + (data?.text || ''),
+        text: [msg.text, data?.text].filter(Boolean).join('\n'),
     }));
 }
 export function handleFollowUpRefinement(data, assistantId, setMessages) {

package/lib/mjs/hooks/persistence/backgroundTurns.js

@@ -1,5 +1,5 @@
 import { prepareSnapshot } from '../../utils/chatSession';
-import { normalizeHydratedMessages, saveThreadAndRetireStale } from '../../utils/chatThreads';
+import { normalizeHydratedMessages, saveThreadAndRetireStale, settleCancelledReply, } from '../../utils/chatThreads';
 const turns = new Set();
 const listeners = new Set();
 const notify = () => listeners.forEach((listener) => listener());
@@ -17,6 +17,7 @@ export class BackgroundTurn {
     ids = new Set();
     /** Its writes, in order; a chat that takes the turn back writes after them. */
     writes;
+    stopListening;
     constructor(turn, params) {
         this.turn = turn;
         this.store = params.store;
@@ -35,6 +36,9 @@ export class BackgroundTurn {
                 this.save().then(notify);
             },
             onDone: () => {
+                if (!this.streaming)
+                    return;
+                this.release();
                 this.streaming = false;
                 this.messages = normalizeHydratedMessages(this.messages);
                 this.save().then(() => {
@@ -65,6 +69,34 @@ export class BackgroundTurn {
     /** Later writes go into `store`. */
     moveTo(store) {
         this.store = store;
+        if (this.streaming)
+            this.listen();
+    }
+    /** Stops the answer when another tab asks to, through the store it is saved into. */
+    listen() {
+        this.release();
+        this.stopListening = this.store.subscribeAbort?.(({ messageId }) => {
+            if (messageId === this.turn.assistantId)
+                this.abort();
+        });
+    }
+    release() {
+        this.stopListening?.();
+        this.stopListening = undefined;
+    }
+    /** Stops the answer and stores it settled, as the stop button does on screen. */
+    abort() {
+        if (!this.streaming)
+            return;
+        this.streaming = false;
+        this.release();
+        this.turn.cancel();
+        this.messages = settleCancelledReply(this.messages, this.turn.assistantId);
+        this.save().then(() => {
+            if (this.saved)
+                turns.delete(this);
+            notify();
+        });
     }
     /** Stores the conversation settled, without awaiting: the page is going away. */
     flush() {
@@ -85,6 +117,7 @@ let listeningForPagehide = false;
 export function continueInBackground(turn, params) {
     const bg = new BackgroundTurn(turn, params);
     turns.add(bg);
+    bg.listen();
     if (!listeningForPagehide && typeof window !== 'undefined') {
         listeningForPagehide = true;
         window.addEventListener('pagehide', () => turns.forEach((t) => t.flush()));
@@ -100,6 +133,7 @@ export function resumeBackgroundTurn(store, threadId, createOwner) {
     if (!bg)
         return null;
     turns.delete(bg);
+    bg.release();
     if (bg.streaming)
         bg.turn.owner = createOwner(bg.turn);
     return bg;

package/lib/mjs/hooks/persistence/useChatPersistence.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState, } from 'react';
-import { findRekeyedThread, getTabId, foreignStreamRemainingMs, isInFlight, mergeMessages, isLocalThreadId, moveThreads, normalizeHydratedMessages, saveThreadAndRetireStale, } from '../../utils/chatThreads';
+import { FOREIGN_ABORT_TIMEOUT_MS, findRekeyedThread, getTabId, foreignStreamRemainingMs, isInFlight, mergeMessages, isLocalThreadId, moveThreads, normalizeHydratedMessages, saveThreadAndRetireStale, } from '../../utils/chatThreads';
 import { adoptSession, adoptStoredChat, forkSession, isOwnMessage, prepareSnapshot, resetConversation, } from '../../utils/chatSession';
 import useIsMounted from '../useIsMounted';
 import useLatest from '../useLatest';
@@ -7,10 +7,12 @@ import useWriteQueue from './useWriteQueue';
 import useThreadList from './useThreadList';
 import useForeignStream from './useForeignStream';
 import { continueInBackground, moveBackgroundTurns, resumeBackgroundTurn, subscribeBackgroundTurns, } from './backgroundTurns';
+/** Whether `store` can both ask another tab to stop an answer and hear such a request. */
+const canAbortAcrossTabs = (store) => Boolean(store?.requestAbort && store.subscribeAbort);
 const hasUnsavedWork = (session) => session.isStreaming || session.dirty || session.orphanIds.length > 0;
 /** Restores, saves and syncs the conversation with `store`; inert when `store` is undefined. */
 export default function useChatPersistence(params) {
-    const { store, scope, index, session, initialThreadId, messages, setMessages, isStreaming, setIsStreaming, turnRef, cancelStream, } = params;
+    const { store, scope, index, session, initialThreadId, messages, setMessages, isStreaming, setIsStreaming, turnRef, cancelStream, abortTurn, } = params;
     if (store)
         getTabId();
     const [isHydrating, setIsHydrating] = useState(Boolean(store));
@@ -58,6 +60,15 @@ export default function useChatPersistence(params) {
             setIsHydrating(Boolean(store));
         }
     }
+    /** Settles the answer another tab left in flight, and writes it back. */
+    const settleForeign = useCallback((threadId) => {
+        if (!mountedRef.current || session.storageThreadId !== threadId)
+            return;
+        if (session.isStreaming)
+            return;
+        session.dirty = true;
+        setMessages((prev) => normalizeHydratedMessages(prev));
+    }, [session, setMessages, mountedRef]);
     /** Puts a stored conversation on screen and makes it the one this tab continues. */
     const showStoredChat = useCallback((chat) => {
         adoptStoredChat(session, chat);
@@ -72,15 +83,18 @@ export default function useChatPersistence(params) {
             return;
         }
         setMessages(chat.messages);
-        watchForeign(remainingMs, () => {
-            if (!mountedRef.current || session.storageThreadId !== chat.threadId)
-                return;
-            if (session.isStreaming)
-                return;
-            session.dirty = true;
-            setMessages((prev) => normalizeHydratedMessages(prev));
-        });
-    }, [session, stopForeign, watchForeign, setMessages, mountedRef]);
+        watchForeign(remainingMs, () => settleForeign(chat.threadId));
+    }, [session, stopForeign, watchForeign, settleForeign, setMessages]);
+    /** Asks the tab streaming the answer on screen to stop it; settles it here if no tab does. */
+    const abortForeign = useCallback(() => {
+        const { current } = storeRef;
+        const threadId = session.storageThreadId;
+        const last = messagesRef.current[messagesRef.current.length - 1];
+        if (!canAbortAcrossTabs(current) || !session.foreignInFlight || !threadId || !last)
+            return;
+        current.requestAbort(threadId, last.id);
+        watchForeign(FOREIGN_ABORT_TIMEOUT_MS, () => settleForeign(threadId));
+    }, [session, storeRef, messagesRef, watchForeign, settleForeign]);
     /** Writes the conversation as it is now; `settle` finishes an in-flight answer, `sync` skips awaiting. */
     const persistNow = useCallback((mode) => {
         const { current } = storeRef;
@@ -320,6 +334,14 @@ export default function useChatPersistence(params) {
             settleAndPersist();
     }, [detachTurn, settleAndPersist]);
     useEffect(() => subscribeBackgroundTurns(refreshThreads), [refreshThreads]);
+    useEffect(() => {
+        if (!store?.subscribeAbort)
+            return undefined;
+        return store.subscribeAbort(({ messageId }) => {
+            if (turnRef.current?.assistantId === messageId)
+                abortTurn();
+        });
+    }, [store, turnRef, abortTurn]);
     // Follow changes another tab made to the list or to the thread on screen.
     const syncFromStore = useCallback(async () => {
         const { current } = storeRef;
@@ -465,6 +487,8 @@ export default function useChatPersistence(params) {
         threads,
         activeThreadId,
         foreignInFlight,
+        canAbortForeign: foreignInFlight && canAbortAcrossTabs(store),
+        abortForeign,
         beginTurn,
         screenOwner,
         clearHistory,

package/lib/mjs/hooks/useAsaResults.js

@@ -5,7 +5,7 @@ import useChatPersistence from './persistence/useChatPersistence';
 import { startTurn } from './agentStream';
 import { createChatSession, nextMessageId } from '../utils/chatSession';
 import { normalizeItemToProduct } from '../utils/productNormalizer';
-import { isLocalThreadId } from '../utils/chatThreads';
+import { isLocalThreadId, settleCancelledReply } from '../utils/chatThreads';
 import useLatest from './useLatest';
 export default function useAsaResults(options) {
     const contextValue = useCioAsaContext();
@@ -39,6 +39,18 @@ export default function useAsaResults(options) {
         turnRef.current?.cancel();
         turnRef.current = null;
     }, []);
+    const abortOwnTurn = useCallback(() => {
+        if (!session.isStreaming)
+            return;
+        const abortedId = turnRef.current?.assistantId;
+        cancelStream();
+        session.isStreaming = false;
+        setIsStreaming(false);
+        if (abortedId)
+            setMessages((prev) => settleCancelledReply(prev, abortedId));
+        // With persistence on, the cancelled turn is stored as it stands.
+        session.dirty = true;
+    }, [session, cancelStream]);
     const store = useChatPersistence({
         store: persistence,
         scope: persistenceScope,
@@ -51,8 +63,9 @@ export default function useAsaResults(options) {
         setIsStreaming,
         turnRef,
         cancelStream,
+        abortTurn: abortOwnTurn,
     });
-    const { beginTurn, screenOwner } = store;
+    const { beginTurn, screenOwner, abortForeign } = store;
     useEffect(() => cancelStream, [cancelStream]);
     const sendToCurrentThread = useCallback((text, source) => {
         const intent = text.trim();
@@ -149,31 +162,20 @@ export default function useAsaResults(options) {
      * No beacon is sent: there is no "aborted" ASA event, and reporting the load as
      * finished would be false. An aborted turn therefore leaves an
      * `assistant_result_load_started` with no matching finished event.
+     *
+     * An answer streaming in another tab is stopped by that tab, which stores the result.
      */
     const abort = useCallback(() => {
-        if (!session.isStreaming)
-            return;
-        const abortedId = turnRef.current?.assistantId;
-        cancelStream();
-        session.isStreaming = false;
-        setIsStreaming(false);
-        if (abortedId) {
-            setMessages((prev) => prev.flatMap((msg) => {
-                if (msg.id !== abortedId)
-                    return [msg];
-                if (!msg.text && !msg.groups?.length && !msg.refinement)
-                    return [];
-                return [{ ...msg, status: 'done' }];
-            }));
-        }
-        // With persistence on, the cancelled turn is stored as it stands.
-        session.dirty = true;
-    }, [session, cancelStream]);
+        if (session.isStreaming)
+            abortOwnTurn();
+        else
+            abortForeign();
+    }, [session, abortOwnTurn, abortForeign]);
     return {
         messages,
         sendMessage,
         isStreaming: isStreaming || store.foreignInFlight,
-        canAbort: isStreaming,
+        canAbort: isStreaming || store.canAbortForeign,
         abort,
         clearHistory: store.clearHistory,
         isHydrating: store.isHydrating,

package/lib/mjs/index.js

@@ -11,5 +11,6 @@ export { default as useCioAsaContext } from './hooks/useCioAsaContext';
 // Utils
 export { normalizeItemToProduct } from './utils/productNormalizer';
 export { clearPersistedConversations } from './utils/localStoragePersistence';
+export { renderMarkdown } from './utils/markdown';
 // Re-exported client value from the JS client (used to construct/type a cioClient)
 export { ConstructorIOClient } from './types';

package/lib/mjs/utils/chatThreads.js

@@ -6,6 +6,8 @@ export const DEFAULT_PERSISTENCE_KEY = 'cio-asa:chat';
 export const DEFAULT_PERSISTENCE_TTL_MS = 7 * 24 * 60 * 60 * 1000;
 /** How long a stored answer written by another tab is still shown as "typing" before it is settled. */
 export const IN_FLIGHT_GRACE_MS = 60 * 1000;
+/** How long to wait for the tab streaming an answer to store it stopped, before settling it here. */
+export const FOREIGN_ABORT_TIMEOUT_MS = 3 * 1000;
 /** Marks client-side thread ids, used before the server has assigned one. Never sent to the agent. */
 const LOCAL_THREAD_PREFIX = 'local-';
 /** Thread titles are the first question, cut to this many characters. */
@@ -111,6 +113,16 @@ export function normalizeHydratedMessages(messages) {
         return hasContent ? { ...m, status: 'done' } : { ...m, status: 'error', interrupted: true };
     });
 }
+/** `messages` with the cancelled reply settled: `done` when it has content, dropped otherwise. */
+export function settleCancelledReply(messages, assistantId) {
+    return messages.flatMap((m) => {
+        if (m.id !== assistantId)
+            return [m];
+        if (!m.text && !m.groups?.length && !m.refinement)
+            return [];
+        return [{ ...m, status: 'done' }];
+    });
+}
 /** Messages as stored: raw items replaced by the cards `normalize` makes; a restored group keeps its cards. */
 export function compactMessages(messages, normalize) {
     return messages.map((m) => m.groups?.length