feat(chat): add tool input streaming support and loader in tool layout component by Haroenv · Pull Request #6947 · algolia/instantsearch

Haroenv · 2026-03-31T08:30:47Z

This PR updates the loading logic to be able to stream tool input deltas. This allows client side tools that receive a large amount of streamed input data to be able to show it be streamed on the browser similar to text deltas (via JSON repairing).

You can opt out of showing the default loader with a flag (per tool):

<Chat
  {...}
  tools={{
    tool1: {
      ...,
      showLoaderDuringStreaming: false, // true by default
    }
  }}
/>

Also adds a loader component as props to a client side tool's layout component. This allows users to render the default or custom loaders based on their own logic. The API for it is:

<Chat
  {...}
  tools={{
    tool1: {
      layoutComponent: ({ loaderComponent }) => (
        <>{loaderComponent()}</>
      )
    }
  }}
/>

chat({
  ...
  tools: {
    tool1: {
      templates: {
        layout: ({ loader }, { html }) => html`${loader()}`
      }
    }
  }
})

pkg-pr-new · 2026-03-31T08:34:30Z

More templates

algoliasearch-helper

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

instantsearch-ui-components

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

instantsearch.css

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

instantsearch.js

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

react-instantsearch

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

react-instantsearch-core

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

react-instantsearch-nextjs

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

react-instantsearch-router-nextjs

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

vue-instantsearch

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

commit: 60788da

codacy-production · 2026-04-02T09:31:59Z

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 29 complexity · 0 duplication

Metric Results

Complexity 29

Duplication 0

View in Codacy

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

Copilot

Pull request overview

This PR enhances the chat widget’s streaming behavior by supporting streamed tool input deltas (with partial JSON “repair” parsing) and by exposing a loader component to client-side tool layouts so tools can render default/custom loaders themselves.

Changes:

Implement tool input delta streaming in AbstractChat, accumulating rawInput and attempting to parse partial JSON into input during streaming.
Update chat UI loader rules to avoid showing the global message loader while a tool is actively rendering (e.g., input-streaming / output-available), and add/adjust tests accordingly.
Add loaderComponent plumbing so tool layout components/templates can render the message loader within tool UI.

Reviewed changes

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

Show a summary per file

File	Description
tests/common/widgets/chat/options.tsx	Updates loader visibility expectations during streaming; adds coverage for tool layout loader injection.
packages/react-instantsearch/src/widgets/chat/tools/SearchIndexTool.tsx	Renders a tool-specific loading state when the tool message is `input-streaming`; expands input typing.
packages/react-instantsearch/src/widgets/chat/tools/tests/SearchIndexTool.test.tsx	Updates tests to pass the new required `loaderComponent` prop.
packages/instantsearch.js/src/widgets/chat/chat.tsx	Adds template `loader()` binding for tool layout templates; introduces `ClientSideToolTemplateData`.
packages/instantsearch.js/src/lib/ai-lite/types.ts	Extends tool part types with `rawInput` and renames tool input delta field to `inputTextDelta`.
packages/instantsearch.js/src/lib/ai-lite/abstract-chat.ts	Core implementation: accumulate tool raw input, parse/repair partial JSON on deltas, update tool parts live.
packages/instantsearch.js/src/connectors/chat/tests/connectChat-test.ts	Adds test ensuring tool input can stream via `tool-input-delta` even without `tool-input-available`.
packages/instantsearch-ui-components/src/lib/utils/chat.ts	Adds tool-part helpers (`isPartTool`, `isToolPartActivelyRendering`) to support new loader behavior.
packages/instantsearch-ui-components/src/components/chat/types.ts	Adds `rawInput` to UI tool parts and adds required `loaderComponent` to tool component props.
packages/instantsearch-ui-components/src/components/chat/ChatMessages.tsx	Adjusts loader display logic to treat actively-rendering tools differently; passes loader down to messages.
packages/instantsearch-ui-components/src/components/chat/ChatMessage.tsx	Threads `loaderComponent` into tool layout components; makes it a required prop on `ChatMessageProps`.
packages/instantsearch-ui-components/src/components/chat/tests/ChatMessage.test.tsx	Updates tests for the new required `loaderComponent` prop.
examples/react/getting-started/src/App.tsx	Adds an event-stream wrapper to demonstrate delayed/progressive tool output streaming in the example app.
bundlesize.config.json	Updates bundle size threshold to reflect added code.

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

Copilot · 2026-04-07T13:56:12Z

packages/instantsearch.js/src/lib/ai-lite/abstract-chat.ts

