[DO NOT MERGE] Add MarkPrompt AI and create conversational UI in Docusaurus

docusaurus/docusaurus.config.js

@@ -25,7 +25,7 @@ const config = {
   markdown: {
     mermaid: true,
   },
-  themes: ["@docusaurus/theme-mermaid"],
+  themes: ["@docusaurus/theme-mermaid", "@markprompt/docusaurus-theme-search"],
   title: "Airbyte Documentation",
   tagline:
     "Airbyte is an open-source data integration platform to build ELT pipelines. Consolidate your data in your data warehouses, lakes and databases.",
@@ -145,10 +145,35 @@ const config = {
           autoCollapseCategories: true,
         },
       },
-      algolia: {
-        appId: "OYKDBC51MU",
-        apiKey: "15c487fd9f7722282efd8fcb76746fce", // Public API key: it is safe to commit it
-        indexName: "airbyte",
+      markprompt: { // Our AI chat bot
+        projectKey: "pk_c87ydSnE4o1tX9txQReh3vDvVnKDnbje", // Public project key. Safe to commit.
+        chat: {
+          assistantId: "d1399022-d7e2-4404-bd16-8b3ad2b5465b",
+          enabled: true,
+          defaultView: {
+            message: "Hi! I'm Octavia. How can I help? **I'm an AI, but I'm still learning and might make mistakes**. ",
+            prompts: [
+              "What's Airbyte?",
+              "Can I try Airbyte quickly?",
+              "How do I use Terraform with Airbyte?",
+              "Is there an enterprise version?"
+            ]
+          },
+          avatars: {
+            assistant: 'img/octavia-talking.png',
+          }
+        },
+        // By setting `floating` to false, use the standard navbar search component.
+        trigger: { floating: false },
+        search: {
+          enabled: true,
+          provider: {
+            name: "algolia",
+            apiKey: "15c487fd9f7722282efd8fcb76746fce", // Public API key. Safe to commit.
+            appId: "OYKDBC51MU",
+            indexName: "airbyte",
+          },
+        },
       },
       navbar: {
         title: "",

docusaurus/package.json

@@ -92,6 +92,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^2.1.9",
+    "@markprompt/docusaurus-theme-search": "^0.32.4",
     "@mdx-js/react": "^3.0.0",
     "async": "2.6.4",
     "autoprefixer": "10.4.16",

docusaurus/src/css/custom.css

@@ -285,3 +285,54 @@ svg.inline-svg {
   max-height: 1em;
   max-width: 1em;
 }
+
+ul.MarkpromptSearchResults {
+  margin: 0 !important;
+  padding-left: 0 !important;
+}
+
+:where(.MarkpromptSearchResult a) {
+  color: inherit !important;
+  text-decoration: none !important;
+}
+
+:where([aria-selected='true'] .MarkpromptSearchResultLink) {
+  background-color: var(--markprompt-primary) !important;
+  color: var(--markprompt-primaryForeground) !important;
+}
+
+p.MarkpromptBranding {
+  display: none !important;
+}
+
+div.MarkpromptContentDialog {
+  top: 90px !important;
+}
+
+div.MarkpromptMessageAvatarContainer {
+  height: 48px;
+  width: 48px;
+}
+
+img.MarkpromptMessageAvatarImage {
+  height: 48px;
+  width: 48px;
+}
+
+/*  */
+
+html[data-theme="dark"] .MarkpromptSearchView .MarkpromptPromptWrapper {
+  background-color: rgb(68, 73, 80) !important;
+}
+
+html[data-theme="dark"] .MarkpromptChatViewNavigation {
+  background-color: rgb(68, 73, 80) !important;
+}
+
+html[data-theme="dark"] .MarkpromptForm {
+  background-color: rgb(0,0,0) !important;
+}
+
+.MarkpromptContentDialog[data-variant="sheet"] {
+  z-index: 10000 !important; /* Ensure the dialog is on top of everything */
+}