From 12ab4ca7eb398ec08c4df4c7d3c3caf54f007394 Mon Sep 17 00:00:00 2001 From: Vishal Rana Date: Tue, 16 Jun 2026 07:02:44 -0700 Subject: [PATCH] feat(docs): replace Ask AI launcher with a themed header pill MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Drop kapa.ai's stock floating launcher (a bright square that clashed with the Terminal theme) and trigger the modal from our own "Ask AI" pill in the header, beside the search box — the entrypoint kapa's own best-practices guide recommends. - astro.config: hide the floating button (data-button-hide) and open the modal from #echo-ask-ai (data-modal-override-open-selector); set the modal title to "Ask AI" and its logo to a sparkle SVG matching the pill. - Search.astro: render the "Ask AI" pill next to the search box. - terminal.css: style the pill to mirror the search box (40px, dark, 8px radius, mono) and restore the search box width that the wrapper collapsed. - Remove the old stubbed Ask Echo components (AskEcho/DocActions/PageTitle) and their styles. Co-Authored-By: Claude Opus 4.8 (1M context) --- site/astro.config.mjs | 28 ++++++- site/public/ask-ai.svg | 1 + site/src/components/AskEcho.astro | 110 --------------------------- site/src/components/DocActions.astro | 8 -- site/src/components/Footer.astro | 2 - site/src/components/PageTitle.astro | 6 -- site/src/components/Search.astro | 9 ++- site/src/styles/terminal.css | 72 +++++++----------- 8 files changed, 61 insertions(+), 175 deletions(-) create mode 100644 site/public/ask-ai.svg delete mode 100644 site/src/components/AskEcho.astro delete mode 100644 site/src/components/DocActions.astro delete mode 100644 site/src/components/PageTitle.astro diff --git a/site/astro.config.mjs b/site/astro.config.mjs index 579e3a9d..d457e289 100644 --- a/site/astro.config.mjs +++ b/site/astro.config.mjs @@ -31,10 +31,10 @@ export default defineConfig({ lastUpdated: true, // Echo "E" cube mark; .ico kept as legacy fallback, apple-touch-icon added in head. favicon: '/favicon.svg', - // Keep Starlight's built-in Pagefind ⌘K search; add Ask Echo + DocActions via overrides. + // Keep Starlight's built-in Pagefind ⌘K search; Search override adds the + // empty-state launchpad. "Ask AI" is the kapa.ai widget (see head). components: { Footer: './src/components/Footer.astro', - PageTitle: './src/components/PageTitle.astro', Search: './src/components/Search.astro', }, head: [ @@ -45,6 +45,30 @@ export default defineConfig({ content: "window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-H19TMZLQFN',{anonymize_ip:true});", }, + // kapa.ai "Ask AI" widget — real answers from the indexed Echo docs. + // We hide kapa's default floating launcher and open the modal from our + // own "Ask AI" pill in the header (see Search.astro) so the trigger + // matches the Terminal chrome instead of kapa's stock button. + { + tag: 'script', + attrs: { + async: true, + src: 'https://widget.kapa.ai/kapa-widget.bundle.js', + 'data-website-id': '3ff47090-a571-4c4a-bec0-c0a377028db5', + 'data-project-name': 'Echo', + // Modal header title (defaults to "Echo Docs AI" from the project name). + 'data-modal-title': 'Ask AI', + 'data-project-color': '#00afd1', + // Modal header logo — the same sparkle as the "Ask AI" header pill + // (not the Echo cube). The floating launcher that also used this is hidden. + 'data-project-logo': '/ask-ai.svg', + // Sync the widget's light/dark with the site (we set data-theme on ). + 'data-color-scheme-selector': "[data-theme='dark']", + // Hide the stock floating button; kapa wires clicks on our header pill. + 'data-button-hide': 'true', + 'data-modal-override-open-selector': '#echo-ask-ai', + }, + }, // Dark-first: default new visitors to dark unless they've chosen otherwise. { tag: 'script', diff --git a/site/public/ask-ai.svg b/site/public/ask-ai.svg new file mode 100644 index 00000000..c3995f84 --- /dev/null +++ b/site/public/ask-ai.svg @@ -0,0 +1 @@ + diff --git a/site/src/components/AskEcho.astro b/site/src/components/AskEcho.astro deleted file mode 100644 index 5e525894..00000000 --- a/site/src/components/AskEcho.astro +++ /dev/null @@ -1,110 +0,0 @@ ---- -// Vanilla Astro island — no React. Fab + ⌘-style modal with a (stubbed) streamed answer. -// NOTE: the answer is a hardcoded DEMO, not a live model. To connect a real provider, -// replace the timer block in ask() with a fetch (see website/src/components/AskEcho.js -// for a kapa.ai-style sketch). -const SUGGESTIONS = [ - { icon: 'ph-lock-key', q: 'How do I add JWT authentication?' }, - { icon: 'ph-globe', q: 'How do I enable CORS?' }, - { icon: 'ph-link', q: 'How do I bind a JSON request body?' }, - { icon: 'ph-folder-open', q: 'How do I serve static files?' }, -]; ---- - - - - - - - diff --git a/site/src/components/DocActions.astro b/site/src/components/DocActions.astro deleted file mode 100644 index 44c45146..00000000 --- a/site/src/components/DocActions.astro +++ /dev/null @@ -1,8 +0,0 @@ -
- -
- diff --git a/site/src/components/Footer.astro b/site/src/components/Footer.astro index fe49f659..e220dc8a 100644 --- a/site/src/components/Footer.astro +++ b/site/src/components/Footer.astro @@ -1,11 +1,9 @@ --- import Default from '@astrojs/starlight/components/Footer.astro'; -import AskEcho from './AskEcho.astro'; const year = new Date().getFullYear(); --- -