@@ -96,18 +517,110 @@ export default function ChatPage() {
{/* Chats List */}
{/* Main Chat Area */}
- {
+ const response = await apiClient.get('/chats/', {
+ params: { offset, limit }
+ });
+ return response.data;
+ },
+
+ async getChatMessages(chatId: string, offset: number = 0, limit: number = 50): Promise {
+ const response = await apiClient.get(`/chats/${chatId}`, {
+ params: { offset, limit }
+ });
+ return response.data;
+ },
+
+ async sendMessage(data: MessageCreate): Promise {
+ const response = await apiClient.post('/chats/message', data);
+ return response.data;
+ },
+
+ async updateMessage(data: MessageUpdate): Promise {
+ const response = await apiClient.put('/chats/message', data);
+ return response.data;
+ }
+};
+
+export default chatService;
diff --git a/frontend/src/services/userService.ts b/frontend/src/services/userService.ts
index 5b72555..58d70fe 100644
--- a/frontend/src/services/userService.ts
+++ b/frontend/src/services/userService.ts
@@ -26,6 +26,11 @@ export const userService = {
return response.data;
},
+ getUserById: async (userId: number): Promise => {
+ const response = await apiClient.get(`/users/${userId}`);
+ return response.data;
+ },
+
updateProfile: async (data: UserUpdate): Promise => {
const response = await apiClient.put('/users/me', data);
return response.data;
diff --git a/frontend/src/store/chatStore.ts b/frontend/src/store/chatStore.ts
new file mode 100644
index 0000000..7b00f42
--- /dev/null
+++ b/frontend/src/store/chatStore.ts
@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { Chat } from '../services/chatService';
+
+interface ChatStore {
+ chats: Chat[];
+ setChats: (chats: Chat[]) => void;
+ updateChat: (chatId: string, updates: Partial) => void;
+ clearChats: () => void;
+}
+
+export const useChatStore = create()(
+ persist(
+ (set) => ({
+ chats: [],
+
+ setChats: (chats) => set({ chats }),
+
+ updateChat: (chatId, updates) =>
+ set((state) => ({
+ chats: state.chats.map(chat =>
+ chat.chat_id === chatId ? { ...chat, ...updates } : chat
+ )
+ })),
+
+ clearChats: () => set({ chats: [] }),
+ }),
+ {
+ name: 'aether-chats',
+ partialize: (state) => ({ chats: state.chats }),
+ }
+ )
+);
- {/* Placeholder for future chats */}
-
@@ -120,28 +633,512 @@ export default function ChatPage() {
- handleChatClick(chat)}
+ className="p-4 rounded-2xl cursor-pointer transition-all relative overflow-hidden"
+ style={{
+ backgroundColor: selectedChat?.chat_id === chat.chat_id ? 'var(--accent-primary)' : 'var(--bg-input)',
+ boxShadow: selectedChat?.chat_id === chat.chat_id ? '0 4px 12px rgba(0,0,0,0.1)' : 'none',
+ }}
+ >
+
+ ))
+ )}
-
+ ) : error ? (
+
+
+
- + Загрузка чатов... +
- Пока нет чатов -
-- Начните новый диалог -
-
+
+ ) : chats.length === 0 ? (
+ {error}
+
+
+ ) : (
+ chats.map((chat) => (
+
+
+ + Пока нет чатов +
++ Начните новый диалог +
+
+ {/* Chat Avatar with Online Indicator */}
+
+
+
+
+ {/* Chat Info */}
+
+ {!chat.avatar_url && (
+ 
+ )}
+
+ {/* Online indicator */}
+
+
+
+
+
+
+ {chat.last_message ? (
+ + {chat.display_name} +
+ {/* Time badge */} + + 12:34 + ++ {chat.last_message} +
+ ) : ( ++ Нет сообщений +
+ )} +
- {/* Empty State */}
-
);
}
diff --git a/frontend/src/services/chatService.ts b/frontend/src/services/chatService.ts
new file mode 100644
index 0000000..5c092b1
--- /dev/null
+++ b/frontend/src/services/chatService.ts
@@ -0,0 +1,58 @@
+import apiClient from './api';
+
+export type Chat = {
+ chat_id: string;
+ user_id: number;
+ last_message: string | null;
+ avatar_url: string | null;
+ display_name: string;
+}
+
+export type Message = {
+ id: string;
+ sender_id: number;
+ chat_id: string;
+ content: string;
+ is_edited?: boolean;
+ created_at: string;
+ updated_at: string;
+}
+
+export type MessageCreate = {
+ content: string;
+ chat_id?: string;
+ recipient_id?: number;
+}
+
+export type MessageUpdate = {
+ id: string;
+ content: string;
+}
+
+const chatService = {
+ async getChats(offset: number = 0, limit: number = 10): Promise
-
+
+ )}
+
+
+ {viewingUser && (
+ setViewingUser(null)}
+ >
e.stopPropagation()}
>
-
-
+ {selectedChat ? (
+ <>
+ {/* Chat Header */}
+
+ {showScrollButton && (
+
+
+ {unreadCount > 99 ? '99+' : unreadCount}
+
+ )}
+
+ )}
+
+
+ {/* Message Input */}
+
+
+ {/* User Profile Modal */}
+
+
+
+
+ handleViewUserProfile(selectedChat.user_id)}
+ className="w-12 h-12 flex-shrink-0 flex items-center justify-center cursor-pointer"
+ style={{
+ backgroundImage: selectedChat.avatar_url ? `url(${selectedChat.avatar_url})` : undefined,
+ backgroundSize: 'cover',
+ backgroundPosition: 'center',
+ borderRadius: selectedChat.avatar_url ? '50%' : '0',
+ }}
+ >
+ {!selectedChat.avatar_url && (
+
+ )}
+
+
+
+
+ {/* Messages Area */}
+ handleViewUserProfile(selectedChat.user_id)}
+ >
+
+ + {selectedChat.display_name} +
++ в сети +
+
+ {loadingMore && (
+
+
+ {/* Scroll to bottom button with unread counter - OUTSIDE scroll container */}
+
+
+
+ )}
+ {messagesLoading ? (
+
+
+
+ ) : messagesError ? (
+
+
+ ) : messages.length === 0 ? (
+ {messagesError}
+
+
+ ) : (
+
+
+
+
+ + Начните общение +
++ Отправьте первое сообщение в этот чат +
+
+ {messages.map((message, index) => {
+ const isMyMessage = message.sender_id === user?.id;
+ const prevMessage = index > 0 ? messages[index - 1] : null;
+ const showAvatar = !prevMessage || prevMessage.sender_id !== message.sender_id;
+ const nextMessage = index < messages.length - 1 ? messages[index + 1] : null;
+ const isLastInGroup = !nextMessage || nextMessage.sender_id !== message.sender_id;
+
+ // Check if date changed from previous message
+ const messageDate = new Date(message.created_at);
+ const prevMessageDate = prevMessage ? new Date(prevMessage.created_at) : null;
+ const showDateDivider = !prevMessageDate ||
+ messageDate.toDateString() !== prevMessageDate.toDateString();
+
+ return (
+
+ )}
+
+ {/* Date divider */}
+ {showDateDivider && (
+
+ {/* Avatar for incoming messages */}
+ {!isMyMessage && showAvatar && (
+
+ {!selectedChat.avatar_url && (
+
+ )}
+
+ )}
+
+ {/* Message bubble */}
+
+
+ );
+ })}
+
+ {/* Invisible element to scroll to */}
+
+
+
+ )}
+
+
+ {messageDate.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })}
+
+
+ {/* Sender name for incoming messages */}
+ {!isMyMessage && showAvatar && (
+
+ {selectedChat.display_name}
+
+ )}
+
+
+ {/* Edit button - показываем только для своих сообщений */}
+ {isMyMessage && editingMessageId !== message.id && (
+
+ )}
+
+ {/* Message content or edit input */}
+ {editingMessageId === message.id ? (
+
+
+ {/* Reactions placeholder - можно добавить позже */}
+ {isLastInGroup && false && (
+
+
+ setEditingMessageText(e.target.value)}
+ onKeyDown={(e) => handleEditKeyPress(e, message.id)}
+ autoFocus
+ className="flex-1 bg-transparent border-b-2 outline-none"
+ style={{
+ borderColor: isMyMessage ? 'rgba(255,255,255,0.5)' : 'var(--accent-primary)',
+ color: isMyMessage ? 'white' : 'var(--text-primary)'
+ }}
+ />
+
+
+
+ ) : (
+ {message.content}
+ )} + + {/* Message metadata */} +
+ {/* Edited indicator */}
+ {message.is_edited && (
+
+ изменено
+
+ )}
+
+
+ {new Date(message.created_at).toLocaleTimeString('ru-RU', {
+ hour: '2-digit',
+ minute: '2-digit'
+ })}
+
+
+ {/* Read status for my messages */}
+ {isMyMessage && (
+
+ )}
+
+
+ ❤️
+
+ )}
+
+
+
+ ) : (
+ /* Empty State */
+
+ setMessageText(e.target.value)}
+ onKeyPress={handleKeyPress}
+ placeholder="Написать сообщение..."
+ disabled={sendingMessage}
+ className="flex-1 px-4 py-3 rounded-2xl font-inter text-sm outline-none transition"
+ style={{
+ backgroundColor: 'var(--bg-input)',
+ color: 'var(--text-primary)',
+ borderBottom: '2px solid transparent',
+ }}
+ onFocus={(e) => e.target.style.borderBottomColor = 'var(--accent-primary)'}
+ onBlur={(e) => e.target.style.borderBottomColor = 'transparent'}
+ />
+
+ {sendingMessage ? (
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ + Добро пожаловать в Aether +
++ Выберите существующий чат из списка слева или создайте новый, чтобы начать общение +
+
-
+ {/* Modal Header */}
+
-
+
+
+
+ {/* Modal Content */}
+ + Профиль пользователя +
+
+ {/* Avatar */}
+
-
+
+
+ {/* User Info */}
+
+ {!viewingUser.avatar_url && (
+
+
+
+
+ {/* Actions */}
+
+
+
+ {viewingUser.description && (
+ + {viewingUser.display_name} +
++ @{viewingUser.username} +
+
+
+ )}
+
+ {viewingUser.birth_day && (
+ + {viewingUser.description} +
+
+ 🎂
+
+ {new Date(viewingUser.birth_day).toLocaleDateString('ru-RU', {
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric'
+ })}
+
+
+ )}
+
+
+ ✉️
+ {viewingUser.email}
+
+
+ setViewingUser(null)}
+ className="w-full py-3 px-4 rounded-2xl font-inter font-semibold transition hover:opacity-90"
+ style={{ backgroundColor: 'var(--accent-primary)', color: 'white' }}
+ >
+ Закрыть
+
+
- Добро пожаловать в Aether -
-- Выберите существующий чат из списка слева или создайте новый, чтобы начать общение -
-