AskAI: `sidepanel-js: retrieval badge renders "Searched for '' found N results" — user's submitted query is lost between submission and display`
- Dominant language
- TypeScript
- Stars
- 4.4k
- Forks
- 439
- Avg merge
- 14h 32m
- Merged PRs (30d)
- 19
Description
## Description
When a user submits a real query, the retrieval-result badge that reads `Searched for "" found N results` frequently renders with empty quotes instead of the submitted text, producing `Searched for "" found N results`. The retrieval itself works — the hit count is correct and the underlying results are returned — but the query text is not displayed in the badge. Affects customer and Algolia implementations equally.
## Steps to reproduce
1. Mount `@docsearch/sidepanel-js` with `agentStudio: true`
2. Open the panel and submit a normal question, e.g. "help me set up workato identity"
3. Observe the retrieval badge that appears above the assistant's response
**Live reproduction:**
Just go to docs.algolia.com , press command/ctrl I to open AskAI, search for anything and you will see `Searched for "" found N results`
## Expected behavior
Badge reads `Searched for "help me set up workato identity" found 12 results` (or equivalent), with the submitted query rendered inside the quotes.
**Actual**
Badge reads `Searched for "" found 12 results` — the results count is populated correctly, but the query text is empty. The user's submitted query is present in the conversation (the assistant answers it correctly), so the loss is between the retrieval tool call's result and the badge's render.
**Root cause (partial)**
From the compiled JSX in `sidepanel-js@4.7.0` (identical in `4.6.2`), the `output-available` render branch of the tool-call component reads the query from the tool state and renders it with a `|| ""` fallback:
```js
var c = "tool-searchIndex" === t.type ? t.output.query : t.input.query;
// ...
It.createElement("span", null,
i, " ", // toolCallResultText → "Searched for"
r
? It.createElement("span", { role: "button", ... },
" ", '"', c || "", '"') // renders "" when c is falsy
: It.createElement("span", { className: "..." },
' "', c || "", '"'),
" ", "found ", l, " results"
)
```
The user's query is submitted correctly (the assistant answers it, and the hit count is populated), but by the time this render runs, `c` is falsy — either `t.output.query` isn't being populated by the retrieval tool call, or the tool type isn't `tool-searchIndex` and the fallback branch (`t.input.query`) is also empty. The `|| ""` masks the underlying state issue and produces the empty-quotes render.
**Suggested fix**
Two-part:
1. Investigate where `t.output.query` (or `t.input.query`, depending on the tool call type used by Agent Studio) is being lost between the user's submission and this render — the value should always be populated when a badge appears.
2. As a defensive backstop, gate the quoted-query span behind a truthiness check so any future state issue doesn't render empty quotes:
```js
c && (r
? It.createElement("span", { role: "button", ... }, ' "', c, '"')
: It.createElement("span", { className: "..." }, ' "', c, '"'))
```
## Environment
- OS: macOS
- Browser: Chrome, Chrome Incognito
- DocSearch version: - `@docsearch/sidepanel-js`: `4.7.0` (reproduced on `4.6.2` as well)
Contributor guide
Research direction
Use the docs.algolia.com reproduction first, then inspect the output-available branch of the tool-call component in the compiled JSX for sidepanel-js@4.7.0. Trace t.output.query and t.input.query from the Agent Studio submission; done means the badge displays the submitted query while retaining the correct result count and does not render empty quotes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, search
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100