babylonlabs-io / babylonlabs-io/babylonlabs.github.io

Chat widget: send page context so the bot can guide readers through the Vault Indexer Explorer

Open
#472 0 comments 0 reactions 0 assignees View on GitHub
ai-bot doc-site-development enhancement
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.