一個基於 Node.js 的 AI 聊天 Web 應用，提供類似 ChatGPT 的用戶界面，連接到港話通（HKChat）AI 服務，支持實時流式響應和多種功能模塊。
港話通（HKChat）是一個專為香港用戶設計的 AI 聊天助手，提供多種本地化功能，包括巴士查詢、法律諮詢、金融服務、深度思考和天氣查詢等模塊。
- 🚀 Express 服務器 - 提供 SSE API 端點，連接 HKChat 後端服務
- 💬 現代化聊天界面 - 類似 ChatGPT 的用戶體驗
- 📡 實時流式響應 - 使用 Server-Sent Events (SSE) 實現打字機效果
- 🎨 美觀的深色主題 - 專業的 UI 設計
- 📱 響應式設計 - 完美支持桌面和移動設備
- 📝 Markdown 支持 - AI 回應自動渲染 Markdown 格式
- ⚙️ 功能模塊切換 - 支持多種 HKChat 功能模塊：
- 🚌 巴士查詢
- ⚖️ 法律諮詢
- 💰 金融服務
- 🧠 深度思考
- 🌤️ 天氣查詢
- 💾 聊天歷史管理 - 側邊欄顯示所有聊天記錄
- 🔄 對話上下文 - 自動維護對話歷史
- Node.js - 運行時環境
- Express - Web 框架
- TypeScript - 類型安全的 JavaScript
- Axios - HTTP 客戶端
- eventsource-parser - SSE 流式數據解析
- 原生 HTML/CSS/JavaScript - 無框架依賴
- Marked.js - Markdown 解析和渲染
- 響應式 CSS - 移動端適配
- ts-node - TypeScript 直接執行
- nodemon - 開發時自動重啟
- TypeScript Compiler - 編譯檢查
- Node.js >= 14.0.0
- npm >= 6.0.0
# 克隆項目
git clone <repository-url>
cd hkchat-web
# 安裝依賴
npm install使用 nodemon 啟動開發服務器，支持自動重啟：
npm run dev服務器將在 http://localhost:3000 啟動，並自動監聽 src 目錄下的 TypeScript 文件變更。
# 編譯 TypeScript
npm run build
# 啟動服務器
npm start- 啟動服務器後，在瀏覽器中打開
http://localhost:3000 - 在輸入框中輸入您的問題
- 按
Enter或點擊發送按鈕 - AI 將以流式方式回應您的問題
點擊標題欄右上角的「⚙️ 功能設定」按鈕，可以啟用/禁用以下功能：
- 巴士查詢 - 查詢香港巴士路線和時間
- 法律諮詢 - 獲取法律相關建議
- 金融服務 - 金融資訊和建議
- 深度思考 - 啟用更深入的思考模式
- 天氣查詢 - 查詢天氣資訊
- 側邊欄 - 顯示所有聊天記錄
- 桌面端：側邊欄始終顯示
- 移動端：點擊標題欄左側的 ☰ 按鈕打開/關閉
- 新對話 - 點擊側邊欄的「+ 新對話」按鈕
- 切換聊天 - 點擊側邊欄中的聊天項目
- 刪除聊天 - 懸停在聊天項目上，點擊 × 按鈕
發送聊天請求並接收 SSE 流式響應。
請求體：
{
"query": "您的問題",
"history_messages": [
{
"role": "user",
"content": "之前的問題"
},
{
"role": "assistant",
"content": "之前的回答"
}
],
"chat_id": "可選的聊天 ID（用於繼續現有對話）",
"file_ids": [],
"features": {
"bus": false,
"legal": false,
"finance": false,
"thinking": false,
"weather": false
}
}響應： SSE 格式的流式數據，每個事件包含：
{
"content": "增量內容",
"chat_id": "聊天 ID",
"done": false
}當 done: true 時，表示響應完成。
健康檢查端點，返回服務器狀態。
響應：
{
"status": "ok"
}hkchat-web/
├── src/
│ ├── server.ts # Express 服務器主文件
│ └── hkchatStream.ts # 原始 SSE 測試腳本
├── public/
│ ├── index.html # 前端 HTML 頁面
│ ├── styles.css # 樣式文件
│ └── app.js # 前端 JavaScript 邏輯
├── lib/ # 編譯後的 JavaScript (自動生成)
├── data/ # 數據存儲目錄（自動生成）
├── node_modules/ # 依賴包
├── package.json # 項目配置
├── tsconfig.json # TypeScript 配置
├── nodemon.json # Nodemon 配置
└── README.md # 本文件
PORT- 服務器端口（默認: 3000）
服務器連接到 https://chat.hkchat.app/goapi/v1/chat/stream，使用 JWT token 進行認證。
- 左側：聊天歷史側邊欄（始終顯示）
- 中間：聊天消息區域
- 右側：功能設定按鈕
- 頂部：標題欄（包含菜單按鈕）
- 中間：聊天消息區域
- 底部：輸入框
- 側邊欄：可通過按鈕切換顯示/隱藏
-
服務器端 (
src/server.ts)- 處理 HTTP 請求
- 連接 HKChat API
- 轉發 SSE 流式響應
- 管理 CORS 和靜態文件服務
-
客戶端 (
public/app.js)- 聊天界面邏輯
- SSE 流式數據處理
- Markdown 渲染
- 聊天歷史管理
如需修改服務器端口，可以設置環境變量：
PORT=8080 npm run devISC
歡迎提交 Issue 和 Pull Request！
如有問題或建議，請通過 Issue 聯繫。
港話通（HKChat） - 讓 AI 更懂香港