@constructor-io/constructorio-ui-asa 1.5.0 → 1.6.1

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

@@ -26,8 +26,8 @@ function getAnnouncement(messages, translations) {
     }
     return '';
 }
-const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, }, ref) => {
-    const { messages, sendMessage, isStreaming, clearHistory } = (0, useAsaResults_1.default)({
+const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, showStopButton = false, }, ref) => {
+    const { messages, sendMessage, isStreaming, abort, clearHistory } = (0, useAsaResults_1.default)({
         initialThreadId,
     });
     const chatViewRef = (0, react_1.useRef)(null);
@@ -36,6 +36,7 @@ const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions,
     const isModal = typeof onClose === 'function';
     const announcement = getAnnouncement(messages, translations);
     (0, react_1.useImperativeHandle)(ref, () => ({
+        abort,
         clearHistory,
     }));
     (0, react_1.useEffect)(() => {
@@ -59,7 +60,7 @@ const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions,
             react_1.default.createElement(WelcomeScreen_1.default, { suggestions: initialSuggestions, onSend: sendMessage, onClose: onClose, termsText: termsText, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.welcomeScreen }))) : (react_1.default.createElement("div", { className: 'cio-asa-chat-view cio-asa-chat-view--chat', ref: chatViewRef },
             react_1.default.createElement(ChatHeader_1.default, { onClose: onClose, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.header }),
             react_1.default.createElement(ChatMessageList_1.default, { messages: messages, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: (0, translate_1.default)('CioAsa.results.addToCart', translations), viewMoreText: (0, translate_1.default)('CioAsa.results.viewMore', translations), aiMessageOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.aiMessage, userMessageOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.userMessage, resultsBlockOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.resultsBlock, translations: translations, onSend: sendMessage, isStreaming: isStreaming }),
-            react_1.default.createElement(ChatInput_1.default, { onSubmit: sendMessage, isDisabled: isStreaming, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }))))));
+            react_1.default.createElement(ChatInput_1.default, { onSubmit: sendMessage, isDisabled: isStreaming, isStreaming: isStreaming, onAbort: abort, showStopButton: showStopButton, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }))))));
 });
 Chat.displayName = 'Chat';
 exports.default = Chat;

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

@@ -81,3 +81,14 @@
   cursor: default;
   opacity: 0.3;
 }
+
+/* Replaces the send button while a reply streams; always actionable, so it never
+   inherits the disabled styling above. */
+.cio-asa-chat-input__stop {
+  cursor: pointer;
+  opacity: 1;
+}
+
+.cio-asa-chat-input__stop:hover rect {
+  fill-opacity: 1;
+}

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

@@ -6,25 +6,30 @@ const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-
 const icons_1 = require("../icons");
 const translate_1 = tslib_1.__importDefault(require("../../utils/translate"));
 const useMessageInput_1 = tslib_1.__importDefault(require("../../hooks/useMessageInput"));
-function ChatInput({ onSubmit, isDisabled = false, translations, componentOverrides, }) {
+function ChatInput({ onSubmit, isDisabled = false, isStreaming = false, onAbort, showStopButton = false, translations, componentOverrides, }) {
     const { value, setValue, handleSubmit, handleKeyDown } = (0, useMessageInput_1.default)({
         onSend: onSubmit,
         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 renderProps = {
         value,
         onChange: setValue,
         onSubmit: handleSubmit,
         placeholder: (0, translate_1.default)('CioAsa.input.placeholder', translations),
         isDisabled,
+        isStreaming,
+        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) }),
-                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))))));
+                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) },
+                    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)))))));
 }
 exports.default = ChatInput;
 ChatInput.displayName = 'ChatInput';

