refactor(chat): move search index tool component to ui-components#6874
refactor(chat): move search index tool component to ui-components#6874shaejaz wants to merge 33 commits into
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit d34ff81:
|
|
this increases bundlesize, but should a deduplication not reduce bundlesize @shaejaz ? |
Yes, I'm not sure what the cause is. I thought it could due to the unnecessary code but it seems like it increased even more after that change :/ Maybe it's how the ui-components is bundled into the js and react packages which causes it to increase? |
# Conflicts: # bundlesize.config.json # packages/instantsearch.js/src/widgets/chat/chat.tsx # packages/react-instantsearch/src/widgets/chat/tools/SearchIndexTool.tsx
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 35 |
TIP This summary will be updated as you push new changes.
More templates
algoliasearch-helper
instantsearch-ui-components
instantsearch.css
instantsearch.js
react-instantsearch
react-instantsearch-core
react-instantsearch-nextjs
react-instantsearch-router-nextjs
vue-instantsearch
commit: |
There was a problem hiding this comment.
Pull request overview
This PR centralizes the chat search-index tool layout into instantsearch-ui-components so both the React and InstantSearch.js (Preact) implementations can reuse the same UI/component logic (similar to the Autocomplete component approach), reducing duplicated layout code.
Changes:
- Refactors React InstantSearch chat search-index tool to delegate rendering to a new shared
createSearchIndexToolComponent. - Adds a new InstantSearch.js (Preact)
search-index-tool.tsxthat reuses the shared UI component. - Introduces the shared chat tool UI component in
instantsearch-ui-componentsand exports it, plus a small Carousel type refactor.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react-instantsearch/src/widgets/chat/tools/SearchIndexTool.tsx | Switches to using createSearchIndexToolComponent instead of local layout logic. |
| packages/instantsearch.js/src/widgets/chat/search-index-tool.tsx | New Preact tool wrapper delegating UI to shared component. |
| packages/instantsearch.js/src/widgets/chat/chat.tsx | Removes inline carousel tool implementation and imports the new wrapper. |
| packages/instantsearch-ui-components/src/components/index.ts | Exports the new shared chat tool component. |
| packages/instantsearch-ui-components/src/components/chat/tools/SearchIndexTool.tsx | Adds shared SearchIndexTool UI component implementation. |
| packages/instantsearch-ui-components/src/components/Carousel.tsx | Extracts header prop type into HeaderComponentProps and reuses it. |
| bundlesize.config.json | Updates bundle size thresholds to match new output. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| nextButtonRef: useRef(null), | ||
| previousButtonRef: useRef(null), | ||
| carouselIdRef: useRef(generateCarouselId()), | ||
| canScrollLeft, |
There was a problem hiding this comment.
generateCarouselId() is executed on every render because it’s passed directly to useRef(...). Even though the ref keeps the initial value, this still increments lastCarouselId each render and can produce gaps/extra work. Consider lazily initializing the ID (e.g., initialize the ref to an empty value and set it once, or compute the ID with useMemo and pass that into useRef).
# Conflicts: # bundlesize.config.json # packages/instantsearch.js/src/widgets/chat/chat.tsx # packages/react-instantsearch/src/widgets/chat/tools/SearchIndexTool.tsx
This PR moves the chat search tool's default component definition to the ui-components. This prevents repeating layout logic for both react and js versions of component. The approach is similar to how it is done for the new Autocomplete components.