[Docs] Adding ask AI Button

packages/docs/site/docusaurus.config.js

@@ -32,7 +32,7 @@ const config = {
 	},
 
 	// Even if you don't use internalization, you can use this field to set useful
-	// metadata like html lang. For example, if your site is Chinese, you may want
+	// metadata like HTML lang. For example, if your site is Chinese, you may want
 	// to replace "en" with "zh-Hans".
 	i18n: {
 		defaultLocale: 'en',
@@ -77,7 +77,7 @@ const config = {
 			{
 				quality: 70,
 				max: 1030, // max resized image's size.
-				min: 640, // min resized image's size. if original is lower, use that size.
+				min: 640, // min resized image's size. If the original is lower, use that size.
 				steps: 2, // the max number of images generated between min and max (inclusive)
 				disableInDev: false,
 			},
@@ -99,6 +99,7 @@ const config = {
 				},
 			},
 		],
+		'./plugins/kapa-ai-plugin.js',
 	],
 
 	presets: [
@@ -255,6 +256,7 @@ function getDocusaurusPluginTypedocApiConfig() {
 
 	const TypeDoc = require('typedoc');
 	const old = TypeDoc.Application.prototype.bootstrap;
+
 	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>
+		</>
+	);
 }