@@ -10,13 +10,15 @@ import {
1010} from "@floating-ui/react" ;
1111import { useState } from "react" ;
1212import {
13- PiDotsThreeOutlineFill ,
14- PiClipboardTextLight ,
13+ PiTriangleFill ,
14+ PiCopyDuotone ,
1515 PiArrowSquareOutLight ,
1616 PiCheckCircleLight ,
1717 PiXCircleLight ,
1818 PiChatCircleLight ,
1919} from "react-icons/pi" ;
20+ import ClaudeIcon from "./icons/ClaudeIcon" ;
21+ import ChatGPTIcon from "./icons/ChatGPTIcon" ;
2022import { track } from "~/util/zaraz" ;
2123
2224type CopyState = "idle" | "success" | "error" ;
@@ -56,6 +58,16 @@ export default function CopyPageButton() {
5658 window . open ( docsAIUrl , "_blank" ) ;
5759 } ;
5860
61+ const handleExternalAI = ( url : string , vendor : string ) => {
62+ const externalAIURL = url ;
63+ const prompt = `Read this page from the Cloudflare docs: ${ encodeURIComponent ( window . location . href ) } ;
64+ track ( "clicked copy page button" , {
65+ value : "docs ai" ,
66+ label : vendor ,
67+ } ) ;
68+ window . open ( `${ externalAIURL } ${ prompt } , "_blank" ) ;
69+ } ;
70+
5971 const handleCopyMarkdown = async ( ) => {
6072 const markdownUrl = new URL ( "index.md" , window . location . href ) . toString ( ) ;
6173 try {
@@ -88,18 +100,25 @@ export default function CopyPageButton() {
88100 } ;
89101
90102 const options = [
91- {
92- label : "Copy Page as Markdown" ,
93- description : "Copy the raw Markdown content to clipboard" ,
94- icon : PiClipboardTextLight ,
95- onClick : handleCopyMarkdown ,
96- } ,
97103 {
98104 label : "View Page as Markdown" ,
99105 description : "Open the Markdown file in a new tab" ,
100106 icon : PiArrowSquareOutLight ,
101107 onClick : handleViewMarkdown ,
102108 } ,
109+ {
110+ label : "Open in Claude" ,
111+ description : "Ask Claude about this page" ,
112+ icon : ClaudeIcon ,
113+ onClick : ( ) => handleExternalAI ( "https://claude.ai/new?q=" , "claude" ) ,
114+ } ,
115+ {
116+ label : "Open in ChatGPT" ,
117+ description : "Ask ChatGPT about this page" ,
118+ icon : ChatGPTIcon ,
119+ onClick : ( ) =>
120+ handleExternalAI ( "https://chat.openai.com/?prompt=" , "chatgpt" ) ,
121+ } ,
103122 {
104123 label : "Ask Docs AI" ,
105124 description : "Open our Docs AI assistant in a new tab" ,
@@ -129,21 +148,29 @@ export default function CopyPageButton() {
129148
130149 return (
131150 < >
132- < span > Page options </ span >
133- < PiDotsThreeOutlineFill / >
151+ < PiCopyDuotone / >
152+ < span > Copy page </ span >
134153 </ >
135154 ) ;
136155 } ;
137156
138157 return (
139158 < >
140- < button
141- ref = { refs . setReference }
142- { ...getReferenceProps ( ) }
143- className = "inline-flex min-h-8 min-w-32 cursor-pointer items-center justify-center gap-2 rounded-sm border border-(--sl-color-hairline) bg-transparent px-3 text-sm text-black hover:bg-(--sl-color-bg-nav)"
144- >
145- { getButtonContent ( ) }
146- </ button >
159+ < div className = "flex justify-end" >
160+ < button
161+ onClick = { handleCopyMarkdown }
162+ className = "inline-flex min-h-8 min-w-32 cursor-pointer items-center justify-center gap-2 rounded-l-sm border border-(--sl-color-hairline) bg-transparent px-3 text-sm text-black transition-colors duration-300 hover:bg-(--sl-color-bg-nav)"
163+ >
164+ { getButtonContent ( ) }
165+ </ button >
166+ < button
167+ ref = { refs . setReference }
168+ { ...getReferenceProps ( ) }
169+ className = "inline-flex min-h-8 w-8 cursor-pointer items-center justify-center rounded-r-sm border-t border-r border-b border-(--sl-color-hairline) bg-transparent text-sm text-black transition-colors duration-300 hover:bg-(--sl-color-bg-nav)"
170+ >
171+ < PiTriangleFill className = "rotate-180 text-xs" />
172+ </ button >
173+ </ div >
147174 { isOpen && (
148175 < FloatingPortal >
149176 < ul
0 commit comments