|
| 1 | +import React, { useState, useEffect } from "react" |
| 2 | +import { Plus, Globe, Folder, Settings, SquareSlash } from "lucide-react" |
| 3 | +import { Trans } from "react-i18next" |
| 4 | + |
| 5 | +import type { Command } from "@roo/ExtensionMessage" |
| 6 | + |
| 7 | +import { useAppTranslation } from "@/i18n/TranslationContext" |
| 8 | +import { useExtensionState } from "@/context/ExtensionStateContext" |
| 9 | +import { |
| 10 | + AlertDialog, |
| 11 | + AlertDialogAction, |
| 12 | + AlertDialogCancel, |
| 13 | + AlertDialogContent, |
| 14 | + AlertDialogDescription, |
| 15 | + AlertDialogFooter, |
| 16 | + AlertDialogHeader, |
| 17 | + AlertDialogTitle, |
| 18 | + Button, |
| 19 | +} from "@/components/ui" |
| 20 | +import { vscode } from "@/utils/vscode" |
| 21 | +import { buildDocLink } from "@/utils/docLinks" |
| 22 | + |
| 23 | +import { SectionHeader } from "./SectionHeader" |
| 24 | +import { Section } from "./Section" |
| 25 | +import { SlashCommandItem } from "../chat/SlashCommandItem" |
| 26 | + |
| 27 | +export const SlashCommandsSettings: React.FC = () => { |
| 28 | + const { t } = useAppTranslation() |
| 29 | + const { commands, cwd } = useExtensionState() |
| 30 | + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false) |
| 31 | + const [commandToDelete, setCommandToDelete] = useState<Command | null>(null) |
| 32 | + const [globalNewName, setGlobalNewName] = useState("") |
| 33 | + const [workspaceNewName, setWorkspaceNewName] = useState("") |
| 34 | + |
| 35 | + // Check if we're in a workspace/project |
| 36 | + const hasWorkspace = Boolean(cwd) |
| 37 | + |
| 38 | + // Request commands when component mounts |
| 39 | + useEffect(() => { |
| 40 | + handleRefresh() |
| 41 | + }, []) |
| 42 | + |
| 43 | + const handleRefresh = () => { |
| 44 | + vscode.postMessage({ type: "requestCommands" }) |
| 45 | + } |
| 46 | + |
| 47 | + const handleDeleteClick = (command: Command) => { |
| 48 | + setCommandToDelete(command) |
| 49 | + setDeleteDialogOpen(true) |
| 50 | + } |
| 51 | + |
| 52 | + const handleDeleteConfirm = () => { |
| 53 | + if (commandToDelete) { |
| 54 | + vscode.postMessage({ |
| 55 | + type: "deleteCommand", |
| 56 | + text: commandToDelete.name, |
| 57 | + values: { source: commandToDelete.source }, |
| 58 | + }) |
| 59 | + setDeleteDialogOpen(false) |
| 60 | + setCommandToDelete(null) |
| 61 | + // Refresh the commands list after deletion |
| 62 | + setTimeout(handleRefresh, 100) |
| 63 | + } |
| 64 | + } |
| 65 | + |
| 66 | + const handleDeleteCancel = () => { |
| 67 | + setDeleteDialogOpen(false) |
| 68 | + setCommandToDelete(null) |
| 69 | + } |
| 70 | + |
| 71 | + const handleCreateCommand = (source: "global" | "project", name: string) => { |
| 72 | + if (!name.trim()) return |
| 73 | + |
| 74 | + // Append .md if not already present |
| 75 | + const fileName = name.trim().endsWith(".md") ? name.trim() : `${name.trim()}.md` |
| 76 | + |
| 77 | + vscode.postMessage({ |
| 78 | + type: "createCommand", |
| 79 | + text: fileName, |
| 80 | + values: { source }, |
| 81 | + }) |
| 82 | + |
| 83 | + // Clear the input and refresh |
| 84 | + if (source === "global") { |
| 85 | + setGlobalNewName("") |
| 86 | + } else { |
| 87 | + setWorkspaceNewName("") |
| 88 | + } |
| 89 | + setTimeout(handleRefresh, 500) |
| 90 | + } |
| 91 | + |
| 92 | + const handleCommandClick = (command: Command) => { |
| 93 | + // For now, we'll just show the command name - editing functionality can be added later |
| 94 | + // This could be enhanced to open the command file in the editor |
| 95 | + console.log(`Command clicked: ${command.name} (${command.source})`) |
| 96 | + } |
| 97 | + |
| 98 | + // Group commands by source |
| 99 | + const builtInCommands = commands?.filter((cmd) => cmd.source === "built-in") || [] |
| 100 | + const globalCommands = commands?.filter((cmd) => cmd.source === "global") || [] |
| 101 | + const projectCommands = commands?.filter((cmd) => cmd.source === "project") || [] |
| 102 | + |
| 103 | + return ( |
| 104 | + <div> |
| 105 | + <SectionHeader> |
| 106 | + <div className="flex items-center gap-2"> |
| 107 | + <SquareSlash className="w-4" /> |
| 108 | + <div>{t("settings:sections.slashCommands")}</div> |
| 109 | + </div> |
| 110 | + </SectionHeader> |
| 111 | + |
| 112 | + <Section> |
| 113 | + {/* Description section */} |
| 114 | + <div className="mb-4"> |
| 115 | + <p className="text-sm text-vscode-descriptionForeground"> |
| 116 | + <Trans |
| 117 | + i18nKey="settings:slashCommands.description" |
| 118 | + components={{ |
| 119 | + DocsLink: ( |
| 120 | + <a |
| 121 | + href={buildDocLink("features/slash-commands", "slash_commands_settings")} |
| 122 | + target="_blank" |
| 123 | + rel="noopener noreferrer" |
| 124 | + className="text-vscode-textLink-foreground hover:underline"> |
| 125 | + Docs |
| 126 | + </a> |
| 127 | + ), |
| 128 | + }} |
| 129 | + /> |
| 130 | + </p> |
| 131 | + </div> |
| 132 | + |
| 133 | + {/* Global Commands Section */} |
| 134 | + <div className="mb-6"> |
| 135 | + <div className="flex items-center gap-1.5 mb-2"> |
| 136 | + <Globe className="w-3 h-3" /> |
| 137 | + <h4 className="text-sm font-medium m-0">{t("chat:slashCommands.globalCommands")}</h4> |
| 138 | + </div> |
| 139 | + <div className="border border-vscode-panel-border rounded-md"> |
| 140 | + {globalCommands.map((command) => ( |
| 141 | + <SlashCommandItem |
| 142 | + key={`global-${command.name}`} |
| 143 | + command={command} |
| 144 | + onDelete={handleDeleteClick} |
| 145 | + onClick={handleCommandClick} |
| 146 | + /> |
| 147 | + ))} |
| 148 | + {/* New global command input */} |
| 149 | + <div className="px-4 py-2 flex items-center gap-2 hover:bg-vscode-list-hoverBackground border-t border-vscode-panel-border"> |
| 150 | + <input |
| 151 | + type="text" |
| 152 | + value={globalNewName} |
| 153 | + onChange={(e) => setGlobalNewName(e.target.value)} |
| 154 | + placeholder={t("chat:slashCommands.newGlobalCommandPlaceholder")} |
| 155 | + className="flex-1 bg-vscode-input-background text-vscode-input-foreground placeholder-vscode-input-placeholderForeground border border-vscode-input-border rounded px-2 py-1 text-sm focus:outline-none focus:border-vscode-focusBorder" |
| 156 | + onKeyDown={(e) => { |
| 157 | + if (e.key === "Enter") { |
| 158 | + handleCreateCommand("global", globalNewName) |
| 159 | + } |
| 160 | + }} |
| 161 | + /> |
| 162 | + <Button |
| 163 | + variant="ghost" |
| 164 | + size="icon" |
| 165 | + onClick={() => handleCreateCommand("global", globalNewName)} |
| 166 | + disabled={!globalNewName.trim()} |
| 167 | + className="size-6 flex items-center justify-center opacity-60 hover:opacity-100"> |
| 168 | + <Plus className="w-4 h-4" /> |
| 169 | + </Button> |
| 170 | + </div> |
| 171 | + </div> |
| 172 | + </div> |
| 173 | + |
| 174 | + {/* Workspace Commands Section - Only show if in a workspace */} |
| 175 | + {hasWorkspace && ( |
| 176 | + <div className="mb-6"> |
| 177 | + <div className="flex items-center gap-1.5 mb-2"> |
| 178 | + <Folder className="w-3 h-3" /> |
| 179 | + <h4 className="text-sm font-medium m-0">{t("chat:slashCommands.workspaceCommands")}</h4> |
| 180 | + </div> |
| 181 | + <div className="border border-vscode-panel-border rounded-md"> |
| 182 | + {projectCommands.map((command) => ( |
| 183 | + <SlashCommandItem |
| 184 | + key={`project-${command.name}`} |
| 185 | + command={command} |
| 186 | + onDelete={handleDeleteClick} |
| 187 | + onClick={handleCommandClick} |
| 188 | + /> |
| 189 | + ))} |
| 190 | + {/* New workspace command input */} |
| 191 | + <div className="px-4 py-2 flex items-center gap-2 hover:bg-vscode-list-hoverBackground border-t border-vscode-panel-border"> |
| 192 | + <input |
| 193 | + type="text" |
| 194 | + value={workspaceNewName} |
| 195 | + onChange={(e) => setWorkspaceNewName(e.target.value)} |
| 196 | + placeholder={t("chat:slashCommands.newWorkspaceCommandPlaceholder")} |
| 197 | + className="flex-1 bg-vscode-input-background text-vscode-input-foreground placeholder-vscode-input-placeholderForeground border border-vscode-input-border rounded px-2 py-1 text-sm focus:outline-none focus:border-vscode-focusBorder" |
| 198 | + onKeyDown={(e) => { |
| 199 | + if (e.key === "Enter") { |
| 200 | + handleCreateCommand("project", workspaceNewName) |
| 201 | + } |
| 202 | + }} |
| 203 | + /> |
| 204 | + <Button |
| 205 | + variant="ghost" |
| 206 | + size="icon" |
| 207 | + onClick={() => handleCreateCommand("project", workspaceNewName)} |
| 208 | + disabled={!workspaceNewName.trim()} |
| 209 | + className="size-6 flex items-center justify-center opacity-60 hover:opacity-100"> |
| 210 | + <Plus className="w-4 h-4" /> |
| 211 | + </Button> |
| 212 | + </div> |
| 213 | + </div> |
| 214 | + </div> |
| 215 | + )} |
| 216 | + |
| 217 | + {/* Built-in Commands Section */} |
| 218 | + {builtInCommands.length > 0 && ( |
| 219 | + <div className="mb-6"> |
| 220 | + <div className="flex items-center gap-1.5 mb-2"> |
| 221 | + <Settings className="w-3 h-3" /> |
| 222 | + <h4 className="text-sm font-medium m-0">{t("chat:slashCommands.builtInCommands")}</h4> |
| 223 | + </div> |
| 224 | + <div className="border border-vscode-panel-border rounded-md"> |
| 225 | + {builtInCommands.map((command) => ( |
| 226 | + <SlashCommandItem |
| 227 | + key={`built-in-${command.name}`} |
| 228 | + command={command} |
| 229 | + onDelete={handleDeleteClick} |
| 230 | + onClick={handleCommandClick} |
| 231 | + /> |
| 232 | + ))} |
| 233 | + </div> |
| 234 | + </div> |
| 235 | + )} |
| 236 | + </Section> |
| 237 | + |
| 238 | + <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}> |
| 239 | + <AlertDialogContent> |
| 240 | + <AlertDialogHeader> |
| 241 | + <AlertDialogTitle>{t("chat:slashCommands.deleteDialog.title")}</AlertDialogTitle> |
| 242 | + <AlertDialogDescription> |
| 243 | + {t("chat:slashCommands.deleteDialog.description", { name: commandToDelete?.name })} |
| 244 | + </AlertDialogDescription> |
| 245 | + </AlertDialogHeader> |
| 246 | + <AlertDialogFooter> |
| 247 | + <AlertDialogCancel onClick={handleDeleteCancel}> |
| 248 | + {t("chat:slashCommands.deleteDialog.cancel")} |
| 249 | + </AlertDialogCancel> |
| 250 | + <AlertDialogAction onClick={handleDeleteConfirm}> |
| 251 | + {t("chat:slashCommands.deleteDialog.confirm")} |
| 252 | + </AlertDialogAction> |
| 253 | + </AlertDialogFooter> |
| 254 | + </AlertDialogContent> |
| 255 | + </AlertDialog> |
| 256 | + </div> |
| 257 | + ) |
| 258 | +} |
0 commit comments