Implement real-time online status and typing indicator

2026-09-23 03:25:07 +03:00 · 2025-10-18 22:50:13 +03:00
parent 0ecf324028
commit 1e86b9fc84
20 changed files with 1191 additions and 57 deletions
@@ -20,6 +20,7 @@ interface ChatInputWrapperProps {
    onCloseEdit?: () => void;
    onProvideFileAdder?: (adder: (files: File[]) => void) => void;
    messagePanelRef?: React.RefObject<HTMLDivElement | null>;
+    onTyping?: () => void;
 }

 export function ChatInputWrapper(
@@ -35,7 +36,8 @@ export function ChatInputWrapper(
        onClearEdit, 
        onCloseEdit,
        onProvideFileAdder,
-        messagePanelRef
+        messagePanelRef,
+        onTyping
    }: ChatInputWrapperProps
 ) {
    const [message, setMessage] = useState("");
@@ -91,6 +93,17 @@ export function ChatInputWrapper(
        setMessage(prev => prev + emoji);
    };

+    function handleTyping() {
+        if (onTyping) {
+            onTyping();
+        }
+    };
+
+    function handleMessageChange(value: string) {
+        setMessage(value);
+        handleTyping();
+    };
+
    async function handleSubmit(e: React.FormEvent | Event) {
        e.preventDefault();
        const hasText = Boolean(message.trim());
@@ -196,7 +209,7 @@ export function ChatInputWrapper(
                        autoComplete="off"
                        text={message}
                        rows={1}
-                        onTextChange={(value) => setMessage(value)}
+                        onTextChange={handleMessageChange}
                        onEnter={handleSubmit} />
                    <div className="buttons">
                        <mdui-button-icon icon="attach_file" onClick={handleAttachClick} className="attach-btn"></mdui-button-icon>
@@ -1,20 +1,49 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useMemo, type ReactNode } from "react";
 import { useAppState } from "@/pages/chat/state";
 import { MessagePanel, type MessagePanelState } from "./panels/MessagePanel";
 import { ChatMessages } from "./ChatMessages";
 import { ChatInputWrapper } from "./ChatInputWrapper";
-import { ProfileDialog } from "../ProfileDialog";
+import { ProfileDialog } from "@/pages/chat/ui/ProfileDialog";
 import { setGlobalMessageHandler } from "@/core/websocket";
 import type { Message, WebSocketMessage } from "@/core/types";
 import defaultAvatar from "@/images/default-avatar.png";
 import AnimatedOpacity from "@/core/components/animations/AnimatedOpacity";
-import type { DMPanel } from "./panels/DMPanel";
+import { DMPanel } from "./panels/DMPanel";
 import useCall from "@/pages/chat/hooks/useCall";
+import { TypingIndicator } from "./TypingIndicator";
+import { OnlineStatus } from "./OnlineStatus";
+import { typingManager } from "@/core/typingManager";
+import { PublicChatPanel } from "./panels/PublicChatPanel";

 interface MessagePanelRendererProps {
    panel: MessagePanel | null;
 }

+function ChatHeaderText({ panel }: { panel: MessagePanel | null }) {
+    const { chat, user } = useAppState();
+    const otherTypingUsers = useMemo(() => {
+        return Array
+            .from(chat.typingUsers.entries())
+            .filter(([userId, username]) => userId !== user.currentUser?.id && username)
+            .map(([, username]) => username!);
+    }, [chat.typingUsers, user.currentUser?.id]);
+
+    let content: ReactNode;
+
+    if (panel instanceof DMPanel) {
+        const recipientId = panel.getRecipientId()!;
+        const isTyping = chat.dmTypingUsers.get(recipientId);
+        
+        content = isTyping ? <TypingIndicator typingUsers={[]} /> : <OnlineStatus userId={recipientId} />;
+    } else if (panel instanceof PublicChatPanel && otherTypingUsers.length > 0) {
+        content = <TypingIndicator typingUsers={otherTypingUsers} />;
+    } else {
+        return null;
+    }
+
+    return <div>{content}</div>;
+}
+
 export function MessagePanelRenderer({ panel }: MessagePanelRendererProps) {
    const { applyPendingPanel, chat, setProfileDialog } = useAppState();
    const messagePanelRef = useRef<HTMLDivElement>(null);
@@ -233,14 +262,7 @@ export function MessagePanelRenderer({ panel }: MessagePanelRendererProps) {
                    <div className="chat-header-info">
                        <div className="info-chat">
                            <h4 id="chat-name">{panelState?.title || "Выбор чата"}</h4>
-                            <p>
-                                <span className={`online-status ${panelState?.online ? "online" : ""}`}></span>
-                                {panelState ? (
-                                    panelState.online ? "Online" : "Offline"
-                                ) : (
-                                    "Выберите чат, чтобы начать переписку"
-                                )}
-                            </p>
+                            <ChatHeaderText panel={panel} />
                        </div>
                        {panel?.isDm() && (
                            <mdui-button-icon onClick={handleCallClick} icon="call--filled" />
@@ -315,6 +337,7 @@ export function MessagePanelRenderer({ panel }: MessagePanelRendererProps) {
                            </div>
                        </AnimatedOpacity>
                        
+                        
                        <ChatInputWrapper 
                            onSendMessage={(text, files) => {
                                panel.handleSendMessage(text, replyTo?.id, files);
@@ -354,6 +377,14 @@ export function MessagePanelRenderer({ panel }: MessagePanelRendererProps) {
                            }}
                            onProvideFileAdder={(adder) => { addFilesRef.current = adder; }}
                            messagePanelRef={messagePanelRef}
+        onTyping={() => {
+            if (panel.isDm()) {
+                const dmPanel = panel as DMPanel;
+                dmPanel.handleTyping();
+            } else {
+                typingManager.sendTyping();
+            }
+        }}
                        />
                    </>
                )}
@@ -0,0 +1,29 @@
+/**
+ * @fileoverview Online indicator component for profile pictures
+ * @description Shows a small dot at the bottom right of profile pictures to indicate online status
+ * @author Cursor
+ * @version 1.0.0
+ */
+
+import { useAppState } from "@/pages/chat/state";
+
+interface OnlineIndicatorProps {
+    userId: number;
+    className?: string;
+}
+
+export function OnlineIndicator({ userId, className = "" }: OnlineIndicatorProps) {
+    const { chat } = useAppState();
+    const status = chat.onlineStatuses.get(userId);
+
+    // Only show indicator when user is online
+    if (!status || !status.online) {
+        return null;
+    }
+
+    return (
+        <div className={`online-indicator ${className}`}>
+            <div className="indicator-dot online"></div>
+        </div>
+    );
+}
@@ -0,0 +1,58 @@
+/**
+ * @fileoverview Online status component for showing user online status
+ * @description Displays online/offline status with last seen timestamp
+ * @author Cursor
+ * @version 1.0.0
+ */
+
+import { useAppState } from "@/pages/chat/state";
+
+interface OnlineStatusProps {
+    userId: number;
+    className?: string;
+    showLastSeen?: boolean;
+}
+
+export function OnlineStatus({ userId, className = "", showLastSeen = false }: OnlineStatusProps) {
+    const { chat } = useAppState();
+    const status = chat.onlineStatuses.get(userId);
+
+    if (!status) {
+        return null;
+    }
+
+    const formatLastSeen = (lastSeen: string): string => {
+        const date = new Date(lastSeen);
+        const now = new Date();
+        const diffMs = now.getTime() - date.getTime();
+        const diffMins = Math.floor(diffMs / (1000 * 60));
+        const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+        if (diffMins < 1) {
+            return "только что";
+        } else if (diffMins < 60) {
+            return `${diffMins} мин. назад`;
+        } else if (diffHours < 24) {
+            return `${diffHours} ч. назад`;
+        } else if (diffDays < 7) {
+            return `${diffDays} дн. назад`;
+        } else {
+            return date.toLocaleDateString();
+        }
+    };
+
+    return (
+        <div className={`online-status ${className}`}>
+            <div className={`status-dot ${status.online ? "online" : "offline"}`}></div>
+            <span className="status-text">
+                {status.online ? "В сети" : "Не в сети"}
+            </span>
+            {showLastSeen && !status.online && (
+                <span className="last-seen">
+                    {formatLastSeen(status.lastSeen)}
+                </span>
+            )}
+        </div>
+    );
+}
@@ -0,0 +1,36 @@
+/**
+ * @fileoverview Typing indicator component for showing who is typing
+ * @description Displays a list of users who are currently typing
+ * @author Cursor
+ * @version 1.0.0
+ */
+
+import { useMemo } from "react";
+
+interface TypingIndicatorProps {
+    typingUsers: string[]; // Array of usernames who are typing
+}
+
+export function TypingIndicator({ typingUsers }: TypingIndicatorProps) {
+    // Format the typing text based on number of users
+    const typingText = useMemo(() => {
+        switch (typingUsers.length) {
+            case 0: return "печатает...";
+            case 1: return `${typingUsers[0]} печатает...`;
+            case 2: return `${typingUsers[0]} и ${typingUsers[1]} печатают...`;
+            default: return `${typingUsers[0]}, ${typingUsers[1]} и еще ${typingUsers.length - 2} печатают...`;
+        }
+    }, [typingUsers]);
+
+    return (
+        <div className="typing-indicator">
+            <div className="typing-dots">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+            <span className="typing-text">{typingText}</span>
+        </div>
+    );
+}
+
@@ -11,6 +11,8 @@ import { fetchUserProfile } from "@/core/api/profileApi";
 import type { DmEncryptedJSON, DmEnvelope, DMWebSocketMessage, EncryptedMessageJson, Message } from "@/core/types";
 import type { UserState, ProfileDialogData } from "@/pages/chat/state";
 import { formatDMUsername } from "@/pages/chat/hooks/useDM";
+import { onlineStatusManager } from "@/core/onlineStatusManager";
+import { typingManager } from "@/core/typingManager";

 export interface DMPanelData {
    userId: number;
@@ -34,13 +36,25 @@ export class DMPanel extends MessagePanel {
        return true;
    }

+    getRecipientId(): number | null {
+        return this.dmData?.userId || null;
+    }
+
    async activate(): Promise<void> {
        // Don't load messages immediately during activation to prevent animation freeze
        // Messages will be loaded after the animation completes
+        
+        // Subscribe to recipient's online status
+        if (this.dmData?.userId) {
+            onlineStatusManager.subscribe(this.dmData.userId);
+        }
    }

    deactivate(): void {
-        // DM doesn't need special cleanup
+        // Unsubscribe from recipient's online status
+        if (this.dmData?.userId) {
+            onlineStatusManager.unsubscribe(this.dmData.userId);
+        }
    }

    clearMessages(): void {
@@ -254,6 +268,11 @@ export class DMPanel extends MessagePanel {

    // Reset for DM switching
    reset(): void {
+        // Unsubscribe from current recipient's status before switching
+        if (this.dmData?.userId) {
+            onlineStatusManager.unsubscribe(this.dmData.userId);
+        }
+        
        this.dmData = null;
        this.messagesLoaded = false;
        this.clearMessages();
@@ -280,6 +299,13 @@ export class DMPanel extends MessagePanel {
        return this.dmData?.username || null;
    }

+    // Handle typing in DM
+    handleTyping(): void {
+        if (this.dmData?.userId) {
+            typingManager.sendDmTyping(this.dmData.userId);
+        }
+    }
+
    // Helper functions for localStorage
    private getLastReadId(userId: number): number {
        try {