Start DMs

2026-09-22 19:15:08 +03:00 · 2025-09-05 21:41:48 +03:00
parent 420bad2405
commit 04d3e4d995
10 changed files with 691 additions and 9 deletions
@@ -0,0 +1,128 @@
+import { useState, useEffect, useRef } from "react";
+import { useAppState } from "../../state";
+import { useDM } from "../../../hooks/useDM";
+import { ChatMessages } from "./ChatMessages";
+import defaultAvatar from "../../../resources/images/default-avatar.png";
+
+export function DMPanel() {
+    const { chat } = useAppState();
+    const { sendDMMessage, isLoadingHistory } = useDM();
+    const [message, setMessage] = useState("");
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    const activeDm = chat.activeDm;
+
+    // Scroll to bottom when messages change
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, [chat.messages]);
+
+    const handleSendMessage = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!message.trim() || !activeDm?.publicKey) return;
+
+        try {
+            await sendDMMessage(activeDm.userId, activeDm.publicKey, message);
+            setMessage("");
+        } catch (error) {
+            console.error("Failed to send DM:", error);
+        }
+    };
+
+    const handleProfileClick = () => {
+        // TODO: Implement profile dialog for DM user
+        console.log("Profile clicked for DM user:", activeDm?.username);
+    };
+
+    if (!activeDm) {
+        return (
+            <div className="chat-main" id="chat-inner">
+                <div className="chat-header">
+                    <img src={defaultAvatar} alt="Avatar" className="chat-header-avatar" />
+                    <div className="chat-header-info">
+                        <div className="info-chat">
+                            <h4 id="chat-name">Выберите пользователя</h4>
+                            <p>
+                                <span className="online-status"></span>
+                                Выберите пользователя для начала разговора
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div className="chat-messages" id="chat-messages">
+                    <div style={{ 
+                        display: "flex", 
+                        justifyContent: "center", 
+                        alignItems: "center", 
+                        height: "100%",
+                        color: "var(--mdui-color-on-surface-variant)"
+                    }}>
+                        Выберите пользователя из списка для начала личных сообщений
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="chat-main" id="chat-inner">
+            <div className="chat-header">
+                <img 
+                    src={defaultAvatar} 
+                    alt="Avatar" 
+                    className="chat-header-avatar"
+                    onClick={handleProfileClick}
+                    style={{ cursor: "pointer" }}
+                />
+                <div className="chat-header-info">
+                    <div className="info-chat">
+                        <h4 id="chat-name">{activeDm.username}</h4>
+                        <p>
+                            <span className="online-status"></span>
+                            Личные сообщения
+                        </p>
+                    </div>
+                    <a href="#" id="hide-chat">Свернуть чат</a>
+                </div>
+            </div>
+            
+            <div className="chat-messages" id="chat-messages">
+                {isLoadingHistory ? (
+                    <div style={{ 
+                        display: "flex", 
+                        justifyContent: "center", 
+                        alignItems: "center", 
+                        height: "100%",
+                        color: "var(--mdui-color-on-surface-variant)"
+                    }}>
+                        Загрузка сообщений...
+                    </div>
+                ) : (
+                    <>
+                        <ChatMessages />
+                        <div ref={messagesEndRef} />
+                    </>
+                )}
+            </div>
+            
+            <div className="chat-input-wrapper">
+                <div className="chat-input">
+                    <form className="input-group" id="message-form" onSubmit={handleSendMessage}>
+                        <input 
+                            type="text" 
+                            className="message-input" 
+                            id="message-input" 
+                            placeholder="Напишите сообщение..." 
+                            autoComplete="off"
+                            value={message}
+                            onChange={(e) => setMessage(e.target.value)}
+                        />
+                        <button type="submit" className="send-btn">
+                            <span className="material-symbols filled">send</span>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+}