diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index e2aa0effc0..25c4e658f5 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -903,27 +903,7 @@ class="header-github-link" '@docusaurus/theme-mermaid', ], scripts: [ - { - src: 'https://widget.kapa.ai/kapa-widget.bundle.js', // See configuration: https://docs.kapa.ai/integrations/website-widget/configuration - 'data-website-id': '1d187510-1726-4011-b0f7-62742ae064ee', - 'data-project-name': 'Unleash', - 'data-project-color': '#1A4049', - 'data-project-logo': - 'https://cdn.getunleash.io/uploads/2024/05/logo-unleash-white.svg', - 'data-modal-image': - 'https://cdn.getunleash.io/uploads/2022/05/logo.png', - 'data-button-position-right': '0', - 'data-button-border-radius': '10px 0px 0px 10px', - 'data-button-width': '80px', - 'data-button-height': '100px', - 'data-button-image-height': '55px', - 'data-button-image-width': '55px', - 'data-button-text-font-weight': '400', - 'data-button-text-font-size': '16px', - 'data-button-text-font-family': '"Sen", sans-serif', - 'data-button-text': 'ASK AI', - defer: true, - }, + // Kapa AI widget is now lazy-loaded via src/theme/Root.tsx ], clientModules: ['./global.js'], }; diff --git a/website/src/theme/Root.tsx b/website/src/theme/Root.tsx new file mode 100644 index 0000000000..01dbe07f37 --- /dev/null +++ b/website/src/theme/Root.tsx @@ -0,0 +1,90 @@ +import React, { useEffect } from 'react'; +import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; + +export default function Root({ children }: { children: React.ReactNode }) { + useEffect(() => { + if (!ExecutionEnvironment.canUseDOM) { + return; + } + + const loadKapaWidget = () => { + if ( + document.querySelector('script[src*="kapa-widget.bundle.js"]') + ) { + return; + } + + 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', + '1d187510-1726-4011-b0f7-62742ae064ee', + ); + script.setAttribute('data-project-name', 'Unleash'); + script.setAttribute('data-project-color', '#1A4049'); + script.setAttribute( + 'data-project-logo', + 'https://cdn.getunleash.io/uploads/2024/05/logo-unleash-white.svg', + ); + script.setAttribute( + 'data-modal-image', + 'https://cdn.getunleash.io/uploads/2022/05/logo.png', + ); + script.setAttribute('data-button-position-right', '0'); + script.setAttribute( + 'data-button-border-radius', + '10px 0px 0px 10px', + ); + script.setAttribute('data-button-width', '80px'); + script.setAttribute('data-button-height', '100px'); + script.setAttribute('data-button-image-height', '55px'); + script.setAttribute('data-button-image-width', '55px'); + script.setAttribute('data-button-text-font-weight', '400'); + script.setAttribute('data-button-text-font-size', '16px'); + script.setAttribute( + 'data-button-text-font-family', + '"Sen", sans-serif', + ); + script.setAttribute('data-button-text', 'ASK AI'); + + document.head.appendChild(script); + }; + + const timeoutId = setTimeout(loadKapaWidget, 3000); + + const handleUserInteraction = () => { + loadKapaWidget(); + window.removeEventListener('scroll', handleUserInteraction); + window.removeEventListener('click', handleUserInteraction); + window.removeEventListener('touchstart', handleUserInteraction); + window.removeEventListener('mousemove', handleUserInteraction); + }; + + window.addEventListener('scroll', handleUserInteraction, { + once: true, + passive: true, + }); + window.addEventListener('click', handleUserInteraction, { once: true }); + window.addEventListener('touchstart', handleUserInteraction, { + once: true, + passive: true, + }); + window.addEventListener('mousemove', handleUserInteraction, { + once: true, + passive: true, + }); + + return () => { + clearTimeout(timeoutId); + window.removeEventListener('scroll', handleUserInteraction); + window.removeEventListener('click', handleUserInteraction); + window.removeEventListener('touchstart', handleUserInteraction); + window.removeEventListener('mousemove', handleUserInteraction); + }; + }, []); + + return <>{children}; +}