From add45fa6c56a451e0eab52287f42dff9327537c8 Mon Sep 17 00:00:00 2001
From: Nolann Biron <biron.nolann@gmail.com>
Date: Sat, 20 Jun 2026 17:54:30 +0200
Subject: [PATCH 1/3] Make the AI Assistant panel resizable

Add a drag handle on the panel's left edge and an expand/collapse button to resize the AI Assistant on desktop. Width is driven by the --ai-chat-width CSS variable, persisted via a Zustand store, and capped to the viewport so the page content stays usable.
---
 .../gitbook/src/components/AIChat/AIChat.tsx  |  6 +-
 .../components/AIChat/AIChatExpandButton.tsx  | 39 ++++++++
 .../components/AIChat/AIChatResizeHandle.tsx  | 97 +++++++++++++++++++
 .../components/AIChat/useAIChatWidthStore.ts  | 66 +++++++++++++
 .../Announcement/AnnouncementBanner.tsx       |  2 +-
 .../src/components/Cookies/CookiesToast.tsx   |  3 +-
 .../gitbook/src/components/Footer/Footer.tsx  |  2 +-
 .../gitbook/src/components/Header/Header.tsx  |  4 +-
 .../src/components/RootLayout/globals.css     | 10 ++
 .../components/SpaceLayout/SpaceLayout.tsx    |  2 +-
 packages/gitbook/src/intl/translations/ar.ts  |  2 +
 packages/gitbook/src/intl/translations/bg.ts  |  2 +
 packages/gitbook/src/intl/translations/cs.ts  |  2 +
 packages/gitbook/src/intl/translations/da.ts  |  2 +
 packages/gitbook/src/intl/translations/de.ts  |  2 +
 packages/gitbook/src/intl/translations/el.ts  |  2 +
 packages/gitbook/src/intl/translations/en.ts  |  2 +
 packages/gitbook/src/intl/translations/es.ts  |  2 +
 packages/gitbook/src/intl/translations/et.ts  |  2 +
 packages/gitbook/src/intl/translations/fi.ts  |  2 +
 packages/gitbook/src/intl/translations/fr.ts  |  2 +
 packages/gitbook/src/intl/translations/he.ts  |  2 +
 packages/gitbook/src/intl/translations/hi.ts  |  2 +
 packages/gitbook/src/intl/translations/hr.ts  |  2 +
 packages/gitbook/src/intl/translations/hu.ts  |  2 +
 packages/gitbook/src/intl/translations/id.ts  |  2 +
 packages/gitbook/src/intl/translations/it.ts  |  2 +
 packages/gitbook/src/intl/translations/ja.ts  |  2 +
 packages/gitbook/src/intl/translations/ko.ts  |  2 +
 packages/gitbook/src/intl/translations/lt.ts  |  2 +
 packages/gitbook/src/intl/translations/lv.ts  |  2 +
 packages/gitbook/src/intl/translations/ms.ts  |  2 +
 packages/gitbook/src/intl/translations/nl.ts  |  2 +
 packages/gitbook/src/intl/translations/no.ts  |  2 +
 packages/gitbook/src/intl/translations/pl.ts  |  2 +
 .../gitbook/src/intl/translations/pt-br.ts    |  2 +
 packages/gitbook/src/intl/translations/pt.ts  |  2 +
 packages/gitbook/src/intl/translations/ro.ts  |  2 +
 packages/gitbook/src/intl/translations/ru.ts  |  2 +
 packages/gitbook/src/intl/translations/sk.ts  |  2 +
 packages/gitbook/src/intl/translations/sl.ts  |  2 +
 packages/gitbook/src/intl/translations/sv.ts  |  2 +
 packages/gitbook/src/intl/translations/th.ts  |  2 +
 packages/gitbook/src/intl/translations/tr.ts  |  2 +
 packages/gitbook/src/intl/translations/uk.ts  |  2 +
 packages/gitbook/src/intl/translations/vi.ts  |  2 +
 packages/gitbook/src/intl/translations/yue.ts |  2 +
 .../gitbook/src/intl/translations/zh-tw.ts    |  2 +
 packages/gitbook/src/intl/translations/zh.ts  |  2 +
 49 files changed, 301 insertions(+), 8 deletions(-)
 create mode 100644 packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx
 create mode 100644 packages/gitbook/src/components/AIChat/AIChatResizeHandle.tsx
 create mode 100644 packages/gitbook/src/components/AIChat/useAIChatWidthStore.ts

diff --git a/packages/gitbook/src/components/AIChat/AIChat.tsx b/packages/gitbook/src/components/AIChat/AIChat.tsx
index b2214d5069..dbc6cfa3c0 100644
--- a/packages/gitbook/src/components/AIChat/AIChat.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChat.tsx
@@ -31,9 +31,11 @@ import { ScrollContainer } from '../primitives/ScrollContainer';
 import { SideSheet } from '../primitives/SideSheet';
 import { AIChatControl } from './AIChatControl';
 import { AIChatControlButton } from './AIChatControlButton';
+import { AIChatExpandButton } from './AIChatExpandButton';
 import { AIChatIcon } from './AIChatIcon';
 import { AIChatInput } from './AIChatInput';
 import { AIChatMessages } from './AIChatMessages';
