From 87408ca9666fa1dfe2082723cb0651ea8e98630e Mon Sep 17 00:00:00 2001 From: FanisNgv Date: Mon, 9 Sep 2024 19:48:24 +0300 Subject: [PATCH] docked with server --- frontend/src/app/api.tsx | 8 +++ frontend/src/app/page.tsx | 101 +++++++++++++++++++++++++++----------- 2 files changed, 80 insertions(+), 29 deletions(-) diff --git a/frontend/src/app/api.tsx b/frontend/src/app/api.tsx index aed0024..03ead18 100644 --- a/frontend/src/app/api.tsx +++ b/frontend/src/app/api.tsx @@ -43,4 +43,12 @@ export const api = { }); return response.json(); }, + + async getMessages(conversationId: number) { + const response = await fetch(`${API_URL}/messages/${conversationId}`, { + method: 'GET', + credentials: "include" + }); + return response.json(); + }, }; \ No newline at end of file diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 522e2d9..549ac6e 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -1,23 +1,25 @@ "use client"; import { useState, useEffect } from 'react'; -import { v4 as uuidv4 } from 'uuid'; import { api } from './api'; import Sidebar from './components/Sidebar'; import MessageList from './components/MessageList'; +// Тип для хранения информации о чате type Conversation = { id: number; name: string; messages: Array<{ id: number; text: string; sender: string }>; }; +// Основная функция компонента export default function Home() { + // Состояния для хранения списка чатов, текущего чата и сообщений const [conversations, setConversations] = useState([]); const [currentConversationId, setCurrentConversationId] = useState(null); const [message, setMessage] = useState(''); const [messages, setMessages] = useState>([]); - const [isSidebarOpen, setIsSidebarOpen] = useState(true); + const [isSidebarOpen, setIsSidebarOpen] = useState(false); useEffect(() => { const initializeUser = async () => { @@ -29,16 +31,13 @@ export default function Home() { const formattedConversations = response.data.map((id: number) => ({ id: id, name: `Чат ${response.data.indexOf(id) + 1}`, - messages: [] // Здесь нужно будет загрузить сообщения отдельным запросом + messages: [] })); setConversations(formattedConversations); setCurrentConversationId(formattedConversations[0].id); - // Здесь нужно загрузить сообщения для первой беседы - // и установить их с помощью setMessages - // Например: const messages = await api.getMessagesForConversation(formattedConversations[0].id); - // setMessages(messages); + await loadMessagesForConversation(formattedConversations[0].id); } else { const newConversation = await handleAddConversation(); setConversations([newConversation]); @@ -68,16 +67,18 @@ export default function Home() { sender: 'user' }; + const conversationIdAtSend = currentConversationId; + setMessages(prevMessages => [...prevMessages, newMessage]); setConversations(prevConversations => prevConversations.map(conversation => - conversation.id === currentConversationId + conversation.id === conversationIdAtSend ? { ...conversation, messages: [...conversation.messages, newMessage] } : conversation ) ); - const response = await api.sendMessage(currentConversationId!, message); + const response = await api.sendMessage(conversationIdAtSend!, message); if (!response.task_id) { throw new Error('Ошибка при отправке сообщения'); @@ -121,11 +122,15 @@ export default function Home() { } }; - const handleChatChange = (id: number) => { + const handleChatChange = async (id: number) => { const selectedConversation = conversations.find(conversation => conversation.id === id); if (selectedConversation) { - setMessages(selectedConversation.messages); setCurrentConversationId(selectedConversation.id); + if (selectedConversation.messages.length === 0) { + await loadMessagesForConversation(selectedConversation.id); + } else { + setMessages(selectedConversation.messages); + } } }; @@ -168,30 +173,69 @@ export default function Home() { } return updatedConversations; }); - - // Опционально: показать уведомление об успешном удалении console.log('Чат успешно удален'); } catch (error) { - // Обработка ошибок console.error('Ошибка при удалении чата:', error); - // Опционально: показать уведомление об ошибке пользователю + } + }; + + const loadMessagesForConversation = async (conversationId: number) => { + try { + const response = await api.getMessages(conversationId); + if (response && response.length > 0 && response[0].messages && response[0].messages.length > 0) { + const conversationMessages = response[0].messages[0][conversationId]; + if (conversationMessages && Array.isArray(conversationMessages)) { + const formattedMessages = conversationMessages.map((msg: any) => ({ + id: msg.id, + text: msg.text, + sender: msg.role === 1 ? 'bot' : 'user' + })); + setMessages(formattedMessages); + setConversations(prevConversations => + prevConversations.map(conv => + conv.id === conversationId ? { ...conv, messages: formattedMessages } : conv + ) + ); + } else { + setMessages([]); + } + } else { + setMessages([]); + } + } catch (error) { + console.error('Ошибка при загрузке сообщений:', error); } }; return (
-
- handleDeleteConversation(id)} - isSidebarOpen={isSidebarOpen} - onCloseSidebar={() => setIsSidebarOpen(false)} - /> - -
+
+

AFANA

+ {isSidebarOpen && ( + + )} +
+
+
+ handleDeleteConversation(id)} + isSidebarOpen={isSidebarOpen} + onCloseSidebar={() => setIsSidebarOpen(false)} + /> +
+ +
@@ -207,9 +251,8 @@ export default function Home() { />