Command: remove slashes from commands (#3061)

CLOSE https://github.com/sourcegraph/cody/issues/1730

Remove slashes from command names and implemented design from
https://www.figma.com/file/jEsnzgsf0hNuJbqB9pKaGm/VS-Code---Cody---Commands-up-front-and-ChatGPT%2B%2B?type=design&node-id=1550-62492&mode=design&t=qdjbLWsl9qHq578p-4

Main Commands Menu


![image](https://github.com/sourcegraph/cody/assets/68532117/ec5c6a1b-84a8-4403-82e8-c6b51bd80967)

Custom Commands Menu


![image](https://github.com/sourcegraph/cody/assets/68532117/95552be6-11a4-47ab-8565-cd0db8267a74)


![image](https://github.com/sourcegraph/cody/assets/68532117/34e4dea5-99e0-40b8-b7a0-8676ab199373)


![image](https://github.com/sourcegraph/cody/assets/68532117/d56dc295-6ade-44e0-9b09-bec59c470eed)



## Test plan

<!-- Required. See
https://sourcegraph.com/docs/dev/background-information/testing_principles.
-->

Updated all current tests.



https://github.com/sourcegraph/cody/assets/68532117/581ef1e9-c0bc-461d-83ae-ffc03098d2fc


### Before 


![image](https://github.com/sourcegraph/cody/assets/68532117/5428e444-922c-4ea2-b75d-28741668b884)



![image](https://github.com/sourcegraph/cody/assets/68532117/f2ea3d94-18a3-4a5a-bb93-a72e326da7f9)

Author: abeatrix

lib/shared/src/commands/types.ts

@@ -17,7 +17,14 @@ export enum DefaultEditCommands {
 
 // The blueprint of a Cody Custom Command
 export interface CodyCommand {
-    slashCommand: string
+    /**
+     * @deprecated Use 'commandKey' instead.
+     */
+    slashCommand?: string
+    /**
+     * key of the command, e.g. 'smell' for Code Smell
+     */
+    key: string
     prompt: string
     description?: string
     context?: CodyCommandContext

lib/shared/src/common/platform.ts

@@ -14,3 +14,7 @@ export function isWindows(): boolean {
 
     return false // default
 }
+
+export const isPlatform = (platform: string) => process.platform === platform
+
+export const isMac = () => isPlatform('darwin')

vscode/CHANGELOG.md

@@ -15,6 +15,7 @@ This is a log of all notable changes to Cody for VS Code. [Unreleased] changes a
 - Autocomplete: Removes the latency for cached completions. [https://github.com/sourcegraph/cody/pull/3138](https://github.com/sourcegraph/cody/pull/3138)
 - Autocomplete: Enable the recent jaccard similarity improvements by default. [pull/3135](https://github.com/sourcegraph/cody/pull/3135)
 - Autocomplete: Start retrieval phase earlier to improve latency. [pull/3149](https://github.com/sourcegraph/cody/pull/3149)
+- Command: Leading slashes are removed from command names in the command menu. [pull/3061](https://github.com/sourcegraph/cody/pull/3061)
 
 ## [1.4.3]
 

vscode/package.json

@@ -515,6 +515,11 @@
                 "mac": "alt+c",
                 "when": "cody.activated"
             },
+            {
+                "command": "cody.menu.custom-commands",
+                "key": "shift+alt+c",
+                "when": "cody.activated"
+            },
             {
                 "command": "-github.copilot.generate",
                 "key": "ctrl+enter"

vscode/src/commands/CommandsController.ts

@@ -7,6 +7,7 @@ import { CommandRunner } from './services/runner'
 import type { CommandsProvider } from './services/provider'
 import type { CommandResult } from '../main'
 import { executeDefaultCommand, isDefaultChatCommand, isDefaultEditCommand } from './execute'
+import { fromSlashCommand } from './utils/common'
 
 /**
  * Handles commands execution with commands from CommandsProvider
@@ -30,16 +31,17 @@ class CommandsController implements vscode.Disposable {
      *
      * Handles prompt building and context fetching for commands.
      */
-    public async execute(text: string, args: CodyCommandArgs): Promise<CommandResult | undefined> {
-        const commandSplit = text?.trim().split(' ')
-        // The unique key for the command. e.g. /test
-        const commandKey = commandSplit[0] || text
-
+    public async execute(input: string, args: CodyCommandArgs): Promise<CommandResult | undefined> {
+        // Split the input by space to extract the command key and additional input (if any)
+        const commandSplit = input?.trim().split(' ')
+        // The unique key for the command. e.g. test, smell, explain
+        // Using fromSlashCommand to support backward compatibility with old slash commands
+        const commandKey = fromSlashCommand(commandSplit[0] || input)
         // Additional instruction that will be added to end of prompt in the custom command prompt
         // It's added at execution time to allow dynamic arguments
-        // E.g. if the command is `/edit replace dash with period`,
+        // E.g. if the command is `edit replace dash with period`,
         // the additionalInput is `replace dash with period`
-        const additionalInstruction = commandKey === text ? '' : commandSplit.slice(1).join(' ')
+        const additionalInstruction = commandKey === input ? '' : commandSplit.slice(1).join(' ')
 
         // Process default commands
         if (isDefaultChatCommand(commandKey) || isDefaultEditCommand(commandKey)) {

vscode/src/commands/index.ts

@@ -0,0 +1,81 @@
+import type { CodySidebarTreeItem } from '../services/treeViewItems'
+import { isMac } from '@sourcegraph/cody-shared/src/common/platform'
+
+const osIcon = isMac() ? '⌥' : 'Alt+'
+
+export const CodyCommandMenuItems = [
+    {
+        key: 'ask',
+        description: 'New Chat',
+        prompt: 'Start a new chat',
+        icon: 'comment',
+        command: { command: 'cody.chat.panel.new' },
+        keybinding: `${osIcon}L`,
+        mode: 'ask',
+        type: 'default',
+    },
+    {
+        key: 'edit',
+        description: 'Edit Code',
+        prompt: 'Start a code edit',
+        icon: 'wand',
+        command: { command: 'cody.command.edit-code' },
+        keybinding: `${osIcon}K`,
+        mode: 'edit',
+        type: 'default',
+    },
+    {
+        key: 'doc',
+        description: 'Document Code',
+        icon: 'book',
+        command: { command: 'cody.command.document-code' },
+        keybinding: '',
+        mode: 'edit',
+        type: 'default',
+    },
+    {
+        key: 'explain',
+        description: 'Explain Code',
+        icon: 'file-binary',
+        command: { command: 'cody.command.explain-code' },
+        keybinding: '',
+        mode: 'ask',
+        type: 'default',
+    },
+    {
+        key: 'test',
+        description: 'Generate Unit Tests',
+        icon: 'package',
+        command: { command: 'cody.command.unit-tests' },
+        keybinding: '',
+        mode: 'edit',
+        type: 'default',
+    },
+    {
+        key: 'smell',
+        description: 'Find Code Smells',
+        icon: 'checklist',
+        command: { command: 'cody.command.smell-code' },
+        keybinding: '',
+        mode: 'ask',
+        type: 'default',
+    },
+    {
+        key: 'custom',
+        description: 'Custom Commands',
+        icon: 'tools',
+        command: { command: 'cody.menu.custom-commands' },
+        keybinding: `${osIcon}⇧C`,
+        type: 'default',
+    },
+]
+
+export function getCommandTreeItems(): CodySidebarTreeItem[] {
+    return CodyCommandMenuItems.map(item => {
+        return {
+            ...item,
+            title: item.description,
+            description: item.keybinding,
+        }
+    })
+}

vscode/src/commands/menus/command-builder.ts

@@ -4,18 +4,20 @@ import type { CodyCommand } from '@sourcegraph/cody-shared'
 
 import { customPromptsContextOptions } from './items'
 import { CustomCommandType } from '@sourcegraph/cody-shared/src/commands/types'
-import { toSlashCommand } from '../utils/common'
+import { fromSlashCommand } from '../utils/common'
+import { telemetryService } from '../../services/telemetry'
+import { telemetryRecorder } from '../../services/telemetry-v2'
 
 export interface CustomCommandsBuilder {
-    slashCommand: string
+    key: string
     prompt: CodyCommand
     type: CustomCommandType
 }
 
 export class CustomCommandsBuilderMenu {
     public async start(commands: string[]): Promise<CustomCommandsBuilder | null> {
-        const slashCommand = await this.makeSlashCommand(commands)
-        if (!slashCommand) {
+        const key = await this.makeCommandKey(commands)
+        if (!key) {
             return null
         }
 
@@ -29,36 +31,37 @@ export class CustomCommandsBuilderMenu {
             return null
         }
 
-        return { slashCommand, prompt: { ...prompt, slashCommand }, type }
+        telemetryService.log('CodyVSCodeExtension:command:custom:build:executed')
+        telemetryRecorder.recordEvent('cody.command.custom.build', 'executed')
+        return { key, prompt: { ...prompt, key }, type }
     }
 
-    private async makeSlashCommand(commands: string[]): Promise<string | undefined> {
+    private async makeCommandKey(commands: string[]): Promise<string | undefined> {
         const commandSet = new Set(commands)
-        let value = await window.showInputBox({
-            title: 'New Custom Cody Command: Slash Name',
-            prompt: 'Enter the slash name of the custom command',
-            placeHolder: 'e.g. /name',
+        const value = await window.showInputBox({
+            title: 'New Custom Cody Command: Command Name',
+            prompt: 'Enter the name of the custom command.',
+            placeHolder: 'e.g. hello',
             ignoreFocusOut: true,
             validateInput: (input: string) => {
                 if (!input) {
-                    return 'Slash name cannot be empty.'
+                    return 'Command name cannot be empty.'
                 }
                 if (input.split(' ').length > 1) {
-                    return 'Slash name cannot contain spaces. Use dashes, underscores, or camelCase.'
+                    return 'Command name cannot contain spaces. Use dashes, underscores, or camelCase.'
                 }
-                if (commandSet.has(toSlashCommand(input))) {
-                    return 'A command with the slash name already exists.'
+                // Remove leading slash before checking if command already exists
+                if (commandSet.has(fromSlashCommand(input))) {
+                    return 'A command with the same name already exists.'
                 }
                 return
             },
         })
-        if (value) {
-            value = toSlashCommand(value)
-        }
+
         return value
     }
 
-    private async makePrompt(): Promise<Omit<CodyCommand, 'slashCommand'> | null> {
+    private async makePrompt(): Promise<Omit<CodyCommand, 'key'> | null> {
         const prompt = await window.showInputBox({
             title: 'New Custom Cody Command: Prompt',
             prompt: 'Enter the instructions for Cody to follow and answer.',