Skip to content

Commit 7337c17

Browse files
hannesrudolphhannesrudolph
committed
feat: enhance checkpoint settings with documentation link for better user guidance
feat: add buildDocLink utility for dynamic documentation links with UTM telemetry fix: update documentation links in CommandExecutionError and RooTips components for consistency fix: update documentation links in RooTips component for accuracy refactor: remove telemetry logging from documentation links in various components feat: update MCP documentation link and improve description for clarity feat: enhance buildDocLink to support hash fragments in documentation URLs feat: update MCP server creation descriptions and add links for better guidance fix: correct punctuation in MCP server creation description feat: enhance prompts with dynamic documentation links and improve help text descriptions feat: add documentation link to browser tool description for better guidance feat: add dynamic documentation links to terminal settings descriptions for improved user guidance
1 parent f031914 commit 7337c17

File tree

13 files changed

+274
-84
lines changed

13 files changed

+274
-84
lines changed

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

Lines changed: 2 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,7 @@ 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 href={buildDocLink("", "welcome")} target="_blank" rel="noopener noreferrer">
12621263
the docs
12631264
</a>
12641265
),

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
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"
45

56
export const CommandExecutionError = () => {
67
const { t } = useTranslation()
@@ -28,7 +29,7 @@ export const CommandExecutionError = () => {
2829
/>
2930
</div>
3031
<a
31-
href="http://docs.roocode.com/troubleshooting/shell-integration/"
32+
href={buildDocLink("troubleshooting/shell-integration/", "error_tooltip")}
3233
className="underline"
3334
style={{ color: "inherit" }}>
3435
{t("chat:shellIntegration.troubleshooting")}

‎webview-ui/src/components/mcp/McpView.tsx‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
DialogDescription,
2424
DialogFooter,
2525
} from "@src/components/ui"
26+
import { buildDocLink } from "@src/utils/docLinks"
2627

2728
import { Tab, TabContent, TabHeader } from "../common/Tab"
2829

@@ -62,13 +63,10 @@ const McpView = ({ onDone }: McpViewProps) => {
6263
marginTop: "5px",
6364
}}>
6465
<Trans i18nKey="mcp:description">
65-
<VSCodeLink href="https://github.com/modelcontextprotocol" style={{ display: "inline" }}>
66-
Model Context Protocol
67-
</VSCodeLink>
6866
<VSCodeLink
69-
href="https://github.com/modelcontextprotocol/servers"
67+
href={buildDocLink("features/mcp/using-mcp-in-roo", "mcp_settings")}
7068
style={{ display: "inline" }}>
71-
community-made servers
69+
Learn More
7270
</VSCodeLink>
7371
</Trans>
7472
</div>
@@ -86,14 +84,25 @@ const McpView = ({ onDone }: McpViewProps) => {
8684
}}>
8785
<span style={{ fontWeight: "500" }}>{t("mcp:enableServerCreation.title")}</span>
8886
</VSCodeCheckbox>
89-
<p
87+
<div
9088
style={{
9189
fontSize: "12px",
9290
marginTop: "5px",
9391
color: "var(--vscode-descriptionForeground)",
9492
}}>
95-
{t("mcp:enableServerCreation.description")}
96-
</p>
93+
<Trans i18nKey="mcp:enableServerCreation.description">
94+
<VSCodeLink
95+
href={buildDocLink(
96+
"features/mcp/using-mcp-in-roo#how-to-use-roo-to-create-an-mcp-server",
97+
"mcp_server_creation",
98+
)}
99+
style={{ display: "inline" }}>
100+
Learn about server creation
101+
</VSCodeLink>
102+
<strong>new</strong>
103+
</Trans>
104+
<p style={{ marginTop: "8px" }}>{t("mcp:enableServerCreation.hint")}</p>
105+
</div>
97106
</div>
98107

99108
{/* Server List */}
@@ -130,6 +139,21 @@ const McpView = ({ onDone }: McpViewProps) => {
130139
{t("mcp:editProjectMCP")}
131140
</Button>
132141
</div>
142+
<div
143+
style={{
144+
marginTop: "15px",
145+
fontSize: "12px",
146+
color: "var(--vscode-descriptionForeground)",
147+
}}>
148+
<VSCodeLink
149+
href={buildDocLink(
150+
"features/mcp/using-mcp-in-roo#editing-mcp-settings-files",
151+
"mcp_edit_settings",
152+
)}
153+
style={{ display: "inline" }}>
154+
{t("mcp:learnMoreEditingSettings")}
155+
</VSCodeLink>
156+
</div>
133157
</>
134158
)}
135159
</TabContent>

