diff --git a/docs/assets/js/inkeep-button.js b/docs/assets/js/inkeep-custom-button.js similarity index 64% rename from docs/assets/js/inkeep-button.js rename to docs/assets/js/inkeep-custom-button.js index 9fde7f0e5e..074fedf329 100644 --- a/docs/assets/js/inkeep-button.js +++ b/docs/assets/js/inkeep-custom-button.js @@ -1,20 +1,17 @@ document.addEventListener("DOMContentLoaded", () => { - // Load the Inkeep script const inkeepScript = document.createElement("script"); inkeepScript.src = "https://unpkg.com/@inkeep/cxkit-js@0.5.67/dist/embed.js"; inkeepScript.type = "module"; inkeepScript.defer = true; document.head.appendChild(inkeepScript); - // Configure and initialize the widget - const addInkeepWidget = () => { - const inkeepWidget = Inkeep.ChatButton({ + const addInkeepWidget = ({ openChange }) => { + return Inkeep.ChatButton({ baseSettings: { env: "production", apiKey: "40582708b8a0305555fa91c049bb0dfa4e192337819bd03c", // required - replace with your own API key primaryBrandColor: "#fbc828", // your brand color, widget color scheme is derived from this organizationDisplayName: "BNBChain", - // ...optional settings colorMode: { forcedColorMode: "dark", }, @@ -40,19 +37,10 @@ document.addEventListener("DOMContentLoaded", () => { width: 24px; height: 24px; } - `, + `, }, ], }, - onEvent: (event) => { - // analytics.track(event.eventName, event.properties); - if ( - event.eventName === "modal_opened" && - event.properties?.componentType === "ChatButton" - ) { - window.dataLayer?.push({ event: "click_AiBot_floatBtn" }); - } - }, }, aiChatSettings: { aiAssistantName: "BNB Chain AI", @@ -71,10 +59,46 @@ document.addEventListener("DOMContentLoaded", () => { "Where can I find funding or grants?", ], }, + modalSettings: { + onOpenChange: openChange + } }); }; + // Function to bind the click event to .ai-bot-wrapper + const bindAiBotWrapperEvent = (widget) => { + const aiBotWrapper = document.querySelector('.ai-bot-wrapper'); + if (aiBotWrapper) { + aiBotWrapper.replaceWith(aiBotWrapper.cloneNode(true)); + const newAiBotWrapper = document.querySelector('.ai-bot-wrapper'); + newAiBotWrapper.addEventListener('click', () => { + widget.update?.({ modalSettings: { isOpen: true } }); + window.dataLayer?.push({ event: "click_AiBot_floatBtn" }); + }); + } else { + console.warn('.ai-bot-wrapper element not found. Ensure it is rendered correctly.'); + } + }; + inkeepScript.addEventListener("load", () => { - addInkeepWidget(); // initialize the widget + const widget = addInkeepWidget({ + openChange(isOpen) { + widget.update?.({ modalSettings: { isOpen } }); + } + }); + + bindAiBotWrapperEvent(widget); + + const originalPushState = history.pushState; + history.pushState = function (...args) { + originalPushState.apply(this, args); + setTimeout(() => bindAiBotWrapperEvent(widget), 300); + setTimeout(() => bindAiBotWrapperEvent(widget), 1000); + }; + + window.addEventListener('popstate', () => { + setTimeout(() => bindAiBotWrapperEvent(widget), 300); + setTimeout(() => bindAiBotWrapperEvent(widget), 1000); + }); }); }); \ No newline at end of file diff --git a/docs/assets/style/components/ai-bot-button.css b/docs/assets/style/components/ai-bot-button.css new file mode 100644 index 0000000000..362978334e --- /dev/null +++ b/docs/assets/style/components/ai-bot-button.css @@ -0,0 +1,65 @@ +.ai-bot-wrapper { + height: 40px; + border-radius: 40px; + background: linear-gradient(180deg, #FFE900 0%, #18DC7E 100%); + padding: 1px; + overflow: hidden; + position: fixed; + z-index: 3; + right: 24px; + bottom: 80px; +} + +.ai-bot-wrapper button { + display: inline-flex; + appearance: none; + align-items: center; + justify-content: center; + user-select: none; + position: relative; + white-space: nowrap; + vertical-align: middle; + outline: 2px solid transparent; + outline-offset: 2px; + line-height: 1rem; + min-width: 72px; + padding-inline-start: 16px; + padding-inline-end: 16px; + padding-left: 15px; + padding-right: 7px; + border-radius: 38px; + background: #181A1E; + height: 100%; + color: #FFE900; + font-weight: 500; + transition: all 0.15s; + cursor: pointer; + font-size: 14px; + border-width: 0; +} + +.ai-bot-wrapper button:hover { + background: transparent; + color: #181A1E; +} + +.ai-bot-wrapper span { + display: inline-flex; + align-self: center; + flex-shrink: 0; + margin-inline-start: 0; +} + +.ai-bot-wrapper svg { + width: 24px; + height: 24px; + display: inline-block; + line-height: 1em; + flex-shrink: 0; + color: currentColor; + vertical-align: middle; +} + +[id^=inkeep-widget] { + display: none; +} \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 3795d33b9f..be8bab2bdf 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -658,11 +658,12 @@ extra_css: - assets/style/components/footer-nav.css - assets/style/components/footer.css - https://unpkg.com/katex@0.16.10/dist/katex.min.css + - assets/style/components/ai-bot-button.css extra_javascript: - assets/js/mathjax.js - assets/js/custom.js - - assets/js/inkeep-button.js + - assets/js/inkeep-custom-button.js - https://unpkg.com/mathjax@3.2.2/es5/tex-mml-chtml.js - https://unpkg.com/katex@0.16.10/dist/katex.min.js - https://unpkg.com/katex@0.16.10/dist/contrib/auto-render.min.js diff --git a/overrides/main.html b/overrides/main.html index 31fbc2c521..c067b6cac3 100644 --- a/overrides/main.html +++ b/overrides/main.html @@ -67,4 +67,12 @@ © 2024 Bnbchain.org. All rights reserved. +
+ +
{% endblock %}