docs: improve AI Assistant (#11208)

* initial implementation

* integrate new ai assistant in other projects + ux improvements

* fix chat window on mobile devices

* fixes to mobile

* allow pre

* change shortcut to i

* improved responsiveness

* align version in navbar

www/apps/api-reference/components/Tags/Operation/CodeSection/index.tsx

@@ -36,7 +36,7 @@ const TagOperationCodeSection = ({
       >
         <div className={clsx("flex w-[calc(100%-36px)] gap-1")}>
           <MethodLabel method={method} className="h-fit" />
-          <code className="text-medusa-fg-subtle =break-words break-all">
+          <code className="text-medusa-fg-base =break-words break-all">
             {endpointPath}
           </code>
         </div>

www/apps/api-reference/components/Tags/Operation/DescriptionSection/index.tsx

@@ -53,7 +53,7 @@ const TagsOperationDescriptionSection = ({
         {operation["x-featureFlag"] && (
           <FeatureFlagNotice
             featureFlag={operation["x-featureFlag"]}
-            tooltipTextClassName="font-normal text-medusa-fg-subtle"
+            tooltipTextClassName="font-normal text-medusa-fg-base"
             badgeClassName="ml-0.5"
           />
         )}

www/apps/api-reference/components/VersionSwitcher/index.tsx

@@ -16,7 +16,7 @@ const VersionSwitcher = () => {
           location.href = process.env.NEXT_PUBLIC_API_V1_URL + pathname
         }}
       />
-      <span className={clsx("text-medusa-fg-subtle")}>V2</span>
+      <span className={clsx("text-medusa-fg-base")}>V2</span>
     </div>
   )
 }

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

@@ -1,4 +1,5 @@
 import {
+  AiAssistantProvider,
   AnalyticsProvider,
   PageLoadingProvider,
   ScrollControllerProvider,
@@ -21,7 +22,20 @@ const Providers = ({ children }: ProvidersProps) => {
           <ScrollControllerProvider scrollableSelector="#main">
             <SidebarProvider>
               <MainNavProvider>
-                <SearchProvider>{children}</SearchProvider>
+                <SearchProvider>
+                  <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"
+                    }
+                    chatType="popover"
+                  >
+                    {children}
+                  </AiAssistantProvider>
+                </SearchProvider>
               </MainNavProvider>
             </SidebarProvider>
           </ScrollControllerProvider>

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

@@ -4,8 +4,6 @@ import {
   usePageLoading,
   SearchProvider as UiSearchProvider,
   searchFilters,
-  AiAssistantIcon,
-  AiAssistantProvider,
 } from "docs-ui"
 import { config } from "../config"
 import basePathUrl from "../utils/base-path-url"
@@ -53,28 +51,6 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
         ),
         filterOptions: searchFilters,
       }}
-      commands={[
-        {
-          name: "ai-assistant",
-          icon: <AiAssistantIcon />,
-          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: "blue",
-            badgeType: "shaded",
-            children: "Beta",
-          },
-        },
-      ]}
     >
       {children}
     </UiSearchProvider>

www/apps/book/app/page.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { MainNav, RootProviders } from "docs-ui"
+import { AiAssistantChatWindow, MainNav, RootProviders } from "docs-ui"
 import HomepageTopSection from "../components/Homepage/TopSection"
 import Providers from "../providers"
 import HomepageLinksSection from "../components/Homepage/LinksSection"
