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/api-reference/.env.sample

@@ -8,4 +8,7 @@ NEXT_PUBLIC_ENV=
 NEXT_PUBLIC_BASE_URL=
 NEXT_PUBLIC_DOCS_URL=
 NEXT_PUBLIC_UI_URL=
-ALGOLIA_WRITE_API_KEY=
+ALGOLIA_WRITE_API_KEY=
+NEXT_PUBLIC_AI_ASSISTANT_URL=
+NEXT_PUBLIC_AI_WEBSITE_ID=
+NEXT_PUBLIC_AI_API_ASSISTANT_RECAPTCHA_SITE_KEY=

www/apps/api-reference/providers/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import {
+  AiAssistantProvider,
   AnalyticsProvider,
   ColorModeProvider,
   MobileProvider,

www/apps/api-reference/providers/search.tsx

@@ -1,6 +1,11 @@
 "use client"
 
-import { usePageLoading, SearchProvider as UiSearchProvider } from "docs-ui"
+import {
+  usePageLoading,
+  SearchProvider as UiSearchProvider,
+  AiAssistantCommandIcon,
+  AiAssistantProvider,
+} from "docs-ui"
 import getBaseUrl from "../utils/get-base-url"
 
 type SearchProviderProps = {
@@ -66,6 +71,27 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
           },
         ],
       }}
+      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>

www/apps/docs/.env.sample

@@ -2,4 +2,8 @@ API_URL=
 DOCS_ALGOLIA_INDEX_NAME=
 API_ALGOLIA_INDEX_NAME=
 ALGOLIA_API_KEY=
-ALGOLIA_APP_ID=
+ALGOLIA_APP_ID=
+AI_ASSISTANT_URL=
+AI_API_ASSISTANT_TOKEN=
+AI_WEBSITE_ID=
+AI_API_ASSISTANT_RECAPTCHA_SITE_KEY=

www/apps/docs/docusaurus.config.js

@@ -118,6 +118,12 @@ const config = {
     analytics: {
       apiKey: process.env.SEGMENT_API_KEY || "temp",
     },
+    aiAssistant: {
+      apiUrl: process.env.AI_ASSISTANT_URL || "temp",
+      websiteId: process.env.AI_WEBSITE_ID || "temp",
+      recaptchaSiteKey:
+        process.env.AI_API_ASSISTANT_RECAPTCHA_SITE_KEY || "temp",
+    },
     prism: {
       defaultLanguage: "js",
       plugins: ["line-numbers", "show-language"],

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 = {

www/apps/ui/.env.example

@@ -1,2 +1,11 @@
 NEXT_PUBLIC_DOCS_URL=
-NEXT_PUBLIC_BASE_URL=
+NEXT_PUBLIC_BASE_URL=
+NEXT_PUBLIC_BASE_PATH=/ui
+NEXT_PUBLIC_DOCS_ALGOLIA_INDEX_NAME=
+NEXT_PUBLIC_API_ALGOLIA_INDEX_NAME=
+NEXT_PUBLIC_ALGOLIA_API_KEY=
+NEXT_PUBLIC_ALGOLIA_APP_ID=
+NEXT_PUBLIC_SEGMENT_API_KEY=
+NEXT_PUBLIC_AI_ASSISTANT_URL=
+NEXT_PUBLIC_AI_WEBSITE_ID=
+NEXT_PUBLIC_AI_API_ASSISTANT_RECAPTCHA_SITE_KEY=

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>

www/apps/ui/tsconfig.json

@@ -9,7 +9,8 @@
         "./.contentlayer/generated"
       ]
     },
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "baseUrl": "."
   },
   "include": [
     "next-env.d.ts",