Unify layout and fix tracking of ask_question (#3610)

Author: SamyPesse

.changeset/ten-files-talk.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix event ask_question not being tracked

packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/~gitbook/embed/layout.tsx

@@ -5,6 +5,8 @@ import {
     generateEmbeddableViewport,
 } from '@/components/Embeddable';
 import { getEmbeddableStaticContext } from '@/lib/embeddable';
+import { shouldTrackEvents } from '@/lib/tracking';
+import { headers } from 'next/headers';
 
 interface SiteStaticLayoutProps {
     params: Promise<RouteLayoutParams>;
@@ -14,9 +16,18 @@ export default async function RootLayout({
     params,
     children,
 }: React.PropsWithChildren<SiteStaticLayoutProps>) {
-    const { context } = await getEmbeddableStaticContext(await params);
+    const { context, visitorAuthClaims } = await getEmbeddableStaticContext(await params);
+    const withTracking = shouldTrackEvents(await headers());
 
-    return <EmbeddableRootLayout context={context}>{children}</EmbeddableRootLayout>;
+    return (
+        <EmbeddableRootLayout
+            context={context}
+            withTracking={withTracking}
+            visitorAuthClaims={visitorAuthClaims}
+        >
+            {children}
+        </EmbeddableRootLayout>
+    );
 }
 
 export async function generateViewport({ params }: SiteStaticLayoutProps) {

packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/~gitbook/embed/layout.tsx

@@ -5,6 +5,7 @@ import {
     generateEmbeddableViewport,
 } from '@/components/Embeddable';
 import { getEmbeddableStaticContext } from '@/lib/embeddable';
+import { shouldTrackEvents } from '@/lib/tracking';
 
 interface SiteStaticLayoutProps {
     params: Promise<RouteLayoutParams>;
@@ -14,9 +15,18 @@ export default async function RootLayout({
     params,
     children,
 }: React.PropsWithChildren<SiteStaticLayoutProps>) {
-    const { context } = await getEmbeddableStaticContext(await params);
+    const { context, visitorAuthClaims } = await getEmbeddableStaticContext(await params);
+    const withTracking = shouldTrackEvents();
 
-    return <EmbeddableRootLayout context={context}>{children}</EmbeddableRootLayout>;
+    return (
+        <EmbeddableRootLayout
+            context={context}
+            withTracking={withTracking}
+            visitorAuthClaims={visitorAuthClaims}
+        >
+            {children}
+        </EmbeddableRootLayout>
+    );
 }
 
 export async function generateViewport({ params }: SiteStaticLayoutProps) {

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

@@ -1,2 +1,3 @@
 export * from './useAI';
 export * from './useAIChat';
+export type { RenderAIMessageOptions } from './server-actions';

packages/gitbook/src/components/Embeddable/EmbeddableRootLayout.tsx

@@ -1,23 +1,29 @@
-import { AIChatProvider, AIContextProvider } from '@/components/AI';
+import { AIContextProvider } from '@/components/AI';
 import { CustomizationRootLayout } from '@/components/RootLayout';
 import {
     SiteLayoutClientContexts,
     generateSiteLayoutMetadata,
     generateSiteLayoutViewport,
 } from '@/components/SiteLayout';
+import type { VisitorAuthClaims } from '@/lib/adaptive';
 import type { GitBookSiteContext } from '@/lib/context';
 import { CustomizationAIMode } from '@gitbook/api';
+import { SpaceLayoutServerContext } from '../SpaceLayout';
 import { EmbeddableIframeAPI } from './EmbeddableIframeAPI';
 
 type EmbeddableRootLayoutProps = {
     context: GitBookSiteContext;
+    withTracking: boolean;
+    visitorAuthClaims: VisitorAuthClaims;
 };
 
 /**
  * Layout component for the embed routes.
  */
 export async function EmbeddableRootLayout({
     context,
+    withTracking,
+    visitorAuthClaims,
     children,
 }: React.PropsWithChildren<EmbeddableRootLayoutProps>) {
     return (
@@ -31,8 +37,11 @@ export async function EmbeddableRootLayout({
                     aiMode={CustomizationAIMode.Assistant}
                     trademark={context.customization.trademark.enabled}
                 >
-                    <AIChatProvider
-                        renderMessageOptions={{
+                    <SpaceLayoutServerContext
+                        context={context}
+                        withTracking={withTracking}
+                        visitorAuthClaims={visitorAuthClaims}
+                        aiChatRenderMessageOptions={{
                             withLinkPreviews: false,
                             asEmbeddable: true,
                         }}
@@ -41,17 +50,17 @@ export async function EmbeddableRootLayout({
                         <EmbeddableIframeAPI
                             baseURL={context.linker.toPathInSpace('~gitbook/embed/')}
                         />
-                    </AIChatProvider>
+                    </SpaceLayoutServerContext>
                 </AIContextProvider>
             </SiteLayoutClientContexts>
         </CustomizationRootLayout>
     );
 }
 
-export async function generateEmbeddableViewport({ context }: EmbeddableRootLayoutProps) {
+export async function generateEmbeddableViewport({ context }: { context: GitBookSiteContext }) {
     return generateSiteLayoutViewport(context);
 }
 
-export async function generateEmbeddableMetadata({ context }: EmbeddableRootLayoutProps) {
+export async function generateEmbeddableMetadata({ context }: { context: GitBookSiteContext }) {
     return generateSiteLayoutMetadata(context);
 }

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

@@ -46,7 +46,9 @@ type TrackEventCallback = <EventName extends InsightsEventName>(
     options?: InsightsEventOptions
 ) => void;
 
-const InsightsContext = React.createContext<TrackEventCallback>(() => {});
+const InsightsContext = React.createContext<TrackEventCallback>(() => {
+    console.error('useTrackEvent must be used within an InsightsProvider');
+});
 
 interface InsightsProviderProps {
     /** If true, the events will be sent to the server. */

packages/gitbook/src/components/SiteLayout/SiteLayout.tsx

@@ -13,7 +13,7 @@ import { buildVersion } from '@/lib/build';
 import { GITBOOK_API_PUBLIC_URL, GITBOOK_ASSETS_URL, GITBOOK_ICONS_URL } from '@/lib/env';
 import { getResizedImageURL } from '@/lib/images';
 import { isSiteIndexable } from '@/lib/seo';
-import { AIChatProvider, AIContextProvider } from '../AI';
+import { AIContextProvider } from '../AI';
 import { RocketLoaderDetector } from './RocketLoaderDetector';
 import { SiteLayoutClientContexts } from './SiteLayoutClientContexts';
 
@@ -58,15 +58,13 @@ export async function SiteLayout(props: {
                 aiMode={customization.ai?.mode}
                 trademark={customization.trademark.enabled}
             >
-                <AIChatProvider>
-                    <SpaceLayout
-                        context={context}
-                        withTracking={withTracking}
-                        visitorAuthClaims={visitorAuthClaims}
-                    >
-                        {children}
-                    </SpaceLayout>
-                </AIChatProvider>
+                <SpaceLayout
+                    context={context}
+                    withTracking={withTracking}
+                    visitorAuthClaims={visitorAuthClaims}
+                >
+                    {children}
+                </SpaceLayout>
             </AIContextProvider>
 
             {scripts.length > 0 ? (