LobeChat 未读消息角标的设计与实现
在多会话、高并发的 AI 聊天应用中，用户很容易在多个对话之间切换，稍不留神就会错过某个窗口的新回复。这种“信息遗漏”问题看似微小，却直接影响用户的信任感和使用效率。LobeChat 作为一款现代化的开源聊天界面，在这类细节上的处理尤为讲究——比如那个藏在会话列表右上角的小红点：未读消息角标。
它不只是一个简单的数字提示，而是融合了状态管理、事件通信、用户行为感知与无障碍设计的综合性解决方案。它的存在，让系统状态变得“可见”，也让交互更接近直觉。
角标背后的逻辑：从“有新消息”到“是否真未读”
直观来看，未读角标的功能是显示某一会话中有多少条新消息。但真正难的地方在于：如何定义“未读”？
如果只是每次收到消息就加一，那用户哪怕已经看过了，角标也不会消失——这显然不合理。反过来，如果用户只是短暂切出页面就清空计数，又可能导致提醒过早失效。
LobeChat 的做法是结合路由状态和页面可见性 API来判断用户是否“实际查看”了内容：
- 当前不在该会话页面（如
/chat/123） → 新消息计入未读； - 页面处于后台标签页或最小化状态 → 不视为已读；
- 用户切换回来且页面获得焦点 → 自动清零角标。
这样一来，“未读”的定义就贴近真实使用场景：只有当用户真正看到消息时，才算“已读”。
这个机制的核心思想是——UI 状态应反映用户注意力，而非仅仅依赖程序逻辑。
实现方案：轻量级事件驱动模型
为了实现上述逻辑，LobeChat 没有采用传统的轮询比对方式（即定时拉取所有消息并计算差异），而是构建了一个基于事件的通信链路。整个流程可以概括为：
[WebSocket 推送] ↓ [Message Service 解析消息] ↓ [触发 custom event: message:new] ↓ [Badge 组件监听并更新自身状态]这种方式的优势非常明显：只关注增量变化，避免频繁查询全量数据，性能开销极低。
下面是一个核心组件的简化实现：
// components/ConversationBadge.tsx import { usePathname } from 'next/navigation'; import { useEffect, useState } from 'react'; const MAX_DISPLAY = 99; export default function ConversationBadge({ sessionId, lastMessageId, currentReadId, }: { sessionId: string; lastMessageId: string; currentReadId: string | null; }) { const pathname = usePathname(); const [unreadCount, setUnreadCount] = useState(0); const isActiveSession = pathname.includes(`/chat/${sessionId}`); useEffect(() => { const handleNewMessage = (event: CustomEvent<{ sessionId: string; messageId: string }>) => { const { sessionId: eventSessionId, messageId } = event.detail; if (eventSessionId !== sessionId) return; if (isActiveSession || messageId === currentReadId) return; setUnreadCount((prev) => { const next = prev + 1; return next > MAX_DISPLAY ? MAX_DISPLAY : next; }); }; window.addEventListener('newMessage', handleNewMessage as any); return () => { window.removeEventListener('newMessage', handleNewMessage as any); }; }, [sessionId, currentReadId, isActiveSession]); // 页面重新获得焦点时清空角标（模拟“已读”） useEffect(() => { const handleVisibilityChange = () => { if (!document.hidden && isActiveSession) { setUnreadCount(0); } }; document.addEventListener('visibilitychange', handleVisibilityChange); return () => { document.removeEventListener('visibilitychange', handleVisibilityChange); }; }, [isActiveSession]); if (unreadCount === 0) return null; return ( <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center" aria-label={`${unreadCount} unread messages`} > {unreadCount > MAX_DISPLAY ? '99+' : unreadCount} </span> ); }这段代码虽然不长，但涵盖了几个关键工程考量：
- 使用
CustomEvent实现跨组件通信，避免 props 层层透传； - 利用
document.hidden监听页面可见性，精准识别用户是否“正在观看”； - 最大值限制为
99，防止视觉溢出； - ARIA 标签支持屏幕阅读器，符合无障碍标准；
unreadCount === 0时不渲染 DOM 节点，减少内存占用。
更重要的是，这种模式是可扩展的。未来若要接入 Web Push 或邮件通知，只需在同一事件总线上监听即可，无需重构现有逻辑。
全局通信基石：类型安全的事件总线
为了让各个模块能高效协作，LobeChat 引入了一个轻量级的事件总线（Event Bus）。它不像 Redux 那样管理状态，而是专注于解耦组件间的通信。
以下是一个典型的实现：
// lib/messageBus.ts type EventMap = { 'message:new': { sessionId: string; messageId: string; content: string }; 'session:switch': { from?: string; to: string }; 'page:focus': { hasFocus: boolean }; }; class EventBus { private listeners: { [K in keyof EventMap]?: Array<(data: EventMap[K]) => void> } = {}; on<T extends keyof EventMap>(event: T, callback: (data: EventMap[T]) => void) { if (!this.listeners[event]) { this.listeners[event] = []; } this.listeners[event]?.push(callback); } emit<T extends keyof EventMap>(event: T, data: EventMap[T]) { this.listeners[event]?.forEach((fn) => fn(data)); } off<T extends keyof EventMap>(event: T, callback: (data: EventMap[T]) => void) { if (this.listeners[event]) { const index = this.listeners[event]?.indexOf(callback) ?? -1; if (index > -1) { this.listeners[event]?.splice(index, 1); } } } } export const messageBus = new EventBus();这个事件总线有几个突出优点：
- 类型安全：借助 TypeScript 泛型，确保每个事件只能传递正确的 payload；
- 低耦合：发送方无需知道谁在监听，接收方也无需关心消息来源；
- 调试友好：可以在开发环境中打印所有触发的事件，便于排查问题；
- 跨标签页同步潜力：结合
BroadcastChannel可实现多窗口状态共享。
例如，当用户在一个标签页中查看了某会话后，另一个打开的同源页面也能通过广播得知“该会话已读”，从而同步清除角标。
架构中的位置：连接表现层与业务逻辑的桥梁
未读角标看似只是一个 UI 组件，实则横跨多个层次：
+------------------+ | WebSocket API | ← 流式消息输入 +------------------+ ↓ +--------------------+ | Message Service | ← 消息解析与分发 +--------------------+ ↓ +-----------------------+ | Global State Store | ← Zustand / Context 管理会话状态 +-----------------------+ ↓ +---------------------+ +----------------------------+ | Session List Item | ↔→→ | Active Chat Panel | | (with Badge) | | (resets unread on focus) | +---------------------+ +----------------------------+在这个架构中，角标组件既是“消费者”也是“反馈节点”。它消费来自消息服务的状态变更，同时通过清零行为反向影响全局状态（如更新“最后已读 ID”）。
这也意味着，角标的正确性高度依赖初始状态的同步。因此，在页面首次加载时，前端需要从服务端获取每个会话的“已读位点”（read cursor），并与本地最新消息对比，才能准确计算出初始未读数。
否则，可能出现“刚进页面就显示 5 条未读”的误报情况，破坏用户体验。
工程实践中的细节打磨
一个好的功能不仅要在技术上成立，还要经得起各种边界场景的考验。以下是 LobeChat 在开发过程中总结出的一些关键实践经验：
✅ 合理节流高频更新
在某些自动化测试或机器人对话场景下，可能会短时间内收到大量消息。如果不加控制，频繁调用setState会导致 React 重渲染压力过大，甚至引发卡顿。
解决方案是对角标更新做节流处理（throttle），例如每 100ms 合并一次计数更新：
useEffect(() => { const throttledUpdate = throttle(() => { setUnreadCount((prev) => Math.min(prev + 1, MAX_DISPLAY)); }, 100); // ... }, []);既能保证视觉反馈及时，又能避免性能瓶颈。
✅ 支持深色模式与主题适配
角标默认使用红色背景，在浅色主题下清晰醒目，但在深色模式下可能对比度不足。建议通过 CSS 变量动态调整颜色：
.conversation-badge { background-color: var(--badge-bg, #ef4444); color: var(--badge-text, white); }并在主题切换时同步更新变量值，确保在任何环境下都具备良好的可读性。
✅ 移动端适配：尺寸与触控优先级
在移动端小屏幕上，角标不宜过大，否则容易遮挡会话标题。建议将尺寸从w-5 h-5调整为w-4 h-4，字体也相应缩小。
同时注意 z-index 设置，避免与其他浮动元素冲突。
✅ 隐私保护：敏感会话隐藏具体数量
对于涉及隐私的会话（如财务咨询、医疗问答），即使不能完全屏蔽提醒，也不宜暴露具体的未读条数。此时可考虑统一显示为“•”或“新消息”，而不显示数字。
这需要后端配合标记会话类型，并在前端做条件渲染。
更进一步：从角标到通知生态
未读角标本质上是一种轻量级通知机制。它的成功实现为后续更复杂的通知体系打下了基础：
- 可扩展为“提及 @ 我”提醒；
- 结合浏览器 Push API 实现离线消息推送；
- 在桌面端托盘图标上叠加数字；
- 与邮件、短信等外部通道联动。
更重要的是，它验证了一种设计理念：把状态反馈做到极致，哪怕是最小的 UI 元素，也能显著提升产品的专业感和可用性。
LobeChat 正是通过这样一个个精心打磨的细节，逐步建立起区别于普通聊天界面的竞争优势。
写在最后
未读消息角标不过是一两个像素点组成的红圈，但它背后牵涉的技术链条却不容小觑：状态管理、事件通信、用户行为建模、无障碍支持、主题适配……每一个环节都需要权衡与取舍。
而正是这些“看不见的努力”，构成了现代 Web 应用的体验基石。与其说 LobeChat 是一个 ChatGPT 替代品，不如说它是对“人机交互如何更自然”的一次持续探索。
下次当你看到那个小小的“3”出现在会话旁边时，不妨多停留一秒——它不只是告诉你“有新消息”，更是在说：“我一直都在等你回来。”
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
