从零到一：打造一个支持 RAG 的智能聊天应用

Next.js 15 + React 19 + TypeScript
Tailwind CSS 4 + 响应式设计
Vercel AI SDK + 流式响应

混合架构设计：
├── 客户端：文档处理 + 向量化 + 本地存储
└── 服务端：语义搜索 + 上下文生成

// useMultiTurnChat Hook - 统一管理对话状态
export function useMultiTurnChat() {
  const [currentConversationId, setCurrentConversationId] = useState<string | null>(null)
  const [conversations, setConversations] = useState<Conversation[]>([])
  
  // 监听消息变化并自动保存
  useEffect(() => {
    if (!currentConversationId || messages.length === 0) return
    
    const formattedMessages = messages.map(msg => ({
      id: msg.id,
      role: msg.role as 'user' | 'assistant',
      content: msg.content,
      timestamp: new Date(),
      conversationId: currentConversationId
    }))
    
    conversationManager.updateConversation(currentConversationId, {
      messages: formattedMessages
    })
  }, [messages, currentConversationId])
  
  return {
    messages, conversations, currentConversation,
    createNewConversation, switchConversation, deleteConversation
  }
}

// 文档处理 + 向量化
class DocumentProcessor {
  async processDocument(file: File): Promise<ProcessedDocument> {
    // 1. 读取文档内容
    const content = await this.readFileContent(file)
    
    // 2. 智能分块
    const chunks = await this.chunkText(content, {
      chunkSize: 500,
      chunkOverlap: 50
    })
    
    // 3. 向量化
    const embeddings = await this.generateEmbeddings(chunks)
    
    // 4. 存储到本地向量数据库
    await vectorStore.addDocument({
      id: generateId(),
      title: file.name,
      content,
      chunks: chunks.map((chunk, index) => ({
        id: generateId(),
        content: chunk,
        embedding: embeddings[index]
      }))
    })
    
    return processedDocument
  }
}

// RAG 管理器 - 智能检索
class RAGManager {
  async generateChatContext(query: string, topK: number = 3): Promise<string> {
    // 1. 查询向量化
    const queryEmbedding = await this.generateEmbedding(query)
    
    // 2. 语义搜索
    const results = await this.vectorStore.search(queryEmbedding, topK)
    
    // 3. 生成上下文
    if (results.length === 0) return ''
    
    const context = results
      .map(result => `文档：${result.documentTitle}\n内容：${result.content}`)
      .join('\n\n')
    
    return `基于以下文档内容回答问题：\n\n${context}\n\n问题：${query}`
  }
}

// localStorage 向量数据库
class LocalStorageVectorStore implements VectorStore {
  async search(queryEmbedding: number[], topK: number): Promise<SearchResult[]> {
    const allChunks = this.getAllChunks()
    
    // 计算余弦相似度
    const similarities = allChunks.map(chunk => ({
      ...chunk,
      similarity: this.cosineSimilarity(queryEmbedding, chunk.embedding)
    }))
    
    // 排序并返回 topK 结果
    return similarities
      .sort((a, b) => b.similarity - a.similarity)
      .slice(0, topK)
      .filter(result => result.similarity > 0.5) // 相似度阈值
  }
  
  private cosineSimilarity(a: number[], b: number[]): number {
    const dotProduct = a.reduce((sum, val, i) => sum + val * b[i], 0)
    const magnitudeA = Math.sqrt(a.reduce((sum, val) => sum + val * val, 0))
    const magnitudeB = Math.sqrt(b.reduce((sum, val) => sum + val * val, 0))
    return dotProduct / (magnitudeA * magnitudeB)
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .conversation-sidebar {
    position: fixed;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .conversation-sidebar.open {
    transform: translateX(0);
  }
}

const chunkingStrategy = {
  chunkSize: 500,        // 块大小
  chunkOverlap: 50,      // 重叠部分
  preserveStructure: true // 保持文档结构
}

// 监听 messages 变化自动保存
useEffect(() => {
  if (!currentConversationId || messages.length === 0) return
  
  // 实时保存到 localStorage
  conversationManager.updateConversation(currentConversationId, {
    messages: formattedMessages
  })
}, [messages, currentConversationId])

// Web Worker 异步处理
const worker = new Worker('/workers/document-processor.js')
worker.postMessage({ content, chunkSize })
worker.onmessage = (event) => {
  const { chunks, embeddings } = event.data
  // 处理结果
}