feat(chat): add inline mode to chat widgets

bundlesize.config.json

@@ -14,7 +14,7 @@
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
-      "maxSize": "251 kB"
+      "maxSize": "251.75 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",

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

@@ -1,9 +1,9 @@
 /** @jsx createElement */
 /** @jsxFrag Fragment */
-import { cx } from '../../lib';
 
 import { createChatHeaderComponent } from './ChatHeader';
 import { createChatMessagesComponent } from './ChatMessages';
+import { createChatOverlayLayoutComponent } from './ChatOverlayLayout';
 import { createChatPromptComponent } from './ChatPrompt';
 import { createChatPromptSuggestionsComponent } from './ChatPromptSuggestions';
 import { createChatToggleButtonComponent } from './ChatToggleButton';
@@ -17,6 +17,7 @@ import type {
   ChatToggleButtonOwnProps,
   ChatToggleButtonProps,
 } from './ChatToggleButton';
+import type { ChatLayoutOwnProps } from './types';
 
 export type ChatClassNames = {
   root?: string | string[];
@@ -82,6 +83,10 @@ export type ChatProps = Omit<ComponentProps<'div'>, 'onError' | 'title'> & {
    * Optional suggestions component for the chat
    */
   suggestionsComponent?: (props: ChatPromptSuggestionsOwnProps) => JSX.Element;
+  /**
+   * Optional layout component for the chat.
+   */
+  layoutComponent?: (props: ChatLayoutOwnProps) => JSX.Element;
 };
 
 export function createChatComponent({ createElement, Fragment }: Renderer) {
@@ -96,6 +101,10 @@ export function createChatComponent({ createElement, Fragment }: Renderer) {
     createElement,
     Fragment,
   });
+  const OverlayLayout = createChatOverlayLayoutComponent({
+    createElement,
+    Fragment,
+  });
 
   return function Chat(userProps: ChatProps) {
     const {
@@ -110,64 +119,72 @@ export function createChatComponent({ createElement, Fragment }: Renderer) {
       promptComponent: PromptComponent,
       toggleButtonComponent: ToggleButtonComponent,
       suggestionsComponent: SuggestionsComponent,
+      layoutComponent: LayoutComponent,
       classNames = {},
-      className,
+      className: _className,
       ...props
     } = userProps;
-    return (
-      <div
-        {...props}
-        className={cx(
-          'ais-Chat',
-          maximized && 'ais-Chat--maximized',
-          classNames.root,
-          className
+
+    const headerElement = createElement(HeaderComponent || ChatHeader, {
+      ...headerProps,
+      classNames: classNames.header,
+      maximized,
+    });
+
+    const messagesElement = (
+      <ChatMessages
+        {...messagesProps}
+        classNames={classNames.messages}
+        messageClassNames={classNames.message}
+        suggestionsElement={createElement(
+          SuggestionsComponent || ChatPromptSuggestions,
+          {
+            ...suggestionsProps,
+            classNames: classNames.suggestions,
+          }
         )}
-      >
-        <div
-          className={cx(
-            'ais-Chat-container',
-            open && 'ais-Chat-container--open',
-            maximized && 'ais-Chat-container--maximized',
-            classNames.container
-          )}
-        >
-          {createElement(HeaderComponent || ChatHeader, {
-            ...headerProps,
-            classNames: classNames.header,
-            maximized,
-          })}
-          <ChatMessages
-            {...messagesProps}
-            classNames={classNames.messages}
-            messageClassNames={classNames.message}
-            suggestionsElement={createElement(
-              SuggestionsComponent || ChatPromptSuggestions,
-              {
-                ...suggestionsProps,
-                classNames: classNames.suggestions,
-              }
-            )}
-          />
-          {createElement(PromptComponent || ChatPrompt, {
-            ...promptProps,
-            classNames: classNames.prompt,
-          })}
-        </div>
+      />
+    );
+
+    const promptElement = createElement(PromptComponent || ChatPrompt, {
+      ...promptProps,
+      classNames: classNames.prompt,
+    });
+
+    const toggleButtonElement = createElement(
+      ToggleButtonComponent || ChatToggleButton,
+      {
+        ...toggleButtonProps,
+        classNames: classNames.toggleButton,
+        onClick: () => {
+          toggleButtonProps.onClick?.();
+          if (!open) {
+            promptProps.promptRef?.current?.focus();
+          }
+        },
+      }
+    );
+
+    const ResolvedLayout = LayoutComponent || OverlayLayout;
 
-        <div className="ais-Chat-toggleButtonWrapper">
-          {createElement(ToggleButtonComponent || ChatToggleButton, {
-            ...toggleButtonProps,
-            classNames: classNames.toggleButton,
-            onClick: () => {
-              toggleButtonProps.onClick?.();
-              if (!open) {
-                promptProps.promptRef?.current?.focus();
-              }
-            },
-          })}
-        </div>
-      </div>
+    return (
+      <ResolvedLayout
+        {...props}
+        open={open}
+        maximized={maximized}
+        headerElement={headerElement}
+        messagesElement={messagesElement}
+        promptElement={promptElement}
+        toggleButtonElement={toggleButtonElement}
+        classNames={{ root: classNames.root, container: classNames.container }}
+        messages={messagesProps.messages}
+        status={messagesProps.status}
+        tools={messagesProps.tools}
+        isClearing={messagesProps.isClearing}
+        clearMessages={headerProps.onClear}
+        onClearTransitionEnd={messagesProps.onClearTransitionEnd}
+        suggestions={suggestionsProps.suggestions}
+      />
     );
   };
 }

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

@@ -0,0 +1,47 @@
+/** @jsx createElement */
+import { cx } from '../../lib';
+
+import type { Renderer } from '../../types';
+import type { ChatLayoutOwnProps } from './types';
+
+export function createChatInlineLayoutComponent({ createElement }: Renderer) {
+  return function ChatInlineLayout(userProps: ChatLayoutOwnProps) {
+    const {
+      headerElement,
+      messagesElement,
+      promptElement,
+      classNames = {},
+      open: _open,
+      maximized: _maximized,
+      toggleButtonElement: _toggleButtonElement,
+      // Chat state props (destructured to avoid spreading on div)
+      messages: _messages,
+      status: _status,
+      isClearing: _isClearing,
+      clearMessages: _clearMessages,
+      onClearTransitionEnd: _onClearTransitionEnd,
+      suggestions: _suggestions,
+      tools: _tools,
+      ...rest
+    } = userProps;
+
+    return (
+      <div
+        {...rest}
+        className={cx('ais-Chat', 'ais-ChatInlineLayout', classNames.root)}
+      >
+        <div
+          className={cx(
+            'ais-Chat-container',
+            'ais-Chat-container--open',
+            classNames.container
+          )}
+        >
+          {headerElement}
+          {messagesElement}
+          {promptElement}
+        </div>
+      </div>
+    );
+  };
+}

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

@@ -0,0 +1,57 @@
+/** @jsx createElement */
+import { cx } from '../../lib';
+
+import type { Renderer } from '../../types';
+import type { ChatLayoutOwnProps } from './types';
+
+export function createChatOverlayLayoutComponent({ createElement }: Renderer) {
+  return function ChatOverlayLayout(userProps: ChatLayoutOwnProps) {
+    const {
+      open,
+      maximized,
+      headerElement,
+      messagesElement,
+      promptElement,
+      toggleButtonElement,
+      classNames = {},
+      // Chat state props (destructured to avoid spreading on div)
+      messages: _messages,
+      status: _status,
+      isClearing: _isClearing,
+      clearMessages: _clearMessages,
+      onClearTransitionEnd: _onClearTransitionEnd,
+      suggestions: _suggestions,
+      tools: _tools,
+      ...rest
+    } = userProps;
+
+    return (
+      <div
+        {...rest}
+        className={cx(
+          'ais-Chat',
+          'ais-ChatOverlayLayout',
+          maximized && 'ais-ChatOverlayLayout--maximized',
+          classNames.root
+        )}
+      >
+        <div
+          className={cx(
+            'ais-Chat-container',
+            open && 'ais-Chat-container--open',
+            maximized && 'ais-Chat-container--maximized',
+            classNames.container
+          )}
+        >
+          {headerElement}
+          {messagesElement}
+          {promptElement}
+        </div>
+
+        <div className="ais-Chat-toggleButtonWrapper">
+          {toggleButtonElement}
+        </div>
+      </div>
+    );
+  };
+}

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

@@ -35,7 +35,7 @@ describe('Chat', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="ais-Chat"
+          class="ais-Chat ais-ChatOverlayLayout"
         >
           <div
             class="ais-Chat-container ais-Chat-container--open"

packages/instantsearch-ui-components/src/components/chat/__tests__/ChatInlineLayout.test.tsx

@@ -0,0 +1,91 @@
+/**
+ * @jest-environment @instantsearch/testutils/jest-environment-jsdom.ts
+ */
+/** @jsx createElement */
+import { render } from '@testing-library/preact';
+import { createElement, Fragment } from 'preact';
+
+import { createChatInlineLayoutComponent } from '../ChatInlineLayout';
+
+const ChatInlineLayout = createChatInlineLayoutComponent({
+  createElement,
+  Fragment,
+});
+
+describe('ChatInlineLayout', () => {
+  const defaultProps = {
+    open: true,
+    maximized: false,
+    headerElement: <div className="header">Header</div>,
+    messagesElement: <div className="messages">Messages</div>,
+    promptElement: <div className="prompt">Prompt</div>,
+    toggleButtonElement: <button className="toggle">Toggle</button>,
+    messages: [],
+    status: 'ready' as const,
+    isClearing: false,
+    clearMessages: jest.fn(),
+    onClearTransitionEnd: jest.fn(),
+    tools: {},
+  };
+
+  test('renders with default props', () => {
+    const { container } = render(<ChatInlineLayout {...defaultProps} />);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div
+          class="ais-Chat ais-ChatInlineLayout"
+        >
+          <div
+            class="ais-Chat-container ais-Chat-container--open"
+          >
+            <div
+              class="header"
+            >
+              Header
+            </div>
+            <div
+              class="messages"
+            >
+              Messages
+            </div>
+            <div
+              class="prompt"
+            >
+              Prompt
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+  });
+
+  test('does not render toggle button', () => {
+    const { container } = render(<ChatInlineLayout {...defaultProps} />);
+    expect(container.querySelector('.toggle')).not.toBeInTheDocument();
+    expect(
+      container.querySelector('.ais-Chat-toggleButtonWrapper')
+    ).not.toBeInTheDocument();
+  });
+
+  test('accepts custom classNames', () => {
+    const { container } = render(
+      <ChatInlineLayout
+        {...defaultProps}
+        classNames={{ root: 'ROOT', container: 'CONTAINER' }}
+      />
+    );
+    expect(container.querySelector('.ais-Chat')!.className).toBe(
+      'ais-Chat ais-ChatInlineLayout ROOT'
+    );
+    expect(container.querySelector('.ais-Chat-container')!.className).toBe(
+      'ais-Chat-container ais-Chat-container--open CONTAINER'
+    );
+  });
+
+  test('renders all slot elements', () => {
+    const { container } = render(<ChatInlineLayout {...defaultProps} />);
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.messages')).toBeInTheDocument();
+    expect(container.querySelector('.prompt')).toBeInTheDocument();
+  });
+});