Monaco Editor 实现在线版 Copilot

事确 · 前天 19:17

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。

本文作者：文长

引言

现代软件开发中，代码编辑器的功能不断演进，以满足开发者对高效和智能化工具的需求。Monaco Editor 作为一种轻量级但功能强大的代码编辑器，广泛应用于多种开发环境中。在此背景下，Copilot，一款由 GitHub 开发的 AI 编程助手，凭借其智能代码补全和建议功能，迅速吸引了开发者的关注。
本文将探讨如何在 Monaco Editor 中实现在线版 Copilot 功能的代码续写，旨在为用户提供更加高效的编程体验。
Copilot

什么是 Copilot？

Copilot 是由 GitHub 开发的一款人工智能编程助手，它利用机器学习和自然语言处理技术，旨在帮助开发者更高效地编写代码。Copilot 通过分析大量的开源代码库和文档，能够理解开发者的意图并提供实时的代码建议和补全。当然，除了 Copilot ，还有很多类似的产品，如 Cursor、CodeWhisperer、CodeGeeX、通义灵码、iFlyCode …
工作原理

Copilot 基于 OpenAI 的 Codex 模型，该模型经过大量代码和自然语言数据的训练，能够生成符合语法和逻辑的代码。它通过分析开发者的输入和上下文，预测最可能的代码片段，并将其呈现给用户。
使用效果

Copilot 可以在当前光标处自动生成补全代码。如下图所示

简版实现

github copilot 提供了 vs code 的插件，支持在 vs code 中使用，那是否可以在 Web Editor 中也实现一个 Copilot 呢？通过查看 Monaco Editor 的 API ，可以看到是提供了这么一个 Provider 的。
registerInlineCompletionsProvider

registerInlineCompletionsProvider 是 Monaco Editor 中的一个方法，用于注册一个内联补全 Provider。这个功能允许开发者在代码编辑器中提供上下文相关的补全建议，提升用户的编码效率。
registerInlineCompletionsProvider 支持接收 2 个参数：

languageId：要给哪个 language 注册这个Provider。这个 Provider 只会在 Monaco Editor 的 language 设置为该 language 时，才会被触发。
provider：
- provideInlineCompletions：该方法用于提供内联补全建议，它根据当前文本模型、光标位置和上下文信息生成适合的补全项，并返回给编辑器。
  - 参数：
    - model: editor.ITextModel：当前编辑器的文本模型，包含用户正在编辑的文本。
    - position: Position：光标的当前位置，指示补全建议的上下文。
    - context: InlineCompletionContext：提供有关补全上下文的信息，例如用户输入状态和触发条件。
    - token: CancellationToken：用于取消操作的令牌，确保性能和可控性。
- freeInlineCompletions：当补全列表不再使用且可以被垃圾回收时，该方法会被调用。允许开发者执行清理操作，释放资源。
  - 参数：
    - completions: T：需要释放的补全项集合。
- handleItemDidShow：当补全项被展示给用户时，该方法会被调用。允许开发者执行特定的逻辑，例如记录日志、更新UI或执行其他操作。
  - 参数：
    - completions: T：当前的补全项集合。
    - item: T['items'][number]：被展示的具体补全项。

如下图例子所示

具体实现

思路

在编辑器中，每当内容发生变更时，都会触发 registerInlineCompletionsProvider 。在这个 Provider 中执行补全。整个补全的过程：

修改光标状态
获取上下文内容，发送给 AI
等待 AI 返回补全结果，将 AI 的结果进行返回。这里返回的格式（这里以 Monaco Editor@0.31.1 为例，@0.34 版本开始与此有些差别）：

interface InlineCompletion {
/**
* The text to insert.
* If the text contains a line break, the range must end at the end of a line.
* If existing text should be replaced, the existing text must be a prefix of the text to insert.
*/
readonly text: string;
/**
* The range to replace.
* Must begin and end on the same line.
*/
readonly range?: IRange;
readonly command?: Command;
}
interface InlineCompletions<TItem extends InlineCompletion = InlineCompletion> {
readonly items: readonly TItem[];
}
interface InlineCompletionsProvider<T extends InlineCompletions = InlineCompletions> {
provideInlineCompletions(model: editor.ITextModel, position: Position, context: InlineCompletionContext, token: CancellationToken): ProviderResult<T>;
}

复制代码

@0.34 及以上版本返回格式：

interface InlineCompletion {
/**
* The text to insert.
* If the text contains a line break, the range must end at the end of a line.
* If existing text should be replaced, the existing text must be a prefix of the text to insert.
*
* The text can also be a snippet. In that case, a preview with default parameters is shown.
* When accepting the suggestion, the full snippet is inserted.
*/
readonly insertText: string | {
snippet: string;
};
/**
* A text that is used to decide if this inline completion should be shown.
* An inline completion is shown if the text to replace is a subword of the filter text.
*/
readonly filterText?: string;
/**
* An optional array of additional text edits that are applied when
* selecting this completion. Edits must not overlap with the main edit
* nor with themselves.
*/
readonly additionalTextEdits?: editor.ISingleEditOperation[];
/**
* The range to replace.
* Must begin and end on the same line.
*/
readonly range?: IRange;
readonly command?: Command;
/**
* If set to `true`, unopened closing brackets are removed and unclosed opening brackets are closed.
* Defaults to `false`.
*/
readonly completeBracketPairs?: boolean;
}

