Vue3 AI 聊天 UI

一個使用 Vue3 開發的現代化 AI 聊天界面，支援與本地 AI 模型進行流式對話。

功能特色

• 🎨 現代化設計: 美觀的玻璃擬態設計風格
• 💬 實時聊天: 支援流式響應，實時顯示 AI 回答
• 🧠 智能記憶管理: 自動管理對話上下文，支援滑動窗口和摘要策略
• 📊 上下文監控: 即時顯示對話統計、token 使用量和記憶管理狀態
• 📂 多對話管理: 左側邊欄支援多個對話 Session
• 💾 本地存儲: 自動保存對話歷史到瀏覽器
• ⚙️ 自定義設定: 可調整 API 網址、模型參數和記憶管理參數
• 📱 響應式設計: 支援桌面和移動設備
• 🔄 自動滾動: 新訊息自動滾動到底部
• 🏷️ 智能標題: 根據首個訊息自動生成對話標題
• ✏️ 編輯功能: 可重新命名和刪除對話
• 🔄 重新生成: 對 AI 回覆不滿意時可重新生成獲得不同結果
• 🗑️ 刪除訊息: 可刪除任意單條訊息（用戶或 AI 訊息）
• ✏️ 編輯訊息: 可編輯任意訊息內容，支持快捷鍵操作
• ⏹️ 中斷生成: 可隨時停止 AI 正在生成的回覆

系統需求

• Node.js 16+
• 本地 AI 服務運行在 http://localhost:1234

安裝與運行

網頁版

1. 安裝依賴

npm install

2. 啟動開發服務器

npm run dev

3. 構建生產版本

npm run build

桌面版 🖥️

方案一：快速啟動（推薦）

1. 雙擊 desktop/ChatUI.bat - 一鍵啟動
2. 應用會自動在瀏覽器中開啟
3. 無需手動操作，全自動化

方案二：打包成可執行檔案

# 安裝依賴
npm install

# 構建並打包
npm run build:desktop

📋 詳細說明請參考 desktop/README.md

使用說明

基本操作

1. 發送訊息: 在底部輸入框輸入訊息，按 Enter 或點擊發送按鈕
2. 查看回答: AI 的回答會以流式方式實時顯示
3. 清除對話: 點擊右上角的垃圾桶圖標清除當前對話記錄

多對話管理

1. 創建新對話: 點擊左側邊欄的 "+" 按鈕創建新的對話
2. 切換對話: 在左側邊欄點擊任意對話即可切換
3. 重新命名: 點擊對話旁的編輯圖標可修改對話標題
4. 刪除對話: 點擊垃圾桶圖標刪除不需要的對話
5. 自動保存: 所有對話會自動保存到瀏覽器本地存儲
6. 摺疊側邊欄: 點擊漢堡選單圖標可摺疊/展開側邊欄

重新生成功能

1. 重新生成回覆: 當對AI的回覆不滿意時，可以點擊最後一條AI消息旁的"🔄 重新生成"按鈕
2. 獲得新答案: 系統會刪除原回覆並基於相同的對話上下文重新生成一個不同的回答
3. 安全限制: 只有最後一條AI回覆可以重新生成，確保對話邏輯的完整性
4. 加載狀態: 重新生成過程中按鈕會顯示旋轉動畫並處於禁用狀態

訊息管理功能

編輯訊息

1. 編輯任意訊息: 點擊訊息右上角的"✏️"編輯按鈕
2. 編輯模式: 自動聚焦到編輯文本框，支持多行編輯
3. 快捷鍵操作:
   • Ctrl + Enter: 保存編輯
   • Esc: 取消編輯
4. 編輯標識: 編輯過的訊息會顯示編輯標識
5. 即時保存: 編輯內容自動保存到本地存儲

刪除訊息

1. 刪除任意訊息: 點擊訊息右上角的"🗑️"刪除按鈕
2. 確認對話框: 刪除前會彈出確認提示
3. 永久刪除: 刪除操作無法撤銷，請謹慎使用
4. 即時更新: 刪除後對話記錄立即更新

中斷生成功能

