> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# chat

> Displays a chat interface to interact with a generative AI assistant built with Algolia Agent Studio.

export const customLabel_0 = "in beta"

<Callout icon="flask-conical" color="#14b8a6">
  This widget is **{customLabel_0 || "experimental"}** and is subject to change in minor versions.
</Callout>

For more information, see [Agent Studio](/doc/guides/algolia-ai/agent-studio).

```ts Signature theme={"system"}
chat({
  container: string | HTMLElement,
  // Required parameter, either one of
  agentId?: string,
  transport?: object,
  // Optional parameters (agentId only)
  feedback?: boolean,
  // Optional parameters
  getSearchPageURL?: function,
  tools?: object,
  context?: object | function,
  initialMessages?: array,
  initialUserMessage?: string,
  resume?: boolean,
  disableTriggerValidation?: boolean,
  onFinish?: function,
  templates?: object,
  cssClasses?: object,
});
```

## Import

<CodeGroup>
  ```js Package manager theme={"system"}
  import { chat } from 'instantsearch.js/es/widgets';
  ```

  ```js CDN theme={"system"}
  // "chat" is not available from the UMD build.
  // Please use InstantSearch.js with a packaging system.
  ```
</CodeGroup>

## About this widget

Use the `chat` widget to display a chat interface that interacts with a generative AI assistant.

See also: [Agent Studio](/doc/guides/algolia-ai/agent-studio)

<Note>
  The `chat` widget renders the chat panel but doesn't provide a way to open it. Add one entry point to the same InstantSearch instance: the [`chatTrigger`](/doc/api-reference/widgets/chat-trigger/js) widget, [AI mode](/doc/guides/building-search-ui/going-further/chat-customization/ai-search-experience/js) on a `searchBox` or autocomplete, or an inline layout. Otherwise, the widget logs a development warning. To silence it, set [`disableTriggerValidation`](#param-disable-trigger-validation) to `true`.
</Note>

## Examples

```js JavaScript icon=code theme={"system"}
chat({
  container: '#chat',
  agentId: '8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9',
});

chatTrigger({
  container: '#chat-trigger',
});
```

## Options

<ParamField body="container" type="string | HTMLElement" required>
  The CSS Selector or `HTMLElement` to insert the widget into.

  <CodeGroup>
    ```js string theme={"system"}
    chat({
      container: '#chat',
    });
    ```

    ```js HTMLElement theme={"system"}
    chat({
      container: document.querySelector('#chat'),
    });
    ```
  </CodeGroup>
</ParamField>

<ParamField body="agentId" type="string">
  The unique identifier of the agent to connect to. You can find the `agentId` in the [Agent Studio dashboard](https://dashboard.algolia.com/generativeAi/agent-studio/agents).

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    agentId: '8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9',
  });
  ```
</ParamField>

<ParamField body="feedback" type="boolean">
  Whether to enable feedback (thumbs up/down) on assistant messages. Only available when using `agentId`.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    agentId: '8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9',
    feedback: true,
  });
  ```
</ParamField>

<ParamField body="transport" type="object">
  A custom transport object to handle the communication between the chat widget and the agent. The API endpoint must be compatible with [Vercel AI SDK 5](https://ai-sdk.dev/docs/ai-sdk-ui/transport#custom-transport-configuration).

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    transport: {
      api: 'https://chatapi.example.com/api/v1/chat',
      headers: {
        'X-Session-Id': '8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9',
        'X-Api-Version': '2025-01-01',
      },
    },
  });
  ```
</ParamField>

<ParamField body="getSearchPageURL" type="function">
  A function to return the URL of the main search page with the `nextUiState`. This is used to navigate to the main search page when the user clicks on "View all" in the search tool.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    getSearchPageURL: (nextUiState) => `/search?${qs.stringify(nextUiState)}`,
  });
  ```
</ParamField>

