feat: implement inline autocomplete suggestions with FastAPI backend and Milkdown editor integration

2026-01-18 19:42:58 +08:00
parent ba49f82953
commit 6102f905ee
10 changed files with 633 additions and 52 deletions
@@ -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 模式开始实现。