feat(realtime): add voice/video recording activity events

app/realtime/router.py

@@ -75,7 +75,14 @@ async def _dispatch_event(db, user_id: int, event: IncomingRealtimeEvent) -> Non
         payload = SendMessagePayload.model_validate(event.payload)
         await realtime_gateway.handle_send_message(db, user_id, payload)
         return
-    if event.event in {"typing_start", "typing_stop"}:
+    if event.event in {
+        "typing_start",
+        "typing_stop",
+        "recording_voice_start",
+        "recording_voice_stop",
+        "recording_video_start",
+        "recording_video_stop",
+    }:
         payload = ChatEventPayload.model_validate(event.payload)
         await realtime_gateway.handle_typing_event(db, user_id, payload, event.event)
         return

app/realtime/schemas.py

@@ -15,6 +15,10 @@ RealtimeEventName = Literal[
     "message_deleted",
     "typing_start",
     "typing_stop",
+    "recording_voice_start",
+    "recording_voice_stop",
+    "recording_video_start",
+    "recording_video_stop",
     "message_read",
     "message_delivered",
     "user_online",
@@ -45,7 +49,18 @@ class MessageStatusPayload(BaseModel):
 
 
 class IncomingRealtimeEvent(BaseModel):
-    event: Literal["send_message", "typing_start", "typing_stop", "message_read", "message_delivered", "ping"]
+    event: Literal[
+        "send_message",
+        "typing_start",
+        "typing_stop",
+        "recording_voice_start",
+        "recording_voice_stop",
+        "recording_video_start",
+        "recording_video_stop",
+        "message_read",
+        "message_delivered",
+        "ping",
+    ]
     payload: dict[str, Any]
 
 

docs/api-reference.md

@@ -72,6 +72,15 @@ For `/health/ready` failure:
 - `message_delivered`
 - `message_read`
 
+### Realtime chat activity events
+
+- `typing_start`
+- `typing_stop`
+- `recording_voice_start`
+- `recording_voice_stop`
+- `recording_video_start`
+- `recording_video_stop`
+
 ## 3. Models (request/response)
 
 ## 3.1 Auth

docs/core-checklist-status.md

@@ -21,7 +21,7 @@ Legend:
 12. Pinning - `DONE` (message/chat pin-unpin)
 13. Reactions - `DONE`
 14. Delivery Status - `DONE` (sent/delivered/read + reconnect reconciliation after backend restarts)
-15. Typing Realtime - `PARTIAL` (typing start/stop done; voice/video typing signals limited)
+15. Typing Realtime - `DONE` (typing start/stop + recording voice/video start/stop via realtime events)
 16. Media & Attachments - `DONE` (upload/preview/download/gallery)
 17. Voice Messages - `PARTIAL` (record/send/play/seek + global speed 1x/1.5x/2x; recorder now uses mime fallback + chunked capture; UX still being polished)
 18. Circle Video Messages - `PARTIAL` (send/play present, recording UX basic)

web/src/components/MessageComposer.tsx

@@ -307,6 +307,22 @@ export function MessageComposer() {
     return wsRef.current;
   }
 
+  function sendRealtimeChatEvent(
+    eventName:
+      | "typing_start"
+      | "typing_stop"
+      | "recording_voice_start"
+      | "recording_voice_stop"
+      | "recording_video_start"
+      | "recording_video_stop"
+  ) {
+    if (!activeChatId) {
+      return;
+    }
+    const ws = getWs();
+    ws?.send(JSON.stringify({ event: eventName, payload: { chat_id: activeChatId } }));
+  }
+
   async function handleSend() {
     if (!activeChatId || !text.trim() || !me || !canSendInActiveChat) {
       return;
@@ -347,8 +363,7 @@ export function MessageComposer() {
       setText("");
       clearDraft(activeChatId);
       setReplyToMessage(activeChatId, null);
-      const ws = getWs();
+      sendRealtimeChatEvent("typing_stop");
-      ws?.send(JSON.stringify({ event: "typing_stop", payload: { chat_id: activeChatId } }));
     } catch {
       removeOptimisticMessage(activeChatId, clientMessageId);
       setUploadError("Message send failed. Please try again.");
@@ -619,6 +634,8 @@ export function MessageComposer() {
       recordingStartedAtRef.current = Date.now();
       setRecordSeconds(0);
       setRecordingState("recording");
+      sendRealtimeChatEvent("typing_stop");
+      sendRealtimeChatEvent("recording_voice_start");
       return true;
     } catch {
       setUploadError("Microphone access denied. Please allow microphone and retry.");
@@ -627,6 +644,9 @@ export function MessageComposer() {
   }
 
   function stopRecord(send: boolean) {
+    if (recordingStateRef.current !== "idle") {
+      sendRealtimeChatEvent("recording_voice_stop");
+    }
     sendVoiceOnStopRef.current = send;
     pointerCancelArmedRef.current = false;
     setDragHint("idle");
@@ -1274,8 +1294,7 @@ export function MessageComposer() {
             setText(next);
             if (activeChatId) {
               setDraft(activeChatId, next);
-              const ws = getWs();
+              sendRealtimeChatEvent(next.trim().length > 0 ? "typing_start" : "typing_stop");
-              ws?.send(JSON.stringify({ event: "typing_start", payload: { chat_id: activeChatId } }));
             }
           }}
         />

web/src/components/MessageList.tsx

@@ -46,6 +46,8 @@ export function MessageList() {
   const activeChatId = useChatStore((s) => s.activeChatId);
   const messagesByChat = useChatStore((s) => s.messagesByChat);
   const typingByChat = useChatStore((s) => s.typingByChat);
+  const recordingVoiceByChat = useChatStore((s) => s.recordingVoiceByChat);
+  const recordingVideoByChat = useChatStore((s) => s.recordingVideoByChat);
   const hasMoreByChat = useChatStore((s) => s.hasMoreByChat);
   const loadingMoreByChat = useChatStore((s) => s.loadingMoreByChat);
   const loadMoreMessages = useChatStore((s) => s.loadMoreMessages);
@@ -130,6 +132,17 @@ export function MessageList() {
   const focusedMessageId = activeChatId ? (focusedMessageIdByChat[activeChatId] ?? null) : null;
   const hasMore = Boolean(activeChatId && hasMoreByChat[activeChatId]);
   const isLoadingMore = Boolean(activeChatId && loadingMoreByChat[activeChatId]);
+  const typingCount = activeChatId ? (typingByChat[activeChatId] ?? []).length : 0;
+  const recordingVoiceCount = activeChatId ? (recordingVoiceByChat[activeChatId] ?? []).length : 0;
+  const recordingVideoCount = activeChatId ? (recordingVideoByChat[activeChatId] ?? []).length : 0;
+  const activityLabel =
+    recordingVideoCount > 0
+      ? "recording video..."
+      : recordingVoiceCount > 0
+        ? "recording voice..."
+        : typingCount > 0
+          ? "typing..."
+          : "";
   const selectedMessages = useMemo(() => messages.filter((m) => selectedIds.has(m.id)), [messages, selectedIds]);
   const channelOnlyDeleteForAll = activeChat?.type === "channel" && !activeChat?.is_saved;
   const canDeleteAllForSelection = useMemo(
@@ -683,7 +696,7 @@ export function MessageList() {
         })}
       </div>
 
-      <div className="px-5 pb-2 text-xs text-slate-300/80">{(typingByChat[activeChatId] ?? []).length > 0 ? "typing..." : ""}</div>
+      <div className="px-5 pb-2 text-xs text-slate-300/80">{activityLabel}</div>
       {showScrollToBottom ? (
         <div className="pointer-events-none absolute bottom-20 right-4 z-40 md:bottom-24">
           <button

web/src/hooks/useRealtime.ts

@@ -16,6 +16,8 @@ export function useRealtime() {
   const accessToken = useAuthStore((s) => s.accessToken);
   const meId = useAuthStore((s) => s.me?.id ?? null);
   const typingByChat = useRef<Record<number, Set<number>>>({});
+  const recordingVoiceByChat = useRef<Record<number, Set<number>>>({});
+  const recordingVideoByChat = useRef<Record<number, Set<number>>>({});
   const wsRef = useRef<WebSocket | null>(null);
   const reconnectTimeoutRef = useRef<number | null>(null);
   const heartbeatIntervalRef = useRef<number | null>(null);
@@ -171,6 +173,48 @@ export function useRealtime() {
           typingByChat.current[chatId]?.delete(userId);
           chatStore.setTypingUsers(chatId, [...(typingByChat.current[chatId] ?? [])]);
         }
+        if (event.event === "recording_voice_start") {
+          const chatId = Number(event.payload.chat_id);
+          const userId = Number(event.payload.user_id);
+          if (!Number.isFinite(chatId) || !Number.isFinite(userId) || userId === authStore.me?.id) {
+            return;
+          }
+          if (!recordingVoiceByChat.current[chatId]) {
+            recordingVoiceByChat.current[chatId] = new Set<number>();
+          }
+          recordingVoiceByChat.current[chatId].add(userId);
+          chatStore.setRecordingUsers(chatId, "voice", [...recordingVoiceByChat.current[chatId]]);
+        }
+        if (event.event === "recording_voice_stop") {
+          const chatId = Number(event.payload.chat_id);
+          const userId = Number(event.payload.user_id);
+          if (!Number.isFinite(chatId) || !Number.isFinite(userId)) {
+            return;
+          }
+          recordingVoiceByChat.current[chatId]?.delete(userId);
+          chatStore.setRecordingUsers(chatId, "voice", [...(recordingVoiceByChat.current[chatId] ?? [])]);
+        }
+        if (event.event === "recording_video_start") {
+          const chatId = Number(event.payload.chat_id);
+          const userId = Number(event.payload.user_id);
+          if (!Number.isFinite(chatId) || !Number.isFinite(userId) || userId === authStore.me?.id) {
+            return;
+          }
+          if (!recordingVideoByChat.current[chatId]) {
+            recordingVideoByChat.current[chatId] = new Set<number>();
+          }
+          recordingVideoByChat.current[chatId].add(userId);
+          chatStore.setRecordingUsers(chatId, "video", [...recordingVideoByChat.current[chatId]]);
+        }
+        if (event.event === "recording_video_stop") {
+          const chatId = Number(event.payload.chat_id);
+          const userId = Number(event.payload.user_id);
+          if (!Number.isFinite(chatId) || !Number.isFinite(userId)) {
+            return;
+          }
+          recordingVideoByChat.current[chatId]?.delete(userId);
+          chatStore.setRecordingUsers(chatId, "video", [...(recordingVideoByChat.current[chatId] ?? [])]);
+        }
         if (event.event === "message_delivered") {
           const chatId = Number(event.payload.chat_id);
           const messageId = Number(event.payload.message_id);
@@ -280,7 +324,9 @@ export function useRealtime() {
       wsRef.current?.close();
       wsRef.current = null;
       typingByChat.current = {};
-      useChatStore.setState({ typingByChat: {} });
+      recordingVoiceByChat.current = {};
+      recordingVideoByChat.current = {};
+      useChatStore.setState({ typingByChat: {}, recordingVoiceByChat: {}, recordingVideoByChat: {} });
       window.removeEventListener("focus", onFocusOrVisible);
       document.removeEventListener("visibilitychange", onFocusOrVisible);
     };

web/src/store/chatStore.ts

@@ -61,6 +61,8 @@ interface ChatState {
   hasMoreByChat: Record<number, boolean>;
   loadingMoreByChat: Record<number, boolean>;
   typingByChat: Record<number, number[]>;
+  recordingVoiceByChat: Record<number, number[]>;
+  recordingVideoByChat: Record<number, number[]>;
   replyToByChat: Record<number, Message | null>;
   editingByChat: Record<number, Message | null>;
   unreadBoundaryByChat: Record<number, number>;
@@ -93,6 +95,7 @@ interface ChatState {
   incrementUnread: (chatId: number, hasMention?: boolean) => void;
   clearUnread: (chatId: number) => void;
   setTypingUsers: (chatId: number, userIds: number[]) => void;
+  setRecordingUsers: (chatId: number, kind: "voice" | "video", userIds: number[]) => void;
   setReplyToMessage: (chatId: number, message: Message | null) => void;
   setEditingMessage: (chatId: number, message: Message | null) => void;
   updateChatPinnedMessage: (chatId: number, pinnedMessageId: number | null) => void;
@@ -111,6 +114,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
   hasMoreByChat: {},
   loadingMoreByChat: {},
   typingByChat: {},
+  recordingVoiceByChat: {},
+  recordingVideoByChat: {},
   replyToByChat: {},
   editingByChat: {},
   unreadBoundaryByChat: {},
@@ -397,6 +402,12 @@ export const useChatStore = create<ChatState>((set, get) => ({
     })),
   setTypingUsers: (chatId, userIds) =>
     set((state) => ({ typingByChat: { ...state.typingByChat, [chatId]: userIds } })),
+  setRecordingUsers: (chatId, kind, userIds) =>
+    set((state) =>
+      kind === "voice"
+        ? { recordingVoiceByChat: { ...state.recordingVoiceByChat, [chatId]: userIds } }
+        : { recordingVideoByChat: { ...state.recordingVideoByChat, [chatId]: userIds } }
+    ),
   setReplyToMessage: (chatId, message) =>
     set((state) => ({ replyToByChat: { ...state.replyToByChat, [chatId]: message } })),
   setEditingMessage: (chatId, message) =>
@@ -438,6 +449,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
       const nextHasMoreByChat = { ...state.hasMoreByChat };
       const nextLoadingMoreByChat = { ...state.loadingMoreByChat };
       const nextTypingByChat = { ...state.typingByChat };
+      const nextRecordingVoiceByChat = { ...state.recordingVoiceByChat };
+      const nextRecordingVideoByChat = { ...state.recordingVideoByChat };
       const nextReplyToByChat = { ...state.replyToByChat };
       const nextEditingByChat = { ...state.editingByChat };
       const nextUnreadBoundaryByChat = { ...state.unreadBoundaryByChat };
@@ -447,6 +460,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
       delete nextHasMoreByChat[chatId];
       delete nextLoadingMoreByChat[chatId];
       delete nextTypingByChat[chatId];
+      delete nextRecordingVoiceByChat[chatId];
+      delete nextRecordingVideoByChat[chatId];
       delete nextReplyToByChat[chatId];
       delete nextEditingByChat[chatId];
       delete nextUnreadBoundaryByChat[chatId];
@@ -461,6 +476,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
         hasMoreByChat: nextHasMoreByChat,
         loadingMoreByChat: nextLoadingMoreByChat,
         typingByChat: nextTypingByChat,
+        recordingVoiceByChat: nextRecordingVoiceByChat,
+        recordingVideoByChat: nextRecordingVideoByChat,
         replyToByChat: nextReplyToByChat,
         editingByChat: nextEditingByChat,
         unreadBoundaryByChat: nextUnreadBoundaryByChat,