Inline search modal

.changeset/purple-toys-grow.md

@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+New search layout

packages/gitbook/src/components/AIActions/AIActions.tsx

@@ -6,7 +6,7 @@ import { ChatGPTIcon } from '@/components/AIActions/assets/ChatGPTIcon';
 import { ClaudeIcon } from '@/components/AIActions/assets/ClaudeIcon';
 import { MarkdownIcon } from '@/components/AIActions/assets/MarkdownIcon';
 import { getAIChatName } from '@/components/AIChat';
-import AIChatIcon from '@/components/AIChat/AIChatIcon';
+import { AIChatIcon } from '@/components/AIChat';
 import { Button } from '@/components/primitives/Button';
 import { DropdownMenuItem } from '@/components/primitives/DropdownMenu';
 import { tString, useLanguage } from '@/intl/client';

packages/gitbook/src/components/AIChat/AIChat.tsx

@@ -13,7 +13,7 @@ import {
 import { useNow } from '../hooks';
 import { Button } from '../primitives';
 import { DropdownMenu, DropdownMenuItem } from '../primitives/DropdownMenu';
-import AIChatIcon from './AIChatIcon';
+import { AIChatIcon } from './AIChatIcon';
 import { AIChatInput } from './AIChatInput';
 import { AIChatMessages } from './AIChatMessages';
 import AIChatSuggestedQuestions from './AIChatSuggestedQuestions';
@@ -108,7 +108,7 @@ export function AIChatWindow(props: {
 
     return (
         <div
-            className="ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl animate-present px-4 py-4 transition-all duration-300 sm:px-6 lg:fixed lg:w-80 lg:animate-enterFromRight lg:pr-4 lg:pl-0 xl:w-96"
+            className="ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl animate-present scroll-mt-36 px-4 py-4 transition-all duration-300 sm:px-6 lg:fixed lg:w-80 lg:animate-enterFromRight lg:pr-4 lg:pl-0 xl:w-96"
             ref={containerRef}
         >
             <div className="relative flex h-full grow flex-col overflow-hidden circular-corners:rounded-3xl rounded-corners:rounded-md bg-tint-base text-sm text-tint depth-subtle:shadow-lg shadow-tint ring-1 ring-tint-subtle">

packages/gitbook/src/components/AIChat/AIChatButton.tsx

@@ -1,9 +1,10 @@
 'use client';
-import { t, useLanguage } from '@/intl/client';
+import { tcls } from '@/lib/tailwind';
 import { useAIChatController, useAIChatState } from '../AI/useAIChat';
 import { Button } from '../primitives';
 import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
-import AIChatIcon from './AIChatIcon';
+import { getAIChatName } from './AIChat';
+import { AIChatIcon } from './AIChatIcon';
 
 /**
  * Button to open/close the AI chat.
@@ -13,20 +14,16 @@ export function AIChatButton(props: { trademark: boolean }) {
     const chatController = useAIChatController();
     const chat = useAIChatState();
 
-    const language = useLanguage();
-
     return (
         <Button
             icon={<AIChatIcon trademark={trademark} />}
             iconOnly
             size="default"
-            variant="secondary"
-            className="!px-3 bg-tint-base py-2.5"
+            variant="header"
+            className={tcls('h-9 px-2.5')}
             label={
                 <div className="flex items-center gap-2">
-                    {trademark
-                        ? t(language, 'ai_chat_assistant_name')
-                        : t(language, 'ai_chat_assistant_name_unbranded')}
+                    {getAIChatName(trademark)}
                     <KeyboardShortcut keys={['mod', 'j']} className="border-tint-11 text-tint-1" />
                 </div>
             }

packages/gitbook/src/components/AIChat/AIChatIcon.tsx

@@ -9,7 +9,7 @@ interface AIChatIconProps extends React.SVGProps<SVGSVGElement> {
     trademark?: boolean;
 }
 
-const AIChatIcon = ({
+export const AIChatIcon = ({
     className = 'size-4',
     size,
     trademark = true,
@@ -148,5 +148,3 @@ const AIChatIcon = ({
         </svg>
     );
 };
-
-export default AIChatIcon;

packages/gitbook/src/components/AIChat/AIChatMessages.tsx

@@ -26,6 +26,8 @@ export function AIChatMessages(props: {
                             message.content ? 'animate-[fadeIn_500ms_both]' : '',
                             'shrink-0',
                             'last:min-h-[calc(100%-5rem)]',
+                            'scroll-mt-36',
+                            'lg:scroll-mt-0',
                             'flex flex-col gap-6',
                             message.role === AIMessageRole.User
                                 ? 'max-w-[80%] self-end circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint px-4 py-2'

packages/gitbook/src/components/AIChat/index.ts

@@ -1 +1,3 @@
 export * from './AIChat';
+export * from './AIChatButton';
+export * from './AIChatIcon';

packages/gitbook/src/components/Header/Header.tsx

@@ -1,13 +1,8 @@
 import type { GitBookSiteContext } from '@/lib/context';
-import { Suspense } from 'react';
 
 import { CONTAINER_STYLE, HEADER_HEIGHT_DESKTOP } from '@/components/layout';
 import { getSpaceLanguage, t } from '@/intl/server';
 import { tcls } from '@/lib/tailwind';
-
-import { CustomizationAIMode } from '@gitbook/api';
-import { AIChatButton } from '../AIChat/AIChatButton';
-import { SearchButton } from '../Search';
 import { SiteSectionTabs, encodeClientSiteSections } from '../SiteSections';
 import { HeaderLink } from './HeaderLink';
 import { HeaderLinkMore } from './HeaderLinkMore';
@@ -22,9 +17,9 @@ import { SpacesDropdown } from './SpacesDropdown';
 export function Header(props: {
     context: GitBookSiteContext;
     withTopHeader?: boolean;
-    withAIChat?: boolean;
+    search?: React.ReactNode;
 }) {
-    const { context, withTopHeader, withAIChat } = props;
+    const { context, withTopHeader, search } = props;
     const { siteSpace, siteSpaces, sections, customization } = context;
 
     return (
@@ -123,54 +118,7 @@ export function Header(props: {
                                         : ['order-last']
                                 )}
                             >
-                                <Suspense fallback={null}>
-                                    <SearchButton
-                                        style={[
-                                            'theme-bold:bg-header-link/2',
-                                            'theme-bold:hover:bg-header-link/3',
-
-                                            'theme-bold:text-header-link/8',
-                                            'theme-bold:hover:text-header-link',
-
-                                            'theme-bold:ring-header-link/4',
-                                            'theme-bold:hover:ring-header-link/5',
-
-                                            'theme-bold:[&_svg]:text-header-link/10',
-                                            'theme-bold:[&_.shortcut]:text-header-link/8',
-
-                                            'theme-bold:contrast-more:bg-header-background',
-                                            'theme-bold:contrast-more:text-header-link',
-                                            'theme-bold:contrast-more:ring-header-link',
-                                            'theme-bold:contrast-more:hover:bg-header-background',
-                                            'theme-bold:contrast-more:hover:ring-header-link',
-                                            'theme-bold:contrast-more:focus:text-header-link',
-                                            'theme-bold:contrast-more:focus:bg-header-background',
-                                            'theme-bold:contrast-more:focus:ring-header-link',
-
-                                            'theme-bold:shadow-none',
-                                            'theme-bold:hover:shadow-none',
-                                            'whitespace-nowrap',
-                                        ]}
-                                    >
-                                        <span className={tcls('flex-1')}>
-                                            {t(
-                                                getSpaceLanguage(customization),
-                                                // TODO: remove aiSearch and optional chain once the cache has been fully updated (after 11/07/2025)
-                                                customization.aiSearch?.enabled ||
-                                                    customization.ai?.mode !==
-                                                        CustomizationAIMode.None
-                                                    ? 'search_or_ask'
-                                                    : 'search'
-                                            )}
-                                            ...
-                                        </span>
-                                    </SearchButton>
-                                </Suspense>
-                                {withAIChat && (
-                                    <AIChatButton
-                                        trademark={context.customization.trademark.enabled}
-                                    />
-                                )}
+                                {search}
                             </div>
 
                             {customization.header.links.length > 0 && (

packages/gitbook/src/components/Header/HeaderLink.tsx

@@ -104,7 +104,7 @@ function HeaderItemButton(
     const variant = (() => {
         switch (linkStyle) {
             case 'button-secondary':
-                return 'secondary';
+                return 'header';
             case 'button-primary':
                 return 'primary';
             default:
@@ -120,9 +120,7 @@ function HeaderItemButton(
                 {
                     'button-primary':
                         'theme-bold:bg-header-link theme-bold:text-header-background theme-bold:shadow-none theme-bold:hover:bg-header-link theme-bold:hover:text-header-background theme-bold:hover:shadow-none',
-                    'button-secondary': tcls(
-                        'theme-bold:bg-header-link/2 theme-gradient:bg-tint-base theme-muted:bg-tint-base theme-bold:text-header-link theme-bold:shadow-none theme-bold:ring-header-link/4 theme-bold:hover:bg-header-link/3 theme-bold:hover:text-header-link theme-bold:hover:shadow-none theme-bold:hover:ring-header-link/5 theme-bold:contrast-more:bg-header-background theme-bold:contrast-more:text-header-link theme-bold:contrast-more:ring-header-link theme-bold:contrast-more:hover:ring-header-link'
-                    ),
+                    'button-secondary': '',
                 }[linkStyle]
             )}
             insights={{

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -1,5 +1,4 @@
 import {
-    CustomizationHeaderPreset,
     CustomizationIconsStyle,
     CustomizationSidebarBackgroundStyle,
     CustomizationSidebarListStyle,
@@ -86,11 +85,6 @@ export async function CustomizationRootLayout(props: {
             suppressHydrationWarning
             lang={customization.internationalization.locale}
             className={tcls(
-                /* This offset is used when scrolling to elements on the page, like #anchors and (on mobile) the latest AI chat message.
-                 * It is set to the maximum height of the header (64px) + sections (44px) + offset (40px) */
-                customization.header.preset === CustomizationHeaderPreset.None
-                    ? null
-                    : 'scroll-pt-[148px]',
                 customization.styling.corners && `${customization.styling.corners}-corners`,
                 'theme' in customization.styling && `theme-${customization.styling.theme}`,
                 tintColor ? ' tint' : 'no-tint',

packages/gitbook/src/components/Search/HighlightQuery.tsx

@@ -23,6 +23,9 @@ export function HighlightQuery(props: {
             'py-0.5',
             'rounded',
             'straight-corners:rounded-sm',
+            'transition-colors',
+            'group-hover:bg-primary-active',
+            'group-hover:text-contrast-primary-active',
             'group-[.is-active]:bg-primary-active',
             'group-[.is-active]:text-contrast-primary-active',
         ],

packages/gitbook/src/components/Search/SearchAskAnswer.tsx

@@ -88,20 +88,22 @@ export function SearchAskAnswer(props: { query: string }) {
     }, [setAskState]);
 
     const loading = (
-        <div className={tcls('w-full', 'flex', 'items-center', 'justify-center')}>
-            <Loading className={tcls('w-6', 'py-8', 'text-primary-subtle')} />
+        <div className="flex grow items-center justify-center">
+            <Loading className={tcls('size-6', 'text-tint/6')} />
         </div>
     );
 
     return (
-        <div className={tcls('max-h-[60vh]', 'overflow-y-auto')}>
+        <div className="flex min-h-full p-4">
             {askState?.type === 'answer' ? (
                 <React.Suspense fallback={loading}>
                     <TransitionAnswerBody answer={askState.answer} placeholder={loading} />
                 </React.Suspense>
             ) : null}
             {askState?.type === 'error' ? (
-                <div className={tcls('p-4')}>{t(language, 'search_ask_error')}</div>
+                <div className={tcls('grow p-4 text-center')}>
+                    {t(language, 'search_ask_error')}
+                </div>
             ) : null}
             {askState?.type === 'loading' ? loading : null}
         </div>
@@ -138,10 +140,7 @@ function AnswerBody(props: { answer: AskAnswerResult }) {
 
     return (
         <>
-            <div
-                data-testid="search-ask-answer"
-                className={tcls('my-4', 'sm:mt-6', 'px-4', 'sm:px-12', 'text-tint-strong')}
-            >
+            <div data-testid="search-ask-answer" className="text-tint-strong">
                 {answer.body ?? t(language, 'search_ask_no_answer')}
                 {answer.followupQuestions.length > 0 ? (
                     <AnswerFollowupQuestions followupQuestions={answer.followupQuestions} />
@@ -212,8 +211,7 @@ function AnswerSources(props: {
                 'gap-2',
                 'mt-4',
                 'sm:mt-6',
-                'py-4',
-                'px-4',
+                'pt-4',
                 'border-t',
                 'border-subtle'
             )}