Add docs link for slash commands

webview-ui/src/components/chat/SlashCommandsPopover.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from "react"
 import { Zap } from "lucide-react"
+import { Trans } from "react-i18next"
 
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import { Button, Popover, PopoverContent, PopoverTrigger, StandardTooltip } from "@/components/ui"
 import { useRooPortal } from "@/components/ui/hooks/useRooPortal"
 import { cn } from "@/lib/utils"
 import { vscode } from "@/utils/vscode"
+import { buildDocLink } from "@/utils/docLinks"
 
 import { SlashCommandsList } from "./SlashCommandsList"
 
@@ -69,7 +71,19 @@ export const SlashCommandsPopover: React.FC<SlashCommandsPopoverProps> = ({ clas
 					{/* Header section */}
 					<div className="p-3 border-b border-vscode-dropdown-border">
 						<p className="m-0 text-xs text-vscode-descriptionForeground">
-							{t("chat:slashCommands.description")}
+							<Trans
+								i18nKey="chat:slashCommands.description"
+								components={{
+									DocsLink: (
+										<a
+											href={buildDocLink("features/slash-commands", "slash_commands")}
+											target="_blank"
+											rel="noopener noreferrer">
+											Docs
+										</a>
+									),
+								}}
+							/>
 						</p>
 					</div>
 

webview-ui/src/i18n/locales/en/chat.json

@@ -355,7 +355,7 @@
 	"slashCommands": {
 		"tooltip": "Manage slash commands",
 		"title": "Slash Commands",
-		"description": "Create custom slash commands for quick access to frequently used prompts and workflows.",
+		"description": "Create custom slash commands for quick access to frequently used prompts and workflows. <DocsLink>Docs</DocsLink>",
 		"globalCommands": "Global Commands",
 		"workspaceCommands": "Workspace Commands",
 		"globalCommand": "Global command",