‎webview-ui/src/components/prompts/PromptsView.tsx‎

Lines changed: 61 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import React, { useState, useEffect, useMemo, useCallback, useRef } from "react"
22
import { Button } from "@/components/ui/button"
3-
import { VSCodeCheckbox, VSCodeRadioGroup, VSCodeRadio, VSCodeTextArea } from "@vscode/webview-ui-toolkit/react"
3+
import {
4+
VSCodeCheckbox,
5+
VSCodeRadioGroup,
6+
VSCodeRadio,
7+
VSCodeTextArea,
8+
VSCodeLink,
9+
} from "@vscode/webview-ui-toolkit/react"
410

511
import { useExtensionState } from "@src/context/ExtensionStateContext"
612
import {
@@ -18,9 +24,9 @@ import { supportPrompt, SupportPromptType } from "@roo/shared/support-prompt"
1824
import { TOOL_GROUPS, ToolGroup } from "@roo/shared/tools"
1925
import { vscode } from "@src/utils/vscode"
2026
import { Tab, TabContent, TabHeader } from "../common/Tab"
21-
import i18next from "i18next"
2227
import { useAppTranslation } from "@src/i18n/TranslationContext"
2328
import { Trans } from "react-i18next"
29+
import { buildDocLink } from "@src/utils/docLinks"
2430
import {
2531
Select,
2632
SelectContent,
@@ -507,7 +513,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
507513
</div>
508514

509515
<div className="text-sm text-vscode-descriptionForeground mb-3">
510-
{t("prompts:modes.createModeHelpText")}
516+
<Trans i18nKey="prompts:modes.createModeHelpText">
517+
<VSCodeLink
518+
href={buildDocLink("basic-usage/using-modes", "prompts_view_modes")}
519+
style={{ display: "inline" }}></VSCodeLink>
520+
<VSCodeLink
521+
href={buildDocLink("features/custom-modes", "prompts_view_modes")}
522+
style={{ display: "inline" }}></VSCodeLink>
523+
</Trans>
511524
</div>
512525

513526
<div className="flex items-center gap-1 mb-3">
@@ -603,6 +616,34 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
603616
</PopoverContent>
604617
</Popover>
605618
</div>
619+
{/* API Configuration - Moved Here */}
620+
<div className="mb-3">
621+
<div className="font-bold mb-1">{t("prompts:apiConfiguration.title")}</div>
622+
<div className="mb-2">
623+
<Select
624+
value={currentApiConfigName}
625+
onValueChange={(value) => {
626+
vscode.postMessage({
627+
type: "loadApiConfiguration",
628+
text: value,
629+
})
630+
}}>
631+
<SelectTrigger className="w-full">
632+
<SelectValue placeholder={t("settings:common.select")} />
633+
</SelectTrigger>
634+
<SelectContent>
635+
{(listApiConfigMeta || []).map((config) => (
636+
<SelectItem key={config.id} value={config.name}>
637+
{config.name}
638+
</SelectItem>
639+
))}
640+
</SelectContent>
641+
</Select>
642+
<div className="text-xs mt-1.5 text-vscode-descriptionForeground">
643+
{t("prompts:apiConfiguration.select")}
644+
</div>
645+
</div>
646+
</div>
606647
</div>
607648

608649
<div className="mb-5">
@@ -701,34 +742,6 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
701742
</div>
702743
{/* Mode settings */}
703744
<>
704-
<div className="mb-3">
705-
<div className="font-bold mb-1">{t("prompts:apiConfiguration.title")}</div>
706-
<div className="mb-2">
707-
<Select
708-
value={currentApiConfigName}
709-
onValueChange={(value) => {
710-
vscode.postMessage({
711-
type: "loadApiConfiguration",
712-
text: value,
713-
})
714-
}}>
715-
<SelectTrigger className="w-full">
716-
<SelectValue placeholder={t("settings:common.select")} />
717-
</SelectTrigger>
718-
<SelectContent>
719-
{(listApiConfigMeta || []).map((config) => (
720-
<SelectItem key={config.id} value={config.name}>
721-
{config.name}
722-
</SelectItem>
723-
))}
724-
</SelectContent>
725-
</Select>
726-
<div className="text-xs mt-1.5 text-vscode-descriptionForeground">
727-
{t("prompts:apiConfiguration.select")}
728-
</div>
729-
</div>
730-
</div>
731-
732745
{/* Show tools for all modes */}
733746
<div className="mb-4">
734747
<div className="flex justify-between items-center mb-1">
@@ -986,6 +999,15 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
986999
}}
9871000
/>
9881001
),
1002+
"1": (
1003+
<VSCodeLink
1004+
href={buildDocLink(
1005+
"features/footgun-prompting",
1006+
"prompts_advanced_system_prompt",
1007+
)}
1008+
style={{ display: "inline" }}></VSCodeLink>
1009+
),
1010+
"2": <strong />,
9891011
}}
9901012
/>
9911013
</div>
@@ -997,9 +1019,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
9971019
<h3 className="text-vscode-foreground mb-3">{t("prompts:globalCustomInstructions.title")}</h3>
9981020

