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

package/lib/cjs/utils/localStoragePersistence.js

@@ -75,22 +75,33 @@ const emptyStored = () => ({
     threads: {},
     deleted: {},
 });
-function parseStored(raw) {
+/** The record `raw` holds, or `null` when it is not one of this version. */
+function readStored(raw) {
     var _a;
-    if (!raw)
-        return emptyStored();
     try {
         const parsed = JSON.parse(raw);
         if ((parsed === null || parsed === void 0 ? void 0 : parsed.version) !== chatThreads_1.PERSISTED_CHAT_VERSION || !parsed.threads)
-            return emptyStored();
+            return null;
         const threads = Object.fromEntries(Object.entries(parsed.threads).filter(([, chat]) => (0, chatRecordValidation_1.default)(chat)));
         const deleted = Object.fromEntries(Object.entries((_a = parsed.deleted) !== null && _a !== void 0 ? _a : {}).filter(([, at]) => typeof at === 'number'));
         return { version: chatThreads_1.PERSISTED_CHAT_VERSION, threads, deleted };
     }
     catch (_b) {
-        return emptyStored();
+        return null;
     }
 }
+function parseStored(raw) {
+    return (raw && readStored(raw)) || emptyStored();
+}
+function dropExpired(data, cutoff) {
+    var _a;
+    return {
+        version: chatThreads_1.PERSISTED_CHAT_VERSION,
+        threads: Object.fromEntries(Object.entries(data.threads).filter(([, chat]) => chat.updatedAt >= cutoff)),
+        deleted: Object.fromEntries(Object.entries((_a = data.deleted) !== null && _a !== void 0 ? _a : {}).filter(([, at]) => at >= cutoff)),
+    };
+}
+const entryCount = (data) => { var _a; return Object.keys(data.threads).length + Object.keys((_a = data.deleted) !== null && _a !== void 0 ? _a : {}).length; };
 function readItem(storage, key) {
     try {
         return storage.getItem(key);
@@ -99,6 +110,44 @@ function readItem(storage, key) {
         return null;
     }
 }
+/** How often a write is redone when another tab changed the key between its read and its write. */
+const MAX_COMMIT_ATTEMPTS = 3;
+/** Drops expired threads and tombstones under every namespace of `key`, other shoppers' included. */
+function sweepExpired(storage, key, ttlMs) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const prefix = storageKeyFor(key);
+        let keys;
+        try {
+            keys = Array.from({ length: storage.length }, (_, i) => storage.key(i)).filter((k) => k === prefix || Boolean(k === null || k === void 0 ? void 0 : k.startsWith(`${prefix}:`)));
+        }
+        catch (_a) {
+            return;
+        }
+        yield Promise.all(keys.map((k) => withStorageLock(k, () => {
+            for (let attempt = 0; attempt < MAX_COMMIT_ATTEMPTS; attempt += 1) {
+                const raw = readItem(storage, k);
+                const stored = raw === null ? null : readStored(raw);
+                if (!stored)
+                    return;
+                const kept = dropExpired(stored, Date.now() - ttlMs);
+                if (entryCount(kept) === entryCount(stored))
+                    return;
+                if (readItem(storage, k) === raw) {
+                    try {
+                        if (entryCount(kept) === 0)
+                            storage.removeItem(k);
+                        else
+                            storage.setItem(k, JSON.stringify(kept));
+                    }
+                    catch (_a) {
+                        /* storage unavailable */
+                    }
+                    return;
+                }
+            }
+        })));
+    });
+}
 /**
  * Deletes every stored conversation of one shopper, or of the guest without `userId`; open tabs
  * follow. Resolves once the deletion is recorded.
@@ -148,6 +197,23 @@ function clearPersistedConversations(options) {
     });
 }
 exports.clearPersistedConversations = clearPersistedConversations;
+/** The channel abort requests travel on between tabs, or `null` where none can be opened. */
+function openAbortChannel(name, onRequest) {
+    if (typeof window === 'undefined' || typeof BroadcastChannel === 'undefined')
+        return null;
+    try {
+        const channel = new BroadcastChannel(name);
+        channel.onmessage = ({ data }) => {
+            if (typeof (data === null || data === void 0 ? void 0 : data.threadId) !== 'string' || typeof (data === null || data === void 0 ? void 0 : data.messageId) !== 'string')
+                return;
+            onRequest({ threadId: data.threadId, messageId: data.messageId });
+        };
+        return channel;
+    }
+    catch (_a) {
+        return null;
+    }
+}
 /** Conversation store on top of `localStorage`; one key per namespace, merged across tabs. */
 function createLocalStoragePersistence(options = {}) {
     const { key = chatThreads_1.DEFAULT_PERSISTENCE_KEY, namespace, ttlMs = chatThreads_1.DEFAULT_PERSISTENCE_TTL_MS, maxTurns = Infinity, maxThreads = Infinity, storageArea = 'local', storage: storageOption, } = options;
@@ -156,20 +222,24 @@ function createLocalStoragePersistence(options = {}) {
     // One sync reads the same key several times; parse and validate the blob once per distinct value.
     let lastParsed = null;
     const parse = (raw) => {
-        var _a;
         if (!raw)
             return emptyStored();
         if ((lastParsed === null || lastParsed === void 0 ? void 0 : lastParsed.raw) !== raw)
             lastParsed = { raw, data: parseStored(raw) };
-        const cutoff = Date.now() - ttlMs;
-        const { data } = lastParsed;
-        return {
-            version: chatThreads_1.PERSISTED_CHAT_VERSION,
-            threads: Object.fromEntries(Object.entries(data.threads).filter(([, chat]) => chat.updatedAt >= cutoff)),
-            deleted: Object.fromEntries(Object.entries((_a = data.deleted) !== null && _a !== void 0 ? _a : {}).filter(([, at]) => at >= cutoff)),
-        };
+        return dropExpired(lastParsed.data, Date.now() - ttlMs);
+    };
+    // Other shoppers' records expire only here: their own store may never run again on this device.
+    let swept = false;
+    const sweepOnce = () => {
+        if (swept)
+            return;
+        swept = true;
+        const local = resolveStorage(storageOption, 'local');
+        if (local)
+            sweepExpired(local, key, ttlMs).catch(() => { });
     };
     const read = () => {
+        sweepOnce();
         const storage = resolveStorage(storageOption, storageArea);
         return parse(storage ? readRaw(storage) : null);
     };
@@ -191,7 +261,7 @@ function createLocalStoragePersistence(options = {}) {
             /* ignore */
         }
     };
-    const isEmpty = (data) => { var _a; return Object.keys(data.threads).length === 0 && Object.keys((_a = data.deleted) !== null && _a !== void 0 ? _a : {}).length === 0; };
+    const isEmpty = (data) => entryCount(data) === 0;
     // Retries without tombstones, oldest first: the last thing to shed, see `write`.
     const tryWriteShedding = (storage, data) => {
         var _a, _b;
@@ -256,8 +326,8 @@ function createLocalStoragePersistence(options = {}) {
             tryWriteShedding(storage, others);
     };
     // Redo the merge if another tab wrote between our read and this write.
-    const MAX_COMMIT_ATTEMPTS = 3;
     const transact = (mutate, priorityThreadId) => {
+        sweepOnce();
         const storage = resolveStorage(storageOption, storageArea);
         if (!storage)
             return;
@@ -305,12 +375,34 @@ function createLocalStoragePersistence(options = {}) {
         }
         return next;
     };
+    const abortListeners = new Set();
+    // Only `localStorage` is shared between tabs; a guest's `sessionStorage` thread streams in this tab alone.
+    const channel = storageArea === 'local'
+        ? openAbortChannel(`${storageKey}:abort`, (request) => abortListeners.forEach((listener) => listener(request)))
+        : null;
+    const abortMethods = channel
+        ? {
+            requestAbort(threadId, messageId) {
+                try {
+                    channel.postMessage({ threadId, messageId });
+                }
+                catch (_a) {
+                    /* channel closed */
+                }
+            },
+            subscribeAbort(listener) {
+                abortListeners.add(listener);
+                return () => {
+                    abortListeners.delete(listener);
+                };
+            },
+        }
+        : {};
     const retire = (data, staleId) => {
         const _a = data.threads, _b = staleId, retired = _a[_b], threads = tslib_1.__rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
         return Object.assign(Object.assign({}, data), { threads, deleted: Object.assign(Object.assign({}, data.deleted), { [staleId]: Date.now() }) });
     };
-    return {
-        listThreads() {
+    return Object.assign({ listThreads() {
             return tslib_1.__awaiter(this, void 0, void 0, function* () {
                 const now = Date.now();
                 return sortedThreads(read()).map((chat) => ({
@@ -367,8 +459,7 @@ function createLocalStoragePersistence(options = {}) {
             };
             window.addEventListener('storage', onStorage);
             return () => window.removeEventListener('storage', onStorage);
-        },
-    };
+        } }, abortMethods);
 }
 exports.createLocalStoragePersistence = createLocalStoragePersistence;
 const sharedStores = new Map();

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.8.0';
+exports.default = '1.10.0';

package/lib/mjs/components/Button/Button.js

@@ -1,8 +1,31 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Button as CioButton } from '@constructor-io/constructorio-ui-components';
 import { ChatBubbleDarkIcon, ChatBubbleLightIcon } from '../icons';
-export default function Button({ theme = 'dark', size = 'sm', onClick, label = 'Shopping assistant', }) {
-    return (React.createElement(CioButton, { className: `cio-asa-button cio-asa-button--${theme} cio-asa-button--${size}`, size: size === 'lg' ? 'default' : 'sm', onClick: onClick },
+import { useCioAsaContext } from '../../hooks/useCioAsaContext';
+import useAsaTracking from '../../hooks/useAsaTracking';
+const AGENT_BUTTON_CLICK_MODE = 'chat';
+export default function Button({ theme = 'dark', size = 'sm', onClick, label = 'Shopping assistant', positionOnPage, pageType, instanceId, }) {
+    const context = useCioAsaContext();
+    const agentDomain = context?.staticRequestConfigs?.domain;
+    const tracking = useAsaTracking({
+        tracker: context?.cioClient?.tracker ?? undefined,
+        section: context?.section,
+    });
+    const handleClick = useCallback(() => {
+        if (agentDomain) {
+            const payload = {
+                mode: AGENT_BUTTON_CLICK_MODE,
+                agentDomain,
+                ...(positionOnPage && { positionOnPage }),
+                ...(pageType && { pageType }),
+                ...(instanceId && { instanceId }),
+            };
+            tracking.trackAgentButtonClick(payload);
+            context?.callbacks?.onAgentButtonClick?.(payload);
+        }
+        onClick?.();
+    }, [agentDomain, positionOnPage, pageType, instanceId, tracking, context, onClick]);
+    return (React.createElement(CioButton, { className: `cio-asa-button cio-asa-button--${theme} cio-asa-button--${size}`, size: size === 'lg' ? 'default' : 'sm', onClick: handleClick },
         theme === 'dark' ? React.createElement(ChatBubbleDarkIcon, null) : React.createElement(ChatBubbleLightIcon, null),
         React.createElement("span", { className: 'cio-asa-button__label' }, label)));
 }

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,11 +22,11 @@ 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 '';
 }
-const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, onThreadsChange, showStopButton = false, }, ref) => {
+const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, initialPrompt, onThreadsChange, showStopButton = false, }, ref) => {
     const { messages, sendMessage, isStreaming, canAbort, abort, clearHistory, isHydrating, threads, activeThreadId, newThread, switchThread, } = useAsaResults({
         initialThreadId,
         normalizeItem: (item) => (normalizeItem ?? normalizeItemToProduct)(item, {
@@ -44,12 +45,25 @@ const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, on
     const showChatFrame = showChat || (isHydrating && lastViewRef.current === 'chat');
     const isModal = typeof onClose === 'function';
     const announcement = getAnnouncement(messages, translations);
-    useImperativeHandle(ref, () => ({ abort, clearHistory, newThread, switchThread }), [
+    useImperativeHandle(ref, () => ({
         abort,
         clearHistory,
         newThread,
         switchThread,
-    ]);
+        sendMessage: (text, options) => sendMessage(text, 'external', options),
+    }), [abort, clearHistory, newThread, switchThread, sendMessage]);
+    // Sent from a timer so StrictMode's mount, unmount, mount cannot cancel the stream it starts.
+    const initialPromptRef = useRef(initialPrompt);
+    useEffect(() => {
+        const prompt = initialPromptRef.current;
+        if (isHydrating || !prompt)
+            return undefined;
+        const timer = setTimeout(() => {
+            initialPromptRef.current = undefined;
+            sendMessage(prompt, 'external');
+        });
+        return () => clearTimeout(timer);
+    }, [isHydrating, sendMessage]);
     const hasPersistence = Boolean(useCioAsaContext()?.persistence);
     const onThreadsChangeRef = useLatest(onThreadsChange);
     useEffect(() => {

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,