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

package/lib/cjs/components/Button/Button.js

@@ -1,11 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
 const icons_1 = require("../icons");
-function Button({ theme = 'dark', size = 'sm', onClick, label = 'Shopping assistant', }) {
-    return (react_1.default.createElement(constructorio_ui_components_1.Button, { className: `cio-asa-button cio-asa-button--${theme} cio-asa-button--${size}`, size: size === 'lg' ? 'default' : 'sm', onClick: onClick },
+const useCioAsaContext_1 = require("../../hooks/useCioAsaContext");
+const useAsaTracking_1 = tslib_1.__importDefault(require("../../hooks/useAsaTracking"));
+const AGENT_BUTTON_CLICK_MODE = 'chat';
+function Button({ theme = 'dark', size = 'sm', onClick, label = 'Shopping assistant', positionOnPage, pageType, instanceId, }) {
+    var _a, _b, _c;
+    const context = (0, useCioAsaContext_1.useCioAsaContext)();
+    const agentDomain = (_a = context === null || context === void 0 ? void 0 : context.staticRequestConfigs) === null || _a === void 0 ? void 0 : _a.domain;
+    const tracking = (0, useAsaTracking_1.default)({
+        tracker: (_c = (_b = context === null || context === void 0 ? void 0 : context.cioClient) === null || _b === void 0 ? void 0 : _b.tracker) !== null && _c !== void 0 ? _c : undefined,
+        section: context === null || context === void 0 ? void 0 : context.section,
+    });
+    const handleClick = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        if (agentDomain) {
+            const payload = Object.assign(Object.assign(Object.assign({ mode: AGENT_BUTTON_CLICK_MODE, agentDomain }, (positionOnPage && { positionOnPage })), (pageType && { pageType })), (instanceId && { instanceId }));
+            tracking.trackAgentButtonClick(payload);
+            (_b = (_a = context === null || context === void 0 ? void 0 : context.callbacks) === null || _a === void 0 ? void 0 : _a.onAgentButtonClick) === null || _b === void 0 ? void 0 : _b.call(_a, payload);
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [agentDomain, positionOnPage, pageType, instanceId, tracking, context, onClick]);
+    return (react_1.default.createElement(constructorio_ui_components_1.Button, { className: `cio-asa-button cio-asa-button--${theme} cio-asa-button--${size}`, size: size === 'lg' ? 'default' : 'sm', onClick: handleClick },
         theme === 'dark' ? react_1.default.createElement(icons_1.ChatBubbleDarkIcon, null) : react_1.default.createElement(icons_1.ChatBubbleLightIcon, null),
         react_1.default.createElement("span", { className: 'cio-asa-button__label' }, label)));
 }

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,11 +26,11 @@ 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 '';
 }
-const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, onThreadsChange, showStopButton = false, }, ref) => {
+const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, initialPrompt, onThreadsChange, showStopButton = false, }, ref) => {
     var _a;
     const { messages, sendMessage, isStreaming, canAbort, abort, clearHistory, isHydrating, threads, activeThreadId, newThread, switchThread, } = (0, useAsaResults_1.default)({
         initialThreadId,
@@ -49,12 +50,25 @@ const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions,
     const showChatFrame = showChat || (isHydrating && lastViewRef.current === 'chat');
     const isModal = typeof onClose === 'function';
     const announcement = getAnnouncement(messages, translations);
-    (0, react_1.useImperativeHandle)(ref, () => ({ abort, clearHistory, newThread, switchThread }), [
+    (0, react_1.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 = (0, react_1.useRef)(initialPrompt);
+    (0, react_1.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((_a = (0, useCioAsaContext_1.useCioAsaContext)()) === null || _a === void 0 ? void 0 : _a.persistence);
     const onThreadsChangeRef = (0, useLatest_1.default)(onThreadsChange);
     (0, react_1.useEffect)(() => {

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

@@ -8,6 +8,7 @@ const useChatPersistence_1 = tslib_1.__importDefault(require("./persistence/useC
 const agentStream_1 = require("./agentStream");
 const chatSession_1 = require("../utils/chatSession");
 const productNormalizer_1 = require("../utils/productNormalizer");
+const chatThreads_1 = require("../utils/chatThreads");
 const useLatest_1 = tslib_1.__importDefault(require("./useLatest"));
 function useAsaResults(options) {
     var _a;
@@ -43,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,
@@ -55,16 +69,17 @@ function useAsaResults(options) {
         setIsStreaming,
         turnRef,
         cancelStream,
+        abortTurn: abortOwnTurn,
     });
-    const { beginTurn, screenOwner } = store;
+    const { beginTurn, screenOwner, abortForeign } = store;
     (0, react_1.useEffect)(() => cancelStream, [cancelStream]);
-    const sendMessage = (0, react_1.useCallback)((text, source = 'input') => {
+    const sendToCurrentThread = (0, react_1.useCallback)((text, source) => {
         var _a, _b;
         const intent = text.trim();
         if (!intent || session.isStreaming || session.foreignInFlight)
             return;
         beginTurn();
-        trackingRef.current.trackSubmit(intent);
+        trackingRef.current.trackSubmit(intent, source);
         (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onAssistantSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, { intent, source });
         const userMessage = {
             id: (0, chatSession_1.nextMessageId)(session),
@@ -113,6 +128,32 @@ function useAsaResults(options) {
         callbacksRef,
         staticRequestConfigsRef,
     ]);
+    const { newThread, switchThread } = store;
+    /**
+     * Sends `text`. With `threadId`, first moves to that conversation, loading it from storage
+     * when persistence has it and otherwise continuing it on the server with an empty screen.
+     */
+    const sendMessage = (0, react_1.useCallback)((text, source = 'input', { threadId } = {}) => {
+        if (!threadId ||
+            threadId === session.serverThreadId ||
+            threadId === session.storageThreadId) {
+            sendToCurrentThread(text, source);
+            return;
+        }
+        (() => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if (persistence)
+                yield switchThread(threadId);
+            else
+                newThread();
+            // A turn that started meanwhile (or one still streaming in the background) owns the screen.
+            if (session.isStreaming || session.foreignInFlight)
+                return;
+            if (!session.serverThreadId && !(0, chatThreads_1.isLocalThreadId)(threadId)) {
+                session.serverThreadId = threadId;
+            }
+            sendToCurrentThread(text, source);
+        }))();
+    }, [session, persistence, newThread, switchThread, sendToCurrentThread]);
     /**
      * Cancels the in-flight request while keeping the conversation: the partial reply is
      * settled as `done` (so the typing indicator stops and streamed text survives) and the
@@ -127,40 +168,27 @@ 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,
         threads: store.threads,
         activeThreadId: store.activeThreadId,
-        newThread: store.newThread,
-        switchThread: store.switchThread,
+        newThread,
+        switchThread,
     };
 }
 exports.default = useAsaResults;

package/lib/cjs/hooks/useAsaTracking.js

@@ -1,7 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
+/** Beacon `source` values, aligned with the ones the behavioral-actions API documents. */
+const BEACON_SUBMIT_SOURCES = {
+    input: 'input',
+    suggestion: 'suggestion',
+    refinement: 'follow_up',
+    // A prompt the host page sent, typically a suggested question clicked outside the chat.
+    external: 'suggestion',
+};
 const NOOP_TRACKING = {
+    trackAgentButtonClick: () => { },
     trackSubmit: () => { },
     trackResultLoadStarted: () => { },
     trackResultLoadFinished: () => { },
@@ -15,37 +24,42 @@ const NOOP_TRACKING = {
  * Mirrors the tracking-hook pattern used by constructorio-ui-pia.
  */
 function useAsaTracking({ tracker, section, threadId, }) {
-    const assistant = tracker;
     const base = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (section && { section })), (threadId && { threadId }))), [section, threadId]);
-    const trackSubmit = (0, react_1.useCallback)((intent) => {
-        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantSubmit(Object.assign({ intent }, base));
-    }, [assistant, base]);
+    const trackAgentButtonClick = (0, react_1.useCallback)(({ mode, agentDomain, positionOnPage, pageType, instanceId }) => {
+        var _a;
+        (_a = tracker === null || tracker === void 0 ? void 0 : tracker.trackAgentButtonClick) === null || _a === void 0 ? void 0 : _a.call(tracker, Object.assign(Object.assign(Object.assign(Object.assign({ mode,
+            agentDomain }, (positionOnPage && { positionOnPage })), (pageType && { pageType })), (instanceId && { instanceId })), (section && { section })));
+    }, [tracker, section]);
+    const trackSubmit = (0, react_1.useCallback)((intent, source) => {
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackAssistantSubmit(Object.assign(Object.assign({ intent }, (source && { source: BEACON_SUBMIT_SOURCES[source] })), base));
+    }, [tracker, base]);
     const trackResultLoadStarted = (0, react_1.useCallback)(({ intent, intentResultId }) => {
-        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantResultLoadStarted(Object.assign(Object.assign({ intent }, (intentResultId && { intentResultId })), base));
-    }, [assistant, base]);
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackAssistantResultLoadStarted(Object.assign(Object.assign({ intent }, (intentResultId && { intentResultId })), base));
+    }, [tracker, base]);
     const trackResultLoadFinished = (0, react_1.useCallback)(({ intent, searchResultCount, intentResultId, threadId: turnThreadId, }) => {
-        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantResultLoadFinished(Object.assign(Object.assign(Object.assign({ intent,
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackAssistantResultLoadFinished(Object.assign(Object.assign(Object.assign({ intent,
             searchResultCount }, (intentResultId && { intentResultId })), base), (turnThreadId && { threadId: turnThreadId })));
-    }, [assistant, base]);
+    }, [tracker, base]);
     const trackResultClick = (0, react_1.useCallback)(({ intent, searchResultId, intentResultId, itemId, itemName, variationId, }) => {
-        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantResultClick(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ intent,
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackAssistantResultClick(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ intent,
             searchResultId }, (intentResultId && { intentResultId })), (itemId && { itemId })), (itemName && { itemName })), (variationId && { variationId })), base));
-    }, [assistant, base]);
+    }, [tracker, base]);
     const trackResultView = (0, react_1.useCallback)(({ intent, searchResultId, numResultsViewed, intentResultId, items }) => {
-        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantResultView(Object.assign(Object.assign(Object.assign({ intent,
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackAssistantResultView(Object.assign(Object.assign(Object.assign({ intent,
             searchResultId,
             numResultsViewed }, (intentResultId && { intentResultId })), (items && items.length > 0 && { items })), base));
-    }, [assistant, base]);
+    }, [tracker, base]);
     const trackSearchSubmit = (0, react_1.useCallback)(({ intent, searchTerm, userInput, searchResultId, intentResultId, groupId, }) => {
-        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantSearchSubmit(Object.assign(Object.assign(Object.assign({ intent,
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackAssistantSearchSubmit(Object.assign(Object.assign(Object.assign({ intent,
             searchTerm,
             userInput,
             searchResultId }, (intentResultId && { intentResultId })), (groupId && { groupId })), base));
-    }, [assistant, base]);
+    }, [tracker, base]);
     return (0, react_1.useMemo)(() => {
-        if (!assistant)
+        if (!tracker)
             return NOOP_TRACKING;
         return {
+            trackAgentButtonClick,
             trackSubmit,
             trackResultLoadStarted,
             trackResultLoadFinished,
@@ -54,7 +68,8 @@ function useAsaTracking({ tracker, section, threadId, }) {
             trackSearchSubmit,
         };
     }, [
-        assistant,
+        tracker,
+        trackAgentButtonClick,
         trackSubmit,
         trackResultLoadStarted,
         trackResultLoadFinished,

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) => {