add carousel default tool

Author: shaejaz

examples/react/e-commerce/App.tsx

@@ -93,26 +93,6 @@ export function App() {
       <Chat
         agentId="5bc03a4f-4e25-400c-9f52-a7b969d7f3da"
         itemComponent={ItemComponent}
-        tools={[
-          {
-            type: 'tool-algolia_search_index',
-            component: ({ message }) => {
-              console.log(message);
-              message.parts;
-              // const items =
-              //   (
-              //     part.output as {
-              //       hits?: Array<{
-              //         objectID: string;
-              //         __position: number;
-              //       }>;
-              //     }
-              //   )?.hits || [];
-
-              return <span>Test</span>;
-            },
-          },
-        ]}
       />
       <header className="header" ref={headerRef}>
         <p className="header-logo">

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

@@ -70,10 +70,15 @@ export type ChatMessageActionProps = {
   onClick?: (message: ChatMessageBase) => void;
 };
 
+export type ChatToolMessage = Extract<
+  ChatMessageBase['parts'][number],
+  { type: `tool-${string}` }
+>;
+
 export type Tools = Array<{
   type: string;
   component: (props: {
-    message: ChatMessageBase['parts'][number];
+    message: ChatToolMessage;
     indexUiState: object;
     setIndexUiState: (state: object) => void;
   }) => JSX.Element;
@@ -223,6 +228,9 @@ export function createChatMessageComponent({
         });
         return <span key={`${message.id}-${index}`}>{markdown}</span>;
       }
+      if (part.type === 'tool-start') {
+        part;
+      }
       if (part.type.startsWith('tool-')) {
         const tool = tools.find((t) => t.type === part.type);
         if (tool) {
@@ -233,7 +241,7 @@ export function createChatMessageComponent({
               className="ais-ChatMessage-tool"
             >
               <ToolComponent
-                message={part}
+                message={part as ChatToolMessage}
                 indexUiState={indexUiState}
                 setIndexUiState={setIndexUiState}
               />

packages/react-instantsearch/src/widgets/Chat/Chat.tsx

@@ -4,6 +4,7 @@ import React, { createElement, Fragment } from 'react';
 import { useChat, useInstantSearch } from 'react-instantsearch-core';
 
 import type { Pragma, Tools } from 'instantsearch-ui-components';
+import { Carousel } from '../../components';
 
 const ChatUiComponent = createChatComponent({
   createElement: createElement as Pragma,
@@ -16,26 +17,34 @@ export type ChatProps = {
   tools?: Tools;
 };
 
-export const defaultTools: Tools = [
-  {
-    type: 'tool-algolia_search_index',
-    component: ({ message }) => {
-      console.log(message);
-      message.parts;
-      // const items =
-      //   (
-      //     part.output as {
-      //       hits?: Array<{
-      //         objectID: string;
-      //         __position: number;
-      //       }>;
-      //     }
-      //   )?.hits || [];
+const createDefaultTools = (
+  itemComponent?: (props: { item: Record<string, unknown> }) => JSX.Element
+): Tools => {
+  return [
+    {
+      type: 'tool-algolia_search_index',
+      component: ({ message }) => {
+        const items =
+          (
+            message.output as {
+              hits?: Array<{
+                objectID: string;
+                __position: number;
+              }>;
+            }
+          )?.hits || [];
 
-      return <span>Test</span>;
+        return (
+          <Carousel
+            items={items}
+            itemComponent={itemComponent}
+            sendEvent={() => {}}
+          />
+        );
+      },
     },
-  },
-];
+  ];
+};
 
 export function Chat({ agentId, tools: userTools, itemComponent }: ChatProps) {
   const { indexUiState, setIndexUiState } = useInstantSearch();
@@ -44,7 +53,7 @@ export function Chat({ agentId, tools: userTools, itemComponent }: ChatProps) {
   const [input, setInput] = React.useState('');
 
   const tools = React.useMemo(() => {
-    return [...defaultTools, ...(userTools ?? [])];
+    return [...createDefaultTools(itemComponent), ...(userTools ?? [])];
   }, [userTools]);
 
   const { messages, sendMessage } = useChat({