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/ui/src/components/mdx-components.tsx

@@ -97,12 +97,12 @@ const components = {
     ...props
   }: React.HTMLAttributes<HTMLOListElement>) => {
     return (
-      <ul
+      <ol
         {...props}
         className={clsx("list-decimal px-docs_1 mb-docs_1.5", className)}
       >
         {children}
-      </ul>
+      </ol>
     )
   },
   li: ({

www/apps/ui/src/providers/index.tsx

@@ -7,6 +7,7 @@ import {
   NavbarProvider,
   AnalyticsProvider,
   ScrollControllerProvider,
+  AiAssistantProvider,
 } from "docs-ui"
 import SearchProvider from "./search"
 import SidebarProvider from "./sidebar"

www/apps/ui/src/providers/search.tsx

@@ -1,7 +1,13 @@
 "use client"
 
-import { SearchProvider as UiSearchProvider } from "docs-ui"
+import {
+  AiAssistantCommandIcon,
+  AiAssistantProvider,
+  SearchProvider as UiSearchProvider,
+} from "docs-ui"
 import { absoluteUrl } from "../lib/absolute-url"
+import clsx from "clsx"
+import { Sparkles } from "@medusajs/icons"
 
 type SearchProviderProps = {
   children: React.ReactNode
@@ -61,6 +67,27 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
         ],
       }}
       initialDefaultFilters={["ui"]}
+      commands={[
+        {
+          name: "ai-assistant",
+          icon: <AiAssistantCommandIcon />,
+          component: (
+            <AiAssistantProvider
+              apiUrl={process.env.NEXT_PUBLIC_AI_ASSISTANT_URL || "temp"}
+              websiteId={process.env.NEXT_PUBLIC_AI_WEBSITE_ID || "temp"}
+              recaptchaSiteKey={
+                process.env.NEXT_PUBLIC_AI_API_ASSISTANT_RECAPTCHA_SITE_KEY ||
+                "temp"
+              }
+            />
+          ),
+          title: "AI Assistant",
+          badge: {
+            variant: "purple",
+            children: "Beta",
+          },
+        },
+      ]}
     >
       {children}
     </UiSearchProvider>