Function MarkdownMenu

packages/dev/s2-docs/src/MarkdownMenu.tsx:16–91

({name, url}: MarkdownMenuProps)

}

export function MarkdownMenu({name, url}: MarkdownMenuProps) {
  let mdUrl = (url ?? '').replace(/\.html?$/i, '') + '.md';
  let [isCopied, setIsCopied] = useState(false);
  let [isPending, setPending] = useState(false);
  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);

  let pageUrl =
    typeof window !== 'undefined' && url ? new URL(url, window.location.origin).href : (url ?? '');
  let fullMdUrl =
    typeof window !== 'undefined' && mdUrl ? new URL(mdUrl, window.location.origin).href : mdUrl;
  let library = url ? getLibraryLabel(getLibraryFromUrl(name)) : '';
  let aiPrompt = `Answer questions about the following ${library} documentation page: ${pageUrl}\nMarkdown source: ${fullMdUrl}`;
  let chatGptUrl = `https://chatgpt.com/?q=${encodeURIComponent(aiPrompt)}`;
  let claudeUrl = `https://claude.ai/new?q=${encodeURIComponent(aiPrompt)}`;

  useEffect(() => {
    return () => {
      if (timeout.current) {
        clearTimeout(timeout.current);
      }
    };
  }, []);

  let handleCopy = useCallback(async () => {
    if (timeout.current) {
      clearTimeout(timeout.current);
    }
    if (typeof navigator !== 'undefined' && navigator.clipboard) {
      try {
        setPending(true);
        await navigator.clipboard.write([
          new ClipboardItem({
            ['text/plain']: fetch(mdUrl).then(res => res.text())
          })
        ]);
        setIsCopied(true);
        timeout.current = setTimeout(() => setIsCopied(false), 2000);
      } catch {
        ToastQueue.negative('Failed to copy markdown.');
      } finally {
        setPending(false);
      }
    }
  }, [mdUrl]);

  return (
    <div
      className={style({
        display: 'flex',
        justifyContent: 'space-between',
        paddingX: 4,
        paddingBottom: 16
      })}>
      <ActionButton isQuiet size="M" onPress={handleCopy} isPending={isPending}>
        {isCopied ? <CheckmarkCircle /> : <Copy />}
        <Text>Copy for LLM</Text>
      </ActionButton>
      <MenuTrigger align="end">