Update templates/index.html

templates/index.html

@@ -20,18 +20,21 @@
             --danger: #e74c3c;
             --transition: all 0.3s ease;
         }
+
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
             font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
         }
+
         body {
             background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);
             color: var(--dark);
             min-height: 100vh;
             padding: 20px;
         }
+
         .app-container {
             max-width: 1200px;
             margin: 0 auto;
@@ -39,6 +42,7 @@
             grid-template-columns: 1fr 300px;
             gap: 20px;
         }
+
         .card {
             background: rgba(255, 255, 255, 0.92);
             border-radius: 16px;
@@ -48,9 +52,11 @@
             overflow: hidden;
             transition: var(--transition);
         }
+
         .card:hover {
             box-shadow: 0 12px 40px rgba(31, 38, 135, 0.15);
         }
+
         .card-header {
             background: white;
             border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -60,9 +66,11 @@
             align-items: center;
             gap: 12px;
         }
+
         .card-body {
             padding: 0;
         }
+
         .chat-container {
             height: calc(100vh - 200px);
             display: flex;
@@ -70,6 +78,7 @@
             padding: 20px;
             overflow-y: auto;
         }
+
         .message {
             max-width: 80%;
             padding: 16px 20px;
@@ -81,28 +90,33 @@
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
             will-change: transform, opacity;
         }
+
         @keyframes fadeIn {
             from {
                 opacity: 0;
                 transform: translateY(10px);
             }
+
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
+
         .user-message {
             background: var(--primary);
             color: white;
             align-self: flex-end;
             border-bottom-right-radius: 4px;
         }
+
         .bot-message {
             background: white;
             border: 1px solid var(--gray);
             align-self: flex-start;
             border-bottom-left-radius: 4px;
         }
+
         .message-header {
             font-size: 12px;
             opacity: 0.8;
@@ -111,16 +125,19 @@
             align-items: center;
             gap: 6px;
         }
+
         .input-area {
             padding: 20px;
             border-top: 1px solid rgba(0, 0, 0, 0.05);
             background: white;
             transition: var(--transition);
         }
+
         .input-group {
             display: flex;
             gap: 10px;
         }
+
         #user-input {
             flex: 1;
             border: 1px solid var(--gray);
@@ -130,11 +147,13 @@
             transition: var(--transition);
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
         }
+
         #user-input:focus {
             border-color: var(--primary-light);
             box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
             outline: none;
         }
+
         #send-btn {
             background: var(--primary);
             color: white;
@@ -148,24 +167,29 @@
             justify-content: center;
             box-shadow: 0 4px 6px rgba(67, 97, 238, 0.2);
         }
+
         #send-btn:hover {
             background: var(--secondary);
             transform: translateY(-1px);
         }
+
         #send-btn:active {
             transform: translateY(1px);
         }
+
         .typing-indicator {
             display: flex;
             gap: 6px;
             padding: 20px;
             align-items: center;
         }
+
         .typing-text {
             margin-left: 10px;
             font-style: italic;
             color: #6c757d;
         }
+
         .typing-dot {
             width: 10px;
             height: 10px;
@@ -173,22 +197,28 @@
             border-radius: 50%;
             animation: bounce 1.4s infinite ease-in-out both;
         }
+
         .typing-dot:nth-child(1) {
             animation-delay: -0.32s;
         }
+
         .typing-dot:nth-child(2) {
             animation-delay: -0.16s;
         }
+
         @keyframes bounce {
+
             0%,
             80%,
             100% {
                 transform: scale(0);
             }
+
             40% {
                 transform: scale(1);
             }
         }
+
         .log-entry {
             padding: 14px 20px;
             border-bottom: 1px solid rgba(0, 0, 0, 0.03);
@@ -196,41 +226,51 @@
             line-height: 1.5;
             animation: fadeIn 0.3s ease;
         }
+
         .log-entry:last-child {
             border-bottom: none;
         }
+
         .log-timestamp {
             font-size: 11px;
             opacity: 0.6;
             margin-right: 8px;
         }
+
         .log-info {
             color: var(--primary);
         }
+
         .log-success {
             color: var(--success);
         }
+
         .log-warning {
             color: var(--warning);
         }
+
         .log-error {
             color: var(--danger);
         }
+
         .problem-text {
             font-weight: 600;
             color: var(--primary);
             margin-bottom: 8px;
         }
