DOCS-3882: Update AI UI (#4281)

Author: npentrel

assets/js/inkeep.js

@@ -4,7 +4,6 @@ const INKEEP_INTEGRATION_ID = "cm3ogfzp4003f29brrf16r6gm";
 const INKEEP_ORGANIZATION_ID = "org_yjUXfeVC1tTVMIoY";
 
 // Get the button element
-const inkeepButtonTop = document.getElementById("chatButtonTop");
 const inkeepButtonBottom = document.getElementById("chatButton");
 
 // Create a new div element to hold the Inkeep modal and set its id and position
@@ -71,9 +70,6 @@ const config = {
 const inkeepWidgetAI = Inkeep.ModalChat(config);
 
 // Add event listener to open the Inkeep modal when the button is clicked
-inkeepButtonTop.addEventListener("click",  () => {
-  inkeepWidgetAI.update({ modalSettings: { isOpen: true } });
-});
 inkeepButtonBottom.addEventListener("click",  () => {
   inkeepWidgetAI.update({ modalSettings: { isOpen: true } });
 });
@@ -162,9 +158,40 @@ isShortcutKeyEnabled,
         return source;
       },
     },
-    canToggleView: false,
+    aiChatSettings: {
+      aiAssistantName: "Viam",
+      chatSubjectName: "Viam",
+      aiAssistantAvatar: "https://cdn.prod.website-files.com/62fba5686b6d47fe2a1ed2a6/62fba8f4a8ca05f38a2b497f_viam-logo-webclip.png",
+      userAvatarSrcUrl: "https://storage.googleapis.com/organization-image-assets/viam-botAvatarDarkSrcUrl-1721328398594.svg",
+      introMessage: "Hi!\n\nI'm an AI assistant trained on documentation, help articles, and other content. \n\nHow can I help you today?\n\n_Please do not share sensitive information such as secrets or API keys with me._",
+      getHelpOptions: [
+        {
+          icon: { builtIn: "IoMail" },
+          name: "Email",
+          action: {
+            type: "open_link",
+            url: "mailto:[email protected]",
+          },
+        },
+        {
+          icon: { builtIn: "FaDiscord" },
+          name: "Discord",
+          action: {
+            type: "open_link",
+            url: "https://discord.gg/viam",
+          },
+        },
+      ],
+      exampleQuestions: [
+          "How do I install Viam on a single-board computer?",
+          "How do I deploy a person detection model?",
+          "How to ingest data from machines",
+          "How can I query sensor data with third-party tools?",
+      ],
+    },
+    canToggleView: true,
     searchSettings: {
-      placeholder: "Search...",
+      placeholder: "Search for anything...",
       tabs: [
         "All",
         ["Docs", { isAlwaysVisible: true }],

layouts/partials/navbar.html

@@ -61,19 +61,6 @@
     </div>
     {{ partial "search-input.html" . }}
     <div class="navbar-nav d-none d-lg-block" id="navsearch">
-      <button class="docsbutton" id="chatButtonTop" title="Chatbot and support">
-          <span id="chatButtonContent">
-            <span><svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <mask id="mask0_4_600" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="19" height="19">
-              <rect width="19" height="19" fill="#D9D9D9"/>
-              </mask>
-              <g mask="url(#mask0_4_600)">
-              <path d="M7.93333 11.3333C8.16667 11.3333 8.36389 11.2527 8.525 11.0916C8.68611 10.9305 8.76667 10.7333 8.76667 10.4999C8.76667 10.2666 8.68611 10.0694 8.525 9.90825C8.36389 9.74714 8.16667 9.66659 7.93333 9.66659C7.7 9.66659 7.50278 9.74714 7.34167 9.90825C7.18056 10.0694 7.1 10.2666 7.1 10.4999C7.1 10.7333 7.18056 10.9305 7.34167 11.0916C7.50278 11.2527 7.7 11.3333 7.93333 11.3333ZM7.33333 8.76659H8.56667C8.56667 8.5777 8.575 8.41659 8.59167 8.28325C8.60833 8.14992 8.64444 8.02214 8.7 7.89992C8.75556 7.7777 8.825 7.66381 8.90833 7.55825C8.99167 7.4527 9.11111 7.32214 9.26667 7.16659C9.65556 6.7777 9.93056 6.4527 10.0917 6.19159C10.2528 5.93047 10.3333 5.63325 10.3333 5.29992C10.3333 4.71103 10.1333 4.23603 9.73333 3.87492C9.33333 3.51381 8.79445 3.33325 8.11667 3.33325C7.50556 3.33325 6.98611 3.48325 6.55833 3.78325C6.13056 4.08325 5.83333 4.49992 5.66667 5.03325L6.76667 5.46659C6.84444 5.16659 7 4.92492 7.23333 4.74159C7.46667 4.55825 7.73889 4.46659 8.05 4.46659C8.35 4.46659 8.6 4.54714 8.8 4.70825C9 4.86936 9.1 5.08325 9.1 5.34992C9.1 5.53881 9.03889 5.73881 8.91667 5.94992C8.79444 6.16103 8.58889 6.39436 8.3 6.64992C8.11111 6.80547 7.95833 6.95825 7.84167 7.10825C7.725 7.25825 7.62778 7.41659 7.55 7.58325C7.47222 7.74992 7.41667 7.92492 7.38333 8.10825C7.35 8.29159 7.33333 8.51103 7.33333 8.76659ZM8 15.3333L6 13.3333H3.33333C2.96667 13.3333 2.65278 13.2027 2.39167 12.9416C2.13056 12.6805 2 12.3666 2 11.9999V2.66659C2 2.29992 2.13056 1.98603 2.39167 1.72492C2.65278 1.46381 2.96667 1.33325 3.33333 1.33325H12.6667C13.0333 1.33325 13.3472 1.46381 13.6083 1.72492C13.8694 1.98603 14 2.29992 14 2.66659V11.9999C14 12.3666 13.8694 12.6805 13.6083 12.9416C13.3472 13.2027 13.0333 13.3333 12.6667 13.3333H10L8 15.3333ZM3.33333 11.9999H6.53333L8 13.4666L9.46667 11.9999H12.6667V2.66659H3.33333V11.9999Z" fill="white"/>
-              </g>
-              </svg>
-              Ask AI</span>
-          </span>
-      </button>
       <button class="docsbutton" id="appButton" title="Viam app">
         <span id="appButtonContent">
           <a href="https://app.viam.com" target="_blank">app.viam.com <i class="fas fa-external-link-alt fa-sm" style="margin-left: 0.5rem;"></i></a>