Chat

<Chat agentId="8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9" />

<Chat
  agentId="8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9"
  feedback={true}
/>

<Chat
  agentId="8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9"
  requestOptions={{
    queryParameters: {
      cache: false,
    },
    headers: {
      'X-Algolia-Secure-User-Token': 'ALGOLIA_SECURE_USER_TOKEN',
    },
  }}
/>

<Chat
  getSearchPageURL={(nextUiState) => {
    return `/search?${qs.stringify(nextUiState)}`;
  }}
/>

import { DisplayResultsToolType, SearchIndexToolType } from 'react-instantsearch';

<Chat
  agentId="YOUR_AGENT_ID"
  tools={{
    [SearchIndexToolType]: {
      layoutComponent: ({ message, sendEvent }) => {
        const items = message.output?.hits || [];

        return (
          <div className="MyCarousel">
            {items.map((item) => (
              <article className="MyCarousel-item" key={item.objectID}>
                <img src={item.image} alt={item.name} />
                <h3>{item.name}</h3>
                <span>${item.price}</span>
              </article>
            ))}
          </div>
        );
      },
    },
  }}
/>

<Chat
  agentId="YOUR_AGENT_ID"
  initialMessages={[
    {
      id: "welcome",
      role: "assistant",
      parts: [{ type: "text", text: "Hi! How can I help you today?" }],
    },
  ]}
/>

<Chat
  agentId="YOUR_AGENT_ID"
  initialUserMessage="Show me a few popular products to get started."
/>

<Chat agentId="YOUR_AGENT_ID" resume />

<Chat agentId="YOUR_AGENT_ID" disableTriggerValidation />

<Chat
  agentId="YOUR_AGENT_ID"
  onFinish={({ message, isAbort, isError }) => {
    if (isError) {
      console.error("Chat stream failed", message);
      return;
    }
    if (!isAbort) {
      analytics.track("chat_message_completed", { messageId: message.id });
    }
  }}
/>

<Chat agentId="YOUR_AGENT_ID" requiresSearch={false} />

<Chat agentId="YOUR_AGENT_ID" showReasoning />

import { Chat } from "react-instantsearch";

function WelcomeScreen({ sendMessage }) {
  const prompts = ["What are your best-selling shoes?", "Show me new arrivals"];

  return (
    <div className="ais-ChatGreeting">
      <h2>How can I help you today?</h2>
      <div className="ais-ChatPromptSuggestions">
        {prompts.map((prompt) => (
          <button key={prompt} onClick={() => sendMessage({ text: prompt })}>
            {prompt}
          </button>
        ))}
      </div>
    </div>
  );
}

<Chat agentId="YOUR_CHAT_AGENT_ID" emptyComponent={WelcomeScreen} />;

import { Chat, ChatSidePanelLayout } from "react-instantsearch";

function SidePanelLayout(props) {
  return (
    <ChatSidePanelLayout
      {...props}
      parentElement="#main-content"
    />
  );
}

<Chat
  agentId="8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9"
  layoutComponent={SidePanelLayout}
/>

import { Chat, ChatMessageLoader } from "react-instantsearch";

<Chat
  agentId="8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9"
  loaderComponent={(props) => (
    <ChatMessageLoader
      {...props}
      translations={{ loaderText: "Thinking..." }}
    />
  )}
/>

<Chat
  // ...
  headerTitleIconComponent={() => <span>✨</span>}
  headerMaximizeIconComponent={({ maximized }) => (
    <span>{maximized ? "🔽" : "🔼"}</span>
  )}
  promptFooterComponent={() => (
    <a href="https://example.com/privacy-policy">Privacy policy</a>
  )}
/>

<Chat
  // ...
  messagesProps={{
    assistantMessageProps: {
      textComponent: ({ part, status }) => (
        <span className="MyAssistantText" data-status={status}>
          {part.text}
        </span>
      ),
    },
    userMessageProps: {
      textComponent: ({ part }) => (
        <span className="MyUserText">{part.text}</span>
      ),
    },
  }}
/>

<Chat
  // ...
  messagesProps={{
    userMessageProps: {
      parseMarkdown: false,
    },
  }}
/>

<Chat
  classNames={{
    root: "MyCustomChat",
    container: "MyCustomChatContainer MyCustomChatContainer--subclass",
    header: {
      root: "MyCustomChatHeader",
      title: ["MyCustomChatHeaderTitle", "MyCustomChatHeaderTitle--subclass"],
      // ...
    },
    // ...
  }}
/>

<Chat
  translations={{
    header: {
      title: "My AI shopping assistant",
      closeLabel: "Close chat",
      // ...
    },
    // ...
  }}
/>

<Chat className="MyCustomChat" title="My custom title" />