Update templates/index.html

templates/index.html

@@ -525,7 +525,27 @@
         .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% {
                 transform: scale(0);
@@ -799,25 +819,43 @@
                 `;
                 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>');
-                // Обработка ссылок на источники
-                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>');
+    
+    // Обработка ссылок на источники в тексте [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);
             }
+        });
+        ref.title = "Нажмите для просмотра источника";
+    });
+}
             // Добавление ссылок на источники
             function addSourceLinks() {
                 if (!currentBotMessage || currentSources.length === 0) return;
@@ -849,30 +887,31 @@
             }
             // Показ деталей источника
             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>
-                    </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>
+    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>
+    `;
+
                 document.body.appendChild(modal);
                 // Обработчики событий
                 modal.querySelector('.source-close').addEventListener('click', () => modal.remove());