petty09190/ai-showcase-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
32b19e9a0fedf5b6186ad3f444a2164d7f9280bc
ai-showcase-platform/CHATBOT_ANALYSIS.md

8.0 KiB
Raw Blame History

AI智能助手 (ChatBot) 組件分析

1. 組件概述

1.1 功能定位

AI智能助手是一個內嵌的聊天機器人組件，為用戶提供即時的系統使用指導和問題解答服務。

1.2 核心特性

  • 即時對話: 與AI助手進行自然語言對話
  • 智能回答: 基於DeepSeek API的智能回應
  • 快速問題: 提供相關問題的快速選擇
  • 上下文記憶: 保持對話的連續性

2. 技術實現

2.1 技術棧

// 核心技術
- React 19 (Hooks)
- TypeScript 5
- DeepSeek Chat API
- Tailwind CSS
- shadcn/ui 組件庫

2.2 組件結構

// 主要接口定義
interface Message {
  id: string
  text: string
  sender: "user" | "bot"
  timestamp: Date
  quickQuestions?: string[]
}

// 組件狀態
const [isOpen, setIsOpen] = useState(false)           // 對話框開關
const [messages, setMessages] = useState<Message[]>() // 訊息列表
const [inputValue, setInputValue] = useState("")      // 輸入值
const [isTyping, setIsTyping] = useState(false)       // 打字狀態
const [isLoading, setIsLoading] = useState(false)     // 載入狀態

2.3 API整合

// DeepSeek API 配置
const DEEPSEEK_API_KEY = "sk-3640dcff23fe4a069a64f536ac538d75"
const DEEPSEEK_API_URL = "https://api.deepseek.com/v1/chat/completions"

// API 調用函數
const callDeepSeekAPI = async (userMessage: string): Promise<string> => {
  // 實現細節...
}

3. 功能詳解

3.1 對話能力

3.1.1 前台功能指導

  • 註冊流程: 如何註冊參賽團隊
  • 作品提交: 如何提交和管理作品
  • 投票系統: 如何參與投票和收藏
  • 個人中心: 如何管理個人資料

3.1.2 後台管理協助

  • 競賽創建: 如何創建和管理競賽
  • 評審管理: 如何管理評審團成員
  • 評分系統: 如何設定評分標準
  • 獎項設定: 如何配置獎項類型

3.1.3 系統使用指南

  • 操作步驟: 提供具體的操作指引
  • 常見問題: 解答用戶常見疑問
  • 最佳實踐: 推薦最佳使用方法

3.2 智能特性

3.2.1 內容清理