复制代码

补全结束，恢复光标状态

过程

设置光标
在发起补全时，需要将光标变为 loading 状态，但是 monaco editor 自身的配置不满足想要的样式（只支持：'line' | 'block' | 'underline' | 'line-thin' | 'block-outline' | 'underline-thin'）。
monaco editor 的光标并不是原生输入框自带的，也是自行实现的

通过操作 dom 的形式，使用 createPortal 方法，将 loading 组件渲染到该容器下，然后通过状态控制光标的状态切换。具体实现如下所示：

class Editor extends React.Component {
...
switchToLoadingCursor = () => {
const defaultCursor = document.querySelector('.cursors-layer .cursor') as HTMLDivElement;
const defaultCursorRect = defaultCursor.getBoundingClientRect();
const cursorLoadingRect = document
.querySelector('.cursors-layer .cursorLoading')
.getBoundingClientRect();
defaultCursor.style.display = 'none';
this.setState({
cursorLoading: {
left: defaultCursorRect.left - cursorLoadingRect.left + 2,
top: defaultCursorRect.top - cursorLoadingRect.top + 2,
visible: 'visible',
},
});
};
switchToDefaultCursor = () => {
clearTimeout(this.copilotTimer);
if (this.abortController && !this.abortController.signal.aborted) {
this.abortController.abort();
}
const defaultCursor = document.querySelector('.cursors-layer .cursor') as HTMLDivElement;
defaultCursor.style.display = 'block';
this.setState({
cursorLoading: {
left: 0,
top: 0,
visible: 'hidden',
},
});
};
render() {
const cursorLayer = document.querySelector('.monaco-editor .cursors-layer');
return <>
...
{cursorLayer &&
ReactDOM.createPortal(
<Spin
className="cursorLoading"
style={{
position: 'absolute',
top: cursorLoading.top,
left: cursorLoading.left,
visibility:
cursorLoading.visible as React.CSSProperties['visibility'],
zIndex: 999,
}}
indicator={<LoadingOutlined spin />}
size="small"
/>,
cursorLayer
)}
...
</>
}
}

复制代码

效果如下所示：

获取上下文内容，发送 AI 补全，并将内容返回
这一步这里做的比较简单，只是将内容获取，发送给 AI ，然后等待结果的返回，结果返回后，将补全内容返回，并切换光标状态。同时，在鼠标点到其他位置时，会取消补全。
不过，这里没有做规则校验，去校验什么情况下才发起补全行为。
注意： registerInlineCompletionsProvider 是只要内容变化就会触发，所以可能需要做一些优化（如防抖等），避免一直发送/取消请求。

this.keyDownDisposable = this.editorInstance.onKeyDown(this.switchToDefaultCursor);
this.mouseDownDisposable = this.editorInstance.onMouseDown(this.switchToDefaultCursor);
this.inlineCompletionDispose = languages.registerInlineCompletionsProvider(language, {
provideInlineCompletions: (model, position, context, token) => {
return new Promise((resolve) => {
clearTimeout(this.copilotTimer);
if (this.abortController && !this.abortController.signal.aborted) {
this.abortController.abort();
}
this.copilotTimer = window.setTimeout(() => {
const codeBeforeCursor = model.getValueInRange({
startLineNumber: 1,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: position.column,
});
const codeAfterCursor = model.getValueInRange({
startLineNumber: position.lineNumber,
startColumn: position.column,
endLineNumber: model.getLineCount(),
endColumn: model.getLineMaxColumn(model.getLineCount()),
});
let result = '';
this.switchToLoadingCursor();
this.abortController = new AbortController();
api.chatOneAIGC(
{
message: `你是一个${language}补全器，以下是我的上下文：\n上文内容如下：\n${codeBeforeCursor}\n，下文内容如下：\n${codeAfterCursor}\n请你帮我进行补全，只需要返回对应的代码，不需要进行解释。`,
},
).then(({data, code}) => {
if (code === 1) {
resolve({
items: data?.map((content) => ({
text: content,
range: {
startLineNumber: position.lineNumber,
startColumn: position.column,
endLineNumber: position.lineNumber,
endColumn: content.length,
},
}),
});
} else {
resolve({ items: [] });
}
this.switchToDefaultCursor();
})
}, 500);
});
},
freeInlineCompletions(completions) {
console.log('wenchang freeInlineCompletions', completions);
},
handleItemDidShow(completions) {
console.log('wenchang handleItemDidShow', completions);
},
} as languages.InlineCompletionsProvider);

复制代码

效果

总结

上述例子只是介绍了如何在 Monaco Editor 中实现类似 Copilot 的代码智能补全功能，但是，我们可以发现，只要内容发生变动，都会触发 Provider ，实际上有些场景下，是不应该触发的，这里还需要写相应的判断条件，而非像例子中所示，任何情况下都进行补全。
最后

欢迎关注【袋鼠云数栈UED团队】~
袋鼠云数栈 UED 团队持续为广大开发者分享技术成果，相继参与开源了欢迎 star

大数据分布式任务调度系统——Taier
轻量级的 Web IDE UI 框架——Molecule
针对大数据领域的 SQL Parser 项目——dt-sql-parser
袋鼠云数栈前端团队代码评审工程实践文档——code-review-practices
一个速度更快、配置更灵活、使用更简单的模块打包器——ko
一个针对 antd 的组件测试工具库——ant-design-testing

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册