diff --git a/.changeset/late-cherries-rule.md b/.changeset/late-cherries-rule.md new file mode 100644 index 0000000000..d546d94ba5 --- /dev/null +++ b/.changeset/late-cherries-rule.md @@ -0,0 +1,5 @@ +--- +"gitbook": minor +--- + +Adds AI sidebar with recommendations based on browsing behaviour diff --git a/packages/gitbook-v2/src/lib/data/api.ts b/packages/gitbook-v2/src/lib/data/api.ts index 20e495656e..13061c3afe 100644 --- a/packages/gitbook-v2/src/lib/data/api.ts +++ b/packages/gitbook-v2/src/lib/data/api.ts @@ -1394,6 +1394,8 @@ async function* streamAIResponse( input: params.input, output: params.output, model: params.model, + tools: params.tools, + previousResponseId: params.previousResponseId, }); for await (const event of res) { diff --git a/packages/gitbook-v2/src/lib/data/types.ts b/packages/gitbook-v2/src/lib/data/types.ts index 178a0ba77d..0b6920523d 100644 --- a/packages/gitbook-v2/src/lib/data/types.ts +++ b/packages/gitbook-v2/src/lib/data/types.ts @@ -189,5 +189,7 @@ export interface GitBookDataFetcher { input: api.AIMessageInput[]; output: api.AIOutputFormat; model: api.AIModel; + tools?: api.AIToolCapabilities; + previousResponseId?: string; }): AsyncGenerator; } diff --git a/packages/gitbook/src/components/Adaptive/AIPageSummary.tsx b/packages/gitbook/src/components/Adaptive/AIPageSummary.tsx new file mode 100644 index 0000000000..345943b8a7 --- /dev/null +++ b/packages/gitbook/src/components/Adaptive/AIPageSummary.tsx @@ -0,0 +1,235 @@ +'use client'; +import { useEffect, useRef, useState } from 'react'; +import { useVisitedPages } from '../Insights'; +import { usePageContext } from '../PageContext'; +import { Button } from '../primitives/Button'; +import { useAdaptiveContext } from './AdaptiveContext'; +import { streamPageQuestion } from './server-actions/streamPageQuestion'; +import { streamPageSummary } from './server-actions/streamPageSummary'; + +interface ChatMessage { + type: 'question' | 'answer'; + content: string; +} + +type StreamData = { answer: string } | { newResponseId: string } | { toolUsage: boolean }; + +export function AIPageSummary() { + const { toggle, setLoading } = useAdaptiveContext(); + + const currentPage = usePageContext(); + const visitedPages = useVisitedPages((state) => state.pages); + const visitedPagesRef = useRef(visitedPages); + + const [summary, setSummary] = useState<{ + keyFacts?: string; + bigPicture?: string; + }>({}); + + const [question, setQuestion] = useState(''); + const [chatHistory, setChatHistory] = useState([]); + const [isAsking, setIsAsking] = useState(false); + const [responseId, setResponseId] = useState(null); + const [showTypingIndicator, setShowTypingIndicator] = useState(false); + + const handleSubmit = async () => { + if (!question.trim() || isAsking) return; + + const currentQuestion = question; + setQuestion(''); + setIsAsking(true); + setShowTypingIndicator(true); + + // Add question to chat history + setChatHistory((prev) => [...prev, { type: 'question', content: currentQuestion }]); + + try { + const stream = await streamPageQuestion(currentQuestion, responseId ?? ''); + let currentAnswer = ''; + + for await (const data of stream as AsyncIterableIterator) { + if ('answer' in data && data.answer !== undefined) { + currentAnswer = data.answer; + setShowTypingIndicator(false); + + // If the answer is empty, replace it with a generic error message + if (data.answer.trim() === '') { + currentAnswer = + 'An answer could not be found for your question. You could try rephrasing it, or be more specific.'; + } + + // Update the last message in chat history with the streaming answer + setChatHistory((prev) => { + const newHistory = [...prev]; + const lastMessage = newHistory[newHistory.length - 1]; + if (lastMessage?.type === 'answer') { + lastMessage.content = currentAnswer; + } else { + newHistory.push({ type: 'answer', content: currentAnswer }); + } + return newHistory; + }); + } else if ('newResponseId' in data && data.newResponseId) { + setResponseId(data.newResponseId); + } else if ('toolUsage' in data) { + // Show typing indicator when tools are being used + setShowTypingIndicator(true); + } + } + } finally { + setIsAsking(false); + setShowTypingIndicator(false); + } + }; + + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + handleSubmit(); + } + }; + + useEffect(() => { + if (!summary.keyFacts) setLoading(true); + }, [summary.keyFacts, setLoading]); + + useEffect(() => { + 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, + title: currentPage.spaceTitle, + }, + visitedPages: visitedPages, + }); + + for await (const data of stream) { + if (canceled) return; + + if ('responseId' in data && data.responseId !== undefined) { + setResponseId(data.responseId); + } + + setSummary((prev) => ({ + keyFacts: data.keyFacts ?? prev.keyFacts, + bigPicture: data.bigPicture ?? prev.bigPicture, + })); + } + })().finally(() => { + setLoading(false); + }); + + return () => { + canceled = true; + }; + }, [currentPage, visitedPages, setLoading]); + + const shimmerBlocks = [20, 35, 25, 10, 45, 30, 30, 35, 25, 10, 40, 30]; // Widths in percentages + + return ( + toggle.open && ( +
+ {summary.keyFacts ? ( +
+
+ Key facts +
+ {summary.keyFacts} +
+ ) : ( +
+ {shimmerBlocks.map((width, index) => ( +
+ ))} +
+ )} + + {visitedPages.length > 1 && summary?.bigPicture ? ( +
+
+ Big Picture +
+ {summary?.bigPicture} +
+ ) : null} + + {chatHistory.length > 0 && ( +
+ {chatHistory.map((message, index) => ( +
+
+ {message.content} +
+
+ ))} + + {showTypingIndicator && ( +
+ {shimmerBlocks.slice(0, 5).map((width, index) => ( +
+ ))} +
+ )} +
+ )} + +
+ setQuestion(e.target.value)} + onKeyPress={handleKeyPress} + disabled={isAsking || !responseId} + /> +
+
+ ) + ); +} diff --git a/packages/gitbook/src/components/Adaptive/AdaptiveContext.tsx b/packages/gitbook/src/components/Adaptive/AdaptiveContext.tsx new file mode 100644 index 0000000000..cf9b403680 --- /dev/null +++ b/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(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 ( + + {children} + + ); +} + +/** + * 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; +} diff --git a/packages/gitbook/src/components/Adaptive/AdaptivePane.tsx b/packages/gitbook/src/components/Adaptive/AdaptivePane.tsx new file mode 100644 index 0000000000..a719d3b218 --- /dev/null +++ b/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 ( +
+ + +
+ ); +} diff --git a/packages/gitbook/src/components/Adaptive/AdaptivePaneHeader.tsx b/packages/gitbook/src/components/Adaptive/AdaptivePaneHeader.tsx new file mode 100644 index 0000000000..93338b1528 --- /dev/null +++ b/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 ( +
+
+

+ + For you +

+ + + {loading ? 'Basing on your context...' : 'Based on your context'} + + +
+
+ ); +} diff --git a/packages/gitbook/src/components/Adaptive/index.ts b/packages/gitbook/src/components/Adaptive/index.ts index 2d93029d7e..f2490433df 100644 --- a/packages/gitbook/src/components/Adaptive/index.ts +++ b/packages/gitbook/src/components/Adaptive/index.ts @@ -1 +1,4 @@ export * from './AIPageLinkSummary'; +export * from './AIPageSummary'; +export * from './AdaptiveContext'; +export * from './AdaptivePane'; diff --git a/packages/gitbook/src/components/Adaptive/server-actions/api.ts b/packages/gitbook/src/components/Adaptive/server-actions/api.ts index a1396987d7..74d54295ee 100644 --- a/packages/gitbook/src/components/Adaptive/server-actions/api.ts +++ b/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'; @@ -46,28 +51,33 @@ export async function streamGenerateObject( { schema, messages, + previousResponseId, model = AIModel.Fast, + tools = {}, }: { schema: z.ZodSchema; messages: AIMessageInput[]; model?: AIModel; previousResponseId?: string; + tools?: AIToolCapabilities; } ) { const rawStream = context.dataFetcher.streamAIResponse({ organizationId, siteId, + previousResponseId, input: messages, output: { type: 'object', schema: zodToJsonSchema(schema), }, + tools, model, }); let json = ''; return parseResponse>(rawStream, (event) => { - if (event.type === 'response_object') { + if (event.type === 'response_object' && event.jsonChunk) { json += event.jsonChunk; const parsed = partialJson.parse(json, partialJson.ALL); diff --git a/packages/gitbook/src/components/Adaptive/server-actions/index.ts b/packages/gitbook/src/components/Adaptive/server-actions/index.ts index 664e869e23..4753b36c44 100644 --- a/packages/gitbook/src/components/Adaptive/server-actions/index.ts +++ b/packages/gitbook/src/components/Adaptive/server-actions/index.ts @@ -1 +1,2 @@ export * from './streamLinkPageSummary'; +export * from './streamPageSummary'; diff --git a/packages/gitbook/src/components/Adaptive/server-actions/streamPageQuestion.ts b/packages/gitbook/src/components/Adaptive/server-actions/streamPageQuestion.ts new file mode 100644 index 0000000000..3aba73f6d2 --- /dev/null +++ b/packages/gitbook/src/components/Adaptive/server-actions/streamPageQuestion.ts @@ -0,0 +1,83 @@ +'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* streamPageQuestion(question: string, responseId: string) { + const baseContext = isV2() ? await getServerActionBaseContext() : await getV1BaseContext(); + const siteURLData = await getSiteURLDataFromMiddleware(); + + const [{ stream, response }] = await Promise.all([ + streamGenerateObject( + baseContext, + { + organizationId: siteURLData.organization, + siteId: siteURLData.site, + }, + { + schema: z.object({ + answer: z.string().describe('The answer to the question'), + }), + previousResponseId: responseId, + tools: { + search: true, + getPageContent: true, + getPages: true, + }, + messages: [ + { + role: AIMessageRole.Developer, + content: + 'The user is asking a question about the page. Use your knowledge of the page and the context to answer the question. Be succinct in your answers, do not repeat information already in the key facts or big picture.', + }, + { + role: AIMessageRole.Developer, + content: + 'Important: NEVER respond with anything except the answer to the question. Do not respond with anything else. If the input is not a question about the documentation or you cannot answer the question using the context provided, respond with an empty string.', + }, + { + role: AIMessageRole.Developer, + content: + 'Use the tools available to you to find the answers (read page content, etc).', + }, + { + role: AIMessageRole.User, + content: question, + }, + ], + } + ), + fetchServerActionSiteContext(baseContext), + ]); + + // Get the responseId asynchronously in the background + let newResponseId: string | null = null; + const responseIdPromise = response + .then((r) => { + newResponseId = r.responseId; + }) + .catch((error) => { + console.error('Error getting responseId:', error); + }); + + // Start processing the stream immediately + for await (const value of stream) { + // Always yield the answer, even if it's an empty string + if ('answer' in value) { + yield { + answer: value.answer, + }; + } + } + + // Wait for the responseId to be available and yield one final time + await responseIdPromise; + yield { newResponseId }; +} diff --git a/packages/gitbook/src/components/Adaptive/server-actions/streamPageSummary.ts b/packages/gitbook/src/components/Adaptive/server-actions/streamPageSummary.ts new file mode 100644 index 0000000000..aaf28a1503 --- /dev/null +++ b/packages/gitbook/src/components/Adaptive/server-actions/streamPageSummary.ts @@ -0,0 +1,228 @@ +'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, response }] = 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(), + }), + 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 space and page + The user is currently reading the page titled "${currentPage.title}" (ID ${currentPage.id}) in the space titled "${currentSpace.title}" (ID ${currentSpace.id}). + Use these identifiers for tool calls. + + 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), + ]); + + // Get the responseId asynchronously in the background + let responseId: string | null = null; + const responseIdPromise = response + .then((r) => { + responseId = r.responseId; + }) + .catch((error) => { + console.error('Error getting responseId:', error); + }); + + // Start processing the stream immediately + for await (const value of stream) { + const keyFacts = value.keyFacts; + const bigPicture = value.bigPicture; + + if (!keyFacts) continue; + + yield { + keyFacts, + bigPicture, + }; + } + + // Wait for the responseId to be available and yield one final time + await responseIdPromise; + yield { responseId }; +} diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 35c2583c41..7a27e1eb27 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/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'] )} diff --git a/packages/gitbook/src/components/PageAside/PageActions.tsx b/packages/gitbook/src/components/PageAside/PageActions.tsx new file mode 100644 index 0000000000..31cf9f7d95 --- /dev/null +++ b/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 ( +
+ {withPageFeedback ? ( + + + + ) : null} + {customization.git.showEditLink && space.gitSync?.url && page.git ? ( + + ) : null} + {customization.pdf.enabled ? ( + + ) : null} +
+ ); +} + +function getGitSyncName(space: Space): string { + if (space.gitSync?.installationProvider === 'github') { + return 'GitHub'; + } + if (space.gitSync?.installationProvider === 'gitlab') { + return 'GitLab'; + } + + return 'Git'; +} diff --git a/packages/gitbook/src/components/PageAside/PageAside.tsx b/packages/gitbook/src/components/PageAside/PageAside.tsx index a51410cbc0..4a502e7c2c 100644 --- a/packages/gitbook/src/components/PageAside/PageAside.tsx +++ b/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 ( ); } - -async function PageAsideSections(props: { document: JSONDocument; context: GitBookSiteContext }) { - const { document, context } = props; - - const sections = await getDocumentSections(context, document); - - return sections.length > 1 ? : null; -} - -function getGitSyncName(space: Space): string { - if (space.gitSync?.installationProvider === 'github') { - return 'GitHub'; - } - if (space.gitSync?.installationProvider === 'gitlab') { - return 'GitLab'; - } - - return 'Git'; -} diff --git a/packages/gitbook/src/components/PageAside/PageOutline.tsx b/packages/gitbook/src/components/PageAside/PageOutline.tsx new file mode 100644 index 0000000000..84c40a25b1 --- /dev/null +++ b/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 ? ( +
+
+ + {t(language, 'on_this_page')} +
+
+ + + +
+
+ ) : null; +} diff --git a/packages/gitbook/src/components/PageContext/PageContext.tsx b/packages/gitbook/src/components/PageContext/PageContext.tsx index 7f17cca52a..5a5be78914 100644 --- a/packages/gitbook/src/components/PageContext/PageContext.tsx +++ b/packages/gitbook/src/components/PageContext/PageContext.tsx @@ -4,8 +4,9 @@ import React from 'react'; export type PageContextType = { pageId: string; - spaceId: string; title: string; + spaceId: string; + spaceTitle: string; }; export const PageContext = React.createContext(null); @@ -14,9 +15,12 @@ export const PageContext = React.createContext(null); * Client side context provider to pass information about the current page. */ export function PageContextProvider(props: PageContextType & { children: React.ReactNode }) { - const { pageId, spaceId, title, children } = props; + const { pageId, spaceId, title, spaceTitle, children } = props; - const value = React.useMemo(() => ({ pageId, spaceId, title }), [pageId, spaceId, title]); + const value = React.useMemo( + () => ({ pageId, spaceId, spaceTitle, title }), + [pageId, spaceId, spaceTitle, title] + ); return {children}; } diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx index c7d2f35b6e..e517c36008 100644 --- a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx +++ b/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 } > - {children} + + {children} + diff --git a/packages/gitbook/src/components/SitePage/SitePage.tsx b/packages/gitbook/src/components/SitePage/SitePage.tsx index fe6934a529..cc52202e57 100644 --- a/packages/gitbook/src/components/SitePage/SitePage.tsx +++ b/packages/gitbook/src/components/SitePage/SitePage.tsx @@ -65,12 +65,17 @@ export async function SitePage(props: SitePageProps) { const document = await getPageDocument(context.dataFetcher, context.space, page); return ( - + {withFullPageCover && page.cover ? ( ) : null} {/* We use a flex row reverse to render the aside first because the page is streamed. */} -
+
; @@ -33,10 +34,12 @@ const variantClasses = { 'ring-0', 'shadow-none', 'hover:bg-primary-hover', + 'disabled:hover:bg-transparent', 'hover:text-primary', 'hover:scale-1', 'hover:shadow-none', 'contrast-more:bg-tint-subtle', + 'disabled:hover:shadow-none', ], secondary: [ 'bg-tint', @@ -57,6 +60,7 @@ export function Button({ label, icon, iconOnly = false, + disabled = false, ...rest }: ButtonProps & { target?: HTMLAttributeAnchorTarget }) { const sizes = { @@ -94,6 +98,10 @@ export function Button({ 'active:scale-100', 'transition-all', + 'disabled:opacity-5', + 'disabled:cursor-not-allowed', + 'disabled:hover:shadow-none', + 'grow-0', 'shrink-0', 'truncate', @@ -119,7 +127,13 @@ export function Button({ } return ( - diff --git a/packages/gitbook/src/components/primitives/Loading.tsx b/packages/gitbook/src/components/primitives/Loading.tsx index 2935d7ca84..ed867a5bef 100644 --- a/packages/gitbook/src/components/primitives/Loading.tsx +++ b/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} > + {busy ? 'Loading' : 'Loaded'}