From 02b1bdbfa10b477fa9bd099d567e2fe90e1e8200 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 20 Aug 2025 16:38:21 +0200
Subject: [PATCH] First attempt at chat in content instead of fixed

---
 packages/gitbook/src/components/AIChat/AIChat.tsx         | 8 +++++++-
 .../src/components/Announcement/AnnouncementBanner.tsx    | 2 +-
 packages/gitbook/src/components/Header/Header.tsx         | 4 ++--
 .../gitbook/src/components/SpaceLayout/SpaceLayout.tsx    | 8 ++++----
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/gitbook/src/components/AIChat/AIChat.tsx b/packages/gitbook/src/components/AIChat/AIChat.tsx
index c504b2409..0b3859959 100644
--- a/packages/gitbook/src/components/AIChat/AIChat.tsx
+++ b/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">
diff --git a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
index 68d3f1e0a..e7b86f066 100644
--- a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
+++ b/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 ?? ''}
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index 48e45d17b..00145c9ca 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/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',
diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
index fbc9b9c97..b3395600f 100644
--- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
+++ b/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>