+
+const parseToolInputDelta = (
+  accumulatedRawInput: string,
+  fallbackInput: unknown
+): unknown => {
+  const normalized = accumulatedRawInput.trim();
+  if (!normalized) {
+    return fallbackInput;
+  }
+
+  const directParsed = tryParseJson(normalized);
+  if (directParsed !== undefined) {
+    return directParsed;
+  }
+
+  const repairedParsed = tryParseJson(repairPartialJson(normalized));
+  if (repairedParsed !== undefined) {


parseToolInputDelta() attempts JSON.parse() on the full accumulated raw input (and then runs repairPartialJson() which linearly scans the entire string) on every tool-input-delta. For large streamed tool inputs split into many small deltas, this becomes O(n²) work and can noticeably slow down the UI thread. Consider reducing parse frequency (e.g., only after N chars / debounce), keeping incremental repair state (stack/string state) instead of rescanning from the start, or using a streaming/partial JSON parser to avoid repeated full-string passes.

Suggested change

const parseToolInputDelta = (

accumulatedRawInput: string,

fallbackInput: unknown

): unknown => {

const normalized = accumulatedRawInput.trim();

if (!normalized) {

return fallbackInput;

}

const directParsed = tryParseJson(normalized);

if (directParsed !== undefined) {

return directParsed;

}

const repairedParsed = tryParseJson(repairPartialJson(normalized));

if (repairedParsed !== undefined) {

const TOOL_INPUT_PARSE_MIN_DELTA = 128;

const TOOL_INPUT_PARSE_BOUNDARY_CHARS = new Set([

'}',

']',

'"',

',',

'\n',

'\r',

'\t',

' ',

]);

const toolInputParseAttemptState = new Map<

unknown,

{ lastAttemptedInput: string; lastAttemptedLength: number }

>();

const shouldAttemptToolInputParse = (

normalized: string,

fallbackInput: unknown

): boolean => {

const previousAttempt = toolInputParseAttemptState.get(fallbackInput);

if (previousAttempt === undefined) {

return true;

}

if (!normalized.startsWith(previousAttempt.lastAttemptedInput)) {

return true;

}

const growthSinceLastAttempt =

normalized.length - previousAttempt.lastAttemptedLength;

if (growthSinceLastAttempt >= TOOL_INPUT_PARSE_MIN_DELTA) {

return true;

}

const lastChar = normalized[normalized.length - 1];

return TOOL_INPUT_PARSE_BOUNDARY_CHARS.has(lastChar);

};

const parseToolInputDelta = (

accumulatedRawInput: string,

fallbackInput: unknown

): unknown => {

const normalized = accumulatedRawInput.trim();

if (!normalized) {

toolInputParseAttemptState.delete(fallbackInput);

return fallbackInput;

}

if (!shouldAttemptToolInputParse(normalized, fallbackInput)) {

return fallbackInput;

}

toolInputParseAttemptState.set(fallbackInput, {

lastAttemptedInput: normalized,

lastAttemptedLength: normalized.length,

});

const directParsed = tryParseJson(normalized);

if (directParsed !== undefined) {

toolInputParseAttemptState.delete(fallbackInput);

return directParsed;

}

const repairedParsed = tryParseJson(repairPartialJson(normalized));

if (repairedParsed !== undefined) {

toolInputParseAttemptState.delete(fallbackInput);

haven't really ran into performance issues yet with the current approach, but something to keep in mind especially for large JSON inputs.

yes we can keep in mind that it's not completely optimal and we should use just a single parser

packages/instantsearch-ui-components/src/components/chat/ChatMessage.tsx

Copilot · 2026-04-07T13:56:14Z

packages/instantsearch-ui-components/src/components/chat/ChatMessage.tsx

                addToolResult={boundAddToolResult}
                applyFilters={tool.applyFilters}
-                sendEvent={tool.sendEvent || (() => {})}
+                sendEvent={tool.sendEvent || (() => { })}


Minor formatting: the fallback sendEvent handler is written as () => { } (extra space), which is inconsistent with the surrounding style and may fail formatting/lint rules. Consider normalizing it to () => {}.

Suggested change

sendEvent={tool.sendEvent || (() => { })}

sendEvent={tool.sendEvent || (() => {})}

why was this resolved @shaejaz?

Oh I thought I addressed it, will fix.
Side note: it seems like the new linting is not a 100% the same as one with eslint, I think this should have been picked up by it.

packages/react-instantsearch/src/widgets/chat/tools/SearchIndexTool.tsx

shaejaz · 2026-04-08T14:50:12Z

packages/instantsearch.js/src/lib/ai-lite/abstract-chat.ts

+
+const parseToolInputDelta = (
+  accumulatedRawInput: string,
+  fallbackInput: unknown
+): unknown => {
+  const normalized = accumulatedRawInput.trim();
+  if (!normalized) {
+    return fallbackInput;
+  }
+
+  const directParsed = tryParseJson(normalized);
+  if (directParsed !== undefined) {
+    return directParsed;
+  }
+
+  const repairedParsed = tryParseJson(repairPartialJson(normalized));
+  if (repairedParsed !== undefined) {


haven't really ran into performance issues yet with the current approach, but something to keep in mind especially for large JSON inputs.

packages/instantsearch-ui-components/src/components/chat/ChatMessage.tsx

Haroenv

instantsearch/tests/common/widgets/chat/templates.tsx

Lines 202 to 216 in a86b6f3

    
           widgetParams: { 
        
             javascript: { 
        
               ...createDefaultWidgetParams(chat), 
        
               templates: { 
        
                 messages: { 
        
                   loader: '<div class="custom-loader">Custom loader</div>', 
        
                 }, 
        
               }, 
        
             }, 
        
             react: { 
        
               ...createDefaultWidgetParams(chat), 
        
               messagesLoaderComponent: () => ( 
        
                 <div className="custom-loader">Custom loader</div> 
        
               ), 
        
             },

-> do we have two different loader options now?

Haroenv · 2026-04-10T11:51:41Z

packages/instantsearch-ui-components/src/components/chat/ChatMessage.tsx

                addToolResult={boundAddToolResult}
                applyFilters={tool.applyFilters}
-                sendEvent={tool.sendEvent || (() => {})}
+                sendEvent={tool.sendEvent || (() => { })}


why was this resolved @shaejaz?

shaejaz · 2026-04-10T15:13:14Z

-> do we have two different loader options now?

It's the same messagesLoaderComponent if the user wants to customize it. The new loaderComponent prop in the tool layout is in case they want to use the default loader component in the tool rendering.

Actually we can replace that with a importable loader component like how it's being done for the chat layouts. It would keep it consistent. wdyt?

WIP: streaming tools

43e9d36

fix delta key

8355da7

shaejaz added 8 commits April 2, 2026 14:39

fix loader

929f2c0

update tests

80c4486

add loader state to search tool

fa6af66

add loader component prop

c09fd2e

add js template type

68bc15b

Merge branch 'master' into feat/streaming-tools

ddaf0ae

update types

d431b2f

add test

609b7dd

shaejaz changed the title ~~WIP: streaming tools~~ feat(chat): add tool input streaming support and loader in tool layout component Apr 7, 2026

shaejaz added 3 commits April 7, 2026 14:36

fix lint

2aa21f6

Merge branch 'master' into feat/streaming-tools

29b58fb

update bundlesize

82f571f

shaejaz marked this pull request as ready for review April 7, 2026 13:44

Copilot AI review requested due to automatic review settings April 7, 2026 13:44

Copilot started reviewing on behalf of shaejaz April 7, 2026 13:45 View session

revert example

7e1d9f4

Copilot AI reviewed Apr 7, 2026

View reviewed changes

shaejaz marked this pull request as draft April 7, 2026 14:25

shaejaz added 6 commits April 8, 2026 14:10

add option to show loader for input streaming

dc5a32b

Merge branch 'master' into feat/streaming-tools

a6acc0a

update bundlesize

108af75

fix indents

6cdad46

remove not needed code

08721f1

update search tool loading indicator

2098ffa

shaejaz reviewed Apr 8, 2026

View reviewed changes

shaejaz marked this pull request as ready for review April 8, 2026 14:50

Haroenv requested review from a team, FabienMotte, aymeric-giraudet and shaejaz and removed request for a team and shaejaz April 8, 2026 15:10

default input streaming to false

2d97af6

Haroenv commented Apr 9, 2026

View reviewed changes

packages/instantsearch-ui-components/src/components/chat/ChatMessage.tsx Outdated Show resolved Hide resolved

aymeric-giraudet approved these changes Apr 9, 2026

View reviewed changes

shaejaz added 6 commits April 10, 2026 01:48

move loader logic

7c91920

remove search tool loading text

aed2537

optionally skip json repair

cdea719

Merge branch 'master' into feat/streaming-tools

8a96e55

update bundlesize

e16c8c4

rename flag

60788da

shaejaz force-pushed the feat/streaming-tools branch from 30114e7 to 60788da Compare April 10, 2026 08:57

Haroenv commented Apr 10, 2026

View reviewed changes

	sendEvent={tool.sendEvent \|\| (() => { })}
	sendEvent={tool.sendEvent \|\| (() => {})}

	widgetParams: {
	javascript: {
	...createDefaultWidgetParams(chat),
	templates: {
	messages: {
	loader: '<div class="custom-loader">Custom loader</div>',
	},
	},
	},
	react: {
	...createDefaultWidgetParams(chat),
	messagesLoaderComponent: () => (
	<div className="custom-loader">Custom loader</div>
	),
	},

Conversation

Haroenv commented Mar 31, 2026 • edited by shaejaz Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

codacy-production bot commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Up to standards ✅

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

shaejaz Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Haroenv Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Haroenv Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

shaejaz Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

shaejaz Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Haroenv left a comment

Choose a reason for hiding this comment

Uh oh!

Haroenv Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

shaejaz commented Apr 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Haroenv commented Mar 31, 2026 •

edited by shaejaz

Loading

pkg-pr-new bot commented Mar 31, 2026 •

edited

Loading

codacy-production bot commented Apr 2, 2026 •

edited

Loading