Pre-release polishing, docs

timkmecl · Apr 9, 2023 · 3f0f3c3 · 3f0f3c3
1 parent e52f58f
commit 3f0f3c3
Show file tree

Hide file tree

Showing 4 changed files with 703 additions and 933 deletions.
diff --git a/README.md b/README.md
@@ -1,17 +1,13 @@
-# ChatGPT extension for VSCode
+# ChatGPT and GPT4 extension for VSCode
 
 [![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/timkmecl.chatgpt)](https://marketplace.visualstudio.com/items?itemName=timkmecl.chatgpt)
 [![Visual Studio Marketplace Rating (Stars)](https://img.shields.io/visual-studio-marketplace/stars/timkmecl.chatgpt)](https://marketplace.visualstudio.com/items?itemName=timkmecl.chatgpt)
 [![Visual Studio Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/timkmecl.chatgpt)](https://marketplace.visualstudio.com/items?itemName=timkmecl.chatgpt)
 [![Github stars](https://img.shields.io/github/stars/timkmecl/chatgpt-vscode)](https://github.com/timkmecl/chatgpt-vscode)
 
-This Visual Studio Code extension allows you to use the [ChatGPT API](https://github.com/transitive-bullshit/chatgpt-api) to generate code or natural language responses from OpenAI's [ChatGPT](https://chat.openai.com/chat) to your questions, right within the editor.
+This Visual Studio Code extension allows you to use the [ChatGPT API](https://github.com/transitive-bullshit/chatgpt-api) to generate code or natural language responses from OpenAI's [ChatGPT](https://chat.openai.com/chat) or [GPT4](https://openai.com/product/gpt-4) to your questions, right within the editor.
 
 Supercharge your coding with AI-powered assistance! Automatically write new code from scratch, ask questions, get explanations, refactor code, find bugs and more 🚀✨
-
-*📢 **Extension now uses official ChatGPT API!** This however means that using the extension now spends your OpenAI account's credits (0.002$/1k tokens). If you don't have any credits on your account, you will receive an error.*
-
-*To use the free codex models try [version using GPT3](https://github.com/timkmecl/codegpt) instead ([marketplace](https://marketplace.visualstudio.com/items?itemName=timkmecl.codegpt3), [github](https://github.com/timkmecl/codegpt))*
 
 ### Links:
 
@@ -38,7 +34,7 @@ Supercharge your coding with AI-powered assistance! Automatically write new code
 
 
 
-## Installation
+## Setup
 
 To use this extension, install it from the VSCode marketplace.
 
@@ -56,17 +52,61 @@ To use this extension, you will need an API key from OpenAI. To obtain one, foll
 2. Click on the `Create new secret key` button.
 3. Copy the key and paste it into the `API Key` field in the extension settings.
 
-### Building from source (not applicable for VSCode marketplace version)
+### Settings
+
+The extension can be configured or customized by changing several settings. 
+You can choose **between ChatGPT and GPT4** by changing the `Model` setting (only if you already have access to GPT4 API). A custom API URL can also be set in the `API URL` field (probably looks something like `https://openai.xxxxxx.net/v1`, can be used to connect to a self-hosted instance of the API or a proxy).
+
+
+
+## Using the Extension
+
+To use the extension, open a text editor in Visual Studio Code and open the ChatGPT panel by clicking on the ChatGPT icon in the sidebar. This will open a panel with an input field where you can enter your prompt or question. By clicking enter, it will be sent to ChatGPT. Its response will be displayed below the input field in the sidebar (note that it may take some time for it to be calculated).
+
+<img src="examples/create.png" alt="Writing new code using chatGPT" width="500"/>
+
+You can also select a code snippet in the editor and then enter a prompt in the side panel, or right-click and select "Ask ChatGPT". The **selected code will be automatically appended** to your query when it is sent to the AI. This can be useful for generating code snippets or getting explanations for specific pieces of code.
+
+<img src="examples/explain.png" alt="Refactoring selected code using chatGPT"/>
+
+To **insert a code snippet** from the AI's response into the editor, simply click on the code block in the panel. The code will be automatically inserted at the cursor position in the active editor.
+
+<img src="examples/refactor.png" alt="chatGPT explaining selected code"/>
+
+You can select some code in the editor, right click on it and choose one of the following **shortcuts** from the context menu:
+#### Commands:
+- `Ask ChatGPT`: will provide a prompt for you to enter any query
+- `ChatGPT: Explain selection`: will explain what the selected code does
+- `ChatGPT: Refactor selection`: will try to refactor the selected code
+- `ChatGPT: Find problems`: looks for problems/errors in the selected code, fixes and explains them
+- `ChatGPT: Optimize selection`: tries to optimize the selected code
+
+`Ask ChatGPT` is also available when nothing is selected. For the other four commands, you can **customize the exact prompt** that will be sent to the AI by editing the extension settings in VSCode Preferences.
+
+
+Because ChatGPT is a conversational AI, you can ask follow-up questions to the response. The conversation context is maintained between queries, so you can ask multiple questions in a row (this can be disabled in the extension settings.). 
+If you aren't satisfied with an answer and would like to **retry the request**, click `ctrl+shift+p` and select `Retry ChatGPT request`. To **reset the conversation context**, click `ctrl+shift+p` and select `ChatGPT: Reset Conversation`.
+
+---
+
+Please note that this extension is currently a proof of concept and may have some limitations or bugs. We welcome feedback and contributions to improve the extension. Also check out [CodeGPT](https://github.com/timkmecl/codegpt) extension that uses official OpenAI API and also supports other GPT3 models.
+If you enjoy this extension, please consider [buying me a coffee ☕️](https://www.buymeacoffee.com/timkmecl) to support my work! 
+
+
+<a href="https://www.buymeacoffee.com/timkmecl" target="_blank"><img src="resources/buy-default-yellow-small.png" alt="Buy Me A Coffee" style="height: 40px" ></a>
 
-*Update: The model used in this extension was disabled. You can make it work by updating the `chatgpt` module to the newest version, however it will use GPT-3 instead of ChatGPT which means spending your OpenAI account's credits and worse performance.*
+
+
+
+## Building from source (not applicable for VSCode marketplace version)
 
 To build the extension from source, clone the repository and run `npm install` to install the dependencies. You have to change some code in `chatgpt` module because VSCode runtime does not support `fetch`. Open `node_modules/chatgpt/dist/index.js` and add the following code at the top of the file:
 
 ```js
 import fetch from 'node-fetch'
 ```
 
-Then remove the following lines (around line 15):
+Then remove the following lines (around line 20):
 
 ```js
 // src/fetch.ts
@@ -96,57 +136,22 @@ function encode(input) {
 }
 ```
 
-due to the fact that the `@dqbd/tiktoken` module is causing problems with the VSCode runtime. *If you know how to fix this, please let me know.*
+due to the fact that the `@dqbd/tiktoken` module is causing problems with the VSCode runtime. Delete `node_modules/@dqbd/tiktoken` directory as well. *If you know how to fix this, please let me know.*
 
-`node_modules/chatgpt/build/index.d.ts`
+In file `node_modules/chatgpt/build/index.d.ts`, change line 1 to
 
-first line
 ```js
 import * as Keyv from 'keyv';
 ```
 
-line 4 
+and line 4 to
+
 ```js
 type FetchFn = any;
 ```
 
 
 
-## Using the Extension
-
-To use the extension, open a text editor in Visual Studio Code and open the ChatGPT panel by clicking on the ChatGPT icon in the sidebar. This will open a panel with an input field where you can enter your prompt or question. By clicking enter, it will be sent to ChatGPT. Its response will be displayed below the input field in the sidebar (note that it may take some time for it to be calculated).
-
-<img src="examples/create.png" alt="Writing new code using chatGPT" width="500"/>
-
-You can also select a code snippet in the editor and then enter a prompt in the side panel, or right-click and select "Ask ChatGPT". The **selected code will be automatically appended** to your query when it is sent to the AI. This can be useful for generating code snippets or getting explanations for specific pieces of code.
-
-<img src="examples/explain.png" alt="Refactoring selected code using chatGPT"/>
-
-To **insert a code snippet** from the AI's response into the editor, simply click on the code block in the panel. The code will be automatically inserted at the cursor position in the active editor.
-
-<img src="examples/refactor.png" alt="chatGPT explaining selected code"/>
-
-You can select some code in the editor, right click on it and choose one of the following **shortcuts** from the context menu:
-#### Commands:
-- `Ask ChatGPT`: will provide a prompt for you to enter any query
-- `ChatGPT: Explain selection`: will explain what the selected code does
-- `ChatGPT: Refactor selection`: will try to refactor the selected code
-- `ChatGPT: Find problems`: looks for problems/errors in the selected code, fixes and explains them
-- `ChatGPT: Optimize selection`: tries to optimize the selected code
-
-`Ask ChatGPT` is also available when nothing is selected. For the other four commands, you can **customize the exact prompt** that will be sent to the AI by editing the extension settings in VSCode Preferences.
-
-
-Because ChatGPT is a conversational AI, you can ask follow-up questions to the response. The conversation context is maintained between queries, so you can ask multiple questions in a row (this can be disabled in the extension settings.). 
-If you aren't satisfied with an answer and would like to **retry the request**, click `ctrl+shift+p` and select `Retry ChatGPT request`. To **reset the conversation context**, click `ctrl+shift+p` and select `ChatGPT: Reset Conversation`.
-
----
-
-Please note that this extension is currently a proof of concept and may have some limitations or bugs. We welcome feedback and contributions to improve the extension. Also check out [CodeGPT](https://github.com/timkmecl/codegpt) extension that uses official OpenAI API and also supports other GPT3 models.
-If you enjoy this extension, please consider [buying me a coffee ☕️](https://www.buymeacoffee.com/timkmecl) to support my work! 
-
-
-<a href="https://www.buymeacoffee.com/timkmecl" target="_blank"><img src="resources/buy-default-yellow-small.png" alt="Buy Me A Coffee" style="height: 40px" ></a>
 
 
 ## Credits