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
2025-01-29 19:13:51 +02:00
parent 51d2960a57
commit 5634a4762b
57 changed files with 1571 additions and 743 deletions
@@ -3,7 +3,7 @@
 import React, { useEffect } from "react"
 import { useSidebar } from "../providers/Sidebar"
 import clsx from "clsx"
-import { MainNav, useIsBrowser } from ".."
+import { MainNav, useIsBrowser, useLayout } from ".."

 export type MainContentLayoutProps = {
  mainWrapperClasses?: string
@@ -18,6 +18,7 @@ export const MainContentLayout = ({
 }: MainContentLayoutProps) => {
  const { isBrowser } = useIsBrowser()
  const { desktopSidebarOpen } = useSidebar()
+  const { mainContentRef } = useLayout()

  useEffect(() => {
    if (!isBrowser) {
@@ -52,6 +53,7 @@ export const MainContentLayout = ({
          mainWrapperClasses
        )}
        id="main"
+        ref={mainContentRef}
      >
        <MainNav />
        <div
@@ -3,6 +3,7 @@ import clsx from "clsx"
 import { RootProviders, Sidebar, SidebarProps } from "@/components"
 import { Toc } from "../components/Toc"
 import { MainContentLayout, MainContentLayoutProps } from "./main-content"
+import { AiAssistantChatWindow } from "../components/AiAssistant/ChatWindow"

 export type RootLayoutProps = {
  bodyClassName?: string
@@ -26,7 +27,7 @@ export const RootLayout = ({
    <body
      className={clsx(
        "bg-medusa-bg-subtle font-base text-medium w-full",
-        "text-medusa-fg-subtle",
+        "text-medusa-fg-base",
        "h-screen overflow-hidden",
        "grid grid-cols-1 lg:mx-auto lg:grid-cols-[221px_1fr]",
        bodyClassName
@@ -38,6 +39,7 @@ export const RootLayout = ({
          <div className={clsx("relative", "h-screen", "flex")}>
            <MainContentLayout {...mainProps} />
            {showToc && <Toc />}
+            <AiAssistantChatWindow />
          </div>
        </ProvidersComponent>
      </RootProviders>