Blame for script.js

// ============================================================
// HBB Chat — script.js (полный, с фиксом Markdown)
// ============================================================

// ============ СОСТОЯНИЕ ============
let chats = [];
let currentChatId = null;
let isStreaming = false;
let abortController = null;
let attachedFiles = [];
let currentChatAtStart = null;
let searchQuery = '';

const DEFAULTS = {
    backend: 'llamacpp',
    apiUrl: 'http://localhost:8080',
    userName: 'Вы',
    assistantName: 'Ассистент',
    userAvatar: 'user',
    assistantAvatar: 'assistant',
    systemPrompt: 'Ты — полезный ассистент. Отвечай кратко и по делу.',
    temperature: 0.8, top_p: 0.9, top_k: 40,
    repeat_penalty: 1.1, num_predict: 512, num_ctx: 4096,
    imgMinTokens: 256,
    imgMaxSide: 1280, imgQuality: 0.85,
    theme: 'dark',
    persona: 'none',
    suggestEnabled: true,
    suggestModel: 'gemma-3-1b-it',
    suggestApiUrl: 'http://localhost:8080',
    suggestCount: 3
};

const PERSONAS = {
    none: '',
    enthusiastic: 'Ты — восторженный и энергичный помощник. Используй яркие выражения, эмодзи и подбадривай пользователя. ',
    coder: 'Ты — опытный программист. Отвечай технически точно, приводи примеры кода, указывай на подводные камни. ',
    explainer: 'Ты — терпеливый объясняющий помощник. Разжёвывай каждую деталь, приводи аналогии, не предполагай, что пользователь знает контекст. ',
    sarcastic: 'Ты — саркастичный помощник. Отвечай с лёгкой иронией, но по делу. Не переходи границы грубости. ',
    teacher: 'Ты — терпеливый учитель. Задавай наводящие вопросы, помогай пользователю дойти до ответа самому. '
};

const $ = id => document.getElementById(id);
const chatInner = $('chat-inner');
const chatArea = $('chat-area');
const welcome = $('welcome');
const lightbox = $('lightbox');
const lightboxImg = $('lightbox-img');

// ============ ИКОНКИ ============
const ICON_PATH = 'icons/';
function icon(name, alt = '') {
    const img = document.createElement('img');
    img.src = ICON_PATH + name + '.png';
    img.alt = alt;
    img.className = 'icon';
    img.draggable = false;
    return img;
}

