feat(chat): add greeting screen component

[shaejaz]

FX-3766

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
  {...}
  emptyComponent={({ 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]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 4 complexity · 7 duplication

Metric	Results
Complexity	4
Duplication	7

View in Codacy

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

[pkg-pr-new]

More templates

• example-instantsearch-getting-started
• example-react-instantsearch-getting-started
• example-react-instantsearch-next-app-dir-example
• example-react-instantsearch-next-routing-example
• example-vue-instantsearch-getting-started

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: 8dca27a

[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.

[FabienMotte]

Should we update an example to demo emptyComponent with the ChatGreeting component?

[Copilot]

Pull request overview

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

---

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