311 lines
18 KiB
HTML
311 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">
|
|||
|
|
<title>AI Drawer - Улучшения интерфейса</title>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 20px;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo-container {
|
|||
|
|
max-width: 800px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background: white;
|
|||
|
|
padding: 30px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
color: #333;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-list {
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-list li {
|
|||
|
|
padding: 15px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
border-left: 4px solid #007bff;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-list li.completed {
|
|||
|
|
border-left-color: #28a745;
|
|||
|
|
background: #d4edda;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo-buttons {
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 30px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo-btn {
|
|||
|
|
padding: 12px 24px;
|
|||
|
|
margin: 10px;
|
|||
|
|
background: #007bff;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo-btn:hover {
|
|||
|
|
background: #0056b3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo-btn.secondary {
|
|||
|
|
background: #6c757d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo-btn.secondary:hover {
|
|||
|
|
background: #545b62;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.instructions {
|
|||
|
|
background: #e3f2fd;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.instructions h3 {
|
|||
|
|
margin-top: 0;
|
|||
|
|
color: #1976d2;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="demo-container">
|
|||
|
|
<h1>🤖 AI Drawer - Улучшения интерфейса</h1>
|
|||
|
|
|
|||
|
|
<div class="instructions">
|
|||
|
|
<h3>📋 Что было улучшено:</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="completed">✅ <strong>Управление размером шрифта</strong> - добавлена панель с кнопками для изменения размера текста (мелкий, обычный, крупный, очень крупный)</li>
|
|||
|
|
<li class="completed">✅ <strong>Аватарки для ассистента</strong> - добавлены дружелюбные аватарки с анимацией (🤖😊💡🧠) и возможность их смены</li>
|
|||
|
|
<li class="completed">✅ <strong>Убрано излишнее затемнение</strong> - изменен фон с темного на светлый (#f8f9fa) с темным текстом (#212529) для максимальной читаемости</li>
|
|||
|
|
<li class="completed">✅ <strong>Плавающий индикатор загрузки</strong> - уведомления о обработке запроса теперь появляются в центре экрана и не мешают диалогу</li>
|
|||
|
|
<li class="completed">✅ <strong>Улучшенный скролл</strong> - добавлены стилизованные полосы прокрутки и автоматическая прокрутка к новым сообщениям</li>
|
|||
|
|
<li class="completed">✅ <strong>Поле ввода сообщений</strong> - добавлено удобное поле для ввода с кнопкой отправки и поддержкой Enter</li>
|
|||
|
|
<li class="completed">✅ <strong>Интеграция с n8n</strong> - восстановлена связка с n8n через n8n_proxy.php для обработки запросов</li>
|
|||
|
|
<li class="completed">✅ <strong>Автоматическая инициализация</strong> - при открытии drawer автоматически отправляется контекст CRM в n8n</li>
|
|||
|
|
<li class="completed">✅ <strong>Скрытие кнопки AI</strong> - кнопка AI скрывается когда drawer открыт</li>
|
|||
|
|
<li class="completed">✅ <strong>Стриминг сообщений</strong> - ответы ассистента появляются постепенно с эффектом печатания</li>
|
|||
|
|
<li class="completed">✅ <strong>Индикатор печатания</strong> - красивая анимация "печатает..." с точками</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="demo-buttons">
|
|||
|
|
<button class="demo-btn" onclick="openAIDrawer()">🚀 Открыть AI Drawer</button>
|
|||
|
|
<button class="demo-btn secondary" onclick="testFontSizes()">🔤 Тест размеров шрифта</button>
|
|||
|
|
<button class="demo-btn secondary" onclick="testAvatars()">😊 Тест аватарок</button>
|
|||
|
|
<button class="demo-btn secondary" onclick="testFloatingLoading()">⏳ Тест плавающей загрузки</button>
|
|||
|
|
<button class="demo-btn secondary" onclick="testScroll()">📜 Тест скролла</button>
|
|||
|
|
<button class="demo-btn secondary" onclick="testChatInput()">💬 Тест поля ввода</button>
|
|||
|
|
<button class="demo-btn secondary" onclick="testN8N()">🔗 Тест n8n</button>
|
|||
|
|
<button class="demo-btn secondary" onclick="testStreaming()">⌨️ Тест стриминга</button>
|
|||
|
|
<button class="demo-btn secondary" onclick="testTypingIndicator()">💬 Тест печатания</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="instructions">
|
|||
|
|
<h3>🎯 Как использовать:</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li><strong>Нажмите "Открыть AI Drawer"</strong> - откроется панель справа</li>
|
|||
|
|
<li><strong>Используйте кнопки размера шрифта</strong> - в верхней части панели есть кнопки для изменения размера текста</li>
|
|||
|
|
<li><strong>Выберите аватарку ассистента</strong> - кнопки с эмодзи для смены внешнего вида ассистента (🤖😊💡🧠)</li>
|
|||
|
|
<li><strong>Настройки сохраняются</strong> - выбранный размер шрифта и аватарка запоминаются в браузере</li>
|
|||
|
|
<li><strong>Плавающие уведомления</strong> - при обработке запросов появляется красивое уведомление в центре экрана</li>
|
|||
|
|
<li><strong>Автоматический скролл</strong> - новые сообщения автоматически прокручиваются в поле зрения</li>
|
|||
|
|
<li><strong>Поле ввода сообщений</strong> - внизу панели есть поле для ввода с кнопкой "Отправить" и поддержкой клавиши Enter</li>
|
|||
|
|
<li><strong>Интеграция с n8n</strong> - все сообщения отправляются в n8n через n8n_proxy.php для обработки</li>
|
|||
|
|
<li><strong>Автоматическая инициализация</strong> - при открытии drawer ассистент сразу получает контекст CRM</li>
|
|||
|
|
<li><strong>Умное скрытие кнопки</strong> - кнопка AI автоматически скрывается когда drawer открыт</li>
|
|||
|
|
<li><strong>Стриминг сообщений</strong> - ответы ассистента появляются постепенно с эффектом печатания</li>
|
|||
|
|
<li><strong>Индикатор печатания</strong> - красивая анимация "печатает..." с точками во время обработки</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="instructions">
|
|||
|
|
<h3>💡 Дополнительные возможности:</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>💾 <strong>Сохранение настроек</strong> - размер шрифта и аватарка сохраняются в localStorage</li>
|
|||
|
|
<li>🎨 <strong>Улучшенный дизайн</strong> - светлая тема с высоким контрастом для комфортной работы</li>
|
|||
|
|
<li>👁️ <strong>Максимальная читаемость</strong> - темный текст (#212529) на светлом фоне (#f8f9fa)</li>
|
|||
|
|
<li>🎯 <strong>Цветовое разделение</strong> - сообщения пользователя (синие) и ассистента (с синей полоской)</li>
|
|||
|
|
<li>😊 <strong>Дружелюбные аватарки</strong> - анимированные аватарки с разными характерами (робот, дружелюбный, помощник, умный)</li>
|
|||
|
|
<li>📱 <strong>Адаптивность</strong> - работает на мобильных устройствах</li>
|
|||
|
|
<li>⚡ <strong>Плавные анимации</strong> - все переходы и изменения происходят плавно</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Подключаем стили AI Drawer -->
|
|||
|
|
<link rel="stylesheet" href="layouts/v7/resources/css/ai-drawer.css">
|
|||
|
|
|
|||
|
|
<!-- Подключаем JavaScript -->
|
|||
|
|
<script src="layouts/v7/resources/js/ai-drawer.js"></script>
|
|||
|
|
<script src="ai_drawer_improvements.js"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
let aiDrawerInstance = null;
|
|||
|
|
|
|||
|
|
// Инициализируем AI Drawer при загрузке страницы
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
aiDrawerInstance = new AIDrawer();
|
|||
|
|
window.aiDrawerInstance = aiDrawerInstance; // Делаем доступным глобально
|
|||
|
|
console.log('AI Drawer инициализирован');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function openAIDrawer() {
|
|||
|
|
if (aiDrawerInstance) {
|
|||
|
|
aiDrawerInstance.open();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testFontSizes() {
|
|||
|
|
if (aiDrawerInstance) {
|
|||
|
|
aiDrawerInstance.open();
|
|||
|
|
|
|||
|
|
// Добавляем сообщение для демонстрации
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.addMessage('Это тестовое сообщение для демонстрации разных размеров шрифта. Попробуйте изменить размер с помощью кнопок выше!', false);
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testAvatars() {
|
|||
|
|
if (aiDrawerInstance) {
|
|||
|
|
aiDrawerInstance.open();
|
|||
|
|
|
|||
|
|
// Добавляем сообщения с разными аватарками
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.addMessage('Привет! Я робот-ассистент 🤖', false);
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.setAvatarType('friendly');
|
|||
|
|
aiDrawerInstance.addMessage('Теперь я дружелюбный ассистент 😊', false);
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.setAvatarType('helpful');
|
|||
|
|
aiDrawerInstance.addMessage('А теперь я помощник с идеями 💡', false);
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.setAvatarType('smart');
|
|||
|
|
aiDrawerInstance.addMessage('И наконец - умный ассистент 🧠', false);
|
|||
|
|
}, 2000);
|
|||
|
|
}, 2000);
|
|||
|
|
}, 2000);
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testFloatingLoading() {
|
|||
|
|
if (aiDrawerInstance) {
|
|||
|
|
aiDrawerInstance.open();
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.addMessage('Тестирую плавающий индикатор загрузки...', true);
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.showLoading('🤖 Обрабатываю ваш запрос...');
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.hideLoading();
|
|||
|
|
aiDrawerInstance.addMessage('Запрос успешно обработан! Плавающий индикатор работает корректно.', false);
|
|||
|
|
}, 3000);
|
|||
|
|
}, 1000);
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testScroll() {
|
|||
|
|
if (aiDrawerInstance) {
|
|||
|
|
aiDrawerInstance.open();
|
|||
|
|
|
|||
|
|
// Добавляем много сообщений для демонстрации скролла
|
|||
|
|
setTimeout(() => {
|
|||
|
|
for (let i = 1; i <= 10; i++) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.addMessage(`Тестовое сообщение номер ${i}. Это сообщение добавлено для демонстрации работы скролла в AI Drawer.`, i % 2 === 0);
|
|||
|
|
}, i * 200);
|
|||
|
|
}
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testChatInput() {
|
|||
|
|
if (aiDrawerInstance) {
|
|||
|
|
aiDrawerInstance.open();
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.addMessage('Теперь вы можете использовать поле ввода внизу! Попробуйте написать сообщение и нажать Enter или кнопку "Отправить".', false);
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testN8N() {
|
|||
|
|
if (aiDrawerInstance) {
|
|||
|
|
aiDrawerInstance.open();
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.addMessage('Тестирую интеграцию с n8n...', true);
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// Симулируем отправку сообщения в n8n
|
|||
|
|
aiDrawerInstance.sendToN8N('Привет! Это тестовое сообщение для проверки интеграции с n8n.');
|
|||
|
|
}, 1000);
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testStreaming() {
|
|||
|
|
if (aiDrawerInstance) {
|
|||
|
|
aiDrawerInstance.open();
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.addMessage('Тестирую стриминг сообщений...', true);
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const longText = "Это демонстрация стриминга сообщений! Текст появляется постепенно, символ за символом, создавая эффект печатания. Это делает интерфейс более живым и интересным. Пользователь видит, как ассистент 'печатает' ответ в реальном времени. Стриминг создает ощущение живого общения и делает интерфейс более интерактивным.";
|
|||
|
|
aiDrawerInstance.addStreamingMessage(longText, false, 20);
|
|||
|
|
}, 1000);
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testTypingIndicator() {
|
|||
|
|
if (aiDrawerInstance) {
|
|||
|
|
aiDrawerInstance.open();
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.addMessage('Тестирую индикатор печатания...', true);
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// Показываем индикатор печатания
|
|||
|
|
aiDrawerInstance.showTypingIndicator();
|
|||
|
|
|
|||
|
|
// Через 3 секунды скрываем и показываем сообщение
|
|||
|
|
setTimeout(() => {
|
|||
|
|
aiDrawerInstance.hideTypingIndicator();
|
|||
|
|
aiDrawerInstance.addStreamingMessage("Вот и готов ответ! Индикатор печатания исчез, и появился текст со стримингом.", false, 25);
|
|||
|
|
}, 3000);
|
|||
|
|
}, 1000);
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|