+import { AIChatResizeHandle } from './AIChatResizeHandle';
 import AIChatSuggestedQuestions from './AIChatSuggestedQuestions';
 
 export function AIChat() {
@@ -85,9 +87,10 @@ export function AIChat() {
             withOverlay={true}
             data-ai-chat
             className={tcls(
-                'ai-chat mx-auto ml-8 not-hydrated:hidden w-96 transition-[width] duration-300 ease-quint lg:max-xl:w-80'
+                'ai-chat mx-auto ml-8 not-hydrated:hidden w-96 transition-[width] duration-300 ease-quint lg:w-(--ai-chat-width)'
             )}
         >
+            <AIChatResizeHandle />
             <EmbeddableFrame className="relative w-full shrink-0 border-tint-subtle border-l to-tint-base">
                 <EmbeddableFrameMain data-testid="ai-chat" aria-busy={chat.loading}>
                     <EmbeddableFrameHeader className="not-embed:px-4">
@@ -100,6 +103,7 @@ export function AIChat() {
                         </EmbeddableFrameHeaderMain>
                         <EmbeddableFrameButtons>
                             <AIChatControlButton />
+                            <AIChatExpandButton />
                             <Button
                                 onClick={() => chatController.close()}
                                 iconOnly
diff --git a/packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx b/packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx
new file mode 100644
index 0000000000..b8a0ce48d7
--- /dev/null
+++ b/packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { tString, useLanguage } from '@/intl/client';
+import { Icon } from '@gitbook/icons';
+import { Button } from '../primitives';
+import { useAIChatWidthStore } from './useAIChatWidthStore';
+
+/**
+ * Toggle the panel between its default and maximum width. Tracks the live width
+ * so the icon and action stay correct when the panel is resized with the drag
+ * handle. Desktop only — the panel is a full-screen modal on mobile.
+ */
+export function AIChatExpandButton() {
+    const language = useLanguage();
+    const { toggleWidth, isMaxWidth } = useAIChatWidthStore();
+
+    return (
+        <Button
+            onClick={toggleWidth}
+            iconOnly
+            icon={
+                <Icon
+                    icon={
+                        isMaxWidth
+                            ? 'arrow-down-left-and-arrow-up-right-to-center'
+                            : 'arrow-up-right-and-arrow-down-left-from-center'
+                    }
+                    className="scale-90"
+                />
+            }
+            label={tString(
+                language,
+                isMaxWidth ? 'ai_chat_collapse_panel' : 'ai_chat_expand_panel'
+            )}
+            variant="blank"
+            className="max-lg:hidden"
+        />
+    );
+}
diff --git a/packages/gitbook/src/components/AIChat/AIChatResizeHandle.tsx b/packages/gitbook/src/components/AIChat/AIChatResizeHandle.tsx
new file mode 100644
index 0000000000..fc5e20cc6c
--- /dev/null
+++ b/packages/gitbook/src/components/AIChat/AIChatResizeHandle.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import { tcls } from '@/lib/tailwind';
+import React from 'react';
+import { useAIChatWidthStore } from './useAIChatWidthStore';
+
+/**
+ * Set the global flag that suppresses transitions while the panel is being dragged.
+ */
+function setResizing(active: boolean) {
+    if (active) {
+        document.documentElement.dataset.aiChatResizing = 'true';
+    } else {
+        document.documentElement.dataset.aiChatResizing = 'false';
+    }
+}
+
+/**
+ * Drag handle on the panel's left edge to resize the AI chat.
+ */
+export function AIChatResizeHandle() {
+    const { width, setWidth } = useAIChatWidthStore();
+    const frameRef = React.useRef<number | null>(null);
+    const widthRef = React.useRef(width);
+
+    // Re-apply the viewport cap on window resize; clean up on unmount.
+    React.useEffect(() => {
+        const onResize = () => useAIChatWidthStore.getState().syncWidth();
+        window.addEventListener('resize', onResize);
+        return () => {
+            window.removeEventListener('resize', onResize);
+            if (frameRef.current !== null) {
+                cancelAnimationFrame(frameRef.current);
+            }
+            setResizing(false);
+        };
+    }, []);
+
+    const commitWidth = (width: number) => {
+        widthRef.current = setWidth(width);
+    };
+
+    // Release the pointer and stop the resize interaction without committing a new width.
+    const stopResizing = (event: React.PointerEvent<HTMLDivElement>) => {
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        if (frameRef.current !== null) {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+        setResizing(false);
+    };
+
+    const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        setResizing(true);
+    };
+
+    const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+        if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
+            return;
+        }
+        // Panel is right-anchored, so its width is the distance from the cursor to the right edge.
+        widthRef.current = window.innerWidth - event.clientX;
+        if (frameRef.current === null) {
+            frameRef.current = requestAnimationFrame(() => {
+                frameRef.current = null;
+                widthRef.current = setWidth(widthRef.current);
+            });
+        }
+    };
+
+    const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+        if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
+            return;
+        }
+        commitWidth(widthRef.current);
+        stopResizing(event);
+    };
+
+    return (
+        <div
+            aria-hidden="true"
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+            className={tcls(
+                'group -translate-x-1/2 absolute inset-y-0 left-0 z-10 hidden w-3 cursor-col-resize touch-none lg:flex',
+                'items-stretch justify-center'
+            )}
+        >
+            <span className="h-full w-px rounded-full bg-transparent transition-all duration-150 ease-out group-hover:w-0.5 group-hover:bg-primary-solid/40 group-active:w-0.5 group-active:bg-primary-solid" />
+        </div>
+    );
+}
diff --git a/packages/gitbook/src/components/AIChat/useAIChatWidthStore.ts b/packages/gitbook/src/components/AIChat/useAIChatWidthStore.ts
new file mode 100644
index 0000000000..953bb27633
--- /dev/null
+++ b/packages/gitbook/src/components/AIChat/useAIChatWidthStore.ts
@@ -0,0 +1,66 @@
+'use client';
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+const AI_CHAT_MIN_WIDTH = 384;
+const AI_CHAT_MAX_WIDTH = 640;
+
+type AIChatWidthStore = {
+    /** The user's preferred panel width, in pixels (independent of viewport). */
+    width: number;
+    /** Toggle the panel between its default and maximum width. */
+    toggleWidth: () => void;
+    /** Whether the panel is at its maximum width. */
+    isMaxWidth: boolean;
+    /** Clamp & store a new preferred width, then apply it to the CSS variable. */
+    setWidth: (width: number) => number;
+    /** Re-apply the viewport cap to the CSS variable (e.g. on window resize). */
+    syncWidth: () => void;
+};
+
+export const useAIChatWidthStore = create<AIChatWidthStore>()(
+    persist(
+        (set, get) => ({
+            width: AI_CHAT_MIN_WIDTH,
+            isMaxWidth: false,
+            toggleWidth: () =>
+                get().setWidth(
+                    get().width >= AI_CHAT_MAX_WIDTH ? AI_CHAT_MIN_WIDTH : AI_CHAT_MAX_WIDTH
+                ),
+            setWidth: (width) => {
+                const clamped = clampWidth(width);
+                if (get().width !== clamped) {
+                    set({ width: clamped, isMaxWidth: clamped >= AI_CHAT_MAX_WIDTH });
+                }
+                get().syncWidth();
+                return clamped;
+            },
+            syncWidth: () => {
+                if (typeof document !== 'undefined') {
+                    document.documentElement.style.setProperty(
+                        '--ai-chat-width',
+                        `${capToViewport(get().width)}px`
+                    );
+                }
+            },
+        }),
+        {
+            name: '@gitbook/ai-chat-width',
+            partialize: (state) => ({ width: state.width }),
+            onRehydrateStorage: () => (state) => state?.setWidth(state.width),
+        }
+    )
+);
+
+// Clamp a width to the allowed range (the user's preference, independent of viewport).
+const clampWidth = (width: number) =>
+    Math.min(AI_CHAT_MAX_WIDTH, Math.max(AI_CHAT_MIN_WIDTH, Math.round(width)));
+
+const MIN_CONTENT_WIDTH = 720;
+
+// Cap a width so the remaining content keeps a usable minimum at the current viewport.
+const capToViewport = (width: number) =>
+    typeof window === 'undefined'
+        ? width
+        : Math.min(width, Math.max(AI_CHAT_MIN_WIDTH, window.innerWidth - MIN_CONTENT_WIDTH));
diff --git a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
index 08b4971c0c..59c1e6f50c 100644
--- a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
+++ b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
@@ -42,7 +42,7 @@ export function AnnouncementBanner(props: {
             className="theme-bold:bg-header-background pt-4 pb-2"
             data-nosnippet=""
         >
-            <div className="transition-all duration-300 motion-reduce:transition-none lg:chat-open:pr-80 xl:chat-open:pr-96">
+            <div className="transition-all duration-300 motion-reduce:transition-none lg:chat-open:pr-(--ai-chat-width)">
                 <div className={tcls('relative', CONTAINER_STYLE)}>
                     <Tag
                         href={contentRef?.href ?? ''}
diff --git a/packages/gitbook/src/components/Cookies/CookiesToast.tsx b/packages/gitbook/src/components/Cookies/CookiesToast.tsx
index 017edff4ea..5309c71ff0 100644
--- a/packages/gitbook/src/components/Cookies/CookiesToast.tsx
+++ b/packages/gitbook/src/components/Cookies/CookiesToast.tsx
@@ -80,8 +80,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 'max-w-md',
                 'text-balance',
                 'sm:left-auto',
-                'lg:chat-open:mr-80',
-                'xl:chat-open:mr-100',
+                'lg:chat-open:mr-(--ai-chat-width)',
                 'transition-all',
                 'motion-reduce:transition-none',
                 'duration-300',
diff --git a/packages/gitbook/src/components/Footer/Footer.tsx b/packages/gitbook/src/components/Footer/Footer.tsx
index ef848a690c..a6074c810a 100644
--- a/packages/gitbook/src/components/Footer/Footer.tsx
+++ b/packages/gitbook/src/components/Footer/Footer.tsx
@@ -35,7 +35,7 @@ export function Footer(props: { context: GitBookSiteContext }) {
                 mobileOnly ? 'xl:hidden' : null
             )}
         >
-            <div className="transition-[padding] duration-300 motion-reduce:transition-none lg:chat-open:pr-80 xl:chat-open:pr-96">
+            <div className="transition-[padding] duration-300 motion-reduce:transition-none lg:chat-open:pr-(--ai-chat-width)">
                 <div
                     className={tcls(
                         CONTAINER_STYLE,
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index bbe8086538..ae04b9390a 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -75,7 +75,7 @@ export async function Header(props: {
                     'site-header:theme-bold:shadow-tint-12/2'
                 )}
             >
-                <div className="transition-all duration-300 motion-reduce:transition-none lg:chat-open:pr-80 xl:chat-open:pr-96">
+                <div className="transition-all duration-300 motion-reduce:transition-none lg:chat-open:pr-(--ai-chat-width)">
                     <div
                         data-gb-header-content
                         className={tcls(
@@ -206,7 +206,7 @@ export async function Header(props: {
             </div>
 
             {visibleSections && withSections ? (
-                <div className="transition-[padding] duration-300 motion-reduce:transition-none lg:chat-open:pr-80 xl:chat-open:pr-96">
+                <div className="transition-[padding] duration-300 motion-reduce:transition-none lg:chat-open:pr-(--ai-chat-width)">
                     <SiteSectionTabs sections={encodeClientSiteSections(context, visibleSections)}>
                         {variants.translations.length > 1 ? (
                             <TranslationsDropdown
diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
index f7670d267e..198997846e 100644
--- a/packages/gitbook/src/components/RootLayout/globals.css
+++ b/packages/gitbook/src/components/RootLayout/globals.css
@@ -211,6 +211,7 @@
         @apply leading-relaxed;
         interpolate-size: allow-keywords; /* Opt-in for modern browsers to interpolate "auto" values in transitions/animations. */
         overflow-x: hidden; /* We never want horizontal scroll of the whole page, it looks buggy and we should never have overflow anyway */
+        --ai-chat-width: 24rem; /* Default AI chat panel width (= AI_CHAT_DEFAULT_WIDTH 384px); overridden client-side from local storage. */
     }
     
     /* Modern browsers with `scrollbar-*` support */
@@ -305,6 +306,15 @@ html.dark {
     color-scheme: dark light;
 }
 
+/** While the AI chat panel is being resized, suppress transitions */
+html[data-ai-chat-resizing="true"] {
+    cursor: col-resize;
+    user-select: none;
+}
+html[data-ai-chat-resizing="true"] * {
+    transition-duration: 0s !important;
+}
+
 html.announcement-hidden [data-gb-announcement-banner] {
     @apply hidden;
 }
diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
index 9b0a261330..1449dfcfa4 100644
--- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
+++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
@@ -135,7 +135,7 @@ export function SpaceLayout(props: SpaceLayoutProps) {
             ) : null}
 
             {/* Chat panel shifts content left when open */}
-            <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 lg:chat-open:mr-(--ai-chat-width)">
                 <div
                     className={tcls(
                         'flex',
diff --git a/packages/gitbook/src/intl/translations/ar.ts b/packages/gitbook/src/intl/translations/ar.ts
index ad11b08219..441c0a5c5e 100644
--- a/packages/gitbook/src/intl/translations/ar.ts
+++ b/packages/gitbook/src/intl/translations/ar.ts
@@ -105,6 +105,8 @@ export const ar: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'مساء الخير',
     ai_chat_assistant_greeting_night: 'تصبح على خير',
     ai_chat_clear_conversation: 'مسح المحادثة',
+    ai_chat_expand_panel: 'توسيع اللوحة',
+    ai_chat_collapse_panel: 'طي اللوحة',
     ai_chat_thinking: 'جار التفكير...',
     ai_chat_working: 'جار العمل...',
     ai_chat_exploring: 'جار الاستكشاف...',
diff --git a/packages/gitbook/src/intl/translations/bg.ts b/packages/gitbook/src/intl/translations/bg.ts
index 7b65e350f2..0b51f59858 100644
--- a/packages/gitbook/src/intl/translations/bg.ts
+++ b/packages/gitbook/src/intl/translations/bg.ts
@@ -107,6 +107,8 @@ export const bg: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Добър вечер',
     ai_chat_assistant_greeting_night: 'Лека нощ',
     ai_chat_clear_conversation: 'Изчистване на разговора',
+    ai_chat_expand_panel: 'Разгъване на панела',
+    ai_chat_collapse_panel: 'Свиване на панела',
     ai_chat_thinking: 'Мисля...',
     ai_chat_working: 'Работя...',
     ai_chat_exploring: 'Проучвам...',
diff --git a/packages/gitbook/src/intl/translations/cs.ts b/packages/gitbook/src/intl/translations/cs.ts
index 31fb0948ac..36cb4372c0 100644
--- a/packages/gitbook/src/intl/translations/cs.ts
+++ b/packages/gitbook/src/intl/translations/cs.ts
@@ -107,6 +107,8 @@ export const cs: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Dobrý večer',
     ai_chat_assistant_greeting_night: 'Dobrou noc',
     ai_chat_clear_conversation: 'Vymazat konverzaci',
+    ai_chat_expand_panel: 'Rozbalit panel',
+    ai_chat_collapse_panel: 'Sbalit panel',
     ai_chat_thinking: 'Přemýšlím...',
     ai_chat_working: 'Pracuji...',
     ai_chat_exploring: 'Prozkoumávám...',
diff --git a/packages/gitbook/src/intl/translations/da.ts b/packages/gitbook/src/intl/translations/da.ts
index 6bbe39a3b7..ecd6bdfded 100644
--- a/packages/gitbook/src/intl/translations/da.ts
+++ b/packages/gitbook/src/intl/translations/da.ts
@@ -106,6 +106,8 @@ export const da: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Godaften',
     ai_chat_assistant_greeting_night: 'Godnat',
     ai_chat_clear_conversation: 'Ryd samtale',
+    ai_chat_expand_panel: 'Udvid panel',
+    ai_chat_collapse_panel: 'Formindsk panel',
     ai_chat_thinking: 'Tænker...',
     ai_chat_working: 'Arbejder...',
     ai_chat_exploring: 'Udforsker...',
diff --git a/packages/gitbook/src/intl/translations/de.ts b/packages/gitbook/src/intl/translations/de.ts
index 58cc41b37c..7ce54f13bf 100644
--- a/packages/gitbook/src/intl/translations/de.ts
+++ b/packages/gitbook/src/intl/translations/de.ts
@@ -108,6 +108,8 @@ export const de = {
     ai_chat_assistant_greeting_evening: 'Guten Abend',
     ai_chat_assistant_greeting_night: 'Gute Nacht',
     ai_chat_clear_conversation: 'Unterhaltung löschen',
+    ai_chat_expand_panel: 'Panel erweitern',
+    ai_chat_collapse_panel: 'Panel reduzieren',
     ai_chat_thinking: 'Denke nach...',
     ai_chat_working: 'Arbeite...',
     ai_chat_exploring: 'Erkunde...',
diff --git a/packages/gitbook/src/intl/translations/el.ts b/packages/gitbook/src/intl/translations/el.ts
index 7966199d79..422dfe1d8f 100644
--- a/packages/gitbook/src/intl/translations/el.ts
+++ b/packages/gitbook/src/intl/translations/el.ts
@@ -108,6 +108,8 @@ export const el: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Καλό βράδυ',
     ai_chat_assistant_greeting_night: 'Καληνύχτα',
     ai_chat_clear_conversation: 'Εκκαθάριση συνομιλίας',
+    ai_chat_expand_panel: 'Ανάπτυξη πίνακα',
+    ai_chat_collapse_panel: 'Σύμπτυξη πίνακα',
     ai_chat_thinking: 'Σκέφτομαι...',
     ai_chat_working: 'Εργάζομαι...',
     ai_chat_exploring: 'Εξερευνώ...',
diff --git a/packages/gitbook/src/intl/translations/en.ts b/packages/gitbook/src/intl/translations/en.ts
index ad112cee03..f965d7561e 100644
--- a/packages/gitbook/src/intl/translations/en.ts
+++ b/packages/gitbook/src/intl/translations/en.ts
@@ -103,6 +103,8 @@ export const en = {
     ai_chat_assistant_greeting_evening: 'Good evening',
     ai_chat_assistant_greeting_night: 'Good night',
     ai_chat_clear_conversation: 'Clear conversation',
+    ai_chat_expand_panel: 'Expand panel',
+    ai_chat_collapse_panel: 'Collapse panel',
     ai_chat_thinking: 'Thinking…',
     ai_chat_working: 'Working…',
     ai_chat_exploring: 'Exploring…',
diff --git a/packages/gitbook/src/intl/translations/es.ts b/packages/gitbook/src/intl/translations/es.ts
index 75cfbb312a..ed706e2f0c 100644
--- a/packages/gitbook/src/intl/translations/es.ts
+++ b/packages/gitbook/src/intl/translations/es.ts
@@ -109,6 +109,8 @@ export const es: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Buenas tardes',
     ai_chat_assistant_greeting_night: 'Buenas noches',
     ai_chat_clear_conversation: 'Limpiar conversación',
+    ai_chat_expand_panel: 'Expandir panel',
+    ai_chat_collapse_panel: 'Contraer panel',
     ai_chat_thinking: 'Pensando...',
     ai_chat_working: 'Trabajando...',
     ai_chat_exploring: 'Explorando...',
diff --git a/packages/gitbook/src/intl/translations/et.ts b/packages/gitbook/src/intl/translations/et.ts
index 2146f425ed..dc5ae73a73 100644
--- a/packages/gitbook/src/intl/translations/et.ts
+++ b/packages/gitbook/src/intl/translations/et.ts
@@ -105,6 +105,8 @@ export const et: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Tere õhtust',
     ai_chat_assistant_greeting_night: 'Head ööd',
     ai_chat_clear_conversation: 'Tühjenda vestlus',
+    ai_chat_expand_panel: 'Laienda paneeli',
+    ai_chat_collapse_panel: 'Ahenda paneeli',
     ai_chat_thinking: 'Mõtlen...',
     ai_chat_working: 'Töötan...',
     ai_chat_exploring: 'Uurin...',
diff --git a/packages/gitbook/src/intl/translations/fi.ts b/packages/gitbook/src/intl/translations/fi.ts
index 12393b3b1e..5815cc90ce 100644
--- a/packages/gitbook/src/intl/translations/fi.ts
+++ b/packages/gitbook/src/intl/translations/fi.ts
@@ -106,6 +106,8 @@ export const fi: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Hyvää iltaa',
     ai_chat_assistant_greeting_night: 'Hyvää yötä',
     ai_chat_clear_conversation: 'Tyhjennä keskustelu',
+    ai_chat_expand_panel: 'Laajenna paneeli',
+    ai_chat_collapse_panel: 'Pienennä paneeli',
     ai_chat_thinking: 'Ajatellaan...',
     ai_chat_working: 'Työskennellään...',
     ai_chat_exploring: 'Tutkitaan...',
diff --git a/packages/gitbook/src/intl/translations/fr.ts b/packages/gitbook/src/intl/translations/fr.ts
index 25ace66566..7633d6cd92 100644
--- a/packages/gitbook/src/intl/translations/fr.ts
+++ b/packages/gitbook/src/intl/translations/fr.ts
@@ -104,6 +104,8 @@ export const fr = {
     ai_chat_assistant_greeting_evening: 'Bonsoir',
     ai_chat_assistant_greeting_night: 'Bonne nuit',
     ai_chat_clear_conversation: 'Réinitialiser la conversation',
+    ai_chat_expand_panel: 'Agrandir le panneau',
+    ai_chat_collapse_panel: 'Réduire le panneau',
     ai_chat_thinking: 'Réflexion en cours…',
     ai_chat_working: 'Traitement en cours…',
     ai_chat_exploring: 'Exploration en cours…',
diff --git a/packages/gitbook/src/intl/translations/he.ts b/packages/gitbook/src/intl/translations/he.ts
index 6835c3b2cd..fbb45b211d 100644
--- a/packages/gitbook/src/intl/translations/he.ts
+++ b/packages/gitbook/src/intl/translations/he.ts
@@ -105,6 +105,8 @@ export const he: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'ערב טוב',
     ai_chat_assistant_greeting_night: 'לילה טוב',
     ai_chat_clear_conversation: 'ניקוי השיחה',
+    ai_chat_expand_panel: 'הרחב פאנל',
+    ai_chat_collapse_panel: 'כווץ פאנל',
     ai_chat_thinking: 'חושב...',
     ai_chat_working: 'עובד...',
     ai_chat_exploring: 'בודק...',
diff --git a/packages/gitbook/src/intl/translations/hi.ts b/packages/gitbook/src/intl/translations/hi.ts
index b60f5ff2b1..16cbfbfcd4 100644
--- a/packages/gitbook/src/intl/translations/hi.ts
+++ b/packages/gitbook/src/intl/translations/hi.ts
@@ -105,6 +105,8 @@ export const hi: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'शुभ संध्या',
     ai_chat_assistant_greeting_night: 'शुभ रात्रि',
     ai_chat_clear_conversation: 'बातचीत साफ करें',
+    ai_chat_expand_panel: 'पैनल का विस्तार करें',
+    ai_chat_collapse_panel: 'पैनल को छोटा करें',
     ai_chat_thinking: 'सोच रहा है...',
     ai_chat_working: 'काम कर रहा है...',
     ai_chat_exploring: 'खोज रहा है...',
diff --git a/packages/gitbook/src/intl/translations/hr.ts b/packages/gitbook/src/intl/translations/hr.ts
index 9d1eeb8475..39d168c8e1 100644
--- a/packages/gitbook/src/intl/translations/hr.ts
+++ b/packages/gitbook/src/intl/translations/hr.ts
@@ -107,6 +107,8 @@ export const hr: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Dobra večer',
     ai_chat_assistant_greeting_night: 'Laku noć',
     ai_chat_clear_conversation: 'Očisti razgovor',
+    ai_chat_expand_panel: 'Proširi ploču',
+    ai_chat_collapse_panel: 'Sažmi ploču',
     ai_chat_thinking: 'Razmišljam...',
     ai_chat_working: 'Radim...',
     ai_chat_exploring: 'Istražujem...',
diff --git a/packages/gitbook/src/intl/translations/hu.ts b/packages/gitbook/src/intl/translations/hu.ts
index 2d2c2e771d..b1c078c7be 100644
--- a/packages/gitbook/src/intl/translations/hu.ts
+++ b/packages/gitbook/src/intl/translations/hu.ts
@@ -106,6 +106,8 @@ export const hu: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Jó estét',
     ai_chat_assistant_greeting_night: 'Jó éjszakát',
     ai_chat_clear_conversation: 'Beszélgetés törlése',
+    ai_chat_expand_panel: 'Panel kibontása',
+    ai_chat_collapse_panel: 'Panel összecsukása',
     ai_chat_thinking: 'Gondolkodom...',
     ai_chat_working: 'Dolgozom...',
     ai_chat_exploring: 'Felfedezés...',
diff --git a/packages/gitbook/src/intl/translations/id.ts b/packages/gitbook/src/intl/translations/id.ts
index d4068bb334..5fd806b436 100644
--- a/packages/gitbook/src/intl/translations/id.ts
+++ b/packages/gitbook/src/intl/translations/id.ts
@@ -106,6 +106,8 @@ export const id: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Selamat malam',
     ai_chat_assistant_greeting_night: 'Selamat malam',
     ai_chat_clear_conversation: 'Bersihkan percakapan',
+    ai_chat_expand_panel: 'Perluas panel',
+    ai_chat_collapse_panel: 'Ciutkan panel',
     ai_chat_thinking: 'Berpikir...',
     ai_chat_working: 'Bekerja...',
     ai_chat_exploring: 'Menjelajahi...',
diff --git a/packages/gitbook/src/intl/translations/it.ts b/packages/gitbook/src/intl/translations/it.ts
index 9ff290ba16..5d67b1bfb7 100644
--- a/packages/gitbook/src/intl/translations/it.ts
+++ b/packages/gitbook/src/intl/translations/it.ts
@@ -108,6 +108,8 @@ export const it: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Buonasera',
     ai_chat_assistant_greeting_night: 'Buonanotte',
     ai_chat_clear_conversation: 'Cancella conversazione',
+    ai_chat_expand_panel: 'Espandi pannello',
+    ai_chat_collapse_panel: 'Comprimi pannello',
     ai_chat_thinking: 'Sto pensando...',
     ai_chat_working: 'Sto lavorando...',
     ai_chat_exploring: 'Esplorando...',
diff --git a/packages/gitbook/src/intl/translations/ja.ts b/packages/gitbook/src/intl/translations/ja.ts
index 493d332e8d..ed950ba603 100644
--- a/packages/gitbook/src/intl/translations/ja.ts
+++ b/packages/gitbook/src/intl/translations/ja.ts
@@ -107,6 +107,8 @@ export const ja: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'こんばんは',
     ai_chat_assistant_greeting_night: 'おやすみなさい',
     ai_chat_clear_conversation: '会話をクリア',
+    ai_chat_expand_panel: 'パネルを広げる',
+    ai_chat_collapse_panel: 'パネルを狭める',
     ai_chat_thinking: '考え中...',
     ai_chat_working: '作業中...',
     ai_chat_exploring: '探索中...',
diff --git a/packages/gitbook/src/intl/translations/ko.ts b/packages/gitbook/src/intl/translations/ko.ts
index 49328aa414..57761a0f24 100644
--- a/packages/gitbook/src/intl/translations/ko.ts
+++ b/packages/gitbook/src/intl/translations/ko.ts
@@ -106,6 +106,8 @@ export const ko: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: '좋은 저녁입니다',
     ai_chat_assistant_greeting_night: '안녕히 주무세요',
     ai_chat_clear_conversation: '대화 지우기',
+    ai_chat_expand_panel: '패널 확장',
+    ai_chat_collapse_panel: '패널 축소',
     ai_chat_thinking: '생각 중...',
     ai_chat_working: '작업 중...',
     ai_chat_exploring: '탐색 중...',
diff --git a/packages/gitbook/src/intl/translations/lt.ts b/packages/gitbook/src/intl/translations/lt.ts
index 437fcffda6..543e276f32 100644
--- a/packages/gitbook/src/intl/translations/lt.ts
+++ b/packages/gitbook/src/intl/translations/lt.ts
@@ -106,6 +106,8 @@ export const lt: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Labas vakaras',
     ai_chat_assistant_greeting_night: 'Labanakt',
     ai_chat_clear_conversation: 'Išvalyti pokalbį',
+    ai_chat_expand_panel: 'Išskleisti skydelį',
+    ai_chat_collapse_panel: 'Sutraukti skydelį',
     ai_chat_thinking: 'Galvoju...',
     ai_chat_working: 'Dirbu...',
     ai_chat_exploring: 'Tyrinėju...',
diff --git a/packages/gitbook/src/intl/translations/lv.ts b/packages/gitbook/src/intl/translations/lv.ts
index 9dd2511542..86e4ae3ced 100644
--- a/packages/gitbook/src/intl/translations/lv.ts
+++ b/packages/gitbook/src/intl/translations/lv.ts
@@ -105,6 +105,8 @@ export const lv: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Labvakar',
     ai_chat_assistant_greeting_night: 'Ar labu nakti',
     ai_chat_clear_conversation: 'Notīrīt sarunu',
+    ai_chat_expand_panel: 'Izvērst paneli',
+    ai_chat_collapse_panel: 'Sakļaut paneli',
     ai_chat_thinking: 'Domāju...',
     ai_chat_working: 'Strādāju...',
     ai_chat_exploring: 'Izpētu...',
diff --git a/packages/gitbook/src/intl/translations/ms.ts b/packages/gitbook/src/intl/translations/ms.ts
index 2278aa5586..f4911d7f09 100644
--- a/packages/gitbook/src/intl/translations/ms.ts
+++ b/packages/gitbook/src/intl/translations/ms.ts
@@ -106,6 +106,8 @@ export const ms: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Selamat petang',
     ai_chat_assistant_greeting_night: 'Selamat malam',
     ai_chat_clear_conversation: 'Kosongkan perbualan',
+    ai_chat_expand_panel: 'Kembangkan panel',
+    ai_chat_collapse_panel: 'Kecilkan panel',
     ai_chat_thinking: 'Berfikir...',
     ai_chat_working: 'Bekerja...',
     ai_chat_exploring: 'Meneroka...',
diff --git a/packages/gitbook/src/intl/translations/nl.ts b/packages/gitbook/src/intl/translations/nl.ts
index 707355cea3..8d11cd9506 100644
--- a/packages/gitbook/src/intl/translations/nl.ts
+++ b/packages/gitbook/src/intl/translations/nl.ts
@@ -107,6 +107,8 @@ export const nl: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Goedenavond',
     ai_chat_assistant_greeting_night: 'Goedenacht',
     ai_chat_clear_conversation: 'Gesprek wissen',
+    ai_chat_expand_panel: 'Paneel uitvouwen',
+    ai_chat_collapse_panel: 'Paneel samenvouwen',
     ai_chat_thinking: 'Denkt na...',
     ai_chat_working: 'Werkt...',
     ai_chat_exploring: 'Verkent...',
diff --git a/packages/gitbook/src/intl/translations/no.ts b/packages/gitbook/src/intl/translations/no.ts
index 80bced8c7a..ab6884d8ff 100644
--- a/packages/gitbook/src/intl/translations/no.ts
+++ b/packages/gitbook/src/intl/translations/no.ts
@@ -107,6 +107,8 @@ export const no: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'God kveld',
     ai_chat_assistant_greeting_night: 'God natt',
     ai_chat_clear_conversation: 'Tøm samtale',
+    ai_chat_expand_panel: 'Utvid panel',
+    ai_chat_collapse_panel: 'Reduser panel',
     ai_chat_thinking: 'Tenker...',
     ai_chat_working: 'Arbeider...',
     ai_chat_exploring: 'Utforsker...',
diff --git a/packages/gitbook/src/intl/translations/pl.ts b/packages/gitbook/src/intl/translations/pl.ts
index 7b97e28d90..a2f045ab91 100644
--- a/packages/gitbook/src/intl/translations/pl.ts
+++ b/packages/gitbook/src/intl/translations/pl.ts
@@ -106,6 +106,8 @@ export const pl: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Dobry wieczór',
     ai_chat_assistant_greeting_night: 'Dobranoc',
     ai_chat_clear_conversation: 'Wyczyść rozmowę',
+    ai_chat_expand_panel: 'Rozwiń panel',
+    ai_chat_collapse_panel: 'Zwiń panel',
     ai_chat_thinking: 'Myślę...',
     ai_chat_working: 'Pracuję...',
     ai_chat_exploring: 'Sprawdzam...',
diff --git a/packages/gitbook/src/intl/translations/pt-br.ts b/packages/gitbook/src/intl/translations/pt-br.ts
index 085bcb472b..f3d5eea2a5 100644
--- a/packages/gitbook/src/intl/translations/pt-br.ts
+++ b/packages/gitbook/src/intl/translations/pt-br.ts
@@ -107,6 +107,8 @@ export const pt_br = {
     ai_chat_assistant_greeting_evening: 'Boa tarde',
     ai_chat_assistant_greeting_night: 'Boa noite',
     ai_chat_clear_conversation: 'Limpar conversa',
+    ai_chat_expand_panel: 'Expandir painel',
+    ai_chat_collapse_panel: 'Recolher painel',
     ai_chat_thinking: 'Pensando...',
     ai_chat_working: 'Trabalhando...',
     ai_chat_exploring: 'Explorando...',
diff --git a/packages/gitbook/src/intl/translations/pt.ts b/packages/gitbook/src/intl/translations/pt.ts
index e532c60803..71ec6e4bc3 100644
--- a/packages/gitbook/src/intl/translations/pt.ts
+++ b/packages/gitbook/src/intl/translations/pt.ts
@@ -106,6 +106,8 @@ export const pt: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Boa noite',
     ai_chat_assistant_greeting_night: 'Boa noite',
     ai_chat_clear_conversation: 'Limpar conversa',
+    ai_chat_expand_panel: 'Expandir painel',
+    ai_chat_collapse_panel: 'Recolher painel',
     ai_chat_thinking: 'A pensar...',
     ai_chat_working: 'A trabalhar...',
     ai_chat_exploring: 'A explorar...',
diff --git a/packages/gitbook/src/intl/translations/ro.ts b/packages/gitbook/src/intl/translations/ro.ts
index c1ee35d098..4ba3123b88 100644
--- a/packages/gitbook/src/intl/translations/ro.ts
+++ b/packages/gitbook/src/intl/translations/ro.ts
@@ -108,6 +108,8 @@ export const ro: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Bună seara',
     ai_chat_assistant_greeting_night: 'Noapte bună',
     ai_chat_clear_conversation: 'Șterge conversația',
+    ai_chat_expand_panel: 'Extinde panoul',
+    ai_chat_collapse_panel: 'Restrânge panoul',
     ai_chat_thinking: 'Se gândește...',
     ai_chat_working: 'Lucrează...',
     ai_chat_exploring: 'Explorează...',
diff --git a/packages/gitbook/src/intl/translations/ru.ts b/packages/gitbook/src/intl/translations/ru.ts
index 4d9fb83d33..a1d911ca65 100644
--- a/packages/gitbook/src/intl/translations/ru.ts
+++ b/packages/gitbook/src/intl/translations/ru.ts
@@ -106,6 +106,8 @@ export const ru = {
     ai_chat_assistant_greeting_evening: 'Добрый вечер',
     ai_chat_assistant_greeting_night: 'Доброй ночи',
     ai_chat_clear_conversation: 'Очистить диалог',
+    ai_chat_expand_panel: 'Развернуть панель',
+    ai_chat_collapse_panel: 'Свернуть панель',
     ai_chat_thinking: 'Думает…',
     ai_chat_working: 'Работает…',
     ai_chat_exploring: 'Изучает…',
diff --git a/packages/gitbook/src/intl/translations/sk.ts b/packages/gitbook/src/intl/translations/sk.ts
index d630c0c770..fec6b716d8 100644
--- a/packages/gitbook/src/intl/translations/sk.ts
+++ b/packages/gitbook/src/intl/translations/sk.ts
@@ -107,6 +107,8 @@ export const sk: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Dobrý večer',
     ai_chat_assistant_greeting_night: 'Dobrú noc',
     ai_chat_clear_conversation: 'Vymazať konverzáciu',
+    ai_chat_expand_panel: 'Rozbaliť panel',
+    ai_chat_collapse_panel: 'Zbaliť panel',
     ai_chat_thinking: 'Premýšľam...',
     ai_chat_working: 'Pracujem...',
     ai_chat_exploring: 'Skúmam...',
diff --git a/packages/gitbook/src/intl/translations/sl.ts b/packages/gitbook/src/intl/translations/sl.ts
index 1c88af3feb..4e0ee5a27c 100644
--- a/packages/gitbook/src/intl/translations/sl.ts
+++ b/packages/gitbook/src/intl/translations/sl.ts
@@ -106,6 +106,8 @@ export const sl: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Dober večer',
     ai_chat_assistant_greeting_night: 'Lahko noč',
     ai_chat_clear_conversation: 'Počisti pogovor',
+    ai_chat_expand_panel: 'Razširi ploščo',
+    ai_chat_collapse_panel: 'Skrči ploščo',
     ai_chat_thinking: 'Razmišljam...',
     ai_chat_working: 'Delam...',
     ai_chat_exploring: 'Raziskujem...',
diff --git a/packages/gitbook/src/intl/translations/sv.ts b/packages/gitbook/src/intl/translations/sv.ts
index 9d42d482fa..225d2b370a 100644
--- a/packages/gitbook/src/intl/translations/sv.ts
+++ b/packages/gitbook/src/intl/translations/sv.ts
@@ -106,6 +106,8 @@ export const sv: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'God kväll',
     ai_chat_assistant_greeting_night: 'God natt',
     ai_chat_clear_conversation: 'Rensa konversation',
+    ai_chat_expand_panel: 'Expandera panel',
+    ai_chat_collapse_panel: 'Förminska panel',
     ai_chat_thinking: 'Tänker...',
     ai_chat_working: 'Arbetar...',
     ai_chat_exploring: 'Utforskar...',
diff --git a/packages/gitbook/src/intl/translations/th.ts b/packages/gitbook/src/intl/translations/th.ts
index c584b54703..4c6bf76b8f 100644
--- a/packages/gitbook/src/intl/translations/th.ts
+++ b/packages/gitbook/src/intl/translations/th.ts
@@ -104,6 +104,8 @@ export const th: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'สวัสดีตอนเย็น',
     ai_chat_assistant_greeting_night: 'ราตรีสวัสดิ์',
     ai_chat_clear_conversation: 'ล้างการสนทนา',
+    ai_chat_expand_panel: 'ขยายแผง',
+    ai_chat_collapse_panel: 'ย่อแผง',
     ai_chat_thinking: 'กำลังคิด...',
     ai_chat_working: 'กำลังทำงาน...',
     ai_chat_exploring: 'กำลังสำรวจ...',
diff --git a/packages/gitbook/src/intl/translations/tr.ts b/packages/gitbook/src/intl/translations/tr.ts
index 301bafd46e..1573c1b87f 100644
--- a/packages/gitbook/src/intl/translations/tr.ts
+++ b/packages/gitbook/src/intl/translations/tr.ts
@@ -105,6 +105,8 @@ export const tr: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'İyi akşamlar',
     ai_chat_assistant_greeting_night: 'İyi geceler',
     ai_chat_clear_conversation: 'Konuşmayı temizle',
+    ai_chat_expand_panel: 'Paneli genişlet',
+    ai_chat_collapse_panel: 'Paneli daralt',
     ai_chat_thinking: 'Düşünüyor...',
     ai_chat_working: 'Çalışıyor...',
     ai_chat_exploring: 'İnceliyor...',
diff --git a/packages/gitbook/src/intl/translations/uk.ts b/packages/gitbook/src/intl/translations/uk.ts
index f0b1d5b8d1..f3600e1865 100644
--- a/packages/gitbook/src/intl/translations/uk.ts
+++ b/packages/gitbook/src/intl/translations/uk.ts
@@ -105,6 +105,8 @@ export const uk: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Добрий вечір',
     ai_chat_assistant_greeting_night: 'Добраніч',
     ai_chat_clear_conversation: 'Очистити розмову',
+    ai_chat_expand_panel: 'Розгорнути панель',
+    ai_chat_collapse_panel: 'Згорнути панель',
     ai_chat_thinking: 'Думаю...',
     ai_chat_working: 'Працюю...',
     ai_chat_exploring: 'Досліджую...',
diff --git a/packages/gitbook/src/intl/translations/vi.ts b/packages/gitbook/src/intl/translations/vi.ts
index 2f287887ae..f68d171b34 100644
--- a/packages/gitbook/src/intl/translations/vi.ts
+++ b/packages/gitbook/src/intl/translations/vi.ts
@@ -105,6 +105,8 @@ export const vi: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: 'Chào buổi tối',
     ai_chat_assistant_greeting_night: 'Chúc ngủ ngon',
     ai_chat_clear_conversation: 'Xóa cuộc trò chuyện',
+    ai_chat_expand_panel: 'Mở rộng bảng',
+    ai_chat_collapse_panel: 'Thu gọn bảng',
     ai_chat_thinking: 'Đang suy nghĩ...',
     ai_chat_working: 'Đang làm việc...',
     ai_chat_exploring: 'Đang khám phá...',
diff --git a/packages/gitbook/src/intl/translations/yue.ts b/packages/gitbook/src/intl/translations/yue.ts
index 4746821da7..4f3ca3934b 100644
--- a/packages/gitbook/src/intl/translations/yue.ts
+++ b/packages/gitbook/src/intl/translations/yue.ts
@@ -103,6 +103,8 @@ export const yue: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: '晚上好',
     ai_chat_assistant_greeting_night: '晚安',
     ai_chat_clear_conversation: '清除對話',
+    ai_chat_expand_panel: '展開面板',
+    ai_chat_collapse_panel: '收合面板',
     ai_chat_thinking: '諗緊...',
     ai_chat_working: '處理緊...',
     ai_chat_exploring: '探索緊...',
diff --git a/packages/gitbook/src/intl/translations/zh-tw.ts b/packages/gitbook/src/intl/translations/zh-tw.ts
index 47c27179e6..3b509cb2cb 100644
--- a/packages/gitbook/src/intl/translations/zh-tw.ts
+++ b/packages/gitbook/src/intl/translations/zh-tw.ts
@@ -103,6 +103,8 @@ export const zh_tw: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: '晚安',
     ai_chat_assistant_greeting_night: '晚安',
     ai_chat_clear_conversation: '清除對話',
+    ai_chat_expand_panel: '展開面板',
+    ai_chat_collapse_panel: '收合面板',
     ai_chat_thinking: '思考中...',
     ai_chat_working: '處理中...',
     ai_chat_exploring: '探索中...',
diff --git a/packages/gitbook/src/intl/translations/zh.ts b/packages/gitbook/src/intl/translations/zh.ts
index 9359f6ddd6..3aee797f75 100644
--- a/packages/gitbook/src/intl/translations/zh.ts
+++ b/packages/gitbook/src/intl/translations/zh.ts
@@ -104,6 +104,8 @@ export const zh: TranslationLanguage = {
     ai_chat_assistant_greeting_evening: '晚上好',
     ai_chat_assistant_greeting_night: '晚安',
     ai_chat_clear_conversation: '清空对话',
+    ai_chat_expand_panel: '展开面板',
+    ai_chat_collapse_panel: '收起面板',
     ai_chat_thinking: '思考中...',
     ai_chat_working: '工作中...',
     ai_chat_exploring: '探索中...',

From f4334f795ff4215f270ee7989ebf2c52611ae0f2 Mon Sep 17 00:00:00 2001
From: Nolann Biron <biron.nolann@gmail.com>
Date: Sat, 20 Jun 2026 18:04:30 +0200
Subject: [PATCH 2/3] chores

---
 packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx b/packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx
index b8a0ce48d7..af967f43fc 100644
--- a/packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx
@@ -6,9 +6,7 @@ import { Button } from '../primitives';
 import { useAIChatWidthStore } from './useAIChatWidthStore';
 
 /**
- * Toggle the panel between its default and maximum width. Tracks the live width
- * so the icon and action stay correct when the panel is resized with the drag
- * handle. Desktop only — the panel is a full-screen modal on mobile.
+ * Toggle the panel between its default and maximum width.
  */
 export function AIChatExpandButton() {
     const language = useLanguage();

From c3d55d08d463e9aa7697fd867e34dbbae1e83856 Mon Sep 17 00:00:00 2001
From: Nolann Biron <biron.nolann@gmail.com>
Date: Sat, 20 Jun 2026 21:27:11 +0200
Subject: [PATCH 3/3] improvements

---
 .../components/AIChat/AIChatExpandButton.tsx  |  8 +--
 .../components/AIChat/AIChatResizeHandle.tsx  | 26 ++------
 .../components/AIChat/useAIChatWidthStore.ts  | 62 +++++++++++--------
 3 files changed, 46 insertions(+), 50 deletions(-)

diff --git a/packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx b/packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx
index af967f43fc..11d12c7da6 100644
--- a/packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChatExpandButton.tsx
@@ -3,14 +3,12 @@
 import { tString, useLanguage } from '@/intl/client';
 import { Icon } from '@gitbook/icons';
 import { Button } from '../primitives';
-import { useAIChatWidthStore } from './useAIChatWidthStore';
+import { useAIChatWidthStore, useIsAIChatMaxWidth } from './useAIChatWidthStore';
 
-/**
- * Toggle the panel between its default and maximum width.
- */
 export function AIChatExpandButton() {
     const language = useLanguage();
-    const { toggleWidth, isMaxWidth } = useAIChatWidthStore();
+    const toggleWidth = useAIChatWidthStore((state) => state.toggleWidth);
+    const isMaxWidth = useIsAIChatMaxWidth();
 
     return (
         <Button
diff --git a/packages/gitbook/src/components/AIChat/AIChatResizeHandle.tsx b/packages/gitbook/src/components/AIChat/AIChatResizeHandle.tsx
index fc5e20cc6c..6c61faf31e 100644
--- a/packages/gitbook/src/components/AIChat/AIChatResizeHandle.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChatResizeHandle.tsx
@@ -4,26 +4,15 @@ import { tcls } from '@/lib/tailwind';
 import React from 'react';
 import { useAIChatWidthStore } from './useAIChatWidthStore';
 
-/**
- * Set the global flag that suppresses transitions while the panel is being dragged.
- */
 function setResizing(active: boolean) {
-    if (active) {
-        document.documentElement.dataset.aiChatResizing = 'true';
-    } else {
-        document.documentElement.dataset.aiChatResizing = 'false';
-    }
+    document.documentElement.dataset.aiChatResizing = String(active);
 }
 
-/**
- * Drag handle on the panel's left edge to resize the AI chat.
- */
 export function AIChatResizeHandle() {
-    const { width, setWidth } = useAIChatWidthStore();
+    const setWidth = useAIChatWidthStore((state) => state.setWidth);
     const frameRef = React.useRef<number | null>(null);
-    const widthRef = React.useRef(width);
+    const widthRef = React.useRef(0);
 
-    // Re-apply the viewport cap on window resize; clean up on unmount.
     React.useEffect(() => {
         const onResize = () => useAIChatWidthStore.getState().syncWidth();
         window.addEventListener('resize', onResize);
@@ -36,11 +25,6 @@ export function AIChatResizeHandle() {
         };
     }, []);
 
-    const commitWidth = (width: number) => {
-        widthRef.current = setWidth(width);
-    };
-
-    // Release the pointer and stop the resize interaction without committing a new width.
     const stopResizing = (event: React.PointerEvent<HTMLDivElement>) => {
         if (event.currentTarget.hasPointerCapture(event.pointerId)) {
             event.currentTarget.releasePointerCapture(event.pointerId);
@@ -55,6 +39,7 @@ export function AIChatResizeHandle() {
     const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
         event.preventDefault();
         event.currentTarget.setPointerCapture(event.pointerId);
+        widthRef.current = useAIChatWidthStore.getState().width;
         setResizing(true);
     };
 
@@ -76,7 +61,7 @@ export function AIChatResizeHandle() {
         if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
             return;
         }
-        commitWidth(widthRef.current);
+        setWidth(widthRef.current);
         stopResizing(event);
     };
 
@@ -86,6 +71,7 @@ export function AIChatResizeHandle() {
             onPointerDown={handlePointerDown}
             onPointerMove={handlePointerMove}
             onPointerUp={handlePointerUp}
+            onPointerCancel={stopResizing}
             className={tcls(
                 'group -translate-x-1/2 absolute inset-y-0 left-0 z-10 hidden w-3 cursor-col-resize touch-none lg:flex',
                 'items-stretch justify-center'
diff --git a/packages/gitbook/src/components/AIChat/useAIChatWidthStore.ts b/packages/gitbook/src/components/AIChat/useAIChatWidthStore.ts
index 953bb27633..79afebf24e 100644
--- a/packages/gitbook/src/components/AIChat/useAIChatWidthStore.ts
+++ b/packages/gitbook/src/components/AIChat/useAIChatWidthStore.ts
@@ -1,29 +1,30 @@
 'use client';
 
+import {
+    getLocalStorageItem,
+    removeLocalStorageItem,
+    setLocalStorageItem,
+} from '@/lib/browser/local-storage';
 import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
+import { type StorageValue, persist } from 'zustand/middleware';
 
 const AI_CHAT_MIN_WIDTH = 384;
 const AI_CHAT_MAX_WIDTH = 640;
+const MIN_CONTENT_WIDTH = 720;
 
 type AIChatWidthStore = {
-    /** The user's preferred panel width, in pixels (independent of viewport). */
     width: number;
-    /** Toggle the panel between its default and maximum width. */
     toggleWidth: () => void;
-    /** Whether the panel is at its maximum width. */
-    isMaxWidth: boolean;
-    /** Clamp & store a new preferred width, then apply it to the CSS variable. */
     setWidth: (width: number) => number;
-    /** Re-apply the viewport cap to the CSS variable (e.g. on window resize). */
     syncWidth: () => void;
 };
 
+type PersistedState = Pick<AIChatWidthStore, 'width'>;
+
 export const useAIChatWidthStore = create<AIChatWidthStore>()(
     persist(
         (set, get) => ({
             width: AI_CHAT_MIN_WIDTH,
-            isMaxWidth: false,
             toggleWidth: () =>
                 get().setWidth(
                     get().width >= AI_CHAT_MAX_WIDTH ? AI_CHAT_MIN_WIDTH : AI_CHAT_MAX_WIDTH
@@ -31,36 +32,47 @@ export const useAIChatWidthStore = create<AIChatWidthStore>()(
             setWidth: (width) => {
                 const clamped = clampWidth(width);
                 if (get().width !== clamped) {
-                    set({ width: clamped, isMaxWidth: clamped >= AI_CHAT_MAX_WIDTH });
+                    set({ width: clamped });
                 }
-                get().syncWidth();
+                setWidthOnViewport(clamped);
                 return clamped;
             },
-            syncWidth: () => {
-                if (typeof document !== 'undefined') {
-                    document.documentElement.style.setProperty(
-                        '--ai-chat-width',
-                        `${capToViewport(get().width)}px`
-                    );
-                }
-            },
+            syncWidth: () => setWidthOnViewport(get().width),
         }),
         {
             name: '@gitbook/ai-chat-width',
+            storage: {
+                getItem: (name) =>
+                    getLocalStorageItem<StorageValue<PersistedState> | null>(name, null),
+                setItem: (name, value) => setLocalStorageItem(name, value),
+                removeItem: (name) => removeLocalStorageItem(name),
+            },
             partialize: (state) => ({ width: state.width }),
-            onRehydrateStorage: () => (state) => state?.setWidth(state.width),
+            onRehydrateStorage: () => (state) => state?.syncWidth(),
         }
     )
 );
 
-// Clamp a width to the allowed range (the user's preference, independent of viewport).
-const clampWidth = (width: number) =>
-    Math.min(AI_CHAT_MAX_WIDTH, Math.max(AI_CHAT_MIN_WIDTH, Math.round(width)));
+/**
+ * Whether the panel is at its maximum width.
+ */
+export const useIsAIChatMaxWidth = () =>
+    useAIChatWidthStore((state) => state.width >= AI_CHAT_MAX_WIDTH);
 
-const MIN_CONTENT_WIDTH = 720;
+// Hoisted so the synchronous persist rehydrate (during create() above) can call them before this point.
+function setWidthOnViewport(width: number) {
+    if (typeof document !== 'undefined') {
+        document.documentElement.style.setProperty('--ai-chat-width', `${capToViewport(width)}px`);
+    }
+}
+
+function clampWidth(width: number) {
+    return Math.min(AI_CHAT_MAX_WIDTH, Math.max(AI_CHAT_MIN_WIDTH, Math.round(width)));
+}
 
 // Cap a width so the remaining content keeps a usable minimum at the current viewport.
-const capToViewport = (width: number) =>
-    typeof window === 'undefined'
+function capToViewport(width: number) {
+    return typeof window === 'undefined'
         ? width
         : Math.min(width, Math.max(AI_CHAT_MIN_WIDTH, window.innerWidth - MIN_CONTENT_WIDTH));
+}