From 5455d615e4532ab137de52413b29f6831b813556 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Tue, 30 Sep 2025 16:02:29 +0200
Subject: [PATCH 01/18] feat(docs): LLMs dropdown

---
 .../src/theme/DocItemContent/index.js         |  17 +-
 .../theme/DocItemContent/styles.module.css    |   8 +
 .../src/theme/LLMButtons/CopyForLLM/index.jsx |  71 --------
 .../theme/LLMButtons/ViewAsMarkdown/index.jsx |  37 -----
 .../src/theme/LLMButtons/index.jsx            | 153 +++++++++++++++++-
 .../src/theme/LLMButtons/styles.module.css    |  73 ++++-----
 package-lock.json                             |  19 ++-
 package.json                                  |   3 +-
 8 files changed, 211 insertions(+), 170 deletions(-)
 create mode 100644 apify-docs-theme/src/theme/DocItemContent/styles.module.css
 delete mode 100644 apify-docs-theme/src/theme/LLMButtons/CopyForLLM/index.jsx
 delete mode 100644 apify-docs-theme/src/theme/LLMButtons/ViewAsMarkdown/index.jsx

diff --git a/apify-docs-theme/src/theme/DocItemContent/index.js b/apify-docs-theme/src/theme/DocItemContent/index.js
index 374e51ebe0..8639b5ecf8 100644
--- a/apify-docs-theme/src/theme/DocItemContent/index.js
+++ b/apify-docs-theme/src/theme/DocItemContent/index.js
@@ -6,6 +6,7 @@ import LLMButtons from '@theme/LLMButtons';
 import MDXContent from '@theme/MDXContent';
 import clsx from 'clsx';
 import React from 'react';
+import styles from './styles.module.css';
 
 function useSyntheticTitle() {
   const { metadata, frontMatter, contentTitle } = useDoc();
@@ -62,11 +63,13 @@ export default function DocItemContent({ children }) {
   const shouldShowLLMButtons = allowedPaths.some((path) => location.pathname.startsWith(path))
     && !disallowedPaths.some((path) => location.pathname.includes(path));
 
-  return (
-    <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
-      {syntheticTitle && <Heading as="h1">{syntheticTitle}</Heading>}
-      {shouldShowLLMButtons && <LLMButtons />}
-      <MDXContent>{children}</MDXContent>
-    </div>
-  );
+    return (
+        <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
+            <div className={styles.docItemContent}>
+                {syntheticTitle && <Heading as="h1">{syntheticTitle}</Heading>}
+                {shouldShowLLMButtons && <LLMButtons />}
+            </div>
+            <MDXContent>{children}</MDXContent>
+        </div>
+    );
 }
diff --git a/apify-docs-theme/src/theme/DocItemContent/styles.module.css b/apify-docs-theme/src/theme/DocItemContent/styles.module.css
new file mode 100644
index 0000000000..b54a07f28b
--- /dev/null
+++ b/apify-docs-theme/src/theme/DocItemContent/styles.module.css
@@ -0,0 +1,8 @@
+.docItemContent {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    column-gap: 12px;
+    flex-wrap: wrap;
+}
diff --git a/apify-docs-theme/src/theme/LLMButtons/CopyForLLM/index.jsx b/apify-docs-theme/src/theme/LLMButtons/CopyForLLM/index.jsx
deleted file mode 100644
index de68adbbbd..0000000000
--- a/apify-docs-theme/src/theme/LLMButtons/CopyForLLM/index.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useState } from 'react';
-
-import styles from '../styles.module.css';
-
-// Custom component for button text
-function ButtonText({ isLoading, isCopied }) {
-    if (isLoading) {
-        return 'Copying...';
-    }
-    if (isCopied) {
-        return 'Copied!';
-    }
-    return 'Copy for LLM';
-}
-
-export default function CopyForLLM() {
-    const [isLoading, setIsLoading] = useState(false);
-    const [isCopied, setIsCopied] = useState(false);
-
-    const handleCopy = async () => {
-        if (window.analytics) {
-            window.analytics.track('Clicked', {
-                app: 'docs',
-                button_text: 'Copy for LLM',
-                element: 'llm-buttons.copyForLLM',
-            });
-        }
-
-        try {
-            setIsLoading(true);
-
-            const currentUrl = window.location.href;
-            const markdownUrl = `${currentUrl}.md`;
-
-            // Fetch the markdown content
-            const response = await fetch(markdownUrl);
-
-            if (!response.ok) {
-                throw new Error(`Failed to fetch markdown: ${response.status}`);
-            }
-
-            const markdownContent = await response.text();
-
-            // Copy to clipboard
-            await navigator.clipboard.writeText(markdownContent);
-
-            // Show success feedback
-            setIsCopied(true);
-            setTimeout(() => setIsCopied(false), 2000);
-        } catch (error) {
-            console.error('Failed to copy markdown content:', error);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    return (
-        <button
-            className={styles.llmButton}
-            title="Copy for LLM"
-            onClick={handleCopy}
-            disabled={isLoading}
-        >
-            <span
-                className={`${styles.llmButtonIcon} ${styles.llmButtonIconBackgroundCopy}`}
-                aria-label="Copy for LLM"
-            />
-            <ButtonText isLoading={isLoading} isCopied={isCopied} />
-        </button>
-    );
-}
diff --git a/apify-docs-theme/src/theme/LLMButtons/ViewAsMarkdown/index.jsx b/apify-docs-theme/src/theme/LLMButtons/ViewAsMarkdown/index.jsx
deleted file mode 100644
index fc47cb4e4b..0000000000
--- a/apify-docs-theme/src/theme/LLMButtons/ViewAsMarkdown/index.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-import styles from '../styles.module.css';
-
-export default function ViewAsMarkdown() {
-    const handleClick = () => {
-        if (window.analytics) {
-            window.analytics.track('Clicked', {
-                app: 'docs',
-                button_text: 'View as Markdown',
-                element: 'llm-buttons.viewAsMarkdown',
-            });
-        }
-
-        try {
-            const currentUrl = window.location.href;
-            const markdownUrl = `${currentUrl}.md`;
-            window.open(markdownUrl, '_blank');
-        } catch (error) {
-            console.error('Error opening markdown file:', error);
-        }
-    };
-
-    return (
-        <button
-            className={styles.llmButton}
-            title="View as Markdown"
-            onClick={handleClick}
-        >
-            <span
-                className={`${styles.llmButtonIcon} ${styles.llmButtonIconBackgroundMarkdown}`}
-                aria-label="View as Markdown"
-            />
-            View as Markdown
-        </button>
-    );
-}
diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index 6ab85fa376..34c9e96806 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -1,15 +1,152 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import CopyForLLM from './CopyForLLM';
 import styles from './styles.module.css';
-import ViewAsMarkdown from './ViewAsMarkdown';
+import { Menu, Text, theme, PlainMenuBaseComponent } from '@apify/ui-library';
+import {
+    CopyIcon,
+    ExternalLinkIcon,
+    MarkdownIcon,
+    ChevronDownIcon,
+} from '@apify/ui-icons';
 
 export default function LLMButtons() {
+    const [isCopyingLoading, setCopyingIsLoading] = useState(false);
+    const [isCopied, setIsCopied] = useState(false);
+
+    const onCopyAsMarkdownClick = async () => {
+        if (window.analytics) {
+            window.analytics.track('Clicked', {
+                app: 'docs',
+                button_text: 'Copy for LLM',
+                element: 'llm-buttons.copyForLLM',
+            });
+        }
+
+        try {
+            setCopyingIsLoading(true);
+
+            const currentUrl = window.location.href;
+            const markdownUrl = `${currentUrl}.md`;
+
+            // Fetch the markdown content
+            const response = await fetch(markdownUrl);
+
+            if (!response.ok) {
+                throw new Error(`Failed to fetch markdown: ${response.status}`);
+            }
+
+            const markdownContent = await response.text();
+
+            // Copy to clipboard
+            await navigator.clipboard.writeText(markdownContent);
+
+            // Show success feedback
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), 2000);
+        } catch (error) {
+            console.error('Failed to copy markdown content:', error);
+        } finally {
+            setCopyingIsLoading(false);
+        }
+    };
+
+    const onViewAsMarkdownClick = () => {
+        if (window.analytics) {
+            window.analytics.track('Clicked', {
+                app: 'docs',
+                button_text: 'View as Markdown',
+                element: 'llm-buttons.viewAsMarkdown',
+            });
+        }
+
+        try {
+            const currentUrl = window.location.href;
+            const markdownUrl = `${currentUrl}.md`;
+            window.open(markdownUrl, '_blank');
+        } catch (error) {
+            console.error('Error opening markdown file:', error);
+        }
+    };
+
+    const onMenuOptionClick = (value) => {
+        switch (value) {
+            case 'copyForLLM':
+                onCopyAsMarkdownClick();
+                break;
+            case 'viewAsMarkdown':
+                onViewAsMarkdownClick();
+                break;
+            default:
+                break;
+        }
+    };
+
     return (
-        <div className={styles.llmButtonsContainer}>
-            <ViewAsMarkdown />
-            <div className={styles.llmButtonsSeparator}></div>
-            <CopyForLLM />
-        </div>
+        <Menu
+            components={{
+                MenuBase: ({ children, ref, ...props }) => {
+                    console.log(props);
+                    return (
+                        <div ref={ref} className={styles.llmButton}>
+                            <CopyIcon size={16} />
+                            <Text
+                                size="regular"
+                                className={styles.llmButtonText}
+                                onClick={onCopyAsMarkdownClick}
+                            >
+                                {isCopyingLoading
+                                    ? 'Copying...'
+                                    : isCopied
+                                    ? 'Copied!'
+                                    : 'Copy for LLM'}
+                            </Text>
+                            <ChevronDownIcon
+                                {...props}
+                                size="16"
+                                color={theme.color.neutral.icon}
+                                className={styles.chevronIcon}
+                            />
+                        </div>
+                    );
+                },
+            }}
+            onSelect={onMenuOptionClick}
+            options={[
+                {
+                    label: 'Copy page',
+                    description: 'Copy page as Markdown for LLMs',
+                    showExternalIcon: false,
+                    icon: CopyIcon,
+                    value: 'copyForLLM',
+                },
+                {
+                    label: 'View as Markdown',
+                    description: 'View this page as plain text',
+                    showExternalIcon: true,
+                    icon: MarkdownIcon,
+                    value: 'viewAsMarkdown',
+                },
+            ]}
+            renderOption={(option) => (
+                <div className={styles.menuOption}>
+                    <option.icon size={16} className={styles.menuOptionIcon} />
+                    <div className={styles.menuOptionText}>
+                        <Text size="regular">{option.label}</Text>
+                        <Text
+                            size="small"
+                            color={theme.color.neutral.textSubtle}
+                        >
+                            {option.description}
+                        </Text>
+                    </div>
+                    {option.showExternalIcon && (
+                        <ExternalLinkIcon
+                            size={16}
+                            className={styles.menuOptionExternalIcon}
+                        />
+                    )}
+                </div>
+            )}
+        />
     );
 }
