Убрал аватары и имена внутри чата личных чатов

backend/src/Modules/Conversations/Application/Chats/LeaveOrDelete/LeaveOrDeleteChat.cs

@@ -4,6 +4,7 @@ using System.Threading;
 using System.Threading.Tasks;
 using Knot.Contracts.Conversations.Application.Abstractions;
 using Knot.Contracts.Conversations.Domain;
+using Knot.Contracts.Messaging.Application.Abstractions;
 using Knot.Modules.Conversations.Infrastructure.SignalR;
 using Knot.Shared.Kernel;
 using Knot.Shared.Kernel.Storage;

client-web/src/modules/chats/presentation/ChatPage.tsx

@@ -65,6 +65,8 @@ export default function ChatPage() {
   const [activeTab, setActiveTab] = useState('chats');
   const { t } = useLang();
 
+  const activeChat = useChatStore((state) => state.activeChat);
+
   useEffect(() => {
     groupCallOpenRef.current = groupCallOpen;
     groupCallChatIdRef.current = groupCallChatId;
@@ -335,6 +337,16 @@ export default function ChatPage() {
     };
   }, [user?.id]);
 
+  // Join chat group when activeChat changes
+  useEffect(() => {
+    if (activeChat) {
+      const socket = getSocket();
+      if (socket) {
+        socket.emit('join_chat', activeChat);
+      }
+    }
+  }, [activeChat]);
+
   const handleStartCall = (targetUser: UserBasic, type: 'voice' | 'video') => {
     setCallTarget(targetUser);
     setCallType(type);
@@ -371,8 +383,6 @@ export default function ChatPage() {
     setGroupCallOpen(false);
   };
 
-  const activeChat = useChatStore((state) => state.activeChat);
-
   return (
     <motion.div
       initial={{ opacity: 0 }}

client-web/src/modules/chats/presentation/components/ChatView.tsx

@@ -187,12 +187,31 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
   // Refs and logic for tracking session's first unread message to show the divider exactly once per load
   const sessionUnreadRef = useRef<{ chatId: string, msgId: string | null }>({ chatId: '', msgId: null });
 
-  if (activeChat && activeChat !== sessionUnreadRef.current.chatId && !isLoadingMessages) {
-    const firstUnreadMsg = chatMessages.find(
-      (m) => m.senderId !== user?.id && !m.readBy?.some((r) => r.userId === user?.id)
-    );
-    sessionUnreadRef.current = { chatId: activeChat, msgId: firstUnreadMsg ? firstUnreadMsg.id : null };
-  }
+  // Update sessionUnreadRef when chat changes OR when messages are marked as read
+  useEffect(() => {
+    if (!activeChat || isLoadingMessages) return;
+
+    // Reset on chat change
+    if (activeChat !== sessionUnreadRef.current.chatId) {
+      const firstUnreadMsg = chatMessages.find(
+        (m) => m.senderId !== user?.id && !m.readBy?.some((r) => r.userId === user?.id)
+      );
+      sessionUnreadRef.current = { chatId: activeChat, msgId: firstUnreadMsg ? firstUnreadMsg.id : null };
+    } else {
+      // Update if the first unread message was read (msgId no longer exists in unread list)
+      const firstUnreadMsg = chatMessages.find(
+        (m) => m.senderId !== user?.id && !m.readBy?.some((r) => r.userId === user?.id)
+      );
+      if (sessionUnreadRef.current.msgId && !firstUnreadMsg) {
+        // All messages are now read
+        sessionUnreadRef.current.msgId = null;
+      } else if (firstUnreadMsg && sessionUnreadRef.current.msgId !== firstUnreadMsg.id) {
+        // First unread changed (some messages were read)
+        sessionUnreadRef.current.msgId = firstUnreadMsg.id;
+      }
+    }
+  }, [activeChat, chatMessages, user?.id, isLoadingMessages]);
+
   const firstUnreadId = activeChat === sessionUnreadRef.current.chatId ? sessionUnreadRef.current.msgId : null;
   const initialScrollChatId = useRef<string | null>(null);
 
@@ -573,6 +592,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
       {
         root: scrollContainerRef.current,
         threshold: 0.1,
+        rootMargin: '0px',
       }
     );
 
@@ -584,7 +604,26 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
       unreadElements.forEach((el: Element) => {
         const id = el.getAttribute('data-message-id');
         if (id && !sentReadIdsRef.current.has(id)) {
-          observer.observe(el);
+          // Check if element is already visible
+          const rect = el.getBoundingClientRect();
+          const containerRect = scrollContainerRef.current!.getBoundingClientRect();
+          const isVisible = rect.top >= containerRect.top && rect.bottom <= containerRect.bottom;
+
+          if (isVisible) {
+            // Mark as read immediately without waiting for intersection
+            const seqId = parseInt(el.getAttribute('data-sequence-id') || '0', 10);
+            if (seqId > 0) {
+              socket.emit('read_messages', {
+                chatId: activeChat,
+                lastReadMessageId: id,
+                lastReadSequenceId: seqId,
+              });
+              useChatStore.getState().markRead(activeChat, user.id, seqId);
+              sentReadIdsRef.current.add(id);
+            }
+          } else {
+            observer.observe(el);
+          }
         }
       });
     };

client-web/src/modules/chats/presentation/components/MessageBubble.tsx

@@ -452,7 +452,7 @@ function MessageBubble({
           </div>
         )}
 
-        {!isMine && (
+        {!isMine && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
           <div className="w-8 flex-shrink-0 mr-2 self-end">
             {showAvatar ? (
               <button onClick={() => onViewProfile?.(message.senderId)}>
@@ -469,7 +469,7 @@ function MessageBubble({
         )}
 
         <div className={`max-[500px]:max-w-[85%] max-w-[75%] lg:max-w-[65%] min-w-0 ${isMine ? 'items-end' : 'items-start'} flex flex-col`}>
-          {!isMine && showAvatar && (
+          {!isMine && showAvatar && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
             <button
               className="text-xs font-medium text-knot-400 ml-3 mb-0.5 hover:underline"
               onClick={() => onViewProfile?.(message.senderId)}
@@ -1085,7 +1085,7 @@ function MessageBubble({
           )}
         </div>
 
-        {isMine && (
+        {isMine && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
           <div className="w-8 flex-shrink-0 ml-2 self-end">
             {showAvatar ? (
               <button onClick={() => onViewProfile?.(message.senderId)}>