First attempt at chat in content instead of fixed

packages/gitbook/src/components/AIChat/AIChat.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { t, tString, useLanguage } from '@/intl/client';
+import { tcls } from '@/lib/tailwind';
 import { Icon } from '@gitbook/icons';
 import React from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -123,7 +124,12 @@ export function AIChatWindow(props: {
     return (
         <div
             data-testid="ai-chat"
-            className="ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl animate-present scroll-mt-36 px-4 py-4 transition-all duration-300 sm:px-6 lg:fixed lg:w-80 lg:animate-enter-from-right lg:pr-4 lg:pl-0 xl:w-96"
+            className={tcls(
+                'ai-chat sticky right-0 z-40 ml-8 flex max-w-3xl animate-present scroll-mt-36 px-4 py-4 transition-[width] duration-300 sm:px-6 lg:w-80 lg:animate-enter-from-right lg:px-0 xl:w-96',
+                'lg:[html[style*="--toc-top-offset"]_&]:top-(--toc-top-offset)!',
+                'lg:[html[style*="--toc-height"]_&]:h-(--toc-height)!',
+                'lg:-mr-[calc(max(0px,((100vw-96rem)/2)))]' // screen (100vw) - sidebar (18rem) - content (48rem) - chat window (20rem)
+            )}
             ref={containerRef}
         >
             <div className="relative flex h-full grow flex-col overflow-hidden circular-corners:rounded-3xl rounded-corners:rounded-md bg-tint-base text-sm text-tint depth-subtle:shadow-lg shadow-tint ring-1 ring-tint-subtle">

packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx

@@ -35,7 +35,7 @@ export function AnnouncementBanner(props: {
             data-nosnippet=""
         >
             <div className="scroll-nojump">
-                <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+                <div className="transition-all duration-300">
                     <div className={tcls('relative', CONTAINER_STYLE)}>
                         <Tag
                             href={contentRef?.href ?? ''}

packages/gitbook/src/components/Header/Header.tsx

@@ -57,7 +57,7 @@ export function Header(props: {
                 )}
             >
                 <div className="scroll-nojump">
-                    <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+                    <div className="transition-all duration-300">
                         <div
                             className={tcls(
                                 'gap-4',
@@ -145,7 +145,7 @@ export function Header(props: {
 
             {sections || siteSpaces.length > 1 ? (
                 <div className="scroll-nojump">
-                    <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+                    <div className="transition-all duration-300">
                         <div
                             className={tcls(
                                 'w-full',

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -101,11 +101,8 @@ export function SpaceLayout(props: {
                                 context={context}
                                 search={search}
                             />
-                            {aiMode === CustomizationAIMode.Assistant ? (
-                                <AIChat trademark={customization.trademark.enabled} />
-                            ) : null}
                             <div className="scroll-nojump">
-                                <div className="motion-safe:transition-all motion-safe:duration-300 lg:chat-open:mr-80 xl:chat-open:mr-96">
+                                <div className="motion-safe:transition-all motion-safe:duration-300">
                                     <div
                                         className={tcls(
                                             'flex',
@@ -169,6 +166,9 @@ export function SpaceLayout(props: {
                                         <div className="flex min-w-0 flex-1 flex-col">
                                             {children}
                                         </div>
+                                        {aiMode === CustomizationAIMode.Assistant ? (
+                                            <AIChat trademark={customization.trademark.enabled} />
+                                        ) : null}
                                     </div>
                                 </div>
                             </div>