feat: Cookbook Onboard integration

fix

package.json

@@ -17,6 +17,7 @@
     "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
+    "@cookbookdev/docsbot": "^4.21.5",
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.3",
     "@emotion/serialize": "1.1.3",

src/components/shared/components/AskCookbook.tsx

@@ -0,0 +1,10 @@
+import dynamic from "next/dynamic";
+const BaseAskCookbook = dynamic(() => import("@cookbookdev/docsbot/react-fixed"), { 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.eyJzdWIiOiI2NWNhYjFkMjU4OGEwOTU1ZDNjYWU2ZmYiLCJpYXQiOjE3MDc3ODI2MTAsImV4cCI6MjAyMzM1ODYxMH0.CxSlf6zY94GhJ93UPvw3_btAcDODHOP0MjmMEZuqb1M";
+
+export const AskCookbook = () => {
+  return <BaseAskCookbook apiKey={COOKBOOK_PUBLIC_API_KEY} />;
+};

src/pages/_app.tsx

@@ -7,6 +7,7 @@ import type { AppProps } from "next/app";
 import Script from "next/script";
 
 import { HeadProgressBar, Layout } from "~/components/shared";
+import { AskCookbook } from "~/components/shared/components/AskCookbook";
 import { environment } from "~/env.cjs";
 import { useAppAnalytics } from "~/hooks/useAppAnalytics";
 import { useAppDispatch, wrapper } from "~/lib/app.store";
@@ -55,6 +56,7 @@ const App = ({ Component, pageProps, ...rest }: AppProps & { emotionCache: Emoti
           </Script>
         </>
       )}
+      <AskCookbook />
     </>
   );
 };

src/types/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-fixed" {
+  export { default } from "@cookbookdev/docsbot/dist/react-fixed/index.d.ts";
+}