inkeep.js

// customize
const inkeepSettings = {
  baseSettings: {
    apiKey: "1c24ba8dde97e56465741f2e64a51389662f75793a7d0ec1", // required
    primaryBrandColor: "#4e89ff", // required -- your brand color, the color scheme is derived from this
    organizationDisplayName: "PowerSync",
    // ...optional settings
  },
  aiChatSettings: {
    // ...optional settings
    // aiAssistantAvatar: "https://mydomain.com/mylogo.svg",
    exampleQuestions: [
      "How do I get started?",
      "What backend databases are supported?",
      "What SDKs are available on the client-side?"
    ]
  }
};

// The Mintlify search triggers, which we'll reuse to trigger the Inkeep modal
// const searchButtonContainerIds = [
//   "search-bar-entry",
//   "search-bar-entry-mobile",
// ];

// Clone and replace, needed to remove existing event listeners
// const clonedSearchButtonContainers = searchButtonContainerIds.map((id) => {
//   const originalElement = document.getElementById(id);
//   const clonedElement = originalElement.cloneNode(true);
//   originalElement.parentNode.replaceChild(clonedElement, originalElement);

//   return clonedElement;
// });

// Load the Inkeep component library
const inkeepScript = document.createElement("script");
inkeepScript.type = "module";
inkeepScript.src = "https://unpkg.com/@inkeep/cxkit-js@^0.5.36/dist/embed.js";
document.body.appendChild(inkeepScript);

// Once the Inkeep library is loaded, instantiate the UI components
inkeepScript.addEventListener("load", function () {
  // Customization settings

  // Instantiate the 'Ask AI' floating action button
  Inkeep.ChatButton({
    baseSettings: {
      ...inkeepSettings.baseSettings,
      colorMode: {
        sync: {
          target: document.documentElement,
          attributes: ["class"],
          isDarkMode: (attributes) => !!attributes.class?.includes("dark"),
        },
      },
    },
    aiChatSettings: {
      ...inkeepSettings.aiChatSettings,
    }
  });

  // Create and add the 'Ask AI' button next to the search bar
  function addAskAIButton() {
    // Function to create the Ask AI button
    function createAskAIButton() {
      const button = document.createElement("button");
      button.id = "ask-ai-button";
      button.innerHTML = "Ask AI";
      button.className = "ask-ai-button";
      
      // Style the button to match the "Get Started" button
      button.style.backgroundColor = inkeepSettings.baseSettings.primaryBrandColor;
      button.style.color = "white";
      button.style.border = "none";
      button.style.borderRadius = "12px"; // Pill-shaped to match the search bar in the screenshot
      button.style.padding = "8px 8px"; // Slightly wider padding
      button.style.marginLeft = "10px";
      button.style.cursor = "pointer";
      button.style.fontWeight = "500";
      button.style.fontSize = "14px";
      button.style.display = "flex";
      button.style.alignItems = "center";
      button.style.justifyContent = "center"; // Center text horizontally
      button.style.minWidth = "100px"; // Ensure the button has a minimum width
      button.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)"; // Subtle shadow for depth
      button.style.transition = "all 0.2s ease"; // Smooth transition for hover effects
      
      // Add a subtle hover effect
      button.onmouseover = function() {
        this.style.backgroundColor = "#3a78f2"; // Slightly darker shade when hovering
        this.style.transform = "translateY(-1px)"; // Slight lift effect
        this.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.15)"; // Enhanced shadow on hover
      };
      button.onmouseout = function() {
        this.style.backgroundColor = inkeepSettings.baseSettings.primaryBrandColor;
        this.style.transform = "translateY(0)"; // Reset position
        this.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)"; // Reset shadow
      };
      
      return button;
    }

    // Add the button only to the main search bar entry
    const searchContainer = document.getElementById("search-bar-entry");
    if (searchContainer) {
      const buttonContainer = document.createElement("div");
      buttonContainer.id = "ask-ai-button-container";
      buttonContainer.style.display = "flex";
      buttonContainer.style.alignItems = "center";
      
      const askAIButton = createAskAIButton();
      
      // Add click event to the button
      askAIButton.addEventListener("click", () => {
        modalChat.update({ modalSettings: { isOpen: true } });
      });
      
      // Insert the button after the search container
      buttonContainer.appendChild(askAIButton);
      
      // Insert the button container after the search container
      searchContainer.parentNode.insertBefore(buttonContainer, searchContainer.nextSibling);
      
      // Add CSS to hide the button on mobile
      const style = document.createElement('style');
      style.textContent = `
        @media (max-width: 768px) {
          #ask-ai-button-container {
            display: none !important;
          }
        }
      `;
      document.head.appendChild(style);
    }
  }

  // Instantiate the 'Ask AI' modal chat
  const modalChat = Inkeep.ModalChat({
    baseSettings: {
      ...inkeepSettings.baseSettings,
      colorMode: {
        sync: {
          target: document.documentElement,
          attributes: ["class"],
          isDarkMode: (attributes) => !!attributes.class?.includes("dark"),
        },
      },
    },
    aiChatSettings: {
      ...inkeepSettings.aiChatSettings,
    },
    modalSettings: {
      onOpenChange: handleOpenChange,
    },
  });

  function handleOpenChange(newOpen) {
    modalChat.update({ modalSettings: { isOpen: newOpen } });
  }

  // Add the Ask AI button once the DOM is fully loaded
  if (document.readyState === "complete") {
    addAskAIButton();
  } else {
    window.addEventListener("load", addAskAIButton);
  }

  // The existing chat-button listener (if the element exists)
  const existingChatButton = document.querySelector("#chat-button");
  if (existingChatButton) {
    existingChatButton.addEventListener("click", () => {
      modalChat.update({ modalSettings: { isOpen: true } });
    });
  }

  // Access chat methods
  modalChat.clearChat();

  // Instantiate the search bar modal
  // const inkeepSearchModal = Inkeep.ModalSearchAndChat({
  //   baseSettings: {
  //     ...inkeepSettings.baseSettings,
  //     colorMode: {
  //       sync: {
  //         target: document.documentElement,
  //         attributes: ["class"],
  //         isDarkMode: (attributes) => !!attributes.class?.includes("dark"),
  //       },
  //     },
  //   },
  //   modalSettings: {
  //     onOpenChange: handleOpenChange,
  //   },
  // });

  // function handleOpenChange(newOpen) {
  //   inkeepSearchModal.update({ modalSettings: { isOpen: newOpen } });
  // }

  // When the Mintlify search bar elements are clicked, open the Inkeep search modal
  // clonedSearchButtonContainers.forEach((trigger) => {
  //   trigger.addEventListener("click", function () {
  //     inkeepSearchModal.update({
  //       modalSettings: { isOpen: true },
  //     });
  //   });
  // });

  // Open the Inkeep Modal with cmd+k
  // window.addEventListener(
  //   "keydown",
  //   (event) => {
  //     if (
  //       (event.metaKey || event.ctrlKey) &&
  //       (event.key === "k" || event.key === "K")
  //     ) {
  //       event.stopPropagation();
  //       inkeepSearchModal.update({
  //         modalSettings: { isOpen: true },
  //       });
  //       return false;
  //     }
  //   },
  //   true
  // );
});