https://github.com/val-town/codemirror-codeium
Codeium code completion integration for CodeMirror 6
https://github.com/val-town/codemirror-codeium
codeium codemirror codemirror6 copilot
Last synced: 5 months ago
JSON representation
Codeium code completion integration for CodeMirror 6
- Host: GitHub
- URL: https://github.com/val-town/codemirror-codeium
- Owner: val-town
- License: other
- Created: 2024-03-22T21:02:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-06T21:00:16.000Z (10 months ago)
- Last Synced: 2025-01-23T00:35:08.682Z (5 months ago)
- Topics: codeium, codemirror, codemirror6, copilot
- Language: TypeScript
- Homepage: https://val-town.github.io/codemirror-codeium/
- Size: 142 KB
- Stars: 70
- Watchers: 4
- Forks: 6
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# codemirror-codeium
[](https://www.npmjs.com/package/@valtown/codemirror-codeium)
```mermaid
flowchart TD
Keystroke --> SetTimeout
Keystroke -->|ignoreUpdate| Cancelled
SetTimeout -->|edits| Cancelled
SetTimeout --> GetCompletions
GetCompletions -->|edits| Cancelled
X[ ] -->|focusChanged| Cancelled
GetCompletions --> DispatchEdits
DispatchEdits -->|mousedown| Cancelled
DispatchEdits --> SameKeyCommand
SameKeyCommand -->|tab| AcceptSuggestionCommand
```
_Very experimental and unofficial_
Copilot-like ghost text code from [modeling-app](https://github.com/KittyCAD/modeling-app)
by [Jess Frazelle](https://github.com/jessfraz) and based on [Cursor](https://cursor.sh/).
## Documentation
See the [demo source code](https://github.com/val-town/codemirror-codeium/tree/main/demo) for
a reference to how it's used.
```ts
import { copilotPlugin } from "@valtown/codemirror-codeium";
// This is a CodeMirror extension
copilotPlugin();
```
### CSS
This adds a `.ghostText` class to CodeMirror decorations for the AI-written
text. You can add your own style for this class. The demo uses this style:
```css
.cm-ghostText,
.cm-ghostText * {
opacity: 0.6;
filter: grayscale(20%);
cursor: pointer;
}
.cm-ghostText:hover {
background: #eee;
}
```
### Architecture
This makes requests against the [Codeium](https://codeium.com/) hosted product,
using their Protocol Buffer-based interface. That's what the `buf` and `connectrpc`
modules are doing - generating and using bindings to their service.
The extension is a composite of facets, decorations, state fields, and more
that are encapsulated.