// ============ MARKDOWN ============
function normalizeMarkdown(text) {
    return text.replace(/^(#{1,6})([^\s#])/gm, '$1 $2');
}
function renderMarkdown(text) {
    if (typeof marked === 'undefined') return text;
    return DOMPurify.sanitize(marked.parse(normalizeMarkdown(text)));
}
function enhanceCodeBlocks(container) {
    container.querySelectorAll('pre').forEach(pre => {
        if (pre.parentElement.classList.contains('code-block-wrapper')) return;
        const code = pre.querySelector('code');
        if (!code) return;
        const lang = [...code.classList].find(c => c.startsWith('language-'))?.replace('language-', '') || 'code';
        const wrapper = document.createElement('div');
        wrapper.className = 'code-block-wrapper';
        const header = document.createElement('div');
        header.className = 'code-header';
        const langSpan = document.createElement('span');
        langSpan.className = 'lang';
        langSpan.textContent = lang;
        header.appendChild(langSpan);
        const copyBtn = document.createElement('button');
        copyBtn.className = 'copy-btn';
        copyBtn.appendChild(icon('copy', 'Копировать'));
        copyBtn.appendChild(document.createTextNode(' Копировать'));
        copyBtn.onclick = () => {
            navigator.clipboard.writeText(code.textContent).then(() => {
                copyBtn.innerHTML = '';
                copyBtn.appendChild(icon('check', 'Скопировано'));
                copyBtn.appendChild(document.createTextNode(' Скопировано'));
                copyBtn.classList.add('copied');
                setTimeout(() => {
                    copyBtn.innerHTML = '';
                    copyBtn.appendChild(icon('copy', 'Копировать'));
                    copyBtn.appendChild(document.createTextNode(' Копировать'));
                    copyBtn.classList.remove('copied');
                }, 1500);
            });
        };
        header.appendChild(copyBtn);
        pre.parentNode.insertBefore(wrapper, pre);
        wrapper.appendChild(header);
        wrapper.appendChild(pre);
        if (window.hljs) hljs.highlightElement(code);
    });
}

// ============ ТЕМА ============
function currentTheme() {
    return document.documentElement.getAttribute('data-theme') || 'dark';
}
function toggleTheme() {
    const newTheme = currentTheme() === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('hbb-theme', newTheme);
    const themeBtn = document.querySelector('.theme-btn');
    if (themeBtn) {
        themeBtn.innerHTML = '';
        themeBtn.appendChild(icon(newTheme === 'dark' ? 'theme-dark' : 'theme-light', 'Тема'));
    }
    const hljsTheme = $('hljs-theme');
    if (hljsTheme) {
        hljsTheme.href = newTheme === 'dark'
            ? 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css'
            : 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-light.min.css';
    }
}
function loadTheme() {
    const saved = localStorage.getItem('hbb-theme') || 'dark';
    document.documentElement.setAttribute('data-theme', saved);
}

// ============ НАСТРОЙКИ ============
function loadSettings() {
    const saved = JSON.parse(localStorage.getItem('hbb-settings') || '{}');
    const s = { ...DEFAULTS, ...saved };
    $('backend-select').value = s.backend;
    $('api-url').value = s.apiUrl;
    $('user-name').value = s.userName;
    $('assistant-name').value = s.assistantName;
    $('user-avatar').value = s.userAvatar;
    $('assistant-avatar').value = s.assistantAvatar;
    $('system-prompt').value = s.systemPrompt;
    $('temp').value = s.temperature;
    $('topp').value = s.top_p;
    $('topk').value = s.top_k;
    $('reppen').value = s.repeat_penalty;
    $('numpredict').value = s.num_predict;
    $('numctx').value = s.num_ctx;
    $('img-min-tokens').value = s.imgMinTokens;
    $('img-max-side').value = s.imgMaxSide;
    $('img-quality').value = s.imgQuality;
    if ($('persona-select')) $('persona-select').value = s.persona || 'none';
    if ($('suggest-enabled')) $('suggest-enabled').checked = s.suggestEnabled !== false;
    if ($('suggest-model')) $('suggest-model').value = s.suggestModel || 'gemma-3-1b-it';
    if ($('suggest-api-url')) $('suggest-api-url').value = s.suggestApiUrl || s.apiUrl || 'http://localhost:8080';
    if ($('suggest-count')) $('suggest-count').value = s.suggestCount || 3;
    if ($('suggest-count-val')) $('suggest-count-val').textContent = $('suggest-count').value;
    updateSliderLabels();
}
function saveSettings() {
    const s = {
        backend: $('backend-select').value,
        apiUrl: $('api-url').value.replace(/\/$/, ''),
        userName: $('user-name').value.trim() || 'Вы',
        assistantName: $('assistant-name').value.trim() || 'Ассистент',
        userAvatar: $('user-avatar').value.trim() || 'user',
        assistantAvatar: $('assistant-avatar').value.trim() || 'assistant',
        systemPrompt: $('system-prompt').value,
        temperature: parseFloat($('temp').value),
        top_p: parseFloat($('topp').value),
        top_k: parseInt($('topk').value),
        repeat_penalty: parseFloat($('reppen').value),
        num_predict: parseInt($('numpredict').value),
        num_ctx: parseInt($('numctx').value),
        imgMinTokens: parseInt($('img-min-tokens').value) || 256,
        imgMaxSide: parseInt($('img-max-side').value) || 1280,
        imgQuality: parseFloat($('img-quality').value) || 0.85,
        theme: currentTheme(),
        persona: $('persona-select') ? $('persona-select').value : 'none',
        suggestEnabled: $('suggest-enabled') ? $('suggest-enabled').checked : true,
        suggestModel: $('suggest-model') ? $('suggest-model').value.trim() : 'gemma-3-1b-it',
        suggestApiUrl: $('suggest-api-url') ? $('suggest-api-url').value.replace(/\/$/, '') : '',
        suggestCount: $('suggest-count') ? parseInt($('suggest-count').value) : 3
    };
    localStorage.setItem('hbb-settings', JSON.stringify(s));
    closeSettings();
    renderCurrentChat();
    checkConnection();
}
function resetSettings() {
    if (!confirm('Сбросить все настройки?')) return;
    localStorage.removeItem('hbb-settings');
    loadSettings();
    renderCurrentChat();
    closeSettings();
}
function updateSliderLabels() {
    const map = { 'temp-val': 'temp', 'topp-val': 'topp', 'topk-val': 'topk', 'rep-val': 'reppen', 'np-val': 'numpredict', 'ctx-val': 'numctx', 'img-q-val': 'img-quality' };
    for (const [labelId, inputId] of Object.entries(map)) {
        const label = $(labelId), input = $(inputId);
        if (label && input) label.textContent = input.value;
    }
}
['temp','topp','topk','reppen','numpredict','numctx','img-quality'].forEach(id => {
    const el = $(id);
    if (el) el.addEventListener('input', updateSliderLabels);
});
const suggestCountEl = $('suggest-count');
if (suggestCountEl) {
    suggestCountEl.addEventListener('input', () => {
        if ($('suggest-count-val')) $('suggest-count-val').textContent = suggestCountEl.value;
    });
}
function openSettings() { $('settings-overlay').classList.add('visible'); }
function closeSettings() { $('settings-overlay').classList.remove('visible'); }
function getSettings() { return JSON.parse(localStorage.getItem('hbb-settings') || '{}'); }
function getPersonaPrefix() {
    const s = getSettings();
    return PERSONAS[s.persona || 'none'] || '';
}

// ============ API ============
async function getApiUrl() { return $('api-url').value.replace(/\/$/, ''); }
async function getBackend() { return $('backend-select').value; }

async function checkConnection() {
    const dot = $('status-dot'), txt = $('status-text');
    if (!dot || !txt) return;
    try {
        const url = await getApiUrl();
        const backend = await getBackend();
        let endpoint = backend === 'ollama' ? `${url}/api/tags` : `${url}/v1/models`;
        const res = await fetch(endpoint);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        dot.classList.add('online');
        txt.textContent = backend === 'ollama' ? 'Ollama подключён' : 'llama.cpp подключён';
    } catch (e) {
        dot.classList.remove('online');
        txt.textContent = 'Нет соединения';
    }
}

// ============ ФАЙЛЫ ============
function fileToDataUrl(file) { return new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = rej; r.readAsDataURL(file); }); }
function fileToText(file) { return new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = rej; r.readAsText(file); }); }
function loadImage(src) { return new Promise((res, rej) => { const i = new Image(); i.onload = () => res(i); i.onerror = rej; i.src = src; }); }

