feat: implement inline autocomplete suggestions with FastAPI backend and Milkdown editor integration
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
OPENAI_API_KEY=ollama
|
||||
OLLAMA_BASE_URL=http://192.168.0.120:11434/v1/
|
||||
OLLAMA_MODEL=gpt-oss:120b
|
||||
@@ -0,0 +1,3 @@
|
||||
OPENAI_API_KEY=ollama
|
||||
OLLAMA_BASE_URL=http://192.168.0.120:11434/v1/
|
||||
OLLAMA_MODEL=gpt-oss:120b
|
||||
@@ -0,0 +1,44 @@
|
||||
import os
|
||||
from typing import AsyncGenerator
|
||||
from openai import AsyncOpenAI
|
||||
import json
|
||||
|
||||
api_key = os.getenv('OPENAI_API_KEY', 'ollama')
|
||||
base_url = os.getenv('OLLAMA_BASE_URL', 'http://192.168.0.120:11434/v1/')
|
||||
model = os.getenv('OLLAMA_MODEL', 'gpt-oss:120b')
|
||||
|
||||
print(f"[LLM] API key configured: {'Yes' if api_key else 'No'}")
|
||||
print(f"[LLM] Base URL: {base_url}")
|
||||
print(f"[LLM] Model: {model}")
|
||||
|
||||
client = AsyncOpenAI(api_key=api_key, base_url=base_url)
|
||||
|
||||
async def stream_openai(prompt: str) -> AsyncGenerator[str, None]:
|
||||
"""
|
||||
调用 OpenAI/Ollama API 并流式返回补全内容。
|
||||
参考 completions-sample-code 的 streaming 逻辑。
|
||||
"""
|
||||
print(f"[LLM] Calling API with prompt length: {len(prompt)}")
|
||||
|
||||
try:
|
||||
stream = await client.chat.completions.create(
|
||||
model=model,
|
||||
messages=[{"role": "user", "content": prompt}],
|
||||
stream=True,
|
||||
max_tokens=128,
|
||||
temperature=0.2,
|
||||
)
|
||||
|
||||
chunk_count = 0
|
||||
async for chunk in stream:
|
||||
if chunk.choices[0].delta.content:
|
||||
content = chunk.choices[0].delta.content
|
||||
chunk_count += 1
|
||||
print(f"[LLM] Chunk {chunk_count}: {content}")
|
||||
yield json.dumps({"content": content})
|
||||
|
||||
print(f"[LLM] Stream complete, total chunks: {chunk_count}")
|
||||
except Exception as e:
|
||||
error_msg = f"Error: {str(e)}"
|
||||
print(f"[LLM] Error: {error_msg}")
|
||||
yield json.dumps({"error": str(e)})
|
||||
@@ -0,0 +1,47 @@
|
||||
from fastapi import FastAPI, HTTPException
|
||||
from fastapi.responses import StreamingResponse
|
||||
from pydantic import BaseModel
|
||||
import os
|
||||
import json
|
||||
|
||||
app = FastAPI()
|
||||
|
||||
class CompletionRequest(BaseModel):
|
||||
prefix: str
|
||||
suffix: str
|
||||
languageId: str = 'markdown'
|
||||
|
||||
def generate_stream(request: CompletionRequest):
|
||||
from prompt import build_prompt
|
||||
from llm import stream_openai
|
||||
|
||||
print(f"[Backend] Received request - prefix length: {len(request.prefix)}, suffix length: {len(request.suffix)}")
|
||||
|
||||
try:
|
||||
prompt = build_prompt(request.prefix, request.suffix)
|
||||
print(f"[Backend] Built prompt (first 100 chars): {prompt[:100]}...")
|
||||
|
||||
async def gen():
|
||||
chunk_count = 0
|
||||
async for chunk in stream_openai(prompt):
|
||||
chunk_count += 1
|
||||
yield f"data: {chunk}\n\n"
|
||||
if chunk_count % 5 == 0:
|
||||
print(f"[Backend] Sent chunk {chunk_count}")
|
||||
yield "data: {\"done\": true}\n\n"
|
||||
print(f"[Backend] Stream complete, total chunks: {chunk_count}")
|
||||
return gen()
|
||||
except Exception as e:
|
||||
error_msg = f"{{\"error\": \"{str(e)}\"}}"
|
||||
print(f"[Backend] Error: {e}")
|
||||
yield f"data: {error_msg}\n\n"
|
||||
|
||||
@app.post("/v1/completions")
|
||||
async def create_completion(request: CompletionRequest):
|
||||
print(f"[Backend] POST /v1/completions called")
|
||||
return StreamingResponse(generate_stream(request), media_type="text/event-stream")
|
||||
|
||||
if __name__ == "__main__":
|
||||
import uvicorn
|
||||
print("[Backend] Starting server on http://0.0.0.0:8000")
|
||||
uvicorn.run(app, host="0.0.0.0", port=8000)
|
||||
@@ -0,0 +1,28 @@
|
||||
import os
|
||||
from typing import Tuple
|
||||
|
||||
def build_prompt(prefix: str, suffix: str) -> str:
|
||||
"""
|
||||
构建用于代码补全的 Prompt。
|
||||
参考 completions-sample-code 的 extractPrompt 逻辑简化实现。
|
||||
"""
|
||||
MAX_CONTEXT_LINES = 30
|
||||
|
||||
prefix_lines = prefix.split('\n')
|
||||
suffix_lines = suffix.split('\n') if suffix else []
|
||||
|
||||
recent_prefix = '\n'.join(prefix_lines[-MAX_CONTEXT_LINES:])
|
||||
recent_suffix = '\n'.join(suffix_lines[:5])
|
||||
|
||||
prompt = f"""
|
||||
You are a helpful writing assistant. Continue the text naturally based on the context.
|
||||
|
||||
Context (before cursor):
|
||||
{recent_prefix}
|
||||
|
||||
Complete this:
|
||||
{suffix if suffix else '(cursor here)'}
|
||||
|
||||
Continue:"""
|
||||
|
||||
return prompt.strip()
|
||||
@@ -0,0 +1,5 @@
|
||||
fastapi
|
||||
uvicorn
|
||||
openai
|
||||
pydantic
|
||||
python-dotenv
|
||||
@@ -0,0 +1,111 @@
|
||||
# Inline Autocomplete Suggestions 实现计划
|
||||
|
||||
## 技术栈确认
|
||||
- **前端**: Vue3 + Milkdown Editor
|
||||
- **后端**: Python FastAPI
|
||||
- **LLM**: OpenAI API（流式响应）
|
||||
- **范围**: 基础流式补全，无需复杂缓存机制
|
||||
|
||||
## 系统架构
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
subgraph 前端 [Vue3 + Milkdown]
|
||||
E[Milkdown Editor]
|
||||
I[InlineSuggestionPlugin<br/>输入监听+防抖]
|
||||
G[GhostTextOverlay<br/>虚影渲染层]
|
||||
end
|
||||
|
||||
subgraph 后端 [FastAPI]
|
||||
API[/v1/completions<br/>补全接口]
|
||||
P[PromptBuilder<br/>上下文构建]
|
||||
L[OpenAI Client<br/>LLM调用]
|
||||
end
|
||||
|
||||
I -- "输入事件" --> G
|
||||
G -- "POST {prefix, suffix}" --> API
|
||||
API -- "流式响应" --> G
|
||||
```
|
||||
|
||||
## 实现步骤
|
||||
|
||||
### 1. 前端：创建 Inline Suggestion Plugin
|
||||
**文件**: `src/plugins/inlineSuggestionPlugin.ts`
|
||||
- 监听编辑器输入事件
|
||||
- 防抖处理（150ms）
|
||||
- 调用后端 API 获取补全建议
|
||||
- 管理 GhostText 显示状态
|
||||
|
||||
### 2. 前端：GhostText 渲染组件
|
||||
**文件**: `src/components/GhostTextOverlay.vue` 或内联样式
|
||||
- 在光标位置显示灰色虚影文本
|
||||
- 处理 Tab 键接受补全
|
||||
- ESC 键取消显示
|
||||
|
||||
### 3. 修改 MilkdownEditor 集成插件
|
||||
**文件**: `src/components/MilkdownEditor.vue`
|
||||
- 注册 InlineSuggestionPlugin 到 Crepe 实例
|
||||
- 配置 API 地址
|
||||
|
||||
### 4. 后端：FastAPI 服务
|
||||
**文件**: `backend/main.py`
|
||||
- POST `/v1/completions` 流式接口
|
||||
- 请求体验证和解析
|
||||
|
||||
### 5. 后端：Prompt 构建和 LLM 调用
|
||||
**文件**: `backend/prompt.py`, `backend/llm.py`
|
||||
- 构建补全 Prompt（参考 completions-sample-code 的 extractPrompt）
|
||||
- OpenAI API 流式调用
|
||||
- 返回 SSE 格式响应
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
llm-in-text/
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── MilkdownEditor.vue [修改]
|
||||
│ ├── plugins/
|
||||
│ │ └── inlineSuggestionPlugin.ts [新建]
|
||||
│ └── ...
|
||||
└── backend/
|
||||
├── main.py [新建]
|
||||
├── prompt.py [新建]
|
||||
├── llm.py [新建]
|
||||
└── requirements.txt [新建]
|
||||
```
|
||||
|
||||
## API 设计
|
||||
|
||||
### 请求
|
||||
```json
|
||||
POST /v1/completions
|
||||
{
|
||||
"prefix": "# Hello\n\nThis is ",
|
||||
"suffix": "",
|
||||
"languageId": "markdown"
|
||||
}
|
||||
```
|
||||
|
||||
### 响应（流式 SSE）
|
||||
```
|
||||
data: {"content": "a "}
|
||||
|
||||
data: {"content": "a te"}
|
||||
|
||||
data: {"content": "a test"}
|
||||
|
||||
data: [DONE]
|
||||
```
|
||||
|
||||
## 参考代码映射
|
||||
|
||||
| completions-sample-code | 本项目实现 |
|
||||
|------------------------|-----------|
|
||||
| `ghostText.ts getGhostText()` | 后端 LLM 调用逻辑 |
|
||||
| `inlineCompletion.ts GhostText` | 前端 Plugin 核心逻辑 |
|
||||
| `networking.ts postRequest()` | 后端 API 接口 |
|
||||
| `prompt/extractPrompt()` | 后端 Prompt 构建 |
|
||||
|
||||
## 下一步
|
||||
确认计划后切换到 Code 模式开始实现。
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div v-if="visible" class="ghost-text-overlay" :style="overlayStyle"
|
||||
@click="acceptSuggestion"
|
||||
>{{ suggestion }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
suggestion: { type: String, default: '' },
|
||||
position: { type: Object, required: true },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['accept', 'dismiss'])
|
||||
|
||||
const visible = computed(() => props.suggestion && props.position)
|
||||
|
||||
const overlayStyle = computed(() => ({
|
||||
position: 'absolute',
|
||||
left: `${props.position.left}px`,
|
||||
top: `${props.position.top}px`,
|
||||
fontSize: `${props.position.fontSize || 16}px`,
|
||||
fontFamily: props.position.fontFamily || 'monospace',
|
||||
color: '#999',
|
||||
backgroundColor: 'transparent',
|
||||
pointerEvents: 'auto',
|
||||
cursor: 'text',
|
||||
whiteSpace: 'pre-wrap',
|
||||
zIndex: 1000,
|
||||
}))
|
||||
|
||||
const acceptSuggestion = () => emit('accept')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ghost-text-overlay {
|
||||
opacity: 0.6;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ghost-text-overlay:hover {
|
||||
opacity: 1;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -1,97 +1,286 @@
|
||||
<template>
|
||||
<div class="editor-container">
|
||||
<div class="editor-container" ref="containerRef">
|
||||
<button class="export-btn" @click="exportMarkdown">导出文件</button>
|
||||
|
||||
<div ref="root" class="milkdown-editor"></div>
|
||||
|
||||
GhostTextOverlay
|
||||
v-if="suggestion && cursorRect"
|
||||
:suggestion="suggestion"
|
||||
:position="cursorRect"
|
||||
@accept="acceptSuggestion"
|
||||
@dismiss="dismissSuggestion"
|
||||
/GhostTextOverlay
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { Crepe } from '@milkdown/crepe'
|
||||
import GhostTextOverlay from './GhostTextOverlay.vue'
|
||||
|
||||
const root = ref(null)
|
||||
const containerRef = ref(null)
|
||||
let crepe = null
|
||||
|
||||
const suggestion = ref('')
|
||||
const cursorRect = ref(null)
|
||||
let debounceTimer = null
|
||||
let lastPos = -1
|
||||
|
||||
const API_URL = 'http://localhost:8000/v1/completions'
|
||||
const DEBOUNCE_MS = 150
|
||||
|
||||
onMounted(async () => {
|
||||
if (!root.value) return
|
||||
|
||||
crepe = new Crepe({
|
||||
root: root.value,
|
||||
defaultValue: '# Welcome to Milkdown\n\nStart writing your markdown content here...',
|
||||
})
|
||||
|
||||
await crepe.create()
|
||||
console.log('[Debug] onMounted called')
|
||||
if (!root.value) {
|
||||
console.log('[Debug] root.value is null')
|
||||
return
|
||||
}
|
||||
|
||||
console.log('[Debug] Creating Crepe editor...')
|
||||
crepe = new Crepe({
|
||||
root: root.value,
|
||||
defaultValue: '# Welcome to Milkdown\n\nStart writing your markdown content here...',
|
||||
})
|
||||
|
||||
await crepe.create()
|
||||
console.log('[Debug] Crepe editor created')
|
||||
})
|
||||
|
||||
const exportMarkdown = async () => {
|
||||
if (!crepe) return
|
||||
const markdown = await crepe.getMarkdown()
|
||||
const blob = new Blob([markdown], { type: 'text/markdown' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `document-${Date.now()}.md`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
const getCursorPosition = async () => {
|
||||
if (!crepe) {
|
||||
console.log('[Debug] getCursorPosition: crepe is null')
|
||||
return null
|
||||
}
|
||||
|
||||
try {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
const { from } = view.state.selection
|
||||
console.log('[Debug] Cursor position:', from)
|
||||
|
||||
const coords = view.coordsAtPos(from)
|
||||
const containerRect = containerRef.value?.getBoundingClientRect()
|
||||
if (!containerRect) {
|
||||
console.log('[Debug] containerRect is null')
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
left: coords.left - containerRect.left,
|
||||
top: coords.top - containerRect.top + window.scrollY,
|
||||
fontSize: 16,
|
||||
fontFamily: 'monospace',
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[Debug] getCursorPosition error:', e)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const fetchSuggestion = async (prefix, suffix) => {
|
||||
console.log('[Debug] fetchSuggestion called with prefix length:', prefix.length, 'suffix length:', suffix.length)
|
||||
try {
|
||||
const res = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prefix, suffix, languageId: 'markdown' }),
|
||||
})
|
||||
|
||||
console.log('[Debug] fetchSuggestion response status:', res.status)
|
||||
if (!res.ok) {
|
||||
console.log('[Debug] Response not ok')
|
||||
return ''
|
||||
}
|
||||
|
||||
const reader = res.body?.getReader()
|
||||
if (!reader) {
|
||||
console.log('[Debug] No reader available')
|
||||
return ''
|
||||
}
|
||||
|
||||
let text = ''
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
const chunk = new TextDecoder().decode(value)
|
||||
console.log('[Debug] Received chunk:', chunk.substring(0, 100))
|
||||
|
||||
const lines = chunk.split('\n').filter(l => l.startsWith('data: '))
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6))
|
||||
if (data.content) {
|
||||
text += data.content
|
||||
console.log('[Debug] Added content:', data.content)
|
||||
}
|
||||
if (data.done || data.error) break
|
||||
} catch (e) {
|
||||
console.warn('[Debug] JSON parse error:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('[Debug] Final suggestion text:', text.substring(0, 100))
|
||||
return text
|
||||
} catch (e) {
|
||||
console.error('[Debug] fetchSuggestion error:', e)
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const onInput = async () => {
|
||||
if (!crepe) {
|
||||
console.log('[Debug] onInput: crepe is null')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
const { from } = view.state.selection
|
||||
|
||||
if (from === lastPos) {
|
||||
console.log('[Debug] Same position, skipping')
|
||||
return
|
||||
}
|
||||
lastPos = from
|
||||
|
||||
console.log('[Debug] onInput triggered at position:', from)
|
||||
|
||||
const prefix = view.state.doc.textBetween(0, from)
|
||||
const suffix = view.state.doc.textBetween(from, view.state.doc.content.size)
|
||||
|
||||
console.log('[Debug] Prefix preview:', prefix.substring(-50))
|
||||
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(async () => {
|
||||
cursorRect.value = await getCursorPosition()
|
||||
suggestion.value = await fetchSuggestion(prefix, suffix)
|
||||
console.log('[Debug] Suggestion updated:', suggestion.value ? 'yes' : 'no')
|
||||
}, DEBOUNCE_MS)
|
||||
} catch (e) {
|
||||
console.error('[Debug] onInput error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const handleTab = () => {
|
||||
if (suggestion.value) {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
view.dispatch(view.state.tr.insertText(suggestion.value))
|
||||
suggestion.value = ''
|
||||
console.log('[Debug] Tab pressed, accepted suggestion')
|
||||
}
|
||||
}
|
||||
|
||||
const dismissSuggestion = () => {
|
||||
suggestion.value = ''
|
||||
console.log('[Debug] Suggestion dismissed')
|
||||
}
|
||||
|
||||
const acceptSuggestion = () => {
|
||||
if (suggestion.value) {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
view.dispatch(view.state.tr.insertText(suggestion.value))
|
||||
suggestion.value = ''
|
||||
console.log('[Debug] Suggestion accepted via click')
|
||||
}
|
||||
}
|
||||
|
||||
const exportMarkdown = async () => {
|
||||
if (!crepe) return
|
||||
const markdown = await crepe.getMarkdown()
|
||||
const blob = new Blob([markdown], { type: 'text/markdown' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `document-${Date.now()}.md`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
// 监听 crepe 创建完成后绑定事件
|
||||
const initEditorEvents = () => {
|
||||
if (!crepe) return
|
||||
|
||||
try {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
console.log('[Debug] Binding input event to editor DOM')
|
||||
|
||||
// 直接在编辑器 DOM 上监听输入事件
|
||||
view.dom.addEventListener('input', onInput)
|
||||
view.dom.addEventListener('keydown', (e) => {
|
||||
console.log('[Debug] Keydown:', e.key, 'code:', e.code)
|
||||
if (e.key === 'Tab') {
|
||||
handleTab()
|
||||
}
|
||||
})
|
||||
} catch (e) {
|
||||
console.error('[Debug] Failed to bind events:', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 延迟初始化事件绑定
|
||||
setTimeout(initEditorEvents, 500)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor-container {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 8px 16px;
|
||||
background-color: #4a90d9;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
export-btn {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 8px 16px;
|
||||
background-color: #4a90d9;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.export-btn:hover {
|
||||
background-color: #3a7bc8;
|
||||
export-btn:hover {
|
||||
background-color: #3a7bc8;
|
||||
}
|
||||
|
||||
.milkdown-editor {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #ffffff;
|
||||
overflow-y: auto;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #ffffff;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 当内容不超过视口时隐藏滚动条 */
|
||||
.milkdown-editor::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.milkdown-editor::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.milkdown-editor::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 4px;
|
||||
background-color: #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 编辑器内容容器样式 */
|
||||
.milkdown-editor :deep(.milkdown) {
|
||||
max-width: 900px;
|
||||
margin: 0 auto !important;
|
||||
padding: 20px 40px !important;
|
||||
min-height: calc(100vh - 40px);
|
||||
max-width: 900px;
|
||||
margin: 0 auto !important;
|
||||
padding: 20px 40px !important;
|
||||
min-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
/* 全局覆盖所有元素的边距 */
|
||||
.milkdown-editor :deep(*) {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
import { Plugin, PluginKey } from '@milkdown/prose/state';
|
||||
import { EditorView } from '@milkdown/prose/view';
|
||||
|
||||
const INLINE_SUGGESTION_KEY = new PluginKey('inline-suggestion');
|
||||
const DEBOUNCE_MS = 150;
|
||||
let debounceTimer = null;
|
||||
let currentSuggestion = '';
|
||||
let suggestionPos = { from: 0, to: 0 };
|
||||
|
||||
interface InlineSuggestionOptions {
|
||||
apiUrl?: string;
|
||||
}
|
||||
|
||||
function createInlineSuggestionPlugin(options: InlineSuggestionOptions = {}) {
|
||||
const apiUrl = options.apiUrl || 'http://localhost:8000/v1/completions';
|
||||
|
||||
return new Plugin({
|
||||
key: INLINE_SUGGESTION_KEY,
|
||||
state: {
|
||||
init: () => ({ suggestion: '', visible: false }),
|
||||
apply: (tr, value) => {
|
||||
if (!tr.docChanged) return value;
|
||||
const { from, to } = tr.selection;
|
||||
if (from === suggestionPos.from && to === suggestionPos.to) {
|
||||
return value;
|
||||
}
|
||||
return { suggestion: '', visible: false };
|
||||
},
|
||||
},
|
||||
props: {
|
||||
handleKeyDown: (view: EditorView, event: KeyboardEvent) => {
|
||||
if (event.key === 'Tab' && INLINE_SUGGESTION_KEY.getState(view.state).visible) {
|
||||
event.preventDefault();
|
||||
const { suggestion } = INLINE_SUGGESTION_KEY.getState(view.state);
|
||||
if (suggestion) {
|
||||
view.dispatch(view.state.tr.insertText(suggestion, view.state.selection.from));
|
||||
currentSuggestion = '';
|
||||
return true;
|
||||
}
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
const state = INLINE_SUGGESTION_KEY.getState(view.state);
|
||||
if (state.visible) {
|
||||
view.dispatch(view.state.tr.setMeta(INLINE_SUGGESTION_KEY, { suggestion: '', visible: false }));
|
||||
currentSuggestion = '';
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
appendTransaction: (transactions, oldState, newState) => {
|
||||
const lastTr = transactions[transactions.length - 1];
|
||||
if (!lastTr || !lastTr.docChanged) return null;
|
||||
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(async () => {
|
||||
const { from, to } = newState.selection;
|
||||
const prefix = newState.doc.textBetween(0, from);
|
||||
const suffix = newState.doc.textBetween(to, newState.doc.content.size);
|
||||
|
||||
try {
|
||||
const res = await fetch(apiUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prefix, suffix, languageId: 'markdown' }),
|
||||
});
|
||||
|
||||
if (!res.ok) return;
|
||||
|
||||
const reader = res.body?.getReader();
|
||||
if (!reader) return;
|
||||
|
||||
let text = '';
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
const chunk = new TextDecoder().decode(value);
|
||||
const lines = chunk.split('\n').filter(l => l.startsWith('data: '));
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6));
|
||||
if (data.content) text += data.content;
|
||||
if (data.done) break;
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
if (text && newState.selection.from === from) {
|
||||
currentSuggestion = text;
|
||||
suggestionPos = { from, to: from + text.length };
|
||||
newState.apply(newState.tr.setMeta(INLINE_SUGGESTION_KEY, { suggestion: text, visible: true }));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Inline suggestion error:', e);
|
||||
}
|
||||
}, DEBOUNCE_MS);
|
||||
|
||||
return null;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export { createInlineSuggestionPlugin, INLINE_SUGGESTION_KEY };
|
||||
Reference in New Issue
Block a user