feat: LLMs dropdown

apify-docs-theme/src/theme/DocItemContent/index.js

@@ -1,4 +1,4 @@
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
 import { useLocation } from '@docusaurus/router';
 import { ThemeClassNames } from '@docusaurus/theme-common';
 import Heading from '@theme/Heading';
@@ -6,6 +6,7 @@
 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 @@
   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>
+    );
 }

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;
+}

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>
+            )}
+        />
     );
 }