SvelteChatKit：與提供商無關的AI聊天UI，支持OpenAI、Dify、n8n等

SvelteChatKit 是一個為 SvelteKit 2 和 Svelte 5（Runes）設計的完整流式聊天界面，能夠通過一個統一接口與任何 LLM 後端通信。無論是 OpenAI 兼容 API、Ollama、Dify 還是自定義端點，只需更改配置對象即可切換，而 UI、狀態管理、Markdown 渲染和持久化邏輯完全不變。如果你不希望聊天 UI 綁定在某一個供應商的 API 上，這個工具包就是為你準備的。

該工具包的主要特性包括：逐 token 流式渲染（支持 SSE、NDJSON 或純文本流），並提供乾淨的中止按鈕；提供商無關架構，通過一個 ChatProvider 接口即可添加新後端，無需改動核心代碼；會話歷史通過 localStorage 持久化（可選，SSR 安全）；支持 GFM 格式的 Markdown 渲染和 highlight.js 代碼高亮，並使用 DOMPurify 進行淨化；智能自動滾動，僅在用户接近底部時跟隨流，當用户向上滾動時不會強制跳轉，並提供一個浮動的“滾動到底部”按鈕；完善的錯誤處理，帶有類型化的 ChatProviderError 和可操作的消息；移動端響應式設計，支持 375px 寬度，16px 輸入框（避免 iOS 縮放），自動增長文本區域；暗色模式通過 Tailwind dark: 變體實現；TypeScript 嚴格模式，完全類型化的公共 API；零配置演示模式，內置 mock 提供商無需 API 密鑰即可運行。

支持的提供商包括：OpenAI 兼容（OpenAI、OpenRouter、Groq、LM Studio、vLLM、llama.cpp、Azure 風格網關），使用 SSE 傳輸；Ollama，使用 NDJSON 傳輸；Dify，使用 SSE 傳輸；自定義端點，自動檢測傳輸方式（SSE、流式文本或純文本）；以及內置的 mock 提供商用於演示。

快速開始：克隆倉庫後執行 npm install，拷貝 .env.example 為 .env，然後運行 npm run dev 即可在 mock 提供商下開始聊天，無需任何密鑰。填寫 .env 文件可切換至真實後端。需要 Node 20 以上版本。

使用方式簡單：創建提供商實例，傳遞給 Chat 實例，然後渲染 ChatWindow 組件。Chat 暴露了 runes 響應式的 messages、status、error 和 busy 狀態，以及 send()、stop()、clear() 和 setProvider() 方法，你也可以基於它構建完全自定義的 UI。

添加自定義提供商僅需約 20 行代碼：實現 ChatProvider 接口，然後通過 registerProvider 註冊，之後即可通過工廠函數使用。工具包提供了詳細的文檔指導如何添加新提供商。

配置方面，默認可通過 .env 文件中的 PUBLIC_* 變量進行設置，所有變量均為可選。注意，PUBLIC_* 變量會嵌入客户端 bundle 中，因此生產環境中應將密鑰保留在服務端，通過自定義端點代理添加 Authorization 頭部。

架構上，組件層包括 ChatWindow、MessageList、MessageBubble、ChatInput、Markdown 和 TypingIndicator，狀態管理由 Chat runes 類負責，底層通過 ChatProvider 接口與具體後端通信。傳輸層輔助函數包括 sseStream、lineStream、textStream 和 ensureOk。

項目的路線圖包括：認證支持（會話作用域密鑰、令牌刷新鈎子）、向量數據庫/RAG 集成助手、插件系統（消息中間件、自定義渲染器）、更多 UI 主題、文件附件、函數/工具調用 UI，以及發佈為 npm 包。

SvelteChatKit 採用 MIT 許可，歡迎貢獻代碼、報告 bug 或提交新提供商。