feat(instantsearch.js): introduce chat widget (#6705)

---------

Co-authored-by: Haroen Viaene <hello@haroen.me>
Co-authored-by: Dhaya <154633+dhayab@users.noreply.github.com>

Author: 3 people

bundlesize.config.json

@@ -10,11 +10,11 @@
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
-      "maxSize": "84.75 kB"
+      "maxSize": "85 kB"
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
-      "maxSize": "185 kB"
+      "maxSize": "183.75 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",

packages/algolia-experiences/src/render.tsx

@@ -1,7 +1,7 @@
 /** @jsx h */
 import { getPropertyByPath } from 'instantsearch.js/es/lib/utils';
 import { carousel } from 'instantsearch.js/es/templates';
-import { index, panel } from 'instantsearch.js/es/widgets';
+import { index, panel } from 'instantsearch.js/es/widgets/index.umd';
 import { h, Fragment } from 'preact';
 
 import { banner } from './banner';

packages/algolia-experiences/src/widgets.ts

@@ -22,7 +22,7 @@ import {
   stats,
   toggleRefinement,
   trendingItems,
-} from 'instantsearch.js/es/widgets';
+} from 'instantsearch.js/es/widgets/index.umd';
 
 export const widgets = {
   'ais.breadcrumb': breadcrumb,

packages/instantsearch-ui-components/src/components/chat/Chat.tsx

@@ -98,7 +98,7 @@ export function createChatComponent({ createElement, Fragment }: Renderer) {
           {...toggleButtonProps}
           onClick={() => {
             toggleButtonProps.onClick?.();
-            promptRef.current?.focus();
+            promptRef.current?.focus?.();
           }}
         />
       </div>

packages/instantsearch.js/package.json

@@ -31,6 +31,7 @@
     "@types/google.maps": "^3.55.12",
     "@types/hogan.js": "^3.0.0",
     "@types/qs": "^6.5.3",
+    "ai": "^5.0.18",
     "algoliasearch-helper": "3.26.0",
     "hogan.js": "^3.0.2",
     "htm": "^3.0.0",

packages/instantsearch.js/src/__tests__/common-connectors.test.tsx

@@ -19,6 +19,7 @@ import {
   connectFrequentlyBoughtTogether,
   connectTrendingItems,
   connectLookingSimilar,
+  connectChat,
 } from '../connectors';
 import instantsearch from '../index.es';
 import { refinementList } from '../widgets';
@@ -530,6 +531,51 @@ const testSetups: TestSetupsMap<TestSuites> = {
 
     search.start();
   },
+  createChatConnectorTests({ instantSearchOptions, widgetParams }) {
+    const customChat = connectChat<{
+      container: HTMLElement;
+    }>((renderOptions) => {
+      const { input, setInput, open, setOpen } = renderOptions;
+      renderOptions.widgetParams.container.innerHTML = `
+        <div data-testid="Chat-root" style="display: ${
+          open ? 'block' : 'none'
+        }">
+          <input data-testid="Chat-input" type="text" value="${input}" />
+          <button data-testid="Chat-updateInput">update input</button>
+        </div>
+        <button data-testid="Chat-toggleButton">
+          toggle chat
+        </button>
+      `;
+
+      renderOptions.widgetParams.container
+        .querySelector('[data-testid="Chat-toggleButton"]')!
+        .addEventListener('click', () => {
+          setOpen(!open);
+        });
+
+      renderOptions.widgetParams.container
+        .querySelector('[data-testid="Chat-updateInput"]')!
+        .addEventListener('click', () => {
+          setInput('hello world');
+        });
+    });
+
+    instantsearch(instantSearchOptions)
+      .addWidgets([
+        customChat({
+          container: document.body.appendChild(document.createElement('div')),
+          ...widgetParams,
+        }),
+      ])
+      .on('error', () => {
+        /*
+         * prevent rethrowing InstantSearch errors, so tests can be asserted.
+         * IRL this isn't needed, as the error doesn't stop execution.
+         */
+      })
+      .start();
+  },
 };
 
 function addWidgetToggleUi(search: InstantSearch, widget: Widget) {
@@ -561,6 +607,7 @@ const testOptions: TestOptionsMap<TestSuites> = {
   createFrequentlyBoughtTogetherConnectorTests: undefined,
   createTrendingItemsConnectorTests: undefined,
   createLookingSimilarConnectorTests: undefined,
+  createChatConnectorTests: undefined,
 };
 
 describe('Common connector tests (InstantSearch.js)', () => {

packages/instantsearch.js/src/__tests__/common-widgets.test.tsx

@@ -32,6 +32,7 @@ import {
   poweredBy,
   menuSelect,
   dynamicWidgets,
+  chat,
 } from '../widgets';
 
 import type { TestOptionsMap, TestSetupsMap } from '@instantsearch/tests';
@@ -617,6 +618,22 @@ const testSetups: TestSetupsMap<TestSuites> = {
       ])
       .start();
   },
+  createChatWidgetTests({ instantSearchOptions, widgetParams }) {
+    instantsearch(instantSearchOptions)
+      .addWidgets([
+        chat({
+          container: document.body.appendChild(document.createElement('div')),
+          ...widgetParams,
+        }),
+      ])
+      .on('error', () => {
+        /*
+         * prevent rethrowing InstantSearch errors, so tests can be asserted.
+         * IRL this isn't needed, as the error doesn't stop execution.
+         */
+      })
+      .start();
+  },
 };
 
 const testOptions: TestOptionsMap<TestSuites> = {
@@ -649,6 +666,7 @@ const testOptions: TestOptionsMap<TestSuites> = {
   createPoweredByWidgetTests: undefined,
   createMenuSelectWidgetTests: undefined,
   createDynamicWidgetsWidgetTests: undefined,
+  createChatWidgetTests: undefined,
 };
 
 describe('Common widget tests (InstantSearch.js)', () => {

packages/instantsearch.js/src/connectors/__tests__/index.test.ts

@@ -0,0 +1,10 @@
+import * as connectors from '..';
+import * as connectorsUmd from '../index.umd';
+
+describe('connectors', () => {
+  describe('umd', () => {
+    test('has the same number of exports as the main entrypoint', () => {
+      expect(Object.keys(connectorsUmd)).toEqual(Object.keys(connectors));
+    });
+  });
+});

packages/instantsearch.js/src/connectors/chat/__tests__/connectChat-test.ts

@@ -0,0 +1,87 @@
+import { createSearchClient } from '@instantsearch/mocks';
+import algoliasearchHelper from 'algoliasearch-helper';
+
+import {
+  createInitOptions,
+  createRenderOptions,
+} from '../../../../test/createWidget';
+import connectChat from '../connectChat';
+
+describe('connectChat', () => {
+  it('throws without render function', () => {
+    expect(() => {
+      // @ts-expect-error
+      connectChat()({});
+    }).toThrowErrorMatchingInlineSnapshot(`
+      "The render function is not valid (received type Undefined).
+
+      See documentation: https://www.algolia.com/doc/api-reference/widgets/chat/js/#connector"
+    `);
+  });
+
+  it('is a widget', () => {
+    const render = jest.fn();
+    const unmount = jest.fn();
+
+    const customChat = connectChat(render, unmount);
+    const widget = customChat({});
+
+    expect(widget).toEqual(
+      expect.objectContaining({
+        $$type: 'ais.chat',
+        init: expect.any(Function),
+        render: expect.any(Function),
+        dispose: expect.any(Function),
+      })
+    );
+  });
+
+  it('Renders during init and render', () => {
+    const renderFn = jest.fn();
+    const makeWidget = connectChat(renderFn);
+    const widget = makeWidget({ agentId: 'agentId' });
+
+    // test if widget is not rendered yet at this point
+    expect(renderFn).toHaveBeenCalledTimes(0);
+
+    const helper = algoliasearchHelper(createSearchClient(), '', {});
+    helper.search = jest.fn();
+
+    widget.init(createInitOptions({ helper, state: helper.state }));
+
+    expect(renderFn).toHaveBeenCalledTimes(1);
+    expect(renderFn).toHaveBeenLastCalledWith(
+      expect.objectContaining({ widgetParams: { agentId: 'agentId' } }),
+      true
+    );
+
+    const renderOptions = createRenderOptions({ helper });
+    widget.render(renderOptions);
+
+    expect(renderFn).toHaveBeenCalledTimes(2);
+    expect(renderFn).toHaveBeenLastCalledWith(
+      expect.objectContaining({ widgetParams: { agentId: 'agentId' } }),
+      false
+    );
+  });
+
+  describe('dispose', () => {
+    it('calls the unmount function', () => {
+      const unmountFn = jest.fn();
+      const makeWidget = connectChat(() => {}, unmountFn);
+      const widget = makeWidget({ agentId: 'agentId' });
+
+      expect(unmountFn).toHaveBeenCalledTimes(0);
+
+      widget.dispose();
+      expect(unmountFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not throw without the unmount function', () => {
+      const makeWidget = connectChat(() => {});
+      const widget = makeWidget({ agentId: 'agentId' });
+
+      expect(() => widget.dispose()).not.toThrow();
+    });
+  });
+});