feat(chat): add Chat + ChatTrigger widgets to Vue (phase 1) by Haroenv · Pull Request #7130 · algolia/instantsearch

Haroenv · 2026-07-22T11:23:03Z

Stacked on #7127 (base = feat/vue-related-products) — it reuses that PR's hook-based infra + AisCarousel.

What

Ports the Chat and ChatTrigger widgets to vue-instantsearch — the last major widget missing from Vue. It reuses the createHooksStore + renderReactCompat infrastructure and AisCarousel from the recommend port, and consumes the same framework-agnostic instantsearch.js chat runtime (connectChat/connectChatTrigger, ai-lite) the React/JS widgets use — no new runtime deps.

Infra

memo on the hooks runtime (identity passthrough — see follow-ups).
Function-ref support in the react-compat adapter (Vue 2 vnode hooks / Vue 3 function refs), for ChatPrompt's callback ref.
AisCarousel gains headerComponent/showNavigation/icon props for the chat tools.

Widgets

AisChat — wraps connectChat, renders the shared createChatComponent with a Vue pragma (createElement/Fragment/memo/useState), drives streaming autoscroll via createStickToBottom with the Vue hooks, and maps the connector render state to the Chat props.
AisChatTrigger — wraps connectChatTrigger (.ais-ChatToggleButton).
Vue SearchIndexTool + DisplayResultsTool wrappers render results in AisCarousel; createDefaultTools maps the six tool types.

Test plan

New component tests (components/__tests__/Chat.js): open-via-trigger, prompt submit → sendMessage, pre-seeded message rendering, and the search-tool carousel. Green on Vue 2 and Vue 3.
Exports-validation test covers AisChat/AisChatTrigger.
Full vue-instantsearch suite green on both versions; oxlint + prettier clean; Vue bundlesize thresholds bumped (Chat pulls in the chat UI + markdown-to-jsx, ~+30 kB UMD).

Scope / follow-ups (phase 2)