package/lib/cjs/components/CioAsa/CioAsa.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const CioAsaProvider_1 = tslib_1.__importDefault(require("../CioAsaProvider/CioAsaProvider"));
+const Chat_1 = tslib_1.__importDefault(require("../Chat/Chat"));
+/**
+ * The whole agent in one component: the provider and the chat UI composed together.
+ *
+ * Consumers that need to place `Chat` inside their own tree, or render several
+ * components against one client, should compose `CioAsaProvider` and `Chat`
+ * directly. This is the single-entry-point convenience wrapper, and it is what the
+ * standalone browser bundle (`src/bundled.jsx`) mounts.
+ */
+const CioAsa = react_1.default.forwardRef((props, ref) => {
+    const { 
+    // Provider configuration — everything else belongs to Chat.
+    apiKey, cioClient, staticRequestConfigs, formatters, urlHelpers, callbacks, section } = props, chatProps = tslib_1.__rest(props, ["apiKey", "cioClient", "staticRequestConfigs", "formatters", "urlHelpers", "callbacks", "section"]);
+    return (react_1.default.createElement(CioAsaProvider_1.default, { apiKey: apiKey, cioClient: cioClient, staticRequestConfigs: staticRequestConfigs, formatters: formatters, urlHelpers: urlHelpers, callbacks: callbacks, section: section },
+        react_1.default.createElement(Chat_1.default, Object.assign({}, chatProps, { ref: ref }))));
+});
+CioAsa.displayName = 'CioAsa';
+exports.default = CioAsa;

