feat(ui-components): introduce chat components (#6678)

Author: FabienMotte

bundlesize.config.json

@@ -22,7 +22,7 @@
     },
     {
       "path": "packages/react-instantsearch/dist/umd/ReactInstantSearch.min.js",
-      "maxSize": "66.50 kB"
+      "maxSize": "66.5 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",
@@ -58,11 +58,11 @@
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite.css",
-      "maxSize": "5.25 kB"
+      "maxSize": "7 kB"
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite-min.css",
-      "maxSize": "4.75 kB"
+      "maxSize": "6.25 kB"
     }
   ]
 }

packages/instantsearch-ui-components/package.json

@@ -47,6 +47,8 @@
     "watch:es": "yarn --silent build:es:base --watch"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.6"
+    "@babel/runtime": "^7.27.6",
+    "ai": "^5.0.18",
+    "markdown-to-jsx": "^7.1.13"
   }
 }

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

@@ -0,0 +1,79 @@
+/** @jsx createElement */
+/** @jsxFrag Fragment */
+import { cx } from '../../lib';
+
+import { createChatHeaderComponent } from './ChatHeader';
+import { createChatMessagesComponent } from './ChatMessages';
+import { createChatPromptComponent } from './ChatPrompt';
+import { createChatToggleButtonComponent } from './ChatToggleButton';
+
+import type { 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[];
+};
+
+export type ChatProps = {
+  /*
+   * Whether the chat is open or closed.
+   */
+  open: boolean;
+  /*
+   * Props for the ChatHeader component.
+   */
+  headerProps: ChatHeaderProps;
+  /*
+   * Props for the ChatToggleButton component.
+   */
+  toggleButtonProps: ChatToggleButtonProps;
+  /*
+   * Props for the ChatMessages component.
+   */
+  messagesProps: ChatMessagesProps;
+  /*
+   * Props for the ChatPrompt component.
+   */
+  promptProps: ChatPromptProps;
+  /**
+   * Optional class names for elements
+   */
+  classNames?: Partial<ChatClassNames>;
+};
+
+export function createChatComponent({ createElement, Fragment }: Renderer) {
+  const ChatToggleButton = createChatToggleButtonComponent({
+    createElement,
+    Fragment,
+  });
+  const ChatHeader = createChatHeaderComponent({ createElement, Fragment });
+  const ChatMessages = createChatMessagesComponent({ createElement, Fragment });
+  const ChatPrompt = createChatPromptComponent({ createElement, Fragment });
+
+  return function Chat({
+    open,
+    headerProps,
+    toggleButtonProps,
+    messagesProps,
+    promptProps,
+    classNames = {},
+  }: ChatProps) {
+    return (
+      <>
+        {!open ? (
+          <ChatToggleButton {...toggleButtonProps} />
+        ) : (
+          <div className={cx('ais-Chat-container', classNames.container)}>
+            <ChatHeader {...headerProps} />
+            <ChatMessages {...messagesProps} />
+
+            <ChatPrompt {...promptProps} />
+          </div>
+        )}
+      </>
+    );
+  };
+}

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

@@ -0,0 +1,58 @@
+/** @jsx createElement */
+import { cx } from '../../lib';
+
+import type { Renderer, ComponentProps } from '../../types';
+
+export type ChatHeaderClassNames = {
+  root?: string | string[];
+  title?: string | string[];
+  close?: string | string[];
+};
+
+export type ChatHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {
+  /**
+   * The title to display in the header
+   */
+  title?: string;
+  /**
+   * Callback when the close button is clicked
+   */
+  onClose: () => void;
+  /**
+   * Accessible label for the close button
+   */
+  closeLabel?: string;
+  /**
+   * Optional class names for elements
+   */
+  classNames?: Partial<ChatHeaderClassNames>;
+};
+
+export function createChatHeaderComponent({ createElement }: Renderer) {
+  return function ChatHeader({
+    title = 'Chat',
+    onClose,
+    closeLabel = 'Close chat',
+    classNames = {},
+    ...props
+  }: ChatHeaderProps) {
+    return (
+      <div
+        className={cx('ais-ChatHeader', classNames.root, props.className)}
+        {...props}
+      >
+        <span className={cx('ais-ChatHeader-title', classNames.title)}>
+          {title}
+        </span>
+        <button
+          className={cx('ais-ChatHeader-close', classNames.close)}
+          onClick={onClose}
+          aria-label={closeLabel}
+          type="button"
+        >
+          ×
+        </button>
+      </div>
+    );
+  };
+}