9.4 · 笔记中的 AI 集成（AI Integration in Notes）

笔记中的 AI 集成（中文译文）

原始 DeepWiki 页面：https://deepwiki.com/open-webui/open-webui/9.4-ai-integration-in-notes

翻译时间：2026-06-09T16:10:05.176Z

翻译模型：deepseek-chat

原文字符数：12004

项目：Open WebUI (open-webui)

---

笔记中的 AI 集成

相关源文件

以下文件为本 wiki 页面的生成提供了上下文：

• src/lib/components/icons/AdjustmentsHorizontalOutline.svelte
• src/lib/components/icons/ArrowUpLeft.svelte
• src/lib/components/notes/NoteEditor.svelte
• src/lib/components/notes/NoteEditor/Chat.svelte
• src/lib/components/notes/NoteEditor/Chat/Message.svelte
• src/lib/components/notes/NoteEditor/Chat/Messages.svelte
• src/lib/components/notes/NoteEditor/Controls.svelte
• src/lib/components/notes/NotePanel.svelte

目的与范围

本文档记录了集成到笔记系统中的 AI 驱动功能。笔记编辑器提供了多种 AI 能力，包括自动标题生成、内容增强，以及一个能够根据用户指令编辑笔记的对话式 AI 助手。这些功能利用兼容 OpenAI 的聊天补全 API 来处理和转换笔记内容。

关于底层 TipTap 编辑器架构和协作编辑的信息，请参阅 TipTap 编辑器架构 和 协作编辑。关于模型提供商集成的详细信息，请参阅 LLM 提供商集成。

---

系统架构

笔记中的 AI 集成由三个主要功能组成，由 NoteEditor 组件协调。它在桌面端使用分栏布局，在移动端使用抽屉式布局。

笔记集成组件与数据流

graph TB
    subgraph "前端组件（代码实体空间）"
        NoteEditor["NoteEditor.svelte"]
        RichTextInput["RichTextInput.svelte"]
        ChatPanel["Chat.svelte"]
        ControlsPanel["Controls.svelte"]
        NotePanel["NotePanel.svelte"]
    end

    subgraph "核心逻辑（自然语言空间）"
        TitleGen["generateTitleHandler()"]
        ContentEnhance["enhanceNoteHandler()"]
        ChatCompletion["chatCompletionHandler()"]
    end

    NoteEditor --> RichTextInput
    NoteEditor --> NotePanel
    NotePanel --> ChatPanel
    NotePanel --> ControlsPanel

    NoteEditor --> TitleGen
    NoteEditor --> ContentEnhance
    ChatPanel --> ChatCompletion

    subgraph "后端接口"
        OpenAIAPI["/api/chat/completions"]
        FilesAPI["/api/v1/files"]
    end

    TitleGen --> OpenAIAPI
    ContentEnhance --> OpenAIAPI
    ChatCompletion --> OpenAIAPI
    ChatPanel --> FilesAPI

来源：src/lib/components/notes/NoteEditor.svelte:45-48、src/lib/components/notes/NoteEditor/Chat.svelte:1-60、src/lib/components/notes/NoteEditor/Controls.svelte:1-40、src/lib/components/notes/NotePanel.svelte:1-109

---

AI 驱动的标题生成

概述

笔记编辑器能够利用 AI，根据笔记内容自动生成简洁且带有表情符号的标题。该功能会分析笔记的 Markdown 内容，并以内容的主要语言生成一个 3-5 个词的标题。

实现

标题生成由 generateTitleHandler 函数触发，该函数将笔记内容与专门的提示模板一起发送给所选模型。

关键函数： generateTitleHandler() 位于 src/lib/components/notes/NoteEditor.svelte:253-326

提示模板：

