Update templates/index.html

templates/index.html

@@ -71,7 +71,7 @@
         }
         
         .chat-container {
-            height: calc(100vh - 200px);
+            height: calc(100vh - 240px);
             display: flex;
             flex-direction: column;
             padding: 20px;
@@ -109,6 +109,16 @@
             border-bottom-left-radius: 4px;
         }
         
+        .status-message {
+            background: rgba(243, 156, 18, 0.1);
+            border-left: 3px solid var(--warning);
+            align-self: center;
+            max-width: 90%;
+            text-align: center;
+            padding: 12px 20px;
+            margin: 10px 0;
+        }
+        
         .message-header {
             font-size: 12px;
             opacity: 0.8;
@@ -122,6 +132,9 @@
             padding: 20px;
             border-top: 1px solid rgba(0, 0, 0, 0.05);
             background: white;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
         }
         
         .input-group {
@@ -129,6 +142,44 @@
             gap: 10px;
         }
         
+        .action-buttons {
+            display: flex;
+            gap: 10px;
+            justify-content: flex-end;
+        }
+        
+        .action-btn {
+            padding: 8px 15px;
+            border-radius: 8px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            transition: var(--transition);
+        }
+        
+        .action-btn:hover {
+            transform: translateY(-2px);
+        }
+        
+        .btn-repeat {
+            background: rgba(67, 97, 238, 0.1);
+            color: var(--primary);
+        }
+        
+        .btn-repeat:hover {
+            background: rgba(67, 97, 238, 0.15);
+        }
+        
+        .btn-new {
+            background: rgba(231, 76, 60, 0.1);
+            color: var(--danger);
+        }
+        
+        .btn-new:hover {
+            background: rgba(231, 76, 60, 0.15);
+        }
+        
         #user-input {
             flex: 1;
             border: 1px solid var(--gray);
@@ -224,11 +275,16 @@
             font-weight: 600;
             color: var(--primary);
             margin-bottom: 8px;
+            border-left: 3px solid var(--primary);
+            padding-left: 10px;
         }
         .solution-text {
             font-weight: 600;
             color: var(--secondary);
+            margin-top: 15px;
             margin-bottom: 8px;
+            border-left: 3px solid var(--secondary);
+            padding-left: 10px;
         }
         
         .solution-step {
@@ -245,6 +301,48 @@
             font-weight: bold;
         }
         
+        .notes-text {
+            font-weight: 600;
+            color: #f39c12;
+            margin-top: 15px;
+            margin-bottom: 8px;
+            border-left: 3px solid #f39c12;
+            padding-left: 10px;
+        }
+        
+        .sources-title {
+            font-weight: 600;
+            color: #3f37c9;
+            margin-top: 15px;
+            margin-bottom: 8px;
+            border-left: 3px solid #3f37c9;
+            padding-left: 10px;
+        }
+        
+        .note-item {
+            padding-left: 20px;
+            position: relative;
+            margin-bottom: 6px;
+            font-style: italic;
+        }
+        
+        .note-item:before {
+            content: "•";
+            position: absolute;
+            left: 8px;
+            color: #f39c12;
+        }
+        
+        .source-reference {
+            display: inline-block;
+            background: rgba(67, 97, 238, 0.1);
+            color: var(--primary);
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 0.9em;
+            margin-right: 5px;
+        }
+        
         .sources-badge {
             display: inline-flex;
             align-items: center;
@@ -464,47 +562,6 @@
             margin-top: 15px;
             color: var(--primary);
         }
