Merge branch 'main' into android

This commit is contained in:
Халимов Рустам
2026-04-20 23:41:35 +03:00
7 changed files with 728 additions and 706 deletions

View File

@@ -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;

View File

@@ -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',

View File

@@ -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" />

View File

@@ -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 }}

View File

@@ -98,13 +98,13 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
NotificationStore.useNotificationStore.getState().addNotification('info', (t as any)('searchingHistory') || 'Searching message in history...');
const chatStore = useChatStore.getState();
if (sequenceId !== undefined) {
await chatStore.jumpToMessage(activeChat, sequenceId);
// 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);
return;
setImportStatus(null);
return;
}
const poll = async () => {
try {
const data = await httpClient.request<any>(`/import/telegram/status/${chat.importJobId}`);
setImportStatus({ processed: data.processedMessages, total: data.totalMessages, status: data.status });
if (data.status === 'Completed' || data.status === 'Failed') {
setImportStatus(null);
loadChats();
}
} catch (e: any) {
if (e.status === 404) {
console.warn('Import job not found');
} else {
console.error('Failed to poll status', e);
}
try {
const data = await httpClient.request<any>(`/import/telegram/status/${chat.importJobId}`);
setImportStatus({ processed: data.processedMessages, total: data.totalMessages, status: data.status });
if (data.status === 'Completed' || data.status === 'Failed') {
setImportStatus(null);
loadChats();
}
} 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) {
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);
@@ -270,19 +289,19 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
const saveScrollPosition = useCallback((targetChatId?: string) => {
const container = scrollContainerRef.current;
const chatId = targetChatId || activeChat;
if (!container || !chatId || !scrollReady || isInitializingRef.current || isScrollingToBottomRef.current) return;
// Проверка: сообщения в стейте должны быть от целевого чата
if (chatMessages.length > 0 && chatMessages[0].chatId !== chatId) return;
const isAtBottomNow = container.scrollHeight - container.scrollTop - container.clientHeight < 40;
isAtBottomRef.current = isAtBottomNow;
if (isAtBottomNow) {
localStorage.setItem(`chat_at_bottom_${chatId}`, 'true');
localStorage.removeItem(`chat_anchor_${chatId}`);
return;
localStorage.setItem(`chat_at_bottom_${chatId}`, 'true');
localStorage.removeItem(`chat_anchor_${chatId}`);
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.removeItem(`chat_at_bottom_${chatId}`);
localStorage.setItem(`chat_anchor_${chatId}`, JSON.stringify(anchor));
localStorage.removeItem(`chat_at_bottom_${chatId}`);
}
}, [activeChat, scrollReady, chatMessages]);
@@ -313,7 +332,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
const restoreScrollPosition = useCallback(() => {
const container = scrollContainerRef.current;
if (!container || !activeChat) return false;
if (chatMessages.length > 0 && chatMessages[0].chatId !== activeChat) return false;
if (chatMessages.length === 0) return true;
@@ -330,16 +349,16 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
try {
const { id, offset } = JSON.parse(saved);
let el = container.querySelector(`[data-message-id="${id}"]`) as HTMLElement;
// Поиск ближайшего, если точное сообщение еще не загружено
if (!el) {
const msgIndex = chatMessages.findIndex(m => m.id === id);
if (msgIndex !== -1) {
for (let i = msgIndex; i < chatMessages.length; i++) {
const nextEl = container.querySelector(`[data-message-id="${chatMessages[i].id}"]`) as HTMLElement;
if (nextEl) { el = nextEl; break; }
}
}
const msgIndex = chatMessages.findIndex(m => m.id === id);
if (msgIndex !== -1) {
for (let i = msgIndex; i < chatMessages.length; i++) {
const nextEl = container.querySelector(`[data-message-id="${chatMessages[i].id}"]`) as HTMLElement;
if (nextEl) { el = nextEl; break; }
}
}
}
if (el) {
@@ -368,7 +387,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
useEffect(() => {
if (isLoadingMessages || !scrollContainerRef.current || !activeChat) return;
const container = scrollContainerRef.current;
const observer = new ResizeObserver(() => {
if (isInitializingRef.current) return;
@@ -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);
@@ -443,7 +462,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
scrollTimeoutRef.current = setTimeout(() => saveScrollPosition(), 150);
const st = container.scrollTop;
const isScrollingUp = st < lastScrollTopRef.current;
const stChanged = st !== lastScrollTopRef.current;
@@ -473,7 +492,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
const containerRect = container.getBoundingClientRect();
const messageElements = container.querySelectorAll('[data-message-id]');
let currentTopMsgId = null;
for (const el of messageElements) {
const rect = el.getBoundingClientRect();
@@ -506,15 +525,15 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
// Принудительный сброс режима (Второй Клик)
localStorage.setItem(`chat_at_bottom_${activeChat}`, 'true');
localStorage.removeItem(`chat_anchor_${activeChat}`);
isScrollingToBottomRef.current = true;
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollTo({
top: scrollContainerRef.current.scrollHeight,
behavior: 'smooth'
});
scrollContainerRef.current.scrollTo({
top: scrollContainerRef.current.scrollHeight,
behavior: 'smooth'
});
}
setTimeout(() => {
isScrollingToBottomRef.current = false;
}, 1000);
@@ -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 */}
@@ -1152,16 +1191,16 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
<div className="space-y-4">
<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 === 'Processing' ? 'Обработка' :
importStatus?.status === 'Queued' ? 'В очереди' : 'Загрузка'}
</span>
<span className="text-xs font-black text-on-surface tabular-nums">
{importStatus?.processed || 0} / {importStatus?.total || 0}
</span>
</div>
<div className="h-3 w-full bg-surface-container-highest rounded-full overflow-hidden border border-outline/10 p-0.5">
<motion.div
<motion.div
initial={{ width: 0 }}
animate={{ width: `${Math.min(100, Math.round(((importStatus?.processed || 0) / (importStatus?.total || 1)) * 100))}%` }}
transition={{ type: 'spring', damping: 20 }}
@@ -1199,9 +1238,9 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
{chatPinnedMessages.length > 1 && (
<div className="absolute left-1 top-1.5 bottom-1.5 w-0.5 rounded-full bg-white/5 flex flex-col gap-0.5 overflow-hidden">
{chatPinnedMessages.map((_, idx) => (
<div
key={idx}
className={`flex-1 transition-colors duration-300 ${idx === pinnedIndex % chatPinnedMessages.length ? 'bg-primary' : 'bg-primary/20'}`}
<div
key={idx}
className={`flex-1 transition-colors duration-300 ${idx === pinnedIndex % chatPinnedMessages.length ? 'bg-primary' : 'bg-primary/20'}`}
/>
))}
</div>
@@ -1226,8 +1265,8 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
{t('pinnedMessage')} {chatPinnedMessages.length > 1 ? `#${(pinnedIndex % chatPinnedMessages.length) + 1}` : ''}
</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]?.content ||
(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 && (
<div className="px-4 pb-1">
<TypingIndicator />
</div>
)}
{/* Typing indicator is already shown in the header, removed from here to prevent layout jumping */}
{(() => {
return (

View File

@@ -331,65 +331,70 @@ export default function MessageInput({ chatId }: MessageInputProps) {
});
};
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const files = Array.from(e.target.files || []);
if (files.length > 0) {
const { addNotification } = useNotificationStore.getState();
const newAttachments: Attachment[] = [];
let tooLarge = false;
let limitExceeded = false;
const processFiles = useCallback((files: File[]) => {
const { addNotification } = useNotificationStore.getState();
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 isAudio = file.type.startsWith('audio/') || AUDIO_EXTENSIONS.some(ext => file.name.toLowerCase().endsWith(ext));
newAttachments.push({ file, type: isAudio ? 'audio' : 'file' });
for (const file of files) {
if (attachments.length + newAttachments.length >= 20) {
limitExceeded = true;
break;
}
if (file.size > MAX_FILE_SIZE) {
tooLarge = true;
continue;
}
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 isVideo = file.type.startsWith('video/');
const isImage = file.type.startsWith('image/');
const isAudio = file.type.startsWith('audio/') || AUDIO_EXTENSIONS.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();
}, [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) {
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();
}
if (files.length > 0) processFiles(files);
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();
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();
processFiles(files);
}
};
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') || 'Сообщение...'}