@constructor-io/constructorio-ui-asa 1.4.0 → 1.6.0

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;
@@ -142,6 +161,10 @@ function useAsaResults(options) {
                         fireLoadStart();
                         (0, asaStreamHandlers_1.handleMessage)(data, assistantMessage.id, setMessages);
                     }
+                    else if (type === 'follow_up_refinement') {
+                        fireLoadStart();
+                        (0, asaStreamHandlers_1.handleFollowUpRefinement)(data, assistantMessage.id, setMessages);
+                    }
                     else if (type === 'server_error') {
                         (0, asaStreamHandlers_1.handleServerError)(assistantMessage.id, setMessages);
                         break;
@@ -155,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/styles.css

@@ -6,6 +6,7 @@
 @import './components/Chat/ChatMessageList.css';
 @import './components/Chat/UserMessage.css';
 @import './components/Chat/AiMessage.css';
+@import './components/Chat/FollowUpRefinement.css';
 @import './components/Chat/TypingIndicator.css';
 @import './components/Chat/ChatInput.css';
 @import './components/ResultsBlock/ResultsBlock.css';

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',
@@ -18,6 +19,7 @@ const defaultTranslations = {
     'CioAsa.results.viewMore': 'View more products',
     'CioAsa.results.addToCart': 'Add to cart',
     'CioAsa.results.saleBadge': 'Sale',
+    'CioAsa.refinement.ariaLabel': 'Refine your results',
     'CioAsa.error.message': "I can't assist you with that request.",
 };
 function translate(key, translations) {

package/lib/cjs/version.js

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

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(() => {
@@ -54,8 +55,8 @@ const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, on
         React.createElement("div", { className: 'cio-asa-chat-body' }, isWelcome ? (React.createElement("div", { className: 'cio-asa-chat-view cio-asa-chat-view--welcome' },
             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 }),
-            React.createElement(ChatInput, { onSubmit: sendMessage, isDisabled: isStreaming, translations: translations, componentOverrides: componentOverrides?.input }))))));
+            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, 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/Chat/ChatMessageList.js

@@ -3,7 +3,8 @@ import translate from '../../utils/translate';
 import ResultsBlock from '../ResultsBlock/ResultsBlock';
 import UserMessage from './UserMessage';
 import AiMessage from './AiMessage';
-export default function ChatMessageList({ messages, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, addToCartText, viewMoreText, aiMessageOverrides, userMessageOverrides, resultsBlockOverrides, translations, }) {
+import FollowUpRefinement from './FollowUpRefinement';
+export default function ChatMessageList({ messages, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, addToCartText, viewMoreText, aiMessageOverrides, userMessageOverrides, resultsBlockOverrides, translations, onSend, isStreaming = false, }) {
     const listRef = useRef(null);
     const isNearBottomRef = useRef(true);
     const prevMessageCountRef = useRef(messages.length);
@@ -28,14 +29,17 @@ export default function ChatMessageList({ messages, onProductClick, onViewMore,
             el.scrollTo({ top: el.scrollHeight, behavior: isNewMessage ? 'smooth' : 'auto' });
         });
     }, [messages]);