DEFAULT_TITLE_GENERATION_PROMPT_TEMPLATE = `### 任务：
生成一个简洁的、包含表情符号的 3-5 词标题，以内容的主要语言总结其主旨。
### 指南：
- 标题应清晰代表内容的主要主题或主旨。
- 最多使用 5 个词。
- 在标题开头或结尾包含一个相关的表情符号。
- 确保标题与内容使用相同的语言。
### 输出：
JSON 格式：{ "title": "你的简洁标题" }`

流程

标题生成序列

sequenceDiagram
    participant 用户
    participant NoteEditor
    participant generateTitleHandler
    participant API as "chatCompletion /generateOpenAIChatCompletion"

    用户->>NoteEditor: 点击 Sparkles 按钮
    NoteEditor->>generateTitleHandler: 触发

    generateTitleHandler->>NoteEditor: 设置 titleGenerating = true
    generateTitleHandler->>API: POST 提示 + 笔记内容
    API-->>generateTitleHandler: JSON { "title": "..." }

    generateTitleHandler->>NoteEditor: 更新 note.title
    generateTitleHandler->>NoteEditor: 设置 titleGenerating = false
    generateTitleHandler->>NoteEditor: changeDebounceHandler()（自动保存）

状态管理

变量	类型	用途
titleGenerating	boolean	跟踪标题生成是否正在进行中 src/lib/components/notes/NoteEditor.svelte:155
note.title	string	已生成或用户编辑的标题 src/lib/components/notes/NoteEditor.svelte:109
selectedModelId	string	用于生成的模型 ID src/lib/components/notes/NoteEditor.svelte:140

来源：src/lib/components/notes/NoteEditor.svelte:253-326、src/lib/apis/openai.ts

---

内容增强

概述

内容增强功能允许用户对整篇笔记或选定的文本部分应用 AI 驱动的编辑。该功能使用流式响应来实时显示编辑进度。

实现

关键函数： enhanceNoteHandler() 位于 src/lib/components/notes/NoteEditor.svelte:328-349

变量

变量	类型	用途
editing	boolean	指示活跃的 AI 编辑会话 src/lib/components/notes/NoteEditor.svelte:160
streaming	boolean	指示流式响应正在进行中 src/lib/components/notes/NoteEditor.svelte:161
stopResponseFlag	boolean	用户触发的中止信号 src/lib/components/notes/NoteEditor.svelte:163
versionIdx	`number \	null`	用于回滚的版本历史索引 src/lib/components/notes/NoteEditor.svelte:139

处理流程：

1. 验证 selectedModelId 已设置 src/lib/components/notes/NoteEditor.svelte:329-331。
2. 在 $models 存储中查找模型 src/lib/components/notes/NoteEditor.svelte:333-335。
3. 设置 editing = true src/lib/components/notes/NoteEditor.svelte:343。
4. 触发补全逻辑，实时更新 note.data.content.html 或 note.data.content.md。
5. 调用 onEdited() 刷新 TipTap 编辑器内容 src/lib/components/notes/NoteEditor.svelte:248-251。

来源：src/lib/components/notes/NoteEditor.svelte:328-349、src/lib/components/notes/NoteEditor.svelte:160-163

---

基于聊天的 AI 助手

概述

聊天助手提供了一个对话式界面，用于与笔记进行交互。它支持两种模式：编辑模式（作为文档编辑器）和聊天模式（标准助手）。

组件结构

聊天助手在 Chat.svelte 组件中实现：

聊天组件层次结构

graph LR
    ChatSvelte["Chat.svelte"]
    Messages["Messages.svelte"]
    MessageInput["MessageInput.svelte"]
    Message["Message.svelte"]

    ChatSvelte --> Messages
    ChatSvelte --> MessageInput
    Messages --> Message

来源：src/lib/components/notes/NoteEditor/Chat.svelte:45-46、src/lib/components/notes/NoteEditor/Chat/Messages.svelte:3

文档编辑器提示

编辑模式的系统提示定义为 DEFAULT_DOCUMENT_EDITOR_PROMPT，位于 src/lib/components/notes/NoteEditor/Chat.svelte:83-102。它指示模型使用 XML 标签来构建输入结构：

