WIP

.changeset/afraid-impalas-bow.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': patch
+'gitbook': patch
+---
+
+Fix missing headers in OpenAPIResponses

.changeset/spotty-brooms-itch.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': patch
+'gitbook': patch
+---
+
+Fix OpenAPI enum display

bun.lock

@@ -35,7 +35,7 @@
     },
     "packages/colors": {
       "name": "@gitbook/colors",
-      "version": "0.3.0",
+      "version": "0.3.1",
       "devDependencies": {
         "typescript": "^5.5.3",
       },
@@ -49,7 +49,7 @@
     },
     "packages/gitbook": {
       "name": "gitbook",
-      "version": "0.8.2",
+      "version": "0.9.1",
       "dependencies": {
         "@gitbook/api": "*",
         "@gitbook/cache-do": "workspace:*",
@@ -136,7 +136,7 @@
     },
     "packages/gitbook-v2": {
       "name": "gitbook-v2",
-      "version": "0.2.2",
+      "version": "0.2.3",
       "dependencies": {
         "@gitbook/api": "*",
         "@gitbook/cache-tags": "workspace:*",
@@ -162,7 +162,7 @@
       "name": "@gitbook/icons",
       "version": "0.2.0",
       "bin": {
-        "gitbook-icons": "./bin/gitbook-icons.js",
+        "gitbook-icons": "./bin/gitbook-icons.js"
       },
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.6.0",
@@ -180,7 +180,7 @@
     },
     "packages/openapi-parser": {
       "name": "@gitbook/openapi-parser",
-      "version": "2.1.1",
+      "version": "2.1.2",
       "dependencies": {
         "@scalar/openapi-parser": "^0.10.10",
         "@scalar/openapi-types": "^0.1.9",
@@ -219,7 +219,7 @@
       "name": "@gitbook/react-math",
       "version": "0.6.0",
       "bin": {
-        "gitbook-math": "./bin/gitbook-math.js",
+        "gitbook-math": "./bin/gitbook-math.js"
       },
       "dependencies": {
         "object-hash": "^3.0.0",
@@ -234,7 +234,7 @@
     },
     "packages/react-openapi": {
       "name": "@gitbook/react-openapi",
-      "version": "1.1.6",
+      "version": "1.1.8",
       "dependencies": {
         "@gitbook/openapi-parser": "workspace:*",
         "@scalar/api-client-react": "^1.2.5",

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

@@ -179,4 +179,9 @@ export interface GitBookDataFetcher {
         integrationName: string;
         request: api.RenderIntegrationUI;
     }): Promise<DataFetcherResponse<api.ContentKitRenderOutput>>;
+
+    getAction(params: {
+        url: string
+        claims: any
+    }): Promise<DataFetcherResponse<{ text: string; url: string; icon?: string }>>;
 }

packages/gitbook/src/app/(global)/~gitbook/revalidate/route.ts

@@ -25,10 +25,21 @@ export async function POST(req: NextRequest) {
         );
     }
 
-    const result = await revalidateTags(json.tags);
+    try {
+        const result = await revalidateTags(json.tags);
+        return NextResponse.json({
+            success: true,
+            stats: result.stats,
+        });
+    } catch (err: unknown) {
+            return NextResponse.json(
+                {
+                    error: 'Failed to revalidate tags',
+                    message: err instanceof Error ? err.message : 'Internal Server Error',
+                    stack: err instanceof Error ? err.stack : '',
+                },
+                { status: 500 }
+            );
+    }
 
-    return NextResponse.json({
-        success: true,
-        stats: result.stats,
-    });
 }

packages/gitbook/src/components/DocumentView/Inline.tsx

@@ -13,6 +13,7 @@ import assertNever from 'assert-never';
 import { Annotation } from './Annotation/Annotation';
 import type { DocumentContextProps } from './DocumentView';
 import { Emoji } from './Emoji';
+import { InlineAction } from './InlineAction';
 import { InlineImage } from './InlineImage';
 import { InlineLink } from './InlineLink';
 import { InlineMath } from './Math';
@@ -61,6 +62,8 @@ export function Inline<
             return <Mention {...contextProps} inline={inline} />;
         case 'inline-image':
             return <InlineImage {...contextProps} inline={inline} />;
+        case 'action':
+            return <InlineAction {...contextProps} inline={inline} />;
         default:
             assertNever(inline);
     }

packages/gitbook/src/components/DocumentView/InlineAction.tsx

@@ -0,0 +1,33 @@
+import { getVisitorAuthClaims } from '@/lib/adaptive';
+import { getDataOrNull } from '@v2/lib/data';
+import { getSiteURLDataFromMiddleware } from '@v2/lib/middleware';
+import type { InlineProps } from './Inline';
+import { TrackEventButton } from './TrackEventButton';
+
+export async function InlineAction(props: InlineProps<any>) {
+    const { inline, context } = props;
+
+    if (!context.contentContext) {
+        throw new Error('inline action requires a contentContext');
+    }
+
+    const action = inline.data.action;
+
+    if (action.type === 'url') {
+        return <TrackEventButton action={inline.data.action} resolved={{ url: action.url, text: action.text }} />
+    }
+
+    // API action
+
+    const { dataFetcher } = context.contentContext;
+    
+        const siteData = await getSiteURLDataFromMiddleware();
+        const claims = getVisitorAuthClaims(siteData)
+    const resolved = await getDataOrNull(dataFetcher.getAction({ url: inline.data.action.url, claims }));
+
+    if (!resolved) {
+        throw new Error('inline action not found');
+    }
+
+    return <TrackEventButton action={inline.data.action} resolved={resolved} />
+}

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -265,15 +265,11 @@
 
 /* Schema Enum */
 .openapi-schema-enum {
-    @apply flex flex-row text-sm leading-relaxed gap-2 flex-wrap text-tint;
+    @apply text-sm leading-relaxed max-w-full text-tint;
-}
-
-.openapi-schema-enum-list {
-    @apply flex flex-row gap-1.5 items-center;
 }
 
 .openapi-schema-enum-value {
-    @apply text-sm;
+    @apply text-sm mr-1.5;
 }
 
 .openapi-schema-enum-value:first-child {

packages/gitbook/src/components/DocumentView/TrackEventButton.tsx

@@ -0,0 +1,36 @@
+'use client';
+import { tcls } from '@/lib/tailwind';
+import { useTrackEvent } from '../Insights';
+import { LoadingButton } from '../primitives';
+
+export function TrackEventButton(props: {
+    action: any;
+    resolved: { url: string; text: string };
+}) {
+    const { action, resolved } = props;
+    const trackEvent = useTrackEvent();
+
+    return (
+        <LoadingButton
+            onClick={async () => {
+                trackEvent({ type: 'action_click', action: action });
+                window.open(resolved.url, '_blank', 'noopener noreferrer');
+            }}
+            href={resolved.url}
+            variant="primary"
+            size="medium"
+            className={tcls(
+                'theme-bold:bg-header-link theme-bold:text-header-background theme-bold:shadow-none theme-bold:hover:bg-header-link theme-bold:hover:text-header-background theme-bold:hover:shadow-none'
+            )}
+            // insights={{
+            //     type: 'link_click',
+            //     link: {
+            //         target: linkTarget,
+            //         position: SiteInsightsLinkPosition.Header,
+            //     },
+            // }}
+        >
+            {resolved.text}
+        </LoadingButton>
+    );
+}

packages/gitbook/src/components/Insights/InsightsProvider.tsx

@@ -93,6 +93,7 @@ export function InsightsProvider(props: InsightsProviderProps) {
     const flushEventsSync = useEventCallback(() => {
         const session = getSession();
         const visitorId = visitorIdRef.current;
+        console.log('flushEventsSync');
         if (!visitorId) {
             throw new Error('Visitor ID should be set before flushing events');
         }
@@ -126,6 +127,8 @@ export function InsightsProvider(props: InsightsProviderProps) {
             };
         }
 
+        console.log('allEvents', allEvents.length)
+
         if (allEvents.length > 0) {
             if (enabled) {
                 sendEvents({
@@ -143,6 +146,7 @@ export function InsightsProvider(props: InsightsProviderProps) {
         const visitorId = visitorIdRef.current ?? (await getVisitorId(appURL));
         visitorIdRef.current = visitorId;
 
+        console.log('flushBatchedEvents');
         flushEventsSync();
     }, 1500);
 
@@ -167,6 +171,8 @@ export function InsightsProvider(props: InsightsProviderProps) {
                 context,
             };
 
+            console.log('trackEvent', event, eventsRef.current[pathname].pageContext);
+
             if (eventsRef.current[pathname].pageContext !== undefined) {
                 // If the pageId is set, we know that the page_view event has been tracked
                 // and we can flush the events

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

@@ -6,7 +6,7 @@ import { type ClassValue, tcls } from '@/lib/tailwind';
 
 import { Link, type LinkInsightsProps } from './Link';
 
-type ButtonProps = {
+export type ButtonProps = {
     href?: string;
     variant?: 'primary' | 'secondary';
     size?: 'default' | 'medium' | 'small';

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

@@ -0,0 +1,16 @@
+'use client';
+
+import { tcls } from '@/lib/tailwind';
+import { useTransition } from 'react';
+import { Button, type ButtonProps } from './Button';
+
+export function LoadingButton({ href, onClick, className, ...rest }: ButtonProps & { onClick: () => Promise<void> }) {
+    const [isPending, startTransition] = useTransition();
+
+    const handleClick = (e) => {
+        e.preventDefault();
+        startTransition(onClick);
+        return false;
+    }
+    return <Button className={tcls(className, isPending ? 'animate-pulse' : '')} {...rest} onClick={handleClick} />
+}

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

@@ -8,3 +8,4 @@ export * from './StyledLink';
 export * from './DateRelative';
 export * from './Emoji';
 export * from './LoadingPane';
+export * from './LoadingButton';

packages/gitbook/src/lib/tracking.ts

@@ -6,6 +6,7 @@ import { headers } from 'next/headers';
 export async function shouldTrackEvents(): Promise<boolean> {
     const headersList = await headers();
 
+    return true;
     if (
         process.env.NODE_ENV === 'development' ||
         (process.env.GITBOOK_BLOCK_PAGE_VIEWS_TRACKING &&

packages/gitbook/src/lib/v1.ts

@@ -270,6 +270,22 @@ async function getDataFetcherV1(): Promise<GitBookDataFetcher> {
                 return result;
             });
         },
+
+        getAction(params) {
+            return wrapDataFetcherError(async () => {
+                console.log('fetching', params.url);
+                const url = new URL(params.url);
+                Object.keys(params.claims).forEach((key) => {
+                    url.searchParams.append(key, params.claims[key]);
+                });
+                const result = await fetch(url.toString());
+                console.log('fetched', result.statusText)
+                if (!result) {
+                    throw new DataFetcherError('Action not found', 404);
+                }
+                return await result.json();
+            });
+        }
     };
 
     return dataFetcher;

packages/react-openapi/src/OpenAPIResponse.tsx

@@ -36,13 +36,15 @@ export function OpenAPIResponse(props: {
                     />
                 </OpenAPIDisclosure>
             ) : null}
-            <div className="openapi-responsebody">
+            {mediaType.schema && (
-                <OpenAPISchemaProperties
+                <div className="openapi-responsebody">
-                    id={`response-${context.blockKey}`}
+                    <OpenAPISchemaProperties
-                    properties={mediaType.schema ? [{ schema: mediaType.schema }] : []}
+                        id={`response-${context.blockKey}`}
-                    context={context}
+                        properties={[{ schema: mediaType.schema }]}
-                />
+                        context={context}
-            </div>
+                    />
+                </div>
+            )}
         </div>
     );
 }

packages/react-openapi/src/OpenAPIResponses.tsx

@@ -21,7 +21,42 @@ export function OpenAPIResponses(props: {
                 icon={context.icons.chevronRight}
                 groups={Object.entries(responses).map(
                     ([statusCode, response]: [string, OpenAPIV3.ResponseObject]) => {
-                        const content = Object.entries(response.content ?? {});
+                        const tabs = (() => {
+                            // If there is no content, but there are headers, we need to show the headers
+                            if (
+                                (!response.content || !Object.keys(response.content).length) &&
+                                response.headers &&
+                                Object.keys(response.headers).length
+                            ) {
+                                return [
+                                    {
+                                        id: 'default',
+                                        body: (
+                                            <OpenAPIResponse
+                                                response={response}
+                                                mediaType={{}}
+                                                context={context}
+                                            />
+                                        ),
+                                    },
+                                ];
+                            }
+
+                            return Object.entries(response.content ?? {}).map(
+                                ([contentType, mediaType]) => ({
+                                    id: contentType,
+                                    label: contentType,
+                                    body: (
+                                        <OpenAPIResponse
+                                            response={response}
+                                            mediaType={mediaType}
+                                            context={context}
+                                        />
+                                    ),
+                                })
+                            );
+                        })();
+
                         const description = response.description;
 
                         return {
@@ -39,17 +74,7 @@ export function OpenAPIResponses(props: {
                                     ) : null}
                                 </div>
                             ),
-                            tabs: content.map(([contentType, mediaType]) => ({
+                            tabs,
-                                id: contentType,
-                                label: contentType,
-                                body: (
-                                    <OpenAPIResponse
-                                        response={response}
-                                        mediaType={mediaType}
-                                        context={context}
-                                    />
-                                ),
-                            })),
                         };
                     }
                 )}

packages/react-openapi/src/OpenAPISchema.tsx

@@ -275,22 +275,20 @@ function OpenAPISchemaEnum(props: {
     }
 
     return (
-        <div className="openapi-schema-enum">
+        <span className="openapi-schema-enum">
-            <span>Available options:</span>
+            Available options:{' '}
-            <div className="openapi-schema-enum-list">
+            {enumValues.map((item, index) => (
-                {enumValues.map((item, index) => (
+                <span key={index} className="openapi-schema-enum-value">
-                    <span key={index} className="openapi-schema-enum-value">
+                    <OpenAPICopyButton
-                        <OpenAPICopyButton
+                        value={item.value}
-                            value={item.value}
+                        label={item.description}
-                            label={item.description}
+                        withTooltip={!!item.description}
-                            withTooltip={!!item.description}
+                    >
-                        >
+                        <code>{`${item.value}`}</code>
-                            <code>{`${item.value}`}</code>
+                    </OpenAPICopyButton>
-                        </OpenAPICopyButton>
+                </span>
-                    </span>
+            ))}
-                ))}
+        </span>
-            </div>
-        </div>
     );
 }