feat(react-instantsearch-ui): implement chat components design

bundlesize.config.json

@@ -22,7 +22,7 @@
     },
     {
       "path": "packages/react-instantsearch/dist/umd/ReactInstantSearch.min.js",
-      "maxSize": "77.5 kB"
+      "maxSize": "81.25 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",
@@ -42,11 +42,11 @@
     },
     {
       "path": "./packages/instantsearch.css/themes/algolia.css",
-      "maxSize": "4 kB"
+      "maxSize": "6.75 kB"
     },
     {
       "path": "./packages/instantsearch.css/themes/algolia-min.css",
-      "maxSize": "3.75 kB"
+      "maxSize": "6.25 kB"
     },
     {
       "path": "./packages/instantsearch.css/themes/reset.css",
@@ -58,11 +58,19 @@
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite.css",
-      "maxSize": "7 kB"
+      "maxSize": "7.90 kB"
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite-min.css",
-      "maxSize": "6.25 kB"
+      "maxSize": "7.25 kB"
+    },
+    {
+      "path": "./packages/instantsearch.css/components/chat.css",
+      "maxSize": "3.50 kB"
+    },
+    {
+      "path": "./packages/instantsearch.css/components/chat-min.css",
+      "maxSize": "3.25 kB"
     }
   ]
 }

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

@@ -7,21 +7,25 @@ import { createChatMessagesComponent } from './ChatMessages';
 import { createChatPromptComponent } from './ChatPrompt';
 import { createChatToggleButtonComponent } from './ChatToggleButton';
 
-import type { Renderer } from '../../types';
+import type { MutableRef, Renderer } from '../../types';
 import type { ChatHeaderProps } from './ChatHeader';
 import type { ChatMessagesProps } from './ChatMessages';
 import type { ChatPromptProps } from './ChatPrompt';
 import type { ChatToggleButtonProps } from './ChatToggleButton';
 
 export type ChatClassNames = {
-  container?: string | string[];
+  root?: string | string[];
 };
 
 export type ChatProps = {
   /*
    * Whether the chat is open or closed.
    */
   open: boolean;
+  /*
+   * Whether the chat is maximized or not.
+   */
+  maximized?: boolean;
   /*
    * Props for the ChatHeader component.
    */
@@ -53,27 +57,40 @@ export function createChatComponent({ createElement, Fragment }: Renderer) {
   const ChatMessages = createChatMessagesComponent({ createElement, Fragment });
   const ChatPrompt = createChatPromptComponent({ createElement, Fragment });
 
+  const promptRef: MutableRef<HTMLTextAreaElement | null> = { current: null };
+
   return function Chat({
     open,
+    maximized = false,
     headerProps,
     toggleButtonProps,
     messagesProps,
-    promptProps,
+    promptProps = {},
     classNames = {},
   }: ChatProps) {
     return (
-      <>
-        {!open ? (
-          <ChatToggleButton {...toggleButtonProps} />
-        ) : (
-          <div className={cx('ais-Chat-container', classNames.container)}>
-            <ChatHeader {...headerProps} />
-            <ChatMessages {...messagesProps} />
+      <div className={cx('ais-Chat', maximized && 'ais-Chat--maximized')}>
+        <div
+          className={cx(
+            'ais-Chat-container',
+            open && 'ais-Chat-container--open',
+            maximized && 'ais-Chat-container--maximized',
+            classNames.root
+          )}
+        >
+          <ChatHeader {...headerProps} maximized={maximized} />
+          <ChatMessages {...messagesProps} />
+          <ChatPrompt {...promptProps} ref={promptRef} />
+        </div>
 
-            <ChatPrompt {...promptProps} />
-          </div>
-        )}
-      </>
+        <ChatToggleButton
+          {...toggleButtonProps}
+          onClick={() => {
+            toggleButtonProps.onClick?.();
+            promptRef.current?.focus();
+          }}
+        />
+      </div>
     );
   };
 }

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

@@ -1,57 +1,204 @@
 /** @jsx createElement */
 import { cx } from '../../lib';
 
+import {
+  SparklesIconComponent,
+  MaximizeIconComponent as MaximizeIconComponentDefault,
+  MinimizeIconComponent as MinimizeIconComponentDefault,
+  CloseIconComponent as CloseIconComponentDefault,
+} from './icons';
+
 import type { Renderer, ComponentProps } from '../../types';
 
+export type ChatHeaderTranslations = {
+  /**
+   * The title to display in the header
+   */
+  title: string;
+  /**
+   * Accessible label for the minimize button
+   */
+  minimizedLabel: string;
+  /**
+   * Accessible label for the maximize button
+   */
+  maximizeLabel: string;
+  /**
+   * Accessible label for the close button
+   */
+  closeLabel: string;
+  /**
+   * Text for the clear button
+   */
+  clearLabel: string;
+};
+
 export type ChatHeaderClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
   root?: string | string[];
+  /**
+   * Class names to apply to the title element
+   */
   title?: string | string[];
+  /**
+   * Class names to apply to the title icon element
+   */
+  titleIcon?: string | string[];
+  /**
+   * Class names to apply to the maximize button element
+   */
+  maximize?: string | string[];
+  /**
+   * Class names to apply to the close button element
+   */
   close?: string | string[];
+  /**
+   * Class names to apply to the clear button element
+   */
+  clear?: string | string[];
 };
 
