81 lines
3.2 KiB
TypeScript
81 lines
3.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
interface ChatHistoryItem {
|
|
id: number;
|
|
chat: string;
|
|
created_at: string;
|
|
}
|
|
|
|
const ChatHistory: React.FC = () => {
|
|
const [history, setHistory] = useState<ChatHistoryItem[]>([]);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
const storedUser = localStorage.getItem('user');
|
|
if (storedUser) {
|
|
const user = JSON.parse(storedUser);
|
|
const email = user.email;
|
|
fetch(`http://localhost:5000/api/chat_history?email=${encodeURIComponent(email)}`)
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
if (data.error) {
|
|
setError(data.error);
|
|
} else {
|
|
setHistory(data.history);
|
|
}
|
|
})
|
|
.catch(() => setError('Error fetching chat history'));
|
|
} else {
|
|
setError('User not logged in');
|
|
}
|
|
}, []);
|
|
|
|
// При клике перенаправляем пользователя на /dashboard/chat/{chatId}
|
|
const handleClick = (item: ChatHistoryItem) => {
|
|
navigate(`/dashboard/chat/${item.id}`, { state: { selectedChat: item } });
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: '20px' }}>
|
|
<h1>Chat History</h1>
|
|
{error && <p style={{ color: 'red' }}>{error}</p>}
|
|
{history.length === 0 && !error ? (
|
|
<p>No chat history found.</p>
|
|
) : (
|
|
<ul style={{ listStyleType: 'none', padding: 0 }}>
|
|
{history.map((item) => {
|
|
// Извлекаем первую строку из сохранённого чата.
|
|
// Предполагаем, что чат хранится в формате: "User: <вопрос>\nBot: <ответ>\n..."
|
|
const lines = item.chat.split("\n");
|
|
let firstUserMessage = lines[0];
|
|
if (firstUserMessage.startsWith("User:")) {
|
|
firstUserMessage = firstUserMessage.replace("User:", "").trim();
|
|
}
|
|
return (
|
|
<li
|
|
key={item.id}
|
|
style={{
|
|
marginBottom: '15px',
|
|
borderBottom: '1px solid #ccc',
|
|
paddingBottom: '10px',
|
|
cursor: 'pointer'
|
|
}}
|
|
onClick={() => handleClick(item)}
|
|
>
|
|
<div>
|
|
<strong>{firstUserMessage}</strong>
|
|
</div>
|
|
<small>{new Date(item.created_at).toLocaleString()}</small>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChatHistory;
|