<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Чат с ботом</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; connect-src 'self'; style-src 'self' 'unsafe-inline'">

    {{CSS}}
    
</head>
<body>
    <div class="app-container">
        <!-- Боковая панель с историей -->
        <div id="sidebar" class="sidebar visible">
            <div class="sidebar-header">
                <button id="newTaskBtnSidebar" class="new-chat-btn">➕ Новый чат</button>
                <button id="hideSidebarBtn" class="hide-sidebar-btn">◀</button>
            </div>
            <div id="historyList" class="history-list">
                {{HISTORY}}
            </div>
        </div>

        <!-- Основная область чата -->
        <div class="main-content">
            <div class="top-bar">
                <button id="showSidebarBtn" class="show-sidebar-btn" style="display: none;">▶</button>
                <h3>{{HEADER}}</h3>
                <button id="logChatBtn" class="log-chat-btn">📋 Лог чата</button>
            </div>
            
            <div id="chat"></div>
            
            <div id="uploadProgress"></div>

            <div id="inputArea">
                <div id="messageRow">
                    <div id="inputWrapper" class="input-wrapper">
                        <textarea id="messageInput" placeholder="Напишите сообщение..." rows="1" disabled></textarea>
                        <button id="voiceButton" class="voice-btn" disabled><svg width="13" height="16" viewBox="0 0 13 16" fill="none"><rect x="4.25" y="0.75" width="4.5" height="8.5" rx="2.25" stroke="currentColor" stroke-width="1.4"></rect><path d="M1.5 8a5 5 0 0010 0" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></path><line x1="6.5" y1="13" x2="6.5" y2="15" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></line><line x1="4.5" y1="15" x2="8.5" y2="15" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></line></svg></button>
                        <button id="sendButton" disabled><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 11V1M6 1L2 5M6 1l4 4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
                    </div>
                </div>
                
                <div id="fileRow">
                    <div style="display: none;">
                        <button id="fileButton" disabled>📎 Выбрать файлы</button>
                        <input type="file" id="fileInput" multiple>
                        <span id="fileList"></span>
                    </div>
                    
                    <span id="voiceStatus"></span>
                </div>
            </div>

            <div id="footer">{{FOOTER}}</div>
        </div>
    </div>

    <!-- Модальное окно для лога чата -->
    <div id="logModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Лог чата</h4>
                <button id="closeLogModal" class="close-modal-btn">✖</button>
            </div>
            <div id="logIdDisplay" class="log-id"></div>
            <pre id="logContent" class="log-content"></pre>
        </div>
    </div>

    <script>
        (function() {
            // --- Конфигурация ---
            const CONFIG = {
                API_URL: "{{API_URL}}",
                API_TOKEN: "{{API_TOKEN}}",
                API_AUTH_HEADER: "{{API_AUTH_HEADER}}",
                ALLOW_FILES: false,
                MAX_FILE_SIZE: 10 * 1024 * 1024,
                MAX_TOTAL_SIZE: 50 * 1024 * 1024,
                ALLOWED_FILE_TYPES: [
                    'image/jpeg', 'image/png', 'image/gif', 'image/webp',
                    'application/pdf', 'text/plain', 'application/msword',
                    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                    'application/vnd.ms-excel',
                    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                ],
                POLLING_INTERVAL: 2000,
                FETCH_TIMEOUT: 10000,
                MAX_RETRIES: 3
            };

            // --- Состояние приложения ---
            let currentTaskId = null;
            let pollingInterval = null;
            let isWaitingForResponse = false;
            let lastStatusID = null;
            let selectedFiles = [];
            let fileObjectUrls = [];
            let chatHistory = []; // Хранит историю чатов для отображения в боковой панели
            
            // --- Голосовой ввод ---
            let recognition = null;
            let isRecording = false;
            let voiceSupported = false;
            
            // --- Состояние интерфейса ---
            let isSidebarVisible = true;
            
            // --- Проверка поддержки браузера ---
            const features = {
                fileReader: !!window.FileReader,
                formData: !!window.FormData,
                fetch: !!window.fetch,
                promise: !!window.Promise,
                speech: 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window
            };
            
            // Инициализация распознавания речи
            if (features.speech) {
                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                recognition = new SpeechRecognition();
                recognition.lang = 'ru-RU';
                recognition.continuous = false;
                recognition.interimResults = false;
                recognition.maxAlternatives = 1;
                
                recognition.onresult = (event) => {
                    const transcript = event.results[0][0].transcript;
                    messageInput.value = transcript;
                    autoResizeTextarea();
                    setVoiceStatus('✅ Распознано');
                    stopRecording();
                };
                
                recognition.onerror = (event) => {
                    setVoiceStatus('❌ Ошибка: ' + event.error);
                    stopRecording();
                };
                
                recognition.onend = () => {
                    stopRecording();
                };
                
                voiceSupported = true;
            }

            // --- DOM элементы ---
            const chatDiv = document.getElementById('chat');
            const newTaskBtnSidebar = document.getElementById('newTaskBtnSidebar');
            const messageInput = document.getElementById('messageInput');
            const sendButton = document.getElementById('sendButton');
            //const statusDiv = document.getElementById('status');
            const fileButton = document.getElementById('fileButton');
            const fileInput = document.getElementById('fileInput');
            const fileListSpan = document.getElementById('fileList');
            const voiceButton = document.getElementById('voiceButton');
            const voiceStatus = document.getElementById('voiceStatus');
            const uploadProgress = document.getElementById('uploadProgress');
            const inputArea = document.getElementById('inputArea');
            const sidebar = document.getElementById('sidebar');
            const hideSidebarBtn = document.getElementById('hideSidebarBtn');
            const showSidebarBtn = document.getElementById('showSidebarBtn');
            const historyList = document.getElementById('historyList');
            const logChatBtn = document.getElementById('logChatBtn');
            const logModal = document.getElementById('logModal');
            const logContent = document.getElementById('logContent');
            const logIdDisplay = document.getElementById('logIdDisplay');
            const closeLogModal = document.getElementById('closeLogModal');

            // --- Автоматическое изменение размера textarea ---
            function autoResizeTextarea() {
                messageInput.style.height = 'auto';
                const newHeight = Math.min(messageInput.scrollHeight, 150);
                messageInput.style.height = newHeight + 'px';
            }

            // --- Экранирование HTML для защиты от XSS ---
            function escapeHtml(text) {
                if (!text) return '';
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }

            // --- Форматирование размера файла ---
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Б';
                const k = 1024;
                const sizes = ['Б', 'КБ', 'МБ', 'ГБ'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
            }

            // --- Валидация файлов ---
            function validateFiles(files) {
                const errors = [];
                let totalSize = 0;
                
                for (let file of files) {
                    if (file.size > CONFIG.MAX_FILE_SIZE) {
                        errors.push(`Файл "${file.name}" слишком большой (макс. ${formatFileSize(CONFIG.MAX_FILE_SIZE)})`);
                    }
                    
                    if (!CONFIG.ALLOWED_FILE_TYPES.includes(file.type) && file.type !== '') {
                        errors.push(`Файл "${file.name}" имеет неподдерживаемый тип`);
                    }
                    
                    totalSize += file.size;
                }
                
                if (totalSize > CONFIG.MAX_TOTAL_SIZE) {
                    errors.push(`Общий размер файлов превышает ${formatFileSize(CONFIG.MAX_TOTAL_SIZE)}`);
                }
                
                return {
                    valid: errors.length === 0,
                    errors,
                    totalSize
                };
            }

            // --- Чтение файлов ---
            function readFiles(files) {
                return Promise.all(Array.from(files).map(file => {
                    return new Promise((resolve, reject) => {
                        const validation = validateFiles([file]);
                        if (!validation.valid) {
                            reject(new Error(validation.errors[0]));
                            return;
                        }
                        
                        const objectUrl = URL.createObjectURL(file);
                        fileObjectUrls.push(objectUrl);
                        
                        resolve({
                            name: file.name,
                            size: file.size,
                            type: file.type,
                            objectUrl: objectUrl,
                            file: file,
                            lastModified: file.lastModified
                        });
                    });
                }));
            }

            // --- Освобождение Object URLs ---
            function cleanupObjectUrls() {
                fileObjectUrls.forEach(url => URL.revokeObjectURL(url));
                fileObjectUrls = [];
            }

            // --- Обновление отображения списка файлов ---
            function updateFileList() {
                if (selectedFiles.length === 0) {
                    fileListSpan.textContent = '';
                    return;
                }
                
                const validation = validateFiles(selectedFiles.map(f => f.file));
                const warning = !validation.valid ? '⚠️ ' : '';
                
                const fileNames = selectedFiles.map(f => f.name).join(', ');
                fileListSpan.innerHTML = `<span class="file-item ${!validation.valid ? 'warning' : ''}">${warning}${selectedFiles.length} файл(ов): ${escapeHtml(fileNames)}</span>`;
            }

            // --- Очистка чата ---
            function clearChat() {
                chatDiv.innerHTML = '';
            }

            // --- Добавление сообщения в чат ---
            function addMessageToChat(role, content, files = null) {
                const msgDiv = document.createElement('div');
                msgDiv.classList.add('message', role);
                
                let roleIcon = '';
                switch(role) {
                    case 'user': roleIcon = '👤'; content = escapeHtml(content); break;
                    case 'assistant': roleIcon = '🤖'; break;
                    case 'system': roleIcon = '⚙️'; break;
                    case 'error': roleIcon = '❌'; break;
                    case 'wait': roleIcon = '⏳'; break;
                    default: roleIcon = '📌';
                }
                
                let html = `${content.replace(/\n/g, '<br>')}`;
                
                if (files && files.length > 0) {
                    html += `<div class="files-attachment">📎 Прикреплённые файлы:<br>`;
                    
                    files.forEach(file => {
                        if (file.type.startsWith('image/')) {
                            html += `<div class="file-preview">`;
                            html += `<img src="${escapeHtml(file.objectUrl)}" alt="${escapeHtml(file.name)}" title="${escapeHtml(file.name)}">`;
                            html += `<span>${escapeHtml(file.name)}</span>`;
                            html += `</div>`;
                        } else {
                            html += `<div class="file-preview">`;
                            html += `<span>📄 ${escapeHtml(file.name)} (${formatFileSize(file.size)})</span>`;
                            html += `</div>`;
                        }
                    });
                    
                    html += `</div>`;
                }
                
                msgDiv.innerHTML = html;
                chatDiv.appendChild(msgDiv);
                chatDiv.scrollTop = chatDiv.scrollHeight;
            }

            // --- Добавление чата в историю ---
            function addChatToHistory(chatId, firstMessage, timestamp) {
                // Проверяем, существует ли уже такой чат
                const existingItem = document.querySelector(`.history-item[data-chat-id="${chatId}"]`);
                if (existingItem) {
                    return;
                }
                
                const chatTitle = firstMessage.length > 25 ? firstMessage.substring(0, 25) + '...' : firstMessage;
                const date = new Date(timestamp);
                const dateStr = date.toLocaleDateString('ru-RU') + ' ' + date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
                
                const historyItem = document.createElement('div');
                historyItem.className = 'history-item';
                historyItem.setAttribute('data-chat-id', chatId);
                historyItem.innerHTML = `
                    <div class="history-title">${escapeHtml(chatTitle)}</div>
                    <div class="history-date">${escapeHtml(dateStr)}</div>
                `;
                
                // Добавляем в начало списка
                historyList.insertBefore(historyItem, historyList.firstChild);
                
                // Добавляем обработчик
                historyItem.addEventListener('click', historyClickHandler);
                
                // Сохраняем в массив истории
                chatHistory.unshift({ id: chatId, title: chatTitle, timestamp: timestamp });
            }

            // --- Загрузка истории диалога ---
            async function loadDialogHistory(dialogId) {
                try {
                    const response = await fetchWithRetry(CONFIG.API_URL + `dialog/${dialogId}/`, { method: 'GET' });
                    
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    
                    const messages = await response.json();
                    
                    // Очищаем текущий чат
                    clearChat();
                    
                    // Выводим сообщения
                    if (Array.isArray(messages)) {
                        messages.forEach(msg => {
                            if (msg.status === 'user' || msg.status === 'assistant') {
                                addMessageToChat(msg.status, msg.message);
                            }
                        });
                    }
                    
                    // Устанавливаем текущий ID чата
                    currentTaskId = dialogId;
                    
                    // Останавливаем polling если был
                    stopPolling();
                    setWaitingState(false);
                    
                    // Обновляем активный класс
                    document.querySelectorAll('.history-item').forEach(item => {
                        item.classList.remove('active');
                    });
                    const activeItem = document.querySelector(`.history-item[data-chat-id="${dialogId}"]`);
                    if (activeItem) {
                        activeItem.classList.add('active');
                    }
                    
                } catch (error) {
                    console.error('Ошибка загрузки истории диалога:', error);
                    addMessageToChat('error', `Не удалось загрузить историю чата: ${error.message}`);
                }
            }

            // --- Загрузка лога чата ---
            async function loadChatLog() {
                if (!currentTaskId) {
                    alert('Нет активного чата');
                    return;
                }
                
                try {
                    const response = await fetchWithRetry(CONFIG.API_URL + `log/${currentTaskId}/`, { method: 'GET' });
                    
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    
                    const logText = await response.text();
                    logContent.textContent = logText;
                    logIdDisplay.textContent = `ID чата: ${currentTaskId}`;
                    logModal.style.display = 'flex';
                    
                } catch (error) {
                    console.error('Ошибка загрузки лога:', error);
                    alert(`Не удалось загрузить лог чата: ${error.message}`);
                }
            }

            // --- Управление состоянием голосового ввода ---
            function setVoiceStatus(text) {
                voiceStatus.textContent = text;
                setTimeout(() => {
                    if (voiceStatus.textContent === text) {
                        voiceStatus.textContent = '';
                    }
                }, 3000);
            }
            
            function stopRecording() {
                isRecording = false;
                voiceButton.classList.remove('recording');
                voiceButton.textContent = '🎤';
            }

            // --- Управление состоянием ожидания ---
            function setWaitingState(waiting) {
                isWaitingForResponse = waiting;
                if (waiting) {
                    messageInput.disabled = true;
                    sendButton.disabled = true;
                    fileButton.disabled = true;
                    voiceButton.disabled = true;
                    //statusDiv.textContent = '⏳ Ожидание ответа от бота...';
                } else {
                    messageInput.disabled = false;
                    sendButton.disabled = false;
                    fileButton.disabled = features.fileReader;
                    voiceButton.disabled = !voiceSupported;
                    //statusDiv.textContent = '';
                    messageInput.focus();
                }
            }

            // --- Остановка опроса ---
            function stopPolling() {
                if (pollingInterval) {
                    clearInterval(pollingInterval);
                    pollingInterval = null;
                }
            }

            // --- Fetch с таймаутом и retry ---
            async function fetchWithRetry(url, options, retryCount = 0) {
                const controller = new AbortController();
                const timeoutId = setTimeout(() => controller.abort(), CONFIG.FETCH_TIMEOUT);
                
                try {
                    const response = await fetch(url, {
                        ...options,
                        signal: controller.signal,
                        headers: {
                            [CONFIG.API_AUTH_HEADER]: CONFIG.API_TOKEN,
                            ...options.headers
                        }                        
                    });
                    clearTimeout(timeoutId);
                    return response;
                } catch (error) {
                    clearTimeout(timeoutId);
                    
                    if (error.name === 'AbortError') {
                        throw new Error('Request timeout');
                    }
                    
                    if (retryCount < CONFIG.MAX_RETRIES) {
                        const delay = Math.min(1000 * Math.pow(2, retryCount), 10000);
                        await new Promise(r => setTimeout(r, delay));
                        return fetchWithRetry(url, options, retryCount + 1);
                    }
                    
                    throw error;
                }
            }

            // --- Опрос сервера ---
            function startPolling(taskId) {
                stopPolling();
                
                pollingInterval = setInterval(() => {
                    if (!taskId) {
                        stopPolling();
                        return;
                    }

                    fetchWithRetry(CONFIG.API_URL + `status/${taskId}/`, { method: 'GET' })
                        .then(async response => {
                            if (!response.ok) {
                                throw new Error(`HTTP error! status: ${response.status}`);
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (!data.status) return;

                            const status = data.status;
                            const message = data.message;
                            const changed = data.changed;

                            if (changed !== lastStatusID) {
                                switch (status) {
                                    case 'user':
                                        addMessageToChat('assistant', 'Принято, анализирую задачу...');
                                        break;

                                    case 'function_call':
                                        addMessageToChat('assistant', 'Изучаю конфигурацию...');
                                        break;

                                    case 'function_call_output':
                                        addMessageToChat('assistant', 'Смотрю конфигурацию, думаю...');
                                        break;

                                    case 'assistant':
                                        addMessageToChat(status, message);
                                        setWaitingState(false);
                                        stopPolling();
                                        break;
                                        
                                    case 'result':
                                        addMessageToChat('assistant', 'RESULT: ' + message);
                                        setWaitingState(false);
                                        stopPolling();                                    
                                        break;
                                        
                                    case 'error':
                                        addMessageToChat('error', message);
                                        setWaitingState(false);
                                        stopPolling();
                                        break;
                                }

                                lastStatusID = changed;
                            }
                        })
                        .catch(error => {
                            console.error('Ошибка при опросе:', error);
                            if (error.message === 'Request timeout') {
                                //statusDiv.textContent = '⚠️ Таймаут запроса';
                            } else {
                                //statusDiv.textContent = '⚠️ Ошибка соединения с сервером';
                            }
                        });
                }, CONFIG.POLLING_INTERVAL);
            }

            // --- Сброс для новой задачи ---
            function resetForNewTask() {
                stopPolling();
                setWaitingState(false);
                messageInput.value = '';
                selectedFiles = [];
                fileInput.value = '';
                cleanupObjectUrls();
                updateFileList();
                clearChat();
                autoResizeTextarea();
            }

            // --- Создание новой задачи ---
            function createNewTask() {
                const newId = 'task_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                currentTaskId = newId;
                
                resetForNewTask();
                
                messageInput.disabled = false;
                sendButton.disabled = false;
                fileButton.disabled = !features.fileReader;
                voiceButton.disabled = !voiceSupported;
                messageInput.focus();
                
                addMessageToChat('system', 'Новый чат создан. Напишите сообщение, чтобы начать.');
            }

            // --- Отправка сообщения ---
            async function sendMessage() {
                const messageText = messageInput.value.trim();
                
                // Если нет активного чата, создаем новый
                if (!currentTaskId) {
                    createNewTask();
                }
                
                if ((!messageText && selectedFiles.length === 0) || !currentTaskId) return;
                
                // Если это первое сообщение в чате, добавляем чат в историю
                const chatEmpty = chatDiv.children.length === 0 || 
                    (chatDiv.children.length === 1 && chatDiv.children[0].classList.contains('system'));
                
                if (chatEmpty && messageText) {
                    addChatToHistory(currentTaskId, messageText, Date.now());
                }
                
                const files = selectedFiles.map(f => f.file);
                const validation = validateFiles(files);
                if (!validation.valid) {
                    alert(validation.errors.join('\n'));
                    return;
                }
                
                addMessageToChat('user', messageText, selectedFiles);
                
                messageInput.value = '';
                autoResizeTextarea();
                const filesToSend = [...selectedFiles];
                selectedFiles = [];
                fileInput.value = '';
                updateFileList();
                
                setWaitingState(true);
                
                const formData = new FormData();
                formData.append('role', 'user');
                formData.append('content', messageText || '');
                formData.append('{{CSRF_NAME}}', '{{CSRF_TOKEN}}');
                
                filesToSend.forEach((fileData, index) => {
                    formData.append('files[]', fileData.file);
                });
                
                cleanupObjectUrls();
                
                const xhr = new XMLHttpRequest();
                
                xhr.upload.onprogress = (e) => {
                    if (e.lengthComputable) {
                        const percent = (e.loaded / e.total) * 100;
                        uploadProgress.style.width = percent + '%';
                    }
                };
                
                xhr.onload = () => {
                    uploadProgress.style.width = '0';
                    if (xhr.status >= 200 && xhr.status < 300) {
                        const data = JSON.parse(xhr.responseText);
                        if (data.status === 'accepted') {
                            startPolling(currentTaskId);
                        }
                    } else {
                        throw new Error(`HTTP error! status: ${xhr.status}`);
                    }
                };
                
                xhr.onerror = () => {
                    uploadProgress.style.width = '0';
                    console.error('Ошибка отправки');
                    //statusDiv.textContent = '⚠️ Не удалось отправить сообщение';
                    setWaitingState(false);
                };
                
                xhr.open('POST', CONFIG.API_URL + `user/${currentTaskId}/`);
                xhr.setRequestHeader(CONFIG.API_AUTH_HEADER, CONFIG.API_TOKEN);
                xhr.send(formData);
            }

            // --- Управление видимостью боковой панели ---
            function toggleSidebar(show) {
                isSidebarVisible = show;
                if (show) {
                    sidebar.classList.add('visible');
                    showSidebarBtn.style.display = 'none';
                } else {
                    sidebar.classList.remove('visible');
                    showSidebarBtn.style.display = 'block';
                }
            }

            // --- Обработчики событий истории ---
            function historyClickHandler(e) {
                const chatId = this.getAttribute('data-chat-id');
                if (chatId) {
                    // Убираем активный класс со всех
                    document.querySelectorAll('.history-item').forEach(item => {
                        item.classList.remove('active');
                    });
                    // Добавляем активный класс текущему
                    this.classList.add('active');
                    // Загружаем историю диалога
                    loadDialogHistory(chatId);
                }
            }

            function setupHistoryClickHandlers() {
                const historyItems = document.querySelectorAll('.history-item');
                historyItems.forEach(item => {
                    item.removeEventListener('click', historyClickHandler);
                    item.addEventListener('click', historyClickHandler);
                });
            }

            // --- Обработчики событий ---
            newTaskBtnSidebar.addEventListener('click', createNewTask);
            
            sendButton.addEventListener('click', sendMessage);
            
            messageInput.addEventListener('input', () => {
                autoResizeTextarea();
            });
            
            messageInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    if (!sendButton.disabled) {
                        sendMessage();
                    }
                }
            });

            hideSidebarBtn.addEventListener('click', () => toggleSidebar(false));
            showSidebarBtn.addEventListener('click', () => toggleSidebar(true));
            logChatBtn.addEventListener('click', loadChatLog);
            
            closeLogModal.addEventListener('click', () => {
                logModal.style.display = 'none';
                logContent.textContent = '';
                logIdDisplay.textContent = '';
            });
            
            window.addEventListener('click', (e) => {
                if (e.target === logModal) {
                    logModal.style.display = 'none';
                    logContent.textContent = '';
                    logIdDisplay.textContent = '';
                }
            });

            // --- Drag & Drop ---
            inputArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                if (!fileButton.disabled) {
                    inputArea.classList.add('drag-over');
                }
            });

            inputArea.addEventListener('dragleave', () => {
                inputArea.classList.remove('drag-over');
            });

            inputArea.addEventListener('drop', async (e) => {
                e.preventDefault();
                inputArea.classList.remove('drag-over');
                
                if (fileButton.disabled) {
                    alert('Файлы недоступны в текущем состоянии');
                    return;
                }
                
                const droppedFiles = Array.from(e.dataTransfer.files);
                if (droppedFiles.length === 0) return;
                
                try {
                    const processedFiles = await readFiles(droppedFiles);
                    selectedFiles = processedFiles;
                    updateFileList();
                } catch (error) {
                    alert(error.message);
                }
            });

            // --- Обработка файлов ---
            if (fileButton) {
                fileButton.addEventListener('click', () => {
                    fileInput.click();
                });
            }
            
            fileInput.addEventListener('change', async (e) => {
                const files = Array.from(e.target.files);
                if (files.length === 0) {
                    selectedFiles = [];
                    cleanupObjectUrls();
                    updateFileList();
                    return;
                }
                
                try {
                    const processedFiles = await readFiles(files);
                    selectedFiles = processedFiles;
                    updateFileList();
                } catch (error) {
                    alert(error.message);
                    fileInput.value = '';
                }
            });

            // --- Голосовой ввод ---
            if (voiceSupported) {
                voiceButton.addEventListener('click', () => {
                    if (isRecording) {
                        recognition.stop();
                        stopRecording();
                    } else {
                        try {
                            recognition.start();
                            isRecording = true;
                            voiceButton.classList.add('recording');
                            voiceButton.textContent = '⏹';
                            setVoiceStatus('🎤 Говорите...');
                        } catch (e) {
                            console.error('Ошибка запуска распознавания:', e);
                            setVoiceStatus('❌ Ошибка запуска');
                        }
                    }
                });
            } else {
                voiceButton.classList.add('hidden');
                voiceStatus.textContent = 'Голосовой ввод не поддерживается';
            }

            // --- Инициализация ---
            function init() {
                if (!features.fileReader) {
                    fileButton.style.display = 'none';
                    const unsupportedMsg = document.createElement('div');
                    unsupportedMsg.className = 'unsupported-message';
                    unsupportedMsg.textContent = '⚠️ Ваш браузер не поддерживает загрузку файлов';
                    document.getElementById('fileRow').appendChild(unsupportedMsg);
                }
                
                // Устанавливаем обработчики для истории
                setupHistoryClickHandlers();
                
                // Автоматически создаем новый чат при загрузке
                createNewTask();
                
                if (!features.fetch || !features.promise) {
                    addMessageToChat('error', '⚠️ Ваш браузер устарел. Некоторые функции могут не работать.');
                }
            }
            
            init();
        })();
    </script>
</body>
</html>