diff --git a/src/components/CopyPageButton.tsx b/src/components/CopyPageButton.tsx index 38c3fb28da2a701..dbc6a0406bc4c87 100644 --- a/src/components/CopyPageButton.tsx +++ b/src/components/CopyPageButton.tsx @@ -10,13 +10,15 @@ import { } from "@floating-ui/react"; import { useState } from "react"; import { - PiDotsThreeOutlineFill, - PiClipboardTextLight, + PiTriangleFill, + PiCopyDuotone, PiArrowSquareOutLight, PiCheckCircleLight, PiXCircleLight, PiChatCircleLight, } from "react-icons/pi"; +import ClaudeIcon from "./icons/ClaudeIcon"; +import ChatGPTIcon from "./icons/ChatGPTIcon"; import { track } from "~/util/zaraz"; type CopyState = "idle" | "success" | "error"; @@ -56,6 +58,17 @@ export default function CopyPageButton() { window.open(docsAIUrl, "_blank"); }; + const handleExternalAI = (url: string, vendor: string) => { + const externalAIURL = url; + const indexMdUrl = new URL("index.md", window.location.href).toString(); + const prompt = `Read this page from the Cloudflare docs: ${encodeURIComponent(indexMdUrl)} and answer questions about the content.`; + track("clicked copy page button", { + value: "docs ai", + label: vendor, + }); + window.open(`${externalAIURL}${prompt}`, "_blank"); + }; + const handleCopyMarkdown = async () => { const markdownUrl = new URL("index.md", window.location.href).toString(); try { @@ -88,18 +101,25 @@ export default function CopyPageButton() { }; const options = [ - { - label: "Copy Page as Markdown", - description: "Copy the raw Markdown content to clipboard", - icon: PiClipboardTextLight, - onClick: handleCopyMarkdown, - }, { label: "View Page as Markdown", description: "Open the Markdown file in a new tab", icon: PiArrowSquareOutLight, onClick: handleViewMarkdown, }, + { + label: "Open in Claude", + description: "Ask Claude about this page", + icon: ClaudeIcon, + onClick: () => handleExternalAI("https://claude.ai/new?q=", "claude"), + }, + { + label: "Open in ChatGPT", + description: "Ask ChatGPT about this page", + icon: ChatGPTIcon, + onClick: () => + handleExternalAI("https://chat.openai.com/?prompt=", "chatgpt"), + }, { label: "Ask Docs AI", description: "Open our Docs AI assistant in a new tab", @@ -129,21 +149,29 @@ export default function CopyPageButton() { return ( <> - Page options - + + Copy page ); }; return ( <> - +
+ + +
{isOpen && (