Layout fixes

.changeset/late-cherries-rule.md

@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+Adds AI sidebar with recommendations based on browsing behaviour

packages/gitbook-v2/src/lib/data/api.ts

@@ -1394,6 +1394,7 @@ async function* streamAIResponse(
         input: params.input,
         output: params.output,
         model: params.model,
+        tools: params.tools,
     });
 
     for await (const event of res) {

packages/gitbook-v2/src/lib/data/types.ts

@@ -189,5 +189,6 @@ export interface GitBookDataFetcher {
         input: api.AIMessageInput[];
         output: api.AIOutputFormat;
         model: api.AIModel;
+        tools?: api.AIToolCapabilities;
     }): AsyncGenerator<api.AIStreamResponse, void, unknown>;
 }

packages/gitbook/src/components/Adaptive/AIPageSummary.tsx

@@ -0,0 +1,97 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { useVisitedPages } from '../Insights';
+import { usePageContext } from '../PageContext';
+import { useAdaptiveContext } from './AdaptiveContext';
+import { streamPageSummary } from './server-actions/streamPageSummary';
+
+export function AIPageSummary() {
+    const { toggle, setLoading, setToggle } = useAdaptiveContext();
+
+    const currentPage = usePageContext();
+    const visitedPages = useVisitedPages((state) => state.pages);
+    const visitedPagesRef = useRef(visitedPages);
+
+    const [summary, setSummary] = useState<{
+        keyFacts?: string;
+        bigPicture?: string;
+    }>({});
+
+    useEffect(() => {
+        if (!summary.keyFacts) setLoading(true);
+        if (!visitedPages?.length) return;
+
+        // Skip if the visited pages haven't changed
+        if (JSON.stringify(visitedPagesRef.current) === JSON.stringify(visitedPages)) return;
+
+        visitedPagesRef.current = visitedPages;
+
+        let canceled = false;
+        setLoading(true);
+
+        (async () => {
+            const stream = await streamPageSummary({
+                currentPage: {
+                    id: currentPage.pageId,
+                    title: currentPage.title,
+                },
+                currentSpace: {
+                    id: currentPage.spaceId,
+                },
+                visitedPages: visitedPages,
+            });
+
+            for await (const summary of stream) {
+                if (canceled) return;
+
+                setSummary(summary);
+            }
+        })().finally(() => {
+            setLoading(false);
+        });
+
+        return () => {
+            canceled = true;
+        };
+    }, [currentPage, visitedPages, toggle, setLoading, setToggle]);
+
+    const shimmerBlocks = [20, 35, 25, 10, 45, 30, 30, 35, 25, 10, 40, 30]; // Widths in percentages
+
+    return (
+        toggle.open && (
+            <div className="flex min-w-64 animate-fadeIn flex-col gap-4">
+                {summary.keyFacts ? (
+                    <div>
+                        <h5 className="mb-0.5 font-semibold text-tint-subtle text-xs uppercase">
+                            Key facts
+                        </h5>
+                        {summary.keyFacts}
+                    </div>
+                ) : (
+                    <div className="flex w-full flex-wrap gap-2">
+                        {shimmerBlocks.map((width, index) => (
+                            <div
+                                // biome-ignore lint/suspicious/noArrayIndexKey: No other distinguishing feature available
+                                key={index}
+                                className="h-4 animate-pulse rounded bg-tint-active"
+                                style={{
+                                    width: `${width}%`,
+                                    animationDelay: `${index * 0.1}s`,
+                                }}
+                            />
+                        ))}
+                    </div>
+                )}
+
+                {visitedPages.length > 1 && summary?.bigPicture ? (
+                    <div>
+                        <h5 className="mb-0.5 font-semibold text-tint-subtle text-xs uppercase">
+                            Big Picture
+                        </h5>
+                        {summary?.bigPicture}
+                    </div>
+                ) : null}
+            </div>
+        )
+    );
+}

