feat(chat): add greeting screen component by shaejaz · Pull Request #6965 · algolia/instantsearch

shaejaz · 2026-04-10T12:04:12Z

This PR adds support for a greeting component/template. This allows the chat widget to show a UI when there are no messages in the Chat. It also introduces an importable ChatGreeting / chatGreeting component for a built in greeting component that can be used.

Reference example implementation for a React greeting component:

<Chat
  {...}
  messagesGreetingComponent={({ sendMessage }) => {
  const suggestions = [
    'Show me some black and white shoes',
    'What are the best sellers?',
  ];

  return (
    <div className="ais-ChatGreeting">
      <h2 className="ais-ChatGreeting-heading">How can I help you today?</h2>
      <p className="ais-ChatGreeting-subheading">
        Ask me anything about our products, and I&apos;ll do my best to assist
        you.
      </p>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '0.5rem',
          marginTop: '0.5rem',
        }}
      >
        {suggestions.map((suggestion) => (
          <button
            key={suggestion}
            onClick={() => sendMessage?.({ text: suggestion })}
            style={{
              padding: '0.5rem 0.75rem',
              border: '1px solid #e0e0e0',
              borderRadius: '0.5rem',
              background: 'white',
              cursor: 'pointer',
              textAlign: 'left',
              fontSize: '0.875rem',
            }}
          >
            {suggestion}
          </button>
        ))}
      </div>
    </div>
  );
  }}
/>

codacy-production · 2026-04-10T12:07:02Z

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 11 complexity · 3 duplication

Metric Results

Complexity 11

Duplication 3

View in Codacy

_{TIP This summary will be updated as you push new changes. Give us feedback}

shaejaz · 2026-04-10T15:35:03Z

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

    headerMaximizeIconComponent?: ChatUiProps['headerProps']['maximizeIconComponent'];
    messagesLoaderComponent?: ChatUiProps['messagesProps']['loaderComponent'];
    messagesErrorComponent?: ChatUiProps['messagesProps']['errorComponent'];
+    messagesGreetingComponent?: ChatUiProps['messagesProps']['greetingComponent'];


I've added it as messages component for now since the greeting component would have to be rendered inside the messages container.

Can be renamed if or when we rename the other messages components to remove the messages prefix (messagesLoaderComponent, messagesErrorComponent).

pkg-pr-new · 2026-04-10T15:39:36Z

More templates

algoliasearch-helper

npm i https://pkg.pr.new/algolia/instantsearch/algoliasearch-helper@6965

instantsearch-ui-components

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch-ui-components@6965

instantsearch.css

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.css@6965

instantsearch.js

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.js@6965

react-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch@6965

react-instantsearch-core

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-core@6965

react-instantsearch-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-nextjs@6965

react-instantsearch-router-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-router-nextjs@6965

vue-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/vue-instantsearch@6965

commit: a14de97

Copilot

Pull request overview

Adds a “greeting” (empty-state) surface for the Chat widget so the UI can render a custom or built-in greeting when there are no messages yet, across InstantSearch.js templates and React.

Changes:

Added a greeting template / messagesGreetingComponent hook to render a greeting when messages is empty.
Introduced built-in greeting exports: chatGreeting() (InstantSearch.js templates) and ChatGreeting (React component).
Added CSS styles and updated bundlesize thresholds; added tests covering greeting rendering behavior.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tests/common/widgets/chat/templates.tsx	Adds coverage for greeting rendering when empty vs non-empty messages.
packages/react-instantsearch/src/widgets/Chat.tsx	Wires `messagesGreetingComponent` into the React Chat widget and passes needed actions to messages props.
packages/react-instantsearch/src/components/index.ts	Re-exports the new `ChatGreeting` component.
packages/react-instantsearch/src/components/ChatGreeting.tsx	Adds React wrapper for the built-in UI greeting component.
packages/instantsearch.js/src/widgets/chat/chat.tsx	Adds greeting template support and forwards `sendMessage`/`setInput` into messages props for greeting usage.
packages/instantsearch.js/src/templates/index.ts	Exports the new `chatGreeting` template helper.
packages/instantsearch.js/src/templates/chat-greeting.tsx	Implements the built-in greeting template for InstantSearch.js (Preact).
packages/instantsearch.css/src/components/chat/_chat-greeting.scss	Adds default styling for the greeting component.
packages/instantsearch.css/src/components/chat.scss	Includes the new greeting styles in the chat stylesheet entry.
packages/instantsearch-ui-components/src/components/index.ts	Re-exports `ChatGreeting` from UI components.
packages/instantsearch-ui-components/src/components/chat/ChatMessages.tsx	Renders an optional greeting component when there are no messages; forwards `sendMessage`/`setInput`.
packages/instantsearch-ui-components/src/components/chat/ChatGreeting.tsx	Implements the base greeting UI component and translations.
bundlesize.config.json	Updates size limits to account for added functionality.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-10T15:42:56Z

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

@@ -449,6 +468,15 @@ export function createChatMessagesComponent({
              }
            }}
          >
+            {showGreeting && GreetingComponent && (
+              <GreetingComponent
+                sendMessage={sendMessage}
+                setInput={setInput}
+                status={status}
+                onClose={onClose}
+              />
+            )}


showGreeting becomes true when status === 'error' and there are no messages (showLoader is false), which will render the greeting and the error state at the same time. This looks unintended; the greeting should likely be hidden when the chat is in an error state (and possibly other non-ready states).

Copilot · 2026-04-10T15:42:56Z

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

+    return (
+      <div
+        className={cx('ais-ChatGreeting', classNames.root)}
+        {...props}
+      >
+        <h2 className={cx('ais-ChatGreeting-heading', classNames.heading)}>
+          {translations.greetingHeading}
+        </h2>


The root <div> spreads {...props} after setting className. If the caller passes className, it will override the computed ais-ChatGreeting/classNames.root classes and break default styling. Consider merging props.className into the computed class name and/or spreading props before setting className (while avoiding passing the raw className through the spread).

shaejaz added 6 commits April 10, 2026 11:25

add greeting component

e96eec7

add props

00f78dc

export greeting component from packages

c700e90

add tests

af1bb91

fix lint

f240720

fix bundlesize

7031cdb

shaejaz commented Apr 10, 2026

View reviewed changes

Merge branch 'master' into feat/chat-greeting-screen

a14de97

shaejaz marked this pull request as ready for review April 10, 2026 15:36

shaejaz requested review from a team, FabienMotte, aymeric-giraudet and Copilot and removed request for a team April 10, 2026 15:36

Copilot started reviewing on behalf of shaejaz April 10, 2026 15:36 View session

Copilot AI reviewed Apr 10, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(chat): add greeting screen component#6965

feat(chat): add greeting screen component#6965
shaejaz wants to merge 7 commits intomasterfrom
feat/chat-greeting-screen

shaejaz commented Apr 10, 2026 •

edited by atlassian bot

Loading

Uh oh!

codacy-production bot commented Apr 10, 2026 •

edited

Loading

Uh oh!

shaejaz Apr 10, 2026

Uh oh!

pkg-pr-new bot commented Apr 10, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 10, 2026

Uh oh!

Copilot AI Apr 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

shaejaz commented Apr 10, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codacy-production bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Up to standards ✅

Uh oh!

shaejaz Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new bot commented Apr 10, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

shaejaz commented Apr 10, 2026 •

edited by atlassian bot

Loading

codacy-production bot commented Apr 10, 2026 •

edited

Loading