<ParamField body="tools" type="object">
  An object that defines the client-side tools the agent can use to interact with your app.
  The object keys must match the tool names you defined in the [Agent Studio dashboard](/doc/guides/algolia-ai/agent-studio/how-to/dashboard#client-side-tools).

  The widget has a built-in renderer for the search tool. Import and use the exported constant as a key to customize the default rendering:

  * `SearchIndexToolType` (`'algolia_search_index'`). Displays search results from an Algolia index in a carousel.

  ```js JavaScript icon=code theme={"system"}
  import { SearchIndexToolType } from 'instantsearch.js/es/widgets/chat/chat';
  ```

  To customize only the appearance of each result in the built-in carousel, use the [`item`](#param-templates) template instead. To replace the whole carousel layout, override the `SearchIndexToolType` tool's `layout` template. The tool result is on `message.output` (`hits`, `nbHits`, `queryID`):

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    tools: {
      [SearchIndexToolType]: {
        templates: {
          layout: ({ message, sendEvent }, { html }) => {
            const items = message.output?.hits || [];

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

  For a step-by-step walkthrough, see [Customize the chat results carousel](/doc/guides/building-search-ui/going-further/chat-customization/results-carousel/js).

  Each tool is an object with the following properties:

  * `templates`. An object containing template functions for the tool.
    * `layout`. A [tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) function for rendering the tool call in the chat. It receives:
      * `message`. The tool call message. It contains `input` (parameters from the agent) and `output` (the result you provide with `addToolResult`). For more information on the message structure, see the [Vercel AI SDK documentation](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat#messages.ui-message).
      * `indexUiState`. The current InstantSearch UI state.
      * `setIndexUiState`. Updates the InstantSearch UI state (for example, to refine filters or update the query based on the tool call).
      * `applyFilters`. Applies filters to the InstantSearch UI state from the tool call.
      * `addToolResult`. Sends the tool's output back to the agent. You must call this at least once before the next message. For more information, see the [Vercel AI SDK documentation](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat#add-tool-result).
      * `onClose`. Dismisses the tool's UI in the chat.
      * `sendEvent`. Sends `click` or `conversion` events related to the tool call. For more information, see the [`insights`](/doc/api-reference/widgets/insights/js) middleware documentation.
  * `onToolCall`. Optional handler invoked when the agent calls the tool. Receives a parameter object with:
    * `input`. The parameters the agent passed to the tool.
    * `addToolResult`. Sends the tool's output back to the agent. For more information, see the [Vercel AI SDK documentation](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat#on-tool-call).
    * `toolCallId`. The unique identifier of the tool call.
    * `toolName`. The name of the tool being invoked.
    * `dynamic`. Whether the tool is dynamically registered.
  * `streamInput`. Optional boolean. When `true`, the default loader is suppressed as the tool's input is streamed from the agent. Use the partial `input` in your `layout` template to render the streaming state as input chunks arrive.

  ```js JavaScript icon=code expandable theme={"system"}
  chat({
    // ...
    tools: {
      addToCart: {
        templates: {
          layout: ({ message, addToolResult }, { html }) => html`
            <div>
              <p>Add ${message.input.objectID} to the cart?</p>
              <button
                onClick=${async () => {
                  // add the product to the cart
                  await addProductToCart(message.input.objectID);
                  // notify the agent that the tool has been used
                  addToolResult({
                    output: {
                      text: `added ${message.input.objectID} to cart`,
                      done: true,
                    },
                  });
                }}
              >
                Add to cart
              </button>
            </div>
          `,
        },
        onToolCall: ({ addToolResult }) => addToolResult({ output: {} }),
      },
      viewProduct: {
        templates: {
          layout: ({ message, addToolResult }, { html }) => {
            if (!message.output) {
              return html`<span>Loading product...</span>`;
            }

            return html`
              <div>
                <h2>${message.output.productName}</h2>
                <p>${message.output.brand}</p>
                <img src="${message.output.imageUrl}" />
              </div>
            `;
          },
        },
        onToolCall: async ({ input, addToolResult }) => {
          addToolResult({
            // fetch product details from your index
            output: await fetchProductDetails(input.objectID),
          });
        },
      },
    },
  });
  ```
</ParamField>

<ParamField body="context" type="object | function">
  Extra context to send with each user message (for example, the current page or selected locale).
  The widget sends this context with every message, but doesn't show it in the chat UI.

  `context` can be a static object or a function that returns an object at send time.
  The widget attaches it to the latest user message as `metadata.turnContext`, following the Agent Studio [per-turn context](/doc/guides/algolia-ai/agent-studio/how-to/turn-context) contract.
  The context never appears as a chat bubble.

  The context must be a flat object that maps strings to strings (up to 32 keys, 4,096 bytes total).
  Agent Studio validates the payload and rejects malformed contexts.
  For details, see [Per-turn context](/doc/guides/algolia-ai/agent-studio/how-to/turn-context).

  <Warning>
    The widget sends `context` to the agent in plain text. Don't put secrets, access tokens, or personally identifiable information you don't intend to share with the model in this field.
  </Warning>

  <CodeGroup>
    ```js Static object theme={"system"}
    chat({
      // ...
      context: {
        locale: 'en',
        currentPage: '/products',
      },
    });
    ```

    ```js Function theme={"system"}
    chat({
      // ...
      context: () => ({
        locale: navigator.language,
        currentPage: window.location.pathname,
      }),
    });
    ```
  </CodeGroup>
</ParamField>

<ParamField body="initialMessages" type="array">
  Messages to pre-populate the chat with when it's initialized. These messages are added without triggering an AI response.

  `initialMessages` only applies when the chat has no existing messages. When `resume` is enabled, `initialMessages` is ignored.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    initialMessages: [
      {
        id: 'welcome',
        role: 'assistant',
        parts: [{ type: 'text', text: 'Hi! How can I help you today?' }],
      },
    ],
  });
  ```
</ParamField>

<ParamField body="initialUserMessage" type="string">
  A message to send automatically when the chat is initialized.

  `initialUserMessage` is only sent when the chat has no existing messages. It's sent after `initialMessages` are applied. When `resume` is enabled, this message isn't sent.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    initialUserMessage: 'Show me a few popular products to get started.',
  });
  ```
</ParamField>

<ParamField body="resume" type="boolean" default={false}>
  Whether to resume an ongoing chat generation stream when the widget mounts. Use this when restoring a chat session after a page reload to continue receiving an in-flight assistant response.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    resume: true,
  });
  ```
</ParamField>

<ParamField body="disableTriggerValidation" type="boolean" default={false}>
  Whether to skip the validation that requires a way to open the chat. By default, the `chat` widget logs a development warning unless the chat has an entry point: a [`chatTrigger`](/doc/api-reference/widgets/chat-trigger/js) widget, [AI mode](/doc/guides/building-search-ui/going-further/chat-customization/ai-search-experience/js) on a `searchBox` or autocomplete, or an inline layout. Set this to `true` when you open the chat programmatically and don't render any of those.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    disableTriggerValidation: true,
  });
  ```
</ParamField>

<ParamField body="onFinish" type="function">
  A callback called when the assistant response has finished streaming, including when the stream is aborted, disconnected, or fails.

  The callback receives an object with:

  * `message`: the final assistant message.
  * `messages`: the full message list including the new message.
  * `isAbort`: `true` if the stream was stopped with `stop()`.
  * `isDisconnect`: `true` if the connection was lost.
  * `isError`: `true` if the stream finished with an error.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    onFinish: ({ message, isAbort, isError }) => {
      if (isError) {
        console.error('Chat stream failed', message);
        return;
      }
      if (!isAbort) {
        analytics.track('chat_message_completed', { messageId: message.id });
      }
    },
  });
  ```
</ParamField>

<ParamField body="templates" type="object">
  The [templates](#templates) to use for the widget.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      // ...
    },
  });
  ```
</ParamField>

<ParamField body="cssClasses" type="object">
  The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js#style-your-widgets):

  * `root`. The root element of the widget.
  * `container`. The container element.
  * `header`. The header section of the widget.
    * `root`. The root element.
    * `clear`. The clear button.
    * `close`. The close button.
    * `maximize`. The maximize button.
    * `title`. The title element.
    * `titleIcon`. The title icon element.
  * `messages`. The messages section of the widget.
    * `root`. The root element.
    * `content`. The scrollable content.
    * `scroll`. The scroll container.
    * `scrollToBottom`. The scroll to bottom button.
    * `scrollToBottomHidden`. The hidden state of the scroll to bottom button.
  * `message`. The message in the messages section.
    * `root`. The root element.
    * `container`. The message container.
    * `leading`. The leading element (e.g., avatar).
    * `content`. The content element.
    * `message`. The message text element.
    * `actions`. The action buttons container.
    * `footer`. The footer element.
  * `prompt`. The prompt section of the widget.
    * `root`. The root element.
    * `actions`. The actions container.
    * `body`. The body element.
    * `footer`. The footer element.
    * `header`. The header element.
    * `submit`. The submit button.
    * `textarea`. The textarea element.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    cssClasses: {
      root: 'MyCustomChat',
      container: 'MyCustomChatContainer MyCustomChatContainer--subclass',
      header: {
        root: 'MyCustomChatHeader',
        title: ['MyCustomChatHeaderTitle', 'MyCustomChatHeaderTitle--subclass'],
        // ...
      },
      // ...
    },
  });
  ```
</ParamField>

## Templates

You can customize parts of a widget’s UI using the Templates API.

Each template includes an `html` function,
which you can use as a [tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates).
This function safely renders templates as HTML strings and works directly in the browser—no build step required.
For details, see [Templating your UI](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js/#templating-your-ui).

<Note>
  The `html` function is available in InstantSearch.js version 4.46.0 or later.
</Note>

<ParamField body="layout" type="function">
  A template to customize the overall layout of the chat widget. Use `instantsearch.templates.chatInlineLayout()` for an inline (non-overlay) layout, or provide a custom function.

  ```js JavaScript icon=code theme={"system"}
  import instantsearch from 'instantsearch.js';

  chat({
    // ...
    templates: {
      layout: instantsearch.templates.chatInlineLayout(),
    },
  });
  ```
</ParamField>

<ParamField body="item" type="string | function">
  The template to use for each result. This template receives an object containing a single record. You can use [Algolia's highlighting feature](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js#highlight-and-snippet-your-search-results) with the [`highlight`](/doc/api-reference/widgets/highlight/js) function, directly from the [template system](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js#templating-your-ui).

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      item(hit, { html, components }) {
        return html`
          <h2>${components.Highlight({ attribute: 'name', hit })}</h2>
          <p>${hit.description}</p>
        `;
      },
    },
  });
  ```
