Skip to content

AI Page Journeys #3131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

AI Page Journeys #3131

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8547867
Initial version
zenoachtig Apr 8, 2025
0e15229
Second iteration
zenoachtig Apr 8, 2025
cb2cc52
Third iteration
zenoachtig Apr 9, 2025
83e02b6
Iteration 4
zenoachtig Apr 9, 2025
3cdba0a
Cleanup & format
zenoachtig Apr 9, 2025
d8cfb10
Format
zenoachtig Apr 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Iteration 4
  • Loading branch information
@zenoachtig
zenoachtig committed May 1, 2025
commit 83e02b621aec73692a0306499ed20a7c274efa7a
140 changes: 75 additions & 65 deletions packages/gitbook/src/components/Adaptive/AINextPageSuggestions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,97 +16,105 @@ export function AINextPageSuggestions() {
const currentPage = usePageContext();
const visitedPages = useVisitedPages((state) => state.pages);

const [pages, setPages] = useState<SuggestedPage[]>(
selectedJourney?.pages ?? Array.from({ length: 5 })
);
const [pages, setPages] = useState<SuggestedPage[]>(selectedJourney?.pages ?? []);
const [suggestedPages, setSuggestedPages] = useState<SuggestedPage[]>([]);

useEffect(() => {
let canceled = false;

if (selectedJourney?.pages && selectedJourney.pages.length > 0) {
setPages(selectedJourney.pages);
} else {
setPages(suggestedPages);
}

(async () => {
const stream = await streamNextPageSuggestions({
currentPage: {
id: currentPage.pageId,
title: currentPage.title,
},
currentSpace: {
id: currentPage.spaceId,
},
visitedPages: visitedPages,
});
if (suggestedPages.length === 0) {
(async () => {
const stream = await streamNextPageSuggestions({
currentPage: {
id: currentPage.pageId,
title: currentPage.title,
},
currentSpace: {
id: currentPage.spaceId,
},
visitedPages: visitedPages,
});

for await (const page of stream) {
if (canceled) return;
for await (const page of stream) {
if (canceled) return;

setPages((prev) => {
const newPages = [...prev];
const emptyIndex = newPages.findIndex((j) => !j?.id);
if (emptyIndex >= 0) {
newPages[emptyIndex] = page;
}
return newPages;
});
}
})();
setPages((prev) => [...prev, page]);
setSuggestedPages((prev) => [...prev, page]);
}
})();
}

return () => {
canceled = true;
};
}, [selectedJourney, currentPage.pageId, currentPage.spaceId, currentPage.title, visitedPages]);
}, [
selectedJourney,
currentPage.pageId,
currentPage.spaceId,
currentPage.title,
visitedPages,
suggestedPages,
]);

return (
<AnimatePresence initial={false}>
{open && (
<motion.div
key="next-page-suggestions"
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
>
<div className="relative mb-2 flex flex-row items-center gap-3">
open && (
<div className="animate-fadeIn">
<motion.div className="mb-2 flex flex-row items-start gap-3">
<AnimatePresence mode="wait">
{selectedJourney?.icon ? (
<Icon
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.8 }}
transition={{ delay: 0.2 }}
key={selectedJourney.icon}
icon={selectedJourney.icon as IconName}
className="absolute left-0 size-6 animate-scaleIn text-tint-subtle [animation-delay:100ms]"
/>
>
<Icon
icon={selectedJourney.icon as IconName}
className="left-0 mt-2 size-6 shrink-0 text-tint-subtle"
/>
</motion.div>
) : null}
<div
className={tcls(
'flex flex-col transition-all',
selectedJourney?.icon ? 'ml-9' : 'delay-0'
)}
>
<div className="flex flex-row items-center gap-2 font-semibold text-tint text-xs uppercase tracking-wide">
Suggested pages
</div>
</AnimatePresence>
<motion.div className={tcls('flex flex-col')} layout="position">
<div className="font-semibold text-tint text-xs uppercase tracking-wide">
Suggested pages
</div>
<AnimatePresence mode="wait">
{selectedJourney?.label ? (
<h5
<motion.h5
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
key={selectedJourney.label}
className="animate-fadeIn font-semibold text-base"
className="font-semibold text-base"
>
{selectedJourney.label}
</h5>
</motion.h5>
) : null}
</div>
</div>
<div className="-mb-1.5 flex flex-col gap-1">
{pages.map((page, index) =>
page?.id ? (
</AnimatePresence>
</motion.div>
</motion.div>
<div className="-mb-1.5 flex flex-col gap-1">
{Object.assign(Array.from({ length: 5 }), pages).map(
(page: SuggestedPage | undefined, index) =>
page ? (
<Link
key={selectedJourney?.label + page.id}
key={`${selectedJourney?.label}-${page.id}`}
className="-mx-2 flex animate-fadeIn gap-2 rounded px-2.5 py-1 transition-all hover:bg-tint-hover hover:text-tint-strong"
href={page.href}
style={{ animationDelay: `${0.2 + index * 0.05}s` }}
>
{page.icon ? (
<Icon
icon={page.icon as IconName}
className="mt-0.5 size-4 text-tint-subtle"
className="mt-0.5 size-4 shrink-0 text-tint-subtle"
/>
) : null}
{page.emoji ? <Emoji code={page.emoji} /> : null}
Expand All @@ -116,13 +124,15 @@ export function AINextPageSuggestions() {
<div
key={index}
className="my-1 h-5 animate-pulse rounded bg-tint-hover"
style={{ animationDelay: `${index * 0.2}s`, width: `${(((index * 17) % 50) + 50)}%` }}
style={{
animationDelay: `${index * 0.2}s`,
width: `${((index * 17) % 50) + 50}%`,
}}
/>
)
)}
</div>
</motion.div>
)}
</AnimatePresence>
)}
</div>
</div>
)
);
}
44 changes: 19 additions & 25 deletions packages/gitbook/src/components/Adaptive/AIPageJourneySuggestions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,38 @@
'use client';
import { tcls } from '@/lib/tailwind';
import { Icon, type IconName } from '@gitbook/icons';
import { AnimatePresence, motion } from 'framer-motion';
import { useAdaptiveContext } from './AdaptiveContext';
import { JOURNEY_COUNT, type Journey, useAdaptiveContext } from './AdaptiveContext';