+
         .solution-text {
             font-weight: 600;
             color: var(--secondary);
             margin-bottom: 8px;
         }
+
         .solution-step {
             padding-left: 20px;
             position: relative;
             margin-bottom: 6px;
         }
+
         .solution-step:before {
             content: "•";
             position: absolute;
@@ -238,6 +278,7 @@
             color: var(--primary);
             font-weight: bold;
         }
+
         .sources-badge {
             display: inline-flex;
             align-items: center;
@@ -251,9 +292,11 @@
             cursor: pointer;
             transition: var(--transition);
         }
+
         .sources-badge:hover {
             background: rgba(67, 97, 238, 0.15);
         }
+
         .status-indicator {
             display: inline-flex;
             align-items: center;
@@ -264,19 +307,23 @@
             background: rgba(46, 204, 113, 0.1);
             color: var(--success);
         }
+
         .status-indicator.offline {
             background: rgba(231, 76, 60, 0.1);
             color: var(--danger);
         }
+
         .status-dot {
             width: 8px;
             height: 8px;
             border-radius: 50%;
             background: var(--success);
         }
+
         .status-indicator.offline .status-dot {
             background: var(--danger);
         }
+
         .logo {
             display: flex;
             align-items: center;
@@ -285,6 +332,7 @@
             font-size: 20px;
             color: var(--dark);
         }
+
         .logo-icon {
             width: 36px;
             height: 36px;
@@ -295,19 +343,23 @@
             justify-content: center;
             color: white;
         }
+
         .source-item {
             padding: 12px 16px;
             border-bottom: 1px solid rgba(0, 0, 0, 0.05);
             transition: var(--transition);
         }
+
         .source-item:hover {
             background: rgba(67, 97, 238, 0.03);
         }
+
         .source-title {
             font-weight: 500;
             margin-bottom: 4px;
             display: block;
         }
+
         .source-url {
             font-size: 13px;
             color: #6c757d;
@@ -316,6 +368,7 @@
             overflow: hidden;
             text-overflow: ellipsis;
         }
+
         .empty-state {
             display: flex;
             flex-direction: column;
@@ -325,16 +378,19 @@
             padding: 40px 20px;
             color: #6c757d;
         }
+
         .empty-state i {
             font-size: 48px;
             margin-bottom: 20px;
             color: #dee2e6;
         }
+
         .empty-state h4 {
             font-weight: 500;
             margin-bottom: 10px;
             color: #495057;
         }
+
         .example-badge {
             display: inline-block;
             background: white;
@@ -345,21 +401,25 @@
             font-size: 14px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
         }
+
         .log-container {
             height: calc(100vh - 200px);
             overflow-y: auto;
         }
+
         .highlight {
             background-color: #fff9c4;
             padding: 2px 4px;
             border-radius: 4px;
             font-weight: 600;
         }
+
         .message-content {
             white-space: pre-wrap;
             word-wrap: break-word;
             line-height: 1.6;
         }
+
         .source-link {
             color: #4361ee;
             text-decoration: underline;
@@ -367,6 +427,7 @@
             margin-left: 5px;
             font-size: 0.9em;
         }
+
         .source-modal {
             position: fixed;
             top: 0;
@@ -379,6 +440,7 @@
             justify-content: center;
             z-index: 1000;
         }
+
         .source-modal-content {
             background: white;
             border-radius: 16px;
@@ -389,6 +451,7 @@
             display: flex;
             flex-direction: column;
         }
+
         .source-modal-header {
             padding: 20px;
             background: var(--primary);
@@ -397,11 +460,13 @@
             justify-content: space-between;
             align-items: center;
         }
+
         .source-modal-body {
             padding: 20px;
             overflow-y: auto;
             flex-grow: 1;
         }
+
         .source-modal-footer {
             padding: 15px 20px;
             background: var(--gray);
@@ -409,6 +474,7 @@
             justify-content: flex-end;
             gap: 10px;
         }
+
         .source-close {
             background: none;
             border: none;
@@ -416,6 +482,7 @@
             font-size: 24px;
             cursor: pointer;
         }
+
         .source-content {
             line-height: 1.6;
             max-height: 50vh;
@@ -425,11 +492,13 @@
             border-radius: 8px;
             background: #fafafa;
         }
