feat: add ai chatbot integration with Kapa script

dfinity · Oct 11, 2023 · d7ff336 · d7ff336
1 parent c44d901
commit d7ff336
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/src/hooks/useIsDocs.ts b/src/hooks/useIsDocs.ts
@@ -0,0 +1,6 @@
+import { useLocation } from "@docusaurus/router";
+
+export function useIsDocs() {
+  const location = useLocation();
+  return location.pathname.startsWith("/docs/");
+}
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js
@@ -2,7 +2,8 @@ import React from "react";
 import { useThemeConfig } from "@docusaurus/theme-common";
 import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
 import NavbarItem from "@theme/NavbarItem";
-import { useLocation } from "@docusaurus/router";
+import { useIsDocs } from "@site/src/hooks/useIsDocs";
+
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
   return useThemeConfig().navbar.items;
@@ -14,8 +15,8 @@ export default function NavbarMobilePrimaryMenu() {
   // TODO how can the order be defined for mobile?
   // Should we allow providing a different list of items?
   let items = useNavbarItems();
-  const location = useLocation();
-  const isDocsPage = location.pathname.startsWith("/docs/");
+
+  const isDocsPage = useIsDocs();
 
   if (isDocsPage) {
     items = items.filter(

diff --git a/src/theme/Root.js b/src/theme/Root.js
@@ -0,0 +1,26 @@
+import React from "react";
+import Head from "@docusaurus/Head";
+import { useIsDocs } from "@site/src/hooks/useIsDocs";
+
+export default function Root({ children }) {
+  const isDocsPage = useIsDocs();
+
+  return (
+    <>
+      {isDocsPage && (
+        // AI Chatbot Integration via Kapa
+        <Head>
+          <script
+            defer
+            src="https://widget.kapa.ai/kapa-widget.bundle.js"
+            data-website-id="08910249-851f-465b-b60f-238d84e1afc1"
+            data-project-name="Internet Computer"
+            data-project-color="#172234"
+            data-project-logo="https://s3.coinmarketcap.com/static-gravity/image/2fb1bc84c1494178beef0822179d137d.png"
+          />
+        </Head>
+      )}
+      {children}
+    </>
+  );
+}