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

package/lib/cjs/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/cjs/components/Chat/AiMessage.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
 const translate_1 = tslib_1.__importDefault(require("../../utils/translate"));
+const markdown_1 = require("../../utils/markdown");
 const TypingIndicator_1 = tslib_1.__importDefault(require("./TypingIndicator"));
 function AiMessage({ message, componentOverrides, translations }) {
     var _a, _b, _c;
@@ -15,6 +16,7 @@ function AiMessage({ message, componentOverrides, translations }) {
     const errorKey = message.interrupted ? 'CioAsa.error.interrupted' : 'CioAsa.error.message';
     const text = isError ? message.text || (0, translate_1.default)(errorKey, translations) : message.text || '';
     const hasText = text.length > 0;
+    const html = (0, markdown_1.renderMarkdown)(text);
     const loaderRenderProps = { translations };
     const textRenderProps = { text };
     return (react_1.default.createElement("div", { className: 'cio-asa-ai-message' },
@@ -26,8 +28,10 @@ function AiMessage({ message, componentOverrides, translations }) {
                     isError && 'cio-asa-ai-message__bubble--error',
                 ]
                     .filter(Boolean)
-                    .join(' '), role: isError ? 'alert' : undefined },
-                react_1.default.createElement("div", { className: 'cio-asa-ai-message__text' }, text))))));
+                    .join(' '), role: isError ? 'alert' : undefined }, html ? (react_1.default.createElement("div", { className: 'cio-asa-ai-message__text', 
+                // Sanitized by renderMarkdown
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: { __html: html } })) : (react_1.default.createElement("div", { className: 'cio-asa-ai-message__text' }, text)))))));
 }
 exports.default = AiMessage;
 AiMessage.displayName = 'AiMessage';

package/lib/cjs/components/Chat/Chat.js

@@ -8,6 +8,7 @@ const useFocusTrap_1 = tslib_1.__importDefault(require("../../hooks/useFocusTrap
 const useLatest_1 = tslib_1.__importDefault(require("../../hooks/useLatest"));
 const productNormalizer_1 = require("../../utils/productNormalizer");
 const translate_1 = tslib_1.__importDefault(require("../../utils/translate"));
+const markdown_1 = require("../../utils/markdown");
 const ChatHeader_1 = tslib_1.__importDefault(require("./ChatHeader"));
 const WelcomeScreen_1 = tslib_1.__importDefault(require("./WelcomeScreen"));
 const ChatMessageList_1 = tslib_1.__importDefault(require("./ChatMessageList"));
@@ -25,7 +26,7 @@ function getAnnouncement(messages, translations) {
         return `${youSaid}: ${userText}. ${typing}`;
     }
     if (lastMessage.status === 'done' && lastMessage.text) {
-        return `${(0, translate_1.default)('CioAsa.aiMessage.ariaLabel', translations)}: ${lastMessage.text}`;
+        return `${(0, translate_1.default)('CioAsa.aiMessage.ariaLabel', translations)}: ${(0, markdown_1.markdownToText)(lastMessage.text)}`;
     }
     return '';
 }

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

@@ -12,8 +12,7 @@ function ChatInput({ onSubmit, isDisabled = false, isStreaming = false, onAbort,
         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,
@@ -21,13 +20,14 @@ function ChatInput({ onSubmit, isDisabled = false, isStreaming = false, onAbort,
         placeholder: (0, translate_1.default)('CioAsa.input.placeholder', translations),
         isDisabled,
         isStreaming,
+        canAbort,
         onAbort: onAbort !== null && onAbort !== void 0 ? onAbort : (() => { }),
     };
     return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode, props: renderProps },
         react_1.default.createElement("div", { className: 'cio-asa-chat-input-wrapper' },
             react_1.default.createElement("div", { className: 'cio-asa-chat-input' },
                 react_1.default.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": (0, translate_1.default)('CioAsa.input.ariaLabel', translations) }),
-                canAbort ? (react_1.default.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send cio-asa-chat-input__stop', onClick: onAbort, "aria-label": (0, translate_1.default)('CioAsa.input.stopAriaLabel', translations) },
+                canAbort && showStopButton ? (react_1.default.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send cio-asa-chat-input__stop', onClick: onAbort, "aria-label": (0, translate_1.default)('CioAsa.input.stopAriaLabel', translations) },
                     react_1.default.createElement(icons_1.StopIcon, null))) : (react_1.default.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send', onClick: handleSubmit, disabled: isDisabled || !value.trim(), "aria-label": (0, translate_1.default)('CioAsa.input.sendAriaLabel', translations) },
                     react_1.default.createElement(icons_1.SendArrowIcon, null)))))));
 }