export function AIPageJourneySuggestions() {
const { journeys, selectedJourney, setSelectedJourney, open } = useAdaptiveContext();

return (
<AnimatePresence initial={false}>
{open && (
<motion.div
key="page-journey-suggestions"
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
>
<div className="mb-2 flex flex-row items-center gap-1 font-semibold text-tint text-xs uppercase tracking-wide">
More to explore
</div>
<div className="grid grid-cols-2 gap-2">
{journeys.map((journey, i) => {
open && (
<div className="animate-fadeIn">
<div className="mb-2 flex flex-row items-center gap-1 font-semibold text-tint text-xs uppercase tracking-wide">
More to explore
</div>
<div className="grid grid-cols-2 gap-2">
{Object.assign(Array.from({ length: JOURNEY_COUNT }), journeys).map(
(journey: Journey | undefined, index) => {
const isSelected =
journey?.label && journey.label === selectedJourney?.label;
const isLoading = journey?.label === undefined;
const isLoading = !journey || journey?.label === undefined;
return (
<button
type="button"
key={i}
key={index}
disabled={journey?.label === undefined}
className={tcls(
'flex flex-col items-center justify-center gap-2 rounded bg-tint px-2 py-4 text-center ring-1 ring-tint-subtle ring-inset transition-all',
isLoading
? 'h-24 scale-90 animate-pulse'
: 'hover:bg-tint-hover hover:text-tint-strong hover:ring-tint',
: 'hover:bg-tint-hover hover:text-tint-strong hover:ring-tint active:scale-95',
isSelected &&
'bg-primary-active text-primary-strong ring-2 ring-primary hover:bg-primary-active hover:ring-primary'
)}
style={{
animationDelay: `${i * 0.2}s`,
animationDelay: `${index * 0.2}s`,
}}
onClick={() =>
setSelectedJourney(isSelected ? undefined : journey)
Expand All @@ -51,16 +45,16 @@ export function AIPageJourneySuggestions() {
/>
) : null}
{journey?.label ? (
<span className="animate-fadeIn [animation-delay:400ms]">
<span className="animate-fadeIn leading-tight [animation-delay:400ms]">
{journey.label}
</span>
) : null}
</button>
);
})}
</div>
</motion.div>
)}
</AnimatePresence>
}
)}
</div>
</div>
)
);
}
19 changes: 6 additions & 13 deletions packages/gitbook/src/components/Adaptive/AdaptiveContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export type SuggestedPage = {
emoji?: string;
};

type Journey = {
export type Journey = {
label: string;
icon?: string;
pages?: Array<SuggestedPage>;
Expand All @@ -30,7 +30,7 @@ type AdaptiveContextType = {

export const AdaptiveContext = React.createContext<AdaptiveContextType | null>(null);

const JOURNEY_COUNT = 4;
export const JOURNEY_COUNT = 4;

/**
* Client side context provider to pass information about the current page.
Expand All @@ -39,9 +39,7 @@ export function JourneyContextProvider({
children,
spaces,
}: { children: React.ReactNode; spaces: { id: string; title: string }[] }) {
const [journeys, setJourneys] = React.useState<Journey[]>(
Array.from({ length: JOURNEY_COUNT })
);
const [journeys, setJourneys] = React.useState<Journey[]>([]);
const [selectedJourney, setSelectedJourney] = React.useState<Journey | undefined>(undefined);
const [loading, setLoading] = React.useState(true);
const [open, setOpen] = React.useState(true);
Expand All @@ -52,6 +50,8 @@ export function JourneyContextProvider({
useEffect(() => {
let canceled = false;

setJourneys([]);

(async () => {
const stream = await streamPageJourneySuggestions({
count: JOURNEY_COUNT,
Expand All @@ -69,14 +69,7 @@ export function JourneyContextProvider({
for await (const journey of stream) {
if (canceled) return;

setJourneys((prev) => {
const newJourneys = [...prev];
const emptyIndex = newJourneys.findIndex((j) => !j?.label);
if (emptyIndex >= 0) {
newJourneys[emptyIndex] = journey;
}
return newJourneys;
});
setJourneys((prev) => [...prev, journey]);
}

setLoading(false);
Expand Down
2 changes: 1 addition & 1 deletion packages/gitbook/src/components/Adaptive/AdaptivePane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function AdaptivePane() {
<div
className={tcls(
'flex flex-col gap-4 rounded-md straight-corners:rounded-none bg-tint-subtle ring-1 ring-tint-subtle ring-inset transition-all duration-300',
open ? 'w-72 px-4 py-4' : 'w-56 p-3'
open ? 'w-72 px-4 py-4' : 'w-56 px-4 py-3'
)}
>
<AdaptivePaneHeader />
Expand Down
7 changes: 1 addition & 6 deletions packages/gitbook/src/components/Adaptive/AdaptivePaneHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,7 @@ export function AdaptivePaneHeader() {
const { loading, open, setOpen } = useAdaptiveContext();

return (
<div
className={tcls(
'flex flex-row items-center gap-3 rounded-md straight-corners:rounded-none transition-all duration-500',
open ? '' : ''
)}
>
<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} />
Expand Down
Loading