</ParamField>

<ParamField body="empty" type="function">
  The template to use for the welcome screen shown before the first message, when the chat has no messages yet. Use it to display a greeting and starter prompts that send a message when clicked. It receives:

  * `sendMessage`. Sends a message to the agent. Call it with `{ text }` to submit a starter prompt as the first message.
  * `status`. The current chat status.
  * `onClose`. Dismisses the chat.
  * `setInput`. Sets the value of the prompt input without sending it.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      empty({ sendMessage }, { html }) {
        const prompts = [
          'What are your best-selling shoes?',
          'Help me find a gift under $50',
          'Show me new arrivals',
        ];

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

  To render the default greeting (heading, subheading, and an optional banner) inside your template, use the exported [`chatGreeting`](https://github.com/algolia/instantsearch/blob/master/packages/instantsearch.js/src/templates/chat-greeting/chat-greeting.tsx) template helper from `instantsearch.js/es/templates`.

  For a step-by-step walkthrough, see [Show starter prompts on the chat welcome screen](/doc/guides/building-search-ui/going-further/chat-customization/welcome-screen/js).
</ParamField>

<ParamField body="header" type="object">
  Templates to use for the header section of the widget.

  * `clearLabelText`. Accessible label for the clear button.
  * `closeIcon`. The close icon template.
  * `closeLabel`. Accessible label for the close button.
  * `maximizeIcon`. The maximize icon template. Receives a parameter containing `{ maximized: boolean }` for conditional rendering.
  * `maximizeLabelText`. Accessible label for the maximize button.
  * `minimizeIcon`. The minimize icon template.
  * `minimizeLabelText`. Accessible label for the minimize button.
  * `titleIcon`. The title icon template (defaults to sparkles).
  * `titleText`. The title text to display.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      // ...
      header: {
        maximizeIcon({ maximized }, { html }) => html`
          <span>${maximized ? '🔽' : '🔼'}</span>
        `,
        titleIcon(_, { html }) => html`<span>✨</span>`,
        titleText: 'My AI shopping assistant',
      },
    },
  })
  ```
</ParamField>

<ParamField body="messages" type="object">
  Templates to use for the messages section of the widget.

  * `copyToClipboardLabelText`. Accessible label for the copy to clipboard action.
  * `error`. Custom template when there is an error generating a response. By default, the widget shows a generic message ("Sorry, we are not able to generate a response at the moment. Please contact support.") and a "Start a new conversation" button that clears the conversation. Guardrail violations are shown verbatim instead of the generic message. The template receives:
    * `errorMessage`. The raw error message from the API or transport layer.
    * `onNewConversation`. Callback that clears the conversation and starts a new one. Use it to render a "Start a new conversation" action for guardrail-style errors where retrying fails again.
  * `regenerateLabelText`. Accessible label for the regenerate action.
  * `scrollToBottomLabelText`. Accessible label for the scroll to bottom button.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      // ...
      messages: {
        error(_, { html }) => html`<span>Couldn't load messages.</span>`,
        // ...
      },
    },
  });
  ```
</ParamField>

<ParamField body="loader" type="function">
  A template to customize the loader shown while waiting for an assistant response.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      // ...
      loader(_, { html }) => html`<span>Thinking...</span>`,
    },
  });
  ```
