Some visual adjustments to Octavia, improved visual consistency in dark mode.

Author: ian-at-airbyte

docusaurus/docusaurus.config.js

@@ -151,14 +151,17 @@ const config = {
           assistantId: "d1399022-d7e2-4404-bd16-8b3ad2b5465b",
           enabled: true,
           defaultView: {
-            message: "Hi! I'm Octavia, an AI. **I'm still learning and might make mistakes**. How can I help?",
+            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 },

docusaurus/src/css/custom.css

@@ -308,3 +308,31 @@ p.MarkpromptBranding {
 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 */
+}