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

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/core/infrastructure/i18n.ts

@@ -194,7 +194,8 @@ const translations = {
     clearChatConfirm: 'Очистить историю чата для себя? Собеседник сохранит свою историю.',
     clearHistory: 'Очистить историю',
     clearHistoryConfirm: 'Очистить историю?',
-    deleteChatConfirm: 'Удалить чат? Это действие нельзя отменить.',
+    deleteChatConfirm: 'Удалить чат? Это действие нельзя отменить. Чат будет удалён у всех участников.',
+    deleteGroupChatConfirm: 'Удалить чат? Это действие нельзя отменить. Чат будет удалён у всех участников.',
     pinChat: 'Закрепить чат',
     unpinChat: 'Открепить чат',
     chatCleared: 'Очищено',
@@ -574,7 +575,8 @@ const translations = {
     clearChatConfirm: 'Clear chat history for yourself? The other person will keep their history.',
     clearHistory: 'Clear history',
     clearHistoryConfirm: 'Clear history?',
-    deleteChatConfirm: 'Delete this chat? This action cannot be undone.',
+    deleteChatConfirm: 'Delete this chat? This action cannot be undone. The chat will be removed for all participants.',
+    deleteGroupChatConfirm: 'Delete this chat? This action cannot be undone. The chat will be removed for all participants.',
     pinChat: 'Pin chat',
     unpinChat: 'Unpin chat',
     chatCleared: 'Chat cleared',

client-web/src/core/presentation/layouts/GlobalNavBar.tsx

@@ -17,7 +17,7 @@ export default function GlobalNavBar({ activeTab, onTabChange }: GlobalNavBarPro
 
   return (
     <nav
-      className="lg:fixed lg:left-0 lg:top-0 lg:h-[100dvh] lg:w-20 w-full h-16 fixed bottom-0 left-0 bg-surface-container-low border-t lg:border-t-0 lg:border-r border-white/5 flex lg:flex-col flex-row items-center justify-around lg:justify-start lg:py-8 lg:gap-4 z-50 transition-all safe-area-bottom"
+      className="lg:fixed lg:left-0 lg:top-0 lg:h-[100dvh] lg:w-20 w-full h-16 fixed bottom-0 left-0 bg-surface-container-low border-t lg:border-t-0 lg:border-r border-white/5 flex lg:flex-col flex-row items-center justify-around lg:justify-start lg:pt-8 lg:pb-14 lg:gap-4 z-50 transition-all safe-area-bottom"
     >
       <div className="hidden lg:flex mb-10 flex-col items-center">
         <span className="text-2xl font-black text-primary tracking-tighter italic knot-logo-spin">Knot</span>
@@ -46,7 +46,7 @@ export default function GlobalNavBar({ activeTab, onTabChange }: GlobalNavBarPro
       </div>
 
       <div 
-        className="lg:mt-auto group cursor-pointer relative flex items-center justify-center px-4 lg:px-0"
+        className="lg:mt-auto lg:mb-4 group cursor-pointer relative flex items-center justify-center px-4 lg:px-0"
         onClick={() => onTabChange('settings')}
       >
         <div className="absolute -inset-1 bg-primary/20 rounded-2xl opacity-0 group-hover:opacity-100 blur transition-opacity" />

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

@@ -104,7 +104,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
       // Wait a bit for React to render
       setTimeout(() => {
         if (!tryScroll()) {
-           NotificationStore.useNotificationStore.getState().addNotification('warning', (t as any)('messageNotFound') || 'Message not found');
+          NotificationStore.useNotificationStore.getState().addNotification('warning', (t as any)('messageNotFound') || 'Message not found');
         }
       }, 300);
     } else {
@@ -137,25 +137,25 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
 
   useEffect(() => {
     if (!chat?.isImporting || !chat?.importJobId) {
-        setImportStatus(null);
+      setImportStatus(null);
-        return;
+      return;
     }
 
     const poll = async () => {
-        try {
+      try {
-            const data = await httpClient.request<any>(`/import/telegram/status/${chat.importJobId}`);
+        const data = await httpClient.request<any>(`/import/telegram/status/${chat.importJobId}`);
-            setImportStatus({ processed: data.processedMessages, total: data.totalMessages, status: data.status });
+        setImportStatus({ processed: data.processedMessages, total: data.totalMessages, status: data.status });
-            if (data.status === 'Completed' || data.status === 'Failed') {
+        if (data.status === 'Completed' || data.status === 'Failed') {
-                setImportStatus(null);
+          setImportStatus(null);
-                loadChats();
+          loadChats();
-            }
-        } catch (e: any) {
-            if (e.status === 404) {
-                console.warn('Import job not found');
-            } else {
-                console.error('Failed to poll status', e);
-            }
         }
+      } catch (e: any) {
+        if (e.status === 404) {
+          console.warn('Import job not found');
+        } else {
+          console.error('Failed to poll status', e);
+        }
+      }
     };
 
     poll();
@@ -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) {
+  // Update sessionUnreadRef when chat changes OR when messages are marked as read
-    const firstUnreadMsg = chatMessages.find(
+  useEffect(() => {
-      (m) => m.senderId !== user?.id && !m.readBy?.some((r) => r.userId === user?.id)
+    if (!activeChat || isLoadingMessages) return;
-    );
+
-    sessionUnreadRef.current = { chatId: activeChat, msgId: firstUnreadMsg ? firstUnreadMsg.id : null };
+    // 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);
 
@@ -280,9 +299,9 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
     isAtBottomRef.current = isAtBottomNow;
 
     if (isAtBottomNow) {
-       localStorage.setItem(`chat_at_bottom_${chatId}`, 'true');
+      localStorage.setItem(`chat_at_bottom_${chatId}`, 'true');
-       localStorage.removeItem(`chat_anchor_${chatId}`);
+      localStorage.removeItem(`chat_anchor_${chatId}`);
-       return;
+      return;
     }
 
     const messageElements = container.querySelectorAll('[data-message-id]');
@@ -304,8 +323,8 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
     }
 
     if (anchor && anchor.id) {
-       localStorage.setItem(`chat_anchor_${chatId}`, JSON.stringify(anchor));
+      localStorage.setItem(`chat_anchor_${chatId}`, JSON.stringify(anchor));
-       localStorage.removeItem(`chat_at_bottom_${chatId}`);
+      localStorage.removeItem(`chat_at_bottom_${chatId}`);
     }
   }, [activeChat, scrollReady, chatMessages]);
 
@@ -333,13 +352,13 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
 
         // Поиск ближайшего, если точное сообщение еще не загружено
         if (!el) {
-           const msgIndex = chatMessages.findIndex(m => m.id === id);
+          const msgIndex = chatMessages.findIndex(m => m.id === id);
-           if (msgIndex !== -1) {
+          if (msgIndex !== -1) {
-              for (let i = msgIndex; i < chatMessages.length; i++) {
+            for (let i = msgIndex; i < chatMessages.length; i++) {
-                 const nextEl = container.querySelector(`[data-message-id="${chatMessages[i].id}"]`) as HTMLElement;
+              const nextEl = container.querySelector(`[data-message-id="${chatMessages[i].id}"]`) as HTMLElement;
-                 if (nextEl) { el = nextEl; break; }
+              if (nextEl) { el = nextEl; break; }
-              }
+            }
-           }
+          }
         }
 
         if (el) {
@@ -405,18 +424,18 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
 
       // Сохраняем позицию старого чата
       if (prevChatIdRef.current && scrollContainerRef.current && scrollReady) {
-          saveScrollPosition(prevChatIdRef.current);
+        saveScrollPosition(prevChatIdRef.current);
       }
 
       setScrollReady(false);
       prevChatIdRef.current = activeChat;
 
       if (scrollContainerRef.current) {
-          scrollContainerRef.current.scrollTop = 0;
+        scrollContainerRef.current.scrollTop = 0;
       }
 
       const timer = setTimeout(() => {
-          isInitializingRef.current = false;
+        isInitializingRef.current = false;
       }, 600);
 
       return () => clearTimeout(timer);
@@ -509,10 +528,10 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
 
         isScrollingToBottomRef.current = true;
         if (scrollContainerRef.current) {
-            scrollContainerRef.current.scrollTo({
+          scrollContainerRef.current.scrollTo({
-                top: scrollContainerRef.current.scrollHeight,
+            top: scrollContainerRef.current.scrollHeight,
-                behavior: 'smooth'
+            behavior: 'smooth'
-            });
+          });
         }
 
         setTimeout(() => {
@@ -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);
+          }
         }
       });
     };
@@ -646,7 +685,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
       <section className="flex-1 h-full flex flex-col items-center justify-center bg-[#010101] relative overflow-hidden">
         {/* Background Knot Texture */}
         <div className="absolute inset-0 opacity-[0.04] pointer-events-none flex items-center justify-center">
-            <span className="material-symbols-outlined text-white text-[500px] select-none">cloud_download</span>
+          <span className="material-symbols-outlined text-white text-[500px] select-none">cloud_download</span>
         </div>
 
         {/* Chat Empty State View */}
@@ -1153,7 +1192,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
               <div className="flex items-center justify-between mb-2 px-1">
                 <span className="text-xs font-black uppercase tracking-widest text-primary">
                   {importStatus?.status === 'Processing' ? 'Обработка' :
-                   importStatus?.status === 'Queued' ? 'В очереди' : 'Загрузка'}
+                    importStatus?.status === 'Queued' ? 'В очереди' : 'Загрузка'}
                 </span>
                 <span className="text-xs font-black text-on-surface tabular-nums">
                   {importStatus?.processed || 0} / {importStatus?.total || 0}
@@ -1227,7 +1266,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
                   </p>
                   <p className="text-sm text-zinc-300 truncate font-medium">
                     {chatPinnedMessages[pinnedIndex % chatPinnedMessages.length]?.content ||
-                     (chatPinnedMessages[pinnedIndex % chatPinnedMessages.length]?.media?.length > 0 ? t('media') : '...')}
+                      (chatPinnedMessages[pinnedIndex % chatPinnedMessages.length]?.media?.length > 0 ? t('media') : '...')}
                   </p>
                 </div>
               </button>
@@ -1377,11 +1416,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
         </>
       )}
 
