feat: Cookbook Onboard (AI Assistant & Playground) integration

components/AskCookbook/AskCookbook.tsx

@@ -0,0 +1,10 @@
+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.eyJzdWIiOiI2NjdlZmMxYjcyYzRmNTI5YzMxODUyZmUiLCJpYXQiOjE3MTk1OTgxMDcsImV4cCI6MjAzNTE3NDEwN30.etICfDHEcewxP9QTajrS4ggral2IgaxY_rWAlK4kNiQ";
+
+export const AskCookbook = () => {
+	return <BaseAskCookbook apiKey={COOKBOOK_PUBLIC_API_KEY} />;
+};

components/AskCookbook/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.d.ts"
+}

components/AskCookbook/index.ts

@@ -0,0 +1 @@
+export * from './AskCookbook';

package.json

@@ -11,6 +11,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@cookbookdev/docsbot": "^4.21.15",
     "@mantine/core": "^7.10.1",
     "@mantine/hooks": "^7.10.1",
     "@mdx-js/loader": "^3.0.1",

pages/_app.tsx

@@ -4,14 +4,15 @@ import '@rainbow-me/rainbowkit/styles.css';
 import {ThemeProvider} from 'next-themes';
 import '@mantine/core/styles.css';
 import {MantineWrapper} from "../components/MantineWrapper";
-
+import {AskCookbook} from "../components/AskCookbook";
 
 export default function Nextra({ Component, pageProps }) {
     return (
         <ThemeProvider attribute="class">
             <MantineWrapper>
                 <Component {...pageProps} />
             </MantineWrapper>
+            <AskCookbook />
         </ThemeProvider>
 
   );