diff --git a/docusaurus.config.en.js b/docusaurus.config.en.js index 26d71d10010..9221f112a5f 100644 --- a/docusaurus.config.en.js +++ b/docusaurus.config.en.js @@ -27,17 +27,7 @@ const config = { async: false, }, { - src: "https://widget.kapa.ai/kapa-widget.bundle.js", - "data-website-id": "c0b5f156-1e92-49df-8252-adacc9feb21b", - "data-project-name": "ClickHouse", - "data-project-color": "#151515", - "data-project-logo": - "https://avatars.githubusercontent.com/u/54801242?s=200&v=4", - "data-modal-disclaimer": - "This is a custom LLM for ClickHouse with access to all developer documentation, open GitHub Issues, YouTube videos, and resolved StackOverflow posts. Please note that answers are generated by AI and may not be fully accurate, so please use your best judgement.", - "data-modal-example-questions": - "How to speed up queries?,How to use materialized views?", - "data-kapa-branding-hide": "true", + src: "/docs/js/kapa_widget.js", async: true, defer: true, // execute after document parsing, but before firing DOMContentLoaded event }, diff --git a/static/js/kapa_widget.js b/static/js/kapa_widget.js new file mode 100644 index 00000000000..783c6848f0c --- /dev/null +++ b/static/js/kapa_widget.js @@ -0,0 +1,73 @@ +function insertKapaWidget() { + // Check if user agent is iOS 16.4 or lower + function isOldiOS() { + const ua = navigator.userAgent; + + // Check if it's an iOS device + const isIOS = /iPad|iPhone/.test(ua); + + if (isIOS) { + // Regex to capture major version and optionally minor version. + // Examples: "OS 16_4" (major: 16, minor: 4), "OS 16" (major: 16, minor: defaults to 0) + const iosVersionMatch = ua.match(/OS (\d+)(?:_(\d+))?/); + + if (iosVersionMatch) { + const majorVersion = parseInt(iosVersionMatch[1], 10); + let minorVersion = 0; // Default minor version to 0 + + // If minor version (group 2) was captured in the regex + if (iosVersionMatch[2]) { + minorVersion = parseInt(iosVersionMatch[2], 10); + // Fallback if parsing somehow still results in NaN (though \d+ should prevent this for a captured group) + if (isNaN(minorVersion)) { + minorVersion = 0; + } + } + + // Return true if iOS version is 16.4 or lower + // (major < 16) OR (major == 16 AND minor <= 4) + return majorVersion < 16 || (majorVersion === 16 && minorVersion <= 4); + } else { + // It's an iOS device, but we couldn't parse the OS version string using the regex. + // To be safe and prevent loading the widget on a potentially old/unsupported iOS version, + // assume it IS an "old iOS" in this scenario. + console.warn('Kapa widget: iOS device detected, but OS version parsing failed. Assuming old iOS to prevent loading.'); + return true; // Treat as "old" if parsing fails for an iOS device + } + } + + // Not an iOS device, or parsing failed and we're not treating it as old by default (if the above 'else' was different) + return false; +} + + // Only insert script if not running on older iOS as Kapa does not support it (using a look behind regex) + if (!isOldiOS()) { + const script = document.createElement('script'); + script.src = 'https://widget.kapa.ai/kapa-widget.bundle.js'; + script.async = true; + script.defer = true; + script.setAttribute('data-website-id', 'c0b5f156-1e92-49df-8252-adacc9feb21b'); + script.setAttribute('data-project-name', 'ClickHouse'); + script.setAttribute('data-project-color', '#151515'); + script.setAttribute('data-project-logo', 'https://avatars.githubusercontent.com/u/54801242?s=200&v=4'); + script.setAttribute('data-modal-disclaimer', 'This is a custom LLM for ClickHouse with access to all developer documentation, open GitHub Issues, YouTube videos, and resolved StackOverflow posts. Please note that answers are generated by AI and may not be fully accurate, so please use your best judgement.'); + script.setAttribute('data-modal-example-questions', 'How to speed up queries?,How to use materialized views?'); + script.setAttribute('data-kapa-branding-hide', 'true'); + + document.head.appendChild(script); + console.log('Kapa widget script added successfully'); + } else { + console.log('Kapa widget not added: detected iOS 16.4 or lower'); + } +} + +// Run the function when DOM is fully loaded +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', insertKapaWidget); +} else { + try { + insertKapaWidget(); + } catch (e) { + console.log("An error occured while trying to load the Kapa.ai widget:", e); + } +}