chat

chat({
  // ...
  agentId: '8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9',
});

chat({
  // ...
  agentId: '8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9',
  feedback: true,
});

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',
    },
  },
});

chat({
  // ...
  agentId: '8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9',
  requestOptions: {
    queryParameters: {
      cache: false,
    },
    headers: {
      'X-Algolia-Secure-User-Token': 'ALGOLIA_SECURE_USER_TOKEN',
    },
  },
});

chat({
  // ...
  getSearchPageURL: (nextUiState) => `/search?${qs.stringify(nextUiState)}`,
});

import {
  DisplayResultsToolType,
  SearchIndexToolType,
} from 'instantsearch.js/es/widgets/chat/chat';

chat({
  // ...
  tools: {
    [SearchIndexToolType]: {
      templates: {
        layout: ({ context }, { html }) => {
          const items = context.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>
          `;
        },
      },
    },
  },
});

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

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

chat({
  // ...
  initialMessages: [
    {
      id: 'welcome',
      role: 'assistant',
      parts: [{ type: 'text', text: 'Hi! How can I help you today?' }],
    },
  ],
});

chat({
  // ...
  initialUserMessage: 'Show me a few popular products to get started.',
});

chat({
  // ...
  resume: true,
});

chat({
  // ...
  disableTriggerValidation: true,
});

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

chat({
  // ...
  requiresSearch: false,
});

chat({
  // ...
  showReasoning: true,
});

chat({
  // ...
  loaderPosition: 'message-inline',
});

chat({
  // ...
  shouldShowLoader: ({ phase, defaultValue }) =>
    phase === 'tool' || defaultValue,
});

chat({
  // ...
  loaderShowDelay: 400,
});

chat({
  // ...
  loaderMinDuration: 300,
});

chat({
  // ...
  templates: {
    // ...
  },
});

chat({
  // ...
  cssClasses: {
    root: 'MyCustomChat',
    container: 'MyCustomChatContainer MyCustomChatContainer--subclass',
    header: {
      root: 'MyCustomChatHeader',
      title: ['MyCustomChatHeaderTitle', 'MyCustomChatHeaderTitle--subclass'],
      // ...
    },
    // ...
  },
});

import { chatSidePanelLayout } from 'instantsearch.js/es/templates';

chat({
  // ...
  templates: {
    layout: chatSidePanelLayout({
      parentElement: '#main-content',
    }),
  },
});

chat({
  // ...
  templates: {
    item(hit, { html, components }) {
      return html`
        <h2>${components.Highlight({ attribute: 'name', hit })}</h2>
        <p>${hit.description}</p>
      `;
    },
  },
});

chat({
  // ...
  templates: {
    empty({ context }, { 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=${() => context.sendMessage({ text: prompt })}
                >
                  ${prompt}
                </button>`,
            )}
          </div>
        </div>
      `;
    },
  },
});

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

chat({
  // ...
  templates: {
    // ...
    messages: {
      error: (_, { html }) => html`<span>Couldn't load messages.</span>`,
      // ...
    },
  },
});

chat({
  // ...
  templates: {
    // ...
    loader: (_, { html }) => html`<span>Thinking...</span>`,
  },
});

chat({
  // ...
  templates: {
    // ...
    loaderText: ({ phase }) =>
      phase === 'tool' ? 'Searching...' : 'Thinking...',
  },
});

chat({
  // ...
  templates: {
    // ...
    message: {
      messageLabelText: 'Chat message',
      actionsLabelText: 'Message actions',
      reasoningLabelText: 'Reasoning',
    },
  },
});

chat({
  // ...
  templates: {
    // ...
    assistantMessage: {
      leading: (_, { html }) => html`<img src="assistant-avatar.png" alt="Assistant avatar" />`,
      text: ({ part, status }, { html }) => html`
        <span class="MyAssistantText" data-status="${status}">${part.text}</span>
      `,
      footer: (_, { html }) => html`<span>Sent by AI Assistant</span>`,
    },
  },
});

chat({
  // ...
  templates: {
    // ...
    userMessage: {
      leading: (_, { html }) => html`<img src="user-avatar.png" alt="User avatar" />`,
      text: ({ part }, { html }) => html`<span class="MyUserText">${part.text}</span>`,
      footer: (_, { html }) => html`<span>Sent by You</span>`,
    },
  },
});

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

chat({
  // ...
  templates: {
    // ...
    suggestions({ suggestions, onSuggestionClick }, { html }) {
      return html`
        <ul>
          ${suggestions.map(
            (suggestion) =>
              html`<li>
                <button onClick=${() => onSuggestionClick(suggestion)}>
                  ${suggestion}
                </button>
              </li>`,
          )}
        </ul>
      `;
    },
  },
});