-      {typingInChat.length > 0 && (
+      {/* Typing indicator is already shown in the header, removed from here to prevent layout jumping */}
-        <div className="px-4 pb-1">
-          <TypingIndicator />
-        </div>
-      )}
 
       {(() => {
         return (

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

@@ -331,65 +331,70 @@ export default function MessageInput({ chatId }: MessageInputProps) {
     });
   };
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const processFiles = useCallback((files: File[]) => {
-    const files = Array.from(e.target.files || []);
+    const { addNotification } = useNotificationStore.getState();
-    if (files.length > 0) {
+    const newAttachments: Attachment[] = [];
-      const { addNotification } = useNotificationStore.getState();
-      const newAttachments: Attachment[] = [];
     
-      let tooLarge = false;
+    let tooLarge = false;
-      let limitExceeded = false;
+    let limitExceeded = false;
 
-      for (const file of files) {
+    for (const file of files) {
-        if (attachments.length + newAttachments.length >= 20) {
+      if (attachments.length + newAttachments.length >= 20) {
-          limitExceeded = true;
+        limitExceeded = true;
-          break;
+        break;
-        }
+      }
-        if (file.size > MAX_FILE_SIZE) {
+      if (file.size > MAX_FILE_SIZE) {
-          tooLarge = true;
+        tooLarge = true;
-          continue;
+        continue;
-        }
-        const isAudio = file.type.startsWith('audio/') || AUDIO_EXTENSIONS.some(ext => file.name.toLowerCase().endsWith(ext));
-        newAttachments.push({ file, type: isAudio ? 'audio' : 'file' });
       }
 
-      if (tooLarge) addNotification('warning', t('fileTooLarge') || 'Some files are too large');
+      const isVideo = file.type.startsWith('video/');
-      if (limitExceeded) addNotification('warning', t('maxFilesLimit' as any) || 'Maximum 20 files');
+      const isImage = file.type.startsWith('image/');
+      const isAudio = file.type.startsWith('audio/') || AUDIO_EXTENSIONS.some(ext => file.name.toLowerCase().endsWith(ext));
 
-      setAttachments(prev => [...prev, ...newAttachments]);
+      const type = isImage ? 'image' : isVideo ? 'video' : isAudio ? 'audio' : 'file';
-      inputRef.current?.focus();
+      const preview = isImage ? URL.createObjectURL(file) : undefined;
+
+      newAttachments.push({ file, type, preview });
     }
+
+    if (tooLarge) addNotification('warning', t('fileTooLarge') || 'Some files are too large');
+    if (limitExceeded) addNotification('warning', t('maxFilesLimit' as any) || 'Maximum 20 files');
+    
+    setAttachments(prev => [...prev, ...newAttachments]);
+    inputRef.current?.focus();
+  }, [attachments, t]);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) processFiles(files);
     e.target.value = '';
     setShowAttachMenu(false);
   };
 
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files || []);
-    if (files.length > 0) {
+    if (files.length > 0) processFiles(files);
-      const { addNotification } = useNotificationStore.getState();
-      const newAttachments: Attachment[] = [];
-      
-      let limitExceeded = false;
-
-      for (const file of files) {
-        if (attachments.length + newAttachments.length >= 20) {
-          limitExceeded = true;
-          break;
-        }
-        const isVideo = file.type.startsWith('video/');
-        const preview = file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined;
-        newAttachments.push({ file, preview, type: isVideo ? 'video' : 'image' });
-      }
-
-      if (limitExceeded) addNotification('warning', t('maxFilesLimit' as any) || 'Maximum 20 files');
-      
-      setAttachments(prev => [...prev, ...newAttachments]);
-      inputRef.current?.focus();
-    }
     e.target.value = '';
     setShowAttachMenu(false);
   };
 
