diff --git a/docusaurus/docusaurus.config.js b/docusaurus/docusaurus.config.js index fab51ac727d44..602cbc6db8bb5 100644 --- a/docusaurus/docusaurus.config.js +++ b/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: "", diff --git a/docusaurus/package.json b/docusaurus/package.json index 10b66a9d290e8..2b58fd958d4df 100644 --- a/docusaurus/package.json +++ b/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", diff --git a/docusaurus/src/css/custom.css b/docusaurus/src/css/custom.css index fb43c5abd5620..56f044cae7870 100644 --- a/docusaurus/src/css/custom.css +++ b/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 */ +} diff --git a/docusaurus/static/img/octavia-hello-no-text.png b/docusaurus/static/img/octavia-hello-no-text.png new file mode 100644 index 0000000000000..30dd3353ad294 Binary files /dev/null and b/docusaurus/static/img/octavia-hello-no-text.png differ diff --git a/docusaurus/static/img/octavia-talking.png b/docusaurus/static/img/octavia-talking.png new file mode 100644 index 0000000000000..3c7ed89cc7607 Binary files /dev/null and b/docusaurus/static/img/octavia-talking.png differ