feat(chat): add configurable reasoning panel aligned with Agent Studio

[afrencalg]

Summary

Promotes the reasoning proof-of-concept into a configurable, first-class chat feature across instantsearch-ui-components, instantsearch.js, and react-instantsearch. The reasoning UI is ported to match the Algolia dashboard
(Agent Studio) design so it reads identically across surfaces.

What's included

• New <ChatMessageReasoning> panel — a collapsible accordion built on a native <details>/<summary> (zero JS, works across Preact/React/Vue). Matches the Agent Studio ChatContextAccordion: Lucide brain icon, a static
  "Reasoning" caption that pulses while streaming, a chevron that rotates on the native [open] state, and a muted raw-text body. Collapsed by default.
• Configurable, no longer POC:
  • showReasoning (opt-in, off by default)
  • reasoningVisibility: collapsed (default) | expanded | auto | hidden
  • reasoningTranslations / translations.reasoning: injectable title and
    toggleLabel (JS templates: reasoningTitleText, reasoningToggleLabelText)
  • reasoningClassNames: per-element class overrides
  • reasoningSummarizer: overrides the live loader caption heuristic
• Loader caption — while the model thinks, the spinner shows a live
  substitute label ("Searching the catalogue…") derived from a small, dependency-free
  3-tier summarizer (server summary → tool-call inference → keyword heuristic),
  with PII redaction.
• Styling — new _chat-message-reasoning.scss (satellite/algolia/nova themes).
• Example — showReasoning enabled on the agent-backed <Chat> in the
  React getting-started example.
• Tests — unit tests for the summarizer utils and component/widget tests for
  the panel and the JS widget wiring.

Design

Ported to mirror the Agent Studio dashboard so the experience is seamless
between the dashboard and InstantSearch integrations.

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 36 complexity

Metric	Results
Complexity	36

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@7105

instantsearch-ui-components

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

instantsearch.css

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

instantsearch.js

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

react-instantsearch

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

react-instantsearch-core

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

react-instantsearch-nextjs

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

react-instantsearch-router-nextjs

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

vue-instantsearch

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

commit: 959cba4

[Copilot]

Pull request overview

Promotes the chat “reasoning” proof-of-concept into a configurable feature across instantsearch-ui-components, instantsearch.js, and react-instantsearch, including a native <details>/<summary> reasoning panel aligned with the Agent Studio design and a loader caption derived from reasoning/tool context.

Changes:

• Add a new ChatMessageReasoning panel (collapsible/visibility strategies, translations, classNames) and wire it through chat wrappers (React InstantSearch + InstantSearch.js widget + UI components).
• Introduce dependency-free reasoning summarizer utilities to compute a live loader caption (with PII redaction) and extend the loader styling/behavior to animate caption changes and show a progress hairline.
• Add unit/widget tests plus an example enabling showReasoning, and update bundlesize thresholds.

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react-instantsearch/src/widgets/Chat.tsx	Exposes showReasoning/visibility/summarizer/translations and forwards them into UI props.
packages/instantsearch.js/src/widgets/chat/chat.tsx	Adds widget params/templates for reasoning and forwards options into the UI renderer.
packages/instantsearch.js/src/widgets/chat/tests/chat.test.tsx	Verifies reasoning panel rendering defaults, enablement, and template-driven labels.
packages/instantsearch.css/src/components/chat/_chat-message-reasoning.scss	New styling for the reasoning accordion panel (Agent Studio-aligned).
packages/instantsearch.css/src/components/chat/_chat-message-loader.scss	Loader caption animation + progress hairline styling when preview is enabled.
packages/instantsearch.css/src/components/chat.scss	Includes the new reasoning stylesheet in the chat bundle.
packages/instantsearch-ui-components/src/lib/utils/reasoning.ts	New summarizer/categorizer utilities and context extraction for reasoning/tool calls.
packages/instantsearch-ui-components/src/lib/utils/index.ts	Exports the new reasoning utilities.
packages/instantsearch-ui-components/src/lib/utils/tests/reasoning-test.ts	Unit tests for categorization, tiered summarization, and context extraction.
packages/instantsearch-ui-components/src/components/index.ts	Exports ChatMessageReasoning as part of the components public surface.
packages/instantsearch-ui-components/src/components/chat/icons.tsx	Adds a BrainIcon used by the reasoning panel header.
packages/instantsearch-ui-components/src/components/chat/ChatMessages.tsx	Computes reasoningPreview for the loader and forwards reasoning options to messages.
packages/instantsearch-ui-components/src/components/chat/ChatMessageReasoning.tsx	New reasoning panel component based on native <details>/<summary>.
packages/instantsearch-ui-components/src/components/chat/ChatMessageLoader.tsx	Accepts reasoningPreview and adds animated caption + optional progress hairline.
packages/instantsearch-ui-components/src/components/chat/ChatMessage.tsx	Renders a single reasoning panel per message (anchored at first reasoning part).
packages/instantsearch-ui-components/src/components/chat/tests/ChatMessageReasoning.test.tsx	Component tests for default behavior, visibility strategies, translations, and classNames.
examples/react/getting-started/src/App.tsx	Enables showReasoning in the React getting-started example.
bundlesize.config.json	Updates bundle size ceilings to account for added functionality/styles.

---

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

[Haroenv]

so is this PR still relevant after #7139 being merged?