Skip to content

Commit

Permalink
Aesthetic and marketing fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
timkmecl committed Dec 12, 2022
1 parent 0bb9b2d commit 307ab92
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 12 deletions.
11 changes: 6 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
# ChatGPT Extension for VSCode
# ChatGPT extension for VSCode

This Visual Studio Code extension allows you to use the [unofficial ChatGPT API](https://github.com/transitive-bullshit/chatgpt-api) to generate natural language responses from OpenAI's [ChatGPT](https://chat.openai.com/chat) 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!

### [Marketplace](https://marketplace.visualstudio.com/items?itemName=timkmecl.chatgpt), [Github](https://github.com/timkmecl/chatgpt-vscode)

Expand Down Expand Up @@ -45,23 +46,23 @@ To use the extension, open a text editor in Visual Studio Code and open the Chat

<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.
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.
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 from the context menu:
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.
`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.
Expand Down
9 changes: 5 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "chatgpt",
"displayName": "ChatGPT: write and improve code using AI",
"description": "Extension that allows you to use OpeanAI's ChatGPT inside the IDE (unofficial)",
"version": "0.4.1",
"description": "Use ChatGPT right inside the IDE to enhance and automate your coding with AI-powered assistance (unofficial)",
"version": "0.4.1.1",
"publisher": "timkmecl",
"icon": "resources/extensionIcon.png",
"license": "MIT",
Expand All @@ -16,9 +16,10 @@
"Other"
],
"keywords": [
"copilot",
"openai",
"chatgpt",
"openai",
"gpt3",
"copilot",
"ai",
"explain",
"find bugs",
Expand Down
11 changes: 8 additions & 3 deletions src/extension.ts
Original file line number Diff line number Diff line change
Expand Up @@ -316,13 +316,18 @@ class ChatGPTViewProvider implements vscode.WebviewViewProvider {
<script src="${microlightUri}"></script>
<style>
.code {
white-space : pre;
white-space: pre;
}
.p {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
</style>
</head>
<body>
<input class="h-10 w-full text-white bg-stone-700 p-4 text-sm" type="text" placeholder="Ask ChatGPT something" id="prompt-input" />
<textare class="h-10 w-full text-white bg-stone-700 p-4 text-sm" placeholder="Ask ChatGPT something" id="prompt-input" />
<div id="response" class="pt-6 text-sm">
<div id="response" class="pt-4 text-sm">
</div>
<script src="${scriptUri}"></script>
Expand Down

0 comments on commit 307ab92

Please sign in to comment.