async function processImage(file) {
    const maxSide = parseInt($('img-max-side').value) || 1280;
    const quality = parseFloat($('img-quality').value) || 0.85;
    const dataUrl = await fileToDataUrl(file);
    const img = await loadImage(dataUrl);
    let { width, height } = img;
    const longSide = Math.max(width, height);
    let needResize = longSide > maxSide;
    const isPng = file.type === 'image/png';
    if (!needResize && isPng && file.size < 900_000) return { dataUrl, mime: file.type, name: file.name, size: file.size, isImage: true };
    if (needResize) { const k = maxSide / longSide; width = Math.round(width * k); height = Math.round(height * k); }
    const canvas = document.createElement('canvas');
    canvas.width = width; canvas.height = height;
    canvas.getContext('2d').drawImage(img, 0, 0, width, height);
    const outMime = isPng ? 'image/png' : 'image/jpeg';
    const outUrl = isPng ? canvas.toDataURL('image/png') : canvas.toDataURL('image/jpeg', quality);
    const approxSize = Math.round((outUrl.length - outUrl.indexOf(',') - 1) * 3 / 4);
    return { dataUrl: outUrl, mime: outMime, name: file.name, size: approxSize, isImage: true };
}
async function processFile(file) {
    if (file.type.startsWith('image/')) return await processImage(file);
    const textExts = ['.txt','.md','.json','.js','.py','.html','.css','.csv','.xml','.yaml','.yml','.log','.sh','.bat','.c','.cpp','.h','.java','.rs','.go','.ts'];
    const isText = file.type.startsWith('text/') || textExts.some(e => file.name.toLowerCase().endsWith(e));
    if (isText) {
        const text = await fileToText(file);
        return { dataUrl: null, mime: file.type || 'text/plain', name: file.name, size: file.size, isImage: false, textContent: text };
    }
    return { dataUrl: null, mime: file.type || 'application/octet-stream', name: file.name, size: file.size, isImage: false, textContent: null };
}
async function addFiles(files) {
    for (const f of files) { try { attachedFiles.push(await processFile(f)); } catch (e) { console.error(e); } }
    renderAttachments();
}
function renderAttachments() {
    const el = $('attachments-preview');
    if (!el) return;
    el.innerHTML = '';
    if (attachedFiles.length === 0) { el.classList.remove('visible'); $('attach-btn').classList.remove('has-files'); return; }
    el.classList.add('visible');
    $('attach-btn').classList.add('has-files');
    attachedFiles.forEach((f, idx) => {
        const div = document.createElement('div');
        div.className = 'att-preview-item' + (f.isImage ? '' : ' file');
        if (f.isImage) { const img = document.createElement('img'); img.src = f.dataUrl; div.appendChild(img); }
        else { const ic = document.createElement('div'); ic.className = 'icon'; ic.textContent = '📄'; div.appendChild(ic); }
        const rm = document.createElement('button'); rm.className = 'remove'; rm.textContent = '×';
        rm.onclick = () => { attachedFiles.splice(idx, 1); renderAttachments(); };
        div.appendChild(rm); el.appendChild(div);
    });
}
function openLightbox(src) { lightboxImg.src = src; lightbox.classList.add('visible'); }
function closeLightbox() { lightbox.classList.remove('visible'); lightboxImg.src = ''; }