Shared common suite stays skipped. Its vue widgetParams variant is Record<string, never> and the tests drive a test-owned chat instance that only reaches the JS/React widgets. Enabling it for Vue needs that variant extended to carry a chat instance + options — a change to the shared tests/common/widgets/chat/* files. Component tests cover the core behavior in the meantime.
Streaming memoization: memo is an identity passthrough, so completed messages re-render on each streaming delta (correct output, not yet optimized). A real per-key memo is deferred.
connectChat emits a runtime "Chat is not yet stable" warning — the API is explicitly unstable upstream.

Draft, stacked.

🤖 Generated with Claude Code

Ports the Chat and ChatTrigger widgets to vue-instantsearch, reusing the hook-based UI infrastructure (createHooksStore + renderReactCompat) and the Carousel from the recommend port. Infra: - `memo` on the hooks runtime (identity passthrough; the streaming-perf memo is a follow-up). - Function-ref support in the react-compat adapter (Vue 2 vnode hooks + Vue 3 function refs), for ChatPrompt's callback ref. - Extend AisCarousel with `headerComponent`/`showNavigation`/icon props for the chat tools. Widgets: - `AisChat` wraps connectChat, renders the shared Chat component with a Vue pragma (createElement/Fragment/memo/useState), drives streaming autoscroll via `createStickToBottom` with the Vue hooks, and maps the connector render state to the Chat props (header/messages/prompt/suggestions). - `AisChatTrigger` wraps connectChatTrigger (the `.ais-ChatToggleButton`). - Vue SearchIndexTool + DisplayResultsTool wrappers render results in `AisCarousel`; `createDefaultTools` maps the six tool types. Tests: component tests cover open-via-trigger, prompt submit -> sendMessage, message rendering, and the carousel tool. The shared common suite stays skipped pending an extension of its `vue` widgetParams variant (which must carry a `chat` instance + options). Validated on Vue 2 and Vue 3. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

codacy-production · 2026-07-22T11:24:42Z

Not up to standards ⛔

🔴 Issues 1 critical

Alerts:

⚠ 1 issue (≤ 0 issues of at least high severity)

Results:
1 new issue

Category Results

Security 1 critical

View in Codacy

🟢 Metrics 77 complexity

Metric Results

Complexity 77

View in Codacy

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

pkg-pr-new · 2026-07-22T11:26:52Z

More templates

algoliasearch-helper

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

instantsearch-ui-components

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

instantsearch.css

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

instantsearch.js

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

react-instantsearch

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

react-instantsearch-core

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

react-instantsearch-nextjs

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

react-instantsearch-router-nextjs

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

vue-instantsearch

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

commit: c1c923c

Copilot

Pull request overview

Ports the Chat and ChatTrigger widgets to vue-instantsearch, leveraging the existing Vue hook-runtime + react-compat infrastructure to render shared instantsearch-ui-components chat UI, and adds Vue-side tool renderers that reuse AisCarousel.

Changes:

Export and implement AisChat and AisChatTrigger in Vue, wiring them to connectChat / connectChatTrigger.
Extend Vue react-compat + hooks runtime to support callback refs and a memo hook (identity passthrough for now).
Add Vue chat tool layout components (SearchIndex/Recommend carousel + DisplayResults) and component-level tests; adjust bundlesize thresholds.

Reviewed changes

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

Show a summary per file

File	Description
packages/vue-instantsearch/src/widgets.js	Exposes `AisChat` / `AisChatTrigger` from the public Vue entrypoints.
packages/vue-instantsearch/src/util/vue-compat/index-vue3.js	Adds Vue 3 support for callback refs and mutable refs via `toVueRef`.
packages/vue-instantsearch/src/util/vue-compat/index-vue2.js	Adds Vue 2 support for callback refs via vnode lifecycle hooks.
packages/vue-instantsearch/src/util/hooks.js	Adds `memo` to the hooks runtime (identity passthrough).
packages/vue-instantsearch/src/components/ChatTrigger.js	Implements the Vue `AisChatTrigger` wrapper around the shared ChatToggleButton UI.
packages/vue-instantsearch/src/components/chat/tools/SearchIndexTool.js	Adds Vue carousel-based tool layout for search/recommend tool messages.
packages/vue-instantsearch/src/components/chat/tools/index.js	Defines Vue `createDefaultTools` mapping tool types to tool implementations.
packages/vue-instantsearch/src/components/chat/tools/DisplayResultsTool.js	Adds Vue layout for display-results tool messages (grouped carousels).
packages/vue-instantsearch/src/components/Chat.js	Implements the Vue `AisChat` widget wrapper (hooks-driven UI + stick-to-bottom).
packages/vue-instantsearch/src/components/Carousel.js	Extends Vue `AisCarousel` to accept header/navigation/icon overrides needed by chat tools.
packages/vue-instantsearch/src/components/tests/Chat.js	Adds component tests covering open-via-trigger, prompt submit, seeded messages, carousel rendering.
packages/vue-instantsearch/src/tests/index.js	Updates export validation and minimal-props mounting for new widgets.
packages/vue-instantsearch/src/tests/common-widgets.test.js	Adds Vue wiring for chat in common widgets harness while keeping the shared suite skipped.
bundlesize.config.json	Raises Vue bundlesize thresholds to account for chat UI additions.

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

Haroenv · 2026-07-22T14:36:02Z

+    return h(ChatToggleButton, {
+      open: this.state.open,
+      onClick: () => this.state.toggleOpen(),
+      classNames: rootClassName ? { root: rootClassName } : undefined,
+    });


Done in c1c923c — passing the (connector-bound) toggleOpen directly.

— via Claude

Haroenv · 2026-07-22T14:36:03Z

+                    if (
+                      getSearchPageURL &&
+                      new URL(getSearchPageURL(params)).pathname !==
+                        window.location.pathname
+                    ) {
+                      window.location.href = getSearchPageURL(params);
+                    }


Done in c1c923c — getSearchPageURL(params) is now computed once and reused.

— via Claude

- SearchIndexTool: compute getSearchPageURL(params) once instead of twice. - ChatTrigger: pass the bound toggleOpen handler directly. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Haroenv · 2026-07-22T14:36:32Z

CI notes

Copilot (2 comments): addressed in c1c923c (compute getSearchPageURL once; pass toggleOpen directly).
Codacy flags SearchIndexTool.js — window.location.href = getSearchPageURL(params) as "user-controlled input controlling window location". This is a false positive: getSearchPageURL is an app-developer prop (not end-user input), and this is a faithful port of react-instantsearch's shipped SearchIndexTool ("View all" navigation). Happy to add a Codacy suppression if you'd prefer the check green.

🤖 Generated with Claude Code

Haroenv requested a review from Copilot July 22, 2026 11:27

Copilot started reviewing on behalf of Haroenv July 22, 2026 11:27 View session

Copilot AI reviewed Jul 22, 2026

View reviewed changes

Haroenv mentioned this pull request Jul 22, 2026

feat(autocomplete): add rich Autocomplete widget to Vue (phase 1) #7131

Draft

refactor(chat): address Copilot review comments

c1c923c

- SearchIndexTool: compute getSearchPageURL(params) once instead of twice. - ChatTrigger: pass the bound toggleOpen handler directly. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(chat): add Chat + ChatTrigger widgets to Vue (phase 1) - #7130

feat(chat): add Chat + ChatTrigger widgets to Vue (phase 1)#7130
Haroenv wants to merge 2 commits into
feat/vue-related-productsfrom
feat/vue-chat

Haroenv commented Jul 22, 2026

Uh oh!

codacy-production Bot commented Jul 22, 2026

Uh oh!

pkg-pr-new Bot commented Jul 22, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Haroenv Jul 22, 2026

Uh oh!

Haroenv Jul 22, 2026

Uh oh!

Haroenv commented Jul 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Haroenv commented Jul 22, 2026

What

Infra

Widgets

Test plan

Scope / follow-ups (phase 2)

Uh oh!

codacy-production Bot commented Jul 22, 2026

Not up to standards ⛔

Uh oh!

pkg-pr-new Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Haroenv Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

Haroenv Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

Haroenv commented Jul 22, 2026

CI notes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pkg-pr-new Bot commented Jul 22, 2026 •

edited

Loading