Feat/demo for askai

examples/js/getting-started/index.html

@@ -42,8 +42,10 @@ <h1 class="header-title">
           <div id="trending"></div>
         </div>
       </div>
+
+      <div id="chat"></div>
     </div>
 
-    <script type="module" src="./src/app.js"></script>
+    <script type="module" src="./src/app.tsx"></script>
   </body>
 </html>

examples/js/getting-started/src/app.css

@@ -155,3 +155,25 @@
     rgba(255, 255, 255, 1) 100%
   );
 }
+
+.ais-Chat {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  background-color: #fff;
+  border-radius: 1rem 0 0 0;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 0 0 1px #23263b0d, 0 1px 3px #23263b26;
+  width: 25%;
+  height: 700px;
+}
+
+.ais-ChatMessages-scroll {
+  padding: 1rem;
+}
+
+.ais-ChatPrompt {
+  padding: 0 1rem 1rem 1rem;
+}

examples/js/getting-started/src/app.js → examples/js/getting-started/src/app.tsx

@@ -1,3 +1,5 @@
+/** @jsx h */
+// @ts-check
 import { liteClient as algoliasearch } from 'algoliasearch/lite';
 import instantsearch from 'instantsearch.js';
 import { carousel } from 'instantsearch.js/es/templates';

examples/react/e-commerce/App.css

@@ -339,3 +339,26 @@ mark {
     display: none;
   }
 }
+
+.ais-Chat-container {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #fff;
+  border-radius: 1rem 0 0 0;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 0 0 1px #23263b0d, 0 1px 3px #23263b26;
+  width: 25%;
+  height: 700px;
+}
+
+.ais-ChatMessages-scroll {
+  padding: 1rem;
+}
+
+.ais-ChatPrompt {
+  padding: 0 1rem 1rem 1rem;
+}

examples/react/e-commerce/App.tsx

@@ -13,6 +13,7 @@ import {
   ToggleRefinement,
   Highlight,
   Snippet,
+  Chat,
 } from 'react-instantsearch';
 
 import {
@@ -31,7 +32,7 @@ import { ScrollTo } from './components/ScrollTo';
 import getRouting from './routing';
 import { formatNumber } from './utils';
 
-import 'instantsearch.css/themes/reset.css';
+import 'instantsearch.css/themes/satellite.css';
 
 import './Theme.css';
 import './App.css';
@@ -48,6 +49,45 @@ const searchClient = algoliasearch(
 const indexName = 'instant_search';
 const routing = getRouting(indexName);
 
+async function getToken() {
+  const response = await fetch(`https://askai.algolia.com/chat/token`, {
+    method: 'POST',
+    headers: {
+      'X-Algolia-Assistant-Id': 'askAIDemo',
+    },
+  });
+  const data = await response.json();
+  return data.token;
+}
+
+function AskAi() {
+  const [token, setToken] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    getToken().then((newToken) => {
+      setToken(newToken);
+    });
+  }, []);
+
+  if (!token) {
+    return null;
+  }
+
+  return (
+    <Chat
+      api="https://askai.algolia.com/chat"
+      headers={{
+        'Content-Type': 'application/json',
+        'X-Algolia-Application-Id': 'PMZUYBQDAK',
+        'X-Algolia-API-Key': '24b09689d5b4223813d9b8e48563c8f6',
+        'X-Algolia-Index-Name': 'docsearch-markdown',
+        'X-Algolia-Assistant-Id': 'askAIDemo',
+        Authorization: `TOKEN ${token}`,
+      }}
+    />
+  );
+}
+
 export function App() {
   const containerRef = useRef<HTMLElement>(null);
   const headerRef = useRef(null);
@@ -89,6 +129,7 @@ export function App() {
       routing={routing}
       insights={true}
     >
+      <AskAi />
       <header className="header" ref={headerRef}>
         <p className="header-logo">
           <AlgoliaSvg />

examples/react/e-commerce/package.json

@@ -15,7 +15,8 @@
     "react": "19.0.0",
     "react-compound-slider": "3.4.0",
     "react-dom": "19.0.0",
-    "react-instantsearch": "7.16.2"
+    "react-instantsearch": "7.16.2",
+    "zod": "4.0.17"
   },
   "devDependencies": {
     "@parcel/core": "2.10.0",

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,61 @@
+/** @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 = {
+  open: boolean;
+  headerProps: ChatHeaderProps;
+  toggleButtonProps: ChatToggleButtonProps;
+  messagesProps: ChatMessagesProps;
+  promptProps: ChatPromptProps;
+  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>
+    );
+  };
+}