hanzoai/code
2
0
Fork 0
mirror of https://github.com/hanzoai/code.git synced 2026-09-30 20:53:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

inlineDiffEdits add support for ctrl+K

Browse Source
This commit is contained in:
Andrew Pareles
2024-12-21 22:40:08 -08:00
parent 0adf56cff6
commit dcd5ff928f
9 changed files with 452 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/browser/parts/editor/editorGroupWatermark.ts
+3 -4
View File
@@ -25,6 +25,7 @@ import { IWindowOpenable } from '../../../../platform/window/common/window.js';
import { ILabelService, Verbosity } from '../../../../platform/label/common/label.js';
import { splitRecentLabel } from '../../../../base/common/labels.js';
import { IHostService } from '../../../services/host/browser/host.js';
import { VOID_OPEN_SETTINGS_ACTION_ID } from '../../../contrib/void/browser/voidSettingsPane.js';
// import { IContextKeyService } from '../../../../platform/contextkey/common/contextkey.js';
registerColor('editorWatermark.foreground', { dark: transparent(editorForeground, 0.6), light: transparent(editorForeground, 0.68), hcDark: editorForeground, hcLight: editorForeground }, localize('editorLineHighlight', 'Foreground color for the labels in the editor watermark.'));
@@ -278,17 +279,15 @@ export class EditorGroupWatermark extends Disposable {
const keys3 = this.keybindingService.lookupKeybinding('workbench.action.openGlobalKeybindings');
const button3 = append(boxBelow, $('button'));
button3.textContent = 'Change Keybindings'
button3.textContent = 'Void Settings'
const label3 = new KeybindingLabel(button3, OS, { renderUnboundKeybindings: true, ...defaultKeybindingLabelStyles });
if (keys3)
label3.set(keys3);
button3.onclick = () => {
this.commandService.executeCommand('workbench.action.openGlobalKeybindings')
this.commandService.executeCommand(VOID_OPEN_SETTINGS_ACTION_ID)
}
this.currentDisposables.add(label3);
}
};
src/vs/workbench/contrib/void/browser/inlineDiffsService.ts
+117 -131
View File
@@ -11,9 +11,9 @@ import { ICodeEditor, IOverlayWidget, IViewZone } from '../../../../editor/brows
// import { IUndoRedoService } from '../../../../platform/undoRedo/common/undoRedo.js';
import { ICodeEditorService } from '../../../../editor/browser/services/codeEditorService.js';
// import { throttle } from '../../../../base/common/decorators.js';
import { writeFileWithDiffInstructions } from './prompt/prompts.js';
import { inlineDiff_systemMessage } from './prompt/prompts.js';
import { ComputedDiff, findDiffs } from './helpers/findDiffs.js';
import { EndOfLinePreference, ITextModel } from '../../../../editor/common/model.js';
import { EndOfLinePreference, IModelDecorationOptions, ITextModel } from '../../../../editor/common/model.js';
import { IRange } from '../../../../editor/common/core/range.js';
import { registerColor } from '../../../../platform/theme/common/colorUtils.js';
import { Color, RGBA } from '../../../../base/common/color.js';
@@ -31,33 +31,24 @@ import { LLMFeatureSelection, ServiceSendLLMMessageParams } from '../../../../pl
import { ILLMMessageService } from '../../../../platform/void/common/llmMessageService.js';
const configOfBG = (color: Color) => {
return { dark: color, light: color, hcDark: color, hcLight: color, }
}
// gets converted to --vscode-void-greenBG, see void.css
const greenBG = new Color(new RGBA(155, 185, 85, .3)); // default is RGBA(155, 185, 85, .2)
registerColor('void.greenBG', {
dark: greenBG,
light: greenBG, hcDark: null, hcLight: null
}, '', true);
registerColor('void.greenBG', configOfBG(greenBG), '', true);
const redBG = new Color(new RGBA(255, 0, 0, .3)); // default is RGBA(255, 0, 0, .2)
registerColor('void.redBG', {
dark: redBG,
light: redBG, hcDark: null, hcLight: null
}, '', true);
registerColor('void.redBG', configOfBG(redBG), '', true);
const sweepBG = new Color(new RGBA(100, 100, 100, .2));
registerColor('void.sweepBG', {
dark: sweepBG,
light: sweepBG, hcDark: null, hcLight: null
}, '', true);
registerColor('void.sweepBG', configOfBG(sweepBG), '', true);
const highlightBG = new Color(new RGBA(100, 100, 100, .1));
registerColor('void.highlightBG', configOfBG(highlightBG), '', true);
const sweepIdxBG = new Color(new RGBA(100, 100, 100, .5));
registerColor('void.sweepIdxBG', {
dark: sweepIdxBG,
light: sweepIdxBG, hcDark: null, hcLight: null
}, '', true);
registerColor('void.sweepIdxBG', configOfBG(sweepIdxBG), '', true);
export type Diff = {
@@ -73,9 +64,11 @@ type DiffArea = {
originalCode: string;
startLine: number;
endLine: number;
shouldHighlight: boolean; // should visually highlight this DiffArea
_URI: URI; // typically we get the URI from model
_diffOfId: Record<string, Diff>; // diffid -> diff in this DiffArea
} & ({
_sweepState: {
isStreaming: true;
@@ -91,6 +84,7 @@ const diffAreaSnapshotKeys = [
'originalCode',
'startLine',
'endLine',
'shouldHighlight',
] as const satisfies (keyof DiffArea)[]
type DiffAreaSnapshot = Pick<DiffArea, typeof diffAreaSnapshotKeys[number]>
@@ -120,9 +114,9 @@ export const IInlineDiffsService = createDecorator<IInlineDiffsService>('inlineD
class InlineDiffsService extends Disposable implements IInlineDiffsService {
_serviceBrand: undefined;
// state of each document
removeStylesFnsOfUri: Record<string, Set<Function>> = {} // functions that remove the styles of this uri
// URI <--> model
removeStylesFnsOfURI: Record<string, Set<Function>> = {} // functions that remove the styles of this uri
diffAreasOfURI: Record<string, Set<string>> = {}
diffAreaOfId: Record<string, DiffArea> = {};
@@ -131,16 +125,6 @@ class InlineDiffsService extends Disposable implements IInlineDiffsService {
_diffareaidPool = 0 // each diffarea has an id
_diffidPool = 0 // each diff has an id
/*
Picture of all the data structures:
() -modelid-> {originalFileStr, Set(diffareaid), state}
^ |
\________________ diffareaid -> diffarea -> diff[]
^ |
\____ diff
*/
constructor(
// @IHistoryService private readonly _historyService: IHistoryService, // history service is the history of pressing alt left/right
@ICodeEditorService private readonly _editorService: ICodeEditorService,
@@ -156,8 +140,8 @@ class InlineDiffsService extends Disposable implements IInlineDiffsService {
if (!(model.uri.fsPath in this.diffAreasOfURI)) {
this.diffAreasOfURI[model.uri.fsPath] = new Set();
}
if (!(model.uri.fsPath in this.removeStylesFnsOfUri)) {
this.removeStylesFnsOfUri[model.uri.fsPath] = new Set();
if (!(model.uri.fsPath in this.removeStylesFnsOfURI)) {
this.removeStylesFnsOfURI[model.uri.fsPath] = new Set();
}
// when the user types, realign diff areas and re-render them
@@ -185,7 +169,7 @@ class InlineDiffsService extends Disposable implements IInlineDiffsService {
const uri = editor.getModel()?.uri ?? null
if (uri) this._refreshDiffsInURI(uri)
// called when the user switches tabs (typically there's only 1 editor on the screen, make sure you understand this)
// called when the user switches tabs (typically there's only 1 editor on the screen, it switches between models, make sure you understand this)
this._register(editor.onDidChangeModel((e) => {
if (e.oldModelUrl) this._refreshDiffsInURI(e.oldModelUrl)
if (e.newModelUrl) this._refreshDiffsInURI(e.newModelUrl)
@@ -202,51 +186,46 @@ class InlineDiffsService extends Disposable implements IInlineDiffsService {
private _addSweepStylesToURI = (uri: URI, sweepLine: number, endLine: number) => {
const decorationIds: (string | null)[] = []
const model = this._getModel(uri)
// highlight the region
private _addLineDecoration = (model: ITextModel | null, startLine: number, endLine: number, className: string, options?: Partial<IModelDecorationOptions>) => {
if (model === null) return
// sweepLine ... sweepLine
decorationIds.push(
model.changeDecorations(accessor => accessor.addDecoration(
{ startLineNumber: sweepLine, startColumn: 1, endLineNumber: sweepLine, endColumn: Number.MAX_SAFE_INTEGER },
{
className: 'void-sweepIdxBG',
description: 'void-sweepIdxBG',
isWholeLine: true
}))
)
// sweepLine+1 ... endLine
decorationIds.push(
model.changeDecorations(accessor => accessor.addDecoration(
{ startLineNumber: sweepLine + 1, startColumn: 1, endLineNumber: endLine, endColumn: Number.MAX_SAFE_INTEGER },
{
className: 'void-sweepBG',
description: 'void-sweepBG',
isWholeLine: true
}))
)
const disposeSweepStyles = () => {
for (const id of decorationIds) {
if (id) model.changeDecorations(accessor => accessor.removeDecoration(id))
}
const id = model.changeDecorations(accessor => accessor.addDecoration(
{ startLineNumber: startLine, startColumn: 1, endLineNumber: endLine, endColumn: Number.MAX_SAFE_INTEGER },
{
className: className,
description: className,
isWholeLine: true,
...options
}))
const disposeHighlight = () => {
if (id) model.changeDecorations(accessor => accessor.removeDecoration(id))
}
return disposeSweepStyles
return disposeHighlight
}
private _addDiffAreaStylesToURI = (uri: URI) => {
const model = this._getModel(uri)
for (const diffareaid of this.diffAreasOfURI[uri.fsPath]) {
const diffArea = this.diffAreaOfId[diffareaid]
// add sweep styles to the diffArea
if (diffArea._sweepState.isStreaming) {
// sweepLine ... sweepLine
const fn1 = this._addLineDecoration(model, diffArea._sweepState.line, diffArea._sweepState.line, 'void-sweepIdxBG')
// sweepLine+1 ... endLine
const fn2 = this._addLineDecoration(model, diffArea._sweepState.line + 1, diffArea.endLine, 'void-sweepBG')
this.removeStylesFnsOfURI[uri.fsPath].add(() => { fn1?.(); fn2?.(); })
}
// highlight the diffArea
if (diffArea.shouldHighlight) {
const fn = this._addLineDecoration(model, diffArea.startLine, diffArea.endLine, 'void-highlightBG')
this.removeStylesFnsOfURI[uri.fsPath].add(() => fn?.());
}
}
}
private _addDiffStylesToEditor = (editor: ICodeEditor, diff: Diff) => {
const { type, diffid } = diff
@@ -254,57 +233,48 @@ class InlineDiffsService extends Disposable implements IInlineDiffsService {
const disposeInThisEditorFns: (() => void)[] = []
// green decoration and minimap decoration
editor.changeDecorations(accessor => {
if (type === 'deletion') return;
const greenRange = { startLineNumber: diff.startLine, startColumn: 1, endLineNumber: diff.endLine, endColumn: Number.MAX_SAFE_INTEGER, } // 1-indexed
const decorationId = accessor.addDecoration(greenRange, {
className: 'void-greenBG', // .monaco-editor .line-insert
description: 'Void added this code',
isWholeLine: true,
minimap: {
color: { id: 'minimapGutter.addedBackground' },
position: 2
},
overviewRuler: {
color: { id: 'editorOverviewRuler.addedForeground' },
position: 7
}
if (type !== 'deletion') {
const fn = this._addLineDecoration(editor.getModel(), diff.startLine, diff.endLine, 'void-greenBG', {
minimap: { color: { id: 'minimapGutter.addedBackground' }, position: 2 },
overviewRuler: { color: { id: 'editorOverviewRuler.addedForeground' }, position: 7 }
})
disposeInThisEditorFns.push(() => { editor.changeDecorations(accessor => { if (decorationId) accessor.removeDecoration(decorationId) }) })
})
disposeInThisEditorFns.push(() => { fn?.() })
}
// red in a view zone
editor.changeViewZones(accessor => {
if (type === 'insertion') return;
if (type !== 'insertion') {
editor.changeViewZones(accessor => {
const domNode = document.createElement('div');
domNode.className = 'void-redBG'
const domNode = document.createElement('div');
domNode.className = 'void-redBG'
const renderOptions = RenderOptions.fromEditor(editor);
// applyFontInfo(domNode, renderOptions.fontInfo)
const renderOptions = RenderOptions.fromEditor(editor);
// applyFontInfo(domNode, renderOptions.fontInfo)
// Compute view-lines based on redText
const redText = diff.originalCode
const lines = redText.split('\n');
const lineTokens = lines.map(line => LineTokens.createFromTextAndMetadata([{ text: line, metadata: 0 }], this._langService.languageIdCodec));
const source = new LineSource(lineTokens, lines.map(() => null), false, false)
const result = renderLines(source, renderOptions, [], domNode);
// Compute view-lines based on redText
const redText = diff.originalCode
const lines = redText.split('\n');
const lineTokens = lines.map(line => LineTokens.createFromTextAndMetadata([{ text: line, metadata: 0 }], this._langService.languageIdCodec));
const source = new LineSource(lineTokens, lines.map(() => null), false, false)
const result = renderLines(source, renderOptions, [], domNode);
const viewZone: IViewZone = {
// afterLineNumber: computedDiff.startLine - 1,
afterLineNumber: type === 'edit' ? diff.endLine : diff.startLine - 1,
heightInLines: result.heightInLines,
minWidthInPx: result.minWidthInPx,
domNode: domNode,
marginDomNode: document.createElement('div'), // displayed to left
suppressMouseDown: true,
};
const viewZone: IViewZone = {
// afterLineNumber: computedDiff.startLine - 1,
afterLineNumber: type === 'edit' ? diff.endLine : diff.startLine - 1,
heightInLines: result.heightInLines,
minWidthInPx: result.minWidthInPx,
domNode: domNode,
marginDomNode: document.createElement('div'), // displayed to left
suppressMouseDown: true,
};
const zoneId = accessor.addZone(viewZone)
disposeInThisEditorFns.push(() => { editor.changeViewZones(accessor => { if (zoneId) accessor.removeZone(zoneId) }) })
const zoneId = accessor.addZone(viewZone)
disposeInThisEditorFns.push(() => { editor.changeViewZones(accessor => { if (zoneId) accessor.removeZone(zoneId) }) })
});
}
});
// Accept | Reject widget
const buttonsWidget = new AcceptRejectWidget({
@@ -440,10 +410,10 @@ class InlineDiffsService extends Disposable implements IInlineDiffsService {
const diffArea = this.diffAreaOfId[diffareaid]
this._deleteDiffs(diffArea)
}
for (const removeStyleFn of this.removeStylesFnsOfUri[uri.fsPath]) {
for (const removeStyleFn of this.removeStylesFnsOfURI[uri.fsPath]) {
removeStyleFn()
}
this.removeStylesFnsOfUri[uri.fsPath].clear()
this.removeStylesFnsOfURI[uri.fsPath].clear()
}
@@ -552,17 +522,15 @@ class InlineDiffsService extends Disposable implements IInlineDiffsService {
for (let editor of editors) {
const fn = this._addDiffStylesToEditor(editor, newDiff)
this.removeStylesFnsOfUri[uri.fsPath].add(() => fn())
this.removeStylesFnsOfURI[uri.fsPath].add(() => fn())
}
this.diffOfId[diffid] = newDiff
diffArea._diffOfId[diffid] = newDiff
}
if (diffArea._sweepState.isStreaming) {
const fn = this._addSweepStylesToURI(uri, diffArea._sweepState.line, diffArea.endLine)
this.removeStylesFnsOfUri[uri.fsPath].add(() => fn?.())
}
// update styles on this DiffArea
this._addDiffAreaStylesToURI(uri)
}
@@ -674,6 +642,7 @@ class InlineDiffsService extends Disposable implements IInlineDiffsService {
originalCode: originalCode,
startLine: beginLine,
endLine: endLine, // starts out the same as the current file
shouldHighlight: false,
_URI: uri,
_sweepState: {
isStreaming: true,
@@ -710,7 +679,7 @@ Please finish writing the new file by applying the diff to the original file. Re
const object: ServiceSendLLMMessageParams = {
logging: { loggingName: 'streamChunk' },
messages: [
{ role: 'system', content: writeFileWithDiffInstructions, },
{ role: 'system', content: inlineDiff_systemMessage, },
// TODO include more context too
{ role: 'user', content: promptContent, }
],
@@ -772,6 +741,29 @@ Please finish writing the new file by applying the diff to the original file. Re
addDiffArea({ uri, startLine, endLine, originalCode }: { uri: URI, startLine: number, endLine: number, originalCode: string }) {
const diffareaid = this._diffareaidPool++
const diffArea: DiffArea = {
diffareaid: diffareaid,
originalCode,
startLine,
endLine,
shouldHighlight: true,
_URI: uri,
_sweepState: {
isStreaming: false,
line: null,
},
_diffOfId: {},
}
this.diffAreasOfURI[uri.fsPath].add(diffArea.diffareaid.toString())
this.diffAreaOfId[diffArea.diffareaid] = diffArea
this._refreshDiffsInURI(uri)
}
@@ -1002,9 +994,3 @@ class AcceptRejectWidget extends Widget implements IOverlayWidget {
}
src/vs/workbench/contrib/void/browser/media/void.css
+4
View File
@@ -11,6 +11,10 @@
background-color: var(--vscode-void-sweepBG);
}
.void-highlightBG {
background-color: var(--vscode-void-highlightBG);
}
.void-greenBG {
background-color: var(--vscode-void-greenBG);
}
src/vs/workbench/contrib/void/browser/prompt/prompts.ts
+319 -313
View File
@@ -6,33 +6,7 @@
import { CodeSelection } from '../threadHistoryService.js';
const stringifySelections = (selections: CodeSelection[]) => {
return selections.map(({ fileURI, content, selectionStr }) =>
`\
File: ${fileURI.fsPath}
\`\`\`
${content // this was the enite file which is foolish
}
\`\`\`${selectionStr === null ? '' : `
Selection: ${selectionStr}`}
`).join('\n')
}
export const generateCtrlLPrompt = (instructions: string, selections: CodeSelection[] | null) => {
let str = '';
if (selections && selections.length > 0) {
str += stringifySelections(selections);
str += `Please edit the selected code following these instructions:\n`
}
str += `${instructions}`;
return str;
};
export const ctrlLSystem = `\
export const chat_systemMessage = `\
You are a coding assistant. You are given a list of relevant files \`files\`, a selection that the user is making \`selection\`, and instructions to follow \`instructions\`.
Please edit the selected file following the user's instructions (or, if appropriate, answer their question instead).
@@ -119,301 +93,38 @@ Store Result: After computing fib(n), the result is stored in memo for future re
## END EXAMPLES\
`
export const generateCtrlKPrompt = ({ selection, prefix, suffix, instructions, }: { selection: string, prefix: string, suffix: string, instructions: string, }) => `\
Here is the user's original selection:
const stringifySelections = (selections: CodeSelection[]) => {
return selections.map(({ fileURI, content, selectionStr }) =>
`\
File: ${fileURI.fsPath}
\`\`\`
<MID>${selection}</MID>
\`\`\`
The user wants to apply the following instructions to the selection:
${instructions}
Please rewrite the selection following the user's instructions.
Instructions to follow:
1. Follow the user's instructions
2. You may ONLY CHANGE the selection, and nothing else in the file
3. Make sure all brackets in the new selection are balanced the same was as in the original selection
3. Be careful not to duplicate or remove variables, comments, or other syntax by mistake
Complete the following:
\`\`\`
<PRE>${prefix}</PRE>
<SUF>${suffix}</SUF>
<MID>`;
export const generateDiffInstructions = `
You are a coding assistant. You are given a list of relevant files \`files\`, a selection that the user is making \`selection\`, and instructions to follow \`instructions\`.
Please edit the selected file following the user's instructions (or, if appropriate, answer their question instead).
All changes made to files must be outputted in unified diff format.
Unified diff format instructions:
1. Each diff must begin with \`\`\`@@ ... @@\`\`\`.
2. Each line must start with a \`+\` or \`-\` or \` \` symbol.
3. Make diffs more than a few lines.
4. Make high-level diffs rather than many one-line diffs.
Here's an example of unified diff format:
\`\`\`
@@ ... @@
-def factorial(n):
- if n == 0:
- return 1
- else:
- return n * factorial(n-1)
+def factorial(number):
+ if number == 0:
+ return 1
+ else:
+ return number * factorial(number-1)
\`\`\`
Please create high-level diffs where you group edits together if they are near each other, like in the above example. Another way to represent the above example is to make many small line edits. However, this is less preferred, because the edits are not high-level. The edits are close together and should be grouped:
\`\`\`
@@ ... @@ # This is less preferred because edits are close together and should be grouped:
-def factorial(n):
+def factorial(number):
- if n == 0:
+ if number == 0:
return 1
else:
- return n * factorial(n-1)
+ return number * factorial(number-1)
\`\`\`
# Example 1:
FILES
selected file \`test.ts\`:
\`\`\`
x = 1
{{selection}}
z = 3
\`\`\`
SELECTION
\`\`\`const y = 2\`\`\`
INSTRUCTIONS
\`\`\`y = 3\`\`\`
EXPECTED RESULT
We should change the selection from \`\`\`y = 2\`\`\` to \`\`\`y = 3\`\`\`.
\`\`\`
@@ ... @@
-x = 1
-
-y = 2
+x = 1
+
+y = 3
\`\`\`
# Example 2:
FILES
selected file \`Sidebar.tsx\`:
\`\`\`
import React from 'react';
import styles from './Sidebar.module.css';
interface SidebarProps {
items: { label: string; href: string }[];
onItemSelect?: (label: string) => void;
onExtraButtonClick?: () => void;
${content // this was the enite file which is foolish
}
\`\`\`${selectionStr === null ? '' : `
Selection: ${selectionStr}`}
`).join('\n')
}
const Sidebar: React.FC<SidebarProps> = ({ items, onItemSelect, onExtraButtonClick }) => {
return (
<div className={styles.sidebar}>
<ul>
{items.map((item, index) => (
<li key={index}>
{{selection}}
className={styles.sidebarButton}
onClick={() => onItemSelect?.(item.label)}
>
{item.label}
</button>
</li>
))}
</ul>
<button className={styles.extraButton} onClick={onExtraButtonClick}>
Extra Action
</button>
</div>
);
export const chat_prompt = (instructions: string, selections: CodeSelection[] | null) => {
let str = '';
if (selections && selections.length > 0) {
str += stringifySelections(selections);
str += `Please edit the selected code following these instructions:\n`
}
str += `${instructions}`;
return str;
};
export default Sidebar;
\`\`\`
SELECTION
\`\`\` <button\`\`\`
INSTRUCTIONS
\`\`\`make all the buttons like this into divs\`\`\`
EXPECTED OUTPUT
We should change all the buttons like the one selected into a div component. Here is the change:
\`\`\`
@@ ... @@
-<div className={styles.sidebar}>
-<ul>
- {items.map((item, index) => (
- <li key={index}>
- <button
- className={styles.sidebarButton}
- onClick={() => onItemSelect?.(item.label)}
- >
- {item.label}
- </button>
- </li>
- ))}
-</ul>
-<button className={styles.extraButton} onClick={onExtraButtonClick}>
- Extra Action
-</button>
-</div>
+<div className={styles.sidebar}>
+<ul>
+ {items.map((item, index) => (
+ <li key={index}>
+ <div
+ className={styles.sidebarButton}
+ onClick={() => onItemSelect?.(item.label)}
+ >
+ {item.label}
+ </div>
+ </li>
+ ))}
+</ul>
+<div className={styles.extraButton} onClick={onExtraButtonClick}>
+ Extra Action
+</div>
+</div>
\`\`\`
`;
export const searchDiffChunkInstructions = `
You are a coding assistant that applies a diff to a file. You are given a diff \`diff\`, a list of files \`files\` to apply the diff to, and a selection \`selection\` that you are currently considering in the file.
Determine whether you should modify ANY PART of the selection \`selection\` following the \`diff\`. Return \`true\` if you should modify any part of the selection, and \`false\` if you should not modify any part of it.
# Example 1:
FILES
selected file \`Sidebar.tsx\`:
\`\`\`
import React from 'react';
import styles from './Sidebar.module.css';
interface SidebarProps {
items: { label: string; href: string }[];
onItemSelect?: (label: string) => void;
onExtraButtonClick?: () => void;
}
const Sidebar: React.FC<SidebarProps> = ({ items, onItemSelect, onExtraButtonClick }) => {
return (
<div className={styles.sidebar}>
<ul>
{items.map((item, index) => (
<li key={index}>
<button
className={styles.sidebarButton}
onClick={() => onItemSelect?.(item.label)}
>
{item.label}
</button>
</li>
))}
</ul>
<button className={styles.extraButton} onClick={onExtraButtonClick}>
Extra Action
</button>
</div>
);
};
export default Sidebar;
\`\`\`
DIFF
\`\`\`
@@ ... @@
-<div className={styles.sidebar}>
-<ul>
- {items.map((item, index) => (
- <li key={index}>
- <button
- className={styles.sidebarButton}
- onClick={() => onItemSelect?.(item.label)}
- >
- {item.label}
- </button>
- </li>
- ))}
-</ul>
-<button className={styles.extraButton} onClick={onExtraButtonClick}>
- Extra Action
-</button>
-</div>
+<div className={styles.sidebar}>
+<ul>
+ {items.map((item, index) => (
+ <li key={index}>
+ <div
+ className={styles.sidebarButton}
+ onClick={() => onItemSelect?.(item.label)}
+ >
+ {item.label}
+ </div>
+ </li>
+ ))}
+</ul>
+<div className={styles.extraButton} onClick={onExtraButtonClick}>
+ Extra Action
+</div>
+</div>
\`\`\`
SELECTION
\`\`\`
import React from 'react';
import styles from './Sidebar.module.css';
interface SidebarProps {
items: { label: string; href: string }[];
onItemSelect?: (label: string) => void;
onExtraButtonClick?: () => void;
}
const Sidebar: React.FC<SidebarProps> = ({ items, onItemSelect, onExtraButtonClick }) => {
return (
<div className={styles.sidebar}>
<ul>
{items.map((item, index) => (
\`\`\`
RESULT
The output should be \`true\` because the diff begins on the line with \`<div className={styles.sidebar}>\` and this line is present in the selection.
OUTPUT
\`true\`
`
export const writeFileWithDiffInstructions = `
export const inlineDiff_systemMessage = `
You are a coding assistant that applies a diff to a file. You are given the original file \`original_file\`, a diff \`diff\`, and a new file that you are applying the diff to \`new_file\`.
Please finish writing the new file \`new_file\`, according to the diff \`diff\`. You must completely re-write the whole file, using the diff.
@@ -543,3 +254,298 @@ export default Sidebar;\`\`\`
export const generateCtrlKPrompt = ({ selection, prefix, suffix, instructions, }: { selection: string, prefix: string, suffix: string, instructions: string, }) => `\
Here is the user's original selection:
\`\`\`
<MID>${selection}</MID>
\`\`\`
The user wants to apply the following instructions to the selection:
${instructions}
Please rewrite the selection following the user's instructions.
Instructions to follow:
1. Follow the user's instructions
2. You may ONLY CHANGE the selection, and nothing else in the file
3. Make sure all brackets in the new selection are balanced the same was as in the original selection
3. Be careful not to duplicate or remove variables, comments, or other syntax by mistake
Complete the following:
\`\`\`
<PRE>${prefix}</PRE>
<SUF>${suffix}</SUF>
<MID>`;
// export const searchDiffChunkInstructions = `
// You are a coding assistant that applies a diff to a file. You are given a diff \`diff\`, a list of files \`files\` to apply the diff to, and a selection \`selection\` that you are currently considering in the file.
// Determine whether you should modify ANY PART of the selection \`selection\` following the \`diff\`. Return \`true\` if you should modify any part of the selection, and \`false\` if you should not modify any part of it.
// # Example 1:
// FILES
// selected file \`Sidebar.tsx\`:
// \`\`\`
// import React from 'react';
// import styles from './Sidebar.module.css';
// interface SidebarProps {
// items: { label: string; href: string }[];
// onItemSelect?: (label: string) => void;
// onExtraButtonClick?: () => void;
// }
// const Sidebar: React.FC<SidebarProps> = ({ items, onItemSelect, onExtraButtonClick }) => {
// return (
// <div className={styles.sidebar}>
// <ul>
// {items.map((item, index) => (
// <li key={index}>
// <button
// className={styles.sidebarButton}
// onClick={() => onItemSelect?.(item.label)}
// >
// {item.label}
// </button>
// </li>
// ))}
// </ul>
// <button className={styles.extraButton} onClick={onExtraButtonClick}>
// Extra Action
// </button>
// </div>
// );
// };
// export default Sidebar;
// \`\`\`
// DIFF
// \`\`\`
// @@ ... @@
// -<div className={styles.sidebar}>
// -<ul>
// - {items.map((item, index) => (
// - <li key={index}>
// - <button
// - className={styles.sidebarButton}
// - onClick={() => onItemSelect?.(item.label)}
// - >
// - {item.label}
// - </button>
// - </li>
// - ))}
// -</ul>
// -<button className={styles.extraButton} onClick={onExtraButtonClick}>
// - Extra Action
// -</button>
// -</div>
// +<div className={styles.sidebar}>
// +<ul>
// + {items.map((item, index) => (
// + <li key={index}>
// + <div
// + className={styles.sidebarButton}
// + onClick={() => onItemSelect?.(item.label)}
// + >
// + {item.label}
// + </div>
// + </li>
// + ))}
// +</ul>
// +<div className={styles.extraButton} onClick={onExtraButtonClick}>
// + Extra Action
// +</div>
// +</div>
// \`\`\`
// SELECTION
// \`\`\`
// import React from 'react';
// import styles from './Sidebar.module.css';
// interface SidebarProps {
// items: { label: string; href: string }[];
// onItemSelect?: (label: string) => void;
// onExtraButtonClick?: () => void;
// }
// const Sidebar: React.FC<SidebarProps> = ({ items, onItemSelect, onExtraButtonClick }) => {
// return (
// <div className={styles.sidebar}>
// <ul>
// {items.map((item, index) => (
// \`\`\`
// RESULT
// The output should be \`true\` because the diff begins on the line with \`<div className={styles.sidebar}>\` and this line is present in the selection.
// OUTPUT
// \`true\`
// `
// export const generateDiffInstructions = `
// You are a coding assistant. You are given a list of relevant files \`files\`, a selection that the user is making \`selection\`, and instructions to follow \`instructions\`.
// Please edit the selected file following the user's instructions (or, if appropriate, answer their question instead).
// All changes made to files must be outputted in unified diff format.
// Unified diff format instructions:
// 1. Each diff must begin with \`\`\`@@ ... @@\`\`\`.
// 2. Each line must start with a \`+\` or \`-\` or \` \` symbol.
// 3. Make diffs more than a few lines.
// 4. Make high-level diffs rather than many one-line diffs.
// Here's an example of unified diff format:
// \`\`\`
// @@ ... @@
// -def factorial(n):
// - if n == 0:
// - return 1
// - else:
// - return n * factorial(n-1)
// +def factorial(number):
// + if number == 0:
// + return 1
// + else:
// + return number * factorial(number-1)
// \`\`\`
// Please create high-level diffs where you group edits together if they are near each other, like in the above example. Another way to represent the above example is to make many small line edits. However, this is less preferred, because the edits are not high-level. The edits are close together and should be grouped:
// \`\`\`
// @@ ... @@ # This is less preferred because edits are close together and should be grouped:
// -def factorial(n):
// +def factorial(number):
// - if n == 0:
// + if number == 0:
// return 1
// else:
// - return n * factorial(n-1)
// + return number * factorial(number-1)
// \`\`\`
// # Example 1:
// FILES
// selected file \`test.ts\`:
// \`\`\`
// x = 1
// {{selection}}
// z = 3
// \`\`\`
// SELECTION
// \`\`\`const y = 2\`\`\`
// INSTRUCTIONS
// \`\`\`y = 3\`\`\`
// EXPECTED RESULT
// We should change the selection from \`\`\`y = 2\`\`\` to \`\`\`y = 3\`\`\`.
// \`\`\`
// @@ ... @@
// -x = 1
// -
// -y = 2
// +x = 1
// +
// +y = 3
// \`\`\`
// # Example 2:
// FILES
// selected file \`Sidebar.tsx\`:
// \`\`\`
// import React from 'react';
// import styles from './Sidebar.module.css';
// interface SidebarProps {
// items: { label: string; href: string }[];
// onItemSelect?: (label: string) => void;
// onExtraButtonClick?: () => void;
// }
// const Sidebar: React.FC<SidebarProps> = ({ items, onItemSelect, onExtraButtonClick }) => {
// return (
// <div className={styles.sidebar}>
// <ul>
// {items.map((item, index) => (
// <li key={index}>
// {{selection}}
// className={styles.sidebarButton}
// onClick={() => onItemSelect?.(item.label)}
// >
// {item.label}
// </button>
// </li>
// ))}
// </ul>
// <button className={styles.extraButton} onClick={onExtraButtonClick}>
// Extra Action
// </button>
// </div>
// );
// };
// export default Sidebar;
// \`\`\`
// SELECTION
// \`\`\` <button\`\`\`
// INSTRUCTIONS
// \`\`\`make all the buttons like this into divs\`\`\`
// EXPECTED OUTPUT
// We should change all the buttons like the one selected into a div component. Here is the change:
// \`\`\`
// @@ ... @@
// -<div className={styles.sidebar}>
// -<ul>
// - {items.map((item, index) => (
// - <li key={index}>
// - <button
// - className={styles.sidebarButton}
// - onClick={() => onItemSelect?.(item.label)}
// - >
// - {item.label}
// - </button>
// - </li>
// - ))}
// -</ul>
// -<button className={styles.extraButton} onClick={onExtraButtonClick}>
// - Extra Action
// -</button>
// -</div>
// +<div className={styles.sidebar}>
// +<ul>
// + {items.map((item, index) => (
// + <li key={index}>
// + <div
// + className={styles.sidebarButton}
// + onClick={() => onItemSelect?.(item.label)}
// + >
// + {item.label}
// + </div>
// + </li>
// + ))}
// +</ul>
// +<div className={styles.extraButton} onClick={onExtraButtonClick}>
// + Extra Action
// +</div>
// +</div>
// \`\`\`
// `;
src/vs/workbench/contrib/void/browser/quickEditStateService.ts
-10
View File
@@ -45,7 +45,6 @@ class VoidQuickEditStateService extends Disposable implements IQuickEditStateSer
state: VoidQuickEditState
constructor(
// @IViewsService private readonly _viewsService: IViewsService,
) {
super()
@@ -55,10 +54,6 @@ class VoidQuickEditStateService extends Disposable implements IQuickEditStateSer
setState(newState: Partial<VoidQuickEditState>) {
// make sure view is open if the tab changes
// if ('currentTab' in newState) {
// this.addQuickEdit()
// }
this.state = { ...this.state, ...newState }
this._onDidChangeState.fire()
@@ -72,11 +67,6 @@ class VoidQuickEditStateService extends Disposable implements IQuickEditStateSer
this._onBlurChat.fire()
}
// addQuickEdit() {
// this._viewsService.openViewContainer(VOID_VIEW_CONTAINER_ID);
// this._viewsService.openView(VOID_VIEW_ID);
// }
}
registerSingleton(IQuickEditStateService, VoidQuickEditStateService, InstantiationType.Eager);
src/vs/workbench/contrib/void/browser/react/src/ctrl-k-tsx/CtrlKChat.tsx
+1 -14
View File
@@ -1,6 +1,6 @@
import React, { FormEvent, useCallback, useRef, useState } from 'react';
import { useSettingsState, useSidebarState, useThreadsState, useQuickEditState, useService } from '../util/services.js';
import { useSettingsState, useSidebarState, useThreadsState, useQuickEditState } from '../util/services.js';
import { OnError } from '../../../../../../../platform/void/common/llmMessageTypes.js';
import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
import { getCmdKey } from '../../../helpers/getCmdKey.js';
@@ -12,19 +12,6 @@ export const CtrlKChat = (props: QuickEditPropsType) => {
const inputBoxRef: React.MutableRefObject<InputBox | null> = useRef(null);
// -- imported state --
// const threadsStateService = useService('service')
// const sidebarState = useSidebarState()
const quickEditState = useQuickEditState()
// -- local state --
// state of chat
const [messageStream, setMessageStream] = useState<string | null>(null)
const [isLoading, setIsLoading] = useState(false)
const latestRequestIdRef = useRef<string | null>(null)
const [latestError, setLatestError] = useState<Parameters<OnError>[0] | null>(null)
// state of current message
const [instructions, setInstructions] = useState('') // the user's instructions
src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ import { getCmdKey } from '../../../helpers/getCmdKey.js'
import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
import { VoidCodeEditor, VoidInputBox } from '../util/inputs.js';
import { ModelDropdown } from '../void-settings-tsx/ModelDropdown.js';
import { ctrlLSystem, generateCtrlLPrompt } from '../../../prompt/prompts.js';
import { chat_systemMessage, chat_prompt } from '../../../prompt/prompts.js';
import { ISidebarStateService } from '../../../sidebarStateService.js';
import { ILLMMessageService } from '../../../../../../../platform/void/common/llmMessageService.js';
import { IModelService } from '../../../../../../../editor/common/services/model.js';
@@ -380,11 +380,11 @@ export const SidebarChat = () => {
// add system message to chat history
const systemPromptElt: ChatMessage = { role: 'system', content: ctrlLSystem }
const systemPromptElt: ChatMessage = { role: 'system', content: chat_systemMessage }
threadsStateService.addMessageToCurrentThread(systemPromptElt)
// add user's message to chat history
const userHistoryElt: ChatMessage = { role: 'user', content: generateCtrlLPrompt(instructions, selections), displayContent: instructions, selections: selections }
const userHistoryElt: ChatMessage = { role: 'user', content: chat_prompt(instructions, selections), displayContent: instructions, selections: selections }
threadsStateService.addMessageToCurrentThread(userHistoryElt)
const currentThread = threadsStateService.getCurrentThread(threadsStateService.state) // the the instant state right now, don't wait for the React state
src/vs/workbench/contrib/void/browser/sidebarActions.ts
+2 -2
View File
@@ -22,7 +22,7 @@ import { VOID_VIEW_ID } from './sidebarPane.js';
import { IMetricsService } from '../../../../platform/void/common/metricsService.js';
import { ISidebarStateService } from './sidebarStateService.js';
import { ICommandService } from '../../../../platform/commands/common/commands.js';
import { OPEN_VOID_SETTINGS_ACTION_ID } from './voidSettingsPane.js';
import { VOID_OPEN_SETTINGS_ACTION_ID } from './voidSettingsPane.js';
// ---------- Register commands and keybindings ----------
@@ -177,6 +177,6 @@ registerAction2(class extends Action2 {
}
async run(accessor: ServicesAccessor): Promise<void> {
const commandService = accessor.get(ICommandService)
commandService.executeCommand(OPEN_VOID_SETTINGS_ACTION_ID)
commandService.executeCommand(VOID_OPEN_SETTINGS_ACTION_ID)
}
})
src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
+3 -3
View File
@@ -118,12 +118,12 @@ Registry.as<IEditorPaneRegistry>(EditorExtensions.EditorPane).registerEditorPane
);
export const OPEN_VOID_SETTINGS_ACTION_ID = 'workbench.action.openVoidSettings'
export const VOID_OPEN_SETTINGS_ACTION_ID = 'workbench.action.openVoidSettings'
// register the gear on the top right
registerAction2(class extends Action2 {
constructor() {
super({
id: OPEN_VOID_SETTINGS_ACTION_ID,
id: VOID_OPEN_SETTINGS_ACTION_ID,
title: nls.localize2('voidSettings', "Void: Settings"),
f1: true,
icon: Codicon.settingsGear,
@@ -153,7 +153,7 @@ registerAction2(class extends Action2 {
MenuRegistry.appendMenuItem(MenuId.GlobalActivity, {
group: '0_command',
command: {
id: OPEN_VOID_SETTINGS_ACTION_ID,
id: VOID_OPEN_SETTINGS_ACTION_ID,
title: nls.localize('voidSettings', "Void Settings")
},
order: 1