+
         .source-original-link {
             display: inline-block;
             margin-top: 15px;
             color: var(--primary);
         }
+
         .notes-text {
             font-weight: 600;
             color: #f39c12;
@@ -438,24 +507,28 @@
             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);
@@ -465,51 +538,52 @@
             font-size: 0.9em;
             margin-right: 5px;
         }
+
         /* Новые стили */
         .d-none {
             display: none !important;
         }
-        
+
         .log-text {
             line-height: 1.6;
             padding: 10px 0;
             white-space: pre-wrap;
         }
-        
+
         .processing-steps {
             padding: 10px 0;
             font-size: 0.95em;
         }
-        
+
         .step-item {
             margin-bottom: 8px;
             display: flex;
             align-items: flex-start;
         }
-        
+
         .step-icon {
             margin-right: 10px;
             color: var(--primary);
             min-width: 20px;
         }
-        
+
         .step-text {
             flex: 1;
         }
-        
+
         .step-active {
             font-weight: 600;
             color: var(--secondary);
         }
 
-      /* Новые стили для анимированного лоадера */
+        /* Новые стили для анимированного лоадера */
         .step-loader {
             display: flex;
             gap: 4px;
             height: 20px;
             align-items: center;
         }
-        
+
         .step-loader .dot {
             width: 8px;
             height: 8px;
@@ -517,51 +591,37 @@
             background-color: var(--primary);
             animation: loader-bounce 1.4s infinite ease-in-out both;
         }
-        
+
         .step-loader .dot:nth-child(1) {
             animation-delay: -0.32s;
         }
-        
+
         .step-loader .dot:nth-child(2) {
             animation-delay: -0.16s;
         }
 
