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

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();
-      ws?.send(JSON.stringify({ event: "typing_stop", payload: { chat_id: activeChatId } }));
+      sendRealtimeChatEvent("typing_stop");
     } 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();
-              ws?.send(JSON.stringify({ event: "typing_start", payload: { chat_id: activeChatId } }));
+              sendRealtimeChatEvent(next.trim().length > 0 ? "typing_start" : "typing_stop");
             }
           }}
         />

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