1672 lines
53 KiB
JavaScript
1672 lines
53 KiB
JavaScript
/**
|
||
* Brief Bench - Main Application Logic (SBS Multi-Environment Version)
|
||
* Single-page RAG testing interface with support for IFT, PSI, and PROD environments
|
||
*/
|
||
|
||
// ============================================
|
||
// Application State
|
||
// ============================================
|
||
|
||
const AppState = {
|
||
settings: null,
|
||
currentEnvironment: 'ift', // Current active environment: 'ift', 'psi', or 'prod'
|
||
|
||
// Environment-specific data
|
||
environments: {
|
||
ift: {
|
||
currentRequest: null,
|
||
currentResponse: null,
|
||
currentAnswerIndex: 0,
|
||
annotations: {},
|
||
requestTimestamp: null,
|
||
requestId: null,
|
||
},
|
||
psi: {
|
||
currentRequest: null,
|
||
currentResponse: null,
|
||
currentAnswerIndex: 0,
|
||
annotations: {},
|
||
requestTimestamp: null,
|
||
requestId: null,
|
||
},
|
||
prod: {
|
||
currentRequest: null,
|
||
currentResponse: null,
|
||
currentAnswerIndex: 0,
|
||
annotations: {},
|
||
requestTimestamp: null,
|
||
requestId: null,
|
||
}
|
||
}
|
||
};
|
||
|
||
// Helper function to get current environment state
|
||
function getCurrentEnv() {
|
||
return AppState.environments[AppState.currentEnvironment];
|
||
}
|
||
|
||
// Helper function to get current environment settings
|
||
function getCurrentEnvSettings() {
|
||
return AppState.settings.environments[AppState.currentEnvironment];
|
||
}
|
||
|
||
// ============================================
|
||
// Authentication
|
||
// ============================================
|
||
|
||
/**
|
||
* Проверить авторизацию при загрузке страницы
|
||
*/
|
||
async function checkAuth() {
|
||
if (!api.isAuthenticated()) {
|
||
showLoginScreen()
|
||
return false
|
||
}
|
||
|
||
// Попробовать загрузить настройки (валидация токена)
|
||
try {
|
||
await loadSettingsFromServer()
|
||
return true
|
||
} catch (error) {
|
||
console.error('Token validation failed:', error)
|
||
showLoginScreen()
|
||
return false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Показать экран авторизации
|
||
*/
|
||
function showLoginScreen() {
|
||
document.getElementById('login-screen').style.display = 'flex'
|
||
document.getElementById('app').style.display = 'none'
|
||
}
|
||
|
||
/**
|
||
* Скрыть экран авторизации и показать приложение
|
||
*/
|
||
function hideLoginScreen() {
|
||
document.getElementById('login-screen').style.display = 'none'
|
||
document.getElementById('app').style.display = 'block'
|
||
}
|
||
|
||
/**
|
||
* Обработка авторизации
|
||
*/
|
||
async function handleLogin() {
|
||
const loginInput = document.getElementById('login-input')
|
||
const loginError = document.getElementById('login-error')
|
||
const loginBtn = document.getElementById('login-submit-btn')
|
||
|
||
const login = loginInput.value.trim()
|
||
|
||
// Валидация
|
||
if (!/^[0-9]{8}$/.test(login)) {
|
||
loginError.textContent = 'Логин должен состоять из 8 цифр'
|
||
loginError.style.display = 'block'
|
||
return
|
||
}
|
||
|
||
loginError.style.display = 'none'
|
||
loginBtn.disabled = true
|
||
loginBtn.textContent = 'Вход...'
|
||
|
||
try {
|
||
const response = await api.login(login)
|
||
console.log('Login successful:', response.user)
|
||
|
||
// Загрузить настройки с сервера
|
||
await loadSettingsFromServer()
|
||
|
||
// Скрыть login screen, показать приложение
|
||
hideLoginScreen()
|
||
loginInput.value = ''
|
||
} catch (error) {
|
||
console.error('Login failed:', error)
|
||
loginError.textContent = error.message || 'Ошибка авторизации'
|
||
loginError.style.display = 'block'
|
||
} finally {
|
||
loginBtn.disabled = false
|
||
loginBtn.textContent = 'Войти'
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Выход из системы
|
||
*/
|
||
function handleLogout() {
|
||
if (confirm('Вы уверены, что хотите выйти?')) {
|
||
api.logout()
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// Utility Functions
|
||
// ============================================
|
||
|
||
/**
|
||
* Generate UUID v4
|
||
*/
|
||
function generateUUID() {
|
||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||
const r = Math.random() * 16 | 0;
|
||
const v = c === 'x' ? r : (r & 0x3 | 0x8);
|
||
return v.toString(16);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Format time in seconds to human-readable format
|
||
*/
|
||
function formatTime(seconds) {
|
||
if (seconds < 1) {
|
||
return `${(seconds * 1000).toFixed(0)} мс`;
|
||
} else if (seconds < 60) {
|
||
return `${seconds.toFixed(2)} сек`;
|
||
} else {
|
||
const mins = Math.floor(seconds / 60);
|
||
const secs = (seconds % 60).toFixed(0);
|
||
return `${mins} мин ${secs} сек`;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Format ISO timestamp to readable format
|
||
*/
|
||
function formatTimestamp(isoString) {
|
||
const date = new Date(isoString);
|
||
return date.toLocaleString('ru-RU', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit'
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Detect if text contains a table structure
|
||
*/
|
||
function isTableText(text) {
|
||
if (!text) return false;
|
||
const lines = text.split('\n');
|
||
let pipeCount = 0;
|
||
for (const line of lines) {
|
||
if (line.includes('|')) pipeCount++;
|
||
}
|
||
return pipeCount >= 2; // At least 2 lines with pipes
|
||
}
|
||
|
||
/**
|
||
* Parse text table into HTML table
|
||
*/
|
||
function parseTextTable(text) {
|
||
const lines = text.split('\n').filter(line => line.trim());
|
||
if (lines.length < 2) return null;
|
||
|
||
const rows = lines.map(line =>
|
||
line.split('|')
|
||
.map(cell => cell.trim())
|
||
.filter(cell => cell.length > 0)
|
||
);
|
||
|
||
if (rows.length === 0) return null;
|
||
|
||
// Find separator line (if exists) - typically second line with dashes
|
||
let separatorIndex = -1;
|
||
for (let i = 0; i < rows.length; i++) {
|
||
if (rows[i].every(cell => /^-+$/.test(cell.trim()))) {
|
||
separatorIndex = i;
|
||
break;
|
||
}
|
||
}
|
||
|
||
let thead = '';
|
||
let tbody = '';
|
||
|
||
if (separatorIndex === 1) {
|
||
// Header row exists
|
||
const headerCells = rows[0].map(cell => `<th>${escapeHtml(cell)}</th>`).join('');
|
||
thead = `<thead><tr>${headerCells}</tr></thead>`;
|
||
|
||
const bodyRows = rows.slice(2).map(row => {
|
||
const cells = row.map(cell => `<td>${escapeHtml(cell)}</td>`).join('');
|
||
return `<tr>${cells}</tr>`;
|
||
}).join('');
|
||
tbody = `<tbody>${bodyRows}</tbody>`;
|
||
} else {
|
||
// No header, all rows are data
|
||
const bodyRows = rows.map(row => {
|
||
const cells = row.map(cell => `<td>${escapeHtml(cell)}</td>`).join('');
|
||
return `<tr>${cells}</tr>`;
|
||
}).join('');
|
||
tbody = `<tbody>${bodyRows}</tbody>`;
|
||
}
|
||
|
||
return `<table class="rendered-table">${thead}${tbody}</table>`;
|
||
}
|
||
|
||
/**
|
||
* Escape HTML special characters
|
||
*/
|
||
function escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
/**
|
||
* Download JSON file
|
||
*/
|
||
function downloadJSON(data, filename) {
|
||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = filename;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
|
||
/**
|
||
* Show toast notification (simple alert for now)
|
||
*/
|
||
function showToast(message, type = 'info') {
|
||
// TODO: Implement proper toast/snackbar component
|
||
console.log(`[${type.toUpperCase()}] ${message}`);
|
||
alert(message);
|
||
}
|
||
|
||
// ============================================
|
||
// Settings Management
|
||
// ============================================
|
||
|
||
/**
|
||
* Загрузить настройки с сервера (DB API)
|
||
*/
|
||
async function loadSettingsFromServer() {
|
||
try {
|
||
const response = await api.getSettings()
|
||
|
||
// Преобразовать в формат AppState.settings
|
||
AppState.settings = {
|
||
activeEnvironment: AppState.currentEnvironment,
|
||
environments: {
|
||
ift: {
|
||
name: 'ИФТ',
|
||
...response.settings.ift
|
||
},
|
||
psi: {
|
||
name: 'ПСИ',
|
||
...response.settings.psi
|
||
},
|
||
prod: {
|
||
name: 'ПРОМ',
|
||
...response.settings.prod
|
||
}
|
||
},
|
||
requestTimeout: 1800000, // 30 минут (фиксировано)
|
||
}
|
||
|
||
console.log('Settings loaded from server:', AppState.settings)
|
||
} catch (error) {
|
||
console.error('Failed to load settings from server:', error)
|
||
throw error
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Сохранить настройки на сервер (DB API)
|
||
*/
|
||
async function saveSettingsToServer(settings) {
|
||
try {
|
||
// Извлечь только поля, которые сервер ожидает
|
||
const settingsToSave = {
|
||
ift: extractEnvironmentSettings(settings.environments.ift),
|
||
psi: extractEnvironmentSettings(settings.environments.psi),
|
||
prod: extractEnvironmentSettings(settings.environments.prod)
|
||
}
|
||
|
||
await api.updateSettings(settingsToSave)
|
||
AppState.settings = settings
|
||
|
||
console.log('Settings saved to server')
|
||
} catch (error) {
|
||
console.error('Failed to save settings to server:', error)
|
||
throw error
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Извлечь только нужные поля для сервера
|
||
*/
|
||
function extractEnvironmentSettings(envSettings) {
|
||
return {
|
||
apiMode: envSettings.apiMode,
|
||
bearerToken: envSettings.bearerToken || null,
|
||
systemPlatform: envSettings.systemPlatform || null,
|
||
systemPlatformUser: envSettings.systemPlatformUser || null,
|
||
platformUserId: envSettings.platformUserId || null,
|
||
platformId: envSettings.platformId || null,
|
||
withClassify: envSettings.withClassify || false,
|
||
resetSessionMode: envSettings.resetSessionMode !== false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Populate settings dialog with current values
|
||
*/
|
||
function populateSettingsDialog() {
|
||
const env = AppState.currentEnvironment;
|
||
const envSettings = AppState.settings.environments[env];
|
||
|
||
// Set environment selector
|
||
document.getElementById('settings-env-selector').value = env;
|
||
|
||
// API Mode
|
||
const apiMode = envSettings.apiMode || 'bench';
|
||
document.getElementById('setting-api-mode').value = apiMode;
|
||
toggleBackendSettings(apiMode === 'backend');
|
||
|
||
// Populate environment-specific fields (только редактируемые пользователем)
|
||
document.getElementById('setting-bearer-token').value = envSettings.bearerToken || '';
|
||
document.getElementById('setting-system-platform').value = envSettings.systemPlatform || '';
|
||
document.getElementById('setting-system-platform-user').value = envSettings.systemPlatformUser || '';
|
||
|
||
// Backend mode fields
|
||
document.getElementById('setting-platform-user-id').value = envSettings.platformUserId || '';
|
||
document.getElementById('setting-platform-id').value = envSettings.platformId || '';
|
||
document.getElementById('setting-with-classify').checked = envSettings.withClassify || false;
|
||
document.getElementById('setting-reset-session-mode').checked = envSettings.resetSessionMode !== false;
|
||
}
|
||
|
||
/**
|
||
* Toggle visibility of backend settings
|
||
*/
|
||
function toggleBackendSettings(show) {
|
||
const backendSettings = document.getElementById('backend-settings');
|
||
const backendHeader = document.getElementById('backend-settings-header');
|
||
if (show) {
|
||
backendSettings.style.display = 'block';
|
||
backendHeader.style.display = 'block';
|
||
} else {
|
||
backendSettings.style.display = 'none';
|
||
backendHeader.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Read settings from dialog
|
||
*/
|
||
function readSettingsFromDialog() {
|
||
const env = document.getElementById('settings-env-selector').value;
|
||
|
||
// Update environment-specific settings
|
||
const updatedSettings = JSON.parse(JSON.stringify(AppState.settings)); // Deep copy
|
||
updatedSettings.environments[env] = {
|
||
name: updatedSettings.environments[env].name,
|
||
apiMode: document.getElementById('setting-api-mode').value,
|
||
bearerToken: document.getElementById('setting-bearer-token').value.trim(),
|
||
systemPlatform: document.getElementById('setting-system-platform').value.trim(),
|
||
systemPlatformUser: document.getElementById('setting-system-platform-user').value.trim(),
|
||
platformUserId: document.getElementById('setting-platform-user-id').value.trim(),
|
||
platformId: document.getElementById('setting-platform-id').value.trim(),
|
||
withClassify: document.getElementById('setting-with-classify').checked,
|
||
resetSessionMode: document.getElementById('setting-reset-session-mode').checked,
|
||
};
|
||
|
||
return updatedSettings;
|
||
}
|
||
|
||
// ============================================
|
||
// UI Initialization
|
||
// ============================================
|
||
|
||
/**
|
||
* Initialize application
|
||
*/
|
||
async function initApp() {
|
||
// Load settings from server
|
||
await loadSettingsFromServer();
|
||
AppState.currentEnvironment = AppState.settings.activeEnvironment || AppState.currentEnvironment || 'ift';
|
||
|
||
// Load saved data for each environment
|
||
['ift', 'psi', 'prod'].forEach(env => {
|
||
const savedData = localStorage.getItem(`briefBenchData_${env}`);
|
||
if (savedData) {
|
||
try {
|
||
const data = JSON.parse(savedData);
|
||
AppState.environments[env] = data;
|
||
} catch (e) {
|
||
console.error(`Failed to load data for ${env}:`, e);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Load saved annotations draft for current environment (legacy support)
|
||
const savedAnnotations = localStorage.getItem('briefBenchAnnotationsDraft');
|
||
if (savedAnnotations) {
|
||
try {
|
||
const annotations = JSON.parse(savedAnnotations);
|
||
// Migrate to new structure if needed
|
||
if (!AppState.environments.ift.annotations || Object.keys(AppState.environments.ift.annotations).length === 0) {
|
||
AppState.environments.ift.annotations = annotations;
|
||
}
|
||
} catch (e) {
|
||
console.error('Failed to load annotations draft:', e);
|
||
}
|
||
}
|
||
|
||
// Setup event listeners
|
||
setupEventListeners();
|
||
|
||
// Set active environment tab
|
||
updateEnvironmentTabs();
|
||
|
||
// Show query builder by default
|
||
showQueryBuilder();
|
||
|
||
console.log('Brief Bench SBS initialized - Environment:', AppState.currentEnvironment);
|
||
}
|
||
|
||
/**
|
||
* Setup all event listeners
|
||
*/
|
||
function setupEventListeners() {
|
||
// Prevent double-binding listeners
|
||
if (AppState._eventListenersSetup) {
|
||
return;
|
||
}
|
||
AppState._eventListenersSetup = true;
|
||
|
||
// Environment tabs
|
||
document.querySelectorAll('.env-tab').forEach(tab => {
|
||
tab.addEventListener('click', (e) => {
|
||
const env = e.target.dataset.env;
|
||
switchEnvironment(env);
|
||
});
|
||
});
|
||
|
||
// Settings environment selector
|
||
document.getElementById('settings-env-selector').addEventListener('change', (e) => {
|
||
// Save current environment settings first
|
||
const currentSettings = readSettingsFromDialog();
|
||
AppState.settings = currentSettings;
|
||
// Load new environment settings
|
||
populateSettingsDialog();
|
||
});
|
||
|
||
// API Mode selector
|
||
document.getElementById('setting-api-mode').addEventListener('change', (e) => {
|
||
toggleBackendSettings(e.target.value === 'backend');
|
||
});
|
||
|
||
// App bar buttons
|
||
document.getElementById('menu-btn').addEventListener('click', toggleDrawer);
|
||
document.getElementById('new-query-btn').addEventListener('click', showQueryBuilder);
|
||
document.getElementById('settings-btn').addEventListener('click', openSettingsDialog);
|
||
document.getElementById('export-btn').addEventListener('click', exportAnalysis);
|
||
document.getElementById('import-btn').addEventListener('click', importAnalysis);
|
||
|
||
// Drawer buttons
|
||
document.getElementById('clear-all-btn').addEventListener('click', clearAll);
|
||
|
||
// Settings dialog
|
||
document.getElementById('close-settings-btn').addEventListener('click', closeSettingsDialog);
|
||
document.getElementById('save-settings-btn').addEventListener('click', saveSettingsHandler);
|
||
// Login
|
||
document.getElementById('login-submit-btn').addEventListener('click', handleLogin);
|
||
document.getElementById('login-input').addEventListener('keypress', (e) => {
|
||
if (e.key === 'Enter') {
|
||
handleLogin();
|
||
}
|
||
});
|
||
|
||
// Logout
|
||
document.getElementById('logout-btn').addEventListener('click', handleLogout);
|
||
|
||
document.getElementById('reset-settings-btn').addEventListener('click', resetSettings);
|
||
document.getElementById('import-settings-btn').addEventListener('click', importSettings);
|
||
document.getElementById('export-settings-btn').addEventListener('click', exportSettings);
|
||
|
||
// Query builder
|
||
document.querySelectorAll('.toggle-option').forEach(btn => {
|
||
btn.addEventListener('click', (e) => {
|
||
const mode = e.target.dataset.mode;
|
||
switchQueryMode(mode);
|
||
});
|
||
});
|
||
|
||
document.getElementById('validate-json-btn').addEventListener('click', validateJSON);
|
||
document.getElementById('send-query-btn').addEventListener('click', handleSendQuery);
|
||
document.getElementById('load-response-btn').addEventListener('click', loadResponseFromFile);
|
||
document.getElementById('load-request-btn').addEventListener('click', loadRequestFromFile);
|
||
|
||
// Tab navigation
|
||
document.addEventListener('click', (e) => {
|
||
if (e.target.classList.contains('tab')) {
|
||
const tabId = e.target.dataset.tab;
|
||
if (tabId) {
|
||
switchTab(e.target, tabId);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Annotation changes
|
||
document.addEventListener('change', (e) => {
|
||
if (e.target.classList.contains('checkbox') ||
|
||
e.target.tagName === 'SELECT' ||
|
||
e.target.tagName === 'TEXTAREA') {
|
||
saveAnnotationsDraft();
|
||
}
|
||
});
|
||
|
||
// Close dialog on overlay click
|
||
document.getElementById('settings-dialog').addEventListener('click', (e) => {
|
||
if (e.target.id === 'settings-dialog') {
|
||
closeSettingsDialog();
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Switch to a different environment
|
||
*/
|
||
function switchEnvironment(env) {
|
||
// Save current environment data
|
||
saveEnvironmentData(AppState.currentEnvironment);
|
||
|
||
// Switch environment
|
||
AppState.currentEnvironment = env;
|
||
AppState.settings.activeEnvironment = env;
|
||
// activeEnvironment - это локальное состояние UI, не сохраняем на сервер
|
||
|
||
// Update UI
|
||
updateEnvironmentTabs();
|
||
|
||
// Reload content for new environment
|
||
const currentEnv = getCurrentEnv();
|
||
if (currentEnv.currentResponse) {
|
||
renderQuestionsList();
|
||
renderAnswer(currentEnv.currentAnswerIndex);
|
||
} else {
|
||
showQueryBuilder();
|
||
}
|
||
|
||
console.log('Switched to environment:', env);
|
||
}
|
||
|
||
/**
|
||
* Update environment tabs visual state
|
||
*/
|
||
function updateEnvironmentTabs() {
|
||
document.querySelectorAll('.env-tab').forEach(tab => {
|
||
if (tab.dataset.env === AppState.currentEnvironment) {
|
||
tab.classList.add('active');
|
||
} else {
|
||
tab.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Save environment data to localStorage
|
||
*/
|
||
function saveEnvironmentData(env) {
|
||
const data = AppState.environments[env];
|
||
localStorage.setItem(`briefBenchData_${env}`, JSON.stringify(data));
|
||
}
|
||
|
||
/**
|
||
* Toggle drawer visibility (mobile)
|
||
*/
|
||
function toggleDrawer() {
|
||
const drawer = document.getElementById('drawer');
|
||
drawer.classList.toggle('collapsed');
|
||
}
|
||
|
||
/**
|
||
* Clear all data and reload page
|
||
*/
|
||
function clearAll() {
|
||
if (confirm('Очистить все данные и обновить страницу? Несохраненные изменения будут потеряны.')) {
|
||
window.location.reload();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Switch query mode
|
||
*/
|
||
function switchQueryMode(mode) {
|
||
document.querySelectorAll('.toggle-option').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
if (btn.dataset.mode === mode) {
|
||
btn.classList.add('active');
|
||
}
|
||
});
|
||
|
||
document.getElementById('questions-mode').classList.toggle('hidden', mode !== 'questions');
|
||
document.getElementById('raw-json-mode').classList.toggle('hidden', mode !== 'raw-json');
|
||
}
|
||
|
||
/**
|
||
* Switch between tabs
|
||
*/
|
||
function switchTab(tabButton, tabId) {
|
||
// Get all tabs in the same group
|
||
const tabsContainer = tabButton.parentElement;
|
||
const tabs = tabsContainer.querySelectorAll('.tab');
|
||
|
||
// Deactivate all tabs
|
||
tabs.forEach(tab => tab.classList.remove('active'));
|
||
|
||
// Activate clicked tab
|
||
tabButton.classList.add('active');
|
||
|
||
// Find and show corresponding content
|
||
const contentContainer = tabsContainer.nextElementSibling;
|
||
if (contentContainer && contentContainer.classList.contains('tab-content')) {
|
||
// Handle nested tabs
|
||
let parent = tabsContainer.parentElement;
|
||
const allContents = parent.querySelectorAll('.tab-content');
|
||
allContents.forEach(content => {
|
||
if (content.id === tabId) {
|
||
content.classList.add('active');
|
||
} else if (!content.contains(tabsContainer)) {
|
||
content.classList.remove('active');
|
||
}
|
||
});
|
||
} else {
|
||
// Handle top-level tabs
|
||
const parent = tabsContainer.parentElement;
|
||
const allContents = parent.querySelectorAll(':scope > .tab-content');
|
||
allContents.forEach(content => {
|
||
content.classList.toggle('active', content.id === tabId);
|
||
});
|
||
|
||
// If activated content has nested tabs, ensure first nested tab-content is shown
|
||
const activatedContent = document.getElementById(tabId);
|
||
if (activatedContent) {
|
||
const nestedTabsContainer = activatedContent.querySelector('.tabs');
|
||
if (nestedTabsContainer) {
|
||
// Activate first nested tab button
|
||
const nestedTabs = nestedTabsContainer.querySelectorAll('.tab');
|
||
nestedTabs.forEach((tab, index) => {
|
||
if (index === 0) {
|
||
tab.classList.add('active');
|
||
} else {
|
||
tab.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// Find nested tab-content elements (immediate children only, after tabs container)
|
||
// Use children to get elements in correct DOM order
|
||
const children = Array.from(activatedContent.children);
|
||
const nestedContents = children.filter(el =>
|
||
el.classList.contains('tab-content') &&
|
||
el !== nestedTabsContainer
|
||
);
|
||
|
||
// Deactivate all first, then activate first one
|
||
nestedContents.forEach(content => content.classList.remove('active'));
|
||
if (nestedContents.length > 0) {
|
||
nestedContents[0].classList.add('active');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// Settings Dialog
|
||
// ============================================
|
||
|
||
function openSettingsDialog() {
|
||
populateSettingsDialog();
|
||
document.getElementById('settings-dialog').classList.add('open');
|
||
}
|
||
|
||
function closeSettingsDialog() {
|
||
document.getElementById('settings-dialog').classList.remove('open');
|
||
}
|
||
|
||
async function saveSettingsHandler() {
|
||
const saveBtn = document.getElementById('save-settings-btn');
|
||
saveBtn.disabled = true;
|
||
saveBtn.textContent = 'Сохранение...';
|
||
|
||
try {
|
||
const updatedSettings = readSettingsFromDialog();
|
||
await saveSettingsToServer(updatedSettings);
|
||
showToast('Настройки сохранены на сервере', 'success');
|
||
closeSettingsDialog();
|
||
} catch (error) {
|
||
console.error('Failed to save settings:', error);
|
||
showToast(`Ошибка сохранения: ${error.message}`, 'error');
|
||
} finally {
|
||
saveBtn.disabled = false;
|
||
saveBtn.textContent = 'Сохранить';
|
||
}
|
||
}
|
||
|
||
async function resetSettings() {
|
||
if (confirm('Сбросить все настройки к значениям по умолчанию?')) {
|
||
try {
|
||
AppState.settings = { ...defaultSettings };
|
||
await saveSettingsToServer(AppState.settings);
|
||
populateSettingsDialog();
|
||
showToast('Настройки сброшены и сохранены на сервере', 'success');
|
||
} catch (error) {
|
||
console.error('Failed to reset settings:', error);
|
||
showToast(`Ошибка сброса: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
}
|
||
|
||
function exportSettings() {
|
||
const filename = 'brief-bench-settings.json';
|
||
downloadJSON(AppState.settings, filename);
|
||
showToast('Настройки экспортированы в ' + filename, 'success');
|
||
}
|
||
|
||
function importSettings() {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = 'application/json';
|
||
|
||
input.onchange = async (e) => {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
|
||
try {
|
||
const text = await file.text();
|
||
const settings = JSON.parse(text);
|
||
|
||
// Validate basic structure
|
||
if (typeof settings !== 'object' || settings === null) {
|
||
throw new Error('Файл настроек должен содержать JSON объект');
|
||
}
|
||
|
||
// Merge with defaults to ensure all required fields exist
|
||
AppState.settings = {
|
||
...defaultSettings,
|
||
...settings
|
||
};
|
||
|
||
// Save to server
|
||
await saveSettingsToServer(AppState.settings);
|
||
|
||
// Update dialog
|
||
populateSettingsDialog();
|
||
|
||
showToast('Настройки успешно импортированы и сохранены на сервере', 'success');
|
||
} catch (error) {
|
||
showToast(`Ошибка импорта настроек: ${error.message}`, 'error');
|
||
}
|
||
};
|
||
|
||
input.click();
|
||
}
|
||
|
||
// ============================================
|
||
// Query Builder
|
||
// ============================================
|
||
|
||
function showQueryBuilder() {
|
||
document.getElementById('query-builder').classList.remove('hidden');
|
||
document.getElementById('answer-viewer').classList.add('hidden');
|
||
}
|
||
|
||
function validateJSON() {
|
||
const textarea = document.getElementById('json-textarea');
|
||
const message = document.getElementById('json-validation-message');
|
||
|
||
try {
|
||
const json = JSON.parse(textarea.value);
|
||
|
||
// Validate schema
|
||
if (!Array.isArray(json)) {
|
||
throw new Error('JSON должен быть массивом');
|
||
}
|
||
|
||
for (let i = 0; i < json.length; i++) {
|
||
const item = json[i];
|
||
if (typeof item.body !== 'string') {
|
||
throw new Error(`Элемент ${i}: поле "body" должно быть строкой`);
|
||
}
|
||
if (typeof item.with_docs !== 'boolean') {
|
||
throw new Error(`Элемент ${i}: поле "with_docs" должно быть boolean`);
|
||
}
|
||
}
|
||
|
||
textarea.classList.remove('error');
|
||
message.textContent = `✓ JSON валиден (${json.length} вопросов)`;
|
||
message.classList.remove('error');
|
||
message.classList.add('color-success');
|
||
|
||
return true;
|
||
} catch (error) {
|
||
textarea.classList.add('error');
|
||
message.textContent = `✗ Ошибка: ${error.message}`;
|
||
message.classList.add('error');
|
||
message.classList.remove('color-success');
|
||
|
||
return false;
|
||
}
|
||
}
|
||
|
||
function buildRequestBody() {
|
||
const mode = document.querySelector('.toggle-option.active').dataset.mode;
|
||
|
||
if (mode === 'questions') {
|
||
const text = document.getElementById('questions-textarea').value;
|
||
const questions = text.split('\n')
|
||
.map(line => line.trim())
|
||
.filter(line => line.length > 0);
|
||
|
||
if (questions.length === 0) {
|
||
throw new Error('Введите хотя бы один вопрос');
|
||
}
|
||
|
||
return questions.map(q => ({
|
||
body: q,
|
||
with_docs: AppState.settings.defaultWithDocs
|
||
}));
|
||
} else {
|
||
const json = document.getElementById('json-textarea').value;
|
||
return JSON.parse(json);
|
||
}
|
||
}
|
||
|
||
async function handleSendQuery() {
|
||
try {
|
||
const envSettings = getCurrentEnvSettings();
|
||
const env = getCurrentEnv();
|
||
const apiMode = envSettings.apiMode || 'bench';
|
||
const requestBody = buildRequestBody();
|
||
|
||
env.currentRequest = requestBody;
|
||
|
||
// Show loading
|
||
const loadingMsg = apiMode === 'backend'
|
||
? 'Отправка запроса к Backend API...'
|
||
: 'Отправка запроса к Bench API...';
|
||
showLoading(loadingMsg);
|
||
|
||
const currentEnvKey = AppState.currentEnvironment;
|
||
let apiResponse;
|
||
|
||
if (apiMode === 'bench') {
|
||
apiResponse = await api.benchQuery(currentEnvKey, requestBody);
|
||
|
||
// Response format: { request_id, timestamp, environment, response }
|
||
env.currentResponse = apiResponse.response;
|
||
env.requestId = apiResponse.request_id;
|
||
env.requestTimestamp = apiResponse.timestamp;
|
||
} else if (apiMode === 'backend') {
|
||
const resetSession = envSettings.resetSessionMode !== false;
|
||
apiResponse = await api.backendQuery(currentEnvKey, requestBody, resetSession);
|
||
|
||
// Response format: { request_id, timestamp, environment, response }
|
||
env.currentResponse = apiResponse.response;
|
||
env.requestId = apiResponse.request_id;
|
||
env.requestTimestamp = apiResponse.timestamp;
|
||
} else {
|
||
throw new Error(`Неизвестный режим API: ${apiMode}`);
|
||
}
|
||
|
||
// Hide loading
|
||
hideLoading();
|
||
|
||
// Validate response
|
||
if (!env.currentResponse || !env.currentResponse.answers || !Array.isArray(env.currentResponse.answers)) {
|
||
throw new Error('Некорректный формат ответа: отсутствует поле "answers"');
|
||
}
|
||
|
||
env.currentAnswerIndex = 0;
|
||
|
||
// Initialize annotations for new response
|
||
env.annotations = {};
|
||
|
||
// Save to localStorage
|
||
saveEnvironmentData(AppState.currentEnvironment);
|
||
|
||
// Render UI
|
||
renderQuestionsList();
|
||
renderAnswer(0);
|
||
|
||
const modeLabel = apiMode === 'backend' ? 'Backend' : 'Bench';
|
||
showToast(`[${modeLabel}] Получено ${env.currentResponse.answers.length} ответов`, 'success');
|
||
} catch (error) {
|
||
hideLoading();
|
||
showToast(`Ошибка: ${error.message}`, 'error');
|
||
console.error('Query error:', error);
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* Extract questions from query builder
|
||
*/
|
||
function extractQuestions() {
|
||
const mode = document.querySelector('.toggle-option.active')?.dataset.mode || 'questions';
|
||
|
||
if (mode === 'questions') {
|
||
const text = document.getElementById('questions-textarea').value.trim();
|
||
if (!text) {
|
||
throw new Error('Введите хотя бы один вопрос');
|
||
}
|
||
// Split by newlines and filter empty lines
|
||
return text.split('\n').filter(line => line.trim().length > 0).map(line => line.trim());
|
||
} else {
|
||
// Raw JSON mode
|
||
const json = document.getElementById('json-textarea').value;
|
||
const parsed = JSON.parse(json);
|
||
|
||
if (Array.isArray(parsed)) {
|
||
// If it's array of objects with 'body', extract bodies
|
||
if (parsed.length > 0 && typeof parsed[0] === 'object' && parsed[0].body) {
|
||
return parsed.map(item => item.body);
|
||
}
|
||
// If it's array of strings
|
||
if (parsed.length > 0 && typeof parsed[0] === 'string') {
|
||
return parsed;
|
||
}
|
||
}
|
||
|
||
throw new Error('JSON должен быть массивом вопросов (строк или объектов с полем "body")');
|
||
}
|
||
}
|
||
|
||
function loadResponseFromFile() {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = 'application/json';
|
||
|
||
input.onchange = async (e) => {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
|
||
try {
|
||
const text = await file.text();
|
||
const data = JSON.parse(text);
|
||
|
||
// Validate response format
|
||
if (!data.answers || !Array.isArray(data.answers)) {
|
||
throw new Error('Файл должен содержать объект с полем "answers" (массив)');
|
||
}
|
||
|
||
const env = getCurrentEnv();
|
||
|
||
// Set response
|
||
env.currentResponse = data;
|
||
env.currentAnswerIndex = 0;
|
||
env.requestTimestamp = new Date().toISOString();
|
||
env.requestId = 'loaded-' + generateUUID();
|
||
env.annotations = {};
|
||
|
||
// Try to reconstruct request from questions in response
|
||
env.currentRequest = data.answers.map(answer => ({
|
||
body: answer.question,
|
||
with_docs: true
|
||
}));
|
||
|
||
// Save to localStorage
|
||
saveEnvironmentData(AppState.currentEnvironment);
|
||
|
||
renderQuestionsList();
|
||
renderAnswer(0);
|
||
|
||
showToast(`Загружен ответ: ${data.answers.length} вопросов`, 'success');
|
||
} catch (error) {
|
||
showToast(`Ошибка загрузки ответа: ${error.message}`, 'error');
|
||
}
|
||
};
|
||
|
||
input.click();
|
||
}
|
||
|
||
function loadRequestFromFile() {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = 'application/json';
|
||
|
||
input.onchange = async (e) => {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
|
||
try {
|
||
const text = await file.text();
|
||
const data = JSON.parse(text);
|
||
|
||
// Validate it's an array
|
||
if (!Array.isArray(data)) {
|
||
throw new Error('Файл должен содержать JSON массив');
|
||
}
|
||
|
||
// Load into textarea
|
||
document.getElementById('json-textarea').value = JSON.stringify(data, null, 2);
|
||
validateJSON();
|
||
|
||
showToast(`Загружен запрос: ${data.length} вопросов`, 'success');
|
||
} catch (error) {
|
||
showToast(`Ошибка загрузки запроса: ${error.message}`, 'error');
|
||
}
|
||
};
|
||
|
||
input.click();
|
||
}
|
||
|
||
function importAnalysis() {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = 'application/json';
|
||
|
||
input.onchange = async (e) => {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
|
||
try {
|
||
const text = await file.text();
|
||
const data = JSON.parse(text);
|
||
|
||
// Validate it's a full export (analysis file)
|
||
if (!data.request || !data.response || !data.response.answers) {
|
||
throw new Error('Неверный формат файла анализа. Используйте файл, экспортированный через "Экспорт анализа".');
|
||
}
|
||
|
||
// Determine target environment (default to current if not specified - backward compatibility)
|
||
const targetEnv = data.environment || AppState.currentEnvironment;
|
||
|
||
// Check if we need to switch environment
|
||
if (targetEnv !== AppState.currentEnvironment) {
|
||
// Save current environment before switching
|
||
saveEnvironmentData(AppState.currentEnvironment);
|
||
|
||
// Switch to target environment
|
||
AppState.currentEnvironment = targetEnv;
|
||
AppState.settings.activeEnvironment = targetEnv;
|
||
// activeEnvironment - это локальное состояние UI, не сохраняем на сервер
|
||
updateEnvironmentTabs();
|
||
}
|
||
|
||
const env = getCurrentEnv();
|
||
|
||
// Restore complete state to target environment
|
||
env.currentRequest = data.request;
|
||
env.currentResponse = data.response;
|
||
env.annotations = data.annotations || {};
|
||
env.requestTimestamp = data.settings_snapshot?.timestamp || data.exported_at || new Date().toISOString();
|
||
env.requestId = data.settings_snapshot?.requestId || generateUUID();
|
||
env.currentAnswerIndex = 0;
|
||
|
||
// Save to localStorage
|
||
saveEnvironmentData(targetEnv);
|
||
|
||
// Render UI
|
||
renderQuestionsList();
|
||
renderAnswer(0);
|
||
|
||
// Count annotations
|
||
const annotationCount = Object.keys(env.annotations).filter(key => {
|
||
const ann = env.annotations[key];
|
||
return ann.overall?.rating || ann.overall?.comment ||
|
||
ann.body_research?.issues?.length > 0 ||
|
||
ann.body_analytical_hub?.issues?.length > 0;
|
||
}).length;
|
||
|
||
const envName = AppState.settings.environments[targetEnv].name;
|
||
const message = `Анализ импортирован в ${envName}: ${data.response.answers.length} вопросов` +
|
||
(annotationCount > 0 ? `, ${annotationCount} с пометками` : '');
|
||
showToast(message, 'success');
|
||
} catch (error) {
|
||
showToast(`Ошибка импорта: ${error.message}`, 'error');
|
||
}
|
||
};
|
||
|
||
input.click();
|
||
}
|
||
|
||
// ============================================
|
||
// Loading Overlay
|
||
// ============================================
|
||
|
||
function showLoading(message) {
|
||
document.getElementById('loading-message').textContent = message;
|
||
document.getElementById('loading-overlay').classList.add('open');
|
||
}
|
||
|
||
function hideLoading() {
|
||
document.getElementById('loading-overlay').classList.remove('open');
|
||
}
|
||
|
||
// ============================================
|
||
// Questions List Rendering
|
||
// ============================================
|
||
|
||
/**
|
||
* Check if there are annotations in document sections
|
||
*/
|
||
function hasAnnotationsInDocs(docsSection) {
|
||
if (!docsSection) return false;
|
||
|
||
// Check research documents
|
||
if (docsSection.research) {
|
||
for (const docIndex in docsSection.research) {
|
||
const doc = docsSection.research[docIndex];
|
||
if (doc.issues?.length > 0 || doc.comment) {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Check analytical_hub documents
|
||
if (docsSection.analytical_hub) {
|
||
for (const docIndex in docsSection.analytical_hub) {
|
||
const doc = docsSection.analytical_hub[docIndex];
|
||
if (doc.issues?.length > 0 || doc.comment) {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
function renderQuestionsList() {
|
||
const container = document.getElementById('questions-list');
|
||
const env = getCurrentEnv();
|
||
const response = env.currentResponse;
|
||
|
||
if (!response || !response.answers || response.answers.length === 0) {
|
||
container.innerHTML = `
|
||
<div class="empty-state">
|
||
<div class="empty-state-icon">
|
||
<span class="material-icons" style="font-size: inherit;">question_answer</span>
|
||
</div>
|
||
<div class="empty-state-text">Нет данных</div>
|
||
<div class="empty-state-subtext">Отправьте запрос к RAG бэкенду</div>
|
||
</div>
|
||
`;
|
||
document.getElementById('questions-count').textContent = '0 вопросов';
|
||
return;
|
||
}
|
||
|
||
document.getElementById('questions-count').textContent =
|
||
`${response.answers.length} ${pluralize(response.answers.length, 'вопрос', 'вопроса', 'вопросов')}`;
|
||
|
||
container.innerHTML = response.answers.map((answer, index) => {
|
||
const isActive = index === env.currentAnswerIndex;
|
||
const annotation = env.annotations[index];
|
||
|
||
// Check for annotations in body sections
|
||
const hasBodyAnnotations = annotation && (
|
||
annotation.overall?.comment ||
|
||
annotation.body_research?.issues?.length > 0 ||
|
||
annotation.body_analytical_hub?.issues?.length > 0
|
||
);
|
||
|
||
// Check for annotations in documents
|
||
const hasDocAnnotations = annotation && (
|
||
hasAnnotationsInDocs(annotation.docs_from_vectorstore) ||
|
||
hasAnnotationsInDocs(annotation.docs_to_llm)
|
||
);
|
||
|
||
const hasAnyAnnotations = hasBodyAnnotations || hasDocAnnotations;
|
||
|
||
// Get rating indicator
|
||
const rating = annotation?.overall?.rating;
|
||
let ratingIndicator = '';
|
||
|
||
if (rating === 'correct') {
|
||
ratingIndicator = '<span class="material-icons" style="font-size: 18px; color: #4caf50;">check_circle</span>';
|
||
} else if (rating === 'partial') {
|
||
ratingIndicator = '<span class="material-icons" style="font-size: 18px; color: #ff9800;">error</span>';
|
||
} else if (rating === 'incorrect') {
|
||
ratingIndicator = '<span class="material-icons" style="font-size: 18px; color: #f44336;">cancel</span>';
|
||
}
|
||
|
||
// Get annotation bookmark indicator (separate from rating)
|
||
const annotationIndicator = hasAnyAnnotations
|
||
? '<span class="material-icons color-warning" style="font-size: 18px;">bookmark</span>'
|
||
: '';
|
||
|
||
return `
|
||
<div class="card card-clickable question-item ${isActive ? 'active' : ''}"
|
||
data-index="${index}"
|
||
onclick="selectAnswer(${index})">
|
||
<div class="card-content">
|
||
<div class="question-item-header">
|
||
<div class="text-overline">#${index + 1}</div>
|
||
<div style="display: flex; gap: 4px;">
|
||
${ratingIndicator}
|
||
${annotationIndicator}
|
||
</div>
|
||
</div>
|
||
<div class="question-text">${escapeHtml(answer.question)}</div>
|
||
<div class="question-meta">
|
||
<span>${formatTime(answer.processing_time_sec)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
function pluralize(count, one, few, many) {
|
||
const mod10 = count % 10;
|
||
const mod100 = count % 100;
|
||
|
||
if (mod10 === 1 && mod100 !== 11) return one;
|
||
if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 >= 20)) return few;
|
||
return many;
|
||
}
|
||
|
||
function selectAnswer(index) {
|
||
const env = getCurrentEnv();
|
||
env.currentAnswerIndex = index;
|
||
renderQuestionsList();
|
||
renderAnswer(index);
|
||
}
|
||
|
||
// ============================================
|
||
// Answer Rendering
|
||
// ============================================
|
||
|
||
function renderAnswer(index) {
|
||
const env = getCurrentEnv();
|
||
const answer = env.currentResponse.answers[index];
|
||
if (!answer) return;
|
||
|
||
const isBackendMode = answer.backend_mode === true;
|
||
|
||
// Show answer viewer, hide query builder
|
||
document.getElementById('query-builder').classList.add('hidden');
|
||
document.getElementById('answer-viewer').classList.remove('hidden');
|
||
|
||
// Render question header
|
||
document.getElementById('current-question-number').textContent = index + 1;
|
||
document.getElementById('current-question-text').textContent = answer.question;
|
||
|
||
// Render metadata
|
||
document.getElementById('processing-time').textContent = isBackendMode ? 'N/A' : formatTime(answer.processing_time_sec);
|
||
document.getElementById('request-id').textContent = env.requestId || '-';
|
||
document.getElementById('request-timestamp').textContent =
|
||
env.requestTimestamp ? formatTimestamp(env.requestTimestamp) : '-';
|
||
|
||
// Render answer bodies
|
||
renderAnswerBody('body-research-text', answer.body_research);
|
||
renderAnswerBody('body-analytical-text', answer.body_analytical_hub);
|
||
|
||
// Show/hide documents sections based on mode
|
||
const docsSection = document.querySelector('.answer-section:has(#docs-tabs)');
|
||
if (docsSection) {
|
||
docsSection.style.display = isBackendMode ? 'none' : 'block';
|
||
}
|
||
|
||
if (!isBackendMode) {
|
||
// Render documents (only in bench mode)
|
||
renderDocuments('vectorstore-research-docs', answer.docs_from_vectorstore?.research, 'docs_from_vectorstore', 'research', index);
|
||
renderDocuments('vectorstore-analytical-docs', answer.docs_from_vectorstore?.analytical_hub, 'docs_from_vectorstore', 'analytical_hub', index);
|
||
renderDocuments('llm-research-docs', answer.docs_to_llm?.research, 'docs_to_llm', 'research', index);
|
||
renderDocuments('llm-analytical-docs', answer.docs_to_llm?.analytical_hub, 'docs_to_llm', 'analytical_hub', index);
|
||
}
|
||
|
||
// Load annotations
|
||
loadAnnotationsForAnswer(index);
|
||
}
|
||
|
||
function renderAnswerBody(elementId, text) {
|
||
const container = document.getElementById(elementId);
|
||
|
||
if (!text) {
|
||
container.innerHTML = '<p class="color-warning">Нет данных</p>';
|
||
return;
|
||
}
|
||
|
||
if (isTableText(text)) {
|
||
const table = parseTextTable(text);
|
||
if (table) {
|
||
container.innerHTML = `<div class="table-container">${table}</div>`;
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Render as plain text with line breaks
|
||
container.innerHTML = `<p>${escapeHtml(text).replace(/\n/g, '<br>')}</p>`;
|
||
}
|
||
|
||
function renderDocuments(containerId, docs, section, subsection, answerIndex) {
|
||
const container = document.getElementById(containerId);
|
||
|
||
if (!docs || docs.length === 0) {
|
||
container.innerHTML = `
|
||
<div class="empty-state">
|
||
<div class="empty-state-text">Нет документов</div>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = docs.map((doc, docIndex) => {
|
||
const docId = `doc-${section}-${subsection}-${docIndex}`;
|
||
|
||
let docContent = '';
|
||
if (typeof doc === 'string') {
|
||
if (isTableText(doc)) {
|
||
const table = parseTextTable(doc);
|
||
docContent = table || `<pre class="text-table">${escapeHtml(doc)}</pre>`;
|
||
} else {
|
||
docContent = `<p>${escapeHtml(doc).replace(/\n/g, '<br>')}</p>`;
|
||
}
|
||
} else {
|
||
docContent = `<pre class="text-table">${escapeHtml(JSON.stringify(doc, null, 2))}</pre>`;
|
||
}
|
||
|
||
return `
|
||
<div class="expansion-panel" id="${docId}">
|
||
<div class="expansion-header" onclick="toggleExpansion('${docId}')">
|
||
<span class="expansion-header-title">Документ #${docIndex + 1}</span>
|
||
<span class="material-icons expansion-icon">expand_more</span>
|
||
</div>
|
||
<div class="expansion-content">
|
||
<div class="expansion-body">
|
||
${docContent}
|
||
|
||
<div class="annotation-section mt-md">
|
||
<h6 class="mb-sm">Пометки</h6>
|
||
<div class="annotation-issues mb-md">
|
||
<label class="issue-checkbox">
|
||
<input type="checkbox" class="checkbox"
|
||
data-section="${section}"
|
||
data-subsection="${subsection}"
|
||
data-doc-index="${docIndex}"
|
||
data-issue="factual_error">
|
||
<span>Факт. ошибка</span>
|
||
</label>
|
||
<label class="issue-checkbox">
|
||
<input type="checkbox" class="checkbox"
|
||
data-section="${section}"
|
||
data-subsection="${subsection}"
|
||
data-doc-index="${docIndex}"
|
||
data-issue="inaccurate_wording">
|
||
<span>Неточность формулировки</span>
|
||
</label>
|
||
<label class="issue-checkbox">
|
||
<input type="checkbox" class="checkbox"
|
||
data-section="${section}"
|
||
data-subsection="${subsection}"
|
||
data-doc-index="${docIndex}"
|
||
data-issue="insufficient_context">
|
||
<span>Недостаточно контекста</span>
|
||
</label>
|
||
<label class="issue-checkbox">
|
||
<input type="checkbox" class="checkbox"
|
||
data-section="${section}"
|
||
data-subsection="${subsection}"
|
||
data-doc-index="${docIndex}"
|
||
data-issue="offtopic">
|
||
<span>Не по вопросу</span>
|
||
</label>
|
||
<label class="issue-checkbox">
|
||
<input type="checkbox" class="checkbox"
|
||
data-section="${section}"
|
||
data-subsection="${subsection}"
|
||
data-doc-index="${docIndex}"
|
||
data-issue="technical_answer">
|
||
<span>Технический ответ</span>
|
||
</label>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Комментарий</label>
|
||
<textarea class="form-textarea" rows="2"
|
||
data-section="${section}"
|
||
data-subsection="${subsection}"
|
||
data-doc-index="${docIndex}"
|
||
placeholder="Комментарий к документу..."></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
function toggleExpansion(id) {
|
||
const panel = document.getElementById(id);
|
||
panel.classList.toggle('expanded');
|
||
}
|
||
|
||
// ============================================
|
||
// Annotation System
|
||
// ============================================
|
||
|
||
function initAnnotationForAnswer(index) {
|
||
const env = getCurrentEnv();
|
||
if (!env.annotations[index]) {
|
||
env.annotations[index] = {
|
||
overall: { rating: '', comment: '' },
|
||
body_research: { issues: [], comment: '' },
|
||
body_analytical_hub: { issues: [], comment: '' },
|
||
docs_from_vectorstore: { research: {}, analytical_hub: {} },
|
||
docs_to_llm: { research: {}, analytical_hub: {} }
|
||
};
|
||
}
|
||
}
|
||
|
||
function loadAnnotationsForAnswer(index) {
|
||
initAnnotationForAnswer(index);
|
||
const env = getCurrentEnv();
|
||
const annotation = env.annotations[index];
|
||
|
||
// Load overall rating
|
||
document.getElementById('overall-rating').value = annotation.overall.rating || '';
|
||
document.getElementById('overall-comment').value = annotation.overall.comment || '';
|
||
|
||
// Load body annotations
|
||
loadSectionAnnotation('body_research', annotation.body_research);
|
||
loadSectionAnnotation('body_analytical_hub', annotation.body_analytical_hub);
|
||
|
||
// Load document annotations
|
||
loadDocumentAnnotations('docs_from_vectorstore', 'research', annotation.docs_from_vectorstore?.research);
|
||
loadDocumentAnnotations('docs_from_vectorstore', 'analytical_hub', annotation.docs_from_vectorstore?.analytical_hub);
|
||
loadDocumentAnnotations('docs_to_llm', 'research', annotation.docs_to_llm?.research);
|
||
loadDocumentAnnotations('docs_to_llm', 'analytical_hub', annotation.docs_to_llm?.analytical_hub);
|
||
|
||
// Setup event listeners for current answer
|
||
setupAnnotationListeners();
|
||
}
|
||
|
||
function loadSectionAnnotation(section, data) {
|
||
// Load checkboxes
|
||
document.querySelectorAll(`input[data-section="${section}"]`).forEach(checkbox => {
|
||
if (checkbox.type === 'checkbox') {
|
||
const issue = checkbox.dataset.issue;
|
||
checkbox.checked = data.issues.includes(issue);
|
||
updateCheckboxStyle(checkbox);
|
||
}
|
||
});
|
||
|
||
// Load comment
|
||
const textarea = document.querySelector(`textarea[data-section="${section}"]:not([data-doc-index])`);
|
||
if (textarea) {
|
||
textarea.value = data.comment || '';
|
||
}
|
||
}
|
||
|
||
function loadDocumentAnnotations(section, subsection, docs) {
|
||
if (!docs) return;
|
||
|
||
Object.keys(docs).forEach(docIndex => {
|
||
const data = docs[docIndex];
|
||
|
||
// Load checkboxes
|
||
document.querySelectorAll(
|
||
`input[data-section="${section}"][data-subsection="${subsection}"][data-doc-index="${docIndex}"]`
|
||
).forEach(checkbox => {
|
||
if (checkbox.type === 'checkbox') {
|
||
const issue = checkbox.dataset.issue;
|
||
checkbox.checked = data.issues?.includes(issue) || false;
|
||
updateCheckboxStyle(checkbox);
|
||
}
|
||
});
|
||
|
||
// Load comment
|
||
const textarea = document.querySelector(
|
||
`textarea[data-section="${section}"][data-subsection="${subsection}"][data-doc-index="${docIndex}"]`
|
||
);
|
||
if (textarea) {
|
||
textarea.value = data.comment || '';
|
||
}
|
||
});
|
||
}
|
||
|
||
function setupAnnotationListeners() {
|
||
const env = getCurrentEnv();
|
||
const index = env.currentAnswerIndex;
|
||
|
||
// Overall rating
|
||
document.getElementById('overall-rating').onchange = (e) => {
|
||
env.annotations[index].overall.rating = e.target.value;
|
||
saveAnnotationsDraft();
|
||
};
|
||
|
||
document.getElementById('overall-comment').oninput = (e) => {
|
||
env.annotations[index].overall.comment = e.target.value;
|
||
saveAnnotationsDraft();
|
||
};
|
||
|
||
// Section checkboxes and textareas
|
||
document.querySelectorAll('input.checkbox, textarea').forEach(element => {
|
||
const section = element.dataset.section;
|
||
const subsection = element.dataset.subsection;
|
||
const docIndex = element.dataset.docIndex;
|
||
|
||
if (!section) return;
|
||
|
||
if (element.type === 'checkbox') {
|
||
element.onchange = (e) => {
|
||
const issue = e.target.dataset.issue;
|
||
|
||
if (docIndex !== undefined) {
|
||
// Document annotation
|
||
if (!env.annotations[index][section]) {
|
||
env.annotations[index][section] = { research: {}, analytical_hub: {} };
|
||
}
|
||
if (!env.annotations[index][section][subsection]) {
|
||
env.annotations[index][section][subsection] = {};
|
||
}
|
||
if (!env.annotations[index][section][subsection][docIndex]) {
|
||
env.annotations[index][section][subsection][docIndex] = { issues: [], comment: '' };
|
||
}
|
||
|
||
const issues = env.annotations[index][section][subsection][docIndex].issues;
|
||
if (e.target.checked) {
|
||
if (!issues.includes(issue)) issues.push(issue);
|
||
} else {
|
||
const idx = issues.indexOf(issue);
|
||
if (idx > -1) issues.splice(idx, 1);
|
||
}
|
||
} else {
|
||
// Body annotation
|
||
const issues = env.annotations[index][section].issues;
|
||
if (e.target.checked) {
|
||
if (!issues.includes(issue)) issues.push(issue);
|
||
} else {
|
||
const idx = issues.indexOf(issue);
|
||
if (idx > -1) issues.splice(idx, 1);
|
||
}
|
||
}
|
||
|
||
updateCheckboxStyle(e.target);
|
||
saveAnnotationsDraft();
|
||
};
|
||
} else if (element.tagName === 'TEXTAREA') {
|
||
element.oninput = (e) => {
|
||
if (docIndex !== undefined) {
|
||
if (!env.annotations[index][section][subsection][docIndex]) {
|
||
env.annotations[index][section][subsection][docIndex] = { issues: [], comment: '' };
|
||
}
|
||
env.annotations[index][section][subsection][docIndex].comment = e.target.value;
|
||
} else if (section !== 'overall') {
|
||
env.annotations[index][section].comment = e.target.value;
|
||
}
|
||
saveAnnotationsDraft();
|
||
};
|
||
}
|
||
});
|
||
}
|
||
|
||
function updateCheckboxStyle(checkbox) {
|
||
const label = checkbox.closest('.issue-checkbox');
|
||
if (label) {
|
||
label.classList.toggle('checked', checkbox.checked);
|
||
}
|
||
}
|
||
|
||
function saveAnnotationsDraft() {
|
||
// Save annotations and entire environment state
|
||
saveEnvironmentData(AppState.currentEnvironment);
|
||
}
|
||
|
||
// ============================================
|
||
// Export Functionality
|
||
// ============================================
|
||
|
||
function exportAnalysis() {
|
||
const env = getCurrentEnv();
|
||
|
||
if (!env.currentResponse) {
|
||
showToast('Нет данных для экспорта', 'warning');
|
||
return;
|
||
}
|
||
|
||
const envSettings = getCurrentEnvSettings();
|
||
const envName = AppState.settings.environments[AppState.currentEnvironment].name;
|
||
|
||
const exportData = {
|
||
environment: AppState.currentEnvironment, // Save environment info
|
||
api_mode: envSettings.apiMode || 'bench', // Save API mode
|
||
request: env.currentRequest,
|
||
response: env.currentResponse,
|
||
annotations: env.annotations,
|
||
settings_snapshot: {
|
||
requestId: env.requestId,
|
||
systemId: envSettings.systemId,
|
||
timestamp: env.requestTimestamp,
|
||
environment_name: envName,
|
||
api_mode: envSettings.apiMode || 'bench',
|
||
},
|
||
exported_at: new Date().toISOString(),
|
||
};
|
||
|
||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
|
||
const filename = `brief-bench-analysis-${AppState.currentEnvironment}-${timestamp}.json`;
|
||
|
||
downloadJSON(exportData, filename);
|
||
showToast(`Анализ экспортирован: ${filename}`, 'success');
|
||
}
|
||
|
||
// ============================================
|
||
// Initialize on Load
|
||
// ============================================
|
||
|
||
// Initialize app on load
|
||
document.addEventListener('DOMContentLoaded', async () => {
|
||
// Подключить обработчики (в т.ч. для login/logout)
|
||
setupEventListeners();
|
||
|
||
// Проверить авторизацию
|
||
const isAuthenticated = await checkAuth();
|
||
|
||
if (isAuthenticated) {
|
||
// Пользователь авторизован, инициализировать приложение
|
||
await initApp();
|
||
}
|
||
// Если не авторизован, login screen уже показан в checkAuth()
|
||
});
|