diff --git a/src/components/copyMarkdownButton.tsx b/src/components/copyMarkdownButton.tsx index b4a40817847cd..a214a8cd62a93 100644 --- a/src/components/copyMarkdownButton.tsx +++ b/src/components/copyMarkdownButton.tsx @@ -6,7 +6,10 @@ import {Clipboard} from 'react-feather'; import Link from 'next/link'; import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent'; +import ChatGPT from 'sentry-docs/icons/chatgpt'; import Chevron from 'sentry-docs/icons/Chevron'; +import Claude from 'sentry-docs/icons/claude'; +import ExternalLink from 'sentry-docs/icons/external-link'; import Markdown from 'sentry-docs/icons/Markdown'; interface CopyMarkdownButtonProps { @@ -66,6 +69,16 @@ export function CopyMarkdownButton({pathname}: CopyMarkdownButtonProps) { setIsOpen(false); }; + const handleOpenChatGPTClick = () => { + emit('Open in ChatGPT', {props: {page: pathname, source: 'chatgpt_link'}}); + setIsOpen(false); + }; + + const handleOpenClaudeClick = () => { + emit('Open in Claude', {props: {page: pathname, source: 'claude_link'}}); + setIsOpen(false); + }; + const handleDropdownToggle = () => { setIsOpen(!isOpen); if (!isOpen) { @@ -204,6 +217,46 @@ export function CopyMarkdownButton({pathname}: CopyMarkdownButtonProps) { + + +
+ +
+
+
+ Open in ChatGPT
+
+ Ask ChatGPT questions about this page +
+
+ + + +
+ +
+
+
+ Open in Claude
+
+ Ask Claude questions about this page +
+
+ , document.body diff --git a/src/hooks/usePlausibleEvent.tsx b/src/hooks/usePlausibleEvent.tsx index a9491efec6207..a899f5426facb 100644 --- a/src/hooks/usePlausibleEvent.tsx +++ b/src/hooks/usePlausibleEvent.tsx @@ -27,6 +27,14 @@ type PlausibleEventProps = { page: string; title: string; }; + ['Open in ChatGPT']: { + page: string; + source: string; + }; + ['Open in Claude']: { + page: string; + source: string; + }; ['Read Progress']: { page: string; readProgress: ReadProgressMilestone; diff --git a/src/icons/chatgpt.tsx b/src/icons/chatgpt.tsx new file mode 100644 index 0000000000000..a63915f5d1711 --- /dev/null +++ b/src/icons/chatgpt.tsx @@ -0,0 +1,16 @@ +function ChatGPT({width = 16, height = 16, ...props}: React.SVGAttributes) { + return ( + + + + ); +} +export default ChatGPT; diff --git a/src/icons/claude.tsx b/src/icons/claude.tsx new file mode 100644 index 0000000000000..1b15bf0999063 --- /dev/null +++ b/src/icons/claude.tsx @@ -0,0 +1,17 @@ +function Claude({width = 16, height = 16, ...props}: React.SVGAttributes) { + return ( + + Claude + + + ); +} +export default Claude; diff --git a/src/icons/external-link.tsx b/src/icons/external-link.tsx new file mode 100644 index 0000000000000..cef054845bd1d --- /dev/null +++ b/src/icons/external-link.tsx @@ -0,0 +1,23 @@ +function ExternalLink({ + width = 14, + height = 14, + ...props +}: React.SVGAttributes) { + return ( + + + + + + ); +} +export default ExternalLink;