1. 停止生成: 在 AI 正在生成回覆時，輸入框旁會顯示紅色的"⏹️"停止按鈕
2. 立即中斷: 點擊停止按鈕可立即中斷 AI 的回覆生成
3. 保留內容: 已生成的部分內容會被保留
4. 無錯誤提示: 用戶主動中斷不會顯示錯誤訊息
5. 按鈕切換: 停止生成後按鈕會切換回發送按鈕

對話記憶管理

該應用實現了智能的對話上下文管理功能，確保 AI 能夠理解和記住對話歷史：

上下文信息面板

• 訊息數量: 顯示當前對話的訊息總數
• 預估 Tokens: 估算當前對話消耗的 token 數量
• 管理狀態: 顯示是否已啟用上下文管理
• 記憶使用率: 圖表顯示當前記憶使用情況

智能管理策略

1. 滑動窗口: 當訊息數量超過閾值時，保留最近的重要對話
2. 對話摘要: 自動將早期對話壓縮為摘要，節省 token 但保留關鍵信息
3. 動態調整: 根據對話長度自動選擇最佳的管理策略

設定配置

點擊右上角的設定圖標可以調整以下參數：

基本設定

• API 網址: AI 服務的端點 (預設: http://localhost:1234/v1/chat/completions)
• 模型: 使用的 AI 模型名稱
• 溫度: 控制回答的隨機性 (0-1，數值越高越隨機)
• 系統訊息: 設定 AI 的行為和角色

對話記憶管理

• 啟用智能記憶管理: 開啟/關閉自動上下文管理
• 啟用對話摘要: 開啟/關閉自動摘要功能
• 最大訊息數量: 設定觸發上下文管理的訊息數量閾值 (5-50)
• 摘要觸發閾值: 設定開始生成摘要的訊息數量 (10-30)

鍵盤快捷鍵

• Enter: 發送訊息
• Shift + Enter: 在輸入框中換行

API 兼容性

此應用與 OpenAI ChatGPT API 格式兼容，支援以下 API 端點：

• POST /v1/chat/completions - 聊天對話
• GET /v1/models - 獲取可用模型列表

API 請求格式

{
  "model": "TheDrummer/Rocinante-12B-v1.1-GGUF",
  "messages": [
    { "role": "system", "content": "你是一個友善且有幫助的 AI 助手。" },
    { "role": "user", "content": "你好" }
  ],
  "temperature": 0.7,
  "max_tokens": -1,
  "stream": true
}

技術架構

• 前端框架: Vue 3 (Composition API)
• 構建工具: Vite
• 樣式: CSS3 (玻璃擬態效果)
• HTTP 客戶端: Fetch API (原生)
• 狀態管理: Vue 3 響應式系統 + Composables

項目結構

src/
├── components/
│   ├── ChatMessage.vue      # 聊天訊息組件
│   ├── ChatInput.vue        # 訊息輸入組件
│   ├── Sidebar.vue          # 側邊欄組件
│   └── ContextInfo.vue      # 上下文信息組件
├── composables/
│   ├── useChat.js           # 聊天功能邏輯
│   ├── useSession.js        # 會話管理邏輯
│   └── useContextManager.js # 上下文管理邏輯
├── App.vue                  # 主應用組件
├── main.js                  # 應用入口
└── style.css                # 全局樣式

開發說明

添加新功能

1. 在 src/composables/useChat.js 中添加新的聊天功能
2. 在相應組件中使用新功能
3. 更新樣式以匹配設計風格

自定義樣式

所有樣式都使用 CSS 變量，可以輕鬆自定義：

:root {
  --primary-color: #2196f3;
  --background-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --chat-background: rgba(255, 255, 255, 0.95);
}

故障排除

常見問題

1. 無法連接到 AI 服務

   • 確認 AI 服務正在運行
   • 檢查 API 網址設定是否正確
   • 查看瀏覽器控制台的錯誤訊息

2. 訊息發送失敗

   • 檢查網絡連接
   • 確認 API 格式是否正確
   • 查看伺服器日誌

3. 樣式顯示異常

   • 清除瀏覽器緩存
   • 確認所有 CSS 文件已正確加載

貢獻指南

歡迎提交 Issue 和 Pull Request 來改進這個項目！

授權

此項目採用 MIT 授權條款。