-
Notifications
You must be signed in to change notification settings - Fork 78
Anchor docs search and Ask AI in the toolbar #4303
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
michaeljguarino
merged 13 commits into
master
from
anna/prod-4936-figure-out-how-to-anchor-ai-assistant-search-in-docs-on
Sep 11, 2026
Merged
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
930a416
Anchor docs search and Ask AI in the toolbar.
wailingwombat 5eb6a0c
Reuse Console breadcrumbs instead of a docs-only trail.
wailingwombat 920135a
Give breadcrumb wrappers a full column width.
wailingwombat 2d425f3
Use the design-system Input2 for the REST API filter.
wailingwombat 0ace58b
Show the REST API sidebar in the mobile hamburger.
wailingwombat 4d44aea
Keep the REST overlay from covering the Docs menu control.
wailingwombat 402bfe8
Keep the mobile menu open when switching to the docs tree.
wailingwombat adf979d
Close the mobile menu when a REST endpoint is selected.
wailingwombat b991d2f
Remove the API menu switcher from the mobile docs tree.
wailingwombat d0932df
Open Kapa from header selectors instead of a custom helper.
wailingwombat 6c27d6d
Name compact search buttons and drop the REST filter clear control.
wailingwombat 4a097f7
Fix documentation Prettier formatting in lint-failing files.
wailingwombat 93f5c0b
Fix documentation import/order lint errors.
wailingwombat File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,184 @@ | ||
| import { | ||
| AiSparkleFilledIcon, | ||
| Button, | ||
| IconFrame, | ||
| SearchIcon, | ||
| } from '@pluralsh/design-system' | ||
|
|
||
| import styled from 'styled-components' | ||
|
|
||
| import { mqs } from './Breakpoints' | ||
|
|
||
| function SearchTrigger({ compact = false }: { compact?: boolean }) { | ||
| if (compact) { | ||
| return ( | ||
| <IconFrame | ||
| clickable | ||
| size="large" | ||
| type="floating" | ||
| textValue="Search docs" | ||
| tooltip="Search docs" | ||
| icon={<SearchIcon size={16} />} | ||
| className="docs-search-trigger" | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <SearchBar | ||
| type="button" | ||
| className="docs-search-trigger" | ||
| aria-label="Search docs" | ||
| > | ||
| <SearchIcon | ||
| size={16} | ||
| className="searchIcon" | ||
| /> | ||
| <span className="placeholder">Search docs...</span> | ||
| <Kbd>⌘K</Kbd> | ||
| </SearchBar> | ||
| ) | ||
| } | ||
|
|
||
| function AskAiTrigger({ compact = false }: { compact?: boolean }) { | ||
| if (compact) { | ||
| return ( | ||
| <IconFrame | ||
| clickable | ||
| size="large" | ||
| type="secondary" | ||
| textValue="Ask AI" | ||
| tooltip="Ask AI" | ||
| icon={<AiSparkleFilledIcon size={16} />} | ||
| className="docs-ai-trigger" | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <AskAiButton | ||
| className="docs-ai-trigger" | ||
| secondary | ||
| startIcon={<AiSparkleFilledIcon size={16} />} | ||
| > | ||
| Ask AI | ||
| </AskAiButton> | ||
| ) | ||
| } | ||
|
|
||
| export function DocsSearch() { | ||
| return ( | ||
| <> | ||
| <CenterCluster> | ||
| <SearchTrigger /> | ||
| <WideAskAi> | ||
| <AskAiTrigger /> | ||
| </WideAskAi> | ||
| <NarrowAskAi> | ||
| <AskAiTrigger compact /> | ||
| </NarrowAskAi> | ||
| </CenterCluster> | ||
| <ToolbarCluster> | ||
| <SearchTrigger compact /> | ||
| <AskAiTrigger compact /> | ||
| </ToolbarCluster> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const AskAiButton = styled(Button)({ | ||
| height: 40, | ||
| minHeight: 40, | ||
| }) | ||
|
|
||
| const SearchBar = styled.button(({ theme }) => ({ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| gap: theme.spacing.small, | ||
| width: 220, | ||
| [mqs.threeColumn]: { | ||
| width: 360, | ||
| maxWidth: '32vw', | ||
| }, | ||
| height: 40, | ||
| padding: `0 ${theme.spacing.xsmall}px 0 ${theme.spacing.medium}px`, | ||
| border: theme.borders.input, | ||
| borderRadius: theme.borderRadiuses.medium, | ||
| background: theme.colors['fill-one'], | ||
| color: theme.colors['text-xlight'], | ||
| cursor: 'pointer', | ||
| ...theme.partials.text.body2, | ||
| '.searchIcon': { | ||
| flexShrink: 0, | ||
| color: theme.colors['text-light'], | ||
| }, | ||
| '.placeholder': { | ||
| flex: 1, | ||
| minWidth: 0, | ||
| textAlign: 'left', | ||
| overflow: 'hidden', | ||
| textOverflow: 'ellipsis', | ||
| whiteSpace: 'nowrap', | ||
| }, | ||
| '&:hover': { | ||
| background: theme.colors['fill-one-hover'], | ||
| color: theme.colors['text-light'], | ||
| }, | ||
| '&:focus, &:focus-visible': { | ||
| outline: 'none', | ||
| }, | ||
| '&:focus-visible': { | ||
| ...theme.partials.focus.default, | ||
| }, | ||
| })) | ||
|
|
||
| const Kbd = styled.span(({ theme }) => ({ | ||
| ...theme.partials.text.caption, | ||
| display: 'inline-flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| flexShrink: 0, | ||
| minWidth: 28, | ||
| height: 22, | ||
| padding: `0 ${theme.spacing.xsmall}px`, | ||
| borderRadius: theme.borderRadiuses.medium, | ||
| background: theme.colors['fill-two'], | ||
| color: theme.colors['text-xlight'], | ||
| })) | ||
|
|
||
| const CenterCluster = styled.div(({ theme }) => ({ | ||
| display: 'none', | ||
| [mqs.fullHeader]: { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| gap: theme.spacing.small, | ||
| position: 'absolute', | ||
| left: '50%', | ||
| top: '50%', | ||
| transform: 'translate(-50%, -50%)', | ||
| zIndex: 1, | ||
| }, | ||
| })) | ||
|
|
||
| const ToolbarCluster = styled.div(({ theme }) => ({ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| gap: theme.spacing.xsmall, | ||
| [mqs.fullHeader]: { | ||
| display: 'none', | ||
| }, | ||
| })) | ||
|
|
||
| const WideAskAi = styled.div({ | ||
| display: 'none', | ||
| [mqs.threeColumn]: { | ||
| display: 'block', | ||
| }, | ||
| }) | ||
|
|
||
| const NarrowAskAi = styled.div({ | ||
| display: 'block', | ||
| [mqs.threeColumn]: { | ||
| display: 'none', | ||
| }, | ||
| }) | ||
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
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
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
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
Oops, something went wrong.
Oops, something went wrong.
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.
Uh oh!
There was an error while loading. Please reload this page.