Quick StartIntegrationAPI ReferenceCustomizationArchitecture

架構（Vibe Coder 指南）

深入了解 RAG 管道，適合想要理解其運作原理的開發者。

RAG 管道概覽

LaunchChat 使用檢索增強生成（RAG）技術，基於您的文件回答問題。

1. 資料攝入

解析 → 分塊 → 向量化 → 儲存

2. 檢索

查詢 → 向量搜尋 → 排序

3. 生成

上下文 → LLM → 回答 + 引用

資料攝入管道

1. 解析

從各種來源將內容解析為純文字：

  • Notion: Notion：逐塊解析，保留層級結構
  • DOCX: DOCX：透過 mammoth.js 擷取
  • Markdown: Markdown：使用 remark/unified 解析
  • Website: 網站：擷取並清除導覽列/頁尾

2. 分塊

文字被分割為重疊的分塊以最佳化檢索：

{
  targetSize: 400,    // tokens per chunk
  overlap: 50,        // token overlap between chunks
  preserveHeadings: true,  // keep heading context
  minChunkSize: 100   // minimum viable chunk
}

每個分塊都保留其父級標題層級作為上下文。

3. 向量化

分塊被轉換為1536維向量：

Model: text-embedding-3-small
Dimensions: 1536
Provider: OpenAI (via OpenRouter)

4. 儲存

向量儲存在帶有 pgvector 擴充功能的 PostgreSQL 中：

-- content_chunks table
id: uuid
knowledge_base_id: uuid
page_id: string
page_title: string
content: text
embedding: vector(1536)
parent_heading: string

檢索策略

混合搜尋

我們使用兩階段檢索流程：

  1. Vector Search: 向量搜尋：使用 pgvector 的 <=> 運算子計算餘弦相似度
  2. Keyword Fallback: 關鍵字回退：如果向量結果相似度較低，我們會補充關鍵字比對的分塊

相似度評分

-- Vector similarity query
SELECT *, 1 - (embedding <=> query_embedding) as similarity
FROM content_chunks
WHERE knowledge_base_id = $1
ORDER BY embedding <=> query_embedding
LIMIT 5

回答生成

信心度評分

在產生回答之前，我們會計算信心度分數：

confidence = bestSimilarity + (hasMultipleChunks ? 0.1 : 0) + 0.2
// Capped at 1.0

if (confidence < threshold) {
  return refusalMessage;  // Don't hallucinate
}

引用擷取

LLM 被指示使用 [Source N] 格式。我們解析這些引用並連結到原始頁面：

// Extract citations from answer
const citationPattern = /\[Source (\d+)\]/g;
const matches = answer.matchAll(citationPattern);

// Map to original pages
citations = matches.map(m => chunks[m[1] - 1])

文件編寫最佳實踐

合理組織文件結構以最佳化AI檢索效果：

推薦

  • 使用清晰、描述性的標題
  • 每個章節聚焦一個主題
  • 包含範例和程式碼片段
  • 定義術語和縮寫
  • 功能變更時及時更新文件

避免

  • 沒有結構的超長頁面
  • 跨頁面的重複內容
  • 過時或矛盾的資訊
  • 大量使用沒有替代文字的圖片
  • 僅包含導覽的頁面

AI 提示詞範本

將此提示詞複製到 Cursor、Windsurf 或 Claude Code 中，幫助整合 LaunchChat：

I'm integrating LaunchChat, an AI-powered support widget.

Widget Setup:
1. Add to HTML: <script>window.LaunchChatConfig = {widgetId: "ID"}</script>
   <script src="https://domain.com/widget.js" async></script>

2. For React/Next.js, create a client component that:
   - Sets window.LaunchChatConfig
   - Dynamically loads widget.js
   - Cleans up on unmount

API Reference:
- window.LaunchChatWidget.open() - Open chat
- window.LaunchChatWidget.close() - Close chat
- window.LaunchChatWidget.on(event, callback) - Listen to events
- Events: 'open', 'close', 'message', 'escalate', 'feedback'

Help me integrate this into my [FRAMEWORK] app.