</ParamField>

<ParamField body="loaderText" type="string">
  Text to display in the default loader.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      // ...
      loaderText: 'Thinking...',
    },
  });
  ```
</ParamField>

<ParamField body="message" type="object">
  Templates to use for an individual message in the messages section of the widget.

  * `messageLabelText`. Accessible label for the message.
  * `actionsLabelText`. Accessible label for the actions container.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      // ...
      message: {
        messageLabelText: 'Chat message',
        actionsLabelText: 'Message actions',
      },
    },
  });
  ```
</ParamField>

<ParamField body="assistantMessage" type="object">
  Templates to use for messages that come from the chat assistant.

  * `leading`. The leading element (e.g., avatar).
  * `footer`. The footer element of the message.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      // ...
      assistantMessage: {
        leading(_, { html }) => html`<img src="assistant-avatar.png" alt="Assistant avatar" />`,
        footer(_, { html }) => html`<span>Sent by AI Assistant</span>`,
      },
    },
  });
  ```
</ParamField>

<ParamField body="userMessage" type="object">
  Templates to use for messages that come from the user.

  * `leading`. The leading element (e.g., avatar).
  * `footer`. The footer element of the message.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      // ...
      userMessage: {
        leading(_, { html }) => html`<img src="user-avatar.png" alt="User avatar" />`,
        footer(_, { html }) => html`<span>Sent by You</span>`,
      },
    },
  });
  ```
