mirror of
https://github.com/voideditor/void
synced 2026-05-23 09:28:23 +00:00
contributing changes + styles
This commit is contained in:
Andrew
parent
6128db5c98
commit
9642af1eb8
5 changed files with 168 additions and 82 deletions
152
CONTRIBUTING.md
152
CONTRIBUTING.md
|
|
@ -1 +1,153 @@
|
|||
|
||||
# Contributing to LineMage
|
||||
|
||||
This is a guide on how to contribute to LineMage. We want to make it as easy to contribute as possible, so if you have any questions or comments please reach out via email or discord.
|
||||
|
||||
LineMage is a fork of the of [vscode](https://github.com/microsoft/vscode) repository.
|
||||
# Ways to Contribute
|
||||
|
||||
## Getting started
|
||||
|
||||
We use a [VS Code extension](https://code.visualstudio.com/api/get-started/your-first-extension) to create most of LineMage's functionality.
|
||||
Here's how you can start contributing to the extension:
|
||||
|
||||
1. Clone the repository
|
||||
|
||||
`git clone https://github.com/andrewpareles/void-editor`
|
||||
|
||||
2. Open the extension folder
|
||||
|
||||
`cd /extensions/void`
|
||||
|
||||
3. Install dependencies
|
||||
|
||||
`npm run install`
|
||||
|
||||
4. Build the project.
|
||||
|
||||
`npm run build`
|
||||
|
||||
We're using React to build the sidebar `sidebar/index.tsx` and other parts of the extension. We use this command to compile all of the react components into raw javascript and css in the `dist/...` folder so that we can use them in vscode.
|
||||
|
||||
5. Run the project by pressing `f5`.
|
||||
|
||||
This will start a new instance of VS Code with the extension enabled. If this does not work, you can press `f1 > type "Debug: Start Debugging" > press Enter > type "VS Code Extension Development"`.
|
||||
|
||||
If you would like to use AI features, you need to insert an API key. You can do that by going to `settings (ctrl + ,) > void > "Anthropic Api Key"`. The provider is chosen based on the "Which API" environment variable, and defaults to "anthropic".
|
||||
|
||||
## Editing the IDE
|
||||
|
||||
Beyond the extension, we edit parts of the IDE in cases where we need more functionality. See below for instructions on how to contribute to the extension. If you want to make a change to the entire IDE please see VS Code's [how to contribute](https://github.com/microsoft/vscode/wiki/How-to-Contribute) page, which goes over how to install dependencies and run the VS Code IDE, which works the same way as our IDE (you can often skip to the "How to Contribute" section).
|
||||
|
||||
|
||||
## Submitting a pull request
|
||||
|
||||
When you've made changes and want to submit them, please submit a pull request.
|
||||
|
||||
|
||||
|
||||
[[TODO!!!]]
|
||||
|
||||
|
||||
|
||||
|
||||
## What to work on
|
||||
|
||||
|
||||
Here are the most important topics we think you can contribute.
|
||||
|
||||
Feel free to contribute anything you like.
|
||||
|
||||
Full list [here]([[TODO!!!]])
|
||||
|
||||
More ⭐'s = more important.
|
||||
|
||||
⭐⭐⭐ Add LineMage changes to the history. When the user submits a response, or presses the apply/accept/reject buttons, we should add these events to the history and allow the user to use undo/redo on them. Right now there is unexpected behavior if the user tries to undo or redo their changes related to LineMage.
|
||||
|
||||
⭐⭐⭐ Improve diffs. We define a "diff" as a single green/red codeblock that denotes a change. Here are improvements to make:
|
||||
|
||||
1. Show deletion (-) diffs. Right now we're only showing insertion (+) diffs. We do this by highlighting all of the new code in green using a simple text decoration. We would like to instead use code from VS Code's native diffEditor to show the diffs ("inline" mode). We could also keep what we have and add red boxes of the deletions inline with the code.
|
||||
|
||||
2. Make diffs responsive to edits. When a user accepts a diff, all of the diffs below it should be updated (because they are now on different line numbers). We're not doing this, so there is a lot of unexpected behavior. We should the Diffs' ranges every time there's a change.
|
||||
|
||||
3. Implement "Diff Range". When the user makes a change (either in ctrl+k or ctrl+L) we should track the range that they changed (the "Diff Range"). All changes made inside of this range should appear as a diff. The range should disappear when all of the diffs inside of it have either been accepted or rejected.
|
||||
|
||||
⭐⭐⭐ Build Cursor-style quick edits (ctrl+k). When the user presses ctrl+k, an input box should appear inline with the code that they were selecting. This is somewhat difficult to do because an extension alone cannot do this, and it requires creating a new component in the IDE. We think you can modify vscode's built-in "codelens" or "zone widget" components, but we are open to alternatives.
|
||||
|
||||
⭐⭐⭐ Improve ctrl+L. One improvement is to make the model output diffs, instead of outputting the entire file. When the user clicks "apply" on a diff, the model should go through the entire file and apply the diff in the correct location.
|
||||
|
||||
|
||||
⭐⭐ Integrate with Ollama. We have an Ollama integration coded up in the extension, but it breaks. This is because Ollama has Node.js dependencies like 'path' and 'os' which cannot run in extensions (extensions have to be able to run in the browser). To fix this, we need to migrate LineMage's extension so that it runs natively into the VS Code editor so that we can access Node.js.
|
||||
|
||||
⭐ When user presses ctrl+l it should reset from last time.
|
||||
|
||||
⭐ Let the user accept / reject all Diffs in an entire file.
|
||||
|
||||
⭐ Allow the user to make multiple selections of code or files at once.
|
||||
|
||||
⭐ Allow user to X out of their current selection.
|
||||
|
||||
|
||||
|
||||
|
||||
## Links
|
||||
|
||||
[[TODO!!!]]
|
||||
|
||||
|
||||
- TODO list
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
### Design principles
|
||||
|
||||
- Least amount of eye movement necessary; if user presses submit, show them the message where they submitted
|
||||
|
||||
|
||||
### Ctrl+L (chat)
|
||||
|
||||
|
||||
|
||||
|
||||
### Ctrl+K (inline edits)
|
||||
|
||||
- Create a new input box that takes in the user's description.
|
||||
|
||||
- Make it appear above each.
|
||||
|
||||
- The input box should appear directly above the code selection - this requires using a Zone widget.
|
||||
|
||||
|
||||
### Core
|
||||
|
||||
- Migrate the LineMage extension to live natively in VS Code. There's initial work here at `glass.contribution.ts`.
|
||||
|
||||
- Allow access to the VS Code extension marketplace.
|
||||
|
||||
- Re-write the whole file when the user clicks "Apply" and show a gray progress indicator in the BG.
|
||||
|
||||
|
||||
|
||||
### Diffs
|
||||
|
||||
"Diffs" are the inline green/red highlights you see to approve or reject a change.
|
||||
|
||||
- Diffs are not responsive to edits right now. To make them responsive, we need to update all Diffs' ranges every time there's a change.
|
||||
|
||||
- Right now Diffs are only shown in green as a simple text decoration. We'd like to have them work better by using code from VS Code's native diffEditor ("inline" mode).
|
||||
|
||||
- **Events:** On many types of events, we should reject all the current Diffs (user submits a new chat message, clicks Apply, etc).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Ollama
|
||||
|
||||
- Ollama doesn't work now because its JS library depends on Node.js and uses imports like 'path', 'os', while extensions must be able to run in the browser. When we migrate the extension into the VS Code codebase, we'll be able to access Node.js and will uncomment the Ollama integration.
|
||||
|
||||
### Greptile
|
||||
|
||||
- Ideally we'd auto-detect -->
|
||||
|
|
|
|||
|
|
@ -1,70 +1 @@
|
|||
|
||||
# Welcome!
|
||||
|
||||
This is where we track our TODOs. Feel free to add to the list or help us knock out some bullet points. Cheers!
|
||||
|
||||
## Core
|
||||
|
||||
- Migrate the void extension to live natively in VS Code. There's initial work here at `glass.contribution.ts`.
|
||||
|
||||
- Allow access to the VS Code extension marketplace.
|
||||
|
||||
- Re-write the whole file when the user clicks "Apply" and show a gray progress indicator in the BG.
|
||||
|
||||
|
||||
|
||||
## Diffs
|
||||
|
||||
- "Diffs" are the inline green/red highlights you see to approve or reject a change.
|
||||
|
||||
- Diffs are not responsive to edits right now. To make them responsive, we need to update all Diffs' ranges every time there's a change.
|
||||
|
||||
- Right now Diffs are only shown in green as a simple text decoration. We'd like to have them work better by stealing code from VS Code's native diffEditor ("inline" mode).
|
||||
|
||||
- **Events:** On many types of event, we should reject all the current Diffs (user submits a new chat message, clicks Apply, etc).
|
||||
|
||||
|
||||
|
||||
## Ctrl+L (chat)
|
||||
|
||||
- We should let the user accept / reject all Diffs in an entire file.
|
||||
|
||||
- We should automatically select the file the user is currently in.
|
||||
|
||||
- The user should be able to make multiple selections of code/files at once.
|
||||
|
||||
|
||||
|
||||
## Ctrl+K (inline edits)
|
||||
|
||||
- Create a new input box that takes in the user's description.
|
||||
|
||||
- Make it appear above each.
|
||||
|
||||
- The input box should appear directly above the code selection - this requires using a Zone widget.
|
||||
|
||||
|
||||
|
||||
## Ollama
|
||||
|
||||
- Ollama doesn't work now because its JS library depends on Node.js and uses imports like 'path', 'os', while extensions must be able to run in the browser. When we migrate the extension into the VS Code codebase, we'll be able to access Node.js and will uncomment the Ollama integration.
|
||||
|
||||
## Greptile
|
||||
|
||||
- Ideally we'd auto-detect
|
||||
|
||||
## Design principles
|
||||
|
||||
- Least amount of eye movement necessary; if user presses submit, show them the message where they submitted
|
||||
|
||||
|
||||
# Run
|
||||
|
||||
To run this extension alone, open the repo in a new workspace, `npm run build`, and hit `F5`.
|
||||
|
||||
|
||||
## Note on using React
|
||||
|
||||
To support React, we build all our React code into native javascript build time (`npm run build`). For example, the sidebar is written in React `sidebar/index.tsx` but compiled into `dist/sidebar/index.js` and `dist/sidebar/styles.css` on build.
|
||||
|
||||
|
||||
Please see the `CONTRIBUTING.md` for information on how to contribute :)!
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
"myExtension.whichApi": {
|
||||
"type": "string",
|
||||
"default": "anthropic",
|
||||
"description": "Backend to Use (anthropic | openai | greptile | ollama)"
|
||||
"description": "Choose a model to use (anthropic | openai | greptile | ollama)"
|
||||
},
|
||||
"myExtension.anthropicApiKey": {
|
||||
"type": "string",
|
||||
|
|
|
|||
|
|
@ -117,8 +117,8 @@ export class ApprovalCodeLensProvider implements vscode.CodeLensProvider {
|
|||
for (let diff of diffs) {
|
||||
const { range, diffid, lenses: codeLenses } = diff
|
||||
|
||||
let approveLens = new vscode.CodeLens(range, { title: 'Yes', command: 'myExtension.approveDiff', arguments: [{ diffid }] })
|
||||
let discardLens = new vscode.CodeLens(range, { title: 'No', command: 'myExtension.discardDiff', arguments: [{ diffid }] })
|
||||
let approveLens = new vscode.CodeLens(range, { title: 'Accept', command: 'myExtension.approveDiff', arguments: [{ diffid }] })
|
||||
let discardLens = new vscode.CodeLens(range, { title: 'Reject', command: 'myExtension.discardDiff', arguments: [{ diffid }] })
|
||||
|
||||
codeLenses.push(discardLens, approveLens)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -251,7 +251,7 @@ const Sidebar = () => {
|
|||
<ChatBubble chatMessage={{ role: 'assistant', content: messageStream, displayContent: messageStream }} />
|
||||
</div>
|
||||
{/* chatbar */}
|
||||
<div className="p-4 border-t">
|
||||
<div className="py-4 border-t">
|
||||
{/* selection */}
|
||||
<div className="text-left">
|
||||
{/* selected files */}
|
||||
|
|
@ -263,7 +263,7 @@ const Sidebar = () => {
|
|||
</div>
|
||||
<form
|
||||
ref={formRef}
|
||||
className="flex"
|
||||
className="flex flex-row items-center rounded-md p-2 border border-gray-400 bg-[rgb(20,20,20)]"
|
||||
onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) onSubmit(e) }}
|
||||
|
||||
onSubmit={(e) => {
|
||||
|
|
@ -275,25 +275,28 @@ const Sidebar = () => {
|
|||
|
||||
<textarea
|
||||
onChange={(e) => { setInstructions(e.target.value) }}
|
||||
className="appearance-none border-none rounded-l-lg w-full py-3 px-5 text-black bg-white leading-tight focus:outline-none focus:shadow-outline resize-none overflow-y-auto transition-height duration-200 max-h-[50vh]"
|
||||
className="w-full p-2 leading-tight resize-none max-h-[50vh] overflow-hidden text-gray-100 rounded-md bg-[rgb(20,20,20)]"
|
||||
style={{ outline: '0px solid' }}
|
||||
placeholder="Ctrl+L to select"
|
||||
rows={1}
|
||||
onInput={e => { e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px'; }} // Adjust height dynamically
|
||||
onInput={e => { e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px' }} // Adjust height dynamically
|
||||
/>
|
||||
|
||||
|
||||
{/* submit button */}
|
||||
{isLoading ?
|
||||
<button
|
||||
onClick={onStop}
|
||||
className="bg-gray-500 text-white p-2 rounded-r-lg max-h-10"
|
||||
className="bg-gray-400 text-white p-2 rounded-r-lg max-h-10"
|
||||
type='button'
|
||||
>Stop</button>
|
||||
: <button
|
||||
className="bg-blue-500 text-white p-2 rounded-r-lg max-h-10"
|
||||
className="cursor-pointer hover:bg-gray-700 bg-gray-600 text-white font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
|
||||
disabled={!instructions}
|
||||
type='submit'
|
||||
>Submit
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="12" y1="19" x2="12" y2="5"></line>
|
||||
<polyline points="5 12 12 5 19 12"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Reference in a new issue