feat: Cookbook Onboard integration

fix

components/ask_cookbook.d.ts

@@ -0,0 +1,4 @@
+// Solves the following error: "Cannot find module ... or its corresponding type declarations. There are types at ..., but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'. [2307]"
+declare module "@cookbookdev/docsbot/react" {
+  export { default } from "@cookbookdev/docsbot/dist/react/index.ts"
+}

components/ask_cookbook.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import dynamic from "next/dynamic";
+const BaseAskCookbook = dynamic(import("@cookbookdev/docsbot/react"), { ssr: false });
+
+/** It's going to be exposed in HTTP requests anyway so it's fine to just hardcode it here */
+const COOKBOOK_PUBLIC_API_KEY =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NmI2NTAxNmExMTM5ZTYzYzhhM2ZkYzEiLCJpYXQiOjE3MjMyMjQwODYsImV4cCI6MjAzODgwMDA4Nn0.MAx1zYslk6qcJmwgcKcVOKnztIZxsKxcBCMPgYiEqiU";
+
+export const AskCookbook = () => {
+  return <BaseAskCookbook apiKey={COOKBOOK_PUBLIC_API_KEY} />;
+};

package.json

@@ -9,6 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@cookbookdev/docsbot": "^4.21.15",
     "next": "^14.2.3",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",

theme.config.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useConfig, DocsThemeConfig } from "nextra-theme-docs";
+import { AskCookbook } from "./components/ask_cookbook";
 const config: DocsThemeConfig = {
   logo: (
     <svg height="20" viewBox="0 0 600 86" xmlns="http://www.w3.org/2000/svg">
@@ -121,6 +122,13 @@ const config: DocsThemeConfig = {
   footer: {
     text: "Abstract Docs © 2024",
   },
+  navbar: {
+    extraContent() {
+      return (
+        <AskCookbook />
+      )
+    }
+  },
   primaryHue: {
     // light green
     light: (0, 22, 115),