Upload 23 files

index.html

@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HBB Chat</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" id="hljs-theme">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div class="app">
+    <!-- ===== Боковая панель ===== -->
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <div class="logo">
+                <img src="icons/assistant.png" class="icon" alt=""> HBB Chat
+            </div>
+        </div>
+        <div class="search-box">
+            <input type="text" id="search-input" placeholder="Поиск по чатам..." oninput="filterChats()">
+        </div>
+        <button class="new-chat-btn" onclick="createNewChat()">
+            <img src="icons/new-chat.png" class="icon" alt=""> Новый чат
+        </button>
+        <div class="chat-list" id="chat-list"></div>
+        <div class="sidebar-footer">
+            <span><span class="status-dot" id="status-dot"></span><span id="status-text">Проверка...</span></span>
+            <a class="settings-link" onclick="openSettings()">
+                <img src="icons/settings.png" class="icon" alt=""> Настройки
+            </a>
+        </div>
+    </aside>
+
+    <!-- ===== Основная область ===== -->
+    <main class="main">
+        <div class="topbar">
+            <button class="toggle-btn" onclick="toggleSidebar()" title="Свернуть/развернуть">
+                <img src="icons/menu.png" class="icon" alt="">
+            </button>
+            <div class="current-title" id="current-title" ondblclick="renameCurrentChat()">Новый чат</div>
+            <div class="spacer"></div>
+            <div class="token-info" id="token-info"></div>
+            <button class="theme-btn" onclick="toggleTheme()" title="Тема">
+                <img src="icons/theme-dark.png" class="icon" alt="">
+            </button>
+        </div>
+
+        <div class="chat-area" id="chat-area">
+            <div class="welcome" id="welcome">
+                <div class="title">
+                    <img src="icons/assistant.png" class="icon" alt=""> Привет! Чем помочь сегодня?
+                </div>
+                <div class="subtitle">Напишите сообщение, прикрепите файл или картинку.</div>
+            </div>
+            <div class="chat-inner" id="chat-inner"></div>
+        </div>
+
+        <div class="input-wrap">
+            <div class="input-box">
+                <div class="attachments-preview" id="attachments-preview"></div>
+                <textarea id="user-input" placeholder="Напишите сообщение... (Ctrl+Enter — отправить)" rows="1"></textarea>
+                <div class="input-actions">
+                    <div class="left">
+                        <button class="icon-btn" id="attach-btn" title="Прикрепить файл">
+                            <img src="icons/attach.png" class="icon" alt="">
+                        </button>
+                    </div>
+                    <button class="send-btn" id="send-btn" title="Отправить">
+                        <img src="icons/send.png" class="icon" alt="">
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>
+
+<!-- ===== Настройки ===== -->
+<div class="settings-overlay" id="settings-overlay">
+    <div class="settings-panel">
+        <h3>Настройки <button onclick="closeSettings()"><img src="icons/close.png" class="icon" alt=""></button></h3>
+
+        <div class="field">
+            <label>Бэкенд</label>
+            <select id="backend-select">
+                <option value="llamacpp">llama.cpp (OpenAI API)</option>
+                <option value="ollama">Ollama</option>
+            </select>
+        </div>
+        <div class="field">
+            <label>API Endpoint</label>
+            <input type="text" id="api-url" value="http://localhost:8080">
+        </div>
+        <div class="field">
+            <label>Имя пользователя</label>
+            <input type="text" id="user-name" value="Вы" maxlength="32">
+        </div>
+        <div class="field">
+            <label>Имя ассистента</label>
+            <input type="text" id="assistant-name" value="Ассистент" maxlength="32">
+        </div>
+        <div class="field">
+            <label>Аватар пользователя</label>
+            <input type="text" id="user-avatar" value="user" maxlength="32">
+            <div class="hint">Имя файла в icons/ без .png</div>
+        </div>
+        <div class="field">
+            <label>Аватар ассистента</label>
+            <input type="text" id="assistant-avatar" value="assistant" maxlength="32">
+            <div class="hint">Имя файла в icons/ без .png</div>
+        </div>
+
+        <div class="field">
+            <label>Профиль ассистента</label>
+            <select id="persona-select">
+                <option value="none">Ничего</option>
+                <option value="enthusiastic">Восторженный помощник</option>
+                <option value="coder">Помощник по программированию</option>
+                <option value="explainer">Разжёвывающий помощник</option>
+                <option value="sarcastic">Саркастичный помощник</option>
+                <option value="teacher">Терпеливый учитель</option>
+            </select>
+        </div>
+
+        <div class="field">
+            <label>Системный промпт</label>
+            <textarea id="system-prompt" placeholder="Ты — полезный ассистент..."></textarea>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="field">
+            <label>Temperature <span id="temp-val">0.8</span></label>
+            <input type="range" id="temp" min="0" max="2" step="0.05" value="0.8">
+        </div>
+        <div class="field">
+            <label>Top P <span id="topp-val">0.9</span></label>
+            <input type="range" id="topp" min="0" max="1" step="0.05" value="0.9">
+        </div>
+        <div class="field">
+            <label>Top K <span id="topk-val">40</span></label>
+            <input type="range" id="topk" min="1" max="100" step="1" value="40">
+        </div>
+        <div class="field">
+            <label>Repeat Penalty <span id="rep-val">1.1</span></label>
+            <input type="range" id="reppen" min="0.5" max="2" step="0.05" value="1.1">
+        </div>
+        <div class="field">
+            <label>Max tokens <span id="np-val">512</span></label>
+            <input type="range" id="numpredict" min="32" max="4096" step="32" value="512">
+        </div>
+        <div class="field">
+            <label>Context (n_ctx) <span id="ctx-val">4096</span></label>
+            <input type="range" id="numctx" min="512" max="32768" step="512" value="4096">
+        </div>
+        <div class="field">
+            <label>Image min tokens</label>
+            <input type="number" id="img-min-tokens" value="256" min="64" max="2048" step="64">
+        </div>
+
+        <div class="divider"></div>
+        <h4 style="margin: 0 0 10px 0; font-size: 0.85rem;">Предлагаемые запросы</h4>
+        <div class="field">
+            <label>
+                <input type="checkbox" id="suggest-enabled" style="width:auto;margin-right:6px;" checked>
+                Включить генерацию предложений
+            </label>
+        </div>
+        <div class="field">
+            <label>Модель для предложений</label>
+            <input type="text" id="suggest-model" value="gemma-3-1b-it">
+        </div>
+        <div class="field">
+            <label>Endpoint для предложений</label>
+            <input type="text" id="suggest-api-url" value="http://localhost:8080">
+        </div>
+        <div class="field">
+            <label>Кол-во предложений <span id="suggest-count-val">3</span></label>
+            <input type="range" id="suggest-count" min="1" max="5" step="1" value="3">
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="field">
+            <label>Макс. сторона картинки, px</label>
+            <input type="number" id="img-max-side" value="1280" min="256" max="4096" step="64">
+        </div>
+        <div class="field">
+            <label>Качество JPEG <span id="img-q-val">0.85</span></label>
+            <input type="range" id="img-quality" min="0.3" max="1" step="0.05" value="0.85">
+        </div>
+
+        <button class="btn-primary" onclick="saveSettings()">Сохранить</button>
+        <div class="btn-row">
+            <button class="btn-secondary" onclick="exportChats()">
+                <img src="icons/export.png" class="icon" alt=""> Экспорт
+            </button>
+            <button class="btn-secondary" onclick="importChats()">
+                <img src="icons/import.png" class="icon" alt=""> Импорт
+            </button>
+        </div>
+        <button class="btn-secondary" onclick="resetSettings()">Сбросить всё</button>
+    </div>
+</div>
+
+<div class="lightbox" id="lightbox" onclick="closeLightbox()">
+    <img id="lightbox-img" alt="">
+</div>
+
+<!-- ===== Атрибуция Icons8 ===== -->
+<div style="
+    position: fixed;
+    bottom: 2px;
+    right: 4px;
+    font-size: 6px;
+    color: var(--text-dim);
+    opacity: 0.4;
+    z-index: 9999;
+    pointer-events: auto;
+    font-family: sans-serif;
+    line-height: 1;
+">
+    Icons by <a href="https://icons8.ru" target="_blank" style="color: inherit; text-decoration: none;">icons8.ru</a>
+</div>
+
+<!-- ===== Библиотеки ===== -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.0/marked.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.9/purify.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
+<!-- ===== Основной скрипт ===== -->
+<script src="script.js"></script>
+
+</body>
+</html>