const cleanResponse = (text: string): string => {
  return text
    // 移除 Markdown 格式
    .replace(/\*\*(.*?)\*\*/g, '$1')
    .replace(/\*(.*?)\*/g, '$1')
    .replace(/`(.*?)`/g, '$1')
    .replace(/#{1,6}\s/g, '')
    .replace(/^- /g, '• ')
    .replace(/^\d+\.\s/g, '')
    // 移除多餘空行
    .replace(/\n\s*\n\s*\n/g, '\n\n')
    // 限制文字長度
    .slice(0, 300)
    .trim()
}

3.2.2 快速問題生成

const generateQuickQuestions = (userQuestion: string): string[] => {
  const question = userQuestion.toLowerCase()
  
  // 根據問題類型生成相關建議
  if (question.includes('註冊') || question.includes('團隊')) {
    return [
      "如何提交作品？",
      "怎麼查看競賽詳情？",
      "如何收藏作品？",
      "怎麼進行投票？"
    ]
  }
  // 更多邏輯...
}

3.3 用戶體驗

3.3.1 界面設計

  • 浮動按鈕: 固定在右下角的聊天入口
  • 模態對話框: 全屏遮罩的聊天界面
  • 響應式設計: 適配不同螢幕尺寸
  • 無障礙設計: 支持鍵盤導航

3.3.2 交互體驗

  • 即時反饋: 輸入狀態和載入動畫
  • 自動滾動: 新訊息自動滾動到底部
  • 快捷操作: Enter鍵發送訊息
  • 錯誤處理: 網路錯誤的優雅處理

4. 系統提示詞 (System Prompt)

4.1 提示詞結構

const systemPrompt = `你是一個競賽管理系統的AI助手，專門幫助用戶了解如何使用這個系統。

系統功能包括：

後台管理功能：
1. 競賽管理 - 創建、編輯、刪除競賽
2. 評審管理 - 管理評審團成員
3. 評分系統 - 手動輸入評分或讓評審自行評分
4. 團隊管理 - 管理參賽團隊
5. 獎項管理 - 設定各種獎項
6. 評審連結 - 提供評審登入連結

前台功能：
1. 競賽瀏覽 - 查看所有競賽資訊和詳細內容
2. 團隊註冊 - 如何註冊參賽團隊和提交作品
3. 作品展示 - 瀏覽參賽作品和投票功能
4. 排行榜 - 查看人氣排行榜和得獎名單
5. 個人中心 - 管理個人資料和參賽記錄
6. 收藏功能 - 如何收藏喜歡的作品
7. 評論系統 - 如何對作品進行評論和互動
8. 搜尋功能 - 如何搜尋特定競賽或作品
9. 通知系統 - 查看競賽更新和個人通知
10. 幫助中心 - 常見問題和使用指南

請用友善、專業的語氣回答用戶問題，並提供具體的操作步驟。回答要簡潔明瞭，避免過長的文字。

重要：請不要使用任何Markdown格式，只使用純文字回答。不要使用**、*、#、-等符號。

回答時請使用繁體中文。`

4.2 回答規範

  • 語言: 繁體中文
  • 格式: 純文字，無Markdown
  • 長度: 限制在300字以內
  • 語氣: 友善、專業
  • 內容: 具體操作步驟

5. 錯誤處理

5.1 API錯誤處理

try {
  const response = await fetch(DEEPSEEK_API_URL, {
    // API 調用配置...
  })
  
  if (!response.ok) {
    throw new Error(`API request failed: ${response.status}`)
  }
  
  const data = await response.json()
  return cleanResponse(data.choices[0]?.message?.content || "抱歉，我現在無法回答您的問題，請稍後再試。")
} catch (error) {
  console.error("DeepSeek API error:", error)
  return "抱歉，我現在無法連接到AI服務，請檢查網路連接或稍後再試。"
}

5.2 用戶體驗錯誤處理

  • 網路錯誤: 提示檢查網路連接
  • API限制: 提示稍後再試
  • 輸入驗證: 防止空訊息發送
  • 載入狀態: 防止重複發送

6. 性能優化

6.1 API優化

// 限制token數量以獲得更簡潔的回答
max_tokens: 200,
temperature: 0.7

6.2 組件優化

  • 訊息虛擬化: 大量訊息時的效能優化
  • 防抖處理: 避免頻繁API調用
  • 記憶化: 重複問題的快取處理
  • 懶加載: 按需載入組件

7. 安全考量

7.1 API密鑰安全

  • 環境變數: API密鑰存儲在環境變數中
  • 加密存儲: 敏感資訊加密處理
  • 訪問控制: 限制API調用頻率

7.2 數據隱私

  • 聊天記錄: 本地存儲，不上傳服務器
  • 個人資訊: 不收集敏感個人資訊
  • 數據清理: 定期清理過期數據

8. 擴展性設計

8.1 多語言支持

interface LocalizationConfig {
  language: string
  systemPrompt: Record<string, string>
  quickQuestions: Record<string, string[]>
  errorMessages: Record<string, string>
}

8.2 多AI模型支持

interface AIModelConfig {
  provider: 'deepseek' | 'openai' | 'anthropic'
  model: string
  apiKey: string
  apiUrl: string
  maxTokens: number
  temperature: number
}

8.3 自定義功能

  • 知識庫整合: 連接企業知識庫
  • FAQ系統: 自動回答常見問題
  • 工單系統: 複雜問題轉人工處理
  • 分析報告: 聊天數據分析

9. 使用指南

9.1 基本使用

  1. 點擊右下角的聊天按鈕
  2. 在輸入框中輸入問題
  3. 按Enter鍵或點擊發送按鈕
  4. 查看AI助手的回答
  5. 點擊快速問題進行後續對話

9.2 進階功能

  • 上下文記憶: 對話會保持上下文
  • 快速問題: 點擊建議問題快速提問
  • 錯誤重試: 網路錯誤時可重新發送
  • 對話重置: 關閉重開可開始新對話

9.3 最佳實踐

  • 具體問題: 提出具體明確的問題
  • 分步驟: 複雜操作分步驟詢問
  • 耐心等待: AI需要時間處理複雜問題
  • 反饋提供: 對回答不滿意時可重新提問

10. 未來規劃

10.1 短期目標

  • 添加語音輸入功能
  • 支持圖片上傳和識別
  • 增加更多快速問題模板
  • 優化回答品質和速度

10.2 長期目標

  • 整合企業知識庫
  • 支持多語言對話
  • 添加情感分析功能
  • 實現智能推薦系統

文檔版本: v1.0
最後更新: 2024年12月
負責人: 前端開發團隊