Reposition AI Actions dropdown (#3460)

zenoachtig · web-flow · commit 52ab3681e3b6 · 2025-07-09T14:38:23.000Z
diff --git a/.changeset/khaki-insects-laugh.md b/.changeset/khaki-insects-laugh.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Reposition AI Actions dropdown
diff --git a/packages/gitbook/src/components/AIActions/AIActions.tsx b/packages/gitbook/src/components/AIActions/AIActions.tsx
@@ -5,6 +5,7 @@ import { useAIChatState } from '@/components/AI/useAIChat';
 import { ChatGPTIcon } from '@/components/AIActions/assets/ChatGPTIcon';
 import { ClaudeIcon } from '@/components/AIActions/assets/ClaudeIcon';
 import { MarkdownIcon } from '@/components/AIActions/assets/MarkdownIcon';
+import { getAIChatName } from '@/components/AIChat';
 import AIChatIcon from '@/components/AIChat/AIChatIcon';
 import { Button } from '@/components/primitives/Button';
 import { DropdownMenuItem } from '@/components/primitives/DropdownMenu';
@@ -21,23 +22,21 @@ type AIActionType = 'button' | 'dropdown-menu-item';
 /**
  * Opens our AI Docs Assistant.
  */
-export function OpenDocsAssistant(props: { type: AIActionType }) {
-    const { type } = props;
+export function OpenDocsAssistant(props: { type: AIActionType; trademark: boolean }) {
+    const { type, trademark } = props;
     const chatController = useAIChatController();
     const chat = useAIChatState();
     const language = useLanguage();
 
     return (
         <AIActionWrapper
             type={type}
-            icon={<AIChatIcon state={chat.loading ? 'thinking' : 'default'} />}
-            label={tString(language, 'ai_chat_ask', tString(language, 'ai_chat_assistant_name'))}
+            icon={
+                <AIChatIcon state={chat.loading ? 'thinking' : 'default'} trademark={trademark} />
+            }
+            label={tString(language, 'ai_chat_ask', getAIChatName(trademark))}
             shortLabel={tString(language, 'ask')}
-            description={tString(
-                language,
-                'ai_chat_ask_about_page',
-                tString(language, 'ai_chat_assistant_name')
-            )}
+            description={tString(language, 'ai_chat_ask_about_page', getAIChatName(trademark))}
             disabled={chat.loading}
             onClick={() => {
                 // Open the chat if it's not already open
@@ -130,6 +129,7 @@ export function CopyMarkdown(props: {
             type={type}
             icon={copied ? 'check' : 'copy'}
             label={copied ? tString(language, 'code_copied') : tString(language, 'copy_page')}
+            shortLabel={copied ? tString(language, 'code_copied') : tString(language, 'code_copy')}
             description={tString(language, 'copy_page_markdown')}
             onClick={onClick}
         />
@@ -207,7 +207,7 @@ function AIActionWrapper(props: {
         return (
             <Button
                 icon={icon}
-                size="small"
+                size="xsmall"
                 variant="secondary"
                 label={shortLabel || label}
                 className="hover:!scale-100 !shadow-none !rounded-r-none border-r-0 bg-tint-base text-sm"
diff --git a/packages/gitbook/src/components/AIActions/AIActionsDropdown.tsx b/packages/gitbook/src/components/AIActions/AIActionsDropdown.tsx
@@ -8,6 +8,7 @@ import {
 } from '@/components/AIActions/AIActions';
 import { Button } from '@/components/primitives/Button';
 import { DropdownMenu } from '@/components/primitives/DropdownMenu';
+import { Icon } from '@gitbook/icons';
 import { useRef } from 'react';
 
 /**
@@ -21,20 +22,26 @@ export function AIActionsDropdown(props: {
      */
     withAIChat?: boolean;
     pageURL: string;
+    trademark: boolean;
 }) {
     const ref = useRef<HTMLDivElement>(null);
 
     return (
-        <div ref={ref} className="hidden h-fit items-stretch justify-start sm:flex">
+        <div ref={ref} className="flex h-fit items-stretch justify-start">
             <DefaultAction {...props} />
             <DropdownMenu
                 align="end"
                 className="!min-w-60 max-w-max"
                 button={
                     <Button
-                        icon="chevron-down"
+                        icon={
+                            <Icon
+                                icon="chevron-down"
+                                className="size-3 transition-transform group-data-[state=open]/button:rotate-180"
+                            />
+                        }
                         iconOnly
-                        size="small"
+                        size="xsmall"
                         variant="secondary"
                         className="hover:!scale-100 !shadow-none !rounded-l-none bg-tint-base text-sm"
                     />
@@ -54,12 +61,15 @@ function AIActionsDropdownMenuContent(props: {
     markdownPageUrl: string;
     withAIChat?: boolean;
     pageURL: string;
+    trademark: boolean;
 }) {
-    const { markdown, markdownPageUrl, withAIChat, pageURL } = props;
+    const { markdown, markdownPageUrl, withAIChat, pageURL, trademark } = props;
 
     return (
         <>
-            {withAIChat ? <OpenDocsAssistant type="dropdown-menu-item" /> : null}
+            {withAIChat ? (
+                <OpenDocsAssistant trademark={trademark} type="dropdown-menu-item" />
+            ) : null}
             {markdown ? (
                 <>
                     <CopyMarkdown
@@ -84,11 +94,12 @@ function DefaultAction(props: {
     withAIChat?: boolean;
     pageURL: string;
     markdownPageUrl: string;
+    trademark: boolean;
 }) {
-    const { markdown, withAIChat, pageURL, markdownPageUrl } = props;
+    const { markdown, withAIChat, pageURL, markdownPageUrl, trademark } = props;
 
     if (withAIChat) {
-        return <OpenDocsAssistant type="button" />;
+        return <OpenDocsAssistant trademark={trademark} type="button" />;
     }
 
     if (markdown) {
diff --git a/packages/gitbook/src/components/AIChat/AIChat.tsx b/packages/gitbook/src/components/AIChat/AIChat.tsx
@@ -129,11 +129,7 @@ export function AIChatWindow(props: {
                         }
                     />
                     <div className="flex flex-col">
-                        <div className="font-bold">
-                            {trademark
-                                ? tString(language, 'ai_chat_assistant_name')
-                                : tString(language, 'ai_chat_assistant_name_unbranded')}
-                        </div>
+                        <div className="font-bold">{getAIChatName(trademark)}</div>
                         <div
                             className={`text-tint text-xs leading-none transition-all duration-500 ${
                                 chat.loading ? 'h-3 opacity-11' : 'h-0 opacity-0'
@@ -265,3 +261,11 @@ function AIChatError(props: { chatController: AIChatController }) {
         </div>
     );
 }
+
+export function getAIChatName(trademark: boolean) {
+    const language = useLanguage();
+
+    return trademark
+        ? tString(language, 'ai_chat_assistant_name')
+        : tString(language, 'ai_chat_assistant_name_unbranded');
+}
diff --git a/packages/gitbook/src/components/PageBody/PageHeader.tsx b/packages/gitbook/src/components/PageBody/PageHeader.tsx
@@ -38,6 +38,27 @@ export async function PageHeader(props: {
                 'page-api-block:max-w-full'
             )}
         >
+            {page.layout.tableOfContents ? (
+                <div
+                    className={tcls(
+                        'float-right mb-2 ml-4',
+                        ancestors.length > 0 ? '-mt-2' : 'xs:mt-2'
+                    )}
+                >
+                    <AIActionsDropdown
+                        markdown={markdownResult.data}
+                        markdownPageUrl={context.linker.toPathInSpace(page.path)}
+                        pageURL={context.linker.toAbsoluteURL(
+                            context.linker.toPathForPage({
+                                pages: context.revision.pages,
+                                page,
+                            })
+                        )}
+                        withAIChat={withAIChat}
+                        trademark={context.customization.trademark.enabled}
+                    />
+                </div>
+            ) : null}
             {ancestors.length > 0 && (
                 <nav>
                     <ol className={tcls('flex', 'flex-wrap', 'items-center', 'gap-2', 'text-tint')}>
@@ -84,39 +105,26 @@ export async function PageHeader(props: {
                     </ol>
                 </nav>
             )}
-            <div className="flex items-start justify-between gap-4">
-                {page.layout.title ? (
-                    <h1
-                        className={tcls(
-                            'text-4xl',
-                            'font-bold',
-                            'flex',
-                            'items-center',
-                            'gap-4',
-                            'w-fit',
-                            'text-pretty'
-                        )}
-                    >
-                        <PageIcon page={page} style={['text-tint-subtle ', 'shrink-0']} />
-                        {page.title}
-                    </h1>
-                ) : null}
-                {page.layout.tableOfContents ? (
-                    <AIActionsDropdown
-                        markdown={markdownResult.data}
-                        markdownPageUrl={context.linker.toPathInSpace(page.path)}
-                        pageURL={context.linker.toAbsoluteURL(
-                            context.linker.toPathForPage({
-                                pages: context.revision.pages,
-                                page,
-                            })
-                        )}
-                        withAIChat={withAIChat}
-                    />
-                ) : null}
-            </div>
+            {page.layout.title ? (
+                <h1
+                    className={tcls(
+                        'text-4xl',
+                        'font-bold',
+                        'flex',
+                        'items-center',
+                        'gap-4',
+                        'grow',
+                        'text-pretty',
+                        'clear-right',
+                        'xs:clear-none'
+                    )}
+                >
+                    <PageIcon page={page} style={['text-tint-subtle ', 'shrink-0']} />
+                    {page.title}
+                </h1>
+            ) : null}
             {page.description && page.layout.description ? (
-                <p className={tcls('text-lg', 'text-tint')}>{page.description}</p>
+                <p className={tcls('text-lg', 'text-tint', 'clear-both')}>{page.description}</p>
             ) : null}
         </header>
     );
diff --git a/packages/gitbook/src/components/primitives/Button.tsx b/packages/gitbook/src/components/primitives/Button.tsx
@@ -14,7 +14,7 @@ type ButtonProps = {
     variant?: 'primary' | 'secondary' | 'blank';
     icon?: IconName | React.ReactNode;
     iconOnly?: boolean;
-    size?: 'default' | 'medium' | 'small';
+    size?: 'default' | 'medium' | 'small' | 'xsmall';
     className?: ClassValue;
     label?: string | React.ReactNode;
 } & LinkInsightsProps &
@@ -67,6 +67,7 @@ export function Button({
         default: ['text-base', 'font-semibold', 'px-5', 'py-2', 'circular-corners:px-6'],
         medium: ['text-sm', 'px-3.5', 'py-1.5', 'circular-corners:px-4'],
         small: ['text-xs', 'py-2', iconOnly ? 'px-2' : 'px-3'],
+        xsmall: ['text-xs', 'py-1', iconOnly ? 'px-1.5' : 'px-2'],
     };
 
     const sizeClasses = sizes[size] || sizes.default;
diff --git a/packages/gitbook/src/components/primitives/styles.ts b/packages/gitbook/src/components/primitives/styles.ts
@@ -2,6 +2,7 @@ import type { ClassValue } from '@/lib/tailwind';
 
 export const ButtonStyles = [
     'button',
+    'group/button',
     'inline-flex',
     'items-center',
     'gap-2',
diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts
@@ -474,6 +474,7 @@ const config: Config = {
         },
         opacity: opacity(),
         screens: {
+            xs: '480px',
             sm: '640px',
             md: '768px',
             lg: '1024px',

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"gitbook": patch
 +---
++
 +Reposition AI Actions dropdown