feat(docs): persistent session id and clerk in docs (CopilotKit#518)

Author: arielweinberger

docs/components/index.ts

@@ -2,3 +2,4 @@ export * from "./frame";
 export * from "./sidenav/sidenav-title-with-icon";
 export * from "./reference/property-reference";
 export * from "./copilotkit-css";
+export * from "./link-to-copilot-cloud";

docs/components/link-to-copilot-cloud.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useAuth } from "@clerk/nextjs";
+import posthog from "posthog-js";
+
+export function LinkToCopilotCloud({
+  className,
+  subPath,
+  asLink = true,
+  children
+}: {
+  className?: string;
+  subPath?: string;
+  asLink?: boolean;
+  children?: React.ReactNode;
+}) {
+  const [isClient, setIsClient] = useState(false);
+  const { userId } = useAuth();
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null;
+  }
+  const url = new URL(`https://cloud.copilotkit.ai`);
+  url.searchParams.set("ref", "docs");
+
+  const sessionId = posthog.get_session_id();
+
+  if (sessionId) {
+    url.searchParams.set("session_id", sessionId);
+  }
+
+  if (subPath) {
+    url.pathname += subPath;
+  }
+
+  let cn = `${className}`;
+
+  if (asLink) {
+    cn = "_text-primary-600 decoration-from-font underline [text-underline-position:from-font]";
+  }
+
+  return (
+    <Link
+      href={url.toString()}
+      target="_blank"
+      className={`${cn}`}
+    >
+      {
+        children ? children : userId ? "Go to Copilot Cloud" : "Sign up to Copilot Cloud"
+      }
+    </Link>
+  );
+}

docs/globals.css

@@ -48,6 +48,14 @@ button:has(.nested-title) > svg {
   @apply hidden;
 }
 
+button:has(.disable-menu) > svg {
+  @apply hidden;
+}
+
+[id^="headlessui-menu-items-"] {
+  @apply hidden !important;
+}
+
 .nested-title {
   @apply text-gray-900 font-semibold [&:not(:first-child)]:mt-5 mb-2 pb-1.5;
 }

docs/lib/hooks/usePostHog.tsx docs/lib/providers/PostHogProvider.tsxdocs/lib/hooks/usePostHog.tsx renamed to docs/lib/providers/PostHogProvider.tsx

@@ -1,16 +1,26 @@
-// Check that PostHog is client-side (used to handle Next.js SSR)
-import { useRouter } from "next/router";
+import { PostHogProvider as PostHogProviderBase } from "posthog-js/react";
 import posthog from "posthog-js";
+import { useRouter } from "next/router";
 import { useEffect } from "react";