-    return (React.createElement("div", { className: 'cio-asa-chat-message-list', ref: listRef, onScroll: handleScroll, role: 'log', "aria-live": 'off', tabIndex: 0, "aria-label": translate('CioAsa.messageList.ariaLabel', translations) }, messages.map((message) => {
+    return (React.createElement("div", { className: 'cio-asa-chat-message-list', ref: listRef, onScroll: handleScroll, role: 'log', "aria-live": 'off', tabIndex: 0, "aria-label": translate('CioAsa.messageList.ariaLabel', translations) }, messages.map((message, index) => {
         if (message.role === 'user') {
             return (React.createElement(UserMessage, { key: message.id, text: message.text, translations: translations, componentOverrides: userMessageOverrides }));
         }
         const hasGroups = !!message.groups?.length;
+        const isLatest = index === messages.length - 1;
+        const refinement = onSend ? message.refinement : undefined;
         return (React.createElement("div", { key: message.id, className: 'cio-asa-ai-message-group' },
             React.createElement(AiMessage, { message: message, componentOverrides: aiMessageOverrides, translations: translations }),
-            hasGroups && (React.createElement(ResultsBlock, { groups: message.groups, intent: message.intent, intentResultId: message.intentResultId, threadId: message.threadId, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: addToCartText, viewMoreText: viewMoreText, saleBadgeText: translate('CioAsa.results.saleBadge', translations), componentOverrides: resultsBlockOverrides }))));
+            hasGroups && (React.createElement(ResultsBlock, { groups: message.groups, intent: message.intent, intentResultId: message.intentResultId, threadId: message.threadId, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: addToCartText, viewMoreText: viewMoreText, saleBadgeText: translate('CioAsa.results.saleBadge', translations), componentOverrides: resultsBlockOverrides })),
+            refinement && (React.createElement(FollowUpRefinement, { refinement: refinement, onOptionClick: (option) => onSend(option, 'refinement'), isDisabled: !isLatest || isStreaming, translations: translations, componentOverrides: aiMessageOverrides?.followUpRefinement }))));
     })));
 }
 ChatMessageList.displayName = 'ChatMessageList';

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

@@ -0,0 +1,62 @@
+.cio-asa-follow-up-refinement {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  padding-right: 12px;
+  box-sizing: border-box;
+  animation: cio-asa-fade-in 0.3s ease;
+}
+
+.cio-asa-follow-up-refinement__question {
+  margin: 0;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.005em;
+  color: #0F1324;
+}
+
+.cio-asa-follow-up-refinement__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.cio-asa-follow-up-refinement__chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 14px;
+  background: #ffffff;
+  box-shadow: 0px 0.4px 1px rgba(18, 18, 105, 0.13), 0px 0.9px 6px rgba(18, 18, 105, 0.05), 0px 1px 3px rgba(18, 18, 105, 0.05);
+  border-radius: 12px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+  color: #343434;
+  box-sizing: border-box;
+  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
+}
+
+.cio-asa-follow-up-refinement__chip:hover:not(:disabled) {
+  border-color: #ffffff;
+  box-shadow: 0px 6px 14px rgba(18, 18, 105, 0.11), 0px 2px 4px rgba(18, 18, 105, 0.0716748), 0px 1px 2px rgba(18, 18, 105, 0.055);
+}
+
+.cio-asa-follow-up-refinement__chip:active:not(:disabled) {
+  background: #E0E3EB;
+  border-color: #DEE0E3;
+  box-shadow: inset 1px 1px 2px rgba(18, 18, 105, 0.1), inset 0px 1px 4px rgba(18, 18, 105, 0.05), inset 1px 1px 1px rgba(18, 18, 105, 0.05);
+}
+
+.cio-asa-follow-up-refinement__chip:disabled {
+  cursor: default;
+  background: #F4F5F7;
+  border-color: #E9EAEC;
+  box-shadow: none;
+  color: #6B7080;
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { RenderPropsWrapper } from '@constructor-io/constructorio-ui-components';
+import translate from '../../utils/translate';
+export default function FollowUpRefinement({ refinement, onOptionClick, isDisabled = false, translations, componentOverrides, }) {
+    const handleOptionClick = (option) => {
+        if (isDisabled)
+            return;
+        onOptionClick(option);
+    };
+    const renderProps = {
+        question: refinement.question,
+        options: refinement.options,
+        onOptionClick: handleOptionClick,
+        isDisabled,
+    };
+    return (React.createElement(RenderPropsWrapper, { override: componentOverrides?.reactNode, props: renderProps },
+        React.createElement("div", { className: [
+                'cio-asa-follow-up-refinement',
+                isDisabled && 'cio-asa-follow-up-refinement--disabled',
+            ]
+                .filter(Boolean)
+                .join(' '), role: 'group', "aria-label": translate('CioAsa.refinement.ariaLabel', translations) },
+            React.createElement("p", { className: 'cio-asa-follow-up-refinement__question' }, refinement.question),
+            React.createElement("div", { className: 'cio-asa-follow-up-refinement__options' }, refinement.options.map((option) => (React.createElement("button", { key: option, type: 'button', className: 'cio-asa-follow-up-refinement__chip', disabled: isDisabled, onClick: () => handleOptionClick(option) }, option)))))));
+}
+FollowUpRefinement.displayName = 'FollowUpRefinement';

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/asaStreamHandlers.js

@@ -48,6 +48,19 @@ export function handleMessage(data, assistantId, setMessages) {
         text: (msg.text || '') + (data?.text || ''),
     }));
 }