package/lib/cjs/components/icons/StopIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function StopIcon() {
+    return (react_1.default.createElement("svg", { width: '10', height: '10', viewBox: '0 0 10 10', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' },
+        react_1.default.createElement("rect", { x: '0.5', y: '0.5', width: '9', height: '9', rx: '1.5', fill: '#0F1324', fillOpacity: '0.7' })));
+}
+exports.default = StopIcon;

package/lib/cjs/components/icons/index.js

@@ -3,13 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrowRightIcon = exports.SendPlaneIcon = exports.SendArrowIcon = exports.ChatBubbleLightIcon = exports.ChatBubbleDarkIcon = void 0;
+exports.ArrowRightIcon = exports.SendPlaneIcon = exports.StopIcon = exports.SendArrowIcon = exports.ChatBubbleLightIcon = exports.ChatBubbleDarkIcon = void 0;
 var ChatBubbleDarkIcon_1 = require("./ChatBubbleDarkIcon");
 Object.defineProperty(exports, "ChatBubbleDarkIcon", { enumerable: true, get: function () { return __importDefault(ChatBubbleDarkIcon_1).default; } });
 var ChatBubbleLightIcon_1 = require("./ChatBubbleLightIcon");
 Object.defineProperty(exports, "ChatBubbleLightIcon", { enumerable: true, get: function () { return __importDefault(ChatBubbleLightIcon_1).default; } });
 var SendArrowIcon_1 = require("./SendArrowIcon");
 Object.defineProperty(exports, "SendArrowIcon", { enumerable: true, get: function () { return __importDefault(SendArrowIcon_1).default; } });
+var StopIcon_1 = require("./StopIcon");
+Object.defineProperty(exports, "StopIcon", { enumerable: true, get: function () { return __importDefault(StopIcon_1).default; } });
 var SendPlaneIcon_1 = require("./SendPlaneIcon");
 Object.defineProperty(exports, "SendPlaneIcon", { enumerable: true, get: function () { return __importDefault(SendPlaneIcon_1).default; } });
 var ArrowRightIcon_1 = require("./ArrowRightIcon");

package/lib/cjs/hooks/useAsaResults.js

@@ -14,6 +14,9 @@ function useAsaResults(options) {
     const readerRef = (0, react_1.useRef)(null);
     const threadIdRef = (0, react_1.useRef)((_a = options === null || options === void 0 ? void 0 : options.initialThreadId) !== null && _a !== void 0 ? _a : null);
     const idCounterRef = (0, react_1.useRef)(0);
+    // The assistant message the in-flight stream is writing into, so `abort` can
+    // settle it without having to guess which message that is.
+    const activeAssistantIdRef = (0, react_1.useRef)(null);
     const contextValue = (0, useCioAsaContext_1.useCioAsaContext)();
     if (!contextValue) {
         throw new Error('useAsaResults must be used within a CioAsaProvider.');
@@ -34,6 +37,21 @@ function useAsaResults(options) {
     callbacksRef.current = callbacks;
     const staticRequestConfigsRef = (0, react_1.useRef)(staticRequestConfigs);
     staticRequestConfigsRef.current = staticRequestConfigs;
+    /**
+     * Stops the in-flight stream. The kill switch is raised *before* cancelling because
+     * cancelling makes the pending `reader.read()` resolve `{ done: true }` — identical
+     * to a stream that ended on its own. Without the flag already set, the read loop
+     * would take the end-of-stream branch and report a load that never finished.
+     *
+     * Deliberately touches no state, so the unmount cleanup can share it.
+     */
+    const teardownStream = (0, react_1.useCallback)(() => {
+        killSwitchRef.current = true;
+        if (readerRef.current) {
+            readerRef.current.cancel();
+            readerRef.current = null;
+        }
+    }, []);
     const nextMessageId = (0, react_1.useCallback)(() => {
         idCounterRef.current += 1;
         return `msg-${idCounterRef.current}-${Date.now()}`;
@@ -59,6 +77,7 @@ function useAsaResults(options) {
             status: 'loading',
             intent,
         };
+        activeAssistantIdRef.current = assistantMessage.id;
         setMessages((prev) => [...prev, userMessage, assistantMessage]);
         setIsStreaming(true);
         isStreamingRef.current = true;
@@ -159,30 +178,56 @@ function useAsaResults(options) {
                 if (readerRef.current === reader) {
                     reader.cancel();
                     readerRef.current = null;
+                    activeAssistantIdRef.current = null;
                     setIsStreaming(false);
                     isStreamingRef.current = false;
                 }
             }
         }))();
     }, [cioClient, domain, nextMessageId]);
-    (0, react_1.useEffect)(() => () => {
-        killSwitchRef.current = true;
-        if (readerRef.current) {
-            readerRef.current.cancel();
-            readerRef.current = null;
+    (0, react_1.useEffect)(() => () => teardownStream(), [teardownStream]);
+    /**
+     * 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
+     * thread id is kept, so the next message continues the same conversation rather than
+     * starting a new one. Use `clearHistory` to reset instead.
+     *
+     * A reply that had streamed nothing yet is dropped rather than settled — it would
+     * otherwise render as a blank bubble, and a cancelled turn would read as a glitch.
+     * "Nothing" means no text, no product groups and no follow-up refinement; any one of
+     * them is content worth keeping. The user's own message always stays.
+     *
+     * 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.
+     */
+    const abort = (0, react_1.useCallback)(() => {
+        if (!isStreamingRef.current)
+            return;
+        teardownStream();
+        setIsStreaming(false);
+        isStreamingRef.current = false;
+        const abortedId = activeAssistantIdRef.current;
+        activeAssistantIdRef.current = null;
+        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' })];
+            }));
         }
-    }, []);
+    }, [teardownStream]);
     const clearHistory = (0, react_1.useCallback)(() => {
-        killSwitchRef.current = true;
-        if (readerRef.current) {
-            readerRef.current.cancel();
-            readerRef.current = null;
-        }
+        teardownStream();
         threadIdRef.current = null;
+        activeAssistantIdRef.current = null;
         setMessages([]);
         setIsStreaming(false);
         isStreamingRef.current = false;
-    }, []);
-    return { messages, sendMessage, isStreaming, clearHistory };
+    }, [teardownStream]);
+    return { messages, sendMessage, isStreaming, abort, clearHistory };
 }
 exports.default = useAsaResults;

package/lib/cjs/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConstructorIOClient = exports.normalizeItemToProduct = exports.useCioAsaContext = exports.useAsaTracking = exports.useAsaResults = exports.Button = exports.ResultsBlock = exports.Chat = exports.CioAsaProvider = void 0;
+exports.ConstructorIOClient = 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; } });
 var CioAsaProvider_1 = require("./components/CioAsaProvider/CioAsaProvider");
 Object.defineProperty(exports, "CioAsaProvider", { enumerable: true, get: function () { return __importDefault(CioAsaProvider_1).default; } });
 var Chat_1 = require("./components/Chat/Chat");

