396 lines
18 KiB
HTML
396 lines
18 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="theme-color" content="#171713" />
|
||
<title>Helpomatica — рабочее пространство</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:wght@600&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<link rel="stylesheet" href="/static/style.css?v=20260813e" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css"
|
||
crossorigin="anonymous"
|
||
/>
|
||
</head>
|
||
<body>
|
||
<div class="login-screen" id="loginScreen">
|
||
<form class="login-card" id="loginForm">
|
||
<div class="login-brand">
|
||
<div class="brand-mark">H</div>
|
||
<h1>Helpomatica</h1>
|
||
<p>Войдите, чтобы открыть общие проекты и чаты.</p>
|
||
</div>
|
||
<label>
|
||
Логин
|
||
<input name="username" autocomplete="username" required placeholder="admin" />
|
||
</label>
|
||
<label>
|
||
Пароль
|
||
<input name="password" type="password" autocomplete="current-password" required />
|
||
</label>
|
||
<button type="submit" class="primary-button login-submit">Войти</button>
|
||
<p class="login-error hidden" id="loginError"></p>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="app-shell hidden" id="appShell">
|
||
<aside class="sidebar">
|
||
<div class="brand">
|
||
<div class="brand-mark">H</div>
|
||
<span>Helpomatica</span>
|
||
<button class="icon-button mobile-close" id="closeSidebar">×</button>
|
||
</div>
|
||
|
||
<button class="new-chat-button" id="newChatButton">
|
||
<span class="plus">＋</span>
|
||
Новый чат
|
||
<span class="shortcut">Ctrl K</span>
|
||
</button>
|
||
|
||
<div class="sidebar-search" id="sidebarSearchWrap">
|
||
<input
|
||
type="search"
|
||
id="sidebarSearch"
|
||
placeholder="Поиск чатов…"
|
||
autocomplete="off"
|
||
spellcheck="false"
|
||
/>
|
||
<div class="search-results hidden" id="searchResults"></div>
|
||
</div>
|
||
|
||
<nav class="main-nav">
|
||
<button class="nav-item" data-view="home">
|
||
<span>⌂</span> Обзор
|
||
</button>
|
||
<button class="nav-item active" data-view="projects">
|
||
<span>◇</span> Проекты
|
||
</button>
|
||
<button class="nav-item hidden" data-view="users" id="usersNav">
|
||
<span>◎</span> Пользователи
|
||
</button>
|
||
</nav>
|
||
|
||
<div class="sidebar-section projects-section">
|
||
<div class="section-heading">
|
||
<span>Проекты</span>
|
||
<button class="icon-button" id="sidebarAddProject" title="Новый проект">＋</button>
|
||
</div>
|
||
<div class="project-nav-list" id="projectNavList"></div>
|
||
</div>
|
||
|
||
<div class="sidebar-section recents-section">
|
||
<div class="section-heading"><span>Недавние</span></div>
|
||
<div class="recent-list" id="recentList">
|
||
<div class="sidebar-empty">Чатов пока нет</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-footer">
|
||
<button class="profile-button" id="profileButton" type="button">
|
||
<span class="avatar" id="userAvatar">И</span>
|
||
<span>
|
||
<strong id="userDisplayName">Пользователь</strong>
|
||
<small id="userRoleLabel">user</small>
|
||
</span>
|
||
<span class="dots">•••</span>
|
||
</button>
|
||
<button class="text-button logout-button" id="logoutButton">Выйти</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="main">
|
||
<header class="topbar">
|
||
<button class="icon-button menu-button" id="openSidebar">☰</button>
|
||
<div class="breadcrumbs" id="breadcrumbs">Все проекты</div>
|
||
<div class="topbar-actions">
|
||
<div class="agent-status" id="agentStatus" title="Статус агента">
|
||
<span class="status-dot" id="agentStatusDot"></span>
|
||
<span id="agentStatusText">…</span>
|
||
</div>
|
||
<button class="icon-button" id="themeToggle" title="Сменить тему">◐</button>
|
||
<button class="outline-button" id="headerAddProject">＋ Проект</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="view active" id="projectsView">
|
||
<div class="content-wide">
|
||
<div class="page-title-row">
|
||
<div>
|
||
<p class="eyebrow">Рабочее пространство</p>
|
||
<h1>Ваши проекты</h1>
|
||
<p class="subtitle">
|
||
Инструкции, материалы и общие разговоры команды — в одном месте.
|
||
</p>
|
||
</div>
|
||
<button class="primary-button" id="mainAddProject">Создать проект</button>
|
||
</div>
|
||
<div class="project-grid" id="projectGrid"></div>
|
||
<div class="empty-state hidden" id="projectsEmpty">
|
||
<div class="empty-icon">◇</div>
|
||
<h2>Создайте первый проект</h2>
|
||
<p>Соберите инструкции, файлы и тематические чаты вместе.</p>
|
||
<button class="primary-button" id="emptyAddProject">Создать проект</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="view" id="usersView">
|
||
<div class="content-wide">
|
||
<div class="page-title-row">
|
||
<div>
|
||
<p class="eyebrow">Администрирование</p>
|
||
<h1>Пользователи</h1>
|
||
<p class="subtitle">Локальные учётки с доступом ко всем чатам проектов.</p>
|
||
</div>
|
||
</div>
|
||
<form class="users-form" id="userCreateForm">
|
||
<label>
|
||
Логин
|
||
<input name="username" required maxlength="64" />
|
||
</label>
|
||
<label>
|
||
Имя
|
||
<input name="display_name" maxlength="80" />
|
||
</label>
|
||
<label>
|
||
Пароль
|
||
<input name="password" type="password" required minlength="4" />
|
||
</label>
|
||
<label>
|
||
Роль
|
||
<select name="role">
|
||
<option value="user">user</option>
|
||
<option value="admin">admin</option>
|
||
</select>
|
||
</label>
|
||
<button type="submit" class="primary-button">Добавить</button>
|
||
</form>
|
||
<div class="users-table" id="usersTable"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="view" id="projectView">
|
||
<div class="project-layout" id="projectDropZone">
|
||
<div class="project-main">
|
||
<div class="project-heading">
|
||
<div class="project-icon-large" id="projectIcon">✦</div>
|
||
<div>
|
||
<p class="eyebrow">Проект</p>
|
||
<h1 id="projectName">Название проекта</h1>
|
||
<p class="subtitle" id="projectDescription"></p>
|
||
</div>
|
||
<div class="menu-wrap">
|
||
<button class="icon-button project-menu" id="projectMenuBtn" title="Меню проекта">⋮</button>
|
||
<div class="menu-dropdown hidden" id="projectMenu">
|
||
<button type="button" id="renameProject">Переименовать</button>
|
||
<button type="button" id="deleteProject" class="danger">Удалить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="composer-card" id="projectComposer">
|
||
<div class="composer-attachments hidden" id="projectComposerAttachments"></div>
|
||
<textarea
|
||
id="quickPrompt"
|
||
rows="1"
|
||
placeholder="С чего начнём?"
|
||
></textarea>
|
||
<div class="composer-footer">
|
||
<label class="attach-button" title="Прикрепить файл к разговору">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" />
|
||
</svg>
|
||
<input type="file" id="projectFileInput" multiple />
|
||
</label>
|
||
<span class="composer-hint">Новый разговор в этом проекте</span>
|
||
<button class="send-button" id="quickSend" title="Отправить">↑</button>
|
||
</div>
|
||
<p class="drop-hint composer-drop-hint">Перетащите файлы сюда</p>
|
||
</div>
|
||
|
||
<div class="list-header">
|
||
<h2>Разговоры</h2>
|
||
<button class="text-button" id="addChat">＋ Новый</button>
|
||
</div>
|
||
<div class="chat-list" id="chatList"></div>
|
||
<div class="empty-inline hidden" id="chatsEmpty">
|
||
Пока нет разговоров. Начните с вопроса выше.
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="details-panel">
|
||
<div class="panel-section">
|
||
<div class="panel-title">
|
||
<h3>Инструкции</h3>
|
||
<button class="text-button" id="editInstructions">Изменить</button>
|
||
</div>
|
||
<p id="instructionsPreview">
|
||
Добавьте правила и контекст для всех разговоров проекта.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<div class="panel-title">
|
||
<h3>Модель</h3>
|
||
</div>
|
||
<select id="modelSelect" class="model-select">
|
||
<option value="auto">auto</option>
|
||
<option value="composer-2.5">composer-2.5</option>
|
||
<option value="composer-2">composer-2</option>
|
||
<option value="gpt-5.2">gpt-5.2</option>
|
||
<option value="claude-4.6-sonnet">claude-4.6-sonnet</option>
|
||
</select>
|
||
<p class="panel-hint">Используется для ответов агента в этом проекте.</p>
|
||
</div>
|
||
|
||
<div class="panel-section files-panel" id="filesPanel">
|
||
<div class="panel-title">
|
||
<h3>Файлы</h3>
|
||
<label class="text-button upload-label">
|
||
＋ Добавить
|
||
<input type="file" id="fileInput" multiple />
|
||
</label>
|
||
</div>
|
||
<div class="file-list" id="fileList"></div>
|
||
<p class="panel-empty" id="filesEmpty">Добавьте документы и материалы.</p>
|
||
<p class="drop-hint">Перетащите файлы сюда</p>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="view" id="chatView">
|
||
<div class="chat-page" id="chatDropZone">
|
||
<div class="chat-header">
|
||
<button class="back-button" id="backToProject">←</button>
|
||
<div>
|
||
<p class="eyebrow" id="chatProjectName">Проект</p>
|
||
<h2 id="chatTitle">Новый чат</h2>
|
||
</div>
|
||
<div class="chat-header-actions">
|
||
<a class="text-button export-chat-link" id="exportChat" href="#" download>Экспорт</a>
|
||
<div class="menu-wrap">
|
||
<button class="icon-button" id="chatMenuBtn" title="Меню чата">⋮</button>
|
||
<div class="menu-dropdown hidden" id="chatMenu">
|
||
<button type="button" id="renameChat">Переименовать</button>
|
||
<a class="menu-link" id="exportChatMenu" href="#" download>Экспорт</a>
|
||
<button type="button" id="deleteChat" class="danger">Удалить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="messages" id="messages"></div>
|
||
<div class="gen-progress hidden" id="genProgress">
|
||
<div class="gen-progress-label" id="genProgressLabel">Читаю лог…</div>
|
||
<div class="gen-progress-track">
|
||
<div class="gen-progress-bar" id="genProgressBar"></div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-composer" id="chatComposer">
|
||
<div class="composer-attachments hidden" id="composerAttachments"></div>
|
||
<div class="composer-row">
|
||
<label class="attach-button" title="Прикрепить файл к этому чату">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" />
|
||
</svg>
|
||
<input type="file" id="chatFileInput" multiple />
|
||
</label>
|
||
<textarea id="messageInput" rows="1" placeholder="Напишите сообщение…"></textarea>
|
||
<div class="composer-actions">
|
||
<button class="send-button" id="messageSend" title="Отправить">↑</button>
|
||
<button class="stop-button hidden" id="messageStop" title="Остановить">■</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<div class="modal-backdrop hidden" id="projectModal">
|
||
<form class="modal" id="projectForm">
|
||
<div class="modal-header">
|
||
<div>
|
||
<p class="eyebrow">Новое пространство</p>
|
||
<h2>Создать проект</h2>
|
||
</div>
|
||
<button type="button" class="icon-button modal-close">×</button>
|
||
</div>
|
||
<label>
|
||
Название
|
||
<input name="name" required maxlength="80" placeholder="Например, Новый продукт" />
|
||
</label>
|
||
<label>
|
||
Описание
|
||
<textarea name="description" rows="3" placeholder="Чем вы занимаетесь в этом проекте?"></textarea>
|
||
</label>
|
||
<label>
|
||
Инструкции
|
||
<textarea name="instructions" rows="5" placeholder="Роль помощника, стиль ответов, важный контекст…"></textarea>
|
||
</label>
|
||
<div class="modal-actions">
|
||
<button type="button" class="outline-button modal-close">Отмена</button>
|
||
<button type="submit" class="primary-button">Создать</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="modal-backdrop hidden" id="instructionsModal">
|
||
<form class="modal" id="instructionsForm">
|
||
<div class="modal-header">
|
||
<div>
|
||
<p class="eyebrow">Контекст проекта</p>
|
||
<h2>Инструкции</h2>
|
||
</div>
|
||
<button type="button" class="icon-button instructions-close">×</button>
|
||
</div>
|
||
<label>
|
||
Эти инструкции будут доступны во всех чатах проекта
|
||
<textarea name="instructions" rows="12" placeholder="Опишите роль, задачи и правила работы…"></textarea>
|
||
</label>
|
||
<div class="modal-actions">
|
||
<button type="button" class="outline-button instructions-close">Отмена</button>
|
||
<button type="submit" class="primary-button">Сохранить</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="modal-backdrop hidden" id="renameModal">
|
||
<form class="modal" id="renameForm">
|
||
<div class="modal-header">
|
||
<div>
|
||
<p class="eyebrow" id="renameEyebrow">Переименование</p>
|
||
<h2 id="renameTitle">Новое имя</h2>
|
||
</div>
|
||
<button type="button" class="icon-button rename-close">×</button>
|
||
</div>
|
||
<label>
|
||
Название
|
||
<input name="name" required maxlength="120" />
|
||
</label>
|
||
<input type="hidden" name="kind" value="project" />
|
||
<div class="modal-actions">
|
||
<button type="button" class="outline-button rename-close">Отмена</button>
|
||
<button type="submit" class="primary-button">Сохранить</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="toast" id="toast"></div>
|
||
<div class="diagram-lightbox hidden" id="diagramLightbox" role="dialog" aria-modal="true" aria-label="Просмотр диаграммы">
|
||
<button type="button" class="diagram-lightbox-close" id="diagramLightboxClose" aria-label="Закрыть">×</button>
|
||
<div class="diagram-lightbox-inner" id="diagramLightboxInner"></div>
|
||
</div>
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js" crossorigin="anonymous"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>
|
||
<script src="/static/app.js?v=20260813e"></script>
|
||
</body>
|
||
</html>
|