Draft
Conversation
…tions
Refactor the Starlight sidebar to support isolated library documentation
sections ("virtual collections"), mimicking TanStack's navigation pattern:
- Main site sidebar shows library list at top; clicking a library swaps
the entire sidebar to that library's isolated navigation
- Library sidebar includes hamburger toggle that slides down the full
library list for quick switching (plus Home/All Docs links)
- Each library sidebar has language and version selectors
- Header shows active library name with colored dot badge
- New /docs/ index page serves as a library picker with cards
- Library registry in src/config/libraries.ts defines 8 virtual
collections with their own sidebar trees, versions, and languages
- Content schema extended with library/version frontmatter fields
- Stub content pages created for demo libraries under src/content/docs/docs/
Temporarily disabled network-dependent plugins (OpenAPI, D2, llms-txt,
links-validator) and made RemoteCode fail gracefully for offline builds.
https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
- Remove library list from main site sidebar (only shows in library sidebar toggle panel and /docs/ index page) - Rename panel links to "Learn Algorand" and "Library Docs" - Merge language variants into single entries: "AlgoKit Utils" (TS+Py), "AlgoKit Subscriber" (was "AlgoKit Subscriber TS") - Add 6 sample API reference pages to AlgoKit Utils (AlgorandClient, AccountManager, AppClient, AppDeployer, TransactionComposer, AssetManager) - Update all content slugs and index page to match new naming https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
Add the LibrarySwitcher back to the main site sidebar so users can quickly jump to any library docs section from anywhere on the main site. https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
When browsing a library section (/docs/<library>/), the site logo in the header changes to the library logo and links to the library root. Footer retains the default portal logo. https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
- Move the library switcher hamburger toggle from the sidebar to the header bar, positioned to the left of the library logo (TanStack-style) - Remove redundant library name/dot from sidebar (logo already shows it) - Remove library-header-indicator (dot + name + version badge) from header - Redesign language picker with proper language icons (TypeScript, Python) - Redesign version picker with tag icon matching TanStack's design - Use diamond up/down chevron for selector indicators https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
The hamburger/library nav was inside <Default> which has no <slot/>, so it was silently discarded. Move it into SiteTitle.astro which is rendered by the default header's title-wrapper area. Also: - Clean up Header.astro (remove dead hamburger code and styles) - Reduce language/version picker width to 50% https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
The hamburger dropdown panel was being clipped by Starlight's default header title-wrapper (overflow: clip). Fix by rendering a custom header layout for library pages that places the hamburger + dropdown directly in the header without overflow constraints. Revert SiteTitle to just handle the logo swap. Three header modes: - Homepage: custom branded layout - Library pages: custom layout with hamburger nav + logo + search + icons - Other pages: Starlight default header https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
The main sidebar now shows a "Libraries" dropdown button instead of the full library list. Clicking it expands a panel with all libraries, each showing a colored dot, name, and language badges (e.g. "TS", "Py") for multi-language libraries. The existing LibrarySwitcher component is kept for use in the header's library nav panel. https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
Change the selectors container from column to row layout so both pickers appear on the same line. Shrink icons from 20px to 16px and reduce padding to fit comfortably. https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
…coping Custom Search.astro overrides Starlight's default Pagefind search with an Algolia-style faceted search modal mockup. Features: - Search trigger button with Ctrl/Cmd+K shortcut - Language picker dropdown (All, TypeScript, Python, TEAL) left of input - Library facet pills below search bar with colored dots and lang badges - Clicking a library adds it as a filter tag in the search bar - Mock search results with title, breadcrumb path, and snippet - Keyboard navigation hints and "Powered by Algolia" footer - Full open/close with Escape, backdrop click, keyboard shortcut This is a UI mockup only - no actual search backend connected. https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
- Center modal horizontally with 5vh from top - Remove "Powered by Algolia" footer and keyboard hints - Remove "Type to search..." empty state text https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
Replace <dialog> showModal() with manual visibility toggling since showModal() places the element in the browser's top layer with its own positioning that ignores our layout. Now uses position: fixed with left: 50% + translateX(-50%) for horizontal centering and top: 8vh for vertical positioning. https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
Use inline SVG icons (ts.svg, py.svg, go.svg, tui.svg) instead of colored text rectangles for language indicators. Icons inherit color via fill="currentColor" with per-language colors. Updated language assignments: AlgoKit CLI [Py], AlgoKit Subscriber [TS][Py], NodeKit [Go][TUI]. Badges now shown for all libraries with languages, not just multi-language ones. https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
… sidebar Replaces browser-default <select> elements for language and version pickers with custom dropdown components matching the LibraryPicker styling. Uses shared SVG icons from lang-icons.ts instead of hand-drawn inline SVGs. Dropdowns have rounded corners, hover states, and close on outside click. https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
Add REST entry to lang-icons.ts and set languages: ['REST'] on the REST APIs library so the icon appears in LibraryPicker, LibrarySwitcher, and Search facets. Uses the library's orange (#F97316) as the icon color. https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
Map each library slug to its dedicated logo SVG so the header shows the correct logo when browsing library docs: AlgoKit Utils, AlgoKit CLI, Algorand Python, Algorand TypeScript, AlgoKit Subscriber, and NodeKit. REST APIs falls back to the default site logo (no dedicated logo yet). https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
Library cards now show the actual SVG logo instead of a colored circle and bold text name. Cards use a vertical layout with the logo on top and description below. https://claude.ai/code/session_01FyHbJjCx89wTLUQBANLzDu
The @kapaai/react-sdk has a transitive dependency on @fingerprintjs/fingerprintjs-pro-spa which requires tslib as a peer dependency.
The publish.yaml workflow is what actually builds and deploys to Cloudflare Pages. The env var was only in acceptance.yml which is just for CI checks.
- Add react-syntax-highlighter for code block rendering - Create custom Catppuccin Mocha theme matching site aesthetics - Remove debug logging from AIChatPanel and prebuild script
Integrate Kapa AI's useDeepThinking hook to allow users to enable extended reasoning for complex questions. The toggle button appears to the left of the input field with a brain/sparkles icon that highlights when active.
- Decrease answer content font size from ~14px to 12px (0.75rem) - Reduce list padding from browser default (~40px) to 1.1rem - Apply consistent styling to both ordered and unordered lists
Add extra right padding to ChatInterface header to prevent the reset conversation button from overlapping with the absolute- positioned close button from AIChatPanel.
Move ml-auto from search container to right-group so Search and Ask AI stay together immediately after the site title, while social icons and theme toggle are pushed to the far right.
Changed homepage detection from starlightRoute.id === 'index.mdx' to starlightRoute.slug === '' which correctly identifies the homepage. The previous check was failing because the route ID includes the full path, not just the filename.
Updated padding from 0.35rem 0.65rem to 0.4rem 0.75rem to match the search trigger button dimensions.
Changed from accent color to #FF7F48 for better visual distinction when deep thinking mode is enabled.
Replaced the default header layout that wrapped Starlight's Header component with a custom layout that groups Search and Ask AI together, consistent with the homepage and library page layouts.
Changed from #FF7F48 (orange) to #01DC94 (teal) for better visual consistency with the site's accent colors.
- Add VersionConfig interface with separate slug and label fields (URL uses v8-0-0, picker displays v8.0.0) - Wire up language/version pickers to navigate on selection - Add URL parsing and building helpers for multi/single-language libs - Create mockup docs structure for algokit-utils and algokit-cli with guides/ and api/ folders per language/version
- Document library virtual collections system with Starlight overrides - Document Kapa AI chat panel implementation - Note which components are reusable vs prototype-only
- Move guide content from /api/ to /typescript/latest/guides/ - Add guide content to /typescript/v8-0-0/guides/ - Update .gitignore
- Added languageFound boolean to ParsedLibraryPath interface - Updated parseLibraryPath() to track whether language was found in URL - Modified LibraryDocsSidebar to show "Select language" when user hasn't chosen a language (e.g., on library home page) - Language icon and active state only shown when language is selected
- Add copy button for each code block (appears on hover) - Add copy answer button next to thumbs up/down feedback buttons - Increase chat panel width from 440px to 540px - Update language picker label text
- Add pin toggle button to chat panel header (visible on viewports >= 1200px) - When pinned, panel pushes main content left instead of overlaying - Persist pin preference to localStorage - Hide TOC when pinned (they compete for right-side space) - Add reset conversation icon (reset-convo.svg) - Include design document in docs/plans/
- Persist chat panel state across page navigation using Astro View Transitions - Add transition:persist wrapper to maintain React component instance - Add subtle cross-fade animation (150ms) with reduced-motion support - Fix pin button active state to match hover colors with deep-thinking bg - Fix pin button icon size to match close button (14x14, strokeWidth 1.5) - Fix border color reset bug when toggling pin state off - Remove deprecated viewTransitions option from astro.config.mjs - Add design document for chat panel persistence feature
larkiny
force-pushed
the
experimental/ai-chat-ui-enhancement
branch
from
7de21f9 to
a722892
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds an experimental "pinnable" AI chat panel feature that allows users to dock the chat panel to the right side of the screen (Stripe docs style) instead of having it float over the content.
Changes
chatStore.tsisChatPinnedatom and toggle helpersAIChatPanel.tsxChatInterface.tsxglobal.css.chat-pinnedclass styles for body/header/sidebar constraintsdocs/plans/Test plan