+import { useAuth } from "@clerk/nextjs";
+import { useSearchParams } from "next/navigation";
 
 const POSTHOG_KEY = process.env.POSTHOG_KEY;
 const POSTHOG_HOST = process.env.POSTHOG_HOST;
 
 if (typeof window !== "undefined") {
+  // Get search param
+  const searchParams = new URLSearchParams(window.location.search);
+  const sessionId = searchParams.get("session_id");
+  
   if (POSTHOG_KEY && POSTHOG_HOST) {
+
     posthog.init(POSTHOG_KEY, {
       api_host: POSTHOG_HOST,
       person_profiles: "identified_only",
+      bootstrap: {
+        sessionID: sessionId ?? undefined,
+      },
       // Enable debug mode in development
       loaded: (posthog) => {
         if (process.env.NODE_ENV === "development") posthog.debug();
@@ -19,8 +29,18 @@ if (typeof window !== "undefined") {
   }
 }
 
-export function usePostHog() {
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
   const router = useRouter();
+  const { userId } = useAuth();
+  const searchParams = useSearchParams();
+
+  const sessionId = searchParams.get("session_id");
+
+  posthog?.set_config({
+    bootstrap: {
+      sessionID: sessionId ?? undefined,
+    },
+  });
 
   useEffect(() => {
     if (!POSTHOG_KEY || !POSTHOG_HOST) return;
@@ -36,5 +56,11 @@ export function usePostHog() {
     };
   }, []);
 
-  return { posthog };
-}
+  useEffect(() => {
+    if (userId) {
+      posthog?.identify(userId);
+    }
+  }, [userId]);
+
+  return <PostHogProviderBase client={posthog}>{children}</PostHogProviderBase>;
+}

docs/next.config.mjs

@@ -12,6 +12,7 @@ export default withNextra({
     POSTHOG_KEY: process.env.POSTHOG_KEY,
     POSTHOG_HOST: process.env.POSTHOG_HOST,
     SCARF_PIXEL_ID: process.env.SCARF_PIXEL_ID,
+    CLERK_PUBLISHABLE_KEY: process.env.CLERK_PUBLISHABLE_KEY || "pk_live_Y2xlcmsuY29waWxvdGtpdC5haSQ",
   },
   async redirects() {
     return [

docs/package.json

@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@clerk/nextjs": "^5.2.8",
     "@stackblitz/sdk": "^1.11.0",
     "@vercel/og": "^0.6.2",
     "next": "^14.2.5",

docs/pages/_app.tsx

@@ -2,9 +2,9 @@ import "../globals.css";
 import { AppProps } from "next/app";
 import { IBM_Plex_Sans } from "next/font/google";
 import { useRB2B } from "../lib/hooks/useRB2B";
-import { PostHogProvider } from "posthog-js/react";
-import { usePostHog } from "../lib/hooks/usePostHog";
 import { ScarfPixel } from "../lib/ScarfPixel";
+import { ClerkProvider } from "@clerk/nextjs";
+import { PostHogProvider } from "../lib/providers/PostHogProvider";
 
 const plex = IBM_Plex_Sans({
   subsets: ["latin"],
@@ -13,16 +13,17 @@ const plex = IBM_Plex_Sans({
 
 export default function App({ Component, pageProps }: AppProps) {
   useRB2B();
-  const { posthog } = usePostHog();
 
   return (
     <>
-      <PostHogProvider client={posthog}>
-        <main className={plex.className}>
-          <Component {...pageProps} />
-        </main>
-      </PostHogProvider>
-      <ScarfPixel />
+      <ClerkProvider publishableKey={process.env.CLERK_PUBLISHABLE_KEY}>
+        <PostHogProvider>
+          <main className={plex.className}>
+            <Component {...pageProps} />
+          </main>
+        </PostHogProvider>
+        <ScarfPixel />
+      </ClerkProvider>
     </>
   );
 }

docs/pages/_meta.tsx

@@ -1,4 +1,12 @@
+import { LinkToCopilotCloud } from "../components/link-to-copilot-cloud";
+
 export default {
+  "copilot-cloud": {
+    title: (
+      <LinkToCopilotCloud asLink={false} className="disable-menu bg-indigo-500 py-1 px-4 text-white font-medium rounded-full" />
+    ),
+    type: "menu",
+  },
   "___getting-started": {
     type: "separator",
     title: "Getting Started",
@@ -15,15 +23,15 @@ export default {
   "tutorial-textarea": {
     title: "Tutorial: Textarea Autocomplete",
   },
-  "concepts": {
+  concepts: {
     title: <span className="nested-title">Concepts</span>,
     type: "doc",
   },
-  "reference": {
+  reference: {
     title: <span className="nested-title">Reference</span>,
     type: "doc",
   },
-  "___contributing": {
+  ___contributing: {
     type: "separator",
     title: "Contributing",
   },
@@ -33,7 +41,7 @@ export default {
   "documentation-contributions": {
     title: "Documentation Contributions",
   },
-  "___extras": {
+  ___extras: {
     type: "separator",
     title: "Extras",
   },

docs/pages/quickstart-chatbot.mdx

@@ -1,5 +1,6 @@
 import { Callout } from "nextra/components";
 import { Tabs } from "nextra/components";
+import { LinkToCopilotCloud } from "../components";
 
 # Quickstart: Chatbot
 
@@ -17,7 +18,7 @@ First, you must wrap all components that interact with your copilot with the [`<
 Additionally, let's use the [`<CopilotSidebar />`](/reference/components/CopilotSidebar) UI component to display the copilot chat sidebar. Some other options you can choose from are [`<CopilotPopup />`](/reference/components/CopilotPopup) and [`<CopilotChat />`](/reference/components/CopilotChat).
 
 <Callout type="info">
-  Copilot Cloud is the easiest way to get started with CopilotKit. [Sign up for free and get your public API key](https://cloud.copilotkit.ai), then replace `<your-public-api-key>` with your actual API key.
+  Copilot Cloud is the easiest way to get started with CopilotKit.  <LinkToCopilotCloud>Sign up for free and get your public API key</LinkToCopilotCloud>, then replace `<your-public-api-key>` with your actual API key.
 
   If you prefer to self-host, you will need to [set up your Copilot Runtime endpoint](/concepts/copilot-runtime).
 </Callout>

docs/pages/reference/components/CopilotKit.mdx

@@ -1,5 +1,6 @@
 import { Tabs } from "nextra/components";
 import { PropertyReference } from "../../../components/reference/property-reference";
+import { LinkToCopilotCloud } from "../../../components";
 
 # `<CopilotKit />`
 
@@ -10,7 +11,7 @@ This component will typically wrap your entire application (or a sub-tree of you
 <Tabs items={["Copilot Cloud (Recommended)", "Self-hosted Runtime"]}>
   <Tabs.Tab>
 
-    You can get your Copilot Cloud API key for free by [signing up here](https://cloud.copilotkit.ai).
+    You can get your Copilot Cloud API key for free by <LinkToCopilotCloud>signing up here</LinkToCopilotCloud>.
 
     ```tsx
     import { CopilotKit } from "@copilotkit/react-core";
@@ -41,7 +42,7 @@ This component will typically wrap your entire application (or a sub-tree of you
 </PropertyReference>
 
 <PropertyReference name="publicApiKey" type="string">
-  Your Copilot Cloud API key. Don't have it yet? [Click here to sign up for free](https://cloud.copilotkit.ai).
+  Your Copilot Cloud API key. Don't have it yet? <LinkToCopilotCloud>Click here to sign up for free</LinkToCopilotCloud>.
 </PropertyReference>
 
 <PropertyReference name="cloudRestrictToTopic" cloudOnly type="{ validTopics?: string[]; invalidTopics?: string[]; }" >