Search code examples
visual-studio-codevscode-extensionsvscode-git

How do I create a custom button in the git Message field of the VS Code Source Control tab?


I am creating a VS Code extension. I want to add a custom button to the Git message field of the VS Code Source Control tab?

To be specific location, please see the screenshot below:

enter image description here

I want to add a custom button to this location. Just like GitHub Copilot did.

So my question are:

  1. How to add button to it?
  2. How can I put generated message to the "Message" field?

Solution

  • You need to use the contribSourceControlInputBoxMenu API proposal. See also its issue ticket: SourceControl - SourceControlInputBoxValueProvider API proposal #195474.

    The API proposal is current empty. At a previous point in time, it looked like this:

    /*---------------------------------------------------------------------------------------------
     *  Copyright (c) Microsoft Corporation. All rights reserved.
     *  Licensed under the MIT License. See License.txt in the project root for license information.
     *--------------------------------------------------------------------------------------------*/
    
    declare module 'vscode' {
      // https://github.com/microsoft/vscode/issues/195474
    
      export namespace scm {
          export function registerSourceControlInputBoxValueProvider(sourceControlId: string, provider: SourceControlInputBoxValueProvider): Disposable;
      }
    
      export interface SourceControlInputBoxValueProviderContext {
          readonly resourceGroupId: string;
          readonly resources: readonly Uri[];
      }
    
      export interface SourceControlInputBoxValueProvider {
          readonly label: string;
          readonly icon?: Uri | { light: Uri; dark: Uri } | ThemeIcon;
    
          provideValue(rootUri: Uri, context: SourceControlInputBoxValueProviderContext[], token: CancellationToken): ProviderResult<string | undefined>;
      }
    
    }
    

    You could take a look at the GitHub Copilot Chat extension's minified code as an example (download VSIX, rename filename extension to ".zip", unzip). In its extension manifest, it has this:

    "scm/inputBox": [
      {
        "command": "github.copilot.git.generateCommitMessage",
        "when": "scmProvider == git"
      }
    ]
    

    See also https://code.visualstudio.com/api/advanced-topics/using-proposed-api.

    When the API still existed, the way to change the value of the input box was vscode.extensions.getExtension('vscode.git')?.exports.getAPI(1).repositories[0].inputBox.value = newvalue;.

    Note that later versions of GitHub Copilot started using the scminput language instead of the scm/inputbox menu contribution point (see the github.copilot.enable setting).