diff --git a/docs/product/explore/logs/getting-started/index.mdx b/docs/product/explore/logs/getting-started/index.mdx index a743b1fe17cd0..8dc95e4e69dc8 100644 --- a/docs/product/explore/logs/getting-started/index.mdx +++ b/docs/product/explore/logs/getting-started/index.mdx @@ -14,6 +14,7 @@ To set up Sentry Logs, use the links below for supported SDKs. After it's been s platform="javascript.browser" label="Browser JavaScript" url="/platforms/javascript/logs/" + skill="sentry-browser-sdk" /> - - - - - - - - - - - - - ### PHP -- +- - ### Ruby @@ -240,6 +255,7 @@ To set up Sentry Logs, use the links below for supported SDKs. After it's been s platform="ruby" label="Ruby" url="/platforms/ruby/logs/" + skill="sentry-ruby-sdk" /> - +- ### Rust @@ -265,6 +281,7 @@ To set up Sentry Logs, use the links below for supported SDKs. After it's been s platform="dotnet" label=".NET" url="/platforms/dotnet/logs/" + skill="sentry-dotnet-sdk" /> - ({ + borderRadius: '4px', + padding: '8px 12px', + fontSize: '12px', + lineHeight: 1.2, + textAlign: 'center' as const, + color: isDark ? 'var(--foreground)' : 'var(--gray-11)', + backgroundColor: isDark ? 'var(--gray-4)' : 'white', + boxShadow: '0px 4px 16px 0px rgba(31, 22, 51, 0.1)', + zIndex: 9999, + position: 'relative' as const, + pointerEvents: 'none' as const, + userSelect: 'none' as const, + whiteSpace: 'nowrap' as const, + animationDuration: '100ms', + animationTimingFunction: 'ease-in', + }), + [isDark] + ); + + const tooltipArrowStyle: React.CSSProperties = useMemo( + () => ({ + fill: isDark ? 'var(--gray-4)' : 'white', + }), + [isDark] + ); + + const copyPrompt = useCallback( + async (event: React.MouseEvent) => { + event.stopPropagation(); + event.preventDefault(); + + emit('Copy AI Prompt', { + props: {page: window.location.pathname, title: 'Inline Platform Link'}, + }); + + try { + setCopied(false); + await navigator.clipboard.writeText(prompt); + setCopied(true); + DocMetrics.copyAIPrompt(window.location.pathname, skill, true); + setTimeout(() => setCopied(false), 1500); + } catch (error) { + Sentry.captureException(error); + DocMetrics.copyAIPrompt(window.location.pathname, skill, false); + setCopied(false); + } + }, + [prompt, emit, skill] + ); + + return ( + + | + + + + + + {!copied && ( + + + + Copy setup prompt for AI agents + + + + + )} + + + + ); +} + +function CopyIcon() { + return ( + + + + + ); +} diff --git a/src/components/copyPromptButton/style.module.scss b/src/components/copyPromptButton/style.module.scss new file mode 100644 index 0000000000000..4bc6f92171583 --- /dev/null +++ b/src/components/copyPromptButton/style.module.scss @@ -0,0 +1,70 @@ +.wrapper { + display: inline-flex; + align-items: center; + margin-left: 0.4rem; + vertical-align: middle; + + @media (max-width: 768px) { + display: none; + } +} + +.divider { + color: var(--gray-200); + font-size: 0.85rem; + margin-right: 0.4rem; + user-select: none; +} + +:global(.dark) .divider { + color: var(--gray-600); +} + +.button { + display: inline-flex; + align-items: center; + gap: 0.3rem; + padding: 0.15rem 0.5rem; + border: 1px solid color-mix(in srgb, var(--accent-purple), transparent 60%); + border-radius: 4px; + background: color-mix(in srgb, var(--accent-purple), transparent 92%); + color: var(--accent-purple); + font-size: 0.72rem; + font-weight: 500; + white-space: nowrap; + cursor: pointer; + transition: + background-color 150ms, + border-color 150ms; + line-height: 1.4; + + &:hover { + background: color-mix(in srgb, var(--accent-purple), transparent 82%); + border-color: color-mix(in srgb, var(--accent-purple), transparent 40%); + } + + &:active { + background: color-mix(in srgb, var(--accent-purple), transparent 72%); + } +} + +:global(.dark) .button { + background: color-mix(in srgb, var(--accent-purple), transparent 85%); + border-color: color-mix(in srgb, var(--accent-purple), transparent 50%); + color: var(--accent-purple-light, var(--accent-purple)); + + &:hover { + background: color-mix(in srgb, var(--accent-purple), transparent 75%); + border-color: color-mix(in srgb, var(--accent-purple), transparent 30%); + } + + &:active { + background: color-mix(in srgb, var(--accent-purple), transparent 65%); + } +} + +.label { + letter-spacing: 0.01em; +} + + diff --git a/src/components/linkWithPlatformIcon.tsx b/src/components/linkWithPlatformIcon.tsx index 84b22326de675..17ae9d8b53e1a 100644 --- a/src/components/linkWithPlatformIcon.tsx +++ b/src/components/linkWithPlatformIcon.tsx @@ -1,13 +1,16 @@ +import {CopyPromptButton} from './copyPromptButton'; import {PlatformIcon} from './platformIcon'; import {SmartLink} from './smartLink'; type Props = { label?: string; platform?: string; + /** Agent skill name, e.g. "sentry-react-sdk". When provided, renders an inline "Agent Setup" copy-prompt button. */ + skill?: string; url?: string; }; -export function LinkWithPlatformIcon({platform, label, url}: Props) { +export function LinkWithPlatformIcon({platform, label, url, skill}: Props) { if (!platform) { return null; } @@ -27,6 +30,7 @@ export function LinkWithPlatformIcon({platform, label, url}: Props) { /> {label ?? platform} + {skill && } ); }