package/lib/cjs/utils/translate.js

@@ -6,6 +6,7 @@ const defaultTranslations = {
     'CioAsa.input.placeholder': 'Ask a question about this product',
     'CioAsa.input.ariaLabel': 'Type your message',
     'CioAsa.input.sendAriaLabel': 'Send message',
+    'CioAsa.input.stopAriaLabel': 'Stop response',
     'CioAsa.welcome.title': 'Shopping Assistant',
     'CioAsa.welcome.placeholder': 'Ask anything',
     'CioAsa.welcome.sendButton': 'Chat',

package/lib/cjs/version.js

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

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

@@ -22,8 +22,8 @@ function getAnnouncement(messages, translations) {
     }
     return '';
 }
-const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, }, ref) => {
-    const { messages, sendMessage, isStreaming, clearHistory } = useAsaResults({
+const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, showStopButton = false, }, ref) => {
+    const { messages, sendMessage, isStreaming, abort, clearHistory } = useAsaResults({
         initialThreadId,
     });
     const chatViewRef = useRef(null);
@@ -32,6 +32,7 @@ const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, on
     const isModal = typeof onClose === 'function';
     const announcement = getAnnouncement(messages, translations);
     useImperativeHandle(ref, () => ({
+        abort,
         clearHistory,
     }));
     useEffect(() => {
@@ -55,7 +56,7 @@ const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, on
             React.createElement(WelcomeScreen, { suggestions: initialSuggestions, onSend: sendMessage, onClose: onClose, termsText: termsText, translations: translations, componentOverrides: componentOverrides?.welcomeScreen }))) : (React.createElement("div", { className: 'cio-asa-chat-view cio-asa-chat-view--chat', ref: chatViewRef },
             React.createElement(ChatHeader, { onClose: onClose, translations: translations, componentOverrides: componentOverrides?.header }),
             React.createElement(ChatMessageList, { messages: messages, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: translate('CioAsa.results.addToCart', translations), viewMoreText: translate('CioAsa.results.viewMore', translations), aiMessageOverrides: componentOverrides?.aiMessage, userMessageOverrides: componentOverrides?.userMessage, resultsBlockOverrides: componentOverrides?.resultsBlock, translations: translations, onSend: sendMessage, isStreaming: isStreaming }),
-            React.createElement(ChatInput, { onSubmit: sendMessage, isDisabled: isStreaming, translations: translations, componentOverrides: componentOverrides?.input }))))));
+            React.createElement(ChatInput, { onSubmit: sendMessage, isDisabled: isStreaming, isStreaming: isStreaming, onAbort: abort, showStopButton: showStopButton, translations: translations, componentOverrides: componentOverrides?.input }))))));
 });
 Chat.displayName = 'Chat';
 export default Chat;

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

@@ -81,3 +81,14 @@
   cursor: default;
   opacity: 0.3;
 }
+
+/* Replaces the send button while a reply streams; always actionable, so it never
+   inherits the disabled styling above. */
+.cio-asa-chat-input__stop {
+  cursor: pointer;
+  opacity: 1;
+}
+
+.cio-asa-chat-input__stop:hover rect {
+  fill-opacity: 1;
+}

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

@@ -1,26 +1,31 @@
 import React from 'react';
 import { RenderPropsWrapper } from '@constructor-io/constructorio-ui-components';
-import { SendArrowIcon } from '../icons';
+import { SendArrowIcon, StopIcon } from '../icons';
 import translate from '../../utils/translate';
 import useMessageInput from '../../hooks/useMessageInput';
-export default function ChatInput({ onSubmit, isDisabled = false, translations, componentOverrides, }) {
+export default function ChatInput({ onSubmit, isDisabled = false, isStreaming = false, onAbort, showStopButton = false, translations, componentOverrides, }) {
     const { value, setValue, handleSubmit, handleKeyDown } = useMessageInput({
         onSend: onSubmit,
         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 renderProps = {
         value,
         onChange: setValue,
         onSubmit: handleSubmit,
         placeholder: translate('CioAsa.input.placeholder', translations),
         isDisabled,
+        isStreaming,
+        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) }),
-                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))))));
+                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) },
+                    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)))))));
 }
 ChatInput.displayName = 'ChatInput';

