# 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 模式开始实现。