docs: add AI Assistant (#5249)

* added components

* added ai assistant button

* change styling

* improve AI assistant

* change to a drawer

* added command support into search

* add AiAssistant to all projects

* remove usage of Text component

* added error handling

* use recaptcha

* fix new configurations

* fix background color

* change suggested questions

www/apps/docs/src/providers/DocsProviders/index.tsx

@@ -1,4 +1,9 @@
-import { AnalyticsProvider, ModalProvider, NotificationProvider } from "docs-ui"
+import {
+  AnalyticsProvider,
+  ColorModeProvider,
+  ModalProvider,
+  NotificationProvider,
+} from "docs-ui"
 import React from "react"
 import { useThemeConfig } from "@docusaurus/theme-common"
 import { ThemeConfig } from "@medusajs/docs"
@@ -16,13 +21,15 @@ const DocsProviders = ({ children }: DocsProvidersProps) => {
 
   return (
     <AnalyticsProvider writeKey={apiKey}>
-      <ModalProvider>
-        <SearchProvider>
-          <LearningPathProvider>
-            <NotificationProvider>{children}</NotificationProvider>
-          </LearningPathProvider>
-        </SearchProvider>
-      </ModalProvider>
+      <ColorModeProvider>
+        <ModalProvider>
+          <SearchProvider>
+            <LearningPathProvider>
+              <NotificationProvider>{children}</NotificationProvider>
+            </LearningPathProvider>
+          </SearchProvider>
+        </ModalProvider>
+      </ColorModeProvider>
     </AnalyticsProvider>
   )
 }

www/apps/docs/src/providers/Search/index.tsx

@@ -1,5 +1,10 @@
 import React, { useEffect, useState } from "react"
-import { SearchProvider as UiSearchProvider, checkArraySameElms } from "docs-ui"
+import {
+  AiAssistantCommandIcon,
+  AiAssistantProvider,
+  SearchProvider as UiSearchProvider,
+  checkArraySameElms,
+} from "docs-ui"
 import { ThemeConfig } from "@medusajs/docs"
 import { useThemeConfig } from "@docusaurus/theme-common"
 import { useLocalPathname } from "@docusaurus/theme-common/internal"
@@ -10,7 +15,8 @@ type SearchProviderProps = {
 
 const SearchProvider = ({ children }: SearchProviderProps) => {
   const [defaultFilters, setDefaultFilters] = useState<string[]>([])
-  const { algoliaConfig: algolia } = useThemeConfig() as ThemeConfig
+  const { algoliaConfig: algolia, aiAssistant } =
+    useThemeConfig() as ThemeConfig
   const currentPath = useLocalPathname()
 
   useEffect(() => {
@@ -60,9 +66,27 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
             ],
           },
         ],
-        className: "z-[500]",
       }}
+      commands={[
+        aiAssistant && {
+          name: "ai-assistant",
+          icon: <AiAssistantCommandIcon />,
+          component: (
+            <AiAssistantProvider
+              apiUrl={aiAssistant.apiUrl}
+              websiteId={aiAssistant.websiteId}
+              recaptchaSiteKey={aiAssistant.recaptchaSiteKey}
+            />
+          ),
+          title: "AI Assistant",
+          badge: {
+            variant: "purple",
+            children: "Beta",
+          },
+        },
+      ]}
       initialDefaultFilters={defaultFilters}
+      modalClassName="z-[500]"
     >
       {children}
     </UiSearchProvider>

www/apps/docs/src/types/index.d.ts

@@ -180,6 +180,11 @@ declare module "@medusajs/docs" {
     analytics?: {
       apiKey: string
     }
+    aiAssistant?: {
+      apiUrl: string
+      websiteId: string
+      recaptchaSiteKey: string
+    }
   } & DocusaurusThemeConfig
 
   export declare type MedusaDocusaurusConfig = {