</ParamField>

<ParamField body="prompt" type="object">
  Templates to use for the prompt section of the widget.

  * `disclaimerText`. Disclaimer text shown in the prompt footer.
  * `emptyMessageTooltipText`. Tooltip for the submit button when message is empty.
  * `footer`. Custom footer template.
  * `header`. Custom header template.
  * `sendMessageTooltipText`. Tooltip for the send button.
  * `stopResponseTooltipText`. Tooltip for the stop button.
  * `textareaLabelText`. Accessible label for the textarea.
  * `textareaPlaceholderText`. Placeholder text for the textarea.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      // ...
      prompt: {
        header(_, { html }) => html`<span>Ask me anything</span>`,
        footer(_, { html }) => html`
          <a href="https://example.com/privacy-policy">
            Privacy policy
          </a>
        `,
        // ...
      },
    },
  });
  ```
</ParamField>

<ParamField body="suggestions" type="string | function">
  The template to use for prompt suggestions. This template receives an object containing the list of suggestions and a `onSuggestionClick` function to call when the suggestion is clicked.

  ```js JavaScript icon=code theme={"system"}
  chat({
    // ...
    templates: {
      // ...
      suggestions({ suggestions, onSuggestionClick }, { html }) {
        return html`
          <ul>
            ${suggestions.map(
              (suggestion) =>
                html`<li>
                  <button onClick=${() => onSuggestionClick(suggestion)}>
                    ${suggestion}
                  </button>
                </li>`,
            )}
          </ul>
        `;
      },
    },
  });
  ```
</ParamField>

<Note>
  To customize the button that opens the chat, use the [`chatTrigger`](/doc/api-reference/widgets/chat-trigger/js) widget's `icon` template instead.
</Note>

## HTML output

```html HTML icon=code-xml expandable theme={"system"}
<div class="ais-Chat">
  <div class="ais-Chat-container">
    <div class="ais-ChatHeader">
      <span class="ais-ChatHeader-title">
        <span class="ais-ChatHeader-titleIcon"></span>
      </span>
      <div class="ais-ChatHeader-actions">
        <button class="ais-ChatHeader-clear"></button>
        <button class="ais-ChatHeader-maximize"></button>
        <button class="ais-ChatHeader-close" title="Close chat"></button>
      </div>
    </div>
    <div class="ais-ChatMessages">
      <div class="ais-ChatMessages-scroll ais-Scrollbar">
        <div class="ais-ChatMessages-content">...</div>
      </div>
      <button
        class="ais-ChatMessages-scrollToBottom ais-ChatMessages-scrollToBottom--hidden"
      ></button>
    </div>
    <form class="ais-ChatPrompt">
      <div class="ais-ChatPrompt-body">
        <textarea class="ais-ChatPrompt-textarea ais-Scrollbar"></textarea>
        <div class="ais-ChatPrompt-actions">
          <button class="ais-ChatPrompt-submit"></button>
        </div>
      </div>
      <div class="ais-ChatPrompt-footer">
        <div class="ais-ChatPrompt-disclaimer"></div>
      </div>
    </form>
  </div>
