新一代 WebChat 產品發展計畫報告

文件版本: 1.0 | 日期: 2025年9月12日

摘要

本報告旨在闡述新一代 WebChat 聊天元件的發展計畫。鑒於現行 Angular 版本 WebChat 存在功能限制（如無法更換主題、登入流程體驗不佳）且為臨時方案，我們計畫開發一個全新的、基於 React 技術棧的獨立產品。

新版 WebChat 將具備豐富的互動功能、高度的客製化彈性與優化的使用者體驗。為應對當前開發人力緊張的狀況，本計畫將採用分階段的 MVP (Minimum Viable Product) 模式進行開發，確保資源能有效利用，並逐步交付核心價值。

1. 新版 WebChat 功能特點

統一開發技術棧

採用 React、TypeScript 與 Vite 開發，搭配 Tailwind CSS，確保高效能、高可維護性，為產品的穩定性與擴展性奠定穩固基礎。

多樣化訊息支援

支援文字、圖片、檔案、語音訊息，並內建語音轉文字功能。更提供互動式卡片與快速回覆按鈕，豐富溝通體驗。

主題客製化

提供多種預設主題並支援深度顏色自訂，確保 WebChat 的視覺風格能與企業品牌完美契合，解決舊版痛點。

即時的客服諮詢或引導

提供嵌入式與浮動式部署，並具備主動提示功能，透過清晰的對話流程與獨立的登入系統，提升服務品質。

2. 發展的原因和計畫

2.1 發展原因

  1. 解決舊版限制: 現行 Angular 版本無法更換主題、登入流程體驗不佳，難以滿足商業需求。
  2. 技術升級與產品獨立: 遷移至 React 技術棧，將 WebChat 打造成一個獨立、可單獨銷售的產品，擴大市場應用。
  3. 統一服務架構: 建立 `WebChat -> BFF -> Aile Service -> GW -> AileAI` 的清晰架構，為未來擴展奠定基礎。

2.2 發展計畫

考量到開發人力有限，我們將採用分階段開發策略，每個階段交付一個 MVP，以達成：

  • 集中資源: 專注於各階段核心功能的開發。
  • 快速驗證: 每個階段結束後都能產出可用版本，便於收集回饋。
  • 彈性規劃: 可根據業務優先級彈性調整後續開發時程。

3. 發展階段說明

階段一

核心功能 MVP

目標: 建立可用的基本聊天機器人，支援文字訊息收發與嵌入式顯示。

預期產出:
  • 一個可以嵌入網頁的 React 元件。
  • 具備基本的 UI，包含訊息列表與輸入框。
  • 能夠處理基本的文字訊息收發。
階段二

豐富互動體驗

目標: 增加多媒體訊息與互動式卡片，提升溝通效率與體驗。

預期產出:
  • 支援發送和接收圖片、檔案。
  • 能夠發送包含按鈕的卡片訊息和快速回覆。
  • 聊天歷史記錄顯示日期分隔。
階段三

部署與客製化

目標: 加入浮動模式、品牌客製化與使用者登入功能，貼近真實商業需求。

預期產出:
  • 新增 `FloatingChat` 元件，支援浮動模式與主動提示。
  • 提供主題選擇器或允許透過 props 進行深度顏色客製化。
  • 完成手機登入介面與邏輯。
階段四

進階功能

目標: 加入語音等高階功能，完善整體服務，提供全面的智慧客服解決方案。

預期產出:
  • 一個功能完整的 WebChat 解決方案，支援語音輸入。
  • 提供 AI 語音轉文字功能。
  • 更豐富的資訊展示面板，提升使用者自助服務的效率。