@@ -12,12 +12,20 @@ const Homepage = () => {
     <body
       className={clsx(
         "bg-medusa-bg-subtle font-base text-medium w-full",
-        "text-medusa-fg-subtle px-0.25 pt-0.25",
+        "text-medusa-fg-base px-0.25 pt-0.25",
         "h-screen overflow-hidden"
       )}
     >
-      <RootProviders>
-        <Providers>
+      <RootProviders
+        layoutProviderProps={{
+          disableResizeObserver: true,
+        }}
+      >
+        <Providers
+          aiAssistantProps={{
+            chatType: "popover",
+          }}
+        >
           <div
             className={clsx(
               "rounded-t bg-medusa-bg-base",
@@ -40,6 +48,7 @@ const Homepage = () => {
             <HomepageModulesSection />
             <HomepageFooter />
           </div>
+          <AiAssistantChatWindow />
         </Providers>
       </RootProviders>
     </body>

www/apps/book/providers/index.tsx

@@ -1,6 +1,8 @@
 "use client"
 
 import {
+  AiAssistantProvider,
+  AiAssistantProviderProps,
   AnalyticsProvider,
   HooksLoader,
   LearningPathProvider,
@@ -16,9 +18,10 @@ import { MainNavProvider } from "./main-nav"
 
 type ProvidersProps = {
   children?: React.ReactNode
+  aiAssistantProps?: Partial<Omit<AiAssistantProviderProps, "children">>
 }
 
-const Providers = ({ children }: ProvidersProps) => {
+const Providers = ({ children, aiAssistantProps = {} }: ProvidersProps) => {
   return (
     <AnalyticsProvider writeKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}>
       <SiteConfigProvider config={config}>
@@ -29,14 +32,29 @@ const Providers = ({ children }: ProvidersProps) => {
                 <PaginationProvider>
                   <MainNavProvider>
                     <SearchProvider>
-                      <HooksLoader
-                        options={{
-                          pageScrollManager: true,
-                          currentLearningPath: false,
-                        }}
+                      <AiAssistantProvider
+                        {...aiAssistantProps}
+                        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"
+                        }
                       >
-                        {children}
-                      </HooksLoader>
+                        <HooksLoader
+                          options={{
+                            pageScrollManager: true,
+                            currentLearningPath: false,
+                          }}
+                        >
+                          {children}
+                        </HooksLoader>
+                      </AiAssistantProvider>
                     </SearchProvider>
                   </MainNavProvider>
                 </PaginationProvider>

www/apps/book/providers/search.tsx

@@ -1,11 +1,6 @@
 "use client"
 
-import {
-  AiAssistantIcon,
-  AiAssistantProvider,
-  SearchProvider as UiSearchProvider,
-  searchFilters,
-} from "docs-ui"
+import { SearchProvider as UiSearchProvider, searchFilters } from "docs-ui"
 import { config } from "../config"
 
 type SearchProviderProps = {
@@ -52,28 +47,6 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
         ),
         filterOptions: searchFilters,
       }}
-      commands={[
-        {
-          name: "ai-assistant",
-          icon: <AiAssistantIcon />,
-          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: "blue",
-            badgeType: "shaded",
-            children: "Beta",
-          },
-        },
-      ]}
       initialDefaultFilters={["guides"]}
     >
       {children}

www/apps/resources/providers/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import {
+  AiAssistantProvider,
   AnalyticsProvider,
   HooksLoader,
   LearningPathProvider,
@@ -31,14 +32,28 @@ const Providers = ({ children }: ProvidersProps) => {
                 <PaginationProvider>
                   <MainNavProvider>
                     <SearchProvider>
-                      <HooksLoader
-                        options={{
-                          pageScrollManager: true,
-                          currentLearningPath: false,
-                        }}
+                      <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"
+                        }
                       >
-                        {children}
-                      </HooksLoader>
+                        <HooksLoader
+                          options={{
+                            pageScrollManager: true,
+                            currentLearningPath: false,
+                          }}
+                        >
+                          {children}
+                        </HooksLoader>
+                      </AiAssistantProvider>
                     </SearchProvider>
                   </MainNavProvider>
                 </PaginationProvider>

www/apps/resources/providers/search.tsx

@@ -1,11 +1,6 @@
 "use client"
 
-import {
-  AiAssistantIcon,
-  AiAssistantProvider,
-  SearchProvider as UiSearchProvider,
-  searchFilters,
-} from "docs-ui"
+import { SearchProvider as UiSearchProvider, searchFilters } from "docs-ui"
 import { config } from "../config"
 
 type SearchProviderProps = {
@@ -41,28 +36,6 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
         checkInternalPattern: new RegExp(`^${config.baseUrl}/resources/.*`),
         filterOptions: searchFilters,
       }}
-      commands={[
-        {
-          name: "ai-assistant",
-          icon: <AiAssistantIcon />,
-          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: "blue",
-            badgeType: "shaded",
-            children: "Beta",
-          },
-        },
-      ]}
       initialDefaultFilters={["guides"]}
     >
       {children}

www/apps/ui/src/components/feedback.tsx

@@ -23,7 +23,7 @@ export const Feedback = ({ title, ...props }: FeedbackProps) => {
         section: title,
       }}
       {...props}
-      className={clsx("text-medusa-fg-subtle", props.className)}
+      className={clsx("text-medusa-fg-base", props.className)}
     />
   )
 }

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

