diff --git a/packages/fern-docs/search-server/src/algolia/index.ts b/packages/fern-docs/search-server/src/algolia/index.ts index dc1eb828f2..bc2b100559 100644 --- a/packages/fern-docs/search-server/src/algolia/index.ts +++ b/packages/fern-docs/search-server/src/algolia/index.ts @@ -1,6 +1,7 @@ export { browseAllObjectsForFilters } from "./browse-all-objects"; export * from "./constants"; export * from "./create-search-filters"; +export * from "./edge"; export * from "./fetch-facet-values"; export * from "./tasks"; export * from "./types"; diff --git a/packages/fern-docs/search-ui/src/app/(demo)/app-sidebar.tsx b/packages/fern-docs/search-ui/src/app/(demo)/app-sidebar.tsx index 5231573645..6547a11260 100644 --- a/packages/fern-docs/search-ui/src/app/(demo)/app-sidebar.tsx +++ b/packages/fern-docs/search-ui/src/app/(demo)/app-sidebar.tsx @@ -1,4 +1,5 @@ import { useSearchParams } from "next/navigation"; +import React from "react"; // This is sample data. const data = { diff --git a/packages/fern-docs/search-ui/src/app/(demo)/search-demo.tsx b/packages/fern-docs/search-ui/src/app/(demo)/search-demo.tsx index 718de7cbfd..158a6944a9 100644 --- a/packages/fern-docs/search-ui/src/app/(demo)/search-demo.tsx +++ b/packages/fern-docs/search-ui/src/app/(demo)/search-demo.tsx @@ -19,7 +19,6 @@ import { } from "@/components"; import { ChatbotModelSelect } from "@/components/chatbot/model-select"; import { DesktopCommandWithAskAI } from "@/components/desktop/desktop-ask-ai"; -import { CommandAskAIGroup } from "@/components/shared/command-ask-ai"; import { useIsMobile } from "@/hooks/use-mobile"; import { FacetsResponse, SEARCH_INDEX } from "@fern-docs/search-server/algolia"; import { useAtom } from "jotai"; @@ -137,7 +136,7 @@ export function DemoInstantSearchClient({ ) : ( - + - { - setInitialInput(initialInput); - setAskAi(true); - }} - forceMount - /> - diff --git a/packages/fern-docs/search-ui/src/components/desktop/desktop-ask-ai.tsx b/packages/fern-docs/search-ui/src/components/desktop/desktop-ask-ai.tsx index 2ff3938a8b..44ed1b2991 100644 --- a/packages/fern-docs/search-ui/src/components/desktop/desktop-ask-ai.tsx +++ b/packages/fern-docs/search-ui/src/components/desktop/desktop-ask-ai.tsx @@ -46,6 +46,7 @@ import * as Command from "../cmdk"; import { CodeBlock } from "../code-block"; import { MarkdownContent } from "../md-content"; import { useFacetFilters } from "../search-client"; +import { CommandAskAIGroup } from "../shared"; import { CommandLink } from "../shared/command-link"; import tunnel from "../tunnel-rat"; import { cn } from "../ui/cn"; @@ -60,7 +61,7 @@ const headerActions = tunnel(); export const DesktopCommandWithAskAI = forwardRef< HTMLDivElement, - ComponentPropsWithoutRef & { + Omit, "children"> & { askAI?: boolean; defaultAskAI?: boolean; setAskAI?: (askAI: boolean) => void; @@ -75,6 +76,8 @@ export const DesktopCommandWithAskAI = forwardRef< composerActions?: ReactNode; domain: string; renderActions?: (message: SqueezedMessage) => ReactNode; + setInitialInput?: (initialInput: string) => void; + children?: ReactNode; } >( ( @@ -94,10 +97,13 @@ export const DesktopCommandWithAskAI = forwardRef< composerActions, domain, renderActions, + setInitialInput, ...props }, - ref + forwardedRef ) => { + const ref = useRef(null); + const [askAI, setAskAI] = useControllableState({ defaultProp: defaultAskAI, prop: askAIProp, @@ -105,11 +111,51 @@ export const DesktopCommandWithAskAI = forwardRef< }); const { filters, handlePopState: handlePopFilters } = useFacetFilters(); + function glow() { + if (ref.current) { + ref.current.animate( + { + boxShadow: [ + "0 0 0px var(--accent-a5), var(--cmdk-shadow)", + "0 0 75px var(--accent-a5), var(--cmdk-shadow)", + "0 0 150px transparent, var(--cmdk-shadow)", + ], + }, + { duration: 800, easing: "ease-out" } + ); + } + } + + // animate on presence + useEffect(() => { + if (ref.current) { + ref.current.animate( + { transform: ["scale(0.96)", "scale(1)"] }, + { duration: 100, easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)" } + ); + + if (askAI) { + glow(); + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + // bounce on action + function bounce() { + if (ref.current) { + ref.current.animate( + { transform: ["scale(1)", "scale(0.96)", "scale(1)"] }, + { duration: 200, easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)" } + ); + } + } + return ( 0} + data-mode={askAI ? "ask-ai" : "search"} > {askAI ? ( setAskAI(false)} + onReturnToSearch={() => { + setAskAI(false); + bounce(); + }} initialInput={initialInput} chatId={chatId} onSelectHit={onSelectHit} @@ -138,7 +188,18 @@ export const DesktopCommandWithAskAI = forwardRef< renderActions={renderActions} /> ) : ( - {children} + + { + setInitialInput?.(initialInput); + setAskAI(true); + bounce(); + glow(); + }} + forceMount + /> + {children} + )} ); diff --git a/packages/fern-docs/search-ui/src/components/desktop/desktop-command.tsx b/packages/fern-docs/search-ui/src/components/desktop/desktop-command.tsx index 3e94d59081..5025407078 100644 --- a/packages/fern-docs/search-ui/src/components/desktop/desktop-command.tsx +++ b/packages/fern-docs/search-ui/src/components/desktop/desktop-command.tsx @@ -49,11 +49,23 @@ const DesktopCommand = forwardRef< DesktopCommandProps & ComponentPropsWithoutRef >(({ onPopState, children, placeholder, ...props }, forwardedRef) => { const { filters, handlePopState: handlePopFilters } = useFacetFilters(); + const ref = useRef(null); + + // animate on presence + useEffect(() => { + if (ref.current) { + ref.current.animate( + { transform: ["scale(0.96)", "scale(1)"] }, + { duration: 100, easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)" } + ); + } + }, []); + return ( { diff --git a/packages/fern-docs/search-ui/src/components/desktop/desktop.scss b/packages/fern-docs/search-ui/src/components/desktop/desktop.scss index 78950c0270..db91b4692d 100644 --- a/packages/fern-docs/search-ui/src/components/desktop/desktop.scss +++ b/packages/fern-docs/search-ui/src/components/desktop/desktop.scss @@ -3,7 +3,26 @@ border: 1px solid var(--grayscale-a6); background-color: var(--grayscale-a1); backdrop-filter: blur(40px); - border-radius: 0.5rem; + border-radius: 0.75rem; + transition: transform 100ms ease; + position: relative; + + --cmdk-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + box-shadow: var(--cmdk-shadow); + + &::before { + content: ""; + pointer-events: none; + position: absolute; + inset: 0; + z-index: -50; + background: var(--white-a9); + backdrop-filter: blur(40px); + + :is(.dark) & { + background: var(--black-a9); + } + } :is(.dark) & { background-color: var(--grayscale-a2); @@ -83,6 +102,10 @@ } } + &[data-mode="ask-ai"] [data-cmdk-list] { + height: 400px; + } + [data-cmdk-list-sizer] { padding: 0.75rem 0.5rem; diff --git a/packages/fern-docs/ui/src/search/SearchV2.tsx b/packages/fern-docs/ui/src/search/SearchV2.tsx index 23baabc21c..7db7cd2632 100644 --- a/packages/fern-docs/ui/src/search/SearchV2.tsx +++ b/packages/fern-docs/ui/src/search/SearchV2.tsx @@ -164,6 +164,7 @@ export function SearchV2(): ReactElement | false { api={chatEndpoint} suggestionsApi={suggestEndpoint} initialInput={initialInput} + setInitialInput={setInitialInput} body={{ algoliaSearchKey: apiKey }} onSelectHit={handleNavigate} onEscapeKeyDown={() => setOpen(false)}