fix(chat): 发送后切会话不再误标未读，管理端撤回实时同步到对话页

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-17 03:54:58 +08:00
parent 1f4e72550a
commit cda5fad2e5
7 changed files with 476 additions and 41 deletions
--- a/frontend/app/chat/ChatShell.tsx
+++ b/frontend/app/chat/ChatShell.tsx
@@ -18,10 +18,11 @@ import {
  apiCreateChatRoom,
  apiPinChatRoom,
  type ChatRoomView,
+  type ChatMessage,
  type User,
 } from "@/lib/api";
-import { realtime, RT_CHAT_UNREAD, RT_CHAT_MEMBERSHIP } from "@/lib/realtime";
-import type { RtChatUnreadData, RtChatMembershipData } from "@/lib/realtime";
+import { realtime, RT_CHAT_UNREAD, RT_CHAT_MEMBERSHIP, RT_CHAT_RECALLED } from "@/lib/realtime";
+import type { RtChatUnreadData, RtChatMembershipData, RtChatRecalledData } from "@/lib/realtime";
 import { onDocumentVisible } from "@/lib/visibilityReconcile";
 import { toast } from "@/lib/toast";
 import Avatar from "@/components/Avatar";
@@ -111,13 +112,22 @@ export default function ChatShell({
    room: ChatRoomView;
  } | null>(null);
  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  /** 本人刚发出的消息 ID：拉列表时若水位尚未跟上，避免把这条算成未读 */
+  const lastSentIdByRoom = useRef<Map<number, number>>(new Map());

  /** 拉列表/SSR 回填时，当前打开的会话未读一律置 0（已读请求可能尚未落库） */
  const applyRooms = useCallback(
    (list: ChatRoomView[]) => {
-      const next = (list || []).map((r) =>
-        activeRoomId && r.id === activeRoomId ? { ...r, unread_count: 0 } : r
-      );
+      const next = (list || []).map((r) => {
+        if (activeRoomId && r.id === activeRoomId) {
+          return { ...r, unread_count: 0 };
+        }
+        const sentId = lastSentIdByRoom.current.get(r.id);
+        if (sentId && (r.last_message_id || 0) <= sentId && (r.unread_count || 0) > 0) {
+          return { ...r, unread_count: 0 };
+        }
+        return r;
+      });
      setRooms(sortRooms(next));
    },
    [activeRoomId]
@@ -152,9 +162,9 @@ export default function ChatShell({
    [applyRooms]
  );

-  // 进入消息壳 / 切会话：HTTP 拉最新排序（避开预取缓存）
+  // 进入消息壳 / 切会话：HTTP 拉最新排序（避开预取缓存；切房强制拉取以免把刚发出的消息当成未读）
  useEffect(() => {
-    void refreshRooms();
+    void refreshRooms({ force: true });
  }, [refreshRooms, activeRoomId]);

  // 从其他标签页切回时对账（10s 限频 + 上方 2s 合并）
@@ -198,6 +208,78 @@ export default function ChatShell({
    return off;
  }, [activeRoomId, refreshRooms]);

+  // 本人刚发出的消息：立刻更新侧栏预览并清角标（发送者收不到 chat:unread）
+  useEffect(() => {
+    const onSent = (ev: Event) => {
+      const detail = (ev as CustomEvent<{ roomId?: number; message?: ChatMessage }>).detail;
+      if (!detail?.roomId || !detail.message) return;
+      const { roomId, message } = detail;
+      lastSentIdByRoom.current.set(roomId, message.id);
+      setRooms((prev) => {
+        const idx = prev.findIndex((r) => r.id === roomId);
+        if (idx < 0) return prev;
+        const next = [...prev];
+        const cur = next[idx];
+        next[idx] = {
+          ...cur,
+          unread_count: 0,
+          last_message_id: message.id,
+          last_message: message,
+          updated_at: message.created_at || cur.updated_at,
+        };
+        return sortRooms(next);
+      });
+    };
+    window.addEventListener("j13-chat-sent", onSent);
+    return () => window.removeEventListener("j13-chat-sent", onSent);
+  }, []);
+
+  // 撤回（含管理端）：若撤回的是侧栏预览那条，实时换成撤回文案
+  useEffect(() => {
+    const off = realtime.on<RtChatRecalledData>(RT_CHAT_RECALLED, (data) => {
+      if (!data?.room_id || !data.id) return;
+      setRooms((prev) => {
+        const idx = prev.findIndex((r) => r.id === data.room_id);
+        if (idx < 0) return prev;
+        const cur = prev[idx];
+        if (cur.last_message?.id !== data.id && cur.last_message_id !== data.id) {
+          return prev;
+        }
+        const next = [...prev];
+        next[idx] = {
+          ...cur,
+          last_message: {
+            id: data.id,
+            room_id: data.room_id,
+            sender_id: data.sender_id || cur.last_message?.sender_id || 0,
+            content: "",
+            created_at: cur.last_message?.created_at || new Date().toISOString(),
+            recalled_at: data.recalled_at || new Date().toISOString(),
+            recalled_by: data.recalled_by,
+            sender: cur.last_message?.sender || ({
+              id: data.sender_id || 0,
+              username: "",
+              nickname: "",
+              avatar: "",
+              role: "user",
+            } as User),
+            recaller: data.recaller
+              ? {
+                  id: data.recaller.id,
+                  username: data.recaller.username,
+                  nickname: data.recaller.nickname,
+                  avatar: data.recaller.avatar,
+                  role: data.recaller.role || "user",
+                }
+              : cur.last_message?.recaller,
+          },
+        };
+        return next;
+      });
+    });
+    return off;
+  }, []);
+
  useEffect(() => {
    const off = realtime.on<RtChatMembershipData>(RT_CHAT_MEMBERSHIP, (data) => {
      if (!data) return;
--- a/frontend/app/chat/[id]/ChatRoomClient.tsx
+++ b/frontend/app/chat/[id]/ChatRoomClient.tsx
@@ -48,6 +48,7 @@ import { canOverseeChat } from "@/lib/roles";
 import { toast } from "@/lib/toast";
 import { scrollBehavior } from "@/lib/motion";
 import Avatar from "@/components/Avatar";
+import AutolinkText from "@/components/AutolinkText";
 import ConfirmDialog from "@/components/ConfirmDialog";
 import ContextMenu, { type CtxMenuItem } from "@/components/ContextMenu";

@@ -56,10 +57,11 @@ const MARK_READ_GAP_MS = 2_000;
 const markReadInflight = new Set<number>();
 const markReadLastAt = new Map<number, number>();

-function requestMarkChatRead(roomId: number): void {
+function requestMarkChatRead(roomId: number, opts?: { force?: boolean }): void {
  const now = Date.now();
  const last = markReadLastAt.get(roomId) || 0;
-  if (markReadInflight.has(roomId) || now - last < MARK_READ_GAP_MS) return;
+  if (markReadInflight.has(roomId)) return;
+  if (!opts?.force && now - last < MARK_READ_GAP_MS) return;
  markReadInflight.add(roomId);
  markReadLastAt.set(roomId, now);
  apiMarkChatRead(roomId, 0)
@@ -235,6 +237,17 @@ function highlightMentions(content: string, members: ChatRoomMember[]) {
  return parts;
 }

+/** 消息正文：URL 自动识别 + @提及；外链新开跟随站点策略 */
+function renderChatContent(content: string, members: ChatRoomMember[]) {
+  return (
+    <AutolinkText
+      text={content}
+      forceNewTab
+      renderText={(seg) => <>{highlightMentions(seg, members)}</>}
+    />
+  );
+}
+
 /** 输入区镜像层：已确认的 @ 显示为飞书风 token */
 function renderComposerMirror(content: string, tokens: Set<string>) {
  if (!content) return null;
@@ -405,10 +418,13 @@ export default function ChatRoomClient({
    }
  }, [roomId, canView]);

-  const markReadToLatest = useCallback(() => {
-    if (!isRealMember) return;
-    requestMarkChatRead(roomId);
-  }, [roomId, isRealMember]);
+  const markReadToLatest = useCallback(
+    (opts?: { force?: boolean }) => {
+      if (!isRealMember) return;
+      requestMarkChatRead(roomId, opts);
+    },
+    [roomId, isRealMember]
+  );

  useEffect(() => {
    if (!canView) return;
@@ -563,7 +579,11 @@ export default function ChatRoomClient({
        return [...prev, message];
      });
      requestAnimationFrame(() => scrollToBottom(true));
-      markReadToLatest();
+      // 发送成功立刻同步侧栏预览，并强制推进已读（避开进房 MarkRead 的 2s 节流）
+      window.dispatchEvent(
+        new CustomEvent("j13-chat-sent", { detail: { roomId, message } })
+      );
+      markReadToLatest({ force: true });
    } catch (e) {
      setContent(prevContent);
      setMentionTokens(prevTokens);
@@ -1196,7 +1216,7 @@ export default function ChatRoomClient({
                                已撤回
                              </div>
                              <div style={{ color: "var(--ink-2)" }}>
-                                {highlightMentions(m.content, members)}
+                                {renderChatContent(m.content, members)}
                              </div>
                            </div>
                          </div>
@@ -1291,7 +1311,7 @@ export default function ChatRoomClient({
                            {m.reply_snap}
                          </button>
                        )}
-                        {highlightMentions(m.content, members)}
+                        {renderChatContent(m.content, members)}
                      </div>
                    </div>
                  </div>