diff --git a/apify-docs-theme/src/theme/LLMButtons/styles.module.css b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
index ecdf5efcb7..741355cf6c 100644
--- a/apify-docs-theme/src/theme/LLMButtons/styles.module.css
+++ b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
@@ -1,57 +1,54 @@
-.llmButtonsContainer {
-    display: flex;
+.llmButton {
+    display: inline-flex;
     align-items: center;
-    gap: 12px;
-    margin-top: -8px;
-    margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading));
-}
+    gap: 4px;
+    height: 30px;
 
-.llmButtonsSeparator {
-    width: 1px;
-    height: 16px;
-    background-color: var(--ifm-hr-background-color);
-}
+    margin-block: 8px;
 
-.llmButton {
     display: flex;
     align-items: center;
-    background-color: transparent;
-    border: none;
-    height: 16px;
-    cursor: pointer;
-    padding: 0;
     gap: 4px;
-}
+    border-radius: 8px;
+    padding-inline: 8px;
+    border: 1px solid var(--color-Neutral_SeparatorSubtle);
+    background-color: var(--color-Neutral_BackgroundMuted);
 
-.llmButtonIcon {
-    width: 16px;
-    height: 16px;
-    margin: 0 !important;
     cursor: pointer;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    display: inline-block;
-}
+    transition: background-color 0.2s ease-in-out;
 
-.llmButtonIconBackgroundMarkdown {
-    background-image: url('https://docs.apify.com/img/markdown.svg');
+    &:hover {
+        background-color: var(--color-Neutral_BackgroundMuted);
+    }
+}
 
+.llmButtonText {
+    border-right: 1px solid var(--color-Neutral_SeparatorSubtle);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding-right: 8px;
 }
 