9991021
<div className="text-sm text-vscode-descriptionForeground mb-2">
1000-
{t("prompts:globalCustomInstructions.description", {
1001-
language: i18next.language,
1002-
})}
1022+
<Trans i18nKey="prompts:globalCustomInstructions.description">
1023+
<VSCodeLink
1024+
href={buildDocLink(
1025+
"features/custom-instructions#global-custom-instructions",
1026+
"prompts_global_custom_instructions",
1027+
)}
1028+
style={{ display: "inline" }}></VSCodeLink>
1029+
</Trans>
10031030
</div>
10041031
<VSCodeTextArea
10051032
value={customInstructions || ""}

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

Lines changed: 3 additions & 1 deletion
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
@@ -253,8 +254,9 @@ const ApiOptions = ({
253254
openai: "openai-compatible",
254255
}
255256

257+
const slug = slugs[selectedProvider] || selectedProvider
256258
return {
257-
url: `https://docs.roocode.com/providers/${slugs[selectedProvider] || selectedProvider}`,
259+
url: buildDocLink(`providers/${slug}`, "provider_docs"),
258260
name,
259261
}
260262
}, [selectedProvider])

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { VSCodeButton, VSCodeCheckbox, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
1+
import { VSCodeButton, VSCodeCheckbox, VSCodeTextField, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
22
import { SquareMousePointer } from "lucide-react"
33
import { HTMLAttributes, useEffect, useMemo, useState } from "react"
4+
import { Trans } from "react-i18next"
45

56
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Slider } from "@/components/ui"
67
import { useAppTranslation } from "@/i18n/TranslationContext"
78
import { vscode } from "@/utils/vscode"
9+
import { buildDocLink } from "@src/utils/docLinks"
810

911
import { Section } from "./Section"
1012
import { SectionHeader } from "./SectionHeader"
@@ -112,7 +114,13 @@ export const BrowserSettings = ({
112114
<span className="font-medium">{t("settings:browser.enable.label")}</span>
113115
</VSCodeCheckbox>
114116
<div className="text-vscode-descriptionForeground text-sm mt-1">
115-
{t("settings:browser.enable.description")}
117+
<Trans i18nKey="settings:browser.enable.description">
118+
<VSCodeLink
119+
href={buildDocLink("features/browser-use", "settings_browser_tool")}
120+
style={{ display: "inline" }}>
121+
{" "}
122+
</VSCodeLink>
123+
</Trans>
116124
</div>
117125
</div>
118126

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { HTMLAttributes } from "react"
22
import { useAppTranslation } from "@/i18n/TranslationContext"
3-
import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
3+
import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
44
import { GitBranch } from "lucide-react"
5+
import { Trans } from "react-i18next"
6+
import { buildDocLink } from "@src/utils/docLinks"
57

68
import { SetCachedStateField } from "./types"
79
import { SectionHeader } from "./SectionHeader"
@@ -32,9 +34,15 @@ export const CheckpointSettings = ({ enableCheckpoints, setCachedStateField, ...
3234
}}>
3335
<span className="font-medium">{t("settings:checkpoints.enable.label")}</span>
3436
</VSCodeCheckbox>
35-
<p className="text-vscode-descriptionForeground text-sm mt-0">
36-
{t("settings:checkpoints.enable.description")}
37-
</p>
37+
<div className="text-vscode-descriptionForeground text-sm mt-1">
38+
<Trans i18nKey="settings:checkpoints.enable.description">
39+
<VSCodeLink
40+
href={buildDocLink("features/checkpoints", "settings_checkpoints")}
41+
style={{ display: "inline" }}>
42+
{" "}
43+
</VSCodeLink>
44+
</Trans>
45+
</div>
3846
</div>
3947
</Section>
4048
</div>

0 commit comments

Comments
 (0)