fix(compareBar): disable Compare while the chat is busy

packages/instantsearch-ui-components/src/components/CompareBar.tsx

@@ -90,6 +90,8 @@ export type CompareBarProps = {
   maxItems: number;
   /** Whether the primary call-to-action is enabled. */
   canCompare: boolean;
+  /** Whether the chat is busy; disables the call-to-action until it is free. */
+  isChatBusy?: boolean;
   /** Starts the comparison (opens the chat and sends the message). */
   onCompare: () => void;
   /** Removes one item from the selection. */
@@ -117,6 +119,7 @@ export function createCompareBarComponent({ createElement }: Renderer) {
       minItems,
       maxItems,
       canCompare,
+      isChatBusy = false,
       onCompare,
       onRemove,
       onClear,
@@ -211,7 +214,7 @@ export function createCompareBarComponent({ createElement }: Renderer) {
               'ais-CompareBar-compareButton',
               classNames.compareButton
             )}
-            disabled={!canCompare}
+            disabled={!canCompare || isChatBusy}
             onClick={onCompare}
           >
             {translations.compareButtonText(items.length)}

packages/instantsearch-ui-components/src/components/__tests__/CompareBar.test.tsx

@@ -0,0 +1,46 @@
+/**
+ * @jest-environment @instantsearch/testutils/jest-environment-jsdom.ts
+ */
+/** @jsx createElement */
+import { render } from '@testing-library/preact';
+import { Fragment, createElement } from 'preact';
+
+import { createCompareBarComponent } from '../CompareBar';
+
+describe('CompareBar', () => {
+  const CompareBar = createCompareBarComponent({ createElement, Fragment });
+
+  const props = {
+    items: [{ objectID: 'A' }, { objectID: 'B' }],
+    minItems: 2,
+    maxItems: 3,
+    canCompare: true,
+    onCompare: jest.fn(),
+    onRemove: jest.fn(),
+    onClear: jest.fn(),
+  };
+
+  test('enables the Compare button when the selection is big enough', () => {
+    const { container } = render(<CompareBar {...props} />);
+
+    expect(
+      container.querySelector('.ais-CompareBar-compareButton')
+    ).toBeEnabled();
+  });
+
+  test('disables the Compare button while the chat is busy and re-enables it after', () => {
+    const { container, rerender } = render(
+      <CompareBar {...props} isChatBusy />
+    );
+
+    expect(
+      container.querySelector('.ais-CompareBar-compareButton')
+    ).toBeDisabled();
+
+    rerender(<CompareBar {...props} isChatBusy={false} />);
+
+    expect(
+      container.querySelector('.ais-CompareBar-compareButton')
+    ).toBeEnabled();
+  });
+});

packages/instantsearch.js/src/connectors/compare/__tests__/connectCompare-test.ts

@@ -440,6 +440,48 @@ describe('connectCompare', () => {
     });
   });
 
+  describe('isChatBusy', () => {
+    it('is false when no chat widget is mounted', () => {
+      const { getRenderState } = setup();
+
+      expect(getRenderState().isChatBusy).toBe(false);
+    });
+
+    it('follows the chat status', () => {
+      const chatRenderState = createChatRenderState();
+      const { widget, getRenderState, initOptions } = setup({
+        chatRenderState,
+      });
+      expect(getRenderState().isChatBusy).toBe(false);
+
+      Object.assign(chatRenderState, { status: 'streaming' });
+      widget.render!(createRenderOptions(initOptions));
+      expect(getRenderState().isChatBusy).toBe(true);
+
+      Object.assign(chatRenderState, { status: 'submitted' });
+      widget.render!(createRenderOptions(initOptions));
+      expect(getRenderState().isChatBusy).toBe(true);
+
+      Object.assign(chatRenderState, { status: 'ready' });
+      widget.render!(createRenderOptions(initOptions));
+      expect(getRenderState().isChatBusy).toBe(false);
+    });
+
+    it('does not change `canCompare`', () => {
+      const { getRenderState } = setup({
+        chatRenderState: createChatRenderState({
+          status: 'streaming' as ChatRenderState['status'],
+        }),
+      });
+
+      getRenderState().addItem({ objectID: 'A' });
+      getRenderState().addItem({ objectID: 'B' });
+
+      expect(getRenderState().canCompare).toBe(true);
+      expect(getRenderState().isChatBusy).toBe(true);
+    });
+  });
+
   describe('getRenderState', () => {
     it('exposes the render state under the `compare` key', () => {
       const { widget, initOptions } = setup();

packages/instantsearch.js/src/connectors/compare/connectCompare.ts

@@ -1,5 +1,8 @@
 import { getChatRenderState } from '../../lib/chat/getChatRenderState';
-import { openChat } from '../../lib/chat/openChat';
+import {
+  isChatBusy as isChatStreaming,
+  openChat,
+} from '../../lib/chat/openChat';
 import {
   checkRendering,
   createDocumentationMessageGenerator,
@@ -90,6 +93,12 @@ export type CompareRenderState = {
    * Whether a comparison can start (at least `minItems` items are selected).
    */
   canCompare: boolean;
+  /**
+   * Whether the chat widget is currently busy (mid-stream) — surface as
+   * `disabled` on the call-to-action, since `compare()` returns `false` while
+   * the chat is busy. Optimistically `false` when no chat is present.
+   */
+  isChatBusy: boolean;
   /**
    * The resolved `minItems` value.
    */
@@ -361,6 +370,14 @@ const connectCompare: CompareConnector = function connectCompare(
         lastOptions = renderOptions;
         const store = getCompareStore(renderOptions.instantSearchInstance);
 
+        const chatRenderState = getChatRenderState(
+          renderOptions.instantSearchInstance,
+          renderOptions.parent?.getIndexId()
+        );
+        const isChatBusy = chatRenderState
+          ? !chatRenderState.sendMessage || isChatStreaming(chatRenderState)
+          : false;
+
         return {
           items: store.items,
           isSelected,
@@ -370,6 +387,7 @@ const connectCompare: CompareConnector = function connectCompare(
           clearItems,
           canAddItems: store.items.length < maxItems,
           canCompare: store.items.length >= minItems,
+          isChatBusy,
           minItems,
           maxItems,
           compare,

packages/instantsearch.js/src/widgets/compare-bar/compare-bar.tsx

@@ -104,6 +104,7 @@ export default function compareBar(widgetParams: CompareBarWidgetParams) {
       minItems,
       maxItems,
       canCompare,
+      isChatBusy,
       removeItem,
       clearItems,
       compare,
@@ -133,6 +134,7 @@ export default function compareBar(widgetParams: CompareBarWidgetParams) {
         minItems={minItems}
         maxItems={maxItems}
         canCompare={canCompare}
+        isChatBusy={isChatBusy}
         onCompare={() => compare()}
         onRemove={(item) => removeItem(item.objectID)}
         onClear={clearItems}

packages/react-instantsearch/src/widgets/CompareBar.tsx

@@ -60,6 +60,7 @@ export function CompareBar({
     minItems,
     maxItems,
     canCompare,
+    isChatBusy,
     removeItem,
     clearItems,
     compare,
@@ -71,6 +72,7 @@ export function CompareBar({
       minItems={minItems}
       maxItems={maxItems}
       canCompare={canCompare}
+      isChatBusy={isChatBusy}
       onCompare={() => compare()}
       onRemove={(item) => removeItem(item.objectID)}
       onClear={clearItems}