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/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}