package/lib/mjs/components/CioAsa/CioAsa.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import CioAsaProvider from '../CioAsaProvider/CioAsaProvider';
+import Chat from '../Chat/Chat';
+/**
+ * The whole agent in one component: the provider and the chat UI composed together.
+ *
+ * Consumers that need to place `Chat` inside their own tree, or render several
+ * components against one client, should compose `CioAsaProvider` and `Chat`
+ * directly. This is the single-entry-point convenience wrapper, and it is what the
+ * standalone browser bundle (`src/bundled.jsx`) mounts.
+ */
+const CioAsa = React.forwardRef((props, ref) => {
+    const { 
+    // Provider configuration — everything else belongs to Chat.
+    apiKey, cioClient, staticRequestConfigs, formatters, urlHelpers, callbacks, section, ...chatProps } = props;
+    return (React.createElement(CioAsaProvider, { apiKey: apiKey, cioClient: cioClient, staticRequestConfigs: staticRequestConfigs, formatters: formatters, urlHelpers: urlHelpers, callbacks: callbacks, section: section },
+        React.createElement(Chat, { ...chatProps, ref: ref })));
+});
+CioAsa.displayName = 'CioAsa';
+export default CioAsa;

package/lib/mjs/components/icons/StopIcon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function StopIcon() {
+    return (React.createElement("svg", { width: '10', height: '10', viewBox: '0 0 10 10', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' },
+        React.createElement("rect", { x: '0.5', y: '0.5', width: '9', height: '9', rx: '1.5', fill: '#0F1324', fillOpacity: '0.7' })));
+}

package/lib/mjs/components/icons/index.js

@@ -1,5 +1,6 @@
 export { default as ChatBubbleDarkIcon } from './ChatBubbleDarkIcon';
 export { default as ChatBubbleLightIcon } from './ChatBubbleLightIcon';
 export { default as SendArrowIcon } from './SendArrowIcon';
+export { default as StopIcon } from './StopIcon';
 export { default as SendPlaneIcon } from './SendPlaneIcon';
 export { default as ArrowRightIcon } from './ArrowRightIcon';

package/lib/mjs/hooks/useAsaResults.js

@@ -10,6 +10,9 @@ export default function useAsaResults(options) {
     const readerRef = useRef(null);
     const threadIdRef = useRef(options?.initialThreadId ?? null);
     const idCounterRef = useRef(0);
+    // The assistant message the in-flight stream is writing into, so `abort` can
+    // settle it without having to guess which message that is.
+    const activeAssistantIdRef = useRef(null);
     const contextValue = useCioAsaContext();
     if (!contextValue) {
         throw new Error('useAsaResults must be used within a CioAsaProvider.');
@@ -30,6 +33,21 @@ export default function useAsaResults(options) {
     callbacksRef.current = callbacks;
     const staticRequestConfigsRef = useRef(staticRequestConfigs);
     staticRequestConfigsRef.current = staticRequestConfigs;
+    /**
+     * Stops the in-flight stream. The kill switch is raised *before* cancelling because
+     * cancelling makes the pending `reader.read()` resolve `{ done: true }` — identical
+     * to a stream that ended on its own. Without the flag already set, the read loop
+     * would take the end-of-stream branch and report a load that never finished.
+     *
+     * Deliberately touches no state, so the unmount cleanup can share it.
+     */
+    const teardownStream = useCallback(() => {
+        killSwitchRef.current = true;
+        if (readerRef.current) {
+            readerRef.current.cancel();
+            readerRef.current = null;
+        }
+    }, []);
     const nextMessageId = useCallback(() => {
         idCounterRef.current += 1;
         return `msg-${idCounterRef.current}-${Date.now()}`;
@@ -54,6 +72,7 @@ export default function useAsaResults(options) {
             status: 'loading',
             intent,
         };
+        activeAssistantIdRef.current = assistantMessage.id;
         setMessages((prev) => [...prev, userMessage, assistantMessage]);
         setIsStreaming(true);
         isStreamingRef.current = true;
@@ -156,29 +175,54 @@ export default function useAsaResults(options) {
                 if (readerRef.current === reader) {
                     reader.cancel();
                     readerRef.current = null;
+                    activeAssistantIdRef.current = null;
                     setIsStreaming(false);
                     isStreamingRef.current = false;
                 }
             }
         })();
     }, [cioClient, domain, nextMessageId]);
-    useEffect(() => () => {
-        killSwitchRef.current = true;
-        if (readerRef.current) {
-            readerRef.current.cancel();
-            readerRef.current = null;
+    useEffect(() => () => teardownStream(), [teardownStream]);
+    /**
+     * 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
+     * thread id is kept, so the next message continues the same conversation rather than
+     * starting a new one. Use `clearHistory` to reset instead.
+     *
+     * A reply that had streamed nothing yet is dropped rather than settled — it would
+     * otherwise render as a blank bubble, and a cancelled turn would read as a glitch.
+     * "Nothing" means no text, no product groups and no follow-up refinement; any one of
+     * them is content worth keeping. The user's own message always stays.
+     *
+     * 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.
+     */
+    const abort = useCallback(() => {
+        if (!isStreamingRef.current)
+            return;
+        teardownStream();
+        setIsStreaming(false);
+        isStreamingRef.current = false;
+        const abortedId = activeAssistantIdRef.current;
+        activeAssistantIdRef.current = null;
+        if (abortedId) {
+            setMessages((prev) => prev.flatMap((msg) => {
+                if (msg.id !== abortedId)
+                    return [msg];
+                if (!msg.text && !msg.groups?.length && !msg.refinement)
+                    return [];
+                return [{ ...msg, status: 'done' }];
+            }));
         }
-    }, []);
+    }, [teardownStream]);
     const clearHistory = useCallback(() => {
-        killSwitchRef.current = true;
-        if (readerRef.current) {
-            readerRef.current.cancel();
-            readerRef.current = null;
-        }
+        teardownStream();
         threadIdRef.current = null;
+        activeAssistantIdRef.current = null;
         setMessages([]);
         setIsStreaming(false);
         isStreamingRef.current = false;
-    }, []);
-    return { messages, sendMessage, isStreaming, clearHistory };
+    }, [teardownStream]);
+    return { messages, sendMessage, isStreaming, abort, clearHistory };
 }

