Skip to content

Commit 5c576f5

Browse files
hannesrudolphhannesrudolph
committed
feat: add buildDocLink utility for dynamic documentation links with UTM telemetry
1 parent ce4ce17 commit 5c576f5

File tree

5 files changed

+143
-10
lines changed

5 files changed

+143
-10
lines changed

‎webview-ui/src/components/chat/ChatView.tsx‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import TaskHeader from "./TaskHeader"
4040
import AutoApproveMenu from "./AutoApproveMenu"
4141
import SystemPromptWarning from "./SystemPromptWarning"
4242
import { CheckpointWarning } from "./CheckpointWarning"
43+
import { buildDocLink } from "@src/utils/docLinks"
4344

4445
export interface ChatViewProps {
4546
isHidden: boolean
@@ -1258,7 +1259,35 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
12581259
i18nKey="chat:about"
12591260
components={{
12601261
DocsLink: (
1261-
<a href="https://docs.roocode.com/" target="_blank" rel="noopener noreferrer">
1262+
<a
1263+
href={buildDocLink("", "welcome")}
1264+
target="_blank"
1265+
rel="noopener noreferrer"
1266+
onClick={() => {
1267+
const url = buildDocLink("", "welcome")
1268+
const event = "docs_link_clicked"
1269+
const properties = { campaign: "welcome", page: "/" }
1270+
// TEMP LOGGING: UTM Telemetry Event
1271+
// eslint-disable-next-line no-console
1272+
console.log(
1273+
"%c[Telemetry]%c Event: %c%s%c | Properties: %c%o%c | URL: %c%s",
1274+
"background: #222; color: #fff; padding:2px 4px; border-radius:2px;",
1275+
"",
1276+
"color: #4FC3F7; font-weight:bold;",
1277+
event,
1278+
"",
1279+
"color: #81C784;",
1280+
properties,
1281+
"",
1282+
"color: #FFD54F;",
1283+
url,
1284+
)
1285+
vscode.postMessage({
1286+
type: "telemetry",
1287+
event,
1288+
properties,
1289+
} as any)
1290+
}}>
12621291
the docs
12631292
</a>
12641293
),

‎webview-ui/src/components/chat/CommandExecutionError.tsx‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { useCallback } from "react"
22
import { useTranslation, Trans } from "react-i18next"
33
import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
4+
import { buildDocLink } from "../../utils/docLinks"
5+
import { vscode } from "@/utils/vscode"
46

57
export const CommandExecutionError = () => {
68
const { t } = useTranslation()
@@ -28,9 +30,36 @@ export const CommandExecutionError = () => {
2830
/>
2931
</div>
3032
<a
31-
href="http://docs.roocode.com/troubleshooting/shell-integration/"
33+
href={buildDocLink("troubleshooting/shell-integration/", "error_tooltip")}
3234
className="underline"
33-
style={{ color: "inherit" }}>
35+
style={{ color: "inherit" }}
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
onClick={() => {
39+
const url = buildDocLink("troubleshooting/shell-integration/", "error_tooltip")
40+
const event = "docs_link_clicked"
41+
const properties = { campaign: "error_tooltip", page: "/troubleshooting/shell-integration/" }
42+
// TEMP LOGGING: UTM Telemetry Event
43+
// eslint-disable-next-line no-console
44+
console.log(
45+
"%c[Telemetry]%c Event: %c%s%c | Properties: %c%o%c | URL: %c%s",
46+
"background: #222; color: #fff; padding:2px 4px; border-radius:2px;",
47+
"",
48+
"color: #4FC3F7; font-weight:bold;",
49+
event,
50+
"",
51+
"color: #81C784;",
52+
properties,
53+
"",
54+
"color: #FFD54F;",
55+
url,
56+
)
57+
vscode.postMessage({
58+
type: "telemetry",
59+
event,
60+
properties,
61+
} as any)
62+
}}>
3463
{t("chat:shellIntegration.troubleshooting")}
3564
</a>
3665
</div>

‎webview-ui/src/components/settings/ApiOptions.tsx‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ import { DiffSettingsControl } from "./DiffSettingsControl"
5252
import { TemperatureControl } from "./TemperatureControl"
5353
import { RateLimitSecondsControl } from "./RateLimitSecondsControl"
5454
import { BedrockCustomArn } from "./providers/BedrockCustomArn"
55+
import { buildDocLink } from "@src/utils/docLinks"
5556

5657
export interface ApiOptionsProps {
5758
uriScheme: string | undefined
@@ -272,9 +273,11 @@ const ApiOptions = ({
272273
openai: "openai-compatible",
273274
}
274275

276+
const slug = slugs[selectedProvider] || selectedProvider
275277
return {
276-
url: `https://docs.roocode.com/providers/${slugs[selectedProvider] || selectedProvider}`,
278+
url: buildDocLink(`providers/${slug}`, "provider_docs"),
277279
name,
280+
page: `/providers/${slug}`,
278281
}
279282
}, [selectedProvider])
280283

@@ -285,7 +288,35 @@ const ApiOptions = ({
285288
<label className="block font-medium mb-1">{t("settings:providers.apiProvider")}</label>
286289
{docs && (
287290
<div className="text-xs text-vscode-descriptionForeground">
288-
<VSCodeLink href={docs.url} className="hover:text-vscode-foreground" target="_blank">
291+
<VSCodeLink
292+
href={docs.url}
293+
className="hover:text-vscode-foreground"
294+
target="_blank"
295+
onClick={() => {
296+
const url = docs.url
297+
const event = "docs_link_clicked"
298+
const properties = { campaign: "provider_docs", page: docs.page }
299+
// TEMP LOGGING: UTM Telemetry Event
300+
// eslint-disable-next-line no-console
301+
console.log(
302+
"%c[Telemetry]%c Event: %c%s%c | Properties: %c%o%c | URL: %c%s",
303+
"background: #222; color: #fff; padding:2px 4px; border-radius:2px;",
304+
"",
305+
"color: #4FC3F7; font-weight:bold;",
306+
event,
307+
"",
308+
"color: #81C784;",
309+
properties,
310+
"",
311+
"color: #FFD54F;",
312+
url,
313+
)
314+
vscode.postMessage({
315+
type: "telemetry",
316+
event,
317+
properties,
318+
} as any)
319+
}}>
289320
{t("settings:providers.providerDocumentation", { provider: docs.name })}
290321
</VSCodeLink>
291322
</div>

‎webview-ui/src/components/welcome/RooTips.tsx‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,23 @@ import { useTranslation } from "react-i18next"
33
import { useState, useEffect } from "react"
44
import clsx from "clsx"
55

6+
import { buildDocLink } from "@src/utils/docLinks"
7+
import { vscode } from "@/utils/vscode"
8+
69
const tips = [
710
{
811
icon: "codicon-account",
9-
href: "https://docs.roocode.com/basic-usage/using-modes",
12+
href: buildDocLink("basic-usage/using-modes", "tips"),
1013
titleKey: "rooTips.customizableModes.title",
1114
descriptionKey: "rooTips.customizableModes.description",
15+
page: "/basic-usage/using-modes",
1216
},
1317
{
1418
icon: "codicon-list-tree",
15-
href: "https://docs.roocode.com/features/boomerang-tasks",
19+
href: buildDocLink("features/boomerang-tasks", "tips"),
1620
titleKey: "rooTips.boomerangTasks.title",
1721
descriptionKey: "rooTips.boomerangTasks.description",
22+
page: "/features/boomerang-tasks",
1823
},
1924
]
2025

@@ -62,8 +67,21 @@ const RooTips = ({ cycle = false }: RooTipsProps) => {
6267
{" "}
6368
<span className={`codicon ${currentTip.icon}`}></span>
6469
<span>
65-
<VSCodeLink href={currentTip.href}>{t(currentTip.titleKey)}</VSCodeLink>:{" "}
66-
{t(currentTip.descriptionKey)}
70+
<VSCodeLink
71+
href={currentTip.href}
72+
onClick={() =>
73+
vscode.postMessage({
74+
type: "telemetry",
75+
event: "docs_link_clicked",
76+
properties: {
77+
campaign: "tips",
78+
page: currentTip.page,
79+
},
80+
} as any)
81+
}>
82+
{t(currentTip.titleKey)}
83+
</VSCodeLink>
84+
: {t(currentTip.descriptionKey)}
6785
</span>
6886
</div>
6987
</>
@@ -74,7 +92,21 @@ const RooTips = ({ cycle = false }: RooTipsProps) => {
7492
className="flex items-center gap-2 text-vscode-editor-foreground font-vscode max-w-[250px]">
7593
<span className={`codicon ${tip.icon}`}></span>
7694
<span>
77-
<VSCodeLink href={tip.href}>{t(tip.titleKey)}</VSCodeLink>: {t(tip.descriptionKey)}
95+
<VSCodeLink
96+
href={tip.href}
97+
onClick={() =>
98+
vscode.postMessage({
99+
type: "telemetry",
100+
event: "docs_link_clicked",
101+
properties: {
102+
campaign: "tips",
103+
page: tip.page,
104+
},
105+
} as any)
106+
}>
107+
{t(tip.titleKey)}
108+
</VSCodeLink>
109+
: {t(tip.descriptionKey)}
78110
</span>
79111
</div>
80112
))

‎webview-ui/src/utils/docLinks.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* Utility for building Roo Code documentation links with UTM telemetry.
3+
*
4+
* @param path - The path after the docs root (no leading slash)
5+
* @param campaign - The UTM campaign context (e.g. "welcome", "provider_docs", "tips", "error_tooltip")
6+
* @returns The full docs URL with UTM parameters
7+
*/
8+
export function buildDocLink(path: string, campaign: string): string {
9+
// Remove any leading slash from path
10+
const cleanPath = path.replace(/^\//, "")
11+
return `https://docs.roocode.com/${cleanPath}?utm_source=extension&utm_medium=ide&utm_campaign=${encodeURIComponent(campaign)}`
12+
}

0 commit comments

Comments
 (0)