-
-      /* В разделе стилей */
-.notes-text {
-    font-weight: 600;
-    color: #f39c12; /* оранжевый для примечаний */
-    margin-top: 15px;
-    margin-bottom: 8px;
-    border-left: 3px solid #f39c12;
-    padding-left: 10px;
-}
-
-.sources-title {
-    font-weight: 600;
-    color: #3f37c9;
-    margin-top: 15px;
-    margin-bottom: 8px;
-}
-
-.note-item {
-    padding-left: 20px;
-    position: relative;
-    margin-bottom: 6px;
-    font-style: italic;
-}
-
-.note-item:before {
-    content: "•";
-    position: absolute;
-    left: 8px;
-    color: #f39c12;
-}
-
-.source-reference {
-    display: inline-block;
-    background: rgba(67, 97, 238, 0.1);
-    color: var(--primary);
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 0.9em;
-    margin-right: 5px;
-}
       
         @media (max-width: 768px) {
             .app-container {
@@ -556,6 +613,14 @@
                             <i class="fas fa-paper-plane"></i>
                         </button>
                     </div>
+                    <div class="action-buttons">
+                        <button id="repeat-btn" class="action-btn btn-repeat">
+                            <i class="fas fa-redo"></i> Повторить ответ
+                        </button>
+                        <button id="new-chat-btn" class="action-btn btn-new">
+                            <i class="fas fa-plus"></i> Новый диалог
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -580,6 +645,8 @@
     const chatContainer = document.getElementById('chat-container');
     const userInput = document.getElementById('user-input');
     const sendBtn = document.getElementById('send-btn');
+    const repeatBtn = document.getElementById('repeat-btn');
+    const newChatBtn = document.getElementById('new-chat-btn');
     const logsContainer = document.getElementById('logs-container');
     const statusIndicator = document.getElementById('status-indicator');
     const statusDot = statusIndicator.querySelector('.status-dot');
@@ -592,6 +659,7 @@
     let currentBotMessage = null;
     let processingLog = [];
     let responseBuffer = '';
+    let lastUserMessage = '';
     
     // Функция добавления временной метки
     function getTimestamp() {
@@ -630,6 +698,27 @@
         `;
         chatContainer.appendChild(messageDiv);
         chatContainer.scrollTop = chatContainer.scrollHeight;
+        lastUserMessage = message;
+    }
+    
+    // Добавление статусного сообщения
+    function addStatusMessage(message) {
+        if (welcomeState && welcomeState.parentElement === chatContainer) {
+            chatContainer.innerHTML = '';
+        }
+        
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'message status-message';
+        messageDiv.innerHTML = `
+            <div class="typing-indicator">
+                <div class="typing-dot"></div>
+                <div class="typing-dot"></div>
+                <div class="typing-dot"></div>
+                <span class="typing-text">${escapeHtml(message)}</span>
+            </div>
+        `;
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
     }
     
     // Создание сообщения бота с индикатором набора
@@ -721,24 +810,31 @@
     
     // Форматирование контента
     function formatContent(content) {
-    // Заменяем разделы на стилизованные блоки
-    content = content.replace(/\*\*Проблема:\*\*/g, 
-        '<div class="problem-text">Проблема:</div>');
-    content = content.replace(/\*\*Решение:\*\*/g, 
-        '<div class="solution-text">Решение:</div>');
-    content = content.replace(/\*\*Примечания:\*\*/g, 
-        '<div class="notes-text">Примечания:</div>');
-    content = content.replace(/\*\*Источники:\*\*/g, 
-        '<div class="sources-title">Источники:</div>');
-    content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
-    
-    // Обработка ссылок на источники
-    content = content.replace(/\[([^\]]+)\]\(([^)]+)\)/g, 
-        '<a href="$2" target="_blank" class="source-link">$1</a>');
-    
-    return content;
-}
-
+        // Заменяем разделы на стилизованные блоки
+        content = content.replace(/\*\*Проблема:\*\*/g, 
+            '<div class="problem-text">Проблема:</div>');
+        content = content.replace(/\*\*Решение:\*\*/g, 
+            '<div class="solution-text">Решение:</div>');
+        content = content.replace(/\*\*Примечания:\*\*/g, 
+            '<div class="notes-text">Примечания:</div>');
+        content = content.replace(/\*\*Источники информации:\*\*/g, 
+            '<div class="sources-title">Источники информации:</div>');
+        content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+        
+        // Обработка шагов решения
+        content = content.replace(/(\d+)\.\s+(.*?)(?=\n\d+\.|\n\*\*|$)/gs, 
+            '<div class="solution-step">$1. $2</div>');
+        
+        // Обработка примечаний
+        content = content.replace(/-\s+(.*?)(?=\n-|\n\*\*|$)/gs, 
+            '<div class="note-item">$1</div>');
+        
+        // Обработка ссылок на источники
+        content = content.replace(/\[([^\]]+)\]\(([^)]+)\)/g, 
+            '<a href="$2" target="_blank" class="source-link">$1</a>');
+        
+        return content;
+    }
     
     // Добавление ссылок на источники
     function addSourceLinks() {
@@ -852,6 +948,9 @@
                 if (type === 'log' || type === 'processing_log') {
                     addLog(content, 'info');
                 } 
+                else if (type === 'status') {
+                    addStatusMessage(content);
+                }
                 else if (type === 'response_start') {
                     // Начало ответа - создаем индикатор набора
                     createBotThinkingMessage();
@@ -981,11 +1080,93 @@
         });
     }
     
+    // Повтор последнего ответа
+    function repeatLastResponse() {
+        if (isProcessing) return;
+        
+        if (lastUserMessage) {
+            // Добавляем сообщение пользователя
+            addUserMessage(lastUserMessage);
+            
+            // Обновляем статус
+            isProcessing = true;
+            statusText.textContent = 'Обработка запроса...';
+            statusDot.style.background = 'var(--warning)';
+            statusIndicator.classList.add('warning');
+            statusIndicator.classList.remove('success');
+            
+            // Очищаем предыдущие данные
+            currentSources = [];
+            processingLog = [];
+            responseBuffer = '';
+            currentBotMessage = null;
+            
+            // Подключаемся к потоку данных
+            connectStream();
+            
+            // Отправляем запрос на сервер
+            fetch('/repeat', {
+                method: 'POST'
+            })
+            .then(res => res.json())
+            .then(data => {
+                if (data.status === 'repeating') {
+                    addLog("🔄 Повторяю последний ответ...", 'info');
+                }
+            })
+            .catch(err => {
+                addLog(`❌ Ошибка повторения: ${err.message}`, 'error');
+                isProcessing = false;
+                statusText.textContent = 'Ошибка соединения';
+                statusDot.style.background = 'var(--danger)';
+                statusIndicator.classList.add('danger');
+                statusIndicator.classList.remove('warning');
+                
+                setTimeout(() => {
+                    statusText.textContent = 'Подключено';
+                    statusDot.style.background = 'var(--success)';
+                    statusIndicator.classList.add('success');
+                    statusIndicator.classList.remove('danger');
+                }, 2000);
+            });
+        }
+    }
+    
+    // Начать новый диалог
+    function startNewChat() {
+        if (isProcessing) return;
+        
+        fetch('/new_session', {
+            method: 'POST'
+        })
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'new_session') {
+                // Очищаем чат
+                chatContainer.innerHTML = '';
+                const welcomeClone = welcomeState.cloneNode(true);
+                chatContainer.appendChild(welcomeClone);
+                
+                // Сбрасываем состояние
+                currentSources = [];
+                lastUserMessage = '';
+                currentBotMessage = null;
+                
+                addLog("🆕 Начат новый диалог", 'info');
+            }
+        })
+        .catch(err => {
+            addLog(`❌ Ошибка создания нового диалога: ${err.message}`, 'error');
+        });
+    }
+    
     // Обработчики событий
     sendBtn.addEventListener('click', sendMessage);
     userInput.addEventListener('keypress', (e) => {
         if (e.key === 'Enter') sendMessage();
     });
+    repeatBtn.addEventListener('click', repeatLastResponse);
+    newChatBtn.addEventListener('click', startNewChat);
     
     // Закрытие соединений при уходе со страницы
     window.addEventListener('beforeunload', () => {