Skip to content

Commit 8077c4a

Browse files
hannesrudolphmrubens
hannesrudolph
and
mrubens
committed
feat: add buildDocLink utility and 21 Internal Links to Docs (#3418)
Co-authored-by: Matt Rubens <[email protected]>
1 parent b6cbf77 commit 8077c4a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+916
-710
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 {
@@ -19,9 +25,9 @@ import { supportPrompt, SupportPromptType } from "@roo/shared/support-prompt"
1925
import { TOOL_GROUPS, ToolGroup } from "@roo/shared/tools"
2026
import { vscode } from "@src/utils/vscode"
2127
import { Tab, TabContent, TabHeader } from "../common/Tab"
22-
import i18next from "i18next"
2328
import { useAppTranslation } from "@src/i18n/TranslationContext"
2429
import { Trans } from "react-i18next"
30+
import { buildDocLink } from "@src/utils/docLinks"
2531
import {
2632
Select,
2733
SelectContent,
@@ -515,7 +521,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
515521
</div>
516522

517523
<div className="text-sm text-vscode-descriptionForeground mb-3">
518-
{t("prompts:modes.createModeHelpText")}
524+
<Trans i18nKey="prompts:modes.createModeHelpText">
525+
<VSCodeLink
526+
href={buildDocLink("basic-usage/using-modes", "prompts_view_modes")}
527+
style={{ display: "inline" }}></VSCodeLink>
528+
<VSCodeLink
529+
href={buildDocLink("features/custom-modes", "prompts_view_modes")}
530+
style={{ display: "inline" }}></VSCodeLink>
531+
</Trans>
519532
</div>
520533

521534
<div className="flex items-center gap-1 mb-3">
@@ -611,6 +624,34 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
611624
</PopoverContent>
612625
</Popover>
613626
</div>
627+
{/* API Configuration - Moved Here */}
628+
<div className="mb-3">
629+
<div className="font-bold mb-1">{t("prompts:apiConfiguration.title")}</div>
630+
<div className="mb-2">
631+
<Select
632+
value={currentApiConfigName}
633+
onValueChange={(value) => {
634+
vscode.postMessage({
635+
type: "loadApiConfiguration",
636+
text: value,
637+
})
638+
}}>
639+
<SelectTrigger className="w-full">
640+
<SelectValue placeholder={t("settings:common.select")} />
641+
</SelectTrigger>
642+
<SelectContent>
643+
{(listApiConfigMeta || []).map((config) => (
644+
<SelectItem key={config.id} value={config.name}>
645+
{config.name}
646+
</SelectItem>
647+
))}
648+
</SelectContent>
649+
</Select>
650+
<div className="text-xs mt-1.5 text-vscode-descriptionForeground">
651+
{t("prompts:apiConfiguration.select")}
652+
</div>
653+
</div>
654+
</div>
614655
</div>
615656

616657
<div className="mb-5">
@@ -764,34 +805,6 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
764805

765806
{/* Mode settings */}
766807
<>
767-
<div className="mb-3">
768-
<div className="font-bold mb-1">{t("prompts:apiConfiguration.title")}</div>
769-
<div className="mb-2">
770-
<Select
771-
value={currentApiConfigName}
772-
onValueChange={(value) => {
773-
vscode.postMessage({
774-
type: "loadApiConfiguration",
775-
text: value,
776-
})
777-
}}>
778-
<SelectTrigger className="w-full">
779-
<SelectValue placeholder={t("settings:common.select")} />
780-
</SelectTrigger>
781-
<SelectContent>
782-
{(listApiConfigMeta || []).map((config) => (
783-
<SelectItem key={config.id} value={config.name}>
784-
{config.name}
785-
</SelectItem>
786-
))}
787-
</SelectContent>
788-
</Select>
789-
<div className="text-xs mt-1.5 text-vscode-descriptionForeground">
790-
{t("prompts:apiConfiguration.select")}
791-
</div>
792-
</div>
793-
</div>
794-
795808
{/* Show tools for all modes */}
796809
<div className="mb-4">
797810
<div className="flex justify-between items-center mb-1">
@@ -1049,6 +1062,15 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
10491062
}}
10501063
/>
10511064
),
1065+
"1": (
1066+
<VSCodeLink
1067+
href={buildDocLink(
1068+
"features/footgun-prompting",
1069+
"prompts_advanced_system_prompt",
1070+
)}
1071+
style={{ display: "inline" }}></VSCodeLink>
1072+
),
1073+
"2": <strong />,
10521074
}}
10531075
/>
10541076
</div>
@@ -1060,9 +1082,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
10601082
<h3 className="text-vscode-foreground mb-3">{t("prompts:globalCustomInstructions.title")}</h3>
10611083

10621084
<div className="text-sm text-vscode-descriptionForeground mb-2">
1063-
{t("prompts:globalCustomInstructions.description", {
1064-
language: i18next.language,
1065-
})}
1085+
<Trans i18nKey="prompts:globalCustomInstructions.description">
1086+
<VSCodeLink
1087+
href={buildDocLink(
1088+
"features/custom-instructions#global-custom-instructions",
1089+
"prompts_global_custom_instructions",
1090+
)}
1091+
style={{ display: "inline" }}></VSCodeLink>
1092+
</Trans>
10661093
</div>
10671094
<VSCodeTextArea
10681095
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)