+  const handlePaste = (e: React.ClipboardEvent) => {
+    const items = Array.from(e.clipboardData.items);
+    const files = items
+      .filter(item => item.kind === 'file')
+      .map(item => item.getAsFile())
+      .filter((f): f is File => f !== null);
+
+    if (files.length > 0) {
+      processFiles(files);
+      // If we only pasted files, don't paste the filename/text representation in the textarea
+      if (items.every(item => item.kind === 'file')) {
+        e.preventDefault();
+      }
+    }
+  };
+
   // Запись голосового
   const startRecording = async () => {
     try {
@@ -569,41 +574,11 @@ export default function MessageInput({ chatId }: MessageInputProps) {
 
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
       const files = Array.from(e.dataTransfer.files);
-      const { addNotification } = useNotificationStore.getState();
+      processFiles(files);
-      const newAttachments: Attachment[] = [];
-      
-      let tooLarge = false;
-      let limitExceeded = false;
-
-      for (const file of files) {
-        if (attachments.length + newAttachments.length >= 20) {
-          limitExceeded = true;
-          break;
-        }
-        if (file.size > MAX_FILE_SIZE) {
-          tooLarge = true;
-          continue;
-        }
-
-        const isVideo = file.type.startsWith('video/');
-        const isImage = file.type.startsWith('image/');
-        const audioExts = ['.mp3', '.wav', '.ogg', '.m4a', '.aac', '.flac', '.wma', '.opus'];
-        const isAudio = file.type.startsWith('audio/') || audioExts.some(ext => file.name.toLowerCase().endsWith(ext));
-
-        const type = isImage ? 'image' : isVideo ? 'video' : isAudio ? 'audio' : 'file';
-        const preview = isImage ? URL.createObjectURL(file) : undefined;
-
-        newAttachments.push({ file, type, preview });
-      }
-
-      if (tooLarge) addNotification('warning', t('fileTooLarge') || 'Some files are too large');
-      if (limitExceeded) addNotification('warning', t('maxFilesLimit' as any) || 'Maximum 20 files');
-      
-      setAttachments(prev => [...prev, ...newAttachments]);
-      inputRef.current?.focus();
     }
   };
 
+
   const hasContent = text.trim() || attachments.length > 0;
 
   return (
@@ -856,6 +831,7 @@ export default function MessageInput({ chatId }: MessageInputProps) {
                 }}
                 onKeyDown={handleKeyDown}
                 onContextMenu={handleInputContextMenu}
+                onPaste={handlePaste}
                 rows={1}
                 className="w-full bg-transparent border-none focus:ring-0 text-[#efeff3] placeholder-on-surface-variant/30 text-[16px] leading-[1.3] resize-none max-h-[140px] custom-scrollbar outline-none py-1 px-0"
                 placeholder={attachments.length > 0 ? t('addCaption') : t('messagePlaceholder') || 'Сообщение...'}