[Docs] Adding ask AI Button

packages/docs/site/docusaurus.config.js

@@ -99,6 +99,22 @@ const config = {
 				},
 			},
 		],
+		'./plugins/kapa-ai-plugin.js',
+		() => ({
+			name: 'component-creator-alias',
+			configureWebpack() {
+				return {
+					resolve: {
+						alias: {
+							'@docusaurus/ComponentCreator': path.resolve(
+								__dirname,
+								'src/patches/ComponentCreator.js'
+							),
+						},
+					},
+				};
+			},
+		}),
 	],
 
 	presets: [
@@ -254,7 +270,9 @@ function getDocusaurusPluginTypedocApiConfig() {
 	const packages = typedoc.entryPoints;
 
 	const TypeDoc = require('typedoc');
+	// @ts-ignore -- TypeDoc types do not expose instance bootstrap mutation
 	const old = TypeDoc.Application.prototype.bootstrap;
+	// @ts-ignore -- Monkeypatching bootstrap is required to configure entry points
 	TypeDoc.Application.prototype.bootstrap = function (options) {
 		options.entryPointStrategy = typedoc.entryPointStrategy;
 		options.entryPoints = packages.map((entry) =>

packages/docs/site/src/theme/Navbar/Search/index.js

@@ -3,8 +3,29 @@ import Search from '@theme-original/Navbar/Search';
 
 export default function SearchWrapper(props) {
 	/*
-	 * This component wraps the Search component.
-	 * Previously used to add Kapa AI button, but that has been removed.
+	 * This add the Kapa AI button to the end of the navbar. It is impossible to add it
+	 * by using themeConfig.navbar.items because the Search component it hardcoded.
+	 * See https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx#L100
+	 *
+	 * By swizzling the Search component, we can add the Kapa AI button to the right of it.
 	 */
-	return <Search {...props} />;
+	const handleClick = (e) => {
+		e.preventDefault();
+		window.Kapa?.open?.();
+	};
+
+	return (
+		<>
+			<Search {...props} />
+			<div>
+				<a
+					className="kapa-ai-button"
+					onClick={handleClick}
+					aria-label="Ask AI"
+				>
+					Ask AI
+				</a>
+			</div>
+		</>
+	);
 }