+
+ {selectedUser.avatarUrl || selectedUser.avatar ? (
+

+ ) : (
+
+
+
+ )}
+
+
{selectedUser.displayName || selectedUser.userName || selectedUser.username || ''}
+
@{selectedUser.userName || selectedUser.username || ''}
diff --git a/client-web/src/modules/calls/presentation/components/CallModal.tsx b/client-web/src/modules/calls/presentation/components/CallModal.tsx
index 953401d..ae92964 100644
--- a/client-web/src/modules/calls/presentation/components/CallModal.tsx
+++ b/client-web/src/modules/calls/presentation/components/CallModal.tsx
@@ -11,7 +11,7 @@ type CallState = 'idle' | 'calling' | 'incoming' | 'connected' | 'ended';
interface CallModalProps {
isOpen: boolean;
onClose: () => void;
- targetUser: { id: string; displayName?: string; username: string; avatar?: string | null } | null;
+ targetUser: { id: string; displayName?: string; username?: string; avatar?: string | null } | null;
callType: 'voice' | 'video';
incoming?: {
from: string;
diff --git a/client-web/src/modules/chats/presentation/ChatPage.tsx b/client-web/src/modules/chats/presentation/ChatPage.tsx
index eed8346..e54c6d2 100644
--- a/client-web/src/modules/chats/presentation/ChatPage.tsx
+++ b/client-web/src/modules/chats/presentation/ChatPage.tsx
@@ -6,7 +6,7 @@ import { getSocket, disconnectSocket } from '../../../core/infrastructure/socket
import { ChatApi } from '../infrastructure/chatApi';
import { playNotificationSound, isChatMuted, playCallRingtone, stopCallRingtone } from '../../../core/utils/sounds';
import { useLang } from '../../../core/infrastructure/i18n';
-import type { Message, UserBasic, CallInfo } from '../../../core/domain/types';
+import type { Message, UserBasic, CallInfo, ChatMember } from '../../../core/domain/types';
import { Send, Check, Phone, PhoneOff } from 'lucide-react';
import Sidebar from '../../../core/presentation/layouts/Sidebar';
import ChatView from './components/ChatView';
diff --git a/client-web/src/modules/chats/presentation/components/ChatListItem.tsx b/client-web/src/modules/chats/presentation/components/ChatListItem.tsx
index cd28974..94ae243 100644
--- a/client-web/src/modules/chats/presentation/components/ChatListItem.tsx
+++ b/client-web/src/modules/chats/presentation/components/ChatListItem.tsx
@@ -32,19 +32,19 @@ function ChatListItem({ chat, isActive }: ChatListItemProps) {
const otherMember = chat.members.find((m) => m.user.id !== user?.id);
const isFavorites = chat.type === 'favorites';
- const chatName = isFavorites
+ const chatName = (isFavorites
? t('favorites')
: chat.type === 'personal'
? otherMember?.user.displayName || otherMember?.user.userName || otherMember?.user.username || t('chat')
- : chat.name || t('group');
+ : chat.name || t('group')) || '??';
- const chatAvatar = isFavorites
+ const chatAvatar: string | null = isFavorites
? null
: chat.type === 'personal'
- ? otherMember?.user.avatarUrl || otherMember?.user.avatar
- : chat.avatarUrl || chat.avatar;
+ ? otherMember?.user.avatarUrl || otherMember?.user.avatar || null
+ : chat.avatarUrl || chat.avatar || null;
- const isOnline = chat.type === 'personal' && otherMember?.user.isOnline;
+ const isOnline = chat.type === 'personal' && !!otherMember?.user.isOnline;
// Check if someone is typing in this chat
const typingInChat = typingUsers.filter((t) => t.chatId === chat.id && t.userId !== user?.id);
@@ -128,8 +128,9 @@ function ChatListItem({ chat, isActive }: ChatListItemProps) {
} catch (e) { console.error(e); }
};
- const initials = chatName
+ const initials = (chatName || '??')
.split(' ')
+ .filter(Boolean)
.map((w: string) => w[0])
.join('')
.slice(0, 2)
@@ -151,7 +152,7 @@ function ChatListItem({ chat, isActive }: ChatListItemProps) {
) : (
-
+
)}
diff --git a/client-web/src/modules/chats/presentation/components/ChatView.tsx b/client-web/src/modules/chats/presentation/components/ChatView.tsx
index 03d9ac3..2258a04 100644
--- a/client-web/src/modules/chats/presentation/components/ChatView.tsx
+++ b/client-web/src/modules/chats/presentation/components/ChatView.tsx
@@ -93,13 +93,13 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
const chatName = isFavorites
? t('favorites')
: chat?.type === 'personal'
- ? otherMember?.user.displayName || otherMember?.user.username || t('chat')
+ ? otherMember?.user.displayName || otherMember?.user.userName || otherMember?.user.username || t('chat')
: chat?.name || t('group');
const chatAvatar = isFavorites
? null
: chat?.type === 'personal'
- ? otherMember?.user.avatar
- : chat?.avatar;
+ ? otherMember?.user.avatarUrl || otherMember?.user.avatar || null
+ : chat?.avatarUrl || chat?.avatar || null;
const isOnline = chat?.type === 'personal' && otherMember?.user.isOnline;
const typingInChat = typingUsers.filter((t) => t.chatId === activeChat && t.userId !== user?.id);
@@ -422,7 +422,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
);
}
- const initials = chatName
+ const initials = (chatName || '??')
.split(' ')
.map((w: string) => w[0])
.join('')
diff --git a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
index 9e4a7bd..93d680a 100644
--- a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
+++ b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
@@ -151,10 +151,9 @@ function MessageBubble({
};
const chatForDelete = chats.find(c => c.id === message.chatId);
+ const otherMember = chatForDelete?.members.find(m => m.user.id !== user?.id);
const otherMemberName = chatForDelete?.type === 'personal'
- ? chatForDelete.members.find(m => m.user.id !== user?.id)?.user.displayName
- || chatForDelete.members.find(m => m.user.id !== user?.id)?.user.username
- || ''
+ ? otherMember?.user.displayName || otherMember?.user.userName || otherMember?.user.username || ''
: '';
const isPinned = pinnedMessages[message.chatId]?.id === message.id;
@@ -306,7 +305,7 @@ function MessageBubble({
reactionGroups[r.emoji] = { count: 0, users: [], isMine: false, avatars: [] };
}
reactionGroups[r.emoji].count++;
- const displayName = r.user?.displayName || r.user?.username || '?';
+ const displayName = r.user?.displayName || r.user?.userName || r.user?.username || '?';
reactionGroups[r.emoji].users.push(displayName);
if (reactionGroups[r.emoji].avatars.length < 3) {
reactionGroups[r.emoji].avatars.push({
@@ -318,8 +317,8 @@ function MessageBubble({
if (r.userId === user?.id) reactionGroups[r.emoji].isMine = true;
});
- const senderName = message.sender?.displayName || message.sender?.username || '';
- const senderAvatar = message.sender?.avatar;
+ const senderName = message.sender?.displayName || message.sender?.userName || message.sender?.username || '';
+ const senderAvatar = message.sender?.avatarUrl || message.sender?.avatar;
const firstUrlMatch = message.content?.match(/https?:\/\/[^\s]+/);
const firstUrl = firstUrlMatch ? firstUrlMatch[0] : null;
@@ -453,7 +452,7 @@ function MessageBubble({
}}
>
- {message.replyTo.sender?.displayName || message.replyTo.sender?.username}
+ {message.replyTo.sender?.displayName || message.replyTo.sender?.userName || message.replyTo.sender?.username || ''}
{message.replyTo.isDeleted ? (
@@ -536,7 +535,7 @@ function MessageBubble({
onClick={() => onViewProfile?.(message.forwardedFromId!)}
>
- {(t('forwardedFrom' as any) === 'forwardedFrom' ? 'Переслано от' : t('forwardedFrom' as any))} {message.forwardedFrom.displayName || message.forwardedFrom.username}
+ {(t('forwardedFrom' as any) === 'forwardedFrom' ? 'Переслано от' : t('forwardedFrom' as any))} {message.forwardedFrom.displayName || message.forwardedFrom.userName || message.forwardedFrom.username || ''}
)}
diff --git a/client-web/src/modules/chats/presentation/components/MessageInput.tsx b/client-web/src/modules/chats/presentation/components/MessageInput.tsx
index a09c341..9c78a8a 100644
--- a/client-web/src/modules/chats/presentation/components/MessageInput.tsx
+++ b/client-web/src/modules/chats/presentation/components/MessageInput.tsx
@@ -22,7 +22,7 @@ import { useAuthStore } from '../../../auth/application/authStore';
import { ChatApi } from '../../infrastructure/chatApi';
import { getSocket } from '../../../../core/infrastructure/socket';
import { useLang } from '../../../../core/infrastructure/i18n';
-import { AUDIO_EXTENSIONS, MAX_FILE_SIZE } from '../../../../core/domain/types';
+import { AUDIO_EXTENSIONS, MAX_FILE_SIZE, type ChatMember } from '../../../../core/domain/types';
import { useNotificationStore } from '../../../../core/application/stores/notificationStore';
import EmojiPicker from './EmojiPicker';
@@ -70,27 +70,31 @@ export default function MessageInput({ chatId }: MessageInputProps) {
const filteredMembers = mentionQuery !== null && isGroup
? chatMembers.filter((m) => {
const q = mentionQuery.toLowerCase();
- return m.user.displayName.toLowerCase().includes(q) || m.user.username.toLowerCase().includes(q);
+ return (m.user.displayName || '').toLowerCase().includes(q)
+ || (m.user.userName || '').toLowerCase().includes(q)
+ || (m.user.username || '').toLowerCase().includes(q);
}).slice(0, 6)
: [];
- const insertMention = (member: { user: { username: string } }) => {
+ const insertMention = (member: ChatMember) => {
const el = inputRef.current;
if (!el) return;
+ const username = member.user.userName || member.user.username;
+ if (!username) return;
const cursorPos = el.selectionStart;
const before = text.substring(0, cursorPos);
const after = text.substring(cursorPos);
// Find the @ that started this mention
const atIdx = before.lastIndexOf('@');
if (atIdx === -1) return;
- const newText = before.substring(0, atIdx) + `@${member.user.username} ` + after;
+ const newText = before.substring(0, atIdx) + `@${username} ` + after;
setText(newText);
setDraft(chatId, newText);
setMentionQuery(null);
setMentionIndex(0);
setTimeout(() => {
el.focus();
- const newPos = atIdx + member.user.username.length + 2;
+ const newPos = atIdx + username.length + 2;
el.setSelectionRange(newPos, newPos);
}, 0);
};
@@ -617,7 +621,7 @@ export default function MessageInput({ chatId }: MessageInputProps) {
{editingMessage
? t('editing')
- : `${t('replyTo')} ${replyTo?.sender?.displayName || replyTo?.sender?.username || ''}`}
+ : `${t('replyTo')} ${replyTo?.sender?.displayName || replyTo?.sender?.userName || replyTo?.sender?.username || ''}`}
{replyTo?.quote ? `«${replyTo.quote}»` : (editingMessage || replyTo)?.content || t('media') || 'Медиа'}
@@ -813,16 +817,16 @@ export default function MessageInput({ chatId }: MessageInputProps) {
i === mentionIndex ? 'bg-accent/20 text-white' : 'text-zinc-300 hover:bg-white/5'
}`}
>
- {m.user.avatar ? (
-

+ {m.user.avatarUrl || m.user.avatar ? (
+

) : (
- {(m.user.displayName || m.user.username)[0]?.toUpperCase()}
+ {(m.user.displayName || m.user.userName || m.user.username || '?')[0]?.toUpperCase()}
)}
-
{m.user.displayName || m.user.username}
-
@{m.user.username}
+
{m.user.displayName || m.user.userName || m.user.username || '??'}
+
@{m.user.userName || m.user.username || '??'}
))}
diff --git a/client-web/src/modules/chats/presentation/components/NewChatModal.tsx b/client-web/src/modules/chats/presentation/components/NewChatModal.tsx
index f448eb1..72a7df8 100644
--- a/client-web/src/modules/chats/presentation/components/NewChatModal.tsx
+++ b/client-web/src/modules/chats/presentation/components/NewChatModal.tsx
@@ -171,10 +171,10 @@ export default function NewChatModal({ onClose }: NewChatModalProps) {

) : (
- {(u.displayName || u.username)?.[0]?.toUpperCase()}
+ {(u.displayName || u.userName || u.username || '?')[0]?.toUpperCase()}
)}
-
{u.displayName || u.username}
+
{u.displayName || u.userName || u.username || ''}
))}
@@ -276,7 +276,7 @@ export default function NewChatModal({ onClose }: NewChatModalProps) {

) : (
- {(u.displayName || u.username)?.[0]?.toUpperCase() || '?'}
+ {(u.displayName || u.userName || u.username || '?')[0]?.toUpperCase() || '?'}
)}
{u.isOnline && (
@@ -285,9 +285,9 @@ export default function NewChatModal({ onClose }: NewChatModalProps) {
- {u.displayName || u.username}
+ {u.displayName || u.userName || u.username || ''}
-
@{u.username}
+
@{u.userName || u.username || ''}
{mode === 'group-select' && (
) : (
- {(u.displayName || u.username)?.[0]?.toUpperCase() || '?'}
+ {(u.displayName || u.userName || u.username || '?')[0]?.toUpperCase() || '?'}
)}
{u.isOnline && (
@@ -335,9 +335,9 @@ export default function NewChatModal({ onClose }: NewChatModalProps) {