</div>
```

## Streaming and resumption

Assistant responses stream over [Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events).
The chat widget exposes the streaming lifecycle through its connector render state if you want to drive a custom UI.

### Status values

The render state exposes `status`, which can be one of:

* `'ready'`. The chat is idle and ready to accept a new message.
* `'submitted'`. A user message was submitted and the assistant hasn't started responding yet.
* `'streaming'`. The assistant is streaming a response.
* `'error'`. The last response finished with an error. Call `clearError()` before sending a new message.

Each message part also carries a `state` of `'streaming'` or `'done'` while the response streams.

### Stop and resume

The render state exposes two methods:

* `stop()`. Aborts the current streaming response. The `onFinish` callback runs with `isAbort: true`.
* `resumeStream()`. Reconnects to an in-flight stream. Call this on mount, or pass [`resume: true`](#param-resume) to do it automatically.

To customize the stop behavior with `connectChat`, read `status` and `stop` from the render options:

```js JavaScript icon=code theme={"system"}
const renderChat = (renderOptions, isFirstRender) => {
  const { status, stop } = renderOptions;

  if (isFirstRender) {
    const button = document.createElement('button');
    button.textContent = 'Stop';
    button.addEventListener('click', () => stop());
    document.querySelector('#chat').appendChild(button);
  }

  document.querySelector('#chat button').hidden = status !== 'streaming';
};
```

To resume an ongoing stream after a reload, set [`resume: true`](#param-resume) on the widget, or call `resumeStream()` from a custom render function.