-.llmButtonIconBackgroundCopy {
-    background-image: url('https://docs.apify.com/img/copy.svg');
+.menuOption {
+    padding-block: 4px;
+    display: flex;
+    gap: 4px;
 }
 
-/* Dark theme adjustments */
-[data-theme='dark'] .llmButtonIcon {
-    color: #e0e0e0;
+.menuOptionIcon {
+    flex-shrink: 0;
+    margin-top: 2px;
 }
 
-[data-theme='dark'] .llmButtonIconBackgroundMarkdown {
-    background-image: url('https://docs.apify.com/img/markdown-dark-theme.svg');
+.menuOptionText {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
 }
 
-[data-theme='dark'] .llmButtonIconBackgroundCopy {
-    background-image: url('https://docs.apify.com/img/copy-dark-theme.svg');
+.menuOptionExternalIcon {
+    flex-shrink: 0;
+    margin-top: 2px;
 }
diff --git a/package-lock.json b/package-lock.json
index 5f2873b342..0ec246a30e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
                 "apify-docs-theme"
             ],
             "dependencies": {
-                "@apify/ui-library": "^1.0.0",
+                "@apify/ui-icons": "^1.18.3",
+                "@apify/ui-library": "^1.97.2",
                 "@docusaurus/core": "^3.8.1",
                 "@docusaurus/faster": "^3.8.1",
                 "@docusaurus/plugin-client-redirects": "^3.8.1",
@@ -693,10 +694,11 @@
             "dev": true
         },
         "node_modules/@apify/ui-icons": {
-            "version": "1.18.2",
-            "resolved": "https://registry.npmjs.org/@apify/ui-icons/-/ui-icons-1.18.2.tgz",
-            "integrity": "sha512-JrCzf5Xj2nLFQMFsau3aEjJx4VohGEIy2HaH+DM2tCWBVqGLKyuxfrgge4/3hdayyy4bZYFZARSF4e45Tz/CxQ==",
+            "version": "1.18.3",
+            "resolved": "https://registry.npmjs.org/@apify/ui-icons/-/ui-icons-1.18.3.tgz",
+            "integrity": "sha512-A6kLj6qn2EmXECOvlCnF807JRGzDLxhAszKx5CCg7hLJPuJXZz/4NyWmKq6gfpCGJykqu2NhnsZRKXgsgDymRg==",
             "hasInstallScript": true,
+            "license": "Apache-2.0",
             "dependencies": {
                 "clsx": "^2.0.0"
             },
@@ -706,11 +708,12 @@
             }
         },
         "node_modules/@apify/ui-library": {
-            "version": "1.97.0",
-            "resolved": "https://registry.npmjs.org/@apify/ui-library/-/ui-library-1.97.0.tgz",
-            "integrity": "sha512-2+fCbLZ9Jj/BTltu0JMWhRC7jhOL50Fc7kzHbxMN84fZX9vT6wbmoPog3WLfUWnz5XHUwhbxoLIf+x6PBQJI6w==",
+            "version": "1.98.0",
+            "resolved": "https://registry.npmjs.org/@apify/ui-library/-/ui-library-1.98.0.tgz",
+            "integrity": "sha512-cxJWDA4vNuijS5/8F6z0pMJQ0X8NPkCBp5hNQnwHSSbzDlqI4aqdFcl40H2SHkS9A/GSm80Pfs8ATGFMFahndg==",
+            "license": "Apache-2.0",
             "dependencies": {
-                "@apify/ui-icons": "^1.18.2",
+                "@apify/ui-icons": "^1.18.3",
                 "@floating-ui/react": "^0.26.2",
                 "@react-hook/resize-observer": "^2.0.2",
                 "clsx": "^2.0.0",
diff --git a/package.json b/package.json
index a3fb0dcb69..321b31a02c 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,8 @@
         "typescript-eslint": "^8.38.0"
     },
     "dependencies": {
-        "@apify/ui-library": "^1.0.0",
+        "@apify/ui-library": "^1.97.2",
+        "@apify/ui-icons": "^1.18.3",
         "@docusaurus/core": "^3.8.1",
         "@docusaurus/faster": "^3.8.1",
         "@docusaurus/plugin-client-redirects": "^3.8.1",

From e02ef0198fb706304e8cb929113fd2dca9f4332a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Tue, 30 Sep 2025 16:09:38 +0200
Subject: [PATCH 02/18] fix

---
 .../src/theme/LLMButtons/index.jsx            | 47 +++++++++----------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index 34c9e96806..48b6ac739f 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -84,31 +84,28 @@ export default function LLMButtons() {
     return (
         <Menu
             components={{
-                MenuBase: ({ children, ref, ...props }) => {
-                    console.log(props);
-                    return (
-                        <div ref={ref} className={styles.llmButton}>
-                            <CopyIcon size={16} />
-                            <Text
-                                size="regular"
-                                className={styles.llmButtonText}
-                                onClick={onCopyAsMarkdownClick}
-                            >
-                                {isCopyingLoading
-                                    ? 'Copying...'
-                                    : isCopied
-                                    ? 'Copied!'
-                                    : 'Copy for LLM'}
-                            </Text>
-                            <ChevronDownIcon
-                                {...props}
-                                size="16"
-                                color={theme.color.neutral.icon}
-                                className={styles.chevronIcon}
-                            />
-                        </div>
-                    );
-                },
+                MenuBase: ({ children, ref, ...props }) => (
+                    <div ref={ref} className={styles.llmButton}>
+                        <CopyIcon size={16} />
+                        <Text
+                            size="regular"
+                            className={styles.llmButtonText}
+                            onClick={onCopyAsMarkdownClick}
+                        >
+                            {isCopyingLoading
+                                ? 'Copying...'
+                                : isCopied
+                                ? 'Copied!'
+                                : 'Copy for LLM'}
+                        </Text>
+                        <ChevronDownIcon
+                            {...props}
+                            size="16"
+                            color={theme.color.neutral.icon}
+                            className={styles.chevronIcon}
+                        />
+                    </div>
+                ),
             }}
             onSelect={onMenuOptionClick}
             options={[

From 9c3bcd0333aff9d1afe61916520149b9798fec9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Tue, 30 Sep 2025 16:18:06 +0200
Subject: [PATCH 03/18] lint fixes

---
 .../src/theme/DocItemContent/index.js         |  1 +
 .../src/theme/LLMButtons/index.jsx            | 23 ++++++++++++-------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/apify-docs-theme/src/theme/DocItemContent/index.js b/apify-docs-theme/src/theme/DocItemContent/index.js
index 8639b5ecf8..3372e7d897 100644
--- a/apify-docs-theme/src/theme/DocItemContent/index.js
+++ b/apify-docs-theme/src/theme/DocItemContent/index.js
@@ -6,6 +6,7 @@ import LLMButtons from '@theme/LLMButtons';
 import MDXContent from '@theme/MDXContent';
 import clsx from 'clsx';
 import React from 'react';
+
 import styles from './styles.module.css';
 
 function useSyntheticTitle() {
diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index 48b6ac739f..b17e4cdfd8 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -1,13 +1,24 @@
 import React, { useState } from 'react';
 
-import styles from './styles.module.css';
-import { Menu, Text, theme, PlainMenuBaseComponent } from '@apify/ui-library';
 import {
+    ChevronDownIcon,
     CopyIcon,
     ExternalLinkIcon,
     MarkdownIcon,
-    ChevronDownIcon,
 } from '@apify/ui-icons';
+import { Menu, Text, theme } from '@apify/ui-library';
+
+import styles from './styles.module.css';
+
+function ButtonText({ isLoading, isCopied }) {
+    if (isLoading) {
+        return 'Copying...';
+    }
+    if (isCopied) {
+        return 'Copied!';
+    }
+    return 'Copy for LLM';
+}
 
 export default function LLMButtons() {
     const [isCopyingLoading, setCopyingIsLoading] = useState(false);
@@ -92,11 +103,7 @@ export default function LLMButtons() {
                             className={styles.llmButtonText}
                             onClick={onCopyAsMarkdownClick}
                         >
-                            {isCopyingLoading
-                                ? 'Copying...'
-                                : isCopied
-                                ? 'Copied!'
-                                : 'Copy for LLM'}
+                            <ButtonText isLoading={isCopyingLoading} isCopied={isCopied} />
                         </Text>
                         <ChevronDownIcon
                             {...props}

From cdcc8da611767fa8f72fe91a7afeb72d5063bc4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Biro=C5=A1?= <richardbiros@icloud.com>
Date: Tue, 30 Sep 2025 17:10:02 +0200
Subject: [PATCH 04/18] feat: Add LLMs chat prompt links

---
 .../src/theme/LLMButtons/index.jsx            | 90 +++++++++++++++++--
 1 file changed, 85 insertions(+), 5 deletions(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index b17e4cdfd8..f34675957d 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -24,6 +24,10 @@ export default function LLMButtons() {
     const [isCopyingLoading, setCopyingIsLoading] = useState(false);
     const [isCopied, setIsCopied] = useState(false);
 
+    const currentUrl = window.location.href;
+    const prompt = `Read from ${currentUrl} so I can ask questions about it.`;
+    const markdownUrl = `${currentUrl}.md`;
+
     const onCopyAsMarkdownClick = async () => {
         if (window.analytics) {
             window.analytics.track('Clicked', {
@@ -36,9 +40,6 @@ export default function LLMButtons() {
         try {
             setCopyingIsLoading(true);
 
-            const currentUrl = window.location.href;
-            const markdownUrl = `${currentUrl}.md`;
-
             // Fetch the markdown content
             const response = await fetch(markdownUrl);
 
@@ -71,14 +72,60 @@ export default function LLMButtons() {
         }
 
         try {
-            const currentUrl = window.location.href;
-            const markdownUrl = `${currentUrl}.md`;
             window.open(markdownUrl, '_blank');
         } catch (error) {
             console.error('Error opening markdown file:', error);
         }
     };
 
+    const onOpenInChatGPTClick = () => {
+        if (window.analytics) {
+            window.analytics.track('Clicked', {
+                app: 'docs',
+                button_text: 'Open in ChatGPT',
+                element: 'llm-buttons.openInChatGPT',
+            });
+        }
+
+        try {
+            window.open(`https://chatgpt.com/?hints=search&q=${encodeURIComponent(prompt)}`, '_blank');
+        } catch (error) {
+            console.error('Error opening ChatGPT:', error);
+        }
+    };
+
+    const onOpenInClaudeClick = () => {
+        if (window.analytics) {
+            window.analytics.track('Clicked', {
+                app: 'docs',
+                button_text: 'Open in Claude',
+                element: 'llm-buttons.openInClaude',
+            });
+        }
+
+        try {
+            window.open(`https://claude.ai/new?q=${encodeURIComponent(prompt)}`, '_blank');
+        } catch (error) {
+            console.error('Error opening Claude:', error);
+        }
+    };
+
+    const onOpenInPerplexityClick = () => {
+        if (window.analytics) {
+            window.analytics.track('Clicked', {
+                app: 'docs',
+                button_text: 'Open in Perplexity',
+                element: 'llm-buttons.openInPerplexity',
+            });
+        }
+
+        try {
+            window.open(`https://www.perplexity.ai/search/new?q=${encodeURIComponent(prompt)}`, '_blank');
+        } catch (error) {
+            console.error('Error opening Perplexity:', error);
+        }
+    };
+
     const onMenuOptionClick = (value) => {
         switch (value) {
             case 'copyForLLM':
@@ -87,6 +134,15 @@ export default function LLMButtons() {
             case 'viewAsMarkdown':
                 onViewAsMarkdownClick();
                 break;
+            case 'openInChatGPT':
+                onOpenInChatGPTClick();
+                break;
+            case 'openInClaude':
+                onOpenInClaudeClick();
+                break;
+            case 'openInPerplexity':
+                onOpenInPerplexityClick();
+                break;
             default:
                 break;
         }
@@ -130,6 +186,30 @@ export default function LLMButtons() {
                     icon: MarkdownIcon,
                     value: 'viewAsMarkdown',
                 },
+                {
+                    label: 'Open in ChatGPT',
+                    description: 'Ask questions about this page',
+                    showExternalIcon: true,
+                    // TODO: Replace icon once we have one
+                    icon: MarkdownIcon,
+                    value: 'openInChatGPT',
+                },
+                {
+                    label: 'Open in Claude',
+                    description: 'Ask questions about this page',
+                    showExternalIcon: true,
+                    // TODO: Replace icon once we have one
+                    icon: MarkdownIcon,
+                    value: 'openInClaude',
+                },
+                {
+                    label: 'Open in Perplexity',
+                    description: 'Ask questions about this page',
+                    showExternalIcon: true,
+                    // TODO: Replace icon once we have one
+                    icon: MarkdownIcon,
+                    value: 'openInPerplexity',
+                },
             ]}
             renderOption={(option) => (
                 <div className={styles.menuOption}>

From a9f0357f8b93b248f4ecded91f52ed6cbbbee931 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Wed, 1 Oct 2025 12:07:04 +0200
Subject: [PATCH 05/18] cleaner code

---
 .../theme/DocItemContent/styles.module.css    |   4 +-
 .../src/theme/LLMButtons/index.jsx            | 390 ++++++++++--------
 .../src/theme/LLMButtons/styles.module.css    |  55 ++-
 3 files changed, 255 insertions(+), 194 deletions(-)

diff --git a/apify-docs-theme/src/theme/DocItemContent/styles.module.css b/apify-docs-theme/src/theme/DocItemContent/styles.module.css
index b54a07f28b..cb2cd3e57a 100644
--- a/apify-docs-theme/src/theme/DocItemContent/styles.module.css
+++ b/apify-docs-theme/src/theme/DocItemContent/styles.module.css
@@ -1,8 +1,6 @@
 .docItemContent {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
     align-items: center;
-    column-gap: 12px;
+    column-gap: 1.2rem;
     flex-wrap: wrap;
 }
diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index f34675957d..643090f0ad 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -10,138 +10,239 @@ import { Menu, Text, theme } from '@apify/ui-library';
 
 import styles from './styles.module.css';
 
-function ButtonText({ isLoading, isCopied }) {
-    if (isLoading) {
-        return 'Copying...';
-    }
-    if (isCopied) {
-        return 'Copied!';
+const DROPDOWN_OPTIONS = [
+    {
+        label: 'Copy page',
+        description: 'Copy page as Markdown for LLMs',
+        showExternalIcon: false,
+        Icon: CopyIcon,
+        value: 'copyForLLM',
+    },
+    {
+        label: 'View as Markdown',
+        description: 'View this page as plain text',
+        showExternalIcon: true,
+        Icon: MarkdownIcon,
+        value: 'viewAsMarkdown',
+    },
+    {
+        label: 'Open in ChatGPT',
+        description: 'Ask questions about this page',
+        showExternalIcon: true,
+        // TODO: Replace icon once we have one
+        Icon: MarkdownIcon,
+        value: 'openInChatGPT',
+    },
+    {
+        label: 'Open in Claude',
+        description: 'Ask questions about this page',
+        showExternalIcon: true,
+        // TODO: Replace icon once we have one
+        Icon: MarkdownIcon,
+        value: 'openInClaude',
+    },
+    {
+        label: 'Open in Perplexity',
+        description: 'Ask questions about this page',
+        showExternalIcon: true,
+        // TODO: Replace icon once we have one
+        Icon: MarkdownIcon,
+        value: 'openInPerplexity',
+    },
+];
+
+const onOpenInChatGPTClick = ({ prompt }) => {
+    if (window.analytics) {
+        window.analytics.track('Clicked', {
+            app: 'docs',
+            button_text: 'Open in ChatGPT',
+            element: 'llm-buttons.openInChatGPT',
+        });
     }
-    return 'Copy for LLM';
-}
 
-export default function LLMButtons() {
-    const [isCopyingLoading, setCopyingIsLoading] = useState(false);
-    const [isCopied, setIsCopied] = useState(false);
+    try {
+        window.open(
+            `https://chatgpt.com/?hints=search&q=${encodeURIComponent(prompt)}`,
+            '_blank',
+        );
+    } catch (error) {
+        console.error('Error opening ChatGPT:', error);
+    }
+};
 
-    const currentUrl = window.location.href;
-    const prompt = `Read from ${currentUrl} so I can ask questions about it.`;
-    const markdownUrl = `${currentUrl}.md`;
+const onOpenInClaudeClick = ({ prompt }) => {
+    if (window.analytics) {
+        window.analytics.track('Clicked', {
+            app: 'docs',
+            button_text: 'Open in Claude',
+            element: 'llm-buttons.openInClaude',
+        });
+    }
 
-    const onCopyAsMarkdownClick = async () => {
-        if (window.analytics) {
-            window.analytics.track('Clicked', {
-                app: 'docs',
-                button_text: 'Copy for LLM',
-                element: 'llm-buttons.copyForLLM',
-            });
-        }
+    try {
+        window.open(
+            `https://claude.ai/new?q=${encodeURIComponent(prompt)}`,
+            '_blank',
+        );
+    } catch (error) {
+        console.error('Error opening Claude:', error);
+    }
+};
 
-        try {
-            setCopyingIsLoading(true);
+const onOpenInPerplexityClick = ({ prompt }) => {
+    if (window.analytics) {
+        window.analytics.track('Clicked', {
+            app: 'docs',
+            button_text: 'Open in Perplexity',
+            element: 'llm-buttons.openInPerplexity',
+        });
+    }
 
-            // Fetch the markdown content
-            const response = await fetch(markdownUrl);
+    try {
+        window.open(
+            `https://www.perplexity.ai/search/new?q=${encodeURIComponent(
+                prompt,
+            )}`,
+            '_blank',
+        );
+    } catch (error) {
+        console.error('Error opening Perplexity:', error);
+    }
+};
 
-            if (!response.ok) {
-                throw new Error(`Failed to fetch markdown: ${response.status}`);
-            }
+const onCopyAsMarkdownClick = async ({ setCopyingStatus, markdownUrl }) => {
+    if (window.analytics) {
+        window.analytics.track('Clicked', {
+            app: 'docs',
+            button_text: 'Copy for LLM',
+            element: 'llm-buttons.copyForLLM',
+        });
+    }
 
-            const markdownContent = await response.text();
+    try {
+        setCopyingStatus('loading');
 
-            // Copy to clipboard
-            await navigator.clipboard.writeText(markdownContent);
+        // Fetch the markdown content
+        const response = await fetch(markdownUrl);
 
-            // Show success feedback
-            setIsCopied(true);
-            setTimeout(() => setIsCopied(false), 2000);
-        } catch (error) {
-            console.error('Failed to copy markdown content:', error);
-        } finally {
-            setCopyingIsLoading(false);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch markdown: ${response.status}`);
         }
-    };
 
-    const onViewAsMarkdownClick = () => {
-        if (window.analytics) {
-            window.analytics.track('Clicked', {
-                app: 'docs',
-                button_text: 'View as Markdown',
-                element: 'llm-buttons.viewAsMarkdown',
-            });
-        }
+        const markdownContent = await response.text();
 
-        try {
-            window.open(markdownUrl, '_blank');
-        } catch (error) {
-            console.error('Error opening markdown file:', error);
-        }
-    };
+        // Copy to clipboard
+        await navigator.clipboard.writeText(markdownContent);
 
-    const onOpenInChatGPTClick = () => {
-        if (window.analytics) {
-            window.analytics.track('Clicked', {
-                app: 'docs',
-                button_text: 'Open in ChatGPT',
-                element: 'llm-buttons.openInChatGPT',
-            });
-        }
+        // Show success feedback
+        setCopyingStatus('copied');
+        setTimeout(() => setCopyingStatus('idle'), 2000);
+    } catch (error) {
+        console.error('Failed to copy markdown content:', error);
+    } finally {
+        setCopyingStatus('idle');
+    }
+};
 
-        try {
-            window.open(`https://chatgpt.com/?hints=search&q=${encodeURIComponent(prompt)}`, '_blank');
-        } catch (error) {
-            console.error('Error opening ChatGPT:', error);
-        }
-    };
+const onViewAsMarkdownClick = ({ markdownUrl }) => {
+    if (window.analytics) {
+        window.analytics.track('Clicked', {
+            app: 'docs',
+            button_text: 'View as Markdown',
+            element: 'llm-buttons.viewAsMarkdown',
+        });
+    }
 
-    const onOpenInClaudeClick = () => {
-        if (window.analytics) {
-            window.analytics.track('Clicked', {
-                app: 'docs',
-                button_text: 'Open in Claude',
-                element: 'llm-buttons.openInClaude',
-            });
-        }
+    try {
+        window.open(markdownUrl, '_blank');
+    } catch (error) {
+        console.error('Error opening markdown file:', error);
+    }
+};
 
-        try {
-            window.open(`https://claude.ai/new?q=${encodeURIComponent(prompt)}`, '_blank');
-        } catch (error) {
-            console.error('Error opening Claude:', error);
-        }
-    };
+function getButtonText({ status }) {
+    switch (status) {
+        case 'loading':
+            return 'Copying...';
+        case 'copied':
+            return 'Copied!';
+        default:
+            return 'Copy for LLM';
+    }
+}
 
-    const onOpenInPerplexityClick = () => {
-        if (window.analytics) {
-            window.analytics.track('Clicked', {
-                app: 'docs',
-                button_text: 'Open in Perplexity',
-                element: 'llm-buttons.openInPerplexity',
-            });
-        }
+const MenuBase = ({
+    children,
+    ref,
+    copyingStatus,
+    setCopyingStatus,
+    markdownUrl,
+    ...props
+}) => (
+    <div ref={ref} className={styles.llmButtonWrapper}>
+        <div className={styles.llmButton}>
+            <div
+                className={styles.copyUpIconWrapper}
+                onClick={() => onCopyAsMarkdownClick({ setCopyingStatus, markdownUrl })
+                }
+            >
+                <CopyIcon size={16} />
+            </div>
+            <Text
+                size="regular"
+                onClick={() => onCopyAsMarkdownClick({ setCopyingStatus, markdownUrl })
+                }
+                className={styles.llmButtonText}
+            >
+                {getButtonText({ status: copyingStatus })}
+            </Text>
+            <div {...props} className={styles.chevronIconWrapper}>
+                <ChevronDownIcon size="16" color={theme.color.neutral.icon} />
+            </div>
+        </div>
+    </div>
+);
 
-        try {
-            window.open(`https://www.perplexity.ai/search/new?q=${encodeURIComponent(prompt)}`, '_blank');
-        } catch (error) {
-            console.error('Error opening Perplexity:', error);
-        }
-    };
+const Option = ({ Icon, label, description, showExternalIcon }) => (
+    <div className={styles.menuOption}>
+        <Icon size={16} className={styles.menuOptionIcon} />
+        <div className={styles.menuOptionText}>
+            <Text size="regular">{label}</Text>
+            <Text size="small" color={theme.color.neutral.textSubtle}>
+                {description}
+            </Text>
+        </div>
+        {showExternalIcon && (
+            <ExternalLinkIcon
+                size={16}
+                className={styles.menuOptionExternalIcon}
+            />
+        )}
+    </div>
+);
 
+export default function LLMButtons() {
+    const [copyingStatus, setCopyingStatus] = useState('idle');
+
+    const currentUrl = window.location.href;
+    const prompt = `Read from ${currentUrl} so I can ask questions about it.`;
+    const markdownUrl = `${currentUrl}.md`;
     const onMenuOptionClick = (value) => {
         switch (value) {
             case 'copyForLLM':
-                onCopyAsMarkdownClick();
+                onCopyAsMarkdownClick({ setCopyingStatus, markdownUrl });
                 break;
             case 'viewAsMarkdown':
-                onViewAsMarkdownClick();
+                onViewAsMarkdownClick({ markdownUrl });
                 break;
             case 'openInChatGPT':
-                onOpenInChatGPTClick();
+                onOpenInChatGPTClick({ prompt });
                 break;
             case 'openInClaude':
-                onOpenInClaudeClick();
+                onOpenInClaudeClick({ prompt });
                 break;
             case 'openInPerplexity':
-                onOpenInPerplexityClick();
+                onOpenInPerplexityClick({ prompt });
                 break;
             default:
                 break;
@@ -150,87 +251,20 @@ export default function LLMButtons() {
 
     return (
         <Menu
+            className={styles.llmMenu}
             components={{
-                MenuBase: ({ children, ref, ...props }) => (
-                    <div ref={ref} className={styles.llmButton}>
-                        <CopyIcon size={16} />
-                        <Text
-                            size="regular"
-                            className={styles.llmButtonText}
-                            onClick={onCopyAsMarkdownClick}
-                        >
-                            <ButtonText isLoading={isCopyingLoading} isCopied={isCopied} />
-                        </Text>
-                        <ChevronDownIcon
-                            {...props}
-                            size="16"
-                            color={theme.color.neutral.icon}
-                            className={styles.chevronIcon}
-                        />
-                    </div>
+                MenuBase: (props) => (
+                    <MenuBase
+                        copyingStatus={copyingStatus}
+                        setCopyingStatus={setCopyingStatus}
+                        markdownUrl={markdownUrl}
+                        {...props}
+                    />
                 ),
             }}
             onSelect={onMenuOptionClick}
-            options={[
-                {
-                    label: 'Copy page',
-                    description: 'Copy page as Markdown for LLMs',
-                    showExternalIcon: false,
-                    icon: CopyIcon,
-                    value: 'copyForLLM',
-                },
-                {
-                    label: 'View as Markdown',
-                    description: 'View this page as plain text',
-                    showExternalIcon: true,
-                    icon: MarkdownIcon,
-                    value: 'viewAsMarkdown',
-                },
-                {
-                    label: 'Open in ChatGPT',
-                    description: 'Ask questions about this page',
-                    showExternalIcon: true,
-                    // TODO: Replace icon once we have one
-                    icon: MarkdownIcon,
-                    value: 'openInChatGPT',
-                },
-                {
-                    label: 'Open in Claude',
-                    description: 'Ask questions about this page',
-                    showExternalIcon: true,
-                    // TODO: Replace icon once we have one
-                    icon: MarkdownIcon,
-                    value: 'openInClaude',
-                },
-                {
-                    label: 'Open in Perplexity',
-                    description: 'Ask questions about this page',
-                    showExternalIcon: true,
-                    // TODO: Replace icon once we have one
-                    icon: MarkdownIcon,
-                    value: 'openInPerplexity',
-                },
-            ]}
-            renderOption={(option) => (
-                <div className={styles.menuOption}>
-                    <option.icon size={16} className={styles.menuOptionIcon} />
-                    <div className={styles.menuOptionText}>
-                        <Text size="regular">{option.label}</Text>
-                        <Text
-                            size="small"
-                            color={theme.color.neutral.textSubtle}
-                        >
-                            {option.description}
-                        </Text>
-                    </div>
-                    {option.showExternalIcon && (
-                        <ExternalLinkIcon
-                            size={16}
-                            className={styles.menuOptionExternalIcon}
-                        />
-                    )}
-                </div>
-            )}
+            options={DROPDOWN_OPTIONS}
+            renderOption={(props) => <Option {...props} />}
         />
     );
 }
diff --git a/apify-docs-theme/src/theme/LLMButtons/styles.module.css b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
index 741355cf6c..e90ec1378f 100644
--- a/apify-docs-theme/src/theme/LLMButtons/styles.module.css
+++ b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
@@ -1,16 +1,28 @@
+:global .menu-list[data-floating-ui-focusable] {
+    gap: 4px;
+}
+
+.llmMenu {
+    margin-bottom: 1.2rem;
+    margin-left: auto;
+}
+
+.llmButtonWrapper {
+    /* hack to make the dropdown menu align to the right */
+    width: 23.8rem;
+    display: flex;
+    justify-content: flex-end;
+}
+
 .llmButton {
+    width: fit-content;
     display: inline-flex;
     align-items: center;
-    gap: 4px;
-    height: 30px;
-
-    margin-block: 8px;
+    height: 3rem;
 
     display: flex;
     align-items: center;
-    gap: 4px;
     border-radius: 8px;
-    padding-inline: 8px;
     border: 1px solid var(--color-Neutral_SeparatorSubtle);
     background-color: var(--color-Neutral_BackgroundMuted);
 
@@ -22,33 +34,50 @@
     }
 }
 
+.copyUpIconWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 0.8rem;
+    padding-right: 0.4rem;
+    height: 100%;
+}
+
 .llmButtonText {
-    border-right: 1px solid var(--color-Neutral_SeparatorSubtle);
     height: 100%;
     display: flex;
     align-items: center;
-    padding-right: 8px;
+    padding-right: 0.8rem;
+}
+
+.chevronIconWrapper {
+    border-left: 1px solid var(--color-Neutral_SeparatorSubtle);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: 0.8rem;
+    height: 100%;
 }
 
 .menuOption {
-    padding-block: 4px;
+    padding-block: 0.4rem;
     display: flex;
-    gap: 4px;
+    gap: 0.4rem;
 }
 
 .menuOptionIcon {
     flex-shrink: 0;
-    margin-top: 2px;
+    margin-top: 0.2rem;
 }
 
 .menuOptionText {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 0.2rem;
 }
 
 .menuOptionExternalIcon {
     flex-shrink: 0;
-    margin-top: 2px;
+    margin-top: 0.2rem;
 }

From bbf2341795e6ab41fac02962366f4e8dcae90a95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Wed, 1 Oct 2025 13:12:07 +0200
Subject: [PATCH 06/18] Fix SSG compatibility

---
 .../src/theme/LLMButtons/index.jsx            | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index 643090f0ad..8f81ef6ecb 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import {
     ChevronDownIcon,
@@ -51,7 +51,10 @@ const DROPDOWN_OPTIONS = [
     },
 ];
 
-const onOpenInChatGPTClick = ({ prompt }) => {
+const getPrompt = (currentUrl) => `Read from ${currentUrl} so I can ask questions about it.`;
+const getMarkdownUrl = (currentUrl) => `${currentUrl}.md`;
+
+const onOpenInChatGPTClick = () => {
     if (window.analytics) {
         window.analytics.track('Clicked', {
             app: 'docs',
@@ -60,6 +63,8 @@ const onOpenInChatGPTClick = ({ prompt }) => {
         });
     }
 
+    const prompt = getPrompt(window.location.href);
+
     try {
         window.open(
             `https://chatgpt.com/?hints=search&q=${encodeURIComponent(prompt)}`,
@@ -70,7 +75,7 @@ const onOpenInChatGPTClick = ({ prompt }) => {
     }
 };
 
-const onOpenInClaudeClick = ({ prompt }) => {
+const onOpenInClaudeClick = () => {
     if (window.analytics) {
         window.analytics.track('Clicked', {
             app: 'docs',
@@ -79,6 +84,8 @@ const onOpenInClaudeClick = ({ prompt }) => {
         });
     }
 
+    const prompt = getPrompt(window.location.href);
+
     try {
         window.open(
             `https://claude.ai/new?q=${encodeURIComponent(prompt)}`,
@@ -89,7 +96,7 @@ const onOpenInClaudeClick = ({ prompt }) => {
     }
 };
 
-const onOpenInPerplexityClick = ({ prompt }) => {
+const onOpenInPerplexityClick = () => {
     if (window.analytics) {
         window.analytics.track('Clicked', {
             app: 'docs',
@@ -98,6 +105,8 @@ const onOpenInPerplexityClick = ({ prompt }) => {
         });
     }
 
+    const prompt = getPrompt(window.location.href);
+
     try {
         window.open(
             `https://www.perplexity.ai/search/new?q=${encodeURIComponent(
@@ -110,7 +119,7 @@ const onOpenInPerplexityClick = ({ prompt }) => {
     }
 };
 
-const onCopyAsMarkdownClick = async ({ setCopyingStatus, markdownUrl }) => {
+const onCopyAsMarkdownClick = async ({ setCopyingStatus }) => {
     if (window.analytics) {
         window.analytics.track('Clicked', {
             app: 'docs',
@@ -119,6 +128,8 @@ const onCopyAsMarkdownClick = async ({ setCopyingStatus, markdownUrl }) => {
         });
     }
 
+    const markdownUrl = getMarkdownUrl(window.location.href);
+
     try {
         setCopyingStatus('loading');
 
@@ -144,7 +155,7 @@ const onCopyAsMarkdownClick = async ({ setCopyingStatus, markdownUrl }) => {
     }
 };
 
-const onViewAsMarkdownClick = ({ markdownUrl }) => {
+const onViewAsMarkdownClick = () => {
     if (window.analytics) {
         window.analytics.track('Clicked', {
             app: 'docs',
@@ -153,6 +164,8 @@ const onViewAsMarkdownClick = ({ markdownUrl }) => {
         });
     }
 
+    const markdownUrl = getMarkdownUrl(window.location.href);
+
     try {
         window.open(markdownUrl, '_blank');
     } catch (error) {
@@ -176,21 +189,20 @@ const MenuBase = ({
     ref,
     copyingStatus,
     setCopyingStatus,
-    markdownUrl,
     ...props
 }) => (
     <div ref={ref} className={styles.llmButtonWrapper}>
         <div className={styles.llmButton}>
             <div
                 className={styles.copyUpIconWrapper}
-                onClick={() => onCopyAsMarkdownClick({ setCopyingStatus, markdownUrl })
+                onClick={() => onCopyAsMarkdownClick({ setCopyingStatus })
                 }
             >
                 <CopyIcon size={16} />
             </div>
             <Text
                 size="regular"
-                onClick={() => onCopyAsMarkdownClick({ setCopyingStatus, markdownUrl })
+                onClick={() => onCopyAsMarkdownClick({ setCopyingStatus })
                 }
                 className={styles.llmButtonText}
             >
@@ -224,30 +236,27 @@ const Option = ({ Icon, label, description, showExternalIcon }) => (
 export default function LLMButtons() {
     const [copyingStatus, setCopyingStatus] = useState('idle');
 
-    const currentUrl = window.location.href;
-    const prompt = `Read from ${currentUrl} so I can ask questions about it.`;
-    const markdownUrl = `${currentUrl}.md`;
-    const onMenuOptionClick = (value) => {
+    const onMenuOptionClick = useCallback((value) => {
         switch (value) {
             case 'copyForLLM':
-                onCopyAsMarkdownClick({ setCopyingStatus, markdownUrl });
+                onCopyAsMarkdownClick({ setCopyingStatus });
                 break;
             case 'viewAsMarkdown':
-                onViewAsMarkdownClick({ markdownUrl });
+                onViewAsMarkdownClick();
                 break;
             case 'openInChatGPT':
-                onOpenInChatGPTClick({ prompt });
+                onOpenInChatGPTClick();
                 break;
             case 'openInClaude':
-                onOpenInClaudeClick({ prompt });
+                onOpenInClaudeClick();
                 break;
             case 'openInPerplexity':
-                onOpenInPerplexityClick({ prompt });
+                onOpenInPerplexityClick();
                 break;
             default:
                 break;
         }
-    };
+    }, []);
 
     return (
         <Menu
@@ -257,7 +266,6 @@ export default function LLMButtons() {
                     <MenuBase
                         copyingStatus={copyingStatus}
                         setCopyingStatus={setCopyingStatus}
-                        markdownUrl={markdownUrl}
                         {...props}
                     />
                 ),

From 03c3a91d03c3a361119145962856f69712929c82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Wed, 1 Oct 2025 13:12:38 +0200
Subject: [PATCH 07/18] fix

---
 apify-docs-theme/src/theme/LLMButtons/index.jsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index 8f81ef6ecb..4701347a17 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -195,15 +195,13 @@ const MenuBase = ({
         <div className={styles.llmButton}>
             <div
                 className={styles.copyUpIconWrapper}
-                onClick={() => onCopyAsMarkdownClick({ setCopyingStatus })
-                }
+                onClick={() => onCopyAsMarkdownClick({ setCopyingStatus })}
             >
                 <CopyIcon size={16} />
             </div>
             <Text
                 size="regular"
-                onClick={() => onCopyAsMarkdownClick({ setCopyingStatus })
-                }
+                onClick={() => onCopyAsMarkdownClick({ setCopyingStatus })}
                 className={styles.llmButtonText}
             >
                 {getButtonText({ status: copyingStatus })}
@@ -272,7 +270,7 @@ export default function LLMButtons() {
             }}
             onSelect={onMenuOptionClick}
             options={DROPDOWN_OPTIONS}
-            renderOption={(props) => <Option {...props} />}
+            renderOption={Option}
         />
     );
 }

From 2f13047769a646dae2e8f7ce9462f2741c0fea9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Wed, 1 Oct 2025 13:14:37 +0200
Subject: [PATCH 08/18] fix

---
 apify-docs-theme/src/theme/LLMButtons/styles.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/styles.module.css b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
index e90ec1378f..0610622a10 100644
--- a/apify-docs-theme/src/theme/LLMButtons/styles.module.css
+++ b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
@@ -1,5 +1,5 @@
 :global .menu-list[data-floating-ui-focusable] {
-    gap: 4px;
+    gap: 0.4rem;
 }
 
 .llmMenu {

From 2ce622e0a7a5ae4a20c4090b0f26b423066a2369 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Wed, 1 Oct 2025 13:45:40 +0200
Subject: [PATCH 09/18] Rotate chevron icon on dropdown open

---
 apify-docs-theme/src/theme/LLMButtons/index.jsx  | 16 +++++++++++++++-
 .../src/theme/LLMButtons/styles.module.css       |  8 ++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index 4701347a17..1f35bb6845 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 
 import {
@@ -189,6 +190,7 @@ const MenuBase = ({
     ref,
     copyingStatus,
     setCopyingStatus,
+    chevronIconRef,
     ...props
 }) => (
     <div ref={ref} className={styles.llmButtonWrapper}>
@@ -207,7 +209,12 @@ const MenuBase = ({
                 {getButtonText({ status: copyingStatus })}
             </Text>
             <div {...props} className={styles.chevronIconWrapper}>
-                <ChevronDownIcon size="16" color={theme.color.neutral.icon} />
+                <ChevronDownIcon
+                    size="16"
+                    color={theme.color.neutral.icon}
+                    className={styles.chevronIcon}
+                    ref={chevronIconRef}
+                />
             </div>
         </div>
     </div>
@@ -233,6 +240,7 @@ const Option = ({ Icon, label, description, showExternalIcon }) => (
 
 export default function LLMButtons() {
     const [copyingStatus, setCopyingStatus] = useState('idle');
+    const chevronIconRef = React.useRef(null);
 
     const onMenuOptionClick = useCallback((value) => {
         switch (value) {
@@ -259,11 +267,17 @@ export default function LLMButtons() {
     return (
         <Menu
             className={styles.llmMenu}
+            onMenuOpen={(isOpen) => chevronIconRef.current?.classList.toggle(
+                    styles.chevronIconOpen,
+                    isOpen,
+                )
+            }
             components={{
                 MenuBase: (props) => (
                     <MenuBase
                         copyingStatus={copyingStatus}
                         setCopyingStatus={setCopyingStatus}
+                        chevronIconRef={chevronIconRef}
                         {...props}
                     />
                 ),
diff --git a/apify-docs-theme/src/theme/LLMButtons/styles.module.css b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
index 0610622a10..10ce32835d 100644
--- a/apify-docs-theme/src/theme/LLMButtons/styles.module.css
+++ b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
@@ -59,6 +59,14 @@
     height: 100%;
 }
 
+.chevronIcon {
+    transition: transform 0.2s ease-in-out;
+}
+
+.chevronIconOpen {
+    transform: rotate(180deg);
+}
+
 .menuOption {
     padding-block: 0.4rem;
     display: flex;

From 8e3f17c3372900af7cd79f6065101b6d92b2fccd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Wed, 1 Oct 2025 13:48:33 +0200
Subject: [PATCH 10/18] fix lint

---
 apify-docs-theme/src/theme/LLMButtons/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index 1f35bb6845..8c56df124d 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 
 import {

From 7924c507fa809f5428b6878b4d9146448675d280 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Wed, 1 Oct 2025 14:03:30 +0200
Subject: [PATCH 11/18] fix

---
 apify-docs-theme/src/theme/LLMButtons/styles.module.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apify-docs-theme/src/theme/LLMButtons/styles.module.css b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
index 10ce32835d..a78dfa5940 100644
--- a/apify-docs-theme/src/theme/LLMButtons/styles.module.css
+++ b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
@@ -48,6 +48,12 @@
     display: flex;
     align-items: center;
     padding-right: 0.8rem;
+
+    /* prevents font size glitch when loading the page */
+    margin: 0px;
+    font-size: 1.4rem;
+    font-weight: 400;
+    font-family: Inter, sans-serif;
 }
 
 .chevronIconWrapper {

From cfc4ba7279c3897c3358863b847ffa933078bac4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Wed, 1 Oct 2025 15:29:05 +0200
Subject: [PATCH 12/18] Updated icons

---
 apify-docs-theme/src/theme/LLMButtons/index.jsx      | 12 ++++++------
 .../src/theme/LLMButtons/styles.module.css           |  5 +++--
 package-lock.json                                    |  8 ++++----
 package.json                                         |  2 +-
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index 8c56df124d..a033ccf77d 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -1,10 +1,13 @@
 import React, { useCallback, useState } from 'react';
 
 import {
+    AnthropicIcon,
+    ChatGptIcon,
     ChevronDownIcon,
     CopyIcon,
     ExternalLinkIcon,
     MarkdownIcon,
+    PerplexityIcon,
 } from '@apify/ui-icons';
 import { Menu, Text, theme } from '@apify/ui-library';
 
@@ -29,24 +32,21 @@ const DROPDOWN_OPTIONS = [
         label: 'Open in ChatGPT',
         description: 'Ask questions about this page',
         showExternalIcon: true,
-        // TODO: Replace icon once we have one
-        Icon: MarkdownIcon,
+        Icon: ChatGptIcon,
         value: 'openInChatGPT',
     },
     {
         label: 'Open in Claude',
         description: 'Ask questions about this page',
         showExternalIcon: true,
-        // TODO: Replace icon once we have one
-        Icon: MarkdownIcon,
+        Icon: AnthropicIcon,
         value: 'openInClaude',
     },
     {
         label: 'Open in Perplexity',
         description: 'Ask questions about this page',
         showExternalIcon: true,
-        // TODO: Replace icon once we have one
-        Icon: MarkdownIcon,
+        Icon: PerplexityIcon,
         value: 'openInPerplexity',
     },
 ];
diff --git a/apify-docs-theme/src/theme/LLMButtons/styles.module.css b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
index a78dfa5940..3f55a7bb63 100644
--- a/apify-docs-theme/src/theme/LLMButtons/styles.module.css
+++ b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
@@ -1,5 +1,6 @@
 :global .menu-list[data-floating-ui-focusable] {
     gap: 0.4rem;
+    padding: 0.6rem;
 }
 
 .llmMenu {
@@ -9,7 +10,7 @@
 
 .llmButtonWrapper {
     /* hack to make the dropdown menu align to the right */
-    width: 23.8rem;
+    width: 23.3rem;
     display: flex;
     justify-content: flex-end;
 }
@@ -81,7 +82,7 @@
 
 .menuOptionIcon {
     flex-shrink: 0;
-    margin-top: 0.2rem;
+    margin-top: 0.4rem;
 }
 
 .menuOptionText {
diff --git a/package-lock.json b/package-lock.json
index 0ec246a30e..fc9fee531c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
                 "apify-docs-theme"
             ],
             "dependencies": {
-                "@apify/ui-icons": "^1.18.3",
+                "@apify/ui-icons": "^1.19.0",
                 "@apify/ui-library": "^1.97.2",
                 "@docusaurus/core": "^3.8.1",
                 "@docusaurus/faster": "^3.8.1",
@@ -694,9 +694,9 @@
             "dev": true
         },
         "node_modules/@apify/ui-icons": {
-            "version": "1.18.3",
-            "resolved": "https://registry.npmjs.org/@apify/ui-icons/-/ui-icons-1.18.3.tgz",
-            "integrity": "sha512-A6kLj6qn2EmXECOvlCnF807JRGzDLxhAszKx5CCg7hLJPuJXZz/4NyWmKq6gfpCGJykqu2NhnsZRKXgsgDymRg==",
+            "version": "1.19.0",
+            "resolved": "https://registry.npmjs.org/@apify/ui-icons/-/ui-icons-1.19.0.tgz",
+            "integrity": "sha512-oKzVVnGdRH+A3lWLUs0W7p5e0l/1Exu8XR/po+XtV7XAHkEWPjp6Qgz4oD3yUzs7/3jcYBVHsXDosHBkc5U8rw==",
             "hasInstallScript": true,
             "license": "Apache-2.0",
             "dependencies": {
diff --git a/package.json b/package.json
index 321b31a02c..35d15535f8 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
     },
     "dependencies": {
         "@apify/ui-library": "^1.97.2",
-        "@apify/ui-icons": "^1.18.3",
+        "@apify/ui-icons": "^1.19.0",
         "@docusaurus/core": "^3.8.1",
         "@docusaurus/faster": "^3.8.1",
         "@docusaurus/plugin-client-redirects": "^3.8.1",

From c7b22b4dcfa8035e630b5964b952b4dc43bc535f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Wed, 1 Oct 2025 15:35:14 +0200
Subject: [PATCH 13/18] copied icon

---
 apify-docs-theme/src/theme/LLMButtons/index.jsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index a033ccf77d..513b1d25e8 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -3,9 +3,11 @@ import React, { useCallback, useState } from 'react';
 import {
     AnthropicIcon,
     ChatGptIcon,
+    CheckIcon,
     ChevronDownIcon,
     CopyIcon,
     ExternalLinkIcon,
+    LoaderIcon,
     MarkdownIcon,
     PerplexityIcon,
 } from '@apify/ui-icons';
@@ -147,11 +149,10 @@ const onCopyAsMarkdownClick = async ({ setCopyingStatus }) => {
 
         // Show success feedback
         setCopyingStatus('copied');
-        setTimeout(() => setCopyingStatus('idle'), 2000);
     } catch (error) {
         console.error('Failed to copy markdown content:', error);
     } finally {
-        setCopyingStatus('idle');
+        setTimeout(() => setCopyingStatus('idle'), 2000);
     }
 };
 
@@ -198,7 +199,9 @@ const MenuBase = ({
                 className={styles.copyUpIconWrapper}
                 onClick={() => onCopyAsMarkdownClick({ setCopyingStatus })}
             >
-                <CopyIcon size={16} />
+                {copyingStatus === 'loading' && <LoaderIcon size={16} />}
+                {copyingStatus === 'copied' && <CheckIcon size={16} />}
+                {copyingStatus === 'idle' && <CopyIcon size={16} />}
             </div>
             <Text
                 size="regular"

From 3b3ca36a0aba6ad7a4b32330c8fee0c9dc9d643f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Wed, 1 Oct 2025 15:38:07 +0200
Subject: [PATCH 14/18] add min-width

---
 apify-docs-theme/src/theme/LLMButtons/index.jsx         | 2 +-
 apify-docs-theme/src/theme/LLMButtons/styles.module.css | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index 513b1d25e8..e507727755 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -179,7 +179,7 @@ function getButtonText({ status }) {
         case 'loading':
             return 'Copying...';
         case 'copied':
-            return 'Copied!';
+            return 'Copied';
         default:
             return 'Copy for LLM';
     }
diff --git a/apify-docs-theme/src/theme/LLMButtons/styles.module.css b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
index 3f55a7bb63..7d5f7badc8 100644
--- a/apify-docs-theme/src/theme/LLMButtons/styles.module.css
+++ b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
@@ -49,6 +49,7 @@
     display: flex;
     align-items: center;
     padding-right: 0.8rem;
+    min-width: 9.3rem;
 
     /* prevents font size glitch when loading the page */
     margin: 0px;

From 5b1acf8f13adec2a47e024baf2bccba74e63b6b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Ba=CC=81rta?= <jbarta.edu@gmail.com>
Date: Wed, 1 Oct 2025 16:01:41 +0200
Subject: [PATCH 15/18] fix: renamed "Copy page" in dropdown options to "Copy
 for LLM" to have it aligned

---
 apify-docs-theme/src/theme/LLMButtons/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index e507727755..8a443b83b9 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -17,7 +17,7 @@ import styles from './styles.module.css';
 
 const DROPDOWN_OPTIONS = [
     {
-        label: 'Copy page',
+        label: 'Copy for LLM',
         description: 'Copy page as Markdown for LLMs',
         showExternalIcon: false,
         Icon: CopyIcon,

From fbac4e80f59788241ace6e3249d4fbfcbff5e47e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Thu, 2 Oct 2025 09:25:57 +0200
Subject: [PATCH 16/18] mobile dropdown alignment

---
 .../src/theme/DocItemContent/styles.module.css     | 13 ++++++++++++-
 .../src/theme/LLMButtons/styles.module.css         | 14 ++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/apify-docs-theme/src/theme/DocItemContent/styles.module.css b/apify-docs-theme/src/theme/DocItemContent/styles.module.css
index cb2cd3e57a..07b8c9a105 100644
--- a/apify-docs-theme/src/theme/DocItemContent/styles.module.css
+++ b/apify-docs-theme/src/theme/DocItemContent/styles.module.css
@@ -1,6 +1,17 @@
 .docItemContent {
     display: flex;
     align-items: center;
-    column-gap: 1.2rem;
     flex-wrap: wrap;
+    /* move the h1 margin to padding */
+    h1 {
+        margin-bottom: 0 !important;
+    }
+    padding-bottom: calc(
+        var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading)
+    );
+
+    @media (max-width: 767px) {
+        flex-direction: column;
+        align-items: flex-start;
+    }
 }
diff --git a/apify-docs-theme/src/theme/LLMButtons/styles.module.css b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
index 7d5f7badc8..aac9778f76 100644
--- a/apify-docs-theme/src/theme/LLMButtons/styles.module.css
+++ b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
@@ -4,15 +4,21 @@
 }
 
 .llmMenu {
-    margin-bottom: 1.2rem;
-    margin-left: auto;
+    margin-top: 1.2rem;
+
+    @media (min-width: 768px) {
+        margin-left: auto;
+    }
 }
 
 .llmButtonWrapper {
-    /* hack to make the dropdown menu align to the right */
-    width: 23.3rem;
     display: flex;
     justify-content: flex-end;
+
+    @media (min-width: 768px) {
+        /* hack to make the dropdown menu align to the right */
+        width: 23.3rem;
+    }
 }
 
 .llmButton {

From 14fc012be10b2acc1fce451e54e4e7ea7cfcc90a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Fri, 3 Oct 2025 08:53:04 +0200
Subject: [PATCH 17/18] fix

---
 apify-docs-theme/src/theme/DocItemContent/index.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apify-docs-theme/src/theme/DocItemContent/index.js b/apify-docs-theme/src/theme/DocItemContent/index.js
index 3372e7d897..21d5b2945f 100644
--- a/apify-docs-theme/src/theme/DocItemContent/index.js
+++ b/apify-docs-theme/src/theme/DocItemContent/index.js
@@ -66,10 +66,12 @@ export default function DocItemContent({ children }) {
 
     return (
         <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
-            <div className={styles.docItemContent}>
-                {syntheticTitle && <Heading as="h1">{syntheticTitle}</Heading>}
-                {shouldShowLLMButtons && <LLMButtons />}
-            </div>
+            {(syntheticTitle || shouldShowLLMButtons) && (
+                <div className={styles.docItemContent}>
+                    {syntheticTitle && <Heading as="h1">{syntheticTitle}</Heading>}
+                    {shouldShowLLMButtons && <LLMButtons />}
+                </div>
+            )}
             <MDXContent>{children}</MDXContent>
         </div>
     );

From 2c4180b9db47c8d00e757715a3636e3c60320545 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20W=C3=A9br?= <webrdaniel@gmail.com>
Date: Fri, 3 Oct 2025 09:28:34 +0200
Subject: [PATCH 18/18] Fix design on API reference page

---
 apify-docs-theme/src/theme/LLMButtons/index.jsx        |  7 +++++--
 .../src/theme/LLMButtons/styles.module.css             | 10 ++++++++++
 docusaurus.config.js                                   |  4 ++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apify-docs-theme/src/theme/LLMButtons/index.jsx b/apify-docs-theme/src/theme/LLMButtons/index.jsx
index 8a443b83b9..4e0aa64398 100644
--- a/apify-docs-theme/src/theme/LLMButtons/index.jsx
+++ b/apify-docs-theme/src/theme/LLMButtons/index.jsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 
 import {
@@ -240,7 +241,7 @@ const Option = ({ Icon, label, description, showExternalIcon }) => (
     </div>
 );
 
-export default function LLMButtons() {
+export default function LLMButtons({ isApiReferencePage = false }) {
     const [copyingStatus, setCopyingStatus] = useState('idle');
     const chevronIconRef = React.useRef(null);
 
@@ -268,7 +269,9 @@ export default function LLMButtons() {
 
     return (
         <Menu
-            className={styles.llmMenu}
+            className={clsx(styles.llmMenu, {
+                [styles.llmMenuApiReferencePage]: isApiReferencePage,
+            })}
             onMenuOpen={(isOpen) => chevronIconRef.current?.classList.toggle(
                     styles.chevronIconOpen,
                     isOpen,
diff --git a/apify-docs-theme/src/theme/LLMButtons/styles.module.css b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
index aac9778f76..44ead9e774 100644
--- a/apify-docs-theme/src/theme/LLMButtons/styles.module.css
+++ b/apify-docs-theme/src/theme/LLMButtons/styles.module.css
@@ -5,6 +5,7 @@
 
 .llmMenu {
     margin-top: 1.2rem;
+    width: fit-content;
 
     @media (min-width: 768px) {
         margin-left: auto;
@@ -21,6 +22,15 @@
     }
 }
 
+.llmMenuApiReferencePage {
+    margin-top: -0.8rem;
+    margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading));
+    margin-left: 0 !important;
+    .llmButtonWrapper {
+        width: fit-content !important;
+    }
+}
+
 .llmButton {
     width: fit-content;
     display: inline-flex;
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 3629fec129..323140d10b 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -200,7 +200,7 @@ module.exports = {
                                 // Find the first Heading h1 and add LLMButtons after it
                                 // eslint-disable-next-line max-len
                                 const headingRegex = /(<Heading[^>]*as=\{"h1"\}[^>]*className=\{"openapi__heading"\}[^>]*children=\{[^}]*\}[^>]*>\s*<\/Heading>)/;
-                                md = md.replace(headingRegex, '$1\n\n<LLMButtons />\n');
+                                md = md.replace(headingRegex, '$1\n\n<LLMButtons isApiReferencePage />\n');
 
                                 return md;
                             },
@@ -210,7 +210,7 @@ module.exports = {
                                 // Find the first Heading h1 and add LLMButtons after it
                                 // eslint-disable-next-line max-len
                                 const headingRegex = /(<Heading[^>]*as=\{"h1"\}[^>]*className=\{"openapi__heading"\}[^>]*children=\{[^}]*\}[^>]*>\s*<\/Heading>)/;
-                                md = md.replace(headingRegex, '$1\n\n<LLMButtons />\n');
+                                md = md.replace(headingRegex, '$1\n\n<LLMButtons isApiReferencePage />\n');
 
                                 return md;
                             },