@@ -1,6 +1,7 @@
 "use client"
 
 import {
+  AiAssistantProvider,
   AnalyticsProvider,
   ScrollControllerProvider,
   SiteConfigProvider,
@@ -23,7 +24,16 @@ const Providers = ({ children }: ProvidersProps) => {
           <SidebarProvider>
             <MainNavProvider>
               <SearchProvider>
-                <TooltipProvider>{children}</TooltipProvider>
+                <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"
+                  }
+                >
+                  <TooltipProvider>{children}</TooltipProvider>
+                </AiAssistantProvider>
               </SearchProvider>
             </MainNavProvider>
           </SidebarProvider>

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

@@ -1,11 +1,6 @@
 "use client"
 
-import {
-  AiAssistantIcon,
-  AiAssistantProvider,
-  SearchProvider as UiSearchProvider,
-  searchFilters,
-} from "docs-ui"
+import { SearchProvider as UiSearchProvider, searchFilters } from "docs-ui"
 import { absoluteUrl } from "../lib/absolute-url"
 
 type SearchProviderProps = {
@@ -37,29 +32,6 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
         filterOptions: searchFilters,
       }}
       initialDefaultFilters={["ui"]}
-      commands={[
-        {
-          name: "ai-assistant",
-          icon: <AiAssistantIcon />,
-          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"
-              }
-              version="v1"
-            />
-          ),
-          title: "AI Assistant",
-          badge: {
-            variant: "blue",
-            badgeType: "shaded",
-            children: "Beta",
-          },
-        },
-      ]}
     >
       {children}
     </UiSearchProvider>

www/apps/ui/src/styles/globals.css

@@ -28,7 +28,7 @@
   }
 
   body {
-    @apply text-ui-fg-subtle;
+    @apply text-ui-fg-base;
   }
 
   /* Hack to hide navbar / toc when some components like prompt are opened. */

www/apps/user-guide/providers/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import {
+  AiAssistantProvider,
   AnalyticsProvider,
   ColorModeProvider,
   HooksLoader,
@@ -35,13 +36,28 @@ const Providers = ({ children }: ProvidersProps) => {
                       <PaginationProvider>
                         <MainNavProvider>
                           <SearchProvider>
-                            <HooksLoader
-                              options={{
-                                pageScrollManager: true,
-                              }}
+                            <AiAssistantProvider
+                              apiUrl={
+                                process.env.NEXT_PUBLIC_AI_ASSISTANT_URL ||
+                                "temp"
+                              }
+                              websiteId={
+                                process.env.NEXT_PUBLIC_AI_WEBSITE_ID || "temp"
+                              }
+                              recaptchaSiteKey={
+                                // eslint-disable-next-line prettier/prettier, max-len
+                                process.env.NEXT_PUBLIC_AI_API_ASSISTANT_RECAPTCHA_SITE_KEY ||
+                                "temp"
+                              }
                             >
-                              {children}
-                            </HooksLoader>
+                              <HooksLoader
+                                options={{
+                                  pageScrollManager: true,
+                                }}
+                              >
+                                {children}
+                              </HooksLoader>
+                            </AiAssistantProvider>
                           </SearchProvider>
                         </MainNavProvider>
                       </PaginationProvider>

www/apps/user-guide/providers/search.tsx

@@ -1,11 +1,6 @@
 "use client"
 
-import {
-  SearchProvider as UiSearchProvider,
-  AiAssistantIcon,
-  AiAssistantProvider,
-  searchFilters,
-} from "docs-ui"
+import { SearchProvider as UiSearchProvider, searchFilters } from "docs-ui"
 import { config } from "../config"
 
 type SearchProviderProps = {
@@ -46,28 +41,6 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
       }}
       // TODO change later when we have a user guide filter
       initialDefaultFilters={["guides"]}
-      commands={[
-        {
-          name: "ai-assistant",
-          icon: <AiAssistantIcon />,
-          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: "blue",
-            children: "Beta",
-            badgeType: "shaded",
-          },
-        },
-      ]}
     >
       {children}
     </UiSearchProvider>