-      .source-ref {
-    display: inline-block;
-    background: rgba(67, 97, 238, 0.15);
-    color: var(--primary);
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    text-align: center;
-    line-height: 24px;
-    font-size: 12px;
-    cursor: pointer;
-    margin: 0 2px;
-    vertical-align: super;
-    transition: var(--transition);
-}
-.source-ref:hover {
-    background: rgba(67, 97, 238, 0.25);
-    transform: scale(1.1);
-}
-      
         @keyframes loader-bounce {
-            0%, 80%, 100% {
+
+            0%,
+            80%,
+            100% {
                 transform: scale(0);
             }
+
             40% {
                 transform: scale(1);
             }
         }
-      
+
         @media (max-width: 768px) {
             .app-container {
                 grid-template-columns: 1fr;
             }
+
             .chat-container {
                 height: 60vh;
             }
+
             .log-container {
                 height: 30vh;
             }
@@ -640,7 +700,7 @@
             let currentBotMessage = null;
             let processingLog = [];
             let responseBuffer = '';
-            
+
             // Новые переменные
             let currentLogMessage = null;
             let processingStep = 0;
@@ -723,45 +783,45 @@
                 chatContainer.scrollTop = chatContainer.scrollHeight;
                 return messageDiv;
             }
-          
+
             // Обновление шагов процесса
             function updateProcessingSteps(stepIndex) {
-    for (let i = 0; i < processingSteps.length; i++) {
-        const stepElement = document.getElementById(`step-${i}`);
-        if (!stepElement) continue;
-        
-        const loader = stepElement.querySelector('.step-loader');
-        const iconCircle = stepElement.querySelector('.fa-circle');
-        const iconCheck = stepElement.querySelector('.fa-check-circle');
-        const text = stepElement.querySelector('.step-text');
-        
-        // Если элементы не найдены, пропускаем шаг
-        if (!loader || !iconCircle || !text) continue;
-
-        if (i < stepIndex) {
-            // Завершенные шаги
-            loader.classList.add('d-none');
-            iconCircle.classList.add('d-none');
-            if (iconCheck) iconCheck.classList.remove('d-none');
-            text.classList.remove('step-active');
-            text.textContent = processingSteps[i];
-        } else if (i === stepIndex) {
-            // Текущий шаг
-            loader.classList.remove('d-none');
-            iconCircle.classList.add('d-none');
-            if (iconCheck) iconCheck.classList.add('d-none');
-            text.classList.add('step-active');
-            text.textContent = processingSteps[i] + '...';
-        } else {
-            // Будущие шаги
-            loader.classList.add('d-none');
-            iconCircle.classList.remove('d-none');
-            if (iconCheck) iconCheck.classList.add('d-none');
-            text.classList.remove('step-active');
-            text.textContent = processingSteps[i];
-        }
-    }
-}
+                for (let i = 0; i < processingSteps.length; i++) {
+                    const stepElement = document.getElementById(`step-${i}`);
+                    if (!stepElement) continue;
+
+                    const loader = stepElement.querySelector('.step-loader');
+                    const iconCircle = stepElement.querySelector('.fa-circle');
+                    const iconCheck = stepElement.querySelector('.fa-check-circle');
+                    const text = stepElement.querySelector('.step-text');
+
+                    // Если элементы не найдены, пропускаем шаг
+                    if (!loader || !iconCircle || !text) continue;
+
+                    if (i < stepIndex) {
+                        // Завершенные шаги
+                        loader.classList.add('d-none');
+                        iconCircle.classList.add('d-none');
+                        if (iconCheck) iconCheck.classList.remove('d-none');
+                        text.classList.remove('step-active');
+                        text.textContent = processingSteps[i];
+                    } else if (i === stepIndex) {
+                        // Текущий шаг
+                        loader.classList.remove('d-none');
+                        iconCircle.classList.add('d-none');
+                        if (iconCheck) iconCheck.classList.add('d-none');
+                        text.classList.add('step-active');
+                        text.textContent = processingSteps[i] + '...';
+                    } else {
+                        // Будущие шаги
+                        loader.classList.add('d-none');
+                        iconCircle.classList.remove('d-none');
+                        if (iconCheck) iconCheck.classList.add('d-none');
+                        text.classList.remove('step-active');
+                        text.textContent = processingSteps[i];
+                    }
+                }
+            }
             // Показ следующего шага обработки
             function showNextProcessingStep() {
                 processingStep++;
@@ -819,43 +879,25 @@
                 `;
                 chatContainer.appendChild(messageDiv);
                 chatContainer.scrollTop = chatContainer.scrollHeight;
-                setupSourceReferences(); // Добавьте эту строку
-    
                 return messageDiv;
             }
             // Форматирование контента
             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>');
-    
-    // Обработка ссылок на источники в тексте [1]
-    content = content.replace(/\[(\d+)\]/g, 
-        '<sup class="source-ref" data-source="$1">[$1]</sup>');
-    
-    return content;
-}
-
-// Добавьте этот код после функции formatContent
-function setupSourceReferences() {
-    document.querySelectorAll('.source-ref').forEach(ref => {
-        ref.addEventListener('click', function(e) {
-            e.preventDefault();
-            const sourceIndex = parseInt(this.dataset.source) - 1;
-            if (currentSources[sourceIndex]) {
-                showSourceDetails(sourceIndex);
+                // Заменяем разделы на стилизованные блоки
+                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;
             }
-        });
-        ref.title = "Нажмите для просмотра источника";
-    });
-}
             // Добавление ссылок на источники
             function addSourceLinks() {
                 if (!currentBotMessage || currentSources.length === 0) return;
@@ -887,31 +929,30 @@ function setupSourceReferences() {
             }
             // Показ деталей источника
             function showSourceDetails(sourceIndex) {
-    const source = currentSources[sourceIndex];
-    if (!source) return;
-    
-    const modal = document.createElement('div');
-    modal.className = 'source-modal';
-    modal.innerHTML = `
-        <div class="source-modal-content">
-            <div class="source-modal-header">
-                <h3>${source.title || 'Источник информации'}</h3>
-                <button class="source-close">&times;</button>
-            </div>
-            <div class="source-modal-body">
-                <p><strong>URL:</strong> <a href="${source.url}" target="_blank">${source.url}</a></p>
-                <div class="mt-3">
-                    <h4>Содержимое:</h4>
-                    <div class="source-content">${source.content ? escapeHtml(source.content) : 'Содержимое недоступно'}</div>
+                const source = currentSources[sourceIndex];
+                if (!source) return;
+                // Создаем модальное окно
+                const modal = document.createElement('div');
+                modal.className = 'source-modal';
+                modal.innerHTML = `
+            <div class="source-modal-content">
+                <div class="source-modal-header">
+                    <h3>${source.title || 'Источник информации'}</h3>
+                    <button class="source-close">&times;</button>
+                </div>
+                <div class="source-modal-body">
+                    <p><strong>URL:</strong> <a href="${source.url}" target="_blank">${source.url}</a></p>
+                    <div class="mt-3">
+                        <h4>Содержимое:</h4>
+                        <div class="source-content">${source.content ? escapeHtml(source.content) : 'Содержимое недоступно'}</div>
+                    </div>
+                </div>
+                <div class="source-modal-footer">
+                    <button id="open-source" class="btn btn-primary">Открыть источник</button>
+                    <button id="close-modal" class="btn btn-secondary">Закрыть</button>
                 </div>
             </div>
-            <div class="source-modal-footer">
-                <button id="open-source" class="btn btn-primary">Открыть источник</button>
-                <button id="close-modal" class="btn btn-secondary">Закрыть</button>
-            </div>
-        </div>
-    `;
-
+        `;
                 document.body.appendChild(modal);
                 // Обработчики событий
                 modal.querySelector('.source-close').addEventListener('click', () => modal.remove());
@@ -944,44 +985,44 @@ function setupSourceReferences() {
                 statusIndicator.classList.add('warning');
                 statusIndicator.classList.remove('success');
                 eventSource = new EventSource('/stream');
-                eventSource.onmessage = function(event) {
-    try {
-        const data = JSON.parse(event.data);
-        const { type, content } = data;
-        if (type === 'log' || type === 'processing_log') {
-            addLog(content, 'info');
-        }
-        else if (type === 'response_end') {
-            // ТОЛЬКО ЗДЕСЬ ОБРАБАТЫВАЕМ ОТВЕТ
-            responseBuffer = content; // Перезаписываем буфер
-            currentBotMessage = convertToMessage(responseBuffer);
-            addSourceLinks();
-            toggleInputArea(true);
-        }
-        else if (type === 'sources') {
-            try {
-                currentSources = JSON.parse(content);
-            } catch (e) {
-                console.error('Error parsing sources:', e);
-                addLog('Ошибка обработки источников', 'error');
-            }
-        }
-        else if (type === 'done') {
-            isProcessing = false;
-            statusText.textContent = 'Подключено';
-            statusDot.style.background = 'var(--success)';
-            statusIndicator.classList.add('success');
-            statusIndicator.classList.remove('warning');
-            if (eventSource) {
-                eventSource.close();
-                eventSource = null;
-            }
-        }
-    } catch (e) {
-        console.error('Error processing event:', e);
-        addLog(`Ошибка обработки данных: ${e.message}`, 'error');
-    }
-};
+                eventSource.onmessage = function (event) {
+                    try {
+                        const data = JSON.parse(event.data);
+                        const { type, content } = data;
+                        if (type === 'log' || type === 'processing_log') {
+                            addLog(content, 'info');
+                        }
+                        else if (type === 'response_end') {
+                            // ТОЛЬКО ЗДЕСЬ ОБРАБАТЫВАЕМ ОТВЕТ
+                            responseBuffer = content; // Перезаписываем буфер
+                            currentBotMessage = convertToMessage(responseBuffer);
+                            addSourceLinks();
+                            toggleInputArea(true);
+                        }
+                        else if (type === 'sources') {
+                            try {
+                                currentSources = JSON.parse(content);
+                            } catch (e) {
+                                console.error('Error parsing sources:', e);
+                                addLog('Ошибка обработки источников', 'error');
+                            }
+                        }
+                        else if (type === 'done') {
+                            isProcessing = false;
+                            statusText.textContent = 'Подключено';
+                            statusDot.style.background = 'var(--success)';
+                            statusIndicator.classList.add('success');
+                            statusIndicator.classList.remove('warning');
+                            if (eventSource) {
+                                eventSource.close();
+                                eventSource = null;
+                            }
+                        }
+                    } catch (e) {
+                        console.error('Error processing event:', e);
+                        addLog(`Ошибка обработки данных: ${e.message}`, 'error');
+                    }
+                };
                 eventSource.onerror = function () {
                     addLog("⚠️ Поток данных прерван", 'error');
                     statusText.textContent = 'Ошибка соединения';
@@ -1062,7 +1103,7 @@ function setupSourceReferences() {
                                 <div class="message-content text-danger">${errorMessage}</div>
                             `;
                         }
-                        
+
                         // Восстанавливаем статус
                         setTimeout(() => {
                             statusText.textContent = 'Подключено';