+export function handleFollowUpRefinement(data, assistantId, setMessages) {
+    const question = typeof data?.question === 'string' ? data.question.trim() : '';
+    const options = Array.isArray(data?.options)
+        ? data.options.filter((o) => typeof o === 'string' && o.trim() !== '')
+        : [];
+    if (question === '' || options.length === 0)
+        return;
+    updateMessageById(setMessages, assistantId, (msg) => ({
+        ...msg,
+        status: 'streaming',
+        refinement: { question, options },
+    }));
+}
 export function handleServerError(assistantId, setMessages) {
     updateMessageById(setMessages, assistantId, (msg) => ({
         ...msg,

package/lib/mjs/hooks/useAsaResults.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCioAsaContext } from './useCioAsaContext';
-import { handleSearchResult, handleMessage, handleServerError, handleStreamEnd, handleStreamError, } from './asaStreamHandlers';
+import { handleSearchResult, handleMessage, handleFollowUpRefinement, handleServerError, handleStreamEnd, handleStreamError, } from './asaStreamHandlers';
 import useAsaTracking from './useAsaTracking';
 export default function useAsaResults(options) {
     const [messages, setMessages] = useState([]);
@@ -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;
@@ -139,6 +158,10 @@ export default function useAsaResults(options) {
                         fireLoadStart();
                         handleMessage(data, assistantMessage.id, setMessages);
                     }
+                    else if (type === 'follow_up_refinement') {
+                        fireLoadStart();
+                        handleFollowUpRefinement(data, assistantMessage.id, setMessages);
+                    }
                     else if (type === 'server_error') {
                         handleServerError(assistantMessage.id, setMessages);
                         break;
@@ -152,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/styles.css

@@ -6,6 +6,7 @@
 @import './components/Chat/ChatMessageList.css';
 @import './components/Chat/UserMessage.css';
 @import './components/Chat/AiMessage.css';
+@import './components/Chat/FollowUpRefinement.css';
 @import './components/Chat/TypingIndicator.css';
 @import './components/Chat/ChatInput.css';
 @import './components/ResultsBlock/ResultsBlock.css';

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',
@@ -16,6 +17,7 @@ const defaultTranslations = {
     'CioAsa.results.viewMore': 'View more products',
     'CioAsa.results.addToCart': 'Add to cart',
     'CioAsa.results.saleBadge': 'Sale',
+    'CioAsa.refinement.ariaLabel': 'Refine your results',
     'CioAsa.error.message': "I can't assist you with that request.",
 };
 export default function translate(key, translations) {

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.4.0';
+export default '1.6.0';

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

@@ -3,6 +3,13 @@ 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 {
@@ -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/Chat/ChatMessageList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AiMessageOverrides, ChatMessage, ComponentOverrideProps, ResultGroupMeta, ResultsBlockOverrides, Translations, UserMessageRenderProps } from '../../types';
+import { AiMessageOverrides, AssistantSubmitSource, ChatMessage, ComponentOverrideProps, ResultGroupMeta, ResultsBlockOverrides, Translations, UserMessageRenderProps } from '../../types';
 import { Product, NormalizeOptions } from '../../utils/productNormalizer';
 import { AspectRatio } from '../ResultsBlock/ResultsBlock';
 interface ChatMessageListProps {
@@ -16,8 +16,12 @@ interface ChatMessageListProps {
     userMessageOverrides?: ComponentOverrideProps<UserMessageRenderProps>;
     resultsBlockOverrides?: ResultsBlockOverrides;
     translations?: Translations;
+    /** Sends a refinement option as a follow-up message. Chips are hidden when omitted. */
+    onSend?: (text: string, source?: AssistantSubmitSource) => void;
+    /** Disables refinement chips while a response is streaming. */
+    isStreaming?: boolean;
 }
-declare function ChatMessageList({ messages, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, addToCartText, viewMoreText, aiMessageOverrides, userMessageOverrides, resultsBlockOverrides, translations, }: ChatMessageListProps): React.JSX.Element;
+declare function ChatMessageList({ messages, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, addToCartText, viewMoreText, aiMessageOverrides, userMessageOverrides, resultsBlockOverrides, translations, onSend, isStreaming, }: ChatMessageListProps): React.JSX.Element;
 declare namespace ChatMessageList {
     var displayName: string;
 }

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ComponentOverrideProps, FollowUpRefinement as FollowUpRefinementData, FollowUpRefinementRenderProps, Translations } from '../../types';
+export interface FollowUpRefinementProps {
+    refinement: FollowUpRefinementData;
+    onOptionClick: (option: string) => void;
+    isDisabled?: boolean;
+    translations?: Translations;
+    componentOverrides?: ComponentOverrideProps<FollowUpRefinementRenderProps>;
+}
+declare function FollowUpRefinement({ refinement, onOptionClick, isDisabled, translations, componentOverrides, }: FollowUpRefinementProps): React.JSX.Element;
+declare namespace FollowUpRefinement {
+    var displayName: string;
+}
+export default FollowUpRefinement;

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

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