174 lines
10 KiB
HTML
174 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru" class="h-full bg-slate-100">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SCUD Orion AI Assistant</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
|
<style>
|
|
/* Запрещаем браузеру насильно удерживать скролл внизу при появлении ответа */
|
|
* {
|
|
overflow-anchor: none !important;
|
|
}
|
|
|
|
#chat-messages-container, main {
|
|
overflow-anchor: none !important;
|
|
}
|
|
|
|
/* Воздух снизу для возможности поднятия вопроса на самый верх */
|
|
#chat-messages-container {
|
|
padding-bottom: clamp(400px, 85vh, 900px) !important;
|
|
}
|
|
|
|
/* Шрифт сообщений чата */
|
|
#chat-messages-container .message-content,
|
|
#chat-messages-container .text-xs,
|
|
#chat-messages-container .text-sm {
|
|
font-size: 14.5px !important;
|
|
line-height: 1.6 !important;
|
|
}
|
|
#chat-messages-container pre,
|
|
#chat-messages-container code {
|
|
font-size: 13.5px !important;
|
|
}
|
|
.user-chat-bubble {
|
|
scroll-margin-top: 24px !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="h-full flex flex-col font-sans antialiased text-slate-800 bg-slate-100 selection:bg-indigo-500 selection:text-white">
|
|
|
|
<div id="app-container" class="flex-1 flex overflow-hidden w-full h-full">
|
|
|
|
<!-- ЛЕВАЯ КОЛОНКА (ДИНАМИЧЕСКИЙ САЙДБАР) -->
|
|
<aside class="w-80 md:w-96 bg-white border-r border-slate-200 flex flex-col shrink-0 h-full shadow-sm z-10 select-none">
|
|
|
|
<!-- ДИНАМИЧЕСКИЙ ТАБ-БАР ХАБОВ И ПОДВКЛАДОК -->
|
|
<div id="sidebar-dynamic-header" class="shrink-0 bg-slate-50 border-b border-slate-200"></div>
|
|
|
|
<!-- ДИНАМИЧЕСКИЙ КОНТЕНТНЫЙ СЛОТ -->
|
|
<div id="sidebar-dynamic-content" class="flex-1 overflow-y-auto p-2 flex flex-col gap-2">
|
|
<div id="tasks-list-container" class="flex-1 flex flex-col gap-2">
|
|
<div class="text-center py-10 text-xs text-slate-400">
|
|
<i class="fa-solid fa-spinner fa-spin mr-1"></i> Загрузка...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ПОДВАЛ САЙДБАРА: ПРОФИЛЬ, НАСТРОЙКИ, АДМИНКА И ВЫХОД -->
|
|
<div class="p-3 border-t border-slate-200 bg-slate-50 flex items-center justify-between shrink-0">
|
|
<div class="flex items-center gap-2.5 min-w-0">
|
|
<div class="w-8 h-8 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold text-xs shadow-sm shrink-0">
|
|
<i class="fa-solid fa-user"></i>
|
|
</div>
|
|
<div class="min-w-0 flex flex-col">
|
|
<span id="user-display-name" class="text-xs font-bold text-slate-800 truncate">Пользователь</span>
|
|
<span id="user-display-role" class="text-[10px] text-slate-400">Оператор</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1">
|
|
<button id="admin-panel-btn" type="button" onclick="openAdminModal()" class="hidden p-1.5 text-slate-400 hover:text-indigo-600 hover:bg-slate-200 rounded-lg transition" title="Управление пользователями">
|
|
<i class="fa-solid fa-users-gear text-sm"></i>
|
|
</button>
|
|
|
|
<button type="button" onclick="openProfileModal()" class="p-1.5 text-slate-400 hover:text-slate-700 hover:bg-slate-200 rounded-lg transition" title="Сменить пароль">
|
|
<i class="fa-solid fa-gear text-sm"></i>
|
|
</button>
|
|
|
|
<button type="button" onclick="AuthManager.logout()" class="p-1.5 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition" title="Выйти из системы">
|
|
<i class="fa-solid fa-arrow-right-from-bracket text-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ПРАВАЯ ОБЛАСТЬ (ЧАТ И ИИ-АССИСТЕНТ) -->
|
|
<main class="flex-1 flex flex-col h-full min-w-0 bg-slate-50 relative">
|
|
<header class="h-14 bg-white border-b border-slate-200 px-4 flex items-center justify-between shrink-0 shadow-sm z-10">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-7 h-7 rounded-lg bg-indigo-600 text-white flex items-center justify-center shadow-sm">
|
|
<i class="fa-solid fa-robot text-xs"></i>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<h1 class="text-sm font-bold text-slate-800">SCUD Orion AI Assistant</h1>
|
|
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">Online</span>
|
|
</div>
|
|
<p class="text-[10px] text-slate-400">Система интеллектуального аудита и контроля СКУД / 1С</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ЛЕНТА ЧАТА -->
|
|
<div id="chat-messages-container" class="flex-1 overflow-y-auto p-4 md:p-6 flex flex-col gap-4">
|
|
<div class="flex gap-3 max-w-4xl mx-auto w-full">
|
|
<div class="w-7 h-7 rounded-lg bg-indigo-600 text-white flex items-center justify-center shrink-0 shadow-sm mt-0.5">
|
|
<i class="fa-solid fa-robot text-xs"></i>
|
|
</div>
|
|
<div class="flex-1 bg-white border border-slate-200 rounded-2xl rounded-tl-none p-4 shadow-sm">
|
|
<div class="text-[10px] font-bold text-indigo-600 uppercase tracking-wider mb-1">ИИ-ассистент SCUD Orion AI</div>
|
|
<div class="text-xs text-slate-700 leading-relaxed">
|
|
Привет! Вы можете задавать вопросы ассистенту, управлять системным промптом, сверять кадровые нестыковки СКУД и 1С или формировать срезы и отчеты.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- БЕЙДЖ ПРИКРЕПЛЕННОГО ФАЙЛА -->
|
|
<div id="file-attachment-preview" class="hidden max-w-4xl mx-auto w-full px-4 pt-2">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 bg-indigo-50 border border-indigo-200 rounded-xl text-xs text-indigo-700 shadow-sm">
|
|
<i class="fa-solid fa-file text-indigo-600"></i>
|
|
<span id="file-attachment-name" class="font-medium truncate max-w-xs"></span>
|
|
<button type="button" onclick="clearAttachedFile()" class="text-indigo-400 hover:text-rose-600 ml-1">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- СТРОКА ВВОДА -->
|
|
<div class="px-4 py-2 bg-white border-t border-slate-200">
|
|
<div id="chat-input-box" class="max-w-4xl mx-auto w-full flex items-center gap-2 bg-slate-50 border border-slate-300 rounded-xl px-2.5 py-1 transition focus-within:border-indigo-500 focus-within:bg-white focus-within:ring-1 focus-within:ring-indigo-100">
|
|
<button type="button" onclick="document.getElementById('file-upload-input').click()" class="text-slate-400 hover:text-indigo-600 p-1 transition shrink-0" title="Прикрепить файл">
|
|
<i class="fa-solid fa-paperclip text-xs"></i>
|
|
</button>
|
|
<input type="file" id="file-upload-input" class="hidden" />
|
|
|
|
<textarea id="user-input" rows="1" placeholder="Команда, вопрос (Enter - отправить, Shift+Enter - перенос строки)..."
|
|
class="flex-1 bg-transparent border-0 focus:outline-none text-xs text-slate-800 resize-none py-0 leading-5" style="height: 24px; line-height: 24px;"></textarea>
|
|
|
|
<button type="button" onclick="window.sendMessage()" class="w-6 h-6 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white flex items-center justify-center shrink-0 shadow-sm transition">
|
|
<i class="fa-solid fa-paper-plane text-[10px]"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- КОНТЕЙНЕР ДИНАМИЧЕСКИХ МОДАЛЬНЫХ ОКОН -->
|
|
<div id="modals-container"></div>
|
|
|
|
<!-- ГЛОБАЛЬНАЯ DRAG-AND-DROP ЗОНА -->
|
|
<div id="global-drag-overlay"
|
|
class="fixed inset-0 bg-indigo-900/40 backdrop-blur-xs z-50 hidden flex items-center justify-center pointer-events-none transition-all duration-200">
|
|
<div class="bg-white border-2 border-dashed border-indigo-500 rounded-3xl p-10 flex flex-col items-center gap-3 shadow-2xl scale-100 transition-transform">
|
|
<div class="w-16 h-16 rounded-2xl bg-indigo-50 text-indigo-600 flex items-center justify-center text-3xl shadow-inner">
|
|
<i class="fa-solid fa-cloud-arrow-up animate-bounce"></i>
|
|
</div>
|
|
<div class="text-base font-bold text-slate-800">Перетащите файл в любую точку окна</div>
|
|
<div class="text-xs text-slate-500 font-medium">PDF-документы, сканы, отчеты или изображения</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- СКРИПТЫ -->
|
|
<script src="/static/js/auth.js?v=2.5.8"></script>
|
|
<script src="/static/js/tasks.js?v=2.5.8"></script>
|
|
<script src="/static/js/manual_absences.js?v=2.5.8"></script>
|
|
<script src="/static/js/sidebar.js?v=2.5.8"></script>
|
|
<script src="/static/js/chat/task_widget.js?v=2.5.8"></script>
|
|
<script src="/static/js/chat/core.js?v=2.5.8"></script>
|
|
<script src="/static/js/app.js?v=2.5.8"></script>
|
|
</body>
|
|
</html> |