// ============ СИСТЕМА ЧАТОВ ============
function loadChats() {
    chats = JSON.parse(localStorage.getItem('hbb-chats') || '[]');
    chats = chats.filter(c => c.messages && c.messages.length > 0);
    if (chats.length === 0) createNewChat(true);
    else { currentChatId = chats[0].id; renderChatList(); renderCurrentChat(); }
}
function saveChats() {
    try { localStorage.setItem('hbb-chats', JSON.stringify(chats)); }
    catch (e) { console.warn('Не удалось сохранить чаты:', e.message); }
}
function createNewChat(silent) {
    abortStreaming();
    const chat = { id: 'chat_' + Date.now(), title: 'Новый чат', messages: [], createdAt: Date.now() };
    chats.unshift(chat);
    currentChatId = chat.id;
    saveChats(); renderChatList(); renderCurrentChat();
    if (!silent && $('user-input')) $('user-input').focus();
}
function switchChat(id) {
    abortStreaming();
    currentChatId = id;
    renderChatList();
    renderCurrentChat();
}
function deleteChat(id, e) {
    e.stopPropagation();
    if (!confirm('Удалить этот чат?')) return;
    chats = chats.filter(c => c.id !== id);
    if (currentChatId === id) {
        if (chats.length === 0) createNewChat(true);
        else { currentChatId = chats[0].id; renderCurrentChat(); }
    }
    saveChats(); renderChatList();
}
function renameChat(id) {
    const chat = chats.find(c => c.id === id);
    if (!chat) return;
    const newTitle = prompt('Новое название:', chat.title);
    if (newTitle && newTitle.trim()) {
        chat.title = newTitle.trim();
        saveChats(); renderChatList();
        if (currentChatId === id) $('current-title').textContent = chat.title;
    }
}
function renameCurrentChat() { if (currentChatId) renameChat(currentChatId); }
function getCurrentChat() { return chats.find(c => c.id === currentChatId); }

function renderChatList() {
    const el = $('chat-list'); if (!el) return;
    el.innerHTML = '';
    const q = searchQuery.toLowerCase();
    chats.filter(c => !q || c.title.toLowerCase().includes(q)).forEach(c => {
        const div = document.createElement('div');
        div.className = 'chat-item' + (c.id === currentChatId ? ' active' : '');
        div.onclick = () => switchChat(c.id);
        const title = document.createElement('span');
        title.className = 'title'; title.textContent = c.title;
        title.ondblclick = (e) => { e.stopPropagation(); renameChat(c.id); };
        div.appendChild(title);
        const del = document.createElement('button'); del.className = 'del';
        del.appendChild(icon('delete', 'Удалить'));
        del.onclick = (e) => deleteChat(c.id, e);
        div.appendChild(del); el.appendChild(div);
    });
}
function filterChats() {
    searchQuery = $('search-input').value;
    renderChatList();
}
function renderCurrentChat() {
    const chat = getCurrentChat(); if (!chat) return;
    $('current-title').textContent = chat.title;
    chatInner.innerHTML = '';
    if (chat.messages.length === 0) { welcome.style.display = 'flex'; chatInner.style.display = 'none'; }
    else {
        welcome.style.display = 'none'; chatInner.style.display = 'flex';
        chat.messages.forEach(m => addMessageToDOM(m.role, m.content, m.opts || {}, false));
        chatArea.scrollTop = chatArea.scrollHeight;
    }
}

