[POC] chat "instant answer" result card in the PLP hits grid

[afrencalg]

TL;DR

Standalone POC (examples/js/poc-chat-result-card/, single index.html, no build step) that injects a chat "instant answer" card directly into the hits grid, built two ways side by side: (A) reusing the existing chat widget with a compact layout template, and (B) a bespoke card on headless connectChat. Verdict: the engine is the same either way — this should become a card layout preset on the existing widget, not a new widget. Follow-up handoff to the full chat, backend-driven triggering (Rules userData), and PLP context all work with today's APIs.

What's in it

A vs B implementation toggle — A is ~30 lines of config (layout template, type: 'chatCard', persistence: false) and inherits markdown, tool carousels, suggestions, error/retry for free; B is ~200 lines of custom UI with full design freedom but re-implements everything visual. Both share connectChat for transport/streaming/tools/context.
Trigger engine — backend mode reads real Rules userData from results.userData (incl. card-position override from the rule consequence; simulated rules table as fallback since the demo index has none), plus heuristic / always / manual modes. Card shows a "why did I trigger" badge; search-as-you-type needs debounce + per-question dedupe (included).
"Continue in full chat →" — copies the card conversation into the overlay chat via setMessages() + setOpen(true).
Context A/B lab — streams the same question with and without turnContext (query, filters, top results) side by side with timings. With-context answers are clearly better grounded (e.g. with brand:Modal filtered, it correctly says Modal makes no laptops).

Findings / follow-ups

Recommend productizing as a compact card layout preset + trigger convention, shared engine with chat — no per-customer copy-paste.
Conversation ids differ between card and main chat — works because the transport is stateless, but analytics/feedback attribution needs a "transfer conversation" concept.
No new backend API needed for v1 triggering — Rules + userData suffices.

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

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

[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@7122

instantsearch-ui-components

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

instantsearch.css

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

instantsearch.js

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

react-instantsearch

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

react-instantsearch-core

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

react-instantsearch-nextjs

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

react-instantsearch-router-nextjs

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

vue-instantsearch

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

commit: 7a16859