packages/gitbook/src/components/Adaptive/AdaptiveContext.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React from 'react';
+
+type AdaptiveContextType = {
+    loading: boolean;
+    setLoading: (loading: boolean) => void;
+    toggle: {
+        open: boolean;
+        manual: boolean;
+    };
+    setToggle: (toggle: { open: boolean; manual: boolean }) => void;
+};
+
+export const AdaptiveContext = React.createContext<AdaptiveContextType | null>(null);
+
+/**
+ * Client side context provider to pass information about the current page.
+ */
+export function AdaptiveContextProvider({ children }: { children: React.ReactNode }) {
+    const [loading, setLoading] = React.useState(true);
+
+    // Start with a default state that works for SSR
+    const [toggle, setToggle] = React.useState({
+        open: false, // Default to open for SSR
+        manual: false,
+    });
+
+    // Update the toggle state on the client side only
+    React.useEffect(() => {
+        // Check for mobile only on the client
+        const handleResize = () => {
+            if (!toggle.manual) {
+                const isMobile = window.innerWidth < 1280;
+                setToggle((prev) => ({
+                    ...prev,
+                    open: !isMobile,
+                }));
+            }
+        };
+        handleResize();
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [toggle.manual]);
+
+    React.useEffect(() => {
+        if (toggle.open) {
+            document.body.classList.add('adaptive-pane');
+        } else {
+            document.body.classList.remove('adaptive-pane');
+        }
+    }, [toggle.open]);
+
+    return (
+        <AdaptiveContext.Provider value={{ loading, setLoading, toggle, setToggle }}>
+            {children}
+        </AdaptiveContext.Provider>
+    );
+}
+
+/**
+ * Hook to use the adaptive context.
+ */
+export function useAdaptiveContext() {
+    const context = React.useContext(AdaptiveContext);
+    if (!context) {
+        throw new Error('useAdaptiveContext must be used within a AdaptiveContextProvider');
+    }
+    return context;
+}

packages/gitbook/src/components/Adaptive/AdaptivePane.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { tcls } from '@/lib/tailwind';
+import { AIPageSummary } from './AIPageSummary';
+import { useAdaptiveContext } from './AdaptiveContext';
+import { AdaptivePaneHeader } from './AdaptivePaneHeader';
+export function AdaptivePane() {
+    const { toggle } = useAdaptiveContext();
+
+    return (
+        <div
+            className={tcls(
+                'flex shrink-0 flex-col gap-4 overflow-x-hidden rounded-md straight-corners:rounded-none bg-tint-subtle ring-1 ring-tint-subtle ring-inset transition-all duration-300',
+                toggle.open ? 'max-h px-4 py-4 xl:w-72' : 'px-4 py-3 xl:w-56'
+            )}
+        >
+            <AdaptivePaneHeader />
+            <AIPageSummary />
+        </div>
+    );
+}

packages/gitbook/src/components/Adaptive/AdaptivePaneHeader.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { tcls } from '@/lib/tailwind';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Button, Loading } from '../primitives';
+import { useAdaptiveContext } from './AdaptiveContext';
+
+export function AdaptivePaneHeader() {
+    const { loading, toggle, setToggle } = useAdaptiveContext();
+
+    return (
+        <div className="flex flex-row items-center gap-3 rounded-md straight-corners:rounded-none transition-all duration-500">
+            <div className="flex grow flex-col">
+                <h4 className="flex items-center gap-1.5 font-semibold ">
+                    <Loading className="size-4 text-tint-subtle" busy={loading} />
+                    For you
+                </h4>
+                <AnimatePresence initial={false} mode="wait">
+                    <motion.h5
+                        key={loading ? 'loading' : 'loaded'}
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.3 }}
+                        className="text-tint-subtle text-xs"
+                    >
+                        {loading ? 'Basing on your context...' : 'Based on your context'}
+                    </motion.h5>
+                </AnimatePresence>
+            </div>
+            <Button
+                variant="blank"
+                className={tcls('px-2 *:transition-transform', !toggle.open && '*:-rotate-45')}
+                iconOnly
+                label="Close"
+                icon="close"
+                onClick={() =>
+                    setToggle({
+                        open: !toggle.open,
+                        manual: true,
+                    })
+                }
+            />
+        </div>
+    );
+}

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

@@ -1 +1,4 @@
 export * from './AIPageLinkSummary';
+export * from './AIPageSummary';
+export * from './AdaptiveContext';
+export * from './AdaptivePane';

packages/gitbook/src/components/Adaptive/server-actions/api.ts

@@ -1,5 +1,10 @@
 'use server';
-import { type AIMessageInput, AIModel, type AIStreamResponse } from '@gitbook/api';
+import {
+    type AIMessageInput,
+    AIModel,
+    type AIStreamResponse,
+    type AIToolCapabilities,
+} from '@gitbook/api';
 import type { GitBookBaseContext } from '@v2/lib/context';
 import { EventIterator } from 'event-iterator';
 import type { MaybePromise } from 'p-map';