// ============ СООБЩЕНИЯ ============
function addMessageToDOM(role, text, opts = {}, save = true) {
    welcome.style.display = 'none'; chatInner.style.display = 'flex';
    const s = getSettings();
    const div = document.createElement('div');
    div.className = 'message ' + role;
    const avatar = document.createElement('div'); avatar.className = 'avatar';
    if (role === 'user') { avatar.appendChild(icon(s.userAvatar || 'user', 'Вы')); }
    else { avatar.appendChild(icon(s.assistantAvatar || 'assistant', 'AI')); }
    div.appendChild(avatar);
    const body = document.createElement('div'); body.className = 'body';
    const name = document.createElement('div'); name.className = 'name';
    name.textContent = role === 'user' ? (s.userName || 'Вы') : (s.assistantName || 'Ассистент');
    
    if (role === 'ai') {
        const actions = document.createElement('div');
        actions.className = 'actions';
        const shareBtn = document.createElement('button');
        shareBtn.appendChild(icon('share', 'Поделиться'));
        shareBtn.title = 'Скачать в ShareGPT';
        shareBtn.onclick = () => shareMessage(div);
        actions.appendChild(shareBtn);
        const regenBtn = document.createElement('button');
        regenBtn.appendChild(icon('regenerate', 'Перегенерировать'));
        regenBtn.title = 'Перегенерировать';
        regenBtn.onclick = () => regenerateMessage(div);
        actions.appendChild(regenBtn);
        const copyBtn = document.createElement('button');
        copyBtn.appendChild(icon('copy', 'Копировать'));
        copyBtn.title = 'Копировать';
        copyBtn.onclick = () => navigator.clipboard.writeText(text);
        actions.appendChild(copyBtn);
        name.appendChild(actions);
    }
    
    body.appendChild(name);
    if (opts.images?.length || opts.files?.length) {
        const att = document.createElement('div'); att.className = 'msg-attachments';
        (opts.images || []).forEach(im => { const img = document.createElement('img'); img.src = im.dataUrl; img.onclick = () => openLightbox(im.dataUrl); att.appendChild(img); });
        (opts.files || []).forEach(f => { const chip = document.createElement('div'); chip.className = 'file-chip'; chip.textContent = '📄 ' + f.name; att.appendChild(chip); });
        body.appendChild(att);
    }
    const content = document.createElement('div'); content.className = 'content';
    if (role === 'ai') { content.innerHTML = renderMarkdown(text); enhanceCodeBlocks(content); }
    else content.textContent = text;
    body.appendChild(content); div.appendChild(body);
    chatInner.appendChild(div); chatArea.scrollTop = chatArea.scrollHeight;
    return { div, content };
}
function updateMessageDOM(el, text) {
    if (!el || !el.content) return;
    el.content.innerHTML = renderMarkdown(text);
    enhanceCodeBlocks(el.content);
    chatArea.scrollTop = chatArea.scrollHeight;
}

function abortStreaming() {
    if (isStreaming && abortController) {
        abortController.abort();
        isStreaming = false;
        abortController = null;
    }
}

function buildContentForApi(msg) {
    const parts = [{ type: 'text', text: msg.content || '' }];
    (msg.opts?.images || []).forEach(im => parts.push({ type: 'image_url', image_url: { url: im.dataUrl } }));
    (msg.opts?.files || []).forEach(f => {
        if (f.textContent) parts.push({ type: 'text', text: `\n\n<file name="${f.name}">\n${f.textContent}\n</file>` });
        else parts.push({ type: 'text', text: `\n\n<file name="${f.name}" size="${f.size}">[бинарный]</file>` });
    });
    return parts;
}

