Improve AI Actions dropdown (#3499)

Author: zenoachtig

packages/gitbook/src/components/AIActions/AIActions.tsx

@@ -232,7 +232,7 @@ function AIActionWrapper(props: {
                 size="xsmall"
                 variant="secondary"
                 label={shortLabel || label}
-                className="hover:!scale-100 !shadow-none !rounded-r-none hover:!translate-y-0 border-r-0 bg-tint-base text-sm"
+                className="bg-tint-base text-sm"
                 onClick={onClick}
                 href={href}
                 target={href ? '_blank' : undefined}

packages/gitbook/src/components/AIActions/AIActionsDropdown.tsx

@@ -6,8 +6,8 @@ import {
     OpenInLLM,
     ViewAsMarkdown,
 } from '@/components/AIActions/AIActions';
-import { Button } from '@/components/primitives/Button';
-import { DropdownMenu } from '@/components/primitives/DropdownMenu';
+import { Button, ButtonGroup } from '@/components/primitives/Button';
+import { DropdownMenu, DropdownMenuSeparator } from '@/components/primitives/DropdownMenu';
 import type { SiteCustomizationSettings } from '@gitbook/api';
 
 import { Icon } from '@gitbook/icons';
@@ -27,29 +27,31 @@ export function AIActionsDropdown(props: AIActionsDropdownProps) {
     const ref = useRef<HTMLDivElement>(null);
 
     return (
-        <div ref={ref} className="flex h-fit items-stretch justify-start">
+        <ButtonGroup ref={ref}>
             <DefaultAction {...props} />
-            <DropdownMenu
-                align="end"
-                className="!min-w-60 max-w-max"
-                button={
-                    <Button
-                        icon={
-                            <Icon
-                                icon="chevron-down"
-                                className="size-3 transition-transform group-data-[state=open]/button:rotate-180"
-                            />
-                        }
-                        iconOnly
-                        size="xsmall"
-                        variant="secondary"
-                        className="hover:!scale-100 hover:!translate-y-0 !shadow-none !rounded-l-none bg-tint-base text-sm"
-                    />
-                }
-            >
-                <AIActionsDropdownMenuContent {...props} />
-            </DropdownMenu>
-        </div>
+            {props.actions.markdown || props.actions.externalAI ? (
+                <DropdownMenu
+                    align="end"
+                    className="!min-w-60 max-w-max"
+                    button={
+                        <Button
+                            icon={
+                                <Icon
+                                    icon="chevron-down"
+                                    className="size-3 transition-transform group-data-[state=open]/button:rotate-180"
+                                />
+                            }
+                            iconOnly
+                            size="xsmall"
+                            variant="secondary"
+                            className="bg-tint-base text-sm"
+                        />
+                    }
+                >
+                    <AIActionsDropdownMenuContent {...props} />
+                </DropdownMenu>
+            ) : null}
+        </ButtonGroup>
     );
 }
 
@@ -67,6 +69,7 @@ function AIActionsDropdownMenuContent(props: AIActionsDropdownProps) {
 
             {actions.markdown ? (
                 <>
+                    <DropdownMenuSeparator className="first:hidden" />
                     <CopyMarkdown
                         isDefaultAction={!withAIChat}
                         markdownPageUrl={markdownPageUrl}
@@ -78,6 +81,7 @@ function AIActionsDropdownMenuContent(props: AIActionsDropdownProps) {
 
             {actions.externalAI ? (
                 <>
+                    <DropdownMenuSeparator className="first:hidden" />
                     <OpenInLLM provider="chatgpt" url={markdownPageUrl} type="dropdown-menu-item" />
                     <OpenInLLM provider="claude" url={markdownPageUrl} type="dropdown-menu-item" />
                 </>

packages/gitbook/src/components/primitives/Button.tsx

@@ -185,3 +185,17 @@ export const Button = React.forwardRef<
         );
     }
 );
+
+export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonProps>(({ children }, ref) => {
+    return (
+        <div
+            ref={ref}
+            className={tcls(
+                '*:!transform-none *:!shadow-none flex h-fit items-stretch justify-start',
+                '[&>*:not(:first-child)]:border-l-0 [&>*:not(:first-child,:last-child)]:rounded-none [&>*:not(:only-child):first-child]:rounded-r-none [&>*:not(:only-child):last-child]:rounded-l-none'
+            )}
+        >
+            {children}
+        </div>
+    );
+});

packages/gitbook/src/components/primitives/DropdownMenu.tsx

@@ -86,7 +86,7 @@ export function DropdownMenu(props: {
                     >
                         <div
                             className={tcls(
-                                'flex max-h-80 min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto circular-corners:rounded-xl rounded-md straight-corners:rounded-none border border-tint bg-tint-base p-2 shadow-lg sm:min-w-52 sm:max-w-80',
+                                'flex max-h-96 min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto circular-corners:rounded-xl rounded-md straight-corners:rounded-none border border-tint bg-tint-base p-2 shadow-lg sm:min-w-52 sm:max-w-80',
                                 className
                             )}
                         >
@@ -194,7 +194,7 @@ export function DropdownSubMenu(props: { children: React.ReactNode; label: React
                     collisionPadding={8}
                     className="z-40 animate-present"
                 >
-                    <div className="flex max-h-80 min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto rounded-lg straight-corners:rounded-sm bg-tint-base p-2 shadow-lg ring-1 ring-tint-subtle sm:min-w-52 sm:max-w-80">
+                    <div className="flex max-h-96 min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto rounded-lg straight-corners:rounded-sm bg-tint-base p-2 shadow-lg ring-1 ring-tint-subtle sm:min-w-52 sm:max-w-80">
                         {children}
                     </div>
                 </RadixDropdownMenu.SubContent>
@@ -203,6 +203,15 @@ export function DropdownSubMenu(props: { children: React.ReactNode; label: React
     );
 }
 
+export function DropdownMenuSeparator(props: { className?: ClassValue }) {
+    const { className } = props;
+    return (
+        <RadixDropdownMenu.Separator
+            className={tcls('my-1 h-px w-full border-tint-subtle border-t', className)}
+        />
+    );
+}
+
 /**
  * Hook to close the dropdown menu.
  */