Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(vscode): update in-extension documentation for 1.7.x. #2389

Merged
merged 2 commits into from
Jun 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 17 additions & 13 deletions clients/vscode/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,31 @@
[![VSCode Extension Installs](https://img.shields.io/visual-studio-marketplace/i/TabbyML.vscode-tabby)](https://marketplace.visualstudio.com/items?itemName=TabbyML.vscode-tabby)
[![Slack Community](https://shields.io/badge/Tabby-Join%20Slack-red?logo=slack)](https://links.tabbyml.com/join-slack)

Tabby is an AI coding assistant that can suggest multi-line code or full functions in real-time.
[Tabby](https://tabby.tabbyml.com/) is an open-source, self-hosted AI coding assistant designed to help you write code more efficiently.

Tabby VSCode extension is compatible with `VSCode ≥ 1.82.0`, as well as web environments like [vscode.dev](https://vscode.dev).
## Autocomplete

For more information, please check out our [Website](https://tabbyml.com/) and [GitHub](https://github.com/TabbyML/tabby).
If you encounter any problem or have any suggestion, please [open an issue](https://github.com/TabbyML/tabby/issues/new), or join our [Slack community](https://links.tabbyml.com/join-slack) for support.
Tabby suggests multi-line code completions and full functions in real-time as you write code. Give it a try in the [online playground](https://tabby.tabbyml.com/playground).

## Demo
![Autocomplete Demo](https://tabby.tabbyml.com/img/demo.gif)

Try our online demo [here](https://tabby.tabbyml.com/playground).
## Chat

![Demo](https://tabby.tabbyml.com/img/demo.gif)
Tabby can answer general coding questions and specific questions about your codebase with its chat functionality. Here are a few ways to utilize it:

- Start a session in the chat view from the activity bar.
- Select some code and use commands such as `Tabby: Explain This` to ask questions about your selection.
- Request code edits directly by using the `Tabby: Edit...` command (shortcut: `Ctrl/Cmd+I`).

## Getting Started

Once you have installed the Tabby VSCode extension, you can easily get started by following the built-in walkthrough guides. You can access the walkthrough page at any time by using the command `Tabby: Getting Started`.
1. **Setup Tabby Server**: Set up your self-hosted Tabby server and create your account following [this guide](https://tabby.tabbyml.com/docs/installation).
2. **Connect to Server**: Use the `Tabby: Connect to Server...` command in the command palette and input your Tabby server's endpoint URL and account token. Alternatively, use the [Config File](https://tabby.tabbyml.com/docs/extensions/configurations) for cross-IDE settings.

1. **Setup the Tabby server**: You can build your own self-hosted Tabby server following [this guide](https://tabby.tabbyml.com/docs/installation).
2. **Connect the extension to your Tabby server**: Use the command `Tabby: Specify API Endpoint of Tabby` to connect the extension to your Tabby server.
- **Note**: If your Tabby server requires an authentication token, a notification will be displayed, and you can set the token by following the prompt. Alternatively, you can set it in the [config file](https://tabby.tabbyml.com/docs/extensions/configurations).
That's it! You can now start using Tabby in VSCode. Use the `Tabby: Quick Start` command for a detailed interactive walkthrough.

Once the setup is complete, Tabby will automatically provide inline suggestions. You can accept the suggestions by simply pressing the `Tab` key.
## Additional Resources

If you prefer to trigger code completion manually, you can select the manual trigger option in the settings. After that, use the shortcut `Alt + \` to trigger code completion. To access the settings page, use the command `Tabby: Open Settings`.
- [Online Documentation](https://tabby.tabbyml.com/)
- [GitHub Repository](https://github.com/TabbyML/tabby/): Feel free to [Report Issues](https://github.com/TabbyML/tabby/issues/new/choose) or [Contribute](https://github.com/TabbyML/tabby/blob/main/CONTRIBUTING.md)
- [Slack Community](https://links.tabbyml.com/join-slack): Participate in discussions, seek assistance, and share your insights on Tabby.
File renamed without changes
26 changes: 26 additions & 0 deletions clients/vscode/assets/walkthroughs/chat.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Chat

**Note**: Chat features are only available when your server supports them. You need to launch the server with the chat model option enabled, for example, `--chat-model Mistral-7B`.

## Chat View

You can start a session in the chat view from the activity bar.

![Chat View](./chatView.png)

### Specific Questions about Selected Code

Select some code, open the command palette and search for command such as [Tabby: Explain This](command:tabby.chat.explainCodeBlock) to ask a question about the selected code.

![Chat View With Selected](./chatViewWithSelected.png)

## Use the Chat Feature to Edit the Code Directly

If you want to use the chat feature to edit the code directly, you can use the [Tabby: Edit...](command:tabby.chat.edit.start) command (shortcut: `Ctrl/Cmd+I`). You can input your request or select a preset command, and Tabby will start editing to meet your needs.

![Chat Edit](./chatEdit.png)

Once the editing is completed, you can select `Accept`(shortcut: `Ctrl/Cmd+Enter`) or `Discard` (shortcut: `Esc`) to deal with the changes You can also use `Esc` to stop the ongoing editing.
Note that the shortcuts require your cursor to be positioned on the header line of the editing block, and the cursor is positioned there by default when the editing is started.

![Chat Edit Completed](./chatEditCompleted.png)
3 changes: 3 additions & 0 deletions clients/vscode/assets/walkthroughs/chatEdit.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions clients/vscode/assets/walkthroughs/chatEditCompleted.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions clients/vscode/assets/walkthroughs/chatView.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions clients/vscode/assets/walkthroughs/chatViewWithSelected.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 8 additions & 11 deletions clients/vscode/assets/walkthroughs/codeCompletion.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
# Code Completion

## Basic Usage
## Autocomplete

Tabby will show inline suggestions when you stop typing, and you can accept suggestions by just pressing the `Tab` key.
Tabby suggests multi-line code completions and full functions in real-time as you write code. You can accept suggestions by simply pressing the `Tab` key.

![Demo](https://tabby.tabbyml.com/img/demo.gif)
![Autocomplete Demo](https://tabby.tabbyml.com/img/demo.gif)

## Manual Trigger
### Multiple Choice

If you select manual trigger in the [settings](command:tabby.openSettings), you can trigger code completion by pressing `Alt + \`.
To access more suggestion choices, hover over a suggestion, or press `Alt + [` or `Alt + ]` to cycle through the suggestions. There may be a slight delay as the alternative choices are generated upon your request.

## Keybindings
![Multiple Choice Demo](./multipleChoice.png)

You can select a keybinding profile in the [settings](command:tabby.openSettings), or customize your own [keybindings](command:tabby.openKeybindings).
## Manual Trigger Mode

| | Next Line | Full Completion | Next Word |
| :-------------------------------- | :-------- | :-------------- | :---------------------------------------------- |
| _vscode-style_ | - | Tab | Ctrl + RightArrow <br> Cmd + RightArrow (macOS) |
| _tabby-style_<br>_(experimental)_ | Tab | Ctrl + Tab | Ctrl + RightArrow <br> Cmd + RightArrow (macOS) |
If you prefer to use Tabby code completion in a more manual way. You can select the manual trigger mode in the [Settings](command:tabby.openSettings). This mode allows you to trigger code completion by pressing `Alt + \`.
4 changes: 4 additions & 0 deletions clients/vscode/assets/walkthroughs/commands.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# Tabby Commands

Search for Tabby commands by typing `Tabby` in the command palette.

![Commands](./commands.png)

**Note**: Commands related to chat features are only visible when your server supports them.
4 changes: 2 additions & 2 deletions clients/vscode/assets/walkthroughs/commands.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions clients/vscode/assets/walkthroughs/connectToServer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Connect to Server

**Tips**: If you are using local deployment and default port `http://localhost:8080`, you can simply skip this step.

Open the command palette (`Ctrl+Shift+P` or `Cmd+Shift+P`) and search for the command [Tabby: Connect to Server...](command:tabby.setApiEndpoint). Follow the instructions to input the Tabby server's endpoint URL and the token.

![connectToServer](./connectToServer.png)

Once the connection is established, you will see the Tabby status bar item showing checkmark.

![statusbarReady](./statusbarReady.png)

Alternatively, you can set the endpoint in the [Settings](command:tabby.openSettings).

## Cross-IDE Settings

If you are using multiple IDEs, you can use the [Config File](command:tabby.openTabbyAgentSettings) to share the settings across IDEs. Refer to the [Online Documentation](https://tabby.tabbyml.com/docs/extensions/configurations/) for more details.
14 changes: 14 additions & 0 deletions clients/vscode/assets/walkthroughs/keybindings.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Keyboard Shortcuts

## Inline Completion

You can customize keybindings for inline completion in Tabby by selecting a keybinding profile in the [Settings](command:tabby.openSettings).

| | Next Line | Full Completion | Next Word |
| :-------------------------------- | :-------- | :-------------- | :---------------------------------------------- |
| _vscode-style_ | - | Tab | Ctrl + RightArrow <br> Cmd + RightArrow (macOS) |
| _tabby-style_<br>_(experimental)_ | Tab | Ctrl + Tab | Ctrl + RightArrow <br> Cmd + RightArrow (macOS) |

## Other commands

To further customize keyboard shortcuts, you can edit them in the [Keyboard Shortcuts](command:tabby.openKeybindings).
3 changes: 3 additions & 0 deletions clients/vscode/assets/walkthroughs/multipleChoice.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 0 additions & 5 deletions clients/vscode/assets/walkthroughs/server.md

This file was deleted.

12 changes: 0 additions & 12 deletions clients/vscode/assets/walkthroughs/setApiEndpoint.md

This file was deleted.

27 changes: 27 additions & 0 deletions clients/vscode/assets/walkthroughs/setupServer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Setup Tabby Server

The Tabby VSCode extension requires a Tabby server to work, following the instructions below to install and create your account.

## Install Tabby Server

[Tabby](https://tabby.tabbyml.com/) is an open-source project that supports self-hosting.
You can choose any of the following methods to install Tabby:

- [Homebrew](https://tabby.tabbyml.com/docs/quick-start/installation/apple/) for macOS with Apple M-series chips.
- [Binary distribution](https://tabby.tabbyml.com/docs/quick-start/installation/windows/) for Windows/Linux users.
- For NVIDIA GPUs, please check your CUDA version and select the binary distribution with `cuda` version suffix.
- For other GPUs with Vulkan support, please select the binary distribution with `vulkan` suffix.
- [Docker](https://tabby.tabbyml.com/docs/quick-start/installation/docker/) if you prefer to run Tabby in a container. [NVIDIA Container Toolkit](https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/latest/install-guide.html) is strongly recommended for NVIDIA CUDA support.
- Cloud deployment
- [Hugging Face Spaces](https://tabby.tabbyml.com/docs/quick-start/installation/hugging-face/)
- [Modal](https://tabby.tabbyml.com/docs/quick-start/installation/modal/)
- [SkyPilot](https://tabby.tabbyml.com/docs/quick-start/installation/skypilot/)

## Create Your Account

Visit [http://localhost:8080/](http://localhost:8080/) (or your server address) and follow the instructions to create your account. After creating your account, you can find your token for connecting to the server.

## [Online Supports](command:tabby.openOnlineHelp)

Please refer to our [online documentation](https://tabby.tabbyml.com/) and our [Github repository](https://github.com/tabbyml/tabby) for more information.
If you encounter any problems during server setup, please join our [Slack community](https://links.tabbyml.com/join-slack-extensions) for support or [open an issue](https://github.com/TabbyML/tabby/issues/new/choose).
53 changes: 34 additions & 19 deletions clients/vscode/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@
},
{
"command": "tabby.setApiEndpoint",
"title": "Specify API Endpoint of Tabby",
"title": "Connect to Server...",
"category": "Tabby"
},
{
"command": "tabby.setApiToken",
"title": "Set API Token",
"title": "Set Token...",
"category": "Tabby"
},
{
Expand All @@ -66,12 +66,12 @@
},
{
"command": "tabby.gettingStarted",
"title": "Getting Started",
"title": "Quick Start",
"category": "Tabby"
},
{
"command": "tabby.openOnlineHelp",
"title": "Online Help",
"title": "Online Help...",
"category": "Tabby"
},
{
Expand Down Expand Up @@ -106,7 +106,7 @@
},
{
"command": "tabby.chat.edit.start",
"title": "Edit",
"title": "Edit...",
"category": "Tabby"
},
{
Expand Down Expand Up @@ -177,39 +177,55 @@
{
"id": "gettingStarted",
"title": "Getting Started with Tabby",
"description": "Set up your own AI coding assistant",
"description": "Set up Tabby and explore the features.",
"steps": [
{
"id": "getTabbyServerReady",
"title": "Get Tabby Server Ready",
"description": "The Tabby VSCode extension requires a Tabby server to work. Please follow this guide to get your Tabby server ready.",
"id": "setupServer",
"title": "Setup Tabby Server",
"description": "Follow the guide to prepare your Tabby server.",
"media": {
"markdown": "assets/walkthroughs/server.md"
"markdown": "assets/walkthroughs/setupServer.md"
}
},
{
"id": "connectToTabbyServer",
"title": "Connect to Tabby Server",
"description": "Once your Tabby server is ready, specify the server API endpoint here. \n[Specify API Endpoint](command:tabby.setApiEndpoint)",
"id": "connectToServer",
"title": "Connect to Server",
"description": "Connect the Tabby extension to your server. \n[Connect to Server](command:tabby.setApiEndpoint)",
"media": {
"markdown": "assets/walkthroughs/setApiEndpoint.md"
"markdown": "assets/walkthroughs/connectToServer.md"
}
},
{
"id": "codeCompletion",
"title": "Code Completion",
"description": "Tabby provides inline suggestions automatically by default, and you can accept suggestions by just pressing the Tab key.",
"description": "Write code more efficiently.",
"media": {
"markdown": "assets/walkthroughs/codeCompletion.md"
}
},
{
"id": "chat",
"title": "Chat",
"description": "Ask any coding questions. \n[Start Chat](command:tabby.chatView.focus)",
"media": {
"markdown": "assets/walkthroughs/chat.md"
}
},
{
"id": "commands",
"title": "Commands",
"description": "Type `>Tabby:` in command palette to list all Tabby commands. \n[Tabby commands](command:workbench.action.quickOpen?%5B%22%3ETabby%3A%22%5D)",
"description": "Explore all Tabby commands. \n[Tabby commands](command:workbench.action.quickOpen?%5B%22%3ETabby%22%5D)",
"media": {
"markdown": "assets/walkthroughs/commands.md"
}
},
{
"id": "keybindings",
"title": "Keyboard Shortcuts",
"description": "Tabby provides a set of default keyboard shortcuts, but you can also customize them. \n[Keyboard Shortcuts](command:tabby.openKeybindings)",
"media": {
"markdown": "assets/walkthroughs/keybindings.md"
}
}
]
}
Expand Down Expand Up @@ -318,7 +334,6 @@
{
"command": "tabby.chat.edit.discard",
"key": "escape",
"mac": "escape",
"when": "tabby.chatEditResolving && editorTextFocus && !editorReadonly"
}
],
Expand All @@ -327,7 +342,7 @@
{
"id": "chatView",
"title": "Tabby",
"icon": "assets/side-logo.svg"
"icon": "assets/chat.svg"
}
]
},
Expand All @@ -336,7 +351,7 @@
{
"type": "webview",
"id": "tabby.chatView",
"name": "",
"name": "Tabby",
"visibility": "visible"
}
]
Expand Down
8 changes: 6 additions & 2 deletions clients/vscode/src/Commands.ts
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,11 @@ export class Commands {
},
);
},
openOnlineHelp: () => {
openOnlineHelp: (path?: string | undefined) => {
if (typeof path === "string" && path.length > 0) {
env.openExternal(Uri.parse(`https://tabby.tabbyml.com${path}`));
return;
}
window
.showQuickPick([
{
Expand Down Expand Up @@ -171,7 +175,7 @@ export class Commands {
});
},
openKeybindings: () => {
commands.executeCommand("workbench.action.openGlobalKeybindings", "tabby.inlineCompletion");
commands.executeCommand("workbench.action.openGlobalKeybindings", "Tabby");
},
gettingStarted: () => {
commands.executeCommand("workbench.action.openWalkthrough", "TabbyML.vscode-tabby#gettingStarted");
Expand Down
8 changes: 4 additions & 4 deletions clients/vscode/src/Issues.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,9 @@ export class Issues extends EventEmitter {
}
});
} else {
window.showWarningMessage(`Cannot connect to Tabby Server.`, "Detail", "Settings").then((selection) => {
window.showWarningMessage(`Cannot connect to Tabby Server.`, "Detail...", "Settings").then((selection) => {
switch (selection) {
case "Detail":
case "Detail...":
this.showHelpMessage(name, true);
break;
case "Settings":
Expand Down Expand Up @@ -115,10 +115,10 @@ export class Issues extends EventEmitter {
});
} else {
window
.showWarningMessage("Most completion requests timed out.", "Detail", "Settings", "Don't Show Again")
.showWarningMessage("Most completion requests timed out.", "Detail...", "Settings", "Don't Show Again")
.then((selection) => {
switch (selection) {
case "Detail":
case "Detail...":
this.showHelpMessage(name, true);
break;
case "Settings":
Expand Down
Loading