Merge branch 'main' into stevenh/ask-endpoint-prompt

.changeset/nice-cooks-melt.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Improve the prompt for agents to ask questions.

.changeset/quiet-toc-scroll.md

@@ -1,5 +0,0 @@
----
-"gitbook": patch
----
-
-Scroll the table of contents to the active page after client-side navigation.

.changeset/sidebar-group-first-item-clipped.md

@@ -1,5 +0,0 @@
----
-"gitbook": patch
----
-
-Fix the first item of a sidebar page group sometimes appearing cut off after navigating.

packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx

@@ -29,8 +29,7 @@ export function PageGroupItem(props: { page: ClientTOCPageGroup; isFirst?: boole
             <div ref={sentinelRef} className="h-0" aria-hidden="true" />
             <div
                 className={tcls(
-                    // No opacity transition on ::after: in Chrome it leaves stale pixels over the first child after the list scrolls.
-                    '-top-4 sticky z-1 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-4 after:bg-linear-to-b after:from-tint-base after:to-transparent',
+                    '-top-4 sticky z-1 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-4 after:bg-linear-to-b after:from-tint-base after:to-transparent after:transition-opacity',
                     isSticking ? '' : 'after:opacity-0',
                     'mt-1 pt-2.5 pb-0',
                     'bg-tint-base',

packages/gitbook/src/components/TableOfContents/TableOfContents.tsx

@@ -134,7 +134,6 @@ export async function TableOfContents(props: {
                         orientation="vertical"
                         contentClassName="flex flex-col p-2 gutter-stable"
                         active="[data-active=true]"
-                        followActive
                         leading={{
                             fade: true,
                             button: {

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

@@ -11,7 +11,7 @@ import { tcls } from '@/lib/tailwind';
  * A container that encapsulates a scrollable area with usability features.
  * - Faded edges when there is more content than the container can display.
  * - Buttons to advance the scroll position.
- * - Auto-scroll to the active item on mount and when it changes.
+ * - Auto-scroll to the active item when it's initially active.
  */
 export type ScrollContainerProps = {
     children: React.ReactNode;
@@ -42,12 +42,6 @@ export type ScrollContainerProps = {
     /** The ID or ref of the active item to scroll to. */
     active?: string | React.RefObject<HTMLElement | null>;
 
-    /**
-     * Only scroll to the active item when it is not fully visible, and keep following it
-     * when it changes later (requires `active` to be a selector).
-     */
-    followActive?: boolean;
-
     /** Scroll by one page of fully visible direct children instead of one viewport. */
     scrollByVisibleItems?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
@@ -59,7 +53,6 @@ export function ScrollContainer(props: ScrollContainerProps) {
         contentClassName,
         orientation,
         active,
-        followActive = false,
         scrollByVisibleItems = false,
         leading = { fade: true, button: true },
         trailing = { fade: true, button: true },
@@ -87,44 +80,8 @@ export function ScrollContainer(props: ScrollContainerProps) {
         if (!activeItem || !container.contains(activeItem)) {
             return;
         }
-        if (followActive && isElementFullyVisibleInContainer(activeItem, container)) {
-            return;
-        }
         scrollToElementInContainer(activeItem, container);
-    }, [active, followActive]);
-
-    React.useEffect(() => {
-        const container = containerRef.current;
-        if (!followActive || !container || typeof active !== 'string') {
-            return;
-        }
-
-        let frame = 0;
-        // Active items can mount only after a collapsed group expands.
-        const observer = new MutationObserver(() => {
-            cancelAnimationFrame(frame);
-            frame = requestAnimationFrame(() => {
-                for (const activeItem of container.querySelectorAll(active)) {
-                    if (!isElementFullyVisibleInContainer(activeItem, container)) {
-                        scrollToElementInContainer(activeItem, container, 'smooth');
-                        return;
-                    }
-                }
-            });
-        });
-
-        observer.observe(container, {
-            attributes: true,
-            attributeFilter: ['data-active'],
-            childList: true,
-            subtree: true,
-        });
-
-        return () => {
-            observer.disconnect();
-            cancelAnimationFrame(frame);
-        };
-    }, [active, followActive]);
+    }, [active]);
 
     const scrollFurther = () => {
         const container = containerRef.current;
@@ -378,11 +335,7 @@ function scrollByViewport(
 /**
  * Scroll to an element in a container.
  */
-export function scrollToElementInContainer(
-    element: Element,
-    container: HTMLElement,
-    behavior: ScrollBehavior = 'auto'
-) {
+function scrollToElementInContainer(element: Element, container: HTMLElement) {
     const containerRect = container.getBoundingClientRect();
     const rect = element.getBoundingClientRect();
 
@@ -397,26 +350,8 @@ export function scrollToElementInContainer(
             (rect.left - containerRect.left) -
             container.clientWidth / 2 +
             rect.width / 2,
-        behavior,
+        // Use 'auto' to avoid additional scroll animations when scrolling to an element
+        // as this may be called during layout/initialization when the page is not fully loaded.
+        behavior: 'auto',
     });
 }
-
-function isElementFullyVisibleInContainer(element: Element, container: HTMLElement) {
-    if (
-        !element.getClientRects().length ||
-        container.clientHeight === 0 ||
-        container.clientWidth === 0
-    ) {
-        return true;
-    }
-
-    const containerRect = container.getBoundingClientRect();
-    const elementRect = element.getBoundingClientRect();
-
-    return (
-        elementRect.top >= containerRect.top &&
-        elementRect.bottom <= containerRect.bottom &&
-        elementRect.left >= containerRect.left &&
-        elementRect.right <= containerRect.right
-    );
-}

packages/gitbook/src/lib/ask-prompt.ts

@@ -0,0 +1,24 @@
+/**
+ * Describe the `ask` and `goal` query parameters of the ask endpoint, for agent-facing prompts.
+ */
+export function renderAskParametersDescription(): string {
+    return `\`ask\` is the immediate question: it should be specific, self-contained, and written in natural language.
+\`goal\` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with \`ask=how do I create an API token\`, a goal like \`build a script that syncs our docs to a CMS\` lets GitBook tailor the answer to that use case.`;
+}
+
+/**
+ * Render the "Querying This Documentation" section of the agent instructions.
+ * `pageUrl` is the URL of the current page, which the `ask` and `goal` parameters are appended to.
+ */
+export function renderQueryingDocumentation(options: { pageUrl: string }): string {
+    const { pageUrl } = options;
+    return `Perform an HTTP GET request on the following URL with the \`ask\` and \`goal\` query parameters:
+
+\`\`\`
+GET ${pageUrl}?ask=<question>&goal=<user_goal>
+\`\`\`
+
+${renderAskParametersDescription()}
+
+The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.`;
+}

packages/gitbook/src/routes/markdownPage.ts

@@ -1,6 +1,7 @@
 import type { RevisionPageDocument, RevisionPageGroup } from '@gitbook/api';
 
 import { isAIEnabled } from '@/components/utils/isAIChatEnabled';
+import { renderQueryingDocumentation } from '@/lib/ask-prompt';
 import type { GitBookSiteContext } from '@/lib/context';
 import { getExposableError } from '@/lib/data';
 import { linkerWithMarkdownPages } from '@/lib/links';
@@ -69,6 +70,11 @@ function renderNotFoundMarkdown(context: GitBookSiteContext, pagePath: string) {
     const fullContentUrl = context.linker.toAbsoluteURL(
         context.linker.toPathInSite('llms-full.txt')
     );
+    const askPageUrl = context.linker.toAbsoluteURL(
+        context.linker.toPathForPagePath({
+            path: similarPages[0]?.path ?? 'docs/example',
+        })
+    );
 
     return `# Page Not Found
 
@@ -85,20 +91,7 @@ If the exact page cannot be found, you can still retrieve the information using
 
 ### Option 1 — Ask a question (recommended)
 
-Perform an HTTP GET request on the documentation index with the \`ask\` parameter, and the optional \`goal\` parameter:
-
-\`\`\`
-GET ${context.linker.toAbsoluteURL(
-        context.linker.toPathForPagePath({
-            path: similarPages[0]?.path ?? 'docs/example',
-        })
-    )}?ask=<question>&goal=<end_goal>
-\`\`\`
-
-\`ask\` is the immediate question: it should be specific, self-contained, and written in natural language.
-\`goal\` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
-
-The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
+${renderQueryingDocumentation({ pageUrl: askPageUrl })}
 
 ### Option 2 — Browse the documentation index
 
@@ -145,16 +138,7 @@ This documentation is published with GitBook. GitBook is the documentation platf
 ## Querying This Documentation
 If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
 
-Perform an HTTP GET request on the current page URL with the \`ask\` query parameter, and the optional \`goal\` query parameter:
-
-\`\`\`
-GET ${pageUrl}?ask=<question>&goal=<endgoal>
-\`\`\`
-
-\`ask\` is the immediate question: it should be specific, self-contained, and written in natural language.
-\`goal\` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
-
-The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
+${renderQueryingDocumentation({ pageUrl })}
 
 Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
 `;