@@ -47,11 +52,13 @@ export async function streamGenerateObject<T>(
         schema,
         messages,
         model = AIModel.Fast,
+        tools = {},
     }: {
         schema: z.ZodSchema<T>;
         messages: AIMessageInput[];
         model?: AIModel;
         previousResponseId?: string;
+        tools?: AIToolCapabilities;
     }
 ) {
     const rawStream = context.dataFetcher.streamAIResponse({
@@ -62,12 +69,13 @@ export async function streamGenerateObject<T>(
             type: 'object',
             schema: zodToJsonSchema(schema),
         },
+        tools,
         model,
     });
 
     let json = '';
     return parseResponse<DeepPartial<T>>(rawStream, (event) => {
-        if (event.type === 'response_object') {
+        if (event.type === 'response_object' && event.jsonChunk) {
             json += event.jsonChunk;
 
             const parsed = partialJson.parse(json, partialJson.ALL);

packages/gitbook/src/components/Adaptive/server-actions/index.ts

@@ -1 +1,2 @@
 export * from './streamLinkPageSummary';
+export * from './streamPageSummary';

packages/gitbook/src/components/Adaptive/server-actions/streamPageSummary.ts

@@ -0,0 +1,214 @@
+'use server';
+import { getV1BaseContext } from '@/lib/v1';
+import { isV2 } from '@/lib/v2';
+import { AIMessageRole } from '@gitbook/api';
+import { getSiteURLDataFromMiddleware } from '@v2/lib/middleware';
+import { fetchServerActionSiteContext, getServerActionBaseContext } from '@v2/lib/server-actions';
+import { z } from 'zod';
+import { streamGenerateObject } from './api';
+
+/**
+ * Get a summary of a page, in the context of another page
+ */
+export async function* streamPageSummary({
+    currentPage,
+    currentSpace,
+    visitedPages,
+}: {
+    currentPage: {
+        id: string;
+        title: string;
+    };
+    currentSpace: {
+        id: string;
+        // title: string;
+    };
+    visitedPages: {
+        pageId: string;
+        spaceId: string;
+    }[];
+}) {
+    const baseContext = isV2() ? await getServerActionBaseContext() : await getV1BaseContext();
+    const siteURLData = await getSiteURLDataFromMiddleware();
+
+    const [{ stream }] = await Promise.all([
+        streamGenerateObject(
+            baseContext,
+            {
+                organizationId: siteURLData.organization,
+                siteId: siteURLData.site,
+            },
+            {
+                schema: z.object({
+                    keyFacts: z
+                        .string()
+                        .describe(
+                            'A collection of key facts from the page that together form a comprehensive summary. Keep it under 30 words.'
+                        ),
+                    bigPicture:
+                        visitedPages.length > 0
+                            ? z
+                                  .string()
+                                  .describe(
+                                      'A natural-sounding summary of how specific concepts connect with real benefits. Use a conversational tone with concrete examples. Avoid overly formal language while still being specific. Keep it under 30 words.'
+                                  )
+                            : z.undefined(),
+                }),
+                tools: {
+                    // getPages: true,
+                    // getPageContent: true,
+                },
+                messages: [
+                    {
+                        role: AIMessageRole.Developer,
+                        content: `# 1. Role
+    You are a fact extractor. Your job is to identify and extract the most important facts from the current page.
+    
+    # 2. Task
+    Extract multiple key facts that:
+    - Cover the most important concepts, features, or capabilities on the page
+    - Represent specific, actionable information rather than general descriptions
+    - Provide concrete details about functionality, limitations, or specifications
+    - Together form a comprehensive understanding of the page content
+    - Relate to the user's learning journey through the documentation when relevant
+    
+    # 3. Instructions
+    1. Analyze the current page to identify 3-5 concrete, specific facts (not general summaries)
+    2. Focus on facts that would be most useful and relevant to someone using this documentation
+    3. If the user has visited other pages, identify facts that build upon their previous knowledge
+    4. Present facts as clear, declarative statements about what exists or is true
+    5. Separate distinct facts rather than combining them into a single summary
+    6. Include specific details, numbers, limitations, or capabilities where available`,
+                    },
+                    {
+                        role: AIMessageRole.Developer,
+                        content: `# 4. Current page
+    The content of the current page is:`,
+                        attachments: [
+                            {
+                                type: 'page' as const,
+                                spaceId: currentSpace.id,
+                                pageId: currentPage.id,
+                            },
+                        ],
+                    },
+                    ...(visitedPages && visitedPages.length > 0
+                        ? [
+                              {
+                                  role: AIMessageRole.Developer,
+                                  content: `# 5. Previous Pages and Learning Journey
+    The content across ${visitedPages.length} page(s) builds a knowledge framework. Use this to:
+    - Identify specific, concrete ways concepts interact (not just "work together")
+    - Show exact functional relationships between ideas (not vague "enhances")
+    - Highlight tangible capabilities that emerge from combined concepts
+    - Describe precise benefits that result from these connections
+    - Focus on what becomes possible when these concepts are combined
+    
+    The content of up to 5 most recent pages are included below:`,
+                              },
+                              ...visitedPages.slice(0, 5).map(({ spaceId, pageId }, index) => ({
+                                  role: AIMessageRole.Developer,
+                                  content: `## Previous Page ${index + 1}: ${pageId}`,
+                                  attachments: [
+                                      {
+                                          type: 'page' as const,
+                                          spaceId,
+                                          pageId,
+                                      },
+                                  ],
+                              })),
+                          ]
+                        : []),
+                    {
+                        role: AIMessageRole.Developer,
+                        content: `# 6. Guidelines for Fact Extraction
+    ALWAYS:
+    - ALWAYS extract multiple distinct facts rather than a single summary
+    - ALWAYS focus on specific, concrete details rather than general descriptions
+    - ALWAYS include numbers, limitations, requirements, or specifications when available
+    - ALWAYS prioritize facts that would be most useful to someone using the documentation
+    - ALWAYS consider how facts on this page relate to previously visited pages
+    
+    NEVER:
+    - NEVER use instructional language like "learn", "how to", "discover", etc.
+    - NEVER include vague or generic statements that lack specific details.
+    - NEVER repeat the page title without adding informative value.
+    - NEVER combine multiple distinct facts into a single general statement.
+    - NEVER use numbered lists.`,
+                    },
+                    {
+                        role: AIMessageRole.Developer,
+                        content: `## Examples
+    
+    Page content: "Content blocks in GitBook include text, images, videos, code snippets, and more. Each block can be customized with specific settings. Text blocks support Markdown formatting and can include inline code. Images can be resized and have alt text added."
+    ✓ "Text blocks support Markdown formatting. Images can be resized and include alt text. Available block types include text, images, videos, and code snippets."
+    ✗ "GitBook offers various content blocks with customization options."
+    
+    Page content: "Change Requests allow teams to propose, review, and approve content changes before publishing. Each reviewer's approval is tracked separately. Changes are highlighted with color coding. Change Requests can be merged automatically or manually after approval."
+    ✓ "Reviewer approvals are tracked individually. Changes are color-coded for visibility. Merging can be automatic or manual after approval. Multiple reviewers can collaborate on a single Change Request."
+    ✗ "Change Requests provide a collaborative workflow for content changes."
+    
+    Page content: "API authentication requires an API key generated in account settings. Keys expire after 90 days by default. Rate limits are set to 1000 requests per hour. Keys can have read-only or read-write permissions."
+    ✓ "API keys expire after 90 days by default. Rate limits are capped at 1000 requests per hour. Keys can be configured with read-only or read-write permissions."
+    ✗ "API keys are required for authentication and have various settings."`,
+                    },
+                    {
+                        role: AIMessageRole.Developer,
+                        content: `# 7. Guidelines for Big Picture
+    For the big picture summary:
+    
+    ALWAYS:
+    - ALWAYS highlight practical patterns and workflows that emerge when combining these concepts.
+    - ALWAYS focus on real capabilities that come from understanding multiple features together.
+    - ALWAYS use specific examples that show the value of combining these ideas.
+    - ALWAYS keep the language simple, direct and conversational without corporate jargon.
+    - ALWAYS use short sentences with a single clause and no commas.
+
+    NEVER:
+    - NEVER use corporate jargon like "seamless", "ensures", "integrates", etc.
+    - NEVER use complex sentences with multiple clauses.
+    - NEVER use passive voice.
+    - NEVER state the same fact twice.
+    - NEVER repeat the page title without adding informative value.`,
+                    },
+                    {
+                        role: AIMessageRole.Developer,
+                        content: `## Big Picture Examples
+    POOR "BIG PICTURE" EXAMPLES TO AVOID:
+    ✗ "GitBook combines content creation, collaboration, and integrations, building on your understanding of identifiers and paginated results for seamless documentation management."
+    ✗ "The platform's robust features for content organization, versioning, and access control work together to create a powerful documentation ecosystem."
+    ✗ "By leveraging GitBook's content blocks, permissions system, and API capabilities, you can build comprehensive documentation solutions."
+    
+    GOOD "BIG PICTURE" EXAMPLES TO FOLLOW:
+    ✓ "Combining Markdown tables with webhook notifications means your API docs stay up-to-date automatically. When you update a parameter, the PDF version refreshes too."
+    ✓ "Content blocks and version history together solve the biggest docs headache. You can experiment with different layouts while keeping a clean record of what changed and why."
+    ✓ "The real power comes from linking custom domains with content permissions. Your sales team gets branded docs while your developers see the technical details on the same site."
+    ✓ "With spaces, webhooks, and custom metadata working together, you're not just making docs. You're building a knowledge system that responds to how your team actually works."`,
+                    },
+                    {
+                        role: AIMessageRole.Developer,
+                        content: `The current page is: "${currentPage.title}" (ID ${currentPage.id})`,
+                    },
+                    {
+                        role: AIMessageRole.User,
+                        content:
+                            'What are the key facts on this page, and what have I learned across the documentation so far?',
+                    },
+                ],
+            }
+        ),
+        fetchServerActionSiteContext(baseContext),
+    ]);
+
+    for await (const value of stream) {
+        const keyFacts = value.keyFacts;
+        const bigPicture = value.bigPicture;
+
+        if (!keyFacts) continue;
+
+        yield {
+            keyFacts,
+            bigPicture,
+        };
+    }
+}

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

@@ -106,12 +106,16 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                                           'lg:max-w-lg',
                                           'lg:ml-[max(calc((100%-18rem-48rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - margin (3rem)
                                           'xl:ml-[max(calc((100%-18rem-48rem-14rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - outline (14rem) - margin (3rem)
+                                          'adaptive-pane:xl:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),1.5rem)]',
                                           'page-no-toc:lg:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),0rem)]',
                                           'page-full-width:lg:ml-[max(calc((100%-18rem-103rem-3rem)/2),1.5rem)]',
                                           'page-full-width:2xl:ml-[max(calc((100%-18rem-96rem-14rem+3rem)/2),1.5rem)]',
+                                          '[body.adaptive-pane:has(.page-full-width)_&]:2xl:ml-[max(calc((100%-18rem-96rem-18rem+3rem)/2),1.5rem)]',
                                           'md:mr-auto',
                                           'order-last',
                                           'md:order-[unset]',
+                                          'transition-[margin-left]',
+                                          'duration-300',
                                       ]
                                     : ['order-last']
                             )}

packages/gitbook/src/components/PageAside/PageActions.tsx

@@ -0,0 +1,106 @@
+import { getSpaceLanguage, t } from '@/intl/server';
+import { tcls } from '@/lib/tailwind';
+import type { RevisionPageDocument, Space } from '@gitbook/api';
+import { Icon } from '@gitbook/icons';
+import type { GitBookSiteContext } from '@v2/lib/context';
+import React from 'react';
+import urlJoin from 'url-join';
+import { getPDFURLSearchParams } from '../PDF';
+import { PageFeedbackForm } from '../PageFeedback';
+
+export function PageActions(props: {
+    page: RevisionPageDocument;
+    context: GitBookSiteContext;
+    withPageFeedback: boolean;
+}) {
+    const { page, withPageFeedback, context } = props;
+    const { customization, space } = context;
+    const language = getSpaceLanguage(customization);
+
+    const pdfHref = context.linker.toPathInSpace(
+        `~gitbook/pdf?${getPDFURLSearchParams({
+            page: page.id,
+            only: true,
+            limit: 100,
+        }).toString()}`
+    );
+
+    return (
+        <div
+            className={tcls(
+                'flex',
+                'flex-col',
+                'gap-2',
+                'sidebar-list-default:px-3',
+                'page-api-block:xl:max-2xl:px-3',
+                'empty:hidden'
+            )}
+        >
+            {withPageFeedback ? (
+                <React.Suspense fallback={null}>
+                    <PageFeedbackForm pageId={page.id} />
+                </React.Suspense>
+            ) : null}
+            {customization.git.showEditLink && space.gitSync?.url && page.git ? (
+                <div>
+                    <a
+                        href={urlJoin(space.gitSync.url, page.git.path)}
+                        className={tcls(
+                            'flex',
+                            'flex-row',
+                            'items-center',
+                            'text-sm',
+                            'hover:text-tint-strong',
+                            'links-accent:hover:underline',
+                            'links-accent:hover:underline-offset-4',
+                            'links-accent:hover:decoration-[3px]',
+                            'links-accent:hover:decoration-primary-subtle'
+                        )}
+                    >
+                        <Icon
+                            icon={
+                                space.gitSync.installationProvider === 'gitlab'
+                                    ? 'gitlab'
+                                    : 'github'
+                            }
+                            className={tcls('size-4', 'mr-1.5')}
+                        />
+                        {t(language, 'edit_on_git', getGitSyncName(space))}
+                    </a>
+                </div>
+            ) : null}
+            {customization.pdf.enabled ? (
+                <div>
+                    <a
+                        href={pdfHref}
+                        className={tcls(
+                            'flex',
+                            'flex-row',
+                            'items-center',
+                            'text-sm',
+                            'hover:text-tint-strong',
+                            'links-accent:hover:underline',
+                            'links-accent:hover:underline-offset-4',
+                            'links-accent:hover:decoration-[3px]',
+                            'links-accent:hover:decoration-primary-subtle'
+                        )}
+                    >
+                        <Icon icon="file-pdf" className={tcls('size-4', 'mr-1.5')} />
+                        {t(language, 'pdf_download')}
+                    </a>
+                </div>
+            ) : null}
+        </div>
+    );
+}
+
+function getGitSyncName(space: Space): string {
+    if (space.gitSync?.installationProvider === 'github') {
+        return 'GitHub';
+    }
+    if (space.gitSync?.installationProvider === 'gitlab') {
+        return 'GitLab';
+    }
+
+    return 'Git';
+}

packages/gitbook/src/components/PageAside/PageAside.tsx

@@ -3,22 +3,17 @@ import {
     type RevisionPageDocument,
     SiteAdsStatus,
     SiteInsightsAdPlacement,
-    type Space,
 } from '@gitbook/api';
-import { Icon } from '@gitbook/icons';
 import type { GitBookSiteContext } from '@v2/lib/context';
 import React from 'react';
-import urlJoin from 'url-join';
 
-import { getSpaceLanguage, t } from '@/intl/server';
-import { getDocumentSections } from '@/lib/document-sections';
 import { tcls } from '@/lib/tailwind';
 
+import { AdaptivePane } from '../Adaptive/AdaptivePane';
 import { Ad } from '../Ads';
-import { getPDFURLSearchParams } from '../PDF';
-import { PageFeedbackForm } from '../PageFeedback';
 import { ThemeToggler } from '../ThemeToggler';
-import { ScrollSectionsList } from './ScrollSectionsList';
+import { PageActions } from './PageActions';
+import { PageOutline } from './PageOutline';
 
 /**
  * Aside listing the headings in the document.
@@ -33,33 +28,34 @@ export function PageAside(props: {
 }) {
     const { page, document, withPageFeedback, context } = props;
     const { customization, site, space } = context;
-    const language = getSpaceLanguage(customization);
 
-    const pdfHref = context.linker.toPathInSpace(
-        `~gitbook/pdf?${getPDFURLSearchParams({
-            page: page.id,
-            only: true,
-            limit: 100,
-        }).toString()}`
-    );
+    const useAdaptivePane = customization.ai?.pageLinkSummaries.enabled;
+
     return (
         <aside
             className={tcls(
                 'group/aside',
-                'hidden',
+                'flex',
+                // 'hidden',
                 'xl:flex',
-                // 'page-no-toc:lg:flex',
                 'flex-col',
-                'basis-56',
-                // 'page-no-toc:basis-40',
-                // 'page-no-toc:xl:basis-56',
+                'xl:basis-56',
                 'grow-0',
                 'shrink-0',
                 'break-anywhere', // To prevent long words in headings from breaking the layout
 
                 'text-tint',
                 'contrast-more:text-tint-strong',
-                'sticky',
+                'text-sm',
+                'xl:sticky',
+
+                'lg:px-12',
+                'xl:px-0',
+                'mx-auto',
+                'xl:mx-0',
+                'w-full',
+                'max-w-3xl',
+
                 // Without header
                 'lg:top-0',
                 'lg:max-h-screen',
@@ -91,144 +87,22 @@ export function PageAside(props: {
                 'page-api-block:p-2'
             )}
         >
-            {page.layout.outline ? (
-                <>
-                    <div
-                        className={tcls(
-                            'hidden',
-                            'page-api-block:xl:max-2xl:flex',
-                            'text-xs',
-                            'tracking-wide',
-                            'font-semibold',
-                            'uppercase',
-
-                            'flex-row',
-                            'items-center',
-                            'gap-2'
-                        )}
-                    >
-                        <Icon icon="block-quote" className={tcls('size-3')} />
-                        {t(language, 'on_this_page')}
-                        <Icon
-                            icon="chevron-down"
-                            className={tcls(
-                                'size-3',
-                                'opacity-6',
-                                'ml-auto',
-                                'page-api-block:xl:max-2xl:group-hover/aside:hidden'
-                            )}
+            <div className="lg:top:0 sticky flex grow flex-col gap-6 overflow-y-auto overflow-x-visible border-none pt-8 *:border-tint-subtle site-header-sections:lg:top-[6.75rem] site-header:lg:top-16 xl:pb-8 [&>*:not(:first-child)]:border-t [&>*:not(:first-child)]:pt-6">
+                {useAdaptivePane ? <AdaptivePane /> : null}
+                {page.layout.outline ? (
+                    <div className="hidden flex-col gap-6 xl:flex">
+                        <PageOutline document={document} context={context} />
+                        <PageActions
+                            page={page}
+                            context={context}
+                            withPageFeedback={withPageFeedback}
                         />
                     </div>
-                    <div
-                        className={tcls(
-                            'overflow-y-auto',
-                            'overflow-x-visible',
-
-                            'flex',
-                            'flex-col',
-                            'shrink',
-                            'pb-12',
-
-                            'sticky',
-                            'lg:top:0',
-                            'site-header:lg:top-16',
-                            'site-header-sections:lg:top-[6.75rem]',
-
-                            'gap-6',
-                            'pt-8',
-
-                            'page-api-block:xl:max-2xl:py-0',
-                            // Hide it for api page, until hovered
-                            'page-api-block:xl:max-2xl:hidden',
-                            'page-api-block:xl:max-2xl:group-hover/aside:flex'
-                        )}
-                    >
-                        {document ? (
-                            <React.Suspense fallback={null}>
-                                <PageAsideSections document={document} context={context} />
-                            </React.Suspense>
-                        ) : null}
-                        <div
-                            className={tcls(
-                                'flex',
-                                'flex-col',
-                                'gap-3',
-                                'sidebar-list-default:px-3',
-                                'border-t',
-                                'first:border-none',
-                                'border-tint-subtle',
-                                'py-4',
-                                'first:pt-0',
-                                'page-api-block:xl:max-2xl:px-3',
-                                'empty:hidden'
-                            )}
-                        >
-                            {withPageFeedback ? (
-                                <React.Suspense fallback={null}>
-                                    <PageFeedbackForm pageId={page.id} className={tcls('mt-2')} />
-                                </React.Suspense>
-                            ) : null}
-                            {customization.git.showEditLink && space.gitSync?.url && page.git ? (
-                                <div>
-                                    <a
-                                        href={urlJoin(space.gitSync.url, page.git.path)}
-                                        className={tcls(
-                                            'flex',
-                                            'flex-row',
-                                            'items-center',
-                                            'text-sm',
-                                            'hover:text-tint-strong',
-                                            'links-accent:hover:underline',
-                                            'links-accent:hover:underline-offset-4',
-                                            'links-accent:hover:decoration-[3px]',
-                                            'links-accent:hover:decoration-primary-subtle',
-                                            'py-2'
-                                        )}
-                                    >
-                                        <Icon
-                                            icon={
-                                                space.gitSync.installationProvider === 'gitlab'
-                                                    ? 'gitlab'
-                                                    : 'github'
-                                            }
-                                            className={tcls('size-4', 'mr-1.5')}
-                                        />
-                                        {t(language, 'edit_on_git', getGitSyncName(space))}
-                                    </a>
-                                </div>
-                            ) : null}
-                            {customization.pdf.enabled ? (
-                                <div>
-                                    <a
-                                        href={pdfHref}
-                                        className={tcls(
-                                            'flex',
-                                            'flex-row',
-                                            'items-center',
-                                            'text-sm',
-                                            'hover:text-tint-strong',
-                                            'links-accent:hover:underline',
-                                            'links-accent:hover:underline-offset-4',
-                                            'links-accent:hover:decoration-[3px]',
-                                            'links-accent:hover:decoration-primary-subtle',
-                                            'py-2'
-                                        )}
-                                    >
-                                        <Icon
-                                            icon="file-pdf"
-                                            className={tcls('size-4', 'mr-1.5')}
-                                        />
-                                        {t(language, 'pdf_download')}
-                                    </a>
-                                </div>
-                            ) : null}
-                        </div>
-                    </div>
-                </>
-            ) : null}
+                ) : null}
+            </div>
             <div
                 className={tcls(
-                    'sticky bottom-0 z-10 mt-auto flex flex-col bg-tint-base theme-gradient-tint:bg-gradient-tint theme-gradient:bg-gradient-primary theme-muted:bg-tint-subtle pb-4 page-api-block:xl:max-2xl:hidden page-api-block:xl:max-2xl:pb-0 page-api-block:xl:max-2xl:group-hover/aside:flex [html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle',
+                    'sticky bottom-0 z-10 mt-auto hidden flex-col bg-tint-base theme-gradient-tint:bg-gradient-tint theme-gradient:bg-gradient-primary theme-muted:bg-tint-subtle pb-4 xl:flex page-api-block:xl:max-2xl:hidden page-api-block:xl:max-2xl:pb-0 page-api-block:xl:max-2xl:group-hover/aside:flex [html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle',
                     'page-api-block:xl:max-2xl:bg-transparent'
                 )}
             >
@@ -254,22 +128,3 @@ export function PageAside(props: {
         </aside>
     );
 }
-
-async function PageAsideSections(props: { document: JSONDocument; context: GitBookSiteContext }) {
-    const { document, context } = props;
-
-    const sections = await getDocumentSections(context, document);
-
-    return sections.length > 1 ? <ScrollSectionsList sections={sections} /> : null;
-}
-
-function getGitSyncName(space: Space): string {
-    if (space.gitSync?.installationProvider === 'github') {
-        return 'GitHub';
-    }
-    if (space.gitSync?.installationProvider === 'gitlab') {
-        return 'GitLab';
-    }
-
-    return 'Git';
-}

packages/gitbook/src/components/PageAside/PageOutline.tsx

@@ -0,0 +1,45 @@
+import { getSpaceLanguage, t } from '@/intl/server';
+import { getDocumentSections } from '@/lib/document-sections';
+import { tcls } from '@/lib/tailwind';
+import type { JSONDocument } from '@gitbook/api';
+import { Icon } from '@gitbook/icons';
+import type { GitBookSiteContext } from '@v2/lib/context';
+import React from 'react';
+import { ScrollSectionsList } from './ScrollSectionsList';
+
+export async function PageOutline(props: {
+    document: JSONDocument | null;
+    context: GitBookSiteContext;
+}) {
+    const { document, context } = props;
+    const { customization } = context;
+    const language = getSpaceLanguage(customization);
+
+    if (!document) return;
+
+    const sections = await getDocumentSections(context, document);
+
+    return document && sections.length > 1 ? (
+        <div>
+            <div className="mb-1 flex flex-row items-center gap-2 font-semibold text-xs uppercase tracking-wide">
+                <Icon icon="block-quote" className={tcls('size-3')} />
+                {t(language, 'on_this_page')}
+            </div>
+            <div
+                className={tcls(
+                    'flex',
+                    'flex-col'
+
+                    // 'page-api-block:xl:max-2xl:py-0',
+                    // // Hide it for api page, until hovered
+                    // 'page-api-block:xl:max-2xl:hidden',
+                    // 'page-api-block:xl:max-2xl:group-hover/aside:flex'
+                )}
+            >
+                <React.Suspense fallback={null}>
+                    <ScrollSectionsList sections={sections} />
+                </React.Suspense>
+            </div>
+        </div>
+    ) : null;
+}

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

@@ -34,6 +34,7 @@ import { ClientContexts } from './ClientContexts';
 import '@gitbook/icons/style.css';
 import './globals.css';
 import { GITBOOK_FONTS_URL, GITBOOK_ICONS_TOKEN, GITBOOK_ICONS_URL } from '@v2/lib/env';
+import { AdaptiveContextProvider } from '../Adaptive/AdaptiveContext';
 import { AnnouncementDismissedScript } from '../Announcement';
 
 /**
@@ -175,7 +176,9 @@ export async function CustomizationRootLayout(props: {
                             : null) || IconStyle.Regular
                     }
                 >
-                    <ClientContexts language={language}>{children}</ClientContexts>
+                    <ClientContexts language={language}>
+                        <AdaptiveContextProvider>{children}</AdaptiveContextProvider>
+                    </ClientContexts>
                 </IconsProvider>
             </body>
         </html>

packages/gitbook/src/components/SitePage/SitePage.tsx

@@ -70,7 +70,7 @@ export async function SitePage(props: SitePageProps) {
                 <PageCover as="full" page={page} cover={page.cover} context={context} />
             ) : null}
             {/* We use a flex row reverse to render the aside first because the page is streamed. */}
-            <div className="flex grow flex-row-reverse justify-end">
+            <div className="flex grow flex-col xl:flex-row-reverse xl:justify-end">
                 <PageAside
                     page={page}
                     document={document}

packages/gitbook/src/components/primitives/Loading.tsx

@@ -1,7 +1,5 @@
 import type { SVGProps } from 'react';
 
-import { tcls } from '@/lib/tailwind';
-
 export const Loading = ({
     busy = true,
     ...props
@@ -13,29 +11,26 @@ export const Loading = ({
             preserveAspectRatio="xMaxYMid meet"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
-            aria-busy
+            aria-busy={busy}
             {...props}
         >
+            <title>{busy ? 'Loading' : 'Loaded'}</title>
             <path
-                className={tcls(
-                    busy
-                        ? 'animate-[pathLoading_2s_ease_infinite_forwards]'
-                        : 'animate-[pathLoading_2s_ease_forwards]'
-                )}
                 d="M6 59.5V56.291C6 45.8865 11.5194 36.263 20.5 31.0091V31.0091L60.9857 7.32407C63.4452 5.88525 66.4843 5.86317 68.9643 7.26611L116 33.8734L70.4183 60.2148C67.9468 61.6431 64.9014 61.6462 62.4269 60.223L29.9772 41.5592C19.3106 35.4242 6 43.1236 6 55.4288V64.8776C6 73.4486 10.5708 81.3691 17.9918 85.6575L54.59 106.807C62.0198 111.1 71.1766 111.1 78.6064 106.807L116.364 84.9874C120.074 82.8432 122.36 78.883 122.36 74.5975V59.2647C122.36 57.7248 120.692 56.7626 119.359 57.5331L72.6023 84.5529C68.8874 86.6996 64.309 86.6996 60.5941 84.5529L26 64.5617"
                 stroke="currentColor"
                 pathLength="100"
+                strokeOpacity={busy ? 0.24 : 1}
+                className="transition-[stroke-opacity] duration-500"
                 fill="none"
                 strokeWidth="11"
                 strokeLinecap="round"
                 strokeLinejoin="round"
             />
             <path
+                className="animate-[pathLoading_2s_ease_infinite_forwards] transition-opacity delay-500 duration-500"
                 d="M6 59.5V56.291C6 45.8865 11.5194 36.263 20.5 31.0091V31.0091L60.9857 7.32407C63.4452 5.88525 66.4843 5.86317 68.9643 7.26611L116 33.8734L70.4183 60.2148C67.9468 61.6431 64.9014 61.6462 62.4269 60.223L29.9772 41.5592C19.3106 35.4242 6 43.1236 6 55.4288V64.8776C6 73.4486 10.5708 81.3691 17.9918 85.6575L54.59 106.807C62.0198 111.1 71.1766 111.1 78.6064 106.807L116.364 84.9874C120.074 82.8432 122.36 78.883 122.36 74.5975V59.2647C122.36 57.7248 120.692 56.7626 119.359 57.5331L72.6023 84.5529C68.8874 86.6996 64.309 86.6996 60.5941 84.5529L26 64.5617"
                 stroke="currentColor"
                 pathLength="100"
-                strokeOpacity={busy ? 0.24 : 1}
-                className="transition-opacity duration-1000"
                 fill="none"
                 strokeWidth="11"
                 strokeLinecap="round"

packages/gitbook/tailwind.config.ts

@@ -296,14 +296,14 @@ const config: Config = {
             },
             animation: {
                 present: 'present 200ms cubic-bezier(0.25, 1, 0.5, 1) both',
-                scaleIn: 'scaleIn 200ms ease',
-                scaleOut: 'scaleOut 200ms ease',
-                fadeIn: 'fadeIn 200ms ease forwards',
-                fadeOut: 'fadeOut 200ms ease forwards',
-                enterFromLeft: 'enterFromLeft 250ms ease',
-                enterFromRight: 'enterFromRight 250ms ease',
-                exitToLeft: 'exitToLeft 250ms ease',
-                exitToRight: 'exitToRight 250ms ease',
+                scaleIn: 'scaleIn 200ms ease both',
+                scaleOut: 'scaleOut 200ms ease both',
+                fadeIn: 'fadeIn 200ms ease both',
+                fadeOut: 'fadeOut 200ms ease both',
+                enterFromLeft: 'enterFromLeft 250ms ease both',
+                enterFromRight: 'enterFromRight 250ms ease both',
+                exitToLeft: 'exitToLeft 250ms ease both',
+                exitToRight: 'exitToRight 250ms ease both',
             },
             keyframes: {
                 pulseAlt: {
@@ -465,6 +465,11 @@ const config: Config = {
                 'body:has(.page-no-toc):has(#site-header:not(.mobile-only) #variants) &',
             ]);
 
+            /**
+             * Variant when the adaptive pane is open.
+             */
+            addVariant('adaptive-pane', 'body.adaptive-pane &');
+
             const customisationVariants = {
                 // Sidebar styles
                 sidebar: ['sidebar-default', 'sidebar-filled'],