package/lib/cjs/hooks/asaStreamHandlers.js

@@ -36,7 +36,7 @@ function handleSearchResult(data, pendingGroup, assistantId, setMessages) {
 }
 exports.handleSearchResult = handleSearchResult;
 function handleMessage(data, assistantId, setMessages) {
-    updateMessageById(setMessages, assistantId, (msg) => (Object.assign(Object.assign({}, msg), { status: 'streaming', text: (msg.text || '') + ((data === null || data === void 0 ? void 0 : data.text) || '') })));
+    updateMessageById(setMessages, assistantId, (msg) => (Object.assign(Object.assign({}, msg), { status: 'streaming', text: [msg.text, data === null || data === void 0 ? void 0 : data.text].filter(Boolean).join('\n') })));
 }
 exports.handleMessage = handleMessage;
 function handleFollowUpRefinement(data, assistantId, setMessages) {

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

@@ -31,6 +31,9 @@ class BackgroundTurn {
                 this.save().then(notify);
             },
             onDone: () => {
+                if (!this.streaming)
+                    return;
+                this.release();
                 this.streaming = false;
                 this.messages = (0, chatThreads_1.normalizeHydratedMessages)(this.messages);
                 this.save().then(() => {
@@ -61,6 +64,36 @@ 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() {
+        var _a, _b;
+        this.release();
+        this.stopListening = (_b = (_a = this.store).subscribeAbort) === null || _b === void 0 ? void 0 : _b.call(_a, ({ messageId }) => {
+            if (messageId === this.turn.assistantId)
+                this.abort();
+        });
+    }
+    release() {
+        var _a;
+        (_a = this.stopListening) === null || _a === void 0 ? void 0 : _a.call(this);
+        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 = (0, chatThreads_1.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() {
@@ -82,6 +115,7 @@ let listeningForPagehide = false;
 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()));
@@ -98,6 +132,7 @@ 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/cjs/hooks/persistence/useChatPersistence.js

@@ -10,10 +10,12 @@ const useWriteQueue_1 = tslib_1.__importDefault(require("./useWriteQueue"));
 const useThreadList_1 = tslib_1.__importDefault(require("./useThreadList"));
 const useForeignStream_1 = tslib_1.__importDefault(require("./useForeignStream"));
 const backgroundTurns_1 = require("./backgroundTurns");
+/** Whether `store` can both ask another tab to stop an answer and hear such a request. */
+const canAbortAcrossTabs = (store) => Boolean((store === null || store === void 0 ? void 0 : 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. */
 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)
         (0, chatThreads_1.getTabId)();
     const [isHydrating, setIsHydrating] = (0, react_1.useState)(Boolean(store));
@@ -61,6 +63,15 @@ function useChatPersistence(params) {
             setIsHydrating(Boolean(store));
         }
     }
+    /** Settles the answer another tab left in flight, and writes it back. */
+    const settleForeign = (0, react_1.useCallback)((threadId) => {
+        if (!mountedRef.current || session.storageThreadId !== threadId)
+            return;
+        if (session.isStreaming)
+            return;
+        session.dirty = true;
+        setMessages((prev) => (0, chatThreads_1.normalizeHydratedMessages)(prev));
+    }, [session, setMessages, mountedRef]);
     /** Puts a stored conversation on screen and makes it the one this tab continues. */
     const showStoredChat = (0, react_1.useCallback)((chat) => {
         (0, chatSession_1.adoptStoredChat)(session, chat);
@@ -75,15 +86,18 @@ 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) => (0, chatThreads_1.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 = (0, react_1.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(chatThreads_1.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 = (0, react_1.useCallback)((mode) => {
         const { current } = storeRef;
@@ -327,6 +341,15 @@ function useChatPersistence(params) {
             settleAndPersist();
     }, [detachTurn, settleAndPersist]);
     (0, react_1.useEffect)(() => (0, backgroundTurns_1.subscribeBackgroundTurns)(refreshThreads), [refreshThreads]);
+    (0, react_1.useEffect)(() => {
+        if (!(store === null || store === void 0 ? void 0 : store.subscribeAbort))
+            return undefined;
+        return store.subscribeAbort(({ messageId }) => {
+            var _a;
+            if (((_a = turnRef.current) === null || _a === void 0 ? void 0 : _a.assistantId) === messageId)
+                abortTurn();
+        });
+    }, [store, turnRef, abortTurn]);
     // Follow changes another tab made to the list or to the thread on screen.
     const syncFromStore = (0, react_1.useCallback)(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
         var _a;
@@ -475,6 +498,8 @@ function useChatPersistence(params) {
         threads,
         activeThreadId,
         foreignInFlight,
+        canAbortForeign: foreignInFlight && canAbortAcrossTabs(store),
+        abortForeign,
         beginTurn,
         screenOwner,
         clearHistory,

package/lib/cjs/hooks/useAsaResults.js

@@ -44,6 +44,19 @@ function useAsaResults(options) {
         (_a = turnRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
         turnRef.current = null;
     }, []);
+    const abortOwnTurn = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!session.isStreaming)
+            return;
+        const abortedId = (_a = turnRef.current) === null || _a === void 0 ? void 0 : _a.assistantId;
+        cancelStream();
+        session.isStreaming = false;
+        setIsStreaming(false);
+        if (abortedId)
+            setMessages((prev) => (0, chatThreads_1.settleCancelledReply)(prev, abortedId));
+        // With persistence on, the cancelled turn is stored as it stands.
+        session.dirty = true;
+    }, [session, cancelStream]);
     const store = (0, useChatPersistence_1.default)({
         store: persistence,
         scope: persistenceScope,
@@ -56,8 +69,9 @@ function useAsaResults(options) {
         setIsStreaming,
         turnRef,
         cancelStream,
+        abortTurn: abortOwnTurn,
     });
-    const { beginTurn, screenOwner } = store;
+    const { beginTurn, screenOwner, abortForeign } = store;
     (0, react_1.useEffect)(() => cancelStream, [cancelStream]);
     const sendToCurrentThread = (0, react_1.useCallback)((text, source) => {
         var _a, _b;
@@ -154,33 +168,20 @@ 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 = (0, react_1.useCallback)(() => {
-        var _a;
-        if (!session.isStreaming)
-            return;
-        const abortedId = (_a = turnRef.current) === null || _a === void 0 ? void 0 : _a.assistantId;
-        cancelStream();
-        session.isStreaming = false;
-        setIsStreaming(false);
-        if (abortedId) {
-            setMessages((prev) => prev.flatMap((msg) => {
-                var _a;
-                if (msg.id !== abortedId)
-                    return [msg];
-                if (!msg.text && !((_a = msg.groups) === null || _a === void 0 ? void 0 : _a.length) && !msg.refinement)
-                    return [];
-                return [Object.assign(Object.assign({}, 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/cjs/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConstructorIOClient = exports.clearPersistedConversations = exports.normalizeItemToProduct = exports.useCioAsaContext = exports.useAsaTracking = exports.useAsaResults = exports.Button = exports.ResultsBlock = exports.Chat = exports.CioAsaProvider = exports.CioAsa = void 0;
+exports.ConstructorIOClient = exports.renderMarkdown = exports.clearPersistedConversations = exports.normalizeItemToProduct = exports.useCioAsaContext = exports.useAsaTracking = exports.useAsaResults = exports.Button = exports.ResultsBlock = exports.Chat = exports.CioAsaProvider = exports.CioAsa = void 0;
 // Components
 var CioAsa_1 = require("./components/CioAsa/CioAsa");
 Object.defineProperty(exports, "CioAsa", { enumerable: true, get: function () { return __importDefault(CioAsa_1).default; } });
@@ -27,6 +27,8 @@ var productNormalizer_1 = require("./utils/productNormalizer");
 Object.defineProperty(exports, "normalizeItemToProduct", { enumerable: true, get: function () { return productNormalizer_1.normalizeItemToProduct; } });
 var localStoragePersistence_1 = require("./utils/localStoragePersistence");
 Object.defineProperty(exports, "clearPersistedConversations", { enumerable: true, get: function () { return localStoragePersistence_1.clearPersistedConversations; } });
+var markdown_1 = require("./utils/markdown");
+Object.defineProperty(exports, "renderMarkdown", { enumerable: true, get: function () { return markdown_1.renderMarkdown; } });
 // Re-exported client value from the JS client (used to construct/type a cioClient)
 var types_1 = require("./types");
 Object.defineProperty(exports, "ConstructorIOClient", { enumerable: true, get: function () { return types_1.ConstructorIOClient; } });

package/lib/cjs/utils/chatThreads.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.moveThreads = exports.foreignStreamRemainingMs = exports.isThreadStreaming = exports.findRekeyedThread = exports.saveThreadAndRetireStale = exports.mergeMessages = exports.compactMessages = exports.normalizeHydratedMessages = exports.isInFlight = exports.nextMessageCounter = exports.getThreadTitle = exports.isLocalThreadId = exports.getTabId = exports.createLocalThreadId = exports.randomId = exports.IN_FLIGHT_GRACE_MS = exports.DEFAULT_PERSISTENCE_TTL_MS = exports.DEFAULT_PERSISTENCE_KEY = exports.PERSISTED_CHAT_VERSION = void 0;
+exports.moveThreads = exports.foreignStreamRemainingMs = exports.isThreadStreaming = exports.findRekeyedThread = exports.saveThreadAndRetireStale = exports.mergeMessages = exports.compactMessages = exports.settleCancelledReply = exports.normalizeHydratedMessages = exports.isInFlight = exports.nextMessageCounter = exports.getThreadTitle = exports.isLocalThreadId = exports.getTabId = exports.createLocalThreadId = exports.randomId = exports.FOREIGN_ABORT_TIMEOUT_MS = exports.IN_FLIGHT_GRACE_MS = exports.DEFAULT_PERSISTENCE_TTL_MS = exports.DEFAULT_PERSISTENCE_KEY = exports.PERSISTED_CHAT_VERSION = void 0;
 const tslib_1 = require("tslib");
 /** Stored record format; records with another version are ignored on read. */
 exports.PERSISTED_CHAT_VERSION = 1;
@@ -10,6 +10,8 @@ exports.DEFAULT_PERSISTENCE_KEY = 'cio-asa:chat';
 exports.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. */
 exports.IN_FLIGHT_GRACE_MS = 60 * 1000;
+/** How long to wait for the tab streaming an answer to store it stopped, before settling it here. */
+exports.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. */
@@ -125,6 +127,18 @@ function normalizeHydratedMessages(messages) {
     });
 }
 exports.normalizeHydratedMessages = normalizeHydratedMessages;
+/** `messages` with the cancelled reply settled: `done` when it has content, dropped otherwise. */
+function settleCancelledReply(messages, assistantId) {
+    return messages.flatMap((m) => {
+        var _a;
+        if (m.id !== assistantId)
+            return [m];
+        if (!m.text && !((_a = m.groups) === null || _a === void 0 ? void 0 : _a.length) && !m.refinement)
+            return [];
+        return [Object.assign(Object.assign({}, m), { status: 'done' })];
+    });
+}
+exports.settleCancelledReply = settleCancelledReply;
 /** Messages as stored: raw items replaced by the cards `normalize` makes; a restored group keeps its cards. */
 function compactMessages(messages, normalize) {
     return messages.map((m) => {

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();