package/lib/mjs/index.js

@@ -1,4 +1,5 @@
 // Components
+export { default as CioAsa } from './components/CioAsa/CioAsa';
 export { default as CioAsaProvider } from './components/CioAsaProvider/CioAsaProvider';
 export { default as Chat } from './components/Chat/Chat';
 export { default as ResultsBlock } from './components/ResultsBlock/ResultsBlock';

package/lib/mjs/utils/translate.js

@@ -4,6 +4,7 @@ const defaultTranslations = {
     'CioAsa.input.placeholder': 'Ask a question about this product',
     'CioAsa.input.ariaLabel': 'Type your message',
     'CioAsa.input.sendAriaLabel': 'Send message',
+    'CioAsa.input.stopAriaLabel': 'Stop response',
     'CioAsa.welcome.title': 'Shopping Assistant',
     'CioAsa.welcome.placeholder': 'Ask anything',
     'CioAsa.welcome.sendButton': 'Chat',

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.5.0';
+export default '1.6.1';

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

@@ -3,9 +3,16 @@ import { ChatComponentOverrides, ResultGroupMeta, Translations } from '../../typ
 import { Product, NormalizeOptions } from '../../utils/productNormalizer';
 import { AspectRatio } from '../ResultsBlock/ResultsBlock';
 export interface ChatHandle {
+    /**
+     * Cancel the in-flight response, keeping the conversation. The partial reply is kept
+     * and the thread is preserved, so the next message continues where it left off.
+     * No-op when nothing is streaming.
+     */
+    abort: () => void;
+    /** Cancel any active response, then reset the conversation and the thread. */
     clearHistory: () => void;
 }
-interface ChatProps {
+export interface ChatProps {
     /** Called when the close button (✕) is clicked. The consumer controls visibility. */
     onClose?: () => void;
     /** Additional CSS class name for the root container */
@@ -35,6 +42,12 @@ interface ChatProps {
     translations?: Translations;
     /** Seed the thread id (e.g. loaded from browser storage) to resume a prior conversation. Read once on mount. */
     initialThreadId?: string;
+    /**
+     * Whether the input's send button becomes a stop button while a reply streams.
+     * Defaults to `false`, so the packaged UI is unchanged unless you opt in. While it is
+     * off, cancelling is only reachable via `abort()` on the ref or your own input override.
+     */
+    showStopButton?: boolean;
 }
 declare const Chat: React.ForwardRefExoticComponent<ChatProps & React.RefAttributes<ChatHandle>>;
 export default Chat;

package/lib/types/components/Chat/ChatInput.d.ts

@@ -3,10 +3,20 @@ import { ChatInputRenderProps, ComponentOverrideProps, Translations } from '../.
 interface ChatInputProps {
     onSubmit: (text: string) => void;
     isDisabled?: boolean;
+    /** A reply is streaming: the send button becomes a stop button. */
+    isStreaming?: boolean;
+    /** Cancel the in-flight reply. */
+    onAbort?: () => void;
+    /**
+     * Whether the built-in stop button replaces send while streaming. Defaults to `false`:
+     * the send button stays (disabled). `onAbort` reaches the render props either way, so a
+     * consumer can render their own control without enabling this one.
+     */
+    showStopButton?: boolean;
     translations?: Translations;
     componentOverrides?: ComponentOverrideProps<ChatInputRenderProps>;
 }
-declare function ChatInput({ onSubmit, isDisabled, translations, componentOverrides, }: ChatInputProps): React.JSX.Element;
+declare function ChatInput({ onSubmit, isDisabled, isStreaming, onAbort, showStopButton, translations, componentOverrides, }: ChatInputProps): React.JSX.Element;
 declare namespace ChatInput {
     var displayName: string;
 }

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ChatHandle, ChatProps } from '../Chat/Chat';
+import { CioAsaProviderProps } from '../../types';
+export type CioAsaProps = CioAsaProviderProps & ChatProps;
+/**
+ * The whole agent in one component: the provider and the chat UI composed together.
+ *
+ * Consumers that need to place `Chat` inside their own tree, or render several
+ * components against one client, should compose `CioAsaProvider` and `Chat`
+ * directly. This is the single-entry-point convenience wrapper, and it is what the
+ * standalone browser bundle (`src/bundled.jsx`) mounts.
+ */
+declare const CioAsa: React.ForwardRefExoticComponent<CioAsaProviderProps & ChatProps & React.RefAttributes<ChatHandle>>;
+export default CioAsa;

package/lib/types/components/icons/StopIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function StopIcon(): React.JSX.Element;

package/lib/types/components/icons/index.d.ts

@@ -1,5 +1,6 @@
 export { default as ChatBubbleDarkIcon } from './ChatBubbleDarkIcon';
 export { default as ChatBubbleLightIcon } from './ChatBubbleLightIcon';
 export { default as SendArrowIcon } from './SendArrowIcon';
+export { default as StopIcon } from './StopIcon';
 export { default as SendPlaneIcon } from './SendPlaneIcon';
 export { default as ArrowRightIcon } from './ArrowRightIcon';

package/lib/types/index.d.ts

@@ -1,6 +1,8 @@
+export { default as CioAsa } from './components/CioAsa/CioAsa';
+export type { CioAsaProps } from './components/CioAsa/CioAsa';
 export { default as CioAsaProvider } from './components/CioAsaProvider/CioAsaProvider';
 export { default as Chat } from './components/Chat/Chat';
-export type { ChatHandle } from './components/Chat/Chat';
+export type { ChatHandle, ChatProps } from './components/Chat/Chat';
 export { default as ResultsBlock } from './components/ResultsBlock/ResultsBlock';
 export type { AspectRatio } from './components/ResultsBlock/ResultsBlock';
 export { default as Button } from './components/Button/Button';