-export type ChatHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {
+export type ChatHeaderProps = ComponentProps<'div'> & {
   /**
-   * The title to display in the header
+   * Whether the chat is maximized
+   */
+  maximized?: boolean;
+  /**
+   * Callback when the maximize button is clicked
    */
-  title?: string;
+  onToggleMaximize?: () => void;
   /**
    * Callback when the close button is clicked
    */
   onClose: () => void;
   /**
-   * Accessible label for the close button
+   * Callback when the clear button is clicked
+   */
+  onClear?: () => void;
+  /**
+   * Whether the clear button is enabled
+   */
+  canClear?: boolean;
+  /**
+   * Optional close icon component
    */
-  closeLabel?: string;
+  closeIconComponent?: () => JSX.Element;
+  /**
+   * Optional minimize icon component
+   */
+  minimizeIconComponent?: () => JSX.Element;
+  /**
+   * Optional maximize icon component
+   */
+  maximizeIconComponent?: (props: { maximized: boolean }) => JSX.Element;
+  /**
+   * Optional title icon component (defaults to sparkles)
+   */
+  titleIconComponent?: () => JSX.Element;
   /**
    * Optional class names for elements
    */
   classNames?: Partial<ChatHeaderClassNames>;
+  /**
+   * Optional translations
+   */
+  translations?: Partial<ChatHeaderTranslations>;
 };
 
 export function createChatHeaderComponent({ createElement }: Renderer) {
   return function ChatHeader({
-    title = 'Chat',
+    maximized = false,
+    onToggleMaximize,
     onClose,
-    closeLabel = 'Close chat',
+    onClear,
+    canClear = false,
+    closeIconComponent: CloseIconComponent,
+    minimizeIconComponent: MinimizeIconComponent,
+    maximizeIconComponent: MaximizeIconComponent,
+    titleIconComponent: TitleIconComponent,
     classNames = {},
+    translations: userTranslations,
     ...props
   }: ChatHeaderProps) {
+    const translations: Required<ChatHeaderTranslations> = {
+      title: 'Chat',
+      minimizedLabel: 'Minimize chat',
+      maximizeLabel: 'Maximize chat',
+      closeLabel: 'Close chat',
+      clearLabel: 'Clear',
+      ...userTranslations,
+    };
+
+    const defaultMaximizeIcon = maximized ? (
+      <MinimizeIconComponentDefault createElement={createElement} />
+    ) : (
+      <MaximizeIconComponentDefault createElement={createElement} />
+    );
+
     return (
       <div
         className={cx('ais-ChatHeader', classNames.root, props.className)}
         {...props}
       >
         <span className={cx('ais-ChatHeader-title', classNames.title)}>
-          {title}
+          <span
+            className={cx('ais-ChatHeader-titleIcon', classNames.titleIcon)}
+          >
+            {TitleIconComponent ? (
+              <TitleIconComponent />
+            ) : (
+              <SparklesIconComponent
+                createElement={createElement}
+                width={20}
+                height={20}
+              />
+            )}
+          </span>
+          {translations.title}
         </span>
-        <button
-          className={cx('ais-ChatHeader-close', classNames.close)}
-          onClick={onClose}
-          aria-label={closeLabel}
-          type="button"
-        >
-          ×
-        </button>
+        <div className={cx('ais-ChatHeader-actions')}>
+          {onClear && (
+            <button
+              className={cx('ais-ChatHeader-clear', classNames.clear)}
+              onClick={onClear}
+              disabled={!canClear}
+              type="button"
+            >
+              {translations.clearLabel}
+            </button>
+          )}
+          <button
+            className={cx('ais-ChatHeader-maximize', classNames.maximize)}
+            onClick={onToggleMaximize}
+            aria-label={
+              maximized
+                ? translations.minimizedLabel
+                : translations.maximizeLabel
+            }
+            type="button"
+          >
+            {MaximizeIconComponent ? (
+              <MaximizeIconComponent maximized={maximized} />
+            ) : (
+              defaultMaximizeIcon
+            )}
+          </button>
+          <button
+            className={cx('ais-ChatHeader-close', classNames.close)}
+            onClick={onClose}
+            aria-label={translations.closeLabel}
+            title={translations.closeLabel}
+            type="button"
+          >
+            {CloseIconComponent ? (
+              <CloseIconComponent />
+            ) : (
+              <CloseIconComponentDefault createElement={createElement} />
+            )}
+          </button>
+        </div>
       </div>
     );
   };