- 聊天功能核心

UI 組件架構圖

圖：聊天系統核心組件包含 Header（標題列）、Composer（編輯器）、Reply（回覆機制）、Search（搜尋功能）

核心組件

• valo_chat.dart: 聊天主要組件

  • 使用 flutter_chat_ui 的 library 做基底，後續有因為某些 BUG，flutter_chat_ui 沒有調整，而我自己將 flutter_chat_ui 引入到自己維護的 Git 倉儲中自行維護管理 (Project : ValoApp.ChatUI)

    為什麼使用 flutter_chat_ui ?

    1. 開發控制權高，不像其他套件，封裝功能非常封閉，比較沒有開放其他參數。
       • 雖然...還是遇到一些無法滿足的地方 ex: 聊天訊息的每日日期標籤
    2. 良好的微UX感受，ex: 送出新訊息、收到新訊息，有一點過度動畫，感受上提升很多。
    3. 過往原生 Dart 自刻時，遇到問題，造成有些 UX 體驗不良功能實現困難
       • 無法將聊天室的訊息，維持底部，保持最新訊息消息的瀏覽!
       • 搜尋訊息後，無法彈跳至某則訊息

  • 監聽 Agora Message Event, 收到新消息、已讀消息、群組資料更新...等

• valo_chat_composer.dart: 訊息編輯器

  • flutter_chat_ui 的 library 的訊息編輯區自行封裝，因為 Figma 設計與 Library 提供的媒體上傳的 UX 方式還是有差異。
  • 除了編輯消息的區域，上面會有一塊 Panel，涵蓋 訊息回覆預覽、媒體上傳方式、提及用戶清單。

• valo_chat_header.dart: 聊天標題列

  • 返回
  • 好友資訊、群組資訊
  • 搜尋-點擊後，會改變成搜尋 Header
  • 聊天室更多

• valo_chat_provider.dart: 聊天狀態管理

  • 針對 valo_chat 這整個組件，會用到的一些共用資料，只 For 聊天室的各組件共用。
  • ForeceMessageIdProvider: 長按顯示特定訊息 ID 的狀態管理
  • ValoChatComposerProvider: 訊息編輯器的狀態管理
    • 例如: 媒體Panel、回覆Panel、送出訊息相關、@提及成員清單
  • ValoChatGroupMessageReadCountProvider: 已讀的訊息數量管理
    • 追蹤每則群組訊息的已讀人數
  • ValoChatResendProvider: 重傳的訊息管理
    • 管理發送失敗的訊息重傳機制

• valo_chat_util.dart: 針對整個 valo_chat 的共用工具函數

search/ - 聊天搜尋

• valo_chat_composer_search.dart: 編輯器搜尋功能
• valo_chat_header_search.dart: 標題列搜尋功能
• valo_chat_provider_search.dart: 搜尋狀態管理

message/ - 訊息組件群

訊息類型組件

• valo_chat_text_message.dart: 文字訊息顯示
• valo_chat_image_message.dart: 圖片訊息顯示
• valo_chat_file_message.dart: 檔案訊息顯示
• valo_chat_video_message.dart: 影片訊息顯示
• valo_chat_custom_message.dart: 自定義訊息（群組邀請等）

訊息功能組件

• valo_chat_message_container.dart: 訊息容器組件
• valo_chat_message_action_panel.dart: 訊息操作面板
• valo_chat_message_time.dart: 訊息時間顯示
• valo_chat_message_time_status.dart: 訊息時間與狀態
• valo_chat_message_username.dart: 訊息發送者名稱
• valo_chat_message_read_count.dart: 訊息已讀數量
• valo_chat_message_extention_text.dart: 訊息擴展文字
• valo_chat_message_reply_preview.dart: 回覆訊息預覽

reply/ - 回覆訊息子系統

• valo_chat_message_reply.dart: 回覆訊息主要組件
• valo_chat_message_reply_base.dart: 回覆訊息基礎組件
• valo_chat_message_reply_content.dart: 回覆訊息內容
• valo_chat_message_reply_preview.dart: 回覆訊息預覽

最後更新: 2025-08-19