// ============ SHAREGPT / ПЕРЕГЕНЕРАЦИЯ ============
function shareMessage(el) {
    const chat = getCurrentChat(); if (!chat) return;
    const allMsgs = [...chatInner.querySelectorAll('.message')];
    const idx = allMsgs.indexOf(el); if (idx === -1) return;
    let userText = '';
    for (let i = idx - 1; i >= 0; i--) {
        if (allMsgs[i].classList.contains('user')) {
            const c = allMsgs[i].querySelector('.content');
            userText = c ? c.textContent : '';
            break;
        }
    }
    const aiContent = el.querySelector('.content');
    const aiText = aiContent ? aiContent.textContent : '';
    const sharegpt = { conversations: [{ from: 'human', value: userText }, { from: 'gpt', value: aiText }] };
    const blob = new Blob([JSON.stringify(sharegpt, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = 'sharegpt-' + Date.now() + '.json';
    a.click(); URL.revokeObjectURL(url);
}
async function regenerateMessage(el) {
    const chat = getCurrentChat(); if (!chat) return;
    const allMsgs = [...chatInner.querySelectorAll('.message')];
    const idx = allMsgs.indexOf(el); if (idx === -1) return;
    let userMsgIdx = -1;
    for (let i = idx - 1; i >= 0; i--) {
        if (allMsgs[i].classList.contains('user')) { userMsgIdx = i; break; }
    }
    if (userMsgIdx === -1) return;
    const userMsg = chat.messages[userMsgIdx];
    chat.messages = chat.messages.slice(0, userMsgIdx + 1);
    for (let i = allMsgs.length - 1; i >= idx; i--) allMsgs[i].remove();
    $('user-input').value = typeof userMsg.content === 'string' ? userMsg.content : '';
    attachedFiles = [];
    if (userMsg.opts?.images) attachedFiles.push(...userMsg.opts.images);
    if (userMsg.opts?.files) attachedFiles.push(...userMsg.opts.files);
    renderAttachments();
    sendMessage();
}

// ============ ПРЕДЛОЖКА ============
async function generateSuggestions(chat) {
    const s = getSettings();
    if (s.suggestEnabled === false) return;
    const count = parseInt($('suggest-count')?.value) || 3;
    const suggestModel = s.suggestModel || $('suggest-model')?.value || 'local';
    const suggestUrl = (s.suggestApiUrl || s.apiUrl || 'http://localhost:8080').replace(/\/$/, '');
    const backend = s.backend || 'llamacpp';
    const recent = chat.messages.slice(-3).map(m => {
        const role = m.role === 'user' ? 'User' : 'Assistant';
        const text = typeof m.content === 'string' ? m.content : '[с файлами]';
        return `${role}: ${text.slice(0, 200)}`;
    }).join('\n');
    const prompt = `На основе диалога предложи ${count} коротких варианта следующего вопроса пользователя. Только вопросы, каждый с новой строки, без нумерации и лишних слов.\n\nДиалог:\n${recent}\n\nВарианты:`;
    let endpoint, payload;
    if (backend === 'ollama') {
        endpoint = `${suggestUrl}/api/chat`;
        payload = { model: suggestModel, messages: [{ role: 'user', content: prompt }], stream: false, options: { temperature: 0.9, num_predict: 150 } };
    } else {
        endpoint = `${suggestUrl}/v1/chat/completions`;
        payload = { model: suggestModel, messages: [{ role: 'user', content: prompt }], stream: false, temperature: 0.9, max_tokens: 150 };
    }
    try {
        const res = await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
        if (!res.ok) return;
        const json = await res.json();
        const text = backend === 'ollama' ? (json.message?.content || '') : (json.choices?.[0]?.message?.content || '');
        const suggestions = text.split('\n').map(l => l.replace(/^[\d\-\*\.\)]+\s*/, '').trim()).filter(l => l.length > 5 && l.length < 200).slice(0, count);
        if (suggestions.length > 0) renderSuggestions(suggestions);
    } catch (e) { console.warn('Suggestions failed:', e.message); }
}
function renderSuggestions(items) {
    const old = document.querySelector('.suggestions-bar');
    if (old) old.remove();
    const bar = document.createElement('div');
    bar.className = 'suggestions-bar';
    items.forEach(text => {
        const btn = document.createElement('button');
        btn.className = 'suggestion-btn';
        btn.textContent = text;
        btn.onclick = () => { $('user-input').value = text; $('user-input').focus(); bar.remove(); };
        bar.appendChild(btn);
    });
    const inputWrap = document.querySelector('.input-wrap');
    if (inputWrap) inputWrap.insertBefore(bar, inputWrap.firstChild);
}

// ============ ОТПРАВКА ============
async function sendMessage() {
    if (isStreaming) { abortStreaming(); return; }
    const text = $('user-input').value.trim();
    if (!text && attachedFiles.length === 0) return;
    const chat = getCurrentChat(); if (!chat) return;

    let contentForApi;
    if (attachedFiles.length > 0) {
        contentForApi = [{ type: 'text', text: text || '' }];
        for (const f of attachedFiles) {
            if (f.isImage) contentForApi.push({ type: 'image_url', image_url: { url: f.dataUrl } });
            else if (f.textContent) contentForApi.push({ type: 'text', text: `\n\n<file name="${f.name}">\n${f.textContent}\n</file>` });
            else contentForApi.push({ type: 'text', text: `\n\n<file name="${f.name}" size="${f.size}">[бинарный]</file>` });
        }
    } else contentForApi = text;

    const userMsg = { role: 'user', content: text, opts: { images: attachedFiles.filter(f => f.isImage), files: attachedFiles.filter(f => !f.isImage) } };
    chat.messages.push(userMsg);

    if (chat.title === 'Новый чат' && text) {
        chat.title = text.slice(0, 40) + (text.length > 40 ? '...' : '');
        saveChats(); renderChatList(); $('current-title').textContent = chat.title;
    }

    addMessageToDOM('user', text, userMsg.opts, false);
    $('user-input').value = ''; $('user-input').style.height = 'auto';
    attachedFiles = []; renderAttachments();

    const s = getSettings();
    const persona = getPersonaPrefix();
    const systemPrompt = (persona + (s.systemPrompt || $('system-prompt').value)).trim();
    const messages = [];
    if (systemPrompt) messages.push({ role: 'system', content: systemPrompt });
    for (const m of chat.messages) {
        if (m.role === 'user') messages.push({ role: 'user', content: m.opts?.images?.length || m.opts?.files?.length ? buildContentForApi(m) : m.content });
        else messages.push({ role: 'assistant', content: m.content });
    }

    const backend = s.backend || 'llamacpp';
    const url = (s.apiUrl || 'http://localhost:8080').replace(/\/$/, '');
    let endpoint, payload;
    if (backend === 'ollama') {
        endpoint = `${url}/api/chat`;
        payload = { model: s.suggestModel || 'local', messages, stream: true, options: { temperature: parseFloat($('temp').value), top_p: parseFloat($('topp').value), top_k: parseInt($('topk').value), repeat_penalty: parseFloat($('reppen').value), num_predict: parseInt($('numpredict').value) } };
    } else {
        endpoint = `${url}/v1/chat/completions`;
        payload = { model: 'local', messages, stream: true, stream_options: { include_usage: true }, temperature: parseFloat($('temp').value), top_p: parseFloat($('topp').value), top_k: parseInt($('topk').value), repeat_penalty: parseFloat($('reppen').value), max_tokens: parseInt($('numpredict').value) };
    }

    const aiMsg = addMessageToDOM('ai', '', {}, false);
    if (!aiMsg || !aiMsg.content) return;
    aiMsg.content.classList.add('cursor');

    isStreaming = true;
    currentChatAtStart = currentChatId;
    const sendBtn = $('send-btn'); sendBtn.textContent = ''; sendBtn.appendChild(icon('stop', 'Стоп')); sendBtn.classList.add('stop');
    abortController = new AbortController();
    const startTime = performance.now();
    let fullText = '', tokenCount = 0;

    try {
        const response = await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, signal: abortController.signal, body: JSON.stringify(payload) });
        if (!response.ok) throw new Error(`HTTP ${response.status}: ${await response.text()}`);
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let buffer = '';
        while (true) {
            const { done, value } = await reader.read();
            if (done) break;
            if (currentChatId !== currentChatAtStart) { abortController.abort(); break; }
            buffer += decoder.decode(value, { stream: true });
            const lines = buffer.split('\n'); buffer = lines.pop();
            for (const raw of lines) {
                const line = raw.trim();
                if (!line || !line.startsWith('data:')) continue;
                const data = line.slice(5).trim();
                if (data === '[DONE]') continue;
                try {
                    const json = JSON.parse(data);
                    let delta = '';
                    if (backend === 'ollama') delta = json.message?.content || '';
                    else { delta = json.choices?.[0]?.delta?.content || ''; if (json.usage?.completion_tokens) tokenCount = json.usage.completion_tokens; }
                    if (delta) { fullText += delta; updateMessageDOM(aiMsg, fullText); }
                } catch (e) {}
            }
        }
        aiMsg.content.classList.remove('cursor');
        if (fullText && fullText.trim()) { chat.messages.push({ role: 'assistant', content: fullText }); saveChats(); }
        else { aiMsg.div.remove(); }
        const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);
        const tps = tokenCount > 0 ? (tokenCount / elapsed).toFixed(1) : '—';
        $('token-info').textContent = tokenCount > 0 ? `${tokenCount} токенов · ${elapsed}s · ${tps} tok/s` : `${elapsed}s`;
        generateSuggestions(chat);
    } catch (e) {
        aiMsg.content.classList.remove('cursor');
        if (e.name === 'AbortError') {
            updateMessageDOM(aiMsg, fullText + '\n\n[прервано]');
            if (fullText && fullText.trim()) { chat.messages.push({ role: 'assistant', content: fullText }); saveChats(); }
            else { aiMsg.div.remove(); }
        } else { updateMessageDOM(aiMsg, `❌ Ошибка: ${e.message}`); }
    } finally {
        isStreaming = false;
        sendBtn.textContent = ''; sendBtn.appendChild(icon('send', 'Отправить')); sendBtn.classList.remove('stop');
        abortController = null;
    }
}

