Merge branch 'app' into zk/members

Author: zachkirsch

packages/fern-dashboard/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

packages/fern-docs/bundle/src/app/[host]/[domain]/layout.tsx

@@ -34,6 +34,7 @@ import {
   getAllSidebarRootNodes,
   getSidebarRootNodeIdToChildToParentsMap,
 } from "@/state/navigation-server";
+import { SetIsAskAiEnabled } from "@/state/search";
 import { Whitelabeled } from "@/state/whitelabeled";
 
 import { GlobalStyles } from "../../global-styles";
@@ -107,6 +108,7 @@ export default async function Layout({
         <DarkCode value={edgeFlags.isDarkCodeEnabled} />
         <Whitelabeled value={edgeFlags.isWhitelabeled} />
         <SetColors colors={colors} />
+        <SetIsAskAiEnabled isAskAiEnabled={edgeFlags.isAskAiEnabled} />
         <FernUser domain={domain} host={host} />
         <GlobalStyles
           domain={domain}
@@ -120,7 +122,7 @@ export default async function Layout({
           {children}
         </FeatureFlagProvider>
         <React.Suspense fallback={null}>
-          <SearchV2 domain={domain} isAskAiEnabled={edgeFlags.isAskAiEnabled} />
+          <SearchV2 domain={domain} />
         </React.Suspense>
         {jsConfig != null && <JavascriptProvider config={jsConfig} />}
         {VERCEL_ENV === "production" && (

packages/fern-docs/bundle/src/components/search.tsx

@@ -30,7 +30,11 @@ import { useCurrentPathname } from "@/hooks/use-current-pathname";
 import { useSetTheme, useThemeSwitchEnabled } from "@/hooks/use-theme";
 import { useIsDarkCode } from "@/state/dark-code";
 import { useFernUser } from "@/state/fern-user";
-import { searchDialogOpenAtom, searchInitializedAtom } from "@/state/search";
+import {
+  searchDialogOpenAtom,
+  searchInitializedAtom,
+  useIsAskAiEnabled,
+} from "@/state/search";
 import { atomWithStorageString } from "@/state/utils/atomWithStorageString";
 
 const ALGOLIA_USER_TOKEN_KEY = "algolia-user-token";
@@ -56,15 +60,14 @@ const askAiAtom = atom(false);
 export const SearchV2 = React.memo(function SearchV2({
   domain,
   version,
-  isAskAiEnabled,
 }: {
   domain: string;
-  isAskAiEnabled: boolean;
   version?: VersionSwitcherInfo;
 }) {
   const isDarkCodeEnabled = useIsDarkCode();
   const userToken = useAlgoliaUserToken();
   const user = useFernUser();
+  const isAskAiEnabled = useIsAskAiEnabled();
 
   const [open, setOpen] = useCommandTrigger();
   const [askAi, setAskAi] = useAtom(askAiAtom);

packages/fern-docs/bundle/src/state/search.tsx

@@ -4,13 +4,31 @@ import React from "react";
 
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { atom, useAtomValue, useSetAtom } from "jotai";
+import { useHydrateAtoms } from "jotai/utils";
 
 import { DesktopSearchButton } from "@fern-docs/search-ui";
+import { useIsMobile } from "@fern-ui/react-commons";
 
 import { FERN_SEARCH_BUTTON_ID } from "@/components/constants";
 
 export const searchDialogOpenAtom = atom(false);
 export const searchInitializedAtom = atom(false);
+export const isAskAiEnabledAtom = atom(false);
+
+export const SetIsAskAiEnabled = ({
+  isAskAiEnabled,
+}: {
+  isAskAiEnabled: boolean;
+}) => {
+  useHydrateAtoms([[isAskAiEnabledAtom, isAskAiEnabled]], {
+    dangerouslyForceHydrate: true,
+  });
+  return null;
+};
+
+export const useIsAskAiEnabled = () => {
+  return useAtomValue(isAskAiEnabledAtom);
+};
 
 searchInitializedAtom.onMount = (setInitialized) => {
   if (typeof window === "undefined") {
@@ -33,6 +51,9 @@ export const SearchV2Trigger = React.memo(function SearchV2Trigger(
 ) {
   const isInitialized = useAtomValue(searchInitializedAtom);
   const toggleSearchDialog = useToggleSearchDialog();
+  const isAskAiEnabled = useIsAskAiEnabled();
+  const isMobile = useIsMobile();
+
   return (
     <DesktopSearchButton
       /**
@@ -43,6 +64,13 @@ export const SearchV2Trigger = React.memo(function SearchV2Trigger(
       {...props}
       onClick={composeEventHandlers(props.onClick, toggleSearchDialog)}
       variant={isInitialized ? "default" : "loading"}
+      placeholder={
+        isAskAiEnabled
+          ? isMobile
+            ? "Search or ask AI"
+            : "Search docs or ask AI a question"
+          : "Search"
+      }
     />
   );
 });

packages/fern-docs/search-ui/src/components/desktop/desktop-search-button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         default:
           "bg-(color:--grayscale-a3) text-(color:--grayscale-a10) hover:bg-(color:--grayscale-a4)",
         loading:
-          "bg-(color:--grayscale-a3) text-(color:--grayscale-a10) cursor-default",
+          "bg-(color:--grayscale-a3) text-(color:--grayscale-a10) cursor-not-allowed",
       },
     },
     defaultVariants: {
@@ -25,16 +25,19 @@ const buttonVariants = cva(
 
 export const DesktopSearchButton = forwardRef<
   HTMLButtonElement,
-  ComponentPropsWithoutRef<"button"> & VariantProps<typeof buttonVariants>
->(({ children, variant, className, ...rest }, ref) => {
+  ComponentPropsWithoutRef<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      placeholder?: string;
+    }
+>(({ children, variant, placeholder = "Search", className, ...rest }, ref) => {
   return (
     <button
       {...rest}
       className={buttonVariants({ variant, className })}
       ref={ref}
     >
       <SearchIcon />
-      Search
+      {placeholder}
       <CommandKbd className="pointer-coarse:hidden ml-auto" />
     </button>
   );