script.js

@@ -0,0 +1,730 @@
+// ============================================================
+// 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;
+    // ФИКС: если текст уже содержит HTML-теги — не парсим повторно
+    if (/<[a-z][\s\S]*>/i.test(text)) {
+        return DOMPurify.sanitize(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);
+});

style.css

@@ -0,0 +1,482 @@
+:root {
+    --bg: #0d0d0d;
+    --panel: #1a1a1a;
+    --panel-2: #141414;
+    --border: #2a2a2a;
+    --text: #e5e5e5;
+    --text-dim: #888;
+    --accent: #4f6ef7;
+    --accent-hover: #3d5ce5;
+    --user-bg: #1e3a5f;
+    --code-bg: #0a0a0a;
+    --danger: #dc2626;
+}
+[data-theme="light"] {
+    --bg: #f5f5f5;
+    --panel: #ffffff;
+    --panel-2: #fafafa;
+    --border: #e0e0e0;
+    --text: #1a1a1a;
+    --text-dim: #666;
+    --accent: #4f6ef7;
+    --accent-hover: #3d5ce5;
+    --user-bg: #dbeafe;
+    --code-bg: #f0f0f0;
+    --danger: #dc2626;
+}
+* { box-sizing: border-box; }
+html, body {
+    height: 100%; margin: 0; padding: 0;
+    background: var(--bg); color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    overflow: hidden;
+}
+.app { display: flex; height: 100vh; }
+
+/* ===== Иконки ===== */
+.icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    pointer-events: none;
+    display: inline-block;
+    object-fit: contain;
+}
+[data-theme="dark"] .icon {
+    filter: invert(1);
+}
+.theme-btn .icon,
+.toggle-btn .icon {
+    width: 18px;
+    height: 18px;
+}
+.send-btn .icon,
+.attach-btn .icon {
+    width: 18px;
+    height: 18px;
+}
+.copy-btn .icon {
+    width: 12px;
+    height: 12px;
+}
+.avatar .icon {
+    width: 18px;
+    height: 18px;
+}
+
+/* ===== Боковая панель ===== */
+.sidebar {
+    width: 280px; background: var(--panel-2);
+    border-right: 1px solid var(--border);
+    display: flex; flex-direction: column;
+    flex-shrink: 0;
+    transition: margin-left 0.25s ease;
+}
+.sidebar.collapsed { margin-left: -280px; }
+.sidebar-header {
+    padding: 14px;
+    border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: space-between;
+}
+.sidebar-header .logo {
+    font-size: 0.95rem; font-weight: 600;
+    display: flex; align-items: center; gap: 8px;
+}
+.search-box {
+    padding: 8px 14px;
+    border-bottom: 1px solid var(--border);
+}
+.search-box input {
+    width: 100%; background: var(--bg);
+    border: 1px solid var(--border); color: var(--text);
+    padding: 6px 10px; border-radius: 8px;
+    font-size: 0.8rem; outline: none;
+}
+.new-chat-btn {
+    padding: 10px 14px;
+    background: var(--accent); color: white;
+    border: none; border-radius: 10px;
+    cursor: pointer; font-weight: 600; font-size: 0.85rem;
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+    margin: 12px 14px; width: calc(100% - 28px);
+    transition: background 0.2s;
+}
+.new-chat-btn:hover { background: var(--accent-hover); }
+.new-chat-btn .icon { filter: invert(1); }
+.chat-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
+.chat-item {
+    padding: 10px 12px; border-radius: 8px;
+    cursor: pointer; margin-bottom: 4px;
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 8px; transition: background 0.15s; font-size: 0.85rem;
+}
+.chat-item:hover { background: rgba(127,127,127,0.1); }
+.chat-item.active { background: rgba(79,110,247,0.15); }
+.chat-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-item .del {
+    background: transparent; border: none;
+    color: var(--text-dim); cursor: pointer;
+    font-size: 0.9rem; padding: 0 4px;
+    opacity: 0; transition: opacity 0.15s;
+}
+.chat-item:hover .del { opacity: 1; }
+.chat-item .del:hover { color: var(--danger); }
+.sidebar-footer {
+    padding: 12px 14px;
+    border-top: 1px solid var(--border);
+    font-size: 0.75rem; color: var(--text-dim);
+}
+.status-dot {
+    display: inline-block; width: 6px; height: 6px;
+    border-radius: 50%; background: #ef4444;
+    margin-right: 5px; vertical-align: middle;
+}
+.status-dot.online { background: #22c55e; }
+.sidebar-footer .settings-link {
+    display: block; margin-top: 8px;
+    color: var(--text-dim); cursor: pointer;
+    text-decoration: none; font-size: 0.75rem;
+}
+.sidebar-footer .settings-link:hover { color: var(--accent); }
+
+/* ===== Основная область ===== */
+.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.topbar {
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; gap: 12px;
+    flex-shrink: 0;
+}
+.topbar .toggle-btn {
+    background: transparent; border: 1px solid var(--border);
+    color: var(--text-dim); width: 32px; height: 32px;
+    border-radius: 8px; cursor: pointer; font-size: 1rem;
+    display: flex; align-items: center; justify-content: center;
+    transition: all 0.2s;
+}
+.topbar .toggle-btn:hover { color: var(--accent); border-color: var(--accent); }
+.topbar .current-title {
+    font-size: 0.9rem; font-weight: 600;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    cursor: pointer;
+}
+.topbar .current-title:hover { color: var(--accent); }
+.topbar .spacer { flex: 1; }
+.topbar .token-info { font-size: 0.72rem; color: var(--text-dim); }
+.topbar .theme-btn {
+    background: transparent; border: 1px solid var(--border);
+    color: var(--text-dim); width: 32px; height: 32px;
+    border-radius: 8px; cursor: pointer; font-size: 1rem;
+    display: flex; align-items: center; justify-content: center;
+}
+
+/* ===== Область чата ===== */
+.chat-area {
+    flex: 1; overflow-y: auto;
+    padding: 24px 0;
+    display: flex; flex-direction: column; align-items: center;
+}
+.chat-inner {
+    width: 100%; max-width: 780px;
+    padding: 0 20px;
+    display: flex; flex-direction: column; gap: 20px;
+}
+.welcome {
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    flex: 1; padding: 40px 20px; text-align: center;
+}
+.welcome .title {
+    font-size: 1.5rem; font-weight: 600;
+    display: flex; align-items: center; gap: 10px;
+    margin-bottom: 8px;
+}
+.welcome .subtitle { color: var(--text-dim); font-size: 0.9rem; }
+
+/* ===== Сообщения ===== */
+.message { display: flex; gap: 12px; animation: fadeIn 0.2s ease; position: relative; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+.message .avatar {
+    width: 30px; height: 30px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 0.9rem; flex-shrink: 0;
+    background: var(--panel); border: 1px solid var(--border);
+}
+.message.user .avatar { background: var(--user-bg); border-color: var(--user-bg); }
+.message .body { flex: 1; min-width: 0; padding-top: 4px; }
+.message .name {
+    font-size: 0.75rem; color: var(--text-dim);
+    margin-bottom: 4px; font-weight: 600;
+    display: flex; align-items: center; gap: 8px;
+}
+.message .name .actions {
+    opacity: 0; transition: opacity 0.15s;
+    display: flex; gap: 4px;
+}
+.message:hover .name .actions { opacity: 1; }
+.message .name .actions button {
+    background: transparent; border: none;
+    color: var(--text-dim); cursor: pointer;
+    font-size: 0.7rem; padding: 0 2px;
+}
+.message .name .actions button:hover { color: var(--accent); }
+.message .content { line-height: 1.65; font-size: 0.94rem; word-wrap: break-word; }
+
+/* ===== Markdown ===== */
+.content p { margin: 0 0 10px 0; }
+.content p:last-child { margin-bottom: 0; }
+.content h1, .content h2, .content h3 { margin: 16px 0 8px; font-weight: 600; }
+.content h1 { font-size: 1.3em; }
+.content h2 { font-size: 1.15em; }
+.content h3 { font-size: 1.05em; }
+.content ul, .content ol { margin: 8px 0 8px 22px; padding: 0; }
+.content li { margin: 3px 0; }
+.content code {
+    background: rgba(127,127,127,0.15); padding: 2px 6px;
+    border-radius: 4px; font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 0.88em; color: #fbbf24;
+}
+
+/* ===== Блок кода ===== */
+.code-block-wrapper {
+    position: relative; margin: 10px 0;
+    border: 1px solid var(--border);
+    border-radius: 0; overflow: hidden;
+    background: var(--code-bg);
+}
+.code-header {
+    position: absolute; top: 0; left: 0; right: 0;
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 4px 10px;
+    background: rgba(0,0,0,0.55);
+    backdrop-filter: blur(4px);
+    border-bottom: 1px solid var(--border);
+    font-size: 0.72rem; color: var(--text-dim);
+    z-index: 2;
+}
+.code-header .lang { text-transform: lowercase; }
+.code-header .copy-btn {
+    background: transparent; border: 1px solid var(--border);
+    color: var(--text-dim); padding: 3px 8px;
+    border-radius: 0; cursor: pointer; font-size: 0.7rem;
+    transition: all 0.2s;
+    display: flex; align-items: center; gap: 4px;
+}
+.code-header .copy-btn:hover { color: var(--accent); border-color: var(--accent); }
+.code-header .copy-btn.copied { color: #22c55e; border-color: #22c55e; }
+.code-header .copy-btn .icon { filter: invert(1); }
+[data-theme="light"] .code-header .copy-btn .icon { filter: none; }
+.content pre {
+    background: var(--code-bg); border: none;
+    border-radius: 0; padding: 0; margin: 0;
+    overflow-x: auto;
+}
+.content pre code {
+    display: block; padding: 34px 14px 14px 14px;
+    background: transparent; color: var(--text);
+    font-size: 0.85em; font-family: 'Consolas', 'Monaco', monospace;
+    line-height: 1.5;
+}
+.content blockquote {
+    border-left: 3px solid var(--accent);
+    padding-left: 12px; margin: 8px 0; color: var(--text-dim);
+}
+.content table { border-collapse: collapse; margin: 10px 0; font-size: 0.85em; }
+.content th, .content td { border: 1px solid var(--border); padding: 5px 10px; }
+.content th { background: rgba(127,127,127,0.08); }
+.content a { color: #6ea8fe; text-decoration: none; }
+.content a:hover { text-decoration: underline; }
+.cursor::after {
+    content: "▋"; animation: blink 1s steps(2) infinite; color: var(--accent);
+}
+@keyframes blink { 50% { opacity: 0; } }
+
+.msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
+.msg-attachments img {
+    max-width: 200px; max-height: 200px;
+    border-radius: 8px; cursor: zoom-in;
+    border: 1px solid var(--border);
+}
+.msg-attachments .file-chip {
+    display: inline-flex; align-items: center; gap: 6px;
+    background: rgba(127,127,127,0.1);
+    padding: 6px 10px; border-radius: 6px;
+    font-size: 0.78rem; border: 1px solid var(--border);
+}
+
+/* ===== Поле ввода ===== */
+.input-wrap { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 20px 20px; }
+.input-box {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 12px 14px;
+    transition: border-color 0.2s;
+    position: relative;
+}
+.input-box:focus-within { border-color: var(--accent); }
+textarea#user-input {
+    width: 100%; background: transparent; border: none;
+    color: var(--text); font-size: 0.95rem;
+    resize: none; outline: none; font-family: inherit;
+    min-height: 24px; max-height: 200px;
+    line-height: 1.5; padding: 0;
+}
+textarea#user-input::placeholder { color: var(--text-dim); }
+.input-actions {
+    display: flex; justify-content: space-between; align-items: center;
+    margin-top: 10px; gap: 8px;
+}
+.input-actions .left { display: flex; gap: 6px; align-items: center; }
+.icon-btn {
+    background: transparent; border: 1px solid var(--border);
+    color: var(--text-dim); width: 32px; height: 32px;
+    border-radius: 8px; cursor: pointer; font-size: 0.9rem;
+    display: flex; align-items: center; justify-content: center;
+    transition: all 0.2s;
+}
+.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
+.icon-btn.has-files { color: var(--accent); border-color: var(--accent); }
+.send-btn {
+    background: var(--accent); color: white;
+    border: none; width: 36px; height: 36px;
+    border-radius: 10px; cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 1rem; transition: background 0.2s;
+}
+.send-btn:hover:not(:disabled) { background: var(--accent-hover); }
+.send-btn:disabled { background: #333; cursor: not-allowed; }
+.send-btn.stop { background: var(--danger); }
+.send-btn .icon { filter: invert(1); }
+[data-theme="light"] .send-btn .icon { filter: none; }
+
+.attachments-preview { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
+.attachments-preview.visible { display: flex; }
+.att-preview-item {
+    position: relative; width: 56px; height: 56px;
+    border-radius: 8px; overflow: hidden;
+    border: 1px solid var(--border); background: #000;
+}
+.att-preview-item img { width: 100%; height: 100%; object-fit: cover; }
+.att-preview-item.file {
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    background: var(--panel); color: var(--text-dim);
+    font-size: 0.55rem; text-align: center; padding: 2px;
+}
+.att-preview-item.file .icon { font-size: 1.2rem; }
+.att-preview-item .remove {
+    position: absolute; top: 2px; right: 2px;
+    width: 16px; height: 16px; background: rgba(0,0,0,0.8);
+    color: white; border-radius: 50%; border: none;
+    cursor: pointer; font-size: 10px; line-height: 1;
+    display: flex; align-items: center; justify-content: center; padding: 0;
+}
+.att-preview-item .remove:hover { background: var(--danger); }
+
+/* ===== Предложка ===== */
+.suggestions-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 10px;
+    padding: 0 2px;
+}
+.suggestion-btn {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+    padding: 6px 12px;
+    border-radius: 16px;
+    cursor: pointer;
+    font-size: 0.78rem;
+    transition: all 0.2s;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.suggestion-btn:hover {
+    color: var(--accent);
+    border-color: var(--accent);
+}
+
+/* ===== Модалка настроек ===== */
+.settings-overlay {
+    position: fixed; inset: 0; z-index: 200;
+    background: rgba(0,0,0,0.7);
+    display: none; align-items: center; justify-content: center;
+    padding: 20px;
+}
+.settings-overlay.visible { display: flex; }
+.settings-panel {
+    background: var(--panel); border: 1px solid var(--border);
+    border-radius: 16px; padding: 24px;
+    width: 100%; max-width: 460px;
+    max-height: 85vh; overflow-y: auto;
+}
+.settings-panel h3 {
+    margin: 0 0 16px; font-size: 1rem;
+    display: flex; justify-content: space-between; align-items: center;
+}
+.settings-panel h3 button {
+    background: transparent; border: none;
+    color: var(--text-dim); cursor: pointer; font-size: 1.2rem;
+}
+.settings-panel .field { margin-bottom: 14px; }
+.settings-panel .field label {
+    display: flex; justify-content: space-between;
+    font-size: 0.82rem; color: var(--text-dim); margin-bottom: 6px;
+}
+.settings-panel .field label span { color: var(--accent); font-weight: 600; }
+.settings-panel input[type="text"],
+.settings-panel input[type="number"],
+.settings-panel textarea,
+.settings-panel select {
+    width: 100%; background: var(--bg);
+    border: 1px solid var(--border); color: var(--text);
+    padding: 8px 10px; border-radius: 8px;
+    font-size: 0.85rem; outline: none; font-family: inherit;
+}
+.settings-panel textarea { resize: vertical; min-height: 70px; }
+.settings-panel input[type="range"] { width: 100%; accent-color: var(--accent); }
+.settings-panel .hint { font-size: 0.7rem; color: var(--text-dim); opacity: 0.7; margin-top: 4px; }
+.settings-panel .divider { height: 1px; background: var(--border); margin: 16px 0; }
+.settings-panel .btn-primary {
+    width: 100%; background: var(--accent); color: white;
+    border: none; padding: 10px; border-radius: 8px;
+    cursor: pointer; font-weight: 600; font-size: 0.9rem;
+}
+.settings-panel .btn-primary:hover { background: var(--accent-hover); }
+.settings-panel .btn-secondary {
+    width: 100%; background: transparent; color: var(--text-dim);
+    border: 1px solid var(--border); padding: 8px;
+    border-radius: 8px; cursor: pointer; font-size: 0.8rem;
+    margin-top: 8px;
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+}
+.settings-panel .btn-secondary:hover { color: var(--text); border-color: var(--text-dim); }
+.settings-panel .btn-row { display: flex; gap: 8px; margin-top: 8px; }
+.settings-panel .btn-row button { flex: 1; }
+
+.lightbox {
+    position: fixed; inset: 0; z-index: 1000;
+    background: rgba(0,0,0,0.92);
+    display: none; align-items: center; justify-content: center;
+    cursor: zoom-out;
+}
+.lightbox.visible { display: flex; }
+.lightbox img { max-width: 95vw; max-height: 95vh; border-radius: 8px; }
+
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: #666; }
+
+@media (max-width: 700px) {
+    .sidebar {
+        position: absolute; top: 0; bottom: 0; left: 0;
+        z-index: 100; box-shadow: 4px 0 20px rgba(0,0,0,0.5);
+    }
+    .chat-inner, .input-wrap { padding-left: 14px; padding-right: 14px; }
+}