feat/preview #3
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "fabelous-autocoder",
|
||||
"version": "0.1.7",
|
||||
"version": "0.2.0",
|
||||
"displayName": "Fabelous Autocoder",
|
||||
"description": "A simple to use Ollama autocompletion Plugin",
|
||||
"icon": "icon.png",
|
||||
|
|
@ -111,9 +111,8 @@
|
|||
"commands": [
|
||||
{
|
||||
"command": "fabelous-autocoder.autocomplete",
|
||||
"title": "Fabelous autocompletion"
|
||||
}
|
||||
]
|
||||
"title": "Fabelous Autocompletion"
|
||||
}]
|
||||
},
|
||||
"scripts": {
|
||||
"vscode:prepublish": "npm run compile",
|
||||
|
|
|
|||
391
src/extension.ts
391
src/extension.ts
|
|
@ -1,193 +1,258 @@
|
|||
import * as vscode from "vscode";
|
||||
import axios from "axios";
|
||||
import * as vscode from 'vscode';
|
||||
import axios from 'axios';
|
||||
|
||||
let VSConfig: vscode.WorkspaceConfiguration;
|
||||
let apiEndpoint: string;
|
||||
let apiAuthentication: string;
|
||||
let apiModel: string;
|
||||
let apiTemperature: number;
|
||||
let numPredict: number;
|
||||
let promptWindowSize: number;
|
||||
let completionKeys: string;
|
||||
let responsePreview: boolean | undefined;
|
||||
let responsePreviewMaxTokens: number;
|
||||
let responsePreviewDelay: number;
|
||||
let continueInline: boolean | undefined;
|
||||
let keepAlive: number | undefined;
|
||||
let topP: number | undefined;
|
||||
let config: {
|
||||
apiEndpoint: string;
|
||||
apiAuthentication: string;
|
||||
apiModel: string;
|
||||
apiTemperature: number;
|
||||
numPredict: number;
|
||||
promptWindowSize: number;
|
||||
completionKeys: string[];
|
||||
responsePreview: boolean;
|
||||
responsePreviewMaxTokens: number;
|
||||
responsePreviewDelay: number;
|
||||
continueInline: boolean;
|
||||
keepAlive: number;
|
||||
topP: number;
|
||||
};
|
||||
|
||||
function updateVSConfig() {
|
||||
VSConfig = vscode.workspace.getConfiguration("fabelous-autocoder");
|
||||
apiEndpoint = VSConfig.get("endpoint") || "http://localhost:11434/api/generate";
|
||||
apiAuthentication = VSConfig.get("authentication") || "";
|
||||
apiModel = VSConfig.get("model") || "fabelous-coder:latest";
|
||||
numPredict = VSConfig.get("max tokens predicted") || 1000;
|
||||
promptWindowSize = VSConfig.get("prompt window size") || 2000;
|
||||
completionKeys = VSConfig.get("completion keys") || " ";
|
||||
responsePreview = VSConfig.get("response preview");
|
||||
responsePreviewMaxTokens = VSConfig.get("preview max tokens") || 50;
|
||||
responsePreviewDelay = VSConfig.get("preview delay") || 0;
|
||||
continueInline = VSConfig.get("continue inline");
|
||||
apiTemperature = VSConfig.get("temperature") || 0.7;
|
||||
keepAlive = VSConfig.get("keep alive") || 30;
|
||||
topP = VSConfig.get("top p") || 1;
|
||||
let previewDecorationType: vscode.TextEditorDecorationType;
|
||||
let activeCompletionManager: CompletionManager | null = null;
|
||||
|
||||
function updateConfig() {
|
||||
const vsConfig = vscode.workspace.getConfiguration('fabelous-autocoder');
|
||||
config = {
|
||||
apiEndpoint: vsConfig.get('endpoint') || 'http://localhost:11434/api/generate',
|
||||
apiAuthentication: vsConfig.get('authentication') || '',
|
||||
apiModel: vsConfig.get('model') || 'fabelous-coder:latest',
|
||||
apiTemperature: vsConfig.get('temperature') || 0.7,
|
||||
numPredict: vsConfig.get('max tokens predicted') || 1000,
|
||||
promptWindowSize: vsConfig.get('prompt window size') || 2000,
|
||||
completionKeys: (vsConfig.get('completion keys') as string || ' ').split(''),
|
||||
responsePreview: vsConfig.get('response preview') || false,
|
||||
responsePreviewMaxTokens: vsConfig.get('preview max tokens') || 50,
|
||||
responsePreviewDelay: vsConfig.get('preview delay') || 0,
|
||||
continueInline: vsConfig.get('continue inline') || false,
|
||||
keepAlive: vsConfig.get('keep alive') || 30,
|
||||
topP: vsConfig.get('top p') || 1,
|
||||
};
|
||||
}
|
||||
|
||||
updateVSConfig();
|
||||
vscode.workspace.onDidChangeConfiguration(updateVSConfig);
|
||||
function createPreviewDecorationType() {
|
||||
previewDecorationType = vscode.window.createTextEditorDecorationType({
|
||||
after: {
|
||||
color: '#888888',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
textDecoration: 'none; display: none;',
|
||||
});
|
||||
}
|
||||
|
||||
function getContextLines(document: vscode.TextDocument, position: vscode.Position): string {
|
||||
const lines = [];
|
||||
const startLine = Math.max(0, position.line - 1);
|
||||
const endLine = position.line;
|
||||
|
||||
for (let i = startLine; i <= endLine; i++) {
|
||||
lines.push(document.lineAt(i).text);
|
||||
return document.getText(new vscode.Range(startLine, 0, endLine, position.character));
|
||||
}
|
||||
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
|
||||
function createFIMPrompt(prefix: string, language: string): string {
|
||||
return `<fim_prefix>${prefix}<fim_middle><fim_suffix>${language}\n`;
|
||||
}
|
||||
|
||||
const previewDecorationType = vscode.window.createTextEditorDecorationType({
|
||||
color: '#888888', // Grayed-out preview text
|
||||
fontStyle: 'italic',
|
||||
rangeBehavior: vscode.DecorationRangeBehavior.ClosedOpen, // Ensure proper handling of multiline decorations
|
||||
});
|
||||
|
||||
async function autocompleteCommand(textEditor: vscode.TextEditor, cancellationToken?: vscode.CancellationToken) {
|
||||
const document = textEditor.document;
|
||||
const position = textEditor.selection.active;
|
||||
|
||||
const context = getContextLines(document, position);
|
||||
const fimPrompt = createFIMPrompt(context, document.languageId);
|
||||
|
||||
vscode.window.withProgress(
|
||||
{
|
||||
location: vscode.ProgressLocation.Notification,
|
||||
title: "Fabelous Autocoder",
|
||||
cancellable: true,
|
||||
},
|
||||
async (progress, progressCancellationToken) => {
|
||||
try {
|
||||
progress.report({ message: "Starting model..." });
|
||||
|
||||
let axiosCancelPost: () => void;
|
||||
async function generateCompletion(prompt: string, cancellationToken: vscode.CancellationToken): Promise<string> {
|
||||
const axiosCancelToken = new axios.CancelToken((c) => {
|
||||
axiosCancelPost = () => {
|
||||
c("Autocompletion request terminated by user cancel");
|
||||
};
|
||||
if (cancellationToken) cancellationToken.onCancellationRequested(axiosCancelPost);
|
||||
progressCancellationToken.onCancellationRequested(axiosCancelPost);
|
||||
vscode.workspace.onDidCloseTextDocument(axiosCancelPost);
|
||||
cancellationToken.onCancellationRequested(() => c('Request cancelled'));
|
||||
});
|
||||
|
||||
const response = await axios.post(apiEndpoint, {
|
||||
model: apiModel,
|
||||
prompt: fimPrompt,
|
||||
const response = await axios.post(config.apiEndpoint, {
|
||||
model: config.apiModel,
|
||||
prompt: prompt,
|
||||
stream: false,
|
||||
raw: true,
|
||||
options: {
|
||||
num_predict: numPredict,
|
||||
temperature: apiTemperature,
|
||||
stop: ["<fim_suffix>", "```"]
|
||||
num_predict: config.numPredict,
|
||||
temperature: config.apiTemperature,
|
||||
stop: ['<fim_suffix>', '```'],
|
||||
keep_alive: config.keepAlive,
|
||||
top_p: config.topP,
|
||||
}
|
||||
}, {
|
||||
cancelToken: axiosCancelToken,
|
||||
headers: {
|
||||
'Authorization': apiAuthentication
|
||||
'Authorization': config.apiAuthentication
|
||||
}
|
||||
});
|
||||
|
||||
progress.report({ message: "Generating..." });
|
||||
return response.data.response.replace(/<fim_middle>|<fim_suffix>|<fim_prefix>/g, '').trim();
|
||||
}
|
||||
|
||||
let completionText = response.data.response;
|
||||
completionText = completionText.replace(/<fim_middle>|<fim_suffix>|<fim_prefix>/g, '').trim();
|
||||
class CompletionManager {
|
||||
private textEditor: vscode.TextEditor;
|
||||
private document: vscode.TextDocument;
|
||||
private startPosition: vscode.Position;
|
||||
private completionText: string;
|
||||
|
||||
// Split the completion text by new lines
|
||||
const lines = completionText.split('\n');
|
||||
constructor(textEditor: vscode.TextEditor, startPosition: vscode.Position, completionText: string) {
|
||||
this.textEditor = textEditor;
|
||||
this.document = textEditor.document;
|
||||
this.startPosition = startPosition;
|
||||
this.completionText = completionText;
|
||||
}
|
||||
|
||||
// Create a decoration for each line of the response
|
||||
const previewRanges = lines.map((line: string, idx: number) => {
|
||||
const linePos = new vscode.Position(position.line + idx, 0);
|
||||
const range = new vscode.Range(linePos, linePos); // Set range at the start of each new line
|
||||
public async showPreview() {
|
||||
this.completionText = '\n' + this.completionText;
|
||||
const completionLines = this.completionText.split('\n');
|
||||
|
||||
const emptyLine = ''; // Empty line for spacing
|
||||
const previewLines = [emptyLine, ...completionLines, emptyLine];
|
||||
|
||||
const previewRanges: vscode.DecorationOptions[] = previewLines.map((line, index) => {
|
||||
const actualLineNumber = this.startPosition.line + index;
|
||||
const totalLines = this.textEditor.document.lineCount;
|
||||
const lineNumber = Math.min(totalLines - 1, actualLineNumber);
|
||||
return {
|
||||
range,
|
||||
range: new vscode.Range(
|
||||
new vscode.Position(lineNumber, 0),
|
||||
new vscode.Position(lineNumber, Number.MAX_VALUE)
|
||||
),
|
||||
renderOptions: {
|
||||
before: {
|
||||
contentText: line,
|
||||
color: '#888888',
|
||||
fontStyle: 'italic',
|
||||
}
|
||||
}
|
||||
after: {
|
||||
contentText: line.length > 0 ? ` ${line}` : '',
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// Apply the decorations for multiline preview
|
||||
textEditor.setDecorations(previewDecorationType, previewRanges);
|
||||
this.textEditor.setDecorations(previewDecorationType, previewRanges);
|
||||
}
|
||||
|
||||
const disposable = vscode.workspace.onDidChangeTextDocument(async (event) => {
|
||||
if (event.document.uri.toString() === document.uri.toString()) {
|
||||
const change = event.contentChanges[0];
|
||||
public async acceptCompletion() {
|
||||
const edit = new vscode.WorkspaceEdit();
|
||||
const startLine = Math.max(0, this.startPosition.line - 1);
|
||||
const range = new vscode.Range(
|
||||
new vscode.Position(startLine, 0),
|
||||
this.startPosition.translate(0, Number.MAX_VALUE)
|
||||
);
|
||||
edit.replace(this.document.uri, range, this.completionText);
|
||||
await vscode.workspace.applyEdit(edit);
|
||||
this.clearPreview();
|
||||
}
|
||||
|
||||
// Handle Backspace to decline the preview
|
||||
if (change && change.text === '' && change.rangeLength === 1) {
|
||||
textEditor.setDecorations(previewDecorationType, []); // Remove preview decorations
|
||||
public clearPreview() {
|
||||
this.textEditor.setDecorations(previewDecorationType, []);
|
||||
}
|
||||
|
||||
public declineCompletion() {
|
||||
this.clearPreview();
|
||||
}
|
||||
}
|
||||
|
||||
async function autocompleteCommand(textEditor: vscode.TextEditor, edit: vscode.TextEditorEdit, ...args: any[]) {
|
||||
const cancellationTokenSource = new vscode.CancellationTokenSource();
|
||||
const cancellationToken = cancellationTokenSource.token;
|
||||
|
||||
try {
|
||||
const document = textEditor.document;
|
||||
const position = textEditor.selection.active;
|
||||
const context = getContextLines(document, position);
|
||||
const fimPrompt = createFIMPrompt(context, document.languageId);
|
||||
|
||||
const completionText = await vscode.window.withProgress({
|
||||
location: vscode.ProgressLocation.Notification,
|
||||
title: 'Fabelous Autocoder',
|
||||
cancellable: true,
|
||||
}, async (progress, progressCancellationToken) => {
|
||||
progress.report({ message: 'Generating...' });
|
||||
return await generateCompletion(fimPrompt, progressCancellationToken);
|
||||
});
|
||||
|
||||
console.log('Completion generated:', completionText);
|
||||
|
||||
|
||||
const completionManager = new CompletionManager(textEditor, position, completionText);
|
||||
await completionManager.showPreview();
|
||||
activeCompletionManager = completionManager;
|
||||
|
||||
let isDisposed = false;
|
||||
|
||||
const dispose = () => {
|
||||
if (!isDisposed) {
|
||||
console.log('Disposing listeners');
|
||||
disposable.dispose();
|
||||
typeDisposable.dispose();
|
||||
activeCompletionManager = null;
|
||||
isDisposed = true;
|
||||
}
|
||||
};
|
||||
|
||||
// Handle Ctrl + Enter (or Cmd + Enter on macOS) to accept the preview
|
||||
const isCtrlOrCmdPressed = event.contentChanges.some(
|
||||
(change) => {
|
||||
const isMac = process.platform === 'darwin';
|
||||
const isCtrlOrCmd = isMac ? change.text.includes('\u0010') : change.text.includes('\n');
|
||||
return isCtrlOrCmd;
|
||||
const disposable = vscode.Disposable.from(
|
||||
vscode.window.onDidChangeTextEditorSelection(async (event) => {
|
||||
if (event.textEditor !== textEditor) return;
|
||||
|
||||
if (event.kind === vscode.TextEditorSelectionChangeKind.Keyboard) {
|
||||
console.log('Accepting completion');
|
||||
await completionManager.acceptCompletion();
|
||||
dispose();
|
||||
}
|
||||
}),
|
||||
vscode.window.onDidChangeActiveTextEditor(() => {
|
||||
console.log('Active editor changed, clearing preview');
|
||||
completionManager.clearPreview();
|
||||
dispose();
|
||||
}),
|
||||
vscode.workspace.onDidChangeTextDocument((event) => {
|
||||
if (event.document === document) {
|
||||
console.log('Document changed, clearing preview');
|
||||
completionManager.clearPreview();
|
||||
dispose();
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
if (isCtrlOrCmdPressed) {
|
||||
// Remove the preview decoration before applying the final completion
|
||||
textEditor.setDecorations(previewDecorationType, []);
|
||||
|
||||
const edit = new vscode.WorkspaceEdit();
|
||||
const insertPosition = new vscode.Position(position.line, 0);
|
||||
|
||||
// Insert the completion only once
|
||||
if (!document.getText().includes(completionText)) {
|
||||
edit.insert(document.uri, insertPosition, '\n' + completionText);
|
||||
await vscode.workspace.applyEdit(edit);
|
||||
}
|
||||
|
||||
const newPosition = new vscode.Position(position.line + lines.length, lines[lines.length - 1].length);
|
||||
textEditor.selection = new vscode.Selection(newPosition, newPosition);
|
||||
|
||||
disposable.dispose(); // Clean up the listener after accepting the completion
|
||||
}
|
||||
const typeDisposable = vscode.commands.registerCommand('type', async (args) => {
|
||||
if (args.text === '\b') { // Backspace key
|
||||
console.log('Declining completion');
|
||||
completionManager.declineCompletion();
|
||||
dispose();
|
||||
}
|
||||
});
|
||||
|
||||
} catch (err: any) {
|
||||
vscode.window.showErrorMessage(
|
||||
"Fabelous Autocoder encountered an error: " + err.message
|
||||
);
|
||||
console.log(err);
|
||||
console.error('Error in autocompleteCommand:', err);
|
||||
vscode.window.showErrorMessage(`Fabelous Autocoder encountered an error: ${err.message}`);
|
||||
} finally {
|
||||
cancellationTokenSource.dispose();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async function acceptCompletion() {
|
||||
if (activeCompletionManager) {
|
||||
await activeCompletionManager.acceptCompletion();
|
||||
const editor = vscode.window.activeTextEditor;
|
||||
if (editor) {
|
||||
const lastLine = editor.document.lineAt(editor.document.lineCount - 1);
|
||||
const newPosition = new vscode.Position(lastLine.lineNumber, lastLine.text.length);
|
||||
editor.selection = new vscode.Selection(newPosition, newPosition);
|
||||
}
|
||||
activeCompletionManager = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTab() {
|
||||
if (activeCompletionManager) {
|
||||
await acceptCompletion();
|
||||
} else {
|
||||
await vscode.commands.executeCommand('tab');
|
||||
}
|
||||
}
|
||||
|
||||
async function provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, cancellationToken: vscode.CancellationToken) {
|
||||
const item = new vscode.CompletionItem("Fabelous autocompletion");
|
||||
const item = new vscode.CompletionItem('Fabelous autocompletion');
|
||||
item.insertText = new vscode.SnippetString('${1:}');
|
||||
item.documentation = new vscode.MarkdownString('Press `Enter` to get an autocompletion from Fabelous Autocoder');
|
||||
|
||||
if (responsePreview) {
|
||||
await new Promise(resolve => setTimeout(resolve, responsePreviewDelay * 1000));
|
||||
if (config.responsePreview) {
|
||||
await new Promise(resolve => setTimeout(resolve, config.responsePreviewDelay * 1000));
|
||||
if (cancellationToken.isCancellationRequested) {
|
||||
return [item];
|
||||
}
|
||||
|
|
@ -196,58 +261,38 @@ async function provideCompletionItems(document: vscode.TextDocument, position: v
|
|||
const fimPrompt = createFIMPrompt(context, document.languageId);
|
||||
|
||||
try {
|
||||
const response_preview = await axios.post(apiEndpoint, {
|
||||
model: apiModel,
|
||||
prompt: fimPrompt,
|
||||
stream: false,
|
||||
raw: true,
|
||||
options: {
|
||||
num_predict: responsePreviewMaxTokens,
|
||||
temperature: apiTemperature,
|
||||
stop: ['<fim_suffix>', '\n', '```'],
|
||||
...(keepAlive && { keep_alive: keepAlive }),
|
||||
...(topP && { top_p: topP }),
|
||||
const result = await generateCompletion(fimPrompt, cancellationToken);
|
||||
const preview = (result as any).preview;
|
||||
if (preview) {
|
||||
item.detail = preview.split('\n')[0];
|
||||
}
|
||||
}, {
|
||||
cancelToken: new axios.CancelToken((c) => {
|
||||
cancellationToken.onCancellationRequested(() => c("Autocompletion request terminated by completion cancel"));
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching preview:", error);
|
||||
console.error('Error fetching preview:', error);
|
||||
}
|
||||
}
|
||||
|
||||
item.documentation = new vscode.MarkdownString('Press `Enter` to get an autocompletion from Fabelous Autocoder');
|
||||
if (continueInline || !responsePreview) {
|
||||
if (config.continueInline || !config.responsePreview) {
|
||||
item.command = {
|
||||
command: 'fabelous-autocoder.autocomplete',
|
||||
title: 'Fabelous Autocomplete',
|
||||
arguments: [cancellationToken]
|
||||
arguments: []
|
||||
};
|
||||
}
|
||||
|
||||
return [item];
|
||||
}
|
||||
export function activate(context: vscode.ExtensionContext) {
|
||||
updateConfig();
|
||||
createPreviewDecorationType();
|
||||
|
||||
function activate(context: vscode.ExtensionContext) {
|
||||
const completionProvider = vscode.languages.registerCompletionItemProvider("*", {
|
||||
provideCompletionItems
|
||||
},
|
||||
...completionKeys.split("")
|
||||
context.subscriptions.push(
|
||||
vscode.workspace.onDidChangeConfiguration(updateConfig),
|
||||
vscode.languages.registerCompletionItemProvider('*', { provideCompletionItems }, ...config.completionKeys),
|
||||
vscode.commands.registerTextEditorCommand('fabelous-autocoder.autocomplete', autocompleteCommand),
|
||||
vscode.commands.registerCommand('fabelous-autocoder.acceptCompletion', acceptCompletion),
|
||||
vscode.commands.registerCommand('fabelous-autocoder.handleTab', handleTab)
|
||||
);
|
||||
const externalAutocompleteCommand = vscode.commands.registerTextEditorCommand(
|
||||
"fabelous-autocoder.autocomplete",
|
||||
(textEditor, _, cancellationToken?) => {
|
||||
autocompleteCommand(textEditor, cancellationToken);
|
||||
}
|
||||
);
|
||||
context.subscriptions.push(completionProvider);
|
||||
context.subscriptions.push(externalAutocompleteCommand);
|
||||
}
|
||||
|
||||
function deactivate() { }
|
||||
|
||||
module.exports = {
|
||||
activate,
|
||||
deactivate,
|
||||
};
|
||||
export function deactivate() {}
|
||||
|
|
|
|||
Loading…
Reference in New Issue