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 或提交新提供商。