• <notes>：现有笔记内容。
• <context>：来自附加文件的内容。
• <selection>：编辑器中当前选中的文本。

上下文注入

在 chatCompletionHandler() 期间，助手从多个来源接收上下文：

上下文元素	XML 标签	来源
笔记内容	<notes>	note.data.content.md src/lib/components/notes/NoteEditor/Chat.svelte:166
文件内容	<context>	files.map(f => f.file.data.content) src/lib/components/notes/NoteEditor/Chat.svelte:168
文本选择	<selection>	selectedContent.text src/lib/components/notes/NoteEditor/Chat.svelte:170

聊天补全处理器

函数： chatCompletionHandler() 位于 src/lib/components/notes/NoteEditor/Chat.svelte:122-292

处理器管理流式传输和 UI 更新：

1. 系统提示构建：根据 editEnabled 在标准助手提示和文档编辑器提示之间切换 src/lib/components/notes/NoteEditor/Chat.svelte:159-163。
2. 流式传输：使用 splitStream('\n') 和读取器处理增量块 src/lib/components/notes/NoteEditor/Chat.svelte:207-213。
3. 内容应用：

- 如果 editEnabled 且无选择：在流式传输期间直接更新 note.data.content.md src/lib/components/notes/NoteEditor/Chat.svelte:256-258。 - 如果存在选择：在完成时通过 editor.commands.insertContentAt 替换选择内容 src/lib/components/notes/NoteEditor/Chat.svelte:234-243。

来源：src/lib/components/notes/NoteEditor/Chat.svelte:122-292、src/lib/components/notes/NoteEditor/Chat.svelte:159-170

---

消息显示与交互

消息组件

单个消息由 Message.svelte 渲染。

可用操作：

• 插入：将消息内容复制到笔记编辑器的当前光标位置或替换选择内容 src/lib/components/notes/NoteEditor/Chat/Message.svelte:30-39。
• 编辑：允许用户在聊天历史中手动编辑消息 src/lib/components/notes/NoteEditor/Chat/Message.svelte:41-50。
• 删除：从本地 messages 数组中移除消息 src/lib/components/notes/NoteEditor/Chat/Message.svelte:52-74。

来源：src/lib/components/notes/NoteEditor/Chat/Message.svelte:1-104、src/lib/components/notes/NoteEditor/Chat/Messages.svelte:12-31

---

状态管理与持久化

版本历史集成

在进行重要的 AI 编辑之前，系统可以捕获版本。insertNoteVersion() 确保仅在内容与上一个版本不同时，才将内容快照存储到 note.data.versions 中 src/lib/components/notes/NoteEditor.svelte:233-246。

防抖自动保存

笔记元数据和文件附件通过 updateNoteById 以 200ms 的防抖间隔保存到后端 src/lib/components/notes/NoteEditor.svelte:207-223。

来源：src/lib/components/notes/NoteEditor.svelte:207-246

---

文件上下文集成

控制面板

Controls.svelte 组件管理可供 AI 使用的上下文。

• 文件管理：显示附加文件并允许移除 src/lib/components/notes/NoteEditor/Controls.svelte:45-84。
• 模型选择：用于切换聊天和标题生成所使用的活跃 LLM 的下拉菜单 src/lib/components/notes/NoteEditor/Controls.svelte:90-101。

来源：src/lib/components/notes/NoteEditor/Controls.svelte:41-103

---

UI 集成点

NotePanel 布局

NotePanel.svelte 组件充当 AI 工具（聊天/控制）的容器。它提供：

• 响应式设计：对于宽度小于 1000px 的屏幕使用 Drawer，对于大屏幕使用 Pane（通过 paneforge）src/lib/components/notes/NotePanel.svelte:18-32。
• 可调整大小的侧边栏：集成 PaneResizer，允许用户调整 AI 助手面板的宽度 src/lib/components/notes/NotePanel.svelte:80-87。

来源：src/lib/components/notes/NotePanel.svelte:1-109