babylonlabs-io / babylonlabs-io/babylonlabs.github.io
Chat widget: send page context so the bot can guide readers through the Vault Indexer Explorer
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 10
- Avg merge
- 3d 1h
- Merged PRs (30d)
- 1
Description
## Summary
The chat widget on the docs site does not tell the bot which page the reader is on. On the Vault Indexer Explorer the reader gets generic API prose instead of a guided tour of the interface in front of them.
This is the **frontend half** of the change. The backend half is tracked in the DevEx AI bot repo, and the two must ship together.
## Current behaviour
`src/components/ChatWidget.tsx` sends only this to `/api/query/stream`:
```json
{ "question": "...", "thread_uuid": "..." }
```
There is no route, no page title, and no active-section value. The bot has no way to know that the reader is standing in front of `/vault-indexer-explorer` with a live GraphQL editor on screen.
### Observed
On `/vault-indexer-explorer`, asked *"what page am I on, how do i make this vault indexer work in my dapp code?"*, the bot answered with the endpoint, the headers, the chain id, and a `fetch` example. All correct. But it never mentioned the query editor, the Run button, the numbered walkthroughs in the sidebar, the Cookbook entries, the Variables and Headers panes, or the Schema and Limits tabs — and it never said that the examples on the page already run live against the testnet endpoint.
## Proposed change
### 1. Send page context with every query
Extend the request body in `src/components/ChatWidget.tsx`:
```ts
body: JSON.stringify({
question: userMessage.content,
thread_uuid: currentSession.thread_uuid,
page_context: {
path: location.pathname, // "/vault-indexer-explorer"
title: document.title,
section: activeSection, // active sidebar entry, tab, or heading
locale: i18n.currentLocale,
},
})
```
Requirements:
- Send the **route only**. Never send query strings, hashes, editor contents, variables, headers, or anything the reader typed into the explorer. Those can hold addresses and are not needed.
- The field is optional on the backend. An older widget must keep working.
- Update the page context when the reader navigates without a reload, and when the active tab changes.
### 2. Expose the explorer's active section
`src/components/GraphQLRunner/FullExplorer.tsx` and `src/pages/vault-indexer-explorer.tsx` know which walkthrough step, Cookbook entry, or tab is selected. Surface that value so the widget can pass it as `section`. Without it the bot can say "you are on the explorer" but not "you are on step 2 of the peg-in walkthrough".
### 3. Keep the schema artifact the single source of truth
The backend should learn the schema from the artifacts this repo already generates, rather than from a hand-written copy:
- `static/schema/vault-indexer.graphql`
- `static/vault-indexer-presets.json`
- `scripts/fetch-vault-indexer-schema.mjs`
- `scripts/gen-vault-indexer-docs.mjs`
- `scripts/gen-vault-indexer-presets.mjs`
Confirm these are published at stable URLs the ingestion pipeline can fetch, and that they are regenerated on every schema change.
## Acceptance criteria
- [ ] `page_context` is sent on every query from the widget, on first load and after client-side navigation.
- [ ] No reader-entered content (query text, variables, headers, query string, hash) is ever sent.
- [ ] The explorer reports its active walkthrough step, Cookbook entry, or tab as `section`.
- [ ] The widget still works against a backend that ignores the new field.
- [ ] The schema and preset artifacts are fetchable at stable published URLs.
## Out of scope
- The skill content and the model behaviour. Those live in the bot repo.
- Any change to the vault indexer API.
## Tracking
This is one half of a two-repo change. The backend counterpart is tracked in the internal DevEx AI bot repository. Neither half delivers value alone.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reading src/components/ChatWidget.tsx, src/components/GraphQLRunner/FullExplorer.tsx, and src/pages/vault-indexer-explorer.tsx, then inspect the schema-generation scripts and static artifacts. Verify request context across client-side navigation and tab changes, confirm reader-entered values are excluded, and check that the published schema and preset URLs are stable and fetchable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100