function toggleSidebar() { $('sidebar').classList.toggle('collapsed'); }

// ============ ЭКСПОРТ/ИМПОРТ ============
function exportChats() {
    const data = JSON.stringify(chats, null, 2);
    const blob = new Blob([data], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = 'hbb-chats-' + Date.now() + '.json';
    a.click(); URL.revokeObjectURL(url);
}
function importChats() {
    const inp = document.createElement('input');
    inp.type = 'file'; inp.accept = '.json';
    inp.onchange = async e => {
        const file = e.target.files[0]; if (!file) return;
        try {
            const text = await file.text();
            const imported = JSON.parse(text);
            if (!Array.isArray(imported)) throw new Error('Не массив');
            chats = [...imported, ...chats];
            saveChats(); renderChatList();
            if (chats.length > 0) { currentChatId = chats[0].id; renderCurrentChat(); }
        } catch (err) { alert('Ошибка импорта: ' + err.message); }
    };
    inp.click();
}

// ============ ОБРАБОТЧИКИ ============
function setupHandlers() {
    const userInput = $('user-input');
    if (userInput) {
        userInput.addEventListener('keydown', e => {
            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey || !e.shiftKey)) { e.preventDefault(); sendMessage(); }
        });
        userInput.addEventListener('input', () => {
            userInput.style.height = 'auto';
            userInput.style.height = Math.min(userInput.scrollHeight, 200) + 'px';
        });
        userInput.addEventListener('paste', async e => {
            const items = e.clipboardData?.items; if (!items) return;
            const files = [];
            for (const it of items) { if (it.type.startsWith('image/')) { const f = it.getAsFile(); if (f) files.push(f); } }
            if (files.length) { e.preventDefault(); await addFiles(files); }
        });
    }
    const sendBtn = $('send-btn');
    if (sendBtn) sendBtn.addEventListener('click', sendMessage);
    const attachBtn = $('attach-btn');
    if (attachBtn) attachBtn.addEventListener('click', () => {
        const inp = document.createElement('input'); inp.type = 'file'; inp.multiple = true;
        inp.onchange = async e => { await addFiles(e.target.files); }; inp.click();
    });
    ['dragenter','dragover'].forEach(ev => document.addEventListener(ev, e => e.preventDefault()));
    document.addEventListener('drop', async e => { e.preventDefault(); if (e.dataTransfer?.files?.length) await addFiles(e.dataTransfer.files); });
    document.addEventListener('keydown', e => {
        if (e.key === 'Escape') closeLightbox();
        if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); createNewChat(); }
        if ((e.ctrlKey || e.metaKey) && e.key === '/') { e.preventDefault(); openSettings(); }
    });
}

// ============ ИНИЦИАЛИЗАЦИЯ ============
window.addEventListener('DOMContentLoaded', () => {
    loadTheme();
    loadSettings();
    loadChats();
    setupHandlers();
    checkConnection();
    setInterval(checkConnection, 10000);
});