fix(suggestions): add nextjs and ssr support to suggestions widget

bundlesize.config.json

@@ -10,19 +10,19 @@
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
-      "maxSize": "130.5 kB"
+      "maxSize": "133.5 kB"
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
-      "maxSize": "280 kB"
+      "maxSize": "282.5 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",
-      "maxSize": "61.5 kB"
+      "maxSize": "63.75 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/ReactInstantSearch.min.js",
-      "maxSize": "103.25 kB"
+      "maxSize": "106.25 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",
@@ -46,7 +46,7 @@
     },
     {
       "path": "./packages/instantsearch.css/themes/algolia-min.css",
-      "maxSize": "10 kB"
+      "maxSize": "10.25 kB"
     },
     {
       "path": "./packages/instantsearch.css/themes/reset.css",

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

@@ -0,0 +1,184 @@
+/**
+ * @jest-environment @instantsearch/testutils/jest-environment-jsdom.ts
+ */
+/** @jsx createElement */
+import { render } from '@testing-library/preact';
+import { Fragment, createElement } from 'preact';
+
+import { createOnPageSuggestionsComponent } from '../chat/OnPageSuggestions';
+
+describe('OnPageSuggestions', () => {
+  const OnPageSuggestions = createOnPageSuggestionsComponent({
+    createElement,
+    Fragment,
+  });
+
+  test('renders an empty root when there are no suggestions and not loading', () => {
+    const { container } = render(
+      <OnPageSuggestions suggestions={[]} onSuggestionClick={jest.fn()} />
+    );
+
+    const root = container.querySelector('.ais-OnPageSuggestions');
+    expect(root).toBeInTheDocument();
+    expect(root).toBeEmptyDOMElement();
+    expect(
+      container.querySelector('.ais-OnPageSuggestions-skeleton')
+    ).not.toBeInTheDocument();
+  });
+
+  test('forwards HTML attributes and merges className onto the root', () => {
+    const { container } = render(
+      <OnPageSuggestions
+        suggestions={[]}
+        onSuggestionClick={jest.fn()}
+        className="CUSTOM"
+        title="hello"
+      />
+    );
+
+    const root = container.querySelector<HTMLDivElement>(
+      '.ais-OnPageSuggestions'
+    )!;
+    expect(root.classList.contains('CUSTOM')).toBe(true);
+    expect(root.title).toBe('hello');
+  });
+
+  test('renders the default header when there are suggestions', () => {
+    const { container } = render(
+      <OnPageSuggestions
+        suggestions={['A', 'B']}
+        onSuggestionClick={jest.fn()}
+      />
+    );
+
+    const header = container.querySelector('.ais-OnPageSuggestions-header');
+    expect(header).toBeInTheDocument();
+    expect(
+      container.querySelector('.ais-OnPageSuggestions-headerTitle')
+    ).toHaveTextContent('Suggestions');
+  });
+
+  test('translates the header title', () => {
+    const { container } = render(
+      <OnPageSuggestions
+        suggestions={['A']}
+        translations={{ headerTitle: 'Ideas' }}
+        onSuggestionClick={jest.fn()}
+      />
+    );
+
+    expect(
+      container.querySelector('.ais-OnPageSuggestions-headerTitle')
+    ).toHaveTextContent('Ideas');
+  });
+
+  test('renders the default header while loading', () => {
+    const { container } = render(
+      <OnPageSuggestions
+        suggestions={[]}
+        isLoading={true}
+        onSuggestionClick={jest.fn()}
+      />
+    );
+
+    expect(
+      container.querySelector('.ais-OnPageSuggestions-header')
+    ).toBeInTheDocument();
+  });
+
+  test('does not render the header when empty and not loading', () => {
+    const { container } = render(
+      <OnPageSuggestions suggestions={[]} onSuggestionClick={jest.fn()} />
+    );
+
+    expect(
+      container.querySelector('.ais-OnPageSuggestions-header')
+    ).not.toBeInTheDocument();
+  });
+
+  test('disables the header when headerComponent is false', () => {
+    const { container } = render(
+      <OnPageSuggestions
+        suggestions={['A']}
+        headerComponent={false}
+        onSuggestionClick={jest.fn()}
+      />
+    );
+
+    expect(
+      container.querySelector('.ais-OnPageSuggestions-header')
+    ).not.toBeInTheDocument();
+    expect(
+      container.querySelectorAll('.ais-OnPageSuggestions-suggestion')
+    ).toHaveLength(1);
+  });
+
+  test('renders a custom header component', () => {
+    const { container } = render(
+      <OnPageSuggestions
+        suggestions={['A']}
+        headerComponent={() => <div className="custom-header">Custom</div>}
+        onSuggestionClick={jest.fn()}
+      />
+    );
+
+    expect(
+      container.querySelector('.ais-OnPageSuggestions-header')
+    ).not.toBeInTheDocument();
+    const custom = container.querySelector('.custom-header');
+    expect(custom).toBeInTheDocument();
+    expect(custom).toHaveTextContent('Custom');
+  });
+
+  test('renders the suggestion pills', () => {
+    const { container } = render(
+      <OnPageSuggestions
+        suggestions={['A', 'B']}
+        onSuggestionClick={jest.fn()}
+      />
+    );
+
+    expect(
+      container.querySelectorAll('.ais-OnPageSuggestions-suggestion')
+    ).toHaveLength(2);
+    expect(
+      container.querySelector('.ais-OnPageSuggestions-skeleton')
+    ).not.toBeInTheDocument();
+  });
+
+  test('renders skeletons while loading with no suggestions yet', () => {
+    const { container } = render(
+      <OnPageSuggestions
+        suggestions={[]}
+        isLoading={true}
+        onSuggestionClick={jest.fn()}
+      />
+    );
+
+    expect(
+      container.querySelector('.ais-OnPageSuggestions-skeleton')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelectorAll('.ais-OnPageSuggestions-skeletonItem')
+    ).toHaveLength(3);
+  });
+
+  test('keeps existing pills (no skeletons) while refetching', () => {
+    // Loading with suggestions already present must not swap the pills for
+    // skeletons — that would make existing suggestions disappear mid-refetch.
+    const { container } = render(
+      <OnPageSuggestions
+        suggestions={['A', 'B']}
+        isLoading={true}
+        onSuggestionClick={jest.fn()}
+      />
+    );
+
+    expect(
+      container.querySelectorAll('.ais-OnPageSuggestions-suggestion')
+    ).toHaveLength(2);
+    expect(
+      container.querySelector('.ais-OnPageSuggestions-skeleton')
+    ).not.toBeInTheDocument();
+  });
+});

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

@@ -5,13 +5,13 @@ import { createChatHeaderComponent } from './ChatHeader';
 import { createChatMessagesComponent } from './ChatMessages';
 import { createChatOverlayLayoutComponent } from './ChatOverlayLayout';
 import { createChatPromptComponent } from './ChatPrompt';
-import { createChatPromptSuggestionsComponent } from './ChatPromptSuggestions';
+import { createOnPageSuggestionsComponent } from './OnPageSuggestions';
 
 import type { Renderer, ComponentProps, Hooks } from '../../types';
 import type { ChatHeaderProps, ChatHeaderOwnProps } from './ChatHeader';
 import type { ChatMessagesProps } from './ChatMessages';
 import type { ChatPromptProps, ChatPromptOwnProps } from './ChatPrompt';
-import type { ChatPromptSuggestionsOwnProps } from './ChatPromptSuggestions';
+import type { OnPageSuggestionsOwnProps } from './OnPageSuggestions';
 import type { ChatLayoutOwnProps } from './types';
 
 export type ChatClassNames = {
@@ -21,7 +21,7 @@ export type ChatClassNames = {
   messages?: ChatMessagesProps['classNames'];
   message?: ChatMessagesProps['messageClassNames'];
   prompt?: ChatPromptProps['classNames'];
-  suggestions?: ChatPromptSuggestionsOwnProps['classNames'];
+  suggestions?: OnPageSuggestionsOwnProps['classNames'];
 };
 
 export type ChatProps = Omit<ComponentProps<'div'>, 'onError' | 'title'> & {
@@ -46,9 +46,9 @@ export type ChatProps = Omit<ComponentProps<'div'>, 'onError' | 'title'> & {
    */
   promptProps: ChatPromptProps;
   /*
-   * Props for the ChatPromptSuggestions component.
+   * Props for the OnPageSuggestions component.
    */
-  suggestionsProps: ChatPromptSuggestionsOwnProps;
+  suggestionsProps: OnPageSuggestionsOwnProps;
   /**
    * Optional class names for elements
    */
@@ -68,7 +68,7 @@ export type ChatProps = Omit<ComponentProps<'div'>, 'onError' | 'title'> & {
   /**
    * Optional suggestions component for the chat
    */
-  suggestionsComponent?: (props: ChatPromptSuggestionsOwnProps) => JSX.Element;
+  suggestionsComponent?: (props: OnPageSuggestionsOwnProps) => JSX.Element;
   /**
    * Function to send a message to the chat.
    */
@@ -113,7 +113,7 @@ export function createChatComponent({
     memo,
   });
   const ChatPrompt = createChatPromptComponent({ createElement, Fragment });
-  const ChatPromptSuggestions = createChatPromptSuggestionsComponent({
+  const OnPageSuggestions = createOnPageSuggestionsComponent({
     createElement,
     Fragment,
   });
@@ -191,13 +191,15 @@ export function createChatComponent({
         error={error}
         classNames={classNames.messages}
         messageClassNames={classNames.message}
-        suggestionsElement={createElement(
-          SuggestionsComponent || ChatPromptSuggestions,
-          {
-            ...suggestionsProps,
-            classNames: classNames.suggestions,
-          }
-        )}
+        suggestionsElement={
+          suggestionsProps.suggestions?.length || suggestionsProps.isLoading
+            ? createElement(SuggestionsComponent || OnPageSuggestions, {
+                headerComponent: false,
+                ...suggestionsProps,
+                classNames: classNames.suggestions,
+              })
+            : undefined
+        }
       />
     );