Add Notification and new mini desing

frontend/src/components/TicketChat.jsx

@@ -2,12 +2,14 @@ import { useState, useEffect, useRef } from 'react';
 import { ArrowLeft, Send, Clock, AlertCircle, CheckCircle } from 'lucide-react';
 import axios from 'axios';
 import { API_URL } from '../config';
+import { notify } from './NotificationSystem';
 
 export default function TicketChat({ ticket, token, user, theme, onBack }) {
   const [messages, setMessages] = useState(ticket.messages || []);
   const [newMessage, setNewMessage] = useState('');
   const [currentTicket, setCurrentTicket] = useState(ticket);
   const [loading, setLoading] = useState(false);
+  const [previousMessagesCount, setPreviousMessagesCount] = useState(ticket.messages?.length || 0);
   const messagesEndRef = useRef(null);
 
   useEffect(() => {
@@ -29,6 +31,30 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
       const { data } = await axios.get(`${API_URL}/api/tickets/${ticket.id}`, {
         headers: { Authorization: `Bearer ${token}` }
       });
+      
+      // Проверяем новые сообщения
+      if (data.messages.length > previousMessagesCount) {
+        const newMessagesCount = data.messages.length - previousMessagesCount;
+        const lastMessage = data.messages[data.messages.length - 1];
+        
+        // Уведомляем только если сообщение не от текущего пользователя
+        if (lastMessage.author !== user.username && lastMessage.author !== 'system') {
+          notify('info', 'Новое сообщение', `${lastMessage.author}: ${lastMessage.text.substring(0, 50)}${lastMessage.text.length > 50 ? '...' : ''}`);
+        }
+        
+        setPreviousMessagesCount(data.messages.length);
+      }
+      
+      // Проверяем изменение статуса
+      if (data.status !== currentTicket.status) {
+        const statusNames = {
+          'pending': 'На рассмотрении',
+          'in_progress': 'В работе',
+          'closed': 'Закрыт'
+        };
+        notify('info', 'Статус изменён', `Тикет #${ticket.id}: ${statusNames[data.status]}`);
+      }
+      
       setCurrentTicket(data);
       setMessages(data.messages || []);
     } catch (error) {
@@ -49,9 +75,12 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
       );
       setMessages(data.ticket.messages);
       setCurrentTicket(data.ticket);
+      setPreviousMessagesCount(data.ticket.messages.length);
       setNewMessage('');
+      notify('success', 'Сообщение отправлено', 'Ваше сообщение успешно отправлено');
     } catch (error) {
       console.error('Ошибка отправки сообщения:', error);
+      notify('error', 'Ошибка отправки', error.response?.data?.detail || 'Не удалось отправить сообщение');
       alert(error.response?.data?.detail || 'Ошибка отправки сообщения');
     } finally {
       setLoading(false);
@@ -59,6 +88,12 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
   };
 
   const changeStatus = async (newStatus) => {
+    const statusNames = {
+      'pending': 'На рассмотрении',
+      'in_progress': 'В работе',
+      'closed': 'Закрыт'
+    };
+    
     try {
       const { data } = await axios.put(
         `${API_URL}/api/tickets/${ticket.id}/status`,
@@ -67,8 +102,11 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
       );
       setCurrentTicket(data.ticket);
       setMessages(data.ticket.messages);
+      setPreviousMessagesCount(data.ticket.messages.length);
+      notify('success', 'Статус изменён', `Тикет #${ticket.id} теперь: ${statusNames[newStatus]}`);
     } catch (error) {
       console.error('Ошибка изменения статуса:', error);
+      notify('error', 'Ошибка изменения статуса', error.response?.data?.detail || 'Не удалось изменить статус');
       alert(error.response?.data?.detail || 'Ошибка изменения статуса');
     }
   };